<script lang="ts" setup>
|
import type { HrmEmployeeSocialSecurityApi } from '#/api/hrm/salary/employee-social-security';
|
|
import { ref } from 'vue';
|
|
import { useVbenModal } from '#/packages/effects/common-ui/src';
|
|
import { Table, Tag } from 'ant-design-vue';
|
|
import { getEmployeeSocialSecurityListByUser } from '#/api/hrm/salary/employee-social-security';
|
|
const historyList = ref<HrmEmployeeSocialSecurityApi.EmployeeSocialSecurity[]>([]);
|
const userName = ref<string>('');
|
|
const columns = [
|
{ title: '社保方案', dataIndex: 'schemeName', width: 180 },
|
{ title: '社保基数', dataIndex: 'socialSecurityBase', width: 100 },
|
{ title: '公积金基数', dataIndex: 'housingFundBase', width: 100 },
|
{ title: '生效日期', dataIndex: 'effectiveDate', width: 110 },
|
{
|
title: '状态',
|
dataIndex: 'status',
|
width: 80,
|
key: 'status',
|
},
|
];
|
|
const [Modal, modalApi] = useVbenModal({
|
async onOpenChange(isOpen: boolean) {
|
if (!isOpen) {
|
historyList.value = [];
|
return;
|
}
|
const data = modalApi.getData<{ userId: number; userName: string }>();
|
userName.value = data.userName;
|
modalApi.lock();
|
try {
|
historyList.value = await getEmployeeSocialSecurityListByUser(data.userId);
|
} finally {
|
modalApi.unlock();
|
}
|
},
|
});
|
</script>
|
|
<template>
|
<Modal :title="`${userName} - 社保公积金历史记录`" class="w-[600px]" :footer="null">
|
<Table
|
:columns="columns"
|
:data-source="historyList"
|
:pagination="false"
|
size="small"
|
row-key="id"
|
>
|
<template #bodyCell="{ column, record }">
|
<template v-if="column.key === 'status'">
|
<Tag :color="record.status === 0 ? 'success' : 'default'">
|
{{ record.status === 0 ? '启用' : '禁用' }}
|
</Tag>
|
</template>
|
</template>
|
</Table>
|
</Modal>
|
</template>
|
