From f754005959e23a5930f5e2b4090bf08da4e8d93f Mon Sep 17 00:00:00 2001 From: toesbieya <1647775459@qq.com> Date: Sat, 27 Jun 2020 19:23:15 +0800 Subject: [PATCH] =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E4=BA=86=E8=AF=A6=E6=83=85?= =?UTF-8?q?=E9=A1=B5=E7=BC=93=E5=AD=98=E7=9A=84=E5=8A=9F=E8=83=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- vue/src/components/Charts/PieChart.vue | 1 + vue/src/layout/components/KeepAlive.js | 99 +++++++++++++++++++ vue/src/layout/components/Main.vue | 11 ++- vue/src/layout/components/Sidebar/index.vue | 11 ++- vue/src/layout/components/TagsView/index.vue | 35 +++---- .../TagsView/mixin/decideRouterTransition.js | 12 +-- .../mixin/{shortcutsMixin.js => shortcuts.js} | 10 ++ vue/src/main.js | 6 ++ vue/src/mixins/bizDocumentTableMixin.js | 2 +- vue/src/mixins/chart/logic.js | 4 + vue/src/router/constant/modules/app.js | 2 +- vue/src/router/constant/modules/example.js | 12 +++ vue/src/router/index.js | 13 ++- vue/src/router/util.js | 4 +- vue/src/store/modules/tagsView.js | 48 +++++---- vue/src/views/app/redirect.vue | 3 +- vue/src/views/example/detailPage.vue | 17 ++++ vue/src/views/system/role/index.vue | 15 +-- vue/vue.config.js | 49 +-------- 19 files changed, 236 insertions(+), 118 deletions(-) create mode 100644 vue/src/layout/components/KeepAlive.js rename vue/src/layout/components/TagsView/mixin/{shortcutsMixin.js => shortcuts.js} (90%) create mode 100644 vue/src/views/example/detailPage.vue diff --git a/vue/src/components/Charts/PieChart.vue b/vue/src/components/Charts/PieChart.vue index cbdf8d1..fe1cde7 100644 --- a/vue/src/components/Charts/PieChart.vue +++ b/vue/src/components/Charts/PieChart.vue @@ -17,6 +17,7 @@ data: { deep: true, handler(val) { + if (!window.echarts) return this.init(val) } } diff --git a/vue/src/layout/components/KeepAlive.js b/vue/src/layout/components/KeepAlive.js new file mode 100644 index 0000000..1aa6348 --- /dev/null +++ b/vue/src/layout/components/KeepAlive.js @@ -0,0 +1,99 @@ +import {isEmpty} from "@/utils" + +const KEY = '_routerViewKey' + +function getFirstComponentChild(children) { + if (Array.isArray(children)) { + for (const c of children) { + if (!isEmpty(c) && (!isEmpty(c.componentOptions) || c.isComment && c.asyncFactory)) { + return c + } + } + } +} + +function getComponentName(opts) { + return opts && (opts.Ctor.options.name || opts.tag) +} + +function pruneCacheEntry(cache, key, current) { + const cached = cache[key] + if (cached && (!current || cached.tag !== current.tag)) { + cached.componentInstance && cached.componentInstance.$destroy() + } + delete cache[key] +} + +function getCacheKey(route, componentOptions) { + if (KEY in componentOptions) return componentOptions[KEY] + + const {path, meta} = route + const key = meta && meta.isDetailPage ? path : getComponentName(componentOptions) + + componentOptions[KEY] = key + + return key +} + +export default { + name: 'keep-router-view-alive', + abstract: true, + + props: {include: Array}, + + watch: { + include: { + deep: true, + handler(val) { + const {cache, $route, _vnode} = this + for (const key of Object.keys(cache)) { + const cachedNode = cache[key] + const name = getCacheKey($route, cachedNode.componentOptions) + if (name && !val.includes(name)) { + pruneCacheEntry(cache, key, _vnode) + } + } + } + } + }, + + created() { + this.cache = Object.create(null) + }, + + beforeDestroy() { + for (const key of Object.keys(this.cache)) { + pruneCacheEntry(this.cache, key) + } + }, + + render() { + const slot = this.$slots.default + const vnode = getFirstComponentChild(slot) + let componentOptions = vnode && vnode.componentOptions + + if (componentOptions) { + //忽略组件 + const child = componentOptions.tag === 'transition' ? componentOptions.children[0] : vnode + componentOptions = child && child.componentOptions + + if (componentOptions) { + const key = getCacheKey(this.$route, componentOptions) + const {include, cache} = this + + if (include && !include.includes(key)) { + return vnode + } + + if (cache[key]) { + child.componentInstance = cache[key].componentInstance + } + else cache[key] = child + + child.data.keepAlive = true + } + } + + return vnode || (slot && slot[0]) + } +} diff --git a/vue/src/layout/components/Main.vue b/vue/src/layout/components/Main.vue index e4d0667..aa6bc02 100644 --- a/vue/src/layout/components/Main.vue +++ b/vue/src/layout/components/Main.vue @@ -2,11 +2,11 @@
- - + + - - + +
@@ -29,11 +29,14 @@ diff --git a/vue/src/views/system/role/index.vue b/vue/src/views/system/role/index.vue index febb3b1..84e45b2 100644 --- a/vue/src/views/system/role/index.vue +++ b/vue/src/views/system/role/index.vue @@ -36,9 +36,6 @@ :data="tableData" @row-click="row=$event" > - - - @@ -71,7 +68,6 @@ import SearchForm from "@/components/SearchForm" import SearchFormItem from "@/components/SearchForm/SearchFormItem" import EditDialog from './components/EditDialog' - import RoleResource from "./components/RoleResource" import {delRole, searchRoles} from "@/api/system/role" import {isEmpty} from '@/utils' import {elConfirm, elError, elSuccess} from "@/utils/message" @@ -85,7 +81,7 @@ mixins: [tableMixin], - components: {SearchForm, SearchFormItem, EditDialog, RoleResource}, + components: {SearchForm, SearchFormItem, EditDialog}, data() { return { @@ -112,15 +108,6 @@ canDel() { return auth(baseUrl + '/del') - }, - - resourceMap() { - const resource = this.$store.state.resource - if (resource.data.length <= 0) return {} - return resource.data.reduce((map, resource) => { - map[resource.id] = resource - return map - }, {}) } }, diff --git a/vue/vue.config.js b/vue/vue.config.js index 873acd0..c3f8802 100644 --- a/vue/vue.config.js +++ b/vue/vue.config.js @@ -47,7 +47,7 @@ module.exports = { resolve: { alias: { '@': resolve('src'), - '@ele': resolve('element-ui-personal'), + '@ele': resolve('element-ui-personal') } }, plugins: [ @@ -80,53 +80,6 @@ module.exports = { .loader('svg-sprite-loader') .options({symbolId: 'icon-[name]'}) .end() - - // set preserveWhitespace - config.module - .rule('vue') - .use('vue-loader') - .loader('vue-loader') - .tap(options => { - options.compilerOptions.preserveWhitespace = true - return options - }) - .end() - - config - .when(process.env.NODE_ENV !== 'development', - config => { - config - .plugin('ScriptExtHtmlWebpackPlugin') - .after('html') - .use('script-ext-html-webpack-plugin', [{inline: /runtime\..*\.js$/}]) - .end() - config - .optimization.splitChunks({ - chunks: 'all', - cacheGroups: { - libs: { - name: 'chunk-libs', - test: /[\\/]node_modules[\\/]/, - priority: 10, - chunks: 'initial' // only package third parties that are initially dependent - }, - elementUI: { - name: 'chunk-elementUI', // split elementUI into a single package - priority: 20, // the weight needs to be larger than libs and app or it will be packaged into libs or app - test: /[\\/]node_modules[\\/]_?element-ui(.*)/ // in order to adapt to cnpm - }, - commons: { - name: 'chunk-commons', - test: resolve('src/components'), // can customize your rules - minChunks: 3, // minimum common number - priority: 5, - reuseExistingChunk: true - } - } - }) - config.optimization.runtimeChunk('single') - } - ) }, css: { loaderOptions: {