| | |
| | | <template> |
| | | <div> |
| | | <el-dialog |
| | | v-model="dialogFormVisible" |
| | | <el-dialog v-model="dialogFormVisible" |
| | | :title="operationType === 'add' ? '新增离职' : '编辑离职'" |
| | | width="70%" |
| | | @close="closeDia" |
| | | > |
| | | @close="closeDia"> |
| | | <!-- 员工信息展示区域 --> |
| | | <div class="info-section"> |
| | | <div class="info-title">员工信息</div> |
| | | <el-form :model="form" label-width="200px" label-position="left" :rules="rules" ref="formRef" style="margin-top: 20px"> |
| | | <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="staffOnJobId"> |
| | | <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" |
| | | <el-option v-for="item in personList" |
| | | :key="item.id" |
| | | :label="item.staffName" |
| | | :value="item.id" |
| | | /> |
| | | :value="item.id" /> |
| | | </el-select> |
| | | </el-form-item> |
| | | </el-col> |
| | |
| | | {{ currentStaffRecord.sex || '-' }} |
| | | </el-form-item> |
| | | </el-col> |
| | | <el-col :span="12"> |
| | | <el-form-item label="户籍住址:"> |
| | | {{ currentStaffRecord.nativePlace || '-' }} |
| | | </el-form-item> |
| | | </el-col> |
| | | </el-row> |
| | | <el-row :gutter="30"> |
| | | <el-col :span="12"> |
| | | <el-form-item label="岗位:"> |
| | | {{ currentStaffRecord.postName || '-' }} |
| | | </el-form-item> |
| | | </el-col> |
| | | <el-col :span="12"> |
| | | <el-form-item label="现住址:"> |
| | | {{ currentStaffRecord.adress || '-' }} |
| | | </el-form-item> |
| | | </el-col> |
| | | </el-row> |
| | |
| | | </el-row> |
| | | <el-row :gutter="30"> |
| | | <el-col :span="12"> |
| | | <el-form-item label="离职日期:" prop="leaveDate"> |
| | | <el-date-picker |
| | | v-model="form.leaveDate" |
| | | <el-form-item label="离职日期:" |
| | | prop="leaveDate"> |
| | | <el-date-picker v-model="form.leaveDate" |
| | | type="date" |
| | | :disabled="operationType === 'edit'" |
| | | :disabled-date="disabledFutureDate" |
| | | placeholder="请选择离职日期" |
| | | value-format="YYYY-MM-DD" |
| | | format="YYYY-MM-DD" |
| | | style="width: 100%" |
| | | /> |
| | | style="width: 100%" /> |
| | | </el-form-item> |
| | | </el-col> |
| | | <el-col :span="12"> |
| | | <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" |
| | | <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" |
| | | :label="item.label" |
| | | :value="item.value" |
| | | /> |
| | | :value="item.value" /> |
| | | </el-select> |
| | | </el-form-item> |
| | | </el-col> |
| | | </el-row> |
| | | <el-row :gutter="30"> |
| | | <el-col :span="12"> |
| | | <el-form-item label="备注:" prop="remark" v-if="form.reason === 'other'"> |
| | | <el-input |
| | | v-model="form.remark" |
| | | <el-form-item label="备注:" |
| | | prop="remark" |
| | | v-if="form.reason === 'other'"> |
| | | <el-input v-model="form.remark" |
| | | type="textarea" |
| | | :rows="3" |
| | | placeholder="备注" |
| | | maxlength="500" |
| | | show-word-limit |
| | | /> |
| | | show-word-limit /> |
| | | </el-form-item> |
| | | </el-col> |
| | | </el-row> |
| | | </el-form> |
| | | |
| | | <!-- <el-row :gutter="30">--> |
| | | <!-- <el-col :span="12">--> |
| | | <!-- <div class="info-item">--> |
| | |
| | | <!-- </el-col>--> |
| | | <!-- </el-row>--> |
| | | </div> |
| | | |
| | | <template #footer> |
| | | <div class="dialog-footer"> |
| | | <el-button type="primary" @click="submitForm">确认</el-button> |
| | | <el-button type="primary" |
| | | @click="submitForm">确认</el-button> |
| | | <el-button @click="closeDia">取消</el-button> |
| | | </div> |
| | | </template> |
| | |
| | | <script setup> |
| | | import {ref, reactive, toRefs, getCurrentInstance} from "vue"; |
| | | import {staffOnJobListPage} from "@/api/personnelManagement/staffOnJob.js"; |
| | | import {createStaffLeave, updateStaffLeave} from "@/api/personnelManagement/staffLeave.js"; |
| | | const { proxy } = getCurrentInstance() |
| | | const emit = defineEmits(['close']) |
| | | import { |
| | | createStaffLeave, |
| | | updateStaffLeave, |
| | | } from "@/api/personnelManagement/staffLeave.js"; |
| | | const { proxy } = getCurrentInstance(); |
| | | const emit = defineEmits(["close"]); |
| | | |
| | | const dialogFormVisible = ref(false); |
| | | const operationType = ref('') |
| | | const operationType = ref(""); |
| | | const getTodayDate = () => { |
| | | const now = new Date(); |
| | | const year = now.getFullYear(); |
| | | const month = `${now.getMonth() + 1}`.padStart(2, '0'); |
| | | const day = `${now.getDate()}`.padStart(2, '0'); |
| | | const month = `${now.getMonth() + 1}`.padStart(2, "0"); |
| | | const day = `${now.getDate()}`.padStart(2, "0"); |
| | | return `${year}-${month}-${day}`; |
| | | }; |
| | | |
| | | const disabledFutureDate = (time) => { |
| | | const disabledFutureDate = time => { |
| | | const todayEnd = new Date(); |
| | | todayEnd.setHours(23, 59, 59, 999); |
| | | return time.getTime() > todayEnd.getTime(); |
| | |
| | | }, |
| | | rules: { |
| | | staffName: [{ required: true, message: "请选择人员" }], |
| | | leaveDate: [{ required: true, message: "请选择离职日期", trigger: "change" }], |
| | | leaveDate: [ |
| | | { required: true, message: "请选择离职日期", trigger: "change" }, |
| | | ], |
| | | reason: [{ required: true, message: "请选择离职原因"}], |
| | | }, |
| | | dimissionReasonOptions: [ |
| | | {label: '薪资待遇', value: 'salary'}, |
| | | {label: '职业发展', value: 'career_development'}, |
| | | {label: '工作环境', value: 'work_environment'}, |
| | | {label: '个人原因', value: 'personal_reason'}, |
| | | {label: '其他', value: 'other'}, |
| | | { label: "薪资待遇", value: "salary" }, |
| | | { label: "职业发展", value: "career_development" }, |
| | | { label: "工作环境", value: "work_environment" }, |
| | | { label: "个人原因", value: "personal_reason" }, |
| | | { label: "其他", value: "other" }, |
| | | ], |
| | | currentStaffRecord: {}, |
| | | }); |
| | | const { form, rules, dimissionReasonOptions, currentStaffRecord } = toRefs(data); |
| | | const { form, rules, dimissionReasonOptions, currentStaffRecord } = |
| | | toRefs(data); |
| | | |
| | | // 打开弹框 |
| | | const openDialog = (type, row) => { |
| | | operationType.value = type; |
| | | dialogFormVisible.value = true; |
| | | if (operationType.value === 'edit') { |
| | | currentStaffRecord.value = row |
| | | form.value.staffOnJobId = row.staffOnJobId |
| | | form.value.leaveDate = row.leaveDate |
| | | form.value.reason = row.reason |
| | | form.value.remark = row.remark |
| | | if (operationType.value === "edit") { |
| | | currentStaffRecord.value = row; |
| | | form.value.staffOnJobId = row.staffOnJobId; |
| | | form.value.leaveDate = row.leaveDate; |
| | | form.value.reason = row.reason; |
| | | form.value.remark = row.remark; |
| | | personList.value = [ |
| | | { |
| | | staffName: row.staffName, |
| | | id: row.staffOnJobId, |
| | | } |
| | | ] |
| | | }, |
| | | ]; |
| | | } else { |
| | | form.value.leaveDate = getTodayDate() |
| | | getList() |
| | | form.value.leaveDate = getTodayDate(); |
| | | getList(); |
| | | } |
| | | } |
| | | }; |
| | | |
| | | const handleSelectDimissionReason = (val) => { |
| | | if (val === 'other') { |
| | | form.value.remark = '' |
| | | const handleSelectDimissionReason = val => { |
| | | if (val === "other") { |
| | | form.value.remark = ""; |
| | | } |
| | | } |
| | | }; |
| | | // 提交产品表单 |
| | | const submitForm = () => { |
| | | form.value.staffState = 0 |
| | | if (form.value.reason !== 'other') { |
| | | form.value.remark = '' |
| | | form.value.staffState = 0; |
| | | if (form.value.reason !== "other") { |
| | | form.value.remark = ""; |
| | | } |
| | | proxy.$refs["formRef"].validate(valid => { |
| | | if (valid) { |
| | |
| | | createStaffLeave(form.value).then(res => { |
| | | proxy.$modal.msgSuccess("提交成功"); |
| | | closeDia(); |
| | | }) |
| | | }); |
| | | } else { |
| | | updateStaffLeave(currentStaffRecord.value.id, form.value).then(res => { |
| | | proxy.$modal.msgSuccess("提交成功"); |
| | | closeDia(); |
| | | }) |
| | | }); |
| | | } |
| | | } |
| | | }) |
| | | |
| | | } |
| | | }); |
| | | }; |
| | | // 关闭弹框 |
| | | const closeDia = () => { |
| | | // 表单已注释,手动重置表单数据 |
| | |
| | | remark: "", |
| | | }; |
| | | dialogFormVisible.value = false; |
| | | emit('close') |
| | | emit("close"); |
| | | }; |
| | | |
| | | const personList = ref([]); |
| | |
| | | staffOnJobListPage({ |
| | | current: -1, |
| | | size: -1, |
| | | staffState: 1 |
| | | staffState: 1, |
| | | }).then(res => { |
| | | personList.value = res.data.records || [] |
| | | }) |
| | | personList.value = res.data.records || []; |
| | | }); |
| | | }; |
| | | |
| | | const handleSelect = (val) => { |
| | | let obj = personList.value.find(item => item.id === val) |
| | | currentStaffRecord.value = {} |
| | | const handleSelect = val => { |
| | | let obj = personList.value.find(item => item.id === val); |
| | | currentStaffRecord.value = {}; |
| | | if (obj) { |
| | | // 保留离职日期和离职原因,只更新员工信息 |
| | | currentStaffRecord.value = obj |
| | | currentStaffRecord.value = obj; |
| | | } |
| | | } |
| | | }; |
| | | defineExpose({ |
| | | openDialog, |
| | | }); |