<template>
|
<div class="page-view">
|
<el-table
|
ref="table"
|
border
|
:data="tableList.tableInfomation"
|
tooltip-effect="dark"
|
style="width: 100%"
|
:lazy="tableList.lazy"
|
:show-summary="showSummary.show"
|
:summary-method="getSummaries"
|
:span-method="arraySpanMethod"
|
@selection-change="handleSelectionChange"
|
:header-cell-style="{ background: '#ECF4FF', color: '#666' }"
|
>
|
<el-table-column v-if="selectBox" type="selection" width="40"> </el-table-column>
|
<el-table-column
|
v-for="(item, i) in tableList.tableColumn"
|
:key="i"
|
:prop="item.prop"
|
:label="item.label"
|
:width="item.width"
|
:min-width="item.min"
|
show-overflow-tooltip
|
:sortable="item.sortable"
|
>
|
<template slot-scope="scope">
|
<span v-if="item.price">{{ "￥" + number_format(scope.row[item.prop], 2, ".", ",") }}</span>
|
<div v-else-if="item.status" :class="scope.row.status">{{ scope.row[item.prop] }}</div>
|
<span v-else-if="item.isTime">{{
|
dateFormat("YYYY-mm-dd HH:MM:SS", scope.row[item.prop]) === "1900-01-01 08:00:00"
|
? "--"
|
: dateFormat("YYYY-mm-dd HH:MM:SS", scope.row[item.prop])
|
}}</span>
|
<span v-else-if="item.isClick" class="sel-name" @click="selNameClick(scope.row)">{{
|
scope.row[item.prop]
|
}}</span>
|
<span v-else>{{ scope.row[item.prop] ? scope.row[item.prop] : "--" }}</span>
|
</template>
|
</el-table-column>
|
<slot name="tableButton" />
|
<div slot="empty">
|
<el-empty description="暂无数据"></el-empty>
|
</div>
|
</el-table>
|
</div>
|
</template>
|
|
<script>
|
export default {
|
name: "TableCommonView",
|
props: {
|
selectBox: {
|
type: Boolean,
|
default: true
|
},
|
tableList: {
|
type: Object,
|
default: () => {
|
return {
|
selectBox: true,
|
tableInfomation: [], // 接口返回数据
|
tableColumn: [
|
// table表单
|
{ label: "", prop: "", min: 200, tooltip: true }
|
]
|
}
|
}
|
},
|
showSummary: {
|
type: Object,
|
default: () => {
|
return {
|
show: false,
|
sumProp: [],
|
mergeNumber: 1
|
}
|
}
|
}
|
},
|
data() {
|
return {}
|
},
|
computed: {},
|
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.$el) {
|
var current = this.$refs.table.$el
|
.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 (this.showSummary.sumProp.includes(column.property)) {
|
sums[index + 1] = values.reduce((prev, curr) => {
|
const value = Number(curr)
|
if (!isNaN(value)) {
|
return prev + curr
|
} else {
|
return prev
|
}
|
}, 0)
|
sums[index + 1]
|
}
|
})
|
// console.log(sums)
|
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)
|
},
|
// 时间显示
|
dateFormat(fmt, date) {
|
let ret = ""
|
date = new Date(date)
|
const opt = {
|
"Y+": date.getFullYear().toString(), // 年
|
"m+": (date.getMonth() + 1).toString(), // 月
|
"d+": date.getDate().toString(), // 日
|
"H+": date.getHours().toString(), // 时
|
"M+": date.getMinutes().toString(), // 分
|
"S+": date.getSeconds().toString() // 秒
|
// 有其他格式化字符需求可以继续添加，必须转化成字符串
|
}
|
for (let k in opt) {
|
ret = new RegExp("(" + k + ")").exec(fmt)
|
if (ret) {
|
fmt = fmt.replace(ret[1], ret[1].length == 1 ? opt[k] : opt[k].padStart(ret[1].length, "0"))
|
}
|
}
|
return fmt
|
},
|
selNameClick(row) {
|
this.$emit("selCommonClick", row)
|
}
|
}
|
}
|
</script>
|
|
<!-- Add "scoped" attribute to limit CSS to this component only -->
|
<style lang="scss" scoped>
|
.page-view {
|
margin-top: 20px;
|
margin-right: 10px;
|
margin-bottom: 40px;
|
.blue {
|
width: 70px;
|
text-align: center;
|
color: #fff;
|
background-color: $color-primary;
|
border-radius: 4px;
|
}
|
.sel-name {
|
color: $color-primary;
|
cursor: pointer;
|
}
|
}
|
::v-deep {
|
.el-table__footer-wrapper tbody td.el-table__cell {
|
background-color: #fff;
|
text-align: right;
|
}
|
}
|
</style>
|
