SpringBoot +LayUI 实现表单设计器

在设计OA开发时会涉及流程动态绑定表单，基于这种情况，我集成了网上开源的LayUI 表单设计器：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 falsebreak;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('<form class="layui-form" action="" onsubmit="return false">\n' +_d+ '</form>')}function input(type,size) {var name = type==='text'?'输入框':(type==='password'?'密码框':'');var html = '  <div class="layui-form-item">\n' +'    <label class="layui-form-label">'+name+'</label>\n' +'    <div class="layui-input-'+size+'">\n' +'      <input type="'+type+'" name="'+key+'" required  lay-verify="required" placeholder="请输入'+name+'内容" autocomplete="off" class="layui-input">\n' +'    </div>\n' +'  </div>\n';return html;}function select(size) {var html = '  <div class="layui-form-item">\n' +'    <label class="layui-form-label">选择框</label>\n' +'    <div class="layui-input-'+size+'">\n' +'      <select name="'+key+'" lay-verify="required" lay-search>\n' +'        <option value=""></option>\n' +'        <option value="0">北京</option>\n' +'        <option value="1">上海</option>\n' +'        <option value="2">广州</option>\n' +'        <option value="3">深圳</option>\n' +'        <option value="4">杭州</option>\n' +'      </select>\n' +'    </div>\n' +'  </div>\n';return html;}function checkbox_a(size) {var html = '  <div class="layui-form-item">\n' +'    <label class="layui-form-label">复选框</label>\n' +'    <div class="layui-input-'+size+'">\n' +'      <input type="checkbox" name="'+key+'[]" title="写作">\n' +'      <input type="checkbox" name="'+key+'[]" title="阅读" checked>\n' +'      <input type="checkbox" name="'+key+'[]" title="发呆">\n' +'    </div>\n' +'  </div>\n';return html;}function checkbox_b(size) {var html = '  <div class="layui-form-item">\n' +'    <label class="layui-form-label">开关</label>\n' +'    <div class="layui-input-'+size+'">\n' +'      <input type="checkbox" name="'+key+'" lay-skin="switch">\n' +'    </div>\n' +'  </div>\n';return html;}function radio(size) {var html = '  <div class="layui-form-item">\n' +'    <label class="layui-form-label">单选框</label>\n' +'    <div class="layui-input-'+size+'">\n' +'      <input type="radio" name="'+key+'" value="男" title="男">\n' +'      <input type="radio" name="'+key+'" value="女" title="女" checked>\n' +'    </div>\n' +'  </div>\n';return html;}function textarea(size) {var html = '  <div class="layui-form-item layui-form-text">\n' +'    <label class="layui-form-label">文本域</label>\n' +'    <div class="layui-input-'+size+'">\n' +'      <textarea name="'+key+'" placeholder="请输入内容" class="layui-textarea"></textarea>\n' +'    </div>\n' +'  </div>\n';return html;}function submits(size) {var html = '  <div class="layui-form-item">\n' +'    <div class="layui-input-'+size+'">\n' +'      <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>\n' +'      <button type="reset" class="layui-btn layui-btn-primary">重置</button>\n' +'    </div>\n' +'  </div>\n';return html;}function jscode() {var html = '<script>\n' +'  layui.use(\'form\', function(){\n' +'    var form = layui.form;\n' +'    form.on(\'submit(formDemo)\', function(data){\n' +'      layer.msg(JSON.stringify(data.field));\n' +'      return false;\n' +'    });\n' +'  });\n' +'</script>';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

<!doctype html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport"content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>layui表单生成器</title><link rel="stylesheet" href="layui/css/layui.css"><link rel="stylesheet" href="css/designer.css">
</head>
<body>
<div class="layui-fluid" ><div class="layui-row layui-col-space10"><div class="layui-col-md1"><div class="layui-card nav click-but"><div class="layui-card-header">长</div><div class="layui-card-body"><button class="layui-btn" data-size="block" data-type="text">输入框</button><button class="layui-btn" data-size="block" data-type="password">密码框</button><button class="layui-btn" data-size="block" data-type="select">选择框</button><button class="layui-btn" data-size="block" data-type="checkbox_a">复选框</button><button class="layui-btn" data-size="block" data-type="checkbox_b">开关</button><button class="layui-btn" data-size="block" data-type="radio">单选框</button><button class="layui-btn" data-size="block" data-type="textarea">文本域</button><button class="layui-btn" data-size="block" data-type="submit">提交</button></div></div><div class="layui-card nav"><div class="layui-card-header">短</div><div class="layui-card-body"><button class="layui-btn" data-size="inline" data-type="text">输入框</button><button class="layui-btn" data-size="inline" data-type="password">密码框</button><button class="layui-btn" data-size="inline" data-type="select">选择框</button><button class="layui-btn" data-size="inline" data-type="checkbox_a">复选框</button><button class="layui-btn" data-size="inline" data-type="checkbox_b">开关</button><button class="layui-btn" data-size="inline" data-type="radio">单选框</button><button class="layui-btn" data-size="inline" data-type="textarea">文本域</button><button class="layui-btn" data-size="block" data-type="submit">提交</button></div></div></div><div class="layui-col-md5"><div class="layui-card content"><div class="layui-card-header"><button class="layui-btn layui-btn-sm layui-btn-danger del-form" data-type="del"> <i class="layui-icon"></i></button></div><div class="layui-card-body code"><form class="layui-form" action="" onsubmit="return false"></form></div></div></div><div class="layui-col-md6"><div class="layui-card r-code-html"><div class="layui-card-header">html</div><div class="layui-card-body"><textarea name=""  class="layui-textarea code-show"></textarea></div></div><div class="layui-card r-code-js"><div class="layui-card-header">JS</div><div class="layui-card-body"><textarea name=""  class="layui-textarea js-show"></textarea></div></div></div></div>
</div>
</body>
<script type="text/javascript" src="layui/layui.js"></script>
<script type="text/javascript" src="js/designer.js"></script>
<script>
var _hmt = _hmt || [];
(function() {var hm = document.createElement("script");hm.src = "https://hm.baidu.com/hm.js?74fccec1ffa027e00b82ec47a5b9f8f5";var s = document.getElementsByTagName("script")[0];s.parentNode.insertBefore(hm, s);
})();
</script>
</html>

SpringBoot +LayUI 实现表单设计器相关推荐

基于springboot+element ui+vue的java快速开发平台，集成html5工作流设计器，flowable， element ui 表单设计器
前后端分离.maven多模块开发,方便多人协同开发后端选型:springboot2 + mybatis + shiro + jwt token + flowable 前端选型:vue + eleme ...
布局器拖拽拖拽表单设计器厉害了
码农苦码农懂! 您是否有过以下想法: 我是一名element初学者,我想以最短的时间快速进入 element 的大门我是一名后端工程师,虽能熟练掌握 JS 的写法,但是页面样式布局让我很头疼我是一 ...
基于VUE的ElementUi可视化表单设计器布局器
码农苦码农懂的个人空间工作日志正文基于VUE的ElementUi可视化表单设计器布局器顶原码农苦码农懂发布于 09/11 15:35 字数 1187 阅读 41 收藏 0 点赞 1 评论 ...
python开源报表系统_流程设计器、表单设计器和简单报表管理开源OA系统smart-web...
smart-web2是一套相对简单的OA系统:包含了流程设计器,表单设计器,权限管理,简单报表管理等功能: 系统后端基于SpringMVC+Spring+Hibernate框架,前端页面采用JQuer ...
.net erp（办公oa）开发平台架构概要说明之表单设计器
2019独角兽企业重金招聘Python工程师标准>>> 背景:搭建一个适合公司erp业务的开发平台. 架构概要图: 表单设计开发部署示例图表单设计开发部署示例说明 1)每个开发 ...
使用开源的驰骋表单设计器设计表单案例演示
我们以客户提供如下原始的word表单样本,使用驰骋表单设计器制作表单的过程介绍如下: 工业设计和创意需求登记表原始表单图在ccform表单设计器中,设计如下: 驰骋表单设计器,设计表单所见既所得,操 ...
驰骋表单设计器设计表单案例演示
为什么80%的码农都做不了架构师?>>> 我们以客户提供如下原始的word表单样本,使用驰骋表单设计器制作表单的过程介绍如下:工业设计和创意需求登记表原始表单图在ccform ...
activiti表单设计器_基于Vue,ElementUI开发的一款表单设计器
介绍基于Vue,ElementUI开发的一款表单设计器,提高表单开发效率的利器,让开发者从枯燥的表单代码编写中解放出来工具地址: http://tools.xiaoyaoji.cn/form Gi ...
表单设计器 k-form-design
k-form-design支持自定义组件.表单联动等高级功能,使用 vue2 + CompositionAPI + ts 实现伪 vue3 应用. 设计器布局参考form-generator项目,基于 ...

SpringBoot +LayUI 实现表单设计器

SpringBoot +LayUI 实现表单设计器相关推荐

最新文章

热门文章