fix: BUG修改

This commit is contained in:
kun 2024-05-29 14:45:46 +08:00
parent 21ef709e0c
commit 319d90b99d
7 changed files with 571 additions and 185 deletions

View File

@ -0,0 +1,113 @@
<template>
<div class="duty">
<el-steps class="steps" :active="active" align-center>
<el-step
style="cursor: pointer"
v-for="(item, i) in stepOptions"
:key="item.dictCode"
:title="item.dictValue?.slice(0, 2)"
@click="active = i"
/>
</el-steps>
<duty-form :form-config="formConfig" />
<footer class="footer">
<el-button class="btnStyle" :type="isAllowNext ? 'primary' : 'default'" @click="handleToPrevOrNext">{{
isAllowNext ? "下一步" : "上一步"
}}</el-button>
</footer>
</div>
</template>
<script lang="ts" setup>
import { ref, reactive, watch, computed, onMounted, onUnmounted } from "vue";
import dutyForm from "./dutyForm.vue";
import { formData, datas, rules, reset } from "./duty";
import { getDicList } from "@/api/modules/jxjview";
import type { ResDictData } from "@/api/types";
import type { EngineeringMainList } from "./duty";
import type { Type } from "./overview";
import { GlobalStore } from "@/stores";
import { ElMessage } from "element-plus";
const store = GlobalStore();
const emit = defineEmits<{
(e: "next", data: { engineeringMains: EngineeringMainList }): void;
(e: "prev", data: void): void;
}>();
const active = ref(0),
stepOptions = ref<ResDictData["result"]>([]);
const formConfig = reactive({
formData: formData.value[active.value],
datas,
rules
});
const isAllowNext = computed(() => active.value >= stepOptions.value.length - 1);
const handleToPrevOrNext = () => {
if (isAllowNext.value) {
console.log(formData.value, 777888);
const isInValid = formData.value.find((item: any) => {
// return !item.enterpriseSn || !item.creditCode || ("contractType" in item && !item.contractType);
return ![4, 5].includes(item.type) && (!item.enterpriseSn || !item.creditCode);
});
if (isInValid) return ElMessage.warning("请输入必填项");
emit("next", { engineeringMains: formData.value });
} else {
emit("prev");
}
};
watch(
() => active.value,
() => {
console.log("datas", formData.value);
formConfig.formData = formData.value[active.value];
formConfig.datas.enterpriseSn = stepOptions.value[active.value].dictValue + "名称";
}
);
onMounted(async () => {
const data = await getDicList({ dictType: "enterprise_main", status: 1, isDefault: "Y" });
stepOptions.value = data.result;
formData.value = formData.value.map((item, index) => ({
...item,
type: data.result[index].dictLabel as Type
}));
formConfig.formData = formData.value[active.value];
formConfig.datas.enterpriseSn = stepOptions.value[active.value].dictValue + "名称";
if (store.Message && store.Message.engineeringMains.length) {
formData.value = formData.value.map(item => {
// console.log("main", store.Message.engineeringMains);
let curr = store.Message.engineeringMains.find(main => item.type == main.type);
if ("contractType" in item) {
return (curr = {
...curr,
enterpriseSn: curr.enterpriseSn,
creditCode: curr.creditCode,
legalPerson: curr.legalPerson,
legalPersonTel: curr.legalPersonTel,
contractType: curr.contractType
});
} else {
delete curr["contractType"];
return curr;
}
});
formConfig.formData = formData.value[active.value];
}
});
onUnmounted(() => reset());
</script>
<style lang="scss" scoped>
@import "./duty.scss";
</style>

View File

@ -5,6 +5,13 @@
.steps {
padding: 2% 6%;
}
.add-btn {
margin-bottom: 20px;
margin-right: 6%;
display: flex;
align-items: center;
justify-content: flex-end;
}
v-deep {
.is-process {
color: #018bfe;

View File

@ -12,50 +12,101 @@ export interface FormData {
}
export type EngineeringMainList = Array<FormData & EngineeringMain>;
export const formData = ref<EngineeringMainList>([
{
enterpriseSn: "",
creditCode: "",
legalPerson: "",
legalPersonTel: "",
type: undefined,
engineeringMainPersonList: []
},
{
enterpriseSn: "",
creditCode: "",
legalPerson: "",
legalPersonTel: "",
type: undefined,
engineeringMainPersonList: []
},
{
enterpriseSn: "",
creditCode: "",
legalPerson: "",
legalPersonTel: "",
contractType: "",
type: undefined,
engineeringMainPersonList: []
},
{
enterpriseSn: "",
creditCode: "",
legalPerson: "",
legalPersonTel: "",
type: undefined,
engineeringMainPersonList: []
},
{
enterpriseSn: "",
creditCode: "",
legalPerson: "",
legalPersonTel: "",
type: undefined,
engineeringMainPersonList: []
}
export const formData = ref([
[
{
enterpriseSn: "",
creditCode: "",
legalPerson: "",
legalPersonTel: "",
type: undefined,
engineeringMainPersonList: []
}
],
[
{
enterpriseSn: "",
creditCode: "",
legalPerson: "",
legalPersonTel: "",
type: undefined,
engineeringMainPersonList: []
}
],
[
{
enterpriseSn: "",
creditCode: "",
legalPerson: "",
legalPersonTel: "",
type: undefined,
engineeringMainPersonList: []
}
],
[
{
enterpriseSn: "",
creditCode: "",
legalPerson: "",
legalPersonTel: "",
type: undefined,
engineeringMainPersonList: []
}
],
[
{
enterpriseSn: "",
creditCode: "",
legalPerson: "",
legalPersonTel: "",
type: undefined,
engineeringMainPersonList: []
}
]
]);
// export const formData = ref<EngineeringMainList>([
// {
// enterpriseSn: "",
// creditCode: "",
// legalPerson: "",
// legalPersonTel: "",
// type: undefined,
// engineeringMainPersonList: []
// },
// {
// enterpriseSn: "",
// creditCode: "",
// legalPerson: "",
// legalPersonTel: "",
// type: undefined,
// engineeringMainPersonList: []
// },
// {
// enterpriseSn: "",
// creditCode: "",
// legalPerson: "",
// legalPersonTel: "",
// contractType: "",
// type: undefined,
// engineeringMainPersonList: []
// },
// {
// enterpriseSn: "",
// creditCode: "",
// legalPerson: "",
// legalPersonTel: "",
// type: undefined,
// engineeringMainPersonList: []
// },
// {
// enterpriseSn: "",
// creditCode: "",
// legalPerson: "",
// legalPersonTel: "",
// type: undefined,
// engineeringMainPersonList: []
// }
// ]);
export const datas = ref<EngineeringMainList[number]>({
enterpriseSn: "建设单位名称",

View File

@ -9,7 +9,9 @@
@click="active = i"
/>
</el-steps>
<div class="add-btn">
<el-button class="btnStyle" type="primary" @click="addEnterpriseData">添加</el-button>
</div>
<duty-form :form-config="formConfig" />
<footer class="footer">
@ -47,13 +49,28 @@ const formConfig = reactive({
});
const isAllowNext = computed(() => active.value >= stepOptions.value.length - 1);
const addEnterpriseData = () => {
formData.value[active.value].push({
enterpriseSn: "",
creditCode: "",
legalPerson: "",
legalPersonTel: "",
type: stepOptions.value[active.value].dictLabel as any,
engineeringMainPersonList: []
});
};
const handleToPrevOrNext = () => {
if (isAllowNext.value) {
console.log(formData.value, 777888);
const isInValid = formData.value.find((item: any) => {
let isInValid = false;
formData.value.map((item: any) => {
item.map((item2: any) => {
if (![4, 5].includes(item2.type) && (!item2.enterpriseSn || !item2.creditCode)) {
isInValid = true;
}
});
// return !item.enterpriseSn || !item.creditCode || ("contractType" in item && !item.contractType);
return ![4, 5].includes(item.type) && (!item.enterpriseSn || !item.creditCode);
return;
});
if (isInValid) return ElMessage.warning("请输入必填项");
@ -75,34 +92,39 @@ watch(
onMounted(async () => {
const data = await getDicList({ dictType: "enterprise_main", status: 1, isDefault: "Y" });
stepOptions.value = data.result;
formData.value = formData.value.map((item, index) => ({
...item,
type: data.result[index].dictLabel as Type
}));
console.log(formData.value, 778899);
formData.value.map((item, index) => {
console.log(item);
item.map((item2, index2) => {
console.log(item2);
item2.type = data.result[index].dictLabel as Type;
});
});
// console.log(formData.value, 112233);
formConfig.formData = formData.value[active.value];
formConfig.datas.enterpriseSn = stepOptions.value[active.value].dictValue + "名称";
if (store.Message && store.Message.engineeringMains.length) {
formData.value = formData.value.map(item => {
// console.log("main", store.Message.engineeringMains);
let curr = store.Message.engineeringMains.find(main => item.type == main.type);
if ("contractType" in item) {
return (curr = {
...curr,
enterpriseSn: curr.enterpriseSn,
creditCode: curr.creditCode,
legalPerson: curr.legalPerson,
legalPersonTel: curr.legalPersonTel,
contractType: curr.contractType
});
} else {
delete curr["contractType"];
return curr;
}
});
// if (store.Message && store.Message.engineeringMains.length) {
// formData.value = formData.value.map(item => {
// console.log("main", store.Message.engineeringMains);
// let curr = store.Message.engineeringMains.find(main => item.type == main.type);
// if ("contractType" in item) {
// return (curr = {
// ...curr,
// enterpriseSn: curr.enterpriseSn,
// creditCode: curr.creditCode,
// legalPerson: curr.legalPerson,
// legalPersonTel: curr.legalPersonTel,
// contractType: curr.contractType
// });
// } else {
// delete curr["contractType"];
// return curr;
// }
// });
formConfig.formData = formData.value[active.value];
}
// formConfig.formData = formData.value[active.value];
// }
});
onUnmounted(() => reset());

View File

@ -0,0 +1,189 @@
<template>
<div class="duty-form">
<div class="add-btn">
<el-button class="btnStyle" type="primary">添加</el-button>
</div>
<el-form class="form" ref="formRef" :model="formData" :rules="formConfig.rules" label-width="150px">
<div class="row">
<template v-for="(val, key) in formData" :key="datas[key]">
<el-form-item
v-if="Object.keys(datas).includes(key)"
class="form-item"
:prop="formData.type != 4 && formData.type != 5 ? key : ''"
:label="datas[key]"
>
<el-select
class="select"
v-if="key === 'enterpriseSn'"
style="width: 100%"
@change="onChange"
v-model="formData[key]"
>
<el-option value="" @click="openAddDialog" v-show="formData.type != 1">
<div class="selectAdd">
<el-icon><circle-plus /></el-icon>
<span>新建</span>
</div>
</el-option>
<el-option
v-for="item in nameOptions"
:key="item.enterpriseSn"
:label="item.enterpriseName"
:value="item.enterpriseSn"
/>
</el-select>
<!-- <div v-if="key === 'enterpriseSn'" class="search">
<el-icon class="icon"><Search /></el-icon>
</div> -->
<el-input v-else v-model="formData[key]" />
</el-form-item>
</template>
</div>
</el-form>
<el-table
:data="formData.engineeringMainPersonList"
height="400"
max-height="500"
class="el-table"
:header-cell-style="{ textAlign: 'center' }"
:cell-style="{ textAlign: 'center' }"
>
<el-table-column prop="name" label="姓名">
<template #default="{ row }">
<el-input style="text-align: center" class="test" v-model="row.name" />
</template>
</el-table-column>
<el-table-column prop="jobId" label="职务">
<template #default="{ row }">
<el-select class="select" v-model="row.jobId">
<el-option v-for="item in jobOptions" :key="item.dictCode" :label="item.dictValue" :value="item.dictLabel" />
</el-select>
</template>
</el-table-column>
<el-table-column prop="station" label="职称/岗位">
<template #default="{ row }">
<el-input class="test" v-model="row.station" />
</template>
</el-table-column>
<el-table-column prop="stationCode" label="职称证号/岗位证号">
<template #default="{ row }">
<el-input class="test" v-model="row.stationCode" />
</template>
</el-table-column>
<el-table-column prop="idCard" label="身份证号">
<template #default="{ row }">
<el-input class="test" v-model="row.idCard" />
</template>
</el-table-column>
<el-table-column prop="phone" label="联系电话">
<template #default="{ row }">
<el-input class="test" v-model="row.phone" />
</template>
</el-table-column>
<el-table-column fixed="right" width="100">
<template #header>
<el-button type="primary" round @click="addEngineeringMainPerson">新增</el-button>
</template>
<template #default="{ row }">
<el-button type="danger" link @click="removeEngineeringMainPerson(row)">删除</el-button>
</template>
</el-table-column>
<!-- 表格无数据情况 -->
<template #empty>
<div class="table-empty">
<slot name="empty">
<img src="@/assets/images/notData.png" alt="notData" />
<div>暂无数据</div>
</slot>
</div>
</template>
</el-table>
<addCompany v-model:detailsDialog="openAddCompany" :relativeInfo="companyType" @confirm="allConfirm"></addCompany>
</div>
</template>
<script lang="ts" setup>
import { ref, computed, watch, onMounted, reactive } from "vue";
import { Search } from "@element-plus/icons-vue";
import { queryMainType } from "@/api/modules/project";
import { getDicList } from "@/api/modules/jxjview";
import type { FormRules } from "element-plus";
import type { EngineeringMainPerson } from "@/api/types";
import type { EngineeringMainList } from "./duty";
import addCompany from "../../../assessmentManagement/unitList/components/addCompany.vue";
export interface formConfig {
formData: EngineeringMainList[number];
rules: FormRules;
datas: EngineeringMainList[number];
}
const openAddCompany = ref(false);
const companyType = ref({});
const props = defineProps<{
formConfig: formConfig;
}>();
const formData = computed(() => props.formConfig.formData),
datas = computed(() => props.formConfig.datas);
const nameOptions = ref([{ enterpriseSn: "", enterpriseName: "", creditCode: "", legalPerson: "", legalPersonTel: "" }]),
jobOptions = ref([{ dictCode: "", dictValue: "", dictLabel: undefined }]);
watch(
() => formData.value.type,
(n, o) => {
getMainData();
}
);
const allConfirm = () => {
getMainData();
};
const openAddDialog = () => {
companyType.value = reactive({
dictLabel: formData.value.type
});
openAddCompany.value = true;
};
const onChange = (option: any) => {
// const value = nameOptions.value.find(item => item.enterpriseSn == option[option.length - 1]);
const value = nameOptions.value.find(item => item.enterpriseSn == option);
if (!value) return;
formData.value.creditCode = value.creditCode;
formData.value.legalPerson = value.legalPerson;
formData.value.legalPersonTel = value.legalPersonTel;
};
const addEngineeringMainPerson = () => {
formData.value.engineeringMainPersonList?.push({
name: "",
jobId: "",
station: "",
stationCode: "",
idCard: "",
phone: ""
});
};
const removeEngineeringMainPerson = (row: EngineeringMainPerson) => {
const index = formData.value.engineeringMainPersonList?.indexOf(row);
// index && index >= 0 && formData.value.engineeringMainPersonList?.splice(index, 1);
!index >= 0 && formData.value.engineeringMainPersonList?.splice(index, 1);
};
const getMainData = async () => {
const data = await queryMainType({ mainType: formData.value.type });
nameOptions.value = data.result;
};
onMounted(async () => {
const res = await getDicList({ dictType: "engineering_post" });
jobOptions.value = res.result;
});
</script>
<style lang="scss" scoped>
@import "./dutyForm.scss";
.test :deep(.el-input__inner) {
text-align: center;
}
</style>

View File

@ -1,11 +1,8 @@
.duty-form {
flex: 1;
padding: 0 6%;
.add-btn {
margin-bottom: 20px;
display: flex;
align-items: center;
justify-content: flex-end;
.form > div:not(:last-child) {
margin-bottom: 30px;
}
.row {
display: flex;

View File

@ -1,105 +1,109 @@
<template>
<div class="duty-form">
<!-- <div class="add-btn">
<el-button class="btnStyle" type="primary">添加</el-button>
</div> -->
<el-form class="form" ref="formRef" :model="formData" :rules="formConfig.rules" label-width="150px">
<div class="row">
<template v-for="(val, key) in formData" :key="datas[key]">
<el-form-item
v-if="Object.keys(datas).includes(key)"
class="form-item"
:prop="formData.type != 4 && formData.type != 5 ? key : ''"
:label="datas[key]"
>
<el-select
class="select"
v-if="key === 'enterpriseSn'"
style="width: 100%"
@change="onChange"
v-model="formData[key]"
<div v-for="(item, index) in formData" :key="index">
<div class="row">
<template v-for="(val, key) in item" :key="datas[key]">
<!-- :prop="item.type != 4 && item.type != 5 ? item[key] : ''" -->
<el-form-item
v-if="Object.keys(datas).includes(key)"
class="form-item"
:rules="
item.type != 4 && item.type != 5 && key === 'enterpriseSn'
? [{ required: true, message: '请选择', trigger: 'blur' }]
: []
"
:label="datas[key]"
>
<el-option value="" @click="openAddDialog" v-show="formData.type != 1">
<div class="selectAdd">
<el-icon><circle-plus /></el-icon>
<span>新建</span>
</div>
</el-option>
<el-option
v-for="item in nameOptions"
:key="item.enterpriseSn"
:label="item.enterpriseName"
:value="item.enterpriseSn"
/>
</el-select>
<!-- <div v-if="key === 'enterpriseSn'" class="search">
<el-icon class="icon"><Search /></el-icon>
</div> -->
<el-input v-else v-model="formData[key]" />
</el-form-item>
</template>
<el-select
class="select"
v-if="key === 'enterpriseSn'"
style="width: 100%"
@change="option => onChange(option, index)"
v-model="item[key]"
>
<el-option value="" @click="openAddDialog" v-show="item.type != 1">
<div class="selectAdd">
<el-icon><circle-plus /></el-icon>
<span>新建</span>
</div>
</el-option>
<el-option
v-for="item2 in nameOptions"
:key="item2.enterpriseSn"
:label="item2.enterpriseName"
:value="item2.enterpriseSn"
/>
</el-select>
<!-- <div v-if="key === 'enterpriseSn'" class="search">
<el-icon class="icon"><Search /></el-icon>
</div> -->
<el-input v-else v-model="item[key]" />
</el-form-item>
</template>
</div>
<el-table
:data="item.engineeringMainPersonList"
height="400"
max-height="500"
class="el-table"
:header-cell-style="{ textAlign: 'center' }"
:cell-style="{ textAlign: 'center' }"
>
<el-table-column prop="name" label="姓名">
<template #default="{ row }">
<el-input style="text-align: center" class="test" v-model="row.name" />
</template>
</el-table-column>
<el-table-column prop="jobId" label="职务">
<template #default="{ row }">
<el-select class="select" v-model="row.jobId">
<el-option v-for="item in jobOptions" :key="item.dictCode" :label="item.dictValue" :value="item.dictLabel" />
</el-select>
</template>
</el-table-column>
<el-table-column prop="station" label="职称/岗位">
<template #default="{ row }">
<el-input class="test" v-model="row.station" />
</template>
</el-table-column>
<el-table-column prop="stationCode" label="职称证号/岗位证号">
<template #default="{ row }">
<el-input class="test" v-model="row.stationCode" />
</template>
</el-table-column>
<el-table-column prop="idCard" label="身份证号">
<template #default="{ row }">
<el-input class="test" v-model="row.idCard" />
</template>
</el-table-column>
<el-table-column prop="phone" label="联系电话">
<template #default="{ row }">
<el-input class="test" v-model="row.phone" />
</template>
</el-table-column>
<el-table-column fixed="right" width="100">
<template #header>
<el-button type="primary" round @click="addEngineeringMainPerson(index)">新增</el-button>
</template>
<template #default="{ row }">
<el-button type="danger" link @click="removeEngineeringMainPerson(row, index)">删除</el-button>
</template>
</el-table-column>
<!-- 表格无数据情况 -->
<template #empty>
<div class="table-empty">
<slot name="empty">
<img src="@/assets/images/notData.png" alt="notData" />
<div>暂无数据</div>
</slot>
</div>
</template>
</el-table>
</div>
</el-form>
<el-table
:data="formData.engineeringMainPersonList"
height="400"
max-height="500"
class="el-table"
:header-cell-style="{ textAlign: 'center' }"
:cell-style="{ textAlign: 'center' }"
>
<el-table-column prop="name" label="姓名">
<template #default="{ row }">
<el-input style="text-align: center" class="test" v-model="row.name" />
</template>
</el-table-column>
<el-table-column prop="jobId" label="职务">
<template #default="{ row }">
<el-select class="select" v-model="row.jobId">
<el-option v-for="item in jobOptions" :key="item.dictCode" :label="item.dictValue" :value="item.dictLabel" />
</el-select>
</template>
</el-table-column>
<el-table-column prop="station" label="职称/岗位">
<template #default="{ row }">
<el-input class="test" v-model="row.station" />
</template>
</el-table-column>
<el-table-column prop="stationCode" label="职称证号/岗位证号">
<template #default="{ row }">
<el-input class="test" v-model="row.stationCode" />
</template>
</el-table-column>
<el-table-column prop="idCard" label="身份证号">
<template #default="{ row }">
<el-input class="test" v-model="row.idCard" />
</template>
</el-table-column>
<el-table-column prop="phone" label="联系电话">
<template #default="{ row }">
<el-input class="test" v-model="row.phone" />
</template>
</el-table-column>
<el-table-column fixed="right" width="100">
<template #header>
<el-button type="primary" round @click="addEngineeringMainPerson">新增</el-button>
</template>
<template #default="{ row }">
<el-button type="danger" link @click="removeEngineeringMainPerson(row)">删除</el-button>
</template>
</el-table-column>
<!-- 表格无数据情况 -->
<template #empty>
<div class="table-empty">
<slot name="empty">
<img src="@/assets/images/notData.png" alt="notData" />
<div>暂无数据</div>
</slot>
</div>
</template>
</el-table>
<addCompany v-model:detailsDialog="openAddCompany" :relativeInfo="companyType" @confirm="allConfirm"></addCompany>
</div>
</template>
@ -130,11 +134,13 @@ const formData = computed(() => props.formConfig.formData),
const nameOptions = ref([{ enterpriseSn: "", enterpriseName: "", creditCode: "", legalPerson: "", legalPersonTel: "" }]),
jobOptions = ref([{ dictCode: "", dictValue: "", dictLabel: undefined }]);
watch(
() => formData.value.type,
() => props.formConfig,
(n, o) => {
getMainData();
},
{
deep: true
}
);
const allConfirm = () => {
@ -142,21 +148,21 @@ const allConfirm = () => {
};
const openAddDialog = () => {
companyType.value = reactive({
dictLabel: formData.value.type
dictLabel: formData.value[0].type
});
openAddCompany.value = true;
};
const onChange = (option: any) => {
const onChange = (option: any, index: number) => {
// const value = nameOptions.value.find(item => item.enterpriseSn == option[option.length - 1]);
const value = nameOptions.value.find(item => item.enterpriseSn == option);
if (!value) return;
formData.value.creditCode = value.creditCode;
formData.value.legalPerson = value.legalPerson;
formData.value.legalPersonTel = value.legalPersonTel;
formData.value[index].creditCode = value.creditCode;
formData.value[index].legalPerson = value.legalPerson;
formData.value[index].legalPersonTel = value.legalPersonTel;
};
const addEngineeringMainPerson = () => {
formData.value.engineeringMainPersonList?.push({
const addEngineeringMainPerson = (index: any) => {
formData.value[index].engineeringMainPersonList?.push({
name: "",
jobId: "",
station: "",
@ -166,18 +172,19 @@ const addEngineeringMainPerson = () => {
});
};
const removeEngineeringMainPerson = (row: EngineeringMainPerson) => {
const index = formData.value.engineeringMainPersonList?.indexOf(row);
const removeEngineeringMainPerson = (row: EngineeringMainPerson, ind: number) => {
const index = formData.value[ind].engineeringMainPersonList?.indexOf(row);
// index && index >= 0 && formData.value.engineeringMainPersonList?.splice(index, 1);
!index >= 0 && formData.value.engineeringMainPersonList?.splice(index, 1);
!index >= 0 && formData.value[ind].engineeringMainPersonList?.splice(index, 1);
};
const getMainData = async () => {
const data = await queryMainType({ mainType: formData.value.type });
const data = await queryMainType({ mainType: formData.value[0].type });
nameOptions.value = data.result;
};
onMounted(async () => {
const res = await getDicList({ dictType: "engineering_post" });
jobOptions.value = res.result;
getMainData();
});
</script>