<template>
|
<div>
|
<el-dialog
|
v-model="dialogFormVisible"
|
title="详情"
|
width="70%"
|
@close="closeDia"
|
>
|
<!-- 按照入职新增弹窗字段展示基础信息和合同信息 -->
|
<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>
|
</div>
|
</template>
|
</el-dialog>
|
</div>
|
</template>
|
|
<script setup>
|
import {ref, reactive, computed} from "vue";
|
import dayjs from "dayjs";
|
const emit = defineEmits(['close'])
|
|
const dialogFormVisible = ref(false);
|
const operationType = ref('')
|
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;
|
// 重置表单数据
|
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);
|
}
|
}
|
|
// 关闭弹框
|
const closeDia = () => {
|
dialogFormVisible.value = false;
|
emit('close')
|
};
|
defineExpose({
|
openDialog,
|
});
|
</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>
|
