From 6270ec712fcae4999ebd8c95b4af1ec30e835466 Mon Sep 17 00:00:00 2001 From: xiaoming <1923740402@qq.com> Date: Sat, 16 Mar 2024 22:32:42 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E5=AE=8C=E5=96=84=E8=A7=92=E8=89=B2?= =?UTF-8?q?=E7=AE=A1=E7=90=86-=E8=8F=9C=E5=8D=95=E6=9D=83=E9=99=90?= =?UTF-8?q?=E5=8A=9F=E8=83=BD=EF=BC=8C=E6=96=B0=E9=A2=96=E7=9A=84=E4=BA=A4?= =?UTF-8?q?=E4=BA=92=E4=BD=93=E9=AA=8C=20(#984)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * feat: 完善角色管理-菜单权限功能，新颖的交互体验 --- mock/system.ts | 228 ++++++++++++++++++++++ src/api/system.ts | 10 + src/views/system/role/index.vue | 280 +++++++++++++++++++-------- src/views/system/role/utils/hook.tsx | 110 +++++++++-- 4 files changed, 534 insertions(+), 94 deletions(-) diff --git a/mock/system.ts b/mock/system.ts index f1ea4718e..0b4486582 100644 --- a/mock/system.ts +++ b/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", diff --git a/src/api/system.ts b/src/api/system.ts index 015854b69..e4db23811 100644 --- a/src/api/system.ts +++ b/src/api/system.ts @@ -73,3 +73,13 @@ export const getSystemLogsList = (data?: object) => { export const getSystemLogsDetail = (data?: object) => { return http.request("post", "/system-logs-detail", { data }); }; + +/** 获取角色管理-权限-菜单权限 */ +export const getRoleMenu = (data?: object) => { + return http.request("post", "/role-menu", { data }); +}; + +/** 获取角色管理-权限-菜单权限-根据角色 id 查对应菜单 */ +export const getRoleMenuIds = (data?: object) => { + return http.request("post", "/role-menu-ids", { data }); +}; diff --git a/src/views/system/role/index.vue b/src/views/system/role/index.vue index c5926d194..540070246 100644 --- a/src/views/system/role/index.vue +++ b/src/views/system/role/index.vue @@ -1,8 +1,14 @@ - + + + diff --git a/src/views/system/role/utils/hook.tsx b/src/views/system/role/utils/hook.tsx index f4591b936..eb627b41a 100644 --- a/src/views/system/role/utils/hook.tsx +++ b/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({ total: 0, pageSize: 10, @@ -29,22 +45,18 @@ export function useRole() { const columns: TableColumnList = [ { label: "角色编号", - prop: "id", - minWidth: 100 + prop: "id" }, { label: "角色名称", - prop: "name", - minWidth: 120 + prop: "name" }, { label: "角色标识", - prop: "code", - minWidth: 150 + prop: "code" }, { label: "状态", - minWidth: 130, cellRenderer: scope => ( 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() { - message("等菜单管理页面开发后完善"); + async function handleMenu(row?: any) { + 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,