From 77779eefa90216d3dbc60d3b255a8c2da9b7936e Mon Sep 17 00:00:00 2001
From: vdpAdmin <vdpadmin@163.com>
Date: Thu, 14 Oct 2021 15:20:09 +0800
Subject: [PATCH] =?UTF-8?q?=E7=BB=84=E4=BB=B6=E6=8B=86=E5=88=86=E9=87=8D?=
 =?UTF-8?q?=E6=9E=84=EF=BC=8C=E5=B1=9E=E6=80=A7=E8=AE=BE=E7=BD=AE=E6=8B=86?=
 =?UTF-8?q?=E5=88=86=E9=87=8D=E6=9E=84=E3=80=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json                                  |    2 +-
 src/components/form-designer/designer.js      |   14 +-
 .../form-widget/container-widget.vue          |  408 -----
 .../container-widget/container-wrapper.vue    |  100 ++
 .../container-widget/containerMixin.js        |   89 ++
 .../grid-col-widget.vue                       |   16 +-
 .../container-widget/grid-widget.vue          |   88 ++
 .../form-widget/container-widget/index.js     |   10 +
 .../container-widget/tab-widget.vue           |  121 ++
 .../table-cell-widget.vue                     |   16 +-
 .../container-widget/table-widget.vue         |  111 ++
 .../form-widget/field-widget.vue              | 1340 -----------------
 .../field-widget/button-widget.vue            |   87 ++
 .../field-widget/cascader-widget.vue          |  104 ++
 .../field-widget/checkbox-widget.vue          |  105 ++
 .../form-widget/field-widget/color-widget.vue |   99 ++
 .../field-widget/date-range-widget.vue        |  104 ++
 .../form-widget/field-widget/date-widget.vue  |  103 ++
 .../field-widget/divider-widget.vue           |   83 +
 .../form-widget/field-widget/fieldMixin.js    |  451 ++++++
 .../field-widget/file-upload-widget.vue       |  264 ++++
 .../field-widget/form-item-wrapper.vue        |  331 ++++
 .../field-widget/html-text-widget.vue         |   82 +
 .../form-widget/field-widget/index.js         |   10 +
 .../form-widget/field-widget/input-widget.vue |  112 ++
 .../field-widget/number-widget.vue            |  103 ++
 .../field-widget/picture-upload-widget.vue    |  219 +++
 .../form-widget/field-widget/radio-widget.vue |  105 ++
 .../form-widget/field-widget/rate-widget.vue  |  102 ++
 .../field-widget/rich-editor-widget.vue       |  121 ++
 .../field-widget/select-widget.vue            |  115 ++
 .../field-widget/slider-widget.vue            |  100 ++
 .../field-widget/static-content-wrapper.vue   |  185 +++
 .../field-widget/static-text-widget.vue       |   82 +
 .../field-widget/switch-widget.vue            |  101 ++
 .../field-widget/textarea-widget.vue          |   99 ++
 .../field-widget/time-range-widget.vue        |  104 ++
 .../form-widget/field-widget/time-widget.vue  |  103 ++
 .../form-designer/form-widget/index.vue       |   23 +-
 .../form-designer/form-widget/tab-pane.vue    |   90 --
 src/components/form-designer/index.vue        |   27 +-
 .../setting-panel/form-setting.vue            |  300 ++++
 .../form-designer/setting-panel/index.vue     | 1160 ++------------
 .../property-editor/allowCreate-editor.vue    |   24 +
 .../property-editor/appendButton-editor.vue   |   28 +
 .../appendButtonDisabled-editor.vue           |   23 +
 .../automaticDropdown-editor.vue              |   23 +
 .../property-editor/border-editor.vue         |   23 +
 .../property-editor/buttonIcon-editor.vue     |   23 +
 .../property-editor/buttonStyle-editor.vue    |   23 +
 .../property-editor/clearable-editor.vue      |   23 +
 .../property-editor/columnWidth-editor.vue    |   40 +
 .../grid-col-span-editor.vue                  |   24 +
 .../container-grid/gutter-editor.vue          |   81 +
 .../showBlankRow-editor.vue                   |   23 +
 .../showRowNumber-editor.vue                  |   23 +
 .../sub-form-labelAlign-editor.vue            |   36 +
 .../container-tab/tab-customClass-editor.vue  |  119 ++
 .../cellHeight-editor.vue                     |   23 +
 .../container-table-cell/cellWidth-editor.vue |   23 +
 .../property-editor/customClass-editor.vue    |   40 +
 .../property-editor/defaultValue-editor.vue   |   25 +
 .../property-editor/disabled-editor.vue       |   23 +
 .../property-editor/displayStyle-editor.vue   |   26 +
 .../property-editor/editable-editor.vue       |   24 +
 .../property-editor/endPlaceholder-editor.vue |   23 +
 .../event-handler/eventMixin.js               |   19 +
 .../event-handler/onBeforeUpload-editor.vue   |   30 +
 .../event-handler/onBlur-editor.vue           |   30 +
 .../event-handler/onChange-editor.vue         |   30 +
 .../event-handler/onClick-editor.vue          |   30 +
 .../event-handler/onCreated-editor.vue        |   31 +
 .../event-handler/onFocus-editor.vue          |   30 +
 .../event-handler/onInput-editor.vue          |   30 +
 .../event-handler/onMounted-editor.vue        |   30 +
 .../event-handler/onRemoteQuery-editor.vue    |   30 +
 .../event-handler/onSubFormRowAdd-editor.vue  |   30 +
 .../onSubFormRowChange-editor.vue             |   30 +
 .../onSubFormRowDelete-editor.vue             |   30 +
 .../onSubFormRowInsert-editor.vue             |   30 +
 .../event-handler/onUploadError-editor.vue    |   30 +
 .../event-handler/onUploadSuccess-editor.vue  |   30 +
 .../event-handler/onValidate-editor.vue       |   30 +
 .../field-button/button-type-editor.vue       |   32 +
 .../field-button/circle-editor.vue            |   23 +
 .../field-button/icon-editor.vue              |   23 +
 .../field-button/plain-editor.vue             |   24 +
 .../field-button/round-editor.vue             |   23 +
 .../field-color/color-defaultValue-editor.vue |   23 +
 .../date-range-defaultValue-editor.vue        |   24 +
 .../date-range-format-editor.vue              |   30 +
 .../date-range-type-editor.vue                |   27 +
 .../date-range-valueFormat-editor.vue         |   26 +
 .../field-date/date-defaultValue-editor.vue   |   24 +
 .../field-date/date-format-editor.vue         |   30 +
 .../field-date/date-type-editor.vue           |   30 +
 .../field-date/date-valueFormat-editor.vue    |   26 +
 .../field-divider/contentPosition-editor.vue  |   27 +
 .../file-upload-fileTypes-editor.vue          |   44 +
 .../field-html-text/htmlContent-editor.vue    |   23 +
 .../field-number/controlsPosition-editor.vue  |   27 +
 .../picture-upload-fileTypes-editor.vue       |   43 +
 .../field-rate/allowHalf-editor.vue           |   23 +
 .../field-rate/highThreshold-editor.vue       |   24 +
 .../field-rate/lowThreshold-editor.vue        |   24 +
 .../field-rate/rate-defaultValue-editor.vue   |   24 +
 .../field-rate/rate-max-editor.vue            |   25 +
 .../field-rate/showScore-editor.vue           |   23 +
 .../field-rate/showText-editor.vue            |   23 +
 .../field-slider/range-editor.vue             |   23 +
 .../field-slider/vertical-editor.vue          |   23 +
 .../field-static-text/textContent-editor.vue  |   23 +
 .../field-switch/activeText-editor.vue        |   23 +
 .../field-switch/inactiveColor-editor.vue     |   23 +
 .../switch-defaultValue-editor.vue            |   23 +
 .../field-switch/switchWidth-editor.vue       |   23 +
 .../time-range-defaultValue-editor.vue        |   24 +
 .../time-range-format-editor.vue              |   27 +
 .../field-time/time-defaultValue-editor.vue   |   24 +
 .../field-time/time-format-editor.vue         |   27 +
 .../property-editor/fileMaxSize-editor.vue    |   23 +
 .../property-editor/filterable-editor.vue     |   23 +
 .../property-editor/hidden-editor.vue         |   23 +
 .../setting-panel/property-editor/index.js    |   10 +
 .../property-editor/label-editor.vue          |   30 +
 .../property-editor/labelAlign-editor.vue     |   42 +
 .../property-editor/labelHidden-editor.vue    |   23 +
 .../property-editor/labelIconClass-editor.vue |   28 +
 .../labelIconPosition-editor.vue              |   37 +
 .../property-editor/labelTooltip-editor.vue   |   23 +
 .../property-editor/labelWidth-editor.vue     |   25 +
 .../property-editor/limit-editor.vue          |   24 +
 .../property-editor/max-editor.vue            |   39 +
 .../property-editor/maxLength-editor.vue      |   40 +
 .../property-editor/min-editor.vue            |   40 +
 .../property-editor/minLength-editor.vue      |   41 +
 .../property-editor/multiple-editor.vue       |   24 +
 .../property-editor/multipleLimit-editor.vue  |   24 +
 .../property-editor/multipleSelect-editor.vue |   24 +
 .../property-editor/name-editor.vue           |   57 +
 .../property-editor/optionItems-editor.vue    |   28 +
 .../property-editor/placeholder-editor.vue    |   24 +
 .../property-editor/precision-editor.vue      |   23 +
 .../property-editor/prefixIcon-editor.vue     |   23 +
 .../property-editor/propertyMixin.js          |   47 +
 .../property-editor/readonly-editor.vue       |   23 +
 .../property-editor/remote-editor.vue         |   25 +
 .../property-editor/required-editor.vue       |   23 +
 .../property-editor/rows-editor.vue           |   24 +
 .../property-editor/showFileList-editor.vue   |   23 +
 .../property-editor/showPassword-editor.vue   |   24 +
 .../property-editor/showWordLimit-editor.vue  |   23 +
 .../property-editor/size-editor.vue           |   38 +
 .../startPlaceholder-editor.vue               |   23 +
 .../property-editor/step-editor.vue           |   23 +
 .../property-editor/suffixIcon-editor.vue     |   23 +
 .../property-editor/type-editor.vue           |   33 +
 .../property-editor/uploadTip-editor.vue      |   24 +
 .../property-editor/uploadURL-editor.vue      |   28 +
 .../property-editor/validation-editor.vue     |   48 +
 .../property-editor/validationHint-editor.vue |   23 +
 .../withCredentials-editor.vue                |   23 +
 .../setting-panel/propertyRegister.js         |  144 ++
 .../widget-panel/widgetsConfig.js             |    7 +
 src/components/form-render/container-item.vue |  599 --------
 .../container-item/container-item-wrapper.vue |   25 +
 .../container-item/containerItemMixin.js      |  136 ++
 .../{ => container-item}/grid-col-item.vue    |   20 +-
 .../form-render/container-item/grid-item.vue  |   53 +
 .../form-render/container-item/index.js       |   10 +
 .../container-item/sub-form-item.vue          |  405 +++++
 .../form-render/container-item/tab-item.vue   |   91 ++
 .../{ => container-item}/table-cell-item.vue  |   21 +-
 .../form-render/container-item/table-item.vue |   65 +
 src/components/form-render/index.vue          |   33 +-
 src/lang/en-US.js                             |    3 +
 src/lang/en-US_extension.js                   |    5 +
 src/lang/zh-CN.js                             |    7 +-
 src/lang/zh-CN_extension.js                   |    5 +
 src/utils/config.js                           |    4 +-
 src/utils/i18n.js                             |    8 +-
 src/utils/util.js                             |    9 +-
 182 files changed, 8855 insertions(+), 3581 deletions(-)
 delete mode 100644 src/components/form-designer/form-widget/container-widget.vue
 create mode 100644 src/components/form-designer/form-widget/container-widget/container-wrapper.vue
 create mode 100644 src/components/form-designer/form-widget/container-widget/containerMixin.js
 rename src/components/form-designer/form-widget/{ => container-widget}/grid-col-widget.vue (90%)
 create mode 100644 src/components/form-designer/form-widget/container-widget/grid-widget.vue
 create mode 100644 src/components/form-designer/form-widget/container-widget/index.js
 create mode 100644 src/components/form-designer/form-widget/container-widget/tab-widget.vue
 rename src/components/form-designer/form-widget/{ => container-widget}/table-cell-widget.vue (94%)
 create mode 100644 src/components/form-designer/form-widget/container-widget/table-widget.vue
 delete mode 100644 src/components/form-designer/form-widget/field-widget.vue
 create mode 100644 src/components/form-designer/form-widget/field-widget/button-widget.vue
 create mode 100644 src/components/form-designer/form-widget/field-widget/cascader-widget.vue
 create mode 100644 src/components/form-designer/form-widget/field-widget/checkbox-widget.vue
 create mode 100644 src/components/form-designer/form-widget/field-widget/color-widget.vue
 create mode 100644 src/components/form-designer/form-widget/field-widget/date-range-widget.vue
 create mode 100644 src/components/form-designer/form-widget/field-widget/date-widget.vue
 create mode 100644 src/components/form-designer/form-widget/field-widget/divider-widget.vue
 create mode 100644 src/components/form-designer/form-widget/field-widget/fieldMixin.js
 create mode 100644 src/components/form-designer/form-widget/field-widget/file-upload-widget.vue
 create mode 100644 src/components/form-designer/form-widget/field-widget/form-item-wrapper.vue
 create mode 100644 src/components/form-designer/form-widget/field-widget/html-text-widget.vue
 create mode 100644 src/components/form-designer/form-widget/field-widget/index.js
 create mode 100644 src/components/form-designer/form-widget/field-widget/input-widget.vue
 create mode 100644 src/components/form-designer/form-widget/field-widget/number-widget.vue
 create mode 100644 src/components/form-designer/form-widget/field-widget/picture-upload-widget.vue
 create mode 100644 src/components/form-designer/form-widget/field-widget/radio-widget.vue
 create mode 100644 src/components/form-designer/form-widget/field-widget/rate-widget.vue
 create mode 100644 src/components/form-designer/form-widget/field-widget/rich-editor-widget.vue
 create mode 100644 src/components/form-designer/form-widget/field-widget/select-widget.vue
 create mode 100644 src/components/form-designer/form-widget/field-widget/slider-widget.vue
 create mode 100644 src/components/form-designer/form-widget/field-widget/static-content-wrapper.vue
 create mode 100644 src/components/form-designer/form-widget/field-widget/static-text-widget.vue
 create mode 100644 src/components/form-designer/form-widget/field-widget/switch-widget.vue
 create mode 100644 src/components/form-designer/form-widget/field-widget/textarea-widget.vue
 create mode 100644 src/components/form-designer/form-widget/field-widget/time-range-widget.vue
 create mode 100644 src/components/form-designer/form-widget/field-widget/time-widget.vue
 delete mode 100644 src/components/form-designer/form-widget/tab-pane.vue
 create mode 100644 src/components/form-designer/setting-panel/form-setting.vue
 create mode 100644 src/components/form-designer/setting-panel/property-editor/allowCreate-editor.vue
 create mode 100644 src/components/form-designer/setting-panel/property-editor/appendButton-editor.vue
 create mode 100644 src/components/form-designer/setting-panel/property-editor/appendButtonDisabled-editor.vue
 create mode 100644 src/components/form-designer/setting-panel/property-editor/automaticDropdown-editor.vue
 create mode 100644 src/components/form-designer/setting-panel/property-editor/border-editor.vue
 create mode 100644 src/components/form-designer/setting-panel/property-editor/buttonIcon-editor.vue
 create mode 100644 src/components/form-designer/setting-panel/property-editor/buttonStyle-editor.vue
 create mode 100644 src/components/form-designer/setting-panel/property-editor/clearable-editor.vue
 create mode 100644 src/components/form-designer/setting-panel/property-editor/columnWidth-editor.vue
 create mode 100644 src/components/form-designer/setting-panel/property-editor/container-grid-col/grid-col-span-editor.vue
 create mode 100644 src/components/form-designer/setting-panel/property-editor/container-grid/gutter-editor.vue
 create mode 100644 src/components/form-designer/setting-panel/property-editor/container-sub-form/showBlankRow-editor.vue
 create mode 100644 src/components/form-designer/setting-panel/property-editor/container-sub-form/showRowNumber-editor.vue
 create mode 100644 src/components/form-designer/setting-panel/property-editor/container-sub-form/sub-form-labelAlign-editor.vue
 create mode 100644 src/components/form-designer/setting-panel/property-editor/container-tab/tab-customClass-editor.vue
 create mode 100644 src/components/form-designer/setting-panel/property-editor/container-table-cell/cellHeight-editor.vue
 create mode 100644 src/components/form-designer/setting-panel/property-editor/container-table-cell/cellWidth-editor.vue
 create mode 100644 src/components/form-designer/setting-panel/property-editor/customClass-editor.vue
 create mode 100644 src/components/form-designer/setting-panel/property-editor/defaultValue-editor.vue
 create mode 100644 src/components/form-designer/setting-panel/property-editor/disabled-editor.vue
 create mode 100644 src/components/form-designer/setting-panel/property-editor/displayStyle-editor.vue
 create mode 100644 src/components/form-designer/setting-panel/property-editor/editable-editor.vue
 create mode 100644 src/components/form-designer/setting-panel/property-editor/endPlaceholder-editor.vue
 create mode 100644 src/components/form-designer/setting-panel/property-editor/event-handler/eventMixin.js
 create mode 100644 src/components/form-designer/setting-panel/property-editor/event-handler/onBeforeUpload-editor.vue
 create mode 100644 src/components/form-designer/setting-panel/property-editor/event-handler/onBlur-editor.vue
 create mode 100644 src/components/form-designer/setting-panel/property-editor/event-handler/onChange-editor.vue
 create mode 100644 src/components/form-designer/setting-panel/property-editor/event-handler/onClick-editor.vue
 create mode 100644 src/components/form-designer/setting-panel/property-editor/event-handler/onCreated-editor.vue
 create mode 100644 src/components/form-designer/setting-panel/property-editor/event-handler/onFocus-editor.vue
 create mode 100644 src/components/form-designer/setting-panel/property-editor/event-handler/onInput-editor.vue
 create mode 100644 src/components/form-designer/setting-panel/property-editor/event-handler/onMounted-editor.vue
 create mode 100644 src/components/form-designer/setting-panel/property-editor/event-handler/onRemoteQuery-editor.vue
 create mode 100644 src/components/form-designer/setting-panel/property-editor/event-handler/onSubFormRowAdd-editor.vue
 create mode 100644 src/components/form-designer/setting-panel/property-editor/event-handler/onSubFormRowChange-editor.vue
 create mode 100644 src/components/form-designer/setting-panel/property-editor/event-handler/onSubFormRowDelete-editor.vue
 create mode 100644 src/components/form-designer/setting-panel/property-editor/event-handler/onSubFormRowInsert-editor.vue
 create mode 100644 src/components/form-designer/setting-panel/property-editor/event-handler/onUploadError-editor.vue
 create mode 100644 src/components/form-designer/setting-panel/property-editor/event-handler/onUploadSuccess-editor.vue
 create mode 100644 src/components/form-designer/setting-panel/property-editor/event-handler/onValidate-editor.vue
 create mode 100644 src/components/form-designer/setting-panel/property-editor/field-button/button-type-editor.vue
 create mode 100644 src/components/form-designer/setting-panel/property-editor/field-button/circle-editor.vue
 create mode 100644 src/components/form-designer/setting-panel/property-editor/field-button/icon-editor.vue
 create mode 100644 src/components/form-designer/setting-panel/property-editor/field-button/plain-editor.vue
 create mode 100644 src/components/form-designer/setting-panel/property-editor/field-button/round-editor.vue
 create mode 100644 src/components/form-designer/setting-panel/property-editor/field-color/color-defaultValue-editor.vue
 create mode 100644 src/components/form-designer/setting-panel/property-editor/field-date-range/date-range-defaultValue-editor.vue
 create mode 100644 src/components/form-designer/setting-panel/property-editor/field-date-range/date-range-format-editor.vue
 create mode 100644 src/components/form-designer/setting-panel/property-editor/field-date-range/date-range-type-editor.vue
 create mode 100644 src/components/form-designer/setting-panel/property-editor/field-date-range/date-range-valueFormat-editor.vue
 create mode 100644 src/components/form-designer/setting-panel/property-editor/field-date/date-defaultValue-editor.vue
 create mode 100644 src/components/form-designer/setting-panel/property-editor/field-date/date-format-editor.vue
 create mode 100644 src/components/form-designer/setting-panel/property-editor/field-date/date-type-editor.vue
 create mode 100644 src/components/form-designer/setting-panel/property-editor/field-date/date-valueFormat-editor.vue
 create mode 100644 src/components/form-designer/setting-panel/property-editor/field-divider/contentPosition-editor.vue
 create mode 100644 src/components/form-designer/setting-panel/property-editor/field-file-upload/file-upload-fileTypes-editor.vue
 create mode 100644 src/components/form-designer/setting-panel/property-editor/field-html-text/htmlContent-editor.vue
 create mode 100644 src/components/form-designer/setting-panel/property-editor/field-number/controlsPosition-editor.vue
 create mode 100644 src/components/form-designer/setting-panel/property-editor/field-picture-upload/picture-upload-fileTypes-editor.vue
 create mode 100644 src/components/form-designer/setting-panel/property-editor/field-rate/allowHalf-editor.vue
 create mode 100644 src/components/form-designer/setting-panel/property-editor/field-rate/highThreshold-editor.vue
 create mode 100644 src/components/form-designer/setting-panel/property-editor/field-rate/lowThreshold-editor.vue
 create mode 100644 src/components/form-designer/setting-panel/property-editor/field-rate/rate-defaultValue-editor.vue
 create mode 100644 src/components/form-designer/setting-panel/property-editor/field-rate/rate-max-editor.vue
 create mode 100644 src/components/form-designer/setting-panel/property-editor/field-rate/showScore-editor.vue
 create mode 100644 src/components/form-designer/setting-panel/property-editor/field-rate/showText-editor.vue
 create mode 100644 src/components/form-designer/setting-panel/property-editor/field-slider/range-editor.vue
 create mode 100644 src/components/form-designer/setting-panel/property-editor/field-slider/vertical-editor.vue
 create mode 100644 src/components/form-designer/setting-panel/property-editor/field-static-text/textContent-editor.vue
 create mode 100644 src/components/form-designer/setting-panel/property-editor/field-switch/activeText-editor.vue
 create mode 100644 src/components/form-designer/setting-panel/property-editor/field-switch/inactiveColor-editor.vue
 create mode 100644 src/components/form-designer/setting-panel/property-editor/field-switch/switch-defaultValue-editor.vue
 create mode 100644 src/components/form-designer/setting-panel/property-editor/field-switch/switchWidth-editor.vue
 create mode 100644 src/components/form-designer/setting-panel/property-editor/field-time-range/time-range-defaultValue-editor.vue
 create mode 100644 src/components/form-designer/setting-panel/property-editor/field-time-range/time-range-format-editor.vue
 create mode 100644 src/components/form-designer/setting-panel/property-editor/field-time/time-defaultValue-editor.vue
 create mode 100644 src/components/form-designer/setting-panel/property-editor/field-time/time-format-editor.vue
 create mode 100644 src/components/form-designer/setting-panel/property-editor/fileMaxSize-editor.vue
 create mode 100644 src/components/form-designer/setting-panel/property-editor/filterable-editor.vue
 create mode 100644 src/components/form-designer/setting-panel/property-editor/hidden-editor.vue
 create mode 100644 src/components/form-designer/setting-panel/property-editor/index.js
 create mode 100644 src/components/form-designer/setting-panel/property-editor/label-editor.vue
 create mode 100644 src/components/form-designer/setting-panel/property-editor/labelAlign-editor.vue
 create mode 100644 src/components/form-designer/setting-panel/property-editor/labelHidden-editor.vue
 create mode 100644 src/components/form-designer/setting-panel/property-editor/labelIconClass-editor.vue
 create mode 100644 src/components/form-designer/setting-panel/property-editor/labelIconPosition-editor.vue
 create mode 100644 src/components/form-designer/setting-panel/property-editor/labelTooltip-editor.vue
 create mode 100644 src/components/form-designer/setting-panel/property-editor/labelWidth-editor.vue
 create mode 100644 src/components/form-designer/setting-panel/property-editor/limit-editor.vue
 create mode 100644 src/components/form-designer/setting-panel/property-editor/max-editor.vue
 create mode 100644 src/components/form-designer/setting-panel/property-editor/maxLength-editor.vue
 create mode 100644 src/components/form-designer/setting-panel/property-editor/min-editor.vue
 create mode 100644 src/components/form-designer/setting-panel/property-editor/minLength-editor.vue
 create mode 100644 src/components/form-designer/setting-panel/property-editor/multiple-editor.vue
 create mode 100644 src/components/form-designer/setting-panel/property-editor/multipleLimit-editor.vue
 create mode 100644 src/components/form-designer/setting-panel/property-editor/multipleSelect-editor.vue
 create mode 100644 src/components/form-designer/setting-panel/property-editor/name-editor.vue
 create mode 100644 src/components/form-designer/setting-panel/property-editor/optionItems-editor.vue
 create mode 100644 src/components/form-designer/setting-panel/property-editor/placeholder-editor.vue
 create mode 100644 src/components/form-designer/setting-panel/property-editor/precision-editor.vue
 create mode 100644 src/components/form-designer/setting-panel/property-editor/prefixIcon-editor.vue
 create mode 100644 src/components/form-designer/setting-panel/property-editor/propertyMixin.js
 create mode 100644 src/components/form-designer/setting-panel/property-editor/readonly-editor.vue
 create mode 100644 src/components/form-designer/setting-panel/property-editor/remote-editor.vue
 create mode 100644 src/components/form-designer/setting-panel/property-editor/required-editor.vue
 create mode 100644 src/components/form-designer/setting-panel/property-editor/rows-editor.vue
 create mode 100644 src/components/form-designer/setting-panel/property-editor/showFileList-editor.vue
 create mode 100644 src/components/form-designer/setting-panel/property-editor/showPassword-editor.vue
 create mode 100644 src/components/form-designer/setting-panel/property-editor/showWordLimit-editor.vue
 create mode 100644 src/components/form-designer/setting-panel/property-editor/size-editor.vue
 create mode 100644 src/components/form-designer/setting-panel/property-editor/startPlaceholder-editor.vue
 create mode 100644 src/components/form-designer/setting-panel/property-editor/step-editor.vue
 create mode 100644 src/components/form-designer/setting-panel/property-editor/suffixIcon-editor.vue
 create mode 100644 src/components/form-designer/setting-panel/property-editor/type-editor.vue
 create mode 100644 src/components/form-designer/setting-panel/property-editor/uploadTip-editor.vue
 create mode 100644 src/components/form-designer/setting-panel/property-editor/uploadURL-editor.vue
 create mode 100644 src/components/form-designer/setting-panel/property-editor/validation-editor.vue
 create mode 100644 src/components/form-designer/setting-panel/property-editor/validationHint-editor.vue
 create mode 100644 src/components/form-designer/setting-panel/property-editor/withCredentials-editor.vue
 create mode 100644 src/components/form-designer/setting-panel/propertyRegister.js
 delete mode 100644 src/components/form-render/container-item.vue
 create mode 100644 src/components/form-render/container-item/container-item-wrapper.vue
 create mode 100644 src/components/form-render/container-item/containerItemMixin.js
 rename src/components/form-render/{ => container-item}/grid-col-item.vue (70%)
 create mode 100644 src/components/form-render/container-item/grid-item.vue
 create mode 100644 src/components/form-render/container-item/index.js
 create mode 100644 src/components/form-render/container-item/sub-form-item.vue
 create mode 100644 src/components/form-render/container-item/tab-item.vue
 rename src/components/form-render/{ => container-item}/table-cell-item.vue (61%)
 create mode 100644 src/components/form-render/container-item/table-item.vue
 create mode 100644 src/lang/en-US_extension.js
 create mode 100644 src/lang/zh-CN_extension.js

diff --git a/package.json b/package.json
index dd78e20..e116f8f 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "variant-form",
-  "version": "2.0.1",
+  "version": "2.1.0",
   "private": false,
   "scripts": {
     "serve": "vue-cli-service serve --open src/main.js",
diff --git a/src/components/form-designer/designer.js b/src/components/form-designer/designer.js
index 12eb976..900875e 100644
--- a/src/components/form-designer/designer.js
+++ b/src/components/form-designer/designer.js
@@ -1,7 +1,7 @@
 /**
  * author: vformAdmin
  * email: vdpadmin@163.com
- * website: http://www.vform666.com/
+ * website: http://www.vform666.com
  * date: 2021.08.18
  * remark: 如果要分发VForm源码，需在本文件顶部保留此文件头信息！！
  */
@@ -40,6 +40,8 @@ export function createDesigner(vueInstance) {
 
     formWidget: null,  //表单设计容器
 
+    cssClassList: [],  //自定义样式列表
+
     historyData: {
       index: -1,  //index: 0,
       maxStep: 20,
@@ -528,7 +530,7 @@ export function createDesigner(vueInstance) {
         })
 
         return newTable
-      } else {
+      } else {  //其他容器组件不支持clone操作
         return null
       }
     },
@@ -683,6 +685,14 @@ export function createDesigner(vueInstance) {
       this.vueInstance.$on(evtName, (data) => callback(data))
     },
 
+    setCssClassList(cssClassList) {
+      this.cssClassList = cssClassList
+    },
+
+    getCssClassList() {
+      return this.cssClassList
+    },
+
     registerFormWidget(formWidget) {
       this.formWidget = formWidget
     },
diff --git a/src/components/form-designer/form-widget/container-widget.vue b/src/components/form-designer/form-widget/container-widget.vue
deleted file mode 100644
index 8c46883..0000000
--- a/src/components/form-designer/form-widget/container-widget.vue
+++ /dev/null
@@ -1,408 +0,0 @@
-<template>
-  <div class="container-wrapper">
-
-    <el-row v-if="widget.type === 'grid'" :key="widget.id" :gutter="widget.options.gutter" class="grid-container"
-            :class="[selected ? 'selected' : '', customClass]"
-            @click.native.stop="selectWidget(widget)">
-      <template v-for="(colWidget, colIdx) in widget.cols">
-        <grid-col-widget :widget="colWidget" :designer="designer" :key="colWidget.id" :parent-list="widget.cols"
-                          :index-of-parent-list="colIdx" :parent-widget="widget"></grid-col-widget>
-      </template>
-
-    </el-row>
-
-    <div v-else-if="widget.type === 'table'" :key="widget.id" class="table-container"
-           :class="{'selected': selected}" @click.stop="selectWidget(widget)">
-      <table class="table-layout">
-      <tbody>
-      <tr v-for="(row, rowIdx) in widget.rows" :key="row.id">
-        <template v-for="(colWidget, colIdx) in row.cols">
-          <table-cell-widget v-if="!colWidget.merged" :widget="colWidget" :designer="designer"
-                             :key="colWidget.id" :parent-list="widget.cols"
-                             :row-index="rowIdx" :row-length="widget.rows.length"
-                             :col-index="colIdx" :col-length="row.cols.length"
-                             :col-array="row.cols" :row-array="widget.rows"
-                             :parent-widget="widget"></table-cell-widget>
-        </template>
-      </tr>
-      </tbody>
-      </table>
-    </div>
-
-    <div v-else-if="widget.type === 'tab'" :key="widget.id" class="tab-container"
-         :class="{'selected': selected}" @click.stop="selectWidget(widget)">
-    <el-tabs :type="widget.displayType" v-model="activeTab" @tab-click="onTabClick">
-
-      <el-tab-pane v-for="(tab, index) in widget.tabs" :key="index" :label="tab.options.label" :name="tab.options.name"
-                   @click.native.stop="selectWidget(widget)">
-        <draggable :list="tab.widgetList" v-bind="{group:'dragGroup', ghostClass: 'ghost',animation: 200}"
-                   handle=".drag-handler"
-                   @add="(evt) => onContainerDragAdd(evt, tab.widgetList)"
-                   @update="onContainerDragUpdate" :move="checkContainerMove">
-          <transition-group name="fade" tag="div" class="form-widget-list">
-            <template v-for="(subWidget, swIdx) in tab.widgetList">
-              <template v-if="'container' === subWidget.category">
-                <container-widget :widget="subWidget" :designer="designer" :key="subWidget.id" :parent-list="tab.widgetList"
-                                  :index-of-parent-list="swIdx" :parent-widget="widget"></container-widget>
-              </template>
-              <template v-else>
-                <field-widget :field="subWidget" :designer="designer" :key="subWidget.id" :parent-list="tab.widgetList"
-                              :index-of-parent-list="swIdx" :parent-widget="widget" :design-state="true"></field-widget>
-              </template>
-            </template>
-          </transition-group>
-        </draggable>
-      </el-tab-pane>
-
-    </el-tabs>
-    </div>
-
-    <div v-else-if="widget.type === 'section'" :key="widget.id" class="section-container"
-         :class="{'selected': selected}" @click.stop="selectWidget(widget)">
-      <draggable :list="widget.widgetList" v-bind="{group:'dragGroup', ghostClass: 'ghost', animation: 200}"
-                 handle=".drag-handler"
-                 @add="(evt) => onContainerDragAdd(evt, widget.widgetList)"
-                 @update="onContainerDragUpdate" :move="checkContainerMove">
-        <transition-group name="fade" tag="div" class="form-widget-list">
-          <template v-for="(subWidget, swIdx) in widget.widgetList">
-            <template v-if="'container' === subWidget.category">
-              <container-widget :widget="subWidget" :designer="designer" :key="subWidget.id" :parent-list="widget.widgetList"
-                                :index-of-parent-list="swIdx" :parent-widget="widget"></container-widget>
-            </template>
-            <template v-else>
-              <field-widget :field="subWidget" :designer="designer" :key="subWidget.id" :parent-list="widget.widgetList"
-                            :index-of-parent-list="swIdx" :parent-widget="widget" :design-state="true"></field-widget>
-            </template>
-          </template>
-        </transition-group>
-      </draggable>
-    </div>
-
-    <div class="container-action" v-if="designer.selectedId === widget.id && !widget.internal">
-      <i class="el-icon-back" :title="i18nt('designer.hint.selectParentWidget')"
-         @click.stop="selectParentWidget(widget)"></i>
-      <i class="el-icon-top" v-if="!!parentList && (parentList.length > 1)" :title="i18nt('designer.hint.moveUpWidget')"
-         @click.stop="moveUpWidget()"></i>
-      <i class="el-icon-bottom" v-if="!!parentList && (parentList.length > 1)" :title="i18nt('designer.hint.moveDownWidget')"
-         @click.stop="moveDownWidget()"></i>
-      <i v-if="widget.type === 'table'" class="iconfont icon-insertrow" :title="i18nt('designer.hint.insertRow')"
-          @click.stop="insertTableRow(widget)"></i>
-      <i v-if="widget.type === 'table'" class="iconfont icon-insertcolumn" :title="i18nt('designer.hint.insertColumn')"
-         @click.stop="insertTableCol(widget)"></i>
-      <i class="el-icon-copy-document" v-if="(widget.type === 'grid') || (widget.type === 'table')"
-         :title="i18nt('designer.hint.cloneWidget')" @click.stop="cloneContainer(widget)"></i>
-      <i class="el-icon-delete" :title="i18nt('designer.hint.remove')" @click.stop="removeWidget"></i>
-    </div>
-
-    <div class="drag-handler" v-if="designer.selectedId === widget.id && !widget.internal">
-      <i class="el-icon-rank" :title="i18nt('designer.hint.dragHandler')"></i>
-      <i>{{i18nt('designer.widgetLabel.' + widget.type)}}</i>
-    </div>
-
-  </div>
-</template>
-
-<script>
-  import Draggable from 'vuedraggable'
-  import FieldWidget from "@/components/form-designer/form-widget/field-widget";
-  import GridColWidget from "@/components/form-designer/form-widget/grid-col-widget";
-  import TableCellWidget from "@/components/form-designer/form-widget/table-cell-widget";
-  import VTabPane from "@/components/form-designer/form-widget/tab-pane";
-  import i18n from "@/utils/i18n";
-
-  export default {
-    name: "container-widget",
-    componentName: 'ContainerWidget',
-    mixins: [i18n],
-    components: {
-      Draggable,
-      FieldWidget,
-      GridColWidget,
-      TableCellWidget,
-      VTabPane,
-    },
-    props: {
-      widget: Object,
-      parentWidget: Object,
-      parentList: Array,
-      indexOfParentList: Number,
-      designer: Object,
-      //
-    },
-    data() {
-      return {
-        activeTab: 'tab1',
-        //
-      }
-    },
-    computed: {
-      selected() {
-        return this.widget.id === this.designer.selectedId
-      },
-
-      customClass() {
-        return this.widget.options.customClass || ''
-      },
-
-    },
-    watch: {
-      //
-    },
-    mounted() {
-      //
-    },
-    methods: {
-      insertTableRow(widget) {
-        this.designer.insertTableRow(widget)
-
-        this.designer.emitHistoryChange()
-      },
-
-      insertTableCol(widget) {
-        this.designer.insertTableCol(widget)
-
-        this.designer.emitHistoryChange()
-      },
-
-      onContainerDragAdd(evt, subList) {
-        const newIndex = evt.newIndex
-        if (!!subList[newIndex]) {
-          this.designer.setSelected( subList[newIndex] )
-        }
-
-        this.designer.emitHistoryChange()
-      },
-
-      onContainerDragUpdate() {
-        this.designer.emitHistoryChange()
-      },
-
-      checkContainerMove(evt) {
-        return this.designer.checkWidgetMove(evt)
-      },
-
-      selectWidget(widget) {
-        this.designer.setSelected(widget)
-      },
-
-      selectParentWidget() {
-        if (this.parentWidget) {
-          this.designer.setSelected(this.parentWidget)
-        } else {
-          this.designer.clearSelected()
-        }
-      },
-
-      moveUpWidget() {
-        this.designer.moveUpWidget(this.parentList, this.indexOfParentList)
-        this.designer.emitHistoryChange()
-      },
-
-      moveDownWidget() {
-        this.designer.moveDownWidget(this.parentList, this.indexOfParentList)
-        this.designer.emitHistoryChange()
-      },
-
-      cloneContainer(widget) {
-        if (!!this.parentList) {
-          let newCon = this.designer.cloneContainer(widget)
-          this.parentList.splice(this.indexOfParentList + 1, 0, newCon)
-          this.designer.setSelected(newCon)
-
-          this.designer.emitHistoryChange()
-        }
-      },
-
-      removeWidget() {
-        if (!!this.parentList) {
-          let nextSelected = null
-          if (this.parentList.length === 1) {
-            if (!!this.parentWidget) {
-              nextSelected = this.parentWidget
-            }
-          } else if (this.parentList.length === (1 + this.indexOfParentList)) {
-            nextSelected = this.parentList[this.indexOfParentList - 1]
-          } else {
-            nextSelected = this.parentList[this.indexOfParentList + 1]
-          }
-
-          this.$nextTick(() => {
-            this.parentList.splice(this.indexOfParentList, 1)
-            //if (!!nextSelected) {
-            this.designer.setSelected(nextSelected)
-            //}
-
-            this.designer.emitHistoryChange()
-          })
-        }
-      },
-
-      onSubFormDragAdd(evt, subList) {
-        const newIndex = evt.newIndex
-        if (!!subList[newIndex]) {
-          this.designer.setSelected( subList[newIndex] )
-        }
-
-        this.designer.emitHistoryChange()
-        console.log('test', 'onSubFormDragAdd')
-        this.designer.emitEvent('field-selected', this.widget)
-      },
-
-      onSubFormDragEnd(evt) {
-        console.log('sub form drag end: ', evt)
-      },
-
-      onTabClick(evt) {
-        console.log('onTabClick', evt)
-        let paneName = evt.name
-        this.widget.tabs.forEach((tp) => {
-          tp.options.active = tp.options.name === paneName;
-        })
-      },
-
-    }
-  }
-</script>
-
-<style lang="scss" scoped>
-  .container-wrapper {
-    position: relative;
-    margin-bottom: 5px;
-
-    .container-action{
-      position: absolute;
-      //bottom: -30px;
-      bottom: 0;
-      right: -2px;
-      height: 28px;
-      line-height: 28px;
-      background: $--color-primary;
-      z-index: 999;
-
-      i {
-        font-size: 14px;
-        color: #fff;
-        margin: 0 5px;
-        cursor: pointer;
-      }
-    }
-
-    .drag-handler {
-      position: absolute;
-      top: -2px;
-      //bottom: -24px;  /* 拖拽手柄位于组件下方，有时无法正常拖动，原因未明？？ */
-      left: -6px;
-      height: 22px;
-      line-height: 22px;
-      background: $--color-primary;
-      z-index: 9;
-
-      i {
-        font-size: 14px;
-        font-style: normal;
-        color: #fff;
-        margin: 4px;
-        cursor: move;
-      }
-    }
-
-  }
-
-  .el-row.grid-container {
-    min-height: 50px;
-    //line-height: 48px;
-    //padding: 6px;
-    outline: 1px dashed #336699;
-
-    .form-widget-list {
-      min-height: 28px;
-    }
-
-  }
-
-  div.table-container {
-    padding: 5px;
-    border: 1px dashed #336699;
-    box-sizing: border-box;
-
-    table.table-layout {
-      width: 100%;
-      text-align: center;
-      //border: 1px solid #c8ebfb;
-      border-collapse: collapse;
-      table-layout: fixed;
-
-      ::v-deep td {
-        height: 48px;
-        border: 1px dashed #336699;
-        padding: 3px;
-        display: table-cell;
-      }
-
-      .form-widget-list {
-        border: 1px dashed #336699;
-        min-height: 36px;
-      }
-    }
-  }
-
-  .tab-container {
-    //padding: 5px;
-    margin: 2px;
-
-    .form-widget-list {
-      min-height: 28px;
-    }
-  }
-
-  .grid-container.selected, .table-container.selected, .tab-container.selected,
-  .sub-form-container.selected, .section-container.selected, .grid-cell.selected {
-    outline: 2px solid $--color-primary !important;
-  }
-
-  //.el-tabs.selected {
-  //  outline: 2px solid $&#45;&#45;color-primary;
-  //}
-
-  .section-container {
-    border: 1px dashed #336699;
-    border-radius: 5px;
-    margin: 6px 0;
-    padding: 6px;
-
-    ::v-deep .form-widget-list {
-      min-height: 28px;
-    }
-  }
-
-  .sub-form-container {
-    //width: 100%;
-    padding: 8px;
-    border: 1px dashed #336699;
-
-    ::v-deep .sub-form-table {
-      min-height: 68px;
-
-      div.sub-form-table-column {
-        display: inline-block;
-        //width: 200px;
-      }
-    }
-
-    ::v-deep .ghost{
-      content: '';
-      font-size: 0;
-      //height: 3px;
-      height: 74px;
-      width: 1px;
-      box-sizing: border-box;
-      display: inline-block;
-      background: $--color-primary;
-      border: 2px solid $--color-primary;
-      outline-width: 0;
-      padding: 0;
-      margin: 0;
-      overflow: hidden;
-    }
-  }
-</style>
diff --git a/src/components/form-designer/form-widget/container-widget/container-wrapper.vue b/src/components/form-designer/form-widget/container-widget/container-wrapper.vue
new file mode 100644
index 0000000..40c5e08
--- /dev/null
+++ b/src/components/form-designer/form-widget/container-widget/container-wrapper.vue
@@ -0,0 +1,100 @@
+<!--
+/**
+ * author: vformAdmin
+ * email: vdpadmin@163.com
+ * website: http://www.vform666.com
+ * date: 2021.08.18
+ * remark: 如果要分发VForm源码，需在本文件顶部保留此文件头信息！！
+ */
+-->
+
+<template>
+  <div class="container-wrapper">
+    <slot></slot>
+
+    <div class="container-action" v-if="designer.selectedId === widget.id && !widget.internal">
+      <i class="el-icon-back" :title="i18nt('designer.hint.selectParentWidget')"
+         @click.stop="selectParentWidget(widget)"></i>
+      <i class="el-icon-top" v-if="!!parentList && (parentList.length > 1)" :title="i18nt('designer.hint.moveUpWidget')"
+         @click.stop="moveUpWidget()"></i>
+      <i class="el-icon-bottom" v-if="!!parentList && (parentList.length > 1)" :title="i18nt('designer.hint.moveDownWidget')"
+         @click.stop="moveDownWidget()"></i>
+      <i v-if="widget.type === 'table'" class="iconfont icon-insertrow" :title="i18nt('designer.hint.insertRow')"
+         @click.stop="insertTableRow(widget)"></i>
+      <i v-if="widget.type === 'table'" class="iconfont icon-insertcolumn" :title="i18nt('designer.hint.insertColumn')"
+         @click.stop="insertTableCol(widget)"></i>
+      <i class="el-icon-copy-document" v-if="(widget.type === 'grid') || (widget.type === 'table')"
+         :title="i18nt('designer.hint.cloneWidget')" @click.stop="cloneContainer(widget)"></i>
+      <i class="el-icon-delete" :title="i18nt('designer.hint.remove')" @click.stop="removeWidget"></i>
+    </div>
+
+    <div class="drag-handler" v-if="designer.selectedId === widget.id && !widget.internal">
+      <i class="el-icon-rank" :title="i18nt('designer.hint.dragHandler')"></i>
+      <i>{{i18nt('designer.widgetLabel.' + widget.type)}}</i>
+    </div>
+  </div>
+</template>
+
+<script>
+  import i18n from "@/utils/i18n";
+  import containerMixin from "@/components/form-designer/form-widget/container-widget/containerMixin";
+
+  export default {
+    name: "container-wrapper",
+    mixins: [i18n, containerMixin],
+    props: {
+      widget: Object,
+      parentWidget: Object,
+      parentList: Array,
+      indexOfParentList: Number,
+      designer: Object,
+    },
+  }
+</script>
+
+<style lang="scss" scoped>
+  .container-wrapper {
+    position: relative;
+    margin-bottom: 5px;
+
+    .container-action{
+      position: absolute;
+      //bottom: -30px;
+      bottom: 0;
+      right: -2px;
+      height: 28px;
+      line-height: 28px;
+      background: $--color-primary;
+      z-index: 999;
+
+      i {
+        font-size: 14px;
+        color: #fff;
+        margin: 0 5px;
+        cursor: pointer;
+      }
+    }
+
+    .drag-handler {
+      position: absolute;
+      top: -2px;
+      //bottom: -24px;  /* 拖拽手柄位于组件下方，有时无法正常拖动，原因未明？？ */
+      left: -6px;
+      height: 22px;
+      line-height: 22px;
+      background: $--color-primary;
+      z-index: 9;
+
+      i {
+        font-size: 14px;
+        font-style: normal;
+        color: #fff;
+        margin: 4px;
+        cursor: move;
+      }
+    }
+
+  }
+
+
+</style>
diff --git a/src/components/form-designer/form-widget/container-widget/containerMixin.js b/src/components/form-designer/form-widget/container-widget/containerMixin.js
new file mode 100644
index 0000000..9b91eb0
--- /dev/null
+++ b/src/components/form-designer/form-widget/container-widget/containerMixin.js
@@ -0,0 +1,89 @@
+export default {
+  methods: {
+    insertTableRow(widget) {
+      this.designer.insertTableRow(widget)
+
+      this.designer.emitHistoryChange()
+    },
+
+    insertTableCol(widget) {
+      this.designer.insertTableCol(widget)
+
+      this.designer.emitHistoryChange()
+    },
+
+    onContainerDragAdd(evt, subList) {
+      const newIndex = evt.newIndex
+      if (!!subList[newIndex]) {
+        this.designer.setSelected( subList[newIndex] )
+      }
+
+      this.designer.emitHistoryChange()
+    },
+
+    onContainerDragUpdate() {
+      this.designer.emitHistoryChange()
+    },
+
+    checkContainerMove(evt) {
+      return this.designer.checkWidgetMove(evt)
+    },
+
+    selectWidget(widget) {
+      this.designer.setSelected(widget)
+    },
+
+    selectParentWidget() {
+      if (this.parentWidget) {
+        this.designer.setSelected(this.parentWidget)
+      } else {
+        this.designer.clearSelected()
+      }
+    },
+
+    moveUpWidget() {
+      this.designer.moveUpWidget(this.parentList, this.indexOfParentList)
+      this.designer.emitHistoryChange()
+    },
+
+    moveDownWidget() {
+      this.designer.moveDownWidget(this.parentList, this.indexOfParentList)
+      this.designer.emitHistoryChange()
+    },
+
+    cloneContainer(widget) {
+      if (!!this.parentList) {
+        let newCon = this.designer.cloneContainer(widget)
+        this.parentList.splice(this.indexOfParentList + 1, 0, newCon)
+        this.designer.setSelected(newCon)
+
+        this.designer.emitHistoryChange()
+      }
+    },
+
+    removeWidget() {
+      if (!!this.parentList) {
+        let nextSelected = null
+        if (this.parentList.length === 1) {
+          if (!!this.parentWidget) {
+            nextSelected = this.parentWidget
+          }
+        } else if (this.parentList.length === (1 + this.indexOfParentList)) {
+          nextSelected = this.parentList[this.indexOfParentList - 1]
+        } else {
+          nextSelected = this.parentList[this.indexOfParentList + 1]
+        }
+
+        this.$nextTick(() => {
+          this.parentList.splice(this.indexOfParentList, 1)
+          //if (!!nextSelected) {
+          this.designer.setSelected(nextSelected)
+          //}
+
+          this.designer.emitHistoryChange()
+        })
+      }
+    },
+
+  }
+}
diff --git a/src/components/form-designer/form-widget/grid-col-widget.vue b/src/components/form-designer/form-widget/container-widget/grid-col-widget.vue
similarity index 90%
rename from src/components/form-designer/form-widget/grid-col-widget.vue
rename to src/components/form-designer/form-widget/container-widget/grid-col-widget.vue
index 29dada6..4c7b79a 100644
--- a/src/components/form-designer/form-widget/grid-col-widget.vue
+++ b/src/components/form-designer/form-widget/container-widget/grid-col-widget.vue
@@ -9,12 +9,12 @@
       <transition-group name="fade" tag="div" class="form-widget-list">
         <template v-for="(subWidget, swIdx) in widget.widgetList">
           <template v-if="'container' === subWidget.category">
-            <container-widget :widget="subWidget" :designer="designer" :key="subWidget.id" :parent-list="widget.widgetList"
-                              :index-of-parent-list="swIdx" :parent-widget="widget"></container-widget>
+            <component :is="subWidget.type + '-widget'" :widget="subWidget" :designer="designer" :key="subWidget.id" :parent-list="widget.widgetList"
+                              :index-of-parent-list="swIdx" :parent-widget="widget"></component>
           </template>
           <template v-else>
-            <field-widget :field="subWidget" :designer="designer" :key="subWidget.id" :parent-list="widget.widgetList"
-                          :index-of-parent-list="swIdx" :parent-widget="widget" :design-state="true"></field-widget>
+            <component :is="subWidget.type + '-widget'" :field="subWidget" :designer="designer" :key="subWidget.id" :parent-list="widget.widgetList"
+                          :index-of-parent-list="swIdx" :parent-widget="widget" :design-state="true"></component>
           </template>
         </template>
       </transition-group>
@@ -39,9 +39,9 @@
 
 <script>
   import Draggable from 'vuedraggable'
-  //import ContainerWidget from "@/components/form-designer/form-widget/container-widget";
-  import FieldWidget from "@/components/form-designer/form-widget/field-widget";
   import i18n from "@/utils/i18n";
+  import ContainerComponents from '@/components/form-designer/form-widget/container-widget/index'
+  import FieldComponents from '@/components/form-designer/form-widget/field-widget/index'
 
   export default {
     name: "GridColWidget",
@@ -49,8 +49,8 @@
     mixins: [i18n],
     components: {
       Draggable,
-      //'container-widget': ContainerWidget,  /* 递归组件必须使用这种写法！！ */
-      FieldWidget,
+      ...ContainerComponents,
+      ...FieldComponents,
     },
     props: {
       widget: Object,
diff --git a/src/components/form-designer/form-widget/container-widget/grid-widget.vue b/src/components/form-designer/form-widget/container-widget/grid-widget.vue
new file mode 100644
index 0000000..98e2ae5
--- /dev/null
+++ b/src/components/form-designer/form-widget/container-widget/grid-widget.vue
@@ -0,0 +1,88 @@
+<!--
+/**
+ * author: vformAdmin
+ * email: vdpadmin@163.com
+ * website: http://www.vform666.com
+ * date: 2021.08.18
+ * remark: 如果要分发VForm源码，需在本文件顶部保留此文件头信息！！
+ */
+-->
+
+<template>
+  <container-wrapper :designer="designer" :widget="widget" :parent-widget="parentWidget" :parent-list="parentList"
+                     :index-of-parent-list="indexOfParentList">
+
+    <el-row :key="widget.id" :gutter="widget.options.gutter" class="grid-container"
+            :class="[selected ? 'selected' : '', customClass]"
+            @click.native.stop="selectWidget(widget)">
+      <template v-for="(colWidget, colIdx) in widget.cols">
+        <grid-col-widget :widget="colWidget" :designer="designer" :key="colWidget.id" :parent-list="widget.cols"
+                         :index-of-parent-list="colIdx" :parent-widget="widget"></grid-col-widget>
+      </template>
+    </el-row>
+
+  </container-wrapper>
+</template>
+
+<script>
+  import i18n from "@/utils/i18n"
+  import GridColWidget from "@/components/form-designer/form-widget/container-widget/grid-col-widget"
+  import containerMixin from "@/components/form-designer/form-widget/container-widget/containerMixin";
+  import ContainerWrapper from "@/components/form-designer/form-widget/container-widget/container-wrapper";
+
+  export default {
+    name: "grid-widget",
+    componentName: 'ContainerWidget',
+    mixins: [i18n, containerMixin],
+    components: {
+      ContainerWrapper,
+      GridColWidget
+    },
+    props: {
+      widget: Object,
+      parentWidget: Object,
+      parentList: Array,
+      indexOfParentList: Number,
+      designer: Object,
+    },
+    computed: {
+      selected() {
+        return this.widget.id === this.designer.selectedId
+      },
+
+      customClass() {
+        return this.widget.options.customClass || ''
+      },
+
+    },
+    watch: {
+      //
+    },
+    mounted() {
+      //
+    },
+    methods: {
+
+
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  .el-row.grid-container {
+    min-height: 50px;
+    //line-height: 48px;
+    //padding: 6px;
+    outline: 1px dashed #336699;
+
+    .form-widget-list {
+      min-height: 28px;
+    }
+
+  }
+
+  .grid-container.selected, .grid-cell.selected {
+    outline: 2px solid $--color-primary !important;
+  }
+
+</style>
diff --git a/src/components/form-designer/form-widget/container-widget/index.js b/src/components/form-designer/form-widget/container-widget/index.js
new file mode 100644
index 0000000..9e0f6ae
--- /dev/null
+++ b/src/components/form-designer/form-widget/container-widget/index.js
@@ -0,0 +1,10 @@
+const requireComponent = require.context('./', false, /\w+\.vue$/)
+
+let comps = {}
+
+requireComponent.keys().map(fileName => {
+  let comp = requireComponent(fileName).default;
+  comps[comp.name] = comp
+})
+
+export default comps;
diff --git a/src/components/form-designer/form-widget/container-widget/tab-widget.vue b/src/components/form-designer/form-widget/container-widget/tab-widget.vue
new file mode 100644
index 0000000..ac8b9fe
--- /dev/null
+++ b/src/components/form-designer/form-widget/container-widget/tab-widget.vue
@@ -0,0 +1,121 @@
+<!--
+/**
+ * author: vformAdmin
+ * email: vdpadmin@163.com
+ * website: http://www.vform666.com
+ * date: 2021.08.18
+ * remark: 如果要分发VForm源码，需在本文件顶部保留此文件头信息！！
+ */
+-->
+
+<template>
+  <container-wrapper :designer="designer" :widget="widget" :parent-widget="parentWidget" :parent-list="parentList"
+                     :index-of-parent-list="indexOfParentList">
+
+    <div :key="widget.id" class="tab-container"
+         :class="{'selected': selected}" @click.stop="selectWidget(widget)">
+      <el-tabs :type="widget.displayType" v-model="activeTab" @tab-click="onTabClick">
+
+        <el-tab-pane v-for="(tab, index) in widget.tabs" :key="index" :label="tab.options.label" :name="tab.options.name"
+                     @click.native.stop="selectWidget(widget)">
+          <draggable :list="tab.widgetList" v-bind="{group:'dragGroup', ghostClass: 'ghost',animation: 200}"
+                     handle=".drag-handler"
+                     @add="(evt) => onContainerDragAdd(evt, tab.widgetList)"
+                     @update="onContainerDragUpdate" :move="checkContainerMove">
+            <transition-group name="fade" tag="div" class="form-widget-list">
+              <template v-for="(subWidget, swIdx) in tab.widgetList">
+                <template v-if="'container' === subWidget.category">
+                  <component :is="subWidget.type + '-widget'" :widget="subWidget" :designer="designer" :key="subWidget.id" :parent-list="tab.widgetList"
+                                    :index-of-parent-list="swIdx" :parent-widget="widget"></component>
+                </template>
+                <template v-else>
+                  <component :is="subWidget.type + '-widget'" :field="subWidget" :designer="designer" :key="subWidget.id" :parent-list="tab.widgetList"
+                                :index-of-parent-list="swIdx" :parent-widget="widget" :design-state="true"></component>
+                </template>
+              </template>
+            </transition-group>
+          </draggable>
+        </el-tab-pane>
+
+      </el-tabs>
+    </div>
+
+  </container-wrapper>
+</template>
+
+<script>
+  import Draggable from 'vuedraggable'
+  import i18n from "@/utils/i18n"
+  import containerMixin from "@/components/form-designer/form-widget/container-widget/containerMixin"
+  import ContainerWrapper from "@/components/form-designer/form-widget/container-widget/container-wrapper"
+  import ContainerComponents from '@/components/form-designer/form-widget/container-widget/index'
+  import FieldComponents from '@/components/form-designer/form-widget/field-widget/index'
+
+  export default {
+    name: "tab-widget",
+    componentName: 'ContainerWidget',
+    mixins: [i18n, containerMixin],
+    components: {
+      ContainerWrapper,
+      Draggable,
+
+      ...ContainerComponents,
+      ...FieldComponents,
+    },
+    props: {
+      widget: Object,
+      parentWidget: Object,
+      parentList: Array,
+      indexOfParentList: Number,
+      designer: Object,
+    },
+    data() {
+      return {
+        activeTab: 'tab1',
+        //
+      }
+    },
+    computed: {
+      selected() {
+        return this.widget.id === this.designer.selectedId
+      },
+
+      customClass() {
+        return this.widget.options.customClass || ''
+      },
+
+    },
+    watch: {
+      //
+    },
+    mounted() {
+      //
+    },
+    methods: {
+      onTabClick(evt) {
+        console.log('onTabClick', evt)
+        let paneName = evt.name
+        this.widget.tabs.forEach((tp) => {
+          tp.options.active = tp.options.name === paneName;
+        })
+      },
+
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  .tab-container {
+    //padding: 5px;
+    margin: 2px;
+
+    .form-widget-list {
+      min-height: 28px;
+    }
+  }
+
+  .tab-container.selected {
+    outline: 2px solid $--color-primary !important;
+  }
+
+</style>
diff --git a/src/components/form-designer/form-widget/table-cell-widget.vue b/src/components/form-designer/form-widget/container-widget/table-cell-widget.vue
similarity index 94%
rename from src/components/form-designer/form-widget/table-cell-widget.vue
rename to src/components/form-designer/form-widget/container-widget/table-cell-widget.vue
index 11c4ae9..a7113aa 100644
--- a/src/components/form-designer/form-widget/table-cell-widget.vue
+++ b/src/components/form-designer/form-widget/container-widget/table-cell-widget.vue
@@ -10,12 +10,12 @@
       <transition-group name="fade" tag="div" class="form-widget-list">
         <template v-for="(subWidget, swIdx) in widget.widgetList">
           <template v-if="'container' === subWidget.category">
-            <container-widget :widget="subWidget" :designer="designer" :key="subWidget.id" :parent-list="widget.widgetList"
-                              :index-of-parent-list="swIdx" :parent-widget="widget"></container-widget>
+            <component :is="subWidget.type + '-widget'" :widget="subWidget" :designer="designer" :key="subWidget.id" :parent-list="widget.widgetList"
+                              :index-of-parent-list="swIdx" :parent-widget="widget"></component>
           </template>
           <template v-else>
-            <field-widget :field="subWidget" :designer="designer" :key="subWidget.id" :parent-list="widget.widgetList"
-                          :index-of-parent-list="swIdx" :parent-widget="widget" :design-state="true"></field-widget>
+            <component :is="subWidget.type + '-widget'" :field="subWidget" :designer="designer" :key="subWidget.id" :parent-list="widget.widgetList"
+                          :index-of-parent-list="swIdx" :parent-widget="widget" :design-state="true"></component>
           </template>
         </template>
       </transition-group>
@@ -53,8 +53,9 @@
 
 <script>
   import Draggable from 'vuedraggable'
-  import FieldWidget from "@/components/form-designer/form-widget/field-widget";
-  import i18n from "@/utils/i18n";
+  import i18n from "@/utils/i18n"
+  import ContainerComponents from '@/components/form-designer/form-widget/container-widget/index'
+  import FieldComponents from '@/components/form-designer/form-widget/field-widget/index'
 
   export default {
     name: "TableCellWidget",
@@ -62,7 +63,8 @@
     mixins: [i18n],
     components: {
       Draggable,
-      FieldWidget,
+      ...ContainerComponents,
+      ...FieldComponents,
     },
     props: {
       widget: Object,
diff --git a/src/components/form-designer/form-widget/container-widget/table-widget.vue b/src/components/form-designer/form-widget/container-widget/table-widget.vue
new file mode 100644
index 0000000..4fd090a
--- /dev/null
+++ b/src/components/form-designer/form-widget/container-widget/table-widget.vue
@@ -0,0 +1,111 @@
+<!--
+/**
+ * author: vformAdmin
+ * email: vdpadmin@163.com
+ * website: http://www.vform666.com
+ * date: 2021.08.18
+ * remark: 如果要分发VForm源码，需在本文件顶部保留此文件头信息！！
+ */
+-->
+
+<template>
+  <container-wrapper :designer="designer" :widget="widget" :parent-widget="parentWidget" :parent-list="parentList"
+                     :index-of-parent-list="indexOfParentList">
+
+    <div :key="widget.id" class="table-container"
+         :class="[selected ? 'selected' : '', customClass]" @click.stop="selectWidget(widget)">
+      <table class="table-layout">
+        <tbody>
+        <tr v-for="(row, rowIdx) in widget.rows" :key="row.id">
+          <template v-for="(colWidget, colIdx) in row.cols">
+            <table-cell-widget v-if="!colWidget.merged" :widget="colWidget" :designer="designer"
+                               :key="colWidget.id" :parent-list="widget.cols"
+                               :row-index="rowIdx" :row-length="widget.rows.length"
+                               :col-index="colIdx" :col-length="row.cols.length"
+                               :col-array="row.cols" :row-array="widget.rows"
+                               :parent-widget="widget"></table-cell-widget>
+          </template>
+        </tr>
+        </tbody>
+      </table>
+    </div>
+
+  </container-wrapper>
+</template>
+
+<script>
+  import i18n from "@/utils/i18n"
+  import containerMixin from "@/components/form-designer/form-widget/container-widget/containerMixin"
+  import ContainerWrapper from "@/components/form-designer/form-widget/container-widget/container-wrapper"
+  import TableCellWidget from "@/components/form-designer/form-widget/container-widget/table-cell-widget"
+
+  export default {
+    name: "table-widget",
+    componentName: 'ContainerWidget',
+    mixins: [i18n, containerMixin],
+    components: {
+      ContainerWrapper,
+      TableCellWidget,
+    },
+    props: {
+      widget: Object,
+      parentWidget: Object,
+      parentList: Array,
+      indexOfParentList: Number,
+      designer: Object,
+    },
+    computed: {
+      selected() {
+        return this.widget.id === this.designer.selectedId
+      },
+
+      customClass() {
+        return this.widget.options.customClass || ''
+      },
+
+    },
+    watch: {
+      //
+    },
+    mounted() {
+      //
+    },
+    methods: {
+
+
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  div.table-container {
+    padding: 5px;
+    border: 1px dashed #336699;
+    box-sizing: border-box;
+
+    table.table-layout {
+      width: 100%;
+      text-align: center;
+      //border: 1px solid #c8ebfb;
+      border-collapse: collapse;
+      table-layout: fixed;
+
+      ::v-deep td {
+        height: 48px;
+        border: 1px dashed #336699;
+        padding: 3px;
+        display: table-cell;
+      }
+
+      .form-widget-list {
+        border: 1px dashed #336699;
+        min-height: 36px;
+      }
+    }
+  }
+
+  .table-container.selected {
+    outline: 2px solid $--color-primary !important;
+  }
+
+</style>
diff --git a/src/components/form-designer/form-widget/field-widget.vue b/src/components/form-designer/form-widget/field-widget.vue
deleted file mode 100644
index 4ec4ef0..0000000
--- a/src/components/form-designer/form-widget/field-widget.vue
+++ /dev/null
@@ -1,1340 +0,0 @@
-<!--
-/**
- * author: vformAdmin
- * email: vdpadmin@163.com
- * website: http://www.vform666.com/
- * date: 2021.08.18
- * remark: 如果要分发VForm源码，需在本文件顶部保留此文件头信息！！
- */
--->
-
-<template>
-  <div class="field-wrapper" :class="{'design-time-bottom-margin': !!this.designer}">
-    <el-form-item v-if="!!field.formItemFlag" :label="label" :label-width="labelWidth + 'px'"
-                  :title="field.options.labelTooltip"
-                  v-show="!field.options.hidden || (designState === true)"
-                  :rules="rules" :prop="getPropName()"
-                  :class="[selected ? 'selected' : '', labelAlign, customClass, field.options.required ? 'required' : '']"
-                  @click.native.stop="selectField(field)">
-
-      <span v-if="!!field.options.labelIconClass" slot="label" class="custom-label">
-        <template v-if="field.options.labelIconPosition === 'front'">
-          <template v-if="!!field.options.labelTooltip">
-            <el-tooltip :content="field.options.labelTooltip" effect="light">
-              <i :class="field.options.labelIconClass"></i></el-tooltip>{{label}}</template>
-          <template v-else>
-            <i :class="field.options.labelIconClass"></i>{{label}}</template>
-        </template>
-        <template v-else-if="field.options.labelIconPosition === 'rear'">
-          <template v-if="!!field.options.labelTooltip">
-            {{label}}<el-tooltip :content="field.options.labelTooltip" effect="light">
-            <i :class="field.options.labelIconClass"></i></el-tooltip></template>
-          <template v-else>
-            {{label}}<i :class="field.options.labelIconClass"></i></template>
-        </template>
-      </span>
-
-      <template v-if="field.type === 'input'">
-        <el-input ref="fieldEditor" v-model="fieldModel"
-                  :disabled="field.options.disabled" :readonly="field.options.readonly"
-                  :size="field.options.size" class="hide-spin-button"
-                  :type="inputType"
-                  :show-password="field.options.showPassword"
-                  :placeholder="field.options.placeholder"
-                  :clearable="field.options.clearable"
-                  :minlength="field.options.minLength" :maxlength="field.options.maxLength"
-                  :show-word-limit="field.options.showWordLimit"
-                  :prefix-icon="field.options.prefixIcon" :suffix-icon="field.options.suffixIcon"
-                  @focus="handleFocusCustomEvent" @blur="handleBlurCustomEvent" @input="handleInputCustomEvent"
-                  @change="handleChangeEvent">
-          <el-button slot="append" v-if="field.options.appendButton" :disabled="field.options.disabled || field.options.appendButtonDisabled"
-                     :class="field.options.buttonIcon" @click.native="emitAppendButtonClick"></el-button>
-        </el-input>
-      </template>
-
-      <template v-if="field.type === 'textarea'">
-        <el-input type="textarea" ref="fieldEditor" v-model="fieldModel"
-                  :disabled="field.options.disabled" :readonly="field.options.readonly"
-                  :size="field.options.size"
-                  :placeholder="field.options.placeholder" :rows="field.options.rows"
-                  :minlength="field.options.minLength" :maxlength="field.options.maxLength"
-                  :show-word-limit="field.options.showWordLimit"
-                  @focus="handleFocusCustomEvent" @blur="handleBlurCustomEvent" @input="handleInputCustomEvent"
-                  @change="handleChangeEvent">
-        </el-input>
-      </template>
-
-      <template v-if="field.type === 'number'">
-        <el-input-number ref="fieldEditor" v-model="fieldModel" class="full-width-input"
-                         :disabled="field.options.disabled"
-                         :size="field.options.size" :controls-position="field.options.controlsPosition"
-                         :placeholder="field.options.placeholder"
-                         :min="field.options.min" :max="field.options.max"
-                         :precision="field.options.precision" :step="field.options.step"
-                         @focus="handleFocusCustomEvent" @blur="handleBlurCustomEvent"
-                         @change="handleChangeEvent"></el-input-number>
-      </template>
-
-      <template v-if="field.type === 'radio'">
-        <el-radio-group ref="fieldEditor" v-model="fieldModel"
-                        :disabled="field.options.disabled" :size="field.options.size"
-                        @change="handleChangeEvent">
-          <template v-if="!!field.options.buttonStyle">
-            <el-radio-button v-for="(item, index) in field.options.optionItems" :key="index" :label="item.value"
-                      :disabled="item.disabled" :border="field.options.border"
-                      :style="{display: field.options.displayStyle}">{{item.label}}</el-radio-button>
-          </template>
-          <template v-else>
-            <el-radio v-for="(item, index) in field.options.optionItems" :key="index" :label="item.value"
-                      :disabled="item.disabled" :border="field.options.border"
-                      :style="{display: field.options.displayStyle}">{{item.label}}</el-radio>
-          </template>
-        </el-radio-group>
-      </template>
-
-      <template v-if="field.type === 'checkbox'">
-        <el-checkbox-group ref="fieldEditor" v-model="fieldModel"
-                           :disabled="field.options.disabled" :size="field.options.size"
-                           @change="handleChangeEvent">
-          <template v-if="!!field.options.buttonStyle">
-            <el-checkbox-button v-for="(item, index) in field.options.optionItems" :key="index" :label="item.value"
-                                :disabled="item.disabled" :border="field.options.border"
-                                :style="{display: field.options.displayStyle}">{{item.label}}</el-checkbox-button>
-          </template>
-          <template v-else>
-            <el-checkbox v-for="(item, index) in field.options.optionItems" :key="index" :label="item.value"
-                         :disabled="item.disabled" :border="field.options.border"
-                         :style="{display: field.options.displayStyle}">{{item.label}}</el-checkbox>
-          </template>
-        </el-checkbox-group>
-      </template>
-
-      <template v-if="field.type === 'select'">
-        <el-select ref="fieldEditor" v-model="fieldModel" class="full-width-input"
-                   :disabled="field.options.disabled"
-                   :size="field.options.size"
-                   :clearable="field.options.clearable"
-                   :filterable="field.options.filterable"
-                   :allow-create="field.options.allowCreate"
-                   :default-first-option="allowDefaultFirstOption"
-                   :automatic-dropdown="field.options.automaticDropdown"
-                   :multiple="field.options.multiple" :multiple-limit="field.options.multipleLimit"
-                   :placeholder="field.options.placeholder || i18nt('render.hint.selectPlaceholder')"
-                   :remote="this.field.options.remote" :remote-method="remoteQuery"
-                   @focus="handleFocusCustomEvent" @blur="handleBlurCustomEvent"
-                   @change="handleChangeEvent">
-          <el-option v-for="item in field.options.optionItems" :key="item.value" :label="item.label"
-                  :value="item.value" :disabled="item.disabled">
-          </el-option>
-        </el-select>
-      </template>
-
-      <template v-if="field.type === 'time'">
-        <el-time-picker ref="fieldEditor" v-model="fieldModel" class="full-width-input"
-                        :disabled="field.options.disabled" :readonly="field.options.readonly"
-                        :size="field.options.size"
-                        :clearable="field.options.clearable" :editable="field.options.editable"
-                        :format="field.options.format" value-format="HH:mm:ss"
-                        :placeholder="field.options.placeholder || i18nt('render.hint.timePlaceholder')"
-                        @focus="handleFocusCustomEvent" @blur="handleBlurCustomEvent"
-                        @change="handleChangeEvent">
-        </el-time-picker>
-      </template>
-
-      <template v-if="field.type === 'time-range'">
-        <el-time-picker ref="fieldEditor" is-range v-model="fieldModel" class="full-width-input"
-                        :disabled="field.options.disabled" :readonly="field.options.readonly"
-                        :size="field.options.size"
-                        :clearable="field.options.clearable" :editable="field.options.editable"
-                        :format="field.options.format" value-format="HH:mm:ss"
-                        :start-placeholder="field.options.startPlaceholder || i18nt('render.hint.startTimePlaceholder')"
-                        :end-placeholder="field.options.endPlaceholder || i18nt('render.hint.endTimePlaceholder')"
-                        @focus="handleFocusCustomEvent" @blur="handleBlurCustomEvent"
-                        @change="handleChangeEvent">
-        </el-time-picker>
-      </template>
-
-      <template v-if="field.type === 'date'">
-        <el-date-picker ref="fieldEditor" :type="field.options.type" v-model="fieldModel" class="full-width-input"
-                        :readonly="field.options.readonly" :disabled="field.options.disabled"
-                        :size="field.options.size"
-                        :clearable="field.options.clearable" :editable="field.options.editable"
-                        :format="field.options.format" :value-format="field.options.valueFormat"
-                        :placeholder="field.options.placeholder || i18nt('render.hint.datePlaceholder')"
-                        @focus="handleFocusCustomEvent" @blur="handleBlurCustomEvent"
-                        @change="handleChangeEvent"></el-date-picker>
-      </template>
-
-      <template v-if="field.type === 'date-range'">
-        <el-date-picker ref="fieldEditor" :type="field.options.type" v-model="fieldModel" class="full-width-input"
-                        :disabled="field.options.disabled" :readonly="field.options.readonly"
-                        :size="field.options.size"
-                        :clearable="field.options.clearable" :editable="field.options.editable"
-                        :format="field.options.format" :value-format="field.options.valueFormat"
-                        :start-placeholder="field.options.startPlaceholder || i18nt('render.hint.startDatePlaceholder')"
-                        :end-placeholder="field.options.endPlaceholder || i18nt('render.hint.endDatePlaceholder')"
-                        @focus="handleFocusCustomEvent" @blur="handleBlurCustomEvent"
-                        @change="handleChangeEvent"></el-date-picker>
-      </template>
-
-      <template v-if="field.type === 'switch'">
-        <el-switch ref="fieldEditor" v-model="fieldModel"
-                   :disabled="field.options.disabled"
-                   :active-text="field.options.activeText" :inactive-text="field.options.inactiveText"
-                   :active-color="field.options.activeColor" :inactive-color="field.options.inactiveColor"
-                   :width="field.options.switchWidth"
-                   @change="handleChangeEvent">
-        </el-switch>
-      </template>
-
-      <template v-if="field.type === 'rate'">
-        <el-rate ref="fieldEditor" v-model="fieldModel"
-                 :disabled="field.options.disabled"
-                 :max="field.options.max"
-                 :low-threshold="field.options.lowThreshold" :high-threshold="field.options.highThreshold"
-                 :allow-half="field.options.allowHalf"
-                 :show-text="field.options.showText" :show-score="field.options.showScore"
-                 @change="handleChangeEvent"></el-rate>
-      </template>
-
-      <template v-if="field.type === 'color'">
-        <el-color-picker ref="fieldEditor" v-model="fieldModel"
-                         :size="field.options.size"
-                         :disabled="field.options.disabled"
-                         @change="handleChangeEvent"></el-color-picker>
-      </template>
-
-      <template v-if="field.type === 'slider'">
-        <el-slider ref="fieldEditor" v-model="fieldModel"
-                   :disabled="field.options.disabled"
-                   :min="field.options.min" :max="field.options.max" :step="field.options.step"
-                   :range="field.options.range" :vertical="field.options.vertical"
-                   @change="handleChangeEvent"></el-slider>
-      </template>
-
-      <template v-if="field.type === 'picture-upload'">
-        <el-upload ref="fieldEditor" :disabled="field.options.disabled"
-                   :action="field.options.uploadURL" :headers="uploadHeaders" :data="uploadData"
-                   :with-credentials="field.options.withCredentials"
-                   :multiple="field.options.multipleSelect" :file-list="fileList" :show-file-list="field.options.showFileList"
-                   list-type="picture-card" :class="{'hideUploadDiv': uploadBtnHidden}"
-                   :limit="field.options.limit" :on-exceed="handlePictureExceed"
-                   :before-upload="beforePictureUpload"
-                   :on-success="handlePictureUpload" :on-error="handelUploadError" :on-remove="handlePictureRemove">
-          <div slot="tip" class="el-upload__tip"
-               v-if="!!field.options.uploadTip">{{field.options.uploadTip}}</div>
-          <i class="el-icon-plus avatar-uploader-icon"></i>
-        </el-upload>
-      </template>
-
-      <template v-if="field.type === 'file-upload'">
-        <el-upload ref="fieldEditor" :disabled="field.options.disabled"
-                   :style="styleVariables" class="dynamicPseudoAfter"
-                   :action="field.options.uploadURL" :headers="uploadHeaders" :data="uploadData"
-                   :with-credentials="field.options.withCredentials"
-                   :multiple="field.options.multipleSelect" :file-list="fileList"
-                   :show-file-list="field.options.showFileList" :class="{'hideUploadDiv': uploadBtnHidden}"
-                   :limit="field.options.limit" :on-exceed="handleFileExceed" :before-upload="beforeFileUpload"
-                   :on-success="handleFileUpload" :on-error="handelUploadError" :on-remove="handleFileRemove">
-          <div slot="tip" class="el-upload__tip"
-               v-if="!!field.options.uploadTip">{{field.options.uploadTip}}</div>
-          <i slot="default" class="el-icon-plus avatar-uploader-icon"></i>
-          <div slot="file" slot-scope="{file}" class="upload-file-list">
-            <span class="upload-file-name" :title="file.name">{{file.name}}</span>
-            <a :href="file.url" download="">
-              <i class="el-icon-download file-action" title="i18nt('render.hint.downloadFile')"></i></a>
-            <i class="el-icon-delete file-action" title="i18nt('render.hint.removeFile')" v-if="!field.options.disabled"
-               @click="removeUploadFile(file.name)"></i>
-          </div>
-        </el-upload>
-      </template>
-
-      <template v-if="field.type === 'rich-editor'">
-        <vue-editor ref="fieldEditor" v-model="fieldModel" :editor-toolbar="customToolbar"
-                    :disabled="field.options.disabled" :placeholder="field.options.placeholder"
-                    @text-change="handleRichEditorChangeEvent"
-                    @focus="handleRichEditorFocusEvent" @blur="handleRichEditorBlurEvent"></vue-editor>
-      </template>
-
-      <template v-if="field.type === 'cascader'">
-        <el-cascader ref="fieldEditor" :options="field.options.optionItems" v-model="fieldModel" class="full-width-input"
-                     :disabled="field.options.disabled"
-                     :size="field.options.size"
-                     :clearable="field.options.clearable"
-                     :filterable="field.options.filterable"
-                     :placeholder="field.options.placeholder || i18nt('render.hint.selectPlaceholder')"
-                     @focus="handleFocusCustomEvent" @blur="handleBlurCustomEvent"
-                     @change="handleChangeEvent"></el-cascader>
-      </template>
-
-    </el-form-item>
-    <div v-else class="static-content-item" v-show="!field.options.hidden || (designState === true)"
-         :class="{'selected': selected}" @click.stop="selectField(field)">
-      <template v-if="field.type === 'static-text'">
-        <div ref="fieldEditor">{{field.options.textContent}}</div>
-      </template>
-
-      <template v-if="field.type === 'html-text'">
-        <div ref="fieldEditor" v-html="field.options.htmlContent"></div>
-      </template>
-
-      <template v-if="field.type === 'button'">
-        <el-button ref="fieldEditor" :type="field.options.type"
-                   :plain="field.options.plain" :round="field.options.round"
-                   :circle="field.options.circle" :icon="field.options.icon"
-                   :disabled="field.options.disabled"
-                   @click.native="handleButtonWidgetClick">
-          {{field.options.label}}</el-button>
-      </template>
-
-      <template v-if="field.type === 'divider'">
-        <el-divider ref="fieldEditor"
-                    direction="horizontal" :content-position="field.options.contentPosition">
-          {{field.options.label}}</el-divider>
-      </template>
-
-    </div>
-
-    <template v-if="!!this.designer">
-      <div class="field-action" v-if="designer.selectedId === field.id">
-        <i class="el-icon-back" :title="i18nt('designer.hint.selectParentWidget')" @click.stop="selectParentWidget(field)"></i>
-        <i class="el-icon-top" v-if="!!parentList && (parentList.length > 1)" :title="i18nt('designer.hint.moveUpWidget')"
-           @click.stop="moveUpWidget(field)"></i>
-        <i class="el-icon-bottom" v-if="!!parentList && (parentList.length > 1)" :title="i18nt('designer.hint.moveDownWidget')"
-           @click.stop="moveDownWidget(field)"></i>
-        <i class="el-icon-delete" :title="i18nt('designer.hint.remove')" @click.stop="removeFieldWidget"></i>
-      </div>
-
-      <div class="drag-handler background-opacity" v-if="designer.selectedId === field.id">
-        <i class="el-icon-rank" :title="i18nt('designer.hint.dragHandler')"></i>
-        <i>{{i18nt('designer.widgetLabel.' + field.type)}}</i>
-        <i v-if="field.options.hidden === true" class="iconfont icon-hide"></i>
-      </div>
-    </template>
-  </div>
-</template>
-
-<script>
-  //import ElFormItem from 'element-ui/packages/form/src/form-item.vue'  /* 用于源码调试Element UI */
-  //import ElInput from 'element-ui/packages/input/src/input.vue'  /* 用于源码调试Element UI */
-  //import ElUpload from 'element-ui/packages/upload/src/index.vue'  /* 用于源码调试Element UI */
-  import emitter from 'element-ui/lib/mixins/emitter'
-  import {deepClone} from "../../../utils/util";
-  import FormValidators from '../../../utils/validators'
-  import i18n, {translate} from "../../../utils/i18n";
-
-  let selectFileText = "'" + translate('render.hint.selectFile') + "'"
-
-  export default {
-    name: "FieldWidget",
-    componentName: 'FieldWidget',
-    mixins: [emitter, i18n],
-    props: {
-      field: Object,
-      parentWidget: Object,
-      parentList: Array,
-      indexOfParentList: Number,
-      designer: Object,
-
-      designState: {
-        type: Boolean,
-        default: false
-      },
-
-      subFormRowIndex: { /* 子表单组件行索引，从0开始计数 */
-        type: Number,
-        default: -1
-      },
-      subFormColIndex: { /* 子表单组件列索引，从0开始计数 */
-        type: Number,
-        default: -1
-      },
-      subFormRowId: { /* 子表单组件行Id，唯一id且不可变 */
-        type: String,
-        default: ''
-      },
-
-    },
-    components: {
-      //ElFormItem,
-      //ElInput,
-      //ElUpload,
-
-      VueEditor: resolve => { //懒加载！！
-        require(['vue2-editor'], ({VueEditor}) => resolve(VueEditor))
-      }
-    },
-    inject: ['refList', 'formConfig', 'globalOptionData', 'globalModel'],
-    data() {
-      return {
-        oldFieldValue: null, //field组件change之前的值
-        valueChangedFlag: false, //vue2-editor数据值是否改变标志
-        fieldModel: null,
-        rules: [],
-
-        checkedList: [],
-
-        uploadHeaders: {},
-        uploadData: {
-          key: '',  //七牛云上传文件名
-          //token: '',  //七牛云上传token
-
-          //policy: '',  //又拍云上传policy
-          //authorization: '',  //又拍云上传签名
-        },
-        fileList: [],  //上传文件列表
-        uploadBtnHidden: false,
-
-        customToolbar: [], //富文本编辑器自定义工具栏
-
-
-        styleVariables: {
-          '--select-file-action': selectFileText,
-        },
-      }
-    },
-
-    computed: {
-      selected() {
-        return !!this.designer && this.field.id === this.designer.selectedId
-      },
-
-      label() {
-        if (!!this.field.options.labelHidden) {
-          return ''
-        }
-
-        return this.field.options.label
-      },
-
-      labelWidth() {
-        if (!!this.field.options.labelHidden) {
-          return 0
-        }
-
-        if (!!this.field.options.labelWidth) {
-          return this.field.options.labelWidth
-        }
-
-        if (!!this.designer) {
-          return this.designer.formConfig.labelWidth
-        } else {
-          return this.formConfig.labelWidth
-        }
-      },
-
-      labelAlign() {
-        if (!!this.field.options.labelAlign) {
-          return this.field.options.labelAlign
-        }
-
-        if (!!this.designer) {
-          return this.designer.formConfig.labelAlign || 'label-left-align'
-        } else {
-          return this.formConfig.labelAlign || 'label-left-align'
-        }
-      },
-
-      customClass() {
-        return !!this.field.options.customClass ? this.field.options.customClass.join(' ') : ''
-      },
-
-      size() {
-        if (!!this.field.options.size) {
-          return this.field.options.size
-        }
-
-        if (!!this.designer) {
-          if (!!this.designer.formConfig && !!this.designer.formConfig.size) {
-            return this.designer.formConfig.size
-          }
-        } else {
-          if (!!this.formConfig && !!this.formConfig.size) {
-            return this.formConfig.size
-          }
-        }
-
-        return 'medium'
-      },
-
-      inputType() {
-        if (this.field.options.type === 'number') {
-          return 'text'  //当input的type设置为number时，如果输入非数字字符，则v-model拿到的值为空字符串，无法实现输入校验！故屏蔽之！！
-        }
-
-        return this.field.options.type
-      },
-
-      allowDefaultFirstOption() {
-        return (!!this.field.options.filterable && !!this.field.options.allowCreate)
-      },
-
-      subFormName() {
-        return !!this.parentWidget ? this.parentWidget.options.name : ''
-      },
-
-      subFormItemFlag() {
-        return !!this.parentWidget ? this.parentWidget.type === 'sub-form' : false
-      },
-
-      formModel: {
-        cache: false,
-        get() {
-          return this.globalModel.formModel
-        }
-      }
-
-    },
-    watch: {
-      //
-    },
-
-    beforeCreate() {
-      /* 这里不能访问方法和属性！！ */
-    },
-
-    created() {
-      /* 注意：子组件mounted在父组件created之后、父组件mounted之前触发，故子组件mounted需要用到的prop
-         需要在父组件created中初始化！！ */
-      this.initOptionItems()
-      this.initFieldModel()
-      this.registerToRefList()
-      this.initEventHandler()
-      this.buildFieldRules()
-
-      this.handleOnCreated()
-    },
-
-    mounted() {
-      this.handleOnMounted()
-    },
-
-    beforeDestroy() {
-      this.unregisterFromRefList()
-    },
-
-    methods: {
-      initFieldModel() {
-        if (this.field.formItemFlag === false) {
-          return
-        }
-
-        if (!!this.subFormItemFlag && !this.designState) {  //SubForm子表单组件需要特殊处理！！
-          let subFormData = this.formModel[this.subFormName]
-          if (((subFormData === undefined) || (subFormData[this.subFormRowIndex] === undefined) ||
-              (subFormData[this.subFormRowIndex][this.field.options.name] === undefined)) &&
-              (this.field.options.defaultValue !== undefined)) {
-            this.fieldModel = this.field.options.defaultValue
-            subFormData[this.subFormRowIndex][this.field.options.name] = this.field.options.defaultValue
-          } else if (subFormData[this.subFormRowIndex][this.field.options.name] === undefined) {
-            this.fieldModel = null
-            subFormData[this.subFormRowIndex][this.field.options.name] = null
-          } else {
-            this.fieldModel = subFormData[this.subFormRowIndex][this.field.options.name]
-          }
-
-          /* 主动触发子表单内field-widget的onChange事件！！ */
-          setTimeout(() => {  //延时触发onChange事件, 便于更新计算字段！！
-            this.handleOnChangeForSubForm(this.fieldModel, this.oldFieldValue, subFormData, this.subFormRowId)
-          }, 800)
-          this.oldFieldValue = deepClone(this.fieldModel)
-
-          this.initFileList()  //处理图片上传、文件上传字段
-
-          return
-        }
-
-        if ((this.formModel[this.field.options.name] === undefined) &&
-            (this.field.options.defaultValue !== undefined)) {
-          this.fieldModel = this.field.options.defaultValue
-        } else if (this.formModel[this.field.options.name] === undefined) {  //如果formModel为空对象，则初始化字段值为null!!
-          this.formModel[this.field.options.name] = null
-        } else {
-          this.fieldModel = this.formModel[this.field.options.name]
-        }
-        this.oldFieldValue = deepClone(this.fieldModel)
-        this.initFileList()  //处理图片上传、文件上传字段
-      },
-
-      initOptionItems() {
-        if (this.designState) {
-          return
-        }
-
-        if ((this.field.type === 'radio') || (this.field.type === 'checkbox')
-            || (this.field.type === 'select') || (this.field.type === 'cascader')) {
-          if (!!this.globalOptionData && this.globalOptionData.hasOwnProperty(this.field.options.name)) {
-            this.loadOptions( this.globalOptionData[this.field.options.name] )
-          }
-        }
-      },
-
-      refreshDefaultValue() {
-        if ((this.designState === true) && (this.field.options.defaultValue !== undefined)) {
-          this.fieldModel = this.field.options.defaultValue
-        }
-      },
-
-      registerToRefList(oldRefName) {
-        if ((this.refList !== null) && !!this.field.options.name) {
-          if (this.subFormItemFlag && !this.designState) { //处理子表单元素（且非设计状态）
-            if (!!oldRefName) {
-              delete this.refList[oldRefName + '@row' + this.subFormRowId]
-            }
-            this.refList[this.field.options.name + '@row' + this.subFormRowId] = this
-          } else {
-            if (!!oldRefName) {
-              delete this.refList[oldRefName]
-            }
-            this.refList[this.field.options.name] = this
-          }
-        }
-      },
-
-      unregisterFromRefList() {  //销毁组件时注销组件ref
-        if ((this.refList !== null) && !!this.field.options.name) {
-          let oldRefName = this.field.options.name
-          if (this.subFormItemFlag && !this.designState) { //处理子表单元素（且非设计状态）
-            delete this.refList[oldRefName + '@row' + this.subFormRowId]
-          } else {
-            delete this.refList[oldRefName]
-          }
-        }
-      },
-
-      initEventHandler() {
-        this.$on('setFormData', function (newFormData) {
-          console.log('formModel of globalModel----------', this.globalModel.formModel)
-          if (!this.subFormItemFlag) {
-            this.setValue(newFormData[this.field.options.name])
-          }
-        })
-
-        this.$on('field-value-changed', function (values) {
-          if (!!this.subFormItemFlag) {
-            let subFormData = this.formModel[this.subFormName]
-            this.handleOnChangeForSubForm(values[0], values[1], subFormData, this.subFormRowId)
-          } else {
-            this.handleOnChange(values[0], values[1])
-          }
-        })
-      },
-
-      handleOnCreated() {
-        if (!!this.field.options.onCreated) {
-          let customFunc = new Function(this.field.options.onCreated)
-          customFunc.call(this)
-        }
-      },
-
-      handleOnMounted() {
-        if (!!this.field.options.onMounted) {
-          let mountFunc = new Function(this.field.options.onMounted)
-          mountFunc.call(this)
-        }
-      },
-
-      handleOnBeforeUpload(file) {
-        if (!!this.field.options.onBeforeUpload) {
-          let bfFunc = new Function('file', this.field.options.onBeforeUpload)
-          let result = bfFunc.call(this, file)
-          if (typeof result === 'boolean') {
-            return result
-          } else {
-            return true
-          }
-        }
-
-        return true
-      },
-
-      selectField(field) {
-        if (!!this.designer) {
-          this.designer.setSelected(field)
-          this.designer.emitEvent('field-selected', this.parentWidget)  //发送选中组件的父组件对象
-        }
-      },
-
-      selectParentWidget() {
-        if (this.parentWidget) {
-          this.designer.setSelected(this.parentWidget)
-        } else {
-          this.designer.clearSelected()
-        }
-      },
-
-      moveUpWidget() {
-        this.designer.moveUpWidget(this.parentList, this.indexOfParentList)
-        this.designer.emitHistoryChange()
-      },
-
-      moveDownWidget() {
-        this.designer.moveDownWidget(this.parentList, this.indexOfParentList)
-        this.designer.emitHistoryChange()
-      },
-
-      removeFieldWidget() {
-        if (!!this.parentList) {
-          let nextSelected = null
-          if (this.parentList.length === 1) {
-            if (!!this.parentWidget) {
-              nextSelected = this.parentWidget
-            }
-          } else if (this.parentList.length === (1 + this.indexOfParentList)) {
-            nextSelected = this.parentList[this.indexOfParentList - 1]
-          } else {
-            nextSelected = this.parentList[this.indexOfParentList + 1]
-          }
-
-          this.$nextTick(() => {
-            this.parentList.splice(this.indexOfParentList, 1)
-            //if (!!nextSelected) {
-              this.designer.setSelected(nextSelected)
-            //}
-
-            this.designer.emitHistoryChange()
-          })
-        }
-      },
-
-      disableOptionOfList(optionList, optionValue) {
-        if (!!optionList && (optionList.length > 0)) {
-          optionList.forEach(opt => {
-            if (opt.value === optionValue) {
-              opt.disabled = true
-            }
-          })
-        }
-      },
-
-      enableOptionOfList(optionList, optionValue) {
-        if (!!optionList && (optionList.length > 0)) {
-          optionList.forEach(opt => {
-            if (opt.value === optionValue) {
-              opt.disabled = false
-            }
-          })
-        }
-      },
-
-      emitAppendButtonClick() {
-        /* 必须调用mixins中的dispatch方法逐级向父组件发送消息！！ */
-        this.dispatch('VFormRender', 'appendButtonClick', [this]);
-      },
-
-      handleOnChange(val, oldVal) {
-        if (!!this.field.options.onChange) {
-          let changeFn = new Function('value', 'oldValue', this.field.options.onChange)
-          changeFn.call(this, val, oldVal)
-        }
-      },
-
-      handleOnChangeForSubForm(val, oldVal, subFormData, rowId) {
-        if (!!this.field.options.onChange) {
-          let changeFn = new Function('value', 'oldValue', 'subFormData', 'rowId', this.field.options.onChange)
-          changeFn.call(this, val, oldVal, subFormData, rowId)
-        }
-      },
-
-      handleChangeEvent(value) {
-        this.syncUpdateFormModel(value)
-        this.emitFieldDataChange(value, this.oldFieldValue)
-
-        //number组件一般不会触发focus事件，故此处需要手工赋值oldFieldValue！！
-        this.oldFieldValue = deepClone(value)  /* oldFieldValue需要在initFieldModel()方法中赋初值!! */
-      },
-
-      handleFocusCustomEvent(event) {
-        this.oldFieldValue = deepClone(this.fieldModel)  //保存修改change之前的值
-
-        if (!!this.field.options.onFocus) {
-          let customFn = new Function('event', this.field.options.onFocus)
-          customFn.call(this, event)
-        }
-      },
-
-      handleBlurCustomEvent(event) {
-        if (!!this.field.options.onBlur) {
-          let customFn = new Function('event', this.field.options.onBlur)
-          customFn.call(this, event)
-        }
-      },
-
-      handleInputCustomEvent(value) {
-        if (!!this.field.options.onInput) {
-          let customFn = new Function('value', this.field.options.onInput)
-          customFn.call(this, value)
-        }
-      },
-
-      handleRichEditorChangeEvent() {
-        this.valueChangedFlag = true
-      },
-
-      handleRichEditorFocusEvent() {
-        this.oldFieldValue = deepClone(this.fieldModel)
-      },
-
-      handleRichEditorBlurEvent() {
-        if (this.valueChangedFlag) {
-          this.emitFieldDataChange(this.fieldModel, this.oldFieldValue)
-          this.valueChangedFlag = false
-        }
-      },
-
-      handleButtonWidgetClick() {
-        if (!!this.designState) { //设计状态不触发点击事件
-          return
-        }
-
-        if (!!this.field.options.onClick) {
-          let changeFn = new Function(this.field.options.onClick)
-          changeFn.call(this)
-        } else {
-          this.dispatch('VFormRender', 'buttonClick', [this]);
-        }
-      },
-
-      emitFieldDataChange(newValue, oldValue) {
-        this.$emit('field-value-changed', [newValue, oldValue])
-
-        /* 必须用dispatch向指定父组件派发消息！！ */
-        this.dispatch('VFormRender', 'fieldChange',
-            [this.field.options.name, newValue, oldValue, this.subFormName, this.subFormRowIndex])
-      },
-
-      syncUpdateFormModel(value) {
-        if (!!this.designState) {
-          return
-        }
-
-        if (!!this.subFormItemFlag) {
-          let subFormData = this.formModel[this.subFormName] || [{}]
-          let subFormDataRow = subFormData[this.subFormRowIndex]
-          subFormDataRow[this.field.options.name] = value
-        } else {
-          this.formModel[this.field.options.name] = value
-        }
-      },
-
-      remoteQuery(keyword) {
-        if (!!this.field.options.onRemoteQuery) {
-          let remoteFn = new Function('keyword', this.field.options.onRemoteQuery)
-          remoteFn.call(this, keyword)
-        }
-      },
-
-      getPropName() {
-        if (this.subFormItemFlag && !this.designState) {
-          return this.subFormName + "." + this.subFormRowIndex + "." + this.field.options.name + ""
-        } else {
-          return this.field.options.name
-        }
-      },
-
-      buildFieldRules() {
-        this.rules.splice(0, this.rules.length)  //清空已有
-        if (!!this.field.options.required) {
-          this.rules.push({
-            required: true,
-            message: this.i18nt('render.hint.fieldRequired'),
-          })
-        }
-
-        if (!!this.field.options.validation) {
-          let vldName = this.field.options.validation
-          if (!!FormValidators[vldName]) {
-            this.rules.push({
-              validator: FormValidators[vldName],
-              trigger: ['blur', 'change'],
-              label: this.field.options.label,
-              errorMsg: this.field.options.validationHint
-            })
-          } else {
-            this.rules.push({
-              validator: FormValidators['regExp'],
-              trigger: ['blur', 'change'],
-              regExp: vldName,
-              label: this.field.options.label,
-              errorMsg: this.field.options.validationHint
-            })
-          }
-        }
-
-        if (!!this.field.options.onValidate) {
-          let customFn = new Function('rule', 'value', 'callback', this.field.options.onValidate)
-          this.rules.push({
-            validator: customFn,
-            trigger: ['blur', 'change'],
-            label: this.field.options.label
-          })
-        }
-      },
-
-      initFileList() { //初始化上传组件的已上传文件列表
-        if ( ((this.field.type !== 'picture-upload') && (this.field.type !== 'file-upload')) || (this.designState === true) ) {
-          return
-        }
-
-        if (!!this.fieldModel) {
-          if (Array.isArray(this.fieldModel)) {
-            this.fileList = deepClone(this.fieldModel)
-          } else {
-            this.fileList.splice(0, 0, deepClone(this.fieldModel))
-          }
-        }
-      },
-
-      handlePictureExceed() {
-        //let uploadLimit = this.field.options.limit
-        this.$message.warning(eval('`' + this.i18nt('render.hint.uploadExceed') + '`'));
-      },
-
-      updateUploadFieldModelAndEmitDataChange() {
-        let oldValue = deepClone(this.fieldModel)
-        this.fieldModel = deepClone(this.fileList)
-        this.syncUpdateFormModel(this.fieldModel)
-        this.emitFieldDataChange(this.fieldModel, oldValue)
-      },
-
-      beforePictureUpload(file) {
-        let fileTypeCheckResult = false
-        if (!!this.field.options && !!this.field.options.fileTypes) {
-          let uploadFileTypes = this.field.options.fileTypes
-          if (uploadFileTypes.length > 0) {
-            fileTypeCheckResult = uploadFileTypes.some( (ft) => {
-              return file.type === 'image/' + ft
-            })
-          }
-        }
-        if (!fileTypeCheckResult) {
-          this.$message.error(this.i18nt('render.hint.unsupportedFileType') + file.type)
-          return false;
-        }
-
-        let fileSizeCheckResult = false
-        let uploadFileMaxSize = 5  //5MB
-        if (!!this.field.options && !!this.field.options.fileMaxSize) {
-          uploadFileMaxSize = this.field.options.fileMaxSize
-        }
-        fileSizeCheckResult = file.size / 1024 / 1024 <= uploadFileMaxSize
-        if (!fileSizeCheckResult) {
-          this.$message.error(this.$('render.hint.fileSizeExceed') + uploadFileMaxSize + 'MB')
-          return false;
-        }
-
-        this.uploadData.key = file.name
-        return this.handleOnBeforeUpload(file)
-      },
-
-      handlePictureUpload(res, file, fileList) {
-        if (!!this.field.options.onUploadSuccess) {
-          let customFn = new Function('result', 'file', 'fileList', this.field.options.onUploadSuccess)
-          customFn.call(this, res, file, fileList)
-        } else {
-          if (file.status === 'success') {
-            this.fileList.push(file)
-            this.updateUploadFieldModelAndEmitDataChange()
-
-            this.uploadBtnHidden = this.fileList.length >= this.field.options.limit
-          }
-        }
-      },
-
-      handlePictureRemove(file, fileList) {
-        let foundIdx = -1
-        this.fileList.forEach((tf,idx) => {
-          if (tf.name === file.name) {
-            foundIdx = idx
-          }
-        })
-
-        this.fileList = fileList
-        this.updateUploadFieldModelAndEmitDataChange()
-
-        this.uploadBtnHidden = fileList.length >= this.field.options.limit
-      },
-
-      handelUploadError(err, file, fileList) {
-        if (!!this.field.options.onUploadError) {
-          let customFn = new Function('error', 'file', 'fileList', this.field.options.onUploadError)
-          customFn.call(this, err, file, fileList)
-        } else {
-          this.$message({
-            message: this.i18nt('render.hint.uploadError') + err,
-            duration: 3000,
-            type: 'error',
-          })
-        }
-      },
-
-      handleFileExceed() {
-        //let uploadLimit = this.field.options.limit
-        this.$message.warning(eval('`' + this.i18nt('render.hint.uploadExceed') + '`'));
-      },
-
-      beforeFileUpload(file) {
-        let fileTypeCheckResult = false
-        let extFileName = file.name.substring(file.name.lastIndexOf('.') + 1)
-        if (!!this.field.options && !!this.field.options.fileTypes) {
-          let uploadFileTypes = this.field.options.fileTypes
-          if (uploadFileTypes.length > 0) {
-            fileTypeCheckResult = uploadFileTypes.some( (ft) => {
-              return extFileName.toLowerCase() === ft.toLowerCase()
-            })
-          }
-        }
-        if (!fileTypeCheckResult) {
-          this.$message.error(this.i18nt('render.hint.unsupportedFileType') + extFileName)
-          return false;
-        }
-
-        let fileSizeCheckResult = false
-        let uploadFileMaxSize = 5  //5MB
-        if (!!this.field.options && !!this.field.options.fileMaxSize) {
-          uploadFileMaxSize = this.field.options.fileMaxSize
-        }
-        fileSizeCheckResult = file.size / 1024 / 1024 <= uploadFileMaxSize
-        if (!fileSizeCheckResult) {
-          this.$message.error(this.i18nt('render.hint.fileSizeExceed') + uploadFileMaxSize + 'MB')
-          return false;
-        }
-
-        this.uploadData.key = file.name
-        return this.handleOnBeforeUpload(file)
-      },
-
-      handleFileUpload(res, file, fileList) {
-        if (!!this.field.options.onUploadSuccess) {
-          let mountFunc = new Function('result', 'file', 'fileList', this.field.options.onUploadSuccess)
-          mountFunc.call(this, res, file, fileList)
-        } else {
-          if (file.status === 'success') {
-            this.fileList.push(file)
-            this.updateUploadFieldModelAndEmitDataChange()
-
-            this.uploadBtnHidden = this.fileList.length >= this.field.options.limit
-          }
-        }
-      },
-
-      handleFileRemove(file, fileList) {
-        let foundIdx = -1
-        this.fileList.forEach((tf,idx) => {
-          if (tf.name === file.name) {
-            foundIdx = idx
-          }
-        })
-
-        this.fileList = fileList
-        this.updateUploadFieldModelAndEmitDataChange()
-
-        this.uploadBtnHidden = fileList.length >= this.field.options.limit
-      },
-
-      removeUploadFile(fileName) {
-        let foundIdx = -1
-        this.fileList.forEach((file,idx) => {
-          if (file.name === fileName) {
-            foundIdx = idx
-          }
-        })
-
-        if (foundIdx >= 0) {
-          this.fileList.splice(foundIdx, 1)
-          this.updateUploadFieldModelAndEmitDataChange()
-
-          this.uploadBtnHidden = this.fileList.length >= this.field.options.limit
-        }
-      },
-
-      //--------------------- 以下为组件支持外部调用的API方法 begin ------------------//
-      /* 提示：用户可自行扩充这些方法！！！ */
-
-      getFormRef() { /* 获取VFrom引用，必须在VForm组件created之后方可调用 */
-        return this.refList['v_form_ref']
-      },
-
-      getWidgetRef(widgetName, showError) {
-        let foundRef = this.refList[widgetName]
-        if (!foundRef && !!showError) {
-          this.$message.error(this.i18nt('render.hint.refNotFound') + widgetName)
-        }
-        return foundRef
-      },
-
-      getFieldEditor() { //获取内置的el表单组件
-        return this.$refs['fieldEditor']
-      },
-
-      /*
-        注意：VFormRender的setFormData方法不会触发子表单内field-widget的setValue方法，
-        因为setFormData方法调用后，子表单内所有field-widget组件已被清空，接收不到setFormData事件！！
-      * */
-      setValue(newValue) {
-        /* if ((this.field.type === 'picture-upload') || (this.field.type === 'file-upload')) {
-          this.fileList = newValue
-        } else */ if (!!this.field.formItemFlag) {
-          let oldValue = deepClone(this.fieldModel)
-          this.fieldModel = newValue
-          this.initFileList()
-
-          this.syncUpdateFormModel(newValue)
-          this.emitFieldDataChange(newValue, oldValue)
-        }
-      },
-
-      getValue() {
-        /* if ((this.field.type === 'picture-upload') || (this.field.type === 'file-upload')) {
-          return this.fileList
-        } else */ {
-          return this.fieldModel
-        }
-      },
-
-      resetField() {
-        let defaultValue = this.field.options.defaultValue
-        this.setValue(defaultValue)
-      },
-
-      setWidgetOption(optionName, optionValue) { //通用组件选项修改API
-        if (this.field.options.hasOwnProperty(optionName)) {
-          this.field.options[optionName] = optionValue
-          //TODO: 是否重新构建组件？？有些属性修改后必须重新构建组件才能生效，比如字段校验规则。
-        }
-      },
-
-      setReadonly(flag) {
-        this.field.options.readonly = flag
-      },
-
-      setDisabled(flag) {
-        this.field.options.disabled = flag
-      },
-
-      setAppendButtonVisible(flag) {
-        this.field.options.appendButton = flag
-      },
-
-      setAppendButtonDisabled(flag) {
-        this.field.options.appendButtonDisabled = flag
-      },
-
-      setHidden(flag) {
-        this.field.options.hidden = flag
-      },
-
-      setRequired(flag) {
-        this.field.options.required = flag
-        this.buildFieldRules()
-      },
-
-      setLabel(newLabel) {
-        this.field.options.label = newLabel
-      },
-
-      focus() {
-        if (!!this.getFieldEditor() && !!this.getFieldEditor().focus) {
-          this.getFieldEditor().focus()
-        }
-      },
-
-      clearSelectedOptions() {  //清空已选选项
-        if ((this.field.type !== 'checkbox') && (this.field.type !== 'radio') && (this.field.type !== 'select')) {
-          return
-        }
-
-        if ((this.field.type === 'checkbox') ||
-            ((this.field.type === 'select') && this.field.options.multiple)) {
-          this.fieldModel = []
-        } else {
-          this.fieldModel = ''
-        }
-      },
-
-      loadOptions(options) {
-        this.field.options.optionItems = deepClone(options)
-        this.clearSelectedOptions()  //清空已选选项
-      },
-
-      disableOption(optionValue) {
-        this.disableOptionOfList(this.field.options.optionItems, optionValue)
-      },
-
-      enableOption(optionValue) {
-        this.enableOptionOfList(this.field.options.optionItems, optionValue)
-      },
-
-      setUploadHeader(name, value) {
-        this.$set(this.uploadHeaders, name, value)
-      },
-
-      setUploadData(name, value) {
-        this.$set(this.uploadData, name, value)
-      },
-
-      setToolbar(customToolbar) {
-        this.customToolbar = customToolbar
-      },
-
-      //--------------------- 以上为组件支持外部调用的API方法 end ------------------//
-
-    }
-  }
-</script>
-
-<style lang="scss" scoped>
-  @import "../../../styles/global.scss";
-
-  .design-time-bottom-margin {
-    margin-bottom: 5px;
-  }
-
-  .field-wrapper {
-    position: relative;
-
-    .field-action{
-      position: absolute;
-      //bottom: -24px;
-      bottom: 0;
-      right: -2px;
-      height: 22px;
-      line-height: 22px;
-      background: $--color-primary;
-      z-index: 9;
-
-      i {
-        font-size: 14px;
-        color: #fff;
-        margin: 0 5px;
-        cursor: pointer;
-      }
-    }
-
-    .drag-handler {
-      position: absolute;
-      top: 0;
-      //bottom: -22px;  /* 拖拽手柄位于组件下方，有时无法正常拖动，原因未明？？ */
-      left: -1px;
-      height: 20px;
-      line-height: 20px;
-      //background: $--color-primary;
-      z-index: 9;
-
-      i {
-        font-size: 12px;
-        font-style: normal;
-        color: #fff;
-        margin: 4px;
-        cursor: move;
-      }
-
-      &:hover {
-        //opacity: 1;
-        background: $--color-primary;
-      }
-    }
-  }
-
-  .el-form-item {
-    //margin-bottom: 0 !important;
-    //margin-bottom: 6px;
-
-    //margin-top: 2px;
-    position: relative;
-
-    ::v-deep .el-form-item__label {
-      white-space: nowrap;
-      text-overflow: ellipsis;
-    }
-
-    ::v-deep .el-form-item__content {
-      //position: unset;  /* TODO: 忘了这个样式设置是为了解决什么问题？？ */
-    }
-
-    span.custom-label i {
-      margin: 0 3px;
-    }
-
-    /* 隐藏Chrome浏览器中el-input数字输入框右侧的上下调整小箭头 */
-    ::v-deep .hide-spin-button input::-webkit-outer-spin-button,
-    ::v-deep .hide-spin-button input::-webkit-inner-spin-button {
-      -webkit-appearance: none !important;
-    }
-
-    /* 隐藏Firefox浏览器中el-input数字输入框右侧的上下调整小箭头 */
-    ::v-deep .hide-spin-button input[type="number"] {
-      -moz-appearance: textfield;
-    }
-  }
-
-  .required ::v-deep .el-form-item__label::before {
-    content: '*';
-    color: #F56C6C;
-    margin-right: 4px;
-  }
-
-  .static-content-item {
-    min-height: 20px;
-    display: flex;  /* 垂直居中 */
-    align-items: center;  /* 垂直居中 */
-
-    ::v-deep .el-divider--horizontal {
-      margin: 0;
-    }
-  }
-
-  .el-form-item.selected, .static-content-item.selected {
-    outline: 2px solid $--color-primary;
-  }
-
-  ::v-deep .label-left-align .el-form-item__label {
-    text-align: left;
-  }
-
-  ::v-deep .label-center-align .el-form-item__label {
-    text-align: center;
-  }
-
-  ::v-deep .label-right-align .el-form-item__label {
-    text-align: right;
-  }
-
-  .full-width-input {
-    width: 100% !important;
-  }
-
-  .dynamicPseudoAfter ::v-deep .el-upload.el-upload--text {
-    color: $--color-primary;
-    font-size: 12px;
-    .el-icon-plus:after {
-      content: var(--select-file-action);
-    }
-  }
-
-  .hideUploadDiv {
-    ::v-deep div.el-upload--picture-card { /* 隐藏最后的图片上传按钮 */
-      display: none;
-    }
-
-    ::v-deep div.el-upload--text { /* 隐藏最后的文件上传按钮 */
-      display: none;
-    }
-
-    ::v-deep div.el-upload__tip { /* 隐藏最后的文件上传按钮 */
-      display: none;
-    }
-  }
-
-  .upload-file-list {
-    font-size: 12px;
-
-    .file-action {
-      color: $--color-primary;
-      margin-left: 5px;
-      margin-right: 5px;
-      cursor: pointer;
-    }
-  }
-
-</style>
diff --git a/src/components/form-designer/form-widget/field-widget/button-widget.vue b/src/components/form-designer/form-widget/field-widget/button-widget.vue
new file mode 100644
index 0000000..5f694b6
--- /dev/null
+++ b/src/components/form-designer/form-widget/field-widget/button-widget.vue
@@ -0,0 +1,87 @@
+<template>
+  <static-content-wrapper :designer="designer" :field="field" :design-state="designState"
+                     :parent-widget="parentWidget" :parent-list="parentList" :index-of-parent-list="indexOfParentList"
+                     :sub-form-row-index="subFormRowIndex" :sub-form-col-index="subFormColIndex" :sub-form-row-id="subFormRowId">
+    <el-button ref="fieldEditor" :type="field.options.type"
+               :plain="field.options.plain" :round="field.options.round"
+               :circle="field.options.circle" :icon="field.options.icon"
+               :disabled="field.options.disabled"
+               @click.native="handleButtonWidgetClick">
+      {{field.options.label}}</el-button>
+  </static-content-wrapper>
+</template>
+
+<script>
+  import StaticContentWrapper from './static-content-wrapper'
+  import emitter from 'element-ui/lib/mixins/emitter'
+  import i18n, {translate} from "@/utils/i18n";
+  import fieldMixin from "@/components/form-designer/form-widget/field-widget/fieldMixin";
+
+  export default {
+    name: "button-widget",
+    componentName: 'FieldWidget',  //必须固定为FieldWidget，用于接收父级组件的broadcast事件
+    mixins: [emitter, fieldMixin, i18n],
+    props: {
+      field: Object,
+      parentWidget: Object,
+      parentList: Array,
+      indexOfParentList: Number,
+      designer: Object,
+
+      designState: {
+        type: Boolean,
+        default: false
+      },
+
+      subFormRowIndex: { /* 子表单组件行索引，从0开始计数 */
+        type: Number,
+        default: -1
+      },
+      subFormColIndex: { /* 子表单组件列索引，从0开始计数 */
+        type: Number,
+        default: -1
+      },
+      subFormRowId: { /* 子表单组件行Id，唯一id且不可变 */
+        type: String,
+        default: ''
+      },
+
+    },
+    components: {
+      StaticContentWrapper,
+    },
+    computed: {
+
+    },
+    beforeCreate() {
+      /* 这里不能访问方法和属性！！ */
+    },
+
+    created() {
+      /* 注意：子组件mounted在父组件created之后、父组件mounted之前触发，故子组件mounted需要用到的prop
+         需要在父组件created中初始化！！ */
+      this.registerToRefList()
+      this.initEventHandler()
+
+      this.handleOnCreated()
+    },
+
+    mounted() {
+      this.handleOnMounted()
+    },
+
+    beforeDestroy() {
+      this.unregisterFromRefList()
+    },
+
+    methods: {
+
+    }
+
+  }
+</script>
+
+<style lang="scss" scoped>
+  @import "../../../../styles/global.scss"; //* static-content-wrapper已引入，还需要重复引入吗？ *//
+
+</style>
diff --git a/src/components/form-designer/form-widget/field-widget/cascader-widget.vue b/src/components/form-designer/form-widget/field-widget/cascader-widget.vue
new file mode 100644
index 0000000..fc33ad8
--- /dev/null
+++ b/src/components/form-designer/form-widget/field-widget/cascader-widget.vue
@@ -0,0 +1,104 @@
+<template>
+  <form-item-wrapper :designer="designer" :field="field" :rules="rules" :design-state="designState"
+                     :parent-widget="parentWidget" :parent-list="parentList" :index-of-parent-list="indexOfParentList"
+                     :sub-form-row-index="subFormRowIndex" :sub-form-col-index="subFormColIndex" :sub-form-row-id="subFormRowId">
+    <el-cascader ref="fieldEditor" :options="field.options.optionItems" v-model="fieldModel" class="full-width-input"
+                 :disabled="field.options.disabled"
+                 :size="field.options.size"
+                 :clearable="field.options.clearable"
+                 :filterable="field.options.filterable"
+                 :placeholder="field.options.placeholder || i18nt('render.hint.selectPlaceholder')"
+                 @focus="handleFocusCustomEvent" @blur="handleBlurCustomEvent"
+                 @change="handleChangeEvent">
+    </el-cascader>
+  </form-item-wrapper>
+</template>
+
+<script>
+  import FormItemWrapper from './form-item-wrapper'
+  import emitter from 'element-ui/lib/mixins/emitter'
+  import i18n, {translate} from "@/utils/i18n";
+  import fieldMixin from "@/components/form-designer/form-widget/field-widget/fieldMixin";
+
+  export default {
+    name: "cascader-widget",
+    componentName: 'FieldWidget',  //必须固定为FieldWidget，用于接收父级组件的broadcast事件
+    mixins: [emitter, fieldMixin, i18n],
+    props: {
+      field: Object,
+      parentWidget: Object,
+      parentList: Array,
+      indexOfParentList: Number,
+      designer: Object,
+
+      designState: {
+        type: Boolean,
+        default: false
+      },
+
+      subFormRowIndex: { /* 子表单组件行索引，从0开始计数 */
+        type: Number,
+        default: -1
+      },
+      subFormColIndex: { /* 子表单组件列索引，从0开始计数 */
+        type: Number,
+        default: -1
+      },
+      subFormRowId: { /* 子表单组件行Id，唯一id且不可变 */
+        type: String,
+        default: ''
+      },
+
+    },
+    components: {
+      FormItemWrapper,
+    },
+    inject: ['refList', 'formConfig', 'globalOptionData', 'globalModel'],
+    data() {
+      return {
+        oldFieldValue: null, //field组件change之前的值
+        fieldModel: null,
+        rules: [],
+      }
+    },
+    computed: {
+
+    },
+    beforeCreate() {
+      /* 这里不能访问方法和属性！！ */
+    },
+
+    created() {
+      /* 注意：子组件mounted在父组件created之后、父组件mounted之前触发，故子组件mounted需要用到的prop
+         需要在父组件created中初始化！！ */
+      this.initOptionItems()
+      this.initFieldModel()
+      this.registerToRefList()
+      this.initEventHandler()
+      this.buildFieldRules()
+
+      this.handleOnCreated()
+    },
+
+    mounted() {
+      this.handleOnMounted()
+    },
+
+    beforeDestroy() {
+      this.unregisterFromRefList()
+    },
+
+    methods: {
+
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  @import "../../../../styles/global.scss"; //* form-item-wrapper已引入，还需要重复引入吗？ *//
+
+  .full-width-input {
+    width: 100% !important;
+  }
+
+</style>
diff --git a/src/components/form-designer/form-widget/field-widget/checkbox-widget.vue b/src/components/form-designer/form-widget/field-widget/checkbox-widget.vue
new file mode 100644
index 0000000..0a28898
--- /dev/null
+++ b/src/components/form-designer/form-widget/field-widget/checkbox-widget.vue
@@ -0,0 +1,105 @@
+<template>
+  <form-item-wrapper :designer="designer" :field="field" :rules="rules" :design-state="designState"
+                     :parent-widget="parentWidget" :parent-list="parentList" :index-of-parent-list="indexOfParentList"
+                     :sub-form-row-index="subFormRowIndex" :sub-form-col-index="subFormColIndex" :sub-form-row-id="subFormRowId">
+    <el-checkbox-group ref="fieldEditor" v-model="fieldModel"
+                       :disabled="field.options.disabled" :size="field.options.size"
+                       @change="handleChangeEvent">
+      <template v-if="!!field.options.buttonStyle">
+        <el-checkbox-button v-for="(item, index) in field.options.optionItems" :key="index" :label="item.value"
+                            :disabled="item.disabled" :border="field.options.border"
+                            :style="{display: field.options.displayStyle}">{{item.label}}</el-checkbox-button>
+      </template>
+      <template v-else>
+        <el-checkbox v-for="(item, index) in field.options.optionItems" :key="index" :label="item.value"
+                     :disabled="item.disabled" :border="field.options.border"
+                     :style="{display: field.options.displayStyle}">{{item.label}}</el-checkbox>
+      </template>
+    </el-checkbox-group>
+  </form-item-wrapper>
+</template>
+
+<script>
+  import FormItemWrapper from './form-item-wrapper'
+  import emitter from 'element-ui/lib/mixins/emitter'
+  import i18n, {translate} from "@/utils/i18n";
+  import fieldMixin from "@/components/form-designer/form-widget/field-widget/fieldMixin";
+
+  export default {
+    name: "checkbox-widget",
+    componentName: 'FieldWidget',  //必须固定为FieldWidget，用于接收父级组件的broadcast事件
+    mixins: [emitter, fieldMixin, i18n],
+    props: {
+      field: Object,
+      parentWidget: Object,
+      parentList: Array,
+      indexOfParentList: Number,
+      designer: Object,
+
+      designState: {
+        type: Boolean,
+        default: false
+      },
+
+      subFormRowIndex: { /* 子表单组件行索引，从0开始计数 */
+        type: Number,
+        default: -1
+      },
+      subFormColIndex: { /* 子表单组件列索引，从0开始计数 */
+        type: Number,
+        default: -1
+      },
+      subFormRowId: { /* 子表单组件行Id，唯一id且不可变 */
+        type: String,
+        default: ''
+      },
+
+    },
+    components: {
+      FormItemWrapper,
+    },
+    inject: ['refList', 'formConfig', 'globalOptionData', 'globalModel'],
+    data() {
+      return {
+        oldFieldValue: null, //field组件change之前的值
+        fieldModel: null,
+        rules: [],
+      }
+    },
+    computed: {
+
+    },
+    beforeCreate() {
+      /* 这里不能访问方法和属性！！ */
+    },
+
+    created() {
+      /* 注意：子组件mounted在父组件created之后、父组件mounted之前触发，故子组件mounted需要用到的prop
+         需要在父组件created中初始化！！ */
+      this.initOptionItems()
+      this.initFieldModel()
+      this.registerToRefList()
+      this.initEventHandler()
+      this.buildFieldRules()
+
+      this.handleOnCreated()
+    },
+
+    mounted() {
+      this.handleOnMounted()
+    },
+
+    beforeDestroy() {
+      this.unregisterFromRefList()
+    },
+
+    methods: {
+
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  @import "../../../../styles/global.scss"; //* form-item-wrapper已引入，还需要重复引入吗？ *//
+
+</style>
diff --git a/src/components/form-designer/form-widget/field-widget/color-widget.vue b/src/components/form-designer/form-widget/field-widget/color-widget.vue
new file mode 100644
index 0000000..d5fca38
--- /dev/null
+++ b/src/components/form-designer/form-widget/field-widget/color-widget.vue
@@ -0,0 +1,99 @@
+<template>
+  <form-item-wrapper :designer="designer" :field="field" :rules="rules" :design-state="designState"
+                     :parent-widget="parentWidget" :parent-list="parentList" :index-of-parent-list="indexOfParentList"
+                     :sub-form-row-index="subFormRowIndex" :sub-form-col-index="subFormColIndex" :sub-form-row-id="subFormRowId">
+    <el-color-picker ref="fieldEditor" v-model="fieldModel"
+                     :size="field.options.size"
+                     :disabled="field.options.disabled"
+                     @change="handleChangeEvent">
+    </el-color-picker>
+  </form-item-wrapper>
+</template>
+
+<script>
+  import FormItemWrapper from './form-item-wrapper'
+  import emitter from 'element-ui/lib/mixins/emitter'
+  import i18n, {translate} from "@/utils/i18n";
+  import fieldMixin from "@/components/form-designer/form-widget/field-widget/fieldMixin";
+
+  export default {
+    name: "color-widget",
+    componentName: 'FieldWidget',  //必须固定为FieldWidget，用于接收父级组件的broadcast事件
+    mixins: [emitter, fieldMixin, i18n],
+    props: {
+      field: Object,
+      parentWidget: Object,
+      parentList: Array,
+      indexOfParentList: Number,
+      designer: Object,
+
+      designState: {
+        type: Boolean,
+        default: false
+      },
+
+      subFormRowIndex: { /* 子表单组件行索引，从0开始计数 */
+        type: Number,
+        default: -1
+      },
+      subFormColIndex: { /* 子表单组件列索引，从0开始计数 */
+        type: Number,
+        default: -1
+      },
+      subFormRowId: { /* 子表单组件行Id，唯一id且不可变 */
+        type: String,
+        default: ''
+      },
+
+    },
+    components: {
+      FormItemWrapper,
+    },
+    inject: ['refList', 'formConfig', 'globalOptionData', 'globalModel'],
+    data() {
+      return {
+        oldFieldValue: null, //field组件change之前的值
+        fieldModel: null,
+        rules: [],
+      }
+    },
+    computed: {
+
+    },
+    beforeCreate() {
+      /* 这里不能访问方法和属性！！ */
+    },
+
+    created() {
+      /* 注意：子组件mounted在父组件created之后、父组件mounted之前触发，故子组件mounted需要用到的prop
+         需要在父组件created中初始化！！ */
+      this.initFieldModel()
+      this.registerToRefList()
+      this.initEventHandler()
+      this.buildFieldRules()
+
+      this.handleOnCreated()
+    },
+
+    mounted() {
+      this.handleOnMounted()
+    },
+
+    beforeDestroy() {
+      this.unregisterFromRefList()
+    },
+
+    methods: {
+
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  @import "../../../../styles/global.scss"; //* form-item-wrapper已引入，还需要重复引入吗？ *//
+
+  .full-width-input {
+    width: 100% !important;
+  }
+
+</style>
diff --git a/src/components/form-designer/form-widget/field-widget/date-range-widget.vue b/src/components/form-designer/form-widget/field-widget/date-range-widget.vue
new file mode 100644
index 0000000..d47bc1d
--- /dev/null
+++ b/src/components/form-designer/form-widget/field-widget/date-range-widget.vue
@@ -0,0 +1,104 @@
+<template>
+  <form-item-wrapper :designer="designer" :field="field" :rules="rules" :design-state="designState"
+                     :parent-widget="parentWidget" :parent-list="parentList" :index-of-parent-list="indexOfParentList"
+                     :sub-form-row-index="subFormRowIndex" :sub-form-col-index="subFormColIndex" :sub-form-row-id="subFormRowId">
+    <el-date-picker ref="fieldEditor" :type="field.options.type" v-model="fieldModel" class="full-width-input"
+                    :disabled="field.options.disabled" :readonly="field.options.readonly"
+                    :size="field.options.size"
+                    :clearable="field.options.clearable" :editable="field.options.editable"
+                    :format="field.options.format" :value-format="field.options.valueFormat"
+                    :start-placeholder="field.options.startPlaceholder || i18nt('render.hint.startDatePlaceholder')"
+                    :end-placeholder="field.options.endPlaceholder || i18nt('render.hint.endDatePlaceholder')"
+                    @focus="handleFocusCustomEvent" @blur="handleBlurCustomEvent"
+                    @change="handleChangeEvent">
+    </el-date-picker>
+  </form-item-wrapper>
+</template>
+
+<script>
+  import FormItemWrapper from './form-item-wrapper'
+  import emitter from 'element-ui/lib/mixins/emitter'
+  import i18n, {translate} from "@/utils/i18n";
+  import fieldMixin from "@/components/form-designer/form-widget/field-widget/fieldMixin";
+
+  export default {
+    name: "date-range-widget",
+    componentName: 'FieldWidget',  //必须固定为FieldWidget，用于接收父级组件的broadcast事件
+    mixins: [emitter, fieldMixin, i18n],
+    props: {
+      field: Object,
+      parentWidget: Object,
+      parentList: Array,
+      indexOfParentList: Number,
+      designer: Object,
+
+      designState: {
+        type: Boolean,
+        default: false
+      },
+
+      subFormRowIndex: { /* 子表单组件行索引，从0开始计数 */
+        type: Number,
+        default: -1
+      },
+      subFormColIndex: { /* 子表单组件列索引，从0开始计数 */
+        type: Number,
+        default: -1
+      },
+      subFormRowId: { /* 子表单组件行Id，唯一id且不可变 */
+        type: String,
+        default: ''
+      },
+
+    },
+    components: {
+      FormItemWrapper,
+    },
+    inject: ['refList', 'formConfig', 'globalOptionData', 'globalModel'],
+    data() {
+      return {
+        oldFieldValue: null, //field组件change之前的值
+        fieldModel: null,
+        rules: [],
+      }
+    },
+    computed: {
+
+    },
+    beforeCreate() {
+      /* 这里不能访问方法和属性！！ */
+    },
+
+    created() {
+      /* 注意：子组件mounted在父组件created之后、父组件mounted之前触发，故子组件mounted需要用到的prop
+         需要在父组件created中初始化！！ */
+      this.initFieldModel()
+      this.registerToRefList()
+      this.initEventHandler()
+      this.buildFieldRules()
+
+      this.handleOnCreated()
+    },
+
+    mounted() {
+      this.handleOnMounted()
+    },
+
+    beforeDestroy() {
+      this.unregisterFromRefList()
+    },
+
+    methods: {
+
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  @import "../../../../styles/global.scss"; //* form-item-wrapper已引入，还需要重复引入吗？ *//
+
+  .full-width-input {
+    width: 100% !important;
+  }
+
+</style>
diff --git a/src/components/form-designer/form-widget/field-widget/date-widget.vue b/src/components/form-designer/form-widget/field-widget/date-widget.vue
new file mode 100644
index 0000000..01bdd2d
--- /dev/null
+++ b/src/components/form-designer/form-widget/field-widget/date-widget.vue
@@ -0,0 +1,103 @@
+<template>
+  <form-item-wrapper :designer="designer" :field="field" :rules="rules" :design-state="designState"
+                     :parent-widget="parentWidget" :parent-list="parentList" :index-of-parent-list="indexOfParentList"
+                     :sub-form-row-index="subFormRowIndex" :sub-form-col-index="subFormColIndex" :sub-form-row-id="subFormRowId">
+    <el-date-picker ref="fieldEditor" :type="field.options.type" v-model="fieldModel" class="full-width-input"
+                    :readonly="field.options.readonly" :disabled="field.options.disabled"
+                    :size="field.options.size"
+                    :clearable="field.options.clearable" :editable="field.options.editable"
+                    :format="field.options.format" :value-format="field.options.valueFormat"
+                    :placeholder="field.options.placeholder || i18nt('render.hint.datePlaceholder')"
+                    @focus="handleFocusCustomEvent" @blur="handleBlurCustomEvent"
+                    @change="handleChangeEvent">
+    </el-date-picker>
+  </form-item-wrapper>
+</template>
+
+<script>
+  import FormItemWrapper from './form-item-wrapper'
+  import emitter from 'element-ui/lib/mixins/emitter'
+  import i18n, {translate} from "@/utils/i18n";
+  import fieldMixin from "@/components/form-designer/form-widget/field-widget/fieldMixin";
+
+  export default {
+    name: "date-widget",
+    componentName: 'FieldWidget',  //必须固定为FieldWidget，用于接收父级组件的broadcast事件
+    mixins: [emitter, fieldMixin, i18n],
+    props: {
+      field: Object,
+      parentWidget: Object,
+      parentList: Array,
+      indexOfParentList: Number,
+      designer: Object,
+
+      designState: {
+        type: Boolean,
+        default: false
+      },
+
+      subFormRowIndex: { /* 子表单组件行索引，从0开始计数 */
+        type: Number,
+        default: -1
+      },
+      subFormColIndex: { /* 子表单组件列索引，从0开始计数 */
+        type: Number,
+        default: -1
+      },
+      subFormRowId: { /* 子表单组件行Id，唯一id且不可变 */
+        type: String,
+        default: ''
+      },
+
+    },
+    components: {
+      FormItemWrapper,
+    },
+    inject: ['refList', 'formConfig', 'globalOptionData', 'globalModel'],
+    data() {
+      return {
+        oldFieldValue: null, //field组件change之前的值
+        fieldModel: null,
+        rules: [],
+      }
+    },
+    computed: {
+
+    },
+    beforeCreate() {
+      /* 这里不能访问方法和属性！！ */
+    },
+
+    created() {
+      /* 注意：子组件mounted在父组件created之后、父组件mounted之前触发，故子组件mounted需要用到的prop
+         需要在父组件created中初始化！！ */
+      this.initFieldModel()
+      this.registerToRefList()
+      this.initEventHandler()
+      this.buildFieldRules()
+
+      this.handleOnCreated()
+    },
+
+    mounted() {
+      this.handleOnMounted()
+    },
+
+    beforeDestroy() {
+      this.unregisterFromRefList()
+    },
+
+    methods: {
+
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  @import "../../../../styles/global.scss"; //* form-item-wrapper已引入，还需要重复引入吗？ *//
+
+  .full-width-input {
+    width: 100% !important;
+  }
+
+</style>
diff --git a/src/components/form-designer/form-widget/field-widget/divider-widget.vue b/src/components/form-designer/form-widget/field-widget/divider-widget.vue
new file mode 100644
index 0000000..60a9b8a
--- /dev/null
+++ b/src/components/form-designer/form-widget/field-widget/divider-widget.vue
@@ -0,0 +1,83 @@
+<template>
+  <static-content-wrapper :designer="designer" :field="field" :design-state="designState"
+                          :parent-widget="parentWidget" :parent-list="parentList" :index-of-parent-list="indexOfParentList"
+                          :sub-form-row-index="subFormRowIndex" :sub-form-col-index="subFormColIndex" :sub-form-row-id="subFormRowId">
+    <el-divider ref="fieldEditor" direction="horizontal" :content-position="field.options.contentPosition">
+      {{field.options.label}}</el-divider>
+  </static-content-wrapper>
+</template>
+
+<script>
+  import StaticContentWrapper from './static-content-wrapper'
+  import emitter from 'element-ui/lib/mixins/emitter'
+  import i18n, {translate} from "@/utils/i18n";
+  import fieldMixin from "@/components/form-designer/form-widget/field-widget/fieldMixin";
+
+  export default {
+    name: "divider-widget",
+    componentName: 'FieldWidget',  //必须固定为FieldWidget，用于接收父级组件的broadcast事件
+    mixins: [emitter, fieldMixin, i18n],
+    props: {
+      field: Object,
+      parentWidget: Object,
+      parentList: Array,
+      indexOfParentList: Number,
+      designer: Object,
+
+      designState: {
+        type: Boolean,
+        default: false
+      },
+
+      subFormRowIndex: { /* 子表单组件行索引，从0开始计数 */
+        type: Number,
+        default: -1
+      },
+      subFormColIndex: { /* 子表单组件列索引，从0开始计数 */
+        type: Number,
+        default: -1
+      },
+      subFormRowId: { /* 子表单组件行Id，唯一id且不可变 */
+        type: String,
+        default: ''
+      },
+
+    },
+    components: {
+      StaticContentWrapper,
+    },
+    computed: {
+
+    },
+    beforeCreate() {
+      /* 这里不能访问方法和属性！！ */
+    },
+
+    created() {
+      /* 注意：子组件mounted在父组件created之后、父组件mounted之前触发，故子组件mounted需要用到的prop
+         需要在父组件created中初始化！！ */
+      this.registerToRefList()
+      this.initEventHandler()
+
+      this.handleOnCreated()
+    },
+
+    mounted() {
+      this.handleOnMounted()
+    },
+
+    beforeDestroy() {
+      this.unregisterFromRefList()
+    },
+
+    methods: {
+
+    }
+
+  }
+</script>
+
+<style lang="scss" scoped>
+  @import "../../../../styles/global.scss"; //* static-content-wrapper已引入，还需要重复引入吗？ *//
+
+</style>
diff --git a/src/components/form-designer/form-widget/field-widget/fieldMixin.js b/src/components/form-designer/form-widget/field-widget/fieldMixin.js
new file mode 100644
index 0000000..d6f1c1d
--- /dev/null
+++ b/src/components/form-designer/form-widget/field-widget/fieldMixin.js
@@ -0,0 +1,451 @@
+import {deepClone} from "@/utils/util";
+
+export default {
+  inject: ['refList', 'formConfig', 'globalOptionData', 'globalModel'],
+
+  computed: {
+    subFormName() {
+      return !!this.parentWidget ? this.parentWidget.options.name : ''
+    },
+
+    subFormItemFlag() {
+      return !!this.parentWidget ? this.parentWidget.type === 'sub-form' : false
+    },
+
+    formModel: {
+      cache: false,
+      get() {
+        return this.globalModel.formModel
+      }
+    },
+
+  },
+
+  methods: {
+
+    //--------------------- 组件内部方法 begin ------------------//
+
+    initFieldModel() {
+      if (this.field.formItemFlag === false) {
+        return
+      }
+
+      if (!!this.subFormItemFlag && !this.designState) {  //SubForm子表单组件需要特殊处理！！
+        let subFormData = this.formModel[this.subFormName]
+        if (((subFormData === undefined) || (subFormData[this.subFormRowIndex] === undefined) ||
+            (subFormData[this.subFormRowIndex][this.field.options.name] === undefined)) &&
+            (this.field.options.defaultValue !== undefined)) {
+          this.fieldModel = this.field.options.defaultValue
+          subFormData[this.subFormRowIndex][this.field.options.name] = this.field.options.defaultValue
+        } else if (subFormData[this.subFormRowIndex][this.field.options.name] === undefined) {
+          this.fieldModel = null
+          subFormData[this.subFormRowIndex][this.field.options.name] = null
+        } else {
+          this.fieldModel = subFormData[this.subFormRowIndex][this.field.options.name]
+        }
+
+        /* 主动触发子表单内field-widget的onChange事件！！ */
+        setTimeout(() => {  //延时触发onChange事件, 便于更新计算字段！！
+          this.handleOnChangeForSubForm(this.fieldModel, this.oldFieldValue, subFormData, this.subFormRowId)
+        }, 800)
+        this.oldFieldValue = deepClone(this.fieldModel)
+
+        this.initFileList()  //处理图片上传、文件上传字段
+
+        return
+      }
+
+      if ((this.formModel[this.field.options.name] === undefined) &&
+          (this.field.options.defaultValue !== undefined)) {
+        this.fieldModel = this.field.options.defaultValue
+      } else if (this.formModel[this.field.options.name] === undefined) {  //如果formModel为空对象，则初始化字段值为null!!
+        this.formModel[this.field.options.name] = null
+      } else {
+        this.fieldModel = this.formModel[this.field.options.name]
+      }
+      this.oldFieldValue = deepClone(this.fieldModel)
+      this.initFileList()  //处理图片上传、文件上传字段
+    },
+
+    initFileList() { //初始化上传组件的已上传文件列表
+      if ( ((this.field.type !== 'picture-upload') && (this.field.type !== 'file-upload')) || (this.designState === true) ) {
+        return
+      }
+
+      if (!!this.fieldModel) {
+        if (Array.isArray(this.fieldModel)) {
+          this.fileList = deepClone(this.fieldModel)
+        } else {
+          this.fileList.splice(0, 0, deepClone(this.fieldModel))
+        }
+      }
+    },
+
+    initEventHandler() {
+      this.$on('setFormData', function (newFormData) {
+        console.log('formModel of globalModel----------', this.globalModel.formModel)
+        if (!this.subFormItemFlag) {
+          this.setValue(newFormData[this.field.options.name])
+        }
+      })
+
+      this.$on('field-value-changed', function (values) {
+        if (!!this.subFormItemFlag) {
+          let subFormData = this.formModel[this.subFormName]
+          this.handleOnChangeForSubForm(values[0], values[1], subFormData, this.subFormRowId)
+        } else {
+          this.handleOnChange(values[0], values[1])
+        }
+      })
+    },
+
+    handleOnCreated() {
+      if (!!this.field.options.onCreated) {
+        let customFunc = new Function(this.field.options.onCreated)
+        customFunc.call(this)
+      }
+    },
+
+    handleOnMounted() {
+      if (!!this.field.options.onMounted) {
+        let mountFunc = new Function(this.field.options.onMounted)
+        mountFunc.call(this)
+      }
+    },
+
+    registerToRefList(oldRefName) {
+      if ((this.refList !== null) && !!this.field.options.name) {
+        if (this.subFormItemFlag && !this.designState) { //处理子表单元素（且非设计状态）
+          if (!!oldRefName) {
+            delete this.refList[oldRefName + '@row' + this.subFormRowId]
+          }
+          this.refList[this.field.options.name + '@row' + this.subFormRowId] = this
+        } else {
+          if (!!oldRefName) {
+            delete this.refList[oldRefName]
+          }
+          this.refList[this.field.options.name] = this
+        }
+      }
+    },
+
+    unregisterFromRefList() {  //销毁组件时注销组件ref
+      if ((this.refList !== null) && !!this.field.options.name) {
+        let oldRefName = this.field.options.name
+        if (this.subFormItemFlag && !this.designState) { //处理子表单元素（且非设计状态）
+          delete this.refList[oldRefName + '@row' + this.subFormRowId]
+        } else {
+          delete this.refList[oldRefName]
+        }
+      }
+    },
+
+    initOptionItems() {
+      if (this.designState) {
+        return
+      }
+
+      if ((this.field.type === 'radio') || (this.field.type === 'checkbox')
+          || (this.field.type === 'select') || (this.field.type === 'cascader')) {
+        if (!!this.globalOptionData && this.globalOptionData.hasOwnProperty(this.field.options.name)) {
+          this.loadOptions( this.globalOptionData[this.field.options.name] )
+        }
+      }
+    },
+
+    refreshDefaultValue() {
+      if ((this.designState === true) && (this.field.options.defaultValue !== undefined)) {
+        this.fieldModel = this.field.options.defaultValue
+      }
+    },
+
+    buildFieldRules() {
+      this.rules.splice(0, this.rules.length)  //清空已有
+      if (!!this.field.options.required) {
+        this.rules.push({
+          required: true,
+          message: this.i18nt('render.hint.fieldRequired'),
+        })
+      }
+
+      if (!!this.field.options.validation) {
+        let vldName = this.field.options.validation
+        if (!!FormValidators[vldName]) {
+          this.rules.push({
+            validator: FormValidators[vldName],
+            trigger: ['blur', 'change'],
+            label: this.field.options.label,
+            errorMsg: this.field.options.validationHint
+          })
+        } else {
+          this.rules.push({
+            validator: FormValidators['regExp'],
+            trigger: ['blur', 'change'],
+            regExp: vldName,
+            label: this.field.options.label,
+            errorMsg: this.field.options.validationHint
+          })
+        }
+      }
+
+      if (!!this.field.options.onValidate) {
+        let customFn = new Function('rule', 'value', 'callback', this.field.options.onValidate)
+        this.rules.push({
+          validator: customFn,
+          trigger: ['blur', 'change'],
+          label: this.field.options.label
+        })
+      }
+    },
+
+    disableOptionOfList(optionList, optionValue) {
+      if (!!optionList && (optionList.length > 0)) {
+        optionList.forEach(opt => {
+          if (opt.value === optionValue) {
+            opt.disabled = true
+          }
+        })
+      }
+    },
+
+    enableOptionOfList(optionList, optionValue) {
+      if (!!optionList && (optionList.length > 0)) {
+        optionList.forEach(opt => {
+          if (opt.value === optionValue) {
+            opt.disabled = false
+          }
+        })
+      }
+    },
+
+    //--------------------- 组件内部方法 end ------------------//
+
+    //--------------------- 事件处理 begin ------------------//
+
+    emitFieldDataChange(newValue, oldValue) {
+      this.$emit('field-value-changed', [newValue, oldValue])
+
+      /* 必须用dispatch向指定父组件派发消息！！ */
+      this.dispatch('VFormRender', 'fieldChange',
+          [this.field.options.name, newValue, oldValue, this.subFormName, this.subFormRowIndex])
+    },
+
+    syncUpdateFormModel(value) {
+      if (!!this.designState) {
+        return
+      }
+
+      if (!!this.subFormItemFlag) {
+        let subFormData = this.formModel[this.subFormName] || [{}]
+        let subFormDataRow = subFormData[this.subFormRowIndex]
+        subFormDataRow[this.field.options.name] = value
+      } else {
+        this.formModel[this.field.options.name] = value
+      }
+    },
+
+    handleChangeEvent(value) {
+      this.syncUpdateFormModel(value)
+      this.emitFieldDataChange(value, this.oldFieldValue)
+
+      //number组件一般不会触发focus事件，故此处需要手工赋值oldFieldValue！！
+      this.oldFieldValue = deepClone(value)  /* oldFieldValue需要在initFieldModel()方法中赋初值!! */
+    },
+
+    handleFocusCustomEvent(event) {
+      this.oldFieldValue = deepClone(this.fieldModel)  //保存修改change之前的值
+
+      if (!!this.field.options.onFocus) {
+        let customFn = new Function('event', this.field.options.onFocus)
+        customFn.call(this, event)
+      }
+    },
+
+    handleBlurCustomEvent(event) {
+      if (!!this.field.options.onBlur) {
+        let customFn = new Function('event', this.field.options.onBlur)
+        customFn.call(this, event)
+      }
+    },
+
+    handleInputCustomEvent(value) {
+      if (!!this.field.options.onInput) {
+        let customFn = new Function('value', this.field.options.onInput)
+        customFn.call(this, value)
+      }
+    },
+
+    emitAppendButtonClick() {
+      /* 必须调用mixins中的dispatch方法逐级向父组件发送消息！！ */
+      this.dispatch('VFormRender', 'appendButtonClick', [this]);
+    },
+
+    handleOnChange(val, oldVal) {  //自定义onChange事件
+      if (!!this.field.options.onChange) {
+        let changeFn = new Function('value', 'oldValue', this.field.options.onChange)
+        changeFn.call(this, val, oldVal)
+      }
+    },
+
+    handleOnChangeForSubForm(val, oldVal, subFormData, rowId) {  //子表单自定义onChange事件
+      if (!!this.field.options.onChange) {
+        let changeFn = new Function('value', 'oldValue', 'subFormData', 'rowId', this.field.options.onChange)
+        changeFn.call(this, val, oldVal, subFormData, rowId)
+      }
+    },
+
+    handleButtonWidgetClick() {
+      if (!!this.designState) { //设计状态不触发点击事件
+        return
+      }
+
+      if (!!this.field.options.onClick) {
+        let changeFn = new Function(this.field.options.onClick)
+        changeFn.call(this)
+      } else {
+        this.dispatch('VFormRender', 'buttonClick', [this]);
+      }
+    },
+
+    remoteQuery(keyword) {
+      if (!!this.field.options.onRemoteQuery) {
+        let remoteFn = new Function('keyword', this.field.options.onRemoteQuery)
+        remoteFn.call(this, keyword)
+      }
+    },
+
+    //--------------------- 事件处理 end ------------------//
+
+    //--------------------- 以下为组件支持外部调用的API方法 begin ------------------//
+    /* 提示：用户可自行扩充这些方法！！！ */
+
+    getFormRef() { /* 获取VFrom引用，必须在VForm组件created之后方可调用 */
+      return this.refList['v_form_ref']
+    },
+
+    getWidgetRef(widgetName, showError) {
+      let foundRef = this.refList[widgetName]
+      if (!foundRef && !!showError) {
+        this.$message.error(this.i18nt('render.hint.refNotFound') + widgetName)
+      }
+      return foundRef
+    },
+
+    getFieldEditor() { //获取内置的el表单组件
+      return this.$refs['fieldEditor']
+    },
+
+    /*
+      注意：VFormRender的setFormData方法不会触发子表单内field-widget的setValue方法，
+      因为setFormData方法调用后，子表单内所有field-widget组件已被清空，接收不到setFormData事件！！
+    * */
+    setValue(newValue) {
+      /* if ((this.field.type === 'picture-upload') || (this.field.type === 'file-upload')) {
+        this.fileList = newValue
+      } else */ if (!!this.field.formItemFlag) {
+        let oldValue = deepClone(this.fieldModel)
+        this.fieldModel = newValue
+        this.initFileList()
+
+        this.syncUpdateFormModel(newValue)
+        this.emitFieldDataChange(newValue, oldValue)
+      }
+    },
+
+    getValue() {
+      /* if ((this.field.type === 'picture-upload') || (this.field.type === 'file-upload')) {
+        return this.fileList
+      } else */ {
+        return this.fieldModel
+      }
+    },
+
+    resetField() {
+      let defaultValue = this.field.options.defaultValue
+      this.setValue(defaultValue)
+    },
+
+    setWidgetOption(optionName, optionValue) { //通用组件选项修改API
+      if (this.field.options.hasOwnProperty(optionName)) {
+        this.field.options[optionName] = optionValue
+        //TODO: 是否重新构建组件？？有些属性修改后必须重新构建组件才能生效，比如字段校验规则。
+      }
+    },
+
+    setReadonly(flag) {
+      this.field.options.readonly = flag
+    },
+
+    setDisabled(flag) {
+      this.field.options.disabled = flag
+    },
+
+    setAppendButtonVisible(flag) {
+      this.field.options.appendButton = flag
+    },
+
+    setAppendButtonDisabled(flag) {
+      this.field.options.appendButtonDisabled = flag
+    },
+
+    setHidden(flag) {
+      this.field.options.hidden = flag
+    },
+
+    setRequired(flag) {
+      this.field.options.required = flag
+      this.buildFieldRules()
+    },
+
+    setLabel(newLabel) {
+      this.field.options.label = newLabel
+    },
+
+    focus() {
+      if (!!this.getFieldEditor() && !!this.getFieldEditor().focus) {
+        this.getFieldEditor().focus()
+      }
+    },
+
+    clearSelectedOptions() {  //清空已选选项
+      if ((this.field.type !== 'checkbox') && (this.field.type !== 'radio') && (this.field.type !== 'select')) {
+        return
+      }
+
+      if ((this.field.type === 'checkbox') ||
+          ((this.field.type === 'select') && this.field.options.multiple)) {
+        this.fieldModel = []
+      } else {
+        this.fieldModel = ''
+      }
+    },
+
+    loadOptions(options) {
+      this.field.options.optionItems = deepClone(options)
+      this.clearSelectedOptions()  //清空已选选项
+    },
+
+    disableOption(optionValue) {
+      this.disableOptionOfList(this.field.options.optionItems, optionValue)
+    },
+
+    enableOption(optionValue) {
+      this.enableOptionOfList(this.field.options.optionItems, optionValue)
+    },
+
+    setUploadHeader(name, value) {
+      this.$set(this.uploadHeaders, name, value)
+    },
+
+    setUploadData(name, value) {
+      this.$set(this.uploadData, name, value)
+    },
+
+    setToolbar(customToolbar) {
+      this.customToolbar = customToolbar
+    },
+
+    //--------------------- 以上为组件支持外部调用的API方法 end ------------------//
+
+  }
+}
diff --git a/src/components/form-designer/form-widget/field-widget/file-upload-widget.vue b/src/components/form-designer/form-widget/field-widget/file-upload-widget.vue
new file mode 100644
index 0000000..cb03216
--- /dev/null
+++ b/src/components/form-designer/form-widget/field-widget/file-upload-widget.vue
@@ -0,0 +1,264 @@
+<template>
+  <form-item-wrapper :designer="designer" :field="field" :rules="rules" :design-state="designState"
+                     :parent-widget="parentWidget" :parent-list="parentList" :index-of-parent-list="indexOfParentList"
+                     :sub-form-row-index="subFormRowIndex" :sub-form-col-index="subFormColIndex" :sub-form-row-id="subFormRowId">
+    <el-upload ref="fieldEditor" :disabled="field.options.disabled"
+               :style="styleVariables" class="dynamicPseudoAfter"
+               :action="field.options.uploadURL" :headers="uploadHeaders" :data="uploadData"
+               :with-credentials="field.options.withCredentials"
+               :multiple="field.options.multipleSelect" :file-list="fileList"
+               :show-file-list="field.options.showFileList" :class="{'hideUploadDiv': uploadBtnHidden}"
+               :limit="field.options.limit" :on-exceed="handleFileExceed" :before-upload="beforeFileUpload"
+               :on-success="handleFileUpload" :on-error="handelUploadError" :on-remove="handleFileRemove">
+      <div slot="tip" class="el-upload__tip"
+           v-if="!!field.options.uploadTip">{{field.options.uploadTip}}</div>
+      <i slot="default" class="el-icon-plus avatar-uploader-icon"></i>
+      <div slot="file" slot-scope="{file}" class="upload-file-list">
+        <span class="upload-file-name" :title="file.name">{{file.name}}</span>
+        <a :href="file.url" download="">
+          <i class="el-icon-download file-action" title="i18nt('render.hint.downloadFile')"></i></a>
+        <i class="el-icon-delete file-action" title="i18nt('render.hint.removeFile')" v-if="!field.options.disabled"
+           @click="removeUploadFile(file.name)"></i>
+      </div>
+    </el-upload>
+  </form-item-wrapper>
+</template>
+
+<script>
+  import FormItemWrapper from './form-item-wrapper'
+  import emitter from 'element-ui/lib/mixins/emitter'
+  import i18n, {translate} from "@/utils/i18n";
+  import {deepClone} from "@/utils/util";
+  import fieldMixin from "@/components/form-designer/form-widget/field-widget/fieldMixin";
+
+  let selectFileText = "'" + translate('render.hint.selectFile') + "'"
+
+  export default {
+    name: "file-upload-widget",
+    componentName: 'FieldWidget',  //必须固定为FieldWidget，用于接收父级组件的broadcast事件
+    mixins: [emitter, fieldMixin, i18n],
+    props: {
+      field: Object,
+      parentWidget: Object,
+      parentList: Array,
+      indexOfParentList: Number,
+      designer: Object,
+
+      designState: {
+        type: Boolean,
+        default: false
+      },
+
+      subFormRowIndex: { /* 子表单组件行索引，从0开始计数 */
+        type: Number,
+        default: -1
+      },
+      subFormColIndex: { /* 子表单组件列索引，从0开始计数 */
+        type: Number,
+        default: -1
+      },
+      subFormRowId: { /* 子表单组件行Id，唯一id且不可变 */
+        type: String,
+        default: ''
+      },
+
+    },
+    components: {
+      FormItemWrapper,
+    },
+    inject: ['refList', 'formConfig', 'globalOptionData', 'globalModel'],
+    data() {
+      return {
+        oldFieldValue: null, //field组件change之前的值
+        fieldModel: null,
+        rules: [],
+
+        uploadHeaders: {},
+        uploadData: {
+          key: '',  //七牛云上传文件名
+          //token: '',  //七牛云上传token
+
+          //policy: '',  //又拍云上传policy
+          //authorization: '',  //又拍云上传签名
+        },
+        fileList: [],  //上传文件列表
+        uploadBtnHidden: false,
+
+        styleVariables: {
+          '--select-file-action': selectFileText,
+        },
+      }
+    },
+    computed: {
+
+    },
+    beforeCreate() {
+      /* 这里不能访问方法和属性！！ */
+    },
+
+    created() {
+      /* 注意：子组件mounted在父组件created之后、父组件mounted之前触发，故子组件mounted需要用到的prop
+         需要在父组件created中初始化！！ */
+      this.initFieldModel()
+      this.registerToRefList()
+      this.initEventHandler()
+      this.buildFieldRules()
+
+      this.handleOnCreated()
+    },
+
+    mounted() {
+      this.handleOnMounted()
+    },
+
+    beforeDestroy() {
+      this.unregisterFromRefList()
+    },
+
+    methods: {
+
+      handleFileExceed() {
+        //let uploadLimit = this.field.options.limit
+        this.$message.warning(eval('`' + this.i18nt('render.hint.uploadExceed') + '`'));
+      },
+
+      updateUploadFieldModelAndEmitDataChange() {
+        let oldValue = deepClone(this.fieldModel)
+        this.fieldModel = deepClone(this.fileList)
+        this.syncUpdateFormModel(this.fieldModel)
+        this.emitFieldDataChange(this.fieldModel, oldValue)
+      },
+
+      beforeFileUpload(file) {
+        let fileTypeCheckResult = false
+        let extFileName = file.name.substring(file.name.lastIndexOf('.') + 1)
+        if (!!this.field.options && !!this.field.options.fileTypes) {
+          let uploadFileTypes = this.field.options.fileTypes
+          if (uploadFileTypes.length > 0) {
+            fileTypeCheckResult = uploadFileTypes.some( (ft) => {
+              return extFileName.toLowerCase() === ft.toLowerCase()
+            })
+          }
+        }
+        if (!fileTypeCheckResult) {
+          this.$message.error(this.i18nt('render.hint.unsupportedFileType') + extFileName)
+          return false;
+        }
+
+        let fileSizeCheckResult = false
+        let uploadFileMaxSize = 5  //5MB
+        if (!!this.field.options && !!this.field.options.fileMaxSize) {
+          uploadFileMaxSize = this.field.options.fileMaxSize
+        }
+        fileSizeCheckResult = file.size / 1024 / 1024 <= uploadFileMaxSize
+        if (!fileSizeCheckResult) {
+          this.$message.error(this.i18nt('render.hint.fileSizeExceed') + uploadFileMaxSize + 'MB')
+          return false;
+        }
+
+        this.uploadData.key = file.name
+        return this.handleOnBeforeUpload(file)
+      },
+
+      handleFileUpload(res, file, fileList) {
+        if (!!this.field.options.onUploadSuccess) {
+          let mountFunc = new Function('result', 'file', 'fileList', this.field.options.onUploadSuccess)
+          mountFunc.call(this, res, file, fileList)
+        } else {
+          if (file.status === 'success') {
+            this.fileList.push(file)
+            this.updateUploadFieldModelAndEmitDataChange()
+
+            this.uploadBtnHidden = this.fileList.length >= this.field.options.limit
+          }
+        }
+      },
+
+      handleFileRemove(file, fileList) {
+        let foundIdx = -1
+        this.fileList.forEach((tf,idx) => {
+          if (tf.name === file.name) {
+            foundIdx = idx
+          }
+        })
+
+        this.fileList = fileList
+        this.updateUploadFieldModelAndEmitDataChange()
+
+        this.uploadBtnHidden = fileList.length >= this.field.options.limit
+      },
+
+      removeUploadFile(fileName) {
+        let foundIdx = -1
+        this.fileList.forEach((file,idx) => {
+          if (file.name === fileName) {
+            foundIdx = idx
+          }
+        })
+
+        if (foundIdx >= 0) {
+          this.fileList.splice(foundIdx, 1)
+          this.updateUploadFieldModelAndEmitDataChange()
+
+          this.uploadBtnHidden = this.fileList.length >= this.field.options.limit
+        }
+      },
+
+      handelUploadError(err, file, fileList) {
+        if (!!this.field.options.onUploadError) {
+          let customFn = new Function('error', 'file', 'fileList', this.field.options.onUploadError)
+          customFn.call(this, err, file, fileList)
+        } else {
+          this.$message({
+            message: this.i18nt('render.hint.uploadError') + err,
+            duration: 3000,
+            type: 'error',
+          })
+        }
+      },
+
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  @import "../../../../styles/global.scss"; //* form-item-wrapper已引入，还需要重复引入吗？ *//
+
+  .full-width-input {
+    width: 100% !important;
+  }
+
+  .dynamicPseudoAfter ::v-deep .el-upload.el-upload--text {
+    color: $--color-primary;
+    font-size: 12px;
+    .el-icon-plus:after {
+      content: var(--select-file-action);
+    }
+  }
+
+  .hideUploadDiv {
+    ::v-deep div.el-upload--picture-card { /* 隐藏最后的图片上传按钮 */
+      display: none;
+    }
+
+    ::v-deep div.el-upload--text { /* 隐藏最后的文件上传按钮 */
+      display: none;
+    }
+
+    ::v-deep div.el-upload__tip { /* 隐藏最后的文件上传按钮 */
+      display: none;
+    }
+  }
+
+  .upload-file-list {
+    font-size: 12px;
+
+    .file-action {
+      color: $--color-primary;
+      margin-left: 5px;
+      margin-right: 5px;
+      cursor: pointer;
+    }
+  }
+
+</style>
diff --git a/src/components/form-designer/form-widget/field-widget/form-item-wrapper.vue b/src/components/form-designer/form-widget/field-widget/form-item-wrapper.vue
new file mode 100644
index 0000000..b349931
--- /dev/null
+++ b/src/components/form-designer/form-widget/field-widget/form-item-wrapper.vue
@@ -0,0 +1,331 @@
+<!--
+/**
+ * author: vformAdmin
+ * email: vdpadmin@163.com
+ * website: http://www.vform666.com
+ * date: 2021.08.18
+ * remark: 如果要分发VForm源码，需在本文件顶部保留此文件头信息！！
+ */
+-->
+
+<template>
+  <div class="field-wrapper" :class="{'design-time-bottom-margin': !!this.designer}">
+    <el-form-item v-if="!!field.formItemFlag" :label="label" :label-width="labelWidth + 'px'"
+                  :title="field.options.labelTooltip"
+                  v-show="!field.options.hidden || (designState === true)"
+                  :rules="rules" :prop="getPropName()"
+                  :class="[selected ? 'selected' : '', labelAlign, customClass, field.options.required ? 'required' : '']"
+                  @click.native.stop="selectField(field)">
+
+      <span v-if="!!field.options.labelIconClass" slot="label" class="custom-label">
+        <template v-if="field.options.labelIconPosition === 'front'">
+          <template v-if="!!field.options.labelTooltip">
+            <el-tooltip :content="field.options.labelTooltip" effect="light">
+              <i :class="field.options.labelIconClass"></i></el-tooltip>{{label}}</template>
+          <template v-else>
+            <i :class="field.options.labelIconClass"></i>{{label}}</template>
+        </template>
+        <template v-else-if="field.options.labelIconPosition === 'rear'">
+          <template v-if="!!field.options.labelTooltip">
+            {{label}}<el-tooltip :content="field.options.labelTooltip" effect="light">
+            <i :class="field.options.labelIconClass"></i></el-tooltip></template>
+          <template v-else>
+            {{label}}<i :class="field.options.labelIconClass"></i></template>
+        </template>
+      </span>
+      <slot></slot>
+    </el-form-item>
+
+    <template v-if="!!this.designer">
+      <div class="field-action" v-if="designer.selectedId === field.id">
+        <i class="el-icon-back" :title="i18nt('designer.hint.selectParentWidget')" @click.stop="selectParentWidget(field)"></i>
+        <i class="el-icon-top" v-if="!!parentList && (parentList.length > 1)" :title="i18nt('designer.hint.moveUpWidget')"
+           @click.stop="moveUpWidget(field)"></i>
+        <i class="el-icon-bottom" v-if="!!parentList && (parentList.length > 1)" :title="i18nt('designer.hint.moveDownWidget')"
+           @click.stop="moveDownWidget(field)"></i>
+        <i class="el-icon-delete" :title="i18nt('designer.hint.remove')" @click.stop="removeFieldWidget"></i>
+      </div>
+
+      <div class="drag-handler background-opacity" v-if="designer.selectedId === field.id">
+        <i class="el-icon-rank" :title="i18nt('designer.hint.dragHandler')"></i>
+        <i>{{i18nt('designer.widgetLabel.' + field.type)}}</i>
+        <i v-if="field.options.hidden === true" class="iconfont icon-hide"></i>
+      </div>
+    </template>
+  </div>
+</template>
+
+<script>
+  import i18n from "@/utils/i18n";
+
+  export default {
+    name: "form-item-wrapper",
+    mixins: [i18n],
+    props: {
+      field: Object,
+      designer: Object,
+      parentWidget: Object,
+      parentList: Array,
+      indexOfParentList: Number,
+
+      designState: {
+        type: Boolean,
+        default: false
+      },
+
+      subFormRowIndex: { /* 子表单组件行索引，从0开始计数 */
+        type: Number,
+        default: -1
+      },
+      subFormColIndex: { /* 子表单组件列索引，从0开始计数 */
+        type: Number,
+        default: -1
+      },
+      subFormRowId: { /* 子表单组件行Id，唯一id且不可变 */
+        type: String,
+        default: ''
+      },
+
+      rules: Array,
+    },
+    inject: ['formConfig'],
+    computed: {
+      selected() {
+        return !!this.designer && this.field.id === this.designer.selectedId
+      },
+
+      label() {
+        if (!!this.field.options.labelHidden) {
+          return ''
+        }
+
+        return this.field.options.label
+      },
+
+      labelWidth() {
+        if (!!this.field.options.labelHidden) {
+          return 0
+        }
+
+        if (!!this.field.options.labelWidth) {
+          return this.field.options.labelWidth
+        }
+
+        if (!!this.designer) {
+          return this.designer.formConfig.labelWidth
+        } else {
+          return this.formConfig.labelWidth
+        }
+      },
+
+      labelAlign() {
+        if (!!this.field.options.labelAlign) {
+          return this.field.options.labelAlign
+        }
+
+        if (!!this.designer) {
+          return this.designer.formConfig.labelAlign || 'label-left-align'
+        } else {
+          return this.formConfig.labelAlign || 'label-left-align'
+        }
+      },
+
+      customClass() {
+        return !!this.field.options.customClass ? this.field.options.customClass.join(' ') : ''
+      },
+
+      subFormName() {
+        return !!this.parentWidget ? this.parentWidget.options.name : ''
+      },
+
+      subFormItemFlag() {
+        return !!this.parentWidget ? this.parentWidget.type === 'sub-form' : false
+      },
+
+    },
+    created() {
+      //
+    },
+    methods: {
+
+      selectField(field) {
+        if (!!this.designer) {
+          this.designer.setSelected(field)
+          this.designer.emitEvent('field-selected', this.parentWidget)  //发送选中组件的父组件对象
+        }
+      },
+
+      selectParentWidget() {
+        if (this.parentWidget) {
+          this.designer.setSelected(this.parentWidget)
+        } else {
+          this.designer.clearSelected()
+        }
+      },
+
+      moveUpWidget() {
+        this.designer.moveUpWidget(this.parentList, this.indexOfParentList)
+        this.designer.emitHistoryChange()
+      },
+
+      moveDownWidget() {
+        this.designer.moveDownWidget(this.parentList, this.indexOfParentList)
+        this.designer.emitHistoryChange()
+      },
+
+      removeFieldWidget() {
+        if (!!this.parentList) {
+          let nextSelected = null
+          if (this.parentList.length === 1) {
+            if (!!this.parentWidget) {
+              nextSelected = this.parentWidget
+            }
+          } else if (this.parentList.length === (1 + this.indexOfParentList)) {
+            nextSelected = this.parentList[this.indexOfParentList - 1]
+          } else {
+            nextSelected = this.parentList[this.indexOfParentList + 1]
+          }
+
+          this.$nextTick(() => {
+            this.parentList.splice(this.indexOfParentList, 1)
+            //if (!!nextSelected) {
+            this.designer.setSelected(nextSelected)
+            //}
+
+            this.designer.emitHistoryChange()
+          })
+        }
+      },
+
+      getPropName() {
+        if (this.subFormItemFlag && !this.designState) {
+          return this.subFormName + "." + this.subFormRowIndex + "." + this.field.options.name + ""
+        } else {
+          return this.field.options.name
+        }
+      },
+
+
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  @import "../../../../styles/global.scss";
+
+  .design-time-bottom-margin {
+    margin-bottom: 5px;
+  }
+
+  .field-wrapper {
+    position: relative;
+
+    .field-action{
+      position: absolute;
+      //bottom: -24px;
+      bottom: 0;
+      right: -2px;
+      height: 22px;
+      line-height: 22px;
+      background: $--color-primary;
+      z-index: 9;
+
+      i {
+        font-size: 14px;
+        color: #fff;
+        margin: 0 5px;
+        cursor: pointer;
+      }
+    }
+
+    .drag-handler {
+      position: absolute;
+      top: 0;
+      //bottom: -22px;  /* 拖拽手柄位于组件下方，有时无法正常拖动，原因未明？？ */
+      left: -1px;
+      height: 20px;
+      line-height: 20px;
+      //background: $--color-primary;
+      z-index: 9;
+
+      i {
+        font-size: 12px;
+        font-style: normal;
+        color: #fff;
+        margin: 4px;
+        cursor: move;
+      }
+
+      &:hover {
+        //opacity: 1;
+        background: $--color-primary;
+      }
+    }
+  }
+
+  .el-form-item {
+    //margin-bottom: 0 !important;
+    //margin-bottom: 6px;
+
+    //margin-top: 2px;
+    position: relative;
+
+    ::v-deep .el-form-item__label {
+      white-space: nowrap;
+      text-overflow: ellipsis;
+    }
+
+    ::v-deep .el-form-item__content {
+      //position: unset;  /* TODO: 忘了这个样式设置是为了解决什么问题？？ */
+    }
+
+    span.custom-label i {
+      margin: 0 3px;
+    }
+
+    /* 隐藏Chrome浏览器中el-input数字输入框右侧的上下调整小箭头 */
+    ::v-deep .hide-spin-button input::-webkit-outer-spin-button,
+    ::v-deep .hide-spin-button input::-webkit-inner-spin-button {
+      -webkit-appearance: none !important;
+    }
+
+    /* 隐藏Firefox浏览器中el-input数字输入框右侧的上下调整小箭头 */
+    ::v-deep .hide-spin-button input[type="number"] {
+      -moz-appearance: textfield;
+    }
+  }
+
+  .required ::v-deep .el-form-item__label::before {
+    content: '*';
+    color: #F56C6C;
+    margin-right: 4px;
+  }
+
+  .static-content-item {
+    min-height: 20px;
+    display: flex;  /* 垂直居中 */
+    align-items: center;  /* 垂直居中 */
+
+    ::v-deep .el-divider--horizontal {
+      margin: 0;
+    }
+  }
+
+  .el-form-item.selected, .static-content-item.selected {
+    outline: 2px solid $--color-primary;
+  }
+
+  ::v-deep .label-left-align .el-form-item__label {
+    text-align: left;
+  }
+
+  ::v-deep .label-center-align .el-form-item__label {
+    text-align: center;
+  }
+
+  ::v-deep .label-right-align .el-form-item__label {
+    text-align: right;
+  }
+
+
+</style>
diff --git a/src/components/form-designer/form-widget/field-widget/html-text-widget.vue b/src/components/form-designer/form-widget/field-widget/html-text-widget.vue
new file mode 100644
index 0000000..f757971
--- /dev/null
+++ b/src/components/form-designer/form-widget/field-widget/html-text-widget.vue
@@ -0,0 +1,82 @@
+<template>
+  <static-content-wrapper :designer="designer" :field="field" :design-state="designState"
+                          :parent-widget="parentWidget" :parent-list="parentList" :index-of-parent-list="indexOfParentList"
+                          :sub-form-row-index="subFormRowIndex" :sub-form-col-index="subFormColIndex" :sub-form-row-id="subFormRowId">
+    <div ref="fieldEditor" v-html="field.options.htmlContent"></div>
+  </static-content-wrapper>
+</template>
+
+<script>
+  import StaticContentWrapper from './static-content-wrapper'
+  import emitter from 'element-ui/lib/mixins/emitter'
+  import i18n, {translate} from "@/utils/i18n";
+  import fieldMixin from "@/components/form-designer/form-widget/field-widget/fieldMixin";
+
+  export default {
+    name: "html-text-widget",
+    componentName: 'FieldWidget',  //必须固定为FieldWidget，用于接收父级组件的broadcast事件
+    mixins: [emitter, fieldMixin, i18n],
+    props: {
+      field: Object,
+      parentWidget: Object,
+      parentList: Array,
+      indexOfParentList: Number,
+      designer: Object,
+
+      designState: {
+        type: Boolean,
+        default: false
+      },
+
+      subFormRowIndex: { /* 子表单组件行索引，从0开始计数 */
+        type: Number,
+        default: -1
+      },
+      subFormColIndex: { /* 子表单组件列索引，从0开始计数 */
+        type: Number,
+        default: -1
+      },
+      subFormRowId: { /* 子表单组件行Id，唯一id且不可变 */
+        type: String,
+        default: ''
+      },
+
+    },
+    components: {
+      StaticContentWrapper,
+    },
+    computed: {
+
+    },
+    beforeCreate() {
+      /* 这里不能访问方法和属性！！ */
+    },
+
+    created() {
+      /* 注意：子组件mounted在父组件created之后、父组件mounted之前触发，故子组件mounted需要用到的prop
+         需要在父组件created中初始化！！ */
+      this.registerToRefList()
+      this.initEventHandler()
+
+      this.handleOnCreated()
+    },
+
+    mounted() {
+      this.handleOnMounted()
+    },
+
+    beforeDestroy() {
+      this.unregisterFromRefList()
+    },
+
+    methods: {
+
+    }
+
+  }
+</script>
+
+<style lang="scss" scoped>
+  @import "../../../../styles/global.scss"; //* static-content-wrapper已引入，还需要重复引入吗？ *//
+
+</style>
diff --git a/src/components/form-designer/form-widget/field-widget/index.js b/src/components/form-designer/form-widget/field-widget/index.js
new file mode 100644
index 0000000..9e0f6ae
--- /dev/null
+++ b/src/components/form-designer/form-widget/field-widget/index.js
@@ -0,0 +1,10 @@
+const requireComponent = require.context('./', false, /\w+\.vue$/)
+
+let comps = {}
+
+requireComponent.keys().map(fileName => {
+  let comp = requireComponent(fileName).default;
+  comps[comp.name] = comp
+})
+
+export default comps;
diff --git a/src/components/form-designer/form-widget/field-widget/input-widget.vue b/src/components/form-designer/form-widget/field-widget/input-widget.vue
new file mode 100644
index 0000000..ae67698
--- /dev/null
+++ b/src/components/form-designer/form-widget/field-widget/input-widget.vue
@@ -0,0 +1,112 @@
+<template>
+  <form-item-wrapper :designer="designer" :field="field" :rules="rules" :design-state="designState"
+                     :parent-widget="parentWidget" :parent-list="parentList" :index-of-parent-list="indexOfParentList"
+                     :sub-form-row-index="subFormRowIndex" :sub-form-col-index="subFormColIndex" :sub-form-row-id="subFormRowId">
+    <el-input ref="fieldEditor" v-model="fieldModel"
+              :disabled="field.options.disabled" :readonly="field.options.readonly"
+              :size="field.options.size" class="hide-spin-button"
+              :type="inputType"
+              :show-password="field.options.showPassword"
+              :placeholder="field.options.placeholder"
+              :clearable="field.options.clearable"
+              :minlength="field.options.minLength" :maxlength="field.options.maxLength"
+              :show-word-limit="field.options.showWordLimit"
+              :prefix-icon="field.options.prefixIcon" :suffix-icon="field.options.suffixIcon"
+              @focus="handleFocusCustomEvent" @blur="handleBlurCustomEvent" @input="handleInputCustomEvent"
+              @change="handleChangeEvent">
+      <el-button slot="append" v-if="field.options.appendButton" :disabled="field.options.disabled || field.options.appendButtonDisabled"
+                 :class="field.options.buttonIcon" @click.native="emitAppendButtonClick"></el-button>
+    </el-input>
+  </form-item-wrapper>
+</template>
+
+<script>
+  import FormItemWrapper from './form-item-wrapper'
+  import emitter from 'element-ui/lib/mixins/emitter'
+  import i18n, {translate} from "@/utils/i18n";
+  import fieldMixin from "@/components/form-designer/form-widget/field-widget/fieldMixin";
+
+  export default {
+    name: "input-widget",
+    componentName: 'FieldWidget',  //必须固定为FieldWidget，用于接收父级组件的broadcast事件
+    mixins: [emitter, fieldMixin, i18n],
+    props: {
+      field: Object,
+      parentWidget: Object,
+      parentList: Array,
+      indexOfParentList: Number,
+      designer: Object,
+
+      designState: {
+        type: Boolean,
+        default: false
+      },
+
+      subFormRowIndex: { /* 子表单组件行索引，从0开始计数 */
+        type: Number,
+        default: -1
+      },
+      subFormColIndex: { /* 子表单组件列索引，从0开始计数 */
+        type: Number,
+        default: -1
+      },
+      subFormRowId: { /* 子表单组件行Id，唯一id且不可变 */
+        type: String,
+        default: ''
+      },
+
+    },
+    components: {
+      FormItemWrapper,
+    },
+    inject: ['refList', 'formConfig', 'globalOptionData', 'globalModel'],
+    data() {
+      return {
+        oldFieldValue: null, //field组件change之前的值
+        fieldModel: null,
+        rules: [],
+      }
+    },
+    computed: {
+      inputType() {
+        if (this.field.options.type === 'number') {
+          return 'text'  //当input的type设置为number时，如果输入非数字字符，则v-model拿到的值为空字符串，无法实现输入校验！故屏蔽之！！
+        }
+
+        return this.field.options.type
+      },
+
+    },
+    beforeCreate() {
+      /* 这里不能访问方法和属性！！ */
+    },
+
+    created() {
+      /* 注意：子组件mounted在父组件created之后、父组件mounted之前触发，故子组件mounted需要用到的prop
+         需要在父组件created中初始化！！ */
+      this.initFieldModel()
+      this.registerToRefList()
+      this.initEventHandler()
+      this.buildFieldRules()
+
+      this.handleOnCreated()
+    },
+
+    mounted() {
+      this.handleOnMounted()
+    },
+
+    beforeDestroy() {
+      this.unregisterFromRefList()
+    },
+
+    methods: {
+
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  @import "../../../../styles/global.scss"; //* form-item-wrapper已引入，还需要重复引入吗？ *//
+
+</style>
diff --git a/src/components/form-designer/form-widget/field-widget/number-widget.vue b/src/components/form-designer/form-widget/field-widget/number-widget.vue
new file mode 100644
index 0000000..95b424d
--- /dev/null
+++ b/src/components/form-designer/form-widget/field-widget/number-widget.vue
@@ -0,0 +1,103 @@
+<template>
+  <form-item-wrapper :designer="designer" :field="field" :rules="rules" :design-state="designState"
+                     :parent-widget="parentWidget" :parent-list="parentList" :index-of-parent-list="indexOfParentList"
+                     :sub-form-row-index="subFormRowIndex" :sub-form-col-index="subFormColIndex" :sub-form-row-id="subFormRowId">
+    <el-input-number ref="fieldEditor" v-model="fieldModel" class="full-width-input"
+                     :disabled="field.options.disabled"
+                     :size="field.options.size" :controls-position="field.options.controlsPosition"
+                     :placeholder="field.options.placeholder"
+                     :min="field.options.min" :max="field.options.max"
+                     :precision="field.options.precision" :step="field.options.step"
+                     @focus="handleFocusCustomEvent" @blur="handleBlurCustomEvent"
+                     @change="handleChangeEvent">
+    </el-input-number>
+  </form-item-wrapper>
+</template>
+
+<script>
+  import FormItemWrapper from './form-item-wrapper'
+  import emitter from 'element-ui/lib/mixins/emitter'
+  import i18n, {translate} from "@/utils/i18n";
+  import fieldMixin from "@/components/form-designer/form-widget/field-widget/fieldMixin";
+
+  export default {
+    name: "number-widget",
+    componentName: 'FieldWidget',  //必须固定为FieldWidget，用于接收父级组件的broadcast事件
+    mixins: [emitter, fieldMixin, i18n],
+    props: {
+      field: Object,
+      parentWidget: Object,
+      parentList: Array,
+      indexOfParentList: Number,
+      designer: Object,
+
+      designState: {
+        type: Boolean,
+        default: false
+      },
+
+      subFormRowIndex: { /* 子表单组件行索引，从0开始计数 */
+        type: Number,
+        default: -1
+      },
+      subFormColIndex: { /* 子表单组件列索引，从0开始计数 */
+        type: Number,
+        default: -1
+      },
+      subFormRowId: { /* 子表单组件行Id，唯一id且不可变 */
+        type: String,
+        default: ''
+      },
+
+    },
+    components: {
+      FormItemWrapper,
+    },
+    inject: ['refList', 'formConfig', 'globalOptionData', 'globalModel'],
+    data() {
+      return {
+        oldFieldValue: null, //field组件change之前的值
+        fieldModel: null,
+        rules: [],
+      }
+    },
+    computed: {
+
+    },
+    beforeCreate() {
+      /* 这里不能访问方法和属性！！ */
+    },
+
+    created() {
+      /* 注意：子组件mounted在父组件created之后、父组件mounted之前触发，故子组件mounted需要用到的prop
+         需要在父组件created中初始化！！ */
+      this.initFieldModel()
+      this.registerToRefList()
+      this.initEventHandler()
+      this.buildFieldRules()
+
+      this.handleOnCreated()
+    },
+
+    mounted() {
+      this.handleOnMounted()
+    },
+
+    beforeDestroy() {
+      this.unregisterFromRefList()
+    },
+
+    methods: {
+
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  @import "../../../../styles/global.scss"; //* form-item-wrapper已引入，还需要重复引入吗？ *//
+
+  .full-width-input {
+    width: 100% !important;
+  }
+
+</style>
diff --git a/src/components/form-designer/form-widget/field-widget/picture-upload-widget.vue b/src/components/form-designer/form-widget/field-widget/picture-upload-widget.vue
new file mode 100644
index 0000000..e1f2286
--- /dev/null
+++ b/src/components/form-designer/form-widget/field-widget/picture-upload-widget.vue
@@ -0,0 +1,219 @@
+<template>
+  <form-item-wrapper :designer="designer" :field="field" :rules="rules" :design-state="designState"
+                     :parent-widget="parentWidget" :parent-list="parentList" :index-of-parent-list="indexOfParentList"
+                     :sub-form-row-index="subFormRowIndex" :sub-form-col-index="subFormColIndex" :sub-form-row-id="subFormRowId">
+    <el-upload ref="fieldEditor" :disabled="field.options.disabled"
+               :action="field.options.uploadURL" :headers="uploadHeaders" :data="uploadData"
+               :with-credentials="field.options.withCredentials"
+               :multiple="field.options.multipleSelect" :file-list="fileList" :show-file-list="field.options.showFileList"
+               list-type="picture-card" :class="{'hideUploadDiv': uploadBtnHidden}"
+               :limit="field.options.limit" :on-exceed="handlePictureExceed"
+               :before-upload="beforePictureUpload"
+               :on-success="handlePictureUpload" :on-error="handelUploadError" :on-remove="handlePictureRemove">
+      <div slot="tip" class="el-upload__tip"
+           v-if="!!field.options.uploadTip">{{field.options.uploadTip}}</div>
+      <i class="el-icon-plus avatar-uploader-icon"></i>
+    </el-upload>
+  </form-item-wrapper>
+</template>
+
+<script>
+  import FormItemWrapper from './form-item-wrapper'
+  import emitter from 'element-ui/lib/mixins/emitter'
+  import i18n, {translate} from "@/utils/i18n";
+  import {deepClone} from "@/utils/util";
+  import fieldMixin from "@/components/form-designer/form-widget/field-widget/fieldMixin";
+
+  export default {
+    name: "picture-upload-widget",
+    componentName: 'FieldWidget',  //必须固定为FieldWidget，用于接收父级组件的broadcast事件
+    mixins: [emitter, fieldMixin, i18n],
+    props: {
+      field: Object,
+      parentWidget: Object,
+      parentList: Array,
+      indexOfParentList: Number,
+      designer: Object,
+
+      designState: {
+        type: Boolean,
+        default: false
+      },
+
+      subFormRowIndex: { /* 子表单组件行索引，从0开始计数 */
+        type: Number,
+        default: -1
+      },
+      subFormColIndex: { /* 子表单组件列索引，从0开始计数 */
+        type: Number,
+        default: -1
+      },
+      subFormRowId: { /* 子表单组件行Id，唯一id且不可变 */
+        type: String,
+        default: ''
+      },
+
+    },
+    components: {
+      FormItemWrapper,
+    },
+    inject: ['refList', 'formConfig', 'globalOptionData', 'globalModel'],
+    data() {
+      return {
+        oldFieldValue: null, //field组件change之前的值
+        fieldModel: null,
+        rules: [],
+
+        uploadHeaders: {},
+        uploadData: {
+          key: '',  //七牛云上传文件名
+          //token: '',  //七牛云上传token
+
+          //policy: '',  //又拍云上传policy
+          //authorization: '',  //又拍云上传签名
+        },
+        fileList: [],  //上传文件列表
+        uploadBtnHidden: false,
+
+        // styleVariables: {
+        //   '--select-file-action': selectFileText,
+        // },
+      }
+    },
+    computed: {
+
+    },
+    beforeCreate() {
+      /* 这里不能访问方法和属性！！ */
+    },
+
+    created() {
+      /* 注意：子组件mounted在父组件created之后、父组件mounted之前触发，故子组件mounted需要用到的prop
+         需要在父组件created中初始化！！ */
+      this.initFieldModel()
+      this.registerToRefList()
+      this.initEventHandler()
+      this.buildFieldRules()
+
+      this.handleOnCreated()
+    },
+
+    mounted() {
+      this.handleOnMounted()
+    },
+
+    beforeDestroy() {
+      this.unregisterFromRefList()
+    },
+
+    methods: {
+
+      handlePictureExceed() {
+        //let uploadLimit = this.field.options.limit
+        this.$message.warning(eval('`' + this.i18nt('render.hint.uploadExceed') + '`'));
+      },
+
+      updateUploadFieldModelAndEmitDataChange() {
+        let oldValue = deepClone(this.fieldModel)
+        this.fieldModel = deepClone(this.fileList)
+        this.syncUpdateFormModel(this.fieldModel)
+        this.emitFieldDataChange(this.fieldModel, oldValue)
+      },
+
+      beforePictureUpload(file) {
+        let fileTypeCheckResult = false
+        if (!!this.field.options && !!this.field.options.fileTypes) {
+          let uploadFileTypes = this.field.options.fileTypes
+          if (uploadFileTypes.length > 0) {
+            fileTypeCheckResult = uploadFileTypes.some( (ft) => {
+              return file.type === 'image/' + ft
+            })
+          }
+        }
+        if (!fileTypeCheckResult) {
+          this.$message.error(this.i18nt('render.hint.unsupportedFileType') + file.type)
+          return false;
+        }
+
+        let fileSizeCheckResult = false
+        let uploadFileMaxSize = 5  //5MB
+        if (!!this.field.options && !!this.field.options.fileMaxSize) {
+          uploadFileMaxSize = this.field.options.fileMaxSize
+        }
+        fileSizeCheckResult = file.size / 1024 / 1024 <= uploadFileMaxSize
+        if (!fileSizeCheckResult) {
+          this.$message.error(this.$('render.hint.fileSizeExceed') + uploadFileMaxSize + 'MB')
+          return false;
+        }
+
+        this.uploadData.key = file.name
+        return this.handleOnBeforeUpload(file)
+      },
+
+      handlePictureUpload(res, file, fileList) {
+        if (!!this.field.options.onUploadSuccess) {
+          let customFn = new Function('result', 'file', 'fileList', this.field.options.onUploadSuccess)
+          customFn.call(this, res, file, fileList)
+        } else {
+          if (file.status === 'success') {
+            this.fileList.push(file)
+            this.updateUploadFieldModelAndEmitDataChange()
+
+            this.uploadBtnHidden = this.fileList.length >= this.field.options.limit
+          }
+        }
+      },
+
+      handlePictureRemove(file, fileList) {
+        let foundIdx = -1
+        this.fileList.forEach((tf,idx) => {
+          if (tf.name === file.name) {
+            foundIdx = idx
+          }
+        })
+
+        this.fileList = fileList
+        this.updateUploadFieldModelAndEmitDataChange()
+
+        this.uploadBtnHidden = fileList.length >= this.field.options.limit
+      },
+
+      handelUploadError(err, file, fileList) {
+        if (!!this.field.options.onUploadError) {
+          let customFn = new Function('error', 'file', 'fileList', this.field.options.onUploadError)
+          customFn.call(this, err, file, fileList)
+        } else {
+          this.$message({
+            message: this.i18nt('render.hint.uploadError') + err,
+            duration: 3000,
+            type: 'error',
+          })
+        }
+      },
+
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  @import "../../../../styles/global.scss"; //* form-item-wrapper已引入，还需要重复引入吗？ *//
+
+  .full-width-input {
+    width: 100% !important;
+  }
+
+  .hideUploadDiv {
+    ::v-deep div.el-upload--picture-card { /* 隐藏最后的图片上传按钮 */
+      display: none;
+    }
+
+    ::v-deep div.el-upload--text { /* 隐藏最后的文件上传按钮 */
+      display: none;
+    }
+
+    ::v-deep div.el-upload__tip { /* 隐藏最后的文件上传按钮 */
+      display: none;
+    }
+  }
+
+</style>
diff --git a/src/components/form-designer/form-widget/field-widget/radio-widget.vue b/src/components/form-designer/form-widget/field-widget/radio-widget.vue
new file mode 100644
index 0000000..db950ed
--- /dev/null
+++ b/src/components/form-designer/form-widget/field-widget/radio-widget.vue
@@ -0,0 +1,105 @@
+<template>
+  <form-item-wrapper :designer="designer" :field="field" :rules="rules" :design-state="designState"
+                     :parent-widget="parentWidget" :parent-list="parentList" :index-of-parent-list="indexOfParentList"
+                     :sub-form-row-index="subFormRowIndex" :sub-form-col-index="subFormColIndex" :sub-form-row-id="subFormRowId">
+    <el-radio-group ref="fieldEditor" v-model="fieldModel"
+                    :disabled="field.options.disabled" :size="field.options.size"
+                    @change="handleChangeEvent">
+      <template v-if="!!field.options.buttonStyle">
+        <el-radio-button v-for="(item, index) in field.options.optionItems" :key="index" :label="item.value"
+                         :disabled="item.disabled" :border="field.options.border"
+                         :style="{display: field.options.displayStyle}">{{item.label}}</el-radio-button>
+      </template>
+      <template v-else>
+        <el-radio v-for="(item, index) in field.options.optionItems" :key="index" :label="item.value"
+                  :disabled="item.disabled" :border="field.options.border"
+                  :style="{display: field.options.displayStyle}">{{item.label}}</el-radio>
+      </template>
+    </el-radio-group>
+  </form-item-wrapper>
+</template>
+
+<script>
+  import FormItemWrapper from './form-item-wrapper'
+  import emitter from 'element-ui/lib/mixins/emitter'
+  import i18n, {translate} from "@/utils/i18n";
+  import fieldMixin from "@/components/form-designer/form-widget/field-widget/fieldMixin";
+
+  export default {
+    name: "radio-widget",
+    componentName: 'FieldWidget',  //必须固定为FieldWidget，用于接收父级组件的broadcast事件
+    mixins: [emitter, fieldMixin, i18n],
+    props: {
+      field: Object,
+      parentWidget: Object,
+      parentList: Array,
+      indexOfParentList: Number,
+      designer: Object,
+
+      designState: {
+        type: Boolean,
+        default: false
+      },
+
+      subFormRowIndex: { /* 子表单组件行索引，从0开始计数 */
+        type: Number,
+        default: -1
+      },
+      subFormColIndex: { /* 子表单组件列索引，从0开始计数 */
+        type: Number,
+        default: -1
+      },
+      subFormRowId: { /* 子表单组件行Id，唯一id且不可变 */
+        type: String,
+        default: ''
+      },
+
+    },
+    components: {
+      FormItemWrapper,
+    },
+    inject: ['refList', 'formConfig', 'globalOptionData', 'globalModel'],
+    data() {
+      return {
+        oldFieldValue: null, //field组件change之前的值
+        fieldModel: null,
+        rules: [],
+      }
+    },
+    computed: {
+
+    },
+    beforeCreate() {
+      /* 这里不能访问方法和属性！！ */
+    },
+
+    created() {
+      /* 注意：子组件mounted在父组件created之后、父组件mounted之前触发，故子组件mounted需要用到的prop
+         需要在父组件created中初始化！！ */
+      this.initOptionItems()
+      this.initFieldModel()
+      this.registerToRefList()
+      this.initEventHandler()
+      this.buildFieldRules()
+
+      this.handleOnCreated()
+    },
+
+    mounted() {
+      this.handleOnMounted()
+    },
+
+    beforeDestroy() {
+      this.unregisterFromRefList()
+    },
+
+    methods: {
+
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  @import "../../../../styles/global.scss"; //* form-item-wrapper已引入，还需要重复引入吗？ *//
+
+</style>
diff --git a/src/components/form-designer/form-widget/field-widget/rate-widget.vue b/src/components/form-designer/form-widget/field-widget/rate-widget.vue
new file mode 100644
index 0000000..4803a38
--- /dev/null
+++ b/src/components/form-designer/form-widget/field-widget/rate-widget.vue
@@ -0,0 +1,102 @@
+<template>
+  <form-item-wrapper :designer="designer" :field="field" :rules="rules" :design-state="designState"
+                     :parent-widget="parentWidget" :parent-list="parentList" :index-of-parent-list="indexOfParentList"
+                     :sub-form-row-index="subFormRowIndex" :sub-form-col-index="subFormColIndex" :sub-form-row-id="subFormRowId">
+    <el-rate ref="fieldEditor" v-model="fieldModel"
+             :disabled="field.options.disabled"
+             :max="field.options.max"
+             :low-threshold="field.options.lowThreshold" :high-threshold="field.options.highThreshold"
+             :allow-half="field.options.allowHalf"
+             :show-text="field.options.showText" :show-score="field.options.showScore"
+             @change="handleChangeEvent">
+    </el-rate>
+  </form-item-wrapper>
+</template>
+
+<script>
+  import FormItemWrapper from './form-item-wrapper'
+  import emitter from 'element-ui/lib/mixins/emitter'
+  import i18n, {translate} from "@/utils/i18n";
+  import fieldMixin from "@/components/form-designer/form-widget/field-widget/fieldMixin";
+
+  export default {
+    name: "rate-widget",
+    componentName: 'FieldWidget',  //必须固定为FieldWidget，用于接收父级组件的broadcast事件
+    mixins: [emitter, fieldMixin, i18n],
+    props: {
+      field: Object,
+      parentWidget: Object,
+      parentList: Array,
+      indexOfParentList: Number,
+      designer: Object,
+
+      designState: {
+        type: Boolean,
+        default: false
+      },
+
+      subFormRowIndex: { /* 子表单组件行索引，从0开始计数 */
+        type: Number,
+        default: -1
+      },
+      subFormColIndex: { /* 子表单组件列索引，从0开始计数 */
+        type: Number,
+        default: -1
+      },
+      subFormRowId: { /* 子表单组件行Id，唯一id且不可变 */
+        type: String,
+        default: ''
+      },
+
+    },
+    components: {
+      FormItemWrapper,
+    },
+    inject: ['refList', 'formConfig', 'globalOptionData', 'globalModel'],
+    data() {
+      return {
+        oldFieldValue: null, //field组件change之前的值
+        fieldModel: null,
+        rules: [],
+      }
+    },
+    computed: {
+
+    },
+    beforeCreate() {
+      /* 这里不能访问方法和属性！！ */
+    },
+
+    created() {
+      /* 注意：子组件mounted在父组件created之后、父组件mounted之前触发，故子组件mounted需要用到的prop
+         需要在父组件created中初始化！！ */
+      this.initFieldModel()
+      this.registerToRefList()
+      this.initEventHandler()
+      this.buildFieldRules()
+
+      this.handleOnCreated()
+    },
+
+    mounted() {
+      this.handleOnMounted()
+    },
+
+    beforeDestroy() {
+      this.unregisterFromRefList()
+    },
+
+    methods: {
+
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  @import "../../../../styles/global.scss"; //* form-item-wrapper已引入，还需要重复引入吗？ *//
+
+  .full-width-input {
+    width: 100% !important;
+  }
+
+</style>
diff --git a/src/components/form-designer/form-widget/field-widget/rich-editor-widget.vue b/src/components/form-designer/form-widget/field-widget/rich-editor-widget.vue
new file mode 100644
index 0000000..99e85d1
--- /dev/null
+++ b/src/components/form-designer/form-widget/field-widget/rich-editor-widget.vue
@@ -0,0 +1,121 @@
+<template>
+  <form-item-wrapper :designer="designer" :field="field" :rules="rules" :design-state="designState"
+                     :parent-widget="parentWidget" :parent-list="parentList" :index-of-parent-list="indexOfParentList"
+                     :sub-form-row-index="subFormRowIndex" :sub-form-col-index="subFormColIndex" :sub-form-row-id="subFormRowId">
+    <vue-editor ref="fieldEditor" v-model="fieldModel" :editor-toolbar="customToolbar"
+                :disabled="field.options.disabled" :placeholder="field.options.placeholder"
+                @text-change="handleRichEditorChangeEvent"
+                @focus="handleRichEditorFocusEvent" @blur="handleRichEditorBlurEvent">
+    </vue-editor>
+  </form-item-wrapper>
+</template>
+
+<script>
+  import FormItemWrapper from './form-item-wrapper'
+  import emitter from 'element-ui/lib/mixins/emitter'
+  import i18n, {translate} from "@/utils/i18n";
+  import {deepClone} from "@/utils/util";
+  import fieldMixin from "@/components/form-designer/form-widget/field-widget/fieldMixin";
+
+  export default {
+    name: "rich-editor-widget",
+    componentName: 'FieldWidget',  //必须固定为FieldWidget，用于接收父级组件的broadcast事件
+    mixins: [emitter, fieldMixin, i18n],
+    props: {
+      field: Object,
+      parentWidget: Object,
+      parentList: Array,
+      indexOfParentList: Number,
+      designer: Object,
+
+      designState: {
+        type: Boolean,
+        default: false
+      },
+
+      subFormRowIndex: { /* 子表单组件行索引，从0开始计数 */
+        type: Number,
+        default: -1
+      },
+      subFormColIndex: { /* 子表单组件列索引，从0开始计数 */
+        type: Number,
+        default: -1
+      },
+      subFormRowId: { /* 子表单组件行Id，唯一id且不可变 */
+        type: String,
+        default: ''
+      },
+
+    },
+    components: {
+      FormItemWrapper,
+
+      VueEditor: resolve => { //懒加载！！
+        require(['vue2-editor'], ({VueEditor}) => resolve(VueEditor))
+      }
+    },
+    inject: ['refList', 'formConfig', 'globalOptionData', 'globalModel'],
+    data() {
+      return {
+        oldFieldValue: null, //field组件change之前的值
+        fieldModel: null,
+        rules: [],
+
+        customToolbar: [], //富文本编辑器自定义工具栏
+        valueChangedFlag: false, //vue2-editor数据值是否改变标志
+      }
+    },
+    computed: {
+
+    },
+    beforeCreate() {
+      /* 这里不能访问方法和属性！！ */
+    },
+
+    created() {
+      /* 注意：子组件mounted在父组件created之后、父组件mounted之前触发，故子组件mounted需要用到的prop
+         需要在父组件created中初始化！！ */
+      this.initFieldModel()
+      this.registerToRefList()
+      this.initEventHandler()
+      this.buildFieldRules()
+
+      this.handleOnCreated()
+    },
+
+    mounted() {
+      this.handleOnMounted()
+    },
+
+    beforeDestroy() {
+      this.unregisterFromRefList()
+    },
+
+    methods: {
+      handleRichEditorChangeEvent() {
+        this.valueChangedFlag = true
+      },
+
+      handleRichEditorFocusEvent() {
+        this.oldFieldValue = deepClone(this.fieldModel)
+      },
+
+      handleRichEditorBlurEvent() {
+        if (this.valueChangedFlag) {
+          this.emitFieldDataChange(this.fieldModel, this.oldFieldValue)
+          this.valueChangedFlag = false
+        }
+      },
+
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  @import "../../../../styles/global.scss"; //* form-item-wrapper已引入，还需要重复引入吗？ *//
+
+  .full-width-input {
+    width: 100% !important;
+  }
+
+</style>
diff --git a/src/components/form-designer/form-widget/field-widget/select-widget.vue b/src/components/form-designer/form-widget/field-widget/select-widget.vue
new file mode 100644
index 0000000..248ccda
--- /dev/null
+++ b/src/components/form-designer/form-widget/field-widget/select-widget.vue
@@ -0,0 +1,115 @@
+<template>
+  <form-item-wrapper :designer="designer" :field="field" :rules="rules" :design-state="designState"
+                     :parent-widget="parentWidget" :parent-list="parentList" :index-of-parent-list="indexOfParentList"
+                     :sub-form-row-index="subFormRowIndex" :sub-form-col-index="subFormColIndex" :sub-form-row-id="subFormRowId">
+    <el-select ref="fieldEditor" v-model="fieldModel" class="full-width-input"
+               :disabled="field.options.disabled"
+               :size="field.options.size"
+               :clearable="field.options.clearable"
+               :filterable="field.options.filterable"
+               :allow-create="field.options.allowCreate"
+               :default-first-option="allowDefaultFirstOption"
+               :automatic-dropdown="field.options.automaticDropdown"
+               :multiple="field.options.multiple" :multiple-limit="field.options.multipleLimit"
+               :placeholder="field.options.placeholder || i18nt('render.hint.selectPlaceholder')"
+               :remote="this.field.options.remote" :remote-method="remoteQuery"
+               @focus="handleFocusCustomEvent" @blur="handleBlurCustomEvent"
+               @change="handleChangeEvent">
+      <el-option v-for="item in field.options.optionItems" :key="item.value" :label="item.label"
+                 :value="item.value" :disabled="item.disabled">
+      </el-option>
+    </el-select>
+  </form-item-wrapper>
+</template>
+
+<script>
+  import FormItemWrapper from './form-item-wrapper'
+  import emitter from 'element-ui/lib/mixins/emitter'
+  import i18n, {translate} from "@/utils/i18n";
+  import fieldMixin from "@/components/form-designer/form-widget/field-widget/fieldMixin";
+
+  export default {
+    name: "select-widget",
+    componentName: 'FieldWidget',  //必须固定为FieldWidget，用于接收父级组件的broadcast事件
+    mixins: [emitter, fieldMixin, i18n],
+    props: {
+      field: Object,
+      parentWidget: Object,
+      parentList: Array,
+      indexOfParentList: Number,
+      designer: Object,
+
+      designState: {
+        type: Boolean,
+        default: false
+      },
+
+      subFormRowIndex: { /* 子表单组件行索引，从0开始计数 */
+        type: Number,
+        default: -1
+      },
+      subFormColIndex: { /* 子表单组件列索引，从0开始计数 */
+        type: Number,
+        default: -1
+      },
+      subFormRowId: { /* 子表单组件行Id，唯一id且不可变 */
+        type: String,
+        default: ''
+      },
+
+    },
+    components: {
+      FormItemWrapper,
+    },
+    inject: ['refList', 'formConfig', 'globalOptionData', 'globalModel'],
+    data() {
+      return {
+        oldFieldValue: null, //field组件change之前的值
+        fieldModel: null,
+        rules: [],
+      }
+    },
+    computed: {
+      allowDefaultFirstOption() {
+        return (!!this.field.options.filterable && !!this.field.options.allowCreate)
+      },
+
+    },
+    beforeCreate() {
+      /* 这里不能访问方法和属性！！ */
+    },
+
+    created() {
+      /* 注意：子组件mounted在父组件created之后、父组件mounted之前触发，故子组件mounted需要用到的prop
+         需要在父组件created中初始化！！ */
+      this.initOptionItems()
+      this.initFieldModel()
+      this.registerToRefList()
+      this.initEventHandler()
+      this.buildFieldRules()
+
+      this.handleOnCreated()
+    },
+
+    mounted() {
+      this.handleOnMounted()
+    },
+
+    beforeDestroy() {
+      this.unregisterFromRefList()
+    },
+
+    methods: {
+
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  @import "../../../../styles/global.scss"; //* form-item-wrapper已引入，还需要重复引入吗？ *//
+
+  .full-width-input {
+    width: 100% !important;
+  }
+
+</style>
diff --git a/src/components/form-designer/form-widget/field-widget/slider-widget.vue b/src/components/form-designer/form-widget/field-widget/slider-widget.vue
new file mode 100644
index 0000000..769905f
--- /dev/null
+++ b/src/components/form-designer/form-widget/field-widget/slider-widget.vue
@@ -0,0 +1,100 @@
+<template>
+  <form-item-wrapper :designer="designer" :field="field" :rules="rules" :design-state="designState"
+                     :parent-widget="parentWidget" :parent-list="parentList" :index-of-parent-list="indexOfParentList"
+                     :sub-form-row-index="subFormRowIndex" :sub-form-col-index="subFormColIndex" :sub-form-row-id="subFormRowId">
+    <el-slider ref="fieldEditor" v-model="fieldModel"
+               :disabled="field.options.disabled"
+               :min="field.options.min" :max="field.options.max" :step="field.options.step"
+               :range="field.options.range" :vertical="field.options.vertical"
+               @change="handleChangeEvent">
+    </el-slider>
+  </form-item-wrapper>
+</template>
+
+<script>
+  import FormItemWrapper from './form-item-wrapper'
+  import emitter from 'element-ui/lib/mixins/emitter'
+  import i18n, {translate} from "@/utils/i18n";
+  import fieldMixin from "@/components/form-designer/form-widget/field-widget/fieldMixin";
+
+  export default {
+    name: "slider-widget",
+    componentName: 'FieldWidget',  //必须固定为FieldWidget，用于接收父级组件的broadcast事件
+    mixins: [emitter, fieldMixin, i18n],
+    props: {
+      field: Object,
+      parentWidget: Object,
+      parentList: Array,
+      indexOfParentList: Number,
+      designer: Object,
+
+      designState: {
+        type: Boolean,
+        default: false
+      },
+
+      subFormRowIndex: { /* 子表单组件行索引，从0开始计数 */
+        type: Number,
+        default: -1
+      },
+      subFormColIndex: { /* 子表单组件列索引，从0开始计数 */
+        type: Number,
+        default: -1
+      },
+      subFormRowId: { /* 子表单组件行Id，唯一id且不可变 */
+        type: String,
+        default: ''
+      },
+
+    },
+    components: {
+      FormItemWrapper,
+    },
+    inject: ['refList', 'formConfig', 'globalOptionData', 'globalModel'],
+    data() {
+      return {
+        oldFieldValue: null, //field组件change之前的值
+        fieldModel: null,
+        rules: [],
+      }
+    },
+    computed: {
+
+    },
+    beforeCreate() {
+      /* 这里不能访问方法和属性！！ */
+    },
+
+    created() {
+      /* 注意：子组件mounted在父组件created之后、父组件mounted之前触发，故子组件mounted需要用到的prop
+         需要在父组件created中初始化！！ */
+      this.initFieldModel()
+      this.registerToRefList()
+      this.initEventHandler()
+      this.buildFieldRules()
+
+      this.handleOnCreated()
+    },
+
+    mounted() {
+      this.handleOnMounted()
+    },
+
+    beforeDestroy() {
+      this.unregisterFromRefList()
+    },
+
+    methods: {
+
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  @import "../../../../styles/global.scss"; //* form-item-wrapper已引入，还需要重复引入吗？ *//
+
+  .full-width-input {
+    width: 100% !important;
+  }
+
+</style>
diff --git a/src/components/form-designer/form-widget/field-widget/static-content-wrapper.vue b/src/components/form-designer/form-widget/field-widget/static-content-wrapper.vue
new file mode 100644
index 0000000..6000353
--- /dev/null
+++ b/src/components/form-designer/form-widget/field-widget/static-content-wrapper.vue
@@ -0,0 +1,185 @@
+<template>
+  <div class="field-wrapper" :class="{'design-time-bottom-margin': !!this.designer}">
+    <div class="static-content-item" v-show="!field.options.hidden || (designState === true)"
+         :class="{'selected': selected}" @click.stop="selectField(field)">
+      <slot></slot>
+    </div>
+
+    <template v-if="!!this.designer">
+      <div class="field-action" v-if="designer.selectedId === field.id">
+        <i class="el-icon-back" :title="i18nt('designer.hint.selectParentWidget')" @click.stop="selectParentWidget(field)"></i>
+        <i class="el-icon-top" v-if="!!parentList && (parentList.length > 1)" :title="i18nt('designer.hint.moveUpWidget')"
+           @click.stop="moveUpWidget(field)"></i>
+        <i class="el-icon-bottom" v-if="!!parentList && (parentList.length > 1)" :title="i18nt('designer.hint.moveDownWidget')"
+           @click.stop="moveDownWidget(field)"></i>
+        <i class="el-icon-delete" :title="i18nt('designer.hint.remove')" @click.stop="removeFieldWidget"></i>
+      </div>
+
+      <div class="drag-handler background-opacity" v-if="designer.selectedId === field.id">
+        <i class="el-icon-rank" :title="i18nt('designer.hint.dragHandler')"></i>
+        <i>{{i18nt('designer.widgetLabel.' + field.type)}}</i>
+        <i v-if="field.options.hidden === true" class="iconfont icon-hide"></i>
+      </div>
+    </template>
+  </div>
+</template>
+
+<script>
+  import i18n from "@/utils/i18n";
+
+  export default {
+    name: "static-content-wrapper",
+    mixins: [i18n],
+    props: {
+      field: Object,
+      designer: Object,
+      parentWidget: Object,
+      parentList: Array,
+      indexOfParentList: Number,
+
+      designState: {
+        type: Boolean,
+        default: false
+      },
+
+      subFormRowIndex: { /* 子表单组件行索引，从0开始计数 */
+        type: Number,
+        default: -1
+      },
+      subFormColIndex: { /* 子表单组件列索引，从0开始计数 */
+        type: Number,
+        default: -1
+      },
+      subFormRowId: { /* 子表单组件行Id，唯一id且不可变 */
+        type: String,
+        default: ''
+      },
+    },
+    computed: {
+      selected() {
+        return !!this.designer && this.field.id === this.designer.selectedId
+      },
+
+    },
+    methods: {
+
+      selectField(field) {
+        if (!!this.designer) {
+          this.designer.setSelected(field)
+          this.designer.emitEvent('field-selected', this.parentWidget)  //发送选中组件的父组件对象
+        }
+      },
+
+      selectParentWidget() {
+        if (this.parentWidget) {
+          this.designer.setSelected(this.parentWidget)
+        } else {
+          this.designer.clearSelected()
+        }
+      },
+
+      moveUpWidget() {
+        this.designer.moveUpWidget(this.parentList, this.indexOfParentList)
+        this.designer.emitHistoryChange()
+      },
+
+      moveDownWidget() {
+        this.designer.moveDownWidget(this.parentList, this.indexOfParentList)
+        this.designer.emitHistoryChange()
+      },
+
+      removeFieldWidget() {
+        if (!!this.parentList) {
+          let nextSelected = null
+          if (this.parentList.length === 1) {
+            if (!!this.parentWidget) {
+              nextSelected = this.parentWidget
+            }
+          } else if (this.parentList.length === (1 + this.indexOfParentList)) {
+            nextSelected = this.parentList[this.indexOfParentList - 1]
+          } else {
+            nextSelected = this.parentList[this.indexOfParentList + 1]
+          }
+
+          this.$nextTick(() => {
+            this.parentList.splice(this.indexOfParentList, 1)
+            //if (!!nextSelected) {
+            this.designer.setSelected(nextSelected)
+            //}
+
+            this.designer.emitHistoryChange()
+          })
+        }
+      },
+
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  @import "../../../../styles/global.scss";
+
+  .design-time-bottom-margin {
+    margin-bottom: 5px;
+  }
+
+  .field-wrapper {
+    position: relative;
+
+    .field-action{
+      position: absolute;
+      //bottom: -24px;
+      bottom: 0;
+      right: -2px;
+      height: 22px;
+      line-height: 22px;
+      background: $--color-primary;
+      z-index: 9;
+
+      i {
+        font-size: 14px;
+        color: #fff;
+        margin: 0 5px;
+        cursor: pointer;
+      }
+    }
+
+    .drag-handler {
+      position: absolute;
+      top: 0;
+      //bottom: -22px;  /* 拖拽手柄位于组件下方，有时无法正常拖动，原因未明？？ */
+      left: -1px;
+      height: 20px;
+      line-height: 20px;
+      //background: $--color-primary;
+      z-index: 9;
+
+      i {
+        font-size: 12px;
+        font-style: normal;
+        color: #fff;
+        margin: 4px;
+        cursor: move;
+      }
+
+      &:hover {
+        //opacity: 1;
+        background: $--color-primary;
+      }
+    }
+  }
+
+  .static-content-item {
+    min-height: 20px;
+    display: flex;  /* 垂直居中 */
+    align-items: center;  /* 垂直居中 */
+
+    ::v-deep .el-divider--horizontal {
+      margin: 0;
+    }
+  }
+
+  .el-form-item.selected, .static-content-item.selected {
+    outline: 2px solid $--color-primary;
+  }
+</style>
diff --git a/src/components/form-designer/form-widget/field-widget/static-text-widget.vue b/src/components/form-designer/form-widget/field-widget/static-text-widget.vue
new file mode 100644
index 0000000..ac7f15e
--- /dev/null
+++ b/src/components/form-designer/form-widget/field-widget/static-text-widget.vue
@@ -0,0 +1,82 @@
+<template>
+  <static-content-wrapper :designer="designer" :field="field" :design-state="designState"
+                          :parent-widget="parentWidget" :parent-list="parentList" :index-of-parent-list="indexOfParentList"
+                          :sub-form-row-index="subFormRowIndex" :sub-form-col-index="subFormColIndex" :sub-form-row-id="subFormRowId">
+    <div ref="fieldEditor">{{field.options.textContent}}</div>
+  </static-content-wrapper>
+</template>
+
+<script>
+  import StaticContentWrapper from './static-content-wrapper'
+  import emitter from 'element-ui/lib/mixins/emitter'
+  import i18n, {translate} from "@/utils/i18n";
+  import fieldMixin from "@/components/form-designer/form-widget/field-widget/fieldMixin";
+
+  export default {
+    name: "static-text-widget",
+    componentName: 'FieldWidget',  //必须固定为FieldWidget，用于接收父级组件的broadcast事件
+    mixins: [emitter, fieldMixin, i18n],
+    props: {
+      field: Object,
+      parentWidget: Object,
+      parentList: Array,
+      indexOfParentList: Number,
+      designer: Object,
+
+      designState: {
+        type: Boolean,
+        default: false
+      },
+
+      subFormRowIndex: { /* 子表单组件行索引，从0开始计数 */
+        type: Number,
+        default: -1
+      },
+      subFormColIndex: { /* 子表单组件列索引，从0开始计数 */
+        type: Number,
+        default: -1
+      },
+      subFormRowId: { /* 子表单组件行Id，唯一id且不可变 */
+        type: String,
+        default: ''
+      },
+
+    },
+    components: {
+      StaticContentWrapper,
+    },
+    computed: {
+
+    },
+    beforeCreate() {
+      /* 这里不能访问方法和属性！！ */
+    },
+
+    created() {
+      /* 注意：子组件mounted在父组件created之后、父组件mounted之前触发，故子组件mounted需要用到的prop
+         需要在父组件created中初始化！！ */
+      this.registerToRefList()
+      this.initEventHandler()
+
+      this.handleOnCreated()
+    },
+
+    mounted() {
+      this.handleOnMounted()
+    },
+
+    beforeDestroy() {
+      this.unregisterFromRefList()
+    },
+
+    methods: {
+
+    }
+
+  }
+</script>
+
+<style lang="scss" scoped>
+  @import "../../../../styles/global.scss"; //* static-content-wrapper已引入，还需要重复引入吗？ *//
+
+</style>
diff --git a/src/components/form-designer/form-widget/field-widget/switch-widget.vue b/src/components/form-designer/form-widget/field-widget/switch-widget.vue
new file mode 100644
index 0000000..33c3350
--- /dev/null
+++ b/src/components/form-designer/form-widget/field-widget/switch-widget.vue
@@ -0,0 +1,101 @@
+<template>
+  <form-item-wrapper :designer="designer" :field="field" :rules="rules" :design-state="designState"
+                     :parent-widget="parentWidget" :parent-list="parentList" :index-of-parent-list="indexOfParentList"
+                     :sub-form-row-index="subFormRowIndex" :sub-form-col-index="subFormColIndex" :sub-form-row-id="subFormRowId">
+    <el-switch ref="fieldEditor" v-model="fieldModel"
+               :disabled="field.options.disabled"
+               :active-text="field.options.activeText" :inactive-text="field.options.inactiveText"
+               :active-color="field.options.activeColor" :inactive-color="field.options.inactiveColor"
+               :width="field.options.switchWidth"
+               @change="handleChangeEvent">
+    </el-switch>
+  </form-item-wrapper>
+</template>
+
+<script>
+  import FormItemWrapper from './form-item-wrapper'
+  import emitter from 'element-ui/lib/mixins/emitter'
+  import i18n, {translate} from "@/utils/i18n";
+  import fieldMixin from "@/components/form-designer/form-widget/field-widget/fieldMixin";
+
+  export default {
+    name: "switch-widget",
+    componentName: 'FieldWidget',  //必须固定为FieldWidget，用于接收父级组件的broadcast事件
+    mixins: [emitter, fieldMixin, i18n],
+    props: {
+      field: Object,
+      parentWidget: Object,
+      parentList: Array,
+      indexOfParentList: Number,
+      designer: Object,
+
+      designState: {
+        type: Boolean,
+        default: false
+      },
+
+      subFormRowIndex: { /* 子表单组件行索引，从0开始计数 */
+        type: Number,
+        default: -1
+      },
+      subFormColIndex: { /* 子表单组件列索引，从0开始计数 */
+        type: Number,
+        default: -1
+      },
+      subFormRowId: { /* 子表单组件行Id，唯一id且不可变 */
+        type: String,
+        default: ''
+      },
+
+    },
+    components: {
+      FormItemWrapper,
+    },
+    inject: ['refList', 'formConfig', 'globalOptionData', 'globalModel'],
+    data() {
+      return {
+        oldFieldValue: null, //field组件change之前的值
+        fieldModel: null,
+        rules: [],
+      }
+    },
+    computed: {
+
+    },
+    beforeCreate() {
+      /* 这里不能访问方法和属性！！ */
+    },
+
+    created() {
+      /* 注意：子组件mounted在父组件created之后、父组件mounted之前触发，故子组件mounted需要用到的prop
+         需要在父组件created中初始化！！ */
+      this.initFieldModel()
+      this.registerToRefList()
+      this.initEventHandler()
+      this.buildFieldRules()
+
+      this.handleOnCreated()
+    },
+
+    mounted() {
+      this.handleOnMounted()
+    },
+
+    beforeDestroy() {
+      this.unregisterFromRefList()
+    },
+
+    methods: {
+
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  @import "../../../../styles/global.scss"; //* form-item-wrapper已引入，还需要重复引入吗？ *//
+
+  .full-width-input {
+    width: 100% !important;
+  }
+
+</style>
diff --git a/src/components/form-designer/form-widget/field-widget/textarea-widget.vue b/src/components/form-designer/form-widget/field-widget/textarea-widget.vue
new file mode 100644
index 0000000..618f4a6
--- /dev/null
+++ b/src/components/form-designer/form-widget/field-widget/textarea-widget.vue
@@ -0,0 +1,99 @@
+<template>
+  <form-item-wrapper :designer="designer" :field="field" :rules="rules" :design-state="designState"
+                     :parent-widget="parentWidget" :parent-list="parentList" :index-of-parent-list="indexOfParentList"
+                     :sub-form-row-index="subFormRowIndex" :sub-form-col-index="subFormColIndex" :sub-form-row-id="subFormRowId">
+    <el-input type="textarea" ref="fieldEditor" v-model="fieldModel"
+              :disabled="field.options.disabled" :readonly="field.options.readonly"
+              :size="field.options.size"
+              :placeholder="field.options.placeholder" :rows="field.options.rows"
+              :minlength="field.options.minLength" :maxlength="field.options.maxLength"
+              :show-word-limit="field.options.showWordLimit"
+              @focus="handleFocusCustomEvent" @blur="handleBlurCustomEvent" @input="handleInputCustomEvent"
+              @change="handleChangeEvent">
+    </el-input>
+  </form-item-wrapper>
+</template>
+
+<script>
+  import FormItemWrapper from './form-item-wrapper'
+  import emitter from 'element-ui/lib/mixins/emitter'
+  import i18n, {translate} from "@/utils/i18n";
+  import fieldMixin from "@/components/form-designer/form-widget/field-widget/fieldMixin";
+
+  export default {
+    name: "textarea-widget",
+    componentName: 'FieldWidget',  //必须固定为FieldWidget，用于接收父级组件的broadcast事件
+    mixins: [emitter, fieldMixin, i18n],
+    props: {
+      field: Object,
+      parentWidget: Object,
+      parentList: Array,
+      indexOfParentList: Number,
+      designer: Object,
+
+      designState: {
+        type: Boolean,
+        default: false
+      },
+
+      subFormRowIndex: { /* 子表单组件行索引，从0开始计数 */
+        type: Number,
+        default: -1
+      },
+      subFormColIndex: { /* 子表单组件列索引，从0开始计数 */
+        type: Number,
+        default: -1
+      },
+      subFormRowId: { /* 子表单组件行Id，唯一id且不可变 */
+        type: String,
+        default: ''
+      },
+
+    },
+    components: {
+      FormItemWrapper,
+    },
+    inject: ['refList', 'formConfig', 'globalOptionData', 'globalModel'],
+    data() {
+      return {
+        oldFieldValue: null, //field组件change之前的值
+        fieldModel: null,
+        rules: [],
+      }
+    },
+    computed: {
+
+    },
+    beforeCreate() {
+      /* 这里不能访问方法和属性！！ */
+    },
+
+    created() {
+      /* 注意：子组件mounted在父组件created之后、父组件mounted之前触发，故子组件mounted需要用到的prop
+         需要在父组件created中初始化！！ */
+      this.initFieldModel()
+      this.registerToRefList()
+      this.initEventHandler()
+      this.buildFieldRules()
+
+      this.handleOnCreated()
+    },
+
+    mounted() {
+      this.handleOnMounted()
+    },
+
+    beforeDestroy() {
+      this.unregisterFromRefList()
+    },
+
+    methods: {
+
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  @import "../../../../styles/global.scss"; //* form-item-wrapper已引入，还需要重复引入吗？ *//
+
+</style>
diff --git a/src/components/form-designer/form-widget/field-widget/time-range-widget.vue b/src/components/form-designer/form-widget/field-widget/time-range-widget.vue
new file mode 100644
index 0000000..a9d4d2f
--- /dev/null
+++ b/src/components/form-designer/form-widget/field-widget/time-range-widget.vue
@@ -0,0 +1,104 @@
+<template>
+  <form-item-wrapper :designer="designer" :field="field" :rules="rules" :design-state="designState"
+                     :parent-widget="parentWidget" :parent-list="parentList" :index-of-parent-list="indexOfParentList"
+                     :sub-form-row-index="subFormRowIndex" :sub-form-col-index="subFormColIndex" :sub-form-row-id="subFormRowId">
+    <el-time-picker ref="fieldEditor" is-range v-model="fieldModel" class="full-width-input"
+                    :disabled="field.options.disabled" :readonly="field.options.readonly"
+                    :size="field.options.size"
+                    :clearable="field.options.clearable" :editable="field.options.editable"
+                    :format="field.options.format" value-format="HH:mm:ss"
+                    :start-placeholder="field.options.startPlaceholder || i18nt('render.hint.startTimePlaceholder')"
+                    :end-placeholder="field.options.endPlaceholder || i18nt('render.hint.endTimePlaceholder')"
+                    @focus="handleFocusCustomEvent" @blur="handleBlurCustomEvent"
+                    @change="handleChangeEvent">
+    </el-time-picker>
+  </form-item-wrapper>
+</template>
+
+<script>
+  import FormItemWrapper from './form-item-wrapper'
+  import emitter from 'element-ui/lib/mixins/emitter'
+  import i18n, {translate} from "@/utils/i18n";
+  import fieldMixin from "@/components/form-designer/form-widget/field-widget/fieldMixin";
+
+  export default {
+    name: "time-range-widget",
+    componentName: 'FieldWidget',  //必须固定为FieldWidget，用于接收父级组件的broadcast事件
+    mixins: [emitter, fieldMixin, i18n],
+    props: {
+      field: Object,
+      parentWidget: Object,
+      parentList: Array,
+      indexOfParentList: Number,
+      designer: Object,
+
+      designState: {
+        type: Boolean,
+        default: false
+      },
+
+      subFormRowIndex: { /* 子表单组件行索引，从0开始计数 */
+        type: Number,
+        default: -1
+      },
+      subFormColIndex: { /* 子表单组件列索引，从0开始计数 */
+        type: Number,
+        default: -1
+      },
+      subFormRowId: { /* 子表单组件行Id，唯一id且不可变 */
+        type: String,
+        default: ''
+      },
+
+    },
+    components: {
+      FormItemWrapper,
+    },
+    inject: ['refList', 'formConfig', 'globalOptionData', 'globalModel'],
+    data() {
+      return {
+        oldFieldValue: null, //field组件change之前的值
+        fieldModel: null,
+        rules: [],
+      }
+    },
+    computed: {
+
+    },
+    beforeCreate() {
+      /* 这里不能访问方法和属性！！ */
+    },
+
+    created() {
+      /* 注意：子组件mounted在父组件created之后、父组件mounted之前触发，故子组件mounted需要用到的prop
+         需要在父组件created中初始化！！ */
+      this.initFieldModel()
+      this.registerToRefList()
+      this.initEventHandler()
+      this.buildFieldRules()
+
+      this.handleOnCreated()
+    },
+
+    mounted() {
+      this.handleOnMounted()
+    },
+
+    beforeDestroy() {
+      this.unregisterFromRefList()
+    },
+
+    methods: {
+
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  @import "../../../../styles/global.scss"; //* form-item-wrapper已引入，还需要重复引入吗？ *//
+
+  .full-width-input {
+    width: 100% !important;
+  }
+
+</style>
diff --git a/src/components/form-designer/form-widget/field-widget/time-widget.vue b/src/components/form-designer/form-widget/field-widget/time-widget.vue
new file mode 100644
index 0000000..31f202a
--- /dev/null
+++ b/src/components/form-designer/form-widget/field-widget/time-widget.vue
@@ -0,0 +1,103 @@
+<template>
+  <form-item-wrapper :designer="designer" :field="field" :rules="rules" :design-state="designState"
+                     :parent-widget="parentWidget" :parent-list="parentList" :index-of-parent-list="indexOfParentList"
+                     :sub-form-row-index="subFormRowIndex" :sub-form-col-index="subFormColIndex" :sub-form-row-id="subFormRowId">
+    <el-time-picker ref="fieldEditor" v-model="fieldModel" class="full-width-input"
+                    :disabled="field.options.disabled" :readonly="field.options.readonly"
+                    :size="field.options.size"
+                    :clearable="field.options.clearable" :editable="field.options.editable"
+                    :format="field.options.format" value-format="HH:mm:ss"
+                    :placeholder="field.options.placeholder || i18nt('render.hint.timePlaceholder')"
+                    @focus="handleFocusCustomEvent" @blur="handleBlurCustomEvent"
+                    @change="handleChangeEvent">
+    </el-time-picker>
+  </form-item-wrapper>
+</template>
+
+<script>
+  import FormItemWrapper from './form-item-wrapper'
+  import emitter from 'element-ui/lib/mixins/emitter'
+  import i18n, {translate} from "@/utils/i18n";
+  import fieldMixin from "@/components/form-designer/form-widget/field-widget/fieldMixin";
+
+  export default {
+    name: "time-widget",
+    componentName: 'FieldWidget',  //必须固定为FieldWidget，用于接收父级组件的broadcast事件
+    mixins: [emitter, fieldMixin, i18n],
+    props: {
+      field: Object,
+      parentWidget: Object,
+      parentList: Array,
+      indexOfParentList: Number,
+      designer: Object,
+
+      designState: {
+        type: Boolean,
+        default: false
+      },
+
+      subFormRowIndex: { /* 子表单组件行索引，从0开始计数 */
+        type: Number,
+        default: -1
+      },
+      subFormColIndex: { /* 子表单组件列索引，从0开始计数 */
+        type: Number,
+        default: -1
+      },
+      subFormRowId: { /* 子表单组件行Id，唯一id且不可变 */
+        type: String,
+        default: ''
+      },
+
+    },
+    components: {
+      FormItemWrapper,
+    },
+    inject: ['refList', 'formConfig', 'globalOptionData', 'globalModel'],
+    data() {
+      return {
+        oldFieldValue: null, //field组件change之前的值
+        fieldModel: null,
+        rules: [],
+      }
+    },
+    computed: {
+
+    },
+    beforeCreate() {
+      /* 这里不能访问方法和属性！！ */
+    },
+
+    created() {
+      /* 注意：子组件mounted在父组件created之后、父组件mounted之前触发，故子组件mounted需要用到的prop
+         需要在父组件created中初始化！！ */
+      this.initFieldModel()
+      this.registerToRefList()
+      this.initEventHandler()
+      this.buildFieldRules()
+
+      this.handleOnCreated()
+    },
+
+    mounted() {
+      this.handleOnMounted()
+    },
+
+    beforeDestroy() {
+      this.unregisterFromRefList()
+    },
+
+    methods: {
+
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  @import "../../../../styles/global.scss"; //* form-item-wrapper已引入，还需要重复引入吗？ *//
+
+  .full-width-input {
+    width: 100% !important;
+  }
+
+</style>
diff --git a/src/components/form-designer/form-widget/index.vue b/src/components/form-designer/form-widget/index.vue
index d55ce26..527ea24 100644
--- a/src/components/form-designer/form-widget/index.vue
+++ b/src/components/form-designer/form-widget/index.vue
@@ -11,12 +11,12 @@
         <transition-group name="fade" tag="div" class="form-widget-list">
           <template v-for="(widget, index) in designer.widgetList">
             <template v-if="'container' === widget.category">
-              <container-widget :widget="widget" :designer="designer" :key="widget.id" :parent-list="designer.widgetList"
-                                :index-of-parent-list="index" :parent-widget="null"></container-widget>
+              <component :is="getWidgetName(widget)" :widget="widget" :designer="designer" :key="widget.id" :parent-list="designer.widgetList"
+                                :index-of-parent-list="index" :parent-widget="null"></component>
             </template>
             <template v-else>
-              <field-widget :field="widget" :designer="designer" :key="widget.id" :parent-list="designer.widgetList"
-                            :index-of-parent-list="index" :parent-widget="null" :design-state="true"></field-widget>
+              <component :is="getWidgetName(widget)" :field="widget" :designer="designer" :key="widget.id" :parent-list="designer.widgetList"
+                            :index-of-parent-list="index" :parent-widget="null" :design-state="true"></component>
             </template>
           </template>
         </transition-group>
@@ -29,9 +29,9 @@
 
 <script>
   import Draggable from 'vuedraggable'
-  import ContainerWidget from "@/components/form-designer/form-widget/container-widget";
-  import FieldWidget from "@/components/form-designer/form-widget/field-widget";
-  import i18n from "@/utils/i18n";
+  import ContainerComponents from '@/components/form-designer/form-widget/container-widget/index'
+  import FieldComponents from '@/components/form-designer/form-widget/field-widget/index'
+  import i18n from "@/utils/i18n"
 
   export default {
     name: "VFormWidget",
@@ -39,8 +39,9 @@
     mixins: [i18n],
     components: {
       Draggable,
-      ContainerWidget,
-      FieldWidget,
+
+      ...ContainerComponents,
+      ...FieldComponents,
     },
     props: {
       designer: Object,
@@ -116,6 +117,10 @@
       this.designer.registerFormWidget(this)
     },
     methods: {
+      getWidgetName(widget) {
+        return widget.type + '-widget'
+      },
+
       disableFirefoxDefaultDrop() {
         let isFirefox = (navigator.userAgent.toLowerCase().indexOf("firefox") !== -1)
         if (isFirefox) {
diff --git a/src/components/form-designer/form-widget/tab-pane.vue b/src/components/form-designer/form-widget/tab-pane.vue
deleted file mode 100644
index 80a729d..0000000
--- a/src/components/form-designer/form-widget/tab-pane.vue
+++ /dev/null
@@ -1,90 +0,0 @@
-<template>
-  <el-tab-pane :name="'tab1'" :label="widget.label" @click.native.stop="selectWidget(widget)">
-    <draggable :list="widget.widgetList" v-bind="{group:'dragGroup', ghostClass: 'ghost',animation: 200}"
-               handle=".drag-handler" @end="(evt) => onTabDragEnd(evt, widget.widgetList)"
-               @add="(evt) => onTabDragAdd(evt, widget.widgetList)"
-               @update="onTabDragUpdate" :move="checkContainerMove">
-      <transition-group name="fade" tag="div" class="form-widget-list">
-        <template v-for="(subWidget, swIdx) in widget.widgetList">
-          <template v-if="'container' === subWidget.category">
-            <container-widget :widget="subWidget" :designer="designer" :key="subWidget.id" :parent-list="widget.widgetList"
-                              :index-of-parent-list="swIdx" :parent-widget="widget"></container-widget>
-          </template>
-          <template v-else>
-            <field-widget :field="subWidget" :designer="designer" :key="subWidget.id" :parent-list="widget.widgetList"
-                          :index-of-parent-list="swIdx" :parent-widget="widget" :design-state="true"></field-widget>
-          </template>
-        </template>
-      </transition-group>
-    </draggable>
-  </el-tab-pane>
-</template>
-
-<script>
-  /* 此组件未用上！！ */
-
-  import Draggable from 'vuedraggable'
-  import ContainerWidget from "@/components/form-designer/form-widget/container-widget";
-  import FieldWidget from "@/components/form-designer/form-widget/field-widget";
-  import i18n from "@/utils/i18n";
-
-  export default {
-    name: "VTabPane",
-    mixins: [i18n],
-    components: {
-      Draggable,
-      ContainerWidget,
-      FieldWidget,
-    },
-    props: {
-      widget: Object,
-      parentWidget: Object,
-      parentList: Array,
-      indexOfParentList: Number,
-      designer: Object,
-    },
-    computed: {
-      selected() {
-        return this.widget.id === this.designer.selectedId
-      },
-
-    },
-    methods: {
-      selectWidget(widget) {
-        this.designer.setSelected(widget)
-      },
-
-      onTabDragEnd(obj, subList) {
-        //
-      },
-
-      onTabDragAdd(evt, subList) { //重复代码，可合并
-        const newIndex = evt.newIndex
-        console.log(newIndex)
-        if (!!subList[newIndex]) {
-          this.designer.setSelected( subList[newIndex] )
-        }
-
-        this.designer.emitHistoryChange()
-      },
-
-      onTabDragUpdate() {
-        this.designer.emitHistoryChange()
-      },
-
-      checkContainerMove(evt) {
-        return this.designer.checkWidgetMove(evt)
-      },
-
-    }
-  }
-</script>
-
-<style lang="scss" scoped>
-  .el-tab-pane {
-
-    ::v-deep .form-widget-list {
-      min-height: 28px;
-    }
-  }
-</style>
diff --git a/src/components/form-designer/index.vue b/src/components/form-designer/index.vue
index 7e4dd9e..56bd118 100644
--- a/src/components/form-designer/index.vue
+++ b/src/components/form-designer/index.vue
@@ -2,7 +2,7 @@
 /**
  * author: vformAdmin
  * email: vdpadmin@163.com
- * website: http://www.vform666.com/
+ * website: http://www.vform666.com
  * date: 2021.08.18
  * remark: 如果要分发VForm源码，需在本文件顶部保留此文件头信息！！
  */
@@ -62,7 +62,7 @@
   import VFormWidget from './form-widget/index'
   import {createDesigner} from "@/components/form-designer/designer";
   import {addWindowResizeHandler, getQueryParam} from "@/utils/util";
-  import {VARIANT_FORM_VERSION} from "@/utils/config";
+  import {MOCK_CASE_URL, VARIANT_FORM_VERSION} from "@/utils/config";
   import i18n, { changeLocale } from "@/utils/i18n";
 
   export default {
@@ -81,6 +81,8 @@
         curLangName: '',
 
         vsCodeFlag: false,
+        caseName: '',
+
         docUrl: 'http://www.vform666.com/document.html',
         gitUrl: 'https://github.com/vform666/variant-form',
         chatUrl: 'http://www.vform666.com/chat-group.html',
@@ -98,6 +100,7 @@
     },
     created() {
       this.vsCodeFlag = getQueryParam('vscode') == 1
+      this.caseName = getQueryParam('case')
     },
     mounted() {
       this.initLocale()
@@ -108,6 +111,8 @@
           this.scrollerHeight = window.innerHeight - 56 - 36 + 'px'
         })
       })
+
+      this.loadCase()
     },
     methods: {
       openHome() {
@@ -138,6 +143,24 @@
         }
       },
 
+      loadCase() {
+        if (!this.caseName) {
+          return
+        }
+
+        axios.get(MOCK_CASE_URL + this.caseName).then(res => {
+          if (!!res.data.code) {
+            this.$message.error(this.i18nt('designer.hint.sampleLoadedFail'))
+            return
+          }
+
+          this.setFormJson(res.data)
+          this.$message.success(this.i18nt('designer.hint.sampleLoadedSuccess'))
+        }).catch(error => {
+          this.$message.error(this.i18nt('designer.hint.sampleLoadedFail') + ':' +error)
+        })
+      },
+
       initLocale() {
         let curLocale = localStorage.getItem('v_form_locale')
         if (!!this.vsCodeFlag) {
diff --git a/src/components/form-designer/setting-panel/form-setting.vue b/src/components/form-designer/setting-panel/form-setting.vue
new file mode 100644
index 0000000..b32bf7a
--- /dev/null
+++ b/src/components/form-designer/setting-panel/form-setting.vue
@@ -0,0 +1,300 @@
+<template>
+  <div>
+    <el-form :model="formConfig" size="mini" label-position="left" label-width="120px"
+             class="setting-form" @submit.native.prevent>
+      <el-collapse v-model="formActiveCollapseNames" class="setting-collapse">
+        <el-collapse-item name="1" :title="i18nt('designer.setting.basicSetting')">
+          <el-form-item :label="i18nt('designer.setting.formSize')">
+            <el-select v-model="formConfig.size">
+              <el-option v-for="item in formSizes" :key="item.value" :label="item.label"
+                         :value="item.value">
+              </el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item :label="i18nt('designer.setting.labelPosition')">
+            <el-radio-group v-model="formConfig.labelPosition" class="radio-group-custom">
+              <el-radio-button label="left">{{i18nt('designer.setting.leftPosition')}}</el-radio-button>
+              <el-radio-button label="top">{{i18nt('designer.setting.topPosition')}}</el-radio-button>
+            </el-radio-group>
+          </el-form-item>
+          <el-form-item :label="i18nt('designer.setting.labelAlign')">
+            <el-radio-group v-model="formConfig.labelAlign" class="radio-group-custom">
+              <el-radio-button label="label-left-align">{{i18nt('designer.setting.leftAlign')}}</el-radio-button>
+              <el-radio-button label="label-center-align">{{i18nt('designer.setting.centerAlign')}}</el-radio-button>
+              <el-radio-button label="label-right-align">{{i18nt('designer.setting.rightAlign')}}</el-radio-button>
+            </el-radio-group>
+          </el-form-item>
+          <el-form-item :label="i18nt('designer.setting.labelWidth')">
+            <el-input-number v-model="formConfig.labelWidth" :min="0" style="width: 100%"></el-input-number>
+          </el-form-item>
+          <el-form-item :label="i18nt('designer.setting.formCss')">
+            <el-button type="info" icon="el-icon-edit" plain round @click="editFormCss">{{i18nt('designer.setting.addCss')}}</el-button>
+          </el-form-item>
+          <!-- -->
+          <el-form-item :label="i18nt('designer.setting.customClass')">
+            <el-select v-model="formConfig.customClass" multiple filterable allow-create
+                       default-first-option>
+              <el-option v-for="(item, idx) in cssClassList" :key="idx" :label="item" :value="item"></el-option>
+            </el-select>
+          </el-form-item>
+          <!-- -->
+          <el-form-item :label="i18nt('designer.setting.globalFunctions')">
+            <el-button type="info" icon="el-icon-edit" plain round @click="editGlobalFunctions">{{i18nt('designer.setting.addEventHandler')}}</el-button>
+          </el-form-item>
+          <el-form-item label-width="0">
+            <el-divider class="custom-divider">{{i18nt('designer.setting.formSFCSetting')}}</el-divider>
+          </el-form-item>
+          <el-form-item :label="i18nt('designer.setting.formModelName')">
+            <el-input type="text" v-model="formConfig.modelName"></el-input>
+          </el-form-item>
+          <el-form-item :label="i18nt('designer.setting.formRefName')">
+            <el-input type="text" v-model="formConfig.refName"></el-input>
+          </el-form-item>
+          <el-form-item :label="i18nt('designer.setting.formRulesName')">
+            <el-input type="text" v-model="formConfig.rulesName"></el-input>
+          </el-form-item>
+        </el-collapse-item>
+
+        <el-collapse-item name="2" :title="i18nt('designer.setting.eventSetting')">
+          <el-form-item label="onFormCreated" label-width="150px">
+            <el-button type="info" icon="el-icon-edit" plain round @click="editFormEventHandler('onFormCreated')">
+              {{i18nt('designer.setting.addEventHandler')}}</el-button>
+          </el-form-item>
+          <el-form-item label="onFormMounted" label-width="150px">
+            <el-button type="info" icon="el-icon-edit" plain round @click="editFormEventHandler('onFormMounted')">
+              {{i18nt('designer.setting.addEventHandler')}}</el-button>
+          </el-form-item>
+          <!-- -->
+          <el-form-item label="onFormDataChange" label-width="150px">
+            <el-button type="info" icon="el-icon-edit" plain round @click="editFormEventHandler('onFormDataChange')">
+              {{i18nt('designer.setting.addEventHandler')}}</el-button>
+          </el-form-item>
+          <!-- -->
+          <!--
+          <el-form-item label="onFormValidate">
+            <el-button type="info" icon="el-icon-edit" plain round @click="editFormEventHandler('onFormValidate')">
+              {{i18nt('designer.setting.addEventHandler')}}</el-button>
+          </el-form-item>
+          -->
+        </el-collapse-item>
+      </el-collapse>
+    </el-form>
+
+    <el-dialog :title="i18nt('designer.setting.editFormEventHandler')" :visible.sync="showFormEventDialogFlag"
+               v-if="showFormEventDialogFlag" :show-close="true" class="small-padding-dialog" v-dialog-drag
+               :close-on-click-modal="false" :close-on-press-escape="false" :destroy-on-close="true">
+      <el-alert type="info" :closable="false" :title="'form.' + eventParamsMap[curEventName]"></el-alert>
+      <code-editor :mode="'javascript'" :readonly="false" v-model="formEventHandlerCode"></code-editor>
+      <el-alert type="info" :closable="false" title="}"></el-alert>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="showFormEventDialogFlag = false">
+          {{i18nt('designer.hint.cancel')}}</el-button>
+        <el-button type="primary" @click="saveFormEventHandler">
+          {{i18nt('designer.hint.confirm')}}</el-button>
+      </div>
+    </el-dialog>
+
+    <el-dialog :title="i18nt('designer.setting.formCss')" :visible.sync="showEditFormCssDialogFlag"
+               v-if="showEditFormCssDialogFlag" :show-close="true" class="small-padding-dialog" v-dialog-drag
+               :close-on-click-modal="false" :close-on-press-escape="false" :destroy-on-close="true">
+      <code-editor :mode="'css'" :readonly="false" v-model="formCssCode"></code-editor>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="showEditFormCssDialogFlag = false">
+          {{i18nt('designer.hint.cancel')}}</el-button>
+        <el-button type="primary" @click="saveFormCss">
+          {{i18nt('designer.hint.confirm')}}</el-button>
+      </div>
+    </el-dialog>
+
+    <el-dialog :title="i18nt('designer.setting.globalFunctions')" :visible.sync="showEditFunctionsDialogFlag"
+               v-if="showEditFunctionsDialogFlag" :show-close="true" class="small-padding-dialog" v-dialog-drag
+               :close-on-click-modal="false" :close-on-press-escape="false" :destroy-on-close="true">
+      <code-editor :mode="'javascript'" :readonly="false" v-model="functionsCode"></code-editor>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="showEditFunctionsDialogFlag = false">
+          {{i18nt('designer.hint.cancel')}}</el-button>
+        <el-button type="primary" @click="saveGlobalFunctions">
+          {{i18nt('designer.hint.confirm')}}</el-button>
+      </div>
+    </el-dialog>
+
+  </div>
+</template>
+
+<script>
+  import i18n from "@/utils/i18n"
+  import CodeEditor from '@/components/code-editor/index'
+  import {deepClone, insertCustomCssToHead, insertGlobalFunctionsToHtml} from "@/utils/util"
+
+  export default {
+    name: "form-setting",
+    mixins: [i18n],
+    components: {
+      CodeEditor,
+    },
+    props: {
+      designer: Object,
+      formConfig: Object,
+    },
+    data() {
+      return {
+        formActiveCollapseNames: ['1', '2'],
+
+        formSizes: [
+          {label: 'default', value: ''},
+          {label: 'large', value: 'large'},
+          {label: 'medium', value: 'medium'},
+          {label: 'small', value: 'small'},
+          {label: 'mini', value: 'mini'},
+        ],
+
+        showEditFormCssDialogFlag: false,
+        formCssCode: '',
+        cssClassList: [],
+
+        showEditFunctionsDialogFlag: false,
+        functionsCode: '',
+
+        showFormEventDialogFlag: false,
+        formEventHandlerCode: '',
+        curEventName: '',
+
+        eventParamsMap: {
+          'onFormCreated':      'onFormCreated() {',
+          'onFormMounted':      'onFormMounted() {',
+          'onFormDataChange':   'onFormDataChange(fieldName, newValue, oldValue, formModel, subFormName, subFormRowIndex) {',
+          //'onFormValidate':     'onFormValidate() {',
+        },
+
+      }
+    },
+    mounted() {
+      /* SettingPanel和FormWidget为兄弟组件, 在FormWidget加载formConfig时，
+         此处SettingPanel可能无法获取到formConfig.cssCode, 故加个延时函数！ */
+      setTimeout(() => {
+        this.formCssCode = this.formConfig.cssCode
+        insertCustomCssToHead(this.formCssCode)
+        this.extractCssClass()
+        this.designer.emitEvent('form-css-updated', deepClone(this.cssClassList))
+      }, 1200)
+    },
+    methods: {
+      editFormCss() {
+        this.formCssCode = this.designer.formConfig.cssCode
+        this.showEditFormCssDialogFlag = true
+      },
+
+      extractCssClass() {
+        let regExp = /\..*{/g
+        let result = this.formCssCode.match(regExp)
+        //this.cssClassList.length = 0
+        this.cssClassList.splice(0, this.cssClassList.length)  //清除数组必须用splice，length=0不会响应式更新！！
+        if (!!result && result.length > 0) {
+          result.forEach((rItem) => {
+            let classArray = rItem.split(',')  //切分逗号分割的多个class
+            if (classArray.length > 0) {
+              classArray.forEach((cItem) => {
+                let caItem = cItem.trim()
+                if (caItem.indexOf('.', 1) !== -1) {  //查找第二个.位置
+                  let newClass = caItem.substring(caItem.indexOf('.') + 1, caItem.indexOf('.', 1))  //仅截取第一、二个.号之间的class
+                  if (!!newClass) {
+                    this.cssClassList.push(newClass.trim())
+                  }
+                } else if (caItem.indexOf(' ') !== -1) {  //查找第一个空格位置
+                  let newClass = caItem.substring(caItem.indexOf('.') + 1, caItem.indexOf(' '))  //仅截取第一、二个.号之间的class
+                  if (!!newClass) {
+                    this.cssClassList.push(newClass.trim())
+                  }
+                } else {
+                  if (caItem.indexOf('{') !== -1) {  //查找第一个{位置
+                    let newClass = caItem.substring(caItem.indexOf('.') + 1, caItem.indexOf('{'))
+                    this.cssClassList.push( newClass.trim() )
+                  } else {
+                    let newClass = caItem.substring(caItem.indexOf('.') + 1)
+                    this.cssClassList.push( newClass.trim() )
+                  }
+                }
+              })
+            }
+          })
+        }
+      },
+
+      saveFormCss() {
+        this.extractCssClass()
+        this.designer.formConfig.cssCode = this.formCssCode
+        insertCustomCssToHead(this.formCssCode)
+        this.showEditFormCssDialogFlag = false
+
+        this.designer.emitEvent('form-css-updated', deepClone(this.cssClassList))
+      },
+
+      editGlobalFunctions() {
+        this.functionsCode = this.designer.formConfig.functions
+        this.showEditFunctionsDialogFlag = true
+      },
+
+      saveGlobalFunctions() {
+        this.designer.formConfig.functions = this.functionsCode
+        insertGlobalFunctionsToHtml(this.functionsCode)
+        this.showEditFunctionsDialogFlag = false
+      },
+
+      editFormEventHandler(eventName) {
+        this.curEventName = eventName
+        this.formEventHandlerCode = this.formConfig[eventName]
+        this.showFormEventDialogFlag = true
+      },
+
+      saveFormEventHandler() {
+        this.formConfig[this.curEventName] = this.formEventHandlerCode
+        this.showFormEventDialogFlag = false
+      },
+
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  .setting-form {
+    ::v-deep .el-form-item__label {
+      font-size: 13px;
+      //text-overflow: ellipsis;
+      overflow: hidden;
+      white-space: nowrap;
+    }
+
+    ::v-deep .el-form-item--mini.el-form-item {
+      margin-bottom: 6px;
+    }
+
+    .radio-group-custom {
+      ::v-deep .el-radio-button__inner {
+        padding-left: 12px;
+        padding-right: 12px;
+      }
+    }
+
+    .custom-divider.el-divider--horizontal {
+      margin: 10px 0;
+    }
+  }
+
+  .setting-collapse {
+    ::v-deep .el-collapse-item__content {
+      padding-bottom: 6px;
+    }
+
+    ::v-deep .el-collapse-item__header {
+      font-style: italic;
+      font-weight: bold;
+    }
+  }
+
+  .small-padding-dialog {
+    ::v-deep .el-dialog__body {
+      padding: 6px 15px 12px 15px;
+    }
+  }
+
+</style>
diff --git a/src/components/form-designer/setting-panel/index.vue b/src/components/form-designer/setting-panel/index.vue
index 4085c14..e0a305d 100644
--- a/src/components/form-designer/setting-panel/index.vue
+++ b/src/components/form-designer/setting-panel/index.vue
@@ -3,668 +3,70 @@
     <el-tabs :active-name="activeTab" style="height: 100%; overflow: hidden">
       <el-tab-pane :label="i18nt('designer.hint.widgetSetting')" name="1">
         <el-scrollbar class="setting-scrollbar" :style="{height: scrollerHeight}">
-        <template v-if="!!designer.selectedWidget && !designer.selectedWidget.category">
-          <el-form :model="optionModel" size="mini" label-position="left" label-width="120px" class="setting-form" @submit.native.prevent>
-            <el-collapse v-model="widgetActiveCollapseNames" class="setting-collapse">
-              <el-collapse-item name="1" :title="i18nt('designer.setting.commonSetting')">
-                <el-form-item :label="i18nt('designer.setting.fieldName')" v-if="hasConfig('name')"
-                              :rules="nameRequiredRule">
-                  <el-input type="text" v-model="optionModel.name" @change="updateWidgetNameAndRef"></el-input>
-                </el-form-item>
-                <el-form-item :label="i18nt('designer.setting.label')" v-if="hasConfig('label') && !noLabelSetting">
-                  <el-input type="text" v-model="optionModel.label"></el-input>
-                </el-form-item>
-                <el-form-item :label="i18nt('designer.setting.labelAlign')" v-if="hasConfig('label') && !noLabelSetting && (selectedWidget.type !== 'button')">
-                  <el-radio-group v-model="optionModel.labelAlign" class="radio-group-custom">
-                    <el-radio-button label="label-left-align">
-                      {{i18nt('designer.setting.leftAlign')}}</el-radio-button>
-                    <el-radio-button label="label-center-align">
-                      {{i18nt('designer.setting.centerAlign')}}</el-radio-button>
-                    <el-radio-button label="label-right-align">
-                      {{i18nt('designer.setting.rightAlign')}}</el-radio-button>
-                  </el-radio-group>
-                </el-form-item>
-                <el-form-item :label="i18nt('designer.setting.displayType')" v-if="hasConfig('type')">
-                  <el-select v-if="(selectedWidget.type === 'input')"
-                             v-model="optionModel.type">
-                    <el-option label="text" value="text"></el-option>
-                    <!-- 当input的type设置为number时，如果输入非数字字符，则v-model拿到的值为空字符串，无法实现输入校验！故屏蔽之！！ -->
-                    <el-option label="number" value="number"></el-option>
-                    <el-option label="password" value="password"></el-option>
-                  </el-select>
-                  <el-select v-if="(selectedWidget.type === 'date')"
-                             v-model="optionModel.type">
-                    <el-option label="datetime" value="datetime"></el-option>
-                    <el-option label="date" value="date"></el-option>
-                    <el-option label="dates" value="dates"></el-option>
-                    <el-option label="year" value="year"></el-option>
-                    <el-option label="month" value="month"></el-option>
-                    <el-option label="week" value="week"></el-option>
-                  </el-select>
-                  <el-select v-else-if="(selectedWidget.type === 'date-range')"
-                             v-model="optionModel.type">
-                    <el-option label="daterange" value="daterange"></el-option>
-                    <el-option label="datetimerange" value="datetimerange"></el-option>
-                    <el-option label="monthrange" value="monthrange"></el-option>
-                  </el-select>
-                <el-select v-else-if="(selectedWidget.type === 'button')"
-                           v-model="optionModel.type">
-                  <el-option label="default" value=""></el-option>
-                  <el-option label="primary" value="primary"></el-option>
-                  <el-option label="success" value="success"></el-option>
-                  <el-option label="warning" value="warning"></el-option>
-                  <el-option label="danger" value="danger"></el-option>
-                  <el-option label="info" value="info"></el-option>
-                  <el-option label="text" value="text"></el-option>
-                </el-select>
-                </el-form-item>
-                <el-form-item :label="i18nt('designer.setting.defaultValue')"
-                              v-if="hasConfig('defaultValue') && !hasConfig('optionItems')">
-                  <el-time-picker v-if="(selectedWidget.type === 'time')"
-                                  v-model="optionModel.defaultValue" @change="emitDefaultValueChange"
-                                  :format="optionModel.format" value-format="HH:mm:ss" style="width: 100%">
-                  </el-time-picker>
-                  <el-time-picker v-else-if="(selectedWidget.type === 'time-range')"
-                                  v-model="optionModel.defaultValue" is-range @change="emitDefaultValueChange"
-                                  :format="optionModel.format" value-format="HH:mm:ss" style="width: 100%">
-                  </el-time-picker>
-                  <el-date-picker v-else-if="(selectedWidget.type === 'date') || (selectedWidget.type === 'date-range')"
-                                  :type="optionModel.type" v-model="optionModel.defaultValue" @change="emitDefaultValueChange"
-                                  :format="optionModel.format" :value-format="optionModel.valueFormat" style="width: 100%">
-                  </el-date-picker>
-                  <el-switch v-else-if="(selectedWidget.type === 'switch')"
-                             v-model="optionModel.defaultValue" @change="emitDefaultValueChange"
-                             active-text="true" inactive-text="false"></el-switch>
-                  <el-input-number v-else-if="(selectedWidget.type === 'rate')" v-model="optionModel.defaultValue"
-                                   :min="0" :max="optionModel.max" style="width: 100%"
-                                   @change="emitDefaultValueChange">
-                  </el-input-number>
-                  <el-color-picker v-else-if="(selectedWidget.type === 'color')" v-model="optionModel.defaultValue"
-                                   @change="emitDefaultValueChange">
-                  </el-color-picker>
-                  <el-input v-else type="text"
-                            v-model="optionModel.defaultValue" @change="emitDefaultValueChange"></el-input>
-                </el-form-item>
-                <el-form-item :label="i18nt('designer.setting.placeholder')" v-if="hasConfig('placeholder')">
-                  <el-input type="text" v-model="optionModel.placeholder"></el-input>
-                </el-form-item>
-                <el-form-item :label="i18nt('designer.setting.startPlaceholder')" v-if="hasConfig('startPlaceholder')">
-                  <el-input type="text" v-model="optionModel.startPlaceholder"></el-input>
-                </el-form-item>
-                <el-form-item :label="i18nt('designer.setting.endPlaceholder')" v-if="hasConfig('endPlaceholder')">
-                  <el-input type="text" v-model="optionModel.endPlaceholder"></el-input>
-                </el-form-item>
-                <el-form-item :label="i18nt('designer.setting.widgetColumnWidth')" v-if="hasConfig('columnWidth') && !!subFormChildWidgetFlag">
-                  <el-input type="text" v-model="optionModel.columnWidth"></el-input>
-                </el-form-item>
-                <el-form-item :label="i18nt('designer.setting.widgetSize')" v-if="hasConfig('size')">
-                  <el-select v-model="optionModel.size">
-                    <el-option v-for="item in widgetSizes" :key="item.value" :label="item.label"
-                               :value="item.value">
-                    </el-option>
-                  </el-select>
-                </el-form-item>
-                <el-form-item :label="i18nt('designer.setting.displayStyle')" v-if="hasConfig('displayStyle')">
-                  <el-radio-group v-model="optionModel.displayStyle">
-                    <el-radio label="inline">{{i18nt('designer.setting.inlineLayout')}}</el-radio>
-                    <el-radio label="block">{{i18nt('designer.setting.blockLayout')}}</el-radio>
-                  </el-radio-group>
-                </el-form-item>
-                <el-form-item :label="i18nt('designer.setting.buttonStyle')" v-if="hasConfig('buttonStyle')">
-                  <el-checkbox v-model="optionModel.buttonStyle"></el-checkbox>
-                </el-form-item>
-                <el-form-item :label="i18nt('designer.setting.border')" v-if="hasConfig('border')">
-                  <el-checkbox v-model="optionModel.border"></el-checkbox>
-                </el-form-item>
-                <el-form-item :label="i18nt('designer.setting.labelWidth')" v-if="hasConfig('labelWidth')">
-                  <el-input type="number" v-model="optionModel.labelWidth" @input.native="inputNumberHandler"
-                            min="0" class="hide-spin-button"></el-input>
-                </el-form-item>
-                <el-form-item :label="i18nt('designer.setting.rows')" v-if="hasConfig('rows')">
-                  <el-input-number v-model="optionModel.rows" style="width: 100%"></el-input-number>
-                </el-form-item>
-                <el-form-item :label="i18nt('designer.setting.labelHidden')" v-if="hasConfig('labelHidden')">
-                  <el-checkbox v-model="optionModel.labelHidden"></el-checkbox>
-                </el-form-item>
-                <el-form-item :label="i18nt('designer.setting.required')" v-if="hasConfig('required')">
-                  <el-checkbox v-model="optionModel.required"></el-checkbox>
-                </el-form-item>
-                <el-form-item v-if="hasConfig('validation')">
-                  <span slot="label">{{i18nt('designer.setting.validation')}}
-                    <el-tooltip effect="light" :content="i18nt('designer.setting.validationHelp')">
-                      <i class="el-icon-info"></i></el-tooltip>
-                  </span>
-                  <el-select v-model="optionModel.validation" filterable allow-create default-first-option>
-                    <el-option v-for="(fv, fvIdx) in fieldValidators"
-                               :key="fvIdx"
-                               :label="fv.label"
-                               :value="fv.value">
-                    </el-option>
-                  </el-select>
-                </el-form-item>
-                <el-form-item :label="i18nt('designer.setting.validationHint')" v-if="hasConfig('validationHint')">
-                  <el-input type="text" v-model="optionModel.validationHint"></el-input>
-                </el-form-item>
-                <el-form-item :label="i18nt('designer.setting.readonly')" v-if="hasConfig('readonly')">
-                  <el-checkbox v-model="optionModel.readonly"></el-checkbox>
-                </el-form-item>
-                <el-form-item :label="i18nt('designer.setting.disabled')" v-if="hasConfig('disabled')">
-                  <el-checkbox v-model="optionModel.disabled"></el-checkbox>
-                </el-form-item>
-                <el-form-item :label="i18nt('designer.setting.hidden')" v-if="hasConfig('hidden')">
-                  <el-checkbox v-model="optionModel.hidden"></el-checkbox>
-                </el-form-item>
-                <el-form-item :label="i18nt('designer.setting.textContent')" v-if="hasConfig('textContent')">
-                  <el-input v-model="optionModel.textContent"></el-input>
-                </el-form-item>
-                <el-form-item :label="i18nt('designer.setting.htmlContent')" v-if="hasConfig('htmlContent')">
-                  <el-input v-model="optionModel.htmlContent"></el-input>
-                </el-form-item>
-                <el-form-item :label="i18nt('designer.setting.clearable')" v-if="hasConfig('clearable')">
-                  <el-checkbox v-model="optionModel.clearable"></el-checkbox>
-                </el-form-item>
-                <el-form-item :label="i18nt('designer.setting.editable')" v-if="hasConfig('editable')">
-                  <el-checkbox v-model="optionModel.editable"></el-checkbox>
-                </el-form-item>
-                <el-form-item :label="i18nt('designer.setting.format')" v-if="hasConfig('format')">
-                  <el-select v-if="(selectedWidget.type === 'time') || (selectedWidget.type === 'time-range')"
-                             v-model="optionModel.format" filterable allow-create>
-                    <el-option label="HH:mm:ss" value="HH:mm:ss"></el-option>
-                    <el-option label="HH时mm分ss秒" value="HH时mm分ss秒"></el-option>
-                    <el-option label="hh:mm:ss" value="hh:mm:ss"></el-option>
-                  </el-select>
-                  <el-select v-if="(selectedWidget.type === 'date') || (selectedWidget.type === 'date-range')"
-                             v-model="optionModel.format" filterable allow-create>
-                    <el-option label="yyyy-MM-dd" value="yyyy-MM-dd"></el-option>
-                    <el-option label="yyyy/MM/dd" value="yyyy/MM/dd"></el-option>
-                    <el-option label="yyyy年MM月dd日" value="yyyy年MM月dd日"></el-option>
-                    <el-option label="yyyy-MM-dd HH:mm:ss" value="yyyy-MM-dd HH:mm:ss"></el-option>
-                    <el-option label="yyyy-MM-dd hh:mm:ss" value="yyyy-MM-dd hh:mm:ss"></el-option>
-                  </el-select>
-                </el-form-item>
-                <el-form-item :label="i18nt('designer.setting.valueFormat')" v-if="hasConfig('valueFormat')">
-                  <el-select v-if="(selectedWidget.type === 'date') || (selectedWidget.type === 'date-range')"
-                             v-model="optionModel.valueFormat" filterable allow-create>
-                    <el-option label="yyyy-MM-dd" value="yyyy-MM-dd"></el-option>
-                    <el-option label="yyyy-MM-dd HH:mm:ss" value="yyyy-MM-dd HH:mm:ss"></el-option>
-                  </el-select>
-                </el-form-item>
-                <el-form-item :label="i18nt('designer.setting.showPassword')"
-                              v-if="hasConfig('showPassword') && (optionModel.type === 'password')">
-                  <el-checkbox v-model="optionModel.showPassword"></el-checkbox>
-                </el-form-item>
-                <el-form-item :label="i18nt('designer.setting.filterable')" v-if="hasConfig('filterable')">
-                  <el-checkbox v-model="optionModel.filterable"></el-checkbox>
-                </el-form-item>
-                <el-form-item :label="i18nt('designer.setting.allowCreate')" v-if="hasConfig('allowCreate')">
-                  <el-checkbox v-model="optionModel.allowCreate"></el-checkbox>
-                </el-form-item>
-                <el-form-item :label="i18nt('designer.setting.remote')" v-if="hasConfig('remote')">
-                  <el-checkbox v-model="optionModel.remote" @change="onRemoteChange"></el-checkbox>
-                </el-form-item>
-                <el-form-item :label="i18nt('designer.setting.automaticDropdown')" v-if="hasConfig('automaticDropdown')">
-                  <el-checkbox v-model="optionModel.automaticDropdown"></el-checkbox>
-                </el-form-item>
-                <el-form-item :label="i18nt('designer.setting.multiple')" v-if="hasConfig('multiple')">
-                  <el-checkbox v-model="optionModel.multiple" @change="onMultipleSelected"></el-checkbox>
-                </el-form-item>
-                <el-form-item :label="i18nt('designer.setting.multipleLimit')" v-if="hasConfig('multipleLimit')">
-                  <el-input-number v-model="optionModel.multipleLimit" :min="0"
-                                   class="hide-spin-button" style="width: 100%"></el-input-number>
-                </el-form-item>
-                <el-form-item :label="i18nt('designer.setting.contentPosition')" v-if="hasConfig('contentPosition')">
-                  <el-select v-model="optionModel.contentPosition">
-                    <el-option label="center" value="center"></el-option>
-                    <el-option label="left" value="left"></el-option>
-                    <el-option label="right" value="right"></el-option>
-                  </el-select>
-                </el-form-item>
-                <!-- -->
-                <el-form-item label-width="0" v-if="hasConfig('optionItems')">
-                  <el-divider class="custom-divider-margin-top">{{i18nt('designer.setting.optionsSetting')}}</el-divider>
-                  <option-items-setting :designer="designer" :selected-widget="designer.selectedWidget"></option-items-setting>
-                </el-form-item>
-                <!-- -->
-                <el-form-item label-width="0" v-if="hasConfig('uploadURL')">
-                  <el-divider class="custom-divider">{{i18nt('designer.setting.uploadSetting')}}</el-divider>
-                </el-form-item>
-                <el-form-item :label="i18nt('designer.setting.uploadURL')" v-if="hasConfig('uploadURL')">
-                  <el-input type="text" v-model="optionModel.uploadURL"></el-input>
-                </el-form-item>
-                <el-form-item :label="i18nt('designer.setting.uploadTip')" v-if="hasConfig('uploadTip')">
-                  <el-input type="text" v-model="optionModel.uploadTip"></el-input>
-                </el-form-item>
-                <el-form-item :label="i18nt('designer.setting.withCredentials')" v-if="hasConfig('withCredentials')">
-                  <el-checkbox v-model="optionModel.withCredentials"></el-checkbox>
-                </el-form-item>
-                <el-form-item :label="i18nt('designer.setting.multipleSelect')" v-if="hasConfig('multipleSelect')">
-                  <el-checkbox v-model="optionModel.multipleSelect"></el-checkbox>
-                </el-form-item>
-                <el-form-item :label="i18nt('designer.setting.showFileList')" v-if="hasConfig('showFileList')">
-                  <el-checkbox v-model="optionModel.showFileList"></el-checkbox>
-                </el-form-item>
-                <el-form-item :label="i18nt('designer.setting.limit')" v-if="hasConfig('limit')">
-                  <el-input-number v-model="optionModel.limit" :min="1" class="hide-spin-button" style="width: 100%"></el-input-number>
-                </el-form-item>
-                <el-form-item :label="i18nt('designer.setting.fileMaxSize')" v-if="hasConfig('fileMaxSize')">
-                  <el-input-number v-model="optionModel.fileMaxSize" :min="1" class="hide-spin-button" style="width: 100%"></el-input-number>
-                </el-form-item>
-                <el-form-item v-if="hasConfig('fileTypes') && (selectedWidget.type === 'picture-upload')">
-                  <span slot="label">{{i18nt('designer.setting.fileTypes')}}
-                    <el-tooltip effect="light" :content="i18nt('designer.setting.fileTypesHelp')">
-                      <i class="el-icon-info"></i></el-tooltip>
-                  </span>
-                  <el-select multiple allow-create filterable default-first-option
-                             v-model="optionModel.fileTypes" style="width: 100%">
-                    <el-option v-for="(ft, ftIdx) in uploadPictureTypes"
-                            :key="ftIdx"
-                            :label="ft.label"
-                            :value="ft.value">
-                    </el-option>
-                  </el-select>
-                </el-form-item>
-                <el-form-item v-if="hasConfig('fileTypes') && (selectedWidget.type === 'file-upload')">
-                  <span slot="label">{{i18nt('designer.setting.fileTypes')}}
-                    <el-tooltip effect="light" :content="i18nt('designer.setting.fileTypesHelp')">
-                      <i class="el-icon-info"></i></el-tooltip>
-                  </span>
-                  <el-select multiple allow-create filterable default-first-option
-                             v-model="optionModel.fileTypes" style="width: 100%">
-                    <el-option v-for="(ft, ftIdx) in uploadFileTypes"
-                               :key="ftIdx"
-                               :label="ft.label"
-                               :value="ft.value">
-                    </el-option>
-                  </el-select>
-                </el-form-item>
-              </el-collapse-item>
 
-              <el-collapse-item name="2" :title="i18nt('designer.setting.advancedSetting')">
-                <el-form-item :label="i18nt('designer.setting.minValue')" v-if="hasConfig('min')">
-                  <el-input-number v-model="minValue" class="hide-spin-button" style="width: 100%"></el-input-number>
-                </el-form-item>
-                <el-form-item :label="i18nt('designer.setting.maxValue')" v-if="hasConfig('max') && (selectedWidget.type !== 'rate')">
-                  <el-input-number v-model="maxValue" class="hide-spin-button" style="width: 100%"></el-input-number>
-                </el-form-item>
-                <el-form-item :label="i18nt('designer.setting.precision')" v-if="hasConfig('precision')">
-                  <el-input-number v-model="optionModel.precision" :min="0" class="hide-spin-button" style="width: 100%"></el-input-number>
-                </el-form-item>
-                <el-form-item :label="i18nt('designer.setting.step')" v-if="hasConfig('step')">
-                  <el-input-number v-model="optionModel.step" class="hide-spin-button" style="width: 100%"></el-input-number>
-                </el-form-item>
-                <el-form-item :label="i18nt('designer.setting.controlsPosition')" v-if="hasConfig('controlsPosition')">
-                  <el-select v-model="optionModel.controlsPosition">
-                    <el-option label="default" value=""></el-option>
-                    <el-option label="right" value="right"></el-option>
-                  </el-select>
-                </el-form-item>
-                <el-form-item :label="i18nt('designer.setting.minLength')" v-if="hasConfig('minLength')">
-                  <el-input type="number" @input.native="inputNumberHandler" class="hide-spin-button"
-                            min="0" v-model="minLength" style="width: 100%"></el-input>
-                </el-form-item>
-                <el-form-item :label="i18nt('designer.setting.maxLength')" v-if="hasConfig('maxLength')">
-                  <el-input type="number" @input.native="inputNumberHandler" class="hide-spin-button"
-                            min="1" v-model="maxLength" style="width: 100%"></el-input>
-                </el-form-item>
-                <el-form-item :label="i18nt('designer.setting.showWordLimit')" v-if="hasConfig('showWordLimit')">
-                  <el-checkbox v-model="optionModel.showWordLimit"></el-checkbox>
-                </el-form-item>
-                <el-form-item :label="i18nt('designer.setting.prefixIcon')" v-if="hasConfig('prefixIcon')">
-                  <el-input type="text" v-model="optionModel.prefixIcon"></el-input>
-                </el-form-item>
-                <el-form-item :label="i18nt('designer.setting.suffixIcon')" v-if="hasConfig('suffixIcon')">
-                  <el-input type="text" v-model="optionModel.suffixIcon"></el-input>
-                </el-form-item>
-                <el-form-item :label="i18nt('designer.setting.switchWidth')" v-if="hasConfig('switchWidth')">
-                  <el-input-number v-model="optionModel.switchWidth" style="width: 100%"></el-input-number>
-                </el-form-item>
-                <el-form-item :label="i18nt('designer.setting.activeText')" v-if="hasConfig('activeText')">
-                  <el-input type="text" v-model="optionModel.activeText"></el-input>
-                </el-form-item>
-                <el-form-item :label="i18nt('designer.setting.inactiveText')" v-if="hasConfig('inactiveText')">
-                  <el-input type="text" v-model="optionModel.inactiveText"></el-input>
-                </el-form-item>
-                <el-form-item :label="i18nt('designer.setting.activeColor')" v-if="hasConfig('activeColor')">
-                  <el-color-picker v-model="optionModel.activeColor"></el-color-picker>
-                </el-form-item>
-                <el-form-item :label="i18nt('designer.setting.inactiveColor')" v-if="hasConfig('inactiveColor')">
-                  <el-color-picker v-model="optionModel.inactiveColor"></el-color-picker>
-                </el-form-item>
-                <el-form-item :label="i18nt('designer.setting.maxStars')" v-if="hasConfig('max') && (selectedWidget.type === 'rate')">
-                  <el-input-number v-model="optionModel.max" :min="1" :max="10"
-                                   class="hide-spin-button" style="width: 100%"></el-input-number>
-                </el-form-item>
-                <el-form-item :label="i18nt('designer.setting.lowThreshold')" v-if="hasConfig('lowThreshold')">
-                  <el-input-number v-model="optionModel.lowThreshold" :min="1" :max="optionModel.highThreshold"
-                                   class="hide-spin-button" style="width: 100%"></el-input-number>
-                </el-form-item>
-                <el-form-item :label="i18nt('designer.setting.highThreshold')" v-if="hasConfig('highThreshold')">
-                  <el-input-number v-model="optionModel.highThreshold" :min="optionModel.lowThreshold" :max="optionModel.max"
-                                   class="hide-spin-button" style="width: 100%"></el-input-number>
-                </el-form-item>
-                <el-form-item :label="i18nt('designer.setting.allowHalf')" v-if="hasConfig('allowHalf')">
-                  <el-checkbox v-model="optionModel.allowHalf"></el-checkbox>
-                </el-form-item>
-                <el-form-item :label="i18nt('designer.setting.showText')" v-if="hasConfig('showText')">
-                  <el-checkbox v-model="optionModel.showText"></el-checkbox>
-                </el-form-item>
-                <el-form-item :label="i18nt('designer.setting.showScore')" v-if="hasConfig('showScore')">
-                  <el-checkbox v-model="optionModel.showScore"></el-checkbox>
-                </el-form-item>
-                <el-form-item :label="i18nt('designer.setting.range')" v-if="hasConfig('range')">
-                  <el-checkbox v-model="optionModel.range"></el-checkbox>
-                </el-form-item>
-                <el-form-item :label="i18nt('designer.setting.vertical')" v-if="hasConfig('vertical')">
-                  <el-checkbox v-model="optionModel.vertical"></el-checkbox>
-                </el-form-item>
-                <el-form-item :label="i18nt('designer.setting.plain')" v-if="hasConfig('plain')">
-                  <el-checkbox v-model="optionModel.plain"></el-checkbox>
-                </el-form-item>
-                <el-form-item :label="i18nt('designer.setting.round')" v-if="hasConfig('round')">
-                  <el-checkbox v-model="optionModel.round"></el-checkbox>
-                </el-form-item>
-                <el-form-item :label="i18nt('designer.setting.circle')" v-if="hasConfig('circle')">
-                  <el-checkbox v-model="optionModel.circle"></el-checkbox>
-                </el-form-item>
-                <el-form-item :label="i18nt('designer.setting.buttonIcon')" v-if="hasConfig('icon')">
-                  <el-input type="text" v-model="optionModel.icon"></el-input>
-                </el-form-item>
-                <!-- -->
-                <el-form-item :label="i18nt('designer.setting.customClass')" v-if="!!selectedWidget.options">
-                  <el-select v-model="optionModel.customClass" multiple filterable allow-create
-                             default-first-option>
-                    <el-option v-for="(item, idx) in cssClassList" :key="idx" :label="item" :value="item"></el-option>
-                  </el-select>
-                </el-form-item>
-                <!-- -->
-                <el-form-item label-width="0" v-if="hasConfig('labelIconClass')">
-                  <el-divider class="custom-divider">{{i18nt('designer.setting.customLabelIcon')}}</el-divider>
-                </el-form-item>
-                <el-form-item :label="i18nt('designer.setting.labelIconClass')" v-if="hasConfig('labelIconClass')">
-                  <el-input type="text" v-model="optionModel.labelIconClass"></el-input>
-                </el-form-item>
-                <el-form-item :label="i18nt('designer.setting.labelIconPosition')" v-if="hasConfig('labelIconPosition')">
-                  <el-select v-model="optionModel.labelIconPosition">
-                    <el-option v-for="item in labelIconPosition" :key="item.value" :label="item.label"
-                               :value="item.value">
-                    </el-option>
-                  </el-select>
-                </el-form-item>
-                <el-form-item :label="i18nt('designer.setting.labelTooltip')" v-if="hasConfig('labelTooltip')">
-                  <el-input type="text" v-model="optionModel.labelTooltip"></el-input>
-                </el-form-item>
+          <template v-if="!!designer.selectedWidget && !designer.selectedWidget.category">
+            <el-form :model="optionModel" size="mini" label-position="left" label-width="120px" class="setting-form"
+                     @submit.native.prevent>
+              <el-collapse v-model="widgetActiveCollapseNames" class="setting-collapse">
+                <el-collapse-item name="1" :title="i18nt('designer.setting.commonSetting')">
+                  <template v-for="(editorName, propName) in commonProps">
+                    <component v-if="hasPropEditor(propName, editorName)" :is="getPropEditor(propName, editorName)"
+                               :designer="designer" :selected-widget="selectedWidget" :option-model="optionModel"></component>
+                  </template>
+                </el-collapse-item>
 
-                <el-form-item label-width="0" v-if="hasConfig('appendButton')">
-                  <el-divider class="custom-divider">{{i18nt('designer.setting.inputButton')}}</el-divider>
-                </el-form-item>
-                <el-form-item :label="i18nt('designer.setting.appendButton')" v-if="hasConfig('appendButton')">
-                  <el-checkbox v-model="optionModel.appendButton"></el-checkbox>
-                </el-form-item>
-                <el-form-item :label="i18nt('designer.setting.appendButtonDisabled')" v-if="hasConfig('appendButtonDisabled')">
-                  <el-checkbox v-model="optionModel.appendButtonDisabled"></el-checkbox>
-                </el-form-item>
-                <el-form-item :label="i18nt('designer.setting.buttonIcon')" v-if="hasConfig('buttonIcon')">
-                  <el-input type="text" v-model="optionModel.buttonIcon"></el-input>
-                </el-form-item>
-              </el-collapse-item>
+                <el-collapse-item name="2" :title="i18nt('designer.setting.advancedSetting')">
+                  <template v-for="(editorName, propName) in advProps">
+                    <component v-if="hasPropEditor(propName, editorName)" :is="getPropEditor(propName, editorName)"
+                               :designer="designer" :selected-widget="selectedWidget" :option-model="optionModel"></component>
+                  </template>
+                </el-collapse-item>
 
-              <el-collapse-item name="3" :title="i18nt('designer.setting.eventSetting')">
-                <el-form-item label="onCreated" v-if="hasConfig('onCreated')">
-                  <el-button type="info" icon="el-icon-edit" plain round @click="editEventHandler('onCreated')">
-                    {{i18nt('designer.setting.addEventHandler')}}</el-button>
-                </el-form-item>
-                <el-form-item label="onMounted" v-if="hasConfig('onMounted')">
-                  <el-button type="info" icon="el-icon-edit" plain round @click="editEventHandler('onMounted')">
-                    {{i18nt('designer.setting.addEventHandler')}}</el-button>
-                </el-form-item>
-                <el-form-item label="onClick" v-if="hasConfig('onClick')">
-                  <el-button type="info" icon="el-icon-edit" plain round @click="editEventHandler('onClick')">
-                    {{i18nt('designer.setting.addEventHandler')}}</el-button>
-                </el-form-item>
-                <el-form-item label="onRemoteQuery" v-if="hasConfig('onRemoteQuery')">
-                  <el-button type="info" icon="el-icon-edit" plain round @click="editEventHandler('onRemoteQuery')">
-                    {{i18nt('designer.setting.addEventHandler')}}</el-button>
-                </el-form-item>
-                <el-form-item label="onInput" v-if="hasConfig('onInput')">
-                  <el-button type="info" icon="el-icon-edit" plain round @click="editEventHandler('onInput')">
-                    {{i18nt('designer.setting.addEventHandler')}}</el-button>
-                </el-form-item>
-                <el-form-item label="onChange" v-if="hasConfig('onChange')">
-                  <el-button type="info" icon="el-icon-edit" plain round @click="editEventHandler('onChange')">
-                    {{i18nt('designer.setting.addEventHandler')}}</el-button>
-                </el-form-item>
-                <el-form-item label="onFocus" v-if="hasConfig('onFocus')">
-                  <el-button type="info" icon="el-icon-edit" plain round @click="editEventHandler('onFocus')">
-                    {{i18nt('designer.setting.addEventHandler')}}</el-button>
-                </el-form-item>
-                <el-form-item label="onBlur" v-if="hasConfig('onBlur')">
-                  <el-button type="info" icon="el-icon-edit" plain round @click="editEventHandler('onBlur')">
-                    {{i18nt('designer.setting.addEventHandler')}}</el-button>
-                </el-form-item>
-                <el-form-item label="onBeforeUpload" v-if="hasConfig('onBeforeUpload')">
-                  <el-button type="info" icon="el-icon-edit" plain round @click="editEventHandler('onBeforeUpload')">
-                    {{i18nt('designer.setting.addEventHandler')}}</el-button>
-                </el-form-item>
-                <el-form-item label="onUploadSuccess" v-if="hasConfig('onUploadSuccess')">
-                  <el-button type="info" icon="el-icon-edit" plain round @click="editEventHandler('onUploadSuccess')">
-                    {{i18nt('designer.setting.addEventHandler')}}</el-button>
-                </el-form-item>
-                <el-form-item label="onUploadError" v-if="hasConfig('onUploadError')">
-                  <el-button type="info" icon="el-icon-edit" plain round @click="editEventHandler('onUploadError')">
-                    {{i18nt('designer.setting.addEventHandler')}}</el-button>
-                </el-form-item>
-                <el-form-item label="onValidate" v-if="hasConfig('onValidate')">
-                  <el-button type="info" icon="el-icon-edit" plain round @click="editEventHandler('onValidate')">
-                    {{i18nt('designer.setting.addEventHandler')}}</el-button>
-                </el-form-item>
-              </el-collapse-item>
-            </el-collapse>
+                <el-collapse-item name="3" :title="i18nt('designer.setting.eventSetting')">
+                  <template v-for="(editorName, propName) in eventProps">
+                    <component v-if="hasPropEditor(propName, editorName)" :is="getPropEditor(propName, editorName)"
+                               :designer="designer" :selected-widget="selectedWidget" :option-model="optionModel"></component>
+                  </template>
+                </el-collapse-item>
+              </el-collapse>
 
-          </el-form>
-        </template>
+            </el-form>
+          </template>
 
-        <template v-if="(!!designer.selectedWidget && !!designer.selectedWidget.category)">
+          <template v-if="(!!designer.selectedWidget && !!designer.selectedWidget.category)">
+            <el-form :model="optionModel" size="mini" label-position="left" label-width="120px" class="setting-form"
+                     @submit.native.prevent>
+              <el-collapse v-model="widgetActiveCollapseNames" class="setting-collapse">
+                <el-collapse-item name="1" :title="i18nt('designer.setting.commonSetting')">
+                  <template v-for="(editorName, propName) in commonProps">
+                    <component v-if="hasPropEditor(propName, editorName)" :is="getPropEditor(propName, editorName)"
+                               :designer="designer" :selected-widget="selectedWidget" :option-model="optionModel"></component>
+                  </template>
+                </el-collapse-item>
 
-          <el-collapse v-model="widgetActiveCollapseNames" class="setting-collapse">
-            <el-collapse-item name="1" :title="i18nt('designer.setting.commonSetting')">
-              <el-form :model="optionModel" size="mini" label-position="left" label-width="120px" class="setting-form" @submit.native.prevent>
-                <el-form-item :label="i18nt('designer.setting.widgetName')" v-if="hasConfig('name')">
-                  <el-input type="text" v-model="optionModel.name"></el-input>
-                </el-form-item>
-                <el-form-item :label="i18nt('designer.setting.labelAlign')" v-if="hasConfig('labelAlign')">
-                  <el-radio-group v-model="optionModel.labelAlign" class="radio-group-custom">
-                    <el-radio-button label="label-left-align">
-                      {{i18nt('designer.setting.leftAlign')}}</el-radio-button>
-                    <el-radio-button label="label-center-align">
-                      {{i18nt('designer.setting.centerAlign')}}</el-radio-button>
-                    <el-radio-button label="label-right-align">
-                      {{i18nt('designer.setting.rightAlign')}}</el-radio-button>
-                  </el-radio-group>
-                </el-form-item>
-                <el-form-item :label="i18nt('designer.setting.showBlankRow')" v-if="hasConfig('showBlankRow')">
-                  <el-checkbox v-model="optionModel.showBlankRow"></el-checkbox>
-                </el-form-item>
-                <el-form-item :label="i18nt('designer.setting.showRowNumber')" v-if="hasConfig('showRowNumber')">
-                  <el-checkbox v-model="optionModel.showRowNumber"></el-checkbox>
-                </el-form-item>
-                <el-form-item :label="i18nt('designer.setting.hidden')" v-if="hasConfig('hidden')">
-                  <el-checkbox v-model="optionModel.hidden"></el-checkbox>
-                </el-form-item>
-                <el-form-item :label="i18nt('designer.setting.cellWidth')" v-if="hasConfig('cellWidth')">
-                  <el-input type="text" v-model="optionModel.cellWidth"></el-input>
-                </el-form-item>
-                <el-form-item :label="i18nt('designer.setting.cellHeight')" v-if="hasConfig('cellHeight')">
-                  <el-input type="text" v-model="optionModel.cellHeight"></el-input>
-                </el-form-item>
-                <el-form-item :label="i18nt('designer.setting.customClass')" v-if="!!selectedWidget.options">
-                  <el-select v-model="optionModel.customClass" multiple filterable allow-create
-                             default-first-option>
-                    <el-option v-for="(item, idx) in cssClassList" :key="idx" :label="item" :value="item"></el-option>
-                  </el-select>
-                </el-form-item>
-                <el-form-item label-width="0" v-if="hasConfig('gutter')">
-                  <el-divider class="custom-divider">{{i18nt('designer.setting.columnSetting')}}</el-divider>
-                </el-form-item>
-                <el-form-item :label="i18nt('designer.setting.gutter')" v-if="hasConfig('gutter')">
-                  <el-input-number v-model="optionModel.gutter" style="width: 100%"></el-input-number>
-                </el-form-item>
-              </el-form>
+                <el-collapse-item name="2" :title="i18nt('designer.setting.advancedSetting')">
+                  <template v-for="(editorName, propName) in advProps">
+                    <component v-if="hasPropEditor(propName, editorName)" :is="getPropEditor(propName, editorName)"
+                               :designer="designer" :selected-widget="selectedWidget" :option-model="optionModel"></component>
+                  </template>
+                </el-collapse-item>
 
-              <el-form :model="optionModel" size="mini" v-if="selectedWidget.type === 'grid'"
-                       label-position="top" class="setting-form" @submit.native.prevent>
-                <el-form-item :label="i18nt('designer.setting.colsOfGrid')">
-                  <li v-for="(colItem, colIdx) in selectedWidget.cols" :key="colIdx" class="col-item">
-                    <span class="col-span-title">{{i18nt('designer.setting.colSpanTitle')}}{{colIdx + 1}}</span>
-                    <el-input-number v-model.number="colItem.options.span" :min="1" :max="24"
-                                     @change="(newValue, oldValue) => spanChanged(selectedWidget, colItem, colIdx, newValue, oldValue)"
-                                     class="cell-span-input"></el-input-number>
-                    <el-button circle plain size="mini" type="danger" @click="deleteCol(selectedWidget, colIdx)"
-                               icon="el-icon-minus" class="col-delete-button"></el-button>
-                  </li>
-                  <div>
-                    <el-button type="text" @click="addNewCol(selectedWidget)">{{i18nt('designer.setting.addColumn')}}</el-button>
-                  </div>
-                </el-form-item>
-              </el-form>
+                <el-collapse-item name="3" :title="i18nt('designer.setting.eventSetting')">
+                  <template v-for="(editorName, propName) in eventProps">
+                    <component v-if="hasPropEditor(propName, editorName)" :is="getPropEditor(propName, editorName)"
+                               :designer="designer" :selected-widget="selectedWidget" :option-model="optionModel"></component>
+                  </template>
+                </el-collapse-item>
+              </el-collapse>
+            </el-form>
+          </template>
 
-              <el-form :model="optionModel" size="mini" v-if="selectedWidget.type === 'grid-col'"
-                       label-position="left" label-width="120px" class="setting-form" @submit.native.prevent>
-                <el-form-item :label="i18nt('designer.setting.colSpanTitle')">
-                  <el-input-number v-model.number="optionModel.span" :min="1" :max="24"
-                                   style="width: 100%"></el-input-number>
-                </el-form-item>
-              </el-form>
-
-              <el-form :model="optionModel" size="mini" v-if="selectedWidget.type === 'tab'"
-                       label-position="top" class="setting-form panes-setting" @submit.native.prevent>
-                <el-form-item :label="i18nt('designer.setting.tabPaneSetting')">
-                  <draggable tag="ul" :list="selectedWidget.tabs"
-                             v-bind="{group:'panesGroup', ghostClass: 'ghost', handle: '.drag-option'}">
-                    <li v-for="(tpItem, tpIdx) in selectedWidget.tabs" :key="tpIdx" class="col-item">
-                      <!-- span style="margin-right: 12px">{{tpIdx + 1}}</span -->
-                      <el-checkbox v-model="tpItem.options.active" disabled @change="(evt) => onTabPaneActiveChange(evt, tpItem)"
-                                   style="margin-right: 8px">{{i18nt('designer.setting.paneActive')}}</el-checkbox>
-                      <el-input type="text" v-model="tpItem.options.label" style="width: 155px"></el-input>
-                      <i class="iconfont icon-drag drag-option"></i>
-                      <el-button circle plain size="mini" type="danger" @click="deleteTabPane(selectedWidget, tpIdx)"
-                                 icon="el-icon-minus" class="col-delete-button"></el-button>
-                    </li>
-                    <div>
-                      <el-button type="text" @click="addTabPane(selectedWidget)">{{i18nt('designer.setting.addTabPane')}}</el-button>
-                    </div>
-                  </draggable>
-                </el-form-item>
-              </el-form>
-            </el-collapse-item>
-
-            <el-collapse-item name="3" :title="i18nt('designer.setting.eventSetting')">
-              <el-form :model="optionModel" size="mini" label-position="left" label-width="150px" class="setting-form" @submit.native.prevent>
-                <el-form-item label="onSubFormRowAdd" v-if="hasConfig('onSubFormRowAdd')">
-                  <el-button type="info" icon="el-icon-edit" plain round @click="editEventHandler('onSubFormRowAdd')">
-                    {{i18nt('designer.setting.addEventHandler')}}</el-button>
-                </el-form-item>
-                <el-form-item label="onSubFormRowInsert" v-if="hasConfig('onSubFormRowInsert')">
-                  <el-button type="info" icon="el-icon-edit" plain round @click="editEventHandler('onSubFormRowInsert')">
-                    {{i18nt('designer.setting.addEventHandler')}}</el-button>
-                </el-form-item>
-                <el-form-item label="onSubFormRowDelete" v-if="hasConfig('onSubFormRowDelete')">
-                  <el-button type="info" icon="el-icon-edit" plain round @click="editEventHandler('onSubFormRowDelete')">
-                    {{i18nt('designer.setting.addEventHandler')}}</el-button>
-                </el-form-item>
-                <el-form-item label="onSubFormRowChange" v-if="hasConfig('onSubFormRowChange')">
-                  <el-button type="info" icon="el-icon-edit" plain round @click="editEventHandler('onSubFormRowChange')">
-                    {{i18nt('designer.setting.addEventHandler')}}</el-button>
-                </el-form-item>
-              </el-form>
-            </el-collapse-item>
-          </el-collapse>
-
-        </template>
-
-      </el-scrollbar>
+        </el-scrollbar>
       </el-tab-pane>
 
       <el-tab-pane v-if="!!designer" :label="i18nt('designer.hint.formSetting')" name="2">
         <el-scrollbar class="setting-scrollbar" :style="{height: scrollerHeight}">
-        <el-form :model="formConfig" size="mini" label-position="left" label-width="120px"
-                 class="setting-form" @submit.native.prevent>
-          <el-collapse v-model="formActiveCollapseNames" class="setting-collapse">
-            <el-collapse-item name="1" :title="i18nt('designer.setting.basicSetting')">
-              <el-form-item :label="i18nt('designer.setting.formSize')">
-                <el-select v-model="formConfig.size">
-                  <el-option v-for="item in formSizes" :key="item.value" :label="item.label"
-                             :value="item.value">
-                  </el-option>
-                </el-select>
-              </el-form-item>
-              <el-form-item :label="i18nt('designer.setting.labelPosition')">
-                <el-radio-group v-model="formConfig.labelPosition" class="radio-group-custom">
-                  <el-radio-button label="left">{{i18nt('designer.setting.leftPosition')}}</el-radio-button>
-                  <el-radio-button label="top">{{i18nt('designer.setting.topPosition')}}</el-radio-button>
-                </el-radio-group>
-              </el-form-item>
-              <el-form-item :label="i18nt('designer.setting.labelAlign')">
-                <el-radio-group v-model="formConfig.labelAlign" class="radio-group-custom">
-                  <el-radio-button label="label-left-align">{{i18nt('designer.setting.leftAlign')}}</el-radio-button>
-                  <el-radio-button label="label-center-align">{{i18nt('designer.setting.centerAlign')}}</el-radio-button>
-                  <el-radio-button label="label-right-align">{{i18nt('designer.setting.rightAlign')}}</el-radio-button>
-                </el-radio-group>
-              </el-form-item>
-              <el-form-item :label="i18nt('designer.setting.labelWidth')">
-                <el-input-number v-model="formConfig.labelWidth" :min="0" style="width: 100%"></el-input-number>
-              </el-form-item>
-              <el-form-item :label="i18nt('designer.setting.formCss')">
-                <el-button type="info" icon="el-icon-edit" plain round @click="editFormCss">{{i18nt('designer.setting.addCss')}}</el-button>
-              </el-form-item>
-              <!-- -->
-              <el-form-item :label="i18nt('designer.setting.customClass')">
-                <el-select v-model="formConfig.customClass" multiple filterable allow-create
-                           default-first-option>
-                  <el-option v-for="(item, idx) in cssClassList" :key="idx" :label="item" :value="item"></el-option>
-                </el-select>
-              </el-form-item>
-              <!-- -->
-              <el-form-item :label="i18nt('designer.setting.globalFunctions')">
-                <el-button type="info" icon="el-icon-edit" plain round @click="editGlobalFunctions">{{i18nt('designer.setting.addEventHandler')}}</el-button>
-              </el-form-item>
-              <el-form-item label-width="0">
-                <el-divider class="custom-divider">{{i18nt('designer.setting.formSFCSetting')}}</el-divider>
-              </el-form-item>
-              <el-form-item :label="i18nt('designer.setting.formModelName')">
-                <el-input type="text" v-model="formConfig.modelName"></el-input>
-              </el-form-item>
-              <el-form-item :label="i18nt('designer.setting.formRefName')">
-                <el-input type="text" v-model="formConfig.refName"></el-input>
-              </el-form-item>
-              <el-form-item :label="i18nt('designer.setting.formRulesName')">
-                <el-input type="text" v-model="formConfig.rulesName"></el-input>
-              </el-form-item>
-            </el-collapse-item>
-
-            <el-collapse-item name="2" :title="i18nt('designer.setting.eventSetting')">
-              <el-form-item label="onFormCreated">
-                <el-button type="info" icon="el-icon-edit" plain round @click="editFormEventHandler('onFormCreated')">
-                  {{i18nt('designer.setting.addEventHandler')}}</el-button>
-              </el-form-item>
-              <el-form-item label="onFormMounted">
-                <el-button type="info" icon="el-icon-edit" plain round @click="editFormEventHandler('onFormMounted')">
-                  {{i18nt('designer.setting.addEventHandler')}}</el-button>
-              </el-form-item>
-              <!-- -->
-              <el-form-item label="onFormDataChange">
-                <el-button type="info" icon="el-icon-edit" plain round @click="editFormEventHandler('onFormDataChange')">
-                    {{i18nt('designer.setting.addEventHandler')}}</el-button>
-              </el-form-item>
-              <!-- -->
-              <!--
-              <el-form-item label="onFormValidate">
-                <el-button type="info" icon="el-icon-edit" plain round @click="editFormEventHandler('onFormValidate')">
-                  {{i18nt('designer.setting.addEventHandler')}}</el-button>
-              </el-form-item>
-              -->
-            </el-collapse-item>
-          </el-collapse>
-        </el-form>
+          <form-setting :designer="designer" :form-config="formConfig"></form-setting>
         </el-scrollbar>
       </el-tab-pane>
     </el-tabs>
@@ -672,7 +74,7 @@
     <el-dialog :title="i18nt('designer.setting.editWidgetEventHandler')" :visible.sync="showWidgetEventDialogFlag"
                v-if="showWidgetEventDialogFlag" :show-close="true" class="small-padding-dialog" v-dialog-drag
                :close-on-click-modal="false" :close-on-press-escape="false" :destroy-on-close="true">
-      <el-alert type="info" :closable="false" :title="optionModel.name + '.' + eventParamsMap[curEventName]"></el-alert>
+      <el-alert type="info" :closable="false" :title="eventHeader"></el-alert>
       <code-editor :mode="'javascript'" :readonly="false" v-model="eventHandlerCode"></code-editor>
       <el-alert type="info" :closable="false" title="}"></el-alert>
       <div slot="footer" class="dialog-footer">
@@ -683,67 +85,29 @@
       </div>
     </el-dialog>
 
-    <el-dialog :title="i18nt('designer.setting.editFormEventHandler')" :visible.sync="showFormEventDialogFlag"
-               v-if="showFormEventDialogFlag" :show-close="true" class="small-padding-dialog"
-               :close-on-click-modal="false" :close-on-press-escape="false" :destroy-on-close="true">
-      <el-alert type="info" :closable="false" :title="'form.' + eventParamsMap[curEventName]"></el-alert>
-      <code-editor :mode="'javascript'" :readonly="false" v-model="formEventHandlerCode"></code-editor>
-      <el-alert type="info" :closable="false" title="}"></el-alert>
-      <div slot="footer" class="dialog-footer">
-        <el-button @click="showFormEventDialogFlag = false">
-          {{i18nt('designer.hint.cancel')}}</el-button>
-        <el-button type="primary" @click="saveFormEventHandler">
-          {{i18nt('designer.hint.confirm')}}</el-button>
-      </div>
-    </el-dialog>
-
-    <el-dialog :title="i18nt('designer.setting.formCss')" :visible.sync="showEditFormCssDialogFlag"
-               v-if="showEditFormCssDialogFlag" :show-close="true" class="small-padding-dialog" v-dialog-drag
-               :close-on-click-modal="false" :close-on-press-escape="false" :destroy-on-close="true">
-      <code-editor :mode="'css'" :readonly="false" v-model="formCssCode"></code-editor>
-      <div slot="footer" class="dialog-footer">
-        <el-button @click="showEditFormCssDialogFlag = false">
-          {{i18nt('designer.hint.cancel')}}</el-button>
-        <el-button type="primary" @click="saveFormCss">
-          {{i18nt('designer.hint.confirm')}}</el-button>
-      </div>
-    </el-dialog>
-
-    <el-dialog :title="i18nt('designer.setting.globalFunctions')" :visible.sync="showEditFunctionsDialogFlag"
-               v-if="showEditFunctionsDialogFlag" :show-close="true" class="small-padding-dialog" v-dialog-drag
-               :close-on-click-modal="false" :close-on-press-escape="false" :destroy-on-close="true">
-      <code-editor :mode="'javascript'" :readonly="false" v-model="functionsCode"></code-editor>
-      <div slot="footer" class="dialog-footer">
-        <el-button @click="showEditFunctionsDialogFlag = false">
-          {{i18nt('designer.hint.cancel')}}</el-button>
-        <el-button type="primary" @click="saveGlobalFunctions">
-          {{i18nt('designer.hint.confirm')}}</el-button>
-      </div>
-    </el-dialog>
   </el-container>
 </template>
 
 <script>
-  import Draggable from 'vuedraggable'
   import CodeEditor from '@/components/code-editor/index'
-  import OptionItemsSetting from "@/components/form-designer/setting-panel/option-items-setting";
+  import PropertyEditors from './property-editor/index'
+  import FormSetting from './form-setting'
+  import WidgetProperties from './propertyRegister'
   import {
     addWindowResizeHandler,
-    insertCustomCssToHead,
-    insertGlobalFunctionsToHtml,
-    isEmptyStr
   } from "@/utils/util";
   import i18n from "@/utils/i18n";
 
+  const {COMMON_PROPERTIES, ADVANCED_PROPERTIES, EVENT_PROPERTIES} = WidgetProperties
+
   export default {
     name: "SettingPanel",
     componentName: "SettingPanel",
     mixins: [i18n],
     components: {
-      Draggable,
-      OptionItemsSetting,
-      //CodeEditor: () => import('@/components/code-editor/index'),
       CodeEditor,
+      FormSetting,
+      ...PropertyEditors,
     },
     props: {
       designer: Object,
@@ -754,96 +118,18 @@
       return {
         scrollerHeight: 0,
 
-        nameRequiredRule: [{required: true, message: 'name required'}],
-
         activeTab: "2",
         widgetActiveCollapseNames: ['1', '3'], //['1', '2', '3'],
         formActiveCollapseNames: ['1', '2'],
-        displayTypes: [
-          {label: 'text', value: 'text'},
-          {label: 'number', value: 'number'},
-          {label: 'password', value: 'password'},
-        ],
-        widgetSizes: [
-          {label: 'default', value: ''},
-          {label: 'large', value: 'large'},
-          {label: 'medium', value: 'medium'},
-          {label: 'small', value: 'small'},
-          {label: 'mini', value: 'mini'},
-        ],
-        formSizes: [
-          {label: 'default', value: ''},
-          {label: 'large', value: 'large'},
-          {label: 'medium', value: 'medium'},
-          {label: 'small', value: 'small'},
-          {label: 'mini', value: 'mini'},
-        ],
 
-        labelIconPosition: [
-          {label: 'front', value: 'front'},
-          {label: 'rear', value: 'rear'},
-        ],
-
-        uploadPictureTypes: [
-          {value: 'jpeg', label: 'JPG'},
-          {value: 'png', label: 'PNG'},
-          {value: 'gif', label: 'GIF'},
-        ],
-
-        uploadFileTypes: [
-          {value: 'doc', label: 'doc'},
-          {value: 'xls', label: 'xls'},
-          {value: 'docx', label: 'docx'},
-          {value: 'xlsx', label: 'xlsx'},
-        ],
-
-        fieldValidators: [
-          {value: 'number', label: this.i18nt('designer.hint.numberValidator')},
-          {value: 'letter', label: this.i18nt('designer.hint.letterValidator')},
-          {value: 'letterAndNumber', label: this.i18nt('designer.hint.letterAndNumberValidator')},
-          {value: 'mobilePhone', label: this.i18nt('designer.hint.mobilePhoneValidator')},
-          {value: 'email', label: this.i18nt('designer.hint.emailValidator')},
-          {value: 'url', label: this.i18nt('designer.hint.urlValidator')},
-          {value: 'noChinese', label: this.i18nt('designer.hint.noChineseValidator')},
-          {value: 'chinese', label: this.i18nt('designer.hint.chineseValidator')},
-        ],
-
-        showEditFormCssDialogFlag: false,
-        formCssCode: '',
-        cssClassList: [],
-
-        showEditFunctionsDialogFlag: false,
-        functionsCode: '',
+        commonProps: COMMON_PROPERTIES,
+        advProps: ADVANCED_PROPERTIES,
+        eventProps: EVENT_PROPERTIES,
 
         showWidgetEventDialogFlag: false,
-        showFormEventDialogFlag: false,
-        eventParamsMap: {
-          'onCreated':          'onCreated() {',
-          'onMounted':          'onMounted() {',
-          'onClick':            'onClick() {',
-          'onInput':            'onInput(value) {',
-          'onChange':           'onChange(value, oldValue, subFormData, rowId) {',
-          'onFocus':            'onFocus(event)',
-          'onBlur':             'onBlur(event)',
-          'onRemoteQuery':      'onRemoteQuery(keyword) {',
-          'onBeforeUpload':     'onBeforeUpload(file) {',
-          'onUploadSuccess':    'onUploadSuccess(result, file, fileList) {',
-          'onUploadError':      'onUploadError(error, file, fileList) {',
-          'onValidate':         'onValidate(rule, value, callback)',
-
-          'onFormCreated':      'onFormCreated() {',
-          'onFormMounted':      'onFormMounted() {',
-          'onFormDataChange':   'onFormDataChange(fieldName, newValue, oldValue, formModel, subFormName, subFormRowIndex) {',
-          //'onFormValidate':     'onFormValidate() {',
-
-          'onSubFormRowAdd':      'onSubFormRowAdd(subFormData, newRowId) {',
-          'onSubFormRowInsert':   'onSubFormRowInsert(subFormData, newRowId) {',
-          'onSubFormRowDelete':   'onSubFormRowDelete(subFormData, deletedDataRow) {',
-          'onSubFormRowChange':  'onSubFormRowChange(subFormData) {',
-        },
         eventHandlerCode: '',
-        formEventHandlerCode: '',
         curEventName: '',
+        eventHeader: '',
 
         subFormChildWidgetFlag: false,
       }
@@ -859,68 +145,6 @@
         }
       },
 
-      minValue: {
-        get() {
-          return this.optionModel['min']
-        },
-
-        set(newValue) {
-          //if ((!newValue && (newValue !== 0)) || isNaN(newValue)) {
-          if ((newValue === undefined) || (newValue === null) || isNaN(newValue)) {
-            this.optionModel.min = null
-          } else {
-            this.optionModel.min = Number(newValue)
-          }
-        }
-      },
-
-      maxValue: {
-        get() {
-          return this.optionModel['max']
-        },
-
-        set(newValue) {
-          if (!newValue || isNaN(newValue)) {
-            this.optionModel.max = null
-          } else {
-            this.optionModel.max = Number(newValue)
-          }
-        }
-      },
-
-      minLength: {
-        get() {
-          return this.optionModel['minLength']
-        },
-
-        set(newValue) {
-          if (!newValue || isNaN(newValue)) {
-            this.optionModel.minLength = null
-          } else {
-            this.optionModel.minLength = Number(newValue)
-          }
-        }
-      },
-
-      maxLength: {
-        get() {
-          return this.optionModel['maxLength']
-        },
-
-        set(newValue) {
-          if (!newValue || isNaN(newValue)) {
-            this.optionModel.maxLength = null
-          } else {
-            this.optionModel.maxLength = Number(newValue)
-          }
-        }
-      },
-
-      noLabelSetting() {
-        return (this.selectedWidget.type === 'static-text') || (this.selectedWidget.type === 'html-text')
-            //|| (this.selectedWidget.type === 'divider')
-      },
-
     },
     watch: {
       'designer.selectedWidget': {
@@ -946,6 +170,15 @@
       },
 
     },
+    created() {
+      this.$on('editEventHandler', function (eventName, eventParams) {
+        this.editEventHandler(eventName, eventParams)
+      })
+
+      this.designer.handleEvent('form-css-updated', (cssClassList) => {
+        this.designer.setCssClassList(cssClassList)
+      })
+    },
     mounted() {
       if (!this.designer.selectedWidget) {
         this.activeTab = "2"
@@ -960,200 +193,29 @@
           //console.log(this.scrollerHeight)
         })
       })
-
-      this.designer.handleEvent('field-selected', (parentWidget) => {
-        this.subFormChildWidgetFlag = !!parentWidget && (parentWidget.type === 'sub-form');
-      })
-
-      /* SettingPanel和FormWidget为兄弟组件, 在FormWidget加载formConfig时，
-         此处SettingPanel可能无法获取到formConfig.cssCode, 故加个延时函数！ */
-      setTimeout(() => {
-        this.formCssCode = this.formConfig.cssCode
-        insertCustomCssToHead(this.formCssCode)
-        this.extractCssClass()
-      }, 1200)
     },
     methods: {
-      updateWidgetNameAndRef(newName) {
-        let oldName = this.designer.selectedWidgetName
-        if (isEmptyStr(newName)) {
-          this.selectedWidget.options.name = oldName
-          this.$message.info(this.i18nt('designer.hint.nameRequired'))
-          return
-        }
-
-        if (!!this.designer.formWidget) {
-          //检查newName是否已存在！！
-          let foundRef = this.designer.formWidget.getWidgetRef(newName)
-          if (!!foundRef) {
-            this.selectedWidget.options.name = oldName
-            this.$message.info(this.i18nt('designer.hint.duplicateName') + newName)
-            return
-          }
-
-          let fieldWidget = this.designer.formWidget.getWidgetRef(oldName)
-          if (!!fieldWidget && !!fieldWidget.registerToRefList) {
-            fieldWidget.registerToRefList(oldName)
-            this.designer.updateSelectedWidgetNameAndRef(this.selectedWidget, newName)
-          }
-        }
-      },
-
-      spanChanged (curGrid) {
-        let spanSum = 0
-        curGrid.cols.forEach((colItem) => {
-          spanSum += colItem.options.span
-        })
-        if (spanSum > 24) {
-          //this.$message.info('列栅格之和超出24')
-          console.log('列栅格之和超出24')
-          //TODO: 语言字符串资源化
-        }
-
-        this.updateCurrentHistoryStep()
-      },
-
-      updateCurrentHistoryStep() {
-        this.designer.saveCurrentHistoryStep()
-      },
-
-      deleteCol(curGrid, colIdx) {
-        this.designer.deleteColOfGrid(curGrid, colIdx)
-        this.designer.emitHistoryChange()
-      },
-
-      addNewCol(curGrid) {
-        this.designer.addNewColOfGrid(curGrid)
-        this.designer.emitHistoryChange()
-      },
-
-      hasConfig(configName) {
-        if (!this.designer || !this.designer.selectedWidget) {
+      hasPropEditor(propName, editorName) {
+        if (!editorName) {
           return false
         }
 
-        return this.designer.hasConfig(this.selectedWidget, configName)
+        return this.designer.hasConfig(this.selectedWidget, propName)
       },
 
-      inputNumberHandler({target}) {
-        target.value = target.value.replace(/[^0-9]/gi, '')
-        // if (target.value === '') {
-        //   target.value = null
-        // } else {
-        //   target.value = Number(target.value) //TODO: 为什么还是转化为字符串？？
-        // }
-      },
-
-      emitDefaultValueChange() {
-        if (!!this.designer) {
-          if (!!this.designer.formWidget) {
-            let fieldWidget = this.designer.formWidget.getWidgetRef(this.designer.selectedWidget.options.name)
-            if (!!fieldWidget && !!fieldWidget.refreshDefaultValue) {
-              fieldWidget.refreshDefaultValue()
-            }
-          }
-        }
-      },
-
-      addTabPane(curTabs) {
-        this.designer.addTabPaneOfTabs(curTabs)
-        this.designer.emitHistoryChange()
-      },
-
-      deleteTabPane(curTabs, tpIdx) {
-        if (curTabs.tabs.length === 1) {
-          this.$message.info(this.i18nt('designer.hint.lastPaneCannotBeDeleted'))
-          return
+      getPropEditor(propName, editorName) {
+        let ownPropEditorName = `${this.selectedWidget.type}-${propName}-editor`
+        //console.log(ownPropEditorName, this.$options.components[ownPropEditorName])
+        if (!!this.$options.components[ownPropEditorName]) {  //局部注册的属性编辑器组件
+          return ownPropEditorName
         }
 
-        this.designer.deleteTabPaneOfTabs(curTabs, tpIdx)
-        this.designer.emitHistoryChange()
+        return !!this.$root.$options.components[ownPropEditorName] ? ownPropEditorName : editorName  //全局注册的属性编辑器组件
       },
 
-      onTabPaneActiveChange(evt, tpItem) {
-        //TODO: !!!
-      },
-
-      onMultipleSelected(val) {
-        if (val) {
-          this.optionModel.defaultValue = []  //清空原默认值!!
-        } else {
-          if (!!this.optionModel.defaultValue && (this.optionModel.defaultValue.length > 0)) {
-            this.optionModel.defaultValue = this.optionModel.defaultValue[0]
-          } else {
-            this.optionModel.defaultValue = ''
-          }
-        }
-      },
-
-      onRemoteChange(val) {
-        if (!!val) {
-          this.optionModel.filterable = true
-          this.optionModel.allowCreate = false
-        }
-      },
-
-      editFormCss() {
-        this.formCssCode = this.designer.formConfig.cssCode
-        this.showEditFormCssDialogFlag = true
-      },
-
-      extractCssClass() {
-        let regExp = /\..*{/g
-        let result = this.formCssCode.match(regExp)
-        //this.cssClassList.length = 0
-        this.cssClassList.splice(0, this.cssClassList.length)  //清除数组必须用splice，length=0不会响应式更新！！
-        if (!!result && result.length > 0) {
-          result.forEach((rItem) => {
-            let classArray = rItem.split(',')  //切分逗号分割的多个class
-            if (classArray.length > 0) {
-              classArray.forEach((cItem) => {
-                let caItem = cItem.trim()
-                if (caItem.indexOf('.', 1) !== -1) {  //查找第二个.位置
-                  let newClass = caItem.substring(caItem.indexOf('.') + 1, caItem.indexOf('.', 1))  //仅截取第一、二个.号之间的class
-                  if (!!newClass) {
-                    this.cssClassList.push(newClass.trim())
-                  }
-                } else if (caItem.indexOf(' ') !== -1) {  //查找第一个空格位置
-                  let newClass = caItem.substring(caItem.indexOf('.') + 1, caItem.indexOf(' '))  //仅截取第一、二个.号之间的class
-                  if (!!newClass) {
-                    this.cssClassList.push(newClass.trim())
-                  }
-                } else {
-                  if (caItem.indexOf('{') !== -1) {  //查找第一个{位置
-                    let newClass = caItem.substring(caItem.indexOf('.') + 1, caItem.indexOf('{'))
-                    this.cssClassList.push( newClass.trim() )
-                  } else {
-                    let newClass = caItem.substring(caItem.indexOf('.') + 1)
-                    this.cssClassList.push( newClass.trim() )
-                  }
-                }
-              })
-            }
-          })
-        }
-      },
-
-      saveFormCss() {
-        this.extractCssClass()
-        this.designer.formConfig.cssCode = this.formCssCode
-        insertCustomCssToHead(this.formCssCode)
-        this.showEditFormCssDialogFlag = false
-      },
-
-      editGlobalFunctions() {
-        this.functionsCode = this.designer.formConfig.functions
-        this.showEditFunctionsDialogFlag = true
-      },
-
-      saveGlobalFunctions() {
-        this.designer.formConfig.functions = this.functionsCode
-        insertGlobalFunctionsToHtml(this.functionsCode)
-        this.showEditFunctionsDialogFlag = false
-      },
-
-      editEventHandler(eventName) {
+      editEventHandler(eventName, eventParams) {
         this.curEventName = eventName
+        this.eventHeader = `${this.optionModel.name}.${eventName}(${eventParams.join(', ')}) {`
         this.eventHandlerCode = this.selectedWidget.options[eventName] || ''
 
         // 设置字段校验函数示例代码
@@ -1169,17 +231,6 @@
         this.showWidgetEventDialogFlag = false
       },
 
-      editFormEventHandler(eventName) {
-        this.curEventName = eventName
-        this.formEventHandlerCode = this.formConfig[eventName]
-        this.showFormEventDialogFlag = true
-      },
-
-      saveFormEventHandler() {
-        this.formConfig[this.curEventName] = this.formEventHandlerCode
-        this.showFormEventDialogFlag = false
-      },
-
     }
   }
 </script>
@@ -1217,27 +268,6 @@
     ::v-deep .el-form-item--mini.el-form-item {
       margin-bottom: 6px;
     }
-
-    .radio-group-custom {
-      ::v-deep .el-radio-button__inner {
-        padding-left: 12px;
-        padding-right: 12px;
-      }
-    }
-  }
-
-  li.col-item {
-    list-style: none;
-
-    span.col-span-title {
-      display: inline-block;
-      font-size: 13px;
-      width: 120px;
-    }
-
-    .col-delete-button {
-      margin-left: 6px;
-    }
   }
 
   /* 隐藏Chrome浏览器中el-input数字输入框右侧的上下调整小箭头 */
@@ -1251,11 +281,11 @@
     -moz-appearance: textfield;
   }
 
-  .custom-divider.el-divider--horizontal {
+  ::v-deep .custom-divider.el-divider--horizontal {
     margin: 10px 0;
   }
 
-  .custom-divider-margin-top.el-divider--horizontal {
+  ::v-deep .custom-divider-margin-top.el-divider--horizontal {
     margin: 20px 0;
   }
 
@@ -1265,22 +295,4 @@
     }
   }
 
-  .panes-setting {
-    ul {
-      padding-inline-start: 0;
-      padding-left: 0; /* 重置IE11默认样式 */
-      margin: 0;
-    }
-
-    .drag-option {
-      cursor: move;
-    }
-
-    li.ghost {
-      background: #fff;
-      border: 2px dotted $--color-primary;
-    }
-  }
-
-
 </style>
diff --git a/src/components/form-designer/setting-panel/property-editor/allowCreate-editor.vue b/src/components/form-designer/setting-panel/property-editor/allowCreate-editor.vue
new file mode 100644
index 0000000..add2090
--- /dev/null
+++ b/src/components/form-designer/setting-panel/property-editor/allowCreate-editor.vue
@@ -0,0 +1,24 @@
+<template>
+  <el-form-item :label="i18nt('designer.setting.allowCreate')">
+    <el-checkbox v-model="optionModel.allowCreate"></el-checkbox>
+  </el-form-item>
+</template>
+
+<script>
+  import i18n from "@/utils/i18n"
+
+  export default {
+    name: "allowCreate-editor",
+    mixins: [i18n],
+    props: {
+      designer: Object,
+      selectedWidget: Object,
+      optionModel: Object,
+    },
+
+  }
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/components/form-designer/setting-panel/property-editor/appendButton-editor.vue b/src/components/form-designer/setting-panel/property-editor/appendButton-editor.vue
new file mode 100644
index 0000000..d844945
--- /dev/null
+++ b/src/components/form-designer/setting-panel/property-editor/appendButton-editor.vue
@@ -0,0 +1,28 @@
+<template>
+  <div>
+    <el-form-item label-width="0">
+      <el-divider class="custom-divider">{{i18nt('designer.setting.inputButton')}}</el-divider>
+    </el-form-item>
+    <el-form-item :label="i18nt('designer.setting.appendButton')">
+      <el-checkbox v-model="optionModel.appendButton"></el-checkbox>
+    </el-form-item>
+  </div>
+</template>
+
+<script>
+  import i18n from "@/utils/i18n"
+
+  export default {
+    name: "appendButton-editor",
+    mixins: [i18n],
+    props: {
+      designer: Object,
+      selectedWidget: Object,
+      optionModel: Object,
+    },
+  }
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/components/form-designer/setting-panel/property-editor/appendButtonDisabled-editor.vue b/src/components/form-designer/setting-panel/property-editor/appendButtonDisabled-editor.vue
new file mode 100644
index 0000000..b76e318
--- /dev/null
+++ b/src/components/form-designer/setting-panel/property-editor/appendButtonDisabled-editor.vue
@@ -0,0 +1,23 @@
+<template>
+  <el-form-item :label="i18nt('designer.setting.appendButtonDisabled')">
+    <el-checkbox v-model="optionModel.appendButtonDisabled"></el-checkbox>
+  </el-form-item>
+</template>
+
+<script>
+  import i18n from "@/utils/i18n"
+
+  export default {
+    name: "appendButtonDisabled-editor",
+    mixins: [i18n],
+    props: {
+      designer: Object,
+      selectedWidget: Object,
+      optionModel: Object,
+    },
+  }
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/components/form-designer/setting-panel/property-editor/automaticDropdown-editor.vue b/src/components/form-designer/setting-panel/property-editor/automaticDropdown-editor.vue
new file mode 100644
index 0000000..cb8d7c6
--- /dev/null
+++ b/src/components/form-designer/setting-panel/property-editor/automaticDropdown-editor.vue
@@ -0,0 +1,23 @@
+<template>
+  <el-form-item :label="i18nt('designer.setting.automaticDropdown')">
+    <el-checkbox v-model="optionModel.automaticDropdown"></el-checkbox>
+  </el-form-item>
+</template>
+
+<script>
+  import i18n from "@/utils/i18n"
+
+  export default {
+    name: "automaticDropdown-editor",
+    mixins: [i18n],
+    props: {
+      designer: Object,
+      selectedWidget: Object,
+      optionModel: Object,
+    },
+  }
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/components/form-designer/setting-panel/property-editor/border-editor.vue b/src/components/form-designer/setting-panel/property-editor/border-editor.vue
new file mode 100644
index 0000000..4f77bec
--- /dev/null
+++ b/src/components/form-designer/setting-panel/property-editor/border-editor.vue
@@ -0,0 +1,23 @@
+<template>
+  <el-form-item :label="i18nt('designer.setting.border')">
+    <el-checkbox v-model="optionModel.border"></el-checkbox>
+  </el-form-item>
+</template>
+
+<script>
+  import i18n from "@/utils/i18n"
+
+  export default {
+    name: "border-editor",
+    mixins: [i18n],
+    props: {
+      designer: Object,
+      selectedWidget: Object,
+      optionModel: Object,
+    },
+  }
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/components/form-designer/setting-panel/property-editor/buttonIcon-editor.vue b/src/components/form-designer/setting-panel/property-editor/buttonIcon-editor.vue
new file mode 100644
index 0000000..93848a4
--- /dev/null
+++ b/src/components/form-designer/setting-panel/property-editor/buttonIcon-editor.vue
@@ -0,0 +1,23 @@
+<template>
+  <el-form-item :label="i18nt('designer.setting.appendButtonIcon')">
+    <el-input type="text" v-model="optionModel.buttonIcon"></el-input>
+  </el-form-item>
+</template>
+
+<script>
+  import i18n from "@/utils/i18n"
+
+  export default {
+    name: "buttonIcon-editor",
+    mixins: [i18n],
+    props: {
+      designer: Object,
+      selectedWidget: Object,
+      optionModel: Object,
+    },
+  }
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/components/form-designer/setting-panel/property-editor/buttonStyle-editor.vue b/src/components/form-designer/setting-panel/property-editor/buttonStyle-editor.vue
new file mode 100644
index 0000000..cc635df
--- /dev/null
+++ b/src/components/form-designer/setting-panel/property-editor/buttonStyle-editor.vue
@@ -0,0 +1,23 @@
+<template>
+  <el-form-item :label="i18nt('designer.setting.buttonStyle')">
+    <el-checkbox v-model="optionModel.buttonStyle"></el-checkbox>
+  </el-form-item>
+</template>
+
+<script>
+  import i18n from "@/utils/i18n"
+
+  export default {
+    name: "buttonStyle-editor",
+    mixins: [i18n],
+    props: {
+      designer: Object,
+      selectedWidget: Object,
+      optionModel: Object,
+    },
+  }
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/components/form-designer/setting-panel/property-editor/clearable-editor.vue b/src/components/form-designer/setting-panel/property-editor/clearable-editor.vue
new file mode 100644
index 0000000..4f79ff0
--- /dev/null
+++ b/src/components/form-designer/setting-panel/property-editor/clearable-editor.vue
@@ -0,0 +1,23 @@
+<template>
+  <el-form-item :label="i18nt('designer.setting.clearable')">
+    <el-checkbox v-model="optionModel.clearable"></el-checkbox>
+  </el-form-item>
+</template>
+
+<script>
+  import i18n from "@/utils/i18n"
+
+  export default {
+    name: "clearable-editor",
+    mixins: [i18n],
+    props: {
+      designer: Object,
+      selectedWidget: Object,
+      optionModel: Object,
+    },
+  }
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/components/form-designer/setting-panel/property-editor/columnWidth-editor.vue b/src/components/form-designer/setting-panel/property-editor/columnWidth-editor.vue
new file mode 100644
index 0000000..785e8c6
--- /dev/null
+++ b/src/components/form-designer/setting-panel/property-editor/columnWidth-editor.vue
@@ -0,0 +1,40 @@
+<template>
+  <div>
+    <el-form-item :label="i18nt('designer.setting.widgetColumnWidth')" v-show="!!subFormChildWidgetFlag">
+      <el-input type="text" v-model="optionModel.columnWidth"></el-input>
+    </el-form-item>
+  </div>
+</template>
+
+<script>
+  import i18n from "@/utils/i18n"
+
+  export default {
+    name: "columnWidth-editor",
+    mixins: [i18n],
+    props: {
+      designer: Object,
+      selectedWidget: Object,
+      optionModel: Object,
+    },
+    data() {
+      return {
+        //subFormChildWidgetFlag: false,
+        subFormChildWidgetFlag: true,
+      }
+    },
+    created() {
+
+    },
+    mounted() {
+      this.designer.handleEvent('field-selected', (parentWidget) => {
+        this.subFormChildWidgetFlag = !!parentWidget && (parentWidget.type === 'sub-form');
+        //console.log('subFormChildWidgetFlag', this.subFormChildWidgetFlag)
+      })
+    }
+  }
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/components/form-designer/setting-panel/property-editor/container-grid-col/grid-col-span-editor.vue b/src/components/form-designer/setting-panel/property-editor/container-grid-col/grid-col-span-editor.vue
new file mode 100644
index 0000000..a437939
--- /dev/null
+++ b/src/components/form-designer/setting-panel/property-editor/container-grid-col/grid-col-span-editor.vue
@@ -0,0 +1,24 @@
+<template>
+  <el-form-item :label="i18nt('designer.setting.colSpanTitle')">
+    <el-input-number v-model.number="optionModel.span" :min="1" :max="24"
+                     style="width: 100%"></el-input-number>
+  </el-form-item>
+</template>
+
+<script>
+  import i18n from "@/utils/i18n";
+
+  export default {
+    name: "grid-col-span-editor",
+    mixins: [i18n],
+    props: {
+      designer: Object,
+      selectedWidget: Object,
+      optionModel: Object,
+    },
+  }
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/components/form-designer/setting-panel/property-editor/container-grid/gutter-editor.vue b/src/components/form-designer/setting-panel/property-editor/container-grid/gutter-editor.vue
new file mode 100644
index 0000000..0be4106
--- /dev/null
+++ b/src/components/form-designer/setting-panel/property-editor/container-grid/gutter-editor.vue
@@ -0,0 +1,81 @@
+<template>
+  <div>
+    <el-form-item label-width="0">
+      <el-divider class="custom-divider">{{i18nt('designer.setting.columnSetting')}}</el-divider>
+    </el-form-item>
+    <el-form-item :label="i18nt('designer.setting.gutter')">
+      <el-input-number v-model="optionModel.gutter" style="width: 100%"></el-input-number>
+    </el-form-item>
+    <el-form-item :label="i18nt('designer.setting.colsOfGrid')"></el-form-item>
+    <el-form-item label-width="0">
+      <li v-for="(colItem, colIdx) in selectedWidget.cols" :key="colIdx" class="col-item">
+        <span class="col-span-title">{{i18nt('designer.setting.colSpanTitle')}}{{colIdx + 1}}</span>
+        <el-input-number v-model.number="colItem.options.span" :min="1" :max="24"
+                         @change="(newValue, oldValue) => spanChanged(selectedWidget, colItem, colIdx, newValue, oldValue)"
+                         class="cell-span-input"></el-input-number>
+        <el-button circle plain size="mini" type="danger" @click="deleteCol(selectedWidget, colIdx)"
+                   icon="el-icon-minus" class="col-delete-button"></el-button>
+      </li>
+      <div>
+        <el-button type="text" @click="addNewCol(selectedWidget)">{{i18nt('designer.setting.addColumn')}}</el-button>
+      </div>
+    </el-form-item>
+  </div>
+</template>
+
+<script>
+  import i18n from "@/utils/i18n"
+
+  export default {
+    name: "gutter-editor",
+    mixins: [i18n],
+    props: {
+      designer: Object,
+      selectedWidget: Object,
+      optionModel: Object,
+    },
+    methods: {
+      spanChanged(curGrid) {
+        let spanSum = 0
+        curGrid.cols.forEach((colItem) => {
+          spanSum += colItem.options.span
+        })
+        if (spanSum > 24) {
+          //this.$message.info('列栅格之和超出24')
+          console.log('列栅格之和超出24')
+          //TODO: 语言字符串资源化
+        }
+
+        this.designer.saveCurrentHistoryStep()
+      },
+
+      deleteCol(curGrid, colIdx) {
+        this.designer.deleteColOfGrid(curGrid, colIdx)
+        this.designer.emitHistoryChange()
+      },
+
+      addNewCol(curGrid) {
+        this.designer.addNewColOfGrid(curGrid)
+        this.designer.emitHistoryChange()
+      },
+
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  li.col-item {
+    list-style: none;
+
+    span.col-span-title {
+      display: inline-block;
+      font-size: 13px;
+      width: 120px;
+    }
+
+    .col-delete-button {
+      margin-left: 6px;
+    }
+  }
+
+</style>
diff --git a/src/components/form-designer/setting-panel/property-editor/container-sub-form/showBlankRow-editor.vue b/src/components/form-designer/setting-panel/property-editor/container-sub-form/showBlankRow-editor.vue
new file mode 100644
index 0000000..32dabd0
--- /dev/null
+++ b/src/components/form-designer/setting-panel/property-editor/container-sub-form/showBlankRow-editor.vue
@@ -0,0 +1,23 @@
+<template>
+  <el-form-item :label="i18nt('designer.setting.showBlankRow')">
+    <el-checkbox v-model="optionModel.showBlankRow"></el-checkbox>
+  </el-form-item>
+</template>
+
+<script>
+  import i18n from "@/utils/i18n"
+
+  export default {
+    name: "showBlankRow-editor",
+    mixins: [i18n],
+    props: {
+      designer: Object,
+      selectedWidget: Object,
+      optionModel: Object,
+    },
+  }
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/components/form-designer/setting-panel/property-editor/container-sub-form/showRowNumber-editor.vue b/src/components/form-designer/setting-panel/property-editor/container-sub-form/showRowNumber-editor.vue
new file mode 100644
index 0000000..c69b365
--- /dev/null
+++ b/src/components/form-designer/setting-panel/property-editor/container-sub-form/showRowNumber-editor.vue
@@ -0,0 +1,23 @@
+<template>
+  <el-form-item :label="i18nt('designer.setting.showRowNumber')">
+    <el-checkbox v-model="optionModel.showRowNumber"></el-checkbox>
+  </el-form-item>
+</template>
+
+<script>
+  import i18n from "@/utils/i18n"
+
+  export default {
+    name: "showRowNumber-editor",
+    mixins: [i18n],
+    props: {
+      designer: Object,
+      selectedWidget: Object,
+      optionModel: Object,
+    },
+  }
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/components/form-designer/setting-panel/property-editor/container-sub-form/sub-form-labelAlign-editor.vue b/src/components/form-designer/setting-panel/property-editor/container-sub-form/sub-form-labelAlign-editor.vue
new file mode 100644
index 0000000..aea845b
--- /dev/null
+++ b/src/components/form-designer/setting-panel/property-editor/container-sub-form/sub-form-labelAlign-editor.vue
@@ -0,0 +1,36 @@
+<template>
+  <el-form-item :label="i18nt('designer.setting.labelAlign')">
+    <el-radio-group v-model="optionModel.labelAlign" class="radio-group-custom">
+      <el-radio-button label="label-left-align">
+        {{i18nt('designer.setting.leftAlign')}}</el-radio-button>
+      <el-radio-button label="label-center-align">
+        {{i18nt('designer.setting.centerAlign')}}</el-radio-button>
+      <el-radio-button label="label-right-align">
+        {{i18nt('designer.setting.rightAlign')}}</el-radio-button>
+    </el-radio-group>
+  </el-form-item>
+</template>
+
+<script>
+  import i18n from "@/utils/i18n";
+
+  export default {
+    name: "sub-form-labelAlign-editor",
+    mixins: [i18n],
+    props: {
+      designer: Object,
+      selectedWidget: Object,
+      optionModel: Object,
+    },
+  }
+</script>
+
+<style lang="scss" scoped>
+  .radio-group-custom {
+    ::v-deep .el-radio-button__inner {
+      padding-left: 12px;
+      padding-right: 12px;
+    }
+  }
+
+</style>
diff --git a/src/components/form-designer/setting-panel/property-editor/container-tab/tab-customClass-editor.vue b/src/components/form-designer/setting-panel/property-editor/container-tab/tab-customClass-editor.vue
new file mode 100644
index 0000000..89fc1dc
--- /dev/null
+++ b/src/components/form-designer/setting-panel/property-editor/container-tab/tab-customClass-editor.vue
@@ -0,0 +1,119 @@
+<!--
+  因tabs属性并不包含于options属性之中，故只能跟其他options属性之内的属性值合并设置，此处选择与customClass合并！！
+-->
+
+<template>
+  <div>
+    <el-form-item :label="i18nt('designer.setting.customClass')">
+      <el-select v-model="optionModel.customClass" multiple filterable allow-create
+                 default-first-option>
+        <el-option v-for="(item, idx) in cssClassList" :key="idx" :label="item" :value="item"></el-option>
+      </el-select>
+    </el-form-item>
+    <el-form-item :label="i18nt('designer.setting.tabPaneSetting')"></el-form-item>
+    <el-form-item label-width="0" class="panes-setting">
+      <draggable tag="ul" :list="selectedWidget.tabs"
+                 v-bind="{group:'panesGroup', ghostClass: 'ghost', handle: '.drag-option'}">
+        <li v-for="(tpItem, tpIdx) in selectedWidget.tabs" :key="tpIdx" class="col-item">
+          <!-- span style="margin-right: 12px">{{tpIdx + 1}}</span -->
+          <el-checkbox v-model="tpItem.options.active" disabled @change="(evt) => onTabPaneActiveChange(evt, tpItem)"
+                       style="margin-right: 8px">{{i18nt('designer.setting.paneActive')}}</el-checkbox>
+          <el-input type="text" v-model="tpItem.options.label" style="width: 155px"></el-input>
+          <i class="iconfont icon-drag drag-option"></i>
+          <el-button circle plain size="mini" type="danger" @click="deleteTabPane(selectedWidget, tpIdx)"
+                     icon="el-icon-minus" class="col-delete-button"></el-button>
+        </li>
+        <div>
+          <el-button type="text" @click="addTabPane(selectedWidget)">{{i18nt('designer.setting.addTabPane')}}</el-button>
+        </div>
+      </draggable>
+    </el-form-item>
+  </div>
+</template>
+
+<script>
+  import i18n from "@/utils/i18n"
+  import Draggable from 'vuedraggable'
+  import {deepClone} from "@/utils/util";
+
+  export default {
+    name: "tab-customClass-editor",
+    componentName: 'PropertyEditor',
+    mixins: [i18n],
+    components: {
+      Draggable,
+    },
+    props: {
+      designer: Object,
+      selectedWidget: Object,
+      optionModel: Object,
+    },
+    data() {
+      return {
+        cssClassList: [],
+      }
+    },
+    created() {
+      this.cssClassList = deepClone(this.designer.getCssClassList())
+      //监听表单css代码改动事件并重新加载！
+      this.designer.handleEvent('form-css-updated', (cssClassList) => {
+        this.cssClassList = cssClassList
+      })
+    },
+    methods: {
+      onTabPaneActiveChange(evt, tpItem) {
+        //TODO: !!!
+      },
+
+      addTabPane(curTabs) {
+        this.designer.addTabPaneOfTabs(curTabs)
+        this.designer.emitHistoryChange()
+      },
+
+      deleteTabPane(curTabs, tpIdx) {
+        if (curTabs.tabs.length === 1) {
+          this.$message.info(this.i18nt('designer.hint.lastPaneCannotBeDeleted'))
+          return
+        }
+
+        this.designer.deleteTabPaneOfTabs(curTabs, tpIdx)
+        this.designer.emitHistoryChange()
+      },
+
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  li.col-item {
+    list-style: none;
+
+    span.col-span-title {
+      display: inline-block;
+      font-size: 13px;
+      width: 120px;
+    }
+
+    .col-delete-button {
+      margin-left: 6px;
+    }
+  }
+
+  .panes-setting {
+    ul {
+      padding-inline-start: 0;
+      padding-left: 0; /* 重置IE11默认样式 */
+      margin: 0;
+    }
+
+    .drag-option {
+      cursor: move;
+    }
+
+    li.ghost {
+      background: #fff;
+      border: 2px dotted $--color-primary;
+    }
+  }
+
+</style>
diff --git a/src/components/form-designer/setting-panel/property-editor/container-table-cell/cellHeight-editor.vue b/src/components/form-designer/setting-panel/property-editor/container-table-cell/cellHeight-editor.vue
new file mode 100644
index 0000000..0fab2bf
--- /dev/null
+++ b/src/components/form-designer/setting-panel/property-editor/container-table-cell/cellHeight-editor.vue
@@ -0,0 +1,23 @@
+<template>
+  <el-form-item :label="i18nt('designer.setting.cellHeight')">
+    <el-input type="text" v-model="optionModel.cellHeight"></el-input>
+  </el-form-item>
+</template>
+
+<script>
+  import i18n from "@/utils/i18n"
+
+  export default {
+    name: "cellHeight-editor",
+    mixins: [i18n],
+    props: {
+      designer: Object,
+      selectedWidget: Object,
+      optionModel: Object,
+    },
+  }
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/components/form-designer/setting-panel/property-editor/container-table-cell/cellWidth-editor.vue b/src/components/form-designer/setting-panel/property-editor/container-table-cell/cellWidth-editor.vue
new file mode 100644
index 0000000..f2fad36
--- /dev/null
+++ b/src/components/form-designer/setting-panel/property-editor/container-table-cell/cellWidth-editor.vue
@@ -0,0 +1,23 @@
+<template>
+  <el-form-item :label="i18nt('designer.setting.cellWidth')">
+    <el-input type="text" v-model="optionModel.cellWidth"></el-input>
+  </el-form-item>
+</template>
+
+<script>
+  import i18n from "@/utils/i18n"
+
+  export default {
+    name: "cellWidth-editor",
+    mixins: [i18n],
+    props: {
+      designer: Object,
+      selectedWidget: Object,
+      optionModel: Object,
+    },
+  }
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/components/form-designer/setting-panel/property-editor/customClass-editor.vue b/src/components/form-designer/setting-panel/property-editor/customClass-editor.vue
new file mode 100644
index 0000000..d0042a7
--- /dev/null
+++ b/src/components/form-designer/setting-panel/property-editor/customClass-editor.vue
@@ -0,0 +1,40 @@
+<template>
+  <el-form-item :label="i18nt('designer.setting.customClass')">
+    <el-select v-model="optionModel.customClass" multiple filterable allow-create
+               default-first-option>
+      <el-option v-for="(item, idx) in cssClassList" :key="idx" :label="item" :value="item"></el-option>
+    </el-select>
+  </el-form-item>
+</template>
+
+<script>
+  import i18n from "@/utils/i18n";
+  import {deepClone} from "@/utils/util";
+
+  export default {
+    name: "customClass-editor",
+    componentName: 'PropertyEditor',
+    mixins: [i18n],
+    props: {
+      designer: Object,
+      selectedWidget: Object,
+      optionModel: Object,
+    },
+    data() {
+      return {
+        cssClassList: [],
+      }
+    },
+    created() {
+      this.cssClassList = deepClone(this.designer.getCssClassList())
+      //监听表单css代码改动事件并重新加载！
+      this.designer.handleEvent('form-css-updated', (cssClassList) => {
+        this.cssClassList = cssClassList
+      })
+    }
+  }
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/components/form-designer/setting-panel/property-editor/defaultValue-editor.vue b/src/components/form-designer/setting-panel/property-editor/defaultValue-editor.vue
new file mode 100644
index 0000000..2ccda17
--- /dev/null
+++ b/src/components/form-designer/setting-panel/property-editor/defaultValue-editor.vue
@@ -0,0 +1,25 @@
+<template>
+  <el-form-item :label="i18nt('designer.setting.defaultValue')">
+    <el-input v-if="!hasConfig('optionItems')" type="text" v-model="optionModel.defaultValue"
+              @change="emitDefaultValueChange"></el-input>
+  </el-form-item>
+</template>
+
+<script>
+  import i18n from "@/utils/i18n"
+  import propertyMixin from "@/components/form-designer/setting-panel/property-editor/propertyMixin"
+
+  export default {
+    name: "defaultValue-editor",
+    mixins: [i18n, propertyMixin],
+    props: {
+      designer: Object,
+      selectedWidget: Object,
+      optionModel: Object,
+    },
+  }
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/components/form-designer/setting-panel/property-editor/disabled-editor.vue b/src/components/form-designer/setting-panel/property-editor/disabled-editor.vue
new file mode 100644
index 0000000..a25eaca
--- /dev/null
+++ b/src/components/form-designer/setting-panel/property-editor/disabled-editor.vue
@@ -0,0 +1,23 @@
+<template>
+  <el-form-item :label="i18nt('designer.setting.disabled')">
+    <el-checkbox v-model="optionModel.disabled"></el-checkbox>
+  </el-form-item>
+</template>
+
+<script>
+  import i18n from "@/utils/i18n"
+
+  export default {
+    name: "disabled-editor",
+    mixins: [i18n],
+    props: {
+      designer: Object,
+      selectedWidget: Object,
+      optionModel: Object,
+    },
+  }
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/components/form-designer/setting-panel/property-editor/displayStyle-editor.vue b/src/components/form-designer/setting-panel/property-editor/displayStyle-editor.vue
new file mode 100644
index 0000000..fef5866
--- /dev/null
+++ b/src/components/form-designer/setting-panel/property-editor/displayStyle-editor.vue
@@ -0,0 +1,26 @@
+<template>
+  <el-form-item :label="i18nt('designer.setting.displayStyle')">
+    <el-radio-group v-model="optionModel.displayStyle">
+      <el-radio label="inline">{{i18nt('designer.setting.inlineLayout')}}</el-radio>
+      <el-radio label="block">{{i18nt('designer.setting.blockLayout')}}</el-radio>
+    </el-radio-group>
+  </el-form-item>
+</template>
+
+<script>
+  import i18n from "@/utils/i18n"
+
+  export default {
+    name: "displayStyle-editor",
+    mixins: [i18n],
+    props: {
+      designer: Object,
+      selectedWidget: Object,
+      optionModel: Object,
+    },
+  }
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/components/form-designer/setting-panel/property-editor/editable-editor.vue b/src/components/form-designer/setting-panel/property-editor/editable-editor.vue
new file mode 100644
index 0000000..3f734c5
--- /dev/null
+++ b/src/components/form-designer/setting-panel/property-editor/editable-editor.vue
@@ -0,0 +1,24 @@
+<template>
+  <el-form-item :label="i18nt('designer.setting.editable')">
+    <el-checkbox v-model="optionModel.editable"></el-checkbox>
+  </el-form-item>
+</template>
+
+<script>
+  import i18n from "@/utils/i18n"
+
+  export default {
+    name: "editable-editor",
+    mixins: [i18n],
+    props: {
+      designer: Object,
+      selectedWidget: Object,
+      optionModel: Object,
+    },
+
+  }
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/components/form-designer/setting-panel/property-editor/endPlaceholder-editor.vue b/src/components/form-designer/setting-panel/property-editor/endPlaceholder-editor.vue
new file mode 100644
index 0000000..bfb6a50
--- /dev/null
+++ b/src/components/form-designer/setting-panel/property-editor/endPlaceholder-editor.vue
@@ -0,0 +1,23 @@
+<template>
+  <el-form-item :label="i18nt('designer.setting.endPlaceholder')">
+    <el-input type="text" v-model="optionModel.endPlaceholder"></el-input>
+  </el-form-item>
+</template>
+
+<script>
+  import i18n from "@/utils/i18n"
+
+  export default {
+    name: "endPlaceholder-editor",
+    mixins: [i18n],
+    props: {
+      designer: Object,
+      selectedWidget: Object,
+      optionModel: Object,
+    },
+  }
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/components/form-designer/setting-panel/property-editor/event-handler/eventMixin.js b/src/components/form-designer/setting-panel/property-editor/event-handler/eventMixin.js
new file mode 100644
index 0000000..b056222
--- /dev/null
+++ b/src/components/form-designer/setting-panel/property-editor/event-handler/eventMixin.js
@@ -0,0 +1,19 @@
+import emitter from 'element-ui/lib/mixins/emitter'
+
+export default {
+  mixins: [emitter],
+  created() {
+    // this.$on('saveEventHandler', function (params) {
+    //   //this.optionModel[eventName] = handlerCodes
+    //   this.optionModel[params[0]] = params[1]
+    // })
+
+  },
+  methods: {
+    editEventHandler(eventName, eventParams) {
+      this.dispatch('SettingPanel', 'editEventHandler', [eventName, [...eventParams]])
+    },
+
+
+  }
+}
diff --git a/src/components/form-designer/setting-panel/property-editor/event-handler/onBeforeUpload-editor.vue b/src/components/form-designer/setting-panel/property-editor/event-handler/onBeforeUpload-editor.vue
new file mode 100644
index 0000000..e4355dd
--- /dev/null
+++ b/src/components/form-designer/setting-panel/property-editor/event-handler/onBeforeUpload-editor.vue
@@ -0,0 +1,30 @@
+<template>
+  <el-form-item label="onBeforeUpload" label-width="150px">
+    <el-button type="info" icon="el-icon-edit" plain round @click="editEventHandler('onBeforeUpload', eventParams)">
+      {{i18nt('designer.setting.addEventHandler')}}</el-button>
+  </el-form-item>
+</template>
+
+<script>
+  import i18n from "@/utils/i18n"
+  import eventMixin from "@/components/form-designer/setting-panel/property-editor/event-handler/eventMixin"
+
+  export default {
+    name: "onBeforeUpload-editor",
+    mixins: [i18n, eventMixin],
+    props: {
+      designer: Object,
+      selectedWidget: Object,
+      optionModel: Object,
+    },
+    data() {
+      return {
+        eventParams: ['file'],
+      }
+    }
+  }
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/components/form-designer/setting-panel/property-editor/event-handler/onBlur-editor.vue b/src/components/form-designer/setting-panel/property-editor/event-handler/onBlur-editor.vue
new file mode 100644
index 0000000..393f7e6
--- /dev/null
+++ b/src/components/form-designer/setting-panel/property-editor/event-handler/onBlur-editor.vue
@@ -0,0 +1,30 @@
+<template>
+  <el-form-item label="onBlur" label-width="150px">
+    <el-button type="info" icon="el-icon-edit" plain round @click="editEventHandler('onBlur', eventParams)">
+      {{i18nt('designer.setting.addEventHandler')}}</el-button>
+  </el-form-item>
+</template>
+
+<script>
+  import i18n from "@/utils/i18n"
+  import eventMixin from "@/components/form-designer/setting-panel/property-editor/event-handler/eventMixin"
+
+  export default {
+    name: "onBlur-editor",
+    mixins: [i18n, eventMixin],
+    props: {
+      designer: Object,
+      selectedWidget: Object,
+      optionModel: Object,
+    },
+    data() {
+      return {
+        eventParams: ['event'],
+      }
+    }
+  }
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/components/form-designer/setting-panel/property-editor/event-handler/onChange-editor.vue b/src/components/form-designer/setting-panel/property-editor/event-handler/onChange-editor.vue
new file mode 100644
index 0000000..8010610
--- /dev/null
+++ b/src/components/form-designer/setting-panel/property-editor/event-handler/onChange-editor.vue
@@ -0,0 +1,30 @@
+<template>
+  <el-form-item label="onChange" label-width="150px">
+    <el-button type="info" icon="el-icon-edit" plain round @click="editEventHandler('onChange', eventParams)">
+      {{i18nt('designer.setting.addEventHandler')}}</el-button>
+  </el-form-item>
+</template>
+
+<script>
+  import i18n from "@/utils/i18n"
+  import eventMixin from "@/components/form-designer/setting-panel/property-editor/event-handler/eventMixin"
+
+  export default {
+    name: "onChange-editor",
+    mixins: [i18n, eventMixin],
+    props: {
+      designer: Object,
+      selectedWidget: Object,
+      optionModel: Object,
+    },
+    data() {
+      return {
+        eventParams: ['value', 'oldValue', 'subFormData', 'rowId'],
+      }
+    }
+  }
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/components/form-designer/setting-panel/property-editor/event-handler/onClick-editor.vue b/src/components/form-designer/setting-panel/property-editor/event-handler/onClick-editor.vue
new file mode 100644
index 0000000..c154bcf
--- /dev/null
+++ b/src/components/form-designer/setting-panel/property-editor/event-handler/onClick-editor.vue
@@ -0,0 +1,30 @@
+<template>
+  <el-form-item label="onClick" label-width="150px">
+    <el-button type="info" icon="el-icon-edit" plain round @click="editEventHandler('onClick', eventParams)">
+      {{i18nt('designer.setting.addEventHandler')}}</el-button>
+  </el-form-item>
+</template>
+
+<script>
+  import i18n from "@/utils/i18n"
+  import eventMixin from "@/components/form-designer/setting-panel/property-editor/event-handler/eventMixin"
+
+  export default {
+    name: "onClick-editor",
+    mixins: [i18n, eventMixin],
+    props: {
+      designer: Object,
+      selectedWidget: Object,
+      optionModel: Object,
+    },
+    data() {
+      return {
+        eventParams: [],
+      }
+    }
+  }
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/components/form-designer/setting-panel/property-editor/event-handler/onCreated-editor.vue b/src/components/form-designer/setting-panel/property-editor/event-handler/onCreated-editor.vue
new file mode 100644
index 0000000..afc1e8c
--- /dev/null
+++ b/src/components/form-designer/setting-panel/property-editor/event-handler/onCreated-editor.vue
@@ -0,0 +1,31 @@
+<template>
+  <el-form-item label="onCreated" label-width="150px">
+    <el-button type="info" icon="el-icon-edit" plain round @click="editEventHandler('onCreated', eventParams)">
+      {{i18nt('designer.setting.addEventHandler')}}</el-button>
+  </el-form-item>
+</template>
+
+<script>
+  import i18n from "@/utils/i18n"
+  import eventMixin from "@/components/form-designer/setting-panel/property-editor/event-handler/eventMixin"
+
+  export default {
+    name: "onCreated-editor",
+    mixins: [i18n, eventMixin],
+    props: {
+      designer: Object,
+      selectedWidget: Object,
+      optionModel: Object,
+    },
+    data() {
+      return {
+        eventParams: [],
+      }
+    }
+
+  }
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/components/form-designer/setting-panel/property-editor/event-handler/onFocus-editor.vue b/src/components/form-designer/setting-panel/property-editor/event-handler/onFocus-editor.vue
new file mode 100644
index 0000000..1c24dad
--- /dev/null
+++ b/src/components/form-designer/setting-panel/property-editor/event-handler/onFocus-editor.vue
@@ -0,0 +1,30 @@
+<template>
+  <el-form-item label="onFocus" label-width="150px">
+    <el-button type="info" icon="el-icon-edit" plain round @click="editEventHandler('onFocus', eventParams)">
+      {{i18nt('designer.setting.addEventHandler')}}</el-button>
+  </el-form-item>
+</template>
+
+<script>
+  import i18n from "@/utils/i18n"
+  import eventMixin from "@/components/form-designer/setting-panel/property-editor/event-handler/eventMixin"
+
+  export default {
+    name: "onFocus-editor",
+    mixins: [i18n, eventMixin],
+    props: {
+      designer: Object,
+      selectedWidget: Object,
+      optionModel: Object,
+    },
+    data() {
+      return {
+        eventParams: ['event'],
+      }
+    }
+  }
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/components/form-designer/setting-panel/property-editor/event-handler/onInput-editor.vue b/src/components/form-designer/setting-panel/property-editor/event-handler/onInput-editor.vue
new file mode 100644
index 0000000..35d4982
--- /dev/null
+++ b/src/components/form-designer/setting-panel/property-editor/event-handler/onInput-editor.vue
@@ -0,0 +1,30 @@
+<template>
+  <el-form-item label="onInput" label-width="150px">
+    <el-button type="info" icon="el-icon-edit" plain round @click="editEventHandler('onInput', eventParams)">
+      {{i18nt('designer.setting.addEventHandler')}}</el-button>
+  </el-form-item>
+</template>
+
+<script>
+  import i18n from "@/utils/i18n"
+  import eventMixin from "@/components/form-designer/setting-panel/property-editor/event-handler/eventMixin"
+
+  export default {
+    name: "onInput-editor",
+    mixins: [i18n, eventMixin],
+    props: {
+      designer: Object,
+      selectedWidget: Object,
+      optionModel: Object,
+    },
+    data() {
+      return {
+        eventParams: ['value'],
+      }
+    }
+  }
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/components/form-designer/setting-panel/property-editor/event-handler/onMounted-editor.vue b/src/components/form-designer/setting-panel/property-editor/event-handler/onMounted-editor.vue
new file mode 100644
index 0000000..bbb8bc6
--- /dev/null
+++ b/src/components/form-designer/setting-panel/property-editor/event-handler/onMounted-editor.vue
@@ -0,0 +1,30 @@
+<template>
+  <el-form-item label="onMounted" label-width="150px">
+    <el-button type="info" icon="el-icon-edit" plain round @click="editEventHandler('onMounted', eventParams)">
+      {{i18nt('designer.setting.addEventHandler')}}</el-button>
+  </el-form-item>
+</template>
+
+<script>
+  import i18n from "@/utils/i18n"
+  import eventMixin from "@/components/form-designer/setting-panel/property-editor/event-handler/eventMixin"
+
+  export default {
+    name: "onMounted-editor",
+    mixins: [i18n, eventMixin],
+    props: {
+      designer: Object,
+      selectedWidget: Object,
+      optionModel: Object,
+    },
+    data() {
+      return {
+        eventParams: [],
+      }
+    }
+  }
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/components/form-designer/setting-panel/property-editor/event-handler/onRemoteQuery-editor.vue b/src/components/form-designer/setting-panel/property-editor/event-handler/onRemoteQuery-editor.vue
new file mode 100644
index 0000000..5275c61
--- /dev/null
+++ b/src/components/form-designer/setting-panel/property-editor/event-handler/onRemoteQuery-editor.vue
@@ -0,0 +1,30 @@
+<template>
+  <el-form-item label="onRemoteQuery" label-width="150px">
+    <el-button type="info" icon="el-icon-edit" plain round @click="editEventHandler('onRemoteQuery', eventParams)">
+      {{i18nt('designer.setting.addEventHandler')}}</el-button>
+  </el-form-item>
+</template>
+
+<script>
+  import i18n from "@/utils/i18n"
+  import eventMixin from "@/components/form-designer/setting-panel/property-editor/event-handler/eventMixin"
+
+  export default {
+    name: "onRemoteQuery-editor",
+    mixins: [i18n, eventMixin],
+    props: {
+      designer: Object,
+      selectedWidget: Object,
+      optionModel: Object,
+    },
+    data() {
+      return {
+        eventParams: ['keyword'],
+      }
+    }
+  }
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/components/form-designer/setting-panel/property-editor/event-handler/onSubFormRowAdd-editor.vue b/src/components/form-designer/setting-panel/property-editor/event-handler/onSubFormRowAdd-editor.vue
new file mode 100644
index 0000000..26abcfe
--- /dev/null
+++ b/src/components/form-designer/setting-panel/property-editor/event-handler/onSubFormRowAdd-editor.vue
@@ -0,0 +1,30 @@
+<template>
+  <el-form-item label="onSubFormRowAdd" label-width="150px">
+    <el-button type="info" icon="el-icon-edit" plain round @click="editEventHandler('onSubFormRowAdd', eventParams)">
+      {{i18nt('designer.setting.addEventHandler')}}</el-button>
+  </el-form-item>
+</template>
+
+<script>
+  import i18n from "@/utils/i18n"
+  import eventMixin from "@/components/form-designer/setting-panel/property-editor/event-handler/eventMixin"
+
+  export default {
+    name: "onSubFormRowAdd-editor",
+    mixins: [i18n, eventMixin],
+    props: {
+      designer: Object,
+      selectedWidget: Object,
+      optionModel: Object,
+    },
+    data() {
+      return {
+        eventParams: ['subFormData', 'newRowId'],
+      }
+    }
+  }
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/components/form-designer/setting-panel/property-editor/event-handler/onSubFormRowChange-editor.vue b/src/components/form-designer/setting-panel/property-editor/event-handler/onSubFormRowChange-editor.vue
new file mode 100644
index 0000000..254638a
--- /dev/null
+++ b/src/components/form-designer/setting-panel/property-editor/event-handler/onSubFormRowChange-editor.vue
@@ -0,0 +1,30 @@
+<template>
+  <el-form-item label="onSubFormRowChange" label-width="150px">
+    <el-button type="info" icon="el-icon-edit" plain round @click="editEventHandler('onSubFormRowChange', eventParams)">
+      {{i18nt('designer.setting.addEventHandler')}}</el-button>
+  </el-form-item>
+</template>
+
+<script>
+  import i18n from "@/utils/i18n"
+  import eventMixin from "@/components/form-designer/setting-panel/property-editor/event-handler/eventMixin"
+
+  export default {
+    name: "onSubFormRowChange-editor",
+    mixins: [i18n, eventMixin],
+    props: {
+      designer: Object,
+      selectedWidget: Object,
+      optionModel: Object,
+    },
+    data() {
+      return {
+        eventParams: ['subFormData'],
+      }
+    }
+  }
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/components/form-designer/setting-panel/property-editor/event-handler/onSubFormRowDelete-editor.vue b/src/components/form-designer/setting-panel/property-editor/event-handler/onSubFormRowDelete-editor.vue
new file mode 100644
index 0000000..8666b9e
--- /dev/null
+++ b/src/components/form-designer/setting-panel/property-editor/event-handler/onSubFormRowDelete-editor.vue
@@ -0,0 +1,30 @@
+<template>
+  <el-form-item label="onSubFormRowDelete" label-width="150px">
+    <el-button type="info" icon="el-icon-edit" plain round @click="editEventHandler('onSubFormRowDelete', eventParams)">
+      {{i18nt('designer.setting.addEventHandler')}}</el-button>
+  </el-form-item>
+</template>
+
+<script>
+  import i18n from "@/utils/i18n"
+  import eventMixin from "@/components/form-designer/setting-panel/property-editor/event-handler/eventMixin"
+
+  export default {
+    name: "onSubFormRowDelete-editor",
+    mixins: [i18n, eventMixin],
+    props: {
+      designer: Object,
+      selectedWidget: Object,
+      optionModel: Object,
+    },
+    data() {
+      return {
+        eventParams: ['subFormData', 'deletedDataRow'],
+      }
+    }
+  }
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/components/form-designer/setting-panel/property-editor/event-handler/onSubFormRowInsert-editor.vue b/src/components/form-designer/setting-panel/property-editor/event-handler/onSubFormRowInsert-editor.vue
new file mode 100644
index 0000000..ed71c3d
--- /dev/null
+++ b/src/components/form-designer/setting-panel/property-editor/event-handler/onSubFormRowInsert-editor.vue
@@ -0,0 +1,30 @@
+<template>
+  <el-form-item label="onSubFormRowInsert" label-width="150px">
+    <el-button type="info" icon="el-icon-edit" plain round @click="editEventHandler('onSubFormRowInsert', eventParams)">
+      {{i18nt('designer.setting.addEventHandler')}}</el-button>
+  </el-form-item>
+</template>
+
+<script>
+  import i18n from "@/utils/i18n"
+  import eventMixin from "@/components/form-designer/setting-panel/property-editor/event-handler/eventMixin"
+
+  export default {
+    name: "onSubFormRowInsert-editor",
+    mixins: [i18n, eventMixin],
+    props: {
+      designer: Object,
+      selectedWidget: Object,
+      optionModel: Object,
+    },
+    data() {
+      return {
+        eventParams: ['subFormData', 'newRowId'],
+      }
+    }
+  }
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/components/form-designer/setting-panel/property-editor/event-handler/onUploadError-editor.vue b/src/components/form-designer/setting-panel/property-editor/event-handler/onUploadError-editor.vue
new file mode 100644
index 0000000..7562f96
--- /dev/null
+++ b/src/components/form-designer/setting-panel/property-editor/event-handler/onUploadError-editor.vue
@@ -0,0 +1,30 @@
+<template>
+  <el-form-item label="onUploadError" label-width="150px">
+    <el-button type="info" icon="el-icon-edit" plain round @click="editEventHandler('onUploadError', eventParams)">
+      {{i18nt('designer.setting.addEventHandler')}}</el-button>
+  </el-form-item>
+</template>
+
+<script>
+  import i18n from "@/utils/i18n"
+  import eventMixin from "@/components/form-designer/setting-panel/property-editor/event-handler/eventMixin"
+
+  export default {
+    name: "onUploadError-editor",
+    mixins: [i18n, eventMixin],
+    props: {
+      designer: Object,
+      selectedWidget: Object,
+      optionModel: Object,
+    },
+    data() {
+      return {
+        eventParams: ['error', 'file', 'fileList'],
+      }
+    }
+  }
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/components/form-designer/setting-panel/property-editor/event-handler/onUploadSuccess-editor.vue b/src/components/form-designer/setting-panel/property-editor/event-handler/onUploadSuccess-editor.vue
new file mode 100644
index 0000000..925f791
--- /dev/null
+++ b/src/components/form-designer/setting-panel/property-editor/event-handler/onUploadSuccess-editor.vue
@@ -0,0 +1,30 @@
+<template>
+  <el-form-item label="onUploadSuccess" label-width="150px">
+    <el-button type="info" icon="el-icon-edit" plain round @click="editEventHandler('onUploadSuccess', eventParams)">
+      {{i18nt('designer.setting.addEventHandler')}}</el-button>
+  </el-form-item>
+</template>
+
+<script>
+  import i18n from "@/utils/i18n"
+  import eventMixin from "@/components/form-designer/setting-panel/property-editor/event-handler/eventMixin"
+
+  export default {
+    name: "onUploadSuccess-editor",
+    mixins: [i18n, eventMixin],
+    props: {
+      designer: Object,
+      selectedWidget: Object,
+      optionModel: Object,
+    },
+    data() {
+      return {
+        eventParams: ['result', 'file', 'fileList'],
+      }
+    }
+  }
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/components/form-designer/setting-panel/property-editor/event-handler/onValidate-editor.vue b/src/components/form-designer/setting-panel/property-editor/event-handler/onValidate-editor.vue
new file mode 100644
index 0000000..44cc2a1
--- /dev/null
+++ b/src/components/form-designer/setting-panel/property-editor/event-handler/onValidate-editor.vue
@@ -0,0 +1,30 @@
+<template>
+  <el-form-item label="onValidate" label-width="150px">
+    <el-button type="info" icon="el-icon-edit" plain round @click="editEventHandler('onValidate', eventParams)">
+      {{i18nt('designer.setting.addEventHandler')}}</el-button>
+  </el-form-item>
+</template>
+
+<script>
+  import i18n from "@/utils/i18n"
+  import eventMixin from "@/components/form-designer/setting-panel/property-editor/event-handler/eventMixin"
+
+  export default {
+    name: "onValidate-editor",
+    mixins: [i18n, eventMixin],
+    props: {
+      designer: Object,
+      selectedWidget: Object,
+      optionModel: Object,
+    },
+    data() {
+      return {
+        eventParams: ['rule', 'value', 'callback'],
+      }
+    }
+  }
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/components/form-designer/setting-panel/property-editor/field-button/button-type-editor.vue b/src/components/form-designer/setting-panel/property-editor/field-button/button-type-editor.vue
new file mode 100644
index 0000000..4bb13de
--- /dev/null
+++ b/src/components/form-designer/setting-panel/property-editor/field-button/button-type-editor.vue
@@ -0,0 +1,32 @@
+<template>
+  <el-form-item :label="i18nt('designer.setting.displayType')">
+    <el-select v-model="optionModel.type">
+      <el-option label="default" value=""></el-option>
+      <el-option label="primary" value="primary"></el-option>
+      <el-option label="success" value="success"></el-option>
+      <el-option label="warning" value="warning"></el-option>
+      <el-option label="danger" value="danger"></el-option>
+      <el-option label="info" value="info"></el-option>
+      <el-option label="text" value="text"></el-option>
+    </el-select>
+  </el-form-item>
+</template>
+
+<script>
+  import i18n from "@/utils/i18n"
+  import propertyMixin from "@/components/form-designer/setting-panel/property-editor/propertyMixin"
+
+  export default {
+    name: "button-type-editor",
+    mixins: [i18n, propertyMixin],
+    props: {
+      designer: Object,
+      selectedWidget: Object,
+      optionModel: Object,
+    },
+  }
+</script>
+
+<style lang="scss" scoped>
+
+</style>
diff --git a/src/components/form-designer/setting-panel/property-editor/field-button/circle-editor.vue b/src/components/form-designer/setting-panel/property-editor/field-button/circle-editor.vue
new file mode 100644
index 0000000..88522d5
--- /dev/null
+++ b/src/components/form-designer/setting-panel/property-editor/field-button/circle-editor.vue
@@ -0,0 +1,23 @@
+<template>
+  <el-form-item :label="i18nt('designer.setting.circle')">
+    <el-checkbox v-model="optionModel.circle"></el-checkbox>
+  </el-form-item>
+</template>
+
+<script>
+  import i18n from "@/utils/i18n";
+
+  export default {
+    name: "circle-editor",
+    mixins: [i18n],
+    props: {
+      designer: Object,
+      selectedWidget: Object,
+      optionModel: Object,
+    },
+  }
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/components/form-designer/setting-panel/property-editor/field-button/icon-editor.vue b/src/components/form-designer/setting-panel/property-editor/field-button/icon-editor.vue
new file mode 100644
index 0000000..177ce68
--- /dev/null
+++ b/src/components/form-designer/setting-panel/property-editor/field-button/icon-editor.vue
@@ -0,0 +1,23 @@
+<template>
+  <el-form-item :label="i18nt('designer.setting.buttonIcon')">
+    <el-input type="text" v-model="optionModel.icon"></el-input>
+  </el-form-item>
+</template>
+
+<script>
+  import i18n from "@/utils/i18n"
+
+  export default {
+    name: "icon-editor",
+    mixins: [i18n],
+    props: {
+      designer: Object,
+      selectedWidget: Object,
+      optionModel: Object,
+    },
+  }
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/components/form-designer/setting-panel/property-editor/field-button/plain-editor.vue b/src/components/form-designer/setting-panel/property-editor/field-button/plain-editor.vue
new file mode 100644
index 0000000..ed25895
--- /dev/null
+++ b/src/components/form-designer/setting-panel/property-editor/field-button/plain-editor.vue
@@ -0,0 +1,24 @@
+<template>
+  <el-form-item :label="i18nt('designer.setting.plain')">
+    <el-checkbox v-model="optionModel.plain"></el-checkbox>
+  </el-form-item>
+</template>
+
+<script>
+  import i18n from "@/utils/i18n"
+
+  export default {
+    name: "plain-editor",
+    mixins: [i18n],
+    props: {
+      designer: Object,
+      selectedWidget: Object,
+      optionModel: Object,
+    },
+
+  }
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/components/form-designer/setting-panel/property-editor/field-button/round-editor.vue b/src/components/form-designer/setting-panel/property-editor/field-button/round-editor.vue
new file mode 100644
index 0000000..8bde2a1
--- /dev/null
+++ b/src/components/form-designer/setting-panel/property-editor/field-button/round-editor.vue
@@ -0,0 +1,23 @@
+<template>
+  <el-form-item :label="i18nt('designer.setting.round')">
+    <el-checkbox v-model="optionModel.round"></el-checkbox>
+  </el-form-item>
+</template>
+
+<script>
+  import i18n from "@/utils/i18n";
+
+  export default {
+    name: "round-editor",
+    mixins: [i18n],
+    props: {
+      designer: Object,
+      selectedWidget: Object,
+      optionModel: Object,
+    },
+  }
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/components/form-designer/setting-panel/property-editor/field-color/color-defaultValue-editor.vue b/src/components/form-designer/setting-panel/property-editor/field-color/color-defaultValue-editor.vue
new file mode 100644
index 0000000..186e558
--- /dev/null
+++ b/src/components/form-designer/setting-panel/property-editor/field-color/color-defaultValue-editor.vue
@@ -0,0 +1,23 @@
+<template>
+  <el-color-picker v-model="optionModel.defaultValue" @change="emitDefaultValueChange">
+  </el-color-picker>
+</template>
+
+<script>
+  import i18n from "@/utils/i18n"
+  import propertyMixin from "@/components/form-designer/setting-panel/property-editor/propertyMixin"
+
+  export default {
+    name: "color-defaultValue-editor",
+    mixins: [i18n, propertyMixin],
+    props: {
+      designer: Object,
+      selectedWidget: Object,
+      optionModel: Object,
+    },
+  }
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/components/form-designer/setting-panel/property-editor/field-date-range/date-range-defaultValue-editor.vue b/src/components/form-designer/setting-panel/property-editor/field-date-range/date-range-defaultValue-editor.vue
new file mode 100644
index 0000000..0bb78d8
--- /dev/null
+++ b/src/components/form-designer/setting-panel/property-editor/field-date-range/date-range-defaultValue-editor.vue
@@ -0,0 +1,24 @@
+<template>
+  <el-date-picker :type="optionModel.type" v-model="optionModel.defaultValue" @change="emitDefaultValueChange"
+                  :format="optionModel.format" :value-format="optionModel.valueFormat" style="width: 100%">
+  </el-date-picker>
+</template>
+
+<script>
+  import i18n from "@/utils/i18n"
+  import propertyMixin from "@/components/form-designer/setting-panel/property-editor/propertyMixin"
+
+  export default {
+    name: "date-range-defaultValue-editor",
+    mixins: [i18n, propertyMixin],
+    props: {
+      designer: Object,
+      selectedWidget: Object,
+      optionModel: Object,
+    },
+  }
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/components/form-designer/setting-panel/property-editor/field-date-range/date-range-format-editor.vue b/src/components/form-designer/setting-panel/property-editor/field-date-range/date-range-format-editor.vue
new file mode 100644
index 0000000..35a0353
--- /dev/null
+++ b/src/components/form-designer/setting-panel/property-editor/field-date-range/date-range-format-editor.vue
@@ -0,0 +1,30 @@
+<template>
+  <el-form-item :label="i18nt('designer.setting.format')">
+    <el-select v-model="optionModel.format" filterable allow-create>
+      <el-option label="yyyy-MM-dd" value="yyyy-MM-dd"></el-option>
+      <el-option label="yyyy/MM/dd" value="yyyy/MM/dd"></el-option>
+      <el-option label="yyyy年MM月dd日" value="yyyy年MM月dd日"></el-option>
+      <el-option label="yyyy-MM-dd HH:mm:ss" value="yyyy-MM-dd HH:mm:ss"></el-option>
+      <el-option label="yyyy-MM-dd hh:mm:ss" value="yyyy-MM-dd hh:mm:ss"></el-option>
+    </el-select>
+  </el-form-item>
+</template>
+
+<script>
+  import i18n from "@/utils/i18n"
+
+  export default {
+    name: "date-range-format-editor",
+    mixins: [i18n],
+    props: {
+      designer: Object,
+      selectedWidget: Object,
+      optionModel: Object,
+    },
+
+  }
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/components/form-designer/setting-panel/property-editor/field-date-range/date-range-type-editor.vue b/src/components/form-designer/setting-panel/property-editor/field-date-range/date-range-type-editor.vue
new file mode 100644
index 0000000..e31e968
--- /dev/null
+++ b/src/components/form-designer/setting-panel/property-editor/field-date-range/date-range-type-editor.vue
@@ -0,0 +1,27 @@
+<template>
+  <el-form-item :label="i18nt('designer.setting.displayType')">
+    <el-select v-model="optionModel.type">
+      <el-option label="daterange" value="daterange"></el-option>
+      <el-option label="datetimerange" value="datetimerange"></el-option>
+      <el-option label="monthrange" value="monthrange"></el-option>
+    </el-select>
+  </el-form-item>
+</template>
+
+<script>
+  import i18n from "@/utils/i18n";
+
+  export default {
+    name: "date-range-type-editor",
+    mixins: [i18n],
+    props: {
+      designer: Object,
+      selectedWidget: Object,
+      optionModel: Object,
+    },
+  }
+</script>
+
+<style lang="scss" scoped>
+
+</style>
diff --git a/src/components/form-designer/setting-panel/property-editor/field-date-range/date-range-valueFormat-editor.vue b/src/components/form-designer/setting-panel/property-editor/field-date-range/date-range-valueFormat-editor.vue
new file mode 100644
index 0000000..bdca28c
--- /dev/null
+++ b/src/components/form-designer/setting-panel/property-editor/field-date-range/date-range-valueFormat-editor.vue
@@ -0,0 +1,26 @@
+<template>
+  <el-form-item :label="i18nt('designer.setting.valueFormat')">
+    <el-select v-model="optionModel.valueFormat" filterable allow-create>
+      <el-option label="yyyy-MM-dd" value="yyyy-MM-dd"></el-option>
+      <el-option label="yyyy-MM-dd HH:mm:ss" value="yyyy-MM-dd HH:mm:ss"></el-option>
+    </el-select>
+  </el-form-item>
+</template>
+
+<script>
+  import i18n from "@/utils/i18n"
+
+  export default {
+    name: "date-range-valueFormat-editor",
+    mixins: [i18n],
+    props: {
+      designer: Object,
+      selectedWidget: Object,
+      optionModel: Object,
+    },
+  }
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/components/form-designer/setting-panel/property-editor/field-date/date-defaultValue-editor.vue b/src/components/form-designer/setting-panel/property-editor/field-date/date-defaultValue-editor.vue
new file mode 100644
index 0000000..30d7de3
--- /dev/null
+++ b/src/components/form-designer/setting-panel/property-editor/field-date/date-defaultValue-editor.vue
@@ -0,0 +1,24 @@
+<template>
+  <el-date-picker :type="optionModel.type" v-model="optionModel.defaultValue" @change="emitDefaultValueChange"
+                  :format="optionModel.format" :value-format="optionModel.valueFormat" style="width: 100%">
+  </el-date-picker>
+</template>
+
+<script>
+  import i18n from "@/utils/i18n"
+  import propertyMixin from "@/components/form-designer/setting-panel/property-editor/propertyMixin"
+
+  export default {
+    name: "date-defaultValue-editor",
+    mixins: [i18n, propertyMixin],
+    props: {
+      designer: Object,
+      selectedWidget: Object,
+      optionModel: Object,
+    },
+  }
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/components/form-designer/setting-panel/property-editor/field-date/date-format-editor.vue b/src/components/form-designer/setting-panel/property-editor/field-date/date-format-editor.vue
new file mode 100644
index 0000000..0a28e69
--- /dev/null
+++ b/src/components/form-designer/setting-panel/property-editor/field-date/date-format-editor.vue
@@ -0,0 +1,30 @@
+<template>
+  <el-form-item :label="i18nt('designer.setting.format')">
+    <el-select v-model="optionModel.format" filterable allow-create>
+      <el-option label="yyyy-MM-dd" value="yyyy-MM-dd"></el-option>
+      <el-option label="yyyy/MM/dd" value="yyyy/MM/dd"></el-option>
+      <el-option label="yyyy年MM月dd日" value="yyyy年MM月dd日"></el-option>
+      <el-option label="yyyy-MM-dd HH:mm:ss" value="yyyy-MM-dd HH:mm:ss"></el-option>
+      <el-option label="yyyy-MM-dd hh:mm:ss" value="yyyy-MM-dd hh:mm:ss"></el-option>
+    </el-select>
+  </el-form-item>
+</template>
+
+<script>
+  import i18n from "@/utils/i18n"
+
+  export default {
+    name: "date-format-editor",
+    mixins: [i18n],
+    props: {
+      designer: Object,
+      selectedWidget: Object,
+      optionModel: Object,
+    },
+
+  }
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/components/form-designer/setting-panel/property-editor/field-date/date-type-editor.vue b/src/components/form-designer/setting-panel/property-editor/field-date/date-type-editor.vue
new file mode 100644
index 0000000..2dcb301
--- /dev/null
+++ b/src/components/form-designer/setting-panel/property-editor/field-date/date-type-editor.vue
@@ -0,0 +1,30 @@
+<template>
+  <el-form-item :label="i18nt('designer.setting.displayType')">
+    <el-select v-model="optionModel.type">
+      <el-option label="datetime" value="datetime"></el-option>
+      <el-option label="date" value="date"></el-option>
+      <el-option label="dates" value="dates"></el-option>
+      <el-option label="year" value="year"></el-option>
+      <el-option label="month" value="month"></el-option>
+      <el-option label="week" value="week"></el-option>
+    </el-select>
+  </el-form-item>
+</template>
+
+<script>
+  import i18n from "@/utils/i18n";
+
+  export default {
+    name: "date-type-editor",
+    mixins: [i18n],
+    props: {
+      designer: Object,
+      selectedWidget: Object,
+      optionModel: Object,
+    },
+  }
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/components/form-designer/setting-panel/property-editor/field-date/date-valueFormat-editor.vue b/src/components/form-designer/setting-panel/property-editor/field-date/date-valueFormat-editor.vue
new file mode 100644
index 0000000..ae5c6f6
--- /dev/null
+++ b/src/components/form-designer/setting-panel/property-editor/field-date/date-valueFormat-editor.vue
@@ -0,0 +1,26 @@
+<template>
+  <el-form-item :label="i18nt('designer.setting.valueFormat')">
+    <el-select v-model="optionModel.valueFormat" filterable allow-create>
+      <el-option label="yyyy-MM-dd" value="yyyy-MM-dd"></el-option>
+      <el-option label="yyyy-MM-dd HH:mm:ss" value="yyyy-MM-dd HH:mm:ss"></el-option>
+    </el-select>
+  </el-form-item>
+</template>
+
+<script>
+  import i18n from "@/utils/i18n"
+
+  export default {
+    name: "date-valueFormat-editor",
+    mixins: [i18n],
+    props: {
+      designer: Object,
+      selectedWidget: Object,
+      optionModel: Object,
+    },
+  }
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/components/form-designer/setting-panel/property-editor/field-divider/contentPosition-editor.vue b/src/components/form-designer/setting-panel/property-editor/field-divider/contentPosition-editor.vue
new file mode 100644
index 0000000..ca21786
--- /dev/null
+++ b/src/components/form-designer/setting-panel/property-editor/field-divider/contentPosition-editor.vue
@@ -0,0 +1,27 @@
+<template>
+  <el-form-item :label="i18nt('designer.setting.contentPosition')">
+    <el-select v-model="optionModel.contentPosition">
+      <el-option label="center" value="center"></el-option>
+      <el-option label="left" value="left"></el-option>
+      <el-option label="right" value="right"></el-option>
+    </el-select>
+  </el-form-item>
+</template>
+
+<script>
+  import i18n from "@/utils/i18n"
+
+  export default {
+    name: "contentPosition-editor",
+    mixins: [i18n],
+    props: {
+      designer: Object,
+      selectedWidget: Object,
+      optionModel: Object,
+    },
+  }
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/components/form-designer/setting-panel/property-editor/field-file-upload/file-upload-fileTypes-editor.vue b/src/components/form-designer/setting-panel/property-editor/field-file-upload/file-upload-fileTypes-editor.vue
new file mode 100644
index 0000000..92b2e89
--- /dev/null
+++ b/src/components/form-designer/setting-panel/property-editor/field-file-upload/file-upload-fileTypes-editor.vue
@@ -0,0 +1,44 @@
+<template>
+  <el-form-item>
+    <span slot="label">{{i18nt('designer.setting.fileTypes')}}
+      <el-tooltip effect="light" :content="i18nt('designer.setting.fileTypesHelp')">
+        <i class="el-icon-info"></i></el-tooltip>
+    </span>
+    <el-select multiple allow-create filterable default-first-option
+               v-model="optionModel.fileTypes" style="width: 100%">
+      <el-option v-for="(ft, ftIdx) in uploadFileTypes"
+                 :key="ftIdx"
+                 :label="ft.label"
+                 :value="ft.value">
+      </el-option>
+    </el-select>
+  </el-form-item>
+</template>
+
+<script>
+  import i18n from "@/utils/i18n"
+
+  export default {
+    name: "fileTypes-editor",
+    mixins: [i18n],
+    props: {
+      designer: Object,
+      selectedWidget: Object,
+      optionModel: Object,
+    },
+    data() {
+      return {
+        uploadFileTypes: [
+          {value: 'doc', label: 'doc'},
+          {value: 'xls', label: 'xls'},
+          {value: 'docx', label: 'docx'},
+          {value: 'xlsx', label: 'xlsx'},
+        ],
+      }
+    }
+  }
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/components/form-designer/setting-panel/property-editor/field-html-text/htmlContent-editor.vue b/src/components/form-designer/setting-panel/property-editor/field-html-text/htmlContent-editor.vue
new file mode 100644
index 0000000..6f9a893
--- /dev/null
+++ b/src/components/form-designer/setting-panel/property-editor/field-html-text/htmlContent-editor.vue
@@ -0,0 +1,23 @@
+<template>
+  <el-form-item :label="i18nt('designer.setting.htmlContent')">
+    <el-input v-model="optionModel.htmlContent"></el-input>
+  </el-form-item>
+</template>
+
+<script>
+  import i18n from "@/utils/i18n"
+
+  export default {
+    name: "htmlContent-editor",
+    mixins: [i18n],
+    props: {
+      designer: Object,
+      selectedWidget: Object,
+      optionModel: Object,
+    },
+  }
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/components/form-designer/setting-panel/property-editor/field-number/controlsPosition-editor.vue b/src/components/form-designer/setting-panel/property-editor/field-number/controlsPosition-editor.vue
new file mode 100644
index 0000000..6cc39e5
--- /dev/null
+++ b/src/components/form-designer/setting-panel/property-editor/field-number/controlsPosition-editor.vue
@@ -0,0 +1,27 @@
+<template>
+  <el-form-item :label="i18nt('designer.setting.controlsPosition')">
+    <el-select v-model="optionModel.controlsPosition">
+      <el-option label="default" value=""></el-option>
+      <el-option label="right" value="right"></el-option>
+    </el-select>
+  </el-form-item>
+</template>
+
+<script>
+  import i18n from "@/utils/i18n"
+
+  export default {
+    name: "controlsPosition-editor",
+    mixins: [i18n],
+    props: {
+      designer: Object,
+      selectedWidget: Object,
+      optionModel: Object,
+    },
+
+  }
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/components/form-designer/setting-panel/property-editor/field-picture-upload/picture-upload-fileTypes-editor.vue b/src/components/form-designer/setting-panel/property-editor/field-picture-upload/picture-upload-fileTypes-editor.vue
new file mode 100644
index 0000000..12457ee
--- /dev/null
+++ b/src/components/form-designer/setting-panel/property-editor/field-picture-upload/picture-upload-fileTypes-editor.vue
@@ -0,0 +1,43 @@
+<template>
+  <el-form-item>
+    <span slot="label">{{i18nt('designer.setting.fileTypes')}}
+      <el-tooltip effect="light" :content="i18nt('designer.setting.fileTypesHelp')">
+        <i class="el-icon-info"></i></el-tooltip>
+    </span>
+    <el-select multiple allow-create filterable default-first-option
+               v-model="optionModel.fileTypes" style="width: 100%">
+      <el-option v-for="(ft, ftIdx) in uploadPictureTypes"
+                 :key="ftIdx"
+                 :label="ft.label"
+                 :value="ft.value">
+      </el-option>
+    </el-select>
+  </el-form-item>
+</template>
+
+<script>
+  import i18n from "@/utils/i18n"
+
+  export default {
+    name: "fileTypes-editor",
+    mixins: [i18n],
+    props: {
+      designer: Object,
+      selectedWidget: Object,
+      optionModel: Object,
+    },
+    data() {
+      return {
+        uploadPictureTypes: [
+          {value: 'jpeg', label: 'JPG'},
+          {value: 'png', label: 'PNG'},
+          {value: 'gif', label: 'GIF'},
+        ],
+      }
+    }
+  }
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/components/form-designer/setting-panel/property-editor/field-rate/allowHalf-editor.vue b/src/components/form-designer/setting-panel/property-editor/field-rate/allowHalf-editor.vue
new file mode 100644
index 0000000..fd80e44
--- /dev/null
+++ b/src/components/form-designer/setting-panel/property-editor/field-rate/allowHalf-editor.vue
@@ -0,0 +1,23 @@
+<template>
+  <el-form-item :label="i18nt('designer.setting.allowHalf')">
+    <el-checkbox v-model="optionModel.allowHalf"></el-checkbox>
+  </el-form-item>
+</template>
+
+<script>
+  import i18n from "@/utils/i18n"
+
+  export default {
+    name: "allowHalf-editor",
+    mixins: [i18n],
+    props: {
+      designer: Object,
+      selectedWidget: Object,
+      optionModel: Object,
+    },
+  }
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/components/form-designer/setting-panel/property-editor/field-rate/highThreshold-editor.vue b/src/components/form-designer/setting-panel/property-editor/field-rate/highThreshold-editor.vue
new file mode 100644
index 0000000..c5fe412
--- /dev/null
+++ b/src/components/form-designer/setting-panel/property-editor/field-rate/highThreshold-editor.vue
@@ -0,0 +1,24 @@
+<template>
+  <el-form-item :label="i18nt('designer.setting.highThreshold')">
+    <el-input-number v-model="optionModel.highThreshold" :min="optionModel.lowThreshold" :max="optionModel.max"
+                     class="hide-spin-button" style="width: 100%"></el-input-number>
+  </el-form-item>
+</template>
+
+<script>
+  import i18n from "@/utils/i18n"
+
+  export default {
+    name: "highThreshold-editor",
+    mixins: [i18n],
+    props: {
+      designer: Object,
+      selectedWidget: Object,
+      optionModel: Object,
+    },
+  }
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/components/form-designer/setting-panel/property-editor/field-rate/lowThreshold-editor.vue b/src/components/form-designer/setting-panel/property-editor/field-rate/lowThreshold-editor.vue
new file mode 100644
index 0000000..00464b2
--- /dev/null
+++ b/src/components/form-designer/setting-panel/property-editor/field-rate/lowThreshold-editor.vue
@@ -0,0 +1,24 @@
+<template>
+  <el-form-item :label="i18nt('designer.setting.lowThreshold')">
+    <el-input-number v-model="optionModel.lowThreshold" :min="1" :max="optionModel.highThreshold"
+                     class="hide-spin-button" style="width: 100%"></el-input-number>
+  </el-form-item>
+</template>
+
+<script>
+  import i18n from "@/utils/i18n"
+
+  export default {
+    name: "lowThreshold-editor",
+    mixins: [i18n],
+    props: {
+      designer: Object,
+      selectedWidget: Object,
+      optionModel: Object,
+    },
+  }
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/components/form-designer/setting-panel/property-editor/field-rate/rate-defaultValue-editor.vue b/src/components/form-designer/setting-panel/property-editor/field-rate/rate-defaultValue-editor.vue
new file mode 100644
index 0000000..7d690b8
--- /dev/null
+++ b/src/components/form-designer/setting-panel/property-editor/field-rate/rate-defaultValue-editor.vue
@@ -0,0 +1,24 @@
+<template>
+  <el-input-number v-model="optionModel.defaultValue" :min="0" :max="optionModel.max" style="width: 100%"
+                   @change="emitDefaultValueChange">
+  </el-input-number>
+</template>
+
+<script>
+  import i18n from "@/utils/i18n"
+  import propertyMixin from "@/components/form-designer/setting-panel/property-editor/propertyMixin"
+
+  export default {
+    name: "rate-defaultValue-editor",
+    mixins: [i18n, propertyMixin],
+    props: {
+      designer: Object,
+      selectedWidget: Object,
+      optionModel: Object,
+    },
+  }
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/components/form-designer/setting-panel/property-editor/field-rate/rate-max-editor.vue b/src/components/form-designer/setting-panel/property-editor/field-rate/rate-max-editor.vue
new file mode 100644
index 0000000..a43c192
--- /dev/null
+++ b/src/components/form-designer/setting-panel/property-editor/field-rate/rate-max-editor.vue
@@ -0,0 +1,25 @@
+<template>
+  <el-form-item :label="i18nt('designer.setting.maxStars')">
+    <el-input-number v-model="optionModel.max" :min="1" :max="10"
+                     class="hide-spin-button" style="width: 100%"></el-input-number>
+  </el-form-item>
+</template>
+
+<script>
+  import i18n from "@/utils/i18n";
+
+  export default {
+    name: "rate-max-editor",
+    mixins: [i18n],
+    props: {
+      designer: Object,
+      selectedWidget: Object,
+      optionModel: Object,
+    },
+
+  }
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/components/form-designer/setting-panel/property-editor/field-rate/showScore-editor.vue b/src/components/form-designer/setting-panel/property-editor/field-rate/showScore-editor.vue
new file mode 100644
index 0000000..6be1b18
--- /dev/null
+++ b/src/components/form-designer/setting-panel/property-editor/field-rate/showScore-editor.vue
@@ -0,0 +1,23 @@
+<template>
+  <el-form-item :label="i18nt('designer.setting.showScore')">
+    <el-checkbox v-model="optionModel.showScore"></el-checkbox>
+  </el-form-item>
+</template>
+
+<script>
+  import i18n from "@/utils/i18n"
+
+  export default {
+    name: "showScore-editor",
+    mixins: [i18n],
+    props: {
+      designer: Object,
+      selectedWidget: Object,
+      optionModel: Object,
+    },
+  }
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/components/form-designer/setting-panel/property-editor/field-rate/showText-editor.vue b/src/components/form-designer/setting-panel/property-editor/field-rate/showText-editor.vue
new file mode 100644
index 0000000..76fa1a8
--- /dev/null
+++ b/src/components/form-designer/setting-panel/property-editor/field-rate/showText-editor.vue
@@ -0,0 +1,23 @@
+<template>
+  <el-form-item :label="i18nt('designer.setting.showText')">
+    <el-checkbox v-model="optionModel.showText"></el-checkbox>
+  </el-form-item>
+</template>
+
+<script>
+  import i18n from "@/utils/i18n"
+
+  export default {
+    name: "showText-editor",
+    mixins: [i18n],
+    props: {
+      designer: Object,
+      selectedWidget: Object,
+      optionModel: Object,
+    },
+  }
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/components/form-designer/setting-panel/property-editor/field-slider/range-editor.vue b/src/components/form-designer/setting-panel/property-editor/field-slider/range-editor.vue
new file mode 100644
index 0000000..3a431b5
--- /dev/null
+++ b/src/components/form-designer/setting-panel/property-editor/field-slider/range-editor.vue
@@ -0,0 +1,23 @@
+<template>
+  <el-form-item :label="i18nt('designer.setting.range')">
+    <el-checkbox v-model="optionModel.range"></el-checkbox>
+  </el-form-item>
+</template>
+
+<script>
+  import i18n from "@/utils/i18n";
+
+  export default {
+    name: "range-editor",
+    mixins: [i18n],
+    props: {
+      designer: Object,
+      selectedWidget: Object,
+      optionModel: Object,
+    },
+  }
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/components/form-designer/setting-panel/property-editor/field-slider/vertical-editor.vue b/src/components/form-designer/setting-panel/property-editor/field-slider/vertical-editor.vue
new file mode 100644
index 0000000..e5f0a19
--- /dev/null
+++ b/src/components/form-designer/setting-panel/property-editor/field-slider/vertical-editor.vue
@@ -0,0 +1,23 @@
+<template>
+  <el-form-item :label="i18nt('designer.setting.vertical')">
+    <el-checkbox v-model="optionModel.vertical"></el-checkbox>
+  </el-form-item>
+</template>
+
+<script>
+  import i18n from "@/utils/i18n"
+
+  export default {
+    name: "vertical-editor",
+    mixins: [i18n],
+    props: {
+      designer: Object,
+      selectedWidget: Object,
+      optionModel: Object,
+    },
+  }
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/components/form-designer/setting-panel/property-editor/field-static-text/textContent-editor.vue b/src/components/form-designer/setting-panel/property-editor/field-static-text/textContent-editor.vue
new file mode 100644
index 0000000..1056131
--- /dev/null
+++ b/src/components/form-designer/setting-panel/property-editor/field-static-text/textContent-editor.vue
@@ -0,0 +1,23 @@
+<template>
+  <el-form-item :label="i18nt('designer.setting.textContent')">
+    <el-input v-model="optionModel.textContent"></el-input>
+  </el-form-item>
+</template>
+
+<script>
+  import i18n from "@/utils/i18n"
+
+  export default {
+    name: "textContent-editor",
+    mixins: [i18n],
+    props: {
+      designer: Object,
+      selectedWidget: Object,
+      optionModel: Object,
+    },
+  }
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/components/form-designer/setting-panel/property-editor/field-switch/activeText-editor.vue b/src/components/form-designer/setting-panel/property-editor/field-switch/activeText-editor.vue
new file mode 100644
index 0000000..ee05395
--- /dev/null
+++ b/src/components/form-designer/setting-panel/property-editor/field-switch/activeText-editor.vue
@@ -0,0 +1,23 @@
+<template>
+  <el-form-item :label="i18nt('designer.setting.activeColor')">
+    <el-color-picker v-model="optionModel.activeColor"></el-color-picker>
+  </el-form-item>
+</template>
+
+<script>
+  import i18n from "@/utils/i18n"
+
+  export default {
+    name: "activeText-editor",
+    mixins: [i18n],
+    props: {
+      designer: Object,
+      selectedWidget: Object,
+      optionModel: Object,
+    },
+  }
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/components/form-designer/setting-panel/property-editor/field-switch/inactiveColor-editor.vue b/src/components/form-designer/setting-panel/property-editor/field-switch/inactiveColor-editor.vue
new file mode 100644
index 0000000..dd4cb5c
--- /dev/null
+++ b/src/components/form-designer/setting-panel/property-editor/field-switch/inactiveColor-editor.vue
@@ -0,0 +1,23 @@
+<template>
+  <el-form-item :label="i18nt('designer.setting.inactiveColor')">
+    <el-color-picker v-model="optionModel.inactiveColor"></el-color-picker>
+  </el-form-item>
+</template>
+
+<script>
+  import i18n from "@/utils/i18n"
+
+  export default {
+    name: "inactiveColor-editor",
+    mixins: [i18n],
+    props: {
+      designer: Object,
+      selectedWidget: Object,
+      optionModel: Object,
+    },
+  }
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/components/form-designer/setting-panel/property-editor/field-switch/switch-defaultValue-editor.vue b/src/components/form-designer/setting-panel/property-editor/field-switch/switch-defaultValue-editor.vue
new file mode 100644
index 0000000..1cd9b67
--- /dev/null
+++ b/src/components/form-designer/setting-panel/property-editor/field-switch/switch-defaultValue-editor.vue
@@ -0,0 +1,23 @@
+<template>
+  <el-switch v-model="optionModel.defaultValue" @change="emitDefaultValueChange"
+             active-text="true" inactive-text="false"></el-switch>
+</template>
+
+<script>
+  import i18n from "@/utils/i18n"
+  import propertyMixin from "@/components/form-designer/setting-panel/property-editor/propertyMixin"
+
+  export default {
+    name: "switch-defaultValue-editor",
+    mixins: [i18n, propertyMixin],
+    props: {
+      designer: Object,
+      selectedWidget: Object,
+      optionModel: Object,
+    },
+  }
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/components/form-designer/setting-panel/property-editor/field-switch/switchWidth-editor.vue b/src/components/form-designer/setting-panel/property-editor/field-switch/switchWidth-editor.vue
new file mode 100644
index 0000000..969f1c9
--- /dev/null
+++ b/src/components/form-designer/setting-panel/property-editor/field-switch/switchWidth-editor.vue
@@ -0,0 +1,23 @@
+<template>
+  <el-form-item :label="i18nt('designer.setting.switchWidth')">
+    <el-input-number v-model="optionModel.switchWidth" style="width: 100%"></el-input-number>
+  </el-form-item>
+</template>
+
+<script>
+  import i18n from "@/utils/i18n"
+
+  export default {
+    name: "switchWidth-editor",
+    mixins: [i18n],
+    props: {
+      designer: Object,
+      selectedWidget: Object,
+      optionModel: Object,
+    },
+  }
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/components/form-designer/setting-panel/property-editor/field-time-range/time-range-defaultValue-editor.vue b/src/components/form-designer/setting-panel/property-editor/field-time-range/time-range-defaultValue-editor.vue
new file mode 100644
index 0000000..fbb04a4
--- /dev/null
+++ b/src/components/form-designer/setting-panel/property-editor/field-time-range/time-range-defaultValue-editor.vue
@@ -0,0 +1,24 @@
+<template>
+  <el-time-picker v-model="optionModel.defaultValue" is-range @change="emitDefaultValueChange"
+                  :format="optionModel.format" value-format="HH:mm:ss" style="width: 100%">
+  </el-time-picker>
+</template>
+
+<script>
+  import i18n from "@/utils/i18n"
+  import propertyMixin from "@/components/form-designer/setting-panel/property-editor/propertyMixin"
+
+  export default {
+    name: "time-range-defaultValue-editor",
+    mixins: [i18n, propertyMixin],
+    props: {
+      designer: Object,
+      selectedWidget: Object,
+      optionModel: Object,
+    },
+  }
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/components/form-designer/setting-panel/property-editor/field-time-range/time-range-format-editor.vue b/src/components/form-designer/setting-panel/property-editor/field-time-range/time-range-format-editor.vue
new file mode 100644
index 0000000..d461dcc
--- /dev/null
+++ b/src/components/form-designer/setting-panel/property-editor/field-time-range/time-range-format-editor.vue
@@ -0,0 +1,27 @@
+<template>
+  <el-form-item :label="i18nt('designer.setting.format')">
+    <el-select v-model="optionModel.format" filterable allow-create>
+      <el-option label="HH:mm:ss" value="HH:mm:ss"></el-option>
+      <el-option label="HH时mm分ss秒" value="HH时mm分ss秒"></el-option>
+      <el-option label="hh:mm:ss" value="hh:mm:ss"></el-option>
+    </el-select>
+  </el-form-item>
+</template>
+
+<script>
+  import i18n from "@/utils/i18n"
+
+  export default {
+    name: "time-range-format-editor",
+    mixins: [i18n],
+    props: {
+      designer: Object,
+      selectedWidget: Object,
+      optionModel: Object,
+    },
+  }
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/components/form-designer/setting-panel/property-editor/field-time/time-defaultValue-editor.vue b/src/components/form-designer/setting-panel/property-editor/field-time/time-defaultValue-editor.vue
new file mode 100644
index 0000000..d619b88
--- /dev/null
+++ b/src/components/form-designer/setting-panel/property-editor/field-time/time-defaultValue-editor.vue
@@ -0,0 +1,24 @@
+<template>
+  <el-time-picker v-model="optionModel.defaultValue" @change="emitDefaultValueChange"
+                  :format="optionModel.format" value-format="HH:mm:ss" style="width: 100%">
+  </el-time-picker>
+</template>
+
+<script>
+  import i18n from "@/utils/i18n"
+  import propertyMixin from "@/components/form-designer/setting-panel/property-editor/propertyMixin"
+
+  export default {
+    name: "time-defaultValue-editor",
+    mixins: [i18n, propertyMixin],
+    props: {
+      designer: Object,
+      selectedWidget: Object,
+      optionModel: Object,
+    },
+  }
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/components/form-designer/setting-panel/property-editor/field-time/time-format-editor.vue b/src/components/form-designer/setting-panel/property-editor/field-time/time-format-editor.vue
new file mode 100644
index 0000000..6ffe0bc
--- /dev/null
+++ b/src/components/form-designer/setting-panel/property-editor/field-time/time-format-editor.vue
@@ -0,0 +1,27 @@
+<template>
+  <el-form-item :label="i18nt('designer.setting.format')">
+    <el-select v-model="optionModel.format" filterable allow-create>
+      <el-option label="HH:mm:ss" value="HH:mm:ss"></el-option>
+      <el-option label="HH时mm分ss秒" value="HH时mm分ss秒"></el-option>
+      <el-option label="hh:mm:ss" value="hh:mm:ss"></el-option>
+    </el-select>
+  </el-form-item>
+</template>
+
+<script>
+  import i18n from "@/utils/i18n"
+
+  export default {
+    name: "time-format-editor",
+    mixins: [i18n],
+    props: {
+      designer: Object,
+      selectedWidget: Object,
+      optionModel: Object,
+    },
+  }
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/components/form-designer/setting-panel/property-editor/fileMaxSize-editor.vue b/src/components/form-designer/setting-panel/property-editor/fileMaxSize-editor.vue
new file mode 100644
index 0000000..52df908
--- /dev/null
+++ b/src/components/form-designer/setting-panel/property-editor/fileMaxSize-editor.vue
@@ -0,0 +1,23 @@
+<template>
+  <el-form-item :label="i18nt('designer.setting.fileMaxSize')">
+    <el-input-number v-model="optionModel.fileMaxSize" :min="1" class="hide-spin-button" style="width: 100%"></el-input-number>
+  </el-form-item>
+</template>
+
+<script>
+  import i18n from "@/utils/i18n"
+
+  export default {
+    name: "fileMaxSize-editor",
+    mixins: [i18n],
+    props: {
+      designer: Object,
+      selectedWidget: Object,
+      optionModel: Object,
+    },
+  }
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/components/form-designer/setting-panel/property-editor/filterable-editor.vue b/src/components/form-designer/setting-panel/property-editor/filterable-editor.vue
new file mode 100644
index 0000000..b0f9b58
--- /dev/null
+++ b/src/components/form-designer/setting-panel/property-editor/filterable-editor.vue
@@ -0,0 +1,23 @@
+<template>
+  <el-form-item :label="i18nt('designer.setting.filterable')">
+    <el-checkbox v-model="optionModel.filterable"></el-checkbox>
+  </el-form-item>
+</template>
+
+<script>
+  import i18n from "@/utils/i18n"
+
+  export default {
+    name: "filterable-editor",
+    mixins: [i18n],
+    props: {
+      designer: Object,
+      selectedWidget: Object,
+      optionModel: Object,
+    },
+  }
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/components/form-designer/setting-panel/property-editor/hidden-editor.vue b/src/components/form-designer/setting-panel/property-editor/hidden-editor.vue
new file mode 100644
index 0000000..53eb456
--- /dev/null
+++ b/src/components/form-designer/setting-panel/property-editor/hidden-editor.vue
@@ -0,0 +1,23 @@
+<template>
+  <el-form-item :label="i18nt('designer.setting.hidden')">
+    <el-checkbox v-model="optionModel.hidden"></el-checkbox>
+  </el-form-item>
+</template>
+
+<script>
+  import i18n from "@/utils/i18n"
+
+  export default {
+    name: "hidden-editor",
+    mixins: [i18n],
+    props: {
+      designer: Object,
+      selectedWidget: Object,
+      optionModel: Object,
+    },
+  }
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/components/form-designer/setting-panel/property-editor/index.js b/src/components/form-designer/setting-panel/property-editor/index.js
new file mode 100644
index 0000000..918fbdf
--- /dev/null
+++ b/src/components/form-designer/setting-panel/property-editor/index.js
@@ -0,0 +1,10 @@
+const requireComponent = require.context('./', true, /\w+\.vue$/)  //遍历当前目录和子目录
+
+let comps = {}
+
+requireComponent.keys().map(fileName => {
+  let comp = requireComponent(fileName).default;
+  comps[comp.name] = comp
+})
+
+export default comps;
diff --git a/src/components/form-designer/setting-panel/property-editor/label-editor.vue b/src/components/form-designer/setting-panel/property-editor/label-editor.vue
new file mode 100644
index 0000000..cfa112e
--- /dev/null
+++ b/src/components/form-designer/setting-panel/property-editor/label-editor.vue
@@ -0,0 +1,30 @@
+<template>
+  <el-form-item :label="i18nt('designer.setting.label')" v-if="!noLabelSetting">
+    <el-input type="text" v-model="optionModel.label"></el-input>
+  </el-form-item>
+</template>
+
+<script>
+  import i18n from "@/utils/i18n"
+
+  export default {
+    name: "label-editor",
+    mixins: [i18n],
+    props: {
+      designer: Object,
+      selectedWidget: Object,
+      optionModel: Object,
+    },
+    computed: {
+      noLabelSetting() {
+        return (this.selectedWidget.type === 'static-text') || (this.selectedWidget.type === 'html-text')
+        //|| (this.selectedWidget.type === 'divider')
+      },
+
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+
+</style>
diff --git a/src/components/form-designer/setting-panel/property-editor/labelAlign-editor.vue b/src/components/form-designer/setting-panel/property-editor/labelAlign-editor.vue
new file mode 100644
index 0000000..a704ab8
--- /dev/null
+++ b/src/components/form-designer/setting-panel/property-editor/labelAlign-editor.vue
@@ -0,0 +1,42 @@
+<template>
+  <el-form-item :label="i18nt('designer.setting.labelAlign')" v-if="!noLabelSetting && (selectedWidget.type !== 'button')">
+    <el-radio-group v-model="optionModel.labelAlign" class="radio-group-custom">
+      <el-radio-button label="label-left-align">
+        {{i18nt('designer.setting.leftAlign')}}</el-radio-button>
+      <el-radio-button label="label-center-align">
+        {{i18nt('designer.setting.centerAlign')}}</el-radio-button>
+      <el-radio-button label="label-right-align">
+        {{i18nt('designer.setting.rightAlign')}}</el-radio-button>
+    </el-radio-group>
+  </el-form-item>
+</template>
+
+<script>
+  import i18n from "@/utils/i18n"
+
+  export default {
+    name: "labelAlign-editor",
+    mixins: [i18n],
+    props: {
+      designer: Object,
+      selectedWidget: Object,
+      optionModel: Object,
+    },
+    computed: {
+      noLabelSetting() {
+        return (this.selectedWidget.type === 'static-text') || (this.selectedWidget.type === 'html-text')
+        //|| (this.selectedWidget.type === 'divider')
+      },
+
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  .radio-group-custom {
+    ::v-deep .el-radio-button__inner {
+      padding-left: 12px;
+      padding-right: 12px;
+    }
+  }
+</style>
diff --git a/src/components/form-designer/setting-panel/property-editor/labelHidden-editor.vue b/src/components/form-designer/setting-panel/property-editor/labelHidden-editor.vue
new file mode 100644
index 0000000..5225a1b
--- /dev/null
+++ b/src/components/form-designer/setting-panel/property-editor/labelHidden-editor.vue
@@ -0,0 +1,23 @@
+<template>
+  <el-form-item :label="i18nt('designer.setting.labelHidden')">
+    <el-checkbox v-model="optionModel.labelHidden"></el-checkbox>
+  </el-form-item>
+</template>
+
+<script>
+  import i18n from "@/utils/i18n"
+
+  export default {
+    name: "labelHidden-editor",
+    mixins: [i18n],
+    props: {
+      designer: Object,
+      selectedWidget: Object,
+      optionModel: Object,
+    },
+  }
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/components/form-designer/setting-panel/property-editor/labelIconClass-editor.vue b/src/components/form-designer/setting-panel/property-editor/labelIconClass-editor.vue
new file mode 100644
index 0000000..5e32f65
--- /dev/null
+++ b/src/components/form-designer/setting-panel/property-editor/labelIconClass-editor.vue
@@ -0,0 +1,28 @@
+<template>
+  <div>
+    <el-form-item label-width="0">
+      <el-divider class="custom-divider">{{i18nt('designer.setting.customLabelIcon')}}</el-divider>
+    </el-form-item>
+    <el-form-item :label="i18nt('designer.setting.labelIconClass')">
+      <el-input type="text" v-model="optionModel.labelIconClass"></el-input>
+    </el-form-item>
+  </div>
+</template>
+
+<script>
+  import i18n from "@/utils/i18n"
+
+  export default {
+    name: "labelIconClass-editor",
+    mixins: [i18n],
+    props: {
+      designer: Object,
+      selectedWidget: Object,
+      optionModel: Object,
+    },
+  }
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/components/form-designer/setting-panel/property-editor/labelIconPosition-editor.vue b/src/components/form-designer/setting-panel/property-editor/labelIconPosition-editor.vue
new file mode 100644
index 0000000..805c793
--- /dev/null
+++ b/src/components/form-designer/setting-panel/property-editor/labelIconPosition-editor.vue
@@ -0,0 +1,37 @@
+<template>
+  <el-form-item :label="i18nt('designer.setting.labelIconPosition')">
+    <el-select v-model="optionModel.labelIconPosition">
+      <el-option v-for="item in labelIconPosition" :key="item.value" :label="item.label"
+                 :value="item.value">
+      </el-option>
+    </el-select>
+  </el-form-item>
+</template>
+
+<script>
+  import i18n from "@/utils/i18n"
+
+  export default {
+    name: "labelIconPosition-editor",
+    mixins: [i18n],
+    props: {
+      designer: Object,
+      selectedWidget: Object,
+      optionModel: Object,
+    },
+    data() {
+      return {
+        labelIconPosition: [
+          {label: 'front', value: 'front'},
+          {label: 'rear', value: 'rear'},
+        ],
+
+      }
+    },
+
+  }
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/components/form-designer/setting-panel/property-editor/labelTooltip-editor.vue b/src/components/form-designer/setting-panel/property-editor/labelTooltip-editor.vue
new file mode 100644
index 0000000..3ee1308
--- /dev/null
+++ b/src/components/form-designer/setting-panel/property-editor/labelTooltip-editor.vue
@@ -0,0 +1,23 @@
+<template>
+  <el-form-item :label="i18nt('designer.setting.labelTooltip')">
+    <el-input type="text" v-model="optionModel.labelTooltip"></el-input>
+  </el-form-item>
+</template>
+
+<script>
+  import i18n from "@/utils/i18n"
+
+  export default {
+    name: "labelTooltip-editor",
+    mixins: [i18n],
+    props: {
+      designer: Object,
+      selectedWidget: Object,
+      optionModel: Object,
+    },
+  }
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/components/form-designer/setting-panel/property-editor/labelWidth-editor.vue b/src/components/form-designer/setting-panel/property-editor/labelWidth-editor.vue
new file mode 100644
index 0000000..96cedad
--- /dev/null
+++ b/src/components/form-designer/setting-panel/property-editor/labelWidth-editor.vue
@@ -0,0 +1,25 @@
+<template>
+  <el-form-item :label="i18nt('designer.setting.labelWidth')">
+    <el-input type="number" v-model="optionModel.labelWidth" @input.native="inputNumberHandler"
+              min="0" class="hide-spin-button"></el-input>
+  </el-form-item>
+</template>
+
+<script>
+  import i18n from "@/utils/i18n"
+  import propertyMixin from "@/components/form-designer/setting-panel/property-editor/propertyMixin"
+
+  export default {
+    name: "labelWidth-editor",
+    mixins: [i18n, propertyMixin],
+    props: {
+      designer: Object,
+      selectedWidget: Object,
+      optionModel: Object,
+    },
+  }
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/components/form-designer/setting-panel/property-editor/limit-editor.vue b/src/components/form-designer/setting-panel/property-editor/limit-editor.vue
new file mode 100644
index 0000000..b9a64f2
--- /dev/null
+++ b/src/components/form-designer/setting-panel/property-editor/limit-editor.vue
@@ -0,0 +1,24 @@
+<template>
+  <el-form-item :label="i18nt('designer.setting.limit')">
+    <el-input-number v-model="optionModel.limit" :min="1" class="hide-spin-button" style="width: 100%"></el-input-number>
+  </el-form-item>
+</template>
+
+<script>
+  import i18n from "@/utils/i18n"
+
+  export default {
+    name: "limit-editor",
+    mixins: [i18n],
+    props: {
+      designer: Object,
+      selectedWidget: Object,
+      optionModel: Object,
+    },
+
+  }
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/components/form-designer/setting-panel/property-editor/max-editor.vue b/src/components/form-designer/setting-panel/property-editor/max-editor.vue
new file mode 100644
index 0000000..ab5f320
--- /dev/null
+++ b/src/components/form-designer/setting-panel/property-editor/max-editor.vue
@@ -0,0 +1,39 @@
+<template>
+  <el-form-item :label="i18nt('designer.setting.maxValue')">
+    <el-input-number v-model="maxValue" class="hide-spin-button" style="width: 100%"></el-input-number>
+  </el-form-item>
+</template>
+
+<script>
+  import i18n from "@/utils/i18n"
+
+  export default {
+    name: "max-editor",
+    mixins: [i18n],
+    props: {
+      designer: Object,
+      selectedWidget: Object,
+      optionModel: Object,
+    },
+    computed: {
+      maxValue: {
+        get() {
+          return this.optionModel['max']
+        },
+
+        set(newValue) {
+          if (!newValue || isNaN(newValue)) {
+            this.optionModel.max = null
+          } else {
+            this.optionModel.max = Number(newValue)
+          }
+        }
+      },
+
+    }
+  }
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/components/form-designer/setting-panel/property-editor/maxLength-editor.vue b/src/components/form-designer/setting-panel/property-editor/maxLength-editor.vue
new file mode 100644
index 0000000..9545cf4
--- /dev/null
+++ b/src/components/form-designer/setting-panel/property-editor/maxLength-editor.vue
@@ -0,0 +1,40 @@
+<template>
+  <el-form-item :label="i18nt('designer.setting.maxLength')">
+    <el-input type="number" @input.native="inputNumberHandler" class="hide-spin-button"
+              min="1" v-model="maxLength" style="width: 100%"></el-input>
+  </el-form-item>
+</template>
+
+<script>
+  import i18n from "@/utils/i18n"
+  import propertyMixin from "@/components/form-designer/setting-panel/property-editor/propertyMixin"
+
+  export default {
+    name: "maxLength-editor",
+    mixins: [i18n, propertyMixin],
+    props: {
+      designer: Object,
+      selectedWidget: Object,
+      optionModel: Object,
+    },
+    computed: {
+      maxLength: {
+        get() {
+          return this.optionModel['maxLength']
+        },
+
+        set(newValue) {
+          if (!newValue || isNaN(newValue)) {
+            this.optionModel.maxLength = null
+          } else {
+            this.optionModel.maxLength = Number(newValue)
+          }
+        }
+      },
+    }
+  }
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/components/form-designer/setting-panel/property-editor/min-editor.vue b/src/components/form-designer/setting-panel/property-editor/min-editor.vue
new file mode 100644
index 0000000..513fd24
--- /dev/null
+++ b/src/components/form-designer/setting-panel/property-editor/min-editor.vue
@@ -0,0 +1,40 @@
+<template>
+  <el-form-item :label="i18nt('designer.setting.minValue')">
+    <el-input-number v-model="minValue" class="hide-spin-button" style="width: 100%"></el-input-number>
+  </el-form-item>
+</template>
+
+<script>
+  import i18n from "@/utils/i18n"
+
+  export default {
+    name: "min-editor",
+    mixins: [i18n],
+    props: {
+      designer: Object,
+      selectedWidget: Object,
+      optionModel: Object,
+    },
+    computed: {
+      minValue: {
+        get() {
+          return this.optionModel['min']
+        },
+
+        set(newValue) {
+          //if ((!newValue && (newValue !== 0)) || isNaN(newValue)) {
+          if ((newValue === undefined) || (newValue === null) || isNaN(newValue)) {
+            this.optionModel.min = null
+          } else {
+            this.optionModel.min = Number(newValue)
+          }
+        }
+      },
+
+    },
+  }
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/components/form-designer/setting-panel/property-editor/minLength-editor.vue b/src/components/form-designer/setting-panel/property-editor/minLength-editor.vue
new file mode 100644
index 0000000..1b0e2e4
--- /dev/null
+++ b/src/components/form-designer/setting-panel/property-editor/minLength-editor.vue
@@ -0,0 +1,41 @@
+<template>
+  <el-form-item :label="i18nt('designer.setting.minLength')">
+    <el-input type="number" @input.native="inputNumberHandler" class="hide-spin-button"
+              min="0" v-model="minLength" style="width: 100%"></el-input>
+  </el-form-item>
+</template>
+
+<script>
+  import i18n from "@/utils/i18n"
+  import propertyMixin from "@/components/form-designer/setting-panel/property-editor/propertyMixin"
+
+  export default {
+    name: "minLength-editor",
+    mixins: [i18n, propertyMixin],
+    props: {
+      designer: Object,
+      selectedWidget: Object,
+      optionModel: Object,
+    },
+    computed: {
+      minLength: {
+        get() {
+          return this.optionModel['minLength']
+        },
+
+        set(newValue) {
+          if (!newValue || isNaN(newValue)) {
+            this.optionModel.minLength = null
+          } else {
+            this.optionModel.minLength = Number(newValue)
+          }
+        }
+      },
+
+    }
+  }
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/components/form-designer/setting-panel/property-editor/multiple-editor.vue b/src/components/form-designer/setting-panel/property-editor/multiple-editor.vue
new file mode 100644
index 0000000..48fde31
--- /dev/null
+++ b/src/components/form-designer/setting-panel/property-editor/multiple-editor.vue
@@ -0,0 +1,24 @@
+<template>
+  <el-form-item :label="i18nt('designer.setting.multiple')">
+    <el-checkbox v-model="optionModel.multiple" @change="onMultipleSelected"></el-checkbox>
+  </el-form-item>
+</template>
+
+<script>
+  import i18n from "@/utils/i18n"
+  import propertyMixin from "@/components/form-designer/setting-panel/property-editor/propertyMixin"
+
+  export default {
+    name: "multiple-editor",
+    mixins: [i18n, propertyMixin],
+    props: {
+      designer: Object,
+      selectedWidget: Object,
+      optionModel: Object,
+    },
+  }
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/components/form-designer/setting-panel/property-editor/multipleLimit-editor.vue b/src/components/form-designer/setting-panel/property-editor/multipleLimit-editor.vue
new file mode 100644
index 0000000..3fae0c7
--- /dev/null
+++ b/src/components/form-designer/setting-panel/property-editor/multipleLimit-editor.vue
@@ -0,0 +1,24 @@
+<template>
+  <el-form-item :label="i18nt('designer.setting.multipleLimit')">
+    <el-input-number v-model="optionModel.multipleLimit" :min="0"
+                     class="hide-spin-button" style="width: 100%"></el-input-number>
+  </el-form-item>
+</template>
+
+<script>
+  import i18n from "@/utils/i18n"
+
+  export default {
+    name: "multipleLimit-editor",
+    mixins: [i18n],
+    props: {
+      designer: Object,
+      selectedWidget: Object,
+      optionModel: Object,
+    },
+  }
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/components/form-designer/setting-panel/property-editor/multipleSelect-editor.vue b/src/components/form-designer/setting-panel/property-editor/multipleSelect-editor.vue
new file mode 100644
index 0000000..0d2b7fc
--- /dev/null
+++ b/src/components/form-designer/setting-panel/property-editor/multipleSelect-editor.vue
@@ -0,0 +1,24 @@
+<template>
+  <el-form-item :label="i18nt('designer.setting.multipleSelect')">
+    <el-checkbox v-model="optionModel.multipleSelect"></el-checkbox>
+  </el-form-item>
+</template>
+
+<script>
+  import i18n from "@/utils/i18n";
+
+  export default {
+    name: "multipleSelect-editor",
+    mixins: [i18n],
+    props: {
+      designer: Object,
+      selectedWidget: Object,
+      optionModel: Object,
+    },
+
+  }
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/components/form-designer/setting-panel/property-editor/name-editor.vue b/src/components/form-designer/setting-panel/property-editor/name-editor.vue
new file mode 100644
index 0000000..73e9b3d
--- /dev/null
+++ b/src/components/form-designer/setting-panel/property-editor/name-editor.vue
@@ -0,0 +1,57 @@
+<template>
+  <el-form-item :label="i18nt('designer.setting.fieldName')" :rules="nameRequiredRule">
+    <el-input type="text" v-model="optionModel.name" @change="updateWidgetNameAndRef"></el-input>
+  </el-form-item>
+</template>
+
+<script>
+  import i18n from "@/utils/i18n"
+  import {isEmptyStr} from "@/utils/util"
+
+  export default {
+    name: "name-editor",
+    mixins: [i18n],
+    props: {
+      designer: Object,
+      selectedWidget: Object,
+      optionModel: Object,
+    },
+    data() {
+      return {
+        nameRequiredRule: [{required: true, message: 'name required'}],
+      }
+    },
+    methods: {
+      updateWidgetNameAndRef(newName) {
+        let oldName = this.designer.selectedWidgetName
+        if (isEmptyStr(newName)) {
+          this.selectedWidget.options.name = oldName
+          this.$message.info(this.i18nt('designer.hint.nameRequired'))
+          return
+        }
+
+        if (!!this.designer.formWidget) {
+          //检查newName是否已存在！！
+          let foundRef = this.designer.formWidget.getWidgetRef(newName)
+          if (!!foundRef) {
+            this.selectedWidget.options.name = oldName
+            this.$message.info(this.i18nt('designer.hint.duplicateName') + newName)
+            return
+          }
+
+          let fieldWidget = this.designer.formWidget.getWidgetRef(oldName)
+          if (!!fieldWidget && !!fieldWidget.registerToRefList) {
+            fieldWidget.registerToRefList(oldName)
+            this.designer.updateSelectedWidgetNameAndRef(this.selectedWidget, newName)
+          }
+        }
+      },
+
+
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+
+</style>
diff --git a/src/components/form-designer/setting-panel/property-editor/optionItems-editor.vue b/src/components/form-designer/setting-panel/property-editor/optionItems-editor.vue
new file mode 100644
index 0000000..d911453
--- /dev/null
+++ b/src/components/form-designer/setting-panel/property-editor/optionItems-editor.vue
@@ -0,0 +1,28 @@
+<template>
+  <el-form-item label-width="0">
+    <el-divider class="custom-divider-margin-top">{{i18nt('designer.setting.optionsSetting')}}</el-divider>
+    <option-items-setting :designer="designer" :selected-widget="selectedWidget"></option-items-setting>
+  </el-form-item>
+</template>
+
+<script>
+  import i18n from "@/utils/i18n"
+  import OptionItemsSetting from "@/components/form-designer/setting-panel/option-items-setting"
+
+  export default {
+    name: "optionItems-editor",
+    mixins: [i18n],
+    props: {
+      designer: Object,
+      selectedWidget: Object,
+      optionModel: Object,
+    },
+    components: {
+      OptionItemsSetting,
+    }
+  }
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/components/form-designer/setting-panel/property-editor/placeholder-editor.vue b/src/components/form-designer/setting-panel/property-editor/placeholder-editor.vue
new file mode 100644
index 0000000..e44ff8e
--- /dev/null
+++ b/src/components/form-designer/setting-panel/property-editor/placeholder-editor.vue
@@ -0,0 +1,24 @@
+<template>
+  <el-form-item :label="i18nt('designer.setting.placeholder')">
+    <el-input type="text" v-model="optionModel.placeholder"></el-input>
+  </el-form-item>
+</template>
+
+<script>
+  import i18n from "@/utils/i18n"
+  import propertyMixin from "@/components/form-designer/setting-panel/property-editor/propertyMixin"
+
+  export default {
+    name: "placeholder-editor",
+    mixins: [i18n, propertyMixin],
+    props: {
+      designer: Object,
+      selectedWidget: Object,
+      optionModel: Object,
+    },
+  }
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/components/form-designer/setting-panel/property-editor/precision-editor.vue b/src/components/form-designer/setting-panel/property-editor/precision-editor.vue
new file mode 100644
index 0000000..4e64878
--- /dev/null
+++ b/src/components/form-designer/setting-panel/property-editor/precision-editor.vue
@@ -0,0 +1,23 @@
+<template>
+  <el-form-item :label="i18nt('designer.setting.precision')">
+    <el-input-number v-model="optionModel.precision" :min="0" class="hide-spin-button" style="width: 100%"></el-input-number>
+  </el-form-item>
+</template>
+
+<script>
+  import i18n from "@/utils/i18n"
+
+  export default {
+    name: "precision-editor",
+    mixins: [i18n],
+    props: {
+      designer: Object,
+      selectedWidget: Object,
+      optionModel: Object,
+    },
+  }
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/components/form-designer/setting-panel/property-editor/prefixIcon-editor.vue b/src/components/form-designer/setting-panel/property-editor/prefixIcon-editor.vue
new file mode 100644
index 0000000..361ff3a
--- /dev/null
+++ b/src/components/form-designer/setting-panel/property-editor/prefixIcon-editor.vue
@@ -0,0 +1,23 @@
+<template>
+  <el-form-item :label="i18nt('designer.setting.prefixIcon')">
+    <el-input type="text" v-model="optionModel.prefixIcon"></el-input>
+  </el-form-item>
+</template>
+
+<script>
+  import i18n from "@/utils/i18n";
+
+  export default {
+    name: "prefixIcon-editor",
+    mixins: [i18n],
+    props: {
+      designer: Object,
+      selectedWidget: Object,
+      optionModel: Object,
+    },
+  }
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/components/form-designer/setting-panel/property-editor/propertyMixin.js b/src/components/form-designer/setting-panel/property-editor/propertyMixin.js
new file mode 100644
index 0000000..2ef6a42
--- /dev/null
+++ b/src/components/form-designer/setting-panel/property-editor/propertyMixin.js
@@ -0,0 +1,47 @@
+export default {
+  methods: {
+    hasConfig(configName) {
+      if (!this.designer || !this.designer.selectedWidget) {
+        return false
+      }
+
+      return this.designer.hasConfig(this.selectedWidget, configName)
+    },
+
+    emitDefaultValueChange() {
+      if (!!this.designer) {
+        if (!!this.designer.formWidget) {
+          let fieldWidget = this.designer.formWidget.getWidgetRef(this.designer.selectedWidget.options.name)
+          if (!!fieldWidget && !!fieldWidget.refreshDefaultValue) {
+            fieldWidget.refreshDefaultValue()
+          }
+        }
+      }
+    },
+
+    inputNumberHandler({target}) {
+      target.value = target.value.replace(/[^0-9]/gi, '')
+    },
+
+    onRemoteChange(val) {
+      if (!!val) {
+        this.optionModel.filterable = true
+        this.optionModel.allowCreate = false
+      }
+    },
+
+    onMultipleSelected(val) {
+      if (val) {
+        this.optionModel.defaultValue = []  //清空原默认值!!
+      } else {
+        if (!!this.optionModel.defaultValue && (this.optionModel.defaultValue.length > 0)) {
+          this.optionModel.defaultValue = this.optionModel.defaultValue[0]
+        } else {
+          this.optionModel.defaultValue = ''
+        }
+      }
+    },
+
+
+  }
+}
diff --git a/src/components/form-designer/setting-panel/property-editor/readonly-editor.vue b/src/components/form-designer/setting-panel/property-editor/readonly-editor.vue
new file mode 100644
index 0000000..7ff8bfd
--- /dev/null
+++ b/src/components/form-designer/setting-panel/property-editor/readonly-editor.vue
@@ -0,0 +1,23 @@
+<template>
+  <el-form-item :label="i18nt('designer.setting.readonly')">
+    <el-checkbox v-model="optionModel.readonly"></el-checkbox>
+  </el-form-item>
+</template>
+
+<script>
+  import i18n from "@/utils/i18n"
+
+  export default {
+    name: "readonly-editor",
+    mixins: [i18n],
+    props: {
+      designer: Object,
+      selectedWidget: Object,
+      optionModel: Object,
+    },
+  }
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/components/form-designer/setting-panel/property-editor/remote-editor.vue b/src/components/form-designer/setting-panel/property-editor/remote-editor.vue
new file mode 100644
index 0000000..2cf2582
--- /dev/null
+++ b/src/components/form-designer/setting-panel/property-editor/remote-editor.vue
@@ -0,0 +1,25 @@
+<template>
+  <el-form-item :label="i18nt('designer.setting.remote')">
+    <el-checkbox v-model="optionModel.remote" @change="onRemoteChange"></el-checkbox>
+  </el-form-item>
+</template>
+
+<script>
+  import i18n from "@/utils/i18n"
+  import propertyMixin from "@/components/form-designer/setting-panel/property-editor/propertyMixin"
+
+  export default {
+    name: "remote-editor",
+    mixins: [i18n, propertyMixin],
+    props: {
+      designer: Object,
+      selectedWidget: Object,
+      optionModel: Object,
+    },
+
+  }
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/components/form-designer/setting-panel/property-editor/required-editor.vue b/src/components/form-designer/setting-panel/property-editor/required-editor.vue
new file mode 100644
index 0000000..6684f39
--- /dev/null
+++ b/src/components/form-designer/setting-panel/property-editor/required-editor.vue
@@ -0,0 +1,23 @@
+<template>
+  <el-form-item :label="i18nt('designer.setting.required')">
+    <el-checkbox v-model="optionModel.required"></el-checkbox>
+  </el-form-item>
+</template>
+
+<script>
+  import i18n from "@/utils/i18n"
+
+  export default {
+    name: "required-editor",
+    mixins: [i18n],
+    props: {
+      designer: Object,
+      selectedWidget: Object,
+      optionModel: Object,
+    },
+  }
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/components/form-designer/setting-panel/property-editor/rows-editor.vue b/src/components/form-designer/setting-panel/property-editor/rows-editor.vue
new file mode 100644
index 0000000..dafd688
--- /dev/null
+++ b/src/components/form-designer/setting-panel/property-editor/rows-editor.vue
@@ -0,0 +1,24 @@
+<template>
+  <el-form-item :label="i18nt('designer.setting.rows')">
+    <el-input-number v-model="optionModel.rows" style="width: 100%"></el-input-number>
+  </el-form-item>
+</template>
+
+<script>
+  import i18n from "@/utils/i18n"
+
+  export default {
+    name: "rows-editor",
+    mixins: [i18n],
+    props: {
+      designer: Object,
+      selectedWidget: Object,
+      optionModel: Object,
+    },
+
+  }
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/components/form-designer/setting-panel/property-editor/showFileList-editor.vue b/src/components/form-designer/setting-panel/property-editor/showFileList-editor.vue
new file mode 100644
index 0000000..597e1da
--- /dev/null
+++ b/src/components/form-designer/setting-panel/property-editor/showFileList-editor.vue
@@ -0,0 +1,23 @@
+<template>
+  <el-form-item :label="i18nt('designer.setting.showFileList')">
+    <el-checkbox v-model="optionModel.showFileList"></el-checkbox>
+  </el-form-item>
+</template>
+
+<script>
+  import i18n from "@/utils/i18n"
+
+  export default {
+    name: "showFileList-editor",
+    mixins: [i18n],
+    props: {
+      designer: Object,
+      selectedWidget: Object,
+      optionModel: Object,
+    },
+  }
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/components/form-designer/setting-panel/property-editor/showPassword-editor.vue b/src/components/form-designer/setting-panel/property-editor/showPassword-editor.vue
new file mode 100644
index 0000000..38c722f
--- /dev/null
+++ b/src/components/form-designer/setting-panel/property-editor/showPassword-editor.vue
@@ -0,0 +1,24 @@
+<template>
+  <el-form-item :label="i18nt('designer.setting.showPassword')" v-if="optionModel.type === 'password'">
+    <el-checkbox v-model="optionModel.showPassword"></el-checkbox>
+  </el-form-item>
+</template>
+
+<script>
+  import i18n from "@/utils/i18n";
+
+  export default {
+    name: "showPassword-editor",
+    mixins: [i18n],
+    props: {
+      designer: Object,
+      selectedWidget: Object,
+      optionModel: Object,
+    },
+
+  }
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/components/form-designer/setting-panel/property-editor/showWordLimit-editor.vue b/src/components/form-designer/setting-panel/property-editor/showWordLimit-editor.vue
new file mode 100644
index 0000000..478f349
--- /dev/null
+++ b/src/components/form-designer/setting-panel/property-editor/showWordLimit-editor.vue
@@ -0,0 +1,23 @@
+<template>
+  <el-form-item :label="i18nt('designer.setting.showWordLimit')">
+    <el-checkbox v-model="optionModel.showWordLimit"></el-checkbox>
+  </el-form-item>
+</template>
+
+<script>
+  import i18n from "@/utils/i18n";
+
+  export default {
+    name: "showWordLimit-editor",
+    mixins: [i18n],
+    props: {
+      designer: Object,
+      selectedWidget: Object,
+      optionModel: Object,
+    },
+  }
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/components/form-designer/setting-panel/property-editor/size-editor.vue b/src/components/form-designer/setting-panel/property-editor/size-editor.vue
new file mode 100644
index 0000000..671ceb5
--- /dev/null
+++ b/src/components/form-designer/setting-panel/property-editor/size-editor.vue
@@ -0,0 +1,38 @@
+<template>
+  <el-form-item :label="i18nt('designer.setting.widgetSize')">
+    <el-select v-model="optionModel.size">
+      <el-option v-for="item in widgetSizes" :key="item.value" :label="item.label"
+                 :value="item.value">
+      </el-option>
+    </el-select>
+  </el-form-item>
+</template>
+
+<script>
+  import i18n from "@/utils/i18n"
+
+  export default {
+    name: "size-editor",
+    mixins: [i18n],
+    props: {
+      designer: Object,
+      selectedWidget: Object,
+      optionModel: Object,
+    },
+    data() {
+      return {
+        widgetSizes: [
+          {label: 'default', value: ''},
+          {label: 'large', value: 'large'},
+          {label: 'medium', value: 'medium'},
+          {label: 'small', value: 'small'},
+          {label: 'mini', value: 'mini'},
+        ],
+      }
+    }
+  }
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/components/form-designer/setting-panel/property-editor/startPlaceholder-editor.vue b/src/components/form-designer/setting-panel/property-editor/startPlaceholder-editor.vue
new file mode 100644
index 0000000..c1832a8
--- /dev/null
+++ b/src/components/form-designer/setting-panel/property-editor/startPlaceholder-editor.vue
@@ -0,0 +1,23 @@
+<template>
+  <el-form-item :label="i18nt('designer.setting.startPlaceholder')">
+    <el-input type="text" v-model="optionModel.startPlaceholder"></el-input>
+  </el-form-item>
+</template>
+
+<script>
+  import i18n from "@/utils/i18n"
+
+  export default {
+    name: "startPlaceholder-editor",
+    mixins: [i18n],
+    props: {
+      designer: Object,
+      selectedWidget: Object,
+      optionModel: Object,
+    },
+  }
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/components/form-designer/setting-panel/property-editor/step-editor.vue b/src/components/form-designer/setting-panel/property-editor/step-editor.vue
new file mode 100644
index 0000000..ac64aff
--- /dev/null
+++ b/src/components/form-designer/setting-panel/property-editor/step-editor.vue
@@ -0,0 +1,23 @@
+<template>
+  <el-form-item :label="i18nt('designer.setting.step')">
+    <el-input-number v-model="optionModel.step" class="hide-spin-button" style="width: 100%"></el-input-number>
+  </el-form-item>
+</template>
+
+<script>
+  import i18n from "@/utils/i18n"
+
+  export default {
+    name: "step-editor",
+    mixins: [i18n],
+    props: {
+      designer: Object,
+      selectedWidget: Object,
+      optionModel: Object,
+    },
+  }
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/components/form-designer/setting-panel/property-editor/suffixIcon-editor.vue b/src/components/form-designer/setting-panel/property-editor/suffixIcon-editor.vue
new file mode 100644
index 0000000..6f45b71
--- /dev/null
+++ b/src/components/form-designer/setting-panel/property-editor/suffixIcon-editor.vue
@@ -0,0 +1,23 @@
+<template>
+  <el-form-item :label="i18nt('designer.setting.suffixIcon')">
+    <el-input type="text" v-model="optionModel.suffixIcon"></el-input>
+  </el-form-item>
+</template>
+
+<script>
+  import i18n from "@/utils/i18n";
+
+  export default {
+    name: "suffixIcon-editor",
+    mixins: [i18n],
+    props: {
+      designer: Object,
+      selectedWidget: Object,
+      optionModel: Object,
+    },
+  }
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/components/form-designer/setting-panel/property-editor/type-editor.vue b/src/components/form-designer/setting-panel/property-editor/type-editor.vue
new file mode 100644
index 0000000..7f4ee50
--- /dev/null
+++ b/src/components/form-designer/setting-panel/property-editor/type-editor.vue
@@ -0,0 +1,33 @@
+<template>
+  <el-form-item :label="i18nt('designer.setting.displayType')" v-if="selectedWidget.type === 'input'">
+    <el-select v-model="optionModel.type">
+      <el-option label="text" value="text"></el-option>
+      <!-- 当input的type设置为number时，如果输入非数字字符，则v-model拿到的值为空字符串，无法实现输入校验！故屏蔽之！！ -->
+      <!--
+      <el-option label="number" value="number"></el-option>
+      -->
+      <el-option label="password" value="password"></el-option>
+    </el-select>
+  </el-form-item>
+</template>
+
+<script>
+  import i18n from "@/utils/i18n"
+
+  export default {
+    name: "type-editor",
+    mixins: [i18n],
+    props: {
+      designer: Object,
+      selectedWidget: Object,
+      optionModel: Object,
+    },
+    computed: {
+
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+
+</style>
diff --git a/src/components/form-designer/setting-panel/property-editor/uploadTip-editor.vue b/src/components/form-designer/setting-panel/property-editor/uploadTip-editor.vue
new file mode 100644
index 0000000..f58b6fd
--- /dev/null
+++ b/src/components/form-designer/setting-panel/property-editor/uploadTip-editor.vue
@@ -0,0 +1,24 @@
+<template>
+  <el-form-item :label="i18nt('designer.setting.uploadTip')">
+    <el-input type="text" v-model="optionModel.uploadTip"></el-input>
+  </el-form-item>
+</template>
+
+<script>
+  import i18n from "@/utils/i18n"
+
+  export default {
+    name: "uploadTip-editor",
+    mixins: [i18n],
+    props: {
+      designer: Object,
+      selectedWidget: Object,
+      optionModel: Object,
+    },
+
+  }
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/components/form-designer/setting-panel/property-editor/uploadURL-editor.vue b/src/components/form-designer/setting-panel/property-editor/uploadURL-editor.vue
new file mode 100644
index 0000000..6b651ae
--- /dev/null
+++ b/src/components/form-designer/setting-panel/property-editor/uploadURL-editor.vue
@@ -0,0 +1,28 @@
+<template>
+  <div>
+    <el-form-item label-width="0">
+      <el-divider class="custom-divider">{{i18nt('designer.setting.uploadSetting')}}</el-divider>
+    </el-form-item>
+    <el-form-item :label="i18nt('designer.setting.uploadURL')">
+      <el-input type="text" v-model="optionModel.uploadURL"></el-input>
+    </el-form-item>
+  </div>
+</template>
+
+<script>
+  import i18n from "@/utils/i18n"
+
+  export default {
+    name: "uploadURL-editor",
+    mixins: [i18n],
+    props: {
+      designer: Object,
+      selectedWidget: Object,
+      optionModel: Object,
+    },
+  }
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/components/form-designer/setting-panel/property-editor/validation-editor.vue b/src/components/form-designer/setting-panel/property-editor/validation-editor.vue
new file mode 100644
index 0000000..5ae5362
--- /dev/null
+++ b/src/components/form-designer/setting-panel/property-editor/validation-editor.vue
@@ -0,0 +1,48 @@
+<template>
+  <el-form-item>
+    <span slot="label">{{i18nt('designer.setting.validation')}}
+      <el-tooltip effect="light" :content="i18nt('designer.setting.validationHelp')">
+        <i class="el-icon-info"></i></el-tooltip>
+    </span>
+    <el-select v-model="optionModel.validation" filterable allow-create default-first-option>
+      <el-option v-for="(fv, fvIdx) in fieldValidators"
+                 :key="fvIdx"
+                 :label="fv.label"
+                 :value="fv.value">
+      </el-option>
+    </el-select>
+  </el-form-item>
+</template>
+
+<script>
+  import i18n from "@/utils/i18n"
+
+  export default {
+    name: "validation-editor",
+    mixins: [i18n],
+    props: {
+      designer: Object,
+      selectedWidget: Object,
+      optionModel: Object,
+    },
+    data() {
+      return {
+        fieldValidators: [
+          {value: 'number', label: this.i18nt('designer.hint.numberValidator')},
+          {value: 'letter', label: this.i18nt('designer.hint.letterValidator')},
+          {value: 'letterAndNumber', label: this.i18nt('designer.hint.letterAndNumberValidator')},
+          {value: 'mobilePhone', label: this.i18nt('designer.hint.mobilePhoneValidator')},
+          {value: 'email', label: this.i18nt('designer.hint.emailValidator')},
+          {value: 'url', label: this.i18nt('designer.hint.urlValidator')},
+          {value: 'noChinese', label: this.i18nt('designer.hint.noChineseValidator')},
+          {value: 'chinese', label: this.i18nt('designer.hint.chineseValidator')},
+        ],
+      }
+    },
+
+  }
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/components/form-designer/setting-panel/property-editor/validationHint-editor.vue b/src/components/form-designer/setting-panel/property-editor/validationHint-editor.vue
new file mode 100644
index 0000000..006696e
--- /dev/null
+++ b/src/components/form-designer/setting-panel/property-editor/validationHint-editor.vue
@@ -0,0 +1,23 @@
+<template>
+  <el-form-item :label="i18nt('designer.setting.validationHint')">
+    <el-input type="text" v-model="optionModel.validationHint"></el-input>
+  </el-form-item>
+</template>
+
+<script>
+  import i18n from "@/utils/i18n"
+
+  export default {
+    name: "validationHint-editor",
+    mixins: [i18n],
+    props: {
+      designer: Object,
+      selectedWidget: Object,
+      optionModel: Object,
+    },
+  }
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/components/form-designer/setting-panel/property-editor/withCredentials-editor.vue b/src/components/form-designer/setting-panel/property-editor/withCredentials-editor.vue
new file mode 100644
index 0000000..39b35eb
--- /dev/null
+++ b/src/components/form-designer/setting-panel/property-editor/withCredentials-editor.vue
@@ -0,0 +1,23 @@
+<template>
+  <el-form-item :label="i18nt('designer.setting.withCredentials')">
+    <el-checkbox v-model="optionModel.withCredentials"></el-checkbox>
+  </el-form-item>
+</template>
+
+<script>
+  import i18n from "@/utils/i18n"
+
+  export default {
+    name: "withCredentials-editor",
+    mixins: [i18n],
+    props: {
+      designer: Object,
+      selectedWidget: Object,
+      optionModel: Object,
+    },
+  }
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/components/form-designer/setting-panel/propertyRegister.js b/src/components/form-designer/setting-panel/propertyRegister.js
new file mode 100644
index 0000000..1e1c9f3
--- /dev/null
+++ b/src/components/form-designer/setting-panel/propertyRegister.js
@@ -0,0 +1,144 @@
+/**
+ * 格式说明：属性名称==对应属性编辑器的组件名称
+ */
+let COMMON_PROPERTIES = {
+  //字段
+  'name'              :            'name-editor',
+  'label'             :            'label-editor',
+  'labelAlign'        :            'labelAlign-editor',
+  'type'              :            'type-editor',
+  'defaultValue'      :            'defaultValue-editor',
+  'placeholder'       :            'placeholder-editor',
+  'startPlaceholder'  :            'startPlaceholder-editor',
+  'endPlaceholder'    :            'endPlaceholder-editor',
+  'columnWidth'       :            'columnWidth-editor',
+  'size'              :            'size-editor',
+  'displayStyle'      :            'displayStyle-editor',
+  'buttonStyle'       :            'buttonStyle-editor',
+  'border'            :            'border-editor',
+  'labelWidth'        :            'labelWidth-editor',
+  'labelHidden'       :            'labelHidden-editor',
+  'rows'              :            'rows-editor',
+  'required'          :            'required-editor',
+  'validation'        :            'validation-editor',
+  'validationHint'    :            'validationHint-editor',
+  'readonly'          :            'readonly-editor',
+  'disabled'          :            'disabled-editor',
+  'hidden'            :            'hidden-editor',
+  'clearable'         :            'clearable-editor',
+  'editable'          :            'editable-editor',
+  'showPassword'      :            'showPassword-editor',
+  'textContent'       :            'textContent-editor',
+  'htmlContent'       :            'htmlContent-editor',
+  'format'            :            'format-editor',
+  'valueFormat'       :            'valueFormat-editor',
+  'filterable'        :            'filterable-editor',
+  'allowCreate'       :            'allowCreate-editor',
+  'remote'            :            'remote-editor',
+  'automaticDropdown' :            'automaticDropdown-editor',
+  'multiple'          :            'multiple-editor',
+  'multipleLimit'     :            'multipleLimit-editor',
+  'contentPosition'   :            'contentPosition-editor',
+  'optionItems'       :            'optionItems-editor',
+  'uploadURL'         :            'uploadURL-editor',
+  'uploadTip'         :            'uploadTip-editor',
+  'withCredentials'   :            'withCredentials-editor',
+  'multipleSelect'    :            'multipleSelect-editor',
+  'limit'             :            'limit-editor',
+  'fileMaxSize'       :            'fileMaxSize-editor',
+  'fileTypes'         :            'fileTypes-editor',
+  'customClass'       :            'customClass-editor',
+
+  //容器
+  'showBlankRow'       :            'showBlankRow-editor',
+  'showRowNumber'      :            'showRowNumber-editor',
+  'cellWidth'          :            'cellWidth-editor',
+  'cellHeight'         :            'cellHeight-editor',
+  'gutter'             :            'gutter-editor',
+  'span'               :            'span-editor',
+
+}
+
+let ADVANCED_PROPERTIES = {
+  'min'               :            'min-editor',
+  'max'               :            'max-editor',
+  'precision'         :            'precision-editor',
+  'step'              :            'step-editor',
+  'controlsPosition'  :            'controlsPosition-editor',
+  'minLength'         :            'minLength-editor',
+  'maxLength'         :            'maxLength-editor',
+  'showWordLimit'     :            'showWordLimit-editor',
+  'prefixIcon'        :            'prefixIcon-editor',
+  'suffixIcon'        :            'suffixIcon-editor',
+  'switchWidth'       :            'switchWidth-editor',
+  'activeText'        :            'activeText-editor',
+  'inactiveText'      :            'inactiveText-editor',
+  'activeColor'       :            'activeColor-editor',
+  'inactiveColor'     :            'inactiveColor-editor',
+  'lowThreshold'      :            'lowThreshold-editor',
+  'highThreshold'     :            'highThreshold-editor',
+  'allowHalf'         :            'allowHalf-editor',
+  'showText'          :            'showText-editor',
+  'showScore'         :            'showScore-editor',
+  'range'             :            'range-editor',
+  'vertical'          :            'vertical-editor',
+  'plain'             :            'plain-editor',
+  'round'             :            'round-editor',
+  'circle'            :            'circle-editor',
+  'icon'              :            'icon-editor',
+  'labelIconClass'    :            'labelIconClass-editor',
+  'labelIconPosition' :            'labelIconPosition-editor',
+  'labelTooltip'      :            'labelTooltip-editor',
+  'appendButton'      :            'appendButton-editor',
+  'appendButtonDisabled':          'appendButtonDisabled-editor',
+  'buttonIcon'        :            'buttonIcon-editor',
+
+}
+
+let EVENT_PROPERTIES = {
+  //字段
+  'onCreated'         :            'onCreated-editor',
+  'onMounted'         :            'onMounted-editor',
+  'onClick'           :            'onClick-editor',
+  'onInput'           :            'onInput-editor',
+  'onChange'          :            'onChange-editor',
+  'onFocus'           :            'onFocus-editor',
+  'onBlur'            :            'onBlur-editor',
+  'onRemoteQuery'     :            'onRemoteQuery-editor',
+  'onBeforeUpload'    :            'onBeforeUpload-editor',
+  'onUploadSuccess'   :            'onUploadSuccess-editor',
+  'onUploadError'     :            'onUploadError-editor',
+  'onValidate'        :            'onValidate-editor',
+
+  //容器
+  'onSubFormRowAdd'   :            'onSubFormRowAdd-editor',
+  'onSubFormRowInsert':            'onSubFormRowInsert-editor',
+  'onSubFormRowDelete':            'onSubFormRowDelete-editor',
+  'onSubFormRowChange':            'onSubFormRowChange-editor',
+
+}
+
+/**
+ * 如属性编辑器的组件名称设置为null，则不显示该属性编辑器！！
+ * @param propName 属性名称
+ * @param propEditorName 对应属性编辑器的组件名称
+ */
+export function registerCommonProperty(propName, propEditorName) {
+  COMMON_PROPERTIES[propName] = propEditorName
+}
+
+export function registerAdvancedProperty(propName, propEditorName) {
+  ADVANCED_PROPERTIES[propName] = propEditorName
+}
+
+export function registerEventProperty(propName, propEditorName) {
+  EVENT_PROPERTIES[propName] = propEditorName
+}
+
+export default {
+  COMMON_PROPERTIES,
+  ADVANCED_PROPERTIES,
+  EVENT_PROPERTIES
+}
+
+
diff --git a/src/components/form-designer/widget-panel/widgetsConfig.js b/src/components/form-designer/widget-panel/widgetsConfig.js
index 0c84cd0..be26dd4 100644
--- a/src/components/form-designer/widget-panel/widgetsConfig.js
+++ b/src/components/form-designer/widget-panel/widgetsConfig.js
@@ -9,6 +9,7 @@ export const containers = [
       name: '',
       hidden: false,
       gutter: 12,
+      customClass: '',  //自定义css类名
     }
   },
 
@@ -20,6 +21,7 @@ export const containers = [
     options: {
       name: '',
       hidden: false,
+      customClass: '',  //自定义css类名
     }
   },
 
@@ -32,6 +34,7 @@ export const containers = [
     options: {
       name: '',
       hidden: false,
+      customClass: '',  //自定义css类名
     }
   },
 
@@ -44,6 +47,7 @@ export const containers = [
     options: {
       name: '',
       hidden: false,
+      customClass: '',  //自定义css类名
     }
   },
   */
@@ -58,6 +62,7 @@ export const containers = [
       name: '',
       hidden: false,
       span: 12,
+      customClass: '',  //自定义css类名
     }
   },
 
@@ -74,6 +79,7 @@ export const containers = [
       cellHeight: '',
       colspan: 1,
       rowspan: 1,
+      customClass: '',  //自定义css类名
     }
   },
 
@@ -89,6 +95,7 @@ export const containers = [
       hidden: false,
       active: false,
       disabled: false,
+      customClass: '',  //自定义css类名
     }
   },
 
diff --git a/src/components/form-render/container-item.vue b/src/components/form-render/container-item.vue
deleted file mode 100644
index 8007006..0000000
--- a/src/components/form-render/container-item.vue
+++ /dev/null
@@ -1,599 +0,0 @@
-<template>
-  <div class="container-wrapper">
-
-    <el-row v-if="widget.type === 'grid'" :key="widget.id" :gutter="widget.options.gutter" class="grid-container"
-            :class="[customClass]"
-            :ref="widget.id" v-show="!widget.options.hidden">
-      <template v-for="(colWidget, colIdx) in widget.cols">
-        <grid-col-item :widget="colWidget" :key="colIdx" :parent-list="widget.cols"
-                         :index-of-parent-list="colIdx" :parent-widget="widget"></grid-col-item>
-      </template>
-    </el-row>
-
-    <div v-else-if="widget.type === 'table'" :key="widget.id" class="table-container"
-         v-show="!widget.options.hidden">
-      <table :ref="widget.id" class="table-layout" :class="[customClass]">
-        <tbody>
-        <tr v-for="(row, rowIdx) in widget.rows" :key="row.id">
-          <template v-for="(colWidget, colIdx) in row.cols">
-            <table-cell-item v-if="!colWidget.merged" :widget="colWidget" :key="colIdx" :parent-list="widget.cols"
-                             :row-index="rowIdx" :col-index="colIdx" :parent-widget="widget"></table-cell-item>
-          </template>
-        </tr>
-        </tbody>
-      </table>
-    </div>
-
-    <div v-else-if="widget.type === 'tab'" :key="widget.id" class="tab-container"
-         v-show="!widget.options.hidden">
-      <el-tabs v-model="activeTabName" :type="widget.displayType" :ref="widget.id" :class="[customClass]">
-        <el-tab-pane v-for="(tab, index) in visibleTabs" :key="index" :label="tab.options.label"
-                     :disabled="tab.options.disabled" :name="tab.options.name">
-          <template v-for="(subWidget, swIdx) in tab.widgetList">
-            <template v-if="'container' === subWidget.category">
-              <container-item :widget="subWidget" :key="swIdx" :parent-list="tab.widgetList"
-                                :index-of-parent-list="swIdx" :parent-widget="widget"></container-item>
-            </template>
-            <template v-else>
-              <field-widget :field="subWidget" :key="swIdx" :parent-list="tab.widgetList"
-                            :index-of-parent-list="swIdx" :parent-widget="widget"></field-widget>
-            </template>
-          </template>
-        </el-tab-pane>
-      </el-tabs>
-    </div>
-
-    <div v-else-if="widget.type === 'sub-form'" :key="widget.id" class="sub-form-container"
-         v-show="!widget.options.hidden">
-<!--      <el-form :ref="widget.id" :model="formModel" label-position="top">-->
-        <el-row class="header-row">
-          <div class="action-header-column">
-            <span class="action-label">{{i18nt('render.hint.subFormAction')}}</span>
-            <el-button round type="primary" size="mini" class="action-button" @click="addSubFormRow"
-                     :title="i18nt('render.hint.subFormAddActionHint')">
-              {{i18nt('render.hint.subFormAddAction')}}<i class="el-icon-plus el-icon-right"></i></el-button>
-          </div>
-          <template v-for="(subWidget) in widget.widgetList">
-            <div :key="subWidget.id + 'thc'" class="field-header-column"
-                 :class="[getLabelAlign(widget, subWidget), !!subWidget.options.required ? 'is-required' : '']"
-                 :style="{width: subWidget.options.columnWidth}">
-              <span v-if="!!subWidget.options.labelIconClass" class="custom-label">
-                <template v-if="subWidget.options.labelIconPosition === 'front'">
-                  <template v-if="!!subWidget.options.labelTooltip">
-                    <el-tooltip :content="subWidget.options.labelTooltip" effect="light">
-                      <i :class="subWidget.options.labelIconClass"></i></el-tooltip>{{subWidget.options.label}}</template>
-                  <template v-else>
-                    <i :class="subWidget.options.labelIconClass"></i>{{subWidget.options.label}}</template>
-                </template>
-                <template v-else-if="subWidget.options.labelIconPosition === 'rear'">
-                  <template v-if="!!subWidget.options.labelTooltip">
-                    {{subWidget.options.label}}<el-tooltip :content="subWidget.options.labelTooltip" effect="light">
-                    <i :class="subWidget.options.labelIconClass"></i></el-tooltip></template>
-                  <template v-else>
-                    {{subWidget.options.label}}<i :class="subWidget.options.labelIconClass"></i></template>
-                </template>
-              </span>
-              <template v-else>
-                <span :title="subWidget.options.labelTooltip">{{subWidget.options.label}}</span></template>
-            </div>
-          </template>
-        </el-row>
-        <el-row v-for="(subFormRowId, sfrIdx) in rowIdData" class="sub-form-row" :key="subFormRowId">
-          <div class="sub-form-action-column hide-label">
-            <div class="action-button-column">
-              <el-button circle type="" icon="el-icon-circle-plus-outline" @click="insertSubFormRow(sfrIdx)"
-                         :title="i18nt('render.hint.insertSubFormRow')"></el-button>
-              <el-button circle type="" icon="el-icon-delete" @click="deleteSubFormRow(sfrIdx)"
-                         :title="i18nt('render.hint.deleteSubFormRow')"></el-button>
-              <span v-if="widget.options.showRowNumber" class="row-number-span">#{{sfrIdx+1}}</span>
-            </div>
-          </div>
-          <template v-for="(subWidget, swIdx) in widget.widgetList">
-            <div class="sub-form-table-column hide-label" :key="subWidget.id + 'tc' + subFormRowId"
-                 :style="{width: subWidget.options.columnWidth}">
-              <field-widget :field="fieldSchemaData[sfrIdx][swIdx]"
-                            :key="fieldSchemaData[sfrIdx][swIdx].id" :parent-list="widget.widgetList"
-                            :index-of-parent-list="swIdx" :parent-widget="widget"
-                            :sub-form-row-id="subFormRowId"
-                            :sub-form-row-index="sfrIdx" :sub-form-col-index="swIdx"></field-widget>
-            </div>
-          </template>
-        </el-row>
-<!--      </el-form>-->
-    </div>
-
-  </div>
-</template>
-
-<script>
-  import emitter from 'element-ui/lib/mixins/emitter'
-  import FieldWidget from "../../components/form-designer/form-widget/field-widget";
-  import GridColItem from "./grid-col-item";
-  import TableCellItem from "./table-cell-item"
-  import {deepClone, generateId} from "../../utils/util";
-  import i18n from "../../utils/i18n";
-  import refMixin from "../../components/form-render/refMixin";
-
-  export default {
-    name: "ContainerItem",
-    componentName: 'ContainerItem',
-    mixins: [emitter, i18n, refMixin],
-    components: {
-      GridColItem,
-      TableCellItem,
-      FieldWidget,
-
-    },
-    props: {
-      widget: Object,
-    },
-    inject: ['refList', 'sfRefList', 'globalModel'],
-    data() {
-      return {
-        activeTabName: '',
-        rowIdData: [],
-        fieldSchemaData: [],
-      }
-    },
-    computed: {
-      customClass() {
-        return this.widget.options.customClass || ''
-      },
-
-      visibleTabs() {
-        return this.widget.tabs.filter(tp => {
-          return !tp.options.hidden
-        })
-      },
-
-      formModel: {
-        cache: false,
-        get() {
-          return this.globalModel.formModel
-        }
-      },
-
-    },
-    created() {
-      this.initRefList()
-      this.registerSubFormToRefList()
-      this.initRowIdData(true)
-      this.initFieldSchemaData()
-      this.initEventHandler()
-    },
-    mounted() {
-      this.initActiveTab()
-
-      this.handleSubFormFirstRowAdd()  //默认添加首行后，主动触发相关事件！！
-    },
-    methods: {
-      getLabelAlign(widget, subWidget) {
-        return subWidget.options.labelAlign || widget.options.labelAlign
-      },
-
-      initActiveTab() {
-        if ((this.widget.type === 'tab') && (this.widget.tabs.length > 0)) {
-          let activePanes = this.widget.tabs.filter((tp) => {
-            return tp.options.active === true
-          })
-          if (activePanes.length > 0) {
-            this.activeTabName = activePanes[0].options.name
-          } else {
-            this.activeTabName = this.widget.tabs[0].options.name
-          }
-        }
-      },
-
-      registerSubFormToRefList() {
-        if (this.widget.type === 'sub-form') {
-          this.sfRefList[this.widget.options.name] = this
-        }
-      },
-
-      initRowIdData(initFlag) {
-        if (this.widget.type === 'sub-form') {
-          this.rowIdData.splice(0, this.rowIdData.length)  //清除数组必须用splice，length=0不会响应式更新！！
-          let subFormModel = this.formModel[this.widget.options.name]
-          if (!!subFormModel && (subFormModel.length > 0)) {
-            subFormModel.forEach(() => {
-              this.rowIdData.push('r' + generateId())
-            })
-
-            if (!!initFlag) {
-              //注意：事件触发需延期执行，SumFormDataChange事件处理代码中可能存在尚未创建完成的组件！！
-              setTimeout(() => {
-                this.handleSubFormRowChange(subFormModel)
-              }, 800)
-            }
-          }
-        }
-      },
-
-      addToRowIdData() {
-        this.rowIdData.push('rowId' + generateId())
-      },
-
-      insertToRowIdData(rowIndex) {
-        this.rowIdData.splice(rowIndex, 0, 'rowId' + generateId())
-      },
-
-      deleteFromRowIdData(rowIndex) {
-        this.rowIdData.splice(rowIndex, 1)
-      },
-
-      initFieldSchemaData() {  //初始化fieldSchemaData！！！
-        if (this.widget.type !== 'sub-form') {
-          return
-        }
-
-        let rowLength = this.rowIdData.length
-        this.fieldSchemaData.splice(0, this.fieldSchemaData.length)  //清除数组必须用splice，length=0不会响应式更新！！
-        if (rowLength > 0) {
-          for (let i = 0; i < rowLength; i++) {
-            let fieldSchemas = []
-            this.widget.widgetList.forEach(swItem => {
-              fieldSchemas.push( this.cloneFieldSchema(swItem) )
-            })
-            this.fieldSchemaData.push(fieldSchemas)
-          }
-        }
-      },
-
-      addToFieldSchemaData(rowIndex) {
-        let fieldSchemas = []
-        this.widget.widgetList.forEach(swItem => {
-          fieldSchemas.push( this.cloneFieldSchema(swItem) )
-        })
-
-        if (rowIndex === undefined) {
-          this.fieldSchemaData.push(fieldSchemas)
-        } else {
-          this.fieldSchemaData.splice(rowIndex, 0, fieldSchemas)
-        }
-      },
-
-      deleteFromFieldSchemaData(rowIndex) {
-        this.fieldSchemaData.splice(rowIndex, 1)
-      },
-
-      cloneFieldSchema(fieldWidget) {
-        let newFieldSchema = deepClone(fieldWidget)
-        newFieldSchema.id = fieldWidget.type + generateId()
-        return newFieldSchema
-      },
-
-      initEventHandler() {
-        if (this.widget.type !== 'sub-form') {
-          return
-        }
-
-        this.$on('setFormData', function (newFormData) {
-          this.initRowIdData(false)
-          this.initFieldSchemaData()
-
-          let subFormData = newFormData[this.widget.options.name] || []
-          setTimeout(() => {  //延时触发SubFormRowChange事件, 便于更新计算字段！！
-            this.handleSubFormRowChange(subFormData)
-          }, 800)
-        })
-      },
-
-      handleSubFormFirstRowAdd() {
-        if (this.widget.type !== 'sub-form') {
-          return
-        }
-
-        if (!!this.widget.options.showBlankRow && (this.rowIdData.length === 1)) {
-          let oldSubFormData = this.formModel[this.widget.options.name] || []
-          this.handleSubFormRowAdd(oldSubFormData, this.rowIdData[0])
-          this.handleSubFormRowChange(oldSubFormData)
-        }
-      },
-
-      addSubFormRow() {
-        let newSubFormDataRow = {}
-        this.widget.widgetList.forEach(subFormItem => {
-          if (!!subFormItem.formItemFlag) {
-            newSubFormDataRow[subFormItem.options.name] = subFormItem.options.defaultValue
-          }
-        })
-
-        let oldSubFormData = this.formModel[this.widget.options.name] || []
-        oldSubFormData.push(newSubFormDataRow)
-        this.addToRowIdData()
-        this.addToFieldSchemaData()
-
-        this.handleSubFormRowAdd(oldSubFormData, this.rowIdData[oldSubFormData.length - 1])
-        this.handleSubFormRowChange(oldSubFormData)
-      },
-
-      insertSubFormRow(beforeFormRowIndex) {
-        let newSubFormDataRow = {}
-        this.widget.widgetList.forEach(subFormItem => {
-          if (!!subFormItem.formItemFlag) {
-            newSubFormDataRow[subFormItem.options.name] = subFormItem.options.defaultValue
-          }
-        })
-
-        let oldSubFormData = this.formModel[this.widget.options.name] || []
-        oldSubFormData.splice(beforeFormRowIndex, 0, newSubFormDataRow)
-        this.insertToRowIdData(beforeFormRowIndex)
-        this.addToFieldSchemaData(beforeFormRowIndex)
-
-        this.handleSubFormRowInsert(oldSubFormData, this.rowIdData[beforeFormRowIndex])
-        this.handleSubFormRowChange(oldSubFormData)
-      },
-
-      deleteSubFormRow(formRowIndex) {
-        this.$confirm(this.i18nt('render.hint.deleteSubFormRow') + '?', this.i18nt('render.hint.prompt'), {
-          confirmButtonText: this.i18nt('render.hint.confirm'),
-          cancelButtonText: this.i18nt('render.hint.cancel')
-        }).then(() => {
-          let oldSubFormData = this.formModel[this.widget.options.name] || []
-          let deletedDataRow = deepClone(oldSubFormData[formRowIndex])
-          oldSubFormData.splice(formRowIndex, 1)
-          this.deleteFromRowIdData(formRowIndex)
-          this.deleteFromFieldSchemaData(formRowIndex)
-
-          this.handelSubFormRowDelete(oldSubFormData, deletedDataRow)
-          this.handleSubFormRowChange(oldSubFormData)
-        }).catch(() => {
-          //
-        })
-      },
-
-      handleSubFormRowChange(subFormData) {
-        if (!!this.widget.options.onSubFormRowChange) {
-          let customFunc = new Function('subFormData', this.widget.options.onSubFormRowChange)
-          customFunc.call(this, subFormData)
-        }
-      },
-
-      handleSubFormRowAdd(subFormData, newRowId) {
-        if (!!this.widget.options.onSubFormRowAdd) {
-          let customFunc = new Function('subFormData', 'newRowId', this.widget.options.onSubFormRowAdd)
-          customFunc.call(this, subFormData, newRowId)
-        }
-      },
-
-      handleSubFormRowInsert(subFormData, newRowId) {
-        if (!!this.widget.options.onSubFormRowInsert) {
-          let customFunc = new Function('subFormData', 'newRowId', this.widget.options.onSubFormRowInsert)
-          customFunc.call(this, subFormData, newRowId)
-        }
-      },
-
-      handelSubFormRowDelete(subFormData, deletedDataRow) {
-        if (!!this.widget.options.onSubFormRowDelete) {
-          let customFunc = new Function('subFormData', 'deletedDataRow', this.widget.options.onSubFormRowDelete)
-          customFunc.call(this, subFormData, deletedDataRow)
-        }
-      },
-
-      //--------------------- 以下为组件支持外部调用的API方法 begin ------------------//
-      /* 提示：用户可自行扩充这些方法！！！ */
-
-      setHidden(flag) {
-        this.widget.options.hidden = flag
-      },
-
-      activeTab(tabIndex) { //tabIndex从0计数
-        if ((tabIndex >= 0) && (tabIndex < this.widget.tabs.length)) {
-          this.widget.tabs.forEach((tp, idx) => {
-            tp.options.active = idx === tabIndex
-            if (idx === tabIndex) {
-              this.activeTabName = tp.options.name
-            }
-          })
-
-        }
-      },
-
-      disableTab(tabIndex) {
-        if ((tabIndex >= 0) && (tabIndex < this.widget.tabs.length)) {
-          this.widget.tabs[tabIndex].options.disabled = true
-        }
-      },
-
-      enableTab(tabIndex) {
-        if ((tabIndex >= 0) && (tabIndex < this.widget.tabs.length)) {
-          this.widget.tabs[tabIndex].options.disabled = false
-        }
-      },
-
-      hideTab(tabIndex) {
-        if ((tabIndex >= 0) && (tabIndex < this.widget.tabs.length)) {
-          this.widget.tabs[tabIndex].options.hidden = true
-        }
-      },
-
-      showTab(tabIndex) {
-        if ((tabIndex >= 0) && (tabIndex < this.widget.tabs.length)) {
-          this.widget.tabs[tabIndex].options.hidden = false
-        }
-      },
-
-      disableSubFormRow(rowIndex) {
-        this.widget.widgetList.forEach(subWidget => {
-          let swRefName = subWidget.options.name + '@row' + this.rowIdData[rowIndex]
-          let foundSW = this.getWidgetRef(swRefName)
-          if (!!foundSW) {
-            foundSW.setDisabled(true)
-          }
-        })
-      },
-
-      enableSubFormRow(rowIndex) {
-        this.widget.widgetList.forEach(subWidget => {
-          let swRefName = subWidget.options.name + '@row' + this.rowIdData[rowIndex]
-          let foundSW = this.getWidgetRef(swRefName)
-          if (!!foundSW) {
-            foundSW.setDisabled(false)
-          }
-        })
-      },
-
-      disableSubForm() {
-        if (this.rowIdData.length > 0) {
-          this.rowIdData.forEach((dataRow, rIdx) => {
-            this.disableSubFormRow(rIdx)
-          })
-        }
-      },
-
-      enableSubForm() {
-        if (this.rowIdData.length > 0) {
-          this.rowIdData.forEach((dataRow, rIdx) => {
-            this.enableSubFormRow(rIdx)
-          })
-        }
-      },
-
-      resetSubForm() { //重置subForm数据为空
-        if (this.widget.type === 'sub-form') {
-          let subFormModel = this.formModel[this.widget.options.name]
-          if (!!subFormModel) {
-            subFormModel.splice(0, subFormModel.length)
-            this.rowIdData.splice(0, this.rowIdData.length)
-          }
-        }
-      },
-
-      getSubFormValues(needValidation = true) {
-        if (this.widget.type === 'sub-form') {
-          //TODO: 逐行校验子表单！！
-          return this.formModel[this.widget.options.name]
-        } else {
-          this.$message.error(this.i18nt('render.hint.nonSubFormType'))
-        }
-      },
-
-      // validateField(fieldName) { //逐行校验子表单字段
-      //   //TODO:
-      // },
-      //
-      // validateSubForm() { //逐行校验子表单全部字段
-      //   //TODO:
-      // },
-
-      //--------------------- 以上为组件支持外部调用的API方法 end ------------------//
-
-    },
-  }
-</script>
-
-<style lang="scss" scoped>
-  div.table-container {
-    table.table-layout {
-      width: 100%;
-      table-layout: fixed;
-      border-collapse: collapse;
-    }
-  }
-
-  .sub-form-container {
-    margin-bottom: 8px;
-    text-align: left; //IE浏览器强制居左对齐
-
-    ::v-deep .el-row.header-row {
-      padding-bottom: 0;
-    }
-
-    ::v-deep .el-row.sub-form-row {
-      padding-top: 3px;
-      padding-bottom: 3px;
-
-      .row-number-span {
-        margin-left: 16px;
-      }
-    }
-  }
-
-  div.action-header-column {
-    display: inline-block;
-    width: 120px;
-
-    .action-label {
-      margin-right: 12px;
-    }
-
-    .action-button {
-      padding-left: 8px;
-      padding-right: 8px;
-    }
-  }
-
-  div.field-header-column {
-    display: inline-block;
-    //overflow: hidden;
-    //white-space: nowrap;  //文字超出长度不自动换行
-    //text-overflow: ellipsis;  //文字超出长度显示省略号
-
-    span.custom-label i {
-      margin: 0 3px;
-    }
-  }
-
-  div.field-header-column.is-required:before {
-    content: '*';
-    color: #F56C6C;
-    margin-right: 4px;
-  }
-
-  div.label-center-left {
-    text-align: left;
-  }
-
-  div.label-center-align {
-    text-align: center;
-  }
-
-  div.label-right-align {
-    text-align: right;
-  }
-
-  div.sub-form-action-column {
-    display: inline-block;
-    width: 120px;
-
-    ::v-deep .el-form-item {
-      margin-bottom: 0;
-    }
-
-    ::v-deep .el-button {
-      font-size: 18px;
-      padding: 0;
-      background: #DCDFE6;
-      border: 4px solid #DCDFE6;
-    }
-
-  }
-
-  div.sub-form-action-column.hide-label {
-    ::v-deep .el-form-item__label {
-      display: none;
-    }
-  }
-
-  div.sub-form-table-column {
-    display: inline-block;
-    //width: 200px;
-
-    ::v-deep .el-form-item {
-      margin-left: 4px;
-      margin-right: 4px;
-      margin-bottom: 0;
-    }
-
-    ::v-deep .el-form-item__content {
-      margin-left: 0 !important;
-    }
-  }
-
-  div.sub-form-table-column.hide-label {
-    ::v-deep .el-form-item__label {
-      display: none;
-    }
-  }
-
-</style>
diff --git a/src/components/form-render/container-item/container-item-wrapper.vue b/src/components/form-render/container-item/container-item-wrapper.vue
new file mode 100644
index 0000000..b42f7ea
--- /dev/null
+++ b/src/components/form-render/container-item/container-item-wrapper.vue
@@ -0,0 +1,25 @@
+<!--
+/**
+ * author: vformAdmin
+ * email: vdpadmin@163.com
+ * website: http://www.vform666.com
+ * date: 2021.08.18
+ * remark: 如果要分发VForm源码，需在本文件顶部保留此文件头信息！！
+ */
+-->
+
+<template>
+  <div class="container-wrapper">
+    <slot></slot>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: "container-item-wrapper"
+  }
+</script>
+
+<style lang="scss" scoped>
+
+</style>
diff --git a/src/components/form-render/container-item/containerItemMixin.js b/src/components/form-render/container-item/containerItemMixin.js
new file mode 100644
index 0000000..89de7b0
--- /dev/null
+++ b/src/components/form-render/container-item/containerItemMixin.js
@@ -0,0 +1,136 @@
+import {generateId} from "@/utils/util";
+
+export default {
+  computed: {
+    customClass() {
+      return this.widget.options.customClass || ''
+    },
+
+    formModel: {
+      cache: false,
+      get() {
+        return this.globalModel.formModel
+      }
+    },
+
+  },
+
+  methods: {
+    unregisterFromRefList() {  //销毁容器组件时注销组件ref
+      if ((this.refList !== null) && !!this.widget.options.name) {
+        let oldRefName = this.widget.options.name
+        delete this.refList[oldRefName]
+      }
+    },
+
+    //--------------------- 以下为组件支持外部调用的API方法 begin ------------------//
+    /* 提示：用户可自行扩充这些方法！！！ */
+
+    setHidden(flag) {
+      this.widget.options.hidden = flag
+    },
+
+    activeTab(tabIndex) { //tabIndex从0计数
+      if ((tabIndex >= 0) && (tabIndex < this.widget.tabs.length)) {
+        this.widget.tabs.forEach((tp, idx) => {
+          tp.options.active = idx === tabIndex
+          if (idx === tabIndex) {
+            this.activeTabName = tp.options.name
+          }
+        })
+
+      }
+    },
+
+    disableTab(tabIndex) {
+      if ((tabIndex >= 0) && (tabIndex < this.widget.tabs.length)) {
+        this.widget.tabs[tabIndex].options.disabled = true
+      }
+    },
+
+    enableTab(tabIndex) {
+      if ((tabIndex >= 0) && (tabIndex < this.widget.tabs.length)) {
+        this.widget.tabs[tabIndex].options.disabled = false
+      }
+    },
+
+    hideTab(tabIndex) {
+      if ((tabIndex >= 0) && (tabIndex < this.widget.tabs.length)) {
+        this.widget.tabs[tabIndex].options.hidden = true
+      }
+    },
+
+    showTab(tabIndex) {
+      if ((tabIndex >= 0) && (tabIndex < this.widget.tabs.length)) {
+        this.widget.tabs[tabIndex].options.hidden = false
+      }
+    },
+
+    disableSubFormRow(rowIndex) {
+      this.widget.widgetList.forEach(subWidget => {
+        let swRefName = subWidget.options.name + '@row' + this.rowIdData[rowIndex]
+        let foundSW = this.getWidgetRef(swRefName)
+        if (!!foundSW) {
+          foundSW.setDisabled(true)
+        }
+      })
+    },
+
+    enableSubFormRow(rowIndex) {
+      this.widget.widgetList.forEach(subWidget => {
+        let swRefName = subWidget.options.name + '@row' + this.rowIdData[rowIndex]
+        let foundSW = this.getWidgetRef(swRefName)
+        if (!!foundSW) {
+          foundSW.setDisabled(false)
+        }
+      })
+    },
+
+    disableSubForm() {
+      if (this.rowIdData.length > 0) {
+        this.rowIdData.forEach((dataRow, rIdx) => {
+          this.disableSubFormRow(rIdx)
+        })
+      }
+    },
+
+    enableSubForm() {
+      if (this.rowIdData.length > 0) {
+        this.rowIdData.forEach((dataRow, rIdx) => {
+          this.enableSubFormRow(rIdx)
+        })
+      }
+    },
+
+    resetSubForm() { //重置subForm数据为空
+      if (this.widget.type === 'sub-form') {
+        let subFormModel = this.formModel[this.widget.options.name]
+        if (!!subFormModel) {
+          subFormModel.splice(0, subFormModel.length)
+          this.rowIdData.splice(0, this.rowIdData.length)
+        }
+      }
+    },
+
+    getSubFormValues(needValidation = true) {
+      if (this.widget.type === 'sub-form') {
+        //TODO: 逐行校验子表单！！
+        return this.formModel[this.widget.options.name]
+      } else {
+        this.$message.error(this.i18nt('render.hint.nonSubFormType'))
+      }
+    },
+
+    // validateField(fieldName) { //逐行校验子表单字段
+    //   //TODO:
+    // },
+    //
+    // validateSubForm() { //逐行校验子表单全部字段
+    //   //TODO:
+    // },
+
+    //--------------------- 以上为组件支持外部调用的API方法 end ------------------//
+
+  },
+
+}
diff --git a/src/components/form-render/grid-col-item.vue b/src/components/form-render/container-item/grid-col-item.vue
similarity index 70%
rename from src/components/form-render/grid-col-item.vue
rename to src/components/form-render/container-item/grid-col-item.vue
index ba2c5ca..bf20f3b 100644
--- a/src/components/form-render/grid-col-item.vue
+++ b/src/components/form-render/container-item/grid-col-item.vue
@@ -4,12 +4,12 @@
     <template v-if="!!widget.widgetList && (widget.widgetList.length > 0)">
       <template v-for="(subWidget, swIdx) in widget.widgetList">
         <template v-if="'container' === subWidget.category">
-          <container-item :widget="subWidget" :key="swIdx" :parent-list="widget.widgetList"
-                          :index-of-parent-list="swIdx" :parent-widget="widget"></container-item>
+          <component :is="subWidget.type + '-item'" :widget="subWidget" :key="swIdx" :parent-list="widget.widgetList"
+                          :index-of-parent-list="swIdx" :parent-widget="widget"></component>
         </template>
         <template v-else>
-          <field-widget :field="subWidget" :designer="null" :key="swIdx" :parent-list="widget.widgetList"
-                        :index-of-parent-list="swIdx" :parent-widget="widget"></field-widget>
+          <component :is="subWidget.type + '-widget'" :field="subWidget" :designer="null" :key="swIdx" :parent-list="widget.widgetList"
+                        :index-of-parent-list="swIdx" :parent-widget="widget"></component>
         </template>
       </template>
     </template>
@@ -22,18 +22,18 @@
 </template>
 
 <script>
-  //import ContainerItem from "./container-item";
-  import FieldWidget from "../../components/form-designer/form-widget/field-widget";
-  import i18n from "../../utils/i18n";
-  import refMixin from "../../components/form-render/refMixin";
+  import i18n from "../../../utils/i18n"
+  import refMixin from "../../../components/form-render/refMixin"
+  import ContainerItems from './index'
+  import FieldComponents from '@/components/form-designer/form-widget/field-widget/index'
 
   export default {
     name: "GridColItem",
     componentName: 'GridColItem',
     mixins: [i18n, refMixin],
     components: {
-      FieldWidget,
-      //'container-item': ContainerItem,  /* 递归组件必须使用这种写法！！ */
+      ...ContainerItems,
+      ...FieldComponents,
     },
     props: {
       widget: Object,
diff --git a/src/components/form-render/container-item/grid-item.vue b/src/components/form-render/container-item/grid-item.vue
new file mode 100644
index 0000000..12d26bd
--- /dev/null
+++ b/src/components/form-render/container-item/grid-item.vue
@@ -0,0 +1,53 @@
+<template>
+  <container-item-wrapper>
+
+    <el-row :key="widget.id" :gutter="widget.options.gutter" class="grid-container"
+            :class="[customClass]"
+            :ref="widget.id" v-show="!widget.options.hidden">
+      <template v-for="(colWidget, colIdx) in widget.cols">
+        <grid-col-item :widget="colWidget" :key="colIdx" :parent-list="widget.cols"
+                       :index-of-parent-list="colIdx" :parent-widget="widget"></grid-col-item>
+      </template>
+    </el-row>
+
+  </container-item-wrapper>
+</template>
+
+<script>
+  import emitter from 'element-ui/lib/mixins/emitter'
+  import i18n from "../../../utils/i18n"
+  import refMixin from "../../../components/form-render/refMixin"
+  import ContainerItemWrapper from './container-item-wrapper'
+  import GridColItem from './grid-col-item'
+  import containerItemMixin from "./containerItemMixin"
+
+  export default {
+    name: "grid-item",
+    componentName: 'ContainerItem',
+    mixins: [emitter, i18n, refMixin, containerItemMixin],
+    components: {
+      ContainerItemWrapper,
+      GridColItem,
+    },
+    props: {
+      widget: Object,
+    },
+    inject: ['refList', 'sfRefList', 'globalModel'],
+    created() {
+      this.initRefList()
+    },
+    mounted() {
+
+    },
+    beforeDestroy() {
+      this.unregisterFromRefList()
+    },
+    methods: {
+
+    },
+  }
+</script>
+
+<style lang="scss" scoped>
+
+</style>
diff --git a/src/components/form-render/container-item/index.js b/src/components/form-render/container-item/index.js
new file mode 100644
index 0000000..9e0f6ae
--- /dev/null
+++ b/src/components/form-render/container-item/index.js
@@ -0,0 +1,10 @@
+const requireComponent = require.context('./', false, /\w+\.vue$/)
+
+let comps = {}
+
+requireComponent.keys().map(fileName => {
+  let comp = requireComponent(fileName).default;
+  comps[comp.name] = comp
+})
+
+export default comps;
diff --git a/src/components/form-render/container-item/sub-form-item.vue b/src/components/form-render/container-item/sub-form-item.vue
new file mode 100644
index 0000000..18247ad
--- /dev/null
+++ b/src/components/form-render/container-item/sub-form-item.vue
@@ -0,0 +1,405 @@
+<template>
+  <container-item-wrapper>
+
+    <div :key="widget.id" class="sub-form-container"
+         v-show="!widget.options.hidden">
+      <el-row class="header-row">
+        <div class="action-header-column">
+          <span class="action-label">{{i18nt('render.hint.subFormAction')}}</span>
+          <el-button round type="primary" size="mini" class="action-button" @click="addSubFormRow"
+                     :title="i18nt('render.hint.subFormAddActionHint')">
+            {{i18nt('render.hint.subFormAddAction')}}<i class="el-icon-plus el-icon-right"></i></el-button>
+        </div>
+        <template v-for="(subWidget) in widget.widgetList">
+          <div :key="subWidget.id + 'thc'" class="field-header-column"
+               :class="[getLabelAlign(widget, subWidget), !!subWidget.options.required ? 'is-required' : '']"
+               :style="{width: subWidget.options.columnWidth}">
+            <span v-if="!!subWidget.options.labelIconClass" class="custom-label">
+              <template v-if="subWidget.options.labelIconPosition === 'front'">
+                <template v-if="!!subWidget.options.labelTooltip">
+                  <el-tooltip :content="subWidget.options.labelTooltip" effect="light">
+                    <i :class="subWidget.options.labelIconClass"></i></el-tooltip>{{subWidget.options.label}}</template>
+                <template v-else>
+                  <i :class="subWidget.options.labelIconClass"></i>{{subWidget.options.label}}</template>
+              </template>
+              <template v-else-if="subWidget.options.labelIconPosition === 'rear'">
+                <template v-if="!!subWidget.options.labelTooltip">
+                  {{subWidget.options.label}}<el-tooltip :content="subWidget.options.labelTooltip" effect="light">
+                  <i :class="subWidget.options.labelIconClass"></i></el-tooltip></template>
+                <template v-else>
+                  {{subWidget.options.label}}<i :class="subWidget.options.labelIconClass"></i></template>
+              </template>
+            </span>
+            <template v-else>
+              <span :title="subWidget.options.labelTooltip">{{subWidget.options.label}}</span></template>
+          </div>
+        </template>
+      </el-row>
+      <el-row v-for="(subFormRowId, sfrIdx) in rowIdData" class="sub-form-row" :key="subFormRowId">
+        <div class="sub-form-action-column hide-label">
+          <div class="action-button-column">
+            <el-button circle type="" icon="el-icon-circle-plus-outline" @click="insertSubFormRow(sfrIdx)"
+                       :title="i18nt('render.hint.insertSubFormRow')"></el-button>
+            <el-button circle type="" icon="el-icon-delete" @click="deleteSubFormRow(sfrIdx)"
+                       :title="i18nt('render.hint.deleteSubFormRow')"></el-button>
+            <span v-if="widget.options.showRowNumber" class="row-number-span">#{{sfrIdx+1}}</span>
+          </div>
+        </div>
+        <template v-for="(subWidget, swIdx) in widget.widgetList">
+          <div class="sub-form-table-column hide-label" :key="subWidget.id + 'tc' + subFormRowId"
+               :style="{width: subWidget.options.columnWidth}">
+            <component :is="subWidget.type + '-widget'" :field="fieldSchemaData[sfrIdx][swIdx]"
+                          :key="fieldSchemaData[sfrIdx][swIdx].id" :parent-list="widget.widgetList"
+                          :index-of-parent-list="swIdx" :parent-widget="widget"
+                          :sub-form-row-id="subFormRowId"
+                          :sub-form-row-index="sfrIdx" :sub-form-col-index="swIdx"></component>
+          </div>
+        </template>
+      </el-row>
+    </div>
+
+  </container-item-wrapper>
+</template>
+
+<script>
+  import emitter from 'element-ui/lib/mixins/emitter'
+  import i18n from "../../../utils/i18n"
+  import {deepClone, generateId} from "../../../utils/util"
+  import refMixin from "../../../components/form-render/refMixin"
+  import ContainerItemWrapper from './container-item-wrapper'
+  import containerItemMixin from "./containerItemMixin";
+  import FieldComponents from '@/components/form-designer/form-widget/field-widget/index'
+
+  export default {
+    name: "sub-form-item",
+    componentName: 'ContainerItem',
+    mixins: [emitter, i18n, refMixin, containerItemMixin],
+    components: {
+      ContainerItemWrapper,
+      ...FieldComponents,
+    },
+    props: {
+      widget: Object,
+    },
+    inject: ['refList', 'sfRefList', 'globalModel'],
+    data() {
+      return {
+        rowIdData: [],
+        fieldSchemaData: [],
+      }
+    },
+    created() {
+      this.initRefList()
+      this.registerSubFormToRefList()
+      this.initRowIdData(true)
+      this.initFieldSchemaData()
+      this.initEventHandler()
+    },
+    mounted() {
+      this.handleSubFormFirstRowAdd()  //默认添加首行后，主动触发相关事件！！
+    },
+    beforeDestroy() {
+      this.unregisterFromRefList()
+    },
+    methods: {
+      getLabelAlign(widget, subWidget) {
+        return subWidget.options.labelAlign || widget.options.labelAlign
+      },
+
+      registerSubFormToRefList() {
+        if (this.widget.type === 'sub-form') {
+          this.sfRefList[this.widget.options.name] = this
+        }
+      },
+
+      initRowIdData(initFlag) {
+        if (this.widget.type === 'sub-form') {
+          this.rowIdData.splice(0, this.rowIdData.length)  //清除数组必须用splice，length=0不会响应式更新！！
+          let subFormModel = this.formModel[this.widget.options.name]
+          if (!!subFormModel && (subFormModel.length > 0)) {
+            subFormModel.forEach(() => {
+              this.rowIdData.push('r' + generateId())
+            })
+
+            if (!!initFlag) {
+              //注意：事件触发需延期执行，SumFormDataChange事件处理代码中可能存在尚未创建完成的组件！！
+              setTimeout(() => {
+                this.handleSubFormRowChange(subFormModel)
+              }, 800)
+            }
+          }
+        }
+      },
+
+      addToRowIdData() {
+        this.rowIdData.push('rowId' + generateId())
+      },
+
+      insertToRowIdData(rowIndex) {
+        this.rowIdData.splice(rowIndex, 0, 'rowId' + generateId())
+      },
+
+      deleteFromRowIdData(rowIndex) {
+        this.rowIdData.splice(rowIndex, 1)
+      },
+
+      initFieldSchemaData() {  //初始化fieldSchemaData！！！
+        if (this.widget.type !== 'sub-form') {
+          return
+        }
+
+        let rowLength = this.rowIdData.length
+        this.fieldSchemaData.splice(0, this.fieldSchemaData.length)  //清除数组必须用splice，length=0不会响应式更新！！
+        if (rowLength > 0) {
+          for (let i = 0; i < rowLength; i++) {
+            let fieldSchemas = []
+            this.widget.widgetList.forEach(swItem => {
+              fieldSchemas.push( this.cloneFieldSchema(swItem) )
+            })
+            this.fieldSchemaData.push(fieldSchemas)
+          }
+        }
+      },
+
+      addToFieldSchemaData(rowIndex) {
+        let fieldSchemas = []
+        this.widget.widgetList.forEach(swItem => {
+          fieldSchemas.push( this.cloneFieldSchema(swItem) )
+        })
+
+        if (rowIndex === undefined) {
+          this.fieldSchemaData.push(fieldSchemas)
+        } else {
+          this.fieldSchemaData.splice(rowIndex, 0, fieldSchemas)
+        }
+      },
+
+      deleteFromFieldSchemaData(rowIndex) {
+        this.fieldSchemaData.splice(rowIndex, 1)
+      },
+
+      cloneFieldSchema(fieldWidget) {
+        let newFieldSchema = deepClone(fieldWidget)
+        newFieldSchema.id = fieldWidget.type + generateId()
+        return newFieldSchema
+      },
+
+      initEventHandler() {
+        if (this.widget.type !== 'sub-form') {
+          return
+        }
+
+        this.$on('setFormData', function (newFormData) {
+          this.initRowIdData(false)
+          this.initFieldSchemaData()
+
+          let subFormData = newFormData[this.widget.options.name] || []
+          setTimeout(() => {  //延时触发SubFormRowChange事件, 便于更新计算字段！！
+            this.handleSubFormRowChange(subFormData)
+          }, 800)
+        })
+      },
+
+      handleSubFormFirstRowAdd() {
+        if (this.widget.type !== 'sub-form') {
+          return
+        }
+
+        if (!!this.widget.options.showBlankRow && (this.rowIdData.length === 1)) {
+          let oldSubFormData = this.formModel[this.widget.options.name] || []
+          this.handleSubFormRowAdd(oldSubFormData, this.rowIdData[0])
+          this.handleSubFormRowChange(oldSubFormData)
+        }
+      },
+
+      addSubFormRow() {
+        let newSubFormDataRow = {}
+        this.widget.widgetList.forEach(subFormItem => {
+          if (!!subFormItem.formItemFlag) {
+            newSubFormDataRow[subFormItem.options.name] = subFormItem.options.defaultValue
+          }
+        })
+
+        let oldSubFormData = this.formModel[this.widget.options.name] || []
+        oldSubFormData.push(newSubFormDataRow)
+        this.addToRowIdData()
+        this.addToFieldSchemaData()
+
+        this.handleSubFormRowAdd(oldSubFormData, this.rowIdData[oldSubFormData.length - 1])
+        this.handleSubFormRowChange(oldSubFormData)
+      },
+
+      insertSubFormRow(beforeFormRowIndex) {
+        let newSubFormDataRow = {}
+        this.widget.widgetList.forEach(subFormItem => {
+          if (!!subFormItem.formItemFlag) {
+            newSubFormDataRow[subFormItem.options.name] = subFormItem.options.defaultValue
+          }
+        })
+
+        let oldSubFormData = this.formModel[this.widget.options.name] || []
+        oldSubFormData.splice(beforeFormRowIndex, 0, newSubFormDataRow)
+        this.insertToRowIdData(beforeFormRowIndex)
+        this.addToFieldSchemaData(beforeFormRowIndex)
+
+        this.handleSubFormRowInsert(oldSubFormData, this.rowIdData[beforeFormRowIndex])
+        this.handleSubFormRowChange(oldSubFormData)
+      },
+
+      deleteSubFormRow(formRowIndex) {
+        this.$confirm(this.i18nt('render.hint.deleteSubFormRow') + '?', this.i18nt('render.hint.prompt'), {
+          confirmButtonText: this.i18nt('render.hint.confirm'),
+          cancelButtonText: this.i18nt('render.hint.cancel')
+        }).then(() => {
+          let oldSubFormData = this.formModel[this.widget.options.name] || []
+          let deletedDataRow = deepClone(oldSubFormData[formRowIndex])
+          oldSubFormData.splice(formRowIndex, 1)
+          this.deleteFromRowIdData(formRowIndex)
+          this.deleteFromFieldSchemaData(formRowIndex)
+
+          this.handelSubFormRowDelete(oldSubFormData, deletedDataRow)
+          this.handleSubFormRowChange(oldSubFormData)
+        }).catch(() => {
+          //
+        })
+      },
+
+      handleSubFormRowChange(subFormData) {
+        if (!!this.widget.options.onSubFormRowChange) {
+          let customFunc = new Function('subFormData', this.widget.options.onSubFormRowChange)
+          customFunc.call(this, subFormData)
+        }
+      },
+
+      handleSubFormRowAdd(subFormData, newRowId) {
+        if (!!this.widget.options.onSubFormRowAdd) {
+          let customFunc = new Function('subFormData', 'newRowId', this.widget.options.onSubFormRowAdd)
+          customFunc.call(this, subFormData, newRowId)
+        }
+      },
+
+      handleSubFormRowInsert(subFormData, newRowId) {
+        if (!!this.widget.options.onSubFormRowInsert) {
+          let customFunc = new Function('subFormData', 'newRowId', this.widget.options.onSubFormRowInsert)
+          customFunc.call(this, subFormData, newRowId)
+        }
+      },
+
+      handelSubFormRowDelete(subFormData, deletedDataRow) {
+        if (!!this.widget.options.onSubFormRowDelete) {
+          let customFunc = new Function('subFormData', 'deletedDataRow', this.widget.options.onSubFormRowDelete)
+          customFunc.call(this, subFormData, deletedDataRow)
+        }
+      },
+
+    },
+  }
+</script>
+
+<style lang="scss" scoped>
+  .sub-form-container {
+    margin-bottom: 8px;
+    text-align: left; //IE浏览器强制居左对齐
+
+    ::v-deep .el-row.header-row {
+      padding-bottom: 0;
+    }
+
+    ::v-deep .el-row.sub-form-row {
+      padding-top: 3px;
+      padding-bottom: 3px;
+
+      .row-number-span {
+        margin-left: 16px;
+      }
+    }
+  }
+
+  div.action-header-column {
+    display: inline-block;
+    width: 120px;
+
+    .action-label {
+      margin-right: 12px;
+    }
+
+    .action-button {
+      padding-left: 8px;
+      padding-right: 8px;
+    }
+  }
+
+  div.field-header-column {
+    display: inline-block;
+    //overflow: hidden;
+    //white-space: nowrap;  //文字超出长度不自动换行
+    //text-overflow: ellipsis;  //文字超出长度显示省略号
+
+    span.custom-label i {
+      margin: 0 3px;
+    }
+  }
+
+  div.field-header-column.is-required:before {
+    content: '*';
+    color: #F56C6C;
+    margin-right: 4px;
+  }
+
+  div.label-center-left {
+    text-align: left;
+  }
+
+  div.label-center-align {
+    text-align: center;
+  }
+
+  div.label-right-align {
+    text-align: right;
+  }
+
+  div.sub-form-action-column {
+    display: inline-block;
+    width: 120px;
+
+    ::v-deep .el-form-item {
+      margin-bottom: 0;
+    }
+
+    ::v-deep .el-button {
+      font-size: 18px;
+      padding: 0;
+      background: #DCDFE6;
+      border: 4px solid #DCDFE6;
+    }
+
+  }
+
+  div.sub-form-action-column.hide-label {
+    ::v-deep .el-form-item__label {
+      display: none;
+    }
+  }
+
+  div.sub-form-table-column {
+    display: inline-block;
+    //width: 200px;
+
+    ::v-deep .el-form-item {
+      margin-left: 4px;
+      margin-right: 4px;
+      margin-bottom: 0;
+    }
+
+    ::v-deep .el-form-item__content {
+      margin-left: 0 !important;
+    }
+  }
+
+  div.sub-form-table-column.hide-label {
+    ::v-deep .el-form-item__label {
+      display: none;
+    }
+  }
+
+</style>
diff --git a/src/components/form-render/container-item/tab-item.vue b/src/components/form-render/container-item/tab-item.vue
new file mode 100644
index 0000000..6b07cf6
--- /dev/null
+++ b/src/components/form-render/container-item/tab-item.vue
@@ -0,0 +1,91 @@
+<template>
+  <container-item-wrapper>
+
+    <div :key="widget.id" class="tab-container"
+         v-show="!widget.options.hidden">
+      <el-tabs v-model="activeTabName" :type="widget.displayType" :ref="widget.id" :class="[customClass]">
+        <el-tab-pane v-for="(tab, index) in visibleTabs" :key="index" :label="tab.options.label"
+                     :disabled="tab.options.disabled" :name="tab.options.name">
+          <template v-for="(subWidget, swIdx) in tab.widgetList">
+            <template v-if="'container' === subWidget.category">
+              <component :is="subWidget.type + '-item'" :widget="subWidget" :key="swIdx" :parent-list="tab.widgetList"
+                              :index-of-parent-list="swIdx" :parent-widget="widget"></component>
+            </template>
+            <template v-else>
+              <component :is="subWidget.type + '-widget'" :field="subWidget" :key="swIdx" :parent-list="tab.widgetList"
+                            :index-of-parent-list="swIdx" :parent-widget="widget"></component>
+            </template>
+          </template>
+        </el-tab-pane>
+      </el-tabs>
+    </div>
+
+  </container-item-wrapper>
+</template>
+
+<script>
+  import emitter from 'element-ui/lib/mixins/emitter'
+  import i18n from "../../../utils/i18n"
+  import refMixin from "../../../components/form-render/refMixin"
+  import ContainerItemWrapper from './container-item-wrapper'
+  import containerItemMixin from "./containerItemMixin";
+  import ContainerItems from './index'
+  import FieldComponents from '@/components/form-designer/form-widget/field-widget/index'
+
+  export default {
+    name: "tab-item",
+    componentName: 'ContainerItem',
+    mixins: [emitter, i18n, refMixin, containerItemMixin],
+    components: {
+      ContainerItemWrapper,
+      ...ContainerItems,
+      ...FieldComponents,
+    },
+    props: {
+      widget: Object,
+    },
+    inject: ['refList', 'sfRefList', 'globalModel'],
+    data() {
+      return {
+        activeTabName: '',
+      }
+    },
+    computed: {
+      visibleTabs() {
+        return this.widget.tabs.filter(tp => {
+          return !tp.options.hidden
+        })
+      },
+
+    },
+    created() {
+      this.initRefList()
+    },
+    mounted() {
+      this.initActiveTab()
+    },
+    beforeDestroy() {
+      this.unregisterFromRefList()
+    },
+    methods: {
+      initActiveTab() {
+        if ((this.widget.type === 'tab') && (this.widget.tabs.length > 0)) {
+          let activePanes = this.widget.tabs.filter((tp) => {
+            return tp.options.active === true
+          })
+          if (activePanes.length > 0) {
+            this.activeTabName = activePanes[0].options.name
+          } else {
+            this.activeTabName = this.widget.tabs[0].options.name
+          }
+        }
+      },
+
+    },
+  }
+</script>
+
+<style lang="scss" scoped>
+
+
+</style>
diff --git a/src/components/form-render/table-cell-item.vue b/src/components/form-render/container-item/table-cell-item.vue
similarity index 61%
rename from src/components/form-render/table-cell-item.vue
rename to src/components/form-render/container-item/table-cell-item.vue
index 9dec7c4..99e33ba 100644
--- a/src/components/form-render/table-cell-item.vue
+++ b/src/components/form-render/container-item/table-cell-item.vue
@@ -4,29 +4,30 @@
       :style="{width: widget.options.cellWidth + ' !important' || '', height: widget.options.cellHeight + ' !important' || ''}">
     <template v-for="(subWidget, swIdx) in widget.widgetList">
       <template v-if="'container' === subWidget.category">
-        <container-item :widget="subWidget" :key="swIdx" :parent-list="widget.widgetList"
-                          :index-of-parent-list="swIdx" :parent-widget="widget"></container-item>
+        <component :is="subWidget.type + '-item'" :widget="subWidget" :key="swIdx" :parent-list="widget.widgetList"
+                        :index-of-parent-list="swIdx" :parent-widget="widget"></component>
       </template>
       <template v-else>
-        <field-widget :field="subWidget" :key="swIdx" :parent-list="widget.widgetList"
-                      :index-of-parent-list="swIdx" :parent-widget="widget"></field-widget>
+        <component :is="subWidget.type + '-widget'" :field="subWidget" :key="swIdx" :parent-list="widget.widgetList"
+                      :index-of-parent-list="swIdx" :parent-widget="widget"></component>
       </template>
     </template>
   </td>
 </template>
 
 <script>
-  import FieldWidget from "../../components/form-designer/form-widget/field-widget";
-  import i18n from "../../utils/i18n";
-  import refMixin from "../../components/form-render/refMixin";
+  import i18n from "../../../utils/i18n"
+  import refMixin from "../../../components/form-render/refMixin"
+  import ContainerItems from './index'
+  import FieldComponents from '@/components/form-designer/form-widget/field-widget/index'
 
   export default {
     name: "TableCellItem",
     componentName: "TableCellItem",
     mixins: [i18n, refMixin],
     components: {
-      FieldWidget,
-      //'container-item': ContainerItem,  /* 递归组件必须使用这种写法！！ */
+      ...ContainerItems,
+      ...FieldComponents,
     },
     props: {
       widget: Object,
@@ -42,7 +43,7 @@
 
     },
     created() {
-      /* tableCell不生成组件引用！！ */
+      /* tableCell不生成组件引用，故无须调用initRefList！！ */
       //this.initRefList()
     },
     methods: {
diff --git a/src/components/form-render/container-item/table-item.vue b/src/components/form-render/container-item/table-item.vue
new file mode 100644
index 0000000..a0ad45b
--- /dev/null
+++ b/src/components/form-render/container-item/table-item.vue
@@ -0,0 +1,65 @@
+<template>
+  <container-item-wrapper>
+
+    <div :key="widget.id" class="table-container"
+         v-show="!widget.options.hidden">
+      <table :ref="widget.id" class="table-layout" :class="[customClass]">
+        <tbody>
+        <tr v-for="(row, rowIdx) in widget.rows" :key="row.id">
+          <template v-for="(colWidget, colIdx) in row.cols">
+            <table-cell-item v-if="!colWidget.merged" :widget="colWidget" :key="colIdx" :parent-list="widget.cols"
+                             :row-index="rowIdx" :col-index="colIdx" :parent-widget="widget"></table-cell-item>
+          </template>
+        </tr>
+        </tbody>
+      </table>
+    </div>
+
+  </container-item-wrapper>
+</template>
+
+<script>
+  import emitter from 'element-ui/lib/mixins/emitter'
+  import i18n from "../../../utils/i18n"
+  import refMixin from "../../../components/form-render/refMixin"
+  import ContainerItemWrapper from './container-item-wrapper'
+  import TableCellItem from './table-cell-item'
+  import containerItemMixin from "./containerItemMixin";
+
+  export default {
+    name: "table-item",
+    componentName: 'ContainerItem',
+    mixins: [emitter, i18n, refMixin, containerItemMixin],
+    components: {
+      ContainerItemWrapper,
+      TableCellItem,
+    },
+    props: {
+      widget: Object,
+    },
+    inject: ['refList', 'sfRefList', 'globalModel'],
+    created() {
+      this.initRefList()
+    },
+    mounted() {
+
+    },
+    beforeDestroy() {
+      this.unregisterFromRefList()
+    },
+    methods: {
+
+    },
+  }
+</script>
+
+<style lang="scss" scoped>
+  div.table-container {
+    table.table-layout {
+      width: 100%;
+      table-layout: fixed;
+      border-collapse: collapse;
+    }
+  }
+
+</style>
diff --git a/src/components/form-render/index.vue b/src/components/form-render/index.vue
index 6173414..133d1d7 100644
--- a/src/components/form-render/index.vue
+++ b/src/components/form-render/index.vue
@@ -2,7 +2,7 @@
 /**
  * author: vformAdmin
  * email: vdpadmin@163.com
- * website: http://www.vform666.com/
+ * website: http://www.vform666.com
  * date: 2021.08.18
  * remark: 如果要分发VForm源码，需在本文件顶部保留此文件头信息！！
  */
@@ -15,12 +15,12 @@
            @submit.native.prevent>
     <template v-for="(widget, index) in widgetList">
       <template v-if="'container' === widget.category">
-        <container-item :widget="widget" :key="widget.id" :parent-list="widgetList"
-                          :index-of-parent-list="index" :parent-widget="null"></container-item>
+        <component :is="getContainerWidgetName(widget)" :widget="widget" :key="widget.id" :parent-list="widgetList"
+                        :index-of-parent-list="index" :parent-widget="null"></component>
       </template>
       <template v-else>
-        <field-widget :field="widget" :form-model="formDataModel" :designer="null" :key="widget.id" :parent-list="widgetList"
-                      :index-of-parent-list="index" :parent-widget="null"></field-widget>
+        <component :is="getWidgetName(widget)" :field="widget" :form-model="formDataModel" :designer="null" :key="widget.id" :parent-list="widgetList"
+                      :index-of-parent-list="index" :parent-widget="null"></component>
       </template>
     </template>
   </el-form>
@@ -29,19 +29,20 @@
 <script>
   //import ElForm from 'element-ui/packages/form/src/form.vue'  /* 用于源码调试Element UI */
   import emitter from 'element-ui/lib/mixins/emitter'
-  import FieldWidget from "../form-designer/form-widget/field-widget";
-  import ContainerItem from "./container-item";
-  import {deepClone, insertCustomCssToHead, insertGlobalFunctionsToHtml} from "../../utils/util";
-  import i18n, { changeLocale } from "../../utils/i18n";
+  import ContainerComponents from './container-item/index'
+  import FieldComponents from '@/components/form-designer/form-widget/field-widget/index'
+  import {deepClone, insertCustomCssToHead, insertGlobalFunctionsToHtml} from "../../utils/util"
+  import i18n, { changeLocale } from "../../utils/i18n"
 
   export default {
     name: "VFormRender",
     componentName: 'VFormRender',
     mixins: [emitter, i18n],
     components: {
-      FieldWidget,
-      ContainerItem,
       //ElForm,
+
+      ...ContainerComponents,
+      ...FieldComponents,
     },
     props: {
       formJson: Object, //prop传入的表单JSON配置
@@ -119,6 +120,14 @@
       this.handleOnMounted()
     },
     methods: {
+      getContainerWidgetName(widget) {
+        return widget.type + '-item'
+      },
+
+      getWidgetName(widget) {
+        return widget.type + '-widget'
+      },
+
       initLocale() {
         let curLocale = localStorage.getItem('v_form_locale') || 'zh-CN'
         this.changeLanguage(curLocale)
@@ -209,6 +218,8 @@
             this.$set(this.formDataModel, wItem.options.name, deepClone(initialValue))
           }
         }
+
+        //TODO: 如果是自定义容器组件，需要特殊处理！！！
       },
 
       addFieldChangeEventHandler() {
diff --git a/src/lang/en-US.js b/src/lang/en-US.js
index c40e82b..832bfa8 100644
--- a/src/lang/en-US.js
+++ b/src/lang/en-US.js
@@ -103,6 +103,8 @@ export default {
       fileNameForSave: 'File name:',
       saveFileTitle: 'Save as File',
       fileNameInputPlaceholder: 'Enter the file name',
+      sampleLoadedSuccess: 'Example loaded successfully',
+      sampleLoadedFail: 'Sample load failed',
 
       widgetSetting: 'Widget Config',
       formSetting: 'Form Config',
@@ -239,6 +241,7 @@ export default {
       inputButton: 'Input Button Setting',
       appendButton: 'Append Button',
       appendButtonDisabled: 'Button Disabled',
+      appendButtonIcon: 'Append Button Icon',
       buttonIcon: 'Button Icon',
       switchWidth: 'Width of Switch(px)',
       activeText: 'Active Text',
diff --git a/src/lang/en-US_extension.js b/src/lang/en-US_extension.js
new file mode 100644
index 0000000..a91909f
--- /dev/null
+++ b/src/lang/en-US_extension.js
@@ -0,0 +1,5 @@
+export default {
+  extension: {
+
+  }
+}
diff --git a/src/lang/zh-CN.js b/src/lang/zh-CN.js
index c51fb99..8569f97 100644
--- a/src/lang/zh-CN.js
+++ b/src/lang/zh-CN.js
@@ -103,6 +103,8 @@ export default {
       fileNameForSave: '文件名：',
       saveFileTitle: '保存为文件',
       fileNameInputPlaceholder: '请输入文件名',
+      sampleLoadedSuccess: '表单示例加载成功',
+      sampleLoadedFail: '表单示例加载失败',
 
       widgetSetting: '组件设置',
       formSetting: '表单设置',
@@ -239,7 +241,8 @@ export default {
       inputButton: '输入框按钮设置',
       appendButton: '添加后置按钮',
       appendButtonDisabled: '后置按钮禁用',
-      buttonIcon: '后置按钮Icon',
+      appendButtonIcon: '后置按钮Icon',
+      buttonIcon: '按钮Icon',
       switchWidth: '开关宽度（像素）',
       activeText: '开启时文字描述',
       inactiveText: '关闭时文字描述',
@@ -287,7 +290,7 @@ export default {
       addEventHandler: '编写代码',
       editWidgetEventHandler: '组件事件处理',
       editFormEventHandler: '表单事件处理',
-      formSFCSetting: '生产SFC设置',
+      formSFCSetting: '生成SFC设置',
       formModelName: '数据对象名称',
       formRefName: '引用名称',
       formRulesName: '验证规则名称',
diff --git a/src/lang/zh-CN_extension.js b/src/lang/zh-CN_extension.js
new file mode 100644
index 0000000..a91909f
--- /dev/null
+++ b/src/lang/zh-CN_extension.js
@@ -0,0 +1,5 @@
+export default {
+  extension: {
+
+  }
+}
diff --git a/src/utils/config.js b/src/utils/config.js
index edc0d33..7e8c26e 100644
--- a/src/utils/config.js
+++ b/src/utils/config.js
@@ -8,7 +8,9 @@ export const DESIGNER_OPTIONS = {
 
 }
 
-export const VARIANT_FORM_VERSION = '2.0.1'
+export const VARIANT_FORM_VERSION = '2.1.0'
+
+export const MOCK_CASE_URL = 'https://www.fastmock.site/mock/2de212e0dc4b8e0885fea44ab9f2e1d0/vform/'
 
 //export const ACE_BASE_PATH = 'public/lib/ace/src-min-noconflict'
 export const ACE_BASE_PATH = 'https://ks3-cn-beijing.ksyun.com/vform2021/ace-mini'
diff --git a/src/utils/i18n.js b/src/utils/i18n.js
index 0db7dc0..dda4717 100644
--- a/src/utils/i18n.js
+++ b/src/utils/i18n.js
@@ -9,6 +9,8 @@ import enLocale from "@/lang/en-US";
 import zhLocale from "@/lang/zh-CN";
 import enLocale_render from "@/lang/en-US_render";
 import zhLocale_render from "@/lang/zh-CN_render";
+import enLocale_extension from "@/lang/en-US_extension";
+import zhLocale_extension from "@/lang/zh-CN_extension";
 
 const langResources = {
   'en-US': {
@@ -17,7 +19,8 @@ const langResources = {
     },
     ...enLocaleElement,
     ...enLocale,
-    ...enLocale_render
+    ...enLocale_render,
+    ...enLocale_extension
   },
 
   'zh-CN': {
@@ -26,7 +29,8 @@ const langResources = {
     },
     ...zhLocaleElement,
     ...zhLocale,
-    ...zhLocale_render
+    ...zhLocale_render,
+    ...zhLocale_extension
   }
 }
 
diff --git a/src/utils/util.js b/src/utils/util.js
index 01efc33..e594656 100644
--- a/src/utils/util.js
+++ b/src/utils/util.js
@@ -93,7 +93,7 @@ export const optionExists = function(optionsObj, optionName) {
   return Object.keys(optionsObj).indexOf(optionName) > -1
 }
 
-export const loadRemoteScript = function(srcPath, callback) {  /*记载远程js，加载成功后执行回调函数*/
+export const loadRemoteScript = function(srcPath, callback) {  /*加载远程js，加载成功后执行回调函数*/
   let sid = encodeURIComponent(srcPath)
   let oldScriptEle = document.getElementById(sid)
 
@@ -132,7 +132,7 @@ export function traverseFieldWidgets(widgetList, handler) {
       w.tabs.map(tab => {
         traverseFieldWidgets(tab.widgetList, handler)
       })
-    } else if (w.type === 'sbu-form') {
+    } else if (w.type === 'sub-form') {
       traverseFieldWidgets(w.widgetList, handler)
     }
   })
@@ -158,7 +158,7 @@ export function traverseContainWidgets(widgetList, handler) {
       w.tabs.map(tab => {
         traverseContainWidgets(tab.widgetList, handler)
       })
-    } else if (w.type === 'sbu-form') {
+    } else if (w.type === 'sub-form') {
       traverseContainWidgets(w.widgetList, handler)
     }
   })
@@ -182,8 +182,7 @@ export function copyToClipboard(content, clickEvent, $message, successMsg, error
   clipboard.onClick(clickEvent)
 }
 
-export function getQueryParam(variable)
-{
+export function getQueryParam(variable) {
   let query = window.location.search.substring(1);
   let vars = query.split("&")
   for (let i=0; i<vars.length; i++) {