mooho-base-admin-plus 0.1.0

package/src/libs/request/index.js

@@ -0,0 +1,158 @@
+import store from '../../store';
+import axios from 'axios';
+import util from '../util';
+import router from '../../router';
+import swal from 'sweetalert2';
+import Setting from '../../setting';
+
+// import { Message, Notice } from 'view-design';
+
+// 创建一个错误
+function errorCreate(msg) {
+  const err = new Error(msg);
+  errorLog(err);
+  throw err;
+}
+
+// 记录和显示错误
+function errorLog(err) {
+  // 添加到日志
+  store.dispatch('admin/log/push', {
+    message: '数据请求异常',
+    type: 'error',
+    meta: {
+      error: err
+    }
+  });
+  // 打印到控制台
+  if (process.env.NODE_ENV === 'development') {
+    util.log.error('>>>>>> Error >>>>>>');
+    console.log(err);
+  }
+
+  swal.fire({
+    title: err.message,
+    icon: 'error',
+    confirmButtonText: '确定',
+    confirmButtonColor: '#2d8cf0',
+    cancelButtonText: '取消'
+  });
+}
+
+//axios.defaults.baseURL = 'aaa';
+
+// 创建一个 axios 实例
+const service = axios.create({
+  baseURL: Setting.apiBaseURL
+  // timeout: 5000 // 请求超时时间
+});
+
+// 请求拦截器
+service.interceptors.request.use(
+  config => {
+    store.commit('admin/loader/start');
+
+    // 在请求发送之前做一些处理
+    const token = util.cookies.get('token');
+    // 让每个请求携带token-- ['X-Token']为自定义key 请根据实际情况自行修改
+    config.headers['Authorization'] = 'Bearer ' + token;
+    return config;
+  },
+  error => {
+    // 发送失败
+    console.log(error);
+    Promise.reject(error);
+  }
+);
+
+// 响应拦截器
+service.interceptors.response.use(
+  response => {
+    store.commit('admin/loader/end');
+
+    // dataAxios 是 axios 返回数据中的 data
+    const dataAxios = response.data;
+
+    // return dataAxios;
+
+    // 这个状态码是和后端约定的
+    const code = dataAxios.code;
+
+    // console.log('dataAxios', dataAxios)
+    // console.log('code', code)
+    // 根据 code 进行判断
+    if (code == null) {
+      // 如果没有 code 代表这不是项目后端开发的接口
+      return dataAxios;
+    } else {
+      // 有 code 代表这是一个后端接口 可以进行进一步的判断
+      switch (code) {
+        case 0:
+          // [ 示例 ] code === 0 代表没有错误
+          return dataAxios.data;
+        // case 401:
+        //     console.log('401');
+        //     router.push('/account/login');
+        //     // [ 示例 ] code === 0 代表没有错误
+        //     return dataAxios.data;
+        // case 'xxx':
+        //     // [ 示例 ] 其它和后台约定的 code
+        //     errorCreate(`[ code: xxx ] ${dataAxios.msg}: ${response.config.url}`);
+        //     break;
+        default:
+          // 不是正确的 code
+          errorCreate(dataAxios.message);
+      }
+    }
+  },
+  error => {
+    if (error && error.response && error.response.status === 401) {
+      router.push('/login?redirect=' + router.history._startLocation);
+    }
+
+    store.commit('admin/loader/end');
+    if (error && error.response) {
+      switch (error.response.status) {
+        case 400:
+          error.message = '请求错误';
+          break;
+        case 401:
+          error.message = '未授权，请登录';
+          break;
+        case 403:
+          error.message = '拒绝访问';
+          break;
+        case 404:
+          error.message = `请求地址出错: ${error.response.config.url}`;
+          break;
+        case 408:
+          error.message = '请求超时';
+          break;
+        case 500:
+          error.message = '内部错误';
+          break;
+        case 501:
+          error.message = '服务未实现';
+          break;
+        case 502:
+          error.message = '网关错误';
+          break;
+        case 503:
+          error.message = '服务不可用';
+          break;
+        case 504:
+          error.message = '网关超时';
+          break;
+        case 505:
+          error.message = 'HTTP版本不受支持';
+          break;
+        default:
+          break;
+      }
+    }
+    errorLog(error);
+    return Promise.reject(error);
+  }
+);
+
+export default service;

package/src/libs/system/index.js

@@ -0,0 +1,234 @@
+/**
+ * 系统内置方法集，正常情况下您不应该修改或移除此文件
+ * */
+
+import { cloneDeep } from 'lodash';
+import Setting from '../../setting';
+
+/**
+ * @description 根据当前路由，找打顶部菜单名称
+ * @param {String} currentPath 当前路径
+ * @param {Array} menuList 所有路径
+ * */
+function getHeaderName(currentPath, menuList) {
+  const allMenus = [];
+  menuList.forEach(menu => {
+    const headerName = menu.header || '';
+    const menus = transferMenu(menu, headerName);
+    allMenus.push({
+      path: menu.path,
+      header: headerName
+    });
+    menus.forEach(item => allMenus.push(item));
+  });
+
+  const currentMenu = allMenus.find(item => item.path === currentPath);
+  return currentMenu ? currentMenu.header : null;
+}
+
+function transferMenu(menu, headerName) {
+  if (menu.children && menu.children.length) {
+    return menu.children.reduce((all, item) => {
+      all.push({
+        path: item.path,
+        header: headerName
+      });
+      const foundChildren = transferMenu(item, headerName);
+      return all.concat(foundChildren);
+    }, []);
+  } else {
+    return [menu];
+  }
+}
+
+export { getHeaderName };
+
+/**
+ * @description 根据当前顶栏菜单 name，找到对应的二级菜单
+ * @param {Array} menuList 所有的二级菜单
+ * @param {String} headerName 当前顶栏菜单的 name
+ * */
+function getMenuSider(menuList, headerName = '') {
+  if (headerName) {
+    return menuList.filter(item => item.header === headerName);
+  } else {
+    return menuList;
+  }
+}
+
+export { getMenuSider };
+
+/**
+ * @description 根据当前路由，找到其所有父菜单 path，作为展开侧边栏 open-names 依据
+ * @param {String} currentPath 当前路径
+ * @param {Array} menuList 所有路径
+ * */
+function getSiderSubmenu(currentPath, menuList) {
+  const allMenus = [];
+  menuList.forEach(menu => {
+    const menus = transferSubMenu(menu, []);
+    allMenus.push({
+      path: menu.path,
+      openNames: []
+    });
+    menus.forEach(item => allMenus.push(item));
+  });
+
+  const currentMenu = allMenus.find(item => item.path === currentPath);
+  return currentMenu ? currentMenu.openNames : [];
+}
+
+function transferSubMenu(menu, openNames) {
+  if (menu.children && menu.children.length) {
+    const itemOpenNames = openNames.concat([menu.path]);
+    return menu.children.reduce((all, item) => {
+      all.push({
+        path: item.path,
+        openNames: itemOpenNames
+      });
+      const foundChildren = transferSubMenu(item, itemOpenNames);
+      return all.concat(foundChildren);
+    }, []);
+  } else {
+    return [menu].map(item => {
+      return {
+        path: item.path,
+        openNames: openNames
+      };
+    });
+  }
+}
+
+export { getSiderSubmenu };
+
+/**
+ * @description 递归获取所有子菜单
+ * */
+function getAllSiderMenu(menuList) {
+  let allMenus = [];
+
+  menuList.forEach(menu => {
+    if (menu.children && menu.children.length) {
+      const menus = getMenuChildren(menu);
+      menus.forEach(item => allMenus.push(item));
+    } else {
+      allMenus.push(menu);
+    }
+  });
+
+  return allMenus;
+}
+
+function getMenuChildren(menu) {
+  if (menu.children && menu.children.length) {
+    return menu.children.reduce((all, item) => {
+      const foundChildren = getMenuChildren(item);
+      return all.concat(foundChildren);
+    }, []);
+  } else {
+    return [menu];
+  }
+}
+
+export { getAllSiderMenu };
+
+/**
+ * @description 将菜单转为平级
+ * */
+function flattenSiderMenu(menuList, newList) {
+  menuList.forEach(menu => {
+    let newMenu = {};
+    for (let i in menu) {
+      if (i !== 'children') newMenu[i] = cloneDeep(menu[i]);
+    }
+    newList.push(newMenu);
+    menu.children && flattenSiderMenu(menu.children, newList);
+  });
+  return newList;
+}
+
+export { flattenSiderMenu };
+
+/**
+ * @description 判断列表1中是否包含了列表2中的某一项
+ * 因为用户权限 access 为数组，includes 方法无法直接得出结论
+ * */
+function includeArray(list1, list2) {
+  let status = false;
+  list2.forEach(item => {
+    if (list1.includes(item)) status = true;
+  });
+  return status;
+}
+
+export { includeArray };
+
+/**
+ * @description 动态菜单相关
+ * */
+
+/**
+ * @description 保存动态侧边菜单到本地
+ * */
+function setNativeMenuSider(data) {
+  if (data) {
+    localStorage.setItem(`admin-plus-${Setting.appID}-menu-sider`, JSON.stringify(data));
+  } else {
+    localStorage.removeItem(`admin-plus-${Setting.appID}-menu-sider`);
+  }
+}
+
+export { setNativeMenuSider };
+
+/**
+ * @description 读取本地的动态侧边菜单
+ * */
+function getNativeMenuSider() {
+  return JSON.parse(localStorage.getItem(`admin-plus-${Setting.appID}-menu-sider`) || '[]');
+}
+
+export { getNativeMenuSider };
+
+/**
+ * @description 保存动态顶栏菜单到本地
+ * */
+function setNativeMenuHeader(data) {
+  if (data) {
+    localStorage.setItem(`admin-plus-${Setting.appID}-menu-header`, JSON.stringify(data));
+  } else {
+    localStorage.removeItem(`admin-plus-${Setting.appID}-menu-header`);
+  }
+}
+
+export { setNativeMenuHeader };
+
+/**
+ * @description 读取本地的动态顶栏菜单
+ * */
+function getNativeMenuHeader() {
+  return JSON.parse(localStorage.getItem(`admin-plus-${Setting.appID}-menu-header`) || '[]');
+}
+
+export { getNativeMenuHeader };
+
+/**
+ * @description 保存权限到本地
+ * */
+function setNativePermission(data) {
+  if (data) {
+    localStorage.setItem(`admin-plus-${Setting.appID}-permission`, JSON.stringify(data));
+  } else {
+    localStorage.removeItem(`admin-plus-${Setting.appID}-permission`);
+  }
+}
+
+export { setNativePermission };
+
+/**
+ * @description 读取本地的权限
+ * */
+function getNativePermission() {
+  return JSON.parse(localStorage.getItem(`admin-plus-${Setting.appID}-permission`) || '[]');
+}
+
+export { getNativePermission };

package/src/libs/util.cookies.js

@@ -0,0 +1,44 @@
+import Cookies from 'js-cookie';
+import Setting from '../setting';
+
+const cookies = {};
+
+/**
+ * @description 存储 cookie 值
+ * @param {String} name cookie name
+ * @param {String} value cookie value
+ * @param {Object} cookieSetting cookie setting
+ */
+cookies.set = function (name = 'default', value = '', cookieSetting = {}) {
+  let currentCookieSetting = {};
+
+  if (Setting.cookiesExpires !== 0) currentCookieSetting.expires = Setting.cookiesExpires;
+
+  Object.assign(currentCookieSetting, cookieSetting);
+  Cookies.set(`admin-plus-${Setting.appID}-${name}`, value, currentCookieSetting);
+};
+
+/**
+ * @description 拿到 cookie 值
+ * @param {String} name cookie name
+ */
+cookies.get = function (name = 'default') {
+  return Cookies.get(`admin-plus-${Setting.appID}-${name}`);
+};
+
+/**
+ * @description 拿到 cookie 全部的值
+ */
+cookies.getAll = function () {
+  return Cookies.get();
+};
+
+/**
+ * @description 删除 cookie
+ * @param {String} name cookie name
+ */
+cookies.remove = function (name = 'default') {
+  return Cookies.remove(`admin-plus-${Setting.appID}-${name}`);
+};
+
+export default cookies;

package/src/libs/util.db.js

@@ -0,0 +1,13 @@
+import low from 'lowdb';
+import LocalStorage from 'lowdb/adapters/LocalStorage';
+import Setting from '../setting';
+
+const adapter = new LocalStorage(`admin-plus-${Setting.appID}`);
+const db = low(adapter);
+
+db.defaults({
+  sys: {},
+  database: {}
+}).write();
+
+export default db;

package/src/libs/util.js

@@ -0,0 +1,55 @@
+import cookies from './util.cookies';
+import log from './util.log';
+import db from './util.db';
+
+import Setting from '../setting';
+
+const util = {
+  cookies,
+  log,
+  db
+};
+
+function tTitle(title = '') {
+  const $t = window ? window.$app.$t : null;
+  if ($t) {
+    if (title.indexOf('$t:') === 0) {
+      return $t(title.split('$t:')[1]);
+    } else {
+      return title;
+    }
+  } else {
+    return title;
+  }
+}
+
+/**
+ * @description 更改标题
+ * @param {Object} title 标题
+ * @param {Object} count 未读消息数提示（可视情况选择使用或不使用）
+ */
+util.title = function ({ title, count }) {
+  title = tTitle(title);
+  let fullTitle;
+
+  if (Setting.titleSuffix === false || Setting.titleSuffix === '') {
+    fullTitle = title ? `${title}` : '';
+  } else {
+    fullTitle = title ? `${title} - ${Setting.titleSuffix}` : Setting.titleSuffix;
+  }
+
+  if (count) fullTitle = `(${count}条消息)${fullTitle}`;
+  window.document.title = fullTitle;
+};
+
+function requestAnimation(task) {
+  if ('requestAnimationFrame' in window) {
+    return window.requestAnimationFrame(task);
+  }
+
+  setTimeout(task, 16);
+}
+
+export { requestAnimation };
+
+export default util;

package/src/libs/util.log.js

@@ -0,0 +1,88 @@
+const log = {};
+
+/**
+ * @description 返回这个样式的颜色值
+ * @param {String} type 样式名称 [ primary | success | warning | error | text ]
+ */
+function typeColor(type = 'default') {
+  let color = '';
+  switch (type) {
+    case 'default':
+      color = '#515a6e';
+      break;
+    case 'primary':
+      color = '#2d8cf0';
+      break;
+    case 'success':
+      color = '#19be6b';
+      break;
+    case 'warning':
+      color = '#ff9900';
+      break;
+    case 'error':
+      color = '#ed4014';
+      break;
+    default:
+      break;
+  }
+  return color;
+}
+
+/**
+ * @description 打印一个 [ title | text ] 样式的信息
+ * @param {String} title title text
+ * @param {String} info info text
+ * @param {String} type style
+ */
+log.capsule = function (title, info, type = 'primary') {
+  console.log(
+    `%c ${title} %c ${info} %c`,
+    'background:#35495E; padding: 1px; border-radius: 3px 0 0 3px; color: #fff;',
+    `background:${typeColor(type)}; padding: 1px; border-radius: 0 3px 3px 0;  color: #fff;`,
+    'background:transparent'
+  );
+};
+
+/**
+ * @description 打印彩色文字
+ */
+log.colorful = function (textArr) {
+  console.log(`%c${textArr.map(t => t.text || '').join('%c')}`, ...textArr.map(t => `color: ${typeColor(t.type)};`));
+};
+
+/**
+ * @description 打印 default 样式的文字
+ */
+log.default = function (text) {
+  log.colorful([{ text }]);
+};
+
+/**
+ * @description 打印 primary 样式的文字
+ */
+log.primary = function (text) {
+  log.colorful([{ text, type: 'primary' }]);
+};
+
+/**
+ * @description 打印 success 样式的文字
+ */
+log.success = function (text) {
+  log.colorful([{ text, type: 'success' }]);
+};
+
+/**
+ * @description 打印 warning 样式的文字
+ */
+log.warning = function (text) {
+  log.colorful([{ text, type: 'warning' }]);
+};
+
+/**
+ * @description 打印 error 样式的文字
+ */
+log.error = function (text) {
+  log.colorful([{ text, type: 'error' }]);
+};
+
+export default log;

package/src/libs/water-mark.js

@@ -0,0 +1,44 @@
+/**
+ * @description 生成水印
+ * */
+export default function getWaterMarkCanvas(text, options) {
+  const canvas = document.createElement('canvas');
+  const ctx = canvas.getContext('2d');
+  const canvasWidth = 400;
+  const canvasHeight = 400;
+  canvas.width = canvasWidth;
+  canvas.height = canvasHeight;
+  ctx.textAlign = 'center';
+  ctx.textBaseline = 'bottom';
+  ctx.globalAlpha = options.globalAlpha || 0.1;
+  ctx.font = options.font || '20px Microsoft Yahei';
+
+  ctx.translate(canvasWidth / 2, canvasHeight / 2);
+  ctx.rotate(options.rotateAngle || -0.4);
+
+  ctx.translate((-canvasWidth / 2) * 1.2, (-canvasHeight / 2) * 1.2);
+
+  const waterMarkText = [];
+  const chunkWidth = options.chunkWidth || 400;
+  const chunkHeight = options.chunkHeight || 120;
+  const horizontalChunkCount = 0;
+  const verticalChunkCount = 1;
+
+  for (let j = 0, initY = chunkHeight / 2, indent = 0; j <= verticalChunkCount; j += 1) {
+    indent = parseInt(j % 2);
+
+    for (let i = 0, initX = chunkWidth / 2; i <= horizontalChunkCount; i += 1) {
+      waterMarkText.push({
+        text,
+        x: i * chunkWidth + indent * initX,
+        y: j * chunkHeight + initY
+      });
+    }
+  }
+
+  waterMarkText.forEach(item => {
+    ctx.fillText(item.text, item.x, item.y);
+  });
+
+  return ctx.canvas.toDataURL();
+}

package/src/menu/header.js

@@ -0,0 +1,20 @@
+// 菜单，顶栏
+
+export default [
+  {
+    path: '/',
+    title: '首页',
+    icon: 'md-home',
+    hideSider: false, // 是否隐藏侧边栏
+    name: 'home', // 用 name 区分哪些二级菜单显示
+    auth: ['op', 'admin'] // 权限
+  },
+  {
+    path: '/log',
+    title: '日志',
+    icon: 'md-locate',
+    hideSider: true,
+    name: 'system',
+    auth: ['op', 'admin']
+  }
+];

package/src/menu/modules/dashboard.js

@@ -0,0 +1,23 @@
+const pre = '/dashboard/';
+
+export default {
+  path: '/dashboard',
+  title: 'Dashboard',
+  header: 'home',
+  custom: 'i-icon-demo i-icon-demo-dashboard',
+  children: [
+    {
+      path: `${pre}console`,
+      title: '主控台'
+    },
+    {
+      path: `${pre}monitor`,
+      title: '监控页'
+    },
+    {
+      path: `${pre}workplace`,
+      title: '工作台',
+      subtitle: 'Workplace'
+    }
+  ]
+};

package/src/menu/sider.js

@@ -0,0 +1,12 @@
+// 菜单，侧边栏
+import dashboard from './modules/dashboard';
+
+export default [
+  dashboard,
+  {
+    path: '/i18n',
+    title: '$t:menu.i18n',
+    header: 'home',
+    custom: 'i-icon-demo i-icon-demo-i18n'
+  }
+];

package/src/mixins/app.js

@@ -0,0 +1,9 @@
+/**
+ * 通用混合
+ * */
+export default {
+  methods: {
+    // 当 $route 更新时触发
+    appRouteChange() {}
+  }
+};