<script lang="ts" setup>
|
import type { FormType } from './form.vue';
|
import type { HrmEmployeeSocialSecurityApi } from '#/api/hrm/salary/employee-social-security';
|
|
import { ref, computed, watch } from 'vue';
|
|
import { useVbenModal } from '#/packages/effects/common-ui/src';
|
|
import { message, Table, Tag, Button } from 'ant-design-vue';
|
|
import { ACTION_ICON, TableAction } from '#/adapter/vxe-table';
|
import {
|
createEmployeeSocialSecurity,
|
deleteEmployeeSocialSecurity,
|
getEmployeeSocialSecurityListByUser,
|
updateEmployeeSocialSecurity,
|
} from '#/api/hrm/salary/employee-social-security';
|
import { getSocialSecuritySchemeList } from '#/api/hrm/salary/social-security-scheme';
|
import { $t } from '#/locales';
|
|
import SocialSecurityForm from './social-security-form.vue';
|
|
const props = defineProps<{
|
employeeId?: number;
|
userId?: number;
|
formType?: FormType;
|
}>();
|
|
const emit = defineEmits(['refresh']);
|
|
const list = ref<HrmEmployeeSocialSecurityApi.EmployeeSocialSecurity[]>([]);
|
const schemeList = ref<any[]>([]);
|
const loading = ref(false);
|
|
const [FormModal, formModalApi] = useVbenModal({
|
connectedComponent: SocialSecurityForm,
|
destroyOnClose: true,
|
});
|
|
/** 刷新列表 */
|
async function handleRefresh() {
|
if (!props.userId) return;
|
loading.value = true;
|
try {
|
list.value = await getEmployeeSocialSecurityListByUser(props.userId);
|
} finally {
|
loading.value = false;
|
}
|
emit('refresh');
|
}
|
|
/** 新增档案 */
|
function handleCreate() {
|
formModalApi.setData({
|
formType: 'create',
|
userId: props.userId,
|
schemeList: schemeList.value,
|
}).open();
|
}
|
|
/** 编辑档案 */
|
function handleEdit(row: HrmEmployeeSocialSecurityApi.EmployeeSocialSecurity) {
|
formModalApi.setData({
|
formType: 'update',
|
id: row.id,
|
userId: props.userId,
|
schemeList: schemeList.value,
|
}).open();
|
}
|
|
/** 删除档案 */
|
async function handleDelete(row: HrmEmployeeSocialSecurityApi.EmployeeSocialSecurity) {
|
await deleteEmployeeSocialSecurity(row.id!);
|
message.success($t('ui.actionMessage.deleteSuccess', ['社保公积金档案']));
|
handleRefresh();
|
}
|
|
/** 获取方案列表 */
|
async function getSchemeList() {
|
schemeList.value = await getSocialSecuritySchemeList({ status: 0 });
|
}
|
|
/** 监听 userId 变化 */
|
watch(
|
() => props.userId,
|
(val) => {
|
if (val) {
|
handleRefresh();
|
getSchemeList();
|
}
|
},
|
{ immediate: true },
|
);
|
|
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',
|
},
|
{
|
title: '操作',
|
key: 'action',
|
width: 150,
|
fixed: 'right',
|
},
|
];
|
|
const isDetail = computed(() => props.formType === 'detail');
|
</script>
|
|
<template>
|
<div class="social-security-list">
|
<FormModal @success="handleRefresh" />
|
|
<!-- 工具栏 -->
|
<div v-if="!isDetail" class="mb-3">
|
<Button type="primary" @click="handleCreate">
|
新增社保公积金档案
|
</Button>
|
</div>
|
|
<!-- 表格 -->
|
<Table
|
:columns="columns"
|
:data-source="list"
|
:loading="loading"
|
: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 v-else-if="column.key === 'action' && !isDetail">
|
<TableAction
|
:actions="[
|
{
|
label: $t('common.edit'),
|
type: 'link',
|
icon: ACTION_ICON.EDIT,
|
onClick: handleEdit.bind(null, record),
|
},
|
{
|
label: $t('common.delete'),
|
type: 'link',
|
danger: true,
|
icon: ACTION_ICON.DELETE,
|
popConfirm: {
|
title: $t('ui.actionMessage.deleteConfirm', ['社保公积金档案']),
|
confirm: handleDelete.bind(null, record),
|
},
|
},
|
]"
|
/>
|
</template>
|
</template>
|
</Table>
|
</div>
|
</template>
|
|
<style scoped>
|
.social-security-list {
|
padding: 0;
|
}
|
</style>
|
