<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="身份证号">{{ formData.identityCard || '-' }}</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.signDate || '-' }}</el-descriptions-item>
|
<el-descriptions-item label="劳动合同期限选择">
|
<span v-if="formData.dateSelect === 'A'">A、有固定期限</span>
|
<span v-else-if="formData.dateSelect === 'B'">B、无固定期限</span>
|
<span v-else-if="formData.dateSelect === 'C'">C、以完成一定工作任务为期限</span>
|
<span v-else>-</span>
|
</el-descriptions-item>
|
<el-descriptions-item label="合同年限">{{ formattedContractTerm }}</el-descriptions-item>
|
<el-descriptions-item label="试用期开始日期" v-if="formData.dateSelect === 'A' || formData.dateSelect === 'B'">
|
{{ formData.trialStartDate || '-' }}
|
</el-descriptions-item>
|
<el-descriptions-item label="试用期结束日期" v-if="formData.dateSelect === 'A' || formData.dateSelect === 'B'">
|
{{ formData.trialEndDate || '-' }}
|
</el-descriptions-item>
|
<el-descriptions-item label="试用期工资" v-if="formData.dateSelect === 'A' || formData.dateSelect === 'B'">
|
{{ formData.proSalary ? formData.proSalary.toFixed(2) : '-' }}
|
</el-descriptions-item>
|
<el-descriptions-item label="合同开始日期">{{ calculatedContractStart }}</el-descriptions-item>
|
<el-descriptions-item label="合同结束日期">{{ formData.contractEndTime || '-' }}</el-descriptions-item>
|
<el-descriptions-item label="工资报酬" :span="2">
|
<span v-if="formData.salarySelect === 'A'">
|
A、乙方的工资报酬按照甲方依法制定的规章制度中的内部工资分配办法确定，根据乙方的工作岗位确定其每月工资。
|
</span>
|
<span v-else-if="formData.salarySelect === 'B'">
|
B、甲方对乙方实行基本工资和绩效工资相结合的内部工资分配办法，乙方的收入包括基本工资、误餐、交通、生活住宿等各项补助，如有变动根据内部工资分配办法调整其工资；绩效工资根据乙方的工作业绩、劳动成果和实际贡献按照内部分配办法考核确定。
|
</span>
|
<span v-else-if="formData.salarySelect === 'C'">
|
C、甲方实行计件工资制，以甲方接到订单及公司生产计划，按照定额和计件单价，根据乙方完成的业绩，按时足额支付乙方的工资报酬。
|
</span>
|
<span v-else>-</span>
|
</el-descriptions-item>
|
<el-descriptions-item label="福利待遇" :span="2">{{ formData.remark || '-' }}</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: "",
|
contractEndTime: "",
|
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.contractEndTime;
|
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>
|
