admin/django-vue3-admin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

1.完成新版菜单授权

Browse Source
This commit is contained in:
猿小天
2023-10-28 19:00:35 +08:00
parent bd8fef9a04
commit b7b589176a
10 changed files with 567 additions and 205 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
backend/dvadmin/system/views/role_menu.py
View File

@@ -58,8 +58,38 @@ class RoleMenuPermissionViewSet(CustomModelViewSet):
update_serializer_class = RoleMenuPermissionCreateUpdateSerializer
extra_filter_class = []
@action(methods=['get'],detail=False)
def menu_permission_tree(self,request):
"""
获取菜单按钮树
"""
# params = request.query_params
# role_id = params.get('role',None)
# if role_id is None:
# return ErrorResponse(msg="未获取到角色")
if request.user.is_superuser:
queryset = Menu.objects.filter(status=1).values("id", "name", "parent_id")
else:
role_id = request.user.role.values_list('id', flat=True)
menu_list = RoleMenuPermission.objects.filter(role__in=role_id).values_list('menu_id', flat=True)
queryset = Menu.objects.filter(status=1, id__in=menu_list).values('id','name', "parent_id").all()
return DetailResponse(data=queryset)
@action(methods=['get'],detail=False)
def get_menu_permission_checked(self,request):
"""
获取已授权的菜单
"""
params = request.query_params
role_id = params.get('role',None)
if role_id is None:
return ErrorResponse(msg="未获取到角色")
menu_list = RoleMenuPermission.objects.filter(role__in=role_id).values_list('menu_id', flat=True)
queryset = Menu.objects.filter(status=1, id__in=menu_list).values_list('id',flat=True)
return DetailResponse(data=queryset)
@action(methods=['post'],detail=False)
def save_auth(self,request):
def save_menu_permission(self,request):
"""
保存页面菜单授权
:param request:

13
web/src/components/iconSelector/index.vue
View File

@@ -159,11 +159,14 @@ const initModeValueEcho = () => {
// 处理 icon 类型，用于回显时，tab 高亮与初始化数据
const initFontIconName = () => {
let name = 'ali';
if (props.modelValue!.indexOf('iconfont') > -1) name = 'ali';
else if (props.modelValue!.indexOf('ele-') > -1) name = 'ele';
else if (props.modelValue!.indexOf('fa') > -1) name = 'awe';
// 初始化 tab 高亮回显
state.fontIconTabActive = name;
if(props.modelValue){
if (props.modelValue!.indexOf('iconfont') > -1) name = 'ali';
else if (props.modelValue!.indexOf('ele-') > -1) name = 'ele';
else if (props.modelValue!.indexOf('fa') > -1) name = 'awe';
// 初始化 tab 高亮回显
state.fontIconTabActive = name;
}
return name;
};
// 初始化数据

14
web/src/views/system/menu/crud.ts
View File

@@ -3,7 +3,7 @@ import { CreateCrudOptionsProps, CreateCrudOptionsRet, dict, useCompute } from '
const { compute } = useCompute();
import { shallowRef } from "vue";
import IconSelector from "/@/components/IconSelector/index.vue"
export default function ({ crudExpose, onAddCatalog, onAddChildren, onAddButton }: CreateCrudOptionsProps): CreateCrudOptionsRet {
export default function ({ crudExpose }: CreateCrudOptionsProps): CreateCrudOptionsRet {
const pageRequest = async (query) => {
return await api.GetList(query);
};
@@ -24,7 +24,11 @@ export default function ({ crudExpose, onAddCatalog, onAddChildren, onAddButton
};
const addRequest = async (context:any) => {
return await api.AddObj(context.form);
const {form} = context;
if(form.web_path===undefined||form.web_path===null){
form.web_path='/'
}
return await api.AddObj(form);
};
//刷新父节点状态
@@ -148,7 +152,7 @@ export default function ({ crudExpose, onAddCatalog, onAddChildren, onAddButton
value:0,
valueChange({ form, value, getComponentRef }) {
if (value) {
getComponentRef("parent").reloadDict(); // 执行city的select组件的reloadDict()方法，触发“city”重新加载字典
getComponentRef("parent")?.reloadDict(); // 执行city的select组件的reloadDict()方法，触发“city”重新加载字典
}
}
},
@@ -256,7 +260,9 @@ export default function ({ crudExpose, onAddCatalog, onAddChildren, onAddButton
},
},
component: {
title: '组件地址',
title: compute(({ form }) => {
return form.menu_type === 1 ? '组件地址' : '按钮权限值';
}),
form: {
show: compute(({ form }) => {
return [1,2].includes(form.menu_type)

85
web/src/views/system/menu/index.vue
View File

@@ -25,92 +25,9 @@ const { crudExpose } = useExpose({ crudRef, crudBinding });
// 添加目录
const onAddCatalog = (row:any)=>{
const childrenOptions = ref();
childrenOptions.value = {...crudBinding.value.addForm};
childrenOptions.value.columns.parent_name.show = false
childrenOptions.value.columns.icon.show = true
childrenOptions.value.columns.web_path.show = false
childrenOptions.value.columns.is_link.show = false
childrenOptions.value.columns.cache.show = false
childrenOptions.value.columns.web_path.show = false
childrenOptions.value.columns.visible.show = false
childrenOptions.value.columns.frame_out.show = false
childrenOptions.value.columns.sort.show = true
childrenOptions.value.columns.status.show = true
childrenOptions.value.columns.component.show = false
childrenOptions.value.initialForm = { menu_type:0,web_path:'/' };
//覆盖提交方法
childrenOptions.value.doSubmit=({ form })=>{
AddObj(form).then(res=>{
ElMessage.success('添加成功')
childrenOptions.value.onSuccess()
addChildrenRef.value.close()
})
}
addChildrenRef.value.open(childrenOptions.value);
}
// 添加子级
const addChildrenRef = ref();
const onAddChildren = (row:any)=>{
const childrenOptions = ref();
childrenOptions.value = {...crudBinding.value.addForm};
childrenOptions.value.columns.parent_name.show = true
childrenOptions.value.columns.is_link.show = true
childrenOptions.value.columns.cache.show = true
childrenOptions.value.columns.web_path.show = true
childrenOptions.value.columns.component.show = true
childrenOptions.value.columns.component.title = "组件地址"
childrenOptions.value.columns.visible.show = true
childrenOptions.value.columns.frame_out.show = true
childrenOptions.value.columns.status.show = true
childrenOptions.value.initialForm = { parent_name: row.name,menu_type:1 };
//覆盖提交方法
childrenOptions.value.doSubmit=({ form })=>{
form.parent = row.id
AddObj(form).then(res=>{
ElMessage.success('添加成功')
childrenOptions.value.onSuccess()
addChildrenRef.value.close()
})
}
addChildrenRef.value.open(childrenOptions.value);
}
// 添加按钮
const onAddButton = (row:any)=>{
const childrenOptions = ref();
childrenOptions.value = {...crudBinding.value.addForm};
childrenOptions.value.columns.parent_name.show = true
childrenOptions.value.columns.icon.show = false
childrenOptions.value.columns.web_path.show = false
childrenOptions.value.columns.is_link.show = false
childrenOptions.value.columns.cache.show = false
childrenOptions.value.columns.web_path.show = false
childrenOptions.value.columns.visible.show = false
childrenOptions.value.columns.frame_out.show = false
childrenOptions.value.columns.sort.show = false
childrenOptions.value.columns.status.show = false
childrenOptions.value.columns.component.show = true
childrenOptions.value.columns.component.title = "按钮权限值"
childrenOptions.value.initialForm = { parent_name: row.name,menu_type:2 };
//覆盖提交方法
childrenOptions.value.doSubmit=({ form })=>{
form.parent = row.id
AddObj(form).then(res=>{
ElMessage.success('添加成功')
childrenOptions.value.onSuccess()
addChildrenRef.value.close()
})
}
addChildrenRef.value.open(childrenOptions.value);
}
// 你的crud配置
const { crudOptions } = createCrudOptions({ crudExpose,onAddCatalog,onAddChildren,onAddButton });
const { crudOptions } = createCrudOptions({ crudExpose });
// 初始化crud配置
// eslint-disable-next-line @typescript-eslint/no-unused-vars,no-unused-vars
const { resetCrudOptions } = useCrud({ crudExpose, crudOptions });

39
web/src/views/system/role/components/PermissionComNew/api.ts → web/src/views/system/role/components/MenuPermission/api.ts
View File

@@ -1,18 +1,49 @@
import { request } from "/@/utils/service";
import XEUtils from 'xe-utils';
/**
* 获取角色的授权列表
* 获取菜单树
* @param roleId
* @param query
*/
export function getRolePremission(query:object) {
export function getMenuPremissionTree(query:object) {
return request({
url: '/api/system/role_menu_button_permission/get_role_premission/',
url: '/api/system/role_menu_permission/menu_permission_tree/',
method: 'get',
params:query
}).then((res:any)=>{
return XEUtils.toArrayTree(res.data,{ parentKey: 'parent_id', key: 'id', children: 'children',})
})
}
/**
* 获取已授权的菜单
* @param query
*/
export function getMenuPremissionChecked(query:object) {
return request({
url: '/api/system/role_menu_permission/get_menu_permission_checked/',
method: 'get',
params:query
}).then((res:any)=>{
return res.data
})
}
/**
* 保存菜单权限
*/
export function saveMenuPremission(data:object) {
return request({
url:'/api/system/role_menu_permission/save_menu_permission/',
method:'post',
data
})
}
/***
* 设置角色的权限
* @param roleId

212
web/src/views/system/role/components/MenuPermission/index.vue Normal file
View File

@@ -0,0 +1,212 @@
<template>
<div>
<MenuPermissionTree
ref="permissionTreeRef"
:tree="menuPermissionTreeData"
:default-expand-all="true"
:editable="false"
node-key="id"
show-checkbox
:props="{ label: 'title' }"></MenuPermissionTree>
<div style="margin-top: 2em">
<el-button type="primary" @click="updatePermission">确定</el-button>
</div>
</div>
</template>
<script setup lang="ts">
import {ref, onMounted, defineProps, watch, computed, reactive,nextTick} from 'vue';
import XEUtils from 'xe-utils';
import {errorNotification} from '/@/utils/message';
import {getDataPermissionRange, getDataPermissionDept, getMenuPremissionTree, saveMenuPremission,getMenuPremissionChecked} from './api';
import {MenuDataType, DataPermissionRangeType, CustomDataPermissionDeptType} from './types';
import {ElMessage} from 'element-plus'
import MenuPermissionTree from "./menuPermissionTree.vue";
const props = defineProps({
roleId: {
type: Number,
default: -1
}
})
//获取菜单/按钮权限
const permissionTreeRef = ref();
let menuPermissionTreeData = ref<MenuDataType[]>([]);
const getMenuPremissionTreeData = async () => {
const resMenu = await getMenuPremissionTree({role: props.roleId})
menuPermissionTreeData.value = resMenu
nextTick(() => {
updateChecked(props.roleId);
});
}
// 如果勾选节点中存在非叶子节点，tree组件会将其所有子节点全部勾选
// 所以要找出所有叶子节点，仅勾选叶子节点，tree组件会将父节点同步勾选
function getAllCheckedLeafNodeId(tree, checkedIds, temp) {
for (let i = 0; i < tree.length; i++) {
const item = tree[i];
if (item.children && item.children.length !== 0) {
getAllCheckedLeafNodeId(item.children, checkedIds, temp);
} else {
if (checkedIds.indexOf(item.id) !== -1) {
temp.push(item.id);
}
}
}
return temp;
}
async function updateChecked(roleId:string|number) {
let checkedIds = await getMenuPremissionChecked({role: roleId});
// 找出所有的叶子节点
checkedIds = getAllCheckedLeafNodeId(menuPermissionTreeData.value, checkedIds, []);
permissionTreeRef.value.setCheckedKeys(checkedIds);
}
/**
* 更新菜单权限
*/
async function updatePermission() {
const roleId = props.roleId;
const { checked, halfChecked } = permissionTreeRef.value.getChecked();
const allChecked = [...checked, ...halfChecked];
const menuIds = allChecked.filter(item=>item !== -1)
await saveMenuPremission({role: roleId, menu: menuIds})
handleDrawerClose();
ElMessage.success("授权成功");
}
const emit = defineEmits(['handleDrawerClose']);
const handleDrawerClose = () => {
emit('handleDrawerClose')
}
defineExpose({getMenuPremissionTreeData})
</script>
<style lang="scss" scoped>
.permission-com {
margin: 15px;
box-sizing: border-box;
.pc-save-btn {
margin-bottom: 15px;
}
.pc-collapse-title {
line-height: 32px;
span {
font-size: 16px;
}
}
.pc-collapse-main {
padding-top: 15px;
box-sizing: border-box;
.pccm-item {
margin-bottom: 10px;
.btn-item {
display: flex;
align-items: center;
span {
margin-left: 5px;
}
}
.columns-list {
.width-txt {
width: 200px;
}
.width-check {
width: 100px;
}
.width-icon {
cursor: pointer;
}
.columns-head {
display: flex;
align-items: center;
padding: 6px 0;
border-bottom: 1px solid #ebeef5;
box-sizing: border-box;
span {
font-weight: 900;
}
}
.columns-item {
display: flex;
align-items: center;
padding: 6px 0;
box-sizing: border-box;
.ci-checkout {
height: auto !important;
}
}
}
}
}
.pc-dialog {
.dialog-select {
width: 100%;
}
.dialog-tree {
width: 100%;
margin-top: 20px;
}
}
}
</style>
<style lang="scss">
.permission-com {
.el-collapse {
border-top: none;
border-bottom: none;
}
.el-collapse-item {
margin-bottom: 15px;
}
.el-collapse-item__header {
height: auto;
padding: 15px;
border-radius: 8px;
border-top: 1px solid #ebeef5;
border-left: 1px solid #ebeef5;
border-right: 1px solid #ebeef5;
box-sizing: border-box;
}
.el-collapse-item__header.is-active {
border-radius: 8px 8px 0 0;
background-color: #fafafa;
}
.el-collapse-item__wrap {
padding: 15px;
border-left: 1px solid #ebeef5;
border-right: 1px solid #ebeef5;
border-top: 1px solid #ebeef5;
border-radius: 0 0 8px 8px;
background-color: #fafafa;
box-sizing: border-box;
.el-collapse-item__content {
padding-bottom: 0;
}
}
}
</style>

205
web/src/views/system/role/components/MenuPermission/menuPermissionTree.vue Normal file
View File

@@ -0,0 +1,205 @@
<template>
<el-tree
v-if="computedTree"
ref="treeRef"
class="fs-permission-tree"
:class="{ 'is-editable': editable }"
:data="computedTree"
:props="computedProps"
@check="onChecked"
>
<template #default="{ data }">
<div :class="'node-title-pane'">
<div class="node-title">{{ data.name }}</div>
<div v-if="editable === true" class="node-suffix">
<fs-icon v-if="actions.add !== false" :icon="ui.icons.add" @click.stop="add(data)" />
<fs-icon v-if="actions.edit !== false && data.id !== -1" :icon="ui.icons.edit" @click.stop="edit(data)" />
<fs-icon
v-if="actions.remove !== false && data.id !== -1"
:icon="ui.icons.remove"
@click.stop="remove(data)"
/>
</div>
</div>
</template>
</el-tree>
</template>
<script lang="ts">
import _ from "lodash-es";
import { useUi, utils } from "@fast-crud/fast-crud";
import { defineComponent, ref, computed, nextTick, onMounted } from "vue";
export default defineComponent({
name: "FsPermissionTree",
props: {
/**
* 树形数据
* */
tree: {},
/**
* 是否可编辑
*/
editable: {
default: true
},
actions: {
default: {}
},
props: {}
} as any,
emits: ["add", "edit", "remove"],
setup(props: any, ctx) {
const treeRef = ref();
const { ui } = useUi();
const computedTree = computed(() => {
if (props.tree == null) {
return null;
}
const clone = _.cloneDeep(props.tree);
utils.deepdash.forEachDeep(clone, (value, key, pNode, context) => {
if (value == null) {
return;
}
if (!(value instanceof Object) || value instanceof Array) {
return;
}
if (value.class === "is-leaf-node") {
//处理过，无需再次处理
return;
}
if (value.children != null && value.children.length > 0) {
return;
}
const parents = context.parents;
if (parents.length < 2) {
return;
}
const parent = parents[parents.length - 2].value;
//看parent下面的children，是否全部都没有children
for (const child of parent.children) {
if (child.children != null && child.children.length > 0) {
//存在child有children
return;
}
}
// 所有的子节点都没有children
parent.class = "is-twig-node"; // 连接叶子节点的末梢枝杈节点
for (const child of parent.children) {
child.class = "is-leaf-node";
}
});
console.log("nodes ", clone);
return [
{
name: "根节点",
id: -1,
children: clone
}
];
});
function add(data) {
ctx.emit("add", data);
}
function edit(data) {
ctx.emit("edit", data);
}
function remove(data) {
ctx.emit("remove", data);
}
function onChecked(a, b, c) {
console.log("chedcked", a, b, c);
}
function getChecked() {
const checked = treeRef.value.getCheckedKeys();
const halfChecked = treeRef.value.getHalfCheckedKeys();
return {
checked,
halfChecked
};
}
function setCheckedKeys(ids) {
treeRef.value.setCheckedKeys(ids);
}
function customNodeClass(data) {
if (data.class) {
return data.class;
}
return null;
}
const computedProps = computed(() => {
return _.merge({ class: customNodeClass }, props.props);
});
return {
computedTree,
add,
edit,
remove,
treeRef,
onChecked,
getChecked,
computedProps,
setCheckedKeys,
ui
};
}
});
</script>
<style lang="scss">
.fs-permission-tree {
height: 80vh;
overflow-y: scroll;
.el-tree-node.is-expanded.is-twig-node > .el-tree-node__children {
display: flex;
flex-wrap: wrap;
}
.is-twig-node > .el-tree-node__children > :not(:first-child) .el-tree-node__content {
padding-left: 0 !important;
}
.el-tree-node__content {
box-sizing: content-box;
padding: 5px;
}
.is-leaf-node {
//&::before {
// display: none;
//}
}
.node-title-pane {
display: flex;
.node-title {
width: 100px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
}
&.is-editable {
.el-tree-node__content {
&:hover {
.node-suffix {
visibility: visible;
}
}
}
.node-suffix {
margin-right: 5px;
visibility: hidden;
i {
width: 20px;
height: 20px;
}
> * {
margin-left: 5px;
}
}
}
}
</style>

0
web/src/views/system/role/components/PermissionComNew/types.ts → web/src/views/system/role/components/MenuPermission/types.ts
View File

167
web/src/views/system/role/components/PermissionComNew/index.vue → web/src/views/system/role/components/index.vue
View File

@@ -8,110 +8,26 @@
<el-tag>{{ props.roleName }}</el-tag>
</div>
</el-col>
<el-col :span="6" :offset="8">
<div>
<el-button size="small" type="primary" class="pc-save-btn" @click="handleSavePermission">保存菜单授权
</el-button>
</div>
</el-col>
</el-row>
</template>
<div class="permission-com">
<el-collapse v-model="collapseCurrent" @change="handleCollapseChange" accordion>
<el-collapse-item v-for="(item,mIndex) in menuData" :key="mIndex" :name="mIndex">
<template #title>
<div @click.stop="null">
<p class="pc-collapse-title">
<el-checkbox v-model="item.isCheck">
<span>{{ item.name }}</span>
</el-checkbox>
</p>
<div v-show="!collapseCurrent.includes(mIndex)">
<el-checkbox v-for="btn in item.btns" :key="btn.value" :label="btn.value" v-model="btn.isCheck">
{{ btn.name }}
</el-checkbox>
</div>
</div>
</template>
<div class="pc-collapse-main">
<div class="pccm-item">
<p>允许对这些数据有以下操作</p>
<el-checkbox v-for="(btn,bIndex) in item.btns" :key="bIndex" v-model="btn.isCheck" :label="btn.value">
<div class="btn-item">
{{ btn.data_range!==null ? `${btn.name}(${formatDataRange(btn.data_range)})` : btn.name }}
<span v-show="btn.isCheck" @click.stop.prevent="handleSettingClick(item, btn.id)">
<el-icon><Setting/></el-icon>
</span>
</div>
</el-checkbox>
</div>
<div class="pccm-item">
<p>对这些数据有以下字段权限</p>
<ul class="columns-list">
<li class="columns-head">
<div class="width-txt">
<span>字段</span>
</div>
<div v-for="(head,hIndex) in column.header" :key="hIndex" class="width-check">
<el-checkbox :label="head.value" @change="handleColumnChange($event, item, head.value)">
<span>{{head.label}}</span>
</el-checkbox>
</div>
</li>
<li v-for="(c_item, c_index) in item.columns" :key="c_index" class="columns-item">
<div class="width-txt">{{ c_item.title }}</div>
<div v-for="(col,cIndex) in column.header" :key="cIndex" class="width-check">
<el-checkbox v-model="c_item[col.value]" class="ci-checkout"></el-checkbox>
</div>
</li>
</ul>
</div>
</div>
</el-collapse-item>
</el-collapse>
<el-dialog v-model="dialogVisible" title="数据权限配置" width="400px" :close-on-click-modal="false"
:before-close="handleDialogClose">
<div class="pc-dialog">
<el-select v-model="dataPermission" @change="handlePermissionRangeChange" class="dialog-select"
placeholder="请选择">
<el-option v-for="item in dataPermissionRange" :key="item.value" :label="item.label" :value="item.value"/>
</el-select>
<el-tree-select
v-show="dataPermission === 4"
node-key="id"
v-model="customDataPermission"
:props="defaultTreeProps"
:data="deptData"
multiple
check-strictly
:render-after-expand="false"
show-checkbox
class="dialog-tree"
/>
</div>
<template #footer>
<div>
<el-button type="primary" @click="handleDialogConfirm"> 确定</el-button>
<el-button @click="handleDialogClose"> 取消</el-button>
</div>
</template>
</el-dialog>
</div>
<div>
<el-tabs type="border-card">
<el-tab-pane label="菜单/按钮授权">
<MenuPermission ref="menuPermissionRef" :role-id="props.roleId" @handleDrawerClose="handleDrawerClose"></MenuPermission>
</el-tab-pane>
<el-tab-pane label="请求接口授权"></el-tab-pane>
<el-tab-pane label="接口权限">角色管理</el-tab-pane>
</el-tabs>
</div>
</el-drawer>
</template>
<script setup lang="ts">
import {ref, onMounted, defineProps, watch, computed, reactive} from 'vue';
import {ref, onMounted, defineProps, watch, computed, reactive,nextTick} from 'vue';
import XEUtils from 'xe-utils';
import {errorNotification} from '/@/utils/message';
import {getDataPermissionRange, getDataPermissionDept, getRolePremission, setRolePremission,setBtnDatarange} from './api';
import {MenuDataType, DataPermissionRangeType, CustomDataPermissionDeptType} from './types';
import {ElMessage} from 'element-plus'
import MenuPermission from "./MenuPermission/index.vue";
const props = defineProps({
roleId: {
@@ -128,14 +44,17 @@ const props = defineProps({
}
})
const emit = defineEmits(['update:drawerVisible'])
const menuPermissionRef = ref()
const drawerVisible = ref(false)
watch(
() => props.drawerVisible,
(val) => {
drawerVisible.value = val;
getMenuBtnPermission()
fetchData()
nextTick(()=>{
console.log(menuPermissionRef)
menuPermissionRef.value.getMenuPremissionTreeData()
})
// fetchData()
}
);
const handleDrawerClose = () => {
@@ -149,7 +68,7 @@ const defaultTreeProps = {
value: 'id',
};
let menuData = ref<MenuDataType[]>([]);
let collapseCurrent = ref(['1']);
let menuCurrent = ref<Partial<MenuDataType>>({});
let menuBtnCurrent = ref<number>(-1);
@@ -164,10 +83,52 @@ const formatDataRange = computed(() => {
let deptData = ref<CustomDataPermissionDeptType[]>([]);
let dataPermission = ref();
let customDataPermission = ref([]);
//获取菜单,按钮,权限
const getMenuBtnPermission = async () => {
const resMenu = await getRolePremission({role: props.roleId})
menuData.value = resMenu.data
//获取菜单/按钮权限
const permissionTreeRef = ref();
let menuPermissionTreeData = ref<MenuDataType[]>([]);
const getMenuPremissionTreeData = async () => {
const resMenu = await getMenuPremissionTree({role: props.roleId})
menuPermissionTreeData.value = resMenu
nextTick(() => {
updateChecked(props.roleId);
});
}
// 如果勾选节点中存在非叶子节点，tree组件会将其所有子节点全部勾选
// 所以要找出所有叶子节点，仅勾选叶子节点，tree组件会将父节点同步勾选
function getAllCheckedLeafNodeId(tree, checkedIds, temp) {
for (let i = 0; i < tree.length; i++) {
const item = tree[i];
if (item.children && item.children.length !== 0) {
getAllCheckedLeafNodeId(item.children, checkedIds, temp);
} else {
if (checkedIds.indexOf(item.id) !== -1) {
temp.push(item.id);
}
}
}
return temp;
}
async function updateChecked(roleId:string|number) {
let checkedIds = await getMenuPremissionChecked({role: roleId});
// 找出所有的叶子节点
checkedIds = getAllCheckedLeafNodeId(menuPermissionTreeData.value, checkedIds, []);
permissionTreeRef.value.setCheckedKeys(checkedIds);
}
/**
* 更新菜单权限
*/
async function updatePermission() {
const roleId = props.roleId;
const { checked, halfChecked } = permissionTreeRef.value.getChecked();
const allChecked = [...checked, ...halfChecked];
const menuIds = allChecked.filter(item=>item !== -1)
await saveMenuPremission({role: roleId, menu: menuIds})
handleDrawerClose();
//await updateChecked(roleId);
ElMessage.success("授权成功");
}
const fetchData = async () => {

5
web/src/views/system/role/index.vue
View File

@@ -6,8 +6,6 @@
</template>
</fs-crud>
<permission ref="rolePermission"></permission>
<PermissionComNew v-model:drawerVisible="drawerVisible" :roleId="roleId" :roleName="roleName" @drawerClose="handleDrawerClose" />
</fs-page>
</template>
@@ -19,7 +17,7 @@ import { GetPermission } from './api';
import { useExpose, useCrud } from '@fast-crud/fast-crud';
import { createCrudOptions } from './crud';
import permission from './components/PermissionCom/index.vue';
import PermissionComNew from './components/PermissionComNew/index.vue';
import PermissionComNew from './components/index.vue';
let drawerVisible = ref(false);
let roleId = ref(null);
@@ -67,5 +65,4 @@ onMounted(async () => {
crudExpose.doRefresh();
});
defineExpose(rolePermission);
</script>