增加动态表单功能

module-form/src/main/java/ink/wgink/module/form/controller/api/design/FormDesignController.java

@@ -3,7 +3,17 @@ package ink.wgink.module.form.controller.api.design;
 
 import ink.wgink.common.base.DefaultBaseController;
 import ink.wgink.interfaces.consts.ISystemConstant;
+import ink.wgink.module.form.controller.pojo.vos.design.FormDesignVO;
+import ink.wgink.module.form.service.design.IFormDesignService;
+import ink.wgink.pojo.result.ErrorResult;
+import ink.wgink.pojo.result.SuccessResult;
 import io.swagger.annotations.Api;
+import io.swagger.annotations.ApiOperation;
+import io.swagger.annotations.ApiResponse;
+import io.swagger.annotations.ApiResponses;
+import org.springframework.beans.factory.annotation.Autowired;
+import org.springframework.web.bind.annotation.PostMapping;
+import org.springframework.web.bind.annotation.RequestBody;
 import org.springframework.web.bind.annotation.RequestMapping;
 import org.springframework.web.bind.annotation.RestController;
 
@@ -12,6 +22,15 @@ import org.springframework.web.bind.annotation.RestController;
 @RequestMapping(ISystemConstant.API_PREFIX + "/form-design")
 public class FormDesignController extends DefaultBaseController {
 
+    @Autowired
+    private IFormDesignService formDesignService;
 
+    @ApiOperation(value = "保存表单", notes = "保存表单接口")
+    @ApiResponses({@ApiResponse(code = 400, message = "请求失败", response = ErrorResult.class)})
+    @PostMapping("save")
+    public SuccessResult save(@RequestBody FormDesignVO formDesignVO) {
+        formDesignService.save(formDesignVO);
+        return new SuccessResult();
+    }
 
 }

module-form/src/main/java/ink/wgink/module/form/controller/pojo/FormField.java

@@ -0,0 +1,48 @@
+package ink.wgink.module.form.controller.pojo;
+
+/**
+ * @Description: 基础字段
+ * @Author: WenG
+ * @Date: 2022/3/8 20:24
+ * @Version: 1.0
+ **/
+public class FormField {
+
+    private String id;
+    private String tag;
+    private String label;
+    private Integer index;
+
+    public String getId() {
+        return id;
+    }
+
+    public void setId(String id) {
+        this.id = id;
+    }
+
+    public String getTag() {
+        return tag;
+    }
+
+    public void setTag(String tag) {
+        this.tag = tag;
+    }
+
+    public String getLabel() {
+        return label;
+    }
+
+    public void setLabel(String label) {
+        this.label = label;
+    }
+
+    public Integer getIndex() {
+        return index;
+    }
+
+    public void setIndex(Integer index) {
+        this.index = index;
+    }
+
+}

module-form/src/main/java/ink/wgink/module/form/controller/pojo/vos/design/FormDesignVO.java

@@ -0,0 +1,31 @@
+package ink.wgink.module.form.controller.pojo.vos.design;
+
+import com.alibaba.fastjson.JSONArray;
+
+/**
+ * @Description: 表单设计
+ * @Author: WenG
+ * @Date: 2022/3/8 20:21
+ * @Version: 1.0
+ **/
+public class FormDesignVO {
+
+    private JSONArray data;
+    private String code;
+
+    public JSONArray getData() {
+        return data;
+    }
+
+    public void setData(JSONArray data) {
+        this.data = data;
+    }
+
+    public String getCode() {
+        return code;
+    }
+
+    public void setCode(String code) {
+        this.code = code;
+    }
+}

module-form/src/main/java/ink/wgink/module/form/controller/route/design/FormDesignRouteController.java

@@ -0,0 +1,27 @@
+package ink.wgink.module.form.controller.route.design;
+
+import ink.wgink.interfaces.consts.ISystemConstant;
+import io.swagger.annotations.Api;
+import org.springframework.stereotype.Controller;
+import org.springframework.web.bind.annotation.GetMapping;
+import org.springframework.web.bind.annotation.RequestMapping;
+import org.springframework.web.servlet.ModelAndView;
+
+/**
+ * @Description: 表单设计
+ * @Author: WenG
+ * @Date: 2022/3/7 11:17
+ * @Version: 1.0
+ **/
+@Api(tags = ISystemConstant.API_TAGS_SYSTEM_PREFIX + "表单设计")
+@Controller
+@RequestMapping(ISystemConstant.ROUTE_PREFIX + "/form-design")
+public class FormDesignRouteController {
+
+    @GetMapping("save")
+    public ModelAndView save() {
+        ModelAndView mv = new ModelAndView("/form-design/save");
+        return mv;
+    }
+
+}

module-form/src/main/java/ink/wgink/module/form/controller/staticfile/FormDesignStaticController.java

@@ -0,0 +1,54 @@
+/* Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+package ink.wgink.module.form.controller.staticfile;
+
+import ink.wgink.util.ResourceUtil;
+import ink.wgink.util.request.StaticResourceRequestUtil;
+import org.springframework.web.bind.annotation.GetMapping;
+import org.springframework.web.bind.annotation.PathVariable;
+import org.springframework.web.bind.annotation.RequestMapping;
+import org.springframework.web.bind.annotation.RestController;
+
+import javax.servlet.http.HttpServletResponse;
+import java.io.IOException;
+import java.io.InputStream;
+
+@RestController
+@RequestMapping("static/form-design")
+public class FormDesignStaticController {
+
+    @GetMapping("images/{fileName}")
+    public void images(HttpServletResponse httpServletResponse, @PathVariable("fileName") String fileName) throws IOException {
+        InputStream inputStream = ResourceUtil.getJarResourceInputStream("static/form-design/images/" + fileName);
+        StaticResourceRequestUtil.download(httpServletResponse, inputStream, fileName);
+    }
+
+    @GetMapping("js/{fileName}")
+    public void js(HttpServletResponse httpServletResponse, @PathVariable("fileName") String fileName) throws IOException {
+        InputStream inputStream = ResourceUtil.getJarResourceInputStream("static/form-design/js/" + fileName);
+        StaticResourceRequestUtil.download(httpServletResponse, inputStream, fileName);
+    }
+
+    @GetMapping("modules/{fileName}")
+    public void modules(HttpServletResponse httpServletResponse, @PathVariable("fileName") String fileName) throws IOException {
+        InputStream inputStream = ResourceUtil.getJarResourceInputStream("static/form-design/modules/" + fileName);
+        StaticResourceRequestUtil.download(httpServletResponse, inputStream, fileName);
+    }
+
+    @GetMapping("modules/{sub}/{fileName}")
+    public void modulesSum(HttpServletResponse httpServletResponse, @PathVariable("sub") String sub, @PathVariable("fileName") String fileName) throws IOException {
+        InputStream inputStream = ResourceUtil.getJarResourceInputStream("static/form-design/modules/" + sub + "/" + fileName);
+        StaticResourceRequestUtil.download(httpServletResponse, inputStream, fileName);
+    }
+
+}

module-form/src/main/java/ink/wgink/module/form/enums/design/FormFieldTypeEnum.java

@@ -0,0 +1,50 @@
+package ink.wgink.module.form.enums.design;
+
+/**
+ * @Description: 表单字段类型
+ * @Author: WenG
+ * @Date: 2022/3/8 20:40
+ * @Version: 1.0
+ **/
+public enum FormFieldTypeEnum {
+
+    INPUT("input", "单行文本"),
+    PASSWORD("password", "密码框"),
+    SELECT("select", "下拉框"),
+    RADIO("radio", "单选组"),
+    CHECKBOX("checkbox", "复选组"),
+    SWITCH("switch", "开关"),
+    SLIDER("slider", "滑块"),
+    NUMBER_INPUT("numberInput", "数字输入框"),
+    LABEL_GENERATION("labelGeneration", "标签组件"),
+    BOTTOM("bottom", "按钮组件"),
+    SIGN("sign", "签名组件"),
+    ICON_PICKER("iconPicker", "图标选择器"),
+    CRON("cron", "Cron表达式"),
+    DATE("date", "日期"),
+    DATE_RANGE("dateRange", "日期范围"),
+    RATE("rate", "评分"),
+    CAROUSEL("carousel", "轮播图"),
+    COLOR_PICKER("colorpicker", "颜色选择器"),
+    IMAGE("image", "上传图片"),
+    FILE("file", "上传文件"),
+    TEXTAREA("textarea", "多行文本"),
+    EDITOR("editor", "编辑器"),
+    GRID("grid", "布局网格");
+
+    private String type;
+    private String label;
+
+    FormFieldTypeEnum(String type, String label) {
+        this.type = type;
+        this.label = label;
+    }
+
+    public String getType() {
+        return type;
+    }
+
+    public String getLabel() {
+        return label;
+    }
+}

module-form/src/main/java/ink/wgink/module/form/service/design/IFormDesignService.java

@@ -0,0 +1,20 @@
+package ink.wgink.module.form.service.design;
+
+import ink.wgink.module.form.controller.pojo.vos.design.FormDesignVO;
+
+/**
+ * @Description: 表单设计
+ * @Author: WenG
+ * @Date: 2022/3/7 10:53
+ * @Version: 1.0
+ **/
+public interface IFormDesignService {
+
+    /**
+     * 保存表单
+     *
+     * @param formDesignVO
+     */
+    void save(FormDesignVO formDesignVO);
+
+}

module-form/src/main/java/ink/wgink/module/form/service/design/impl/FormDesignServiceImpl.java

@@ -0,0 +1,34 @@
+package ink.wgink.module.form.service.design.impl;
+
+import com.alibaba.fastjson.JSONArray;
+import ink.wgink.common.base.DefaultBaseService;
+import ink.wgink.module.form.controller.pojo.FormField;
+import ink.wgink.module.form.controller.pojo.vos.design.FormDesignVO;
+import ink.wgink.module.form.service.design.IFormDesignService;
+import org.springframework.stereotype.Service;
+
+import java.util.ArrayList;
+import java.util.List;
+
+/**
+ * @Description: 表单设计
+ * @Author: WenG
+ * @Date: 2022/3/7 10:53
+ * @Version: 1.0
+ **/
+@Service
+public class FormDesignServiceImpl extends DefaultBaseService implements IFormDesignService {
+
+
+    @Override
+    public void save(FormDesignVO formDesignVO) {
+
+    }
+
+    private void setFormField(List<FormField> formFields, JSONArray dataJsonArray) {
+        formFields = formFields == null ? new ArrayList<>() : formFields;
+        for (int i = 0; i < dataJsonArray.size(); i++) {
+            // grid特殊，需要递归处理
+        }
+    }
+}

module-form/src/main/java/ink/wgink/module/form/service/design/impl/FormServiceImpl.java

@@ -5,7 +5,6 @@ import com.github.pagehelper.PageInfo;
 import ink.wgink.common.base.DefaultBaseService;
 import ink.wgink.module.form.dao.design.IFormDao;
 import ink.wgink.module.form.pojo.dtos.design.FormDTO;
-import ink.wgink.module.form.pojo.dtos.design.FormFieldDTO;
 import ink.wgink.module.form.pojo.pos.design.FormPO;
 import ink.wgink.module.form.pojo.vos.design.FormVO;
 import ink.wgink.module.form.service.design.IFormService;
@@ -108,5 +107,4 @@ public class FormServiceImpl extends DefaultBaseService implements IFormService
         return new SuccessResultList<>(dataDTOs, pageInfo.getPageNum(), pageInfo.getTotal());
     }
 
-
 }

module-form/src/main/resources/static/form-design/js/config.js

@@ -0,0 +1,13 @@
+/**
+ * layui 项目的全局配置
+ * 
+*/
+layui.config({
+    //dir: '/res/layui/', //layui.js 所在路径（注意，如果是 script 单独引入 layui.js，无需设定该参数。），一般情况下可以无视
+    version: false, //一般用于更新模块缓存，默认不开启。设为 true 即让浏览器不缓存。也可以设为一个固定的值，如：201610
+    debug: false, //用于开启调试模式，默认 false，如果设为 true，则JS模块的节点会保留在页面
+    base: './form-design/modules/', //设定扩展的 layui 模块的所在目录，一般用于外部模块扩展
+  }).use(['layer'],function(){
+    var $ = layui.jquery;
+    var layer = layui.layer;  
+  });

module-form/src/main/resources/static/form-design/js/htmlformat.js

@@ -0,0 +1,409 @@
+function style_html(html_source, indent_size, indent_character, max_char) {
+    //Wrapper function to invoke all the necessary constructors and deal with the output.
+      
+      var Parser, multi_parser;
+      
+      function Parser() {
+        
+        this.pos = 0; //Parser position
+        this.token = '';
+        this.current_mode = 'CONTENT'; //reflects the current Parser mode: TAG/CONTENT
+        this.tags = { //An object to hold tags, their position, and their parent-tags, initiated with default values
+          parent: 'parent1',
+          parentcount: 1,
+          parent1: ''
+        };
+        this.tag_type = '';
+        this.token_text = this.last_token = this.last_text = this.token_type = '';
+    
+        
+        this.Utils = { //Uilities made available to the various functions
+          whitespace: "\n\r\t ".split(''),
+          single_token: 'br,input,link,meta,!doctype,basefont,base,area,hr,wbr,param,img,isindex,?xml,embed'.split(','), //all the single tags for HTML
+          extra_liners: 'head,body,/html'.split(','), //for tags that need a line of whitespace before them
+          in_array: function (what, arr) {
+            for (var i=0; i<arr.length; i++) {
+              if (what === arr[i]) {
+                return true;
+              }
+            }
+            return false;
+          }
+        }
+        
+        this.get_content = function () { //function to capture regular content between tags
+          
+          var char = '';
+          var content = [];
+          var space = false; //if a space is needed
+          while (this.input.charAt(this.pos) !== '<') {
+            if (this.pos >= this.input.length) {
+              return content.length?content.join(''):['', 'TK_EOF'];
+            }
+            
+            char = this.input.charAt(this.pos);
+            this.pos++;
+            this.line_char_count++;
+            
+            
+            if (this.Utils.in_array(char, this.Utils.whitespace)) {
+              if (content.length) {
+                space = true;
+              }
+              this.line_char_count--;
+              continue; //don't want to insert unnecessary space
+            }
+            else if (space) {
+              if (this.line_char_count >= this.max_char) { //insert a line when the max_char is reached
+                content.push('\n');
+                for (var i=0; i<this.indent_level; i++) {
+                  content.push(this.indent_string);
+                }
+                this.line_char_count = 0;
+              }
+              else{
+                content.push(' ');
+                this.line_char_count++;
+              }
+              space = false;
+            }
+            content.push(char); //letter at-a-time (or string) inserted to an array
+          }
+          return content.length?content.join(''):'';
+        }
+         
+        this.get_script = function () { //get the full content of a script to pass to js_beautify
+          
+          var char = '';
+          var content = [];
+          var reg_match = new RegExp('\<\/script' + '\>', 'igm');
+          reg_match.lastIndex = this.pos;
+          var reg_array = reg_match.exec(this.input);
+          var end_script = reg_array?reg_array.index:this.input.length; //absolute end of script
+          while(this.pos < end_script) { //get everything in between the script tags
+            if (this.pos >= this.input.length) {
+              return content.length?content.join(''):['', 'TK_EOF'];
+            }
+            
+            char = this.input.charAt(this.pos);
+            this.pos++;
+            
+            
+            content.push(char);
+          }
+          return content.length?content.join(''):''; //we might not have any content at all
+        }
+        
+        this.record_tag = function (tag){ //function to record a tag and its parent in this.tags Object
+          if (this.tags[tag + 'count']) { //check for the existence of this tag type
+            this.tags[tag + 'count']++;
+            this.tags[tag + this.tags[tag + 'count']] = this.indent_level; //and record the present indent level
+          }
+          else { //otherwise initialize this tag type
+            this.tags[tag + 'count'] = 1;
+            this.tags[tag + this.tags[tag + 'count']] = this.indent_level; //and record the present indent level
+          }
+          this.tags[tag + this.tags[tag + 'count'] + 'parent'] = this.tags.parent; //set the parent (i.e. in the case of a div this.tags.div1parent)
+          this.tags.parent = tag + this.tags[tag + 'count']; //and make this the current parent (i.e. in the case of a div 'div1')
+        }
+        
+        this.retrieve_tag = function (tag) { //function to retrieve the opening tag to the corresponding closer
+          if (this.tags[tag + 'count']) { //if the openener is not in the Object we ignore it
+            var temp_parent = this.tags.parent; //check to see if it's a closable tag.
+            while (temp_parent) { //till we reach '' (the initial value);
+              if (tag + this.tags[tag + 'count'] === temp_parent) { //if this is it use it
+                break;
+              }
+              temp_parent = this.tags[temp_parent + 'parent']; //otherwise keep on climbing up the DOM Tree
+            }
+            if (temp_parent) { //if we caught something
+              this.indent_level = this.tags[tag + this.tags[tag + 'count']]; //set the indent_level accordingly
+              this.tags.parent = this.tags[temp_parent + 'parent']; //and set the current parent
+            }
+            delete this.tags[tag + this.tags[tag + 'count'] + 'parent']; //delete the closed tags parent reference...
+            delete this.tags[tag + this.tags[tag + 'count']]; //...and the tag itself
+            if (this.tags[tag + 'count'] == 1) {
+              delete this.tags[tag + 'count'];
+            }
+            else {
+              this.tags[tag + 'count']--;
+            }
+          }
+        }
+          
+        this.get_tag = function () { //function to get a full tag and parse its type
+          var char = '';
+          var content = [];
+          var space = false;
+    
+          do {
+            if (this.pos >= this.input.length) {
+              return content.length?content.join(''):['', 'TK_EOF'];
+            }
+            
+            char = this.input.charAt(this.pos);
+            this.pos++;
+            this.line_char_count++;
+            
+            if (this.Utils.in_array(char, this.Utils.whitespace)) { //don't want to insert unnecessary space
+              space = true;
+              this.line_char_count--;
+              continue;
+            }
+            
+            if (char === "'" || char === '"') {
+              if (!content[1] || content[1] !== '!') { //if we're in a comment strings don't get treated specially
+                char += this.get_unformatted(char);
+                space = true;
+              }
+            }
+            
+            if (char === '=') { //no space before =
+              space = false;
+            }
+            
+            if (content.length && content[content.length-1] !== '=' && char !== '>'
+                && space) { //no space after = or before >
+              if (this.line_char_count >= this.max_char) {
+                this.print_newline(false, content);
+                this.line_char_count = 0;
+              }
+              else {
+                content.push(' ');
+                this.line_char_count++;
+              }
+              space = false;
+            }
+            content.push(char); //inserts character at-a-time (or string)
+          } while (char !== '>');
+          
+          var tag_complete = content.join('');
+          var tag_index;
+          if (tag_complete.indexOf(' ') != -1) { //if there's whitespace, thats where the tag name ends
+            tag_index = tag_complete.indexOf(' ');
+          }
+          else { //otherwise go with the tag ending
+            tag_index = tag_complete.indexOf('>');
+          }
+          var tag_check = tag_complete.substring(1, tag_index).toLowerCase();
+          if (tag_complete.charAt(tag_complete.length-2) === '/' ||
+              this.Utils.in_array(tag_check, this.Utils.single_token)) { //if this tag name is a single tag type (either in the list or has a closing /)
+            this.tag_type = 'SINGLE';
+          }
+          else if (tag_check === 'script') { //for later script handling
+            this.record_tag(tag_check);
+            this.tag_type = 'SCRIPT';
+          }
+          else if (tag_check === 'style') { //for future style handling (for now it justs uses get_content)
+            this.record_tag(tag_check);
+            this.tag_type = 'STYLE';
+          }
+          else if (tag_check.charAt(0) === '!') { //peek for <!-- comment
+            if (tag_check.indexOf('[if') != -1) { //peek for <!--[if conditional comment
+              if (tag_complete.indexOf('!IE') != -1) { //this type needs a closing --> so...
+                var comment = this.get_unformatted('-->', tag_complete); //...delegate to get_unformatted
+                content.push(comment);
+              }
+              this.tag_type = 'START';
+            }
+            else if (tag_check.indexOf('[endif') != -1) {//peek for <!--[endif end conditional comment
+              this.tag_type = 'END';
+              this.unindent();
+            }
+            else if (tag_check.indexOf('[cdata[') != -1) { //if it's a <[cdata[ comment...
+              var comment = this.get_unformatted(']]>', tag_complete); //...delegate to get_unformatted function
+              content.push(comment);
+              this.tag_type = 'SINGLE'; //<![CDATA[ comments are treated like single tags
+            }
+            else {
+              var comment = this.get_unformatted('-->', tag_complete);
+              content.push(comment);
+              this.tag_type = 'SINGLE';
+            }
+          }
+          else {
+            if (tag_check.charAt(0) === '/') { //this tag is a double tag so check for tag-ending
+              this.retrieve_tag(tag_check.substring(1)); //remove it and all ancestors
+              this.tag_type = 'END';
+            }
+            else { //otherwise it's a start-tag
+              this.record_tag(tag_check); //push it on the tag stack
+              this.tag_type = 'START';
+            }
+            if (this.Utils.in_array(tag_check, this.Utils.extra_liners)) { //check if this double needs an extra line
+              this.print_newline(true, this.output);
+            }
+          }
+          return content.join(''); //returns fully formatted tag
+        }
+        
+        this.get_unformatted = function (delimiter, orig_tag) { //function to return unformatted content in its entirety
+          
+          if (orig_tag && orig_tag.indexOf(delimiter) != -1) {
+            return '';
+          }
+          var char = '';
+          var content = '';
+          var space = true;
+          do {
+            
+            
+            char = this.input.charAt(this.pos);
+            this.pos++
+            
+            if (this.Utils.in_array(char, this.Utils.whitespace)) {
+              if (!space) {
+                this.line_char_count--;
+                continue;
+              }
+              if (char === '\n' || char === '\r') {
+                content += '\n';
+                for (var i=0; i<this.indent_level; i++) {
+                  content += this.indent_string;
+                }
+                space = false; //...and make sure other indentation is erased
+                this.line_char_count = 0;
+                continue;
+              }
+            }
+            content += char;
+            this.line_char_count++;
+            space = true;
+            
+            
+          } while (content.indexOf(delimiter) == -1);
+          return content;
+        }
+        
+        this.get_token = function () { //initial handler for token-retrieval
+          var token;
+          
+          if (this.last_token === 'TK_TAG_SCRIPT') { //check if we need to format javascript
+            var temp_token = this.get_script();
+            if (typeof temp_token !== 'string') {
+              return temp_token;
+            }
+            token = js_beautify(temp_token, this.indent_size, this.indent_character, this.indent_level); //call the JS Beautifier
+            return [token, 'TK_CONTENT'];
+          }
+          if (this.current_mode === 'CONTENT') {
+            token = this.get_content();
+            if (typeof token !== 'string') {
+              return token;
+            }
+            else {
+              return [token, 'TK_CONTENT'];
+            }
+          }
+          
+          if(this.current_mode === 'TAG') {
+            token = this.get_tag();
+            if (typeof token !== 'string') {
+              return token;
+            }
+            else {
+              var tag_name_type = 'TK_TAG_' + this.tag_type;
+              return [token, tag_name_type];
+            }
+          }
+        }
+        
+        this.printer = function (js_source, indent_character, indent_size, max_char) { //handles input/output and some other printing functions
+          
+          this.input = js_source || ''; //gets the input for the Parser
+          this.output = [];
+          this.indent_character = indent_character || ' ';
+          this.indent_string = '';
+          this.indent_size = indent_size || 2;
+          this.indent_level = 0;
+          this.max_char = max_char || 70; //maximum amount of characters per line
+          this.line_char_count = 0; //count to see if max_char was exceeded
+          
+          for (var i=0; i<this.indent_size; i++) {
+            this.indent_string += this.indent_character;
+          }
+          
+          this.print_newline = function (ignore, arr) {
+            this.line_char_count = 0;
+            if (!arr || !arr.length) {
+              return;
+            }
+            if (!ignore) { //we might want the extra line
+              while (this.Utils.in_array(arr[arr.length-1], this.Utils.whitespace)) {
+                arr.pop();
+              }
+            }
+            arr.push('\n');
+            for (var i=0; i<this.indent_level; i++) {
+              arr.push(this.indent_string);
+            }
+          }
+          
+          
+          this.print_token = function (text) {
+            this.output.push(text);
+          }
+          
+          this.indent = function () {
+            this.indent_level++;
+          }
+          
+          this.unindent = function () {
+            if (this.indent_level > 0) {
+              this.indent_level--;
+            }
+          }
+        }
+        return this;
+      }
+      
+      /*_____________________--------------------_____________________*/
+      
+      
+      
+      multi_parser = new Parser(); //wrapping functions Parser
+      multi_parser.printer(html_source, indent_character, indent_size); //initialize starting values
+      
+      
+      
+      while (true) {
+          var t = multi_parser.get_token();
+          multi_parser.token_text = t[0];
+          multi_parser.token_type = t[1];
+        
+        if (multi_parser.token_type === 'TK_EOF') {
+          break;
+        }
+        
+    
+        switch (multi_parser.token_type) {
+          case 'TK_TAG_START': case 'TK_TAG_SCRIPT': case 'TK_TAG_STYLE':
+            multi_parser.print_newline(false, multi_parser.output);
+            multi_parser.print_token(multi_parser.token_text);
+            multi_parser.indent();
+            multi_parser.current_mode = 'CONTENT';
+            break;
+          case 'TK_TAG_END':
+            multi_parser.print_newline(true, multi_parser.output);
+            multi_parser.print_token(multi_parser.token_text);
+            multi_parser.current_mode = 'CONTENT';
+            break;
+          case 'TK_TAG_SINGLE':
+            multi_parser.print_newline(false, multi_parser.output);
+            multi_parser.print_token(multi_parser.token_text);
+            multi_parser.current_mode = 'CONTENT';
+            break;
+          case 'TK_CONTENT':
+            if (multi_parser.token_text !== '') {
+              multi_parser.print_newline(false, multi_parser.output);
+              multi_parser.print_token(multi_parser.token_text);
+            }
+            multi_parser.current_mode = 'TAG';
+            break;
+        }
+        multi_parser.last_token = multi_parser.token_type;
+        multi_parser.last_text = multi_parser.token_text;
+      }
+      return multi_parser.output.join('');
+    }
+    

module-form/src/main/resources/static/form-design/js/jsformat.js

@@ -0,0 +1,568 @@
+
+
+function js_beautify(js_source_text, indent_size, indent_character, indent_level)
+{
+
+    var input, output, token_text, last_type, last_text, last_word, current_mode, modes, indent_string;
+    var whitespace, wordchar, punct, parser_pos, line_starters, in_case;
+    var prefix, token_type, do_block_just_closed, var_line, var_line_tainted;
+
+
+
+    function trim_output()
+    {
+        while (output.length && (output[output.length - 1] === ' ' || output[output.length - 1] === indent_string)) {
+            output.pop();
+        }
+    }
+
+    function print_newline(ignore_repeated)
+    {
+        ignore_repeated = typeof ignore_repeated === 'undefined' ? true: ignore_repeated;
+        
+        trim_output();
+
+        if (!output.length) {
+            return; // no newline on start of file
+        }
+
+        if (output[output.length - 1] !== "\n" || !ignore_repeated) {
+            output.push("\n");
+        }
+        for (var i = 0; i < indent_level; i++) {
+            output.push(indent_string);
+        }
+    }
+
+
+
+    function print_space()
+    {
+        var last_output = output.length ? output[output.length - 1] : ' ';
+        if (last_output !== ' ' && last_output !== '\n' && last_output !== indent_string) { // prevent occassional duplicate space
+            output.push(' ');
+        }
+    }
+
+
+    function print_token()
+    {
+        output.push(token_text);
+    }
+
+    function indent()
+    {
+        indent_level++;
+    }
+
+
+    function unindent()
+    {
+        if (indent_level) {
+            indent_level--;
+        }
+    }
+
+
+    function remove_indent()
+    {
+        if (output.length && output[output.length - 1] === indent_string) {
+            output.pop();
+        }
+    }
+
+
+    function set_mode(mode)
+    {
+        modes.push(current_mode);
+        current_mode = mode;
+    }
+
+
+    function restore_mode()
+    {
+        do_block_just_closed = current_mode === 'DO_BLOCK';
+        current_mode = modes.pop();
+    }
+
+
+    function in_array(what, arr)
+    {
+        for (var i = 0; i < arr.length; i++)
+        {
+            if (arr[i] === what) {
+                return true;
+            }
+        }
+        return false;
+    }
+
+
+
+    function get_next_token()
+    {
+        var n_newlines = 0;
+        var c = '';
+
+        do {
+            if (parser_pos >= input.length) {
+                return ['', 'TK_EOF'];
+            }
+            c = input.charAt(parser_pos);
+
+            parser_pos += 1;
+            if (c === "\n") {
+                n_newlines += 1;
+            }
+        }
+        while (in_array(c, whitespace));
+
+        if (n_newlines > 1) {
+            for (var i = 0; i < 2; i++) {
+                print_newline(i === 0);
+            }
+        }
+        var wanted_newline = (n_newlines === 1);
+
+
+        if (in_array(c, wordchar)) {
+            if (parser_pos < input.length) {
+                while (in_array(input.charAt(parser_pos), wordchar)) {
+                    c += input.charAt(parser_pos);
+                    parser_pos += 1;
+                    if (parser_pos === input.length) {
+                        break;
+                    }
+                }
+            }
+
+            // small and surprisingly unugly hack for 1E-10 representation
+            if (parser_pos !== input.length && c.match(/^[0-9]+[Ee]$/) && input.charAt(parser_pos) === '-') {
+                parser_pos += 1;
+
+                var t = get_next_token(parser_pos);
+                c += '-' + t[0];
+                return [c, 'TK_WORD'];
+            }
+
+            if (c === 'in') { // hack for 'in' operator
+                return [c, 'TK_OPERATOR'];
+            }
+            return [c, 'TK_WORD'];
+        }
+        
+        if (c === '(' || c === '[') {
+            return [c, 'TK_START_EXPR'];
+        }
+
+        if (c === ')' || c === ']') {
+            return [c, 'TK_END_EXPR'];
+        }
+
+        if (c === '{') {
+            return [c, 'TK_START_BLOCK'];
+        }
+
+        if (c === '}') {
+            return [c, 'TK_END_BLOCK'];
+        }
+
+        if (c === ';') {
+            return [c, 'TK_END_COMMAND'];
+        }
+
+        if (c === '/') {
+            var comment = '';
+            // peek for comment /* ... */
+            if (input.charAt(parser_pos) === '*') {
+                parser_pos += 1;
+                if (parser_pos < input.length) {
+                    while (! (input.charAt(parser_pos) === '*' && input.charAt(parser_pos + 1) && input.charAt(parser_pos + 1) === '/') && parser_pos < input.length) {
+                        comment += input.charAt(parser_pos);
+                        parser_pos += 1;
+                        if (parser_pos >= input.length) {
+                            break;
+                        }
+                    }
+                }
+                parser_pos += 2;
+                return ['/*' + comment + '*/', 'TK_BLOCK_COMMENT'];
+            }
+            // peek for comment // ...
+            if (input.charAt(parser_pos) === '/') {
+                comment = c;
+                while (input.charAt(parser_pos) !== "\x0d" && input.charAt(parser_pos) !== "\x0a") {
+                    comment += input.charAt(parser_pos);
+                    parser_pos += 1;
+                    if (parser_pos >= input.length) {
+                        break;
+                    }
+                }
+                parser_pos += 1;
+                if (wanted_newline) {
+                    print_newline();
+                }
+                return [comment, 'TK_COMMENT'];
+            }
+
+        }
+
+        if (c === "'" || // string
+        c === '"' || // string
+        (c === '/' &&
+        ((last_type === 'TK_WORD' && last_text === 'return') || (last_type === 'TK_START_EXPR' || last_type === 'TK_END_BLOCK' || last_type === 'TK_OPERATOR' || last_type === 'TK_EOF' || last_type === 'TK_END_COMMAND')))) { // regexp
+            var sep = c;
+            var esc = false;
+            c = '';
+
+            if (parser_pos < input.length) {
+
+                while (esc || input.charAt(parser_pos) !== sep) {
+                    c += input.charAt(parser_pos);
+                    if (!esc) {
+                        esc = input.charAt(parser_pos) === '\\';
+                    } else {
+                        esc = false;
+                    }
+                    parser_pos += 1;
+                    if (parser_pos >= input.length) {
+                        break;
+                    }
+                }
+
+            }
+
+            parser_pos += 1;
+            if (last_type === 'TK_END_COMMAND') {
+                print_newline();
+            }
+            return [sep + c + sep, 'TK_STRING'];
+        }
+
+        if (in_array(c, punct)) {
+            while (parser_pos < input.length && in_array(c + input.charAt(parser_pos), punct)) {
+                c += input.charAt(parser_pos);
+                parser_pos += 1;
+                if (parser_pos >= input.length) {
+                    break;
+                }
+            }
+            return [c, 'TK_OPERATOR'];
+        }
+
+        return [c, 'TK_UNKNOWN'];
+    }
+
+
+    //----------------------------------
+
+    indent_character = indent_character || ' ';
+    indent_size = indent_size || 4;
+
+    indent_string = '';
+    while (indent_size--) {
+        indent_string += indent_character;
+    }
+
+    input = js_source_text;
+
+    last_word = ''; // last 'TK_WORD' passed
+    last_type = 'TK_START_EXPR'; // last token type
+    last_text = ''; // last token text
+    output = [];
+
+    do_block_just_closed = false;
+    var_line = false;
+    var_line_tainted = false;
+
+    whitespace = "\n\r\t ".split('');
+    wordchar = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789_$'.split('');
+    punct = '+ - * / % & ++ -- = += -= *= /= %= == === != !== > < >= <= >> << >>> >>>= >>= <<= && &= | || ! !! , : ? ^ ^= |='.split(' ');
+
+    // words which should always start on new line.
+    line_starters = 'continue,try,throw,return,var,if,switch,case,default,for,while,break,function'.split(',');
+
+    // states showing if we are currently in expression (i.e. "if" case) - 'EXPRESSION', or in usual block (like, procedure), 'BLOCK'.
+    // some formatting depends on that.
+    current_mode = 'BLOCK';
+    modes = [current_mode];
+
+    indent_level = indent_level || 0;
+    parser_pos = 0; // parser position
+    in_case = false; // flag for parser that case/default has been processed, and next colon needs special attention
+    while (true) {
+        var t = get_next_token(parser_pos);
+        token_text = t[0];
+        token_type = t[1];
+        if (token_type === 'TK_EOF') {
+            break;
+        }
+
+        switch (token_type) {
+
+        case 'TK_START_EXPR':
+            var_line = false;
+            set_mode('EXPRESSION');
+            if (last_type === 'TK_END_EXPR' || last_type === 'TK_START_EXPR') {
+                // do nothing on (( and )( and ][ and ]( ..
+            } else if (last_type !== 'TK_WORD' && last_type !== 'TK_OPERATOR') {
+                print_space();
+            } else if (in_array(last_word, line_starters) && last_word !== 'function') {
+                print_space();
+            }
+            print_token();
+            break;
+
+        case 'TK_END_EXPR':
+            print_token();
+            restore_mode();
+            break;
+
+        case 'TK_START_BLOCK':
+            
+            if (last_word === 'do') {
+                set_mode('DO_BLOCK');
+            } else {
+                set_mode('BLOCK');
+            }
+            if (last_type !== 'TK_OPERATOR' && last_type !== 'TK_START_EXPR') {
+                if (last_type === 'TK_START_BLOCK') {
+                    print_newline();
+                } else {
+                    print_space();
+                }
+            }
+            print_token();
+            indent();
+            break;
+
+        case 'TK_END_BLOCK':
+            if (last_type === 'TK_START_BLOCK') {
+                // nothing
+                trim_output();
+                unindent();
+            } else {
+                unindent();
+                print_newline();
+            }
+            print_token();
+            restore_mode();
+            break;
+
+        case 'TK_WORD':
+
+            if (do_block_just_closed) {
+                print_space();
+                print_token();
+                print_space();
+                break;
+            }
+
+            if (token_text === 'case' || token_text === 'default') {
+                if (last_text === ':') {
+                    // switch cases following one another
+                    remove_indent();
+                } else {
+                    // case statement starts in the same line where switch
+                    unindent();
+                    print_newline();
+                    indent();
+                }
+                print_token();
+                in_case = true;
+                break;
+            }
+
+
+            prefix = 'NONE';
+            if (last_type === 'TK_END_BLOCK') {
+                if (!in_array(token_text.toLowerCase(), ['else', 'catch', 'finally'])) {
+                    prefix = 'NEWLINE';
+                } else {
+                    prefix = 'SPACE';
+                    print_space();
+                }
+            } else if (last_type === 'TK_END_COMMAND' && (current_mode === 'BLOCK' || current_mode === 'DO_BLOCK')) {
+                prefix = 'NEWLINE';
+            } else if (last_type === 'TK_END_COMMAND' && current_mode === 'EXPRESSION') {
+                prefix = 'SPACE';
+            } else if (last_type === 'TK_WORD') {
+                prefix = 'SPACE';
+            } else if (last_type === 'TK_START_BLOCK') {
+                prefix = 'NEWLINE';
+            } else if (last_type === 'TK_END_EXPR') {
+                print_space();
+                prefix = 'NEWLINE';
+            }
+
+            if (last_type !== 'TK_END_BLOCK' && in_array(token_text.toLowerCase(), ['else', 'catch', 'finally'])) {
+                print_newline();
+            } else if (in_array(token_text, line_starters) || prefix === 'NEWLINE') {
+                if (last_text === 'else') {
+                    // no need to force newline on else break
+                    print_space();
+                } else if ((last_type === 'TK_START_EXPR' || last_text === '=') && token_text === 'function') {
+                    // no need to force newline on 'function': (function
+                    // DONOTHING
+                } else if (last_type === 'TK_WORD' && (last_text === 'return' || last_text === 'throw')) {
+                    // no newline between 'return nnn'
+                    print_space();
+                } else if (last_type !== 'TK_END_EXPR') {
+                    if ((last_type !== 'TK_START_EXPR' || token_text !== 'var') && last_text !== ':') {
+                        // no need to force newline on 'var': for (var x = 0...)
+                        if (token_text === 'if' && last_type === 'TK_WORD' && last_word === 'else') {
+                            // no newline for } else if {
+                            print_space();
+                        } else {
+                            print_newline();
+                        }
+                    }
+                } else {
+                    if (in_array(token_text, line_starters) && last_text !== ')') {
+                        print_newline();
+                    }
+                }
+            } else if (prefix === 'SPACE') {
+                print_space();
+            }
+            print_token();
+            last_word = token_text;
+
+            if (token_text === 'var') {
+                var_line = true;
+                var_line_tainted = false;
+            }
+
+            break;
+
+        case 'TK_END_COMMAND':
+
+            print_token();
+            var_line = false;
+            break;
+
+        case 'TK_STRING':
+
+            if (last_type === 'TK_START_BLOCK' || last_type === 'TK_END_BLOCK') {
+                print_newline();
+            } else if (last_type === 'TK_WORD') {
+                print_space();
+            }
+            print_token();
+            break;
+
+        case 'TK_OPERATOR':
+
+            var start_delim = true;
+            var end_delim = true;
+            if (var_line && token_text !== ',') {
+                var_line_tainted = true;
+                if (token_text === ':') {
+                    var_line = false;
+                }
+            }
+
+            if (token_text === ':' && in_case) {
+                print_token(); // colon really asks for separate treatment
+                print_newline();
+                break;
+            }
+
+            in_case = false;
+
+            if (token_text === ',') {
+                if (var_line) {
+                    if (var_line_tainted) {
+                        print_token();
+                        print_newline();
+                        var_line_tainted = false;
+                    } else {
+                        print_token();
+                        print_space();
+                    }
+                } else if (last_type === 'TK_END_BLOCK') {
+                    print_token();
+                    print_newline();
+                } else {
+                    if (current_mode === 'BLOCK') {
+                        print_token();
+                        print_newline();
+                    } else {
+                        // EXPR od DO_BLOCK
+                        print_token();
+                        print_space();
+                    }
+                }
+                break;
+            } else if (token_text === '--' || token_text === '++') { // unary operators special case
+                if (last_text === ';') {
+                    // space for (;; ++i)
+                    start_delim = true;
+                    end_delim = false;
+                } else {
+                    start_delim = false;
+                    end_delim = false;
+                }
+            } else if (token_text === '!' && last_type === 'TK_START_EXPR') {
+                // special case handling: if (!a)
+                start_delim = false;
+                end_delim = false;
+            } else if (last_type === 'TK_OPERATOR') {
+                start_delim = false;
+                end_delim = false;
+            } else if (last_type === 'TK_END_EXPR') {
+                start_delim = true;
+                end_delim = true;
+            } else if (token_text === '.') {
+                // decimal digits or object.property
+                start_delim = false;
+                end_delim = false;
+
+            } else if (token_text === ':') {
+                // zz: xx
+                // can't differentiate ternary op, so for now it's a ? b: c; without space before colon
+                if (last_text.match(/^\d+$/)) {
+                    // a little help for ternary a ? 1 : 0;
+                    start_delim = true;
+                } else {
+                    start_delim = false;
+                }
+            }
+            if (start_delim) {
+                print_space();
+            }
+
+            print_token();
+
+            if (end_delim) {
+                print_space();
+            }
+            break;
+
+        case 'TK_BLOCK_COMMENT':
+
+            print_newline();
+            print_token();
+            print_newline();
+            break;
+
+        case 'TK_COMMENT':
+
+            // print_newline();
+            print_space();
+            print_token();
+            print_newline();
+            break;
+
+        case 'TK_UNKNOWN':
+            print_token();
+            break;
+        }
+
+        last_type = token_type;
+        last_text = token_text;
+    }
+
+    return output.join('');
+
+}

module-form/src/main/resources/static/form-design/modules/HandwrittenSignature.css

@@ -0,0 +1,56 @@
+.signNameCanvasBox {
+    background: rgba(243, 243, 243, 1);
+}
+
+.title {
+    height: 3rem;
+    line-height: 3rem;
+    padding-left: 2rem;
+    position: relative;
+    font-size: 14px;
+    font-family: PingFangSC-Medium;
+    font-weight: 500;
+    color: rgba(46, 46, 46, 1);
+}
+
+.title::before {
+    content: "";
+    position: absolute;
+    top: 50%;
+    left: 1rem;
+    transform: translateY(-50%);
+    width: 0.29rem;
+    height: 1.14rem;
+    background: linear-gradient(225deg, rgba(87, 229, 199, 1) 0%, rgba(74, 192, 166, 1) 100%);
+    border-radius: 0.14rem;
+}
+
+.signToolLine {
+    overflow: hidden;
+    margin: 2rem 1rem 0;
+}
+
+.signToolLine .btnItem {
+    width: 44%;
+    height: 3rem;
+    text-align: center;
+    line-height: 3rem;
+    font-size: 1.14rem;
+    font-family: PingFangSC-Medium;
+    font-weight: 500;
+}
+
+.signToolLine .btnItem.chongxie {
+    float: left;
+    color: rgba(37, 170, 141, 1);
+    border-radius: 0.29rem;
+    border: 0.04rem solid rgba(45, 197, 165, .3);
+    box-sizing: border-box;
+}
+
+.signToolLine .btnItem.shengcheng {
+    float: right;
+    background: rgba(37, 170, 141, 1);
+    border-radius: 0.29rem;
+    color: rgba(255, 255, 255, 1);
+}

module-form/src/main/resources/static/form-design/modules/cron.css

@@ -0,0 +1,178 @@
+
+/* 样式加载完毕的标识 */
+html #layuicss-cron {
+    display: none;
+    position: absolute;
+    width: 1989px;
+}
+
+
+/* 主体结构 */
+.layui-cron {
+    position: absolute;
+    z-index: 1000;
+    margin: 5px 0;
+    border-radius: 2px;
+    font-size: 14px;
+    -webkit-animation-duration: 0.3s;
+    animation-duration: 0.3s;
+    -webkit-animation-fill-mode: both;
+    animation-fill-mode: both;
+    background-color: white;
+    display: flex;
+    flex-direction: column;
+    box-shadow: rgba(0, 0, 0, 0.1) 0px 2px 5px 0px;
+    -webkit-animation-name: cron-upbit;
+    animation-name: cron-upbit;
+    border: 1px solid #e6e6e6;
+}
+
+@-webkit-keyframes cron-upbit {
+
+    /* 微微往上滑入 */
+    from {
+        -webkit-transform: translate3d(0, 20px, 0);
+        opacity: 0.3;
+    }
+
+    to {
+        -webkit-transform: translate3d(0, 0, 0);
+        opacity: 1;
+    }
+}
+
+@keyframes cron-upbit {
+    from {
+        transform: translate3d(0, 20px, 0);
+        opacity: 0.3;
+    }
+
+    to {
+        transform: translate3d(0, 0, 0);
+        opacity: 1;
+    }
+}
+
+/* tabs */
+.layui-cron>.layui-tab {
+    margin: 0;
+    box-shadow: none;
+    border: none;
+}
+
+/* 表达式 */
+.cron-title {
+    font-weight: 700;
+    font-size: 14px;
+    margin: 10px;
+    margin-bottom: 0;
+}
+
+.cron-box {
+    margin: 10px;
+}
+
+.cron-box+.cron-box {
+    margin-top: 0;
+}
+
+/* 按钮 */
+.cron-footer-btns {
+    text-align: right;
+}
+
+.cron-footer-btns span {
+    height: 26px;
+    line-height: 26px;
+    margin: 0 0 0 -1px;
+    padding: 0 10px;
+    border: 1px solid #C9C9C9;
+    background-color: #fff;
+    white-space: nowrap;
+    vertical-align: top;
+    border-radius: 2px;
+    display: inline-block;
+    cursor: pointer;
+    font-size: 12px;
+    box-sizing: border-box;
+    color: #666;
+}
+
+.cron-footer-btns span:hover {
+    color: #5FB878;
+}
+
+
+/* 表单 */
+.layui-cron .layui-form-radio {
+    margin-right: 0;
+}
+
+.cron-form {
+    line-height: 28px;
+    font-size: 14px;
+}
+
+.cron-input-mid {
+    display: inline-block;
+    vertical-align: middle;
+    margin-top: 6px;
+    background-color: #e5e5e5;
+    padding: 0 12px;
+    height: 28px;
+    line-height: 28px;
+    border: 1px solid #ccc;
+    box-sizing: border-box;
+}
+
+.cron-input {
+    display: inline-block;
+    vertical-align: middle;
+    margin-top: 6px;
+    padding: 0 8px;
+    background-color: #fff;
+    border: 1px solid #ccc;
+    height: 28px;
+    line-height: 28px;
+    box-sizing: border-box;
+    width: 80px;
+    -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
+    -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
+    transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
+    transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
+    transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
+}
+
+.cron-input:focus {
+    outline: 0;
+    border: 1px solid #01AAED;
+    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 4px 0px #01AAED;
+    translate: 1s;
+}
+
+.layui-cron .layui-form-checkbox[lay-skin="primary"] span {
+    padding-right: 10px;
+    min-width: 16px;
+}
+
+.layui-cron .layui-form-checkbox[lay-skin="primary"] {
+    padding-left: 22px;
+    margin-top: 5px;
+}
+.layui-cron input[type=number] {
+    -moz-appearance:textfield;
+}
+.layui-cron input[type=number]::-webkit-inner-spin-button,
+.layui-cron input[type=number]::-webkit-outer-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+}
+.cron-tips{
+    color: grey;
+    line-height: 28px;
+    height: 28px;
+    display: inline-block;
+    vertical-align: middle;
+    margin-top: 8px;
+    margin-left: 5px;
+}

module-form/src/main/resources/static/form-design/modules/formDesigner.css

@@ -0,0 +1,370 @@
+.layui-layout-admin .layui-logo {
+    color    : #fff;
+    font-size: 20px;
+}
+
+.layui-side-right {
+    position  : fixed;
+    right     : 0;
+    top       : 0;
+    bottom    : 0;
+    z-index   : 999;
+    width     : 350px;
+    overflow-x: hidden
+}
+
+.layui-layout-admin .layui-side {
+    top       : 60px;
+    width     : 260px;
+    overflow-x: hidden
+}
+
+.layui-layout-admin .layui-side-right {
+    top       : 60px;
+    width     : 350px;
+    overflow-x: hidden
+}
+
+.layui-body {
+    position    : absolute;
+    left        : 260px;
+    right       : 350px;
+    top         : 0;
+    bottom      : 0;
+    z-index     : 998;
+    width       : auto;
+    overflow-y  : auto;
+    box-sizing  : border-box;
+    min-width   : 250px;
+    border-left : 1px solid #e6e6e6;
+    border-right: 1px solid #e6e6e6;
+}
+
+.layui-layout-admin .layui-body {
+    bottom: 0;
+}
+
+/* components-list*/
+
+.components-list {
+    padding           : 4px;
+    -webkit-box-sizing: border-box;
+    box-sizing        : border-box;
+    height            : 100%
+}
+
+.components-list .components-item {
+    display           : inline-block;
+    width             : 49%;
+    margin            : 0.5%;
+    margin-top        : 5px;
+    -webkit-transition: -webkit-transform 0ms !important;
+    transition        : -webkit-transform 0ms !important;
+    transition        : transform 0ms !important;
+    transition        : transform 0ms, -webkit-transform 0ms !important
+}
+
+.components-draggable {
+    padding-bottom: 20px
+}
+
+.components-title {
+    font-size: 14px;
+    color    : #222;
+    margin   : 6px 2px
+}
+
+.components-title .svg-icon {
+    color    : #666;
+    font-size: 18px
+}
+
+.components-body {
+    padding      : 8px 10px;
+    background   : #f6f7ff;
+    font-size    : 12px;
+    cursor       : move;
+    border       : 1px dashed #f6f7ff;
+    border-radius: 3px
+}
+
+.components-body .svg-icon {
+    color    : #777;
+    font-size: 15px
+}
+
+.components-body:hover {
+    border: 1px dashed #787be8;
+    color : #787be8
+}
+
+.components-body:hover .svg-icon {
+    color: #787be8
+}
+
+.ghost {
+
+    border       : 1px dashed #e06c1d;
+    outline-width: 0;
+    height       : 39px;
+    box-sizing   : border-box;
+    font-size    : 0;
+    content      : '';
+    overflow     : hidden;
+    padding      : 0;
+}
+.ghost div {
+    background-color:#fff;
+    color:#fff;
+}
+
+.layui-body .active {
+    outline       : 2px solid #409EFF;
+    border        : 1px solid #409EFF;
+    outline-offset: 0;
+}
+
+#formDesignerForm .layui-form-item {
+    position: relative;
+}
+
+#formDesignerForm .grid {
+    padding: 5px 5px;
+}
+
+#formDesignerForm .layui-form-item:hover {
+    border          : 1px solid #409EFF;
+    background-color: #e9f4fd !important;
+}
+
+.widget-view-drag {
+    position   : absolute;
+    left       : -2px;
+    top        : -2px;
+    bottom     : -18px;
+    height     : 28px;
+    line-height: 28px;
+    background : #409EFF;
+    z-index    : 9;
+}
+
+.widget-view-drag i {
+    font-size: 14px;
+    color    : #fff;
+    margin   : 0 5px;
+    cursor   : move;
+}
+
+.select-option-drag {
+    cursor: move;
+}
+
+.select-option-delete {
+    cursor: pointer;
+}
+
+.widget-view-action {
+    position   : absolute;
+    right      : 0;
+    bottom     : 0;
+    height     : 28px;
+    line-height: 28px;
+    background : #409EFF;
+    z-index    : 9;
+}
+
+.widget-view-action i {
+    font-size: 14px;
+    color    : #fff;
+    margin   : 0 5px;
+    cursor   : pointer;
+
+}
+
+#formDesignerForm {
+    background: #fff;
+    border    : 1px dashed #999;
+    min-height: 94%;
+    margin    : 10px;
+    padding   : 10px 10px;
+}
+
+#formDesignerForm .widget-col-list {
+    min-height: 50px;
+    border    : 1px dashed #ccc;
+    background: #fff;
+}
+
+#formDesignerForm .widget-slider {
+    margin: 18px 10px;
+    width : 90%;
+    position: absolute!important;
+}
+
+.layui-empty {
+    margin    : 10px 60px;
+    color     : #9e9e9e;
+    font-size : 16px;
+    text-align: center;
+
+}
+
+#columnProperty .layui-form-item.option {
+    margin-bottom: 2px;
+}
+
+#columnProperty .layui-form-item.option .layui-inline {
+    margin-bottom: 2px;
+}
+
+/* 图片上传 */
+.uploader-list {
+    margin-left: -15px;
+}
+
+.uploader-list .info {
+    position        : relative;
+    margin-top      : -25px;
+    background-color: black;
+    color           : white;
+    filter          : alpha(Opacity=80);
+    -moz-opacity    : 0.5;
+    opacity         : 0.5;
+    width           : 100px;
+    height          : 25px;
+    text-align      : center;
+    display         : none;
+}
+
+.uploader-list .handle {
+    position        : relative;
+    background-color: black;
+    color           : white;
+    filter          : alpha(Opacity=80);
+    -moz-opacity    : 0.5;
+    opacity         : 0.5;
+    width           : 100px;
+    text-align      : right;
+    height          : 18px;
+    margin-bottom   : -18px;
+    display         : none;
+}
+
+.uploader-list .handle i {
+    margin-right: 5px;
+}
+
+.uploader-list .handle i:hover {
+    cursor: pointer;
+}
+
+.uploader-list .file-iteme {
+    margin : 12px 0 0 15px;
+    padding: 1px;
+    float  : left;
+}
+
+
+/*自定义layer颜色*/
+body .cool-black .layui-layer-title {
+    color           : #fff;
+    height          : 50px;
+    line-height     : 50px;
+    background-color: #191a23;
+    border          : none;
+}
+
+body .cool-black .layui-layer-setwin a {
+    color                  : #fff;
+    font-size              : 16px;
+    font-style             : normal;
+    font-family            : layui-icon !important;
+    -webkit-font-smoothing : antialiased;
+    -moz-osx-font-smoothing: grayscale;
+}
+
+body .cool-black .layui-layer-btn a {
+    background: #333;
+}
+
+
+
+.htmlcodeview,
+.importjsoncodeview {
+    position: relative;
+    display : none;
+}
+
+.htmlcodeview textarea,
+.getFormData textarea,
+.importjsoncodeview textarea {
+    display         : block;
+    width           : 760px;
+    height          : 560px;
+    border          : 10px solid #F8F8F8;
+    border-top-width: 0;
+    padding         : 10px;
+    line-height     : 20px;
+    overflow        : auto;
+    background-color: #3F3F3F;
+    color           : #eee;
+    font-size       : 12px;
+    font-family     : Courier New;
+}
+
+.htmlcodeview a,
+.importjsoncodeview a {
+    position: absolute;
+    right   : 20px;
+    bottom  : 20px;
+}
+
+.aboutusview .about {
+    display         : block;
+    width           : 760px;
+    height          : 554px;
+    padding         : 20px 20px;
+    overflow        : hidden;
+    background-color: #191a23;
+    color           : #ccc;
+}
+.aboutusview .about p{
+    line-height: 30px;
+
+}
+
+.aboutusview .about .yellow{
+    color:#e6ec8d;
+}
+
+.layui-disabled {
+    background-color: #f5f7fa;
+    border-color: #dfe4ed;
+    color: #c0c4cc;
+}
+
+.custom-lg{
+    margin: -3px 0px 0px 10px;
+}
+.custom-zc{
+    margin: 0px 0px 0px 10px;
+}
+.custom-sm{
+    margin: 5px 0px 0px 10px;
+}
+.custom-xs{
+    margin: 10px 0px 0px 10px;
+}
+
+.iceEditor-disabled {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+    background-color: rgba(245,247,250,0.79) !important;
+    border-color: #dfe4ed !important;
+    color: #c0c4cc !important;
+    z-index: 1 !important;
+    display: block;
+}

module-form/src/main/resources/static/form-design/modules/formField.js

@@ -0,0 +1,454 @@
+layui.define(['layer'], function (exports) {
+    var field = {
+        input: {
+            id: '-1',
+            index: '-1',
+            label: "单行文本",
+            tag: "input",
+            tagIcon: 'input',
+            placeholder: "请输入",
+            defaultValue: null,
+            labelWidth: 110,
+            width: "100%",
+            clearable: true,
+            maxlength: null,
+            showWordLimit: false,
+            readonly: false,
+            disabled: false,
+            required: true,
+            expression: "",
+            document: ''
+        },
+        password: {
+            id: '-1',
+            index: '-1',
+            label: "密码框",
+            tag: "password",
+            tagIcon: 'password',
+            placeholder: "请输入",
+            defaultValue: null,
+            labelWidth: 110,
+            width: "100%",
+            clearable: true,
+            maxlength: null,
+            showWordLimit: false,
+            readonly: false,
+            disabled: false,
+            required: true,
+            document: ''
+        },
+        select: {
+            id: '-1',
+            index: '-1',
+            label: "下拉框",
+            tag: "select",
+            tagIcon: 'select',
+            labelWidth: 110,
+            width: "100%",
+            disabled: false,
+            required: true,
+            document: '',
+            datasourceType: 'local',
+            remoteUrl: 'http://',
+            remoteMethod: 'post',
+            remoteOptionText: 'options.data.dictName', //映射到text
+            remoteOptionValue: 'options.data.dictId', //映射到value text和value可以是一样的
+            remoteDefaultValue: '12', //表示对应的remoteOptionValue的值
+            options: [{
+                text: 'option1',
+                value: 'value1',
+                checked: true,
+            }, {
+                text: 'option2',
+                value: 'value2',
+                checked: false,
+            }, {
+                text: 'option3',
+                value: 'value3',
+                checked: false,
+            },]
+        },
+        radio: {
+            id: '-1',
+            index: '-1',
+            label: "单选组",
+            tag: "radio",
+            tagIcon: 'radio',
+            labelWidth: 110,
+            disabled: false,
+            document: '',
+            datasourceType: 'local',
+            remoteUrl: 'http://',
+            remoteMethod: 'post',
+            remoteOptionText: 'options.data.dictName', //映射到text
+            remoteOptionValue: 'options.data.dictId', //映射到value text和value可以是一样的
+            options: [{
+                text: 'option1',
+                value: 'value1',
+                checked: true,
+            }, {
+                text: 'option2',
+                value: 'value2',
+                checked: false,
+            }, {
+                text: 'option3',
+                value: 'value3',
+                checked: false,
+            },]
+        },
+        checkbox: {
+            id: '-1',
+            index: '-1',
+            label: "复选组",
+            tag: "checkbox",
+            tagIcon: 'checkbox',
+            labelWidth: 110,
+            disabled: false,
+            required: true,
+            document: '',
+            datasourceType: 'local',
+            remoteUrl: 'http://',
+            remoteMethod: 'post',
+            remoteOptionText: 'options.data.dictName', //映射到text
+            remoteOptionValue: 'options.data.dictId', //映射到value text和value可以是一样的
+            options: [{
+                text: 'option1',
+                value: 'value1',
+                checked: true,
+            }, {
+                text: 'option2',
+                value: 'value2',
+                checked: true,
+            }, {
+                text: 'option3',
+                value: 'value3',
+                checked: false,
+            },]
+        },
+        switch: {
+            id: '-1',
+            index: '-1',
+            label: "开关",
+            tag: "switch",
+            tagIcon: 'switch',
+            labelWidth: 110,
+            width: "100%",
+            switchValue: false,
+            showWordLimit: false,
+            disabled: false,
+            document: '',
+        },
+        slider: {
+            id: '-1',
+            index: '-1',
+            label: "滑块",
+            tag: "slider",
+            tagIcon: 'slider',
+            labelWidth: 110,
+            width: "100%",
+            defaultValue: 10,
+            maxValue: 100,
+            minValue: 1,
+            stepValue: 2,
+            isInput: true,
+            disabled: false,
+            document: '',
+        },
+        numberInput: {
+            id: '-1',
+            index: '-1',
+            label: "数字输入框",
+            tag: "numberInput",
+            tagIcon: 'numberInput',
+            labelWidth: 110,
+            width: "100%",
+            defaultValue: 0,
+            maxValue: 100,
+            minValue: 0,
+            stepValue: 1,
+            disabled: false,
+            document: '',
+        },
+        labelGeneration: {
+            id: '-1',
+            index: '-1',
+            label: "标签组件",
+            tag: "labelGeneration",
+            tagIcon: 'labelGeneration',
+            labelWidth: 110,
+            width: "100%",
+            isEnter: false,
+            disabled: false,
+            document: '',
+        },
+        bottom: {
+            id: '-1',
+            index: '-1',
+            label: "按钮组件",
+            tag: "bottom",
+            tagIcon: 'bottom',
+            labelWidth: 110,
+            buttonIcon: "",
+            buttonVlaue: "按钮",
+            buttonType: "",
+            buttonSize: "",
+            isLabel: true,
+            disabled: false,
+            document: '',
+        },
+        sign: {
+            id: '-1',
+            index: '-1',
+            label: "签名组件",
+            tag: "sign",
+            tagIcon: 'sign',
+            labelWidth: 110,
+            buttonVlaue: "手写签名",
+            buttonIcon: "",
+            data: "",
+            disabled: false,
+            document: '',
+        },
+        iconPicker: {
+            id: '-1',
+            index: '-1',
+            label: "图标选择器",
+            tag: "iconPicker",
+            tagIcon: 'iconPicker',
+            labelWidth: 110,
+            defaultValue: '',
+            iconPickerSearch: true,
+            iconPickerPage: true,
+            iconPickerLimit: 12,
+            iconPickerCellWidth: '43px',
+            disabled: false,
+            document: '',
+        },
+        cron: {
+            id: '-1',
+            index: '-1',
+            label: "Cron表达式",
+            tag: "cron",
+            tagIcon: 'cron',
+            placeholder: "请输入cron表达式,如:0 0 12 * * ?",
+            labelWidth: 110,
+            width: "100%",
+            defaultValue: '* * * * * ?',
+            cronUrl: '',
+            disabled: false,
+            required: true,
+            document: '',
+        },
+        date: {
+            id: '-1',
+            index: '-1',
+            label: "日期",
+            tag: "date",
+            tagIcon: 'date',
+            labelWidth: 110,
+            width: "100%",
+            clearable: true,
+            maxlength: null,
+            dateDefaultValue: '2021-05-25',
+            datetype: "date", //year month date time datetime
+            range: false,
+            dateformat: "yyyy-MM-dd",
+            isInitValue: false,
+            dataMaxValue: "2088-12-31",
+            dataMinValue: "1900-01-01",
+            trigger: null, //自定义弹出控件的事件
+            position: "absolute", //fixed,static,abolute
+            theme: "default",
+            mark: null, //每年的日期	{'0-9-18': '国耻'}	0 即代表每一年
+            showBottom: true,
+            zindex: 66666666,
+            disabled: false,
+            required: true,
+            document: '',
+        },
+        dateRange: {
+            id: '-1',
+            index: '-1',
+            label: "日期范围",
+            tag: "dateRange",
+            tagIcon: 'dateRange',
+            labelWidth: 110,
+            //width:"100%",
+            dateRangeDefaultValue: "2021-06-19 - 2021-07-17",
+            clearable: true,
+            maxlength: null,
+            datetype: "date", //year month date time datetime
+            dateformat: "yyyy-MM-dd",
+            isInitValue: true,
+            dataMaxValue: "2088-12-31",
+            dataMinValue: "1900-01-01",
+            trigger: null, //自定义弹出控件的事件
+            position: "absolute", //fixed,static,abolute
+            theme: "default",
+            mark: null, //每年的日期	{'0-9-18': '国耻'}	0 即代表每一年
+            showBottom: true,
+            zindex: 66666666,
+            disabled: false,
+            required: true,
+            document: '',
+        },
+        rate: {
+            id: '-1',
+            index: '-1',
+            label: "评分",
+            tag: "rate",
+            tagIcon: 'rate',
+            labelWidth: 110,
+            defaultValue: 0,
+            rateLength: 5, //星星长度
+            half: false,
+            text: false,
+            theme: "default",
+            showBottom: true,
+            readonly: false,
+            document: '',
+        },
+        carousel: {
+            id: '-1',
+            index: '-1',
+            label: "轮播图",
+            tag: "carousel",
+            tagIcon: 'carousel',
+            width: "100%",
+            height: "500px",
+            full: false, //是否全屏
+            anim: "default", //轮播切换动画方式,
+            interval: 3000, //切换时间 毫秒
+            startIndex: 0, //初始索引
+            arrow: "hover", //切换箭头默认显示状态
+            autoplay: true, //是否自动切换
+            document: '',
+            datasourceType: 'local',
+            remoteUrl: 'http://',
+            remoteMethod: 'post',
+            remoteOptionText: 'options.data.dictName', //映射到text
+            remoteOptionValue: 'options.data.dictId', //映射到value text和value可以是一样的
+            options: [{
+                text: 'banner1',
+                value: './ayq/images/banner1.PNG',
+                checked: true,
+            }, {
+                text: 'banner2',
+                value: './ayq/images/banner2.PNG',
+                checked: false,
+            }, {
+                text: 'banner3',
+                value: './ayq/images/banner3.PNG',
+                checked: false,
+            },]
+        },
+        colorpicker: {
+            id: '-1',
+            index: '-1',
+            label: "颜色选择器",
+            tag: "colorpicker",
+            tagIcon: 'colorpicker',
+            labelWidth: 110,
+            defaultValue: 'rgba(0, 0, 0, 1)',
+            colorformat: "#fff",
+            alpha: false,
+            colors: [],
+            size: "",
+            showBottom: true,
+            disabled: false,
+            document: '',
+        },
+        image: {
+            id: '-1',
+            index: '-1',
+            label: "上传图片",
+            tag: "image",
+            tagIcon: 'image',
+            placeholder: "请输入",
+            defaultValue: null,
+            labelWidth: null,
+            disabled: false,
+            required: true,
+            document: '',
+            uploadUrl: '',
+        },
+        file: {
+            id: '-1',
+            index: '-1',
+            label: "上传文件",
+            tag: "file",
+            tagIcon: 'file',
+            placeholder: "请输入",
+            defaultValue: null,
+            labelWidth: null,
+            disabled: false,
+            required: true,
+            document: '',
+            uploadUrl: '',
+        },
+        textarea: {
+            id: '-1',
+            index: '-1',
+            label: "多行文本",
+            tag: "textarea",
+            tagIcon: 'textarea',
+            placeholder: "请输入",
+            defaultValue: null,
+            width: "100%",
+            readonly: false,
+            disabled: false, //这里就是readonly的医生
+            required: true,
+            document: ''
+        },
+        editor: {
+            id: '-1',
+            index: '-1',
+            label: "编辑器",
+            tag: "editor",
+            tagIcon: 'editor',
+            width: "100%",
+            clearable: true,
+            maxlength: null,
+            showWordLimit: false,
+            menu: ['backColor', 'fontSize', 'foreColor', 'bold', 'italic', 'underline', 'strikeThrough', 'justifyLeft', 'justifyCenter', 'justifyRight', 'indent', 'outdent', 'insertOrderedList', 'insertUnorderedList', 'superscript', 'subscript', 'createLink', 'unlink', 'hr', 'face', 'table', 'files', 'music', 'video', 'insertImage', 'removeFormat', 'code', 'line'],
+            height: "200px",
+            uploadUrl: '/upload/',
+            disabled: false,
+            document: ''
+        },
+        grid: {
+            id: '-1',
+            index: '-1',
+            tag: 'grid',
+            span: 2,
+            columns: [{
+                span: 12,
+                list: [],
+            }, {
+                span: 12,
+                list: [],
+            }]
+        },
+        c1: {
+            name: "输入型组件(基于layui)",
+            list: ['input', 'numberInput', 'password', 'textarea']
+        },
+        c2: {
+            name: "选择型组件(基于layui)",
+            list: ['select', 'radio', 'checkbox', 'switch', 'slider', 'date', 'rate', 'carousel', 'colorpicker', 'image', 'file', 'dateRange']
+        },
+        c3: {
+            name: "布局型组件(基于layui)",
+            list: ['grid', 'bottom']
+        },
+        c4: {
+            name: "扩展组件(基于layui)",
+            list: ['iconPicker', 'cron', 'labelGeneration', 'sign']
+        },
+        c5: {
+            name: "扩展组件(外部)",
+            list: ['editor']
+        }
+    };
+    exports('formField', field);
+});

module-form/src/main/resources/static/form-design/modules/formPreview.css

@@ -0,0 +1,78 @@
+#formPreviewForm .widget-slider {
+    margin: 18px 10px;
+    width : 90%;
+    position: absolute!important;
+}
+.custom-lg{
+    margin: -3px 0px 0px 10px;
+}
+.custom-zc{
+    margin: 0px 0px 0px 10px;
+}
+.custom-sm{
+    margin: 5px 0px 0px 10px;
+}
+.custom-xs{
+    margin: 10px 0px 0px 10px;
+}
+.my-disabled{
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+    background: rgba(191,191,191,.79);
+}
+.iceEditor-disabled {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+    background-color: rgba(245,247,250,0.79) !important;
+    border-color: #dfe4ed !important;
+    color: #c0c4cc !important;
+    z-index: 1 !important;
+    display: block;
+}
+/* 图片上传 */
+.uploader-list {
+    margin-left: -15px;
+}
+.uploader-list .info {
+    position: relative;
+    margin-top: -25px;
+    background-color: black;
+    color: white;
+    filter: alpha(Opacity=80);
+    -moz-opacity: 0.5;
+    opacity: 0.5;
+    width: 100px;
+    height: 25px;
+    text-align: center;
+    display: none;
+}
+.uploader-list .handle {
+    position: relative;
+    background-color: black;
+    color: white;
+    filter: alpha(Opacity=80);
+    -moz-opacity: 0.5;
+    opacity: 0.5;
+    width: 100px;
+    text-align: right;
+    height: 18px;
+    margin-bottom: -18px;
+    display: none;
+}
+.uploader-list .handle i {
+    margin-right: 5px;
+}
+.uploader-list .handle i:hover {
+    cursor: pointer;
+}
+.uploader-list .file-iteme {
+    margin: 12px 0 0 15px;
+    padding: 1px;
+    float: left;
+}

module-form/src/main/resources/static/form-design/modules/iconPicker.js

@@ -0,0 +1,327 @@
+
+layui.define(['laypage', 'form'], function (exports) {
+    "use strict";
+
+    var IconPicker =function () {
+        this.v = '0.1.beta';
+    }, _MOD = 'iconPicker',
+        _this = this,
+        $ = layui.jquery,
+        laypage = layui.laypage,
+        form = layui.form,
+        BODY = 'body',
+        TIPS = '请选择图标';
+
+    /**
+     * 渲染组件
+     */
+    IconPicker.prototype.render = function(options){
+        var opts = options,
+            // DOM选择器
+            elem = opts.elem,
+            // 数据类型：fontClass/unicode
+            type = opts.type == null ? 'fontClass' : opts.type,
+            // 是否分页：true/false
+            page = opts.page,
+            // 每页显示数量
+            limit = limit == null ? 12 : opts.limit,
+            // 是否开启搜索：true/false
+            search = opts.search == null ? true : opts.search,
+            // 点击回调
+            click = opts.click,
+            // json数据
+            data = {},
+            // 唯一标识
+            tmp = new Date().getTime(),
+            // 是否使用的class数据
+            isFontClass = opts.type === 'fontClass',
+            TITLE = 'layui-select-title',
+            TITLE_ID = 'layui-select-title-' + tmp,
+            ICON_BODY = 'layui-iconpicker-' + tmp,
+            PICKER_BODY = 'layui-iconpicker-body-' + tmp,
+            PAGE_ID = 'layui-iconpicker-page-' + tmp,
+            LIST_BOX = 'layui-iconpicker-list-box',
+            selected = 'layui-form-selected',
+            unselect = 'layui-unselect';
+
+        var a = {
+            init: function () {
+                data = common.getData[type]();
+
+                a.hideElem().createSelect().createBody().toggleSelect();
+                common.loadCss();
+                return a;
+            },
+            /**
+             * 隐藏elem
+             */
+            hideElem: function () {
+                $(elem).hide();
+                return a;
+            },
+            /**
+             * 绘制select下拉选择框
+             */
+            createSelect: function () {
+                var selectHtml = '<div class="layui-iconpicker layui-unselect layui-form-select" id="'+ ICON_BODY +'">' +
+                    '<div class="'+ TITLE +'" id="'+ TITLE_ID +'">' +
+                        '<div class="layui-iconpicker-item">'+
+                            '<span class="layui-iconpicker-icon layui-unselect">' +
+                                '<i class="layui-icon">&#xe617;</i>' +
+                            '</span>'+
+                            '<i class="layui-edge"></i>' +
+                        '</div>'+
+                    '</div>' +
+                    '<div class="layui-anim layui-anim-upbit" style="">' +
+                        '123' +
+                    '</div>';
+                $(elem).after(selectHtml);
+                return a;
+            },
+            /**
+             * 展开/折叠下拉框
+             */
+            toggleSelect: function () {
+                var item = '#' + TITLE_ID + ' .layui-iconpicker-item,#' + TITLE_ID + ' .layui-iconpicker-item .layui-edge';
+                a.event('click', item, function (e) {
+                    console.log('xxxx');
+                    var $icon = $('#' + ICON_BODY);
+                    if ($icon.hasClass(selected)) {
+                        $icon.removeClass(selected).addClass(unselect);
+                    } else {
+                        $icon.addClass(selected).removeClass(unselect);
+                    }
+                    e.stopPropagation();
+                });
+                return a;
+            },
+            /**
+             * 绘制主体部分
+             */
+            createBody: function () {
+                // 获取数据
+                var searchHtml = '';
+
+                if (search) {
+                    searchHtml = '<div class="layui-iconpicker-search">' +
+                        '<input class="layui-input">' +
+                        '<i class="layui-icon">&#xe615;</i>' +
+                        '</div>';
+                }
+
+                // 组合dom
+                var bodyHtml = '<div class="layui-iconpicker-body" id="'+ PICKER_BODY +'">' +
+                    searchHtml +
+                        '<div class="'+ LIST_BOX +'"></div> '+
+                     '</div>';
+                $('#' + ICON_BODY).find('.layui-anim').eq(0).html(bodyHtml);
+                a.search().createList().check().page();
+
+                return a;
+            },
+            /**
+             * 绘制图标列表
+             * @param text 模糊查询关键字
+             * @returns {string}
+             */
+            createList: function (text) {
+                var d = data,
+                    l = d.length,
+                    pageHtml = '',
+                    listHtml = $('<div class="layui-iconpicker-list">')//'<div class="layui-iconpicker-list">';
+
+                // 计算分页数据
+                var _limit = limit, // 每页显示数量
+                    _pages = l % _limit === 0 ? l / _limit : parseInt(l / _limit + 1), // 总计多少页
+                    _id = PAGE_ID;
+
+                // 图标列表
+                var icons = [];
+
+                for (var i = 0; i < l; i++) {
+                    var obj = d[i];
+
+                    // 判断是否模糊查询
+                    if (text && obj.indexOf(text) === -1) {
+                        continue;
+                    }
+
+                    // 每个图标dom
+                    var icon = '<div class="layui-iconpicker-icon-item" title="'+ obj +'">';
+                    if (isFontClass){
+                        icon += '<i class="layui-icon '+ obj +'"></i>';
+                    } else {
+                        icon += '<i class="layui-icon">'+ obj.replace('amp;', '') +'</i>';
+                    }
+                    icon += '</div>';
+
+                    icons.push(icon);
+                }
+
+                // 查询出图标后再分页
+                l = icons.length;
+                _pages = l % _limit === 0 ? l / _limit : parseInt(l / _limit + 1);
+                for (var i = 0; i < _pages; i++) {
+                    // 按limit分块
+                    var lm = $('<div class="layui-iconpicker-icon-limit" id="layui-iconpicker-icon-limit-'+ (i+1) +'">');
+
+                    for (var j = i * _limit; j < (i+1) * _limit && j < l; j++) {
+                        lm.append(icons[j]);
+                    }
+
+                    listHtml.append(lm);
+                }
+
+                // 无数据
+                if (l === 0) {
+                    listHtml.append('<p class="layui-iconpicker-tips">无数据</p>');
+                }
+
+                // 判断是否分页
+                if (page){
+                    $('#' + PICKER_BODY).addClass('layui-iconpicker-body-page');
+                    pageHtml = '<div class="layui-iconpicker-page" id="'+ PAGE_ID +'">' +
+                        '<div class="layui-iconpicker-page-count">' +
+                        '<span id="'+ PAGE_ID +'-current">1</span>/' +
+                        '<span id="'+ PAGE_ID +'-pages">'+ _pages +'</span>' +
+                        ' (<span id="'+ PAGE_ID +'-length">'+ l +'</span>)' +
+                        '</div>' +
+                        '<div class="layui-iconpicker-page-operate">' +
+                        '<i class="layui-icon" id="'+ PAGE_ID +'-prev" data-index="0" prev>&#xe603;</i> ' +
+                        '<i class="layui-icon" id="'+ PAGE_ID +'-next" data-index="2" next>&#xe602;</i> ' +
+                        '</div>' +
+                        '</div>';
+                }
+
+
+                $('#' + ICON_BODY).find('.layui-anim').find('.' + LIST_BOX).html('').append(listHtml).append(pageHtml);
+                return a;
+            },
+            // 分页
+            page: function () {
+                var icon = '#' + PAGE_ID + ' .layui-iconpicker-page-operate .layui-icon';
+
+                $(icon).unbind('click');
+                a.event('click', icon, function (e) {
+                   var elem = e.currentTarget,
+                       total = parseInt($('#' +PAGE_ID + '-pages').html()),
+                       isPrev = $(elem).attr('prev') !== undefined,
+                       // 按钮上标的页码
+                       index = parseInt($(elem).attr('data-index')),
+                       $cur = $('#' +PAGE_ID + '-current'),
+                       // 点击时正在显示的页码
+                       current = parseInt($cur.html());
+
+                    // 分页数据
+                    if (isPrev && current > 1) {
+                        current=current-1;
+                        $(icon + '[prev]').attr('data-index', current);
+                    } else if (!isPrev && current < total){
+                        current=current+1;
+                        $(icon + '[next]').attr('data-index', current);
+                    }
+                    $cur.html(current);
+
+                    // 图标数据
+                    $('.layui-iconpicker-icon-limit').hide();
+                    $('#layui-iconpicker-icon-limit-' + current).show();
+                    e.stopPropagation();
+                });
+                return a;
+            },
+            /**
+             * 搜索
+             */
+            search: function () {
+                var item = '#' + PICKER_BODY + ' .layui-iconpicker-search .layui-input';
+                a.event('input propertychange', item, function (e) {
+                    var elem = e.target,
+                        t = $(elem).val();
+                    a.createList(t);
+                });
+                a.event('click', item, function (e) {
+                    e.stopPropagation();
+                });
+                return a;
+            },
+            /**
+             * 点击选中图标
+             */
+            check: function () {
+                var item = '#' + PICKER_BODY + ' .layui-iconpicker-icon-item';
+                a.event('click', item, function (e) {
+                    var el = $(e.currentTarget).find('.layui-icon'),
+                        icon = '';
+                    if (isFontClass) {
+                        var clsArr = el.attr('class').split(/[\s\n]/),
+                            cls = clsArr[1],
+                            icon = cls;
+                        $('#' + TITLE_ID).find('.layui-iconpicker-item .layui-icon').html('').attr('class', clsArr.join(' '));
+                    } else {
+                        var cls = el.html(),
+                            icon = cls;
+                        $('#' + TITLE_ID).find('.layui-iconpicker-item .layui-icon').html(icon);
+                    }
+
+                    $('#' + ICON_BODY).removeClass(selected).addClass(unselect);
+                    $(elem).attr('value', icon);
+                    // 回调
+                    if (click) {
+                        click({
+                            icon: icon
+                        });
+                    }
+
+                });
+                return a;
+            },
+            event: function (evt, el, fn) {
+                $(BODY).on(evt, el, fn);
+            }
+        };
+
+        var common = {
+            /**
+             * 加载样式表
+             */
+            loadCss: function () {
+                var css = '.layui-iconpicker {max-width: 280px;}.layui-iconpicker .layui-anim{display:none;position:absolute;left:0;top:42px;padding:5px 0;z-index:899;min-width:100%;border:1px solid #d2d2d2;max-height:300px;overflow-y:auto;background-color:#fff;border-radius:2px;box-shadow:0 2px 4px rgba(0,0,0,.12);box-sizing:border-box;}.layui-iconpicker-item{border:1px solid #e6e6e6;width:90px;height:38px;border-radius:4px;cursor:pointer;position:relative;}.layui-iconpicker-icon{border-right:1px solid #e6e6e6;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;display:block;width:60px;height:100%;float:left;text-align:center;background:#fff;transition:all .3s;}.layui-iconpicker-icon i{line-height:38px;font-size:18px;}.layui-iconpicker-item > .layui-edge{left:70px;}.layui-iconpicker-item:hover{border-color:#D2D2D2!important;}.layui-iconpicker-item:hover .layui-iconpicker-icon{border-color:#D2D2D2!important;}.layui-iconpicker.layui-form-selected .layui-anim{display:block;}.layui-iconpicker-body{padding:6px;}.layui-iconpicker .layui-iconpicker-list{background-color:#fff;border:1px solid #ccc;border-radius:4px;}.layui-iconpicker .layui-iconpicker-icon-item{display:inline-block;width:21.1%;line-height:36px;text-align:center;cursor:pointer;vertical-align:top;height:36px;margin:4px;border:1px solid #ddd;border-radius:2px;transition:300ms;}.layui-iconpicker .layui-iconpicker-icon-item i.layui-icon{font-size:17px;}.layui-iconpicker .layui-iconpicker-icon-item:hover{background-color:#eee;border-color:#ccc;-webkit-box-shadow:0 0 2px #aaa,0 0 2px #fff inset;-moz-box-shadow:0 0 2px #aaa,0 0 2px #fff inset;box-shadow:0 0 2px #aaa,0 0 2px #fff inset;text-shadow:0 0 1px #fff;}.layui-iconpicker-search{position:relative;margin:0 0 6px 0;border:1px solid #e6e6e6;border-radius:2px;transition:300ms;}.layui-iconpicker-search:hover{border-color:#D2D2D2!important;}.layui-iconpicker-search .layui-input{cursor:text;display:inline-block;width:86%;border:none;padding-right:0;margin-top:1px;}.layui-iconpicker-search .layui-icon{position:absolute;top:11px;right:4%;}.layui-iconpicker-tips{text-align:center;padding:8px 0;cursor:not-allowed;}.layui-iconpicker-page{margin-top:6px;margin-bottom:-6px;font-size:12px;padding:0 2px;}.layui-iconpicker-page-count{display:inline-block;}.layui-iconpicker-page-operate{display:inline-block;float:right;cursor:default;}.layui-iconpicker-page-operate .layui-icon{font-size:12px;cursor:pointer;}.layui-iconpicker-body-page .layui-iconpicker-icon-limit{display:none;}.layui-iconpicker-body-page .layui-iconpicker-icon-limit:first-child{display:block;}';
+                $('head').append('<style rel="stylesheet">'+css+'</style>');
+            },
+            /**
+             * 获取数据
+             */
+            getData: {
+                fontClass: function () {
+                    var arr = ["layui-icon-rate-half","layui-icon-rate","layui-icon-rate-solid","layui-icon-cellphone","layui-icon-vercode","layui-icon-login-wechat","layui-icon-login-qq","layui-icon-login-weibo","layui-icon-password","layui-icon-username","layui-icon-refresh-3","layui-icon-auz","layui-icon-spread-left","layui-icon-shrink-right","layui-icon-snowflake","layui-icon-tips","layui-icon-note","layui-icon-home","layui-icon-senior","layui-icon-refresh","layui-icon-refresh-1","layui-icon-flag","layui-icon-theme","layui-icon-notice","layui-icon-website","layui-icon-console","layui-icon-face-surprised","layui-icon-set","layui-icon-template-1","layui-icon-app","layui-icon-template","layui-icon-praise","layui-icon-tread","layui-icon-male","layui-icon-female","layui-icon-camera","layui-icon-camera-fill","layui-icon-more","layui-icon-more-vertical","layui-icon-rmb","layui-icon-dollar","layui-icon-diamond","layui-icon-fire","layui-icon-return","layui-icon-location","layui-icon-read","layui-icon-survey","layui-icon-face-smile","layui-icon-face-cry","layui-icon-cart-simple","layui-icon-cart","layui-icon-next","layui-icon-prev","layui-icon-upload-drag","layui-icon-upload","layui-icon-download-circle","layui-icon-component","layui-icon-file-b","layui-icon-user","layui-icon-find-fill","layui-icon-loading","layui-icon-loading-1","layui-icon-add-1","layui-icon-play","layui-icon-pause","layui-icon-headset","layui-icon-video","layui-icon-voice","layui-icon-speaker","layui-icon-fonts-del","layui-icon-fonts-code","layui-icon-fonts-html","layui-icon-fonts-strong","layui-icon-unlink","layui-icon-picture","layui-icon-link","layui-icon-face-smile-b","layui-icon-align-left","layui-icon-align-right","layui-icon-align-center","layui-icon-fonts-u","layui-icon-fonts-i","layui-icon-tabs","layui-icon-radio","layui-icon-circle","layui-icon-edit","layui-icon-share","layui-icon-delete","layui-icon-form","layui-icon-cellphone-fine","layui-icon-dialogue","layui-icon-fonts-clear","layui-icon-layer","layui-icon-date","layui-icon-water","layui-icon-code-circle","layui-icon-carousel","layui-icon-prev-circle","layui-icon-layouts","layui-icon-util","layui-icon-templeate-1","layui-icon-upload-circle","layui-icon-tree","layui-icon-table","layui-icon-chart","layui-icon-chart-screen","layui-icon-engine","layui-icon-triangle-d","layui-icon-triangle-r","layui-icon-file","layui-icon-set-sm","layui-icon-add-circle","layui-icon-404","layui-icon-about","layui-icon-up","layui-icon-down","layui-icon-left","layui-icon-right","layui-icon-circle-dot","layui-icon-search","layui-icon-set-fill","layui-icon-group","layui-icon-friends","layui-icon-reply-fill","layui-icon-menu-fill","layui-icon-log","layui-icon-picture-fine","layui-icon-face-smile-fine","layui-icon-list","layui-icon-release","layui-icon-ok","layui-icon-help","layui-icon-chat","layui-icon-top","layui-icon-star","layui-icon-star-fill","layui-icon-close-fill","layui-icon-close","layui-icon-ok-circle","layui-icon-add-circle-fine"];
+                    return arr;
+                },
+                unicode: function () {
+                    return ["&amp;#xe6c9;","&amp;#xe67b;","&amp;#xe67a;","&amp;#xe678;","&amp;#xe679;","&amp;#xe677;","&amp;#xe676;","&amp;#xe675;","&amp;#xe673;","&amp;#xe66f;","&amp;#xe9aa;","&amp;#xe672;","&amp;#xe66b;","&amp;#xe668;","&amp;#xe6b1;","&amp;#xe702;","&amp;#xe66e;","&amp;#xe68e;","&amp;#xe674;","&amp;#xe669;","&amp;#xe666;","&amp;#xe66c;","&amp;#xe66a;","&amp;#xe667;","&amp;#xe7ae;","&amp;#xe665;","&amp;#xe664;","&amp;#xe716;","&amp;#xe656;","&amp;#xe653;","&amp;#xe663;","&amp;#xe6c6;","&amp;#xe6c5;","&amp;#xe662;","&amp;#xe661;","&amp;#xe660;","&amp;#xe65d;","&amp;#xe65f;","&amp;#xe671;","&amp;#xe65e;","&amp;#xe659;","&amp;#xe735;","&amp;#xe756;","&amp;#xe65c;","&amp;#xe715;","&amp;#xe705;","&amp;#xe6b2;","&amp;#xe6af;","&amp;#xe69c;","&amp;#xe698;","&amp;#xe657;","&amp;#xe65b;","&amp;#xe65a;","&amp;#xe681;","&amp;#xe67c;","&amp;#xe601;","&amp;#xe857;","&amp;#xe655;","&amp;#xe770;","&amp;#xe670;","&amp;#xe63d;","&amp;#xe63e;","&amp;#xe654;","&amp;#xe652;","&amp;#xe651;","&amp;#xe6fc;","&amp;#xe6ed;","&amp;#xe688;","&amp;#xe645;","&amp;#xe64f;","&amp;#xe64e;","&amp;#xe64b;","&amp;#xe62b;","&amp;#xe64d;","&amp;#xe64a;","&amp;#xe64c;","&amp;#xe650;","&amp;#xe649;","&amp;#xe648;","&amp;#xe647;","&amp;#xe646;","&amp;#xe644;","&amp;#xe62a;","&amp;#xe643;","&amp;#xe63f;","&amp;#xe642;","&amp;#xe641;","&amp;#xe640;","&amp;#xe63c;","&amp;#xe63b;","&amp;#xe63a;","&amp;#xe639;","&amp;#xe638;","&amp;#xe637;","&amp;#xe636;","&amp;#xe635;","&amp;#xe634;","&amp;#xe633;","&amp;#xe632;","&amp;#xe631;","&amp;#xe630;","&amp;#xe62f;","&amp;#xe62e;","&amp;#xe62d;","&amp;#xe62c;","&amp;#xe629;","&amp;#xe628;","&amp;#xe625;","&amp;#xe623;","&amp;#xe621;","&amp;#xe620;","&amp;#xe61f;","&amp;#xe61c;","&amp;#xe60b;","&amp;#xe619;","&amp;#xe61a;","&amp;#xe603;","&amp;#xe602;","&amp;#xe617;","&amp;#xe615;","&amp;#xe614;","&amp;#xe613;","&amp;#xe612;","&amp;#xe611;","&amp;#xe60f;","&amp;#xe60e;","&amp;#xe60d;","&amp;#xe60c;","&amp;#xe60a;","&amp;#xe609;","&amp;#xe605;","&amp;#xe607;","&amp;#xe606;","&amp;#xe604;","&amp;#xe600;","&amp;#xe658;","&amp;#x1007;","&amp;#x1006;","&amp;#x1005;","&amp;#xe608;"];
+                }
+            }
+        };
+
+        a.init();
+        return new IconPicker();
+    };
+
+    /**
+     * 选中图标
+     * @param filter lay-filter
+     * @param iconName 图标名称，自动识别fontClass/unicode
+     */
+    IconPicker.prototype.checkIcon = function (filter, iconName){
+        var p = $('*[lay-filter='+ filter +']').next().find('.layui-iconpicker-item .layui-icon'),
+            c = iconName;
+
+        if (c.indexOf('#xe') > 0){
+            p.html(c);
+        } else {
+            p.html('').attr('class', 'layui-icon ' + c);
+        }
+    };
+
+    var iconPicker = new IconPicker();
+    exports(_MOD, iconPicker);
+});

module-form/src/main/resources/static/form-design/modules/labelGeneration.css

@@ -0,0 +1,4 @@
+.none-transition{
+    transition: none;
+    -webkit-transition: none;
+}

module-form/src/main/resources/static/form-design/modules/labelGeneration.js

@@ -0,0 +1,256 @@
+layui.define(['form'], function(exports) {
+    var form = layui.form,
+        $ = layui.jquery,
+        layer = layui.layer,
+        index = 0,
+        oldId,
+        MOD_NAME = 'labelGeneration',
+        formField = {
+            label: {
+                id: '-1',
+                tag: "label",
+            },
+        },
+        labelGeneration = {
+            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);
+            }
+        },
+        Class = function(options) {
+            var that = this;
+            that.config = $.extend({}, that.config, labelGeneration.config, options);
+            that.render();
+        },
+        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;
+                }
+            }
+        }
+    Class.prototype.config = {
+        version: "1.0.0",
+        Author: "谁家没一个小强",
+        generateId: 0,
+        data: [],
+        isEnter: false
+    };
+    /* 自动生成ID 当前页面自动排序*/
+    Class.prototype.autoId = function(tag) {
+        var that = this,
+            options = that.config;
+        options.generateId = options.generateId + 1;
+        return tag + '_' + options.generateId;
+    }
+    Class.prototype.components = {
+        label: {
+            render: function(json, options) {
+                var _html = '<blockquote class="layui-elem-quote">';
+                _html += '<div class="layui-form layui-form-pane layui-form-item">';
+                _html += '<label class="layui-form-label">输入标签</label>';
+                _html += '<div class="layui-input-inline">';
+                if (options.isEnter) {
+                    _html += '<input type="text" id="{0}"  placeholder="按回车生成标签" autocomplete="off" class="layui-input">'.format(json.id);
+                } else {
+                    _html += '<input type="text" id="{0}" placeholder="通过按钮生成标签" autocomplete="off" class="layui-input">'.format(json.id);
+                }
+                _html += '</div>';
+                if (!options.isEnter) {
+                    _html += '<button type="button" id="{0}-button" class="layui-btn layui-btn-normal">确定</button>'.format(json.id);
+                }
+                _html += '<label class="layui-form-label">颜色选择</label>';
+                _html += '<div class="layui-input-inline">';
+                _html += '<select lay-filter="{0}-switchTest">'.format(json.id);
+                _html += '<option value="" selected>墨绿色</option>';
+                _html += '<option value="layui-btn-primary">原始色</option>';
+                _html += '<option value="layui-btn-normal">天蓝色</option>';
+                _html += '<option value="layui-btn-warm">暖黄色</option>';
+                _html += '<option value="layui-btn-danger">红色</option>';
+                _html += '</select>';
+                _html += '</div>';
+                _html += '</div>';
+                _html += '<div id="{0}-content" class="layui-btn-container"></div>'.format(json.id);
+                _html += '</blockquote>';
+                return _html;
+            },
+            update: function(json) {},
+            /* 获取对象 */
+            jsonData: function(id, that) {
+                //分配一个新的ID
+                var _json = JSON.parse(JSON.stringify(formField.label));
+                _json.id = id == undefined ? that.autoId(_json.tag) : id;
+                that.checkId(_json, that);
+                return _json;
+            }
+        }
+    };
+    /* 判定id是否重复*/
+    Class.prototype.checkId = function(json, that) {
+        if ($("#" + json.id + "-content").length != 0) {
+            json.id = that.autoId(json.tag);
+            that.checkId(json);
+        } else {
+            return;
+        }
+    }
+    Class.prototype.bindGridSortEvent = function(json) {
+        var that = this,
+            options = that.config;
+        var formItemSort = Sortable.create(document.getElementById(json.id + "-content"), {
+            group: {
+                name: 'group' + json.id
+            },
+            animation: 1000,
+            onEnd: function(evt) {
+                var _values = $("#" + json.id + "-content").find("div");
+                var ops = [];
+                for (var i = 0; i < _values.length; i++) {
+                    ops.push({
+                        "ngColor": $(_values[i]).attr("ng-color"),
+                        "value": $(_values[i]).text()
+                    });
+                }
+                options.data = ops;
+            }
+        });
+    }
+    /* 绑定事件*/
+    Class.prototype.deleteValue = function(value, ngValue) {
+        var that = this,
+            options = that.config;
+        for (var i = 0; i < options.data.length; i++) {
+            if (options.data[i].value === value && options.data[i].ngColor === ngValue) {
+                options.data.splice(i, 1);
+                break;
+            }
+        }
+    }
+    /* 绑定事件*/
+    Class.prototype.bindPropertyEvent = function(_json) {
+        var that = this,
+            options = that.config;
+        var colorClass = "";
+        if (options.isEnter) {
+            $("#" + _json.id).keypress(function(event) {
+                if (event.which === 13) {
+                    var _value = $(this).val();
+                    if (_value === "") {
+                        layer.msg('标签值不能为空');
+                        return;
+                    }
+                    index = index + 1;
+                    var _html = '<div class="layui-btn {0} none-transition" id="{2}" ng-index="{3}" ng-color="{0}">{1}<i class="layui-icon layui-icon-close"></i></div>'.format(colorClass, _value, _json.id + index, index);
+                    $("#" + _json.id + "-content").append(_html);
+                    options.data.push({
+                        "ngColor": colorClass,
+                        "value": _value
+                    });
+                    $("#" + _json.id + index + " .layui-icon-close").click(function() {
+                        that.deleteValue($(this).parent().text(), $(this).parent().attr("ng-color"));
+                        $(this).parent().remove();
+                    });
+                    return false;
+                }
+            });
+        } else {
+            $("#" + _json.id + "-button").click(function(event) {
+                var _value = $("#" + _json.id).val();
+                if (_value === "") {
+                    layer.msg('标签值不能为空');
+                    return;
+                }
+                index = index + 1;
+                var _html = '<div class="layui-btn {0} none-transition" id="{2}" ng-index="{3}" ng-color="{0}">{1}<i class="layui-icon layui-icon-close"></i></div>'.format(colorClass, _value, _json.id + index, index);
+                $("#" + _json.id + "-content").append(_html);
+                options.data.push({
+                    "ngColor": colorClass,
+                    "value": _value
+                });
+                $("#" + _json.id + index + " .layui-icon-close").click(function() {
+                    that.deleteValue($(this).parent().text(), $(this).parent().attr("ng-color"));
+                    $(this).parent().remove();
+                });
+            });
+        }
+        form.on('select(' + _json.id + '-switchTest)', function(data) {
+            colorClass = data.value;
+        });
+        for (var i = 0; i < options.data.length; i++) {
+            index = index + 1;
+            var _html = '<div class="layui-btn {0} none-transition" id="{2}" ng-index="{3}" ng-color="{0}">{1}<i class="layui-icon layui-icon-close"></i></div>'.format(options.data[i].ngColor, options.data[i].value, _json.id + index, index);
+            $("#" + _json.id + "-content").append(_html);
+            $("#" + _json.id + index + " .layui-icon-close").click(function() {
+                that.deleteValue($(this).parent().text(), $(this).parent().attr("ng-color"));
+                $(this).parent().remove();
+            });
+        }
+    }
+    /* 渲染组件 */
+    Class.prototype.renderComponents = function() {
+        var that = this,
+            options = that.config;
+        var elem = $(options.elem);
+        elem.empty();
+        var jsonData = that.components['label'].jsonData(undefined, that);
+        elem.append(that.components['label'].render(jsonData, options));
+        that.bindPropertyEvent(jsonData);
+        that.bindGridSortEvent(jsonData);
+        form.render();
+    }
+    Class.prototype.reload = function(options) {
+        var that = this;
+        options = options || {}; //如果是空的话，就赋值 {}
+        that.config = $.extend({}, that.config, labelGeneration.config, options);
+        that.render(options);
+    }
+    //核心入口 初始化一个 regionSelect 类
+    labelGeneration.render = function(options) {
+        var ins = new Class(options);
+        return thisIns.call(ins);
+    }
+    /**
+     * 渲染组件
+     */
+    Class.prototype.render = function(options) {
+        var that = this,
+            options = that.config;
+        that.renderComponents();
+    }
+    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(MOD_NAME, labelGeneration);
+});

module-form/src/main/resources/templates/form-design/save.html

@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html lang="en" xmlns:th="http://www.thymeleaf.org">
+<head>
+    <base th:href="${#request.getContextPath() + '/'}">
+    <meta charset="utf-8">
+    <meta name="renderer" content="webkit">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+    <meta name="viewport"
+          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
+    <link rel="stylesheet" href="assets/fonts/font-awesome/css/font-awesome.css"/>
+    <link rel="stylesheet" href="assets/js/vendor/viewer/viewer.min.css">
+    <link rel="stylesheet" href="assets/layuiadmin/layui/css/layui.css" media="all">
+    <link rel="stylesheet" href="assets/layuiadmin/style/admin.css" media="all">
+    <link rel="stylesheet" href="static/form-design/modules/cron.css"/>
+    <link rel="stylesheet" href="static/form-design/modules/labelGeneration.css"/>
+    <link rel="stylesheet" href="static/form-design/modules/formDesigner.css"/>
+</head>
+
+<body class="layui-layout-body">
+<!--<button type="button" id="test">aa</button>-->
+<input type="hidden" th:value="${formId}" id="fromId">
+<div style="height: 100%; width: 100%;" id="formdesigner"></div>
+<script src="assets/layuiadmin/layui/layui.js"></script>
+
+<script type="text/javascript" src="static/form-design/js/config.js"></script>
+<script type="text/javascript" src="static/form-design/modules/Sortable/Sortable.js"></script>
+<!--htmlformat 为js-beautify代码-->
+<script type="text/javascript" src="static/form-design/js/htmlformat.js"></script>
+<script type="text/javascript" src="static/form-design/js/jsformat.js"></script>
+<script type="text/javascript" src="static/form-design/modules/iceEditor/iceEditor.js"></script>
+<script>
+    layui.config({
+        base: 'static/form-design/modules/'
+    }).use(['layer', 'formDesigner'], function () {
+        var formDesigner = layui.formDesigner;
+        var data = [];
+        var render = formDesigner.render({
+            data: data,
+            elem: '#formdesigner'
+        });
+    });
+</script>
+</body>
+</html>