Merge branch 'feature/keepAlive' into develop

Former-commit-id: 833fd2228eaacea1db7845a42f49373a0eeb1938 [formerly 833fd2228eaacea1db7845a42f49373a0eeb1938 [formerly 833fd2228eaacea1db7845a42f49373a0eeb1938 [formerly 833fd2228eaacea1db7845a42f49373a0eeb1938 [formerly a64fd03cee02b4ad2cb06798e668cb749813cf4c [formerly 8b10605d57705c989b942c129650faae47cb8a55]]]]]
Former-commit-id: f4437cff458af1c49e5854255214cc2c1b965b73
Former-commit-id: edd3c9efa75fcbdbd7d1ce2de53572b9dd793a6f
Former-commit-id: 3ac645b0cf5b4be88437c70e717d084be6932264 [formerly 5a42f1abb2599241cb26c8584e1e85994e050566]
Former-commit-id: f19cac00ea703fe5e4e3350cfd91eaf1e09f6c72
Former-commit-id: 62229b5a2cd59ab7026b49fd45a5650f2eef8cd0
Former-commit-id: 7dd2138c04fb3e5a49961eeceb5a9e38ab389516
Former-commit-id: 4093ccf675da7e89493d8a5d2debb3c29389a29d
Former-commit-id: c2287cb61895e51a8ddc80af3626d9eef19f148f

src/layout/header-aside/components/header-size/index.vue

@@ -4,7 +4,7 @@
       <d2-icon name="font" style="font-size: 16px;"/>
     </el-button>
     <el-dropdown-menu slot="dropdown">
-      <el-dropdown-item command="">
+      <el-dropdown-item command="default">
         <d2-icon :name="iconName('default')" class="d2-mr-5"/>默认
       </el-dropdown-item>
       <el-dropdown-item command="medium">
@@ -34,21 +34,28 @@ export default {
     // 因为需要访问 this.$ELEMENT 所以只能在这里使用这种方式
     value: {
       handler (val) {
+        if (this.$ELEMENT.size !== val) {
+          // 设置 element 全局尺寸
           this.$ELEMENT.size = val
+          // 清空缓存设置
+          this.pageKeepAliveClean()
+          // 刷新此页面
+          const { path, query } = this.$route
+          this.$router.replace({
+            path: '/redirect/' + JSON.stringify({ path, query })
+          })
+        }
       },
       immediate: true
     }
   },
   methods: {
-    ...mapMutations('d2admin/size', [
+    ...mapMutations({
-      'set'
+      sizeSet: 'd2admin/size/set',
-    ]),
+      pageKeepAliveClean: 'd2admin/page/keepAliveClean'
+    }),
     handleChange (value) {
-      this.set(value)
+      this.sizeSet(value)
-      this.$message({
-        message: `设置尺寸成功 ${value}`,
-        type: 'success'
-      })
     },
     iconName (name) {
       return name === this.value ? 'dot-circle-o' : 'circle-o'

src/pages/demo/playground/store/sys/index.vue

@@ -6,18 +6,18 @@
         <el-col :span="12">
           <el-card shadow="never" class="d2-card d2-mb">
             <template slot="header">顶栏菜单数据</template>
-            <div style="height: 300px; overflow: auto;">
+            <div style="height: 260px; overflow: auto;">
               <tree-view
                 class="tree-view-small"
                 :data="menuHeader"
-                :options="{ rootObjectKey: 'menuHeader', maxDepth: 2 }"/>
+                :options="{ rootObjectKey: 'menuHeader', maxDepth: 1 }"/>
             </div>
           </el-card>
         </el-col>
         <el-col :span="12">
           <el-card shadow="never" class="d2-card d2-mb">
             <template slot="header">侧边栏菜单数据</template>
-            <div style="height: 300px; overflow: auto;">
+            <div style="height: 260px; overflow: auto;">
               <tree-view
                 class="tree-view-small"
                 :data="menuAside"
@@ -27,24 +27,30 @@
         </el-col>
       </el-row>
       <el-row :gutter="20">
-        <el-col :span="8">
+        <el-col :span="6">
           <el-card shadow="never" class="d2-card d2-mb">
             <template slot="header">全屏模式</template>
             <el-switch v-model="fullscreenActive" active-text="打开" inactive-text="关闭" disabled/>
           </el-card>
         </el-col>
-        <el-col :span="8">
+        <el-col :span="6">
           <el-card shadow="never" class="d2-card d2-mb">
             <template slot="header">灰度模式</template>
             <el-switch v-model="grayActive" active-text="打开" inactive-text="关闭" disabled/>
           </el-card>
         </el-col>
-        <el-col :span="8">
+        <el-col :span="6">
           <el-card shadow="never" class="d2-card d2-mb">
             <template slot="header">侧边栏折叠</template>
             <el-switch v-model="menuAsideCollapse" active-text="收缩" inactive-text="展开" disabled/>
           </el-card>
         </el-col>
+        <el-col :span="6">
+          <el-card shadow="never" class="d2-card d2-mb">
+            <template slot="header">全局尺寸</template>
+            {{sizeValue}}
+          </el-card>
+        </el-col>
       </el-row>
       <el-row :gutter="20">
         <el-col :span="8">
@@ -153,7 +159,9 @@ export default {
       // tag 池
       pagePool: state => state.page.pool,
       pageCurrent: state => state.page.current,
-      pageopened: state => state.page.opened
+      pageopened: state => state.page.opened,
+      // 全局尺寸
+      sizeValue: state => state.size.value
     }),
     ...mapGetters('d2admin', {
       keepAlive: 'page/keepAlive',

src/pages/redirect/index.vue

@@ -0,0 +1,12 @@
+<script>
+// 跳板页面
+export default {
+  beforeCreate () {
+    const path = this.$route.params.path
+    this.$router.replace(JSON.parse(path))
+  },
+  render: function (h) {
+    return h()
+  }
+}
+</script>

src/router/routes.js.REMOVED.git-id

@@ -1 +1 @@
-e5f86ceea9da8ed5238a065835a8d86dfa3cf688
+58069f63d26f33421df3d333c4aa58af52c87aaa

src/store/modules/d2admin/modules/page.js

@@ -1,315 +0,0 @@
-// 设置文件
-import setting from '@/setting.js'
-
-export default {
-  namespaced: true,
-  state: {
-    // 可以在多页 tab 模式下显示的页面
-    pool: [],
-    // 当前显示的多页面列表
-    opened: setting.page.opened,
-    // 当前页面
-    current: '',
-    // 需要缓存的页面 name
-    keepAlive: []
-  },
-  mutations: {
-    /**
-     * @class keepAlive
-     * @description 从已经打开的页面记录中更新需要缓存的页面记录
-     * @param {Object} state vuex state
-     */
-    updateKeepAliveFromOpened (state) {
-      state.keepAlive = state.opened.filter(item => {
-        if (item.meta) {
-          if (item.meta.notCache) {
-            return false
-          }
-        }
-        return true
-      }).map(e => e.name)
-    },
-    /**
-     * @class current
-     * @description 打开一个新的页面
-     * @param {Object} state vuex state
-     * @param {Object} param { name, params, query } 路由信息
-     */
-    open (state, { name, params, query }) {
-      // 已经打开的页面
-      let opened = state.opened
-      // 判断此页面是否已经打开 并且记录位置
-      let pageOpendIndex = 0
-      const pageOpend = opened.find((page, index) => {
-        const same = page.name === name
-        pageOpendIndex = same ? index : pageOpendIndex
-        return same
-      })
-      if (pageOpend) {
-        // 页面以前打开过 但是新的页面可能 name 一样，参数不一样
-        this.commit('d2admin/page/openedUpdate', {
-          index: pageOpendIndex,
-          params,
-          query
-        })
-      } else {
-        // 页面以前没有打开过
-        let page = state.pool.find(t => t.name === name)
-        if (page) {
-          this.commit('d2admin/page/add', {
-            tag: page,
-            params,
-            query
-          })
-        }
-      }
-      this.commit('d2admin/page/currentSet', name)
-    },
-    /**
-     * @class current
-     * @description 设置当前激活的页面 name
-     * @param {Object} state vuex state
-     * @param {String} name new name
-     */
-    currentSet (state, name) {
-      state.current = name
-    },
-    /**
-     * @class opened
-     * @description 更新页面列表上的某一项
-     * @param {Object} state vuex state
-     * @param {Object} param { index, params, query } 路由信息
-     */
-    openedUpdate (state, { index, params, query }) {
-      // 更新页面列表某一项
-      let page = state.opened[index]
-      page.params = params || page.params
-      page.query = query || page.query
-      state.opened.splice(index, 1, page)
-      // 持久化
-      this.commit('d2admin/page/opend2db')
-    },
-    /**
-     * 将 opened 属性赋值并持久化 在这之前请先确保已经更新了 state.opened
-     * @param {Object} state vuex state
-     */
-    opend2db (state) {
-      this.dispatch('d2admin/db/set', {
-        dbName: 'sys',
-        path: 'page.opened',
-        value: state.opened,
-        user: true
-      })
-    },
-    /**
-     * @class opened
-     * @description 从持久化数据载入分页列表
-     * @param {Object} state vuex state
-     */
-    async openedLoad (state) {
-      // store 赋值
-      const value = await this.dispatch('d2admin/db/get', {
-        dbName: 'sys',
-        path: 'page.opened',
-        defaultValue: setting.page.opened,
-        user: true
-      })
-      // 在处理函数中进行数据优化 过滤掉现在已经失效的页签或者已经改变了信息的页签
-      // 以 name 字段为准
-      // 如果页面过多的话可能需要优化算法
-      // valid 有效列表 1, 1, 0, 1 => 有效, 有效, 失效, 有效
-      const valid = []
-      // 处理数据
-      state.opened = value.map(opened => {
-        // 忽略首页
-        if (opened.name === 'index') {
-          valid.push(1)
-          return opened
-        }
-        // 尝试在所有的支持多标签页的页面里找到 name 匹配的页面
-        const find = state.pool.find(item => item.name === opened.name)
-        // 记录有效或无效信息
-        valid.push(find ? 1 : 0)
-        // 返回合并后的数据 新的覆盖旧的
-        // 新的数据中一般不会携带 params 和 query, 所以旧的参数会留存
-        return Object.assign({}, opened, find)
-      }).filter((opened, index) => valid[index] === 1)
-    },
-    /**
-     * @class opened
-     * @description 新增一个 tag (打开一个页面)
-     * @param {Object} state vuex state
-     * @param {Object} param new tag info
-     */
-    add (state, { tag, params, query }) {
-      // 设置新的 tag 在新打开一个以前没打开过的页面时使用
-      let newTag = tag
-      newTag.params = params || newTag.params
-      newTag.query = query || newTag.query
-      // 添加进当前显示的页面数组
-      state.opened.push(newTag)
-      // 持久化
-      this.commit('d2admin/page/opend2db')
-    },
-    /**
-     * @class opened
-     * @description 关闭一个 tag (关闭一个页面)
-     * @param {Object} state vuex state
-     * @param {Object} param { tagName: 要关闭的标签名字, vm: vue }
-     */
-    close (state, { tagName, vm }) {
-      // 下个新的页面
-      let newPage = state.opened[0]
-      const isCurrent = state.current === tagName
-      // 如果关闭的页面就是当前显示的页面
-      if (isCurrent) {
-        // 去找一个新的页面
-        let len = state.opened.length
-        for (let i = 1; i < len; i++) {
-          if (state.opened[i].name === tagName) {
-            if (i < len - 1) {
-              newPage = state.opened[i + 1]
-            } else {
-              newPage = state.opened[i - 1]
-            }
-            break
-          }
-        }
-      }
-      // 找到这个页面在已经打开的数据里是第几个
-      const index = state.opened.findIndex(page => page.name === tagName)
-      if (index >= 0) {
-        state.opened.splice(index, 1)
-      }
-      // 持久化
-      this.commit('d2admin/page/opend2db')
-      // 最后需要判断是否需要跳到首页
-      if (isCurrent) {
-        const { name = '', params = {}, query = {} } = newPage
-        let routerObj = {
-          name,
-          params,
-          query
-        }
-        vm.$router.push(routerObj)
-      }
-    },
-    /**
-     * @class opened
-     * @description 关闭当前标签左边的标签
-     * @param {Object} state vuex state
-     * @param {Object} param { pageSelect: 当前选中的tagName, vm: vue }
-     */
-    closeLeft (state, { pageSelect, vm } = {}) {
-      const pageAim = pageSelect || state.current
-      let currentIndex = 0
-      state.opened.forEach((page, index) => {
-        if (page.name === pageAim) {
-          currentIndex = index
-        }
-      })
-      if (currentIndex > 0) {
-        state.opened.splice(1, currentIndex - 1)
-      }
-      state.current = pageAim
-      if (vm && vm.$route.name !== pageAim) {
-        vm.$router.push({
-          name: pageAim
-        })
-      }
-      // 持久化
-      this.commit('d2admin/page/opend2db')
-    },
-    /**
-     * @class opened
-     * @description 关闭当前标签右边的标签
-     * @param {Object} state vuex state
-     * @param {Object} param { pageSelect: 当前选中的tagName, vm: vue }
-     */
-    closeRight (state, { pageSelect, vm } = {}) {
-      const pageAim = pageSelect || state.current
-      let currentIndex = 0
-      state.opened.forEach((page, index) => {
-        if (page.name === pageAim) {
-          currentIndex = index
-        }
-      })
-      state.opened.splice(currentIndex + 1)
-      state.current = pageAim
-      if (vm && vm.$route.name !== pageAim) {
-        vm.$router.push({
-          name: pageAim
-        })
-      }
-      // 持久化
-      this.commit('d2admin/page/opend2db')
-    },
-    /**
-     * @class opened
-     * @description 关闭当前激活之外的 tag
-     * @param {Object} state vuex state
-     * @param {Object} param { pageSelect: 当前选中的tagName, vm: vue }
-     */
-    closeOther (state, { pageSelect, vm } = {}) {
-      const pageAim = pageSelect || state.current
-      let currentIndex = 0
-      state.opened.forEach((page, index) => {
-        if (page.name === pageAim) {
-          currentIndex = index
-        }
-      })
-      if (currentIndex === 0) {
-        state.opened.splice(1)
-      } else {
-        state.opened.splice(currentIndex + 1)
-        state.opened.splice(1, currentIndex - 1)
-      }
-      state.current = pageAim
-      if (vm && vm.$route.name !== pageAim) {
-        vm.$router.push({
-          name: pageAim
-        })
-      }
-      // 持久化
-      this.commit('d2admin/page/opend2db')
-    },
-    /**
-     * @class opened
-     * @description 关闭所有 tag
-     * @param {Object} state vuex state
-     * @param {Object} vm vue
-     */
-    closeAll (state, vm) {
-      state.opened.splice(1)
-      // 持久化
-      this.commit('d2admin/page/opend2db')
-      // 关闭所有的标签页后需要判断一次现在是不是在首页
-      if (vm.$route.name !== 'index') {
-        vm.$router.push({
-          name: 'index'
-        })
-      }
-    },
-    /**
-     * @class pool
-     * @description 保存 pool (候选池)
-     * @param {Object} state vuex state
-     * @param {Array} routes routes
-     */
-    init (state, routes) {
-      const pool = []
-      const push = function (routes) {
-        routes.forEach(route => {
-          if (route.children) {
-            push(route.children)
-          } else {
-            const { meta, name, path } = route
-            pool.push({ meta, name, path })
-          }
-        })
-      }
-      push(routes)
-      state.pool = pool
-    }
-  }
-}

src/store/modules/d2admin/modules/page.js.REMOVED.git-id

@@ -0,0 +1 @@
+9abf067fc9ee38d5c28f4b1450b9df450c2583bc