From 059dd10838d3055cac8853087305df41926fe5b1 Mon Sep 17 00:00:00 2001
From: yangfeng <wanwan926_4@163.com>
Date: 星期五, 22 三月 2024 10:41:05 +0800
Subject: [PATCH] 概述下调拨、出入库列表页改为上下结构

---
 src/assets/style/reset-element.scss          |   14 +-
 src/views/overview/OverviewListView.vue      |  251 +++++++++++++++++++++++++++++++++++++++++++------
 src/components/makepager/TableCommonView.vue |   32 +++---
 3 files changed, 242 insertions(+), 55 deletions(-)

diff --git a/src/assets/style/reset-element.scss b/src/assets/style/reset-element.scss
index 61d1fe2..35ceb8a 100644
--- a/src/assets/style/reset-element.scss
+++ b/src/assets/style/reset-element.scss
@@ -43,8 +43,8 @@
   // background:#2c60c5;
 }
 
-.color_F56C6C{
-  color:#F56C6C;
+.color_F56C6C {
+  color: #f56c6c;
 }
 // .el-menu-item {
 //   margin: 8px;
@@ -59,8 +59,8 @@
 //   background-position: center;
 //   width: 160px !important;
 // }
-.line_height_30px{
-  line-height:30px;
+.line_height_30px {
+  line-height: 30px;
 }
 
 .el-button--primary {
@@ -83,4 +83,8 @@
   color: #fff;
   background-color: #2a78fb;
   border-color: #2a78fb;
-}
\ No newline at end of file
+}
+// 棰滆壊
+.el-table .onSelect {
+  background: #ebf2ff;
+}
diff --git a/src/components/makepager/TableCommonView.vue b/src/components/makepager/TableCommonView.vue
index 56dc900..9fc74a7 100644
--- a/src/components/makepager/TableCommonView.vue
+++ b/src/components/makepager/TableCommonView.vue
@@ -1,6 +1,6 @@
 <!-- eslint-disable vue/no-use-v-if-with-v-for -->
 <template>
-  <div :class="{ 'table-view': true, table_height: !showSummary }" v-loading="loading">
+  <div class="table-view" v-loading="loading">
     <el-table
       ref="table"
       border
@@ -43,10 +43,10 @@
             <span
               class="Badge"
               :class="{
-                greenSlot: scope.row.status == '4'||scope.row.status ==  '瀹屾垚',
+                greenSlot: scope.row.status == '4' || scope.row.status == '瀹屾垚',
                 redSlot: scope.row.status == '5',
-                blueSlot: scope.row.status == '3'||scope.row.status ==  '灏辩华',
-                graySlot: scope.row.status == '1',
+                blueSlot: scope.row.status == '3' || scope.row.status == '灏辩华',
+                graySlot: scope.row.status == '1'
               }"
               >{{
                 item.isCallMethod ? item.getCallMethod(scope.row[item.prop], scope.row) : scope.row[item.prop]
@@ -116,7 +116,7 @@
           highlight: false,
           tableColumn: [
             // table琛ㄥ崟
-            { label: "", prop: "", min: 200, tooltip: true,textAlign:"center"}
+            { label: "", prop: "", min: 200, tooltip: true, textAlign: "center" }
           ]
         }
       },
@@ -239,11 +239,11 @@
                   if (!isNaN(value)) {
                     return prev + curr
                   } else {
-                    return prev 
+                    return prev
                   }
                 }, 0)
-                let unitIndex = this.tableList.tableColumn.findIndex(obj => obj.label === column.label);  
-                sums[index]=this.tableList.tableColumn[unitIndex].unit+sums[index]
+                let unitIndex = this.tableList.tableColumn.findIndex((obj) => obj.label === column.label)
+                sums[index] = this.tableList.tableColumn[unitIndex].unit + sums[index]
               } else {
                 sums[index] = ""
               }
@@ -348,10 +348,10 @@
     border-top-left-radius: 12px;
     border-top-right-radius: 12px;
     overflow: auto;
-    .exceed_width{
-      width: 100%;  
-      white-space: nowrap;  
-      overflow: hidden;  
+    .exceed_width {
+      width: 100%;
+      white-space: nowrap;
+      overflow: hidden;
       text-overflow: ellipsis;
     }
   }
@@ -383,13 +383,13 @@
     height: 35px;
     text-align: center;
   }
-  .el-table__body-wrapper{
+  .el-table__body-wrapper {
     height: unset !important;
   }
-  .el-table__cell.is-left{
+  .el-table__cell.is-left {
     text-align: left !important;
   }
-  .el-table__cell.is-right{
+  .el-table__cell.is-right {
     text-align: right !important;
   }
 }
@@ -402,7 +402,7 @@
   background: rgba(0, 0, 0, 0);
   z-index: 10;
 }
-.el-table__cell{
+.el-table__cell {
   text-align: unset !important;
 }
 </style>
diff --git a/src/views/overview/OverviewListView.vue b/src/views/overview/OverviewListView.vue
index 974ba53..36c3d35 100644
--- a/src/views/overview/OverviewListView.vue
+++ b/src/views/overview/OverviewListView.vue
@@ -14,27 +14,61 @@
         @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 && scope.row.status !== 5"
-                  @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>
     <!-- 鏂板缓/缂栬緫 -->
@@ -61,6 +95,15 @@
   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: "amount" }
+    ]
     return {
       tableList: {},
       showcol: ["浠撳簱浣嶇疆", "璋冨嚭浣嶇疆", "璋冨叆浣嶇疆", "鑱旂郴浜�", "鏃ユ湡", "鏉ユ簮鍗曟嵁", "鐘舵��"],
@@ -83,7 +126,12 @@
       toLabel: "",
       addName: "",
       searchTaskMap: [],
-      numberLabel: "鍗曞彿"
+      numberLabel: "鍗曞彿",
+      TabsIndex: "0",
+      productTableList: {},
+      showBottomCol: ["浜у搧缂栧彿", "浜у搧鍚嶇О", "浜у搧瑙勬牸", "浜у搧鍨嬪彿", "璁¢噺鍗曚綅", "鏁伴噺"],
+      tableBottomColumn: productColumn,
+      selectRow: {}
     }
   },
   created() {
@@ -140,6 +188,7 @@
         }
       }
       this.tableList.allcol = allcol
+      this.setBottomList()
     },
     setTableColumn(showcol) {
       let tableColumn = [
@@ -253,8 +302,29 @@
           })
           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) => {
+        return {
+          ...item,
+          productName: item.product.name,
+          unit: item.product.unit
+        }
+      })
+      this.productTableList.tableInfomation = list
+    },
+    // top 琛岀偣鍑�
+    tableRowClick(row) {
+      this.selectRow = row
+      this.bottomProductData(this.selectRow)
     },
     // 鎼滅储
     getList(val) {
@@ -264,26 +334,26 @@
       this.getData()
     },
     // 鏌ョ湅 缂栬緫
-    tableRowClick(row, val) {
+    viewEditClick(row, val) {
       this.editConfig.visible = true
       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.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.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.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.locationID = row.location.jointName
+      row.locationId = row.location.value
+
       // row.tolocationId=row.tolocation.value
       this.editConfig.infomation = { ...row }
     },
@@ -306,6 +376,47 @@
     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)
+      // }
     }
   }
 }
@@ -313,6 +424,69 @@
 
 <!-- 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 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);
+      }
+    }
+    .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;
@@ -326,4 +500,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