菜单增加分组；修复上下分栏模式界面变小换行问题；修复部分已知BUG

gmingchen · Oct 22, 2023 · a532c64 · a532c64
1 parent b258195
commit a532c64
Show file tree

Hide file tree

Showing 8 changed files with 85 additions and 47 deletions.
diff --git a/src/assets/sass/_global.scss b/src/assets/sass/_global.scss
@@ -168,6 +168,13 @@ $alignSelfs: auto, flex-start, flex-end, center, baseline, stretch;
       }
     }
   }
+  &_g {
+    @for $i from -20 to 20 {
+      &-#{$i} {
+        flex-grow: #{$i};
+      }
+    }
+  }
   // justify-content
   &_j_c {
     @each $var in $justifyContents {

diff --git a/src/router/index.js b/src/router/index.js
@@ -102,7 +102,7 @@ function addRoutes(menus = [], routeList = []) {
           component: dynamics[`../views/modules/iframe/index.vue`],
           meta: {
             id: item.id,
-            title: item.name,
+            label: item.name,
             type: item.type,
             url: item.url,
             dynamic: true,

diff --git a/src/utils/enum.js b/src/utils/enum.js
@@ -52,7 +52,8 @@ export const MenuType = {
   MENU: 1,
   BUTTON: 2,
   IFRAME: 3,
-  URL: 4
+  URL: 4,
+  GROUP: 5
 }
 // 文件存储类型
 export const FileStorageType = {

diff --git a/src/views/layout/components/headbar/components/menu/index.vue b/src/views/layout/components/headbar/components/menu/index.vue
@@ -34,23 +34,36 @@ watchEffect(() => {
       :active-text-color="menuTheme.activeTextColor"
       :unique-opened="true"
       mode="horizontal">
+      <el-menu-item class="menu-slot">
+        <slot />
+      </el-menu-item>
+      <div class="flex_g-1" />
       <SubMenu
         v-for="item in displayedMenus"
         :key="item.id"
         :data="item" />
+      <div class="flex_g-1" />
     </el-menu>
   </div>
 </template>
 
 <style lang="scss" scoped>
 .menu-container {
   max-width: 100%;
+  min-width: 600px;
   .el-menu {
     // flex: 1;
     // max-width: 100%;
     // min-width: 300px;
     border: none;
     // display: flex;
+    .menu-slot {
+      &:hover {
+        color: unset;
+        background-color: unset;
+        cursor: unset;
+      }
+    }
   }
 }
 </style>
diff --git a/src/views/layout/components/headbar/index.vue b/src/views/layout/components/headbar/index.vue
@@ -1,25 +1,27 @@
 <template>
-  <div class="headbar-container padding-n-10 flex flex_w-wrap flex_j_c-space-between flex_a_i-center">
-    <template v-if="menuLayoutMode === 3">
-      <Logo :collapse="false"  />
-      <Menu />
-    </template>
-    <div class="flex flex_a_i-center" v-else>
-      <el-tooltip
-        content="折叠/展开菜单"
-        placement="bottom"
-        :show-after="500"
-        :hide-after="0"
-        transition="">
-        <Iconfont
-          class="cursor-pointer margin_r-20"
-          :name="`collapse-${collapse ? 'right' : 'left'}`"
-          @click="collapseHandle" />
-      </el-tooltip>
-      <Crumb />
-    </div>
-
-    <Action />
+  <div class="headbar-container padding-n-10">
+    <el-scrollbar view-class="height-full flex flex_j_c-space-between flex_a_i-center">
+      <template v-if="menuLayoutMode === 3">
+        <Menu>
+          <Logo :collapse="false" />
+        </Menu>
+      </template>
+      <div class="flex flex_a_i-center" v-else>
+        <el-tooltip
+          content="折叠/展开菜单"
+          placement="bottom"
+          :show-after="500"
+          :hide-after="0"
+          transition="">
+          <Iconfont
+            class="cursor-pointer margin_r-20"
+            :name="`collapse-${collapse ? 'right' : 'left'}`"
+            @click="collapseHandle" />
+        </el-tooltip>
+        <Crumb />
+      </div>
+      <Action />
+    </el-scrollbar>
   </div>
 </template>
 

diff --git a/src/views/layout/components/sub-menu/index.vue b/src/views/layout/components/sub-menu/index.vue
@@ -26,7 +26,14 @@ const clickHandle = () => {
 </script>
 
 <template>
-  <el-sub-menu v-if="data.children && data.children.length > 0" :index="data.name || data.id + ''">
+  <el-menu-item-group title="Group One" v-if="data.type === 5" :index="data.name || data.id + ''">
+    <template #title>
+      <Iconfont :name="data.icon" class="padding_r-5" v-if="data.icon" />
+      <span>{{ data.label }}</span>
+    </template>
+    <SubTtem v-for="item in data.children" :key="item.id" :data="item" />
+  </el-menu-item-group>
+  <el-sub-menu v-else-if="data.children && data.children.length > 0" :index="data.name || data.id + ''">
     <template #title>
       <Iconfont :name="data.icon" class="padding_r-5" v-if="data.icon" />
       <span>{{ data.label }}</span>

diff --git a/src/views/modules/develop/menu/components/sidebar.vue b/src/views/modules/develop/menu/components/sidebar.vue
@@ -51,12 +51,12 @@ const addHandle = (row) => {
     id: `${ VIRTUAL_ID_KEY }${ index.value }`,
     name: `未命名${ index.value }`,
     parentId: 0,
-    type: 0
+    type: MenuType.CATALOG
   }
   if (row) {
     menu.parentId = row.id
-    if (row.type === 1) {
-      menu.type = 2
+    if (row.type === MenuType.MENU) {
+      menu.type = MenuType.BUTTON
     }
     if (!row.children) {
       row.children = []
@@ -107,7 +107,7 @@ const deleteHandle = (node, row) => {
 
 const clickHandle = (row, node) => {
   value.value = row.id
-  emits('change', { row, parentType: node.parent.data.type || 0 })
+  emits('change', { row, parentType: node.parent.data.type || MenuType.CATALOG })
 }
 
 const allowDragHandle = (node) => {
@@ -128,17 +128,22 @@ const allowDropHandle = (dragNode, dropNode, type) => {
       break
     case 'prev':
     case 'next':
-      dropParentType = dropNode.parent.data.type || 0
+      dropParentType = dropNode.parent.data.type || MenuType.CATALOG
       break
   }
   switch (dragData.type) {
     case MenuType.CATALOG:
-      if (dropParentType !== MenuType.CATALOG) {
+      if (dropParentType !== MenuType.CATALOG && dropParentType !== MenuType.GROUP) {
+        result = false
+      }
+      break
+    case MenuType.GROUP:
+      if (dropParentType !== MenuType.CATALOG && dropParentType !== MenuType.GROUP) {
         result = false
       }
       break
     case MenuType.MENU:
-      if (dropParentType !== MenuType.CATALOG) {
+      if (dropParentType !== MenuType.CATALOG && dropParentType !== MenuType.GROUP) {
         result = false
       }
       break
@@ -148,12 +153,12 @@ const allowDropHandle = (dragNode, dropNode, type) => {
       }
       break
     case MenuType.IFRAME:
-      if (dropParentType !== MenuType.CATALOG) {
+      if (dropParentType !== MenuType.CATALOG && dropParentType !== MenuType.GROUP) {
         result = false
       }
       break
     case MenuType.URL:
-      if (dropParentType !== MenuType.CATALOG) {
+      if (dropParentType !== MenuType.CATALOG && dropParentType !== MenuType.GROUP) {
         result = false
       }
       break
@@ -246,7 +251,7 @@ onBeforeMount(() => {
               <el-button
                 v-permission="'menu:create'"
                 size="small"
-                v-if="data.type !== 2 && data.type !== 3 && data.type !== 4"
+                v-if="data.type !== MenuType.BUTTON && data.type !== MenuType.IFRAME && data.type !== MenuType.URL"
                 @click.stop="addHandle(data)">
                 <Iconfont name="plus" size="12px" />
               </el-button>

diff --git a/src/views/modules/develop/menu/index.vue b/src/views/modules/develop/menu/index.vue
@@ -40,23 +40,23 @@ const row = ref(null) // todo: 引用传递 用于编辑之后修改 列表数
 const parentType = ref(0) // 父级的类型
 const rules = reactive(function() {
   const checkUrl = (_rule, value, callback) => {
-    const types = [1, 3, 4]
+    const types = [MenuType.MENU, MenuType.IFRAME, MenuType.URL]
     if (types.includes(form.type) && !value) {
       callback(new Error('请输入路由Path / Http[s] URL'))
     } else {
       callback()
     }
   }
   const checkPermission = (_rule, value, callback) => {
-    const types = [2]
+    const types = [MenuType.BUTTON]
     if (types.includes(form.type) && !value) {
       callback(new Error('请输入授权标识'))
     } else {
       callback()
     }
   }
   const checkIcon = (_rule, value, callback) => {
-    const types = [0, 1, 3, 4]
+    const types = [MenuType.CATALOG, MenuType.MENU, MenuType.IFRAME, MenuType.URL]
     if (types.includes(form.type) && !value) {
       callback(new Error('请输入授权标识'))
     } else {
@@ -138,13 +138,13 @@ const changeHandle = (val) => {
 const buttonHandle = (val) => {
   let result = false
   switch (parentType.value) {
-    case 0:
-      if (val === 2) {
+    case MenuType.CATALOG:
+      if (val === MenuType.BUTTON) {
         result = true
       }
       break
-    case 1:
-      if (val === 0 || val === 3 || val === 4) {
+    case MenuType.MENU:
+      if (val === MenuType.CATALOG || val === MenuType.IFRAME || val === MenuType.URL) {
         result = true
       }
       break
@@ -220,19 +220,22 @@ onBeforeMount(() => {
                   :key="item.value">{{item.label}}</el-radio-button>
               </el-radio-group>
             </el-form-item>
-            <el-form-item label="组件Path（src/views/modules 为根目录，须省略组件文件的 .vue 后缀）/ Http[s] URL" prop="url" v-if="form.type !== 0 && form.type !== 2">
+            <el-form-item
+              label="组件Path（src/views/modules 为根目录，须省略组件文件的 .vue 后缀）/ Http[s] URL"
+              prop="url"
+              v-if="form.type !== MenuType.CATALOG && form.type !== MenuType.GROUP && form.type !== MenuType.BUTTON">
               <el-input v-model="form.url" placeholder="路由Path / Http[s] URL" :readonly="readonly" />
             </el-form-item>
-            <el-form-item label="路由Path（若为空则按照url路径处理）" prop="routePath" v-if="form.type == 1">
+            <el-form-item label="路由Path（若为空则按照url路径处理）" prop="routePath" v-if="form.type == MenuType.MENU">
               <el-input v-model="form.routePath" placeholder="路由Path" :readonly="readonly" />
             </el-form-item>
-            <el-form-item label="路由Name（若为空则按照url路径处理）" prop="routeName" v-if="form.type == 1">
+            <el-form-item label="路由Name（若为空则按照url路径处理）" prop="routeName" v-if="form.type == MenuType.MENU">
               <el-input v-model="form.routeName" placeholder="路由Name" :readonly="readonly" />
             </el-form-item>
-            <el-form-item label="授权标识" prop="permission" v-if="form.type == 1 || form.type == 2">
+            <el-form-item label="授权标识" prop="permission" v-if="form.type == MenuType.MENU || form.type == MenuType.BUTTON">
               <el-input v-model="form.permission" placeholder="授权标识" :readonly="readonly" />
             </el-form-item>
-            <el-form-item label="图标" prop="icon" v-if="form.type !== 2">
+            <el-form-item label="图标" prop="icon" v-if="form.type !== MenuType.BUTTON">
               <IconSelectInput v-model="form.icon" :readonly="readonly" />
             </el-form-item>
             <el-form-item label="排序" prop="sort">
@@ -242,7 +245,7 @@ onBeforeMount(() => {
                 controls-position="right"
                 :disabled="readonly" />
             </el-form-item>
-            <template v-if="form.type === 1 || form.type === 3">
+            <template v-if="form.type === MenuType.MENU || form.type === MenuType.IFRAME">
               <el-form-item label="是否在侧边菜单栏显示（如：个人中心，详情页都不需要显示）" prop="show">
                 <DictRadio v-model="form.show" code="WHETHER" :disabled="readonly" />
               </el-form-item>