From 05b72b58002a8733b8b31825ea5edabe7e279283 Mon Sep 17 00:00:00 2001
From: zuozhengqing <a13193816592@163.com>
Date: 星期五, 22 三月 2024 18:56:14 +0800
Subject: [PATCH] Merge branch 'master' of http://192.168.5.5:10010/r/web/WMS

---
 src/views/operate/allot/index.vue |  365 ++++++++++++++++++++++++++++++++++++++++------------
 1 files changed, 280 insertions(+), 85 deletions(-)

diff --git a/src/views/operate/allot/index.vue b/src/views/operate/allot/index.vue
index c846757..5704c39 100644
--- a/src/views/operate/allot/index.vue
+++ b/src/views/operate/allot/index.vue
@@ -9,27 +9,72 @@
         @searchClick="getList"
       />
     </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="content-top">
+        <div class="list-view">
+          <TableCommonView
+            ref="tableListRef"
+            :table-list="tableList"
+            @selTableCol="selTableCol"
+            @tableRowClick="topTableRowClick"
+            :selectClassRow="selectRow"
+          >
+            <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="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>
     <!-- 鏂板缓/缂栬緫 -->
@@ -43,10 +88,10 @@
 </template>
 
 <script>
-import pageMixin from "@/components/makepager/pager/mixin/pageMixin"
-import { getAllList } from "@/api/overview/overview"
+import pageMixin from "@/components/makepager/pager/mixin/pageMixin";
+import { getAllList } from "@/api/overview/overview";
 // import DetailProduct from "@/views/productManage/product/DetailProduct"
-import AddOverviewDialog from "@/views/overview/AddOverviewDialog"
+import AddOverviewDialog from "@/views/overview/AddOverviewDialog";
 
 export default {
   name: "AllotView",
@@ -55,21 +100,45 @@
   mixins: [pageMixin],
   computed: {},
   data() {
+     // 浜у搧淇℃伅
+     const productColumn = [
+      { 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" }
+    ]
     return {
       tableList: {},
-      showcol: ["璋冨嚭浣嶇疆", "璋冨叆浣嶇疆", "鑱旂郴浜�", "鏃ユ湡", "鏉ユ簮鍗曟嵁", "鍏徃", "鐘舵��"],
+      showcol: [
+        "璋冨嚭浣嶇疆",
+        "璋冨叆浣嶇疆",
+        "鑱旂郴浜�",
+        "鏃ユ湡",
+        "鏉ユ簮鍗曟嵁",
+        "鍏徃",
+        "鐘舵��",
+      ],
       searchOptions: [],
       editConfig: {
         visible: false,
         title: "鏂板缓",
-        infomation: {}
+        infomation: {},
       },
-      keyword: ""
-    }
+      keyword: "",
+      TabsIndex: "0",
+      productTableList: {},
+      showBottomCol: ["浜у搧缂栧彿", "浜у搧鍚嶇О", "浜у搧瑙勬牸", "浜у搧鍨嬪彿", "璁¢噺鍗曚綅","璋冨嚭浣嶇疆","璋冨叆浣嶇疆", "鏁伴噺"],
+      tableBottomColumn: productColumn,
+      selectRow: {}
+    };
   },
   created() {
-    this.setTable()
-    this.getData()
+    this.setTable();
+    this.getData();
   },
   methods: {
     setTable() {
@@ -79,16 +148,17 @@
         selectIndex: true,
         showcol: this.showcol,
         allcol: [],
-        tableColumn: this.setTableColumn(this.showcol)
-      }
-      let allcol = []
+        tableColumn: this.setTableColumn(this.showcol),
+      };
+      let allcol = [];
       for (let i = 0; i < this.tableList.tableColumn.length; i++) {
         if (!this.tableList.tableColumn[i].default) {
-          const label = this.tableList.tableColumn[i].label
-          allcol.push(label)
+          const label = this.tableList.tableColumn[i].label;
+          allcol.push(label);
         }
       }
-      this.tableList.allcol = allcol
+      this.tableList.allcol = allcol;
+      this.setBottomList()
     },
     setTableColumn(showcol) {
       let tableColumn = [
@@ -96,38 +166,38 @@
           label: "鍗曞彿",
           prop: "number",
           isShowColumn: true,
-          default: true
+          default: true,
         },
         {
           label: "璋冨嚭浣嶇疆",
           prop: "from",
           isShowColumn: showcol.includes("璋冨嚭浣嶇疆"),
-          default: false
+          default: false,
         },
         {
           label: "璋冨叆浣嶇疆",
           prop: "to",
           isShowColumn: showcol.includes("璋冨叆浣嶇疆"),
-          default: false
+          default: false,
         },
         {
           label: "鑱旂郴浜�",
           prop: "companyName",
           isShowColumn: showcol.includes("鑱旂郴浜�"),
-          default: false
+          default: false,
         },
         {
           label: "璐熻矗浜�",
           prop: "contacterName",
           isShowColumn: showcol.includes("璐熻矗浜�"),
-          default: false
+          default: false,
         },
         {
           label: "鏃ユ湡",
           prop: "operationDate",
           isShowColumn: showcol.includes("鏃ユ湡"),
           default: false,
-          date: true
+          date: true,
         },
         // {
         //   label: "浜у搧鍙敤鎬�",
@@ -152,7 +222,7 @@
           label: "鏉ユ簮鍗曟嵁",
           prop: "sourceNumber",
           isShowColumn: showcol.includes("鏉ユ簮鍗曟嵁"),
-          default: false
+          default: false,
         },
         // {
         //   label: "娆犲崟",
@@ -194,7 +264,7 @@
           label: "鍏ュ簱绫诲瀷",
           prop: "operationTypeName",
           isShowColumn: showcol.includes("鎿嶄綔绫诲瀷"),
-          default: false
+          default: false,
         },
         // {
         //   label: "鍏徃",
@@ -210,75 +280,200 @@
           default: false,
           status: true,
           isCallMethod: true,
-          getCallMethod: this.getStatus
-        }
-      ]
-      return tableColumn
+          getCallMethod: this.getStatus,
+        },
+      ];
+      return tableColumn;
     },
     selTableCol(val) {
-      this.showcol = val
-      this.tableList.tableColumn = this.setTableColumn(val)
+      this.showcol = val;
+      this.tableList.tableColumn = this.setTableColumn(val);
     },
     // 璇锋眰鏁版嵁
     async getData() {
       await getAllList({
         number: this.keyword,
         page: this.pagerOptions.currPage,
-        pageSize: this.pagerOptions.pageSize
+        pageSize: this.pagerOptions.pageSize,
       }).then((res) => {
         if (res.code === 200) {
           const list = res.data.map((item) => {
             return {
               ...item,
               from: item.location.jointName,
-              to: item.toLocation.name
-            }
-          })
-          this.tableList.tableInfomation = list || []
-          this.pagerOptions.totalCount = res.total
+              to: item.toLocation.name,
+            };
+          });
+          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.topTableRowClick(this.selectRow)
+            this.bottomProductData(this.selectRow)
+          }
         }
-      })
+      });
     },
     // 鎼滅储
     getList(val) {
-      console.log(val)
-      this.keyword = val
-      this.pagerOptions.currPage = 1
-      this.getData()
+      console.log(val);
+      this.keyword = val;
+      this.pagerOptions.currPage = 1;
+      this.getData();
     },
     // 鏌ョ湅 缂栬緫
     tableRowClick(row, val) {
-      console.log(row,"鏌ョ湅")
-      this.editConfig.visible = true
-      this.editConfig.title = val
-      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
-      this.editConfig.infomation = { ...row }
+      console.log(row, "鏌ョ湅");
+      this.editConfig.visible = true;
+      this.editConfig.title = val;
+      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;
+      this.editConfig.infomation = { ...row };
     },
     // 鏂板缓
     addBtnClick() {
-      this.editConfig.visible = true
-      this.editConfig.title = "鏂板缓"
+      this.editConfig.visible = true;
+      this.editConfig.title = "鏂板缓";
     },
     // 鐘舵��
     getStatus(val) {
-      return val === 1 ? "鑽夌" : val === 3 ? "灏辩华" :val===4? "瀹屾垚": "鍙栨秷"
-    }
-  }
-}
+      return val === 1
+        ? "鑽夌"
+        : val === 3
+        ? "灏辩华"
+        : val === 4
+        ? "瀹屾垚"
+        : "鍙栨秷";
+    },
+    // top 琛岀偣鍑�
+    topTableRowClick(row) {
+      this.selectRow = row
+      this.bottomProductData(this.selectRow)
+    },
+    // 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)
+        }
+      })
+    },
+    getTab(tab) {
+      this.TabsIndex = tab
+    },
+    selBottomTableCol(val) {
+      this.showBottomCol = val
+      this.productTableList.tableColumn = this.setColumnVisible(val, this.tableBottomColumn)
+    },
+    // bottom浜у搧淇℃伅鏁版嵁澶勭悊
+    bottomProductData(arr) {
+      const list = arr.details.map((item) => {
+        return {
+          ...item,
+          productName: item.product.name,
+          unit: item.product.unit,
+          location:arr.location.name,
+          toLocation:arr.toLocation.name,
+        }
+      })
+      this.productTableList.tableInfomation = list
+    },
+  },
+};
 </script>
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+.body {
+  box-sizing: border-box;
+  padding: 10px 20px;
+  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);
+    }
+  }
+  .btn-pager {
+    display: flex;
+    margin-top: 0px;
+    .page {
+      margin-left: auto;
+    }
+  }
+  .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);
+    }
+  }
+}
+</style>

--
Gitblit v1.8.0