fix:修改二维码

src/layout/LayoutColumns/index.vue

@@ -1,38 +1,193 @@
 <template>
-  <div class="main-container">
+  <div class="main-columns">
+    <div class="layout-columns-aside">
       <el-scrollbar>
         <div class="menu-wrap">
-        <div class="item-menu-wrap">
-
+          <div
+            class="item-menu-wrap"
+            v-for="item in menusRoutes"
+            :key="item.path"
+            @click="handleChangeMenu(item)"
+          >
+            <el-icon :size="20">
+              <component :is="item?.meta?.icon"></component>
+            </el-icon>
+            <span class="title">{{ item?.meta?.title }}</span>
           </div>
         </div>
       </el-scrollbar>
     </div>
+
+    <div class="layout-columns-sub" :style="{ width: isCollapse ? '60px' : '210px' }">
+      <el-scrollbar style="height: 100%">
+        <el-menu
+          :collapse="isCollapse"
+          :default-active="activeMenu"
+          background-color="#304156"
+          text-color="#bfcbd9"
+          :unique-opened="SettingStore.themeConfig.uniqueOpened"
+          :collapse-transition="false"
+          class="menu-columns"
+        >
+          <SubItem
+            v-for="route in subMenus"
+            :key="route.path"
+            :item="route"
+            :base-path="basePath"
+          />
+        </el-menu>
+      </el-scrollbar>
+    </div>
+
+    <div class="container">
+<!--      <div class="layout-header">-->
+<!--        <div class="header-tool">-->
+<!--          <HeaderToolLeft/>-->
+<!--          <HeaderToolRight/>-->
+<!--        </div>-->
+<!--        <TagsView v-if="themeConfig.showTag"/>-->
+<!--      </div>-->
+
+      <Main/>
+    </div>
+
+
+  </div>
 </template>
 
 <script setup lang="ts">
 import { ref, computed, watch } from "vue";
 import { useRoute, useRouter } from "vue-router";
 import {usePermissionStore} from "@/store/modules/permission"
+import { useSettingStore } from "@/store/modules/setting";
+import SubItem from '../components/SubMenu/SubItem.vue'
+import TagsView from '../components/TagsView/index.vue'
 const PermissionStore = usePermissionStore()
-
+const SettingStore = useSettingStore()
 const route = useRoute()
-
+const router = useRouter();
+import HeaderToolRight from '../components/Header/ToolRight.vue'
+import HeaderToolLeft from '../components/Header/ToolLeft.vue'
+import Main from '../components/Main/index.vue'
 // 获取路由
 const permission_routes = computed(() => PermissionStore.permission_routes)
 
+// 获取路由
+const menusRoutes = computed(()=>{
+  return PermissionStore.permission_routes.filter(item=>!item.hidden)
+})
+// 主题配置
+const themeConfig = computed(() =>SettingStore.themeConfig)
+const isCollapse = computed(() =>!SettingStore.isCollapse)
+const activeMenu = computed(() => {
+  const { meta, path } = route
+  if (meta.activeMenu) {
+    return meta.activeMenu
+  }
+  return path
+})
+const basePath = ref<string>('/')
+const subMenus = ref([])
+
+watch(()=>[menusRoutes,route],()=>{
+    console.log('===============================',route,route.path,menusRoutes)
+    if (!menusRoutes.value.length) return;
+    let menuItem = menusRoutes.value.find(item=>{
+      return item.path === route.path || `/${route.path.split("/")[1]}` === item.path
+    })
+    if(menuItem.children?.length) {
+      subMenus.value = menuItem.children
+    }else {
+      subMenus.value = []
+    }
+    console.log('route.path',route.path.split('/'))
+    basePath.value = `/${route.path.split("/")[1]}`
+
+
+    console.log('menuItem.value',subMenus.value,basePath)
+
+},{
+  deep: true,
+  immediate:true
+})
+
+
+const handleChangeMenu = (item)=>{
+  if (item.children?.length) {
+    subMenus.value = item.children
+  }else {
+    subMenus.value = [];
+  }
+  console.log('item.path',item.path)
+  router.push(item.path);
+
+}
+
+console.log('permission_routes',menusRoutes.value,)
+
 </script>
 
 
 <style lang="scss" scoped>
-.menu-wrap{
+.layout-columns-aside{
+  flex-shrink: 0;
+  width: 70px;
+  height: 100vh;
 
-  width: 100%;
-  height: 50px;
-  text-align: center;
+  background-color: #304156;
+}
+.main-columns{
   display: flex;
+  flex-direction: row!important;
+}
+.layout-columns-sub{
+  flex-shrink: 0;
+  width: 200px;
+  height: 100vh;
+  box-sizing: border-box;
+  background-color: #304156;
+  flex-direction: column;
+  overflow: hidden;
+  transition: all 0.3s ease;
+  ::v-deep(.el-menu){
+    border-right: none;
+  }
+}
+.container{
+  flex: 1;
+}
+.layout-header{
+  background: white;
+  transition: width 0.28s;
+  flex-shrink: 0;
+  box-sizing: border-box;
+  box-shadow: 0 1px 4px rgb(0 21 41 / 8%);
+  .header-tool{
+    height: 50px;
+    width: 100%;
+    border-bottom: 1px solid #eee;
+    display: flex;
+    align-items: center;
+    padding: 0 10px 0 0;
+    box-sizing: border-box;
+    justify-content: space-between;
+  }
+}
+.menu-wrap{
+  .item-menu-wrap{
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    height: 70px;
     cursor: pointer;
-  position: relative;
-  z-index: 1;
+    transition: all .3s ease;
+  }
+  .title{
+    color: #e5eaf3;
+  }
+  .el-icon{
+    color: #e5eaf3;
+  }
 }
 </style>

src/layout/components/SubMenu/SubItem.vue

@@ -43,6 +43,7 @@ const props = defineProps({
 
 const onlyOneChild = ref(null)
 const hasOneShowingChild = (children = [], parent) => {
+
   const showingChildren = children.filter((item) => {
     // 过滤掉需要隐藏的菜单
     if (item.hidden) {
@@ -53,14 +54,14 @@ const hasOneShowingChild = (children = [], parent) => {
       return true
     }
   })
-
   // 当只有一个子路由器时，默认情况下会显示该子路由器
   if (showingChildren.length === 1) {
     return true
   }
   // 如果没有要显示的子路由器，则显示父路由器
   if (showingChildren.length === 0) {
-    onlyOneChild.value = { ...parent, path: '', noShowingChildren: true }
+    // onlyOneChild.value = { ...parent, path: '', noShowingChildren: true }
+    onlyOneChild.value = { ...parent, noShowingChildren: true }
     return true
   }
 
@@ -74,6 +75,8 @@ const resolvePath = (routePath) => {
   if (isExternal(props.basePath)) {
     return props.basePath
   }
-  return path.resolve(props.basePath, routePath)
+  let path2 = path.resolve(props.basePath, routePath)
+  console.log('============',path2)
+  return path2
 }
 </script>

src/layout/components/SubMenu/SubMenu.vue

@@ -0,0 +1,33 @@
+<template>
+  <template v-for="subItem in menuList" :key="subItem.path">
+    <el-sub-menu v-if="subItem.children && subItem.children.length > 0" :index="subItem.path">
+      <template #title>
+        <el-icon>
+          <component :is="subItem.meta.icon"></component>
+        </el-icon>
+        <span>{{ subItem.meta.title }}</span>
+      </template>
+      <SubMenu :menuList="subItem.children" />
+    </el-sub-menu>
+    <el-menu-item v-else :index="subItem.path" @click="handleClickMenu(subItem)">
+      <el-icon>
+        <component :is="subItem.meta.icon"></component>
+      </el-icon>
+      <template #title>
+        <span>{{ subItem.meta.title }}</span>
+      </template>
+    </el-menu-item>
+  </template>
+</template>
+
+<script setup lang="ts">
+import { useRouter } from "vue-router";
+
+defineProps<{ menuList: Menu.MenuOptions[] }>();
+
+const router = useRouter();
+const handleClickMenu = (subItem: Menu.MenuOptions) => {
+  if (subItem.meta.isLink) return window.open(subItem.meta.isLink, "_blank");
+  router.push(subItem.path);
+};
+</script>

src/layout/index.vue

@@ -1,9 +1,10 @@
 <template>
   <div class="g-container-layout" :class="classObj">
-    <Mobile/>
-    <LayoutVertical v-if="device === 'mobile'"/>
-    <component :is="LayoutComponents[themeConfig.mode]" v-else/>
-    <Theme />
+<!--    <Mobile/>-->
+<!--    <LayoutVertical v-if="device === 'mobile'"/>-->
+<!--    <component :is="LayoutComponents[themeConfig.mode]" v-else/>-->
+<!--    <Theme />-->
+    <LayoutColumns/>
   </div>
 </template>
 
@@ -15,12 +16,14 @@
   import { useResizeHandler } from './hooks/useResizeHandler'
   import LayoutVertical from './LayoutVertical/index.vue'
   import LayoutHorizontal from './LayoutHorizontal/index.vue'
+  import LayoutColumns from './LayoutColumns/index.vue'
 
   const SettingStore = useSettingStore()
   const themeConfig = computed(() => SettingStore.themeConfig)
   const LayoutComponents = {
     horizontal: LayoutHorizontal,
     vertical: LayoutVertical,
+    columns: LayoutColumns,
   };
 
   // 是否折叠

src/routers/index.ts

@@ -73,6 +73,7 @@ export const constantRoutes: Array<RouteRecordRaw&extendRoute> = [
     name: 'layout',
     component: Layout,
     redirect: '/home',
+    meta: { title: '首页', icon: 'House', },
     children: [
       {
         path: '/home',

src/routers/modules/table.ts

@@ -20,15 +20,15 @@ const tableRouter = [{
             meta: { title: '综合表格', keepAlive: true , icon: 'MenuIcon'}
         },
         {
-            path: 'inline-table',
+            path: 'inlineTable',
             component: () => import('@/views/table/InlineEditTable/index.vue'),
-            name: 'inline-table',
+            name: 'inlineTable',
             meta: { title: '行内编辑', keepAlive: true  , icon: 'MenuIcon'}
         },
         {
             path: 'editableProTable',
             component: () => import('@/views/table/EditableProTable/index.vue'),
-            name: 'edit-table',
+            name: 'editableProTable',
             meta: { title: '可编辑表格', keepAlive: true  , icon: 'MenuIcon'}
         },
         // {