| | |
| | | width="70%" |
| | | @close="closeDia" |
| | | > |
| | | <PIMTable |
| | | rowKey="id" |
| | | :column="tableColumn" |
| | | :tableData="tableData" |
| | | :tableLoading="tableLoading" |
| | | height="600" |
| | | ></PIMTable> |
| | | <!-- 按照入职新增弹窗字段展示基础信息和合同信息 --> |
| | | <el-descriptions class="detail-descriptions" :column="2" border size="small"> |
| | | <el-descriptions-item label="员工编号"> |
| | | {{ formData.staffNo || '-' }} |
| | | </el-descriptions-item> |
| | | <el-descriptions-item label="姓名"> |
| | | {{ formData.staffName || '-' }} |
| | | </el-descriptions-item> |
| | | <el-descriptions-item label="性别"> |
| | | {{ formData.sex || '-' }} |
| | | </el-descriptions-item> |
| | | <el-descriptions-item label="年龄"> |
| | | {{ formData.age || '-' }} |
| | | </el-descriptions-item> |
| | | <el-descriptions-item label="户籍住址" :span="2"> |
| | | {{ formData.nativePlace || '-' }} |
| | | </el-descriptions-item> |
| | | <el-descriptions-item label="现住址" :span="2"> |
| | | {{ formData.adress || '-' }} |
| | | </el-descriptions-item> |
| | | <el-descriptions-item label="岗位"> |
| | | {{ formData.postJob || '-' }} |
| | | </el-descriptions-item> |
| | | <el-descriptions-item label="第一学历"> |
| | | {{ formData.firstStudy || '-' }} |
| | | </el-descriptions-item> |
| | | <el-descriptions-item label="专业"> |
| | | {{ formData.profession || '-' }} |
| | | </el-descriptions-item> |
| | | <el-descriptions-item label="联系电话"> |
| | | {{ formData.phone || '-' }} |
| | | </el-descriptions-item> |
| | | <el-descriptions-item label="紧急联系人"> |
| | | {{ formData.emergencyContact || '-' }} |
| | | </el-descriptions-item> |
| | | <el-descriptions-item label="紧急联系人电话"> |
| | | {{ formData.emergencyContactPhone || '-' }} |
| | | </el-descriptions-item> |
| | | <el-descriptions-item label="合同开始日期"> |
| | | {{ formData.contractStartTime || '-' }} |
| | | </el-descriptions-item> |
| | | <el-descriptions-item label="合同结束日期"> |
| | | {{ formData.contractExpireTime || '-' }} |
| | | </el-descriptions-item> |
| | | <el-descriptions-item label="合同年限"> |
| | | {{ formattedContractTerm }} |
| | | </el-descriptions-item> |
| | | </el-descriptions> |
| | | <template #footer> |
| | | <div class="dialog-footer"> |
| | | <el-button @click="closeDia">取消</el-button> |
| | | <el-button @click="closeDia">关闭</el-button> |
| | | </div> |
| | | </template> |
| | | </el-dialog> |
| | |
| | | </template> |
| | | |
| | | <script setup> |
| | | import {ref} from "vue"; |
| | | import {staffOnJobInfo} from "@/api/personnelManagement/employeeRecord.js"; |
| | | const { proxy } = getCurrentInstance() |
| | | import {ref, reactive, computed} from "vue"; |
| | | import dayjs from "dayjs"; |
| | | const emit = defineEmits(['close']) |
| | | |
| | | const dialogFormVisible = ref(false); |
| | | const operationType = ref('') |
| | | const tableColumn = ref([ |
| | | // { |
| | | // label: "合同年限", |
| | | // prop: "contractTerm", |
| | | // }, |
| | | { |
| | | label: "合同开始日期", |
| | | prop: "contractStartTime", |
| | | }, |
| | | { |
| | | label: "合同结束日期", |
| | | prop: "contractEndTime", |
| | | }, |
| | | ]); |
| | | const tableData = ref([]); |
| | | const tableLoading = ref(false); |
| | | const formData = reactive({ |
| | | staffNo: "", |
| | | staffName: "", |
| | | sex: "", |
| | | identityCard: "", |
| | | nativePlace: "", |
| | | postJob: "", |
| | | adress: "", |
| | | firstStudy: "", |
| | | profession: "", |
| | | age: 0, |
| | | phone: "", |
| | | emergencyContact: "", |
| | | emergencyContactPhone: "", |
| | | dateSelect: "", |
| | | trialStartDate: "", |
| | | trialEndDate: "", |
| | | proSalary: null, |
| | | signDate: "", |
| | | salarySelect: "", |
| | | contractStartTime: "", |
| | | contractExpireTime: "", |
| | | contractTerm: null, |
| | | remark: "", |
| | | }); |
| | | |
| | | const formattedContractTerm = computed(() => { |
| | | const value = formData.contractTerm; |
| | | if (value === null || value === undefined || value === "") { |
| | | return "-"; |
| | | } |
| | | const numberValue = Number(value); |
| | | if (!isNaN(numberValue)) { |
| | | return `${numberValue}年`; |
| | | } |
| | | return value; |
| | | }); |
| | | |
| | | const calculatedContractStart = computed(() => { |
| | | const endDate = formData.contractExpireTime; |
| | | const termValue = formData.contractTerm; |
| | | const numberValue = Number(termValue); |
| | | if (!endDate || isNaN(numberValue)) { |
| | | return formData.contractStartTime || "-"; |
| | | } |
| | | const start = dayjs(endDate).subtract(numberValue, "year"); |
| | | if (!start.isValid()) { |
| | | return formData.contractStartTime || "-"; |
| | | } |
| | | return start.format("YYYY-MM-DD"); |
| | | }); |
| | | |
| | | // 打开弹框 |
| | | const openDialog = (type, row) => { |
| | | operationType.value = type; |
| | | dialogFormVisible.value = true; |
| | | if (operationType.value === 'edit') { |
| | | staffOnJobInfo({staffNo: row.staffNo}).then(res => { |
| | | tableData.value = res.data |
| | | }) |
| | | // 重置表单数据 |
| | | Object.keys(formData).forEach(key => { |
| | | if (key === 'age') { |
| | | formData[key] = 0; |
| | | } else if (["proSalary", "contractTerm"].includes(key)) { |
| | | formData[key] = null; |
| | | } else { |
| | | formData[key] = ""; |
| | | } |
| | | }); |
| | | |
| | | if (operationType.value === 'edit' && row) { |
| | | // 直接使用 row 数据赋值 |
| | | Object.assign(formData, row); |
| | | } |
| | | } |
| | | |
| | |
| | | </script> |
| | | |
| | | <style scoped> |
| | | .detail-descriptions { |
| | | margin-bottom: 16px; |
| | | border-radius: 6px; |
| | | overflow: hidden; |
| | | } |
| | | |
| | | .detail-descriptions :deep(.el-descriptions__cell) { |
| | | padding: 12px 16px !important; |
| | | } |
| | | |
| | | .detail-descriptions :deep(.el-descriptions__label) { |
| | | width: 140px; |
| | | color: #606266; |
| | | background-color: #f7f9fc; |
| | | font-weight: 500; |
| | | } |
| | | |
| | | .detail-descriptions :deep(.el-descriptions__content) { |
| | | color: #303133; |
| | | line-height: 20px; |
| | | } |
| | | </style> |