From 03cfba0f636b42417070fc8caef44bcdd792a085 Mon Sep 17 00:00:00 2001
From: haoxuan <haoxuan>
Date: 星期二, 07 五月 2024 17:34:37 +0800
Subject: [PATCH] 概述 出库模块 编辑的时候循环处理对应产品调用接口获取在库数量的逻辑处理

---
 src/views/overview/OverviewListView.vue |  421 +++++++++++++++++++++++++++++++++++++++++++++------
 1 files changed, 366 insertions(+), 55 deletions(-)

diff --git a/src/views/overview/OverviewListView.vue b/src/views/overview/OverviewListView.vue
index 5ba0d19..48dc227 100644
--- a/src/views/overview/OverviewListView.vue
+++ b/src/views/overview/OverviewListView.vue
@@ -8,39 +8,75 @@
         :add-title="'鏂板缓'"
         :placeholder="'璇疯緭鍏ュ崟鍙�/鏉ユ簮鍗曟嵁'"
         :amount-view="false"
+        :search-task-map="searchTaskMap"
         @addCommonClick="addBtnClick"
         @searchClick="getList"
+        @delSelectClick="delSelectClick"
       />
     </div>
-    <div class="list-view">
-      <div class="table">
-        <TableCommonView ref="tableListRef" :table-list="tableList" @selTableCol="selTableCol">
-          <template slot="tableButton">
-            <el-table-column label="鎿嶄綔" width="100">
-              <template slot-scope="scope">
-                <el-button @click="tableRowClick(scope.row, '鏌ョ湅')" type="text" size="small">鏌ョ湅</el-button>
-                <el-button
-                  v-if="scope.row.status !== 4"
-                  @click="tableRowClick(scope.row, '缂栬緫')"
-                  type="text"
-                  size="small"
-                  >缂栬緫</el-button
-                >
-              </template>
-            </el-table-column>
-          </template>
-        </TableCommonView>
+    <div class="body">
+      <!-- <div class="body-card"> -->
+      <div class="content-top">
+        <div class="list-view">
+          <TableCommonView
+            ref="tableListRef"
+            :table-list="tableList"
+            @selTableCol="selTableCol"
+            @tableRowClick="tableRowClick"
+            :selectClassRow="selectRow"
+          >
+            <template slot="tableButton">
+              <el-table-column label="鎿嶄綔" width="100">
+                <template slot-scope="scope">
+                  <el-button @click="viewEditClick(scope.row, '鏌ョ湅')" type="text" size="small">鏌ョ湅</el-button>
+                  <el-button
+                    v-if="scope.row.status !== 4 && scope.row.status !== 5"
+                    @click="viewEditClick(scope.row, '缂栬緫')"
+                    type="text"
+                    size="small"
+                    >缂栬緫</el-button
+                  >
+                </template>
+              </el-table-column>
+            </template>
+          </TableCommonView>
+          <div class="btn-pager">
+            <PagerView class="page" :pager-options="pagerOptions" v-on="pagerEvents" />
+          </div>
+        </div>
       </div>
-      <div class="btn-pager">
-        <PagerView class="page" :pager-options="pagerOptions" v-on="pagerEvents" />
+      <div class="content-bottom">
+        <div class="bottom-tabs">
+          <div
+            class="tab-pane"
+            @click="getTab(0)"
+            :style="{
+              background: TabsIndex == 0 ? '#2a78fb' : '#F1F3F8',
+              color: TabsIndex == 0 ? '#fff' : '#666'
+            }"
+          >
+            浜у搧淇℃伅
+          </div>
+        </div>
+        <div class="list-view">
+          <TableCommonView :table-list="productTableList" @selTableCol="selBottomTableCol">
+            <!-- <template slot="tableButton">
+              <el-table-column label="鎿嶄綔" width="160" fixed="right">
+                <template slot-scope="scope">
+                  <el-button @click="viewClick(scope.row)" type="text" size="small">鏌ョ湅</el-button>
+                </template>
+              </el-table-column>
+            </template> -->
+          </TableCommonView>
+        </div>
       </div>
     </div>
     <!-- 鏂板缓/缂栬緫 -->
     <AddOverviewDialog
       v-if="editConfig.visible"
-      :work-type="workType"
+      :workType="workType"
       :edit-common-config="editConfig"
-      :add-name="this.$route.params.name"
+      :add-name="addName"
       :display-edit="displayEdit"
     />
   </div>
@@ -61,7 +97,7 @@
   data() {
     return {
       tableList: {},
-      showcol: ["浠撳簱浣嶇疆", "璋冨嚭浣嶇疆", "璋冨叆浣嶇疆", "鑱旂郴浜�", "鏃ユ湡", "鏉ユ簮鍗曟嵁", "鐘舵��"],
+      showcol: ["浠撳簱浣嶇疆", "鏉ユ簮","鏉ユ簮鍗曟嵁","璋冨嚭浣嶇疆", "璋冨叆浣嶇疆", "鑱旂郴浜�", "鏃ユ湡",   "閿�鍞槑缁嗗崟", "鐘舵��" ,"涓荤","浼氳","淇濈鍛�",],
       searchOptions: [],
       commonDetail: {
         visible: false,
@@ -73,16 +109,53 @@
         title: "鏂板缓",
         infomation: {}
       },
-      workType: this.$route.params.workType,
+      workType: this.$route.query.workType,
       keyword: "",
       params: {},
       displayEdit: false,
       formLabel: "",
-      toLabel: ""
+      toLabel: "",
+      addName: "",
+      searchTaskMap: [],
+      numberLabel: "鍗曞彿",
+      TabsIndex: "0",
+      productTableList: {},
+      showBottomCol: ["浜у搧缂栧彿", "浜у搧鍚嶇О", "浜у搧瑙勬牸", "浜у搧鍨嬪彿", "璁¢噺鍗曚綅", "璋冨嚭浣嶇疆", "璋冨叆浣嶇疆", "鏁伴噺","涓荤","浼氳","淇濈鍛�",'杈呭姪鏁伴噺','杈呭姪鍗曚綅','姣涢噸','鎬绘瘺閲�','鍑�閲�','鎬诲噣閲�'],
+      tableBottomColumn: [],
+      selectRow: {},
+      productColumn: [
+        { label: "浜у搧缂栧彿", prop: "id", default: true },
+        { label: "浜у搧鍚嶇О", prop: "productName" },
+        { label: "浜у搧瑙勬牸", prop: "specs" },
+        { label: "浜у搧鍨嬪彿", prop: "model" },
+        { label: "鏁伴噺", prop: "amount" },
+        { label: "璁¢噺鍗曚綅", prop: "unit" },
+        { label: "杈呭姪鏁伴噺", prop: "adjunctAmount" },
+        { label: "杈呭姪鍗曚綅", prop: "adjunctUnit" },
+        { label: "姣涢噸", prop: "grossWeight" },
+        { label: "鎬绘瘺閲�", prop: "totalGrossWeight" },
+        { label: "鍑�閲�", prop: "netWeight" },
+        { label: "鎬诲噣閲�", prop: "totalNetWeight" }
+      ],
+      allotProductColumn: [
+        { label: "浜у搧缂栧彿", prop: "id", default: true },
+        { label: "浜у搧鍚嶇О", prop: "productName" },
+        { label: "浜у搧瑙勬牸", prop: "specs" },
+        { label: "浜у搧鍨嬪彿", prop: "model" },
+        { label: "璁¢噺鍗曚綅", prop: "unit" },
+        { label: "璋冨嚭浣嶇疆", prop: "location" },
+        { label: "璋冨叆浣嶇疆", prop: "toLocation" },
+        { label: "鏁伴噺", prop: "amount" },
+        { label: "杈呭姪鏁伴噺", prop: "adjunctAmount" },
+        { label: "杈呭姪鍗曚綅", prop: "adjunctUnit" },
+        { label: "姣涢噸", prop: "grossWeight" },
+        { label: "鎬绘瘺閲�", prop: "totalGrossWeight" },
+        { label: "鍑�閲�", prop: "netWeight" },
+        { label: "鎬诲噣閲�", prop: "totalNetWeight" }
+      ]
     }
   },
   created() {
-    console.log(this.workType)
     this.setFormToLabel()
     this.setTable()
     var paramsData = sessionStorage.getItem("paramsData")
@@ -90,10 +163,13 @@
     if (paramsData) {
       params = JSON.parse(sessionStorage.getItem("paramsData"))
     } else {
-      params = this.$route.params
+      params = this.$route.query
+      params.id=Number(params.id)
       sessionStorage.setItem("paramsData", JSON.stringify(params))
     }
     this.params = params
+    this.searchTaskMap =
+      this.params.status > 0 ? [{ id: this.params.id, title: this.getStatus(this.params.status) }] : []
     this.getData()
     // console.log(this.$route.params.workType)
   },
@@ -106,12 +182,16 @@
       if (this.workType === 1) {
         this.formLabel = "渚涘簲鍟嗕綅缃�"
         this.toLabel = "浠撳簱浣嶇疆"
+        this.numberLabel = "鍏ュ簱鍗曞彿"
       } else if (this.workType === 2) {
         this.formLabel = "浠撳簱浣嶇疆"
         this.toLabel = "瀹㈡埛浣嶇疆"
+        this.numberLabel = "鍑哄簱鍗曞彿"
       } else {
+        this.showcol=["浠撳簱浣嶇疆", "璋冨嚭浣嶇疆", "璋冨叆浣嶇疆", "鑱旂郴浜�","鏃ユ湡",   "閿�鍞槑缁嗗崟", "鐘舵��","涓荤","浼氳","淇濈鍛�",],
         this.formLabel = "璋冨嚭浣嶇疆"
         this.toLabel = "璋冨叆浣嶇疆"
+        this.numberLabel = "璋冩嫧鍗曞彿"
       }
     },
     setTable() {
@@ -131,14 +211,31 @@
         }
       }
       this.tableList.allcol = allcol
+      this.tableBottomColumn = this.workType == 3 ? this.allotProductColumn : this.productColumn
+      this.setBottomList()
     },
     setTableColumn(showcol) {
       let tableColumn = [
         {
-          label: "鍗曞彿",
+          label: this.numberLabel,
           prop: "number",
           isShowColumn: true,
           default: true
+        },
+        {
+          label: "鏉ユ簮",
+          prop: "operationSource",
+          isShowColumn: showcol.includes("鏉ユ簮"),
+          default: false,
+          // status: true,
+          isCallMethod: true,
+          getCallMethod: this.getSourceStatus
+        },
+        {
+          label: "鏉ユ簮鍗曟嵁",
+          prop: "sourceNumber",
+          isShowColumn: showcol.includes("鏉ユ簮鍗曟嵁"),
+          default: false
         },
         {
           label: this.formLabel,
@@ -172,12 +269,6 @@
           date: true
         },
         // {
-        //   label: "浜у搧鍙敤鎬�",
-        //   prop: "status",
-        //   isShowColumn: showcol.includes("浜у搧鍙敤鎬�"),
-        //   default: false
-        // },
-        // {
         //   label: "鎴鏃ユ湡",
         //   prop: "faultTime",
         //   isShowColumn: showcol.includes("鎴鏃ユ湡"),
@@ -190,17 +281,11 @@
         //   default: false
         // },
         {
-          label: "鏉ユ簮鍗曟嵁",
-          prop: "sourceNumber",
-          isShowColumn: showcol.includes("鏉ユ簮鍗曟嵁"),
+          label: "閿�鍞槑缁嗗崟",
+          prop: "salesDetailsNumber",
+          isShowColumn: showcol.includes("閿�鍞槑缁嗗崟"),
           default: false
         },
-        // {
-        //   label: "娆犲崟",
-        //   prop: "status",
-        //   isShowColumn: showcol.includes("娆犲崟"),
-        //   default: false
-        // },
         {
           label: "鍏ュ簱绫诲瀷",
           prop: "operationTypeName",
@@ -216,7 +301,25 @@
           status: true,
           isCallMethod: true,
           getCallMethod: this.getStatus
-        }
+        },
+        {
+          label: "涓荤",
+          prop: "manager",
+          isShowColumn: showcol.includes("涓荤"),
+          default: false
+        },
+        {
+          label: "浼氳",
+          prop: "accountant",
+          isShowColumn: showcol.includes("浼氳"),
+          default: false
+        },
+        {
+          label: "淇濈鍛�",
+          prop: "custodian",
+          isShowColumn: showcol.includes("淇濈鍛�"),
+          default: false
+        },
       ]
       return tableColumn
     },
@@ -228,7 +331,7 @@
     async getData() {
       await getOperation({
         number: this.keyword,
-        operationTypeId: this.params.id,
+        operationTypeId: this.$route.query.id ? Number(this.$route.query.id) : this.params.id,
         page: this.pagerOptions.currPage,
         pageSize: this.pagerOptions.pageSize,
         status: this.params.status
@@ -238,14 +341,70 @@
           const list = res.data.map((item) => {
             return {
               ...item,
-              from: item.fromLocation.name,
-              to: item.toLocation.name
+              from: item.location.jointName,
+              to: item.location.jointName
             }
           })
           this.tableList.tableInfomation = list || []
           this.pagerOptions.totalCount = res.total
+          if (res.total > 0) {
+            this.selectRow = this.tableList.tableInfomation.length > 0 ? this.tableList.tableInfomation[0] : {}
+            this.tableRowClick(this.selectRow)
+            this.bottomProductData(this.selectRow)
+          }
         }
       })
+    },
+    // bottom浜у搧淇℃伅鏁版嵁澶勭悊
+    bottomProductData(arr) {
+      const list = arr.details.map((item) => {
+        // let adjunctUnit=''
+        // let adjunctAmount=''
+        // if(item.product.moreUnit&&item.product.moreUnitList){
+        //   let moreUnitList=item.product.moreUnitList
+        //   if(moreUnitList.length>0){
+        //     let isValue=false
+        //     for(let j in moreUnitList){
+        //       if(moreUnitList[j].floating){
+        //         isValue=true;
+        //         adjunctUnit=moreUnitList[j].unit
+        //         adjunctAmount=moreUnitList[j].amount
+        //         break;
+        //       }
+        //     }
+        //     if(!isValue){
+        //       for(let j in moreUnitList){
+        //          if(moreUnitList[j].unit){
+        //           adjunctUnit=moreUnitList[j].unit
+        //           adjunctAmount=moreUnitList[j].amount
+        //           break;
+        //         }
+        //       }
+        //     }
+        //   }
+        // }
+        return {
+          ...item,
+          productName: item.product.name,
+          unit: item.product.unit,
+          model:item.product.model,
+          specs:item.product.specs,
+          location: arr.location.name,
+          toLocation: arr.toLocation.name,
+          adjunctUnit:item.auxiliaryUnit,
+          adjunctAmount:item.auxiliaryAmount,
+          grossWeight:item.product.grossWeight==0?'':item.product.grossWeight,
+          totalGrossWeight:item.totalGrossWeight==0?'':item.totalGrossWeight,
+          netWeight:item.product.netWeight==0?'':item.product.netWeight, 
+          totalNetWeight:item.totalNetWeight==0?'':item.totalNetWeight,  
+        }
+      })
+      this.productTableList.tableInfomation = list
+    },
+    // top 琛岀偣鍑�
+    tableRowClick(row) {
+      this.selectRow = row
+      this.bottomProductData(this.selectRow)
     },
     // 鎼滅储
     getList(val) {
@@ -255,24 +414,104 @@
       this.getData()
     },
     // 鏌ョ湅 缂栬緫
-    tableRowClick(row, val) {
-      console.log(row)
+    viewEditClick(row, val) {
       this.editConfig.visible = true
       this.editConfig.title = val
-      this.editConfig.operationTypeId = this.$route.params.id
+      this.editConfig.operationTypeId = this.params.id
+      this.editConfig.code = this.params.code
+      row.details.map((item) => {
+        item.fromLocationId = item.fromLocation.jointName
+        item.toLocationId = item.toLocation.jointName
+      })
+      row.location = {
+        value: row.location.id || row.location.value,
+        label: row.location.jointName || row.location.label
+      }
+      row.toLocation = {
+        value: row.toLocation.id || row.toLocation.value,
+        label: row.toLocation.jointName || row.toLocation.label
+      }
+      row.locationID = row.location.jointName
+      row.locationId = row.location.value
+      row.managerObj={
+        label:row.manager,
+        value:row.managerId
+      }
+      row.accountantObj={
+        label:row.accountant,
+        value:row.accountantId
+      }
+      row.custodianObj={
+        label:row.custodian,
+        value:row.custodianId
+      }
+      // row.tolocationId=row.tolocation.value
       this.editConfig.infomation = { ...row }
     },
     // 鏂板缓
     addBtnClick() {
       this.editConfig.title = "鏂板缓"
-      this.editConfig.operationTypeId = this.$route.params.id
-      this.editConfig.code=this.$route.params.code
-      this.editConfig.infomation = {}
+      this.addName = this.params.name
+      this.editConfig.operationTypeId = this.params.id
+      this.editConfig.code = this.params.code
+      this.editConfig.infomation = {
+        // location:{jointName:""}
+      }
       this.editConfig.visible = true
     },
     // 鐘舵��
     getStatus(val) {
-      return val === 1 ? "鑽夌" : val === 3 ? "灏辩华" : "瀹屾垚"
+      return val === 1 ? "鑽夌" : val === 3 ? "灏辩华" : val === 4 ? "瀹屾垚" : val === 5 ? "鍙栨秷" : ""
+    },
+    // 鏉ユ簮
+    getSourceStatus(val){
+      return val===0 ? '--':val === 1 ? "閲囪喘鍏ュ簱" : val === 2 ? "鐢熶骇鍏ュ簱" : val === 3 ? "濮斿鍏ュ簱" : val === 4 ? "鐢熶骇棰嗘枡" : val=== 5 ? "濮斿棰嗘枡": val === 6?"閿�鍞彂璐�": "--"
+    },
+    // 鍒犻櫎鎼滅储鐘舵��
+    delSelectClick() {
+      this.params.status = 0
+      this.getData()
+    },
+    // bottom 浜у搧淇℃伅
+    // bom 鍒楄〃
+    setBottomList() {
+      this.productTableList = {
+        selectIndex: true,
+        tableInfomation: [],
+        allcol: [],
+        showcol: this.showBottomCol,
+        tableColumn: this.setColumnVisible(this.showBottomCol, this.tableBottomColumn)
+      }
+      this.setTableList(this.productTableList)
+    },
+    setTableList(tableList) {
+      tableList.allcol = tableList.tableColumn.filter((ele) => !ele.default).map((ele) => ele.label)
+      // this.searchOptions = []
+      // for (let i = 0; i < tableList.tableColumn.length; i++) {
+      //   const label = tableList.tableColumn[i].label
+      //   const value = tableList.tableColumn[i].prop
+      //   this.searchOptions.push({ value: value, label: label })
+      // }
+    },
+    setColumnVisible(showCol, tableColumn) {
+      return tableColumn.map((ele) => {
+        return {
+          ...ele,
+          isShowColumn: showCol.includes(ele.label)
+        }
+      })
+    },
+    selBottomTableCol(val) {
+      this.showBottomCol = val
+      this.productTableList.tableColumn = this.setColumnVisible(val, this.tableBottomColumn)
+    },
+    getTab(tab) {
+      this.TabsIndex = tab
+      // if (this.TabsIndex == 0) {
+      //   // 浜у搧淇℃伅鍒楄〃
+      //   this.setBottomList()
+      //   this.getProductInventoryInfo(this.selectRow)
+      // }
     }
   }
 }
@@ -280,9 +519,72 @@
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style lang="scss" scoped>
+.rightContent {
+  height: 100%;
+  overflow: hidden;
+  .body {
+    box-sizing: border-box;
+    padding: 10px 0px;
+    border-radius: 12px;
+    height: calc(100% - 70px);
+    .content-top {
+      background-color: #fff;
+      border-radius: 12px;
+      min-height: 70px;
+      height: 48%;
+      position: relative;
+      .list-view {
+        height: calc(100% - 50px);
+      }
+    }
+    .content-bottom {
+      .bottom-tabs {
+        height: 40px;
+        line-height: 40px;
+        background: #e6ecf2;
+        display: flex;
+        .tab-pane {
+          width: 100px;
+          margin-right: 20px;
+          font-size: 14px !important;
+          text-align: center;
+          cursor: pointer;
+          background: #2a78fb;
+          border-top-left-radius: 20px;
+          border-top-right-radius: 20px;
+        }
+      }
+      .lable-view {
+        background: #e6ecf2;
+        height: 40px;
+        line-height: 40px;
+        .name {
+          border-left: 4px solid #2a78fb;
+          padding-left: 10px;
+        }
+      }
+      background-color: #fff;
+      border-radius: 12px;
+      min-height: 70px;
+      height: calc(52% - 60px);
+      margin-top: 10px;
+      // padding: 10px 20px;
+      .list-view {
+        height: calc(100% - 10px);
+      }
+    }
+    .btn-pager {
+      display: flex;
+      margin-top: 0px;
+      .page {
+        margin-left: auto;
+      }
+    }
+  }
+}
 .label-fixed-element {
-  background: #e6ecf2;
   position: fixed;
+  background:#f8f8f9;
   font-size: 14px;
   width: calc(100% - 530px);
   height: 45px;
@@ -293,4 +595,13 @@
   margin-top: -60px;
   margin-left: -5px;
 }
+::v-deep {
+  .el-table__header-wrapper {
+    position: sticky;
+    width: 100%;
+    //  left:0px;
+    top: 0px;
+    z-index: 2000;
+  }
+}
 </style>

--
Gitblit v1.8.0