<!-- eslint-disable vue/no-use-v-if-with-v-for -->
|
<template>
|
<div class="table-view" v-loading="loading">
|
<el-table
|
ref="table"
|
border
|
:data="tableList.tableInfomation"
|
tooltip-effect="dark"
|
style="width: 100%"
|
:height="'calc(100% - 0px)'"
|
:max-height="tableList.maxHeight"
|
:lazy="tableList.lazy"
|
@selection-change="handleSelectionChange"
|
:header-cell-style="{ background: '#f1f3f8', color: '#000009' }"
|
:highlight-current-row="tableList.highlight"
|
:row-class-name="tableRowClassName"
|
@row-click="tableRowClick"
|
:row-key="tableList.key"
|
:default-expand-all="tableList.isDefaultExpandAll"
|
:tree-props="{ children: 'child', hasChildren: 'hasChildren' }"
|
:span-method="objectSpanMethod"
|
>
|
<el-table-column v-if="tableList.selectBox" type="selection" width="40"> </el-table-column>
|
<el-table-column v-if="tableList.selectIndex" type="index" label="序号" width="50"> </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">
|
<span
|
class="Badge"
|
:class="{
|
greenSlot: scope.row.status == '4',
|
redSlot: scope.row.status == '5',
|
blueSlot: scope.row.status == '3',
|
graySlot: scope.row.status == '1'
|
}"
|
>{{
|
item.isCallMethod ? item.getCallMethod(scope.row[item.prop], scope.row) : scope.row[item.prop]
|
}}</span
|
>
|
</div>
|
<!-- 调用方法显示文字 -->
|
<div v-else-if="item.isCallMethod">
|
<span>{{ item.getCallMethod(scope.row[item.prop], scope.row) }}</span>
|
</div>
|
<!-- 小于当前时间显示不同颜色 -->
|
<span
|
v-else-if="item.date"
|
:style="{ color: new Date().getTime() > new Date(scope.row[item.prop]).getTime() ? '#D23F3A' : '#606266' }"
|
>{{ timeAgo(scope.row[item.prop]) }}</span
|
>
|
<span
|
v-else-if="item.isClick && scope.row[item.prop]"
|
:class="item.className ? item.className : 'sel-name'"
|
@click="selCommonClick(scope.row)"
|
>{{ scope.row[item.prop] }}</span
|
>
|
<span v-else-if="item.propType == 'mulitple'">
|
{{ scope.row[item.prop][item.propTwo] ? scope.row[item.prop][item.propTwo] : "--" }}
|
</span>
|
<span :class="item.className ? item.className : ''" v-else>{{
|
scope.row[item.prop] ? scope.row[item.prop] : scope.row[item.prop] === 0 ? 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 v-if="showCheckcol" class="styleBtn">
|
<i @click="checkcol()" class="label">...</i>
|
<el-checkbox-group v-model="showcolList" v-show="iscolopen" class="checkbox-group" @change="selCeckBoxList">
|
<el-checkbox v-for="item in tableList.allcol" :label="item" :key="item">{{ item }} </el-checkbox>
|
</el-checkbox-group>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import { timeago } from "@/common/config/index"
|
export default {
|
name: "TableCommonView",
|
props: {
|
tableList: {
|
type: Object,
|
default: () => {
|
return {
|
selectBox: false,
|
selectIndex: false,
|
showStyle: true,
|
tableInfomation: [], // 接口返回数据
|
showcol: [],
|
allcol: [],
|
highlight: false,
|
tableColumn: [
|
// table表单
|
{ label: "", prop: "", min: 200, tooltip: true }
|
]
|
}
|
},
|
showcol: {
|
typeof: Array,
|
default: () => []
|
}
|
},
|
// 合并单元格
|
rowData: {
|
type: Array,
|
default: () => {
|
return []
|
}
|
},
|
// 加载的loading
|
loading: {
|
type: Boolean,
|
default: false
|
},
|
// 选中的样式
|
selectClassRow: {
|
type: Object,
|
default: () => {
|
return {}
|
}
|
},
|
showCheckcol: {
|
type: Boolean,
|
default: true
|
}
|
},
|
data() {
|
return {
|
iscolopen: false,
|
showcolList: this.tableList.showcol
|
}
|
},
|
watch: {},
|
computed: {},
|
beforeUpdate() {},
|
methods: {
|
onMaskClick() {
|
this.iscolopen = false
|
},
|
// 合并单元格
|
objectSpanMethod({ row, column, rowIndex, columnIndex }) {
|
row
|
column
|
if (this.rowData && this.rowData.length > 0) {
|
// 产品BOM 表格特殊处理 合并单元格
|
if (columnIndex < 5 || columnIndex == 9) {
|
const _row = this.rowData[rowIndex]
|
const _col = _row > 0 ? 1 : 0
|
return {
|
rowspan: _row,
|
colspan: _col
|
}
|
}
|
}
|
},
|
tableRowClick(row) {
|
this.$emit("tableRowClick", row)
|
},
|
handleReserve(row) {
|
return row._id ? row._id : row.id
|
},
|
handleSelectionChange(val) {
|
this.$emit("getSelectArray", val)
|
},
|
// 公共详情
|
selCommonClick(row) {
|
this.$emit("selCommonClick", row)
|
},
|
// 选择列
|
checkcol() {
|
this.iscolopen = !this.iscolopen
|
},
|
closeCheckbox() {
|
let label = document.querySelector(".label")
|
if (label) {
|
this.iscolopen = false
|
}
|
},
|
selCeckBoxList(val) {
|
this.$emit("selTableCol", val)
|
},
|
// 单选行相关
|
tableRowClassName({ row }) {
|
if (Object.keys(this.selectClassRow).length > 0) {
|
if (row.id == this.selectClassRow.id) {
|
return "onSelect"
|
}
|
}
|
this.$emit("tableRowClassName", row)
|
},
|
timeAgo(val) {
|
return timeago(val)
|
}
|
}
|
}
|
</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;
|
}
|
.greenSlot {
|
background: #28a745;
|
}
|
.redSlot {
|
background: #dc3545;
|
}
|
.blueSlot {
|
background: #1771bb;
|
}
|
.graySlot {
|
color: #444b5a;
|
background: #d3d3d3;
|
}
|
.yellowSlot {
|
background: #e6a23c;
|
}
|
.styleBtn {
|
position: absolute;
|
width: 30px;
|
height: 48px;
|
// line-height: 26px;
|
background: #f1f3f8;
|
border-top-right-radius: 8px;
|
top: 0px;
|
right: 2px;
|
// z-index: 9999;
|
.label {
|
position: absolute;
|
top: 12px;
|
font-size: 20px;
|
cursor: pointer;
|
color: #000;
|
transform: rotate(-90deg);
|
-moz-transform: rotate(-90deg);
|
-webkit-transform: rotate(-90deg);
|
}
|
.checkbox-group {
|
width: 160px;
|
height: 330px;
|
overflow: auto;
|
display: flex;
|
flex-direction: column;
|
line-height: 35px;
|
background: #ffffff;
|
border-radius: 16px;
|
padding: 12px;
|
position: absolute;
|
right: 0;
|
top: 30px;
|
z-index: 99;
|
box-shadow: 0 0 2px 2px #f8f8f8;
|
}
|
}
|
}
|
::v-deep {
|
.el-table__footer-wrapper {
|
tbody td.el-table__cell {
|
background-color: #fff;
|
font-weight: bold;
|
}
|
}
|
.el-table {
|
border-top-left-radius: 12px;
|
border-top-right-radius: 12px;
|
overflow: auto;
|
}
|
}
|
</style>
|
