<template>
|
<a-spin :spinning="spinning">
|
<a-transfer
|
class="tree-transfer"
|
:data-source="dataSource"
|
show-search
|
:list-style="{flex:1,height: '500px'}"
|
:titles="['未分配部门', '已分配部门']"
|
:operations="['分配部门', '移除部门']"
|
:target-keys="targetKeys"
|
:render="item => `${item.title}`"
|
@change="handleChange"
|
@search="handleSearch"
|
>
|
<template slot="children" slot-scope="{ props: { direction, selectedKeys }, on: { itemSelect } }">
|
<a-tree
|
v-if="direction === 'left'"
|
blockNode
|
checkable
|
checkStrictly
|
:expandedKeys="expandedKeys"
|
:autoExpandParent="autoExpandParent"
|
@expand="handleTreeNodeExpand"
|
:checkedKeys="[...selectedKeys, ...targetKeys]"
|
:treeData="treeData"
|
@check="(_, props) => {onChecked(_, props, [...selectedKeys, ...targetKeys], itemSelect);}"
|
@select="(_, props) => {onChecked(_, props, [...selectedKeys, ...targetKeys], itemSelect); }">
|
<template slot="title" slot-scope="{title}">
|
<span v-if="title.indexOf(searchValue) > -1">{{ title.substr(0, title.indexOf(searchValue)) }}<span
|
class="replaceSearch">{{ searchValue }}</span>{{ title.substr(title.indexOf(searchValue) + searchValue.length) }}</span>
|
<span v-else>{{ title }}</span>
|
</template>
|
</a-tree>
|
</template>
|
|
<template slot="footer" slot-scope="{direction}" v-if="direction==='left'">
|
<a-button type="primary" style="float:right;margin: 5px;margin-right: 10px"
|
@click="isExpandAllTreeNode=!isExpandAllTreeNode">
|
展开/折叠
|
</a-button>
|
</template>
|
|
<span slot="notFoundContent">暂无数据</span>
|
</a-transfer>
|
</a-spin>
|
</template>
|
|
<script>
|
import dncApi from '@/api/dnc'
|
|
const transferDataSource = []
|
|
export default {
|
name: 'DepartPermissionTransfer',
|
components: {},
|
props: {
|
currentTreeNodeInfo: {
|
type: Object
|
},
|
allTreeKeys: {
|
type: Array
|
},
|
treeDataProps: {
|
type: Array
|
},
|
isAssignSonNode: {
|
type: Boolean
|
}
|
},
|
data() {
|
return {
|
targetKeys: [],
|
spinning: false,
|
isExpandAllTreeNode: true,
|
searchValue: '',
|
expandedKeys: [],
|
autoExpandParent: true,
|
dataSource: []
|
}
|
},
|
watch: {
|
isExpandAllTreeNode: {
|
handler(value) {
|
if (value) this.expandedKeys = this.allTreeKeys
|
else this.expandedKeys = []
|
}
|
}
|
},
|
computed: {
|
treeData() {
|
return this.handleTreeData(this.treeDataProps, this.targetKeys)
|
}
|
},
|
methods: {
|
// 调用接口获取有权限的部门列表
|
getHasPermissionDepartByApi() {
|
const that = this
|
that.spinning = true
|
that.targetKeys = []
|
that.dataSource = []
|
dncApi.getHasPermissionDepartApi(that.currentTreeNodeInfo)
|
.then(res => {
|
if (res.success) that.targetKeys = res.list.map(item => item.id)
|
})
|
.finally(() => {
|
that.spinning = false
|
})
|
},
|
|
/**
|
* 穿梭框搜索框输入时触发
|
* @param direction 穿梭框的左右 "left"||"right"
|
* @param value 输入值
|
*/
|
handleSearch(direction, value) {
|
if (direction === 'left') {
|
let search = value
|
let expandedKeys = this.dataSource
|
.map(item => {
|
if (item.title != null) {
|
if (item.title.indexOf(search) > -1) {
|
return this.getParentKey(item.key, this.treeDataProps)
|
}
|
return null
|
}
|
})
|
.filter((item, i, self) => item && self.indexOf(item) === i)
|
Object.assign(this, {
|
expandedKeys,
|
searchValue: search,
|
autoExpandParent: true
|
})
|
}
|
},
|
|
handleChange(targetKeys, direction, moveKeys) {
|
const { currentTreeNodeInfo: { type, id }, isAssignSonNode, $notification } = this
|
const that = this
|
let method
|
const params = {
|
treeNodeType: type,
|
treeNodeId: id,
|
isAssignSonNode: isAssignSonNode ? 1 : 2,
|
departIdArray: moveKeys
|
}
|
console.log('params--------------------------', params)
|
console.log(targetKeys, direction, moveKeys)
|
if (direction === 'right') {
|
method = dncApi.assignPermissionToDepart
|
} else {
|
method = dncApi.removePermissionFromDepart
|
}
|
that.spinning = true
|
method(params)
|
.then(res => {
|
if (res.success) {
|
$notification.success({
|
message: '消息',
|
description: res.message
|
})
|
this.targetKeys = targetKeys
|
} else {
|
$notification.error({
|
message: '消息',
|
description: res.message
|
})
|
}
|
})
|
.catch(err => {
|
$notification.error({
|
message: '消息',
|
description: err.message
|
})
|
})
|
.finally(() => {
|
that.spinning = false
|
})
|
},
|
|
onChecked(_, e, checkedKeys, itemSelect) {
|
const { eventKey } = e.node
|
itemSelect(eventKey, !this.isChecked(checkedKeys, eventKey))
|
},
|
|
handleTreeData(data, targetKeys = []) {
|
data.forEach(item => {
|
item['disabled'] = targetKeys.includes(item.key)
|
if (item.children) {
|
this.handleTreeData(item.children, targetKeys)
|
}
|
})
|
return data
|
},
|
|
handleTreeNodeExpand(expandedKeys) {
|
this.expandedKeys = expandedKeys
|
this.autoExpandParent = false
|
},
|
|
/**
|
* 递归获得输入项的父级key
|
* @param key 子项key
|
* @param tree 子项
|
*/
|
getParentKey(key, tree) {
|
let parentKey
|
for (let i = 0; i < tree.length; i++) {
|
const node = tree[i]
|
if (node.children) {
|
if (node.children.some(item => item.key === key)) {
|
parentKey = node.key
|
} else if (
|
this.getParentKey(key, node.children)) {
|
parentKey = this.getParentKey(key, node.children)
|
}
|
}
|
}
|
return parentKey
|
},
|
|
isChecked(selectedKeys, eventKey) {
|
return selectedKeys.indexOf(eventKey) !== -1
|
},
|
|
flatten(list = []) {
|
list.forEach(item => {
|
const transformedItem = {
|
key: item.key,
|
title: item.title,
|
children: item.children
|
}
|
this.dataSource.push(transformedItem)
|
if (transformedItem.children) {
|
this.flatten(transformedItem.children)
|
}
|
})
|
}
|
}
|
}
|
</script>
|
|
<style scoped lang="less">
|
.tree-transfer {
|
display: flex;
|
align-items: center;
|
|
::-webkit-scrollbar {
|
width: 8px;
|
}
|
}
|
|
.tree-transfer .ant-transfer-list .ant-transfer-list-body {
|
display: flex;
|
flex-direction: column;
|
}
|
|
/deep/ .ant-transfer-list-body {
|
display: flex;
|
flex-direction: column;
|
.ant-transfer-list-body-customize-wrapper {
|
flex: 1;
|
overflow: auto;
|
}
|
}
|
|
.replaceSearch {
|
color: #40a9ff;
|
font-weight: bold;
|
background-color: rgb(204, 204, 204);
|
}
|
</style>
|
