diff --git a/WebRoot/Excel/1392C526-7879-4BB4-ADC0-0300BA3D9456.xlsx b/WebRoot/Excel/1392C526-7879-4BB4-ADC0-0300BA3D9456.xlsx
new file mode 100644
index 00000000..34cc405f
Binary files /dev/null and b/WebRoot/Excel/1392C526-7879-4BB4-ADC0-0300BA3D9456.xlsx differ
diff --git a/WebRoot/Excel/9EEAEAD7-7CE7-4043-A965-B9B2791CE133.xlsx b/WebRoot/Excel/9EEAEAD7-7CE7-4043-A965-B9B2791CE133.xlsx
new file mode 100644
index 00000000..2df2845d
Binary files /dev/null and b/WebRoot/Excel/9EEAEAD7-7CE7-4043-A965-B9B2791CE133.xlsx differ
diff --git a/WebRoot/Excel/BFB61E21-40BA-4BFF-9E6A-8C7AA971A0A8.xlsx b/WebRoot/Excel/BFB61E21-40BA-4BFF-9E6A-8C7AA971A0A8.xlsx
new file mode 100644
index 00000000..4659b908
Binary files /dev/null and b/WebRoot/Excel/BFB61E21-40BA-4BFF-9E6A-8C7AA971A0A8.xlsx differ
diff --git a/WebRoot/view/tb/form/ayq/modules/formDesignerView.js b/WebRoot/view/tb/form/ayq/modules/formDesignerView.js
new file mode 100644
index 00000000..cabe5090
--- /dev/null
+++ b/WebRoot/view/tb/form/ayq/modules/formDesignerView.js
@@ -0,0 +1,5292 @@
+/**
+ +------------------------------------------------------------------------------------+
+ + ayq-layui-form-designer(layui表单设计器)
+ +------------------------------------------------------------------------------------+
+ + ayq-layui-form-designer v2.0.0
+ * MIT License By http://116.62.237.101:8009/
+ + 作者：谁家没一个小强
+ + 官方：
+ + 时间：2022-05-23
+ +------------------------------------------------------------------------------------+
+ + 版权声明：该版权完全归谁家没一个小强所有，可转载使用和学习，但请务必保留版权信息
+ +------------------------------------------------------------------------------------+
+ + 本项目是一个基于layui表单组件的表单设计器
+ + 1.本项目基于Layui、Jquery、Sortable
+ + 2.项目已经基本实现了拖动布局，父子布局
+ + 3.项目实现了大部分基于Layui的Form表单控件布局，包括输入框、编辑器、下拉、单选、单选组、多选组、日期、滑块、评分、轮播、图片、颜色选择、图片上传、文件上传
+ + 4.表单数据的获取与回显,禁用全表单
+ +------------------------------------------------------------------------------------+
+ */
+layui.config({ base: './ayq/modules/' }).define(["layer", 'flow', "laytpl", "element", "form", "slider", "laydate", "rate", "colorpicker", "layedit", "carousel", "upload", "formField", "staticFieldView", "numberInput", "iconPicker", "cron", "labelGeneration"]
+    , function (exports) {
+        var $ = layui.jquery
+            , layer = layui.layer
+            , laytpl = layui.laytpl
+            , setter = layui.cache
+            , element = layui.element
+            , slider = layui.slider
+            , laydate = layui.laydate
+            , rate = layui.rate
+            , colorpicker = layui.colorpicker
+            , carousel = layui.carousel
+            , form = layui.form
+            , upload = layui.upload
+            , layedit = layui.layedit
+            , flow = layui.flow
+            , formField = layui.formField
+            , staticField = layui.staticFieldView
+            , hint = layui.hint
+            , numberInput = layui.numberInput
+            , iconPicker = layui.iconPicker
+            , cron = layui.cron
+            , labelGeneration = layui.labelGeneration
+            , files = []
+            , images = []
+            , iceEditorObjects = {}
+            , labelGenerationObjects = {}
+            , signObjects = {}
+            //模块名称常量
+            , MOD_NAME = 'formDesigner'
+            //外部接口
+            , formDesigner = {
+                index: layui.formDesigner ? (layui.formDesigner.index + 10000) : 0
+                //设置全局项
+                , set: function (options) {
+                    var that = this;
+                    that.config = $.extend({}
+                        , that.config
+                        , options);
+                    return that;
+                }
+                //事件监听
+                , on: function (events
+                    , callback) {
+                    return layui.onevent.call(this
+                        , MOD_NAME
+                        , events
+                        , callback);
+                }
+            }
+            , thisIns = function () {
+                var that = this
+                    , options = that.config;
+                return {
+                    reload: function (options) {
+                        that.reload.call(that
+                            , options);
+                    }, getOptions: function () {
+                        return options || null;
+                    }, getData: function () {
+                        return options.data || null;
+                    }, geticeEditorObjects: function () {
+                        return iceEditorObjects || null;
+                    }, getImages: function () {
+                        return images || null;
+                    }, getFiles: function () {
+                        return files || null;
+                    }, getFormData: function () {
+                        return that.getFormData() || null;
+                    }, setFormData: function (json) {
+                        return that.setFormData(json) || null;
+                    }, globalDisable: function () {
+                        return that.globalDisable() || null;
+                    }, globalNoDisable: function () {
+                        return that.globalNoDisable() || null;
+                    },
+                }
+            }
+            , getThisInsConfig = function (id) {
+                var config = thisIns.config[id];
+                if (!config) {
+                    hint.error('在表实例中找不到ID选项');
+                }
+                return config || null;
+            }
+            , Class = function (options) {
+                var that = this;
+                that.index = ++formDesigner.index; //增加实例，index 也是要增加JSON.stringify(options.data, null, 4)
+                that.config = $.extend({}
+                    , that.config
+                    , formDesigner.config
+                    , options);
+                that.render();
+            };
+
+
+        /* 组件定义 */
+        Class.prototype.components = {
+            input: {
+                /**
+                 * 根据json对象生成html对象
+                 * @param {object} json 当前组件的json属性
+                 * @param {boolean} selected 是否被选中
+                 * @param {object} elem 表单面板jquery对象
+                 * @param {object} that 实例对象
+                 * */
+                render: function (json, selected, elem, that) {
+                    if (selected === undefined) {
+                        selected = false;
+                    }
+                    var _selected = selected ? 'active' : '';
+                    var _disabled = json.disabled ? 'disabled=""' : '';
+                    var _disabledClass = json.disabled ? ' layui-disabled' : '';
+                    var _readonly = json.readonly ? 'readonly=""' : '';
+                    var _required = json.required ? 'required' : '';
+                    var _hideLabel = json.hideLabel ? 'display: none;' : '';
+                    if (json.expression !== null && json.expression !== undefined) {
+                        if (json.expression !== '') {
+                            _required = _required + '|' + json.expression;
+                        }
+                    }
+                    var _html = '<div id="{0}" class="layui-form-item {2}"  data-id="{0}" data-tag="{1}" data-index="{3}">'.format(json.id, json.tag, _selected, json.index);
+                    _html += '<label class="layui-form-label {0}" style="width: {3}px;{4}"><span style="color:red;">{2}</span>{1}:</label>'.format(json.required ? 'layui-form-required' : '', json.label, json.required ? '*' : '', json.labelWidth, _hideLabel);
+                    if (json.hideLabel) {
+                        _html += '<div class="layui-input-block" style="margin-left: 0px">';
+                    } else {
+                        _html += '<div class="layui-input-block" style="margin-left: {0}px">'.format(json.labelWidth);
+                    }
+                    _html += '<input name="{0}" value="{1}" placeholder="{3}" class="layui-input{7}" lay-vertype="tips" lay-verify="{6}" {4} {5} style="width:{2}">'
+                        .format(json.id, json.defaultValue ? json.defaultValue : '', json.width, json.placeholder, _readonly, _disabled, _required, _disabledClass);
+                    _html += '</div>';
+                    _html += '</div>';
+                    elem.append(_html);
+                },
+                /**
+                 * 根据json对象更新html对象
+                 * @param {object} json 变更后的json属性
+                 * @param {object} that 实例对象
+                 * */
+                update: function (json, that) {
+                    var _disabled = json.disabled ? 'disabled=""' : '';
+                    var _readonly = json.readonly ? 'readonly=""' : '';
+                    var _required = json.required ? 'required' : '';
+                    var _disabledClass = json.disabled ? ' layui-disabled' : '';
+                    if (json.expression !== null && json.expression !== undefined) {
+                        if (json.expression !== '') {
+                            _required = 'required' + '|' + json.expression;
+                        }
+                    }
+                    var $block = $('#' + json.id + ' .layui-input-block');
+                    var $label = $('#' + json.id + ' .layui-form-label');
+                    $block.empty();
+                    $label.empty();
+                    $label.css("width", json.labelWidth);
+                    if (json.required) {
+                        $label.append('<span style="color:red;">*</span>');
+                    }
+                    $label.append(json.label + ":");
+                    if (json.hideLabel) {
+                        $label.css("display", "none");
+                        $block.css("margin-left", "0px");
+                    } else {
+                        $label.css("display", "block");
+                        $block.css("margin-left", json.labelWidth);
+                    }
+                    var _html = '';
+                    //重绘设计区改id下的所有元素
+                    _html += '<input name="{0}" value="{1}" placeholder="{3}" class="layui-input{7}" lay-vertype="tips" lay-verify="{6}" {4} {5} style="width:{2}">'
+                        .format(json.id, json.defaultValue ? json.defaultValue : '', json.width, json.placeholder, _readonly, _disabled, _required, _disabledClass);
+                    $block.append(_html);
+                },
+                /**
+                 * 根据components组件对象获取组件属性
+                 * @param {object} id 所属组件id
+                 * @param {object} index 所属对象组件索引
+                 * @param {object} that 实例对象
+                 * */
+                jsonData: function (id, index, that) {
+                    var _json = JSON.parse(JSON.stringify(formField.components.input));
+                    _json.id = id;
+                    _json.index = index;
+                    return _json;
+                },
+                /**
+                 * 根据 json 对象显示对应的属性
+                 * @param {object} json 当前组件的json属性
+                 * @param {object} that 实例对象
+                 * */
+                property: function (json, that) {
+                    that.renderCommonProperty(json); //根据 json 对象获取对应的属性的html
+                    that.initCommonProperty(json); //初始化 json 对象获取对应的属性
+                },
+                /**
+                 * 根据json对象生成html文本
+                 * @param {object} json 当前组件的json属性
+                 * @param {boolean} selected 是否被选中
+                 * @param {object} that 实例对象
+                 * */
+                generateHtml: function (json, selected, that) {
+                    if (selected === undefined) {
+                        selected = false;
+                    }
+                    var _selected = selected ? 'active' : '';
+                    var _disabled = json.disabled ? 'disabled=""' : '';
+                    var _disabledClass = json.disabled ? ' layui-disabled' : '';
+                    var _readonly = json.readonly ? 'readonly=""' : '';
+                    var _required = json.required ? 'required' : '';
+                    var _hideLabel = json.hideLabel ? 'display: none;' : '';
+                    if (json.expression !== null && json.expression !== undefined) {
+                        if (json.expression !== '') {
+                            _required = _required + '|' + json.expression;
+                        }
+                    }
+                    var _html = '<div id="{0}" class="layui-form-item {2}"  data-id="{0}" data-tag="{1}" data-index="{3}">'.format(json.id, json.tag, _selected, json.index);
+                    _html += '<label class="layui-form-label {0}" style="width: {3}px;{4}"><span style="color:red;">{2}</span>{1}:</label>'.format(json.required ? 'layui-form-required' : '', json.label, json.required ? '*' : '', json.labelWidth, _hideLabel);
+                    if (json.hideLabel) {
+                        _html += '<div class="layui-input-block" style="margin-left: 0px">';
+                    } else {
+                        _html += '<div class="layui-input-block" style="margin-left: {0}px">'.format(json.labelWidth);
+                    }
+                    _html += '<input name="{0}" value="{1}" placeholder="{3}" class="layui-input{7}" lay-vertype="tips" lay-verify="{6}" {4} {5} style="width:{2}">'
+                        .format(json.id, json.defaultValue ? json.defaultValue : '', json.width, json.placeholder, _readonly, _disabled, _required, _disabledClass);
+                    _html += '</div>';
+                    _html += '</div>';
+                    return _html;
+                },
+                /**
+                 * 根据json对象生成js文本
+                 * @param {object} json 变更后的json属性
+                 * @param {object} that 实例对象
+                 * */
+                generateScript: function (json, that) {
+                    return '';
+                }
+            },
+            blockquote: {
+                /**
+                 * 根据json对象生成html对象
+                 * @param {object} json 当前组件的json属性
+                 * @param {boolean} selected 是否被选中
+                 * @param {object} elem 表单面板jquery对象
+                 * @param {object} that 实例对象
+                 * */
+                render: function (json, selected, elem, that) {
+                    if (selected === undefined) {
+                        selected = false;
+                    }
+                    var _selected = selected ? 'active' : '';
+                    var _html = '<div id="{0}" class="layui-form-item {2}"  data-id="{0}" data-tag="{1}" data-index="{3}">'.format(json.id, json.tag, _selected, json.index);
+                    _html += '<blockquote id="{0}" class="layui-elem-quote" style="width:calc({2} - 35px);border-left: 5px solid {3};">{1}</blockquote>'
+                        .format(json.id + json.tag, json.defaultValue ? json.defaultValue : '', json.width, json.colorSelection);
+                    _html += '</div>';
+                    elem.append(_html);
+                },
+                /**
+                 * 根据json对象更新html对象
+                 * @param {object} json 变更后的json属性
+                 * @param {object} that 实例对象
+                 * */
+                update: function (json, that) {
+                    var $block = $('#' + json.id + json.tag);
+                    $block.css("width", "calc({0} - 35px)".format(json.width));
+                    $block.css("border-left", "5px solid {0}".format(json.colorSelection));
+                    $block.html(json.defaultValue);
+                },
+                /**
+                 * 根据components组件对象获取组件属性
+                 * @param {object} id 所属组件id
+                 * @param {object} index 所属对象组件索引
+                 * @param {object} that 实例对象
+                 * */
+                jsonData: function (id, index, that) {
+                    var _json = JSON.parse(JSON.stringify(formField.components.blockquote));
+                    _json.id = id;
+                    _json.index = index;
+                    return _json;
+                },
+                /**
+                 * 根据 json 对象显示对应的属性
+                 * @param {object} json 当前组件的json属性
+                 * @param {object} that 实例对象
+                 * */
+                property: function (json, that) {
+                    that.renderCommonProperty(json); //根据 json 对象获取对应的属性的html
+                    that.initCommonProperty(json); //初始化 json 对象获取对应的属性
+                },
+                /**
+                 * 根据json对象生成html文本
+                 * @param {object} json 当前组件的json属性
+                 * @param {boolean} selected 是否被选中
+                 * @param {object} that 实例对象
+                 * */
+                generateHtml: function (json, selected, that) {
+                    if (selected === undefined) {
+                        selected = false;
+                    }
+                    var _selected = selected ? 'active' : '';
+                    var _html = '<div id="{0}" class="layui-form-item {2}"  data-id="{0}" data-tag="{1}" data-index="{3}">'.format(json.id, json.tag, _selected, json.index);
+                    _html += '<blockquote id="{0}" class="layui-elem-quote" style="width:calc({2} - 35px);border-left: 5px solid {3};">{1}</blockquote>'
+                        .format(json.id + json.tag, json.defaultValue ? json.defaultValue : '', json.width, json.colorSelection);
+                    _html += '</div>';
+                    return _html;
+                },
+                /**
+                 * 根据json对象生成js文本
+                 * @param {object} json 变更后的json属性
+                 * @param {object} that 实例对象
+                 * */
+                generateScript: function (json, that) {
+                    return '';
+                }
+            },
+            spacing: {
+                /**
+                 * 根据json对象生成html对象
+                 * @param {object} json 当前组件的json属性
+                 * @param {boolean} selected 是否被选中
+                 * @param {object} elem 表单面板jquery对象
+                 * @param {object} that 实例对象
+                 * */
+                render: function (json, selected, elem, that) {
+                    if (selected === undefined) {
+                        selected = false;
+                    }
+                    var _selected = selected ? 'active' : '';
+                    var _html = '<div id="{0}" class="layui-form-item {2}"  data-id="{0}" data-tag="{1}" data-index="{3}">'.format(json.id, json.tag, _selected, json.index);
+                    _html += '<div id="{0}" style="height:{1}px;"></div>'
+                        .format(json.id + json.tag, json.whiteSpace);
+                    _html += '</div>';
+                    elem.append(_html);
+                },
+                /**
+                 * 根据json对象更新html对象
+                 * @param {object} json 变更后的json属性
+                 * @param {object} that 实例对象
+                 * */
+                update: function (json, that) {
+                    var $block = $('#' + json.id + json.tag);
+                    $block.css("height", "{0}px".format(json.whiteSpace));
+                },
+                /**
+                 * 根据components组件对象获取组件属性
+                 * @param {object} id 所属组件id
+                 * @param {object} index 所属对象组件索引
+                 * @param {object} that 实例对象
+                 * */
+                jsonData: function (id, index, that) {
+                    var _json = JSON.parse(JSON.stringify(formField.components.spacing));
+                    _json.id = id;
+                    _json.index = index;
+                    return _json;
+                },
+                /**
+                 * 根据 json 对象显示对应的属性
+                 * @param {object} json 当前组件的json属性
+                 * @param {object} that 实例对象
+                 * */
+                property: function (json, that) {
+                    that.renderCommonProperty(json); //根据 json 对象获取对应的属性的html
+                    that.initCommonProperty(json); //初始化 json 对象获取对应的属性
+                },
+                /**
+                 * 根据json对象生成html文本
+                 * @param {object} json 当前组件的json属性
+                 * @param {boolean} selected 是否被选中
+                 * @param {object} that 实例对象
+                 * */
+                generateHtml: function (json, selected, that) {
+                    if (selected === undefined) {
+                        selected = false;
+                    }
+                    var _selected = selected ? 'active' : '';
+                    var _html = '<div id="{0}" class="layui-form-item {2}"  data-id="{0}" data-tag="{1}" data-index="{3}">'.format(json.id, json.tag, _selected, json.index);
+                    _html += '<div id="{0}" style="height:{1}px;"></div>'
+                        .format(json.id + json.tag, json.whiteSpace);
+                    _html += '</div>';
+                    return _html;
+                },
+                /**
+                 * 根据json对象生成js文本
+                 * @param {object} json 变更后的json属性
+                 * @param {object} that 实例对象
+                 * */
+                generateScript: function (json, that) {
+                    return '';
+                }
+            },
+            line: {
+                /**
+                 * 根据json对象生成html对象
+                 * @param {object} json 当前组件的json属性
+                 * @param {boolean} selected 是否被选中
+                 * @param {object} elem 表单面板jquery对象
+                 * @param {object} that 实例对象
+                 * */
+                render: function (json, selected, elem, that) {
+                    if (selected === undefined) {
+                        selected = false;
+                    }
+                    var _selected = selected ? 'active' : '';
+                    var _html = '<div id="{0}" class="layui-form-item {2}"  data-id="{0}" data-tag="{1}" data-index="{3}">'.format(json.id, json.tag, _selected, json.index);
+                    _html += '<fieldset id="{0}" class="layui-elem-field layui-field-title" style="border-color: {1};width: {2}">'.format(json.id + json.tag, json.colorSelection, json.width);
+                    if (json.defaultValue) {
+                        _html += '<legend>{0}</legend>'.format(json.defaultValue);
+                    }
+                    _html += '</fieldset>';
+                    elem.append(_html);
+                },
+                /**
+                 * 根据json对象更新html对象
+                 * @param {object} json 变更后的json属性
+                 * @param {object} that 实例对象
+                 * */
+                update: function (json, that) {
+                    var $block = $('#' + json.id + json.tag);
+                    $block.css("width", json.width);
+                    $block.css("border-color", json.colorSelection);
+                    $block.empty();
+                    if (json.defaultValue) {
+                        $block.append('<legend>{0}</legend>'.format(json.defaultValue));
+                    }
+                },
+                /**
+                 * 根据components组件对象获取组件属性
+                 * @param {object} id 所属组件id
+                 * @param {object} index 所属对象组件索引
+                 * @param {object} that 实例对象
+                 * */
+                jsonData: function (id, index, that) {
+                    var _json = JSON.parse(JSON.stringify(formField.components.line));
+                    _json.id = id;
+                    _json.index = index;
+                    return _json;
+                },
+                /**
+                 * 根据 json 对象显示对应的属性
+                 * @param {object} json 当前组件的json属性
+                 * @param {object} that 实例对象
+                 * */
+                property: function (json, that) {
+                    that.renderCommonProperty(json); //根据 json 对象获取对应的属性的html
+                    that.initCommonProperty(json); //初始化 json 对象获取对应的属性
+                },
+                /**
+                 * 根据json对象生成html文本
+                 * @param {object} json 当前组件的json属性
+                 * @param {boolean} selected 是否被选中
+                 * @param {object} that 实例对象
+                 * */
+                generateHtml: function (json, selected, that) {
+                    if (selected === undefined) {
+                        selected = false;
+                    }
+                    var _selected = selected ? 'active' : '';
+                    var _html = '<div id="{0}" class="layui-form-item {2}"  data-id="{0}" data-tag="{1}" data-index="{3}">'.format(json.id, json.tag, _selected, json.index);
+                    _html += '<fieldset id="{0}" class="layui-elem-field layui-field-title" style="border-color: {1};width: {2}">'.format(json.id + json.tag, json.colorSelection, json.width);
+                    if (json.defaultValue) {
+                        _html += '<legend>{0}</legend>'.format(json.defaultValue);
+                    }
+                    _html += '</fieldset>';
+                    return _html;
+                },
+                /**
+                 * 根据json对象生成js文本
+                 * @param {object} json 变更后的json属性
+                 * @param {object} that 实例对象
+                 * */
+                generateScript: function (json, that) {
+                    return '';
+                }
+            },
+            password: {
+                /**
+                 * 根据json对象生成html对象
+                 * @param {object} json 当前组件的json属性
+                 * @param {boolean} selected 是否被选中
+                 * @param {object} elem 表单面板jquery对象
+                 * @param {object} that 实例对象
+                 * */
+                render: function (json, selected, elem, that) {
+                    if (selected === undefined) {
+                        selected = false;
+                    }
+                    var _disabled = json.disabled ? 'disabled=""' : '';
+                    var _readonly = json.readonly ? 'readonly=""' : '';
+                    var _required = json.required ? 'lay-verify="required"' : '';
+                    var _disabledClass = json.disabled ? ' layui-disabled' : '';
+                    var _hideLabel = json.hideLabel ? 'display: none;' : '';
+                    var _html = '<div id="{0}" class="layui-form-item {2}"  data-id="{0}" data-tag="{1}" data-index="{3}">'.format(json.id, json.tag, selected ? 'active' : '', json.index);
+                    _html += '<label class="layui-form-label {0}" style="width: {3}px;{4}"><span style="color:red;">{2}</span>{1}:</label>'.format(json.required ? 'layui-form-required' : '', json.label, json.required ? '*' : '', json.labelWidth, _hideLabel);
+                    if (json.hideLabel) {
+                        _html += '<div class="layui-input-block" style="margin-left: 0px">';
+                    } else {
+                        _html += '<div class="layui-input-block" style="margin-left: {0}px">'.format(json.labelWidth);
+                    }
+                    _html += '<input type="password" name="{0}" placeholder="{3}" value="{1}" autocomplete="off" style="width:{2}" {4}  {5} {6} class="layui-input{7}">'
+                        .format(json.id, json.defaultValue ? json.defaultValue : '', json.width, json.placeholder, _readonly, _disabled, _required, _disabledClass);
+                    _html += '</div>';
+                    _html += '</div>';
+                    elem.append(_html);
+                },
+                /**
+                 * 根据json对象更新html对象
+                 * @param {object} json 变更后的json属性
+                 * @param {object} that 实例对象
+                 * */
+                update: function (json, that) {
+                    var _disabled = json.disabled ? 'disabled=""' : '';
+                    var _readonly = json.readonly ? 'readonly=""' : '';
+                    var _required = json.required ? 'lay-verify="required"' : '';
+                    var _disabledClass = json.disabled ? ' layui-disabled' : '';
+                    var $block = $('#' + json.id + ' .layui-input-block');
+                    var $label = $('#' + json.id + ' .layui-form-label');
+                    $block.empty();
+                    $label.empty();
+                    $label.css("width", json.labelWidth);
+                    if (json.required) {
+                        $label.append('<span style="color:red;">*</span>');
+                    }
+                    $label.append(json.label + ":");
+                    if (json.hideLabel) {
+                        $label.css("display", "none");
+                        $block.css("margin-left", "0px");
+                    } else {
+                        $label.css("display", "block");
+                        $block.css("margin-left", json.labelWidth);
+                    }
+                    var _html = '';
+                    //重绘设计区改id下的所有元素
+                    _html += '<input type="password" name="{0}" placeholder="{3}" value="{1}" autocomplete="off" style="width:{2}" {4} {5} {6} class="layui-input{7}">'
+                        .format(json.id, json.defaultValue ? json.defaultValue : '', json.width, json.placeholder, _readonly, _disabled, _required, _disabledClass);
+                    $block.append(_html);
+                },
+                /**
+                 * 根据components组件对象获取组件属性
+                 * @param {object} id 所属组件id
+                 * @param {object} index 所属对象组件索引
+                 * @param {object} that 实例对象
+                 * */
+                jsonData: function (id, index, that) {
+                    //分配一个新的ID
+                    var _json = JSON.parse(JSON.stringify(formField.components.password));
+                    _json.id = id;
+                    _json.index = index;
+                    return _json;
+
+                },
+                /**
+                 * 根据 json 对象显示对应的属性
+                 * @param {object} json 当前组件的json属性
+                 * @param {object} that 实例对象
+                 * */
+                property: function (json, that) {
+                    that.renderCommonProperty(json); //根据 json 对象获取对应的属性的html
+                    that.initCommonProperty(json); //初始化 json 对象获取对应的属性
+                },
+                /**
+                 * 根据json对象生成html文本
+                 * @param {object} json 当前组件的json属性
+                 * @param {boolean} selected 是否被选中
+                 * @param {object} that 实例对象
+                 * */
+                generateHtml: function (json, selected, that) {
+                    if (selected === undefined) {
+                        selected = false;
+                    }
+                    var _disabled = json.disabled ? 'disabled=""' : '';
+                    var _readonly = json.readonly ? 'readonly=""' : '';
+                    var _required = json.required ? 'lay-verify="required"' : '';
+                    var _disabledClass = json.disabled ? ' layui-disabled' : '';
+                    var _hideLabel = json.hideLabel ? 'display: none;' : '';
+                    var _html = '<div id="{0}" class="layui-form-item {2}"  data-id="{0}" data-tag="{1}" data-index="{3}">'.format(json.id, json.tag, selected ? 'active' : '', json.index);
+                    _html += '<label class="layui-form-label {0}" style="width: {3}px;{4}"><span style="color:red;">{2}</span>{1}:</label>'.format(json.required ? 'layui-form-required' : '', json.label, json.required ? '*' : '', json.labelWidth, _hideLabel);
+                    if (json.hideLabel) {
+                        _html += '<div class="layui-input-block" style="margin-left: 0px">';
+                    } else {
+                        _html += '<div class="layui-input-block" style="margin-left: {0}px">'.format(json.labelWidth);
+                    }
+                    _html += '<input type="password" name="{0}" placeholder="{3}" value="{1}" autocomplete="off" style="width:{2}" {4}  {5} {6} class="layui-input{7}">'
+                        .format(json.id, json.defaultValue ? json.defaultValue : '', json.width, json.placeholder, _readonly, _disabled, _required, _disabledClass);
+                    _html += '</div>';
+                    _html += '</div>';
+                    return _html;
+                },
+                /**
+                 * 根据json对象生成js文本
+                 * @param {object} json 变更后的json属性
+                 * @param {object} that 实例对象
+                 * */
+                generateScript: function (json, that) {
+                    return '';
+                }
+            },
+            textarea: {
+                /**
+                 * 根据json对象生成html对象
+                 * @param {object} json 当前组件的json属性
+                 * @param {boolean} selected 是否被选中
+                 * @param {object} elem 表单面板jquery对象
+                 * @param {object} that 实例对象
+                 * */
+                render: function (json, selected, elem, that) {
+                    if (selected === undefined) {
+                        selected = false;
+                    }
+                    var _disabled = json.disabled ? 'disabled=""' : '';
+                    var _required = json.required ? 'lay-verify="required"' : '';
+                    var _readonly = json.readonly ? 'readonly=""' : '';
+                    var _disabledClass = json.disabled ? ' layui-disabled' : '';
+                    var _hideLabel = json.hideLabel ? 'display: none;' : '';
+                    var _html = '<div id="{0}" class="layui-form-item layui-form-text {2}"  data-id="{0}" data-tag="{1}" data-index="{3}">'.format(json.id, json.tag, selected ? 'active' : '', json.index);
+                    _html += '<label class="layui-form-label {0}" style="width: {3};{4}"><span style="color:red;">{2}</span>{1}:</label>'.format(json.required ? 'layui-form-required' : '', json.label, json.required ? '*' : '', json.width, _hideLabel);
+                    _html += '<div class="layui-input-block"  style="width: {0}">'.format(json.width);
+                    _html += '<textarea name="{0}" placeholder="{3}" width="{2}" class="layui-textarea{6}" {4} {5} {7}>{1}</textarea>'
+                        .format(json.id, json.defaultValue ? json.defaultValue : '', json.width, json.placeholder, _disabled, _required, _disabledClass, _readonly);
+                    _html += '</div>';
+                    _html += '</div>';
+                    elem.append(_html);
+                },
+                /**
+                 * 根据json对象更新html对象
+                 * @param {object} json 变更后的json属性
+                 * @param {object} that 实例对象
+                 * */
+                update: function (json, that) {
+                    var _disabled = json.disabled ? 'disabled=""' : '';
+                    var _required = json.required ? 'lay-verify="required"' : '';
+                    var _disabledClass = json.disabled ? ' layui-disabled' : '';
+                    var _readonly = json.readonly ? 'readonly=""' : '';
+                    var $block = $('#' + json.id + ' .layui-input-block');
+                    var $label = $('#' + json.id + ' .layui-form-label');
+                    if (json.required) {
+                        $label.append('<span style="color:red;">*</span>');
+                    }
+                    $block.empty();
+                    $label.empty();
+                    if (json.hideLabel) {
+                        $label.css("display", "none");
+                    } else {
+                        $label.css("display", "block");
+                    }
+                    var _html = '';
+                    _html += '<textarea name="{0}" placeholder="{3}" width="{2}" class="layui-textarea{6}" {4} {5} {7}>{1}</textarea>'
+                        .format(json.id, json.defaultValue ? json.defaultValue : '', json.width, json.placeholder, _disabled, _required, _disabledClass, _readonly);
+                    $('#' + json.id + ' .layui-input-block').append(_html);
+                    $label.css({ width: '{0}'.format(json.width) });
+                    $block.css({ width: '{0}'.format(json.width) });
+                    if (json.required) {
+                        $label.append('<span style="color:red;">*</span>');
+                    }
+                    $label.append(json.label + ":");
+                },
+                /**
+                 * 根据components组件对象获取组件属性
+                 * @param {object} id 所属组件id
+                 * @param {object} index 所属对象组件索引
+                 * @param {object} that 实例对象
+                 * */
+                jsonData: function (id, index, that) {
+                    //分配一个新的ID
+                    var _json = JSON.parse(JSON.stringify(formField.components.textarea));
+                    _json.id = id;
+                    _json.index = index;
+                    return _json;
+
+                },
+                /**
+                 * 根据 json 对象显示对应的属性
+                 * @param {object} json 当前组件的json属性
+                 * @param {object} that 实例对象
+                 * */
+                property: function (json, that) {
+                    that.renderCommonProperty(json); //根据 json 对象获取对应的属性的html
+                    that.initCommonProperty(json); //初始化 json 对象获取对应的属性
+                },
+                /**
+                 * 根据json对象生成html文本
+                 * @param {object} json 当前组件的json属性
+                 * @param {boolean} selected 是否被选中
+                 * @param {object} that 实例对象
+                 * */
+                generateHtml: function (json, selected, that) {
+                    if (selected === undefined) {
+                        selected = false;
+                    }
+                    var _disabled = json.disabled ? 'disabled=""' : '';
+                    var _required = json.required ? 'lay-verify="required"' : '';
+                    var _readonly = json.readonly ? 'readonly=""' : '';
+                    var _disabledClass = json.disabled ? ' layui-disabled' : '';
+                    var _hideLabel = json.hideLabel ? 'display: none;' : '';
+                    var _html = '<div id="{0}" class="layui-form-item layui-form-text {2}"  data-id="{0}" data-tag="{1}" data-index="{3}">'.format(json.id, json.tag, selected ? 'active' : '', json.index);
+                    _html += '<label class="layui-form-label {0}" style="width: {3};{4}"><span style="color:red;">{2}</span>{1}:</label>'.format(json.required ? 'layui-form-required' : '', json.label, json.required ? '*' : '', json.width, _hideLabel);
+                    _html += '<div class="layui-input-block"  style="width: {0}">'.format(json.width);
+                    _html += '<textarea name="{0}" placeholder="{3}" width="{2}" class="layui-textarea{6}" {4} {5} {7}>{1}</textarea>'
+                        .format(json.id, json.defaultValue ? json.defaultValue : '', json.width, json.placeholder, _disabled, _required, _disabledClass, _readonly);
+                    _html += '</div>';
+                    _html += '</div>';
+                    return _html;
+                },
+                /**
+                 * 根据json对象生成js文本
+                 * @param {object} json 变更后的json属性
+                 * @param {object} that 实例对象
+                 * */
+                generateScript: function (json, that) {
+                    return '';
+                }
+            },
+            select: {
+                /**
+                 * 根据json对象生成html对象
+                 * @param {object} json 当前组件的json属性
+                 * @param {boolean} selected 是否被选中
+                 * @param {object} elem 表单面板jquery对象
+                 * @param {object} that 实例对象
+                 * */
+                render: function (json, selected, elem, that) {                    
+                    if (selected === undefined) {
+                        selected = false;
+                    }
+                    var _disabled = json.disabled ? 'disabled=""' : '';
+                    var _required = json.required ? 'required' : '';
+                    var _hideLabel = json.hideLabel ? 'display: none;' : '';
+                    var _html = '<div id="{0}" class="layui-form-item {2}"  data-id="{0}" data-tag="{1}" data-index="{3}">'.format(json.id, json.tag, selected ? 'active' : '', json.index);
+                    _html += '<label class="layui-form-label {0}" style="width: {3}px;{4}"><span style="color:red;">{2}</span>{1}:</label>'.format(json.required ? 'layui-form-required' : '', json.label, json.required ? '*' : '', json.labelWidth, _hideLabel);
+                    if (json.hideLabel) {
+                        _html += '<div class="layui-input-block layui-form" lay-filter="{0}" style="margin-left: 0px">'.format(json.id);
+                    } else {
+                        _html += '<div class="layui-input-block layui-form" lay-filter="{0}" style="margin-left: {1}px">'.format(json.id, json.labelWidth);
+                    }
+                    _html += '<select name="{0}" lay-verify="{2}" {1} >'.format(json.id, _disabled, _required);
+                    /*if (json.defaultValue === undefined) {
+                        _html += '<option value="{0}" selected="">{1}</option>'.format('', '请选择');
+                    }*/
+                    for (var i = 0; i < json.options.length; i++) {
+                        if (json.options[i].checked) {
+                            _html += '<option value="{0}" selected="">{1}</option>'.format(json.options[i].value, json.options[i].text);
+                        } else {
+                            _html += '<option value="{0}">{1}</option>'.format(json.options[i].value, json.options[i].text);
+                        }
+                    }
+                    _html += '</select>'
+                    _html += '</div>';
+                    _html += '</div>';
+                    elem.append(_html);
+                },
+                /**
+                 * 根据json对象更新html对象
+                 * @param {object} json 变更后的json属性
+                 * @param {object} that 实例对象
+                 * */
+                update: function (json, that) {
+                    var _disabled = json.disabled ? 'disabled=""' : '';
+                    var _required = json.required ? 'required' : '';
+                    var $block = $('#' + json.id + ' .layui-input-block');
+                    var $label = $('#' + json.id + ' .layui-form-label');
+                    $block.empty();
+                    $label.empty();
+                    var _html = '';
+                    _html += '<select name="{0}" lay-verify="{2}" {1}>'.format(json.id, _disabled, _required);
+                    //重绘设计区改id下的所有元素
+                    /* if (json.defaultValue === undefined) {
+                         _html += '<option value="{0}" selected="">{1}</option>'.format('', '请选择');
+                     }*/
+                    for (var i = 0; i < json.options.length; i++) {
+                        if (json.options[i].checked) {
+                            _html += '<option value="{0}" selected="">{1}</option>'.format(json.options[i].value, json.options[i].text);
+                        } else {
+                            _html += '<option value="{0}">{1}</option>'.format(json.options[i].value, json.options[i].text);
+                        }
+                    }
+                    _html += '</select>'
+                    $('#' + json.id + ' .layui-input-block').append(_html);
+                    $label.css("width", json.labelWidth);
+                    if (json.required) {
+                        $label.append('<span style="color:red;">*</span>');
+                    }
+                    $label.append(json.label + ":");
+                    form.render('select', json.id);
+                    $('#' + json.id + ' .layui-input-block div.layui-unselect.layui-form-select').css({ width: '{0}'.format(json.width) });
+                    if (json.hideLabel) {
+                        $label.css("display", "none");
+                        $block.css("margin-left", "0px");
+                        $block.css({ width: 'calc({0})'.format(json.width) });
+                    } else {
+                        $label.css("display", "block");
+                        $block.css("margin-left", json.labelWidth);
+                        $block.css({ width: 'calc({0} - {1}px)'.format(json.width, json.labelWidth) });
+                    }
+                },
+                /**
+                 * 根据components组件对象获取组件属性
+                 * @param {object} id 所属组件id
+                 * @param {object} index 所属对象组件索引
+                 * @param {object} that 实例对象
+                 * */
+                jsonData: function (id, index, that) {
+                    //分配一个新的ID
+                    var _json = JSON.parse(JSON.stringify(formField.components.select));
+                    _json.id = id;
+                    _json.index = index;
+                    return _json;
+                },
+                /**
+                 * 根据 json 对象显示对应的属性
+                 * @param {object} json 当前组件的json属性
+                 * @param {object} that 实例对象
+                 * */
+                property: function (json, that) {
+                    that.renderCommonProperty(json); //根据 json 对象获取对应的属性的html
+                    that.initCommonProperty(json); //初始化 json 对象获取对应的属性
+                },
+                /**
+                 * 根据json对象生成html文本
+                 * @param {object} json 当前组件的json属性
+                 * @param {boolean} selected 是否被选中
+                 * @param {object} that 实例对象
+                 * */
+                generateHtml: function (json, selected, that) {
+                    if (selected === undefined) {
+                        selected = false;
+                    }
+                    var _disabled = json.disabled ? 'disabled=""' : '';
+                    var _required = json.required ? 'required' : '';
+                    var _hideLabel = json.hideLabel ? 'display: none;' : '';
+                    var _html = '<div id="{0}" class="layui-form-item {2}"  data-id="{0}" data-tag="{1}" data-index="{3}">'.format(json.id, json.tag, selected ? 'active' : '', json.index);
+                    _html += '<label class="layui-form-label {0}" style="width: {3}px;"><span style="color:red;">{2}</span>{1}:</label>'.format(json.required ? 'layui-form-required' : '', json.label, json.required ? '*' : '', json.labelWidth, _hideLabel);
+                    if (json.hideLabel) {
+                        _html += '<div class="layui-input-block layui-form" lay-filter="{0}" style="margin-left: 0px">'.format(json.id);
+                    } else {
+                        _html += '<div class="layui-input-block layui-form" lay-filter="{0}" style="margin-left: {1}px">'.format(json.id, json.labelWidth);
+                    }
+                    _html += '<select name="{0}" lay-verify="{2}" {1} >'.format(json.id, _disabled, _required);
+                    /*if (json.defaultValue === undefined) {
+                        _html += '<option value="{0}" selected="">{1}</option>'.format('', '请选择');
+                    }*/
+                    for (var i = 0; i < json.options.length; i++) {
+                        if (json.options[i].checked) {
+                            _html += '<option value="{0}" selected="">{1}</option>'.format(json.options[i].value, json.options[i].text);
+                        } else {
+                            _html += '<option value="{0}">{1}</option>'.format(json.options[i].value, json.options[i].text);
+                        }
+                    }
+                    _html += '</select>'
+                    _html += '</div>';
+                    _html += '</div>';
+                    return _html;
+                },
+                /**
+                 * 根据json对象生成js文本
+                 * @param {object} json 变更后的json属性
+                 * @param {object} that 实例对象
+                 * */
+                generateScript: function (json, that) {
+                    return '';
+                }
+            },
+            radio: {
+                /**
+                 * 根据json对象生成html对象
+                 * @param {object} json 当前组件的json属性
+                 * @param {boolean} selected 是否被选中
+                 * @param {object} elem 表单面板jquery对象
+                 * @param {object} that 实例对象
+                 * */
+                render: function (json, selected, elem, that) {
+                    if (selected === undefined) {
+                        selected = false;
+                    }
+                    var _disabled = json.disabled ? 'disabled=""' : '';
+                    var _required = json.required ? 'required' : '';
+                    var _hideLabel = json.hideLabel ? 'display: none;' : '';
+                    var _html = '<div id="{0}" class="layui-form-item {2}"  data-id="{0}" data-tag="{1}" data-index="{3}">'.format(json.id, json.tag, selected ? 'active' : '', json.index);
+                    _html += '<label class="layui-form-label" style="width: {1}px;{2}"><span style="color:red;">{3}</span>{0}:</label>'.format(json.label, json.labelWidth, _hideLabel, json.required ? '*' : '');
+                    if (json.hideLabel) {
+                        _html += '<div class="layui-input-block" style="margin-left: 0px">';
+                    } else {
+                        _html += '<div class="layui-input-block" style="margin-left: {0}px">'.format(json.labelWidth);
+                    }
+                    for (var i = 0; i < json.options.length; i++) {
+                        if (json.options[i].checked) {
+                            _html += '<input type="radio" name="{0}" value="{1}" title="{2}" checked="" {3}>'.format(json.id, json.options[i].value, json.options[i].text, _disabled);
+                        } else {
+                            _html += '<input type="radio" name="{0}" value="{1}" title="{2}" {3}>'.format(json.id, json.options[i].value, json.options[i].text, _disabled);
+                        }
+                    }
+                    _html += '</div>';
+                    _html += '</div>';
+                    elem.append(_html);
+                },
+                /**
+                 * 根据json对象更新html对象
+                 * @param {object} json 变更后的json属性
+                 * @param {object} that 实例对象
+                 * */
+                update: function (json, that) {
+                    var _disabled = json.disabled ? 'disabled=""' : '';
+                    var _required = json.required ? 'required' : '';
+                    var $block = $('#' + json.id + ' .layui-input-block');
+                    var $label = $('#' + json.id + ' .layui-form-label');
+                    $block.empty();
+                    $label.empty();
+                    $label.css("width", json.labelWidth);
+                    if (json.required) {
+                        $label.append('<span style="color:red;">*</span>');
+                    }
+                    $label.append(json.label + ":");
+                    if (json.hideLabel) {
+                        $label.css("display", "none");
+                        $block.css("margin-left", "0px");
+                        $block.css({ width: 'calc({0} - {1}px)'.format(json.width, json.labelWidth) });
+                    } else {
+                        $label.css("display", "block");
+                        $block.css("margin-left", json.labelWidth);
+                        $block.css({ width: 'calc({0} - {1}px)'.format(json.width, json.labelWidth) });
+                    }
+                    var _html = '';
+                    //重绘设计区改id下的所有元素
+                    for (var i = 0; i < json.options.length; i++) {
+                        if (json.options[i].checked) {
+                            _html += '<input type="radio" name="{0}" value="{1}" title="{2}" checked="" {3}>'.format(json.id, json.options[i].value, json.options[i].text, _disabled);
+                        } else {
+                            _html += '<input type="radio" name="{0}" value="{1}" title="{2}" {3}>'.format(json.id, json.options[i].value, json.options[i].text, _disabled);
+                        }
+                    }
+                    $block.append(_html);
+                    form.render('radio');
+                },
+                /**
+                 * 根据components组件对象获取组件属性
+                 * @param {object} id 所属组件id
+                 * @param {object} index 所属对象组件索引
+                 * @param {object} that 实例对象
+                 * */
+                jsonData: function (id, index, that) {
+                    //分配一个新的ID
+                    var _json = JSON.parse(JSON.stringify(formField.components.radio));
+                    _json.id = id;
+                    _json.index = index;
+                    return _json;
+
+                },
+                /**
+                 * 根据 json 对象显示对应的属性
+                 * @param {object} json 当前组件的json属性
+                 * @param {object} that 实例对象
+                 * */
+                property: function (json, that) {
+                    that.renderCommonProperty(json); //根据 json 对象获取对应的属性的html
+                    that.initCommonProperty(json); //初始化 json 对象获取对应的属性
+                },
+                /**
+                 * 根据json对象生成html文本
+                 * @param {object} json 当前组件的json属性
+                 * @param {boolean} selected 是否被选中
+                 * @param {object} that 实例对象
+                 * */
+                generateHtml: function (json, selected, that) {
+                    if (selected === undefined) {
+                        selected = false;
+                    }
+                    var _disabled = json.disabled ? 'disabled=""' : '';
+                    var _hideLabel = json.hideLabel ? 'display: none;' : '';
+                    var _html = '<div id="{0}" class="layui-form-item {2}"  data-id="{0}" data-tag="{1}" data-index="{3}">'.format(json.id, json.tag, selected ? 'active' : '', json.index);
+                    _html += '<label class="layui-form-label" style="width: {1}px;{2}">{0}:</label>'.format(json.label, json.labelWidth, _hideLabel);
+                    if (json.hideLabel) {
+                        _html += '<div class="layui-input-block" style="margin-left: 0px">';
+                    } else {
+                        _html += '<div class="layui-input-block" style="margin-left: {0}px">'.format(json.labelWidth);
+                    }
+                    for (var i = 0; i < json.options.length; i++) {
+                        if (json.options[i].checked) {
+                            _html += '<input type="radio" name="{0}" value="{1}" title="{2}" checked="" {3}>'.format(json.id, json.options[i].value, json.options[i].text, _disabled);
+                        } else {
+                            _html += '<input type="radio" name="{0}" value="{1}" title="{2}" {3}>'.format(json.id, json.options[i].value, json.options[i].text, _disabled);
+                        }
+                    }
+                    _html += '</div>';
+                    _html += '</div>';
+                    return _html;
+                },
+                /**
+                 * 根据json对象生成js文本
+                 * @param {object} json 变更后的json属性
+                 * @param {object} that 实例对象
+                 * */
+                generateScript: function (json, that) {
+                    return '';
+                }
+            },
+            checkbox: {
+                /**
+                 * 根据json对象生成html对象
+                 * @param {object} json 当前组件的json属性
+                 * @param {boolean} selected 是否被选中
+                 * @param {object} elem 表单面板jquery对象
+                 * @param {object} that 实例对象
+                 * */
+                render: function (json, selected, elem, that) {
+                    if (selected === undefined) {
+                        selected = false;
+                    }
+                    var _disabled = json.disabled ? 'disabled=""' : '';
+                    var _required = json.required ? 'lay-verify="otherReq"' : '';
+                    var _hideLabel = json.hideLabel ? 'display: none;' : '';
+                    var _html = '<div id="{0}" class="layui-form-item {2}"  data-id="{0}" data-tag="{1}" data-index="{3}">'.format(json.id, json.tag, selected ? 'active' : '', json.index);
+                    _html += '<label class="layui-form-label {0}" style="width: {3}px;{4}"><span style="color:red;">{2}</span>{1}:</label>'.format(json.required ? 'layui-form-required' : '', json.label, json.required ? '*' : '', json.labelWidth, _hideLabel);
+                    if (json.hideLabel) {
+                        _html += '<div class="layui-input-block" style="margin-left: 0px;">';
+                    } else {
+                        _html += '<div class="layui-input-block" style="margin-left: {0}px;">'.format(json.labelWidth);
+                    }
+                    for (var i = 0; i < json.options.length; i++) {
+                        if (json.options[i].checked) {
+                            _html += '<input type="checkbox" name="{0}[{1}]" title="{2}" checked="" {3} {4}>'.format(json.id, json.options[i].value, json.options[i].text, _disabled, _required);
+                        } else {
+                            _html += '<input type="checkbox" name="{0}[{1}]" title="{2}" {3} {4}>'.format(json.id, json.options[i].value, json.options[i].text, _disabled, _required);
+                        }
+                    }
+                    _html += '</div>';
+                    _html += '</div>';
+                    elem.append(_html);
+                },
+                /**
+                 * 根据json对象更新html对象
+                 * @param {object} json 变更后的json属性
+                 * @param {object} that 实例对象
+                 * */
+                update: function (json, that) {
+                    var _disabled = json.disabled ? 'disabled=""' : '';
+                    var _required = json.required ? 'lay-verify="otherReq"' : '';
+                    var $block = $('#' + json.id + ' .layui-input-block');
+                    var $label = $('#' + json.id + ' .layui-form-label');
+                    $block.empty();
+                    $label.empty();
+                    var _html = '';
+                    //重绘设计区改id下的所有元素
+                    for (var i = 0; i < json.options.length; i++) {
+                        if (json.options[i].checked) {
+                            _html += '<input type="checkbox" name="{0}[{1}]" title="{2}" checked="" {3} {4}>'.format(json.id, json.options[i].value, json.options[i].text, _disabled, _required);
+                        } else {
+                            _html += '<input type="checkbox" name="{0}[{1}]" title="{2}" {3} {4}>'.format(json.id, json.options[i].value, json.options[i].text, _disabled, _required);
+                        }
+                    }
+                    $block.append(_html);
+                    $label.css("width", json.labelWidth);
+                    if (json.hideLabel) {
+                        $label.css("display", "none");
+                        $block.css("margin-left", "0px");
+                    } else {
+                        $label.css("display", "block");
+                        $block.css("margin-left", json.labelWidth);
+                    }
+                    if (json.required) {
+                        $label.append('<span style="color:red;">*</span>');
+                    }
+                    $label.append(json.label + ":");
+                    form.render('checkbox');
+                },
+                /**
+                 * 根据components组件对象获取组件属性
+                 * @param {object} id 所属组件id
+                 * @param {object} index 所属对象组件索引
+                 * @param {object} that 实例对象
+                 * */
+                jsonData: function (id, index, that) {
+                    //分配一个新的ID
+                    var _json = JSON.parse(JSON.stringify(formField.components.checkbox));
+                    _json.id = id;
+                    _json.index = index;
+                    return _json;
+
+                },
+                /**
+                 * 根据 json 对象显示对应的属性
+                 * @param {object} json 当前组件的json属性
+                 * @param {object} that 实例对象
+                 * */
+                property: function (json, that) {
+                    that.renderCommonProperty(json); //根据 json 对象获取对应的属性的html
+                    that.initCommonProperty(json); //初始化 json 对象获取对应的属性
+                },
+                /**
+                 * 根据json对象生成html文本
+                 * @param {object} json 当前组件的json属性
+                 * @param {boolean} selected 是否被选中
+                 * @param {object} that 实例对象
+                 * */
+                generateHtml: function (json, selected, that) {
+                    if (selected === undefined) {
+                        selected = false;
+                    }
+                    var _disabled = json.disabled ? 'disabled=""' : '';
+                    var _required = json.required ? 'lay-verify="otherReq"' : '';
+                    var _hideLabel = json.hideLabel ? 'display: none;' : '';
+                    var _html = '<div id="{0}" class="layui-form-item {2}"  data-id="{0}" data-tag="{1}" data-index="{3}">'.format(json.id, json.tag, selected ? 'active' : '', json.index);
+                    _html += '<label class="layui-form-label {0}" style="width: {3}px;{4}"><span style="color:red;">{2}</span>{1}:</label>'.format(json.required ? 'layui-form-required' : '', json.label, json.required ? '*' : '', json.labelWidth, _hideLabel);
+                    if (json.hideLabel) {
+                        _html += '<div class="layui-input-block" style="margin-left: 0px;">';
+                    } else {
+                        _html += '<div class="layui-input-block" style="margin-left: {0}px;">'.format(json.labelWidth);
+                    }
+                    for (var i = 0; i < json.options.length; i++) {
+                        if (json.options[i].checked) {
+                            _html += '<input type="checkbox" name="{0}[{1}]" title="{2}" checked="" {3} {4}>'.format(json.id, json.options[i].value, json.options[i].text, _disabled, _required);
+                        } else {
+                            _html += '<input type="checkbox" name="{0}[{1}]" title="{2}" {3} {4}>'.format(json.id, json.options[i].value, json.options[i].text, _disabled, _required);
+                        }
+                    }
+                    _html += '</div>';
+                    _html += '</div>';
+                    return _html;
+                },
+                /**
+                 * 根据json对象生成js文本
+                 * @param {object} json 变更后的json属性
+                 * @param {object} that 实例对象
+                 * */
+                generateScript: function (json, that) {
+                    return '';
+                }
+            },
+            switch: {
+                /**
+                 * 根据json对象生成html对象
+                 * @param {object} json 当前组件的json属性
+                 * @param {boolean} selected 是否被选中
+                 * @param {object} elem 表单面板jquery对象
+                 * @param {object} that 实例对象
+                 * */
+                render: function (json, selected, elem, that) {
+                    if (selected === undefined) {
+                        selected = false;
+                    }
+                    var _disabled = json.disabled ? 'disabled=""' : '';
+                    var _disabledClass = json.disabled ? ' layui-disabled' : '';
+                    var _hideLabel = json.hideLabel ? 'display: none;' : '';
+                    var _html = '<div id="{0}" class="layui-form-item {2}"  data-id="{0}" data-tag="{1}" data-index="{3}">'.format(json.id, json.tag, selected ? 'active' : '', json.index);
+                    _html += '<label class="layui-form-label" style="width: {1}px;{2}">{0}:</label>'.format(json.label, json.labelWidth, _hideLabel);
+                    if (json.hideLabel) {
+                        _html += '<div class="layui-input-block" style="width:calc({0});border: 0px solid #d2d2d2;margin-left: 0px">'.format(json.width, json.labelWidth);
+                    } else {
+                        _html += '<div class="layui-input-block" style="width:calc({0} - {1}px);border: 1px solid #d2d2d2;border-left: 0px;margin-left: {1}px">'.format(json.width, json.labelWidth);
+                    }
+                    _html += '<input type="checkbox" name="{0}" lay-skin="switch" lay-text="ON|OFF" {1} class="{2}" {3}>'.format(json.id, _disabled, _disabledClass, json.switchValue ? 'checked' : '');
+                    _html += '</div>';
+                    _html += '</div>';
+                    elem.append(_html);
+                },
+                /**
+                 * 根据json对象更新html对象
+                 * @param {object} json 变更后的json属性
+                 * @param {object} that 实例对象
+                 * */
+                update: function (json, that) {
+                    var _disabled = json.disabled ? 'disabled=""' : '';
+                    var _disabledClass = json.disabled ? ' layui-disabled' : '';
+                    var $block = $('#' + json.id + ' .layui-input-block');
+                    var $label = $('#' + json.id + ' .layui-form-label');
+                    $block.empty();
+                    $label.empty();
+                    var _html = '';
+                    _html += '<input type="checkbox" name="{0}" lay-skin="switch" lay-text="ON|OFF" {1} class="{2}" {3}>'.format(json.tag, _disabled, _disabledClass, json.switchValue ? 'checked' : '');
+                    $block.append(_html);
+                    $label.append(json.label + ":");
+                    if (json.hideLabel) {
+                        $label.css("display", "none");
+                        $block.css("margin-left", "0px");
+                        $block.css("border", "0px");
+                        $block.css({ width: 'calc({0})'.format(json.width) });
+                    } else {
+                        $label.css("display", "block");
+                        $block.css("margin-left", json.labelWidth);
+                        $block.css({ width: 'calc({0} - {1}px)'.format(json.width, json.labelWidth) });
+                    }
+                    $label.css("width", json.labelWidth);
+                    form.render('checkbox');
+                },
+                /**
+                 * 根据components组件对象获取组件属性
+                 * @param {object} id 所属组件id
+                 * @param {object} index 所属对象组件索引
+                 * @param {object} that 实例对象
+                 * */
+                jsonData: function (id, index, that) {
+                    var _json = JSON.parse(JSON.stringify(formField.components.switch));
+                    _json.id = id;
+                    _json.index = index;
+                    return _json;
+
+                },
+                /**
+                 * 根据 json 对象显示对应的属性
+                 * @param {object} json 当前组件的json属性
+                 * @param {object} that 实例对象
+                 * */
+                property: function (json, that) {
+                    that.renderCommonProperty(json); //根据 json 对象获取对应的属性的html
+                    that.initCommonProperty(json); //初始化 json 对象获取对应的属性
+                },
+                /**
+                 * 根据json对象生成html文本
+                 * @param {object} json 当前组件的json属性
+                 * @param {boolean} selected 是否被选中
+                 * @param {object} that 实例对象
+                 * */
+                generateHtml: function (json, selected, that) {
+                    if (selected === undefined) {
+                        selected = false;
+                    }
+                    var _disabled = json.disabled ? 'disabled=""' : '';
+                    var _disabledClass = json.disabled ? ' layui-disabled' : '';
+                    var _hideLabel = json.hideLabel ? 'display: none;' : '';
+                    var _html = '<div id="{0}" class="layui-form-item {2}"  data-id="{0}" data-tag="{1}" data-index="{3}">'.format(json.id, json.tag, selected ? 'active' : '', json.index);
+                    _html += '<label class="layui-form-label" style="width: {1}px;{2}">{0}:</label>'.format(json.label, json.labelWidth, _hideLabel);
+                    if (json.hideLabel) {
+                        _html += '<div class="layui-input-block" style="width:calc({0});border: 0px solid #d2d2d2;margin-left: 0px">'.format(json.width, json.labelWidth);
+                    } else {
+                        _html += '<div class="layui-input-block" style="width:calc({0} - {1}px);border: 1px solid #d2d2d2;border-left: 0px;margin-left: {1}px">'.format(json.width, json.labelWidth);
+                    }
+                    _html += '<input type="checkbox" name="{0}" lay-skin="switch" lay-text="ON|OFF" {1} class="{2}" {3}>'.format(json.id, _disabled, _disabledClass, json.switchValue ? 'checked' : '');
+                    _html += '</div>';
+                    _html += '</div>';
+                    return _html;
+                },
+                /**
+                 * 根据json对象生成js文本
+                 * @param {object} json 变更后的json属性
+                 * @param {object} that 实例对象
+                 * */
+                generateScript: function (json, that) {
+                    return '';
+                }
+            },
+            slider: {
+                /**
+                 * 根据json对象生成html对象
+                 * @param {object} json 当前组件的json属性
+                 * @param {boolean} selected 是否被选中
+                 * @param {object} elem 表单面板jquery对象
+                 * @param {object} that 实例对象
+                 * */
+                render: function (json, selected, elem, that) {
+                    if (selected === undefined) {
+                        selected = false;
+                    }
+                    var _disabled = json.disabled ? 'disabled=""' : '';
+                    var _hideLabel = json.hideLabel ? 'display: none;' : '';
+                    var _html = '<div id="{0}" class="layui-form-item {2}"  data-id="{0}" data-tag="{1}" data-index="{3}">'.format(json.id, json.tag, selected ? 'active' : '', json.index);
+                    _html += '<label class="layui-form-label" style="width: {1}px;{2}">{0}:</label>'.format(json.label, json.labelWidth, _hideLabel);
+                    if (json.hideLabel) {
+                        _html += '<div class="layui-input-block layui-form" style="width:calc({0});margin-left: 0px">'.format(json.width);
+                    } else {
+                        _html += '<div class="layui-input-block layui-form" style="width:calc({0} - {1}px);margin-left: {1}px">'.format(json.width, json.labelWidth);
+                    }
+                    _html += '<div id="{0}" class="widget-slider"></div>'.format(json.tag + json.id);
+                    _html += '<input name="{0}" type="hidden" value="{1}"></input>'.format(json.id, json.defaultValue);
+                    _html += '</div>';
+                    _html += '</div>';
+                    elem.append(_html);
+                    slider.render({
+                        elem: '#' + json.tag + json.id,
+                        value: json.defaultValue, //初始值
+                        min: json.minValue,
+                        max: json.maxValue,
+                        step: json.stepValue,
+                        disabled: json.disabled,
+                        input: json.isInput,
+                    });
+                },
+                /**
+                 * 根据json对象更新html对象
+                 * @param {object} json 变更后的json属性
+                 * @param {object} that 实例对象
+                 * */
+                update: function (json, that) {
+                    var $block = $('#' + json.id + ' .layui-input-block');
+                    var $label = $('#' + json.id + ' .layui-form-label');
+                    $label.empty();
+                    $label.css("width", json.labelWidth);
+                    $label.append(json.label + ":");
+                    if (json.hideLabel) {
+                        $label.css("display", "none");
+                        $block.css("margin-left", "0px");
+                        $block.css({ width: 'calc({0})'.format(json.width) });
+                    } else {
+                        $label.css("display", "block");
+                        $block.css("margin-left", json.labelWidth);
+                        $block.css({ width: 'calc({0} - {1}px)'.format(json.width, json.labelWidth) });
+                    }
+                    slider.render({
+                        elem: '#' + json.tag + json.id,
+                        value: json.defaultValue, //初始值
+                        min: json.minValue,
+                        max: json.maxValue,
+                        step: json.stepValue,
+                        disabled: json.disabled,
+                        input: json.isInput,
+                    });
+                },
+                /**
+                 * 根据components组件对象获取组件属性
+                 * @param {object} id 所属组件id
+                 * @param {object} index 所属对象组件索引
+                 * @param {object} that 实例对象
+                 * */
+                jsonData: function (id, index, that) {
+                    //分配一个新的ID
+                    var _json = JSON.parse(JSON.stringify(formField.components.slider));
+                    _json.id = id;
+                    _json.index = index;
+                    return _json;
+
+                },
+                /**
+                 * 根据 json 对象显示对应的属性
+                 * @param {object} json 当前组件的json属性
+                 * @param {object} that 实例对象
+                 * */
+                property: function (json, that) {
+                    that.renderCommonProperty(json); //根据 json 对象获取对应的属性的html
+                    that.initCommonProperty(json); //初始化 json 对象获取对应的属性
+                },
+                /**
+                 * 根据json对象生成html文本
+                 * @param {object} json 当前组件的json属性
+                 * @param {boolean} selected 是否被选中
+                 * @param {object} that 实例对象
+                 * */
+                generateHtml: function (json, selected, that) {
+                    if (selected === undefined) {
+                        selected = false;
+                    }
+                    var _disabled = json.disabled ? 'disabled=""' : '';
+                    var _hideLabel = json.hideLabel ? 'display: none;' : '';
+                    var _html = '<div id="{0}" class="layui-form-item {2}"  data-id="{0}" data-tag="{1}" data-index="{3}">'.format(json.id, json.tag, selected ? 'active' : '', json.index);
+                    _html += '<label class="layui-form-label" style="width: {1}px;{2}">{0}:</label>'.format(json.label, json.labelWidth, _hideLabel);
+                    if (json.hideLabel) {
+                        _html += '<div class="layui-input-block layui-form" style="width:calc({0});margin-left: 0px">'.format(json.width);
+                    } else {
+                        _html += '<div class="layui-input-block layui-form" style="width:calc({0} - {1}px);margin-left: {1}px">'.format(json.width, json.labelWidth);
+                    }
+                    _html += '<div id="{0}" class="widget-slider"></div>'.format(json.tag + json.id);
+                    _html += '<input name="{0}" type="hidden" value="{1}"></input>'.format(json.id, json.defaultValue);
+                    _html += '</div>';
+                    _html += '</div>';
+                    return _html;
+                },
+                /**
+                 * 根据json对象生成js文本
+                 * @param {object} json 变更后的json属性
+                 * @param {object} that 实例对象
+                 * */
+                generateScript: function (json, that) {
+                    var scriptHtmlCode = '';
+                    scriptHtmlCode += ['slider.render({',
+                        , 'elem: "#' + json.tag + json.id + '" ,'
+                        , 'value: ' + json.defaultValue + ','
+                        , 'min: ' + json.minValue + ','
+                        , 'max: ' + json.maxValue + ','
+                        , 'step: ' + json.stepValue + ','
+                        , 'input:' + json.isInput + ','
+                        , 'change: function(value){'
+                        , '$("#' + json.id + '").find("input[name="' + json.id + '"]").val(value);'
+                        , ' }'
+                        , '});'].join('');
+                    return scriptHtmlCode;
+                }
+            },
+            date: {
+                /**
+                 * 根据json对象生成html对象
+                 * @param {object} json 当前组件的json属性
+                 * @param {boolean} selected 是否被选中
+                 * @param {object} elem 表单面板jquery对象
+                 * @param {object} that 实例对象
+                 * */
+                render: function (json, selected, elem, that) {
+                    if (selected === undefined) {
+                        selected = false;
+                    }
+                    var _disabledClass = json.disabled ? ' layui-disabled' : '';
+                    var _disabledStyle = json.disabled ? ' pointer-events: none;' : '';
+                    var _required = json.required ? 'required' : '';
+                    var _hideLabel = json.hideLabel ? 'display: none;' : '';
+                    var _html = '<div id="{0}" class="layui-form-item {2}"  data-id="{0}" data-tag="{1}" data-index="{3}">'.format(json.id, json.tag, selected ? 'active' : '', json.index);
+                    _html += '<label class="layui-form-label {0}" style="width: {3}px;{4}"><span style="color:red;">{2}</span>{1}:</label>'.format(json.required ? 'layui-form-required' : '', json.label, json.required ? '*' : '', json.labelWidth, _hideLabel);
+                    if (json.hideLabel) {
+                        _html += '<div class="layui-input-block" style="width:calc({0});margin-left: 0px;">'.format(json.width);
+                    } else {
+                        _html += '<div class="layui-input-block" style="width:calc({0} - {1}px);margin-left: {1}px;">'.format(json.width, json.labelWidth);
+                    }
+                    _html += '<input id="{0}" name="{0}" lay-verify="{3}" class="layui-input icon-date widget-date {1}" style="line-height: 40px;{2}"></input>'.format(json.tag + json.id, _disabledClass, _disabledStyle, _required);
+                    _html += '</div>';
+                    _html += '</div>';
+                    elem.append(_html);
+                    laydate.render({
+                        elem: '#' + json.tag + json.id,
+                        btns: ['confirm'],
+                        type: json.dateType,
+                        format: json.dateFormat,
+                        value: json.dateDefaultValue,
+                        min: json.dataMinValue,
+                        max: json.dataMaxValue,
+                    });
+                },
+                /**
+                 * 根据json对象更新html对象
+                 * @param {object} json 变更后的json属性
+                 * @param {object} that 实例对象
+                 * */
+                update: function (json, that) {
+                    var _disabledClass = json.disabled ? ' layui-disabled' : '';
+                    var _disabledStyle = json.disabled ? ' pointer-events: none;' : '';
+                    var _required = json.required ? 'required' : '';
+                    var $block = $('#' + json.id + ' .layui-input-block');
+                    var $label = $('#' + json.id + ' .layui-form-label');
+                    $block.empty();
+                    $label.empty();
+                    if (json.hideLabel) {
+                        $label.css("display", "none");
+                        $block.css("margin-left", "0px");
+                        $block.css({ width: 'calc({0})'.format(json.width) });
+                    } else {
+                        $label.css("display", "block");
+                        $block.css("margin-left", json.labelWidth);
+                        $block.css({ width: 'calc({0} - {1}px)'.format(json.width, json.labelWidth) });
+                    }
+                    $label.css("width", json.labelWidth);
+                    if (json.required) {
+                        $label.append('<span style="color:red;">*</span>');
+                    }
+                    $label.append(json.label + ":");
+                    var _html = '<input id="{0}" name="{0}"  lay-verify="{3}" class="layui-input icon-date widget-date {1}" style="line-height: 40px;{2}"></input>'.format(json.tag + json.id, _disabledClass, _disabledStyle, _required);
+                    $block.append(_html);
+                    laydate.render({
+                        elem: '#' + json.tag + json.id,
+                        btns: ['confirm'],
+                        type: json.dateType,
+                        format: json.dateFormat,
+                        value: json.dateDefaultValue,
+                        min: json.dataMinValue,
+                        max: json.dataMaxValue,
+                    });
+                },
+                /**
+                 * 根据components组件对象获取组件属性
+                 * @param {object} id 所属组件id
+                 * @param {object} index 所属对象组件索引
+                 * @param {object} that 实例对象
+                 * */
+                jsonData: function (id, index, that) {
+                    //分配一个新的ID
+                    var _json = JSON.parse(JSON.stringify(formField.components.date));
+                    _json.id = id;
+                    _json.index = index;
+                    return _json;
+
+                },
+                /**
+                 * 根据 json 对象显示对应的属性
+                 * @param {object} json 当前组件的json属性
+                 * @param {object} that 实例对象
+                 * */
+                property: function (json, that) {
+                    that.renderCommonProperty(json); //根据 json 对象获取对应的属性的html
+                    that.initCommonProperty(json); //初始化 json 对象获取对应的属性
+                },
+                /**
+                 * 根据json对象生成html文本
+                 * @param {object} json 当前组件的json属性
+                 * @param {boolean} selected 是否被选中
+                 * @param {object} that 实例对象
+                 * */
+                generateHtml: function (json, selected, that) {
+                    if (selected === undefined) {
+                        selected = false;
+                    }
+                    var _disabledClass = json.disabled ? ' layui-disabled' : '';
+                    var _disabledStyle = json.disabled ? ' pointer-events: none;' : '';
+                    var _required = json.required ? 'required' : '';
+                    var _hideLabel = json.hideLabel ? 'display: none;' : '';
+                    var _html = '<div id="{0}" class="layui-form-item {2}"  data-id="{0}" data-tag="{1}" data-index="{3}">'.format(json.id, json.tag, selected ? 'active' : '', json.index);
+                    _html += '<label class="layui-form-label {0}" style="width: {3}px;{4}"><span style="color:red;">{2}</span>{1}:</label>'.format(json.required ? 'layui-form-required' : '', json.label, json.required ? '*' : '', json.labelWidth, _hideLabel);
+                    if (json.hideLabel) {
+                        _html += '<div class="layui-input-block" style="width:calc({0});margin-left: 0px;">'.format(json.width);
+                    } else {
+                        _html += '<div class="layui-input-block" style="width:calc({0} - {1}px);margin-left: {1}px;">'.format(json.width, json.labelWidth);
+                    }
+                    _html += '<input id="{0}" name="{0}" lay-verify="{3}" class="layui-input icon-date widget-date {1}" style="line-height: 40px;{2}"></input>'.format(json.tag + json.id, _disabledClass, _disabledStyle, _required);
+                    _html += '</div>';
+                    _html += '</div>';
+                    return _html;
+                },
+                /**
+                 * 根据json对象生成js文本
+                 * @param {object} json 变更后的json属性
+                 * @param {object} that 实例对象
+                 * */
+                generateScript: function (json, that) {
+                    var scriptHtmlCode = '';
+                    scriptHtmlCode += ['laydate.render({'
+                        , 'elem: "#' + json.tag + json.id + '" ,'
+                        , 'type:"' + json.datetype + '",'
+                        , 'format:"' + json.dateformat + '",'
+                        , 'value:"' + json.dateDefaultValue + '",'
+                        , 'min:"' + json.dataMinValue + '",'
+                        , 'max:"' + json.dataMaxValue + '"});'].join('');
+                    return scriptHtmlCode;
+                }
+            },
+            rate: {
+                /**
+                 * 根据json对象生成html对象
+                 * @param {object} json 当前组件的json属性
+                 * @param {boolean} selected 是否被选中
+                 * @param {object} elem 表单面板jquery对象
+                 * @param {object} that 实例对象
+                 * */
+                render: function (json, selected, elem, that) {
+                    if (selected === undefined) {
+                        selected = false;
+                    }
+                    var _readonly = json.readonly ? 'readonly=""' : '';
+                    var _required = json.required ? 'required=""' : '';
+                    var _hideLabel = json.hideLabel ? 'display: none;' : '';
+                    var _html = '<div id="{0}" class="layui-form-item {2}"  data-id="{0}" data-tag="{1}" data-index="{3}">'.format(json.id, json.tag, selected ? 'active' : '', json.index);
+                    _html += '<label class="layui-form-label {0}" style="width:{2}px;{3}"><span style="color:red;">{4}</span>{1}:</label>'.format(json.required ? 'layui-form-required' : '', json.label, json.labelWidth, _hideLabel, json.required ? '*' : '');
+                    if (json.hideLabel) {
+                        _html += '<div class="layui-input-block" style="margin-left: 0px;">';
+                    } else {
+                        _html += '<div class="layui-input-block" style="margin-left: {0}px;">'.format(json.labelWidth + 30);
+                    }
+                    _html += '<div id="{0}" class="widget-rate"></div>'.format(json.tag + json.id);
+                    _html += '<input name="{0}" type="hidden" value="{1}"></input>'.format(json.id, json.defaultValue);
+                    _html += '</div>';
+                    _html += '</div>';
+                    elem.append(_html);
+                    rate.render({
+                        elem: '#' + json.tag + json.id,
+                        value: json.defaultValue,
+                        text: json.text,
+                        length: json.rateLength,
+                        half: json.half,
+                        readonly: json.readonly,
+                        theme: json.colorSelection,
+                        choose: function (value) {
+                            $("#" + json.id).find("input[name=" + json.id + "]").val(value);
+                        }
+                    });
+                },
+                /**
+                 * 根据json对象更新html对象
+                 * @param {object} json 变更后的json属性
+                 * @param {object} that 实例对象
+                 * */
+                update: function (json, that) {                    
+                    var _required = json.required ? 'required' : '';
+                    var $block = $('#' + json.id + ' .layui-input-block');
+                    var $label = $('#' + json.id + ' .layui-form-label');
+
+                    $label.empty();
+
+                    if (json.required) {
+                        $label.append('<span style="color:red;">*</span>');
+                    }
+                    if (json.hideLabel) {
+                        $label.css("display", "none");
+                        $block.css("margin-left", "0px");
+                    } else {
+                        $label.css("display", "block");
+                        $block.css("margin-left", json.labelWidth + 30);
+                    }
+                    $label.append(json.label + ":");
+
+                    rate.render({
+                        elem: '#' + json.tag + json.id,
+                        value: json.defaultValue,
+                        text: json.text,
+                        length: json.rateLength,
+                        half: json.half,
+                        readonly: json.readonly,
+                        theme: json.colorSelection,
+                        choose: function (value) {
+                            $("#" + json.id).find("input[name=" + json.id + "]").val(value);
+                        }
+                    });
+                },
+                /**
+                 * 根据components组件对象获取组件属性
+                 * @param {object} id 所属组件id
+                 * @param {object} index 所属对象组件索引
+                 * @param {object} that 实例对象
+                 * */
+                jsonData: function (id, index, that) {
+                    //分配一个新的ID
+                    var _json = JSON.parse(JSON.stringify(formField.components.rate));
+                    _json.id = id;
+                    _json.index = index;
+                    return _json;
+
+                },
+                /**
+                 * 根据 json 对象显示对应的属性
+                 * @param {object} json 当前组件的json属性
+                 * @param {object} that 实例对象
+                 * */
+                property: function (json, that) {
+                    that.renderCommonProperty(json); //根据 json 对象获取对应的属性的html
+                    that.initCommonProperty(json); //初始化 json 对象获取对应的属性
+                },
+                /**
+                 * 根据json对象生成html文本
+                 * @param {object} json 当前组件的json属性
+                 * @param {boolean} selected 是否被选中
+                 * @param {object} that 实例对象
+                 * */
+                generateHtml: function (json, selected, that) {
+                    if (selected === undefined) {
+                        selected = false;
+                    }
+                    var _disabledClass = json.disabled ? ' layui-disabled' : '';
+                    var _disabledStyle = json.disabled ? ' pointer-events: none;' : '';
+                    var _required = json.required ? 'required' : '';
+                    var _hideLabel = json.hideLabel ? 'display: none;' : '';
+                    var _html = '<div id="{0}" class="layui-form-item {2}"  data-id="{0}" data-tag="{1}" data-index="{3}">'.format(json.id, json.tag, selected ? 'active' : '', json.index);
+                    _html += '<label class="layui-form-label {0}" style="width: {3}px;{4}"><span style="color:red;">{2}</span>{1}:</label>'.format(json.required ? 'layui-form-required' : '', json.label, json.required ? '*' : '', json.labelWidth, _hideLabel);
+                    if (json.hideLabel) {
+                        _html += '<div class="layui-input-block" style="margin-left: 0px;">';
+                    } else {
+                        _html += '<div class="layui-input-block" style="margin-left: {0}px;">'.format(json.labelWidth + 30);
+                    }
+                    _html += '<input id="{0}" name="{0}" lay-verify="{3}" class="layui-input icon-date widget-date {1}" style="line-height: 40px;{2}"></input>'.format(json.tag + json.id, _disabledClass, _disabledStyle, _required);
+                    _html += '</div>';
+                    _html += '</div>';
+                    return _html;
+                },
+                /**
+                 * 根据json对象生成js文本
+                 * @param {object} json 变更后的json属性
+                 * @param {object} that 实例对象
+                 * */
+                generateScript: function (json, that) {
+                    var scriptHtmlCode = '';
+                    scriptHtmlCode += ['rate.render({'
+                        , 'elem: "#' + json.tag + json.id + '" ,'
+                        , 'value: ' + json.defaultValue + ','
+                        , 'text: ' + json.text + ','
+                        , 'length: ' + json.rateLength + ','
+                        , 'half: ' + json.half + ','
+                        , 'readonly: ' + json.readonly + ','
+                        , 'theme: ' + json.colorSelection + ','
+                        , 'choose: function(value){'
+                        , '$("#' + json.id + '").find("input[name="' + json.id + '"]").val(value);'
+                        , '}'
+                        , '});'].join('');
+                    return scriptHtmlCode;
+                }
+            },
+            carousel: {
+                /**
+                 * 根据json对象生成html对象
+                 * @param {object} json 当前组件的json属性
+                 * @param {boolean} selected 是否被选中
+                 * @param {object} elem 表单面板jquery对象
+                 * @param {object} that 实例对象
+                 * */
+                render: function (json, selected, elem, that) {
+                    if (selected === undefined) {
+                        selected = false;
+                    }
+                    var _html = '<div id="{0}" class="layui-form-item {2}"  data-id="{0}" data-tag="{1}" data-index="{3}">'.format(json.id, json.tag, selected ? 'active' : '', json.index);
+                    _html += '<div class="layui-carousel" id="{0}">'.format(json.tag + json.id);
+                    _html += '<div carousel-item class="carousel-item">';
+                    for (var i = 0; i < json.options.length; i++) {
+                        _html += '<div><img src="{0}" /></div>'.format(json.options[i].value);
+                    }
+                    _html += '</div>';//end for div carousel-item
+                    _html += '</div>';//end for class=layui-carousel
+                    _html += '</div>';
+                    elem.append(_html);
+                    carousel.render({
+                        elem: '#' + json.tag + json.id,
+                        width: json.width,//设置容器宽度
+                        height: json.height,//设置容器宽度
+                        arrow: json.arrow, //始终显示箭头
+                        index: json.startIndex,
+                        interval: json.interval,
+                        anim: json.anim,
+                        autoplay: json.autoplay,
+                    });
+                },
+                /**
+                 * 根据json对象更新html对象
+                 * @param {object} json 变更后的json属性
+                 * @param {object} that 实例对象
+                 * */
+                update: function (json, that) {
+                    $('#' + json.tag + json.id).remove();
+                    var _html = '';
+                    _html += '<div class="layui-carousel" id="{0}">'.format(json.tag + json.id);
+                    _html += '<div carousel-item class="carousel-item">';
+                    for (var i = 0; i < json.options.length; i++) {
+                        _html += '<div><img src="{0}" /></div>'.format(json.options[i].value);
+                    }
+                    _html += '</div>';//end for div carousel-item
+                    _html += '</div>';//end for class=layui-carousel
+                    $('#' + json.id).append(_html);
+                    carousel.render({
+                        elem: '#' + json.tag + json.id,
+                        width: json.width,//设置容器宽度
+                        height: json.height,//设置容器宽度
+                        arrow: json.arrow, //始终显示箭头
+                        index: json.startIndex,
+                        interval: json.interval,
+                        anim: json.anim,
+                        autoplay: json.autoplay
+                        //anim: 'updown' //切换动画方式
+                    });
+                },
+                /**
+                 * 根据components组件对象获取组件属性
+                 * @param {object} id 所属组件id
+                 * @param {object} index 所属对象组件索引
+                 * @param {object} that 实例对象
+                 * */
+                jsonData: function (id, index, that) {
+                    //分配一个新的ID
+                    var _json = JSON.parse(JSON.stringify(formField.components.carousel));
+                    _json.id = id;
+                    _json.index = index;
+                    return _json;
+
+                },
+                /**
+                 * 根据 json 对象显示对应的属性
+                 * @param {object} json 当前组件的json属性
+                 * @param {object} that 实例对象
+                 * */
+                property: function (json, that) {
+                    that.renderCommonProperty(json); //根据 json 对象获取对应的属性的html
+                    that.initCommonProperty(json); //初始化 json 对象获取对应的属性
+                },
+                /**
+                 * 根据json对象生成html文本
+                 * @param {object} json 当前组件的json属性
+                 * @param {boolean} selected 是否被选中
+                 * @param {object} that 实例对象
+                 * */
+                generateHtml: function (json, selected, that) {
+                    if (selected === undefined) {
+                        selected = false;
+                    }
+                    var _html = '<div id="{0}" class="layui-form-item {2}"  data-id="{0}" data-tag="{1}" data-index="{3}">'.format(json.id, json.tag, selected ? 'active' : '', json.index);
+                    _html += '<div class="layui-carousel" id="{0}">'.format(json.tag + json.id);
+                    _html += '<div carousel-item class="carousel-item">';
+                    for (var i = 0; i < json.options.length; i++) {
+                        _html += '<div><img src="{0}" /></div>'.format(json.options[i].value);
+                    }
+                    _html += '</div>';//end for div carousel-item
+                    _html += '</div>';//end for class=layui-carousel
+                    _html += '</div>';
+                    return _html;
+                },
+                /**
+                 * 根据json对象生成js文本
+                 * @param {object} json 变更后的json属性
+                 * @param {object} that 实例对象
+                 * */
+                generateScript: function (json, that) {
+                    var scriptHtmlCode = '';
+                    scriptHtmlCode += ['carousel.render({'
+                        , 'elem: "#' + json.tag + json.id + '" '
+                        , ',width: "' + json.width + '"'
+                        , ',height: "' + json.height + '"'
+                        , ',arrow: "' + json.arrow + '"'
+                        , ',interval: "' + json.interval + '"'
+                        , ',anim: "' + json.anim + '"'
+                        , ',autoplay: "' + json.autoplay + '"'
+                        , '});'].join('');
+                    return scriptHtmlCode;
+                }
+            },
+            colorpicker: {
+                /**
+                 * 根据json对象生成html对象
+                 * @param {object} json 当前组件的json属性
+                 * @param {boolean} selected 是否被选中
+                 * @param {object} elem 表单面板jquery对象
+                 * @param {object} that 实例对象
+                 * */
+                render: function (json, selected, elem, that) {
+                    if (selected === undefined) {
+                        selected = false;
+                    }
+                    var _hideLabel = json.hideLabel ? 'display: none;' : '';
+                    var _html = '<div id="{0}" class="layui-form-item {2}"  data-id="{0}" data-tag="{1}" data-index="{3}">'.format(json.id, json.tag, selected ? 'active' : '', json.index);
+                    _html += '<label class="layui-form-label {0}" style="width: {3}px;{4}"><span style="color:red;">{2}</span>{1}:</label>'.format(json.required ? 'layui-form-required' : '', json.label, json.required ? '*' : '', json.labelWidth, _hideLabel);
+                    if (json.hideLabel) {
+                        _html += '<div class="layui-input-block" style="margin-left: 0px">';
+                    } else {
+                        _html += '<div class="layui-input-block" style="margin-left: {0}px">'.format(json.labelWidth);
+                    }
+                    if (json.disabled) {
+                        _html += '<div class="iceEditor-disabled" style="width: 10%;height: 89%;"></div>';
+                    }
+                    _html += '<div id="{0}" class="widget-rate"></div>'.format(json.tag + json.id);
+                    _html += '<input name="{0}" type="hidden" value="{1}"></input>'.format(json.id, json.defaultValue);
+                    _html += '</div>';
+                    _html += '</div>';
+                    elem.append(_html);
+                    colorpicker.render({
+                        elem: '#' + json.tag + json.id
+                        , color: json.defaultValue
+                        , format: 'rgb'
+                        , predefine: true
+                        , alpha: true
+                        , done: function (color) {
+                            $("#" + json.id).find("input[name=" + json.id + "]").val(color);
+                        }
+                    });
+                },
+                /**
+                 * 根据json对象更新html对象
+                 * @param {object} json 变更后的json属性
+                 * @param {object} that 实例对象
+                 * */
+                update: function (json, that) {
+                    var $block = $('#' + json.id + ' .layui-input-block');
+                    var $label = $('#' + json.id + ' .layui-form-label');
+                    $label.empty();
+                    if (json.hideLabel) {
+                        $label.css("display", "none");
+                        $block.css("margin-left", "0px");
+                    } else {
+                        $label.css("display", "block");
+                        $block.css("margin-left", json.labelWidth);
+                    } $label.css("width", json.labelWidth);
+                    $label.append(json.label + ":");
+                    if (json.disabled) {
+                        $("#" + json.id).find(".layui-input-block").append('<div class="iceEditor-disabled" style="width: 10%;height: 89%;"></div>');
+                    } else {
+                        $("#" + json.id).find(".iceEditor-disabled").remove();
+                    }
+                    colorpicker.render({
+                        elem: '#' + json.tag + json.id
+                        , color: json.defaultValue
+                        , format: 'rgb'
+                        , predefine: true
+                        , alpha: true
+                        , done: function (color) {
+                            $("#" + json.id).find("input[name=" + json.id + "]").val(color);
+                        }
+                    });
+                },
+                /**
+                 * 根据components组件对象获取组件属性
+                 * @param {object} id 所属组件id
+                 * @param {object} index 所属对象组件索引
+                 * @param {object} that 实例对象
+                 * */
+                jsonData: function (id, index, that) {
+                    //分配一个新的ID
+                    var _json = JSON.parse(JSON.stringify(formField.components.colorpicker));
+                    _json.id = id;
+                    _json.index = index;
+                    return _json;
+
+                },
+                /**
+                 * 根据 json 对象显示对应的属性
+                 * @param {object} json 当前组件的json属性
+                 * @param {object} that 实例对象
+                 * */
+                property: function (json, that) {
+                    that.renderCommonProperty(json); //根据 json 对象获取对应的属性的html
+                    that.initCommonProperty(json); //初始化 json 对象获取对应的属性
+                },
+                /**
+                 * 根据json对象生成html文本
+                 * @param {object} json 当前组件的json属性
+                 * @param {boolean} selected 是否被选中
+                 * @param {object} that 实例对象
+                 * */
+                generateHtml: function (json, selected, that) {
+                    if (selected === undefined) {
+                        selected = false;
+                    }
+                    var _hideLabel = json.hideLabel ? 'display: none;' : '';
+                    var _html = '<div id="{0}" class="layui-form-item {2}"  data-id="{0}" data-tag="{1}" data-index="{3}">'.format(json.id, json.tag, selected ? 'active' : '', json.index);
+                    _html += '<label class="layui-form-label {0}" style="width: {3}px;{4}"><span style="color:red;">{2}</span>{1}:</label>'.format(json.required ? 'layui-form-required' : '', json.label, json.required ? '*' : '', json.labelWidth, _hideLabel);
+                    if (json.hideLabel) {
+                        _html += '<div class="layui-input-block" style="margin-left: 0px">';
+                    } else {
+                        _html += '<div class="layui-input-block" style="margin-left: {0}px">'.format(json.labelWidth);
+                    }
+                    if (json.disabled) {
+                        _html += '<div class="iceEditor-disabled" style="width: 10%;height: 89%;"></div>';
+                    }
+                    _html += '<div id="{0}" class="widget-rate"></div>'.format(json.tag + json.id);
+                    _html += '<input name="{0}" type="hidden" value="{1}"></input>'.format(json.id, json.defaultValue);
+                    _html += '</div>';
+                    _html += '</div>';
+                    return _html;
+                },
+                /**
+                 * 根据json对象生成js文本
+                 * @param {object} json 变更后的json属性
+                 * @param {object} that 实例对象
+                 * */
+                generateScript: function (json, that) {
+                    var scriptHtmlCode = '';
+                    scriptHtmlCode += ['colorpicker.render({'
+                        , 'elem: "#' + json.tag + json.id + '"'
+                        , ',format: \'rgb\''
+                        , ',predefine: true'
+                        , ',alpha: true'
+                        , ',done: function (color) {'
+                        , '$("#' + json.id + '").find("input[name="' + json.id + '"]").val(color);'
+                        , '}'
+                        , '});'].join('');
+                    return scriptHtmlCode;
+                }
+            },
+            image: {
+                /**
+                 * 根据json对象生成html对象
+                 * @param {object} json 当前组件的json属性
+                 * @param {boolean} selected 是否被选中
+                 * @param {object} elem 表单面板jquery对象
+                 * @param {object} that 实例对象
+                 * */
+                render: function (json, selected, elem, that) {
+                    if (selected === undefined) {
+                        selected = false;
+                    }
+                    var _html = '<div id="{0}" class="layui-form-item {2}"  data-id="{0}" data-tag="{1}" data-index="{3}">'.format(json.id, json.tag, selected ? 'active' : '', json.index);
+                    _html += '<label class="layui-form-label {0}"><span style="color:red;">{2}</span>{1}:</label>'.format(json.required ? 'layui-form-required' : '', json.label, json.required ? '*' : '');
+                    _html += '<div class="layui-input-block">';
+                    _html += '<div class="layui-upload">';
+                    // _html += '<button type="button" class="layui-btn" id="{0}">图片上传1</button>'.format(json.tag + json.id);
+                    _html += '<blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;width: 88%;margin-left: 5px;">预览图：';
+                    _html += '<div class="layui-upload-list uploader-list" style="overflow: auto;" id="uploader-list-{0}">'.format(json.id);
+                    _html += '</div>';
+                    _html += '</blockquote>';
+                    _html += '</div>';
+                    _html += '</div>';
+                    _html += '</div>';
+                    elem.append(_html);
+                    if (that.config.viewOrDesign) {
+                        var data = { "select": json.tag + json.id, "uploadUrl": json.uploadUrl };
+                        images.push(data);
+                    }
+                },
+                /**
+                 * 根据json对象更新html对象
+                 * @param {object} json 变更后的json属性
+                 * @param {object} that 实例对象
+                 * */
+                update: function (json, that) {
+                    var _required = json.required ? 'required' : '';
+                    var $label = $('#' + json.id + ' .layui-form-label');
+                    $label.empty();
+                    if (json.required) {
+                        $label.append('<span style="color:red;">*</span>');
+                    }
+                    $label.append(json.label + ":");
+
+                },
+                /**
+                 * 根据components组件对象获取组件属性
+                 * @param {object} id 所属组件id
+                 * @param {object} index 所属对象组件索引
+                 * @param {object} that 实例对象
+                 * */
+                jsonData: function (id, index, that) {
+                    //分配一个新的ID
+                    var _json = JSON.parse(JSON.stringify(formField.components.image));
+                    _json.id = id;
+                    _json.index = index;
+                    return _json;
+
+                },
+                /**
+                 * 根据 json 对象显示对应的属性
+                 * @param {object} json 当前组件的json属性
+                 * @param {object} that 实例对象
+                 * */
+                property: function (json, that) {
+                    that.renderCommonProperty(json); //根据 json 对象获取对应的属性的html
+                    that.initCommonProperty(json); //初始化 json 对象获取对应的属性
+                },
+                /**
+                 * 根据json对象生成html文本
+                 * @param {object} json 当前组件的json属性
+                 * @param {boolean} selected 是否被选中
+                 * @param {object} that 实例对象
+                 * */
+                generateHtml: function (json, selected, that) {
+                    if (selected === undefined) {
+                        selected = false;
+                    }
+                    var _html = '<div id="{0}" class="layui-form-item {2}"  data-id="{0}" data-tag="{1}" data-index="{3}">'.format(json.id, json.tag, selected ? 'active' : '', json.index);
+                    _html += '<label class="layui-form-label {0}">{1}:</label>'.format(json.required ? 'layui-form-required' : '', json.label);
+                    _html += '<div class="layui-input-block">';
+                    _html += '<div class="layui-upload">';
+                    _html += '<button type="button" class="layui-btn" id="{0}">图片上传</button>'.format(json.tag + json.id);
+                    _html += '<blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;width: 88%">预览图：';
+                    _html += '<div class="layui-upload-list uploader-list" style="overflow: auto;" id="uploader-list-{0}">'.format(json.id);
+                    _html += '</div>';
+                    _html += '</blockquote>';
+                    _html += '</div>';
+                    _html += '</div>';
+                    _html += '</div>';
+                    return _html;
+                },
+                /**
+                 * 根据json对象生成js文本
+                 * @param {object} json 变更后的json属性
+                 * @param {object} that 实例对象
+                 * */
+                generateScript: function (json, that) {
+                    var scriptHtmlCode = '';
+                    scriptHtmlCode += ['upload.render({'
+                        , 'elem: "#' + json.tag + json.id + '" '
+                        , ', url: "' + json.uploadUrl + '"'
+                        , ', multiple: true'
+                        , ', before: function (obj) {'
+                        , 'layer.msg("图片上传中...", {'
+                        , 'icon: 16,'
+                        , 'shade: 0.01,'
+                        , 'time: 0'
+                        , '})'
+                        , '}'
+                        , ', done: function (res) {'
+                        , 'layer.close(layer.msg());'
+                        , '$("#uploader-list-' + json.id + '").append('
+                        , '\'<div class="file-iteme"><div class="handle"><i class="layui-icon layui-icon-delete"></i></div><img style="width: 100px;height: 100px;" src="\'+ res.data.src + \'">'
+                        , '<div class="info">\'+ res.data.title+\'</div>'
+                        , '</div>\''
+                        , ');'
+                        , '}'
+                        , '});'].join('');
+                    return scriptHtmlCode;
+                }
+            },
+            file: {
+                /**
+                 * 根据json对象生成html对象
+                 * @param {object} json 当前组件的json属性
+                 * @param {boolean} selected 是否被选中
+                 * @param {object} elem 表单面板jquery对象
+                 * @param {object} that 实例对象
+                 * */
+                render: function (json, selected, elem, that) {
+                    if (selected === undefined) {
+                        selected = false;
+                    }
+                    var _html = '<div id="{0}" class="layui-form-item {2}"  data-id="{0}" data-tag="{1}" data-index="{3}">'.format(json.id, json.tag, selected ? 'active' : '', json.index);
+                    _html += '<label class="layui-form-label {0}"><span style="color:red;">{2}</span>{1}:</label>'.format(json.required ? 'layui-form-required' : '', json.label, json.required ? '*' : '');
+                    _html += '<div class="layui-input-block">';
+                    _html += '<div class="layui-upload">';
+                    // _html += '<button type="button" class="layui-btn" id="{0}">选择文件</button> '.format(json.tag + json.id);
+                    _html += ' <div class="layui-upload-list" style="max-width: 1000px;margin-left: 5px;"><table class="layui-table">';
+                    _html += '<colgroup><col><col width="100"><col width="150"><col width="100"></colgroup>';
+                    _html += '<thead><tr><th>文件名</th><th>大小</th><th>上传进度</th><th>操作</th></tr></thead>';
+                    _html += '<tbody id="list-{0}"></tbody></table></div>'.format(json.id);
+                    // _html += '<button type="button" class="layui-btn" id="listAction-{0}">开始上传</button>'.format(json.id);
+                    _html += '</div>';
+                    _html += '</blockquote>';
+                    _html += '</div>';
+                    _html += '</div>';
+                    _html += '</div>';
+                    elem.append(_html);
+                    if (that.config.viewOrDesign) {
+                        var data = { "select": json.tag + json.id, "uploadUrl": json.uploadUrl };
+                        files.push(data);
+                    }
+                },
+                /**
+                 * 根据json对象更新html对象
+                 * @param {object} json 变更后的json属性
+                 * @param {object} that 实例对象
+                 * */
+                update: function (json, that) {
+                    var _required = json.required ? 'required' : '';
+                    var $label = $('#' + json.id + ' .layui-form-label');
+                    $label.empty();
+                    if (json.required) {
+                        $label.append('<span style="color:red;">*</span>');
+                    }
+                    $label.append(json.label + ":");
+                },
+                /**
+                 * 根据components组件对象获取组件属性
+                 * @param {object} id 所属组件id
+                 * @param {object} index 所属对象组件索引
+                 * @param {object} that 实例对象
+                 * */
+                jsonData: function (id, index, that) {
+                    //分配一个新的ID
+                    var _json = JSON.parse(JSON.stringify(formField.components.file));
+                    _json.id = id;
+                    _json.index = index;
+                    return _json;
+
+                },
+                /**
+                 * 根据 json 对象显示对应的属性
+                 * @param {object} json 当前组件的json属性
+                 * @param {object} that 实例对象
+                 * */
+                property: function (json, that) {
+                    that.renderCommonProperty(json); //根据 json 对象获取对应的属性的html
+                    that.initCommonProperty(json); //初始化 json 对象获取对应的属性
+                },
+                /**
+                 * 根据json对象生成html文本
+                 * @param {object} json 当前组件的json属性
+                 * @param {boolean} selected 是否被选中
+                 * @param {object} that 实例对象
+                 * */
+                generateHtml: function (json, selected, that) {
+                    if (selected === undefined) {
+                        selected = false;
+                    }
+                    var _html = '<div id="{0}" class="layui-form-item {2}"  data-id="{0}" data-tag="{1}" data-index="{3}">'.format(json.id, json.tag, selected ? 'active' : '', json.index);
+                    _html += '<label class="layui-form-label {0}">{1}:</label>'.format(json.required ? 'layui-form-required' : '', json.label);
+                    _html += '<div class="layui-input-block">';
+                    _html += '<div class="layui-upload">';
+                    _html += '<button type="button" class="layui-btn layui-btn-normal" id="{0}">选择多文件</button> '.format(json.tag + json.id);
+                    _html += ' <div class="layui-upload-list" style="max-width: 1000px;"><table class="layui-table">';
+                    _html += '<colgroup><col><col width="150"><col width="260"><col width="150"></colgroup>';
+                    _html += '<thead><tr><th>文件名</th><th>大小</th><th>上传进度</th><th>操作</th></tr></thead>';
+                    _html += '<tbody id="list-{0}"></tbody></table></div>'.format(json.id);
+                    // _html += '<button type="button" class="layui-btn" id="listAction-{0}">开始上传</button>'.format(json.id);
+                    _html += '</div>';
+                    _html += '</blockquote>';
+                    _html += '</div>';
+                    _html += '</div>';
+                    _html += '</div>';
+                    return _html;
+                },
+                /**
+                 * 根据json对象生成js文本
+                 * @param {object} json 变更后的json属性
+                 * @param {object} that 实例对象
+                 * */
+                generateScript: function (json, that) {
+                    var scriptHtmlCode = '';
+                    scriptHtmlCode += ['upload.render({'
+                        , 'elem: "#' + json.tag + json.id + '" '
+                        , ', url: "' + json.uploadUrl + '"'
+                        , ' ,elemList: $("#list-' + json.id + '")'
+                        , ',accept: "file"'
+                        , ',multiple: true'
+                        , ',number: 3'
+                        , ',auto: false'
+                        , ',bindAction: "#listAction-' + json.id + '"'
+                        , ',choose: function(obj){'
+                        , 'var that = this;'
+                        , 'var files = this.files = obj.pushFile();'
+                        , 'obj.preview(function(index, file, result){'
+                        , 'var tr = $(["<tr id="upload-"+ index +"">"'
+                        , ',"<td>"+ file.name +"</td>"'
+                        , ',"<td>"+ (file.size/1014).toFixed(1) +"kb</td>"'
+                        , ',"<td><div class="layui-progress" lay-filter="progress-demo-"+ index +""><div class="layui-progress-bar" lay-percent=""></div></div></td>"'
+                        , ',"<td>","<button class="layui-btn layui-btn-xs demo-reload layui-hide">重传</button>","<button class="layui-btn layui-btn-xs layui-btn-danger demo-delete">删除</button>","</td>"'
+                        , ',"</tr>"].join(""));'
+                        , 'tr.find(".demo-reload").on("click", function(){obj.upload(index, file);});'
+                        , 'tr.find(".demo-delete").on("click", function(){delete files[index];tr.remove();uploadListIns.config.elem.next()[0].value = ""; });'
+                        , 'that.elemList.append(tr);'
+                        , 'element.render("progress");}'
+                        , ',done: function(res, index, upload)'
+                        , '{var that = this;if(res.code == 0){var tr = that.elemList.find("tr#upload-"+ index),tds = tr.children();tds.eq(3).html("");delete this.files[index];return;}this.error(index, upload);}'
+                        , ',allDone: function(obj){console.log(obj)}'
+                        , ',error: function(index, upload){var that = this;var tr = that.elemList.find("tr#upload-"+ index),'
+                        , 'tds = tr.children();tds.eq(3).find(".demo-reload").removeClass("layui-hide");}'
+                        , ',progress: function(n, elem, e, index){element.progress("progress-demo-"+ index, n + "%");}'
+                        , '});'].join('');
+                    return scriptHtmlCode;
+                }
+            },
+            dateRange: {
+                /**
+                 * 根据json对象生成html对象
+                 * @param {object} json 当前组件的json属性
+                 * @param {boolean} selected 是否被选中
+                 * @param {object} elem 表单面板jquery对象
+                 * @param {object} that 实例对象
+                 * */
+                render: function (json, selected, elem, that) {
+                    if (selected === undefined) {
+                        selected = false;
+                    }
+                    var _disabledClass = json.disabled ? ' layui-disabled' : '';
+                    var _disabledStyle = json.disabled ? ' pointer-events: none;' : '';
+                    var _required = json.required ? 'required' : '';
+                    var _hideLabel = json.hideLabel ? 'display: none;' : '';
+                    var _html = '<div id="{0}" class="layui-form-item {2}"  data-id="{0}" data-tag="{1}" data-index="{3}">'.format(json.id, json.tag, selected ? 'active' : '', json.index);
+                    _html += '<div class="layui-inline">';
+                    _html += '<label class="layui-form-label {0}" style="width: {3}px;{4}"><span style="color:red;">{2}</span>{1}:</label>'.format(json.required ? 'layui-form-required' : '', json.label, json.required ? '*' : '', json.labelWidth, _hideLabel);
+                    _html += '<div class="layui-inline" id="{0}" style="line-height: 40px;{1}">'.format(json.tag + json.id, _disabledStyle);
+                    _html += '<div class="layui-input-inline">';
+                    _html += '<input id="start-{0}" lay-verify="{3}" name="start{2}" class="layui-input {1}" autocomplete="off" placeholder="开始日期"></input>'.format(json.tag + json.id, _disabledClass, json.id, _required);
+                    _html += '</div>';
+                    _html += '<div class="layui-form-mid">-</div>';
+                    _html += '<div class="layui-input-inline">';
+                    _html += '<input id="end-{0}" lay-verify="{3}" name="end{2}" class="layui-input {1}" autocomplete="off" placeholder="结束日期"></input>'.format(json.tag + json.id, _disabledClass, json.id, _required);
+                    _html += '</div>';
+                    _html += '</div>';
+                    _html += '</div>';
+                    _html += '</div>';
+                    elem.append(_html);
+                    laydate.render({
+                        elem: '#' + json.tag + json.id,
+                        type: json.dateType,
+                        format: json.dateFormat,
+                        min: json.dataMinValue,
+                        max: json.dataMaxValue,
+                        range: ['#start-' + json.tag + json.id, '#end-' + json.tag + json.id]
+                    });
+                    if (json.dateRangeDefaultValue !== null && json.dateRangeDefaultValue !== ""
+                        && json.dateRangeDefaultValue !== undefined) {
+                        var split = json.dateRangeDefaultValue.split(" - ");
+                        $('#start-' + json.tag + json.id).val(split[0]);
+                        $('#end-' + json.tag + json.id).val(split[1]);
+                    }
+                },
+                /**
+                 * 根据json对象更新html对象
+                 * @param {object} json 变更后的json属性
+                 * @param {object} that 实例对象
+                 * */
+                update: function (json, that) {
+                    var _disabledClass = json.disabled ? ' layui-disabled' : '';
+                    var _disabledStyle = json.disabled ? ' pointer-events: none;' : '';
+                    var _required = json.required ? 'required' : '';
+                    var _hideLabel = json.hideLabel ? 'display: none;' : '';
+                    var _html = '<div class="layui-inline">';
+                    _html += '<label class="layui-form-label {0}" style="width: {3}px;{4}"><span style="color:red;">{2}</span>{1}:</label>'.format(json.required ? 'layui-form-required' : '', json.label, json.required ? '*' : '', json.labelWidth, _hideLabel);
+                    _html += '<div class="layui-inline" id="{0}" style="line-height: 40px;{1}">'.format(json.tag + json.id, _disabledStyle);
+                    _html += '<div class="layui-input-inline">';
+                    _html += '<input id="start-{0}" lay-verify="{3}" name="start{2}" class="layui-input {1}" autocomplete="off" placeholder="开始日期" ></input>'.format(json.tag + json.id, _disabledClass, json.id, _required);
+                    _html += '</div>';
+                    _html += '<div class="layui-form-mid">-</div>';
+                    _html += '<div class="layui-input-inline">';
+                    _html += '<input id="end-{0}" lay-verify="{3}" name="end{2}" class="layui-input {1}" autocomplete="off" placeholder="结束日期"></input>'.format(json.tag + json.id, _disabledClass, json.id, _required);
+                    _html += '</div>';
+                    _html += '</div>';
+                    _html += '</div>';
+                    $('#' + json.id + ' .layui-inline').remove();
+                    $('#' + json.id).append(_html);
+                    laydate.render({
+                        elem: '#' + json.tag + json.id,
+                        type: json.dateType,
+                        format: json.dateFormat,
+                        //value: item.dateDefaultValue,
+                        min: json.dataMinValue,
+                        max: json.dataMaxValue,
+                        range: ['#start-' + json.tag + json.id, '#end-' + json.tag + json.id]
+                    });
+                    if (json.dateRangeDefaultValue !== null && json.dateRangeDefaultValue !== ""
+                        && json.dateRangeDefaultValue !== undefined) {
+                        var split = json.dateRangeDefaultValue.split(" - ");
+                        $('#start-' + json.tag + json.id).val(split[0]);
+                        $('#end-' + json.tag + json.id).val(split[1]);
+                    }
+                },
+                /**
+                 * 根据components组件对象获取组件属性
+                 * @param {object} id 所属组件id
+                 * @param {object} index 所属对象组件索引
+                 * @param {object} that 实例对象
+                 * */
+                jsonData: function (id, index, that) {
+                    var _json = JSON.parse(JSON.stringify(formField.components.dateRange));
+                    _json.id = id;
+                    _json.index = index;
+                    return _json;
+
+                },
+                /**
+                 * 根据 json 对象显示对应的属性
+                 * @param {object} json 当前组件的json属性
+                 * @param {object} that 实例对象
+                 * */
+                property: function (json, that) {
+                    that.renderCommonProperty(json); //根据 json 对象获取对应的属性的html
+                    that.initCommonProperty(json); //初始化 json 对象获取对应的属性
+                },
+                /**
+                 * 根据json对象生成html文本
+                 * @param {object} json 当前组件的json属性
+                 * @param {boolean} selected 是否被选中
+                 * @param {object} that 实例对象
+                 * */
+                generateHtml: function (json, selected, that) {
+                    if (selected === undefined) {
+                        selected = false;
+                    }
+                    var _disabledClass = json.disabled ? ' layui-disabled' : '';
+                    var _disabledStyle = json.disabled ? ' pointer-events: none;' : '';
+                    var _required = json.required ? 'required' : '';
+                    var _hideLabel = json.hideLabel ? 'display: none;' : '';
+                    var _html = '<div id="{0}" class="layui-form-item {2}"  data-id="{0}" data-tag="{1}" data-index="{3}">'.format(json.id, json.tag, selected ? 'active' : '', json.index);
+                    _html += '<div class="layui-inline">';
+                    _html += '<label class="layui-form-label {0}" style="width: {3}px;{4}"><span style="color:red;">{2}</span>{1}:</label>'.format(json.required ? 'layui-form-required' : '', json.label, json.required ? '*' : '', json.labelWidth, _hideLabel);
+                    _html += '<div class="layui-inline" id="{0}" style="line-height: 40px;{1}">'.format(json.tag + json.id, _disabledStyle);
+                    _html += '<div class="layui-input-inline">';
+                    _html += '<input id="start-{0}" lay-verify="{3}" name="start{2}" class="layui-input {1}" autocomplete="off" placeholder="开始日期"></input>'.format(json.tag + json.id, _disabledClass, json.id, _required);
+                    _html += '</div>';
+                    _html += '<div class="layui-form-mid">-</div>';
+                    _html += '<div class="layui-input-inline">';
+                    _html += '<input id="end-{0}" lay-verify="{3}" name="end{2}" class="layui-input {1}" autocomplete="off" placeholder="结束日期"></input>'.format(json.tag + json.id, _disabledClass, json.id, _required);
+                    _html += '</div>';
+                    _html += '</div>';
+                    _html += '</div>';
+                    _html += '</div>';
+                    return _html;
+                },
+                /**
+                 * 根据json对象生成js文本
+                 * @param {object} json 变更后的json属性
+                 * @param {object} that 实例对象
+                 * */
+                generateScript: function (json, that) {
+                    var scriptHtmlCode = '';
+                    scriptHtmlCode += ['laydate.render({'
+                        , 'elem:"#' + json.tag + json.id + '",'
+                        , 'type:' + json.datetype + ','
+                        , 'format:' + json.dateformat + ''
+                        , 'min:' + json.dataMinValue + ''
+                        , 'max:' + json.dataMaxValue + ''
+                        , 'range:["#start-' + json.tag + json.id + '", "#end-' + json.tag + json.id + '"]'
+                        , '});'].join('');
+                    return scriptHtmlCode;
+                }
+            },
+            bottom: {
+                /**
+                 * 根据json对象生成html对象
+                 * @param {object} json 当前组件的json属性
+                 * @param {boolean} selected 是否被选中
+                 * @param {object} elem 表单面板jquery对象
+                 * @param {object} that 实例对象
+                 * */
+                render: function (json, selected, elem, that) {
+                    if (selected === undefined) {
+                        selected = false;
+                    }
+                    var _coustomCss = "";
+                    if (json.buttonSize === "layui-btn-lg") {
+                        _coustomCss = "custom-lg";
+                    }
+                    if (json.buttonSize === "") {
+                        _coustomCss = "custom-zc";
+                    }
+                    if (json.buttonSize === "layui-btn-sm") {
+                        _coustomCss = "custom-sm";
+                    }
+                    if (json.buttonSize === "layui-btn-xs") {
+                        _coustomCss = "custom-xs";
+                    }
+                    var _html = '<div id="{0}" class="layui-form-item {2}"  data-id="{0}" data-tag="{1}" data-index="{3}">'.format(json.id, json.tag, selected ? 'active' : '', json.index);
+                    if (!json.hideLabel) {
+                        _html += '<label class="layui-form-label" style="width: {1}px;">{0}:</label>'.format(json.label, json.labelWidth);
+                    }
+                    _html += '<div class="layui-input-block" style="margin-left: 0px;">';
+                    if (json.disabled) {
+                        _html += '<button id="{0}" type="button" class="layui-btn {1} layui-btn-disabled {2}"><i class="layui-icon {3}"></i> {4}</button>'.format(json.id + json.tag, json.buttonSize, _coustomCss, json.buttonIcon, json.buttonVlaue);
+                    } else {
+                        _html += '<button id="{0}" type="button" class="layui-btn {1} {2} {3}"><i class="layui-icon {4}"></i> {5}</button>'.format(json.id + json.tag, json.buttonSize, json.buttonType, _coustomCss, json.buttonIcon, json.buttonVlaue);
+                    }
+                    _html += '</div>';
+                    _html += '</div>';
+                    elem.append(_html);
+                },
+                /**
+                 * 根据json对象更新html对象
+                 * @param {object} json 变更后的json属性
+                 * @param {object} that 实例对象
+                 * */
+                update: function (json, that) {
+                    var $block = $('#' + json.id + ' .layui-input-block');
+                    var $label = $('#' + json.id + ' .layui-form-label');
+                    if (json.hideLabel) {
+                        $label.remove();
+                        $block.css("margin-left", "0px");
+                    } else {
+                        if ($('#' + json.id).find("label").length === 0) {
+                            $('#' + json.id).prepend('<label class="layui-form-label" style="width: {1}px;">{0}:</label>'.format(json.label, json.labelWidth));
+                        } else {
+                            $label.css("width", json.labelWidth + "px");
+                        }
+                        $label.empty();
+                        $label.append(json.label + ":");
+                    }
+                    $block.empty();
+                    var _html = '';
+                    var _coustomCss = "";
+                    if (json.buttonSize === "layui-btn-lg") {
+                        _coustomCss = "custom-lg";
+                    }
+                    if (json.buttonSize === "") {
+                        _coustomCss = "custom-zc";
+                    }
+                    if (json.buttonSize === "layui-btn-sm") {
+                        _coustomCss = "custom-sm";
+                    }
+                    if (json.buttonSize === "layui-btn-xs") {
+                        _coustomCss = "custom-xs";
+                    }
+                    //重绘设计区改id下的所有元素
+                    if (json.disabled) {
+                        _html += '<button id="{0}" type="button" class="layui-btn {1} layui-btn-disabled {2}"><i class="layui-icon {3}"></i> {4}</button>'.format(json.id + json.tag, json.buttonSize, _coustomCss, json.buttonIcon, json.buttonVlaue);
+                    } else {
+                        _html += '<button id="{0}" type="button" class="layui-btn {1} {2} {3}"><i class="layui-icon {4}"></i> {5}</button>'.format(json.id + json.tag, json.buttonSize, json.buttonType, _coustomCss, json.buttonIcon, json.buttonVlaue);
+                    }
+                    $block.append(_html);
+                },
+                /**
+                 * 根据components组件对象获取组件属性
+                 * @param {object} id 所属组件id
+                 * @param {object} index 所属对象组件索引
+                 * @param {object} that 实例对象
+                 * */
+                jsonData: function (id, index, that) {
+                    //分配一个新的ID
+                    var _json = JSON.parse(JSON.stringify(formField.components.bottom));
+                    _json.id = id;
+                    _json.index = index;
+                    return _json;
+                },
+                /**
+                 * 根据 json 对象显示对应的属性
+                 * @param {object} json 当前组件的json属性
+                 * @param {object} that 实例对象
+                 * */
+                property: function (json, that) {
+                    that.renderCommonProperty(json); //根据 json 对象获取对应的属性的html
+                    that.initCommonProperty(json); //初始化 json 对象获取对应的属性
+                },
+                /**
+                 * 根据json对象生成html文本
+                 * @param {object} json 当前组件的json属性
+                 * @param {boolean} selected 是否被选中
+                 * @param {object} that 实例对象
+                 * */
+                generateHtml: function (json, selected, that) {
+                    if (selected === undefined) {
+                        selected = false;
+                    }
+                    var _coustomCss = "";
+                    if (json.buttonSize === "layui-btn-lg") {
+                        _coustomCss = "custom-lg";
+                    }
+                    if (json.buttonSize === "") {
+                        _coustomCss = "custom-zc";
+                    }
+                    if (json.buttonSize === "layui-btn-sm") {
+                        _coustomCss = "custom-sm";
+                    }
+                    if (json.buttonSize === "layui-btn-xs") {
+                        _coustomCss = "custom-xs";
+                    }
+                    var _html = '<div id="{0}" class="layui-form-item {2}"  data-id="{0}" data-tag="{1}" data-index="{3}">'.format(json.id, json.tag, selected ? 'active' : '', json.index);
+                    if (!json.hideLabel) {
+                        _html += '<label class="layui-form-label" style="width: {1}px;">{0}:</label>'.format(json.label, json.labelWidth);
+                    }
+                    _html += '<div class="layui-input-block" style="margin-left: 0px;">';
+                    if (json.disabled) {
+                        _html += '<button id="{0}" type="button" class="layui-btn {1} layui-btn-disabled {2}"><i class="layui-icon {3}"></i> {4}</button>'.format(json.id + json.tag, json.buttonSize, _coustomCss, json.buttonIcon, json.buttonVlaue);
+                    } else {
+                        _html += '<button id="{0}" type="button" class="layui-btn {1} {2} {3}"><i class="layui-icon {4}"></i> {5}</button>'.format(json.id + json.tag, json.buttonSize, json.buttonType, _coustomCss, json.buttonIcon, json.buttonVlaue);
+                    }
+                    _html += '</div>';
+                    _html += '</div>';
+                    return _html;
+                },
+                /**
+                 * 根据json对象生成js文本
+                 * @param {object} json 变更后的json属性
+                 * @param {object} that 实例对象
+                 * */
+                generateScript: function (json, that) {
+                    return '';
+                }
+            },
+            numberInput: {
+                /**
+                 * 根据json对象生成html对象
+                 * @param {object} json 当前组件的json属性
+                 * @param {boolean} selected 是否被选中
+                 * @param {object} elem 表单面板jquery对象
+                 * @param {object} that 实例对象
+                 * */
+                render: function (json, selected, elem, that) {
+                    if (selected === undefined) {
+                        selected = false;
+                    }
+                    var _disabled = json.disabled ? 'disabled=""' : '';
+                    var _disabledClass = json.disabled ? ' layui-disabled' : '';
+                    var _required = json.required ? 'required' : '';
+                    var _hideLabel = json.hideLabel ? 'display: none;' : '';
+                    var _html = '<div id="{0}" class="layui-form-item {2}"  data-id="{0}" data-tag="{1}" data-index="{3}">'.format(json.id, json.tag, selected ? 'active' : '', json.index);
+                    _html += '<label class="layui-form-label" style="width: {1};{2}">{0}:</label>'.format(json.label, json.labelWidth, _hideLabel);
+                    if (json.hideLabel) {
+                        _html += '<div class="layui-input-block" style="width:calc({0});margin-left: 0px;">'.format(json.width);
+                    } else {
+                        _html += '<div class="layui-input-block" style="width:calc({0} - {1}px);margin-left: {1}px;">'.format(json.width, json.labelWidth);
+                    }
+                    _html += '<input name="{0}" id="{9}" value="{1}" placeholder="{3}" class="layui-input{5}" lay-vertype="tips" min="{6}" max="{7}" step="{8}"  {4} style="width:{2}">'
+                        .format(json.id, json.defaultValue ? json.defaultValue : '0', json.width, json.placeholder, _disabled, _disabledClass, json.minValue, json.maxValue, json.stepValue, json.tag + json.id);
+                    _html += '</div>';
+                    _html += '</div>';
+                    elem.append(_html);
+                    //定义初始值
+                    numberInput.render({
+                        elem: '#' + json.tag + json.id
+                    });
+                    var _width = json.width.replace(/[^\d]/g, '');
+                    if ('' != _width) {
+                        _width = 100 - parseInt(_width);
+                    }
+                    $('#' + json.id + ' .layui-input-block .layui-number-input-btn').css("right", _width + "%");
+                    if (json.disabled) {
+                        $('#' + json.id + ' .layui-input-block .layui-number-input-btn').css("z-index", "-1");
+                    }
+                },
+                /**
+                 * 根据json对象更新html对象
+                 * @param {object} json 变更后的json属性
+                 * @param {object} that 实例对象
+                 * */
+                update: function (json, that) {
+                    var _disabled = json.disabled ? 'disabled=""' : '';
+                    var _disabledClass = json.disabled ? ' layui-disabled' : '';
+                    var $block = $('#' + json.id + ' .layui-input-block');
+                    var $label = $('#' + json.id + ' .layui-form-label');
+                    $block.empty();
+                    $label.empty();
+                    if (json.hideLabel) {
+                        $label.css("display", "none");
+                        $block.css("margin-left", "0px");
+                        $block.css({ width: 'calc({0})'.format(json.width) });
+                    } else {
+                        $label.css("display", "block");
+                        $block.css("margin-left", json.labelWidth);
+                        $block.css({ width: 'calc({0} - {1}px)'.format(json.width, json.labelWidth) });
+                    }
+                    $label.css("width", json.labelWidth);
+                    $label.append(json.label + ":");
+                    var _html = '';
+                    //重绘设计区改id下的所有元素
+                    _html += '<input name="{0}" id="{9}" value="{1}" placeholder="{3}" class="layui-input{5}" lay-vertype="tips" min="{6}" max="{7}" step="{8}"  {4} style="width:{2}">'
+                        .format(json.id, json.defaultValue ? json.defaultValue : '0', json.width, json.placeholder, _disabled, _disabledClass, json.minValue, json.maxValue, json.stepValue, json.tag + json.id);
+                    $block.append(_html);
+                    numberInput.render({
+                        elem: '#' + json.tag + json.id
+                    });
+                    var _width = json.width.replace(/[^\d]/g, '');
+                    if ('' != _width) {
+                        _width = 100 - parseInt(_width);
+                    }
+                    $('#' + json.id + ' .layui-input-block .layui-number-input-btn').css("right", _width + "%");
+                    if (json.disabled) {
+                        $('#' + json.id + ' .layui-input-block .layui-number-input-btn').css("z-index", "-1");
+                    }
+                },
+                /**
+                 * 根据components组件对象获取组件属性
+                 * @param {object} id 所属组件id
+                 * @param {object} index 所属对象组件索引
+                 * @param {object} that 实例对象
+                 * */
+                jsonData: function (id, index, that) {
+                    var _json = JSON.parse(JSON.stringify(formField.components.numberInput));
+                    _json.id = id;
+                    _json.index = index;
+                    return _json;
+                },
+                /**
+                 * 根据 json 对象显示对应的属性
+                 * @param {object} json 当前组件的json属性
+                 * @param {object} that 实例对象
+                 * */
+                property: function (json, that) {
+                    that.renderCommonProperty(json); //根据 json 对象获取对应的属性的html
+                    that.initCommonProperty(json); //初始化 json 对象获取对应的属性
+                },
+                /**
+                 * 根据json对象生成html文本
+                 * @param {object} json 当前组件的json属性
+                 * @param {boolean} selected 是否被选中
+                 * @param {object} that 实例对象
+                 * */
+                generateHtml: function (json, selected, that) {
+                    if (selected === undefined) {
+                        selected = false;
+                    }
+                    var _disabled = json.disabled ? 'disabled=""' : '';
+                    var _disabledClass = json.disabled ? ' layui-disabled' : '';
+                    var _required = json.required ? 'required' : '';
+                    var _hideLabel = json.hideLabel ? 'display: none;' : '';
+                    var _html = '<div id="{0}" class="layui-form-item {2}"  data-id="{0}" data-tag="{1}" data-index="{3}">'.format(json.id, json.tag, selected ? 'active' : '', json.index);
+                    _html += '<label class="layui-form-label" style="width: {1};{2}">{0}:</label>'.format(json.label, json.labelWidth, _hideLabel);
+                    if (json.hideLabel) {
+                        _html += '<div class="layui-input-block" style="width:calc({0});margin-left: 0px;">'.format(json.width);
+                    } else {
+                        _html += '<div class="layui-input-block" style="width:calc({0} - {1}px);margin-left: {1}px;">'.format(json.width, json.labelWidth);
+                    }
+                    _html += '<input name="{0}" id="{9}" value="{1}" placeholder="{3}" class="layui-input{5}" lay-vertype="tips" min="{6}" max="{7}" step="{8}"  {4} style="width:{2}">'
+                        .format(json.id, json.defaultValue ? json.defaultValue : '0', json.width, json.placeholder, _disabled, _disabledClass, json.minValue, json.maxValue, json.stepValue, json.tag + json.id);
+                    _html += '</div>';
+                    _html += '</div>';
+                    return _html;
+                },
+                /**
+                 * 根据json对象生成js文本
+                 * @param {object} json 变更后的json属性
+                 * @param {object} that 实例对象
+                 * */
+                generateScript: function (json, that) {
+                    var scriptHtmlCode = '';
+                    scriptHtmlCode += [' numberInput.render({'
+                        , 'elem:"#' + json.tag + json.id + '"'
+                        , '});var _width = ' + json.width.replace(/[^\d]/g, '') + ';'
+                        , 'if(""!=_width){_width = 100 - parseInt(_width);}'
+                        , '$("#' + json.id + ' .layui-input-block .layui-number-input-btn").css("right",_width + "%");'
+                        , 'if (item.disabled) { $("#' + json.id + ' .layui-input-block .layui-number-input-btn").css("z-index","-1");}'].join('');
+                    return scriptHtmlCode;
+                }
+            },
+            iconPicker: {
+                /**
+                 * 根据json对象生成html对象
+                 * @param {object} json 当前组件的json属性
+                 * @param {boolean} selected 是否被选中
+                 * @param {object} elem 表单面板jquery对象
+                 * @param {object} that 实例对象
+                 * */
+                render: function (json, selected, elem, that) {
+                    if (selected === undefined) {
+                        selected = false;
+                    }
+                    var _disabled = json.disabled ? 'disabled=""' : '';
+                    var _disabledClass = json.disabled ? ' layui-disabled' : '';
+                    var _hideLabel = json.hideLabel ? 'display: none;' : '';
+                    var _html = '<div id="{0}" class="layui-form-item {2}"  data-id="{0}" data-tag="{1}" data-index="{3}">'.format(json.id, json.tag, selected ? 'active' : '', json.index);
+                    _html += '<label class="layui-form-label" style="width: {1}px;{2}">{0}:</label>'.format(json.label, json.labelWidth, _hideLabel);
+                    if (json.hideLabel) {
+                        _html += '<div class="layui-input-block" style="margin-left: 0px">';
+                    } else {
+                        _html += '<div class="layui-input-block" style="margin-left: {0}px">'.format(json.labelWidth);
+                    }
+                    if (json.disabled) {
+                        _html += '<div class="iceEditor-disabled"></div>';
+                    }
+                    _html += '<input name="{0}" id="{6}" value="{1}" placeholder="{3}" class="layui-input{5}" lay-filter="{6}" lay-vertype="tips" {4} style="width:{2}">'
+                        .format(json.id, json.defaultValue ? json.defaultValue : '', json.width, json.placeholder, _disabled, _disabledClass, json.tag + json.id);
+                    _html += '</div>';
+                    _html += '</div>';
+                    elem.append(_html);
+                    iconPicker.render({
+                        // 选择器，推荐使用input
+                        elem: '#' + json.tag + json.id,
+                        // 数据类型：fontClass/unicode，推荐使用fontClass
+                        type: 'fontClass',
+                        // 是否开启搜索：true/false，默认true
+                        search: json.iconPickerSearch,
+                        // 是否开启分页：true/false，默认true
+                        page: json.iconPickerPage,
+                        // 每页显示数量，默认12
+                        limit: json.iconPickerLimit,
+                        // 每个图标格子的宽度：'43px'或'20%'
+                        cellWidth: json.iconPickerCellWidth,
+                        // 点击回调
+                        click: function (data) {
+                            //console.log(data);
+                        },
+                        // 渲染成功后的回调
+                        success: function (d) {
+                            //console.log(d);
+                        }
+                    });
+                    iconPicker.checkIcon(json.tag + json.id, '');
+                },
+                /**
+                 * 根据json对象更新html对象
+                 * @param {object} json 变更后的json属性
+                 * @param {object} that 实例对象
+                 * */
+                update: function (json, that) {
+                    var _disabled = json.disabled ? 'disabled=""' : '';
+                    var _disabledClass = json.disabled ? ' layui-disabled' : '';
+                    var $block = $('#' + json.id + ' .layui-input-block');
+                    var $label = $('#' + json.id + ' .layui-form-label');
+                    $label.empty();
+                    $block.empty();
+                    if (json.hideLabel) {
+                        $label.css("display", "none");
+                        $block.css("margin-left", "0px");
+                    } else {
+                        $label.css("display", "block");
+                        $block.css("margin-left", json.labelWidth);
+                    }
+                    $label.css("width", json.labelWidth);
+                    $label.append(json.label + ":");
+                    var _html = '';
+                    //重绘设计区改id下的所有元素
+                    _html += '<input name="{0}" value="{1}" id="{6}" placeholder="{3}" class="layui-input{5}" lay-filter="{6}" lay-vertype="tips" {4} style="width:{2}">'
+                        .format(json.id, json.defaultValue ? json.defaultValue : '', json.width, json.placeholder, _disabled, _disabledClass, json.tag + json.id);
+                    $('#' + json.id + ' .layui-input-block').append(_html);
+                    iconPicker.render({
+                        // 选择器，推荐使用input
+                        elem: '#' + json.tag + json.id,
+                        // 数据类型：fontClass/unicode，推荐使用fontClass
+                        type: 'fontClass',
+                        // 是否开启搜索：true/false，默认true
+                        search: json.iconPickerSearch,
+                        // 是否开启分页：true/false，默认true
+                        page: json.iconPickerPage,
+                        // 每页显示数量，默认12
+                        limit: json.iconPickerLimit,
+                        // 每个图标格子的宽度：'43px'或'20%'
+                        cellWidth: json.iconPickerCellWidth,
+                        // 点击回调
+                        click: function (data) {
+                            //console.log(data);
+                        },
+                        // 渲染成功后的回调
+                        success: function (d) {
+                            //console.log(d);
+                        }
+                    });
+                    iconPicker.checkIcon(json.tag + json.id, json.defaultValue);
+                    if (json.disabled) {
+                        $("#" + json.id).find(".layui-input-block").append('<div class="iceEditor-disabled"></div>');
+                    } else {
+                        $("#" + json.id).find(".iceEditor-disabled").remove();
+                    }
+                },
+                /**
+                 * 根据components组件对象获取组件属性
+                 * @param {object} id 所属组件id
+                 * @param {object} index 所属对象组件索引
+                 * @param {object} that 实例对象
+                 * */
+                jsonData: function (id, index, that) {
+                    //分配一个新的ID
+                    var _json = JSON.parse(JSON.stringify(formField.components.iconPicker));
+                    _json.id = id;
+                    _json.index = index;
+                    return _json;
+                },
+                /**
+                 * 根据 json 对象显示对应的属性
+                 * @param {object} json 当前组件的json属性
+                 * @param {object} that 实例对象
+                 * */
+                property: function (json, that) {
+                    that.renderCommonProperty(json); //根据 json 对象获取对应的属性的html
+                    that.initCommonProperty(json); //初始化 json 对象获取对应的属性
+                },
+                /**
+                 * 根据json对象生成html文本
+                 * @param {object} json 当前组件的json属性
+                 * @param {boolean} selected 是否被选中
+                 * @param {object} that 实例对象
+                 * */
+                generateHtml: function (json, selected, that) {
+                    if (selected === undefined) {
+                        selected = false;
+                    }
+                    var _disabled = json.disabled ? 'disabled=""' : '';
+                    var _disabledClass = json.disabled ? ' layui-disabled' : '';
+                    var _hideLabel = json.hideLabel ? 'display: none;' : '';
+                    var _html = '<div id="{0}" class="layui-form-item {2}"  data-id="{0}" data-tag="{1}" data-index="{3}">'.format(json.id, json.tag, selected ? 'active' : '', json.index);
+                    _html += '<label class="layui-form-label" style="width: {1}px;{2}">{0}:</label>'.format(json.label, json.labelWidth, _hideLabel);
+                    if (json.hideLabel) {
+                        _html += '<div class="layui-input-block" style="margin-left: 0px">';
+                    } else {
+                        _html += '<div class="layui-input-block" style="margin-left: {0}px">'.format(json.labelWidth);
+                    }
+                    if (json.disabled) {
+                        _html += '<div class="iceEditor-disabled"></div>';
+                    }
+                    _html += '<input name="{0}" id="{6}" value="{1}" placeholder="{3}" class="layui-input{5}" lay-filter="{6}" lay-vertype="tips" {4} style="width:{2}">'
+                        .format(json.id, json.defaultValue ? json.defaultValue : '', json.width, json.placeholder, _disabled, _disabledClass, json.tag + json.id);
+                    _html += '</div>';
+                    _html += '</div>';
+                    return _html;
+                },
+                /**
+                 * 根据json对象生成js文本
+                 * @param {object} json 变更后的json属性
+                 * @param {object} that 实例对象
+                 * */
+                generateScript: function (json, that) {
+                    var scriptHtmlCode = '';
+                    scriptHtmlCode += ['iconPicker.render({'
+                        , 'elem:"#' + json.tag + json.id + '",'
+                        , 'type:"fontClass",'
+                        , 'search:' + json.iconPickerSearch + ''
+                        , 'page:' + json.iconPickerPage + ''
+                        , 'limit:' + json.iconPickerLimit + ''
+                        , 'cellWidth:' + json.iconPickerCellWidth + ''
+                        , ' click: function (data) {},'
+                        , 'success: function(d) {}'
+                        , '});'
+                        , 'iconPicker.checkIcon(' + json.tag + json.id + ',"");'].join('');
+                    return scriptHtmlCode;
+                }
+            },
+            cron: {
+                /**
+                 * 根据json对象生成html对象
+                 * @param {object} json 当前组件的json属性
+                 * @param {boolean} selected 是否被选中
+                 * @param {object} elem 表单面板jquery对象
+                 * @param {object} that 实例对象
+                 * */
+                render: function (json, selected, elem, that) {
+                    if (selected === undefined) {
+                        selected = false;
+                    }
+                    var _disabled = json.disabled ? 'disabled=""' : '';
+                    var _disabledClass = json.disabled ? ' layui-disabled' : '';
+                    var _required = json.required ? 'required' : '';
+                    var _hideLabel = json.hideLabel ? 'display: none;' : '';
+                    var _width = json.width.replace(/[^\d]/g, '');
+                    if ('' != _width) {
+                        _width = 100 - parseInt(_width);
+                    }
+                    var _html = '<div id="{0}" class="layui-form-item {2}"  data-id="{0}" data-tag="{1}" data-index="{3}">'.format(json.id, json.tag, selected ? 'active' : '', json.index);
+                    _html += '<label class="layui-form-label {0}" style="width: {3}px;{4}"><span style="color:red;">{2}</span>{1}:</label>'.format(json.required ? 'layui-form-required' : '', json.label, json.required ? '*' : '', json.labelWidth, _hideLabel);
+                    if (json.hideLabel) {
+                        _html += '<div class="layui-input-block" style="width:calc({0});margin-left: 0px;">'.format(json.width);
+                    } else {
+                        _html += '<div class="layui-input-block" style="width:calc({0} - {1}px);margin-left: {1}px;">'.format(json.width, json.labelWidth);
+                    }
+                    _html += '<input type="cronExpression" name="{0}" id="{5}" value="{1}" lay-verify="{6}" placeholder="{2}" class="layui-input{4}" lay-filter="iconPicker" lay-vertype="tips" {3}>'
+                        .format(json.id, json.defaultValue ? json.defaultValue : '', json.placeholder, _disabled, _disabledClass, json.tag + json.id, _required);
+                    if (!json.disabled) {
+                        _html += '<button id="{0}-button" style="position: absolute;top: 0;right: 0px;cursor: pointer;" type="button" class="layui-btn">生成</button>'.format(json.tag + json.id);
+                    }
+                    _html += '</div>';
+                    _html += '</div>';
+                    elem.append(_html);
+                    cron.render({
+                        elem: "#" + json.tag + json.id + "-button", // 绑定元素
+                        url: json.cronUrl, // 获取最近运行时间的接口
+                        done: function (cronStr) {
+                            $("#" + json.tag + json.id).val(cronStr);
+                        },
+                    });
+                },
+                /**
+                 * 根据json对象更新html对象
+                 * @param {object} json 变更后的json属性
+                 * @param {object} that 实例对象
+                 * */
+                update: function (json, that) {
+                    var _disabled = json.disabled ? 'disabled=""' : '';
+                    var _disabledClass = json.disabled ? ' layui-disabled' : '';
+                    var _required = json.required ? 'required' : '';
+                    var $block = $('#' + json.id + ' .layui-input-block');
+                    var $label = $('#' + json.id + ' .layui-form-label');
+                    $block.empty();
+                    $label.empty();
+                    if (json.hideLabel) {
+                        $label.css("display", "none");
+                        $block.css("margin-left", "0px");
+                        $block.css({ width: 'calc({0})'.format(json.width) });
+                    } else {
+                        $label.css("display", "block");
+                        $block.css("margin-left", json.labelWidth);
+                        $block.css({ width: 'calc({0} - {1}px)'.format(json.width, json.labelWidth) });
+                    }
+                    $label.css("width", json.labelWidth);
+                    if (json.required) {
+                        $label.append('<span style="color:red;">*</span>');
+                    }
+                    $label.append(json.label + ":");
+                    var _html = '';
+                    //重绘设计区改id下的所有元素
+                    _html += '<input name="{0}" value="{1}" id="{5}" placeholder="{2}" class="layui-input{4}" lay-verify="{6}" lay-filter="iconPicker" lay-vertype="tips" {3}>'
+                        .format(json.id, json.defaultValue ? json.defaultValue : '', json.placeholder, _disabled, _disabledClass, json.tag + json.id, _required);
+                    if (!json.disabled) {
+                        var _width = json.width.replace(/[^\d]/g, '');
+                        if ('' != _width) {
+                            _width = 100 - parseInt(_width);
+                        }
+                        _html += '<button id="{0}-button" style="position: absolute;top: 0;right: 0px;cursor: pointer;" type="button" class="layui-btn">生成</button>'.format(json.tag + json.id);
+                        $block.append(_html);
+                        cron.render({
+                            elem: "#" + json.tag + json.id + "-button", // 绑定元素
+                            url: json.cronUrl, // 获取最近运行时间的接口
+                            done: function (cronStr) {
+                                $("#" + json.tag + json.id).val(cronStr);
+                            },
+                        });
+                    } else {
+                        $block.append(_html);
+                    }
+                },
+                /**
+                 * 根据components组件对象获取组件属性
+                 * @param {object} id 所属组件id
+                 * @param {object} index 所属对象组件索引
+                 * @param {object} that 实例对象
+                 * */
+                jsonData: function (id, index, that) {
+                    var _json = JSON.parse(JSON.stringify(formField.components.cron));
+                    _json.id = id;
+                    _json.index = index;
+                    return _json;
+                },
+                /**
+                 * 根据 json 对象显示对应的属性
+                 * @param {object} json 当前组件的json属性
+                 * @param {object} that 实例对象
+                 * */
+                property: function (json, that) {
+                    that.renderCommonProperty(json); //根据 json 对象获取对应的属性的html
+                    that.initCommonProperty(json); //初始化 json 对象获取对应的属性
+                },
+                /**
+                 * 根据json对象生成html文本
+                 * @param {object} json 当前组件的json属性
+                 * @param {boolean} selected 是否被选中
+                 * @param {object} that 实例对象
+                 * */
+                generateHtml: function (json, selected, that) {
+                    if (selected === undefined) {
+                        selected = false;
+                    }
+                    var _disabled = json.disabled ? 'disabled=""' : '';
+                    var _disabledClass = json.disabled ? ' layui-disabled' : '';
+                    var _required = json.required ? 'required' : '';
+                    var _hideLabel = json.hideLabel ? 'display: none;' : '';
+                    var _width = json.width.replace(/[^\d]/g, '');
+                    if ('' != _width) {
+                        _width = 100 - parseInt(_width);
+                    }
+                    var _html = '<div id="{0}" class="layui-form-item {2}"  data-id="{0}" data-tag="{1}" data-index="{3}">'.format(json.id, json.tag, selected ? 'active' : '', json.index);
+                    _html += '<label class="layui-form-label {0}" style="width: {3}px;{4}"><span style="color:red;">{2}</span>{1}:</label>'.format(json.required ? 'layui-form-required' : '', json.label, json.required ? '*' : '', json.labelWidth, _hideLabel);
+                    if (json.hideLabel) {
+                        _html += '<div class="layui-input-block" style="width:calc({0});margin-left: 0px;">'.format(json.width);
+                    } else {
+                        _html += '<div class="layui-input-block" style="width:calc({0} - {1}px);margin-left: {1}px;">'.format(json.width, json.labelWidth);
+                    }
+                    _html += '<input type="cronExpression" name="{0}" id="{5}" value="{1}" lay-verify="{6}" placeholder="{2}" class="layui-input{4}" lay-filter="iconPicker" lay-vertype="tips" {3}>'
+                        .format(json.id, json.defaultValue ? json.defaultValue : '', json.placeholder, _disabled, _disabledClass, json.tag + json.id, _required);
+                    if (!json.disabled) {
+                        _html += '<button id="{0}-button" style="position: absolute;top: 0;right: 0px;cursor: pointer;" type="button" class="layui-btn">生成</button>'.format(json.tag + json.id);
+                    }
+                    _html += '</div>';
+                    _html += '</div>';
+                    return _html;
+                },
+                /**
+                 * 根据json对象生成js文本
+                 * @param {object} json 变更后的json属性
+                 * @param {object} that 实例对象
+                 * */
+                generateScript: function (json, that) {
+                    var scriptHtmlCode = '';
+                    scriptHtmlCode += ['cron.render({'
+                        , 'elem:"#' + json.tag + json.id + '-button",'
+                        , 'url:' + json.cronUrl + ','
+                        , 'done: function (cronStr) {'
+                        , '$("#' + json.tag + json.id + '").val(cronStr);'
+                        , '},'
+                        , '});'].join('');
+                    return scriptHtmlCode;
+                }
+            },
+            sign: {
+                /**
+                 * 根据json对象生成html对象
+                 * @param {object} json 当前组件的json属性
+                 * @param {boolean} selected 是否被选中
+                 * @param {object} elem 表单面板jquery对象
+                 * @param {object} that 实例对象
+                 * */
+                render: function (json, selected, elem, that) {
+                    if (selected === undefined) {
+                        selected = false;
+                    }
+                    var _hideLabel = json.hideLabel ? 'display: none;' : '';
+                    var _html = '<div id="{0}" class="layui-form-item {2}"  data-id="{0}" data-tag="{1}" data-index="{3}">'.format(json.id, json.tag, selected ? 'active' : '', json.index);
+                    _html += '<label class="layui-form-label" style="width: {1}px;{2}">{0}:</label>'.format(json.label, json.labelWidth, _hideLabel);
+                    if (json.hideLabel) {
+                        _html += '<div class="layui-input-block" style="margin-left: 0px">';
+                    } else {
+                        _html += '<div class="layui-input-block" style="margin-left: {0}px">'.format(json.labelWidth);
+                    }
+                    if (json.disabled) {
+                        _html += '<button id="{0}" type="button" class="layui-btn layui-btn-normal layui-btn-disabled custom-zc"><i class="layui-icon {1}"></i> {2}</button>'.format(json.id + json.tag, json.buttonIcon, json.buttonVlaue);
+                    } else {
+                        _html += '<button id="{0}" type="button" class="layui-btn  layui-btn-normal custom-zc"><i class="layui-icon {1}"></i> {2}</button>'.format(json.id + json.tag, json.buttonIcon, json.buttonVlaue);
+                    }
+                    if (json.data !== "") {
+                        _html += '<div class="signImg"><img src="{0}"></div>'.format(json.data);
+                    }
+                    _html += '</div>';
+                    _html += '</div>';
+                    elem.append(_html);
+                    $('#' + json.id + json.tag).click(function () {
+                        layer.open({
+                            type: 2,
+                            title: '手写签名',
+                            btn: ['保存', '关闭'], //可以无限个按钮
+                            yes: function (index, layero) {
+                                //do something
+                                var iframe = window['layui-layer-iframe' + index];
+                                var data = iframe.getCanvasData();
+                                json.data = data;
+                                that.components[json.tag].update(json, that);
+                                layer.close(index); //如果设定了yes回调，需进行手工关闭
+                            },
+                            btn2: function (index, layero) {
+                                layer.close(index);
+                            },
+                            closeBtn: 1, //不显示关闭按钮
+                            shade: [0],
+                            area: ['60%', '60%'],
+                            offset: 'auto', //右下角弹出
+                            anim: 2,
+                            content: ['./handwrittenSignature.html', 'yes'], //iframe的url，no代表不显示滚动条
+                            success: function (layero, index) {
+                            }
+                        });
+                    });
+                },
+                /**
+                 * 根据json对象更新html对象
+                 * @param {object} json 变更后的json属性
+                 * @param {object} that 实例对象
+                 * */
+                update: function (json, that) {
+                    var $block = $('#' + json.id + ' .layui-input-block');
+                    var $label = $('#' + json.id + ' .layui-form-label');
+                    $block.empty();
+                    $label.empty();
+                    if (json.hideLabel) {
+                        $label.css("display", "none");
+                        $block.css("margin-left", "0px");
+                        $block.css({ width: 'calc({0})'.format(json.width) });
+                    } else {
+                        $label.css("display", "block");
+                        $block.css("margin-left", json.labelWidth);
+                        $block.css({ width: 'calc({0} - {1}px)'.format(json.width, json.labelWidth) });
+                    }
+                    $label.css("width", json.labelWidth);
+                    $label.append(json.label + ":");
+                    var _html = '';
+                    //重绘设计区改id下的所有元素
+                    if (json.disabled) {
+                        _html += '<button id="{0}" type="button" class="layui-btn layui-btn-normal layui-btn-disabled custom-zc"><i class="layui-icon {1}"></i> {2}</button>'.format(json.id + json.tag, json.buttonIcon, json.buttonVlaue);
+                    } else {
+                        _html += '<button id="{0}" type="button" class="layui-btn  layui-btn-normal custom-zc"><i class="layui-icon {1}"></i> {2}</button>'.format(json.id + json.tag, json.buttonIcon, json.buttonVlaue);
+                    }
+                    if (json.data !== "") {
+                        _html += '<div class="signImg"><img src="{0}"></div>'.format(json.data);
+                    }
+                    $block.append(_html);
+                },
+                /**
+                 * 根据components组件对象获取组件属性
+                 * @param {object} id 所属组件id
+                 * @param {object} index 所属对象组件索引
+                 * @param {object} that 实例对象
+                 * */
+                jsonData: function (id, index, that) {
+                    //分配一个新的ID
+                    var _json = JSON.parse(JSON.stringify(formField.components.sign));
+                    _json.id = id;
+                    _json.index = index;
+                    return _json;
+                },
+                /**
+                 * 根据 json 对象显示对应的属性
+                 * @param {object} json 当前组件的json属性
+                 * @param {object} that 实例对象
+                 * */
+                property: function (json, that) {
+                    that.renderCommonProperty(json); //根据 json 对象获取对应的属性的html
+                    that.initCommonProperty(json); //初始化 json 对象获取对应的属性
+                },
+                /**
+                 * 根据json对象生成html文本
+                 * @param {object} json 当前组件的json属性
+                 * @param {boolean} selected 是否被选中
+                 * @param {object} that 实例对象
+                 * */
+                generateHtml: function (json, selected, that) {
+                    if (selected === undefined) {
+                        selected = false;
+                    }
+                    var _hideLabel = json.hideLabel ? 'display: none;' : '';
+                    var _html = '<div id="{0}" class="layui-form-item {2}"  data-id="{0}" data-tag="{1}" data-index="{3}">'.format(json.id, json.tag, selected ? 'active' : '', json.index);
+                    _html += '<label class="layui-form-label" style="width: {1}px;{2}">{0}:</label>'.format(json.label, json.labelWidth, _hideLabel);
+                    if (json.hideLabel) {
+                        _html += '<div class="layui-input-block" style="margin-left: 0px">';
+                    } else {
+                        _html += '<div class="layui-input-block" style="margin-left: {0}px">'.format(json.labelWidth);
+                    }
+                    if (json.disabled) {
+                        _html += '<button id="{0}" type="button" class="layui-btn layui-btn-normal layui-btn-disabled custom-zc"><i class="layui-icon {1}"></i> {2}</button>'.format(json.id + json.tag, json.buttonIcon, json.buttonVlaue);
+                    } else {
+                        _html += '<button id="{0}" type="button" class="layui-btn  layui-btn-normal custom-zc"><i class="layui-icon {1}"></i> {2}</button>'.format(json.id + json.tag, json.buttonIcon, json.buttonVlaue);
+                    }
+                    if (json.data !== "") {
+                        _html += '<div class="signImg"><img src="{0}"></div>'.format(json.data);
+                    }
+                    _html += '</div>';
+                    _html += '</div>';
+                    return _html;
+                },
+                /**
+                 * 根据json对象生成js文本
+                 * @param {object} json 变更后的json属性
+                 * @param {object} that 实例对象
+                 * */
+                generateScript: function (json, that) {
+                    var scriptHtmlCode = '';
+                    return scriptHtmlCode;
+                }
+            },
+            editor: {
+                /**
+                 * 根据json对象生成html对象
+                 * @param {object} json 当前组件的json属性
+                 * @param {boolean} selected 是否被选中
+                 * @param {object} elem 表单面板jquery对象
+                 * @param {object} that 实例对象
+                 * */
+                render: function (json, selected, elem, that) {
+                    if (selected === undefined) {
+                        selected = false;
+                    }
+                    var _hideLabel = json.hideLabel ? 'display: none;' : '';
+                    var _html = '<div id="{0}" class="layui-form-item layui-form-text {2}" style="width: {4}"  data-id="{0}" data-tag="{1}" data-index="{3}">'.format(json.id, json.tag, selected ? 'active' : '', json.index, json.width);
+                    _html += '<label class="layui-form-label" style="width: {1}px;{2}">{0}:</label>'.format(json.label, json.width, _hideLabel);
+                    _html += '<div class="layui-input-block">';
+                    _html += '<div id="{0}"></div>'.format(json.tag + json.id);
+                    _html += '</div>';
+                    _html += '</div>';
+                    elem.append(_html);
+                    var e = new ice.editor(json.tag + json.id);
+                    e.width = json.width;   //宽度
+                    e.height = json.height;  //高度
+                    e.uploadUrl = json.uploadUrl; //上传文件路径
+                    e.disabled = json.disabled;
+                    e.menu = json.menu;
+                    e.create();
+                    e.setValue(json.defaultValue);
+                    if (that.config.viewOrDesign) {
+                        iceEditorObjects[json.id] = e;
+                    }
+                },
+                /**
+                 * 根据json对象更新html对象
+                 * @param {object} json 变更后的json属性
+                 * @param {object} that 实例对象
+                 * */
+                update: function (json, that) {
+                    var $label = $('#' + json.id + ' .layui-form-label');
+                    $label.empty();
+                    $label.css("width", json.width);
+                    $label.append(json.label + ":");
+                    if (json.hideLabel) {
+                        $label.css("display", "none");
+                    } else {
+                        $label.css("display", "block");
+                    }
+                    if (that.config.viewOrDesign) {
+                        var e = iceEditorObjects[json.id];
+                        e.setValue(json.defaultValue);
+                    } else {
+                        var $block = $('#' + json.id + ' .layui-input-block');
+                        $block.empty();
+                        var _html = '<div id="{0}"></div>'.format(json.tag + json.id);
+                        $block.append(_html);
+                        var e = new ice.editor(json.tag + json.id);
+                        e.width = json.width;   //宽度
+                        e.height = json.height;  //高度
+                        e.uploadUrl = json.uploadUrl; //上传文件路径
+                        e.disabled = json.disabled;
+                        e.menu = json.menu;
+                        e.create();
+                        e.setValue(json.defaultValue);
+                    }
+                },
+                /**
+                 * 根据components组件对象获取组件属性
+                 * @param {object} id 所属组件id
+                 * @param {object} index 所属对象组件索引
+                 * @param {object} that 实例对象
+                 * */
+                jsonData: function (id, index, that) {
+                    //分配一个新的ID
+                    var _json = JSON.parse(JSON.stringify(formField.components.editor));
+                    _json.id = id;
+                    _json.index = index;
+                    return _json;
+
+                },
+                /**
+                 * 根据 json 对象显示对应的属性
+                 * @param {object} json 当前组件的json属性
+                 * @param {object} that 实例对象
+                 * */
+                property: function (json, that) {
+                    that.renderCommonProperty(json); //根据 json 对象获取对应的属性的html
+                    that.initCommonProperty(json); //初始化 json 对象获取对应的属性
+                },
+                /**
+                 * 根据json对象生成html文本
+                 * @param {object} json 当前组件的json属性
+                 * @param {boolean} selected 是否被选中
+                 * @param {object} that 实例对象
+                 * */
+                generateHtml: function (json, selected, that) {
+                    if (selected === undefined) {
+                        selected = false;
+                    }
+                    var _hideLabel = json.hideLabel ? 'display: none;' : '';
+                    var _html = '<div id="{0}" class="layui-form-item layui-form-text {2}" style="width: {4}"  data-id="{0}" data-tag="{1}" data-index="{3}">'.format(json.id, json.tag, selected ? 'active' : '', json.index, json.width);
+                    _html += '<label class="layui-form-label" style="width: {1}px;{2}">{0}:</label>'.format(json.label, json.width, _hideLabel);
+                    _html += '<div class="layui-input-block">';
+                    _html += '<div id="{0}"></div>'.format(json.tag + json.id);
+                    _html += '</div>';
+                    _html += '</div>';
+                    return _html;
+                },
+                /**
+                 * 根据json对象生成js文本
+                 * @param {object} json 变更后的json属性
+                 * @param {object} that 实例对象
+                 * */
+                generateScript: function (json, that) {
+                    var scriptHtmlCode = '';
+                    scriptHtmlCode += ['var e = new ice.editor(' + json.tag + json.id + ');'
+                        , 'e.width=' + json.width + ';   //宽度'
+                        , 'e.height=' + json.height + ';  //高度'
+                        , 'e.uploadUrl=' + json.uploadUrl + '; //上传文件路径'
+                        , 'e.disabled=' + json.disabled + ';'
+                        , 'e.menu = ' + json.menu + ';'
+                        , 'e.create();'].join('');
+                    return scriptHtmlCode;
+                }
+            },
+            grid: {
+                /**
+                 * 根据json对象生成html对象
+                 * @param {object} json 当前组件的json属性
+                 * @param {boolean} selected 是否被选中
+                 * @param {object} elem 表单面板jquery对象
+                 * @param {object} that 当前实例模块对象
+                 * */
+                render: function (json, selected, elem, that) {
+                    if (selected === undefined) {
+                        selected = false;
+                    }
+                    var _selected = selected ? 'active' : '';
+                    var _html = '<div id="{0}" class="layui-form-item layui-row grid {2}"  data-id="{0}" data-tag="{1}" data-index="{3}" >'.format(json.id, json.tag, selected ? 'active' : '', json.index);
+                    var colClass = 'layui-col-md6';
+                    if (json.columns.length == 3) {
+                        colClass = 'layui-col-md4';
+                    } else if (json.columns.length == 4) {
+                        colClass = 'layui-col-md3';
+                    }
+                    for (var i = 0; i < json.columns.length; i++) {
+                        _html += '<div class="{2} widget-col-list column{3}{0}" data-index="{0}" data-parentindex="{1}">'.format(i, json.index, colClass, json.id);
+                        //some html
+                        _html += '</div>';
+                    }
+                    _html += '</div>';
+                    elem.append(_html);
+                    that.bindGridSortEvent(json);
+
+                },
+                /**
+                 * 根据json对象更新html对象
+                 * @param {object} json 变更后的json属性
+                 * @param {object} that 实例对象
+                 * */
+                update: function (json, that) {
+                    var $block = $('#' + json.id);
+                    $block.empty();
+                    var colClass = 'layui-col-md6';
+                    if (json.columns.length == 3) {
+                        colClass = 'layui-col-md4';
+                    } else if (json.columns.length == 4) {
+                        colClass = 'layui-col-md3';
+                    }
+                    var _html = '';
+                    for (var i = 0; i < json.columns.length; i++) {
+                        _html += '<div class="{2} widget-col-list column{3}{0}" data-index="{0}" data-parentindex="{1}">'.format(i, json.index, colClass, json.id);
+                        //some html
+                        _html += '</div>';
+                    }
+                    $block.append(_html);
+                    that.renderForm();
+                },
+                /**
+                 * 根据components组件对象获取组件属性
+                 * @param {object} id 所属组件id
+                 * @param {object} index 所属对象组件索引
+                 * @param {object} that 实例对象
+                 * */
+                jsonData: function (id, index, that) {
+                    //分配一个新的ID 默认是一个一行两列的布局对象
+                    var _json = JSON.parse(JSON.stringify(formField.components.grid));
+                    _json.id = id;
+                    _json.index = index;
+                    return _json;
+
+                },
+                /**
+                 * 根据 json 对象显示对应的属性
+                 * @param {object} json 当前组件的json属性
+                 * @param {object} that 实例对象
+                 * */
+                property: function (json, that) {
+                    that.renderCommonProperty(json); //根据 json 对象获取对应的属性的html
+                    that.initCommonProperty(json); //初始化 json 对象获取对应的属性
+                },
+                /**
+                 * 根据json对象生成html文本
+                 * @param {object} json 当前组件的json属性
+                 * @param {boolean} selected 是否被选中
+                 * @param {object} that 实例对象
+                 * */
+                generateHtml: function (json, selected, that) {
+                    if (selected === undefined) {
+                        selected = false;
+                    }
+                    var _selected = selected ? 'active' : '';
+                    var _html = '<div id="{0}" class="layui-form-item layui-row grid {2}"  data-id="{0}" data-tag="{1}" data-index="{3}" >'.format(json.id, json.tag, _selected ? 'active' : '', json.index);
+                    var colClass = 'layui-col-md6';
+                    if (json.columns.length == 3) {
+                        colClass = 'layui-col-md4';
+                    } else if (json.columns.length == 4) {
+                        colClass = 'layui-col-md3';
+                    }
+                    for (var i = 0; i < json.columns.length; i++) {
+                        _html += '<div class="{2} widget-col-list column{3}{0}" data-index="{0}" data-parentindex="{1}">'.format(i, json.index, colClass, json.id);
+                        //some html
+                        _html += '</div>';
+                    }
+                    _html += '</div>';
+                    return _html;
+                },
+                /**
+                 * 根据json对象生成js文本
+                 * @param {object} json 变更后的json属性
+                 * @param {object} that 实例对象
+                 * */
+                generateScript: function (json, that) {
+                    return '';
+                }
+            },
+        }
+
+        /* 初始化 json 对象获取对应的属性*/
+        Class.prototype.initCommonProperty = function (json) {
+            var that = this
+                , options = that.config;
+            for (var key in json) {
+                if (key === 'index') {
+                    continue;
+                }
+                switch (key) {
+                    case 'id':
+                        $('#id').click(function () {
+                            //例子2
+                            layer.prompt({
+                                formType: 0,
+                                value: options.selectItem.id,
+                                title: '请输入更新后的ID',
+                            }, function (value, index, elem) {
+                                var _checkid = that.findJsonItem(options.data, value);
+                                if (_checkid === undefined) {
+                                    var findJsonItem = that.findJsonItem(options.data, options.selectItem.id);
+                                    findJsonItem.id = value;
+                                    that.renderForm();
+                                } else {
+                                    //提示层
+                                    layer.msg('ID已经存在');
+                                }
+                                layer.close(index);
+                            });
+                        });
+                        $('#id').mouseover(function () {
+                            layer.tips('请点击修改id', '#id',);
+                        });
+                        break;
+                    case 'labelWidth':
+                        //定义初始值
+                        slider.render({
+                            elem: '#labelWidth',
+                            value: json.labelWidth, //初始值
+                            min: 80,
+                            max: 300,
+                            step: 1,
+                            input: true,
+                            change: function (value) {
+                                json.labelWidth = value;
+                                that.components[json.tag].update(json, that);
+                            }
+                        });
+                        break;
+                    case 'width':
+                        //定义初始值
+                        slider.render({
+                            elem: '#width',
+                            value: json.width.replace("%", ""), //初始值
+                            min: 20,
+                            max: 100,
+                            step: 1,
+                            input: true,
+                            change: function (value) {
+                                json.width = value + "%";
+                                that.components[json.tag].update(json, that);
+                            }
+                        });
+                        break;
+                    case 'options':
+                        var sortable = Sortable.create(document.getElementById(options.selectItem.tag), {
+                            group: {
+                                name: 'propertygroup',
+                            },
+                            ghostClass: "ghost",
+                            handle: '.select-option-drag',
+                            dataIdAttr: 'data-index',
+                            animation: 150,
+                            onEnd: function (evt) {
+                                if (options.selectItem === undefined) {
+                                    return;
+                                }
+                                var indexArray = sortable.toArray();
+                                var newJson = [];
+                                for (var i = 0; i < indexArray.length; i++) {
+                                    newJson.push(options.selectItem.options[indexArray[i]]);
+                                }
+                                options.selectItem.options = newJson;
+                                var $select = $('#' + options.selectItem.tag);
+                                $select.empty();
+                                that.components[options.selectItem.tag].update(options.selectItem, that);
+                                that.components[options.selectItem.tag].property(options.selectItem, that);
+                                form.render('select');
+                                form.render('radio');
+                                form.render('checkbox');
+                            }
+                        });
+                        that.addOptionEvent(json);
+                        break;
+                    case 'dataMaxValue':
+                        laydate.render({
+                            elem: '#dataMaxValue' + json.tag + json.id,
+                            format: 'yyyy-MM-dd',
+                            btns: ['now', 'confirm'],
+                            value: json.dataMaxValue,
+                            done: function (value, date, endDate) {
+                                json.dataMaxValue = value;
+                                that.components[json.tag].update(json, that);
+                            }
+                        });
+                        break;
+                    case 'dataMinValue':
+                        laydate.render({
+                            elem: '#dataMinValue' + json.tag + json.id,
+                            format: 'yyyy-MM-dd',
+                            btns: ['now', 'confirm'],
+                            value: json.dataMinValue,
+                            done: function (value, date, endDate) {
+                                json.dataMinValue = value;
+                                that.components[json.tag].update(json, that);
+                            }
+                        });
+                        break;
+                    case 'dateDefaultValue':
+                        laydate.render({
+                            elem: '#dateDefaultValue' + json.tag + json.id,
+                            type: json.dateType,
+                            format: json.dateFormat,
+                            value: json.dateDefaultValue,
+                            done: function (value, date, endDate) {
+                                json.dateDefaultValue = value;
+                                that.components[json.tag].update(json, that);
+                            }
+                        });
+                        break;
+                    case 'dateRangeDefaultValue':
+                        laydate.render({
+                            elem: '#dateRangeDefaultValue' + json.tag + json.id,
+                            type: json.dateType,
+                            format: json.dateFormat,
+                            value: json.dateRangeDefaultValue,
+                            range: "-",
+                            done: function (value, date, endDate) {
+                                json.dateRangeDefaultValue = value;
+                                that.components[json.tag].update(json, that);
+                            }
+                        });
+                        break;
+                    case 'buttonIcon':
+                        iconPicker.render({
+                            // 选择器，推荐使用input
+                            elem: '#' + json.tag + json.id + "property",
+                            // 数据类型：fontClass/unicode，推荐使用fontClass
+                            type: 'fontClass',
+                            // 是否开启搜索：true/false，默认true
+                            search: true,
+                            // 是否开启分页：true/false，默认true
+                            page: true,
+                            // 每页显示数量，默认12
+                            limit: 12,
+                            // 每个图标格子的宽度：'43px'或'20%'
+                            cellWidth: '43px',
+                            // 点击回调
+                            click: function (data) {
+                                json.buttonIcon = data.icon;
+                                that.components[json.tag].update(json, that);
+                            },
+                            // 渲染成功后的回调
+                            success: function (d) {
+                                //console.log(d);
+                            }
+                        });
+                        break;
+                    case 'whiteSpace':
+                        slider.render({
+                            elem: '#' + json.tag + json.id + "property",
+                            value: json.whiteSpace, //初始值
+                            min: 30,
+                            max: 500,
+                            step: 1,
+                            input: true,
+                            change: function (value) {
+                                json.whiteSpace = value;
+                                that.components[json.tag].update(json, that);
+                            }
+                        });
+                        break;
+                    case 'colorSelection':
+                        colorpicker.render({
+                            elem: '#' + json.tag + json.id + "property"
+                            , color: json.colorSelection
+                            , format: 'rgb'
+                            , predefine: true
+                            , alpha: true
+                            , done: function (color) {
+                                json.colorSelection = color;
+                                that.components[json.tag].update(json, that);
+                            }
+                        });
+                        break;
+                    case 'menu':
+                        $('#menu').click(function () {
+                            layer.open({
+                                type: 2,
+                                title: '头部菜单',
+                                btn: ['保存', '关闭'], //可以无限个按钮
+                                yes: function (index, layero) {
+                                    //do something
+                                    var iframe = window['layui-layer-iframe' + index];
+                                    var checkData = iframe.getCheckData();
+                                    json.menu = checkData;
+                                    that.components[json.tag].update(json, that);
+                                    layer.close(index); //如果设定了yes回调，需进行手工关闭
+                                },
+                                btn2: function (index, layero) {
+                                    layer.close(index);
+                                },
+                                closeBtn: 1, //不显示关闭按钮
+                                shade: [0],
+                                area: ['80%', '80%'],
+                                offset: 'auto', //右下角弹出
+                                anim: 2,
+                                content: ['./editorMenu.html', 'yes'], //iframe的url，no代表不显示滚动条
+                                success: function (layero, index) {
+                                    var iframe = window['layui-layer-iframe' + index];
+                                    iframe.child(staticField.iceEditMenus)
+                                }
+                            });
+                        });
+                        break;
+                    default:
+                        break;
+                }
+            }
+        }
+
+        /* 添加选项事件*/
+        Class.prototype.addOptionEvent = function (json) {
+            var that = this
+                , options = that.config;
+            $('#select-option-add').on('click', function () {
+                //添加html
+                json.options.splice(json.options.length + 1, 0, { text: 'option', value: 'value', checked: false });
+                var _htmloption = '';
+                _htmloption += '<div class="layui-form-item option select-options" data-index="{0}">'.format(json.options.length - 1);
+                _htmloption += '  <div class="layui-inline" style="width: 30px; margin-right: 0px;">';
+                if (json.tag === 'checkbox') {
+                    _htmloption += '   <input type="checkbox" name="{0}" lay-skin="primary" title="">'.format(json.tag);
+                } else {
+                    _htmloption += '   <input type="radio" name="{0}" >'.format(json.tag);
+                }
+                _htmloption += '  </div>';
+                _htmloption += '  <div class="layui-inline" style="margin-right: 0px;width:110px;">';
+                _htmloption += '   <input type="text" name="{0}-text"  autocomplete="off" value="{1}" class="layui-input">'.format(json.tag, 'option');
+                _htmloption += '  </div>';
+                _htmloption += '  <div class="layui-inline" style="margin-right: 0px;width:110px;">';
+                _htmloption += '   <input type="text" name="{0}-value"  autocomplete="off" value="{1}" class="layui-input">'.format(json.tag, 'value');
+                _htmloption += '  </div>';
+                _htmloption += '  <div class="layui-inline" style="margin-right: 0px;">';
+                _htmloption += '   <i class="layui-icon layui-icon-slider select-option-drag" style="color:blue;font-size:20px;"></i>';
+                _htmloption += '   <i class="layui-icon layui-icon-delete select-option-delete" style="color:red;font-size:20px;"></i>';
+                _htmloption += '  </div>';
+                _htmloption += '</div>';
+                $('#columnProperty .select-options').last().after(_htmloption);
+                //更新设计区节点
+                that.components[json.tag].update(json, that);
+                if (json.tag === 'checkbox') {
+                    form.render('checkbox');
+                } else if (json.tag === 'radio' || json.tag == 'carousel') {
+                    form.render('radio');
+                } else if (json.tag == 'select') {
+                    form.render('select');
+                    form.render('radio');
+                }
+            });
+            //委托监听先关闭在增加 click
+            $(document).off('click', '#columnProperty .select-option-delete').on('click', '#columnProperty .select-option-delete', function (e) {
+                e.preventDefault();
+                e.stopPropagation();
+                //从数据源 options.data 中删除节点
+                if (json.options.length <= 1) {
+                    layer.msg('已达到最低选项，不能继续删除');
+                    return;
+                }
+                var _index = $(this).closest('.layui-form-item')[0].dataset.index;
+                if (_index !== undefined) {
+                    json.options.splice(_index, 1);//删除此节点
+                }
+                var checkedDefual = true;
+                for (var i = 0; i < json.options.length; i++) {
+                    if (json.options[i].checked) {
+                        checkedDefual = false
+                    }
+                }
+                if (checkedDefual) {
+                    json.options[0].checked = true;
+                }
+                $('#' + json.tag).empty();
+                var _html = '';
+                for (var i = 0; i < json.options.length; i++) {
+                    _html += '<div class="layui-form-item option select-options" data-index="{0}">'.format(i);
+                    _html += '  <div class="layui-inline" style="width: 30px; margin-right: 0px;">';
+                    if (json.tag === 'checkbox') {
+                        if (json.options[i].checked) {
+                            _html += '   <input type="checkbox" name="{0}" lay-skin="primary" title="" checked>'.format(json.tag);
+                        } else {
+                            _html += '   <input type="checkbox" name="{0}" lay-skin="primary" title="">'.format(json.tag);
+                        }
+                    } else {
+                        if (json.options[i].checked) {
+                            _html += '   <input type="radio" name="{0}" checked>'.format(json.tag);
+                        } else {
+                            _html += '   <input type="radio" name="{0}">'.format(json.tag);
+                        }
+                    }
+                    _html += '  </div>';
+                    _html += '  <div class="layui-inline" style="margin-right: 0px;width:110px;">';
+                    _html += '   <input type="text" name="{0}-text"  autocomplete="off" value="{1}" class="layui-input">'.format(json.tag, json.options[i].text);
+                    _html += '  </div>';
+                    _html += '  <div class="layui-inline" style="margin-right: 0px;width:110px;">';
+                    _html += '   <input type="text" name="{0}-value"  autocomplete="off" value="{1}" class="layui-input">'.format(json.tag, json.options[i].value);
+                    _html += '  </div>';
+                    _html += '  <div class="layui-inline" style="margin-right: 0px;">';
+                    _html += '   <i class="layui-icon layui-icon-slider select-option-drag" style="color:blue;font-size:20px;"></i>';
+                    _html += '   <i class="layui-icon layui-icon-delete select-option-delete" style="color:red;font-size:20px;"></i>';
+                    _html += '  </div>';
+                    _html += '</div>';
+                }
+                $('#' + json.tag).append(_html);
+                //更新设计区节点
+                that.components[json.tag].update(json, that);
+                if (json.tag === 'checkbox') {
+                    form.render('checkbox');
+                } else if (json.tag === 'radio') {
+                    form.render('radio');
+                } else if (json.tag == 'select') {
+                    form.render('select');
+                    form.render('radio');
+                }
+            });
+        }
+
+        /* 根据 json 对象获取对应的属性的html*/
+        Class.prototype.renderCommonProperty = function (json) {
+            $('#columnProperty').empty();
+            var _html = '';
+            for (var key in json) {
+                if (key === 'index') {
+                    continue;
+                }
+                switch (key) {
+                    case 'tag':
+                    case 'uploadUrl':
+                    case 'document':
+                    case 'interval':
+                    case 'cronUrl':
+                        _html += '<div class="layui-form-item" >';
+                        _html += '  <label class="layui-form-label">{0}</label>'.format(staticField.lang[key]);
+                        _html += '  <div class="layui-input-block">';
+                        if (key === 'tag') {
+                            _html += '    <input type="text" readonly id="{0}" name="{0}" value="{1}" required lay-verify="required" placeholder="请输入内容" autocomplete="off" class="layui-input">'
+                                .format(key, json[key] == undefined ? '' : json[key]);
+                        } else {
+                            _html += '    <input type="text" id="{0}" name="{0}" value="{1}" required lay-verify="required" placeholder="请输入内容" autocomplete="off" class="layui-input">'
+                                .format(key, json[key] == undefined ? '' : json[key]);
+                        }
+                        _html += '  </div>';
+                        _html += '</div>';
+                        break;
+                    case 'readonly':
+                        var yes = "只读";
+                        var no = "可写";
+                        _html += '<div class="layui-form-item" >';
+                        _html += '  <label class="layui-form-label">{0}</label>'.format(staticField.lang[key]);
+                        _html += '  <div class="layui-input-block">';
+                        _html += '    <input type="checkbox" id="{1}" {0} name="{1}" lay-skin="switch" lay-text="{2}|{3}">'.format(json[key] ? 'checked' : '', key, yes, no);
+                        _html += '  </div>';
+                        _html += '</div>';
+                        break;
+                    case 'disabled':
+                    case 'hideLabel':
+                        var yes = "隐藏";
+                        var no = "显示";
+                        _html += '<div class="layui-form-item" >';
+                        _html += '  <label class="layui-form-label">{0}</label>'.format(staticField.lang[key]);
+                        _html += '  <div class="layui-input-block">';
+                        _html += '    <input type="checkbox" id="{1}" {0} name="{1}" lay-skin="switch" lay-text="{2}|{3}">'.format(json[key] ? 'checked' : '', key, yes, no);
+                        _html += '  </div>';
+                        _html += '</div>';
+                        break;
+                    case 'dimension':
+                        var yes = "是";
+                        var no = "否";
+                        _html += '<div class="layui-form-item" >';
+                        _html += '  <label class="layui-form-label">{0}</label>'.format(staticField.lang[key]);
+                        _html += '  <div class="layui-input-block">';
+                        _html += '    <input type="checkbox" id="{1}" {0} name="{1}" lay-skin="switch" lay-text="{2}|{3}">'.format(json[key] ? 'checked' : '', key, yes, no);
+                        _html += '  </div>';
+                        _html += '</div>';
+                        break;
+                    case 'required':
+                        var yes = "必填";
+                        var no = "可选";
+                        _html += '<div class="layui-form-item" >';
+                        _html += '  <label class="layui-form-label">{0}</label>'.format(staticField.lang[key]);
+                        _html += '  <div class="layui-input-block">';
+                        _html += '    <input type="checkbox" id="{1}" {0} name="{1}" lay-skin="switch" lay-text="{2}|{3}">'.format(json[key] ? 'checked' : '', key, yes, no);
+                        _html += '  </div>';
+                        _html += '</div>';
+                        break;
+                    case 'expression':
+                        _html += '<div class="layui-form-item" >';
+                        _html += '  <label class="layui-form-label">{0}</label>'.format(staticField.lang[key]);
+                        _html += '  <div class="layui-input-block">';
+                        _html += '<select name="{0}" lay-verify="required">'.format(key);
+                        for (var i = 0; i < staticField.expressions.length; i++) {
+                            if (staticField.expressions[i].value === json.expression) {
+                                _html += '<option value="{0}" selected="">{1}</option>'.format(staticField.expressions[i].value, staticField.expressions[i].text);
+                            } else {
+                                _html += '<option value="{0}">{1}</option>'.format(staticField.expressions[i].value, staticField.expressions[i].text);
+                            }
+                        }
+                        _html += '</select>'
+                        _html += '  </div>';
+                        _html += '</div>';
+                        break;
+                    case 'fieldType':
+                        _html += '<div class="layui-form-item" >';
+                        _html += '  <label class="layui-form-label">{0}</label>'.format(staticField.lang[key]);
+                        _html += '  <div class="layui-input-block">';
+                        _html += '<select name="{0}" lay-verify="required">'.format(key);
+                        for (var i = 0; i < staticField.fieldTypes.length; i++) {
+                            if (staticField.fieldTypes[i].value === json.fieldType) {
+                                _html += '<option value="{0}" selected="">{1}</option>'.format(staticField.fieldTypes[i].value, staticField.fieldTypes[i].text);
+                            } else {
+                                _html += '<option value="{0}">{1}</option>'.format(staticField.fieldTypes[i].value, staticField.fieldTypes[i].text);
+                            }
+                        }
+                        _html += '</select>'
+                        _html += '  </div>';
+                        _html += '</div>';
+                        break;
+                    case 'autoplay':
+                    case 'iconPickerSearch':
+                    case 'iconPickerPage':
+                    case 'isInput':
+                        var yes = "是";
+                        var no = "否";
+                        _html += '<div class="layui-form-item" >';
+                        _html += '  <label class="layui-form-label">{0}</label>'.format(staticField.lang[key]);
+                        _html += '  <div class="layui-input-block">';
+                        _html += '    <input type="checkbox" id="{1}" {0} name="{1}" lay-skin="switch" lay-text="{2}|{3}">'.format(json[key] ? 'checked' : '', key, yes, no);
+                        _html += '  </div>';
+                        _html += '</div>';
+                        break;
+                    case 'defaultValue':
+                    case 'label':
+                    case 'height':
+                    case 'placeholder':
+                    case 'document':
+                    case 'minValue':
+                    case 'maxValue':
+                    case 'stepValue':
+                    case 'rateLength':
+                    case 'iconPickerLimit':
+                    case 'iconPickerCellWidth':
+                    case 'buttonVlaue':
+                        _html += '<div class="layui-form-item" >';
+                        _html += '  <label class="layui-form-label">{0}</label>'.format(staticField.lang[key]);
+                        _html += '  <div class="layui-input-block">';
+                        _html += '    <input type="text" id="{0}" name="{0}" value="{1}" required lay-verify="required" placeholder="请输入{2}" autocomplete="off" class="layui-input">'
+                            .format(key, json[key] == undefined ? '' : json[key], staticField.lang[key]);
+                        _html += '  </div>';
+                        _html += '</div>';
+                        break;
+                    case 'width':
+                    case 'labelWidth':
+                        _html += '<div class="layui-form-item" >';
+                        _html += '  <label class="layui-form-label">{0}</label>'.format(staticField.lang[key]);
+                        _html += '  <div class="layui-input-block">';
+                        _html += '<div id="{0}" class="widget-slider" style="top: 16px;"></div>'.format(key);
+                        _html += '    <input type="hidden" id="{0}"  name="{0}" value="{1}" readonly="readonly" style="background:#eeeeee!important;width: 100%;" placeholder="请选择{2}" autocomplete="off" class="layui-input">'
+                            .format(key + "-value", '', staticField.lang[key]);
+                        _html += '  </div>';
+                        _html += '</div>';
+                        break;
+                    case 'menu':
+                        _html += '<div class="layui-form-item" >';
+                        _html += '  <label class="layui-form-label">{0}</label>'.format(staticField.lang[key]);
+                        _html += '  <div class="layui-input-block">';
+                        _html += '    <input type="text" id="{0}" name="{0}" value="{1}" readonly="readonly" style="background:#eeeeee!important;width: 100%;" placeholder="{2}" autocomplete="off" class="layui-input">'
+                            .format(key, '', staticField.lang[key]);
+                        _html += '  </div>';
+                        _html += '</div>';
+                        break;
+                    case 'id':
+                        _html += '<div class="layui-form-item" >';
+                        _html += '  <label class="layui-form-label">{0}</label>'.format(staticField.lang[key]);
+                        _html += '  <div class="layui-input-block">';
+                        _html += '    <input type="text" id="{0}" name="{0}" value="{1}" readonly="readonly" style="background:#eeeeee!important;width: 100%;" placeholder="{2}" autocomplete="off" class="layui-input">'
+                            .format(key, '', json[key]);
+                        _html += '  </div>';
+                        _html += '</div>';
+                        break;
+                    case 'switchValue':
+                        _html += '<div class="layui-form-item" >';
+                        _html += '  <label class="layui-form-label">{0}</label>'.format(staticField.lang[key]);
+                        _html += '  <div class="layui-input-block">';
+                        _html += '     <input type="checkbox" name="{0}" {1} lay-skin="switch" lay-text="ON|OFF">'
+                            .format(key, json[key] ? 'checked' : '');
+                        _html += '  </div>';
+                        _html += '</div>';
+                        break;
+                    case 'dateType':
+                        _html += '<div class="layui-form-item" >';
+                        _html += '  <label class="layui-form-label">{0}</label>'.format(staticField.lang[key]);
+                        _html += '  <div class="layui-input-block">';
+                        _html += '<select name="{0}" lay-verify="required">'.format(key);
+                        for (var i = 0; i < staticField.dateTypes.length; i++) {
+                            if (staticField.dateTypes[i].value === json.dateType) {
+                                _html += '<option value="{0}" selected="">{1}</option>'.format(staticField.dateTypes[i].value, staticField.dateTypes[i].text);
+                            } else {
+                                _html += '<option value="{0}">{1}</option>'.format(staticField.dateTypes[i].value, staticField.dateTypes[i].text);
+                            }
+                        }
+                        _html += '</select>'
+                        _html += '  </div>';
+                        _html += '</div>';
+                        break;
+                    case 'dateFormat':
+                        _html += '<div class="layui-form-item" >';
+                        _html += '  <label class="layui-form-label">{0}</label>'.format(staticField.lang[key]);
+                        _html += '  <div class="layui-input-block">';
+                        _html += '<select name="{0}" lay-verify="required">'.format(key);
+                        for (var i = 0; i < staticField.dateFormats.length; i++) {
+                            if (staticField.dateFormats[i] === json.dateFormat) {
+                                _html += '<option value="{0}" selected="">{0}</option>'.format(staticField.dateFormats[i]);
+                            } else {
+                                _html += '<option value="{0}">{0}</option>'.format(staticField.dateFormats[i]);
+                            }
+                        }
+                        _html += '</select>'
+                        _html += '  </div>';
+                        _html += '</div>';
+                        break;
+                    case 'contents':
+                        //处理
+                        _html += '<div class="layui-form-item" >';
+                        _html += '  <label class="layui-form-label">{0}</label>'.format(staticField.lang[key]);
+                        _html += '  <div class="layui-input-block">';
+                        _html += '    <button style="margin: 5px 0px 0px 30px;" type="button" id="select-option-add" class="layui-btn layui-btn-primary layui-btn-sm"><i class="layui-icon layui-icon-addition"></i>增加选项</button>'
+                        //_html += '    <button type="button" id="select-option-datasource" class="layui-btn layui-btn-primary layui-btn-sm"><i class="layui-icon layui-icon-addition"></i>设置数据源</button>'
+                        _html += '  </div>';
+                        _html += '</div>';
+                        _html += '<div id="{0}">'.format(json.tag);
+                        //选项
+                        for (var i = 0; i < json.contents.length; i++) {
+                            _html += '<div class="layui-form-item option contents-options" data-index="{0}">'.format(i);
+
+                            _html += '  <div class="layui-inline" style="margin-right: 0px;width:220px; margin-left:30px;">';
+                            _html += '   <input type="text" name="{0}-text"  autocomplete="off" value="{1}" class="layui-input">'.format(json.tag, json.contents[i]);
+                            _html += '  </div>';
+                            _html += '  <div class="layui-inline" style="margin-right: 0px;">';
+                            _html += '   <i class="layui-icon layui-icon-slider contents-option-drag" style="color:blue;font-size:20px;"></i>';
+                            _html += '   <i class="layui-icon layui-icon-delete contents-option-delete" style="color:red;font-size:20px;"></i>';
+                            _html += '  </div>';
+                            _html += '</div>';
+                            //向 .option .layui-inline 添加drag事件并且必须设在 contents-option-drag 中才能拖动
+                        }
+                        _html += '</div>';
+                        break;
+                    case 'options':
+                        //处理
+                        _html += '<div class="layui-form-item" >';
+                        _html += '  <label class="layui-form-label">{0}</label>'.format(staticField.lang[key]);
+                        _html += '  <div class="layui-input-block">';
+                        _html += '    <button style="margin: 5px 0px 0px 30px;" type="button" id="select-option-add" class="layui-btn layui-btn-primary layui-btn-sm"><i class="layui-icon layui-icon-addition"></i>增加选项</button>'
+                        //_html += '    <button type="button" id="select-option-datasource" class="layui-btn layui-btn-primary layui-btn-sm"><i class="layui-icon layui-icon-addition"></i>设置数据源</button>'
+                        _html += '  </div>';
+                        _html += '</div>';
+                        _html += '<div id="{0}">'.format(json.tag);
+                        //选项
+                        for (var i = 0; i < json.options.length; i++) {
+                            _html += '<div class="layui-form-item option select-options" data-index="{0}">'.format(i);
+                            _html += '  <div class="layui-inline" style="width: 30px; margin-right: 0px;">';
+                            if (json.tag === 'checkbox') {
+                                if (json.options[i].checked) {
+                                    _html += '    <input type="checkbox" name="{0}" lay-skin="primary" title="" checked="">'.format(json.tag);
+                                } else {
+                                    _html += '    <input type="checkbox" name="{0}" lay-skin="primary" title="">'.format(json.tag);
+                                }
+                            } else {
+                                if (json.options[i].checked) {
+                                    _html += '   <input type="radio" name="{0}"  checked="">'.format(json.tag);
+                                } else {
+                                    _html += '   <input type="radio" name="{0}">'.format(json.tag);
+                                }
+
+                            }
+                            _html += '  </div>';
+                            _html += '  <div class="layui-inline" style="margin-right: 0px;width:110px;">';
+                            _html += '   <input type="text" name="{0}-text"  autocomplete="off" value="{1}" class="layui-input">'.format(json.tag, json.options[i].text);
+                            _html += '  </div>';
+                            _html += '  <div class="layui-inline" style="margin-right: 0px;width:110px;">';
+                            _html += '   <input type="text" name="{0}-value"  autocomplete="off" value="{1}" class="layui-input">'.format(json.tag, json.options[i].value);
+                            _html += '  </div>';
+                            _html += '  <div class="layui-inline" style="margin-right: 0px;">';
+                            _html += '   <i class="layui-icon layui-icon-slider select-option-drag" style="color:blue;font-size:20px;"></i>';
+                            _html += '   <i class="layui-icon layui-icon-delete select-option-delete" style="color:red;font-size:20px;"></i>';
+                            _html += '  </div>';
+                            _html += '</div>';
+                            //向 .option .layui-inline 添加drag事件并且必须设在 select-option-drag 中才能拖动
+                        }
+                        _html += '</div>';
+                        break;
+                    case 'anim':
+                        //处理
+                        _html += '<div class="layui-form-item" >';
+                        _html += '  <label class="layui-form-label">{0}</label>'.format(staticField.lang[key]);
+                        _html += '  <div class="layui-input-block">';
+                        _html += '<select name="{0}" lay-verify="required">'.format(key);
+                        for (var i = 0; i < staticField.anims.length; i++) {
+                            if (staticField.anims[i].value === json.anim) {
+                                _html += ' <option value="{1}" selected="">{0}</option>'.format(staticField.anims[i].text, staticField.anims[i].value);
+                            } else {
+                                _html += ' <option value="{1}">{0}</option>'.format(staticField.anims[i].text, staticField.anims[i].value);
+                            }
+                        }
+                        _html += '</select>'
+                        _html += '</div>';
+                        _html += '</div>';
+                        break;
+                    case 'arrow':
+                        //处理
+                        _html += '<div class="layui-form-item" >';
+                        _html += '  <label class="layui-form-label">{0}</label>'.format(staticField.lang[key]);
+                        _html += '  <div class="layui-input-block">';
+                        _html += '<select name="{0}" lay-verify="required">'.format(key);
+                        for (var i = 0; i < staticField.arrows.length; i++) {
+                            if (staticField.arrows[i].value === json.arrow) {
+                                _html += ' <option value="{1}" selected="">{0}</option>'.format(staticField.arrows[i].text, staticField.arrows[i].value);
+                            } else {
+                                _html += ' <option value="{1}">{0}</option>'.format(staticField.arrows[i].text, staticField.arrows[i].value);
+                            }
+                        }
+                        _html += '</select>'
+                        _html += '</div>';
+                        _html += '</div>';
+                        break;
+                    case 'buttonType':
+                        //处理
+                        _html += '<div class="layui-form-item" >';
+                        _html += '  <label class="layui-form-label">{0}</label>'.format(staticField.lang[key]);
+                        _html += '  <div class="layui-input-block">';
+                        _html += '<select name="{0}" lay-verify="required">'.format(key);
+                        for (var i = 0; i < staticField.buttonTypes.length; i++) {
+                            if (staticField.buttonTypes[i].value === json.buttonType) {
+                                if (staticField.buttonTypes[i].value === "") {
+                                    _html += ' <option selected="">{0}</option>'.format(staticField.buttonTypes[i].text);
+                                } else {
+                                    _html += ' <option value="{1}" selected="">{0}</option>'.format(staticField.buttonTypes[i].text, staticField.buttonTypes[i].value);
+                                }
+                            } else {
+                                _html += ' <option value="{1}">{0}</option>'.format(staticField.buttonTypes[i].text, staticField.buttonTypes[i].value);
+                            }
+                        }
+                        _html += '</select>'
+                        _html += '</div>';
+                        _html += '</div>';
+                        break;
+                    case 'buttonSize':
+                        //处理
+                        _html += '<div class="layui-form-item" >';
+                        _html += '  <label class="layui-form-label">{0}</label>'.format(staticField.lang[key]);
+                        _html += '  <div class="layui-input-block">';
+                        _html += '<select name="{0}" lay-verify="required">'.format(key);
+                        for (var i = 0; i < staticField.buttonSizes.length; i++) {
+                            if (staticField.buttonSizes[i].value === json.buttonSize) {
+                                if (staticField.buttonSizes[i].value === "") {
+                                    _html += ' <option selected="">{0}</option>'.format(staticField.buttonSizes[i].text);
+                                } else {
+                                    _html += ' <option value="{1}" selected="">{0}</option>'.format(staticField.buttonSizes[i].text, staticField.buttonSizes[i].value);
+                                }
+                            } else {
+                                _html += ' <option value="{1}">{0}</option>'.format(staticField.buttonSizes[i].text, staticField.buttonSizes[i].value);
+                            }
+                        }
+                        _html += '</select>'
+                        _html += '</div>';
+                        _html += '</div>';
+                        break;
+                    case 'dataMaxValue':
+                    case 'dataMinValue':
+                        _html += '<div id="{0}" class="layui-form-item">'.format(key + json.id);
+                        _html += '<label class="layui-form-label">{0}:</label>'.format(staticField.lang[key]);
+                        _html += '<div class="layui-input-block"">';
+                        _html += '<div id="{0}" class="layui-input icon-date widget-date" style="line-height: 40px;"></div>'.format(key + json.tag + json.id);
+                        _html += '</div>';
+                        _html += '</div>';
+                        break;
+                    case 'dateDefaultValue':
+                        _html += '<div id="{0}" class="layui-form-item">'.format(key + json.id);
+                        _html += '<label class="layui-form-label">{0}:</label>'.format(staticField.lang[key]);
+                        _html += '<div class="layui-input-block"">';
+                        _html += '<div id="{0}" class="layui-input icon-date widget-date" style="line-height: 40px;"></div>'.format(key + json.tag + json.id);
+                        _html += '</div>';
+                        _html += '</div>';
+                        break;
+                    case 'dateRangeDefaultValue':
+                        _html += '<div id="{0}" class="layui-form-item">'.format(key + json.id);
+                        _html += '<label class="layui-form-label">{0}:</label>'.format(staticField.lang[key]);
+                        _html += '<div class="layui-input-block"">';
+                        _html += '<div id="{0}" class="layui-input icon-date widget-date" style="line-height: 40px;"></div>'.format(key + json.tag + json.id);
+                        _html += '</div>';
+                        _html += '</div>';
+                        break;
+                    case 'buttonIcon':
+                        _html += '<div id="{0}" class="layui-form-item" ">'.format(key + json.id);
+                        _html += '<label class="layui-form-label">{0}:</label>'.format(staticField.lang[key]);
+                        _html += '<div class="layui-input-block"">';
+                        _html += '<div id="{0}" class="layui-input icon-date widget-date" style="line-height: 40px;"></div>'.format(json.tag + json.id + "property");
+                        _html += '</div>';
+                        _html += '</div>';
+                        break;
+                    case 'whiteSpace':
+                        _html += '<div id="{0}" class="layui-form-item" ">'.format(key + json.id);
+                        _html += '<label class="layui-form-label">{0}:</label>'.format(staticField.lang[key]);
+                        _html += '<div class="layui-input-block"">';
+                        _html += '<div id="{0}" class="widget-slider" style="top: 16px;"></div>'
+                            .format(json.tag + json.id + "property");
+                        _html += '</div>';
+                        _html += '</div>';
+                        break;
+                    case 'colorSelection':
+                        _html += '<div id="{0}" class="layui-form-item" ">'.format(key + json.id);
+                        _html += '<label class="layui-form-label">{0}:</label>'.format(staticField.lang[key]);
+                        _html += '<div class="layui-input-block"">';
+                        _html += '<div id="{0}" class="widget-rate"></div>'.format(json.tag + json.id + "property");
+                        _html += '</div>';
+                        _html += '</div>';
+                        break;
+                    case 'columns':
+                        var columnCount = 2;
+                        columnCount = json[key].length;
+                        //处理
+                        _html += '<div class="layui-form-item" >';
+                        _html += '  <label class="layui-form-label">{0}</label>'.format(staticField.lang[key]);
+                        _html += '  <div class="layui-input-block">';
+                        _html += '<select name="{0}" lay-verify="required">'.format(key);
+                        for (var i = 2; i <= 4; i++) {
+                            if (i === columnCount) {
+                                _html += '<option value="{0}" selected="">{0}</option>'.format(i);
+                            } else {
+                                _html += '<option value="{0}">{0}</option>'.format(i);
+                            }
+                        }
+                        _html += '</select>'
+                        _html += '</div>';
+                        _html += '</div>';
+                        break;
+                    default:
+                        break;
+                }
+            }
+            $('#columnProperty').append(_html);
+        }
+
+
+
+        /* 给字段属性绑定事件 实现双向绑定*/
+        Class.prototype.bindPropertyEvent = function (_json) {
+            var that = this
+                , options = that.config;
+            if (options.data === undefined) {
+                return;
+            }
+            if (typeof (options.data) === 'string') {
+                options.data = JSON.parse(options.data);
+            }
+            //没有可以选择的
+            if (_json === undefined) {
+                return;
+            }
+            //全局下拉绑定
+            form.on('select', function (data) {
+                var _key = data.elem.name;
+                var _value = parseInt(data.value);
+                var _json = options.selectItem;
+                switch (_key) {
+                    case 'columns':
+                        var columnCount = _json[_key].length;
+                        var nullJson = {
+                            span: 12,
+                            list: []
+                        };
+                        if (_value > columnCount) {
+                            for (var i = columnCount + 1; i <= _value; i++) {
+                                _json[_key].splice(i, 0, nullJson);
+                            }
+                        } else {
+                            _json[_key].splice(_value, columnCount);
+                        }
+                        that.components[_json.tag].update(_json, that);
+                        break;
+                    case 'dateFormat':
+                        if (_json.tag === 'date') {
+                            var _html = '<div id="{0}" class="layui-input icon-date widget-date" style="line-height: 40px;"></div>'.format('dateDefaultValue' + _json.tag + _json.id);
+                            $('#dateDefaultValue' + _json.id + ' .layui-input-block').empty();
+                            $('#dateDefaultValue' + _json.id + ' .layui-input-block').append(_html);
+                            _json.dateFormat = data.value;
+                            var dateClass = laydate.render({
+                                elem: '#dateDefaultValue' + _json.tag + _json.id,
+                                type: _json.datetype,
+                                format: _json.dateFormat,
+                                value: new Date(),
+                                done: function (value, date, endDate) {
+                                    _json.dateDefaultValue = value;
+                                    that.components[_json.tag].update(_json, that);
+                                }
+                            });
+                            _json.dateDefaultValue = dateClass.config.elem[0].innerText;
+                            that.components[_json.tag].update(_json, that);
+                        }
+                        if (_json.tag === 'dateRange') {
+                            var _html = '<div id="{0}" class="layui-input icon-date widget-date"></div>'.format('dateDefaultValue' + _json.tag + _json.id);
+                            $('#dateDefaultValue' + _json.id + ' .layui-input-block').empty();
+                            $('#dateDefaultValue' + _json.id + ' .layui-input-block').append(_html);
+                            _json.dateFormat = data.value;
+                            var _v = layui.util.toDateString(new Date(), _json.dateFormat) + " - " + layui.util.toDateString(new Date(), _json.dateFormat);
+                            laydate.render({
+                                elem: '#dateRangeDefaultValue' + _json.tag + _json.id,
+                                type: _json.dateType,
+                                format: _json.dateFormat,
+                                value: _v,
+                                range: "-",
+                                done: function (value, date, endDate) {
+                                    _json.dateRangeDefaultValue = value;
+                                    that.components[_json.tag].update(_json, that);
+                                }
+                            });
+                            _json.dateRangeDefaultValue = _v;
+                            that.components[_json.tag].update(_json, that);
+                        }
+                        break;
+                    case 'dateType':
+                        if (_json.tag === 'date') {
+                            var _html = '<div id="{0}" class="layui-input icon-date widget-date" style="line-height: 40px;"></div>'.format('dateDefaultValue' + _json.tag + _json.id);
+                            $('#dateDefaultValue' + _json.id + ' .layui-input-block').empty();
+                            $('#dateDefaultValue' + _json.id + ' .layui-input-block').append(_html);
+                            _json.dateType = data.value;
+                            var dateClass = laydate.render({
+                                elem: '#dateDefaultValue' + _json.tag + _json.id,
+                                type: _json.dateType,
+                                format: _json.dateFormat,
+                                value: new Date(),
+                                done: function (value, date, endDate) {
+                                    _json.dateDefaultValue = value;
+                                    that.components[_json.tag].update(_json, that);
+                                }
+                            });
+                            _json.dateDefaultValue = dateClass.config.elem[0].innerText;
+                            that.components[_json.tag].update(_json, that);
+                        }
+                        if (_json.tag === 'dateRange') {
+                            var _html = '<div id="{0}" class="layui-input icon-date widget-date"></div>'.format('dateDefaultValue' + _json.tag + _json.id);
+                            $('#dateDefaultValue' + _json.id + ' .layui-input-block').empty();
+                            $('#dateDefaultValue' + _json.id + ' .layui-input-block').append(_html);
+                            _json.dateType = data.value;
+                            laydate.render({
+                                elem: '#dateRangeDefaultValue' + _json.tag + _json.id,
+                                type: _json.dateType,
+                                format: _json.dateFormat,
+                                value: _json.dateRangeDefaultValue,
+                                range: "-",
+                                done: function (value, date, endDate) {
+                                    _json.dateRangeDefaultValue = value;
+                                    that.components[_json.tag].update(_json, that);
+                                }
+                            });
+                            that.components[_json.tag].update(_json, that);
+                        }
+                        break;
+
+                    case 'fieldType':
+                        if (_json.tag === 'input') {
+                            var _html = '<div id="{0}" class="layui-input icon-date widget-date" style="line-height: 40px;"></div>'.format('dateDefaultValue' + _json.tag + _json.id);
+                            $('#dateDefaultValue' + _json.id + ' .layui-input-block').empty();
+                            $('#dateDefaultValue' + _json.id + ' .layui-input-block').append(_html);
+                            _json.fieldType = data.value;
+                            that.components[_json.tag].update(_json, that);
+                        }
+                        break;
+
+                    case 'anim':
+                    case 'arrow':
+                    case 'buttonType':
+                    case 'buttonSize':
+                        _json[data.elem.name] = data.value;
+                        that.components[_json.tag].update(_json, that);
+                        break;
+                    default:
+                        break;
+                }
+            });
+            //全局input框绑定
+            $(document).off('keyup', '#columnProperty .layui-input').on('keyup', '#columnProperty .layui-input', function () {
+                var _key = $(this).attr("name");
+                var _value = $(this).val();
+                var _json = options.selectItem;
+                switch (_key) {
+                    case 'label':
+                    case 'width':
+                    case 'interval':
+                    case 'iconPickerLimit':
+                    case 'iconPickerCellWidth':
+                    case 'buttonVlaue':
+                    case 'placeholder':
+                    case 'rateLength':
+                    case 'height':
+                    case 'iconPickerLimit':
+                        _json[_key] = _value;
+                        that.components[_json.tag].update(_json, that);
+                        break;
+                    case 'defaultValue':
+                        if (_json.tag === 'slider') {
+                            var resultNumber = that.replaceNumber(_value);
+                            _json[_key] = resultNumber;
+                            $(this).val(resultNumber);
+                            slider.render({
+                                elem: '#' + _json.tag + _json.id,
+                                value: _json.defaultValue, //初始值
+                                min: _json.minValue,
+                                max: _json.maxValue,
+                                step: _json.stepValue,
+                                disabled: _json.disabled
+                            });
+                        } else if (_json.tag == 'numberInput') {
+                            var resultNumber = that.replaceNumber(_value);
+                            _json[_key] = resultNumber;
+                            $(this).val(resultNumber);
+                            that.components[_json.tag].update(_json, that);//局部更新
+                        } else {
+                            _json[_key] = _value;
+                            that.components[_json.tag].update(_json, that);
+                        }
+                        break;
+                    case 'minValue':
+                    case 'maxValue':
+                    case 'stepValue':
+                        var resultNumber = that.replaceNumber(_value);
+                        _json[_key] = resultNumber;
+                        $(this).val(resultNumber);
+                        if (_json.tag === 'slider') {
+                            slider.render({
+                                elem: '#' + _json.tag + _json.id,
+                                value: _json.defaultValue, //初始值
+                                min: _json.minValue,
+                                max: _json.maxValue,
+                                step: _json.stepValue,
+                                disabled: _json.disabled
+                            });
+                        } else if (_json.tag == 'numberInput') {
+                            that.components[_json.tag].update(_json, that);//局部更新
+                        }
+                        break;
+                    case 'carousel-text':
+                    case 'carousel-value':
+                        var _options = [];
+                        $('#columnProperty .select-options').each(function () {
+                            _options.push({
+                                text: $(this).find('input[name=carousel-text]').val(),
+                                value: $(this).find('input[name=carousel-value]').val(),
+                                checked: $(this).find('input[name=carousel]').hasAttribute("checked")
+                            });
+                        });
+                        _json.options = JSON.parse(JSON.stringify(_options));
+                        that.components[_json.tag].update(_json, that);//局部更新
+                        break;
+                    case 'select-text':
+                    case 'select-value':
+                    case 'radio-text':
+                    case 'radio-value':
+                    case 'checkbox-text':
+                    case 'checkbox-value':
+                        //找到 id=key 下的 option值
+                        var _index = parseInt($(this).parent().parent().attr("data-index"));
+                        if (_key === 'select-text' || _key === 'radio-text' || _key === 'checkbox-text') {
+                            _json.options[_index].text = $(this).val();
+                        } else {
+                            _json.options[_index].value = $(this).val();
+                        }
+                        that.components[_json.tag].update(_json, that);//局部更新
+                        break;
+                    default:
+                        break;
+                }
+            });
+            //全局开关绑定
+            form.on('switch', function (data) {
+                var _key = data.elem.name;
+                var _value = data.elem.checked ? true : false;
+                var _json = options.selectItem;
+                switch (_key) {
+                    case 'readonly':
+                    case 'disabled':
+                    case 'required':
+                    case 'dimension':
+                    case 'half':
+                    case 'text':
+                    case 'switchValue':
+                    case 'isInput':
+                    case 'iconPickerSearch':
+                    case 'iconPickerPage':
+                    case 'isEnter':
+                    case 'isLabel':
+                    case 'autoplay':
+                    case 'hideLabel':
+                        _json[_key] = _value;
+                        that.components[_json.tag].update(_json, that);
+                        break;
+                    default:
+                        break;
+                }
+            });
+
+            form.on('radio', function (data) {
+                var _json = options.selectItem;
+                switch (_json.tag) {
+                    case 'radio':
+                        var _index = parseInt($("#" + _json.id + " .layui-input-block div.layui-form-radio").index(data.othis[0]));
+                        if ($(data.othis[0]).parent().parent().parent().attr("id") === 'radio') {
+                            _index = parseInt($(data.othis[0]).parent().parent().attr("data-index"));
+                        }
+                        for (var i = 0; i < _json.options.length; i++) {
+                            if (i === _index) {
+                                _json.options[i].checked = true;
+                                continue;
+                            }
+                            _json.options[i].checked = false;
+                        }
+                        that.components[_json.tag].update(_json, that);
+                        break;
+                    case 'select':
+                    case 'carousel':
+                        var _index = parseInt(data.elem.closest('.layui-form-item').dataset.index);
+                        for (var i = 0; i < _json.options.length; i++) {
+                            if (i === _index) {
+                                _json.options[i].checked = true;
+                                _json.startIndex = i;
+                                continue;
+                            }
+                            _json.options[i].checked = false;
+                        }
+                        that.components[_json.tag].update(_json, that);
+                        break;
+                    default:
+                        break;
+                }
+            });
+
+            form.on('checkbox', function (data) {
+                var _json = options.selectItem;
+                switch (_json.tag) {
+                    case 'checkbox':
+                        var _index = parseInt($("#" + _json.id + " .layui-input-block div.layui-form-checkbox").index(data.othis[0]));
+                        if ($(data.othis[0]).parent().parent().parent().attr("id") === 'checkbox') {
+                            _index = parseInt($(data.othis[0]).parent().parent().attr("data-index"));
+                        }
+                        for (var i = 0; i < _json.options.length; i++) {
+                            if (i === _index) {
+                                _json.options[i].checked = data.elem.checked;
+                                break;
+                            }
+                        }
+                        that.components[_json.tag].update(_json, that);
+                        break;
+                    default:
+                        break;
+                }
+            });
+
+        }
+
+        /*--------------------------------------------------以下属于非修改内容---------------------------------------------------------*/
+        /*--------------------------------------------------以下属于非修改内容---------------------------------------------------------*/
+
+        Class.prototype.reload = function (id
+            , options) {
+            var that = this;
+            options = options || {};//如果是空的话，就赋值 {}
+            that.render();
+        }
+
+
+        //核心入口 初始化一个 regionSelect 类
+        formDesigner.render = function (options) {
+            var ins = new Class(options);
+            return thisIns.call(ins);
+        };
+
+        /**
+         * data 表示设计区数据
+         * dataSource 表示数据源即一个控件的数据来源
+         *
+         */
+        Class.prototype.config = {
+            version: "1.0.0"
+            , formName: "表单示例"
+            , Author: "谁家没一个小强"
+            , formId: "formPreviewForm"
+            , generateId: 0
+            , data: []
+            , dataSource: {}
+            , formData: {}
+            , globalDisable: false
+            , viewOrDesign: false
+            , formDefaultButton: true
+            , formProperty: {}
+            , selectItem: undefined
+        };
+
+        /* 自动生成ID 当前页面自动排序*/
+        Class.prototype.autoId = function (tag) {
+            var that = this,
+                options = that.config;
+            options.generateId = options.generateId + 1;
+            return tag + '_' + options.generateId;
+        }
+
+        //渲染视图
+        Class.prototype.render = function () {
+            var that = this
+                , options = that.config;
+            if (options.viewOrDesign) {
+                var that = this
+                    , options = that.config;
+                options.elem = $(options.elem);
+                options.id = options.id || options.elem.attr('id') || that.index;
+                options.elem.html('<form  class="layui-form  layui-form-pane" style="height:100%;" id="{0}" lay-filter="{0}"></form>'.format(options.formId));
+                that.renderViewForm();
+            } else {
+                options.elem = $(options.elem);
+                options.id = options.id || options.elem.attr('id') || that.index;
+                options.elem.html(staticField.formDesignerHtml);
+                /* 根据componentsLang渲染组件*/
+                var componentsLangHtml = ""
+                $.each(formField.componentsLang
+                    , function (index
+                        , item) {
+                        componentsLangHtml += '<div class="components-title">{0} </div>'.format(item.name);
+                        componentsLangHtml += '<div class="components-draggable" id="{0}">'.format(item.component);
+                        $.each(item.list
+                            , function (index1
+                                , item1) {
+                                componentsLangHtml += '<ol data-tag="{0}"><div class="icon"><i class="{2}"></i></div><div class="name">{1}</div></ol>'.format(item1.key
+                                    , staticField.lang[item1.key], item1.icon);
+                            });
+                        componentsLangHtml += '</div>';
+                    });
+                $('#components-form-list').append(componentsLangHtml);
+
+                /* 根据templateFormList渲染组件 默认显示5条*/
+                var templateFormListHtml = ""
+                $.each(staticField.templateFormList
+                    , function (index
+                        , item) {
+                        if (index < 5) {
+                            templateFormListHtml += '<div class="item-body"><div class="item-img">';
+                            templateFormListHtml += '<img src="{0}" lay-image-hover="" data-size="635,500" alt="" id="tip{1}"></div>'.format(item.imageUrl, index);
+                            templateFormListHtml += '<div class="item-desc"><span class="item-title">{1}</span><button type="button" class="right-button button--text" data-id="{0}"><span> 加载此模板</span></button></div></div>'.format(index, item.text);
+                            templateFormListHtml += '</div>';
+                            $('#template-form-list').append(templateFormListHtml);
+                        }
+                    });
+
+                // 加载模板事件注册
+                $('body').on('click', '.button--text', function (e) {
+                    var id = $(this).data('id');
+                    layer.confirm('是否加载这个模板？加载后会覆盖设计器当前表单', function (index) {
+                        options.data = [];
+                        Object.assign(options.data, staticField.templateFormList[id].value)
+                        that.renderForm();
+                        layer.close(index);
+                    })
+                });
+                //加载更多模板
+                flow.load({
+                    elem: '#template-form-list'
+                    , done: function (page, next) {
+                        //模拟插入
+                        setTimeout(function () {
+                            var list = [];
+                            next(list.join(''), page < 2); //假设总页数为 6
+                        }, 500);
+                    }
+                });
+                //排序事件注册
+                $.each(formField.componentsLang
+                    , function (index
+                        , item) {
+                        var sortable1 = Sortable.create(document.getElementById(item.component), {
+                            group: {
+                                name: 'formgroup',
+                                pull: 'clone', //克隆本区域元素到其他区域
+                                put: false, //禁止本区域实现拖动或拖入
+                            },
+                            ghostClass: "ghost",
+                            sort: false,
+                            animation: 150,
+                            onEnd: function (evt) {
+                                // console.log('onEnd.foo:', [evt.item, evt.from]);
+                                // console.log(evt.oldIndex);
+                                // console.log(evt.newIndex);
+                                var itemEl = evt.item;
+                                // console.log(itemEl);
+                            }
+                        });
+                    });
+                //表单事件注册
+                var formItemSort = Sortable.create(document.getElementById("formDesignerForm"), {
+                    group: {
+                        name: 'formgroup'
+                    },
+                    handle: '.widget-view-drag',
+                    ghostClass: "ghost",
+                    animation: 200,
+                    onAdd: function (evt) {
+                        if (options.data === undefined) {
+                            return;
+                        }
+                        if (typeof (options.data) === 'string') {
+                            options.data = JSON.parse(options.data);
+                        }
+                        //注意这里的一个bug，newIndex 第一次拖动也是1 第二次拖动也是1
+                        if (options.data.length === 0) {
+                            evt.newIndex = 0;
+                        }
+                        if (evt.item.dataset.id !== undefined) {
+                            /*根据id的新算法 复制一份副本 删除json中的节点 再插入节点*/
+                            var _item = that.findJsonItem(options.data, evt.item.dataset.id);
+                            options.selectItem = _item;
+                            that.deleteJsonItem(options.data, evt.item.dataset.id);
+                            options.data.splice(evt.newIndex + 1, 0, _item);
+                        } else {
+                            var _id = that.autoId(evt.item.dataset.tag);
+                            /* 向现有的表单数据中增加新的数组元素 splice */
+                            var _newitem = that.components[evt.item.dataset.tag].jsonData(_id, evt.newIndex, that);
+                            //如果是 grid 呢，需要知道几列
+                            options.selectItem = _newitem;
+                            options.data.splice(evt.newIndex, 0, _newitem);
+                        }
+                        //局部更新 只要更新 designer 设计区部分
+                        that.renderForm();
+                    },
+                    onEnd: function (evt) {
+                        var newIndex = evt.newIndex;
+                        var oldIndex = evt.oldIndex;
+                        //只有当to的目标容器是 formDesignerForm
+                        if (evt.to.id === 'formDesignerForm') {
+                            that.moveItem(evt.oldIndex, evt.newIndex);
+                        }
+                    }
+                });
+            }
+            //注册预览事件
+            $('.previewForm').on('click', function () {
+                window.localStorage.setItem('layui_form_json', JSON.stringify(options.data));
+                layer.confirm('请选择你要预览页面的方式？', {
+                    btn: ['弹窗', '新页面'] //按钮
+                }, function () {
+                    //iframe窗
+                    layer.open({
+                        type: 2,
+                        title: '表单预览',
+                        btn: ['关闭'], //可以无限个按钮
+                        btn1: function (index, layero) {
+                            layer.close(index);
+                        },
+                        closeBtn: 1, //不显示关闭按钮
+                        shade: [0],
+                        area: ['100%', '100%'],
+                        offset: 'auto', //右下角弹出
+                        anim: 2,
+                        content: ['./preview.html', 'yes'], //iframe的url，no代表不显示滚动条
+                        end: function () { //此处用于演示
+                            //加载结束
+                        }
+                    });
+                }, function () {
+                    window.open("./preview.html");
+                });
+
+            });
+            $('body').append(staticField.importHtml);
+            $('body').append(staticField.exportHtml);
+            //注册导入数据
+            $('.importJson').on('click', function () {
+                document.getElementById('import-json-code').value = JSON.stringify(options.data, null, 4);
+                layer.open({
+                    type: 1
+                    , title: 'JSON模板数据导入'
+                    , id: 'Lay_layer_importjsoncodeview'
+                    , content: $('.importjsoncodeview')
+                    , area: ['800px', '640px']
+                    , shade: false
+                    , resize: false
+                    , success: function (layero, index) {
+                    }
+                    , end: function () {
+                        $('.importjsoncodeview').css("display", "none")
+                    }
+                });
+            });
+            $('#copy-html-code').on('click', function () {
+                var Url2 = document.getElementById("generate-code-view");
+                Url2.select(); // 选择对象
+                document.execCommand("Copy"); // 执行
+                layer.msg('复制成功');
+            });
+            $('#import-json-code').on('click', function () {
+                var _value = document.getElementById("import-json-code-view").value;
+                options.data = JSON.parse(_value);
+                that.renderForm();
+                layer.closeAll();
+                layer.msg('导入成功');
+            });
+            //注册导出数据
+            $('.exportJson').on('click', function () {                
+                document.getElementById('generate-code-view').value = JSON.stringify(options.data, null, 4);
+
+                layer.open({
+                    type: 1
+                    , title: 'JSON 数据导出'
+                    , id: 'Lay_layer_htmlcodeview'
+                    , content: $('.htmlcodeview')
+                    , area: ['800px', '640px']
+                    , shade: false
+                    , resize: false
+                    , success: function (layero, index) {
+
+                    }
+                    , end: function () {
+                        $('.htmlcodeview').css("display", "none")
+                    }
+                });
+            });
+
+            $("#formSave").on('click', function () {
+                if (options.data.length > 0) {
+                    console.log(JSON.stringify(options.data));
+                    window.localStorage.setItem('form_json', JSON.stringify(options.data));
+                    layer.open({
+                        type: 2,
+                        title: '重命名',
+                        shade: 0.1,
+                        area: ['450px', '245px'],
+                        content: './save_form.html'
+                    });
+                } else {
+                    layer.msg("请维护表单内容！", {
+                        icon: 2,
+                        time: 1500
+                    });
+                }
+            });
+
+            $('.generateCode').on('click', function () {
+                var _html = $('<div style="height:100%;width:100%;"></div>');
+                var _script = $('<div style="height:100%;width:100%;"></div>');;
+                that.generateHtml(options.data, _html, _script);
+                var _htmlCode = staticField.htmlCode.format(_html.html(), _script.html());
+                document.getElementById('generate-code-view').value = style_html(_htmlCode, 4, ' ', 400);
+                layer.open({
+                    type: 1
+                    , title: 'HTML代码'
+                    , id: 'Lay_layer_htmlcodeview'
+                    , content: $('.htmlcodeview')
+                    , area: ['800px', '640px']
+                    , shade: false
+                    , resize: false
+                    , success: function (layero, index) {
+                        layer.style(index, {
+                            marginLeft: -220
+                        });
+                    }
+                    , end: function () {
+                        $('.htmlcodeview').css("display", "none")
+                    }
+                });
+
+            });
+            that.renderForm();
+        }
+
+        //递归赋值
+        Class.prototype.replaceNumber = function (value) {
+            value = value.replace(/[^\d]/g, '');
+            if ('' != value) {
+                value = parseInt(value);
+            }
+            return value;
+        }
+
+        /* 触发 grid 的 sortablejs 事件*/
+        Class.prototype.bindGridSortEvent = function (json) {
+            var that = this
+                , options = that.config;
+            var objs = $('#' + json.id + ' .widget-col-list');
+            //遍历他下面的节点
+            for (var i = 0; i < objs.length; i++) {
+                var el = objs[i];
+                var ops = {
+                    group: {
+                        name: 'formgroup'
+                    },
+                    handle: '.widget-view-drag',
+                    ghostClass: "ghost",
+                    animation: 150,
+                    onAdd: function (evt) {
+                        var parentItem = JSON.parse(JSON.stringify(that.findJsonItem(options.data, evt.item.parentElement.parentElement.dataset.id)));
+                        var index = evt.newIndex;
+                        var colIndex = evt.item.parentElement.dataset.index;
+                        if (evt.item.dataset.id != undefined) {
+                            //表示从其他地方移动过来
+                            var _fromItem = JSON.parse(JSON.stringify(that.findJsonItem(options.data, evt.item.dataset.id)));
+                            var _oldid = _fromItem.id;
+                            _fromItem.id = that.autoId(_fromItem.tag);
+                            _fromItem.index = index;
+                            parentItem.columns[colIndex].list.splice(index + 1, 0, _fromItem);
+                            that.findAndCopyJson(options.data, parentItem, evt.item.parentElement.parentElement.dataset.id);
+                            that.deleteJsonItem(options.data, _oldid);
+                        } else {
+                            /* 向指定目标放入数据 splice */
+                            var tag = evt.item.dataset.tag;
+                            _id = that.autoId(tag);
+                            var _newitem = that.components[tag].jsonData(_id, evt.newIndex, that);
+                            _newitem.index = index;
+                            parentItem.columns[colIndex].list.splice(index + 1, 0, _newitem);
+                            that.findAndCopyJson(options.data, parentItem, evt.item.parentElement.parentElement.dataset.id);
+                            options.selectItem = _newitem;
+                        }
+                        that.renderForm();
+                    },
+                    //拖动结束
+                    onEnd: function (evt) {
+                        //console.log(evt);
+                    }
+                };
+                var gridSortable = Sortable.create(el, ops);
+            }
+        };
+
+        /* 重新渲染视图区*/
+        Class.prototype.renderViewForm = function () {
+            var that = this
+                , options = that.config;
+            var elem = $('#' + options.formId);            
+            //清空
+            elem.empty();
+            that.renderComponents(options.data, elem);
+            if (options.formDefaultButton) {
+                elem.append(staticField.formDefaultButton);
+            }
+            that.setFormData(options.formData);
+            form.render();//一次性渲染表单
+        }
+
+        /* 生成 Html 代码 */
+        Class.prototype.generateHtml = function (jsondata, elem, scriptHtml) {
+            var that = this
+                , options = that.config;
+            $.each(jsondata, function (index, item) {
+                elem.append(that.components[item.tag].generateHtml(item, that));
+                if (item.tag === 'grid') {
+                    $.each(item.columns, function (index2, item2) {
+                        //获取当前的 DOM 对象
+                        if (item2.list.length > 0) {
+                            var elem2 = elem.find('#' + item.id + ' .widget-col-list.column' + item.id + index2);
+                            that.generateHtml(item2.list, elem2, scriptHtml);
+                        }
+                    });
+                } else {
+                    scriptHtml.append(that.components[item.tag].generateScript(item, that));
+                }
+            });
+        }
+
+        //获取表单数据回调
+        Class.prototype.setFormData = function (json) {
+            var that = this,
+                options = that.config;
+            //获取表单区域所有值
+            for (let key in json) {
+                if (key.indexOf("[") != -1 && key.indexOf("]") != -1) {
+                    var check = key.substring(0, key.indexOf("["));
+                    var item = that.findJsonItem(options.data, check);
+                    if (item === undefined) {
+                        continue;
+                    }
+                    that.components[item.tag].update(item, that);
+                    continue;
+                }
+                var item = that.findJsonItem(options.data, key);                
+                if (item === undefined) {
+                    continue;
+                }
+                switch (item.tag) {
+                    case 'editor':
+                    case 'rate':
+                    case 'slider':
+                    case 'labelGeneration':
+                    case 'iconPicker':
+                    case 'cron':
+                    case 'colorpicker':
+                        item.defaultValue = json[key];
+                        that.components[item.tag].update(item, that);
+                        break;
+                    case 'sign':
+                        item.data = json[key];
+                        that.components[item.tag].update(item, that);
+                        break;
+                    default:
+                        break;
+                }
+            }
+            if (options.viewOrDesign) {
+                form.val(options.formId, json);
+            } else {
+                form.val("formPreviewForm", json);
+            }
+            options.formData = json;
+            return json;
+        }
+
+        //获取表单数据回调
+        Class.prototype.getFormData = function () {
+
+            var that = this,
+                options = that.config;
+
+            //获取表单区域所有值
+            // var json = form.val(that.config.formId);
+
+            var json = form.val();
+
+            
+
+            for (let key in iceEditorObjects) {
+                json[key] = iceEditorObjects[key].getHTML();
+            }
+            for (let key in labelGenerationObjects) {
+                json[key] = labelGenerationObjects[key].getData();
+            }
+            for (let key in signObjects) {
+                json[key] = signObjects[key];
+            }
+            delete json.file;
+
+            return json;
+        }
+
+        //递归改变禁用属性
+        Class.prototype.findItemToDisable = function (jsondata) {
+            var that = this
+                , options = that.config;
+            $.each(jsondata, function (index, item) {
+                if (item.tag === 'grid') {
+                    $.each(item.columns, function (index2, item2) {
+                        //获取当前的 DOM 对象
+                        if (item2.list.length > 0) {
+                            that.findItemToDisable(item2.list);
+                        }
+                    });
+                } else {
+                    item.disabled = true;
+                    item.readonly = true;
+                }
+            });
+        }
+
+        //递归改变禁用属性
+        Class.prototype.findItemToNoDisable = function (jsondata) {
+            var that = this
+                , options = that.config;
+            $.each(jsondata, function (index, item) {
+                if (item.tag === 'grid') {
+                    $.each(item.columns, function (index2, item2) {
+                        //获取当前的 DOM 对象
+                        if (item2.list.length > 0) {
+                            that.findItemToNoDisable(item2.list);
+                        }
+                    });
+                } else {
+                    item.disabled = false;
+                    item.readonly = false;
+                }
+            });
+        }
+
+        //全局禁用
+        Class.prototype.globalDisable = function () {
+            var that = this
+                , options = that.config;
+            that.findItemToDisable(options.data);
+            that.renderForm();
+        }
+
+        //全局取消禁用
+        Class.prototype.globalNoDisable = function () {
+            var that = this
+                , options = that.config;
+            that.findItemToNoDisable(options.data);
+            that.renderForm();
+        }
+
+        /* 重新渲染设计区*/
+        Class.prototype.renderForm = function () {
+            var that = this
+                , options = that.config;
+            if (options.viewOrDesign) {
+                var that = this
+                    , options = that.config;
+                options.elem = $(options.elem);
+                options.id = options.id || options.elem.attr('id') || that.index;
+                options.elem.html('<form  class="layui-form  layui-form-pane" style="height:100%;" id="{0}" lay-filter="{0}"></form>'.format(options.formId));
+                // options.elem.html('<div class="layui-form-pane mainBox" id="{0}"></div>'.format(options.formId));
+                that.renderViewForm();
+            } else {
+                var elem = $('#formDesignerForm');
+                //清空
+                elem.empty();
+                //渲染组件
+                that.renderComponents(options.data, elem);
+                //选中的节点只有一个
+                if (options.selectItem !== undefined) {
+                    var _draghtml = '<div class="widget-view-action"  id="widget-view-action"><i class="layui-icon layui-icon-file"></i><i class="layui-icon layui-icon-delete"></i></div><div class="widget-view-drag" id="widget-view-drag"><i class="layui-icon layui-icon-screen-full"></i></div>';
+                    var len = $('#' + options.selectItem.id).children().length;
+                    if ($('#widget-view-action')) {//已存在
+                        $('#widget-view-action').remove();
+                    }
+                    $('#' + options.selectItem.id).children(len - 1).after(_draghtml);
+                    $('#formDesignerForm .layui-form-item').removeClass('active');
+                    //给当前元素增加class
+                    $('#' + options.selectItem.id).addClass('active');
+                    that.bindPropertyEvent(options.selectItem);
+                }
+                /* 向 节点点击添加 click 动作 */
+                that.addClick();
+                /* 向 拷贝 删除 按钮添加 click 动作 */
+                that.addCopyDeleteClick();
+                form.render();
+            }
+        }
+
+        /* 递归渲染组件 */
+        Class.prototype.renderComponents = function (jsondata, elem) {
+            var that = this
+                , options = that.config;
+            $.each(jsondata, function (index, item) {
+                item.index = index;//设置index 仅仅为了传递给render对象，如果存在下级子节点那么 子节点的也要变动
+                if (options.selectItem === undefined) {
+                    that.components[item.tag].render(item, false, elem, that);
+                } else {
+                    if (options.selectItem.id === item.id) {
+                        that.components[item.tag].render(item, true, elem, that);
+                        //显示当前的属性
+                        that.components[item.tag].property(item, that);
+                        that.bindPropertyEvent(item);
+                    } else {
+                        that.components[item.tag].render(item, false, elem, that);
+                    }
+                }
+                if (item.tag === 'grid') {
+                    that.bindGridSortEvent(item);
+                    $.each(item.columns, function (index2, item2) {
+                        //获取当前的 DOM 对象
+                        if (item2.list.length > 0) {
+                            var elem2 = elem.find('#' + item.id + ' .widget-col-list.column' + item.id + index2);
+                            that.renderComponents(item2.list, elem2);
+                        }
+                    });
+                }
+            });
+        }
+
+        /* 加入copy选项删除 */
+        Class.prototype.addCopyDeleteClick = function () {
+            var that = this
+                , options = that.config;
+            if (options.data === undefined) {
+                return;
+            }
+            if (typeof (options.data) === 'string') {
+                options.data = JSON.parse(options.data);
+            }
+            //复制当前节点
+            $('#formDesignerForm  .layui-form-item .widget-view-action .layui-icon-file').on('click', function (e) {
+                e.stopPropagation();
+                //在json中插入
+                if (options.data === undefined) {
+                    return;
+                }
+                if (typeof (options.data) === 'string') {
+                    options.data = JSON.parse(options.data);
+                }
+                var _id = document.elementFromPoint(e.pageX, e.pageY).parentElement.parentElement.dataset.id;
+                if (_id !== undefined) {
+                    options.selectItem = that.copyJsonAfterItem(options.data, _id);
+                }
+                that.renderForm();
+            });
+            $('#formDesignerForm  .layui-form-item .layui-icon-delete').on('click', function (e) {
+                e.stopPropagation();
+                //获取当前组件的组件id
+                var _id = document.elementFromPoint(e.pageX, e.pageY).parentElement.parentElement.dataset.id;
+                if (_id !== undefined) {
+                    options.selectItem = that.deleteJsonItem(options.data, _id);
+                }
+                that.renderForm();
+            });
+        };
+
+        /* 如果是grid布局控件 就显示不一样的样式 */
+        Class.prototype.addClick = function (evt) {
+            var that = this
+                , options = that.config;
+            $("#formDesignerForm .layui-form-item").on('click', function (e) {
+                //当 div 为嵌套关系的时候 阻止事件冒泡
+                e.preventDefault();
+                e.stopPropagation();
+                var index = parseInt($(this)[0].dataset.index);
+                var _id = $(this)[0].dataset.id;
+                options.selectItem = that.findJsonItem(options.data, _id);
+                var tag = $(this)[0].dataset.tag;
+
+                //显示当前的属性
+                that.components[tag].property(options.selectItem, that);
+                that.bindPropertyEvent();
+                //移除 #formDesignerForm .layui-form-item 下所有的 active
+                $('#formDesignerForm .layui-form-item').removeClass('active');
+                //给当前元素增加class
+                $(this).addClass('active');
+                var _draghtml = '<div class="widget-view-action"  id="widget-view-action"><i class="layui-icon layui-icon-file"></i><i class="layui-icon layui-icon-delete"></i></div><div class="widget-view-drag" id="widget-view-drag"><i class="layui-icon layui-icon-screen-full"></i></div>';
+                var len = $(this).children().length;
+                if (len <= 12) {
+                    //先删除元素
+                    $("#formDesignerForm .layui-form-item .widget-view-action").remove();
+                    $("#formDesignerForm .layui-form-item .widget-view-drag").remove();
+                    if ($('#widget-view-action')) {//已存在
+                        $('#widget-view-action').remove();
+                    }
+                    $(this).children(len - 1).after(_draghtml);
+                }
+                /* 向 拷贝 删除 按钮添加 click 动作 */
+                that.addCopyDeleteClick();
+                //重新渲染
+                form.render();
+            });
+        };
+
+        //移动视图
+        Class.prototype.moveItem = function (oldIndex, newIndex) {
+            var that = this
+                , options = that.config;
+            var newData = options.data[newIndex];
+            var oldData = options.data[oldIndex];
+            options.data[newIndex] = oldData;
+            options.data[oldIndex] = newData;
+        }
+
+        /* 根据id返回json中的节点*/
+        Class.prototype.findJsonItem = function (json, id) {
+            var that = this,
+                options = that.config;
+            for (var i = 0; i < json.length; i++) {
+                if (json[i].id === id) {
+                    return json[i];
+                } else {
+                    if (json[i].tag === 'grid') {
+                        for (var j = 0; j < json[i].columns.length; j++) {
+                            if (json[i].columns[j].list.length > 0) {
+                                var _item = that.findJsonItem(json[i].columns[j].list, id);
+                                if (_item) {
+                                    return _item;
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+            return undefined;
+        }
+
+
+
+        /* 复制json中的节点并返回上一个节点*/
+        Class.prototype.copyJsonAfterItem = function (json, id) {
+            var that = this,
+                options = that.config;
+            for (var i = 0; i < json.length; i++) {
+                if (json[i].id === id) {
+                    var _newjson = JSON.parse(JSON.stringify(json[i]));
+                    _newjson.id = that.autoId(_newjson.tag);
+                    json.splice(i + 1, 0, _newjson);
+                    return json[i];
+                } else {
+                    if (json[i].tag === 'grid') {
+                        for (var j = 0; j < json[i].columns.length; j++) {
+                            if (json[i].columns[j].list.length > 0) {
+                                var _item = that.copyJsonAfterItem(json[i].columns[j].list, id);
+                                if (_item) {
+                                    return _item;
+                                }
+                            }
+                        }
+                    }
+                }
+
+            }
+            return undefined;
+        };
+
+        /* 删除json中的节点并返回上一个节点*/
+        Class.prototype.deleteJsonItem = function (json, id) {
+            var that = this,
+                options = that.config;
+            for (var i = 0; i < json.length; i++) {
+                if (json[i].id === id) {
+                    json.splice(i, 1);
+                    if (i > 0) {
+                        return json[i - 1];
+                    }
+                    break;
+                } else {
+                    if (json[i].tag === 'grid') {
+                        for (var j = 0; j < json[i].columns.length; j++) {
+                            if (json[i].columns[j].list.length > 0) {
+                                that.deleteJsonItem(json[i].columns[j].list, id);
+                            }
+                        }
+                    }
+                }
+
+
+            }
+            return undefined;
+        };
+
+        /* 自动生成ID 当前页面自动排序*/
+        Class.prototype.autoId = function (tag) {
+            var that = this,
+                options = that.config;
+            options.generateId = options.generateId + 1;
+            var findJsonItem = that.findJsonItem(options.data, tag + '_' + options.generateId);
+            if (findJsonItem != undefined) {
+                return that.autoId(tag);
+            } else {
+                return tag + '_' + options.generateId;
+            }
+        }
+
+        //递归赋值
+        Class.prototype.findAndCopyJson = function (json, parentItem, id) {
+            var that = this;
+            for (var i = 0; i < json.length; i++) {
+                if (json[i].id === id) {
+                    json[i] = parentItem;
+                } else {
+                    if (json[i].tag === 'grid') {
+                        for (var j = 0; j < json[i].columns.length; j++) {
+                            if (json[i].columns[j].list.length > 0) {
+                                that.findAndCopyJson(json[i].columns[j].list, parentItem, id);
+                            }
+                        }
+                    }
+                }
+            }
+        }
+
+
+        /* 此方法最后一道 commom.js 中 */
+        String.prototype.format = function (args) {
+            var result = this;
+            if (arguments.length > 0) {
+                if (arguments.length == 1 && typeof (args) == "object") {
+                    for (var key in args) {
+                        if (args[key] != undefined) {
+                            var reg = new RegExp("({" + key + "})"
+                                , "g");
+                            result = result.replace(reg
+                                , args[key]);
+                        }
+                    }
+                } else {
+                    for (var i = 0; i < arguments.length; i++) {
+                        if (arguments[i] != undefined) {
+                            var reg = new RegExp("({[" + i + "]})"
+                                , "g");
+                            result = result.replace(reg
+                                , arguments[i]);
+                        }
+                    }
+                }
+            }
+            return result;
+        }
+
+        exports('formDesignerView'
+            , formDesigner);
+    });
\ No newline at end of file
diff --git a/WebRoot/view/tb/form/ayq/modules/staticFieldView.js b/WebRoot/view/tb/form/ayq/modules/staticFieldView.js
new file mode 100644
index 00000000..06f157d2
--- /dev/null
+++ b/WebRoot/view/tb/form/ayq/modules/staticFieldView.js
@@ -0,0 +1,308 @@
+layui.define(['layer'], function (exports) {
+
+    var staticField = {
+        lang: {
+            id: "标识",
+            label: "标题",
+            index: "序号",
+            tag: "表单类型",
+            tagIcon: '图标',
+            width: '宽度',
+            height: "高度",
+            span: '网格宽度',
+            placeholder: "placeholder",
+            defaultValue: "默认值",
+            dateDefaultValue: '默认时间',
+            labelWidth: "文本宽度",
+            clearable: "是否清楚",
+            prepend: "前缀",
+            append: "追加",
+            prefixIcon: '前缀图标',
+            suffixIcon: '后缀图标',
+            maxlength: "最大长度",
+            showWordLimit: "是否限制字符",
+            readonly: "只读",
+            disabled: "禁用",
+            required: "必填",
+            columns: "列数",
+            options: "选项",
+            switchValue: "默认值",
+            maxValue: "最大值",
+            minValue: "最小值",
+            dataMaxValue: "最大日期",
+            dataMinValue: "最小日期",
+            stepValue: "步长",
+            dateType: "日期类型",
+            dateFormat: "日期格式",
+            half: "显示半星",
+            theme: "皮肤",
+            rateLength: "星星个数",
+            interval: "间隔毫秒",
+            startIndex: "开始位置",
+            full: "是否全屏",
+            arrow: "鼠标样式",
+            contents: "内容",
+            document: '帮助文档',
+            input: "输入框",
+            select: "下拉",
+            checkbox: "多选组",
+            radio: "单选组",
+            date: "日期",
+            editor: "iceEditor编辑器",
+            slider: "滑块",
+            image: "图片",
+            grid: "一行多列",
+            colorpicker: "颜色选择器",
+            textarea: "多行文本",
+            rate: "评分控件",
+            switch: "开关",
+            password: "密码框",
+            carousel: "轮播",
+            text: "显示文本",
+            uploadUrl: "上传路径",
+            expression: "验证",
+            file: "文件",
+            autoplay: "自动切换",
+            anim: "切换方式",
+            arrow: "切换箭头",
+            tab: "tab选项卡",
+            tabHeaders: "tab标题",
+            isInput: "显示输入框",
+            dateRange: "日期范围",
+            dateRangeDefaultValue: "默认范围",
+            menu: "头部菜单",
+            numberInput: "排序文本框",
+            iconPicker: "图标选择器",
+            iconPickerSearch: "是否搜索",
+            iconPickerPage: "是否分页",
+            iconPickerLimit: "显示数量",
+            iconPickerCellWidth: "图标宽度",
+            cron: "Cron表达式",
+            cronUrl: "运行路径",
+            labelGeneration: "标签组件",
+            isEnter: "是否回车",
+            buttonIcon: "按钮图标",
+            buttonType: "按钮类型",
+            buttonSize: "组件尺寸",
+            bottom: "按钮组件",
+            buttonVlaue: "按钮文字",
+            sign: "sign签名组件",
+            hideLabel: "隐藏标签",
+            colorSelection: "颜色选择",
+            blockquote: "便签信息",
+            line: "分割线",
+            spacing: "间距",
+            whiteSpace: "组件高度",
+            textField: "HTML",
+            dimension: "是否为维度",
+            fieldType: "字段类型"
+
+        },
+        templateFormList: [
+            
+        ],
+        fieldTypes: [{ text: '文本', value: "1" }
+            , { text: '数值', value: '2' }
+            , { text: '小数', value: '3' }
+            , { text: '日期', value: '4' }
+        ],
+        expressions: [{ text: '默认', value: "" }
+            , { text: '数字', value: 'number' }
+            , { text: '邮箱', value: 'email' }
+            , { text: '手机', value: 'phone' }
+            , { text: '身份证', value: 'identity' }
+            , { text: '日期', value: 'date' }
+            , { text: '网址', value: 'url' }
+            , { text: '密码', value: 'pass' }
+        ], anims: [{ text: '左右切换', value: 'default' }
+            , { text: '上下切换', value: 'updown' }
+            , { text: '渐隐渐显切换', value: 'fade' }
+        ], arrows: [{ text: '悬停显示', value: 'hover' }
+            , { text: '始终显示', value: 'always' }
+            , { text: '始终不显示', value: 'none' }]
+        , dateTypes: [{ text: '年选择器', value: 'year' }
+            , { text: '年月选择器', value: 'month' }
+            , { text: '时间选择器', value: 'time' }
+            , { text: '日期选择器', value: 'date' }
+            , { text: '日期时间选择器', value: 'datetime' }]
+        , buttonTypes: [{ text: '原始', value: 'layui-btn-primary' }
+            , { text: '默认', value: "" }
+            , { text: '百搭', value: 'layui-btn-normal' }
+            , { text: '暖色', value: 'layui-btn-warm' }
+            , { text: '警告', value: ' layui-btn-danger' }]
+        , buttonSizes: [{ text: '大型', value: 'layui-btn-lg' }
+            , { text: '默认', value: "" }
+            , { text: '小型', value: 'layui-btn-sm' }
+            , { text: '迷你', value: 'layui-btn-xs' }]
+        , dateFormats: ["yyyy年MM月", "yyyy-MM-dd", "dd/MM/yyyy", "yyyyMMdd", "yyyy-MM-dd HH:mm:ss", "yyyy年MM月dd日 HH时mm分ss秒"]
+        , iceEditMenus: [
+            { value: 'backColor', text: '字体背景颜色' }, { value: 'fontSize', text: '字体大小' }, { value: 'foreColor', text: '字体颜色' }, { value: 'bold', text: '粗体' },
+            { value: 'italic', text: '斜体' }, { value: 'underline', text: '下划线' }, { value: 'strikeThrough', text: '删除线' }, { value: 'justifyLeft', text: '左对齐' },
+            { value: 'justifyCenter', text: '居中对齐' }, { value: 'justifyRight', text: '右对齐' }, { value: 'indent', text: '增加缩进' }, { value: 'outdent', text: '减少缩进' },
+            { value: 'insertOrderedList', text: '有序列表' }, { value: 'insertUnorderedList', text: '无序列表' }, { value: 'superscript', text: '上标' }, { value: 'subscript', text: '下标' },
+            { value: 'createLink', text: '创建连接' }, { value: 'unlink', text: '取消连接' }, { value: 'hr', text: '水平线' }, { value: 'face', text: '表情' }, { value: 'table', text: '表格' },
+            { value: 'files', text: '附件' }, { value: 'music', text: '音乐' }, { value: 'video', text: '视频' }, { value: 'insertImage', text: '图片' },
+            { value: 'removeFormat', text: '格式化样式' }, { value: 'code', text: '源码' }, { value: 'line', text: '菜单分割线' }
+        ],
+        formDesignerHtml: '<div class="layui-layout layui-layout-admin">\n' +
+            '<div style="background-color: #fff;display: flex;justify-content: space-between;align-items:center;margin: 0 5px;border-bottom:1px solid #E6E6E6;">\n' +
+            '<div class="layui-layer-title" style="font-weight: bolder;border-bottom: 0;">创建任务</div>\n' +
+            '<div style="width: 140px;">\n' +
+            '<button type="button" class="layui-btn layui-btn-sm" id="formSave">保存</button>\n' +
+            '<button type="button" class="layui-btn layui-btn-primary layui-btn-sm" lay-on="returnList">返回</button>\n' +
+            '</div>\n' +
+            '</div>\n' +
+            '    <div class="layui-side" style="top: 40px;">\n' +
+            '        <div class="layui-side-scroll" style="width: 260px;">\n' +
+            '            <!-- 左侧导航区域（可配合layui已有的垂直导航） -->\n' +
+            '            <div class="layui-tab layui-tab-brief" lay-filter="components-list">\n' +
+            '                <ul class="layui-tab-title">\n' +
+            '                    <li class="layui-this">组件</li>\n' +
+
+            '                </ul>\n' +
+            '                <div class="layui-tab-content">\n' +
+            '                    <div class="layui-tab-item layui-show">\n' +
+            '                        <div class="components-list" id="components-form-list">\n' +
+            '                        </div>\n' +
+            '                    </div>\n' +
+            '                    <div class="layui-tab-item" >\n' +
+            '                        <div id="template-form-list" class="components-list">\n' +
+            '                        </div>\n' +
+            '                    </div>\n' +
+            '                </div>\n' +
+            '            </div>\n' +
+            '        </div>\n' +
+            '    </div>\n' +
+            '    <div class="layui-body">\n' +
+            '        <!-- 内容主体区域 -->\n' +
+            '        <form class="layui-form layui-form-pane" style="height:98%;">\n' +
+            '            <div class="layui-form" id="formDesignerForm" lay-filter="formDesignerForm">\n' +
+            '                <div class="layui-row layui-empty">\n' +
+            '                    从左侧拖拽控件到此设计区域来添加字段\n' +
+            '                </div>\n' +
+            '            </div>\n' +
+            '            <button type="button" class="layui-btn" style="display: none" lay-submit lay-filter="*">立即提交</button>\n' +
+            '        </form>\n' +
+            '    </div>\n' +
+            '    <div class="layui-side-right"  style="top: 40px;">\n' +
+            '        <div class="layui-side-scroll" style="width: 350px;">\n' +
+            '            <!-- 属性导航 -->\n' +
+            '            <form class="layui-form  layui-form-pane">\n' +
+            '                <div class="layui-tab layui-tab-brief" lay-filter="form-attr">\n' +
+            '                    <ul class="layui-tab-title">\n' +
+            '                        <li class="layui-this">字段设置</li>\n' +
+            '                        <li>表单设置</li>\n' +
+            '                    </ul>\n' +
+            '                    <div class="layui-tab-content">\n' +
+            '                        <div class="layui-tab-item layui-show" id="columnProperty">\n' +
+            '                        </div>\n' +
+            '                        <div class="layui-tab-item" id="formProperty">\n' +
+            '                            <!--表单ID-->\n' +
+            '                            <div class="layui-form-item">\n' +
+            '                                <label class="layui-form-label">表单ID</label>\n' +
+            '                                <div class="layui-input-block">\n' +
+            '                                    <input type="text" name="formId" required="" lay-verify="required"\n' +
+            '                                           placeholder="请输入表单ID" autocomplete="off" class="layui-input">\n' +
+            '                                </div>\n' +
+            '                            </div>\n' +
+            '                            <!--//表单ID-->\n' +
+            '                            <!--表单名称-->\n' +
+            '                            <div class="layui-form-item">\n' +
+            '                                <label class="layui-form-label">表单名称</label>\n' +
+            '                                <div class="layui-input-block">\n' +
+            '                                    <input type="text" name="formName" required="" lay-verify="required"\n' +
+            '                                           placeholder="请输入表单名称" autocomplete="off" class="layui-input">\n' +
+            '                                </div>\n' +
+            '                            </div>\n' +
+            '                            <!--//end-->\n' +
+            '                        </div>\n' +
+            '                    </div>\n' +
+            '                </div>\n' +
+            '            </form>\n' +
+            '        </div>\n' +
+            '    </div>\n' +
+            '</div>',
+        // formDefaultButton: '<div class="layui-form-item">\n' +
+        //     '    <div class="layui-input-block">\n' +
+        //     '        <button type="submit" class="layui-btn" lay-submit="" lay-filter="demo1">提交</button>\n' +
+        //     '        <button type="reset" class="layui-btn layui-btn-primary">重置</button>\n' +
+        //     '    </div>\n' +
+        //     '</div>',
+        
+        formDefaultButton: '',
+        // formDefaultButton: ' <div class="bottom">\n' +
+        //     '<div class="button-container">\n' +
+        //     '    <button type="submit" class="layui-btn layui-btn-sm" lay-submit="" lay-filter="demo1">\n' +
+        //     '        <i class="layui-icon layui-icon-ok"></i>\n' +
+        //     '        提交\n' +
+        //     '    </button>\n' +
+        //     '</div>\n' +
+        // ' </div>',
+        importHtml: '<div class="importjsoncodeview layui-layer-wrap" style="display: none;">\n' +
+            '    <textarea class="site-demo-text" id="import-json-code-view"></textarea>\n' +
+            '    <a href="javascript:;" class="layui-btn layui-btn-normal" style="margin-right:20px;" id="import-json-code">导入数据</a>\n' +
+            '</div>',
+        exportHtml: '<div class="htmlcodeview layui-layer-wrap" style="display: none;">\n' +
+            '    <textarea class="site-demo-text" id="generate-code-view"></textarea>\n' +
+            '    <a href="javascript:;" class="layui-btn layui-btn-normal" style="margin-right:20px;" id="copy-html-code">复制代码</a>\n' +
+            '</div>',
+        htmlCode: '<html>\n' +
+            '<head>\n' +
+            '    <meta charset="utf-8">\n' +
+            '    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">\n' +
+            '    <title>表单设计器代码</title>\n' +
+            '    <link rel="stylesheet" href="https://www.layuicdn.com/layui-v2.5.6/css/layui.css"/>\n' +
+            '    <link rel="stylesheet" href="./ayq/modules/cron.css" />\n' +
+            '    <link rel="stylesheet" href="./ayq/modules/labelGeneration.css" />\n' +
+            '    <link rel="stylesheet" href="./ayq/modules/formDesigner.css" />\n' +
+            '</head>\n' +
+            '<body>\n' +
+            '<div id="testdemo" style="margin: 10px 20px;">\n' +
+            '    <form class="layui-form" style="height:100%;" id="formPreviewForm">\n' +
+            '        {0}\n' +
+            '        <div class="layui-form-item">\n' +
+            '            <div class="layui-input-block">\n' +
+            '                <button type="submit" class="layui-btn" lay-submit="" lay-filter="formPreviewForm">提交</button>\n' +
+            '                <button type="reset" class="layui-btn layui-btn-primary">重置</button>\n' +
+            '            </div>\n' +
+            '        </div>\n' +
+            '    </form>\n' +
+            '</div>\n' +
+            '<script type="text/javascript" src="https://www.layuicdn.com/layui-v2.5.6/layui.js"></script>\n' +
+            '<script type="text/javascript" src="./ayq/modules/Sortable/Sortable.js"></script>\n' +
+            '<script type="text/javascript" src="./ayq/modules/numberInput/numberInput.js"></script>\n' +
+            '<script type="text/javascript" src="./ayq/modules/icon/iconPicker.js"></script>\n' +
+            '<script type="text/javascript" src="./ayq/modules/cron/cron.js"></script>\n' +
+            '<script type="text/javascript" src="./ayq/modules/iceEditor/iceEditor.js"></script>\n' +
+            '<script type="text/javascript" src="./ayq/modules/labelGeneration/labelGeneration.js"></script>\n' +
+            '<script type="text/javascript" src="./ayq/js/config.js?v=100"></script>\n' +
+            '<script>\n' +
+            '    layui.use(["layer", "laytpl", "element", "form", "slider", "laydate", "rate", "colorpicker", "layedit", "carousel", "upload", "formField", "numberInput", "iconPicker", "cron", "labelGeneration"], function () {\n' +
+            '        var $ = layui.jquery\n' +
+            '            , layer = layui.layer\n' +
+            '            , laytpl = layui.laytpl\n' +
+            '            , setter = layui.cache\n' +
+            '            , element = layui.element\n' +
+            '            , slider = layui.slider\n' +
+            '            , laydate = layui.laydate\n' +
+            '            , rate = layui.rate\n' +
+            '            , colorpicker = layui.colorpicker\n' +
+            '            , carousel = layui.carousel\n' +
+            '            , form = layui.form\n' +
+            '            , upload = layui.upload\n' +
+            '            , layedit = layui.layedit\n' +
+            '            , formField = layui.formField\n' +
+            '            , hint = layui.hint\n' +
+            '            , numberInput = layui.numberInput\n' +
+            '            , iconPicker = layui.iconPicker\n' +
+            '            , cron = layui.cron\n' +
+            '            , labelGeneration = layui.labelGeneration;\n' +
+            '        {1}\n' +
+            '    });\n' +
+            '</script>\n' +
+            '</body>\n' +
+            '</html>'
+    }
+    exports('staticFieldView', staticField);
+
+});
\ No newline at end of file
diff --git a/WebRoot/view/tb/form/report.html b/WebRoot/view/tb/form/report.html
index ef675543..41f9b8ce 100644
--- a/WebRoot/view/tb/form/report.html
+++ b/WebRoot/view/tb/form/report.html
@@ -117,8 +117,7 @@
                   })
                 }
                 , done: function (res) {
-                  layer.close(layer.msg());//关闭上传提示窗口 
-                  console.log(res);
+                  layer.close(layer.msg());//关闭上传提示窗口                   
 
                   //上传完毕
                   $('#uploader-list-' + res.input_id).append(
@@ -147,8 +146,7 @@
                 , bindAction: '#listAction-' + filesData[i].select.substring(4)
                 , choose: function (obj) {
                   var that = this;
-                  var files = this.files = obj.pushFile(); //将每次选择的文件追加到文件队列
-                  console.log(that);
+                  var files = this.files = obj.pushFile(); //将每次选择的文件追加到文件队列                  
                   //读取本地文件
                   obj.preview(function (index, file, result) {
                     var tr = $(['<tr id="upload-' + index + '">'
@@ -170,22 +168,18 @@
                     that.elemList.append(tr);
                     element.render('progress'); //渲染新加的进度条组件
                   });
-                }, done: function (res, index, upload) { //成功的回调
-                  console.log(res);
+                }, done: function (res, index, upload) { //成功的回调                  
                   var that = this;
-
                   var tr = that.elemList.find('tr#upload-' + index)
                     , tds = tr.children();
                   tds.eq(3).html(''); //清空操作
                   delete this.files[index]; //删除文件队列已经上传成功的文件
                   return;
-                  //}
                   this.error(index, upload);
                 }, allDone: function (obj) { //多文件上传完毕后的状态回调      
                   setTimeout(function () {
                     reloadFiles(file_input_id);
                   }, 700);
-
                 }, error: function (index, upload) { //错误回调                
                   var that = this;
                   var tr = that.elemList.find('tr#upload-' + index)
diff --git a/WebRoot/view/tb/form/view.html b/WebRoot/view/tb/form/view.html
new file mode 100644
index 00000000..b9060607
--- /dev/null
+++ b/WebRoot/view/tb/form/view.html
@@ -0,0 +1,380 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+  <title>Layui</title>
+  <link rel="stylesheet" href="./layui/css/layui.css" />
+  <link rel="stylesheet" href="./ayq/modules/formDesigner.css" />
+  <link rel="stylesheet" href="./ayq/modules/cron.css" />
+  <link rel="stylesheet" href="./ayq/modules/labelGeneration.css" />
+  <style>
+    .mainBox {
+      width: 98%;
+      position: absolute;
+      top: 0px;
+      left: 0px;
+      bottom: 50px;
+      overflow: auto;
+      padding: 5px;
+    }
+
+    .bottom {
+      width: 100%;
+      position: absolute;
+      bottom: 0px;
+      left: 0px;
+      height: 50px;
+      line-height: 50px;
+      background-color: #F8F8F8;
+      border-top: 1px solid #eee;
+    }
+
+    .button-container {
+      position: absolute;
+      right: 15px;
+    }
+  </style>
+</head>
+
+<body>
+  
+  <div id="testdemo" style="margin: 10px 10px;">
+
+  </div>
+  
+
+  <script type="text/javascript" src="./layui/layui.js"></script>
+  <script type="text/javascript" src="./ayq/modules/Sortable/Sortable.js"> </script>
+  <script type="text/javascript" src="./ayq/modules/iceEditor/iceEditor.js"></script>
+
+  <script>
+    var demojs = [];
+    //JavaScript代码区域
+    layui.config(
+      { base: './ayq/modules/' }).use(['formDesignerView', 'element', 'form', 'layer', 'upload'], function () {
+        var layer = layui.layer;
+        var $ = layui.jquery;
+        var upload = layui.upload;
+        var index = layui.index;
+        var formDesigner = layui.formDesignerView;
+        var form = layui.form;
+        var render;
+        var element = layui.element
+
+        var jobId = GetQueryString("job_id");
+
+
+        function unique(x) {
+          let obj = {};
+          let res = [];
+          let len = x.length; // 缓存数组长度
+          for (let i = 0; i < len; i++) {
+            let item = x[i].select;
+            if (!obj.hasOwnProperty(item)) { // 使用hasOwnProperty判断属性是否存在
+              res.push(x[i]);
+            }
+            obj[item] = item;
+          }
+          return res;
+        }
+
+
+        $.ajax({
+          url: "/QingLong/collect/getJob?job_id=" + jobId,
+          async: false,
+          type: 'GET',
+          success: function (res) {
+            demojs = JSON.parse(res.form_json);
+            render = formDesigner.render({
+              elem: '#testdemo',
+              data: demojs,
+              viewOrDesign: true
+            });
+            var images = render.getImages();
+            images = unique(images);
+            for (var i = 0; i < images.length; i++) {
+              upload.render({
+                elem: '#' + images[i].select
+                , url: '/QingLong/collect/uploadFile'
+                , data: { job_id: jobId, input_id: images[i].select.substring(5), type_id: 2 }
+                , multiple: true
+                , before: function (obj) {
+                  layer.msg('图片上传中...', {
+                    icon: 16,
+                    shade: 0.01,
+                    time: 0
+                  })
+                }
+                , done: function (res) {
+                  layer.close(layer.msg());//关闭上传提示窗口                   
+
+                  //上传完毕
+                  $('#uploader-list-' + res.input_id).append(
+                    '<div id="' + res.file_id + '" class="file-iteme">' +
+                    '<div class="handle"><i class="layui-icon layui-icon-delete" onclick=delimgs("' + res.file_id + '")></i></div>' +
+                    '<img style="width: 100px;height: 100px;" src=/QingLong' + res.url + '>' +
+                    '</div>'
+                  );
+                }
+              });
+            }
+
+            var filesData = render.getFiles();
+            filesData = unique(filesData);
+            var file_input_id = filesData[0].select.substring(4);
+            for (var i = 0; i < filesData.length; i++) {
+              upload.render({
+                elem: '#' + filesData[i].select
+                , elemList: $('#list-' + filesData[i].select.substring(4)) //列表元素对象
+                , url: '/QingLong/collect/uploadFile'
+                , data: { job_id: jobId, input_id: filesData[i].select.substring(4), type_id: 1 }
+                , accept: 'file'
+                , multiple: true
+                , number: 3
+                , auto: true
+                , bindAction: '#listAction-' + filesData[i].select.substring(4)
+                , choose: function (obj) {
+                  var that = this;
+                  var files = this.files = obj.pushFile(); //将每次选择的文件追加到文件队列                  
+                  //读取本地文件
+                  obj.preview(function (index, file, result) {
+                    var tr = $(['<tr id="upload-' + index + '">'
+                      , '<td>' + file.name + '</td>'
+                      , '<td>' + (file.size / 1014).toFixed(1) + 'kb</td>'
+                      , '<td><div class="layui-progress" lay-filter="progress-demo-' + index + '"><div class="layui-progress-bar" lay-percent=""></div></div></td>'
+                      , '<td>'
+                      , '<button class="layui-btn layui-btn-xs layui-btn-danger demo-delete">删除</button>'
+                      , '</td>'
+                      , '</tr>'].join(''));
+
+                    //删除
+                    tr.find('.demo-delete').on('click', function () {
+                      delete files[index]; //删除对应的文件
+                      tr.remove();
+                      // uploadListIns.config.elem.next()[0].value = ''; //清空 input file 值，以免删除后出现同名文件不可选
+                    });
+
+                    that.elemList.append(tr);
+                    element.render('progress'); //渲染新加的进度条组件
+                  });
+                }, done: function (res, index, upload) { //成功的回调                  
+                  var that = this;
+                  var tr = that.elemList.find('tr#upload-' + index)
+                    , tds = tr.children();
+                  tds.eq(3).html(''); //清空操作
+                  delete this.files[index]; //删除文件队列已经上传成功的文件
+                  return;
+                  this.error(index, upload);
+                }, allDone: function (obj) { //多文件上传完毕后的状态回调      
+                  setTimeout(function () {
+                    reloadFiles(file_input_id);
+                  }, 700);
+                }, error: function (index, upload) { //错误回调                
+                  var that = this;
+                  var tr = that.elemList.find('tr#upload-' + index)
+                    , tds = tr.children();
+                  tds.eq(3).find('.demo-reload').removeClass('layui-hide'); //显示重传
+                }, progress: function (n, elem, e, index) {
+                  element.progress('progress-demo-' + index, n + '%'); //执行进度条。n 即为返回的进度百分比
+                }
+              });
+            }
+          }, error: function (xhr, status, error) {
+            layer.msg("获取任务信息异常！", {
+              icon: 2,
+              time: 1000
+            });
+          }
+        });
+
+        //获取表单数据
+        $.ajax({
+          url: "/QingLong/collect/getFormFillJob?job_id=" + jobId,
+          async: false,
+          type: 'GET',
+          dataType: "json",
+          success: function (res) {
+            render.setFormData(res);
+          }
+        });
+
+        window.reloadFiles = function (file_input_id) {
+          $.ajax({
+            url: "/QingLong/collect/getJobUploadList?job_id=" + jobId,
+            async: false,
+            type: 'GET',
+            success: function (res) {
+              $('#list-' + file_input_id).html('');
+              if (res.data.length > 0) {
+                for (var i = 0; i < res.data.length; i++) {
+                  if (res.data[i].type_id == 1) {
+                    var tr = $('#list-' + res.data[i].input_id).append(
+                      '<tr id="upload-' + i + '">' +
+                      '<td>' + res.data[i].fileName + '</td>' +
+                      '<td>' + res.data[i].file_size + '</td>' +
+                      '<td>已上传</td>' +
+                      '<td>' +
+                      '<button class="layui-btn layui-btn-xs layui-btn-danger" onclick=delfiles("' + res.data[i].file_id + '","' + res.data[i].input_id + '")>删除</button>' +
+                      '</td>' +
+                      '</tr>'
+                    );
+                  }
+                }
+              }
+            }
+          });
+        }
+
+        //获取图片和文件数据
+        $.ajax({
+          url: "/QingLong/collect/getJobUploadList?job_id=" + jobId,
+          async: false,
+          type: 'GET',
+          success: function (res) {
+            if (res.data.length > 0) {
+              for (var i = 0; i < res.data.length; i++) {
+                if (res.data[i].type_id == 1) {
+                  var tr = $('#list-' + res.data[i].input_id).append(
+                    '<tr id="upload-' + i + '">' +
+                    '<td>' + res.data[i].fileName + '</td>' +
+                    '<td>' + res.data[i].file_size + '</td>' +
+                    '<td>已上传</td>' +
+                    '<td>' +
+                    '<button class="layui-btn layui-btn-xs layui-btn-danger" onclick=delfiles("' + res.data[i].file_id + '","' + res.data[i].input_id + '")>删除</button>' +
+                    '</td>' +
+                    '</tr>'
+                  );
+
+                } else {
+                  $('#uploader-list-' + res.data[i].input_id).append(
+                    '<div id="' + res.data[i].file_id + '" class="file-iteme">' +
+                    '<div class="handle"><i class="layui-icon layui-icon-delete" onclick=delimgs("' + res.data[i].file_id + '")></i></div>' +
+                    '<img style="width: 100px;height: 100px;" src=/QingLong/Excel/' + res.data[i].file_id + '.' + res.data[i].suffix + '>' +
+                    '</div>'
+                  );
+                }
+
+              }
+            }
+
+          }
+        });
+
+
+        //监听提交
+        form.on('submit(demo1)', function (data) {
+          var json = render.getFormData();
+          $.ajax({
+            url: '/QingLong/collect/saveFormJob',
+            type: 'post',
+            data: {
+              "job_id": jobId,
+              "json": JSON.stringify(json)
+            },
+            success: function (result) {
+              if (result.success) {
+                layer.msg("成功！", {
+                  icon: 1,
+                  time: 1000
+                }, function () {
+                  parent.layer.close(parent.layer.getFrameIndex(window.name));
+                  parent.refresh();
+                });
+              } else {
+                layer.msg(result.message, {
+                  icon: 2,
+                  time: 2000
+                });
+              }
+            }
+          });
+          return false;
+        });
+
+        window.delimgs = function (file_id) {
+
+          $.ajax({
+            url: '/QingLong/collect/delUploadFile',
+            type: 'post',
+            data: {
+              "job_id": jobId,
+              "file_id": file_id
+            },
+            success: function (result) {
+              if (result.success) {
+                layer.msg("成功！", {
+                  icon: 1,
+                  time: 1000
+                }, function () {
+                  $('#' + file_id).remove();
+                });
+              } else {
+                layer.msg(result.message, {
+                  icon: 2,
+                  time: 2000
+                });
+              }
+            }
+          });
+        }
+
+        window.delfiles = function (file_id, file_input_id) {
+          event.preventDefault();
+
+          $.ajax({
+            url: '/QingLong/collect/delUploadFile',
+            type: 'post',
+            data: {
+              "job_id": jobId,
+              "file_id": file_id
+            },
+            success: function (result) {
+              if (result.success) {
+                layer.msg("成功！", {
+                  icon: 1,
+                  time: 1000
+                }, function () {
+                  reloadFiles(file_input_id);
+                });
+              } else {
+                layer.msg(result.message, {
+                  icon: 2,
+                  time: 2000
+                });
+              }
+            }
+          });
+          return false;
+        }
+
+      });
+
+
+
+
+
+
+
+    function getSubmitData() {
+      var data = $('#testdemo').form[0].serialize();
+      console.log(data);
+      return data;
+    }
+
+    function GetQueryString(name, istop) {
+      var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
+      var r = window.location.search.substr(1).match(reg);
+      if (typeof (istop) != "undefined") r = top.location.search.substr(1).match(reg);
+
+      if (r != null) return unescape(r[2]);
+      return null;
+    }
+
+
+
+  </script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/WebRoot/view/tb/school/task_list.html b/WebRoot/view/tb/school/task_list.html
index 89ac558b..60d2efb0 100644
--- a/WebRoot/view/tb/school/task_list.html
+++ b/WebRoot/view/tb/school/task_list.html
@@ -124,7 +124,7 @@
                         offset: 'r',
                         anim: 'slideLeft',
                         area: ['750px', '100%'],
-                        shade: 0.1,                        
+                        shade: 0.1,
                         content: "../form/report.html?job_id=" + obj.data.job_id
                     });
                 } else {
@@ -143,11 +143,25 @@
             }
 
             window.view = function (obj) {
-                var base64Url = Base64.encode('/QingLong/collect/getJobBureauFillInfo?job_id=' + obj.data.job_id + '&type_id=2');
-                window.open('../exportPdf.html?url=' + base64Url, '_blank');
+                if (obj.data.job_type === 1) {
+                    layer.open({
+                        type: 2,
+                        title: '填报',
+                        offset: 'r',
+                        anim: 'slideLeft',
+                        area: ['750px', '100%'],
+                        shade: 0.1,
+                        shadeClose: true,
+                        content: "../form/view.html?job_id=" + obj.data.job_id
+                    });
+                } else {
+                    var base64Url = Base64.encode('/QingLong/collect/getJobBureauFillInfo?job_id=' + obj.data.job_id + '&type_id=2');
+                    window.open('../exportPdf.html?url=' + base64Url, '_blank');
+                }
+
             }
 
-            window.refresh = function (param) {                
+            window.refresh = function (param) {
                 table.reload('data-table');
             }