add
This commit is contained in:
parent
c67aec6636
commit
b8f68366ae
65
src/components/formTable/index.vue
Normal file
65
src/components/formTable/index.vue
Normal 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>
|
@ -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;
|
||||||
};
|
};
|
||||||
|
|
||||||
|
@ -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>
|
||||||
|
Loading…
x
Reference in New Issue
Block a user