From 6719fd8290ae0c0ccb85fbee2daa786805235ae5 Mon Sep 17 00:00:00 2001 From: valarchie <343928303@qq.com> Date: Sat, 22 Jul 2023 17:16:51 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E6=96=B0=E5=A2=9E=E8=8F=9C=E5=8D=95?= =?UTF-8?q?=E5=8A=9F=E8=83=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/api/system/dept.ts | 1 + src/api/system/menu.ts | 117 ++++++++ src/utils/common.ts | 10 + src/utils/tree.ts | 19 ++ src/views/monitor/server/index.vue | 3 +- src/views/system/dept/utils/hook.tsx | 26 +- src/views/system/menu/form.vue | 215 ++++++++++++++ src/views/system/menu/index.vue | 136 +++------ src/views/system/menu/utils/hook.tsx | 361 ++++++++++++----------- src/views/system/menu/utils/menuLogic.ts | 62 ++++ src/views/system/menu/utils/rule.ts | 37 +++ 11 files changed, 700 insertions(+), 287 deletions(-) create mode 100644 src/api/system/menu.ts create mode 100644 src/views/system/menu/form.vue create mode 100644 src/views/system/menu/utils/menuLogic.ts create mode 100644 src/views/system/menu/utils/rule.ts diff --git a/src/api/system/dept.ts b/src/api/system/dept.ts index e16524d..a5b8dc0 100644 --- a/src/api/system/dept.ts +++ b/src/api/system/dept.ts @@ -1,6 +1,7 @@ import { http } from "@/utils/http"; export interface DeptQuery extends BaseQuery { + // TODO 目前不需要这个参数 deptId?: number; parentId?: number; } diff --git a/src/api/system/menu.ts b/src/api/system/menu.ts new file mode 100644 index 0000000..57d7600 --- /dev/null +++ b/src/api/system/menu.ts @@ -0,0 +1,117 @@ +import { http } from "@/utils/http"; + +export interface MenuQuery { + isButton: boolean; +} + +/** + * MenuDTO + */ +export interface MenuDTO { + createTime?: Date; + isButton?: number; + id?: number; + menuName?: string; + parentId?: number; + menuType: number; + menuTypeStr: string; + path?: string; + permission?: string; + routerName?: string; + status?: number; + statusStr?: string; +} + +/** + * MenuDetailDTO + */ +export interface MenuDetailDTO extends MenuDTO { + meta: MetaDTO; + permission?: string; +} + +/** + * AddMenuCommand + */ +export interface MenuRequest { + id: number; + parentId: number; + menuName: string; + routerName?: string; + path?: string; + permission?: string; + status: number; + isButton: boolean; + menuType: number; + meta: MetaDTO; +} + +/** + * MetaDTO + */ +export interface MetaDTO { + auths?: string[]; + dynamicLevel?: number; + extraIcon?: ExtraIconDTO; + frameLoading?: boolean; + frameSrc?: string; + hiddenTag?: boolean; + icon?: string; + isFrameSrcInternal?: boolean; + keepAlive?: boolean; + rank?: number; + roles?: string[]; + showLink?: boolean; + showParent?: boolean; + title?: string; + transition?: TransitionDTO; +} + +/** + * ExtraIconDTO + */ +export interface ExtraIconDTO { + name?: string; + svg?: boolean; +} + +/** + * TransitionDTO + */ +export interface TransitionDTO { + enterTransition?: string; + leaveTransition?: string; + name?: string; +} + +/** 获取菜单列表 */ +export const getMenuListApi = (params: MenuQuery) => { + return http.request>>("get", "/system/menus", { + params + }); +}; + +/** 添加菜单 */ +export const addMenuApi = (data: MenuRequest) => { + return http.request>("post", "/system/menus", { data }); +}; + +/** 修改菜单 */ +export const updateMenuApi = (menuId: string, data: MenuRequest) => { + return http.request>("put", `/system/menus/${menuId}`, { + data + }); +}; + +/** 删除菜单 */ +export const deleteMenuApi = (menuId: string) => { + return http.request>("delete", `/system/menus/${menuId}`); +}; + +/** 菜单详情 */ +export const getMenuInfoApi = (menuId: string) => { + return http.request>( + "get", + `/system/menus/${menuId}` + ); +}; diff --git a/src/utils/common.ts b/src/utils/common.ts index 2dceac6..0366bbc 100644 --- a/src/utils/common.ts +++ b/src/utils/common.ts @@ -2,6 +2,7 @@ import { PaginationProps, TableColumn } from "@pureadmin/table"; import { Sort } from "element-plus"; import { utils, writeFile } from "xlsx"; import { message } from "./message"; +import { pinyin } from "pinyin-pro"; export class CommonUtils { static getBeginTimeSafely(timeRange: string[]): string { @@ -126,6 +127,15 @@ export class CommonUtils { return paginatedList; } + static toPinyin(chineseStr: string): string { + if (chineseStr == null || chineseStr === undefined || chineseStr === "") { + return chineseStr; + } + + const pinyinStr = pinyin(chineseStr, { toneType: "none" }); + return pinyinStr.replace(/\s/g, ""); + } + // 私有构造函数，防止类被实例化 private constructor() {} } diff --git a/src/utils/tree.ts b/src/utils/tree.ts index f8f3783..586e1c6 100644 --- a/src/utils/tree.ts +++ b/src/utils/tree.ts @@ -126,6 +126,25 @@ export const appendFieldByUniqueId = ( return tree; }; +/** + * 根据返回数据的status字段值判断追加是否禁用disabled字段，返回处理后的树结构，用于上级部门级联选择器的展示 + *（实际开发中也是如此，不可能前端需要的每个字段后端都会返回，这时需要前端自行根据后端返回的某些字段做逻辑处理） + * 这个是pure作者留下的例子， 也可以通过设置disabled 对应的字段来实现 比如disabled: 'status' (需要后端的字段为true/false) + * @param treeList + * @param field 根据哪个字段来设置disabled + * @returns + */ +export function setDisabledForTreeOptions(treeList, field) { + if (!treeList || !treeList.length) return; + const newTreeList = []; + for (let i = 0; i < treeList.length; i++) { + treeList[i].disabled = treeList[i][field] === 0 ? true : false; + setDisabledForTreeOptions(treeList[i].children, field); + newTreeList.push(treeList[i]); + } + return newTreeList; +} + /** * @description 构造树型结构数据 * @param data 数据源 diff --git a/src/views/monitor/server/index.vue b/src/views/monitor/server/index.vue index 511e2ae..829e6e8 100644 --- a/src/views/monitor/server/index.vue +++ b/src/views/monitor/server/index.vue @@ -1,6 +1,7 @@