411 lines
15 KiB
Vue
411 lines
15 KiB
Vue
<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>
|