feat: 完善角色管理-菜单权限功能，新颖的交互体验 (#984)

* feat: 完善角色管理-菜单权限功能，新颖的交互体验

mock/system.ts

@@ -140,6 +140,234 @@ export default defineFakeRoute([
       };
     }
   },
+  // 角色管理-权限-菜单权限
+  {
+    url: "/role-menu",
+    method: "post",
+    response: () => {
+      return {
+        success: true,
+        data: [
+          // 外部页面
+          {
+            parentId: 0,
+            id: 100,
+            menuType: 0, // 菜单类型（0代表菜单、1代表iframe、2代表外链、3代表按钮）
+            title: "menus.hsExternalPage"
+          },
+          {
+            parentId: 100,
+            id: 101,
+            menuType: 0,
+            title: "menus.hsExternalDoc"
+          },
+          {
+            parentId: 101,
+            id: 102,
+            menuType: 2,
+            title: "menus.externalLink"
+          },
+          {
+            parentId: 101,
+            id: 103,
+            menuType: 2,
+            title: "menus.pureutilsLink"
+          },
+          {
+            parentId: 100,
+            id: 104,
+            menuType: 1,
+            title: "menus.hsEmbeddedDoc"
+          },
+          {
+            parentId: 104,
+            id: 105,
+            menuType: 1,
+            title: "menus.hsEpDocument"
+          },
+          {
+            parentId: 104,
+            id: 106,
+            menuType: 1,
+            title: "menus.hsTailwindcssDocument"
+          },
+          {
+            parentId: 104,
+            id: 107,
+            menuType: 1,
+            title: "menus.hsVueDocument"
+          },
+          {
+            parentId: 104,
+            id: 108,
+            menuType: 1,
+            title: "menus.hsViteDocument"
+          },
+          {
+            parentId: 104,
+            id: 109,
+            menuType: 1,
+            title: "menus.hsPiniaDocument"
+          },
+          {
+            parentId: 104,
+            id: 110,
+            menuType: 1,
+            title: "menus.hsRouterDocument"
+          },
+          // 权限管理
+          {
+            parentId: 0,
+            id: 200,
+            menuType: 0,
+            title: "menus.permission"
+          },
+          {
+            parentId: 200,
+            id: 201,
+            menuType: 0,
+            title: "menus.permissionPage"
+          },
+          {
+            parentId: 200,
+            id: 202,
+            menuType: 0,
+            title: "menus.permissionButton"
+          },
+          {
+            parentId: 202,
+            id: 203,
+            menuType: 3,
+            title: "添加"
+          },
+          {
+            parentId: 202,
+            id: 204,
+            menuType: 3,
+            title: "修改"
+          },
+          {
+            parentId: 202,
+            id: 205,
+            menuType: 3,
+            title: "删除"
+          },
+          // 系统管理
+          {
+            parentId: 0,
+            id: 300,
+            menuType: 0,
+            title: "menus.hssysManagement"
+          },
+          {
+            parentId: 300,
+            id: 301,
+            menuType: 0,
+            title: "menus.hsUser"
+          },
+          {
+            parentId: 300,
+            id: 302,
+            menuType: 0,
+            title: "menus.hsRole"
+          },
+          {
+            parentId: 300,
+            id: 303,
+            menuType: 0,
+            title: "menus.hsSystemMenu"
+          },
+          {
+            parentId: 300,
+            id: 304,
+            menuType: 0,
+            title: "menus.hsDept"
+          },
+          // 系统监控
+          {
+            parentId: 0,
+            id: 400,
+            menuType: 0,
+            title: "menus.hssysMonitor"
+          },
+          {
+            parentId: 400,
+            id: 401,
+            menuType: 0,
+            title: "menus.hsOnlineUser"
+          },
+          {
+            parentId: 400,
+            id: 402,
+            menuType: 0,
+            title: "menus.hsLoginLog"
+          },
+          {
+            parentId: 400,
+            id: 403,
+            menuType: 0,
+            title: "menus.hsOperationLog"
+          },
+          {
+            parentId: 400,
+            id: 404,
+            menuType: 0,
+            title: "menus.hsSystemLog"
+          },
+          // 标签页操作
+          {
+            parentId: 0,
+            id: 500,
+            menuType: 0,
+            title: "menus.hstabs"
+          },
+          {
+            parentId: 500,
+            id: 501,
+            menuType: 0,
+            title: "menus.hstabs"
+          },
+          {
+            parentId: 500,
+            id: 502,
+            menuType: 0,
+            title: "query传参模式"
+          },
+          {
+            parentId: 500,
+            id: 503,
+            menuType: 0,
+            title: "params传参模式"
+          }
+        ]
+      };
+    }
+  },
+  // 角色管理-权限-菜单权限-根据角色 id 查对应菜单
+  {
+    url: "/role-menu-ids",
+    method: "post",
+    response: ({ body }) => {
+      if (body.id == 1) {
+        return {
+          success: true,
+          data: [
+            100, 101, 102, 103, 104, 105, 106, 107, 108, 109, 110, 200, 201,
+            202, 203, 204, 205, 300, 301, 302, 303, 304, 400, 401, 402, 403,
+            404, 500, 501, 502, 503
+          ]
+        };
+      } else if (body.id == 2) {
+        return {
+          success: true,
+          data: [
+            100, 101, 102, 103, 104, 105, 106, 107, 108, 109, 110, 404, 500,
+            501, 502, 503
+          ]
+        };
+      }
+    }
+  },
   // 菜单管理
   {
     url: "/menu",

src/api/system.ts

@@ -73,3 +73,13 @@ export const getSystemLogsList = (data?: object) => {
 export const getSystemLogsDetail = (data?: object) => {
   return http.request<Result>("post", "/system-logs-detail", { data });
 };
+
+/** 获取角色管理-权限-菜单权限 */
+export const getRoleMenu = (data?: object) => {
+  return http.request<Result>("post", "/role-menu", { data });
+};
+
+/** 获取角色管理-权限-菜单权限-根据角色 id 查对应菜单 */
+export const getRoleMenuIds = (data?: object) => {
+  return http.request<Result>("post", "/role-menu-ids", { data });
+};

src/views/system/role/index.vue

@@ -1,8 +1,14 @@
 <script setup lang="ts">
-import { ref } from "vue";
 import { useRole } from "./utils/hook";
+import { ref, computed, nextTick, onMounted } from "vue";
 import { PureTableBar } from "@/components/RePureTableBar";
 import { useRenderIcon } from "@/components/ReIcon/src/hooks";
+import {
+  delay,
+  subBefore,
+  deviceDetection,
+  useResizeObserver
+} from "@pureadmin/utils";
 
 // import Database from "@iconify-icons/ri/database-2-line";
 // import More from "@iconify-icons/ep/more-filled";
@@ -11,29 +17,77 @@ import EditPen from "@iconify-icons/ep/edit-pen";
 import Refresh from "@iconify-icons/ep/refresh";
 import Menu from "@iconify-icons/ep/menu";
 import AddFill from "@iconify-icons/ri/add-circle-line";
+import Close from "@iconify-icons/ep/close";
+import Check from "@iconify-icons/ep/check";
 
 defineOptions({
   name: "SystemRole"
 });
 
+const iconClass = computed(() => {
+  return [
+    "w-[22px]",
+    "h-[22px]",
+    "flex",
+    "justify-center",
+    "items-center",
+    "outline-none",
+    "rounded-[4px]",
+    "cursor-pointer",
+    "transition-colors",
+    "hover:bg-[#0000000f]",
+    "dark:hover:bg-[#ffffff1f]",
+    "dark:hover:text-[#ffffffd9]"
+  ];
+});
+
+const treeRef = ref();
 const formRef = ref();
+const tableRef = ref();
+const contentRef = ref();
+const treeHeight = ref();
+
 const {
   form,
+  isShow,
+  curRow,
   loading,
   columns,
+  rowStyle,
   dataList,
+  treeData,
+  treeProps,
+  isLinkage,
   pagination,
+  isExpandAll,
+  isSelectAll,
+  treeSearchValue,
   // buttonClass,
   onSearch,
   resetForm,
   openDialog,
   handleMenu,
+  handleSave,
   handleDelete,
+  filterMethod,
+  transformI18n,
+  onQueryChanged,
   // handleDatabase,
   handleSizeChange,
   handleCurrentChange,
   handleSelectionChange
-} = useRole();
+} = useRole(treeRef);
+
+onMounted(() => {
+  useResizeObserver(contentRef, async () => {
+    await nextTick();
+    delay(60).then(() => {
+      treeHeight.value = parseFloat(
+        subBefore(tableRef.value.getTableDoms().tableWrapper.style.height, "px")
+      );
+    });
+  });
+});
 </script>
 
 <template>
@@ -86,79 +140,87 @@ const {
       </el-form-item>
     </el-form>
 
-    <PureTableBar
+    <div
-      title="角色管理（仅演示，操作后不生效）"
+      ref="contentRef"
-      :columns="columns"
+      :class="['flex', deviceDetection() ? 'flex-wrap' : '']"
-      @refresh="onSearch"
     >
-      <template #buttons>
+      <PureTableBar
-        <el-button
+        :class="[isShow && !deviceDetection() ? '!w-[60vw]' : 'w-full']"
-          type="primary"
+        style="transition: width 220ms cubic-bezier(0.4, 0, 0.2, 1)"
-          :icon="useRenderIcon(AddFill)"
+        title="角色管理（仅演示，操作后不生效）"
-          @click="openDialog()"
+        :columns="columns"
-        >
+        @refresh="onSearch"
-          新增角色
+      >
-        </el-button>
+        <template #buttons>
-      </template>
+          <el-button
-      <template v-slot="{ size, dynamicColumns }">
+            type="primary"
-        <pure-table
+            :icon="useRenderIcon(AddFill)"
-          align-whole="center"
+            @click="openDialog()"
-          showOverflowTooltip
+          >
-          table-layout="auto"
+            新增角色
-          :loading="loading"
+          </el-button>
-          :size="size"
+        </template>
-          adaptive
+        <template v-slot="{ size, dynamicColumns }">
-          :adaptiveConfig="{ offsetBottom: 108 }"
+          <pure-table
-          :data="dataList"
+            ref="tableRef"
-          :columns="dynamicColumns"
+            align-whole="center"
-          :pagination="pagination"
+            showOverflowTooltip
-          :paginationSmall="size === 'small' ? true : false"
+            table-layout="auto"
-          :header-cell-style="{
+            :loading="loading"
-            background: 'var(--el-fill-color-light)',
+            :size="size"
-            color: 'var(--el-text-color-primary)'
+            adaptive
-          }"
+            :row-style="rowStyle"
-          @selection-change="handleSelectionChange"
+            :adaptiveConfig="{ offsetBottom: 108 }"
-          @page-size-change="handleSizeChange"
+            :data="dataList"
-          @page-current-change="handleCurrentChange"
+            :columns="dynamicColumns"
-        >
+            :pagination="pagination"
-          <template #operation="{ row }">
+            :paginationSmall="size === 'small' ? true : false"
-            <el-button
+            :header-cell-style="{
-              class="reset-margin"
+              background: 'var(--el-fill-color-light)',
-              link
+              color: 'var(--el-text-color-primary)'
-              type="primary"
+            }"
-              :size="size"
+            @selection-change="handleSelectionChange"
-              :icon="useRenderIcon(EditPen)"
+            @page-size-change="handleSizeChange"
-              @click="openDialog('修改', row)"
+            @page-current-change="handleCurrentChange"
-            >
+          >
-              修改
+            <template #operation="{ row }">
-            </el-button>
+              <el-button
-            <el-button
+                class="reset-margin"
-              class="reset-margin"
+                link
-              link
+                type="primary"
-              type="primary"
+                :size="size"
-              :size="size"
+                :icon="useRenderIcon(EditPen)"
-              :icon="useRenderIcon(Menu)"
+                @click="openDialog('修改', row)"
-              @click="handleMenu"
+              >
-            >
+                修改
-              菜单权限
+              </el-button>
-            </el-button>
+              <el-popconfirm
-            <el-popconfirm
+                :title="`是否确认删除角色名称为${row.name}的这条数据`"
-              :title="`是否确认删除角色名称为${row.name}的这条数据`"
+                @confirm="handleDelete(row)"
-              @confirm="handleDelete(row)"
+              >
-            >
+                <template #reference>
-              <template #reference>
+                  <el-button
-                <el-button
+                    class="reset-margin"
-                  class="reset-margin"
+                    link
-                  link
+                    type="primary"
-                  type="primary"
+                    :size="size"
-                  :size="size"
+                    :icon="useRenderIcon(Delete)"
-                  :icon="useRenderIcon(Delete)"
+                  >
-                >
+                    删除
-                  删除
+                  </el-button>
-                </el-button>
+                </template>
-              </template>
+              </el-popconfirm>
-            </el-popconfirm>
+              <el-button
-            <!-- <el-dropdown>
+                class="reset-margin"
+                link
+                type="primary"
+                :size="size"
+                :icon="useRenderIcon(Menu)"
+                @click="handleMenu(row)"
+              >
+                权限
+              </el-button>
+              <!-- <el-dropdown>
               <el-button
                 class="ml-3 mt-[2px]"
                 link
@@ -195,10 +257,74 @@ const {
                 </el-dropdown-menu>
               </template>
             </el-dropdown> -->
+            </template>
+          </pure-table>
+        </template>
+      </PureTableBar>
+
+      <div
+        v-if="isShow"
+        class="!min-w-[calc(100vw-60vw-268px)] mt-2 px-2 pb-2 bg-bg_color ml-2 overflow-auto"
+      >
+        <div class="flex justify-between w-full px-3 pt-5 pb-4">
+          <div class="flex">
+            <span :class="iconClass">
+              <IconifyIconOffline
+                v-tippy="{
+                  content: '关闭'
+                }"
+                class="dark:text-white"
+                width="18px"
+                height="18px"
+                :icon="Close"
+                @click="handleMenu"
+              />
+            </span>
+            <span :class="[iconClass, 'ml-2']">
+              <IconifyIconOffline
+                v-tippy="{
+                  content: '保存菜单权限'
+                }"
+                class="dark:text-white"
+                width="18px"
+                height="18px"
+                :icon="Check"
+                @click="handleSave"
+              />
+            </span>
+          </div>
+          <p class="font-bold truncate">
+            菜单权限
+            {{ `${curRow?.name ? `（${curRow.name}）` : ""}` }}
+          </p>
+        </div>
+        <el-input
+          v-model="treeSearchValue"
+          placeholder="请输入菜单进行搜索"
+          class="mb-1"
+          clearable
+          @input="onQueryChanged"
+        />
+        <div class="flex flex-wrap">
+          <el-checkbox v-model="isExpandAll" label="展开/折叠" />
+          <el-checkbox v-model="isSelectAll" label="全选/全不选" />
+          <el-checkbox v-model="isLinkage" label="父子联动" />
+        </div>
+        <el-tree-v2
+          ref="treeRef"
+          show-checkbox
+          :data="treeData"
+          :props="treeProps"
+          :height="treeHeight"
+          :check-strictly="!isLinkage"
+          :filter-method="filterMethod"
+        >
+          <template #default="{ node }">
+            <span>{{ transformI18n(node.label) }}</span>
           </template>
-        </pure-table>
+        </el-tree-v2>
-      </template>
+      </div>
-    </PureTableBar>
+    </div>
   </div>
 </template>
 

src/views/system/role/utils/hook.tsx

@@ -1,25 +1,41 @@
 import dayjs from "dayjs";
 import editForm from "../form.vue";
+import { handleTree } from "@/utils/tree";
 import { message } from "@/utils/message";
-import { getRoleList } from "@/api/system";
 import { ElMessageBox } from "element-plus";
 import { usePublicHooks } from "../../hooks";
+import { getKeyList } from "@pureadmin/utils";
+import { transformI18n } from "@/plugins/i18n";
 import { addDialog } from "@/components/ReDialog";
 import type { FormItemProps } from "../utils/types";
 import type { PaginationProps } from "@pureadmin/table";
-import { reactive, ref, onMounted, h, toRaw } from "vue";
+import { getRoleList, getRoleMenu, getRoleMenuIds } from "@/api/system";
+import { type Ref, reactive, ref, onMounted, h, toRaw, watch } from "vue";
 
-export function useRole() {
+export function useRole(treeRef: Ref) {
   const form = reactive({
     name: "",
     code: "",
     status: ""
   });
+  const curRow = ref();
   const formRef = ref();
   const dataList = ref([]);
+  const treeIds = ref([]);
+  const treeData = ref([]);
+  const isShow = ref(false);
   const loading = ref(true);
+  const isLinkage = ref(false);
+  const treeSearchValue = ref();
   const switchLoadMap = ref({});
+  const isExpandAll = ref(false);
+  const isSelectAll = ref(false);
   const { switchStyle } = usePublicHooks();
+  const treeProps = {
+    value: "id",
+    label: "title",
+    children: "children"
+  };
   const pagination = reactive<PaginationProps>({
     total: 0,
     pageSize: 10,
@@ -29,22 +45,18 @@ export function useRole() {
   const columns: TableColumnList = [
     {
       label: "角色编号",
-      prop: "id",
+      prop: "id"
-      minWidth: 100
     },
     {
       label: "角色名称",
-      prop: "name",
+      prop: "name"
-      minWidth: 120
     },
     {
       label: "角色标识",
-      prop: "code",
+      prop: "code"
-      minWidth: 150
     },
     {
       label: "状态",
-      minWidth: 130,
       cellRenderer: scope => (
         <el-switch
           size={scope.props.size === "small" ? "small" : "default"}
@@ -58,24 +70,25 @@ export function useRole() {
           style={switchStyle.value}
           onChange={() => onChange(scope as any)}
         />
-      )
+      ),
+      minWidth: 90
     },
     {
       label: "备注",
       prop: "remark",
-      minWidth: 150
+      minWidth: 160
     },
     {
       label: "创建时间",
-      minWidth: 180,
       prop: "createTime",
+      minWidth: 160,
       formatter: ({ createTime }) =>
         dayjs(createTime).format("YYYY-MM-DD HH:mm:ss")
     },
     {
       label: "操作",
       fixed: "right",
-      width: 240,
+      width: 210,
       slot: "operation"
     }
   ];
@@ -210,29 +223,92 @@ export function useRole() {
   }
 
   /** 菜单权限 */
-  function handleMenu() {
+  async function handleMenu(row?: any) {
-    message("等菜单管理页面开发后完善");
+    const { id } = row;
+    if (id) {
+      curRow.value = row;
+      isShow.value = true;
+      const { data } = await getRoleMenuIds({ id });
+      treeRef.value.setCheckedKeys(data);
+    } else {
+      curRow.value = null;
+      isShow.value = false;
+    }
+  }
+
+  /** 高亮当前权限选中行 */
+  function rowStyle({ row: { id } }) {
+    return {
+      cursor: "pointer",
+      background: id === curRow.value?.id ? "var(--el-fill-color-light)" : ""
+    };
+  }
+
+  /** 菜单权限-保存 */
+  function handleSave() {
+    const { id, name } = curRow.value;
+    // 根据用户 id 调用实际项目中菜单权限修改接口
+    console.log(id, treeRef.value.getCheckedKeys());
+    message(`角色名称为${name}的菜单权限修改成功`, {
+      type: "success"
+    });
   }
 
   /** 数据权限 可自行开发 */
   // function handleDatabase() {}
 
-  onMounted(() => {
+  const onQueryChanged = (query: string) => {
+    treeRef.value!.filter(query);
+  };
+
+  const filterMethod = (query: string, node) => {
+    return transformI18n(node.title)!.includes(query);
+  };
+
+  onMounted(async () => {
     onSearch();
+    const { data } = await getRoleMenu();
+    treeIds.value = getKeyList(data, "id");
+    treeData.value = handleTree(data);
+  });
+
+  watch(isExpandAll, val => {
+    val
+      ? treeRef.value.setExpandedKeys(treeIds.value)
+      : treeRef.value.setExpandedKeys([]);
+  });
+
+  watch(isSelectAll, val => {
+    val
+      ? treeRef.value.setCheckedKeys(treeIds.value)
+      : treeRef.value.setCheckedKeys([]);
   });
 
   return {
     form,
+    isShow,
+    curRow,
     loading,
     columns,
+    rowStyle,
     dataList,
+    treeData,
+    treeProps,
+    isLinkage,
     pagination,
+    isExpandAll,
+    isSelectAll,
+    treeSearchValue,
     // buttonClass,
     onSearch,
     resetForm,
     openDialog,
     handleMenu,
+    handleSave,
     handleDelete,
+    filterMethod,
+    transformI18n,
+    onQueryChanged,
     // handleDatabase,
     handleSizeChange,
     handleCurrentChange,