This commit is contained in:
zmj 2024-03-15 14:03:08 +08:00
parent c67aec6636
commit b8f68366ae
3 changed files with 267 additions and 244 deletions

View File

@ -0,0 +1,65 @@
<template>
<div style="margin-bottom: 30px">
联系人
<!-- <el-button @click="handleAdd" v-if="!formData.contacts.length">+</el-button> -->
</div>
<div style="margin-bottom: 30px">
<el-table :data="formData.contacts">
<el-table-column label="序号">
<template #default="{ row }">
<el-button @click="handleAdd">+</el-button>
<el-button @click="handleDelete(row)">-</el-button>
</template>
</el-table-column>
<el-table-column label="姓名" prop="name">
<template #default="{ row }">
<el-input v-model="row.name" />
</template>
</el-table-column>
<el-table-column label="职务" prop="duties">
<template #default="{ row }">
<el-input v-model="row.duties" />
</template>
</el-table-column>
<el-table-column label="办公电话" prop="telephone">
<template #default="{ row }">
<el-input v-model="row.telephone" />
</template>
</el-table-column>
<el-table-column label="手机号码" prop="mobile">
<template #default="{ row }">
<el-input v-model="row.mobile" />
</template>
</el-table-column>
<el-table-column label="电子邮箱" prop="email">
<template #default="{ row }">
<el-input v-model="row.email" />
</template>
</el-table-column>
<el-table-column label="传真" prop="fax">
<template #default="{ row }">
<el-input v-model="row.fax" />
</template>
</el-table-column>
</el-table>
</div>
</template>
<script lang="ts" setup>
import { ref, defineProps, onMounted } from "vue"
const props = defineProps({
formData: {
type: Object,
require: true
}
})
</script>

View File

@ -313,7 +313,6 @@ const customEvent = (e) => {
formData.aunit = e.part_a formData.aunit = e.part_a
formData.generalize = e.project_scale formData.generalize = e.project_scale
formData.Acontact = e.part_a_contract formData.Acontact = e.part_a_contract
// part_a_contract
showDialog.value = false; showDialog.value = false;
}; };

View File

@ -1,163 +1,122 @@
<template> <template>
<div class="edit-popup"> <div class="edit-popup">
<popup <popup ref="popupRef" :title="popupTitle" :async="true" width="80vw" @confirm="handleSubmit"
ref="popupRef" @close="handleClose">
:title="popupTitle" <el-form ref="formRef" :model="formData" label-width="90px" :rules="formRules">
:async="true" <el-row>
width="80vw" <el-col :span="8">
@confirm="handleSubmit" <el-form-item label="项目名称" prop="project_id">
@close="handleClose" <el-input v-model="formData.project_name" clearable placeholder="点击选择项目" readonly
> @click="showDialog = true" />
<el-form </el-form-item>
ref="formRef" </el-col>
:model="formData" <el-col :span="8">
label-width="90px" <el-form-item label="单位名称" prop="unit_name">
:rules="formRules" <el-input v-model="formData.unit_name" clearable placeholder="请输入单位名称" />
> </el-form-item>
<el-row> </el-col>
<el-col :span="8"> <el-col :span="8">
<el-form-item label="项目名称" prop="project_id"> <el-form-item label="单位类别" prop="unit_type">
<el-input <el-select class="flex-1" v-model="formData.unit_type" clearable placeholder="请选择单位类别">
v-model="formData.project_name" <el-option v-for="(item, index) in dictData.unit_type" :key="index" :label="item.name"
clearable :value="parseInt(item.value)" />
placeholder="点击选择项目" </el-select>
readonly </el-form-item>
@click="showDialog = true" </el-col>
/> </el-row>
</el-form-item> <el-row>
</el-col> <el-col :span="8">
<el-col :span="8"> <el-form-item label="资质等级" prop="qualification_grade">
<el-form-item label="单位名称" prop="unit_name"> <el-input v-model="formData.qualification_grade" clearable placeholder="请输入资质等级" />
<el-input </el-form-item>
v-model="formData.unit_name" </el-col>
clearable <el-col :span="8">
placeholder="请输入单位名称" <el-form-item label="联系电话" prop="telephone">
/> <el-input v-model="formData.telephone" clearable placeholder="请输入联系电话" />
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="8"> <el-col :span="8">
<el-form-item label="单位类别" prop="unit_type"> <el-form-item label="责任范围" prop="duty">
<el-select <el-input v-model="formData.duty" clearable placeholder="请输入责任范围" />
class="flex-1" </el-form-item>
v-model="formData.unit_type" </el-col>
clearable </el-row>
placeholder="请选择单位类别" <el-dialog v-model="showDialog" title="选择项目" width="70%">
> <dialogTable @customEvent="customEvent" :config="supervision_project" />
<el-option </el-dialog>
v-for="(item, index) in dictData.unit_type"
:key="index"
:label="item.name"
:value="parseInt(item.value)"
/> <FormTable></FormTable>
</el-select> <!-- <div style="margin-bottom: 30px">
</el-form-item> 联系人
</el-col> <el-button @click="handleAdd" v-if="!formData.contacts.length">+</el-button>
</el-row> </div>
<el-row> <div style="margin-bottom: 30px">
<el-col :span="8"> <el-table :data="formData.contacts">
<el-form-item label="资质等级" prop="qualification_grade"> <el-table-column label="序号">
<el-input <template #default="{ row }">
v-model="formData.qualification_grade" <el-button @click="handleAdd">+</el-button>
clearable <el-button @click="handleDelete(row)">-</el-button>
placeholder="请输入资质等级" </template>
/> </el-table-column>
</el-form-item> <el-table-column label="姓名" prop="name">
</el-col> <template #default="{ row }">
<el-col :span="8"> <el-input v-model="row.name" />
<el-form-item label="联系电话" prop="telephone"> </template>
<el-input </el-table-column>
v-model="formData.telephone" <el-table-column label="职务" prop="duties">
clearable <template #default="{ row }">
placeholder="请输入联系电话" <el-input v-model="row.duties" />
/> </template>
</el-form-item> </el-table-column>
</el-col> <el-table-column label="办公电话" prop="telephone">
<el-col :span="8"> <template #default="{ row }">
<el-form-item label="责任范围" prop="duty"> <el-input v-model="row.telephone" />
<el-input </template>
v-model="formData.duty" </el-table-column>
clearable <el-table-column label="手机号码" prop="mobile">
placeholder="请输入责任范围" <template #default="{ row }">
/> <el-input v-model="row.mobile" />
</el-form-item> </template>
</el-col> </el-table-column>
</el-row> <el-table-column label="电子邮箱" prop="email">
<el-dialog v-model="showDialog" title="选择项目" width="70%"> <template #default="{ row }">
<dialogTable <el-input v-model="row.email" />
@customEvent="customEvent" </template>
:config="supervision_project" </el-table-column>
/> <el-table-column label="传真" prop="fax">
</el-dialog> <template #default="{ row }">
<div style="margin-bottom: 30px"> <el-input v-model="row.fax" />
联系人 </template>
<el-button @click="handleAdd" v-if="!formData.contacts.length" </el-table-column>
>+</el-button </el-table>
> </div> -->
</div> </el-form>
<div style="margin-bottom: 30px"> </popup>
<el-table :data="formData.contacts"> </div>
<el-table-column label="序号">
<template #default="{ row }">
<el-button @click="handleAdd">+</el-button>
<el-button @click="handleDelete(row)">-</el-button>
</template>
</el-table-column>
<el-table-column label="姓名" prop="name">
<template #default="{ row }">
<el-input v-model="row.name" />
</template>
</el-table-column>
<el-table-column label="职务" prop="duties">
<template #default="{ row }">
<el-input v-model="row.duties" />
</template>
</el-table-column>
<el-table-column label="办公电话" prop="telephone">
<template #default="{ row }">
<el-input v-model="row.telephone" />
</template>
</el-table-column>
<el-table-column label="手机号码" prop="mobile">
<template #default="{ row }">
<el-input v-model="row.mobile" />
</template>
</el-table-column>
<el-table-column label="电子邮箱" prop="email">
<template #default="{ row }">
<el-input v-model="row.email" />
</template>
</el-table-column>
<el-table-column label="传真" prop="fax">
<template #default="{ row }">
<el-input v-model="row.fax" />
</template>
</el-table-column>
</el-table>
</div>
</el-form>
</popup>
</div>
</template> </template>
<script lang="ts" setup name="supervisionParticipatingUnitsEdit"> <script lang="ts" setup name="supervisionParticipatingUnitsEdit">
import type { FormInstance } from "element-plus"; import type { FormInstance } from "element-plus";
import Popup from "@/components/popup/index.vue"; import Popup from "@/components/popup/index.vue";
import { import {
apiSupervisionParticipatingUnitsAdd, apiSupervisionParticipatingUnitsAdd,
apiSupervisionParticipatingUnitsEdit, apiSupervisionParticipatingUnitsEdit,
apiSupervisionParticipatingUnitsDetail, apiSupervisionParticipatingUnitsDetail,
} from "@/api/supervision_participating_units"; } from "@/api/supervision_participating_units";
import { import {
apiSupervisionParticipatingUnitsContactsLists, apiSupervisionParticipatingUnitsContactsLists,
apiSupervisionParticipatingUnitsContactsDelete, apiSupervisionParticipatingUnitsContactsDelete,
} from "@/api/supervision_participating_units_contacts"; } from "@/api/supervision_participating_units_contacts";
import { supervision_project } from "@/components/dialogTable/dialogTableConfig"; import { supervision_project } from "@/components/dialogTable/dialogTableConfig";
import type { PropType } from "vue"; import type { PropType } from "vue";
defineProps({ defineProps({
dictData: { dictData: {
type: Object as PropType<Record<string, any[]>>, type: Object as PropType<Record<string, any[]>>,
default: () => ({}), default: () => ({}),
}, },
}); });
const emit = defineEmits(["success", "close"]); const emit = defineEmits(["success", "close"]);
const formRef = shallowRef<FormInstance>(); const formRef = shallowRef<FormInstance>();
@ -167,140 +126,140 @@ const mode = ref("add");
const showDialog = ref(false); const showDialog = ref(false);
// //
const popupTitle = computed(() => { const popupTitle = computed(() => {
return mode.value == "edit" return mode.value == "edit"
? "编辑工程监理--参建单位" ? "编辑工程监理--参建单位"
: "新增工程监理--参建单位"; : "新增工程监理--参建单位";
}); });
// //
const formData = reactive({ const formData = reactive({
id: "", id: "",
project_id: "", project_id: "",
project_name: "", project_name: "",
unit_name: "", unit_name: "",
unit_type: "", unit_type: "",
qualification_grade: "", qualification_grade: "",
telephone: "", telephone: "",
duty: "", duty: "",
contacts: [], contacts: [],
}); });
const customEvent = (e) => { const customEvent = (e) => {
formData.project_id = e.id; formData.project_id = e.id;
formData.project_name = e.project_name; formData.project_name = e.project_name;
showDialog.value = false; showDialog.value = false;
}; };
const handleAdd = () => { const handleAdd = () => {
formData.contacts.push({ formData.contacts.push({
name: "", name: "",
duties: "", duties: "",
telephone: "", telephone: "",
mobile: "", mobile: "",
email: "", email: "",
fax: "", fax: "",
}); });
}; };
const handleDelete = async (row: any) => { const handleDelete = async (row: any) => {
if (row.id) { if (row.id) {
await apiSupervisionParticipatingUnitsContactsDelete({ id: row.id }); await apiSupervisionParticipatingUnitsContactsDelete({ id: row.id });
} }
const index = formData.contacts.indexOf(row); const index = formData.contacts.indexOf(row);
formData.contacts.splice(index, 1); formData.contacts.splice(index, 1);
}; };
// //
const formRules = reactive<any>({ const formRules = reactive<any>({
project_id: [ project_id: [
{ {
required: true, required: true,
message: "请选择项目", message: "请选择项目",
trigger: ["blur"], trigger: ["blur"],
}, },
], ],
unit_name: [ unit_name: [
{ {
required: true, required: true,
message: "请输入单位名称", message: "请输入单位名称",
trigger: ["blur"], trigger: ["blur"],
}, },
], ],
unit_type: [ unit_type: [
{ {
required: true, required: true,
message: "请输入单位类别", message: "请输入单位类别",
trigger: ["blur"], trigger: ["blur"],
}, },
], ],
qualification_grade: [ qualification_grade: [
{ {
required: true, required: true,
message: "请输入资质等级", message: "请输入资质等级",
trigger: ["blur"], trigger: ["blur"],
}, },
], ],
telephone: [ telephone: [
{ {
required: true, required: true,
message: "请输入联系电话", message: "请输入联系电话",
trigger: ["blur"], trigger: ["blur"],
}, },
], ],
duty: [ duty: [
{ {
required: true, required: true,
message: "请输入责任范围", message: "请输入责任范围",
trigger: ["blur"], trigger: ["blur"],
}, },
], ],
}); });
// //
const setFormData = async (data: Record<any, any>) => { const setFormData = async (data: Record<any, any>) => {
for (const key in formData) { for (const key in formData) {
if (data[key] != null && data[key] != undefined) { if (data[key] != null && data[key] != undefined) {
//@ts-ignore //@ts-ignore
formData[key] = data[key]; formData[key] = data[key];
}
} }
} let res = await apiSupervisionParticipatingUnitsContactsLists({
let res = await apiSupervisionParticipatingUnitsContactsLists({ unit_id: data.id,
unit_id: data.id, });
}); formData.contacts = res.lists;
formData.contacts = res.lists;
}; };
const getDetail = async (row: Record<string, any>) => { const getDetail = async (row: Record<string, any>) => {
const data = await apiSupervisionParticipatingUnitsDetail({ const data = await apiSupervisionParticipatingUnitsDetail({
id: row.id, id: row.id,
}); });
setFormData(data); setFormData(data);
}; };
// //
const handleSubmit = async () => { const handleSubmit = async () => {
await formRef.value?.validate(); await formRef.value?.validate();
const data = { ...formData }; const data = { ...formData };
mode.value == "edit" mode.value == "edit"
? await apiSupervisionParticipatingUnitsEdit(data) ? await apiSupervisionParticipatingUnitsEdit(data)
: await apiSupervisionParticipatingUnitsAdd(data); : await apiSupervisionParticipatingUnitsAdd(data);
popupRef.value?.close(); popupRef.value?.close();
emit("success"); emit("success");
}; };
// //
const open = (type = "add") => { const open = (type = "add") => {
mode.value = type; mode.value = type;
popupRef.value?.open(); popupRef.value?.open();
}; };
// //
const handleClose = () => { const handleClose = () => {
emit("close"); emit("close");
}; };
defineExpose({ defineExpose({
open, open,
setFormData, setFormData,
getDetail, getDetail,
}); });
</script> </script>