fix: BUG修改
This commit is contained in:
parent
21ef709e0c
commit
319d90b99d
@ -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>
|
||||||
@ -5,6 +5,13 @@
|
|||||||
.steps {
|
.steps {
|
||||||
padding: 2% 6%;
|
padding: 2% 6%;
|
||||||
}
|
}
|
||||||
|
.add-btn {
|
||||||
|
margin-bottom: 20px;
|
||||||
|
margin-right: 6%;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: flex-end;
|
||||||
|
}
|
||||||
v-deep {
|
v-deep {
|
||||||
.is-process {
|
.is-process {
|
||||||
color: #018bfe;
|
color: #018bfe;
|
||||||
|
|||||||
@ -12,50 +12,101 @@ export interface FormData {
|
|||||||
}
|
}
|
||||||
|
|
||||||
export type EngineeringMainList = Array<FormData & EngineeringMain>;
|
export type EngineeringMainList = Array<FormData & EngineeringMain>;
|
||||||
|
export const formData = ref([
|
||||||
export const formData = ref<EngineeringMainList>([
|
[
|
||||||
{
|
{
|
||||||
enterpriseSn: "",
|
enterpriseSn: "",
|
||||||
creditCode: "",
|
creditCode: "",
|
||||||
legalPerson: "",
|
legalPerson: "",
|
||||||
legalPersonTel: "",
|
legalPersonTel: "",
|
||||||
type: undefined,
|
type: undefined,
|
||||||
engineeringMainPersonList: []
|
engineeringMainPersonList: []
|
||||||
},
|
}
|
||||||
{
|
],
|
||||||
enterpriseSn: "",
|
[
|
||||||
creditCode: "",
|
{
|
||||||
legalPerson: "",
|
enterpriseSn: "",
|
||||||
legalPersonTel: "",
|
creditCode: "",
|
||||||
type: undefined,
|
legalPerson: "",
|
||||||
engineeringMainPersonList: []
|
legalPersonTel: "",
|
||||||
},
|
type: undefined,
|
||||||
{
|
engineeringMainPersonList: []
|
||||||
enterpriseSn: "",
|
}
|
||||||
creditCode: "",
|
],
|
||||||
legalPerson: "",
|
[
|
||||||
legalPersonTel: "",
|
{
|
||||||
contractType: "",
|
enterpriseSn: "",
|
||||||
type: undefined,
|
creditCode: "",
|
||||||
engineeringMainPersonList: []
|
legalPerson: "",
|
||||||
},
|
legalPersonTel: "",
|
||||||
{
|
type: undefined,
|
||||||
enterpriseSn: "",
|
engineeringMainPersonList: []
|
||||||
creditCode: "",
|
}
|
||||||
legalPerson: "",
|
],
|
||||||
legalPersonTel: "",
|
[
|
||||||
type: undefined,
|
{
|
||||||
engineeringMainPersonList: []
|
enterpriseSn: "",
|
||||||
},
|
creditCode: "",
|
||||||
{
|
legalPerson: "",
|
||||||
enterpriseSn: "",
|
legalPersonTel: "",
|
||||||
creditCode: "",
|
type: undefined,
|
||||||
legalPerson: "",
|
engineeringMainPersonList: []
|
||||||
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]>({
|
export const datas = ref<EngineeringMainList[number]>({
|
||||||
enterpriseSn: "建设单位名称",
|
enterpriseSn: "建设单位名称",
|
||||||
|
|||||||
@ -9,7 +9,9 @@
|
|||||||
@click="active = i"
|
@click="active = i"
|
||||||
/>
|
/>
|
||||||
</el-steps>
|
</el-steps>
|
||||||
|
<div class="add-btn">
|
||||||
|
<el-button class="btnStyle" type="primary" @click="addEnterpriseData">添加</el-button>
|
||||||
|
</div>
|
||||||
<duty-form :form-config="formConfig" />
|
<duty-form :form-config="formConfig" />
|
||||||
|
|
||||||
<footer class="footer">
|
<footer class="footer">
|
||||||
@ -47,13 +49,28 @@ const formConfig = reactive({
|
|||||||
});
|
});
|
||||||
|
|
||||||
const isAllowNext = computed(() => active.value >= stepOptions.value.length - 1);
|
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 = () => {
|
const handleToPrevOrNext = () => {
|
||||||
if (isAllowNext.value) {
|
if (isAllowNext.value) {
|
||||||
console.log(formData.value, 777888);
|
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 !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("请输入必填项");
|
if (isInValid) return ElMessage.warning("请输入必填项");
|
||||||
@ -75,34 +92,39 @@ watch(
|
|||||||
onMounted(async () => {
|
onMounted(async () => {
|
||||||
const data = await getDicList({ dictType: "enterprise_main", status: 1, isDefault: "Y" });
|
const data = await getDicList({ dictType: "enterprise_main", status: 1, isDefault: "Y" });
|
||||||
stepOptions.value = data.result;
|
stepOptions.value = data.result;
|
||||||
formData.value = formData.value.map((item, index) => ({
|
console.log(formData.value, 778899);
|
||||||
...item,
|
formData.value.map((item, index) => {
|
||||||
type: data.result[index].dictLabel as Type
|
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.formData = formData.value[active.value];
|
||||||
formConfig.datas.enterpriseSn = stepOptions.value[active.value].dictValue + "名称";
|
formConfig.datas.enterpriseSn = stepOptions.value[active.value].dictValue + "名称";
|
||||||
|
|
||||||
if (store.Message && store.Message.engineeringMains.length) {
|
// if (store.Message && store.Message.engineeringMains.length) {
|
||||||
formData.value = formData.value.map(item => {
|
// formData.value = formData.value.map(item => {
|
||||||
// console.log("main", store.Message.engineeringMains);
|
// console.log("main", store.Message.engineeringMains);
|
||||||
let curr = store.Message.engineeringMains.find(main => item.type == main.type);
|
// let curr = store.Message.engineeringMains.find(main => item.type == main.type);
|
||||||
if ("contractType" in item) {
|
// if ("contractType" in item) {
|
||||||
return (curr = {
|
// return (curr = {
|
||||||
...curr,
|
// ...curr,
|
||||||
enterpriseSn: curr.enterpriseSn,
|
// enterpriseSn: curr.enterpriseSn,
|
||||||
creditCode: curr.creditCode,
|
// creditCode: curr.creditCode,
|
||||||
legalPerson: curr.legalPerson,
|
// legalPerson: curr.legalPerson,
|
||||||
legalPersonTel: curr.legalPersonTel,
|
// legalPersonTel: curr.legalPersonTel,
|
||||||
contractType: curr.contractType
|
// contractType: curr.contractType
|
||||||
});
|
// });
|
||||||
} else {
|
// } else {
|
||||||
delete curr["contractType"];
|
// delete curr["contractType"];
|
||||||
return curr;
|
// return curr;
|
||||||
}
|
// }
|
||||||
});
|
// });
|
||||||
|
|
||||||
formConfig.formData = formData.value[active.value];
|
// formConfig.formData = formData.value[active.value];
|
||||||
}
|
// }
|
||||||
});
|
});
|
||||||
|
|
||||||
onUnmounted(() => reset());
|
onUnmounted(() => reset());
|
||||||
|
|||||||
@ -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>
|
||||||
@ -1,11 +1,8 @@
|
|||||||
.duty-form {
|
.duty-form {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
padding: 0 6%;
|
padding: 0 6%;
|
||||||
.add-btn {
|
.form > div:not(:last-child) {
|
||||||
margin-bottom: 20px;
|
margin-bottom: 30px;
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: flex-end;
|
|
||||||
}
|
}
|
||||||
.row {
|
.row {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|||||||
@ -1,105 +1,109 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="duty-form">
|
<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">
|
<el-form class="form" ref="formRef" :model="formData" :rules="formConfig.rules" label-width="150px">
|
||||||
<div class="row">
|
<div v-for="(item, index) in formData" :key="index">
|
||||||
<template v-for="(val, key) in formData" :key="datas[key]">
|
<div class="row">
|
||||||
<el-form-item
|
<template v-for="(val, key) in item" :key="datas[key]">
|
||||||
v-if="Object.keys(datas).includes(key)"
|
<!-- :prop="item.type != 4 && item.type != 5 ? item[key] : ''" -->
|
||||||
class="form-item"
|
<el-form-item
|
||||||
:prop="formData.type != 4 && formData.type != 5 ? key : ''"
|
v-if="Object.keys(datas).includes(key)"
|
||||||
:label="datas[key]"
|
class="form-item"
|
||||||
>
|
:rules="
|
||||||
<el-select
|
item.type != 4 && item.type != 5 && key === 'enterpriseSn'
|
||||||
class="select"
|
? [{ required: true, message: '请选择', trigger: 'blur' }]
|
||||||
v-if="key === 'enterpriseSn'"
|
: []
|
||||||
style="width: 100%"
|
"
|
||||||
@change="onChange"
|
:label="datas[key]"
|
||||||
v-model="formData[key]"
|
|
||||||
>
|
>
|
||||||
<el-option value="" @click="openAddDialog" v-show="formData.type != 1">
|
<el-select
|
||||||
<div class="selectAdd">
|
class="select"
|
||||||
<el-icon><circle-plus /></el-icon>
|
v-if="key === 'enterpriseSn'"
|
||||||
<span>新建</span>
|
style="width: 100%"
|
||||||
</div>
|
@change="option => onChange(option, index)"
|
||||||
</el-option>
|
v-model="item[key]"
|
||||||
<el-option
|
>
|
||||||
v-for="item in nameOptions"
|
<el-option value="" @click="openAddDialog" v-show="item.type != 1">
|
||||||
:key="item.enterpriseSn"
|
<div class="selectAdd">
|
||||||
:label="item.enterpriseName"
|
<el-icon><circle-plus /></el-icon>
|
||||||
:value="item.enterpriseSn"
|
<span>新建</span>
|
||||||
/>
|
</div>
|
||||||
</el-select>
|
</el-option>
|
||||||
<!-- <div v-if="key === 'enterpriseSn'" class="search">
|
<el-option
|
||||||
<el-icon class="icon"><Search /></el-icon>
|
v-for="item2 in nameOptions"
|
||||||
</div> -->
|
:key="item2.enterpriseSn"
|
||||||
<el-input v-else v-model="formData[key]" />
|
:label="item2.enterpriseName"
|
||||||
</el-form-item>
|
:value="item2.enterpriseSn"
|
||||||
</template>
|
/>
|
||||||
|
</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>
|
</div>
|
||||||
</el-form>
|
</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>
|
<addCompany v-model:detailsDialog="openAddCompany" :relativeInfo="companyType" @confirm="allConfirm"></addCompany>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
@ -130,11 +134,13 @@ const formData = computed(() => props.formConfig.formData),
|
|||||||
|
|
||||||
const nameOptions = ref([{ enterpriseSn: "", enterpriseName: "", creditCode: "", legalPerson: "", legalPersonTel: "" }]),
|
const nameOptions = ref([{ enterpriseSn: "", enterpriseName: "", creditCode: "", legalPerson: "", legalPersonTel: "" }]),
|
||||||
jobOptions = ref([{ dictCode: "", dictValue: "", dictLabel: undefined }]);
|
jobOptions = ref([{ dictCode: "", dictValue: "", dictLabel: undefined }]);
|
||||||
|
|
||||||
watch(
|
watch(
|
||||||
() => formData.value.type,
|
() => props.formConfig,
|
||||||
(n, o) => {
|
(n, o) => {
|
||||||
getMainData();
|
getMainData();
|
||||||
|
},
|
||||||
|
{
|
||||||
|
deep: true
|
||||||
}
|
}
|
||||||
);
|
);
|
||||||
const allConfirm = () => {
|
const allConfirm = () => {
|
||||||
@ -142,21 +148,21 @@ const allConfirm = () => {
|
|||||||
};
|
};
|
||||||
const openAddDialog = () => {
|
const openAddDialog = () => {
|
||||||
companyType.value = reactive({
|
companyType.value = reactive({
|
||||||
dictLabel: formData.value.type
|
dictLabel: formData.value[0].type
|
||||||
});
|
});
|
||||||
openAddCompany.value = true;
|
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[option.length - 1]);
|
||||||
const value = nameOptions.value.find(item => item.enterpriseSn == option);
|
const value = nameOptions.value.find(item => item.enterpriseSn == option);
|
||||||
if (!value) return;
|
if (!value) return;
|
||||||
formData.value.creditCode = value.creditCode;
|
formData.value[index].creditCode = value.creditCode;
|
||||||
formData.value.legalPerson = value.legalPerson;
|
formData.value[index].legalPerson = value.legalPerson;
|
||||||
formData.value.legalPersonTel = value.legalPersonTel;
|
formData.value[index].legalPersonTel = value.legalPersonTel;
|
||||||
};
|
};
|
||||||
|
|
||||||
const addEngineeringMainPerson = () => {
|
const addEngineeringMainPerson = (index: any) => {
|
||||||
formData.value.engineeringMainPersonList?.push({
|
formData.value[index].engineeringMainPersonList?.push({
|
||||||
name: "",
|
name: "",
|
||||||
jobId: "",
|
jobId: "",
|
||||||
station: "",
|
station: "",
|
||||||
@ -166,18 +172,19 @@ const addEngineeringMainPerson = () => {
|
|||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
const removeEngineeringMainPerson = (row: EngineeringMainPerson) => {
|
const removeEngineeringMainPerson = (row: EngineeringMainPerson, ind: number) => {
|
||||||
const index = formData.value.engineeringMainPersonList?.indexOf(row);
|
const index = formData.value[ind].engineeringMainPersonList?.indexOf(row);
|
||||||
// index && index >= 0 && formData.value.engineeringMainPersonList?.splice(index, 1);
|
// 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 getMainData = async () => {
|
||||||
const data = await queryMainType({ mainType: formData.value.type });
|
const data = await queryMainType({ mainType: formData.value[0].type });
|
||||||
nameOptions.value = data.result;
|
nameOptions.value = data.result;
|
||||||
};
|
};
|
||||||
onMounted(async () => {
|
onMounted(async () => {
|
||||||
const res = await getDicList({ dictType: "engineering_post" });
|
const res = await getDicList({ dictType: "engineering_post" });
|
||||||
jobOptions.value = res.result;
|
jobOptions.value = res.result;
|
||||||
|
getMainData();
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user