140 lines
4.4 KiB
Vue
140 lines
4.4 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="jyr">
|
|
<el-input v-model="formData.jyr" clearable placeholder="请输入员工姓名" @click="userclick('jyr')" />
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="8">
|
|
<el-form-item label="入职时间" prop="lwrq">
|
|
<el-date-picker class="flex-1 !flex" v-model="formData.lwrq" clearable type="datetime"
|
|
value-format="YYYY-MM-DD HH:mm:ss" placeholder="请选择入职时间">
|
|
</el-date-picker>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="8">
|
|
<el-form-item label="所在部门" prop="rzbm">
|
|
<el-select v-model="formData.rzbm" placeholder="请选择入职部门" class="flex-1">
|
|
<el-option :label="item.name" :value="item.name" v-for="item in deptList">
|
|
</el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="8">
|
|
<el-form-item label="担任职务" prop="drzw">
|
|
<el-select v-model="formData.drzw" placeholder="请选择担任职务" class="flex-1">
|
|
<el-option :label="item.name" :value="item.name" v-for="item in zwlist">
|
|
</el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
</el-col>
|
|
|
|
<el-col :span="8">
|
|
<el-form-item label="申请离职日期" prop="lwrq1">
|
|
<el-date-picker class="flex-1 !flex" v-model="formData.lwrq1" clearable type="datetime"
|
|
value-format="YYYY-MM-DD HH:mm:ss" placeholder="请选择申请离职日期">
|
|
</el-date-picker>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="8">
|
|
<el-form-item label="预计离职日期" prop="lwrq2">
|
|
<el-date-picker class="flex-1 !flex" v-model="formData.lwrq2" clearable type="datetime"
|
|
value-format="YYYY-MM-DD HH:mm:ss" placeholder="请选择预计离职日期">
|
|
</el-date-picker>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="8">
|
|
<el-form-item label="离职原因" prop="bz1">
|
|
<el-input v-model="formData.bz1" 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>
|
|
<div v-if="showPerDialog">
|
|
<personnelselector ref="personnel" @confirm="submituser" type="1">
|
|
</personnelselector>
|
|
</div>
|
|
</el-form>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { deptLists } from "@/api/org/department";
|
|
import { jobsLists } from '@/api/org/post'
|
|
|
|
let list = ['jyr', 'lwrq', 'wjmc', 'sex', 'rzbm', "drzw", 'lwrq1', 'lwrq2', 'bz1']
|
|
|
|
const qjlxList = reactive(['差旅费', '办公费', '招待费', '交通费', '通讯费', '采购付款', '其他'])
|
|
let props = defineProps({
|
|
formData: Object,
|
|
|
|
})
|
|
const formRef = ref(null)
|
|
|
|
|
|
|
|
const deptList = ref([])
|
|
const getDeptList = async () => {
|
|
const res = await deptLists()
|
|
deptList.value = res.lists
|
|
}
|
|
getDeptList()
|
|
|
|
|
|
const zwlist = ref([])
|
|
const getzwlist = async () => {
|
|
const res = await jobsLists()
|
|
zwlist.value = res.lists
|
|
}
|
|
getzwlist()
|
|
|
|
|
|
|
|
|
|
// 表单验证
|
|
const formRules = reactive({
|
|
})
|
|
|
|
const setRules = () => {
|
|
list.forEach(item => {
|
|
formRules[item] = [{
|
|
required: true,
|
|
message: '不可为空',
|
|
trigger: ['blur']
|
|
}]
|
|
})
|
|
}
|
|
|
|
setRules()
|
|
|
|
|
|
|
|
const showPerDialog = ref(false)
|
|
const personnel = ref(null)
|
|
|
|
let value
|
|
const userclick = async (val) => {
|
|
showPerDialog.value = true
|
|
value = val
|
|
await nextTick()
|
|
personnel.value.open()
|
|
}
|
|
const submituser = (e) => {
|
|
formData[value] = e.name
|
|
formData[value + "_id"] = e.id
|
|
showPerDialog.value = false
|
|
}
|
|
|
|
const check = async () => {
|
|
await formRef.value?.validate();
|
|
}
|
|
|
|
|
|
defineExpose({
|
|
check
|
|
});
|
|
</script> |