From a382159b551442a8f420a71de5c812551693fdd6 Mon Sep 17 00:00:00 2001
From: "wuyb@phxg.cn" <wuyb@phxg.cn>
Date: Fri, 13 May 2022 17:57:19 +0800
Subject: [PATCH] element

---
 vite-demo/src/permission.js                  | 22 +++--
 vite-demo/src/router/authRouter.js           |  1 +
 vite-demo/src/router/baseRouter.js           |  2 +-
 vite-demo/src/store/modules/permission.js    |  1 +
 vite-demo/src/views/layout/index.vue         |  6 +-
 vite-demo/src/views/layout/sidebar/index.vue | 55 +++++--------
 vite-demo/src/views/layout/sidebar/menu.vue  | 87 ++++++++++++++++++++
 7 files changed, 128 insertions(+), 46 deletions(-)
 create mode 100644 vite-demo/src/views/layout/sidebar/menu.vue

diff --git a/vite-demo/src/permission.js b/vite-demo/src/permission.js
index b6ee611..95fa7f7 100644
--- a/vite-demo/src/permission.js
+++ b/vite-demo/src/permission.js
@@ -3,10 +3,11 @@ import store from "./store";
 import {getToken} from '@/utils/auth'
 import {message} from 'ant-design-vue'
 import {accessControl} from './config'
+
 const whiteList = ['/login']
 
 router.beforeEach(async (to, from, next) => {
-    console.log('11111111111111111111',to, from);
+    console.log('11111111111111111111', to, from);
     const hasToken = getToken()
     if (hasToken) {
         if (to.path === 'login') {
@@ -15,11 +16,16 @@ router.beforeEach(async (to, from, next) => {
             const hasRoles = store.getters.roles && store.getters.roles.length > 0
             if (hasRoles) {
                 console.log('哟权限');
-               try {
-                   next()
-               }catch (e) {
-                   console.log('ddddds',e);
-               }
+                try {
+                    // if (to.matched.length === 0) {  //如果未匹配到路由
+                    //     from.name ? next({name: from.name}) : next('/');   //如果上级也未匹配到路由则跳转登录页面，如果上级能匹配到则转上级路由
+                    // } else {
+                    //     next();    //如果匹配到正确跳转
+                    // }
+                    next();    //如果匹配到正确跳转
+                } catch (e) {
+                    console.log('ddddds', e);
+                }
             } else {
                 try {
                     // 获取用信息
@@ -27,9 +33,9 @@ router.beforeEach(async (to, from, next) => {
                     console.log('getUserInfo', roles);
                     // 获取用户权限路由
                     let accessRoutes = []
-                    if(accessControl.source==='front'){
+                    if (accessControl.source === 'front') {
                         accessRoutes = await store.dispatch('getFrontRoutes', roles)
-                    }else {
+                    } else {
                         accessRoutes = await store.dispatch('getBackRouter', hasToken)
                     }
 
diff --git a/vite-demo/src/router/authRouter.js b/vite-demo/src/router/authRouter.js
index 5ac67f8..f3d474f 100644
--- a/vite-demo/src/router/authRouter.js
+++ b/vite-demo/src/router/authRouter.js
@@ -1,5 +1,6 @@
 import Layout from "@/views/layout/index.vue";
 
+
 export default [
     {
         path: '/auth',
diff --git a/vite-demo/src/router/baseRouter.js b/vite-demo/src/router/baseRouter.js
index 28831e1..b9c8097 100644
--- a/vite-demo/src/router/baseRouter.js
+++ b/vite-demo/src/router/baseRouter.js
@@ -28,5 +28,5 @@ export default [
             }
         ]
     },
-    // {path: '/:pathToRegexp(.*)', hidden: true, redirect: '/'} //当用户输入页面链接错误或者没有该页面时，显示该路径页面
+    {path: '/:pathMatch(.*)', hidden: true, redirect: '/'} //当用户输入页面链接错误或者没有该页面时，显示该路径页面
 ]
\ No newline at end of file
diff --git a/vite-demo/src/store/modules/permission.js b/vite-demo/src/store/modules/permission.js
index c01a612..a6284b3 100644
--- a/vite-demo/src/store/modules/permission.js
+++ b/vite-demo/src/store/modules/permission.js
@@ -25,6 +25,7 @@ const comp = import.meta.glob(`/src/views/**/*/*.vue`);
 // const comp = comp1.concat(comp2)
 import Layout from "@/views/layout/index.vue";
 
+
 console.log('component', comp);
 
 export function filterAsyncRoutes(routes, roles) {
diff --git a/vite-demo/src/views/layout/index.vue b/vite-demo/src/views/layout/index.vue
index 1931aa9..d04081b 100644
--- a/vite-demo/src/views/layout/index.vue
+++ b/vite-demo/src/views/layout/index.vue
@@ -13,15 +13,16 @@
 </template>
 
 <script>
-    import sidebar from './sidebar/index.vue'
+    import sidebar from './sidebar/menu.vue'
     import {mapGetters} from 'vuex'
     import zhCN from 'ant-design-vue/es/locale/zh_CN';
     import moment from 'moment';
     import 'moment/dist/locale/zh-cn';
+
     moment.locale('zhCN');
     export default {
         name: "index",
-        data(){
+        data() {
             return {
                 zhCN
             }
@@ -43,6 +44,7 @@
         display: flex;
         height: 100%;
     }
+
     .app-content {
         overflow-y: auto;
     }
diff --git a/vite-demo/src/views/layout/sidebar/index.vue b/vite-demo/src/views/layout/sidebar/index.vue
index 2445e28..e4dae47 100644
--- a/vite-demo/src/views/layout/sidebar/index.vue
+++ b/vite-demo/src/views/layout/sidebar/index.vue
@@ -17,7 +17,7 @@
                     <template #icon>
                         <AppstoreOutlined/>
                     </template>
-                    <template #title>{{item.meta.title}}</template>
+                    <template #title>{{item.meta.title}} - ? {{item.path}}</template>
                     <div v-if="item.children" v-for="(c,cIndex) in item.children">
                         <!--'sub'+(index + (index + cIndex))-->
                         <a-sub-menu :key="c.path"
@@ -26,31 +26,20 @@
                             <!--  三级 :key="index + cIndex + childIndex + (index+cIndex)"-->
                             <a-menu-item v-for="(child,childIndex) in c.children"
                                          :key="child.path">
-                                <router-link :to="{name:child.path}">{{child.meta.title}}
+                                <router-link :to="{name:child.path}">
+                                    {{child.meta.title}}
                                 </router-link>
                             </a-menu-item>
                         </a-sub-menu>
 
                         <!--二级-->
-                        <!--                        <a-menu-item v-else :key="c.path + index + cIndex">-->
+                        <!--  <a-menu-item v-else :key="c.path + index + cIndex">-->
                         <a-menu-item v-else :key="c.path">
                             <router-link :to="{name:c.path}">{{c.meta.title}}</router-link>
                         </a-menu-item>
 
                     </div>
                 </a-sub-menu>
-                <!--                <a-sub-menu key="sub2">-->
-                <!--                    <template #icon>-->
-                <!--                        <AppstoreOutlined/>-->
-                <!--                    </template>-->
-                <!--                    <template #title>Navigation Two</template>-->
-                <!--                    <a-menu-item key="9">Option 9</a-menu-item>-->
-                <!--                    <a-menu-item key="10">Option 10</a-menu-item>-->
-                <!--                    <a-sub-menu key="sub3" title="Submenu">-->
-                <!--                        <a-menu-item key="11">Option 11</a-menu-item>-->
-                <!--                        <a-menu-item key="12">Option 12</a-menu-item>-->
-                <!--                    </a-sub-menu>-->
-                <!--                </a-sub-menu>-->
             </div>
         </a-menu>
     </div>
@@ -78,12 +67,13 @@
             }
         },
         setup() {
+
             const route = useRoute()
             const state = reactive({
                 collapsed: false,
-                // selectedKeys: ['welcome'],  //当前选中的
+                selectedKeys: ['welcome'],  //当前选中的
                 openKeys: ['/'],   // 当前展开的 SubMenu 菜单项 key 数组
-                preOpenKeys: ['sub1'],
+                preOpenKeys: ['/'],
             });
             watch(
                 () => state.openKeys,
@@ -91,30 +81,25 @@
                     state.preOpenKeys = oldVal;
                 },
             );
-            const selectedKeys = computed(() => {
-                console.log('useRoute', route.path);
-                let path = route.path.split('/')
-                // console.log('path', path, path[path.length - 1]);
-                // state.openKeys = '/' + [path[path.length - 2]]
-                // return [path[path.length - 1]]
-            })
-            console.log('selectedKeys', selectedKeys);
-            // activeMenu() {
-            //     const route = this.$route
-            //     const { meta, path } = route
-            //     // if set path, the sidebar will highlight the path you set
-            //     if (meta.activeMenu) {
-            //         return meta.activeMenu
-            //     }
-            //     return path
-            // },
+            // const selectedKeys = computed(() => {
+            //     console.log('selectedKeys - useRoute', route.path);
+            //     let path = route.path.split('/')
+            //     // console.log('path', path, path[path.length - 1]);
+            //     // state.openKeys = '/' + [path[path.length - 2]]
+            //     // return [path[path.length - 1]]
+            //     console.log('selectedKeys - useRoute - path', path);
+            //     console.log('selectedKeys - useRoute - path - route', [route.path]);
+            //     // return [route.path]
+            // })
+            // console.log('selectedKeys - wqe', selectedKeys);
+
 
             const toggleCollapsed = () => {
                 state.collapsed = !state.collapsed;
                 state.openKeys = state.collapsed ? [] : state.preOpenKeys;
             };
 
-            return {...toRefs(state), toggleCollapsed, selectedKeys};
+            return {...toRefs(state), toggleCollapsed};
         },
 
         components: {
diff --git a/vite-demo/src/views/layout/sidebar/menu.vue b/vite-demo/src/views/layout/sidebar/menu.vue
new file mode 100644
index 0000000..58170e4
--- /dev/null
+++ b/vite-demo/src/views/layout/sidebar/menu.vue
@@ -0,0 +1,87 @@
+<template>
+    <div style="width: 256px" class="sidbar">
+
+        <el-menu
+                active-text-color="#ffd04b"
+                background-color="#545c64"
+                text-color="#fff"
+                default-active="2"
+                class="el-menu-vertical-demo layout-menu"
+                :collapse="isCollapse"
+                @open="handleOpen"
+        >
+            <div v-for="(item,index) in router" :key="index">
+                <el-sub-menu :index="item.path" v-if="!item.hidden">
+                    <template #title>
+                        <span>{{item.meta.title}}</span>
+                    </template>
+                    <template v-if="item.children" v-for="(c,cIndex) in item.children">
+                        <el-sub-menu :index="child.path"
+                                     v-if="c.children"
+                                     v-for="(child,childIndex) in c.children">
+                            <template #title>
+                                <router-link :to="{name:child.path}">{{child.meta.title}}</router-link>
+                            </template>
+                            <el-menu-item :index="c.path">
+                                <router-link :to="{name:child.path}">{{child.meta.title}}</router-link>
+                            </el-menu-item>
+
+                        </el-sub-menu>
+                        <el-menu-item-group v-else>
+                            <el-menu-item :index="c.path"> {{c.meta.title}}</el-menu-item>
+                        </el-menu-item-group>
+                    </template>
+                </el-sub-menu>
+
+            </div>
+        </el-menu>
+    </div>
+</template>
+<script>
+
+    import {ref} from 'vue'
+    import {ElMenu, ElMenuItem, ElSubMenu} from 'element-plus'
+
+
+    import {useRoute} from 'vue-router'
+
+    export default {
+        components: {
+            ElMenu, ElMenuItem, ElSubMenu
+        },
+        props: {
+            router: {
+                type: Array,
+                default: () => {
+                    return []
+                }
+            }
+        },
+        setup(props) {
+            console.log('props', props)
+            const isCollapse = ref(false)
+            const handleOpen = (key, keyPath) => {
+                console.log(key, keyPath)
+            }
+            const handleClose = (key, keyPath) => {
+                console.log(key, keyPath)
+            }
+            const route = useRoute()
+            return {
+                isCollapse, handleOpen
+            }
+        }
+    }
+</script>
+
+<style>
+    .sidbar, .layout-menu {
+        height: 100%;
+        overflow: hidden auto;
+    }
+
+    .el-menu-vertical-demo:not(.el-menu--collapse) {
+        width: 200px;
+        min-height: 400px;
+    }
+</style>
\ No newline at end of file
-- 
GitLab