【Vue3】el-checkbox-group实现权限配置和应用

一. 需求

针对不同等级的用户，配置不同的可见项
配置效果如下
（1）新增，获取数据列表
（2）编辑，回显数据列表
应用效果如下
（1）父级配置

（2）子级配置

二. 数据格式

普通用户列表、vip用户列表、svip用户列表共用一个List

// type == 0 父：级可配置
// type == 2 ：父级必然存在 
// type == 1 ：type==2的 子级（若有的必然存在，可通过name进行筛选）
List:[{id: 1,children:null,createTime: null,name: "par1",value: "父1",isDel: 0,sort: 1,type: 0,},{id: 2,children:null,createTime: null,name: "par2",value: "父2",isDel: 0,sort: 2,type: 0,},{id: 3,children:null,createTime: null,name: "par3",value: "父3",isDel: 0,sort: 3,type: 0,},{id: 4,children:null,createTime: null,name: "par4",value: "父4",isDel: 0,sort: 4,type: 0,},{id: 5,children:null,createTime: null,name: "par5",value: "父5",isDel: 0,sort: 5,type: 0,},{id: 6,children:[{id: 7,children:null,createTime: null,name: "child1",value: "子1",isDel: 0,sort: 1,type: 1,},{id: 8,children:null,createTime: null,name: "child2",value: "子2",isDel: 0,sort: 2,type: 1,},{id: 9,children:null,createTime: null,name: "child3",value: "子3",isDel: 0,sort: 3,type: 1,},{id: 10,children:null,createTime: null,name: "child4",value: "子4",isDel: 0,sort: 4,type: 1,},{id: 11,children:null,createTime: null,name: "child5",value: "子5",isDel: 0,sort: 5,type: 1,},{id: 12,children:null,createTime: null,name: "child6",value: "子6",isDel: 0,sort: 6,type: 1,},{id: 13,children:null,createTime: null,name: "child7",value: "子7",isDel: 0,sort: 7,type: 1,},],createTime: null,name: "par6",value: "父6",isDel: 0,sort: 6,type: 2,},
]

思路：调用接口获取List，将同一个List 分别赋值给三个不同的数组。

三. 实现

数据获取并渲染及回显功能

<template><div><el-form ref="detailRef" :model="form" :rules="rules" label-width="140px"><el-form-item label="普通用户" prop="ordinaryUser"><el-checkbox-group v-model="form.ordinaryUser"><el-checkbox v-for="item in ordinaryUser" v-show="item.type == 0" :key="item.id"class="check-box":label="item.name">{{ item.value }}</el-checkbox><div><el-checkbox v-for="item in ordinaryUser" v-show="item.type == 1" :key="item.id"class="check-box":label="item.name">{{ item.value }}</el-checkbox></div></el-checkbox-group></el-form-item><el-form-item label="VIP用户" prop="vipUser"><el-checkbox-group v-model="form.vipUser"><el-checkbox v-for="item in vipUser" v-show="item.type == 0" :key="item.id"class="check-box":label="item.name">{{ item.value }}</el-checkbox><div><el-checkbox v-for="item in vipUser" v-show="item.type == 1" :key="item.id"class="check-box":label="item.name">{{ item.value }}</el-checkbox></div></el-checkbox-group></el-form-item><el-form-item label="SVIP用户" prop="svipUser"><el-checkbox-group v-model="form.svipUser"><el-checkbox v-for="item in svipUser" v-show="item.type == 0" :key="item.id"class="check-box":label="item.name">{{ item.value }}</el-checkbox><div><el-checkbox v-for="item in vipUser" v-show="item.type == 1" :key="item.id"class="check-box":label="item.name">{{ item.value }}</el-checkbox></div></el-checkbox-group></el-form-item></el-form><div><el-button @click="handleClick">取 消</el-button><el-button type="primary" @click="submitForm">确 认</el-button></div></div>
</template>
<script setup name="ManageMenu">
import { getList,update } from '@/api/xxx/xxx'
import { getConfigList } from '@/api/xxx/xxxConfig'
import { reactive } from '@vue/reactivity'
import { ref } from 'vue'const { proxy } = getCurrentInstance()const route = useRoute()
const configId = route.params.id //  通过路由获取到 配置idconst ordinaryUser = ref([]) // 普通用户
const vipUser = ref([]) // vip用户
const svipUser = ref([]) // svip用户
const selectStartLevel = reactive([]) // 当前选中项
const allStartLevel = ref([]) // 全部数据const selectOrdinaryUser = ref([]) // 当前选中的普通用户可见项
const selectVipUser = ref([]) // 当前选中的vip用户可见项
const selectSVipUser = ref([]) // 当前选中的svip用户可见const data = reactive({form: {},rules: {ordinaryUser: [{ type: 'array', required: true, message: '必填', trigger: ['blur'] }],vipUser: [{ type: 'array', required: true, message: '必填', trigger: ['blur'] }],svipUser: [{ type: 'array', required: true, message: '必填', trigger: ['blur'] }]}
})// 重置表单
const reset = () => {form.value = {id: null,ordinaryUser: [],vipUser: [],svipUser: [],List: [] // 给后端传/回显数据的数组}proxy.resetForm('detailRef')
}/*** 初始化列表数据*/
onMounted(() => {reset()getCList()// 数据回显if (configId != null) {getActivityManageListDetails ({ configId: Number(configId) }).then(res => {if (res.code === 200) {form.value = res.dataform.value.ordinaryUser = form.value.List.filter(item => item.rankConfig === 3 && item.configFlag === 1).map(item => item.name)form.value.vipUser = form.value.List.filter(item => item.rankConfig === 2 && item.configFlag === 1).map(item => item.name)form.value.svipUser = form.value.List.filter(item => item.rankConfig === 1 && item.configFlag === 1).map(item => item.name)}})}
})/*** 扁平化配置项数据*/
const getCList = () => {// 获取配置项 并并扁平化，同时设置等级getConfigList().then(res => {// res.data 数据格式就是 上述ListordinaryUser.value = treeToArray(res.data, 3) // 三级vipUser.value = treeToArray(res.data, 2) // 二级svipUser.value = treeToArray(res.data, 1) // 一级// 将扁平化的数据，整理放到一个数组中allStartLevel.value = [...ordinaryUser.value, ...vipUser.value, ...svipUser.value]// 过滤到type != 2 的数据 type=2，这一项因为需求在代码中写死了，时时刻刻存在所以要筛查掉allStartLevel.value = allStartLevel.value.filter(item => item.type !== 2)})
}/*** 点击确定*/
const submitForm = () => {selectOrdinaryUser.value = form.value.ordinaryUser.map(item => ({ rankConfig: 3, dictEnglishName: item }))selectVipUser.value = form.value.vipUser.map(item => ({ rankConfig: 2, dictEnglishName: item }))selectSVipUser.value = form.value.svipUser.map(item => ({ rankConfig: 1, dictEnglishName: item }))// 当前选中项selectStartLevel.value = [...selectOrdinaryUser.value, ...selectVipUser.value, ...selectSVipUser.value]// 设置选中项对应的星级 是否选中allStartLevel.value.forEach(item => {item.configId = item.idselectStartLevel.value.forEach(val => {if (item.rankConfig === val.rankConfig && item.name === val.name) {item.configFlag = 1}})})// 设置级别权限form.value.List = allStartLevel.valueproxy.$refs['detailRef'].validate(valid => {if (valid) {console.log(...form.value, '校验成功了吗');if (configId != null) {update({ id: Number(configId), ...form.value }).then(res => {if (res.code === 200) {proxy.$modal.msgSuccess('编辑成功')handleClick()reset()}})} else{update({ id: 0, ...form.value }).then(res => {if (res.code === 200) {proxy.$modal.msgSuccess('新增成功')handleClick()reset()}})}}})
}/*** 弹窗取消*/
const handleClick = async () => {console.log('弹窗取消')
}/*** 数组扁平化（reduce）*/
const treeToArray = (tree, rankConfig) => {return tree.reduce((res, item) => {const { children, ...i } = itemi.rankConfig = rankConfigi.configFlag = 0return res.concat(i, children && children.length ? treeToArray(children, rankConfig) : [])}, [])
}
</script><style scoped>
.check-box{width:90px
}
</style>

权限的应用（此处只处理父级）

<template><el-tabs v-model="activeName" type="card" style="max-width: 100%" @tab-change="handleClick"><el-tab-pane v-for="item in leftData" :key="item.id" :label="item.value" :name="item.name"><component :is="allLeftCompontents[item.name]" :dataDetail="dataDetail"></component></el-tab-pane></el-tabs>
</template>
<script setup>
import Parent1 from '@/views/xxx/parent1'
import Parent2 from '@/views/xxx/parent2'
import Parent3 from '@/views/xxx/parent3'
import Parent4 from '@/views/xxx/parent4'
import Parent5 from '@/views/xxx/parent5'
import Parent6 from '@/views/xxx/parent6'
import { getApplyDetail } from "@/api/xxx"
import { getConfigListByConfigId } from "@/api/xxx"const route = useRoute()
const id = route.params.id // 路由 获取id
const leftData = ref([]) // 配置数据项
const currentTab = ref('') // 当前选中tab项
const activeName = ref('') // 当前选中tab的名称
const dataDetail = reactive({}) // 获取详情const allLeftCompontents = {par1: markRaw(Parent1),par2: markRaw(Parent2),par3: markRaw(Parent3),par4: markRaw(Parent4),par5: markRaw(Parent5),par6: markRaw(Parent6)
}onMounted(() => {// 获取详情getApplyDetail({ id: id }).then(res => {if (res.code === 200) {dataDetail.configId = res.data.configIddataDetail.level = res.data.level// 获取等级权限getSatReviewConfigList()}})
})/*** 获取配置项*/
const getSatReviewConfigList = () => {getConfigListByConfigId({configId:dataDetail.configId , rankConfig: dataDetail.level}).then(result => {leftData.value = result.data// 初始加载第一个tabactiveName.value = leftData.value[0].namehandleClick(activeName.value)})
}/*** 点击切换标签项*/
const handleClick = (val) => {currentTab.value = val
}
</script>