多页签优化

store/admin/page.js

@@ -9,8 +9,8 @@ import { getAllSiderMenu, includeArray } from '@/libs/system';
 
 // 判定是否需要缓存
 const isKeepAlive = data => get(data, 'meta.cache', false);
-export const strict=false;
-export const state=()=>({
+export const strict = false;
+export const state = () => ({
     // 可以在多页 tab 模式下显示的页面
     pool: [],
     // 当前显示的多页面列表
@@ -21,11 +21,11 @@ export const state=()=>({
     keepAlive: []
 })
 
-export const actions={
+export const actions = {
     /**
  * @description 从持久化数据载入分页列表
  */
-        openedLoad ({ state, commit, dispatch, rootState }) {
+    openedLoad({ state, commit, dispatch, rootState }) {
         return new Promise(async resolve => {
             // store 赋值
             const value = await dispatch('admin/db/get', {
@@ -79,7 +79,7 @@ export const actions={
     /**
      * 将 opened 属性赋值并持久化 在这之前请先确保已经更新了 state.opened
      */
-        opened2db ({ state, dispatch }) {
+    opened2db({ state, dispatch }) {
         return new Promise(async resolve => {
             // 设置数据
             dispatch('admin/db/set', {
@@ -96,7 +96,7 @@ export const actions={
      * @description 更新页面列表上的某一项
      * @param {Object} param { index, params, query, fullPath } 路由信息
      */
-        openedUpdate ({ state, commit, dispatch }, { index, params, query, fullPath, meta }) {
+    openedUpdate({ state, commit, dispatch }, { index, params, query, fullPath, meta }) {
         return new Promise(async resolve => {
             // 更新页面列表某一项
             let page = state.opened[index];
@@ -115,7 +115,7 @@ export const actions={
      * @description 更新页面当前项
      * @param {Object} param { params, query, fullPath } 路由信息
      */
-        currentUpdate ({ state, commit, dispatch }, { params, query, fullPath, meta }) {
+    currentUpdate({ state, commit, dispatch }, { params, query, fullPath, meta }) {
         return new Promise(async resolve => {
             setTimeout(async () => {
                 // 更新当前项
@@ -137,7 +137,7 @@ export const actions={
      * @description 新增一个 tag (打开一个页面)
      * @param {Object} param new tag info
      */
-        add ({ state, commit, dispatch }, { tag, params, query, fullPath }) {
+    add({ state, commit, dispatch }, { tag, params, query, fullPath }) {
         return new Promise(async resolve => {
             // 设置新的 tag 在新打开一个以前没打开过的页面时使用
             let newTag = tag;
@@ -160,7 +160,7 @@ export const actions={
      * @description 打开一个新的页面
      * @param {Object} param 从路由钩子的 to 对象上获取 { name, params, query, fullPath } 路由信息
      */
-        open ({ state, commit, dispatch }, { name, params, query, fullPath }) {
+    open({ state, commit, dispatch }, { name, params, query, fullPath }) {
         return new Promise(async resolve => {
             // 已经打开的页面
             let opened = state.opened;
@@ -201,7 +201,7 @@ export const actions={
      * @description 关闭一个 tag (关闭一个页面)
      * @param {Object} param { tagName: 要关闭的标签名字 }
      */
-        close ({ state, commit, dispatch }, { tagName }) {
+    close({ state, commit, dispatch }, { tagName }) {
         return new Promise(async resolve => {
             // 下个新的页面
             let newPage = state.opened[0];
@@ -245,7 +245,7 @@ export const actions={
                     params,
                     query
                 };
-                    $nuxt.$router.push(routerObj, () => {});
+                $nuxt.$router.push(routerObj, () => { });
             }
             // end
             resolve();
@@ -255,7 +255,8 @@ export const actions={
      * @description 关闭当前标签左边的标签
      * @param {Object} param { pageSelect: 当前选中的tagName }
      */
-        closeLeft ({ state, commit, dispatch }, { pageSelect } = {}) {
+    closeLeft({ state, commit, dispatch }, { pageSelect } = {}) {
+
         return new Promise(async resolve => {
             const pageAim = pageSelect || state.current;
             let currentIndex = 0;
@@ -267,6 +268,10 @@ export const actions={
             if (currentIndex > 0) {
                 // 删除打开的页面 并在缓存设置中删除
                 state.opened.splice(1, currentIndex - 1).forEach(({ name }) => commit('keepAliveRemove', name));
+
+            }
+            if (state.opened.length == 2) {
+                state.opened.splice(0, 1);
             }
             state.current = pageAim;
             if ($nuxt.$router.fullPath !== pageAim) {
@@ -282,7 +287,7 @@ export const actions={
      * @description 关闭当前标签右边的标签
      * @param {Object} param { pageSelect: 当前选中的tagName }
      */
-        closeRight ({ state, commit, dispatch }, { pageSelect } = {}) {
+    closeRight({ state, commit, dispatch }, { pageSelect } = {}) {
         return new Promise(async resolve => {
             const pageAim = pageSelect || state.current;
             let currentIndex = 0;
@@ -308,7 +313,7 @@ export const actions={
      * @description 关闭当前激活之外的 tag
      * @param {Object} param { pageSelect: 当前选中的tagName }
      */
-        closeOther ({ state, commit, dispatch }, { pageSelect } = {}) {
+    closeOther({ state, commit, dispatch }, { pageSelect } = {}) {
         return new Promise(async resolve => {
             const pageAim = pageSelect || state.current;
             let currentIndex = 0;
@@ -324,6 +329,9 @@ export const actions={
                 state.opened.splice(currentIndex + 1).forEach(({ name }) => commit('keepAliveRemove', name));
                 state.opened.splice(1, currentIndex - 1).forEach(({ name }) => commit('keepAliveRemove', name));
             }
+            if (state.opened.length == 2) {
+                state.opened.splice(0, 1);
+            }
             // 设置新的页面
             state.current = pageAim;
             if ($nuxt.$router.fullPath !== pageAim) {
@@ -339,31 +347,31 @@ export const actions={
      * @description 关闭所有 tag
      * @param {Object} state vuex state
      */
-        closeAll ({ state, commit, dispatch }) {
+    closeAll({ state, commit, dispatch }) {
         return new Promise(async resolve => {
             // 删除打开的页面 并在缓存设置中删除
-                state.opened.splice(1).forEach(({ name }) => commit('keepAliveRemove', name));
+            state.opened.splice(0).forEach(({ name }) => commit('keepAliveRemove', name));
             // 持久化
             await dispatch('opened2db');
             // 关闭所有的标签页后需要判断一次现在是不是在首页
-                if ($nuxt.$router.name !== 'index') {
-                    $nuxt.$router.push({
-                        name: 'index'
-                    }, () => {});
-                }
+            // if ($nuxt.$router.name !== 'index') {
+            //     $nuxt.$router.push({
+            //         name: 'index'
+            //     }, () => { });
+            // }
             // end
             resolve();
         });
     }
 }
 
-export const mutations={
+export const mutations = {
     /**
  * @class keepAlive
  * @description 从已经打开的页面记录中更新需要缓存的页面记录
  * @param {Object} state vuex state
  */
-        keepAliveRefresh (state) {
+    keepAliveRefresh(state) {
         state.keepAlive = state.opened.filter(item => isKeepAlive(item)).map(e => e.name);
     },
     /**
@@ -371,22 +379,25 @@ export const mutations={
      * @param {Object} state vuex state
      * @param {String} name name
      */
-        keepAliveRemove (state, name) {
-            const list = [ ...state.keepAlive ];
+    keepAliveRemove(state, name) {
+        const list = [...state.keepAlive];
         const index = list.findIndex(item => item === name);
-
         if (index !== -1) {
             list.splice(index, 1);
             state.keepAlive = list;
         }
+        if (state.opened.length == 2) {
+            state.opened.splice(0, 1);
+        }
+
     },
     /**
      * @description 增加一个页面的缓存设置
      * @param {Object} state vuex state
      * @param {String} name name
      */
-        keepAlivePush (state, name) {
-            const keep = [ ...state.keepAlive ];
+    keepAlivePush(state, name) {
+        const keep = [...state.keepAlive];
         keep.push(name);
         state.keepAlive = keep;
     },
@@ -394,7 +405,7 @@ export const mutations={
      * @description 清空页面缓存设置
      * @param {Object} state vuex state
      */
-        keepAliveClean (state) {
+    keepAliveClean(state) {
         state.keepAlive = [];
     },
     /**
@@ -403,7 +414,7 @@ export const mutations={
      * @param {Object} state vuex state
      * @param {String} fullPath new fullPath
      */
-        currentSet (state, fullPath) {
+    currentSet(state, fullPath) {
         state.current = fullPath;
     },
     /**
@@ -412,7 +423,7 @@ export const mutations={
      * @param {Object} state vuex state
      * @param {Array} routes routes
      */
-        init (state, routes) {
+    init(state, routes) {
         const pool = [];
         const push = function (routes) {
             routes.forEach(route => {