devbox
知新_RL
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

vue3 Element-plus 列表状，权限配置_vue3 tree权限

作者：知新_RL | 2024-02-20 07:21:21

赞

踩

vue3 tree权限

1、前言

常见的权限配置是树状的也就是这样的

现在要做的是列表状的也就是这样的

 这两种展现形式比较

1、树状的展现形式，相对比较简单、只需要使用element-plus或其他组件库，将后端返回的数据处理成树状数据即可，代码简单，但是如果权限模块较多，就很直观

2、相对的列表状的权限配置，权限就相对直观，一目了然，但是相对的，代码数据处理复杂度会翻倍（当然也有可能是因为我用的方法问题）

2、代码

2.1树状权限的主要代码--（如果只想看列表权限配置，可直接跳过）

  1. <template>
  2.   <Dialog
  3.     v-model="state.visible"
  4.     title="权限配置"
  5.     width="400px"
  6.     :max-height="500"
  7.     @close="handleClose(false)"
  8.     @open="handleOpen"
  9.   >
  10.     <!-- 表单内容 -->
  11.     <!-- default-checked-keys 带有的节点 -->
  12.     <el-tree
  13.       ref="treeRef"
  14.       :data="state.data"
  15.       show-checkbox
  16.       node-key="id"
  17.       default-expand-all
  18.       :default-checked-keys="state.checkKeys"
  19.       :props="defaultProps"
  20.     />
  21.     <template #footer>
  22.       <el-button @click="state.visible = false"> 取消 </el-button>
  23.       <el-button type="primary" @click="handleSubmit"> 确定 </el-button>
  24.     </template>
  25.   </Dialog>
  26. </template>
  27.  
  28. <script lang="ts" setup>
  29. import { ref, reactive, computed } from 'vue'
  30. import {
  31.   getAllPermission,
  32.   getPermissionUnderRole,
  33.   addPermissionToRole,
  34. } from '../../../api'
  35. import { Permission } from '../../../types'
  36. const defaultProps = {
  37.   children: 'nodeList',
  38.   label: 'name',
  39. }
  40.  
  41. const props = defineProps<{
  42.   visible: boolean
  43.   roleId: number
  44. }>()
  45. const emits = defineEmits<{
  46.   (e: 'update:visible', data: boolean)
  47.   (e: 'getList')
  48. }>()
  49.  
  50. const treeRef = ref(null)
  51.  
  52. const state = reactive({
  53.   visible: computed({
  54.     get: () => props.visible,
  55.     set(value: boolean) {
  56.       emits('update:visible', value)
  57.     },
  58.   }),
  59.   data: [] as Permission[],
  60.   checkKeys: [],
  61. })
  62.  
  63. const handleSubmit = async () => {
  64.   const res = await addPermissionToRole({
  65.     roleId: props.roleId,
  66.     resourceIds: [
  67.       ...treeRef.value.getCheckedKeys(),
  68.       ...treeRef.value.getHalfCheckedKeys(),
  69.     ],
  70.   })
  71.   if (res.code === '00000000') {
  72.     // 触发父组件重新请求列表数据,没有触发, 所说义会触发bug
  73.     console.log('出发父类请求列表方法')
  74.     emits('getList')
  75.   }
  76.   state.visible = false
  77. }
  78.  
  79. // 感觉请求数据的时机还是有点问题
  80. const handleOpen = async () => {
  81.   // 获取当前角色拥有的权限
  82.   const res2 = await getPermissionUnderRole({
  83.     roleId: props.roleId,
  84.   })
  85.   if (res2.code === '00000000') {
  86.     // 转成树状数据
  87.     let tmp = transToTree(res2.data as Permission[], 0)
  88.     let tmpArr = []
  89.     console.log('tmp', tmp)
  90.     tmp.forEach((item) => {
  91.       item.nodeList.forEach((item2) => {
  92.         if (item2.nodeList.length === 0) {
  93.           tmpArr.push(item2.id)
  94.         }
  95.         tmpArr.push(...item2.nodeList.map((item) => item.id))
  96.       })
  97.     })
  98.     console.log('tmpArr', tmpArr)
  99.     // 以上这都拿主要是 保存当前角色拥有的权限id、拿最后一级的
  100.     // 就是没有nodeList数组或者数组长度为0的
  101.     state.checkKeys = tmpArr
  102.   }
  103.   // 这个api是获取所有可选权限
  104.   const res = await getAllPermission({ roleId: props.roleId })
  105.   if (res.code === '00000000') {
  106.     state.data = res.data as Permission[]
  107.   }
  108. }
  109.  
  110. // 递归处理数据---这就是主要难点之一
  111. function transToTree(data: Permission[], id: number) {
  112.   const arr = []
  113.   data.forEach((item) => {
  114.     if (item.parentId === id) {
  115.       const nodeList = transToTree(data, item.id)
  116.       if (nodeList) {
  117.         item.nodeList = nodeList
  118.       }
  119.       arr.push(item)
  120.     }
  121.   })
  122.   return arr
  123. }
  124. const handleClose = (val: boolean) => {
  125.   // state.checkKeys = []
  126.   state.visible = val
  127. }
  128. </script>
  129.  
  130. <style scoped></style>

2.2、列表权限主要代码

  1. <template>
  2.   <div class="roles-setting">
  3.     <el-breadcrumb>
  4.       <el-breadcrumb-item>{{ state.name }}-权限配置</el-breadcrumb-item>
  5.     </el-breadcrumb>
  6.     <div class="setting-box">
  7.       <div class="header">
  8.         <el-checkbox
  9.           v-model="state2.allCheck.selected"
  10.           :indeterminate="state2.allCheck.indeterminate"
  11.           label="全选"
  12.         />
  13.       </div>
  14.       <div class="content">
  15.         <!-- 每个模块的权限 -->
  16.         <div v-for="item in state.data" :key="item.id" class="permission-table">
  17.           <div class="title">{{ item.name }}</div>
  18.           <div class="table-content">
  19.             <!-- 每一行的权限 -->
  20.             <div v-for="item2 in item.nodeList" :key="item2.id" class="row">
  21.               <div class="three-menu">
  22.                 <el-checkbox
  23.                   v-model="item2.selected"
  24.                   :indeterminate="item2.indeterminate"
  25.                   :label="item2.name"
  26.                   @change="handleCheckAllChange(item2.id)"
  27.                 />
  28.               </div>
  29.               <div class="btn-permission">
  30.                 <el-checkbox
  31.                   v-for="item3 in item2.nodeList"
  32.                   :key="item3.id"
  33.                   v-model="item3.selected"
  34.                   :label="item3.id"
  35.                   @change="handleChange(item3.id)"
  36.                   >{{ item3.name }}
  37.                 </el-checkbox>
  38.               </div>
  39.             </div>
  40.           </div>
  41.         </div>
  42.       </div>
  43.       <div class="footer">
  44.         <el-button @click="handleCancel">取消</el-button>
  45.         <el-button type="primary" @click="handleSubmit">确认</el-button>
  46.       </div>
  47.     </div>
  48.   </div>
  49. </template>
  50.  
  51. <script setup lang="ts">
  52. import { reactive, onBeforeMount, computed, watch } from 'vue'
  53. import { ElMessage } from 'element-plus'
  54. import { useRoute } from 'vue-router'
  55. // 引入的接口
  56. import { getAllPermission, addPermissionToRole } from '../../../api'
  57. // 数据类型
  58. import { Permission } from '../../../types'
  59.  
  60. const route = useRoute()
  61.  
  62. const state = reactive({
  63.   data: [] as Permission[],
  64.   // 因为这是新页面，但是又不在左侧菜单（一般后台的左侧菜单栏）中的，所以f5刷新的时候会
  65.   // roleId及name置空，所说义需要持久保存一下
  66.   name: route.params.name || window.localStorage.getItem('permission-name'),
  67.   roleId:
  68.     route.params.roleId || window.localStorage.getItem('permission-roleId'),
  69.   resourceIds: [], // 保存所有勾选id值，用于发请求
  70.   checked: false,
  71. })
  72.  
  73. // 控制最上面全选按钮状态变更
  74. const state2 = reactive({
  75.   allCheck: {
  76.     selected: computed({
  77.       get() {
  78.         return controlAllCkeckStatus(state.data, 'all')
  79.       },
  80.       set(val: boolean) {
  81.         controlAllCkeckStatus(state.data, 'set', val)
  82.       },
  83.     }),
  84.     indeterminate: computed(() => controlAllCkeckStatus(state.data, 'half')),
  85.   },
  86. })
  87.  
  88. // 控制三级菜单的选择状态
  89. const handleCheckAllChange = (id: number) => {
  90.   // 传id进来，进而控制其nodeList 每项的选择
  91.   const findData = findByIdInTreeData(state.data, id)
  92.   // 去除中间态
  93.   findData.indeterminate = false
  94.   // findData.name = '测试名字'
  95.   // 通过findData 可以直接更改state.data的数据 相当于是将
  96.   // findData = state.data[i].nodeList[j] 浅拷贝会关联数据
  97.   // 循环遍历其下的子级状态
  98.   for (let i = 0; i < findData.nodeList.length; i++) {
  99.     findData.nodeList[i].selected = findData.selected
  100.   }
  101. }
  102.  
  103. // 每个按钮权限的状态
  104. const handleChange = (id: number) => {
  105.   const parentId = findByIdInTreeData(state.data, id).parentId
  106.   const findData = findByIdInTreeData(state.data, parentId)
  107.   // 全选
  108.   if (findData.nodeList.every((item) => item.selected)) {
  109.     findData.selected = true
  110.     findData.indeterminate = false
  111.   } else if (findData.nodeList.some((item) => item.selected)) {
  112.     // 中间态
  113.     findData.selected = false
  114.     findData.indeterminate = true
  115.   } else {
  116.     // 全不选
  117.     findData.selected = false
  118.     findData.indeterminate = false
  119.   }
  120. }
  121.  
  122. const getList = async () => {
  123.   // 获取所有可选的权限展示出来
  124.   const res = await getAllPermission({ roleId: state.roleId })
  125.   if (res.code === '00000000') {
  126.     state.data = res.data as Permission[]
  127.     // 循环模块模块(重置权限的状态)--因为后端返回的数据不完全符合我们的需求
  128.     // 第一层--模块数据
  129.     for (let i = 0; i < state.data.length; i++) {
  130.       // 第二层--每行数据
  131.       for (let j = 0; j < state.data[i].nodeList.length; j++) {
  132.         state.data[i].nodeList[j].indeterminate =
  133.           state.data[i].nodeList[j].nodeList.some((item) => item.selected) &&
  134.           !state.data[i].nodeList[j].nodeList.every((item) => item.selected)
  135.         if (state.data[i].nodeList[j].indeterminate) {
  136.           state.data[i].nodeList[j].selected = false
  137.         }
  138.       }
  139.     }
  140.   }
  141. }
  142.  
  143. onBeforeMount(async () => {
  144.   // 有值就保存到本地, 避免刷新的时候数据丢失
  145.   if (route.params.roleId && route.params.name) {
  146.     window.localStorage.setItem(
  147.       'permission-roleId',
  148.       route.params.roleId as string
  149.     )
  150.     window.localStorage.setItem('permission-name', route.params.name as string)
  151.   }
  152.   await getList()
  153. })
  154.  
  155. // 取消就重新请求原来的数据
  156. const handleCancel = async () => {
  157.   await getList()
  158. }
  159.  
  160. const handleSubmit = async () => {
  161.   // 将selected为true或indeterminate为true的id取出来放到一起
  162.   getCheckIdFromTreeData(state.data, state.resourceIds)
  163.   const res = await addPermissionToRole({
  164.     roleId: state.roleId,
  165.     resourceIds: state.resourceIds,
  166.   })
  167.   if (res.code === '00000000') {
  168.     ElMessage.success('给角色配置权限成功')
  169.   }
  170. }
  171.  
  172. // 根据id查找树状数据里面的某一项
  173. function findByIdInTreeData(treeData: Permission[], id: number): Permission {
  174.   for (let i = 0; i < treeData.length; i++) {
  175.     if (treeData[i].id === id) {
  176.       return treeData[i]
  177.     } else {
  178.       const findData = findByIdInTreeData(treeData[i].nodeList, id)
  179.       // 找到才返回，没找到就继续找
  180.       if (findData) {
  181.         return findData
  182.       }
  183.     }
  184.   }
  185. }
  186.  
  187. // 将勾选的数据的id保存到指定数组
  188. function getCheckIdFromTreeData(
  189.   treeData: Permission[],
  190.   resultBuf: number[]
  191. ): void {
  192.   treeData.forEach((item) => {
  193.     if (item.selected || item.indeterminate) {
  194.       resultBuf.push(item.id)
  195.     }
  196.     if (item.nodeList.length > 0) {
  197.       getCheckIdFromTreeData(item.nodeList, resultBuf)
  198.     }
  199.   })
  200. }
  201.  
  202. // 控制全选按钮的状态(全选、中间态、全不选、)
  203. // flag: all--判断是否全选、half判断是否是中间态、set设置权限
  204. function controlAllCkeckStatus(
  205.   treeData: Permission[],
  206.   flag: string,
  207.   val?: boolean
  208. ): boolean {
  209.   let buf = []
  210.   if (flag === 'half') {
  211.     for (let i = 0; i < treeData.length; i++) {
  212.       buf[i] =
  213.         (treeData[i].nodeList.some((item) => item.selected) &&
  214.           !treeData[i].nodeList.every((item) => item.selected)) ||
  215.         treeData[i].nodeList.some((item) => item.indeterminate)
  216.     }
  217.     console.log('buf', buf)
  218.     return buf.some((item) => item)
  219.   } else if (flag === 'all') {
  220.     for (let i = 0; i < treeData.length; i++) {
  221.       buf[i] = treeData[i].nodeList.every((item) => item.selected)
  222.     }
  223.     return buf.every((item) => item)
  224.   } else {
  225.     for (let i = 0; i < treeData.length; i++) {
  226.       for (let j = 0; j < treeData[i].nodeList.length; j++) {
  227.         treeData[i].nodeList[j].selected = val
  228.         treeData[i].nodeList[j].indeterminate = false
  229.         handleCheckAllChange(treeData[i].nodeList[j].id)
  230.       }
  231.     }
  232.   }
  233. }
  234. </script>
  235. <style scoped lang="scss">
  236. .roles-setting {
  237.   width: 100%;
  238.   height: 100%;
  239.   .setting-box {
  240.     position: relative;
  241.     height: 100%;
  242.     margin-top: 10px;
  243.     .header {
  244.       display: flex;
  245.       align-items: center;
  246.       height: 40px;
  247.       width: 100%;
  248.       box-sizing: border-box;
  249.       .el-checkbox {
  250.         margin-left: 10px;
  251.       }
  252.       border-bottom: solid 1px #dcdfe6;
  253.     }
  254.  
  255.     .content {
  256.       width: 100%;
  257.       height: calc(100% - 90px);
  258.       box-sizing: border-box;
  259.       padding: 10px;
  260.       .permission-table {
  261.         margin-bottom: 30px;
  262.         .title {
  263.           margin-bottom: 5px;
  264.         }
  265.         .table-content {
  266.           background: #ededf0;
  267.           border: solid 1px #dcdfe6;
  268.           width: 100%;
  269.           .row {
  270.             display: flex;
  271.             // min-height: 40px;
  272.             align-items: center;
  273.             border-bottom: solid 1px #dcdfe6;
  274.             &:last-child {
  275.               border-bottom: none;
  276.             }
  277.             .three-menu {
  278.               min-width: 150px;
  279.               box-sizing: border-box;
  280.               padding-left: 10px;
  281.               border-right: solid 1px #dcdfe6;
  282.             }
  283.             .btn-permission {
  284.               box-sizing: border-box;
  285.               padding-left: 10px;
  286.               .el-checkbox {
  287.                 min-width: 120px;
  288.               }
  289.             }
  290.           }
  291.         }
  292.       }
  293.     }
  294.     .footer {
  295.       border-top: solid 1px #dcdfe6;
  296.       height: 50px;
  297.       box-sizing: border-box;
  298.       width: 100%;
  299.       position: absolute;
  300.       bottom: 0;
  301.       display: flex;
  302.       justify-content: center;
  303.       align-items: center;
  304.     }
  305.   }
  306. }
  307. </style>

列表状权限配置的数据结构

  1. "data": [
  2.         {
  3.             "id": 1,
  4.             "parentId": 0,
  5.             "name": "营销管理",
  6.             "selected": true,
  7.             "nodeList": [
  8.                 {
  9.                     "id": 3,
  10.                     "parentId": 1,
  11.                     "name": "优惠券管理",
  12.                     "selected": true,
  13.                     "nodeList": [
  14.                         {
  15.                             "id": 11,
  16.                             "parentId": 3,
  17.                             "name": "查看",
  18.                             "selected": true,
  19.                             "nodeList": []
  20.                         },
  21.                         {
  22.                             "id": 12,
  23.                             "parentId": 3,
  24.                             "name": "新增优惠券",
  25.                             "selected": true,
  26.                             "nodeList": []
  27.                         },
  28.                         {
  29.                             "id": 13,
  30.                             "parentId": 3,
  31.                             "name": "开启优惠券状态",
  32.                             "selected": true,
  33.                             "nodeList": []
  34.                         },
  35.                         {
  36.                             "id": 14,
  37.                             "parentId": 3,
  38.                             "name": "停用优惠券状态",
  39.                             "selected": true,
  40.                             "nodeList": []
  41.                         }
  42.                     ]
  43.                 },
  44.                 {
  45.                     "id": 4,
  46.                     "parentId": 1,
  47.                     "name": "发放管理",
  48.                     "selected": true,
  49.                     "nodeList": [
  50.                         {
  51.                             "id": 15,
  52.                             "parentId": 4,
  53.                             "name": "查看",
  54.                             "selected": true,
  55.                             "nodeList": []
  56.                         },
  57.                         {
  58.                             "id": 16,
  59.                             "parentId": 4,
  60.                             "name": "新增发放",
  61.                             "selected": true,
  62.                             "nodeList": []
  63.                         },
  64.                         {
  65.                             "id": 17,
  66.                             "parentId": 4,
  67.                             "name": "开启发放状态",
  68.                             "selected": true,
  69.                             "nodeList": []
  70.                         },
  71.                         {
  72.                             "id": 18,
  73.                             "parentId": 4,
  74.                             "name": "停用发放状态",
  75.                             "selected": true,
  76.                             "nodeList": []
  77.                         }
  78.                     ]
  79.                 },
  80.                 {
  81.                     "id": 5,
  82.                     "parentId": 1,
  83.                     "name": "领取记录",
  84.                     "selected": false,
  85.                     "nodeList": [
  86.                         {
  87.                             "id": 19,
  88.                             "parentId": 5,
  89.                             "name": "查看",
  90.                             "selected": false,
  91.                             "nodeList": []
  92.                         },
  93.                         {
  94.                             "id": 20,
  95.                             "parentId": 5,
  96.                             "name": "导出",
  97.                             "selected": false,
  98.                             "nodeList": []
  99.                         }
  100.                     ]
  101.                 },
  102.                 {
  103.                     "id": 6,
  104.                     "parentId": 1,
  105.                     "name": "ATM壁纸",
  106.                     "selected": false,
  107.                     "nodeList": [
  108.                         {
  109.                             "id": 21,
  110.                             "parentId": 6,
  111.                             "name": "查看",
  112.                             "selected": false,
  113.                             "nodeList": []
  114.                         },
  115.                         {
  116.                             "id": 22,
  117.                             "parentId": 6,
  118.                             "name": "新增壁纸",
  119.                             "selected": false,
  120.                             "nodeList": []
  121.                         },
  122.                         {
  123.                             "id": 23,
  124.                             "parentId": 6,
  125.                             "name": "开启/批量开启",
  126.                             "selected": false,
  127.                             "nodeList": []
  128.                         },
  129.                         {
  130.                             "id": 24,
  131.                             "parentId": 6,
  132.                             "name": "停用/批量停用",
  133.                             "selected": false,
  134.                             "nodeList": []
  135.                         },
  136.                         {
  137.                             "id": 25,
  138.                             "parentId": 6,
  139.                             "name": "编辑",
  140.                             "selected": false,
  141.                             "nodeList": []
  142.                         },
  143.                         {
  144.                             "id": 26,
  145.                             "parentId": 6,
  146.                             "name": "删除",
  147.                             "selected": false,
  148.                             "nodeList": []
  149.                         }
  150.                     ]
  151.                 }
  152.             ]
  153.         },
  154.         {
  155.             "id": 2,
  156.             "parentId": 0,
  157.             "name": "供应链",
  158.             "selected": true,
  159.             "nodeList": [
  160.                 {
  161.                     "id": 7,
  162.                     "parentId": 2,
  163.                     "name": "校区库存",
  164.                     "selected": true,
  165.                     "nodeList": [
  166.                         {
  167.                             "id": 27,
  168.                             "parentId": 7,
  169.                             "name": "查看",
  170.                             "selected": true,
  171.                             "nodeList": []
  172.                         },
  173.                         {
  174.                             "id": 28,
  175.                             "parentId": 7,
  176.                             "name": "详情",
  177.                             "selected": true,
  178.                             "nodeList": []
  179.                         }
  180.                     ]
  181.                 },
  182.                 {
  183.                     "id": 8,
  184.                     "parentId": 2,
  185.                     "name": "仓库库存",
  186.                     "selected": false,
  187.                     "nodeList": [
  188.                         {
  189.                             "id": 29,
  190.                             "parentId": 8,
  191.                             "name": "查看",
  192.                             "selected": false,
  193.                             "nodeList": []
  194.                         },
  195.                         {
  196.                             "id": 30,
  197.                             "parentId": 8,
  198.                             "name": "详情",
  199.                             "selected": false,
  200.                             "nodeList": []
  201.                         },
  202.                         {
  203.                             "id": 31,
  204.                             "parentId": 8,
  205.                             "name": "新增",
  206.                             "selected": false,
  207.                             "nodeList": []
  208.                         },
  209.                         {
  210.                             "id": 32,
  211.                             "parentId": 8,
  212.                             "name": "修改",
  213.                             "selected": false,
  214.                             "nodeList": []
  215.                         },
  216.                         {
  217.                             "id": 33,
  218.                             "parentId": 8,
  219.                             "name": "删除",
  220.                             "selected": false,
  221.                             "nodeList": []
  222.                         }
  223.                     ]
  224.                 },
  225.                 {
  226.                     "id": 9,
  227.                     "parentId": 2,
  228.                     "name": "打印机库存",
  229.                     "selected": false,
  230.                     "nodeList": []
  231.                 },
  232.                 {
  233.                     "id": 10,
  234.                     "parentId": 2,
  235.                     "name": "采购库存",
  236.                     "selected": false,
  237.                     "nodeList": []
  238.                 }
  239.             ]
  240.         }
  241.     ]

个人感觉数据处理还有很多优化的地方，暂时就先这样！！ 

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/知新_RL/article/detail/119070
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号