From 9276baaf6664e55e217253caca2151a10640764d Mon Sep 17 00:00:00 2001
From: zzq <a13193816592@163.com>
Date: 星期三, 27 九月 2023 11:31:46 +0800
Subject: [PATCH] “报表表格求和”

---
 src/views/reportForm/inventoryReport/index.vue |   23 +---
 src/components/makepager/TableCommonView.vue   |  179 ++++++++++++++++++++++++++---------
 src/views/reportForm/locationReport/index.vue  |   90 ++++++++---------
 3 files changed, 179 insertions(+), 113 deletions(-)

diff --git a/src/components/makepager/TableCommonView.vue b/src/components/makepager/TableCommonView.vue
index 7c023f7..2c9631a 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" v-loading="loading">
+  <div :class="{'table-view':true,'table_height':!showSummary}" v-loading="loading">
     <el-table
       ref="table"
       border
@@ -19,9 +19,18 @@
       :default-expand-all="tableList.isDefaultExpandAll"
       :tree-props="{ children: 'child', hasChildren: 'hasChildren' }"
       :span-method="objectSpanMethod"
+      :summary-method="getSummaries"
+      :show-summary="showSummary"
     >
-      <el-table-column v-if="tableList.selectBox" type="selection" width="40"> </el-table-column>
-      <el-table-column v-if="tableList.selectIndex" type="index" label="搴忓彿" width="50"> </el-table-column>
+      <el-table-column v-if="tableList.selectBox" type="selection" width="40">
+      </el-table-column>
+      <el-table-column
+        v-if="tableList.selectIndex"
+        type="index"
+        label="搴忓彿"
+        width="50"
+      >
+      </el-table-column>
       <el-table-column
         v-for="(item, i) in tableList.tableColumn"
         :key="i"
@@ -34,7 +43,9 @@
         v-if="item.isShowColumn"
       >
         <template slot-scope="scope">
-          <span v-if="item.price">{{ "锟�" + number_format(scope.row[item.prop], 2, ".", ",") }}</span>
+          <span v-if="item.price">{{
+            "锟�" + number_format(scope.row[item.prop], 2, ".", ",")
+          }}</span>
           <!-- 鐘舵�佹樉绀� -->
           <div v-else-if="item.status">
             <span
@@ -43,21 +54,30 @@
                 greenSlot: scope.row.status == '4',
                 redSlot: scope.row.status == '5',
                 blueSlot: scope.row.status == '3',
-                graySlot: scope.row.status == '1'
+                graySlot: scope.row.status == '1',
               }"
               >{{
-                item.isCallMethod ? item.getCallMethod(scope.row[item.prop], scope.row) : scope.row[item.prop]
+                item.isCallMethod
+                  ? item.getCallMethod(scope.row[item.prop], scope.row)
+                  : scope.row[item.prop]
               }}</span
             >
           </div>
           <!-- 璋冪敤鏂规硶鏄剧ず鏂囧瓧 -->
           <div v-else-if="item.isCallMethod">
-            <span>{{ item.getCallMethod(scope.row[item.prop], scope.row) }}</span>
+            <span>{{
+              item.getCallMethod(scope.row[item.prop], scope.row)
+            }}</span>
           </div>
           <!-- 灏忎簬褰撳墠鏃堕棿鏄剧ず涓嶅悓棰滆壊 -->
           <span
             v-else-if="item.date"
-            :style="{ color: new Date().getTime() > new Date(scope.row[item.prop]).getTime() ? '#D23F3A' : '#606266' }"
+            :style="{
+              color:
+                new Date().getTime() > new Date(scope.row[item.prop]).getTime()
+                  ? '#D23F3A'
+                  : '#606266',
+            }"
             >{{ timeAgo(scope.row[item.prop]) }}</span
           >
           <div v-else-if="item.conversion">
@@ -70,10 +90,18 @@
             >{{ scope.row[item.prop] }}</span
           >
           <span v-else-if="item.propType == 'mulitple'">
-            {{ scope.row[item.prop][item.propTwo] ? scope.row[item.prop][item.propTwo] : "--" }}
+            {{
+              scope.row[item.prop][item.propTwo]
+                ? scope.row[item.prop][item.propTwo]
+                : "--"
+            }}
           </span>
           <span :class="item.className ? item.className : ''" v-else>{{
-            scope.row[item.prop] ? scope.row[item.prop] : scope.row[item.prop] === 0 ? scope.row[item.prop] : "--"
+            scope.row[item.prop]
+              ? scope.row[item.prop]
+              : scope.row[item.prop] === 0
+              ? scope.row[item.prop]
+              : "--"
           }}</span>
         </template>
       </el-table-column>
@@ -85,15 +113,22 @@
     <div class="overSpread1" v-show="iscolopen" @click="onMaskClick"></div>
     <div v-if="showCheckcol" class="styleBtn">
       <i @click="checkcol()" class="label">...</i>
-      <el-checkbox-group v-model="showcolList" v-show="iscolopen" class="checkbox-group" @change="selCeckBoxList">
-        <el-checkbox v-for="item in tableList.allcol" :label="item" :key="item">{{ item }} </el-checkbox>
+      <el-checkbox-group
+        v-model="showcolList"
+        v-show="iscolopen"
+        class="checkbox-group"
+        @change="selCeckBoxList"
+      >
+        <el-checkbox v-for="item in tableList.allcol" :label="item" :key="item"
+          >{{ item }}
+        </el-checkbox>
       </el-checkbox-group>
     </div>
   </div>
 </template>
 
 <script>
-import { timeago } from "@/common/config/index"
+import { timeago } from "@/common/config/index";
 export default {
   name: "TableCommonView",
   props: {
@@ -106,119 +141,163 @@
           showStyle: true,
           tableInfomation: [], // 鎺ュ彛杩斿洖鏁版嵁
           showcol: [],
+          countcol: [],
           allcol: [],
           highlight: false,
           tableColumn: [
             // table琛ㄥ崟
-            { label: "", prop: "", min: 200, tooltip: true }
-          ]
-        }
+            { label: "", prop: "", min: 200, tooltip: true },
+          ],
+        };
       },
       showcol: {
         typeof: Array,
-        default: () => []
-      }
+        default: () => [],
+      },
     },
     // 鍚堝苟鍗曞厓鏍�
     rowData: {
       type: Array,
       default: () => {
-        return []
-      }
+        return [];
+      },
     },
     // 鍔犺浇鐨刲oading
     loading: {
       type: Boolean,
-      default: false
+      default: false,
     },
     // 閫変腑鐨勬牱寮�
     selectClassRow: {
       type: Object,
       default: () => {
-        return {}
-      }
+        return {};
+      },
     },
     showCheckcol: {
       type: Boolean,
-      default: true
+      default: true,
+    },
+    showSummary:{
+      type:Boolean,
+      default:false
     }
   },
   data() {
     return {
       iscolopen: false,
-      showcolList: this.tableList.showcol
-    }
+      showcolList: this.tableList.showcol,
+    };
   },
   watch: {},
   computed: {},
   beforeUpdate() {},
   methods: {
     onMaskClick() {
-      this.iscolopen = false
+      this.iscolopen = false;
     },
     // 鍚堝苟鍗曞厓鏍�
     objectSpanMethod({ row, column, rowIndex, columnIndex }) {
-      row
-      column
+      row;
+      column;
       if (this.rowData && this.rowData.length > 0) {
         // 浜у搧BOM 琛ㄦ牸鐗规畩澶勭悊 鍚堝苟鍗曞厓鏍�
         if (columnIndex < 5 || columnIndex == 9) {
-          const _row = this.rowData[rowIndex]
-          const _col = _row > 0 ? 1 : 0
+          const _row = this.rowData[rowIndex];
+          const _col = _row > 0 ? 1 : 0;
           return {
             rowspan: _row,
-            colspan: _col
-          }
+            colspan: _col,
+          };
         }
       }
     },
     tableRowClick(row) {
-      this.$emit("tableRowClick", row)
+      this.$emit("tableRowClick", row);
     },
     handleReserve(row) {
-      return row._id ? row._id : row.id
+      return row._id ? row._id : row.id;
     },
     handleSelectionChange(val) {
-      this.$emit("getSelectArray", val)
+      this.$emit("getSelectArray", val);
     },
     // 鍏叡璇︽儏
     selCommonClick(row) {
-      this.$emit("selCommonClick", row)
+      this.$emit("selCommonClick", row);
     },
     // 閫夋嫨鍒�
     checkcol() {
-      this.iscolopen = !this.iscolopen
+      this.iscolopen = !this.iscolopen;
     },
     closeCheckbox() {
-      let label = document.querySelector(".label")
+      let label = document.querySelector(".label");
       if (label) {
-        this.iscolopen = false
+        this.iscolopen = false;
       }
     },
     selCeckBoxList(val) {
-      this.$emit("selTableCol", val)
+      this.$emit("selTableCol", val);
     },
     // 鍗曢�夎鐩稿叧
     tableRowClassName({ row }) {
       if (Object.keys(this.selectClassRow).length > 0) {
         if (row.id == this.selectClassRow.id) {
-          return "onSelect"
+          return "onSelect";
         }
       }
-      this.$emit("tableRowClassName", row)
+      this.$emit("tableRowClassName", row);
     },
     timeAgo(val) {
-      return timeago(val)
-    }
-  }
-}
+      return timeago(val);
+    },
+    //姹傚拰
+    getSummaries(param) {
+      if(this.tableList.countcol&&this.tableList.countcol.length>0){
+      const { columns, data } = param;
+      const sums = [];
+      columns.forEach((column, index) => {
+        if (index === 0) {
+          sums[index] = " ";
+          return;
+        }
+        this.tableList.countcol.forEach((countcols,idx) => {
+          if (column.label === countcols) {
+            const values = data.map((item) => Number(item[column.property]));
+            if (!values.every((value) => isNaN(value))) {
+              sums[index] = values.reduce((prev, curr) => {
+                const value = Number(curr);
+                if (!isNaN(value)) {
+                  return prev + curr;
+                } else {
+                  return prev;
+                }
+              }, 0);
+              sums[index] = sums[index].toLocaleString();
+              // console.log(sums,"sums")
+            } else {
+              sums[index] = "";
+            }
+          } else {
+            return;
+          }
+        });
+      });
+      return sums;
+      }else{
+      }
+    },
+    
+  },
+};
 </script>
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style lang="scss" scoped>
+.table_height{
+  height: 100%;
+}
 .table-view {
   position: relative;
-  height: 100%;
   .blue {
     width: 70px;
     text-align: center;
@@ -296,5 +375,9 @@
     border-top-right-radius: 12px;
     overflow: auto;
   }
+  .el-table__body-wrapper{
+    // height: ;
+  }
 }
+
 </style>
diff --git a/src/views/reportForm/inventoryReport/index.vue b/src/views/reportForm/inventoryReport/index.vue
index be0d63d..6acb2e2 100644
--- a/src/views/reportForm/inventoryReport/index.vue
+++ b/src/views/reportForm/inventoryReport/index.vue
@@ -30,6 +30,7 @@
             :table-list="tableList"
             @selTableCol="selTableCol"
             @tableRowClick="tableRowClick"
+            :showSummary="true"
           >
             <template slot="tableButton">
               <el-table-column
@@ -129,6 +130,7 @@
       ],
       tableList: {},
       showcol: ["浜у搧绫诲埆", "鍗曚綅鎴愭湰", "鎬讳环鍊�", "鍏ュ簱", "鍑哄簱"],
+      countcol:["鎬讳环鍊�","鍦ㄥ簱","鍙敤搴撳瓨","鍏ュ簱","鍑哄簱","棰勬祴"],
       searchOptions: [],
       commonDetail: {
         visible: false,
@@ -154,6 +156,7 @@
         tableInfomation: [],
         selectBox: true,
         showcol: this.showcol,
+        countcol:this.countcol,
         allcol: [],
         tableColumn: this.setTableColumn(this.showcol),
       };
@@ -172,7 +175,6 @@
         {
           label: "浜у搧",
           prop: "product",
-          isShowColumn: true,
           default: true,
           width:300,
           
@@ -181,66 +183,53 @@
         {
           label: "浜у搧绫诲埆",
           prop: "category",
-          isShowColumn: true,
           default: true,
           isShowColumn: showcol.includes("浜у搧绫诲埆"),
         },
         {
           label: "鍗曚綅鎴愭湰",
           prop: "cost",
-          isShowColumn: true,
           default: false,
           isShowColumn: showcol.includes("鍗曚綅鎴愭湰"),
         },
         {
           label: "鎬讳环鍊�",
           prop: "totalPrices",
-          isShowColumn: true,
           default: false,
           isShowColumn: showcol.includes("鎬讳环鍊�"),
         },
         {
           label: "鍦ㄥ簱",
           prop: "inStore",
-          isShowColumn: true,
           default: true,
         },
         {
           label: "鍙敤搴撳瓨",
           prop: "availableStore",
-          isShowColumn: true,
           default: true,
         },
         {
           label: "鍏ュ簱",
           prop: "inStorage",
-          isShowColumn: true,
           default: false,
           isShowColumn: showcol.includes("鍏ュ簱"),
         },
         {
           label: "鍑哄簱",
           prop: "toStore",
-          isShowColumn: true,
           isShowColumn: showcol.includes("鍑哄簱"),
           default: false,
         },
         {
           label: "棰勬祴",
           prop: "forecast",
-          isShowColumn: false,
           isShowColumn: showcol.includes("棰勬祴"),
           default: false,
         },
         {
           label: "鍗曚綅",
           prop: "unit",
-          isShowColumn: true,
           default: true,
-          // price:true
-          // status: true,
-          // propType: "mulitple",
-          // conversion: true,
         },
       ];
       return tableColumn;
@@ -292,12 +281,14 @@
     },
     // 鍘嗗彶
     handleHistoryClick(row) {
-      console.log(row, "two");
+      this.$router.push('/operate/allot')
     },
     // 琛ヨ揣
     handleAddGoods(row) {},
     // 浣嶇疆
-    handleLocation() {},
+    handleLocation() {
+      this.$router.push('/reportForm/locationReport')
+    },
     // 棰勬祴
     handleForecast() {},
   },
diff --git a/src/views/reportForm/locationReport/index.vue b/src/views/reportForm/locationReport/index.vue
index 3de4f88..c2c9c46 100644
--- a/src/views/reportForm/locationReport/index.vue
+++ b/src/views/reportForm/locationReport/index.vue
@@ -18,13 +18,10 @@
         :table-list="tableList"
         @selTableCol="selTableCol"
         @tableRowClick="tableRowClick"
+        :showSummary="true"
       >
         <template slot="tableButton">
-          <el-table-column
-            label="鎿嶄綔"
-            width="210"
-            align="center"
-          >
+          <el-table-column label="鎿嶄綔" width="210" align="center">
             <template slot-scope="scope">
               <span @click="handleHistoryClick(scope.row)">
                 <i class="el-icon-refresh-left"></i>
@@ -70,30 +67,36 @@
     return {
       tableList: {},
       showcol: ["瀛樺偍绫诲埆", "浜у搧绫诲埆", "棰勭暀鏁伴噺", "浠峰��"],
+      // countcol: [
+      //   { label: "鍦ㄥ簱鏁伴噺", unit: "" },
+      //   { label: "棰勭暀鏁伴噺", unit: "" },
+      //   { label: "浠峰��", unit: "锟�" },
+      // ],
+      countcol:["鍦ㄥ簱鏁伴噺","棰勭暀鏁伴噺","浠峰��"],
       testArr: [
         {
-          product:"HC/閿�鍞尯/b鍖�",
-          category:"涓濈桓鍒跺搧/鐪熶笣鐫¤",
-          cost:"800.00",
-          totalPrices:"0.00",
-          inStore:"0.00",
-          availableStore:"0.00",
-          inStorage:"0.00",
-          toStore:"0.00",
-          forecast:"0.00",
-          unit:"浠�"
+          product: "HC/閿�鍞尯/b鍖�",
+          category: "涓濈桓鍒跺搧/鐪熶笣鐫¤",
+          cost: "800.00",
+          totalPrices: "2000.00",
+          inStore: "00.00",
+          availableStore: "200.00",
+          inStorage: "00.00",
+          toStore: 65432.0,
+          forecast: "0.00",
+          unit: "浠�",
         },
         {
-          product:"HC閿�鍞尯/A鍖�",
-          category:"涓濈桓鍒跺搧/鐪熶笣鐫¤",
-          cost:"9980.00",
-          totalPrices:"0.00",
-          inStore:"0.00",
-          availableStore:"0.00",
-          inStorage:"0.00",
-          toStore:"0.00",
-          forecast:"0.00",
-          unit:"浠�"
+          product: "HC閿�鍞尯/A鍖�",
+          category: "涓濈桓鍒跺搧/閲戜笣鐫¤",
+          cost: "9980.00",
+          totalPrices: "00.00",
+          inStore: "00.00",
+          availableStore: "20.00",
+          inStorage: "0.00",
+          toStore: 32618.0,
+          forecast: "0.00",
+          unit: "浠�",
         },
       ],
       searchOptions: [],
@@ -118,9 +121,10 @@
   methods: {
     setTable() {
       this.tableList = {
-        tableInfomation:[],
+        tableInfomation: [],
         selectBox: true,
         showcol: this.showcol,
+        countcol: this.countcol,
         allcol: [],
         tableColumn: this.setTableColumn(this.showcol),
       };
@@ -132,7 +136,7 @@
         }
       }
       this.tableList.allcol = allcol;
-      this.tableList.tableInfomation=this.testArr
+      this.tableList.tableInfomation = this.testArr;
     },
     setTableColumn(showcol) {
       let tableColumn = [
@@ -151,40 +155,35 @@
         {
           label: "浣嶇疆",
           prop: "product",
-          isShowColumn: true,
           default: true,
         },
 
         {
           label: "瀛樺偍绫诲埆",
           prop: "category",
-          isShowColumn: true,
           default: false,
           isShowColumn: showcol.includes("瀛樺偍绫诲埆"),
         },
         {
           label: "浜у搧",
           prop: "cost",
-          isShowColumn: true,
           default: true,
         },
         {
           label: "浜у搧绫诲埆",
           prop: "totalPrices",
-          isShowColumn: true,
           default: false,
           isShowColumn: showcol.includes("浜у搧绫诲埆"),
         },
         {
           label: "鍦ㄥ簱鏁伴噺",
           prop: "inStore",
-          isShowColumn: true,
           default: true,
         },
         {
           label: "棰勭暀鏁伴噺",
           prop: "availableStore",
-          // isShowColumn: true,
+          sortable: true,
           default: false,
           isShowColumn: showcol.includes("棰勭暀鏁伴噺"),
         },
@@ -199,9 +198,6 @@
           prop: "toStore",
           width: 120,
           default: false,
-          // status: true,
-          // isCallMethod: true,
-          // getCallMethod: this.getStatus,
           isShowColumn: showcol.includes("浠峰��"),
         },
       ];
@@ -240,7 +236,7 @@
     // 琛岀偣鍑�
     tableRowClick(row) {
       console.log(row);
-      this.editConfig.visible = true;
+      // this.editConfig.visible = true;
       this.editConfig.title = "鏌ョ湅";
       this.editConfig.infomation = { ...row };
     },
@@ -254,13 +250,9 @@
       return val === 1 ? "鑽夌" : val === 3 ? "灏辩华" : "瀹屾垚";
     },
     // 鍘嗗彶
-    handleHistoryClick(){
-
-    },
+    handleHistoryClick() {},
     // 琛ヨ揣
-    handleAddGoods(){
-
-    }
+    handleAddGoods() {},
   },
 };
 </script>
@@ -271,12 +263,12 @@
   height: 100%;
   background: #e6ecf2;
   padding: 10px;
-// .top {
-//   margin-bottom: 20px;
-//   height: 60px;
-//   background: #fff;
-//   border-radius: 8px;
-// }
+  // .top {
+  //   margin-bottom: 20px;
+  //   height: 60px;
+  //   background: #fff;
+  //   border-radius: 8px;
+  // }
   .list-view {
     height: calc(100% - 150px);
   }

--
Gitblit v1.8.0