313 lines
8.7 KiB
JavaScript
313 lines
8.7 KiB
JavaScript
import config from '@/configure/pear.config.js';
|
|
import { message } from "@hwork/ant-design-vue";
|
|
|
|
const state = {
|
|
|
|
/**
|
|
* 布局方式（整体界面的排版方式）
|
|
* layout-side -- 侧边布局
|
|
* layout-head -- 顶部菜单
|
|
* layout-comp -- 联动布局
|
|
* */
|
|
layout: config.layout == null ? "layout-side" : localStorage.getItem("layout") == null ? config.layout : localStorage.getItem("layout"),
|
|
|
|
/**
|
|
* 系统主题（整体色调）
|
|
* light -- 白色主题
|
|
* dark -- 暗色主题
|
|
* night -- 夜间主题
|
|
*/
|
|
theme: config.theme == null ? "theme-dark" : localStorage.getItem("theme") == null ? config.theme : localStorage.getItem("theme"),
|
|
|
|
/**
|
|
* 主题颜色(主题颜色)
|
|
*/
|
|
color: config.color == null ? "theme-green" : localStorage.getItem("color") == null ? config.color : localStorage.getItem("color"),
|
|
|
|
/**
|
|
* 侧边状态
|
|
* true -- 隐藏
|
|
* false -- 展开
|
|
* */
|
|
collapsed: config.collapsed == null ? false : localStorage.getItem("collapsed") == null ? config.collapsed : localStorage.getItem("collapsed"),
|
|
|
|
/**
|
|
* 菜单头部
|
|
* true -- 隐藏
|
|
* false -- 展开
|
|
* */
|
|
logo: config.logo == null ? true : localStorage.getItem("logo") == null ? config.logo : localStorage.getItem("logo"),
|
|
|
|
/**
|
|
* 是否开启多标签页
|
|
* true -- 隐藏
|
|
* false -- 展开
|
|
* */
|
|
tab: config.tab == null ? true : localStorage.getItem("tab") == null ? config.tab : localStorage.getItem("tab"),
|
|
|
|
/**
|
|
* 保持状态
|
|
* true -- 是
|
|
* false -- 否
|
|
*/
|
|
keepAlive: config.keepAlive == null ? true : localStorage.getItem("keepAlive") == null ? config.keepAlive : localStorage.getItem("keepAlive"),
|
|
|
|
/**
|
|
* 多标签页样式
|
|
* pear-card-tab
|
|
* pear-dot-tab
|
|
*/
|
|
tabType: config.tabType == null ? "pear-dot-tab" : localStorage.getItem("tabType") == null ? config.tabType : localStorage.getItem("tabType"),
|
|
|
|
/**
|
|
* 侧边菜单栏宽度
|
|
* 单位:px
|
|
* */
|
|
sideWitch: config.sideWidth == null ? 220 : config.sideWidth,
|
|
/**
|
|
* 侧边菜单栏宽度(折叠)
|
|
* 单位:px
|
|
* */
|
|
collapsedWidth: config.collapsedWidth == null ? 60 : config.collapsedWidth,
|
|
|
|
/**
|
|
* 固定头部
|
|
* true
|
|
* false
|
|
*/
|
|
fixedHeader: config.fixedHeader == null ? true : localStorage.getItem("fixedHeader") == null ? config.fixedHeader : localStorage.getItem("fixedHeader"),
|
|
|
|
/**
|
|
* 固定侧边
|
|
* true
|
|
* false
|
|
*/
|
|
fixedSide: config.fixedSide == null ? true : localStorage.getItem("fixedSide") == null ? config.fixedSide : localStorage.getItem("fixedSide"),
|
|
|
|
/**
|
|
* 路由动画
|
|
* fadeRight
|
|
* fadeTop
|
|
*/
|
|
routerAnimate: config.routerAnimate == null ? "" : localStorage.getItem("routerAnimate") == null ? config.routerAnimate : localStorage.getItem("routerAnimate"),
|
|
|
|
/**
|
|
* 配色列表
|
|
*/
|
|
colorList: config.colorList,
|
|
|
|
/**
|
|
* 主题面板状态
|
|
* true
|
|
* false
|
|
*/
|
|
setting: { opened: false },
|
|
|
|
// 选项卡内容存储
|
|
panes: sessionStorage.getItem("pear_tabs")
|
|
? JSON.parse(sessionStorage.getItem("pear_tabs"))
|
|
: [],
|
|
// 当前激活选项卡
|
|
activeKey: "",
|
|
// 当前打开菜单
|
|
openKey: [],
|
|
// 手风琴配置
|
|
muiltOpen: true,
|
|
// 路由刷新辅助变量
|
|
routerActive: true,
|
|
// 浏览器全屏
|
|
fullscreen: false,
|
|
// 路由列表
|
|
routes: [],
|
|
|
|
// 是否是移动端
|
|
isMobile: false,
|
|
|
|
language: config.defaultLanguage == null ? "zh-CN" : localStorage.getItem("pear_lang") == null ? config.defaultLanguage : localStorage.getItem("pear_lang"),
|
|
|
|
cancelToken: []
|
|
}
|
|
|
|
const mutations = {
|
|
TOGGLE_FIXEDSIDE(state) {
|
|
state.fixedSide = !state.fixedSide;
|
|
},
|
|
TOGGLE_FIXEDHEADER(state) {
|
|
state.fixedHeader = !state.fixedHeader;
|
|
},
|
|
TOGGLE_LANGUAGE(state, language) {
|
|
state.language = language;
|
|
},
|
|
UPDATE_LAYOUT(state, layout) {
|
|
state.layout = layout;
|
|
},
|
|
UPDATE_TAB_TYPE(state, tabType) {
|
|
state.tabType = tabType;
|
|
},
|
|
UPDATE_THEME(state, theme) {
|
|
state.theme = theme;
|
|
},
|
|
UPDATE_ROUTER_ANIMATE(state, routerAnimate) {
|
|
state.routerAnimate = routerAnimate;
|
|
},
|
|
UPDATE_COLOR(state, color) {
|
|
localStorage.setItem("color", color);
|
|
state.color = color;
|
|
},
|
|
UPDATE_ROUTES(state, routes) {
|
|
state.routes = routes;
|
|
},
|
|
UPDATE_COLLAPSED(state, collapsed) {
|
|
state.collapsed = collapsed;
|
|
},
|
|
TOGGLE_SIDEBAR(state) {
|
|
if (state.collapsed) {
|
|
// 要展开
|
|
state.openKey = JSON.parse(localStorage.getItem("openKey"));
|
|
} else {
|
|
// 要隐藏
|
|
localStorage.setItem("openKey", JSON.stringify(state.openKey));
|
|
state.openKey = [];
|
|
}
|
|
state.collapsed = !state.collapsed;
|
|
},
|
|
// 设置面板是否打开
|
|
TOGGLE_SETTING(state) {
|
|
state.setting.opened = !state.setting.opened;
|
|
},
|
|
TOGGLE_SIDEWITCH(state, width) {
|
|
state.sideWitch = width;
|
|
},
|
|
// 是否显示LOGO
|
|
TOGGLE_LOGO(state) {
|
|
state.logo = !state.logo;
|
|
},
|
|
// 是否开启选项卡模式
|
|
updateTab(state) {
|
|
state.tab = !state.tab;
|
|
},
|
|
// 修改全屏打开
|
|
updateFullscreen(state) {
|
|
state.fullscreen = !state.fullscreen;
|
|
},
|
|
// 修改菜单打开项
|
|
updateOpenKey(state, { openKeys }) {
|
|
//手风琴模式, 只保留当前打开的节点
|
|
let length = openKeys.length;
|
|
if (length > 0 && state.muiltOpen) {
|
|
//除了最后打开的节点, 其他的节点可能包含父节点
|
|
let otherKeys = openKeys.slice(0, length - 1);
|
|
//最后一次打开的节点
|
|
let lastKey = openKeys[length - 1];
|
|
state.openKey = [
|
|
...otherKeys.filter(ok => lastKey.startsWith(ok)),
|
|
lastKey
|
|
];
|
|
} else {
|
|
state.openKey = openKeys;
|
|
}
|
|
},
|
|
clearOpenKey(state) {
|
|
state.openKey = [];
|
|
},
|
|
// 新增选项卡操作
|
|
addTab(state, value) {
|
|
// 遍历当前的选项卡中是否已存在新增的 Key
|
|
if (state.panes.findIndex(pane => pane.path === value.path) === -1) {
|
|
// 如果不存在新增选项卡
|
|
state.panes.push(value);
|
|
sessionStorage.setItem("pear_tabs", JSON.stringify(state.panes));
|
|
}
|
|
state.activeKey = value.path;
|
|
},
|
|
// 删除选项卡实现
|
|
removeTab(state, targetKey) {
|
|
//当前激活的选项卡, 选项卡列表
|
|
let { activeKey, panes } = state;
|
|
panes.forEach((pane, index) => {
|
|
if (pane.path === targetKey) {
|
|
if (pane.closable != false) {
|
|
panes.splice(index, 1);
|
|
state.panes = panes;
|
|
sessionStorage.setItem("pear_tabs", JSON.stringify(panes));
|
|
//更换已经选中的菜单
|
|
if (activeKey === targetKey) {
|
|
let lastPane = panes[panes.length - 1];
|
|
state.activeKey = lastPane ? lastPane.path : "";
|
|
}
|
|
} else {
|
|
message.warning("禁止关闭");
|
|
}
|
|
}
|
|
});
|
|
},
|
|
//keepKeys, 需要保留的keys
|
|
closeAllTab(state, keepKeys = []) {
|
|
//当前激活的选项卡, 选项卡列表
|
|
let { activeKey, panes } = state;
|
|
//保留不能关闭的选项卡
|
|
panes = panes.filter(
|
|
pane => pane.closable === false || keepKeys.includes(pane.path)
|
|
);
|
|
state.panes = panes;
|
|
sessionStorage.setItem("pear_tabs", JSON.stringify(panes));
|
|
//检查当前选中的是否被关闭
|
|
if (panes.findIndex(pane => pane.path === activeKey) === -1) {
|
|
let lastPane = panes[panes.length - 1];
|
|
state.activeKey = lastPane ? lastPane.path : "";
|
|
}
|
|
},
|
|
closeOtherTab(state) {
|
|
mutations.closeAllTab(state, [state.activeKey]);
|
|
},
|
|
closeCurrentTab(state) {
|
|
mutations.removeTab(state, state.activeKey);
|
|
},
|
|
initPanes(state, panes) {
|
|
state.panes = panes;
|
|
},
|
|
selectTab(state, key) {
|
|
state.activeKey = key;
|
|
},
|
|
UPDATE_ROUTER_ACTIVE(state) {
|
|
state.routerActive = !state.routerActive;
|
|
},
|
|
UPDATE_ISMOBILE(state, isMobile) {
|
|
state.isMobile = isMobile;
|
|
},
|
|
TOGGLE_KEEP_ALIVE(state) {
|
|
state.keepAlive = !state.keepAlive;
|
|
},
|
|
PUSH_CANCEL_TOKEN (state, payload) {
|
|
state.cancelToken.push(payload.cancelToken)
|
|
},
|
|
EXEC_CANCEL_TOKEN (state) {
|
|
state.cancelToken.forEach(executor => {
|
|
executor('路由跳转取消上个页面的请求')
|
|
})
|
|
state.cancelToken = []
|
|
},
|
|
SET_LANGUAGE (state, payload) {
|
|
state.language = payload
|
|
localStorage.setItem('pear_lang', payload)
|
|
}
|
|
}
|
|
|
|
const actions = {
|
|
execCancelToken ({commit}) {
|
|
return new Promise(resolve => {
|
|
commit('EXEC_CANCEL_TOKEN');
|
|
resolve()
|
|
})
|
|
},
|
|
setLanguage({commit}, payload) {
|
|
commit('SET_LANGUAGE', payload)
|
|
}
|
|
}
|
|
|
|
export default {
|
|
namespaced: true,
|
|
state,
|
|
mutations,
|
|
actions
|
|
} |