From 8f51560a14ecda5114f8926f9cafa0aefac8763a Mon Sep 17 00:00:00 2001
From: BoBoooooo <17746714@qq.com>
Date: Mon, 19 Oct 2020 15:22:31 +0800
Subject: [PATCH] =?UTF-8?q?perf:=20=E5=90=8C=E6=AD=A5=E6=9C=AC=E5=9C=B0?=
 =?UTF-8?q?=E6=9C=80=E6=96=B0=E4=BB=A3=E7=A0=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .eslintrc.js                                  |    1 +
 examples/App.vue                              |   11 +-
 examples/{main.js => main.ts}                 |    0
 package.json                                  |   60 +-
 .../{test/index.js => CrudTable/index.ts}     |    8 +-
 packages/CrudTable/src/CrudTable.vue          | 1042 +++++++++++++++++
 packages/CrudTable/src/GenerateFormDialog.vue |  286 +++++
 packages/CrudTable/src/SearchForm.vue         |  231 ++++
 packages/CrudTable/src/SeniorSearchForm.vue   |  200 ++++
 packages/FormDesigner/{index.js => index.ts}  |    0
 packages/FormDesigner/src/CusDialog.vue       |  151 +++
 .../FormDesigner => }/FormConfig.vue          |   48 +-
 packages/FormDesigner/src/FormDesigner.vue    |  551 ++++++---
 packages/FormDesigner/src/GenerateForm.vue    |  381 ++++++
 .../FormDesigner => }/GenerateFormItem.vue    |  547 ++++++---
 .../FormDesigner => }/WidgetConfig.vue        |  111 +-
 .../FormDesigner => }/WidgetForm.vue          |   10 +-
 .../FormDesigner => }/WidgetFormItem.vue      |   29 +-
 .../src/components/FileUpload/FileUpload.vue  |  360 ++++++
 .../src/components/FormDesigner/CusDialog.vue |  132 ---
 .../components/FormDesigner/GenerateForm.vue  |  354 ------
 .../components/FormDesigner/generateCode.js   |  107 --
 .../Tinymce/components/editorImage.vue        |  115 ++
 .../src/components/Tinymce/index.vue          |  222 ++++
 .../src/components/Tinymce/plugins.js         |    8 +
 .../src/components/Tinymce/toolbar.js         |    7 +
 ...omponentsConfig.js => componentsConfig.ts} |   44 +-
 .../src/{element.js => element.ts}            |    0
 .../FormDesigner => }/form_empty.png          |  Bin
 packages/FormDesigner/src/logo.png            |  Bin 0 -> 6839 bytes
 .../FormDesigner => }/styles/cover.scss       |    3 -
 .../FormDesigner => }/styles/index.scss       |   21 +-
 .../FormDesigner => }/styles/table-form.scss  |    8 +-
 packages/FormDesigner/src/utils/download.ts   |   48 +
 packages/api/axios.ts                         |   92 ++
 packages/api/public/crud.ts                   |   67 ++
 packages/api/system/form.ts                   |   53 +
 packages/{index.js => index.ts}               |    6 +-
 packages/shims-vue-expand.d.ts                |   27 +
 packages/shims-vue.d.ts                       |   13 +
 packages/test/src/test.vue                    |   22 -
 packages/utils/confirm.ts                     |   46 +
 packages/utils/generator.ts                   |   16 +
 tsconfig.json                                 |   41 +
 vue.config.js                                 |   10 +-
 45 files changed, 4359 insertions(+), 1130 deletions(-)
 rename examples/{main.js => main.ts} (100%)
 rename packages/{test/index.js => CrudTable/index.ts} (64%)
 create mode 100644 packages/CrudTable/src/CrudTable.vue
 create mode 100644 packages/CrudTable/src/GenerateFormDialog.vue
 create mode 100644 packages/CrudTable/src/SearchForm.vue
 create mode 100644 packages/CrudTable/src/SeniorSearchForm.vue
 rename packages/FormDesigner/{index.js => index.ts} (100%)
 create mode 100644 packages/FormDesigner/src/CusDialog.vue
 rename packages/FormDesigner/src/{components/FormDesigner => }/FormConfig.vue (52%)
 create mode 100644 packages/FormDesigner/src/GenerateForm.vue
 rename packages/FormDesigner/src/{components/FormDesigner => }/GenerateFormItem.vue (55%)
 rename packages/FormDesigner/src/{components/FormDesigner => }/WidgetConfig.vue (88%)
 rename packages/FormDesigner/src/{components/FormDesigner => }/WidgetForm.vue (95%)
 rename packages/FormDesigner/src/{components/FormDesigner => }/WidgetFormItem.vue (90%)
 create mode 100644 packages/FormDesigner/src/components/FileUpload/FileUpload.vue
 delete mode 100644 packages/FormDesigner/src/components/FormDesigner/CusDialog.vue
 delete mode 100644 packages/FormDesigner/src/components/FormDesigner/GenerateForm.vue
 delete mode 100644 packages/FormDesigner/src/components/FormDesigner/generateCode.js
 create mode 100644 packages/FormDesigner/src/components/Tinymce/components/editorImage.vue
 create mode 100644 packages/FormDesigner/src/components/Tinymce/index.vue
 create mode 100644 packages/FormDesigner/src/components/Tinymce/plugins.js
 create mode 100644 packages/FormDesigner/src/components/Tinymce/toolbar.js
 rename packages/FormDesigner/src/{components/FormDesigner/componentsConfig.js => componentsConfig.ts} (96%)
 rename packages/FormDesigner/src/{element.js => element.ts} (100%)
 rename packages/FormDesigner/src/{components/FormDesigner => }/form_empty.png (100%)
 create mode 100644 packages/FormDesigner/src/logo.png
 rename packages/FormDesigner/src/{components/FormDesigner => }/styles/cover.scss (81%)
 rename packages/FormDesigner/src/{components/FormDesigner => }/styles/index.scss (98%)
 rename packages/FormDesigner/src/{components/FormDesigner => }/styles/table-form.scss (92%)
 create mode 100644 packages/FormDesigner/src/utils/download.ts
 create mode 100644 packages/api/axios.ts
 create mode 100644 packages/api/public/crud.ts
 create mode 100644 packages/api/system/form.ts
 rename packages/{index.js => index.ts} (89%)
 create mode 100644 packages/shims-vue-expand.d.ts
 create mode 100644 packages/shims-vue.d.ts
 delete mode 100644 packages/test/src/test.vue
 create mode 100755 packages/utils/confirm.ts
 create mode 100644 packages/utils/generator.ts
 create mode 100644 tsconfig.json

diff --git a/.eslintrc.js b/.eslintrc.js
index 89c335b..394bd75 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -12,6 +12,7 @@ module.exports = {
   extends: [
     'plugin:vue/essential',
     '@vue/airbnb',
+    '@vue/typescript',
   ],
   // 修改airbnb部分变态规则
   rules: {
diff --git a/examples/App.vue b/examples/App.vue
index 1a4a942..d249b09 100644
--- a/examples/App.vue
+++ b/examples/App.vue
@@ -1,23 +1,26 @@
 <template>
   <div id="app">
-   <FormDesigner></FormDesigner>
+    <FormDesigner></FormDesigner>
   </div>
 </template>
 
 <script>
-
 export default {
   name: 'app',
-
 };
 </script>
 
 <style>
+html,
+body {
+  height: 100%;
+}
 #app {
-  font-family: 'Avenir', Helvetica, Arial, sans-serif;
+  font-family: "Avenir", Helvetica, Arial, sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   text-align: center;
   color: #2c3e50;
+  height: 100%;
 }
 </style>
diff --git a/examples/main.js b/examples/main.ts
similarity index 100%
rename from examples/main.js
rename to examples/main.ts
diff --git a/package.json b/package.json
index 0245728..3efced4 100644
--- a/package.json
+++ b/package.json
@@ -15,15 +15,11 @@
   },
   "dependencies": {
     "@riophae/vue-treeselect": "^0.3.0",
-    "axios": "^0.19.0",
-    "clipboard": "^2.0.4",
+    "axios": "^0.19.2",
     "compressing": "^1.4.0",
-    "core-js": "2.6.5",
+    "core-js": "3.6.5",
     "dayjs": "1.8.20",
-    "driver.js": "0.9.5",
-    "echarts": "4.6.0",
-    "element-ui": "2.12.0",
-    "gojs": "2.0.4",
+    "element-ui": "^2.13.2",
     "inquirer": "^6.5.2",
     "jsoneditor": "8.5.3",
     "lodash": "^4.17.14",
@@ -31,30 +27,19 @@
     "pinyin-match": "^1.0.9",
     "svg-sprite-loader": "^4.1.6",
     "v-contextmenu": "^2.8.1",
-    "vue": "2.6.10",
+    "vue": "2.6.11",
     "vue-awesome": "^3.5.4",
-    "vue-router": "^3.0.7",
-    "vue-runtime-helpers": "^1.1.2",
-    "vue-waterfall2": "^1.9.6",
-    "vuedraggable": "^2.23.0",
-    "vuex": "^3.1.1",
-    "vuex-persistedstate": "^2.5.4"
+    "vue-router": "3.4.3",
+    "vuedraggable": "^2.23.2",
+    "vuex": "3.5.1",
+    "vuex-persistedstate": "3.1.0"
   },
   "devDependencies": {
-    "@vue/cli-plugin-babel": "^3.9.2",
-    "@vue/cli-plugin-eslint": "^3.9.2",
-    "@vue/cli-plugin-unit-mocha": "^3.9.0",
-    "@vue/cli-service": "^3.9.2",
-    "@vue/eslint-config-airbnb": "^4.0.1",
-    "@vue/test-utils": "^1.0.0-beta.20",
     "babel-eslint": "^10.0.2",
     "chai": "^4.2.0",
     "husky": "^3.0.9",
-    "commitizen": "^4.0.3",
-    "commitlint": "^8.2.0",
-    "conventional-changelog-cli": "^2.0.28",
-    "compression-webpack-plugin": "^3.0.1",
-    "electron": "^5.0.6",
+    "vue-class-component": "^7.2.3",
+    "vue-property-decorator": "^8.5.0",
     "eslint": "^6.0.1",
     "eslint-plugin-import": "^2.18.0",
     "eslint-plugin-vue": "^5.2.3",
@@ -64,12 +49,31 @@
     "node-sass": "^4.12.0",
     "sass-loader": "^7.1.0",
     "vue-cli-plugin-axios": "0.0.4",
-    "vue-cli-plugin-electron-builder": "^1.3.5",
     "vue-cli-plugin-element": "^1.0.1",
-    "vue-template-compiler": "2.6.10",
+    "vue-template-compiler": "2.6.11",
     "webpack": "^4.35.3",
+    "typescript": "~3.8.3",
     "webpack-bundle-analyzer": "^3.3.2",
-    "svgo-loader": "2.2.1"
+    "@vue/cli-plugin-babel": "4.5.4",
+    "@vue/cli-plugin-eslint": "4.5.4",
+    "@vue/cli-plugin-typescript": "4.5.4",
+    "@vue/cli-plugin-unit-mocha": "4.5.4",
+    "@vue/cli-service": "^3.9.2",
+    "@vue/eslint-config-airbnb": "^4.0.1",
+    "@vue/eslint-config-typescript": "^5.0.2",
+    "@typescript-eslint/eslint-plugin": "^2.26.0",
+    "@typescript-eslint/parser": "^2.26.0"
+  },
+  "husky": {
+    "hooks": {
+      "pre-commit": "lint-staged"
+    }
+  },
+  "lint-staged": {
+    "src/**/*.{js,vue,ts}": [
+      "npm run lint",
+      "git add"
+    ]
   },
   "postcss": {
     "plugins": {
diff --git a/packages/test/index.js b/packages/CrudTable/index.ts
similarity index 64%
rename from packages/test/index.js
rename to packages/CrudTable/index.ts
index c3ee0a7..d7252e8 100644
--- a/packages/test/index.js
+++ b/packages/CrudTable/index.ts
@@ -6,12 +6,12 @@
  */
 
 // 导入组件，组件必须声明 name
-import Test from './src/test.vue';
+import CrudTable from './src/CrudTable.vue';
 
 // 为组件添加 install 方法，用于按需引入
 // eslint-disable-next-line func-names
-Test.install = function (Vue) {
-  Vue.component(Test.name, Test);
+CrudTable.install = function (Vue) {
+  Vue.component(CrudTable.name, CrudTable);
 };
 
-export default Test;
+export default CrudTable;
diff --git a/packages/CrudTable/src/CrudTable.vue b/packages/CrudTable/src/CrudTable.vue
new file mode 100644
index 0000000..fe670e3
--- /dev/null
+++ b/packages/CrudTable/src/CrudTable.vue
@@ -0,0 +1,1042 @@
+<!--
+ * @file: el-table CrudTable封装,支持高级查询 分页 增删改查表单
+ * @copyright: NanJing Anshare Tech .Com
+ * @author: BoBo
+ * @Date: 2020年09月14 18:01:58
+-->
+
+<template>
+  <div class="CrudTable">
+    <div class="base-table">
+      <!-- 表格左侧标题 -->
+      <div class="table-title"
+           v-if="view.tableTitle && tableTitle">
+        <!-- 表格标题 -->
+        <h4>{{tableTitle}}</h4>
+      </div>
+      <!-- table右上角按钮 -->
+      <div class="btn-bar">
+        <slot name="btnBarPrevBtn" />
+        <!-- 批量删除按钮 -->
+        <el-button v-if="view.btnDel"
+                   @click="btnDeletesOnClick"
+                   type="primary"
+                   size="mini"
+                   icon="el-icon-delete">删除</el-button>
+        <!-- 添加按钮 -->
+        <el-button v-if="view.btnAdd"
+                   type="primary"
+                   icon="el-icon-plus"
+                   size="mini"
+                   @click.stop="btnAdd()">{{text.add}}</el-button>
+      </div>
+
+      <SearchForm ref="searchForm"
+                  v-if="view.searchForm"
+                  :columns="tableConfig.columns"
+                  @click="fetchHandler(false,true)"
+                  :searchFormCondition.sync="searchFormCondition"
+                  :remoteFuncs="remoteFuncs"
+                  :isLoading="loading"
+                  @clear="dataChangeHandler(true)">
+      </SearchForm>
+      <!-- 表格主体 -->
+      <el-table v-loading.lock="loading"
+                element-loading-text="加载中……"
+                ref="table"
+                :header-cell-style="{ background: '#f2f2f2', color: '#737373' }"
+                :data="tableData"
+                :border="border"
+                :size="size"
+                :stripe="stripe"
+                :height="tableHeight"
+                :max-height="maxHeight"
+                :fit="fit"
+                :show-header="showHeader"
+                :highlight-current-row="highlightCurrentRow"
+                :current-row-key="currentRowKey"
+                :row-class-name="rowClassName"
+                :row-style="rowStyle"
+                :cell-style="cellStyle"
+                :empty-text="emptyText"
+                :default-expand-all="defaultExpandAll"
+                :expand-row-keys="expandRowKeys"
+                :default-sort="defaultSort"
+                :tooltip-effect="tooltipEffect"
+                :show-summary="showSummary"
+                :sum-text="sumText"
+                :row-key="(row)=> row.id"
+                :summary-method="summaryMethod"
+                rowKey="id"
+                :lazy="lazy"
+                :load="treeload"
+                :tree-props="{children: 'children', hasChildren: 'flag'}"
+                :style="tableStyle"
+                @select="(selection, row) => emitTableEvent('select', selection, row)"
+                @select-all="(selection) => emitTableEvent('select-all', selection)"
+                @selection-change="(selection) => handleSelectionChange(selection)"
+                @cell-mouse-enter="(row, column, cell, event) => emitTableEvent('cell-mouse-enter', row, column, cell, event)"
+                @cell-mouse-leave="(row, column, cell, event) => emitTableEvent('cell-mouse-leave', row, column, cell, event)"
+                @cell-click="(row, column, cell, event) => emitTableEvent('cell-click', row, column, cell, event)"
+                @cell-dblclick="(row, column, cell, event) => emitTableEvent('cell-dblclick', row, column, cell, event)"
+                @row-click="(row, event, column) => emitTableEvent('row-click', row, event, column)"
+                @row-dblclick="(row, event) => emitTableEvent('row-dblclick', row, event)"
+                @row-contextmenu="(row, event) => emitTableEvent('row-contextmenu', row, event)"
+                @header-click="(column, event) => emitTableEvent('header-click', column, event)"
+                @sort-change="(args) => sortChange(args)"
+                @filter-change="(filters) => emitTableEvent('filter-change', filters)"
+                @current-change="(currentRow, oldCurrentRow) => emitTableEvent('current-change', currentRow, oldCurrentRow)"
+                @header-dragend="(newWidth, oldWidth, column, event) => emitTableEvent('header-dragend', newWidth, oldWidth, column, event)"
+                @expand-change="(row, expanded) => emitTableEvent('expand-change', row, expanded)">
+        <template slot='empty'>
+          <svgIcon icon-class='table_empty'
+                   class="empty_icon"></svgIcon>
+          <span>暂无数据</span>
+        </template>
+        <el-table-column v-if="isMultiple || view.btnDel"
+                         type="selection"
+                         reserve-selection
+                         align="center"
+                         header-align="center"
+                         width="55"
+                         :selectable="selectableFunc"> </el-table-column>
+        <el-table-column v-if="showColumnIndex"
+                         type="index"
+                         align="center"
+                         label="#"
+                         header-align="center"
+                         width="50"> </el-table-column>
+        <el-table-column v-for="(column, columnIndex) in tableConfig.columns"
+                         :key="columnIndex"
+                         :column-key="column.columnKey"
+                         :prop="column.prop"
+                         :label="column.label"
+                         :width="column.minWidth ? '-' : column.width || 140"
+                         :min-width="column.minWidth || column.width || 140"
+                         :fixed="column.fixed"
+                         :render-header="column.renderHeader"
+                         :sortable="column.sortable == 'false' ? false : column.sortable"
+                         :sort-by="column.sortBy"
+                         :sort-method="column.method"
+                         :resizable="column.resizable"
+                         :formatter="column.formatter"
+                         :show-overflow-tooltip="column.showOverflowTooltip"
+                         :align="column.align"
+                         :header-align="column.headerAlign || column.align"
+                         :class-name="column.className"
+                         :label-class-name="column.labelClassName"
+                         :selectable="column.selectable"
+                         :reserve-selection="column.reserveSelection"
+                         :filters="column.filters"
+                         :filter-placement="column.filterPlacement"
+                         :filter-multiple="column.filterMultiple"
+                         :filter-method="column.filterMethod"
+                         :filtered-value="column.filteredValue">
+          <!-- 此处暂时只考虑操作列表头的处理 -->
+          <template slot="header"
+                    v-if="view.btnAddOnColumnHeader && column.slotName === 'actionColumn'">
+            <!-- 添加按钮 -->
+            <el-button icon="el-icon-plus"
+                       size="mini"
+                       type="primary"
+                       style="color:white"
+                       @click.stop="btnAdd()"></el-button>
+          </template>
+
+          <template slot-scope="scope">
+            <span v-if="column.slotName === 'actionColumn'">
+              <!-- 自定义按钮 -->
+              <slot name="btnCustom"
+                    :row="scope.row" />
+              <!-- 操作列-添加按钮 -->
+              <el-button v-if="view.actionColumnBtnAdd"
+                         icon="el-icon-plus"
+                         type="primary"
+                         size="mini"
+                         @click.stop="actionColumnAdd(scope.row)">{{text.add}}</el-button>
+              <!-- 操作列-编辑按钮 -->
+              <template v-if="actionColumnBtnEditVisible(scope.row)">
+                <!-- 正常编辑按钮 -->
+                <el-button type="success"
+                           size="mini"
+                           @click.stop="actionColumnEdit(scope.row)">{{text.edit}}</el-button>
+              </template>
+              <!-- 查看按钮 -->
+              <el-button v-if="actionColumnBtnDetailVisible(scope.row)"
+                         type="primary"
+                         size="mini"
+                         @click.stop="actionColumnDetail(scope.row)">{{text.detail}}</el-button>
+
+              <!-- 操作列-删除按钮，支持传入btnDelVisibleFunc()用于判断按钮显示状态 -->
+              <el-button v-if="actionColumnBtnDelVisible(scope.row)"
+                         type="danger"
+                         size="mini"
+                         @click.stop="actionColumnDel(scope.row)">{{text.del}}</el-button>
+            </span>
+            <span v-else-if="column.slotName  && column.slotName !== 'actionColumn'">
+              <slot :name="column.slotName"
+                    :row="scope.row"
+                    :prop="column.prop"
+                    :$index="scope.$index" />
+            </span>
+            <span v-else>
+              {{ scope.row[column.prop] }}
+            </span>
+          </template>
+        </el-table-column>
+      </el-table>
+      <!-- 分页 -->
+      <div style="overflow:hidden;background:white"
+           class="mt-8">
+        <!-- 表格底部左侧功能按钮 -->
+        <div style="float:left">
+          <slot name="bottom-btn"></slot>
+        </div>
+        <el-pagination v-if="showPagination"
+                       :current-page="pagination.pageIndex"
+                       :page-sizes="pageSizes"
+                       :page-size="pagination.pageSize"
+                       :layout="paginationLayout"
+                       :pager-count="pagerCount"
+                       :small="pagerSmall"
+                       :total="total"
+                       @size-change="handleSizeChange"
+                       @current-change="handleCurrentChange"
+                       style="float:right" />
+      </div>
+    </div>
+    <!-- 新增、编辑、查看按钮 弹出 表单-->
+    <GenerateFormDialog ref="dialog"
+                        :tableName="tableName"
+                        :dialogFormDesignerName="dialogFormDesignerName"
+                        :tableParams="tableParams"
+                        @afterSave="tableReload"
+                        @change="formChange"
+                        :remoteFuncs="remoteFuncs"
+                        :visibleList="view"
+                        :setReadOnly="setReadOnly"
+                        :append-to-body="dialogAppendToBody"
+                        :close_on_click_modal="dialogCloseOnClickModal"
+                        :fullscreen="dialogFullscreen"
+                        @btnOnClick="formBtnOnClick">
+    </GenerateFormDialog>
+  </div>
+</template>
+
+<script lang="ts">
+import {
+  Component, Vue, Emit, Prop,
+} from 'vue-property-decorator';
+import { DML, crud } from '../../api/public/crud';
+import { getTableDetail, getFormDetail } from '../../api/system/form';
+import GenerateFormDialog from './GenerateFormDialog.vue';
+import { confirm } from '../../utils/confirm';
+import SearchForm from './SearchForm.vue';
+
+const STATUS = {
+  CREATE: 0,
+  UPDATE: 1,
+  DETAIL: 2,
+};
+@Component({
+  name: 'CrudTable',
+  components: {
+    GenerateFormDialog,
+    SearchForm,
+  },
+})
+export default class CrudTable extends Vue {
+  // https://github.com/vuejs/vue-class-component/issues/94
+  $refs!: {
+    table: HTMLFormElement;
+    dialog: HTMLFormElement;
+    searchForm: HTMLFormElement;
+  };
+
+  // 当前点击行
+  currentRow: any = {};
+
+  // 结果总数
+  total = 0;
+
+  // 是否在加载
+  loading = false;
+
+  // 排序参数
+  sortParams = {
+    orderCondition: '',
+  };
+
+  // 最大页码按钮数
+  pagerCount = 7;
+
+  // 是否显示小型分页
+  pagerSmall = false;
+
+  // 高级查询Condition
+  searchFormCondition = [];
+
+  // 表格最大高度
+  maxHeight: string | number = '100%';
+
+  // 表格高度
+  tableHeight: number | string = '100%';
+
+  // 表格结构json，将来可能有多张表
+  tableConfig = { columns: [] };
+
+  // 多选行选中项
+  selectedRows: any = [];
+
+  // 表格数据
+  tableData = [];
+
+  // listField
+  @Prop({
+    type: String,
+    default: 'data.list',
+  })
+  listField!: string;
+
+  // 设置只读
+  @Prop({ default: null, type: Object }) setReadOnly!: any;
+
+  // 添加对话框预填项
+  @Prop({ default: null, type: Object }) prefill!: any;
+
+  // 弹出表单appendToBody
+  @Prop({ default: false, type: Boolean }) dialogAppendToBody!: boolean;
+
+  // 用于请求表格设计json的name
+  @Prop({
+    type: String,
+    default: null,
+  })
+  tableDesignerName!: string;
+
+  // 对话框内加载FormDesigner的表名
+  @Prop({
+    type: String,
+    default: null,
+  })
+  dialogFormDesignerName!: string;
+
+  // 内部元素显示控制
+  @Prop({ default: () => ({}), type: Object }) visibleList!: any;
+
+  // 表名
+  @Prop({
+    type: String,
+    default: '',
+  })
+  tableName!: string;
+
+  // 表格标题
+  @Prop({
+    type: String,
+    default: '',
+  })
+  tableTitle!: string;
+
+  // 按钮名字
+  @Prop({ default: () => ({}), type: Object }) textMap!: any;
+
+  // 表格行中的添加按钮点击事件
+  @Prop({ default: null, type: Function }) promiseForDel!: any;
+
+  // 表格行中的添加按钮点击事件
+  @Prop({ default: null, type: Function }) promiseForSelect!: any;
+
+  // 表格行中的添加按钮点击事件
+  @Prop({ default: null, type: Function }) btnDelVisibleFunc!: any;
+
+  // 表格行中的添加按钮点击事件
+  @Prop({ default: null, type: Function }) btnEditVisibleFunc!: any;
+
+  // 表格行中的添加按钮点击事件
+  @Prop({ default: null, type: Function }) btnDetailVisibleFunc!: any;
+
+  // 表格行中的添加按钮点击事件
+  @Prop({ default: null, type: Function }) btnAddOnClick!: any;
+
+  // 表格行中的添加按钮点击事件
+  @Prop({ default: null, type: Function }) btnEditOnClick!: any;
+
+  // 表格行中的添加按钮点击事件
+  @Prop({ default: null, type: Function }) btnDetailOnClick!: any;
+
+  // 表格行中的添加按钮点击事件
+  @Prop({ default: null, type: Function }) btnRowAddOnClick!: any;
+
+  // 是否显示分页
+  @Prop({ default: true, type: Boolean }) showPagination!: boolean;
+
+  // 远程数据方法
+  @Prop({ default: () => ({}), type: Object }) remoteFuncs!: any;
+
+  // 页码大小
+  @Prop({ default: () => [20, 50, 100] }) pageSizes!: number[];
+
+  // 分页显示
+  @Prop({
+    type: String,
+    default: 'total, prev, pager, next, jumper, sizes',
+  })
+  paginationLayout!: string;
+
+  // 是否自适应屏幕高度
+  @Prop({ type: Boolean, default: false }) fullHeight!: boolean;
+
+  // 高度minus
+  @Prop({ type: Number, default: 270 }) maxHeightMinus!: number;
+
+  // el-table height
+  @Prop(Number) height!: number;
+
+  // 点击阴影弹框是否可以关闭
+  @Prop({ default: true, type: Boolean }) dialogCloseOnClickModal!: boolean;
+
+  // 表单是否全屏
+  @Prop({ default: false, type: Boolean }) dialogFullscreen!: boolean;
+
+  // 是否显示序号列
+  @Prop({ default: false }) showColumnIndex!: boolean;
+
+  // 边框线
+  @Prop({ type: Boolean, default: false }) border!: boolean;
+
+  // 斑马纹
+  @Prop({ type: Boolean, default: true }) stripe!: boolean;
+
+  // 子表tableConfig 详情看GenerateFormItem中解释
+  @Prop({ default: () => ({}), type: Object }) formTableConfig!: any;
+
+  // 行样式
+  @Prop({
+    default: () => ({
+      height: '20px',
+    }),
+    type: Function,
+  })
+  rowStyle!: any;
+
+  // 单元格样式
+  @Prop({
+    default: () => ({
+      padding: '5px',
+    }),
+    type: Function,
+  })
+  cellStyle!: any;
+
+  // 操作列宽度
+  @Prop({ type: Number, default: null }) actionColumnWidth!: number;
+
+  // 是否需要多选
+  @Prop({ default: true, type: Boolean }) isMultiple!: boolean;
+
+  // 排序条件
+  @Prop({ default: null, type: String }) orderCondition!: string;
+
+  // 远程数据方法
+  @Prop(String) size!: string;
+
+  // 远程数据方法
+  @Prop({
+    type: Boolean,
+    default: true,
+  })
+  fit!: boolean;
+
+  // el-table showHeader
+  @Prop({
+    type: Boolean,
+    default: true,
+  })
+  showHeader!: boolean;
+
+  // el-table highlightCurrentRow
+  @Prop(Boolean) highlightCurrentRow!: boolean;
+
+  // el-table currentRowKey
+  @Prop([String, Function]) currentRowKey!: any;
+
+  // el-table rowClassName
+  @Prop([String, Function]) rowClassName!: any;
+
+  // el-table rowKey
+  @Prop([String, Function]) rowKey!: any;
+
+  // el-table emptyText
+  @Prop(String) emptyText!: string;
+
+  // el-table defaultExpandAll
+  @Prop(Boolean) defaultExpandAll!: boolean;
+
+  // el-table expandRowKeys
+  @Prop(Array) expandRowKeys!: any;
+
+  // el-table defaultSort
+  @Prop(Object) defaultSort!: any;
+
+  // el-table tooltipEffect
+  @Prop(String) tooltipEffect!: string;
+
+  // el-table showSummary
+  @Prop(Boolean) showSummary!: boolean;
+
+  // el-table sumText
+  @Prop(String) sumText!: string;
+
+  // el-table summaryMethod
+  @Prop(Function) summaryMethod!: any;
+
+  // 自定义tableStyle
+  @Prop({
+    type: String,
+    default: 'width:100%;',
+  })
+  tableStyle!: string;
+
+  // totalField
+  @Prop({
+    type: String,
+    default: 'data.total',
+  })
+  totalField!: string;
+
+  // tableParams 预设查询参数
+  @Prop({
+    type: [Object, Array],
+    default: () => ({}),
+  })
+  tableParams!: any;
+
+  // pageIndexKey
+  @Prop({ default: 'pageIndex', type: String }) pageIndexKey!: string;
+
+  // pageSizeKey
+  @Prop({ default: 'pageSize', type: String }) pageSizeKey!: string;
+
+  // 选择行是否可选
+  @Prop({ default: null, type: Function }) selectableFunc: any;
+
+  // 是否懒加载
+  @Prop(Boolean) lazy!: boolean;
+
+  // 分页
+  get pagination() {
+    return {
+      pageIndex: 1,
+      pageSize: ((): number => {
+        const { pageSizes } = this;
+        if (pageSizes.length > 0) {
+          return pageSizes[0];
+        }
+        return 20;
+      })(),
+    };
+  }
+
+  // 表格数据源地址
+  get tableUrl() {
+    return `${this.tableName}/list`;
+  }
+
+  // 文本映射
+  get text() {
+    return {
+      add: '添加',
+      edit: '编辑',
+      del: '删除',
+      detail: '查看',
+      ...this.textMap,
+    };
+  }
+
+  // 内部元素显示控制
+  get view() {
+    return {
+      searchForm: true,
+      tableTitle: true,
+      btnAdd: true,
+      btnDel: false,
+      actionColumnBtnAdd: false,
+      actionColumnBtnEdit: true,
+      actionColumnBtnDetail: false,
+      actionColumnBtnDel: true,
+      actionColumn: true,
+      btnAddOnColumnHeader: false,
+      ...this.visibleList,
+    };
+  }
+
+  created() {
+    // 请求表格设计json
+    const promise = getTableDetail(this.tableDesignerName ? this.tableDesignerName : this.tableName);
+    // 加载表格结构
+    promise.then((res) => {
+      this.tableConfig = JSON.parse(res.data.formJson);
+      // 如果不显示操作列,则隐藏
+      if (!this.view.actionColumn) {
+        this.tableConfig.columns = this.tableConfig.columns.filter((item: any) => item.slotName !== 'actionColumn');
+      }
+      const { actionColumnWidth } = this;
+      // 如果显示指明了操作列列宽
+      if (actionColumnWidth) {
+        const actionColumn: any = this.tableConfig.columns.find((item: any) => item.slotName === 'actionColumn');
+        if (actionColumn) {
+          actionColumn.width = actionColumnWidth;
+          actionColumn.minWidth = actionColumnWidth;
+        }
+      }
+    });
+  }
+
+  // 表格刷新
+  tableReload() {
+    this.dataChangeHandler();
+  }
+
+  // 添加
+  btnAdd() {
+    if (this.btnAddOnClick) {
+      this.btnAddOnClick({
+        tableParams: this.tableParams,
+      });
+    } else if (this.prefill) {
+      // 对话框内加载预填项
+      this.$refs.dialog.showDialog({}, 0, this.prefill);
+    } else {
+      this.$refs.dialog.showDialog();
+    }
+  }
+
+  // 操作列-添加
+  actionColumnAdd(row) {
+    // 添加成功后需要刷新当前结点的子节点,此处特殊处理
+    this.currentRow.parentid = this.lodash.cloneDeep(row).id;
+    if (this.btnRowAddOnClick) {
+      this.btnRowAddOnClick(row);
+    } else if (this.prefill) {
+      // 对话框内加载预填项
+      // 此处跟正常情况的preFill不一样
+      // 此处传的为Array
+      // 用于tree接口点添加自动赋值parentid的情况
+      // 例如传 { parentid : id} 则表示添加的parentid = row.id
+      const obj = {};
+      Object.keys(this.prefill).forEach((key) => {
+        obj[key] = row[this.prefill[key]];
+      });
+      this.$refs.dialog.showDialog({}, 0, obj);
+    } else {
+      this.$refs.dialog.showDialog();
+    }
+  }
+
+  // 操作列-编辑
+  actionColumnEdit(row) {
+    this.currentRow = row;
+    if (this.btnEditOnClick) {
+      this.btnEditOnClick(row);
+    } else {
+      // 请求后台detail接口获取表单数据
+      crud(DML.DETAIL, this.tableName, {}, {
+        id: row.id,
+      }).then((res) => {
+        this.$refs.dialog.showDialog({ id: row.id }, STATUS.UPDATE, res.data);
+      });
+    }
+  }
+
+  // 操作列-查看
+  actionColumnDetail(row) {
+    this.currentRow = row;
+    if (this.btnDetailOnClick) {
+      this.btnDetailOnClick(row);
+    } else {
+      // 请求后台detail接口获取表单数据
+      crud(DML.DETAIL, this.tableName, {}, {
+        id: row.id,
+      }).then((res) => {
+        this.$refs.dialog.showDialog({ id: row.id }, STATUS.DETAIL, res.data);
+      });
+    }
+  }
+
+  // 批量删除按钮
+  btnDeletesOnClick() {
+    const { length } = this.selectedRows || [];
+    if (length > 0) {
+      this.$confirm(`已选中${length}项,确认删除？该操作不可恢复！`, '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning',
+      })
+        .then(() => {
+          const promise = crud(
+            DML.DELETES,
+            this.tableName,
+            this.selectedRows.map(item => item.id),
+          );
+          promise.then(() => {
+            this.tableReload();
+            this.$message.success('批量删除成功');
+          });
+        })
+        .catch(() => {
+          this.$message.info('已取消删除');
+        });
+    } else {
+      this.$message('请先选择删除项');
+    }
+  }
+
+  // 操作列-删除
+  @confirm('确认删除?', '提示')
+  actionColumnDel(row) {
+    this.currentRow = row;
+    // 如果prop传入了promiseForDel说明需要回调自定义删除
+    const promise = this.promiseForDel ? this.promiseForDel({ id: row.id }) : crud(DML.DELETE, this.tableName, {}, { id: row.id });
+    promise.then(() => {
+      this.tableReload();
+      this.$message({
+        type: 'success',
+        message: '删除成功',
+      });
+    });
+  }
+
+  // 操作列-编辑按钮是否显示
+  actionColumnBtnEditVisible(row) {
+    let visible;
+    if (this.btnEditVisibleFunc) {
+      // 如果传入了计算函数，取函数结果
+      visible = this.btnEditVisibleFunc(row);
+    } else {
+      // 默认不显示
+      visible = this.view.actionColumnBtnEdit;
+    }
+    return visible;
+  }
+
+  // 操作列-详情按钮是否显示
+  actionColumnBtnDetailVisible(row) {
+    let visible;
+    // 如果传入了计算函数，取函数结果
+    if (this.btnDetailVisibleFunc) {
+      visible = this.btnDetailVisibleFunc(row);
+    } else {
+      // 默认不显示
+      visible = this.view.actionColumnBtnDetail;
+    }
+    return visible;
+  }
+
+  // 操作列-删除按钮是否显示
+  actionColumnBtnDelVisible(row) {
+    let visible;
+    if (this.btnDelVisibleFunc) {
+      // 如果传入了计算函数，取函数结果
+      visible = this.btnDelVisibleFunc(row);
+    } else {
+      // 默认显示
+      visible = this.view.actionColumnBtnDel;
+    }
+    return visible;
+  }
+
+  // 表格数据请求完成
+  done(t) {
+    t.tableTitle = this.tableTitle;
+    this.$emit('done', t);
+  }
+
+  // 多选事件
+  handleSelectionChange(selection) {
+    this.selectedRows = selection;
+    this.$emit('selection-change', selection);
+  }
+
+  // 生成的按钮点击
+  formBtnOnClick(widget) {
+    this.$emit('formBtnOnClick', widget);
+  }
+
+  // 监听dialog中form对象改变
+  formChange(val) {
+    this.$emit('formChange', val);
+  }
+
+  mounted() {
+    // 初始化表格高度
+    this.setMaxHeight();
+    // 请求数据
+    this.fetchHandler(true);
+
+    // 自适应分页组件按钮;
+    window.addEventListener('resize', this.resizeHandler);
+  }
+
+  resizeHandler() {
+    this.setPagerByWidth();
+    this.setMaxHeight();
+  }
+
+  setMaxHeight() {
+    const h = document.documentElement.clientHeight || document.body.clientHeight;
+    this.maxHeight = Math.max(0, h - this.maxHeightMinus);
+    this.tableHeight = this.fullHeight ? this.maxHeight : this.height;
+  }
+
+  // 根据表格宽度自动调整分页栏大小
+  setPagerByWidth() {
+    if (this.$refs.table && this.$refs.table.$el.clientWidth < 655) {
+      this.pagerCount = 5;
+      this.pagerSmall = true;
+    } else {
+      this.pagerCount = 7;
+      this.pagerSmall = false;
+    }
+  }
+
+  // pageSize改变事件
+  handleSizeChange(size) {
+    this.pagination.pageSize = size;
+    this.dataChangeHandler();
+  }
+
+  // pageIndex改变事件
+  handleCurrentChange(pageIndex) {
+    this.pagination.pageIndex = pageIndex;
+    this.dataChangeHandler();
+  }
+
+  dataChangeHandler(clearParams = false) {
+    this.fetchHandler(clearParams);
+  }
+
+  fetchHandler(clearParams = false, resetPageIndex = false) {
+    let searchCondition: any[] = [];
+    this.loading = true;
+    const {
+      tableUrl, showPagination, pageIndexKey, pageSizeKey, pagination, listField, totalField,
+    } = this;
+    const { tableParams, searchFormCondition } = this;
+    // 如果地址为空放弃请求
+    if (tableUrl == null) {
+      this.loading = false;
+      return;
+    }
+
+    // 已加载完成, tree lazy table 局部刷新.
+    if (this.lazy && this.tableData.length > 0) {
+      this.treeload({
+        id: this.currentRow.parentid,
+      });
+      this.loading = false;
+      return;
+    }
+
+    // 如清空查询条件,则清空
+    if (clearParams) {
+      searchCondition = [];
+    } else {
+      searchCondition = searchCondition.concat(searchFormCondition);
+    }
+    // 此处为外部传入的tableParams,不做清空处理!
+    if (this.tableParams) {
+      Object.keys(tableParams).forEach((k) => {
+        searchCondition.push({
+          field: k,
+          operator: 'eq',
+          value: tableParams[k],
+        });
+      });
+      // 自定义表格参数合并到表单查询条件
+      if (Array.isArray(tableParams)) {
+        searchCondition = searchCondition.concat(tableParams);
+      }
+    }
+    // 是否resetPageIndex
+    if (resetPageIndex) {
+      this.pagination.pageIndex = 1;
+    }
+    // 由于后端实体类接收，发送前必须确保所有属性都在
+    const axiosParams = {
+      orderCondition: '',
+      searchCondition: [],
+      pageIndex: 0,
+      pageSize: 0,
+    };
+    Object.assign(axiosParams, { searchCondition });
+    // 合并用于分页的两个参数
+    if (showPagination) {
+      Object.assign(axiosParams, {
+        [pageIndexKey]: pagination.pageIndex,
+        [pageSizeKey]: pagination.pageSize,
+      });
+    }
+    // 合并排序参数
+    if (this.sortParams.orderCondition !== '') {
+      Object.assign(axiosParams, this.sortParams);
+    } else if (this.orderCondition) {
+      Object.assign(axiosParams, { orderCondition: this.orderCondition });
+    }
+    // 发起请求
+    // eslint-disable-next-line no-nested-ternary
+    const requestObject = this.promiseForSelect
+      ? this.promiseForSelect(axiosParams, clearParams)
+      : this.lazy
+        ? crud(DML.TREE_LAZY, this.tableName, axiosParams)
+        : crud(DML.SELECT, this.tableName, axiosParams);
+
+    requestObject
+      .then((response) => {
+        let result = response;
+        // 此处判断返回的数据格式
+        // 和后台默认约束好的resultBean格式如下:
+        /**
+         * {
+         *    code: 200,
+         *    data: {
+         *      list: [],
+         *      total: 0,
+         *    };
+         *    message: SUCCESS
+         * }
+         */
+        if (response && !Array.isArray(response)) {
+          // 此处listField默认为 data.list
+          result = listField.split('.').reduce((res, key) => res[key], response);
+        }
+        // 判断拿到的list是否为Array
+        if (!result || !Array.isArray(result)) {
+          this.loading = false;
+          throw new Error(`The result of key:${listField} is not Array.`);
+        }
+        // 拿到list数据
+        this.tableData = result as any;
+        // 以下代码 获取该列表总数
+        let totalValue = response;
+        // 如果返回直接为list,则说明没有分页处理,直接统计length作为总数
+        if (Array.isArray(response)) {
+          totalValue = response.length;
+        } else if (typeof response === 'object') {
+          // 此处totalField默认为data.total
+          totalValue = totalField.split('.').reduce((res, key) => res[key], response);
+        } else {
+          totalValue = 0;
+        }
+        this.total = totalValue;
+        this.loading = false;
+        if (this.$refs.table) {
+          // 获取到数据后清空已选项
+          this.$refs.table.clearSelection();
+        }
+        this.$emit('done', this);
+      })
+      .catch((e) => {
+        // 如果list查询方法由外部传入,无法获取到真实请求的URL,故隐藏
+        let message = `URL：${tableUrl}，原因：${e.message}`;
+        if (this.promiseForSelect) {
+          message = `原因：${e.message}`;
+        }
+        this.$notify({
+          title: '表格数据请求失败',
+          message,
+          duration: 5000,
+        });
+        this.loading = false;
+      });
+  }
+
+  /** 懒加载树 */
+  treeload(tree, treeNode?: any, resolve?: any) {
+    const { tableName } = this;
+    const data = {
+      searchCondition: [
+        {
+          field: 'parentid',
+          operator: 'eq',
+          value: tree.id,
+        },
+      ],
+    };
+    crud(DML.TREE_LAZY, this.tableName, data).then((res) => {
+      if (resolve) {
+        resolve(res.data);
+      }
+      // 强制更新已渲染子结点
+      this.$set(this.$refs.table.store.states.lazyTreeNodeMap, tree.id, res.data);
+    });
+  }
+
+  emitTableEvent(...args) {
+    this.$emit(args[0], ...Array.from(args).slice(1));
+  }
+
+  /**
+   * 排序条件发生变化的时候会触发该事件
+   *
+   * @param {Object} prop 当前列需要排序的数据
+   * @param {Object} order 排序的规则（升序、降序和默认[默认就是没排序]）
+   */
+  sortChange(args) {
+    const { prop, order } = args;
+    const fieldOrder = order === 'ascending' ? 'asc' : 'desc';
+    this.sortParams.orderCondition = prop ? `${prop} ${fieldOrder}` : '';
+    // emit sort-change
+    this.$emit('sort-change', args);
+    // table reload
+    this.dataChangeHandler();
+  }
+
+  beforeDestroy() {
+    window.removeEventListener('resize', this.resizeHandler);
+  }
+}
+</script>
+
+<style scoped>
+/* 修改暂无数据样式 */
+.base-table >>> .el-table__empty-text {
+  line-height: 10px;
+  margin-bottom: 15px;
+  color: rgba(0, 0, 0, 0.25) !important;
+  font-size: 14px;
+}
+.base-table >>> .empty_icon {
+  width: 4em;
+  height: 4em;
+  display: block;
+  margin: 0 auto;
+}
+</style>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.CrudTable {
+  background: white;
+  padding: 10px;
+  .table-title {
+    float: left;
+    margin-left: 5px;
+    h4 {
+      margin: 2px 30px 0px 0px;
+      padding-left: 15px;
+      border-left: 7px solid #007bff;
+      font-weight: 500;
+      font-size: 20px;
+    }
+  }
+  .btn-bar {
+    float: right;
+    width: auto;
+    text-align: right;
+    & > div,
+    button {
+      float: right;
+    }
+  }
+}
+</style>
diff --git a/packages/CrudTable/src/GenerateFormDialog.vue b/packages/CrudTable/src/GenerateFormDialog.vue
new file mode 100644
index 0000000..5c37434
--- /dev/null
+++ b/packages/CrudTable/src/GenerateFormDialog.vue
@@ -0,0 +1,286 @@
+<!--
+@file 用于动态表单保存的对话框
+@author BoBo
+@copyright NanJing Anshare Tech .Com
+@createDate 2018年11月16日19:31:29
+-->
+<template>
+  <!-- 对话框 -->
+  <el-dialog v-if="visible"
+             ref="dialog"
+             :title="dialogTitle"
+             :visible.sync="visible"
+             :width="width"
+             :append-to-body="appendToBody"
+             :fullscreen="fullscreen"
+             :close-on-click-modal="closeOnClickModal">
+    <!-- 对话框内动态表单 -->
+    <GenerateForm ref="generateDialogForm"
+                  :value="formValues"
+                  :data="formDesign"
+                  :setReadOnly="readOnly"
+                  :remote="remoteFuncs"
+                  :entity.sync="entity"
+                  @btnonclick="btnOnClick"
+                  :formTableConfig="formTableConfig" />
+    <el-row type="flex"
+            justify="end"
+            slot="footer">
+      <template v-if="readOnly">
+        <el-button @click="visible=false">关 闭</el-button>
+      </template>
+      <template v-else>
+        <el-button type="primary"
+                   icon="el-icon-check"
+                   @click="btnSaveOnClick()"
+                   :loading="btnSaveIsLoading">保存</el-button>
+        <el-button icon="el-icon-close"
+                   @click="btnCancelOnClick()">取消</el-button>
+      </template>
+    </el-row>
+  </el-dialog>
+</template>
+
+<script lang="ts">
+import { DML, crud } from '../../api/public/crud';
+import { getFormDetail } from '../../api/system/form';
+import GenerateForm from '../../FormDesigner/src/GenerateForm.vue';
+import guid from '../../utils/generator';
+import {
+  Component, Vue, Emit, Watch, Prop,
+} from 'vue-property-decorator';
+
+const STATUS = {
+  CREATE: 0,
+  UPDATE: 1,
+  DETAIL: 2,
+};
+
+@Component({
+  components: {
+    GenerateForm,
+  },
+})
+export default class GenerateFormDialog extends Vue {
+  // 子表tableConfig 详情看GenerateFormItem中解释
+  @Prop({ default: () => ({}), type: Object }) formTableConfig!: any;
+
+  // 设置只读
+  @Prop({ default: null, type: Object }) setReadOnly!: any;
+
+  // 对话框内加载FormDesigner的表名
+  @Prop({
+    type: String,
+    default: null,
+  })
+  dialogFormDesignerName!: string;
+
+  // 内部元素显示控制
+  @Prop({ default: () => ({}), type: Object }) visibleList!: any;
+
+  // 按钮名字
+  @Prop({ default: () => ({}), type: Object }) textMap!: any;
+
+  // 对话框宽度
+  @Prop({
+    type: String,
+    default: '80%',
+  })
+  width!: string;
+
+  // 表名
+  @Prop({
+    type: String,
+    default: '',
+  })
+  tableName!: string;
+
+  // 表格参数
+  @Prop([Object, Array]) tableParams!: any;
+
+  // 代理保存方法
+  @Prop({ default: null, type: Function }) promiseForSave!: any;
+
+  // 远程数据方法
+  @Prop({ default: () => ({}), type: Object }) remoteFuncs!: any;
+
+  // 弹出表单appendToBody
+  @Prop({ default: false, type: Boolean }) appendToBody!: boolean;
+
+  // 点击阴影弹框是否可以关闭
+  @Prop({ default: true, type: Boolean }) closeOnClickModal!: boolean;
+
+  // 表单是否全屏
+  @Prop({ default: false, type: Boolean }) fullscreen!: boolean;
+
+  $refs!: {
+    generateDialogForm: HTMLFormElement;
+  };
+
+  // 对话框内文本框们填写的值
+  formValues: any = {};
+
+  // 对话框设计结构json
+  formDesign: any = {};
+
+  // 对话框是否显示
+  visible = false;
+
+  // 保存按钮Loading状态
+  btnSaveIsLoading = false;
+
+  // 当前整个表单的entity
+  entity = {};
+
+  // 表单状态
+  dialogStatus = 0;
+
+  // 表格参数
+  dialogParams: any = {};
+
+  // 对话框标题
+  get dialogTitle() {
+    let title = '';
+    switch (this.dialogStatus) {
+      case STATUS.CREATE:
+        title = this.textMap.add;
+        break;
+      case STATUS.UPDATE:
+        title = this.textMap.edit;
+        break;
+      case STATUS.DETAIL:
+        title = this.textMap.detail;
+        break;
+      default:
+        title = '';
+    }
+    return title;
+  }
+
+  get readOnly() {
+    if (this.dialogStatus === STATUS.DETAIL) {
+      return {};
+    }
+    return this.setReadOnly;
+  }
+
+  // 内部元素显示控制
+  get view() {
+    return {
+      ...this.visibleList,
+    };
+  }
+
+  /**
+   * 显示对话框，父元素调用
+   *
+   * @param {Object} param 对话框保存时的参数
+   * @param {Number} status 对话框状态[添加:0,编辑:1]，必须是STATUS枚举
+   * @param {Object} formValues 编辑时传入所有字段的默认值
+   */
+  showDialog(param = {}, status = STATUS.CREATE, formValues = {}) {
+    // 保存参数用于save方法
+    this.dialogParams = param;
+    this.dialogStatus = status;
+    // 请求对话框内的动态表单json
+    getFormDetail(this.dialogFormDesignerName ? this.dialogFormDesignerName : this.tableName).then((res) => {
+      this.formDesign = JSON.parse(res.data.formJson);
+      if (this.dialogStatus === STATUS.UPDATE) {
+        // 填写编辑框
+        this.formValues = { ...formValues };
+      } else {
+        // add 默认生成id
+        this.formValues = {
+          id: guid(),
+          ...formValues,
+        };
+      }
+      this.visible = true;
+    });
+  }
+
+  // 保存按钮点击
+  btnSaveOnClick(prefill = {}) {
+    this.btnSaveIsLoading = true;
+    // 调用此方法验证表单数据和获取表单数据
+    this.$refs.generateDialogForm
+      .getData()
+      .then((formValue) => {
+        let type;
+        let msg;
+        // 如果select,radio,checkbox等多选情况返回数组的话，默认拼接成逗号分隔的字符串传给后台
+        Object.keys(formValue).forEach((k) => {
+          if (Array.isArray(formValue[k])) {
+            formValue[k] = formValue[k].toString();
+          }
+        });
+        // 根据对话框状态判断保存或编辑
+        if (this.dialogStatus === STATUS.CREATE) {
+          type = DML.INSERT;
+          msg = '添加成功';
+        } else {
+          type = DML.UPDATE;
+          msg = '编辑成功';
+        }
+        let promise;
+        // const opt = {
+        //   ...this.formValues,
+        //   ...this.tableParams,
+        //   ...formValue,
+        //   ...this.dialogParams,
+        // };
+        // 如果有代理的保存方法
+        if (this.promiseForSave) {
+          promise = this.promiseForSave(formValue);
+        } else {
+          promise = crud(type, this.tableName, formValue);
+        }
+
+        promise.then((res) => {
+          if (res.code !== 200) {
+            this.$message({
+              type: 'error',
+              message: `保存失败，原因：${res.message}`,
+            });
+            this.btnSaveIsLoading = false;
+            return;
+          }
+          this.btnSaveIsLoading = false;
+          this.visible = false;
+          this.$message({
+            type: 'success',
+            message: msg,
+          });
+          this.$emit('afterSave', {
+            status: this.dialogStatus,
+            dialogParams: this.dialogParams,
+          });
+        });
+      })
+      .catch(() => {
+        this.btnSaveIsLoading = false;
+        // 数据校验失败
+      });
+  }
+
+  // 取消按钮点击
+  btnCancelOnClick() {
+    this.visible = false;
+    this.$emit('cancel');
+  }
+
+  // 生成的按钮点击
+  btnOnClick(widget) {
+    this.$emit('btnOnClick', widget);
+  }
+
+  @Watch('entity', { deep: true })
+  onDataChange(value: any) {
+    // 抛出当前表单对象以及当前表单json
+    this.$emit('change', {
+      formEntity: value,
+      formDesign: this.formDesign,
+    });
+  }
+}
+</script>
diff --git a/packages/CrudTable/src/SearchForm.vue b/packages/CrudTable/src/SearchForm.vue
new file mode 100644
index 0000000..03d2f0b
--- /dev/null
+++ b/packages/CrudTable/src/SearchForm.vue
@@ -0,0 +1,231 @@
+<!--
+ * @file: 查询区域,基于老杨版本重构
+ * @copyright: NanJing Anshare Tech .Com
+ * @author: BoBo
+ * @Date: 2020年02月20 14:05:12
+ -->
+
+<template>
+  <div class="search-form-container">
+    <el-input placeholder="请输入查询内容"
+              @clear="clearEvent"
+              clearable
+              @change="changeEvent"
+              v-model="searchContent"
+              class="input">
+      <div slot="suffix">
+        <el-tooltip class="item"
+                    effect="dark"
+                    content="查询"
+                    placement="top">
+          <i class="el-input__icon el-icon-search"
+             @click="btnSearchOnClick()"
+             style="display:inline"></i>
+        </el-tooltip>
+        <!-- 高级查询表单 -->
+        <SeniorSearchForm :remoteFuncs="remoteFuncs"
+                          @fetchSearch="getFetchParamsSearch"
+                          :columns="columns"> </SeniorSearchForm>
+        <el-tooltip class="item"
+                    effect="dark"
+                    content="清空"
+                    placement="top">
+          <i class="el-input__icon el-icon-refresh"
+             @click="clearEvent()"
+             style="display:inline;color:orange;"></i>
+        </el-tooltip>
+      </div>
+    </el-input>
+    <div class="tips">
+      <!-- 提示当前查询内容 -->
+      <template v-if="isArray">
+        <el-tag v-for="(item,index) in paramsTips"
+                size="small"
+                effect="plain"
+                :key="index"
+                closable
+                @close="handleClose(item)">
+          {{item.label +':'+item.value}}
+        </el-tag>
+      </template>
+      <template v-else>
+        <span v-if="paramsTips">当前查询: {{paramsTips}}</span>
+      </template>
+    </div>
+
+  </div>
+</template>
+
+<script lang="ts">
+import { Component, Vue, Prop } from 'vue-property-decorator';
+import SeniorSearchForm from './SeniorSearchForm.vue';
+
+@Component({
+  components: {
+    SeniorSearchForm,
+  },
+})
+export default class SearchForm extends Vue {
+  // 远程数据方法
+  @Prop({ default: () => ({}), type: Object }) remoteFuncs!: any;
+
+  // 表格设计json
+  @Prop({
+    type: Array,
+    required: true,
+  })
+  columns: any;
+
+  // 查询输入框内容
+  searchContent = '';
+
+  // 查询tips
+  paramsTips: any = null;
+
+  get isArray() {
+    return Array.isArray(this.paramsTips);
+  }
+
+  // 标签关闭事件
+  handleClose(tag) {
+    this.paramsTips = this.paramsTips.filter(item => item.field !== tag.field);
+    this.$emit(
+      'update:searchFormCondition',
+      this.paramsTips.map(item => ({
+        field: item.field,
+        value: item.value,
+        operator: item.operator,
+      })),
+    );
+    this.$emit('click');
+  }
+
+  clearEvent() {
+    this.searchContent = '';
+    this.paramsTips = null;
+    this.$emit('update:searchFormCondition', []);
+    this.$emit('clear');
+  }
+
+  // 查询按钮点击
+  btnSearchOnClick() {
+    this.getParams();
+    this.$emit('click');
+  }
+
+  /**
+   * 获取查询条件
+   */
+  getParams() {
+    let params: any = [];
+    // 拿到所有字段
+    const props = this.columns.filter(item => item.searchable).map(item => item.prop);
+    const str = props.toString();
+    if (this.searchContent) {
+      params = [
+        {
+          field: str,
+          operator: 'orlike',
+          value: this.searchContent,
+        },
+      ];
+    }
+    this.$emit('update:searchFormCondition', params);
+  }
+
+  // 输入框change事件
+  changeEvent(val) {
+    this.getParams();
+    this.paramsTips = val;
+    this.$emit('click');
+  }
+
+  // 获取高级查询组件中的查询条件
+  getFetchParamsSearch(data) {
+    this.paramsTips = [];
+    const params: any = [];
+    Object.keys(data).forEach((key) => {
+      if (key && data[key]) {
+        if (Array.isArray(data[key])) {
+          const [startDate, endDate] = data[key];
+          params.push({
+            field: key,
+            operator: 'egt',
+            value: startDate,
+          });
+          params.push({
+            field: key,
+            operator: 'elt',
+            value: endDate,
+          });
+        } else {
+          params.push({
+            field: key,
+            operator: 'like',
+            value: data[key],
+          });
+        }
+      }
+    });
+    this.paramsTips = params.map(item => ({
+      field: item.field,
+      value: item.value,
+      operator: item.operator,
+      label: this.columns.find(s => s.prop === item.field).label,
+    }));
+
+    this.$emit('update:searchFormCondition', params);
+    this.$emit('click');
+  }
+}
+</script>
+<style scoped>
+.input-with-select >>> .el-input-group__prepend {
+  background-color: #fff;
+}
+</style>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.search-form-container {
+  float: left;
+  .input {
+    /deep/ .el-input__inner {
+      height: 28px;
+      line-height: 28px;
+      border-radius: 0;
+      display: inline-block;
+    }
+  }
+  /deep/.el-input {
+    /deep/.el-input__suffix-inner > div {
+      display: inline;
+    }
+    display: inline-block;
+    width: 25vw;
+  }
+  /deep/.el-input__suffix {
+    top: -5px;
+  }
+
+  /deep/.el-input-group__append {
+    span {
+      display: inline-block;
+      width: 30px;
+      margin-left: 30px;
+    }
+  }
+  /deep/.el-input__icon {
+    cursor: pointer;
+    font-weight: 600;
+  }
+  .tips {
+    display: inline-block;
+    vertical-align: 1px;
+    margin-left: 5px;
+    /deep/.el-tag {
+      border-radius: 0;
+      margin-right: 5px;
+    }
+  }
+}
+</style>
diff --git a/packages/CrudTable/src/SeniorSearchForm.vue b/packages/CrudTable/src/SeniorSearchForm.vue
new file mode 100644
index 0000000..6904bb2
--- /dev/null
+++ b/packages/CrudTable/src/SeniorSearchForm.vue
@@ -0,0 +1,200 @@
+<!--
+ * @file: 高级查询表单
+ * @copyright: NanJing Anshare Tech .Com
+ * @author: BoBo
+ * @Date: 2019年12月10 14:27:03
+ -->
+<template>
+  <el-popover width="650"
+              placement="bottom"
+              @hide="getSearchFormData"
+              trigger="click">
+    <el-card style="margin:-12px;"
+             :body-style="{
+      padding:'5px',
+      maxHeight:'70vh',
+      overflow:'auto'
+    }">
+      <div slot="header"
+           class="clearfix">
+        <i class="el-icon el-icon-search"
+           style="margin-right:10px"></i>
+        <span>高级查询</span>
+      </div>
+      <div>
+        <GenerateForm ref="generateDialogForm"
+                      :data="formDesign"
+                      style="width:auto"
+                      v-if="visible"
+                      :remote="remoteFuncs"
+                      :entity.sync="entity" />
+      </div>
+    </el-card>
+    <el-tooltip class="item"
+                slot="reference"
+                effect="dark"
+                content="高级查询"
+                placement="top">
+      <i style="color:green"
+         class="el-input__icon el-icon-zoom-in el-icon"
+         @click="visible = true"></i>
+    </el-tooltip>
+  </el-popover>
+</template>
+
+<script lang="ts">
+import GenerateForm from '../../FormDesigner/src/GenerateForm.vue';
+import { DML, crud } from '../../api/public/crud';
+import { getFormDetail } from '../../api/system/form';
+
+import {
+  Component, Vue, Prop, Watch,
+} from 'vue-property-decorator';
+
+@Component({
+  components: {
+    GenerateForm,
+  },
+})
+export default class SeniorSearchForm extends Vue {
+   $refs!: {
+    generateDialogForm: HTMLFormElement;
+  };
+
+  visible = false;
+
+  entity: any = {};
+
+  formDesign = {};
+
+  @Prop({
+    type: Array,
+    default: () => [],
+    required: true,
+  })
+  columns;
+
+  // 远程数据方法
+  @Prop({ default: () => ({}), type: Object }) remoteFuncs!: any;
+
+
+  created() {
+    this.autoGenerateFormByBackend();
+  }
+
+  resetForm() {
+    this.$refs.generateDialogForm.resetForm();
+  }
+
+  getSearchFormData() {
+    this.$emit('fetchSearch', this.entity);
+    this.visible = false;
+  }
+
+  // 生成查询表单 待  重构!!!
+  // 暂时默认时间类型的为起止范围查询
+  // 输入框类型的为手动输入
+  autoGenerateFormByBackend() {
+    const formJson: any = {
+      list: [],
+      config: {
+        labelWidth: 110,
+        labelPosition: 'right',
+        size: 'small',
+        isTableClass: false,
+      },
+    };
+
+    for (const column of this.columns.filter(item => item.searchable)) {
+      const {
+        type, label, prop, option,
+      } = column;
+      const row: any = {
+        type: 'grid',
+        columns: [],
+        options: {
+          gutter: 0,
+        },
+        model: '1575516929000_36539',
+        rules: [],
+      };
+      const input: any = {
+        span: 24,
+        list: [
+          {
+            type: 'input',
+            name: label,
+            options: {
+              type: 'input',
+              dataType: 'string',
+              placeholder: `请输入${label}`,
+            },
+            model: prop,
+            rules: [],
+          },
+        ],
+      };
+      const date: any = {
+        span: 24,
+        list: [
+          {
+            type: 'date',
+            name: label,
+            model: prop,
+            rules: [],
+            options: {
+              editable: true,
+              clearable: true,
+              startPlaceholder: '请选择开始时间',
+              endPlaceholder: '请选择结束时间',
+              type: 'monthrange',
+              format: 'yyyy-MM',
+              width: '100%',
+            },
+          },
+        ],
+      };
+      const select: any = {
+        span: 24,
+        list: [
+          {
+            type: 'select',
+            name: label,
+            options: {
+              clearable: true,
+              options: [],
+              allowCreate: false,
+              remote: 'dict',
+              remoteOptions: [],
+              props: {
+                value: 'value',
+                label: 'label',
+              },
+              remoteFunc: '',
+              dictType: '',
+              ...option,
+              placeholder: `请选择${label}`,
+            },
+            model: prop,
+            rules: [],
+          },
+        ],
+      };
+      if (prop.includes('date') || prop.includes('time') || label.includes('日期') || label.includes('时间')) {
+        row.columns.push(date);
+      } else if (option && option.type === 'select') {
+        row.columns.push(select);
+      } else {
+        row.columns.push(input);
+      }
+      formJson.list.push(row);
+    }
+    this.formDesign = formJson;
+  }
+
+  @Watch('columns', { deep: true })
+  onChange() {
+    this.autoGenerateFormByBackend();
+  }
+}
+</script>
diff --git a/packages/FormDesigner/index.js b/packages/FormDesigner/index.ts
similarity index 100%
rename from packages/FormDesigner/index.js
rename to packages/FormDesigner/index.ts
diff --git a/packages/FormDesigner/src/CusDialog.vue b/packages/FormDesigner/src/CusDialog.vue
new file mode 100644
index 0000000..419e8ec
--- /dev/null
+++ b/packages/FormDesigner/src/CusDialog.vue
@@ -0,0 +1,151 @@
+<template>
+  <el-dialog class="cus-dialog-container"
+             :title="title"
+             :visible.sync="dialogVisible"
+             :close-on-click-modal="false"
+             :width="width"
+             ref="elDialog"
+             :id="id"
+             append-to-body>
+    <span v-if="show">
+      <slot></slot>
+    </span>
+
+    <span v-if="action"
+          slot="footer"
+          class="dialog-footer"
+          v-loading="loading"
+          :element-loading-text="loadingText">
+      <slot name="action">
+        <el-button @click="close">取消</el-button>
+        <el-button type="primary"
+                   @click="submit">确 定</el-button>
+      </slot>
+    </span>
+  </el-dialog>
+</template>
+
+<script lang="ts">
+import {
+  Component, Vue, Watch, Prop,
+} from 'vue-property-decorator';
+
+@Component
+export default class CusDialog extends Vue {
+  loading = false;
+
+  id = `dialog ${new Date().getTime()}`;
+
+  showForm = false;
+
+  @Prop(Boolean)
+  visible!: boolean;
+
+  @Prop({
+    type: String,
+    default: '',
+  })
+  loadingText!: string;
+
+  @Prop({
+    type: String,
+    default: '预览',
+  })
+  title!: string;
+
+  @Prop({
+    type: String,
+    default: '600px',
+  })
+  width!: string;
+
+  @Prop({
+    type: Boolean,
+    default: true,
+  })
+  form!: boolean;
+
+  @Prop({
+    type: Boolean,
+    default: true,
+  })
+  action!: boolean;
+
+  dialogVisible = this.visible;
+
+  get show() {
+    if (this.form) {
+      return this.showForm;
+    }
+    return true;
+  }
+
+  close() {
+    this.dialogVisible = false;
+  }
+
+  submit() {
+    this.loading = true;
+
+    this.$emit('on-submit');
+  }
+
+  end() {
+    this.loading = false;
+  }
+
+  @Watch('dialogVisible')
+  dialogVisibleChange(val) {
+    if (!val) {
+      this.loading = false;
+      this.$emit('on-close');
+      setTimeout(() => {
+        this.showForm = false;
+      }, 300);
+    } else {
+      this.showForm = true;
+    }
+  }
+
+  @Watch('visible')
+  visibleChange(val) {
+    this.dialogVisible = val;
+  }
+}
+</script>
+
+<style lang="scss">
+.cus-dialog-container {
+  .el-dialog__body{
+    overflow: auto;
+  }
+  .el-dialog__footer {
+    // margin: 0 20px;
+    // border-top: 1px dashed #ccc;
+    padding: 15px 0 16px;
+    text-align: center;
+    position: relative;
+
+    .dialog-footer {
+      display: block;
+
+      .circular {
+        display: inline-block;
+        vertical-align: middle;
+        margin-right: 5px;
+        width: 24px;
+        height: 24px;
+      }
+
+      .el-loading-text {
+        display: inline-block;
+        vertical-align: middle;
+      }
+
+      .el-loading-spinner {
+        margin-top: -12px;
+      }
+    }
+  }
+}
+</style>
diff --git a/packages/FormDesigner/src/components/FormDesigner/FormConfig.vue b/packages/FormDesigner/src/FormConfig.vue
similarity index 52%
rename from packages/FormDesigner/src/components/FormDesigner/FormConfig.vue
rename to packages/FormDesigner/src/FormConfig.vue
index c85fd99..419db66 100644
--- a/packages/FormDesigner/src/components/FormDesigner/FormConfig.vue
+++ b/packages/FormDesigner/src/FormConfig.vue
@@ -1,3 +1,9 @@
+<!--
+ * @file: 表单属性
+ * @copyright: NanJing Anshare Tech .Com
+ * @author: BoBo
+ * @Date: 2020年09月14 18:01:58
+-->
 <template>
   <div class="form-config-container">
     <el-form label-position="top">
@@ -13,27 +19,33 @@
         </el-radio-group>
       </el-form-item>
       <el-form-item label="表单字段宽度">
-        <el-input-number v-model="data.labelWidth" :min="0" :max="200" :step="10"></el-input-number>
+        <el-input-number v-model="data.labelWidth"
+                         :min="0"
+                         :max="200"
+                         :step="10"></el-input-number>
       </el-form-item>
     </el-form>
   </div>
 </template>
 
-<script>
-export default {
-  props: ['data'],
-  data() {
-    return {
-      useTableClass: false,
-    };
-  },
-  methods: {
-    isTableClass() {
-      if (this.data.isTableClass) {
-        this.data.labelPosition = 'right';
-        this.data.labelWidth = 110;
-      }
-    },
-  },
-};
+<script lang="ts">
+import {
+  Component, Vue, Prop,
+} from 'vue-property-decorator';
+
+@Component
+export default class FormConfig extends Vue {
+  // 是否使用table布局
+  useTableClass = false;
+
+  @Prop(Object)
+  data: any;
+
+  isTableClass() {
+    if (this.data.isTableClass) {
+      this.data.labelPosition = 'right';
+      this.data.labelWidth = 110;
+    }
+  }
+}
 </script>
diff --git a/packages/FormDesigner/src/FormDesigner.vue b/packages/FormDesigner/src/FormDesigner.vue
index dca6abf..c4cf242 100644
--- a/packages/FormDesigner/src/FormDesigner.vue
+++ b/packages/FormDesigner/src/FormDesigner.vue
@@ -1,177 +1,226 @@
 <!--
- * @file: 表单设计器
- * @copyright: NanJing Anshare Tech .Com
- * @author: BoBo
- * @Date: 2020年09月30 17:26:55
+@file 动态表单设计器
+      依赖vue-awesome、vuedraggable
+@author BoBo
+@copyright NanJing Anshare Tech .Com
+@createDate 2018年11月15日16:11:09
 -->
-
 <template>
-  <div>
-    <!-- 对话框内动态表单 -->
-    <!-- <GenerateForm ref="generateDialogForm"
-                  :value="formValues"
-                  :data="formDesign"
-                  :remote="remoteFuncs" /> -->
-    <el-container style="height:calc(100% - 103px);border:1px solid gray">
-      <!-- 左侧边栏 -->
-      <el-aside style="width: 20%;max-width:250px">
-        <div class="components-list">
-          <div class="widget-cate">基础组件</div>
-          <Draggable tag="ul"
-                     :list="basicComponents"
-                     v-bind="getDraggableOptions()"
-                     .end="handleMoveEnd"
-                     .start="handleMoveStart"
-                     :move="handleMove">
-            <li class="form-edit-widget-label"
-                v-for="(item, index) in basicComponents"
-                :key="index">
-              <a>
-                <Icon class="icon"
-                      :name="item.icon"></Icon>
-                <span>{{item.name}}</span>
-              </a>
-            </li>
-          </draggable>
-          <div class="widget-cate">高级组件</div>
-          <Draggable tag="ul"
-                     :list="advanceComponents"
-                     v-bind="getDraggableOptions()"
-                     .end="handleMoveEnd"
-                     .start="handleMoveStart"
-                     :move="handleMove">
-            <li class="form-edit-widget-label"
-                v-for="(item, index) in advanceComponents"
-                :key="index">
-              <a>
-                <Icon class="icon"
-                      :name="item.icon"></Icon>
-                <span>{{item.name}}</span>
-              </a>
-            </li>
-          </draggable>
-          <div class="widget-cate">布局组件</div>
-          <Draggable tag="ul"
-                     :list="layoutComponents"
-                     v-bind="getDraggableOptions()"
-                     .end="handleMoveEnd"
-                     .start="handleMoveStart"
-                     :move="handleMove">
-            <li class="form-edit-widget-label data-grid"
-                v-for="(item, index) in layoutComponents"
-                :key="index">
-              <a>
-                <Icon class="icon"
-                      :name="item.icon"></Icon>
-                <span>{{item.name}}</span>
-              </a>
-            </li>
-          </draggable>
+  <el-container style="height:100%">
+    <!-- 左侧边栏 -->
+    <el-aside style="width: 20%;max-width:250px">
+      <div class="components-list">
+        <div class="logo-container">
+          <img class="logo"
+               src="./logo.png" />
+          <span class="title">
+            Form Generate
+          </span>
         </div>
-      </el-aside>
-      <!-- 中间区域 -->
-      <el-container class="center-container"
-                    direction="vertical">
-        <!-- 中间区域顶部按钮栏 -->
-        <el-header class="btn-bar"
-                   style="height: 45px;">
-          <el-button type="text"
-                     size="medium"
-                     icon="el-icon-view"
-                     @click="handlePreview">预览</el-button>
-          <el-button type="text"
-                     size="medium"
-                     icon="el-icon-tickets"
-                     @click="handleGenerateJson">生成JSON</el-button>
+        <div class="widget-cate">基础组件</div>
+        <Draggable tag="ul"
+                   :list="basicComponents"
+                   v-bind="getDraggableOptions()"
+                   @end="handleMoveEnd"
+                   @start="handleMoveStart"
+                   :move="handleMove">
+          <li class="form-edit-widget-label"
+              v-for="(item, index) in basicComponents"
+              :key="index">
+            <a>
+              <Icon class="icon"
+                    :name="item.icon"></Icon>
+              <span>{{item.name}}</span>
+            </a>
+          </li>
+        </draggable>
+        <div class="widget-cate">高级组件</div>
+        <Draggable tag="ul"
+                   :list="advanceComponents"
+                   v-bind="getDraggableOptions()"
+                   @end="handleMoveEnd"
+                   @start="handleMoveStart"
+                   :move="handleMove">
+          <li class="form-edit-widget-label"
+              v-for="(item, index) in advanceComponents"
+              :key="index">
+            <a>
+              <Icon class="icon"
+                    :name="item.icon"></Icon>
+              <span>{{item.name}}</span>
+            </a>
+          </li>
+        </draggable>
+        <div class="widget-cate">布局组件</div>
+        <Draggable tag="ul"
+                   :list="layoutComponents"
+                   v-bind="getDraggableOptions()"
+                   @end="handleMoveEnd"
+                   @start="handleMoveStart"
+                   :move="handleMove">
+          <li class="form-edit-widget-label data-grid"
+              v-for="(item, index) in layoutComponents"
+              :key="index">
+            <a>
+              <Icon class="icon"
+                    :name="item.icon"></Icon>
+              <span>{{item.name}}</span>
+            </a>
+          </li>
+        </draggable>
+      </div>
+    </el-aside>
+    <!-- 中间区域 -->
+    <el-container class="center-container"
+                  direction="vertical">
+      <!-- 中间区域顶部按钮栏 -->
+      <el-header class="btn-bar"
+                 style="height: 60px;">
+        <el-row :gutter="15">
+          <!-- 对话框内动态表单 -->
+          <!-- <el-col :span="16">
+              <GenerateForm ref="generateDialogForm"
+                            class="form"
+                            :value="formValues"
+                            :data="formDesign"
+                            :remote="remoteFuncs" />
+            </el-col> -->
+          <el-col :span="24" style="text-align:right">
+            <!-- <el-button type='text'
+                       @click="btnSave_onClick"
+                       :loading="btnSaveIsLoading">保存</el-button> -->
+            <el-button type="text"
+                       size="medium"
+                       icon="el-icon-view"
+                       @click="handlePreview">预览</el-button>
+            <el-button type="text"
+                       size="medium"
+                       icon="el-icon-tickets"
+                       @click="handleGenerateJson">JSON</el-button>
+            <el-button type="text"
+                       size="medium"
+                       icon="el-icon-form"
+                       @click="formVisible = true">自动绑定</el-button>
+          </el-col>
+        </el-row>
 
+      </el-header>
+      <!-- 中间区域中央设计区域，data:widgetForm用于保存生成后的json -->
+      <el-main :class="{'widget-empty': widgetForm.list.length == 0}">
+        <widget-form ref="widgetForm"
+                     :data="widgetForm"
+                     :select.sync="widgetFormSelect"></widget-form>
+      </el-main>
+    </el-container>
+    <!-- 右侧边栏 -->
+    <el-aside class="widget-config-container"
+              style="width:300px;">
+      <el-container class="full-height">
+        <el-header height="45px">
+          <div class="config-tab"
+               :class="{active: configTab=='widget'}"
+               @click="handleConfigSelect('widget')">字段属性</div>
+          <div class="config-tab"
+               :class="{active: configTab=='form'}"
+               @click="handleConfigSelect('form')">表单属性</div>
         </el-header>
-        <!-- 中间区域中央设计区域，data:widgetForm用于保存生成后的json -->
-        <el-main :class="{'widget-empty': widgetForm.list.length == 0}">
-          <widget-form ref="widgetForm"
-                       :data="widgetForm"
-                       :select.sync="widgetFormSelect"></widget-form>
+        <el-main class="config-content">
+          <widget-config v-show="configTab=='widget'"
+                         :data="widgetFormSelect"></widget-config>
+          <form-config v-show="configTab=='form'"
+                       :data="widgetForm.config"></form-config>
         </el-main>
       </el-container>
-      <!-- 右侧边栏 -->
-      <el-aside class="widget-config-container"
-                style="width:25%;">
-        <el-container>
-          <el-header height="45px">
-            <div class="config-tab"
-                 :class="{active: configTab=='widget'}"
-                 @click="handleConfigSelect('widget')">字段属性</div>
-            <div class="config-tab"
-                 :class="{active: configTab=='form'}"
-                 @click="handleConfigSelect('form')">表单属性</div>
-          </el-header>
-          <el-main class="config-content">
-            <widget-config v-show="configTab=='widget'"
-                           :data="widgetFormSelect"></widget-config>
-            <form-config v-show="configTab=='form'"
-                         :data="widgetForm.config"></form-config>
-          </el-main>
-        </el-container>
 
-      </el-aside>
-      <!-- 预览对话框 -->
-      <!-- <cus-dialog :visible="previewVisible"
-                  @on-close="previewVisible = false"
-                  ref="widgetPreview"
-                  .on-submit="handleTest"
-                  width="1000px"
-                  form>
-        <generate-form v-if="previewVisible"
-                       :data="widgetForm"
-                       :remote="remoteFuncsForPreview"
-                       :value="widgetModels"
-                       ref="generateForm">
-          <template slot="blank"
-                    slot-scope="scope">
-            宽度：<el-input v-model="scope.model.blank.width"
-                      style="width: 100px"></el-input>
-            高度：<el-input v-model="scope.model.blank.height"
-                      style="width: 100px"></el-input>
-          </template>
-        </generate-form>
-      </cus-dialog> -->
-      <!-- json对话框 -->
-      <cus-dialog :visible="jsonVisible"
-                  @on-close="jsonVisible = false"
-                  ref="jsonPreview"
-                  width="800px"
-                  form>
-        <!-- json编辑器 -->
-        <div id="jsoneditor"
-             style="height: 400px;width: 100%;">{{jsonTemplate}}</div>
-
-        <template slot="action">
-          <el-button id="copybtn"
-                     data-clipboard-target=".ace_text-input">双击复制</el-button>
+    </el-aside>
+    <!-- 预览对话框 -->
+    <cus-dialog :visible="previewVisible"
+                @on-close="previewVisible = false"
+                ref="widgetPreview"
+                @on-submit="handleTest"
+                width="1000px"
+                form>
+      <el-alert type="warning"
+                :closable="false"
+                class="mb-15">组件依赖远端数据需要结合代码实际预览,此处无法直接预览效果!</el-alert>
+      <generate-form v-if="previewVisible"
+                     :data="widgetForm"
+                     :remote="remoteFuncsForPreview"
+                     :value="widgetModels"
+                     ref="generateForm">
+        <template slot="blank"
+                  slot-scope="scope">
+          宽度：<el-input v-model="scope.model.blank.width"
+                    style="width: 100px"></el-input>
+          高度：<el-input v-model="scope.model.blank.height"
+                    style="width: 100px"></el-input>
         </template>
-      </cus-dialog>
-    </el-container>
-  </div>
+      </generate-form>
+    </cus-dialog>
+    <!-- json对话框 -->
+    <cus-dialog :visible="jsonVisible"
+                @on-close="jsonVisible = false"
+                ref="jsonPreview"
+                width="800px"
+                form>
+      <!-- json编辑器 -->
+      <div id="jsoneditor"
+           style="height: 400px;width: 100%;">{{jsonTemplate}}</div>
+    </cus-dialog>
+    <cus-dialog ref="bindKeys"
+                :visible="formVisible"
+                title="绑定后端key/自动初始化表单(根据数据库字段备注)"
+                @on-close="formVisible = false;formKeys.tableName = '';formKeys.prefill = ''"
+                width="800px"
+                :action="false">
+      <el-alert type="warning">请先选择数据源,然后根据需要选择相应功能</el-alert>
+      <table class="el-table"
+             style="width:100%">
+        <thead>
+          <th>数据源</th>
 
+        </thead>
+        <tbody>
+          <td>
+            <el-select v-model="formKeys.tableName"
+                       filterable
+                       style="width:100%"
+                       placeholder="选择数据源">
+              <el-option v-for="(item,index) in allTables"
+                         :key="index"
+                         :label="item.TABLE_NAME"
+                         :value="item.TABLE_NAME"></el-option>
+            </el-select>
+          </td>
+        </tbody>
+      </table>
+      <el-button type="success"
+                 @click="handleGenerateKey(true)">自动生成表单(根据数据库字段初始化,默认一行两列)</el-button>
+      <!-- <el-button type="primary"
+                   @click="handleGenerateKey()">自动绑定key(已有表单的情况)</el-button> -->
+    </cus-dialog>
+  </el-container>
 </template>
 
 <script>
-import './element.js';
+import './element';
+
 import Draggable from 'vuedraggable';
 import Icon from 'vue-awesome/components/Icon.vue';
-// eslint-disable-next-line
-import JSONEditor from "jsoneditor";
-// import Clipboard from 'clipboard';
-import WidgetConfig from './components/FormDesigner/WidgetConfig.vue';
-import FormConfig from './components/FormDesigner/FormConfig.vue';
+import JSONEditor from 'jsoneditor';
+import { DML, crud } from '../../api/public/crud';
+import { getTables, getFormKey, getFormDetail } from '../../api/system/form';
+import WidgetConfig from './WidgetConfig.vue';
+import FormConfig from './FormConfig.vue';
 // 最中心设计区域
-import WidgetForm from './components/FormDesigner/WidgetForm.vue';
-import CusDialog from './components/FormDesigner/CusDialog.vue';
-// import GenerateForm from './components/FormDesigner/GenerateForm.vue';
+import CusDialog from './CusDialog.vue';
+import GenerateForm from './GenerateForm.vue';
 import {
   basicComponents,
   layoutComponents,
   advanceComponents,
-} from './components/FormDesigner/componentsConfig';
+} from './componentsConfig';
+import WidgetForm from './WidgetForm.vue';
 import 'vue-awesome/icons/regular/keyboard';
 import 'vue-awesome/icons/regular/trash-alt';
 import 'vue-awesome/icons/regular/clone';
@@ -206,7 +255,7 @@ export default {
     FormConfig,
     WidgetForm,
     CusDialog,
-    // GenerateForm,
+    GenerateForm,
     Icon,
   },
   props: {
@@ -227,8 +276,6 @@ export default {
       formValues: {},
       // 对话框设计结构json
       formDesign: {},
-      // 对话框是否显示
-      visible: false,
       // 保存按钮Loading状态
       btnSaveIsLoading: false,
       // ---------------以下为原来的代码--------------
@@ -281,28 +328,14 @@ export default {
       allTables: [],
     };
   },
-  computed: {
-    // 对话框标题
-    dialogTitle() {
-      return this.dialogStatus === 0 ? '添加表格' : '编辑表格';
-    },
-  },
-  created() {
-    this.formValues = {};
-    this.widgetForm = {
-      list: [],
-      config: { labelWidth: 100, labelPosition: 'top', size: 'small' },
-    };
-
-    this.widgetFormSelect = '';
-  },
+  created() {},
   methods: {
     // 自动生成表单,默认一行两列
     autoGenerateFormByBackend(rows) {
       const formJson = {
         list: [],
         config: {
-          labelWidth: 110,
+          labelWidth: 140,
           labelPosition: 'right',
           size: 'small',
           isTableClass: true,
@@ -313,8 +346,9 @@ export default {
         let flag = false;
         const { COLUMN_COMMENT } = rows[i];
         // 遍历整个form
-        const COLUMN_NAME = `${this.formKeys.prefill
-          + rows[i].COLUMN_NAME.toLowerCase()}`;
+        const COLUMN_NAME = `${
+          this.formKeys.prefill + rows[i].COLUMN_NAME.toLowerCase()
+        }`;
         let COLUMN_NAME2 = null;
         let COLUMN_COMMENT2 = null;
         if (i + 1 <= rows.length && rows[i + 1]) {
@@ -322,8 +356,9 @@ export default {
 
           COLUMN_COMMENT2 = rows[i + 1].COLUMN_COMMENT;
           // 遍历整个form
-          COLUMN_NAME2 = `${this.formKeys.prefill
-            + rows[i + 1].COLUMN_NAME.toLowerCase()}`;
+          COLUMN_NAME2 = `${
+            this.formKeys.prefill + rows[i + 1].COLUMN_NAME.toLowerCase()
+          }`;
           i += 1;
         }
         const row = {
@@ -412,15 +447,15 @@ export default {
       this.previewVisible = true;
     },
     handleTest() {
-      // this.$refs.generateForm
-      //   .getData()
-      //   .then((data) => {
-      //     this.$alert(data, '').catch(() => {});
-      //     this.$refs.widgetPreview.end();
-      //   })
-      //   .catch(() => {
-      //     this.$refs.widgetPreview.end();
-      //   });
+      this.$refs.generateForm
+        .getData()
+        .then((data) => {
+          this.$alert(data, '').catch(() => {});
+          this.$refs.widgetPreview.end();
+        })
+        .catch(() => {
+          this.$refs.widgetPreview.end();
+        });
     },
     // 生成JSON按钮
     handleGenerateJson() {
@@ -438,6 +473,27 @@ export default {
         // const btnCopy = new Clipboard('#copybtn');
       });
     },
+    // 自动同步后端key
+    async handleGenerateKey(generateForm = false) {
+      this.formKeys.success = [];
+      const res = await getFormKey(this.formKeys.tableName);
+      if (generateForm) {
+        this.autoGenerateFormByBackend(res.data);
+        this.$alert('成功表格(默认为一行两列)');
+      } else {
+        for (const row of res.data) {
+          const { COLUMN_COMMENT } = row;
+          // 遍历整个form
+          const COLUMN_NAME = `${
+            this.formKeys.prefill + row.COLUMN_NAME.toLowerCase()
+          }`;
+          this.generateModle(this.widgetForm.list, COLUMN_COMMENT, COLUMN_NAME);
+        }
+        this.$alert(`识别成功以下字段:${this.formKeys.success.join(',')}`);
+        this.$refs.bindKeys.end();
+      }
+      this.formVisible = false;
+    },
 
     // 表单动态切换显示隐藏
     generateModle(list, name, model) {
@@ -458,6 +514,90 @@ export default {
         }
       }
     },
+    /**
+     * 显示对话框，父元素调用
+     *
+     * @param {Object} param 对话框保存时的参数
+     * @param {Number} status 对话框状态[添加:0,编辑:1]，必须是STATUS枚举
+     * @param {Object} formValues 编辑时传入所有字段的默认值
+     */
+    showDialog(param = {}, status = 0, formValues = {}) {
+      // 保存参数用于save方法
+      this.dialogParams = param;
+      this.dialogStatus = status;
+      getTables().then((res) => {
+        this.allTables = res.data;
+      });
+      // 请求对话框内的动态表单json
+      getFormDetail(this.tableName).then((res) => {
+        this.formDesign = JSON.parse(res.data.formJson);
+        if (this.dialogStatus === 1) {
+          // 填写编辑框，这里如果不用...拷贝会导致污染实参
+          this.formValues = { ...formValues };
+          // 下方设计区域
+          this.widgetForm = JSON.parse(formValues.formJson);
+        } else {
+          this.formValues = {};
+          this.widgetForm = {
+            list: [],
+            config: { labelWidth: 100, labelPosition: 'top', size: 'small' },
+          };
+        }
+        // 初始化右侧的配置区域
+        this.widgetFormSelect = '';
+      });
+    },
+    // 保存设计
+    btnSave_onClick() {
+      this.btnSaveIsLoading = true;
+      // 调用此方法验证表单数据和获取表单数据
+      this.$refs.generateDialogForm
+        .getData()
+        .then((formValue) => {
+          let type;
+          let msg;
+
+          // 根据对话框状态判断保存或编辑
+          if (this.dialogStatus === 0) {
+            type = DML.INSERT;
+            msg = '添加成功';
+          } else {
+            type = DML.UPDATE;
+            msg = '编辑成功';
+          }
+          let promise;
+          const opt = {
+            ...formValue,
+            ...this.dialogParams,
+          };
+          // 如果有代理的保存方法
+          if (this.promiseForSave) {
+            promise = this.promiseForSave(opt);
+          } else {
+            promise = crud(type, 'form', opt);
+          }
+
+          promise
+            .then(() => {
+              this.btnSaveIsLoading = false;
+              this.$message({
+                type: 'success',
+                message: msg,
+              });
+              this.$emit('afterSave', {
+                status: this.dialogStatus,
+                dialogParams: this.dialogParams,
+              });
+            })
+            .catch(() => {
+              this.btnSaveIsLoading = false;
+            });
+        })
+        .catch(() => {
+          // 数据校验失败
+          this.btnSaveIsLoading = false;
+        });
+    },
   },
   watch: {
     widgetForm: {
@@ -472,17 +612,48 @@ export default {
 </script>
 
 <style lang="scss">
-@import './components/FormDesigner/styles/cover.scss';
-@import './components/FormDesigner/styles/index.scss';
+@import "./styles/cover.scss";
+@import "./styles/index.scss";
 
 .widget-empty {
-  background: url('./components/FormDesigner/form_empty.png') no-repeat;
+  background: url("~./form_empty.png") no-repeat;
   background-position: 50% 30%;
 }
+.logo-container {
+  padding: 0 10px 10px;
+  border-bottom: 1px solid #f2f2f2;
+  .logo {
+    width: 36px;
+    height: 36px;
+    display: inline-block;
+  }
+  .title {
+    font-size: 24px;
+    vertical-align: top;
+    margin-left: 10px;
+    color: #9e9e9e;
+    line-height: 40px;
+    display: inline-block;
+  }
+}
 </style>
 <style scoped>
 .dialog >>> .el-dialog__body {
-  height: calc(100% - 54px);
-  padding: 0 10px;
+  height: 100%;
+  padding: 0;
+}
+.dialog >>> .el-dialog__header {
+  padding: 0;
+}
+.dialog >>> .el-dialog__headerbtn {
+  top: 13px;
+  right: 10px;
+  border: 1px solid gray;
+  background: #fffbd7;
+  color: black;
+  z-index: 100;
+}
+.form {
+  margin-top: 6px;
 }
 </style>
diff --git a/packages/FormDesigner/src/GenerateForm.vue b/packages/FormDesigner/src/GenerateForm.vue
new file mode 100644
index 0000000..65ee751
--- /dev/null
+++ b/packages/FormDesigner/src/GenerateForm.vue
@@ -0,0 +1,381 @@
+<!--
+@file 表单生成
+@author BoBo
+@createDate 2018年11月15日21:40:56
+@copyright GavinZhuLei
+部分修改重构
+原作者地址 https://github.com/GavinZhuLei/vue-form-making
+感谢大佬!
+
+-->
+<template>
+  <div class="table-form-wrapper">
+    <el-form ref="generateForm"
+             :class='{"table-form":data.config.isTableClass}'
+             :model="models"
+             :rules="rules"
+             :label-position="data.config.labelPosition"
+             :label-width="data.config.labelWidth?data.config.labelWidth+ 'px':'140px'"
+             size="small">
+      <!-- 遍历从父组件传入的data，data下有list和config两个属性，list下的每个对象是表示一行组件的集合 -->
+      <template v-for="item in this.data.list">
+        <!-- 如果这一行时网格grid布局 -->
+        <template v-if="item.type == 'grid'">
+          <!-- 每一行元素与基于el-row和el-col生成 -->
+          <el-row :key="item.key"
+                  type="flex"
+                  :gutter="item.options.gutter ? item.options.gutter : 0"
+                  :justify="item.options.justify"
+                  :align="item.options.align">
+            <!-- 生成每一行中的每一列元素 -->
+            <el-col v-for="(col, colIndex) in item.columns"
+                    :key="colIndex"
+                    :span="col.span">
+              <!-- 遍历生成该列所有组件 -->
+              <template v-for="citem in col.list">
+                <!-- 如果一个元素的type是blank就加载插槽 -->
+                <el-form-item v-if="citem.type=='blank'"
+                              v-show="!citem.hidden"
+                              :label="citem.name"
+                              :prop="citem.model"
+                              :key="citem.key">
+                  <slot :name="citem.model"
+                        :widget="citem"
+                        :model="models"></slot>
+                </el-form-item>
+                <!-- 意见框 -->
+                <el-form-item v-else-if="citem.type=='comment'"
+                              label=""
+                              label-width="0px"
+                              :prop="citem.model"
+                              :key="citem.key"
+                              style="margin-top: -10px;margin-bottom: -10px!important;margin-left:-1px">
+                  <slot name="comment"></slot>
+                </el-form-item>
+                <!-- 正常组件通过GenerateFormItem生成 -->
+                <GenerateFormItem v-else
+                                  :key="citem.key"
+                                  :models.sync="models"
+                                  :remote="remote"
+                                  :rules="rules"
+                                  :widget="citem"
+                                  :readOnly="setReadOnly"
+                                  @btnOnClick="btnOnClick"
+                                  v-show="!citem.hidden"
+                                  :formTableConfig="formTableConfig">
+                  <template slot="tree-select-value-label"
+                            slot-scope="{ node }">
+                    <slot name="tree-select-value-label"
+                          :node="node"></slot>
+                  </template>
+                </GenerateFormItem>
+              </template>
+            </el-col>
+          </el-row>
+        </template>
+        <!-- 不嵌套栅格布局时自定义组件 -->
+        <template v-else-if="item.type === 'blank'">
+          <el-form-item :label="item.name"
+                        :prop="item.model"
+                        :key="item.key"
+                        v-show="!item.hidden">
+            <slot :name="item.model"
+                  :model="models"
+                  :widget="item"></slot>
+          </el-form-item>
+        </template>
+        <!-- 普通行布局方式 -->
+        <template v-else>
+          <GenerateFormItem :key="item.key"
+                            :formTableConfig="formTableConfig"
+                            :models.sync="models"
+                            :rules="rules"
+                            :readOnly="setReadOnly"
+                            :widget="item"
+                            :remote="remote"
+                            @btnOnClick="btnOnClick"
+                            v-show="!item.hidden"></GenerateFormItem>
+        </template>
+      </template>
+    </el-form>
+  </div>
+</template>
+
+<script lang="ts">
+import {
+  Component, Vue, Prop, Watch,
+} from 'vue-property-decorator';
+import GenerateFormItem from './GenerateFormItem.vue';
+
+@Component({
+  components: {
+    GenerateFormItem,
+  },
+})
+export default class GenerateForm extends Vue {
+  $refs!: {
+    generateForm: HTMLFormElement;
+  };
+
+  @Prop({
+    type: Object,
+    default: () => ({}),
+  })
+  data: any;
+
+  // 表单初始值
+  @Prop({
+    type: Object,
+    default: () => ({}),
+  })
+  value: any;
+
+  // 表单当前实时对象
+
+  @Prop({
+    type: Object,
+    default: () => ({}),
+  })
+  entity: any;
+  /**
+   * 设置只读,默认Null为全部不只读,传{}为全部只读
+   * 以下是分别设置黑白名单
+   * {
+   *  whiteList:[],  //设置需要只读的
+   *  blackList:[]   //设置不需要只读的
+   * }
+   */
+  // 表单当前实时对象
+
+  @Prop({
+    type: Object,
+    default: null,
+  })
+  setReadOnly: any;
+
+  // 设置隐藏区域
+
+  @Prop({
+    type: Array,
+    default: () => [],
+  })
+  setHidden: any;
+  // 远端数据
+
+  @Prop({
+    type: Object,
+    default: () => ({}),
+  })
+  remote: any;
+
+  // 表格组件 tableParams以及prefill
+  @Prop({
+    type: Object,
+    default: () => ({}),
+  })
+  formTableConfig: any;
+
+  models: any = {};
+
+  rules: any = {};
+
+  created() {
+    // 根据数据结构生成给子组件的数据源
+    this.generateModle(this.data.list);
+  }
+
+  generateModle(genList) {
+    const customValidate = (rule, value, callback) => {
+      const { type } = rule;
+      if ('string,number'.includes(type)) {
+        if (rule.required) {
+          callback(new Error(rule.message));
+        } else {
+          callback();
+        }
+      }
+    };
+    // 遍历设计的结构
+    for (let i = 0; i < genList.length; i += 1) {
+      if (genList[i].type === 'grid') {
+        genList[i].columns.forEach((item) => {
+          this.generateModle(item.list);
+        });
+      } else {
+        // 如果是自定义组件,model值为slotName,不在model中赋属性值
+        if (Object.keys(this.value).indexOf(genList[i].model) >= 0 && genList[i].type !== 'blank') {
+          // 3.后端要求下拉列表传值时要同时给key和value，为了实现此需求的另外两处赋值在GenerateFormItem.vue中
+          if (genList[i].type === 'select') {
+            const dict = `${genList[i].model}dict`;
+            this.models[dict] = this.value[dict];
+          }
+          this.initFormValue(genList[i]);
+        } else {
+          this.setDefaultValue(genList[i]);
+        }
+        const row = genList[i];
+        // Props单独设置只读
+        if (this.setReadOnly) {
+          const { whiteList, blackList } = this.setReadOnly;
+          // 默认空对象 代表全部只读
+          if (whiteList == null && blackList == null) {
+            row.options.disabled = true;
+          } else if (blackList && !blackList.includes(row.model)) {
+            row.options.disabled = true;
+          } else if (whiteList && whiteList.includes(row.model)) {
+            row.options.disabled = true;
+          }
+        }
+        // Props 单独设置隐藏
+        if (this.setHidden) {
+          // 默认空对象 代表全部只读
+          if (this.setHidden.includes(row.model)) {
+            row.hidden = true;
+          }
+        }
+        if (this.rules[genList[i].model]) {
+          this.rules[genList[i].model] = [
+            ...this.rules[genList[i].model],
+            ...genList[i].rules.map((item) => {
+              if (item.pattern) {
+                // eslint-disable-next-line no-eval
+                const rule = { ...item, pattern: eval(item.pattern) };
+                rule.trigger = 'blur';
+                return rule;
+              }
+              if ('string,number'.includes(item.type)) {
+                item.validator = customValidate;
+              }
+              return { ...item };
+            }),
+          ];
+        } else {
+          this.rules[genList[i].model] = [
+            ...genList[i].rules.map((item) => {
+              if (item.pattern) {
+                // eslint-disable-next-line no-eval
+                const rule = { ...item, pattern: eval(item.pattern) };
+                rule.trigger = 'blur';
+                return rule;
+              }
+              if ('string,number'.includes(item.type)) {
+                item.validator = customValidate;
+              }
+              return { ...item };
+            }),
+          ];
+        }
+      }
+    }
+  }
+
+  /**
+   * 如果select,radio,checkbox等组件为多选情况  后台返回逗号分隔字符串 => 数组
+   * 如果 this.value为null 则会按默认值赋值相应字段
+   * @param {String} 当前表单json.list
+   */
+  initFormValue(row) {
+    if (row.options.multiple || 'cascader,checkbox'.includes(row.type)) {
+      if (this.value[row.model] != null && this.value[row.model] !== '') {
+        this.models[row.model] = this.value[row.model].split(',');
+      } else {
+        this.models[row.model] = [];
+      }
+    } else if (this.value[row.model] == null || this.value[row.model] === '') {
+      this.setDefaultValue(row);
+    } else {
+      this.models[row.model] = this.value[row.model];
+    }
+  }
+
+  // 多选情况下数组转字符串
+  formValueToString() {
+    const model = { ...this.models };
+    Object.keys(model).forEach((k) => {
+      if (Array.isArray(model[k])) {
+        model[k] = model[k].toString();
+      }
+    });
+    return model;
+  }
+
+  // 先验证再获取表单内容
+  getData() {
+    return new Promise((resolve, reject) => {
+      this.$refs.generateForm.validate((valid) => {
+        if (valid) {
+          resolve(this.formValueToString());
+        } else {
+          // 校验失败时focus到文本框
+          // 注意此处没有考虑textarea的情况,多行文本会失败
+          setTimeout(() => {
+            const isError:any = document.getElementsByClassName('is-error');
+            isError[0].querySelector('input').focus();
+          }, 100);
+          reject(new Error('请检查必填项是否填写').message);
+        }
+      });
+    });
+  }
+
+  // 重置表单
+  resetForm() {
+    this.$refs.generateForm.resetFields();
+  }
+
+  // 不经过验证直接获取表单内容
+  getDataWithoutValidate() {
+    return new Promise(resolve => resolve(this.formValueToString()));
+  }
+
+  // 生成的按钮点击
+  btnOnClick(widget) {
+    this.$emit('btnOnClick', widget);
+  }
+
+  // 表单默认值回填单独拉出来封装
+  setDefaultValue(config) {
+    // 如果时间选择器需要默认值,默认回填当前日期
+    if (config.type === 'date' && config.options.defaultValue) {
+      const { format } = config.options;
+      if (format && format !== '') {
+        this.models[config.model] = this.dayjs().format(format.toUpperCase());
+      }
+    } else {
+      let { defaultValue } = config.options;
+      // 如果默认值设置为$开头,则表示要读取vuex中的全局变量
+      // 如设置为 $deptname 则读取 this.$store.getters.deptname
+      if (typeof defaultValue === 'string' && defaultValue.includes('$')) {
+        defaultValue = this.$store.getters[defaultValue.replace('$', '')];
+      } else if (typeof defaultValue === 'boolean') {
+        defaultValue = '';
+      } else if (defaultValue === '') {
+        defaultValue = null;
+      }
+      this.models[config.model] = defaultValue;
+    }
+  }
+
+  @Watch('value', {
+    deep: true,
+    immediate: true,
+  })
+  valueOnChange(val) {
+    this.$nextTick(() => {
+      this.$refs.generateForm.clearValidate();
+    });
+    this.models = { ...this.models, ...val };
+  }
+
+  @Watch('models', {
+    deep: true,
+    immediate: true,
+  })
+  modelsOnChange(val) {
+    this.$emit('update:entity', val);
+  }
+}
+</script>
+<style lang="scss" scoped>
+@import './styles/table-form.scss';
+</style>
diff --git a/packages/FormDesigner/src/components/FormDesigner/GenerateFormItem.vue b/packages/FormDesigner/src/GenerateFormItem.vue
similarity index 55%
rename from packages/FormDesigner/src/components/FormDesigner/GenerateFormItem.vue
rename to packages/FormDesigner/src/GenerateFormItem.vue
index bb1e82c..0047ce5 100644
--- a/packages/FormDesigner/src/components/FormDesigner/GenerateFormItem.vue
+++ b/packages/FormDesigner/src/GenerateFormItem.vue
@@ -1,15 +1,17 @@
 <!--
- * @file: 根据Json生成表单具体组件
- * @copyright: NanJing Anshare Tech .Com
- * @author: BoBo
- * @Date: 2020年09月30 17:26:55
+@file 动态表单最小粒度元素生成
+@author BoBo
+@createDate 2018年11月15日10:17:01
+@copyright GavinZhuLei
+部分修改重构
+原作者地址 https://github.com/GavinZhuLei/vue-form-making
+感谢大佬!
 -->
-
 <template>
   <el-form-item :prop="widget.type == 'button'?undefined:widget.model"
                 :label-width="labelWidth">
     <template #label>
-      {{label}}
+      <span v-html="label"></span>
       <el-popover placement="top-start"
                   title="输入提示"
                   v-if="widget.options.tips"
@@ -17,7 +19,8 @@
                   trigger="hover">
         <i class="el-icon el-icon-question"
            slot="reference"></i>
-        <div style="color:#8492a6" v-html="widget.options.tips"></div>
+        <div style="color:#8492a6"
+             v-html="widget.options.tips"></div>
       </el-popover>
     </template>
     <template v-if="widget.type == 'input'">
@@ -52,7 +55,7 @@
     </template>
     <template v-if="widget.type == 'select'">
       <el-select v-model="dataModel"
-                  default-first-option
+                 default-first-option
                  :disabled="widget.options.disabled"
                  :multiple="widget.options.multiple"
                  allow-create
@@ -64,8 +67,7 @@
                  filterable
                  :data-searchable="widget.options.remoteSearchFunc
                  &&widget.options.remoteSearchFunc!=''
-                 &&widget.options.remote === 'search'"
-                 :filter-method="selectFilter">
+                 &&widget.options.remote === 'search'">
         <el-option v-for="item in optionsList"
                    :key="item.value"
                    :value="item.value"
@@ -80,8 +82,7 @@
     </template>
     <template v-if="widget.type == 'textarea'">
       <el-input type="textarea"
-                :rows="5"
-                :autosize="{ minRows: 4, maxRows: 15}"
+                :autosize="{ minRows: 5}"
                 v-model="dataModel"
                 :disabled="widget.options.disabled"
                 :readonly="widget.options.readonly"
@@ -90,7 +91,7 @@
     </template>
 
     <template v-if="widget.type == 'number'">
-      <el-input-number v-model="widget.options.defaultValue"
+      <el-input-number v-model="dataModel"
                        :style="{width: widget.options.width}"
                        :step="widget.options.step"
                        :disabled="widget.options.disabled"
@@ -204,24 +205,20 @@
                    :clearable="widget.options.clearable"
                    :placeholder="widget.options.placeholder"
                    :style="{width: widget.options.width}"
+                   :separator="widget.options.separator == null ?'/':widget.options.separator"
                    :options="widget.options.remoteOptions"
                    filterable
                    :props="{ checkStrictly: true }">
       </el-cascader>
     </template>
     <template v-if="widget.type == 'table'">
-      <CrudTable :close_on_click_modal="false"
+      <CrudTable :dialogCloseOnClickModal="false"
+                 ref="table"
                  :tableName="widget.options.tableName"
                  :tableDesignerName="widget.options.tableDesignerName"
                  :dialogFormDesignerName="widget.options.dialogFormDesignerName"
-                 appendToBody
-                 :visibleList="{
-                          conditionTitle:false,
-                          btnExport:false,
-                          ...widget.options.visibleList,
-                          btnAdd:false,
-                          btnAddOnColumnHeader:widget.options.visibleList.btnAdd,
-                        }"
+                 dialogAppendToBody
+                 :visibleList="visibleList"
                  :showPagination="widget.options.showPagination"
                  :tableParams="getTableParams"
                  :prefill="getTablePrefill"
@@ -237,7 +234,11 @@
                   :maxHeight="+widget.options.maxHeight"
                   :multiple="widget.options.multiple"
                   :normalizer="normalizer"
-                  :loadOptions="()=>{}"
+                  :append-to-body="widget.options.appendToBody"
+                  :loadOptions="({ action, parentNode, callback })=> {
+                    if(parentNode.children )  parentNode.children = []
+                     callback()
+                  }"
                   valueConsistsOf="ALL"
                   :clearable="widget.options.clearable"
                   :searchable="widget.options.searchable"
@@ -254,18 +255,86 @@
       </template> -->
       </TreeSelect>
     </template>
+    <template v-if="widget.type=='richtext'">
+      <Tinymce :height="400"
+               v-model="dataModel"
+               :readonly="widget.options.readonly"></Tinymce>
+
+    </template>
+    <template v-if="widget.type=='upload'">
+      <!-- 附件上传(注意初始值prefill必须传入id) -->
+      <FileUpload :visibleList="fileVisibleList"
+                  :fileType='widget.options.fileType'
+                  :readOnly="widget.options.readonly || readOnly === {}"
+                  showPagination
+                  :resourceid="models[widget.options.resourceId]"></FileUpload>
+    </template>
   </el-form-item>
 </template>
 
-<script>
+<script lang="ts">
+import {
+  Component, Vue, Prop, Watch,
+} from 'vue-property-decorator';
 import TreeSelect from '@riophae/vue-treeselect';
-
+import Tinymce from './components/Tinymce/index.vue'; // 富文本编辑器
+import FileUpload from './components/FileUpload/FileUpload.vue';
+import { DML, crud } from '../../api/public/crud';
 // 高级查询单个查询内容
 import '@riophae/vue-treeselect/dist/vue-treeselect.css';
 
-export default {
-  props: ['widget', 'models', 'rules', 'remote', 'formTableConfig'],
-  data() {
+@Component({
+  components: {
+    TreeSelect,
+    Tinymce,
+    FileUpload,
+  },
+})
+export default class GenerateFormItem extends Vue {
+    $refs!: {
+    table: HTMLFormElement;
+  };
+
+  @Prop({
+    type: Object,
+    default: () => ({}),
+  })
+  widget: any;
+
+  @Prop({
+    type: Object,
+    default: () => ({}),
+  })
+  models: any;
+
+  @Prop({
+    type: Object,
+    default: () => ({}),
+  })
+  remote: any;
+
+  @Prop({
+    type: Object,
+    default: () => ({}),
+  })
+  formTableConfig: any;
+
+  @Prop({
+    type: Object,
+    default: () => ({}),
+  })
+  readOnly: any;
+
+  // 当前组件对象
+  dataModel: any= '';
+
+  copyOption: any = []; // 备份一份初始选项
+
+  visible = false;
+
+  normalizer: any;
+
+  initData() {
     let normalizer;
     if (this.widget.type === 'treeselect') {
       const { value, label } = this.widget.options.props;
@@ -274,18 +343,54 @@ export default {
         label: node[value],
       });
     }
+    let model = this.models[this.widget.model];
+
+    if (this.widget.type === 'date') {
+      // 此处防止传入的值为非正常时间格式导致日历控件报错
+      // new Date校验以下四种情况yyyy-MM-dd yyyy-M-d yyyy/MM/dd yyyy/M/d yyyy-MM yyyy-M yyyy/MM yyyy/M
+      // 正则表达式校验  yyyy年MM月dd日  yyyy年M月d日情况 yyyy年MM月 yyyy年M月
+      const reg = /^([1-9]\d{3})年(\d{1,2})月(\d{1,2})日$/;
+      const regForYYYYMM = /^([1-9]\d{3})年(\d{1,2})月$/;
+      const regForYYYYMMDD = /^([1-9]\d{3})(\d{1,2})(\d{1,2})$/;
+      const isValid = !this.dayjs(model).isValid() || reg.test(model) || regForYYYYMM.test(model) || regForYYYYMMDD.test(model);
+      if (!isValid) {
+        model = '';
+      }
+    }
+
+    this.normalizer = normalizer;
+    this.dataModel = model;
+  }
 
-    return {
-      dataModel: this.models[this.widget.model],
-      copyOption: [], // 备份一份初始选项
-      visible: false,
-      normalizer,
-    };
-  },
   created() {
+    this.initData();
     this.copyOption = this.widget.options.options;
     this.visible = false;
-    if (
+    // 请求字典
+    if ('radio,select,checkbox,cascader'.includes(this.widget.type) && this.widget.options.remote === 'dict' && this.widget.options.dictType) {
+      crud(DML.SELECT, 'ad_codelist', {
+        searchCondition: [
+          {
+            field: 'codeType',
+            operator: 'eq',
+            value: this.widget.options.dictType,
+          },
+        ],
+      }).then((res) => {
+        if (this.widget.type === 'cascader') {
+          this.widget.options.remoteOptions = JSON.parse(res.data.list[0].codevalue);
+          // 请求完成后再渲染组件
+          this.visible = true;
+        } else {
+          this.widget.options.remoteOptions = res.data.list.map(item => ({
+            value: item.codeValue,
+            label: item.codeName,
+          }));
+        }
+
+        this.copyOption = this.widget.options.remoteOptions;
+      });
+    } else if (
       this.widget.options.remote === 'custom'
       && this.remote[this.widget.options.remoteFunc]
       && (this.widget.options.remoteSearchFunc == null || this.widget.options.remoteSearchFunc === '')
@@ -293,6 +398,8 @@ export default {
       // 请求自定义接口
       this.remote[this.widget.options.remoteFunc]((data) => {
         if (this.widget.type === 'cascader' || this.widget.type === 'treeselect') {
+          // 此处递归洗数据,去掉children为null的情况
+          this.diGuiTree(data);
           this.widget.options.remoteOptions = data;
           // 请求完成后再渲染组件
           this.visible = true;
@@ -300,7 +407,7 @@ export default {
           this.widget.options.remoteOptions = data.map(item => ({
             value: item[this.widget.options.props.value],
             label: item[this.widget.options.props.label],
-            rightLabel: item.rightLabel,
+            rightLabel: item[this.widget.options.props.rightLabel] || '',
           }));
         }
         this.copyOption = this.widget.options.remoteOptions;
@@ -314,52 +421,91 @@ export default {
           this.widget.options.remoteOptions = data.map(item => ({
             value: item[this.widget.options.props.value],
             label: item[this.widget.options.props.label],
-            rightLabel: item.rightLabel,
+            rightLabel: item[this.widget.options.props.rightLabel],
           }));
           this.copyOption = this.widget.options.remoteOptions;
         }, this.dataModel);
       }
     }
-  },
-  components: {
-    TreeSelect,
-  },
-  computed: {
-    // 返回当前下拉列表数据
-    optionsList() {
-      if ('dict,custom,search'.includes(this.widget.options.remote)) {
-        return this.widget.options.remoteOptions;
-      }
-      return this.widget.options.options;
-    },
-    // 左侧label内容,文本以及意见框组件的时候label为空
-    label() {
-      return 'text,comment'.includes(this.widget.type) ? '' : this.widget.name;
-    },
-    // 日期选择器pickOptions
-    pickerOptions() {
-      const { range } = this.widget.options;
-      if (range != null && range !== '') {
-        return {
-          disabledDate(time) {
-            if (range === 'smaller') {
-              return time.getTime() >= Date.now();
-            }
-            if (range === 'greater') {
-              return time.getTime() <= Date.now() - 24 * 3600 * 1000;
-            }
-            return true;
-          },
-        };
+  }
+
+  get visibleList() {
+    const view = {
+      conditionTitle: false,
+      btnExport: false,
+      ...this.widget.options.visibleList,
+      btnAdd: false,
+      btnAddOnColumnHeader: this.widget.options.visibleList.btnAdd,
+      btnImport: this.widget.options.visibleList.btnImport,
+    };
+    if ((this.readOnly && Object.keys(this.readOnly).length === 0) || this.widget.options.readonly) {
+      view.btnAddOnColumnHeader = false;
+      view.actionColumnBtnDel = false;
+      view.actionColumnBtnEdit = false;
+      view.actionColumnBtnDetail = true;
+      view.btnImport = false;
+    }
+    return view;
+  }
+
+  // 附件列表在只读模式下隐藏增删改按钮
+  get fileVisibleList() {
+    const view: any = {};
+    if ((this.readOnly && Object.keys(this.readOnly).length === 0) || this.widget.options.readonly) {
+      view.upload = false;
+      view.btnEdit = false;
+      view.btnDel = false;
+    }
+    return view;
+  }
+
+  // 返回当前下拉列表数据
+  get optionsList() {
+    if ('dict,custom,search'.includes(this.widget.options.remote)) {
+      return this.widget.options.remoteOptions;
+    }
+    return this.widget.options.options;
+  }
+
+  // 左侧label内容,文本以及意见框组件的时候label为空
+  get label() {
+    return 'text,comment'.includes(this.widget.type) ? '' : this.widget.name;
+  }
+
+  // 日期选择器pickOptions
+  get pickerOptions() {
+    const { range } = this.widget.options;
+    if (range != null && range !== '') {
+      return {
+        disabledDate(time) {
+          if (range === 'smaller') {
+            return time.getTime() >= Date.now();
+          }
+          if (range === 'greater') {
+            return time.getTime() <= Date.now() - 24 * 3600 * 1000;
+          }
+          return true;
+        },
+      };
+    }
+    return {};
+  }
+
+  get labelWidth() {
+    const { type, labelWidth } = this.widget;
+    let label = 'text,comment'.includes(type) ? '0px' : labelWidth || undefined;
+    if (label) {
+      label = label.toString();
+      if (!label.includes('px')) {
+        label += 'px';
       }
-      return {};
-    },
-    labelWidth() {
-      return 'text,comment'.includes(this.widget.type) ? '0px' : undefined;
-    },
-    // 子表params
-    getTableParams() {
-      /*  如果外侧传入优先使用传入的params
+    }
+    return label;
+  }
+
+  // 子表params
+  get getTableParams() {
+    /*  如果外侧传入优先使用传入的params
           此处考虑到一个表单内有多个子表的情况
           通过表格组件中"后端绑定key输入框"中的内容作为子表唯一标识
           格式例如
@@ -382,118 +528,157 @@ export default {
           }
         }
        */
-      if (this.formTableConfig[this.widget.model] && this.formTableConfig[this.widget.model].tableParams) {
-        return this.formTableConfig[this.widget.model].tableParams;
+    const table = this.formTableConfig[this.widget.model];
+    if (table) {
+      const { tableParams } = table;
+      if (tableParams) {
+        return tableParams;
       }
-      // 没有传入则直接使用配置的
-      // 格式为 子表字段,主表字段 多个用|隔开
-      // 例如 subid,id|subid2,id2 格式
-      const obj = {};
-      // 默认按照|分隔参数名
-      const { tableParams } = this.widget.options;
-      if (tableParams && tableParams !== '') {
-        const params = tableParams.split('|');
-        for (const group of params) {
-          if (group && group !== '') {
-            const key = group.split(',');
-            obj[key[0]] = this.models[key[1]];
-          }
+    }
+    // 没有传入则直接使用配置的
+    // 格式为 子表字段,主表字段 多个用|隔开
+    // 例如 subid,id|subid2,id2 格式
+    const obj = {};
+    // 默认按照|分隔参数名
+    const { tableParams } = this.widget.options;
+    if (tableParams) {
+      const params = tableParams.split('|');
+      for (const group of params) {
+        if (group) {
+          const key = group.split(',');
+          const [field, value] = key;
+          // 如果包含中文则默认为直接传参,否则读取相关字段值
+          const result = this.isChinese(value) ? (obj[field] = value) : (obj[field] = this.models[value]);
         }
       }
-      return obj;
-    },
-    // 子表prefill
-    getTablePrefill() {
-      // 如果外侧传入了则优先使用外侧传入的params
-      if (this.formTableConfig[this.widget.model] && this.formTableConfig[this.widget.model].prefill) {
-        return this.formTableConfig[this.widget.model].prefill;
-      }
-      // 没有传入则直接使用配置的 例如 subid,id|subid2,id2 格式
-      const obj = {};
-      // 默认按照|分隔参数名
-      const { prefill } = this.widget.options;
-      if (prefill && prefill !== '') {
-        const fills = prefill.split('|');
-        for (const group of fills) {
-          if (group && group !== '') {
-            const key = group.split(',');
-            obj[key[0]] = this.models[key[1]];
-          }
+    }
+    return obj;
+  }
+
+  // 子表prefill
+  get getTablePrefill() {
+    // 如果外侧传入了则优先使用外侧传入的params
+    if (this.formTableConfig[this.widget.model] && this.formTableConfig[this.widget.model].prefill) {
+      return this.formTableConfig[this.widget.model].prefill;
+    }
+    // 没有传入则直接使用配置的 例如 subid,id|subid2,id2 格式
+    const obj = {};
+    // 默认按照|分隔参数名
+    const { prefill } = this.widget.options;
+    if (prefill && prefill !== '') {
+      const fills = prefill.split('|');
+      for (const group of fills) {
+        if (group) {
+          const key = group.split(',');
+          const [field, value] = key;
+          // 如果包含中文则默认为直接传参,否则读取相关字段值
+          const result = this.isChinese(value) ? (obj[field] = value) : (obj[field] = this.models[value]);
         }
       }
-      return obj;
-    },
-  },
-  methods: {
-    // 1.后端要求下拉列表传值时要同时给key和value
-    currentSel(sel, w) {
-      this.models[`${w.model}dict`] = this.getValueByKey(sel);
-    },
-    // 按钮点击
-    btnOnClick(widget) {
-      this.$emit('btnOnClick', widget);
-    },
-    // 根据选中的key获取value
-    getValueByKey(key) {
-      if (key === '' || key == null) {
-        return null;
-      }
-      // 根据key找到下拉列表项
-      const selected = this.optionsList.find(item => item.value === key);
-      let label;
-      // 如果找到匹配列表项
-      if (selected) {
-        ({ label } = selected);
-      } else {
-        // this.$notify({
-        //   title: `[${this.widget.name}]匹配菜单项失败`,
-        //   message: `${key}无法找到对应的值`,
-        //   duration: 5000,
-        // });
-      }
-      return label;
-    },
-    // 查询远端数据
-    search(txt) {
-      this.remote[this.widget.options.remoteSearchFunc]((data) => {
-        this.widget.options.remoteOptions = data.map(item => ({
-          value: item[this.widget.options.props.value],
-          label: item[this.widget.options.props.label],
-          rightLabel: item.rightLabel,
-        }));
-      }, txt);
-    },
-    selectFilter(val) {
+    }
+    return obj;
+  }
+
+  // 判断是否含有中文
+  isChinese(temp) {
+    const re = /[^\u4e00-\u9fa5]/;
+    if (re.test(temp)) return false;
+    return true;
+  }
+
+  diGuiTree(tree) {
+    // 递归便利树结构
+    tree.forEach((item) => {
+      // eslint-disable-next-line no-unused-expressions
+      item.children === '' || item.children === undefined || item.children === null ? delete item.children : this.diGuiTree(item.children);
+    });
+  }
+
+  // 1.后端要求下拉列表传值时要同时给key和value
+  currentSel(sel, w) {
+    this.models[`${w.model}dict`] = this.getValueByKey(sel);
+  }
+
+  // 按钮点击
+  btnOnClick(widget) {
+    this.$emit('btnOnClick', widget);
+  }
+
+  // 根据选中的key获取value
+  getValueByKey(key) {
+    if (key === '' || key == null) {
+      return null;
+    }
+    // 根据key找到下拉列表项
+    const selected = this.optionsList.find(item => item.value === key);
+    let label;
+    // 如果找到匹配列表项
+    if (selected) {
+      ({ label } = selected);
+    } else {
+      // this.$notify({
+      //   title: `[${this.widget.name}]匹配菜单项失败`,
+      //   message: `${key}无法找到对应的值`,
+      //   duration: 5000,
+      // });
+    }
+    return label;
+  }
+
+  // 查询远端数据
+  search(txt) {
+    this.remote[this.widget.options.remoteSearchFunc]((data) => {
+      this.widget.options.remoteOptions = data.map(item => ({
+        value: item[this.widget.options.props.value],
+        label: item[this.widget.options.props.label],
+        rightLabel: item.rightLabel,
+      }));
+    }, txt);
+  }
+
+  selectFilter(val) {
+    if (val) {
       const arr = this.copyOption.filter(item => this.$pinyinmatch.match(item.label || item.value, val));
       this.widget.options.remoteOptions = arr;
       this.widget.options.options = arr;
-    },
-  },
-  watch: {
-    dataModel: {
-      deep: true,
-      handler(val) {
-        this.models[this.widget.model] = val;
-        this.$emit('update:models', {
-          ...this.models,
-          [this.widget.model]: val,
-        });
-      },
-    },
-    models: {
-      deep: true,
-      handler(val) {
-        this.dataModel = val[this.widget.model];
-        // if (this.widget.type === 'select') {
-        //   // 2.后端要求下拉列表传值时要同时给key和value
-        //   this.models[`${this.widget.model}dict`] = this.getValueByKey(
-        //     val[this.widget.model],
-        //   );
-        // }
-      },
-    },
-  },
-};
+    } else {
+      this.widget.options.options = this.copyOption;
+      this.widget.options.remoteOptions = this.copyOption;
+    }
+  }
+
+  @Watch('dataModel', {
+    // deep: true,
+  })
+  dataModelHandler(val) {
+    this.$emit('update:models', {
+      ...this.models,
+      [this.widget.model]: val,
+    });
+  }
+
+  @Watch('models', {
+    // deep: true,
+  })
+  modelsHandler(val) {
+    if (this.widget.options.multiple || 'cascader,checkbox'.includes(this.widget.type)) {
+      const value = val[this.widget.model];
+      this.dataModel = typeof value === 'string' ? value.split(',') : value;
+    } else {
+      this.dataModel = val[this.widget.model];
+    }
+  }
+
+  // 如果表格预设参数发生变化 自动刷新表格
+  @Watch('getTableParams', {
+    deep: true,
+  })
+  getTableParamsHandler(val, oldVal) {
+    if (JSON.stringify(val) !== JSON.stringify(oldVal)) {
+      this.$refs.table.tableReload();
+    }
+  }
+}
 </script>
 
 <style rel="stylesheet/scss" lang="scss" scoped>
diff --git a/packages/FormDesigner/src/components/FormDesigner/WidgetConfig.vue b/packages/FormDesigner/src/WidgetConfig.vue
similarity index 88%
rename from packages/FormDesigner/src/components/FormDesigner/WidgetConfig.vue
rename to packages/FormDesigner/src/WidgetConfig.vue
index 1303bab..7d065d4 100644
--- a/packages/FormDesigner/src/components/FormDesigner/WidgetConfig.vue
+++ b/packages/FormDesigner/src/WidgetConfig.vue
@@ -1,13 +1,15 @@
 <!--
  * @file: 表单设计器右侧配置项区域
- * @copyright: NanJing Anshare Tech .Com
  * @author: BoBo
  * @Date: 2019-07-09 14:30:43
+ * @copyright GavinZhuLei
+  部分修改重构
+  原作者地址 https://github.com/GavinZhuLei/vue-form-making
+  感谢大佬!
  -->
 <template>
   <div v-if="show">
-    <el-form label-position="left"
-             label-width="100px">
+    <el-form label-position="top" class="form">
       <el-form-item label="是否隐藏"
                     v-if="data.type != 'table'">
         <el-switch v-model="data.hidden"></el-switch>
@@ -24,11 +26,9 @@
                     v-if="Object.keys(data.options).indexOf('btnCommand')>=0">
         <el-input v-model="data.options.btnCommand"></el-input>
       </el-form-item>
-      <el-form-item label="文字宽度">
-        <el-input-number v-model="data.labelWidth"
-                         :min="0"
-                         :max="200"
-                         :step="10"></el-input-number>
+      <el-form-item label="label宽度">
+        <el-input v-model="data.labelWidth"
+                  placeholder="label宽度"></el-input>
       </el-form-item>
       <el-form-item label="组件宽度"
                     v-if="Object.keys(data.options).indexOf('width')>=0">
@@ -48,8 +48,9 @@
                     && (data.type!='time' || data.type!='date')">
         <el-input v-model="data.options.placeholder"></el-input>
       </el-form-item>
-       <el-form-item label="tips提示">
-        <el-input type="textarea" v-model="data.options.tips"></el-input>
+      <el-form-item label="tips提示">
+        <el-input type="textarea"
+                  v-model="data.options.tips"></el-input>
       </el-form-item>
       <el-form-item label="布局方式"
                     v-if="Object.keys(data.options).indexOf('inline')>=0">
@@ -88,11 +89,16 @@
         <el-switch v-model="data.options.multiple"
                    @change="handleSelectMuliple"></el-switch>
       </el-form-item>
+      <el-form-item label="分隔符"
+                    v-if="data.options.separator">
+        <el-input type="input"
+                  v-model="data.options.separator"></el-input>
+      </el-form-item>
       <el-form-item label="是否可创建"
                     v-if="data.type=='select'">
         <el-switch v-model="data.options.allowCreate"></el-switch>
       </el-form-item>
-       <el-form-item label="启用按钮样式"
+      <el-form-item label="启用按钮样式"
                     v-if="data.type=='checkbox'">
         <el-switch v-model="data.options.buttonStyle"></el-switch>
       </el-form-item>
@@ -153,6 +159,11 @@
                       v-model="data.options.props.label">
               <template slot="prepend">标签</template>
             </el-input>
+            <el-input size="mini"
+                      style=""
+                      v-model="data.options.props.rightLabel">
+              <template slot="prepend">右侧标签</template>
+            </el-input>
           </div>
         </template>
         <template v-else-if="data.options.remote=='search'">
@@ -173,6 +184,11 @@
                       v-model="data.options.props.label">
               <template slot="prepend">标签</template>
             </el-input>
+            <el-input size="mini"
+                      style=""
+                      v-model="data.options.props.rightLabel">
+              <template slot="prepend">右侧标签</template>
+            </el-input>
           </div>
         </template>
         <template v-else>
@@ -356,7 +372,7 @@
         </el-form-item>
       </template>
 
-      <template v-if="data.type=='blank'">
+      <!-- <template v-if="data.type=='blank'">
         <el-form-item label="绑定数据类型">
           <el-select v-model="data.options.defaultType">
             <el-option value="String"
@@ -367,7 +383,7 @@
                        label="数组"></el-option>
           </el-select>
         </el-form-item>
-      </template>
+      </template> -->
 
       <template v-if="data.type == 'grid'">
         <el-form-item label="栅格间隔">
@@ -432,13 +448,21 @@
       </template>
 
       <template v-if="data.type != 'grid'">
-
-        <el-form-item v-if="data.type != 'button'"
+        <el-form-item v-if="data.type != 'button' && data.type != 'table' && data.type != 'upload' "
                       label="后端接口Key">
           <el-input v-model="data.model"></el-input>
         </el-form-item>
+        <el-form-item v-if="data.type === 'upload'"
+                      label="关联resourceID字段名">
+          <el-input v-model="data.options.resourceId"></el-input>
+        </el-form-item>
+        <el-form-item v-if="data.type === 'upload'"
+                      label="附件类型">
+          <el-input v-model="data.options.fileType"
+                    placeholder="关联多个附件的情况下需要填写"></el-input>
+        </el-form-item>
         <el-form-item label="操作属性"
-                      v-if=" data.type != 'table'">
+                      v-if=" data.type !== 'table' && data.type !== 'blank'">
           <el-checkbox v-model="data.options.readonly"
                        v-if="Object.keys(data.options).indexOf('readonly')>=0">完全只读</el-checkbox>
           <el-checkbox v-model="data.options.disabled"
@@ -452,7 +476,7 @@
             使用箭头进行时间选择
           </el-checkbox>
         </el-form-item>
-        <el-form-item v-if="data.type != 'button' && data.type != 'table'"
+        <el-form-item v-if="data.type != 'button' && data.type != 'table' && data.type !== 'blank' && data.type != 'upload'"
                       label="校验">
           <div>
             <el-checkbox v-model="data.options.required">必填</el-checkbox>
@@ -504,7 +528,7 @@
             <el-input v-model="data.options.dialogFormDesignerName"
                       placeholder="dialogFormDesignerName"></el-input>
           </el-form-item>
-            <el-form-item label="表格标题">
+          <el-form-item label="表格标题">
             <el-input v-model="data.options.tableTitle"
                       placeholder="表格标题"></el-input>
           </el-form-item>
@@ -521,36 +545,46 @@
           </el-form-item>
           <el-form-item label="界面元素控制">
             <el-switch v-model="data.options.visibleList.actionColumn"
-                       inactive-text="是否显示操作列" style="margin-right:10px"></el-switch>
+                       inactive-text="是否显示操作列"
+                       style="margin-right:10px"></el-switch>
             <el-switch v-model="data.options.visibleList.btnAdd"
-                       inactive-text="新增按钮" style="margin-right:10px"></el-switch>
+                       inactive-text="新增按钮"
+                       style="margin-right:10px"></el-switch>
             <el-switch v-model="data.options.visibleList.actionColumnBtnEdit"
                        inactive-text="编辑按钮"></el-switch>
             <el-switch v-model="data.options.visibleList.actionColumnBtnDel"
-                       inactive-text="删除按钮" style="margin-right:10px"></el-switch>
+                       inactive-text="删除按钮"
+                       style="margin-right:10px"></el-switch>
             <el-switch v-model="data.options.visibleList.actionColumnBtnDetail"
                        inactive-text="查看按钮"></el-switch>
             <el-switch v-model="data.options.visibleList.tableTitle"
-                       inactive-text="表格标题" style="margin-right:10px"></el-switch>
+                       inactive-text="表格标题"
+                       style="margin-right:10px"></el-switch>
             <el-switch v-model="data.options.visibleList.searchForm"
                        inactive-text="查询区域"></el-switch>
             <el-switch v-model="data.options.visibleList.btnExport"
-                       inactive-text="导出按钮" style="margin-right:10px"></el-switch>
+                       inactive-text="导出按钮"
+                       style="margin-right:10px"></el-switch>
+            <el-switch v-model="data.options.visibleList.btnImport"
+                       inactive-text="上传按钮" style="margin-right:10px"></el-switch>
           </el-form-item>
         </template>
         <template v-if="data.type === 'treeselect'">
-            <el-form-item label="最大高度">
+          <el-form-item label="最大高度">
             <el-input v-model="data.options.maxHeight"
                       placeholder="maxHeight"></el-input>
           </el-form-item>
-           <el-form-item label="value-label">
-             <el-switch v-model="data.options.showValueLabelSlot"></el-switch>
+          <el-form-item label="value-label">
+            <el-switch v-model="data.options.showValueLabelSlot"></el-switch>
+          </el-form-item>
+          <el-form-item label="父结点禁选">
+            <el-switch v-model="data.options.disableBranchNodes"></el-switch>
           </el-form-item>
-            <el-form-item label="父结点禁选">
-              <el-switch v-model="data.options.disableBranchNodes"></el-switch>
+          <el-form-item label="显示数量">
+            <el-switch v-model="data.options.showCount"></el-switch>
           </el-form-item>
-            <el-form-item label="显示数量">
-             <el-switch v-model="data.options.showCount"></el-switch>
+          <el-form-item label="append-to-body(弹窗中使用不需要开启)">
+            <el-switch v-model="data.options.appendToBody"></el-switch>
           </el-form-item>
         </template>
       </template>
@@ -561,6 +595,7 @@
 <script>
 import Draggable from 'vuedraggable';
 import Icon from 'vue-awesome/components/Icon.vue';
+import { DML, crud } from '../../api/public/crud';
 import 'vue-awesome/icons/regular/keyboard';
 import 'vue-awesome/icons/regular/trash-alt';
 import 'vue-awesome/icons/regular/clone';
@@ -611,6 +646,15 @@ export default {
       return false;
     },
   },
+  created() {
+    // 请求字典分类
+    crud(DML.SELECT, 'ad_codelist_type').then((res) => {
+      this.dictType = res.data.list.map(item => ({
+        label: item.codeName,
+        value: item.codeValue,
+      }));
+    });
+  },
   methods: {
     getDraggableOptions() {
       return {
@@ -731,3 +775,10 @@ export default {
   },
 };
 </script>
+<style lang="scss" scoped>
+.form{
+  /deep/.el-input__inner{
+    height:28px!important;
+  }
+}
+</style>
diff --git a/packages/FormDesigner/src/components/FormDesigner/WidgetForm.vue b/packages/FormDesigner/src/WidgetForm.vue
similarity index 95%
rename from packages/FormDesigner/src/components/FormDesigner/WidgetForm.vue
rename to packages/FormDesigner/src/WidgetForm.vue
index f466167..48bfc60 100644
--- a/packages/FormDesigner/src/components/FormDesigner/WidgetForm.vue
+++ b/packages/FormDesigner/src/WidgetForm.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="widget-form-container">
     <el-form :label-position="data.config.labelPosition"
-             :label-width="data.config.labelWidth + 'px'">
+             :label-width="data.config.labelWidth?data.config.labelWidth+ 'px':'140px'">
       <draggable class="widget-form-list"
                  v-model="data.list"
         v-bind="{group:'people', ghostClass: 'ghost',animation: 200, handle: '.drag-widget'}"
@@ -46,11 +46,11 @@
                 </el-col>
   <div class="widget-view-action widget-col-action" v-if="selectWidget.key == element.key">
 
-                    <i class="el-icon el-icon-delete-solid iconfont icon-trash" @click.stop="handleWidgetDelete(index)"></i>
+                    <i class="el-icon el-icon-delete-solid" @click.stop="handleWidgetDelete(index)"></i>
                   </div>
 
-                  <div class="widget-view-drag widget-col-drag" v-if="selectWidget.key == element.key">
-                    <i class="el-icon el-icon-rank iconfont icon-drag drag-widget"></i>
+                  <div class="drag-widget widget-view-drag widget-col-drag" v-if="selectWidget.key == element.key">
+                    <i class="el-icon el-icon-rank"></i>
                   </div>
               </el-row>
               <!-- <el-button title="删除"
@@ -105,7 +105,7 @@ export default {
       // console.log(`拖拽完成，从${oldIndex}行到${newIndex}行`);
     },
     handleSelectWidget(index) {
-      // console.log(`el-row被点击:${index}`);
+      console.log(`el-row被点击:${index}`);
       this.selectWidget = this.data.list[index];
     },
     handleWidgetAdd(evt) {
diff --git a/packages/FormDesigner/src/components/FormDesigner/WidgetFormItem.vue b/packages/FormDesigner/src/WidgetFormItem.vue
similarity index 90%
rename from packages/FormDesigner/src/components/FormDesigner/WidgetFormItem.vue
rename to packages/FormDesigner/src/WidgetFormItem.vue
index cecb311..178e069 100644
--- a/packages/FormDesigner/src/components/FormDesigner/WidgetFormItem.vue
+++ b/packages/FormDesigner/src/WidgetFormItem.vue
@@ -9,7 +9,7 @@
                 :label-width="labelWidth"
                 @click.native.stop="handleSelectWidget(index)">
     <template #label>
-      {{label}}
+        <span v-html="label"></span>
        <i v-if="element.options.tips" class="el-icon el-icon-question"></i>
     </template>
     <template v-if="element.type == 'input'">
@@ -165,23 +165,34 @@
     </template>
       <template v-if="element.type=='treeselect'">
        <h4 style="text-align:center;margin:0">树形下拉框({{element.model}})</h4>
+    </template>
+     <template v-if="element.type == 'richtext'">
+      <Tinymce :height="400"
+               v-model="element.options.defaultValue" />
+    </template>
+    <template v-if="element.type === 'upload'">
+      <h4 style="text-align:center;margin:0">附件上传</h4>
     </template>
     <div class="widget-view-action" v-if="selectWidget.key == element.key">
-          <i class="iconfont icon-icon_clone el-icon el-icon-document-copy" @click.stop="handleWidgetClone(index)"></i>
-          <i class="iconfont icon-trash el-icon el-icon-delete-solid" @click.stop="handleWidgetDelete(index)"></i>
+          <i class="el-icon el-icon-document-copy" @click.stop="handleWidgetClone(index)"></i>
+          <i class="el-icon el-icon-delete-solid" @click.stop="handleWidgetDelete(index)"></i>
         </div>
 
         <div class="widget-view-drag" v-if="selectWidget.key == element.key">
-          <i class="iconfont icon-drag drag-widget el-icon el-icon-rank"></i>
+          <i class="drag-widget el-icon el-icon-rank"></i>
         </div>
 
   </el-form-item>
 </template>
 
 <script>
+import Tinymce from './components/Tinymce'; // 富文本编辑器
 
 export default {
   props: ['element', 'select', 'index', 'data'],
+  components: {
+    Tinymce,
+  },
   data() {
     return {
       selectWidget: this.select,
@@ -189,7 +200,15 @@ export default {
   },
   computed: {
     labelWidth() {
-      return 'text,comment'.includes(this.element.type) ? '0px' : undefined;
+      const { type, labelWidth } = this.element;
+      let label = 'text,comment'.includes(type) ? '0px' : labelWidth || undefined;
+      if (label) {
+        label = label.toString();
+        if (!label.includes('px')) {
+          label += 'px';
+        }
+      }
+      return label;
     },
     // 左侧label内容,文本以及意见框组件的时候label为空
     label() {
diff --git a/packages/FormDesigner/src/components/FileUpload/FileUpload.vue b/packages/FormDesigner/src/components/FileUpload/FileUpload.vue
new file mode 100644
index 0000000..cf4072a
--- /dev/null
+++ b/packages/FormDesigner/src/components/FileUpload/FileUpload.vue
@@ -0,0 +1,360 @@
+<!--
+ * @file: 文件上传
+ * @copyright: NanJing Anshare Tech .Com
+ * @author: BoBo
+ * @Date: 2019年04月28 13:45:17
+-->
+
+<template>
+  <div class="upload-container">
+    <el-upload v-if="view.upload && !readOnly"
+               ref="upload"
+               :action="uploadUrl"
+               :data="uploadParams"
+               :accept="accept"
+               :headers="{ Authorization: this.$store.getters.token }"
+               :show-file-list="false"
+               :before-upload="beforeUpload"
+               :on-success="uploadSuccess"
+               multiple>
+      <el-tooltip class="item"
+                  effect="dark"
+                  content="上传附件"
+                  placement="bottom">
+        <el-button size="mini"
+                   v-show="view.uploadBtn"
+                   style="float:right;"
+                   :icon="btnIcon"
+                   :loading="btnSaveIsLoading"
+                   type="primary">{{btnText}}</el-button>
+      </el-tooltip>
+    </el-upload>
+    <CrudTable ref="table"
+               v-if="view.list"
+               :listField="listField"
+               emptyText="暂无附件"
+               :tableName="tableName"
+               :maxHeightMinus="290"
+               :pageSize="[30,50,100]"
+               :tableTitle="tableTitle"
+               :tableParams="tableParams"
+               :promiseForSelect="promiseForSelect"
+               :fullHeight="fullHeight"
+               :visibleList="{
+                  conditionTitle: false,
+                  tableTitle:view.tableTitle,
+                  searchForm: view.searchForm,
+                  btnAdd: false,
+                  btnExport: false,
+                  actionColumnBtnEdit: false,
+                  actionColumnBtnDel:false,
+                  tableTitle:view.tableTitle
+                }"
+               :paginationLayout="paginationLayout"
+               :showPagination="showPagination"
+               @selection="getSelection"
+               :isMultiple="isMultiple"
+               :row-class-name="rowClassName">
+      <template #columnFormatter="{prop,row}">
+        <template v-if="prop=== 'filename'">
+          <span>{{row.filename}}</span>
+        </template>
+      </template>
+      <template #btnBarPrevBtn>
+        <slot name="btnBarPrevBtn"></slot>
+      </template>
+      <template #btnCustom="scope">
+        <slot name="btnCustom"
+              :row="scope.row"></slot>
+        <div>
+          <el-dropdown trigger="click"
+                       placement="bottom"
+                       class="selectButton">
+            <span class="el-dropdown-link">
+              更多<i class="el-icon-arrow-down el-icon--right"></i>
+            </span>
+            <el-dropdown-menu slot="dropdown">
+              <el-dropdown-item>
+                <i class="el-icon-download"
+                   @click="btnDownloadOnClick(scope)">
+                  <span class="dropLink">
+                    下载
+                  </span>
+                </i>
+              </el-dropdown-item>
+
+              <el-dropdown-item>
+                <i class="el-icon-delete"
+                   @click="btnDelOnClick(scope)">
+                  <span class="dropLink">
+                    删除
+                  </span>
+                </i>
+              </el-dropdown-item>
+            </el-dropdown-menu>
+          </el-dropdown>
+        </div>
+      </template>
+    </CrudTable>
+  </div>
+</template>
+
+<script lang="ts">
+import { Component, Vue, Prop } from 'vue-property-decorator';
+import download from '../../utils/download';
+import { crud, DML } from '../../../../api/public/crud';
+
+@Component
+export default class FileUpload extends Vue {
+  $refs!: {
+    uploadBtn: HTMLFormElement;
+    table:HTMLFormElement;
+  };
+
+  // 保存按钮Loading状态
+  btnSaveIsLoading = false;
+
+  @Prop({
+    type: Boolean,
+    default: false,
+  })
+  fullHeight!: boolean;
+
+  @Prop({
+    type: String,
+    default: 'data.list',
+  })
+  listField!: string;
+
+  @Prop({
+    type: String,
+    default: '.doc,.docx,.xls,.xlsx,.PDF',
+  })
+  accept!: string;
+
+  @Prop({
+    type: String,
+    default: '上传附件',
+  })
+  btnText!: string;
+
+  @Prop({
+    type: String,
+    default: '',
+  })
+  btnIcon!: string;
+
+  @Prop({
+    type: Boolean,
+    default: false,
+  })
+  showPagination!: boolean;
+
+  @Prop({
+    type: String,
+    default: '',
+  })
+  resourceid!: string;
+
+  @Prop({
+    type: Object,
+    default: () => ({}),
+  })
+  visibleList: any;
+
+  @Prop({
+    type: String,
+    default: '',
+  })
+  tableTitle!: string;
+
+  @Prop({
+    type: String,
+    default: `${process.env.VUE_APP_API_URL}file/upload`,
+  })
+  uploadUrl!: string;
+
+  @Prop({
+    default: null,
+    type: Function,
+  })
+  promiseForSelect: any;
+
+  @Prop({
+    type: String,
+    default: 'file',
+  })
+  tableName!: string;
+
+  // 分页显示内容
+  @Prop({
+    type: String,
+    default: 'sizes,total,prev, pager, next',
+  })
+  paginationLayout!: string;
+
+  // 是否开启多选
+  @Prop({
+    type: Boolean,
+    default: false,
+  })
+  isMultiple!: boolean;
+
+  // file列表行样式
+  @Prop({
+    type: [String, Function],
+    default: null,
+  })
+  rowClassName: any;
+
+  @Prop({
+    type: String,
+    default: '',
+  })
+  // 附件类型
+  fileType!: string;
+
+  @Prop({
+    type: Boolean,
+    default: false,
+  })
+  readOnly!: boolean;
+
+  // 内部元素显示控制，默认只有上传人可以编辑删除
+  get view() {
+    return {
+      btnAdd: true,
+      btnDel: true,
+      btnEdit: true,
+      btnPreview: true,
+      upload: true,
+      list: true,
+      btnDownload: true,
+      uploadBtn: true,
+      searchForm: false,
+      tableTitle: true,
+      ...this.visibleList,
+    };
+  }
+
+  get tableParams() {
+    const params:any = {};
+    if (this.resourceid) {
+      params.resourceid = this.resourceid;
+    }
+    if (this.fileType) {
+      params.type = this.fileType;
+    }
+    return params;
+  }
+
+  get uploadParams() {
+    const {
+      resourceid, fileType,
+    } = this;
+    let params : any = {
+      userid: this.$store.getters.userid,
+    };
+    if (resourceid) {
+      params.resourceid = resourceid;
+    }
+    if (this.fileType) {
+      params.type = this.fileType;
+    }
+    params = {
+      ...params,
+    };
+    return params;
+  }
+
+  beforeUpload() {
+    this.btnSaveIsLoading = true;
+    this.$message({
+      type: 'info',
+      message: '文件上传中……',
+    });
+    return true;
+  }
+
+  // 文件上传成功
+  uploadSuccess(res) {
+    const { code } = res;
+    if (code === 400) {
+      this.$message({
+        type: 'error',
+        message: '上传失败',
+      });
+    } else {
+      this.$message({
+        type: 'success',
+        message: '上传成功',
+      });
+      if (this.view.list) {
+        this.tableReload();
+      }
+      this.$emit('uploadSuccess');
+    }
+    this.btnSaveIsLoading = false;
+  }
+
+  // 下载
+  btnDownloadOnClick(scope) {
+    download(`${process.env.VUE_APP_API_URL}file/download`, scope.row.filename, { id: scope.row.id });
+  }
+
+  // 删除按钮代理
+  btnDelOnClick({ row }) {
+    this.$confirm('此操作将删除该附件, 是否继续?', '提示', {
+      confirmButtonText: '确认删除',
+      cancelButtonText: '取消',
+      type: 'warning',
+    })
+      .then(() => {
+        crud(DML.DELETE, this.tableName, {
+          id: row.id,
+        }).then((res:any) => {
+          if (res.code === 200) {
+            this.$message.success('删除成功');
+            this.tableReload();
+          }
+        });
+      })
+      .catch(() => {
+        this.$message({
+          type: 'info',
+          message: '已取消删除',
+        });
+      });
+  }
+
+  // 附件列表刷新
+  tableReload() {
+    this.$refs.table.tableReload();
+  }
+
+  // 获取附件列表勾选项
+  getSelection(data) {
+    this.$emit('selection', data);
+  }
+}
+</script>
+
+<style scoped>
+.upload-container >>> .el-upload {
+  float: right;
+  margin-right: 5px;
+  margin-bottom: 5px;
+}
+</style>
+<style lang="scss" scoped>
+// 操作列更多按选项按钮
+.selectButton {
+  .el-dropdown-link {
+    cursor: pointer;
+    color: #409eff;
+  }
+  .el-icon-arrow-down {
+    font-size: 12px;
+  }
+}
+</style>
diff --git a/packages/FormDesigner/src/components/FormDesigner/CusDialog.vue b/packages/FormDesigner/src/components/FormDesigner/CusDialog.vue
deleted file mode 100644
index 7b4b227..0000000
--- a/packages/FormDesigner/src/components/FormDesigner/CusDialog.vue
+++ /dev/null
@@ -1,132 +0,0 @@
-<template>
-  <el-dialog
-    class="cus-dialog-container"
-    :title="title"
-    :visible.sync="dialogVisible"
-    :close-on-click-modal="false"
-    :width="width"
-    ref="elDialog"
-    :id="id"
-    append-to-body
-    >
-    <span v-if="show">
-      <slot></slot>
-    </span>
-
-    <span v-if="action" slot="footer" class="dialog-footer" v-loading="loading"
-      :element-loading-text="loadingText">
-      <slot name="action">
-        <el-button @click="close">取消</el-button>
-        <el-button type="primary" @click="submit" >确 定</el-button>
-      </slot>
-    </span>
-  </el-dialog>
-</template>
-
-<script>
-export default {
-  props: {
-    visible: Boolean,
-    loadingText: {
-      type: String,
-      default: '',
-    },
-    title: {
-      type: String,
-      default: '预览',
-    },
-    width: {
-      type: String,
-      default: '600px',
-    },
-    form: {
-      type: Boolean,
-      default: true,
-    },
-    action: {
-      type: Boolean,
-      default: true,
-    },
-  },
-  computed: {
-    show() {
-      if (this.form) {
-        return this.showForm;
-      }
-      return true;
-    },
-  },
-  data() {
-    return {
-      loading: false,
-      dialogVisible: this.visible,
-      id: `dialog ${new Date().getTime()}`,
-      showForm: false,
-    };
-  },
-  methods: {
-    close() {
-      this.dialogVisible = false;
-    },
-    submit() {
-      this.loading = true;
-
-      this.$emit('on-submit');
-    },
-    end() {
-      this.loading = false;
-    },
-  },
-  mounted() {
-  },
-  watch: {
-    dialogVisible(val) {
-      if (!val) {
-        this.loading = false;
-        this.$emit('on-close');
-        setTimeout(() => {
-          this.showForm = false;
-        }, 300);
-      } else {
-        this.showForm = true;
-      }
-    },
-    visible(val) {
-      this.dialogVisible = val;
-    },
-  },
-};
-</script>
-
-<style lang="scss">
-.cus-dialog-container{
-  .el-dialog__footer{
-    // margin: 0 20px;
-    // border-top: 1px dashed #ccc;
-    padding: 15px 0 16px;
-    text-align: center;
-    position: relative;
-
-    .dialog-footer{
-      display: block;
-
-      .circular{
-        display: inline-block;
-        vertical-align: middle;
-        margin-right: 5px;
-        width: 24px;
-        height: 24px;
-      }
-
-      .el-loading-text{
-        display: inline-block;
-        vertical-align: middle;
-      }
-
-      .el-loading-spinner{
-        margin-top: -12px;
-      }
-    }
-  }
-}
-</style>
diff --git a/packages/FormDesigner/src/components/FormDesigner/GenerateForm.vue b/packages/FormDesigner/src/components/FormDesigner/GenerateForm.vue
deleted file mode 100644
index 6e6a2bf..0000000
--- a/packages/FormDesigner/src/components/FormDesigner/GenerateForm.vue
+++ /dev/null
@@ -1,354 +0,0 @@
-<!--
- * @file: 根据Json生成表单
- * @copyright: NanJing Anshare Tech .Com
- * @author: BoBo
- * @Date: 2020年09月30 17:26:55
--->
-
-<template>
-  <div class="table-form-wrapper">
-    <el-form ref="generateForm"
-             :class='{"table-form":data.config.isTableClass}'
-             :model="models"
-             :rules="rules"
-             :label-position="data.config.labelPosition"
-             :label-width="data.config.labelWidth + 'px'"
-             size="small">
-      <!-- 遍历从父组件传入的data，data下有list和config两个属性，list下的每个对象是表示一行组件的集合 -->
-      <template v-for="item in this.data.list">
-        <!-- 如果这一行时网格grid布局 -->
-        <template v-if="item.type == 'grid'">
-          <!-- 每一行元素与基于el-row和el-col生成 -->
-          <el-row :key="item.key"
-                  type="flex"
-                  :gutter="item.options.gutter ? item.options.gutter : 0"
-                  :justify="item.options.justify"
-                  :align="item.options.align">
-            <!-- 生成每一行中的每一列元素 -->
-            <el-col v-for="(col, colIndex) in item.columns"
-                    :key="colIndex"
-                    :span="col.span">
-              <!-- 遍历生成该列所有组件 -->
-              <template v-for="citem in col.list">
-                <!-- 如果一个元素的type是blank就加载插槽 -->
-                <el-form-item v-if="citem.type=='blank'"
-                              v-show="!citem.hidden"
-                              :label="citem.name"
-                              :prop="citem.model"
-                              :key="citem.key">
-                  <slot :name="citem.model"
-                        :widget="citem"
-                        :model="models"></slot>
-                </el-form-item>
-                <!-- 意见框 -->
-                 <el-form-item v-else-if="citem.type=='comment'"
-                              label=""
-                              label-width="0px"
-                              :prop="citem.model"
-                              :key="citem.key"
-                              style="margin-top: -10px;margin-bottom: -10px!important;margin-left:-1px">
-                  <slot name="comment"></slot>
-                </el-form-item>
-                <!-- 正常组件通过GenerateFormItem生成 -->
-                <GenerateFormItem v-else
-                                  :key="citem.key"
-                                  :models.sync="models"
-                                  :remote="remote"
-                                  :rules="rules"
-                                  :widget="citem"
-                                  @btnOnClick="btnOnClick"
-                                  v-show="!citem.hidden"
-                                  :formTableConfig="formTableConfig">
-                                   <template  slot="tree-select-value-label" slot-scope="{ node }">
-                                     <slot name="tree-select-value-label" :node="node"></slot>
-                                   </template>
-                                  </GenerateFormItem>
-              </template>
-            </el-col>
-          </el-row>
-        </template>
-        <!-- 不嵌套栅格布局时自定义组件 -->
-        <template v-else-if="item.type === 'blank'">
-          <el-form-item :label="item.name"
-                        :prop="item.model"
-                        :key="item.key"
-                        v-show="!item.hidden">
-            <slot :name="item.model"
-                  :model="models"
-                  :widget="item"></slot>
-          </el-form-item>
-        </template>
-        <!-- 普通行布局方式 -->
-        <template v-else>
-          <GenerateFormItem :key="item.key"
-                            :models.sync="models"
-                            :rules="rules"
-                            :widget="item"
-                            :remote="remote"
-                            @btnOnClick="btnOnClick"
-                            v-show="!item.hidden"></GenerateFormItem>
-        </template>
-      </template>
-    </el-form>
-  </div>
-</template>
-
-<script>
-import GenerateFormItem from './GenerateFormItem.vue';
-
-export default {
-  name: 'GenerateForm',
-  components: {
-    GenerateFormItem,
-  },
-  props: {
-    // 表单配置Json
-    data: {
-      type: Object,
-      default: () => ({}),
-    },
-    // 表单初始值
-    value: {
-      type: Object,
-      default: () => ({}),
-    },
-    // 表单当前实时对象
-    entity: {
-      type: Object,
-      default: () => ({}),
-    },
-    /**
-     * 设置只读,默认Null为全部不只读,传{}为全部只读
-     * 以下是分别设置黑白名单
-     * {
-     *  whiteList:[],  //设置需要只读的
-     *  blackList:[]   //设置不需要只读的
-     * }
-     */
-    setReadOnly: {
-      type: Object,
-      default: null,
-    },
-    // 设置隐藏区域
-    setHidden: {
-      type: Array,
-      default: () => ([]),
-    },
-    // 远端数据
-    remote: {
-      type: Object,
-      default: () => ({}),
-    },
-    // 表格组件 tableParams以及prefill
-    formTableConfig: {
-      type: Object,
-      default: () => ({}),
-    },
-  },
-
-  data() {
-    return {
-      models: {},
-      rules: {},
-    };
-  },
-  created() {
-    // 根据数据结构生成给子组件的数据源
-    this.generateModle(this.data.list);
-    this.setFormReadOnly(this.data.list);
-    this.setFormHidden(this.data.list);
-  },
-  methods: {
-    generateModle(genList) {
-      // 遍历设计的结构
-      for (let i = 0; i < genList.length; i += 1) {
-        if (genList[i].type === 'grid') {
-          genList[i].columns.forEach((item) => {
-            this.generateModle(item.list);
-          });
-        } else {
-          // 如果是自定义组件,model值为slotName,不在model中赋属性值
-          if (Object.keys(this.value).indexOf(genList[i].model) >= 0 && genList[i].type !== 'blank') {
-            // 3.后端要求下拉列表传值时要同时给key和value，为了实现此需求的另外两处赋值在GenerateFormItem.vue中
-            if (genList[i].type === 'select') {
-              const dict = `${genList[i].model}dict`;
-              this.models[dict] = this.value[dict];
-            }
-            this.initFormValue(genList[i]);
-          } else {
-            this.setDefaultValue(genList[i]);
-          }
-
-          if (this.rules[genList[i].model]) {
-            this.rules[genList[i].model] = [...this.rules[genList[i].model], ...genList[i].rules.map((item) => {
-              if (item.pattern) {
-                // eslint-disable-next-line no-eval
-                const rule = { ...item, pattern: eval(item.pattern) };
-                rule.trigger = 'blur';
-                return rule;
-              }
-              return { ...item };
-            })];
-          } else {
-            this.rules[genList[i].model] = [...genList[i].rules.map((item) => {
-              if (item.pattern) {
-                // eslint-disable-next-line no-eval
-                const rule = { ...item, pattern: eval(item.pattern) };
-                rule.trigger = 'blur';
-                return rule;
-              }
-              return { ...item };
-            })];
-          }
-        }
-      }
-    },
-
-    /**
-     * 如果select,radio,checkbox等组件为多选情况  后台返回逗号分隔字符串 => 数组
-     * 如果 this.value为null 则会按默认值赋值相应字段
-     * @param {String} 当前表单json.list
-     */
-    initFormValue(row) {
-      if (row.options.multiple || 'cascader,checkbox'.includes(row.type)) {
-        if (this.value[row.model] != null && this.value[row.model] !== '') {
-          this.models[row.model] = this.value[row.model].split(',');
-        } else {
-          this.models[row.model] = [];
-        }
-      } else if (this.value[row.model] == null || this.value[row.model] === '') {
-        this.setDefaultValue(row);
-      } else {
-        this.models[row.model] = this.value[row.model];
-      }
-    },
-    // 设置只读
-    setFormReadOnly(genList) {
-      // 遍历设计的结构
-      if (this.setReadOnly) {
-        for (let i = 0; i < genList.length; i += 1) {
-          if (genList[i].type === 'grid') {
-            genList[i].columns.forEach((item) => {
-              this.setFormReadOnly(item.list);
-            });
-          } else {
-            const { whiteList, blackList } = this.setReadOnly;
-            const row = genList[i];
-            // 默认空对象 代表全部只读
-            if (whiteList == null && blackList == null) {
-              row.options.disabled = true;
-            } else if (blackList && !blackList.includes(row.model)) {
-              row.options.disabled = true;
-            } else if (whiteList && whiteList.includes(row.model)) {
-              row.options.disabled = true;
-            }
-          }
-        }
-      }
-    },
-    // 设置隐藏
-    setFormHidden(genList) {
-      // 遍历设计的结构
-      if (this.setHidden) {
-        for (let i = 0; i < genList.length; i += 1) {
-          if (genList[i].type === 'grid') {
-            genList[i].columns.forEach((item) => {
-              this.setFormHidden(item.list);
-            });
-          } else {
-            const row = genList[i];
-            // 默认空对象 代表全部只读
-            if (this.setHidden.includes(row.model)) {
-              row.hidden = true;
-            }
-          }
-        }
-      }
-    },
-    // 多选情况下数组转字符串
-    formValueToString() {
-      const model = { ...this.models };
-      Object.keys(model).forEach((k) => {
-        if (Array.isArray(model[k])) {
-          model[k] = model[k].toString();
-        }
-      });
-      return model;
-    },
-    // 先验证再获取表单内容
-    getData(args) {
-      return new Promise((resolve, reject) => {
-        this.$refs.generateForm.validate((valid) => {
-          if (valid) {
-            resolve(this.formValueToString(), args);
-          } else {
-            // 校验失败时focus到文本框
-            // 注意此处没有考虑textarea的情况,多行文本会失败
-            setTimeout(() => {
-              const isError = document.getElementsByClassName('is-error');
-              isError[0].querySelector('input').focus();
-            }, 100);
-            reject(new Error('请检查必填项是否填写').message);
-          }
-        });
-      });
-    },
-    // 重置表单
-    resetForm() {
-      this.$refs.generateForm.resetFields();
-    },
-    // 不经过验证直接获取表单内容
-    getDataWithoutValidate() {
-      return new Promise(resolve => resolve(this.formValueToString()));
-    },
-    // 生成的按钮点击
-    btnOnClick(widget) {
-      this.$emit('btnOnClick', widget);
-    },
-    // 表单默认值回填单独拉出来封装
-    setDefaultValue(config) {
-      // 如果时间选择器需要默认值,默认回填当前日期
-      if (config.type === 'date' && config.options.defaultValue) {
-        const { format } = config.options;
-        if (format && format !== '') {
-          this.models[config.model] = this.dayjs().format(format.toUpperCase());
-        }
-      } else {
-        let { defaultValue } = config.options;
-        // 如果默认值设置为$开头,则表示要读取vuex中的全局变量
-        // 如设置为 $deptname 则读取 this.$store.getters.deptname
-        if (typeof (defaultValue) === 'string' && defaultValue.includes('$')) {
-          defaultValue = this.$store.getters[defaultValue.replace('$', '')];
-        } else if (typeof (defaultValue) === 'boolean') {
-          defaultValue = '';
-        } else if (defaultValue === '') {
-          defaultValue = null;
-        }
-        this.models[config.model] = defaultValue;
-      }
-    },
-  },
-  watch: {
-    value: {
-      immediate: true,
-      deep: true,
-      handler(val) {
-        this.$nextTick(() => {
-          this.$refs.generateForm.clearValidate();
-        });
-        this.models = { ...this.models, ...val };
-      },
-    },
-    models: {
-      deep: true,
-      immediate: true,
-      handler(val) {
-        this.$emit('update:entity', val);
-      },
-    },
-  },
-};
-</script>
-<style lang="scss" scoped>
-@import './styles/table-form.scss';
-</style>
diff --git a/packages/FormDesigner/src/components/FormDesigner/generateCode.js b/packages/FormDesigner/src/components/FormDesigner/generateCode.js
deleted file mode 100644
index 7a59dd6..0000000
--- a/packages/FormDesigner/src/components/FormDesigner/generateCode.js
+++ /dev/null
@@ -1,107 +0,0 @@
-function findRemoteFunc(list, funcList, tokenFuncList, blankList) {
-  for (let i = 0; i < list.length; i += 1) {
-    if (list[i].type === 'grid') {
-      list[i].columns.forEach((item) => {
-        findRemoteFunc(item.list, funcList, tokenFuncList, blankList);
-      });
-    } else if (list[i].type === 'blank') {
-      if (list[i].model) {
-        blankList.push({
-          name: list[i].model,
-          label: list[i].name,
-        });
-      }
-    } else if (list[i].options.remote && list[i].options.remoteFunc) {
-      funcList.push({
-        func: list[i].options.remoteFunc,
-        label: list[i].name,
-        model: list[i].model,
-      });
-    }
-  }
-}
-
-export default function (data) {
-  const funcList = [];
-
-  const tokenFuncList = [];
-
-  const blankList = [];
-
-  findRemoteFunc(JSON.parse(data).list, funcList, tokenFuncList, blankList);
-
-  let funcTemplate = '';
-
-  let blankTemplate = '';
-
-  for (let i = 0; i < funcList.length; i += 1) {
-    funcTemplate += `
-            ${funcList[i].func} (resolve) {
-              // ${funcList[i].label} ${funcList[i].model}
-              // 获取到远端数据后执行回调函数
-              // resolve(data)
-            },
-    `;
-  }
-
-  for (let i = 0; i < tokenFuncList.length; i += 1) {
-    funcTemplate += `
-            ${tokenFuncList[i].func} (resolve) {
-              // ${tokenFuncList[i].label} ${tokenFuncList[i].model}
-              // 获取到token数据后执行回调函数
-              // resolve(token)
-            },
-    `;
-  }
-
-  for (let i = 0; i < blankList.length; i += 1) {
-    blankTemplate += `
-        <template slot="${blankList[i].name}" slot-scope="scope">
-          <!-- ${blankList[i].label} -->
-          <!-- 通过 v-model="scope.model.${blankList[i].name}" 绑定数据 -->
-        </template>
-    `;
-  }
-
-  return `<!DOCTYPE html>
-  <html>
-  <head>
-    <meta charset="UTF-8">
-    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
-    <link rel="stylesheet" href="https://unpkg.com/form-making/dist/FormMaking.css">
-  </head>
-  <body>
-    <div id="app">
-      <GenerateForm :data="jsonData" :remote="remoteFuncs" :value="editData" ref="generateForm">
-        ${blankTemplate}
-      </GenerateForm>
-      <el-button type="primary" @click="handleSubmit">提交</el-button>
-    </div>
-    <script src="https://unpkg.com/vue/dist/vue.js"></script>
-    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
-    <script src="https://unpkg.com/form-making/dist/FormMaking.umd.js"></script>
-    <script>
-      new Vue({
-        el: '#app',
-        data: {
-          jsonData: ${data},
-          editData: {},
-          remoteFuncs: {
-            ${funcTemplate}
-          }
-        },
-        methods: {
-          handleSubmit () {
-            this.$refs.generateForm.getData().then(data => {
-              // 数据校验成功
-              // data 为获取的表单数据
-            }).catch(e => {
-              // 数据校验失败
-            })
-          }
-        }
-      })
-    </script>
-  </body>
-  </html>`;
-}
diff --git a/packages/FormDesigner/src/components/Tinymce/components/editorImage.vue b/packages/FormDesigner/src/components/Tinymce/components/editorImage.vue
new file mode 100644
index 0000000..752c1de
--- /dev/null
+++ b/packages/FormDesigner/src/components/Tinymce/components/editorImage.vue
@@ -0,0 +1,115 @@
+<template>
+  <div class="upload-container">
+    <el-button :style="{background:color,borderColor:color}" icon="el-icon-upload" size="mini" type="primary" @click=" dialogVisible=true">上传图片
+    </el-button>
+    <el-dialog :visible.sync="dialogVisible">
+      <el-upload
+        :multiple="true"
+        :file-list="fileList"
+        :show-file-list="true"
+        :on-remove="handleRemove"
+        :action="uploadUrl"
+        :headers="{ Authorization: getToken }"
+        :on-success="handleSuccess"
+        :before-upload="beforeUpload"
+        class="editor-slide-upload"
+        list-type="picture-card">
+        <el-button size="small" type="primary">点击上传</el-button>
+      </el-upload>
+      <el-button @click="dialogVisible = false">取 消</el-button>
+      <el-button type="primary" @click="handleSubmit">确 定</el-button>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+// import { getToken } from 'api/qiniu'
+
+export default {
+  name: 'EditorSlideUpload',
+  props: {
+    color: {
+      type: String,
+      default: '#1890ff',
+    },
+  },
+  data() {
+    return {
+      dialogVisible: false,
+      listObj: {},
+      fileList: [],
+
+    };
+  },
+  computed: {
+    uploadUrl() {
+      return `${process.env.VUE_APP_API_URL}file/uploadImage`;
+    },
+    getToken() {
+      return this.$store.getters.token;
+    },
+  },
+  methods: {
+    checkAllSuccess() {
+      return Object.keys(this.listObj).every(item => this.listObj[item].hasSuccess);
+    },
+    handleSubmit() {
+      const arr = Object.keys(this.listObj).map(v => this.listObj[v]);
+      if (!this.checkAllSuccess()) {
+        this.$message('请等待所有图片上传成功 或 出现了网络问题，请刷新页面重新上传！');
+        return;
+      }
+      this.$emit('successCBK', arr);
+      this.listObj = {};
+      this.fileList = [];
+      this.dialogVisible = false;
+    },
+    handleSuccess(response, file) {
+      const { uid } = file;
+      const objKeyArr = Object.keys(this.listObj);
+      for (let i = 0, len = objKeyArr.length; i < len; i += 1) {
+        if (this.listObj[objKeyArr[i]].uid === uid) {
+          this.listObj[objKeyArr[i]].url = response.files.file;
+          this.listObj[objKeyArr[i]].hasSuccess = true;
+          return;
+        }
+      }
+    },
+    handleRemove(file) {
+      const { uid } = file;
+      const objKeyArr = Object.keys(this.listObj);
+      for (let i = 0, len = objKeyArr.length; i < len; i += 1) {
+        if (this.listObj[objKeyArr[i]].uid === uid) {
+          delete this.listObj[objKeyArr[i]];
+          return;
+        }
+      }
+    },
+    beforeUpload(file) {
+      // eslint-disable-next-line no-underscore-dangle
+      const _URL = window.URL || window.webkitURL;
+      const fileName = file.uid;
+      this.listObj[fileName] = {};
+      return new Promise((resolve) => {
+        const img = new Image();
+        img.src = _URL.createObjectURL(file);
+        img.onload = function onload() {
+          this.listObj[fileName] = {
+            hasSuccess: false, uid: file.uid, width: this.width, height: this.height,
+          };
+        };
+        resolve(true);
+      });
+    },
+  },
+};
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.editor-slide-upload {
+  margin-bottom: 20px;
+  /deep/ .el-upload--picture-card {
+    width: 100%;
+  }
+}
+</style>
diff --git a/packages/FormDesigner/src/components/Tinymce/index.vue b/packages/FormDesigner/src/components/Tinymce/index.vue
new file mode 100644
index 0000000..3b911db
--- /dev/null
+++ b/packages/FormDesigner/src/components/Tinymce/index.vue
@@ -0,0 +1,222 @@
+<!--
+ * @file: Tinymce组件封装
+ * @copyright: NanJing Anshare Tech .Com
+ * @author: BoBo
+ * @Date: 2018年6月14 11:12:05
+ -->
+<template>
+  <div :class="{fullscreen:fullscreen}" class="tinymce-container editor-container">
+    <textarea :id="tinymceId" class="tinymce-textarea"/>
+    <div class="editor-custom-btn-container" style="display:none">
+      <editorImage color="#1890ff" class="editor-upload-btn" @successCBK="imageSuccessCBK"/>
+    </div>
+  </div>
+</template>
+
+<script>
+import editorImage from './components/editorImage';
+import plugins from './plugins';
+import toolbar from './toolbar';
+
+export default {
+  name: 'Tinymce',
+  components: { editorImage },
+  props: {
+    id: {
+      type: String,
+      default() {
+        return `vue-tinymce-${+new Date()}${(Math.random() * 1000).toFixed(0)}`;
+      },
+    },
+    value: {
+      type: String,
+      default: '',
+    },
+    toolbar: {
+      type: Array,
+      required: false,
+      default() {
+        return [];
+      },
+    },
+    menubar: {
+      type: String,
+      default: 'file edit insert view format table',
+    },
+    readonly: {
+      type: Boolean,
+      default: false,
+    },
+    height: {
+      type: Number,
+      required: false,
+      default: 360,
+    },
+  },
+  data() {
+    return {
+      hasChange: false,
+      hasInit: false,
+      tinymceId: this.id,
+      fullscreen: false,
+      languageTypeList: {
+        en: 'en',
+        zh: 'zh_CN',
+      },
+    };
+  },
+  computed: {
+    language() {
+      return this.languageTypeList[this.$store.getters.language];
+    },
+  },
+  watch: {
+    value(val) {
+      if (!this.hasChange && this.hasInit) {
+        this.$nextTick(() => window.tinymce.get(this.tinymceId).setContent(val || ''));
+      }
+    },
+    language() {
+      this.destroyTinymce();
+      this.$nextTick(() => this.initTinymce());
+    },
+  },
+  mounted() {
+    this.initTinymce();
+  },
+  activated() {
+    this.initTinymce();
+  },
+  deactivated() {
+    this.destroyTinymce();
+  },
+  destroyed() {
+    this.destroyTinymce();
+  },
+  methods: {
+    initTinymce() {
+      // eslint-disable-next-line no-underscore-dangle
+      const _this = this;
+      window.tinymce.init({
+        language: 'zh_CN',
+        selector: `#${this.tinymceId}`,
+        height: this.height,
+        body_class: 'panel-body ',
+        object_resizing: false,
+        toolbar: this.toolbar.length > 0 ? this.toolbar : toolbar,
+        menubar: this.menubar,
+        plugins,
+        readonly: this.readonly,
+        end_container_on_empty_block: true,
+        powerpaste_word_import: 'clean',
+        code_dialog_height: 450,
+        code_dialog_width: 1000,
+        advlist_bullet_styles: 'square',
+        advlist_number_styles: 'default',
+        imagetools_cors_hosts: ['www.tinymce.com', 'codepen.io'],
+        default_link_target: '_blank',
+        link_title: false,
+        nonbreaking_force_tab: true, // inserting nonbreaking space &nbsp; need Nonbreaking Space Plugin
+        init_instance_callback: (editor) => {
+          if (_this.value) {
+            editor.setContent(_this.value);
+          }
+          _this.hasInit = true;
+          editor.on('NodeChange Change KeyUp SetContent', () => {
+            this.hasChange = true;
+            this.$emit('input', editor.getContent());
+          });
+        },
+        setup(editor) {
+          editor.on('FullscreenStateChanged', (e) => {
+            _this.fullscreen = e.state;
+          });
+        },
+        // 整合七牛上传
+        // images_dataimg_filter(img) {
+        //   setTimeout(() => {
+        //     const $image = $(img);
+        //     $image.removeAttr('width');
+        //     $image.removeAttr('height');
+        //     if ($image[0].height && $image[0].width) {
+        //       $image.attr('data-wscntype', 'image');
+        //       $image.attr('data-wscnh', $image[0].height);
+        //       $image.attr('data-wscnw', $image[0].width);
+        //       $image.addClass('wscnph');
+        //     }
+        //   }, 0);
+        //   return img;
+        // },
+        images_upload_handler(blobInfo, success, failure, progress) {
+          // progress(0);
+          const { token } = _this.$store.getters;
+          // getToken(token).then(response => {
+          //   const url = response.data.qiniu_url;
+          //   const formData = new FormData();
+          //   formData.append('token', response.data.qiniu_token);
+          //   formData.append('key', response.data.qiniu_key);
+          //   formData.append('file', blobInfo.blob(), url);
+          //   upload(formData).then(() => {
+          //     success(url);
+          //     progress(100);
+          //   })
+          // }).catch(err => {
+          //   failure('出现未知问题，刷新页面，或者联系程序员')
+          //   console.log(err);
+          // });
+        },
+      });
+    },
+    destroyTinymce() {
+      const tinymce = window.tinymce.get(this.tinymceId);
+      if (this.fullscreen) {
+        tinymce.execCommand('mceFullScreen');
+      }
+
+      if (tinymce) {
+        tinymce.destroy();
+      }
+    },
+    setContent(value) {
+      window.tinymce.get(this.tinymceId).setContent(value);
+    },
+    getContent() {
+      window.tinymce.get(this.tinymceId).getContent();
+    },
+    imageSuccessCBK(arr) {
+      // eslint-disable-next-line no-underscore-dangle
+      const _this = this;
+      arr.forEach((v) => {
+        window.tinymce.get(_this.tinymceId).insertContent(`<img class="wscnph" src="${v.url}" >`);
+      });
+    },
+  },
+};
+</script>
+
+<style scoped>
+.tinymce-container {
+  position: relative;
+  line-height: normal;
+}
+.tinymce-container>>>.mce-fullscreen {
+  z-index: 10000;
+}
+.tinymce-textarea {
+  visibility: hidden;
+  z-index: -1;
+}
+.editor-custom-btn-container {
+  position: absolute;
+  right: 4px;
+  top: 4px;
+  /*z-index: 2005;*/
+}
+.fullscreen .editor-custom-btn-container {
+  z-index: 10000;
+  position: fixed;
+}
+.editor-upload-btn {
+  display: inline-block;
+}
+</style>
diff --git a/packages/FormDesigner/src/components/Tinymce/plugins.js b/packages/FormDesigner/src/components/Tinymce/plugins.js
new file mode 100644
index 0000000..089d683
--- /dev/null
+++ b/packages/FormDesigner/src/components/Tinymce/plugins.js
@@ -0,0 +1,8 @@
+// Any plugins you want to use has to be imported
+// Detail plugins list see https://www.tinymce.com/docs/plugins/
+// Custom builds see https://www.tinymce.com/download/custom-builds/
+
+export default [
+  // eslint-disable-next-line max-len
+  'advlist anchor autolink autosave code codesample colorpicker colorpicker contextmenu directionality emoticons fullscreen hr image imagetools insertdatetime link lists nonbreaking noneditable pagebreak paste preview print save searchreplace spellchecker tabfocus table template textcolor textpattern visualblocks visualchars wordcount',
+];
diff --git a/packages/FormDesigner/src/components/Tinymce/toolbar.js b/packages/FormDesigner/src/components/Tinymce/toolbar.js
new file mode 100644
index 0000000..e1521b9
--- /dev/null
+++ b/packages/FormDesigner/src/components/Tinymce/toolbar.js
@@ -0,0 +1,7 @@
+// Here is a list of the toolbar
+// Detail list see https://www.tinymce.com/docs/advanced/editor-control-identifiers/#toolbarcontrols
+
+// eslint-disable-next-line max-len
+const toolbar = ['searchreplace bold italic underline strikethrough alignleft aligncenter alignright outdent indent  blockquote undo redo removeformat subscript superscript code codesample', 'hr bullist numlist link image charmap preview anchor pagebreak insertdatetime table forecolor backcolor fullscreen'];
+
+export default toolbar;
diff --git a/packages/FormDesigner/src/components/FormDesigner/componentsConfig.js b/packages/FormDesigner/src/componentsConfig.ts
similarity index 96%
rename from packages/FormDesigner/src/components/FormDesigner/componentsConfig.js
rename to packages/FormDesigner/src/componentsConfig.ts
index cda394b..affc9b2 100644
--- a/packages/FormDesigner/src/components/FormDesigner/componentsConfig.js
+++ b/packages/FormDesigner/src/componentsConfig.ts
@@ -144,12 +144,12 @@ export const basicComponents = [
   },
   {
     type: 'date',
-    name: '日期时间选择器',
+    name: '日期选择器',
     labelWidth: '',
     hidden: false,
-    icon: 'clock',
+    icon: 'regular/calendar-alt',
     options: {
-      defaultValue: '',
+      defaultValue: false,
       readonly: false,
       disabled: false,
       editable: true,
@@ -157,8 +157,8 @@ export const basicComponents = [
       placeholder: '',
       startPlaceholder: '',
       endPlaceholder: '',
-      type: 'datetime',
-      format: 'yyyy-MM-dd hh:mm:ss',
+      type: 'date',
+      format: 'yyyy-MM-dd',
       timestamp: false,
       required: false,
       width: '',
@@ -166,12 +166,12 @@ export const basicComponents = [
   },
   {
     type: 'date',
-    name: '日期选择器',
+    name: '时间选择器',
     labelWidth: '',
     hidden: false,
-    icon: 'regular/calendar-alt',
+    icon: 'clock',
     options: {
-      defaultValue: false,
+      defaultValue: '',
       readonly: false,
       disabled: false,
       editable: true,
@@ -179,8 +179,8 @@ export const basicComponents = [
       placeholder: '',
       startPlaceholder: '',
       endPlaceholder: '',
-      type: 'date',
-      format: 'yyyy-MM-dd',
+      type: 'datetime',
+      format: 'yyyy-MM-dd hh:mm:ss',
       timestamp: false,
       required: false,
       width: '',
@@ -292,15 +292,14 @@ export const advanceComponents = [
   },
   {
     type: 'upload',
-    name: '文件上传',
+    name: '附件',
     icon: 'upload',
     options: {
-      uploadParams: {
-        Param: {
-          MasterID: '',
-        },
-        IsDetail: false,
-      },
+      resourceId: 'id',
+      fileType: '',
+      defaultValue: '',
+      remoteFunc: '',
+      readonly: false,
     },
   },
   {
@@ -310,6 +309,7 @@ export const advanceComponents = [
     options: {
       defaultValue: [],
       width: '',
+      separator: '/',
       placeholder: '',
       multiple: false,
       disabled: false,
@@ -340,6 +340,7 @@ export const advanceComponents = [
         actionColumnBtnDel: true,
         conditionTitle: false,
         btnExport: false,
+        btnImport: false,
       },
       tableParams: '',
       prefill: '',
@@ -363,6 +364,7 @@ export const advanceComponents = [
       maxHeight: 300,
       multiple: false,
       remote: 'custom',
+      appendToBody: false,
       props: {
         value: 'value',
         label: 'label',
@@ -382,14 +384,6 @@ export const advanceComponents = [
       remoteOptions: [],
     },
   },
-  {
-    type: 'comment',
-    name: '意见框',
-    icon: 'comment',
-    options: {
-      defaultType: 'String',
-    },
-  },
   {
     type: 'richtext',
     name: '富文本',
diff --git a/packages/FormDesigner/src/element.js b/packages/FormDesigner/src/element.ts
similarity index 100%
rename from packages/FormDesigner/src/element.js
rename to packages/FormDesigner/src/element.ts
diff --git a/packages/FormDesigner/src/components/FormDesigner/form_empty.png b/packages/FormDesigner/src/form_empty.png
similarity index 100%
rename from packages/FormDesigner/src/components/FormDesigner/form_empty.png
rename to packages/FormDesigner/src/form_empty.png
diff --git a/packages/FormDesigner/src/logo.png b/packages/FormDesigner/src/logo.png
new file mode 100644
index 0000000000000000000000000000000000000000..9ce399cdaa2c3a6823fad2ebce4014bd5b7ddc95
GIT binary patch
literal 6839
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
C3HB!d

literal 0
HcmV?d00001

diff --git a/packages/FormDesigner/src/components/FormDesigner/styles/cover.scss b/packages/FormDesigner/src/styles/cover.scss
similarity index 81%
rename from packages/FormDesigner/src/components/FormDesigner/styles/cover.scss
rename to packages/FormDesigner/src/styles/cover.scss
index dde7561..7b97227 100644
--- a/packages/FormDesigner/src/components/FormDesigner/styles/cover.scss
+++ b/packages/FormDesigner/src/styles/cover.scss
@@ -11,7 +11,4 @@
 }
 .el-checkbox{
   margin-right: 30px;
-}
-.el-form-item__content{
-  text-align: left;
 }
\ No newline at end of file
diff --git a/packages/FormDesigner/src/components/FormDesigner/styles/index.scss b/packages/FormDesigner/src/styles/index.scss
similarity index 98%
rename from packages/FormDesigner/src/components/FormDesigner/styles/index.scss
rename to packages/FormDesigner/src/styles/index.scss
index 14bc0fb..1d5af40 100644
--- a/packages/FormDesigner/src/components/FormDesigner/styles/index.scss
+++ b/packages/FormDesigner/src/styles/index.scss
@@ -1,10 +1,5 @@
 $primary-color: #409EFF;
 $primary-background-color: #ecf5ff;
-html,body{
-  margin:0;
-  height: 100%;
-  text-align: left;
-}
 
 *, :after, :before {
   -webkit-box-sizing: border-box;
@@ -105,7 +100,6 @@ html,body{
     font-size: 12px;
     display: block;
     width: 48%;
-    text-align: left;
     line-height: 26px;
     position: relative;
     float: left;
@@ -158,7 +152,7 @@ html,body{
     // border: 1px dashed #999;
     border: 1px dashed #999;
     // min-height: 600px;
-    margin: 10px;
+    margin: 2px;
 
     .widget-col-list{
       min-height: 50px;
@@ -169,10 +163,10 @@ html,body{
     .widget-view{
       padding-bottom: 18px;
       position: relative;
-      border: 1px dashed rgba(170,170,170,0.7);
+      border: 1px dashed hsla(0,0%,66.7%,.7);
       background-color: rgba(236, 245, 255, .3);
       margin: 2px;
-
+      text-align: left;
       .el-form-item__content{
         position: unset;
       }
@@ -530,7 +524,7 @@ html,body{
 
     .widget-col{
       padding-bottom: 0;
-      padding: 5px;
+      padding: 3px;
       // margin-left: 2px !important;
       // margin-right: 2px !important;
       background-color: rgba(253,246,236, .3);
@@ -658,7 +652,7 @@ html,body{
 
 .widget-config-container{
   position: relative;
-
+  overflow: hidden;
   .el-header{
     border-bottom: solid 2px #e4e7ed;
     padding: 0 5px;
@@ -682,15 +676,16 @@ html,body{
 
   .config-content{
     padding: 10px;
-
+    overflow: auto;
+    height: calc(100% - 45px);
     .el-form-item__label{
       padding: 0;
       font-weight: 500;
     }
-
     .el-form-item {
       border-bottom: solid 1px #e1e1e1;
       padding-bottom: 10px;
+      text-align: left;
     }
   }
 
diff --git a/packages/FormDesigner/src/components/FormDesigner/styles/table-form.scss b/packages/FormDesigner/src/styles/table-form.scss
similarity index 92%
rename from packages/FormDesigner/src/components/FormDesigner/styles/table-form.scss
rename to packages/FormDesigner/src/styles/table-form.scss
index b0cec3c..5f2df9d 100644
--- a/packages/FormDesigner/src/components/FormDesigner/styles/table-form.scss
+++ b/packages/FormDesigner/src/styles/table-form.scss
@@ -1,3 +1,9 @@
+/*
+ * @file: 使用表格布局样式
+ * @copyright: NanJing Anshare Tech .Com
+ * @author: BoBo
+ * @Date: 2020年09月14 18:01:58
+ */
 .table-form-wrapper {
   @mixin border-style($position: 'all', $style: 1px solid #e6e6e6) {
     @if ($position== 'all') {
@@ -30,7 +36,7 @@
             font-size: 16px;
             flex-shrink: 0;
             text-align: center;
-            padding: 0 6px;
+            padding: 0;
           }
           .el-form-item__content {
             box-sizing: border-box;
diff --git a/packages/FormDesigner/src/utils/download.ts b/packages/FormDesigner/src/utils/download.ts
new file mode 100644
index 0000000..27940c4
--- /dev/null
+++ b/packages/FormDesigner/src/utils/download.ts
@@ -0,0 +1,48 @@
+/**
+ * @file 文件下载
+ * @author BoBo
+ * @copyright NanJing Anshare Tech .Com
+ * @createDate 2018年11月18日08:13:10
+ */
+import axios from '../../../api/axios';
+
+/**
+ * 通用下载
+ *
+ * @export
+ * @param {String} url 请求地址
+ * @param {String} name 文件名
+ * @param {Object} params 请求参数
+ * @param {String} requestType 请求方式(get,post)
+ */
+export default function (url, name, params, requestType = 'get') {
+  let axiosObj;
+  if (requestType === 'get') {
+    axiosObj = axios.get(url, { responseType: 'blob', params });
+  } else {
+    axiosObj = axios.post(url, params, { responseType: 'blob' });
+  }
+  axiosObj
+    .then((res) => {
+      if (!res) {
+        return;
+      }
+      const blob = new Blob([res]);
+      const date = new Date();
+      let fileName;
+      if (/^.*\..{1,4}$/.test(name)) {
+        fileName = name;
+      } else {
+        fileName = `${name} ${date.getFullYear()}年${date.getMonth()
+          + 1}月${date.getDate()}日${date.getHours()}时${date.getMinutes()}分${date.getSeconds()}秒.xls`;
+      }
+      const aTag = document.createElement('a');
+      aTag.style.display = 'none';
+      aTag.download = fileName;
+      aTag.href = URL.createObjectURL(blob);
+      document.body.appendChild(aTag);
+      aTag.click();
+      URL.revokeObjectURL(aTag.href);
+      document.body.removeChild(aTag);
+    });
+}
diff --git a/packages/api/axios.ts b/packages/api/axios.ts
new file mode 100644
index 0000000..2a82536
--- /dev/null
+++ b/packages/api/axios.ts
@@ -0,0 +1,92 @@
+/**
+ * @file 封装原生axios，在main.js和api层引用本文件
+ * @author ytyang
+ * @copyright NanJing Anshare Tech .Com
+ * @createDate 2018年11月13日10:52:32
+ * @author BoBo update
+ */
+import axios from "axios";
+import { Message, MessageBox } from "element-ui"; // eslint-disable-line
+
+// axios详细配置参考：
+// https://github.com/axios/axios#request-config
+
+// 创建axios实例
+const service = axios.create({
+  baseURL: 'http://localhost:3000/', // 后端接口根路径
+  timeout: 60 * 1000, // 请求超时时间
+});
+
+// 拦截请求
+service.interceptors.request.use(
+  (config) => {
+    config.headers.auth = 'Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyTmFtZSI6ImFkbWluIiwidXNlcklEIjoiMDAwMDAwMDAtMTAwMC0wMDAwLTAwMDAtMDAwMDAwMDAwMDAwIiwiZGVwdElEIjoiMmY4NDQ3ZGUtNTczMi00ZmE0LTgyODYtOWE3MWI0MWRkMWU3IiwicmVhbE5hbWUiOiLotoXnuqfnrqHnkIblkZgiLCJyb2xlSUQiOiIwMDAwMDAwMC0xMDAwLTAwMDAtMDAwMC0wMDAwMDAwMDAwMDAiLCJyb2xlTmFtZSI6Iui2hee6p-euoeeQhuWRmCIsImRlcHROYW1lIjoi5oC76YOoIiwicm9sZUF1dGhOYW1lIjoiQWRtaW5EYXNoYm9hcmRGb3JBZG1pbixBZG1pbkRhc2hib2FyZCxVc2VycyxSb2xlLEZvcm1EZXNpZ25lcixUYWJsZURlc2lnbmVyLERpY3QsZmxvd0NsdWVJbmZvLEJ1c2luZXNzQWN0Q2x1ZUluZm8sU3lzdGVtLERldlRvb2xzIiwicGhvdG8iOiJkYXRhOmltYWdlL2pwZztiYXNlNjQsLzlqLzRBQVFTa1pKUmdBQkFnQUFBUUFCQUFELzJ3QkRBQWdHQmdjR0JRZ0hCd2NKQ1FnS0RCUU5EQXNMREJrU0V3OFVIUm9mSGgwYUhCd2dKQzRuSUNJc0l4d2NLRGNwTERBeE5EUTBIeWM1UFRneVBDNHpOREwvMndCREFRa0pDUXdMREJnTkRSZ3lJUndoTWpJeU1qSXlNakl5TWpJeU1qSXlNakl5TWpJeU1qSXlNakl5TWpJeU1qSXlNakl5TWpJeU1qSXlNakl5TWpJeU1qTC93QUFSQ0FCa0FHUURBU0lBQWhFQkF4RUIvOFFBSHdBQUFRVUJBUUVCQVFFQUFBQUFBQUFBQUFFQ0F3UUZCZ2NJQ1FvTC84UUF0UkFBQWdFREF3SUVBd1VGQkFRQUFBRjlBUUlEQUFRUkJSSWhNVUVHRTFGaEJ5SnhGREtCa2FFSUkwS3h3UlZTMGZBa00ySnlnZ2tLRmhjWUdSb2xKaWNvS1NvME5UWTNPRGs2UTBSRlJrZElTVXBUVkZWV1YxaFpXbU5rWldabmFHbHFjM1IxZG5kNGVYcURoSVdHaDRpSmlwS1RsSldXbDVpWm1xS2pwS1dtcDZpcHFyS3p0TFcydDdpNXVzTER4TVhHeDhqSnl0TFQxTlhXMTlqWjJ1SGk0K1RsNXVmbzZlcng4dlAwOWZiMytQbjYvOFFBSHdFQUF3RUJBUUVCQVFFQkFRQUFBQUFBQUFFQ0F3UUZCZ2NJQ1FvTC84UUF0UkVBQWdFQ0JBUURCQWNGQkFRQUFRSjNBQUVDQXhFRUJTRXhCaEpCVVFkaGNSTWlNb0VJRkVLUm9iSEJDU016VXZBVlluTFJDaFlrTk9FbDhSY1lHUm9tSnlncEtqVTJOemc1T2tORVJVWkhTRWxLVTFSVlZsZFlXVnBqWkdWbVoyaHBhbk4wZFhaM2VIbDZnb09FaFlhSGlJbUtrcE9VbFphWG1KbWFvcU9rcGFhbnFLbXFzck8wdGJhM3VMbTZ3c1BFeGNiSHlNbkswdFBVMWRiWDJObmE0dVBrNWVibjZPbnE4dlAwOWZiMytQbjYvOW9BREFNQkFBSVJBeEVBUHdEM2FpaWlnQXFock9zMk9nNlpMcUdvVENPQ1A4U3g3S0IzSnEvMEdUWGdIeFQ4U2pXL0VmMk8xdUZsc0xKUXFHTnNxN2taWnNqcjZmZ2FBSlBFUHhaMXZWSlhqMHh2N090ZWcyWU1yRDNidCtHUHFhNG02MU8vdldMWGQ3Y3pzZXBsbFp2NW1xdEZNa2Nranh0dWpkbFBxcHhXenAzakR4RHBUcWJUVjd0UVA0SGtMcC8zeTJSV0pSUUI3ZDRNK0swV3JYTVduYTNISGJYTWhDeDNDY1J1ZXdJUDNUK24wcjAydmtTdnBINGVhNCt2ZUQ3U2FlVGZjdzVnbUpPU1N2UW42akg2MGhvNnFpaWlnWVVVVVVBRkZGRkFITC9FVzhsc2ZBV3F6UXNWY3hySGtkZzdxcC9RbXZteXZwbngzWm0vOERhdkFveXd0eklCL3VFUC93Q3kxNDc4T2ZER25hMWVYV282ek5ISHB0aHRMckk0UlhaczRCUHB3ZnJ4VEV6bDlPMFRWZFdKR242ZmMzSUJ3VEZFV0ErcDZDdG4vaFhYaTNadi9zV2JIKyttZnl6bXZkN2Z4Rm9VVnVrZG5JZnM2akNmWnJXUm93UFlxdU1VNGVML0FBN3YyUHJGcEUvOTJhUVJuOG14U0N4ODFYK2s2anBVZ2oxQ3h1TFZqMEUwWlhQMHoxcW5YMDdlK0lmQ2wxYlBCZWF0cEU4REQ1bzVMaU53Znd6WG5lc2VCL0NHcHlHZlJkVXVMYmR6c2l0WkxpTDhNREkvTTB3c2VUVjJud3MxR2V5OGRXY01ic0lyb1BGS3VlQ05wSS9JZ2ZyWFFlSC9BSVo2RGRYNGl2UEVTWE1pOG16alR5WkNQY01kMlBvUHhyRCtGZGcwL3dBUWJkc1pGcEhMSTMvZkpYK2JDZ0Q2RG9vb3BEQ2lpaWdBb29vb0F6UEVnbFBoZlZoQm56dnNjMnpIWE93NHJ4end6NFRqdC9pQllXZHk2M09teUt0MUVHT1JJR2pkMHlPaHh0UDVlOWU3RUFqQkdRYTgvUGhuK3pQRmx2YlIzakxiM0VESFQyMkF0YXlSTnZDZjdTNGtrR0QvQUE1SHZRQjZBT0JnZEs1angvcDlwcUhoRzhXNGdTU1lLQmJFajVoS1dBVUE5ZVNRUHhxLzlyMTZJYkgwcTFtY2Y4dElyc3FyZStDdVI5T2ZxYVpEcGwvZlg4TjVyTWtBVzNiZkJaMjVKalIvNzdNUUM3RFBIQUE5TTgwQVlMK0VkRDAveHJvekpwZHRGQzF2TUZBWDVXbVhZVnlEMU8zZVI5UGF1NXFscW1tUmFyYUNGNUhpa1J4SkROSDk2SngwWWY1NUJJNzFTam44Uld3RWM5alozdU9CUERPWWkzdVVaVGo4R05BR1A4UzlLaTFEd3NaVlZWdm9aNFJiU2pobFpwRlhBUFhIemZwN1Z5M3dxMFM0MHZXa3VaWlF4dmROTnd5RCtCVElvVEo5VGhqWFcrSkJmdG9sMXFHcEpEQ2xyR3pXMXBDNWZkTVJ0UXV4QTZGaGhRT3ZPVGdWbytGL0R2OEF3ajlnRm1uTnhlUEhHa2t1M2FBcUx0UkZIWlFQekpKNzBDTjJpaWlnWVVVVVVBRkZGRkFCV040bHNiaTYwMUxteVhkZldNcTNWdXY5OWw2cC93QUNVc3Y0MXMwVUFWZE4xQzMxWFRvTDYxYmRETXU1YzlSNmcraEI0STlSVnF1TWxtdXROOFYzUytIclkza08zenRTdFE0VlVrT01HTW5nU0VaSlhvUUFlQ2F0M1h4QzhPV051WHZMdVMzblg3MXJMQ3l6QStoWEg2OVBlZ0RxS0s0VFRmaTE0WnY1ekZNOXpaZjNYdUl4dGI4Vkp4K05YOVI4VFgyb1dFLy9BQWl0bEplRlVKTjR5N1loL3dCYzkyUE1iMEE0ejFQYWdDeHFUZjIzNGt0TkpqK2Eyc0hXN3ZXN2J4L3FvL3JuNWlQUlI2MTBsWS9oaUhUNDlEaGwwNlZwNDU4eXlUeUhNa3NoKzh6L0FPMW5nanRqSGF0aWdBb29vb0FLS0tLQUN1TzEzNG1lSE5Fa2FIN1ExN2NMd1k3VUJnRDd0bkg2bXVYK0xuaSs0dFpFOFAyRXJSNzR3OTA2bkJJUFJNOXVPVDlSNzE0N1FLNTZwZjhBeHN2WEpHbjZSYnhEczA4aGtQNURiWE5haDhUZkZlb0tVL3RIN01oL2h0a0NmK1BmZS9XdVFvcGdlbi9DcnhtYlBVNU5HMUdZdEhleWI0cG5PU0pqMko3N3NEOGZyWFdlSi9EMW40KzFyN05Bb2lUVHcwYytvcU1rdmppSlIwYkJPVzlPZzVKcndVRXF3WlNRUnlDTzFlbmZEZjRpUjZVaWFMckRoYlFzVERjbi9sbVNja043RW5yMituUUF0d2ZCcWUwaWx1WmIyRzltaUllSzFDRkVtQU9Tck5uSXlNampvVDFydE5UOGE2Wm8vZzBhcGJvcXNCNUVObXcyc2tvNDh0bDdiY2Mrdzl4V2g0azhXNlo0WjByN1pjekxJOGk1Z2hSZ1dtUGJIdDc5SytjdGIxbTYxM1ZialVMb3FIbWN1VVFZVmVBT0I5QUJucWNVZ0xWbjR1MS9UN3llNnROVW5pa25rYVdRQTVSbUp5VHRQSDZWMDlsOFl2RWR2Z1hNVmxkcjNMeGxHL05TQitsZWUwVXhIdGVtZkduVFptVk5UMDJlMXp3WGhjU0w5U09EL092UWRKMXJUZGN0ZnRPbVhrVnpGMzJIbGZZanFEOWErVTYwdEQxeSs4UGFwRmYyRXBTUkQ4eTUrV1JlNnNPNE5BN24xVFJWTFNOU2gxblNMVFVZT0k3aUlTQUgrSFBVZmdjajhLS1F6NXU4WjM1MUx4bHExeVNTRGNzaS93QzZwMmo5QUt3cXQ2bEZjSmZ6dmN3U3dzOGpOaVJDcDVPZTlWS1pJVVVVVUFGRkZGQUNsaTJNa25Bd005cVNpaWdBb29vb0FLS0tNWk9CUUI3ajhLZGRoajhHZlpybVRhYmU1ZEVIK3lRRy9teG9yenJRUDdWdE5QWkl0T3ZYUnBDd0tRTVFlQjZEMm9wRFBveVNLT1pDa3FLNm5xckRJckp1dkNQaDI4eVo5RXNHWTlXRUNxZnpBelJSUU14N2o0VytFWjg0MDFvU2U4YzdqOUNTS3h0UStFSGh5S0I1WTdqVVVJSFFTb1IrcTBVVUNPQzFUd2hwOWl6Q0thNU9QN3pML3dERTF5MTNhcEE1Q0ZqajFvb3BnUVJJSGZCeitGYjJuYUJhM1pIbVNURFA5MGovQUFvb29BN3JSUGhkb2Vvak0xMXFBOWxrUWY4QXNsZExCOEkvQ2tKK2VDNm4vd0N1azVIL0FLRGlpaWtCclczZ0R3cGFmNnZSTFp2K3V1WlAvUWlhMmJYU3RQc1FQc2xoYTIrT25sUXF2OGhSUlFNdDBVVVVBZi9aIiwiaWF0IjoxNjAzMDkxOTcxLCJleHAiOjE2MDMxNzgzNzF9.QfXqO69LbHJre6_04zvOgvzIPjPQLJ6l-CRX5SZvEwY'
+    return config;
+  },
+  (error) => {
+    // 请求出错
+    Message({
+      message: error.message,
+      type: "error",
+      duration: 5 * 1000,
+    });
+    Promise.reject(error);
+  }
+);
+
+// 拦截响应
+service.interceptors.response.use(
+  (response) => {
+    const res = response.data;
+    // let { data } = res;
+    const { message, code } = res;
+    // 600表示token异常需要重新登录
+    if (code === 600) {
+      Message({
+        message: "token已过期",
+        type: "error",
+        duration: 1000,
+      });
+      window.location.reload(); // 为了重新实例化vue-router对象，避免bug
+    } else if (code === 500) {
+      // 极端情况服务器错误
+      MessageBox.alert(
+        `状态码：500<br>接口：${response.request.responseURL}<br>原因：${message}`,
+        "请截图并联系运维人员",
+        {
+          confirmButtonText: "我知道了",
+          type: "warning",
+          dangerouslyUseHTMLString: true,
+          customClass: "msgBox",
+          showClose: true,
+        }
+      );
+    } else if (code === 400) {
+      // 业务失败情况统一拦截
+      MessageBox.alert(`原因：${message}`, "操作失败", {
+        confirmButtonText: "我知道了",
+        type: "warning",
+        showClose: true,
+      });
+    }
+    // 正常响应继续传递
+    return res;
+  },
+  (error) => {
+    // http状态码200以外的情况
+    if (process.env.NODE_ENV !== "test") {
+      // 请检查网络链接或联系管理员
+      const msg = "请检查网络链接或联系管理员。";
+      MessageBox.alert(`${error.message}，${msg}`, "网络异常", {
+        confirmButtonText: "重试",
+        type: "warning",
+      }).then(() => {
+        // 清空token
+        window.location.reload(); // 为了重新实例化vue-router对象，避免bug
+      });
+    }
+    return Promise.reject(error);
+  }
+);
+
+export default service;
diff --git a/packages/api/public/crud.ts b/packages/api/public/crud.ts
new file mode 100644
index 0000000..7c020b7
--- /dev/null
+++ b/packages/api/public/crud.ts
@@ -0,0 +1,67 @@
+/*
+ * @file: 通用请求crud
+          可根据后台接口情况自行修改
+ * @copyright: BoBo
+ * @author: BoBo
+ * @Date: 2020年04月24 11:35:00
+ */
+
+import axios from "../axios";
+
+interface optionsType {
+  url: string; // 请求地址
+  method: string; // 请求方法 post / get
+  data?: object; // body报体内容
+  params?: object; // queryString内容
+  headers?: any; // 自定义头,用于设置是否加密请求
+}
+
+/**
+ * 操作类型枚举
+ */
+export enum DML {
+  INSERT = "add",
+  UPDATE = "update",
+  DELETE = "delete",
+  SELECT = "list",
+  TREE = "tree",
+  TREE_LAZY = "treeByParentID",
+  DETAIL = "detail",
+  DELETES = "deleteByIds",
+}
+
+/**
+ *
+ * @param dml 操作类型
+ * @param tableName 数据库表名
+ * @param data body data
+ * @param params query Params
+ */
+export function crud(
+  dml: DML,
+  tableName: string,
+  data: object = {},
+  params: any = null
+) {
+  const options: optionsType = {
+    // url: `/${tableName}/${dml}`, // 例如users表的查询接口为  /users/list
+    url: `/${tableName.replace(/_/g, '/')}/${dml}`,
+    method: "post",
+  };
+  // 以下请求通过包体传参
+  if ("list,treeByParentID".includes(dml)) {
+    // list接口高级查询条件拼接
+    options.data = {
+      orderCondition: "",
+      searchCondition: [],
+      pageIndex: 0,
+      pageSize: 0,
+      ...data,
+    };
+  } else {
+    options.data = data;
+  }
+  options.params = params;
+
+  return axios(options as any);
+}
diff --git a/packages/api/system/form.ts b/packages/api/system/form.ts
new file mode 100644
index 0000000..a3c73e7
--- /dev/null
+++ b/packages/api/system/form.ts
@@ -0,0 +1,53 @@
+/*
+ * @file: 表单设计相关api
+ * @copyright: NanJing Anshare Tech .Com
+ * @author: BoBo
+ * @Date: 2020年08月26 16:14:53
+ */
+import axios from '../axios';
+
+/**
+ * 获取数据库中所有表名
+ *
+ * @returns 所有表名
+ */
+export function getTables() {
+  return axios({
+    url: '/form/getTables',
+    method: 'post',
+  });
+}
+
+/**
+ * 根据表名获取表格的设计json等信息
+ *
+ * @param {String} tablename
+ * @returns 表格设计json
+ */
+export function getTableDetail(tablename) {
+  return axios({
+    url: '/dynamictables/detail',
+    method: 'post',
+    params: { tablename },
+  });
+}
+
+export function getFormDetail(tablename) {
+  return axios({
+    url: '/form/detail',
+    method: 'post',
+    params: { tablename },
+  });
+}
+
+/**
+ *
+ * @param {String} tablename
+ */
+export function getFormKey(tablename) {
+  return axios({
+    url: '/form/getKey',
+    method: 'post',
+    params: { tablename },
+  });
+}
diff --git a/packages/index.js b/packages/index.ts
similarity index 89%
rename from packages/index.js
rename to packages/index.ts
index f1b0967..12778f3 100644
--- a/packages/index.js
+++ b/packages/index.ts
@@ -9,16 +9,16 @@
 
 // 导入单个组件
 import FormDesigner from './FormDesigner';
-import Test from './test';
+import CrudTable from './CrudTable';
 
 // 以数组的结构保存组件，便于遍历
 const components = [
   FormDesigner,
-  Test,
+  CrudTable
 ];
 
 // 定义 install 方法
-const install = (Vue) => {
+const install: any = (Vue) => {
   if (install.installed) return;
   install.installed = true;
   // 遍历并注册全局组件
diff --git a/packages/shims-vue-expand.d.ts b/packages/shims-vue-expand.d.ts
new file mode 100644
index 0000000..26ae7a6
--- /dev/null
+++ b/packages/shims-vue-expand.d.ts
@@ -0,0 +1,27 @@
+/*
+ * @file: 声明vue拓展原型链上的属性类型
+ * @copyright: NanJing Anshare Tech .Com
+ * @author: BoBo
+ * @Date: 2020年06月23 16:47:06
+ */
+/* eslint-disable */
+import VueRouter, { Route } from 'vue-router';
+
+import { Store } from 'vuex';
+
+// 扩充
+declare module 'vue/types/vue' {
+  interface Vue {
+    $router: VueRouter;
+    $route: Route;
+    $store: Store<any>;
+    lodash: any;
+    axios: any;
+    dayjs: any;
+    $pinyinmatch: any;
+    install: any;
+  }
+  interface VueConstructor {
+    install: any;
+  }
+}
diff --git a/packages/shims-vue.d.ts b/packages/shims-vue.d.ts
new file mode 100644
index 0000000..f692f41
--- /dev/null
+++ b/packages/shims-vue.d.ts
@@ -0,0 +1,13 @@
+/*
+ * @file: 让ts识别vue文件,声明第三方模块
+ * @copyright: NanJing Anshare Tech .Com
+ * @author: BoBo
+ * @Date: 2020年06月22 16:26:22
+ */
+declare module '*.vue' {
+  import Vue from 'vue';
+
+  export default Vue;
+}
+
+declare module 'vuedraggable';
diff --git a/packages/test/src/test.vue b/packages/test/src/test.vue
deleted file mode 100644
index 8a19c43..0000000
--- a/packages/test/src/test.vue
+++ /dev/null
@@ -1,22 +0,0 @@
-<!--
- * @file: 测试demo npm
- * @copyright: NanJing Anshare Tech .Com
- * @author: BoBo
- * @Date: 2020年03月03 11:18:45
- -->
-<!-- 组件说明 -->
-<template>
-  <div class='container'>
-    <h2>Hello World!!</h2>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'Test',
-};
-</script>
-
-<style lang='scss' scoped>
-
-</style>
diff --git a/packages/utils/confirm.ts b/packages/utils/confirm.ts
new file mode 100755
index 0000000..bd2b936
--- /dev/null
+++ b/packages/utils/confirm.ts
@@ -0,0 +1,46 @@
+/*
+ * @file: 全局装饰器封装
+ * @copyright: NanJing Anshare Tech .Com
+ * @author: BoBo
+ * @Date: 2020年08月19 17:53:46
+ */
+import { MessageBox } from 'element-ui';
+
+/**
+ * 确认提示框装饰器
+ * @param {*} message 提示信息
+ * @param {*} title 标题
+ * @param {*} cancelFn 取消回调函数
+ */
+export function confirm(message, title = '提示', cancelFn = (error) => {}) {
+  return (target, name, descriptor) => {
+    const originFn = descriptor.value;
+    // eslint-disable-next-line func-names
+    descriptor.value = async function (...rest) {
+      try {
+        await MessageBox.confirm(message, title);
+        originFn.apply(this, rest);
+      } catch (error) {
+        if (cancelFn) {
+          cancelFn(error);
+        }
+      }
+    };
+  };
+}
+
+/**
+ * 提示框装饰器
+ * @param {*} message 提示信息
+ * @param {*} title 提示标题
+ */
+export function alert(message, title = '提示') {
+  return (target, name, descriptor) => {
+    const originFn = descriptor.value;
+    // eslint-disable-next-line func-names
+    descriptor.value = async function (...rest) {
+      await MessageBox.alert(message, title);
+      originFn.apply(this, rest);
+    };
+  };
+}
diff --git a/packages/utils/generator.ts b/packages/utils/generator.ts
new file mode 100644
index 0000000..f08df90
--- /dev/null
+++ b/packages/utils/generator.ts
@@ -0,0 +1,16 @@
+/**
+ * @file 公共生成器
+ * @author BoBo
+ * @copyright NanJing Anshare Tech .Com
+ * @createDate 2018年11月23日17:41:47
+ */
+
+// 允许按位操作符通过eslint检查
+/* eslint no-bitwise: ["error", { "allow": ["|","&"] }] */
+export default function guid() {
+  return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, (c) => {
+    const r = Math.random() * 16 | 0;
+    const v = c === 'x' ? r : ((r & 0x3) | 0x8);
+    return v.toString(16);
+  });
+}
diff --git a/tsconfig.json b/tsconfig.json
new file mode 100644
index 0000000..ddd0b24
--- /dev/null
+++ b/tsconfig.json
@@ -0,0 +1,41 @@
+{
+  "compilerOptions": {
+    "target": "esnext",
+    "module": "esnext",
+    "strict": true,
+    "jsx": "preserve",
+    "importHelpers": true,
+    "moduleResolution": "node",
+    "experimentalDecorators": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "sourceMap": true,
+    "noImplicitAny": false,
+    "baseUrl": ".",
+    "types": [
+      "webpack-env",
+      "./../element-ui/types",
+    ],
+    "paths": {
+      "@/*": [
+        "examples/*",
+        "packages/*"
+      ]
+    },
+    "lib": [
+      "esnext",
+      "dom",
+      "dom.iterable",
+      "scripthost"
+    ]
+  },
+  "include": [
+    "examples/**/*.ts",
+    "examples/**/*.vue",
+    "packages/**/*.ts",
+    "packages/**/*.tsx"
+  ],
+  "exclude": [
+    "node_modules"
+  ]
+}
diff --git a/vue.config.js b/vue.config.js
index aff1a0e..eb00bb6 100644
--- a/vue.config.js
+++ b/vue.config.js
@@ -4,11 +4,11 @@ module.exports = {
   pages: {
     index: {
       // page 的入口
-      entry: 'examples/main.js',
+      entry: 'examples/main.ts',
       // 模板来源
       template: 'public/index.html',
       // 输出文件名
-      filename: 'index.html'
-    }
-  }
-}
\ No newline at end of file
+      filename: 'index.html',
+    },
+  },
+};