You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
461 lines
16 KiB
461 lines
16 KiB
<!-- @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>
|
|
|