菜单管理模块功能完善

package.json

@@ -42,6 +42,7 @@
   },
   "dependencies": {
     "@element-plus/icons-vue": "^2.3.1",
+    "@riophae/vue-treeselect": "^0.4.0",
     "@vitejs/plugin-vue": "^4.6.2",
     "@vueuse/core": "^10.7.1",
     "@wangeditor/editor": "^5.1.23",
@@ -66,6 +67,7 @@
     "vue": "^3.4.8",
     "vue-i18n": "9.2.2",
     "vue-router": "^4.2.5",
+    "vue3-treeselect": "^0.1.10",
     "xlsx": "^0.18.5"
   },
   "devDependencies": {

src/api/menu/index.ts

@@ -19,7 +19,7 @@ export function listRoutes() {
  */
 export function listMenus(queryParams: MenuQuery): AxiosPromise<MenuVO[]> {
   return request({
-    url: "/api/v1/menus",
+    url: '/system/menu/list',
     method: "get",
     params: queryParams,
   });
@@ -30,7 +30,7 @@ export function listMenus(queryParams: MenuQuery): AxiosPromise<MenuVO[]> {
  */
 export function getMenuOptions(): AxiosPromise<OptionType[]> {
   return request({
-    url: "/api/v1/menus/options",
+    url: "/system/menu/list",
     method: "get",
   });
 }
@@ -42,7 +42,7 @@ export function getMenuOptions(): AxiosPromise<OptionType[]> {
  */
 export function getMenuForm(id: number): AxiosPromise<MenuForm> {
   return request({
-    url: "/api/v1/menus/" + id + "/form",
+    url: '/system/menu/detail/' + id,
     method: "get",
   });
 }
@@ -54,7 +54,7 @@ export function getMenuForm(id: number): AxiosPromise<MenuForm> {
  */
 export function addMenu(data: MenuForm) {
   return request({
-    url: "/api/v1/menus",
+    url: '/system/menu/add',
     method: "post",
     data: data,
   });
@@ -68,12 +68,24 @@ export function addMenu(data: MenuForm) {
  */
 export function updateMenu(id: string, data: MenuForm) {
   return request({
-    url: "/api/v1/menus/" + id,
+    url: '/system/menu/update/' + id,
+    method: "put",
+    data: data,
+  });
+}
+/**
+ * 修改菜单
+ *
+ * @param id
+ * @param data
+ */
+export function statusChange(id: string, data: MenuForm) {
+  return request({
+    url: '/system/menu/statusChange/' + id,
     method: "put",
     data: data,
   });
 }
-
 /**
  * 删除菜单
  *
@@ -81,7 +93,7 @@ export function updateMenu(id: string, data: MenuForm) {
  */
 export function deleteMenu(id: number) {
   return request({
-    url: "/api/v1/menus/" + id,
+    url: '/system/menu/deleteLogical/' + id,
     method: "delete",
   });
 }

src/api/menu/types.ts

@@ -4,13 +4,17 @@ import { MenuTypeEnum } from "@/enums/MenuTypeEnum";
  * 菜单查询参数类型
  */
 export interface MenuQuery {
-  keywords?: string;
+  menuName?: string;
 }
 
 /**
  * 菜单视图对象类型
  */
 export interface MenuVO {
+  /**
+   * id
+   */
+  businessId?: number;
   /**
    * 子菜单
    */
@@ -19,50 +23,26 @@ export interface MenuVO {
    * 组件路径
    */
   component?: string;
-  /**
-   * ICON
-   */
-  icon?: string;
-  /**
-   * 菜单ID
-   */
-  id?: number;
   /**
    * 菜单名称
    */
-  name?: string;
-  /**
-   * 父菜单ID
-   */
-  parentId?: number;
-  /**
-   * 按钮权限标识
-   */
-  perm?: string;
+  menuName?: string;
   /**
-   * 跳转路径
-   */
-  redirect?: string;
-  /**
-   * 路由名称
-   */
-  routeName?: string;
-  /**
-   * 路由相对路径
+   * ICON
    */
-  routePath?: string;
+  icon?: string;
   /**
-   * 菜单排序(数字越小排名越靠前)
+   * 排序
    */
-  sort?: number;
+  orderNum?: number;
   /**
-   * 菜单类型
+   * 权限标识
    */
-  type?: MenuTypeEnum;
+  perms?: string;
   /**
-   * 菜单是否可见(1:显示;0:隐藏)
+   * 创建时间
    */
-  visible?: number;
+  createDate?: Date;
 }
 
 /**
@@ -72,53 +52,58 @@ export interface MenuForm {
   /**
    * 菜单ID
    */
-  id?: string;
+  businessId?: number;
   /**
    * 父菜单ID
    */
-  parentId?: number;
+  parentId: number;
   /**
-   * 菜单名称
+   * 菜单类型
    */
-  name?: string;
+  menuType: MenuTypeEnum;
   /**
-   * 菜单是否可见(1:是;0:否;)
+   * 菜单图标
    */
-  visible: number;
   icon?: string;
   /**
-   * 排序
+   * 菜单名称
    */
-  sort: number;
+  menuName?: string;
   /**
-   * 组件路径
+   * 菜单排序
    */
-  component?: string;
+  orderNum?: number;
   /**
-   * 路由路径
+   * 权限标识
    */
-  path?: string;
+  perms?: string;
   /**
-   * 跳转路由路径
+   * 是否外链
    */
-  redirect?: string;
-
+  isFrame: string;
   /**
-   * 菜单类型
+   * 是工作流
    */
-  type: MenuTypeEnum;
-
+  isProcess: string;
   /**
-   * 权限标识
+   * 显示状态
    */
-  perm?: string;
+  visible: string;
+  isSee?: string;
   /**
-   * 【菜单】是否开启页面缓存
+   * 菜单状态
    */
-  keepAlive?: number;
-
+  flag: string;
+  /**
+   * 路由地址
+   */
+  path?: string;
   /**
-   * 【目录】只有一个子路由是否始终显示
+   * 工作流
    */
-  alwaysShow?: number;
+  processId?: number;
+  /**
+   * 组件路径
+   */
+  component?: string;
 }

src/enums/MenuTypeEnum.ts

@@ -2,18 +2,14 @@ export enum MenuTypeEnum {
   /**
    * 目录
    */
-  CATALOG = "CATALOG",
+  M = "M",
   /**
    * 菜单
    */
-  MENU = "MENU",
+  C = "C",
 
   /**
    * 按钮
    */
-  BUTTON = "BUTTON",
-  /**
-   * 外链
-   */
-  EXTLINK = "EXTLINK",
+  F = "F",
 }

src/main.ts

@@ -16,7 +16,6 @@ import i18n from "@/lang/index";
 import "element-plus/theme-chalk/dark/css-vars.css";
 import "@/styles/index.scss";
 import "uno.css";
-
 const app = createApp(App);
 // 全局注册 自定义指令(directive)
 setupDirective(app);

src/utils/common.ts

+/**
+ * 构造树型结构数据
+ * @param {*} data 数据源
+ * @param {*} id id字段 默认 'id'
+ */
+export function handleTree(data, id, parentId, children, rootId) {
+  id = id || 'id'
+  parentId = parentId || 'parentId'
+  children = children || 'children'
+  rootId = rootId || Math.min.apply(Math, data.map(item => { return item[parentId] })) || 0
+  // 对源数据深度克隆
+  const cloneData = JSON.parse(JSON.stringify(data))
+  // 循环所有项
+  const treeData = cloneData.filter(father => {
+    const branchArr = cloneData.filter(child => {
+      // 返回每一项的子级数组
+      return father[id] === child[parentId]
+    })
+    branchArr.length > 0 ? father.children = branchArr : ''
+    // 返回第一层
+    return father[parentId] === rootId
+  })
+  return treeData !== '' ? treeData : data
+}
+

src/utils/commonField.ts

+import {Plus, Delete, Edit, Search, Share, Upload } from '@element-plus/icons-vue'
+/** 公共字段*/
+export const commonField = {
+  typeParent: 'text',
+  typePrimary: 'primary',
+  typeSuccess: 'success',
+  typeWarning: 'warning',
+  queryClass: 'queryBtn', // 查询按钮class
+  resetClass: 'resetBtn', // 重置按钮class
+  addClass: 'addBtn', // 新增按钮class
+  updateClass: 'updateBtn', // 修改按钮class
+  delClass: 'delBtn', // 删除按钮class
+  importClass: 'importBtn', // 导入按钮class
+  exportClass: 'exportBtn', // 导出按钮class
+  addClassText: 'addBtnText', // 文字类型的新增按钮class
+  resetPasClass: 'resetBtnText', // 文字类型的重置按钮class
+  queryName: '查询',
+  resetName: '重置',
+  addName: '新增',
+  updateName: '修改',
+  deleteName: '删除',
+  dataPower: '数据权限',
+  resetPassword: '重置密码',
+  exportName: '导出',
+  importName: '导入',
+  cleanName: '清空',
+  viewName: '查看',
+  size: 'default',
+  smallSize: 'small',
+  queryIcon: 'el-icon-search',
+  resetIcon: 'el-icon-refresh',
+  addIcon: Plus,
+  delIcon: 'el-icon-delete',
+  importIcon: 'el-icon-upload',
+  exportIcon: 'el-icon-download',
+  deleteTypePrimary: 'danger',
+  deleteSize: 'small',
+  deleteDisabled: 'ids.length === 0',
+  cleanTypePrimary: 'danger',
+  cleanSize: 'small',
+  miniSize: 'default',
+  exportTypePrimary: 'success',
+  exportSize: 'small',
+  typeText: 'text'
+}

src/views/monitor/loginInfo/index.vue

+<template>
+  <div class="app-container">
+    aaaaaaaaaaaaaaaaaa
+  </div>
+</template>
+
+<script>
+export default {
+  name: "index"
+}
+</script>
+
+<style scoped>
+
+</style>

src/views/monitor/test/index.vue

+<template>
+  <div class="app-container">
+    bbbbbbbbbbbbbbbbbbbbb
+  </div>
+</template>
+
+<script>
+export default {
+  name: "index"
+}
+</script>
+
+<style scoped>
+
+</style>