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