按月份金额汇总演示
<el-row>
<el-col :span="20">
<el-form ref="tableForm" :model="tableForm" :rules="tableRules">
<el-row class="selectTableBox">
<el-table
ref="multipleTable"
v-loading="loading"
class="crud_form"
max-height="38vh"
:data="tableForm.tableData"
:row-class-name="rouClassNameFn"
style="width: 100%"
:cell-style="{'text-align': 'center'}"
:header-cell-style="{'text-align': 'center'}"
>
<el-table-column label="序号" fixed type="index" width="80" align="center" />
<el-table-column label="编号" prop="code" min-width="80" show-overflow-tooltip />
<el-table-column label="名称" prop="name" min-width="100" show-overflow-tooltip />
<el-table-column
label="月份"
min-width="200"
>
<template slot-scope="{row, $index}">
<el-form-item
:prop="'tableData.' + $index + '.monthBs'"
label=" "
>
<el-tooltip :content="row.monthBs" placement="top" :disabled="isshowtip">
<el-date-picker
v-model="row.monthBs"
value-format="yyyy-MM"
format="yyyy-MM"
size="small"
type="month"
style="width: 100%"
placeholder="请选择"
clearable
@mouseover.native="inputOnMouseOver($event)"
@change="changeTableContent(row, $index, 'monthBs', $event)"
/>
</el-tooltip>
</el-form-item>
</template>
</el-table-column>
<el-table-column
label="付款金额"
min-width="250"
>
<template slot-scope="{row, $index}">
<el-form-item
:prop="'tableData.' + $index + '.paymentAmount'"
:rules="tableRules.paymentAmount"
label=" "
>
<el-tooltip :content="row.paymentAmount + ''" placement="top" :disabled="isshowtip">
<el-input
v-model="row.paymentAmount"
size="small"
clearable
oninput="value=value.replace(/^\D*([0-9]\d*\.?\d{0,2})?.*$/,'$1')"
@blur="row.paymentAmount=$event.target.value"
@mouseover.native="inputOnMouseOver($event)"
@change="changeTableContent(row, $index, 'paymentAmount', $event)"
/>
</el-tooltip>
</el-form-item>
</template>
</el-table-column>
<el-table-column label="金额" prop="amount" min-width="100" show-overflow-tooltip />
<el-table-column label="特价" prop="bargainPrice" min-width="100" show-overflow-tooltip />
<el-table-column label="涨幅" prop="increase" min-width="100" show-overflow-tooltip />
<el-table-column label="月份" prop="businessMonth" min-width="100" show-overflow-tooltip />
<el-table-column label="备注" prop="remark" min-width="100" show-overflow-tooltip />
<el-table-column label="更新人" prop="updatedBy" min-width="200" show-overflow-tooltip />
<el-table-column
label="操作"
align="center"
class-name="check_box"
width="150px"
fixed="right"
>
<template slot-scope="{row,$index}">
<el-button
class="delBtn"
size="mini"
type="text"
icon="el-icon-delete"
@click="deleteRow(row, $index)"
>删除</el-button>
<el-button
class="copyBtn"
size="mini"
type="text"
icon="el-icon-document-add"
@click="copyRow(row, $index)"
>复制</el-button>
</template>
</el-table-column>
</el-table>
</el-row>
</el-form>
</el-col>
</el-row>
<el-pagination
v-show="total>0"
class="pageBox"
background
:total="total"
:current-page="pageNum"
:page-size="pageSize"
:page-sizes="[10, 20, 30, 50]"
layout="total,sizes,prev,pager,next,jumper"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
/>
<el-row class="monthAmountBox font-b">
<span>按月份汇总金额：</span>
<div>
<el-row v-for="(section,i) in monthAmountArr" v-show="!validatenull(section.key)" :key="i">
<span>{{ section.key || '-' }}</span>:
<span>{{ section.amount || '0' }}</span>
</el-row>
</div>
</el-row><script>
export default {
data () {
return {
isshowtip: true,
// 遮罩层
loading: false,
// 总条数
total: 0,
// 页数
pageNum: 1,
// 每页显示数量
pageSize: 10,
monthAmountArr: [],
// 表格数据
tableList: [], // 所有数据
tableForm: {
tableData: [] // 当前页表格数据
},
}
},
created() {
this.queryList()
},
methods: {
changeTableContent(row, index, property, event) {
if (property === 'monthBs' || property === 'paymentAmount') {
this.$set(row, property, event)
this.monthAmountArr = []
const monthAmountArrTemp = []
this.tableForm.tableData.map(el => {
const monthAmountObj = {
month: el.monthBs,
amount: el.paymentAmount
}
monthAmountArrTemp.push(monthAmountObj)
})
this.monthAmountArr = this.getMonthAmountArray(monthAmountArrTemp)
}
},
rouClassNameFn({ row, rowIndex }) {
// 把每一行的索引放进row
this.$set(row, 'index', rowIndex)
},
// 获取按月份汇总金额
getMonthAmountArray(arr) {
const arrMap = new Map()
const dataArr = []
arr.forEach(item => {
if (arrMap.get(item.month) !== undefined) {
let num = arrMap.get(item.month)
arrMap.set(item.month, ++num)
} else {
arrMap.set(item.month, 1)
}
if (arrMap.get(item.month) > 1) {
dataArr.map(el => {
if (el.key === item.month) {
el.value = arrMap.get(item.month)
const ttarr = el.totalArr
ttarr.push(item.amount)
el.totalArr = ttarr
el.amount = el.totalArr
.map(val => {
if (val) {
return val
}
})
.reduce((acc, cur = 0) => parseFloat(cur) + acc, 0).toFixed(2)
}
})
} else {
let amountTemp = 0
if (!this.validatenull(item.amount)) {
amountTemp = Number(item.amount).toFixed(2)
} else {
amountTemp = 0
}
const keyObj = {
key: item.month,
value: arrMap.get(item.month),
amount: amountTemp,
totalArr: []
}
const ftarr = []
ftarr.push(item.amount)
keyObj.totalArr = ftarr
dataArr.push(keyObj)
}
})
// 按月份升序排序
dataArr.sort((a, b) => {
return new Date(a.key).getTime() - new Date(b.key).getTime()
})
return dataArr
},
getAmountSummaryDisplayArr(data) {
// 优化
const map = new Map()
data.forEach((item) => {
if (map.has(item.key)) {
const prev = map.get(item.key)
map.set(item.key, { key: item.key, total: (parseFloat(prev.total) + parseFloat(item.amount)).toFixed(2), totalArr: [...prev.totalArr, item.amount] })
} else {
map.set(item.key, { key: item.key, total: parseFloat(item.amount), totalArr: [item.amount] })
}
})
const resultArr = Array.from(map.values())
// 按月份升序排序
resultArr.sort((a, b) => {
return new Date(a.key).getTime() - new Date(b.key).getTime()
})
return resultArr
},
/**
* 判断是否为空
*/
validatenull(val) {
if (typeof val === 'boolean') {
return false;
}
if (typeof val === 'number') {
return false;
}
if (val instanceof Array) {
if (val.length===0) return true;
} else if (val instanceof Object) {
if (JSON.stringify(val) === '{}') return true;
} else {
if (val==='null' || val===null || val==='undefined' || val===undefined || val==='') return true;
return false;
}
return false;
},
// 删除行
deleteRow(row, index) {
this.tableForm.tableData.splice(index, 1)
this.$message.success('删除成功！')
if (!this.validatenull(row.id)) {
const delObj = { id: row.id, isDel: '1' }
this.delArr.push(delObj)
}
this.monthAmountArr = []
const monthAmountArrTemp = []
this.tableForm.tableData.map(el => {
const monthAmountObj = {
month: el.monthBs,
amount: el.paymentAmount
}
monthAmountArrTemp.push(monthAmountObj)
})
this.monthAmountArr = this.getMonthAmountArray(monthAmountArrTemp)
},
// 复制行
copyRow(row, index) {
// 复制行放到被复制行下方
this.tableForm.tableData.splice(index + 1, 0, {
monthBs: row.monthBs,
paymentAmount: row.paymentAmount,
code: row.code,
name: row.name,
amount: row.amount,
bargainPrice: row.bargainPrice,
increase: row.increase,
businessMonth: row.businessMonth,
remark: row.remark,
updatedBy: row.updatedBy,
})
// 清空表单校验
this.$nextTick(() => {
this.$refs.tableForm.clearValidate()
})
this.monthAmountArr = []
const monthAmountArrTemp = []
this.tableForm.tableData.map(el => {
const monthAmountObj = {
month: el.monthBs,
amount: el.paymentAmount
}
monthAmountArrTemp.push(monthAmountObj)
})
this.monthAmountArr = this.getMonthAmountArray(monthAmountArrTemp)
},
// tooltip显示
inputOnMouseOver(event) {
const target = event.target
if (target.offsetWidth < target.scrollWidth) {
this.isshowtip = false
} else {
this.isshowtip = true
}
},
// 初始化数据
queryList() {
const res = {
data: [
{
code: 'No1',
name: '键盘',
amount: '180',
bargainPrice: '167.83',
increase: '2.22',
businessMonth: '2018-02',
remark: '备注1',
updatedBy: '小明',
},
{
code: 'No2',
name: '鼠标',
amount: '30',
bargainPrice: '25.50',
increase: '6.66',
businessMonth: '2019-05',
remark: '备注2',
updatedBy: '小芳',
},
{
code: 'No3',
name: '显示器',
amount: '2000',
bargainPrice: '1888.88',
increase: '99.88',
businessMonth: '2020-12',
remark: '备注3',
updatedBy: '小红',
},
]
}
this.tableList = res.data
this.tableForm.tableData = this.tableList.slice(0, this.pageSize)
this.total = this.tableList.length
},
// 获取表格数据 前端分页
getList() {
const start = Math.ceil(((this.pageNum - 1) * this.pageSize).toFixed(0)),
end = Math.ceil((start + this.pageSize).toFixed(2))
this.tableForm.tableData = this.tableList.slice(start >= 0 ? start : 0, end)
// 滚动条回到起点
this.$refs.multipleTable.bodyWrapper.scrollTo(0, 0)
},
handleSizeChange(val) {
this.pageSize = val
this.getList()
},
handleCurrentChange(val) {
this.pageNum = val
this.getList()
}
}
}
</script>
1144
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
