<!-- eslint-disable vue/no-use-v-if-with-v-for -->
|
<template>
|
<div class="table-view">
|
<el-table
|
ref="table"
|
border
|
:data="tableList.tableInfomation"
|
tooltip-effect="dark"
|
:height="'calc(100% - 0px)'"
|
style="width: 100%"
|
:lazy="tableList.lazy"
|
:show-summary="showSummary.show"
|
:summary-method="getSummaries"
|
:span-method="arraySpanMethod"
|
@selection-change="handleSelectionChange"
|
:header-cell-style="{ background: '#f1f3f8', color: '#000009', 'font-size': '12px', 'font-family': 'PingFangSC' }"
|
size="mini"
|
@row-click="tableRowClick"
|
:row-class-name="tableRowClassName"
|
>
|
<el-table-column v-if="tableList.selectIndex" type="index" label="序号" width="50"></el-table-column>
|
<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"
|
v-if="item.isShowColumn"
|
>
|
<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 00:06:26"
|
? "--"
|
: dateFormat("YYYY-mm-dd HH:MM:SS", scope.row[item.prop])
|
}}</span>
|
<span v-else-if="item.isClick && scope.row[item.prop]" class="sel-name" @click="selNameClick(scope.row)">{{
|
scope.row[item.prop]
|
}}</span>
|
<span v-else-if="item.isFirst">{{ scope.row[item.prop] ? "是" : "否" }}</span>
|
<span
|
v-else-if="item.isSalesLeadClick && scope.row[item.prop]"
|
class="sel-name"
|
@click="selSalesLeadClick(scope.row)"
|
>{{ scope.row[item.prop] }}</span
|
>
|
<span
|
v-else-if="item.isClientClick && scope.row[item.prop]"
|
class="sel-name"
|
@click="selClientClick(scope.row)"
|
>{{ scope.row[item.prop] ? scope.row[item.prop] : "--" }}</span
|
>
|
<span
|
v-else-if="item.isContactClick && scope.row[item.prop]"
|
class="sel-name"
|
@click="selContactsClick(scope.row)"
|
>{{ scope.row[item.prop] }}</span
|
>
|
<span
|
v-else-if="item.isMasterClick && scope.row[item.prop]"
|
class="sel-name"
|
@click="selMasterClick(scope.row)"
|
>{{ scope.row[item.prop] }}</span
|
>
|
<span
|
v-else-if="item.isServiceOrder && scope.row[item.prop]"
|
class="sel-name"
|
@click="selServiceOrderClick(scope.row)"
|
>{{ scope.row[item.prop] }}</span
|
>
|
<span
|
v-else-if="item.isCommonClick && scope.row[item.prop]"
|
class="sel-name"
|
@click="selCommonClick(scope.row)"
|
>{{ scope.row[item.prop] }}</span
|
>
|
<div v-else-if="item.isProductName" class="product-view">
|
<ul v-if="scope.row.products && scope.row.products.length > 0">
|
<li v-for="(item, index) in scope.row.products" :key="index">
|
<div class="name-view">
|
{{ item.name }}
|
</div>
|
</li>
|
</ul>
|
<div v-else class="no-product">{{ "--" }}</div>
|
</div>
|
<div v-else-if="item.isProductAmount" class="product-view">
|
<ul v-if="scope.row.products && scope.row.products.length > 0">
|
<li v-for="(item, index) in scope.row.products" :key="index">
|
<div class="name-view">
|
{{ item.amount }}
|
</div>
|
</li>
|
</ul>
|
<div v-else class="no-product">{{ "--" }}</div>
|
</div>
|
<div v-else-if="item.isProductPrice" class="product-view">
|
<ul v-if="scope.row.products && scope.row.products.length > 0">
|
<li v-for="(item, index) in scope.row.products" :key="index">
|
<div class="name-view">
|
{{ item.price }}
|
</div>
|
</li>
|
</ul>
|
<div v-else class="no-product">{{ "--" }}</div>
|
</div>
|
<div v-else-if="item.isProductTotal" class="product-view">
|
<ul v-if="scope.row.products && scope.row.products.length > 0">
|
<li v-for="(item, index) in scope.row.products" :key="index">
|
<div class="name-view">
|
{{ item.total }}
|
</div>
|
</li>
|
</ul>
|
<div v-else class="no-product">{{ "--" }}</div>
|
</div>
|
<!-- 调用方法显示文字 -->
|
<div v-else-if="item.isCallMethod">
|
<span :class="item.isClass ? item.getClassName(scope.row[item.prop], scope.row) : ''">{{
|
item.getCallMethod(scope.row[item.prop], scope.row)
|
}}</span>
|
</div>
|
<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 class="overSpread1" v-show="iscolopen" @click="onMaskClick"></div>
|
<div class="styleBtn">
|
<i @click="checkCol()" class="label">...</i>
|
<el-checkbox-group v-model="showcol" v-show="iscolopen" class="checkbox-group" @change="selectCheckBoxList">
|
<el-checkbox v-for="item in tableList.allcol" :label="item" :key="item">{{ item }} </el-checkbox>
|
</el-checkbox-group>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
export default {
|
name: "TableCommonView",
|
props: {
|
selectBox: {
|
type: Boolean,
|
default: false
|
},
|
tableList: {
|
type: Object,
|
default: () => {
|
return {
|
selectIndex: true,
|
tableInfomation: [], // 接口返回数据
|
showcol: [],
|
allcol: [],
|
tableColumn: [
|
// table表单
|
{ label: "", prop: "", min: 200, tooltip: true }
|
]
|
}
|
}
|
},
|
showSummary: {
|
type: Object,
|
default: () => {
|
return {
|
show: false,
|
sumProp: [],
|
mergeNumber: 1
|
}
|
}
|
},
|
// 选中的样式
|
selectClassRow: {
|
type: Object,
|
default: () => {
|
return {}
|
}
|
}
|
},
|
data() {
|
return {
|
iscolopen: false,
|
showcol: []
|
}
|
},
|
computed: {},
|
watch: {
|
"tableList.showcol": {
|
handler(newVal) {
|
this.showcol = newVal
|
},
|
immediate: true
|
}
|
},
|
methods: {
|
onMaskClick() {
|
this.iscolopen = false
|
},
|
checkCol() {
|
this.iscolopen = !this.iscolopen
|
},
|
selectCheckBoxList(val) {
|
this.$emit("selTableCol", val)
|
},
|
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] && cell[i].style && (cell[i].style.display = "none")
|
}
|
if (cell[this.showSummary.mergeNumber]) {
|
if (cell[this.showSummary.mergeNumber].classList) {
|
cell[this.showSummary.mergeNumber].classList.remove("is-left")
|
}
|
if (cell[this.showSummary.mergeNumber].colSpan) {
|
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]
|
if (column.property === "taxUnitPrice") {
|
let sumPrice = 0
|
this.tableList.tableInfomation.map((item) => {
|
item.products.map((val) => {
|
console.log(val.price)
|
sumPrice += parseFloat(val.price)
|
})
|
})
|
console.log((sums[index + 1] = sumPrice))
|
console.log(sumPrice)
|
}
|
if (column.property === "priceTax") {
|
let sumPrice = 0
|
this.tableList.tableInfomation.map((item) => {
|
item.products.map((val) => {
|
console.log(val.price)
|
sumPrice += parseFloat(val.total)
|
})
|
})
|
sums[index + 1] = sumPrice
|
}
|
if (column.property === "productAmount") {
|
let sumPrice = 0
|
this.tableList.tableInfomation.map((item) => {
|
item.products.map((val) => {
|
console.log(val.price)
|
sumPrice += parseFloat(val.amount)
|
})
|
})
|
sums[index + 1] = sumPrice
|
}
|
}
|
})
|
// 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)
|
},
|
// 销售线索
|
selSalesLeadClick(row) {
|
this.$emit("selSalesLeadClick", row)
|
},
|
// 客户名称
|
selClientClick(row) {
|
this.$emit("selClientClick", row)
|
},
|
// 联系人姓名
|
selContactsClick(row) {
|
this.$emit("selContactsClick", row)
|
},
|
// 销售总单
|
selMasterClick(row) {
|
this.$emit("selMasterClick", row)
|
},
|
// 客户服务单
|
selServiceOrderClick(row) {
|
this.$emit("selServiceOrderClick", row)
|
},
|
// 公共（销售机会、报价单、销售总单、销售子单。。。）
|
selCommonClick(row) {
|
this.$emit("selCommonClick", row)
|
},
|
// 行点击
|
tableRowClick(row, column, event) {
|
this.$emit("tableRowClick", row, column, event)
|
},
|
// 单选行相关
|
tableRowClassName({ row }) {
|
if (Object.keys(this.selectClassRow).length > 0) {
|
if (row.id == this.selectClassRow.id) {
|
return "onSelect"
|
}
|
}
|
this.$emit("tableRowClassName", row)
|
}
|
}
|
}
|
</script>
|
|
<!-- Add "scoped" attribute to limit CSS to this component only -->
|
<style lang="scss" scoped>
|
.table-view {
|
position: relative;
|
height: 100%;
|
.blue {
|
width: 70px;
|
text-align: center;
|
color: #fff;
|
background-color: $color-primary;
|
border-radius: 4px;
|
}
|
.sel-name {
|
color: $color-primary;
|
cursor: pointer;
|
}
|
.product-view {
|
// background: #cc7d7d;
|
margin-left: -10px;
|
margin-right: -11px;
|
li {
|
height: 22px;
|
line-height: 22px;
|
.name-view {
|
padding-left: 10px;
|
border-bottom: 1px solid #ebeef5;
|
}
|
.no-bottom {
|
border-bottom: 0;
|
}
|
}
|
li:last-child .name-view {
|
border-bottom: none;
|
}
|
.no-product {
|
height: 22px;
|
line-height: 22px;
|
}
|
}
|
}
|
::v-deep {
|
.el-table__footer-wrapper {
|
tbody td.el-table__cell {
|
background-color: #fff;
|
font-weight: bold;
|
}
|
}
|
}
|
|
::v-deep .el-table .cell {
|
font-size: 12px;
|
line-height: 17px;
|
font-family: PingFangSC;
|
color: rgba(0, 0, 0, 0.9);
|
.el-button--text {
|
width: auto;
|
height: auto;
|
font-family: PingFangSC-Medium, sans-serif;
|
}
|
}
|
::v-deep .el-table .el-table__cell {
|
padding: 6px 0 !important;
|
height: 35px;
|
text-align: center;
|
}
|
|
::v-deep {
|
.el-table .cell .el-button--text.el-button--small {
|
padding: 4px 0;
|
}
|
}
|
|
::v-deep .el-table .el-table__cell {
|
padding: 6px 0 !important;
|
height: 35px;
|
text-align: center;
|
}
|
|
.overSpread1 {
|
width: 100%;
|
height: 100%;
|
position: fixed;
|
top: 0;
|
left: 0;
|
background: rgba(0, 0, 0, 0);
|
z-index: 10;
|
}
|
|
.styleBtn {
|
position: absolute;
|
width: 30px;
|
height: 36px;
|
// line-height: 26px;
|
// background: #06c062;
|
top: 0;
|
right: -6px;
|
z-index: 11;
|
.label {
|
position: absolute;
|
top: 6px;
|
font-size: 20px;
|
// line-height: 5px;
|
cursor: pointer;
|
color: #000;
|
transform: rotate(-90deg);
|
}
|
.checkbox-group {
|
width: 160px;
|
height: 300px;
|
overflow: auto;
|
display: flex;
|
flex-direction: column;
|
line-height: 25px;
|
background: #ffffff;
|
border-radius: 16px;
|
padding: 12px;
|
position: absolute;
|
right: 0;
|
top: 30px;
|
z-index: 99;
|
box-shadow: 0 0 2px 2px #f8f8f8;
|
}
|
}
|
</style>
|
