|
<template>
<div class="authorization-container">
<div class="left-container">
<div class="title">
<div>角色列表</div>
</div>
<div class="table-content">
<t-table :data="table.data" highlight-current-row @current-change="handleCurrentChange">
<t-table-column prop="name" label="角色名称"></t-table-column>
<t-table-column prop="number" label="角色编码"></t-table-column>
</t-table>
<t-pager :total="table.pager.total" :current.sync="table.pager.currentPage"
:page-size.sync="table.pager.size"
class="px-24 pt-16 float-right"
show-elevator
@on-size-change="onSizeChange"
@on-change="onPagerChange">
</t-pager>
</div>
</div>
<div class="transfer-container">
<t-transfer
ref="transfer"
:data="dataTable"
:target-keys="targetKeys"
:selected-keys="targetKeysTable"
:operations="['← 绑定','解绑 →']"
:titles="['已关联菜单','可关联菜单']"
@change="changeTransfer"
>
<div slot="listBodyLeft" slot-scope="tableLeft">
<t-tree ref="leftTree" :multiple="true"
:with-ancestors="true"
:with-descendants="true"
:node-data="tableLeft.data" @select="changeLeftTree"
></t-tree>
</div>
<div slot="listBodyRight" slot-scope="tableRight">
<t-tree ref="rightTree" :multiple="true"
:with-ancestors="true"
:with-descendants="true"
:node-data="tableRight.data" @select="changeRightTree"
></t-tree>
</div>
</t-transfer>
</div>
</div>
</template>
<script>
import './menu-authorization.scss'
export default {
data() {
return {
table: {
data: [
{
name: '超级管理员',
number: 'superadmin'
},
{
name: '超级管理员',
number: 'superadmin'
},
{
name: '超级管理员',
number: 'superadmin'
}
],
pager: {
currentPage: 1,
size: 10,
total: 0
}
},
dataTable: [
{
key: '1',
label: '地图监控',
title: '地图监控',
id: '1'
},
{
key: '2',
label: '智能报警',
title: '智能报警',
value: 'node_2',
id: '2'
},
{
key: '3',
label: '统计报表',
title: '统计报表',
value: 'node_5',
id: '3'
},
{
key: '4',
label: '轨迹分析',
title: '轨迹分析',
value: 'node_3',
id: '4',
pid: '3'
},
{
key: '5',
label: '作业考勤',
title: '作业考勤',
value: 'node_4',
id: '5',
pid: '3'
},
{
key: '6',
label: '系统管理',
title: '系统管理',
id: '6'
},
{
key: '7',
label: '终端管理',
title: '终端管理',
id: '7',
pid: '6'
},
{
key: '8',
label: '地图标记',
title: '地图标记',
pid: '3',
id: '8'
}
],
targetKeysTable: [],
targetKeys: [],
copyData: [],
removeData: []
}
},
methods: {
handleCurrentChange(val) {
this.currentRow = val
},
changeTransfer(targetKeys, direction, moveKeys) {
console.log('change', targetKeys, direction, moveKeys)
if (this.copyData.length > 0) {
// this.dataTable = this.dataTable.concat(this.copyData)
// this.targetKeysTable.push(this.copyData.id)
this.copyData.forEach(element => {
this.dataTable.splice(element.index, 0, element)
})
this.copyData = []
}
if (this.removeData.length > 0) {
console.log(this.removeData)
this.removeData.forEach(element => {
this.dataTable.splice(element.index, 1)
})
this.removeData = []
}
console.log(this.targetKeysTable)
},
changeLeftTree(ids) {
console.log(ids)
var transferId = []
ids.forEach(id => {
console.log(this.isContained(ids, this.$refs.leftTree.getNodeStateById(id).children))
if (this.$refs.leftTree.getNodeStateById(id).children && this.isContained(ids, this.$refs.leftTree.getNodeStateById(id).children)) {
// 修改子节点的pid
var includeFlag = true
this.$refs.leftTree.getNodeStateById(id).children.forEach(elementChild => {
// 不含在选中的ids
if (ids.indexOf(elementChild) === -1) {
includeFlag = false
this.dataTable.forEach(elementChildTable => {
if (elementChildTable.id === elementChild) {
if (elementChildTable.pid.indexOf('copy') === -1) {
elementChildTable.pid = 'copy' + elementChildTable.pid
}
}
})
} else {
this.dataTable.forEach(elementChildTable => {
if (elementChildTable.id === elementChild) {
if (elementChildTable.pid.indexOf('copy') !== -1) {
elementChildTable.pid = elementChildTable.pid.slice(4)
}
}
})
}
})
if (id.indexOf('copy') === -1) {
var flag = false
this.copyData.forEach(element => {
if (element.id === 'copy' + id) {
flag = true
}
})
if (!flag) {
var dataIndex = 0
this.dataTable.forEach((e, index) => {
if (e.id === id) {
dataIndex = index
}
})
this.copyData.push({
key: 'copy' + id,
label: this.$refs.leftTree.getNodeStateById(id).label,
title: this.$refs.leftTree.getNodeStateById(id).title,
id: 'copy' + id,
index: dataIndex
})
}
if (includeFlag) {
var includeIndex = 0
this.dataTable.forEach((e, index) => {
if (e.id === id) {
includeIndex = index
}
})
this.removeData.push({
key: id,
label: this.$refs.leftTree.getNodeStateById(id).label,
title: this.$refs.leftTree.getNodeStateById(id).title,
id: id,
index: includeIndex
})
}
} else {
if (includeFlag) {
var includeIndex = 0
this.dataTable.forEach((e, index) => {
if (e.id === id) {
includeIndex = index
}
})
this.removeData.push({
key: id,
label: this.$refs.leftTree.getNodeStateById(id).label,
title: this.$refs.leftTree.getNodeStateById(id).title,
id: id,
index: includeIndex
})
}
}
}
if (id.indexOf('copy') === -1) {
transferId.push(id)
} else {
console.log(this.$refs.leftTree.getNodeStateById(id).children)
if (!this.$refs.leftTree.getNodeStateById(id).children) {
console.log(123213, id)
}
}
})
console.log(transferId)
this.targetKeysTable = transferId
},
changeRightTree(ids) {
console.log(ids)
var transferId = []
ids.forEach(id => {
console.log(this.$refs.rightTree.getNodeStateById(id))
if (this.$refs.rightTree.getNodeStateById(id).children && this.isContained(ids, this.$refs.rightTree.getNodeStateById(id).children)) {
// 修改子节点的pid
var includeFlag = true
this.$refs.rightTree.getNodeStateById(id).children.forEach(elementChild => {
// 不含在选中的ids
if (ids.indexOf(elementChild) === -1) {
includeFlag = false
// this.dataTable.forEach(elementChildTable => {
// if (elementChildTable.id === elementChild) {
// if (elementChildTable.pid.indexOf('copy') === -1) {
// elementChildTable.pid = 'copy' + elementChildTable.pid
// }
// }
// })
} else {
// this.dataTable.forEach(elementChildTable => {
// if (elementChildTable.id === elementChild) {
// if (elementChildTable.pid.indexOf('copy') !== -1) {
// elementChildTable.pid = elementChildTable.pid.slice(4)
// }
// }
// })
this.dataTable.forEach(elementChildTable => {
if (elementChildTable.id === elementChild) {
if (elementChildTable.pid.indexOf('copy') === -1) {
elementChildTable.pid = 'copy' + elementChildTable.pid
}
}
})
}
})
if (includeFlag) {
transferId.push(id)
var includeIndex = 0
this.dataTable.forEach((e, index) => {
if (e.id === id) {
includeIndex = index
}
})
this.removeData.push({
key: id,
label: this.$refs.rightTree.getNodeStateById(id).label,
title: this.$refs.rightTree.getNodeStateById(id).title,
id: id,
index: includeIndex
})
} else {
var dataIndex = 0
this.dataTable.forEach((e, index) => {
if (e.id === id) {
dataIndex = index
}
})
this.copyData.push({
key: 'copy' + id,
label: this.$refs.rightTree.getNodeStateById(id).label,
title: this.$refs.rightTree.getNodeStateById(id).title,
id: 'copy' + id,
index: dataIndex
})
}
} else {
transferId.push(id)
}
if (id.indexOf('copy') === -1) {
// transferId.push(id)
} else {
console.log(this.$refs.rightTree.getNodeStateById(id).children)
if (!this.$refs.rightTree.getNodeStateById(id).children) {
console.log(123213, id)
}
}
})
console.log(transferId)
this.targetKeysTable = transferId
},
onPagerChange(page) {
},
onSizeChange(number) {
},
isContained (a, b) {
if (!(a instanceof Array) || !(b instanceof Array)) return false
// if (a.length < b.length) return false
var aStr = a.toString()
for (var i = 0, len = b.length; i < len; i++) {
if (aStr.indexOf(b[i]) !== -1) return true
}
return false
}
}
}
</script>
|
