page

Former-commit-id: 1801c7a5909d5415b360a996d4ecab23280b1076 [formerly 1801c7a5909d5415b360a996d4ecab23280b1076 [formerly 1801c7a5909d5415b360a996d4ecab23280b1076 [formerly 1801c7a5909d5415b360a996d4ecab23280b1076 [formerly 209999b1c78ca63880406cb2b633c3560aae0eba [formerly 54edc3b4bd966e2496564198d59ff84fe9ba0b25]]]]]
Former-commit-id: ad91a7092b963def0579ecc2011e578e87a8ecd5
Former-commit-id: fb96644ac016362df708618fafef872b7bc2567c
Former-commit-id: 257c0b84b8069b3ccb8ddc53e965a974fca01189 [formerly 6954456a39b73136a14f80b0747aea90a694c9a5]
Former-commit-id: 99c7481e576afeac70fff4effa7e57f6b17cb79d
Former-commit-id: cfddcdd7f760c61e4abe02159a75d484ad6c6e63
Former-commit-id: 06d4e8cf94bd8c24fa167d77f843c93541afb5e6
Former-commit-id: ef6879d28d953c827184c4d5caa6c7fef6b2326f
Former-commit-id: 1f1114b417621402ec7d9d3540b305563fb140ec

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

@@ -12,14 +12,14 @@
         </d2-contextmenu>
         <el-tabs
           class="d2-multiple-page-control"
-          :value="pageCurrent"
+          :value="current"
           type="card"
           :closable="true"
           @tab-click="handleClick"
           @edit="handleTabsEdit"
           @contextmenu.native="handleContextmenu">
           <el-tab-pane
-            v-for="(page, index) in pageOpenedList"
+            v-for="(page, index) in opened"
             :key="index"
             :label="page.meta.title || '未命名'"
             :name="page.name"/>
@@ -82,17 +82,18 @@ export default {
     }
   },
   computed: {
-    ...mapState('d2admin', [
+    ...mapState('d2admin/page', [
-      'pageOpenedList',
+      'opened',
-      'pageCurrent'
+      'current'
     ])
   },
   methods: {
-    ...mapMutations('d2admin', [
+    ...mapMutations('d2admin/page', [
-      'tagCloseLeft',
+      'close',
-      'tagCloseRight',
+      'closeLeft',
-      'tagCloseOther',
+      'closeRight',
-      'tagCloseAll'
+      'closeOther',
+      'closeAll'
     ]),
     /**
      * @description 右键菜单功能点击
@@ -136,16 +137,16 @@ export default {
       }
       switch (command) {
         case 'left':
-          this.tagCloseLeft(params)
+          this.closeLeft(params)
           break
         case 'right':
-          this.tagCloseRight(params)
+          this.closeRight(params)
           break
         case 'other':
-          this.tagCloseOther(params)
+          this.closeOther(params)
           break
         case 'all':
-          this.tagCloseAll(this)
+          this.closeAll(this)
           break
         default:
           this.$message.error('无效的操作')
@@ -156,14 +157,14 @@ export default {
      * @description 接收点击关闭控制上按钮的事件
      */
     handleControlBtnClick () {
-      this.tagCloseAll(this)
+      this.closeAll(this)
     },
     /**
      * @description 接收点击 tab 标签的事件
      */
     handleClick (tab, event) {
       // 找到点击的页面在 tag 列表里是哪个
-      const page = this.pageOpenedList.find(page => page.name === tab.name)
+      const page = this.opened.find(page => page.name === tab.name)
       const { name, params, query } = page
       if (page) {
         this.$router.push({ name, params, query })
@@ -174,7 +175,7 @@ export default {
      */
     handleTabsEdit (tagName, action) {
       if (action === 'remove') {
-        this.$store.commit('d2admin/tagClose', {
+        this.close({
           tagName,
           vm: this
         })

src/layout/header-aside/layout.vue

@@ -83,7 +83,7 @@ export default {
       asideCollapse: state => state.menu.asideCollapse
     }),
     ...mapGetters('d2admin', {
-      keepAliveInclude: 'keepAliveInclude',
+      keepAliveInclude: 'page/keepAliveInclude',
       themeActiveSetting: 'theme/activeSetting'
     }),
     /**

src/libs/db.js

@@ -11,7 +11,7 @@ db.defaults({
   sys: {},
   db: {},
   // 旧
-  pageOpenedList: [],
+  opened: [],
   database: [],
   databasePublic: {}
 }).write()

src/main.js

@@ -102,7 +102,7 @@ new Vue({
         })
       }
       push(frameInRoutes)
-      this.$store.commit('d2admin/pagePoolSet', pool)
+      this.$store.commit('d2admin/page/poolSet', pool)
     }
   }
 }).$mount('#app')

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

@@ -100,8 +100,8 @@
             <div style="height: 300px; overflow: auto;">
               <tree-view
                 class="tree-view-small"
-                :data="pageOpenedList"
+                :data="pageopened"
-                :options="{ rootObjectKey: 'pageOpenedList', maxDepth: 1 }"/>
+                :options="{ rootObjectKey: 'pageopened', maxDepth: 1 }"/>
             </div>
           </el-card>
         </el-col>
@@ -149,15 +149,14 @@ export default {
       // 全屏
       fullscreenActive: state => state.fullscreen.active,
       // 灰度模式
-      grayActive: state => state.gray.active
+      grayActive: state => state.gray.active,
+      // tag 池
+      pagePool: state => state.page.pool,
+      pageCurrent: state => state.page.current,
+      pageopened: state => state.page.opened
     }),
-    ...mapState('d2admin', [
-      'pagePool',
-      'pageOpenedList',
-      'pageCurrent'
-    ]),
     ...mapGetters('d2admin', {
-      keepAliveInclude: 'keepAliveInclude',
+      keepAliveInclude: 'page/keepAliveInclude',
       themeActiveSetting: 'theme/activeSetting'
     })
   }

src/router/index.js

@@ -42,7 +42,7 @@ router.afterEach(to => {
   const app = router.app
   const { name, params, query } = to
   // 多页控制 打开新的页面
-  app.$store.commit('d2admin/pageOpenNew', { name, params, query })
+  app.$store.commit('d2admin/page/open', { name, params, query })
   // 更改标题
   util.title(to.meta.title)
 })

src/store/modules/d2admin/index.js

@@ -0,0 +1,99 @@
+import get from 'lodash.get'
+import set from 'lodash.set'
+import utilLib from '@/libs/util.js'
+import dbLib from '@/libs/db.js'
+
+// 模块
+
+import db from './modules/db'
+import releases from './modules/releases'
+import user from './modules/user'
+import menu from './modules/menu'
+import theme from './modules/theme'
+import log from './modules/log'
+import account from './modules/account'
+import fullscreen from './modules/fullscreen'
+import ua from './modules/ua'
+import gray from './modules/gray'
+import page from './modules/page'
+
+export default {
+  namespaced: true,
+  modules: {
+    db,
+    releases,
+    user,
+    menu,
+    theme,
+    log,
+    account,
+    fullscreen,
+    ua,
+    gray,
+    page
+  },
+  mutations: {
+    /**
+     * @class 通用工具
+     * @description 将 state 中某一项存储到数据库 如果已经有的话就更新数据 需要 uuid
+     * @param {Object} state vuex state
+     * @param {String} key key name
+     */
+    utilVuex2DbByUuid (state, key) {
+      const dbKey = key.split('.')[key.split('.').length - 1]
+      const row = dbLib.get(dbKey).find({uuid: utilLib.cookies.get('uuid')})
+      const value = get(state, key, '')
+      if (row.value()) {
+        row.assign({ value }).write()
+      } else {
+        dbLib.get(dbKey).push({
+          uuid: utilLib.cookies.get('uuid'),
+          value
+        }).write()
+      }
+    },
+    /**
+     * @class 通用工具
+     * @description 从数据库取值到 vuex 需要 uuid
+     * @param {Object} state vuex state
+     * @param {Object} param key 键名, defaultValue 取值失败默认值, handleFunction 处理函数
+     */
+    utilDb2VuexByUuid (state, { key, defaultValue, handleFunction }) {
+      const dbKey = key.split('.')[key.split('.').length - 1]
+      const row = dbLib.get(dbKey).find({uuid: utilLib.cookies.get('uuid')}).value()
+      const handle = handleFunction || (res => res)
+      set(state, key, row ? handle(row.value) : defaultValue)
+    },
+    /**
+     * @class 通用工具
+     * @description 将 state 中某一项存储到数据库 如果已经有的话就更新数据 不需要 uuid 所有用户共享
+     * @param {Object} state vuex state
+     * @param {String} key key name
+     */
+    utilVuex2Db (state, key) {
+      const dbKey = key.split('.')[key.split('.').length - 1]
+      const row = dbLib.get(dbKey).find({pub: 'pub'})
+      const value = get(state, key, '')
+      if (row.value()) {
+        row.assign({ value }).write()
+      } else {
+        dbLib.get(dbKey).push({
+          pub: 'pub',
+          value
+        }).write()
+      }
+    },
+    /**
+     * @class 通用工具
+     * @description 从数据库取值到 vuex 不需要 uuid 所有用户共享
+     * @param {Object} state vuex state
+     * @param {Object} param key 键名, defaultValue 取值失败时的默认值, handleFunction 处理函数
+     */
+    utilDb2Vuex (state, { key, defaultValue, handleFunction }) {
+      const dbKey = key.split('.')[key.split('.').length - 1]
+      const row = dbLib.get(dbKey).find({pub: 'pub'}).value()
+      const handle = handleFunction || (res => res)
+      set(state, key, row ? handle(row.value) : defaultValue)
+    }
+  }
+}

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

@@ -1 +0,0 @@
-03c3404e1d1584485b9a7b73671b1dd1d17a0e14

src/store/modules/d2admin/modules/account.js

@@ -97,7 +97,7 @@ export default {
       // DB -> store 加载主题
       this.commit('d2admin/theme/load')
       // DB -> store 数据库加载上次退出时的多页列表
-      this.commit('d2admin/pageOpenedListLoad')
+      this.commit('d2admin/page/openedLoad')
       // DB -> store 数据库加载这个用户之前设置的侧边栏折叠状态
       this.commit('d2admin/menu/asideCollapseLoad')
     }

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

@@ -0,0 +1,294 @@
+const pageOpenedDefult = {
+  name: 'index',
+  meta: {
+    title: '首页',
+    requiresAuth: false
+  }
+}
+
+export default {
+  namespaced: true,
+  state: {
+    // 可以在多页 tab 模式下显示的页面
+    pool: [],
+    // 当前显示的多页面列表
+    opened: [
+      pageOpenedDefult
+    ],
+    // 当前页面
+    current: ''
+  },
+  getters: {
+    /**
+     * @description 从当前所有打开的多标签页里返回需要缓存的页面 name
+     * @param {*} state vuex state
+     */
+    keepAliveInclude (state) {
+      return state.opened.filter(item => {
+        if (item.meta) {
+          if (item.meta.notCache) {
+            return false
+          }
+        }
+        return true
+      }).map(e => e.name)
+    }
+  },
+  mutations: {
+    /**
+     * @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/openedUpdateItem', {
+          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 } 路由信息
+     */
+    openedUpdateItem (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/utilVuex2DbByUuid', 'opened')
+    },
+    /**
+     * @class opened
+     * @description 从数据库载入分页列表
+     * @param {Object} state vuex state
+     */
+    openedLoad (state) {
+      this.commit('d2admin/utilDb2VuexByUuid', {
+        key: 'opened',
+        defaultValue: [
+          pageOpenedDefult
+        ],
+        handleFunction (res) {
+          // 在处理函数中进行数据优化 过滤掉现在已经失效的页签或者已经改变了信息的页签
+          // 以 name 字段为准
+          // 如果页面过多的话可能需要优化算法
+          // 有效列表 1, 1, 0, 1 => 有效, 有效, 失效, 有效
+          const valid = []
+          // 处理数据
+          return res.map(opened => {
+            // 忽略首页
+            if (opened.name === 'index') {
+              valid.push(1)
+              return opened
+            }
+            // 尝试在所有的支持多标签页的页面里找到 name 匹配的页面
+            const find = state.page.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/utilVuex2DbByUuid', 'opened')
+    },
+    /**
+     * @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/utilVuex2DbByUuid', 'opened')
+      // 最后需要判断是否需要跳到首页
+      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/utilVuex2DbByUuid', 'opened')
+    },
+    /**
+     * @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/utilVuex2DbByUuid', 'opened')
+    },
+    /**
+     * @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/utilVuex2DbByUuid', 'opened')
+    },
+    /**
+     * @class opened
+     * @description 关闭所有 tag
+     * @param {Object} state vuex state
+     * @param {Object} vm vue
+     */
+    closeAll (state, vm) {
+      state.opened.splice(1)
+      // 更新设置到数据库
+      this.commit('d2admin/utilVuex2DbByUuid', 'opened')
+      // 关闭所有的标签页后需要判断一次现在是不是在首页
+      if (vm.$route.name !== 'index') {
+        vm.$router.push({
+          name: 'index'
+        })
+      }
+    },
+    /**
+     * @class pool
+     * @description 保存 pool (候选池)
+     * @param {Object} state vuex state
+     * @param {Array} pool pages
+     */
+    poolSet (state, pool) {
+      state.pool = pool
+    }
+  }
+}