fix: fix menu active bug

xingyu
1 parent 340790de
Showing 6 changed files with 19 additions and 17 deletions
sql/mysql/vue3-menu.sql
yudao-ui-admin-vue3/src/api/infra/codegen/types.ts
yudao-ui-admin-vue3/src/components/Menu/src/Menu.vue
yudao-ui-admin-vue3/src/components/Menu/src/components/useRenderMenuItem.tsx
yudao-ui-admin-vue3/src/components/TagsView/src/TagsView.vue
yudao-ui-admin-vue3/src/views/Home/Index.vue
@@ -257,7 +257,7 @@ INSERT INTO `system_menu` VALUES (1264, &#39;客户端查询&#39;, &#39;system:oauth2-client
 INSERT INTO `system_menu` VALUES (1265, '客户端创建', 'system:oauth2-client:create', 3, 2, 1263, '', '', '', 0, b'1', b'1', '', '2022-05-10 16:26:33', '1', '2022-05-11 00:31:23', b'0');
 INSERT INTO `system_menu` VALUES (1266, '客户端更新', 'system:oauth2-client:update', 3, 3, 1263, '', '', '', 0, b'1', b'1', '', '2022-05-10 16:26:33', '1', '2022-05-11 00:31:28', b'0');
 INSERT INTO `system_menu` VALUES (1267, '客户端删除', 'system:oauth2-client:delete', 3, 4, 1263, '', '', '', 0, b'1', b'1', '', '2022-05-10 16:26:33', '1', '2022-05-11 00:31:33', b'0');
-INSERT INTO `system_menu` (`id`, `name`, `permission`, `type`, `sort`, `parent_id`, `path`, `icon`, `component`, `status`, `visible`, `keep_alive`, `creator`, `create_time`, `updater`, `update_time`, `deleted`) VALUES (1281, '可视化报表', '', 1, 12, 0, '/visualization', 'chart', NULL, 0, b'1', b'1', '1', '2022-07-10 20:22:15', '1', '2022-07-10 20:33:30', b'0');
-INSERT INTO `system_menu` (`id`, `name`, `permission`, `type`, `sort`, `parent_id`, `path`, `icon`, `component`, `status`, `visible`, `keep_alive`, `creator`, `create_time`, `updater`, `update_time`, `deleted`) VALUES (1282, '积木报表', '', 2, 1, 1281, 'jimu-report', 'example', 'visualization/jmreport/index', 0, b'1', b'1', '1', '2022-07-10 20:26:36', '1', '2022-07-28 21:17:34', b'0');
+INSERT INTO `system_menu` (`id`, `name`, `permission`, `type`, `sort`, `parent_id`, `path`, `icon`, `component`, `status`, `visible`, `keep_alive`, `creator`, `create_time`, `updater`, `update_time`, `deleted`) VALUES (1281, '可视化报表', '', 1, 12, 0, '/visualization', 'ep:histogram', NULL, 0, b'1', b'1', '1', '2022-07-10 20:22:15', '1', '2022-07-10 20:33:30', b'0');
+INSERT INTO `system_menu` (`id`, `name`, `permission`, `type`, `sort`, `parent_id`, `path`, `icon`, `component`, `status`, `visible`, `keep_alive`, `creator`, `create_time`, `updater`, `update_time`, `deleted`) VALUES (1282, '积木报表', '', 2, 1, 1281, 'jimu-report', 'ep:histogram', 'visualization/jmreport/index', 0, b'1', b'1', '1', '2022-07-10 20:26:36', '1', '2022-07-28 21:17:34', b'0');
 SET FOREIGN_KEY_CHECKS = 1;
 export type CodegenTableVO = {
+  id: number
   tableId: number
   isParentMenuIdValid: boolean
   dataSourceConfigId: number
@@ -94,8 +94,8 @@ export default defineComponent({
         >
           {{
             default: () => {
-              const { renderMenuItem } = useRenderMenuItem(unref(routers), unref(menuMode))
-              return renderMenuItem()
+              const { renderMenuItem } = useRenderMenuItem(unref(menuMode))
+              return renderMenuItem(unref(routers))
             }
           }}
         </ElMenu>
 import { ElSubMenu, ElMenuItem } from 'element-plus'
 import type { RouteMeta } from 'vue-router'
-import { getAllParentPath, hasOneShowingChild } from '../helper'
+import { hasOneShowingChild } from '../helper'
 import { isUrl } from '@/utils/is'
 import { useRenderMenuTitle } from './useRenderMenuTitle'
 import { useDesign } from '@/hooks/web/useDesign'
 import { pathResolve } from '@/utils/routerHelper'
 export const useRenderMenuItem = (
-  allRouters: AppRouteRecordRaw[] = [],
+  // allRouters: AppRouteRecordRaw[] = [],
   menuMode: 'vertical' | 'horizontal'
 ) => {
-  const renderMenuItem = (routers?: AppRouteRecordRaw[]) => {
-    return (routers || allRouters).map((v) => {
+  const renderMenuItem = (routers: AppRouteRecordRaw[], parentPath = '/') => {
+    return routers.map((v) => {
       const meta = (v.meta ?? {}) as RouteMeta
       if (!meta.hidden) {
         const { oneShowingChild, onlyOneChild } = hasOneShowingChild(v.children, v)
-        const fullPath = isUrl(v.path)
-          ? v.path
-          : getAllParentPath<AppRouteRecordRaw>(allRouters, v.path).join('/')
+        const fullPath = isUrl(v.path) ? v.path : pathResolve(parentPath, v.path) // getAllParentPath<AppRouteRecordRaw>(allRouters, v.path).join('/')
         const { renderMenuTitle } = useRenderMenuTitle()
@@ -46,7 +44,7 @@ export const useRenderMenuItem = (
             >
               {{
                 title: () => renderMenuTitle(meta),
-                default: () => renderMenuItem(v.children)
+                default: () => renderMenuItem(v.children!, fullPath)
               }}
             </ElSubMenu>
           )
@@ -492,15 +492,12 @@ watch(
     }
   }
-  &__item + &__item {
-    margin-left: 4px;
-  }
-
   &__item {
     position: relative;
     top: 2px;
     height: calc(~'100% - 4px');
     padding-right: 25px;
+    margin-left: 4px;
     font-size: 12px;
     cursor: pointer;
     border: 1px solid #d9d9d9;
@@ -528,6 +525,7 @@ watch(
   &__item.is-active {
     color: var(--el-color-white);
     background-color: var(--el-color-primary);
+    border: 1px solid var(--el-color-primary);
     .@{prefix-cls}__item--close {
       :deep(span) {
         color: var(--el-color-white) !important;
@@ -208,7 +208,12 @@ const getUserAccessSource = async () =&gt; {
     'legend.data',
     data.map((v) => t(v.name))
   )
-  set(pieOptionsData, 'series.data', data)
+  pieOptionsData!.series![0].data = data.map((v) => {
+    return {
+      name: t(v.name),
+      value: v.value
+    }
+  })
 }
 const barOptionsData = reactive<EChartsOption>(barOptions) as EChartsOption