增加下拉显示详情

src/views/Warehousing/inStock/index.vue

@@ -5,7 +5,7 @@
         :model="queryParams"
         ref="queryForm"
         v-show="showSearch"
-        label-width="70px"
+        label-width="90px"
         size="small"
       >
         <el-row>
@@ -98,10 +98,10 @@
                 </el-form-item>
               </el-col>
               <el-col :span="6">
-                <el-form-item label="品牌" prop="fMarks">
+                <el-form-item label="属性详情" prop="fMarks">
                   <el-input
                     v-model="queryParams.fMarks"
-                    placeholder="请输入品牌"
+                    placeholder="请输入属性详情"
                     clearable
                     style="width: 200px"
                     @keyup.enter.native="handleQuery"
@@ -242,6 +242,34 @@
                   </el-date-picker>
                 </el-form-item>
               </el-col>
+              <el-col :span="6" v-if="company === '青岛金港物流有限公司'">
+                <el-form-item label="报关单号">
+                  <el-input
+                    v-model="queryParams.fCustomno"
+                    placeholder="请输入报关单号"
+                    clearable
+                    style="width: 200px"
+                  />
+                </el-form-item>
+              </el-col>
+              <el-col :span="6" v-if="company === '青岛金港物流有限公司'">
+                <el-form-item label="境内收货人" prop="fSbu">
+                  <el-select
+                    v-model="queryParams.fSbu"
+                    clearable
+                    filterable
+                    placeholder="请输入关键词"
+                    style="width: 200px"
+                  >
+                    <el-option
+                      v-for="(item, index) in fSbuOptions"
+                      :key="index.fId"
+                      :label="item.fName"
+                      :value="item.fId"
+                    ></el-option>
+                  </el-select>
+                </el-form-item>
+              </el-col>
             </el-row>
           </div>
         </el-collapse-transition>
@@ -425,8 +453,52 @@
           show-summary
           :summary-method="getSum"
           :height="tableHeight"
+          @expand-change="expandChange"
         >
           <el-table-column type="selection" width="60" fixed align="center" />
+          <el-table-column type="expand" fixed="left">
+            <template slot-scope="props">
+              <el-table
+                :data="props.row.dataList"
+                v-loading="props.row.loading"
+              >
+                <el-table-column
+                  type="index"
+                  label="行号"
+                  width="50"
+                  align="center"
+                  fixed
+                />
+                <el-table-column label="状态" prop="fBillstatus" align="center" show-overflow-tooltip width="100">
+                  <template slot-scope="scope">
+                    {{ scope.row.fBillstatus | fBillstatusFormat }}
+                  </template>
+                </el-table-column>
+                <el-table-column label="入库日期" prop="fBsdate" align="center" show-overflow-tooltip width="100">
+                </el-table-column>
+                <el-table-column label="品名" prop="fGoodsid" align="center" show-overflow-tooltip width="100">
+                  <template slot-scope="scope">
+                    {{ scope.row.fGoodsid | goodsFormat(goodsOptions) }}
+                  </template>
+                </el-table-column>
+                <el-table-column label="货物属性" prop="fBusinessType" align="center" show-overflow-tooltip width="100">
+                  <template slot-scope="scope">
+                    {{ scope.row.fBusinessType | fStorageTypeFormat(fStorageTypeOptions) }}
+                  </template>
+                </el-table-column>
+                <el-table-column label="属性详情" prop="fMarks" align="center" show-overflow-tooltip width="100">
+                </el-table-column>
+                <el-table-column label="入库件数" prop="fQty" align="center" show-overflow-tooltip width="100">
+                </el-table-column>
+                <el-table-column label="入库毛重(kg)" prop="fGrossweight" align="center" show-overflow-tooltip width="150">
+                </el-table-column>
+                <el-table-column label="入库净重(kg)" prop="fNetweight" align="center" show-overflow-tooltip width="150">
+                </el-table-column>
+                <el-table-column label="箱号" prop="fCntrno" align="center" show-overflow-tooltip width="100">
+                </el-table-column>
+              </el-table>
+            </template>
+          </el-table-column>
           <el-table-column
             type="index"
             label="行号"
@@ -535,6 +607,7 @@ import {
   listWarehousebills,
   delinStock_s,
   delWarehousebills,
+  getWarehousebills,
 } from "@/api/warehouseBusiness/warehouseInStock";
 import { listCorps } from "@/api/basicdata/corps";
 import { listWarehousesss } from "@/api/basicdata/warehouse";
@@ -548,6 +621,10 @@ export default {
   name: "plans",
   data() {
     return {
+      // 明细数据
+      warehouseDetailed: [],
+      // 货物属性
+      fStorageTypeOptions: [],
       tableHeight: '600',
       timer: "",
       pageShow: true,
@@ -620,7 +697,7 @@ export default {
         {
           surface: "6",
           label: "fMarks",
-          name: "品牌",
+          name: "属性详情",
           checked: 0,
           width: 100,
         },
@@ -786,6 +863,9 @@ export default {
       ids: [],
       copyStatus: null,
       fTrucknoList:[],
+      // 公司名称
+      company: '',
+      fSbuOptions: [],
     };
   },
   // 使用子组件
@@ -810,6 +890,10 @@ export default {
     this.getDicts("data_trademodes").then((response) => {
       this.fTrademodeidOptions = response.data;
     });
+    this.getDicts("storage_type").then((response) => {
+      this.fStorageTypeOptions = response.data;
+      localStorage.setItem("fStorageTypeList", JSON.stringify(response.data));
+    });
     listGoods({ fStatus: 0, delFlag: 0 }).then((response) => {
       this.goodsOptions = response.rows;
     });
@@ -825,6 +909,11 @@ export default {
     listCorps({ type: 1 }).then((response) => {
       this.fMblnoOptions = response.rows;
     });
+    listCorps().then((response) => {
+      this.fSbuOptions = response.rows;
+    });
+    this.company = Cookies.get("companyName")
+    console.log(this.company)
     this.getRow();
     this.getList();
   },
@@ -841,6 +930,43 @@ export default {
       }
     })
   },
+  filters: {
+    fBillstatusFormat(row) {
+      let Name;
+      switch (row) {
+        case 10:
+          Name = "计划";
+          break;
+        case 20:
+          Name = "待入库";
+          break;
+        case 30:
+          Name = "入库中";
+          break;
+        default:
+          Name = "已入库";
+      }
+      return Name;
+    },
+    goodsFormat(row, goodsOptions) {
+      let goods;
+      goodsOptions.map((e) => {
+        if (row == e.fId) {
+          goods = e.fName;
+        }
+      });
+      return goods;
+    },
+    fStorageTypeFormat(row, fStorageTypeOptions) {
+      let fStorageType;
+      fStorageTypeOptions.map((e) => {
+        if (row == e.dictValue) {
+          fStorageType = e.dictLabel;
+        }
+      });
+      return fStorageType;
+    },
+  },
   methods: {
     // 获取当前月的第一天和最后一天
     // getMonth() {
@@ -942,7 +1068,10 @@ export default {
             : null;
         });
         this.warehousebillsList = response.rows;
-        console.log(this.warehousebillsList)
+        this.warehousebillsList.forEach(item => {
+          this.$set(item,'dataList',[])
+          this.$set(item,'loading', true)
+        })
         this.total = response.total;
         this.loading = false;
         // 根据浏览器高度设置初始高度
@@ -1135,6 +1264,15 @@ export default {
         this.pageShow2 = false;
       }
     },
+    expandChange(row,index) {
+      if (row.loading == true) {
+        getWarehousebills(row.fId).then(res => {
+          row.dataList = res.data.warehouseBillsItem
+          // this.$set(row,'dataList',res.data.warehouseBillsItem)
+          row.loading = false;
+        })
+      }
+    },
   },
 };
 </script>