<template>
|
<ProForm :model="detail" ref="dialogForm" label-width="120px" is-read>
|
<ProFormCol>
|
<ProFormColItem :span="12">
|
<ProFormItemV2 label="姓名：" prop="name">
|
<ProFormText v-model.trim="detail.name"></ProFormText>
|
</ProFormItemV2>
|
</ProFormColItem>
|
<ProFormColItem :span="12">
|
<ProFormItemV2 label="实名时间：" prop="userRealTime">
|
<div>{{ format(detail.userRealTime, 'YYYY-MM-DD HH:mm') }}</div>
|
</ProFormItemV2>
|
</ProFormColItem>
|
</ProFormCol>
|
<ProFormCol>
|
<ProFormColItem :span="12">
|
<ProFormItemV2 label="身份证号：" prop="identity">
|
<ProFormText v-model.trim="detail.identity"></ProFormText>
|
</ProFormItemV2>
|
</ProFormColItem>
|
</ProFormCol>
|
<ProFormCol>
|
<ProFormColItem :span="12">
|
<ProFormItemV2 label="手机号：" prop="contactPhoneNumber">
|
<ProFormText v-model.trim="detail.contactPhoneNumber"></ProFormText>
|
</ProFormItemV2>
|
</ProFormColItem>
|
</ProFormCol>
|
<ProFormCol>
|
<ProFormColItem :span="12">
|
<ProFormItemV2 label="性别：" prop="gender">
|
<ProFormRadio
|
v-model="detail.gender"
|
:value-enum="EnumUserGenderTextForPerson"
|
></ProFormRadio>
|
</ProFormItemV2>
|
</ProFormColItem>
|
</ProFormCol>
|
<ProFormCol>
|
<ProFormColItem :span="12">
|
<ProFormItemV2 label="年龄：" prop="age">
|
<ProFormInputNumber v-model="detail.age"> </ProFormInputNumber>
|
</ProFormItemV2>
|
</ProFormColItem>
|
</ProFormCol>
|
<ProFormItemV2 label="身份证正面：" prop="identityImg">
|
<ProFormImageUpload v-model:file-url="detail.identityImg"> </ProFormImageUpload>
|
</ProFormItemV2>
|
<ProFormItemV2 label="身份证反面：" prop="identityBackImg">
|
<ProFormImageUpload v-model:file-url="detail.identityBackImg"> </ProFormImageUpload>
|
</ProFormItemV2>
|
</ProForm>
|
</template>
|
|
<script setup lang="ts">
|
import {
|
ProForm,
|
ProFormCol,
|
ProFormColItem,
|
ProFormItemV2,
|
ProFormText,
|
ProFormInputNumber,
|
ProFormImageUpload,
|
ProFormRadio,
|
UploadUserFile,
|
} from '@bole-core/components';
|
import { convertApi2FormUrlOnlyOne, format } from '@/utils';
|
import { useQuery } from '@tanstack/vue-query';
|
import { EnumUserGender, EnumUserGenderTextForPerson } from '@/constants';
|
import * as enterpriseEmployeeServices from '@/services/api/enterpriseEmployee';
|
|
defineOptions({
|
name: 'StaffDetailInfoView',
|
});
|
|
type Form = {
|
id: string;
|
};
|
|
const form = defineModel<Form>('form');
|
|
const detail = reactive({
|
name: '',
|
identity: '',
|
contactPhoneNumber: '',
|
gender: EnumUserGender.Male,
|
age: 0,
|
identityImg: [] as UploadUserFile[],
|
identityBackImg: [] as UploadUserFile[],
|
userRealTime: '',
|
});
|
|
const { isLoading } = useQuery({
|
queryKey: ['enterpriseEmployeeServices/getEnterpriseEmployee', form.value.id],
|
queryFn: async () => {
|
return await enterpriseEmployeeServices.getEnterpriseEmployee({ id: form.value.id });
|
},
|
onSuccess(data) {
|
detail.name = data.name;
|
detail.identity = data.identity;
|
detail.contactPhoneNumber = data.contactPhoneNumber;
|
detail.gender = data.gender;
|
detail.age = data.age ?? 0;
|
detail.identityImg = data.identityImg ? convertApi2FormUrlOnlyOne(data.identityImg) : [];
|
detail.identityBackImg = data.identityBackImg
|
? convertApi2FormUrlOnlyOne(data.identityBackImg)
|
: [];
|
detail.userRealTime = data.userRealTime ?? '';
|
},
|
enabled: computed(() => !!form.value.id),
|
});
|
</script>
|
