KH/kh-device-admin
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>
jero-web/src/views/demo/list/JTableDemo.vue
-223
View File
@@ -1,223 +0,0 @@
<template>
<a-card :bordered="false">
<j-table
:isShowPage="isShowPage"
:pagination="pagination"
:isCheck="isCheck"
:isShowDropdown="isShowDropdown"
:dataSource="dataSource"
:columns="columns"
bordered
>
<!-- slot-scope参数必须加 {} 包裹，否则只能拿到一个对象 -->
<span slot="action" slot-scope="{text, record, index}">
<!-- text: {{ text }}-->
<!-- record:{{ record }}-->
<!-- index:{{ index }}-->
</span>
</j-table>
</a-card>
</template>
<script>
import JTable from '@/components/jero/JTable'
export default {
name: 'Jtable',
components: {
JTable
},
data () {
return {
isShowPage: true, // 是否显示分页
isCheck: false, // 是否多选
isShowDropdown: true, // 是否开启下拉功能
pagination: {
current: 1,
pageSize: 100,
pageSizeOptions: ['100', '200', '300'],
showQuickJumper: true,
showSizeChanger: true,
total: 0,
showTotal: (total, range) => {
return range[0] + '-' + range[1] + ' 共' + total + '条'
}
},
dataSource: [
{
key: '1',
name: '胡彦斌1',
age: 35,
address: '西湖区湖底公园1号',
address1: '西湖区湖底公园1号',
address2: '西湖区湖底公园1号',
address3: '西湖区湖底公园1号',
address4: '西湖区湖底公园1号',
address5: '西湖区湖底公园1号'
},
{
key: '2',
name: '胡彦斌2',
age: 32,
address: '西湖区湖底公园3号',
address1: '西湖区湖底公园1号',
address2: '西湖区湖底公园1号',
address3: '西湖区湖底公园1号',
address4: '西湖区湖底公园1号',
address5: '西湖区湖底公园1号'
},
{
key: '3',
name: '胡彦斌3',
age: 32,
address: '西湖区湖底公园5号',
address1: '西湖区湖底公园1号',
address2: '西湖区湖底公园1号',
address3: '西湖区湖底公园1号',
address4: '西湖区湖底公园1号',
address5: '西湖区湖底公园1号'
},
{
key: '4',
name: '胡彦斌4',
age: 32,
address: '西湖区湖底公园7号',
address1: '西湖区湖底公园1号',
address2: '西湖区湖底公园1号',
address3: '西湖区湖底公园1号',
address4: '西湖区湖底公园1号',
address5: '西湖区湖底公园1号'
},
{
key: '5',
name: '胡彦斌5',
age: 38,
address: '西湖区湖底公园9号',
address1: '西湖区湖底公园1号',
address2: '西湖区湖底公园1号',
address3: '西湖区湖底公园1号',
address4: '西湖区湖底公园1号',
address5: '西湖区湖底公园1号'
},
{
key: '6',
name: '胡彦斌6',
age: 32,
address: '西湖区湖底公园11号',
address1: '西湖区湖底公园1号',
address2: '西湖区湖底公园1号',
address3: '西湖区湖底公园1号',
address4: '西湖区湖底公园1号',
address5: '西湖区湖底公园1号'
}
],
columns: [
{
// title: '姓名',
dataIndex: 'name',
key: 1,
width: 200,
slots: {
title: '姓名',
// 冻结列头的参数
// 1为左侧冻结
// 2为右侧冻结
// 3为不冻结或解冻
fixedValue: 3
}
// fixed: 'right'
},
{
dataIndex: 'age',
key: 2,
width: 200,
slots: {
title: '年龄',
fixedValue: 3
},
sorter: true
},
{
dataIndex: 'address',
key: 3,
width: 200,
slots: {
title: '住址',
fixedValue: 3
},
sorter: (a, b) => a.address.length - b.address.length
},
{
// title: '住址1',
dataIndex: 'address1',
key: 4,
width: 200,
slots: {
title: '住址1',
fixedValue: 3
}
},
{
// title: '住址2',
dataIndex: 'address2',
key: 5,
width: 200,
slots: {
title: '住址2',
fixedValue: 3
}
},
{
// title: '住址3',
dataIndex: 'address3',
key: 6,
width: 200,
slots: {
title: '住址3',
fixedValue: 3
}
},
{
// title: '住址4',
dataIndex: 'address4',
key: 7,
width: 200,
slots: {
title: '住址4',
fixedValue: 3
}
},
{
// title: '住址5',
dataIndex: 'address5',
key: 8,
width: 500,
slots: {
title: '住址5',
fixedValue: 3
}
},
{
title: '操作',
dataIndex: 'address6',
key: 9,
width: 500,
slots: {
// title: '操作',
fixedValue: 2
},
scopedSlots: { customRender: 'action' }
}
]
}
},
mounted () {},
watch: {},
methods: {}
}
</script>
<style scoped>
</style>
jero-web/src/views/demo/list/RoleList.vue
-235
View File
@@ -1,235 +0,0 @@
<template>
<a-card :bordered="false">
<div class="table-page-search-wrapper">
<a-form layout="inline">
<a-row :gutter="48">
<a-col :md="8" :sm="24">
<a-form-item label="角色ID">
<a-input placeholder="请输入"/>
</a-form-item>
</a-col>
<a-col :md="8" :sm="24">
<a-form-item label="状态">
<a-select placeholder="请选择" default-value="0">
<a-select-option value="0">全部</a-select-option>
<a-select-option value="1">正常</a-select-option>
<a-select-option value="2">禁用</a-select-option>
</a-select>
</a-form-item>
</a-col>
<a-col :md="8" :sm="24">
<span class="table-page-search-submitButtons">
<a-button type="primary" @click="searchQuery">查询</a-button>
<a-button style="margin-left: 8px" @click="searchReset">重置</a-button>
</span>
</a-col>
</a-row>
</a-form>
</div>
<j-table
ref="jTable"
size="default"
:columns="columns"
:dataSource="dataSource"
>
<div
slot="expandedRowRender"
slot-scope="{record}"
style="margin: 0">
<a-row
:gutter="24"
:style="{ marginBottom: '12px' }">
<a-col :span="12" v-for="(role, index) in record.permissions" :key="index" :style="{ marginBottom: '12px' }">
<a-col :span="4">
<span>{{ role.permissionName }}：</span>
</a-col>
<a-col :span="20" v-if="role.actionEntitySet.length > 0">
<a-tag color="cyan" v-for="(action, k) in role.actionEntitySet" :key="k">{{ action.describe }}</a-tag>
</a-col>
<a-col :span="20" v-else>-</a-col>
</a-col>
</a-row>
</div>
<span slot="action" slot-scope="{text, record}">
<a @click="$refs.modal.edit(record)">编辑</a>
<a-divider type="vertical" />
<a-dropdown>
<a class="ant-dropdown-link">
更多 <a-icon type="down" />
</a>
<a-menu slot="overlay">
<a-menu-item>
<a href="javascript:;">详情</a>
</a-menu-item>
<a-menu-item>
<a href="javascript:;">禁用</a>
</a-menu-item>
<a-menu-item>
<a href="javascript:;">删除</a>
</a-menu-item>
</a-menu>
</a-dropdown>
</span>
</j-table>
<role-modal ref="modal" @ok="handleOk"></role-modal>
</a-card>
</template>
<script>
import JTable from '@/components/jero/JTable'
import RoleModal from './modules/RoleModal'
import { getAction } from '@api/manage'
import { filterObj } from '@/utils/util'
export default {
name: 'TableList',
components: {
JTable,
RoleModal
},
data () {
return {
description: '列表使用场景：后台管理中的权限管理以及角色管理，可用于基于 RBAC 设计的角色权限控制，颗粒度细到每一个操作类型。',
mdl: {},
// 高级搜索 展开/关闭
advanced: false,
// 查询参数
queryParam: {},
// 表头
columns: [
{
dataIndex: 'id',
slots: {
title: '唯一识别码',
fixedValue: 3
}
},
{
dataIndex: 'name',
slots: {
title: '角色名称',
fixedValue: 3
}
},
{
dataIndex: 'status',
slots: {
title: '状态',
fixedValue: 3
}
},
{
dataIndex: 'createTime',
sorter: true,
slots: {
title: '创建时间',
fixedValue: 3
}
}, {
title: '操作',
width: '150px',
dataIndex: 'action',
scopedSlots: { customRender: 'action' }
}
],
dataSource: [],
url: {
list: '/mock/api/role'
}
}
},
mounted () {
this.loadData()
},
methods: {
// 加载数据方法 必须为 Promise 对象
loadData (arg) {
if (!this.url.list) {
this.$message.error('请设置url.list属性!')
return
}
// 加载数据 若传入参数1则加载第一页的内容
if (arg === 1) {
this.$refs.jTable.ispagination.current = 1
}
// 加载数据 若传入参数1则加载第一页的内容
var params = this.getQueryParams()// 查询条件
this.loading = true
getAction(this.url.list, params).then((res) => {
// update-begin---author:zhangyafei Date:20201118 for：适配不分页的数据列表------------
this.dataSource = res.result.data || res.result
if (res.result.total) {
this.$refs.jTable.ispagination.total = res.result.total
} else {
this.$refs.jTable.ispagination.total = 0
}
// update-end---author:zhangyafei Date:20201118 for：适配不分页的数据列表------------
if (res.status === 510) {
this.$message.warning(res.message)
}
this.loading = false
})
// return this.$http.get('/mock/api/role', {
// params: Object.assign(parameter, this.queryParam)
// }).then(res => {
// return res.result
// })
},
handleEdit (record) {
this.mdl = Object.assign({}, record)
this.mdl.permissions.forEach(permission => {
permission.actionsOptions = permission.actionEntitySet.map(action => {
return { label: action.describe, value: action.action, defaultCheck: action.defaultCheck }
})
})
console.log(this.mdl)
this.visible = true
},
handleOk () {
// 新增/修改 成功时，重载列表
this.$refs.jTable.refresh()
},
onChange (selectedRowKeys, selectedRows) {
this.selectedRowKeys = selectedRowKeys
this.selectedRows = selectedRows
},
toggleAdvanced () {
this.advanced = !this.advanced
},
getQueryParams () {
// 获取查询条件
const sqp = {}
if (this.superQueryParams) {
sqp.superQueryParams = encodeURI(this.superQueryParams)
sqp.superQueryMatchType = this.superQueryMatchType
}
var param = Object.assign(sqp, this.queryParam, this.isorter, this.filters)
param.field = this.getQueryField()
param.pageNo = this.$refs.jTable.ispagination.current
param.pageSize = this.$refs.jTable.ispagination.pageSize
return filterObj(param)
},
getQueryField () {
var str = 'id,'
this.columns.forEach(function (value) {
str += ',' + value.dataIndex
})
return str
},
searchQuery () {
this.loadData(1)
},
searchReset () {
this.queryParam = {}
this.loadData(1)
}
}
}
</script>