factory_mp/pages/hrm/leave_form.vue

<!-- 请假申请 -->
<template>
	<view class="container">
		<scroll-view scroll-y style="padding-bottom: 180rpx;background-color: #fff;">
			<uni-forms v-model="form" label-width="150rpx"  ref="customForm" :rules="customRules">
				<ticketd :ticket_="form.ticket_"></ticketd>
				<uni-forms-item label="部门">
					<uni-easyinput v-model="form.belong_dept_name" placeholder="请输入岗位" :disabled="true" v-if="mode!='show'"/>
					<span v-else>{{form.belong_dept_name}}</span>
				</uni-forms-item>
				<uni-forms-item label="员工信息">
					<span>{{form.employee_name}}</span>
				</uni-forms-item>
				<uni-forms-item label="人员岗位">
					<uni-easyinput v-model="form.post_name" placeholder="请输入需求岗位" :disabled="true" v-if="mode!='show'"/>
					<span v-else>{{form.post_name}}</span>
				</uni-forms-item>
				<uni-forms-item label="请假时长（一天8h计算）" required>
					<uni-number-box v-model="form.hour" :min="0" v-if="mode!='show'"></uni-number-box>
					<span v-else>{{form.hour}}小时</span>
				</uni-forms-item>
				<uni-forms-item label="开始日期" required>
					<uni-datetime-picker type="datetime" :clear-icon="false" v-model="form.start_date" v-if="mode!='show'"/>
					<span v-else>{{form.start_date}}</span>
				</uni-forms-item>
				<uni-forms-item label="结束日期" required>
					<uni-datetime-picker type="datetime" :clear-icon="false" v-model="form.end_date" v-if="mode!='show'"/>
					<span v-else>{{form.end_date}}</span>
				</uni-forms-item>
				<uni-forms-item label="请假类型" required>
					<uni-data-select
					  v-if="mode!='show'"
					  v-model="form.leave_type"
					  :localdata="leaveList"
					  :disabled="mode=='show'"
					  @change="leaveChange" 
					></uni-data-select>
					<span v-else>{{getLabel(leaveList,form.leave_type) }}</span>
				</uni-forms-item>
				
				<uni-forms-item label-width="100" label="请假事由" required>
					<textarea placeholder-style="color:#efefef" v-model="form.reason"  placeholder="" style="width:100%; border: 2upx solid #e5e5e5;padding: 10upx;"/>
				</uni-forms-item>
				<uni-forms-item label="上传附件" v-if="showUpload">
					<xtUpload v-model="form.file" xtype="path" :disabled="mode=='show'"></xtUpload>
				</uni-forms-item>
			</uni-forms>
		</scroll-view>
		<view class="footer_fixed">
			<button v-if="mode=='edit'" size="mini" @click="handleDel" :loading="saveLoading" :disabled="saveLoading" type="warn">
				删除
			</button>
			<button v-if="mode!='show'" size="mini" @click="handleSave" :loading="saveLoading" :disabled="saveLoading" type="primary">
				提交审批
			</button>
			<ticketd_b :workflow_key="'wf_leave'" v-if="form.ticket_ && mode == 'show'" :t_id="form.id" :ticket_="form.ticket_" 
			:ticket_data="ticket_data" @success="()=>{uni.navigateBack()}" ref="ticketd_b"></ticketd_b>
		</view>
	</view>
</template>

<script>
import ticketd_b from "../wf/ticketd_b.vue"
import ticketd from "../wf/ticketd.vue"
import {actStateEnum} from "@/utils/enum.js"
	export default {
		components: { ticketd_b, ticketd },
		data(){
			return{
				saveLoading: false,
				mode:"show",
				t_id: null,
				form:{},
				ticket_data:{},
				userInfo:{},
				type:0,
				leaveList: [
					{ value: 10, text: '事假' },
					{ value: 20, text: '病假' },
					{ value: 30, text: '婚假' },
					{ value: 40, text: '丧假' },
					{ value: 50, text: '公假' },
					{ value: 60, text: '工伤' },
					{ value: 70, text: '产假' },
					{ value: 80, text: '护理假' },
					{ value: 90, text: '其他' }
				],
				customRules: {
					start_date: {
						rules: [{
							required: true,
							errorMessage: '不能为空'
						}]
					},
					end_date: {
						rules: [{
							required: true,
							errorMessage: '不能为空'
						}]
					}
				},
			}
		},
		async onLoad(options) {
			let that = this;
			that.mode = options.mode?options.mode:'show';
			that.t_id = options.t_id?options.t_id:null;
			if(that.t_id) {
					const res = await that.$api.leaveItem(that.t_id);
					this.form = res
					await this.fillNames()
					if(that.form.ticket_.state_.type == 1 && that.form.create_by == uni.getStorageSync("userInfo").id ) {
						that.mode = "edit";
					}else{
						that.mode = "show";
					}
				}
			else{
				that.fillNames();
			}
		},
		computed: {
			showUpload() {
				return [20, 30, 40, 70].includes(this.form.leave_type)
			}
		},
		methods:{
			async fillNames(){
				const employee = await this.$api.employeeInfo()
				this.form.employee_name = employee.name
				this.form.belong_dept_name = employee.belong_dept_name
				this.form.post_name = employee.post_name
				this.form.employee = employee.id;
                this.mode = "add";
			},
			async handleDel(){
				let that = this;
				await that.$api.leaveDelete(that.form.id)
				uni.navigateBack()
			},
			async handleSave(){
				let that = this;
				that.$refs.customForm.validate().then(res => {
					
				}).catch(err => {
					console.log('err', err);
				})
				await that.$api.leaveCreate(that.form)
				uni.navigateBack()
			},
			getLabel(list, value) {
				if (!list || value === undefined || value === null) return ''
					const item = list.find(i => String(i.value) === String(value))
					return item ? item.text : ''
			},
			leaveChange(val) {
				const map = {
                10: '事假',
                20: '病假',
                30: '婚假',
                40: '丧假',
                50: '公假',
                60: '工伤',
                70: '产假',
                80: '护理假',
                90: '其他',
          }
          this.form.leave_type_name = map[val] || ''
			},
		},
		
	}
</script>

<style scoped>
	.uni-data-checklist .checklist-group .checklist-box{
		margin: 10px 0!important;
	}
	.flex_file_picker>.uni-file-picker__files{
		flex-direction: row;
	}
	.flex_file_picker{
		width: 90px;
		flex: none;
	}
</style>