From 8191562f28c525373941af4638c30c8f8e74c245 Mon Sep 17 00:00:00 2001
From: yangfeng <wanwan926_4@163.com>
Date: 星期三, 16 八月 2023 12:12:10 +0800
Subject: [PATCH] bug修复

---
 src/components/makepager/CommonFormTableView.vue |  219 ++++++++++++++++++++++++++++++++++++++++--------------
 1 files changed, 161 insertions(+), 58 deletions(-)

diff --git a/src/components/makepager/CommonFormTableView.vue b/src/components/makepager/CommonFormTableView.vue
index 125520c..01f734a 100644
--- a/src/components/makepager/CommonFormTableView.vue
+++ b/src/components/makepager/CommonFormTableView.vue
@@ -1,72 +1,72 @@
 <template>
   <div class="page-view">
     <el-form ref="form" :model="productTableList" :show-message="false" label-position="right">
-      <el-table :data="productTableList.tableData" style="width: 100%">
-        <el-table-column prop="id" label="#" width="30"></el-table-column>
-        <el-table-column prop="productName" label="浜у搧鍚嶇О">
-          <template slot-scope="scope">
-            <el-form-item
-              label=" "
-              :prop="'tableData.' + scope.$index + '.productName'"
-              :rules="[{ required: true, message: '杈撳叆涓嶈兘涓虹┖' }]"
-            >
-              <el-input v-model.trim="scope.row.productName" maxlength="50" size="mini" style="width: 70px"></el-input>
-            </el-form-item>
+      <el-table
+        :data="productTableList.tableData"
+        :show-summary="showSummary.show"
+        :summary-method="getSummaries"
+        :span-method="arraySpanMethod"
+        style="width: 100%"
+      >
+        <el-table-column
+          v-for="(item, i) in productTableList.tableColumn"
+          :key="i"
+          :prop="item.prop"
+          :label="item.label"
+          :width="item.width"
+          :min-width="item.min"
+          align="right"
+        >
+          <!-- 琛ㄥご鏍峰紡 -->
+          <template slot="header">
+            <span v-if="item.isRequird" style="color: #f56c6c">*</span>
+            <span>{{ item.label }}</span>
           </template>
-        </el-table-column>
-        <el-table-column prop="productNumber" label="浜у搧缂栧彿"></el-table-column>
-        <el-table-column prop="startDate" label="鏈嶅姟寮�濮嬫棩" width="140">
+          <!-- column鏍峰紡 -->
           <template slot-scope="scope">
-            <el-form-item
-              label=" "
-              :prop="'tableData.' + scope.$index + '.startDate'"
-              :rules="[{ required: true, message: '杈撳叆涓嶈兘涓虹┖' }]"
-            >
-              <el-date-picker
-                v-model="scope.row.startDate"
-                size="mini"
-                type="date"
-                placeholder="閫夋嫨鏃ユ湡"
-                style="width: 90px"
+            <template v-if="!detailEnter">
+              <el-form-item
+                v-if="item.input"
+                label=" "
+                :prop="'tableData.' + scope.$index + '.' + item.prop"
+                :rules="[{ required: item.isRequird ? true : false, message: '杈撳叆涓嶈兘涓虹┖' }]"
               >
-              </el-date-picker>
-            </el-form-item>
-          </template>
-        </el-table-column>
-        <el-table-column prop="endDate" label="鏈嶅姟鍒版湡鏃�" width="140">
-          <template slot-scope="scope">
-            <el-form-item
-              label=" "
-              :prop="'tableData.' + scope.$index + '.endDate'"
-              :rules="[{ required: true, message: '杈撳叆涓嶈兘涓虹┖' }]"
-            >
-              <el-date-picker
-                v-model="scope.row.endDate"
-                size="mini"
-                type="date"
-                placeholder="閫夋嫨鏃ユ湡"
-                style="width: 90px"
+                <el-input v-model.trim="scope.row[item.prop]" maxlength="50" size="mini" disabled></el-input>
+              </el-form-item>
+              <el-form-item
+                v-else-if="item.date"
+                label=" "
+                :prop="'tableData.' + scope.$index + '.' + item.prop"
+                :rules="[{ required: item.isRequird ? true : false, message: '杈撳叆涓嶈兘涓虹┖' }]"
               >
-              </el-date-picker>
-            </el-form-item>
+                <!-- <el-input v-model.trim="scope.row[item.prop]" maxlength="50" size="mini"></el-input> -->
+                <el-date-picker v-model="scope.row[item.prop]" type="date" size="mini" style="width: 110px" disabled>
+                </el-date-picker>
+              </el-form-item>
+              <span v-else>{{ scope.row[item.prop] }}</span>
+            </template>
+            <span v-else>{{ scope.row[item.prop] }}</span>
           </template>
         </el-table-column>
-        <el-table-column prop="number" label="鏁伴噺"></el-table-column>
-        <el-table-column prop="" label="鍚◣鍗曚环"> </el-table-column>
-        <el-table-column prop="" label="涓嶅惈绋庡崟浠�"> </el-table-column>
-        <el-table-column prop="" label="鎶樻墸鐜�(%)"></el-table-column>
-        <el-table-column prop="" label="鎶樻墸棰�"> </el-table-column>
-        <el-table-column prop="" label="绋�(閿�鍞�)"> </el-table-column>
-        <el-table-column prop="" label="瀹為檯鍚◣鍗曚环"></el-table-column>
-        <el-table-column prop="" label="浠风◣鍚堣"> </el-table-column>
-        <el-table-column prop="" label="鎻忚堪"> </el-table-column>
       </el-table>
     </el-form>
-    <div style="margin: 10px">
-      <el-button size="small" type="primary">鏂板</el-button>
-      <el-button size="small" type="primary">瀵煎叆鏄庣粏</el-button>
-      <el-button size="small" type="primary">娓呯┖</el-button>
-      <el-button size="small" type="primary">閲嶇畻</el-button>
+    <div v-if="!detailEnter" style="margin: 10px">
+      <el-button size="small" type="primary" disabled>鏂板</el-button>
+      <el-button size="small" type="primary" disabled>瀵煎叆鏄庣粏</el-button>
+      <el-button size="small" type="primary" disabled>娓呯┖</el-button>
+      <el-button size="small" type="primary" disabled>閲嶇畻</el-button>
+    </div>
+    <div v-if="showSummary.total || showSummary.refundable" style="height: 42px; line-height: 42px">
+      <el-row :gutter="10">
+        <el-col v-if="showSummary.total" :span="2" :offset="22">
+          <span style="font-weight: bold">鍚堣</span>
+          <span style="margin-left: 10px">0.00</span>
+        </el-col>
+        <el-col v-if="showSummary.refundable" :span="2" :offset="22">
+          <span style="font-weight: bold">搴旈��娆�</span>
+          <span style="margin-left: 10px">0.00</span>
+        </el-col>
+      </el-row>
     </div>
   </div>
 </template>
@@ -75,6 +75,10 @@
 export default {
   name: "CommmonFormTableView",
   props: {
+    detailEnter: {
+      type: Boolean,
+      default: false
+    },
     productTableList: {
       type: Object,
       default: () => {
@@ -84,6 +88,18 @@
             // table琛ㄥ崟
             { label: "", prop: "", min: 200, tooltip: true }
           ]
+        }
+      }
+    },
+    showSummary: {
+      type: Object,
+      default: () => {
+        return {
+          show: false,
+          total: false,
+          refundable: false,
+          sumProp: [],
+          mergeNumber: 1
         }
       }
     }
@@ -105,6 +121,76 @@
     },
     handleSelectionChange(val) {
       this.$emit("getSelectArray", val)
+    },
+    // 琛屽悎骞�
+    arraySpanMethod() {
+      if (this.showSummary.show) {
+        this.$nextTick(() => {
+          if (this.$refs.table) {
+            var current = this.$refs.table.querySelector(".el-table__footer-wrapper").querySelector(".el-table__footer")
+            var cell = current.rows[0].cells
+            for (let i = 0; i < this.showSummary.mergeNumber; i++) {
+              cell[i].style.display = "none"
+            }
+            cell[this.showSummary.mergeNumber].classList.remove("is-left")
+            cell[this.showSummary.mergeNumber].colSpan = this.showSummary.mergeNumber.toString()
+          }
+        })
+      }
+    },
+    // 鍚堣
+    getSummaries(param) {
+      if (this.showSummary.show) {
+        const { columns, data } = param
+        const sums = []
+        columns.forEach((column, index) => {
+          if (index === this.showSummary.mergeNumber) {
+            sums[index] = "灏忚"
+          }
+          const values = data.map((item) => Number(item[column.property]))
+          // if (column.property === this.showSummary.sumProp) {
+          if (this.showSummary.sumProp.includes(column.property)) {
+            sums[index] = values.reduce((prev, curr) => {
+              const value = Number(curr)
+              if (!isNaN(value)) {
+                return this.number_format(prev + curr, 2, ".", ",")
+              } else {
+                return this.number_format(prev, 2, ".", ",")
+              }
+            }, 0)
+            sums[index]
+          }
+        })
+        return sums
+      }
+    },
+    // 鏁板瓧鎹㈣涓洪噾棰濇樉绀烘牸寮�
+    number_format(number, decimals, dec_point, thousands_sep) {
+      decimals = 2 //杩欓噷榛樿璁剧疆淇濈暀涓や綅灏忔暟锛屼篃鍙互娉ㄩ噴杩欏彞閲囩敤浼犲叆鐨勫弬鏁�
+      /*
+       * 鍙傛暟璇存槑锛�
+       * number锛氳鏍煎紡鍖栫殑鏁板瓧
+       * decimals锛氫繚鐣欏嚑浣嶅皬鏁�
+       * dec_point锛氬皬鏁扮偣绗﹀彿
+       * thousands_sep锛氬崈鍒嗕綅绗﹀彿
+       * */
+      number = (number + "").replace(/[^0-9+-Ee.]/g, "")
+      var n = !isFinite(+number) ? 0 : +number,
+        prec = !isFinite(+decimals) ? 0 : Math.abs(decimals),
+        sep = typeof thousands_sep === "undefined" ? "," : thousands_sep,
+        dec = typeof dec_point === "undefined" ? "." : dec_point
+      var s = n.toString().split(".")
+      var re = /(-?\d+)(\d{3})/
+      while (re.test(s[0])) {
+        s[0] = s[0].replace(re, "$1" + sep + "$2")
+      }
+      if ((s[1] || "").length < prec) {
+        s[1] = s[1] || ""
+        s[1] += new Array(prec - s[1].length + 1).join("0")
+      } else {
+        s[1] = s[1].substring(0, prec) //灏忔暟鐐逛綅鏁拌秴鍑洪暱搴︽椂鎴彇鍓嶉潰鐨勪綅鏁�
+      }
+      return s.join(dec)
     }
   }
 }
@@ -117,4 +203,21 @@
     margin-bottom: 0;
   }
 }
+::v-deep {
+  .el-form-item__label {
+    display: none;
+  }
+  .el-table__footer-wrapper tbody td.el-table__cell {
+    background-color: #fff;
+    text-align: right;
+    font-weight: bold;
+  }
+  .el-input--suffix .el-input__inner {
+    padding-right: 0px;
+  }
+  .el-table .cell,
+  .el-table th.el-table__cell > .cell {
+    padding: 0 5px;
+  }
+}
 </style>

--
Gitblit v1.8.0