diff --git a/src/layout/header-aside/components/header-size/index.vue b/src/layout/header-aside/components/header-size/index.vue index b13b0783..731e5c37 100644 --- a/src/layout/header-aside/components/header-size/index.vue +++ b/src/layout/header-aside/components/header-size/index.vue @@ -4,7 +4,7 @@ - + 默认 @@ -34,21 +34,28 @@ export default { // 因为需要访问 this.$ELEMENT 所以只能在这里使用这种方式 value: { handler (val) { - this.$ELEMENT.size = 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', [ - 'set' - ]), + ...mapMutations({ + sizeSet: 'd2admin/size/set', + pageKeepAliveClean: 'd2admin/page/keepAliveClean' + }), handleChange (value) { - this.set(value) - this.$message({ - message: `设置尺寸成功 ${value}`, - type: 'success' - }) + this.sizeSet(value) }, iconName (name) { return name === this.value ? 'dot-circle-o' : 'circle-o' diff --git a/src/pages/demo/playground/store/sys/index.vue b/src/pages/demo/playground/store/sys/index.vue index e532e4bd..a4846fbb 100644 --- a/src/pages/demo/playground/store/sys/index.vue +++ b/src/pages/demo/playground/store/sys/index.vue @@ -6,18 +6,18 @@ -
+
+ :options="{ rootObjectKey: 'menuHeader', maxDepth: 1 }"/>
-
+
- + - + - + + + + + {{sizeValue}} + + @@ -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', diff --git a/src/pages/redirect/index.vue b/src/pages/redirect/index.vue new file mode 100755 index 00000000..c7aa86b8 --- /dev/null +++ b/src/pages/redirect/index.vue @@ -0,0 +1,12 @@ + diff --git a/src/router/routes.js.REMOVED.git-id b/src/router/routes.js.REMOVED.git-id index 48b10bdb..6a61f620 100644 --- a/src/router/routes.js.REMOVED.git-id +++ b/src/router/routes.js.REMOVED.git-id @@ -1 +1 @@ -e5f86ceea9da8ed5238a065835a8d86dfa3cf688 \ No newline at end of file +58069f63d26f33421df3d333c4aa58af52c87aaa \ No newline at end of file diff --git a/src/store/modules/d2admin/modules/page.js b/src/store/modules/d2admin/modules/page.js deleted file mode 100644 index c2f51013..00000000 --- a/src/store/modules/d2admin/modules/page.js +++ /dev/null @@ -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 - } - } -} diff --git a/src/store/modules/d2admin/modules/page.js.REMOVED.git-id b/src/store/modules/d2admin/modules/page.js.REMOVED.git-id new file mode 100644 index 00000000..a85c9a13 --- /dev/null +++ b/src/store/modules/d2admin/modules/page.js.REMOVED.git-id @@ -0,0 +1 @@ +9abf067fc9ee38d5c28f4b1450b9df450c2583bc \ No newline at end of file