| | |
| | | <el-form :model="form" label-width="200px" label-position="left" :rules="rules" ref="formRef" style="margin-top: 20px"> |
| | | <el-row :gutter="30"> |
| | | <el-col :span="12"> |
| | | <el-form-item label="姓名:" prop="staffName"> |
| | | <el-select v-model="form.staffName" placeholder="请选择人员" style="width: 100%" @change="handleSelect"> |
| | | <el-form-item label="姓名:" prop="staffOnJobId"> |
| | | <el-select v-model="form.staffOnJobId" |
| | | placeholder="请选择人员" |
| | | style="width: 100%" |
| | | :disabled="operationType === 'edit'" |
| | | @change="handleSelect"> |
| | | <el-option |
| | | v-for="item in personList" |
| | | :key="item.id" |
| | | :label="item.staffName" |
| | | :value="item.staffName" |
| | | :value="item.id" |
| | | /> |
| | | </el-select> |
| | | </el-form-item> |
| | | </el-col> |
| | | <el-col :span="12"> |
| | | <el-form-item label="员工编号:"> |
| | | {{ form.staffNo || '-' }} |
| | | {{ currentStaffRecord.staffNo || '-' }} |
| | | </el-form-item> |
| | | </el-col> |
| | | </el-row> |
| | | <el-row :gutter="30"> |
| | | <el-col :span="12"> |
| | | <el-form-item label="性别:"> |
| | | {{ form.sex || '-' }} |
| | | {{ currentStaffRecord.sex || '-' }} |
| | | </el-form-item> |
| | | </el-col> |
| | | <el-col :span="12"> |
| | | <el-form-item label="户籍住址:"> |
| | | {{ form.nativePlace || '-' }} |
| | | {{ currentStaffRecord.nativePlace || '-' }} |
| | | </el-form-item> |
| | | </el-col> |
| | | </el-row> |
| | | <el-row :gutter="30"> |
| | | <el-col :span="12"> |
| | | <el-form-item label="岗位:"> |
| | | {{ form.postName || '-' }} |
| | | {{ currentStaffRecord.postName || '-' }} |
| | | </el-form-item> |
| | | </el-col> |
| | | <el-col :span="12"> |
| | | <el-form-item label="现住址:"> |
| | | {{ form.adress || '-' }} |
| | | {{ currentStaffRecord.adress || '-' }} |
| | | </el-form-item> |
| | | </el-col> |
| | | </el-row> |
| | | <el-row :gutter="30"> |
| | | <el-col :span="12"> |
| | | <el-form-item label="第一学历:"> |
| | | {{ form.firstStudy || '-' }} |
| | | {{ currentStaffRecord.firstStudy || '-' }} |
| | | </el-form-item> |
| | | </el-col> |
| | | <el-col :span="12"> |
| | | <el-form-item label="专业:"> |
| | | {{ form.profession || '-' }} |
| | | {{ currentStaffRecord.profession || '-' }} |
| | | </el-form-item> |
| | | </el-col> |
| | | </el-row> |
| | | <el-row :gutter="30"> |
| | | <el-col :span="12"> |
| | | <el-form-item label="年龄:"> |
| | | {{ form.age || '-' }} |
| | | {{ currentStaffRecord.age || '-' }} |
| | | </el-form-item> |
| | | </el-col> |
| | | </el-row> |
| | | <el-row :gutter="30"> |
| | | <el-col :span="12"> |
| | | <el-form-item label="联系电话:"> |
| | | {{ form.phone || '-' }} |
| | | {{ currentStaffRecord.phone || '-' }} |
| | | </el-form-item> |
| | | </el-col> |
| | | <el-col :span="12"> |
| | | <el-form-item label="紧急联系人:"> |
| | | {{ form.emergencyContact || '-' }} |
| | | {{ currentStaffRecord.emergencyContact || '-' }} |
| | | </el-form-item> |
| | | </el-col> |
| | | </el-row> |
| | | <el-row :gutter="30"> |
| | | <el-col :span="12"> |
| | | <el-form-item label="紧急联系人联系电话:"> |
| | | {{ form.emergencyContactPhone || '-' }} |
| | | {{ currentStaffRecord.emergencyContactPhone || '-' }} |
| | | </el-form-item> |
| | | </el-col> |
| | | </el-row> |
| | | <el-row :gutter="30"> |
| | | <el-col :span="12"> |
| | | <el-form-item label="合同开始日期:"> |
| | | {{ form.contractStartTime || '-' }} |
| | | </el-form-item> |
| | | </el-col> |
| | | <el-col :span="12"> |
| | | <el-form-item label="合同结束日期:"> |
| | | {{ form.contractEndTime || '-' }} |
| | | </el-form-item> |
| | | </el-col> |
| | | </el-row> |
| | | <el-row :gutter="30"> |
| | | <el-col :span="12"> |
| | | <el-form-item label="离职原因:" prop="dimissionReason"> |
| | | <el-select v-model="form.dimissionReason" placeholder="请选择离职原因" style="width: 100%" @change="handleSelectDimissionReason"> |
| | | <el-form-item label="离职原因:" prop="reason"> |
| | | <el-select v-model="form.reason" placeholder="请选择离职原因" style="width: 100%" @change="handleSelectDimissionReason"> |
| | | <el-option |
| | | v-for="(item, index) in dimissionReasonOptions" |
| | | :key="index" |
| | |
| | | </el-form-item> |
| | | </el-col> |
| | | <el-col :span="12"> |
| | | <el-form-item label="备注:" prop="dimissionRemark" v-show="form.dimissionReason === 'other'"> |
| | | <el-form-item label="备注:" prop="remark" v-if="form.reason === 'other'"> |
| | | <el-input |
| | | v-model="form.dimissionRemark" |
| | | v-model="form.remark" |
| | | type="textarea" |
| | | v-show="form.dimissionReason === 'other'" |
| | | :rows="3" |
| | | placeholder="备注" |
| | | maxlength="500" |
| | |
| | | <!-- <el-col :span="12">--> |
| | | <!-- <div class="info-item">--> |
| | | <!-- <span class="info-label">离职原因:</span>--> |
| | | <!-- <el-select v-model="form.dimissionReason" placeholder="请选择人员" style="width: 100%" @change="handleSelect">--> |
| | | <!-- <el-select v-model="form.reason" placeholder="请选择人员" style="width: 100%" @change="handleSelect">--> |
| | | <!-- <el-option--> |
| | | <!-- v-for="(item, index) in dimissionReasonOptions"--> |
| | | <!-- :key="index"--> |
| | |
| | | |
| | | <script setup> |
| | | import {ref, reactive, toRefs, getCurrentInstance} from "vue"; |
| | | import {getStaffJoinInfo, staffJoinAdd, staffJoinUpdate} from "@/api/personnelManagement/onboarding.js"; |
| | | import { staffOnJobListPage } from "@/api/personnelManagement/employeeRecord.js"; |
| | | import {staffOnJobListPage} from "@/api/personnelManagement/staffOnJob.js"; |
| | | import {createStaffLeave, updateStaffLeave} from "@/api/personnelManagement/staffLeave.js"; |
| | | const { proxy } = getCurrentInstance() |
| | | const emit = defineEmits(['close']) |
| | | |
| | |
| | | const operationType = ref('') |
| | | const data = reactive({ |
| | | form: { |
| | | staffNo: "", |
| | | staffName: "", |
| | | sex: "", |
| | | nativePlace: "", |
| | | postName: "", |
| | | sysPostId: 0, |
| | | adress: "", |
| | | firstStudy: "", |
| | | profession: "", |
| | | age: 0, |
| | | phone: "", |
| | | emergencyContact: "", |
| | | emergencyContactPhone: "", |
| | | contractTerm: 0, |
| | | contractStartTime: "", |
| | | contractEndTime: "", |
| | | dimissionDate: "", |
| | | dimissionReason: "", |
| | | dimissionRemark: "", |
| | | staffState: "", |
| | | staffOnJobId: undefined, |
| | | reason: "", |
| | | remark: "", |
| | | }, |
| | | rules: { |
| | | staffName: [{ required: true, message: "请选择人员" }], |
| | | dimissionReason: [{ required: true, message: "请选择离职原因"}], |
| | | reason: [{ required: true, message: "请选择离职原因"}], |
| | | }, |
| | | dimissionReasonOptions: [ |
| | | {label: '薪资待遇', value: 'salary'}, |
| | |
| | | {label: '工作环境', value: 'work_environment'}, |
| | | {label: '个人原因', value: 'personal_reason'}, |
| | | {label: '其他', value: 'other'}, |
| | | ] |
| | | ], |
| | | currentStaffRecord: {}, |
| | | }); |
| | | const { form, rules, dimissionReasonOptions } = toRefs(data); |
| | | const { form, rules, dimissionReasonOptions, currentStaffRecord } = toRefs(data); |
| | | |
| | | // 打开弹框 |
| | | const openDialog = (type, row) => { |
| | | getList() |
| | | operationType.value = type; |
| | | dialogFormVisible.value = true; |
| | | if (operationType.value === 'edit') { |
| | | getStaffJoinInfo(row.id).then(res => { |
| | | form.value = {...res.data} |
| | | }) |
| | | currentStaffRecord.value = row |
| | | form.value.staffOnJobId = row.staffOnJobId |
| | | form.value.reason = row.reason |
| | | form.value.remark = row.remark |
| | | personList.value = [ |
| | | { |
| | | staffName: row.staffName, |
| | | id: row.staffOnJobId, |
| | | } |
| | | ] |
| | | } else { |
| | | getList() |
| | | } |
| | | } |
| | | |
| | | const handleSelectDimissionReason = (val) => { |
| | | if (val === 'other') { |
| | | form.value.dimissionRemark = '' |
| | | form.value.remark = '' |
| | | } |
| | | } |
| | | // 提交产品表单 |
| | | const submitForm = () => { |
| | | form.value.staffState = 0 |
| | | if (form.value.dimissionReason !== 'other') { |
| | | form.value.dimissionRemark = '' |
| | | } |
| | | if (!form.value.sysPostId) { |
| | | form.value.sysPostId = 0; |
| | | if (form.value.reason !== 'other') { |
| | | form.value.remark = '' |
| | | } |
| | | proxy.$refs["formRef"].validate(valid => { |
| | | if (valid) { |
| | | if (operationType.value === "add") { |
| | | staffJoinAdd(form.value).then(res => { |
| | | createStaffLeave(form.value).then(res => { |
| | | proxy.$modal.msgSuccess("提交成功"); |
| | | closeDia(); |
| | | }) |
| | | } else { |
| | | staffJoinUpdate(form.value).then(res => { |
| | | updateStaffLeave(currentStaffRecord.value.id, form.value).then(res => { |
| | | proxy.$modal.msgSuccess("提交成功"); |
| | | closeDia(); |
| | | }) |
| | |
| | | const closeDia = () => { |
| | | // 表单已注释,手动重置表单数据 |
| | | form.value = { |
| | | staffNo: "", |
| | | staffName: "", |
| | | sex: "", |
| | | nativePlace: "", |
| | | postName: "", |
| | | sysPostId: 0, |
| | | adress: "", |
| | | firstStudy: "", |
| | | profession: "", |
| | | age: 0, |
| | | phone: "", |
| | | emergencyContact: "", |
| | | emergencyContactPhone: "", |
| | | contractTerm: 0, |
| | | contractStartTime: "", |
| | | contractEndTime: "", |
| | | dimissionDate: "", |
| | | dimissionReason: "", |
| | | staffState: "", |
| | | staffOnJobId: undefined, |
| | | reason: "", |
| | | remark: "", |
| | | }; |
| | | dialogFormVisible.value = false; |
| | | emit('close') |
| | |
| | | }; |
| | | |
| | | const handleSelect = (val) => { |
| | | let obj = personList.value.find(item => item.staffName === val) |
| | | let obj = personList.value.find(item => item.id === val) |
| | | currentStaffRecord.value = {} |
| | | if (obj) { |
| | | let { |
| | | sex, |
| | | phone, |
| | | staffNo, |
| | | nativePlace, |
| | | postName, |
| | | sysPostId, |
| | | adress, |
| | | firstStudy, |
| | | profession, |
| | | age, |
| | | emergencyContact, |
| | | emergencyContactPhone, |
| | | contractTerm, |
| | | contractStartTime, |
| | | contractEndTime, |
| | | staffName |
| | | } = obj |
| | | // 保留离职日期和离职原因,只更新员工信息 |
| | | form.value = { |
| | | ...form.value, |
| | | sex, |
| | | phone, |
| | | staffNo, |
| | | nativePlace, |
| | | postName, |
| | | sysPostId, |
| | | adress, |
| | | firstStudy, |
| | | profession, |
| | | age, |
| | | emergencyContact, |
| | | emergencyContactPhone, |
| | | contractTerm, |
| | | contractStartTime, |
| | | contractEndTime, |
| | | staffName |
| | | } |
| | | currentStaffRecord.value = obj |
| | | } |
| | | } |
| | | defineExpose({ |