From ee8afa98b9f933b2a712e54e8c8caf0125a68dc6 Mon Sep 17 00:00:00 2001
From: vdpAdmin <vdpadmin@163.com>
Date: Fri, 7 Jan 2022 10:58:10 +0800
Subject: [PATCH] =?UTF-8?q?=E7=89=88=E6=9C=AC=E5=8F=B7=E5=8D=87=E7=BA=A7?=
 =?UTF-8?q?=E5=88=B02.2.0=EF=BC=8C=E7=BA=A7=E8=81=94=E9=80=89=E6=8B=A9?=
 =?UTF-8?q?=E7=BB=84=E4=BB=B6=E5=A2=9E=E5=8A=A0=E5=A4=9A=E9=80=89=E5=B1=9E?=
 =?UTF-8?q?=E6=80=A7=EF=BC=8C=E4=BF=AE=E5=A4=8Daxios=E6=8A=A5=E9=94=99?=
 =?UTF-8?q?=EF=BC=8C=E4=BF=AE=E5=A4=8D=E5=85=B6=E4=BB=96=E4=B8=80=E4=BA=9B?=
 =?UTF-8?q?=E5=B0=8F=E9=97=AE=E9=A2=98=E3=80=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json                                  |   2 +-
 .../field-widget/cascader-widget.vue          |   2 +-
 .../form-widget/field-widget/fieldMixin.js    |   8 +
 .../field-widget/file-upload-widget.vue       |   8 +-
 .../field-widget/picture-upload-widget.vue    |   1 +
 src/components/form-designer/index.vue        |   9 +-
 .../cascader-defaultValue-editor.vue          |  18 +
 .../cascader-multiple-editor.vue              |  24 ++
 .../checkbox-defaultValue-editor.vue          |  18 +
 .../field-radio/radio-defaultValue-editor.vue |  18 +
 .../select-defaultValue-editor.vue            |  18 +
 .../property-editor/propertyMixin.js          |   8 +
 .../form-designer/widget-panel/index.vue      |   4 +-
 .../widget-panel/templatesConfig.js           |  16 +-
 .../widget-panel/widgetsConfig.js             |   1 +
 .../container-item/container-item-wrapper.vue |   2 +-
 .../container-item/containerItemMixin.js      |  13 +-
 .../container-item/data-table-item.vue        | 309 ++++++++++++++++++
 .../container-item/sub-form-item.vue          |  10 +-
 src/components/form-render/index.vue          |  84 ++++-
 src/lang/en-US.js                             |  25 ++
 src/lang/zh-CN.js                             |  25 ++
 src/utils/config.js                           |   2 +-
 src/utils/format.js                           | 214 ++++++++++++
 src/utils/util.js                             |  14 +-
 25 files changed, 815 insertions(+), 38 deletions(-)
 create mode 100644 src/components/form-designer/setting-panel/property-editor/field-cascader/cascader-defaultValue-editor.vue
 create mode 100644 src/components/form-designer/setting-panel/property-editor/field-cascader/cascader-multiple-editor.vue
 create mode 100644 src/components/form-designer/setting-panel/property-editor/field-checkbox/checkbox-defaultValue-editor.vue
 create mode 100644 src/components/form-designer/setting-panel/property-editor/field-radio/radio-defaultValue-editor.vue
 create mode 100644 src/components/form-designer/setting-panel/property-editor/field-select/select-defaultValue-editor.vue
 create mode 100644 src/components/form-render/container-item/data-table-item.vue
 create mode 100644 src/utils/format.js

diff --git a/package.json b/package.json
index fad2997..4b5d3cf 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "variant-form",
-  "version": "2.1.9",
+  "version": "2.2.0",
   "private": false,
   "scripts": {
     "serve": "vue-cli-service serve --open src/main.js",
diff --git a/src/components/form-designer/form-widget/field-widget/cascader-widget.vue b/src/components/form-designer/form-widget/field-widget/cascader-widget.vue
index 72cc4e0..9e54b95 100644
--- a/src/components/form-designer/form-widget/field-widget/cascader-widget.vue
+++ b/src/components/form-designer/form-widget/field-widget/cascader-widget.vue
@@ -7,7 +7,7 @@
                  :size="field.options.size"
                  :clearable="field.options.clearable"
                  :filterable="field.options.filterable"
-                 :props="{ checkStrictly: field.options.checkStrictly, expandTrigger: 'hover' }"
+                 :props="{ checkStrictly: field.options.checkStrictly, multiple: field.options.multiple, expandTrigger: 'hover' }"
                  @visible-change="hideDropDownOnClick" @expand-change="hideDropDownOnClick"
                  :placeholder="field.options.placeholder || i18nt('render.hint.selectPlaceholder')"
                  @focus="handleFocusCustomEvent" @blur="handleBlurCustomEvent"
diff --git a/src/components/form-designer/form-widget/field-widget/fieldMixin.js b/src/components/form-designer/form-widget/field-widget/fieldMixin.js
index 0531a09..4c08d6d 100644
--- a/src/components/form-designer/form-widget/field-widget/fieldMixin.js
+++ b/src/components/form-designer/form-widget/field-widget/fieldMixin.js
@@ -519,6 +519,14 @@ export default {
     reloadOptions(options) {
       this.field.options.optionItems = deepClone(options)
     },
+    
+    /**
+     * 返回radio/checkbox/select/cascader的选项数据
+     * @returns 选择项数组
+     */
+     getOptions() {
+      return this.field.options.optionItems
+    },
 
     disableOption(optionValue) {
       this.disableOptionOfList(this.field.options.optionItems, optionValue)
diff --git a/src/components/form-designer/form-widget/field-widget/file-upload-widget.vue b/src/components/form-designer/form-widget/field-widget/file-upload-widget.vue
index 21579da..0a082ba 100644
--- a/src/components/form-designer/form-widget/field-widget/file-upload-widget.vue
+++ b/src/components/form-designer/form-widget/field-widget/file-upload-widget.vue
@@ -18,9 +18,9 @@
         <div class="upload-file-list">
           <span class="upload-file-name" :title="file.name">{{file.name}}</span>
           <a :href="file.url" download="">
-            <i class="el-icon-download file-action" title="i18nt('render.hint.downloadFile')"></i></a>
-          <i class="el-icon-delete file-action" title="i18nt('render.hint.removeFile')" v-if="!field.options.disabled"
-            @click="removeUploadFile(file.name)"></i>
+            <i class="el-icon-download file-action" :title="i18nt('render.hint.downloadFile')"></i></a>
+          <i class="el-icon-delete file-action" :title="i18nt('render.hint.removeFile')" v-if="!field.options.disabled"
+             @click="removeUploadFile(file.name)"></i>
         </div>
       </template>
     </el-upload>
@@ -200,7 +200,7 @@
 
       removeUploadFile(fileName) {
         let foundIdx = -1
-        this.fileList.forEach((file,idx) => {
+        this.fileList.forEach((file, idx) => {
           if (file.name === fileName) {
             foundIdx = idx
           }
diff --git a/src/components/form-designer/form-widget/field-widget/picture-upload-widget.vue b/src/components/form-designer/form-widget/field-widget/picture-upload-widget.vue
index fdc39f2..746e372 100644
--- a/src/components/form-designer/form-widget/field-widget/picture-upload-widget.vue
+++ b/src/components/form-designer/form-widget/field-widget/picture-upload-widget.vue
@@ -169,6 +169,7 @@
           if (file.status === 'success') {
             //this.fileList.push(file)  /* 上传过程中，this.fileList是只读的，不能修改赋值!! */
             this.updateUploadFieldModelAndEmitDataChange(fileList)
+            this.fileList = deepClone(fileList)
 
             this.uploadBtnHidden = fileList.length >= this.field.options.limit
           }
diff --git a/src/components/form-designer/index.vue b/src/components/form-designer/index.vue
index 97bb090..f322f1f 100644
--- a/src/components/form-designer/index.vue
+++ b/src/components/form-designer/index.vue
@@ -64,10 +64,11 @@
   import ToolbarPanel from './toolbar-panel/index'
   import SettingPanel from './setting-panel/index'
   import VFormWidget from './form-widget/index'
-  import {createDesigner} from "@/components/form-designer/designer";
-  import {addWindowResizeHandler, deepClone, getQueryParam} from "@/utils/util";
-  import {MOCK_CASE_URL, VARIANT_FORM_VERSION} from "@/utils/config";
-  import i18n, { changeLocale } from "@/utils/i18n";
+  import {createDesigner} from "@/components/form-designer/designer"
+  import {addWindowResizeHandler, deepClone, getQueryParam} from "@/utils/util"
+  import {MOCK_CASE_URL, VARIANT_FORM_VERSION} from "@/utils/config"
+  import i18n, { changeLocale } from "@/utils/i18n"
+  import axios from "axios"
 
   export default {
     name: "VFormDesigner",
diff --git a/src/components/form-designer/setting-panel/property-editor/field-cascader/cascader-defaultValue-editor.vue b/src/components/form-designer/setting-panel/property-editor/field-cascader/cascader-defaultValue-editor.vue
new file mode 100644
index 0000000..8ccc44e
--- /dev/null
+++ b/src/components/form-designer/setting-panel/property-editor/field-cascader/cascader-defaultValue-editor.vue
@@ -0,0 +1,18 @@
+<template>
+  <div style="display: none"></div>
+</template>
+
+<script>
+  export default {
+    name: "cascader-defaultValue-editor",
+    props: {
+      designer: Object,
+      selectedWidget: Object,
+      optionModel: Object,
+    },
+  }
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/components/form-designer/setting-panel/property-editor/field-cascader/cascader-multiple-editor.vue b/src/components/form-designer/setting-panel/property-editor/field-cascader/cascader-multiple-editor.vue
new file mode 100644
index 0000000..f67a171
--- /dev/null
+++ b/src/components/form-designer/setting-panel/property-editor/field-cascader/cascader-multiple-editor.vue
@@ -0,0 +1,24 @@
+<template>
+  <el-form-item :label="i18nt('designer.setting.multiple')">
+    <el-checkbox v-model="optionModel.multiple"></el-checkbox>
+  </el-form-item>
+</template>
+
+<script>
+  import i18n from "@/utils/i18n"
+  import propertyMixin from "@/components/form-designer/setting-panel/property-editor/propertyMixin"
+
+  export default {
+    name: "multiple-editor",
+    mixins: [i18n, propertyMixin],
+    props: {
+      designer: Object,
+      selectedWidget: Object,
+      optionModel: Object,
+    },
+  }
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/components/form-designer/setting-panel/property-editor/field-checkbox/checkbox-defaultValue-editor.vue b/src/components/form-designer/setting-panel/property-editor/field-checkbox/checkbox-defaultValue-editor.vue
new file mode 100644
index 0000000..9660985
--- /dev/null
+++ b/src/components/form-designer/setting-panel/property-editor/field-checkbox/checkbox-defaultValue-editor.vue
@@ -0,0 +1,18 @@
+<template>
+  <div style="display: none"></div>
+</template>
+
+<script>
+  export default {
+    name: "checkbox-defaultValue-editor",
+    props: {
+      designer: Object,
+      selectedWidget: Object,
+      optionModel: Object,
+    },
+  }
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/components/form-designer/setting-panel/property-editor/field-radio/radio-defaultValue-editor.vue b/src/components/form-designer/setting-panel/property-editor/field-radio/radio-defaultValue-editor.vue
new file mode 100644
index 0000000..0f846a9
--- /dev/null
+++ b/src/components/form-designer/setting-panel/property-editor/field-radio/radio-defaultValue-editor.vue
@@ -0,0 +1,18 @@
+<template>
+  <div style="display: none"></div>
+</template>
+
+<script>
+  export default {
+    name: "radio-defaultValue-editor",
+    props: {
+      designer: Object,
+      selectedWidget: Object,
+      optionModel: Object,
+    },
+  }
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/components/form-designer/setting-panel/property-editor/field-select/select-defaultValue-editor.vue b/src/components/form-designer/setting-panel/property-editor/field-select/select-defaultValue-editor.vue
new file mode 100644
index 0000000..56612ee
--- /dev/null
+++ b/src/components/form-designer/setting-panel/property-editor/field-select/select-defaultValue-editor.vue
@@ -0,0 +1,18 @@
+<template>
+  <div style="display: none"></div>
+</template>
+
+<script>
+  export default {
+    name: "select-defaultValue-editor",
+    props: {
+      designer: Object,
+      selectedWidget: Object,
+      optionModel: Object,
+    },
+  }
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/components/form-designer/setting-panel/property-editor/propertyMixin.js b/src/components/form-designer/setting-panel/property-editor/propertyMixin.js
index 2ef6a42..550e119 100644
--- a/src/components/form-designer/setting-panel/property-editor/propertyMixin.js
+++ b/src/components/form-designer/setting-panel/property-editor/propertyMixin.js
@@ -32,6 +32,14 @@ export default {
 
     onMultipleSelected(val) {
       if (val) {
+        //debugger
+
+        // 清空已选项，否则console会报错！！
+        let foundRef = this.designer.formWidget.getWidgetRef(this.optionModel.name)
+        if (!!foundRef && !!foundRef.clearSelectedOptions) {
+          foundRef.clearSelectedOptions()
+        }
+
         this.optionModel.defaultValue = []  //清空原默认值!!
       } else {
         if (!!this.optionModel.defaultValue && (this.optionModel.defaultValue.length > 0)) {
diff --git a/src/components/form-designer/widget-panel/index.vue b/src/components/form-designer/widget-panel/index.vue
index 4992d0a..5557973 100644
--- a/src/components/form-designer/widget-panel/index.vue
+++ b/src/components/form-designer/widget-panel/index.vue
@@ -61,8 +61,8 @@
         <template v-for="(ft, idx) in formTemplates">
           <el-card :bord-style="{ padding: '0' }" shadow="hover" class="ft-card">
             <el-popover placement="right" trigger="hover">
-              <img slot="reference" :src="ftImages[idx].imgUrl" style="width: 200px">
-              <img :src="ftImages[idx].imgUrl" style="height: 600px;width: 720px">
+              <img slot="reference" :src="ft.imgUrl" style="width: 200px">
+              <img :src="ft.imgUrl" style="height: 600px;width: 720px">
             </el-popover>
             <div class="bottom clear-fix">
               <span class="ft-title">#{{idx+1}} {{ft.title}}</span>
diff --git a/src/components/form-designer/widget-panel/templatesConfig.js b/src/components/form-designer/widget-panel/templatesConfig.js
index 32a1b11..bf67a61 100644
--- a/src/components/form-designer/widget-panel/templatesConfig.js
+++ b/src/components/form-designer/widget-panel/templatesConfig.js
@@ -1,56 +1,56 @@
 export const formTemplates = [
   {
     title: '单列表单',
-    //imgUrl: 'https://ks3-cn-beijing.ksyuncs.com/vform-static/form-samples/t1.png',
+    imgUrl: 'https://ks3-cn-beijing.ksyuncs.com/vform-static/form-samples/t1.png',
     jsonUrl: 'https://ks3-cn-beijing.ksyuncs.com/vform-static/form-samples/json1.txt',
     description: '表单模板详细说明...'
   },
 
   {
     title: '多列表单',
-    //imgUrl: 'https://ks3-cn-beijing.ksyuncs.com/vform-static/form-samples/t2.png',
+    imgUrl: 'https://ks3-cn-beijing.ksyuncs.com/vform-static/form-samples/t2.png',
     jsonUrl: 'https://ks3-cn-beijing.ksyuncs.com/vform-static/form-samples/json2.txt',
     description: '表单模板详细说明...'
   },
 
   {
     title: '分组表单',
-    //imgUrl: 'https://ks3-cn-beijing.ksyuncs.com/vform-static/form-samples/t3.png',
+    imgUrl: 'https://ks3-cn-beijing.ksyuncs.com/vform-static/form-samples/t3.png',
     jsonUrl: 'https://ks3-cn-beijing.ksyuncs.com/vform-static/form-samples/json3.txt',
     description: '表单模板详细说明...'
   },
 
   {
     title: '标签页表单',
-    //imgUrl: 'https://ks3-cn-beijing.ksyuncs.com/vform-static/form-samples/t4.png',
+    imgUrl: 'https://ks3-cn-beijing.ksyuncs.com/vform-static/form-samples/t4.png',
     jsonUrl: 'https://ks3-cn-beijing.ksyuncs.com/vform-static/form-samples/json4.txt',
     description: '表单模板详细说明...'
   },
 
   {
     title: '主从表单',
-    //imgUrl: 'https://ks3-cn-beijing.ksyuncs.com/vform-static/form-samples/t5.png',
+    imgUrl: 'https://ks3-cn-beijing.ksyuncs.com/vform-static/form-samples/t5.png',
     jsonUrl: 'https://ks3-cn-beijing.ksyuncs.com/vform-static/form-samples/json5.txt',
     description: '表单模板详细说明...'
   },
 
   {
     title: '响应式表单',
-    //imgUrl: 'https://ks3-cn-beijing.ksyuncs.com/vform-static/form-samples/t6.png',
+    imgUrl: 'https://ks3-cn-beijing.ksyuncs.com/vform-static/form-samples/t6.png',
     jsonUrl: 'https://ks3-cn-beijing.ksyuncs.com/vform-static/form-samples/json6.txt',
     description: '表单模板详细说明...'
   },
 
   {
     title: '问卷调查表',
-    //imgUrl: 'https://ks3-cn-beijing.ksyuncs.com/vform-static/form-samples/t7.png',
+    imgUrl: 'https://ks3-cn-beijing.ksyuncs.com/vform-static/form-samples/t7.png',
     jsonUrl: 'https://ks3-cn-beijing.ksyuncs.com/vform-static/form-samples/json7.txt',
     description: '表单模板详细说明...'
   },
 
   {
     title: '固定表格表单',
-    //imgUrl: 'https://ks3-cn-beijing.ksyuncs.com/vform-static/form-samples/t8.png',
+    imgUrl: 'https://ks3-cn-beijing.ksyuncs.com/vform-static/form-samples/t8.png',
     jsonUrl: 'https://ks3-cn-beijing.ksyuncs.com/vform-static/form-samples/json8.txt',
     description: '表单模板详细说明...'
   },
diff --git a/src/components/form-designer/widget-panel/widgetsConfig.js b/src/components/form-designer/widget-panel/widgetsConfig.js
index 2c4eca4..5b69fdd 100644
--- a/src/components/form-designer/widget-panel/widgetsConfig.js
+++ b/src/components/form-designer/widget-panel/widgetsConfig.js
@@ -869,6 +869,7 @@ export const advancedFields = [
       hidden: false,
       clearable: true,
       filterable: false,
+      multiple: false,
       checkStrictly: false,  //可选择任意一级选项，默认不开启
       optionItems: [
         {label: 'select 1', value: 1, children: [{label: 'child 1', value: 11}]},
diff --git a/src/components/form-render/container-item/container-item-wrapper.vue b/src/components/form-render/container-item/container-item-wrapper.vue
index 07a6bf0..288f792 100644
--- a/src/components/form-render/container-item/container-item-wrapper.vue
+++ b/src/components/form-render/container-item/container-item-wrapper.vue
@@ -21,7 +21,7 @@
       widget: {
         type: Object,
         required: true
-      }
+      },
     },
     computed: {
       customClass() {
diff --git a/src/components/form-render/container-item/containerItemMixin.js b/src/components/form-render/container-item/containerItemMixin.js
index 21e23d0..5150508 100644
--- a/src/components/form-render/container-item/containerItemMixin.js
+++ b/src/components/form-render/container-item/containerItemMixin.js
@@ -91,6 +91,13 @@ export default {
       }
     },
 
+    /**
+     * 获取子表单的行数
+     */
+    getSubFormRowCount() {
+      return !this.rowIdData ? 0 : this.rowIdData.length
+    },
+
     disableSubFormRow(rowIndex) {
       this.widget.widgetList.forEach(subWidget => {
         let swRefName = subWidget.options.name + '@row' + this.rowIdData[rowIndex]
@@ -145,13 +152,17 @@ export default {
 
     getSubFormValues(needValidation = true) {
       if (this.widget.type === 'sub-form') {
-        //TODO: 逐行校验子表单！！
+        //TODO: 逐行校验子表单！暂未实现！！
         return this.formModel[this.widget.options.name]
       } else {
         this.$message.error(this.i18nt('render.hint.nonSubFormType'))
       }
     },
 
+    setSubFormValues(subFormValues) {
+      //TODO: 待实现！！
+    },
+
     // validateField(fieldName) { //逐行校验子表单字段
     //   //TODO:
     // },
diff --git a/src/components/form-render/container-item/data-table-item.vue b/src/components/form-render/container-item/data-table-item.vue
new file mode 100644
index 0000000..bf96f89
--- /dev/null
+++ b/src/components/form-render/container-item/data-table-item.vue
@@ -0,0 +1,309 @@
+<template>
+
+	<container-item-wrapper v-show="!widget.options.hidden" :widget="widget">
+
+			<el-table ref="dataTable" :data="widget.options.tableData"
+								:height="widget.options.tableHeight" :style="{'width': widget.options.tableWidth}"
+								:border="widget.options.border" :show-summary="widget.options.showSummary"
+								:size="widget.options.tableSize" :stripe="widget.options.stripe"
+								@selection-change="handleSelectionChange"
+								@sort-change="handleSortChange"
+								:cell-style="{padding: widget.options.rowSpacing + 'px 0'}" >
+
+				<el-table-column v-if="widget.options.showIndex" type="index" width="50" fixed="left"></el-table-column>
+				<el-table-column v-if="widget.options.showCheckBox" type="selection"
+												 :width="!widget.options.showSummary ? 42: 53"  fixed="left"></el-table-column>
+
+				<el-table-column v-for="(item,index) in widget.options.tableColumns"
+												 v-if="item.show !== false"
+											 	 :key="index"
+											 	 :prop="item.prop"
+												 :label="item.label"
+												 :sortable="item.sortable"
+												 :fixed="item.fixed"
+												 :align="item.align ? item.align:'center'"
+												 :render-header="renderHeader"
+												 :formatter="formatterValue"
+												 :format="item.format"
+												 :show-overflow-tooltip="true"
+												 :width="item.width">
+				</el-table-column>
+			</el-table>
+			<el-pagination v-if="widget.options.showPagination"
+										 :small="widget.options.smallPagination"
+										 :current-page="widget.options.pagination.currentPage"
+										 :page-sizes="widget.options.pagination.pageSizes"
+										 :page-size="widget.options.pagination.pageSize"
+										 :layout="paginationLayout"
+										 :total="widget.options.pagination.total"
+										 @size-change="handlePageSizeChange"
+										 @current-change="handleCurrentPageChange"
+			>
+			</el-pagination>
+
+	</container-item-wrapper>
+</template>
+<script>
+	import ContainerItemWrapper from '@/components/form-render/container-item/container-item-wrapper'
+  import emitter from 'element-ui/lib/mixins/emitter'
+  import i18n from "@/utils/i18n"
+	import {formatDate1, formatDate2, formatDate3, formatDate4, formatDate5,
+					formatNumber1, formatNumber2, formatNumber3, formatNumber4,
+					formatNumber5, formatNumber6, formatNumber7} from "@/utils/format"
+	import FieldComponents from '@/components/form-designer/form-widget/field-widget/index'
+	import refMixin from "@/components/form-render/refMixin"
+	import containerItemMixin from "@/components/form-render/container-item/containerItemMixin"
+
+  export default {
+    name: "DataTableItem",
+    componentName: 'ContainerItem',  //必须固定为ContainerItem，用于接收父级组件的broadcast事件
+    mixins: [emitter, i18n, refMixin, containerItemMixin],
+		components: {
+		  ContainerItemWrapper,
+		  ...FieldComponents,
+		},
+		props: {
+			widget: Object,
+			parentWidget: Object,
+			parentList: Array,
+			indexOfParentList: Number,
+			designer: Object,
+
+			designState: {
+				type: Boolean,
+				default: false
+			},
+
+			subFormRowIndex: { /* 子表单组件行索引，从0开始计数 */
+				type: Number,
+				default: -1
+			},
+			subFormColIndex: { /* 子表单组件列索引，从0开始计数 */
+				type: Number,
+				default: -1
+			},
+			subFormRowId: { /* 子表单组件行Id，唯一id且不可变 */
+				type: String,
+				default: ''
+			},
+
+		},
+		inject: ['refList', 'sfRefList', 'globalModel'],
+		data() {
+			return {
+				tableData: [{
+					date: '2016-05-02',
+					name: '王小虎1',
+					address: '上海市普陀区金沙江路 1518 弄'
+				}, {
+					date: '2016-05-04',
+					name: '王小虎2',
+					address: '上海市普陀区金沙江路 1517 弄'
+				}, {
+					date: '2016-05-01',
+					name: '王小虎3',
+					address: '上海市普陀区金沙江路 1519 弄'
+				}, {
+					date: '2016-05-03',
+					name: '王小虎4',
+					address: '上海市普陀区金沙江路 1516 弄'
+				}],
+
+				//rowSelection: [],
+				selectionIndex: [],
+				pageSize: this.widget.options.pagination.pageSize,
+				currentPage: this.widget.options.pagination.currentPage,
+
+			}
+		},
+		created() {
+			this.initRefList()
+		},
+		mounted() {
+			// this.handleOnMounted()
+		},
+		beforeDestroy() {
+			this.unregisterFromRefList()
+		},
+		computed: {
+			paginationLayout() {
+				return !!this.widget.options.smallPagination ? 'prev, pager, next' : 'total, sizes, prev, pager, next, jumper'
+			},
+
+		  customClass() {
+		    return !!this.widget.options.customClass ? this.widget.options.customClass.join(' ') : ''
+		  },
+
+		},
+    methods: {
+			selectWidget(widget) {
+				this.designer.setSelected(widget)
+			},
+
+			renderHeader(h, { column, $index }) {//debugger
+				let colCount = 0;
+				if(this.widget.options.showIndex){
+					colCount++;
+				}
+				if(this.widget.options.showCheckBox){
+					colCount++;
+				}
+
+				this.$set(column, "formatS", this.widget.options.tableColumns[$index-colCount].formatS)
+			  return column.label;
+			},
+
+			formatter(row, column, cellValue) {
+			  return cellValue;
+			},
+
+			formatterValue(row, column, cellValue) {
+				if(!!column.formatS) {
+					switch(column.formatS) {
+						case 'd1':
+								return formatDate1(cellValue);
+								break;
+						case 'd2':
+								return formatDate2(cellValue);
+								break;
+						case 'd3':
+								return formatDate3(cellValue);
+								break;
+						case 'd4':
+								return formatDate4(cellValue);
+								break;
+						case 'd5':
+								return formatDate5(cellValue);
+								break;
+						case 'n1':
+								return formatNumber1(cellValue);
+								break;
+						case 'n2':
+								return formatNumber2(cellValue);
+								break;
+						case 'n3':
+								return formatNumber3(cellValue);
+								break;
+						case 'n4':
+								return formatNumber4(cellValue);
+								break;
+						case 'n5':
+								return formatNumber5(cellValue);
+								break;
+						case 'n6':
+								return formatNumber6(cellValue);
+								break;
+						case 'n7':
+								return formatNumber7(cellValue);
+								break;
+					}
+				}
+			  return cellValue;
+			},
+
+			getRowIndex(row) {
+				return this.widget.options.tableData.lastIndexOf(row)
+			},
+
+			handleSelectionChange(val) {
+				//this.rowSelection = val
+
+				this.selectionIndex.length = 0
+				val.map((row) => {
+					let rowIndex = this.getRowIndex(row)
+					if (rowIndex >= 0) {
+						this.selectionIndex.push(rowIndex)
+					}
+				})
+
+				/* 必须调用mixins中的dispatch方法逐级向父组件发送消息！！ */
+				this.dispatch('VFormRender', 'dataTableSelectionChange',
+								[this, val, this.selectionIndex])
+			},
+
+			handleSortChange({column, prop, order}) {
+				// this.dispatch('VFormRender', 'dataTableSortChange',
+				// 				[this, column, prop, order, this.pageSize, this.currentPage])
+				//
+				// console.log('test====', prop)
+			},
+
+			handlePageSizeChange(pageSize) {
+				this.pageSize = pageSize
+				this.dispatch('VFormRender', 'dataTablePageSizeChange',
+								[this, pageSize, this.currentPage])
+
+				//console.log('test====', this.currentPage)
+			},
+
+			handleCurrentPageChange(currentPage) {
+				this.currentPage = currentPage
+				this.dispatch('VFormRender', 'dataTablePageChange',
+								[this, this.pageSize, currentPage])
+
+				//console.log('test====', this.pageSize)
+			},
+
+			//--------------------- 以下为组件支持外部调用的API方法 begin ------------------//
+			/* 提示：用户可自行扩充这些方法！！！ */
+
+			/**
+			 * 设置表格数据
+			 * @param tableData
+			 */
+			setTableData(tableData) {
+				this.widget.options.tableData = tableData
+			},
+
+			/**
+			 * 设置表格分页
+			 * @param pagination
+			 */
+			setPagination(pagination) {
+				if (pagination.currentPage !== undefined) {
+					this.widget.options.pagination.currentPage = pagination.currentPage
+				}
+				if (pagination.pageSize !== undefined) {
+					this.widget.options.pagination.pageSize = pagination.pageSize
+				}
+				if (pagination.total !== undefined) {
+					this.widget.options.pagination.total = pagination.total
+				}
+			},
+
+			/**
+			 * 获取选中行数据，格式为对象数组
+			 * @returns {[]}
+			 */
+			getSelectedRow() {
+				return this.$refs.dataTable.selection
+				//return this.rowSelection
+			},
+
+			/**
+			 * 获取选中行索引，格式为数组
+			 * @returns {[]}
+			 */
+			getSelectedIndex() {
+				return this.selectionIndex
+			},
+
+			//--------------------- 以上为组件支持外部调用的API方法 end ------------------//
+
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+	.collapse-container {
+	  margin: 2px;
+
+	  .form-widget-list {
+	    min-height: 28px;
+	  }
+	}
+
+	::v-deep .el-collapsed__header {
+	  padding: 10px 12px;
+	}
+</style>
diff --git a/src/components/form-render/container-item/sub-form-item.vue b/src/components/form-render/container-item/sub-form-item.vue
index e18d3c2..e3017b2 100644
--- a/src/components/form-render/container-item/sub-form-item.vue
+++ b/src/components/form-render/container-item/sub-form-item.vue
@@ -121,7 +121,7 @@
           let subFormModel = this.formModel[this.widget.options.name]
           if (!!subFormModel && (subFormModel.length > 0)) {
             subFormModel.forEach(() => {
-              this.rowIdData.push('r' + generateId())
+              this.rowIdData.push('id' + generateId())
             })
 
             if (!!initFlag) {
@@ -135,17 +135,21 @@
       },
 
       addToRowIdData() {
-        this.rowIdData.push('rowId' + generateId())
+        this.rowIdData.push('id' + generateId())
       },
 
       insertToRowIdData(rowIndex) {
-        this.rowIdData.splice(rowIndex, 0, 'rowId' + generateId())
+        this.rowIdData.splice(rowIndex, 0, 'id' + generateId())
       },
 
       deleteFromRowIdData(rowIndex) {
         this.rowIdData.splice(rowIndex, 1)
       },
 
+      getRowIdData() {
+        return this.rowIdData
+      },
+
       initFieldSchemaData() {  //初始化fieldSchemaData！！！
         if (this.widget.type !== 'sub-form') {
           return
diff --git a/src/components/form-render/index.vue b/src/components/form-render/index.vue
index 3bd9dc5..976184b 100644
--- a/src/components/form-render/index.vue
+++ b/src/components/form-render/index.vue
@@ -41,7 +41,12 @@
   import emitter from 'element-ui/lib/mixins/emitter'
   import './container-item/index'
   import FieldComponents from '@/components/form-designer/form-widget/field-widget/index'
-  import {deepClone, insertCustomCssToHead, insertGlobalFunctionsToHtml} from "../../utils/util"
+  import {
+    deepClone,
+    insertCustomCssToHead,
+    insertGlobalFunctionsToHtml,
+    traverseFieldWidgets
+  } from "@/utils/util"
   import i18n, { changeLocale } from "../../utils/i18n"
 
   export default {
@@ -298,16 +303,63 @@
         let foundW = this.getWidgetRef(widgetName)
         if (!!foundW) {
           foundW.setDisabled(disabledFlag)
+        } else { //没找到，可能是子表单中的组件
+          this.findWidgetOfSubFormAndSetDisabled(widgetName, disabledFlag)
         }
       },
 
+      findWidgetOfSubFormAndSetDisabled(widgetName, disabledFlag) {
+        this.findWidgetNameInSubForm(widgetName).forEach(wn => {
+          let sw = this.getWidgetRef(wn)
+          if (!!sw) {
+            sw.setDisabled(disabledFlag)
+          }
+        })
+      },
+
       findWidgetAndSetHidden(widgetName, hiddenFlag) {
         let foundW = this.getWidgetRef(widgetName)
         if (!!foundW) {
           foundW.setHidden(hiddenFlag)
+        } else { //没找到，可能是子表单中的组件
+          this.findWidgetOfSubFormAndSetHidden(widgetName, hiddenFlag)
         }
       },
 
+      findWidgetOfSubFormAndSetHidden(widgetName, hiddenFlag) {
+        this.findWidgetNameInSubForm(widgetName).forEach(wn => {
+          let sw = this.getWidgetRef(wn)
+          if (!!sw) {
+            sw.setHidden(hiddenFlag)
+          }
+        })
+      },
+
+      findWidgetNameInSubForm(widgetName) {
+        let result = []
+        let subFormName = null
+        let handlerFn = (field, parent) => {
+          if (!!field.options && (field.options.name === widgetName)) {
+            subFormName = parent.options.name
+          }
+        }
+        traverseFieldWidgets(this.widgetList, handlerFn)
+
+        if (!!subFormName) {
+          let subFormRef = this.getWidgetRef(subFormName)
+          if (!!subFormRef) {
+            let rowIds = subFormRef.getRowIdData()
+            if (!!rowIds && (rowIds.length > 0)) {
+              rowIds.forEach(rid => {
+                result.push( widgetName + '@row' + rid)
+              })
+            }
+          }
+        }
+
+        return result
+      },
+
       //--------------------- 以下为组件支持外部调用的API方法 begin ------------------//
       /* 提示：用户可自行扩充这些方法！！！ */
 
@@ -423,7 +475,19 @@
       getFieldValue(fieldName) { //单个字段获取值
         let fieldRef = this.getWidgetRef(fieldName)
         if (!!fieldRef && !!fieldRef.getValue) {
-          fieldRef.getValue()
+          return fieldRef.getValue()
+        }
+
+        if (!fieldRef) { //如果是子表单字段
+          let result = []
+          this.findWidgetNameInSubForm(fieldName).forEach(wn => {
+            let sw = this.getWidgetRef(wn)
+            if (!!sw && !!sw.getValue) {
+              result.push( sw.getValue() )
+            }
+          })
+
+          return result
         }
       },
 
@@ -432,16 +496,26 @@
         if (!!fieldRef && !!fieldRef.setValue) {
           fieldRef.setValue(fieldValue)
         }
+
+        if (!fieldRef) { //如果是子表单字段
+          this.findWidgetNameInSubForm(fieldName).forEach(wn => {
+            let sw = this.getWidgetRef(wn)
+            if (!!sw && !!sw.setValue) {
+              sw.setValue(fieldValue)
+            }
+          })
+        }
       },
 
       getSubFormValues(subFormName, needValidation = true) {
         let foundSFRef = this.subFormRefList[subFormName]
-        // if (!foundSFRef) {
-        //   return this.formDataModel[subFormName]
-        // }
         return foundSFRef.getSubFormValues(needValidation)
       },
 
+      setSubFormValues(subFormName, subFormValues) {
+        //TODO: 待实现！！
+      },
+
       disableForm() {
         let wNameList = Object.keys(this.widgetRefList)
         wNameList.forEach(wName => {
diff --git a/src/lang/en-US.js b/src/lang/en-US.js
index 31fb5f6..38d2d87 100644
--- a/src/lang/en-US.js
+++ b/src/lang/en-US.js
@@ -316,6 +316,31 @@ export default {
       formRefName: 'Ref Name',
       formRulesName: 'Rules Name',
 
+      //data-table
+      tableWidth: 'Width(px/%)',
+      tableHeight: 'Height(px/%)',
+      showCheckBox: 'Show CheckBox',
+      showIndex: 'Show Row Number',
+      showPagination: 'Show Pagination',
+      smallPagination: 'Small Pagination',
+      tableColEdit: 'Edit Cols',
+      tableDataEdit: 'Edit Data',
+      stripe: 'Stripe',
+      showSummary: 'Show Summary',
+      rowSpacing: 'Row Spacing(px)',
+      editAction: 'Edit...',
+      columnName: 'Name',
+      columnLabel: 'Label',
+      columnWidth: 'Width(px/%)',
+      visibleColumn: 'Visible',
+      sortableColumn: 'Sortable',
+      fixedColumn: 'Fixed',
+      alignTypeOfColumn: 'Align',
+      formatOfColumn: 'Format',
+      actionColumn: 'Action',
+      addTableColumn: 'Add New Column',
+      deleteTableColumn: 'Delete This Column',
+      OnlyOneColumnCannotBeDeleted: 'The last column cannot be deleted.',
     }
 
   }
diff --git a/src/lang/zh-CN.js b/src/lang/zh-CN.js
index 2f38541..533fd6e 100644
--- a/src/lang/zh-CN.js
+++ b/src/lang/zh-CN.js
@@ -316,6 +316,31 @@ export default {
       formRefName: '引用名称',
       formRulesName: '验证规则名称',
 
+      //data-table
+      tableWidth: '宽度(px/%)',
+      tableHeight: '高度(px/%)',
+      showCheckBox: '是否显示复选框列',
+      showIndex: '是否显示行号',
+      showPagination: '是否显示分页',
+      smallPagination: '小型分页',
+      tableColEdit: '表格列编辑',
+      tableDataEdit: '表格数据编辑',
+      showSummary: '是否合计',
+      stripe: '是否斑马线',
+      rowSpacing: '行距（px）',
+      editAction: '编辑...',
+      columnName: '字段名称',
+      columnLabel: '显示名称',
+      columnWidth: '列宽(px/%)',
+      visibleColumn: '是否显示',
+      sortableColumn: '是否排序',
+      fixedColumn: '是否固定',
+      alignTypeOfColumn: '对齐方式',
+      formatOfColumn: '格式化',
+      actionColumn: '操作',
+      addTableColumn: '增加列',
+      deleteTableColumn: '删除列',
+      OnlyOneColumnCannotBeDeleted: '表格只有一列时不可删除.',
     }
 
   }
diff --git a/src/utils/config.js b/src/utils/config.js
index 6fc0b89..26fc529 100644
--- a/src/utils/config.js
+++ b/src/utils/config.js
@@ -8,7 +8,7 @@ export const DESIGNER_OPTIONS = {
 
 }
 
-export const VARIANT_FORM_VERSION = '2.1.9'
+export const VARIANT_FORM_VERSION = '2.2.0'
 
 //export const MOCK_CASE_URL = 'https://www.fastmock.site/mock/2de212e0dc4b8e0885fea44ab9f2e1d0/vform/'
 export const MOCK_CASE_URL = 'https://ks3-cn-beijing.ksyuncs.com/vform-static/vcase/'
diff --git a/src/utils/format.js b/src/utils/format.js
new file mode 100644
index 0000000..9698368
--- /dev/null
+++ b/src/utils/format.js
@@ -0,0 +1,214 @@
+
+export function formatDate1(date) {
+	if (new Date(Date.parse(date.replace(/-/g, "/"))) === "Invalid Date") {
+		return date;
+	}
+	date = new Date(Date.parse(date.replace(/-/g, "/"))); //转换成Date
+	let y = date.getFullYear();
+	let m = date.getMonth() + 1;
+	m = m < 10 ? '0' + m : m;
+	let d = date.getDate();
+	d = d < 10 ? ('0' + d) : d;
+	return y + '-' + m + '-' + d;
+}
+
+export function formatDate2(date) {
+	if (new Date(Date.parse(date.replace(/-/g, "/"))) === "Invalid Date") {
+		return date;
+	}
+	date = new Date(Date.parse(date.replace(/-/g, "/"))); //转换成Date
+	let y = date.getFullYear();
+	let m = date.getMonth() + 1;
+	m = m < 10 ? '0' + m : m;
+	let d = date.getDate();
+	d = d < 10 ? ('0' + d) : d;
+	return y + '/' + m + '/' + d;
+}
+
+export function formatDate3(date) {
+	if (new Date(Date.parse(date.replace(/-/g, "/"))) === "Invalid Date") {
+		return date;
+	}
+	date = new Date(Date.parse(date.replace(/-/g, "/"))); //转换成Date
+	let y = date.getFullYear();
+	let m = date.getMonth() + 1;
+	m = m < 10 ? '0' + m : m;
+	let d = date.getDate();
+	d = d < 10 ? ('0' + d) : d;
+	return y + '年' + m + '月' + d +'日';
+}
+
+export function formatDate4(date) {
+	if (new Date(Date.parse(date.replace(/-/g, "/"))) === "Invalid Date"){
+		return date;
+	}
+	date = new Date(Date.parse(date.replace(/-/g, "/"))); //转换成Date
+	return date.toLocaleString()
+}
+
+export function formatDate5(date) {
+	if (new Date(Date.parse(date.replace(/-/g, "/"))) === "Invalid Date") {
+		return date;
+	}
+	date = new Date(Date.parse(date.replace(/-/g, "/"))); //转换成Data();
+	return date.toLocaleString('chinese', { hour12: false })
+}
+
+// ###,###,###,##0.######
+export function formatNumber1(v) {
+	if (typeof(v) != "number") {
+		return v;
+	}
+
+	let length = v.toString().split(".")[1].length;
+	switch(length){
+		case 0:
+				v = v.toFixed(0)
+				break;
+		case 1:
+				v = v.toFixed(1)
+				break;
+		case 2:
+				v = v.toFixed(2)
+				break;
+		case 3:
+				v = v.toFixed(3)
+				break;
+		case 4:
+				v = v.toFixed(4)
+				break;
+		case 5:
+				v = v.toFixed(5)
+				break;
+		default:
+				v = v.toFixed(6)
+	}
+	let res = v.toString().replace(/\d+/, function(n){ // 先提取整数部分
+		return n.replace(/(\d)(?=(\d{3})+$)/g,function($1){
+			return $1+",";
+			});
+		})
+	return res;
+}
+
+//###,###,###,##0.00####
+export function formatNumber2(v) {
+	if (typeof(v) != "number") {
+		return v;
+	}
+
+	let length = v.toString().split(".")[1].length;
+	switch(length){
+		case 0:
+		case 1:
+		case 2:
+				v = v.toFixed(2)
+				break;
+		case 3:
+				v = v.toFixed(3)
+				break;
+		case 4:
+				v = v.toFixed(4)
+				break;
+		case 5:
+				v = v.toFixed(5)
+				break;
+		default:
+				v = v.toFixed(6)
+	}
+
+	let res = v.toString().replace(/\d+/, function(n){ // 先提取整数部分
+		return n.replace(/(\d)(?=(\d{3})+$)/g,function($1){
+			return $1+",";
+			});
+		})
+	return res;
+}
+
+// ###,###,###,##0.000000
+export function formatNumber3(v) {
+	if (typeof(v) != "number") {
+		return v;
+	}
+
+	v = v.toFixed(6)
+	let res = v.toString().replace(/\d+/, function(n){ // 先提取整数部分
+		return n.replace(/(\d)(?=(\d{3})+$)/g,function($1){
+			return $1+",";
+			});
+		})
+	return res;
+}
+// ###,###,###,##0.000
+export function formatNumber4(v) {
+	if (typeof(v) != "number") {
+		return v;
+	}
+
+	v = v.toFixed(3)
+	let res = v.toString().replace(/\d+/, function(n){ // 先提取整数部分
+		return n.replace(/(\d)(?=(\d{3})+$)/g,function($1){
+			return $1+",";
+			});
+		})
+	return res;
+}
+
+// ###,###,###,##0.00
+export function formatNumber5(v) {
+	if (typeof(v) != "number") {
+		return v;
+	}
+
+	v = v.toFixed(2)
+	let res = v.toString().replace(/\d+/, function(n){ // 先提取整数部分
+		return n.replace(/(\d)(?=(\d{3})+$)/g,function($1){
+			return $1+",";
+			});
+		})
+	return res;
+}
+
+// ###,###,###,##0
+export function formatNumber6(v) {
+	if (typeof(v) != "number") {
+		return v;
+	}
+
+	v = v.toFixed(0)
+	let res = v.toString().replace(/\d+/, function(n){ // 先提取整数部分
+		return n.replace(/(\d)(?=(\d{3})+$)/g,function($1){
+			return $1+",";
+			});
+		})
+	return res;
+}
+
+// ###,##0.00##%
+export function formatNumber7(v) {
+	if (typeof(v) != "number") {
+		return v;
+	}
+
+	let length = v.toString().split(".")[1].length;
+	v = v*100
+	switch(length){
+		case 0:
+		case 1:
+		case 2:
+				v = v.toFixed(2)
+				break;
+		case 3:
+				v = v.toFixed(3)
+				break;
+		default:
+				v = v.toFixed(4)
+	}
+
+	let res = v.toString().replace(/\d+/, function(n){ // 先提取整数部分
+		return n.replace(/(\d)(?=(\d{3})+$)/g,function($1){
+			return $1+",";
+			});
+		})
+	return res+'%';
+}
diff --git a/src/utils/util.js b/src/utils/util.js
index d734076..bd993fa 100644
--- a/src/utils/util.js
+++ b/src/utils/util.js
@@ -118,28 +118,28 @@ export const loadRemoteScript = function(srcPath, callback) {  /*加载远程js
   }
 }
 
-export function traverseFieldWidgets(widgetList, handler) {
+export function traverseFieldWidgets(widgetList, handler, parent = null) {
   widgetList.forEach(w => {
     if (w.formItemFlag) {
-      handler(w)
+      handler(w, parent)
     } else if (w.type === 'grid') {
       w.cols.forEach(col => {
-        traverseFieldWidgets(col.widgetList, handler)
+        traverseFieldWidgets(col.widgetList, handler, w)
       })
     } else if (w.type === 'table') {
       w.rows.forEach(row => {
         row.cols.forEach(cell => {
-          traverseFieldWidgets(cell.widgetList, handler)
+          traverseFieldWidgets(cell.widgetList, handler, w)
         })
       })
     } else if (w.type === 'tab') {
       w.tabs.forEach(tab => {
-        traverseFieldWidgets(tab.widgetList, handler)
+        traverseFieldWidgets(tab.widgetList, handler, w)
       })
     } else if (w.type === 'sub-form') {
-      traverseFieldWidgets(w.widgetList, handler)
+      traverseFieldWidgets(w.widgetList, handler, w)
     } else if (w.category === 'container') {  //自定义容器
-      traverseFieldWidgets(w.widgetList, handler)
+      traverseFieldWidgets(w.widgetList, handler, w)
     }
   })
 }