482 lines
16 KiB
Vue
482 lines
16 KiB
Vue
<!-- @format -->
|
||
|
||
<template>
|
||
<ns-view-add-form
|
||
:schemas="formSchema"
|
||
title="新增员工"
|
||
:model="data"
|
||
api="/api/parking_merchant/objs/person/add" />
|
||
</template>
|
||
<script lang="ts">
|
||
import { defineComponent, reactive } from 'vue';
|
||
import { dateUtil } from '/nerv-lib/util/date-util';
|
||
|
||
export default defineComponent({
|
||
name: 'NsViewUserAdd',
|
||
|
||
setup() {
|
||
const data = reactive({});
|
||
|
||
let formSchema = reactive([
|
||
{
|
||
field: 'information',
|
||
label: '基本信息',
|
||
displayFormItem: false,
|
||
class: 'ns-form-item-full',
|
||
component: 'NsChildForm',
|
||
componentProps: {
|
||
title: '基本信息',
|
||
schemas: [
|
||
{
|
||
field: 'personName',
|
||
label: '姓名',
|
||
component: 'NsInput',
|
||
rules: [
|
||
{
|
||
required: true,
|
||
trigger: 'change',
|
||
},
|
||
{
|
||
pattern: /^[\u4E00-\u9FA5]{1,18}$/,
|
||
message: '只支持中文，长度不得超过36个字符',
|
||
trigger: 'change',
|
||
},
|
||
],
|
||
},
|
||
{
|
||
field: 'sex',
|
||
component: 'NsRadioGroup',
|
||
label: '性别',
|
||
defaultValue: 1,
|
||
componentProps: {
|
||
styleType: { flex: true },
|
||
options: [
|
||
{
|
||
label: '男',
|
||
value: 1,
|
||
},
|
||
{
|
||
label: '女',
|
||
value: 0,
|
||
},
|
||
],
|
||
},
|
||
rules: [
|
||
{
|
||
required: true,
|
||
message: '不能为空',
|
||
},
|
||
],
|
||
},
|
||
{
|
||
field: 'personNum',
|
||
label: '员工编号',
|
||
component: 'NsInput',
|
||
rules: [
|
||
{
|
||
required: true,
|
||
message: '员工编号不能为空',
|
||
trigger: 'blur',
|
||
},
|
||
{
|
||
pattern: /^[a-zA-Z\d]{0,16}$/,
|
||
message: '不支持特殊字符、中文、空格，长度不得超过16个字符',
|
||
trigger: 'blur',
|
||
},
|
||
],
|
||
},
|
||
{
|
||
field: 'idCard',
|
||
label: '身份证号',
|
||
component: 'NsInput',
|
||
rules: [
|
||
// {
|
||
// required: true,
|
||
// trigger: 'blur',
|
||
// },
|
||
{
|
||
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: 'roleUuid',
|
||
// component: 'nsSelectApi',
|
||
// label: '员工角色',
|
||
// componentProps: {
|
||
// api: '/api/community/objs/Role',
|
||
// params: {
|
||
// pageSize: 100,
|
||
// },
|
||
// resultField: 'data.data',
|
||
// labelField: 'roleName',
|
||
// valueField: 'roleUuid',
|
||
// immediate: true,
|
||
// autoSelectFirst: false,
|
||
// },
|
||
// rules: [
|
||
// {
|
||
// required: false,
|
||
// message: '请选择角色',
|
||
// },
|
||
// ],
|
||
// },
|
||
{
|
||
field: 'homeAddress',
|
||
label: '居住地址',
|
||
component: 'NsInputCity',
|
||
componentProps: {
|
||
api: '/api/parking_merchant/objs/BaseArea',
|
||
},
|
||
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',
|
||
|
||
// imgUrl: '/api/community/objs/FacePic/',
|
||
// imgModuleUrl:
|
||
// '/api/community/objs/FacePic/8f50a2f2dee948c4bfab58928d182897',
|
||
},
|
||
},
|
||
{
|
||
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,
|
||
// imgUrl: '/api/community/objs/FacePic/',
|
||
// imgModuleUrl:
|
||
// '/api/community/objs/FacePic/8f50a2f2dee948c4bfab58928d182897',
|
||
},
|
||
// 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',
|
||
label: '文化程度',
|
||
componentProps: {
|
||
api: '/api/community/objs/DictItem',
|
||
params: {
|
||
code: 'WHCD',
|
||
},
|
||
resultField: 'data',
|
||
labelField: 'dictName',
|
||
valueField: 'dictValue',
|
||
immediate: true,
|
||
autoSelectFirst: false,
|
||
},
|
||
// rules: [
|
||
// {
|
||
// required: true,
|
||
// message: '不能为空',
|
||
// },
|
||
// ],
|
||
},
|
||
{
|
||
field: 'entryTime',
|
||
component: 'NsDatePicker',
|
||
defaultValue: dateUtil(new Date()),
|
||
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: [
|
||
{
|
||
required: false,
|
||
trigger: 'blur',
|
||
},
|
||
{
|
||
pattern: /^\w+@[a-z0-9]+\.[a-z]{2,4}$/,
|
||
message: '邮箱格式不正确',
|
||
trigger: 'blur',
|
||
},
|
||
],
|
||
},
|
||
{
|
||
field: 'residenceAddress',
|
||
label: '户籍地址',
|
||
component: 'NsInput',
|
||
rules: [
|
||
// {
|
||
// required: true,
|
||
// message: '户籍地址不能为空',
|
||
// trigger: 'blur',
|
||
// },
|
||
{
|
||
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: [
|
||
{
|
||
required: false,
|
||
trigger: 'blur',
|
||
},
|
||
{
|
||
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>
|