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 |  518 +++++++++++++++++++++++++++++++++++++++++++++++++-------
 1 files changed, 448 insertions(+), 70 deletions(-)

diff --git a/src/views/overview/OverviewListView.vue b/src/views/overview/OverviewListView.vue
index aab7906..48dc227 100644
--- a/src/views/overview/OverviewListView.vue
+++ b/src/views/overview/OverviewListView.vue
@@ -1,33 +1,83 @@
 <template>
   <div class="rightContent">
+    <div class="label-fixed-element">
+      <span>{{ params.name }}</span>
+    </div>
     <div class="top">
       <SearchCommonView
         :add-title="'鏂板缓'"
-        :placeholder="'璇疯緭鍏ュ崟鍙�'"
+        :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"
-          @tableRowClick="tableRowClick"
-        ></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>
 </template>
@@ -47,7 +97,7 @@
   data() {
     return {
       tableList: {},
-      showcol: ["浠�", "鑷�", "鑱旂郴浜�", "鏃ユ湡", "鏉ユ簮鍗曟嵁", "鐘舵��"],
+      showcol: ["浠撳簱浣嶇疆", "鏉ユ簮","鏉ユ簮鍗曟嵁","璋冨嚭浣嶇疆", "璋冨叆浣嶇疆", "鑱旂郴浜�", "鏃ユ湡",   "閿�鍞槑缁嗗崟", "鐘舵��" ,"涓荤","浼氳","淇濈鍛�",],
       searchOptions: [],
       commonDetail: {
         visible: false,
@@ -59,19 +109,96 @@
         title: "鏂板缓",
         infomation: {}
       },
-      workType: this.$route.params.workType
+      workType: this.$route.query.workType,
+      keyword: "",
+      params: {},
+      displayEdit: false,
+      formLabel: "",
+      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() {
+    this.setFormToLabel()
     this.setTable()
+    var paramsData = sessionStorage.getItem("paramsData")
+    let params = {}
+    if (paramsData) {
+      params = JSON.parse(sessionStorage.getItem("paramsData"))
+    } else {
+      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)
+    // console.log(this.$route.params.workType)
+  },
+  // 椤甸潰閿�姣佷箣鍓�
+  beforeDestroy() {
+    sessionStorage.removeItem("paramsData")
   },
   methods: {
+    setFormToLabel() {
+      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() {
       this.tableList = {
         tableInfomation: [],
-        selectBox: true,
+        selectBox: false,
+        selectIndex: true,
         showcol: this.showcol,
         allcol: [],
         tableColumn: this.setTableColumn(this.showcol)
@@ -84,25 +211,42 @@
         }
       }
       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: "from",
-          isShowColumn: showcol.includes("浠�"),
+          label: "鏉ユ簮",
+          prop: "operationSource",
+          isShowColumn: showcol.includes("鏉ユ簮"),
+          default: false,
+          // status: true,
+          isCallMethod: true,
+          getCallMethod: this.getSourceStatus
+        },
+        {
+          label: "鏉ユ簮鍗曟嵁",
+          prop: "sourceNumber",
+          isShowColumn: showcol.includes("鏉ユ簮鍗曟嵁"),
           default: false
         },
         {
-          label: "鑷�",
+          label: this.formLabel,
+          prop: "from",
+          isShowColumn: showcol.includes(this.formLabel),
+          default: false
+        },
+        {
+          label: this.toLabel,
           prop: "to",
-          isShowColumn: showcol.includes("鑷�"),
+          isShowColumn: showcol.includes(this.toLabel),
           default: false
         },
         {
@@ -124,39 +268,27 @@
           default: false,
           date: true
         },
+        // {
+        //   label: "鎴鏃ユ湡",
+        //   prop: "faultTime",
+        //   isShowColumn: showcol.includes("鎴鏃ユ湡"),
+        //   default: false
+        // },
+        // {
+        //   label: "瀹為檯鏃ユ湡",
+        //   prop: "shopName",
+        //   isShowColumn: showcol.includes("瀹為檯鏃ユ湡"),
+        //   default: false
+        // },
         {
-          label: "浜у搧鍙敤鎬�",
-          prop: "status",
-          isShowColumn: showcol.includes("浜у搧鍙敤鎬�"),
-          default: false
-        },
-        {
-          label: "鎴鏃ユ湡",
-          prop: "faultTime",
-          isShowColumn: showcol.includes("鎴鏃ユ湡"),
-          default: false
-        },
-        {
-          label: "瀹為檯鏃ユ湡",
-          prop: "shopName",
-          isShowColumn: showcol.includes("瀹為檯鏃ユ湡"),
-          default: false
-        },
-        {
-          label: "鏉ユ簮鍗曟嵁",
-          prop: "sourceNumber",
-          isShowColumn: showcol.includes("鏉ユ簮鍗曟嵁"),
-          default: false
-        },
-        {
-          label: "娆犲崟",
-          prop: "status",
-          isShowColumn: showcol.includes("娆犲崟"),
+          label: "閿�鍞槑缁嗗崟",
+          prop: "salesDetailsNumber",
+          isShowColumn: showcol.includes("閿�鍞槑缁嗗崟"),
           default: false
         },
         {
           label: "鍏ュ簱绫诲瀷",
-          prop: "faultTime",
+          prop: "operationTypeName",
           isShowColumn: showcol.includes("鍏ュ簱绫诲瀷"),
           default: false
         },
@@ -169,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
     },
@@ -180,50 +330,278 @@
     // 璇锋眰鏁版嵁
     async getData() {
       await getOperation({
-        operationTypeId: this.$route.params.id,
+        number: this.keyword,
+        operationTypeId: this.$route.query.id ? Number(this.$route.query.id) : this.params.id,
         page: this.pagerOptions.currPage,
-        pageSize: this.pagerOptions.pageSize
+        pageSize: this.pagerOptions.pageSize,
+        status: this.params.status
       }).then((res) => {
-        console.log(res.data.data)
-        if (res.data.code === 200) {
-          const list = res.data.data.map((item) => {
+        console.log(res.data)
+        if (res.code === 200) {
+          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.data.total
+          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) {
       console.log(val)
+      this.keyword = val
+      this.pagerOptions.currPage = 1
+      this.getData()
     },
-    // 琛岀偣鍑�
-    tableRowClick(row) {
-      console.log(row)
+    // 鏌ョ湅 缂栬緫
+    viewEditClick(row, val) {
       this.editConfig.visible = true
-      this.editConfig.title = "缂栬緫"
-      this.editConfig.operationTypeId = this.$route.params.id
+      this.editConfig.title = val
+      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.visible = true
       this.editConfig.title = "鏂板缓"
-      this.editConfig.operationTypeId = this.$route.params.id
-      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)
+      // }
     }
   }
 }
 </script>
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->
-<style lang="scss" scoped></style>
+<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 {
+  position: fixed;
+  background:#f8f8f9;
+  font-size: 14px;
+  width: calc(100% - 530px);
+  height: 45px;
+  line-height: 45px;
+  font-size: 18px;
+  font-weight: 700;
+  color: #171718;
+  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