• vue 权限分组

    在权限设计时，分为部门、岗位、人员三部分， 人员下面挂部门，部门下面挂岗位，岗位下面挂菜单，用户在进行授权时，勾选了操作权限，默认数据权限也进行勾选。

    权限组：查询、新增、修改、删除

    用户交互如下：

    1、选中新增、修改、删除中的任何一个复选框时，查询框也选中。

    2、选中查询框时，新增、修改、删除不变。

    3、取消选中查询框时，新增、修改、删除都取消选中。

    代码如下：

    2.  
    3. <script>
    4. export default {
    5.   data() {
    6.     return {
    7.       menuTree: [
    8.         {
    9.           id: '1717148200757',
    10.           code: 'departmentManagement',
    11.           title: '部门管理 ',
    12.           name: '部门管理 ',
    13.           parentIdId: null,
    14.           children: [
    15.             {
    16.               id: '1717148287418',
    17.               parentIdId: '1717148200757',
    18.               code: 'department',
    19.               title: '部门',
    20.               name: '部门 ',
    21.               children: [
    22.                 {
    23.                   id: 'department:query',
    24.                   code: 'department:query',
    25.                   name: '查询',
    26.                   title: '查询',
    27.                   parentIdId: '1717148287418',
    28.                   dataPermission: true
    29.                 },
    30.                 {
    31.                   id: 'department:add',
    32.                   code: 'department:add',
    33.                   name: '新增',
    34.                   title: '新增',
    35.                   parentIdId: '1717148287418',
    36.                   dataPermission: false
    37.                 },
    38.                 {
    39.                   id: 'department:update',
    40.                   code: 'department:update',
    41.                   name: '修改',
    42.                   title: '修改',
    43.                   parentIdId: '1717148287418',
    44.                   dataPermission: false
    45.                 },
    46.                 {
    47.                   id: 'department:delete',
    48.                   code: 'department:delete',
    49.                   name: '删除',
    50.                   title: '删除',
    51.                   parentIdId: '1717148287418',
    52.                   dataPermission: false
    53.                 }
    54.               ]
    55.             }
    56.           ]
    57.         },
    58.         {
    59.           id: '1717148223729',
    60.           code: 'jobManagement',
    61.           title: '岗位管理',
    62.           name: '岗位管理',
    63.           parentId: null,
    64.           children: [
    65.             {
    66.               id: '1717148366037',
    67.               parentId: '1717148223729',
    68.               code: 'jobInside',
    69.               title: '岗位',
    70.               name: '岗位',
    71.               children: [
    72.                 {
    73.                   id: 'permissionManagement:position:query',
    74.                   code: 'permissionManagement:position:query',
    75.                   name: '查询',
    76.                   title: '查询',
    77.                   parentIdId: '1717148366037',
    78.                   dataPermission: true
    79.                 },
    80.                 {
    81.                   id: 'permissionManagement:position:add',
    82.                   code: 'permissionManagement:position:add',
    83.                   name: '新增',
    84.                   title: '新增',
    85.                   parentIdId: '1717148366037',
    86.                   dataPermission: false
    87.                 },
    88.                 {
    89.                   id: 'permissionManagement:position:update',
    90.                   code: 'permissionManagement:position:update',
    91.                   name: '修改',
    92.                   title: '修改',
    93.                   parentIdId: '1717148366037',
    94.                   dataPermission: false
    95.                 },
    96.                 {
    97.                   id: 'permissionManagement:position:delete',
    98.                   code: 'permissionManagement:position:delete',
    99.                   name: '删除',
    100.                   title: '删除',
    101.                   parentIdId: '1717148366037',
    102.                   dataPermission: false
    103.                 }
    104.               ]
    105.             }
    106.           ]
    107.         },
    108.         {
    109.           id: '1717148248870',
    110.           code: 'userManagement',
    111.           title: '用户管理',
    112.           name: '用户管理',
    113.           parentId: null,
    114.           children: [
    115.             {
    116.               id: '1717148408202',
    117.               parentId: '1717148248870',
    118.               code: 'userAdmin',
    119.               title: '用户',
    120.               name: '用户',
    121.               children: [
    122.                 {
    123.                   id: 'userAdmin:query',
    124.                   code: 'userAdmin:query',
    125.                   name: '查询',
    126.                   title: '查询',
    127.                   parentIdId: '1717148408202',
    128.                   dataPermission: true
    129.                 },
    130.                 {
    131.                   id: 'userAdmin:add',
    132.                   code: 'userAdmin:add',
    133.                   name: '新增',
    134.                   title: '新增',
    135.                   parentIdId: '1717148408202',
    136.                   dataPermission: false
    137.                 },
    138.                 {
    139.                   id: 'userAdmin:update',
    140.                   code: 'userAdmin:update',
    141.                   name: '修改',
    142.                   title: '修改',
    143.                   parentIdId: '1717148408202',
    144.                   dataPermission: false
    145.                 },
    146.                 {
    147.                   id: 'userAdmin:delete',
    148.                   code: 'userAdmin:delete',
    149.                   name: '删除',
    150.                   title: '删除',
    151.                   parentIdId: '1717148408202',
    152.                   dataPermission: false
    153.                 }
    154.               ]
    155.             }
    156.           ]
    157.         }
    158.       ]
    159.     };
    160.   },
    161.   methods: {
    162.     /**
    163.      * 复选框选中事件
    164.      * 实现的效果：
    165.      * 1、查询节点选中时，其相邻兄弟节点不变
    166.      * 2、查询节点取消选中时，其相邻兄弟节点取消选中
    167.      * 3、其相邻兄弟节点任何一个选中时，查询节点必选中
    168.      * 注：查询节点 dataPermission:true
    169.      * **/
    170.     handleCheck(data) {
    171.       if (!data.children) {
    172.         // 获取当前叶子节点的兄弟节点
    173.         const sublingsNode = this.getSiblingsById(this.menuTree, data.id);
    174.         // 获取当前叶子节点中为查询节点的项
    175.         const dataPermissionItem = [data, ...sublingsNode].find(
    176.           (item) => item.dataPermission
    177.         );
    178.  
    179.         if (data.dataPermission) {
    180.           // 操作的是查询节点时，将其兄弟节点设置为取消选中状态
    181.           sublingsNode.forEach((item) => {
    182.             this.$refs.treeRef.setChecked(item, false);
    183.           });
    184.         } else {
    185.           // 操作的是兄弟节点时，将查询节点设置为选中状态
    186.           this.$refs.treeRef.setChecked(dataPermissionItem, true);
    187.         }
    188.       }
    189.     },
    190.  
    191.     /**
    192.      * 通过当前节点的 id 查找兄弟节点
    193.      * treeData：树形结构的数据源
    194.      * nodeId：当前节点的 id
    195.      * **/
    196.     getSiblingsById(treeData, nodeId) {
    197.       function findSiblings(nodes) {
    198.         for (const node of nodes) {
    199.           if (node.id === nodeId) {
    200.             return nodes.filter((item) => item.id !== nodeId);
    201.           }
    202.           if (node.children) {
    203.             const siblings = findSiblings(node.children, node.id);
    204.             if (siblings) return siblings;
    205.           }
    206.         }
    207.         return null;
    208.       }
    209.  
    210.       return findSiblings(treeData, null);
    211.     }
    212.   }
    213. };
    214. script>

    总结：

    在写这部分逻辑时，难点在于取消数据权限时，怎么将操作权限也进行取消，这部分的交互相当于是查询是新增、修改、删除的取消全选操作。在进行这部分交互效果实现时，有考虑过使用 current-change 这个事件，因为这个事件可以获取到一个 Node 对象，在 Node 对象中可以获取到当前节点父节点，从而在父节点下找到当前节点及兄弟节点，从而避免了使用递归的方式查找兄弟节点，这个事件有个问题，无法触发 check 事件，导致在点击复选框选中时，事件未触发，所以退而求其次考虑使用 check 事件，配合递归方法实现最终的交互效果。

    补充：

    可以将递归函数去掉，使用 elementUI 中提供的 getNode 方法获取当前节点的兄弟节点，修改如下：

    2.  
    3. <script>
    4. export default {
    5.   data() {
    6.     return {
    7.       menuTree: [
    8.         {
    9.           id: '1717148200757',
    10.           code: 'departmentManagement',
    11.           title: '部门管理 ',
    12.           name: '部门管理 ',
    13.           parentIdId: null,
    14.           children: [
    15.             {
    16.               id: '1717148287418',
    17.               parentIdId: '1717148200757',
    18.               code: 'department',
    19.               title: '部门',
    20.               name: '部门 ',
    21.               children: [
    22.                 {
    23.                   id: 'department:query',
    24.                   code: 'department:query',
    25.                   name: '查询',
    26.                   title: '查询',
    27.                   parentIdId: '1717148287418',
    28.                   dataPermission: true
    29.                 },
    30.                 {
    31.                   id: 'department:add',
    32.                   code: 'department:add',
    33.                   name: '新增',
    34.                   title: '新增',
    35.                   parentIdId: '1717148287418',
    36.                   dataPermission: false
    37.                 },
    38.                 {
    39.                   id: 'department:update',
    40.                   code: 'department:update',
    41.                   name: '修改',
    42.                   title: '修改',
    43.                   parentIdId: '1717148287418',
    44.                   dataPermission: false
    45.                 },
    46.                 {
    47.                   id: 'department:delete',
    48.                   code: 'department:delete',
    49.                   name: '删除',
    50.                   title: '删除',
    51.                   parentIdId: '1717148287418',
    52.                   dataPermission: false
    53.                 }
    54.               ]
    55.             }
    56.           ]
    57.         },
    58.         {
    59.           id: '1717148223729',
    60.           code: 'jobManagement',
    61.           title: '岗位管理',
    62.           name: '岗位管理',
    63.           parentId: null,
    64.           children: [
    65.             {
    66.               id: '1717148366037',
    67.               parentId: '1717148223729',
    68.               code: 'jobInside',
    69.               title: '岗位',
    70.               name: '岗位',
    71.               children: [
    72.                 {
    73.                   id: 'permissionManagement:position:query',
    74.                   code: 'permissionManagement:position:query',
    75.                   name: '查询',
    76.                   title: '查询',
    77.                   parentIdId: '1717148366037',
    78.                   dataPermission: true
    79.                 },
    80.                 {
    81.                   id: 'permissionManagement:position:add',
    82.                   code: 'permissionManagement:position:add',
    83.                   name: '新增',
    84.                   title: '新增',
    85.                   parentIdId: '1717148366037',
    86.                   dataPermission: false
    87.                 },
    88.                 {
    89.                   id: 'permissionManagement:position:update',
    90.                   code: 'permissionManagement:position:update',
    91.                   name: '修改',
    92.                   title: '修改',
    93.                   parentIdId: '1717148366037',
    94.                   dataPermission: false
    95.                 },
    96.                 {
    97.                   id: 'permissionManagement:position:delete',
    98.                   code: 'permissionManagement:position:delete',
    99.                   name: '删除',
    100.                   title: '删除',
    101.                   parentIdId: '1717148366037',
    102.                   dataPermission: false
    103.                 }
    104.               ]
    105.             }
    106.           ]
    107.         },
    108.         {
    109.           id: '1717148248870',
    110.           code: 'userManagement',
    111.           title: '用户管理',
    112.           name: '用户管理',
    113.           parentId: null,
    114.           children: [
    115.             {
    116.               id: '1717148408202',
    117.               parentId: '1717148248870',
    118.               code: 'userAdmin',
    119.               title: '用户',
    120.               name: '用户',
    121.               children: [
    122.                 {
    123.                   id: 'userAdmin:query',
    124.                   code: 'userAdmin:query',
    125.                   name: '查询',
    126.                   title: '查询',
    127.                   parentIdId: '1717148408202',
    128.                   dataPermission: true
    129.                 },
    130.                 {
    131.                   id: 'userAdmin:add',
    132.                   code: 'userAdmin:add',
    133.                   name: '新增',
    134.                   title: '新增',
    135.                   parentIdId: '1717148408202',
    136.                   dataPermission: false
    137.                 },
    138.                 {
    139.                   id: 'userAdmin:update',
    140.                   code: 'userAdmin:update',
    141.                   name: '修改',
    142.                   title: '修改',
    143.                   parentIdId: '1717148408202',
    144.                   dataPermission: false
    145.                 },
    146.                 {
    147.                   id: 'userAdmin:delete',
    148.                   code: 'userAdmin:delete',
    149.                   name: '删除',
    150.                   title: '删除',
    151.                   parentIdId: '1717148408202',
    152.                   dataPermission: false
    153.                 }
    154.               ]
    155.             }
    156.           ]
    157.         }
    158.       ]
    159.     };
    160.   },
    161.   methods: {
    162.     /**
    163.      * 复选框选中事件
    164.      * 实现的效果：
    165.      * 1、查询节点选中时，其相邻兄弟节点不变
    166.      * 2、查询节点取消选中时，其相邻兄弟节点取消选中
    167.      * 3、其相邻兄弟节点任何一个选中时，查询节点必选中
    168.      * 注：查询节点 dataPermission:true
    169.      * **/
    170.     handleCheck(data, checked, indeterminate) {
    171.       if (!data.children) {
    172.         // 只处理叶子节点
    173.         const parentNode = this.$refs.treeRef.getNode(data).parent;
    174.         if (parentNode) {
    175.           // 获取当前叶子节点的兄弟节点
    176.           // const sublingsNode = this.getSiblingsById(this.treeData, data.id);
    177.           // 获取当前叶子节点和兄弟节点
    178.           const siblings = parentNode.data.children;
    179.           const dataPermissionItem = siblings.find(
    180.             (item) => item.dataPermission
    181.           );
    182.  
    183.           if (data.dataPermission) {
    184.             // 如果是查询节点，则取消选中所有非查询兄弟节点
    185.             siblings.forEach((sibling) => {
    186.               if (!sibling.dataPermission) {
    187.                 this.$refs.treeRef.setChecked(sibling, false, false);
    188.               }
    189.             });
    190.           } else if (checked) {
    191.             // 如果是非查询节点被选中，则确保查询节点也被选中
    192.             this.$refs.treeRef.setChecked(dataPermissionItem, true, false);
    193.           }
    194.         }
    195.       }
    196.     }
    197.  
    198.     // /**
    199.     //  * 通过当前节点的 id 查找兄弟节点
    200.     //  * treeData：树形结构的数据源
    201.     //  * nodeId：当前节点的 id
    202.     //  * **/
    203.     // getSiblingsById(treeData, nodeId) {
    204.     //   function findSiblings(nodes) {
    205.     //     for (const node of nodes) {
    206.     //       if (node.id === nodeId) {
    207.     //         return nodes.filter((item) => item.id !== nodeId);
    208.     //       }
    209.     //       if (node.children) {
    210.     //         const siblings = findSiblings(node.children, node.id);
    211.     //         if (siblings) return siblings;
    212.     //       }
    213.     //     }
    214.     //     return null;
    215.     //   }
    216.  
    217.     //   return findSiblings(treeData, null);
    218.     // }
    219.   }
    220. };
    221. script>

  • 相关阅读:
    源码编译postgresql
    Java GC
    elasticsearch 聚合DSL语法
    linux创建用户和组、授权、禁止root远程登录、限制SSH的IP登录
    【SpringMVC】JSON数据传输与异常处理的使用
    重塑感知，荣耀金洋！金洋奖两项用户体验奖项公布
    ios ipa包上传需要什么工具
    如何让Join跑的更快？(文末送书)
    嵌入式硬件设计实例：基于STM32的流水灯原理图和PCB设计
    Java并发 | 15.[基础] 线程安全分析
  • 原文地址：https://blog.csdn.net/qq_37309987/article/details/139373222