feat: update 1.9.0
This commit is contained in:
@@ -5,6 +5,11 @@ $theme-bg-color: #ebf1f6;
|
|||||||
// 主题背景图片遮罩
|
// 主题背景图片遮罩
|
||||||
$theme-bg-mask: rgba(#000, 0);
|
$theme-bg-mask: rgba(#000, 0);
|
||||||
|
|
||||||
|
// 消息提示
|
||||||
|
$theme-message-info-background-color: $color-bg;
|
||||||
|
$theme-message-info-text-color: $color-text-normal;
|
||||||
|
$theme-message-info-border-color: $color-border-1;
|
||||||
|
|
||||||
// container组件
|
// container组件
|
||||||
$theme-container-background-color: rgba(#FFF, 1);
|
$theme-container-background-color: rgba(#FFF, 1);
|
||||||
$theme-container-header-footer-background-color: #FFF;
|
$theme-container-header-footer-background-color: #FFF;
|
||||||
|
|||||||
@@ -5,6 +5,11 @@ $theme-bg-color: #f8f8f9;
|
|||||||
// 主题背景图片遮罩
|
// 主题背景图片遮罩
|
||||||
$theme-bg-mask: rgba(#000, 0);
|
$theme-bg-mask: rgba(#000, 0);
|
||||||
|
|
||||||
|
// 消息提示
|
||||||
|
$theme-message-info-background-color: $color-bg;
|
||||||
|
$theme-message-info-text-color: $color-text-normal;
|
||||||
|
$theme-message-info-border-color: $color-border-1;
|
||||||
|
|
||||||
// container组件
|
// container组件
|
||||||
$theme-container-background-color: rgba(#FFF, .8);
|
$theme-container-background-color: rgba(#FFF, .8);
|
||||||
$theme-container-header-footer-background-color: #FFF;
|
$theme-container-header-footer-background-color: #FFF;
|
||||||
|
|||||||
@@ -5,6 +5,11 @@ $theme-bg-color: #EFF4F8;
|
|||||||
// 主题背景图片遮罩
|
// 主题背景图片遮罩
|
||||||
$theme-bg-mask: rgba(#000, .3);
|
$theme-bg-mask: rgba(#000, .3);
|
||||||
|
|
||||||
|
// 消息提示
|
||||||
|
$theme-message-info-background-color: $color-bg;
|
||||||
|
$theme-message-info-text-color: $color-text-normal;
|
||||||
|
$theme-message-info-border-color: $color-border-1;
|
||||||
|
|
||||||
// container组件
|
// container组件
|
||||||
$theme-container-background-color: rgba(#FFF, .9);
|
$theme-container-background-color: rgba(#FFF, .9);
|
||||||
$theme-container-header-footer-background-color: #FFF;
|
$theme-container-header-footer-background-color: #FFF;
|
||||||
|
|||||||
@@ -1,6 +1,14 @@
|
|||||||
// 每个主题特有的设置
|
// 每个主题特有的设置
|
||||||
.theme-#{$theme-name} {
|
.theme-#{$theme-name} {
|
||||||
|
|
||||||
|
.el-message {
|
||||||
|
&.el-message--info {
|
||||||
|
background-color: $theme-message-info-background-color;
|
||||||
|
color: $theme-message-info-text-color;
|
||||||
|
border-color: $theme-message-info-border-color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.el-card {
|
.el-card {
|
||||||
&.d2-card {
|
&.d2-card {
|
||||||
border: $theme-container-border-outer;
|
border: $theme-container-border-outer;
|
||||||
@@ -255,9 +263,6 @@
|
|||||||
&:hover {
|
&:hover {
|
||||||
padding: 0px 20px;
|
padding: 0px 20px;
|
||||||
}
|
}
|
||||||
.el-icon-close {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.el-tabs__item.is-active {
|
.el-tabs__item.is-active {
|
||||||
|
|||||||
@@ -5,6 +5,11 @@ $theme-bg-color: #002253;
|
|||||||
// 主题背景图片遮罩
|
// 主题背景图片遮罩
|
||||||
$theme-bg-mask: rgba(#000, 0);
|
$theme-bg-mask: rgba(#000, 0);
|
||||||
|
|
||||||
|
// 消息提示
|
||||||
|
$theme-message-info-background-color: $color-bg;
|
||||||
|
$theme-message-info-text-color: $color-text-normal;
|
||||||
|
$theme-message-info-border-color: $color-border-1;
|
||||||
|
|
||||||
// container组件
|
// container组件
|
||||||
$theme-container-background-color: rgba(#FFF, 1);
|
$theme-container-background-color: rgba(#FFF, 1);
|
||||||
$theme-container-header-footer-background-color: #FFF;
|
$theme-container-header-footer-background-color: #FFF;
|
||||||
|
|||||||
@@ -5,6 +5,11 @@ $theme-bg-color: #000;
|
|||||||
// 主题背景图片遮罩
|
// 主题背景图片遮罩
|
||||||
$theme-bg-mask: rgba(#000, 0);
|
$theme-bg-mask: rgba(#000, 0);
|
||||||
|
|
||||||
|
// 消息提示
|
||||||
|
$theme-message-info-background-color: $color-bg;
|
||||||
|
$theme-message-info-text-color: $color-text-normal;
|
||||||
|
$theme-message-info-border-color: $color-border-1;
|
||||||
|
|
||||||
// container组件
|
// container组件
|
||||||
$theme-container-background-color: #FFF;
|
$theme-container-background-color: #FFF;
|
||||||
$theme-container-header-footer-background-color: #FFF;
|
$theme-container-header-footer-background-color: #FFF;
|
||||||
|
|||||||
@@ -24,7 +24,7 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div v-if="resultsList.length > 0" class="panel-search__results-group" flex-box="1">
|
<div v-if="resultsList.length > 0" class="panel-search__results-group" flex-box="1">
|
||||||
<el-card>
|
<el-card shadow="never">
|
||||||
<div class="panel-search__results-group-inner">
|
<div class="panel-search__results-group-inner">
|
||||||
<d2-panel-search-item
|
<d2-panel-search-item
|
||||||
v-for="(item, index) in resultsList"
|
v-for="(item, index) in resultsList"
|
||||||
@@ -132,16 +132,15 @@ export default {
|
|||||||
/**
|
/**
|
||||||
* @description 接收用户在下拉菜单中选中事件
|
* @description 接收用户在下拉菜单中选中事件
|
||||||
*/
|
*/
|
||||||
handleSelect ({ path }) {
|
async handleSelect ({ path }) {
|
||||||
// 如果用户选择的就是当前页面 就直接关闭搜索面板
|
// 如果用户选择的就是当前页面 就直接关闭搜索面板
|
||||||
if (path === this.$route.path) {
|
if (path === this.$route.path) {
|
||||||
this.handleEsc()
|
this.handleEsc()
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
// 用户选择的是其它页面
|
// 用户选择的是其它页面
|
||||||
this.$nextTick(() => {
|
await this.$nextTick()
|
||||||
this.handleMenuSelect(path)
|
this.handleMenuSelect(path)
|
||||||
})
|
|
||||||
},
|
},
|
||||||
/**
|
/**
|
||||||
* @augments 关闭输入框的下拉菜单
|
* @augments 关闭输入框的下拉菜单
|
||||||
@@ -161,11 +160,10 @@ export default {
|
|||||||
/**
|
/**
|
||||||
* @augments 接收用户触发的关闭
|
* @augments 接收用户触发的关闭
|
||||||
*/
|
*/
|
||||||
handleEsc () {
|
async handleEsc () {
|
||||||
this.closeSuggestion()
|
this.closeSuggestion()
|
||||||
this.$nextTick(() => {
|
await this.$nextTick()
|
||||||
this.$emit('close')
|
this.$emit('close')
|
||||||
})
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -2,23 +2,36 @@
|
|||||||
<div class="d2-multiple-page-control-group" flex>
|
<div class="d2-multiple-page-control-group" flex>
|
||||||
<div class="d2-multiple-page-control-content" flex-box="1">
|
<div class="d2-multiple-page-control-content" flex-box="1">
|
||||||
<div class="d2-multiple-page-control-content-inner">
|
<div class="d2-multiple-page-control-content-inner">
|
||||||
<d2-contextmenu :visible.sync="contextmenuFlag" :x="contentmenuX" :y="contentmenuY">
|
<d2-contextmenu
|
||||||
<d2-contextmenu-list :menulist="tagName === '/index' ? contextmenuListIndex : contextmenuList" @rowClick="contextmenuClick"/>
|
:visible.sync="contextmenuFlag"
|
||||||
|
:x="contentmenuX"
|
||||||
|
:y="contentmenuY">
|
||||||
|
<d2-contextmenu-list
|
||||||
|
:menulist="tagName === '/index' ? contextmenuListIndex : contextmenuList"
|
||||||
|
@rowClick="contextmenuClick"/>
|
||||||
</d2-contextmenu>
|
</d2-contextmenu>
|
||||||
<el-tabs
|
<el-tabs
|
||||||
class="d2-multiple-page-control d2-multiple-page-sort"
|
class="d2-multiple-page-control d2-multiple-page-sort"
|
||||||
:value="current"
|
:value="current"
|
||||||
type="card"
|
type="card"
|
||||||
:closable="true"
|
|
||||||
@tab-click="handleClick"
|
@tab-click="handleClick"
|
||||||
@edit="handleTabsEdit"
|
@tab-remove="handleTabRemove"
|
||||||
@contextmenu.native="handleContextmenu">
|
@contextmenu.native="handleContextmenu">
|
||||||
<el-tab-pane v-for="page in opened" :key="page.fullPath" :label="page.meta.title || '未命名'" :name="page.fullPath"/>
|
<el-tab-pane
|
||||||
|
v-for="page in opened"
|
||||||
|
:key="page.fullPath"
|
||||||
|
:label="page.meta.title || '未命名'"
|
||||||
|
:name="page.fullPath"
|
||||||
|
:closable="isTabClosable(page)"/>
|
||||||
</el-tabs>
|
</el-tabs>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="d2-multiple-page-control-btn" flex-box="0">
|
<div class="d2-multiple-page-control-btn" flex-box="0">
|
||||||
<el-dropdown size="default" split-button @click="closeAll" @command="command => handleControlItemClick(command)">
|
<el-dropdown
|
||||||
|
size="default"
|
||||||
|
split-button
|
||||||
|
@click="closeAll"
|
||||||
|
@command="command => handleControlItemClick(command)">
|
||||||
<d2-icon name="times-circle"/>
|
<d2-icon name="times-circle"/>
|
||||||
<el-dropdown-menu slot="dropdown">
|
<el-dropdown-menu slot="dropdown">
|
||||||
<el-dropdown-item command="left">
|
<el-dropdown-item command="left">
|
||||||
@@ -46,6 +59,7 @@
|
|||||||
<script>
|
<script>
|
||||||
import { mapState, mapActions } from 'vuex'
|
import { mapState, mapActions } from 'vuex'
|
||||||
import Sortable from 'sortablejs'
|
import Sortable from 'sortablejs'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
components: {
|
components: {
|
||||||
D2Contextmenu: () => import('../contextmenu'),
|
D2Contextmenu: () => import('../contextmenu'),
|
||||||
@@ -83,12 +97,20 @@ export default {
|
|||||||
'closeAll',
|
'closeAll',
|
||||||
'openedSort'
|
'openedSort'
|
||||||
]),
|
]),
|
||||||
|
/**
|
||||||
|
* @description 计算某个标签页是否可关闭
|
||||||
|
* @param {Object} page 其中一个标签页
|
||||||
|
*/
|
||||||
|
isTabClosable (page) {
|
||||||
|
return page.name !== 'index'
|
||||||
|
},
|
||||||
/**
|
/**
|
||||||
* @description 右键菜单功能点击
|
* @description 右键菜单功能点击
|
||||||
|
* @param {Object} event 事件
|
||||||
*/
|
*/
|
||||||
handleContextmenu (event) {
|
handleContextmenu (event) {
|
||||||
let target = event.target
|
let target = event.target
|
||||||
// 解决 https://github.com/d2-projects/d2-admin/issues/54
|
// fix https://github.com/d2-projects/d2-admin/issues/54
|
||||||
let flag = false
|
let flag = false
|
||||||
if (target.className.indexOf('el-tabs__item') > -1) flag = true
|
if (target.className.indexOf('el-tabs__item') > -1) flag = true
|
||||||
else if (target.parentNode.className.indexOf('el-tabs__item') > -1) {
|
else if (target.parentNode.className.indexOf('el-tabs__item') > -1) {
|
||||||
@@ -105,59 +127,45 @@ export default {
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
/**
|
/**
|
||||||
* @description 右键菜单的row-click事件
|
* @description 右键菜单的 row-click 事件
|
||||||
|
* @param {String} command 事件类型
|
||||||
*/
|
*/
|
||||||
contextmenuClick (command) {
|
contextmenuClick (command) {
|
||||||
this.handleControlItemClick(command, this.tagName)
|
this.handleControlItemClick(command, this.tagName)
|
||||||
},
|
},
|
||||||
/**
|
/**
|
||||||
* @description 接收点击关闭控制上选项的事件
|
* @description 接收点击关闭控制上选项的事件
|
||||||
|
* @param {String} command 事件类型
|
||||||
|
* @param {String} tagName tab 名称
|
||||||
*/
|
*/
|
||||||
handleControlItemClick (command, tagName = null) {
|
handleControlItemClick (command, tagName = null) {
|
||||||
if (tagName) {
|
if (tagName) this.contextmenuFlag = false
|
||||||
this.contextmenuFlag = false
|
const params = { pageSelect: tagName }
|
||||||
}
|
|
||||||
const params = {
|
|
||||||
pageSelect: tagName
|
|
||||||
}
|
|
||||||
switch (command) {
|
switch (command) {
|
||||||
case 'left':
|
case 'left': this.closeLeft(params); break
|
||||||
this.closeLeft(params)
|
case 'right': this.closeRight(params); break
|
||||||
break
|
case 'other': this.closeOther(params); break
|
||||||
case 'right':
|
case 'all': this.closeAll(); break
|
||||||
this.closeRight(params)
|
default: this.$message.error('无效的操作'); break
|
||||||
break
|
|
||||||
case 'other':
|
|
||||||
this.closeOther(params)
|
|
||||||
break
|
|
||||||
case 'all':
|
|
||||||
this.closeAll()
|
|
||||||
break
|
|
||||||
default:
|
|
||||||
this.$message.error('无效的操作')
|
|
||||||
break
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
/**
|
/**
|
||||||
* @description 接收点击 tab 标签的事件
|
* @description 接收点击 tab 标签的事件
|
||||||
|
* @param {object} tab 标签
|
||||||
|
* @param {object} event 事件
|
||||||
*/
|
*/
|
||||||
handleClick (tab, event) {
|
handleClick (tab, event) {
|
||||||
// 找到点击的页面在 tag 列表里是哪个
|
// 找到点击的页面在 tag 列表里是哪个
|
||||||
const page = this.opened.find(page => page.fullPath === tab.name)
|
const page = this.opened.find(page => page.fullPath === tab.name)
|
||||||
const { name, params, query } = page
|
const { name, params, query } = page
|
||||||
if (page) {
|
if (page) this.$router.push({ name, params, query })
|
||||||
this.$router.push({ name, params, query })
|
|
||||||
}
|
|
||||||
},
|
},
|
||||||
/**
|
/**
|
||||||
* @description 点击 tab 上的删除按钮触发这里 首页的删除按钮已经隐藏 因此这里不用判断是 index
|
* @description 点击 tab 上的删除按钮触发这里
|
||||||
|
* @param {String} tagName tab 名称
|
||||||
*/
|
*/
|
||||||
handleTabsEdit (tagName, action) {
|
handleTabRemove (tagName) {
|
||||||
if (action === 'remove') {
|
this.close({ tagName })
|
||||||
this.close({
|
|
||||||
tagName
|
|
||||||
})
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
mounted () {
|
mounted () {
|
||||||
|
|||||||
@@ -1,4 +1,4 @@
|
|||||||
import { get } from 'lodash'
|
import { cloneDeep, uniq, get } from 'lodash'
|
||||||
import router from '@/router'
|
import router from '@/router'
|
||||||
import setting from '@/setting.js'
|
import setting from '@/setting.js'
|
||||||
|
|
||||||
@@ -11,7 +11,7 @@ export default {
|
|||||||
// 可以在多页 tab 模式下显示的页面
|
// 可以在多页 tab 模式下显示的页面
|
||||||
pool: [],
|
pool: [],
|
||||||
// 当前显示的多页面列表
|
// 当前显示的多页面列表
|
||||||
opened: setting.page.opened,
|
opened: get(setting, 'page.opened', []),
|
||||||
// 已经加载多标签页数据 https://github.com/d2-projects/d2-admin/issues/201
|
// 已经加载多标签页数据 https://github.com/d2-projects/d2-admin/issues/201
|
||||||
openedLoaded: false,
|
openedLoaded: false,
|
||||||
// 当前页面
|
// 当前页面
|
||||||
@@ -28,9 +28,7 @@ export default {
|
|||||||
if (state.openedLoaded) return Promise.resolve()
|
if (state.openedLoaded) return Promise.resolve()
|
||||||
return new Promise(resolve => {
|
return new Promise(resolve => {
|
||||||
const timer = setInterval(() => {
|
const timer = setInterval(() => {
|
||||||
if (state.openedLoaded) {
|
if (state.openedLoaded) resolve(clearInterval(timer))
|
||||||
resolve(clearInterval(timer))
|
|
||||||
}
|
|
||||||
}, 10)
|
}, 10)
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
@@ -39,22 +37,22 @@ export default {
|
|||||||
* @description 从持久化数据载入标签页列表
|
* @description 从持久化数据载入标签页列表
|
||||||
* @param {Object} context
|
* @param {Object} context
|
||||||
*/
|
*/
|
||||||
openedLoad ({ state, commit, dispatch }) {
|
async openedLoad ({ state, commit, dispatch }) {
|
||||||
return new Promise(async resolve => {
|
// store 赋值
|
||||||
// store 赋值
|
const value = await dispatch('d2admin/db/get', {
|
||||||
const value = await dispatch('d2admin/db/get', {
|
dbName: 'sys',
|
||||||
dbName: 'sys',
|
path: 'page.opened',
|
||||||
path: 'page.opened',
|
defaultValue: setting.page.opened,
|
||||||
defaultValue: setting.page.opened,
|
user: true
|
||||||
user: true
|
}, { root: true })
|
||||||
}, { root: true })
|
// 在处理函数中进行数据优化 过滤掉现在已经失效的页签或者已经改变了信息的页签
|
||||||
// 在处理函数中进行数据优化 过滤掉现在已经失效的页签或者已经改变了信息的页签
|
// 以 fullPath 字段为准
|
||||||
// 以 fullPath 字段为准
|
// 如果页面过多的话可能需要优化算法
|
||||||
// 如果页面过多的话可能需要优化算法
|
// valid 有效列表 1, 1, 0, 1 => 有效, 有效, 失效, 有效
|
||||||
// valid 有效列表 1, 1, 0, 1 => 有效, 有效, 失效, 有效
|
const valid = []
|
||||||
const valid = []
|
// 处理数据
|
||||||
// 处理数据
|
state.opened = value
|
||||||
state.opened = value.map(opened => {
|
.map(opened => {
|
||||||
// 忽略首页
|
// 忽略首页
|
||||||
if (opened.fullPath === '/index') {
|
if (opened.fullPath === '/index') {
|
||||||
valid.push(1)
|
valid.push(1)
|
||||||
@@ -67,31 +65,25 @@ export default {
|
|||||||
// 返回合并后的数据 新的覆盖旧的
|
// 返回合并后的数据 新的覆盖旧的
|
||||||
// 新的数据中一般不会携带 params 和 query, 所以旧的参数会留存
|
// 新的数据中一般不会携带 params 和 query, 所以旧的参数会留存
|
||||||
return Object.assign({}, opened, find)
|
return Object.assign({}, opened, find)
|
||||||
}).filter((opened, index) => valid[index] === 1)
|
})
|
||||||
// 标记已经加载多标签页数据 https://github.com/d2-projects/d2-admin/issues/201
|
.filter((opened, index) => valid[index] === 1)
|
||||||
state.openedLoaded = true
|
// 标记已经加载多标签页数据 https://github.com/d2-projects/d2-admin/issues/201
|
||||||
// 根据 opened 数据生成缓存设置
|
state.openedLoaded = true
|
||||||
commit('keepAliveRefresh')
|
// 根据 opened 数据生成缓存设置
|
||||||
// end
|
commit('keepAliveRefresh')
|
||||||
resolve()
|
|
||||||
})
|
|
||||||
},
|
},
|
||||||
/**
|
/**
|
||||||
* 将 opened 属性赋值并持久化 在这之前请先确保已经更新了 state.opened
|
* 将 opened 属性赋值并持久化 在这之前请先确保已经更新了 state.opened
|
||||||
* @param {Object} context
|
* @param {Object} context
|
||||||
*/
|
*/
|
||||||
opened2db ({ state, dispatch }) {
|
async opened2db ({ state, dispatch }) {
|
||||||
return new Promise(async resolve => {
|
// 设置数据
|
||||||
// 设置数据
|
dispatch('d2admin/db/set', {
|
||||||
dispatch('d2admin/db/set', {
|
dbName: 'sys',
|
||||||
dbName: 'sys',
|
path: 'page.opened',
|
||||||
path: 'page.opened',
|
value: state.opened,
|
||||||
value: state.opened,
|
user: true
|
||||||
user: true
|
}, { root: true })
|
||||||
}, { root: true })
|
|
||||||
// end
|
|
||||||
resolve()
|
|
||||||
})
|
|
||||||
},
|
},
|
||||||
/**
|
/**
|
||||||
* @class opened
|
* @class opened
|
||||||
@@ -99,19 +91,15 @@ export default {
|
|||||||
* @param {Object} context
|
* @param {Object} context
|
||||||
* @param {Object} payload { index, params, query, fullPath } 路由信息
|
* @param {Object} payload { index, params, query, fullPath } 路由信息
|
||||||
*/
|
*/
|
||||||
openedUpdate ({ state, commit, dispatch }, { index, params, query, fullPath }) {
|
async openedUpdate ({ state, commit, dispatch }, { index, params, query, fullPath }) {
|
||||||
return new Promise(async resolve => {
|
// 更新页面列表某一项
|
||||||
// 更新页面列表某一项
|
let page = state.opened[index]
|
||||||
let page = state.opened[index]
|
page.params = params || page.params
|
||||||
page.params = params || page.params
|
page.query = query || page.query
|
||||||
page.query = query || page.query
|
page.fullPath = fullPath || page.fullPath
|
||||||
page.fullPath = fullPath || page.fullPath
|
state.opened.splice(index, 1, page)
|
||||||
state.opened.splice(index, 1, page)
|
// 持久化
|
||||||
// 持久化
|
await dispatch('opened2db')
|
||||||
await dispatch('opened2db')
|
|
||||||
// end
|
|
||||||
resolve()
|
|
||||||
})
|
|
||||||
},
|
},
|
||||||
/**
|
/**
|
||||||
* @class opened
|
* @class opened
|
||||||
@@ -119,17 +107,13 @@ export default {
|
|||||||
* @param {Object} context
|
* @param {Object} context
|
||||||
* @param {Object} payload { oldIndex, newIndex } 位置信息
|
* @param {Object} payload { oldIndex, newIndex } 位置信息
|
||||||
*/
|
*/
|
||||||
openedSort ({ state, commit, dispatch }, { oldIndex, newIndex }) {
|
async openedSort ({ state, commit, dispatch }, { oldIndex, newIndex }) {
|
||||||
return new Promise(async resolve => {
|
// 重排页面列表某一项
|
||||||
// 重排页面列表某一项
|
let page = state.opened[oldIndex]
|
||||||
let page = state.opened[oldIndex]
|
state.opened.splice(oldIndex, 1)
|
||||||
state.opened.splice(oldIndex, 1)
|
state.opened.splice(newIndex, 0, page)
|
||||||
state.opened.splice(newIndex, 0, page)
|
// 持久化
|
||||||
// 持久化
|
await dispatch('opened2db')
|
||||||
await dispatch('opened2db')
|
|
||||||
// end
|
|
||||||
resolve()
|
|
||||||
})
|
|
||||||
},
|
},
|
||||||
/**
|
/**
|
||||||
* @class opened
|
* @class opened
|
||||||
@@ -137,67 +121,60 @@ export default {
|
|||||||
* @param {Object} context
|
* @param {Object} context
|
||||||
* @param {Object} payload new tag info
|
* @param {Object} payload new tag info
|
||||||
*/
|
*/
|
||||||
add ({ state, commit, dispatch }, { tag, params, query, fullPath }) {
|
async add ({ state, commit, dispatch }, { tag, params, query, fullPath }) {
|
||||||
return new Promise(async resolve => {
|
// 设置新的 tag 在新打开一个以前没打开过的页面时使用
|
||||||
// 设置新的 tag 在新打开一个以前没打开过的页面时使用
|
let newTag = tag
|
||||||
let newTag = tag
|
newTag.params = params || newTag.params
|
||||||
newTag.params = params || newTag.params
|
newTag.query = query || newTag.query
|
||||||
newTag.query = query || newTag.query
|
newTag.fullPath = fullPath || newTag.fullPath
|
||||||
newTag.fullPath = fullPath || newTag.fullPath
|
// 添加进当前显示的页面数组
|
||||||
// 添加进当前显示的页面数组
|
state.opened.push(newTag)
|
||||||
state.opened.push(newTag)
|
// 如果这个页面需要缓存 将其添加到缓存设置
|
||||||
// 如果这个页面需要缓存 将其添加到缓存设置
|
if (isKeepAlive(newTag)) commit('keepAlivePush', tag.name)
|
||||||
if (isKeepAlive(newTag)) {
|
// 持久化
|
||||||
commit('keepAlivePush', tag.name)
|
await dispatch('opened2db')
|
||||||
}
|
|
||||||
// 持久化
|
|
||||||
await dispatch('opened2db')
|
|
||||||
// end
|
|
||||||
resolve()
|
|
||||||
})
|
|
||||||
},
|
},
|
||||||
/**
|
/**
|
||||||
* @class current
|
* @class current
|
||||||
* @description 打开一个新的页面
|
* @description 打开一个新的页面
|
||||||
* @param {Object} context
|
* @param {Object} context
|
||||||
* @param {Object} payload 从路由钩子的 to 对象上获取 { name, params, query, fullPath } 路由信息
|
* @param {Object} payload 从路由钩子的 to 对象上获取 { name, params, query, fullPath, meta } 路由信息
|
||||||
*/
|
*/
|
||||||
open ({ state, commit, dispatch }, { name, params, query, fullPath }) {
|
async open ({ state, commit, dispatch }, { name, params, query, fullPath, meta }) {
|
||||||
return new Promise(async resolve => {
|
// 已经打开的页面
|
||||||
// 已经打开的页面
|
let opened = state.opened
|
||||||
let opened = state.opened
|
// 判断此页面是否已经打开 并且记录位置
|
||||||
// 判断此页面是否已经打开 并且记录位置
|
let pageOpendIndex = 0
|
||||||
let pageOpendIndex = 0
|
const pageOpend = opened.find((page, index) => {
|
||||||
const pageOpend = opened.find((page, index) => {
|
const same = page.fullPath === fullPath
|
||||||
const same = page.fullPath === fullPath
|
pageOpendIndex = same ? index : pageOpendIndex
|
||||||
pageOpendIndex = same ? index : pageOpendIndex
|
return same
|
||||||
return same
|
})
|
||||||
|
if (pageOpend) {
|
||||||
|
// 页面以前打开过
|
||||||
|
await dispatch('openedUpdate', {
|
||||||
|
index: pageOpendIndex,
|
||||||
|
params,
|
||||||
|
query,
|
||||||
|
fullPath
|
||||||
})
|
})
|
||||||
if (pageOpend) {
|
} else {
|
||||||
// 页面以前打开过
|
// 页面以前没有打开过
|
||||||
await dispatch('openedUpdate', {
|
let page = state.pool.find(t => t.name === name)
|
||||||
index: pageOpendIndex,
|
// 如果这里没有找到 page 代表这个路由虽然在框架内 但是不参与标签页显示
|
||||||
|
if (page) {
|
||||||
|
await dispatch('add', {
|
||||||
|
tag: Object.assign({}, page),
|
||||||
params,
|
params,
|
||||||
query,
|
query,
|
||||||
fullPath
|
fullPath
|
||||||
})
|
})
|
||||||
} else {
|
|
||||||
// 页面以前没有打开过
|
|
||||||
let page = state.pool.find(t => t.name === name)
|
|
||||||
// 如果这里没有找到 page 代表这个路由虽然在框架内 但是不参与标签页显示
|
|
||||||
if (page) {
|
|
||||||
await dispatch('add', {
|
|
||||||
tag: Object.assign({}, page),
|
|
||||||
params,
|
|
||||||
query,
|
|
||||||
fullPath
|
|
||||||
})
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
commit('currentSet', fullPath)
|
}
|
||||||
// end
|
// 如果这个页面需要缓存 将其添加到缓存设置
|
||||||
resolve()
|
if (isKeepAlive({ meta })) commit('keepAlivePush', name)
|
||||||
})
|
// 设置当前的页面
|
||||||
|
commit('currentSet', fullPath)
|
||||||
},
|
},
|
||||||
/**
|
/**
|
||||||
* @class opened
|
* @class opened
|
||||||
@@ -205,49 +182,42 @@ export default {
|
|||||||
* @param {Object} context
|
* @param {Object} context
|
||||||
* @param {Object} payload { tagName: 要关闭的标签名字 }
|
* @param {Object} payload { tagName: 要关闭的标签名字 }
|
||||||
*/
|
*/
|
||||||
close ({ state, commit, dispatch }, { tagName }) {
|
async close ({ state, commit, dispatch }, { tagName }) {
|
||||||
return new Promise(async resolve => {
|
// 下个新的页面
|
||||||
// 下个新的页面
|
let newPage = state.opened[0]
|
||||||
let newPage = state.opened[0]
|
const isCurrent = state.current === tagName
|
||||||
const isCurrent = state.current === tagName
|
// 如果关闭的页面就是当前显示的页面
|
||||||
// 如果关闭的页面就是当前显示的页面
|
if (isCurrent) {
|
||||||
if (isCurrent) {
|
// 去找一个新的页面
|
||||||
// 去找一个新的页面
|
let len = state.opened.length
|
||||||
let len = state.opened.length
|
for (let i = 1; i < len; i++) {
|
||||||
for (let i = 1; i < len; i++) {
|
if (state.opened[i].fullPath === tagName) {
|
||||||
if (state.opened[i].fullPath === tagName) {
|
if (i < len - 1) newPage = state.opened[i + 1]
|
||||||
if (i < len - 1) {
|
else newPage = state.opened[i - 1]
|
||||||
newPage = state.opened[i + 1]
|
break
|
||||||
} else {
|
|
||||||
newPage = state.opened[i - 1]
|
|
||||||
}
|
|
||||||
break
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
// 找到这个页面在已经打开的数据里是第几个
|
}
|
||||||
const index = state.opened.findIndex(page => page.fullPath === tagName)
|
// 找到这个页面在已经打开的数据里是第几个
|
||||||
if (index >= 0) {
|
const index = state.opened.findIndex(page => page.fullPath === tagName)
|
||||||
// 如果这个页面是缓存的页面 将其在缓存设置中删除
|
if (index >= 0) {
|
||||||
commit('keepAliveRemove', state.opened[index].name)
|
// 如果这个页面是缓存的页面 将其在缓存设置中删除
|
||||||
// 更新数据 删除关闭的页面
|
commit('keepAliveRemove', state.opened[index].name)
|
||||||
state.opened.splice(index, 1)
|
// 更新数据 删除关闭的页面
|
||||||
|
state.opened.splice(index, 1)
|
||||||
|
}
|
||||||
|
// 持久化
|
||||||
|
await dispatch('opened2db')
|
||||||
|
// 最后需要判断是否需要跳到首页
|
||||||
|
if (isCurrent) {
|
||||||
|
const { name = '', params = {}, query = {} } = newPage
|
||||||
|
let routerObj = {
|
||||||
|
name,
|
||||||
|
params,
|
||||||
|
query
|
||||||
}
|
}
|
||||||
// 持久化
|
router.push(routerObj)
|
||||||
await dispatch('opened2db')
|
}
|
||||||
// 最后需要判断是否需要跳到首页
|
|
||||||
if (isCurrent) {
|
|
||||||
const { name = '', params = {}, query = {} } = newPage
|
|
||||||
let routerObj = {
|
|
||||||
name,
|
|
||||||
params,
|
|
||||||
query
|
|
||||||
}
|
|
||||||
router.push(routerObj)
|
|
||||||
}
|
|
||||||
// end
|
|
||||||
resolve()
|
|
||||||
})
|
|
||||||
},
|
},
|
||||||
/**
|
/**
|
||||||
* @class opened
|
* @class opened
|
||||||
@@ -255,28 +225,20 @@ export default {
|
|||||||
* @param {Object} context
|
* @param {Object} context
|
||||||
* @param {Object} payload { pageSelect: 当前选中的tagName }
|
* @param {Object} payload { pageSelect: 当前选中的tagName }
|
||||||
*/
|
*/
|
||||||
closeLeft ({ state, commit, dispatch }, { pageSelect } = {}) {
|
async closeLeft ({ state, commit, dispatch }, { pageSelect } = {}) {
|
||||||
return new Promise(async resolve => {
|
const pageAim = pageSelect || state.current
|
||||||
const pageAim = pageSelect || state.current
|
let currentIndex = 0
|
||||||
let currentIndex = 0
|
state.opened.forEach((page, index) => {
|
||||||
state.opened.forEach((page, index) => {
|
if (page.fullPath === pageAim) currentIndex = index
|
||||||
if (page.fullPath === pageAim) {
|
|
||||||
currentIndex = index
|
|
||||||
}
|
|
||||||
})
|
|
||||||
if (currentIndex > 0) {
|
|
||||||
// 删除打开的页面 并在缓存设置中删除
|
|
||||||
state.opened.splice(1, currentIndex - 1).forEach(({ name }) => commit('keepAliveRemove', name))
|
|
||||||
}
|
|
||||||
state.current = pageAim
|
|
||||||
if (router.app.$route.fullPath !== pageAim) {
|
|
||||||
router.push(pageAim)
|
|
||||||
}
|
|
||||||
// 持久化
|
|
||||||
await dispatch('opened2db')
|
|
||||||
// end
|
|
||||||
resolve()
|
|
||||||
})
|
})
|
||||||
|
if (currentIndex > 0) {
|
||||||
|
// 删除打开的页面 并在缓存设置中删除
|
||||||
|
state.opened.splice(1, currentIndex - 1).forEach(({ name }) => commit('keepAliveRemove', name))
|
||||||
|
}
|
||||||
|
state.current = pageAim
|
||||||
|
if (router.app.$route.fullPath !== pageAim) router.push(pageAim)
|
||||||
|
// 持久化
|
||||||
|
await dispatch('opened2db')
|
||||||
},
|
},
|
||||||
/**
|
/**
|
||||||
* @class opened
|
* @class opened
|
||||||
@@ -284,27 +246,19 @@ export default {
|
|||||||
* @param {Object} context
|
* @param {Object} context
|
||||||
* @param {Object} payload { pageSelect: 当前选中的tagName }
|
* @param {Object} payload { pageSelect: 当前选中的tagName }
|
||||||
*/
|
*/
|
||||||
closeRight ({ state, commit, dispatch }, { pageSelect } = {}) {
|
async closeRight ({ state, commit, dispatch }, { pageSelect } = {}) {
|
||||||
return new Promise(async resolve => {
|
const pageAim = pageSelect || state.current
|
||||||
const pageAim = pageSelect || state.current
|
let currentIndex = 0
|
||||||
let currentIndex = 0
|
state.opened.forEach((page, index) => {
|
||||||
state.opened.forEach((page, index) => {
|
if (page.fullPath === pageAim) currentIndex = index
|
||||||
if (page.fullPath === pageAim) {
|
|
||||||
currentIndex = index
|
|
||||||
}
|
|
||||||
})
|
|
||||||
// 删除打开的页面 并在缓存设置中删除
|
|
||||||
state.opened.splice(currentIndex + 1).forEach(({ name }) => commit('keepAliveRemove', name))
|
|
||||||
// 设置当前的页面
|
|
||||||
state.current = pageAim
|
|
||||||
if (router.app.$route.fullPath !== pageAim) {
|
|
||||||
router.push(pageAim)
|
|
||||||
}
|
|
||||||
// 持久化
|
|
||||||
await dispatch('opened2db')
|
|
||||||
// end
|
|
||||||
resolve()
|
|
||||||
})
|
})
|
||||||
|
// 删除打开的页面 并在缓存设置中删除
|
||||||
|
state.opened.splice(currentIndex + 1).forEach(({ name }) => commit('keepAliveRemove', name))
|
||||||
|
// 设置当前的页面
|
||||||
|
state.current = pageAim
|
||||||
|
if (router.app.$route.fullPath !== pageAim) router.push(pageAim)
|
||||||
|
// 持久化
|
||||||
|
await dispatch('opened2db')
|
||||||
},
|
},
|
||||||
/**
|
/**
|
||||||
* @class opened
|
* @class opened
|
||||||
@@ -312,53 +266,39 @@ export default {
|
|||||||
* @param {Object} context
|
* @param {Object} context
|
||||||
* @param {Object} payload { pageSelect: 当前选中的tagName }
|
* @param {Object} payload { pageSelect: 当前选中的tagName }
|
||||||
*/
|
*/
|
||||||
closeOther ({ state, commit, dispatch }, { pageSelect } = {}) {
|
async closeOther ({ state, commit, dispatch }, { pageSelect } = {}) {
|
||||||
return new Promise(async resolve => {
|
const pageAim = pageSelect || state.current
|
||||||
const pageAim = pageSelect || state.current
|
let currentIndex = 0
|
||||||
let currentIndex = 0
|
state.opened.forEach((page, index) => {
|
||||||
state.opened.forEach((page, index) => {
|
if (page.fullPath === pageAim) currentIndex = index
|
||||||
if (page.fullPath === pageAim) {
|
|
||||||
currentIndex = index
|
|
||||||
}
|
|
||||||
})
|
|
||||||
// 删除打开的页面数据 并更新缓存设置
|
|
||||||
if (currentIndex === 0) {
|
|
||||||
state.opened.splice(1).forEach(({ name }) => commit('keepAliveRemove', name))
|
|
||||||
} else {
|
|
||||||
state.opened.splice(currentIndex + 1).forEach(({ name }) => commit('keepAliveRemove', name))
|
|
||||||
state.opened.splice(1, currentIndex - 1).forEach(({ name }) => commit('keepAliveRemove', name))
|
|
||||||
}
|
|
||||||
// 设置新的页面
|
|
||||||
state.current = pageAim
|
|
||||||
if (router.app.$route.fullPath !== pageAim) {
|
|
||||||
router.push(pageAim)
|
|
||||||
}
|
|
||||||
// 持久化
|
|
||||||
await dispatch('opened2db')
|
|
||||||
// end
|
|
||||||
resolve()
|
|
||||||
})
|
})
|
||||||
|
// 删除打开的页面数据 并更新缓存设置
|
||||||
|
if (currentIndex === 0) {
|
||||||
|
state.opened.splice(1).forEach(({ name }) => commit('keepAliveRemove', name))
|
||||||
|
} else {
|
||||||
|
state.opened.splice(currentIndex + 1).forEach(({ name }) => commit('keepAliveRemove', name))
|
||||||
|
state.opened.splice(1, currentIndex - 1).forEach(({ name }) => commit('keepAliveRemove', name))
|
||||||
|
}
|
||||||
|
// 设置新的页面
|
||||||
|
state.current = pageAim
|
||||||
|
if (router.app.$route.fullPath !== pageAim) router.push(pageAim)
|
||||||
|
// 持久化
|
||||||
|
await dispatch('opened2db')
|
||||||
},
|
},
|
||||||
/**
|
/**
|
||||||
* @class opened
|
* @class opened
|
||||||
* @description 关闭所有 tag
|
* @description 关闭所有 tag
|
||||||
* @param {Object} context
|
* @param {Object} context
|
||||||
*/
|
*/
|
||||||
closeAll ({ state, commit, dispatch }) {
|
async closeAll ({ state, commit, dispatch }) {
|
||||||
return new Promise(async resolve => {
|
// 删除打开的页面 并在缓存设置中删除
|
||||||
// 删除打开的页面 并在缓存设置中删除
|
state.opened.splice(1).forEach(({ name }) => commit('keepAliveRemove', name))
|
||||||
state.opened.splice(1).forEach(({ name }) => commit('keepAliveRemove', name))
|
// 持久化
|
||||||
// 持久化
|
await dispatch('opened2db')
|
||||||
await dispatch('opened2db')
|
// 关闭所有的标签页后需要判断一次现在是不是在首页
|
||||||
// 关闭所有的标签页后需要判断一次现在是不是在首页
|
if (router.app.$route.name !== 'index') {
|
||||||
if (router.app.$route.name !== 'index') {
|
router.push({ name: 'index' })
|
||||||
router.push({
|
}
|
||||||
name: 'index'
|
|
||||||
})
|
|
||||||
}
|
|
||||||
// end
|
|
||||||
resolve()
|
|
||||||
})
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
mutations: {
|
mutations: {
|
||||||
@@ -376,9 +316,8 @@ export default {
|
|||||||
* @param {String} name name
|
* @param {String} name name
|
||||||
*/
|
*/
|
||||||
keepAliveRemove (state, name) {
|
keepAliveRemove (state, name) {
|
||||||
const list = [ ...state.keepAlive ]
|
const list = cloneDeep(state.keepAlive)
|
||||||
const index = list.findIndex(item => item === name)
|
const index = list.findIndex(item => item === name)
|
||||||
|
|
||||||
if (index !== -1) {
|
if (index !== -1) {
|
||||||
list.splice(index, 1)
|
list.splice(index, 1)
|
||||||
state.keepAlive = list
|
state.keepAlive = list
|
||||||
@@ -390,9 +329,9 @@ export default {
|
|||||||
* @param {String} name name
|
* @param {String} name name
|
||||||
*/
|
*/
|
||||||
keepAlivePush (state, name) {
|
keepAlivePush (state, name) {
|
||||||
const keep = [ ...state.keepAlive ]
|
const keep = cloneDeep(state.keepAlive)
|
||||||
keep.push(name)
|
keep.push(name)
|
||||||
state.keepAlive = keep
|
state.keepAlive = uniq(keep)
|
||||||
},
|
},
|
||||||
/**
|
/**
|
||||||
* @description 清空页面缓存设置
|
* @description 清空页面缓存设置
|
||||||
|
|||||||
Reference in New Issue
Block a user