From fdd1cbccb392610998c1de6397b6116b2240ede6 Mon Sep 17 00:00:00 2001
From: kun <1422840143@qq.com>
Date: Fri, 16 Jun 2023 20:09:40 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20BUG=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../unmannedVideo/equipList/index.vue         | 195 +++++++++++++++---
 .../unmannedVideo/videoData/index.scss        |   3 +
 .../components/orderAdd.vue                   |  78 +++++--
 .../safetySupervision/components/orderAdd.vue |  77 +++++--
 4 files changed, 297 insertions(+), 56 deletions(-)

diff --git a/src/views/enterprise/unmannedVideo/equipList/index.vue b/src/views/enterprise/unmannedVideo/equipList/index.vue
index d0a8a6b..1132ca9 100644
--- a/src/views/enterprise/unmannedVideo/equipList/index.vue
+++ b/src/views/enterprise/unmannedVideo/equipList/index.vue
@@ -1,31 +1,56 @@
 <template>
 	<div class="table-box">
-		<ProTable
-			ref="proTable"
-			title="设备列表"
-			:columns="columns"
-			:requestApi="getTableList"
-			:dataCallback="dataCallback"
-			:tool-button="false"
-			:pagination="true"
-			background
-			:isShowSearch="false"
-			:onReset="true"
+		<LeftMenu
+			v-model="active"
+			:tabs="[]"
+			:records="records"
+			@change-page="onCurChange"
+			@search="onSearchInput"
+			:pageable="pages"
+			class="leftMenu"
 		>
-			<template #formButton="scope">
-				<el-button class="addButtonStyle" @click="handleAddItem(1)">新增</el-button>
+			<template #default="{ data }">
+				<div class="leftProject" @click="onSearch(data)">
+					<span class="projectName">{{
+						(data as ResAiProjectPage).projectName || (data as ResAiEngineerPage).engineeringName
+					}}</span>
+					<div class="leftMenu_item">
+						<div class="video">
+							<img src="@/assets/images/leftTab/设备列表.png" alt="" />
+							<span class="middleSize">影像视频树：{{ data.deviceNum }}</span>
+						</div>
+					</div>
+				</div>
 			</template>
-			<template #operation="{ row }">
-				<el-button type="primary" link @click="handleAddItem(2, row)">
-					<img src="@/assets/images/tableIcon/updateIcon.png" alt="" class="configureIcon" />
-					<span>编辑</span>
-				</el-button>
-				<el-button type="danger" link :icon="Delete" @click="deleteAccount(row)">删除</el-button>
-			</template>
-			<template #image="{ row }">
-				<el-image style="width: 66px; height: 37px" :src="row.image" fit="fill" />
-			</template>
-		</ProTable>
+		</LeftMenu>
+		<div style="width: 80%; margin-left: 20px">
+			<ProTable
+				ref="proTable"
+				title="设备列表"
+				:columns="columns"
+				:requestApi="getTableList"
+				:dataCallback="dataCallback"
+				:tool-button="false"
+				:pagination="true"
+				background
+				:isShowSearch="false"
+				:onReset="true"
+			>
+				<template #formButton="scope">
+					<el-button class="addButtonStyle" @click="handleAddItem(1)">新增</el-button>
+				</template>
+				<template #operation="{ row }">
+					<el-button type="primary" link @click="handleAddItem(2, row)">
+						<img src="@/assets/images/tableIcon/updateIcon.png" alt="" class="configureIcon" />
+						<span>编辑</span>
+					</el-button>
+					<el-button type="danger" link :icon="Delete" @click="deleteAccount(row)">删除</el-button>
+				</template>
+				<template #image="{ row }">
+					<el-image style="width: 66px; height: 37px" :src="row.image" fit="fill" />
+				</template>
+			</ProTable>
+		</div>
 		<el-dialog class="imgDialog" :title="title" width="40%" v-model="visible" show-close>
 			<el-form class="diaForm" :rules="rules" :model="formData" ref="ruleFormRef" label-width="160px">
 				<el-form-item label="产品序列号：" prop="serialNumber">
@@ -75,7 +100,7 @@
 </template>
 
 <script setup lang="tsx" name="ProjectSupervisionRecord">
-import { ref, reactive, nextTick } from "vue";
+import { ref, reactive, nextTick, onMounted } from "vue";
 import { ElMessage, ElMessageBox, ElTree } from "element-plus";
 import type { FormRules, FormInstance, UploadInstance } from "element-plus";
 import { useRouter } from "vue-router";
@@ -83,10 +108,19 @@ import { ColumnProps } from "@/components/ProTable/interface";
 import { useHandleData } from "@/hooks/useHandleData";
 import ProTable from "@/components/ProTable/index.vue";
 import { jxj_User } from "@/api/types";
-import { equipList, equipAdd, equipEdit, equipDelete } from "@/api/modules/project";
+import { equipList, equipAdd, equipEdit, equipDelete, getengineeringPage } from "@/api/modules/enterpriseApi";
 
 import { Delete } from "@element-plus/icons-vue";
 import { GlobalStore } from "@/stores";
+import LeftMenu from "@/components/LeftMenu/LeftMenu.vue";
+import type { ResAiProjectPage, ResAiEngineerPage } from "@/api/types/government/AIwaring";
+const pages = ref({
+	pageNo: 1,
+	pageSize: 7,
+	total: 0
+});
+const active = ref(1);
+const records = ref<ResAiProjectPage[] | ResAiEngineerPage[]>([]);
 const ruleFormRef = ref<FormInstance>();
 const baseUrl = import.meta.env.VITE_API_URL;
 const datas = reactive([]);
@@ -108,6 +142,11 @@ const formData = ref({
 // 获取 ProTable 元素，调用其获取刷新数据方法（还能获取到当前查询参数，方便导出携带参数）
 const proTable = ref();
 
+// 搜索用的项目sn或者工程sn
+const searchSn = ref("");
+
+// 项目或者工程名字
+const searchName = ref<string>("");
 const getId = ref<number | undefined>(undefined);
 const rules = reactive<FormRules>({
 	serialNumber: {
@@ -184,11 +223,45 @@ const columns: ColumnProps[] = [
 	},
 	{ prop: "operation", label: "操作", fixed: "right" }
 ];
+// 页面的项目名称和工程名称的div点击事件
+const onSearch = async (params: ResAiProjectPage | ResAiEngineerPage) => {
+	active.value === 0
+		? (searchSn.value = (params as ResAiProjectPage).projectSn)
+		: (searchSn.value = (params as ResAiEngineerPage).engineeringSn);
+	active.value === 0
+		? (searchName.value = (params as ResAiProjectPage).projectName)
+		: (searchName.value = (params as ResAiEngineerPage).engineeringName);
+	proTable.value.getTableList();
+};
+// leftMenu页面的搜索按钮
+const onSearchInput = async (params: string) => {
+	console.log(params);
+	if (active.value === 0) {
+		const { result } = await getAIprojectPage({ projectName: params, ...pages.value });
+		records.value = result.records;
+	} else {
+		const { result } = await getengineeringPage({ engineeringName: params, ...pages.value });
+		records.value = result.records;
+	}
+};
+// leftMenu页面的分页
+const onCurChange = async (params: number) => {
+	if (active.value === 0) {
+		const { result } = await getAIprojectPage({ ...pages.value, pageNo: params });
+		records.value = result.records;
+	} else {
+		const { result } = await getengineeringPage({ ...pages.value, pageNo: params });
+		records.value = result.records;
+		pages.value.total = +result.total;
+	}
+	pages.value.total = +res.result.total;
+};
 const confirm = async (formEl: FormInstance | undefined, form: any) => {
 	// 标记表单校验
 	if (!formEl) return;
 	await formEl.validate(async (valid, fields) => {
 		if (valid) {
+			form.engineeringSn = searchSn.value;
 			if (formData.value.id) {
 				const res = await equipEdit(form);
 				ElMessage.success("编辑成功");
@@ -231,6 +304,7 @@ const dataCallback = (data: any) => {
 // 默认不做操作就直接在 ProTable 组件上绑定	:requestApi="getUserList"
 const getTableList = (params: any) => {
 	let newParams = JSON.parse(JSON.stringify(params));
+	newParams.engineeringSn = searchSn.value;
 	if (newParams.createTime) {
 		newParams.createTime_begin = newParams.createTime[0];
 		newParams.createTime_end = newParams.createTime[1];
@@ -256,8 +330,77 @@ const deleteAccount = async (params: jxj_User.ResUserList) => {
 	await useHandleData(equipDelete, { id: params.id }, `删除【${params.dname}】`);
 	proTable.value.getTableList();
 };
+// 获取工程名称分页
+const getAIengPage = async () => {
+	const { result } = await getengineeringPage(pages.value);
+	records.value = result.records;
+	pages.value.total = +result.total;
+};
+onMounted(async () => {
+	await getAIengPage();
+	onSearch(records.value[0]);
+	searchSn.value = (records.value as ResAiProjectPage[])[0].engineeringSn;
+	console.log(searchSn.value);
+	searchName.value = (records.value as ResAiProjectPage[])[0].engineeringName;
+});
 </script>
 <style scoped lang="scss">
+.table-box {
+	display: flex;
+	flex-direction: row;
+	.leftMenu {
+		// width: 290px;
+		// 页面的项目工程
+		:deep(.item) {
+			height: 78px !important;
+		}
+		:deep(.content) {
+			height: calc(100% - 100px) !important;
+		}
+		.leftProject {
+			// padding: 5px 8px;
+			color: #333333;
+			.projectName {
+				display: block;
+				width: 100%;
+				overflow: hidden;
+
+				// font-weight: 700;
+				font-family: "siyuan_Medium";
+				font-size: 16px;
+				text-overflow: ellipsis;
+				white-space: nowrap;
+			}
+			.leftMenu_item {
+				display: flex;
+				justify-content: space-between;
+				margin-top: 10px;
+				.video {
+					display: flex;
+					align-items: center;
+					.middleSize {
+						font-size: 12px;
+					}
+
+					img {
+						margin: 0 4px;
+						width: 14px;
+						height: 14px;
+					}
+				}
+			}
+			.bottom_item {
+				.bottomSize {
+					font-size: 10px;
+					color: #666666;
+				}
+			}
+		}
+	}
+	:deep(.table-main) {
+		height: calc(100% - 82px);
+	}
+}
 .imgDialog {
 	.face-img {
 		width: 100%;
diff --git a/src/views/enterprise/unmannedVideo/videoData/index.scss b/src/views/enterprise/unmannedVideo/videoData/index.scss
index 07f47e0..a5477ca 100644
--- a/src/views/enterprise/unmannedVideo/videoData/index.scss
+++ b/src/views/enterprise/unmannedVideo/videoData/index.scss
@@ -9,6 +9,9 @@
 		:deep(.item) {
 			height: 78px !important;
 		}
+		:deep(.content) {
+			height: calc(100% - 100px) !important;
+		}
 		.leftProject {
 			// padding: 5px 8px;
 			color: #333333;
diff --git a/src/views/goverment/qualitySupervision/components/orderAdd.vue b/src/views/goverment/qualitySupervision/components/orderAdd.vue
index 0df4883..ac48a97 100644
--- a/src/views/goverment/qualitySupervision/components/orderAdd.vue
+++ b/src/views/goverment/qualitySupervision/components/orderAdd.vue
@@ -91,7 +91,10 @@
 							<span class="row-span">施工单位：</span>
 							<div class="face-img">
 								<div class="imgList" v-if="basicData.opSignature && basicData.opSignature.length > 0">
-									<img :src="item.url" class="face-avatar" v-for="(item, index) in basicData.opSignature" :key="index" />
+									<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"
@@ -114,7 +117,10 @@
 							<span class="row-span">监理单位：</span>
 							<div class="face-img">
 								<div class="imgList" v-if="basicData.supervisorSignature && basicData.supervisorSignature.length > 0">
-									<img :src="item.url" class="face-avatar" v-for="(item, index) in basicData.supervisorSignature" :key="index" />
+									<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"
@@ -133,7 +139,10 @@
 							<span class="row-span">检查人员：</span>
 							<div class="face-img">
 								<div class="imgList" v-if="basicData.inspectSignature && basicData.inspectSignature.length > 0">
-									<img :src="item.url" class="face-avatar" v-for="(item, index) in basicData.inspectSignature" :key="index" />
+									<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"
@@ -152,7 +161,10 @@
 							<span class="row-span">其他单位：</span>
 							<div class="face-img">
 								<div class="imgList" v-if="basicData.otherSignature && basicData.otherSignature.length > 0">
-									<img :src="item.url" class="face-avatar" v-for="(item, index) in basicData.otherSignature" :key="index" />
+									<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"
@@ -253,7 +265,12 @@
 					<span>隐患照片:</span>
 					<div class="face-img">
 						<div class="imgList" v-if="dangerForm.image && dangerForm.image.length > 0">
-							<img :src="item.url" class="face-avatar" v-for="(item, index) in dangerForm.image" :key="index" />
+							<div v-for="(item, index) in dangerForm.image" :key="index">
+								<img :src="item.url" class="face-avatar" />
+								<el-icon class="close-icon">
+									<circle-close />
+								</el-icon>
+							</div>
 						</div>
 						<el-upload
 							class="face-uploader"
@@ -271,7 +288,7 @@
 				</div>
 			</div>
 			<!-- 工程/项目库 -->
-			<el-dialog v-model="projectVisible" style="width: 690px" custom-class="project-style">
+			<el-dialog v-model="projectVisible" custom-class="project-style">
 				<template #title>
 					<div style="border-left: 2px solid #0f81ff; font-size: 20px; color: #333333">
 						<span style="margin-left: 5px">选择工程/项目</span>
@@ -295,7 +312,7 @@
 						</div>
 						<div class="table" v-if="projectTreeData.id">
 							<el-table
-								style="height: 350px"
+								style="width: 100%; height: 350px"
 								ref="multipleTable"
 								:data="projectTableData"
 								tooltip-effect="dark"
@@ -314,6 +331,8 @@
 									label="项目名称"
 									v-if="projectTreeData.id == 2"
 								></el-table-column>
+								<el-table-column prop="roleName" label="用户名称"></el-table-column>
+								<el-table-column prop="userTel" label="手机号码"></el-table-column>
 							</el-table>
 						</div>
 					</div>
@@ -326,7 +345,7 @@
 			</template> -->
 			</el-dialog>
 			<!-- 检查人员 -->
-			<el-dialog v-model="memberVisible" style="width: 300px" custom-class="project-style">
+			<el-dialog v-model="memberVisible" style="width: 500px" custom-class="project-style">
 				<template #title>
 					<div style="border-left: 2px solid #0f81ff; font-size: 20px; color: #333333">
 						<span style="margin-left: 5px">添加检查人员</span>
@@ -339,11 +358,12 @@
 							:data="membertableData"
 							row-key="userId"
 							tooltip-effect="dark"
-							style="width: 244px"
 							@selection-change="handleSelectionChange"
 						>
 							<el-table-column type="selection" :reserve-selection="true" width="55"></el-table-column>
 							<el-table-column prop="realName" label="检查人员"></el-table-column>
+							<el-table-column prop="roleName" label="用户名称"></el-table-column>
+							<el-table-column prop="userTel" label="手机号码"></el-table-column>
 						</el-table>
 					</div>
 				</div>
@@ -473,6 +493,23 @@ const dialogStyle = ref({
 });
 const selectedMemberList = ref([]); // 选中的检查人员列表
 const selectedSmallList = ref([]); // 选中的小项列表
+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++) {
@@ -787,10 +824,25 @@ onMounted(() => {});
 				flex-wrap: wrap;
 				.imgList {
 					@include flex;
-					img {
-						width: 36px;
-						height: 20px;
-						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;
+						}
 					}
 				}
 			}
diff --git a/src/views/goverment/safetySupervision/components/orderAdd.vue b/src/views/goverment/safetySupervision/components/orderAdd.vue
index 4347709..d7da571 100644
--- a/src/views/goverment/safetySupervision/components/orderAdd.vue
+++ b/src/views/goverment/safetySupervision/components/orderAdd.vue
@@ -91,7 +91,10 @@
 							<span class="row-span">施工单位：</span>
 							<div class="face-img">
 								<div class="imgList" v-if="basicData.opSignature">
-									<img :src="item.url" class="face-avatar" v-for="(item, index) in basicData.opSignature" :key="index" />
+									<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"
@@ -114,7 +117,10 @@
 							<span class="row-span">监理单位：</span>
 							<div class="face-img">
 								<div class="imgList" v-if="basicData.supervisorSignature">
-									<img :src="item.url" class="face-avatar" v-for="(item, index) in basicData.supervisorSignature" :key="index" />
+									<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"
@@ -133,7 +139,10 @@
 							<span class="row-span">检查人员：</span>
 							<div class="face-img">
 								<div class="imgList" v-if="basicData.inspectSignature">
-									<img :src="item.url" class="face-avatar" v-for="(item, index) in basicData.inspectSignature" :key="index" />
+									<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"
@@ -152,7 +161,10 @@
 							<span class="row-span">其他单位：</span>
 							<div class="face-img">
 								<div class="imgList" v-if="basicData.otherSignature">
-									<img :src="item.url" class="face-avatar" v-for="(item, index) in basicData.otherSignature" :key="index" />
+									<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"
@@ -339,7 +351,7 @@
 					</div>
 					<div class="table" v-if="projectTreeData.id">
 						<el-table
-							style="height: 350px"
+							style="width: 100%; height: 350px"
 							ref="multipleTable"
 							:data="projectTableData"
 							tooltip-effect="dark"
@@ -358,6 +370,8 @@
 								label="项目名称"
 								v-if="projectTreeData.id == 2"
 							></el-table-column>
+							<el-table-column prop="roleName" label="用户名称"></el-table-column>
+							<el-table-column prop="userTel" label="手机号码"></el-table-column>
 						</el-table>
 					</div>
 				</div>
@@ -370,7 +384,7 @@
 			</template> -->
 		</el-dialog>
 		<!-- 检查人员 -->
-		<el-dialog v-model="memberVisible" style="width: 300px">
+		<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>
@@ -378,15 +392,11 @@
 			</template>
 			<div class="content-select">
 				<div class="member-menu">
-					<el-table
-						ref="multipleTable"
-						:data="membertableData"
-						tooltip-effect="dark"
-						style="width: 244px"
-						@selection-change="handleSelectionChange"
-					>
+					<el-table ref="multipleTable" :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="roleName" label="用户名称"></el-table-column>
+						<el-table-column prop="userTel" label="手机号码"></el-table-column>
 					</el-table>
 				</div>
 			</div>
@@ -470,6 +480,23 @@ const dialogStyle = ref({
 });
 const selectedMemberList = ref([]); // 选中的检查人员列表
 const selectedSmallList = ref([]); // 选中的小项列表
+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++) {
@@ -764,10 +791,26 @@ onMounted(() => {});
 				flex-wrap: wrap;
 				.imgList {
 					@include flex;
-					img {
-						width: 36px;
-						height: 20px;
-						margin-right: 15px;
+					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;
+						}
 					}
 				}
 			}