update
init
This commit is contained in:
@@ -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