库存查询合并库存列为三角结构，补货页面需求量添加点击下拉详情

src/views/WarehouseManagement/InventoryQuery/index.vue

@@ -165,24 +165,19 @@
               {{ scope.row.货位名称 }}
             </template>
           </el-table-column>
-          <el-table-column :width="setColumnWidth('数量')" align="center">
-            <template slot="header">
-              <div style="display: flex; flex-direction: column; align-items: center; line-height: 1.4;">
-                <span>库存</span>
-                <div style="display: flex; justify-content: space-around; width: 100%;">
-                  <span>需求数</span>
-                  <span>可用库存</span>
-                </div>
-              </div>
-            </template>
+          <el-table-column :width="setColumnWidth('数量')" label="库存" sortable="库存" prop="库存" align="center">
             <template slot-scope="scope">
-              <div style="display: flex; flex-direction: column; align-items: center; line-height: 1.4;">
-                <span>{{ scope.row.库存 }}</span>
-                <div style="display: flex; justify-content: space-around; width: 100%;">
-                  <span>{{ scope.row.需求量 }}</span>
-                  <span>{{ scope.row.库存 - scope.row.需求量 }}</span>
-                </div>
-              </div>
+              {{ scope.row.库存 }}
+            </template>
+          </el-table-column>
+          <el-table-column :width="setColumnWidth('数量')" label="需求数" align="center">
+            <template slot-scope="scope">
+              {{ scope.row.需求量 }}
+            </template>
+          </el-table-column>
+          <el-table-column :width="setColumnWidth('数量')" label="可用库存" align="center">
+            <template slot-scope="scope">
+              {{ scope.row.库存 - scope.row.需求量 }}
             </template>
           </el-table-column>
           <el-table-column :width="setColumnWidth('数量')" label="加工中" align="center">

src/views/WarehouseManagement/Replenishment/index.vue

@@ -63,7 +63,17 @@
             </el-table-column>
             <el-table-column width="85px" label="需求量" align="center" prop="需求量" sortable="需求量">
               <template slot-scope="scope">
-                {{ scope.row.需求量 }}
+                <el-popover
+                  placement="bottom"
+                  width="400"
+                  trigger="click"
+                  @show="getDemandDetail(scope.row)">
+                  <el-table :data="demandDetailData" border stripe size="mini" max-height="300" v-loading="demandDetailLoading">
+                    <el-table-column prop="订单编号" label="订单号" align="center" show-overflow-tooltip/>
+                    <el-table-column prop="最终需求量" label="需求量" align="center"/>
+                  </el-table>
+                  <span slot="reference" style="cursor: pointer; color: #409EFF; text-decoration: underline;">{{ scope.row.需求量 }}</span>
+                </el-popover>
               </template>
             </el-table-column>
             <el-table-column width="85px" label="可用库存" align="center">
@@ -307,7 +317,9 @@ export default {
       pageCurrent: 1, // 分页当前页
       pageSize: 20, // 分页每页显示条数
       orderName: '', // 排序列名
-      order: '' // 排序方式
+      order: '', // 排序方式
+      demandDetailData: [],
+      demandDetailLoading: false
     }
   },
   computed: {
@@ -328,6 +340,19 @@ export default {
     this.getTreeData()
   },
   methods: {
+    getDemandDetail(row) {
+      this.demandDetailLoading = true
+      this.demandDetailData = []
+      var param = []
+      param[0] = ['物料流水号', row.物料流水号]
+      var Data = this.CreateData('11', '仓储管理_报缺补货_需求量明细_查询', param)
+      this.ExecDatabase(Data).then(response => {
+        this.demandDetailData = response.data.filter(item => item.最终需求量 !== 0)
+        this.demandDetailLoading = false
+      }).catch(() => {
+        this.demandDetailLoading = false
+      })
+    },
     getData(val) {
       this.pageCurrent = 1
       this.productValue = val[val.length - 1]