push
This commit is contained in:
xuziqiang
461
lib/saas/view/userManage/userList/edit.vue
Normal file
461
lib/saas/view/userManage/userList/edit.vue
Normal file
@@ -0,0 +1,461 @@
|
||||
<!-- @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>
|
||||
Reference in New Issue
Block a user