Jeecg-Boot V2.0版本正式发布

zhangdaihao
1 parent 2a8cd2d0
Showing 820 changed files with 87569 additions and 21965 deletions
README.md
V2.0 版本升级日志.txt
ant-design-jeecg-vue/.eslintignore
ant-design-jeecg-vue/LICENSE
ant-design-jeecg-vue/README.md
ant-design-jeecg-vue/package.json
ant-design-jeecg-vue/public/index.html
ant-design-jeecg-vue/src/api/api.js
ant-design-jeecg-vue/src/assets/less/common.css → ant-design-jeecg-vue/src/assets/less/common.less
ant-design-jeecg-vue/src/assets/pdf4.jpg
ant-design-jeecg-vue/src/components/bpm/DynamicComponent.vue
ant-design-jeecg-vue/src/components/bpm/FormCommonModal.vue
ant-design-jeecg-vue/src/components/bpm/ProcNodeInfoModel.vue
ant-design-jeecg-vue/src/components/bpm/ProcessInstPicModal.vue
ant-design-jeecg-vue/src/components/chart/AreaChartTy.vue
ant-design-jeecg-vue/src/components/chart/Bar.vue
ant-design-jeecg-vue/src/components/chart/BarAndLine.vue
ant-design-jeecg-vue/src/components/chart/BarMultid.vue
ant-design-jeecg-vue/src/components/chart/DashChartDemo.vue
ant-design-jeecg-vue/src/components/chart/LineChartMultid.vue
 Jeecg-Boot 快速开发平台(前后端分离版本)
 ===============
-当前最新版本： 1.1（发布日期：20190415）
+当前最新版本： 2.0.0（发布日期：20190520）
 项目介绍：
 -----------------------------------
@@ -52,11 +52,11 @@ Jeecg-Boot快速开发平台，可以应用在任何J2EE项目的开发中，尤
 -----------------------------------
 #### 后端
-- 基础框架：Spring Boot 2.0.3.RELEASE
+- 基础框架：Spring Boot 2.1.3.RELEASE
 - 持久层框架：Mybatis-plus_3.0.6
-- 安全框架：Apache Shiro 1.4.0-RC2，Jwt_3.4.1
+- 安全框架：Apache Shiro 1.4.0，Jwt_3.7.0
 - 数据库连接池：阿里巴巴Druid 1.1.10
@@ -89,7 +89,7 @@ Jeecg-Boot快速开发平台，可以应用在任何J2EE项目的开发中，尤
 - 依赖管理：Maven
-- 数据库：MySQL5.0  &  Oracle 11g
+- 数据库：MySQL5.0  &  Oracle 11g & Sqlserver2005
 - 缓存：Redis
@@ -120,6 +120,7 @@ Jeecg-Boot快速开发平台，可以应用在任何J2EE项目的开发中，尤
 │  ├─角色管理
 │  ├─菜单管理
 │  ├─权限设置（支持按钮权限、数据权限）
+│  ├─表单权限（控制字段禁用、隐藏）
 │  ├─部门管理
 │  └─字典管理
 ├─智能化功能
@@ -130,11 +131,11 @@ Jeecg-Boot快速开发平台，可以应用在任何J2EE项目的开发中，尤
 │  ├─高级查询器（弹窗自动组合查询条件）
 │  ├─Excel导入导出工具集成（支持单表，一对多 导入导出）
 │  ├─平台移动自适应支持
-├─Online在线开发
-│  ├─Online在线表单(暂未开源)
-│  ├─Online在线图表(暂未开源)
+├─Online在线开发(暂未开源)
+│  ├─Online在线表单
+│  ├─Online在线图表
+│  ├─Online图表模板配置
 │  ├─Online在线报表
-│  ├─消息中心（支持短信、邮件、微信推送等等）
 ├─系统监控
 │  ├─性能扫描监控
 │  │  ├─监控 Redis
@@ -142,9 +143,11 @@ Jeecg-Boot快速开发平台，可以应用在任何J2EE项目的开发中，尤
 │  │  ├─jvm
 │  │  ├─服务器信息
 │  │  ├─请求追踪
+│  │  ├─磁盘监控
 │  ├─定时任务
 │  ├─系统日志
-│  ├─数据日志（记录数据变更情况，可进行版本对比查看数据变更记录）
+│  ├─消息中心（支持短信、邮件、微信推送等等）
+│  ├─数据日志（记录数据快照，可对比快照，查看数据变更情况）
 │  ├─系统通知
 │  ├─SQL监控
 │  ├─swagger-ui(在线接口文档)
@@ -166,9 +169,14 @@ Jeecg-Boot快速开发平台，可以应用在任何J2EE项目的开发中，尤
 │  └─一对多TAB例子
 │  └─内嵌table例子
 │  └─常用选择组件
-│  └─一对多JEditable
+│  └─异步树table
 │  └─接口模拟测试
 │  └─一对多JEditable
+│  └─图片拖拽排序
+│  └─图片翻页
+│  └─图片预览
+│  └─PDF预览
+│  └─分屏功能
 │─封装通用组件	
 │  ├─行编辑表格JEditableTable
 │  └─省略显示组件
@@ -177,7 +185,15 @@ Jeecg-Boot快速开发平台，可以应用在任何J2EE项目的开发中，尤
 │  └─通用选择用户组件
 │  └─通过组织机构选择用户组件
 │  └─报表组件封装
-│  └─等等组件
+│  └─字典组件
+│  └─下拉多选组件
+│  └─选人组件
+│  └─选部门组件
+│  └─通过部门选人组件
+│  └─封装曲线、柱状图、饼状图、折线图等等报表的组件（经过封装，使用简单）
+│  └─在线code编辑器
+│  └─上传文件组件
+│  └─等等
 │─更多页面模板
 │  ├─各种高级表单
 │  ├─各种列表效果
@@ -242,7 +258,7 @@ Jeecg-Boot快速开发平台，可以应用在任何J2EE项目的开发中，尤
 - jdk8
 - mysql
 - redis
-- 数据库脚步：jeecg-boot\docs\jeecg-boot_1.1.0-20190415.sql
+- 数据库脚步：jeecg-boot\docs\jeecg-boot-mysql.sql
 - 默认登录账号： admin/123456
+版本更新日志
+
+1.java项目结构重构，采用maven多模块module构建
+2.数据库兼容专项改造工作，支持mysql、oracle、SqlServer提供了对应脚本
+3.表单权限实现（可控制字段隐藏、字段禁用）
+4.数据权限完善（实现组织机构自动注入逻辑、用户拥有多部门采用选择部门登录机制 等等）
+5.完善加强行编辑表格控件 JEditableTable
+6.完善导出导入逻辑，采用shiro权限控制，解决获取不到登录人问题
+7.封装JTreeTable组件，异步加载树列表
+8.完善打印组件，支持canvas报表自适应打印
+9.登陆增加验证码
+10.封装共通组件：用户选择控件、部门选择组件、选择多用户排序组件等
+11.消息模板支持富文本编辑器
+12.添加菜单默认路由类型，智能补数据功能的bug修复
+13.字典标签支持disabled属性、支持radio类型
+14.监控页面重构
+15.新增磁盘监控功能
+16.新增在线pdf预览功能
+17.新增分屏功能
+18.解决用户管理新增上传图片无法修改图片的问题
+19.代码生成器模板功能完善，追加注解自动生成swaagerUI接口文档
+20.集成boostrap风格swaggerUI在线文档
+21.重构在线定时任务,启动bug解决
+22.springboot版本升级2.1.3
+23.重构获取用户菜单和权限方法，通过token获取，接口更安全
+24.online导入导出（一对多）完善
+25.类注释不规范修改
+26.升级autopoi版本，解决发布后导入路径问题
+27.新增我的部门管理功能
+28.首页菜单优化，支持单独滚动，上方菜单模式支持IE
+29.图片预览插件
+30.图片翻页功能
+31.图片拖拽排序示例
+32.常用组件各种封装和示例代码
+33.多选checkbox组件封装
+34.提供数据快照功能，记录单据每次变更内容
+35.图形报表封装组件完善，提供对应的示例和文档
+36.封装JCodeEditor组件，在线编码编辑器
+37.封装下拉多选组件
+
+Issues解决清单：
+
+https://github.com/zhangdaiscott/jeecg-boot/issues/104
+https://github.com/zhangdaiscott/jeecg-boot/issues/97
+https://github.com/zhangdaiscott/jeecg-boot/issues/90
+https://github.com/zhangdaiscott/jeecg-boot/issues/89
+https://github.com/zhangdaiscott/jeecg-boot/issues/87
+https://github.com/zhangdaiscott/jeecg-boot/issues/82
+https://github.com/zhangdaiscott/jeecg-boot/issues/81
+https://github.com/zhangdaiscott/jeecg-boot/issues/79
+https://github.com/zhangdaiscott/jeecg-boot/issues/77
+https://github.com/zhangdaiscott/jeecg-boot/issues/73
+https://github.com/zhangdaiscott/jeecg-boot/issues/70
+https://github.com/zhangdaiscott/jeecg-boot/issues/65
+https://github.com/zhangdaiscott/jeecg-boot/issues/61
+https://github.com/zhangdaiscott/jeecg-boot/issues/38
+
+
+
+
+v1.1升级到v2.0 升级不兼容问题
+
+  1. 混入js更名
+   src/mixins/JEditableTableOneToManyMixin.js --rename--> JEditableTableMixin.js
+   修改方案： 全文搜索JEditableTableOneToManyMixin替换为JEditableTableMixin
+
+
+  2.excel导入逻辑
+     需要设置headers参数，因为导入导出都加了shiro控制
+     给<a-upload  标签加上 :headers="tokenHeader"
+  3.excel导出逻辑，需要制定导出文件名字
+    handleExportXls('导出excel名字')
+
+  4. 样式冲突问题
+    全文搜索ant-layout-content删除下面一段代码
+
+   .ant-layout-content {
+     margin: 12px 16px 0 !important;
+   }
+
+   5.所有页面样式没有scoped的加上
+   <style scoped>
 \ No newline at end of file
+/src
 \ No newline at end of file
 MIT License
-Copyright (c) 2019 jeecg-boot
+Copyright (c) 2019 DaiHao Zhang
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal
 Ant Design Jeecg Vue
 ====
-当前最新版本： 1.1.0（发布日期：20190415）
+当前最新版本： 2.0.0（发布日期：20190518）
 Overview
 ----
 {
   "name": "vue-antd-jeecg",
-  "version": "1.1.0",
+  "version": "2.0.0",
   "private": true,
   "scripts": {
     "serve": "vue-cli-service serve --open",
@@ -15,6 +15,8 @@
     "ant-design-vue": "^1.3.1",
     "apexcharts": "^3.6.5",
     "axios": "^0.18.0",
+    "clipboard": "^2.0.4",
+    "codemirror": "^5.46.0",
     "dayjs": "^1.8.0",
     "enquire.js": "^2.1.6",
     "js-cookie": "^2.2.0",
@@ -29,10 +31,14 @@
     "vue-class-component": "^6.0.0",
     "vue-cropper": "^0.4.8",
     "vue-i18n": "^8.7.0",
+    "vue-loader": "^15.7.0",
     "vue-ls": "^3.2.0",
-    "vue-print-nb-jeecg": "^1.0.5",
+    "vue-photo-preview": "^1.1.3",
+    "vue-print-nb-jeecg": "^1.0.7",
     "vue-property-decorator": "^7.3.0",
     "vue-router": "^3.0.1",
+    "vue-splitpane": "^1.0.4",
+    "vuedraggable": "^2.20.0",
     "vuex": "^3.0.1",
     "vuex-class": "^0.3.1"
   },
@@ -224,6 +224,7 @@
     window._CONFIG = {};
     window._CONFIG['domianURL'] = 'http://localhost:8080/jeecg-boot';
     window._CONFIG['imgDomainURL'] = 'http://localhost:8080/jeecg-boot/sys/common/view';
+    window._CONFIG['pdfDomainURL'] = 'http://localhost:8080/jeecg-boot/sys/common/pdf/pdfPreviewIframe';
   </script>
 </head>
@@ -5,7 +5,6 @@ import { getAction,deleteAction,putAction,postAction} from &#39;@/api/manage&#39;
 ////图片预览请求地址
 // const imgView = "http://localhost:8080/jeecg-boot/sys/common/view/";
-
 //角色管理
 const addRole = (params)=>postAction("/sys/role/add",params);
 const editRole = (params)=>putAction("/sys/role/edit",params);
@@ -39,7 +38,8 @@ const queryTreeListForRole = (params)=&gt;getAction(&quot;/sys/role/queryTreeList&quot;,param
 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)=>getAction("/sys/permission/queryByUser",params);
+//const queryPermissionsByUser = (params)=>getAction("/sys/permission/queryByUser",params);
+const queryPermissionsByUser = (params)=>getAction("/sys/permission/getUserPermissionByToken",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);
@@ -130,7 +130,7 @@ export {
   queryUserByDepId,
   queryUserRoleMap,
   duplicateCheck,
-  queryTreeListForRole
+  queryTreeListForRole,
 }
-/*列表上方操作按钮*/
+/*列表上方操作按钮区域*/
 .ant-card-body .table-operator {
   margin-bottom: 18px;
 }
-
+/** Button按钮间距 */
+.table-operator .ant-btn {
+  margin-right: 6px
+}
 /*列表td的padding设置 可以控制列表大小*/
 .ant-table-tbody .ant-table-row td {
   padding-top: 15px;
@@ -26,4 +29,14 @@
   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}
+
+<template>
+  <component ref="compModel" :is="comp" :formData="formData" v-if="comp" @ok="callBackOk" @close="callBackClose"></component>
+</template>
+<script>
+  export default {
+    name: 'DynamicComponent',
+    data () {
+      return {
+        compName: this.path
+      }
+    },
+    computed: {
+      comp: function () {
+        return () => import(`@/views/${this.compName}.vue`)
+      }
+    },
+    props: ['path','formData'],
+    methods: {
+      add () {
+        this.$refs.compModel.add();
+      },
+      callBackClose () {
+        this.$emit('close');
+      },
+      handleOk () {
+        this.$refs.compModel.handleOk();
+      },
+      callBackOk(){
+        this.$emit('ok');
+        this.close();
+      },
+    }
+  }
+</script>
 \ No newline at end of file
+<template>
+  <a-modal
+    :title="title"
+    :width="width"
+    :visible="visible"
+    :confirmLoading="confirmLoading"
+    @ok="handleOk"
+    @cancel="handleCancel"
+    destroyOnClose
+    cancelText="关闭">
+    <a-spin :spinning="confirmLoading">
+        <dynamic-component ref="dynamiclink" :path="path" :formData="formData" @ok="callBackOk" @close="callBackClose"></dynamic-component>
+    </a-spin>
+  </a-modal>
+</template>
+
+<script>
+
+  import DynamicComponent from "./DynamicComponent";
+
+  export default {
+    name: "FormCommonModal",
+    props: ['path'],
+    components: {
+      DynamicComponent
+    },
+    data () {
+      return {
+        title:"操作",
+        width:"80%",
+        visible: false,
+        confirmLoading: false,
+        formData:{},
+      }
+    },
+    created () {
+    },
+    methods: {
+      add () {
+        this.formData =[];
+        this.title = "新增";
+        this.visible = true;
+        this.$refs.dynamiclink.add();
+      },
+      edit (record) {
+        var  data = {
+          dataId:record.id,
+        }
+        this.formData = data;
+        this.visible = true;
+      },
+      callBackClose () {
+        this.$emit('close');
+        this.visible = false;
+      },
+      handleOk () {
+        this.$refs.dynamiclink.handleOk();
+      },
+      callBackOk(){
+        this.$emit('ok');
+        this.callBackClose();
+      },
+      handleCancel () {
+        this.callBackClose()
+      },
+    }
+  }
+</script>
+
+<style scoped>
+
+</style>
 \ No newline at end of file
+<template>
+  <a-modal
+    :title="title"
+    :width="280"
+    :visible="visible"
+    :confirmLoading="confirmLoading"
+    :bodyStyle ="bodyStyle"
+    :mask = "false"
+    destroyOnClose
+    :footer="null"
+    @cancel="handleCancel"
+    cancelText="关闭">
+
+    <a-spin :spinning="confirmLoading">
+      <div style="height: 300px;overflow: hidden;overflow-y: auto;overflow-x: auto;">
+        <template v-for="(item, key, index) in nodeInfos">
+          <table class="gridtable">
+            <tbody>
+            <tr>
+              <th width="90">任务名称</th>
+              <td width="150">{{ item.taskName}}</td>
+            </tr>
+            <tr>
+              <th width="90">执行人</th>
+              <td width="150">{{ item.taskAssigneeId}}</td>
+            </tr>
+            <tr>
+              <th width="90">开始时间</th>
+              <td width="150">{{ item.taskBeginTime }}</td>
+            </tr>
+            <tr>
+              <th width="90">结束时间</th>
+              <td width="150">{{ item.taskEndTime }}</td>
+            </tr>
+            <tr>
+              <th width="90">耗时</th>
+              <td width="150">{{ item.durationStr }}</td>
+            </tr>
+            <tr>
+              <th width="90">意见</th>
+              <td width="150">{{ item.remarks }}</td>
+            </tr>
+            </tbody>
+          </table>
+        </template>
+      </div>
+    </a-spin>
+  </a-modal>
+</template>
+
+<script>
+  import { httpAction } from '@/api/manage'
+  import pick from 'lodash.pick'
+
+  export default {
+    name: "ProcNodeInfoModel",
+    data () {
+      return {
+        title:"任务审批详情",
+        visible: false,
+        bodyStyle:{
+          padding: "0",
+        },
+        confirmLoading: false,
+        validatorRules:{
+        },
+        nodeInfos:[],
+      }
+    },
+    created () {
+    },
+    methods: {
+      showInfo(record,taskId) {
+        this.nodeInfos = [];
+        for (var item of record) {
+          if(item.taskId == taskId){
+            this.nodeInfos.push(item);
+          }
+        }
+        this.visible = true;
+      },
+      close() {
+        this.nodeInfos = [];
+        this.visible = false;
+      },
+      handleCancel () {
+        this.nodeInfos = [];
+        this.visible = false;
+      },
+
+    }
+  }
+</script>
+
+<style scoped>
+  table.gridtable {
+    margin: 0 auto;
+    margin-top: 10px;
+    font-family: verdana,arial,sans-serif;
+    font-size:12px;
+    color:#333333;
+    border-width: 1px;
+    border-color: #ddd;
+    border-collapse: collapse;
+  }
+  table.gridtable th {
+    border-width: 1px;
+    padding: 8px;
+    border-style: solid;
+    border-color: #ddd;
+    background-color: #eee;
+  }
+  table.gridtable td {
+    border-width: 1px;
+    padding: 8px;
+    border-style: solid;
+    border-color: #ddd;
+    background-color: #ffffff;
+  }
+</style>
 \ No newline at end of file
+<template>
+  <a-modal
+    :title="title"
+    :width="900"
+    :visible="visible"
+    :confirmLoading="confirmLoading"
+    @cancel="handleCancel"
+    :bodyStyle="bodyStyle"
+    style="top: 50px;"
+    destroyOnClose
+    :footer="null"
+    cancelText="关闭">
+    
+    <a-spin :spinning="confirmLoading">
+      <img :src="picUrl" alt="流程图" usemap="#planetmap"/>
+      <map name="planetmap">
+        <template v-for="(item, key, index) in nodePositionInfo.positionList">
+          <area shape="rect" :coords="item.coords" title="Venus" @mouseover="showNodeInfo(nodePositionInfo.hisTasks,item.id)">
+        </template>
+      </map>
+    </a-spin>
+    <proc-node-info-model ref="nodeInfoModel"></proc-node-info-model>
+  </a-modal>
+</template>
+
+<script>
+  import { getAction } from '@/api/manage'
+  import qs from 'qs';
+  import ProcNodeInfoModel from "./ProcNodeInfoModel.vue";
+
+  export default {
+    components: {ProcNodeInfoModel},
+    name: "ProcessInstPicModal",
+    data () {
+      return {
+        title:"操作",
+        visible: false,
+        nodePositionInfo:{},
+        model: {},
+        labelCol: {
+          xs: { span: 24 },
+          sm: { span: 5 },
+        },
+        wrapperCol: {
+          xs: { span: 24 },
+          sm: { span: 16 },
+        },
+        bodyStyle:{
+          "overflow-y":"auto",
+          "overflow-x":"auto",
+          height:(window.innerHeight-280)+"px",
+        },
+        confirmLoading: false,
+        picUrl:"",
+        url: {
+          getProcessInfo: "/process/extActFlowData/getProcessInfo",
+          getNodePositionInfo:"/act/task/getNodePositionInfo",
+        },
+      }
+    },
+    created () {
+    },
+    methods: {
+      preview(flowCode,dataId){
+        this.visible = true;
+        var params = {
+          flowCode:flowCode,
+          dataId:dataId
+        };//查询条件
+        this.confirmLoading = true;
+        getAction(this.url.getProcessInfo,params).then((res)=>{
+          if(res.success){
+            var processInstanceId = res.result.processInstanceId;
+            this.picUrl =  this.getResourceURL(processInstanceId);
+            this.getNodePositionInfoData(processInstanceId);
+            console.log("---流程图----",this.picUrl)
+          }else{
+            this.$message.warning(res.message);
+          }
+        }).catch(e => {
+          console.error(e)
+        }).then(() => {
+          this.confirmLoading = false;
+        })
+
+
+      },
+      close () {
+        this.$emit('close');
+        this.visible = false;
+      },
+      handleCancel () {
+        this.close()
+      },
+      // 获取静态资源访问地址
+      getResourceURL(processInstanceId) {
+        var params = qs.stringify({
+          //'token': Cookies.get('token'),
+          '_t': Date.parse(new Date())/1000,
+          'processInstanceId': processInstanceId
+        })
+        return `${window._CONFIG['domianURL']}/act/process/processPic?${params}`
+      },
+      // 获取静态资源访问地址
+      getResourceURL(processInstanceId) {
+        var params = qs.stringify({
+          //'token': Cookies.get('token'),
+          '_t': Date.parse(new Date())/1000,
+          'processInstanceId': processInstanceId
+        })
+        return `${window._CONFIG['domianURL']}/act/process/processPic?${params}`
+      },
+
+      // 查询坐标信息数据
+      getNodePositionInfoData(processInstanceId) {
+        var params = {processInstanceId:processInstanceId};//查询条件
+        getAction(this.url.getNodePositionInfo,params).then(res => {
+          if (res.success) {
+            this.nodePositionInfo = res.result
+          }
+        }).catch(e => {
+          console.error(e)
+        }).then(() => {
+        })
+      },
+      showNodeInfo(data,taskId){
+        this.$refs.nodeInfoModel.close();
+        this.$refs.nodeInfoModel.showInfo(data,taskId);
+      },
+    }
+  }
+</script>
+
+<style scoped>
+
+</style>
 \ No newline at end of file
 <template>
-  <div :style="{ padding: '0 0 32px 32px' }">
+  <div :style="{ padding: '0' }">
     <h4 :style="{ marginBottom: '20px' }">{{ title }}</h4>
     <v-chart ref="chart" :forceFit="true" :height="height" :data="dataSource" :scale="scale">
-      <v-tooltip/>
+      <v-tooltip :shared="false"/>
       <v-axis/>
-      <v-line position="x*y" :size="lineSize"/>
-      <v-area position="x*y"/>
+      <v-line position="x*y" :size="lineSize" :color="lineColor"/>
+      <v-area position="x*y" :color="color"/>
     </v-chart>
   </div>
@@ -38,6 +38,16 @@
         type: String,
         default: 'y'
       },
+      // Y轴最小值
+      min: {
+        type: Number,
+        default: 0
+      },
+      // Y轴最大值
+      max: {
+        type: Number,
+        default: null
+      },
       // 图表高度
       height: {
         type: Number,
@@ -47,13 +57,23 @@
       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 }
+          { dataKey: 'y', title: this.y, alias: this.y, min: this.min, max: this.max }
         ]
       }
     },
 <template>
   <div :style="{ padding: '0 0 32px 32px' }">
     <h4 :style="{ marginBottom: '20px' }">{{ title }}</h4>
-    <v-chart :forceFit="true" :height="height" :data="dataSource" :padding="padding">
+    <v-chart :forceFit="true" :height="height" :data="dataSource" :scale="scale" :padding="padding">
       <v-tooltip/>
       <v-axis/>
       <v-bar position="x*y"/>
@@ -19,6 +19,10 @@
         type: Array,
         required: true
       },
+      yaxisText: {
+        type: String,
+        default: 'y'
+      },
       title: {
         type: String,
         default: ''
@@ -31,6 +35,14 @@
     data() {
       return { padding: ['auto', 'auto', '40', '50'] }
     },
+    computed: {
+      scale() {
+        return [{
+          dataKey: 'y',
+          alias: this.yaxisText
+        }]
+      }
+    },
     mounted() {
       triggerWindowResizeEvent()
     }
+<template>
+  <div :style="{ padding: '0 0 32px 32px' }">
+    <h4 :style="{ marginBottom: '20px' }">{{ title }}</h4>
+    <v-chart :forceFit="true" :height="height" :data="data" :scale="scale">
+      <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>
+
+  export default {
+    name: 'BarMultid',
+    props: {
+      title: {
+        type: String,
+        default: ''
+      },
+      dataSource: {
+        type: Array,
+        default: () => [
+          { type: '10:10', bar: 2, line: 2 },
+          { type: '10:15', bar: 6, line: 3 },
+          { type: '10:20', bar: 2, line: 5 },
+          { type: '10:25', bar: 9, line: 1 },
+          { type: '10:30', bar: 2, line: 3 },
+          { type: '10:35', bar: 2, line: 1 },
+          { type: '10:40', bar: 1, line: 2 }
+        ]
+      },
+      height: {
+        type: Number,
+        default: 400
+      }
+    },
+    data() {
+      return {
+        scale: [{
+          dataKey: 'bar',
+          min: 0
+        }, {
+          dataKey: 'line',
+          min: 0
+        }]
+      }
+    },
+    computed: {
+      data() {
+        return this.dataSource
+      }
+    }
+  }
+</script>
 \ No newline at end of file
 <template>
   <div :style="{ padding: '0 0 32px 32px' }">
     <h4 :style="{ marginBottom: '20px' }">{{ title }}</h4>
-    <v-chart :forceFit="true" :height="height" :data="data" :padding="['auto', 'auto', '40', '50']">
+    <v-chart :forceFit="true" :height="height" :data="data">
       <v-tooltip />
       <v-axis />
       <v-legend />
@@ -13,11 +13,6 @@
 <script>
   import { DataSet } from '@antv/data-set'
-  const sourceDataConst = [
-    { 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 }
-  ];
-  const fieldsConst = ['Jan.', 'Feb.', 'Mar.', 'Apr.', 'May', 'Jun.', 'Jul.', 'Aug.'];
   export default {
     name: 'BarMultid',
     props: {
@@ -26,12 +21,15 @@
         default: ''
       },
       dataSource:{
-        type:Array,
-        default:()=>[]
+        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:()=>[]
+        type: Array,
+        default: () => ['Jan.', 'Feb.', 'Mar.', 'Apr.', 'May', 'Jun.', 'Jul.', 'Aug.']
       },
       height: {
         type: Number,
@@ -40,35 +38,28 @@
     },
     data() {
       return {
-        data:"",
         adjust: [{
           type: 'dodge',
-          marginRatio: 1 / 32,
-        }],
-      };
-    },
-    watch: {
-      'dataSource': function () {
-        this.drawChart();
+          marginRatio: 1 / 32
+        }]
       }
     },
-    mounted(){
-      this.drawChart()
-    },
-    methods:{
-      drawChart(){
-        let temp = sourceDataConst;
-        if(this.dataSource && this.dataSource.length>0){
-          temp = this.dataSource
-        }
-        const dv = new DataSet.View().source(temp);
+    computed: {
+      data() {
+        const dv = new DataSet.View().source(this.dataSource)
         dv.transform({
           type: 'fold',
-          fields:(!this.fields||this.fields.length==0)?fieldsConst:this.fields,
+          fields: this.fields,
           key: 'x',
-          value: 'y',
-        });
-        this.data=dv.rows;
+          value: 'y'
+        })
+
+        // bar 使用不了 - 和 / 所以替换下
+        return dv.rows.map(row => {
+          row.x = row.x.replace(/[-/]/g, '_')
+          return row
+        })
+
       }
     }
   }
 <template>
   <div :style="{ padding: '0 0 32px 32px' }">
-    <v-chart :forceFit="true" :height="height" :data="data" :scale="scale">
+    <v-chart :forceFit="true" :height="350" :data="chartData" :scale="scale">
       <v-coord type="polar" :startAngle="-202.5" :endAngle="22.5" :radius="0.75"></v-coord>
       <v-axis
         dataKey="value"
@@ -45,7 +45,7 @@
 </template>
 <script>
-  import {registerShape} from 'viser-vue';
+  import { registerShape } from 'viser-vue';
   registerShape('point', 'pointer', {
     draw(cfg, container) {
@@ -87,67 +87,64 @@
     nice: false,
   }];
-  const sourceData = [
-    {value: 6.7},
+  const data = [
+    { value: 7.0 },
   ];
   export default {
-    name: "DashChartDemo",
-    props: {
-      value: {
+    name:"DashChartDemo",
+    props:{
+      datasource:{
         type: Number,
-        default: 6.7
+        default:7
       },
       title: {
         type: String,
         default: ''
-      },
-      height: {
-        type: Number,
-        default: 254
       }
     },
-    created() {
-      if (!this.value) {
-        this.data = sourceData;
-      } else {
-        this.data = [
-          {value: this.value},
+    created(){
+      if(!this.datasource){
+        this.chartData = data;
+      }else{
+        this.chartData = [
+          { value: this.datasource },
         ];
       }
-      this.getData()
+      this.getChartData()
     },
     watch: {
-      'value': function (val) {
-        this.data = [
-          {value: val},
+      'datasource': function (val) {
+        this.chartData = [
+          { value: val},
         ];
-        this.getData();
+        this.getChartData();
       }
     },
-    methods: {
-      getData() {
-        if (this.data && this.data.length > 0) {
-          this.abcd = this.data[0].value * 10
-        } else {
+    methods:{
+      getChartData(){
+        if(this.chartData && this.chartData.length>0){
+          this.abcd = this.chartData[0].value * 10
+        }else{
           this.abcd = 70
         }
       },
-      getHtmlGuideHtml() {
+      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' +
+          '<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.data[0].value, 0.945]
+      getArcGuide2End(){
+        return [this.chartData[0].value, 0.945]
       }
     },
     data() {
       return {
-        data: [],
+        chartData:[],
+        height: 400,
         scale: scale,
-        abcd: 70,
+        abcd:70,
         axisLabel: {
           offset: -16,
           textStyle: {
 <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" :padding="['auto', 'auto', '40', '50']">
-      <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 :force-fit="true" :height="height" :data="data" :scale="scale">
+      <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>
@@ -14,23 +14,6 @@
 <script>
   import { DataSet } from '@antv/data-set'
-  const sourceDataConst = [
-    { 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 }
-  ];
-
-
-
   export default {
     name: 'LineChartMultid',
     props: {
@@ -38,58 +21,52 @@
         type: String,
         default: ''
       },
-      dataSource:{
-        type:Array,
-        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,
+      fields: {
+        type: Array,
         default: () => ['jeecg', 'jeebt']
       },
-      height:{
-        type:Number,
-        default:254
+      height: {
+        type: Number,
+        default: 254
       }
     },
     data() {
       return {
-        data:"",
         scale: [{
           dataKey: 'x',
           min: 0,
           max: 1
         }],
-        style: { stroke: '#fff', lineWidth: 1 },
-      };
-    },
-    watch: {
-      'dataSource': function () {
-        this.drawChart();
+        style: { stroke: '#fff', lineWidth: 1 }
       }
     },
-    mounted(){
-      this.drawChart()
-    },
-    methods:{
-      drawChart(){
-        let temp = sourceDataConst;
-        if (this.dataSource && this.dataSource.length > 0) {
-          temp = this.dataSource.map(item => {
-            // 为了防止直接修改源数据导致报错
-            let obj = Object.assign({}, item)
-            obj.type = obj.x
-            return obj
-          })
-        }
-        const dv = new DataSet.View().source(temp);
+    computed: {
+      data() {
+        const dv = new DataSet.View().source(this.dataSource)
         dv.transform({
           type: 'fold',
           fields: this.fields,
           key: 'x',
-          value: 'y',
-        });
-
-        this.data=dv.rows;
+          value: 'y'
+        })
+        return dv.rows
       }
     }
   }
@@ -11,20 +11,6 @@
 <script>
   const DataSet = require('@antv/data-set')
-  const sourceData = [
-    { item: '事例一', percent: 40 },
-    { item: '事例二', percent: 21 },
-    { item: '事例三', percent: 17 },
-    { item: '事例四', percent: 13 },
-    { item: '事例五', percent: 9 }
-  ]
-
-  const scale = [{
-    dataKey: 'percent',
-    min: 0,
-    formatter: '.0%'
-  }]
-
   export default {
     props: {
       title: {
@@ -37,37 +23,22 @@
       },
       dataSource: {
         type: Array,
-        default: () => []
-      }
-    },
-    created() {
-      this.change()
-    },
-    watch: {
-      'dataSource': function() {
-        this.change()
-      }
-    },
-    methods: {
-      change() {
-        if (this.dataSource.length === 0) {
-          this.data = sourceData
-        } else {
-          const dv = new DataSet.View().source(this.dataSource)
-          dv.transform({
-            type: 'percent',
-            field: 'count',
-            dimension: 'item',
-            as: 'percent'
-          })
-          this.data = dv.rows
-        }
+        default: () => [
+          { item: '示例一', count: 40 },
+          { item: '示例二', count: 21 },
+          { item: '示例三', count: 17 },
+          { item: '示例四', count: 13 },
+          { item: '示例五', count: 9 }
+        ]
       }
     },
     data() {
       return {
-        data: '',
-        scale,
+        scale: [{
+          dataKey: 'percent',
+          min: 0,
+          formatter: '.0%'
+        }],
         pieStyle: {
           stroke: '#fff',
           lineWidth: 1
@@ -78,6 +49,19 @@
           }
         }]
       }
+    },
+    computed: {
+      data() {
+        let dv = new DataSet.View().source(this.dataSource)
+        // 计算数据百分比
+        dv.transform({
+          type: 'percent',
+          field: 'count',
+          dimension: 'item',
+          as: 'percent'
+        })
+        return dv.rows
+      }
     }
   }
 </script>
 \ No newline at end of file
@@ -35,6 +35,45 @@ import Bar from &#39;@/components/chart/Bar&#39;
 ]
 ```
+##### 代码示例
+
+```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>
+```
+
 ## 多列柱状图
 ##### 引用方式
 <template>
-  <a-select :placeholder="placeholder" :value="value" @change="handleInput">
+  <a-radio-group v-if="tagType=='radio'" @change="handleInput" :value="value" :disabled="disabled">
+    <a-radio v-for="(item, key) in dictOptions" :key="key" :value="item.value">{{ item.text }}</a-radio>
+  </a-radio-group>
+
+  <a-select v-else-if="tagType=='select'" :placeholder="placeholder" :disabled="disabled" :value="value" @change="handleInput">
     <a-select-option value="">请选择</a-select-option>
-    <a-select-option v-for="(item, key) in dictOptions" :key="key" :value="item.value">{{ item.text }}</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>
@@ -14,15 +22,23 @@
       dictCode: String,
       placeholder: String,
       triggerChange: Boolean,
-      value: String,// 1.接收一个 value prop
+      disabled: Boolean,
+      value: String,
+      type: String
     },
     data() {
       return {
         dictOptions: [],
+        tagType:""
       }
     },
     created() {
       console.log(this.dictCode);
+      if(!this.type || this.type==="list"){
+        this.tagType = "select"
+      }else{
+        this.tagType = this.type
+      }
       //获取字典数据
       this.initDictData();
     },
@@ -36,13 +52,25 @@
           }
         })
       },
-      handleInput(val) {
+      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
       }
     }
   }
+<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">
+    <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} from '@/api/api'
+  export default {
+    name: 'JMultiSelectTag',
+    props: {
+      dictCode: String,
+      placeholder: String,
+      triggerChange: Boolean,
+      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:{
+      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{
+          //根据字典Code, 初始化字典数组
+          ajaxGetDictItems(this.dictCode, null).then((res) => {
+            if (res.success) {
+              this.dictOptions = res.result;
+            }
+          })
+        }
+
+      },
+      onChange (selectedValue) {
+        if(this.triggerChange){
+          this.$emit('change', selectedValue.join(","));
+        }else{
+          this.$emit('input', selectedValue.join(","));
+        }
+      },
+      setCurrentDictOptions(dictOptions){
+        this.dictOptions = dictOptions
+      },
+      getCurrentDictOptions(){
+        return this.dictOptions
+      }
+    }
+  }
+</script>
+<template>
+
+  <a-select
+    v-if="async"
+    showSearch
+    labelInValue
+    @search="loadData"
+    :placeholder="placeholder"
+    v-model="selectedAsyncValue"
+    style="width: 100%"
+    :filterOption="false"
+    @change="handleAsyncChange"
+    :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
+    showSearch
+    :placeholder="placeholder"
+    optionFilterProp="children"
+    style="width: 100%"
+    @change="handleChange"
+    :filterOption="filterOption"
+    v-model="selectedValue"
+    :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 } from '@/api/api'
+  import debounce from 'lodash/debounce';
+  import { getAction } from '../../api/manage'
+
+  export default {
+    name: 'JSearchSelectTag',
+    props:{
+      triggerChange: Boolean,
+      disabled: Boolean,
+      value: String,
+      dictCode: 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){
+            this.selectedValue=[]
+            this.selectedAsyncValue=[]
+          }else{
+            this.initSelectValue()
+          }
+        }
+      }
+    },
+    methods:{
+      initSelectValue(){
+        if(this.async){
+          if(!this.selectedAsyncValue || !this.selectedAsyncValue.key || this.selectedAsyncValue.key!=this.value){
+            console.log("这才请求后台")
+            getAction(`/sys/dict/loadDictItem/${this.dictCode}`,{key:this.value}).then(res=>{
+              if(res.success){
+                let obj = {
+                  key:this.value,
+                  label:res.result
+                }
+                this.selectedAsyncValue = {...obj}
+              }
+            })
+          }
+        }else{
+          this.selectedValue = this.value
+        }
+      },
+      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.dictCode}`,{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, 初始化字典数组
+            ajaxGetDictItems(this.dictCode, 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(){
+        if(this.triggerChange){
+          this.$emit('change', this.selectedValue);
+        }else{
+          this.$emit('input', this.selectedValue);
+        }
+      },
+      setCurrentDictOptions(dictOptions){
+        this.options = dictOptions
+      },
+      getCurrentDictOptions(){
+        return this.options
+      }
+
+    }
+  }
+</script>
+
+<style scoped>
+
+</style>
 \ No newline at end of file
@@ -15,6 +15,7 @@
         required: false,
         default: false
       },
+      /*label value*/
       options:{
         type: Array,
         required: true
+<template>
+  <div v-bind="fullScreenParentProps">
+    <a-icon v-if="fullScreen" class="full-screen-icon" type="fullscreen" @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: '',
+        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: {
+      // 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)
+        // 编辑器赋值
+        this.coder.setValue(this.value || this.code)
+        if(this.value||this.code){
+          this.hasCode=true
+        }else{
+          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){
+        this.coder.setValue(val)
+      },
+      // 获取当前语法类型
+      _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;
+    }
+
+  }
+
+
+</style>
 \ No newline at end of file
@@ -6,6 +6,7 @@
     :value="momVal"
     :showTime="showTime"
     :format="dateFormat"
+    :getCalendarContainer="getCalendarContainer"
   />
 </template>
 <script>
@@ -41,6 +42,10 @@
         type: Boolean,
         required: false,
         default: false
+      },
+      getCalendarContainer: {
+        type: Function,
+        default: () => document.body
       }
     },
     data () {
 <!-- JEditableTable -->
-<!-- @version 1.3 -->
+<!-- @version 1.4 -->
 <!-- @author sjlei -->
 <template>
   <a-spin :spinning="loading">
@@ -23,8 +23,8 @@
     <div :id="`${caseId}inputTable`" class="input-table">
       <!-- 渲染表头 -->
-      <div class="thead">
-        <div class="tr">
+      <div class="thead" ref="thead">
+        <div class="tr" :style="{width: this.realTrWidth}">
           <!-- 左侧固定td  -->
           <div v-if="rowSelection" class="td td-cb" :style="style.tdLeft">
             <!--:indeterminate="true"-->
@@ -49,162 +49,232 @@
           </template>
         </div>
       </div>
-      <!-- 渲染主体 body -->
-      <div :id="`${caseId}tbody`" class="tbody" :style="tbodyStyle">
-        <!-- 扩展高度 -->
-        <div class="tr-expand" :style="`height:${getExpandHeight}px; z-index:${loading?'11':'9'};`"></div>
-        <!-- 无数据时显示 -->
-        <div v-if="rows.length===0" class="tr-nodata">
-          <span>暂无数据</span>
-        </div>
-        <!-- 动态生成tr -->
-        <template v-for="(row,rowIndex) in rows">
-          <!-- tr 只加载可见的和预加载的总共十条数据 -->
-          <div
-            v-if="
-              rowIndex >= parseInt(`${(scrollTop-rowHeight) / rowHeight}`) &&
-                (parseInt(`${scrollTop / rowHeight}`) + 9) > rowIndex
-            "
-            :id="`${caseId}tbody-tr-${rowIndex}`"
-            :data-idx="rowIndex"
-            class="tr"
-            :class="selectedRowIds.indexOf(row.id) !== -1 ? 'tr-checked' : ''"
-            :style="buildTrStyle(rowIndex)"
-            :key="row.id">
-            <!-- 左侧固定td  -->
-            <div v-if="rowSelection" class="td td-cb" :style="style.tdLeft">
-              <!-- 此 v-for 只是为了拼接 id 字符串 -->
-              <template v-for="(id,i) in [`${row.id}`]">
-                <a-checkbox
-                  :id="id"
-                  :key="i"
-                  :checked="selectedRowIds.indexOf(id) !== -1"
-                  @change="handleChangeLeftCheckbox"/>
-              </template>
-            </div>
-            <div v-if="rowNumber" class="td td-num" :style="style.tdLeft">
-              <span>{{ rowIndex+1 }}</span>
-            </div>
-            <!-- 右侧动态生成td -->
-            <div
-              class="td"
-              v-for="col in columns"
-              :key="col.key"
-              :style="buildTdStyle(col)">
-
-              <!-- 此 v-for 只是为了拼接 id 字符串 -->
-              <template v-for="(id,i) in [`${col.key}${row.id}`]">
-
-                <!-- native input -->
-                <label :key="i" v-if="col.type === formTypes.input || col.type === formTypes.inputNumber">
-                  <a-tooltip
-                    :id="id"
-                    placement="top"
-                    :title="(tooltips[id] || {}).title"
-                    :visible="(tooltips[id] || {}).visible || false"
-                    :autoAdjustOverflow="true">
-
-                    <input
-                      :id="id"
-                      v-bind="buildProps(row,col)"
-                      :data-input-number="col.type === formTypes.inputNumber"
-                      :placeholder="replaceProps(col, col.placeholder)"
-                      @input="(e)=>{handleInputCommono(e.target,rowIndex,row,col)}"
-                      @mouseover="()=>{handleMouseoverCommono(row,col)}"
-                      @mouseout="()=>{handleMouseoutCommono(row,col)}"/>
+      <div class="scroll-view" ref="scrollView" :style="{'max-height':maxHeight+'px'}">
-                  </a-tooltip>
-                </label>
-                <!-- checkbox -->
-                <template v-else-if="col.type === formTypes.checkbox">
+        <!-- 渲染主体 body -->
+        <div :id="`${caseId}tbody`" class="tbody" :style="tbodyStyle">
+          <!-- 扩展高度 -->
+          <div class="tr-expand" :style="`height:${getExpandHeight}px; z-index:${loading?'11':'9'};`"></div>
+          <!-- 无数据时显示 -->
+          <div v-if="rows.length===0" class="tr-nodata">
+            <span>暂无数据</span>
+          </div>
+          <!-- 动态生成tr -->
+          <template v-for="(row,rowIndex) in rows">
+            <!-- tr 只加载可见的和预加载的总共十条数据 -->
+            <div
+              v-if="
+                rowIndex >= parseInt(`${(scrollTop-rowHeight) / rowHeight}`) &&
+                  (parseInt(`${scrollTop / rowHeight}`) + 9) > rowIndex
+              "
+              :id="`${caseId}tbody-tr-${rowIndex}`"
+              :data-idx="rowIndex"
+              class="tr"
+              :class="selectedRowIds.indexOf(row.id) !== -1 ? 'tr-checked' : ''"
+              :style="buildTrStyle(rowIndex)"
+              :key="row.id">
+              <!-- 左侧固定td  -->
+              <div v-if="rowSelection" class="td td-cb" :style="style.tdLeft">
+                <!-- 此 v-for 只是为了拼接 id 字符串 -->
+                <template v-for="(id,i) in [`${row.id}`]">
                   <a-checkbox
-                    :key="i"
                     :id="id"
-                    v-bind="buildProps(row,col)"
-                    :checked="checkboxValues[id]"
-                    @change="handleChangeCheckboxCommon"
-                  />
-                </template>
-                <!-- select -->
-                <template v-else-if="col.type === formTypes.select">
-                  <!-- select 真身 -->
-                  <a-tooltip
                     :key="i"
-                    :id="id"
-                    placement="top"
-                    :title="(tooltips[id] || {}).title"
-                    :visible="(tooltips[id] || {}).visible || false"
-                    :autoAdjustOverflow="true">
-
-                    <span
-                      @mouseover="()=>{handleMouseoverCommono(row,col)}"
-                      @mouseout="()=>{handleMouseoutCommono(row,col)}">
+                    :checked="selectedRowIds.indexOf(id) !== -1"
+                    @change="handleChangeLeftCheckbox"/>
+                </template>
+              </div>
+              <div v-if="rowNumber" class="td td-num" :style="style.tdLeft">
+                <span>{{ rowIndex+1 }}</span>
+              </div>
+              <!-- 右侧动态生成td -->
+              <div
+                class="td"
+                v-for="col in columns"
+                :key="col.key"
+                :style="buildTdStyle(col)">
+
+                <!-- 此 v-for 只是为了拼接 id 字符串 -->
+                <template v-for="(id,i) in [`${col.key}${row.id}`]">
+
+                  <!-- native input -->
+                  <label :key="i" v-if="col.type === formTypes.input || col.type === formTypes.inputNumber">
+                    <a-tooltip
+                      :id="id"
+                      placement="top"
+                      :title="(tooltips[id] || {}).title"
+                      :visible="(tooltips[id] || {}).visible || false"
+                      :autoAdjustOverflow="true">
-                      <a-select
+                      <input
                         :id="id"
-                        :key="i"
                         v-bind="buildProps(row,col)"
-                        style="width: 100%;"
-                        :value="selectValues[id]"
+                        :data-input-number="col.type === formTypes.inputNumber"
                         :placeholder="replaceProps(col, col.placeholder)"
-                        @change="(v)=>handleChangeSelectCommon(v,id,row,col)">
+                        @input="(e)=>{handleInputCommono(e.target,rowIndex,row,col)}"
+                        @mouseover="()=>{handleMouseoverCommono(row,col)}"
+                        @mouseout="()=>{handleMouseoutCommono(row,col)}"/>
+
+                    </a-tooltip>
-                        <template v-for="(opt,optKey) in col.options">
-                          <a-select-option :value="opt.value" :key="optKey">{{ opt.title }}</a-select-option>
+                  </label>
+                  <!-- checkbox -->
+                  <template v-else-if="col.type === formTypes.checkbox">
+                    <a-checkbox
+                      :key="i"
+                      :id="id"
+                      v-bind="buildProps(row,col)"
+                      :checked="checkboxValues[id]"
+                      @change="(e)=>handleChangeCheckboxCommon(e,row,col)"
+                    />
+                  </template>
+                  <!-- select -->
+                  <template v-else-if="col.type === formTypes.select">
+                    <!-- select 真身 -->
+                    <a-tooltip
+                      :key="i"
+                      :id="id"
+                      placement="top"
+                      :title="(tooltips[id] || {}).title"
+                      :visible="(tooltips[id] || {}).visible || false"
+                      :autoAdjustOverflow="true">
+
+                      <span
+                        @mouseover="()=>{handleMouseoverCommono(row,col)}"
+                        @mouseout="()=>{handleMouseoutCommono(row,col)}">
+
+                        <a-select
+                          :id="id"
+                          :key="i"
+                          v-bind="buildProps(row,col)"
+                          style="width: 100%;"
+                          :value="selectValues[id]"
+                          :options="col.options"
+                          :getPopupContainer="getParentContainer"
+                          :placeholder="replaceProps(col, col.placeholder)"
+                          @change="(v)=>handleChangeSelectCommon(v,id,row,col)">
+
+                          <!--<template v-for="(opt,optKey) in col.options">-->
+                          <!--<a-select-option :value="opt.value" :key="optKey">{{ opt.title }}</a-select-option>-->
+                          <!--</template>-->
+                        </a-select>
+                      </span>
+                    </a-tooltip>
+                  </template>
+                  <!-- date -->
+                  <template v-else-if="col.type === formTypes.date || col.type === formTypes.datetime">
+                    <a-tooltip
+                      :key="i"
+                      :id="id"
+                      placement="top"
+                      :title="(tooltips[id] || {}).title"
+                      :visible="(tooltips[id] || {}).visible || false"
+                      :autoAdjustOverflow="true">
+
+                      <span
+                        @mouseover="()=>{handleMouseoverCommono(row,col)}"
+                        @mouseout="()=>{handleMouseoutCommono(row,col)}">
+
+                        <j-date
+                          :id="id"
+                          :key="i"
+                          v-bind="buildProps(row,col)"
+                          style="width: 100%;"
+                          :value="jdateValues[id]"
+                          :getCalendarContainer="getParentContainer"
+                          :placeholder="replaceProps(col, col.placeholder)"
+                          :trigger-change="true"
+                          :showTime="col.type === formTypes.datetime"
+                          :dateFormat="col.type === formTypes.date? 'YYYY-MM-DD':'YYYY-MM-DD HH:mm:ss'"
+                          @change="(v)=>handleChangeJDateCommon(v,id,row,col,col.type === formTypes.datetime)"/>
+
+                      </span>
+                    </a-tooltip>
+                  </template>
+
+                  <div v-else-if="col.type === formTypes.upload" :key="i">
+                    <template v-if="uploadValues[id] != null" v-for="(file,fileKey) of [(uploadValues[id]||{})]">
+                      <a-input
+                        :key="fileKey"
+                        :readOnly="true"
+                        :value="file.name"
+                      >
+
+                        <template slot="addonBefore" style="width: 30px">
+                          <a-tooltip v-if="file.status==='uploading'" :title="`上传中(${Math.floor(file.percent)}%)`">
+                            <a-icon type="loading"/>
+                          </a-tooltip>
+                          <a-tooltip v-else-if="file.status==='done'" title="上传完成">
+                            <a-icon type="check-circle" style="color:#00DB00;"/>
+                          </a-tooltip>
+                          <a-tooltip v-else title="上传失败">
+                            <a-icon type="exclamation-circle" style="color:red;"/>
+                          </a-tooltip>
                         </template>
-                      </a-select>
-                    </span>
-                  </a-tooltip>
-                </template>
-                <!-- date -->
-                <template v-else-if="col.type === formTypes.date || col.type === formTypes.datetime">
-                  <a-tooltip
-                    :key="i"
-                    :id="id"
-                    placement="top"
-                    :title="(tooltips[id] || {}).title"
-                    :visible="(tooltips[id] || {}).visible || false"
-                    :autoAdjustOverflow="true">
-                    <span
-                      @mouseover="()=>{handleMouseoverCommono(row,col)}"
-                      @mouseout="()=>{handleMouseoutCommono(row,col)}">
+                        <template slot="addonAfter" style="width: 30px">
+                          <a-tooltip title="删除并重新上传">
+                            <a-icon
+                              v-if="file.status!=='uploading'"
+                              type="close-circle"
+                              style="cursor: pointer;"
+                              @click="()=>handleClickDelFile(id)"/>
+                          </a-tooltip>
+                        </template>
-                      <j-date
-                        :id="id"
-                        :key="i"
-                        v-bind="buildProps(row,col)"
-                        style="width: 100%;"
-                        :value="jdateValues[id]"
-                        :placeholder="replaceProps(col, col.placeholder)"
-                        :trigger-change="true"
-                        :showTime="col.type === formTypes.datetime"
-                        :dateFormat="col.type === formTypes.date? 'YYYY-MM-DD':'YYYY-MM-DD HH:mm:ss'"
-                        @change="(v)=>handleChangeJDateCommon(v,id,row,col)"/>
+                      </a-input>
+                    </template>
-                    </span>
-                  </a-tooltip>
-                </template>
+                    <div :hidden="uploadValues[id] != null">
-                <!-- else (normal) -->
-                <span v-else :key="i">{{ col.defaultValue }}</span>
-              </template>
+                      <a-upload
+                        name="file"
+                        :data="{'isup':1}"
+                        :multiple="false"
+                        :action="col.action"
+                        :headers="uploadGetHeaders(row,col)"
+                        :showUploadList="false"
+                        v-bind="buildProps(row,col)"
+                        @change="(v)=>handleChangeUpload(v,id,row,col)"
+                      >
+                        <a-button icon="upload">{{ col.placeholder }}</a-button>
+                      </a-upload>
+                    </div>
+
+                  </div>
+
+                  <div v-else-if="col.type === formTypes.slot" :key="i">
+                    <slot
+                      :name="col.slotName || col.key"
+                      :text="inputValues[rowIndex][col.key]"
+                      :column="col"
+                      :rowId="removeCaseId(row.id)"
+                      :getValue="()=>_getValueForSlot(row.id)"
+                      :target="getVM()"
+                    />
+                  </div>
+
+                  <!-- else (normal) -->
+                  <span v-else :key="i">{{ inputValues[rowIndex][col.key] }}</span>
+                </template>
+              </div>
             </div>
-          </div>
-          <!-- -- tr end -- -->
+            <!-- -- tr end -- -->
-        </template>
+          </template>
+        </div>
       </div>
     </div>
   </a-spin>
 </template>
 <script>
-
+  import Vue from 'vue'
+  import { ACCESS_TOKEN } from '@/store/mutation-types'
   import { FormTypes, VALIDATE_NO_PASSED } from '@/utils/JEditableTableUtil'
   import { cloneObject, randomString } from '@/utils/util'
   import JDate from '@/components/jeecg/JDate'
@@ -270,7 +340,8 @@
         },
         // 存储各个div的style
         style: {
-          tbody: { left: '0px', 'max-height': '400px' },
+          // 'max-height': '400px'
+          tbody: { left: '0px' },
           // 左侧固定td的style
           tdLeft: { 'min-width': '4%', 'max-width': '45px' }
         },
@@ -288,6 +359,8 @@
         checkboxValues: {},
         // 绑定 jdate 的值
         jdateValues: {},
+        // file 信息
+        uploadValues: {},
         // 绑定左侧选择框已选择的id
         selectedRowIds: [],
         // 存储被删除行的id
@@ -331,7 +404,8 @@
       },
       tbodyStyle() {
         let style = Object.assign({}, this.style.tbody)
-        style['max-height'] = `${this.maxHeight}px`
+        // style['max-height'] = `${this.maxHeight}px`
+        style['width'] = this.realTrWidth
         return style
       },
       showClearSelectButton() {
@@ -340,6 +414,30 @@
           if (this.disabledRows.hasOwnProperty(key)) count++
         }
         return count > 0
+      },
+      accessToken() {
+        return Vue.ls.get(ACCESS_TOKEN)
+      },
+      realTrWidth() {
+        let calcWidth = 'calc('
+        this.columns.forEach((column, i) => {
+          let { width } = column
+          if (typeof width === 'number') {
+            calcWidth += width + 'px'
+          } else if (typeof width === 'string') {
+            calcWidth += width
+          } else {
+            calcWidth += '120px'
+          }
+
+          if (i < this.columns.length - 1) {
+            calcWidth += ' + '
+          }
+
+        })
+        calcWidth += ')'
+        console.log('calcWidth: ', calcWidth)
+        return calcWidth
       }
     },
     // 侦听器
@@ -371,11 +469,35 @@
               }
             } else if (column.type === FormTypes.select) {
-              selectValues[inputId] = sourceValue ? sourceValue : undefined
-
+              if (sourceValue) {
+                // 判断是否是多选
+                selectValues[inputId] = (column.props || {})['mode'] === 'multiple' ? sourceValue.split(',') : sourceValue
+              } else {
+                selectValues[inputId] = undefined
+              }
+              // 兼容 旧版本 options
+              if (column.options instanceof Array) {
+                column.options = column.options.map(item => {
+                  if (item) {
+                    return {
+                      text: item.text || item.title,
+                      title: item.text || item.title,
+                      value: item.value
+                    }
+                  }
+                  return {}
+                })
+              }
             } else if (column.type === FormTypes.date || column.type === FormTypes.datetime) {
               jdateValues[inputId] = sourceValue
+            } else if (column.type === FormTypes.slot) {
+              if (sourceValue !== 0 && !sourceValue) {
+                value[column.key] = column.defaultValue
+              } else {
+                value[column.key] = sourceValue
+              }
+
             } else {
               value[column.key] = sourceValue
             }
@@ -430,8 +552,22 @@
         vm.syncScrollBar(event.target.scrollLeft)
       }
       this.el.tbody.onscroll = function(event) {
+        // vm.recalcTrHiddenItem(event.target.scrollTop)
+      }
+
+      let { thead, scrollView } = this.$refs
+      scrollView.onscroll = function(event) {
+
+        // console.log(event.target.scrollTop, ' - ', event.target.scrollLeft)
+
+        thead.scrollLeft = event.target.scrollLeft
+
+        // vm.recalcTrHiddenItem(event.target.scrollTop)
+
         vm.recalcTrHiddenItem(event.target.scrollTop)
+
       }
+
     },
     methods: {
@@ -455,15 +591,16 @@
       /** 同步滚动条状态 */
       syncScrollBar(scrollLeft) {
-        this.style.tbody.left = `${scrollLeft}px`
-        this.el.tbody.scrollLeft = scrollLeft
+        // this.style.tbody.left = `${scrollLeft}px`
+        // this.el.tbody.scrollLeft = scrollLeft
       },
       /** 重置滚动条位置，参数留空则滚动到上次记录的位置 */
       resetScrollTop(top) {
+        let { scrollView } = this.$refs
         if (top != null && typeof top === 'number') {
-          this.el.tbody.scrollTop = top
+          scrollView.scrollTop = top
         } else {
-          this.el.tbody.scrollTop = this.scrollTop
+          scrollView.scrollTop = this.scrollTop
         }
       },
       /** 重新计算需要隐藏或显示的tr */
@@ -481,16 +618,24 @@
           })
         }
       },
+      /** 生成id */
+      generateId(rows) {
+        if (!(rows instanceof Array)) {
+          rows = this.rows || []
+        }
+        let timestamp = new Date().getTime()
+        return `${this.caseId}${timestamp}${rows.length}`
+      },
       /** push 一条数据 */
       push(record, update = true, rows) {
         if (!(rows instanceof Array)) {
           rows = cloneObject(this.rows) || []
         }
-
         if (record.id == null) {
-          let timestamp = new Date().getTime()
-          record.id = `${this.caseId}${timestamp}${rows.length}`
+          record.id = this.generateId(rows)
+          // let timestamp = new Date().getTime()
+          // record.id = `${this.caseId}${timestamp}${rows.length}`
         }
         if (record.id.indexOf(this.caseId) === -1) {
           record.id = this.caseId + record.id
@@ -524,11 +669,18 @@
             if (selected !== 0 && !selected) {
               selected = undefined
             }
+            // 判断多选
+            if (typeof selected === 'string' && (column.props || {})['mode'] === 'multiple') {
+              selected = selected.split(',')
+            }
             selectValues[inputId] = recordHasValue ? record[key] : selected
           } else if (column.type === FormTypes.date || column.type === FormTypes.datetime) {
             jdateValues[inputId] = recordHasValue ? record[key] : column.defaultValue
+          } else if (column.type === FormTypes.slot) {
+            value[key] = recordHasValue ? record[key] : (column.defaultValue || '')
+
           } else {
             value[key] = recordHasValue ? record[key] : ''
           }
@@ -568,10 +720,12 @@
       },
       /** 添加一行 */
       add(num = 1, forceScrollToBottom = false) {
-        let timestamp = new Date().getTime()
+        // let timestamp = new Date().getTime()
         let rows = this.rows
+        let row
         for (let i = 0; i < num; i++) {
-          let row = { id: `${this.caseId}${timestamp}${rows.length}` }
+          // row = { id: `${this.caseId}${timestamp}${rows.length}` }
+          row = { id: this.generateId(rows) }
           rows = this.push(row, false, rows)
         }
         this.rows = rows
@@ -579,6 +733,15 @@
         this.$nextTick(() => {
           this.updateFormValues()
         })
+        // 触发add事件
+        this.$emit('added', {
+          row: (() => {
+            let r = Object.assign({}, row)
+            r.id = this.removeCaseId(r.id)
+            return r
+          })(),
+          target: this
+        })
         // 设置滚动条位置
         let tbody = this.el.tbody
         let offsetHeight = tbody.offsetHeight
@@ -592,8 +755,6 @@
         this.$nextTick(() => {
           tbody.scrollTop = tbody.scrollHeight
         })
-        // 触发add事件
-        this.$emit('added')
       },
       /** 删除被选中的行 */
       removeSelectedRows() {
@@ -607,7 +768,7 @@
           if (typeof id === 'string') {
             ids = [id]
           } else {
-            throw  `InputTable.removeRows() 函数需要的参数可以是string或Array类型，但提供的却是${typeof id}`
+            throw  `JEditableTable.removeRows() 函数需要的参数可以是string或Array类型，但提供的却是${typeof id}`
           }
         }
@@ -616,7 +777,7 @@
           // 找到每个id对应的真实index并删除
           const findAndDelete = (arr) => {
             for (let i = 0; i < arr.length; i++) {
-              if (arr[i].id === removeId) {
+              if (arr[i].id === removeId || arr[i].id === this.caseId + removeId) {
                 arr.splice(i, 1)
                 return true
               }
@@ -624,24 +785,52 @@
           }
           // 找到rows对应的index，并删除
           if (findAndDelete(rows)) {
+            // 找到values对应的index，并删除
+            findAndDelete(this.inputValues)
             // 将caseId去除
-            this.deleteIds.push(removeId.split(this.caseId)[1])
+            let id = this.removeCaseId(removeId)
+            this.deleteIds.push(id)
           }
-          // 找到values对应的index，并删除
-          findAndDelete(this.inputValues)
         })
         this.rows = rows
         this.$emit('deleted', this.getDeleteIds())
+        this.$nextTick(() => {
+          // 更新formValues
+          this.updateFormValues()
+        })
         return true
       },
-      /** 获取表格表单里的值 */
-      getValues(callback, validate = true) {
+      /** 获取表格表单里的值（同步版） */
+      getValuesSync(options = {}) {
+        let { validate, rowIds } = options
+        if (typeof validate !== 'boolean') validate = true
+        if (!(rowIds instanceof Array)) rowIds = null
+        // console.log('options:', { validate, rowIds })
+
         let error = 0
-        let valueArray = cloneObject(this.inputValues)
+        let inputValues = cloneObject(this.inputValues)
         let tooltips = Object.assign({}, this.tooltips)
         let notPassedIds = cloneObject(this.notPassedIds)
-        valueArray.forEach(value => {
+        // 用于存储合并后的值
+        let values = []
+        // 遍历inputValues来获取每行的值
+        for (let value of inputValues) {
+          let rowIdsFlag = false
+          // 如果带有rowIds，那么就只存这几行的数据
+          if (rowIds == null) {
+            rowIdsFlag = true
+          } else {
+            for (let rowId of rowIds) {
+              if (rowId === value.id || `${this.caseId}${rowId}` === value.id) {
+                rowIdsFlag = true
+                break
+              }
+            }
+          }
+
+          if (!rowIdsFlag) continue
+
           this.columns.forEach(column => {
             let inputId = column.key + value.id
             if (column.type === FormTypes.checkbox) {
@@ -653,46 +842,65 @@
               }
             } else if (column.type === FormTypes.select) {
-              value[column.key] = this.selectValues[inputId]
+              let selected = this.selectValues[inputId]
+              if (selected instanceof Array) {
+                value[column.key] = cloneObject(selected)
+              } else {
+                value[column.key] = selected
+              }
             } else if (column.type === FormTypes.date || column.type === FormTypes.datetime) {
               value[column.key] = this.jdateValues[inputId]
+            } else if (column.type === FormTypes.upload) {
+              value[column.key] = cloneObject(this.uploadValues[inputId] || null)
+
             }
             // 检查表单验证
-            if (validate) {
+            if (validate === true) {
               let results = this.validateOneInput(value[column.key], value, column, notPassedIds, false)
               tooltips[inputId] = results[0]
               if (tooltips[inputId].visible) {
-                if (error++ === 0) {
-                  // let element = document.getElementById(inputId)
-                  // while (element.className !== 'tr') {
-                  //   element = element.parentElement
-                  // }
-                  // this.jumpToId(inputId, element)
-                }
+                error++
+                // if (error++ === 0) {
+                // let element = document.getElementById(inputId)
+                // while (element.className !== 'tr') {
+                //   element = element.parentElement
+                // }
+                // this.jumpToId(inputId, element)
+                // }
               }
               tooltips[inputId].visible = false
               notPassedIds = results[1]
             }
           })
           // 将caseId去除
-          value.id = value.id.split(this.caseId)[1]
-        })
+          value.id = this.removeCaseId(value.id)
+          values.push(value)
+
+        }
+
         this.tooltips = tooltips
         this.notPassedIds = notPassedIds
-        if (typeof callback === 'function') callback(error, valueArray)
+        return { error, values }
+      },
+
+      /** 获取表格表单里的值 */
+      getValues(callback, validate = true, rowIds) {
+        let result = this.getValuesSync({ validate, rowIds })
+        if (typeof callback === 'function') {
+          callback(result.error, result.values)
+        }
       },
       /** getValues的Promise版 */
-      getValuesPromise(validate = true) {
+      getValuesPromise(validate = true, rowIds) {
         return new Promise((resolve, reject) => {
-          this.getValues((error, values) => {
-            if (error === 0) {
-              resolve(values)
-            } else {
-              reject(VALIDATE_NO_PASSED)
-            }
-          }, validate)
+          let { error, values } = this.getValuesSync({ validate, rowIds })
+          if (error === 0) {
+            resolve(values)
+          } else {
+            reject(VALIDATE_NO_PASSED)
+          }
         })
       },
       /** 获取被删除项的id */
@@ -710,6 +918,16 @@
           })
         })
       },
+      /** Sync 获取所有的数据，包括values、deleteIds */
+      getAllSync(validate, rowIds) {
+        let result = this.getValuesSync({ validate, rowIds })
+        result.deleteIds = this.getDeleteIds()
+        return result
+      },
+      // slot 获取值
+      _getValueForSlot(rowId) {
+        return this.getValuesSync({ rowIds: [rowId] }).values[0]
+      },
       /** 设置某行某列的值 */
       setValues(values) {
@@ -722,8 +940,10 @@
               this.inputValues.forEach(value => {
                 // 在inputValues中找到了该字段
                 if (`${this.caseId}${rowKey}` === value.id) {
-                  edited = true
-                  value[newValueKey] = newValue
+                  if (value.hasOwnProperty(newValueKey)) {
+                    edited = true
+                    value[newValueKey] = newValue
+                  }
                 }
               })
               let modelKey = `${newValueKey}${this.caseId}${rowKey}`
@@ -764,6 +984,7 @@
       //     console.log(this.el.tbody.scrollTop, element.offsetTop)
       //   }
       // },
+
       /** 验证单个表单 */
       validateOneInput(value, row, column, notPassedIds, update = false) {
         let tooltips = Object.assign({}, this.tooltips)
@@ -934,10 +1155,13 @@
       /** input事件 */
       handleInputCommono(target, index, row, column) {
         let { value, dataset, selectionStart } = target
-
+        let type = FormTypes.input
+        let change = true
         if (`${dataset.inputNumber}` === 'true') {
+          type = FormTypes.inputNumber
           let replace = value.replace(/[^0-9]/g, '')
           if (value !== replace) {
+            change = false
             value = replace
             target.value = replace
             if (typeof  selectionStart === 'number') {
@@ -950,19 +1174,51 @@
         this.inputValues[index][column.key] = value
         // 做单个表单验证
         this.validateOneInput(value, row, column, this.notPassedIds, true)
+
+        // 触发valueChange 事件
+        if (change) {
+          this.elemValueChange(type, row, column, value)
+        }
       },
-      handleChangeCheckboxCommon(event) {
+      handleChangeCheckboxCommon(event, row, column) {
         let { id, checked } = event.target
         this.checkboxValues = this.bindValuesChange(checked, id, 'checkboxValues')
+
+        // 触发valueChange 事件
+        this.elemValueChange(FormTypes.checkbox, row, column, checked)
       },
       handleChangeSelectCommon(value, id, row, column) {
         this.selectValues = this.bindValuesChange(value, id, 'selectValues')
         // 做单个表单验证
         this.validateOneInput(value, row, column, this.notPassedIds, true)
+
+        // 触发valueChange 事件
+        this.elemValueChange(FormTypes.select, row, column, value)
       },
-      handleChangeJDateCommon(value, id, row, column) {
+      handleChangeJDateCommon(value, id, row, column, showTime) {
         this.jdateValues = this.bindValuesChange(value, id, 'jdateValues')
         this.validateOneInput(value, row, column, this.notPassedIds, true)
+
+        // 触发valueChange 事件
+        if (showTime) {
+          this.elemValueChange(FormTypes.datetime, row, column, value)
+        } else {
+          this.elemValueChange(FormTypes.date, row, column, value)
+        }
+      },
+      handleChangeUpload(info, id, row, column) {
+        let { file } = info
+        let value = {
+          name: file.name,
+          type: file.type,
+          size: file.size,
+          status: file.status,
+          percent: file.percent
+        }
+        if (column.responseName && file.response) {
+          value['responseName'] = file.response[column.responseName]
+        }
+        this.uploadValues = this.bindValuesChange(value, id, 'uploadValues')
       },
       /** 记录用到数据绑定的组件的值 */
       bindValuesChange(value, id, key) {
@@ -979,6 +1235,29 @@
         this.tooltips = tooltips
       },
+      /** value 触发valueChange事件 */
+      elemValueChange(type, rowSource, columnSource, value) {
+        let column = Object.assign({}, columnSource)
+        // 将caseId去除
+        let row = Object.assign({}, rowSource)
+        row.id = this.removeCaseId(row.id)
+        // 获取整行的数据
+        let { values } = this.getValuesSync({ validate: false, rowIds: [row.id] })
+        if (values.length > 0) {
+          Object.assign(row, values[0])
+        }
+        this.$emit('valueChange', { type, row, column, value, target: this })
+      },
+
+      /** 将caseId去除 */
+      removeCaseId(id) {
+        return id.split(this.caseId)[1]
+      },
+
+      handleClickDelFile(id) {
+        this.uploadValues[id] = null
+      },
+
       /* --- common function end --- */
       /* --- 以下是辅助方法，多用于动态构造页面中的数据 --- */
@@ -986,6 +1265,22 @@
       /** 辅助方法：打印日志 */
       log: console.log,
+      getVM() {
+        return this
+      },
+
+      /** 辅助方法：指定a-select 和 j-data 的父容器 */
+      getParentContainer(node) {
+        if (this.$el && this.$el.nodeType !== 8) {
+          return this.$el
+        }
+        let doc = document.getElementById(this.caseId + 'inputTable')
+        if (doc != null) {
+          return doc
+        }
+        return node.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode
+      },
+
       /** 辅助方法：替换${...}变量 */
       replaceProps(col, value) {
         if (value && typeof value === 'string') {
@@ -1039,6 +1334,14 @@
           props['disabled'] = ((this.disabledRowIds || []).indexOf(row.id) !== -1)
         }
         return props
+      },
+      /** upload 辅助方法：获取 headers */
+      uploadGetHeaders(row, column) {
+        let headers = {}
+        if (column.token === true) {
+          headers['X-Access-Token'] = this.accessToken
+        }
+        return headers
       }
     }
@@ -1056,36 +1359,6 @@
   }
-  @scrollBarSize: 12px;
-
-  /* 定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
-  ::-webkit-scrollbar {
-    width: @scrollBarSize;
-    height: @scrollBarSize;
-    background-color: transparent;
-  }
-
-  /* 定义滚动条轨道 */
-  ::-webkit-scrollbar-track {
-    background-color: #f0f0f0;
-  }
-
-  /* 定义滑块 */
-  ::-webkit-scrollbar-thumb {
-    border-radius: @scrollBarSize;
-    background-color: #eee;
-    box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
-
-    &:hover {
-      background-color: #bbb;
-    }
-
-    &:active {
-      background-color: #888;
-    }
-
-  }
-
   /* 设定边框参数 */
   @borderColor: #e8e8e8;
   @border: 1px solid @borderColor;
@@ -1094,7 +1367,7 @@
   .input-table {
     max-width: 100%;
-    overflow-x: auto;
+    overflow-x: hidden;
     overflow-y: hidden;
     position: relative;
     border: @border;
@@ -1106,6 +1379,8 @@
       }
       .td {
+
+        /*border-right: 1px solid red;*/
         /*color: white;*/
         /*background-color: black;*/
         /*margin-right: @spacing !important;*/
@@ -1129,9 +1404,22 @@
     .thead {
       overflow-y: scroll;
+      overflow-x: hidden;
       border-bottom: @border;
+      /** 隐藏thead的滑块   */
+      &::-webkit-scrollbar-thumb {
+        box-shadow: none !important;
+        background-color: transparent !important;
+      }
+
+      .tr {
+        min-width: 100%;
+        overflow-y: scroll;
+      }
+
       .td {
+        /*flex: 1;*/
         padding: 8px @spacing;
         justify-content: center;
       }
@@ -1143,9 +1431,10 @@
       top: 0;
       left: 0;
       overflow-x: hidden;
-      overflow-y: scroll;
+      overflow-y: hidden;
       min-height: 61px;
-      max-height: 400px;
+      /*max-height: 400px;*/
+      min-width: 100%;
       .tr-nodata {
         color: #999;
@@ -1180,8 +1469,8 @@
       }
       .td {
+        /*flex: 1;*/
         padding: 14px 0 14px @spacing;
-
         justify-content: center;
         &:last-child {
@@ -1243,6 +1532,56 @@
     }
+    .scroll-view {
+      overflow: auto;
+      overflow-y: scroll;
+    }
+
+    .thead, .thead .tr, .scroll-view {
+      @scrollBarSize: 6px;
+      /* 定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
+      &::-webkit-scrollbar {
+        width: @scrollBarSize;
+        height: @scrollBarSize;
+        background-color: transparent;
+      }
+      /* 定义滚动条轨道 */
+      &::-webkit-scrollbar-track {
+        background-color: #f0f0f0;
+      }
+      /* 定义滑块 */
+      &::-webkit-scrollbar-thumb {
+        background-color: #eee;
+        box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
+
+        &:hover {
+          background-color: #bbb;
+        }
+
+        &:active {
+          background-color: #888;
+        }
+      }
+
+    }
+
+    .thead .tr {
+
+      &::-webkit-scrollbar-track {
+        background-color: transparent;
+      }
+
+      /* IE模式下隐藏 */
+      -ms-overflow-style: none;
+      -ms-scroll-chaining: chained;
+      -ms-content-zooming: zoom;
+      -ms-scroll-rails: none;
+      -ms-content-zoom-limit-min: 100%;
+      -ms-content-zoom-limit-max: 500%;
+      -ms-scroll-snap-type: proximity;
+      -ms-scroll-snap-points-x: snapList(100%, 200%, 300%, 400%, 500%);
+    }
+
   }
 </style>
 \ No newline at end of file
@@ -30,6 +30,11 @@
         type: String,
         required:false
       },
+      triggerChange:{
+        type: Boolean,
+        default: false,
+        required:false
+      },
       disabled: {
         type: Boolean,
         default: false
@@ -82,7 +87,13 @@
       },
       myValue(newValue) {
         console.log(newValue)
-        this.$emit('input', newValue)
+        if(this.triggerChange){
+          console.log(1)
+          this.$emit('change', newValue)
+        }else{
+          console.log(2)
+          this.$emit('input', newValue)
+        }
       }
     }
   }
+<template>
+  <div class="gc-canvas" @click="reloadPic">
+    <canvas id="gc-canvas" :width="contentWidth" :height="contentHeight"></canvas>
+  </div>
+</template>
+
+<script>
+  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
+      }
+    },
+    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()
+        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(){
+        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
+      }
+    },
+    mounted () {
+      this.drawPic()
+    },
+    data(){
+      return {
+        code:""
+      }
+    }
+
+  }
+</script>
+
+<style scoped>
+
+</style>
 \ No newline at end of file
@@ -4,7 +4,7 @@
       v-for="(item,index) in options"
       :key="index"
       :value="item.value">
-      {{ item.text }}
+      {{ item.text || item.label }}
     </a-select-option>
   </a-select>
 </template>
+<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){
+          document.getElementsByClassName('handler')[0].style.left = 0 + 'px';
+          document.getElementsByClassName('drag_bg')[0].style.width = 0 + 'px';
+        }
+      }                       //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>
 \ No newline at end of file
+<template>
+  <a-table
+    :rowKey="rowKey"
+    :columns="columns"
+    :dataSource="dataSource"
+    v-bind="tableProps"
+    @expand="handleExpand"/>
+</template>
+
+<script>
+  import { getAction } from '@/api/manage'
+
+  export default {
+    name: 'JTreeTable',
+    props: {
+      rowKey: {
+        type: String,
+        default: 'id'
+      },
+      columns: {
+        type: Array,
+        required: true
+      },
+      url: {
+        type: String,
+        required: true
+      },
+      childrenUrl: {
+        type: String,
+        default: null
+      },
+      tableProps: {
+        type: Object,
+        default: () => {
+        }
+      }
+    },
+    data() {
+      return {
+        dataSource: []
+      }
+    },
+    computed: {
+      getChildrenUrl() {
+        if (this.childrenUrl) {
+          return this.childrenUrl
+        } else {
+          return this.url
+        }
+      }
+    },
+    created() {
+      this.loadData()
+    },
+    methods: {
+
+      /** 加载数据*/
+      loadData(id = '0', first = true, url = this.url) {
+        return getAction(url, { id }).then(res => {
+          let dataSource = res.result.map(item => {
+            // 判断是否标记了带有子级
+            if (item.hasChildren === true) {
+              // 定义默认展开时显示的loading子级，实际子级数据只在展开时加载
+              let loadChild = { id: `${item.id}_loadChild`, name: 'loading...', isLoading: true }
+              item.children = [loadChild]
+            }
+            return item
+          })
+          if (first) {
+            this.dataSource = dataSource
+          }
+          return Promise.resolve(dataSource)
+        })
+      },
+
+      /** 点击展开图标时触发 */
+      handleExpand(expanded, record) {
+        // 判断是否是展开状态
+        if (expanded) {
+          // 判断子级的首个项的标记是否是“正在加载中”，如果是就加载数据
+          if (record.children[0].isLoading === true) {
+            this.loadData(record.id, false, this.getChildrenUrl).then(dataSource => {
+              // 处理好的数据可直接赋值给children
+              record.children = dataSource
+            })
+          }
+        }
+      }
+
+    }
+  }
+</script>
+
+<style scoped>
+
+</style>
 \ No newline at end of file
+<template>
+  <a-upload
+    name="file"
+    :multiple="true"
+    :action="uploadAction"
+    :headers="headers"
+    :data="{'isup':1,'bizPath':bizPath}"
+    :fileList="fileList"
+    :beforeUpload="beforeUpload"
+    @change="handleChange">
+    <a-button>
+      <a-icon type="upload" />{{ text }}
+    </a-button>
+  </a-upload>
+</template>
+
+<script>
+
+  import Vue from 'vue'
+  import { ACCESS_TOKEN } from "@/store/mutation-types"
+
+  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",
+        urlDownload:window._CONFIG['domianURL'] + "/sys/common/download/",
+        headers:{},
+        fileList: []
+      }
+    },
+    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,
+        required:false
+      },
+      triggerChange:{
+        type: Boolean,
+        required: false,
+        default: false
+      },
+    },
+    watch:{
+      value(val){
+        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){
+          return [];
+        }
+        let fileList = [];
+        let arr = paths.split(",")
+        for(var a=0;a<arr.length;a++){
+          fileList.push({
+            uid:uidGenerator(),
+            name:getFileName(arr[a]),
+            status: 'done',
+            url: this.urlDownload+arr[a],
+            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(",")
+        }
+        if(this.triggerChange){
+          this.$emit('change', path);
+        }else{
+          this.$emit('input', path);
+        }
+      },
+      beforeUpload(file){
+        var fileType = file.type;
+        if(fileType===FILE_TYPE_IMG){
+          if(fileType.indexOf('image')<0){
+            this.$message.warning('请上传图片');
+            return false;
+          }
+        }else if(fileType===FILE_TYPE_TXT){
+          if(fileType.indexOf('image')>=0){
+            this.$message.warning('请上传文件');
+            return false;
+          }
+        }
+        //TODO 扩展功能验证文件大小
+        return true
+      },
+      handleChange(info) {
+        console.log("--文件列表改变--")
+        let fileList = info.fileList
+        if(info.file.status==='done'){
+          if(info.file.response.success){
+            fileList = fileList.map((file) => {
+              if (file.response) {
+                file.url = this.urlDownload+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()
+        }
+      },
+      handleDelete(file){
+        //如有需要新增 删除逻辑
+        console.log(file)
+      },
+    }
+  }
+</script>
+
+<style scoped>
+
+</style>
 \ No newline at end of file
@@ -196,3 +196,87 @@ this.$refs.superQueryModal.show();
         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参数查询子级           |
+| 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>
+```
 \ No newline at end of file
@@ -15,16 +15,16 @@
 ### columns 参数详解
-| 参数            | 类型     | 必填 | 说明                                                                   |
-|---------------|--------|----|----------------------------------------------------------------------|
-| title         | string | ✔️ | 表格列头显示的问题                                                            |
-| key           | string | ✔️ | 列数据在数据项中对应的 key，必须是唯一的                                               |
-| type          | string | ✔️ | 表单的类型，可以通过`JEditableTableUtil.FormTypes`赋值                           |
+| 参数            | 类型     | 必填 | 说明                                                                              |
+|---------------|--------|----|---------------------------------------------------------------------------------|
+| 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'}`                     |
+| placeholder   | string |    | 表单预期值的提示信息，可以使用`${...}`变量替换文本（详见`${...} 变量使用方式`）                                |
+| defaultValue  | string |    | 默认值，在新增一行时生效                                                                    |
+| validateRules | array  |    | 表单验证规则，配置方式见[validateRules 配置规则](#validaterules-配置规则)                           |
+| props         | object |    | 设置添加给表单元素的自定义属性，例如:`props:{title: 'show title'}`                                |
 #### 当 type=checkbox 时所需的参数
@@ -41,10 +41,25 @@
 ##### options 所需参数
-| 参数    | 类型     | 必填 | 说明   |
-|-------|--------|----|------|
-| title | string | ✔️ | 显示标题 |
-| value | string | ✔️ | 真实值  |
+| 参数        | 类型         | 必填 | 说明                                            |
+|-----------|------------|----|-----------------------------------------------|
+| text      | string     | ✔️ | 显示标题                                          |
+| value     | string     | ✔️ | 真实值                                           |
+| ~~title~~ | ~~string~~ |    | ~~显示标题（已废弃，若同时填写了 title 和 text 那么优先使用 text）~~ |
+
+#### 当 type=upload 时所需的参数
+
+| 参数           | 类型      | 必填 | 说明                                             |
+|--------------|---------|----|------------------------------------------------|
+| action       | string  | ✔️ | 上传文件路径                                         |
+| token        | boolean |    | 上传的时候是否传递token                                 |
+| responseName | string  | ✔️ | 若要从上传成功后从response中取出返回的文件名，那么这里填后台返回的包含文件名的字段名 |
+
+#### 当 type=slot 时所需的参数
+
+| 参数           | 类型      | 必填 | 说明                                             |
+|--------------|---------|----|------------------------------------------------|
+| slot       | string  | ✔️ | slot的名称                                         |
 ### validateRules 配置规则
@@ -128,18 +143,53 @@
 |----------|----------|----|-----------------------------------------------------------------------------------------------|
 | 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`参数 |
+| 参数名      | 类型      | 必填 | 说明                                                                 |
+|----------|---------|----|--------------------------------------------------------------------|
+| validate | boolean |    | 同`getValues`的`validate`参数                                          |
+| rowIds   | array   |    | 默认返回所有行的数据，如果传入了`rowIds`，那么就会只返回与该`rowIds`相匹配的数据，如果没有匹配的数据，就会返回空数组 |
 - `返回值:` Promise
@@ -219,6 +269,8 @@ setValues([
 - `select` 显示选择器（下拉框）
 - `date` 日期选择器
 - `datetime` 日期时间选择器
+- `upload` 上传组件（文件域）
+- `slot` 自定义插槽
 ### VALIDATE_NO_PASSED
@@ -284,7 +336,7 @@ validateTables(cases).then((all) =&gt; {
 ### 为什么使用了ATab组件后，切换选项卡会导致白屏或滚动条位置会归零？
 在ATab组件中确实会导致滚动条位置归零，且不会触发`onscroll`方法，所以无法动态加载行，导致白屏的问题出现。
-解决方法是在ATab组件的`onChange`事件触发时执行`resetScrollTop()`即可，但是需要注意的是：代码主动改变ATab的`activeKey`不会触发`onChange`事件，还需要你手动调用下
+解决方法是在ATab组件的`onChange`事件触发时执行实例提供的`resetScrollTop()`方法即可，但是需要注意的是：代码主动改变ATab的`activeKey`不会触发`onChange`事件，还需要你手动调用下。
 - `示例`
@@ -322,7 +374,11 @@ methods: {
 /*--- 忽略部分代码片段 ---*/
 ```
-----
+### slot(自定义插槽)如何使用？
+
+代码示例请看：[示例四(slot)](#示例四(slot))
+
+----------------------------------------------------------------------------------------
 ## 示例一
@@ -393,4 +449,57 @@ this.$refs.editableTable.getValues((error, values) =&gt; {
         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, // 定义该列为 自定义插值列 
+                        slot: 'action' // slot 的名称，对应 v-slot 冒号后面和等号前面的内容
+                    }
+                ]
+            }
+        },
+        methods: {
+            /* a 标签的点击事件，删除当前选中的行 */
+            handleDelete(props) {
+                // 参数解释
+                // 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>
 ```
 \ No newline at end of file
@@ -29,7 +29,7 @@
           用户账号:
           <a-input-search
             :style="{width:'150px',marginBottom:'15px'}"
-            placeholder="请输入用户名搜索"
+            placeholder="请输入用户账号"
             v-model="queryParam.username"
             @search="onSearch"
           ></a-input-search>
@@ -194,13 +194,13 @@
       },
       searchReset(num) {
         let that = this;
+        if(num !== 0){
+          that.queryParam = {};
+          that.loadData(1);
+        }
         that.selectedRowKeys = [];
         that.userNameArr = [];
-        that.queryParam = {};
         that.selectedKeys = [];
-        if(num !== 0){
-          that.loadData();
-        }
       },
       close() {
         this.searchReset(0);
+<template>
+  <div class="components-input-demo-presuffix">
+    <!---->
+    <a-input @click="openModal" placeholder="请点击选择部门" v-model="departNames" readOnly :disabled="disabled">
+      <a-icon slot="prefix" type="cluster" title="部门选择控件"/>
+      <a-icon v-if="departIds" slot="suffix" type="close-circle" @click="handleEmpty" title="清空"/>
+    </a-input>
+
+    <j-select-depart-modal
+      ref="innerDepartSelectModal"
+      :modal-width="modalWidth"
+      :multi="multi"
+      :rootOpened="rootOpened"
+      :depart-id="value"
+      @ok="handleOK"
+      @initComp="initComp"/>
+  </div>
+</template>
+
+<script>
+  import JSelectDepartModal from './modal/JSelectDepartModal'
+  export default {
+    name: 'JSelectDepart',
+    components:{
+      JSelectDepartModal
+    },
+    props:{
+      modalWidth:{
+        type:Number,
+        default:500,
+        required:false
+      },
+      multi:{
+        type:Boolean,
+        default:false,
+        required:false
+      },
+      rootOpened:{
+        type:Boolean,
+        default:true,
+        required:false
+      },
+      value:{
+        type:String,
+        required:false
+      },
+      triggerChange:{
+        type: Boolean,
+        required: false,
+        default: false
+      },
+      disabled:{
+        type: Boolean,
+        required: false,
+        default: false
+      }
+    },
+    data(){
+      return {
+        visible:false,
+        confirmLoading:false,
+        departNames:"",
+        departIds:''
+      }
+    },
+    mounted(){
+      this.departIds = this.value
+    },
+    watch:{
+      value(val){
+        this.departIds = val
+      }
+    },
+    methods:{
+      initComp(departNames){
+        this.departNames = departNames
+      },
+      openModal(){
+        this.$refs.innerDepartSelectModal.show()
+      },
+      handleOK(rows,idstr){
+        console.log("当前选中部门",rows)
+        console.log("当前选中部门ID",idstr)
+        if(!rows){
+          this.departNames = ''
+          this.departIds=''
+        }else{
+          let temp = ''
+          for(let item of rows){
+            temp+=','+item.departName
+          }
+          this.departNames = temp.substring(1)
+          this.departIds=idstr
+        }
+
+        if(this.triggerChange){
+          this.$emit("change",this.departIds)
+        }else{
+          this.$emit("input",this.departIds)
+        }
+      },
+      getDepartNames(){
+        return this.departNames
+      },
+      handleEmpty(){
+        this.handleOK('')
+      }
+    }
+  }
+</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>
 \ No newline at end of file
+<template>
+  <div style="width: 100%;">
+    <a-select
+      mode="multiple"
+      placeholder="Please select"
+      :value="nameList"
+      style="width: calc(100% - 178px);">
+    </a-select>
+    <span style="display: inline-block;width:170px;float: right;overflow: hidden;">
+      <a-button type="primary" @click="handleSelect" icon="search" style="width: 81px">选择</a-button>
+      <a-button type="primary" @click="selectReset" icon="reload" style="margin-left: 8px;width: 81px">清空</a-button>
+    </span>
+
+    <!-- 选择多个用户支持排序 -->
+    <j-select-multi-user-modal ref="selectModal" @selectFinished="selectOK"/>
+  </div>
+</template>
+
+<script>
+  import JSelectMultiUserModal from './modal/JSelectMultiUserModal'
+  export default {
+    name: 'JSelectMultiUser',
+    components:{ JSelectMultiUserModal },
+    props:{
+      value:{
+        type:String,
+        required:false
+      },
+      triggerChange:{
+        type: Boolean,
+        required: false,
+        default: false
+      }
+    },
+    data(){
+      return {
+        selectList: [],
+      }
+    },
+    computed: {
+      nameList: function () {
+        var names = [];
+        for (var a = 0; a < this.selectList.length; a++) {
+          names.push(this.selectList[a].name);
+        }
+        let nameStr = ''
+        if(names.length>0){
+          nameStr = names.join(",")
+        }
+        if(this.triggerChange){
+          this.$emit("change",nameStr)
+        }else{
+          this.$emit("input",nameStr)
+        }
+        return names;
+      }
+    },
+    methods:{
+      handleSelect: function () {
+        this.$refs.selectModal.add();
+      },
+      selectReset() {
+        this.selectList = [];
+      },
+      selectOK: function (data) {
+        this.selectList = data;
+      }
+    }
+  }
+</script>
@@ -10,7 +10,7 @@
       cancelText="关闭">
       <a-row :gutter="18">
         <a-col :span="16">
-          <a-card title="选择人员" :bordered=true>
+          <a-card title="选择人员" :bordered="true">
             <!-- 查询区域 -->
             <div class="table-page-search-wrapper">
               <a-form layout="inline">
@@ -51,7 +51,7 @@
           </a-card>
         </a-col>
         <a-col :span="8">
-          <a-card title="用户选择" :bordered=true>
+          <a-card title="用户选择" :bordered="true">
             <!-- table区域-begin -->
             <div>
               <a-table
+<template>
+  <div>
+    <a-input-search
+      v-model="selectedDepUsers"
+      placeholder="请先选择用户"
+      disabled
+      @search="onSearchDepUser">
+      <a-button slot="enterButton" :disabled="disabled">选择用户</a-button>
+    </a-input-search>
+    <j-select-user-by-dep-modal
+      ref="selectModal"
+      :modal-width="modalWidth"
+      @ok="onSearchDepUserCallBack" />
+  </div>
+</template>
+
+<script>
+  import JSelectUserByDepModal from './modal/JSelectUserByDepModal'
+  export default {
+    name: 'JSelectUserByDep',
+    components: { JSelectUserByDepModal },
+    props:{
+      modalWidth:{
+        type:Number,
+        default:1250,
+        required:false
+      },
+      value:{
+        type:String,
+        required:false
+      },
+      triggerChange:{
+        type: Boolean,
+        required: false,
+        default: false
+      },
+      disabled:{
+        type: Boolean,
+        required: false,
+        default: false
+      }
+    },
+    data() {
+      return {
+        selectedDepUsers:"",
+      }
+    },
+    mounted(){
+      this.selectedDepUsers = this.value
+    },
+    watch:{
+      value(val){
+        this.selectedDepUsers = val
+      }
+    },
+    methods: {
+      //通过组织机构筛选选择用户
+      onSearchDepUser() {
+        this.$refs.selectModal.showModal()
+        this.onSearchDepUserCallBack('')
+      },
+      onSearchDepUserCallBack(selectedDepUsers) {
+        this.selectedDepUsers = selectedDepUsers
+        if(this.triggerChange){
+          this.$emit("change",selectedDepUsers)
+        }else{
+          this.$emit("input",selectedDepUsers)
+        }
+      }
+    }
+  }
+</script>
+
+<style scoped>
+
+</style>
 \ No newline at end of file
-<template>
-  <a-modal
-    :width="modalWidth"
-    :visible="visible"
-    :title="title"
-    @ok="handleSubmit"
-    @cancel="close"
-    cancelText="关闭"
-    style="margin-top: -70px"
-    wrapClassName="ant-modal-cust-warp"
-  >
-    <a-row :gutter="10" style="background-color: #ececec; padding: 10px; margin: -10px">
-      <a-col :md="6" :sm="24">
-        <a-card :bordered="false">
-          <!--组织机构-->
-          <a-directory-tree
-            selectable
-            :selectedKeys="selectedKeys"
-            :checkStrictly="true"
-            @select="this.onSelect"
-            :dropdownStyle="{maxHeight:'200px',overflow:'auto'}"
-            :treeData="departTree"
-          />
-        </a-card>
-      </a-col>
-      <a-col :md="18" :sm="24">
-        <a-card :bordered="false">
-          用户账号:
-          <a-input-search
-            :style="{width:'150px',marginBottom:'15px'}"
-            placeholder=""
-            v-model="queryParam.username"
-            @search="onSearch"
-          />
-          <a-button @click="searchReset" style="margin-left: 10px" icon="redo">重置</a-button>
-          <!--用户列表-->
-          <a-table
-            ref="table"
-            :scroll="scrollTrigger"
-            size="middle"
-            rowKey="id"
-            :columns="columns"
-            :dataSource="dataSource"
-            :pagination="ipagination"
-            style="background-color: white"
-            :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
-            @change="handleTableChange">
-          </a-table>
-        </a-card>
-      </a-col>
-    </a-row>
-  </a-modal>
-</template>
-
-<script>
-  import { filterObj } from '@/utils/util'
-  import { queryDepartTreeList, getUserList, queryUserByDepId, queryUserRoleMap } from '@/api/api'
-
-  export default {
-    name: 'SearchUserByDepModal',
-    components: {
-    },
-    data() {
-      return {
-        queryParam: {},
-        columns: [
-          {
-            title: '用户账号',
-            align: 'center',
-            dataIndex: 'username'
-          },
-          {
-            title: '真实姓名',
-            align: 'center',
-            dataIndex: 'realname'
-          },
-          {
-            title: '角色名称',
-            align: 'center',
-            dataIndex: 'roleName'
-          },
-          {
-            title: '性别',
-            align: 'center',
-            dataIndex: 'sex',
-            customRender: function(text) {
-              if (text === 1) {
-                return '男'
-              } else if (text === 2) {
-                return '女'
-              } else {
-                return text
-              }
-            }
-          },
-          {
-            title: '手机号码',
-            align: 'center',
-            dataIndex: 'phone'
-          },
-          {
-            title: '邮箱',
-            align: 'center',
-            dataIndex: 'email'
-          }
-        ],
-        scrollTrigger:{},
-        dataSource: [],
-        selectedKeys: [],
-        userNames: [],
-        departName: '',
-        userRolesMap: {},
-        title: '',
-        ipagination: {
-          current: 1,
-          pageSize: 10,
-          pageSizeOptions: ['10', '20', '30'],
-          showTotal: (total, range) => {
-            return range[0] + '-' + range[1] + ' 共' + total + '条'
-          },
-          showQuickJumper: true,
-          showSizeChanger: true,
-          total: 0
-        },
-        isorter: {
-          column: 'createTime',
-          order: 'desc'
-        },
-        selectedRowKeys: [],
-        selectedRows: [],
-        userData: [],
-        modalWidth: 1250,
-        departTree: [],
-        visible: false,
-        form: this.$form.createForm(this),
-      }
-    },
-    created() {
-      // 该方法触发屏幕自适应
-      this.resetScreenSize();
-    },
-    methods: {
-      loadData(arg) {
-        if (arg === 1) {
-          this.ipagination.current = 1;
-        }
-        let params = this.getQueryParams();//查询条件
-        getUserList(params).then((res) => {
-          if (res.success) {
-            this.dataSource = res.result.records;
-            this.assignRoleName(this.dataSource);
-            this.userData = res.result.records;
-            this.ipagination.total = res.result.total;
-          }
-        })
-        queryUserRoleMap().then((res) => {
-          if (res.success) {
-            this.userRolesMap = res.result;
-          }
-        })
-      },
-      // 触发屏幕自适应
-      resetScreenSize(){
-        let screenWidth = document.body.clientWidth;
-        if(screenWidth < 500){
-          this.scrollTrigger = {x : 800};
-        }else{
-          this.scrollTrigger = {};
-        }
-      },
-      showModal() {
-        this.visible = true;
-        this.assignRoleName(this.dataSource);
-        this.queryDepartTree();
-        this.form.resetFields();
-        this.loadData(1);
-      },
-      getQueryParams() {
-        let param = Object.assign({}, this.queryParam, this.isorter);
-        param.field = this.getQueryField();
-        param.pageNo = this.ipagination.current;
-        param.pageSize = this.ipagination.pageSize;
-        return filterObj(param);
-      },
-      getQueryField() {
-        let str = 'id,';
-        for (let a = 0; a < this.columns.length; a++) {
-          str += ',' + this.columns[a].dataIndex;
-        }
-        return str;
-      },
-      searchReset(num) {
-        let that = this;
-        if(num !== 0){
-          that.loadData(1);
-        }
-        that.selectedRowKeys = [];
-        that.userNames = [];
-        that.queryParam = {};
-        that.selectedKeys = [];
-        that.userNames = [];
-      },
-      close() {
-        this.$emit('close');
-        this.searchReset(0);
-        this.visible = false;
-      },
-      handleTableChange(pagination, filters, sorter) {
-        //TODO 筛选
-        if (Object.keys(sorter).length > 0) {
-          this.isorter.column = sorter.field;
-          this.isorter.order = 'ascend' === sorter.order ? 'asc' : 'desc';
-        }
-        this.ipagination = pagination;
-        this.loadData();
-      },
-      handleSubmit() {
-        const that = this;
-        for (let i = 0, len = this.selectedRowKeys.length; i < len; i++) {
-          this.getUserNames(this.selectedRowKeys[i]);
-        }
-        that.$emit('ok', that.userNames.join(','));
-        that.close();
-      },
-      // 遍历匹配,获取用户真实姓名
-      getUserNames(rowId) {
-        let dataSource = this.dataSource;
-        for (let i = 0, len = dataSource.length; i < len; i++) {
-          if (rowId === dataSource[i].id) {
-            this.userNames.push(dataSource[i].realname);
-          }
-        }
-      },
-      // 点击树节点,筛选出对应的用户
-      onSelect(selectedKeys) {
-        if (selectedKeys[0] != null) {
-          this.queryUser(selectedKeys) // 调用方法根据选选择的id查询用户信息
-          if (this.selectedKeys[0] !== selectedKeys[0]) {
-            this.selectedKeys = [selectedKeys[0]];
-          }
-        }
-      },
-      onSelectChange(selectedRowKeys, selectionRows) {
-        this.selectedRowKeys = selectedRowKeys;
-        this.selectionRows = selectionRows;
-      },
-      onSearch() {
-        this.loadData(1);
-      },
-      // 根据选择的id来查询用户信息
-      queryUser(selectedKeys) {
-        queryUserByDepId({ id: selectedKeys.toString() }).then((res) => {
-          if (res.success) {
-            this.ipagination.total = res.result.length;
-            this.dataSource = res.result;
-            this.assignRoleName(this.dataSource);
-          }
-        })
-      },
-      // 传入用户id,找到匹配的角色名称
-      queryUserRole(userId) {
-        let map = this.userRolesMap;
-        let roleName = [];
-        for (var key in map) {
-          if (userId === key) {
-            roleName.push(map[key]);
-          }
-        }
-        return roleName.join(',');
-      },
-      queryDepartTree() {
-        queryDepartTreeList().then((res) => {
-          if (res.success) {
-            this.departTree = res.result;
-          }
-        })
-      },
-      // 为角色名称赋值
-      assignRoleName(data) {
-        let userId = '';
-        let role = '';
-        for (let i = 0, length = data.length; i < length; i++) {
-          userId = this.dataSource[i].id;
-          role = this.queryUserRole(userId);
-          this.dataSource[i].roleName = role;
-        }
-      },
-      modalFormOk() {
-        this.loadData();
-      }
-    }
-  }
-</script>
-
-<style scoped>
-  .ant-table-tbody .ant-table-row td {
-    padding-top: 10px;
-    padding-bottom: 10px;
-  }
-
-  #components-layout-demo-custom-trigger .trigger {
-    font-size: 18px;
-    line-height: 64px;
-    padding: 0 24px;
-    cursor: pointer;
-    transition: color .3s;
-  }
-</style>
 \ No newline at end of file