1.完成新版菜单授权

backend/dvadmin/system/views/role_menu.py

@@ -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:

web/src/components/iconSelector/index.vue

@@ -159,11 +159,14 @@ const initModeValueEcho = () => {
 // 处理 icon 类型，用于回显时，tab 高亮与初始化数据
 const initFontIconName = () => {
 	let name = 'ali';
+  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;
 };
 // 初始化数据

web/src/views/system/menu/crud.ts

@@ -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)

web/src/views/system/menu/index.vue

@@ -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 });

web/src/views/system/role/components/MenuPermission/api.ts

@@ -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

web/src/views/system/role/components/MenuPermission/index.vue

@@ -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>

web/src/views/system/role/components/MenuPermission/menuPermissionTree.vue

@@ -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>

web/src/views/system/role/components/index.vue

@@ -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-tabs type="border-card">
-            <el-button @click="handleDialogClose"> 取消</el-button>
+       <el-tab-pane label="菜单/按钮授权">
-          </div>
+         <MenuPermission ref="menuPermissionRef" :role-id="props.roleId" @handleDrawerClose="handleDrawerClose"></MenuPermission>
-        </template>
+       </el-tab-pane>
-      </el-dialog>
+       <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()
+      nextTick(()=>{
-      fetchData()
+        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 permissionTreeRef = ref();
-  const resMenu = await getRolePremission({role: props.roleId})
+let menuPermissionTreeData = ref<MenuDataType[]>([]);
-  menuData.value = resMenu.data
+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 () => {

web/src/views/system/role/index.vue

@@ -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>