update
init
This commit is contained in:
@@ -0,0 +1,681 @@
|
||||
import { FormSchema } from '/@/components/Form';
|
||||
import { getSecondaryDepartmentList, getThirdDepartmentList } from '/@/views/system/user/user.api';
|
||||
import { message } from 'ant-design-vue';
|
||||
import { ColEx } from '/@/components/Form/src/types';
|
||||
import { checkPassword } from '/@/hooks/checkPassword/checkPassword';
|
||||
// 自适应列配置
|
||||
export const adaptiveColProps: Partial<ColEx> = {
|
||||
span: 6,
|
||||
xs: 12, // <576px
|
||||
sm: 12, // ≥576px
|
||||
md: 12, // ≥768px
|
||||
lg: 12, // ≥992px
|
||||
xl: 12, // ≥1200px
|
||||
xxl: 8, // ≥1600px
|
||||
};
|
||||
|
||||
export function getPopupContainer() {
|
||||
return document.body;
|
||||
}
|
||||
/**
|
||||
* @Description:form校验关系
|
||||
* @date `2023/8/17`
|
||||
*/
|
||||
export function checkRelation(_, value) {
|
||||
if (!value) {
|
||||
return Promise.reject('请选择与员工的关系');
|
||||
}
|
||||
return Promise.resolve();
|
||||
}
|
||||
/**
|
||||
* @Description:校验值重复的个数
|
||||
* @date 2023/8/17
|
||||
* @param val
|
||||
* @param list
|
||||
* @return 出现的个数
|
||||
*/
|
||||
export function repeatCount(val, list) {
|
||||
let i = 0;
|
||||
list.map((item) => {
|
||||
if (item == val && item !== '') {
|
||||
i++;
|
||||
}
|
||||
});
|
||||
return i;
|
||||
}
|
||||
export interface FormItem {
|
||||
name: string;
|
||||
phone: number | string;
|
||||
familyRelation: string;
|
||||
idCard: string;
|
||||
id?: string;
|
||||
|
||||
[key: string]: any;
|
||||
}
|
||||
|
||||
export interface TableState {
|
||||
data: FormItem[];
|
||||
selectedRowKeys: any[];
|
||||
}
|
||||
|
||||
type FunForm = (isUpdate: boolean) => FormSchema[];
|
||||
/**
|
||||
* @Description:基础信息
|
||||
* @date 2023/8/2
|
||||
* @param isUpdate
|
||||
*/
|
||||
// @ts-ignore
|
||||
export const formSchema: FunForm = (isUpdate = false) => [
|
||||
{
|
||||
label: '用户账号',
|
||||
field: 'username',
|
||||
component: 'Input',
|
||||
componentProps: ({ formModel }) => {
|
||||
return {
|
||||
onInput: () => {
|
||||
formModel.username = formModel.username.replace(/[^a-zA-Z0-9_]/g, '');
|
||||
},
|
||||
autocomplete: 'off',
|
||||
};
|
||||
},
|
||||
required: true,
|
||||
},
|
||||
{
|
||||
label: '密码',
|
||||
field: 'password',
|
||||
component: 'StrengthMeter',
|
||||
componentProps: {
|
||||
// @ts-ignore
|
||||
autocomplete: 'new-password',
|
||||
},
|
||||
dynamicRules: () => {
|
||||
return [
|
||||
{
|
||||
required: true,
|
||||
validator: (_, value) => {
|
||||
let { message } = checkPassword(value);
|
||||
if (message === 'ok') {
|
||||
return Promise.resolve();
|
||||
} else {
|
||||
return Promise.reject(message);
|
||||
}
|
||||
},
|
||||
trigger: 'blur',
|
||||
},
|
||||
];
|
||||
},
|
||||
required: true,
|
||||
ifShow: isUpdate,
|
||||
},
|
||||
{
|
||||
label: '姓名',
|
||||
field: 'realname',
|
||||
component: 'Input',
|
||||
required: true,
|
||||
},
|
||||
{
|
||||
label: '性别',
|
||||
field: 'sex',
|
||||
component: 'JDictSelectTag',
|
||||
componentProps: {
|
||||
// @ts-ignore
|
||||
dictCode: 'sex2',
|
||||
},
|
||||
required: true,
|
||||
},
|
||||
|
||||
{
|
||||
label: '手机号码',
|
||||
field: 'phone',
|
||||
component: 'Input',
|
||||
componentProps: ({ formModel }) => {
|
||||
return {
|
||||
onInput: () => {
|
||||
formModel.phone = formModel.phone.replace(/[^0-9]/g, '');
|
||||
},
|
||||
};
|
||||
},
|
||||
rules: [
|
||||
{
|
||||
required: true,
|
||||
},
|
||||
{
|
||||
pattern: /^1[3456789][0-9]{9}$/,
|
||||
message: '${label}格式有误',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: '身份证号',
|
||||
field: 'idCard',
|
||||
component: 'Input',
|
||||
componentProps: ({ formModel }) => {
|
||||
return {
|
||||
onInput: () => {
|
||||
formModel.idCard = formModel.idCard.replace(/[^Xx0-9]/g, '');
|
||||
},
|
||||
};
|
||||
},
|
||||
rules: [
|
||||
{
|
||||
required: true,
|
||||
},
|
||||
{
|
||||
pattern: /^\d{6}(18|19|20)?\d{2}(0[1-9]|1[012])(0[1-9]|[12]\d|3[01])\d{3}(\d|[xX])$/,
|
||||
message: '${label}格式有误',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: '邮箱',
|
||||
field: 'email',
|
||||
component: 'Input',
|
||||
rules: [
|
||||
{
|
||||
pattern: /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/,
|
||||
message: '${label}格式有误',
|
||||
required: true,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: '编号',
|
||||
field: 'empSysno',
|
||||
component: 'Input',
|
||||
required: true,
|
||||
componentProps: ({ formModel }) => {
|
||||
return {
|
||||
onInput: () => {
|
||||
formModel.empSysno = formModel.empSysno.replace(/[^0-9]/g, '');
|
||||
},
|
||||
};
|
||||
},
|
||||
},
|
||||
{
|
||||
label: '单位',
|
||||
field: 'secondDepart',
|
||||
component: 'ApiSelect',
|
||||
required: true,
|
||||
componentProps: ({ formModel }) => {
|
||||
return {
|
||||
api: getSecondaryDepartmentList,
|
||||
resultField: 'result',
|
||||
labelField: 'departName',
|
||||
valueField: 'id',
|
||||
immediate: true,
|
||||
onChange: (_value) => {
|
||||
formModel.orgCode = '';
|
||||
},
|
||||
onDeselect: () => {
|
||||
formModel.secondDepart = '';
|
||||
formModel.orgCode = '';
|
||||
},
|
||||
getPopupContainer: () => document.body,
|
||||
};
|
||||
},
|
||||
},
|
||||
{
|
||||
label: '部门',
|
||||
field: 'orgCode',
|
||||
component: 'ApiSelect',
|
||||
required: true,
|
||||
componentProps: ({ formModel }) => {
|
||||
return {
|
||||
api: getThirdDepartmentList,
|
||||
resultField: 'list',
|
||||
labelField: 'departName',
|
||||
params: {
|
||||
secondDepartId: formModel?.secondDepart || '12313',
|
||||
},
|
||||
valueField: 'id',
|
||||
immediate: true,
|
||||
onFocus: () => {
|
||||
if (!formModel.secondDepart) {
|
||||
return message.warn('请先选择单位！');
|
||||
}
|
||||
},
|
||||
getPopupContainer: () => document.body,
|
||||
};
|
||||
},
|
||||
},
|
||||
{
|
||||
label: '职务',
|
||||
field: 'empJob',
|
||||
component: 'JDictSelectTag',
|
||||
componentProps: {
|
||||
// @ts-ignore
|
||||
dictCode: 'e_job',
|
||||
getPopupContainer: () => document.body,
|
||||
},
|
||||
},
|
||||
{
|
||||
label: '职称',
|
||||
field: 'empTitle',
|
||||
component: 'JDictSelectTag',
|
||||
componentProps: {
|
||||
// @ts-ignore
|
||||
dictCode: 'e_title',
|
||||
getPopupContainer: () => document.body,
|
||||
},
|
||||
},
|
||||
{
|
||||
label: '职位',
|
||||
field: 'empPosition',
|
||||
component: 'JDictSelectTag',
|
||||
componentProps: {
|
||||
// @ts-ignore
|
||||
dictCode: 'emp_position',
|
||||
getPopupContainer: () => document.body,
|
||||
},
|
||||
},
|
||||
{
|
||||
label: '行政级别',
|
||||
field: 'empLevel',
|
||||
component: 'JDictSelectTag',
|
||||
componentProps: {
|
||||
// @ts-ignore
|
||||
dictCode: 'emp_level',
|
||||
getPopupContainer: () => document.body,
|
||||
},
|
||||
},
|
||||
{
|
||||
label: '子组',
|
||||
field: 'empGroup',
|
||||
component: 'JDictSelectTag',
|
||||
componentProps: {
|
||||
// @ts-ignore
|
||||
dictCode: 'emp_group',
|
||||
getPopupContainer: () => document.body,
|
||||
},
|
||||
},
|
||||
{
|
||||
label: '工作状态',
|
||||
field: 'empStatus',
|
||||
component: 'JDictSelectTag',
|
||||
componentProps: {
|
||||
// @ts-ignore
|
||||
dictCode: 'emp_status',
|
||||
getPopupContainer: () => document.body,
|
||||
},
|
||||
},
|
||||
{
|
||||
label: '工种',
|
||||
field: 'medicalWorkTypeCode',
|
||||
component: 'JDictSelectTag',
|
||||
componentProps: {
|
||||
// @ts-ignore
|
||||
dictCode: 'medical_worktype',
|
||||
showSearch: true,
|
||||
getPopupContainer: () => document.body,
|
||||
},
|
||||
},
|
||||
{
|
||||
label: '体检形式',
|
||||
field: 'medicalOnJob',
|
||||
component: 'JDictSelectTag',
|
||||
componentProps: {
|
||||
// @ts-ignore
|
||||
dictCode: 'medical_on_job',
|
||||
getPopupContainer: () => document.body,
|
||||
},
|
||||
},
|
||||
{
|
||||
label: '接害时间',
|
||||
field: 'medicalHazardDate',
|
||||
component: 'DatePicker',
|
||||
componentProps: {
|
||||
// @ts-ignore
|
||||
showTime: false,
|
||||
valueFormat: 'YYYY-MM-DD HH:mm:ss',
|
||||
getPopupContainer: () => document.body,
|
||||
},
|
||||
},
|
||||
{
|
||||
label: '危害因素',
|
||||
field: 'medicalHazardFactorCode',
|
||||
component: 'JDictSelectTag',
|
||||
componentProps: {
|
||||
// @ts-ignore
|
||||
dictCode: 'medical_hazard',
|
||||
showSearch: true,
|
||||
mode: 'multiple',
|
||||
getPopupContainer: () => document.body,
|
||||
},
|
||||
},
|
||||
{
|
||||
label: '隐藏id',
|
||||
field: 'id',
|
||||
component: 'Input',
|
||||
show: false,
|
||||
},
|
||||
];
|
||||
/**
|
||||
* @Description:set基本信息
|
||||
* @date 2023/8/15
|
||||
* @param form1Obj
|
||||
* @param res
|
||||
*/
|
||||
export function setBasicInfo(form1Obj, res) {
|
||||
// 危害因素
|
||||
let medicalHazardFactorCode = null;
|
||||
if (res?.extension?.medicalHazardFactorCode) {
|
||||
medicalHazardFactorCode = res.extension.medicalHazardFactorCode?.split(',');
|
||||
}
|
||||
return {
|
||||
...form1Obj,
|
||||
email: res?.email || '',
|
||||
empSysno: res?.extension?.empSysno,
|
||||
empJob: res?.extension?.empJob,
|
||||
empTitle: res?.extension?.empTitle,
|
||||
empPosition: res?.extension?.empPosition,
|
||||
empLevel: res?.extension?.empLevel,
|
||||
empGroup: res?.extension?.empGroup,
|
||||
empStatus: res?.extension?.empStatus,
|
||||
medicalWorkTypeCode: res?.extension?.medicalWorkTypeCode,
|
||||
medicalOnJob: res?.extension?.medicalOnJob,
|
||||
medicalHazardFactorCode: medicalHazardFactorCode,
|
||||
medicalHazardDate: res?.extension?.medicalHazardDate,
|
||||
secondDepart: res?.secondDepart?.id, //单位
|
||||
orgCode: res?.depart?.id, //部门
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* @Description:扩展信息
|
||||
* @date 2023/7/24
|
||||
* @param isUpdate
|
||||
*/
|
||||
// @ts-ignore
|
||||
export const extendedInfoForm: FunForm = (isUpdate = false) => [
|
||||
{
|
||||
label: '头像',
|
||||
field: 'avatar',
|
||||
component: 'JImageUpload',
|
||||
componentProps: {
|
||||
// @ts-ignore
|
||||
maxCount: 1,
|
||||
},
|
||||
},
|
||||
{
|
||||
label: '身份证正面',
|
||||
field: 'empIdcardFace',
|
||||
component: 'JImageUpload',
|
||||
componentProps: {
|
||||
// @ts-ignore
|
||||
maxCount: 1,
|
||||
},
|
||||
},
|
||||
{
|
||||
label: '身份证反面',
|
||||
field: 'empIdcardBack',
|
||||
component: 'JImageUpload',
|
||||
componentProps: {
|
||||
// @ts-ignore
|
||||
maxCount: 1,
|
||||
},
|
||||
},
|
||||
{
|
||||
label: '身高',
|
||||
field: 'height',
|
||||
component: 'Input',
|
||||
componentProps: ({ formModel }) => {
|
||||
return {
|
||||
suffix: 'cm',
|
||||
style: {
|
||||
width: '100%',
|
||||
},
|
||||
onInput: () => {
|
||||
formModel.height = formModel.height.match(/\d+\.?\d{0,2}/);
|
||||
// formModel.height = formModel.height.replace(/[^0-9.]/g, '');
|
||||
},
|
||||
};
|
||||
},
|
||||
},
|
||||
{
|
||||
label: '体重',
|
||||
field: 'weight',
|
||||
component: 'Input',
|
||||
componentProps: ({ formModel }) => {
|
||||
return {
|
||||
suffix: 'kg',
|
||||
style: {
|
||||
width: '100%',
|
||||
},
|
||||
onInput: () => {
|
||||
formModel.weight = formModel.weight.match(/\d+\.?\d{0,2}/);
|
||||
},
|
||||
};
|
||||
},
|
||||
},
|
||||
{
|
||||
label: '出生日期',
|
||||
field: 'birthday',
|
||||
component: 'DatePicker',
|
||||
componentProps: {
|
||||
// @ts-ignore
|
||||
showTime: false,
|
||||
valueFormat: 'YYYY-MM-DD',
|
||||
getPopupContainer: () => document.body,
|
||||
disabledDate: (current) => current > new Date(),
|
||||
},
|
||||
ifShow: !isUpdate,
|
||||
},
|
||||
{
|
||||
label: '年龄',
|
||||
field: 'age',
|
||||
component: 'InputNumber',
|
||||
componentProps: {
|
||||
//@ts-ignore
|
||||
style: {
|
||||
width: '100%',
|
||||
},
|
||||
},
|
||||
ifShow: !isUpdate,
|
||||
},
|
||||
{
|
||||
label: '血型',
|
||||
field: 'bloodType',
|
||||
component: 'JDictSelectTag',
|
||||
componentProps: {
|
||||
//@ts-ignore
|
||||
dictCode: 'blood_type',
|
||||
getPopupContainer: () => document.body,
|
||||
},
|
||||
},
|
||||
{
|
||||
label: '民族',
|
||||
field: 'empNation',
|
||||
component: 'JDictSelectTag',
|
||||
componentProps: {
|
||||
//@ts-ignore
|
||||
dictCode: 'nation',
|
||||
getPopupContainer: () => document.body,
|
||||
},
|
||||
},
|
||||
{
|
||||
label: '婚姻状况',
|
||||
field: 'empMarriage',
|
||||
component: 'JDictSelectTag',
|
||||
componentProps: {
|
||||
//@ts-ignore
|
||||
dictCode: 'mr_state',
|
||||
getPopupContainer: () => document.body,
|
||||
},
|
||||
},
|
||||
{
|
||||
label: '政治面貌',
|
||||
field: 'empPolitical',
|
||||
component: 'JDictSelectTag',
|
||||
componentProps: {
|
||||
//@ts-ignore
|
||||
dictCode: 'emp_political',
|
||||
getPopupContainer: () => document.body,
|
||||
},
|
||||
},
|
||||
{
|
||||
label: '学历',
|
||||
field: 'empDegree',
|
||||
component: 'JDictSelectTag',
|
||||
componentProps: {
|
||||
//@ts-ignore
|
||||
dictCode: 'emp_education',
|
||||
getPopupContainer: () => document.body,
|
||||
},
|
||||
},
|
||||
{
|
||||
label: '籍贯',
|
||||
field: 'empNativeplace',
|
||||
component: 'Input',
|
||||
},
|
||||
{
|
||||
label: '入职时间',
|
||||
field: 'empWorktime',
|
||||
component: 'DatePicker',
|
||||
componentProps: {
|
||||
//@ts-ignore
|
||||
showTime: false,
|
||||
valueFormat: 'YYYY-MM-DD',
|
||||
getPopupContainer: () => document.body,
|
||||
disabledDate: (current) => current > new Date(),
|
||||
},
|
||||
},
|
||||
{
|
||||
label: '用工形式',
|
||||
field: 'empType',
|
||||
component: 'JDictSelectTag',
|
||||
componentProps: {
|
||||
//@ts-ignore
|
||||
dictCode: 'contract',
|
||||
getPopupContainer: () => document.body,
|
||||
},
|
||||
},
|
||||
{
|
||||
label: '是否上市员工',
|
||||
field: 'listedFlag',
|
||||
component: 'JDictSelectTag',
|
||||
componentProps: {
|
||||
//@ts-ignore
|
||||
dictCode: 'sf_10',
|
||||
getPopupContainer: () => document.body,
|
||||
},
|
||||
},
|
||||
{
|
||||
label: '工作地点',
|
||||
field: 'workSpace',
|
||||
component: 'Input',
|
||||
},
|
||||
{
|
||||
label: '居住地点',
|
||||
field: 'liveSpace',
|
||||
component: 'Input',
|
||||
},
|
||||
{
|
||||
label: '健康类型',
|
||||
field: 'healthType',
|
||||
component: 'JDictSelectTag',
|
||||
componentProps: {
|
||||
// @ts-ignore
|
||||
dictCode: 'health_type',
|
||||
getPopupContainer: () => document.body,
|
||||
},
|
||||
},
|
||||
{
|
||||
label: '健康状态',
|
||||
field: 'empJkState',
|
||||
component: 'JDictSelectTag',
|
||||
componentProps: {
|
||||
// @ts-ignore
|
||||
dictCode: 'jk_status',
|
||||
getPopupContainer: () => document.body,
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
/**
|
||||
* @Description:set扩展信息
|
||||
* @date 2023/8/15
|
||||
* @param res
|
||||
*/
|
||||
export function setExtendedForm(res) {
|
||||
return {
|
||||
height: res?.extension?.height,
|
||||
weight: res?.extension?.weight,
|
||||
birthday: res?.birthday || '',
|
||||
age: res?.age,
|
||||
bloodType: res?.extension?.bloodType,
|
||||
empNation: res?.extension?.empNation,
|
||||
empMarriage: res?.extension?.empMarriage,
|
||||
empPolitical: res?.extension?.empPolitical,
|
||||
empDegree: res?.extension?.empDegree,
|
||||
empNativeplace: res?.extension?.empNativeplace,
|
||||
empWorktime: res?.extension?.empWorktime,
|
||||
empType: res?.extension?.empType,
|
||||
listedFlag: res?.extension?.listedFlag,
|
||||
workSpace: res?.extension?.workSpace,
|
||||
liveSpace: res?.extension?.liveSpace,
|
||||
empJkState: res?.extension?.empJkState,
|
||||
healthType: res?.extension?.healthType,
|
||||
avatar: res?.avatar,
|
||||
empIdcardFace: res?.extension?.empIdcardFace,
|
||||
empIdcardBack: res?.extension?.empIdcardBack,
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* @Description:身份证截取生日
|
||||
* @date 2023/8/15
|
||||
* @param cardId
|
||||
*/
|
||||
export function getBirth(cardId: string) {
|
||||
if (!cardId) return '';
|
||||
return cardId.substring(6, 10) + '-' + cardId.substring(10, 12) + '-' + cardId.substring(12, 14);
|
||||
}
|
||||
/**
|
||||
* @Description:处理请求参数
|
||||
* @param basicInfo
|
||||
* @param extendForm
|
||||
*/
|
||||
export function dealParams(basicInfo = {}, extendForm: any) {
|
||||
// 危害因素
|
||||
const medicalHazardFactorCode = basicInfo?.['medicalHazardFactorCode'] || null;
|
||||
const idCard = basicInfo?.['idCard'] || null;
|
||||
return {
|
||||
...basicInfo,
|
||||
...extendForm,
|
||||
birthday: getBirth(idCard),
|
||||
secondDepart: null,
|
||||
extension: {
|
||||
...basicInfo,
|
||||
...extendForm,
|
||||
birthday: getBirth(idCard),
|
||||
secondDepart: null,
|
||||
medicalHazardFactorCode: medicalHazardFactorCode,
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* @Description:表单字段验证
|
||||
* @date 2023/8/18
|
||||
* @param type
|
||||
* @param value
|
||||
* @param list 校验数据
|
||||
*/
|
||||
export function formValidate(type, value, list) {
|
||||
const messageType = {
|
||||
phone: '输入的手机号有重复',
|
||||
idCard: '输入的身份证号有重复',
|
||||
};
|
||||
const emptyType = {
|
||||
phone: '请输入手机号',
|
||||
idCard: '请输入身份证号',
|
||||
};
|
||||
if (!value) {
|
||||
return Promise.reject(emptyType[type]);
|
||||
}
|
||||
if (repeatCount(value, list) > 1) {
|
||||
return Promise.reject(messageType[type]);
|
||||
} else {
|
||||
return Promise.resolve();
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,410 @@
|
||||
<template>
|
||||
<a-spin :spinning="spinning" :delay="500">
|
||||
<div class="bg-color pd-10 basic-container">
|
||||
<a-tabs v-model:activeKey="activeKey" tab-position="left">
|
||||
<a-tab-pane key="1" tab="基本信息">
|
||||
<BasicForm @register="registerForm" />
|
||||
</a-tab-pane>
|
||||
<a-tab-pane key="2" tab="扩展信息" v-if="showTab2" force-render>
|
||||
<BasicForm @register="registerExtendForm" />
|
||||
</a-tab-pane>
|
||||
<a-tab-pane key="3" tab="紧急联系人" v-if="showTab3">
|
||||
<a-form ref="relationForm" :model="tableState.data" :rules="rules">
|
||||
<a-list :data-source="tableState.data" :bordered="true">
|
||||
<template #header>
|
||||
<a-row>
|
||||
<a-col flex="4" class="align-center">姓名</a-col>
|
||||
<a-col flex="4" class="align-center">与员工关系</a-col>
|
||||
<a-col flex="4" class="align-center">联系电话</a-col>
|
||||
<a-col flex="4" class="align-center">身份证号</a-col>
|
||||
<a-col flex="1" class="align-center">
|
||||
<a-button
|
||||
size="small"
|
||||
title="添加"
|
||||
type="primary"
|
||||
preIcon="ant-design:plus-outlined"
|
||||
@click="handleAdd"
|
||||
:disabled="inputDisabled"
|
||||
/>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</template>
|
||||
<template #renderItem="{ item, index }">
|
||||
<a-row class="row-self">
|
||||
<a-col flex="4">
|
||||
<div class="flex-jc">
|
||||
<a-form-item style="width: 60%" class="self-form-item" :name="[index, 'name']" :rules="rules.name">
|
||||
<a-input v-model:value="item.name" placeholder="请输入姓名" allow-clear :disabled="inputDisabled" />
|
||||
</a-form-item>
|
||||
</div>
|
||||
</a-col>
|
||||
<a-col flex="4">
|
||||
<div class="flex-jc">
|
||||
<a-form-item style="width: 60%" :name="[index, 'familyRelation']" :rules="rules.familyRelation">
|
||||
<JDictSelectTag
|
||||
allowClear
|
||||
placeholder="请选择与员工的关系"
|
||||
v-model:value="item.familyRelation"
|
||||
:getPopupContainer="getPopupContainer"
|
||||
dict-code="family_member_relation"
|
||||
:disabled="inputDisabled"
|
||||
/>
|
||||
</a-form-item>
|
||||
</div>
|
||||
</a-col>
|
||||
<a-col flex="4">
|
||||
<div class="flex-jc">
|
||||
<a-form-item style="width: 60%" class="self-form-item" :name="[index, 'phone']" :rules="rules.phone">
|
||||
<a-input
|
||||
v-model:value="item.phone"
|
||||
placeholder="请输入手机号"
|
||||
allow-clear
|
||||
:disabled="inputDisabled"
|
||||
@blur="phoneBlur($event, index)"
|
||||
/>
|
||||
</a-form-item>
|
||||
</div>
|
||||
</a-col>
|
||||
<a-col flex="4">
|
||||
<div class="flex-jc">
|
||||
<a-form-item style="width: 60%" class="self-form-item" :name="[index, 'idCard']" :rules="rules.idCard">
|
||||
<a-input
|
||||
v-model:value="item.idCard"
|
||||
placeholder="请输入身份证号"
|
||||
allow-clear
|
||||
:disabled="inputDisabled"
|
||||
/>
|
||||
</a-form-item>
|
||||
</div>
|
||||
</a-col>
|
||||
<a-col flex="1" class="align-center">
|
||||
<a-button
|
||||
size="small"
|
||||
title="删除"
|
||||
preIcon="ant-design:delete-outlined"
|
||||
@click="handleDelete(index, item)"
|
||||
:disabled="inputDisabled"
|
||||
/>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</template>
|
||||
</a-list>
|
||||
</a-form>
|
||||
</a-tab-pane>
|
||||
</a-tabs>
|
||||
<div class="footer-action" v-show="!inputDisabled">
|
||||
<a-button @click="cancel">重置</a-button>
|
||||
<a-button class="m10" type="primary" @click="submit" :loading="loading" :disabled="loading">保存 </a-button>
|
||||
</div>
|
||||
</div>
|
||||
</a-spin>
|
||||
</template>
|
||||
<script setup lang="ts" name="BasicInfo">
|
||||
import { BasicForm, useForm } from '/@/components/Form';
|
||||
import { computed, nextTick, onMounted, reactive, ref } from 'vue';
|
||||
import { cloneDeep } from 'lodash-es';
|
||||
import {
|
||||
extendedInfoForm,
|
||||
formSchema,
|
||||
adaptiveColProps,
|
||||
getPopupContainer,
|
||||
FormItem,
|
||||
TableState,
|
||||
dealParams,
|
||||
setExtendedForm,
|
||||
setBasicInfo,
|
||||
checkRelation,
|
||||
formValidate,
|
||||
} from '/@/views/archive/employeeFile/components/basicInfo/basicInfo.data';
|
||||
import { getEmergency, queryById, removeEmergency, saveOrUpdate, updateEmergency } from '/@/views/archive/employeeFile/employeeFileList.api';
|
||||
import JDictSelectTag from '/@/components/Form/src/jeecg/components/JDictSelectTag.vue';
|
||||
import { FormInstance } from 'ant-design-vue';
|
||||
import { useRoute, useRouter } from 'vue-router';
|
||||
import { useMultipleTabStore } from '/@/store/modules/multipleTab';
|
||||
|
||||
const route = useRoute();
|
||||
let showTab2 = ref(true); //显示扩展信息
|
||||
let showTab3 = ref(true); //显示紧急联系人
|
||||
|
||||
function init() {
|
||||
let { notShowTab } = route.query;
|
||||
showTab2.value = true;
|
||||
showTab3.value = true;
|
||||
if (notShowTab) {
|
||||
nextTick(() => {
|
||||
if (notShowTab.includes('2')) {
|
||||
showTab2.value = false;
|
||||
}
|
||||
if (notShowTab.includes('3')) {
|
||||
showTab3.value = false;
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
const rules = {
|
||||
name: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
|
||||
phone: [
|
||||
{ pattern: /^1[3456789]\d{9}$/, message: '手机号码格式有误', trigger: 'blur' },
|
||||
{ required: true, trigger: 'blur', validator: phoneBlur },
|
||||
],
|
||||
familyRelation: [{ required: true, trigger: 'blur', validator: checkRelation }],
|
||||
idCard: [
|
||||
{
|
||||
trigger: 'blur',
|
||||
pattern: /^\d{6}(18|19|20)?\d{2}(0[1-9]|1[012])(0[1-9]|[12]\d|3[01])\d{3}(\d|[xX])$/,
|
||||
message: '身份证号码格式有误',
|
||||
},
|
||||
{ required: true, trigger: 'blur', validator: idCardBlur },
|
||||
],
|
||||
};
|
||||
|
||||
function phoneBlur(_, value) {
|
||||
return formValidate('phone', value, tableState.data?.map((item) => item.phone) || []);
|
||||
}
|
||||
|
||||
function idCardBlur(_, value) {
|
||||
return formValidate('idCard', value, tableState.data?.map((item) => item.idCard) || []);
|
||||
}
|
||||
|
||||
const spinning = ref<boolean>(true);
|
||||
const changeSpinning = () => {
|
||||
spinning.value = !spinning.value;
|
||||
};
|
||||
const activeKey = ref<string>('1');
|
||||
const tableState: TableState = reactive({
|
||||
data: [],
|
||||
selectedRowKeys: [],
|
||||
});
|
||||
const initInfo = ref();
|
||||
const router = useRouter();
|
||||
// 查看时禁用输入框
|
||||
const inputDisabled = computed(() => route.query.type == 'detail');
|
||||
const isAdd = computed(() => route.query.type == 'add');
|
||||
const relationForm = ref<FormInstance>();
|
||||
const loading = ref(false);
|
||||
|
||||
//表单配置
|
||||
const [registerForm, { setProps, setFieldsValue, validate, clearValidate }] = useForm({
|
||||
labelWidth: 90,
|
||||
schemas: formSchema(isAdd.value),
|
||||
showActionButtonGroup: false,
|
||||
baseColProps: adaptiveColProps,
|
||||
});
|
||||
|
||||
const [
|
||||
registerExtendForm,
|
||||
{ setProps: ExtendSetProps, validate: extendFormValidate, setFieldsValue: extendFormSetValue, clearValidate: clearExtendFormValidate },
|
||||
] = useForm({
|
||||
labelWidth: 90,
|
||||
schemas: extendedInfoForm(!inputDisabled.value),
|
||||
showActionButtonGroup: false,
|
||||
baseColProps: adaptiveColProps,
|
||||
});
|
||||
|
||||
onMounted(async () => {
|
||||
spinning.value = true;
|
||||
if (route.query.type == 'edit') {
|
||||
await getInfo();
|
||||
} else if (route.query.type == 'detail') {
|
||||
await setProps({ disabled: true });
|
||||
await ExtendSetProps({ disabled: true });
|
||||
await getInfo();
|
||||
init();
|
||||
} else {
|
||||
changeSpinning();
|
||||
}
|
||||
});
|
||||
|
||||
/**
|
||||
* @Description:获取基础信息
|
||||
* @date 2023/8/3
|
||||
*/
|
||||
async function getInfo() {
|
||||
try {
|
||||
let res = await queryById({ id: route.query.id });
|
||||
initInfo.value = cloneDeep(res);
|
||||
await setValue(res?.userEmployee || {});
|
||||
tableState.data = res.sysUserEmergencyContactList;
|
||||
} catch {
|
||||
spinning.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* @Description:form赋值
|
||||
* @date 2023/7/24
|
||||
*/
|
||||
async function setValue(res) {
|
||||
spinning.value = false;
|
||||
const form1 = formSchema(isAdd.value).map((item) => item.field);
|
||||
const form1Obj = {};
|
||||
form1.forEach((item) => (form1Obj[item] = res[item]));
|
||||
await setFieldsValue(setBasicInfo(form1Obj, res));
|
||||
await extendFormSetValue(setExtendedForm(res));
|
||||
await clearValidate();
|
||||
await clearExtendFormValidate();
|
||||
}
|
||||
|
||||
/**
|
||||
* @Description:获取紧急联系人
|
||||
*/
|
||||
async function getEmergencyList() {
|
||||
try {
|
||||
let list = await getEmergency({ userId: route.query.id });
|
||||
tableState.data = list.records;
|
||||
} catch {}
|
||||
}
|
||||
|
||||
function handleAdd() {
|
||||
let formItem: FormItem = { name: '', familyRelation: '', phone: '', idCard: '' };
|
||||
tableState.data.unshift(formItem);
|
||||
}
|
||||
|
||||
/**
|
||||
* @Description:删除紧急联系人
|
||||
* @date 2023/8/3
|
||||
* @param index
|
||||
* @param item
|
||||
*/
|
||||
async function handleDelete(index, item) {
|
||||
// 新增数据没添加到数据库
|
||||
if (!item?.id) {
|
||||
return tableState.data.splice(index, 1);
|
||||
}
|
||||
try {
|
||||
await removeEmergency({ id: item.id });
|
||||
tableState.data.splice(index, 1);
|
||||
} catch {}
|
||||
}
|
||||
|
||||
/**
|
||||
* @Description:添加或者修改紧急联系人
|
||||
* @date 2023/8/8
|
||||
*/
|
||||
async function editEmergency() {
|
||||
try {
|
||||
let values = tableState.data;
|
||||
let params = values?.map((item) => ({ ...item, userId: route.query.id, id: item.id || '' }));
|
||||
return updateEmergency(params);
|
||||
} catch {}
|
||||
}
|
||||
|
||||
function submitSend(params, isUpdate) {
|
||||
saveOrUpdate(params, isUpdate, () => {
|
||||
closeTab();
|
||||
}).catch(() => {
|
||||
loading.value = false;
|
||||
});
|
||||
}
|
||||
/**
|
||||
* @Description:提交
|
||||
* @date 2023/8/8
|
||||
*/
|
||||
async function submit() {
|
||||
await nextTick(() => {
|
||||
loading.value = true;
|
||||
});
|
||||
try {
|
||||
const basicInfo = await validate();
|
||||
const extendForm = await extendFormValidate();
|
||||
let res = await relationForm.value?.validate();
|
||||
// 请求参数
|
||||
const params = dealParams(basicInfo, extendForm);
|
||||
// 编辑或新增
|
||||
const isUpdate = route.query.type == 'edit';
|
||||
// 提交联系人
|
||||
if (res && Object.keys(res).length > 0) {
|
||||
return editEmergency()
|
||||
.then(() => {
|
||||
// 提交表单
|
||||
submitSend(params, isUpdate);
|
||||
})
|
||||
.catch(() => {
|
||||
loading.value = false;
|
||||
});
|
||||
} else {
|
||||
submitSend(params, isUpdate);
|
||||
}
|
||||
} catch (e: any) {
|
||||
console.log(e, 'e');
|
||||
// 处理未填字段
|
||||
const [item] = e?.errorFields || {};
|
||||
const obj = {
|
||||
'1': formSchema(isAdd.value).map((item) => item.field),
|
||||
'2': extendedInfoForm(!inputDisabled.value).map((item) => item.field),
|
||||
};
|
||||
for (const key in obj) {
|
||||
if (obj[key].includes(item.name[0])) {
|
||||
activeKey.value = key;
|
||||
break;
|
||||
} else {
|
||||
activeKey.value = '3';
|
||||
}
|
||||
}
|
||||
loading.value = false;
|
||||
} finally {
|
||||
// loading.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
function closeTab() {
|
||||
const tabStore = useMultipleTabStore();
|
||||
let timer = setTimeout(() => {
|
||||
clearTimeout(timer);
|
||||
router.push({ path: '/archive/employeeFileList' });
|
||||
}, 200);
|
||||
tabStore.closeTabByKey(route.fullPath, router);
|
||||
}
|
||||
|
||||
async function cancel() {
|
||||
if (initInfo.value?.userEmployee) {
|
||||
await setValue(initInfo.value.userEmployee);
|
||||
}
|
||||
await getEmergencyList();
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.basic-container {
|
||||
margin: 10px;
|
||||
}
|
||||
|
||||
.row-self {
|
||||
margin-top: 8px;
|
||||
padding: 0 24px;
|
||||
}
|
||||
|
||||
.footer-action {
|
||||
margin-top: 8px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.flex-jc {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.self-form-item {
|
||||
.ant-form-item-explain {
|
||||
text-align: left !important;
|
||||
}
|
||||
}
|
||||
|
||||
.m10 {
|
||||
margin: 0 10px;
|
||||
}
|
||||
|
||||
.pd-10 {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.bg-color {
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.align-center {
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user