first commit

src/App.vue

@@ -0,0 +1,43 @@
+<template>
+  <a-config-provider :locale="locale">
+    <div id="app">
+      <router-view/>
+    </div>
+  </a-config-provider>
+</template>
+<script>
+import zhCN from 'ant-design-vue/lib/locale-provider/zh_CN'
+import enquireScreen from '@/utils/device'
+
+export default {
+  data () {
+    return {
+      locale: zhCN
+    }
+  },
+  created () {
+    const that = this
+    enquireScreen(deviceType => {
+      // tablet
+      if (deviceType === 0) {
+        that.$store.commit('TOGGLE_DEVICE', 'mobile')
+        that.$store.dispatch('setSidebar', false)
+      } else if (deviceType === 1) { // mobile
+        that.$store.commit('TOGGLE_DEVICE', 'mobile')
+        that.$store.dispatch('setSidebar', false)
+      } else {
+        that.$store.commit('TOGGLE_DEVICE', 'desktop')
+        that.$store.dispatch('setSidebar', true)
+      }
+    })
+  }
+}
+</script>
+<style  lang="less">
+  #app {
+    height: 100%;
+  }
+  .ant-table-middle > .ant-table-content > .ant-table-header > table > .ant-table-thead > tr > th, .ant-table-middle > .ant-table-content > .ant-table-body > table > .ant-table-thead > tr > th, .ant-table-middle > .ant-table-content > .ant-table-scroll > .ant-table-header > table > .ant-table-thead > tr > th, .ant-table-middle > .ant-table-content > .ant-table-scroll > .ant-table-body > table > .ant-table-thead > tr > th, .ant-table-middle > .ant-table-content > .ant-table-fixed-left > .ant-table-header > table > .ant-table-thead > tr > th, .ant-table-middle > .ant-table-content > .ant-table-fixed-right > .ant-table-header > table > .ant-table-thead > tr > th, .ant-table-middle > .ant-table-content > .ant-table-fixed-left > .ant-table-body-outer > .ant-table-body-inner > table > .ant-table-thead > tr > th, .ant-table-middle > .ant-table-content > .ant-table-fixed-right > .ant-table-body-outer > .ant-table-body-inner > table > .ant-table-thead > tr > th, .ant-table-middle > .ant-table-content > .ant-table-header > table > .ant-table-tbody > tr > td, .ant-table-middle > .ant-table-content > .ant-table-body > table > .ant-table-tbody > tr > td, .ant-table-middle > .ant-table-content > .ant-table-scroll > .ant-table-header > table > .ant-table-tbody > tr > td, .ant-table-middle > .ant-table-content > .ant-table-scroll > .ant-table-body > table > .ant-table-tbody > tr > td, .ant-table-middle > .ant-table-content > .ant-table-fixed-left > .ant-table-header > table > .ant-table-tbody > tr > td, .ant-table-middle > .ant-table-content > .ant-table-fixed-right > .ant-table-header > table > .ant-table-tbody > tr > td, .ant-table-middle > .ant-table-content > .ant-table-fixed-left > .ant-table-body-outer > .ant-table-body-inner > table > .ant-table-tbody > tr > td, .ant-table-middle > .ant-table-content > .ant-table-fixed-right > .ant-table-body-outer > .ant-table-body-inner > table > .ant-table-tbody > tr > td {
+    padding: 9px 8px !important;
+  }
+</style>

src/api/GroupRequest.js

@@ -0,0 +1,28 @@
+import Vue from 'vue'
+
+/**
+ * 将一个请求分组
+ *
+ * @param getPromise 传入一个可以获取到Promise对象的方法
+ * @param groupId 分组ID，如果不传或者为空则不分组
+ * @param expire 过期时间，默认 半分钟
+ */
+export function httpGroupRequest (getPromise, groupId, expire = 1000 * 30) {
+  if (groupId == null || groupId === '') {
+    console.log('--------popup----------getFrom  DB-------with---no--groupId ')
+    return getPromise()
+  }
+
+  if (Vue.ls.get(groupId)) {
+    console.log('---------popup--------getFrom  Cache--------groupId = ' + groupId)
+    return Promise.resolve(Vue.ls.get(groupId))
+  } else {
+    console.log('--------popup----------getFrom  DB---------groupId = ' + groupId)
+  }
+
+  // 还没有发出请求，就发出第一次的请求
+  return getPromise().then(res => {
+    Vue.ls.set(groupId, res, expire)
+    return Promise.resolve(res)
+  })
+}

src/api/api.js

@@ -0,0 +1,155 @@
+import { getAction, httpAction, postAction, putAction } from '@/api/manage'
+import Vue from 'vue'
+import { UI_CACHE_DB_DICT_DATA } from '@/store/mutation-types'
+
+// 角色管理
+const addRole = (params) => postAction('/sys/role/add', params)
+const editRole = (params) => postAction('/sys/role/edit', params)
+const checkRoleCode = (params) => getAction('/sys/role/checkRoleCode', params)
+const queryall = (params) => getAction('/sys/role/queryall', params)
+
+// 用户管理
+const addUser = (params) => postAction('/sys/user/add', params)
+const editUser = (params) => postAction('/sys/user/edit', params)
+const queryUserRole = (params) => getAction('/sys/user/queryUserRole', params)
+const getUserList = (params) => getAction('/sys/user/page', params)
+const frozenBatch = (params) => postAction('/sys/user/frozenBatch', params)
+// 验证用户是否存在
+const checkOnlyUser = (params) => getAction('/sys/user/checkOnlyUser', params)
+// 改变密码
+const changePassword = (params) => postAction('/sys/user/changePassword', params)
+
+// 权限管理
+const addPermission = (params) => postAction('/sys/permission/add', params)
+const editPermission = (params) => postAction('/sys/permission/edit', params)
+const getPermissionList = (params) => getAction('/sys/permission/page', params)
+const getSystemMenuList = (params) => getAction('/sys/permission/getSystemMenuList', params)
+const getSystemSubmenu = (params) => getAction('/sys/permission/getSystemSubmenu', params)
+const getSystemSubmenuBatch = (params) => getAction('/sys/permission/getSystemSubmenuBatch', params)
+const queryTreeList = (params) => getAction('/sys/permission/queryTreeList', params)
+const queryTreeListForRole = (params) => getAction('/sys/role/queryTreeList', params)
+const queryListAsync = (params) => getAction('/sys/permission/queryListAsync', params)
+const queryRolePermission = (params) => getAction('/sys/permission/queryRolePermission', params)
+const saveRolePermission = (params) => postAction('/sys/permission/saveRolePermission', params)
+const queryPermissionsByUser = () => getAction('/sys/permission/getUserPermissionByToken')
+const loadAllRoleIds = (params) => getAction('/sys/permission/loadAllRoleIds', params)
+const getPermissionRuleList = (params) => getAction('/sys/permission/getPermRuleListByPermId', params)
+const queryPermissionRule = (params) => getAction('/sys/permission/queryPermissionRule', params)
+
+// 部门管理
+const queryDepartTreeList = (params) => getAction('/sys/sysDepart/queryTreeList', params)
+const queryDepartTreeSync = (params) => getAction('/sys/sysDepart/queryDepartTreeSync', params)
+const queryIdTree = (params) => getAction('/sys/sysDepart/queryIdTree', params)
+const queryParentName = (params) => getAction('/sys/sysDepart/queryParentName', params)
+const searchByKeywords = (params) => getAction('/sys/sysDepart/searchBy', params)
+const deleteByDepartId = (params) => postAction('/sys/sysDepart/delete', params)
+
+// 二级部门管理
+const queryDepartPermission = (params) => getAction('/sys/permission/queryDepartPermission', params)
+const saveDepartPermission = (params) => postAction('/sys/permission/saveDepartPermission', params)
+const queryTreeListForDeptRole = (params) => getAction('/sys/sysDepartPermission/queryTreeListForDeptRole', params)
+const queryDeptRolePermission = (params) => getAction('/sys/sysDepartPermission/queryDeptRolePermission', params)
+const queryMyDepartTreeList = (params) => getAction('/sys/sysDepart/queryMyDeptTreeList', params)
+
+// 日志管理
+const deleteLog = (params) => postAction('/sys/log/delete', params)
+const deleteLogList = (params) => postAction('/sys/log/deleteBatch', params)
+
+// 数据字典
+const addDict = (params) => postAction('/sys/dict/add', params)
+const editDict = (params) => postAction('/sys/dict/edit', params)
+const treeList = (params) => getAction('/sys/dict/treeList', params)
+const addDictItem = (params) => postAction('/sys/dictItem/add', params)
+const editDictItem = (params) => postAction('/sys/dictItem/edit', params)
+
+// 字典标签专用（通过code获取字典数组）
+export const ajaxGetDictItems = (code, params) => getAction(`/sys/dict/getDictItems/${code}`, params)
+// 从缓存中获取字典配置
+function getDictItemsFromCache (dictCode) {
+  if (Vue.ls.get(UI_CACHE_DB_DICT_DATA) && Vue.ls.get(UI_CACHE_DB_DICT_DATA)[dictCode]) {
+    return Vue.ls.get(UI_CACHE_DB_DICT_DATA)[dictCode]
+  }
+}
+
+// 系统通告
+const doReleaseData = (params) => getAction('/sys/annountCement/doReleaseData', params)
+const doReovkeData = (params) => getAction('/sys/annountCement/doReovkeData', params)
+// 获取系统访问量
+const getLoginfo = (params) => getAction('/sys/loginfo', params)
+const getVisitInfo = (params) => getAction('/sys/visitInfo', params)
+
+// 根据部门主键查询用户信息
+const queryUserByDepId = (params) => getAction('/sys/user/queryUserByDepId', params)
+
+// 重复校验
+const duplicateCheck = (params) => getAction('/sys/duplicate/check', params)
+// 加载分类字典
+const loadCategoryData = (params) => getAction('/sys/category/loadAllData', params)
+const checkRuleByCode = (params) => getAction('/sys/checkRule/checkByCode', params)
+// 加载我的通告信息
+const getUserNoticeInfo = (params) => getAction('/sys/sysAnnouncementSend/getMyAnnouncementSend', params)
+const getTransitURL = url => `/sys/common/transitRESTful?url=${encodeURIComponent(url)}`
+// 中转HTTP请求
+export const transitRESTful = {
+  get: (url, parameter) => getAction(getTransitURL(url), parameter),
+  post: (url, parameter) => postAction(getTransitURL(url), parameter),
+  put: (url, parameter) => putAction(getTransitURL(url), parameter),
+  http: (url, parameter) => httpAction(getTransitURL(url), parameter)
+}
+
+export {
+  addRole,
+  editRole,
+  checkRoleCode,
+  addUser,
+  editUser,
+  queryUserRole,
+  getUserList,
+  queryall,
+  frozenBatch,
+  checkOnlyUser,
+  changePassword,
+  getPermissionList,
+  addPermission,
+  editPermission,
+  queryTreeList,
+  queryListAsync,
+  queryRolePermission,
+  saveRolePermission,
+  queryPermissionsByUser,
+  loadAllRoleIds,
+  getPermissionRuleList,
+  queryPermissionRule,
+  queryDepartTreeList,
+  queryDepartTreeSync,
+  queryIdTree,
+  queryParentName,
+  searchByKeywords,
+  deleteByDepartId,
+  deleteLog,
+  deleteLogList,
+  addDict,
+  editDict,
+  treeList,
+  addDictItem,
+  editDictItem,
+  doReleaseData,
+  doReovkeData,
+  getLoginfo,
+  getVisitInfo,
+  queryUserByDepId,
+  duplicateCheck,
+  queryTreeListForRole,
+  getSystemMenuList,
+  getSystemSubmenu,
+  getSystemSubmenuBatch,
+  loadCategoryData,
+  checkRuleByCode,
+  queryDepartPermission,
+  saveDepartPermission,
+  queryTreeListForDeptRole,
+  queryDeptRolePermission,
+  queryMyDepartTreeList,
+  getUserNoticeInfo,
+  getDictItemsFromCache
+}

src/api/index.js

@@ -0,0 +1,10 @@
+const api = {
+  Login: '/sys/login',
+  Logout: '/sys/logout',
+  ForgePassword: '/auth/forge-password',
+  Register: '/auth/register',
+  SendSms: '/account/sms',
+  // get my info
+  UserInfo: '/user/info'
+}
+export default api

src/api/login.js

@@ -0,0 +1,87 @@
+import api from './index'
+import { axios } from '@/utils/request'
+
+/**
+ * login func
+ * parameter: {
+ *     username: '',
+ *     password: '',
+ *     remember_me: true,
+ *     captcha: '12345'
+ * }
+ * @param parameter
+ * @returns {*}
+ */
+export function login (parameter) {
+  return axios({
+    url: '/sys/login',
+    method: 'post',
+    data: parameter
+  })
+}
+
+export function phoneLogin (parameter) {
+  return axios({
+    url: '/sys/phoneLogin',
+    method: 'post',
+    data: parameter
+  })
+}
+
+export function getSmsCaptcha (parameter) {
+  return axios({
+    url: api.SendSms,
+    method: 'post',
+    data: parameter
+  })
+}
+
+// export function getInfo() {
+//   return axios({
+//     url: '/api/user/info',
+//     method: 'get',
+//     headers: {
+//       'Content-Type': 'application/json;charset=UTF-8'
+//     }
+//   })
+// }
+
+export function logout (logoutToken) {
+  return axios({
+    url: '/sys/logout',
+    method: 'post',
+    headers: {
+      'Content-Type': 'application/json;charset=UTF-8',
+      'X-Access-Token': logoutToken
+    }
+  })
+}
+
+/**
+ * 第三方登录
+ * @param token
+ * @param thirdType
+ * @returns {*}
+ */
+export function thirdLogin (token, thirdType) {
+  return axios({
+    url: `/sys/thirdLogin/getLoginUser/${token}/${thirdType}`,
+    method: 'get',
+    headers: {
+      'Content-Type': 'application/json;charset=UTF-8'
+    }
+  })
+}
+
+/**
+ * 强退其他账号
+ * @returns {*}
+ * @param parameter
+ */
+export function forceLogout (parameter) {
+  return axios({
+    url: '/sys/online/forceLogout',
+    method: 'post',
+    data: parameter
+  })
+}

src/api/manage.js

@@ -0,0 +1,198 @@
+import Vue from 'vue'
+import { axios } from '@/utils/request'
+import { ACCESS_TOKEN } from '@/store/mutation-types'
+import signMd5Utils from '@/utils/encryption/signMd5Utils'
+
+const api = {
+  user: '/mock/api/user',
+  role: '/mock/api/role',
+  service: '/mock/api/service',
+  permission: '/mock/api/permission',
+  permissionNoPager: '/mock/api/permission/no-pager'
+}
+
+export default api
+
+// post
+export function postAction (url, parameter) {
+  const sign = signMd5Utils.getSign(url, parameter)
+  // 将签名和时间戳，添加在请求接口 Header
+  const signHeader = { 'X-Sign': sign, 'X-TIMESTAMP': signMd5Utils.getDateTimeToString() }
+
+  return axios({
+    url: url,
+    method: 'post',
+    data: parameter,
+    headers: signHeader
+  })
+}
+
+// post method= {post | put}
+export function httpAction (url, parameter, method) {
+  const sign = signMd5Utils.getSign(url, parameter)
+  // 将签名和时间戳，添加在请求接口 Header
+  const signHeader = { 'X-Sign': sign, 'X-TIMESTAMP': signMd5Utils.getDateTimeToString() }
+
+  return axios({
+    url: url,
+    method: method,
+    data: parameter,
+    headers: signHeader
+  })
+}
+
+// put
+export function putAction (url, parameter) {
+  return axios({
+    url: url,
+    method: 'put',
+    data: parameter
+  })
+}
+
+// get
+export function getAction (url, parameter) {
+  const sign = signMd5Utils.getSign(url, parameter)
+  // 将签名和时间戳，添加在请求接口 Header
+  const signHeader = { 'X-Sign': sign, 'X-TIMESTAMP': signMd5Utils.getDateTimeToString() }
+
+  return axios({
+    url: url,
+    method: 'get',
+    params: parameter,
+    headers: signHeader
+  })
+}
+
+// deleteAction
+export function deleteAction (url, parameter) {
+  return axios({
+    url: url,
+    method: 'delete',
+    params: parameter
+  })
+}
+
+export function getUserList (parameter) {
+  return axios({
+    url: api.user,
+    method: 'get',
+    params: parameter
+  })
+}
+
+export function getRoleList (parameter) {
+  return axios({
+    url: api.role,
+    method: 'get',
+    params: parameter
+  })
+}
+
+export function getServiceList (parameter) {
+  return axios({
+    url: api.service,
+    method: 'get',
+    params: parameter
+  })
+}
+
+export function getPermissions (parameter) {
+  return axios({
+    url: api.permissionNoPager,
+    method: 'get',
+    params: parameter
+  })
+}
+
+export function saveService (parameter) {
+  return axios({
+    url: api.service,
+    method: 'post',
+    data: parameter
+  })
+}
+
+/**
+ * 下载文件 用于excel导出
+ * @param url
+ * @param parameter
+ * @returns {*}
+ */
+export function downFile (url, parameter) {
+  return axios({
+    url: url,
+    params: parameter,
+    method: 'get',
+    responseType: 'blob'
+  })
+}
+
+/**
+ * 下载文件
+ * @param url 文件路径
+ * @param fileName 文件名
+ * @param parameter
+ * @returns {*}
+ */
+export function downloadFile (url, fileName, parameter) {
+  return downFile(url, parameter).then((data) => {
+    if (!data || data.size === 0) {
+      Vue.prototype.$message.warning('文件下载失败')
+      return
+    }
+    if (typeof window.navigator.msSaveBlob !== 'undefined') {
+      window.navigator.msSaveBlob(new Blob([data]), fileName)
+    } else {
+      const url = window.URL.createObjectURL(new Blob([data]))
+      const link = document.createElement('a')
+      link.style.display = 'none'
+      link.href = url
+      link.setAttribute('download', fileName)
+      document.body.appendChild(link)
+      link.click()
+      document.body.removeChild(link) // 下载完成移除元素
+      window.URL.revokeObjectURL(url) // 释放掉blob对象
+    }
+  })
+}
+
+/**
+ * 文件上传 用于富文本上传图片
+ * @param url
+ * @param parameter
+ * @returns {*}
+ */
+export function uploadAction (url, parameter) {
+  return axios({
+    url: url,
+    data: parameter,
+    method: 'post',
+    headers: {
+      'Content-Type': 'multipart/form-data' // 文件上传
+    }
+  })
+}
+
+/**
+ * 获取文件服务访问路径
+ * @param avatar
+ * @param subStr
+ * @returns {*}
+ */
+export function getFileAccessHttpUrl (avatar, subStr) {
+
+  if (!subStr) subStr = 'http'
+  try {
+    if (avatar && avatar.startsWith(subStr)) {
+      return avatar
+    } else {
+      if (avatar && avatar.length > 0 && avatar.indexOf('[') === -1) {
+        const token = Vue.ls.get(ACCESS_TOKEN)
+        return window._CONFIG.staticDomainURL + '/' + avatar + '?token=' + token
+      }
+    }
+  } catch (err) {
+
+  }
+}

src/assets/background.svg

@@ -0,0 +1,69 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="1361px" height="609px" viewBox="0 0 1361 609" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 46.2 (44496) - http://www.bohemiancoding.com/sketch -->
+    <title>Group 21</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Ant-Design-Pro-3.0" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="账户密码登录-校验" transform="translate(-79.000000, -82.000000)">
+            <g id="Group-21" transform="translate(77.000000, 73.000000)">
+                <g id="Group-18" opacity="0.8" transform="translate(74.901416, 569.699158) rotate(-7.000000) translate(-74.901416, -569.699158) translate(4.901416, 525.199158)">
+                    <ellipse id="Oval-11" fill="#CFDAE6" opacity="0.25" cx="63.5748792" cy="32.468367" rx="21.7830479" ry="21.766008"></ellipse>
+                    <ellipse id="Oval-3" fill="#CFDAE6" opacity="0.599999964" cx="5.98746479" cy="13.8668601" rx="5.2173913" ry="5.21330997"></ellipse>
+                    <path d="M38.1354514,88.3520215 C43.8984227,88.3520215 48.570234,83.6838647 48.570234,77.9254015 C48.570234,72.1669383 43.8984227,67.4987816 38.1354514,67.4987816 C32.3724801,67.4987816 27.7006688,72.1669383 27.7006688,77.9254015 C27.7006688,83.6838647 32.3724801,88.3520215 38.1354514,88.3520215 Z" id="Oval-3-Copy" fill="#CFDAE6" opacity="0.45"></path>
+                    <path d="M64.2775582,33.1704963 L119.185836,16.5654915" id="Path-12" stroke="#CFDAE6" stroke-width="1.73913043" stroke-linecap="round" stroke-linejoin="round"></path>
+                    <path d="M42.1431708,26.5002681 L7.71190162,14.5640702" id="Path-16" stroke="#E0B4B7" stroke-width="0.702678964" opacity="0.7" stroke-linecap="round" stroke-linejoin="round" stroke-dasharray="1.405357899873153,2.108036953469981"></path>
+                    <path d="M63.9262187,33.521561 L43.6721326,69.3250951" id="Path-15" stroke="#BACAD9" stroke-width="0.702678964" stroke-linecap="round" stroke-linejoin="round" stroke-dasharray="1.405357899873153,2.108036953469981"></path>
+                    <g id="Group-17" transform="translate(126.850922, 13.543654) rotate(30.000000) translate(-126.850922, -13.543654) translate(117.285705, 4.381889)" fill="#CFDAE6">
+                        <ellipse id="Oval-4" opacity="0.45" cx="9.13482653" cy="9.12768076" rx="9.13482653" ry="9.12768076"></ellipse>
+                        <path d="M18.2696531,18.2553615 C18.2696531,13.2142826 14.1798519,9.12768076 9.13482653,9.12768076 C4.08980114,9.12768076 0,13.2142826 0,18.2553615 L18.2696531,18.2553615 Z" id="Oval-4" transform="translate(9.134827, 13.691521) scale(-1, -1) translate(-9.134827, -13.691521) "></path>
+                    </g>
+                </g>
+                <g id="Group-14" transform="translate(216.294700, 123.725600) rotate(-5.000000) translate(-216.294700, -123.725600) translate(106.294700, 35.225600)">
+                    <ellipse id="Oval-2" fill="#CFDAE6" opacity="0.25" cx="29.1176471" cy="29.1402439" rx="29.1176471" ry="29.1402439"></ellipse>
+                    <ellipse id="Oval-2" fill="#CFDAE6" opacity="0.3" cx="29.1176471" cy="29.1402439" rx="21.5686275" ry="21.5853659"></ellipse>
+                    <ellipse id="Oval-2-Copy" stroke="#CFDAE6" opacity="0.4" cx="179.019608" cy="138.146341" rx="23.7254902" ry="23.7439024"></ellipse>
+                    <ellipse id="Oval-2" fill="#BACAD9" opacity="0.5" cx="29.1176471" cy="29.1402439" rx="10.7843137" ry="10.7926829"></ellipse>
+                    <path d="M29.1176471,39.9329268 L29.1176471,18.347561 C23.1616351,18.347561 18.3333333,23.1796097 18.3333333,29.1402439 C18.3333333,35.1008781 23.1616351,39.9329268 29.1176471,39.9329268 Z" id="Oval-2" fill="#BACAD9"></path>
+                    <g id="Group-9" opacity="0.45" transform="translate(172.000000, 131.000000)" fill="#E6A1A6">
+                        <ellipse id="Oval-2-Copy-2" cx="7.01960784" cy="7.14634146" rx="6.47058824" ry="6.47560976"></ellipse>
+                        <path d="M0.549019608,13.6219512 C4.12262681,13.6219512 7.01960784,10.722722 7.01960784,7.14634146 C7.01960784,3.56996095 4.12262681,0.670731707 0.549019608,0.670731707 L0.549019608,13.6219512 Z" id="Oval-2-Copy-2" transform="translate(3.784314, 7.146341) scale(-1, 1) translate(-3.784314, -7.146341) "></path>
+                    </g>
+                    <ellipse id="Oval-10" fill="#CFDAE6" cx="218.382353" cy="138.685976" rx="1.61764706" ry="1.61890244"></ellipse>
+                    <ellipse id="Oval-10-Copy-2" fill="#E0B4B7" opacity="0.35" cx="179.558824" cy="175.381098" rx="1.61764706" ry="1.61890244"></ellipse>
+                    <ellipse id="Oval-10-Copy" fill="#E0B4B7" opacity="0.35" cx="180.098039" cy="102.530488" rx="2.15686275" ry="2.15853659"></ellipse>
+                    <path d="M28.9985381,29.9671598 L171.151018,132.876024" id="Path-11" stroke="#CFDAE6" opacity="0.8"></path>
+                </g>
+                <g id="Group-10" opacity="0.799999952" transform="translate(1054.100635, 36.659317) rotate(-11.000000) translate(-1054.100635, -36.659317) translate(1026.600635, 4.659317)">
+                    <ellipse id="Oval-7" stroke="#CFDAE6" stroke-width="0.941176471" cx="43.8135593" cy="32" rx="11.1864407" ry="11.2941176"></ellipse>
+                    <g id="Group-12" transform="translate(34.596774, 23.111111)" fill="#BACAD9">
+                        <ellipse id="Oval-7" opacity="0.45" cx="9.18534718" cy="8.88888889" rx="8.47457627" ry="8.55614973"></ellipse>
+                        <path d="M9.18534718,17.4450386 C13.8657264,17.4450386 17.6599235,13.6143199 17.6599235,8.88888889 C17.6599235,4.16345787 13.8657264,0.332739156 9.18534718,0.332739156 L9.18534718,17.4450386 Z" id="Oval-7"></path>
+                    </g>
+                    <path d="M34.6597385,24.809694 L5.71666084,4.76878945" id="Path-2" stroke="#CFDAE6" stroke-width="0.941176471"></path>
+                    <ellipse id="Oval" stroke="#CFDAE6" stroke-width="0.941176471" cx="3.26271186" cy="3.29411765" rx="3.26271186" ry="3.29411765"></ellipse>
+                    <ellipse id="Oval-Copy" fill="#F7E1AD" cx="2.79661017" cy="61.1764706" rx="2.79661017" ry="2.82352941"></ellipse>
+                    <path d="M34.6312443,39.2922712 L5.06366663,59.785082" id="Path-10" stroke="#CFDAE6" stroke-width="0.941176471"></path>
+                </g>
+                <g id="Group-19" opacity="0.33" transform="translate(1282.537219, 446.502867) rotate(-10.000000) translate(-1282.537219, -446.502867) translate(1142.537219, 327.502867)">
+                    <g id="Group-17" transform="translate(141.333539, 104.502742) rotate(275.000000) translate(-141.333539, -104.502742) translate(129.333539, 92.502742)" fill="#BACAD9">
+                        <circle id="Oval-4" opacity="0.45" cx="11.6666667" cy="11.6666667" r="11.6666667"></circle>
+                        <path d="M23.3333333,23.3333333 C23.3333333,16.8900113 18.1099887,11.6666667 11.6666667,11.6666667 C5.22334459,11.6666667 0,16.8900113 0,23.3333333 L23.3333333,23.3333333 Z" id="Oval-4" transform="translate(11.666667, 17.500000) scale(-1, -1) translate(-11.666667, -17.500000) "></path>
+                    </g>
+                    <circle id="Oval-5-Copy-6" fill="#CFDAE6" cx="201.833333" cy="87.5" r="5.83333333"></circle>
+                    <path d="M143.5,88.8126685 L155.070501,17.6038544" id="Path-17" stroke="#BACAD9" stroke-width="1.16666667"></path>
+                    <path d="M17.5,37.3333333 L127.466252,97.6449735" id="Path-18" stroke="#BACAD9" stroke-width="1.16666667"></path>
+                    <polyline id="Path-19" stroke="#CFDAE6" stroke-width="1.16666667" points="143.902597 120.302281 174.935455 231.571342 38.5 147.510847 126.366941 110.833333"></polyline>
+                    <path d="M159.833333,99.7453842 L195.416667,89.25" id="Path-20" stroke="#E0B4B7" stroke-width="1.16666667" opacity="0.6"></path>
+                    <path d="M205.333333,82.1372105 L238.719406,36.1666667" id="Path-24" stroke="#BACAD9" stroke-width="1.16666667"></path>
+                    <path d="M266.723424,132.231988 L207.083333,90.4166667" id="Path-25" stroke="#CFDAE6" stroke-width="1.16666667"></path>
+                    <circle id="Oval-5" fill="#C1D1E0" cx="156.916667" cy="8.75" r="8.75"></circle>
+                    <circle id="Oval-5-Copy-3" fill="#C1D1E0" cx="39.0833333" cy="148.75" r="5.25"></circle>
+                    <circle id="Oval-5-Copy-2" fill-opacity="0.6" fill="#D1DEED" cx="8.75" cy="33.25" r="8.75"></circle>
+                    <circle id="Oval-5-Copy-4" fill-opacity="0.6" fill="#D1DEED" cx="243.833333" cy="30.3333333" r="5.83333333"></circle>
+                    <circle id="Oval-5-Copy-5" fill="#E0B4B7" cx="175.583333" cy="232.75" r="5.25"></circle>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

src/assets/less/JAreaLinkage.less

@@ -0,0 +1,259 @@
+.area-zoom-in-top-enter-active,
+.area-zoom-in-top-leave-active {
+  opacity: 1;
+  transform: scaleY(1);
+}
+
+.area-zoom-in-top-enter,
+.area-zoom-in-top-leave-active {
+  opacity: 0;
+  transform: scaleY(0);
+}
+
+.area-select {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  color: rgba(0, 0, 0, 0.65);
+  font-size: 14px;
+  font-variant: tabular-nums;
+  line-height: 1.5;
+  list-style: none;
+  font-feature-settings: 'tnum';
+  position: relative;
+  outline: 0;
+  display: block;
+  background-color: #fff;
+  border: 1px solid #d9d9d9;
+  border-top-width: 1.02px;
+  border-radius: 4px;
+  outline: none;
+  transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
+  -webkit-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+
+.area-select-wrap .area-select {
+  display: inline-block;
+}
+
+.area-select * {
+  box-sizing: border-box;
+}
+
+.area-select:hover {
+  border-color: #40a9ff;
+  border-right-width: 1px !important;
+  outline: 0;
+}
+
+
+.area-select:active {
+  box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
+}
+
+.area-select.small {
+  width: 126px;
+}
+
+.area-select.medium {
+  width: 160px;
+}
+
+.area-select.large {
+  width: 194px;
+}
+
+.area-select.is-disabled {
+  background: #eceff5;
+  cursor: not-allowed;
+}
+
+.area-select.is-disabled:hover {
+  border-color: #e1e2e6;
+}
+
+.area-select.is-disabled .area-selected-trigger {
+  cursor: not-allowed;
+}
+
+.area-select .area-selected-trigger {
+  position: relative;
+  display: block;
+  font-size: 14px;
+  cursor: pointer;
+  margin: 0;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  height: 100%;
+  padding: 8px 20px 7px 12px;
+}
+
+.area-select .area-select-icon {
+  position: absolute;
+  top: 50%;
+  margin-top: -2px;
+  right: 6px;
+  content: "";
+  width: 0;
+  height: 0;
+  border: 6px solid transparent;
+  border-top-color: rgba(0, 0, 0, 0.25);
+  transition: all .3s linear;
+  transform-origin: center;
+}
+
+.area-select .area-select-icon.active {
+  margin-top: -8px;
+  transform: rotate(180deg);
+}
+
+.area-selectable-list-wrap {
+  position: absolute;
+  width: 100%;
+  max-height: 275px;
+  z-index: 15000;
+  background-color: #fff;
+  box-sizing: border-box;
+  overflow-x: auto;
+  margin: 2px 0;
+  border-radius: 4px;
+  outline: none;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+
+  transition: opacity 0.15s, transform 0.3s !important;
+  transform-origin: center top !important;
+}
+
+.area-selectable-list {
+  position: relative;
+  margin: 0;
+  padding: 6px 0;
+  width: 100%;
+  font-size: 14px;
+  color: #565656;
+  list-style: none;
+}
+
+.area-selectable-list .area-select-option {
+  position: relative;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  cursor: pointer;
+  padding: 0 15px 0 10px;
+  height: 32px;
+  line-height: 32px;
+}
+
+.area-selectable-list .area-select-option.hover {
+  background-color: #e6f7ff;
+}
+
+.area-selectable-list .area-select-option.selected {
+  color: rgba(0, 0, 0, 0.65);
+  font-weight: 600;
+  background-color: #efefef;
+}
+
+.cascader-menu-list-wrap {
+  position: absolute;
+  white-space: nowrap;
+  z-index: 15000;
+  background-color: #fff;
+  box-sizing: border-box;
+  overflow: hidden;
+  font-size: 0;
+  margin: 2px 0;
+  border-radius: 4px;
+  outline: none;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+
+  transition: opacity 0.15s, transform 0.3s !important;
+  transform-origin: center top !important;
+}
+
+.cascader-menu-list {
+  position: relative;
+  margin: 0;
+  font-size: 14px;
+  color: #565656;
+  padding: 6px 0;
+  list-style: none;
+  display: inline-block;
+  height: 204px;
+  overflow-x: hidden;
+  overflow-y: auto;
+  min-width: 160px;
+  vertical-align: top;
+  background-color: #fff;
+  border-right: 1px solid #e4e7ed;
+}
+
+.cascader-menu-list:last-child {
+  border-right: none;
+}
+
+.cascader-menu-list .cascader-menu-option {
+  position: relative;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  cursor: pointer;
+  padding: 0 15px 0 10px;
+  height: 32px;
+  line-height: 32px;
+}
+
+.cascader-menu-list .cascader-menu-option.hover,
+.cascader-menu-list .cascader-menu-option:hover {
+  background-color: #e6f7ff;
+}
+
+.cascader-menu-list .cascader-menu-option.selected {
+  color: rgba(0, 0, 0, 0.65);
+  font-weight: 600;
+  background-color: #efefef;
+}
+
+.cascader-menu-list .cascader-menu-option.cascader-menu-extensible:after {
+  position: absolute;
+  top: 50%;
+  margin-top: -4px;
+  right: 5px;
+  content: "";
+  width: 0;
+  height: 0;
+  border: 4px solid transparent;
+  border-left-color: #a1a4ad;
+}
+
+.cascader-menu-list::-webkit-scrollbar,
+.area-selectable-list-wrap::-webkit-scrollbar {
+  width: 8px;
+  background: transparent;
+}
+
+.area-selectable-list-wrap::-webkit-scrollbar-button:vertical:decremen,
+.area-selectable-list-wrap::-webkit-scrollbar-button:vertical:end:decrement,
+.area-selectable-list-wrap::-webkit-scrollbar-button:vertical:increment,
+.area-selectable-list-wrap::-webkit-scrollbar-button:vertical:start:increment,
+.cascader-menu-list::-webkit-scrollbar-button:vertical:decremen,
+.cascader-menu-list::-webkit-scrollbar-button:vertical:end:decrement,
+.cascader-menu-list::-webkit-scrollbar-button:vertical:increment,
+.cascader-menu-list::-webkit-scrollbar-button:vertical:start:increment {
+  display: none;
+}
+
+.cascader-menu-list::-webkit-scrollbar-thumb:vertical,
+.area-selectable-list-wrap::-webkit-scrollbar-thumb:vertical {
+  background-color: #b8b8b8;
+  border-radius: 4px;
+}
+
+.cascader-menu-list::-webkit-scrollbar-thumb:vertical:hover,
+.area-selectable-list-wrap::-webkit-scrollbar-thumb:vertical:hover {
+  background-color: #777;
+}

src/assets/less/TableExpand.less

@@ -0,0 +1,15 @@
+/** [表格主题样式一] 表格强制列不换行 */
+.j-table-force-nowrap {
+  td, th {
+    white-space: nowrap;
+  }
+
+  .ant-table-selection-column {
+    padding: 12px 22px !important;
+  }
+
+  /** 列自适应，弊端会导致列宽失效 */
+  &.ant-table-wrapper .ant-table-content {
+    overflow-x: auto;
+  }
+}

src/assets/less/codemirror_idea.css

@@ -0,0 +1 @@
+.cm-s-idea span.cm-meta{color:olive}.cm-s-idea span.cm-number{color:#00f}.cm-s-idea span.cm-keyword{line-height:1em;font-weight:700;color:navy}.cm-s-idea span.cm-atom{font-weight:700;color:navy}.cm-s-idea span.cm-def{color:#000}.cm-s-idea span.cm-variable{color:#000}.cm-s-idea span.cm-variable-2{color:#000}.cm-s-idea span.cm-type,.cm-s-idea span.cm-variable-3{color:#000}.cm-s-idea span.cm-property{color:#000}.cm-s-idea span.cm-operator{color:#000}.cm-s-idea span.cm-comment{color:grey}.cm-s-idea span.cm-string{color:green}.cm-s-idea span.cm-string-2{color:green}.cm-s-idea span.cm-qualifier{color:#555}.cm-s-idea span.cm-error{color:red}.cm-s-idea span.cm-attribute{color:#00f}.cm-s-idea span.cm-tag{color:navy}.cm-s-idea span.cm-link{color:#00f}.cm-s-idea .CodeMirror-activeline-background{background:#fffae3}.cm-s-idea span.cm-builtin{color:#30a}.cm-s-idea span.cm-bracket{color:#cc7}.cm-s-idea{font-family:Consolas,Menlo,Monaco,Lucida Console,Liberation Mono,DejaVu Sans Mono,Bitstream Vera Sans Mono,Courier New,monospace,serif}.cm-s-idea .CodeMirror-matchingbracket{outline:1px solid grey;color:#000!important}.CodeMirror-hints.idea{font-family:Menlo,Monaco,Consolas,'Courier New',monospace;color:#616569;background-color:#ebf3fd!important}.CodeMirror-hints.idea .CodeMirror-hint-active{background-color:#a2b8c9!important;color:#5c6065!important}

src/assets/less/common.less

@@ -0,0 +1,84 @@
+
+/*列表上方操作按钮区域*/
+.ant-card-body .table-operator {
+  //margin-bottom: 8px;
+}
+/** Button按钮间距 */
+.table-operator .ant-btn {
+  margin: 0 8px 8px 0;
+}
+.table-operator .ant-btn-group .ant-btn {
+  margin: 0;
+}
+
+.table-operator .ant-btn-group .ant-btn:last-child {
+  margin: 0 8px 0px 0;
+}
+/*列表td的padding设置 可以控制列表大小*/
+.ant-table-tbody .ant-table-row td {
+  padding-top: 15px;
+  padding-bottom: 15px;
+}
+
+/*列表页面弹出modal*/
+.ant-modal-cust-warp {
+  height: 100%
+}
+
+/*弹出modal Y轴滚动条*/
+.ant-modal-cust-warp .ant-modal-body {
+  height: calc(100% - 110px) !important;
+  overflow-y: auto
+}
+
+/*弹出modal 先有content后有body 故滚动条控制在body上*/
+.ant-modal-cust-warp .ant-modal-content {
+  height: 90% !important;
+  overflow-y: hidden
+}
+/*列表中有图片的加这个样式 参考用户管理*/
+.anty-img-wrap {
+  height: 20px;
+  position: relative;
+  .ant-avatar.ant-avatar-icon {
+    font-size: 14px;
+    line-height: 20px;
+  }
+  .ant-avatar{
+    width: 20px;
+    height: 20px;
+  }
+}
+.anty-img-wrap > img {
+  max-height: 100%;
+}
+/*列表中范围查询样式*/
+.query-group-cust{width: calc(50% - 10px)}
+.query-group-split-cust:before{content:"~";width: 20px;display: inline-block;text-align: center}
+
+
+/*erp风格子表外框padding设置*/
+.ant-card-wider-padding.cust-erp-sub-tab>.ant-card-body{padding:5px 12px}
+
+/* 内嵌子表背景颜色 */
+.j-inner-table-wrapper /deep/ .ant-table-expanded-row .ant-table-wrapper .ant-table-tbody .ant-table-row {
+  background-color: #FFFFFF;
+}
+
+/**隐藏样式-modal确定按钮 */
+.jee-hidden{display: none}
+
+.ant-col-md-6{
+  padding-left: 18px !important;
+  padding-right: 18px  !important;
+
+}
+.table-page-search-wrapper .ant-form-inline .ant-form-item{
+  margin-bottom: 12px;
+}
+.ant-card-body .table-operator{
+  margin-bottom: 4px !important;
+}
+.ant-tabs-bar {
+  margin-bottom: 0px;
+}

src/assets/less/index.less

@@ -0,0 +1,32 @@
+/**
+ * 列表查询通用样式，移动端自适应
+ */
+.search{
+  margin-bottom: 54px;
+}
+.fold{
+  width: calc(100% - 216px);
+  display: inline-block
+}
+.operator{
+  margin-bottom: 18px;
+}
+@media screen and (max-width: 900px) {
+  .fold {
+    width: 100%;
+  }
+}
+.operator button {
+  margin-right: 5px;
+}
+i {
+  cursor: pointer;
+}
+.trcolor{
+  background-color: rgba(255, 192, 203, 0.31);
+  color:red;
+}
+
+.ant-table-middle > .ant-table-content > .ant-table-body > table > .ant-table-tbody > tr > td {
+  padding: 9px 8px !important;
+}

src/cas/sso.js

@@ -0,0 +1,74 @@
+import Vue from 'vue'
+import { ACCESS_TOKEN } from '@/store/mutation-types'
+import store from '@/store'
+
+/**
+ * 单点登录
+ */
+const init = (callback) => {
+  if (process.env.VUE_APP_SSO === 'true') {
+    console.log('-------单点登录开始-------')
+    const token = Vue.ls.get(ACCESS_TOKEN)
+    const st = getUrlParam('ticket')
+    const sevice = 'http://' + window.location.host + '/'
+    if (token) {
+      loginSuccess(callback)
+    } else {
+      if (st) {
+        validateSt(st, sevice, callback)
+      } else {
+        const serviceUrl = encodeURIComponent(sevice)
+        window.location.href = window._CONFIG.casPrefixUrl + '/login?service=' + serviceUrl
+      }
+    }
+    console.log('-------单点登录结束-------')
+  } else {
+    callback && callback()
+  }
+}
+const SSO = {
+  init: init
+}
+
+function getUrlParam (paraName) {
+  const url = document.location.toString()
+  const arrObj = url.split('?')
+  if (arrObj.length > 1) {
+    const arrPara = arrObj[1].split('&')
+    let arr
+    for (let i = 0; i < arrPara.length; i++) {
+      arr = arrPara[i].split('=')
+      if (arr != null && arr[0] === paraName) {
+        return arr[1]
+      }
+    }
+    return ''
+  } else {
+    return ''
+  }
+}
+
+function validateSt (ticket, service, callback) {
+  const params = {
+    ticket: ticket,
+    service: service
+  }
+  store.dispatch('ValidateLogin', params).then(res => {
+    // this.departConfirm(res)
+    if (res.success) {
+      loginSuccess(callback)
+    } else {
+      const sevice = 'http://' + window.location.host + '/'
+      const serviceUrl = encodeURIComponent(sevice)
+      window.location.href = window._CONFIG.casPrefixUrl + '/login?service=' + serviceUrl
+    }
+  }).catch((err) => {
+    console.log(err)
+    // that.requestFailed(err);
+  })
+}
+
+function loginSuccess (callback) {
+  callback()
+}
+export default SSO

src/components/AvatarList/Item.vue

@@ -0,0 +1,46 @@
+<template>
+  <tooltip v-if="tips !== ''">
+    <template slot="title">{{ tips }}</template>
+    <avatar :size="avatarSize" :src="src" />
+  </tooltip>
+  <avatar v-else :size="avatarSize" :src="src" />
+</template>
+
+<script>
+import Avatar from 'ant-design-vue/es/avatar'
+import Tooltip from 'ant-design-vue/es/tooltip'
+
+export default {
+  name: 'AvatarItem',
+  components: {
+    Avatar,
+    Tooltip
+  },
+  props: {
+    tips: {
+      type: String,
+      default: '',
+      required: false
+    },
+    src: {
+      type: String,
+      default: ''
+    }
+  },
+  data () {
+    return {
+      size: this.$parent.size
+    }
+  },
+  computed: {
+    avatarSize () {
+      return ((this.size !== 'mini') && this.size) || 20
+    }
+  },
+  watch: {
+    '$parent.size' (val) {
+      this.size = val
+    }
+  }
+}
+</script>

src/components/AvatarList/List.vue

@@ -0,0 +1,98 @@
+<!--
+<template>
+  <div :class="[prefixCls]">
+    <ul>
+      <slot></slot>
+      <template v-for="item in filterEmpty($slots.default).slice(0, 3)"></template>
+
+      <template v-if="maxLength > 0 && filterEmpty($slots.default).length > maxLength">
+        <avatar-item :size="size">
+          <avatar :size="size !== 'mini' && size || 20" :style="excessItemsStyle">{{ `+${maxLength}` }}</avatar>
+        </avatar-item>
+      </template>
+    </ul>
+  </div>
+</template>
+-->
+
+<script>
+import Avatar from 'ant-design-vue/es/avatar'
+import AvatarItem from './Item'
+import { filterEmpty } from '@/components/_util/util'
+
+export default {
+  AvatarItem,
+  name: 'AvatarList',
+  components: {
+    Avatar,
+    AvatarItem
+  },
+  props: {
+    prefixCls: {
+      type: String,
+      default: 'ant-pro-avatar-list'
+    },
+    /**
+       * 头像大小 类型: large、small 、mini, default
+       * 默认值: default
+       */
+    size: {
+      type: [String, Number],
+      default: 'default'
+    },
+    /**
+       * 要显示的最大项目
+       */
+    maxLength: {
+      type: Number,
+      default: 0
+    },
+    /**
+       * 多余的项目风格
+       */
+    excessItemsStyle: {
+      type: Object,
+      default: () => {
+        return {
+          color: '#f56a00',
+          backgroundColor: '#fde3cf'
+        }
+      }
+    }
+  },
+  data () {
+    return {}
+  },
+  methods: {
+    getItems (items) {
+      const classString = {
+        [`${this.prefixCls}-item`]: true,
+        [`${this.size}`]: true
+      }
+
+      if (this.maxLength > 0) {
+        items = items.slice(0, this.maxLength)
+        items.push((<Avatar size={ this.size } style={ this.excessItemsStyle }>{`+${this.maxLength}`}</Avatar>))
+      }
+      return items.map((item) => (
+        <li class={ classString }>{ item }</li>
+      ))
+    }
+  },
+  render () {
+    const { prefixCls, size } = this.$props
+    const classString = {
+      [`${prefixCls}`]: true,
+      [`${size}`]: true
+    }
+    const items = filterEmpty(this.$slots.default)
+    const itemsDom = items && items.length ? <ul class={`${prefixCls}-items`}>{ this.getItems(items) }</ul> : null
+
+    return (
+      <div class={ classString }>
+        { itemsDom }
+      </div>
+    )
+  }
+}
+</script>

src/components/AvatarList/index.js

@@ -0,0 +1,4 @@
+import AvatarList from './List'
+import './index.less'
+
+export default AvatarList

src/components/AvatarList/index.less

@@ -0,0 +1,60 @@
+@import "../index";
+
+@avatar-list-prefix-cls: ~"@{ant-pro-prefix}-avatar-list";
+@avatar-list-item-prefix-cls: ~"@{ant-pro-prefix}-avatar-list-item";
+
+.@{avatar-list-prefix-cls} {
+  display: inline-block;
+
+  ul {
+    list-style: none;
+    display: inline-block;
+    padding: 0;
+    margin: 0 0 0 8px;
+    font-size: 0;
+  }
+}
+
+.@{avatar-list-item-prefix-cls} {
+  display: inline-block;
+  font-size: @font-size-base;
+  margin-left: -8px;
+  width: @avatar-size-base;
+  height: @avatar-size-base;
+
+  :global {
+    .ant-avatar {
+      border: 1px solid #fff;
+      cursor: pointer;
+    }
+  }
+
+  &.large {
+    width: @avatar-size-lg;
+    height: @avatar-size-lg;
+  }
+
+  &.small {
+    width: @avatar-size-sm;
+    height: @avatar-size-sm;
+  }
+
+  &.mini {
+    width: 20px;
+    height: 20px;
+
+    :global {
+      .ant-avatar {
+        width: 20px;
+        height: 20px;
+        line-height: 20px;
+
+        .ant-avatar-string {
+          font-size: 12px;
+          line-height: 18px;
+        }
+      }
+    }
+  }
+}
+

src/components/ChartCard.vue

@@ -0,0 +1,111 @@
+<template>
+  <a-card :loading="loading" :body-style="{ padding: '20px 24px 8px' }" :bordered="false">
+    <div class="chart-card-header">
+      <div class="meta">
+        <span class="chart-card-title">{{ title }}</span>
+        <span class="chart-card-action">
+          <slot name="action"></slot>
+        </span>
+      </div>
+      <div class="total"><span>{{ total }}</span></div>
+    </div>
+    <div class="chart-card-content">
+      <div class="content-fix">
+        <slot></slot>
+      </div>
+    </div>
+    <div class="chart-card-footer">
+      <div class="field">
+        <slot name="footer"></slot>
+      </div>
+    </div>
+  </a-card>
+</template>
+
+<script>
+export default {
+  name: 'ChartCard',
+  props: {
+    title: {
+      type: String,
+      default: ''
+    },
+    total: {
+      type: String,
+      default: ''
+    },
+    loading: {
+      type: Boolean,
+      default: false
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.chart-card-header {
+  position: relative;
+  overflow: hidden;
+  width: 100%;
+
+  .meta {
+    position: relative;
+    overflow: hidden;
+    width: 100%;
+    color: rgba(0, 0, 0, .45);
+    font-size: 14px;
+    line-height: 22px;
+  }
+}
+
+.chart-card-action {
+  cursor: pointer;
+  position: absolute;
+  top: 0;
+  right: 0;
+}
+
+.chart-card-footer {
+  border-top: 1px solid #e8e8e8;
+  padding-top: 9px;
+  margin-top: 8px;
+
+  > * {
+    position: relative;
+  }
+
+  .field {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    margin: 0;
+  }
+}
+
+.chart-card-content {
+  margin-bottom: 12px;
+  position: relative;
+  height: 46px;
+  width: 100%;
+
+  .content-fix {
+    position: absolute;
+    left: 0;
+    bottom: 0;
+    width: 100%;
+  }
+}
+
+.total {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  word-break: break-all;
+  white-space: nowrap;
+  color: #000;
+  margin-top: 4px;
+  margin-bottom: 0;
+  font-size: 30px;
+  line-height: 38px;
+  height: 38px;
+}
+</style>

src/components/CountDown/CountDown.vue

@@ -0,0 +1,103 @@
+<template>
+  <span>
+    {{ lastTime | format }}
+  </span>
+</template>
+
+<script>
+
+function fixedZero (val) {
+  return val * 1 < 10 ? `0${val}` : val
+}
+
+export default {
+  name: 'CountDown',
+  props: {
+    format: {
+      type: Function,
+      default: undefined
+    },
+    target: {
+      type: [Date, Number],
+      required: true
+    },
+    onEnd: {
+      type: Function,
+      default: () => {
+      }
+    }
+  },
+  data () {
+    return {
+      dateTime: '0',
+      originTargetTime: 0,
+      lastTime: 0,
+      timer: 0,
+      interval: 1000
+    }
+  },
+  filters: {
+    format (time) {
+      const hours = 60 * 60 * 1000
+      const minutes = 60 * 1000
+
+      const h = Math.floor(time / hours)
+      const m = Math.floor((time - h * hours) / minutes)
+      const s = Math.floor((time - h * hours - m * minutes) / 1000)
+      return `${fixedZero(h)}:${fixedZero(m)}:${fixedZero(s)}`
+    }
+  },
+  created () {
+    this.initTime()
+    this.tick()
+  },
+  methods: {
+    initTime () {
+      let lastTime = 0
+      let targetTime = 0
+      this.originTargetTime = this.target
+      try {
+        if (Object.prototype.toString.call(this.target) === '[object Date]') {
+          targetTime = this.target
+        } else {
+          targetTime = new Date(this.target).getTime()
+        }
+      } catch (e) {
+        throw new Error('invalid target prop')
+      }
+
+      lastTime = targetTime - new Date().getTime()
+
+      this.lastTime = lastTime < 0 ? 0 : lastTime
+    },
+    tick () {
+      const { onEnd } = this
+
+      this.timer = setTimeout(() => {
+        if (this.lastTime < this.interval) {
+          clearTimeout(this.timer)
+          this.lastTime = 0
+          if (typeof onEnd === 'function') {
+            onEnd()
+          }
+        } else {
+          this.lastTime -= this.interval
+          this.tick()
+        }
+      }, this.interval)
+    }
+  },
+  beforeUpdate () {
+    if (this.originTargetTime !== this.target) {
+      this.initTime()
+    }
+  },
+  beforeDestroy () {
+    clearTimeout(this.timer)
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

src/components/CountDown/index.js

@@ -0,0 +1,3 @@
+import CountDown from './CountDown'
+
+export default CountDown

src/components/Ellipsis/Ellipsis.vue

@@ -0,0 +1,49 @@
+<script>
+import { cutStrByFullLength, getStrFullLength } from '@/components/_util/StringUtil'
+
+export default {
+  name: 'Ellipsis',
+  props: {
+    prefixCls: {
+      type: String,
+      default: 'ant-pro-ellipsis'
+    },
+    tooltip: {
+      type: Boolean,
+      default: true
+    },
+    length: {
+      type: Number,
+      default: 25
+    },
+    lines: {
+      type: Number,
+      default: 1
+    },
+    fullWidthRecognition: {
+      type: Boolean,
+      default: false
+    }
+  },
+  methods: {},
+  render () {
+    const { tooltip, length } = this.$props
+    let text = ''
+    // 处理没有default插槽时的特殊情况
+    if (this.$slots.default) {
+      text = this.$slots.default.map(vNode => vNode.text).join('')
+    }
+    // 判断是否显示 tooltip
+    if (tooltip && getStrFullLength(text) > length) {
+      return (
+        <a-tooltip>
+          <template slot="title">{text}</template>
+          <span>{cutStrByFullLength(text, this.length) + '…'}</span>
+        </a-tooltip>
+      )
+    } else {
+      return (<span>{text}</span>)
+    }
+  }
+}
+</script>

src/components/Ellipsis/index.js

@@ -0,0 +1,3 @@
+import Ellipsis from './Ellipsis'
+
+export default Ellipsis

src/components/JVxeCells/JVxeFileCell.vue

@@ -0,0 +1,232 @@
+<template>
+  <div>
+    <template v-if="hasFile">
+
+      <template v-for="(file, fileKey) of [innerFile || {}]">
+        <div :key="fileKey" style="position: relative;">
+          <a-tooltip v-if="file.status==='uploading'" :title="`上传中(${Math.floor(file.percent)}%)`">
+            <a-icon type="loading"/>
+            <span style="margin-left:5px">上传中…</span>
+          </a-tooltip>
+
+          <a-tooltip v-else-if="file.status==='done'" :title="file.name">
+            <a-icon type="paper-clip"/>
+            <span style="margin-left:5px">{{ ellipsisFileName }}</span>
+          </a-tooltip>
+
+          <a-tooltip v-else :title="file.message||'上传失败'">
+            <a-icon type="exclamation-circle" style="color:red;"/>
+            <span style="margin-left:5px">{{ ellipsisFileName }}</span>
+          </a-tooltip>
+
+          <template style="width: 30px">
+            <a-dropdown :trigger="['click']" placement="bottomRight" style="margin-left: 10px;">
+              <a-tooltip title="操作">
+                <a-icon
+                  v-if="file.status!=='uploading'"
+                  type="setting"
+                  style="cursor: pointer;"/>
+              </a-tooltip>
+
+              <a-menu slot="overlay">
+                <a-menu-item v-if="originColumn.allowDownload !== false" @click="handleClickDownloadFile">
+                  <span><a-icon type="download"/>&nbsp;下载</span>
+                </a-menu-item>
+                <a-menu-item v-if="originColumn.allowRemove !== false" @click="handleClickDeleteFile">
+                  <span><a-icon type="delete"/>&nbsp;删除</span>
+                </a-menu-item>
+                <a-menu-item @click="handleMoreOperation(originColumn)">
+                  <span><a-icon type="bars"/> 更多</span>
+                </a-menu-item>
+              </a-menu>
+            </a-dropdown>
+          </template>
+        </div>
+      </template>
+
+    </template>
+
+    <a-upload
+      v-show="!hasFile"
+      name="file"
+      :data="{'isup': 1}"
+      :multiple="false"
+      :action="uploadAction"
+      :headers="uploadHeaders"
+      :showUploadList="false"
+      v-bind="cellProps"
+      @change="handleChangeUpload"
+    >
+      <a-button icon="upload">{{originColumn.btnText || '上传文件'}}</a-button>
+    </a-upload>
+    <j-file-pop ref="filePop" @ok="handleFileSuccess" :number="number"/>
+  </div>
+</template>
+
+<script>
+import { getFileAccessHttpUrl } from '@api/manage'
+import JVxeCellMixins from '@/components/jero/JVxeTable/mixins/JVxeCellMixins'
+import { ACCESS_TOKEN } from '@/store/mutation-types'
+import JFilePop from '@/components/jero/minipop/JFilePop'
+
+import JVxeUploadCell from '@/components/jero/JVxeTable/components/cells/JVxeUploadCell'
+
+export default {
+  name: 'JVxeFileCell',
+  mixins: [JVxeCellMixins],
+  components: { JFilePop },
+  props: {},
+  data () {
+    return {
+      innerFile: null,
+      number: 0
+    }
+  },
+  computed: {
+    /** upload headers */
+    uploadHeaders () {
+      const { originColumn: col } = this
+      const headers = {}
+      if (col.token === true) {
+        headers['X-Access-Token'] = this.$ls.get(ACCESS_TOKEN)
+      }
+      return headers
+    },
+
+    /** 上传请求地址 */
+    uploadAction () {
+      if (!this.originColumn.action) {
+        return window._CONFIG.domianURL + '/sys/common/upload'
+      } else {
+        return this.originColumn.action
+      }
+    },
+
+    hasFile () {
+      return this.innerFile != null
+    },
+
+    ellipsisFileName () {
+      const length = 5
+      const file = this.innerFile
+      if (!file || !file.name) {
+        return ''
+      }
+      if (file.name.length > length) {
+        return file.name.substr(0, length) + '…'
+      }
+      return file.name
+    },
+
+    responseName () {
+      if (this.originColumn.responseName) {
+        return this.originColumn.responseName
+      } else {
+        return 'message'
+      }
+    }
+
+  },
+  watch: {
+    innerValue: {
+      immediate: true,
+      handler () {
+        if (this.innerValue) {
+          this.innerFile = this.innerValue
+        } else {
+          this.innerFile = null
+        }
+      }
+    }
+  },
+  methods: {
+
+    // 点击更多按钮
+    handleMoreOperation (originColumn) {
+      // update-begin-author:wangshuai date:20201021 for:LOWCOD-969 判断传过来的字段是否存在number，用于控制上传文件
+      if (originColumn.number) {
+        this.number = originColumn.number
+      } else {
+        this.number = 0
+      }
+      // update-end-author:wangshuai date:20201021 for:LOWCOD-969 判断传过来的字段是否存在number，用于控制上传文件
+      if (originColumn && originColumn.fieldExtendJson) {
+        const json = JSON.parse(originColumn.fieldExtendJson)
+        this.number = json.uploadnum ? json.uploadnum : 0
+      }
+      let path = ''
+      if (this.innerFile) {
+        path = this.innerFile.path
+      }
+      this.$refs.filePop.show('', path)
+    },
+
+    // 更多上传回调
+    handleFileSuccess (file) {
+      if (file) {
+        this.innerFile.path = file.path
+        this.handleChangeCommon(this.innerFile)
+      }
+    },
+
+    handleChangeUpload (info) {
+      // const { originColumn: col } = this
+      const { file } = info
+      const value = {
+        name: file.name,
+        type: file.type,
+        size: file.size,
+        status: file.status,
+        percent: file.percent
+      }
+      if (file.response) {
+        value.responseName = file.response[this.responseName]
+      }
+      if (file.status === 'done') {
+        if (typeof file.response.success === 'boolean') {
+          if (file.response.success) {
+            value.path = file.response[this.responseName]
+            this.handleChangeCommon(value)
+          } else {
+            value.status = 'error'
+            value.message = file.response.message || '未知错误'
+          }
+        } else {
+          // 考虑到如果设置action上传路径为非jeecg-boot后台，可能不会返回 success 属性的情况，就默认为成功
+          value.path = file.response[this.responseName]
+          this.handleChangeCommon(value)
+        }
+      } else if (file.status === 'error') {
+        value.message = file.response.message || '未知错误'
+      }
+      this.innerFile = value
+    },
+
+    handleClickDownloadFile () {
+      let { url, path } = this.innerFile || {}
+      if (!url || url.length === 0) {
+        if (path && path.length > 0) {
+          url = getFileAccessHttpUrl(path.split(',')[0])
+        }
+      }
+      if (url) {
+        window.open(url)
+      }
+    },
+
+    handleClickDeleteFile () {
+      this.handleChangeCommon(null)
+    }
+
+  },
+  // 【组件增强】注释详见：JVxeCellMixins.js
+  enhanced: {
+    switches: { visible: true },
+    getValue: value => JVxeUploadCell.enhanced.getValue(value),
+    setValue: value => JVxeUploadCell.enhanced.setValue(value)
+  }
+}
+</script>
+
+<style scoped lang="less">
+</style>

src/components/JVxeCells/JVxeImageCell.vue

@@ -0,0 +1,245 @@
+<template>
+  <div>
+    <template v-if="hasFile">
+      <template v-for="(file, fileKey) of [innerFile || {}]">
+        <div :key="fileKey" style="position: relative;">
+          <template v-if="!file || !(file['url'] || file['path'] || file['message'])">
+            <a-tooltip :title="'请稍后: ' + JSON.stringify (file) + ((file['url'] || file['path'] || file['message']))">
+              <a-icon type="loading"/>
+            </a-tooltip>
+          </template>
+          <template v-else-if="file['path']">
+            <img class="j-editable-image" :src="imgSrc" alt="无图片" @click="handleMoreOperation"/>
+          </template>
+          <a-tooltip v-else :title="file.message||'上传失败'" @click="handleClickShowImageError">
+            <a-icon type="exclamation-circle" style="color:red;"/>
+          </a-tooltip>
+
+          <template style="width: 30px">
+            <a-dropdown :trigger="['click']" placement="bottomRight" style="margin-left: 10px;">
+              <a-tooltip title="操作">
+                <a-icon
+                  v-if="file.status!=='uploading'"
+                  type="setting"
+                  style="cursor: pointer;"/>
+              </a-tooltip>
+
+              <a-menu slot="overlay">
+                <a-menu-item v-if="originColumn.allowDownload !== false" @click="handleClickDownloadFile">
+                  <span><a-icon type="download"/>&nbsp;下载</span>
+                </a-menu-item>
+                <a-menu-item v-if="originColumn.allowRemove !== false" @click="handleClickDeleteFile">
+                  <span><a-icon type="delete"/>&nbsp;删除</span>
+                </a-menu-item>
+                <a-menu-item @click="handleMoreOperation(originColumn)">
+                  <span><a-icon type="bars"/> 更多</span>
+                </a-menu-item>
+              </a-menu>
+            </a-dropdown>
+          </template>
+
+        </div>
+      </template>
+    </template>
+
+    <a-upload
+      v-show="!hasFile"
+      name="file"
+      :data="{'isup': 1}"
+      :multiple="false"
+      :action="uploadAction"
+      :headers="uploadHeaders"
+      :showUploadList="false"
+      v-bind="cellProps"
+      @change="handleChangeUpload"
+    >
+      <a-button icon="upload">{{originColumn.btnText || '上传图片'}}</a-button>
+    </a-upload>
+    <j-file-pop ref="filePop" @ok="handleFileSuccess" :number="number"/>
+  </div>
+</template>
+
+<script>
+import { getFileAccessHttpUrl } from '@api/manage'
+import JVxeCellMixins from '@/components/jero/JVxeTable/mixins/JVxeCellMixins'
+import { ACCESS_TOKEN } from '@/store/mutation-types'
+import JFilePop from '@/components/jero/minipop/JFilePop'
+
+import JVxeUploadCell from '@/components/jero/JVxeTable/components/cells/JVxeUploadCell'
+
+export default {
+  name: 'JVxeImageCell',
+  mixins: [JVxeCellMixins],
+  components: { JFilePop },
+  props: {},
+  data () {
+    return {
+      innerFile: null,
+      number: 0
+    }
+  },
+  computed: {
+    /** upload headers */
+    uploadHeaders () {
+      const { originColumn: col } = this
+      const headers = {}
+      if (col.token === true) {
+        headers['X-Access-Token'] = this.$ls.get(ACCESS_TOKEN)
+      }
+      return headers
+    },
+
+    /** 上传请求地址 */
+    uploadAction () {
+      if (!this.originColumn.action) {
+        return window._CONFIG.domianURL + '/sys/common/upload'
+      } else {
+        return this.originColumn.action
+      }
+    },
+
+    hasFile () {
+      return this.innerFile != null
+    },
+
+    /** 预览图片地址 */
+    imgSrc () {
+      if (this.innerFile) {
+        if (this.innerFile.url) {
+          return this.innerFile.url
+        } else if (this.innerFile.path) {
+          const path = this.innerFile.path.split(',')[0]
+          return getFileAccessHttpUrl(path)
+        }
+      }
+      return ''
+    },
+
+    responseName () {
+      if (this.originColumn.responseName) {
+        return this.originColumn.responseName
+      } else {
+        return 'message'
+      }
+    }
+
+  },
+  watch: {
+    innerValue: {
+      immediate: true,
+      handler () {
+        if (this.innerValue) {
+          this.innerFile = this.innerValue
+        } else {
+          this.innerFile = null
+        }
+      }
+    }
+  },
+  methods: {
+
+    // 点击更多按钮
+    handleMoreOperation (originColumn) {
+      // update-begin-author:wangshuai date:20201021 for:LOWCOD-969 判断传过来的字段是否存在number，用于控制上传文件
+      if (originColumn.number) {
+        this.number = originColumn.number
+      } else {
+        this.number = 0
+      }
+      // update-end-author:wangshuai date:20201021 for:LOWCOD-969 判断传过来的字段是否存在number，用于控制上传文件
+      if (originColumn && originColumn.fieldExtendJson) {
+        const json = JSON.parse(originColumn.fieldExtendJson)
+        this.number = json.uploadnum ? json.uploadnum : 0
+      }
+      let path = ''
+      if (this.innerFile) {
+        path = this.innerFile.path
+      }
+      this.$refs.filePop.show('', path, 'img')
+    },
+
+    // 更多上传回调
+    handleFileSuccess (file) {
+      if (file) {
+        this.innerFile.path = file.path
+        this.handleChangeCommon(this.innerFile)
+      }
+    },
+
+    // 弹出上传出错详细信息
+    handleClickShowImageError () {
+      const file = this.innerFile || null
+      if (file && file.message) {
+        this.$error({ title: '上传出错', content: '错误信息：' + file.message, maskClosable: true })
+      }
+    },
+
+    handleChangeUpload (info) {
+      // const { originColumn: col } = this
+      const { file } = info
+      const value = {
+        name: file.name,
+        type: file.type,
+        size: file.size,
+        status: file.status,
+        percent: file.percent
+      }
+      if (file.response) {
+        value.responseName = file.response[this.responseName]
+      }
+      if (file.status === 'done') {
+        if (typeof file.response.success === 'boolean') {
+          if (file.response.success) {
+            value.path = file.response[this.responseName]
+            this.handleChangeCommon(value)
+          } else {
+            value.status = 'error'
+            value.message = file.response.message || '未知错误'
+          }
+        } else {
+          // 考虑到如果设置action上传路径为非jeecg-boot后台，可能不会返回 success 属性的情况，就默认为成功
+          value.path = file.response[this.responseName]
+          this.handleChangeCommon(value)
+        }
+      } else if (file.status === 'error') {
+        value.message = file.response.message || '未知错误'
+      }
+      this.innerFile = value
+    },
+
+    handleClickDownloadFile () {
+      if (this.imgSrc) {
+        window.open(this.imgSrc)
+      }
+    },
+
+    handleClickDeleteFile () {
+      this.handleChangeCommon(null)
+    }
+
+  },
+  // 【组件增强】注释详见：JVxeCellMixins.js
+  enhanced: {
+    switches: { visible: true },
+    getValue: value => JVxeUploadCell.enhanced.getValue(value),
+    setValue: value => JVxeUploadCell.enhanced.setValue(value)
+  }
+}
+</script>
+
+<style scoped lang="less">
+.j-editable-image {
+  height: 32px;
+  max-width: 100px !important;
+  cursor: pointer;
+
+  &:hover {
+    opacity: 0.8;
+  }
+
+  &:active {
+    opacity: 0.6;
+  }
+
+}
+</style>

src/components/JVxeCells/JVxePopupCell.vue

@@ -0,0 +1,63 @@
+<template>
+  <j-popup
+    v-bind="popupProps"
+    @input="handlePopupInput"
+  />
+</template>
+
+<script>
+import JVxeCellMixins, { dispatchEvent, vModel } from '@/components/jero/JVxeTable/mixins/JVxeCellMixins'
+
+export default {
+  name: 'JVxePopupCell',
+  mixins: [JVxeCellMixins],
+  computed: {
+    popupProps () {
+      const { innerValue, originColumn: col, caseId, cellProps } = this
+      return {
+        ...cellProps,
+        value: innerValue,
+        field: col.field || col.key,
+        code: col.popupCode,
+        orgFields: col.orgFields,
+        destFields: col.destFields,
+        groupId: caseId,
+        param: col.param,
+        sorter: col.sorter
+      }
+    }
+  },
+  methods: {
+    /** popup回调 */
+    handlePopupInput (value, others) {
+      const { row, originColumn: col } = this
+      // 存储输入的值
+      let popupValue = value
+      if (others && Object.keys(others).length > 0) {
+        Object.keys(others).forEach(key => {
+          const currentValue = others[key]
+          // 当前列直接赋值，其他列通过vModel赋值
+          if (key === col.key) {
+            popupValue = currentValue
+          } else {
+            vModel.call(this, currentValue, row, key)
+          }
+        })
+      }
+      this.handleChangeCommon(popupValue)
+    }
+  },
+  // 【组件增强】注释详见：JVxeCellMixins.js
+  enhanced: {
+    aopEvents: {
+      editActived (event) {
+        dispatchEvent.call(this, event, 'ant-input')
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

src/components/JVxeCells/JVxeRadioCell.vue

@@ -0,0 +1,60 @@
+<template>
+  <a-radio-group
+    :class="clazz"
+    :value="innerValue"
+    v-bind="cellProps"
+    @change="(e)=>handleChangeCommon(e.target.value)"
+  >
+    <a-radio
+      v-for="item of originColumn.options"
+      :key="item.value"
+      :value="item.value"
+      @click="$event=>handleRadioClick(item,$event)"
+    >{{ item.text }}
+    </a-radio>
+  </a-radio-group>
+</template>
+
+<script>
+import JVxeCellMixins from '@/components/jero/JVxeTable/mixins/JVxeCellMixins'
+
+export default {
+  name: 'JVxeRadioCell',
+  mixins: [JVxeCellMixins],
+  computed: {
+    scrolling () {
+      return !!this.renderOptions.scrolling
+    },
+    clazz () {
+      return {
+        'j-vxe-radio': true,
+        'no-animation': this.scrolling
+      }
+    }
+  },
+  methods: {
+    handleRadioClick (item) {
+      if (this.originColumn.allowClear === true) {
+        // 取消选择
+        if (item.value === this.innerValue) {
+          this.handleChangeCommon(null)
+        }
+      }
+    }
+  },
+  // 【组件增强】注释详见：JVxeCellMixins.js
+  enhanced: {
+    switches: { visible: true }
+  }
+}
+</script>
+
+<style lang="less">
+  // 关闭动画，防止滚动时动态赋值出现问题
+  .j-vxe-radio.no-animation {
+    .ant-radio-inner,
+    .ant-radio-inner::after {
+      transition: none !important;
+    }
+  }
+</style>

src/components/JVxeCells/JVxeSelectDictSearchCell.js

@@ -0,0 +1,262 @@
+import debounce from 'lodash/debounce'
+import { getAction } from '@/api/manage'
+import { cloneObject } from '@/utils/util'
+import { filterDictText } from '@/components/dict/JDictSelectUtil'
+import { ajaxGetDictItems, getDictItemsFromCache } from '@/api/api'
+import JVxeCellMixins, { dispatchEvent } from '@/components/jero/JVxeTable/mixins/JVxeCellMixins'
+
+/** 公共资源 */
+const common = {
+  /** value - label map，防止重复查询（刷新清空缓存） */
+  labelMap: new Map(),
+
+  /** 公共data */
+  data () {
+    return {
+      loading: false,
+      innerSelectValue: null,
+      innerOptions: []
+    }
+  },
+  /** 公共计算属性 */
+  computed: {
+    dict () {
+      return this.originColumn.dict
+    },
+    options () {
+      if (this.isAsync) {
+        return this.innerOptions
+      } else {
+        return this.originColumn.options || []
+      }
+    },
+    // 是否是异步模式
+    isAsync () {
+      const isAsync = this.originColumn.async
+      return (isAsync != null && isAsync !== '') ? !!isAsync : true
+    }
+  },
+  /** 公共属性监听 */
+  watch: {
+    innerValue: {
+      immediate: true,
+      handler (value) {
+        if (value == null || value === '') {
+          this.innerSelectValue = null
+        } else {
+          this.loadDataByValue(value)
+        }
+      }
+    },
+    dict () {
+      this.loadDataByDict()
+    }
+  },
+  /** 公共方法 */
+  methods: {
+
+    // 根据 value 查询数据，用于回显
+    async loadDataByValue (value) {
+      if (this.isAsync) {
+        if (this.innerSelectValue !== value) {
+          if (common.labelMap.has(value)) {
+            this.innerOptions = cloneObject(common.labelMap.get(value))
+          } else {
+            const { success, result } = await getAction(`/sys/dict/loadDictItem/${this.dict}`, { key: value })
+            if (success && result && result.length > 0) {
+              this.innerOptions = [{ value: value, text: result[0] }]
+              common.labelMap.set(value, cloneObject(this.innerOptions))
+            }
+          }
+        }
+      }
+      this.innerSelectValue = (value || '').toString()
+    },
+
+    // 初始化字典
+    async loadDataByDict () {
+      if (!this.isAsync) {
+        // 如果字典项集合有数据
+        if (!this.originColumn.options || this.originColumn.options.length === 0) {
+          // 根据字典Code, 初始化字典数组
+          let dictStr = ''
+          if (this.dict) {
+            const arr = this.dict.split(',')
+            if (arr[0].indexOf('where') > 0) {
+              const tbInfo = arr[0].split('where')
+              dictStr = tbInfo[0].trim() + ',' + arr[1] + ',' + arr[2] + ',' + encodeURIComponent(tbInfo[1])
+            } else {
+              dictStr = this.dict
+            }
+            if (this.dict.indexOf(',') === -1) {
+              // 优先从缓存中读取字典配置
+              const cache = getDictItemsFromCache(this.dict)
+              if (cache) {
+                this.innerOptions = cache
+                return
+              }
+            }
+            const { success, result } = await ajaxGetDictItems(dictStr, null)
+            if (success) {
+              this.innerOptions = result
+            }
+          }
+        }
+      }
+    }
+
+  }
+
+}
+
+// 显示组件，自带翻译
+export const DictSearchSpanCell = {
+  name: 'JVxeSelectSearchSpanCell',
+  mixins: [JVxeCellMixins],
+  data () {
+    return {
+      ...common.data.apply(this)
+    }
+  },
+  computed: {
+    ...common.computed
+  },
+  watch: {
+    ...common.watch
+  },
+  methods: {
+    ...common.methods
+  },
+  render (h) {
+    return h('span', {}, [
+      filterDictText(this.innerOptions, this.innerSelectValue || this.innerValue)
+    ])
+  }
+}
+
+// 请求id
+let requestId = 0
+
+// 输入选择组件
+export const DictSearchInputCell = {
+  name: 'JVxeSelectSearchInputCell',
+  mixins: [JVxeCellMixins],
+  data () {
+    return {
+      ...common.data.apply(this),
+
+      hasRequest: false,
+      scopedSlots: {
+        notFoundContent: () => {
+          if (this.loading) {
+            return <a-spin size="small"/>
+          } else if (this.hasRequest) {
+            return <div>没有查询到任何数据</div>
+          } else {
+            return <div>{this.tipsContent}</div>
+          }
+        }
+      }
+    }
+  },
+  computed: {
+    ...common.computed,
+    tipsContent () {
+      return this.originColumn.tipsContent || '请输入搜索内容'
+    },
+    filterOption () {
+      if (this.isAsync) {
+        return null
+      }
+      return (input, option) => option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
+    }
+  },
+  watch: {
+    ...common.watch
+  },
+  created () {
+    this.loadData = debounce(this.loadData, 300)// 消抖
+  },
+  methods: {
+    ...common.methods,
+
+    loadData (value) {
+      const currentRequestId = ++requestId
+      this.loading = true
+      this.innerOptions = []
+      if (value == null || value.trim() === '') {
+        this.loading = false
+        this.hasRequest = false
+        return
+      }
+      // 字典code格式：table,text,code
+      this.hasRequest = true
+      getAction(`/sys/dict/loadDict/${this.dict}`, { keyword: value }).then(res => {
+        if (currentRequestId !== requestId) {
+          return
+        }
+        const { success, result, message } = res
+        if (success) {
+          this.innerOptions = result
+          result.forEach((item) => {
+            common.labelMap.set(item.value, [item])
+          })
+        } else {
+          this.$message.warning(message)
+        }
+      }).finally(() => {
+        this.loading = false
+      })
+    },
+
+    handleChange (selectedValue) {
+      this.innerSelectValue = selectedValue
+      this.handleChangeCommon(this.innerSelectValue)
+    },
+    handleSearch (value) {
+      if (this.isAsync) {
+        // 在输入时也应该开启加载，因为loadData加了消抖，所以会有800ms的用户主观上认为的卡顿时间
+        this.loading = true
+        if (this.innerOptions.length > 0) {
+          this.innerOptions = []
+        }
+        this.loadData(value)
+      }
+    },
+
+    renderOptionItem () {
+      const options = []
+      this.options.forEach(({ value, text, label, title, disabled }) => {
+        options.push(
+          <a-select-option key={value} value={value} disabled={disabled}>{text || label || title}</a-select-option>
+        )
+      })
+      return options
+    }
+  },
+  render () {
+    return (
+      <a-select
+        showSearch
+        allowClear
+        value={this.innerSelectValue}
+        filterOption={this.filterOption}
+        style="width: 100%"
+        {...this.cellProps}
+        onSearch={this.handleSearch}
+        onChange={this.handleChange}
+        scopedSlots={this.scopedSlots}
+      >
+        {this.renderOptionItem()}
+      </a-select>
+    )
+  },
+  // 【组件增强】注释详见：JVxeCellMixins.js
+  enhanced: {
+    aopEvents: {
+      editActived (event) {
+        dispatchEvent.call(this, event, 'ant-select')
+      }
+    }
+  }
+}

src/components/JVxeCells/install.js

@@ -0,0 +1,36 @@
+import { installCell, JVXETypes } from '@/components/jero/JVxeTable'
+import JVxePopupCell from './JVxePopupCell'
+import { DictSearchInputCell, DictSearchSpanCell } from './JVxeSelectDictSearchCell'
+import JVxeFileCell from './JVxeFileCell'
+import JVxeImageCell from './JVxeImageCell'
+import JVxeRadioCell from './JVxeRadioCell'
+import JVxeSelectCell from '@comp/jero/JVxeTable/components/cells/JVxeSelectCell'
+import JVxeTextareaCell from '@comp/jero/JVxeTable/components/cells/JVxeTextareaCell'
+
+// 注册online组件
+JVXETypes.input_pop = 'input_pop'
+JVXETypes.list_multi = 'list_multi'
+JVXETypes.sel_search = 'sel_search'
+installCell(JVXETypes.input_pop, JVxeTextareaCell)
+installCell(JVXETypes.list_multi, JVxeSelectCell)
+installCell(JVXETypes.sel_search, JVxeSelectCell)
+
+// 注册【popup】组件（普通封装方式）
+JVXETypes.popup = 'popup'
+installCell(JVXETypes.popup, JVxePopupCell)
+
+// 注册【字典搜索下拉】组件（高级封装方式）
+JVXETypes.selectDictSearch = 'select-dict-search'
+installCell(JVXETypes.selectDictSearch, DictSearchInputCell, DictSearchSpanCell)
+
+// 注册【文件上传】组件
+JVXETypes.file = 'file'
+installCell(JVXETypes.file, JVxeFileCell)
+
+// 注册【图片上传】组件
+JVXETypes.image = 'image'
+installCell(JVXETypes.image, JVxeImageCell)
+
+// 注册【单选框】组件
+JVXETypes.radio = 'radio'
+installCell(JVXETypes.radio, JVxeRadioCell)

src/components/README.md

@@ -0,0 +1,41 @@
+####1._util包:存放自定义函数 详细见代码注释
+####2.AvatarList:显示头像群并支持tip，用法参考src\views\Home.vue（如下图）
+![输入图片说明](https://static.oschina.net/uploads/img/201904/12181253_O0Xi.png "在这里输入图片标题")
+####3.chart包:存放各种图表相关的组件,条形图柱形图折线图等等 具体用法参考首页
+####4.countDown包:一个倒计时组件，用法参考home页,简单描述,该组件有3个属性,
+target(时间/毫秒数)必填，
+format(function,该方法接收一个毫秒数的参数,用于格式化显示当前倒计时时间)非必填,
+onEnd倒计时结束触发函数
+![输入图片说明](https://static.oschina.net/uploads/img/201904/12182046_mwqJ.png "在这里输入图片标题")
+####5.dict包：数据字典专用，用法参考文件夹下readme文件
+####6.Ellipsis包：字符串截取组件,可以指定字符串的显示长度,并将全部内容显示到tip中,简单使用参考src\views\system\PermissionList.vue
+####7.jero包：该包下自定义了很多列表/表单中用到的组件 参考包下readme文件
+####8.jerobiz包：该包下定义了一些业务相关的组件，比如选择用户弹框,根据部门选择用户等等
+####9.layouts+page包：系统页面布局相关组件，比如登陆进去之后页面顶部显示什么，底部显示什么，菜单点击触发多个tab的布局等等 一般情况不需要修改
+####10.menun包：菜单组件，俩个，一个折叠菜单一个正常显示的菜单
+####12.online包：该包下封装了online表单的相关组件,用于展示表单各种控件,验证表单等等,相关用法参考readme
+####13.setting包：该包下封装了首页风格切换等功能如下图
+![输入图片说明](https://static.oschina.net/uploads/img/201904/12190520_jySG.png "在这里输入图片标题")
+####14.table包：一个二次封装的table组件,用于展示列表，参考readme
+####15.tools包：
+Breadcrumb.vue：面包屑二次封装,支持路由跳转
+DetailList.vue：详情展示用法参考src\views\profile\advanced\Advanced.vue(效果如下图)
+![输入图片说明](https://static.oschina.net/uploads/img/201904/12193954_Uar6.png "在这里输入图片标题")
+````
+个人认为该页面代码有两点值得学习：
+1.vue provide/inject的使用
+2.该页面css定义方式,只定义一个顶层class,其余样式都定义在其下,这样只要顶层class不和别的页面冲突,整个页面的样式都是唯一生效的
+````
+FooterToolBar.vue:fixed定位的底部，通过是否定义内部控件的属性slot="extra"决定是左浮动或是右浮动
+HeaderNotice.vue:首页通知(如下图)
+![输入图片说明](https://static.oschina.net/uploads/img/201904/12195340_fPe0.png "在这里输入图片标题")
+HeaderInfo.vue:上下文字布局（如下图）
+![输入图片说明](https://static.oschina.net/uploads/img/201904/12195638_dG5o.png "在这里输入图片标题")
+Logo.vue:首页左上侧的log图
+![输入图片说明](https://static.oschina.net/uploads/img/201904/12200908_ihv3.png "在这里输入图片标题")
+UserMenu.vue:首页右上侧的内容
+![输入图片说明](https://static.oschina.net/uploads/img/201904/12201226_laQK.png "在这里输入图片标题")
+####16.trend包 趋势显示组件（如下图）
+![输入图片说明](https://static.oschina.net/uploads/img/201904/12201600_Wo8K.png "在这里输入图片标题")
+![corn表达式](https://oscimg.oschina.net/oscnet/661f9ac09016395f9f49286143af3241623.jpg)
+![corn控件添加清除按钮](https://oscimg.oschina.net/oscnet/15096e49f2e29bd829e304d56770025d03c.jpg)

src/components/Trend/Trend.vue

@@ -0,0 +1,41 @@
+<template>
+  <div :class="[prefixCls, reverseColor && 'reverse-color' ]">
+    <span>
+      <slot name="term"></slot>
+      <span class="item-text">
+        <slot></slot>
+      </span>
+    </span>
+    <span :class="[flag]"><a-icon :type="`caret-${flag}`"/></span>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Trend',
+  props: {
+    prefixCls: {
+      type: String,
+      default: 'ant-pro-trend'
+    },
+    /**
+       * 上升下降标识：up|down
+       */
+    flag: {
+      type: String,
+      required: true
+    },
+    /**
+       * 颜色反转
+       */
+    reverseColor: {
+      type: Boolean,
+      default: false
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+  @import "index";
+</style>

src/components/Trend/index.js

@@ -0,0 +1,3 @@
+import Trend from './Trend.vue'
+
+export default Trend

src/components/Trend/index.less

@@ -0,0 +1,42 @@
+@import "../index";
+
+@trend-prefix-cls: ~"@{ant-pro-prefix}-trend";
+
+.@{trend-prefix-cls} {
+  display: inline-block;
+  font-size: @font-size-base;
+  line-height: 22px;
+
+  .up,
+  .down {
+    margin-left: 4px;
+    position: relative;
+    top: 1px;
+
+    i {
+      font-size: 12px;
+      transform: scale(0.83);
+    }
+  }
+
+  .item-text {
+    display: inline-block;
+    margin-left: 8px;
+    color: rgba(0,0,0,.85);
+  }
+
+  .up {
+    color: @red-6;
+  }
+  .down {
+    color: @green-6;
+    top: -1px;
+  }
+
+  &.reverse-color .up {
+    color: @green-6;
+  }
+  &.reverse-color .down {
+    color: @red-6;
+  }
+}

src/components/_util/Area.js

@@ -0,0 +1,83 @@
+import Vue from 'vue'
+/**
+ * 省市区
+ */
+export default class Area {
+  /**
+   * 构造器
+   * @param pcaa
+   */
+  constructor (pcaa) {
+    if (!pcaa) {
+      pcaa = Vue.prototype.$Jpcaa
+    }
+    const arr = []
+    const province = pcaa['86']
+    Object.keys(province).map(key => {
+      arr.push({ id: key, text: province[key], pid: '86', index: 1 })
+      const city = pcaa[key]
+      Object.keys(city).map(key2 => {
+        arr.push({ id: key2, text: city[key2], pid: key, index: 2 })
+        const qu = pcaa[key2]
+        if (qu) {
+          Object.keys(qu).map(key3 => {
+            arr.push({ id: key3, text: qu[key3], pid: key2, index: 3 })
+          })
+        }
+      })
+    })
+    this.all = arr
+  }
+
+  get pca () {
+    return this.all
+  }
+
+  getCode (text) {
+    if (!text || text.length === 0) {
+      return ''
+    }
+    for (const item of this.all) {
+      if (item.text === text) {
+        return item.id
+      }
+    }
+  }
+
+  getText (code) {
+    if (!code || code.length === 0) {
+      return ''
+    }
+    const arr = []
+    this.getAreaBycode(code, arr, 3)
+    return arr.join('/')
+  }
+
+  getRealCode (code) {
+    const arr = []
+    this.getPcode(code, arr, 3)
+    return arr
+  }
+
+  getPcode (id, arr, index) {
+    for (const item of this.all) {
+      if (item.id === id && item.index === index) {
+        arr.unshift(id)
+        if (item.pid !== '86') {
+          this.getPcode(item.pid, arr, --index)
+        }
+      }
+    }
+  }
+
+  getAreaBycode (code, arr, index) {
+    for (const item of this.all) {
+      if (item.id === code && item.index === index) {
+        arr.unshift(item.text)
+        if (item.pid !== '86') {
+          this.getAreaBycode(item.pid, arr, --index)
+        }
+      }
+    }
+  }
+}

src/components/_util/StringUtil.js

@@ -0,0 +1,46 @@
+/**
+ * 获取字符串的长度ascii长度为1 中文长度为2
+ * @param str
+ * @returns {number}
+ */
+export const getStrFullLength = (str = '') =>
+  str.split('').reduce((pre, cur) => {
+    const charCode = cur.charCodeAt(0)
+    if (charCode >= 0 && charCode <= 128) {
+      return pre + 1
+    }
+    return pre + 2
+  }, 0)
+
+/**
+ * 给定一个字符串和一个长度,将此字符串按指定长度截取
+ * @param str
+ * @param maxLength
+ * @returns {string}
+ */
+export const cutStrByFullLength = (str = '', maxLength) => {
+  let showLength = 0
+  return str.split('').reduce((pre, cur) => {
+    const charCode = cur.charCodeAt(0)
+    if (charCode >= 0 && charCode <= 128) {
+      showLength += 1
+    } else {
+      showLength += 2
+    }
+    if (showLength <= maxLength) {
+      return pre + cur
+    }
+    return pre
+  }, '')
+}
+
+// 下划线转换驼峰
+export function underLinetoHump (name) {
+  return name.replace(/_(\w)/g, function (all, letter) {
+    return letter.toUpperCase()
+  })
+}
+// 驼峰转换下划线
+export function humptoUnderLine (name) {
+  return name.replace(/([A-Z])/g, '_$1').toLowerCase()
+}

src/components/_util/util.js

@@ -0,0 +1,12 @@
+/**
+ * components util
+ */
+
+/**
+ * 清理空值，对象
+ * @param children
+ * @returns {*[]}
+ */
+export function filterEmpty (children = []) {
+  return children.filter(c => c.tag || (c.text && c.text.trim() !== ''))
+}

src/components/chart/AreaChartTy.vue

@@ -0,0 +1,88 @@
+<template>
+  <div :style="{ padding: '0' }">
+    <h4 :style="{ marginBottom: '20px' }">{{ title }}</h4>
+
+    <v-chart ref="chart" :forceFit="true" :height="height" :data="dataSource" :scale="scale">
+      <v-tooltip :shared="false"/>
+      <v-axis/>
+      <v-line position="x*y" :size="lineSize" :color="lineColor"/>
+      <v-area position="x*y" :color="color"/>
+    </v-chart>
+
+  </div>
+</template>
+
+<script>
+import { triggerWindowResizeEvent } from '@/utils/util'
+
+export default {
+  name: 'AreaChartTy',
+  props: {
+    // 图表数据
+    dataSource: {
+      type: Array,
+      required: true
+    },
+    // 图表标题
+    title: {
+      type: String,
+      default: ''
+    },
+    // x 轴别名
+    x: {
+      type: String,
+      default: 'x'
+    },
+    // y 轴别名
+    y: {
+      type: String,
+      default: 'y'
+    },
+    // Y轴最小值
+    min: {
+      type: Number,
+      default: 0
+    },
+    // Y轴最大值
+    max: {
+      type: Number,
+      default: null
+    },
+    // 图表高度
+    height: {
+      type: Number,
+      default: 254
+    },
+    // 线的粗细
+    lineSize: {
+      type: Number,
+      default: 2
+    },
+    // 面积的颜色
+    color: {
+      type: String,
+      default: ''
+    },
+    // 线的颜色
+    lineColor: {
+      type: String,
+      default: ''
+    }
+  },
+  computed: {
+    scale () {
+      return [
+        { dataKey: 'x', title: this.x, alias: this.x },
+        { dataKey: 'y', title: this.y, alias: this.y, min: this.min, max: this.max }
+      ]
+    }
+  },
+  mounted () {
+    triggerWindowResizeEvent()
+  }
+}
+</script>
+
+<style lang="less" scoped>
+  @import "chart";
+</style>

src/components/chart/Bar.vue

@@ -0,0 +1,50 @@
+<template>
+  <div :style="{ padding: '0 0 32px 32px' }">
+    <h4 :style="{ marginBottom: '20px' }">{{ title }}</h4>
+    <v-chart :forceFit="true" :height="height" :data="dataSource" :scale="scale" :padding="padding">
+      <v-tooltip/>
+      <v-axis/>
+      <v-bar position="x*y"/>
+    </v-chart>
+  </div>
+</template>
+
+<script>
+import { triggerWindowResizeEvent } from '@/utils/util'
+
+export default {
+  name: 'Bar',
+  props: {
+    dataSource: {
+      type: Array,
+      required: true
+    },
+    yaxisText: {
+      type: String,
+      default: 'y'
+    },
+    title: {
+      type: String,
+      default: ''
+    },
+    height: {
+      type: Number,
+      default: 254
+    }
+  },
+  data () {
+    return { padding: ['auto', 'auto', '40', '50'] }
+  },
+  computed: {
+    scale () {
+      return [{
+        dataKey: 'y',
+        alias: this.yaxisText
+      }]
+    }
+  },
+  mounted () {
+    triggerWindowResizeEvent()
+  }
+}
+</script>

src/components/chart/BarAndLine.vue

@@ -0,0 +1,60 @@
+<template>
+  <div :style="{ padding: '0 50px 32px 0' }">
+    <h4 :style="{ marginBottom: '20px' }">{{ title }}</h4>
+    <v-chart :forceFit="true" :height="height" :data="data" :scale="scale" :padding=" padding" :onClick="handleClick">
+      <v-tooltip/>
+      <v-legend/>
+      <v-axis/>
+      <v-bar position="type*bar"/>
+      <v-line position="type*line" color="#2fc25b" :size="3"/>
+    </v-chart>
+  </div>
+</template>
+
+<script>
+import { ChartEventMixins } from './mixins/ChartMixins'
+
+export default {
+  name: 'BarAndLine',
+  mixins: [ChartEventMixins],
+  props: {
+    title: {
+      type: String,
+      default: ''
+    },
+    dataSource: {
+      type: Array,
+      default: () => [
+        { type: '10:10', bar: 200, line: 1000 },
+        { type: '10:15', bar: 600, line: 1000 },
+        { type: '10:20', bar: 200, line: 1000 },
+        { type: '10:25', bar: 900, line: 1000 },
+        { type: '10:30', bar: 200, line: 1000 },
+        { type: '10:35', bar: 200, line: 1000 },
+        { type: '10:40', bar: 100, line: 1000 }
+      ]
+    },
+    height: {
+      type: Number,
+      default: 400
+    }
+  },
+  data () {
+    return {
+      padding: { top: 50, right: 50, bottom: 100, left: 50 },
+      scale: [{
+        dataKey: 'bar',
+        min: 0
+      }, {
+        dataKey: 'line',
+        min: 0
+      }]
+    }
+  },
+  computed: {
+    data () {
+      return this.dataSource
+    }
+  }
+}
+</script>

src/components/chart/BarMultid.vue

@@ -0,0 +1,96 @@
+<template>
+  <div :style="{ padding: '0 0 32px 32px' }">
+    <h4 :style="{ marginBottom: '20px' }">{{ title }}</h4>
+    <v-chart :data="data" :height="height" :force-fit="true" :scale="scale" :onClick="handleClick">
+      <v-tooltip/>
+      <v-axis/>
+      <v-legend/>
+      <v-bar position="x*y" color="type" :adjust="adjust"/>
+    </v-chart>
+  </div>
+</template>
+
+<script>
+import { DataSet } from '@antv/data-set'
+import { ChartEventMixins } from './mixins/ChartMixins'
+
+export default {
+  name: 'BarMultid',
+  mixins: [ChartEventMixins],
+  props: {
+    title: {
+      type: String,
+      default: ''
+    },
+    dataSource: {
+      type: Array,
+      default: () => [
+        { type: 'JeroOne', 'Jan.': 18.9, 'Feb.': 28.8, 'Mar.': 39.3, 'Apr.': 81.4, May: 47, 'Jun.': 20.3, 'Jul.': 24, 'Aug.': 35.6 },
+        { type: 'JeroTwo', 'Jan.': 12.4, 'Feb.': 23.2, 'Mar.': 34.5, 'Apr.': 99.7, May: 52.6, 'Jun.': 35.5, 'Jul.': 37.4, 'Aug.': 42.4 }
+      ]
+    },
+    fields: {
+      type: Array,
+      default: () => ['Jan.', 'Feb.', 'Mar.', 'Apr.', 'May', 'Jun.', 'Jul.', 'Aug.']
+    },
+    // 别名，需要的格式：[{field:'name',alias:'姓名'}, {field:'sex',alias:'性别'}]
+    aliases: {
+      type: Array,
+      default: () => []
+    },
+    height: {
+      type: Number,
+      default: 254
+    }
+  },
+  data () {
+    return {
+      adjust: [{
+        type: 'dodge',
+        marginRatio: 1 / 32
+      }]
+    }
+  },
+  computed: {
+    data () {
+      const dv = new DataSet.View().source(this.dataSource)
+      dv.transform({
+        type: 'fold',
+        fields: this.fields,
+        key: 'x',
+        value: 'y'
+      })
+
+      // bar 使用不了 - 和 / 所以替换下
+      const rows = dv.rows.map(row => {
+        if (typeof row.x === 'string') {
+          row.x = row.x.replace(/[-/]/g, '_')
+        }
+        return row
+      })
+      // 替换别名
+      rows.forEach(row => {
+        for (const item of this.aliases) {
+          if (item.field === row.type) {
+            row.type = item.alias
+            break
+          }
+        }
+      })
+      return rows
+    },
+    scale () {
+      return [
+        {
+          type: 'cat',
+          dataKey: 'x'
+        }
+      ]
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

src/components/chart/DashChartDemo.vue

@@ -0,0 +1,187 @@
+<template>
+  <div :style="{ padding: '0 0 32px 32px' }">
+    <v-chart :forceFit="true" :height="300" :data="chartData" :scale="scale">
+      <v-coord type="polar" :startAngle="-202.5" :endAngle="22.5" :radius="0.75"></v-coord>
+      <v-axis
+        dataKey="value"
+        :zIndex="2"
+        :line="null"
+        :label="axisLabel"
+        :subTickCount="4"
+        :subTickLine="axisSubTickLine"
+        :tickLine="axisTickLine"
+        :grid="null"
+      ></v-axis>
+      <v-axis dataKey="1" :show="false"></v-axis>
+      <v-series
+        gemo="point"
+        position="value*1"
+        shape="pointer"
+        color="#1890FF"
+        :active="false"
+      ></v-series>
+      <v-guide
+        type="arc"
+        :zIndex="0"
+        :top="false"
+        :start="arcGuide1Start"
+        :end="arcGuide1End"
+        :vStyle="arcGuide1Style"
+      ></v-guide>
+      <v-guide
+        type="arc"
+        :zIndex="1"
+        :start="arcGuide2Start"
+        :end="getArcGuide2End"
+        :vStyle="arcGuide2Style"
+      ></v-guide>
+      <v-guide
+        type="html"
+        :position="htmlGuidePosition"
+        :html="getHtmlGuideHtml()"
+      ></v-guide>
+    </v-chart>
+  </div>
+</template>
+
+<script>
+import { registerShape } from 'viser-vue'
+
+registerShape('point', 'pointer', {
+  draw (cfg, container) {
+    let point = cfg.points[0]
+    point = this.parsePoint(point)
+    const center = this.parsePoint({
+      x: 0,
+      y: 0
+    })
+    container.addShape('line', {
+      attrs: {
+        x1: center.x,
+        y1: center.y,
+        x2: point.x,
+        y2: point.y + 15,
+        stroke: cfg.color,
+        lineWidth: 5,
+        lineCap: 'round'
+      }
+    })
+    return container.addShape('circle', {
+      attrs: {
+        x: center.x,
+        y: center.y,
+        r: 9.75,
+        stroke: cfg.color,
+        lineWidth: 4.5,
+        fill: '#fff'
+      }
+    })
+  }
+})
+
+const scale = [{
+  dataKey: 'value',
+  min: 0,
+  max: 9,
+  tickInterval: 1,
+  nice: false
+}]
+
+const data = [
+  { value: 7.0 }
+]
+
+export default {
+  name: 'DashChartDemo',
+  props: {
+    datasource: {
+      type: Number,
+      default: 7
+    },
+    title: {
+      type: String,
+      default: ''
+    }
+  },
+  created () {
+    if (!this.datasource) {
+      this.chartData = data
+    } else {
+      this.chartData = [
+        { value: this.datasource }
+      ]
+    }
+    this.getChartData()
+  },
+  watch: {
+    datasource: function (val) {
+      this.chartData = [
+        { value: val }
+      ]
+      this.getChartData()
+    }
+  },
+  methods: {
+    getChartData () {
+      if (this.chartData && this.chartData.length > 0) {
+        this.abcd = this.chartData[0].value * 10
+      } else {
+        this.abcd = 70
+      }
+    },
+    getHtmlGuideHtml () {
+      return '<div style="width: 300px;text-align: center;">\n' +
+          '<p style="font-size: 14px;color: #545454;margin: 0;">' + this.title + '</p>\n' +
+          '<p style="font-size: 36px;color: #545454;margin: 0;">' + this.abcd + '%</p>\n' +
+          '</div>'
+    },
+    getArcGuide2End () {
+      return [this.chartData[0].value, 0.945]
+    }
+  },
+  data () {
+    return {
+      chartData: [],
+      height: 400,
+      scale: scale,
+      abcd: 70,
+      axisLabel: {
+        offset: -16,
+        textStyle: {
+          fontSize: 18,
+          textAlign: 'center',
+          textBaseline: 'middle'
+        }
+      },
+      axisSubTickLine: {
+        length: -8,
+        stroke: '#fff',
+        strokeOpacity: 1
+      },
+      axisTickLine: {
+        length: -17,
+        stroke: '#fff',
+        strokeOpacity: 1
+      },
+      arcGuide1Start: [0, 0.945],
+      arcGuide1End: [9, 0.945],
+      arcGuide1Style: {
+        stroke: '#CBCBCB',
+        lineWidth: 18
+      },
+      arcGuide2Start: [0, 0.945],
+      arcGuide2Style: {
+        stroke: '#1890FF',
+        lineWidth: 18
+      },
+      htmlGuidePosition: ['50%', '100%'],
+      htmlGuideHtml: `
+        <div style="width: 300px;text-align: center;">
+          <p style="font-size: 14px;color: #545454;margin: 0;">${this.title}</p>
+          <p style="font-size: 36px;color: #545454;margin: 0;">${this.abcd}%</p>
+        </div>
+      `
+    }
+  }
+}
+</script>

src/components/chart/IndexBar.vue

@@ -0,0 +1,61 @@
+<template>
+  <div :style="{ padding: '0 0 32px 32px' }">
+    <h4 :style="{ marginBottom: '20px' }">{{ title }}</h4>
+    <v-chart
+      height="254"
+      :data="datasource"
+      :forceFit="true"
+      :padding="['auto', 'auto', '40', '50']">
+      <v-tooltip />
+      <v-axis />
+      <v-bar position="x*y"/>
+    </v-chart>
+  </div>
+</template>
+
+<script>
+
+const data = []
+for (let i = 0; i < 12; i += 1) {
+  data.push({
+    x: `${i + 1}月`,
+    y: Math.floor(Math.random() * 1000) + 200
+  })
+}
+const tooltip = [
+  'x*y',
+  (x, y) => ({
+    name: x,
+    value: y
+  })
+]
+const scale = [{
+  dataKey: 'x',
+  min: 2
+}, {
+  dataKey: 'y',
+  title: '时间',
+  min: 1,
+  max: 22
+}]
+
+export default {
+  name: 'Bar',
+  props: {
+    title: {
+      type: String,
+      default: ''
+    }
+  },
+  mounted () {
+    this.datasource = data
+  },
+  data () {
+    return {
+      datasource: [],
+      scale,
+      tooltip
+    }
+  }
+}
+</script>

src/components/chart/LineChartMultid.vue

@@ -0,0 +1,95 @@
+<template>
+  <div :style="{ padding: '0 0 32px 32px' }">
+    <h4 :style="{ marginBottom: '20px' }">{{ title }}</h4>
+    <v-chart :force-fit="true" :height="height" :data="data" :scale="scale" :onClick="handleClick">
+      <v-tooltip/>
+      <v-axis/>
+      <v-legend/>
+      <v-line position="type*y" color="x"/>
+      <v-point position="type*y" color="x" :size="4" :v-style="style" :shape="'circle'"/>
+    </v-chart>
+  </div>
+</template>
+
+<script>
+import { DataSet } from '@antv/data-set'
+import { ChartEventMixins } from './mixins/ChartMixins'
+
+export default {
+  name: 'LineChartMultid',
+  mixins: [ChartEventMixins],
+  props: {
+    title: {
+      type: String,
+      default: ''
+    },
+    dataSource: {
+      type: Array,
+      default: () => [
+        { type: 'Jan', jeroOne: 7.0, jeroTwo: 3.9 },
+        { type: 'Feb', jeroOne: 6.9, jeroTwo: 4.2 },
+        { type: 'Mar', jeroOne: 9.5, jeroTwo: 5.7 },
+        { type: 'Apr', jeroOne: 14.5, jeroTwo: 8.5 },
+        { type: 'May', jeroOne: 18.4, jeroTwo: 11.9 },
+        { type: 'Jun', jeroOne: 21.5, jeroTwo: 15.2 },
+        { type: 'Jul', jeroOne: 25.2, jeroTwo: 17.0 },
+        { type: 'Aug', jeroOne: 26.5, jeroTwo: 16.6 },
+        { type: 'Sep', jeroOne: 23.3, jeroTwo: 14.2 },
+        { type: 'Oct', jeroOne: 18.3, jeroTwo: 10.3 },
+        { type: 'Nov', jeroOne: 13.9, jeroTwo: 6.6 },
+        { type: 'Dec', jeroOne: 9.6, jeroTwo: 4.8 }
+      ]
+    },
+    fields: {
+      type: Array,
+      default: () => ['jeroOne', 'jeroTwo']
+    },
+    // 别名，需要的格式：[{field:'name',alias:'姓名'}, {field:'sex',alias:'性别'}]
+    aliases: {
+      type: Array,
+      default: () => []
+    },
+    height: {
+      type: Number,
+      default: 254
+    }
+  },
+  data () {
+    return {
+      scale: [{
+        type: 'cat',
+        dataKey: 'x',
+        min: 0,
+        max: 1
+      }],
+      style: { stroke: '#fff', lineWidth: 1 }
+    }
+  },
+  computed: {
+    data () {
+      const dv = new DataSet.View().source(this.dataSource)
+      dv.transform({
+        type: 'fold',
+        fields: this.fields,
+        key: 'x',
+        value: 'y'
+      })
+      const rows = dv.rows
+      // 替换别名
+      rows.forEach(row => {
+        for (const item of this.aliases) {
+          if (item.field === row.x) {
+            row.x = item.alias
+            break
+          }
+        }
+      })
+      return rows
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

src/components/chart/Liquid.vue

@@ -0,0 +1,80 @@
+<template>
+  <div>
+    <v-chart
+      :forceFit="true"
+      :height="height"
+      :width="width"
+      :data="data"
+      :scale="scale"
+      :padding="0">
+      <v-tooltip/>
+      <v-interval
+        :shape="['liquid-fill-gauge']"
+        position="transfer*value"
+        color=""
+        :v-style="{
+          lineWidth: 8,
+          opacity: 0.75
+        }"
+        :tooltip="[
+          'transfer*value',
+          (transfer, value) => {
+            return {
+              name: transfer,
+              value
+            };
+          },
+        ]"
+      ></v-interval>
+      <v-guide
+        v-for="(row, index) in data"
+        :key="index"
+        type="text"
+        :top="true"
+        :position="{
+          gender: row.transfer,
+          value: 45
+        }"
+        :content="row.value + '%'"
+        :v-style="{
+          fontSize: 100,
+          textAlign: 'center',
+          opacity: 0.75,
+        }"
+      />
+    </v-chart>
+  </div>
+</template>
+
+<script>
+
+const sourceDataConst = [
+  { transfer: '一月', value: 813 },
+  { transfer: '二月', value: 233 },
+  { transfer: '三月', value: 561 }
+]
+
+export default {
+  name: 'Liquid',
+  props: {
+    height: {
+      type: Number,
+      default: 0
+    },
+    width: {
+      type: Number,
+      default: 0
+    }
+  },
+  data () {
+    return {
+      data: sourceDataConst,
+      scale: []
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

src/components/chart/MiniArea.vue

@@ -0,0 +1,69 @@
+<template>
+  <div class="antv-chart-mini">
+    <div class="chart-wrapper" :style="{ height: 46 }">
+      <v-chart :force-fit="true" :height="height" :data="data" :scale="scale" :padding="[36, 0, 18, 0]">
+        <v-tooltip/>
+        <v-smooth-area position="x*y"/>
+      </v-chart>
+    </div>
+  </div>
+</template>
+
+<script>
+import moment from 'dayjs'
+
+const sourceData = []
+const beginDay = new Date().getTime()
+
+for (let i = 0; i < 10; i++) {
+  sourceData.push({
+    x: moment(new Date(beginDay + 1000 * 60 * 60 * 24 * i)).format('YYYY-MM-DD'),
+    y: Math.round(Math.random() * 10)
+  })
+}
+
+export default {
+  name: 'MiniArea',
+  props: {
+    dataSource: {
+      type: Array,
+      default: () => []
+    },
+    // x 轴别名
+    x: {
+      type: String,
+      default: 'x'
+    },
+    // y 轴别名
+    y: {
+      type: String,
+      default: 'y'
+    }
+  },
+  data () {
+    return {
+      data: [],
+      height: 100
+    }
+  },
+  computed: {
+    scale () {
+      return [
+        { dataKey: 'x', title: this.x, alias: this.x },
+        { dataKey: 'y', title: this.y, alias: this.y }
+      ]
+    }
+  },
+  created () {
+    if (this.dataSource.length === 0) {
+      this.data = sourceData
+    } else {
+      this.data = this.dataSource
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+  @import "chart";
+</style>

src/components/chart/MiniBar.vue

@@ -0,0 +1,76 @@
+<template>
+  <div :style="{'width':width===null?'auto':width+'px'}">
+    <v-chart :forceFit="typeof width !== 'number'" :height="height" :data="data" padding="0">
+      <v-tooltip/>
+      <v-bar position="x*y"/>
+    </v-chart>
+  </div>
+</template>
+
+<script>
+import moment from 'dayjs'
+
+const sourceData = []
+const beginDay = new Date().getTime()
+
+for (let i = 0; i < 10; i++) {
+  sourceData.push({
+    x: moment(new Date(beginDay + 1000 * 60 * 60 * 24 * i)).format('YYYY-MM-DD'),
+    y: Math.round(Math.random() * 10)
+  })
+}
+
+const tooltip = [
+  'x*y',
+  (x, y) => ({
+    name: x,
+    value: y
+  })
+]
+
+const scale = [{
+  dataKey: 'x',
+  min: 2
+}, {
+  dataKey: 'y',
+  title: '时间',
+  min: 1,
+  max: 30
+}]
+
+export default {
+  name: 'MiniBar',
+  props: {
+    dataSource: {
+      type: Array,
+      default: () => []
+    },
+    width: {
+      type: Number,
+      default: null
+    },
+    height: {
+      type: Number,
+      default: 200
+    }
+  },
+  created () {
+    if (this.dataSource.length === 0) {
+      this.data = sourceData
+    } else {
+      this.data = this.dataSource
+    }
+  },
+  data () {
+    return {
+      tooltip,
+      data: [],
+      scale
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+  @import "chart";
+</style>

src/components/chart/MiniProgress.vue

@@ -0,0 +1,75 @@
+<template>
+  <div class="chart-mini-progress">
+    <div class="target" :style="{ left: target + '%'}">
+      <span :style="{ backgroundColor: color }"/>
+      <span :style="{ backgroundColor: color }"/>
+    </div>
+    <div class="progress-wrapper">
+      <div class="progress" :style="{ backgroundColor: color, width: percentage + '%', height: height+'px' }"></div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'MiniProgress',
+  props: {
+    target: {
+      type: Number,
+      default: 0
+    },
+    height: {
+      type: Number,
+      default: 10
+    },
+    color: {
+      type: String,
+      default: '#13C2C2'
+    },
+    percentage: {
+      type: Number,
+      default: 0
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+  .chart-mini-progress {
+    padding: 5px 0;
+    position: relative;
+    width: 100%;
+
+    .target {
+      position: absolute;
+      top: 0;
+      bottom: 0;
+
+      span {
+        border-radius: 100px;
+        position: absolute;
+        top: 0;
+        left: 0;
+        height: 4px;
+        width: 2px;
+
+        &:last-child {
+          top: auto;
+          bottom: 0;
+        }
+      }
+    }
+    .progress-wrapper {
+      background-color: #f5f5f5;
+      position: relative;
+
+      .progress {
+        transition: all .4s cubic-bezier(.08, .82, .17, 1) 0s;
+        border-radius: 1px 0 0 1px;
+        background-color: #1890ff;
+        width: 0;
+        height: 100%;
+      }
+    }
+  }
+</style>

src/components/chart/Pie.vue

@@ -0,0 +1,70 @@
+<template>
+  <v-chart :forceFit="true" :height="height" :data="data" :scale="scale" :onClick="handleClick">
+    <v-tooltip :showTitle="false" dataKey="item*percent"/>
+    <v-axis/>
+    <v-legend dataKey="item"/>
+    <v-pie position="percent" color="item" :v-style="pieStyle" :label="labelConfig"/>
+    <v-coord type="theta"/>
+  </v-chart>
+</template>
+
+<script>
+import { ChartEventMixins } from './mixins/ChartMixins'
+const DataSet = require('@antv/data-set')
+
+export default {
+  name: 'Pie',
+  mixins: [ChartEventMixins],
+  props: {
+    title: {
+      type: String,
+      default: ''
+    },
+    height: {
+      type: Number,
+      default: 254
+    },
+    dataSource: {
+      type: Array,
+      default: () => [
+        { item: '示例一', count: 40 },
+        { item: '示例二', count: 21 },
+        { item: '示例三', count: 17 },
+        { item: '示例四', count: 13 },
+        { item: '示例五', count: 9 }
+      ]
+    }
+  },
+  data () {
+    return {
+      scale: [{
+        dataKey: 'percent',
+        min: 0,
+        formatter: '.0%'
+      }],
+      pieStyle: {
+        stroke: '#fff',
+        lineWidth: 1
+      },
+      labelConfig: ['percent', {
+        formatter: (val, item) => {
+          return item.point.item + ': ' + val
+        }
+      }]
+    }
+  },
+  computed: {
+    data () {
+      const dv = new DataSet.View().source(this.dataSource)
+      // 计算数据百分比
+      dv.transform({
+        type: 'percent',
+        field: 'count',
+        dimension: 'item',
+        as: 'percent'
+      })
+      return dv.rows
+    }
+  }
+}
+</script>

src/components/chart/README.md

@@ -0,0 +1,367 @@
+# 报表组件文档
+
+## 柱状图
+
+##### 引用方式
+
+```js 
+import Bar from '@/components/chart/Bar'
+```
+
+##### 参数列表
+
+| 参数名        | 类型     | 必填 | 说明         |
+|------------|--------|----|------------|
+| title      | string |    | 报表标题       |
+| dataSource | array  | ✔️ | 报表数据源      |
+| height     | number |    | 报表高度，默认254 |
+
+##### dataSource 示例
+
+```json
+[
+    {
+        "x": "1月",
+        "y": 320
+    },
+    {
+        "x": "2月",
+        "y": 457
+    },
+    {
+        "x": "3月",
+        "y": 182
+    }
+]
+```
+
+##### 代码示例
+
+```html
+<template>
+    <bar title="柱状图" :dataSource="dataSource" :height="420"/>
+</template>
+
+<script>
+    import Bar from '@/components/chart/Bar'
+
+    export default {
+        name: 'ChartDemo',
+        components: {
+            Bar
+        },
+        data() {
+            return {
+                dataSource: [
+                    {
+                        "x": "1月",
+                        "y": 320
+                    },
+                    {
+                        "x": "2月",
+                        "y": 457
+                    },
+                    {
+                        "x": "3月",
+                        "y": 182
+                    }
+                ]
+            }
+        }
+    }
+</script>
+
+<style></style>
+```
+
+## 多列柱状图
+
+##### 引用方式
+
+```js 
+import BarMultid from '@/components/chart/BarMultid'
+```
+
+##### 参数列表
+
+| 参数名        | 类型     | 必填 | 说明         |
+|------------|--------|----|------------|
+| title      | string |    | 报表标题       |
+| fields     | array  |    | 主列字段列表     |
+| dataSource | array  |    | 报表数据源      |
+| height     | number |    | 报表高度，默认254 |
+
+##### fields 示例
+
+```json
+["Jan.", "Feb.", "Mar.", "Apr.", "May", "Jun.", "Jul.", "Aug."]
+```
+
+##### dataSource 示例
+
+```json
+[
+    {
+        "type": "jero", // 列名
+        "Jan.": 18.9,
+        "Feb.": 28.8,
+        "Mar.": 39.3,
+        "Apr.": 81.4,
+        "May": 47,
+        "Jun.": 20.3,
+        "Jul.": 24,
+        "Aug.": 35.6
+    },
+    {
+        "type": "jeroTwo",
+        "Jan.": 12.4,
+        "Feb.": 23.2,
+        "Mar.": 34.5,
+        "Apr.": 99.7,
+        "May": 52.6,
+        "Jun.": 35.5,
+        "Jul.": 37.4,
+        "Aug.": 42.4
+    }
+]
+```
+
+## 迷你柱状图
+
+不带标题和数据轴的柱状图
+
+##### 引用方式
+
+```js 
+import MiniBar from '@/components/chart/MiniBar'
+```
+
+##### 参数列表
+
+| 参数名        | 类型     | 必填 | 说明            |
+|------------|--------|----|---------------|
+| width      | number |    | 报表宽度度，默认自适应宽度 |
+| height     | number |    | 报表高度，默认200    |
+| dataSource | array  |    | 报表数据源         |
+
+##### dataSource 示例
+
+```json
+[
+    {
+        "x": "1月",
+        "y": 320
+    },
+    {
+        "x": "2月",
+        "y": 457
+    },
+    {
+        "x": "3月",
+        "y": 182
+    }
+]
+```
+
+## 面积图
+
+##### 引用方式
+
+```js 
+import AreaChartTy from '@/components/chart/AreaChartTy'
+```
+
+##### 参数列表
+
+| 参数名        | 类型     | 必填 | 说明         |
+|------------|--------|----|------------|
+| title      | string |    | 报表标题       |
+| dataSource | array  | ✔️ | 报表数据源      |
+| height     | number |    | 报表高度，默认254 |
+| lineSize   | number |    | 线的粗细，默认2   |
+
+##### dataSource 示例
+
+```json
+[
+    {
+        "x": "1月",
+        "y": 320
+    },
+    {
+        "x": "2月",
+        "y": 457
+    },
+    {
+        "x": "3月",
+        "y": 182
+    }
+]
+```
+
+## 多行折线图
+
+##### 引用方式
+
+```js 
+import LineChartMultid from '@/components/chart/LineChartMultid'
+```
+
+##### 参数列表
+
+| 参数名        | 类型     | 必填 | 说明         |
+|------------|--------|----|------------|
+| title      | string |    | 报表标题       |
+| fields     | array  |    | 主列字段列表     |
+| dataSource | array  |    | 报表数据源      |
+| height     | number |    | 报表高度，默认254 |
+
+##### fields 示例
+
+```json
+["jero", "jeroTwo"]
+```
+
+##### dataSource 示例
+
+```json
+[
+    {
+        "type": "Jan", // 列名
+        "jero": 7,
+        "jeroTwo": 3.9
+    },
+    { "type": "Feb", "jero": 6.9, "jeroTwo": 4.2 },
+    { "type": "Mar", "jero": 9.5, "jeroTwo": 5.7 },
+    { "type": "Apr", "jero": 14.5, "jeroTwo": 8.5 },
+    { "type": "May", "jero": 18.4, "jeroTwo": 11.9 },
+    { "type": "Jun", "jero": 21.5, "jeroTwo": 15.2 },
+    { "type": "Jul", "jero": 25.2, "jeroTwo": 17 },
+    { "type": "Aug", "jero": 26.5, "jeroTwo": 16.6 },
+    { "type": "Sep", "jero": 23.3, "jeroTwo": 14.2 },
+    { "type": "Oct", "jero": 18.3, "jeroTwo": 10.3 },
+    { "type": "Nov", "jero": 13.9, "jeroTwo": 6.6 },
+    { "type": "Dec", "jero": 9.6, "jeroTwo": 4.8 }
+]
+```
+
+## 饼状图
+
+##### 引用方式
+
+```js 
+import Pie from '@/components/chart/Pie'
+```
+
+##### 参数列表
+
+| 参数名        | 类型     | 必填 | 说明         |
+|------------|--------|----|------------|
+| dataSource | array  |    | 报表数据源      |
+| height     | number |    | 报表高度，默认254 |
+
+##### dataSource 示例
+
+```json
+[
+    // 所有的 percent 相加等于 100
+    { "item": "一月", "percent": 40 },
+    { "item": "二月", "percent": 21 },
+    { "item": "三月", "percent": 17 },
+    { "item": "四月", "percent": 13 },
+    { "item": "五月", "percent": 9 }
+]
+```
+
+## 雷达图
+
+##### 引用方式
+
+```js 
+import Radar from '@/components/chart/Radar'
+```
+
+##### 参数列表
+
+| 参数名        | 类型     | 必填 | 说明         |
+|------------|--------|----|------------|
+| dataSource | array  |    | 报表数据源      |
+| height     | number |    | 报表高度，默认254 |
+
+##### dataSource 示例
+
+```json
+[
+    // score 最小值为 0，最大值为 100
+    { "item": "一月", "score": 40 },
+    { "item": "二月", "score": 20 },
+    { "item": "三月", "score": 67 },
+    { "item": "四月", "score": 43 },
+    { "item": "五月", "score": 90 }
+]
+```
+
+## 进度条
+
+##### 引用方式
+
+```js 
+import MiniProgress from '@/components/chart/MiniProgress'
+```
+
+##### 参数列表
+
+| 参数名        | 类型     | 必填 | 说明                |
+|------------|--------|----|-------------------|
+| percentage | number |    | 当前进度百分比，默认0，最高100 |
+| target     | number |    | 目标值，默认10          |
+| height     | number |    | 进度条高度，默认10        |
+| color      | string |    | 进度条颜色，默认 #13C2C2  |
+
+## 仪表盘
+
+##### 引用方式
+
+```js 
+import DashChartDemo from '@/components/chart/DashChartDemo'
+```
+
+##### 参数列表
+
+| 参数名    | 类型     | 必填 | 说明             |
+|--------|--------|----|----------------|
+| title  | string |    | 报表标题           |
+| value  | number |    | 当前值，默认6.7，最大为9 |
+| height | number |    | 报表高度，默认254     |
+
+## 排名列表
+
+##### 引用方式
+
+```js 
+import RankList from '@/components/chart/RankList'
+```
+
+##### 参数列表
+
+| 参数名    | 类型     | 必填 | 说明           |
+|--------|--------|----|--------------|
+| title  | string |    | 报表标题         |
+| list   | array  |    | 排名列表数据       |
+| height | number |    | 报表高度，默认自适应高度 |
+
+##### list 示例
+
+```json
+[
+    {
+        "name": "北京朝阳 1 号店",
+        "total": 1981
+    },
+    { "name": "北京朝阳 2 号店", "total": 1359 },
+    { "name": "北京朝阳 3 号店", "total": 1354 },
+    { "name": "北京朝阳 4 号店", "total": 263 },
+    { "name": "北京朝阳 5 号店", "total": 446 },
+    { "name": "北京朝阳 6 号店", "total": 796 }
+]
+```

src/components/chart/Radar.vue

@@ -0,0 +1,90 @@
+<template>
+  <v-chart :forceFit="true" :height="height" :data="data" :padding="[20, 20, 95, 20]" :scale="scale">
+    <v-tooltip></v-tooltip>
+    <v-axis :dataKey="axis1Opts.dataKey" :line="axis1Opts.line" :tickLine="axis1Opts.tickLine" :grid="axis1Opts.grid"/>
+    <v-axis :dataKey="axis2Opts.dataKey" :line="axis2Opts.line" :tickLine="axis2Opts.tickLine" :grid="axis2Opts.grid"/>
+    <v-legend dataKey="user" marker="circle" :offset="30"/>
+    <v-coord type="polar" radius="0.8"/>
+    <v-line position="item*score" color="user" :size="2"/>
+    <v-point position="item*score" color="user" :size="4" shape="circle"/>
+  </v-chart>
+</template>
+
+<script>
+const axis1Opts = {
+  dataKey: 'item',
+  line: null,
+  tickLine: null,
+  grid: {
+    lineStyle: {
+      lineDash: null
+    },
+    hideFirstLine: false
+  }
+}
+const axis2Opts = {
+  dataKey: 'score',
+  line: null,
+  tickLine: null,
+  grid: {
+    type: 'polygon',
+    lineStyle: {
+      lineDash: null
+    }
+  }
+}
+
+const scale = [
+  {
+    dataKey: 'score',
+    min: 0,
+    max: 100
+  }, {
+    dataKey: 'user',
+    alias: '类型'
+  }
+]
+
+const sourceData = [
+  { item: '示例一', score: 40 },
+  { item: '示例二', score: 20 },
+  { item: '示例三', score: 67 },
+  { item: '示例四', score: 43 },
+  { item: '示例五', score: 90 }
+]
+
+export default {
+  name: 'Radar',
+  props: {
+    height: {
+      type: Number,
+      default: 254
+    },
+    dataSource: {
+      type: Array,
+      default: () => []
+    }
+  },
+  data () {
+    return {
+      axis1Opts,
+      axis2Opts,
+      scale,
+      data: sourceData
+    }
+  },
+  watch: {
+    dataSource (newVal) {
+      if (newVal.length === 0) {
+        this.data = sourceData
+      } else {
+        this.data = newVal
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

src/components/chart/RankList.vue

@@ -0,0 +1,81 @@
+<template>
+  <div class="rank">
+    <h4 class="title">{{ title }}</h4>
+    <ul class="list" :style="{height:height?`${height}px`:'auto',overflow:'auto'}">
+      <li :key="index" v-for="(item, index) in list">
+        <span :class="index < 3 ? 'active' : null">{{ index + 1 }}</span>
+        <span>{{ item.name }}</span>
+        <span>{{ item.total }}</span>
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'RankList',
+  // ['title', 'list']
+  props: {
+    title: {
+      type: String,
+      default: ''
+    },
+    list: {
+      type: Array,
+      default: null
+    },
+    height: {
+      type: Number,
+      default: null
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+
+  .rank {
+    padding: 0 32px 32px 72px;
+
+    .list {
+      margin: 25px 0 0;
+      padding: 0;
+      list-style: none;
+
+      li {
+        margin-top: 16px;
+
+        span {
+          color: rgba(0, 0, 0, .65);
+          font-size: 14px;
+          line-height: 22px;
+
+          &:first-child {
+            background-color: #f5f5f5;
+            border-radius: 20px;
+            display: inline-block;
+            font-size: 12px;
+            font-weight: 600;
+            margin-right: 24px;
+            height: 20px;
+            line-height: 20px;
+            width: 20px;
+            text-align: center;
+          }
+          &.active {
+            background-color: #314659;
+            color: #fff;
+          }
+          &:last-child {
+            float: right;
+          }
+        }
+      }
+    }
+  }
+
+  .mobile .rank {
+    padding: 0 32px 32px 32px;
+  }
+
+</style>

src/components/chart/StackBar.vue

@@ -0,0 +1,54 @@
+<template>
+  <div>
+    <v-chart :forceFit="true" :height="height" :data="data">
+      <v-coord type="rect" direction="LB" />
+      <v-tooltip />
+      <v-legend />
+      <v-axis dataKey="State" :label="label" />
+      <v-stack-bar position="State*流程数量"  color="流程状态" />
+    </v-chart>
+  </div>
+
+</template>
+
+<script>
+const DataSet = require('@antv/data-set')
+
+export default {
+  name: 'StackBar',
+  props: {
+    dataSource: {
+      type: Array,
+      required: true,
+      default: () => [
+        { State: '请假', 流转中: 25, 已归档: 18 },
+        { State: '出差', 流转中: 30, 已归档: 20 },
+        { State: '加班', 流转中: 38, 已归档: 42 },
+        { State: '用车', 流转中: 51, 已归档: 67 }
+      ]
+    },
+    height: {
+      type: Number,
+      default: 254
+    }
+  },
+  data () {
+    return {
+      label: { offset: 12 }
+    }
+  },
+  computed: {
+    data () {
+      const dv = new DataSet.View().source(this.dataSource)
+      dv.transform({
+        type: 'fold',
+        fields: ['流转中', '已归档'],
+        key: '流程状态',
+        value: '流程数量',
+        retains: ['State']
+      })
+      return dv.rows
+    }
+  }
+}
+</script>

src/components/chart/TransferBar.vue

@@ -0,0 +1,66 @@
+<template>
+  <div :style="{ padding: '0 0 32px 32px' }">
+    <h4 :style="{ marginBottom: '20px' }">{{ title }}</h4>
+    <v-chart
+      :height="height"
+      :data="data"
+      :scale="scale"
+      :forceFit="true"
+      :padding="['auto', 'auto', '40', '50']">
+      <v-tooltip/>
+      <v-axis/>
+      <v-bar position="x*y"/>
+    </v-chart>
+  </div>
+</template>
+
+<script>
+
+export default {
+  name: 'Bar',
+  props: {
+    title: {
+      type: String,
+      default: ''
+    },
+    x: {
+      type: String,
+      default: 'x'
+    },
+    y: {
+      type: String,
+      default: 'y'
+    },
+    data: {
+      type: Array,
+      default: () => []
+    },
+    height: {
+      type: Number,
+      default: 254
+    }
+  },
+  data () {
+    return {}
+  },
+  computed: {
+    scale () {
+      return [
+        { dataKey: 'x', title: this.x, alias: this.x },
+        { dataKey: 'y', title: this.y, alias: this.y }
+      ]
+    }
+  },
+  created () {
+    // this.getMonthBar()
+  },
+  methods: {
+    // getMonthBar() {
+    //   this.$http.get('/analysis/month-bar')
+    //     .then(res => {
+    //       this.data = res.result
+    //     })
+    // }
+  }
+}
+</script>

src/components/chart/Trend.vue

@@ -0,0 +1,84 @@
+<template>
+  <div class="chart-trend">
+    {{ term }}
+    <span>{{ rate }}%</span>
+    <span :class="['trend-icon', trend]"><a-icon :type="'caret-' + trend"/></span>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Trend',
+  props: {
+    // 同title
+    term: {
+      type: String,
+      default: '',
+      required: true
+    },
+    // 百分比
+    percentage: {
+      type: Number,
+      default: null
+    },
+    type: {
+      type: Boolean,
+      default: null
+    },
+    target: {
+      type: Number,
+      default: 0
+    },
+    value: {
+      type: Number,
+      default: 0
+    },
+    fixed: {
+      type: Number,
+      default: 2
+    }
+  },
+  data () {
+    return {
+      trend: (this.type && 'up') || 'down',
+      rate: this.percentage
+    }
+  },
+  created () {
+    const type = this.type === null ? this.value >= this.target : this.type
+    this.trend = type ? 'up' : 'down'
+    this.rate = (this.percentage === null ? Math.abs(this.value - this.target) * 100 / this.target : this.percentage).toFixed(this.fixed)
+  }
+}
+</script>
+
+<style lang="less" scoped>
+  .chart-trend {
+    display: inline-block;
+    font-size: 14px;
+    line-height: 22px;
+
+    .trend-icon {
+      font-size: 12px;
+
+      &.up, &.down {
+        margin-left: 4px;
+        position: relative;
+        top: 1px;
+
+        i {
+          font-size: 12px;
+          transform: scale(.83);
+        }
+      }
+
+      &.up {
+        color: #f5222d;
+      }
+      &.down {
+        color: #52c41a;
+        top: -1px;
+      }
+    }
+  }
+</style>

src/components/chart/chart.less

@@ -0,0 +1,13 @@
+.antv-chart-mini {
+  position: relative;
+  width: 100%;
+
+  .chart-wrapper {
+    position: absolute;
+    bottom: -28px;
+    width: 100%;
+
+/*    margin: 0 -5px;
+    overflow: hidden;*/
+  }
+}

src/components/chart/mixins/ChartMixins.js

@@ -0,0 +1,10 @@
+export const ChartEventMixins = {
+  methods: {
+    handleClick (event, chart) {
+      this.handleEvent('click', event, chart)
+    },
+    handleEvent (eventName, event, chart) {
+      this.$emit(eventName, event, chart)
+    }
+  }
+}

src/components/dict/JDictSelectTag.vue

@@ -0,0 +1,107 @@
+<template>
+  <a-radio-group v-if="tagType==='radio'" @change="handleInput" :value="getValueSting" :disabled="disabled">
+    <a-radio v-for="(item, key) in dictOptions" :key="key" :value="item.value">{{ item.text }}</a-radio>
+  </a-radio-group>
+
+  <a-radio-group v-else-if="tagType==='radioButton'"  buttonStyle="solid" @change="handleInput" :value="getValueSting" :disabled="disabled">
+    <a-radio-button v-for="(item, key) in dictOptions" :key="key" :value="item.value">{{ item.text }}</a-radio-button>
+  </a-radio-group>
+
+  <a-select v-else-if="tagType==='select'" :getPopupContainer = "getPopupContainer" :placeholder="placeholder" :disabled="disabled" :value="getValueSting" @change="handleInput">
+    <a-select-option :value="undefined">请选择</a-select-option>
+    <a-select-option v-for="(item, key) in dictOptions" :key="key" :value="item.value">
+      <span style="display: inline-block;width: 100%" :title=" item.text || item.label ">
+        {{ item.text || item.label }}
+      </span>
+    </a-select-option>
+  </a-select>
+</template>
+
+<script>
+import { ajaxGetDictItems, getDictItemsFromCache } from '@/api/api'
+
+export default {
+  name: 'JDictSelectTag',
+  props: {
+    dictCode: String,
+    placeholder: String,
+    disabled: Boolean,
+    value: [String, Number],
+    type: String,
+    getPopupContainer: {
+      type: Function,
+      default: (node) => node.parentNode
+    }
+  },
+  data () {
+    return {
+      dictOptions: [],
+      tagType: ''
+    }
+  },
+  watch: {
+    dictCode: {
+      immediate: true,
+      handler () {
+        this.initDictData()
+      }
+    }
+  },
+  created () {
+    if (!this.type || this.type === 'list') {
+      this.tagType = 'select'
+    } else {
+      this.tagType = this.type
+    }
+  },
+  computed: {
+    getValueSting () {
+      // update-begin author:wangshuai date:20200601 for: 不显示placeholder的文字 ------
+      // 当有null或“” placeholder不显示
+      return this.value != null ? this.value.toString() : undefined
+      // update-end author:wangshuai date:20200601 for: 不显示placeholder的文字 ------
+    }
+  },
+  methods: {
+    initDictData () {
+      // 优先从缓存中读取字典配置
+      if (getDictItemsFromCache(this.dictCode)) {
+        this.dictOptions = getDictItemsFromCache(this.dictCode)
+        return
+      }
+
+      // 根据字典Code, 初始化字典数组
+      ajaxGetDictItems(this.dictCode, null).then((res) => {
+        if (res.success) {
+          this.dictOptions = res.result
+        }
+      })
+    },
+    handleInput (e = '') {
+      let val
+      if (Object.keys(e).includes('target')) {
+        val = e.target.value
+      } else {
+        val = e
+      }
+      console.log(val)
+      this.$emit('change', val)
+      // 解决数据规则，选择自定义SQL 规则值无法输入空格
+      this.$emit('input', val)
+    },
+    setCurrentDictOptions (dictOptions) {
+      this.dictOptions = dictOptions
+    },
+    getCurrentDictOptions () {
+      return this.dictOptions
+    }
+  },
+  model: {
+    prop: 'value',
+    event: 'change'
+  }
+}
+</script>
+
+<style scoped>
+</style>

src/components/dict/JDictSelectUtil.js

@@ -0,0 +1,146 @@
+/**
+ * 字典 util
+ * author: scott
+ * date: 20190109
+ */
+
+import { ajaxGetDictItems, getDictItemsFromCache } from '@/api/api'
+// import { getAction } from '@/api/manage'
+
+/**
+ * 获取字典数组
+ * @param dictCode 字典Code
+ * @return List<Map>
+ */
+export async function initDictOptions (dictCode) {
+  if (!dictCode) {
+    return '字典Code不能为空!'
+  }
+  // 优先从缓存中读取字典配置
+  if (getDictItemsFromCache(dictCode)) {
+    const res = {}
+    res.result = getDictItemsFromCache(dictCode)
+    res.success = true
+    return res
+  }
+  // 获取字典数组
+  return (await ajaxGetDictItems(dictCode))
+}
+
+/**
+ * 字典值替换文本通用方法
+ * @param dictOptions  字典数组
+ * @param text  字典值
+ * @return String
+ */
+export function filterDictText (dictOptions, text) {
+  // --update-begin----author:sunjianlei---date:20200323------for: 字典翻译 text 允许逗号分隔 ---
+  if (text != null && Array.isArray(dictOptions)) {
+    const result = []
+    // 允许多个逗号分隔，允许传数组对象
+    let splitText
+    if (Array.isArray(text)) {
+      splitText = text
+    } else {
+      splitText = text.toString().trim().split(',')
+    }
+    for (const txt of splitText) {
+      let dictText = txt
+      for (const dictItem of dictOptions) {
+        if (txt.toString() === dictItem.value.toString()) {
+          dictText = (dictItem.text || dictItem.title || dictItem.label)
+          break
+        }
+      }
+      result.push(dictText)
+    }
+    return result.join(',')
+  }
+  return text
+  // --update-end----author:sunjianlei---date:20200323------for: 字典翻译 text 允许逗号分隔 ---
+}
+
+/**
+ * 字典值替换文本通用方法(多选)
+ * @param dictOptions  字典数组
+ * @param text  字典值
+ * @return String
+ */
+export function filterMultiDictText (dictOptions, text) {
+  // js “!text” 认为0为空，所以做提前处理
+  if (text === 0 || text === '0') {
+    if (dictOptions) {
+      for (const dictItem of dictOptions) {
+        if ((text + '') === (dictItem.value + '')) {
+          return dictItem.text
+        }
+      }
+    }
+  }
+
+  if (!text || text === 'null' || !dictOptions || dictOptions.length === 0) {
+    return ''
+  }
+  let re = ''
+  text = text.toString()
+  const arr = text.split(',')
+  dictOptions.forEach(function (option) {
+    if (option) {
+      for (let i = 0; i < arr.length; i++) {
+        if (arr[i] === option.value) {
+          re += option.text + ','
+          break
+        }
+      }
+    }
+  })
+  if (re === '') {
+    return text
+  }
+  return re.substring(0, re.length - 1)
+}
+
+/**
+ * 翻译字段值对应的文本
+ * @returns string
+ * @param dictCode
+ * @param key
+ */
+export function filterDictTextByCache (dictCode, key) {
+  if (key === null || key === undefined || key.length === 0) {
+    return ''
+  }
+  if (!dictCode) {
+    return '字典Code不能为空!'
+  }
+  // 优先从缓存中读取字典配置
+  if (getDictItemsFromCache(dictCode)) {
+    const item = getDictItemsFromCache(dictCode).filter(t => t.value + '' === key + '')
+    if (item && item.length > 0) {
+      return item[0].text
+    }
+  }
+}
+
+/** 通过code获取字典数组 */
+export async function getDictItems (dictCode, params) {
+  // 优先从缓存中读取字典配置
+  if (getDictItemsFromCache(dictCode)) {
+    return getDictItemsFromCache(dictCode).map(item => ({ ...item, label: item.text }))
+  }
+
+  // 缓存中没有，就请求后台
+  return await ajaxGetDictItems(dictCode, params).then(({ success, result }) => {
+    if (success) {
+      const res = result.map(item => ({ ...item, label: item.text }))
+      console.log('------- 从DB中获取到了字典-------dictCode : ', dictCode, res)
+      return Promise.resolve(res)
+    } else {
+      console.error('getDictItems error: : ', result)
+      return Promise.resolve([])
+    }
+  }).catch((res) => {
+    console.error('getDictItems error: ', res)
+    return Promise.resolve([])
+  })
+}

src/components/dict/JMultiSelectTag.vue

@@ -0,0 +1,121 @@
+<template>
+  <a-checkbox-group v-if="tagType==='checkbox'" @change="onChange" :value="arrayValue" :disabled="disabled">
+    <a-checkbox v-for="(item, key) in dictOptions" :key="key" :value="item.value">{{ item.text || item.label }}</a-checkbox>
+  </a-checkbox-group>
+
+  <a-select
+    v-else-if="tagType==='select'"
+    :value="arrayValue"
+    @change="onChange"
+    :disabled="disabled"
+    mode="multiple"
+    :placeholder="placeholder"
+    :getPopupContainer="getParentContainer"
+    optionFilterProp="children"
+    :filterOption="filterOption"
+    allowClear
+    :options="dictOptions">
+  </a-select>
+
+</template>
+
+<script>
+import { ajaxGetDictItems, getDictItemsFromCache } from '@/api/api'
+export default {
+  name: 'JMultiSelectTag',
+  props: {
+    dictCode: String,
+    placeholder: String,
+    disabled: Boolean,
+    value: String,
+    type: String,
+    options: Array,
+    spliter: {
+      type: String,
+      required: false,
+      default: ','
+    },
+    popContainer: {
+      type: String,
+      default: '',
+      required: false
+    }
+  },
+  data () {
+    return {
+      dictOptions: [],
+      tagType: '',
+      arrayValue: !this.value ? [] : this.value.split(this.spliter)
+    }
+  },
+  created () {
+    if (!this.type || this.type === 'list_multi') {
+      this.tagType = 'select'
+    } else {
+      this.tagType = this.type
+    }
+    // 获取字典数据
+    // this.initDictData();
+  },
+  watch: {
+    options (val) {
+      val.forEach((item, index) => {
+        this.$set(this.dictOptions, index, item)
+      })
+    },
+    dictCode: {
+      immediate: true,
+      handler () {
+        this.initDictData()
+      }
+    },
+    value (val) {
+      if (!val) {
+        this.arrayValue = []
+      } else {
+        this.arrayValue = this.value.split(this.spliter)
+      }
+    }
+  },
+  methods: {
+    initDictData () {
+      if (this.options && this.options.length > 0) {
+        this.dictOptions = [...this.options]
+      } else {
+        // 优先从缓存中读取字典配置
+        const cacheOption = getDictItemsFromCache(this.dictCode)
+        if (cacheOption && cacheOption.length > 0) {
+          this.dictOptions = cacheOption
+          return
+        }
+        // 根据字典Code, 初始化字典数组
+        ajaxGetDictItems(this.dictCode, null).then((res) => {
+          if (res.success) {
+            this.dictOptions = res.result
+          }
+        })
+      }
+    },
+    onChange (selectedValue) {
+      this.arrayValue = selectedValue
+      this.$emit('change', selectedValue.join(this.spliter))
+    },
+    getParentContainer (node) {
+      if (!this.popContainer) {
+        return node.parentNode
+      } else {
+        return document.querySelector(this.popContainer)
+      }
+    },
+    // update--begin--autor:lvdandan-----date:20201120------for：LOWCOD-1086 下拉多选框,搜索时只字典code进行搜索不能通过字典text搜索
+    filterOption (input, option) {
+      return option.componentOptions.children[0].children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
+    }
+    // update--end--autor:lvdandan-----date:20201120------for：LOWCOD-1086 下拉多选框,搜索时只字典code进行搜索不能通过字典text搜索
+  },
+  model: {
+    prop: 'value',
+    event: 'change'
+  }
+}
+</script>

src/components/dict/JSearchSelectTag.vue

@@ -0,0 +1,254 @@
+<template>
+
+  <a-select
+    v-if="async"
+    showSearch
+    labelInValue
+    :disabled="disabled"
+    :getPopupContainer="getParentContainer"
+    @search="loadData"
+    :placeholder="placeholder"
+    v-model="selectedAsyncValue"
+    style="width: 100%"
+    :filterOption="false"
+    @change="handleAsyncChange"
+    allowClear
+    :notFoundContent="loading ? undefined : null"
+  >
+    <a-spin v-if="loading" slot="notFoundContent" size="small"/>
+    <a-select-option v-for="d in options" :key="d.value" :value="d.value">{{ d.text }}</a-select-option>
+  </a-select>
+
+  <a-select
+    v-else
+    :getPopupContainer="getParentContainer"
+    showSearch
+    :disabled="disabled"
+    :placeholder="placeholder"
+    optionFilterProp="children"
+    style="width: 100%"
+    @change="handleChange"
+    :filterOption="filterOption"
+    v-model="selectedValue"
+    allowClear
+    :notFoundContent="loading ? undefined : null">
+    <a-spin v-if="loading" slot="notFoundContent" size="small"/>
+    <a-select-option v-for="d in options" :key="d.value" :value="d.value">{{ d.text }}</a-select-option>
+  </a-select>
+
+</template>
+
+<script>
+import { ajaxGetDictItems, getDictItemsFromCache } from '@/api/api'
+import debounce from 'lodash/debounce'
+import { getAction } from '@api/manage'
+
+export default {
+  name: 'JSearchSelectTag',
+  props: {
+    disabled: Boolean,
+    value: [String, Number],
+    dict: String,
+    dictOptions: Array,
+    async: Boolean,
+    placeholder: {
+      type: String,
+      default: '请选择',
+      required: false
+    },
+    popContainer: {
+      type: String,
+      default: '',
+      required: false
+    },
+    pageSize: {
+      type: Number,
+      default: 10,
+      required: false
+    },
+    getPopupContainer: {
+      type: Function,
+      default: null
+    }
+  },
+  data () {
+    this.loadData = debounce(this.loadData, 800)// 消抖
+    this.lastLoad = 0
+    return {
+      loading: false,
+      selectedValue: [],
+      selectedAsyncValue: [],
+      options: []
+    }
+  },
+  created () {
+    this.initDictData()
+  },
+  watch: {
+    value: {
+      immediate: true,
+      handler (val) {
+        if (!val) {
+          if (val === 0) {
+            this.initSelectValue()
+          } else {
+            this.selectedValue = []
+            this.selectedAsyncValue = []
+          }
+        } else {
+          this.initSelectValue()
+        }
+      }
+    },
+    dict: {
+      handler () {
+        this.initDictData()
+      }
+    },
+    dictOptions: {
+      deep: true,
+      handler (val) {
+        if (val && val.length > 0) {
+          this.options = [...val]
+        }
+      }
+    }
+  },
+  methods: {
+    initSelectValue () {
+      if (this.async) {
+        if (!this.selectedAsyncValue || !this.selectedAsyncValue.key || (this.selectedAsyncValue.key + '') !== (this.value + '')) {
+          console.log('这才请求后台')
+          getAction(`/sys/dict/loadDictItem/${this.dict}`, { key: this.value }).then(res => {
+            if (res.success) {
+              const obj = {
+                key: this.value,
+                label: res.result
+              }
+              this.selectedAsyncValue = { ...obj }
+            }
+          })
+        }
+      } else {
+        this.selectedValue = this.value.toString()
+      }
+    },
+    loadData (value) {
+      console.log('数据加载', value)
+      this.lastLoad += 1
+      const currentLoad = this.lastLoad
+      this.options = []
+      this.loading = true
+      // 字典code格式：table,text,code
+      getAction(`/sys/dict/loadDict/${this.dict}`, { keyword: value, pageSize: this.pageSize }).then(res => {
+        this.loading = false
+        if (res.success) {
+          if (currentLoad !== this.lastLoad) {
+            return
+          }
+          this.options = res.result
+          console.log('我是第一个', res)
+        } else {
+          this.$message.warning(res.message)
+        }
+      })
+    },
+    initDictData () {
+      if (!this.async) {
+        // 如果字典项集合有数据
+        if (this.dictOptions && this.dictOptions.length > 0) {
+          this.options = [...this.dictOptions]
+        } else {
+          // 根据字典Code, 初始化字典数组
+          let dictStr = ''
+          if (this.dict) {
+            const arr = this.dict.split(',')
+            if (arr[0].indexOf('where') > 0) {
+              const tbInfo = arr[0].split('where')
+              dictStr = tbInfo[0].trim() + ',' + arr[1] + ',' + arr[2] + ',' + encodeURIComponent(tbInfo[1])
+            } else {
+              dictStr = this.dict
+            }
+            if (this.dict.indexOf(',') === -1) {
+              // 优先从缓存中读取字典配置
+              if (getDictItemsFromCache(this.dictCode)) {
+                this.options = getDictItemsFromCache(this.dictCode)
+                return
+              }
+            }
+            ajaxGetDictItems(dictStr, null).then((res) => {
+              if (res.success) {
+                this.options = res.result
+              }
+            })
+          }
+        }
+      } else {
+        if (!this.dict) {
+          console.error('搜索组件未配置字典项')
+        } else {
+          // 异步一开始也加载一点数据
+          this.loading = true
+          getAction(`/sys/dict/loadDict/${this.dict}`, { pageSize: this.pageSize, keyword: '' }).then(res => {
+            this.loading = false
+            if (res.success) {
+              this.options = res.result
+            } else {
+              this.$message.warning(res.message)
+            }
+          })
+        }
+      }
+    },
+    filterOption (input, option) {
+      return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
+    },
+    handleChange (selectedValue) {
+      console.log('selectedValue', selectedValue)
+      this.selectedValue = selectedValue
+      this.callback()
+    },
+    handleAsyncChange (selectedObj) {
+      // update-begin-author:scott date:20201222 for:【搜索】搜索查询组件，删除条件，默认下拉还是上次的缓存数据，不好 JT-191
+      if (selectedObj) {
+        this.selectedAsyncValue = selectedObj
+        this.selectedValue = selectedObj.key
+      } else {
+        this.selectedAsyncValue = null
+        this.selectedValue = null
+        this.options = null
+        this.loadData('')
+      }
+      this.callback()
+      // update-end-author:scott date:20201222 for:【搜索】搜索查询组件，删除条件，默认下拉还是上次的缓存数据，不好 JT-191
+    },
+    callback () {
+      this.$emit('change', this.selectedValue)
+    },
+    setCurrentDictOptions (dictOptions) {
+      this.options = dictOptions
+    },
+    getCurrentDictOptions () {
+      return this.options
+    },
+    getParentContainer (node) {
+      if (typeof this.getPopupContainer === 'function') {
+        return this.getPopupContainer(node)
+      } else if (!this.popContainer) {
+        return node.parentNode
+      } else {
+        return document.querySelector(this.popContainer)
+      }
+    }
+
+  },
+  model: {
+    prop: 'value',
+    event: 'change'
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

src/components/dict/README.md

@@ -0,0 +1,181 @@
+# JDictSelectTag 组件用法
+----
+- 从字典表获取数据,dictCode格式说明: 字典code
+```html
+<j-dict-select-tag  v-model="queryParam.sex" placeholder="请输入用户性别"
+                  dictCode="sex"/>
+```
+
+v-decorator用法：
+```html
+<j-dict-select-tag  v-decorator="['sex', {}]" :triggerChange="true" placeholder="请输入用户性别"
+                  dictCode="sex"/>
+```
+
+- 从数据库表获取字典数据，dictCode格式说明: 表名,文本字段,取值字段
+```html
+<j-dict-select-tag v-model="queryParam.username" placeholder="请选择用户名称" 
+                   dictCode="sys_user,realname,id"/>
+```
+
+
+
+# JDictSelectUtil.js 列表字典函数用法
+----
+
+- 第一步: 引入依赖方法
+```html
+       import {initDictOptions, filterDictText} from '@/components/dict/JDictSelectUtil'
+```
+
+- 第二步: 在created()初始化方法执行字典配置方法
+```html
+      //初始化字典配置
+      this.initDictConfig();
+```
+      
+- 第三步: 实现initDictConfig方法，加载列表所需要的字典(列表上有多个字典项，就执行多次initDictOptions方法)
+      
+```html
+      initDictConfig() {
+        //初始化字典 - 性别
+        initDictOptions('sex').then((res) => {
+          if (res.success) {
+            this.sexDictOptions = res.result;
+          }
+        });
+      },
+```
+      
+- 第四步: 实现字段的customRender方法
+```html
+     customRender: (text, record, index) => {
+       //字典值替换通用方法
+       return filterDictText(this.sexDictOptions, text);
+     }
+```
+
+
+# JMultiSelectTag 多选组件
+下拉/checkbox
+
+## 参数配置
+| 参数           | 类型   | 必填 |说明|
+|--------------|---------|----|---------|
+| placeholder      |string   | | placeholder |
+| disabled      |Boolean   | | 是否禁用 |
+| type      |string   | | 多选类型 select/checkbox 默认是select |
+| dictCode      |string   | | 数据字典编码或者表名,显示字段名,存储字段名拼接而成的字符串,如果提供了options参数 则此参数可不填|
+| options      |Array   | | 多选项,如果dictCode参数未提供,可以设置此参数加载多选项 |
+
+使用示例
+----
+```vue
+<template>
+  <a-form>
+    <a-form-item label="下拉多选" style="width: 300px">
+      <j-multi-select-tag
+        v-model="selectValue"
+        :options="dictOptions"
+        placeholder="请做出你的选择">
+      </j-multi-select-tag>
+      {{ selectValue }}
+    </a-form-item>
+
+    <a-form-item label="checkbox">
+      <j-multi-select-tag
+        v-model="checkboxValue"
+        :options="dictOptions"
+        type="checkbox">
+      </j-multi-select-tag>
+      {{ checkboxValue }}
+    </a-form-item>
+  </a-form >
+</template>
+
+<script>
+  import JMultiSelectTag from '@/components/dict/JMultiSelectTag'
+  export default {
+    components: {JMultiSelectTag},
+    data() {
+      return {
+        selectValue:"",
+        checkboxValue:"",
+        dictOptions:[{
+          label:"选项一",
+          value:"1"
+        },{
+          label:"选项二",
+          value:"2"
+        },{
+          label:"选项三",
+          value:"3"
+        }]
+      }
+    }
+  }
+</script>
+```
+
+# JSearchSelectTag 字典表的搜索组件
+下拉搜索组件,支持异步加载,异步加载用于大数据量的字典表
+
+## 参数配置
+| 参数           | 类型   | 必填 |说明|
+|--------------|---------|----|---------|
+| placeholder      |string   | | placeholder |
+| disabled      |Boolean   | | 是否禁用 |
+| dict      |string   | | 表名,显示字段名,存储字段名拼接而成的字符串,如果提供了dictOptions参数 则此参数可不填|
+| dictOptions      |Array   | | 多选项,如果dict参数未提供,可以设置此参数加载多选项 |
+| async      |Boolean   | | 是否支持异步加载,设置成true,则通过输入的内容加载远程数据,否则在本地过滤数据,默认false|
+
+使用示例
+----
+```vue
+<template>
+  <a-form>
+    <a-form-item label="下拉搜索" style="width: 300px">
+      <j-search-select-tag
+        placeholder="请做出你的选择"
+        v-model="selectValue"
+        :dictOptions="dictOptions">
+      </j-search-select-tag>
+      {{ selectValue }}
+    </a-form-item>
+
+    <a-form-item label="异步加载" style="width: 300px">
+      <j-search-select-tag
+        placeholder="请做出你的选择"
+        v-model="asyncSelectValue"
+        dict="sys_depart,depart_name,id"
+        :async="true">
+      </j-search-select-tag>
+      {{ asyncSelectValue }}
+    </a-form-item>
+  </a-form >
+</template>
+
+<script>
+  import JSearchSelectTag from '@/components/dict/JSearchSelectTag'
+  export default {
+    components: {JSearchSelectTag},
+    data() {
+      return {
+        selectValue:"",
+        asyncSelectValue:"",
+        dictOptions:[{
+          text:"选项一",
+          value:"1"
+        },{
+          text:"选项二",
+          value:"2"
+        },{
+          text:"选项三",
+          value:"3"
+        }]
+      }
+    }
+  }
+</script>
+```
+

src/components/dict/index.js

@@ -0,0 +1,16 @@
+import JDictSelectTag from './JDictSelectTag.vue'
+import JMultiSelectTag from './JMultiSelectTag.vue'
+import JSearchSelectTag from './JSearchSelectTag.vue'
+import { filterMultiDictText, filterDictText, initDictOptions, filterDictTextByCache } from './JDictSelectUtil'
+
+export default {
+  install: function (Vue) {
+    Vue.component('JDictSelectTag', JDictSelectTag)
+    Vue.component('JMultiSelectTag', JMultiSelectTag)
+    Vue.component('JSearchSelectTag', JSearchSelectTag)
+    Vue.prototype.$initDictOptions = (dictCode) => initDictOptions(dictCode)
+    Vue.prototype.$filterMultiDictText = (dictOptions, text) => filterMultiDictText(dictOptions, text)
+    Vue.prototype.$filterDictText = (dictOptions, text) => filterDictText(dictOptions, text)
+    Vue.prototype.$filterDictTextByCache = (...param) => filterDictTextByCache(...param)
+  }
+}

src/components/index.less

@@ -0,0 +1,4 @@
+@import "~ant-design-vue/lib/style/index";
+
+// The prefix to use on all css classes from ant-pro.
+@ant-pro-prefix             : ant-pro;

src/components/jero/JAreaLinkage.vue

@@ -0,0 +1,164 @@
+<template>
+  <div class="j-area-linkage">
+    <div v-if="reloading">
+      <span> Reloading... </span>
+    </div>
+    <area-cascader
+      v-else-if="_type === enums.type[0]"
+      :value="innerValue"
+      :data="pcaa"
+      :level="1"
+      :style="{width}"
+      v-bind="$attrs"
+      v-on="_listeners"
+      @change="handleChange"
+    />
+    <area-select
+      v-else-if="_type === enums.type[1]"
+      :value="innerValue"
+      :data="pcaa"
+      :level="2"
+      v-bind="$attrs"
+      v-on="_listeners"
+      @change="handleChange"
+    />
+    <div v-else>
+      <span style="color:red;"> Bad type value: {{ _type }}</span>
+    </div>
+  </div>
+</template>
+
+<script>
+import Area from '@/components/_util/Area'
+
+export default {
+  name: 'JAreaLinkage',
+  props: {
+    value: {
+      type: String,
+      required: false
+    },
+    // 组件的类型，可选值：
+    // select 下拉样式
+    // cascader 级联样式（默认）
+    type: {
+      type: String,
+      default: 'cascader'
+    },
+    width: {
+      type: String,
+      default: '100%'
+    }
+  },
+  data () {
+    return {
+      pcaa: this.$Jpcaa,
+      innerValue: [],
+      usedListeners: ['change'],
+      enums: {
+        type: ['cascader', 'select']
+      },
+      reloading: false,
+      areaData: ''
+    }
+  },
+  computed: {
+    _listeners () {
+      const listeners = { ...this.$listeners }
+      // 去掉已使用的事件，防止冲突
+      this.usedListeners.forEach(key => {
+        delete listeners[key]
+      })
+      return listeners
+    },
+    _type () {
+      if (this.enums.type.includes(this.type)) {
+        return this.type
+      } else {
+        console.error(`JAreaLinkage的type属性只能接收指定的值（${this.enums.type.join('|')}）`)
+        return this.enums.type[0]
+      }
+    }
+  },
+  watch: {
+    value: {
+      immediate: true,
+      handler () {
+        this.loadDataByValue(this.value)
+      }
+    }
+  },
+  created () {
+    this.initAreaData()
+  },
+  methods: {
+
+    /** 重新加载组件 */
+    reload () {
+      this.reloading = true
+      this.$nextTick(() => {
+        this.reloading = false
+      })
+    },
+
+    /** 通过 value 反推 options */
+    loadDataByValue (value) {
+      if (!value || value.length === 0) {
+        this.innerValue = []
+      } else {
+        this.initAreaData()
+        this.innerValue = this.areaData.getRealCode(value)
+      }
+      this.reload()
+    },
+    /** 通过地区code获取子级 */
+    loadDataByCode (value) {
+      const options = []
+      const data = this.pcaa[value]
+      if (data) {
+        for (const key in data) {
+          if (Object.prototype.hasOwnProperty.call(data, key)) {
+            options.push({ value: key, label: data[key] })
+          }
+        }
+        return options
+      } else {
+        return []
+      }
+    },
+    /** 判断是否有子节点 */
+    hasChildren (options) {
+      options.forEach(option => {
+        const data = this.loadDataByCode(option.value)
+        option.isLeaf = data.length === 0
+      })
+    },
+    handleChange (values) {
+      const value = values[values.length - 1]
+      this.$emit('change', value)
+    },
+    initAreaData () {
+      if (!this.areaData) {
+        this.areaData = new Area(this.$Jpcaa)
+      }
+    }
+
+  },
+  model: { prop: 'value', event: 'change' }
+}
+</script>
+
+<style lang="less" scoped>
+.j-area-linkage {
+  height: 40px;
+
+  /deep/ .area-cascader-wrap .area-select {
+    width: 100%;
+  }
+
+  /deep/ .area-select .area-selected-trigger {
+    line-height: 1.15;
+  }
+}
+
+</style>

src/components/jero/JCategorySelect.vue

@@ -0,0 +1,266 @@
+<template>
+  <a-tree-select
+    allowClear
+    labelInValue
+    style="width: 100%"
+    :disabled="disabled"
+    :dropdownStyle="{ maxHeight: '400px', overflow: 'auto' }"
+    :placeholder="placeholder"
+    :loadData="asyncLoadTreeData"
+    :value="treeValue"
+    v-bind="_attrs"
+    v-on="childListeners"
+    :treeData="treeData"
+    :multiple="multiple"
+    @change="onChange">
+  </a-tree-select>
+</template>
+<script>
+
+import { getAction } from '@/api/manage'
+
+export default {
+  name: 'JCategorySelect',
+  props: {
+    value: {
+      // type: String,
+      required: false
+    },
+    placeholder: {
+      type: String,
+      default: '请选择',
+      required: false
+    },
+    disabled: {
+      type: Boolean,
+      default: false,
+      required: false
+    },
+    condition: {
+      type: String,
+      default: '',
+      required: false
+    },
+    // 是否支持多选
+    multiple: {
+      type: Boolean,
+      default: false
+    },
+    loadTriggleChange: {
+      type: Boolean,
+      default: false,
+      required: false
+    },
+    pid: {
+      type: String,
+      default: '',
+      required: false
+    },
+    pCode: {
+      type: String,
+      default: '',
+      required: false
+    },
+    back: {
+      type: String,
+      default: '',
+      required: false
+    }
+  },
+  data () {
+    return {
+      treeValue: '',
+      treeData: [],
+      url: '/sys/category/loadTreeData',
+      view: '/sys/category/loadDictItem/',
+      tableName: '',
+      text: '',
+      code: ''
+
+    }
+  },
+  computed: {
+    _attrs () {
+      return { ...this.$attrs }
+    },
+    // 透传给下级组件的事件，需要排除本组件使用的change事件
+    childListeners () {
+      const result = Object.assign({},
+        this.$listeners
+      )
+      delete result.change
+      return result
+    }
+  },
+  watch: {
+    value () {
+      this.loadItemByCode()
+    },
+    pCode () {
+      this.loadRoot()
+    }
+  },
+  created () {
+    this.validateProp().then(() => {
+      this.loadRoot()
+      this.loadItemByCode()
+    })
+  },
+  methods: {
+    /** 加载一级节点 */
+    loadRoot () {
+      const param = {
+        pid: this.pid,
+        pcode: !this.pCode ? '0' : this.pCode,
+        condition: this.condition
+      }
+      getAction(this.url, param).then(res => {
+        if (res.success && res.result) {
+          for (const i of res.result) {
+            i.value = i.key
+            if (i.leaf === false) {
+              i.isLeaf = false
+            } else if (i.leaf === true) {
+              i.isLeaf = true
+            }
+          }
+          this.treeData = [...res.result]
+        } else {
+          console.log('树一级节点查询结果-else', res)
+        }
+      })
+    },
+
+    /** 数据回显 */
+    loadItemByCode () {
+      if (!this.value || this.value === '0') {
+        this.treeValue = []
+      } else {
+        getAction(this.view, { ids: this.value }).then(res => {
+          if (res.success) {
+            if (res.result && res.result.length > 0) {
+              const values = this.value.split(',')
+              this.treeValue = res.result.map((item, index) => ({
+                key: values[index],
+                value: values[index],
+                label: item
+              }))
+              this.onLoadTriggleChange(res.result[0])
+            }
+          }
+        })
+      }
+    },
+    onLoadTriggleChange (text) {
+      // 只有单选才会触发
+      if (!this.multiple && this.loadTriggleChange) {
+        this.backValue(this.value, text)
+      }
+    },
+    backValue (value, label) {
+      const obj = {}
+      if (this.back) {
+        obj[this.back] = label
+      }
+      /*
+          * 使用$listeners向上暴露事件---和$emit一起使用出现的问题：change事件会执行两遍
+          * 解决办法：改变选中时提交的事件名 */
+      this.$emit('change', value, obj)
+    },
+    asyncLoadTreeData (treeNode) {
+      return new Promise((resolve) => {
+        if (treeNode.$vnode.children) {
+          resolve()
+          return
+        }
+        const pid = treeNode.$vnode.key
+        const param = {
+          pid: pid,
+          condition: this.condition
+        }
+        getAction(this.url, param).then(res => {
+          if (res.success) {
+            for (const i of res.result) {
+              i.value = i.key
+              if (i.leaf === false) {
+                i.isLeaf = false
+              } else if (i.leaf === true) {
+                i.isLeaf = true
+              }
+            }
+            this.addChildren(pid, res.result, this.treeData)
+            this.treeData = [...this.treeData]
+          }
+          resolve()
+        })
+      })
+    },
+    addChildren (pid, children, treeArray) {
+      if (treeArray && treeArray.length > 0) {
+        for (const item of treeArray) {
+          if (item.key + '' === pid + '') {
+            if (!children || children.length === 0) {
+              item.isLeaf = true
+            } else {
+              item.children = children
+            }
+            break
+          } else {
+            this.addChildren(pid, children, item.children)
+          }
+        }
+      }
+    },
+
+    onChange (value) {
+      if (!value) {
+        /*
+          * 使用$listeners向上暴露事件---和$emit一起使用出现的问题：change事件会执行两遍
+          * 解决办法：改变选中时提交的事件名 */
+        this.$emit('change', '')
+        this.treeValue = ''
+      } else if (Array.isArray(value)) {
+        const labels = []
+        const values = value.map(item => {
+          labels.push(item.label)
+          return item.value
+        })
+        this.backValue(values.join(','), labels.join(','))
+        this.treeValue = value
+      } else {
+        this.backValue(value.value, value.label)
+        this.treeValue = value
+      }
+    },
+    getCurrTreeData () {
+      return this.treeData
+    },
+    validateProp () {
+      const myCondition = this.condition
+      return new Promise((resolve, reject) => {
+        if (!myCondition) {
+          resolve()
+        } else {
+          try {
+            const test = JSON.parse(myCondition)
+            if (typeof test === 'object' && test) {
+              resolve()
+            } else {
+              this.$message.error('组件JTreeSelect-condition传值有误，需要一个json字符串!')
+              reject()
+            }
+          } catch (e) {
+            this.$message.error('组件JTreeSelect-condition传值有误，需要一个json字符串!')
+            reject()
+          }
+        }
+      })
+    }
+  },
+  // 2.2新增 在组件内定义 指定父组件调用时候的传值属性和事件类型 这个牛逼
+  model: {
+    prop: 'value',
+    event: 'change'
+  }
+}
+</script>

src/components/jero/JCheckbox.vue

@@ -0,0 +1,46 @@
+<template>
+  <a-checkbox-group :options="options"
+                    :value="checkboxArray"
+                    v-bind="$attrs"
+                    @change="onChange" />
+</template>
+
+<script>
+export default {
+  name: 'JCheckbox',
+  props: {
+    value: {
+      type: String,
+      required: false
+    },
+    /* label value */
+    options: {
+      type: Array,
+      required: true
+    }
+  },
+  data () {
+    return {
+      checkboxArray: !this.value ? [] : this.value.split(',')
+    }
+  },
+  watch: {
+    value (val) {
+      if (!val) {
+        this.checkboxArray = []
+      } else {
+        this.checkboxArray = this.value.split(',')
+      }
+    }
+  },
+  methods: {
+    onChange (checkedValues) {
+      this.$emit('change', checkedValues.join(','))
+    }
+  },
+  model: {
+    prop: 'value',
+    event: 'change'
+  }
+}
+</script>

src/components/jero/JCodeEditor.vue

@@ -0,0 +1,482 @@
+<template>
+  <div v-bind="fullScreenParentProps">
+    <a-icon v-if="fullScreen" class="full-screen-icon" :type="iconType" @click="()=>fullCoder=!fullCoder" />
+
+    <div class="code-editor-cust full-screen-child">
+      <textarea ref="textarea"></textarea>
+      <span @click="nullTipClick" class="null-tip" :class="{'null-tip-hidden':hasCode}" :style="nullTipStyle">{{ placeholderShow }}</span>
+      <template v-if="languageChange">
+        <a-select v-model="mode" size="small" class="code-mode-select" @change="changeMode" placeholder="请选择主题">
+          <a-select-option
+            v-for="mode in modes"
+            :key="mode.value"
+            :value="mode.value">
+            {{ mode.label }}
+          </a-select-option>
+        </a-select>
+      </template>
+
+    </div>
+  </div>
+</template>
+
+<script type="text/ecmascript-6">
+// 引入全局实例
+import _CodeMirror from 'codemirror'
+
+// 核心样式
+import 'codemirror/lib/codemirror.css'
+// 引入主题后还需要在 options 中指定主题才会生效 darcula  gruvbox-dark hopscotch  monokai
+import 'codemirror/theme/panda-syntax.css'
+// 提示css
+import 'codemirror/addon/hint/show-hint.css'
+
+// 需要引入具体的语法高亮库才会有对应的语法高亮效果
+// codemirror 官方其实支持通过 /addon/mode/loadmode.js 和 /mode/meta.js 来实现动态加载对应语法高亮库
+// 但 vue 貌似没有无法在实例初始化后再动态加载对应 JS ，所以此处才把对应的 JS 提前引入
+import 'codemirror/mode/javascript/javascript.js'
+import 'codemirror/mode/css/css.js'
+import 'codemirror/mode/xml/xml.js'
+import 'codemirror/mode/clike/clike.js'
+import 'codemirror/mode/markdown/markdown.js'
+import 'codemirror/mode/python/python.js'
+import 'codemirror/mode/r/r.js'
+import 'codemirror/mode/shell/shell.js'
+import 'codemirror/mode/sql/sql.js'
+import 'codemirror/mode/swift/swift.js'
+import 'codemirror/mode/vue/vue.js'
+
+import { isIE11, isIE } from '@/utils/browser'
+
+// 尝试获取全局实例
+const CodeMirror = window.CodeMirror || _CodeMirror
+
+export default {
+  name: 'JCodeEditor',
+  props: {
+    // 外部传入的内容，用于实现双向绑定
+    value: {
+      type: String,
+      default: ''
+    },
+    // 外部传入的语法类型
+    language: {
+      type: String,
+      default: null
+    },
+    languageChange: {
+      type: Boolean,
+      default: false,
+      required: false
+    },
+    placeholder: {
+      type: String,
+      default: null
+    },
+    // 显示行号
+    lineNumbers: {
+      type: Boolean,
+      default: true
+    },
+    // 是否显示全屏按钮
+    fullScreen: {
+      type: Boolean,
+      default: false
+    },
+    // 全屏以后的z-index
+    zIndex: {
+      type: [Number, String],
+      default: 999
+    },
+    // 是否自适应高度，可以传String或Boolean
+    // 传 String 类型只能写"!ie" ，
+    // 填写这个字符串，代表其他浏览器自适应高度
+    // 唯独IE下不自适应高度，因为IE下不支持min、max-height样式
+    // 如果填写的不是"!ie"就视为true
+    autoHeight: {
+      type: [String, Boolean],
+      default: true
+    },
+    // 不自适应高度的情况下生效的固定高度
+    height: {
+      type: [String, Number],
+      default: '240px'
+    }
+  },
+  data () {
+    return {
+      // 内部真实的内容
+      code: '',
+      iconType: 'fullscreen',
+      hasCode: false,
+      // 默认的语法类型
+      mode: 'javascript',
+      // 编辑器实例
+      coder: null,
+      // 默认配置
+      options: {
+        // 缩进格式
+        tabSize: 2,
+        // 主题，对应主题库 JS 需要提前引入
+        theme: 'panda-syntax',
+        line: true,
+        // extraKeys: {'Ctrl': 'autocomplete'},//自定义快捷键
+        hintOptions: {
+          tables: {
+            users: ['name', 'score', 'birthDate'],
+            countries: ['name', 'population', 'size']
+          }
+        }
+      },
+      // 支持切换的语法高亮类型，对应 JS 已经提前引入
+      // 使用的是 MIME-TYPE ，不过作为前缀的 text/ 在后面指定时写死了
+      modes: [{
+        value: 'css',
+        label: 'CSS'
+      }, {
+        value: 'javascript',
+        label: 'Javascript'
+      }, {
+        value: 'html',
+        label: 'XML/HTML'
+      }, {
+        value: 'x-java',
+        label: 'Java'
+      }, {
+        value: 'x-objectivec',
+        label: 'Objective-C'
+      }, {
+        value: 'x-python',
+        label: 'Python'
+      }, {
+        value: 'x-rsrc',
+        label: 'R'
+      }, {
+        value: 'x-sh',
+        label: 'Shell'
+      }, {
+        value: 'x-sql',
+        label: 'SQL'
+      }, {
+        value: 'x-swift',
+        label: 'Swift'
+      }, {
+        value: 'x-vue',
+        label: 'Vue'
+      }, {
+        value: 'markdown',
+        label: 'Markdown'
+      }],
+      // code 编辑器 是否全屏
+      fullCoder: false
+    }
+  },
+  watch: {
+    fullCoder: {
+      handler (value) {
+        if (value) {
+          this.iconType = 'fullscreen-exit'
+        } else {
+          this.iconType = 'fullscreen'
+        }
+      }
+    },
+    // value: {
+    //   immediate: false,
+    //   handler(value) {
+    //     this._getCoder().then(() => {
+    //       this.coder.setValue(value)
+    //     })
+    //   }
+    // },
+    language: {
+      immediate: true,
+      handler (language) {
+        this._getCoder().then(() => {
+          // 尝试从父容器获取语法类型
+          if (language) {
+            // 获取具体的语法类型对象
+            const modeObj = this._getLanguage(language)
+
+            // 判断父容器传入的语法是否被支持
+            if (modeObj) {
+              this.mode = modeObj.label
+              this.coder.setOption('mode', `text/${modeObj.value}`)
+            }
+          }
+        })
+      }
+    }
+  },
+  computed: {
+    placeholderShow () {
+      if (this.placeholder == null) {
+        return `请在此输入${this.language}代码`
+      } else {
+        return this.placeholder
+      }
+    },
+    nullTipStyle () {
+      if (this.lineNumbers) {
+        return { left: '36px' }
+      } else {
+        return { left: '12px' }
+      }
+    },
+    // coder 配置
+    coderOptions () {
+      return {
+        tabSize: this.options.tabSize,
+        theme: this.options.theme,
+        lineNumbers: this.lineNumbers,
+        line: true,
+        hintOptions: this.options.hintOptions
+      }
+    },
+    isAutoHeight () {
+      let { autoHeight } = this
+      if (typeof autoHeight === 'string' && autoHeight.toLowerCase().trim() === '!ie') {
+        autoHeight = !(isIE() || isIE11())
+      } else {
+        autoHeight = true
+      }
+      return autoHeight
+    },
+    fullScreenParentProps () {
+      const props = {
+        class: {
+          'full-screen-parent': true,
+          'full-screen': this.fullCoder,
+          'auto-height': this.isAutoHeight
+        },
+        style: {}
+      }
+      if (isIE() || isIE11()) {
+        props.style.height = '240px'
+      }
+      if (this.fullCoder) {
+        props.style['z-index'] = this.zIndex
+      }
+      if (!this.isAutoHeight) {
+        props.style.height = (typeof this.height === 'number' ? this.height + 'px' : this.height)
+      }
+      return props
+    }
+  },
+  mounted () {
+    // 初始化
+    this._initialize()
+  },
+  methods: {
+    // 初始化
+    _initialize () {
+      // 初始化编辑器实例，传入需要被实例化的文本域对象和默认配置
+      this.coder = CodeMirror.fromTextArea(this.$refs.textarea, this.coderOptions)
+      // 编辑器赋值
+      if (this.value || this.code) {
+        this.hasCode = true
+        // this.coder.setValue(this.value || this.code)
+        this.setCodeContent(this.value || this.code)
+      } else {
+        this.coder.setValue('')
+        this.hasCode = false
+      }
+      // 支持双向绑定
+      this.coder.on('change', (coder) => {
+        this.code = coder.getValue()
+        this.hasCode = !!this.code
+        if (this.$emit) {
+          this.$emit('input', this.code)
+        }
+      })
+      this.coder.on('focus', () => {
+        this.hasCode = true
+      })
+      this.coder.on('blur', () => {
+        this.hasCode = !!this.code
+      })
+
+      /* this.coder.on('cursorActivity',()=>{
+          this.coder.showHint()
+        }) */
+    },
+    getCodeContent () {
+      return this.code
+    },
+    setCodeContent (val) {
+      setTimeout(() => {
+        if (!val) {
+          this.coder.setValue('')
+        } else {
+          this.coder.setValue(val)
+        }
+      }, 300)
+    },
+    // 获取当前语法类型
+    _getLanguage (language) {
+      // 在支持的语法类型列表中寻找传入的语法类型
+      return this.modes.find((mode) => {
+        // 所有的值都忽略大小写，方便比较
+        const currentLanguage = language.toLowerCase()
+        const currentLabel = mode.label.toLowerCase()
+        const currentValue = mode.value.toLowerCase()
+
+        // 由于真实值可能不规范，例如 java 的真实值是 x-java ，所以讲 value 和 label 同时和传入语法进行比较
+        return currentLabel === currentLanguage || currentValue === currentLanguage
+      })
+    },
+    _getCoder () {
+      const _this = this
+      return new Promise((resolve) => {
+        (function get () {
+          if (_this.coder) {
+            resolve(_this.coder)
+          } else {
+            setTimeout(get, 10)
+          }
+        })()
+      })
+    },
+    // 更改模式
+    changeMode (val) {
+      // 修改编辑器的语法配置
+      this.coder.setOption('mode', `text/${val}`)
+
+      // 获取修改后的语法
+      const label = this._getLanguage(val).label.toLowerCase()
+
+      // 允许父容器通过以下函数监听当前的语法值
+      this.$emit('language-change', label)
+    },
+    nullTipClick () {
+      this.coder.focus()
+    }
+  }
+}
+</script>
+
+<style lang="less">
+.code-editor-cust {
+  flex-grow: 1;
+  display: flex;
+  position: relative;
+  height: 100%;
+
+  .CodeMirror {
+    flex-grow: 1;
+    z-index: 1;
+
+    .CodeMirror-code {
+      line-height: 19px;
+    }
+
+  }
+
+  .code-mode-select {
+    position: absolute;
+    z-index: 2;
+    right: 10px;
+    top: 10px;
+    max-width: 130px;
+  }
+
+  .CodeMirror {
+    height: auto;
+    min-height: 100%;
+  }
+
+  .null-tip {
+    position: absolute;
+    top: 4px;
+    left: 36px;
+    z-index: 10;
+    color: #ffffffc9;
+    line-height: initial;
+  }
+
+  .null-tip-hidden {
+    display: none;
+  }
+
+  /**选中样式偶然出现高度不够的情况*/
+
+  .CodeMirror-selected {
+    min-height: 19px !important;
+  }
+}
+
+/* 全屏样式 */
+.full-screen-parent {
+  position: relative;
+
+  .full-screen-icon {
+    opacity: 0;
+    color: black;
+    width: 20px;
+    height: 20px;
+    line-height: 24px;
+    background-color: white;
+    position: absolute;
+    top: 2px;
+    right: 2px;
+    z-index: 9;
+    cursor: pointer;
+    transition: opacity 0.3s;
+  }
+
+  &:hover {
+    .full-screen-icon {
+      opacity: 1;
+
+      &:hover {
+        background-color: rgba(255, 255, 255, 0.88);
+      }
+    }
+  }
+
+  &.full-screen {
+    position: fixed;
+    top: 10px;
+    left: 10px;
+    width: calc(100% - 20px);
+    height: calc(100% - 20px);
+    padding: 10px;
+    background-color: #f5f5f5;
+
+    .full-screen-icon {
+      top: 12px;
+      right: 12px;
+    }
+
+    .full-screen-child {
+      height: 100%;
+      max-height: 100%;
+      min-height: 100%;
+    }
+  }
+
+  .full-screen-child {
+    height: 100%;
+  }
+
+  &.auto-height {
+    .full-screen-child {
+      min-height: 120px;
+      max-height: 320px;
+      height: unset;
+      overflow: hidden;
+    }
+
+    &.full-screen .full-screen-child {
+      height: 100%;
+      max-height: 100%;
+      min-height: 100%;
+    }
+  }
+
+}
+
+.CodeMirror-cursor {
+  height: 18.4px !important;
+}
+</style>

src/components/jero/JCron.vue

@@ -0,0 +1,65 @@
+<template>
+  <div class="components-input-demo-presuffix">
+    <a-input @click="openModal" placeholder="cron表达式" v-model="cron" @change="(e)=>handleOK(e.target.value)">
+      <a-icon slot="prefix" type="schedule" title="cron控件"/>
+      <a-icon v-if="cron" slot="suffix" type="close-circle" @click="handleEmpty" title="清空"/>
+    </a-input>
+    <JCronModal ref="innerVueCron" :data="cron" @ok="handleOK"></JCronModal>
+  </div>
+</template>
+<script>
+import JCronModal from './modal/JCronModal'
+export default {
+  name: 'JCron',
+  components: {
+    JCronModal
+  },
+  props: {
+    value: {
+      required: false,
+      type: String
+    }
+  },
+  data () {
+    return {
+      cron: this.value
+    }
+  },
+  watch: {
+    value (val) {
+      this.cron = val
+    }
+  },
+  methods: {
+    openModal () {
+      this.$refs.innerVueCron.show()
+    },
+    handleOK (val) {
+      this.cron = val
+      this.$emit('change', this.cron)
+      // this.$emit("change", Object.assign({},  this.cron));
+    },
+    handleEmpty () {
+      this.handleOK('')
+    }
+  },
+  model: {
+    prop: 'value',
+    event: 'change'
+  }
+}
+</script>
+<style scoped>
+  .components-input-demo-presuffix .anticon-close-circle {
+    cursor: pointer;
+    color: #ccc;
+    transition: color 0.3s;
+    font-size: 12px;
+  }
+  .components-input-demo-presuffix .anticon-close-circle:hover {
+    color: #f5222d;
+  }
+  .components-input-demo-presuffix .anticon-close-circle:active {
+    color: #666;
+  }
+</style>

src/components/jero/JDate.vue

@@ -0,0 +1,165 @@
+<template>
+  <span>
+    <!--YYYY-MM-DD HH:mm:ss-->
+    <a-date-picker
+      v-if="showType === 'time'"
+      dropdownClassName="j-date-picker"
+      :disabled="disabled || readOnly"
+      :placeholder="placeholder"
+      @change="handleDateChange"
+      :value="momVal"
+      :showTime="true"
+      :format="dateFormat"
+      v-bind="$attrs"
+      v-on="childListeners"
+      :getCalendarContainer="getCalendarContainer">
+    </a-date-picker>
+    <!--YYYY-MM-DD-->
+    <a-date-picker
+      v-if="showType === 'day'"
+      dropdownClassName="j-date-picker"
+      :disabled="disabled || readOnly"
+      :placeholder="placeholder"
+      @change="handleDateChange"
+      :value="momVal"
+      :showTime="false"
+      :format="dateFormat"
+      v-bind="$attrs"
+      v-on="childListeners"
+      :getCalendarContainer="getCalendarContainer">
+    </a-date-picker>
+    <!--YYYY-MM-->
+    <a-month-picker
+      v-if="showType === 'month'"
+      :placeholder="placeholder"
+      :value="momVal"
+      :disabled="disabled || readOnly"
+      :format="dateFormat"
+      v-bind="$attrs"
+      v-on="childListeners"
+      @change="handleMonthChange">
+    </a-month-picker>
+    <!--YYYY-->
+    <a-date-picker
+      v-if="showType === 'year'"
+      :placeholder="placeholder"
+      mode="year"
+      :format="dateFormat"
+      :value="year"
+      :disabled="disabled || readOnly"
+      :open="yearShowOne"
+      v-bind="$attrs"
+      v-on="childListeners"
+      :getCalendarContainer="getCalendarContainer"
+      @openChange="openChangeOne"
+      @panelChange="panelChangeOne">
+    </a-date-picker>
+  </span>
+</template>
+<script>
+import moment from 'moment'
+export default {
+  name: 'JDate',
+  props: {
+    placeholder: {
+      type: String,
+      default: '请选择',
+      required: false
+    },
+    value: {
+      type: String,
+      required: false
+    },
+    dateFormat: {
+      type: String,
+      default: 'YYYY-MM-DD',
+      required: false
+    },
+    readOnly: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    disabled: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    // 控制选择时分秒
+    showType: {
+      type: String,
+      required: false,
+      default: 'time'
+    },
+    getCalendarContainer: {
+      type: Function,
+      default: (node) => node.parentNode
+    }
+  },
+  data () {
+    const dateStr = this.value
+    return {
+      yearShowOne: false, // 控制年份模态框的显示与否
+      year: '', // mode==“year” 专用
+      momVal: !dateStr ? null : moment(dateStr, this.dateFormat)
+    }
+  },
+  computed: {
+    // 透传给下级组件的事件，需要排除本组件使用的change事件
+    childListeners () {
+      const result = Object.assign({},
+        this.$listeners
+      )
+      delete result.change
+      return result
+    }
+  },
+  watch: {
+    value (val) {
+      const fm = this.dateFormat
+      moment.prototype.toJSON = function () {
+        return moment(this).format(fm)
+      }
+      if (!val) {
+        this.momVal = null
+      } else {
+        this.momVal = moment(val, this.dateFormat)
+      }
+    }
+  },
+  methods: {
+    moment,
+    handleDateChange (mom, dateStr) {
+      this.$emit('change', dateStr)
+    },
+    handleMonthChange (mom, dateStr) {
+      this.$emit('change', dateStr)
+    },
+    /**
+       * 弹出日历和关闭日历的回调
+       * status：打开或关闭的状态
+       * */
+    openChangeOne (status) {
+      this.yearShowOne = status
+    },
+    // 得到年份选择器的值
+    panelChangeOne (value) {
+      this.yearShowOne = false
+      const year = moment(value, this.dateFormat).year().toString() // 处理成字符串
+      this.year = value // 组件显示的
+      this.$emit('change', year)
+    }
+  },
+  // 2.2新增 在组件内定义 指定父组件调用时候的传值属性和事件类型
+  model: {
+    prop: 'value',
+    event: 'change'
+  }
+}
+</script>
+
+<style scoped>
+.ant-calendar-picker {
+  min-width: 195px;
+}
+</style>

src/components/jero/JEasyCron/EasyCron.vue

@@ -0,0 +1,317 @@
+<template>
+  <div class="j-easy-cron">
+    <div class="content">
+      <div>
+        <a-tabs size="small" v-model="curtab">
+          <a-tab-pane tab="秒" key="second" v-if="!hideSecond">
+            <second-ui v-model="second" :disabled="disabled"></second-ui>
+          </a-tab-pane>
+          <a-tab-pane tab="分" key="minute">
+            <minute-ui v-model="minute" :disabled="disabled"></minute-ui>
+          </a-tab-pane>
+          <a-tab-pane tab="时" key="hour">
+            <hour-ui v-model="hour" :disabled="disabled"></hour-ui>
+          </a-tab-pane>
+          <a-tab-pane tab="日" key="day">
+            <day-ui v-model="day" :week="week" :disabled="disabled"></day-ui>
+          </a-tab-pane>
+          <a-tab-pane tab="月" key="month">
+            <month-ui v-model="month" :disabled="disabled"></month-ui>
+          </a-tab-pane>
+          <a-tab-pane tab="周" key="week">
+            <week-ui v-model="week" :day="day" :disabled="disabled"></week-ui>
+          </a-tab-pane>
+          <a-tab-pane tab="年" key="year" v-if="!hideYear && !hideSecond">
+            <year-ui v-model="year" :disabled="disabled"></year-ui>
+          </a-tab-pane>
+        </a-tabs>
+      </div>
+      <a-divider />
+      <!-- 执行时间预览 -->
+      <a-row :gutter="8">
+        <a-col :span="18" style="margin-top: 22px;">
+          <a-row :gutter="8">
+            <a-col :span="8" style="margin-bottom: 8px;">
+              <a-input addon-before="秒" v-model="inputValues.second" @blur="onInputBlur" />
+            </a-col>
+            <a-col :span="8" style="margin-bottom: 8px;">
+              <a-input addon-before="分" v-model="inputValues.minute" @blur="onInputBlur" />
+            </a-col>
+            <a-col :span="8" style="margin-bottom: 8px;">
+              <a-input addon-before="时" v-model="inputValues.hour" @blur="onInputBlur" />
+            </a-col>
+            <a-col :span="8" style="margin-bottom: 8px;">
+              <a-input addon-before="日" v-model="inputValues.day" @blur="onInputBlur" />
+            </a-col>
+            <a-col :span="8" style="margin-bottom: 8px;">
+              <a-input addon-before="月" v-model="inputValues.month" @blur="onInputBlur" />
+            </a-col>
+            <a-col :span="8" style="margin-bottom: 8px;">
+              <a-input addon-before="周" v-model="inputValues.week" @blur="onInputBlur" />
+            </a-col>
+            <a-col :span="8" style="margin-bottom: 8px;">
+              <a-input addon-before="年" v-model="inputValues.year" @blur="onInputBlur" />
+            </a-col>
+            <a-col :span="16" style="margin-bottom: 8px;">
+              <a-input addon-before="Cron" v-model="inputValues.cron" @blur="onInputCronBlur" />
+            </a-col>
+          </a-row>
+        </a-col>
+        <a-col :span="6">
+
+          <div>近十次执行时间（不含年）</div>
+          <a-textarea type="textarea" :value="preTimeList" :rows="5" />
+        </a-col>
+      </a-row>
+    </div>
+  </div>
+</template>
+
+<script>
+import SecondUi from './tabs/second'
+import MinuteUi from './tabs/minute'
+import HourUi from './tabs/hour'
+import DayUi from './tabs/day'
+import WeekUi from './tabs/week'
+import MonthUi from './tabs/month'
+import YearUi from './tabs/year'
+import CronParser from 'cron-parser'
+import dateFormat from './format-date'
+import { simpleDebounce } from '@/utils/util'
+import ACol from 'ant-design-vue/es/grid/Col'
+
+export default {
+  name: 'easy-cron',
+  components: {
+    ACol,
+    SecondUi,
+    MinuteUi,
+    HourUi,
+    DayUi,
+    WeekUi,
+    MonthUi,
+    YearUi
+  },
+  props: {
+    cronValue: {
+      type: String,
+      default: ''
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    hideSecond: {
+      type: Boolean,
+      default: false
+    },
+    hideYear: {
+      type: Boolean,
+      default: false
+    },
+    remote: {
+      type: Function,
+      default: null
+    }
+  },
+  data () {
+    return {
+      curtab: this.hideSecond ? 'minute' : 'second',
+      second: '*',
+      minute: '*',
+      hour: '*',
+      day: '*',
+      month: '*',
+      week: '?',
+      year: '*',
+      inputValues: { second: '', minute: '', hour: '', day: '', month: '', week: '', year: '', cron: '' },
+      preTimeList: '执行预览，会忽略年份参数'
+    }
+  },
+  computed: {
+    cronValue_c () {
+      const result = []
+      if (!this.hideSecond) result.push(this.second ? this.second : '*')
+      result.push(this.minute ? this.minute : '*')
+      result.push(this.hour ? this.hour : '*')
+      result.push(this.day ? this.day : '*')
+      result.push(this.month ? this.month : '*')
+      result.push(this.week ? this.week : '?')
+      if (!this.hideYear && !this.hideSecond) result.push(this.year ? this.year : '*')
+      return result.join(' ')
+    },
+    cronValue_c2 () {
+      const v = this.cronValue_c
+      if (this.hideYear || this.hideSecond) return v
+      const vs = v.split(' ')
+      if (vs.length >= 6) {
+        // 将 Quartz 星期 的规则转换为 CronParser 的规则
+        vs[5] = this.convertQuartzWeekToCParser(vs[5])
+      }
+      return vs.slice(0, vs.length - 1).join(' ')
+    }
+  },
+  watch: {
+    cronValue (newVal) {
+      if (newVal === this.cronValue_c) {
+        // console.info('same cron value: ' + newVal)
+        return
+      }
+      this.formatValue()
+    },
+    cronValue_c (newVal) {
+      this.calTriggerList()
+      this.$emit('change', newVal)
+      this.assignInput()
+    },
+    minute () {
+      if (this.second === '*') {
+        this.second = '0'
+      }
+    },
+    hour () {
+      if (this.minute === '*') {
+        this.minute = '0'
+      }
+    },
+    day (day) {
+      if (day !== '?' && this.hour === '*') {
+        this.hour = '0'
+      }
+    },
+    week (week) {
+      if (week !== '?' && this.hour === '*') {
+        this.hour = '0'
+      }
+    },
+    month () {
+      if (this.day === '?' && this.week === '*') {
+        this.week = '1'
+      } else if (this.week === '?' && this.day === '*') {
+        this.day = '1'
+      }
+    },
+    year () {
+      if (this.month === '*') {
+        this.month = '1'
+      }
+    }
+  },
+  created () {
+    this.formatValue()
+    this.$nextTick(() => {
+      this.calTriggerListInner()
+    })
+  },
+  methods: {
+    assignInput () {
+      Object.assign(this.inputValues, {
+        second: this.second,
+        minute: this.minute,
+        hour: this.hour,
+        day: this.day,
+        month: this.month,
+        week: this.week,
+        year: this.year,
+        cron: this.cronValue_c
+      })
+    },
+    formatValue () {
+      if (!this.cronValue) return
+      const values = this.cronValue.split(' ').filter(item => !!item)
+      if (!values || values.length <= 0) return
+      let i = 0
+      if (!this.hideSecond) this.second = values[i++]
+      if (values.length > i) this.minute = values[i++]
+      if (values.length > i) this.hour = values[i++]
+      if (values.length > i) this.day = values[i++]
+      if (values.length > i) this.month = values[i++]
+      if (values.length > i) this.week = values[i++]
+      if (values.length > i) this.year = values[i]
+      this.assignInput()
+    },
+    // 将 Quartz 星期 的规则转换为 CronParser 的规则：
+    // Quartz 的规则：1 = 周日，2 = 周一，3 = 周二，4 = 周三，5 = 周四，6 = 周五，7 = 周六
+    // CronParser 的规则： 0 = 周日，1 = 周一，2 = 周二，3 = 周三，4 = 周四，5 = 周五，6 = 周六，7 = 周日
+    convertQuartzWeekToCParser (week) {
+      const convert = (v) => {
+        if (v === '0') {
+          return '1'
+        }
+        if (v === '1') {
+          return '0'
+        }
+        return (Number.parseInt(v) - 1).toString()
+      }
+      // 匹配示例 1-7 or 1/7
+      const patten1 = /^([0-7])([-/])([0-7])$/
+      // 匹配示例 1,4,7
+      const patten2 = /^([0-7])(,[0-7])+$/
+      if (/^[0-7]$/.test(week)) {
+        return convert(week)
+      } else if (patten1.test(week)) {
+        return week.replace(patten1, ($0, before, separator, after) => {
+          if (separator === '/') {
+            return convert(before) + separator + after
+          } else {
+            return convert(before) + separator + convert(after)
+          }
+        })
+      } else if (patten2.test(week)) {
+        return week.split(',').map(v => convert(v)).join(',')
+      }
+      return week
+    },
+    calTriggerList: simpleDebounce(function () {
+      this.calTriggerListInner()
+    }, 500),
+    calTriggerListInner () {
+      // 设置了回调函数
+      if (this.remote) {
+        this.remote(this.cronValue_c, +new Date(), v => {
+          this.preTimeList = v
+        })
+        return
+      }
+      const format = 'yyyy-MM-dd hh:mm:ss'
+      const options = {
+        currentDate: dateFormat(new Date(), format)
+      }
+      const iter = CronParser.parseExpression(this.cronValue_c2, options)
+      const result = []
+      for (let i = 1; i <= 10; i++) {
+        result.push(dateFormat(new Date(iter.next()), format))
+      }
+      this.preTimeList = result.length > 0 ? result.join('\n') : '无执行时间'
+    },
+    onInputBlur () {
+      this.second = this.inputValues.second
+      this.minute = this.inputValues.minute
+      this.hour = this.inputValues.hour
+      this.day = this.inputValues.day
+      this.month = this.inputValues.month
+      this.week = this.inputValues.week
+      this.year = this.inputValues.year
+    },
+    onInputCronBlur (event) {
+      this.$emit('change', event.target.value)
+    }
+  },
+  model: {
+    prop: 'cronValue',
+    event: 'change'
+  }
+}
+</script>
+
+<style scoped lang="less">
+.j-easy-cron {
+
+  /deep/ .content {
+    .ant-checkbox-wrapper + .ant-checkbox-wrapper {
+      margin-left: 0;
+    }
+  }
+
+}
+</style>

src/components/jero/JEasyCron/InputCron.vue

@@ -0,0 +1,99 @@
+<template>
+  <div class="input-cron">
+    <a-input :placeholder="placeholder" v-model="editCronValue" :disabled="disabled">
+      <a slot="addonAfter" @click="showConfigDlg" class="config-btn" :disabled="disabled">
+        <a-icon type="setting"></a-icon>
+        选择
+      </a>
+    </a-input>
+    <j-modal :visible.sync="show" title="Cron表达式" width="800px">
+      <easy-cron
+        v-model="editCronValue"
+        :exeStartTime="exeStartTime"
+        :hideYear="hideYear"
+        :remote="remote"
+        :hideSecond="hideSecond"
+        style="width: 100%"
+      ></easy-cron>
+    </j-modal>
+  </div>
+</template>
+
+<script>
+import EasyCron from './EasyCron.vue'
+
+export default {
+  name: 'input-cron',
+  components: { EasyCron },
+  model: {
+    prop: 'cronValue',
+    event: 'change'
+  },
+  props: {
+    cronValue: {
+      type: String,
+      default: ''
+    },
+    width: {
+      type: String,
+      default: '800px'
+    },
+    placeholder: {
+      type: String,
+      default: '请输入cron表达式'
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    exeStartTime: {
+      type: [Number, String, Object],
+      default: 0
+    },
+    hideSecond: {
+      type: Boolean,
+      default: false
+    },
+    hideYear: {
+      type: Boolean,
+      default: false
+    },
+    remote: {
+      type: Function,
+      default: null
+    }
+  },
+  data () {
+    return {
+      editCronValue: this.cronValue,
+      show: false
+    }
+  },
+  watch: {
+    cronValue (newVal) {
+      if (newVal === this.editCronValue) {
+        return
+      }
+      this.editCronValue = newVal
+    },
+    editCronValue (newVal) {
+      this.$emit('change', newVal)
+    }
+  },
+  methods: {
+    showConfigDlg () {
+      if (!this.disabled) {
+        this.show = true
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+  .config-btn {
+    cursor: pointer;
+  }
+
+</style>

src/components/jero/JEasyCron/format-date.js

@@ -0,0 +1,37 @@
+const dateFormat = (date, block) => {
+  if (!date) {
+    return ''
+  }
+
+  let format = block || 'yyyy-MM-dd'
+
+  date = new Date(date)
+
+  const map = {
+    M: date.getMonth() + 1, // 月份
+    d: date.getDate(), // 日
+    h: date.getHours(), // 小时
+    m: date.getMinutes(), // 分
+    s: date.getSeconds(), // 秒
+    q: Math.floor((date.getMonth() + 3) / 3), // 季度
+    S: date.getMilliseconds() // 毫秒
+  }
+
+  format = format.replace(/([yMdhmsqS])+/g, (all, t) => {
+    let v = map[t]
+    if (v !== undefined) {
+      if (all.length > 1) {
+        v = `0${v}`
+        v = v.substr(v.length - 2)
+      }
+      return v
+    } else if (t === 'y') {
+      return (date.getFullYear().toString()).substr(4 - all.length)
+    }
+    return all
+  })
+
+  return format
+}
+
+export default dateFormat

src/components/jero/JEasyCron/index.js

@@ -0,0 +1,6 @@
+// 原开源项目地址：https://gitee.com/toktok/easy-cron
+
+import InputCron from './InputCron.vue'
+
+InputCron.name = 'JEasyCron'
+export default InputCron

src/components/jero/JEasyCron/tabs/const.js

@@ -0,0 +1,21 @@
+export const WEEK_MAP_EN = {
+  SUN: '1',
+  MON: '2',
+  TUE: '3',
+  WED: '4',
+  THU: '5',
+  FRI: '6',
+  SAT: '7'
+}
+
+export const replaceWeekName = (c) => {
+  // console.info('after: ' + c)
+  if (c) {
+    Object.keys(WEEK_MAP_EN).forEach(k => {
+      c = c.replace(new RegExp(k, 'g'), WEEK_MAP_EN[k])
+    })
+    // c = c.replace(new RegExp('7', 'g'), '0')
+  }
+  // console.info('after: ' + c)
+  return c
+}

src/components/jero/JEasyCron/tabs/day.vue

@@ -0,0 +1,106 @@
+<template>
+  <div class="config-list">
+    <a-radio-group v-model="type">
+      <div class="item">
+        <a-radio value="TYPE_NOT_SET" class="choice" :disabled="disableChoice">不设置</a-radio>
+        <span class="tip-info">日和周只能设置其中之一</span>
+      </div>
+      <div class="item">
+        <a-radio value="TYPE_EVERY" class="choice" :disabled="disableChoice">每日</a-radio>
+      </div>
+      <div class="item">
+        <a-radio value="TYPE_RANGE" class="choice" :disabled="disableChoice">区间</a-radio>
+        从
+        <a-input-number :disabled="type!==TYPE_RANGE || disableChoice" :max="maxValue" :min="minValue" :precision="0" class="w60"
+                        v-model="valueRange.start" />
+        日
+        至
+        <a-input-number :disabled="type!==TYPE_RANGE || disableChoice" :max="maxValue" :min="minValue" :precision="0" class="w60"
+                        v-model="valueRange.end" />
+        日
+      </div>
+      <div class="item">
+        <a-radio value="TYPE_LOOP" class="choice" :disabled="disableChoice">循环</a-radio>
+        从
+        <a-input-number :disabled="type!==TYPE_LOOP || disableChoice" :max="maxValue" :min="minValue" :precision="0" class="w60"
+                        v-model="valueLoop.start" />
+        日开始，间隔
+        <a-input-number :disabled="type!==TYPE_LOOP || disableChoice" :max="maxValue" :min="minValue" :precision="0" class="w60"
+                        v-model="valueLoop.interval" />
+        日
+      </div>
+      <div class="item">
+        <a-radio value="TYPE_WORK" class="choice" :disabled="disableChoice">工作日</a-radio>
+        本月
+        <a-input-number :disabled="type!==TYPE_WORK || disableChoice" :max="maxValue" :min="minValue" :precision="0" class="w60"
+                        v-model="valueWork" />
+        日，最近的工作日
+      </div>
+      <div class="item">
+        <a-radio value="TYPE_LAST" class="choice" :disabled="disableChoice">最后一日</a-radio>
+      </div>
+      <div class="item">
+        <a-radio value="TYPE_SPECIFY" class="choice" :disabled="disableChoice">指定</a-radio>
+        <div class="list">
+          <a-checkbox-group v-model="valueList">
+            <template v-for="i of specifyRange">
+              <a-checkbox class="list-check-item" :key="`key-${i}`" :value="i" :disabled="type!==TYPE_SPECIFY || disabled">{{ i }}</a-checkbox>
+            </template>
+          </a-checkbox-group>
+        </div>
+      </div>
+    </a-radio-group>
+  </div>
+</template>
+
+<script>
+import mixin from './mixin'
+
+export default {
+  name: 'day',
+  mixins: [mixin],
+  props: {
+    week: {
+      type: String,
+      default: '?'
+    }
+  },
+  data () {
+    return {}
+  },
+  computed: {
+    disableChoice () {
+      return (this.week && this.week !== '?') || this.disabled
+    }
+  },
+  watch: {
+    value_c () {
+      // 数值变化
+      this.updateValue()
+    },
+    week () {
+      // console.info('new week: ' + newVal)
+      this.updateValue()
+    }
+  },
+  methods: {
+    updateValue () {
+      this.$emit('change', this.disableChoice ? '?' : this.value_c)
+    }
+  },
+  created () {
+    this.DEFAULT_VALUE = '*'
+    this.minValue = 1
+    this.maxValue = 31
+    this.valueRange.start = 1
+    this.valueRange.end = 31
+    this.valueLoop.start = 1
+    this.valueLoop.interval = 1
+    this.parseProp(this.prop)
+  }
+}
+</script>
+
+<style lang="less" scoped>
+@import "mixin.less";
+</style>

src/components/jero/JEasyCron/tabs/hour.vue

@@ -0,0 +1,71 @@
+<template>
+  <div class="config-list">
+    <a-radio-group v-model="type">
+      <div class="item">
+        <a-radio value="TYPE_EVERY" class="choice" :disabled="disabled">每时</a-radio>
+      </div>
+      <div class="item">
+        <a-radio value="TYPE_RANGE" class="choice" :disabled="disabled">区间</a-radio>
+        从
+        <a-input-number :disabled="type!==TYPE_RANGE || disabled" :max="maxValue" :min="minValue" :precision="0" class="w60"
+                        v-model="valueRange.start" />
+        时
+        至
+        <a-input-number :disabled="type!==TYPE_RANGE || disabled" :max="maxValue" :min="minValue" :precision="0" class="w60"
+                        v-model="valueRange.end" />
+        时
+      </div>
+      <div class="item">
+        <a-radio value="TYPE_LOOP" class="choice" :disabled="disabled">循环</a-radio>
+        从
+        <a-input-number :disabled="type!==TYPE_LOOP || disabled" :max="maxValue" :min="minValue" :precision="0" class="w60"
+                        v-model="valueLoop.start" />
+        时开始，间隔
+        <a-input-number :disabled="type!==TYPE_LOOP || disabled" :max="maxValue" :min="minValue" :precision="0" class="w60"
+                        v-model="valueLoop.interval" />
+        时
+      </div>
+      <div class="item">
+        <a-radio value="TYPE_SPECIFY" class="choice" :disabled="disabled">指定</a-radio>
+        <div class="list">
+          <a-checkbox-group v-model="valueList">
+            <template v-for="i in specifyRange">
+              <a-checkbox class="list-check-item" :key="`key-${i}`" :value="i" :disabled="type!==TYPE_SPECIFY || disabled">{{ i }}</a-checkbox>
+            </template>
+          </a-checkbox-group>
+        </div>
+      </div>
+    </a-radio-group>
+  </div>
+</template>
+
+<script>
+import mixin from './mixin'
+
+export default {
+  name: 'minute',
+  mixins: [mixin],
+  data () {
+    return {}
+  },
+  watch: {
+    value_c (newVal) {
+      this.$emit('change', newVal)
+    }
+  },
+  created () {
+    this.DEFAULT_VALUE = '*'
+    this.minValue = 0
+    this.maxValue = 23
+    this.valueRange.start = 0
+    this.valueRange.end = 23
+    this.valueLoop.start = 0
+    this.valueLoop.interval = 1
+    this.parseProp(this.prop)
+  }
+}
+</script>
+
+<style lang="less" scoped>
+@import "mixin.less";
+</style>

src/components/jero/JEasyCron/tabs/minute.vue

@@ -0,0 +1,71 @@
+<template>
+  <div class="config-list">
+    <a-radio-group v-model="type">
+      <div class="item">
+        <a-radio value="TYPE_EVERY" class="choice" :disabled="disabled">每分</a-radio>
+      </div>
+      <div class="item">
+        <a-radio value="TYPE_RANGE" class="choice" :disabled="disabled">区间</a-radio>
+        从
+        <a-input-number :disabled="type!==TYPE_RANGE || disabled" :max="maxValue" :min="minValue" :precision="0" class="w60"
+                        v-model="valueRange.start" />
+        分
+        至
+        <a-input-number :disabled="type!==TYPE_RANGE || disabled" :max="maxValue" :min="minValue" :precision="0" class="w60"
+                        v-model="valueRange.end" />
+        分
+      </div>
+      <div class="item">
+        <a-radio value="TYPE_LOOP" class="choice" :disabled="disabled">循环</a-radio>
+        从
+        <a-input-number :disabled="type!==TYPE_LOOP || disabled" :max="maxValue" :min="minValue" :precision="0" class="w60"
+                        v-model="valueLoop.start" />
+        分开始，间隔
+        <a-input-number :disabled="type!==TYPE_LOOP || disabled" :max="maxValue" :min="minValue" :precision="0" class="w60"
+                        v-model="valueLoop.interval" />
+        分
+      </div>
+      <div class="item">
+        <a-radio value="TYPE_SPECIFY" class="choice" :disabled="disabled">指定</a-radio>
+        <div class="list">
+          <a-checkbox-group v-model="valueList">
+            <template v-for="i in specifyRange">
+              <a-checkbox class="list-check-item" :key="`key-${i}`" :value="i" :disabled="type!==TYPE_SPECIFY || disabled">{{ i }}</a-checkbox>
+            </template>
+          </a-checkbox-group>
+        </div>
+      </div>
+    </a-radio-group>
+  </div>
+</template>
+
+<script>
+import mixin from './mixin'
+
+export default {
+  name: 'minute',
+  mixins: [mixin],
+  data () {
+    return {}
+  },
+  watch: {
+    value_c (newVal) {
+      this.$emit('change', newVal)
+    }
+  },
+  created () {
+    this.DEFAULT_VALUE = '*'
+    this.minValue = 0
+    this.maxValue = 59
+    this.valueRange.start = 0
+    this.valueRange.end = 59
+    this.valueLoop.start = 0
+    this.valueLoop.interval = 1
+    this.parseProp(this.prop)
+  }
+}
+</script>
+
+<style lang="less" scoped>
+@import "mixin.less";
+</style>

src/components/jero/JEasyCron/tabs/mixin.js

@@ -0,0 +1,163 @@
+// 主要用于日和星期的互斥使用
+const TYPE_NOT_SET = 'TYPE_NOT_SET'
+const TYPE_EVERY = 'TYPE_EVERY'
+const TYPE_RANGE = 'TYPE_RANGE'
+const TYPE_LOOP = 'TYPE_LOOP'
+const TYPE_WORK = 'TYPE_WORK'
+const TYPE_LAST = 'TYPE_LAST'
+const TYPE_SPECIFY = 'TYPE_SPECIFY'
+
+const DEFAULT_VALUE = '?'
+
+export default {
+  model: {
+    prop: 'prop',
+    event: 'change'
+  },
+  props: {
+    prop: {
+      type: String,
+      default: DEFAULT_VALUE
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data () {
+    const type = TYPE_EVERY
+    return {
+      DEFAULT_VALUE,
+      // 类型
+      type,
+      // 启用日或者星期互斥用
+      TYPE_NOT_SET,
+      TYPE_EVERY,
+      TYPE_RANGE,
+      TYPE_LOOP,
+      TYPE_WORK,
+      TYPE_LAST,
+      TYPE_SPECIFY,
+      // 对于不同的类型，所定义的值也有所不同
+      valueRange: {
+        start: 0,
+        end: 0
+      },
+      valueLoop: {
+        start: 0,
+        interval: 1
+      },
+      valueWeek: {
+        start: 0,
+        end: 0
+      },
+      valueList: [],
+      valueWork: 1,
+      maxValue: 0,
+      minValue: 0,
+      valueLast: null
+    }
+  },
+  watch: {
+    prop (newVal) {
+      if (newVal === this.value_c) {
+        // console.info('skip ' + newVal)
+        return
+      }
+      this.parseProp(newVal)
+    }
+  },
+  computed: {
+    value_c () {
+      const result = []
+      switch (this.type) {
+        case TYPE_NOT_SET:
+          result.push('?')
+          break
+        case TYPE_EVERY:
+          result.push('*')
+          break
+        case TYPE_RANGE:
+          result.push(`${this.valueRange.start}-${this.valueRange.end}`)
+          break
+        case TYPE_LOOP:
+          result.push(`${this.valueLoop.start}/${this.valueLoop.interval}`)
+          break
+        case TYPE_WORK:
+          result.push(`${this.valueWork}W`)
+          break
+        case TYPE_LAST:
+          result.push('L')
+          break
+        case TYPE_SPECIFY:
+          if (this.valueList.length === 0) {
+            this.valueList.push(this.minValue)
+          }
+          result.push(this.valueList.join(','))
+          break
+        default:
+          result.push(this.DEFAULT_VALUE)
+          break
+      }
+      return result.length > 0 ? result.join('') : this.DEFAULT_VALUE
+    },
+    // 指定值范围区间，介于最小值和最大值之间
+    specifyRange () {
+      const range = []
+      for (let i = this.minValue; i <= this.maxValue; i++) {
+        range.push(i)
+      }
+      return range
+    }
+  },
+  methods: {
+    parseProp (value) {
+      if (value === this.value_c) {
+        // console.info('same ' + value)
+        return
+      }
+      if (typeof (this.preProcessProp) === 'function') {
+        value = this.preProcessProp(value)
+      }
+      try {
+        if (!value || value === this.DEFAULT_VALUE) {
+          this.type = TYPE_EVERY
+        } else if (value.indexOf('?') >= 0) {
+          this.type = TYPE_NOT_SET
+        } else if (value.indexOf('-') >= 0) {
+          this.type = TYPE_RANGE
+          const values = value.split('-')
+          if (values.length >= 2) {
+            this.valueRange.start = parseInt(values[0])
+            this.valueRange.end = parseInt(values[1])
+          }
+        } else if (value.indexOf('/') >= 0) {
+          this.type = TYPE_LOOP
+          const values = value.split('/')
+          if (values.length >= 2) {
+            this.valueLoop.start = value[0] === '*' ? 0 : parseInt(values[0])
+            this.valueLoop.interval = parseInt(values[1])
+          }
+        } else if (value.indexOf('W') >= 0) {
+          this.type = TYPE_WORK
+          const values = value.split('W')
+          if (!values[0] && !isNaN(values[0])) {
+            this.valueWork = parseInt(values[0])
+          }
+        } else if (value.indexOf('L') >= 0) {
+          this.type = TYPE_LAST
+          const values = value.split('L')
+          this.valueLast = parseInt(values[0])
+        } else if (value.indexOf(',') >= 0 || !isNaN(value)) {
+          this.type = TYPE_SPECIFY
+          this.valueList = value.split(',').map(item => parseInt(item))
+        } else {
+          this.type = TYPE_EVERY
+        }
+      } catch (e) {
+        // console.info(e)
+        this.type = TYPE_EVERY
+      }
+    }
+  }
+}

src/components/jero/JEasyCron/tabs/mixin.less

@@ -0,0 +1,35 @@
+
+.config-list {
+  text-align: left;
+  margin: 0 10px 10px 10px;
+}
+
+.item {
+  margin-top: 5px;
+}
+
+.choice {
+  padding: 5px 8px;
+}
+
+
+.w60 {
+  width: 60px;
+}
+.w80 {
+  width: 80px;
+}
+
+.list {
+  margin: 0 20px;
+}
+
+.list-check-item {
+  padding: 1px 3px;
+  width: 4em;
+}
+
+.tip-info {
+  color: #999
+}
+

src/components/jero/JEasyCron/tabs/month.vue

@@ -0,0 +1,67 @@
+<template>
+  <div class="config-list">
+    <a-radio-group v-model="type">
+      <div class="item">
+        <a-radio value="TYPE_EVERY" class="choice" :disabled="disabled">每月</a-radio>
+      </div>
+      <div class="item">
+        <a-radio value="TYPE_RANGE" class="choice" :disabled="disabled">区间</a-radio>
+        从
+        <a-input-number :disabled="type!==TYPE_RANGE || disabled" :max="maxValue" :min="minValue" :precision="0" class="w60" v-model="valueRange.start"/>
+        月
+        至
+        <a-input-number :disabled="type!==TYPE_RANGE || disabled" :max="maxValue" :min="minValue" :precision="0" class="w60" v-model="valueRange.end"/>
+        月
+      </div>
+      <div class="item">
+        <a-radio value="TYPE_LOOP" class="choice" :disabled="disabled">循环</a-radio>
+        从
+        <a-input-number :disabled="type!==TYPE_LOOP || disabled" :max="maxValue" :min="minValue" :precision="0" class="w60" v-model="valueLoop.start"/>
+        月开始，间隔
+        <a-input-number :disabled="type!==TYPE_LOOP || disabled" :max="maxValue" :min="minValue" :precision="0" class="w60" v-model="valueLoop.interval"/>
+        月
+      </div>
+      <div class="item">
+        <a-radio value="TYPE_SPECIFY" class="choice" :disabled="disabled">指定</a-radio>
+        <div class="list">
+          <a-checkbox-group v-model="valueList">
+            <template v-for="i of specifyRange">
+              <a-checkbox class="list-check-item" :key="`key-${i}`" :value="i" :disabled="type!==TYPE_SPECIFY || disabled">{{i}}</a-checkbox>
+            </template>
+          </a-checkbox-group>
+        </div>
+      </div>
+    </a-radio-group>
+  </div>
+</template>
+
+<script>
+import mixin from './mixin'
+
+export default {
+  name: 'month',
+  mixins: [mixin],
+  data () {
+    return {}
+  },
+  watch: {
+    value_c (newVal) {
+      this.$emit('change', newVal)
+    }
+  },
+  created () {
+    this.DEFAULT_VALUE = '*'
+    this.minValue = 1
+    this.maxValue = 12
+    this.valueRange.start = 1
+    this.valueRange.end = 12
+    this.valueLoop.start = 1
+    this.valueLoop.interval = 1
+    this.parseProp(this.prop)
+  }
+}
+</script>
+
+<style lang="less" scoped>
+  @import "mixin.less";
+</style>

src/components/jero/JEasyCron/tabs/second.vue

@@ -0,0 +1,68 @@
+<template>
+  <div class="config-list">
+    <a-radio-group v-model="type">
+      <div class="item">
+        <a-radio value="TYPE_EVERY" class="choice" :disabled="disabled">每秒</a-radio>
+      </div>
+      <div class="item">
+        <a-radio value="TYPE_RANGE" class="choice" :disabled="disabled">区间</a-radio>
+        从
+        <a-input-number :disabled="type!==TYPE_RANGE || disabled" :max="maxValue" :min="minValue" :precision="0" class="w60" v-model="valueRange.start"/>
+        秒
+        至
+        <a-input-number :disabled="type!==TYPE_RANGE || disabled" :max="maxValue" :min="minValue" :precision="0" class="w60" v-model="valueRange.end"/>
+        秒
+      </div>
+      <div class="item">
+        <a-radio value="TYPE_LOOP" class="choice" :disabled="disabled">循环</a-radio>
+        从
+        <a-input-number :disabled="type!==TYPE_LOOP || disabled" :max="maxValue" :min="minValue" :precision="0" class="w60" v-model="valueLoop.start"/>
+        秒开始，间隔
+        <a-input-number :disabled="type!==TYPE_LOOP || disabled" :max="maxValue" :min="minValue" :precision="0" class="w60" v-model="valueLoop.interval"/>
+        秒
+      </div>
+      <div class="item">
+        <a-radio value="TYPE_SPECIFY" class="choice" :disabled="disabled">指定</a-radio>
+        <div class="list">
+          <a-checkbox-group v-model="valueList">
+            <template v-for="i in specifyRange">
+              <a-checkbox class="list-check-item" :key="`key-${i}`" :value="i" :disabled="type!==TYPE_SPECIFY || disabled">{{i}}</a-checkbox>
+            </template>
+          </a-checkbox-group>
+        </div>
+      </div>
+    </a-radio-group>
+  </div>
+</template>
+
+<script>
+import mixin from './mixin'
+
+export default {
+  name: 'second',
+  mixins: [mixin],
+  data () {
+    return {}
+  },
+  watch: {
+    value_c (newVal) {
+      this.$emit('change', newVal)
+    }
+  },
+  created () {
+    this.DEFAULT_VALUE = '*'
+    this.minValue = 0
+    this.maxValue = 59
+    this.valueRange.start = 0
+    this.valueRange.end = 59
+    this.valueLoop.start = 0
+    this.valueLoop.interval = 1
+    // console.info('created')
+    this.parseProp(this.prop)
+  }
+}
+</script>
+
+<style lang="less" scoped>
+  @import "mixin.less";
+</style>

src/components/jero/JEasyCron/tabs/week.vue

@@ -0,0 +1,119 @@
+<template>
+  <div class="config-list">
+    <a-radio-group v-model="type">
+      <div class="item">
+        <a-radio value="TYPE_NOT_SET" class="choice" :disabled="disableChoice">不设置</a-radio>
+        <span class="tip-info">日和周只能设置其中之一</span>
+      </div>
+      <div class="item">
+        <a-radio value="TYPE_RANGE" class="choice" :disabled="disableChoice">区间</a-radio>
+        从
+        <a-select v-model="valueRange.start" class="w80" :disabled="type!==TYPE_RANGE || disableChoice">
+          <template v-for="(v, k) of WEEK_MAP">
+            <a-select-option :value="v" :key="v">{{ k }}</a-select-option>
+          </template>
+        </a-select>
+        至
+        <a-select v-model="valueRange.end" class="w80" :disabled="type!==TYPE_RANGE || disableChoice">
+          <template v-for="(v, k) of WEEK_MAP">
+            <a-select-option :value="v" :key="v">{{ k }}</a-select-option>
+          </template>
+        </a-select>
+      </div>
+      <div class="item">
+        <a-radio value="TYPE_LOOP" class="choice" :disabled="disableChoice">循环</a-radio>
+        从
+        <a-select v-model="valueLoop.start" class="w80" :disabled="type!==TYPE_LOOP || disableChoice">
+          <template v-for="(v, k) of WEEK_MAP">
+            <a-select-option :value="v" :key="v">{{ k }}</a-select-option>
+          </template>
+        </a-select>
+        开始，间隔
+        <a-input-number :disabled="type!==TYPE_LOOP || disableChoice" :max="maxValue" :min="minValue" :precision="0" class="w60"
+                        v-model="valueLoop.interval" />
+        天
+      </div>
+      <div class="item">
+        <a-radio value="TYPE_SPECIFY" class="choice" :disabled="disableChoice">指定</a-radio>
+        <div class="list">
+          <a-checkbox-group v-model="valueList">
+            <template v-for="i in specifyRange">
+              <a-checkbox class="list-check-item" :key="`key-${i}`" :value="i" :disabled="type!==TYPE_SPECIFY || disabled">{{ i }}</a-checkbox>
+            </template>
+          </a-checkbox-group>
+        </div>
+      </div>
+    </a-radio-group>
+  </div>
+</template>
+
+<script>
+import mixin from './mixin'
+import { replaceWeekName, WEEK_MAP_EN } from './const.js'
+
+const WEEK_MAP = {
+  周一: 2,
+  周二: 3,
+  周三: 4,
+  周四: 5,
+  周五: 6,
+  周六: 7,
+  // 按照国人习惯，将周日放到每周的最后一天
+  周日: 1
+}
+
+export default {
+  name: 'week',
+  mixins: [mixin],
+  props: {
+    day: {
+      type: String,
+      default: '*'
+    }
+  },
+  data () {
+    return {
+      WEEK_MAP,
+      WEEK_MAP_EN
+    }
+  },
+  computed: {
+    disableChoice () {
+      return (this.day && this.day !== '?') || this.disabled
+    }
+  },
+  watch: {
+    value_c () {
+      // 如果设置日，那么星期就直接不设置
+      this.updateValue()
+    },
+    day () {
+      // console.info('new day: ' + newVal)
+      this.updateValue()
+    }
+  },
+  methods: {
+    updateValue () {
+      this.$emit('change', this.disableChoice ? '?' : this.value_c)
+    },
+    preProcessProp (c) {
+      return replaceWeekName(c)
+    }
+  },
+  created () {
+    this.DEFAULT_VALUE = '*'
+    // 0,7表示周日 1表示周一
+    this.minValue = 1
+    this.maxValue = 7
+    this.valueRange.start = 1
+    this.valueRange.end = 7
+    this.valueLoop.start = 2
+    this.valueLoop.interval = 1
+    this.parseProp(this.prop)
+  }
+}
+</script>
+
+<style lang="less" scoped>
+@import "mixin.less";
+</style>

src/components/jero/JEasyCron/tabs/year.vue

@@ -0,0 +1,60 @@
+<template>
+  <div class="config-list">
+    <a-radio-group v-model="type">
+      <div class="item">
+        <a-radio value="TYPE_EVERY" class="choice" :disabled="disabled">每年</a-radio>
+      </div>
+      <div class="item">
+        <a-radio value="TYPE_RANGE" class="choice" :disabled="disabled">区间</a-radio>
+        从
+        <a-input-number :disabled="type!==TYPE_RANGE || disabled" :min="0" :precision="0" class="w60" v-model="valueRange.start"/>
+        年
+        至
+        <a-input-number :disabled="type!==TYPE_RANGE || disabled" :min="1" :precision="0" class="w60" v-model="valueRange.end"/>
+        年
+      </div>
+      <div class="item">
+        <a-radio value="TYPE_LOOP" class="choice" :disabled="disabled">循环</a-radio>
+        从
+        <a-input-number :disabled="type!==TYPE_LOOP || disabled" :min="0" :precision="0" class="w60" v-model="valueLoop.start"/>
+        年开始，间隔
+        <a-input-number :disabled="type!==TYPE_LOOP || disabled" :min="1" :precision="0" class="w60" v-model="valueLoop.interval"/>
+        年
+      </div>
+    </a-radio-group>
+  </div>
+</template>
+
+<script>
+import mixin from './mixin'
+
+export default {
+  name: 'year',
+  mixins: [mixin],
+  data () {
+    return {}
+  },
+  watch: {
+    value_c (newVal) {
+      // console.info('change:' + newVal)
+      this.$emit('change', newVal)
+    }
+  },
+  created () {
+    const nowYear = (new Date()).getFullYear()
+    this.DEFAULT_VALUE = '*'
+    this.minValue = 0
+    this.maxValue = 0
+    this.valueRange.start = nowYear
+    this.valueRange.end = nowYear + 100
+    this.valueLoop.start = nowYear
+    this.valueLoop.interval = 1
+    // console.info('created')
+    this.parseProp(this.prop)
+  }
+}
+</script>
+
+<style lang="less" scoped>
+  @import "mixin.less";
+</style>

src/components/jero/JEasyCron/validator.js

@@ -0,0 +1,51 @@
+import CronParser from 'cron-parser'
+import { replaceWeekName } from './tabs/const'
+
+export default (rule, value, callback) => {
+  // 没填写就不校验
+  if (!value) {
+    callback()
+    return true
+  }
+  const values = value.split(' ').filter(item => !!item)
+  if (values.length > 7) {
+    callback(new Error('Cron表达式最多7项！'))
+    return false
+  }
+  // 检查第7项
+  let e = value
+  if (values.length === 7) {
+    const year = replaceWeekName(values[6])
+    if (year !== '*' && year !== '?') {
+      let yearValues
+      if (year.indexOf('-') >= 0) {
+        yearValues = year.split('-')
+      } else if (year.indexOf('/')) {
+        yearValues = year.split('/')
+      } else {
+        yearValues = [year]
+      }
+      // console.info(yearValues)
+      // 判断是否都是数字
+      const checkYear = yearValues.some(item => isNaN(item))
+      if (checkYear) {
+        callback(new Error('Cron表达式参数[年]错误：' + year))
+        return false
+      }
+    }
+    // 取其中的前六项
+    e = values.slice(0, 6).join(' ')
+  }
+  // 6位 没有年
+  // 5位没有秒、年
+  let result = true
+  try {
+    const iter = CronParser.parseExpression(e)
+    iter.next()
+    callback()
+  } catch (e) {
+    callback(new Error('Cron表达式错误：' + e))
+    result = false
+  }
+  return result
+}

src/components/jero/JEditor.vue

@@ -0,0 +1,249 @@
+<template>
+  <div class="tinymce-editor">
+    <editor
+      v-if="!reloading"
+      v-model="myValue"
+      :init="init"
+      :disabled="disabled"
+      @onClick="onClick">
+    </editor>
+  </div>
+</template>
+
+<script>
+import tinymce from 'tinymce/tinymce'
+import Editor from '@tinymce/tinymce-vue'
+import 'tinymce/themes/silver/theme'
+import 'tinymce/plugins/image'
+import 'tinymce/plugins/link'
+import 'tinymce/plugins/media'
+import 'tinymce/plugins/table'
+import 'tinymce/plugins/lists'
+import 'tinymce/plugins/contextmenu'
+import 'tinymce/plugins/wordcount'
+import 'tinymce/plugins/colorpicker'
+import 'tinymce/plugins/textcolor'
+import 'tinymce/plugins/fullscreen'
+import 'tinymce/icons/default'
+import { uploadAction, getFileAccessHttpUrl } from '@/api/manage'
+import { getVmParentByName } from '@/utils/util'
+export default {
+  components: {
+    Editor
+  },
+  props: {
+    value: {
+      type: String,
+      required: false
+    },
+    triggerChange: {
+      type: Boolean,
+      default: false,
+      required: false
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    plugins: {
+      type: [String, Array],
+      default: 'lists image link media table textcolor wordcount contextmenu fullscreen'
+    },
+    toolbar: {
+      type: [String, Array],
+      default: 'undo redo |  formatselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | lists link unlink image media table | removeformat | fullscreen',
+      branding: false
+    }
+  },
+  data () {
+    return {
+      // 初始化配置
+      init: {
+        language_url: '/tinymce/langs/zh_CN.js',
+        language: 'zh_CN',
+        skin_url: '/tinymce/skins/lightgray',
+        height: 300,
+        plugins: this.plugins,
+        toolbar: this.toolbar,
+        branding: false,
+        menubar: false,
+        toolbar_drawer: false,
+        images_upload_handler: (blobInfo, success) => {
+          const formData = new FormData()
+          formData.append('file', blobInfo.blob(), blobInfo.filename())
+          formData.append('biz', 'jeditor')
+          formData.append('jeditor', '1')
+          uploadAction('/sys/common/upload', formData).then((res) => {
+            if (res.success) {
+              if (res.message === 'local') {
+                const img = 'data:image/jpeg;base64,' + blobInfo.base64()
+                success(img)
+              } else {
+                const img = getFileAccessHttpUrl(res.result.id)
+                success(img)
+              }
+            }
+          })
+        },
+        paste_postprocess: function(plugin, args) {
+          args.node.setAttribute('id', 'hello')
+        },
+        init_instance_callback: editor => {
+          if (this.value) {
+            editor.setContent(this.value)
+          }
+          this.hasInit = true
+
+          editor.on('NodeChange Change KeyUp SetContent', () => {
+            this.hasChange = true
+            // const val = editor.getContent().replace(/<p><img\s?src="data.*?<\/p>/g, '')
+            this.$emit('input', editor.getContent())
+          })
+
+          editor.on('paste', evt => {
+            // 监听粘贴事件
+            console.log('监听粘贴事件', evt)
+            this.onPaste(evt)
+          })
+        }
+      },
+      myValue: this.value,
+      reloading: false
+    }
+  },
+  mounted () {
+    this.initATabsChangeAutoReload()
+  },
+  methods: {
+    onPaste(event, success, failure) {
+      // let _this = this
+      let self = this
+
+      // 实现图⽚粘贴上传
+      const items = (event.clipboardData || window.clipboardData).items
+      // items为伪数组微信/QQ截图以及此富⽂本区域内复制粘贴的length为1,⿏标右键复制粘贴图⽚以及⽂本的复制粘贴的length为2
+      let len = items.length
+      for (let i = 0; i < len; i++) {
+        if (items[i].kind == "file" && items[i].type.indexOf("image") != -1) {
+          // 判断是否为图⽚类型
+          event.preventDefault() // 如果是图⽚阻⽌⾃动粘贴到富⽂本编辑器
+          let file = items[i].getAsFile() // 获取⽂件数据
+          let blob = new Blob([file], { type: file.type }) //实例化⼀个blob 将图⽚⼤⼩以及类型初始化到blob⾥
+          // let index = file.name.lastIndexOf(".")
+          // let fileName =
+          //   Date.now() + file.name.substring(index, file.name.length)
+          // fileName --- 图⽚名称可⾃⾏处理
+          console.log("粘贴的是图⽚类型", blob, file)
+          // let file = blobInfo.blob()
+          const isLt2M = file.size / 1024 < 500
+          if (!isLt2M) {
+            this.$message.warning("上传失败，图片不可超过500KB!")
+            return false
+          }
+          const formdate = new FormData()
+          formdate.append("file", file) //imageFile文件名和后端统一
+          uploadAction('/sys/common/upload', formdate).then((res) => {
+            debugger
+            if (res.success) {
+              if (res.message === 'local') {
+                const img = 'data:image/jpeg;base64,' + blob.base64()
+                editor.execCommand(
+                  "mceReplaceContent",
+                  false,
+                  `<img class="wscnph" src="${img}" >`
+                );
+              } else {
+                const img = getFileAccessHttpUrl(res.message)
+                editor.execCommand(
+                  "mceReplaceContent",
+                  false,
+                  `<img class="wscnph" src="${img}" >`
+                );
+              }
+            }
+          })
+
+            .catch(function(err) {
+              // 上传错误可⾃⾏给出提⽰
+              self.$message.error(err)
+            })
+        } else {
+          // 不是图⽚类型直接粘贴, 跳过oss上传处理
+          console.log("粘贴的不是图⽚")
+        }
+      }
+    },
+    reload () {
+      this.reloading = true
+      this.$nextTick(() => {
+        this.reloading = false
+      })
+    },
+
+    onClick (e) {
+      this.$emit('onClick', e, tinymce)
+    },
+    // 可以添加一些自己的自定义事件，如清空内容
+    clear () {
+      this.myValue = ''
+    },
+
+    /**
+       * 自动判断父级是否是 <a-tabs/> 组件，然后添加事件监听，自动触发reload()
+       *
+       * 由于 tabs 组件切换会导致 tinymce 无法输入，
+       * 只有重新加载才能使用（无论是vue版的还是jQuery版tinymce都有这个通病）
+       */
+    initATabsChangeAutoReload () {
+      // 获取父级
+      const tabs = getVmParentByName(this, 'ATabs')
+      const tabPane = getVmParentByName(this, 'ATabPane')
+      if (tabs && tabPane) {
+        // 用户自定义的 key
+        const currentKey = tabPane.$vnode.key
+        // 添加事件监听
+        tabs.$on('change', (key) => {
+          // 切换到自己时执行reload
+          if (currentKey === key) {
+            this.reload()
+          }
+        })
+        // update--begin--autor:liusq-----date:20210316------for：富文本编辑器tab父组件可能导致的赋值问题------
+        this.reload()
+        // update--end--autor:liusq-----date:20210316------for：富文本编辑器tab父组件可能导致的赋值问题------
+      } else {
+        // update--begin--autor:wangshuai-----date:20200724------for：富文本编辑器切换tab无法修改------
+        const tabLayout = getVmParentByName(this, 'TabLayout')
+        // update--begin--autor:liusq-----date:20210713------for：处理特殊情况excuteCallback不能使用------
+        try {
+          tabLayout.excuteCallback(() => {
+            this.reload()
+          })
+        } catch (error) {
+          if (tabLayout) {
+            this.reload()
+          }
+        }
+        // update--end--autor:liusq-----date:20210713------for：处理特殊情况excuteCallback不能使用------
+        // update--begin--autor:wangshuai-----date:20200724------for：文本编辑器切换tab无法修改------
+      }
+    }
+
+  },
+  watch: {
+    value (newValue) {
+      this.myValue = (newValue == null ? '' : newValue)
+    },
+    myValue (newValue) {
+      if (this.triggerChange) {
+        this.$emit('change', newValue)
+      } else {
+        this.$emit('input', newValue)
+      }
+    }
+  }
+}
+
+</script>
+<style scoped>
+</style>