93 lines
2.9 KiB
Vue
93 lines
2.9 KiB
Vue
<template>
|
|
<el-form ref="formRef" :model="formData" label-width="110px" :rules="formRules">
|
|
<el-row>
|
|
<el-col :span="8">
|
|
<el-form-item label="开始时间" prop="kssj">
|
|
<el-date-picker class="flex-1 !flex" v-model="formData.kssj" clearable type="datetime"
|
|
value-format="YYYY-MM-DD HH:mm:ss" placeholder="请选择开始时间" @change="calcDay">
|
|
</el-date-picker>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="8">
|
|
<el-form-item label="结束时间" prop="jssj">
|
|
<el-date-picker class="flex-1 !flex" v-model="formData.jssj" clearable type="datetime"
|
|
value-format="YYYY-MM-DD HH:mm:ss" placeholder="请选择结束时间" @change="calcDay">
|
|
</el-date-picker>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="8">
|
|
<el-form-item label="出差天数">
|
|
<el-input v-model="formData.qjts" clearable placeholder="请输入请假天数" />
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="8">
|
|
<el-form-item label="出差事由" prop="ccsy">
|
|
<el-input v-model="formData.ccsy" clearable placeholder="请输入请假事由" type="textarea" />
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="24">
|
|
<el-form-item label="附件">
|
|
<uploadAnnex :form-data="formData"></uploadAnnex>
|
|
</el-form-item>
|
|
</el-col>
|
|
|
|
</el-row>
|
|
|
|
</el-form>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
const qjlxList = reactive(['事假', '年假', '调休假', '病假', '婚假', '产假', '陪产假', '其他'])
|
|
const formData = reactive({})
|
|
const formRef = ref(null)
|
|
|
|
|
|
const checkDate = (rule: any, value: any, callback: any) => {
|
|
if (new Date(formData.jssj) < new Date(formData.kssj)) {
|
|
callback(new Error('结束时间不能早于开始时间'))
|
|
} else {
|
|
callback()
|
|
}
|
|
}
|
|
|
|
// 表单验证
|
|
const formRules = reactive({
|
|
qjlx: [{
|
|
required: true,
|
|
message: '不可为空',
|
|
trigger: ['blur']
|
|
}],
|
|
kssj: [{
|
|
required: true,
|
|
message: '不可为空',
|
|
trigger: ['blur']
|
|
}],
|
|
jssj: [
|
|
{
|
|
required: true,
|
|
message: '不可为空',
|
|
trigger: ['blur']
|
|
},
|
|
{
|
|
validator: checkDate,
|
|
trigger: ['blur']
|
|
}
|
|
],
|
|
ccsy: [{
|
|
required: true,
|
|
message: '不可为空',
|
|
trigger: ['blur']
|
|
}],
|
|
})
|
|
|
|
const calcDay = () => {
|
|
const date1 = formData.kssj;
|
|
const date2 = formData?.jssj;
|
|
if (date1 && date2) {
|
|
const timeDiff = new Date(date2).getTime() - new Date(date1).getTime();
|
|
const daysDiff = Math.ceil(timeDiff / (1000 * 3600 * 24));
|
|
formData.qjts = daysDiff || 0
|
|
}
|
|
}
|
|
|
|
</script> |