菜单新增 alwaysShow 总是展示、componentName 组件名

yudao-ui-admin-vue3/.env

@@ -13,5 +13,3 @@ VITE_APP_TENANT_ENABLE=true
 # 验证码的开关
 VITE_APP_CAPTCHA_ENABLE=true
 
-# 路由在只有一个子集的时候是否显示父级
-VITE_ROUTE_ALWAYSSHOW_ENABLE=true

yudao-ui-admin-vue3/src/api/system/menu/index.ts

@@ -10,9 +10,11 @@ export interface MenuVO {
   path: string
   icon: string
   component: string
+  componentName?: string
   status: number
   visible: boolean
   keepAlive: boolean
+  alwaysShow?: boolean
   createTime: Date
 }
 

yudao-ui-admin-vue3/src/types/auto-components.d.ts

@@ -21,6 +21,7 @@ declare module '@vue/runtime-core' {
     DictTag: typeof import('./../components/DictTag/src/DictTag.vue')['default']
     Echart: typeof import('./../components/Echart/src/Echart.vue')['default']
     Editor: typeof import('./../components/Editor/src/Editor.vue')['default']
+    ElAvatar: typeof import('element-plus/es')['ElAvatar']
     ElBadge: typeof import('element-plus/es')['ElBadge']
     ElButton: typeof import('element-plus/es')['ElButton']
     ElButtonGroup: typeof import('element-plus/es')['ElButtonGroup']
@@ -63,6 +64,7 @@ declare module '@vue/runtime-core' {
     ElScrollbar: typeof import('element-plus/es')['ElScrollbar']
     ElSelect: typeof import('element-plus/es')['ElSelect']
     ElSkeleton: typeof import('element-plus/es')['ElSkeleton']
+    ElSpace: typeof import('element-plus/es')['ElSpace']
     ElSwitch: typeof import('element-plus/es')['ElSwitch']
     ElTable: typeof import('element-plus/es')['ElTable']
     ElTableColumn: typeof import('element-plus/es')['ElTableColumn']

yudao-ui-admin-vue3/src/types/auto-imports.d.ts

@@ -40,6 +40,7 @@ declare global {
   const ref: typeof import('vue')['ref']
   const required: typeof import('@/utils/formRules')['required']
   const resolveComponent: typeof import('vue')['resolveComponent']
+  const resolveDirective: typeof import('vue')['resolveDirective']
   const shallowReactive: typeof import('vue')['shallowReactive']
   const shallowReadonly: typeof import('vue')['shallowReadonly']
   const shallowRef: typeof import('vue')['shallowRef']
@@ -64,8 +65,3 @@ declare global {
   const watchPostEffect: typeof import('vue')['watchPostEffect']
   const watchSyncEffect: typeof import('vue')['watchSyncEffect']
 }
-// for type re-export
-declare global {
-  // @ts-ignore
-  export type { Component,ComponentPublicInstance,ComputedRef,InjectionKey,PropType,Ref,VNode } from 'vue'
-}

yudao-ui-admin-vue3/src/utils/routerHelper.ts

@@ -60,14 +60,15 @@ export const generateRoute = (routes: AppCustomRouteRecordRaw[]): AppRouteRecord
       alwaysShow:
         route.children &&
         route.children.length === 1 &&
-        import.meta.env.VITE_ROUTE_ALWAYSSHOW_ENABLE === 'true'
-          ? true
-          : false
+        (route.alwaysShow !== undefined ? route.alwaysShow : true)
     }
     // 路由地址转首字母大写驼峰，作为路由名称，适配keepAlive
     let data: AppRouteRecordRaw = {
       path: route.path,
-      name: toCamelCase(route.path, true),
+      name:
+        route.componentName && route.componentName.length > 0
+          ? route.componentName
+          : toCamelCase(route.path, true),
       redirect: route.redirect,
       meta: meta
     }

yudao-ui-admin-vue3/src/views/system/menu/index.vue

@@ -91,7 +91,16 @@
       <template v-if="menuForm.type === 2">
         <el-col :span="16">
           <el-form-item label="组件地址" prop="component">
-            <el-input v-model="menuForm.component" placeholder="请输入组件地址" clearable />
+            <el-input
+              v-model="menuForm.component"
+              placeholder="例如说：system/user/index"
+              clearable
+            />
+          </el-form-item>
+        </el-col>
+        <el-col :span="16">
+          <el-form-item label="组件名字" prop="componentName">
+            <el-input v-model="menuForm.componentName" placeholder="例如说：SystemUser" clearable />
           </el-form-item>
         </el-col>
       </template>
@@ -129,7 +138,7 @@
       </el-col>
       <template v-if="menuForm.type !== 3">
         <el-col :span="16">
-          <el-form-item label="显示状态" prop="status">
+          <el-form-item label="显示状态" prop="visible">
             <template #label>
               <Tooltip
                 titel="显示状态"
@@ -143,13 +152,29 @@
           </el-form-item>
         </el-col>
       </template>
+      <template v-if="menuForm.type !== 3">
+        <el-col :span="16">
+          <el-form-item label="总是显示" prop="alwaysShow">
+            <template #label>
+              <Tooltip
+                titel="总是显示"
+                message="选择不是时，当该菜单只有一个子菜单时，不展示自己，直接展示子菜单"
+              />
+            </template>
+            <el-radio-group v-model="menuForm.alwaysShow">
+              <el-radio border key="true" :label="true">总是</el-radio>
+              <el-radio border key="false" :label="false">不是</el-radio>
+            </el-radio-group>
+          </el-form-item>
+        </el-col>
+      </template>
       <template v-if="menuForm.type === 2">
         <el-col :span="16">
           <el-form-item label="缓存状态" prop="keepAlive">
             <template #label>
               <Tooltip
                 titel="缓存状态"
-                message="选择缓存时，则会被 `keep-alive` 缓存，需要匹配组件的 `name` 和路由地址保持一致"
+                message="选择缓存时，则会被 `keep-alive` 缓存，必须填写「组件名称」字段"
               />
             </template>
             <el-radio-group v-model="menuForm.keepAlive">
@@ -220,9 +245,11 @@ const menuForm = ref<MenuApi.MenuVO>({
   path: '',
   icon: '',
   component: '',
+  componentName: '',
   status: CommonStatusEnum.ENABLE,
   visible: true,
   keepAlive: true,
+  alwaysShow: true,
   createTime: new Date()
 })
 
@@ -262,9 +289,11 @@ const handleCreate = () => {
     path: '',
     icon: '',
     component: '',
+    componentName: '',
     status: CommonStatusEnum.ENABLE,
     visible: true,
     keepAlive: true,
+    alwaysShow: true,
     createTime: new Date()
   }
 }
@@ -275,6 +304,9 @@ const handleUpdate = async (rowId: number) => {
   // 设置数据
   const res = await MenuApi.getMenuApi(rowId)
   menuForm.value = res
+  // TODO 芋艿：这块要优化下，部分字段未重置，无法修改
+  menuForm.value.componentName = res.componentName || ''
+  menuForm.value.alwaysShow = res.alwaysShow !== undefined ? res.alwaysShow : true
 }
 
 // 提交新增/修改的表单

yudao-ui-admin-vue3/src/views/system/menu/menu.data.ts

@@ -46,6 +46,10 @@ const crudSchemas = reactive<VxeCrudSchema>({
       title: '组件路径',
       field: 'component'
     },
+    {
+      title: '组件名字',
+      field: 'componentName'
+    },
     {
       title: '权限标识',
       field: 'permission'
@@ -64,7 +68,8 @@ const crudSchemas = reactive<VxeCrudSchema>({
     {
       title: t('common.createTime'),
       field: 'createTime',
-      formatter: 'formatDate'
+      formatter: 'formatDate',
+      isTable: false
     }
   ]
 })

yudao-ui-admin-vue3/types/env.d.ts

@@ -12,7 +12,6 @@ interface ImportMetaEnv {
   readonly VITE_PORT: number
   readonly VITE_OPEN: string
   readonly VITE_DEV: boolean
-  readonly VITE_ROUTE_ALWAYSSHOW_ENABLE: string
   readonly VITE_APP_CAPTCHA_ENABLE: string
   readonly VITE_APP_TENANT_ENABLE: string
   readonly VITE_BASE_URL: string

yudao-ui-admin-vue3/types/router.d.ts

@@ -69,11 +69,13 @@ declare global {
     name: string
     meta: RouteMeta
     component: string
+    componentName?: string
     path: string
     redirect: string
     children?: AppCustomRouteRecordRaw[]
     keepAlive?: boolean
     visible?: boolean
     parentId?: number
+    alwaysShow?: boolean
   }
 }