feat: 菜单内容以子路由形式配置

public/index.html

@@ -11,7 +11,7 @@
 <noscript>
     <strong>We're sorry but doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
 </noscript>
-<div id="loading">
+<div id="loading" style="display: none;">
     <div class="spinner">
         <div class="rect1"></div>
         <div class="rect2"></div>

src/App.vue

@@ -1,190 +1,18 @@
 <template>
     <div id="app">
-        <div  v-if="!isLogin">
-          <router-view v-if="$route.name === 'auto'"></router-view>
-          <Login v-else></Login>
-        </div>
-        <div class="main layout" v-if="isLogin">
-            <div style="min-height: calc(100vh - 80px);">
-                <Layout>
-                    <Sider :width="defaultWidth" class="left-sider" ref="side1" hide-trigger collapsible :collapsed-width="80"
-                        v-model="isCollapsed">
-                        <LeftMenu :menuClass="menuitemClasses" :isCollapsed="isCollapsed"></LeftMenu>
-                    </Sider>
-                    <Layout :style="{position: 'relative',marginLeft: defaultWidth}">
-                        <Header style="padding: 0;height:50px;line-height: 50px" class="layout-header-bar">
-                            <!-- <Icon @click.native="collapsedSider" :class="rotateIcon" :style="{margin: '0 10px 0 20px'}"
-                                type="md-menu" size="28"></Icon> -->
-                            <Row>
-                                <Col :span="12">
-                                    <Breadcrumb class="nav">
-                                        <!-- <BreadcrumbItem v-for="item in nav" :key="item.id">
-                                            <Icon :type="item.icon"></Icon>
-                                            {{item.name}}
-                                        </BreadcrumbItem> -->
-                                    </Breadcrumb>
-                                </Col>
-                                <Col :span="12">
-                                    <Dropdown @on-click="selectDropdown" style="float: right;margin-right: 20px">
-                                        <a href="javascript:void(0)">
-                                            <Avatar icon="md-person" size="small" style="marginRight:5px;font-size:16px" />
-                                            {{user.username}}
-                                            <Icon type="ios-arrow-down"></Icon>
-                                        </a>
-                                        <DropdownMenu slot="list">
-                                            <DropdownItem name="userSetting">用户设置</DropdownItem>
-                                            <DropdownItem name="logout">退出</DropdownItem>
-                                        </DropdownMenu>
-                                    </Dropdown>
-                                </Col>
-                            </Row>
-                        </Header>
-                        <Content style="margin:15px">
-                            <router-view />
-                            <!-- 子应用容器 -->
-                            <div id="micro-app"></div>
-                        </Content>
-                    </Layout>
-                </Layout>
-            </div>
-            <userSetting ref="userSetting"></userSetting>
-            <div class="foot">©2015-{{new Date().getFullYear()}} <a href="https://www.jianyu360.cn/" target="_blank">jianyu360.cn</a> 版权所有 | <a href="https://beian.miit.gov.cn/" target="_blank">京ICP备14030217号-3</a></div>
-        </div>
+        <router-view></router-view>
     </div>
 </template>
 
 <script>
-import Login from './components/Login.vue'
-import LeftMenu from './components/LeftMenu.vue'
-import userSetting from './components/userSetting.vue'
-import {setTitle} from './router'
-import {token} from './helper'
-import _ from 'lodash'
-import { start } from 'qiankun'
 
 export default {
-    components: {
-        Login,
-        LeftMenu,
-        userSetting
-    },
     data() {
-        return {
-            isCollapsed: false,
-            defaultWidth:'180px'
-        }
-    },
-    computed: {
-        isLogin() {
-            return this.$store.getters.getAdminUser.hasOwnProperty('id');
-        },
-        nav() {
-            let menus = [];
-            let ids = this.$store.getters.getCurrentMenuIds;
-            this.$store.getters.getAdminMenu.forEach((item) => {
-                if (_.indexOf(ids, item.id) !== -1) {
-                    menus.push(item)
-                }
-            });
-            return menus
-        },
-        user() {
-            sessionStorage.setItem('userName', this.$store.getters.getAdminUser.username)
-            return this.$store.getters.getAdminUser;
-        },
-        rotateIcon() {
-            return [
-                'menu-icon',
-                this.isCollapsed ? 'rotate-icon' : ''
-            ];
-        },
-        menuitemClasses() {
-            return [
-                'menu-item',
-                this.isCollapsed ? 'collapsed-menu' : ''
-            ]
-        }
-    },
-    mounted() {
-        this.$router.onReady(() => {
-            this.initialize();
-        if(this.$route.query && this.$route.query.LeftMenu == 'hide'){
-            this.defaultWidth = '0px';
-        }
-        });
+        return {}
     },
-    methods: {
-        // 初始化系统
-        initialize() {
-            if (token()) {
-                this.$request("/load").success((r) => {
-                    this.$store.dispatch('initialize', r.data)
-                    setTitle(this.$route)
-                }).error(() => {
-                    this.$store.dispatch('logout');
-                }).complete(() => {
-                    try {
-                        document.querySelector("#loading").remove();
-                    } catch (error) {}
-                    // qiankun子应用开始加载
-                    start()
-                }).get();
-            } else {
-                document.querySelector("#loading").remove();
-            }
-        },
-        selectDropdown(name) {
-            this[name]();
-        },
-        logout() {
-            this.$request("/logout").success(() => {
-                this.$store.dispatch('logout');
-                setTitle(this.$route)
-            }).get();
-        },
-        userSetting() {
-            this.$refs.userSetting.show();
-        },
-        collapsedSider() {
-            this.$refs.side1.toggleCollapse();
-        }
-    }
+    methods: {}
 }
 </script>
 <style scoped>
-    .layout {
-        background: #f5f7f9;
-        position: relative;
-        overflow: hidden;
-    }
-    .left-sider {
-        height: 100vh;
-        position: fixed;
-        left: 0;
-        overflow: auto;
-    }
-    .layout-header-bar {
-        background: #fff;
-        box-shadow: 0 1px 1px rgba(0, 0, 0, .1);
-    }
-
-    .menu-icon {
-        transition: all .3s;
-    }
-
-    .rotate-icon {
-        transform: rotate(-90deg);
-    }
 
-    .nav {
-        display: inline-block;
-        width: 500px;
-        vertical-align: middle;
-        padding-left: 20px;
-    }
-    .foot {
-        margin: 20px 0 20px 180px;
-        text-align: center;
-        color: #aea79f;
-    }
 </style>

src/router.js

@@ -14,113 +14,120 @@ const routes = [
     {
         path: '/',
         name: 'index',
-        component: () => import('./views/index.vue')
-    },
-    {
-        path: '/auto',
-        name: 'auto',
-        component: () => import('./views/autoLogin.vue')
-    },
-    // {
-    //     path: '*',
-    //     component: () => import('./views/error.vue')
-    // },
-    {
-        path: '/sales/partnerList/partnerDetail',
-        name: 'partnerDetail',
-        component: () => import('./views/sales/partnerDetail.vue'),
-        alias: ['/sales/examineList/examineDetail']
-    },
-    {
-        path: '/sales/withdrawList/withdrawDetail',
-        name: 'withdrawDetail',
-        alias: '/sales/settleList/settleDetail',
-        component: () => import('./views/sales/withdrawDetail.vue')
-    },
-    {
-        path: '/sales/distribution/poster',
-        name: 'poster',
-        component: () => import('./views/sales/codePoster.vue')
-    },
-    {
-        path: '/sales/keywords/setting/list',
-        name: 'keywordsSettingList',
-        component: () => import('./views/sales/keywordsSettingList.vue')
-    },
-    {
-        path: '/sales/keywords/setting/edit',
-        name: 'keywordsSettingEdit',
-        component: () => import('./views/sales/keywordsSettingEdit.vue')
-    },
-    {
-        path: '/order/orderList/orderDetail',
-        name: 'orderDetail',
-        component: () => import('./views/order/orderDetail.vue')
-    },
-    /*{
-        path: '/order/salePersonSupple/salePersonDetail',
-        name: 'orderDetail',
-        component: () => import('./views/order/components/salePersonDetail.vue')
-    },*/
-    {
-        path: '/order/helpUserOrders/oderHelpDetail',
-        name: 'helpOrdersDetail',
-        component: () => import('./views/order/oderHelpDetail.vue')
-    },
-    {
-        path: '/userManage/userList/userDetail',
-        name: 'userDetail',
-        component: () => import('./views/userManage/userDetail.vue')
-    },
-    {
-        path: '/userManage/instiAudit/detail',
-        name: 'instiAuditDetail',
-        component: () => import('./views/userManage/instiAuditDetail.vue')
-    },
-    {
-        path: '/msgCollect/inforAudit/detail',
-        name: 'inforAuditDetail',
-        component: () => import('./views/msgCollect/inforAuditDetail.vue')
-    },
-    {
-        path: '/userManage/instiManage/detail',
-        name: 'instiManageDetail',
-        component: () => import('./views/userManage/instiManageDetail.vue')
-    },
-    {
-        path: '/boardMsg/inforList/inforDetail',
-        name: 'inforDetail',
-        component: () => import('./views/boardMsg/inforDetail.vue')
-    },
-    {
-        path: '/dataManage/exportRecord/detail',
-        name: 'detail',
-        component: () => import('./views/dataManage/detail.vue')
-    },
-    {
-        path: '/msgManage/sendDetail',
-        name: 'sendDetail',
-        component: () => import('./views/msgManage/sendDetail.vue')
-    },
-    {
-        path: '/msgManage/boardManage/detail',
-        name: 'boardDetail',
-        component: () => import('./views/msgManage/boardDetail.vue')
-    },
-    {
-        path: '/outServer/*',
-        name: 'outServer',
-        component: () => import('./views/outServer/outServer.vue')
-    },
-    {
-      path: '/huiju/wechatList',
-      name: 'wechatList',
-      component: () => import('./views/huiju/wechatList.vue'),
-    },
-    {
-        path: '/huiju/wechatEdit',
-        name: 'wechatEdit',
-        component: () => import('./views/huiju/wechatEdit.vue'),
+        component: () => import('./views/index.vue'),
+        children: [
+            {
+                path: '/auto',
+                name: 'auto',
+                component: () => import('./views/autoLogin.vue')
+            },
+            // {
+            //     path: '*',
+            //     component: () => import('./views/error.vue')
+            // },
+            {
+                path: '/sales/partnerList/partnerDetail',
+                name: 'partnerDetail',
+                component: () => import('./views/sales/partnerDetail.vue'),
+                alias: ['/sales/examineList/examineDetail']
+            },
+            {
+                path: '/sales/withdrawList/withdrawDetail',
+                name: 'withdrawDetail',
+                alias: '/sales/settleList/settleDetail',
+                component: () => import('./views/sales/withdrawDetail.vue')
+            },
+            {
+                path: '/sales/distribution/poster',
+                name: 'poster',
+                component: () => import('./views/sales/codePoster.vue')
+            },
+            {
+                path: '/sales/keywords/setting/list',
+                name: 'keywordsSettingList',
+                component: () => import('./views/sales/keywordsSettingList.vue')
+            },
+            {
+                path: '/sales/keywords/setting/edit',
+                name: 'keywordsSettingEdit',
+                component: () => import('./views/sales/keywordsSettingEdit.vue')
+            },
+            {
+                path: '/order/orderList/orderDetail',
+                name: 'orderDetail',
+                component: () => import('./views/order/orderDetail.vue')
+            },
+            /*{
+                path: '/order/salePersonSupple/salePersonDetail',
+                name: 'orderDetail',
+                component: () => import('./views/order/components/salePersonDetail.vue')
+            },*/
+            {
+                path: '/order/helpUserOrders/oderHelpDetail',
+                name: 'helpOrdersDetail',
+                component: () => import('./views/order/oderHelpDetail.vue')
+            },
+            {
+                path: '/userManage/userList/userDetail',
+                name: 'userDetail',
+                component: () => import('./views/userManage/userDetail.vue')
+            },
+            {
+                path: '/userManage/instiAudit/detail',
+                name: 'instiAuditDetail',
+                component: () => import('./views/userManage/instiAuditDetail.vue')
+            },
+            {
+                path: '/msgCollect/inforAudit/detail',
+                name: 'inforAuditDetail',
+                component: () => import('./views/msgCollect/inforAuditDetail.vue')
+            },
+            {
+                path: '/userManage/instiManage/detail',
+                name: 'instiManageDetail',
+                component: () => import('./views/userManage/instiManageDetail.vue')
+            },
+            {
+                path: '/boardMsg/inforList/inforDetail',
+                name: 'inforDetail',
+                component: () => import('./views/boardMsg/inforDetail.vue')
+            },
+            {
+                path: '/dataManage/exportRecord/detail',
+                name: 'detail',
+                component: () => import('./views/dataManage/detail.vue')
+            },
+            {
+                path: '/msgManage/sendDetail',
+                name: 'sendDetail',
+                component: () => import('./views/msgManage/sendDetail.vue')
+            },
+            {
+                path: '/msgManage/boardManage/detail',
+                name: 'boardDetail',
+                component: () => import('./views/msgManage/boardDetail.vue')
+            },
+            {
+                path: '/outServer/*',
+                name: 'outServer',
+                component: () => import('./views/outServer/outServer.vue')
+            },
+            {
+              path: '/huiju/wechatList',
+              name: 'wechatList',
+              component: () => import('./views/huiju/wechatList.vue'),
+            },
+            {
+                path: '/huiju/wechatEdit',
+                name: 'wechatEdit',
+                component: () => import('./views/huiju/wechatEdit.vue'),
+            },
+        ]
+    },
+    {
+        path: '/create-order',
+        name: 'create-order',
+        component: () => import('./views/create-order/index.vue')
     },
 ];
 
@@ -136,8 +143,11 @@ routeComponent.keys().forEach(fileName => {
     if (fileName.indexOf('components/') !== -1 || fileName === "index") {
         return;
     }
+    if (fileName.includes('create-order') || fileName.startsWith('page-')) {
+        return
+    }
     const path = '/' + trim(fileName.replace(/^\.\/(.*)\.\w+$/, '$1'), '/', 'left');
-    routes.push({
+    routes[0].children.push({
         path: path,
         name: path,
         component: routeComponent(fileName).default

src/views/index.vue

@@ -1,19 +1,191 @@
 <template>
-    <div>
-        <!-- <Alert type="success">默认后台首页地址 可以在 <code>.env</code> 中配置 <code>INDEX_URL</code></Alert>
-        <Button type="primary" @click="$router.push('/example')">例子页面</Button> -->
-        <h1>控制台</h1>
+    <div class="layout-container">
+        <div  v-if="!isLogin">
+          <router-view v-if="$route.name === 'auto'"></router-view>
+          <Login v-else></Login>
+        </div>
+        <div class="main layout" v-if="isLogin">
+            <div style="min-height: calc(100vh - 80px);">
+                <Layout>
+                    <Sider :width="defaultWidth" class="left-sider" ref="side1" hide-trigger collapsible :collapsed-width="80"
+                        v-model="isCollapsed">
+                        <LeftMenu :menuClass="menuitemClasses" :isCollapsed="isCollapsed"></LeftMenu>
+                    </Sider>
+                    <Layout :style="{position: 'relative',marginLeft: defaultWidth}">
+                        <Header style="padding: 0;height:50px;line-height: 50px" class="layout-header-bar">
+                            <!-- <Icon @click.native="collapsedSider" :class="rotateIcon" :style="{margin: '0 10px 0 20px'}"
+                                type="md-menu" size="28"></Icon> -->
+                            <Row>
+                                <Col :span="12">
+                                    <Breadcrumb class="nav">
+                                        <!-- <BreadcrumbItem v-for="item in nav" :key="item.id">
+                                            <Icon :type="item.icon"></Icon>
+                                            {{item.name}}
+                                        </BreadcrumbItem> -->
+                                    </Breadcrumb>
+                                </Col>
+                                <Col :span="12">
+                                    <Dropdown @on-click="selectDropdown" style="float: right;margin-right: 20px">
+                                        <a href="javascript:void(0)">
+                                            <Avatar icon="md-person" size="small" style="marginRight:5px;font-size:16px" />
+                                            {{user.username}}
+                                            <Icon type="ios-arrow-down"></Icon>
+                                        </a>
+                                        <DropdownMenu slot="list">
+                                            <DropdownItem name="userSetting">用户设置</DropdownItem>
+                                            <DropdownItem name="logout">退出</DropdownItem>
+                                        </DropdownMenu>
+                                    </Dropdown>
+                                </Col>
+                            </Row>
+                        </Header>
+                        <Content style="margin:15px">
+                            <router-view />
+                            <!-- 子应用容器 -->
+                            <div id="micro-app"></div>
+                        </Content>
+                    </Layout>
+                </Layout>
+            </div>
+            <userSetting ref="userSetting"></userSetting>
+            <div class="foot">©2015-{{new Date().getFullYear()}} <a href="https://www.jianyu360.cn" target="_blank">jianyu360.cn</a> 版权所有 | <a href="https://beian.miit.gov.cn/" target="_blank">京ICP备14030217号-3</a></div>
+        </div>
     </div>
 </template>
 
 <script>
-import { config } from '../helper'
+import Login from '../components/Login.vue'
+import LeftMenu from '../components/LeftMenu.vue'
+import userSetting from '../components/userSetting.vue'
+import {setTitle} from '../router'
+import {token} from '../helper'
+import _ from 'lodash'
+import { start } from 'qiankun'
 
 export default {
-    created() {
-        if (config('INDEX_URL') !== "/index") {
-            this.$router.replace(config('INDEX_URL'))
+    components: {
+        Login,
+        LeftMenu,
+        userSetting
+    },
+    data() {
+        return {
+            isCollapsed: false,
+            defaultWidth:'180px'
+        }
+    },
+    computed: {
+        isLogin() {
+            return this.$store.getters.getAdminUser.hasOwnProperty('id');
+        },
+        nav() {
+            let menus = [];
+            let ids = this.$store.getters.getCurrentMenuIds;
+            this.$store.getters.getAdminMenu.forEach((item) => {
+                if (_.indexOf(ids, item.id) !== -1) {
+                    menus.push(item)
+                }
+            });
+            return menus
+        },
+        user() {
+            sessionStorage.setItem('userName', this.$store.getters.getAdminUser.username)
+            return this.$store.getters.getAdminUser;
+        },
+        rotateIcon() {
+            return [
+                'menu-icon',
+                this.isCollapsed ? 'rotate-icon' : ''
+            ];
+        },
+        menuitemClasses() {
+            return [
+                'menu-item',
+                this.isCollapsed ? 'collapsed-menu' : ''
+            ]
+        }
+    },
+    mounted() {
+        document.querySelector('#loading').style = ''
+        this.$router.onReady(() => {
+            this.initialize();
+        if(this.$route.query && this.$route.query.LeftMenu == 'hide'){
+            this.defaultWidth = '0px';
         }
+        });
     },
+    methods: {
+        // 初始化系统
+        initialize() {
+            if (token()) {
+                this.$request("/load").success((r) => {
+                    this.$store.dispatch('initialize', r.data)
+                    setTitle(this.$route)
+                }).error(() => {
+                    this.$store.dispatch('logout');
+                }).complete(() => {
+                    try {
+                        document.querySelector("#loading").remove();
+                    } catch (error) {}
+                    // qiankun子应用开始加载
+                    start()
+                }).get();
+            } else {
+                document.querySelector("#loading").remove();
+            }
+        },
+        selectDropdown(name) {
+            this[name]();
+        },
+        logout() {
+            this.$request("/logout").success(() => {
+                this.$store.dispatch('logout');
+                setTitle(this.$route)
+            }).get();
+        },
+        userSetting() {
+            this.$refs.userSetting.show();
+        },
+        collapsedSider() {
+            this.$refs.side1.toggleCollapse();
+        }
+    }
 }
 </script>
+<style scoped>
+    .layout {
+        background: #f5f7f9;
+        position: relative;
+        overflow: hidden;
+    }
+    .left-sider {
+        height: 100vh;
+        position: fixed;
+        left: 0;
+        overflow: auto;
+    }
+    .layout-header-bar {
+        background: #fff;
+        box-shadow: 0 1px 1px rgba(0, 0, 0, .1);
+    }
+
+    .menu-icon {
+        transition: all .3s;
+    }
+
+    .rotate-icon {
+        transform: rotate(-90deg);
+    }
+
+    .nav {
+        display: inline-block;
+        width: 500px;
+        vertical-align: middle;
+        padding-left: 20px;
+    }
+    .foot {
+        margin: 20px 0 20px 180px;
+        text-align: center;
+        color: #aea79f;
+    }
+</style>