<template>
<layout-card>
<el-form
ref="formRef"
:model="data.form"
:rules="rules"
label-width="175px"
>
<el-divider content-position="left">工商信息</el-divider>
<el-row>
<el-col :span="8">
<el-form-item label="企业监督部门" prop="DEPARTMENT_ID">
<layout-department
v-model="data.form.DEPARTMENT_ID"
multiple
show-checkbox
root-disabled="Y"
/>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="企业主管部门" prop="COMPETENT_DEPT_ID">
<layout-department v-model="data.form.COMPETENT_DEPT_ID" />
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="企业辖区部门" prop="INVOLVING_CORPS_DEPART_ID">
<layout-department
v-model="data.form.INVOLVING_CORPS_DEPART_ID"
multiple
show-checkbox
root-disabled="Y"
/>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="重点工程名称" prop="OUTSOURCED_NAME">
<el-input
v-model="data.form.OUTSOURCED_NAME"
placeholder="请输入内容"
/>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="计划工期起止时间">
<el-date-picker
v-model="data.form.STARTTIME_TIMES"
type="daterange"
value-format="YYYY-MM-DD"
format="YYYY-MM-DD"
range-separator="至"
/>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="合同号">
<el-input
v-model="data.form.CONTRACT_NUM"
placeholder="请输入内容"
/>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="施工相关方" prop="UNITS_ID">
<el-select
v-model="data.form.UNITS_ID"
clearable
placeholder="请选择相关方"
@change="fnGetUnitUser"
>
<el-option
v-for="item in data.unitsList"
:key="item.UNITS_ID"
:label="item.UNITS_NAME"
:value="item.UNITS_ID"
/>
</el-select>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="相关方单位工程负责人" prop="UNITS_PIC">
<el-select
v-model="data.form.UNITS_PIC"
clearable
placeholder="请选择人员"
@change="fnSelectUnitsUser($event)"
>
<el-option
v-for="item in data.unitsUserList"
:key="item.PERSONNELMANAGEMENT_ID"
:label="item.NAME"
:value="item.PERSONNELMANAGEMENT_ID"
/>
</el-select>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="相关方单位负责人手机" prop="UNITS_PHONE">
<el-input
disabled
v-model="data.form.UNITS_PHONE"
placeholder="请输入内容"
/>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="监理单位名称">
<el-input
v-model="data.form.MANAGE_NAME"
placeholder="请输入内容"
/>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="监理单位工程负责人">
<el-input v-model="data.form.MANAGE_PIC" placeholder="请输入内容" />
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="监理单位负责人手机">
<el-input
v-model="data.form.MANAGE_PHONE"
placeholder="请输入内容"
/>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="集团单位">
<el-input v-model="data.form.GROUP_UNIT" placeholder="请输入内容" />
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="状态" prop="STATE">
<el-select v-model="data.form.STATE" placeholder="请选择状态">
<el-option label="进行中" value="1" />
<el-option label="已结束" value="2" />
</el-select>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="是否发送短信">
<el-input v-model="data.form.IS_SMS" placeholder="请输入内容" />
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="安全管理协议（附件）" prop="CONTACTS">
<el-input v-model="data.form.CONTACTS" placeholder="请输入内容" />
</el-form-item>
</el-col>
</el-row>
</el-form>
<el-divider content-position="left">
处罚相关
<el-button size="small" @click="addInspector"> 添加 </el-button>
</el-divider>
<template>
<template>
<template
v-for="(item, index) in data.form.acceptanceList"
:key="item.id"
>
<el-col :span="11">
<el-form-item
label="验收部门"
:prop="'acceptanceList.' + index + '.DEPARTMENT_ID'"
:rules="{
required: true,
message: '请选择验收部门',
trigger: 'change',
}"
>
<layout-department
v-model="item.DEPARTMENT_ID"
@update:model-value="fnInspectDepartmentChange($event, index)"
/>
</el-form-item>
</el-col>
<el-col :span="11">
<el-form-item
label="验收人"
:prop="'acceptanceList.' + index + '.USER_ID'"
:rules="{
required: true,
message: '请选择验收人',
trigger: 'change',
}"
>
<el-select
:model-value="item.USER_ID"
@change="
verifyDuplicateSelection(
data.form.acceptanceList,
index,
'USER_ID',
$event
)
"
>
<el-option
v-for="item in item.userList"
:key="item.USER_ID"
:label="item.NAME"
:value="item.USER_ID"
/>
</el-select>
</el-form-item>
</el-col>
<el-col :span="2">
<el-form-item label-width="10px">
<el-button
type="primary"
v-if="index === 0"
@click="fnAddInspectedList"
>
添加
</el-button>
<el-button
type="danger"
v-if="index !== 0"
@click="data.form.acceptanceList.splice(index, 1)"
>
删除
</el-button>
</el-form-item>
</el-col>
</template>
</template>
</template>
<div class="tc mt-10">
<el-button type="primary" @click="fnSubmit"> 确定 </el-button>
</div>
</layout-card>
</template>
<script setup>
import useFormValidate from "@/assets/js/useFormValidate";
import {
getUnitsListAll,
setOutsourcedAdd,
setOutsourcedEdit,
setOutsourcedGoEdit,
setPersonnelmanagementListAll,
} from "@/request/keyprojects";
import { ElMessage } from "element-plus";
import { debounce } from "throttle-debounce";
import { reactive, ref } from "vue";
import { useRoute, useRouter } from "vue-router";
import LayoutDepartment from "@/components/department/index.vue";
import { getUserListAll } from "@/request/data_dictionary";
const router = useRouter();
const route = useRoute();
const formRef = ref(null);
const rules = {
DEPARTMENT_ID: [
{ required: true, message: "请选择相关部门", trigger: "blur" },
],
COMPETENT_DEPT_ID: [
{ required: true, message: "请选择相关部门", trigger: "blur" },
],
INVOLVING_CORPS_DEPART_ID: [
{ required: true, message: "请选择相关部门", trigger: "blur" },
],
OUTSOURCED_NAME: [
{ required: true, message: "请输入重点工程名称", trigger: "blur" },
],
UNITS_ID: [{ required: true, message: "请选择相关方", trigger: "blur" }],
UNITS_PIC: [
{ required: true, message: "请选择相关方负责人", trigger: "blur" },
],
UNITS_PHONE: [
{ required: true, message: "请输入负责人手机号", trigger: "blur" },
],
STATE: [{ required: true, message: "请选择状态", trigger: "blur" }],
};
const data = reactive({
form: {
acceptanceList: [
{
id: Math.random(),
DEPARTMENT_ID: "",
USER_ID: "",
userList: [],
},
],
},
inspectorList: [
{ INSPECTION_DEPARTMENT_ID: "", INSPECTION_USER_ID: "", USER_SIDE: "" },
],
INSPECTOR_List: [],
unitsList: [],
});
const addInspector = () => {
data.inspectorList.push({
INSPECTION_DEPARTMENT_ID: "",
INSPECTION_USER_ID: "",
USER_SIDE: "",
});
data.INSPECTOR_List.push([]);
};
const fnGetData = async () => {
const resData = await setOutsourcedGoEdit({
OUTSOURCED_ID: route.query.outsourcedId,
});
data.form = resData.pd;
data.form.acceptanceList = resData.punishThePerson;
};
if (route.query.type === "edit") fnGetData();
const fnGetUnitsList = async () => {
const resData = await getUnitsListAll({});
data.unitsList = resData.varList;
};
fnGetUnitsList();
const fnGetUnitUser = async () => {
const resData = await setPersonnelmanagementListAll({
UNITS_ID: data.form.UNITS_ID,
});
data.form.UNITS_PIC = "";
data.form.UNITS_PHONE = "";
data.unitsUserList = resData.varList;
};
const fnSelectUnitsUser = (event) => {
data.unitsUserList.forEach((item) => {
if (item.PERSONNELMANAGEMENT_ID === event) {
data.form.UNITS_PHONE = item.PHONENUM;
}
});
};
const fnInspectDepartmentChange = async (event, index) => {
data.form.acceptanceList[index].USER_ID = "";
const resData = await getUserListAll({
DEPARTMENT_ID: event,
});
data.form.acceptanceList[index].userList = resData.userList;
};
const fnSubmit = debounce(
1000,
async () => {
await useFormValidate(formRef);
const formData = new FormData();
Object.keys(data.form).forEach((key) => {
formData.append(key, data.form[key]);
});
if (data.form.STARTTIME_TIMES && data.form.STARTTIME_TIMES.length > 0) {
formData.append("STARTTIME", data.form.STARTTIME_TIMES[0]);
formData.append("ENDTIME", data.form.STARTTIME_TIMES[1]);
}
route.query.type === "edit"
? await setOutsourcedEdit(formData)
: await setOutsourcedAdd(formData);
ElMessage.success("保存成功");
router.back();
},
{ atBegin: true }
);
</script>
<style scoped lang="scss"></style>