htmel 页面
<template>
<div>
<el-form
:inline="true"
:model="ruleForm"
:rules="rules"
ref="ruleForm"
class="demo-form-inline"
>
<el-form-item prop="date" label="截止月" required>
<el-date-picker
:clearable="false"
value-format="yyyy-MM"
format="yyyy-MM"
v-model="ruleForm.date"
type="month"
placeholder="选择月"
:validate-event="false"
@change="queryData"
></el-date-picker>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="queryData">查询</el-button>
</el-form-item>
</el-form>
<div style="margin-left:10px">
<el-button type="primary" @click="onTable()">导出</el-button>
</div>
<div style="text-align:center">
<h1>还款付息计划表</h1>
</div>
<div class="table">
<el-table
v-loading="loading"
:data="tableData"
stripe
fit
:row-class-name="tableRowClassName"
:span-method="objectSpanMethod"
show-summary
border
:summary-method="getSummaries"
sum-text="偿还债务和本息合计"
style="width: 100%"
>
<el-table-column prop="type" :label="title.type" align="center"></el-table-column>
<el-table-column prop="project" :label="title.project" align="center"></el-table-column>
<el-table-column prop="department" :label="title.department" align="center"></el-table-column>
<el-table-column prop="budget" :label="title.budget" align="center"></el-table-column>
<el-table-column
prop="actual"
:label="title.actual"
align="center"
:formatter="rbstateFormat"
></el-table-column>
<el-table-column label="资金计划" align="center">
<el-table-column
prop="first"
:label="title.fundPlan.first"
align="center"
:formatter="rbstateFormat"
></el-table-column>
<el-table-column
prop="second"
:label="title.fundPlan.second"
align="center"
:formatter="rbstateFormat"
></el-table-column>
<el-table-column
prop="third"
:label="title.fundPlan.third"
align="center"
:formatter="rbstateFormat"
></el-table-column>
<el-table-column
prop="fourth"
:label="title.fundPlan.fourth"
align="center"
:formatter="rbstateFormat"
></el-table-column>
<el-table-column
v-if="fifthFlag"
prop="fifth"
:label="title.fundPlan.fifth"
align="center"
:formatter="rbstateFormat"
></el-table-column>
<el-table-column
v-if="sixthFlag"
prop="sixth"
:label="title.fundPlan.sixth"
align="center"
:formatter="rbstateFormat"
></el-table-column>
</el-table-column>
<el-table-column prop="remarks" :label="title.remarks" align="center"></el-table-column>
</el-table>
</div>
</div>
</template>
<script>
import axios from "axios";
import Tools from "pte-ui/utils/Tools";
export default {
props: {
},
data() {
return {
title: [],
ruleForm: {
date: new Date()
},
date1: [
{
type: "date",
required: true,
message: "请选择日期",
trigger: "change"
}
],
tableData: [],
fifthFlag: true,
sixthFlag: true,
loading: true
};
},
mounted() {
/* 查询数据 */
this.queryData();
},
methods: {
/* 合计方法 */
getSummaries(param) {
const { columns, data } = param;
const sums = [];
let values = []
columns.forEach((column, index) => {
if (index === 0) {
sums[index] = "本金和本息合计";
}
//console.log('++++++')
//console.log(column)
//console.log(data)
// 把要计算的属性名都填进去 格式化一下
let typeList = ['actual', 'first', 'second', 'third', 'fourth', 'fifth', 'sixth']
if (typeList.includes(column.property)) {
//console.log(column.property,'+++++++111')
values = data.map(item => Number(item[column.property]))
console.log(data)
// console.log(values,'--------------')
sums[index] = values.reduce((prev, curr) => {
const value = Number(curr);
if (!isNaN(value)) {
return prev + curr;
} else {
return prev;
}
}, 0);
sums[index];
}
// console.log('------')
// console.log(sums)
return sums
// const values = data.map(item => Number(item[column.property]));
// console.log(values,'00000000000')
// 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.forEach((i, index) => {
if (typeof i == "number") {
//千分位
sums[index] = Number(i / 2)
.toFixed(2)
.replace(/(\d)(?=(\d{3})+\.)/g, function ($0, $1) {
return $1 + ",";
})
.replace(/\.$/, "");
}
});
console.log(sums)
return sums;
},
objectSpanMethod({ row, rowIndex, columnIndex }) {
if (row.total) {
if (rowIndex === row.rowIndex) {
if (columnIndex === 1) {
return [1, 2];
} else if (columnIndex === 2) {
return [0, 0];
}
}
}
if (columnIndex === 0) {
if (rowIndex === 0 || row.type != this.tableData[rowIndex - 1].type) {
let rowspan = 0;
this.tableData.forEach(element => {
if (element.type === row.type) {
rowspan++;
}
});
return [rowspan, 1];
} else {
return [0, 0];
}
}
},
tableRowClassName({ row }) {
if (row.total) {
return 'total-row'
}
},
/* 获取表头 */
getTitle() {
axios
.post("", {
closingDate: this.ruleForm.date
})
.then(res => {
this.title = res.data.data;
this.fifthFlag = true;
this.sixthFlag = true;
if (typeof this.title.fundPlan.fifth == "undefined") {
this.fifthFlag = false;
}
if (typeof this.title.fundPlan.sixth == "undefined") {
this.sixthFlag = false;
}
});
},
/* 获取数据 */
async queryData() {
this.loading = true;
this.getTitle();
await axios
.post("", {
closingDate: this.ruleForm.date
})
.then(res => {
let tableData = res.data.data;
/* 添加合计 */
this.tableData = this.getSubTotal(tableData);
console.log('======')
console.log(this.tableData)
})
.catch(error => {
//请求失败
console.log(error);
})
.finally(res => {
this.loading = false;
});
},
/* 添加合计 */
getSubTotal(tableData_temp) {
let tableData = tableData_temp;
let crtIndex = null;
var t1 = {
actual: 0,
first: 0,
second: 0,
third: 0,
fourth: 0,
fifth: 0,
sixth: 0
},
t2 = {
actual: 0,
first: 0,
second: 0,
third: 0,
fourth: 0,
fifth: 0,
sixth: 0
};
/* 遍历数据 */
tableData.forEach((item, index, crt) => {
if (
index >= 0 &&
index < crt.length - 1 &&
item.type != crt[index + 1].type
)
crtIndex = index;
});
this.crtIndex = crtIndex;
/* 合计 */
tableData.forEach((item, index) => {
if (index <= this.crtIndex) {
t1.actual = t1.actual + item.actual;
t1.first = t1.first + item.first;
t1.second = t1.second + item.second;
t1.third = t1.third + item.third;
t1.fourth = t1.fourth + item.fourth;
t1.fifth = t1.fifth + item.fifth;
t1.sixth = t1.sixth + item.sixth;
} else {
t2.actual = t2.actual + item.actual;
t2.first = t2.first + item.first;
t2.second = t2.second + item.second;
t2.third = t2.third + item.third;
t2.fourth = t2.fourth + item.fourth;
t2.fifth = t2.fifth + item.fifth;
t2.sixth = t2.sixth + item.sixth;
}
});
/* 添加一行小计 */
tableData.splice(crtIndex + 1, 0, {
type: tableData[crtIndex].type,
project: "小计",
department: "资金财务部",
...t1,
total: true,
rowIndex: crtIndex + 1
});
/* 添加小计 */
tableData.splice(tableData.length, 0, {
type: tableData[tableData.length - 1].type,
project: "小计",
department: "资金财务部",
...t2,
total: true,
rowIndex: tableData.length
});
return tableData
},
// 千分位
rbstateFormat(row, column, cellValue) {
if (cellValue !== null) {
cellValue = Number(cellValue).toFixed(2);
cellValue += "";
if (!cellValue.includes(".")) {
cellValue += ".";
}
return cellValue
.replace(/(\d)(?=(\d{3})+\.)/g, function ($0, $1) {
return $1 + ",";
})
.replace(/\.$/, "");
}
},
/* 导出 */
onTable() {
Tools.downLoadFile(
"",
"post",
{
closingDate: this.ruleForm.date,
data: this.tableData
},
true,
err => {
this.$msg({
type: "reeor",
message: err
});
}
);
}
}
};
</script>
<style lang="scss" scoped>
/deep/.el-table .total-row{
background: red !important;
}
</style>
页面样子
