菜单管理模块功能完善

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>

src/views/system/menu/index.vue

@@ -13,17 +13,22 @@ import {
   addMenu,
   deleteMenu,
   updateMenu,
+  statusChange,
 } from "@/api/menu";
-
+import Treeselect from 'vue3-treeselect'
+import 'vue3-treeselect/dist/vue3-treeselect.css'
 import { MenuTypeEnum } from "@/enums/MenuTypeEnum";
-
 import SvgIcon from "@/components/SvgIcon/index.vue";
 import IconSelect from "@/components/IconSelect/index.vue";
-
+import { commonField } from "@/utils/commonField";
+import {handleTree} from '@/utils/common'
 const queryFormRef = ref(ElForm);
 const menuFormRef = ref(ElForm);
 
 const loading = ref(false);
+const hasDelMenuPerm = ref(['sys:menu:delete']);
+const hasUpdateMenuPerm = ref(['sys:menu:update']);
+const hasAddMenuPerm = ref(['sys:menu:add']);
 const dialog = reactive({
   title: "",
   visible: false,
@@ -35,18 +40,19 @@ const menuList = ref<MenuVO[]>([]);
 const menuOptions = ref<OptionType[]>([]);
 
 const formData = reactive<MenuForm>({
-  parentId: 0,
-  visible: 1,
-  sort: 1,
-  type: MenuTypeEnum.MENU,
-  alwaysShow: 0,
-  keepAlive: 0,
+  parentId: 0, //上级菜单
+  menuType: MenuTypeEnum.M, //菜单类型
+  isFrame: '1', // 是否外链
+  isProcess: '1', //是工作流
+  visible: '0', //显示状态
+  flag: '0', //菜单状态
 });
 
 const rules = reactive({
   parentId: [{ required: true, message: "请选择顶级菜单", trigger: "blur" }],
-  name: [{ required: true, message: "请输入菜单名称", trigger: "blur" }],
-  type: [{ required: true, message: "请选择菜单类型", trigger: "blur" }],
+  menuName: [{ required: true, message: "请输入菜单名称", trigger: "blur" }],
+  menuType: [{ required: true, message: "请选择菜单类型", trigger: "blur" }],
+  orderNum: [{ required: true, message: "请输入菜单顺序", trigger: "blur" }],
   path: [{ required: true, message: "请输入路由路径", trigger: "blur" }],
 
   component: [{ required: true, message: "请输入组件路径", trigger: "blur" }],
@@ -56,10 +62,6 @@ const rules = reactive({
 // 选择表格的行菜单ID
 const selectedRowMenuId = ref<number | undefined>();
 
-const menuCacheData = reactive({
-  type: "",
-  path: "",
-});
 
 /**
  * 查询
@@ -69,7 +71,8 @@ function handleQuery() {
   loading.value = true;
   listMenus(queryParams)
     .then(({ data }) => {
-      menuList.value = data;
+      // menuList.value = data;
+      menuList.value = handleTree(data.filter(menu => { return menu.businessId }), 'businessId','','','');
     })
     .then(() => {
       loading.value = false;
@@ -84,9 +87,37 @@ function resetQuery() {
 
 /**行点击事件 */
 function onRowClick(row: MenuVO) {
-  selectedRowMenuId.value = row.id;
+  selectedRowMenuId.value = row.businessId;
+}
+/** 修改状态按钮操作 */
+function handleStatusChange(row) {
+  const text = row.flag === '0' ? '停用' : '启用'
+  ElMessageBox.confirm(`“${row.menuName}”菜单即将被${text}，是否继续？`, '提示', {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: "warning",
+  }).then(function() {
+    const menu = Object.assign({}, row, { children: [] })
+    menu.children = []
+    return statusChange(row.businessId,menu)
+  }).then((response) => {
+    ElMessage.success(text + "成功");
+    handleQuery();
+  }) .catch(() => {
+    handleQuery();
+  });
+}
+/** 转换菜单数据结构 */
+function normalizer(node) {
+  if (node.children && !node.children.length) {
+    delete node.children
+  }
+  return {
+    id: node.businessId,
+    label: node.menuName,
+    children: node.children
+  }
 }
-
 /**
  * 打开表单弹窗
  *
@@ -96,40 +127,33 @@ function onRowClick(row: MenuVO) {
 function openDialog(parentId?: number, menuId?: number) {
   getMenuOptions()
     .then(({ data }) => {
-      menuOptions.value = [{ value: 0, label: "顶级菜单", children: data }];
+      const childrenData = handleTree(data.filter(menu => { return menu.businessId }), 'businessId','','','');
+      menuOptions.value = [{ businessId: 0, menuName: "顶级菜单", children: childrenData }];
     })
-    .then(() => {
-      dialog.visible = true;
+    .then( async () => {
       if (menuId) {
         dialog.title = "编辑菜单";
-        getMenuForm(menuId).then(({ data }) => {
+       await getMenuForm(menuId).then(({ data }) => {
           Object.assign(formData, data);
-          menuCacheData.type = data.type;
-          menuCacheData.path = data.path ?? "";
         });
+
       } else {
         dialog.title = "新增菜单";
         formData.parentId = parentId;
       }
+      dialog.visible = true;
+
     });
 }
 
-/** 菜单类型切换事件处理 */
-function onMenuTypeChange() {
-  // 如果菜单类型改变，清空路由路径；未改变在切换后还原路由路径
-  if (formData.type !== menuCacheData.type) {
-    formData.path = "";
-  } else {
-    formData.path = menuCacheData.path;
-  }
-}
 
 /** 菜单保存提交 */
 function submitForm() {
   menuFormRef.value.validate((isValid: boolean) => {
     if (isValid) {
-      const menuId = formData.id;
+      const menuId = formData.businessId;
       if (menuId) {
+        formData.isSee = formData.visible
         updateMenu(menuId, formData).then(() => {
           ElMessage.success("修改成功");
           closeDialog();
@@ -148,11 +172,6 @@ function submitForm() {
 
 /** 删除菜单 */
 function handleDelete(menuId: number) {
-  if (!menuId) {
-    ElMessage.warning("请勾选删除项");
-    return false;
-  }
-
   ElMessageBox.confirm("确认删除已选中的数据项?", "警告", {
     confirmButtonText: "确定",
     cancelButtonText: "取消",
@@ -175,19 +194,9 @@ function closeDialog() {
 
 /** 重置表单 */
 function resetForm() {
-  menuFormRef.value.resetFields();
-  menuFormRef.value.clearValidate();
-
-  formData.id = undefined;
-  formData.parentId = 0;
-  formData.visible = 1;
-  formData.sort = 1;
-  formData.perm = undefined;
-  formData.component = undefined;
-  formData.path = undefined;
-  formData.redirect = undefined;
-  formData.alwaysShow = undefined;
-  formData.keepAlive = undefined;
+  // formData.parentId =
+    menuFormRef.value.resetFields();
+    menuFormRef.value.clearValidate();
 }
 
 onMounted(() => {
@@ -199,10 +208,10 @@ onMounted(() => {
   <div class="app-container">
     <div class="search-container">
       <el-form ref="queryFormRef" :model="queryParams" :inline="true">
-        <el-form-item label="关键字" prop="keywords">
+        <el-form-item label="菜单名称" prop="menuName">
           <el-input
-            v-model="queryParams.keywords"
-            placeholder="菜单名称"
+            v-model="queryParams.menuName"
+            placeholder="请输入菜单名称"
             clearable
             @keyup.enter="handleQuery"
           />
@@ -222,114 +231,102 @@ onMounted(() => {
     <el-card shadow="never" class="table-container">
       <template #header>
         <el-button
-          v-hasPerm="['sys:menu:add']"
-          type="success"
+          v-hasPermi="hasAddMenuPerm"
+          :class="commonField.addClass"
+          :type="commonField.typePrimary"
+          :icon="commonField.addIcon"
+          :size="commonField.smallSize"
           @click="openDialog(0)"
-        >
-          <template #icon><i-ep-plus /></template>
-          新增</el-button
-        >
+        >{{ commonField.addName }}</el-button>
       </template>
 
       <el-table
         v-loading="loading"
         :data="menuList"
         highlight-current-row
-        row-key="id"
+        row-key="businessId"
         :expand-row-keys="['1']"
         @row-click="onRowClick"
+        :default-expand-all="true"
         :tree-props="{
           children: 'children',
           hasChildren: 'hasChildren',
         }"
       >
-        <el-table-column label="菜单名称" min-width="200">
+        <el-table-column prop="menuName" label="菜单名称" :show-overflow-tooltip="true" width="160" />
+        <el-table-column prop="icon" label="图标" align="center" width="100">
           <template #default="scope">
-            <svg-icon :icon-class="scope.row.icon" />
-            {{ scope.row.name }}
+            <svg-icon v-if="scope.row.icon" :icon-class="scope.row.icon" />
+            <div v-else>-</div>
           </template>
         </el-table-column>
-
-        <el-table-column label="类型" align="center" width="80">
+        <el-table-column prop="orderNum" label="排序" width="60">
           <template #default="scope">
-            <el-tag
-              v-if="scope.row.type === MenuTypeEnum.CATALOG"
-              type="warning"
-              >目录</el-tag
-            >
-            <el-tag v-if="scope.row.type === MenuTypeEnum.MENU" type="success"
-              >菜单</el-tag
-            >
-            <el-tag v-if="scope.row.type === MenuTypeEnum.BUTTON" type="danger"
-              >按钮</el-tag
-            >
-            <el-tag v-if="scope.row.type === MenuTypeEnum.EXTLINK" type="info"
-              >外链</el-tag
-            >
+            {{ scope.row.orderNum || '-' }}
           </template>
         </el-table-column>
-
-        <el-table-column
-          label="路由路径"
-          align="left"
-          width="150"
-          prop="path"
-        />
-
-        <el-table-column
-          label="组件路径"
-          align="left"
-          width="250"
-          prop="component"
-        />
-
-        <el-table-column
-          label="权限标识"
-          align="center"
-          width="200"
-          prop="perm"
-        />
-
-        <el-table-column label="状态" align="center" width="80">
+        <el-table-column prop="perms" label="权限标识" :show-overflow-tooltip="true">
           <template #default="scope">
-            <el-tag v-if="scope.row.visible === 1" type="success">显示</el-tag>
-            <el-tag v-else type="info">隐藏</el-tag>
+            {{ scope.row.perms || '-' }}
           </template>
         </el-table-column>
-
-        <el-table-column label="排序" align="center" width="80" prop="sort" />
-
-        <el-table-column fixed="right" align="center" label="操作" width="220">
+        <el-table-column prop="component" label="组件路径" :show-overflow-tooltip="true">
           <template #default="scope">
-            <el-button
-              v-if="scope.row.type == 'CATALOG' || scope.row.type == 'MENU'"
-              v-hasPerm="['sys:menu:add']"
-              type="primary"
-              link
-              size="small"
-              @click.stop="openDialog(scope.row.id)"
-            >
-              <i-ep-plus />新增
-            </el-button>
+            {{ scope.row.component || '-' }}
+          </template>
+        </el-table-column>
+        <el-table-column label="创建时间" align="center" prop="createDate">
+          <template #default="scope">
+            <span>{{ scope.row.createDate || '-' }}</span>
+          </template>
+        </el-table-column>
 
+        <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="200px">
+          <template #default="scope">
+            <!--              //修改-->
             <el-button
-              v-hasPerm="['sys:menu:edit']"
-              type="primary"
-              link
-              size="small"
-              @click.stop="openDialog(undefined, scope.row.id)"
-            >
-              <i-ep-edit />编辑
-            </el-button>
-            <el-button
-              v-hasPerm="['sys:menu:delete']"
-              type="primary"
-              link
-              size="small"
-              @click.stop="handleDelete(scope.row.id)"
-              ><i-ep-delete />
-              删除
-            </el-button>
+              v-hasPermi="hasUpdateMenuPerm"
+              :class="commonField.updateClass"
+              :type="commonField.typeParent"
+              :size="commonField.size"
+              @click="openDialog(scope.row.parentId, scope.row.businessId)"
+            >{{ commonField.updateName }}</el-button>
+            <el-switch
+              style="margin-left: 25px"
+              v-model="scope.row.flag"
+              active-value="1"
+              inactive-value="0"
+              @change="handleStatusChange(scope.row)"
+            />
+            <el-dropdown class="table-drop" trigger="click" style="margin-left: 25px">
+              <span class="el-dropdown-link" style="cursor: pointer">
+                ...
+              </span>
+              <template #dropdown>
+              <el-dropdown-menu>
+                <el-dropdown-item>
+                  <!--              //删除-->
+                  <el-button
+                    v-hasPermi="hasDelMenuPerm"
+                    :class="commonField.delClass"
+                    :type="commonField.typeParent"
+                    :size="commonField.size"
+                    @click="handleDelete(scope.row.businessId)"
+                  >{{ commonField.deleteName }}</el-button>
+                </el-dropdown-item>
+                <el-dropdown-item>
+                  <!--          //新增-->
+                  <el-button
+                    v-hasPermi="hasAddMenuPerm"
+                    :class="commonField.delClass"
+                    :type="commonField.typeParent"
+                    :size="commonField.size"
+                    @click="openDialog(scope.row.businessId)"
+                  >{{ commonField.addName }}</el-button>
+                </el-dropdown-item>
+              </el-dropdown-menu>
+              </template>
+            </el-dropdown>
           </template>
         </el-table-column>
       </el-table>
@@ -340,167 +337,118 @@ onMounted(() => {
       :title="dialog.title"
       destroy-on-close
       append-to-body
-      width="1000px"
+      width="41%"
       @close="closeDialog"
-      top="5vh"
     >
       <el-form
         ref="menuFormRef"
         :model="formData"
         :rules="rules"
-        label-width="160px"
+        label-width="auto"
       >
-        <el-form-item label="父级菜单" prop="parentId">
-          <el-tree-select
+        <el-form-item label="上级菜单" prop="parentId">
+          <treeselect
             v-model="formData.parentId"
+            :options="menuOptions"
+            :normalizer="normalizer"
+            :show-count="true"
             placeholder="选择上级菜单"
-            :data="menuOptions"
-            filterable
-            check-strictly
-            :render-after-expand="false"
-          />
-        </el-form-item>
-
-        <el-form-item label="菜单名称" prop="name">
-          <el-input v-model="formData.name" placeholder="请输入菜单名称" />
-        </el-form-item>
-
-        <el-form-item label="菜单类型" prop="type">
-          <el-radio-group v-model="formData.type" @change="onMenuTypeChange">
-            <el-radio label="CATALOG">目录</el-radio>
-            <el-radio label="MENU">菜单</el-radio>
-            <el-radio label="BUTTON">按钮</el-radio>
-            <el-radio label="EXTLINK">外链</el-radio>
-          </el-radio-group>
-        </el-form-item>
-
-        <el-form-item
-          v-if="formData.type == 'EXTLINK'"
-          label="外链地址"
-          prop="path"
-        >
-          <el-input v-model="formData.path" placeholder="请输入外链完整路径" />
-        </el-form-item>
-
-        <el-form-item
-          v-if="
-            formData.type == MenuTypeEnum.CATALOG ||
-            formData.type == MenuTypeEnum.MENU
-          "
-          label="路由路径"
-          prop="path"
-        >
-          <el-input
-            v-if="formData.type == MenuTypeEnum.CATALOG"
-            v-model="formData.path"
-            placeholder="system"
           />
-          <el-input v-else v-model="formData.path" placeholder="user" />
         </el-form-item>
 
-        <!-- 组件页面完整路径 -->
-        <el-form-item
-          v-if="formData.type == MenuTypeEnum.MENU"
-          label="页面路径"
-          prop="component"
-        >
-          <el-input
-            v-model="formData.component"
-            placeholder="system/user/index"
-            style="width: 95%"
-          >
-            <template v-if="formData.type == MenuTypeEnum.MENU" #prepend
-              >src/views/</template
-            >
-            <template v-if="formData.type == MenuTypeEnum.MENU" #append
-              >.vue</template
-            >
-          </el-input>
-        </el-form-item>
-
-        <el-form-item
-          v-if="formData.type !== MenuTypeEnum.BUTTON"
-          prop="visible"
-          label="显示状态"
-        >
-          <el-radio-group v-model="formData.visible">
-            <el-radio :label="1">显示</el-radio>
-            <el-radio :label="0">隐藏</el-radio>
+        <el-form-item label="菜单类型" prop="menuType">
+          <el-radio-group v-model="formData.menuType">
+            <el-radio label="M">目录</el-radio>
+            <el-radio label="C">菜单</el-radio>
+            <el-radio label="F">按钮</el-radio>
           </el-radio-group>
         </el-form-item>
-
         <el-form-item
-          v-if="formData.type === MenuTypeEnum.CATALOG"
-          label="根目录始终显示"
-        >
-          <template #label>
-            <div>
-              根目录始终显示
-              <el-tooltip placement="bottom" effect="light">
-                <template #content
-                  >是：根目录只有一个子路由显示目录
-                  <br />否：根目录只有一个子路由不显示目录，只显示子路由
-                </template>
-                <i-ep-QuestionFilled class="inline-block" />
-              </el-tooltip>
-            </div>
-          </template>
-
-          <el-radio-group v-model="formData.alwaysShow">
-            <el-radio :label="1">是</el-radio>
-            <el-radio :label="0">否</el-radio>
-          </el-radio-group>
-        </el-form-item>
-
-        <el-form-item
-          v-if="formData.type === MenuTypeEnum.MENU"
-          label="是否缓存"
-        >
-          <el-radio-group v-model="formData.keepAlive">
-            <el-radio :label="1">是</el-radio>
-            <el-radio :label="0">否</el-radio>
-          </el-radio-group>
-        </el-form-item>
-
-        <el-form-item label="排序" prop="sort">
-          <el-input-number
-            v-model="formData.sort"
-            style="width: 100px"
-            controls-position="right"
-            :min="0"
-          />
-        </el-form-item>
-
-        <!-- 权限标识 -->
-        <el-form-item
-          v-if="formData.type == MenuTypeEnum.BUTTON"
-          label="权限标识"
-          prop="perm"
-        >
-          <el-input v-model="formData.perm" placeholder="sys:user:add" />
-        </el-form-item>
-
-        <el-form-item
-          v-if="formData.type !== MenuTypeEnum.BUTTON"
-          label="图标"
+          v-if="formData.menuType !== 'F'"
+          label="菜单图标"
           prop="icon"
         >
           <!-- 图标选择器 -->
           <icon-select v-model="formData.icon" />
         </el-form-item>
-
-        <el-form-item
-          v-if="formData.type == MenuTypeEnum.CATALOG"
-          label="跳转路由"
-        >
-          <el-input v-model="formData.redirect" placeholder="跳转路由" />
+        <el-row>
+          <el-col :span="12">
+            <el-form-item label="菜单名称" prop="menuName">
+              <el-input v-model="formData.menuName" placeholder="请输入菜单名称" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item label="菜单排序" prop="orderNum">
+              <el-input-number
+                v-model="formData.orderNum"
+                style="width: 100px"
+                controls-position="right"
+                :min="0"
+              />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-form-item v-if="formData.menuType !== 'M'" label="权限标识" prop="perms">
+          <el-input v-model.trim="formData.perms" style="width: 95%" show-word-limit maxlength="50" placeholder="请权限标识" />
+        </el-form-item>
+        <el-row>
+          <el-col :span="12">
+            <el-form-item v-if="formData.menuType !== 'F'" label="是否外链" prop="isFrame">
+              <el-radio-group v-model="formData.isFrame">
+                <el-radio label="0">是</el-radio>
+                <el-radio label="1">否</el-radio>
+              </el-radio-group>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item v-if="formData.menuType !== 'F'" label="是工作流" prop="isProcess">
+              <el-radio-group v-model="formData.isProcess">
+                <el-radio label="0">是</el-radio>
+                <el-radio label="1">否</el-radio>
+              </el-radio-group>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="12">
+            <el-form-item v-if="formData.menuType !== 'F'" label="显示状态" prop="visible">
+              <el-radio-group v-model="formData.visible">
+                <el-radio label="1">显示</el-radio>
+                <el-radio label="0">隐藏</el-radio>
+              </el-radio-group>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item v-if="formData.menuType !== 'F'" label="菜单状态" prop="flag">
+              <el-radio-group v-model="formData.flag">
+                <el-radio label="1">启用</el-radio>
+                <el-radio label="0">停用</el-radio>
+              </el-radio-group>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-form-item v-if="formData.menuType !== 'F'" label="路由地址" prop="path">
+          <el-input v-model.trim="formData.path" style="width: 95%" show-word-limit maxlength="100" placeholder="请输入路由地址" />
+        </el-form-item>
+<!--        <el-form-item v-if="formData.menuType !== 'F' && formData.isProcess==='0'" label="工作流">-->
+<!--          <el-select v-model="formData.processId" clearable placeholder="请选择工作流">-->
+<!--            <el-option-->
+<!--              v-for="item in workFlows"-->
+<!--              :key="item.businessId"-->
+<!--              :label="item.processName"-->
+<!--              :value="item.processKey"-->
+<!--            />-->
+<!--          </el-select>-->
+<!--        </el-form-item>-->
+        <el-form-item v-if="formData.menuType === 'C'" label="组件路径" prop="component">
+          <el-input v-model.trim="formData.component" show-word-limit maxlength="100" placeholder="请输入组件路径" />
         </el-form-item>
       </el-form>
 
       <template #footer>
         <div class="dialog-footer">
-          <el-button type="primary" @click="submitForm">确 定</el-button>
           <el-button @click="closeDialog">取 消</el-button>
+          <el-button type="primary" @click="submitForm">确 定</el-button>
         </div>
       </template>
     </el-dialog>