代码简化

vue/src/layout/component/Main/component/Breadcrumb.vue

@@ -13,9 +13,11 @@ export default {
     data: () => ({data: []}),
 
     watch: {
-        $route(route) {
-            if (route.path.startsWith('/redirect')) return
-            this.getBreadcrumb()
+        $route: {
+            immediate: true,
+            handler(route) {
+                !route.path.startsWith('/redirect') && this.getBreadcrumb()
+            }
         }
     },
 
@@ -24,10 +26,6 @@ export default {
             // only show routes with meta.title
             this.data = this.$route.matched.filter(item => item.meta.title)
         }
-    },
-
-    mounted() {
-        this.getBreadcrumb()
     }
 }
 </script>
@@ -35,7 +33,7 @@ export default {
 <style lang="scss" scoped>
 .app-breadcrumb {
     width: 100%;
-    background: #fff;
+    background-color: #ffffff;
     padding: 16px 24px;
 
     .no-redirect {

vue/src/layout/component/Navbar/component/RootMenu.vue

@@ -25,11 +25,10 @@ export default {
     data() {
         return {
             //最后一个不被隐藏的顶部菜单的数组下标
-            //为undefined时，说明不需要隐藏菜单
-            //为-1时，说明需要隐藏全部菜单
+            //为undefined时，说明不需要隐藏菜单，为-1时，说明需要隐藏全部菜单
             lastVisibleIndex: undefined,
 
-            //是否显示menu-popover
+            //是否显示弹出菜单
             showPopover: false
         }
     },

vue/src/layout/component/TagsView/ScrollPane.vue

@@ -28,7 +28,7 @@ export default {
         moveToTarget(currentTag) {
             const $containerWidth = this.$refs.scrollContainer.$el.offsetWidth
             const {scrollWidth, scrollLeft} = this.getWrapper()
-            const tagList = this.$parent.$refs.tag
+            const tagList = this.$parent.getTags()
 
             let firstTag = null
             let lastTag = null
@@ -73,6 +73,7 @@ export default {
             })
         },
 
+        //在300ms内完成滚动
         smoothScroll(val) {
             if (this.rAF) window.cancelAnimationFrame(this.rAF)
             let cost = 300, times = cost / 16, gap = val / times + 1

vue/src/layout/component/TagsView/index.vue

@@ -1,32 +1,3 @@
-<template>
-    <nav class="tags-view-container">
-        <scroll-pane ref="scrollPane" class="tags-view-wrapper">
-            <router-link
-                ref="tag"
-                v-for="tag in visitedViews"
-                :key="tag.path"
-                :class="{'tags-view-item': true, active: isActive(tag)}"
-                :to="{ path: tag.path, query: tag.query, fullPath: tag.fullPath }"
-                tag="div"
-                @contextmenu.prevent.native="e => openMenu(tag, e)"
-                @dblclick.prevent.native="() => closeSelectedTag(tag)"
-            >
-                {{ tag.title }}
-                <i v-if="!isAffix(tag)" class="el-icon-close" @click.prevent.stop="() => closeSelectedTag(tag)"/>
-            </router-link>
-        </scroll-pane>
-
-        <context-menu v-model="contextmenu.show" :left="contextmenu.left" :top="contextmenu.top">
-            <context-menu-item @click="() => refreshSelectedTag(selectedTag)">刷新</context-menu-item>
-            <context-menu-item v-if="!isAffix(selectedTag)" @click="() => closeSelectedTag(selectedTag)">
-                关闭
-            </context-menu-item>
-            <context-menu-item @click="closeOthersTags">关闭其他</context-menu-item>
-            <context-menu-item @click="closeAllTags">关闭全部</context-menu-item>
-        </context-menu>
-    </nav>
-</template>
-
 <script type="text/jsx">
 import shortcutMixin from '@/layout/mixin/shortcut'
 import decideRouterTransitionMixin from '@/layout/mixin/decideRouterTransition'
@@ -109,11 +80,14 @@ export default {
         addTags(to = this.$route) {
             to.meta.title && tagsViewMutations.addView(to)
         },
+        getTags() {
+            return this.$refs.scrollPane.$children[0].$children
+        },
 
         //横向滚动条移动至当前tab
         moveToCurrentTag() {
             this.$nextTick(() => {
-                const tag = this.$refs.tag.find(i => i.to.path === this.$route.path)
+                const tag = this.getTags().find(i => i.to.path === this.$route.path)
                 tag && this.$refs.scrollPane.moveToTarget(tag)
             })
         },
@@ -122,9 +96,10 @@ export default {
         * 右键菜单选项
         * 刷新所选、关闭所选、关闭其他、关闭所有
         * */
-        refreshSelectedTag(view) {
-            tagsViewMutations.delCachedView(view)
-            this.$nextTick(() => this.$router.replace({path: `/redirect${view.fullPath}`}))
+        refreshSelectedTag() {
+            if (!this.selectedTag) return
+            tagsViewMutations.delCachedView(this.selectedTag)
+            this.$nextTick(() => this.$router.replace({path: `/redirect${this.selectedTag.fullPath}`}))
         },
         closeSelectedTag(view) {
             if (this.isAffix(view)) return
@@ -156,6 +131,8 @@ export default {
         },
 
         openMenu(tag, e) {
+            e.preventDefault()
+
             const menuMinWidth = 105
             const offsetLeft = this.$el.getBoundingClientRect().left // container margin left
             const offsetWidth = this.$el.offsetWidth // container width
@@ -167,6 +144,44 @@ export default {
             this.contextmenu.show = true
 
             this.selectedTag = tag
+        },
+
+        renderTags(h) {
+            return this.visitedViews.map(tag => {
+                const {title, path, query, fullPath} = tag
+                const active = this.isActive(tag), affix = this.isAffix(tag)
+                const closeSelectedTag = (e, tag) => {
+                    e.preventDefault()
+                    this.closeSelectedTag(tag)
+                }
+                return (
+                    <router-link
+                        key={path}
+                        class={{'tags-view-item': true, active}}
+                        to={{path, query, fullPath}}
+                        tag="div"
+                        v-on:contextmenu_native={e => this.openMenu(tag, e)}
+                        v-on:dblclick_native={e => closeSelectedTag(e, tag)}
+                    >
+                        {title}
+                        {!affix && <i class="el-icon-close" on-click={e => closeSelectedTag(e, tag)}/>}
+                    </router-link>
+                )
+            })
+        },
+        renderContextmenu(h) {
+            const menu = this.contextmenu
+            return (
+                <context-menu v-model={menu.show} left={menu.left} top={menu.top}>
+                    <context-menu-item on-click={this.refreshSelectedTag}>刷新</context-menu-item>
+                    {!this.isAffix(this.selectedTag) &&
+                    <context-menu-item on-click={() => this.closeSelectedTag(this.selectedTag)}>
+                        关闭
+                    </context-menu-item>}
+                    <context-menu-item on-click={this.closeOthersTags}>关闭其他</context-menu-item>
+                    <context-menu-item on-click={this.closeAllTags}>关闭全部</context-menu-item>
+                </context-menu>
+            )
         }
     },
 
@@ -178,6 +193,17 @@ export default {
     mounted() {
         this.initTags()
         this.addTags()
+    },
+
+    render(h) {
+        return (
+            <nav class="tags-view-container">
+                <scroll-pane ref="scrollPane" class="tags-view-wrapper">
+                    {this.renderTags(h)}
+                </scroll-pane>
+                {this.renderContextmenu(h)}
+            </nav>
+        )
     }
 }
 </script>

vue/src/view/index/indexPage.vue

@@ -1,20 +1,4 @@
-<template>
-    <div>
-        <panel-group/>
-
-        <el-card>
-            <daily-profit-stat/>
-        </el-card>
-
-        <el-card style="margin: 32px 0">
-            <daily-finish-order-stat/>
-        </el-card>
-
-        <total-profit-goods/>
-    </div>
-</template>
-
-<script>
+<script type="text/jsx">
 import PanelGroup from './component/PanelGroup'
 import DailyProfitStat from "./component/DailyProfitStat"
 import DailyFinishOrderStat from "./component/DailyFinishOrderStat"
@@ -23,6 +7,24 @@ import TotalProfitGoods from "./component/TotalProfitGoods"
 export default {
     name: 'index',
 
-    components: {PanelGroup, DailyProfitStat, DailyFinishOrderStat, TotalProfitGoods}
+    functional: true,
+
+    render() {
+        return (
+            <div>
+                <PanelGroup/>
+
+                <el-card>
+                    <DailyProfitStat/>
+                </el-card>
+
+                <el-card style="margin: 32px 0">
+                    <DailyFinishOrderStat/>
+                </el-card>
+
+                <TotalProfitGoods/>
+            </div>
+        )
+    }
 }
 </script>