<script lang="ts" setup>
|
import type { HrmEmployeeApi } from '#/api/hrm/employee';
|
|
import { computed } from 'vue';
|
|
import { Descriptions, DescriptionsItem, Tabs, TabPane, Tag } from 'ant-design-vue';
|
|
import { DICT_TYPE } from '#/packages/constants/src';
|
import { getDictLabel } from '#/packages/effects/hooks/src';
|
|
import EducationList from './education-list.vue';
|
import WorkHistoryList from './work-history-list.vue';
|
import EmergencyContactList from './emergency-contact-list.vue';
|
import SocialSecurityList from './social-security-list.vue';
|
|
const props = defineProps<{
|
employee: HrmEmployeeApi.Employee;
|
}>();
|
|
const genderLabel = computed(() =>
|
getDictLabel(DICT_TYPE.HRM_GENDER, props.employee.gender),
|
);
|
|
const employeeStatusLabel = computed(() =>
|
getDictLabel(DICT_TYPE.HRM_EMPLOYEE_STATUS, props.employee.employeeStatus),
|
);
|
|
const employeeStatusColor = computed(() => {
|
const status = props.employee.employeeStatus;
|
if (status === 1) return 'success';
|
if (status === 2) return 'processing';
|
if (status === 3) return 'default';
|
return 'default';
|
});
|
</script>
|
|
<template>
|
<div class="employee-detail">
|
<!-- 基本信息 -->
|
<Descriptions title="基本信息" bordered :column="2" class="mb-4">
|
<DescriptionsItem label="员工编号">{{ employee.employeeNo }}</DescriptionsItem>
|
<DescriptionsItem label="员工姓名">{{ employee.name }}</DescriptionsItem>
|
<DescriptionsItem label="性别">{{ genderLabel }}</DescriptionsItem>
|
<DescriptionsItem label="出生日期">{{ employee.birthday || '-' }}</DescriptionsItem>
|
<DescriptionsItem label="手机号码">{{ employee.phone }}</DescriptionsItem>
|
<DescriptionsItem label="邮箱">{{ employee.email || '-' }}</DescriptionsItem>
|
<DescriptionsItem label="身份证号">{{ employee.idCard || '-' }}</DescriptionsItem>
|
<DescriptionsItem label="员工状态">
|
<Tag :color="employeeStatusColor">{{ employeeStatusLabel }}</Tag>
|
</DescriptionsItem>
|
</Descriptions>
|
|
<!-- 工作信息 -->
|
<Descriptions title="工作信息" bordered :column="2" class="mb-4">
|
<DescriptionsItem label="归属部门">{{ employee.deptName || '-' }}</DescriptionsItem>
|
<DescriptionsItem label="岗位">{{ employee.postName || '-' }}</DescriptionsItem>
|
<DescriptionsItem label="入职日期">{{ employee.hireDate }}</DescriptionsItem>
|
<DescriptionsItem label="转正日期">{{ employee.regularDate || '-' }}</DescriptionsItem>
|
<DescriptionsItem label="离职日期">{{ employee.leaveDate || '-' }}</DescriptionsItem>
|
<DescriptionsItem label="基本工资">{{ employee.baseSalary ? `¥${employee.baseSalary.toFixed(2)}` : '-' }}</DescriptionsItem>
|
<DescriptionsItem label="用户角色" :span="2">
|
{{ Array.isArray(employee.roleNames) ? employee.roleNames.join('、') : employee.roleNames || '-' }}
|
</DescriptionsItem>
|
<DescriptionsItem label="年假余额">{{ employee.annualLeaveBalance ?? 0 }} 天</DescriptionsItem>
|
<DescriptionsItem label="病假余额">{{ employee.sickLeaveBalance ?? 0 }} 天</DescriptionsItem>
|
</Descriptions>
|
|
<!-- 财务信息 -->
|
<Descriptions title="财务信息" bordered :column="2" class="mb-4">
|
<DescriptionsItem label="开户银行">{{ employee.bankName || '-' }}</DescriptionsItem>
|
<DescriptionsItem label="银行账号">{{ employee.bankAccount || '-' }}</DescriptionsItem>
|
<DescriptionsItem label="居住地址" :span="2">{{ employee.address || '-' }}</DescriptionsItem>
|
</Descriptions>
|
|
<!-- 备注 -->
|
<Descriptions title="其他信息" bordered :column="1" class="mb-4">
|
<DescriptionsItem label="备注">{{ employee.remark || '-' }}</DescriptionsItem>
|
</Descriptions>
|
|
<!-- 子表信息 -->
|
<Tabs v-if="employee.id" class="mt-4">
|
<Tabs.TabPane key="education" tab="教育经历">
|
<EducationList form-type="detail" :employee-id="employee.id" />
|
</Tabs.TabPane>
|
<Tabs.TabPane key="workHistory" tab="工作经历">
|
<WorkHistoryList form-type="detail" :employee-id="employee.id" />
|
</Tabs.TabPane>
|
<Tabs.TabPane key="emergencyContact" tab="紧急联系人">
|
<EmergencyContactList form-type="detail" :employee-id="employee.id" />
|
</Tabs.TabPane>
|
<Tabs.TabPane key="socialSecurity" tab="社保公积金档案">
|
<SocialSecurityList form-type="detail" :employee-id="employee.id" :user-id="employee.userId" />
|
</Tabs.TabPane>
|
</Tabs>
|
</div>
|
</template>
|
|
<style scoped>
|
.employee-detail {
|
padding: 0 16px;
|
}
|
</style>
|
