400 lines
12 KiB
Java
400 lines
12 KiB
Java
<template>
|
|
<div>
|
|
<div class="alert" v-if="showAlertInfo">
|
|
<a-alert type="info" :show-icon="true">
|
|
<div slot="message">
|
|
已选择 <a style="font-weight: 600">{{ selectedRows.length }}</a>
|
|
<template v-for="(item, index) in needTotalList" v-if="item.needTotal">
|
|
{{ item.slot.title }} 总计
|
|
<a :key="index" style="font-weight: 600">
|
|
{{ item.customRender ? item.customRender(item.total) : item.total }}
|
|
</a>
|
|
</template>
|
|
<a style="margin-left: 24px" @click="onClearSelected">清空</a>
|
|
</div>
|
|
</a-alert>
|
|
</div>
|
|
|
|
<a-table
|
|
:rowKey="record => record.id"
|
|
:columns="curTableColumns"
|
|
:dataSource="dataSource"
|
|
:pagination="ispagination"
|
|
:rowSelection="rowSelect"
|
|
v-bind="$attrs"
|
|
v-on="$listeners">
|
|
|
|
<!--处理表格的插槽-->
|
|
<template v-for="(slotItem) of scopedSlotsKeys" :slot="slotItem" slot-scope="record, index, indent, expanded">
|
|
<slot :name="slotItem" v-bind="{record, index, indent, expanded}"></slot>
|
|
</template>
|
|
|
|
<span :slot="column.slots.title" v-for="column in columnsSlot" :key="column.dataIndex">
|
|
{{ column.slots.title }}
|
|
<a-dropdown :trigger="['click']">
|
|
<a class="ant-dropdown-link" @click="(e) => e.preventDefault()">
|
|
<!-- 操作 -->
|
|
<a-icon type="caret-down" v-if="isShowIcon" />
|
|
</a>
|
|
<a-menu slot="overlay">
|
|
<a-sub-menu key="frozen" title="冻结列头">
|
|
<a-menu-item>
|
|
<a-radio-group
|
|
v-model="column.slots.fixedValue"
|
|
@change="
|
|
(e) => {
|
|
fixedChange(e, column.dataIndex)
|
|
}
|
|
"
|
|
>
|
|
<a-radio :style="radioStyle" :value="1"> 左侧冻结 </a-radio>
|
|
<a-radio :style="radioStyle" :value="2"> 右侧冻结 </a-radio>
|
|
<a-radio :style="radioStyle" :value="3"> 解冻 </a-radio>
|
|
</a-radio-group>
|
|
</a-menu-item>
|
|
</a-sub-menu>
|
|
<a-sub-menu key="check" title="筛选列头">
|
|
<a-checkbox-group v-model="checkedList" :options="plainOptions" @change="onChange" />
|
|
</a-sub-menu>
|
|
</a-menu>
|
|
</a-dropdown>
|
|
</span>
|
|
|
|
</a-table>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import get from 'lodash.get'
|
|
|
|
const LEFT_FROZEN = 1 // 1为左侧冻结
|
|
const RIGHT_FROZEN = 2 // 2为右侧冻结
|
|
const NO_FROZEN = 3 // 3为不冻结或解冻
|
|
|
|
export default {
|
|
name: 'JTable',
|
|
props: {
|
|
// 接收列
|
|
columns: {
|
|
default: []
|
|
},
|
|
// 接收数据
|
|
dataSource: {
|
|
default: []
|
|
},
|
|
// 是否显示统计弹窗，默认不显示
|
|
showAlertInfo: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
isShowPage: {
|
|
type: Boolean,
|
|
default () {
|
|
return true
|
|
}
|
|
},
|
|
isCheck: {
|
|
type: Boolean,
|
|
default () {
|
|
return true
|
|
}
|
|
},
|
|
isShowDropdown: {
|
|
type: Boolean,
|
|
default () {
|
|
return true
|
|
}
|
|
},
|
|
rowSelection: {
|
|
type: Object,
|
|
default () {
|
|
return {
|
|
type: 'checkbox'
|
|
}
|
|
}
|
|
},
|
|
pagination: {
|
|
type: Object,
|
|
default () {
|
|
return {
|
|
current: 1,
|
|
pageSize: 10,
|
|
pageSizeOptions: ['10', '30', '50'],
|
|
showQuickJumper: true,
|
|
showSizeChanger: true,
|
|
total: 0,
|
|
showTotal: (total, range) => {
|
|
return range[0] + '-' + range[1] + ' 共' + total + '条'
|
|
}
|
|
}
|
|
}
|
|
}
|
|
},
|
|
data () {
|
|
return {
|
|
key: 'customer_cloumns_' + this.$route.path, // 存储当前列表的用户存储信息
|
|
defaultOperationKey: 'action', // 操作列dataIndex=action不作相关处理，默认去除
|
|
usedSlots: [], // 内部使用的 slots ，不再处理
|
|
needTotalList: [],
|
|
selectedRows: [],
|
|
selectedRowKeys: [],
|
|
curTableColumns: this.columns,
|
|
checkedList: [],
|
|
plainOptions: [], // 筛选显示的列头数组
|
|
radioStyle: {
|
|
display: 'block',
|
|
height: '30px',
|
|
lineHeight: '30px'
|
|
}
|
|
}
|
|
},
|
|
computed: {
|
|
rowSelect () {
|
|
if (this.isCheck) {
|
|
return this.rowSelection
|
|
} else {
|
|
return null
|
|
}
|
|
},
|
|
ispagination () {
|
|
if (this.isShowPage) {
|
|
return this.pagination
|
|
} else {
|
|
return false
|
|
}
|
|
},
|
|
isShowIcon () {
|
|
if (this.isShowDropdown) {
|
|
return true
|
|
} else {
|
|
return false
|
|
}
|
|
},
|
|
// 获取插槽信息
|
|
scopedSlotsKeys () {
|
|
return Object.keys(this.$scopedSlots).filter(key => !this.usedSlots.includes(key))
|
|
},
|
|
// 需要插槽处理的列的信息
|
|
columnsSlot () {
|
|
const a = this.curTableColumns.filter(
|
|
item => item.slots
|
|
)
|
|
console.log(a)
|
|
return a
|
|
}
|
|
},
|
|
mounted () {
|
|
// 遍历出筛选列头的所有选项
|
|
this.columns.forEach((item) => {
|
|
if (item.slots && item.slots.title) {
|
|
const colItem = {
|
|
value: item.slots.title,
|
|
label: item.slots.title,
|
|
disabled: false
|
|
}
|
|
this.plainOptions.push(colItem)
|
|
}
|
|
})
|
|
|
|
// 读取localStorage中的数据
|
|
var storageCloumns = JSON.parse(localStorage.getItem(this.key))
|
|
// console.log(storageCloumns)
|
|
if (storageCloumns) {
|
|
this.curTableColumns = storageCloumns
|
|
}
|
|
// 遍历出筛选列头中的已选项
|
|
this.curTableColumns.forEach((item) => {
|
|
if (item.slots && item.slots.title) {
|
|
this.checkedList.push(item.slots.title)
|
|
} else if (item.title) {
|
|
this.checkedList.push(item.title)
|
|
}
|
|
})
|
|
console.log(this.checkedList)
|
|
},
|
|
created () {
|
|
this.needTotalList = this.initTotalList(this.columns)
|
|
console.log(this.$route.path)
|
|
console.log(this.key)
|
|
},
|
|
methods: {
|
|
// 用户可自行筛选列头显示的字段
|
|
onChange (e) {
|
|
// 只剩一个时候,最后一个多选按钮禁用
|
|
if (this.checkedList.length === 1) {
|
|
this.plainOptions.forEach((item) => {
|
|
if (item.label === this.checkedList[0]) {
|
|
item.disabled = true
|
|
}
|
|
})
|
|
} else {
|
|
this.plainOptions.forEach((item) => {
|
|
item.disabled = false
|
|
})
|
|
}
|
|
|
|
const trfList = [] // 将中文转换为dataIndex
|
|
const initList = [] // 最初始list
|
|
let diffList = [] // 两个数组不同
|
|
// 转换为dataIndex
|
|
for (let i = 0; i < e.length; i++) {
|
|
this.columns.find((item) => {
|
|
if (item.slots && item.slots.title === e[i]) {
|
|
trfList.push(item.dataIndex)
|
|
}
|
|
})
|
|
}
|
|
// 首先遍历父组件传来的columns,拿到其中每一项的dataIndex,形成一个最初始的数组
|
|
this.columns.forEach((item) => {
|
|
initList.push(item.dataIndex)
|
|
})
|
|
// 拿到两个数组的不同的项
|
|
diffList = this.getArrDifference(trfList, initList)
|
|
if (diffList.length === 0) {
|
|
// 如果数组为空，则把父组件传过来的表头赋值给
|
|
this.curTableColumns = this.columns
|
|
localStorage.setItem(this.key, JSON.stringify(this.curTableColumns))
|
|
} else {
|
|
let midColumns = this.columns
|
|
for (let i = 0; i < diffList.length; i++) {
|
|
midColumns = midColumns.filter((item) => item.dataIndex !== diffList[i])
|
|
}
|
|
this.curTableColumns = midColumns
|
|
localStorage.setItem(this.key, JSON.stringify(this.curTableColumns))
|
|
}
|
|
},
|
|
// 比较两个数组之间的不同,生成新数组
|
|
getArrDifference (arr1, arr2) {
|
|
const that = this
|
|
return arr1.concat(arr2).filter(function (v, i, arr) {
|
|
if (v !== that.defaultOperationKey) {
|
|
return arr.indexOf(v) === arr.lastIndexOf(v)
|
|
} else {
|
|
return false
|
|
}
|
|
})
|
|
},
|
|
fixedChange (e, dataIndex) {
|
|
if (e.target.value === LEFT_FROZEN) {
|
|
// 左侧冻结
|
|
this.curTableColumns.find((item) => {
|
|
if (item.dataIndex === dataIndex) {
|
|
item.fixed = 'left'
|
|
}
|
|
})
|
|
// // 左侧冻结,先把冻结项删除,再unshift到数组首位
|
|
// let arr
|
|
// for (let i = 0; i < this.curTableColumns.length; i++) {
|
|
// if (this.curTableColumns[i].dataIndex === dataIndex) {
|
|
// arr = this.curTableColumns.splice(i, 1)
|
|
// break
|
|
// }
|
|
// }
|
|
// this.curTableColumns.unshift(arr[0])
|
|
} else if (e.target.value === RIGHT_FROZEN) {
|
|
// 右侧冻结
|
|
this.curTableColumns.find((item) => {
|
|
if (item.dataIndex === dataIndex) {
|
|
item.fixed = 'right'
|
|
}
|
|
})
|
|
// 右侧冻结,先把冻结项删除,再push到数组末位
|
|
// let arr
|
|
// for (let i = 0; i < this.curTableColumns.length; i++) {
|
|
// if (this.curTableColumns[i].dataIndex === dataIndex) {
|
|
// arr = this.curTableColumns.splice(i, 1)
|
|
// break
|
|
// }
|
|
// }
|
|
// this.curTableColumns.push(arr[0])
|
|
} else {
|
|
this.curTableColumns.find((item) => {
|
|
// 解冻
|
|
if (item.dataIndex === dataIndex) {
|
|
item.fixed = false
|
|
}
|
|
})
|
|
// this.diffColunms()
|
|
}
|
|
},
|
|
// 列头重新排序
|
|
diffColunms () {
|
|
const newColumnsList = [] // 没有fixed属性的List
|
|
const newFixedLeftList = [] // fixed=left的List
|
|
const newFixedRightList = [] // fixed=right的List
|
|
this.curTableColumns.forEach((item) => {
|
|
if (!item.fixed) {
|
|
newColumnsList.push(item)
|
|
} else if (item.fixed === 'left') {
|
|
newFixedLeftList.push(item)
|
|
} else if (item.fixed === 'right') {
|
|
newFixedRightList.push(item)
|
|
}
|
|
})
|
|
// TODO 冒泡排序,根据key重新排序
|
|
// for (var i = 0; i < newColumnsList.length - 1; i++) {
|
|
// for (var j = 0; j < newColumnsList.length - 1 - i; j++) {
|
|
// if (newColumnsList[j].key > newColumnsList[j + 1].key) {
|
|
// [newColumnsList[j], newColumnsList[j + 1]] = [newColumnsList[j + 1], newColumnsList[j]]
|
|
// }
|
|
// }
|
|
// }
|
|
// 解构赋值,重新定义列头List
|
|
this.curTableColumns = [...[...newFixedLeftList, ...newColumnsList], ...newFixedRightList]
|
|
},
|
|
onClearSelected () {
|
|
this.selectedRowKeys = []
|
|
this.selectedRows = []
|
|
this.updateSelect([], [])
|
|
this.$emit('clearAll')
|
|
},
|
|
updateSelect (selectedRowKeys, selectedRows) {
|
|
this.selectedRowKeys = selectedRowKeys
|
|
const list = this.needTotalList
|
|
this.needTotalList = list.map(item => {
|
|
return {
|
|
...item,
|
|
total: selectedRows.reduce((sum, val) => {
|
|
const total = sum + get(val, item.dataIndex)
|
|
return isNaN(total) ? 0 : total
|
|
}, 0)
|
|
}
|
|
})
|
|
},
|
|
initTotalList (columns) {
|
|
const totalList = []
|
|
columns && columns instanceof Array && columns.forEach(column => {
|
|
if (column.needTotal) {
|
|
totalList.push({
|
|
...column,
|
|
total: 0
|
|
})
|
|
}
|
|
})
|
|
return totalList
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
.ant-dropdown-menu-submenu-popup {
|
|
width: 7.5rem;
|
|
}
|
|
|
|
.ant-checkbox-group-item {
|
|
line-height: 30px;
|
|
padding-left: 15px;
|
|
display: -webkit-box;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
/* autoprefixer: off */
|
|
-webkit-box-orient: vertical;
|
|
-moz-box-orient: vertical;
|
|
/* autoprefixer: on */
|
|
-webkit-line-clamp: 1;
|
|
word-wrap: break-word;
|
|
word-break: break-all;
|
|
}
|
|
</style>
|