1122 lines
31 KiB
Vue
1122 lines
31 KiB
Vue
<template>
|
||
<div class="overview">
|
||
<el-dialog :show-close="false" v-model="visible1" :style="dialogStyle" @close="closeMain">
|
||
<template #title>
|
||
<div class="title-detail">
|
||
<div class="line-style"></div>
|
||
<div class="title-content">新增隐患问题</div>
|
||
<el-icon>
|
||
<close @click="closeMain" />
|
||
</el-icon>
|
||
</div>
|
||
</template>
|
||
<div class="detail-content">
|
||
<div class="content-title">隐患记录</div>
|
||
<div class="row">
|
||
<el-row :gutter="20">
|
||
<el-col :span="8">
|
||
<span class="row-span">检查情况：<span>执法中</span></span>
|
||
</el-col>
|
||
<el-col :span="8">
|
||
<span class="row-span">工程/项目名称：</span>
|
||
<span class="select-text" v-if="projectSelectedData.createTime" style="margin-right: 15px">{{
|
||
projectSelectedData.projectName || projectSelectedData.engineeringName
|
||
}}</span>
|
||
<el-button class="btn-style" type="primary" @click="projectVisible = true">选择工程/项目</el-button>
|
||
</el-col>
|
||
<el-col :span="8">
|
||
<span class="row-span">建设单位：</span>
|
||
<el-input class="input-style" disabled placeholder="请输入" v-model="basicData.buildEnt" />
|
||
</el-col>
|
||
</el-row>
|
||
</div>
|
||
<div class="row">
|
||
<el-row :gutter="20">
|
||
<el-col :span="8">
|
||
<span class="row-span">监理单位：</span>
|
||
<el-input class="input-style" disabled placeholder="请输入" v-model="basicData.supervisorEnt" />
|
||
</el-col>
|
||
<el-col :span="8">
|
||
<span class="row-span">施工单位：</span>
|
||
<el-input class="input-style" disabled placeholder="请输入" v-model="basicData.opEnt" />
|
||
</el-col>
|
||
<el-col :span="8">
|
||
<span class="row-span">勘察单位：</span>
|
||
<el-input class="input-style" disabled placeholder="请输入" v-model="basicData.surveyEnt" />
|
||
</el-col>
|
||
</el-row>
|
||
</div>
|
||
<div class="row">
|
||
<el-row :gutter="20">
|
||
<el-col :span="8">
|
||
<span class="row-span">设计单位：</span>
|
||
<el-input class="input-style" disabled placeholder="请输入" v-model="basicData.designEnt" />
|
||
</el-col>
|
||
<el-col :span="8">
|
||
<span class="row-span">责任区域：</span>
|
||
<el-input class="input-style" disabled placeholder="请输入" v-model="basicData.address" />
|
||
</el-col>
|
||
<el-col :span="8">
|
||
<span class="row-span">检查人员：</span>
|
||
<el-input class="input-style" disabled placeholder="请选择" v-model="basicData.selectedMember">
|
||
<!-- 标记dialog -->
|
||
<template #suffix>
|
||
<div class="diaMapIcon" @click="selectMember">
|
||
<el-icon style="font-size: 19px"><Plus /></el-icon>
|
||
</div>
|
||
</template> </el-input
|
||
></el-col>
|
||
</el-row>
|
||
</div>
|
||
<div class="row">
|
||
<el-row :gutter="20">
|
||
<el-col :span="8">
|
||
<span class="row-span">整改期限：</span>
|
||
<el-date-picker
|
||
v-model="basicData.deadline"
|
||
style="width: 180px; height: 26px"
|
||
type="datetime"
|
||
placeholder="请选择日期"
|
||
format="YYYY-MM-DD HH:mm:ss"
|
||
value-format="YYYY-MM-DD HH:mm:ss"
|
||
:disabledDate="disabledDate"
|
||
/></el-col>
|
||
<el-col :span="8">
|
||
<span class="row-span">整改类型：</span>
|
||
<el-radio-group v-model="basicData.requireType">
|
||
<el-radio :label="1">限期整改</el-radio>
|
||
<el-radio :label="2">停工整改</el-radio>
|
||
</el-radio-group>
|
||
</el-col>
|
||
<el-col :span="8">
|
||
<span class="row-span">施工单位：</span>
|
||
<div class="face-img">
|
||
<div class="imgList" v-if="basicData.opSignature">
|
||
<div v-for="(item, index) in basicData.opSignature" :key="index">
|
||
<img :src="item.url" class="face-avatar" />
|
||
<div class="close-icon" @click="deleteImg(1, index)">X</div>
|
||
</div>
|
||
</div>
|
||
<el-upload
|
||
ref="upload"
|
||
:headers="headers"
|
||
:show-file-list="false"
|
||
accept="image/jpg, image/jpeg, image/png"
|
||
:action="`${baseUrl}` + '/xmgl/file/upload'"
|
||
:on-success="response => uploadSuccess(response, 1)"
|
||
style="display: inline-block"
|
||
>
|
||
<el-button class="btn-style" type="primary">上传签名</el-button>
|
||
</el-upload>
|
||
</div>
|
||
</el-col>
|
||
</el-row>
|
||
</div>
|
||
<div class="row">
|
||
<el-row :gutter="20">
|
||
<el-col :span="8">
|
||
<span class="row-span">监理单位：</span>
|
||
<div class="face-img">
|
||
<div class="imgList" v-if="basicData.supervisorSignature">
|
||
<div v-for="(item, index) in basicData.supervisorSignature" :key="index">
|
||
<img :src="item.url" class="face-avatar" />
|
||
<div class="close-icon" @click="deleteImg(2, index)">X</div>
|
||
</div>
|
||
</div>
|
||
<el-upload
|
||
ref="upload"
|
||
:headers="headers"
|
||
:show-file-list="false"
|
||
accept="image/jpg, image/jpeg, image/png"
|
||
:action="`${baseUrl}` + '/xmgl/file/upload'"
|
||
:on-success="response => uploadSuccess(response, 2)"
|
||
style="display: inline-block"
|
||
>
|
||
<el-button class="btn-style" type="primary">上传签名</el-button>
|
||
</el-upload>
|
||
</div>
|
||
</el-col>
|
||
<el-col :span="8">
|
||
<span class="row-span">检查人员：</span>
|
||
<div class="face-img">
|
||
<div class="imgList" v-if="basicData.inspectSignature">
|
||
<div v-for="(item, index) in basicData.inspectSignature" :key="index">
|
||
<img :src="item.url" class="face-avatar" />
|
||
<div class="close-icon" @click="deleteImg(3, index)">X</div>
|
||
</div>
|
||
</div>
|
||
<el-upload
|
||
ref="upload"
|
||
:headers="headers"
|
||
:show-file-list="false"
|
||
accept="image/jpg, image/jpeg, image/png"
|
||
:action="`${baseUrl}` + '/xmgl/file/upload'"
|
||
:on-success="response => uploadSuccess(response, 3)"
|
||
style="display: inline-block"
|
||
>
|
||
<el-button class="btn-style" type="primary">上传签名</el-button>
|
||
</el-upload>
|
||
</div>
|
||
</el-col>
|
||
<el-col :span="8">
|
||
<span class="row-span">其他单位：</span>
|
||
<div class="face-img">
|
||
<div class="imgList" v-if="basicData.otherSignature">
|
||
<div v-for="(item, index) in basicData.otherSignature" :key="index">
|
||
<img :src="item.url" class="face-avatar" />
|
||
<div class="close-icon" @click="deleteImg(4, index)">X</div>
|
||
</div>
|
||
</div>
|
||
<el-upload
|
||
ref="upload"
|
||
:headers="headers"
|
||
:show-file-list="false"
|
||
accept="image/jpg, image/jpeg, image/png"
|
||
:action="`${baseUrl}` + '/xmgl/file/upload'"
|
||
:on-success="response => uploadSuccess(response, 4)"
|
||
style="display: inline-block"
|
||
>
|
||
<el-button class="btn-style" type="primary">上传签名</el-button>
|
||
</el-upload>
|
||
</div>
|
||
</el-col>
|
||
</el-row>
|
||
</div>
|
||
</div>
|
||
<div class="detail-table">
|
||
<div class="content-title">
|
||
<span>隐患问题记录</span>
|
||
<el-button class="addButtonStyle" @click="addDangerRecord">新增</el-button>
|
||
</div>
|
||
<div class="table">
|
||
<el-table
|
||
:data="recordData"
|
||
:show-overflow-tooltip="true"
|
||
class="el-table"
|
||
:row-style="{ height: '40px' }"
|
||
:header-cell-style="{ backgroundColor: '#F5F7FA', textAlign: 'center', height: '40px' }"
|
||
:cell-style="{ textAlign: 'center', height: '40px' }"
|
||
>
|
||
<!-- <el-table-column prop="createByName" label="创建人" /> -->
|
||
<el-table-column prop="questionDesc" label="隐患问题" :show-overflow-tooltip="true" />
|
||
<el-table-column label="隐患照片">
|
||
<template #default="scope">
|
||
<el-image
|
||
v-if="scope.row.image && scope.row.image.length > 0"
|
||
style="width: 38px; height: 28px"
|
||
:src="scope.row.image[0].url"
|
||
fit="fill"
|
||
></el-image>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column fixed="right" label="操作" width="100">
|
||
<template #default="scope">
|
||
<el-button type="danger" link :icon="Delete" @click="handleDeleteItem(scope.$index)">删除</el-button>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
</div>
|
||
<div class="operation-btn">
|
||
<el-button type="primary" @click="allSubmit">统一下发放整改单</el-button>
|
||
</div>
|
||
</div>
|
||
<div class="transform-record" v-if="transformDialog">
|
||
<div class="title-detail">
|
||
<div class="line-style"></div>
|
||
<div class="title-content">新增隐患记录</div>
|
||
<el-icon>
|
||
<close @click="closeSecondary" />
|
||
</el-icon>
|
||
</div>
|
||
<div class="content-title">隐患问题</div>
|
||
<!-- <div class="row">
|
||
<span>创建人:</span>
|
||
<el-input v-model="dangerForm.createByName" placeholder="请输入" />
|
||
</div> -->
|
||
<!-- <div class="row">
|
||
<span>创建日期:</span>
|
||
<el-date-picker
|
||
v-model="dangerForm.createTime"
|
||
type="datetime"
|
||
style="width: 100%"
|
||
placeholder="请选择日期"
|
||
format="YYYY-MM-DD HH:mm:ss"
|
||
value-format="YYYY-MM-DD HH:mm:ss"
|
||
/>
|
||
</div> -->
|
||
<div class="row">
|
||
<span>隐患问题:</span>
|
||
<div class="danger-option">
|
||
<el-button v-if="!dangerForm.questionType" type="primary" @click="openStore">隐患库</el-button>
|
||
<el-button v-if="!dangerForm.questionType" type="primary" @click="dangerForm.questionType = 2">自定义隐患</el-button>
|
||
<el-input
|
||
v-if="dangerForm.questionType"
|
||
v-model="dangerForm.questionDesc"
|
||
:disabled="dangerForm.questionType == 1"
|
||
type="textarea"
|
||
:rows="2"
|
||
placeholder="请输入"
|
||
/>
|
||
</div>
|
||
</div>
|
||
<div class="row">
|
||
<span>备注:</span>
|
||
<el-input v-model="dangerForm.remark" type="textarea" :rows="2" placeholder="请输入" />
|
||
</div>
|
||
<div class="row">
|
||
<span>隐患照片:</span>
|
||
<div class="face-img">
|
||
<div class="imgList" v-if="dangerForm.image && dangerForm.image.length > 0">
|
||
<div v-for="(item, index) in dangerForm.image" :key="index">
|
||
<img :src="item.url" class="face-avatar" />
|
||
<el-icon class="close-icon" @click="deleteDangerImg(index)">
|
||
<circle-close />
|
||
</el-icon>
|
||
</div>
|
||
</div>
|
||
<el-upload
|
||
class="face-uploader"
|
||
:action="`${baseUrl}` + '/xmgl/file/upload'"
|
||
:show-file-list="false"
|
||
:before-upload="handleAvatarUpload"
|
||
:on-success="handleAvatarSuccess"
|
||
accept="image/jpg, image/jpeg, image/png"
|
||
>
|
||
<el-icon><plus /></el-icon>
|
||
</el-upload>
|
||
</div>
|
||
</div>
|
||
<div class="status-operate">
|
||
<el-button type="primary" @click="submitForm">提交</el-button>
|
||
</div>
|
||
</div>
|
||
</el-dialog>
|
||
<!-- 隐患库 -->
|
||
<el-dialog v-model="storeVisible" custom-class="store-style">
|
||
<template #title>
|
||
<div style="border-left: 2px solid #0f81ff; font-size: 20px; color: #333333">
|
||
<span style="margin-left: 5px">隐患库</span>
|
||
</div>
|
||
</template>
|
||
<div class="content-select">
|
||
<div class="left-menu" style="height: calc(100% - 1px); border-bottom: 1px solid #ccc">
|
||
<el-tree
|
||
:data="dangerData"
|
||
style="margin-top: 10px"
|
||
:highlight-current="true"
|
||
node-key="id"
|
||
:expand-on-click-node="false"
|
||
>
|
||
<template #default="{ node, data }">
|
||
<span class="custom-tree-node" @click.capture="selectDangerTree(data)">
|
||
<span>{{ data.name }}</span>
|
||
</span>
|
||
</template>
|
||
</el-tree>
|
||
</div>
|
||
<div class="right-menu" style="height: calc(100% - 1px); border-bottom: 1px solid #ccc">
|
||
<el-table
|
||
ref="multipleTable"
|
||
:data="smallTableData"
|
||
tooltip-effect="dark"
|
||
style="margin: 12px 15px; width: 95%; height: 400px"
|
||
@selection-change="handleSmallSelectionChange"
|
||
>
|
||
<el-table-column type="selection" width="55"></el-table-column>
|
||
<el-table-column prop="name" label="隐患内容"></el-table-column>
|
||
</el-table>
|
||
</div>
|
||
</div>
|
||
<template #footer>
|
||
<span class="dialog-footer">
|
||
<el-button @click="storeVisible = false">取 消</el-button>
|
||
<el-button type="primary" @click="confirmSmallSelected">确 认</el-button>
|
||
</span>
|
||
</template>
|
||
</el-dialog>
|
||
<!-- 工程/项目库 -->
|
||
<el-dialog v-model="projectVisible" custom-class="project-style" width="60%">
|
||
<template #title>
|
||
<div style="border-left: 2px solid #0f81ff; font-size: 20px; color: #333333">
|
||
<span style="margin-left: 5px">选择工程/项目</span>
|
||
</div>
|
||
</template>
|
||
<div class="content-select">
|
||
<div class="left-menu">
|
||
<el-tree :data="projectData" style="margin-top: 10px" :highlight-current="true" node-key="id">
|
||
<template #default="{ node, data }">
|
||
<span class="custom-tree-node" @click.capture="selectProjectTree(data)">
|
||
<span>{{ data.label }}</span>
|
||
</span>
|
||
</template>
|
||
</el-tree>
|
||
</div>
|
||
<div class="right-menu">
|
||
<div class="table-select" v-if="projectTreeData.id">
|
||
<span style="margin: 0 10px 2px 0">{{ projectTreeData.id == 1 ? "工程" : "项目" }}名称</span>
|
||
<el-input style="width: 200px" v-model="projectForm.name" placeholder="请输入" clearable />
|
||
<el-button type="primary" style="margin-left: 20px" @click="searchData">查询</el-button>
|
||
</div>
|
||
<div class="table" v-if="projectTreeData.id == 1">
|
||
<el-table
|
||
style="width: 100%; height: 350px"
|
||
ref="multipleTable"
|
||
:data="projectTableData"
|
||
tooltip-effect="dark"
|
||
@row-click="projectRowClick"
|
||
>
|
||
<!-- <el-table-column type="selection" width="55"></el-table-column> -->
|
||
<el-table-column prop="engineeringName" align="center" label="工程名称"></el-table-column>
|
||
<el-table-column prop="engineeringTypeName" align="center" label="工程类型"></el-table-column>
|
||
<el-table-column prop="stateName" align="center" label="工程状态"></el-table-column>
|
||
</el-table>
|
||
</div>
|
||
<div class="table" v-if="projectTreeData.id == 2">
|
||
<el-table
|
||
style="width: 100%; height: 350px"
|
||
ref="multipleTable"
|
||
:data="projectTableData"
|
||
tooltip-effect="dark"
|
||
@row-click="projectRowClick"
|
||
>
|
||
<!-- <el-table-column type="selection" width="55"></el-table-column> -->
|
||
<el-table-column prop="projectName" align="center" label="项目名称"></el-table-column>
|
||
<el-table-column prop="projectManage" align="center" label="负责人"></el-table-column>
|
||
<el-table-column prop="projectTel" align="center" label="手机号码"></el-table-column>
|
||
</el-table>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- <template #footer>
|
||
<span class="dialog-footer">
|
||
<el-button @click="projectVisible = false">取 消</el-button>
|
||
<el-button type="primary" @click="projectVisible = false">确 认</el-button>
|
||
</span>
|
||
</template> -->
|
||
</el-dialog>
|
||
<!-- 检查人员 -->
|
||
<el-dialog v-model="memberVisible" style="width: 500px">
|
||
<template #title>
|
||
<div style="border-left: 2px solid #0f81ff; font-size: 20px; color: #333333">
|
||
<span style="margin-left: 5px">添加检查人员</span>
|
||
</div>
|
||
</template>
|
||
<div class="content-select">
|
||
<div class="member-menu">
|
||
<el-table
|
||
ref="multipleMemberTable"
|
||
:data="membertableData"
|
||
tooltip-effect="dark"
|
||
@selection-change="handleSelectionChange"
|
||
>
|
||
<el-table-column type="selection" width="55"></el-table-column>
|
||
<el-table-column prop="realName" label="检查人员"></el-table-column>
|
||
<el-table-column prop="account" label="用户名称"></el-table-column>
|
||
<el-table-column prop="userTel" label="手机号码"></el-table-column>
|
||
</el-table>
|
||
</div>
|
||
</div>
|
||
<template #footer>
|
||
<span class="dialog-footer">
|
||
<el-button @click="memberVisible = false">取 消</el-button>
|
||
<el-button type="primary" @click="confirmMemberSelected">确 认</el-button>
|
||
</span>
|
||
</template>
|
||
</el-dialog>
|
||
</div>
|
||
</template>
|
||
|
||
<script lang="ts" setup>
|
||
import { onMounted, ref, watch, reactive } from "vue";
|
||
import { ElMessage, ElMessageBox } from "element-plus";
|
||
import type { FormInstance, UploadProps } from "element-plus";
|
||
import {
|
||
addDividerQuestion,
|
||
getEngineeringApproveList,
|
||
AIproList,
|
||
getEngineerInfo,
|
||
getProjectInfo,
|
||
getgovNamelist,
|
||
bigStore,
|
||
smallStoreList
|
||
} from "@/api/modules/goverment";
|
||
import { GlobalStore } from "@/stores";
|
||
import { Delete } from "@element-plus/icons-vue";
|
||
import { jxj_User } from "@/api/types";
|
||
const multipleMemberTable = ref();
|
||
const memberVisible = ref(false);
|
||
const store = GlobalStore();
|
||
const headers = ref({ Authorization: "Bearer " + store.token });
|
||
const projectVisible = ref(false);
|
||
const tableData = ref([{ name: "111" }]);
|
||
const membertableData = ref([]); // 获取检查人员表格数据
|
||
const projectTableData = ref([]); // 获取工程/项目表格数据
|
||
const projectForm = ref({
|
||
name: ""
|
||
});
|
||
const projectData = ref([
|
||
{
|
||
id: 1,
|
||
label: "工程名称"
|
||
},
|
||
{
|
||
id: 2,
|
||
label: "项目名称"
|
||
}
|
||
]);
|
||
const projectSelectedData = ref({}); // 工程/项目列表选中的行数据
|
||
const bigTreeData = ref({}); // 大项选中树数据
|
||
const smallTableData = ref([]); // 小项列表数据
|
||
const dangerData = ref([]);
|
||
const dangerForm = ref({
|
||
// createByName: "",
|
||
createTime: "",
|
||
questionType: 0,
|
||
questionDesc: "",
|
||
remark: "",
|
||
image: []
|
||
});
|
||
const storeVisible = ref(false);
|
||
const baseUrl = import.meta.env.VITE_API_URL;
|
||
const props = defineProps({
|
||
orderDialog: Boolean
|
||
});
|
||
const emits = defineEmits(["update:orderDialog", "confirm"]);
|
||
const visible1 = ref(false);
|
||
const transformDialog = ref(false); // 整改记录对话框
|
||
const recordData = ref([]); // 整改记录表格数据
|
||
const basicData = ref({
|
||
// 基础信息
|
||
requireType: 1,
|
||
opSignature: [],
|
||
supervisorSignature: [],
|
||
inspectSignature: [],
|
||
otherSignature: []
|
||
});
|
||
const dialogStyle = ref({
|
||
"min-width": "824px"
|
||
});
|
||
const selectedMemberList = ref([]); // 选中的检查人员列表
|
||
const selectedSmallList = ref([]); // 选中的小项列表
|
||
// 设置日期的禁用状态
|
||
const disabledDate = date => {
|
||
let todayTime = new Date().getTime();
|
||
let dateTime = date.getTime();
|
||
if (dateTime < todayTime) {
|
||
return true;
|
||
} else {
|
||
return false;
|
||
}
|
||
};
|
||
const deleteImg = (arrIndex, index) => {
|
||
// 删除签名图片
|
||
switch (arrIndex) {
|
||
case 1:
|
||
basicData.value.opSignature.splice(index, 1);
|
||
break;
|
||
case 2:
|
||
basicData.value.supervisorSignature.splice(index, 1);
|
||
break;
|
||
case 3:
|
||
basicData.value.inspectSignature.splice(index, 1);
|
||
break;
|
||
case 4:
|
||
basicData.value.otherSignature.splice(index, 1);
|
||
break;
|
||
}
|
||
};
|
||
const confirmSmallSelected = () => {
|
||
let text = "";
|
||
for (let i = 0; i < selectedSmallList.value.length; i++) {
|
||
if (i == selectedSmallList.value.length - 1) {
|
||
text += selectedSmallList.value[i].name;
|
||
} else {
|
||
text += selectedSmallList.value[i].name + ",";
|
||
}
|
||
}
|
||
dangerForm.value.questionDesc = text;
|
||
dangerForm.value.questionType = 1;
|
||
storeVisible.value = false;
|
||
};
|
||
const getSmallList = async () => {
|
||
console.log(bigTreeData.value);
|
||
const res = await smallStoreList({ libraryId: bigTreeData.value.id, name: "" });
|
||
smallTableData.value = res.result;
|
||
console.log(res);
|
||
};
|
||
const selectDangerTree = data => {
|
||
console.log(data);
|
||
bigTreeData.value = data;
|
||
getSmallList();
|
||
};
|
||
const openStore = async () => {
|
||
const res = await bigStore({ name: "", type: 1 });
|
||
dangerData.value = res.result;
|
||
smallTableData.value = [];
|
||
storeVisible.value = true;
|
||
};
|
||
const addDangerRecord = () => {
|
||
dangerForm.value = reactive({
|
||
// createByName: "",
|
||
createTime: "",
|
||
questionType: 0,
|
||
questionDesc: "",
|
||
remark: "",
|
||
image: []
|
||
});
|
||
transformDialog.value = true;
|
||
dialogStyle.value = reactive({
|
||
"min-width": "824px",
|
||
transform: "translateX(-170px)"
|
||
});
|
||
};
|
||
const confirmMemberSelected = () => {
|
||
let selectedtext = "";
|
||
for (let i = 0; i < selectedMemberList.value.length; i++) {
|
||
if (i == selectedMemberList.value.length - 1) {
|
||
selectedtext += selectedMemberList.value[i].realName;
|
||
} else {
|
||
selectedtext += selectedMemberList.value[i].realName + ",";
|
||
}
|
||
}
|
||
basicData.value.selectedMember = selectedtext;
|
||
memberVisible.value = false;
|
||
};
|
||
const projectRowClick = row => {
|
||
// 工程/项目列表选中的行数据
|
||
projectSelectedData.value = row;
|
||
projectVisible.value = false;
|
||
getRowDetails();
|
||
};
|
||
const projectTreeData = ref({}); // 工程/项目树数据
|
||
const searchData = () => {
|
||
if (projectTreeData.value.id == 1) {
|
||
getEngieerData();
|
||
} else {
|
||
getProjectData();
|
||
}
|
||
};
|
||
const getRowDetails = async () => {
|
||
basicData.value = {
|
||
requireType: 1,
|
||
opSignature: [],
|
||
supervisorSignature: [],
|
||
inspectSignature: [],
|
||
otherSignature: []
|
||
};
|
||
// 工程/项目详细信息
|
||
if (projectTreeData.value.id == 1) {
|
||
const res = await getEngineerInfo({ id: projectSelectedData.value.id });
|
||
console.log(res);
|
||
basicData.value = reactive({ ...basicData.value, ...res.result });
|
||
} else {
|
||
const res = await getProjectInfo({ projectId: projectSelectedData.value.projectId });
|
||
console.log(res);
|
||
basicData.value = reactive({ ...basicData.value, ...res.result });
|
||
}
|
||
};
|
||
const getEngieerData = async () => {
|
||
// 工程列表
|
||
let requestData = {
|
||
engineeringName: projectForm.value.name,
|
||
pageSize: -1,
|
||
pageNo: -1
|
||
};
|
||
const res = await getEngineeringApproveList(requestData);
|
||
projectTableData.value = res.result.records;
|
||
console.log(res);
|
||
};
|
||
const getProjectData = async () => {
|
||
// 项目列表
|
||
let requestData = {
|
||
projectName: projectForm.value.name
|
||
};
|
||
const res = await AIproList(requestData);
|
||
projectTableData.value = res.result;
|
||
console.log(res);
|
||
};
|
||
const getMemberList = async () => {
|
||
const res = await getgovNamelist({});
|
||
console.log(res);
|
||
membertableData.value = res.result;
|
||
};
|
||
const selectMember = async () => {
|
||
console.log(membertableData.value);
|
||
console.log(selectedMemberList.value);
|
||
selectedMemberList.value.forEach(key => {
|
||
membertableData.value.forEach(row => {
|
||
if (row.userId == key.userId) {
|
||
multipleMemberTable.value.toggleRowSelection(row, true);
|
||
}
|
||
});
|
||
});
|
||
memberVisible.value = true;
|
||
};
|
||
// 删除用户信息
|
||
const handleDeleteItem = async index => {
|
||
recordData.value.splice(index, 1);
|
||
};
|
||
|
||
const uploadSuccess = (response: any, index: number) => {
|
||
ElMessage.success("上传成功");
|
||
console.log(response, index);
|
||
if (index == 1) {
|
||
basicData.value.opSignature.push({ url: response.result.url });
|
||
} else if (index == 2) {
|
||
basicData.value.supervisorSignature.push({ url: response.result.url });
|
||
} else if (index == 3) {
|
||
basicData.value.inspectSignature.push({ url: response.result.url });
|
||
} else if (index == 4) {
|
||
basicData.value.otherSignature.push({ url: response.result.url });
|
||
}
|
||
};
|
||
const handleSelectionChange = val => {
|
||
selectedMemberList.value = val;
|
||
console.log(val);
|
||
};
|
||
const handleSmallSelectionChange = val => {
|
||
selectedSmallList.value = val;
|
||
};
|
||
const selectProjectTree = data => {
|
||
// 选择工程/项目树节点
|
||
console.log(data);
|
||
if (data.id == 1) {
|
||
getEngieerData();
|
||
} else {
|
||
getProjectData();
|
||
}
|
||
projectTreeData.value = data;
|
||
};
|
||
|
||
// 删除隐患照片
|
||
const deleteDangerImg = (index: number) => {
|
||
dangerForm.value.image.splice(index, 1);
|
||
};
|
||
// 图片上传之前
|
||
const handleAvatarUpload = file => {
|
||
if (dangerForm.value.image.length == 3) {
|
||
ElMessage.error("上传图片不能大于三张");
|
||
return false;
|
||
}
|
||
};
|
||
// 图片上传成功后的钩子
|
||
const handleAvatarSuccess: UploadProps["onSuccess"] = response => {
|
||
dangerForm.value.image.push({
|
||
url: response.result.url
|
||
});
|
||
};
|
||
// 提交整改情况
|
||
const submitForm = async () => {
|
||
if (!dangerForm.value.questionDesc) {
|
||
ElMessage.error("请添加隐患问题");
|
||
return;
|
||
}
|
||
// if (dangerForm.value.image.length == 0) {
|
||
// ElMessage.error("请添加隐患照片");
|
||
// return;
|
||
// }
|
||
recordData.value.push({
|
||
...dangerForm.value
|
||
});
|
||
closeSecondary();
|
||
ElMessage.success("提交成功");
|
||
};
|
||
// 全部提交
|
||
const allSubmit = async () => {
|
||
if (!(projectSelectedData.value.projectName || projectSelectedData.value.engineeringName)) {
|
||
ElMessage.error("请选择工程/项目");
|
||
return;
|
||
}
|
||
// if (!basicData.value.selectedMember) {
|
||
// ElMessage.error("请选择检查人员");
|
||
// return;
|
||
// }
|
||
if (!basicData.value.deadline) {
|
||
ElMessage.error("请选择整改期限");
|
||
return;
|
||
}
|
||
if (recordData.value.length == 0) {
|
||
ElMessage.error("请添加隐患问题");
|
||
return;
|
||
}
|
||
recordData.value.map(item => {
|
||
item.image = JSON.stringify(item.image);
|
||
});
|
||
let requestData = {
|
||
...basicData.value,
|
||
inspectSignature: JSON.stringify(basicData.value.inspectSignature),
|
||
opSignature: JSON.stringify(basicData.value.opSignature),
|
||
otherSignature: JSON.stringify(basicData.value.otherSignature),
|
||
supervisorSignature: JSON.stringify(basicData.value.supervisorSignature),
|
||
inspectQuestionList: recordData.value,
|
||
type: 1
|
||
};
|
||
const res = await addDividerQuestion(requestData);
|
||
closeMain();
|
||
ElMessage.success("操作成功");
|
||
};
|
||
// 关闭两个对话框
|
||
const closeMain = () => {
|
||
visible1.value = false;
|
||
transformDialog.value = false;
|
||
dialogStyle.value = {
|
||
"min-width": "824px",
|
||
transform: "translateX(0px)"
|
||
};
|
||
};
|
||
// 关闭整改记录辅弹框
|
||
const closeSecondary = () => {
|
||
transformDialog.value = false;
|
||
dialogStyle.value = {
|
||
"min-width": "824px",
|
||
transform: "translateX(0px)"
|
||
};
|
||
};
|
||
// 监听父组件的visible，用来简介控制el-dialog的弹框开关，一般是用于开
|
||
watch(
|
||
() => props.orderDialog,
|
||
(n, o) => {
|
||
visible1.value = n;
|
||
if (n) {
|
||
basicData.value = {
|
||
requireType: 1,
|
||
opSignature: [],
|
||
supervisorSignature: [],
|
||
inspectSignature: [],
|
||
otherSignature: []
|
||
};
|
||
recordData.value = [];
|
||
projectSelectedData.value = {};
|
||
} else {
|
||
emits("confirm");
|
||
}
|
||
}
|
||
);
|
||
// 监听el-dialog显示状态，再通过@update:visible 通知父组件，一般是用于关
|
||
watch(visible1, (n, o) => {
|
||
emits("update:orderDialog", n);
|
||
});
|
||
onMounted(() => {
|
||
getMemberList();
|
||
});
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
@mixin flex {
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
@mixin title {
|
||
font-size: 14px;
|
||
font-family: Source Han Sans CN-Regular, Source Han Sans CN;
|
||
font-weight: 400;
|
||
color: #333333;
|
||
border-left: 2px solid #008bff;
|
||
padding-left: 5px;
|
||
}
|
||
.overview {
|
||
// background-color: #fff;
|
||
flex: 1;
|
||
:deep(.el-dialog) {
|
||
position: relative;
|
||
}
|
||
.title-detail {
|
||
@include flex;
|
||
.line-style {
|
||
width: 4px;
|
||
height: 20px;
|
||
background: #0f81ff;
|
||
margin-right: 12px;
|
||
}
|
||
.title-content {
|
||
font-size: 20px;
|
||
font-family: Source Han Sans CN-Regular, Source Han Sans CN;
|
||
font-weight: 400;
|
||
color: #333333;
|
||
margin-right: auto;
|
||
}
|
||
:deep(.el-icon) {
|
||
cursor: pointer;
|
||
color: #a8abb2;
|
||
}
|
||
}
|
||
.detail-content {
|
||
.content-title {
|
||
@include title;
|
||
}
|
||
.row {
|
||
margin-top: 14px;
|
||
:deep(.el-col) {
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
.row-span {
|
||
font-size: 12px;
|
||
font-family: Source Han Sans CN-Medium, Source Han Sans CN;
|
||
font-weight: 500;
|
||
white-space: nowrap;
|
||
color: #333333;
|
||
> span {
|
||
font-weight: 400;
|
||
color: #008bff;
|
||
}
|
||
.diaMapIcon {
|
||
background-color: #008bff;
|
||
width: 34px;
|
||
position: absolute;
|
||
right: 0;
|
||
border-radius: 0 4px 4px 0;
|
||
color: #fff;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
height: 100%;
|
||
cursor: pointer;
|
||
}
|
||
}
|
||
.face-img {
|
||
@include flex;
|
||
flex-wrap: wrap;
|
||
.imgList {
|
||
@include flex;
|
||
margin-right: 15px;
|
||
> div {
|
||
position: relative;
|
||
img {
|
||
width: 50px;
|
||
height: 34px;
|
||
}
|
||
.close-icon {
|
||
width: 15px;
|
||
height: 15px;
|
||
border-radius: 50%;
|
||
text-align: center;
|
||
border: 1px solid red;
|
||
line-height: 15px;
|
||
position: absolute;
|
||
top: -8px;
|
||
right: -7px;
|
||
color: red;
|
||
cursor: pointer;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.select-text {
|
||
display: inline-block;
|
||
width: 75px;
|
||
height: 20px;
|
||
white-space: nowrap;
|
||
text-overflow: ellipsis;
|
||
overflow: hidden;
|
||
}
|
||
.btn-style {
|
||
width: 105px;
|
||
height: 20px;
|
||
background: rgba(48, 172, 124, 0.15);
|
||
opacity: 1;
|
||
border: 1px solid #30ac7c;
|
||
color: #30ac7c;
|
||
}
|
||
.input-style {
|
||
width: 180px;
|
||
height: 26px;
|
||
background: #ffffff;
|
||
}
|
||
}
|
||
}
|
||
.detail-table {
|
||
height: 391px;
|
||
margin-top: 20px;
|
||
.content-title {
|
||
@include title;
|
||
@include flex;
|
||
> span {
|
||
margin-right: auto;
|
||
}
|
||
}
|
||
.table {
|
||
height: 310px;
|
||
margin-top: 20px;
|
||
:deep(.el-table) {
|
||
height: 100%;
|
||
}
|
||
}
|
||
.operation-btn {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
margin-top: 20px;
|
||
}
|
||
}
|
||
.transform-record {
|
||
position: absolute;
|
||
top: 0;
|
||
right: -460px;
|
||
width: 380px;
|
||
height: calc(100% - 31px);
|
||
min-width: 420px;
|
||
background: #ffffff;
|
||
box-shadow: 0px 4px 8px 0px rgba(48, 62, 100, 0.2);
|
||
border-radius: 8px 8px 8px 8px;
|
||
padding: 15px 20px;
|
||
.content-title {
|
||
@include title;
|
||
margin-top: 45px;
|
||
margin-bottom: 24px;
|
||
}
|
||
.row {
|
||
display: flex;
|
||
align-items: center;
|
||
margin-bottom: 12px;
|
||
span:nth-child(1) {
|
||
width: 56px;
|
||
text-align: right;
|
||
font-size: 12px;
|
||
font-family: Source Han Sans CN-Medium, Source Han Sans CN;
|
||
font-weight: 500;
|
||
color: #333333;
|
||
white-space: nowrap;
|
||
margin-right: 10px;
|
||
}
|
||
span:nth-child(2) {
|
||
font-size: 12px;
|
||
font-family: Source Han Sans CN-Regular, Source Han Sans CN;
|
||
font-weight: 400;
|
||
color: #333333;
|
||
}
|
||
.imgList {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
> div {
|
||
position: relative;
|
||
}
|
||
:deep(.el-icon) {
|
||
position: absolute;
|
||
top: -10px;
|
||
right: 5px;
|
||
font-size: 24px;
|
||
color: red;
|
||
text-align: center;
|
||
cursor: pointer;
|
||
}
|
||
}
|
||
.face-img {
|
||
width: 100%;
|
||
align-self: flex-start;
|
||
@include flex;
|
||
flex-wrap: wrap;
|
||
:deep(.face-uploader .el-upload) {
|
||
border: 1px dashed #d9d9d9 !important;
|
||
border-radius: 6px !important;
|
||
cursor: pointer !important;
|
||
position: relative !important;
|
||
overflow: hidden !important;
|
||
.el-icon {
|
||
font-size: 28px;
|
||
color: #8c939d;
|
||
width: 53px;
|
||
height: 53px;
|
||
line-height: 53px;
|
||
text-align: center;
|
||
}
|
||
}
|
||
.face-uploader .el-upload:hover {
|
||
border-color: #409eff !important;
|
||
}
|
||
.face-avatar {
|
||
width: 53px;
|
||
height: 53px;
|
||
display: block;
|
||
margin-right: 15px;
|
||
}
|
||
}
|
||
.danger-option {
|
||
width: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
}
|
||
.status-operate {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: flex-end;
|
||
}
|
||
}
|
||
.content-select {
|
||
width: 100%;
|
||
height: 426px;
|
||
display: flex;
|
||
align-items: center;
|
||
.left-menu {
|
||
min-width: 200px;
|
||
height: 100%;
|
||
background-color: #ffffff;
|
||
border-right: 1px solid #ccc;
|
||
.custom-tree-node {
|
||
width: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
> span:first-child {
|
||
width: 98%;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
margin-right: auto;
|
||
}
|
||
}
|
||
:deep(.el-tree-node__content) {
|
||
height: 35px !important;
|
||
}
|
||
:deep(.is-current) {
|
||
color: #008bff;
|
||
border-left: 2px solid #008bff;
|
||
}
|
||
}
|
||
.right-menu {
|
||
flex: 1;
|
||
height: 100%;
|
||
.table-select {
|
||
display: flex;
|
||
align-items: center;
|
||
margin: 20px 0 20px 15px;
|
||
}
|
||
.table {
|
||
margin: 0px 15px;
|
||
}
|
||
}
|
||
.member-menu {
|
||
width: 100%;
|
||
min-height: 300px;
|
||
align-self: self-start;
|
||
display: flex;
|
||
}
|
||
}
|
||
}
|
||
|
||
:deep(.el-table__empty-text) {
|
||
min-height: 200px;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
}
|
||
// 隐患库对话框样式
|
||
:deep(.store-style) {
|
||
.el-dialog__header {
|
||
border-bottom: 1px solid #ccc;
|
||
}
|
||
.el-dialog__body {
|
||
padding: 0;
|
||
}
|
||
}
|
||
// 工程/项目对话框样式
|
||
:deep(.project-style) {
|
||
.el-dialog__header {
|
||
border-bottom: 1px solid #ccc;
|
||
}
|
||
.el-dialog__body {
|
||
padding: 0;
|
||
}
|
||
}
|
||
</style>
|