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