JeroBoot/base
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

去除现有的Jtable表格

Browse Source
This commit is contained in:
zer0Black
2023-03-03 11:55:50 +08:00
parent de53a72187
commit 7c3c89746d
3 changed files with 0 additions and 857 deletions
Download Patch File Download Diff File Expand all files Collapse all files
jero-web/src/components/jero/JTable.vue
-399
View File
@@ -1,399 +0,0 @@
<template>
<div>
<div class="alert" v-if="showAlertInfo">
<a-alert type="info" :show-icon="true">
<div slot="message">
已选择&nbsp;<a style="font-weight: 600">{{ selectedRows.length }}</a>&nbsp;&nbsp;
<template v-for="(item, index) in needTotalList" v-if="item.needTotal">
{{ item.slot.title }} 总计&nbsp;
<a :key="index" style="font-weight: 600">
{{ item.customRender ? item.customRender(item.total) : item.total }}
</a>&nbsp;&nbsp;
</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>