<script lang="ts" setup>
|
import type { HrmEmployeeSocialSecurityApi } from '#/api/hrm/salary/employee-social-security';
|
import type { HrmSocialSecuritySchemeApi } from '#/api/hrm/salary/social-security-scheme';
|
|
import { computed, ref } from 'vue';
|
|
import { useVbenModal } from '#/packages/effects/common-ui/src';
|
|
import { message, Form, FormItem, Select, InputNumber, DatePicker, RadioGroup, Textarea } from 'ant-design-vue';
|
|
import {
|
createEmployeeSocialSecurity,
|
getEmployeeSocialSecurity,
|
updateEmployeeSocialSecurity,
|
} from '#/api/hrm/salary/employee-social-security';
|
import { $t } from '#/locales';
|
|
const emit = defineEmits(['success']);
|
const formType = ref<'create' | 'update'>('create');
|
const userId = ref<number>();
|
const schemeList = ref<HrmSocialSecuritySchemeApi.SocialSecurityScheme[]>([]);
|
|
const formState = ref<HrmEmployeeSocialSecurityApi.EmployeeSocialSecurity>({
|
userId: undefined,
|
socialSecuritySchemeId: undefined,
|
socialSecurityBase: 0,
|
housingFundBase: 0,
|
effectiveDate: undefined,
|
status: 0,
|
remark: '',
|
});
|
|
const getTitle = computed(() =>
|
formType.value === 'update' ? '修改社保公积金档案' : '新增社保公积金档案',
|
);
|
|
const rules = {
|
socialSecuritySchemeId: [{ required: true, message: '请选择社保方案' }],
|
socialSecurityBase: [{ required: true, message: '请输入社保基数' }],
|
housingFundBase: [{ required: true, message: '请输入公积金基数' }],
|
effectiveDate: [{ required: true, message: '请选择生效日期' }],
|
};
|
|
const [Modal, modalApi] = useVbenModal({
|
async onConfirm() {
|
try {
|
const data = { ...formState.value, userId: userId.value };
|
if (formState.value.id) {
|
await updateEmployeeSocialSecurity(data);
|
} else {
|
await createEmployeeSocialSecurity(data);
|
}
|
await modalApi.close();
|
emit('success');
|
message.success($t('ui.actionMessage.operationSuccess'));
|
} finally {
|
modalApi.unlock();
|
}
|
},
|
async onOpenChange(isOpen: boolean) {
|
if (!isOpen) {
|
return;
|
}
|
const data = modalApi.getData<{
|
formType: 'create' | 'update';
|
id?: number;
|
userId?: number;
|
schemeList?: HrmSocialSecuritySchemeApi.SocialSecurityScheme[];
|
}>();
|
formType.value = data.formType;
|
userId.value = data.userId;
|
schemeList.value = data.schemeList || [];
|
|
// 重置表单
|
formState.value = {
|
userId: data.userId,
|
socialSecuritySchemeId: undefined,
|
socialSecurityBase: 0,
|
housingFundBase: 0,
|
effectiveDate: undefined,
|
status: 0,
|
remark: '',
|
};
|
|
if (data?.id) {
|
modalApi.lock();
|
try {
|
const detail = await getEmployeeSocialSecurity(data.id);
|
formState.value = detail;
|
} finally {
|
modalApi.unlock();
|
}
|
}
|
},
|
});
|
</script>
|
|
<template>
|
<Modal :title="getTitle" class="w-[700px]">
|
<Form
|
:model="formState"
|
:rules="rules"
|
:label-col="{ style: { width: '100px' } }"
|
layout="horizontal"
|
>
|
<FormItem label="社保方案" name="socialSecuritySchemeId">
|
<Select
|
v-model:value="formState.socialSecuritySchemeId"
|
:options="schemeList.map(s => ({ label: s.name, value: s.id }))"
|
placeholder="请选择社保公积金方案"
|
/>
|
</FormItem>
|
|
<FormItem label="社保基数" name="socialSecurityBase">
|
<InputNumber
|
v-model:value="formState.socialSecurityBase"
|
:min="0"
|
:precision="2"
|
style="width: 100%"
|
placeholder="请输入社保基数"
|
/>
|
</FormItem>
|
|
<FormItem label="公积金基数" name="housingFundBase">
|
<InputNumber
|
v-model:value="formState.housingFundBase"
|
:min="0"
|
:precision="2"
|
style="width: 100%"
|
placeholder="请输入公积金基数"
|
/>
|
</FormItem>
|
|
<FormItem label="生效日期" name="effectiveDate">
|
<DatePicker
|
v-model:value="formState.effectiveDate"
|
value-format="YYYY-MM-DD"
|
style="width: 100%"
|
placeholder="请选择生效日期"
|
/>
|
</FormItem>
|
|
<FormItem label="状态" name="status">
|
<RadioGroup
|
v-model:value="formState.status"
|
:options="[
|
{ label: '启用', value: 0 },
|
{ label: '禁用', value: 1 },
|
]"
|
/>
|
</FormItem>
|
|
<FormItem label="备注">
|
<Textarea
|
v-model:value="formState.remark"
|
:rows="2"
|
placeholder="请输入备注"
|
/>
|
</FormItem>
|
</Form>
|
</Modal>
|
</template>
|
