mooho-base-admin-plus 0.1.0

package/src/store/modules/admin/modules/log.js

@@ -0,0 +1,77 @@
+import dayjs from 'dayjs';
+import { get } from 'lodash';
+import util from '../../../../libs/util.js';
+
+export default {
+  namespaced: true,
+  state: {
+    /**
+     * @description 错误日志，单条属性：
+     * message: 必填，日志信息
+     * type: 非必填，类型，可选值为 info（默认值）| success | warning | error，其中 error 会以具体数目强调显示，其它以点轻量显示
+     * time: 必填，日志记录时间
+     * meta: 非必填，其它携带信息
+     * */
+    log: []
+  },
+  getters: {
+    /**
+     * @description 返回现存 log (all) 的条数
+     * @param {*} state vuex state
+     */
+    length(state) {
+      return state.log.length;
+    },
+    /**
+     * @description 返回现存 log (error) 的条数
+     * @param {*} state vuex state
+     */
+    lengthError(state) {
+      return state.log.filter(log => log.type === 'error').length;
+    }
+  },
+  actions: {
+    /**
+     * @description 添加一个日志
+     * @param {String} param message {String} 信息
+     * @param {String} param type {String} 类型
+     * @param {Object} param meta {Object} 附带的信息
+     */
+    push({ rootState, commit }, { message, type = 'info', meta }) {
+      commit('push', {
+        message,
+        type,
+        time: dayjs().format('YYYY-MM-DD HH:mm:ss'),
+        meta: {
+          // 当前用户信息
+          user: rootState.admin.user.info,
+          // 当前用户的 uuid
+          uuid: util.cookies.get('uuid'),
+          // 当前的 token
+          token: util.cookies.get('token'),
+          // 当前地址
+          url: get(window, 'location.href', ''),
+          // 用户设置
+          ...meta
+        }
+      });
+    }
+  },
+  mutations: {
+    /**
+     * @description 添加日志
+     * @param {Object} state vuex state
+     * @param {Object} log data
+     */
+    push(state, log) {
+      state.log.push(log);
+    },
+    /**
+     * @description 清空日志
+     * @param {Object} state vuex state
+     */
+    clean(state) {
+      state.log = [];
+    }
+  }
+};

package/src/store/modules/admin/modules/menu.js

@@ -0,0 +1,338 @@
+/**
+ * 菜单
+ * */
+import { cloneDeep } from 'lodash';
+import {
+  includeArray,
+  setNativeMenuSider,
+  //setNativeMenuHeader,
+  setNativePermission,
+  getHeaderName,
+  getMenuSider,
+  getSiderSubmenu,
+  getNativeMenuSider,
+  getNativeMenuHeader,
+  getNativePermission
+} from '../../../../libs/system';
+import router from '../../../../router';
+import permissionApi from '../../../../api/permission';
+
+// 根据 menu 配置的权限，过滤菜单
+function filterMenu(menuList, access, lastList) {
+  menuList.forEach(menu => {
+    let menuAccess = menu.auth;
+
+    if (!menuAccess || includeArray(menuAccess, access)) {
+      let newMenu = {};
+      for (let i in menu) {
+        if (i !== 'children') newMenu[i] = cloneDeep(menu[i]);
+      }
+      if (menu.children && menu.children.length) newMenu.children = [];
+
+      lastList.push(newMenu);
+      menu.children && filterMenu(menu.children, access, newMenu.children);
+    }
+  });
+  return lastList;
+}
+
+// 转换菜单
+function convertMenu(source) {
+  if (!source) {
+    return null;
+  }
+
+  // 外部链接
+  var reg = /(http|https):\/\/([\w.]+\/?)\S*/;
+  return source.map(item => {
+    return {
+      path: reg.test(item.url) ? item.url : '/' + item.url.split('?')[0],
+      title: item.name,
+      subtitle: item.subName,
+      target: item.isNewWindow ? '_blank' : null,
+      header: 'home',
+      custom: item.icon,
+      children: convertMenu(item.subPermissions)
+    };
+  });
+}
+
+export default {
+  namespaced: true,
+  state: {
+    // 顶部菜单
+    header: [],
+    // 侧栏菜单
+    sider: [],
+    // 当前顶栏菜单的 name
+    headerName: '',
+    // 当前所在菜单的 path
+    activePath: '',
+    // 展开的子菜单 name 集合
+    openNames: [],
+    // 所有的菜单
+    menuSider: [],
+    // 侧边菜单徽标
+    siderMenuBadge: [],
+    // 顶栏菜单徽标
+    headerMenuBadge: [],
+    // 用户权限
+    userPermissions: null
+  },
+  getters: {
+    /**
+     * @description 获取侧边菜单
+     * */
+    // sider(state) {
+    //   return state.sider;
+    // },
+    /**
+     * @description 根据 user 里登录用户权限，对侧边菜单进行鉴权过滤
+     * */
+    filterSider(state, getters, rootState) {
+      const userInfo = rootState.admin.user.info;
+      // @权限
+      const access = userInfo.access;
+      if (access && access.length) {
+        return filterMenu(state.sider, access, []);
+      } else {
+        return filterMenu(state.sider, [], []);
+      }
+    },
+    /**
+     * @description 根据 user 里登录用户权限，对顶栏菜单进行鉴权过滤
+     * */
+    filterHeader(state, getters, rootState) {
+      const userInfo = rootState.admin.user.info;
+      // @权限
+      const access = userInfo.access;
+      if (access && access.length) {
+        return state.header.filter(item => {
+          let state = true;
+          if (item.auth && !includeArray(item.auth, access)) state = false;
+          if (item.children && item.children.length) {
+            item.children = item.children.filter(child => {
+              let state = true;
+              if (child.auth && !includeArray(child.auth, access)) state = false;
+              return state;
+            });
+          }
+          return state;
+        });
+      } else {
+        return state.header.filter(item => {
+          let state = true;
+          if (item.auth && item.auth.length) state = false;
+          if (item.children && item.children.length) {
+            item.children = item.children.filter(child => {
+              let state = true;
+              if (child.auth && child.auth.length) state = false;
+              return state;
+            });
+          }
+          return state;
+        });
+      }
+    },
+    /**
+     * @description 当前 header 的全部信息
+     * */
+    currentHeader(state) {
+      return state.header.find(item => item.name === state.headerName);
+    },
+    /**
+     * @description 在当前 header 下，是否隐藏 sider（及折叠按钮）
+     * */
+    hideSider(state, getters) {
+      let visible = false;
+      if (getters.currentHeader && 'hideSider' in getters.currentHeader) visible = getters.currentHeader.hideSider;
+      return visible;
+    },
+    /**
+     * @description 获取权限
+     * */
+    permission(state) {
+      return state.userPermissions;
+    }
+  },
+  mutations: {
+    /**
+     * @description 设置侧边栏菜单
+     * @param {Object} state vuex state
+     * @param {Array} menu menu
+     */
+    setSider(state, menu) {
+      state.sider = menu;
+    },
+    /**
+     * @description 设置顶栏菜单
+     * @param {Object} state vuex state
+     * @param {Array} menu menu
+     */
+    setHeader(state, menu) {
+      state.header = menu;
+    },
+    /**
+     * @description 设置当前顶栏菜单 name
+     * @param {Object} state vuex state
+     * @param {Array} name headerName
+     */
+    setHeaderName(state, name) {
+      state.headerName = name;
+    },
+    /**
+     * @description 设置当前所在菜单的 path，用于侧栏菜单高亮当前项
+     * @param {Object} state vuex state
+     * @param {Array} path fullPath
+     */
+    setActivePath(state, path) {
+      state.activePath = path;
+    },
+    /**
+     * @description 设置当前所在菜单的全部展开父菜单的 names 集合
+     * @param {Object} state vuex state
+     * @param {Array} names openNames
+     */
+    setOpenNames(state, names) {
+      state.openNames = names;
+    },
+    /**
+     * @description 设置所有菜单
+     * @param {Object} state vuex state
+     * @param {Array} menuSider menuSider
+     * */
+    setMenuSider(state, menuSider) {
+      state.menuSider = menuSider;
+    },
+    /**
+     * @description 设置全部的侧边菜单的徽标
+     * */
+    setAllSiderMenuBadge(state, data) {
+      state.siderMenuBadge = data;
+    },
+    /**
+     * @description 新增或修改某个侧边菜单的徽标
+     * */
+    setSiderMenuBadge(state, { path, badge }) {
+      const siderMenuBadge = cloneDeep(state.siderMenuBadge);
+      const menuIndex = siderMenuBadge.findIndex(item => item.path === path);
+      if (menuIndex >= 0) {
+        siderMenuBadge[menuIndex] = badge;
+        state.siderMenuBadge = siderMenuBadge;
+      } else {
+        state.siderMenuBadge.push(badge);
+      }
+    },
+    /**
+     * @description 删除某个侧边菜单的徽标
+     * */
+    removeSiderMenuBadge(state, path) {
+      const menuIndex = state.siderMenuBadge.findIndex(item => item.path === path);
+      if (menuIndex >= 0) state.siderMenuBadge.splice(menuIndex, 1);
+    },
+    /**
+     * @description 设置全部的顶栏菜单的徽标
+     * */
+    setAllHeaderMenuBadge(state, data) {
+      state.headerMenuBadge = data;
+    },
+    /**
+     * @description 新增或修改某个顶栏菜单的徽标
+     * */
+    setHeaderMenuBadge(state, { path, badge }) {
+      const headerMenuBadge = cloneDeep(state.headerMenuBadge);
+      const menuIndex = headerMenuBadge.findIndex(item => item.path === path);
+      if (menuIndex >= 0) {
+        headerMenuBadge[menuIndex] = badge;
+        state.headerMenuBadge = headerMenuBadge;
+      } else {
+        state.headerMenuBadge.push(badge);
+      }
+    },
+    /**
+     * @description 删除某个顶栏菜单的徽标
+     * */
+    removeHeaderMenuBadge(state, path) {
+      const menuIndex = state.headerMenuBadge.findIndex(item => item.path === path);
+      if (menuIndex >= 0) state.headerMenuBadge.splice(menuIndex, 1);
+    }
+  },
+  actions: {
+    /**
+     * @description 设置菜单（动态+静态）
+     * */
+    setMenuList({ state, commit }, to = {}) {
+      // 设置顶栏菜单
+      const menuHeaderList = getNativeMenuHeader();
+      commit('setHeader', menuHeaderList);
+
+      // 设置侧边栏菜单
+      const menuSiderList = getNativeMenuSider();
+      let path = to.matched[to.matched.length - 1].path;
+
+      let headerName = getHeaderName(path, menuSiderList);
+      if (headerName === null) {
+        path = to.path;
+        headerName = getHeaderName(path, menuSiderList);
+      }
+      // 在 404 时，是没有 headerName 的
+      if (headerName !== null) {
+        commit('setHeaderName', headerName);
+        commit('setMenuSider', menuSiderList);
+
+        const filterMenuSider = getMenuSider(menuSiderList, headerName);
+        commit('setSider', filterMenuSider);
+        commit('setActivePath', to.path);
+
+        const openNames = getSiderSubmenu(path, menuSiderList);
+        commit('setOpenNames', openNames);
+      }
+
+      if (state.userPermissions == null) {
+        state.userPermissions = getNativePermission();
+      }
+    },
+    /**
+     * @description 动态获取菜单
+     * @param dispatch
+     * @param loadMenu 是否加载菜单，需传 $route 信息
+     * */
+    getMenuList({ dispatch }, loadMenu) {
+      return new Promise((resolve, reject) => {
+        permissionApi
+          .query()
+          .then(res => {
+            // 默认包含首页
+            res.menus.unshift({
+              name: '首页',
+              subName: 'Home',
+              parentID: null,
+              url: 'home',
+              templateUrl: '@/home',
+              icon: 'fa fa-home'
+            });
+
+            let menu = convertMenu(res.menus);
+
+            //setNativeMenuHeader(res.header);
+            setNativeMenuSider(menu);
+            if (loadMenu) {
+              const to = loadMenu === true ? router.currentRoute.value : loadMenu;
+              dispatch('setMenuList', to);
+            }
+
+            let permissions = {};
+            res.permissions.forEach(key => {
+              permissions[key] = true;
+            });
+
+            setNativePermission(permissions);
+            resolve();
+          })
+          .catch(err => {
+            reject(err);
+          });
+      });
+    }
+  }
+};