vue版本上线

2021-04-07 23:53:57 +08:00
parent 76a0033a4e
commit f4ef5aa067
803 changed files with 171959 additions and 27 deletions
--- a/jshERP-web/src/App.vue
+++ b/jshERP-web/src/App.vue
@@ -0,0 +1,44 @@
+<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 () {
+      let that = this
+      enquireScreen(deviceType => {
+        // tablet
+        if (deviceType === 0) {
+          that.$store.commit('TOGGLE_DEVICE', 'mobile')
+          that.$store.dispatch('setSidebar', false)
+        }
+        // mobile
+        else if (deviceType === 1) {
+          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>
+  #app {
+    height: 100%;
+  }
+</style>
--- a/jshERP-web/src/api/GroupRequest.js
+++ b/jshERP-web/src/api/GroupRequest.js
@@ -0,0 +1,30 @@
+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);
+  })
+}
+
+
--- a/jshERP-web/src/api/api.js
+++ b/jshERP-web/src/api/api.js
@@ -0,0 +1,271 @@
+import { getAction, deleteAction, putAction, postAction, httpAction } from '@/api/manage'
+import Vue from 'vue'
+import {UI_CACHE_DB_DICT_DATA } from "@/store/mutation-types"
+
+//首页统计
+const getBuyAndSaleStatistics = (params)=>getAction("/depotHead/getBuyAndSaleStatistics",params);
+const buyOrSalePrice = (params)=>getAction("/depotItem/buyOrSalePrice",params);
+
+//角色管理
+const addRole = (params)=>postAction("/role/add",params);
+const editRole = (params)=>putAction("/role/update",params);
+const checkRole = (params)=>getAction("/role/checkIsNameExist",params);
+const findUserRole = (params)=>getAction("/role/findUserRole",params);
+const queryall = (params)=>getAction("/sys/role/queryall",params);
+
+//用户管理
+const addUser = (params)=>postAction("/user/addUser",params);
+const editUser = (params)=>putAction("/user/updateUser",params);
+const queryUserRole = (params)=>getAction("/sys/user/queryUserRole",params);
+const getUserList = (params)=>getAction("/sys/user/list",params);
+const frozenBatch = (params)=>putAction("/sys/user/frozenBatch",params);
+//验证用户是否存在
+const checkOnlyUser = (params)=>getAction("/sys/user/checkOnlyUser",params);
+//改变密码
+const changePassword = (params)=>putAction("/sys/user/changePassword",params);
+
+//权限管理
+const addPermission= (params)=>postAction("/sys/permission/add",params);
+const editPermission= (params)=>putAction("/sys/permission/edit",params);
+const getPermissionList = (params)=>getAction("/sys/permission/list",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 = (params)=>postAction("/function/findMenuByPNumber",params);
+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 queryOrganizationTreeList = (params)=>getAction("/organization/getOrganizationTree",params);
+const queryOrganizationById = (params)=>getAction("/organization/findById",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)=>deleteAction("/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 saveDeptRolePermission = (params)=>postAction("/sys/sysDepartPermission/saveDeptRolePermission",params);
+const queryMyDepartTreeList = (params)=>getAction("/sys/sysDepart/queryMyDeptTreeList",params);
+
+//日志管理
+const deleteLog = (params)=>deleteAction("/sys/log/delete",params);
+const deleteLogList = (params)=>deleteAction("/sys/log/deleteBatch",params);
+
+//数据字典
+const addDict = (params)=>postAction("/sys/dict/add",params);
+const editDict = (params)=>putAction("/sys/dict/edit",params);
+const treeList = (params)=>getAction("/sys/dict/treeList",params);
+const addDictItem = (params)=>postAction("/sys/dictItem/add",params);
+const editDictItem = (params)=>putAction("/sys/dictItem/edit",params);
+
+//字典标签专用（通过code获取字典数组）
+export const ajaxGetDictItems = (code, params)=>getAction(`/systemConfig/getDictItems/${code}`,params);
+//从缓存中获取字典配置
+function getDictItemsFromCache(dictCode) {
+  if (Vue.ls.get(UI_CACHE_DB_DICT_DATA) && Vue.ls.get(UI_CACHE_DB_DICT_DATA)[dictCode]) {
+    let dictItems = Vue.ls.get(UI_CACHE_DB_DICT_DATA)[dictCode];
+    console.log("-----------getDictItemsFromCache----------dictCode="+dictCode+"---- dictItems=",dictItems)
+    return dictItems;
+  }
+}
+
+//系统通告
+const doReleaseData = (params)=>getAction("/sys/annountCement/doReleaseData",params);
+const doReovkeData = (params)=>getAction("/sys/annountCement/doReovkeData",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 addPerson = (params)=>postAction("/person/add",params);
+const editPerson = (params)=>putAction("/person/update",params);
+const checkPerson = (params)=>getAction("/person/checkIsNameExist",params);
+const getPersonByType = (params)=>getAction("/person/getPersonByType",params);
+//账户管理
+const addAccount = (params)=>postAction("/account/add",params);
+const editAccount = (params)=>putAction("/account/update",params);
+const checkAccount = (params)=>getAction("/account/checkIsNameExist",params);
+const getAccount = (params)=>getAction("/account/getAccount",params);
+//收支项目
+const addInOutItem = (params)=>postAction("/inOutItem/add",params);
+const editInOutItem = (params)=>putAction("/inOutItem/update",params);
+const checkInOutItem = (params)=>getAction("/inOutItem/checkIsNameExist",params);
+const findInOutItemByParam = (params)=>getAction("/inOutItem/findBySelect",params);
+//仓库信息
+const addDepot = (params)=>postAction("/depot/add",params);
+const editDepot = (params)=>putAction("/depot/update",params);
+const checkDepot = (params)=>getAction("/depot/checkIsNameExist",params);
+//商品属性
+const editMaterialProperty = (params)=>putAction("/materialProperty/update",params);
+//商品类型
+const queryMaterialCategoryTreeList = (params)=>getAction("/materialCategory/getMaterialCategoryTree",params);
+const queryMaterialCategoryById = (params)=>getAction("/materialCategory/findById",params);
+//商品管理
+const addMaterial = (params)=>postAction("/material/add",params);
+const editMaterial = (params)=>putAction("/material/update",params);
+const checkMaterial = (params)=>getAction("/material/checkIsNameExist",params);
+const getMaterialBySelect = (params)=>getAction("/material/findBySelect",params);
+const getSerialMaterialBySelect = (params)=>getAction("/material/getMaterialEnableSerialNumberList",params);
+const getMaterialByBarCode = (params)=>getAction("/material/getMaterialByBarCode",params);
+//序列号
+const addSerialNumber = (params)=>postAction("/serialNumber/add",params);
+const editSerialNumber = (params)=>putAction("/serialNumber/update",params);
+const checkSerialNumber = (params)=>getAction("/serialNumber/checkIsNameExist",params);
+const batAddSerialNumber = (params)=>postAction("/serialNumber/batAddSerialNumber",params);
+//功能管理
+const addFunction = (params)=>postAction("/function/add",params);
+const editFunction = (params)=>putAction("/function/update",params);
+const checkFunction = (params)=>getAction("/function/checkIsNameExist",params);
+//系统配置
+const addSystemConfig = (params)=>postAction("/systemConfig/add",params);
+const editSystemConfig = (params)=>putAction("/systemConfig/update",params);
+const checkSystemConfig = (params)=>getAction("/systemConfig/checkIsNameExist",params);
+//用户|角色|模块关系
+const addUserBusiness = (params)=>postAction("/userBusiness/add",params);
+const editUserBusiness = (params)=>putAction("/userBusiness/update",params);
+const checkUserBusiness = (params)=>getAction("/userBusiness/checkIsValueExist",params);
+//计量单位
+const addUnit = (params)=>postAction("/unit/add",params);
+const editUnit = (params)=>putAction("/unit/update",params);
+const checkUnit = (params)=>getAction("/unit/checkIsNameExist",params);
+//供应商|客户|会员
+const addSupplier = (params)=>postAction("/supplier/add",params);
+const editSupplier = (params)=>putAction("/supplier/update",params);
+const checkSupplier = (params)=>getAction("/supplier/checkIsNameExist",params);
+const findBySelectSup = (params)=>postAction("/supplier/findBySelect_sup",params);
+const findBySelectCus = (params)=>postAction("/supplier/findBySelect_cus",params);
+const findBySelectRetail = (params)=>postAction("/supplier/findBySelect_retail",params);
+const findSupplierById = (params)=>getAction("/supplier/findById",params);
+//单据相关
+const findDepotHeadTotalPay = (params)=>getAction("/depotHead/findTotalPay",params);
+const findStockByDepotAndBarCode = (params)=>getAction("/depotItem/findStockByDepotAndBarCode",params);
+const findAccountHeadTotalPay = (params)=>getAction("/accountHead/findTotalPay",params);
+
+export {
+  getBuyAndSaleStatistics,
+  buyOrSalePrice,
+  addRole,
+  editRole,
+  checkRole,
+  findUserRole,
+  addUser,
+  editUser,
+  queryUserRole,
+  getUserList,
+  queryall,
+  frozenBatch,
+  checkOnlyUser,
+  changePassword,
+  getPermissionList,
+  addPermission,
+  editPermission,
+  queryTreeList,
+  queryListAsync,
+  queryRolePermission,
+  saveRolePermission,
+  queryPermissionsByUser,
+  loadAllRoleIds,
+  getPermissionRuleList,
+  queryPermissionRule,
+  queryOrganizationTreeList,
+  queryOrganizationById,
+  queryParentName,
+  searchByKeywords,
+  deleteByDepartId,
+  deleteLog,
+  deleteLogList,
+  addDict,
+  editDict,
+  treeList,
+  addDictItem,
+  editDictItem,
+  doReleaseData,
+  doReovkeData,
+  queryUserByDepId,
+  duplicateCheck,
+  queryTreeListForRole,
+  getSystemMenuList,
+  getSystemSubmenu,
+  getSystemSubmenuBatch,
+  loadCategoryData,
+  checkRuleByCode,
+  queryDepartPermission,
+  saveDepartPermission,
+  queryTreeListForDeptRole,
+  queryDeptRolePermission,
+  saveDeptRolePermission,
+  queryMyDepartTreeList,
+  getUserNoticeInfo,
+  getDictItemsFromCache,
+  addPerson,
+  editPerson,
+  checkPerson,
+  getPersonByType,
+  addAccount,
+  editAccount,
+  checkAccount,
+  getAccount,
+  addInOutItem,
+  editInOutItem,
+  checkInOutItem,
+  findInOutItemByParam,
+  addDepot,
+  editDepot,
+  checkDepot,
+  editMaterialProperty,
+  queryMaterialCategoryTreeList,
+  queryMaterialCategoryById,
+  addMaterial,
+  editMaterial,
+  checkMaterial,
+  getMaterialBySelect,
+  getSerialMaterialBySelect,
+  getMaterialByBarCode,
+  addSerialNumber,
+  editSerialNumber,
+  checkSerialNumber,
+  batAddSerialNumber,
+  addFunction,
+  editFunction,
+  checkFunction,
+  addSystemConfig,
+  editSystemConfig,
+  checkSystemConfig,
+  addUserBusiness,
+  editUserBusiness,
+  checkUserBusiness,
+  addUnit,
+  editUnit,
+  checkUnit,
+  addSupplier,
+  editSupplier,
+  checkSupplier,
+  findBySelectSup,
+  findBySelectCus,
+  findBySelectRetail,
+  findSupplierById,
+  findDepotHeadTotalPay,
+  findStockByDepotAndBarCode,
+  findAccountHeadTotalPay
+}
+
+
+
--- a/jshERP-web/src/api/index.js
+++ b/jshERP-web/src/api/index.js
@@ -0,0 +1,10 @@
+const api = {
+    Login: '/user/login',
+    Logout: '/sys/logout',
+    ForgePassword: '/auth/forge-password',
+    Register: '/auth/register',
+    SendSms: '/account/sms',
+    // get my info
+    UserInfo: '/user/info'
+}
+export default api
--- a/jshERP-web/src/api/login.js
+++ b/jshERP-web/src/api/login.js
@@ -0,0 +1,69 @@
+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: '/user/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() {
+  return axios({
+    url: '/user/logout',
+    method: 'get'
+  })
+}
+
+/**
+ * 第三方登录
+ * @param token
+ * @returns {*}
+ */
+export function thirdLogin(token) {
+  return axios({
+    url: `/thirdLogin/getLoginUser/${token}`,
+    method: 'get',
+    headers: {
+      'Content-Type': 'application/json;charset=UTF-8'
+    }
+  })
+}
--- a/jshERP-web/src/api/manage.js
+++ b/jshERP-web/src/api/manage.js
@@ -0,0 +1,177 @@
+import Vue from 'vue'
+import { axios } from '@/utils/request'
+
+const api = {
+  user: '/api/user',
+  role: '/api/role',
+  service: '/api/service',
+  permission: '/api/permission',
+  permissionNoPager: '/api/permission/no-pager'
+}
+
+export default api
+
+//post
+export function postAction(url,parameter) {
+  return axios({
+    url: url,
+    method:'post' ,
+    data: parameter
+  })
+}
+
+//post method= {post | put}
+export function httpAction(url,parameter,method) {
+  return axios({
+    url: url,
+    method:method ,
+    data: parameter
+  })
+}
+
+//put
+export function putAction(url,parameter) {
+  return axios({
+    url: url,
+    method:'put',
+    data: parameter
+  })
+}
+
+//get
+export function getAction(url,parameter) {
+  return axios({
+    url: url,
+    method: 'get',
+    params: parameter
+  })
+}
+
+//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
+  })
+}
+
+// id == 0 add     post
+// id != 0 update  put
+export function saveService(parameter) {
+  return axios({
+    url: api.service,
+    method: parameter.id == 0 ? 'post' : 'put',
+    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 {
+      let url = window.URL.createObjectURL(new Blob([data]))
+      let 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'
+  if(avatar && avatar.startsWith(subStr)){
+    return avatar;
+  }else{
+    if(avatar &&　avatar.length>0 && avatar.indexOf('[')==-1){
+      return window._CONFIG['staticDomainURL'] + "/" + avatar;
+    }
+  }
+}
--- a/jshERP-web/src/assets/background.svg
+++ b/jshERP-web/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>
--- a/jshERP-web/src/assets/checkcode.png
+++ b/jshERP-web/src/assets/checkcode.png
--- a/jshERP-web/src/assets/daiban.png
+++ b/jshERP-web/src/assets/daiban.png
--- a/jshERP-web/src/assets/duban.png
+++ b/jshERP-web/src/assets/duban.png
--- a/jshERP-web/src/assets/guaz.png
+++ b/jshERP-web/src/assets/guaz.png
--- a/jshERP-web/src/assets/less/JAreaLinkage.less
+++ b/jshERP-web/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;
+}
--- a/jshERP-web/src/assets/less/TableExpand.less
+++ b/jshERP-web/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;
+  }
+}
--- a/jshERP-web/src/assets/less/common.less
+++ b/jshERP-web/src/assets/less/common.less
@@ -0,0 +1,58 @@
+
+/*列表上方操作按钮区域*/
+.ant-card-body .table-operator {
+  margin-bottom: 0px;
+}
+/** 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 8px 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: 25px;
+  position: relative;
+}
+.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;
+}
--- a/jshERP-web/src/assets/less/index.less
+++ b/jshERP-web/src/assets/less/index.less
@@ -0,0 +1,28 @@
+/**
+ * 列表查询通用样式，移动端自适应
+ */
+.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;
+}
--- a/jshERP-web/src/assets/logo.png
+++ b/jshERP-web/src/assets/logo.png
--- a/jshERP-web/src/assets/logo.psd
+++ b/jshERP-web/src/assets/logo.psd
--- a/jshERP-web/src/assets/logo_top.png
+++ b/jshERP-web/src/assets/logo_top.png
--- a/jshERP-web/src/assets/nodata.png
+++ b/jshERP-web/src/assets/nodata.png
--- a/jshERP-web/src/assets/pdf4.jpg
+++ b/jshERP-web/src/assets/pdf4.jpg
--- a/jshERP-web/src/assets/zaiban.png
+++ b/jshERP-web/src/assets/zaiban.png
--- a/jshERP-web/src/cas/sso.js
+++ b/jshERP-web/src/cas/sso.js
@@ -0,0 +1,73 @@
+import Vue from 'vue'
+import { ACCESS_TOKEN } from "@/store/mutation-types"
+import store from '@/store'
+/**
+ * 单点登录
+ */
+const init = (callback) => {
+  console.log("-------单点登录开始-------");
+  let token = Vue.ls.get(ACCESS_TOKEN);
+  let st = getUrlParam("ticket");
+  let sevice = "http://"+window.location.host+"/";
+  if(token){
+    loginSuccess(callback);
+  }else{
+    if(st){
+      validateSt(st,sevice,callback);
+    }else{
+      let serviceUrl = encodeURIComponent(sevice);
+      window.location.href = window._CONFIG['casPrefixUrl']+"/login?service="+serviceUrl;
+    }
+  }
+  console.log("-------单点登录结束-------");
+};
+const SSO = {
+  init: init
+};
+
+function getUrlParam(paraName) {
+  let url = document.location.toString();
+  let arrObj = url.split("?");
+
+  if (arrObj.length > 1) {
+    let 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){
+  let params = {
+    ticket: ticket,
+    service:service
+  };
+  store.dispatch('ValidateLogin',params).then(res => {
+    //this.departConfirm(res)
+    if(res.success){
+      loginSuccess(callback);
+    }else{
+      let sevice = "http://"+window.location.host+"/";
+      let 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;
--- a/jshERP-web/src/components/AvatarList/Item.vue
+++ b/jshERP-web/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>
--- a/jshERP-web/src/components/AvatarList/List.vue
+++ b/jshERP-web/src/components/AvatarList/List.vue
@@ -0,0 +1,100 @@
+<!--
+<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>))
+        }
+        const itemList = items.map((item) => (
+          <li class={ classString }>{ item }</li>
+        ))
+        return itemList
+      }
+    },
+    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>
--- a/jshERP-web/src/components/AvatarList/index.js
+++ b/jshERP-web/src/components/AvatarList/index.js
@@ -0,0 +1,4 @@
+import AvatarList from './List'
+import "./index.less"
+
+export default AvatarList
--- a/jshERP-web/src/components/AvatarList/index.less
+++ b/jshERP-web/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;
+        }
+      }
+    }
+  }
+}
+
--- a/jshERP-web/src/components/ChartCard.vue
+++ b/jshERP-web/src/components/ChartCard.vue
@@ -0,0 +1,105 @@
+<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>
+    <div class="chart-card-content">
+      <div class="content-fix">
+        <slot></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>
--- a/jshERP-web/src/components/CountDown/CountDown.vue
+++ b/jshERP-web/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>
--- a/jshERP-web/src/components/CountDown/index.js
+++ b/jshERP-web/src/components/CountDown/index.js
@@ -0,0 +1,3 @@
+import CountDown from './CountDown'
+
+export default CountDown
--- a/jshERP-web/src/components/Ellipsis/Ellipsis.vue
+++ b/jshERP-web/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>
--- a/jshERP-web/src/components/Ellipsis/index.js
+++ b/jshERP-web/src/components/Ellipsis/index.js
@@ -0,0 +1,3 @@
+import Ellipsis from './Ellipsis'
+
+export default Ellipsis
--- a/jshERP-web/src/components/NumberInfo/NumberInfo.vue
+++ b/jshERP-web/src/components/NumberInfo/NumberInfo.vue
@@ -0,0 +1,54 @@
+<template>
+  <div :class="[prefixCls]">
+    <slot name="subtitle">
+      <div :class="[`${prefixCls}-subtitle`]">{{ typeof subTitle === 'string' ? subTitle : subTitle() }}</div>
+    </slot>
+    <div class="number-info-value">
+      <span>{{ total }}</span>
+      <span class="sub-total">
+        {{ subTotal }}
+        <icon :type="`caret-${status}`" />
+      </span>
+    </div>
+  </div>
+</template>
+
+<script>
+  import Icon from 'ant-design-vue/es/icon'
+
+  export default {
+    name: 'NumberInfo',
+    props: {
+      prefixCls: {
+        type: String,
+        default: 'ant-pro-number-info'
+      },
+      total: {
+        type: Number,
+        required: true
+      },
+      subTotal: {
+        type: Number,
+        required: true
+      },
+      subTitle: {
+        type: [String, Function],
+        default: ''
+      },
+      status: {
+        type: String,
+        default: 'up'
+      }
+    },
+    components: {
+      Icon
+    },
+    data () {
+      return {}
+    }
+  }
+</script>
+
+<style lang="less" scoped>
+  @import "index";
+</style>
--- a/jshERP-web/src/components/NumberInfo/index.js
+++ b/jshERP-web/src/components/NumberInfo/index.js
@@ -0,0 +1,3 @@
+import NumberInfo from './NumberInfo'
+
+export default NumberInfo
--- a/jshERP-web/src/components/NumberInfo/index.less
+++ b/jshERP-web/src/components/NumberInfo/index.less
@@ -0,0 +1,55 @@
+@import "../index";
+
+@numberInfo-prefix-cls: ~"@{ant-pro-prefix}-number-info";
+
+.@{numberInfo-prefix-cls} {
+
+  .ant-pro-number-info-subtitle {
+    color: @text-color-secondary;
+    font-size: @font-size-base;
+    height: 22px;
+    line-height: 22px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    word-break: break-all;
+    white-space: nowrap;
+  }
+
+  .number-info-value {
+    margin-top: 4px;
+    font-size: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    word-break: break-all;
+    white-space: nowrap;
+
+    & > span {
+      color: @heading-color;
+      display: inline-block;
+      line-height: 32px;
+      height: 32px;
+      font-size: 24px;
+      margin-right: 32px;
+    }
+
+    .sub-total {
+      color: @text-color-secondary;
+      font-size: @font-size-lg;
+      vertical-align: top;
+      margin-right: 0;
+      i {
+        font-size: 12px;
+        transform: scale(0.82);
+        margin-left: 4px;
+      }
+      :global {
+        .anticon-caret-up {
+          color: @red-6;
+        }
+        .anticon-caret-down {
+          color: @green-6;
+        }
+      }
+    }
+  }
+}
--- a/jshERP-web/src/components/README.md
+++ b/jshERP-web/src/components/README.md
@@ -0,0 +1,43 @@
+####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.jeecg包：该包下自定义了很多列表/表单中用到的组件 参考包下readme文件
+####8.jeecgbiz包：该包下定义了一些业务相关的组件，比如选择用户弹框,根据部门选择用户等等
+####9.layouts+page包：系统页面布局相关组件，比如登陆进去之后页面顶部显示什么，底部显示什么，菜单点击触发多个tab的布局等等 一般情况不需要修改
+####10.menun包：菜单组件，俩个，一个折叠菜单一个正常显示的菜单
+####11.NumberInfo:数字信息显示组件 如下图
+![输入图片说明](https://static.oschina.net/uploads/img/201904/12185858_uvJ5.png "在这里输入图片标题")
+####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)
--- a/jshERP-web/src/components/Trend/Trend.vue
+++ b/jshERP-web/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>
--- a/jshERP-web/src/components/Trend/index.js
+++ b/jshERP-web/src/components/Trend/index.js
@@ -0,0 +1,3 @@
+import Trend from './Trend.vue'
+
+export default Trend
--- a/jshERP-web/src/components/Trend/index.less
+++ b/jshERP-web/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;
+  }
+}
--- a/jshERP-web/src/components/_util/Area.js
+++ b/jshERP-web/src/components/_util/Area.js
@@ -0,0 +1,79 @@
+import { pcaa } from 'area-data'
+
+/**
+ * 省市区
+ */
+export default class Area {
+  /**
+   * 构造器
+   * @param express
+   */
+  constructor() {
+    let arr = []
+    const province = pcaa['86']
+    Object.keys(province).map(key=>{
+      arr.push({id:key, text:province[key], pid:'86'});
+      const city = pcaa[key];
+      Object.keys(city).map(key2=>{
+        arr.push({id:key2, text:city[key2], pid:key});
+        const qu = pcaa[key2];
+        Object.keys(qu).map(key3=>{
+          arr.push({id:key3, text:qu[key3], pid:key2});
+        })
+      })
+    })
+    this.all = arr;
+  }
+
+  get pca(){
+    return this.all;
+  }
+
+  getCode(text){
+    if(!text || text.length==0){
+      return ''
+    }
+    for(let item of this.all){
+      if(item.text === text){
+        return item.id;
+      }
+    }
+  }
+
+  getText(code){
+    if(!code || code.length==0){
+      return ''
+    }
+    let arr = []
+    this.getAreaBycode(code,arr);
+    return arr.join('/')
+  }
+
+  getRealCode(code){
+    let arr = []
+    this.getPcode(code, arr)
+    return arr;
+  }
+
+  getPcode(id, arr){
+    for(let item of this.all){
+      if(item.id === id){
+        arr.unshift(id)
+        if(item.pid != '86'){
+          this.getPcode(item.pid,arr)
+        }
+      }
+    }
+  }
+
+  getAreaBycode(code,arr){
+    //console.log("this.all.length",this.all)
+    for(let item of this.all){
+      if(item.id === code){
+        arr.unshift(item.text);
+        this.getAreaBycode(item.pid,arr)
+      }
+    }
+  }
+
+}
--- a/jshERP-web/src/components/_util/StringUtil.js
+++ b/jshERP-web/src/components/_util/StringUtil.js
@@ -0,0 +1,35 @@
+/**
+ * 获取字符串的长度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
+  }, '')
+}
--- a/jshERP-web/src/components/_util/util.js
+++ b/jshERP-web/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() !== ''))
+}
--- a/jshERP-web/src/components/chart/AreaChartTy.vue
+++ b/jshERP-web/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>
--- a/jshERP-web/src/components/chart/Bar.vue
+++ b/jshERP-web/src/components/chart/Bar.vue
@@ -0,0 +1,50 @@
+<template>
+  <div :style="{ padding: '0 0 32px 32px' }">
+    <h3 :style="{ marginBottom: '20px' }">{{ title }}</h3>
+    <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>
--- a/jshERP-web/src/components/chart/BarAndLine.vue
+++ b/jshERP-web/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>
--- a/jshERP-web/src/components/chart/BarMultid.vue
+++ b/jshERP-web/src/components/chart/BarMultid.vue
@@ -0,0 +1,88 @@
+<template>
+  <div :style="{ padding: '0 0 32px 32px' }">
+    <h4 :style="{ marginBottom: '20px' }">{{ title }}</h4>
+    <v-chart :data="data" :height="height" :force-fit="true" :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: 'Jeecg', 'Jan.': 18.9, 'Feb.': 28.8, 'Mar.': 39.3, 'Apr.': 81.4, 'May': 47, 'Jun.': 20.3, 'Jul.': 24, 'Aug.': 35.6 },
+          { type: 'Jeebt', '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 使用不了 - 和 / 所以替换下
+        let rows = dv.rows.map(row => {
+          if (typeof row.x === 'string') {
+            row.x = row.x.replace(/[-/]/g, '_')
+          }
+          return row
+        })
+        // 替换别名
+        rows.forEach(row => {
+          for (let item of this.aliases) {
+            if (item.field === row.type) {
+              row.type = item.alias
+              break
+            }
+          }
+        })
+        return rows
+      }
+    }
+  }
+</script>
+
+<style scoped>
+
+</style>
--- a/jshERP-web/src/components/chart/DashChartDemo.vue
+++ b/jshERP-web/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>
--- a/jshERP-web/src/components/chart/IndexBar.vue
+++ b/jshERP-web/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>
--- a/jshERP-web/src/components/chart/LineChartMultid.vue
+++ b/jshERP-web/src/components/chart/LineChartMultid.vue
@@ -0,0 +1,94 @@
+<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', jeecg: 7.0, jeebt: 3.9 },
+          { type: 'Feb', jeecg: 6.9, jeebt: 4.2 },
+          { type: 'Mar', jeecg: 9.5, jeebt: 5.7 },
+          { type: 'Apr', jeecg: 14.5, jeebt: 8.5 },
+          { type: 'May', jeecg: 18.4, jeebt: 11.9 },
+          { type: 'Jun', jeecg: 21.5, jeebt: 15.2 },
+          { type: 'Jul', jeecg: 25.2, jeebt: 17.0 },
+          { type: 'Aug', jeecg: 26.5, jeebt: 16.6 },
+          { type: 'Sep', jeecg: 23.3, jeebt: 14.2 },
+          { type: 'Oct', jeecg: 18.3, jeebt: 10.3 },
+          { type: 'Nov', jeecg: 13.9, jeebt: 6.6 },
+          { type: 'Dec', jeecg: 9.6, jeebt: 4.8 }
+        ]
+      },
+      fields: {
+        type: Array,
+        default: () => ['jeecg', 'jeebt']
+      },
+      // 别名，需要的格式：[{field:'name',alias:'姓名'}, {field:'sex',alias:'性别'}]
+      aliases:{
+        type: Array,
+        default: () => []
+      },
+      height: {
+        type: Number,
+        default: 254
+      }
+    },
+    data() {
+      return {
+        scale: [{
+          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'
+        })
+        let rows =  dv.rows
+        // 替换别名
+        rows.forEach(row => {
+          for (let item of this.aliases) {
+            if (item.field === row.x) {
+              row.x = item.alias
+              break
+            }
+          }
+        })
+        return rows
+      }
+    }
+  }
+</script>
+
+<style scoped>
+
+</style>
--- a/jshERP-web/src/components/chart/Liquid.vue
+++ b/jshERP-web/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>
--- a/jshERP-web/src/components/chart/MiniArea.vue
+++ b/jshERP-web/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>
--- a/jshERP-web/src/components/chart/MiniBar.vue
+++ b/jshERP-web/src/components/chart/MiniBar.vue
@@ -0,0 +1,76 @@
+<template>
+  <div :style="{'width':width==null?'auto':width+'px'}">
+    <v-chart :forceFit="width==null" :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>
--- a/jshERP-web/src/components/chart/MiniProgress.vue
+++ b/jshERP-web/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>
--- a/jshERP-web/src/components/chart/Pie.vue
+++ b/jshERP-web/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>
+  const DataSet = require('@antv/data-set')
+  import { ChartEventMixins } from './mixins/ChartMixins'
+
+  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() {
+        let dv = new DataSet.View().source(this.dataSource)
+        // 计算数据百分比
+        dv.transform({
+          type: 'percent',
+          field: 'count',
+          dimension: 'item',
+          as: 'percent'
+        })
+        return dv.rows
+      }
+    }
+  }
+</script>
--- a/jshERP-web/src/components/chart/README.md
+++ b/jshERP-web/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": "Jeecg", // 列名
+        "Jan.": 18.9,
+        "Feb.": 28.8,
+        "Mar.": 39.3,
+        "Apr.": 81.4,
+        "May": 47,
+        "Jun.": 20.3,
+        "Jul.": 24,
+        "Aug.": 35.6
+    },
+    {
+        "type": "Jeebt",
+        "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
+["jeecg", "jeebt"]
+```
+
+##### dataSource 示例
+
+```json
+[
+    {
+        "type": "Jan", // 列名
+        "jeecg": 7,
+        "jeebt": 3.9
+    },
+    { "type": "Feb", "jeecg": 6.9, "jeebt": 4.2 },
+    { "type": "Mar", "jeecg": 9.5, "jeebt": 5.7 },
+    { "type": "Apr", "jeecg": 14.5, "jeebt": 8.5 },
+    { "type": "May", "jeecg": 18.4, "jeebt": 11.9 },
+    { "type": "Jun", "jeecg": 21.5, "jeebt": 15.2 },
+    { "type": "Jul", "jeecg": 25.2, "jeebt": 17 },
+    { "type": "Aug", "jeecg": 26.5, "jeebt": 16.6 },
+    { "type": "Sep", "jeecg": 23.3, "jeebt": 14.2 },
+    { "type": "Oct", "jeecg": 18.3, "jeebt": 10.3 },
+    { "type": "Nov", "jeecg": 13.9, "jeebt": 6.6 },
+    { "type": "Dec", "jeecg": 9.6, "jeebt": 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 }
+]
+```
--- a/jshERP-web/src/components/chart/Radar.vue
+++ b/jshERP-web/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>
--- a/jshERP-web/src/components/chart/RankList.vue
+++ b/jshERP-web/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>
--- a/jshERP-web/src/components/chart/StackBar.vue
+++ b/jshERP-web/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>
--- a/jshERP-web/src/components/chart/TransferBar.vue
+++ b/jshERP-web/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>
--- a/jshERP-web/src/components/chart/Trend.vue
+++ b/jshERP-web/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 () {
+      let 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>
--- a/jshERP-web/src/components/chart/chart.less
+++ b/jshERP-web/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;*/
+  }
+}
--- a/jshERP-web/src/components/chart/chart.scss
+++ b/jshERP-web/src/components/chart/chart.scss
@@ -0,0 +1,13 @@
+.antv-chart-mini {
+  position: relative;
+  width: 100%;
+
+  .chart-wrapper {
+    position: absolute;
+    bottom: -28px;
+    width: 100%;
+
+/*    margin: 0 -5px;
+    overflow: hidden;*/
+  }
+}
--- a/jshERP-web/src/components/chart/mixins/ChartMixins.js
+++ b/jshERP-web/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)
+    },
+  }
+}
--- a/jshERP-web/src/components/dict/JDictSelectTag.vue
+++ b/jshERP-web/src/components/dict/JDictSelectTag.vue
@@ -0,0 +1,103 @@
+<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 = "(target) => target.parentNode" :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,
+      triggerChange: Boolean,
+      disabled: Boolean,
+      value: [String, Number],
+      type: String
+    },
+    data() {
+      return {
+        dictOptions: [],
+        tagType:""
+      }
+    },
+    watch:{
+      dictCode:{
+        immediate:true,
+        handler() {
+          this.initDictData()
+        },
+      }
+    },
+    created() {
+      // console.log(this.dictCode);
+      if(!this.type || this.type==="list"){
+        this.tagType = "select"
+      }else{
+        this.tagType = this.type
+      }
+      //获取字典数据
+      // this.initDictData();
+    },
+    computed: {
+      getValueSting(){
+        return this.value != null ? this.value.toString() : null;
+      },
+    },
+    methods: {
+      initDictData() {
+        //优先从缓存中读取字典配置
+        if(getDictItemsFromCache(this.dictCode)){
+          this.dictOptions = getDictItemsFromCache(this.dictCode);
+          return
+        }
+
+        //根据字典Code, 初始化字典数组
+        ajaxGetDictItems(this.dictCode, null).then((res) => {
+          if (res.success) {
+//                console.log(res.result);
+            this.dictOptions = res.result;
+          }
+        })
+      },
+      handleInput(e) {
+        let val;
+        if(this.tagType=="radio"){
+          val = e.target.value
+        }else{
+          val = e
+        }
+        console.log(val);
+        if(this.triggerChange){
+          this.$emit('change', val);
+        }else{
+          this.$emit('input', val);
+        }
+      },
+      setCurrentDictOptions(dictOptions){
+        this.dictOptions = dictOptions
+      },
+      getCurrentDictOptions(){
+        return this.dictOptions
+      }
+    }
+  }
+</script>
+
+<style scoped>
+</style>
--- a/jshERP-web/src/components/dict/JDictSelectUtil.js
+++ b/jshERP-web/src/components/dict/JDictSelectUtil.js
@@ -0,0 +1,142 @@
+/**
+ * 字典 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)){
+    let res = {}
+    res.result = getDictItemsFromCache(dictCode);
+    res.success = true;
+    return res;
+  }
+  //获取字典数组
+  let res = await ajaxGetDictItems(dictCode);
+  return res;
+}
+
+/**
+ * 字典值替换文本通用方法
+ * @param dictOptions  字典数组
+ * @param text  字典值
+ * @return String
+ */
+export function filterDictText(dictOptions, text) {
+  // --update-begin----author:sunjianlei---date:20200323------for: 字典翻译 text 允许逗号分隔 ---
+  if (text != null && dictOptions instanceof Array) {
+    let result = []
+    // 允许多个逗号分隔
+    let splitText = text.toString().trim().split(',')
+    for (let txt of splitText) {
+      let dictText = txt
+      for (let dictItem of dictOptions) {
+        if (txt === dictItem.value.toString()) {
+          dictText = dictItem.text
+          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 (let dictItem of dictOptions) {
+        if (text == dictItem.value) {
+          return dictItem.text
+        }
+      }
+    }
+  }
+
+  if(!text || text=='null' || !dictOptions || dictOptions.length==0){
+    return ""
+  }
+  let re = "";
+  text = text.toString()
+  let 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);
+}
+
+/**
+ * 翻译字段值对应的文本
+ * @param children
+ * @returns string
+ */
+export function filterDictTextByCache(dictCode, key) {
+  if(key==null ||key.length==0){
+    return;
+  }
+  if (!dictCode) {
+    return '字典Code不能为空!';
+  }
+   //优先从缓存中读取字典配置
+  if(getDictItemsFromCache(dictCode)){
+    let 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)){
+      let desformDictItems = getDictItemsFromCache(dictCode).map(item => ({...item, label: item.text}))
+      return desformDictItems;
+    }
+
+    //缓存中没有，就请求后台
+    return await ajaxGetDictItems(dictCode, params).then(({success, result}) => {
+      if (success) {
+        let res = result.map(item => ({...item, label: item.text}))
+        console.log('------- 从DB中获取到了字典-------dictCode : ', dictCode, res)
+        return Promise.resolve(res)
+      } else {
+        console.error('getDictItems error: : ', res)
+        return Promise.resolve([])
+      }
+    }).catch((res) => {
+      console.error('getDictItems error: ', res)
+      return Promise.resolve([])
+    })
+}
--- a/jshERP-web/src/components/dict/JMultiSelectTag.vue
+++ b/jshERP-web/src/components/dict/JMultiSelectTag.vue
@@ -0,0 +1,107 @@
+<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="(node) => node.parentNode"
+    allowClear>
+    <a-select-option
+      v-for="(item,index) in dictOptions"
+      :key="index"
+      :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: 'JMultiSelectTag',
+    props: {
+      dictCode: String,
+      placeholder: String,
+      disabled: Boolean,
+      value: String,
+      type: String,
+      options:Array
+    },
+    data() {
+      return {
+        dictOptions: [],
+        tagType:"",
+        arrayValue:!this.value?[]:this.value.split(",")
+      }
+    },
+    created() {
+      if(!this.type || this.type==="list_multi"){
+        this.tagType = "select"
+      }else{
+        this.tagType = this.type
+      }
+      //获取字典数据
+      //this.initDictData();
+    },
+    watch:{
+      options: function(val){
+        this.setCurrentDictOptions(val);
+      },
+      dictCode:{
+        immediate:true,
+        handler() {
+          this.initDictData()
+        },
+      },
+      value (val) {
+        if(!val){
+          this.arrayValue = []
+        }else{
+          this.arrayValue = this.value.split(",")
+        }
+      }
+    },
+    methods: {
+      initDictData() {
+        if(this.options && this.options.length>0){
+          this.dictOptions = [...this.options]
+        }else{
+          //优先从缓存中读取字典配置
+          if(getDictItemsFromCache(this.dictCode)){
+            this.dictOptions = getDictItemsFromCache(this.dictCode);
+            return
+          }
+          //根据字典Code, 初始化字典数组
+          ajaxGetDictItems(this.dictCode, null).then((res) => {
+            if (res.success) {
+              this.dictOptions = res.result;
+            }
+          })
+        }
+
+      },
+      onChange (selectedValue) {
+        this.$emit('change', selectedValue.join(","));
+      },
+      setCurrentDictOptions(dictOptions){
+        this.dictOptions = dictOptions
+      },
+      getCurrentDictOptions(){
+        return this.dictOptions
+      }
+    },
+    model: {
+      prop: 'value',
+      event: 'change'
+    }
+  }
+</script>
--- a/jshERP-web/src/components/dict/JSearchSelectTag.vue
+++ b/jshERP-web/src/components/dict/JSearchSelectTag.vue
@@ -0,0 +1,201 @@
+<template>
+
+  <a-select
+    v-if="async"
+    showSearch
+    labelInValue
+    :disabled="disabled"
+    :getPopupContainer="(node) => node.parentNode"
+    @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="(node) => node.parentNode"
+    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
+      }
+    },
+    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()
+        }
+      }
+    },
+    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){
+                let 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}).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){
+                let arr = this.dict.split(',')
+                if(arr[0].indexOf('where')>0){
+                  let 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;
+                  }
+                })
+            }
+          }
+        }
+      },
+      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){
+        this.selectedAsyncValue = selectedObj
+        this.selectedValue = selectedObj.key
+        this.callback()
+      },
+      callback(){
+        this.$emit('change', this.selectedValue);
+      },
+      setCurrentDictOptions(dictOptions){
+        this.options = dictOptions
+      },
+      getCurrentDictOptions(){
+        return this.options
+      }
+
+    },
+    model: {
+      prop: 'value',
+      event: 'change'
+    }
+  }
+</script>
+
+<style scoped>
+
+</style>
--- a/jshERP-web/src/components/dict/README.md
+++ b/jshERP-web/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>
+```
+
--- a/jshERP-web/src/components/dict/index.js
+++ b/jshERP-web/src/components/dict/index.js
@@ -0,0 +1,7 @@
+import T from './JDictSelectTag.vue'
+const JDictSelectTag = {
+  install: function (Vue) {
+    Vue.component('JDictSelectTag',T);
+  }
+}
+export default JDictSelectTag;
--- a/jshERP-web/src/components/index.less
+++ b/jshERP-web/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;
--- a/jshERP-web/src/components/jeecg/JAreaLinkage.vue
+++ b/jshERP-web/src/components/jeecg/JAreaLinkage.vue
@@ -0,0 +1,156 @@
+<template>
+  <div v-if="!reloading" class="j-area-linkage">
+    <area-cascader
+      v-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 { pcaa } from 'area-data'
+  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,
+        innerValue: [],
+        usedListeners: ['change'],
+        enums: {
+          type: ['cascader', 'select']
+        },
+        reloading: false,
+        areaData:''
+      }
+    },
+    computed: {
+      _listeners() {
+        let 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: {
+      /** 通过 value 反推 options */
+      loadDataByValue(value) {
+        if(!value || value.length==0){
+          this.innerValue = []
+          this.reloading = true;
+          setTimeout(()=>{
+            this.reloading = false
+          },100)
+        }else{
+          this.initAreaData();
+          let arr = this.areaData.getRealCode(value);
+          this.innerValue = arr
+        }
+      },
+      /** 通过地区code获取子级 */
+      loadDataByCode(value) {
+        let options = []
+        let data = pcaa[value]
+        if (data) {
+          for (let key in data) {
+            if (data.hasOwnProperty(key)) {
+              options.push({ value: key, label: data[key], })
+            }
+          }
+          return options
+        } else {
+          return []
+        }
+      },
+      /** 判断是否有子节点 */
+      hasChildren(options) {
+        options.forEach(option => {
+          let data = this.loadDataByCode(option.value)
+          option.isLeaf = data.length === 0
+        })
+      },
+      handleChange(values) {
+        let value = values[values.length - 1]
+        this.$emit('change', value)
+      },
+      initAreaData(){
+        if(!this.areaData){
+          this.areaData = new Area();
+        }
+      },
+
+    },
+    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>
--- a/jshERP-web/src/components/jeecg/JCategorySelect.vue
+++ b/jshERP-web/src/components/jeecg/JCategorySelect.vue
@@ -0,0 +1,238 @@
+<template>
+  <a-tree-select
+    allowClear
+    labelInValue
+    style="width: 100%"
+    :disabled="disabled"
+    :dropdownStyle="{ maxHeight: '400px', overflow: 'auto' }"
+    :placeholder="placeholder"
+    :loadData="asyncLoadTreeData"
+    :value="treeValue"
+    :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:"",
+
+      }
+    },
+    watch: {
+      value () {
+        this.loadItemByCode()
+      },
+      pcode(){
+        this.loadRoot();
+      }
+    },
+    created(){
+      this.validateProp().then(()=>{
+        this.loadRoot()
+        this.loadItemByCode()
+      })
+    },
+    methods: {
+      /**加载一级节点 */
+      loadRoot(){
+        let 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(let 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){
+              let 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){
+        let obj = {}
+        if(this.back){
+          obj[this.back] = label
+        }
+        this.$emit('change', value, obj)
+      },
+      asyncLoadTreeData (treeNode) {
+        return new Promise((resolve) => {
+          if (treeNode.$vnode.children) {
+            resolve()
+            return
+          }
+          let pid = treeNode.$vnode.key
+          let param = {
+            pid:pid,
+            condition:this.condition
+          }
+          getAction(this.url,param).then(res=>{
+            if(res.success){
+              for(let 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(let 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){
+          this.$emit('change', '');
+          this.treeValue = ''
+        } else if (value instanceof Array) {
+          //this.$emit('change', value.map(item => item.value).join(','))
+          //this.treeValue = value
+        } else {
+          this.backValue(value.value,value.label)
+          this.treeValue = value
+        }
+      },
+      getCurrTreeData(){
+        return this.treeData
+      },
+      validateProp(){
+        let mycondition = this.condition
+        return new Promise((resolve,reject)=>{
+          if(!mycondition){
+            resolve();
+          }else{
+            try {
+              let 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>
--- a/jshERP-web/src/components/jeecg/JCheckbox.vue
+++ b/jshERP-web/src/components/jeecg/JCheckbox.vue
@@ -0,0 +1,43 @@
+<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>
--- a/jshERP-web/src/components/jeecg/JCodeEditor.vue
+++ b/jshERP-web/src/components/jeecg/JCodeEditor.vue
@@ -0,0 +1,429 @@
+<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'
+
+  // 尝试获取全局实例
+  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
+      }
+    },
+    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) {
+              // 获取具体的语法类型对象
+              let 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
+        }
+      },
+      fullScreenParentProps(){
+        let props = {
+          class: ['full-screen-parent', this.fullCoder ? 'full-screen' : ''],
+          style: {}
+        }
+        if (this.fullCoder) {
+          props.style['z-index'] = this.zIndex
+        }
+        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)
+        }else{
+          this.coder.setValue('')
+          this.hasCode=false
+        }
+        // 支持双向绑定
+        this.coder.on('change', (coder) => {
+          this.code = coder.getValue()
+          if(this.code){
+            this.hasCode=true
+          }else{
+            this.hasCode=false
+          }
+          if (this.$emit) {
+            this.$emit('input', this.code)
+          }
+        })
+        this.coder.on('focus', () => {
+          this.hasCode=true
+        })
+        this.coder.on('blur', () => {
+          if(this.code){
+            this.hasCode=true
+          }else{
+            this.hasCode=false
+          }
+        })
+
+       /* 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) => {
+          // 所有的值都忽略大小写，方便比较
+          let currentLanguage = language.toLowerCase()
+          let currentLabel = mode.label.toLowerCase()
+          let currentValue = mode.value.toLowerCase()
+
+          // 由于真实值可能不规范，例如 java 的真实值是 x-java ，所以讲 value 和 label 同时和传入语法进行比较
+          return currentLabel === currentLanguage || currentValue === currentLanguage
+        })
+      },
+      _getCoder() {
+        let _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}`)
+
+        // 获取修改后的语法
+        let 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;
+    }
+  }
+
+  /* 全屏样式 */
+  .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 {
+      min-height: 120px;
+      max-height: 320px;
+      overflow:hidden;
+    }
+
+  }
+
+.CodeMirror-cursor{
+  height:18.4px !important;
+}
+</style>
--- a/jshERP-web/src/components/jeecg/JCron.vue
+++ b/jshERP-web/src/components/jeecg/JCron.vue
@@ -0,0 +1,65 @@
+<template>
+  <div class="components-input-demo-presuffix">
+    <a-input @click="openModal" placeholder="corn表达式" v-model="cron" @change="handleOK">
+      <a-icon slot="prefix" type="schedule" title="corn控件"/>
+      <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>
--- a/jshERP-web/src/components/jeecg/JDate.vue
+++ b/jshERP-web/src/components/jeecg/JDate.vue
@@ -0,0 +1,85 @@
+<template>
+  <a-date-picker
+    :disabled="disabled || readOnly"
+    :placeholder="placeholder"
+    @change="handleDateChange"
+    :value="momVal"
+    :showTime="showTime"
+    :format="dateFormat"
+    :getCalendarContainer="getCalendarContainer"
+  />
+</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 HH:mm:ss',
+        required: false
+      },
+      //此属性可以被废弃了
+      triggerChange:{
+        type: Boolean,
+        required: false,
+        default: false
+      },
+      readOnly:{
+        type: Boolean,
+        required: false,
+        default: false
+      },
+      disabled:{
+        type: Boolean,
+        required: false,
+        default: false
+      },
+      showTime:{
+        type: Boolean,
+        required: false,
+        default: false
+      },
+      getCalendarContainer: {
+        type: Function,
+        default: (node) => node.parentNode
+      }
+    },
+    data () {
+      let dateStr = this.value;
+      return {
+        decorator:"",
+        momVal:!dateStr?null:moment(dateStr,this.dateFormat)
+      }
+    },
+    watch: {
+      value (val) {
+        if(!val){
+          this.momVal = null
+        }else{
+          this.momVal = moment(val,this.dateFormat)
+        }
+      }
+    },
+    methods: {
+      moment,
+      handleDateChange(mom,dateStr){
+        this.$emit('change', dateStr);
+      }
+    },
+    //2.2新增 在组件内定义 指定父组件调用时候的传值属性和事件类型 这个牛逼
+    model: {
+      prop: 'value',
+      event: 'change'
+    }
+  }
+</script>
--- a/jshERP-web/src/components/jeecg/JEditableTable.vue
+++ b/jshERP-web/src/components/jeecg/JEditableTable.vue
--- a/jshERP-web/src/components/jeecg/JEditor.vue
+++ b/jshERP-web/src/components/jeecg/JEditor.vue
@@ -0,0 +1,118 @@
+<template>
+  <div class="tinymce-editor">
+    <editor
+      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 { uploadAction,getFileAccessHttpUrl } from '@/api/manage'
+  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) => {
+            let formData = new FormData()
+            formData.append('file', blobInfo.blob(), blobInfo.filename());
+            formData.append('biz', "jeditor");
+            formData.append("jeditor","1");
+            uploadAction(window._CONFIG['domianURL']+"/sys/common/upload", formData).then((res) => {
+              if (res.success) {
+                if(res.message == 'local'){
+                  const img = 'data:image/jpeg;base64,' + blobInfo.base64()
+                  success(img)
+                }else{
+                  let img = getFileAccessHttpUrl(res.message)
+                  success(img)
+                }
+              }
+            })
+          }
+        },
+        myValue: this.value
+      }
+    },
+    mounted() {
+      tinymce.init({})
+    },
+    methods: {
+
+      onClick(e) {
+        this.$emit('onClick', e, tinymce)
+      },
+      //可以添加一些自己的自定义事件，如清空内容
+      clear() {
+        this.myValue = ''
+      }
+    },
+    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>
--- a/jshERP-web/src/components/jeecg/JEllipsis.vue
+++ b/jshERP-web/src/components/jeecg/JEllipsis.vue
@@ -0,0 +1,29 @@
+<template>
+  <a-tooltip placement="topLeft">
+    <template slot="title">
+      <span>{{value}}</span>
+    </template>
+    {{ value | ellipsis(length) }}
+  </a-tooltip>
+</template>
+
+<script>
+  export default {
+    name: 'JEllipsis',
+    props: {
+      value: {
+        type: String,
+        required: false,
+      },
+      length: {
+        type: Number,
+        required: false,
+        default: 25,
+      }
+    }
+  }
+</script>
+
+<style scoped>
+
+</style>
--- a/jshERP-web/src/components/jeecg/JFormContainer.vue
+++ b/jshERP-web/src/components/jeecg/JFormContainer.vue
@@ -0,0 +1,61 @@
+<template>
+  <div :class="disabled?'jeecg-form-container-disabled':''">
+    <fieldset :disabled="disabled">
+      <slot name="detail"></slot>
+    </fieldset>
+    <slot name="edit"></slot>
+    <fieldset disabled>
+      <slot></slot>
+    </fieldset>
+  </div>
+</template>
+
+<script>
+  /**
+   * 使用方法
+   * 在form下直接写这个组件就行了，
+   *<a-form layout="inline" :form="form" >
+   *     <j-form-container :disabled="true">
+   *         <!-- 表单内容省略..... -->
+   *     </j-form-container>
+   *</a-form>
+   */
+  export default {
+    name: 'JFormContainer',
+    props:{
+      disabled:{
+        type:Boolean,
+        default:false,
+        required:false
+      }
+    },
+    mounted(){
+      console.log("我是表单禁用专用组件,但是我并不支持表单中iframe的内容禁用")
+    }
+  }
+</script>
+<style>
+  .jeecg-form-container-disabled{
+    cursor: not-allowed;
+  }
+  .jeecg-form-container-disabled fieldset[disabled] {
+    -ms-pointer-events: none;
+    pointer-events: none;
+  }
+  .jeecg-form-container-disabled .ant-select{
+    -ms-pointer-events: none;
+    pointer-events: none;
+  }
+
+  .jeecg-form-container-disabled .ant-upload-select{display:none}
+  .jeecg-form-container-disabled .ant-upload-list{cursor:grabbing}
+  .jeecg-form-container-disabled fieldset[disabled] .ant-upload-list{
+    -ms-pointer-events: auto !important;
+    pointer-events: auto !important;
+  }
+
+  .jeecg-form-container-disabled .ant-upload-list-item-actions .anticon-delete,
+  .jeecg-form-container-disabled .ant-upload-list-item .anticon-close{
+    display: none;
+  }
+</style>
--- a/jshERP-web/src/components/jeecg/JGraphicCode.vue
+++ b/jshERP-web/src/components/jeecg/JGraphicCode.vue
@@ -0,0 +1,202 @@
+<template>
+  <div class="gc-canvas" @click="reloadPic">
+    <canvas id="gc-canvas" :width="contentWidth" :height="contentHeight"></canvas>
+  </div>
+</template>
+
+<script>
+  import { getAction } from '@/api/manage'
+
+  export default {
+    name: 'JGraphicCode',
+    props: {
+      length:{
+        type: Number,
+        default: 4
+      },
+      fontSizeMin: {
+        type: Number,
+        default: 20
+      },
+      fontSizeMax: {
+        type: Number,
+        default: 45
+      },
+      backgroundColorMin: {
+        type: Number,
+        default: 180
+      },
+      backgroundColorMax: {
+        type: Number,
+        default: 240
+      },
+      colorMin: {
+        type: Number,
+        default: 50
+      },
+      colorMax: {
+        type: Number,
+        default: 160
+      },
+      lineColorMin: {
+        type: Number,
+        default: 40
+      },
+      lineColorMax: {
+        type: Number,
+        default: 180
+      },
+      dotColorMin: {
+        type: Number,
+        default: 0
+      },
+      dotColorMax: {
+        type: Number,
+        default: 255
+      },
+      contentWidth: {
+        type: Number,
+        default:136
+      },
+      contentHeight: {
+        type: Number,
+        default: 38
+      },
+      remote:{
+        type:Boolean,
+        default:false,
+        required:false
+      }
+    },
+    methods: {
+      // 生成一个随机数
+      randomNum (min, max) {
+        return Math.floor(Math.random() * (max - min) + min)
+      },
+      // 生成一个随机的颜色
+      randomColor (min, max) {
+        let r = this.randomNum(min, max)
+        let g = this.randomNum(min, max)
+        let b = this.randomNum(min, max)
+        return 'rgb(' + r + ',' + g + ',' + b + ')'
+      },
+      drawPic () {
+        this.randomCode().then(()=>{
+          let canvas = document.getElementById('gc-canvas')
+          let ctx = canvas.getContext('2d')
+          ctx.textBaseline = 'bottom'
+          // 绘制背景
+          ctx.fillStyle = this.randomColor(this.backgroundColorMin, this.backgroundColorMax)
+          ctx.fillRect(0, 0, this.contentWidth, this.contentHeight)
+          // 绘制文字
+          for (let i = 0; i < this.code.length; i++) {
+            this.drawText(ctx, this.code[i], i)
+          }
+          this.drawLine(ctx)
+          this.drawDot(ctx)
+          this.$emit("success",this.code)
+        })
+      },
+      drawText (ctx, txt, i) {
+        ctx.fillStyle = this.randomColor(this.colorMin, this.colorMax)
+        let fontSize = this.randomNum(this.fontSizeMin, this.fontSizeMax)
+        ctx.font = fontSize + 'px SimHei'
+        let padding = 10;
+        let offset = (this.contentWidth-40)/(this.code.length-1)
+        let x=padding;
+        if(i>0){
+          x = padding+(i*offset)
+        }
+        //let x = (i + 1) * (this.contentWidth / (this.code.length + 1))
+        let y = this.randomNum(this.fontSizeMax, this.contentHeight - 5)
+        if(fontSize>40){
+          y=40
+        }
+        var deg = this.randomNum(-10,10)
+        // 修改坐标原点和旋转角度
+        ctx.translate(x, y)
+        ctx.rotate(deg * Math.PI / 180)
+        ctx.fillText(txt, 0, 0)
+        // 恢复坐标原点和旋转角度
+        ctx.rotate(-deg * Math.PI / 180)
+        ctx.translate(-x, -y)
+      },
+      drawLine (ctx) {
+        // 绘制干扰线
+        for (let i = 0; i <1; i++) {
+          ctx.strokeStyle = this.randomColor(this.lineColorMin, this.lineColorMax)
+          ctx.beginPath()
+          ctx.moveTo(this.randomNum(0, this.contentWidth), this.randomNum(0, this.contentHeight))
+          ctx.lineTo(this.randomNum(0, this.contentWidth), this.randomNum(0, this.contentHeight))
+          ctx.stroke()
+        }
+      },
+      drawDot (ctx) {
+        // 绘制干扰点
+        for (let i = 0; i < 100; i++) {
+          ctx.fillStyle = this.randomColor(0, 255)
+          ctx.beginPath()
+          ctx.arc(this.randomNum(0, this.contentWidth), this.randomNum(0, this.contentHeight), 1, 0, 2 * Math.PI)
+          ctx.fill()
+        }
+      },
+      reloadPic(){
+        this.drawPic()
+      },
+      randomCode(){
+        return new Promise((resolve)=>{
+          if(this.remote==true){
+            getAction("/sys/getCheckCode").then(res=>{
+              if(res.success){
+                this.checkKey = res.result.key
+                this.code = window.atob(res.result.code)
+                resolve();
+              }else{
+                this.$message.error("生成验证码错误,请联系系统管理员")
+                this.code = 'BUG'
+                resolve();
+              }
+            }).catch(()=>{
+              console.log("生成验证码连接服务器异常")
+              this.code = 'BUG'
+              resolve();
+            })
+          }else{
+            this.randomLocalCode();
+            resolve();
+          }
+        })
+      },
+      randomLocalCode(){
+        let random = ''
+        //去掉了I l i o O
+        let str = "QWERTYUPLKJHGFDSAZXCVBNMqwertyupkjhgfdsazxcvbnm1234567890"
+        for(let i = 0; i < this.length; i++) {
+          let index = Math.floor(Math.random()*57);
+          random += str[index];
+        }
+        this.code = random
+      },
+      getLoginParam(){
+        return {
+          checkCode:this.code,
+          checkKey:this.checkKey
+        }
+      }
+    },
+    mounted () {
+      this.drawPic()
+    },
+    data(){
+      return {
+        code:"",
+        checkKey:""
+      }
+    }
+
+  }
+</script>
+
+<style scoped>
+
+</style>
--- a/jshERP-web/src/components/jeecg/JImageUpload.vue
+++ b/jshERP-web/src/components/jeecg/JImageUpload.vue
@@ -0,0 +1,201 @@
+<template>
+  <a-upload
+    name="file"
+    listType="picture-card"
+    :multiple="isMultiple"
+    :action="uploadAction"
+    :headers="headers"
+    :data="{biz:bizPath}"
+    :fileList="fileList"
+    :beforeUpload="beforeUpload"
+    :disabled="disabled"
+    :isMultiple="isMultiple"
+    :showUploadList="isMultiple"
+    @change="handleChange"
+    @preview="handlePreview">
+    <img v-if="!isMultiple && picUrl" :src="getAvatarView()" style="height:104px;max-width:300px"/>
+    <div v-else >
+      <a-icon :type="uploadLoading ? 'loading' : 'plus'" />
+      <div class="ant-upload-text">{{ text }}</div>
+    </div>
+    <a-modal :visible="previewVisible" :footer="null" @cancel="handleCancel()">
+      <img alt="example" style="width: 100%" :src="previewImage"/>
+    </a-modal>
+  </a-upload>
+</template>
+
+<script>
+  import Vue from 'vue'
+  import { ACCESS_TOKEN } from "@/store/mutation-types"
+  import { getFileAccessHttpUrl } from '@/api/manage'
+
+  const uidGenerator=()=>{
+    return '-'+parseInt(Math.random()*10000+1,10);
+  }
+  const getFileName=(path)=>{
+    if(path.lastIndexOf("\\")>=0){
+      let reg=new RegExp("\\\\","g");
+      path = path.replace(reg,"/");
+    }
+    return path.substring(path.lastIndexOf("/")+1);
+  }
+  export default {
+    name: 'JImageUpload',
+    data(){
+      return {
+        uploadAction:window._CONFIG['domianURL']+"/sys/common/upload",
+        uploadLoading:false,
+        picUrl:false,
+        headers:{},
+        fileList: [],
+        previewImage:"",
+        previewVisible: false,
+      }
+    },
+    props:{
+      text:{
+        type:String,
+        required:false,
+        default:"上传"
+      },
+      /*这个属性用于控制文件上传的业务路径*/
+      bizPath:{
+        type:String,
+        required:false,
+        default:"temp"
+      },
+      value:{
+        type:[String,Array],
+        required:false
+      },
+      disabled:{
+        type:Boolean,
+        required:false,
+        default: false
+      },
+      isMultiple:{
+        type:Boolean,
+        required:false,
+        default: false
+      }
+    },
+    watch:{
+      value(val){
+        if (val instanceof Array) {
+          this.initFileList(val.join(','))
+        } else {
+          this.initFileList(val)
+        }
+      }
+    },
+    created(){
+      const token = Vue.ls.get(ACCESS_TOKEN);
+      this.headers = {"X-Access-Token":token}
+    },
+    methods:{
+      initFileList(paths){
+        if(!paths || paths.length==0){
+          this.fileList = [];
+          return;
+        }
+        this.picUrl = true;
+        let fileList = [];
+        let arr = paths.split(",")
+        for(var a=0;a<arr.length;a++){
+          let url = getFileAccessHttpUrl(arr[a]);
+          fileList.push({
+            uid: uidGenerator(),
+            name: getFileName(arr[a]),
+            status: 'done',
+            url: url,
+            response:{
+              status:"history",
+              message:arr[a]
+            }
+          })
+        }
+        this.fileList = fileList
+      },
+      beforeUpload: function(file){
+        var fileType = file.type;
+        if(fileType.indexOf('image')<0){
+          this.$message.warning('请上传图片');
+          return false;
+        }
+      },
+      handleChange(info) {
+        this.picUrl = false;
+        let fileList = info.fileList
+        if(info.file.status==='done'){
+          if(info.file.response.success){
+            this.picUrl = true;
+            fileList = fileList.map((file) => {
+              if (file.response) {
+                file.url = file.response.message;
+              }
+              return file;
+            });
+          }
+          //this.$message.success(`${info.file.name} 上传成功!`);
+        }else if (info.file.status === 'error') {
+          this.$message.error(`${info.file.name} 上传失败.`);
+        }else if(info.file.status === 'removed'){
+          this.handleDelete(info.file)
+        }
+        this.fileList = fileList
+        if(info.file.status==='done' || info.file.status === 'removed'){
+          this.handlePathChange()
+        }
+      },
+      // 预览
+      handlePreview (file) {
+        this.previewImage = file.url || file.thumbUrl
+        this.previewVisible = true
+      },
+      getAvatarView(){
+        if(this.fileList.length>0){
+          let url = this.fileList[0].url
+          return getFileAccessHttpUrl(url)
+        }
+      },
+      handlePathChange(){
+        let uploadFiles = this.fileList
+        let path = ''
+        if(!uploadFiles || uploadFiles.length==0){
+          path = ''
+        }
+        let arr = [];
+        if(!this.isMultiple){
+          arr.push(uploadFiles[uploadFiles.length-1].response.message)
+        }else{
+          for(var a=0;a<uploadFiles.length;a++){
+            arr.push(uploadFiles[a].response.message)
+          }
+        }
+        if(arr.length>0){
+          path = arr.join(",")
+        }
+        this.$emit('change', path);
+      },
+      handleDelete(file){
+        //如有需要新增 删除逻辑
+        console.log(file)
+      },
+      handleCancel() {
+        this.close();
+        this.previewVisible = false;
+      },
+      close () {
+
+      },
+    },
+    model: {
+      prop: 'value',
+      event: 'change'
+    }
+  }
+</script>
+
+<style scoped>
+
+</style>
--- a/jshERP-web/src/components/jeecg/JImportModal.vue
+++ b/jshERP-web/src/components/jeecg/JImportModal.vue
@@ -0,0 +1,123 @@
+<template>
+  <a-modal
+    title="导入EXCEL"
+    :width="600"
+    :visible="visible"
+    :confirmLoading="uploading"
+    @cancel="handleClose">
+
+    <a-upload
+      name="file"
+      :multiple="true"
+      accept=".xls,.xlsx"
+      :fileList="fileList"
+      :remove="handleRemove"
+      :beforeUpload="beforeUpload">
+      <a-button>
+        <a-icon type="upload" />
+        选择导入文件
+      </a-button>
+    </a-upload>
+
+    <template slot="footer">
+      <a-button @click="handleClose">关闭</a-button>
+      <a-button
+        type="primary"
+        @click="handleImport"
+        :disabled="fileList.length === 0"
+        :loading="uploading">
+        {{ uploading ? '上传中...' : '开始上传' }}
+      </a-button>
+    </template>
+
+  </a-modal>
+</template>
+
+<script>
+  import { postAction } from '@/api/manage'
+  export default {
+    name: 'JImportModal',
+    props:{
+      url:{
+        type: String,
+        default: '',
+        required: false
+      },
+      biz:{
+        type: String,
+        default: '',
+        required: false
+      }
+    },
+    data(){
+      return {
+        visible:false,
+        uploading:false,
+        fileList:[],
+        uploadAction:'',
+        foreignKeys:''
+      }
+    },
+    watch: {
+      url (val) {
+        if(val){
+         this.uploadAction = window._CONFIG['domianURL']+val
+        }
+      }
+    },
+    created () {
+      this.uploadAction = window._CONFIG['domianURL']+this.url
+    },
+
+    methods:{
+      handleClose(){
+        this.visible=false
+      },
+      show(arg){
+        this.fileList = []
+        this.uploading = false
+        this.visible = true
+        this.foreignKeys = arg;
+      },
+      handleRemove(file) {
+        const index = this.fileList.indexOf(file);
+        const newFileList = this.fileList.slice();
+        newFileList.splice(index, 1);
+        this.fileList = newFileList
+      },
+      beforeUpload(file) {
+        this.fileList = [...this.fileList, file]
+        return false;
+      },
+      handleImport() {
+        const { fileList } = this;
+        const formData = new FormData();
+        if(this.biz){
+          formData.append('isSingleTableImport',this.biz);
+        }
+        if(this.foreignKeys && this.foreignKeys.length>0){
+          formData.append('foreignKeys',this.foreignKeys);
+        }
+        fileList.forEach((file) => {
+          formData.append('files[]', file);
+        });
+        this.uploading = true
+        postAction(this.uploadAction, formData).then((res) => {
+          this.uploading = false
+          if(res.success){
+            this.$message.success(res.message)
+            this.visible=false
+            this.$emit('ok')
+          }else{
+            this.$message.warning(res.message)
+          }
+        })
+      }
+
+    }
+  }
+</script>
+
+<style scoped>
+
+</style>
--- a/jshERP-web/src/components/jeecg/JInput.vue
+++ b/jshERP-web/src/components/jeecg/JInput.vue
@@ -0,0 +1,100 @@
+<template>
+  <a-input :placeholder="placeholder" :value="inputVal" @input="backValue"></a-input>
+</template>
+
+<script>
+  const JINPUT_QUERY_LIKE = 'like';
+  const JINPUT_QUERY_NE = 'ne';
+  const JINPUT_QUERY_GE = 'ge'; //大于等于
+  const JINPUT_QUERY_LE = 'le'; //小于等于
+  
+  export default {
+    name: 'JInput',
+    props:{
+      value:{
+        type:String,
+        required:false
+      },
+      type:{
+        type:String,
+        required:false,
+        default:JINPUT_QUERY_LIKE
+      },
+      placeholder:{
+        type:String,
+        required:false,
+        default:''
+      }
+    },
+    watch:{
+      value:{
+        immediate:true,
+        handler:function(){
+          this.initVal();
+        }
+      },
+      // update-begin author:sunjianlei date:20200225 for:当 type 变化的时候重新计算值 ------
+      type() {
+        this.backValue({ target: { value: this.inputVal } })
+      },
+      // update-end author:sunjianlei date:20200225 for:当 type 变化的时候重新计算值 ------
+    },
+    model: {
+      prop: 'value',
+      event: 'change'
+    },
+    data(){
+      return {
+        inputVal:''
+      }
+    },
+    methods:{
+      initVal(){
+        if(!this.value){
+          this.inputVal = ''
+        }else{
+          let text = this.value
+          switch (this.type) {
+            case JINPUT_QUERY_LIKE:
+              text = text.substring(1,text.length-1);
+              break;
+            case JINPUT_QUERY_NE:
+              text = text.substring(1);
+              break;
+            case JINPUT_QUERY_GE:
+              text = text.substring(2);
+              break;
+            case JINPUT_QUERY_LE:
+              text = text.substring(2);
+              break;
+            default:
+          }
+          this.inputVal = text
+        }
+      },
+      backValue(e){
+        let text = e.target.value
+        switch (this.type) {
+          case JINPUT_QUERY_LIKE:
+            text = "*"+text+"*";
+            break;
+          case JINPUT_QUERY_NE:
+            text = "!"+text;
+            break;
+          case JINPUT_QUERY_GE:
+            text = ">="+text;
+            break;
+          case JINPUT_QUERY_LE:
+            text = "<="+text;
+            break;
+          default:
+        }
+        this.$emit("change",text)
+      }
+    }
+  }
+</script>
+
+<style scoped>
+
+</style>
--- a/jshERP-web/src/components/jeecg/JMarkdownEditor/default-options.js
+++ b/jshERP-web/src/components/jeecg/JMarkdownEditor/default-options.js
@@ -0,0 +1,30 @@
+export default {
+  minHeight: '200px',
+  previewStyle: 'vertical',
+  useCommandShortcut: true,
+  useDefaultHTMLSanitizer: true,
+  usageStatistics: false,
+  hideModeSwitch: false,
+  toolbarItems: [
+    'heading',
+    'bold',
+    'italic',
+    'strike',
+    'divider',
+    'hr',
+    'quote',
+    'divider',
+    'ul',
+    'ol',
+    'task',
+    'indent',
+    'outdent',
+    'divider',
+    'table',
+    'image',
+    'link',
+    'divider',
+    'code',
+    'codeblock'
+  ]
+}
--- a/jshERP-web/src/components/jeecg/JMarkdownEditor/index.vue
+++ b/jshERP-web/src/components/jeecg/JMarkdownEditor/index.vue
@@ -0,0 +1,121 @@
+<template>
+  <div :id="id" />
+</template>
+
+<script>
+import 'codemirror/lib/codemirror.css'
+import 'tui-editor/dist/tui-editor.css'
+import 'tui-editor/dist/tui-editor-contents.css'
+
+import Editor from 'tui-editor'
+import defaultOptions from './default-options'
+
+export default {
+  name: 'JMarkdownEditor',
+  props: {
+    value: {
+      type: String,
+      default: ''
+    },
+    id: {
+      type: String,
+      required: false,
+      default() {
+        return 'markdown-editor-' + +new Date() + ((Math.random() * 1000).toFixed(0) + '')
+      }
+    },
+    options: {
+      type: Object,
+      default() {
+        return defaultOptions
+      }
+    },
+    mode: {
+      type: String,
+      default: 'markdown'
+    },
+    height: {
+      type: String,
+      required: false,
+      default: '300px'
+    },
+    language: {
+      type: String,
+      required: false,
+      default: 'en_US'
+    }
+  },
+  data() {
+    return {
+      editor: null
+    }
+  },
+  computed: {
+    editorOptions() {
+      const options = Object.assign({}, defaultOptions, this.options)
+      options.initialEditType = this.mode
+      options.height = this.height
+      options.language = this.language
+      return options
+    }
+  },
+  watch: {
+    value(newValue, preValue) {
+      if (newValue !== preValue && newValue !== this.editor.getValue()) {
+        this.editor.setValue(newValue)
+      }
+    },
+    language(val) {
+      this.destroyEditor()
+      this.initEditor()
+    },
+    height(newValue) {
+      this.editor.height(newValue)
+    },
+    mode(newValue) {
+      this.editor.changeMode(newValue)
+    }
+  },
+  mounted() {
+    this.initEditor()
+  },
+  destroyed() {
+    this.destroyEditor()
+  },
+  methods: {
+    initEditor() {
+      this.editor = new Editor({
+        el: document.getElementById(this.id),
+        ...this.editorOptions
+      })
+      if (this.value) {
+        this.editor.setValue(this.value)
+      }
+      this.editor.on('change', () => {
+        this.$emit('change', this.editor.getValue())
+      })
+    },
+    destroyEditor() {
+      if (!this.editor) return
+      this.editor.off('change')
+      this.editor.remove()
+    },
+    setValue(value) {
+      this.editor.setValue(value)
+    },
+    getValue() {
+      return this.editor.getValue()
+    },
+    setHtml(value) {
+      this.editor.setHtml(value)
+    },
+    getHtml() {
+      return this.editor.getHtml()
+    }
+  },
+  model: {
+    prop: 'value',
+    event: 'change'
+  }
+}
+</script>
--- a/jshERP-web/src/components/jeecg/JModal/index.vue
+++ b/jshERP-web/src/components/jeecg/JModal/index.vue
@@ -0,0 +1,225 @@
+<template>
+  <a-modal
+    ref="modal"
+    :class="getClass(modalClass)"
+    :style="getStyle(modalStyle)"
+    :visible="visible"
+    v-bind="_attrs"
+    v-on="$listeners"
+    @ok="handleOk"
+    @cancel="handleCancel"
+  >
+
+    <slot></slot>
+
+    <template v-if="!isNoTitle" slot="title">
+      <a-row class="j-modal-title-row" type="flex">
+        <a-col class="left">
+          <slot name="title">{{ title }}</slot>
+        </a-col>
+        <a-col v-if="switchFullscreen" class="right" @click="toggleFullscreen">
+          <a-button class="ant-modal-close ant-modal-close-x" ghost type="link" :icon="fullscreenButtonIcon"/>
+        </a-col>
+      </a-row>
+    </template>
+
+    <!-- 处理 scopedSlots -->
+    <template v-for="slotName of scopedSlotsKeys" :slot="slotName">
+      <slot :name="slotName"></slot>
+    </template>
+
+    <!-- 处理 slots -->
+    <template v-for="slotName of slotsKeys" v-slot:[slotName]>
+      <slot :name="slotName"></slot>
+    </template>
+
+  </a-modal>
+</template>
+
+<script>
+
+  import { getClass, getStyle } from '@/utils/props-util'
+
+  export default {
+    name: 'JModal',
+    props: {
+      title: String,
+      // 可使用 .sync 修饰符
+      visible: Boolean,
+      // 是否全屏弹窗，当全屏时无论如何都会禁止 body 滚动。可使用 .sync 修饰符
+      fullscreen: {
+        type: Boolean,
+        default: false
+      },
+      // 是否允许切换全屏（允许后右上角会出现一个按钮）
+      switchFullscreen: {
+        type: Boolean,
+        default: false
+      },
+      // 点击确定按钮的时候是否关闭弹窗
+      okClose: {
+        type: Boolean,
+        default: true
+      },
+    },
+    data() {
+      return {
+        // 内部使用的 slots ，不再处理
+        usedSlots: ['title'],
+        // 实际控制是否全屏的参数
+        innerFullscreen: this.fullscreen,
+      }
+    },
+    computed: {
+      // 一些未处理的参数或特殊处理的参数绑定到 a-modal 上
+      _attrs() {
+        let attrs = { ...this.$attrs }
+        // 如果全屏就将宽度设为 100%
+        if (this.innerFullscreen) {
+          attrs['width'] = '100%'
+        }
+        return attrs
+      },
+      modalClass() {
+        return {
+          'j-modal-box': true,
+          'fullscreen': this.innerFullscreen,
+          'no-title': this.isNoTitle,
+          'no-footer': this.isNoFooter,
+        }
+      },
+      modalStyle() {
+        let style = {}
+        // 如果全屏就将top设为 0
+        if (this.innerFullscreen) {
+          style['top'] = '0'
+        }
+        return style
+      },
+      isNoTitle() {
+        return !this.title && !this.allSlotsKeys.includes('title')
+      },
+      isNoFooter() {
+        return this._attrs['footer'] === null
+      },
+      slotsKeys() {
+        return Object.keys(this.$slots).filter(key => !this.usedSlots.includes(key))
+      },
+      scopedSlotsKeys() {
+        return Object.keys(this.$scopedSlots).filter(key => !this.usedSlots.includes(key))
+      },
+      allSlotsKeys() {
+        return this.slotsKeys.concat(this.scopedSlotsKeys)
+      },
+      // 切换全屏的按钮图标
+      fullscreenButtonIcon() {
+        return this.innerFullscreen ? 'fullscreen-exit' : 'fullscreen'
+      },
+    },
+    watch: {
+      visible() {
+        if (this.visible) {
+          this.innerFullscreen = this.fullscreen
+        }
+      },
+      innerFullscreen(val) {
+        this.$emit('update:fullscreen', val)
+      },
+    },
+    methods: {
+
+      getClass(clazz) {
+        return { ...getClass(this), ...clazz }
+      },
+      getStyle(style) {
+        return { ...getStyle(this), ...style }
+      },
+
+      close() {
+        this.$emit('update:visible', false)
+      },
+
+      handleOk() {
+        if (this.okClose) {
+          this.close()
+        }
+      },
+      handleCancel() {
+        this.close()
+      },
+
+      /** 切换全屏 */
+      toggleFullscreen() {
+        this.innerFullscreen = !this.innerFullscreen
+      },
+
+    }
+  }
+</script>
+
+<style lang="less">
+  .j-modal-box {
+
+    &.fullscreen {
+      top: 0;
+      left: 0;
+      padding: 0;
+
+      height: 100vh;
+
+      & .ant-modal-content {
+        height: 100vh;
+        border-radius: 0;
+
+        & .ant-modal-body {
+          /* title 和 footer 各占 55px */
+          height: calc(100% - 55px - 55px);
+          overflow: auto;
+        }
+      }
+
+      &.no-title, &.no-footer {
+        .ant-modal-body {
+          height: calc(100% - 55px);
+        }
+      }
+
+      &.no-title.no-footer {
+        .ant-modal-body {
+          height: 100%;
+        }
+      }
+
+    }
+
+    .j-modal-title-row {
+      .left {
+        width: calc(100% - 56px - 56px);
+      }
+
+      .right {
+        width: 56px;
+        position: inherit;
+
+        .ant-modal-close {
+          right: 56px;
+          color: rgba(0, 0, 0, 0.45);
+
+          &:hover {
+            color: rgba(0, 0, 0, 0.75);
+          }
+
+        }
+      }
+    }
+
+
+  }
+
+  @media (max-width: 767px) {
+    .j-modal-box.fullscreen {
+      margin: 0;
+      max-width: 100vw;
+    }
+  }
+</style>
--- a/jshERP-web/src/components/jeecg/JSelectMultiple.vue
+++ b/jshERP-web/src/components/jeecg/JSelectMultiple.vue
@@ -0,0 +1,66 @@
+<template>
+  <a-select :value="arrayValue" @change="onChange" mode="multiple" :placeholder="placeholder">
+    <a-select-option
+      v-for="(item,index) in options"
+      :key="index"
+      :value="item.value">
+      {{ item.text || item.label }}
+    </a-select-option>
+  </a-select>
+</template>
+
+<script>
+  //option {label:,value:}
+  export default {
+    name: 'JSelectMultiple',
+    props: {
+      placeholder:{
+        type: String,
+        default:'',
+        required: false
+      },
+      value:{
+        type: String,
+        required: false
+      },
+      readOnly:{
+        type: Boolean,
+        required: false,
+        default: false
+      },
+      options:{
+        type: Array,
+        required: true
+      },
+      triggerChange:{
+        type: Boolean,
+        required: false,
+        default: false
+      }
+    },
+    data(){
+      return {
+        arrayValue:!this.value?[]:this.value.split(",")
+      }
+    },
+    watch:{
+      value (val) {
+        if(!val){
+          this.arrayValue = []
+        }else{
+          this.arrayValue = this.value.split(",")
+        }
+      }
+    },
+    methods:{
+      onChange (selectedValue) {
+        if(this.triggerChange){
+          this.$emit('change', selectedValue.join(","));
+        }else{
+          this.$emit('input', selectedValue.join(","));
+        }
+      },
+    },
+
+  }
+</script>
--- a/jshERP-web/src/components/jeecg/JSlider.vue
+++ b/jshERP-web/src/components/jeecg/JSlider.vue
@@ -0,0 +1,116 @@
+<template>
+  <div class="drag" ref="dragDiv">
+    <div class="drag_bg"></div>
+    <div class="drag_text">{{confirmWords}}</div>
+    <div ref="moveDiv" @mousedown="mousedownFn($event)" :class="{'handler_ok_bg':confirmSuccess}" class="handler handler_bg" style="border: 0.5px solid #fff;height: 34px;position: absolute;top: 0px;left: 0px;"></div>
+  </div>
+</template>
+
+<script>
+  export default {
+    name:"JSlider",
+    data(){
+      return {
+        beginClientX:0,           /*距离屏幕左端距离*/
+        mouseMoveStata:false,     /*触发拖动状态  判断*/
+        maxwidth:'',               /*拖动最大宽度，依据滑块宽度算出来的*/
+        confirmWords:'拖动滑块验证',   /*滑块文字*/
+        confirmSuccess:false           /*验证成功判断*/
+      }
+    },
+    methods: {
+      isSuccess(){
+        return this.confirmSuccess
+      },
+      mousedownFn:function (e) {
+        if(!this.confirmSuccess){
+          e.preventDefault && e.preventDefault();   //阻止文字选中等 浏览器默认事件
+          this.mouseMoveStata = true;
+          this.beginClientX = e.clientX;
+        }
+      },        //mousedoen 事件
+      successFunction(){
+        this.confirmSuccess = true
+        this.confirmWords = '验证通过';
+        if(window.addEventListener){
+          document.getElementsByTagName('html')[0].removeEventListener('mousemove',this.mouseMoveFn);
+          document.getElementsByTagName('html')[0].removeEventListener('mouseup',this.moseUpFn);
+        }else {
+          document.getElementsByTagName('html')[0].removeEventListener('mouseup',()=>{});
+        }
+        document.getElementsByClassName('drag_text')[0].style.color = '#fff'
+        document.getElementsByClassName('handler')[0].style.left = this.maxwidth + 'px';
+        document.getElementsByClassName('drag_bg')[0].style.width = this.maxwidth + 'px';
+
+        this.$emit("onSuccess",true)
+      },                //验证成功函数
+      mouseMoveFn(e){
+        if(this.mouseMoveStata){
+          let width = e.clientX - this.beginClientX;
+          if(width>0 && width<=this.maxwidth){
+            document.getElementsByClassName('handler')[0].style.left = width + 'px';
+            document.getElementsByClassName('drag_bg')[0].style.width = width + 'px';
+          }else if(width>this.maxwidth){
+            this.successFunction();
+          }
+        }
+      },                   //mousemove事件
+      moseUpFn(e){
+        this.mouseMoveStata = false;
+        var width = e.clientX - this.beginClientX;
+        if(width<this.maxwidth){
+          // ---- update-begin- author:sunjianlei --- date:20191009 --- for: 修复获取不到 handler 的时候报错 ----
+          let handler = document.getElementsByClassName('handler')[0]
+          if (handler) {
+            handler.style.left = 0 + 'px'
+            document.getElementsByClassName('drag_bg')[0].style.width = 0 + 'px'
+          }
+          // ---- update-end- author:sunjianlei --- date:20191009 --- for: 修复获取不到 handler 的时候报错 ----
+        }
+      }                       //mouseup事件
+    },
+    mounted(){
+      this.maxwidth = this.$refs.dragDiv.clientWidth - this.$refs.moveDiv.clientWidth;
+      document.getElementsByTagName('html')[0].addEventListener('mousemove',this.mouseMoveFn);
+      document.getElementsByTagName('html')[0].addEventListener('mouseup',this.moseUpFn)
+    }
+  }
+</script>
+
+<style scoped>
+  .drag{
+    position: relative;
+    background-color: #e8e8e8;
+    width: 100%;
+    height: 34px;
+    line-height: 34px;
+    text-align: center;
+  }
+  .handler{
+    width: 40px;
+    height: 32px;
+    border: 1px solid #ccc;
+    cursor: move;
+  }
+  .handler_bg{
+    background: #fff url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA3hpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDIxIDc5LjE1NTc3MiwgMjAxNC8wMS8xMy0xOTo0NDowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDo0ZDhlNWY5My05NmI0LTRlNWQtOGFjYi03ZTY4OGYyMTU2ZTYiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NTEyNTVEMURGMkVFMTFFNEI5NDBCMjQ2M0ExMDQ1OUYiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NTEyNTVEMUNGMkVFMTFFNEI5NDBCMjQ2M0ExMDQ1OUYiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTQgKE1hY2ludG9zaCkiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo2MTc5NzNmZS02OTQxLTQyOTYtYTIwNi02NDI2YTNkOWU5YmUiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6NGQ4ZTVmOTMtOTZiNC00ZTVkLThhY2ItN2U2ODhmMjE1NmU2Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+YiRG4AAAALFJREFUeNpi/P//PwMlgImBQkA9A+bOnfsIiBOxKcInh+yCaCDuByoswaIOpxwjciACFegBqZ1AvBSIS5OTk/8TkmNEjwWgQiUgtQuIjwAxUF3yX3xyGIEIFLwHpKyAWB+I1xGSwxULIGf9A7mQkBwTlhBXAFLHgPgqEAcTkmNCU6AL9d8WII4HOvk3ITkWJAXWUMlOoGQHmsE45ViQ2KuBuASoYC4Wf+OUYxz6mQkgwAAN9mIrUReCXgAAAABJRU5ErkJggg==") no-repeat center;
+  }
+  .handler_ok_bg{
+    background: #fff url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA3hpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDIxIDc5LjE1NTc3MiwgMjAxNC8wMS8xMy0xOTo0NDowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDo0ZDhlNWY5My05NmI0LTRlNWQtOGFjYi03ZTY4OGYyMTU2ZTYiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NDlBRDI3NjVGMkQ2MTFFNEI5NDBCMjQ2M0ExMDQ1OUYiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NDlBRDI3NjRGMkQ2MTFFNEI5NDBCMjQ2M0ExMDQ1OUYiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTQgKE1hY2ludG9zaCkiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDphNWEzMWNhMC1hYmViLTQxNWEtYTEwZS04Y2U5NzRlN2Q4YTEiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6NGQ4ZTVmOTMtOTZiNC00ZTVkLThhY2ItN2U2ODhmMjE1NmU2Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+k+sHwwAAASZJREFUeNpi/P//PwMyKD8uZw+kUoDYEYgloMIvgHg/EM/ptHx0EFk9I8wAoEZ+IDUPiIMY8IN1QJwENOgj3ACo5gNAbMBAHLgAxA4gQ5igAnNJ0MwAVTsX7IKyY7L2UNuJAf+AmAmJ78AEDTBiwGYg5gbifCSxFCZoaBMCy4A4GOjnH0D6DpK4IxNSVIHAfSDOAeLraJrjgJp/AwPbHMhejiQnwYRmUzNQ4VQgDQqXK0ia/0I17wJiPmQNTNBEAgMlQIWiQA2vgWw7QppBekGxsAjIiEUSBNnsBDWEAY9mEFgMMgBk00E0iZtA7AHEctDQ58MRuA6wlLgGFMoMpIG1QFeGwAIxGZo8GUhIysmwQGSAZgwHaEZhICIzOaBkJkqyM0CAAQDGx279Jf50AAAAAABJRU5ErkJggg==") no-repeat center;
+  }
+  .drag_bg{
+    background-color: #7ac23c;
+    height: 34px;
+    width: 0px;
+  }
+  .drag_text{
+    position: absolute;
+    top: 0px;
+    width: 100%;text-align: center;
+    -moz-user-select: none;
+    -webkit-user-select: none;
+    user-select: none;
+    -o-user-select:none;
+    -ms-user-select:none;
+  }
+</style>
--- a/jshERP-web/src/components/jeecg/JSuperQuery.vue
+++ b/jshERP-web/src/components/jeecg/JSuperQuery.vue
@@ -0,0 +1,640 @@
+<template>
+<div class="j-super-query-box">
+
+  <slot name="button" :isActive="superQueryFlag" :isMobile="izMobile" :open="handleOpen" :reset="handleReset">
+    <a-tooltip v-if="superQueryFlag" v-bind="tooltipProps" :mouseLeaveDelay="0.2">
+      <!-- begin 不知道为什么不加上这段代码就无法生效 -->
+      <span v-show="false">{{tooltipProps}}</span>
+      <!-- end 不知道为什么不加上这段代码就无法生效 -->
+      <template slot="title">
+        <span>已有高级查询条件生效</span>
+        <a-divider type="vertical"/>
+        <a @click="handleReset">清空</a>
+      </template>
+      <a-button-group>
+        <a-button type="primary" @click="handleOpen">
+          <a-icon type="appstore" theme="twoTone" spin/>
+          <span>高级查询</span>
+        </a-button>
+        <a-button v-if="izMobile" type="primary" icon="delete" @click="handleReset"/>
+      </a-button-group>
+    </a-tooltip>
+    <a-button v-else type="primary" icon="filter" @click="handleOpen">高级查询</a-button>
+  </slot>
+
+  <j-modal
+    title="高级查询构造器"
+    :width="1000"
+    :visible="visible"
+    @cancel="handleCancel"
+    :mask="false"
+    :fullscreen="izMobile"
+    class="j-super-query-modal"
+    style="top:5%;max-height: 95%;"
+  >
+
+    <template slot="footer">
+      <div style="float: left">
+        <a-button :loading="loading" @click="handleReset">重置</a-button>
+        <a-button :loading="loading" @click="handleSave">保存查询条件</a-button>
+      </div>
+      <a-button :loading="loading" @click="handleCancel">关闭</a-button>
+      <a-button :loading="loading" type="primary" @click="handleOk">查询</a-button>
+    </template>
+
+    <a-spin :spinning="loading">
+      <a-row>
+        <a-col :sm="24" :md="24-5">
+
+          <a-empty v-if="queryParamsModel.length === 0" style="margin-bottom: 12px;">
+            <div slot="description">
+              <span>没有任何查询条件</span>
+              <a-divider type="vertical"/>
+              <a @click="handleAdd">点击新增</a>
+            </div>
+          </a-empty>
+
+          <a-form v-else layout="inline">
+
+            <a-row style="margin-bottom: 12px;">
+              <a-col :md="12" :xs="24">
+                <a-form-item label="过滤条件匹配" :labelCol="{md: 6,xs:24}" :wrapperCol="{md: 18,xs:24}" style="width: 100%;">
+                  <a-select v-model="matchType" :getPopupContainer="node=>node.parentNode" style="width: 100%;">
+                    <a-select-option value="and">AND（所有条件都要求匹配）</a-select-option>
+                    <a-select-option value="or">OR（条件中的任意一个匹配）</a-select-option>
+                  </a-select>
+                </a-form-item>
+              </a-col>
+            </a-row>
+
+            <a-row type="flex" style="margin-bottom:10px" :gutter="16" v-for="(item, index) in queryParamsModel" :key="index">
+
+              <a-col :md="8" :xs="24" style="margin-bottom: 12px;">
+                <a-tree-select
+                  showSearch
+                  v-model="item.field"
+                  :treeData="fieldTreeData"
+                  :dropdownStyle="{ maxHeight: '400px', overflow: 'auto' }"
+                  placeholder="选择查询字段"
+                  allowClear
+                  treeDefaultExpandAll
+                  :getPopupContainer="node=>node.parentNode"
+                  style="width: 100%"
+                  @select="(val,option)=>handleSelected(option,item)"
+                >
+                </a-tree-select>
+              </a-col>
+
+              <a-col :md="4" :xs="24" style="margin-bottom: 12px;">
+                <a-select placeholder="匹配规则" :value="item.rule" :getPopupContainer="node=>node.parentNode" @change="handleRuleChange(item,$event)">
+                  <a-select-option value="eq">等于</a-select-option>
+                  <a-select-option value="like">包含</a-select-option>
+                  <a-select-option value="right_like">以..开始</a-select-option>
+                  <a-select-option value="left_like">以..结尾</a-select-option>
+                  <a-select-option value="in">在...中</a-select-option>
+                  <a-select-option value="ne">不等于</a-select-option>
+                  <a-select-option value="gt">大于</a-select-option>
+                  <a-select-option value="ge">大于等于</a-select-option>
+                  <a-select-option value="lt">小于</a-select-option>
+                  <a-select-option value="le">小于等于</a-select-option>
+                </a-select>
+              </a-col>
+
+              <a-col :md="8" :xs="24" style="margin-bottom: 12px;">
+                <template v-if="item.dictCode">
+                  <template v-if="item.type === 'table-dict'">
+                    <j-popup
+                      v-model="item.val"
+                      :code="item.dictTable"
+                      :field="item.dictCode"
+                      :orgFields="item.dictCode"
+                      :destFields="item.dictCode"
+                    ></j-popup>
+                  </template>
+                  <template v-else>
+                    <j-multi-select-tag v-show="allowMultiple(item)" v-model="item.val" :dictCode="item.dictCode" placeholder="请选择"/>
+                    <j-dict-select-tag v-show="!allowMultiple(item)" v-model="item.val" :dictCode="item.dictCode" placeholder="请选择"/>
+                  </template>
+                </template>
+                <j-popup v-else-if="item.type === 'popup'" :value="item.val" v-bind="item.popup" group-id="superQuery" @input="(e,v)=>handleChangeJPopup(item,e,v)"/>
+                <j-select-multi-user
+                  v-else-if="item.type === 'select-user' || item.type === 'sel_user'"
+                  v-model="item.val"
+                  :buttons="false"
+                  :multiple="false"
+                  placeholder="请选择用户"
+                  :returnKeys="['id', item.customReturnField || 'username']"
+                />
+                <j-select-depart
+                  v-else-if="item.type === 'select-depart' || item.type === 'sel_depart'"
+                  v-model="item.val"
+                  :multi="false"
+                  placeholder="请选择部门"
+                  :customReturnField="item.customReturnField || 'id'"
+                />
+                <a-select
+                  v-else-if="item.options instanceof Array"
+                  v-model="item.val"
+                  :options="item.options"
+                  allowClear
+                  placeholder="请选择"
+                  :mode="allowMultiple(item)?'multiple':''"
+                />
+                <j-area-linkage v-model="item.val" v-else-if="item.type==='area-linkage' || item.type==='pca'" style="width: 100%"/>
+                <j-date v-else-if=" item.type=='date' " v-model="item.val" placeholder="请选择日期" style="width: 100%"></j-date>
+                <j-date v-else-if=" item.type=='datetime' " v-model="item.val" placeholder="请选择时间" :show-time="true" date-format="YYYY-MM-DD HH:mm:ss" style="width: 100%"></j-date>
+                <a-time-picker v-else-if="item.type==='time'" :value="item.val ? moment(item.val,'HH:mm:ss') : null" format="HH:mm:ss" style="width: 100%" @change="(time,value)=>item.val=value"/>
+                <a-input-number v-else-if=" item.type=='int'||item.type=='number' " style="width: 100%" placeholder="请输入数值" v-model="item.val"/>
+                <a-input v-else v-model="item.val" placeholder="请输入值"/>
+              </a-col>
+
+              <a-col :md="4" :xs="0" style="margin-bottom: 12px;">
+                <a-button @click="handleAdd" icon="plus"></a-button>&nbsp;
+                <a-button @click="handleDel( index )" icon="minus"></a-button>
+              </a-col>
+
+              <a-col :md="0" :xs="24" style="margin-bottom: 12px;text-align: right;">
+                <a-button @click="handleAdd" icon="plus"></a-button>&nbsp;
+                <a-button @click="handleDel( index )" icon="minus"></a-button>
+              </a-col>
+
+            </a-row>
+
+          </a-form>
+        </a-col>
+        <a-col :sm="24" :md="5">
+          <!-- 查询记录 -->
+
+          <a-card class="j-super-query-history-card" :bordered="true">
+            <div slot="title">
+              保存的查询
+            </div>
+
+            <a-empty v-if="saveTreeData.length === 0" class="j-super-query-history-empty" description="没有保存任何查询"/>
+            <a-tree
+              v-else
+              class="j-super-query-history-tree"
+              showIcon
+              :treeData="saveTreeData"
+              :selectedKeys="[]"
+              @select="handleTreeSelect"
+            >
+            </a-tree>
+          </a-card>
+
+
+        </a-col>
+      </a-row>
+
+
+    </a-spin>
+
+    <a-modal title="请输入保存的名称" :visible="prompt.visible" @cancel="prompt.visible=false" @ok="handlePromptOk">
+      <a-input v-model="prompt.value"></a-input>
+    </a-modal>
+
+  </j-modal>
+</div>
+</template>
+
+<script>
+  import moment from 'moment'
+  import * as utils from '@/utils/util'
+  import { mixinDevice } from '@/utils/mixin'
+  import JDate from '@/components/jeecg/JDate.vue'
+  import JSelectDepart from '@/components/jeecgbiz/JSelectDepart'
+  import JSelectMultiUser from '@/components/jeecgbiz/JSelectMultiUser'
+  import JMultiSelectTag from '@/components/dict/JMultiSelectTag'
+  import JAreaLinkage from '@comp/jeecg/JAreaLinkage'
+
+  export default {
+    name: 'JSuperQuery',
+    mixins: [mixinDevice],
+    components: { JAreaLinkage, JMultiSelectTag, JDate, JSelectDepart, JSelectMultiUser },
+    props: {
+      /*
+       fieldList: [{
+          value:'',
+          text:'',
+          type:'',
+          dictCode:'' // 只要 dictCode 有值，无论 type 是什么，都显示为字典下拉框
+       }]
+       type:date datetime int number string
+      * */
+      fieldList: {
+        type: Array,
+        required: true
+      },
+      /*
+      * 这个回调函数接收一个数组参数 即查询条件
+      * */
+      callback: {
+        type: String,
+        required: false,
+        default: 'handleSuperQuery'
+      },
+
+      // 当前是否在加载中
+      loading: {
+        type: Boolean,
+        default: false
+      },
+
+      // 保存查询条件的唯一 code，通过该 code 区分
+      // 默认为 null，代表以当前路由全路径为区分Code
+      saveCode: {
+        type: String,
+        default: null
+      }
+
+    },
+    data() {
+      return {
+        moment,
+        fieldTreeData: [],
+
+        prompt: {
+          visible: false,
+          value: ''
+        },
+
+        visible: false,
+        queryParamsModel: [],
+        treeIcon: <a-icon type="file-text"/>,
+        // 保存查询条件的treeData
+        saveTreeData: [],
+        // 保存查询条件的前缀名
+        saveCodeBefore: 'JSuperQuerySaved_',
+        // 查询类型，过滤条件匹配（and、or）
+        matchType: 'and',
+        superQueryFlag: false,
+      }
+    },
+    computed: {
+      izMobile() {
+        return this.device === 'mobile'
+      },
+      tooltipProps() {
+        return this.izMobile ? { visible: false } : {}
+      },
+      fullSaveCode() {
+        let saveCode = this.saveCode
+        if (saveCode == null || saveCode === '') {
+          saveCode = this.$route.fullPath
+        }
+        return this.saveCodeBefore + saveCode
+      },
+    },
+    watch: {
+      // 当 saveCode 变化时，重新查询已保存的条件
+      fullSaveCode: {
+        immediate: true,
+        handler() {
+          let list = this.$ls.get(this.fullSaveCode)
+          if (list instanceof Array) {
+            this.saveTreeData = list.map(i => this.renderSaveTreeData(i))
+          }
+        }
+      },
+      fieldList: {
+        deep: true,
+        immediate: true,
+        handler(val) {
+          let mainData = [], subData = []
+          val.forEach(item => {
+            let data = { ...item }
+            data.label = data.label || data.text
+            let hasChildren = (data.children instanceof Array)
+            data.disabled = hasChildren
+            data.selectable = !hasChildren
+            if (hasChildren) {
+              data.children = data.children.map(item2 => {
+                let child = { ...item2 }
+                child.label = child.label || child.text
+                child.label = data.label + '-' + child.label
+                child.value = data.value + ',' + child.value
+                child.val = ''
+                return child
+              })
+              data.val = ''
+              subData.push(data)
+            } else {
+              mainData.push(data)
+            }
+          })
+          this.fieldTreeData = mainData.concat(subData)
+        }
+      }
+    },
+
+    methods: {
+      show() {
+        if (!this.queryParamsModel || this.queryParamsModel.length === 0) {
+          this.resetLine()
+        }
+        this.visible = true
+      },
+      handleOk() {
+        if (!this.isNullArray(this.queryParamsModel)) {
+          let event = {
+            matchType: this.matchType,
+            params: this.removeEmptyObject(this.queryParamsModel)
+          }
+          // 移动端模式下关闭弹窗
+          if (this.izMobile) {
+            this.visible = false
+          }
+          this.emitCallback(event)
+        } else {
+          this.$message.warn("不能查询空条件")
+        }
+      },
+      emitCallback(event = {}) {
+        let { params = [], matchType = this.matchType } = event
+        this.superQueryFlag = (params && params.length > 0)
+        for (let param of params) {
+          if (Array.isArray(param.val)) {
+            param.val = param.val.join(',')
+          }
+        }
+        console.debug('---高级查询参数--->', { params, matchType })
+        this.$emit(this.callback, params, matchType)
+      },
+      handleCancel() {
+        this.close()
+      },
+      close() {
+        this.$emit('close')
+        this.visible = false
+      },
+      handleAdd() {
+        this.addNewLine()
+      },
+      addNewLine() {
+        this.queryParamsModel.push({ rule: 'eq' })
+      },
+      resetLine() {
+        this.superQueryFlag = false
+        this.queryParamsModel = []
+        this.addNewLine()
+      },
+      handleDel(index) {
+        this.queryParamsModel.splice(index, 1)
+      },
+      handleSelected(node, item) {
+        let { type, options, dictCode, dictTable, customReturnField, popup } = node.dataRef
+        item['type'] = type
+        item['options'] = options
+        item['dictCode'] = dictCode
+        item['dictTable'] = dictTable
+        item['customReturnField'] = customReturnField
+        if (popup) {
+          item['popup'] = popup
+        }
+        this.$set(item, 'val', undefined)
+      },
+      handleOpen() {
+        this.show()
+      },
+      handleReset() {
+        this.resetLine()
+        this.emitCallback()
+      },
+      handleSave() {
+        let queryParams = this.removeEmptyObject(this.queryParamsModel)
+        if (this.isNullArray(queryParams)) {
+          this.$message.warning('空条件不能保存')
+        } else {
+          this.prompt.value = ''
+          this.prompt.visible = true
+        }
+      },
+      handlePromptOk() {
+        let { value } = this.prompt
+        if(!value){
+          this.$message.warning('保存名称不能为空')
+          return
+        }
+        // 取出查询条件
+        let records = this.removeEmptyObject(this.queryParamsModel)
+        // 判断有没有重名的
+        let filterList = this.saveTreeData.filter(i => i.originTitle === value)
+        if (filterList.length > 0) {
+          this.$confirm({
+            content: `${value} 已存在，是否覆盖？`,
+            onOk: () => {
+              this.prompt.visible = false
+              filterList[0].records = records
+              this.saveToLocalStore()
+              this.$message.success('保存成功')
+            }
+          })
+        } else {
+          // 没有重名的，直接添加
+          this.prompt.visible = false
+          // 添加到树列表中
+          this.saveTreeData.push(this.renderSaveTreeData({
+            title: value,
+            matchType: this.matchType,
+            records: records
+          }))
+          // 保存到 LocalStore
+          this.saveToLocalStore()
+          this.$message.success('保存成功')
+        }
+      },
+      handleTreeSelect(idx, event) {
+        if (event.selectedNodes[0]) {
+          let { matchType, records } = event.selectedNodes[0].data.props
+          // 将保存的matchType取出，兼容旧数据，如果没有保存就还是使用原来的
+          this.matchType = matchType || this.matchType
+          this.queryParamsModel = utils.cloneObject(records)
+        }
+      },
+      handleRemoveSaveTreeItem(event, vNode) {
+        // 阻止事件冒泡
+        event.stopPropagation()
+
+        this.$confirm({
+          content: '是否删除当前查询？',
+          onOk: () => {
+            let { eventKey } = vNode
+            this.saveTreeData.splice(Number.parseInt(eventKey.substring(2)), 1)
+            this.saveToLocalStore()
+          },
+        })
+      },
+
+      // 将查询保存到 LocalStore 里
+      saveToLocalStore() {
+        let saveValue = this.saveTreeData.map(({ originTitle, matchType, records }) => ({ title: originTitle, matchType, records }))
+        this.$ls.set(this.fullSaveCode, saveValue)
+      },
+
+      isNullArray(array) {
+        //判断是不是空数组对象
+        if (!array || array.length === 0) {
+          return true
+        }
+        if (array.length === 1) {
+          let obj = array[0]
+          if (!obj.field || (obj.val == null || obj.val === '') || !obj.rule) {
+            return true
+          }
+        }
+        return false
+      },
+      // 去掉数组中的空对象
+      removeEmptyObject(arr) {
+        let array = utils.cloneObject(arr)
+        for (let i = 0; i < array.length; i++) {
+          let item = array[i]
+          if (item == null || Object.keys(item).length <= 0) {
+            array.splice(i--, 1)
+          } else {
+            if (Array.isArray(item.options)) {
+              // 如果有字典属性，就不需要保存 options 了
+              if (item.dictCode) {
+                // 去掉特殊属性
+                delete item.options
+              }
+            }
+          }
+        }
+        return array
+      },
+
+      /** 渲染保存查询条件的 title（加个删除按钮） */
+      renderSaveTreeData(item) {
+        item.icon = this.treeIcon
+        item.originTitle = item['title']
+        item.title = (fn, vNode) => {
+          let { originTitle } = vNode.dataRef
+          return (
+            <div class="j-history-tree-title">
+              <span>{originTitle}</span>
+
+              <div class="j-history-tree-title-closer" onClick={e => this.handleRemoveSaveTreeItem(e, vNode)}>
+                <a-icon type="close-circle"/>
+              </div>
+            </div>
+          )
+        }
+        return item
+      },
+
+      /** 判断是否允许多选 */
+      allowMultiple(item) {
+        return item.rule === 'in'
+      },
+
+      handleRuleChange(item, newValue) {
+        let oldValue = item.rule
+        this.$set(item, 'rule', newValue)
+        // 上一个规则是否是 in，且type是字典或下拉
+        if (oldValue === 'in') {
+          if (item.dictCode || item.options instanceof Array) {
+            let value = item.val
+            if (typeof item.val === 'string') {
+              value = item.val.split(',')[0]
+            } else if (Array.isArray(item.val)) {
+              value = item.val[0]
+            }
+            this.$set(item, 'val', value)
+          }
+        }
+      },
+
+      handleChangeJPopup(item, e, values) {
+        item.val = values[item.popup['destFields']]
+      },
+
+    }
+  }
+</script>
+
+<style lang="less" scoped>
+
+  .j-super-query-box {
+    display: inline-block;
+  }
+
+  .j-super-query-modal {
+
+    .j-super-query-history-card {
+      /deep/ .ant-card-body,
+      /deep/ .ant-card-head-title {
+        padding: 0;
+      }
+
+      /deep/ .ant-card-head {
+        padding: 4px 8px;
+        min-height: initial;
+      }
+    }
+
+    .j-super-query-history-empty {
+      /deep/ .ant-empty-image {
+        height: 80px;
+        line-height: 80px;
+        margin-bottom: 0;
+      }
+
+      /deep/ img {
+        width: 80px;
+        height: 65px;
+      }
+
+      /deep/ .ant-empty-description {
+        color: #afafaf;
+        margin: 8px 0;
+      }
+    }
+
+    .j-super-query-history-tree {
+
+      .j-history-tree-title {
+        width: calc(100% - 24px);
+        position: relative;
+        display: inline-block;
+
+        &-closer {
+          color: #999999;
+          position: absolute;
+          top: 0;
+          right: 0;
+          width: 24px;
+          height: 24px;
+          text-align: center;
+          opacity: 0;
+          transition: opacity 0.3s, color 0.3s;
+
+          &:hover {
+            color: #666666;
+          }
+
+          &:active {
+            color: #333333;
+          }
+        }
+
+        &:hover {
+          .j-history-tree-title-closer {
+            opacity: 1;
+          }
+        }
+
+      }
+
+      /deep/ .ant-tree-switcher {
+        display: none;
+      }
+
+      /deep/ .ant-tree-node-content-wrapper {
+        width: 100%;
+      }
+    }
+
+  }
+
+</style>
--- a/jshERP-web/src/components/jeecg/JSwitch.vue
+++ b/jshERP-web/src/components/jeecg/JSwitch.vue
@@ -0,0 +1,57 @@
+<template>
+  <a-switch v-model="checkStatus" :disabled="disabled" @change="handleChange"/>
+</template>
+<script>
+
+  export default {
+    name: 'JSwitch',
+    props: {
+      value:{
+        type: String,
+        required: false
+      },
+      disabled:{
+        type: Boolean,
+        required: false,
+        default: false
+      },
+      options:{
+        type:Array,
+        required:false,
+        default:()=>['Y','N']
+      }
+    },
+    data () {
+      return {
+        checkStatus: false
+      }
+    },
+    watch: {
+      value:{
+        immediate: true,
+        handler(val){
+          if(!val){
+            this.checkStatus = false
+            this.$emit('change', this.options[1]);
+          }else{
+            if(this.options[0]==val){
+              this.checkStatus = true
+            }else{
+              this.checkStatus = false
+            }
+          }
+        }
+      }
+    },
+    methods: {
+      handleChange(checked){
+        let flag = checked===false?this.options[1]:this.options[0];
+        this.$emit('change', flag);
+      }
+    },
+    model: {
+      prop: 'value',
+      event: 'change'
+    }
+  }
+</script>
--- a/jshERP-web/src/components/jeecg/JTreeDict.vue
+++ b/jshERP-web/src/components/jeecg/JTreeDict.vue
@@ -0,0 +1,199 @@
+<template>
+  <a-tree-select
+    allowClear
+    labelInValue
+    style="width: 100%"
+    :disabled="disabled"
+    :dropdownStyle="{ maxHeight: '400px', overflow: 'auto' }"
+    :placeholder="placeholder"
+    :loadData="asyncLoadTreeData"
+    :value="treeValue"
+    :treeData="treeData"
+    @change="onChange"
+    @search="onSearch">
+  </a-tree-select>
+</template>
+
+<script>
+  import { getAction } from '@/api/manage'
+
+  export default {
+    name: 'JTreeDict',
+    data(){
+      return {
+        treeData:[],
+        treeValue: null,
+        url_root:"/sys/category/loadTreeRoot",
+        url_children:"/sys/category/loadTreeChildren",
+        url_view:'/sys/category/loadOne',
+      }
+    },
+    props:{
+      value:{
+        type: String,
+        required: false
+      },
+      placeholder:{
+        type: String,
+        default: '请选择',
+        required: false
+      },
+      parentCode:{
+        type: String,
+        default: '',
+        required: false
+      },
+      field:{
+        type: String,
+        default: 'id',
+        required: false
+      },
+      root:{
+        type:Object,
+        required:false,
+        default:()=>{
+          return {
+            pid:'0'
+          }
+        }
+      },
+      async:{
+        type:Boolean,
+        default:false,
+        required:false
+      },
+      disabled:{
+        type:Boolean,
+        default:false,
+        required:false
+      }
+    },
+    watch:{
+      root:{
+        handler(val){
+          console.log("root-change",val)
+        },
+        deep:true
+      },
+      parentCode:{
+        handler(){
+          this.loadRoot()
+        }
+      },
+      value:{
+        handler(){
+          this.loadViewInfo()
+        }
+      }
+    },
+    created(){
+      this.loadRoot()
+      this.loadViewInfo()
+    },
+    model: {
+      prop: 'value',
+      event: 'change'
+    },
+    methods:{
+      loadViewInfo(){
+        if(!this.value || this.value=="0"){
+          this.treeValue = null
+        }else{
+          let param = {
+            field:this.field,
+            val:this.value
+          }
+          getAction(this.url_view,param).then(res=>{
+            if(res.success){
+              this.treeValue = {
+                value:this.value,
+                label:res.result.name
+              }
+            }
+          })
+        }
+      },
+      loadRoot(){
+        let param = {
+          async:this.async,
+          pcode:this.parentCode
+        }
+        getAction(this.url_root,param).then(res=>{
+          if(res.success){
+            this.handleTreeNodeValue(res.result)
+            console.log("aaaa",res.result)
+            this.treeData = [...res.result]
+          }else{
+            this.$message.error(res.message)
+          }
+        })
+      },
+      asyncLoadTreeData (treeNode) {
+        return new Promise((resolve) => {
+          if(!this.async){
+            resolve()
+            return
+          }
+          if (treeNode.$vnode.children) {
+            resolve()
+            return
+          }
+          let pid = treeNode.$vnode.key
+          let param = {
+            pid:pid
+          }
+          getAction(this.url_children,param).then(res=>{
+            if(res.success){
+              this.handleTreeNodeValue(res.result)
+              this.addChildren(pid,res.result,this.treeData)
+              this.treeData = [...this.treeData]
+            }
+            resolve()
+          })
+        })
+      },
+      addChildren(pid,children,treeArray){
+        if(treeArray && treeArray.length>0){
+          for(let item of treeArray){
+            if(item.key == pid){
+              if(!children || children.length==0){
+                item.leaf = true
+              }else{
+                item.children = children
+              }
+              break
+            }else{
+              this.addChildren(pid,children,item.children)
+            }
+          }
+        }
+      },
+      handleTreeNodeValue(result){
+        let storeField = this.field=='code'?'code':'key'
+        for(let i of result){
+          i.value = i[storeField]
+          i.isLeaf = (!i.leaf)?false:true
+          if(i.children && i.children.length>0){
+            this.handleTreeNodeValue(i.children)
+          }
+        }
+      },
+      onChange(value){
+        console.log(value)
+        if(!value){
+          this.$emit('change', '');
+        }else{
+          this.$emit('change', value.value);
+        }
+        this.treeValue = value
+      },
+      onSearch(value){
+        console.log(value)
+      },
+      getCurrTreeData(){
+        return this.treeData
+      }
+    }
+
+  }
+</script>
--- a/jshERP-web/src/components/jeecg/JTreeSelect.vue
+++ b/jshERP-web/src/components/jeecg/JTreeSelect.vue
@@ -0,0 +1,260 @@
+<template>
+  <a-tree-select
+    allowClear
+    labelInValue
+    :getPopupContainer="(node) => node.parentNode"
+    style="width: 100%"
+    :disabled="disabled"
+    :dropdownStyle="{ maxHeight: '400px', overflow: 'auto' }"
+    :placeholder="placeholder"
+    :loadData="asyncLoadTreeData"
+    :value="treeValue"
+    :treeData="treeData"
+    :multiple="multiple"
+    @change="onChange"
+    @search="onSearch">
+  </a-tree-select>
+</template>
+<script>
+
+  /*
+  * 异步树加载组件 通过传入表名 显示字段 存储字段 加载一个树控件
+  * <j-tree-select dict="aa_tree_test,aad,id" pid-field="pid" ></j-tree-select>
+  * */
+  import { getAction } from '@/api/manage'
+
+  export default {
+    name: 'JTreeSelect',
+    props: {
+      value:{
+        type: String,
+        required: false
+      },
+      placeholder:{
+        type: String,
+        default: '请选择',
+        required: false
+      },
+      dict:{
+        type: String,
+        default: '',
+        required: false
+      },
+      pidField:{
+        type: String,
+        default: 'pid',
+        required: false
+      },
+      pidValue:{
+        type: String,
+        default: '',
+        required: false
+      },
+      disabled:{
+        type:Boolean,
+        default:false,
+        required:false
+      },
+      hasChildField:{
+        type: String,
+        default: '',
+        required: false
+      },
+      condition:{
+        type:String,
+        default:'',
+        required:false
+      },
+      // 是否支持多选
+      multiple: {
+        type: Boolean,
+        default: false,
+      },
+      loadTriggleChange:{
+        type: Boolean,
+        default: false,
+        required:false
+      }
+    },
+    data () {
+      return {
+        treeValue: null,
+        treeData:[],
+        url:"/sys/dict/loadTreeData",
+        view:'/sys/dict/loadDictItem/',
+        tableName:"",
+        text:"",
+        code:"",
+
+      }
+    },
+    watch: {
+      value () {
+        this.loadItemByCode()
+      },
+      dict(){
+        this.initDictInfo()
+        this.loadRoot();
+      }
+    },
+    created(){
+      this.validateProp().then(()=>{
+        this.initDictInfo()
+        this.loadRoot()
+        this.loadItemByCode()
+      })
+    },
+    methods: {
+      loadItemByCode(){
+        if(!this.value || this.value=="0"){
+          this.treeValue = null
+        }else{
+          getAction(`${this.view}${this.dict}`,{key:this.value}).then(res=>{
+            if(res.success){
+              let 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.$emit('change', this.value,text)
+        }
+      },
+      initDictInfo(){
+        let arr = this.dict.split(",")
+        this.tableName = arr[0]
+        this.text = arr[1]
+        this.code = arr[2]
+      },
+      asyncLoadTreeData (treeNode) {
+        return new Promise((resolve) => {
+          if (treeNode.$vnode.children) {
+            resolve()
+            return
+          }
+          let pid = treeNode.$vnode.key
+          let param = {
+            pid:pid,
+            tableName:this.tableName,
+            text:this.text,
+            code:this.code,
+            pidField:this.pidField,
+            hasChildField:this.hasChildField,
+            condition:this.condition
+          }
+          getAction(this.url,param).then(res=>{
+            if(res.success){
+              for(let 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(let 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)
+            }
+          }
+        }
+      },
+      loadRoot(){
+        let param = {
+          pid:this.pidValue,
+          tableName:this.tableName,
+          text:this.text,
+          code:this.code,
+          pidField:this.pidField,
+          hasChildField:this.hasChildField,
+          condition:this.condition
+        }
+        getAction(this.url,param).then(res=>{
+          if(res.success && res.result){
+            for(let 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)
+          }
+        })
+      },
+      onChange(value){
+        if(!value){
+          this.$emit('change', '');
+          this.treeValue = null
+        } else if (value instanceof Array) {
+          this.$emit('change', value.map(item => item.value).join(','))
+          this.treeValue = value
+        } else {
+          this.$emit('change', value.value,value.label)
+          this.treeValue = value
+        }
+
+      },
+      onSearch(value){
+        console.log(value)
+      },
+      getCurrTreeData(){
+        return this.treeData
+      },
+      validateProp(){
+        let mycondition = this.condition
+        return new Promise((resolve,reject)=>{
+          if(!mycondition){
+            resolve();
+          }else{
+            try {
+              let test=JSON.parse(mycondition);
+              console.log("aaaaasdsdd",typeof test)
+              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>
--- a/jshERP-web/src/components/jeecg/JTreeTable.vue
+++ b/jshERP-web/src/components/jeecg/JTreeTable.vue
@@ -0,0 +1,180 @@
+<template>
+  <a-table
+    :rowKey="rowKey"
+    :columns="columns"
+    :dataSource="dataSource"
+    :expandedRowKeys="expandedRowKeys"
+    v-bind="tableAttrs"
+    v-on="$listeners"
+    @expand="handleExpand"
+    @expandedRowsChange="expandedRowKeys=$event">
+
+    <template v-for="(slotItem) of slots" :slot="slotItem" slot-scope="text, record, index">
+      <slot :name="slotItem" v-bind="{text,record,index}"></slot>
+    </template>
+
+  </a-table>
+</template>
+
+<script>
+  import { getAction } from '@/api/manage'
+
+  export default {
+    name: 'JTreeTable',
+    props: {
+      rowKey: {
+        type: String,
+        default: 'id'
+      },
+      // 根据什么查询，如果传递 id 就根据 id 查询
+      queryKey: {
+        type: String,
+        default: 'parentId'
+      },
+      queryParams: {
+        type: Object,
+        default: () => ({})
+      },
+      // 查询顶级时的值，如果顶级为0，则传0
+      topValue: {
+        type: String,
+        default: null
+      },
+      columns: {
+        type: Array,
+        required: true
+      },
+      url: {
+        type: String,
+        required: true
+      },
+      childrenUrl: {
+        type: String,
+        default: null
+      },
+      tableProps: {
+        type: Object,
+        default: () => ({})
+      },
+      /** 是否在创建组件的时候就查询数据 */
+      immediateRequest: {
+        type: Boolean,
+        default: true
+      },
+      condition:{
+        type:String,
+        default:'',
+        required:false
+      }
+    },
+    data() {
+      return {
+        dataSource: [],
+        expandedRowKeys: []
+      }
+    },
+    computed: {
+      getChildrenUrl() {
+        if (this.childrenUrl) {
+          return this.childrenUrl
+        } else {
+          return this.url
+        }
+      },
+      slots() {
+        let slots = []
+        for (let column of this.columns) {
+          if (column.scopedSlots && column.scopedSlots.customRender) {
+            slots.push(column.scopedSlots.customRender)
+          }
+        }
+        return slots
+      },
+      tableAttrs() {
+        return Object.assign(this.$attrs, this.tableProps)
+      }
+    },
+    watch: {
+      queryParams: {
+        deep: true,
+        handler() {
+          this.loadData()
+        }
+      }
+    },
+    created() {
+      if (this.immediateRequest) this.loadData()
+    },
+    methods: {
+
+      /** 加载数据*/
+      loadData(id = this.topValue, first = true, url = this.url) {
+        this.$emit('requestBefore', { first })
+
+        if (first) {
+          this.expandedRowKeys = []
+        }
+
+        let params = Object.assign({}, this.queryParams || {})
+        params[this.queryKey] = id
+        if(this.condition && this.condition.length>0){
+          params['condition'] = this.condition
+        }
+
+        return getAction(url, params).then(res => {
+          let list = []
+          if (res.result instanceof Array) {
+            list = res.result
+          } else if (res.result.records instanceof Array) {
+            list = res.result.records
+          } else {
+            throw '返回数据类型不识别'
+          }
+          let dataSource = list.map(item => {
+            // 判断是否标记了带有子级
+            if (item.hasChildren === true) {
+              // 查找第一个带有dataIndex的值的列
+              let firstColumn
+              for (let column of this.columns) {
+                firstColumn = column.dataIndex
+                if (firstColumn) break
+              }
+              // 定义默认展开时显示的loading子级，实际子级数据只在展开时加载
+              let loadChild = { id: `${item.id}_loadChild`, [firstColumn]: 'loading...', isLoading: true }
+              item.children = [loadChild]
+            }
+            return item
+          })
+          if (first) {
+            this.dataSource = dataSource
+          }
+          this.$emit('requestSuccess', { first, dataSource, res })
+          return Promise.resolve(dataSource)
+        }).finally(() => this.$emit('requestFinally', { first }))
+      },
+
+      /** 点击展开图标时触发 */
+      handleExpand(expanded, record) {
+        // 判断是否是展开状态
+        if (expanded) {
+          // 判断子级的首个项的标记是否是“正在加载中”，如果是就加载数据
+          if (record.children[0].isLoading === true) {
+            this.loadData(record.id, false, this.getChildrenUrl).then(dataSource => {
+              // 处理好的数据可直接赋值给children
+              if (dataSource.length === 0) {
+                record.children = null
+              } else {
+                record.children = dataSource
+              }
+            })
+          }
+        }
+      }
+
+    }
+  }
+</script>
+
+<style scoped>
+
+</style>
--- a/jshERP-web/src/components/jeecg/JUpload.vue
+++ b/jshERP-web/src/components/jeecg/JUpload.vue
@@ -0,0 +1,434 @@
+<template>
+  <div :id="containerId" style="position: relative">
+
+    <!--  ---------------------------- begin 图片左右换位置 ------------------------------------- -->
+    <div class="movety-container" :style="{top:top+'px',left:left+'px',display:moveDisplay}" style="padding:0 8px;position: absolute;z-index: 91;height: 32px;width: 104px;text-align: center;">
+      <div :id="containerId+'-mover'" :class="showMoverTask?'uploadty-mover-mask':'movety-opt'" style="margin-top: 12px">
+        <a @click="moveLast" style="margin: 0 5px;"><a-icon type="arrow-left" style="color: #fff;font-size: 16px"/></a>
+        <a @click="moveNext" style="margin: 0 5px;"><a-icon type="arrow-right" style="color: #fff;font-size: 16px"/></a>
+      </div>
+    </div>
+    <!--  ---------------------------- end 图片左右换位置 ------------------------------------- -->
+
+    <a-upload
+      name="file"
+      :multiple="true"
+      :action="uploadAction"
+      :headers="headers"
+      :data="{'biz':bizPath}"
+      :fileList="fileList"
+      :beforeUpload="beforeUpload"
+      @change="handleChange"
+      :disabled="disabled"
+      :returnUrl="returnUrl"
+      :listType="complistType"
+      @preview="handlePreview"
+      :class="{'uploadty-disabled':disabled}">
+      <template>
+        <div v-if="isImageComp">
+          <a-icon type="plus" />
+          <div class="ant-upload-text">{{ text }}</div>
+        </div>
+        <a-button v-else-if="buttonVisible">
+         <a-icon type="upload" />{{ text }}
+        </a-button>
+      </template>
+    </a-upload>
+    <a-modal :visible="previewVisible" :footer="null" @cancel="handleCancel">
+      <img alt="example" style="width: 100%" :src="previewImage" />
+    </a-modal>
+  </div>
+</template>
+
+<script>
+
+  import Vue from 'vue'
+  import { ACCESS_TOKEN } from "@/store/mutation-types"
+  import { getFileAccessHttpUrl } from '@/api/manage';
+
+  const FILE_TYPE_ALL = "all"
+  const FILE_TYPE_IMG = "image"
+  const FILE_TYPE_TXT = "file"
+  const uidGenerator=()=>{
+    return '-'+parseInt(Math.random()*10000+1,10);
+  }
+  const getFileName=(path)=>{
+    if(path.lastIndexOf("\\")>=0){
+      let reg=new RegExp("\\\\","g");
+      path = path.replace(reg,"/");
+    }
+    return path.substring(path.lastIndexOf("/")+1);
+  }
+  export default {
+    name: 'JUpload',
+    data(){
+      return {
+        uploadAction:window._CONFIG['domianURL']+"/sys/common/upload",
+        headers:{},
+        fileList: [],
+        newFileList: [],
+        uploadGoOn:true,
+        previewVisible: false,
+        //---------------------------- begin 图片左右换位置 -------------------------------------
+        previewImage: '',
+        containerId:'',
+        top:'',
+        left:'',
+        moveDisplay:'none',
+        showMoverTask:false,
+        moverHold:false,
+        currentImg:''
+        //---------------------------- end 图片左右换位置 -------------------------------------
+      }
+    },
+    props:{
+      text:{
+        type:String,
+        required:false,
+        default:"点击上传"
+      },
+      fileType:{
+        type:String,
+        required:false,
+        default:FILE_TYPE_ALL
+      },
+      /*这个属性用于控制文件上传的业务路径*/
+      bizPath:{
+        type:String,
+        required:false,
+        default:"temp"
+      },
+      value:{
+        type:[String,Array],
+        required:false
+      },
+      // update-begin- --- author:wangshuai ------ date:20190929 ---- for:Jupload组件增加是否能够点击
+      disabled:{
+        type:Boolean,
+        required:false,
+        default: false
+      },
+      // update-end- --- author:wangshuai ------ date:20190929 ---- for:Jupload组件增加是否能够点击
+      //此属性被废弃了
+      triggerChange:{
+        type: Boolean,
+        required: false,
+        default: false
+      },
+      /**
+       * update -- author:lvdandan -- date:20190219 -- for:Jupload组件增加是否返回url，
+       * true：仅返回url
+       * false：返回fileName filePath fileSize
+       */
+      returnUrl:{
+        type:Boolean,
+        required:false,
+        default: true
+      },
+      number:{
+        type:Number,
+        required:false,
+        default: 0
+      },
+      buttonVisible:{
+        type:Boolean,
+        required:false,
+        default: true
+      },
+    },
+    watch:{
+      value:{
+        immediate: true,
+        handler() {
+          let val = this.value
+          if (val instanceof Array) {
+            if(this.returnUrl){
+              this.initFileList(val.join(','))
+            }else{
+              this.initFileListArr(val);
+            }
+          } else {
+            this.initFileList(val)
+          }
+        }
+      }
+    },
+    computed:{
+      isImageComp(){
+        return this.fileType === FILE_TYPE_IMG
+      },
+      complistType(){
+        return this.fileType === FILE_TYPE_IMG?'picture-card':'text'
+      }
+    },
+    created(){
+      const token = Vue.ls.get(ACCESS_TOKEN);
+      //---------------------------- begin 图片左右换位置 -------------------------------------
+      this.headers = {"X-Access-Token":token};
+      this.containerId = 'container-ty-'+new Date().getTime();
+      //---------------------------- end 图片左右换位置 -------------------------------------
+    },
+
+    methods:{
+      initFileListArr(val){
+        if(!val || val.length==0){
+          this.fileList = [];
+          return;
+        }
+        let fileList = [];
+        for(var a=0;a<val.length;a++){
+          let url = getFileAccessHttpUrl(val[a].filePath);
+          fileList.push({
+            uid:uidGenerator(),
+            name:val[a].fileName,
+            status: 'done',
+            url: url,
+            response:{
+              status:"history",
+              message:val[a].filePath
+            }
+          })
+        }
+        this.fileList = fileList
+      },
+      initFileList(paths){
+        if(!paths || paths.length==0){
+          //return [];
+          // update-begin- --- author:os_chengtgen ------ date:20190729 ---- for:issues:326,Jupload组件初始化bug
+          this.fileList = [];
+          return;
+          // update-end- --- author:os_chengtgen ------ date:20190729 ---- for:issues:326,Jupload组件初始化bug
+        }
+        let fileList = [];
+        let arr = paths.split(",")
+        for(var a=0;a<arr.length;a++){
+          let url = getFileAccessHttpUrl(arr[a]);
+          fileList.push({
+            uid:uidGenerator(),
+            name:getFileName(arr[a]),
+            status: 'done',
+            url: url,
+            response:{
+              status:"history",
+              message:arr[a]
+            }
+          })
+        }
+        this.fileList = fileList
+      },
+      handlePathChange(){
+        let uploadFiles = this.fileList
+        let path = ''
+        if(!uploadFiles || uploadFiles.length==0){
+          path = ''
+        }
+        let arr = [];
+
+        for(var a=0;a<uploadFiles.length;a++){
+          arr.push(uploadFiles[a].response.message)
+        }
+        if(arr.length>0){
+          path = arr.join(",")
+        }
+        this.$emit('change', path);
+      },
+      beforeUpload(file){
+        this.uploadGoOn=true
+        var fileType = file.type;
+        if(this.fileType===FILE_TYPE_IMG){
+          if(fileType.indexOf('image')<0){
+            this.$message.warning('请上传图片');
+            this.uploadGoOn=false
+            return false;
+          }
+        }
+        //TODO 扩展功能验证文件大小
+        return true
+      },
+      handleChange(info) {
+        console.log("--文件列表改变--")
+        if(!info.file.status && this.uploadGoOn === false){
+          info.fileList.pop();
+        }
+        let fileList = info.fileList
+        if(info.file.status==='done'){
+          if(this.number>0){
+            fileList = fileList.slice(-this.number);
+          }
+          if(info.file.response.success){
+            fileList = fileList.map((file) => {
+              if (file.response) {
+                let reUrl = file.response.message;
+                file.url = getFileAccessHttpUrl(reUrl);
+              }
+              return file;
+            });
+          }
+          //this.$message.success(`${info.file.name} 上传成功!`);
+        }else if (info.file.status === 'error') {
+          this.$message.error(`${info.file.name} 上传失败.`);
+        }else if(info.file.status === 'removed'){
+          this.handleDelete(info.file)
+        }
+        this.fileList = fileList
+        if(info.file.status==='done' || info.file.status === 'removed'){
+          //returnUrl为true时仅返回文件路径
+          if(this.returnUrl){
+            this.handlePathChange()
+          }else{
+            //returnUrl为false时返回文件名称、文件路径及文件大小
+            this.newFileList = [];
+            for(var a=0;a<fileList.length;a++){
+              var fileJson = {
+                fileName:fileList[a].name,
+                filePath:fileList[a].response.message,
+                fileSize:fileList[a].size
+              };
+              this.newFileList.push(fileJson);
+            }
+            this.$emit('change', this.newFileList);
+          }
+        }
+      },
+      handleDelete(file){
+        //如有需要新增 删除逻辑
+        console.log(file)
+      },
+      handlePreview(file){
+        if(this.fileType === FILE_TYPE_IMG){
+          this.previewImage = file.url || file.thumbUrl;
+          this.previewVisible = true;
+        }else{
+          location.href=file.url
+        }
+      },
+      handleCancel(){
+        this.previewVisible = false;
+      },
+      //---------------------------- begin 图片左右换位置 -------------------------------------
+      moveLast(){
+        //console.log(ev)
+        //console.log(this.fileList)
+        //console.log(this.currentImg)
+        let index = this.getIndexByUrl();
+        if(index==0){
+          this.$message.warn('未知的操作')
+        }else{
+          let curr = this.fileList[index].url;
+          let last = this.fileList[index-1].url;
+          let arr =[]
+          for(let i=0;i<this.fileList.length;i++){
+            if(i==index-1){
+              arr.push(curr)
+            }else if(i==index){
+              arr.push(last)
+            }else{
+              arr.push(this.fileList[i].url)
+            }
+          }
+          this.currentImg = last
+          this.$emit('change',arr.join(','))
+        }
+      },
+      moveNext(){
+        let index = this.getIndexByUrl();
+        if(index==this.fileList.length-1){
+          this.$message.warn('已到最后~')
+        }else{
+          let curr = this.fileList[index].url;
+          let next = this.fileList[index+1].url;
+          let arr =[]
+          for(let i=0;i<this.fileList.length;i++){
+            if(i==index+1){
+              arr.push(curr)
+            }else if(i==index){
+              arr.push(next)
+            }else{
+              arr.push(this.fileList[i].url)
+            }
+          }
+          this.currentImg = next
+          this.$emit('change',arr.join(','))
+        }
+      },
+      getIndexByUrl(){
+        for(let i=0;i<this.fileList.length;i++){
+          if(this.fileList[i].url === this.currentImg || encodeURI(this.fileList[i].url) === this.currentImg){
+            return i;
+          }
+        }
+        return -1;
+      }
+    },
+    mounted(){
+      const moverObj = document.getElementById(this.containerId+'-mover');
+      moverObj.addEventListener('mouseover',()=>{
+        this.moverHold = true
+        this.moveDisplay = 'block';
+      });
+      moverObj.addEventListener('mouseout',()=>{
+        this.moverHold = false
+        this.moveDisplay = 'none';
+      });
+      let picList = document.getElementById(this.containerId)?document.getElementById(this.containerId).getElementsByClassName('ant-upload-list-picture-card'):[];
+      if(picList && picList.length>0){
+        picList[0].addEventListener('mouseover',(ev)=>{
+          ev = ev || window.event;
+          let target = ev.target || ev.srcElement;
+          if('ant-upload-list-item-info' == target.className){
+            this.showMoverTask=false
+            let item = target.parentElement
+            this.left = item.offsetLeft
+            this.top=item.offsetTop+item.offsetHeight-50;
+            this.moveDisplay = 'block';
+            this.currentImg = target.getElementsByTagName('img')[0].src
+          }
+
+        });
+
+        picList[0].addEventListener('mouseout',(ev)=>{
+          ev = ev || window.event;
+          let target = ev.target || ev.srcElement;
+          //console.log('移除',target)
+          if('ant-upload-list-item-info' == target.className){
+            this.showMoverTask=true
+            setTimeout(()=>{
+              if(this.moverHold === false)
+                this.moveDisplay = 'none';
+            },100)
+          }
+          if('ant-upload-list-item ant-upload-list-item-done' == target.className || 'ant-upload-list ant-upload-list-picture-card'== target.className){
+            this.moveDisplay = 'none';
+          }
+        })
+        //---------------------------- end 图片左右换位置 -------------------------------------
+      }
+    },
+    model: {
+      prop: 'value',
+      event: 'change'
+    }
+  }
+</script>
+
+<style lang="less">
+.uploadty-disabled{
+  .ant-upload-list-item {
+    .anticon-close{
+      display: none;
+    }
+    .anticon-delete{
+      display: none;
+    }
+  }
+}
+  //---------------------------- begin 图片左右换位置 -------------------------------------
+  .uploadty-mover-mask{
+    background-color: rgba(0, 0, 0, 0.5);
+    opacity: .8;
+    color: #fff;
+    height: 28px;
+    line-height: 28px;
+  }
+  //---------------------------- end 图片左右换位置 -------------------------------------
+</style>
--- a/jshERP-web/src/components/jeecg/README.md
+++ b/jshERP-web/src/components/jeecg/README.md
@@ -0,0 +1,512 @@
+# JDate 日期组件 使用文档
+  
+###### 说明: antd-vue日期组件需要用moment中转一下，用起来不是很方便，特二次封装，使用时只需要传字符串即可
+## 参数配置
+| 参数           | 类型      | 必填 |说明|
+|--------------|---------|----|---------|
+| placeholder      |string   | | placeholder      |
+| readOnly   | boolean   | | true/false 默认false                 |
+| value      | string | | 绑定v-model或是v-decorator后不需要设置    |
+| showTime | boolean | | 是否展示时间true/false 默认false  |
+| dateFormat    | string | |日期格式 默认'YYYY-MM-DD' 若showTime设置为true则需要将其设置成对应的时间格式(如:YYYY-MM-DD HH:mm:ss)               |
+| triggerChange | string | |触发组件值改变的事件是否是change,当使用v-decorator时且没有设置decorator的option.trigger为input需要设置该值为true               |
+使用示例
+----
+1.组件带有v-model的使用方法
+```vue
+<j-date v-model="dateStr"></j-date>
+```
+
+2.组件带有v-decorator的使用方法  
+  a).设置trigger-change属性为true
+  ```vue
+    <j-date :trigger-change="true" v-decorator="['dateStr',{}]"></j-date>
+  ```
+    
+  b).设置decorator的option.trigger为input
+   ```vue
+    <j-date v-decorator="['dateStr',{trigger:'input'}]"></j-date>
+   ```
+
+3.其他使用
+添加style
+```vue
+<j-date v-model="dateStr" style="width:100%"></j-date>
+```
+添加placeholder
+```vue
+<j-date v-model="dateStr" placeholder="请输入dateStr"></j-date>
+```
+添加readOnly
+```vue
+<j-date v-model="dateStr" :read-only="true"></j-date>
+```
+
+备注:
+script内需引入jdate
+```vue
+<script>
+  import JDate from '@/components/jeecg/JDate'
+  export default {
+    name: "demo",
+    components: {
+      JDate
+    }
+    //...
+  }
+</script>
+```
+
+
+ ---
+
+
+# JSuperQuery 高级查询 使用文档
+## 参数配置
+| 参数           | 类型      | 必填 | 说明                   |
+|--------------|---------|----|----------------------|
+| fieldList      | array   |✔| 需要查询的列集合示例如下，type类型有:date/datetime/string/int/number      |
+| callback   | array   |  | 回调函数名称(非必须)默认handleSuperQuery                |
+
+fieldList结构示例：
+```vue
+  const superQueryFieldList=[{
+    type:"date",
+    value:"birthday",
+    text:"生日"
+  },{
+    type:"string",
+    value:"name",
+    text:"用户名"
+  },{
+    type:"int",
+    value:"age",
+    text:"年龄"
+  }]
+```
+页面代码概述:  
+----
+1.import之后再components之内声明
+```vue
+import JSuperQuery from '@/components/jeecg/JSuperQuery.vue';
+  export default {
+    name: "JeecgDemoList",
+    components: {
+      JSuperQuery
+    },
+
+```
+2.页面引用
+```vue
+  <!-- 高级查询区域 -->
+  <j-super-query :fieldList="fieldList" ref="superQueryModal" @handleSuperQuery="handleSuperQuery"></j-super-query>
+```
+3.list页面data中需要定义三个属性：
+```vue
+  fieldList:superQueryFieldList,
+  superQueryFlag:false,
+  superQueryParams:""
+```
+4.list页面声明回调事件handleSuperQuery(与组件的callback对应即可)
+```vue
+//高级查询方法
+handleSuperQuery(arg) {
+  if(!arg){
+    this.superQueryParams=''
+    this.superQueryFlag = false
+  }else{
+    this.superQueryFlag = true
+    this.superQueryParams=JSON.stringify(arg)
+  }
+  this.loadData()
+},
+```
+5.改造list页面方法
+```vue
+  // 获取查询条件
+  getQueryParams() {
+    let sqp = {}
+    if(this.superQueryParams){
+      sqp['superQueryParams']=encodeURI(this.superQueryParams)
+    }
+    var param = Object.assign(sqp, this.queryParam, this.isorter);
+    param.field = this.getQueryField();
+    param.pageNo = this.ipagination.current;
+    param.pageSize = this.ipagination.pageSize;
+    return filterObj(param);
+  },
+```
+6.打开弹框调用show方法：
+```vue
+this.$refs.superQueryModal.show();
+```
+
+# JEllipsis 字符串超长截取省略号显示
+  
+###### 说明: 遇到超长文本展示，通过此标签可以截取省略号显示，鼠标放置会提示全文本
+## 参数配置
+| 参数  | 类型     | 必填 |    说明      |
+|--------|---------|----|----------------|
+| value  |string   | 必填   |  字符串文本|
+| length | number  | 非必填 |  默认25    |
+使用示例
+----
+1.组件带有v-model的使用方法
+```vue
+<j-ellipsis :value="text"/>
+
+
+# Modal弹框实现最大化功能  
+
+1.定义modal的宽度：
+```vue
+  <a-modal
+    :width="modalWidth"
+    
+    
+    />
+```
+2.自定义modal的title,居右显示切换图标
+```vue
+  <template slot="title">
+    <div style="width: 100%;">
+      <span>{{ title }}</span>
+      <span style="display:inline-block;width:calc(100% - 51px);padding-right:10px;text-align: right">
+        <a-button @click="toggleScreen" icon="appstore" style="height:20px;width:20px;border:0px"></a-button>
+      </span>
+    </div>
+  </template>
+```
+3.定义toggleScreen事件,用于切换modal宽度
+```vue
+  toggleScreen(){
+      if(this.modaltoggleFlag){
+        this.modalWidth = window.innerWidth;
+      }else{
+        this.modalWidth = 800;
+      }
+      this.modaltoggleFlag = !this.modaltoggleFlag;
+    },
+```
+4.data中声明上述用到的属性
+```vue
+    data () {
+      return {
+        modalWidth:800,
+        modaltoggleFlag:true,
+```
+
+# <a-select/> 下拉选项滚动错位的解决方法
+
+## 问题描述
+
+当使用了 `a-modal` 或其他带有滚动条的组件时，使用`a-select`组件并打开下拉框时滚动滚动条，就会导致错位的问题产生。
+
+## 解决方法
+
+大多数情况下，在 `a-select` 上添加一个 `getPopupContainer` 属性，值为`node => node.parentNode`即可解决。
+但是如果遇到 `a-select` 标签层级过深的情况，可能仍然会显示异常，只需要多加几个`.parentNode` （例：node => node.parentNode.parentNode.parentNode）多尝试几次直到解决问题即可。
+
+### 代码示例
+
+```html
+<a-select
+    placeholder="请选择展示模板"
+    :options="dicts.displayTemplate"
+    :getPopupContainer="node => node.parentNode"
+/>
+```
+
+# JAsyncTreeList 异步数列表组件使用说明
+
+## 引入组件
+
+```js
+import JTreeTable from '@/components/jeecg/JTreeTable'
+export default {
+  components: { JTreeTable }
+}
+```
+
+## 所需参数
+
+| 参数        | 类型   | 必填   | 说明                                                         |
+|-------------|--------|--------|--------------------------------------------------------------|
+| rowKey      | String | 非必填 | 表格行 key 的取值，默认为"id"                                |
+| columns     | Array  | 必填   | 表格列的配置描述，具体见Antd官方文档                         |
+| url         | String | 必填   | 数据查询url                                                  |
+| childrenUrl | String | 非必填 | 查询子级时的url，若不填则使用url参数查询子级                 |
+| queryKey    | String | 非必填 | 根据某个字段查询，如果传递 id 就根据 id 查询，默认为parentId |
+| queryParams | Object | 非必填 | 查询参数，当查询参数改变的时候会自动重新查询，默认为{}       |
+| topValue    | String | 非必填 | 查询顶级时的值，如果顶级为0，则传0，默认为null               |
+| tableProps  | Object | 非必填 | 自定义给内部table绑定的props                                 |
+
+## 代码示例
+
+```html
+<template>
+  <a-card :bordered="false">
+    <j-tree-table :url="url" :columns="columns" :tableProps="tableProps"/>
+  </a-card>
+</template>
+
+<script>
+  import JTreeTable from '@/components/jeecg/JTreeTable'
+
+  export default {
+    name: 'AsyncTreeTable',
+    components: { JTreeTable },
+    data() {
+      return {
+        url: '/api/asynTreeList',
+        columns: [
+          { title: '菜单名称', dataIndex: 'name' },
+          { title: '组件', dataIndex: 'component' },
+          { title: '排序', dataIndex: 'orderNum' }
+        ],
+        selectedRowKeys: []
+      }
+    },
+     computed: {
+       tableProps() {
+         let _this = this
+         return {
+           // 列表项是否可选择
+           // 配置项见：https://vue.ant.design/components/table-cn/#rowSelection
+           rowSelection: {
+             selectedRowKeys: _this.selectedRowKeys,
+             onChange: (selectedRowKeys) => _this.selectedRowKeys = selectedRowKeys
+           }
+         }
+       }
+     }
+  }
+</script>
+```
+
+# JCheckbox 使用文档
+  
+###### 说明: antd-vue checkbox组件处理的是数组，用起来不是很方便，特二次封装，使用时只需处理字符串即可
+## 参数配置
+| 参数           | 类型   | 必填 |说明|
+|--------------|---------|----|---------|
+| options      |array   |✔| checkbox需要配置的项，是个数组，数组中每个对象包含两个属性:label(用于显示)和value(用于存储) |
+
+使用示例
+----
+```vue
+<template>
+  <a-form :form="form">
+    <a-form-item label="v-model式用法">
+      <j-checkbox v-model="sport" :options="sportOptions"></j-checkbox><span>{{ sport }}</span>
+    </a-form-item>
+
+    <a-form-item label="v-decorator式用法">
+      <j-checkbox v-decorator="['sport']" :options="sportOptions"></j-checkbox><span>{{ getFormFieldValue('sport') }}</span>
+    </a-form-item>
+  </a-form>
+</template>
+
+<script>
+  import JCheckbox from '@/components/jeecg/JCheckbox'
+  export default {
+    components: {JCheckbox},
+    data() {
+      return {
+        form: this.$form.createForm(this),
+        sport:'',
+        sportOptions:[
+          {
+            label:"足球",
+            value:"1"
+          },{
+            label:"篮球",
+            value:"2"
+          },{
+            label:"乒乓球",
+            value:"3"
+          }]
+      }
+    },
+    methods: {
+     getFormFieldValue(field){
+       return this.form.getFieldValue(field)
+     }
+    }
+  }
+</script>
+```
+
+# JCodeEditor 使用文档
+  
+###### 说明: 一个简易版的代码编辑器，支持语法高亮
+## 参数配置
+| 参数           | 类型   | 必填 |说明|
+|--------------|---------|----|---------|
+| language      |string   | | 表示当前编写代码的类型 javascript/html/css/sql |
+| placeholder      |string   | | placeholder |
+| lineNumbers      |Boolean   | | 是否显示行号 |
+| fullScreen      |Boolean   | | 是否显示全屏按钮 |
+| zIndex      |string   | | 全屏以后的z-index |
+
+使用示例
+----
+```vue
+<template>
+  <div>
+    <j-code-editor
+      language="javascript"
+      v-model="editorValue"
+      :fullScreen="true"
+      style="min-height: 100px"/>
+    {{ editorValue }}
+  </div>
+</template>
+
+<script>
+  import JCodeEditor from '@/components/jeecg/JCodeEditor'
+  export default {
+    components: {JCodeEditor},
+    data() {
+      return {
+        form: this.$form.createForm(this),
+        editorValue:'',
+      }
+    }
+  }
+</script>
+```
+
+# JFormContainer 使用文档
+  
+###### 说明: 暂用于表单禁用
+
+使用示例
+----
+```vue
+<!-- 在form下直接写这个组件，设置disabled为true就能将此form中的控件禁用 -->
+  <a-form layout="inline" :form="form" >
+    <j-form-container disabled>
+      <!-- 表单内容省略..... -->
+    </j-form-container>
+  </a-form>
+```
+
+# JImportModal 使用文档
+  
+###### 说明: 用于列表页面导入excel功能
+
+使用示例
+----
+```vue
+
+<template>
+  <!--  此处省略部分代码...... -->
+  <a-button @click="handleImportXls" type="primary" icon="upload">导入</a-button>
+  <!--  此处省略部分代码...... -->
+  <j-import-modal ref="importModal" :url="getImportUrl()" @ok="importOk"></j-import-modal>
+  <!--  此处省略部分代码...... -->
+</template>
+
+<script>
+  import JCodeEditor from '@/components/jeecg/JCodeEditor'
+  export default {
+    components: {JCodeEditor},
+    data() {
+      return {
+        //省略代码......
+      }
+    },
+    methods:{
+      //省略部分代码......
+      handleImportXls(){
+        this.$refs.importModal.show()
+      },
+      getImportUrl(){
+         return '你自己处理上传业务的后台地址'
+      },
+      importOk(){
+        this.loadData(1)
+      }
+    }
+  }
+</script>
+```
+
+# JSelectMultiple 多选下拉组件
+online用 实际开发请使用components/dict/JMultiSelectTag
+
+# JSlider 滑块验证码
+
+使用示例
+----
+```vue
+<template>
+  <div style="width: 300px">
+    <j-slider @onSuccess="sliderSuccess"></j-slider>
+  </div>
+</template>
+
+<script>
+  import JSlider from '@/components/jeecg/JSlider'
+  export default {
+    components: {JSlider},
+    data() {
+      return {
+        form: this.$form.createForm(this),
+        editorValue:'',
+      }
+    },
+    methods:{
+      sliderSuccess(){
+        console.log("验证完成")
+      }
+    }
+  }
+</script>
+```
+
+
+# JTreeSelect 树形下拉组件
+异步加载的树形下拉组件
+
+## 参数配置
+| 参数           | 类型   | 必填 |说明|
+|--------------|---------|----|---------|
+| placeholder      |string   | | placeholder |
+| dict      |string   | ✔| 表名,显示字段名,存储字段名拼接的字符串 |
+| pidField      |string   | ✔| 父ID的字段名 |
+| pidValue      |string   | | 根节点父ID的值 默认'0' 不可以设置为空,如果想使用此组件，而数据库根节点父ID为空，请修改之 |
+| multiple      |boolean   | |是否支持多选 |
+
+使用示例
+----
+```vue
+<template>
+  <a-form>
+    <a-form-item label="树形下拉测试" style="width: 300px">
+      <j-tree-select
+        v-model="departId"
+        placeholder="请选择部门"
+        dict="sys_depart,depart_name,id"
+        pidField="parent_id">
+      </j-tree-select>
+      {{ departId }}
+    </a-form-item>
+  </a-form >
+</template>
+
+<script>
+  import JTreeSelect from '@/components/jeecg/JTreeSelect'
+  export default {
+    components: {JTreeSelect},
+    data() {
+      return {
+        departId:""
+      }
+    }
+  }
+</script>
+```
+
+
--- a/jshERP-web/src/components/jeecg/README_JEditableTable.md
+++ b/jshERP-web/src/components/jeecg/README_JEditableTable.md
@@ -0,0 +1,577 @@
+# JEditableTable 帮助文档
+
+## 参数配置
+
+| 参数         | 类型    | 必填 | 说明                                                                            |
+|--------------|---------|------|---------------------------------------------------------------------------------|
+| columns      | array   | ✔️    | 表格列的配置描述，具体项见下表                                                  |
+| dataSource   | array   | ✔️    | 表格数据                                                                        |
+| loading      | boolean |      | 是否正在加载，加载中不会显示任何行，默认false                                   |
+| actionButton | boolean |      | 是否显示操作按钮，包括"新增"、"删除"，默认false                                 |
+| rowNumber    | boolean |      | 是否显示行号，默认false                                                         |
+| rowSelection | boolean |      | 是否可选择行，默认false                                                         |
+| dragSort     | boolean |      | 是否可拖动排序，默认false                                                       |
+| dragSortKey  | string  |      | 拖动排序存储的Key，无需定义在columns内也能在getValues()时获取到值，默认orderNum |
+| maxHeight    | number  |      | 设定最大高度(px)，默认400                                                       |
+| disabledRows | object  |      | 设定禁用的行，被禁用的行无法被选择和编辑，配置方法可以查看示例                  |
+| disabled     | boolean |      | 是否禁用所有行，默认false                                                       |
+
+### columns 参数详解
+
+| 参数          | 类型    | 必填 | 说明                                                                                                                                                   |
+|---------------|---------|------|--------------------------------------------------------------------------------------------------------------------------------------------------------|
+| title         | string  | ✔️    | 表格列头显示的问题                                                                                                                                     |
+| key           | string  | ✔️    | 列数据在数据项中对应的 key，必须是唯一的                                                                                                               |
+| type          | string  | ✔️    | 表单的类型，可以通过`JEditableTableUtil.FormTypes`赋值                                                                                                 |
+| width         | string  |      | 列的宽度，可以是百分比，也可以是`px`或其他单位，建议设置为百分比，且每一列的宽度加起来不应超过100%，否则可能会不能达到预期的效果。留空会自动计算百分比 |
+| placeholder   | string  |      | 表单预期值的提示信息，可以使用`${...}`变量替换文本（详见`${...} 变量使用方式`）                                                                        |
+| defaultValue  | string  |      | 默认值，在新增一行时生效                                                                                                                               |
+| validateRules | array   |      | 表单验证规则，配置方式见[validateRules 配置规则](#validaterules-配置规则)                                                                              |
+| props         | object  |      | 设置添加给表单元素的自定义属性，例如:`props:{title: 'show title'}`                                                                                     |
+| disabled      | boolean |      | 是否禁用当前列，默认false                                                                                                                              |
+
+#### 当 type=checkbox 时所需的参数
+
+| 参数           | 类型    | 必填 | 说明                                                                                                                                                                                                   |
+|----------------|---------|------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
+| defaultChecked | boolean |      | 默认值是否选中                                                                                                                                                                                         |
+| customValue    | array   |      | 自定义值，checkbox需要的是boolean值，如果数据是其他值（例如`'Y' or 'N'`）时，就会导致错误，所以提供了该属性进行转换，例：`customValue: ['Y','N']`，会将`true`转换为`'Y'`，`false`转换为`'N'`，反之亦然 |
+
+#### 当 type=select 时所需的参数
+
+| 参数       | 类型    | 必填 | 说明                                               |
+|------------|---------|------|----------------------------------------------------|
+| options    | array   | ✔️    | 下拉选项列表，详见下表                             |
+| allowInput | boolean |      | 是否允许用户输入内容，并创建新的内容               |
+| dictCode   | String  |      | 数据字典Code，若options也有值，则拼接在options后面 |
+
+##### options 所需参数
+
+| 参数      | 类型       | 必填 | 说明                                                                 |
+|-----------|------------|------|----------------------------------------------------------------------|
+| text      | string     | ✔️    | 显示标题                                                             |
+| value     | string     | ✔️    | 真实值                                                               |
+| ~~title~~ | ~~string~~ |      | ~~显示标题（已废弃，若同时填写了 title 和 text 那么优先使用 text）~~ |
+
+#### 当 type=upload 时所需的参数
+
+| 参数         | 类型    | 必填 | 说明                                                                                 |
+|--------------|---------|------|--------------------------------------------------------------------------------------|
+| action       | string  | ✔️    | 上传文件路径                                                                         |
+| token        | boolean |      | 上传的时候是否传递token                                                              |
+| responseName | string  | ✔️    | 若要从上传成功后从response中取出返回的文件名，那么这里填后台返回的包含文件名的字段名 |
+
+#### 当 type=slot 时所需的参数
+
+| 参数     | 类型   | 必填 | 说明       |
+|----------|--------|------|------------|
+| slotName | string | ✔️    | slot的名称 |
+
+### validateRules 配置规则
+
+`validateRules` 需要的是一个数组，数组里每项都是一个规则，规则是object类型，规则的各个参数如下
+
+- `required` 是否必填，可选值为`true`or`false`
+- `pattern` 正则表达式验证，只有成功匹配该正则的值才能成功通过验证
+- `handler` 自定义函数校验，使用方法请见[示例五](#示例五)
+- `message` 当验证未通过时显示的提示文本，可以使用`${...}`变量替换文本（详见`${...} 变量使用方式`）
+- 配置示例请看[示例二](#示例二)
+
+## 事件
+
+| 事件名          | 触发时机                                           | 参数                                             |
+|-----------------|----------------------------------------------------|--------------------------------------------------|
+| added           | 当添加行操作完成后触发                             |                                                  |
+| deleted         | 当删除行操作完成后触发（批量删除操作只会触发一次） | `deleteIds` 被逻辑删除的id                       |
+| selectRowChange | 当行被选中或取消选中时触发                         | `selectedRowIds` 被选中行的id                    |
+| valueChange     | 当数据发生改变的时候触发的事件                     | `{ type, row, column, value, target }` Event对象 |
+
+## 方法
+
+关于方法的如何调用的问题，请在**FAQ**中查看[方法如何调用](#方法如何调用)
+
+### initialize
+
+用于初始化表格（清空表格）
+
+- `参数:` 无
+- `返回值:` 无
+
+### resetScrollTop
+
+重置滚动条Top位置
+
+- `参数:`
+
+| 参数名 | 类型   | 必填 | 说明                                                                                                   |
+|--------|--------|------|--------------------------------------------------------------------------------------------------------|
+| top    | number |      | 新top位置，留空则滚动到上次记录的位置，用于解决切换tab选项卡时导致白屏以及自动将滚动条滚动到顶部的问题 |
+
+- `返回值:` 无
+
+### add
+
+主动添加行，默认情况下，当用户的滚动条已经在底部的时候，会将滚动条固定在底部，即添加后无需用户手动滚动，而会自动滚动到底部
+
+- `参数:`
+
+| 参数名              | 类型    | 必填 | 说明                                                                |
+|---------------------|---------|------|---------------------------------------------------------------------|
+| num                 | number  |      | 添加几行，默认为1                                                   |
+| forceScrollToBottom | boolean |      | 是否在添加后无论用户的滚动条在什么位置都强制滚动到底部，默认为false |
+
+- `返回值:` 无
+
+### removeRows
+
+主动删除一行或多行
+
+- `参数:`
+
+| 参数名 | 类型            | 必填 | 说明                                                                                       |
+|--------|-----------------|------|--------------------------------------------------------------------------------------------|
+| id     | string 或 array | ✔️    | 被删除行的id。如果要删除一个，可以直接传id，如果要删除多个，需要将多个id封装成一个数组传入 |
+
+- `返回值:` 无
+
+### removeSelectedRows
+
+主动删除被选中的行
+
+- `参数:` 无
+- `返回值:` 无
+
+### getValues
+
+用于获取表格里所有表单的值，可进行表单验证
+
+- `参数:`
+
+| 参数名   | 类型     | 必填 | 说明                                                                                                                                                      |
+|----------|----------|------|-----------------------------------------------------------------------------------------------------------------------------------------------------------|
+| callback | function | ✔️    | 获取值的回调方法，会传入`error`和`values`两个参数。`error`：未通过验证的数量，当等于`0`时代表验证通过；`values`：获取的值（即使未通过验证该字段也有数据） |
+| validate | boolean  |      | 是否进行表单验证，默认为`true`，设为`false`则代表忽略表单验证                                                                                             |
+| rowIds   | array    |      | 默认返回所有行的数据，如果传入了`rowIds`，那么就会只返回与该`rowIds`相匹配的数据，如果没有匹配的数据，就会返回空数组                                      |
+
+- `返回值:` 无
+
+
+### getValuesSync
+
+`getValues`的同步版，会直接将获取到的数据返回
+
+- `参数:` 
+
+| 参数名  | 类型   | 必填 | 说明                   |
+|---------|--------|------|------------------------|
+| options | object |      | 选项，详见下方所需参数 |
+
+- - `options` 所需参数
+
+| 参数名   | 类型    | 必填 | 说明                                                                                                                 |
+|----------|---------|------|----------------------------------------------------------------------------------------------------------------------|
+| validate | boolean |      | 是否进行表单验证，默认为`true`，设为`false`则代表忽略表单验证                                                        |
+| rowIds   | array   |      | 默认返回所有行的数据，如果传入了`rowIds`，那么就会只返回与该`rowIds`相匹配的数据，如果没有匹配的数据，就会返回空数组 |
+
+- `返回值:` object
+    - `error` 未通过验证的数量，当等于`0`时代表验证通过
+    - `values` 获取的值（即使未通过验证该字段也有数据）
+
+- `使用示例`
+
+```js
+let { error, values } = this.$refs.editableTable.getValuesSync({ validate: true, rowIds: ['rowId1', 'rowId2'] })
+if (error === 0) {
+    console.log('表单验证通过，数据：', values);
+} else {
+    console.log('未通过表单验证，数据：', values);
+}
+```
+
+### getValuesPromise
+
+`getValues`的promise版，会在`resolve`中传入获取到的值，会在`reject`中传入失败原因，例如`VALIDATE_NO_PASSED`
+
+- `参数:`
+
+| 参数名   | 类型    | 必填 | 说明                                                                                                                 |
+|----------|---------|------|----------------------------------------------------------------------------------------------------------------------|
+| validate | boolean |      | 同`getValues`的`validate`参数                                                                                        |
+| rowIds   | array   |      | 默认返回所有行的数据，如果传入了`rowIds`，那么就会只返回与该`rowIds`相匹配的数据，如果没有匹配的数据，就会返回空数组 |
+
+- `返回值:` Promise
+
+### getDeleteIds
+
+用于获取被逻辑删除的行的id，返回一个数组，用户可将该数组传入后台，并进行批量删除
+
+- `参数:` 无
+- `返回值:` array
+
+### getAll
+
+获取所有的数据，包括values、deleteIds
+会在`resolve`中传入获取到的值：`{values, deleteIds}`
+会在`reject`中传入失败原因，例如`VALIDATE_NO_PASSED`
+
+- `参数:`
+
+| 参数名   | 类型    | 必填 | 说明                          |
+|----------|---------|------|-------------------------------|
+| validate | boolean |      | 同`getValues`的`validate`参数 |
+
+- `返回值:` Promise
+
+### setValues
+
+主动设置表格中某行某列的值
+
+- `参数:`
+
+| 参数名 | 类型  | 必填 | 说明                                                       |
+|--------|-------|------|------------------------------------------------------------|
+| values | array |      | 传入一个数组，数组中的每项都是一行的新值，具体见下面的示例 |
+
+- `返回值:` 无
+- `示例：`
+
+```js
+setValues([
+    {
+        rowKey: id1, // 行的id
+        values: { // 在这里 values 中的 name 是你 columns 中配置的 key
+            'name': 'zhangsan',
+            'age': '20'
+        }
+    },
+    {
+        rowKey: id2,
+        values: {
+            'name': 'lisi',
+            'age': '23'
+        }
+    }
+])
+```
+### clearSelection
+
+主动清空选择的行
+
+- `参数:` 无
+- `返回值:` 无
+
+## 内置插槽
+
+| 插槽名       | 说明                                                 |
+|--------------|------------------------------------------------------|
+| buttonBefore | 在操作按钮的**前面**插入插槽，不受`actionButton`属性的影响 |
+| buttonAfter  | 在操作按钮的**后面**插入插槽，不受`actionButton`属性的影响 |
+
+## ${...} 变量使用方式
+
+在`placeholder`和`message`这两个属性中可以使用`${...}`变量来替换文本
+在[示例二](#示例二)中，配置了`title`为`名称`的一列，而`placeholder`配置成了`请输入${title}`，那么最终显示效果为`请输入名称`
+这就是`${...}`变量的使用方式，在`${}`中可以使用的变量有`title`、`key`、`defaultValue`这三个属性的值
+
+## JEditableTableUtil 使用说明
+
+在之前配置`columns`时提到过`JEditableTableUtil`这个工具类，那么如果想要知道详细的使用说明就请看这里
+
+### export 的常量
+
+#### FormTypes
+
+这是配置`columns.type`时用到的常量值，其中包括
+
+- `normal` 默认，直接显示值，不渲染表单
+- `input` 显示输入框
+- `inputNumber` 显示数字输入框
+- `checkbox` 显示多选框
+- `select` 显示选择器（下拉框）
+- `date` 日期选择器
+- `datetime` 日期时间选择器
+- `upload` 上传组件（文件域）
+- `slot` 自定义插槽
+
+### VALIDATE_NO_PASSED
+
+在判断表单验证是否通过时使用，如果 reject 的值 === VALIDATE_NO_PASSED 则代表表单验证未通过，你可以做相应的其他处理，反之则可能是发生了报错，可以使用 `console.error` 输出
+
+### 封装的方法
+
+#### validateTables
+
+当你的页面中存在多个JEditableTable实例的时候，如果要获取每个实例的值、判断表单验证是否通过，就会让代码变得极其冗余、繁琐，于是我们就将该操作封装成了一个函数供你调用，它可以同时获取并验证多个JEditableTable实例的值，只有当所有实例的表单验证都通过后才会返回值，否则将会告诉你具体哪个实例没有通过验证。具体使用方法请看下面的示例
+
+- `参数:`
+
+| 参数名 | 类型  | 必填 | 说明                                                   |
+|--------|-------|------|--------------------------------------------------------|
+| cases  | array |      | 传入一个数组，数组中的每项都是一个JEditableTable的实例 |
+
+- `返回值:` Promise
+- `示例：`
+
+```js
+import { validateTables, VALIDATE_NO_PASSED } from '@/utils/JEditableTableUtil'
+// 封装cases
+let cases = []
+cases.push(this.$refs.editableTable1)
+cases.push(this.$refs.editableTable2)
+cases.push(this.$refs.editableTable3)
+cases.push(this.$refs.editableTable4)
+cases.push(this.$refs.editableTable5)
+// 同时验证并获取多个实例的值
+validateTables(cases).then((all) => {
+    // all 是一个数组，每项都对应传入cases的下标，包含values和deleteIds
+    console.log('所有实例的值：', all)
+}).catch((e = {}) => {
+    // 判断表单验证是否未通过
+    if (e.error === VALIDATE_NO_PASSED) {
+        console.log('未通过验证的实例下标:', e.index)
+    } else {
+        console.error('发生异常:', e)
+    }
+})
+```
+
+## FAQ
+
+### 方法如何调用？
+
+在[示例一](#示例一)中，设定了一个 `ref="editableTable"` 的属性，那么在vue中就可以使用`this.$refs.editableTable`获取到该表格的实例，并调取其中的方法。
+假如我要调取`initialize`方法，就可以这么写：`this.$refs.editableTable.initialize()`
+
+### 如何获取表单的值？
+
+使用`getValue`方法进行获取，详见[示例三](#示例三)
+
+### 如何进行表单验证？
+
+在获取值的时候默认会进行表单验证操作，用户在输入的时候也会对正在输入的表单进行验证，只要配置好规则就可以了
+
+### 如何添加或删除一行？
+
+该功能已封装到组件中，你只需要将 `actionButton` 设置为 `true` 即可，当然你也可以在代码中主动调用新增方法或修改，具体见上方的方法介绍。
+
+### 为什么使用了ATab组件后，切换选项卡会导致白屏或滚动条位置会归零？
+
+在ATab组件中确实会导致滚动条位置归零，且不会触发`onscroll`方法，所以无法动态加载行，导致白屏的问题出现。
+解决方法是在ATab组件的`onChange`事件触发时执行实例提供的`resetScrollTop()`方法即可，但是需要注意的是：代码主动改变ATab的`activeKey`不会触发`onChange`事件，还需要你手动调用下。
+
+- `示例`
+
+```html
+<template>
+    <a-tabs @change="handleChangeTab">
+        <a-tab-pane tab="表格1" :forceRender="true" key="1">
+            <j-editable-table
+                ref="editableTable1"
+                :loading="tab1.loading"
+                :columns="tab1.columns"
+                :dataSource="tab1.dataSource"/>
+        </a-tab-pane>
+        <a-tab-pane tab="表格2" :forceRender="true" key="2">
+            <j-editable-table
+                ref="editableTable2"
+                :loading="tab2.loading"
+                :columns="tab2.columns"
+                :dataSource="tab2.dataSource"/>
+        </a-tab-pane>
+    </a-tabs>
+</template>
+```
+
+```js
+/*--- 忽略部分代码片段 ---*/
+methods: {
+
+      /** 切换tab选项卡的时候重置editableTable的滚动条状态 */
+      handleChangeTab(key) {
+        this.$refs[`editableTable${key}`].resetScrollTop()
+      }
+
+}
+/*--- 忽略部分代码片段 ---*/
+```
+
+### slot(自定义插槽)如何使用？
+
+代码示例请看：[示例四(slot)](#示例四(slot))
+
+----------------------------------------------------------------------------------------
+
+## 示例一
+
+```html
+<j-editable-table
+    ref="editableTable"
+    :loading="loading"
+    :columns="columns"
+    :dataSource="dataSource"
+    :rowNumber="true"
+    :rowSelection="true"
+    :actionButton="true"
+    style="margin-top: 8px;"
+    @selectRowChange="handleSelectRowChange"/>
+```
+
+## 示例二
+
+```js
+
+import { FormTypes } from '@/utils/JEditableTableUtil'
+
+/*--- 忽略部分代码片断 ---*/
+columns: [
+    {
+        title: '名称',
+        key: 'name',
+        type: FormTypes.input,
+        placeholder: '请输入${title}',
+        defaultValue: '称名',
+        // 表单验证规则
+        validateRules: [
+            {
+                required: true, // 必填
+                message: '${title}不能为空' // 提示的文本
+            },
+            {
+                pattern: /^[a-z|A-Z][a-z|A-Z\d_-]{0,}$/, // 正则
+                message: '${title}必须以字母开头，可包含数字、下划线、横杠'
+            }
+        ]
+    },
+    {
+        title: '年龄',
+        key: 'age',
+        type: FormTypes.inputNumber,
+        placeholder: '请输入${title}',
+        defaultValue: 18,
+        validateRules: [{required: true, message: '${title}不能为空'}]
+    }
+]
+/*--- 忽略部分代码片断 ---*/
+```
+
+## 示例三
+
+```js
+// 获取被逻辑删除的字段id
+let deleteIds = this.$refs.editableTable.getDeleteIds();
+// 获取所有表单的值，并进行验证
+this.$refs.editableTable.getValues((error, values) => {
+    // 错误数 = 0 则代表验证通过
+    if (error === 0) {
+        this.$message.success('验证通过')
+        // 将通过后的数组提交到后台或自行进行其他处理
+        console.log(deleteIds, values)
+    } else {
+        this.$message.error('验证未通过')
+    }
+})
+```
+
+## 示例四(slot)
+
+```html
+<template>
+    <j-editable-table :columns="columns" :dataSource="dataSource">
+        <!-- 定义插槽 -->
+        <!-- 这种定义插槽的写法是vue推荐的新版写法（https://cn.vuejs.org/v2/guide/components-slots.html#具名插槽），旧版已被废弃的写法不再支持 -->
+        <!-- 若webstorm这样写报错，请看这篇文章：https://blog.csdn.net/lxq_9532/article/details/81870651 -->
+        <template v-slot:action="props">
+            <a @click="handleDelete(props)">删除</a>
+        </template>
+    </j-editable-table>
+</template>
+<script>
+    import { FormTypes } from '@/utils/JEditableTableUtil'
+    import JEditableTable from '@/components/jeecg/JEditableTable'
+    export default {
+        components: { JEditableTable },
+        data() {
+            return {
+                columns: [
+                    // ...
+                    {
+                        title: '操作',
+                        key: 'action',
+                        width: '8%',
+                        type: FormTypes.slot, // 定义该列为 自定义插值列 
+                        slotName: 'action' // slot 的名称，对应 v-slot 冒号后面和等号前面的内容
+                    }
+                ]
+            }
+        },
+        methods: {
+            /* a 标签的点击事件，删除当前选中的行 */
+            handleDelete(props) {
+                // 参数解释
+                // props.index ：当前行的下标
+                // props.text ：当前值，可能是defaultValue定义的值，也可能是从dataSource中取出的值
+                // props.rowId ：当前选中行的id，如果是新增行则是临时id
+                // props.column ：当前操作的列
+                // props.getValue ：这是一个function，执行后可以获取当前行的所有值（禁止在template中使用）
+                //                  例：const value = props.getValue()
+                // props.target ：触发当前事件的实例，可直接调用该实例内的方法（禁止在template中使用）
+                //                  例：target.add()
+
+                // 使用实例：删除当前操作的行
+                let { rowId, target } = props
+                target.removeRows(rowId)
+            }
+        }
+    }
+</script>
+```
+
+## 示例五
+
+```js
+// 该示例是自定义函数校验
+columns: [
+    {
+        title: '字段名称',
+        key: 'dbFieldName',
+        type: FormTypes.input,
+        defaultValue: '',
+        validateRules: [
+            {
+                // 自定义函数校验 handler
+                handler(type, value, row, column, callback, target) {
+                    // type 触发校验的类型（input、change、blur）
+                    // value 当前校验的值
+                    // callback(flag, message) 方法必须执行且只能执行一次
+                    //          flag = 是否通过了校验，不填写或者填写 null 代表不进行任何操作
+                    //          message = 提示的类型，默认使用配置的 message
+                    // target 行编辑的实例对象
+
+                    if (type === 'blur') {
+
+                        if (value === 'abc') {
+                            callback(false, '${title}不能是abc') // false = 未通过，可以跟自定义提示
+                            return
+                        }
+
+                        let { values } = target.getValuesSync({ validate: false })
+                        let count = 0
+                        for (let val of values) {
+                            if (val['dbFieldName'] === value) {
+                                if (++count >= 2) {
+                                    callback(false, '${title}不能重复')
+                                    return
+                                }
+                            }
+                        }
+                        callback(true) // true = 通过验证
+                    } else {
+                        callback() // 不填写或者填写 null 代表不进行任何操作
+                    }
+                },
+                message: '${title}默认提示'
+            }
+        ]
+    },
+]
+```
--- a/jshERP-web/src/components/jeecg/index.js
+++ b/jshERP-web/src/components/jeecg/index.js
@@ -0,0 +1,9 @@
+import JModal from './JModal'
+import JFormContainer from './JFormContainer.vue'
+
+export default {
+  install(Vue) {
+    Vue.component('JFormContainer', JFormContainer)
+    Vue.component(JModal.name, JModal)
+  }
+}
--- a/jshERP-web/src/components/jeecg/minipop/JFilePop.vue
+++ b/jshERP-web/src/components/jeecg/minipop/JFilePop.vue
@@ -0,0 +1,113 @@
+<template>
+  <div>
+    <a-modal
+      title="文件上传"
+      :width="width"
+      :visible="visible"
+      @ok="ok"
+      cancelText="取消"
+      @cancel="close">
+      <!--style="top: 20px;"-->
+      <j-upload :file-type="fileType" :value="filePath" @change="handleChange" :disabled="disabled"></j-upload>
+    </a-modal>
+  </div>
+</template>
+
+<script>
+  import JUpload from '@/components/jeecg/JUpload'
+  import { getFileAccessHttpUrl } from '@/api/manage';
+
+  const getFileName=(path)=>{
+    if(path.lastIndexOf("\\")>=0){
+      let reg=new RegExp("\\\\","g");
+      path = path.replace(reg,"/");
+    }
+    return path.substring(path.lastIndexOf("/")+1);
+  }
+
+  export default {
+    name: 'JFilePop',
+    components: { JUpload },
+    props:{
+      title:{
+        type:String,
+        default:'',
+        required:false
+      },
+      position:{
+        type:String,
+        default:'right',
+        required:false
+      },
+      height:{
+        type:Number,
+        default:200,
+        required:false
+      },
+      width:{
+        type:Number,
+        default:520,
+        required:false
+      },
+
+      popContainer:{
+        type:String,
+        default:'',
+        required:false
+      },
+      disabled:{
+        type:Boolean,
+        default:false,
+        required:false
+      }
+    },
+    data(){
+      return {
+        visible:false,
+        filePath:'',
+        id:'',
+        fileType:'file'
+
+      }
+    },
+    methods:{
+      handleChange(value){
+        this.filePath = value;
+      },
+      show(id,value,flag){
+        this.id = id;
+        this.filePath = value;
+        this.visible=true
+        if(flag === 'img'){
+          this.fileType = 'image'
+        }else{
+          this.fileType = 'file'
+        }
+
+      },
+      ok(){
+        if(!this.filePath){
+          this.$message.error("未上传任何文件")
+          return false;
+        }
+        let arr = this.filePath.split(",")
+        let obj = {
+          name:getFileName(arr[0]),
+          url:getFileAccessHttpUrl(arr[0]),
+          path:this.filePath,
+          status: 'done',
+          id:this.id
+        }
+        this.$emit('ok',obj)
+        this.visible=false
+      },
+      close(){
+        this.visible=false
+      }
+    }
+  }
+</script>
+
+<style scoped>
+
+</style>
--- a/jshERP-web/src/components/jeecg/minipop/JInputPop.vue
+++ b/jshERP-web/src/components/jeecg/minipop/JInputPop.vue
@@ -0,0 +1,98 @@
+<template>
+  <a-popover trigger="contextmenu" v-model="visible" :placement="position">
+    <!--"(node) => node.parentNode.parentNode"-->
+    <div slot="title">
+      <span>{{ title }}</span>
+      <span style="float: right" title="关闭">
+        <a-icon type="close" @click="visible=false"/>
+      </span>
+    </div>
+    <a-input :value="inputContent" @change="handleInputChange">
+      <a-icon slot="suffix" type="fullscreen" @click.stop="pop" />
+    </a-input>
+    <div slot="content">
+      <textarea :value="inputContent" @input="handleInputChange" :style="{ height: height + 'px', width: width + 'px' }"></textarea>
+    </div>
+  </a-popover>
+</template>
+
+<script>
+  export default {
+    name: 'JInputPop',
+    props:{
+      title:{
+        type:String,
+        default:'',
+        required:false
+      },
+      position:{
+        type:String,
+        default:'right',
+        required:false
+      },
+      height:{
+        type:Number,
+        default:200,
+        required:false
+      },
+      width:{
+        type:Number,
+        default:150,
+        required:false
+      },
+      value:{
+        type:String,
+        required:false
+      },
+      popContainer:{
+        type:String,
+        default:'',
+        required:false
+      }
+
+    },
+    data(){
+      return {
+        visible:false,
+        inputContent:''
+
+      }
+    },
+
+    watch:{
+      value:{
+        immediate:true,
+        handler:function(){
+          if(this.value && this.value.length>0){
+            this.inputContent = this.value;
+          }
+        }
+      },
+    },
+    model: {
+      prop: 'value',
+      event: 'change'
+    },
+    methods:{
+      handleInputChange(event){
+        this.inputContent = event.target.value
+        this.$emit('change',this.inputContent)
+      },
+      pop(){
+        this.visible=true
+      },
+      getPopupContainer(node){
+        if(!this.popContainer){
+          return node.parentNode
+        }else{
+          return document.getElementById(this.popContainer)
+        }
+
+      }
+    }
+  }
+</script>
+
+<style scoped>
+
+</style>
--- a/jshERP-web/src/components/jeecg/modal/JCronModal.vue
+++ b/jshERP-web/src/components/jeecg/modal/JCronModal.vue
@@ -0,0 +1,928 @@
+<template>
+  <a-modal
+          title="corn表达式"
+          :width="modalWidth"
+          :visible="visible"
+          :confirmLoading="confirmLoading"
+          @ok="handleSubmit"
+          @cancel="close"
+          cancelText="关闭">
+    <div class="card-container">
+      <a-tabs type="card">
+        <a-tab-pane key="1" type="card">
+          <span slot="tab"><a-icon type="schedule" /> 秒</span>
+          <a-radio-group v-model="result.second.cronEvery">
+            <a-row>
+              <a-radio value="1">每一秒钟</a-radio>
+            </a-row>
+            <a-row>
+              <a-radio value="2">每隔
+                <a-input-number size="small" v-model="result.second.incrementIncrement" :min="1" :max="59"></a-input-number>
+                秒执行 从
+                <a-input-number size="small" v-model="result.second.incrementStart" :min="0" :max="59"></a-input-number>
+                秒开始
+              </a-radio>
+            </a-row>
+            <a-row>
+              <a-radio value="3">具体秒数(可多选)</a-radio>
+              <a-select style="width:354px;" size="small" mode="multiple" v-model="result.second.specificSpecific">
+                <a-select-option v-for="(val,index) in 60" :key="index" :value="index">{{ index }}</a-select-option>
+              </a-select>
+            </a-row>
+            <a-row>
+              <a-radio value="4">周期从
+                <a-input-number size="small" v-model="result.second.rangeStart" :min="1" :max="59"></a-input-number>
+                到
+                <a-input-number size="small" v-model="result.second.rangeEnd" :min="0" :max="59"></a-input-number>
+                秒
+              </a-radio>
+            </a-row>
+          </a-radio-group>
+        </a-tab-pane>
+        <a-tab-pane key="2">
+          <span slot="tab"><a-icon type="schedule" />分</span>
+          <div class="tabBody">
+            <a-radio-group v-model="result.minute.cronEvery">
+              <a-row>
+                <a-radio value="1">每一分钟</a-radio>
+              </a-row>
+              <a-row>
+                <a-radio value="2">每隔
+                  <a-input-number size="small" v-model="result.minute.incrementIncrement" :min="1" :max="60"></a-input-number>
+                  分执行 从
+                  <a-input-number size="small" v-model="result.minute.incrementStart" :min="0" :max="59"></a-input-number>
+                  分开始
+                </a-radio>
+              </a-row>
+              <a-row>
+                <a-radio value="3">具体分钟数(可多选)</a-radio>
+                <a-select style="width:340px;" size="small" mode="multiple" v-model="result.minute.specificSpecific">
+                  <a-select-option v-for="(val,index) in Array(60)" :key="index" :value="index"> {{ index }}</a-select-option>
+                </a-select>
+              </a-row>
+              <a-row>
+                <a-radio value="4">周期从
+                  <a-input-number size="small" v-model="result.minute.rangeStart" :min="1" :max="60"></a-input-number>
+                  到
+                  <a-input-number size="small" v-model="result.minute.rangeEnd" :min="0" :max="59"></a-input-number>
+                  分
+                </a-radio>
+              </a-row>
+            </a-radio-group>
+          </div>
+        </a-tab-pane>
+        <a-tab-pane key="3">
+          <span slot="tab"><a-icon type="schedule" /> 时</span>
+          <div class="tabBody">
+            <a-radio-group v-model="result.hour.cronEvery">
+              <a-row>
+                <a-radio value="1">每一小时</a-radio>
+              </a-row>
+              <a-row>
+                <a-radio value="2">每隔
+                  <a-input-number size="small" v-model="result.hour.incrementIncrement" :min="0" :max="23"></a-input-number>
+                  小时执行 从
+                  <a-input-number size="small" v-model="result.hour.incrementStart" :min="0" :max="23"></a-input-number>
+                  小时开始
+                </a-radio>
+              </a-row>
+              <a-row>
+                <a-radio class="long" value="3">具体小时数(可多选)</a-radio>
+                <a-select style="width:340px;" size="small" mode="multiple" v-model="result.hour.specificSpecific">
+                  <a-select-option v-for="(val,index) in Array(24)" :key="index" >{{ index }}</a-select-option>
+                </a-select>
+              </a-row>
+              <a-row>
+                <a-radio value="4">周期从
+                  <a-input-number size="small" v-model="result.hour.rangeStart" :min="0" :max="23"></a-input-number>
+                  到
+                  <a-input-number size="small" v-model="result.hour.rangeEnd" :min="0" :max="23"></a-input-number>
+                  小时
+                </a-radio>
+              </a-row>
+            </a-radio-group>
+          </div>
+        </a-tab-pane>
+        <a-tab-pane key="4">
+          <span slot="tab"><a-icon type="schedule" />  天</span>
+          <div class="tabBody">
+            <a-radio-group v-model="result.day.cronEvery">
+              <a-row>
+                <a-radio value="1">每一天</a-radio>
+              </a-row>
+              <a-row>
+                <a-radio value="2">每隔
+                  <a-input-number size="small" v-model="result.week.incrementIncrement" :min="1" :max="7"></a-input-number>
+                  周执行 从
+                  <a-select size="small" v-model="result.week.incrementStart">
+                    <a-select-option v-for="(val,index) in Array(7)" :key="index" :value="index+1">{{ weekDays[index] }}</a-select-option>
+                  </a-select>
+                  开始
+                </a-radio>
+              </a-row>
+              <a-row>
+                <a-radio value="3">每隔
+                  <a-input-number size="small" v-model="result.day.incrementIncrement" :min="1" :max="31"></a-input-number>
+                  天执行 从
+                  <a-input-number size="small" v-model="result.day.incrementStart" :min="1" :max="31"></a-input-number>
+                  天开始
+                </a-radio>
+              </a-row>
+              <a-row>
+                <a-radio class="long" value="4">具体星期几(可多选)</a-radio>
+                <a-select style="width:340px;" size="small" mode="multiple" v-model="result.week.specificSpecific">
+                  <a-select-option v-for="(val,index) in Array(7)" :key="index" :value="index+1">{{ weekDays[index] }}</a-select-option>
+                </a-select>
+              </a-row>
+              <a-row>
+                <a-radio class="long" value="5">具体天数(可多选)</a-radio>
+                <a-select style="width:354px;" size="small" mode="multiple" v-model="result.day.specificSpecific">
+                  <a-select-option v-for="(val,index) in Array(31)" :key="index" :value="index+1">{{ index+1 }}</a-select-option>
+                </a-select>
+              </a-row>
+              <a-row>
+                <a-radio value="6">在这个月的最后一天</a-radio>
+              </a-row>
+              <a-row>
+                <a-radio value="7">在这个月的最后一个工作日</a-radio>
+              </a-row>
+              <a-row>
+                <a-radio value="8">在这个月的最后一个
+                  <a-select size="small" v-model="result.day.cronLastSpecificDomDay">
+                    <a-select-option v-for="(val,index) in Array(7)" :key="index" :value="index+1">{{ weekDays[index] }}</a-select-option>
+                  </a-select>
+                </a-radio>
+              </a-row>
+              <a-row>
+                <a-radio value="9">
+                  在本月底前
+                  <a-input-number size="small" v-model="result.day.cronDaysBeforeEomMinus" :min="1" :max="31"></a-input-number>
+                  天
+                </a-radio>
+              </a-row>
+              <a-row>
+                <a-radio value="10">最近的工作日（周一至周五）至本月
+                  <a-input-number size="small" v-model="result.day.cronDaysNearestWeekday" :min="1" :max="31"></a-input-number>
+                  日
+                </a-radio>
+              </a-row>
+              <a-row>
+                <a-radio value="11">在这个月的第
+                  <a-input-number size="small" v-model="result.week.cronNthDayNth" :min="1" :max="5"></a-input-number>
+                  个
+                  <a-select size="small" v-model="result.week.cronNthDayDay">
+                    <a-select-option v-for="(val,index) in Array(7)" :key="index" :value="index+1">{{ weekDays[index] }}</a-select-option>
+                  </a-select>
+
+                </a-radio>
+              </a-row>
+            </a-radio-group>
+          </div>
+        </a-tab-pane>
+        <a-tab-pane key="5">
+          <span slot="tab"><a-icon type="schedule" /> 月</span>
+          <div class="tabBody">
+            <a-radio-group v-model="result.month.cronEvery">
+              <a-row>
+                <a-radio value="1">每一月</a-radio>
+              </a-row>
+              <a-row>
+                <a-radio value="2">每隔
+                  <a-input-number size="small" v-model="result.month.incrementIncrement" :min="0" :max="12"></a-input-number>
+                  月执行 从
+                  <a-input-number size="small" v-model="result.month.incrementStart" :min="0" :max="12"></a-input-number>
+                  月开始
+                </a-radio>
+              </a-row>
+              <a-row>
+                <a-radio class="long" value="3">具体月数(可多选)</a-radio>
+                <a-select style="width:354px;" size="small" filterable mode="multiple" v-model="result.month.specificSpecific">
+                  <a-select-option v-for="(val,index) in Array(12)" :key="index" :value="index+1">{{ index+1 }}</a-select-option>
+                </a-select>
+              </a-row>
+              <a-row>
+                <a-radio value="4">从
+                  <a-input-number size="small" v-model="result.month.rangeStart" :min="1" :max="12"></a-input-number>
+                  到
+                  <a-input-number size="small" v-model="result.month.rangeEnd" :min="1" :max="12"></a-input-number>
+                  月之间的每个月
+                </a-radio>
+              </a-row>
+            </a-radio-group>
+          </div>
+        </a-tab-pane>
+        <a-tab-pane key="6">
+          <span slot="tab"><a-icon type="schedule" /> 年</span>
+          <div class="tabBody">
+            <a-radio-group v-model="result.year.cronEvery">
+              <a-row>
+                <a-radio value="1">每一年</a-radio>
+              </a-row>
+              <a-row>
+                <a-radio value="2">每隔
+                  <a-input-number size="small" v-model="result.year.incrementIncrement" :min="1" :max="99"></a-input-number>
+                  年执行 从
+                  <a-input-number size="small" v-model="result.year.incrementStart" :min="2019" :max="2119"></a-input-number>
+                  年开始
+                </a-radio>
+              </a-row>
+              <a-row>
+                <a-radio class="long" value="3">具体年份(可多选)</a-radio>
+                <a-select style="width:354px;" size="small" filterable mode="multiple" v-model="result.year.specificSpecific">
+                  <a-select-option v-for="(val,index) in Array(100)" :key="index" :value="2019+index">{{ 2019+index }}</a-select-option>
+                </a-select>
+              </a-row>
+              <a-row>
+                <a-radio value="4">从
+                  <a-input-number size="small" v-model="result.year.rangeStart" :min="2019" :max="2119"></a-input-number>
+                  到
+                  <a-input-number size="small" v-model="result.year.rangeEnd" :min="2019" :max="2119"></a-input-number>
+                  年之间的每一年
+                </a-radio>
+              </a-row>
+            </a-radio-group>
+          </div>
+        </a-tab-pane>
+      </a-tabs>
+      <div class="bottom">
+        <span class="value">{{this.cron }}</span>
+      </div>
+    </div>
+  </a-modal>
+</template>
+<script>
+  export default {
+    name:'VueCron',
+    props:['data'],
+    data(){
+      return {
+        visible: false,
+        confirmLoading:false,
+        size:'large',
+        weekDays:['天','一','二','三','四','五','六'].map(val=>'星期'+val),
+        result: {
+          second:{},
+          minute:{},
+          hour:{},
+          day:{},
+          week:{},
+          month:{},
+          year:{}
+        },
+        defaultValue: {
+          second:{
+            cronEvery:'',
+            incrementStart:3,
+            incrementIncrement:5,
+            rangeStart:1,
+            rangeEnd:0,
+            specificSpecific:[],
+          },
+          minute:{
+            cronEvery:'',
+            incrementStart:3,
+            incrementIncrement:5,
+            rangeStart:1,
+            rangeEnd:'0',
+            specificSpecific:[],
+          },
+          hour:{
+            cronEvery:'',
+            incrementStart:3,
+            incrementIncrement:5,
+            rangeStart:'0',
+            rangeEnd:'0',
+            specificSpecific:[],
+          },
+          day:{
+            cronEvery:'',
+            incrementStart:1,
+            incrementIncrement:'1',
+            rangeStart:'',
+            rangeEnd:'',
+            specificSpecific:[],
+            cronLastSpecificDomDay:1,
+            cronDaysBeforeEomMinus:1,
+            cronDaysNearestWeekday:1,
+          },
+          week:{
+            cronEvery:'',
+            incrementStart:1,
+            incrementIncrement:1,
+            specificSpecific:[],
+            cronNthDayDay:1,
+            cronNthDayNth:1,
+          },
+          month:{
+            cronEvery:'',
+            incrementStart:3,
+            incrementIncrement:5,
+            rangeStart:1,
+            rangeEnd:1,
+            specificSpecific:[],
+          },
+          year:{
+            cronEvery:'',
+            incrementStart:2017,
+            incrementIncrement:1,
+            rangeStart:2019,
+            rangeEnd: 2019,
+            specificSpecific:[],
+          },
+          label:''
+        }
+      }
+    },
+    computed: {
+      modalWidth(){
+        return 608;
+      },
+      secondsText() {
+        let seconds = '';
+        let cronEvery=this.result.second.cronEvery||'';
+        switch (cronEvery.toString()){
+          case '1':
+            seconds = '*';
+            break;
+          case '2':
+            seconds = this.result.second.incrementStart+'/'+this.result.second.incrementIncrement;
+            break;
+          case '3':
+            this.result.second.specificSpecific.map(val=> {seconds += val+','});
+            seconds = seconds.slice(0, -1);
+            break;
+          case '4':
+            seconds = this.result.second.rangeStart+'-'+this.result.second.rangeEnd;
+            break;
+        }
+        return seconds;
+      },
+      minutesText() {
+        let minutes = '';
+        let cronEvery=this.result.minute.cronEvery||'';
+        switch (cronEvery.toString()){
+          case '1':
+            minutes = '*';
+            break;
+          case '2':
+            minutes = this.result.minute.incrementStart+'/'+this.result.minute.incrementIncrement;
+            break;
+          case '3':
+            this.result.minute.specificSpecific.map(val=> {
+              minutes += val+','
+            });
+            minutes = minutes.slice(0, -1);
+            break;
+          case '4':
+            minutes = this.result.minute.rangeStart+'-'+this.result.minute.rangeEnd;
+            break;
+        }
+        return minutes;
+      },
+      hoursText() {
+        let hours = '';
+        let cronEvery=this.result.hour.cronEvery||'';
+        switch (cronEvery.toString()){
+          case '1':
+            hours = '*';
+            break;
+          case '2':
+            hours = this.result.hour.incrementStart+'/'+this.result.hour.incrementIncrement;
+            break;
+          case '3':
+            this.result.hour.specificSpecific.map(val=> {
+              hours += val+','
+            });
+            hours = hours.slice(0, -1);
+            break;
+          case '4':
+            hours = this.result.hour.rangeStart+'-'+this.result.hour.rangeEnd;
+            break;
+        }
+        return hours;
+      },
+      daysText() {
+        let days='';
+        let cronEvery=this.result.day.cronEvery||'';
+        switch (cronEvery.toString()){
+          case '1':
+            break;
+          case '2':
+          case '4':
+          case '11':
+            days = '?';
+            break;
+          case '3':
+            days = this.result.day.incrementStart+'/'+this.result.day.incrementIncrement;
+            break;
+          case '5':
+            this.result.day.specificSpecific.map(val=> {
+              days += val+','
+            });
+            days = days.slice(0, -1);
+            break;
+          case '6':
+            days = "L";
+            break;
+          case '7':
+            days = "LW";
+            break;
+          case '8':
+            days = this.result.day.cronLastSpecificDomDay + 'L';
+            break;
+          case '9':
+            days = 'L-' + this.result.day.cronDaysBeforeEomMinus;
+            break;
+          case '10':
+            days = this.result.day.cronDaysNearestWeekday+"W";
+            break
+        }
+        return days;
+      },
+      weeksText() {
+        let weeks = '';
+        let cronEvery=this.result.day.cronEvery||'';
+        switch (cronEvery.toString()){
+          case '1':
+          case '3':
+          case '5':
+            weeks = '?';
+            break;
+          case '2':
+            weeks = this.result.week.incrementStart+'/'+this.result.week.incrementIncrement;
+            break;
+          case '4':
+            this.result.week.specificSpecific.map(val=> {
+              weeks += val+','
+            });
+            weeks = weeks.slice(0, -1);
+            break;
+          case '6':
+          case '7':
+          case '8':
+          case '9':
+          case '10':
+            weeks = "?";
+            break;
+          case '11':
+            weeks = this.result.week.cronNthDayDay+"#"+this.result.week.cronNthDayNth;
+            break;
+        }
+        return weeks;
+      },
+      monthsText() {
+        let months = '';
+        let cronEvery=this.result.month.cronEvery||'';
+        switch (cronEvery.toString()){
+          case '1':
+            months = '*';
+            break;
+          case '2':
+            months = this.result.month.incrementStart+'/'+this.result.month.incrementIncrement;
+            break;
+          case '3':
+            this.result.month.specificSpecific.map(val=> {
+              months += val+','
+            });
+            months = months.slice(0, -1);
+            break;
+          case '4':
+            months = this.result.month.rangeStart+'-'+this.result.month.rangeEnd;
+            break;
+        }
+        return months;
+      },
+      yearsText() {
+        let years = '';
+        let cronEvery=this.result.year.cronEvery||'';
+        switch (cronEvery.toString()){
+          case '1':
+            years = '*';
+            break;
+          case '2':
+            years = this.result.year.incrementStart+'/'+this.result.year.incrementIncrement;
+            break;
+          case '3':
+            this.result.year.specificSpecific.map(val=> {
+              years += val+','
+            });
+            years = years.slice(0, -1);
+            break;
+          case '4':
+            years = this.result.year.rangeStart+'-'+this.result.year.rangeEnd;
+            break;
+        }
+        return years;
+      },
+      cron(){
+        return `${this.secondsText||'*'} ${this.minutesText||'*'} ${this.hoursText||'*'} ${this.daysText||'*'} ${this.monthsText||'*'} ${this.weeksText||'?'} ${this.yearsText||'*'}`
+      },
+    },
+    watch:{
+      visible:{
+        handler() {
+          // if(this.data){
+          //   //this. result = Object.keys(this.data.value).length>0?this.deepCopy(this.data.value):this.deepCopy(this.defaultValue);
+          //   //this.result = Object.keys(this.data.value).length>0?clone(this.data.value):clone(this.defaultValue);
+          //   //this.result = Object.keys(this.data.value).length>0?clone(JSON.parse(this.data.value)):clone(this.defaultValue);
+          //   this.result = Object.keys(this.data.value).length>0?JSON.parse(this.data.value):JSON.parse(JSON.stringify(this.defaultValue));
+          // }else{
+          //   //this.result = this.deepCopy(this.defaultValue);
+          //   //this.result = clone(this.defaultValue);
+          //   this.result = JSON.parse(JSON.stringify(this.defaultValue));
+          // }
+          let label = this.data;
+          if(label){
+            this.secondsReverseExp(label)
+            this.minutesReverseExp(label);
+            this.hoursReverseExp(label);
+            this.daysReverseExp(label);
+            this.daysReverseExp(label);
+            this.monthsReverseExp(label);
+            this.yearReverseExp(label);
+            JSON.parse(JSON.stringify(label));
+          }else {
+            this.result = JSON.parse(JSON.stringify(this.defaultValue));
+          }
+        }
+      }
+    },
+    methods: {
+      show(){
+        this.visible = true;
+        // console.log('secondsReverseExp',this.secondsReverseExp(this.data));
+        // console.log('minutesReverseExp',this.minutesReverseExp(this.data));
+        // console.log('hoursReverseExp',this.hoursReverseExp(this.data));
+        // console.log('daysReverseExp',this.daysReverseExp(this.data));
+        // console.log('monthsReverseExp',this.monthsReverseExp(this.data));
+        // console.log('yearReverseExp',this.yearReverseExp(this.data));
+
+      },
+      handleSubmit(){
+        this.$emit('ok',this.cron);
+        this.close();
+        this.visible = false;
+      },
+      close(){
+        this.visible = false;
+      },
+      secondsReverseExp(seconds) {
+        let val =  seconds.split(" ")[0];
+        //alert(val);
+        let second = {
+          cronEvery:'',
+          incrementStart:3,
+          incrementIncrement:5,
+          rangeStart:1,
+          rangeEnd:0,
+          specificSpecific:[]
+        };
+        switch (true) {
+          case val.includes('*'):
+            second.cronEvery = '1';
+            break;
+          case val.includes('/'):
+            second.cronEvery = '2';
+            second.incrementStart = val.split('/')[0];
+            second.incrementIncrement = val.split('/')[1];
+            break;
+          case val.includes(','):
+            second.cronEvery = '3';
+            second.specificSpecific = val.split(',').map(Number).sort();
+            break;
+          case val.includes('-'):
+            second.cronEvery = '4';
+            second.rangeStart = val.split('-')[0];
+            second.rangeEnd = val.split('-')[1];
+            break;
+          default:
+            second.cronEvery = '1';
+        }
+        this.result.second = second;
+      },
+      minutesReverseExp(minutes) {
+        let val =  minutes.split(" ")[1];
+        let minute = {
+          cronEvery:'',
+          incrementStart:3,
+          incrementIncrement:5,
+          rangeStart:1,
+          rangeEnd:0,
+          specificSpecific:[],
+        }
+        switch (true) {
+          case val.includes('*'):
+            minute.cronEvery = '1';
+            break;
+          case val.includes('/'):
+            minute.cronEvery = '2';
+            minute.incrementStart = val.split('/')[0];
+            minute.incrementIncrement = val.split('/')[1];
+            break;
+          case val.includes(','):
+            minute.cronEvery = '3';
+            minute.specificSpecific = val.split(',').map(Number).sort();
+            break;
+          case val.includes('-'):
+            minute.cronEvery = '4';
+            minute.rangeStart = val.split('-')[0];
+            minute.rangeEnd = val.split('-')[1];
+            break;
+          default:
+            minute.cronEvery = '1';
+        }
+        this.result.minute = minute;
+      },
+      hoursReverseExp(hours) {
+        let val =  hours.split(" ")[2];
+        let hour ={
+            cronEvery:'',
+            incrementStart:3,
+            incrementIncrement:5,
+            rangeStart:1,
+            rangeEnd:'0',
+            specificSpecific:[],
+          };
+        switch (true) {
+          case val.includes('*'):
+            hour.cronEvery = '1';
+            break;
+          case val.includes('/'):
+            hour.cronEvery = '2';
+            hour.incrementStart = val.split('/')[0];
+            hour.incrementIncrement = val.split('/')[1];
+            break;
+          case val.includes(','):
+            hour.cronEvery = '3';
+            hour.specificSpecific = val.split(',').map(Number).sort();
+            break;
+          case val.includes('-'):
+            hour.cronEvery = '4';
+            hour.rangeStart = val.split('-')[0];
+            hour.rangeEnd = val.split('-')[1];
+            break;
+          default:
+            hour.cronEvery = '1';
+          }
+        this.result.hour = hour;
+      },
+      daysReverseExp(cron) {
+        let days =  cron.split(" ")[3];
+        let weeks =  cron.split(" ")[5];
+        let day ={
+          cronEvery:'',
+          incrementStart:1,
+          incrementIncrement:1,
+          rangeStart:1,
+          rangeEnd:1,
+          specificSpecific:[],
+          cronLastSpecificDomDay:1,
+          cronDaysBeforeEomMinus:1,
+          cronDaysNearestWeekday:1,
+        };
+        let week = {
+            cronEvery:'',
+            incrementStart:1,
+            incrementIncrement:1,
+            specificSpecific:[],
+            cronNthDayDay:1,
+            cronNthDayNth:'1',
+        };
+        if (!days.includes('?')) {
+          switch (true) {
+            case days.includes('*'):
+              day.cronEvery = '1';
+              break;
+            case days.includes('?'):
+              // 2、4、11
+              break;
+            case days.includes('/'):
+              day.cronEvery = '3';
+              day.incrementStart = days.split('/')[0];
+              day.incrementIncrement = days.split('/')[1];
+              break;
+            case days.includes(','):
+              day.cronEvery = '5';
+              day.specificSpecific = days.split(',').map(Number).sort();
+              // day.specificSpecific.forEach(function (value, index) {
+              //   day.specificSpecific[index] = value -1;
+              // });
+              break;
+            case days.includes('LW'):
+              day.cronEvery = '7';
+              break;
+            case days.includes('L-'):
+              day.cronEvery = '9';
+              day.cronDaysBeforeEomMinus = days.split('L-')[1];
+              break;
+            case days.includes('L'):
+
+              //alert(days);
+              if(days.len == 1){
+                day.cronEvery = '6';
+                day.cronLastSpecificDomDay = '1';
+              }
+              else
+              {
+                day.cronEvery = '8';
+                day.cronLastSpecificDomDay = Number(days.split('L')[0]);
+              }
+              break;
+            case days.includes('W'):
+              day.cronEvery = '10';
+              day.cronDaysNearestWeekday = days.split('W')[0];
+              break;
+            default:
+              day.cronEvery = '1';
+          }
+        }else {
+          switch (true){
+            case weeks.includes('/'):
+              day.cronEvery = '2';
+              week.incrementStart = weeks.split("/")[0];
+              week.incrementIncrement = weeks.split("/")[1];
+              break;
+            case weeks.includes(','):
+              day.cronEvery = '4';
+              week.specificSpecific = weeks.split(',').map(Number).sort();
+              break;
+            case '#':
+              day.cronEvery = '11';
+              week.cronNthDayDay = weeks.split("#")[0];
+              week.cronNthDayNth = weeks.split("#")[1];
+              break;
+            default:
+              day.cronEvery = '1';
+              week.cronEvery = '1';
+          }
+        }
+        this.result.day = day;
+        this.result.week = week;
+      },
+      monthsReverseExp(cron) {
+        let months = cron.split(" ")[4];
+        let month = {
+          cronEvery:'',
+            incrementStart:3,
+            incrementIncrement:5,
+            rangeStart:1,
+            rangeEnd:1,
+            specificSpecific:[],
+        };
+        switch (true){
+          case months.includes('*'):
+            month.cronEvery = '1';
+            break;
+          case months.includes('/'):
+            month.cronEvery = '2';
+            month.incrementStart = months.split('/')[0];
+            month.incrementIncrement = months.split('/')[1];
+            break;
+          case months.includes(','):
+            month.cronEvery = '3';
+            month.specificSpecific = months.split(',').map(Number).sort();
+            break;
+          case months.includes('-'):
+            month.cronEvery = '4';
+            month.rangeStart = months.split('-')[0];
+            month.rangeEnd = months.split('-')[1];
+            break;
+          default:
+            month.cronEvery = '1';
+        }
+        this.result.month = month;
+      },
+      yearReverseExp(cron) {
+        let years = cron.split(" ")[6];
+        let year = {
+          cronEvery:'',
+          incrementStart:3,
+          incrementIncrement:5,
+          rangeStart:2019,
+          rangeEnd:2019,
+          specificSpecific:[],
+        };
+        switch (true){
+          case years.includes('*'):
+            year.cronEvery = '1';
+            break;
+          case years.includes('/'):
+            year.cronEvery = '2';
+            year.incrementStart = years.split('/')[0];
+            year.incrementIncrement = years.split('/')[1];
+            break;
+          case years.includes(','):
+            year.cronEvery = '3';
+            year.specificSpecific = years.split(',').map(Number).sort();
+            break;
+          case years.includes('-'):
+            year.cronEvery = '4';
+            year.rangeStart = years.split('-')[0];
+            year.rangeEnd = years.split('-')[1];
+            break;
+          default:
+            year.cronEvery = '1';
+        }
+        this.result.year = year;
+      }
+    }
+  }
+</script>
+
+<style lang="less">
+  .card-container {
+    background: #fff;
+    overflow: hidden;
+    padding: 12px;
+    position: relative;
+    width: 100%;
+    .ant-tabs{
+      border:1px solid #e6ebf5;
+      padding: 0;
+      .ant-tabs-bar {
+        margin: 0;
+        outline: none;
+        border-bottom: none;
+        .ant-tabs-nav-container{
+          margin: 0;
+          .ant-tabs-tab {
+            padding: 0 24px!important;
+            background-color: #f5f7fa!important;
+            margin-right: 0px!important;
+            border-radius: 0;
+            line-height: 38px;
+            border: 1px solid transparent!important;
+            border-bottom: 1px solid #e6ebf5!important;
+          }
+          .ant-tabs-tab-active.ant-tabs-tab{
+            color: #409eff;
+            background-color: #fff!important;
+            border-right:1px solid #e6ebf5!important;
+            border-left:1px solid #e6ebf5!important;
+            border-bottom:1px solid #fff!important;
+            font-weight: normal;
+            transition:none!important;
+          }
+        }
+      }
+      .ant-tabs-tabpane{
+        padding: 15px;
+        .ant-row{
+          margin: 10px 0;
+        }
+        .ant-select,.ant-input-number{
+          width: 100px;
+        }
+      }
+    }
+  }
+</style>
+<style lang="less" scoped>
+  .container-widthEn{
+    width: 755px;
+  }
+  .container-widthCn{
+    width: 608px;
+  }
+  .language{
+    text-align: center;
+    position: absolute;
+    right: 13px;
+    top: 13px;
+    border: 1px solid transparent;
+    height: 40px;
+    line-height: 38px;
+    font-size: 16px;
+    color: #409eff;
+    z-index: 1;
+    background: #f5f7fa;
+    outline: none;
+    width: 47px;
+    border-bottom: 1px solid #e6ebf5;
+    border-radius: 0;
+  }
+  .card-container{
+    .bottom{
+      display: flex;
+      justify-content: center;
+      padding: 10px 0 0 0;
+      .cronButton{
+        margin: 0 10px;
+        line-height: 40px;
+      }
+    }
+  }
+  .tabBody{
+    .a-row{
+      margin: 10px 0;
+      .long{
+        .a-select{
+          width:354px;
+        }
+      }
+      .a-input-number{
+        width: 110px;
+      }
+    }
+  }
+</style>
--- a/Show More
+++ b/Show More