<!-- @format -->
<template>
<ns-view-add-form
:schemas="formSchema"
title="编辑员工"
:model="data"
api="/api/parking_merchant/objs/person/update" />
</template>
<script lang="ts">
import { defineComponent, reactive, ref } from 'vue';
import moment from 'moment';
import { http } from '/nerv-lib/util/http';
import { useRouter } from 'vue-router';
export default defineComponent({
name: 'NsViewUserEdit',
setup() {
const data = reactive({});
const router = useRouter();
const params = router.currentRoute.value.query;
const homeAddress = ref('');
const provinceCode = ref('');
const areaCode = ref('');
const cityCode = ref('');
const personPicImageUrl = ref('');
const idCardImageUrl = ref('');
if (params.personUuid !== undefined) {
http
.get(`/api/parking_merchant/objs/person/detail`, { personUuid: params.personUuid })
.then((res) => {
data.personName = res.data.personName;
data.sex = res.data.sex;
data.sexName = res.data.sex ? '男' : '女';
data.personNum = res.data.personNum;
data.idCard = res.data.idCard;
data.major = res.data.major;
data.address = res.data.address;
data.graduatedSchool = res.data.graduatedSchool;
data.residenceAddress = res.data.residenceAddress;
data.telNum = res.data.telNum;
data.remarks = res.data.remarks;
data.education = res.data.education;
data.maritalStatus = res.data.maritalStatus;
data.personStatus = res.data.personStatus;
data.nation = res.data.nation;
data.homeAddress = res.data.homeAddress;
data.areaCode = res.data.areaCode;
data.cityCode = res.data.cityCode; //moment(new Date()).format('YYYY-MM-DD 23:59:59')
data.entryTime = moment(new Date(res.data.entryTime)).format('x');
data.provinceCode = res.data.provinceCode;
homeAddress.value = res.data.homeAddress;
areaCode.value = res.data.areaCode;
cityCode.value = res.data.cityCode;
provinceCode.value = res.data.provinceCode;
personPicImageUrl.value = `/api/parking_merchant/objs/sys/ParkPic/${res.data.personPicUuid}`;
idCardImageUrl.value = `/api/parking_merchant/objs/sys/IdCardPic/${res.data.idCardPicUuid}`;
// formSchema.value.filter(
// (item) => item.field === 'avatar'
// )[0].componentProps.baseImageUrl = `/api/community/objs/ParkPic/${data.avatar}`;
})
.catch((err) => {
console.log(err);
});
}
let formSchema = reactive([
{
label: '用户uuid',
field: 'personUuid',
component: 'NsInputText',
show: false,
defaultValue: params.personUuid,
},
{
field: 'information',
label: '基本信息',
displayFormItem: false,
class: 'ns-form-item-full',
component: 'NsChildForm',
componentProps: {
title: '基本信息',
schemas: [
{
field: 'personName',
label: '姓名',
component: 'NsInputText',
},
{
field: 'sexName',
component: 'NsInputText',
label: '性别',
viewOnly: true,
},
{
field: 'sex',
component: 'NsInputText',
show: false,
label: '性别',
},
{
field: 'personNum',
label: '员工编号',
component: 'NsInputText',
},
{
field: 'idCard',
label: '身份证号',
component: 'NsInputText',
// rules: [
// {
// pattern:
// '^[1-9]\\d{5}(18|19|20)\\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\\d{3}[0-9Xx]$',
// message: '请输入正确的身份证号',
// trigger: 'blur',
// },
// ],
},
{
field: 'telNum',
label: '手机号码',
component: 'NsInput',
rules: [
{
required: true,
message: '手机号码不能为空',
trigger: 'change',
},
{
pattern: '^[1][3456789][\\d]{9}$',
message: '请输入正确的中国大陆手机号',
trigger: 'blur',
},
],
},
{
field: 'nation',
component: 'nsSelectApi',
label: '民族',
componentProps: {
api: '/api/community/objs/DictItem',
params: {
pageSize: 100,
code: 'MZ',
},
placeholder: '请选择用户民族',
resultField: 'data',
labelField: 'dictName',
valueField: 'dictValue',
immediate: true,
autoSelectFirst: false,
},
rules: [
// {
// required: true,
// message: '请选择民族',
// },
],
},
{
field: 'departmentUuidList',
component: 'nsSelectApi',
label: '所属部门',
componentProps: {
api: '/api/community/objs/Department',
params: {
pageSize: 100,
},
mode: 'multiple',
resultField: 'data.data',
labelField: 'departmentName',
valueField: 'departmentUuid',
autoSelectFirst: false,
},
},
{
field: 'departmentMainUuid',
component: 'nsSelectApi',
label: '主部门',
params: {
departmentUuidList: 'fieldLink.departmentUuidList',
},
componentProps: {
api: '/api/community/objs/Department',
resultField: 'data.data',
labelField: 'departmentName',
valueField: 'departmentUuid',
autoSelectFirst: false,
dependency: 'departmentUuidList',
},
},
{
field: 'homeAddress',
label: '居住地址',
component: 'NsInputCity',
componentProps: {
api: '/api/parking_merchant/objs/BaseArea',
defaultHomeAddress: homeAddress,
defaultProvinceCode: provinceCode,
defaultCityCode: cityCode,
defaultAreaCode: areaCode,
},
fieldMap: ['homeAddress', 'provinceCode', 'cityCode', 'areaCode'],
rules: [
// {
// required: true,
// message: '不能为空',
// },
],
},
{
field: 'address',
label: '详细地址',
component: 'NsInput',
rules: [
// {
// required: true,
// trigger: 'blur',
// },
{
pattern:
'^[a-zA-Z\\d\u4e00-\u9fa5]{0,36}$|^[\u4e00-\u9fa5][a-zA-Z\\d\u4e00-\u9fa5]{0,36}[\u4e00-\u9fa5]$',
message: '不支持特殊字符、空格，长度不得超过36个字符，中文占2位',
trigger: 'blur',
},
],
},
{
field: 'personStatus',
component: 'NsSelect',
label: '状态',
componentProps: {
options: [
{
label: '在职',
value: 1,
},
{
label: '离职',
value: 2,
},
],
labelField: 'label',
valueField: 'value',
immediate: false,
// defaultValue: 1,
},
rules: [
{
required: true,
message: '不能为空',
},
],
},
{
field: 'personPicUuid',
component: 'NsUpload',
label: '员工图片',
componentProps: {
// 上传的地址
url: '/api/parking_merchant/objs/sys/FileUpload',
// 上传的图片大小
maxSize: 5242880,
// 上传的图片类型
fileType: ['jpg', 'png', 'jpeg'],
// 展示图片数量
count: 1,
// 上传的文件类型，0-证书，1-图片，2-身份证件
uploadType: 1,
fieldName: 'certificateUuid',
baseImageUrl: personPicImageUrl,
},
},
{
field: 'idCardPicUuid',
component: 'NsUpload',
label: '身份证扫描件',
componentProps: {
// 上传的地址
url: '/api/parking_merchant/objs/sys/FileUpload',
// 上传的图片大小
maxSize: 5242880,
// 上传的图片类型
fileType: ['jpg', 'png', 'jpeg'],
// 展示图片数量
count: 1,
// 上传的文件类型，0-证书，1-图片，2-身份证件
uploadType: 2,
baseImageUrl: idCardImageUrl,
},
// rules: [
// {
// required: true,
// message: '请上传图片',
// },
// ],
},
],
},
},
{
field: 'location',
label: '其他信息',
displayFormItem: false,
class: 'ns-form-item-full',
component: 'NsChildForm',
componentProps: {
title: '其他信息',
schemas: [
{
field: 'maritalStatus',
component: 'nsSelectApi',
label: '婚姻状况',
componentProps: {
api: '/api/community/objs/DictItem',
params: {
code: 'HYZK',
},
resultField: 'data',
labelField: 'dictName',
valueField: 'dictValue',
immediate: true,
autoSelectFirst: false,
},
// rules: [
// {
// required: true,
// message: '不能为空',
// },
// ],
},
{
field: 'education',
component: 'nsSelectApi',
// type: 'WHCD',
label: '文化程度',
componentProps: {
api: '/api/community/objs/DictItem',
params: {
code: 'WHCD',
},
resultField: 'data',
labelField: 'dictName',
valueField: 'dictValue',
immediate: true,
defaultValue: '4',
autoSelectFirst: false,
},
// rules: [
// {
// required: true,
// message: '不能为空',
// },
// ],
},
{
field: 'entryTime',
component: 'NsDatePicker',
label: '入职日期',
componentProps: {
valueFormat: 'x',
format: 'YYYY-MM-DD',
},
// rules: [
// {
// required: true,
// message: '不能为空',
// },
// ],
},
{
field: 'graduatedSchool',
label: '毕业院校',
component: 'NsInput',
rules: [
// {
// required: true,
// message: '毕业院校不能为空',
// trigger: 'blur',
// },
{
pattern:
/^[a-zA-Z\\d\u4e00-\u9fa5]{0,24}$|^[\u4e00-\u9fa5][a-zA-Z\\d\u4e00-\u9fa5]{0,24}[\u4e00-\u9fa5]$/,
message: '不支持特殊字符、空格，长度不得超过24个字符，中文占2位',
trigger: 'blur',
},
],
},
{
field: 'major',
label: '所属专业',
component: 'NsInput',
rules: [
{
pattern:
/^[a-zA-Z\\d\u4e00-\u9fa5]{0,24}$|^[\u4e00-\u9fa5][a-zA-Z\\d\u4e00-\u9fa5]{0,24}[\u4e00-\u9fa5]$/,
message: '不支持特殊字符、空格，长度不得超过24个字符，中文占2位',
trigger: 'blur',
},
],
},
{
field: 'email',
label: '邮箱地址',
component: 'NsInput',
rules: [
{
pattern: /^\w+@[a-z0-9]+\.[a-z]{2,4}$/,
message: '邮箱格式不正确',
trigger: 'blur',
},
],
},
{
field: 'residenceAddress',
label: '户籍地址',
component: 'NsInput',
rules: [
{
pattern:
/^[a-zA-Z\\d\u4e00-\u9fa5]{0,64}$|^[\u4e00-\u9fa5][a-zA-Z\\d\u4e00-\u9fa5]{0,64}[\u4e00-\u9fa5]$/,
message: '不支持特殊字符、空格，长度不得超过64个字符，中文占2位',
trigger: 'blur',
},
],
},
{
field: 'remarks',
label: '备注',
component: 'NsTextarea',
rules: [
{
pattern: /^[\u4e00-\u9fa5]{0,120}$|^.{0,255}$/,
message: '0-255个字符，中文占2位',
trigger: 'blur',
},
],
},
],
},
},
]);
return {
formSchema,
data,
};
},
});
</script>
<style scoped lang="less">
.top {
border-bottom-color: #ecedef;
border-bottom-style: solid;
border-bottom-width: 1px;
}
</style>