<template>
|
<a-modal :visible="visible" :title="title" width="50%" :maskClosable="false" @cancel="handleModalClose"
|
:footer="null">
|
<a-form-model layout="inline">
|
<a-form-item label="名称">
|
<a-input readOnly :value="currentTreeNodeInfo.label"></a-input>
|
</a-form-item>
|
<a-form-item label="是否同时配置子节点">
|
<a-switch v-model="isAssignSonNode"></a-switch>
|
</a-form-item>
|
</a-form-model>
|
|
<a-tabs v-model="activeTabKey">
|
<a-tab-pane :key="1" tab="分配车间">
|
<DepartPermissionTransfer ref="departPermissionTransferRef" :currentTreeNodeInfo="currentTreeNodeInfo"
|
:treeDataProps="allDepartmentsList" :allTreeKeys="allTreeKeys"
|
:isAssignSonNode="isAssignSonNode"/>
|
</a-tab-pane>
|
|
<a-tab-pane :key="2" tab="分配用户">
|
<UserPermissionTransfer ref="userPermissionTransferRef" :currentTreeNodeInfo="currentTreeNodeInfo"
|
:dataSource="allUsersList" :isAssignSonNode="isAssignSonNode"/>
|
</a-tab-pane>
|
</a-tabs>
|
</a-modal>
|
</template>
|
|
<script>
|
import dncApi from '@/api/dnc'
|
import DepartPermissionTransfer from './DepartPermissionTransfer'
|
import UserPermissionTransfer from './UserPermissionTransfer'
|
import { queryProductionTreeList } from '@/api/api'
|
|
export default {
|
name: 'AssignPermissionModal',
|
components: { UserPermissionTransfer, DepartPermissionTransfer },
|
props: {
|
currentTreeNodeInfo: {
|
type: Object
|
}
|
},
|
data() {
|
return {
|
visible: false,
|
title: '',
|
isAssignSonNode: true,
|
activeTabKey: 1,
|
allDepartmentsList: [],
|
allUsersList: [],
|
allTreeKeys: [],
|
hasLoadedDataTabKeyArray: []
|
}
|
},
|
watch: {
|
visible: {
|
handler(value) {
|
if (value) {
|
this.activeTabKey = 1
|
this.isAssignSonNode = true
|
this.getAllDepartmentsListByApi()
|
}
|
}
|
},
|
activeTabKey: {
|
handler(value) {
|
if (this.hasLoadedDataTabKeyArray.includes(value)) return
|
if (value === 2) this.getAllUsersListByApi()
|
this.hasLoadedDataTabKeyArray.push(value)
|
}
|
}
|
},
|
created() {
|
this.$bus.$on('treeMenuItemMethodTrigger', this.triggerCorrespondingMethod)
|
},
|
methods: {
|
// 点击树节点右键菜单权限配置按钮后触发
|
handleAssignPermission() {
|
this.visible = true
|
},
|
|
// 调用接口获取所有车间列表
|
getAllDepartmentsListByApi() {
|
this.allTreeKeys = []
|
queryProductionTreeList()
|
.then(res => {
|
console.log('res-------------------', res)
|
if (res.success) {
|
this.allDepartmentsList = res.result
|
this.generateList(this.allDepartmentsList)
|
this.$nextTick(() => {
|
this.$refs.departPermissionTransferRef.getHasPermissionDepartByApi()
|
this.$refs.departPermissionTransferRef.expandedKeys = this.allTreeKeys
|
this.$refs.departPermissionTransferRef.flatten(JSON.parse(JSON.stringify(this.allDepartmentsList)))
|
})
|
// 只有上次退出时在车间分配tab界面才会进入此判断
|
// 若上次退出时在用户分配tab界面则再次进入时key由2变为1时会触发watch监测activeTabKey变化则会将key:1加入hasLoadedDataTabKeyArray，因此无需再次加入key:1
|
if (!this.hasLoadedDataTabKeyArray.includes(this.activeTabKey)) this.hasLoadedDataTabKeyArray.push(this.activeTabKey)
|
}
|
})
|
},
|
|
/**
|
* 递归获得所有树节点key
|
* @param data
|
*/
|
generateList(data) {
|
for (let i = 0; i < data.length; i++) {
|
const node = data[i]
|
const key = node.key
|
this.allTreeKeys.push(key)
|
if (node.children) this.generateList(node.children)
|
}
|
},
|
|
// 调用接口获取所有用户列表
|
getAllUsersListByApi() {
|
dncApi.getAllUsersListApi()
|
.then(res => {
|
if (res.success) {
|
this.allUsersList = res.result.records.map(item => {
|
return {
|
...item,
|
disabled: item.username === 'admin'
|
}
|
})
|
this.$nextTick(() => this.$refs.userPermissionTransferRef.getHasPermissionUserByApi())
|
}
|
})
|
},
|
|
handleModalClose() {
|
this.visible = false
|
this.hasLoadedDataTabKeyArray = []
|
},
|
|
triggerCorrespondingMethod({ methodName, modalTitle }) {
|
if (this[methodName]) {
|
this[methodName]()
|
this.title = modalTitle
|
}
|
}
|
}
|
}
|
</script>
|
|
<style scoped>
|
|
</style>
|
