mooho-base-admin-plus 0.1.0

package/src/router/dynamic.js

@@ -0,0 +1,183 @@
+import permissionApi from '../api/permission';
+
+// 动态路由
+export default {
+  async init(router) {
+    let pages = router.pages;
+    let layout = router.layout;
+
+    let res = await permissionApi.queryRouter();
+
+    // 自定义页面数据处理
+    res.forEach(permission => {
+      if (permission.isCustomPage) {
+        permission.url += '?id=' + permission.customPageID;
+        if (permission.customPage.customPageTemplate) {
+          permission.templateUrl = 'template/' + permission.customPage.customPageTemplate.substr(0, 1).toLowerCase() + permission.customPage.customPageTemplate.substr(1) + '.vue';
+        }
+      }
+    });
+
+    let allPer = res;
+    let topPer = allPer.filter(p => p.parentID == null);
+    let routes = [
+      {
+        path: '/:pathMatch(.*)',
+        name: '404',
+        meta: {
+          title: '404'
+        },
+        component: () => {
+          return new Promise(resolve => {
+            resolve(pages['system/error/404.vue']);
+          });
+        }
+      },
+      {
+        path: '/',
+        redirect: {
+          name: 'login'
+        },
+        component: layout,
+        children: []
+      }
+    ];
+    for (let i = 0; i < topPer.length; i++) {
+      if (!(topPer[i].templateUrl || '').trim()) {
+        topPer[i] = PermissionDeep(topPer[i], allPer);
+      } else {
+        // 一级菜单
+        let parent = routes.find(element => {
+          return element.path === '/';
+        });
+        let item = topPer[i];
+        let url = item.url.split('?')[0];
+        let data = {};
+        if (item.url.split('?').length > 1) {
+          item.url
+            .split('?')[1]
+            .split('&')
+            .forEach(item => {
+              if (item.split('=').length > 1 && item.split('=')[0].length > 0) {
+                data[item.split('=')[0]] = item.split('=')[1];
+              }
+            });
+        }
+        let node = {
+          id: item.id,
+          path: url.split('/').pop(),
+          name: url.replace(/\//g, '-'),
+          meta: {
+            auth: false,
+            title: item.name,
+            description: item.subName,
+            data,
+            cache: item.isMenu
+          },
+          component: () => {
+            return new Promise(resolve => {
+              resolve(pages[item.templateUrl]);
+            });
+          }
+        };
+
+        parent.children.push(node);
+      }
+    }
+    buildPermission(pages, topPer, routes, layout, null);
+
+    routes.forEach(route => {
+      router.addRoute(route);
+    });
+
+    return routes;
+  }
+};
+
+function buildPermission(pages, perArry, routes, layout, parent) {
+  perArry.forEach(item => {
+    let node;
+    if (item.parentID == null) {
+      if (!(item.templateUrl || '').trim()) {
+        node = {
+          id: item.id,
+          pId: item.parentID,
+          path: '/' + item.url.split('/').pop(),
+          name: item.url.replace('app.', '').replace(/\./g, '-'),
+          meta: {
+            auth: false
+          },
+          component: layout
+        };
+        routes.push(node);
+      }
+    } else {
+      // 获取参数
+      let url = item.url.split('?')[0];
+      let data = {};
+      if (item.url.split('?').length > 1) {
+        item.url
+          .split('?')[1]
+          .split('&')
+          .forEach(item => {
+            if (item.split('=').length > 1 && item.split('=')[0].length > 0) {
+              data[item.split('=')[0]] = item.split('=')[1];
+            }
+          });
+      }
+      node = {
+        id: item.id,
+        pId: item.parentID,
+        path: url.split('/').pop(),
+        name: url.replace(/\//g, '-'),
+        meta: {
+          auth: false,
+          title: item.name,
+          description: item.subName,
+          data,
+          cache: item.isMenu
+        },
+        component: () => {
+          return new Promise(resolve => {
+            resolve(pages[item.templateUrl]);
+          });
+        }
+      };
+      if (parent == null) {
+        parent = routes.find(p => p.id == item.parentID);
+      }
+      if (parent != undefined) {
+        if (parent.children == null) {
+          parent.children = [];
+        }
+
+        if (parent.pId != null) {
+          let backup = parent;
+          parent = routes.find(p => p.id == parent.pId);
+          node.path = url.split('/').splice(1).join('/');
+          parent.children.push(node);
+          parent = backup;
+        } else {
+          parent.children.push(node);
+        }
+      }
+    }
+
+    if (item.sonPer != null) {
+      buildPermission(pages, item.sonPer, routes, layout, node);
+    }
+  });
+
+  return routes;
+}
+
+function PermissionDeep(per, perArry) {
+  let sonPerArry = perArry.filter(p => p.parentID == per.id);
+  if (sonPerArry.length > 0) {
+    per['sonPer'] = sonPerArry;
+    for (let i = 0; i < sonPerArry.length; i++) {
+      sonPerArry[i] = PermissionDeep(sonPerArry[i], perArry);
+    }
+  }
+  return per;
+}

package/src/router/index.js

@@ -0,0 +1,84 @@
+import { createRouter, createWebHistory, createWebHashHistory, createMemoryHistory } from 'vue-router';
+import ViewUIPlus from 'view-ui-plus';
+import util from '../libs/util';
+import Setting from '../setting';
+import store from '../store/index';
+import dynamic from './dynamic';
+
+// 根目录
+let base = import.meta.env.VUE_APP_BASE_PATH;
+if (!base) {
+  base = '';
+}
+
+// 导出路由 在 main.js 里使用
+const router = createRouter({
+  history: Setting.routerMode === 'history' ? createWebHistory(base) : Setting.routerMode === 'hash' ? createWebHashHistory(base) : createMemoryHistory(base),
+  routes: []
+});
+
+// 是否初始化
+let inited = false;
+
+/**
+ * 路由拦截
+ * 权限验证
+ */
+
+router.beforeEach(async (to, from, next) => {
+  if (Setting.showProgressBar) {
+    ViewUIPlus.LoadingBar.start();
+  }
+
+  if (!inited) {
+    // 初始化动态路由
+    let dynamicRoutes = await dynamic.init(router);
+    let frameInRoutes = router.getRoutes();
+
+    // 处理路由 得到每一级的路由设置
+    store.commit('admin/page/init', [...frameInRoutes, ...dynamicRoutes]);
+    inited = true;
+    next({
+      ...to,
+      replace: true
+    });
+  } else {
+    // 判断是否需要登录才可以进入
+    if (to.matched.some(_ => _.meta.auth)) {
+      // 这里依据 token 判断是否登录，可视情况修改
+      const token = util.cookies.get('token');
+
+      if (token && token !== 'undefined') {
+        next();
+      } else {
+        // 没有登录的时候跳转到登录界面
+        // 携带上登陆成功之后需要跳转的页面完整路径
+        next({
+          name: 'login',
+          query: {
+            redirect: to.fullPath
+          }
+        });
+      }
+    } else {
+      // 不需要身份校验 直接通过
+      next();
+    }
+  }
+});
+
+router.afterEach(to => {
+  if (Setting.showProgressBar) ViewUIPlus.LoadingBar.finish();
+  // 多页控制 打开新的页面
+  if (!('meta' in to) || (to.meta && !('tabs' in to.meta)) || (to.meta && to.meta.tabs)) {
+    store.dispatch('admin/page/open', to);
+  }
+  // 更改标题
+  util.title({
+    title: to.meta.title
+  });
+  // 返回页面顶端
+  window.scrollTo(0, 0);
+});
+
+export default router;

package/src/setting.js

@@ -0,0 +1,202 @@
+/**
+ * Admin Plus 业务配置
+ * */
+
+const env = import.meta.env.NODE_ENV;
+const basePath = import.meta.env.VUE_APP_BASE_PATH;
+
+const Setting = {
+  /**
+   * 基础配置
+   * */
+  // 基本信息
+  info: {},
+  // 项目的 ID
+  appID: 'app',
+  // 根目录
+  rootPath: basePath == '' || basePath == null ? '/static/' : '/' + basePath + '/static/',
+  // 网页标题的后缀，不需要设置为 false 或空
+  titleSuffix: 'Admin Plus',
+  // 路由模式，可选值为 history 或 hash
+  routerMode: 'history',
+  // 页面切换时，是否显示模拟的进度条
+  showProgressBar: true,
+  // Cookies 默认保存时间，单位：天
+  cookiesExpires: 1,
+  /**
+   * 多语言配置
+   * */
+  i18n: {
+    // 默认语言
+    default: 'zh-CN',
+    // 是否根据用户电脑配置自动设置语言（仅第一次有效）
+    auto: false,
+    // 切换语言时是否刷新页面
+    refresh: false,
+    // 支持的语言列表
+    list: [
+      {
+        locale: 'zh-CN',
+        language: '简体中文'
+      },
+      {
+        locale: 'en-US',
+        language: 'English'
+      }
+    ],
+    // 是否通过远程接口来获取 i81n 文件
+    remote: false
+  },
+  /**
+   * 布局配置
+   * */
+  // 侧边菜单宽度，单位 px，不可动态修改，需与 setting.less 的 @menuSideWidth 保持一致
+  menuSideWidth: 256,
+  // 顶栏高度，单位 px，不可动态修改，需与 setting.less 的 @headerHeight 保持一致
+  headerHeight: 64,
+  // 侧边菜单折起时的宽度，单位 px，不可动态修改，需与 setting.less 的 @menuSideCollapseWidth 保持一致
+  menuSideCollapseWidth: 80,
+  layout: {
+    // 侧边栏风格，可选值为 dark 或 light
+    siderTheme: 'dark',
+    // 顶栏风格，可选值为 light、dark 或 primary
+    headerTheme: 'light',
+    // 顶栏是否置顶，开启后会覆盖侧边栏，需开启 headerFix
+    headerStick: false,
+    // 是否开启多 Tabs 页签
+    tabs: false,
+    // 多 Tabs 页签是否显示图标，开启 tabs 时有效
+    showTabsIcon: true,
+    // 是否固定多 Tabs 多页签
+    tabsFix: true,
+    // 再次点击 Tabs 页签时，是否重载当前页面
+    tabsReload: false,
+    // 页签是否支持拖拽排序
+    tabsOrder: true,
+    // 是否固定侧边栏
+    siderFix: true,
+    // 是否固定顶栏
+    headerFix: true,
+    // 是否在下滑时隐藏顶栏，需开启 headerFix，如果开启了 tabsFix，Tabs 也会被隐藏
+    headerHide: false,
+    // 是否显示顶部菜单栏
+    // 一般来说，侧边的菜单栏足以满足大部分业务，如需动态切换侧边栏，可开启此选项启用顶部一级菜单，此时侧边栏将作为二级菜单
+    headerMenu: false,
+    // 侧边菜单栏是否开启手风琴模式
+    menuAccordion: true,
+    // 是否显示折叠侧边栏按钮，移动端下会自动强制开启
+    showSiderCollapse: true,
+    // 侧边菜单栏是否默认折起
+    menuCollapse: false,
+    // 再次点击当前侧边菜单时，是否重载当前页面
+    menuSiderReload: false,
+    // 再次点击当前顶部菜单时，是否重载当前页面
+    menuHeaderReload: false,
+    // 侧边菜单折起时，是否在子菜单前显示父级菜单名称
+    showCollapseMenuTitle: false,
+    // 是否显示重载按钮
+    showReload: false,
+    // 是否显示搜索
+    showSearch: false,
+    // 是否显示通知
+    showNotice: false,
+    // 是否显示全屏
+    showFullscreen: true,
+    // 在手机访问时，是否在顶部显示小尺寸 logo
+    showMobileLogo: true,
+    // 是否显示全局面包屑，开启 headerMenu 时不可用
+    showBreadcrumb: true,
+    // 全局面包屑是否显示图标，开启 showBreadcrumb 时有效
+    showBreadcrumbIcon: false,
+    // 是否显示日志入口，开启与否，不影响日志记录，如不希望用户看到可关闭
+    showLog: env === 'development',
+    // 是否显示多语言
+    showI18n: false,
+    // 是否支持动态修改布局配置，移动端下会自动强制关闭
+    enableSetting: env === 'development',
+    // 退出登录时，是否二次确认
+    logoutConfirm: true,
+    // 是否根据操作系统缩放比例，自动调整比例
+    autoFixRatio: true,
+    // 是否允许点击遮罩层关闭
+    maskClosable: true,
+    // 是否允许拖动
+    draggable: true
+  },
+  /**
+   * 多页 Tabs
+   * */
+  page: {
+    // 默认打开的页签
+    opened: [],
+    // 登录时是否加载上次打开的页签
+    loadOpenedTabs: true
+  },
+  // /**
+  //  * 徽标配置
+  //  * */
+  // badge: {
+  //   // 侧边菜单徽标
+  //   siderMenuBadge: [
+  //     {
+  //       path: '/dashboard/monitor',
+  //       count: 1
+  //     },
+  //     {
+  //       path: '/system',
+  //       text: 'New',
+  //       type: 'warning'
+  //     },
+  //     {
+  //       path: '/list',
+  //       color: 'cyan'
+  //     },
+  //     {
+  //       path: '/list/table-list',
+  //       color: 'cyan'
+  //     }
+  //   ],
+  //   // 顶栏菜单徽标
+  //   headerMenuBadge: []
+  // },
+  /**
+   * 水印配置
+   * */
+  waterMark: {
+    // 是否显示
+    show: true,
+    // 初始显示文案，可以通过 vuex 随时更新
+    text: 'Admin Plus',
+    // 水印配置
+    options: {}
+  },
+  /**
+   * 功能配置
+   * */
+  // 相同路由，不同参数间进行切换，是否强力更新
+  sameRouteForceUpdate: false
+};
+
+const copyTo = (source, target) => {
+  for (let key in source) {
+    if (typeof source[key] === 'object') {
+      if (target[key] == null) {
+        target[key] = {};
+      }
+      copyTo(source[key], target[key]);
+    } else {
+      target[key] = source[key];
+    }
+  }
+};
+
+let localSetting = window.setting;
+
+if (localSetting) {
+  copyTo(localSetting, Setting);
+}
+
+// API地址
+Setting.apiBaseURL = process.env.NODE_ENV === 'development' ? Setting.apiBaseURL.dev : Setting.apiBaseURL.prd;
+
+export default Setting;

package/src/store/index.js

@@ -0,0 +1,9 @@
+import { createStore } from 'vuex';
+
+import admin from './modules/admin';
+
+export default createStore({
+  modules: {
+    admin
+  }
+});

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

@@ -0,0 +1,16 @@
+/**
+ * 该文件启用 `@/store/index.js` 导入所有 vuex 模块。
+ * 这个文件是一次性创建的，不应该被修改。
+ */
+
+const files = import.meta.globEager('./modules/*.js');
+const modules = {};
+
+Object.keys(files).forEach(key => {
+  modules[key.replace(/(\.\/modules\/|\.js)/g, '')] = files[key].default;
+});
+
+export default {
+  namespaced: true,
+  modules
+};

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

@@ -0,0 +1,103 @@
+/**
+ * 注册、登录、注销
+ * */
+import util from '../../../../libs/util';
+import router from '../../../../router';
+import userApi from '../../../../api/user';
+import swal from 'sweetalert2';
+
+export default {
+  namespaced: true,
+  actions: {
+    /**
+     * @description 登录
+     * @param {Object} context
+     * @param username {String} 用户账号
+     * @param password {String} 密码
+     * @param param route {Object} 登录成功后定向的路由对象 任何 vue-router 支持的格式
+     */
+    login({ dispatch }, { username = '', password = '' } = {}) {
+      return new Promise((resolve, reject) => {
+        userApi
+          .login({
+            account: username,
+            password
+          })
+          .then(async res => {
+            // 设置 cookie 一定要存 uuid 和 token 两个 cookie
+            // 整个系统依赖这两个数据进行校验和存储
+            // uuid 是用户身份唯一标识 用户注册的时候确定 并且不可改变 不可重复
+            // token 代表用户当前登录状态 建议在网络请求中携带 token
+            // 如有必要 token 需要定时更新，默认保存一天，可在 setting.js 中修改
+            // 如果你的 token 不是通过 cookie 携带，而是普通字段，也可视情况存储在 localStorage
+            util.cookies.set('uuid', res.user.id);
+            util.cookies.set('token', res.token);
+            // 设置 vuex 用户信息
+            await dispatch('admin/user/set', res.user, { root: true });
+            await dispatch('admin/user/setData', res.data, { root: true });
+            // 用户登录后从持久化数据加载一系列的设置
+            await dispatch('load');
+            // 获取动态菜单
+            await dispatch('admin/menu/getMenuList', false, { root: true });
+            // 结束
+            resolve(res);
+          })
+          .catch(err => {
+            // console.log('err: ', err);
+            reject(err);
+          });
+      });
+    },
+    /**
+     * @description 退出登录
+     * */
+    logout({ dispatch }, { confirm = false } = {}) {
+      async function logout() {
+        // 删除cookie
+        util.cookies.remove('token');
+        util.cookies.remove('uuid');
+        // 清空 vuex 用户信息
+        await dispatch('admin/user/set', {}, { root: true });
+        // 跳转路由
+        router.push({
+          name: 'login'
+        });
+      }
+
+      if (confirm) {
+        swal
+          .fire({
+            title: '确定要退出吗？\r\nAre you sure to logout?',
+            icon: 'question',
+            showCancelButton: true,
+            confirmButtonText: '确定 OK',
+            confirmButtonColor: '#2d8cf0',
+            cancelButtonText: '取消 Cancel'
+          })
+          .then(result => {
+            if (result.value) {
+              logout();
+            }
+          });
+      } else {
+        logout();
+      }
+    },
+    /**
+     * @description 用户登录后从持久化数据加载一系列的设置
+     * @param {Object} state vuex state
+     * @param {Object} dispatch vuex dispatch
+     * @param {Object} loadOpenedTabs 是否加载页签信息
+     */
+    load({ dispatch }, { loadOpenedTabs = true } = {}) {
+      return new Promise(async resolve => {
+        // 加载用户登录信息
+        await dispatch('admin/user/load', null, { root: true });
+        // 持久化数据加载上次退出时的多页列表
+        await dispatch('admin/page/openedLoad', { loadOpenedTabs }, { root: true });
+        // end
+        resolve();
+      });
+    }
+  }
+};