<template>
|
<div class="page-view">
|
<el-form ref="form" :model="productTableList" :show-message="false" label-position="right">
|
<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>
|
<!-- column样式 -->
|
<template slot-scope="scope">
|
<el-form-item
|
v-if="item.input"
|
label=" "
|
:prop="'tableData.' + scope.$index + '.' + item.prop"
|
:rules="[{ required: item.isRequird ? true : false, message: '输入不能为空' }]"
|
>
|
<el-input v-model.trim="scope.row[item.prop]" maxlength="50" size="mini"></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-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">
|
</el-date-picker>
|
</el-form-item>
|
<span v-else>{{ scope.row[item.prop] }}</span>
|
</template>
|
</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>
|
<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>
|
|
<script>
|
export default {
|
name: "CommmonFormTableView",
|
props: {
|
productTableList: {
|
type: Object,
|
default: () => {
|
return {
|
tableData: [], // 接口返回数据
|
tableColumn: [
|
// table表单
|
{ label: "", prop: "", min: 200, tooltip: true }
|
]
|
}
|
}
|
},
|
showSummary: {
|
type: Object,
|
default: () => {
|
return {
|
show: false,
|
total: false,
|
refundable: false,
|
sumProp: [],
|
mergeNumber: 1
|
}
|
}
|
}
|
},
|
data() {
|
return {}
|
},
|
computed: {
|
maxHeight() {
|
if (this.productTableList.height) {
|
return `calc(100vh - ${this.productTableList.height})`
|
}
|
return undefined
|
}
|
},
|
methods: {
|
handleReserve(row) {
|
return row._id ? row._id : row.id
|
},
|
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)
|
}
|
}
|
}
|
</script>
|
|
<!-- Add "scoped" attribute to limit CSS to this component only -->
|
<style lang="scss" scoped>
|
.page-view {
|
.el-form-item {
|
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>
|
