数据权限更换动态渲染

src/api/menu.js

@@ -147,5 +147,11 @@ export function saveDataPermission (data) {
 
 // 获取数据权限
 export function getDataPermission (data) {
-  return http.post('/authentication/role/data/config/item/list', data)
+  return http.post('/authentication/role/data/fun/permission/list', data)
+  // return http.post('/authentication/role/data/config/item/list', data)
 }
+
+// 获取数据权限
+// export function getDataPermission (data) {
+//   return http.post('/authentication/role/data/fun/permission/list ', data)
+// }

src/views/system/role/roleData.vue

@@ -11,36 +11,34 @@
             权限选择
           </el-row>
           <el-row v-for="(data, index) in dataItems" :key="index" class="mb-3">
-            <el-col :span="8">{{ data.funName || '名称获取异常' }}</el-col>
+            <el-col :span="8">{{ data.title || '名称获取异常' }}</el-col>
             <el-col :span="16">
               <el-select
-                v-model="data.value"
+                v-model="data.defaultChecked"
                 placeholder="请选择数据权限"
-                @change="onChange(data)"
+                @change="e => onChange(data, e)"
               >
                 <el-option
-                  v-for="(value, i) in data.values"
-                  :key="value.label + i"
-                  :label="value.label"
-                  :value="value.value"
-                  :disabled="value.disable"
+                  v-for="item in data.items"
+                  :key="item.label + index"
+                  :label="item.label"
+                  :value="item.value"
                 ></el-option>
               </el-select>
               <m-card
-                v-if="data.value === 3"
+                v-if="data.showPanel"
                 shadow="never"
                 class="mt-3"
                 :body-style="{
                   'max-height': '200px',
                   'overflow-y': 'auto'
-                }">
+                }"
+              >
                 <el-tree
-                  :data="treeItems"
+                  :data="data.showPanel.items"
                   show-checkbox
-                  node-key="organizationNo"
-                  :default-expanded-keys="expandRowKeys"
-                  :default-checked-keys="data.items"
-                  :props="{ label: 'organizationName', children: 'child'}"
+                  node-key="value"
+                  :default-checked-keys="data.showPanel.props?.defaultCheckedKeys ?? []"
                   @check="(_, treeObj) => onCheck(data, treeObj)"
                 ></el-tree>
               </m-card>
@@ -54,11 +52,6 @@
 
 <script>
 import { saveDataPermission, getDataPermission } from '@/api/menu'
-import { getRoleDataPermissionList } from '@/api/user'
-
-import {
-  getOrganizationTree
-} from '@/utils/dict'
 export default {
   name: 'role-data',
   data () {
@@ -70,9 +63,6 @@ export default {
       expandRowKeys: []
     }
   },
-  created () {
-    this.getOrganization()
-  },
   methods: {
     async open (item) {
       this.loading = true
@@ -86,30 +76,39 @@ export default {
     },
     async getList (roleId) {
       try {
-        const { data: _data } = await getDataPermission({ entity: { roleId } })
-
-        const { data } = await getRoleDataPermissionList()
+        const { data } = await getDataPermission({ roleId })
         this.dataItems = data.map(e => {
-          const item = _data.records.find(_e => _e.funCode === e.funCode)
+          const tree = e.items.find(_e => _e.value === e.defaultChecked)?.tree
           return {
-            funCode: e.funCode,
-            funName: e.funName,
-            value: item?.roleType ?? 2,
-            items: item?.roleValue?.split(',') ?? [],
-            values: [
-              { label: '不限', value: 2 },
-              { label: '本部门权限', value: 0, disable: !e.organization },
-              { label: '仅本人权限', value: 1, disable: !e.employee },
-              { label: '指定机构权限', value: 3 }
-            ]
+            ...e,
+            showPanel: tree
           }
         })
+        // const { data } = await getRoleDataPermissionList()
+        // this.dataItems = data.map(e => {
+        //   const item = _data.records.find(_e => _e.funCode === e.funCode)
+        //   return {
+        //     funCode: e.funCode,
+        //     funName: e.funName,
+        //     value: item?.roleType ?? 2,
+        //     items: item?.roleValue?.split(',') ?? [],
+        //     values: [
+        //       { label: '不限', value: 2 },
+        //       { label: '本部门权限', value: 0, disable: !e.organization },
+        //       { label: '仅本人权限', value: 1, disable: !e.employee },
+        //       { label: '指定机构权限', value: 3 }
+        //     ]
+        //   }
+        // })
       } catch (error) {
         this.$message.error(error)
       }
     },
     async handleSave () {
-      if (!this.dataItems.every(e => e.value !== 3 || e.items.length > 0)) {
+      const check = this.dataItems.some(e => {
+        return e.showPanel && !e.showPanel.props.values?.length
+      })
+      if (check) {
         this.$message.error('请选择指定机构权限')
         return
       }
@@ -119,9 +118,9 @@ export default {
           items: this.dataItems.map(e => {
             return {
               funCode: e.funCode,
-              roleType: e.value,
+              roleType: e.defaultChecked,
               wrType: 2,
-              roleValue: e.value === 3 ? e.items.join(',') : undefined
+              roleValue: !e.showPanel ? undefined : JSON.stringify(e.showPanel.props?.values)
             }
           })
         })
@@ -132,16 +131,17 @@ export default {
         this.$message.error(error)
       }
     },
-    onCheck (data, treeObj) {
-      data.items = treeObj.checkedKeys
-    },
-    onChange (data) {
-      data.items = []
+    onCheck ({ showPanel }, treeObj) {
+      if (showPanel) {
+        showPanel.props.values = treeObj.checkedNodes.filter(e => !e.children).map(e => e.tag)
+      }
     },
-    async getOrganization () {
-      const data = await getOrganizationTree()
-      this.expandRowKeys = [data[0].organizationNo]
-      this.treeItems = data
+    onChange (data, e) {
+      const tree = data.items.find(_e => _e.value === e)?.tree
+      data.showPanel = tree
+      if (tree) {
+        tree.props.values = []
+      }
     }
   }
 }