SpringBoot +LayUI 实现表单设计器

在设计OA开发时会涉及流程动态绑定表单，基于这种情况，我集成了网上开源的LayUI 表单设计器：html" class="superseo">layui-form-create: layui表单生成器

效果展示:

默认展示页面：

修改页面：

项目整体结构：

DesignerFormController

package com.zzg.controller;

import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.servlet.ModelAndView;

@RequestMapping("/designer/form")
@RestController
public class DesignerFormController {
    private static Logger logger= LoggerFactory.getLogger(ActivitiController.class);

    /**
     * 表单生成器首页
     * @return
     */
    @GetMapping("/index")
    public ModelAndView index() {
        return new ModelAndView("redirect:/designerForm.html");
    }

}

css/designer.css

html,body{background-color: #f2f2f2}
.layui-fluid{margin-top: 15px;}
.content{min-height: 796px;}
.nav{text-align: center;}
.nav button{margin-bottom: 3px;width: 80px;}
.layui-card-body .layui-btn+.layui-btn{margin-left: 0px;}
.code-show{min-height: 454px;}
.js-show{min-height: 200px;}
.del-form{line-height: initial;position: absolute;right: 15px;top: 50%;margin-top: -15px;}

js/designer.js

/**
 * time: 2018年11月21日 15:25:32
 * author: dbag
 * blog: http://www.cnblogs.com/phper8/
 */
layui.define(['layer', 'form'], function(exports){
  var layer = layui.layer,form = layui.form,$ = layui.$,key = '';
    delHtml()
  $('button').on('click',function(){
  	var _this = $(this),

  		 size = _this.data('size'),
  		type = _this.data('type'),
        html =  '';
      key = randStrName();
      console.log(JSON.parse(JSON.stringify(_this)))
  	switch (type) {
        case 'text':
            html = input(type,size)
            break;
        case 'password':
            html = input(type,size)
            break;
        case 'select':
            html = select(size)
            break;
        case 'checkbox_a':
            html = checkbox_a(size)
            break;
        case 'checkbox_b':
            html = checkbox_b(size)
            break;
        case 'radio':
            html = radio(size)
            break;
        case 'textarea':
            html = textarea(size)
            break;
        case 'submit':
            html = submits(size)
            break;
        case 'del':
            $('form').html("\n")
            delHtml()
            $('.code-show').text('')
            return false
            break;
        default:
            layer.msg('类型错误',{icon:2})
    }

    $('form').append(html);
    form.render();
    setHtml(html)


  })

    function delHtml() {
        layui.data('form_html', {
            key: 'html'
            ,remove: true
        });
    }

    function setHtml(html) {
      var h = layui.data('form_html');
      if(h && h.html ){
          var _d = h.html+html
      }else{
          var _d = html
      }
        layui.data('form_html',{
            key:'html',
            value:_d
        })
        $('.code-show').text('')

    }

    function input(type,size) {
        var name = type==='text'?'输入框':(type==='password'?'密码框':'');
        var html = '  \n' +
          '    '+name+'\n' +
          '    \n' +
          '      \n' +
          '    \n' +
          '  \n';
        return html;
    }
    function select(size) {
        var html = '  \n' +
          '    选择框\n' +
          '    \n' +
          '      \n' +
          '        \n' +
          '        北京\n' +
          '        上海\n' +
          '        广州\n' +
          '        深圳\n' +
          '        杭州\n' +
          '      \n' +
          '    \n' +
          '  \n';
        return html;
    }
    function checkbox_a(size) {
        var html = '  \n' +
            '    复选框\n' +
            '    \n' +
            '      \n' +
            '      \n' +
            '      \n' +
            '    \n' +
            '  \n';
        return html;
    }
    function checkbox_b(size) {
        var html = '  \n' +
            '    开关\n' +
            '    \n' +
            '      \n' +
            '    \n' +
            '  \n';
        return html;
    }
    function radio(size) {
        var html = '  \n' +
            '    单选框\n' +
            '    \n' +
            '      \n' +
            '      \n' +
            '    \n' +
            '  \n';
        return html;
    }
    function textarea(size) {
        var html = '  \n' +
            '    文本域\n' +
            '    \n' +
            '      \n' +
            '    \n' +
            '  \n';
        return html;
    }
    function submits(size) {
        var html = '  \n' +
            '    \n' +
            '      立即提交\n' +
            '      重置\n' +
            '    \n' +
            '  \n';
        return html;
    }
    function jscode() {
        var html = '';
        return html;
    }
    function randStrName() {
        return Math.random().toString(36).substr(8);
    }
    $('.click-but button').click()
    var jscodehtml = jscode();
    $('.js-show').text(jscodehtml)
    form.on('submit(formDemo)', function(data){
        layer.msg(JSON.stringify(data.field));
        return false;
    });
});

designerForm.html

    
    
    
    
    
    



    
        
            
                长
                
                    输入框
                    密码框
                    选择框
                    复选框
                    开关
                    单选框
                    文本域
                    提交
                
            
            
                短
                
                    输入框
                    密码框
                    选择框
                    复选框
                    开关
                    单选框
                    文本域
                    提交
                
            

        
        
            
                
                     
                
                
            
        
        
            
                html
                
                    
                
            
            
                JS