add
This commit is contained in:
zmj
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.generalize = e.project_scale
|
||||
formData.Acontact = e.part_a_contract
|
||||
// part_a_contract
|
||||
showDialog.value = false;
|
||||
};
|
||||
|
||||
|
||||
@ -1,163 +1,122 @@
|
||||
<template>
|
||||
<div class="edit-popup">
|
||||
<popup
|
||||
ref="popupRef"
|
||||
:title="popupTitle"
|
||||
:async="true"
|
||||
width="80vw"
|
||||
@confirm="handleSubmit"
|
||||
@close="handleClose"
|
||||
>
|
||||
<el-form
|
||||
ref="formRef"
|
||||
:model="formData"
|
||||
label-width="90px"
|
||||
:rules="formRules"
|
||||
>
|
||||
<el-row>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="项目名称" prop="project_id">
|
||||
<el-input
|
||||
v-model="formData.project_name"
|
||||
clearable
|
||||
placeholder="点击选择项目"
|
||||
readonly
|
||||
@click="showDialog = true"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="单位名称" prop="unit_name">
|
||||
<el-input
|
||||
v-model="formData.unit_name"
|
||||
clearable
|
||||
placeholder="请输入单位名称"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="单位类别" prop="unit_type">
|
||||
<el-select
|
||||
class="flex-1"
|
||||
v-model="formData.unit_type"
|
||||
clearable
|
||||
placeholder="请选择单位类别"
|
||||
>
|
||||
<el-option
|
||||
v-for="(item, index) in dictData.unit_type"
|
||||
:key="index"
|
||||
:label="item.name"
|
||||
:value="parseInt(item.value)"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="资质等级" prop="qualification_grade">
|
||||
<el-input
|
||||
v-model="formData.qualification_grade"
|
||||
clearable
|
||||
placeholder="请输入资质等级"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="联系电话" prop="telephone">
|
||||
<el-input
|
||||
v-model="formData.telephone"
|
||||
clearable
|
||||
placeholder="请输入联系电话"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="责任范围" prop="duty">
|
||||
<el-input
|
||||
v-model="formData.duty"
|
||||
clearable
|
||||
placeholder="请输入责任范围"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-dialog v-model="showDialog" title="选择项目" width="70%">
|
||||
<dialogTable
|
||||
@customEvent="customEvent"
|
||||
:config="supervision_project"
|
||||
/>
|
||||
</el-dialog>
|
||||
<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>
|
||||
</el-form>
|
||||
</popup>
|
||||
</div>
|
||||
<div class="edit-popup">
|
||||
<popup ref="popupRef" :title="popupTitle" :async="true" width="80vw" @confirm="handleSubmit"
|
||||
@close="handleClose">
|
||||
<el-form ref="formRef" :model="formData" label-width="90px" :rules="formRules">
|
||||
<el-row>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="项目名称" prop="project_id">
|
||||
<el-input v-model="formData.project_name" clearable placeholder="点击选择项目" readonly
|
||||
@click="showDialog = true" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="单位名称" prop="unit_name">
|
||||
<el-input v-model="formData.unit_name" clearable placeholder="请输入单位名称" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="单位类别" prop="unit_type">
|
||||
<el-select class="flex-1" v-model="formData.unit_type" clearable placeholder="请选择单位类别">
|
||||
<el-option v-for="(item, index) in dictData.unit_type" :key="index" :label="item.name"
|
||||
:value="parseInt(item.value)" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="资质等级" prop="qualification_grade">
|
||||
<el-input v-model="formData.qualification_grade" clearable placeholder="请输入资质等级" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="联系电话" prop="telephone">
|
||||
<el-input v-model="formData.telephone" clearable placeholder="请输入联系电话" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="责任范围" prop="duty">
|
||||
<el-input v-model="formData.duty" clearable placeholder="请输入责任范围" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-dialog v-model="showDialog" title="选择项目" width="70%">
|
||||
<dialogTable @customEvent="customEvent" :config="supervision_project" />
|
||||
</el-dialog>
|
||||
|
||||
|
||||
|
||||
|
||||
<FormTable></FormTable>
|
||||
<!-- <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> -->
|
||||
</el-form>
|
||||
</popup>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup name="supervisionParticipatingUnitsEdit">
|
||||
import type { FormInstance } from "element-plus";
|
||||
import Popup from "@/components/popup/index.vue";
|
||||
import {
|
||||
apiSupervisionParticipatingUnitsAdd,
|
||||
apiSupervisionParticipatingUnitsEdit,
|
||||
apiSupervisionParticipatingUnitsDetail,
|
||||
apiSupervisionParticipatingUnitsAdd,
|
||||
apiSupervisionParticipatingUnitsEdit,
|
||||
apiSupervisionParticipatingUnitsDetail,
|
||||
} from "@/api/supervision_participating_units";
|
||||
import {
|
||||
apiSupervisionParticipatingUnitsContactsLists,
|
||||
apiSupervisionParticipatingUnitsContactsDelete,
|
||||
apiSupervisionParticipatingUnitsContactsLists,
|
||||
apiSupervisionParticipatingUnitsContactsDelete,
|
||||
} from "@/api/supervision_participating_units_contacts";
|
||||
import { supervision_project } from "@/components/dialogTable/dialogTableConfig";
|
||||
import type { PropType } from "vue";
|
||||
defineProps({
|
||||
dictData: {
|
||||
type: Object as PropType<Record<string, any[]>>,
|
||||
default: () => ({}),
|
||||
},
|
||||
dictData: {
|
||||
type: Object as PropType<Record<string, any[]>>,
|
||||
default: () => ({}),
|
||||
},
|
||||
});
|
||||
const emit = defineEmits(["success", "close"]);
|
||||
const formRef = shallowRef<FormInstance>();
|
||||
@ -167,140 +126,140 @@ const mode = ref("add");
|
||||
const showDialog = ref(false);
|
||||
// 弹窗标题
|
||||
const popupTitle = computed(() => {
|
||||
return mode.value == "edit"
|
||||
? "编辑工程监理--参建单位"
|
||||
: "新增工程监理--参建单位";
|
||||
return mode.value == "edit"
|
||||
? "编辑工程监理--参建单位"
|
||||
: "新增工程监理--参建单位";
|
||||
});
|
||||
|
||||
// 表单数据
|
||||
const formData = reactive({
|
||||
id: "",
|
||||
project_id: "",
|
||||
project_name: "",
|
||||
unit_name: "",
|
||||
unit_type: "",
|
||||
qualification_grade: "",
|
||||
telephone: "",
|
||||
duty: "",
|
||||
contacts: [],
|
||||
id: "",
|
||||
project_id: "",
|
||||
project_name: "",
|
||||
unit_name: "",
|
||||
unit_type: "",
|
||||
qualification_grade: "",
|
||||
telephone: "",
|
||||
duty: "",
|
||||
contacts: [],
|
||||
});
|
||||
|
||||
const customEvent = (e) => {
|
||||
formData.project_id = e.id;
|
||||
formData.project_name = e.project_name;
|
||||
showDialog.value = false;
|
||||
formData.project_id = e.id;
|
||||
formData.project_name = e.project_name;
|
||||
showDialog.value = false;
|
||||
};
|
||||
|
||||
const handleAdd = () => {
|
||||
formData.contacts.push({
|
||||
name: "",
|
||||
duties: "",
|
||||
telephone: "",
|
||||
mobile: "",
|
||||
email: "",
|
||||
fax: "",
|
||||
});
|
||||
formData.contacts.push({
|
||||
name: "",
|
||||
duties: "",
|
||||
telephone: "",
|
||||
mobile: "",
|
||||
email: "",
|
||||
fax: "",
|
||||
});
|
||||
};
|
||||
const handleDelete = async (row: any) => {
|
||||
if (row.id) {
|
||||
await apiSupervisionParticipatingUnitsContactsDelete({ id: row.id });
|
||||
}
|
||||
const index = formData.contacts.indexOf(row);
|
||||
formData.contacts.splice(index, 1);
|
||||
if (row.id) {
|
||||
await apiSupervisionParticipatingUnitsContactsDelete({ id: row.id });
|
||||
}
|
||||
const index = formData.contacts.indexOf(row);
|
||||
formData.contacts.splice(index, 1);
|
||||
};
|
||||
|
||||
// 表单验证
|
||||
const formRules = reactive<any>({
|
||||
project_id: [
|
||||
{
|
||||
required: true,
|
||||
message: "请选择项目",
|
||||
trigger: ["blur"],
|
||||
},
|
||||
],
|
||||
unit_name: [
|
||||
{
|
||||
required: true,
|
||||
message: "请输入单位名称",
|
||||
trigger: ["blur"],
|
||||
},
|
||||
],
|
||||
unit_type: [
|
||||
{
|
||||
required: true,
|
||||
message: "请输入单位类别",
|
||||
trigger: ["blur"],
|
||||
},
|
||||
],
|
||||
qualification_grade: [
|
||||
{
|
||||
required: true,
|
||||
message: "请输入资质等级",
|
||||
trigger: ["blur"],
|
||||
},
|
||||
],
|
||||
telephone: [
|
||||
{
|
||||
required: true,
|
||||
message: "请输入联系电话",
|
||||
trigger: ["blur"],
|
||||
},
|
||||
],
|
||||
duty: [
|
||||
{
|
||||
required: true,
|
||||
message: "请输入责任范围",
|
||||
trigger: ["blur"],
|
||||
},
|
||||
],
|
||||
project_id: [
|
||||
{
|
||||
required: true,
|
||||
message: "请选择项目",
|
||||
trigger: ["blur"],
|
||||
},
|
||||
],
|
||||
unit_name: [
|
||||
{
|
||||
required: true,
|
||||
message: "请输入单位名称",
|
||||
trigger: ["blur"],
|
||||
},
|
||||
],
|
||||
unit_type: [
|
||||
{
|
||||
required: true,
|
||||
message: "请输入单位类别",
|
||||
trigger: ["blur"],
|
||||
},
|
||||
],
|
||||
qualification_grade: [
|
||||
{
|
||||
required: true,
|
||||
message: "请输入资质等级",
|
||||
trigger: ["blur"],
|
||||
},
|
||||
],
|
||||
telephone: [
|
||||
{
|
||||
required: true,
|
||||
message: "请输入联系电话",
|
||||
trigger: ["blur"],
|
||||
},
|
||||
],
|
||||
duty: [
|
||||
{
|
||||
required: true,
|
||||
message: "请输入责任范围",
|
||||
trigger: ["blur"],
|
||||
},
|
||||
],
|
||||
});
|
||||
|
||||
// 获取详情
|
||||
const setFormData = async (data: Record<any, any>) => {
|
||||
for (const key in formData) {
|
||||
if (data[key] != null && data[key] != undefined) {
|
||||
//@ts-ignore
|
||||
formData[key] = data[key];
|
||||
for (const key in formData) {
|
||||
if (data[key] != null && data[key] != undefined) {
|
||||
//@ts-ignore
|
||||
formData[key] = data[key];
|
||||
}
|
||||
}
|
||||
}
|
||||
let res = await apiSupervisionParticipatingUnitsContactsLists({
|
||||
unit_id: data.id,
|
||||
});
|
||||
formData.contacts = res.lists;
|
||||
let res = await apiSupervisionParticipatingUnitsContactsLists({
|
||||
unit_id: data.id,
|
||||
});
|
||||
formData.contacts = res.lists;
|
||||
};
|
||||
|
||||
const getDetail = async (row: Record<string, any>) => {
|
||||
const data = await apiSupervisionParticipatingUnitsDetail({
|
||||
id: row.id,
|
||||
});
|
||||
setFormData(data);
|
||||
const data = await apiSupervisionParticipatingUnitsDetail({
|
||||
id: row.id,
|
||||
});
|
||||
setFormData(data);
|
||||
};
|
||||
|
||||
// 提交按钮
|
||||
const handleSubmit = async () => {
|
||||
await formRef.value?.validate();
|
||||
const data = { ...formData };
|
||||
mode.value == "edit"
|
||||
? await apiSupervisionParticipatingUnitsEdit(data)
|
||||
: await apiSupervisionParticipatingUnitsAdd(data);
|
||||
popupRef.value?.close();
|
||||
emit("success");
|
||||
await formRef.value?.validate();
|
||||
const data = { ...formData };
|
||||
mode.value == "edit"
|
||||
? await apiSupervisionParticipatingUnitsEdit(data)
|
||||
: await apiSupervisionParticipatingUnitsAdd(data);
|
||||
popupRef.value?.close();
|
||||
emit("success");
|
||||
};
|
||||
|
||||
//打开弹窗
|
||||
const open = (type = "add") => {
|
||||
mode.value = type;
|
||||
popupRef.value?.open();
|
||||
mode.value = type;
|
||||
popupRef.value?.open();
|
||||
};
|
||||
|
||||
// 关闭回调
|
||||
const handleClose = () => {
|
||||
emit("close");
|
||||
emit("close");
|
||||
};
|
||||
|
||||
defineExpose({
|
||||
open,
|
||||
setFormData,
|
||||
getDetail,
|
||||
open,
|
||||
setFormData,
|
||||
getDetail,
|
||||
});
|
||||
</script>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user