调整供应链安全界面

src/views/lean/scs/index.vue

@@ -291,12 +291,43 @@
         </el-table-column>
         <el-table-column prop="gyPoy" label="供应商库存(吨)" width="150" align="center">
           <template #default="scope">
+            <el-popover
+              placement="top"
+              trigger="hover"
+              :disabled="scope.row.gyPoy === null"
+              width="200"
+            >
+              <template #reference>
+                <span v-if="scope.row.gyPoy !== null" :style="getSupplierInventoryStyle(scope.row)" class="supplier-inventory-link">
+                  <span class="clickable-icon">👉</span> {{ formatNumber(scope.row.gyPoy) }}
+                </span>
+                <span v-else>--</span>
+              </template>
 
-            <span v-if="scope.row.gyPoy !== null" :style="getSupplierInventoryStyle(scope.row)"
-                  @click="openSupplierInventoryDialog" class="supplier-inventory-link">
-              <span class="clickable-icon">👉</span> {{ formatNumber(scope.row.gyPoy) }}
-            </span>
-            <span v-else>--</span>
+              <div class="supplier-popover">
+                <div class="supplier-item" @click="openSupplierInventoryDialog('hd', scope.row.gyPoy)">
+                  <span class="supplier-name">华鼎</span>
+                  <span class="supplier-stock">{{ formatNumber(scope.row.gyPoy) }}</span>
+                </div>
+                <div class="supplier-item">
+                  <span class="supplier-name">恒通</span>
+                  <span class="supplier-stock">--</span>
+                </div>
+                <div class="supplier-item">
+                  <span class="supplier-name">恒逸</span>
+                  <span class="supplier-stock">--</span>
+                </div>
+                <div class="supplier-item">
+                  <span class="supplier-name">盛元</span>
+                  <span class="supplier-stock">--</span>
+                </div>
+                <div class="supplier-item">
+                  <span class="supplier-name">盛虹</span>
+                  <span class="supplier-stock">--</span>
+                </div>
+                <div class="popover-tip">点击供应商查看详情</div>
+              </div>
+            </el-popover>
           </template>
         </el-table-column>
       </el-table>
@@ -456,9 +487,11 @@ const getSupplierInventoryStyle = (row) => {
 };
 
 // 打开供应商库存对话框
-const openSupplierInventoryDialog = () => {
-  supplierInventoryDialog.visible = true;
-  supplierInventoryDialog.fullscreen = false;
+const openSupplierInventoryDialog = (supplier, stock) => {
+  if (supplier === 'hd') {  // 只有点击华鼎才打开对话框
+    supplierInventoryDialog.visible = true;
+    supplierInventoryDialog.fullscreen = false;
+  }
 };
 
 // 关闭供应商库存对话框
@@ -903,33 +936,39 @@ getList();
   text-decoration: underline;
 }
 
-.z-value-tag {
-  width: 100%;
-  text-align: center;
-  font-weight: bold;
-  font-size: 14px;
-  height: 32px;
-  line-height: 30px;
+.supplier-popover {
+  padding: 10px 0;
+}
+
+.supplier-item {
+  display: flex;
+  justify-content: space-between;
+  padding: 4px 0;
+  border-bottom: 1px solid #eee;
   cursor: pointer;
 }
 
-.z-tooltip-content {
-  padding: 10px;
-  background-color: #ffffff;
-  color: #303133;
+.supplier-item:hover {
+  background-color: #f5f7fa;
 }
 
-.tooltip-title {
-  font-weight: bold;
-  margin-bottom: 10px;
+.supplier-item:last-child {
+  border-bottom: none;
 }
 
-.z-table {
-  margin-bottom: 10px;
+.supplier-name {
+  font-weight: 500;
+}
+
+.supplier-stock {
+  font-weight: 600;
 }
 
-.risk-info {
+.popover-tip {
+  margin-top: 8px;
   font-size: 12px;
-  color: #606266;
+  color: #999;
+  text-align: center;
 }
+
 </style>