zhaowei
2025-01-22 c5605aafbbb7678d91cefac28b3b6c1524809b46
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
<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"
                                      :dataSource="allDepartmentsList" :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'
 
  export default {
    name: 'AssignPermissionModal',
    components: { UserPermissionTransfer, DepartPermissionTransfer },
    props: {
      currentTreeNodeInfo: {
        type: Object
      }
    },
    data() {
      return {
        visible: false,
        title: '',
        isAssignSonNode: true,
        activeTabKey: 1,
        allDepartmentsList: [],
        allUsersList: [],
        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() {
        dncApi.getAllDepartmentsListApi()
          .then(res => {
            if (res.success) {
              this.allDepartmentsList = res.list
              this.$nextTick(() => this.$refs.departPermissionTransferRef.getHasPermissionDepartByApi())
              // 只有上次退出时在部门分配tab界面才会进入此判断
              // 若上次退出时在用户分配tab界面则再次进入时key由2变为1时会触发watch监测activeTabKey变化则会将key:1加入hasLoadedDataTabKeyArray,因此无需再次加入key:1
              if (!this.hasLoadedDataTabKeyArray.includes(this.activeTabKey)) this.hasLoadedDataTabKeyArray.push(this.activeTabKey)
            }
          })
      },
 
      // 调用接口获取所有用户列表
      getAllUsersListByApi() {
        dncApi.getAllUsersListApi()
          .then(res => {
            if (res.success) {
              this.allUsersList = res.result.records
              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>