admin-base-frame

基于 Vue、Element_UI 的后台管理基础框架，提供后台管理常用组件、指令、方法等

Installation

Using npm:

  $ npm install --save admin-base-frame

Using yarn:

  $ yarn add admin-base-frame

Quick Start

import AdminBaseFrame from 'admin-base-frame'
/*
 * @param {String} el Vue 的挂载元素
 * @param {element} App[required] 根组件
 * @param {Object} routeOptions[required] vue-router options[mode, beforeEach...]; routeMap: {constantRoutes: 固定路由 routes: 第一层路由 routes_2: 第二层 以此类推（层级高的页面显示在前）}
 * @param {Object} storeMap new Vuex.Store(params) 中的params
 * @param {Object} vueArg  Vue 的其他参数
 * @param {String} title  标题
 * @param {String} iconFamily 自己引入的iconfont的名称
 * @param {Object} loginPageConf 登录页的配置
 */
AdminBaseFrame.init({
  el: '#app',
  App,
  routeOptions: {
    beforeEach,
    afterEach,
    routeMap: {
      routes
    }
  },
  storeMap: store,
  vueArg: {},
  title: 'xx系统',
  iconFamily: 'iconfont',
  loginPageConf: {
    title: '登录'
  }
})

暴露的属性

  window.ADMIN_BASE_FRAME = {
    version // 版本号
    store // vuex store 实例
    createRouter // 创建路由 params：{ roles = [] }
    resetRouter // 重置路由
    setUserInfo // 用于设置导航栏的头像 params: { name, avatar }
    setLastVisitedView // 设置最后访问的页面 params: path
  }

监听事件

// event: login | logout
// params: 参数
this.$root.eventHub.$on('adminBaseFrameEvent', (event, params) => {
  // do something
})

组件

dialog

// html
;`
    <ab-dialog>
      // body element
    </ab-dialog>
  `
// props
title: String // 标题
width: String // 宽度 default: 50%
customClass: String // 自定义类名
showClose: Boolean // 是否显示关闭按钮 default: true
closeOnClickModal: Boolean // 是否可以通过点击modal关闭Dialog default: false
center: Boolean // 是否对头部和底部采用居中布局 default: true
// on event
openCallback() // Dialog 打开的回调
closeCallback() // Dialog 关闭的回调
closeedCallback() // Dialog 关闭动画结束的回调
cancel() // Dialog点击取消的回调
confirm() // Dialog点击确认的回调

filter

  // html
  `
    <ab-filter />
  `
  // props
  // 自定义类名
  className: String
  /**
   * @Array { object }
   * @desc 搜索栏列表
   * @property { string } label 显示文本
   * @property { string } key form-item绑定的字段
   * @property { string } value form-item绑定字段的默认值
   * @property { string } type form-item类型 input || select || time || date
   * @property { string } event 事件名
   * @property { string } placeholder placeholder
   * @property { [object] } options select element options
   * @property { string } dateType el-date-picker type
   */
  filterList: {
    type: Array,
    default() {
      return []
    }
  }
  // default btn list: ['btn_search', 'btn_reset', 'btn_export']
  defaultBtn: {
    type: Array,
    default() {
      return []
    }
  }
  /**
   * @Array { object }
   * @desc 搜索栏按钮列表
   * @property { string } label 显示文本
   * @property { string } icon icon
   * @property { string } elType 类型
   * @property { string } event 事件名
   * @property { [string] } reqField 当事件触发时希望得到的数据
   * @property { [object] } dropdownMenu el-dropdown-menu {label, event}
   */
  filterBtnList: {
    type: Array,
    default() {
      return []
    }
  }
  // label width
  labelWidth: {
    type: String,
    default: '80px'
  }
  // 是否显示switch btn
  showSwitch: {
    type: Boolean,
    default: true
  }
  // 是否左右布局
  isFlexRow: Boolean
  // on event
  // event: ['自定义事件']事件名  searchQuery: 搜索条件
  handleFilterBodyEvent(event, searchQuery)
  handleFilterBtnClick(event, searchQuery)

form

  // html
  `
    <ab-form />
  `
  // props
  // 自定义类名
  className: String
  // label宽度
  labelWidth: {
    type: String,
    default: '120px'
  }
  // 验证规则
  formRules: {
    type: Object,
    default() {
      return {}
    }
  }
  /**
   * @Array { object }
   * @desc 表格字段配置
   * @property { string } type el-form-item type 使用对应的控件
   * @property { string } label el-form-item label 表单item对应的文本
   * @property { string } key el-form-item prop 表单item对应的字段
   * @property { any } value el-form-item prop 表单item对应的字段的值
   * @property { string } className el-form-item class
   * @property { string } placeholder placeholder
   * @property { function } props 返回需要使用的字段数据 el-select\el-radio > {options, value: item联动需要强制设置的值, ...arg}
   * @property { function } ifRender 返回Boolean true: 显示 false: 隐藏
   * @property { object } elProp element ui 组件的其他属性
   * @property { object } style style
   */
  fieldList: Array
  // on event
  // event: ['submit', '自定义事件']  data: form data
  handleEvent(event, data)

page-table

  // html
  <ab-page-table />
  // props
  // 自定义类名
  className: {
    type: String,
    default: ''
  }
  // 刷新: 在父组件通过设置 refresh = Math.random() 达到刷新目的
  refresh: Number
  // 获取数据的接口
  apiFn: Function
  // 表格数据所在字段
  resFieldListStr: {
    type: String,
    default: 'data'
  }
  // 数据总数所在字段
  resFieldTotalStr: {
    type: String,
    default: 'data'
  }
  // 是否显示序号
  showTabIndex: {
    type: Boolean,
    default: false
  }
  // 是否有选择框
  hasCheckBox: {
    type: Boolean,
    default: true
  }
  // 选中列表
  checkedList: {
    type: Array,
    default: () => {
      return []
    }
  }
  // 重置当前页
  initCurpage: {
    type: Number,
    default: 1
  }
  // 查询条件
  query: {
    type: Object,
    default: () => {
      return {}
    }
  }
  /**
   * @Array { object }
   * @desc 表格字段配置
   * @property { string } label 表头text
   * @property { string } value 对应列的字段
   * @property { string } width width
   * @property { string } minWidth minWidth
   * @property { string } fixed fixed
   * @property { Boolean } hidden 是否隐藏
   * @property { Boolean | 'custom' } sortable 是否可排序
   * @property { String } tagType el-tag type
   * @property { Function } format 格式化显示内容
   */
  fieldList: {
    type: Array,
    default: () => {
      return []
    }
  }
  /**
   * @prop { object }
   * @desc 操作栏配置
   * @property { string } label 显示文本
   * @property { string } fixed fixed position
   * @property { string } width width
   * @property { [object] } btnList 按钮列表 {label, type, icon, event: event_name, show: Boolean}
   */
  handle: {
    type: Object,
    default() {
      return {}
    }
  }
  // 列表数据
  tableData: {
    type: Array,
    default: () => {
      return []
    }
  }
  // filter label width
  filterLabelWidth: {
    type: String,
    default: '80px'
  }
  /**
   * @Array { object }
   * @desc 搜索栏列表
   * @property { string } label 显示文本
   * @property { string } key form-item绑定的字段
   * @property { string } value form-item绑定字段的默认值
   * @property { string } type form-item类型 input || select || time || date
   * @property { string } event 事件名
   * @property { string } placeholder placeholder
   * @property { [object] } options select element options
   * @property { string } dateType el-date-picker type
   */
  filterList: Array
  /**
   * @Array { object }
   * @desc 搜索栏按钮列表
   * @property { string } label 显示文本
   * @property { string } icon icon
   * @property { string } elType 类型
   * @property { string } event 事件名
   * @property { [string] } reqField 当事件触发时希望得到的数据
   * @property { [object] } dropdownMenu el-dropdown-menu
   */
  filterBtnList: {
    type: Array,
    default() {
      return []
    }
  }
  // filter default btn list: ['btn_search', 'btn_reset', 'btn_export']
  defaultFilterBtn: {
    type: Array,
    default() {
      return []
    }
  }
  // 是否显示 filter switch btn
  showFilterSwitch: {
    type: Boolean,
    default: true
  }
  // 是否左右布局
  filterIsFlexRow: Boolean
  // 是否可拖拽
  canDrop: {
    type: Boolean,
    default: false,
  }
  // table title
  tableTitle: String
  // on event
  /*
   * event: ['btn_search', 'btn_export_cur', 'btn_export_all' ,'使用者自定义事件']
   * data: 希望得到的数据
   */
  handleFilterBtnClick(event, data)
  /*
   * filter body event: input 回车触发的事件等
   * event: 使用者自定义事件
   * data: query
   */
  handleFilterBodyEvent(event, data)
  // 表格内部按钮的点击事件(使用者自定义的事件)派发 event: ['tableCheckRows', 'tableSortChange', '使用者自定义事件']  data: data
  handleTableEvent(event, data)

folder-tree

  // html
  `
    <ab-folder-tree />
  `
  // props
  // 自定义类名
    className: String,
    // 树
    dataTree: {
      type: Array,
      default() {
        return []
      }
    },
    // 是否显示过滤栏
    showFilterBar: {
      type: Boolean,
      default: false
    },
    // el-tree filter-node-method
    filterNode: {
      type: Function,
      default() {
        return (value, data) => {
          if (!value) return true
          return data.label.indexOf(value) !== -1
        }
      }
    },
    // 默认展开所有
    defaultExpandAll: {
      type: Boolean,
      default: false
    },
    // 是否每次只打开一个同级树节点
    accordion: {
      type: Boolean,
      default: false
    },
    // 是否懒加载子节点
    lazy: {
      type: Boolean,
      default: false
    },
    // 获取数据的接口
    apiFn: Function,
    // 根节点 如果是函数请返回数组
    rootNode: {
      type: [Array, Function],
      default() {
        return [{ label: '/', id: 0, children: [] }]
      }
    },
    // 页码对应的字段和初始值
    pnConf: {
      type: Object,
      default() {
        return {
          key: 'pn',
          value: 1
        }
      }
    },
    // page size 对应的字段和初始值
    psConf: {
      type: Object,
      default() {
        return {
          key: 'ps',
          value: 10
        }
      }
    },
    // 懒加载节点的请求参数字段
    queryField: {
      type: Array,
      default() {
        return []
      }
    }
    // on event
    /*
    * event: ['appendNode', 'removeNode', 'refreshNode', 'nodeClick', '使用者自定义事件']
    * data: node data
    * callback: function
    */
    handleEvent(event, data, callback)

upload

  // html
  `
    <ab-upload />
  `
  // props
  // 自定义类名
  className: String
  // 上传的地址
  url: {
    type: String,
    default: ''
  }
  // 是否支持上传多个
  multiple: {
    type: Boolean,
    default: true
  }
  // 显示上传的内容
  fileData: {
    type: Array
  }
  // 是否自动上传
  autoUpload: {
    type: Boolean,
    default: true
  }
  // 上传参数
  uploadData: {
    type: Object,
    default() {
      return {}
    }
  }
  // 上传的文件类型
  uploadType: {
    type: String,
    default: 'image'
  }
  drag: Boolean,
  // 上传的文件个数
  uploadNums: {
    type: Number,
    default: -1
  }
  // 文件类型
  listType: {
    type: String,
    default: 'text'
  }
  // el-upload slot trigger text
  slotTriggerText: {
    type: String,
    default: '点击上传'
  }
  // el-upload slot tip text
  slotTip: String
  displayMod: {
    type: String,
    default: 'btn' // btn: 按钮 drag: 拖拽 plus: 加号
  }
  // on event
  /*
   * event: ['uploadTypeError', 'uploadProgress', 'uploadSuccess', 'uploadFail']
   * data: data
   */
  handleEvent(event, data)

histogram

  // html
  `
    <ab-chart-histogram />
  `
  // props
  // 要显示的数据 {rows: [{}], columns: []}
    data: {
      type: Object,
      default() {
        return {}
      }
    }
    /**
     * 自定义设置
     * dimension: array 维度: 默认columns第一项为维度
     * metrics: array 指标: 默认columns第二项起为指标
     * yAxisType: array 左右坐标轴数据类型: 可选值: KMB, normal, percent
     * yAxisName: array 左右坐标轴标题
     * axisSite: object 指标所在的轴: 默认不在right轴的指标都在left轴
     * digit: number 设置数据类型为percent时保留的位数: 默认为2
     * scale: array 是否是脱离 0 值比例: 默认为[false, false]，表示左右两个轴都不会脱离0值比例。设置成 true 后坐标刻度不会强制包含零刻度
     * min: array 左右坐标轴最小值
     * max: array 左右坐标轴最大值
     * labelMap: object 设置指标的别名，同时作用于提示框和图例
     * legendName: object 设置图表上方图例的别名
     * label: object 设置图形上的文本标签
     * itemStyle: object 图形样式
     * showLine: array 展示为折线图的指标
     * xAxisType: string 横轴的类型: 可选值'category'，'value'，默认为'category'
     * opacity: number 透明度
     * stack: object 堆叠选项
     */
    settings: {
      type: Object,
      default() {
        return {}
      }
    }
    // 背景对象
    theme: Object
    // 背景名
    themeName: String
    // echarts.init 是的initOptions
    initOptions: {
      type: Object,
      default() {
        return {}
      }
    }
    // echarts的option格式，可覆盖data、settings的属性
    option: {
      type: Object,
      default() {
        return {}
      }
    }

line

// html
;`
    <ab-chart-line />
  `
// props 同histogram

circle-counter

  // html
  `
    <ab-circle-counter />
  `
  // props
  // 元素的width、height
  size: {
    type: String,
    default: '100%'
  },
  // 进度值颜色
  activeCountColor: {
    type: String,
    default: '#333'
  },
  // 进度值fontsize
  activeCountFontSize: {
    type: String,
    default: '40px'
  },
  // 文本
  label: {
    type: String,
    default: ''
  },
  // 文本fontsize
  labelFontSize: {
    type: String,
    default: '32px'
  },
  // 最大值
  dashCount: {
    type: Number,
    default: 100
  },
  // 实际值
  activeCount: {
    type: Number,
    default: 10
  },
  // 圆边占半径百分比
  strokeWidth: {
    type: Number,
    default: 5
  },
  // 激活的圆边占半径百分比
  activeWidth: {
    type: Number,
    default: 5
  },
  // 圆弧颜色
  stroke: {
    type: String,
    default: '#333'
  },
  // 激活的圆弧颜色
  activeStroke: {
    type: String,
    default: '#e58346'
  },
  // 虚线间距占宽度的比例
  dashSpacing: {
    type: Number,
    default: 1 / 4
  },
  // 旋转角度
  rotate: {
    type: Number,
    default: -90
  },
  // 顺时针、逆时针
  reverse: {
    type: Boolean,
    default: false
  }

directive

v - focus // 自动聚焦
v - interval - click // 一定事件间隔内（默认1s）频繁点击 只触发一次
v - waves // 点击按钮水波纹效果

utils

this.ab_func = {
  hasClass,
  addClass,
  removeClass,
  mixin, // 混合对象
  parseTime, // 格式化时间 (Object|string|number, 'y-m-d h:i:s')
  formatTime, // (stringn|number) 根据现在时间返回对应文案(刚刚、x分钟前...)
  safe, // 数据安全访问 (object|Array[原始数据], string[要返回的数据，用'.'连接，数组用'.+数字表示'], *[如果数据有误，返回的值，选填])
  exportJsonToExcel // 导出表格数据 ({ allColumns = [{label: '表头文案', value: '对应的字段'}], tableData, excelName })
}

common style

  $n: 5 10 20 30 ...
  pd-t$n: padding-top: $npx
  pd-l$n: padding-left: $npx
  pd-r$n: padding-right: $npx
  pd-b$n: padding-bottom: $npx
  pd-x$n: padding: 0 $npx
  pd-y$n: padding: $npx 0
  pd-f$n: padding: $npx

  mg-t$n: margin-top: $npx
  mg-l$n: margin-left: $npx
  mg-r$n: margin-right: $npx
  mg-b$n: margin-bottom: $npx
  mg-x$n: margin: 0 $npx
  mg-y$n: margin: $npx 0
  mg-f$n: margin: $npx

  $d: 12-40
  fs-$d: font-size: $dpx