From b9107c2d1486398c34099d5e5952cc02b6162cf3 Mon Sep 17 00:00:00 2001
From: 17630416519 <qazwsx123>
Date: Mon, 5 Jan 2026 15:56:51 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Plant/PlantProductlinebody.vue            |  85 +++++++-------
 .../Process/ProcessRouting.vue                | 105 ++++++++++--------
 2 files changed, 103 insertions(+), 87 deletions(-)

diff --git a/src/views/masterDataManagement/Plant/PlantProductlinebody.vue b/src/views/masterDataManagement/Plant/PlantProductlinebody.vue
index 7c32ca0..d303447 100644
--- a/src/views/masterDataManagement/Plant/PlantProductlinebody.vue
+++ b/src/views/masterDataManagement/Plant/PlantProductlinebody.vue
@@ -27,7 +27,7 @@
       <right-toolbar v-model:showSearch="showSearch" @queryTable="getList" :columns="columns"></right-toolbar>
     </el-row>
 
-    <div class="table-container">
+    <div class="table-container" ref="tableContainerRef">
       <el-table :data="dataList" v-loading="loading" ref="table" border header-cell-class-name="el-table-header-cell"
         highlight-current-row @sort-change="sortChange">
         <el-table-column type="index" width="70" label="序号" align="center" />
@@ -40,34 +40,7 @@
         <el-table-column prop="lineName" label="产线名称" align="center" :show-overflow-tooltip="true"
           v-if="columns.showColumn('lineName')">
           <template #default="scope">
-            <el-tooltip placement="bottom" :width="880" :visible="activeLineId === scope.row.lineId"
-              popper-class="custom-process-tooltip">
-              <div class="process-box" v-if="processMap[scope.row.lineId] && processMap[scope.row.lineId].length">
-                <!-- <template v-for="(item, index) in processMap[scope.row.lineId]" :key="index">
-                  <div class="process-item green">
-                    <span class="process-code">{{ item.workstationCode }}</span>
-                    <span class="process-name">{{ item.workstationName }}</span>
-                  </div>
-                  <div class="arrow" v-if="index < processMap[scope.row.lineId].length - 1">→</div>
-                </template> -->
-              </div>
-              <!-- <div class="process-box empty-box" v-else>
-                <span>暂无工作站数据</span>
-              </div> -->
-              <template #content>
-                <div class="tooltip-content" style="display: flex;">
-                  <template v-for="(item, index) in processMap[scope.row.lineId]" :key="index">
-                    <div class="process-item green">
-                      <span class="process-code">{{ item.workstationCode }}</span>
-                      <span class="process-name">{{ item.workstationName }}</span>
-                    </div>
-                    <div class="arrow" v-if="index < processMap[scope.row.lineId].length - 1">→</div>
-                  </template>
-                </div>
-              </template>
-            </el-tooltip>
-
-            <span class="line-name-click" @click="handleLineClick(scope.row)" :data-id="scope.row.lineId">
+            <span class="line-name-click" @click.stop="handleLineClick(scope.row)" :data-id="scope.row.lineId">
               {{ scope.row.lineName }}
             </span>
           </template>
@@ -89,6 +62,28 @@
           </template>
         </el-table-column>
       </el-table>
+
+      <!-- ✅ 核心修改：独立出来的 表格居中弹窗 (和工艺路线页面一致) -->
+      <el-tooltip placement="bottom" :width="880" :visible="activeLineId !== ''" popper-class="custom-process-tooltip"
+        trigger="manual" append-to-body="false">
+        <template #content>
+          <div class="process-box" v-if="activeLineId && processMap[activeLineId] && processMap[activeLineId].length">
+            <template v-for="(item, index) in processMap[activeLineId]" :key="index">
+              <div class="process-item green">
+                <span class="process-code">{{ item.workstationCode }}</span>
+                <span class="process-name">{{ item.workstationName }}</span>
+              </div>
+              <div class="arrow" v-if="index < processMap[activeLineId].length - 1">→</div>
+            </template>
+          </div>
+          <div class="process-box empty-box" v-else>
+            <span>暂无工作站数据</span>
+          </div>
+        </template>
+        <template #reference>
+          <span></span>
+        </template>
+      </el-tooltip>
     </div>
     <pagination :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize"
       @pagination="getList" />
@@ -144,6 +139,7 @@
 </template>
 
 <script setup name="plantproductlinebody">
+import { ref, reactive, toRefs, getCurrentInstance, onMounted, onUnmounted } from 'vue'
 import {
   listPlantProductlinebody,
   addPlantProductlinebody, delPlantProductlinebody,
@@ -162,6 +158,7 @@ const workshopSelect = ref([])
 const activeLineId = ref('')
 const processMap = ref({})
 const requestLock = ref({})
+const tableContainerRef = ref(null)
 
 const queryParams = reactive({
   pageNum: 1,
@@ -190,7 +187,7 @@ const queryRef = ref()
 function handleLineClick(row) {
   const lineId = row.lineId
 
-  // 如果再次点击同一个产线，关闭tooltip
+  // 如果再次点击同一个产线，关闭弹窗
   if (activeLineId.value === lineId) {
     activeLineId.value = ''
     return
@@ -402,22 +399,28 @@ function handleDelete(row) {
     })
 }
 
-// 页面挂载时添加事件监听
+
+const handleDocumentClick = (e) => {
+  if (!e.target.classList.contains('line-name-click') && !e.target.closest('.custom-process-tooltip')) {
+    activeLineId.value = ''
+  }
+}
+
+
 onMounted(() => {
-  // 点击页面其他地方关闭tooltip
-  document.addEventListener('click', (e) => {
-    if (!e.target.classList.contains('line-name-click')) {
-      activeLineId.value = ''
-    }
-  })
+  document.addEventListener('click', handleDocumentClick)
+  handleQuery()
 })
 
-handleQuery()
+onUnmounted(() => {
+  document.removeEventListener('click', handleDocumentClick)
+})
 </script>
 
 <style scoped>
 .table-container {
   position: relative;
+  min-height: calc(100vh - 220px);
 }
 
 .line-name-click {
@@ -508,11 +511,17 @@ handleQuery()
 
 <style>
 .custom-process-tooltip {
+  position: absolute !important;
+  left: 50% !important;
+  top: 50% !important;
+  transform: translate(-50%, -200%) !important;
+  margin: 0 !important;
   min-width: 880px !important;
   padding: 12px 15px !important;
   background-color: #fff !important;
   border: solid 1px #fff !important;
   box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1) !important;
+  z-index: 99999 !important;
 }
 
 .custom-process-tooltip .el-tooltip__content {
diff --git a/src/views/masterDataManagement/Process/ProcessRouting.vue b/src/views/masterDataManagement/Process/ProcessRouting.vue
index 663b405..0de702e 100644
--- a/src/views/masterDataManagement/Process/ProcessRouting.vue
+++ b/src/views/masterDataManagement/Process/ProcessRouting.vue
@@ -30,7 +30,7 @@
       <right-toolbar v-model:showSearch="showSearch" @queryTable="getList" :columns="columns"></right-toolbar>
     </el-row>
 
-    <div class="table-container">
+    <div class="table-container" ref="tableContainerRef">
       <el-table :data="dataList" v-loading="loading" ref="table" border header-cell-class-name="el-table-header-cell"
         highlight-current-row @sort-change="sortChange" @row-click="handleRowClick" :row-class-name="tableRowClassName">
         <el-table-column type="index" width="70" label="序号" align="center" />
@@ -44,31 +44,12 @@
             <span class="route-name-click" @click.stop="handleRouteClick(scope.row)" :data-id="scope.row.routingCode">
               {{ scope.row.routingName }}
             </span>
-            <el-popover :visible="activeRouteId === scope.row.routingCode" placement="bottom" :width="880"
-              popper-class="custom-process-popover" trigger="manual">
-              <div class="process-box"
-                v-if="processMap[scope.row.routingCode] && processMap[scope.row.routingCode].length">
-                <template v-for="(item, index) in processMap[scope.row.routingCode]" :key="index">
-                  <div class="process-item" :class="item.colorType">
-                    <span class="process-code">{{ item.operationCode }}</span>
-                    <span class="process-name">{{ item.operationName }}</span>
-                  </div>
-                  <div class="arrow" v-if="index < processMap[scope.row.routingCode].length - 1">→</div>
-                </template>
-              </div>
-              <div class="process-box empty-box" v-else>
-                <span>暂无工序数据</span>
-              </div>
-              <template #reference>
-                <span></span>
-              </template>
-            </el-popover>
           </template>
         </el-table-column>
+
         <el-table-column prop="routingCode" label="工艺路线编号" align="center" :show-overflow-tooltip="true"
           v-if="columns.showColumn('routingCode')" />
         <el-table-column prop="version" label="版本号" align="center" v-if="columns.showColumn('version')">
-
         </el-table-column>
         <el-table-column prop="description" label="描述" align="center" :show-overflow-tooltip="true"
           v-if="columns.showColumn('description')" />
@@ -97,6 +78,24 @@
           </template>
         </el-table-column>
       </el-table>
+      <el-popover :visible="activeRouteId !== ''" width="880" popper-class="custom-process-popover" trigger="manual"
+        append-to-body="false">
+        <div class="process-box" v-if="currentProcessList && currentProcessList.length">
+          <template v-for="(item, index) in currentProcessList" :key="index">
+            <div class="process-item" :class="item.colorType">
+              <span class="process-code">{{ item.operationCode }}</span>
+              <span class="process-name">{{ item.operationName }}</span>
+            </div>
+            <div class="arrow" v-if="index < currentProcessList.length - 1">→</div>
+          </template>
+        </div>
+        <div class="process-box empty-box" v-else>
+          <span>暂无工序数据</span>
+        </div>
+        <template #reference>
+          <span></span>
+        </template>
+      </el-popover>
     </div>
 
     <pagination :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize"
@@ -105,7 +104,6 @@
     <el-dialog :title="title" :lock-scroll="false" v-model="open" width="800">
       <el-form ref="formRef" :model="form" :rules="rules" label-width="120px">
         <el-row :gutter="20">
-
           <el-col :lg="24">
             <el-form-item label="产品查询" prop="name">
               <el-select v-model="queryProduct" @change="handleProductCode" multiple filterable remote reserve-keyword
@@ -114,19 +112,16 @@
               </el-select>
             </el-form-item>
           </el-col>
-
           <el-col :lg="12">
             <el-form-item label="产成品编号" prop="fkProductMaterialCode">
               <el-input v-model="form.fkProductMaterialCode" placeholder="请输入产成品编号" />
             </el-form-item>
           </el-col>
-
           <el-col :lg="12">
             <el-form-item label="产品名称" prop="productMaterialName">
               <el-input v-model="form.productMaterialName" placeholder="请输入产品名称" />
             </el-form-item>
           </el-col>
-
           <el-col :lg="12">
             <el-form-item label="工艺路线编号" prop="routingCode">
               <el-input v-model="form.routingCode" placeholder="请输入工艺路线编号" :disabled="opertype != 1" />
@@ -142,7 +137,6 @@
               <el-input v-model.number="form.version" placeholder="请输入版本号" />
             </el-form-item>
           </el-col>
-
           <el-col :lg="12">
             <el-form-item label="状态" prop="status">
               <el-select v-model="form.status" placeholder="请选择状态" clearable>
@@ -184,6 +178,10 @@ const activeRouteId = ref('')
 const processMap = ref({})
 const requestLock = ref({})
 const optionsQuery = ref([])
+const currentProcessList = ref([])
+const tableContainerRef = ref(null)
+const routeRefs = ref({})
+
 const queryParams = reactive({
   pageNum: 1,
   pageSize: 10,
@@ -221,7 +219,6 @@ const total = ref(0)
 const dataList = ref([])
 const queryRef = ref()
 
-// 表格行类名函数 - 用于根据版本号设置行颜色
 const tableRowClassName = ({ row, rowIndex }) => {
   if (row.version == 1 || row.version == '1') {
     return 'success-row'
@@ -233,25 +230,37 @@ const handleRouteClick = async (row) => {
   const routingId = row.routingCode
   if (activeRouteId.value === routingId) {
     activeRouteId.value = ''
+    currentProcessList.value = []
     return
   }
   if (requestLock.value[routingId]) return
   requestLock.value[routingId] = true
+
+  if (processMap.value[routingId]) {
+    currentProcessList.value = processMap.value[routingId]
+    activeRouteId.value = routingId
+    requestLock.value[routingId] = false
+    return
+  }
+
   const res = await getProcessRoutingOperation(routingId)
+  requestLock.value[routingId] = false
   if (res.code === 200 && res.data) {
-    processMap.value[routingId] = res.data.map(item => ({
+    const formatData = res.data.map(item => ({
       operationCode: item.operationCode,
       operationName: item.operationName,
       colorType: item.colorType || 'green'
     }))
+    processMap.value[routingId] = formatData
+    currentProcessList.value = formatData
+    activeRouteId.value = routingId
   }
-  requestLock.value[routingId] = false
-  activeRouteId.value = routingId
 }
 
 const handleDocumentClick = (e) => {
-  if (!e.target.classList.contains('route-name-click') && !e.target.closest('.el-popover')) {
+  if (!e.target.classList.contains('route-name-click') && !e.target.closest('.custom-process-popover')) {
     activeRouteId.value = ''
+    currentProcessList.value = []
   }
 }
 
@@ -275,8 +284,8 @@ function getList() {
     if (code == 200) {
       dataList.value = data.result
       total.value = data.totalNum
-      loading.value = false
     }
+    loading.value = false
   })
 }
 
@@ -345,7 +354,7 @@ function reset() {
     updatedTime: null,
   };
   proxy.resetForm("formRef")
-  queryProduct.value = []; // 清空选择的产品
+  queryProduct.value = [];
 }
 
 function handleAdd() {
@@ -365,7 +374,6 @@ function handleUpdate(row) {
       title.value = '修改工艺路线'
       opertype.value = 2
       form.value = { ...data }
-      // 如果有产品编号，设置到查询选择框中
       if (form.value.fkProductMaterialCode) {
         queryProduct.value = [form.value.fkProductMaterialCode];
       }
@@ -378,7 +386,6 @@ function remoteMethod(val) {
     loading.value = true;
     getProcessRoutingOperationMaterialName({ materialCode: val }).then(res => {
       if (res.code == 200) {
-        console.log(res, '远程搜索物料');
         optionsQuery.value = res.data.map(item => {
           return {
             value: item.code,
@@ -398,25 +405,17 @@ function remoteMethod(val) {
 function submitForm() {
   proxy.$refs["formRef"].validate((valid) => {
     if (valid) {
-      if (form.value.routingId != undefined && opertype.value === 2) {
-        updateProcessRouting(form.value).then((res) => {
-          proxy.$modal.msgSuccess("修改成功")
-          open.value = false
-          getList()
-        })
-      } else {
-        addProcessRouting(form.value).then((res) => {
-          proxy.$modal.msgSuccess("新增成功")
-          open.value = false
-          getList()
-        })
-      }
+      const submitApi = form.value.routingId && opertype.value === 2 ? updateProcessRouting : addProcessRouting
+      submitApi(form.value).then((res) => {
+        proxy.$modal.msgSuccess(opertype.value === 2 ? "修改成功" : "新增成功")
+        open.value = false
+        getList()
+      })
     }
   })
 }
 
 function handleDelete(row) {
-  console.log(row);
   const Ids = row.routingId || ids.value
   proxy.$confirm('是否确认删除工艺路线名称为"' + row.routingName + '"的数据项？')
     .then(function () {
@@ -434,8 +433,10 @@ function handleDelete(row) {
   position: relative;
 }
 
+/* ✅ 核心修改：表格容器开启相对定位，作为弹框的定位父级 */
 .table-container {
   position: relative;
+  min-height: calc(100vh - 220px);
 }
 
 .route-name-click {
@@ -525,8 +526,14 @@ function handleDelete(row) {
 
 <style>
 .custom-process-popover {
+  position: absolute !important;
+  left: 50% !important;
+  top: 50% !important;
+  transform: translate(-50%, -100%) !important;
+  margin: 0 !important;
   min-width: 880px !important;
   padding: 12px 15px !important;
+  z-index: 99999 !important;
 }
 
 .custom-process-popover .el-popover__content {