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
2018-08-10 13:49:54 +08:00
parent 0453ab7f36
commit 551aa111a1
10 changed files with 424 additions and 32 deletions
--- a/src/layout/header-aside/components/tabs/index.vue
+++ b/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', [
-      'pageOpenedList',
-      'pageCurrent'
+    ...mapState('d2admin/page', [
+      'opened',
+      'current'
    ])
  },
  methods: {
-    ...mapMutations('d2admin', [
-      'tagCloseLeft',
-      'tagCloseRight',
-      'tagCloseOther',
-      'tagCloseAll'
+    ...mapMutations('d2admin/page', [
+      'close',
+      'closeLeft',
+      'closeRight',
+      '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
        })
--- a/src/layout/header-aside/layout.vue
+++ b/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'
    }),
    /**
--- a/src/libs/db.js
+++ b/src/libs/db.js
@@ -11,7 +11,7 @@ db.defaults({
  sys: {},
  db: {},
  // 旧
-  pageOpenedList: [],
+  opened: [],
  database: [],
  databasePublic: {}
 }).write()
--- a/src/main.js
+++ b/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')
--- a/src/pages/demo/playground/store/sys/index.vue
+++ b/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"
-                :options="{ rootObjectKey: 'pageOpenedList', maxDepth: 1 }"/>
+                :data="pageopened"
+                :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'
    })
  }
--- a/src/router/index.js
+++ b/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)
 })
--- a/src/store/modules/d2admin/index.js
+++ b/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)
+    }
+  }
+}
--- a/src/store/modules/d2admin/index.js.REMOVED.git-id
+++ b/src/store/modules/d2admin/index.js.REMOVED.git-id
@@ -1 +0,0 @@
-03c3404e1d1584485b9a7b73671b1dd1d17a0e14
--- a/src/store/modules/d2admin/modules/account.js
+++ b/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')
    }
--- a/src/store/modules/d2admin/modules/page.js
+++ b/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
+    }
+  }
+}