去除现有的Jtable表格
This commit is contained in:
zer0Black
@@ -1,399 +0,0 @@
|
|||||||
<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>
|
|
||||||
@@ -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>
|
|
||||||
@@ -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>
|
|
||||||
Reference in New Issue
Block a user