1、前端,如图:
2、添加按钮实现
<script type="text/html" id="headToolbarTpl">
<button class="layui-btn layui-btn-sm " lay-event="add">创建</button>
</script>
table.on('toolbar(' + tableId + ')', function(obj){
var checkStatus = table.checkStatus(obj.config.id);
var checkData = checkStatus.data; // 得到选中的数据
switch(obj.event) {
case 'add':
layer.open({
type: 2
,title: '创建模型'
,content: api.workflow.process.create
,maxmin: false
,area: area // 宽高
,btn: ['确定', '取消']
,yes: function (index, layero) {
//点击确认触发 iframe 内容中的按钮提交
var submit = layero.find('iframe').contents().find("#kFormSubmit");
submit.click();
}
});
break;
}
});
3、添加窗口
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title th:replace="common/base::pagetitle"></title>
<link th:replace="common/base::static"/>
<link rel="stylesheet" th:href="@{/static/css/custom/edit.css}">
</head>
<body>
<div class="layui-form" style="padding: 20px">
<div class="layui-form-item">
<div class="layui-inline">
<label class="layui-form-label">模型名称</label>
<div class="layui-input-inline">
<input type="text" name="modelName" placeholder="请输入模型名称" lay-verify="required" autocomplete="off" class="layui-input">
</div>
</div>
</div>
<div class="layui-form-item">
<div class="layui-inline">
<label class="layui-form-label">模型KEY</label>
<div class="layui-input-inline">
<input type="text" name="modelKey" placeholder="请输入模型KEY" value="modelKey" lay-verify="required" autocomplete="off" class="layui-input">
</div>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">模型描述</label>
<div class="layui-input-block">
<textarea name="description" placeholder="请输入模型描述" class="layui-textarea"></textarea>
</div>
</div>
<div class="layui-form-item layui-hide">
<input type="button" lay-submit="" lay-filter="kFormSubmit" id="kFormSubmit" value="确认添加">
</div>
</div>
<script th:replace="common/base::context"></script>
<script th:replace="common/base::mainjs"></script>
<script>
layui.use(['form', 'laydate'], function () {
var $ = layui.$, form = layui.form, laydate = layui.laydate;
//监听提交
form.on('submit(kFormSubmit)', function(data){
var field = data.field; //获取提交的字段
var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
//提交 Ajax 成功后,关闭当前弹层并重载表格
$.ajax({
type: req.type.post,
url: api.workflow.process.save,
data: field,
async: false,
success: function (r) {
if (r.code === req.status.ok) {
// 重载表格
parent.layui.table.reload('kContentTable');
parent.layer.close(index); //再执行关闭
} else {
adminKit.errorMsg(r.msg);
}
}
});
});
})
</script>
</body>
</html>
四、后台控制层
@RequiresPermissions("workflow:process:add")
@PostMapping(value = "/model/save")
public R saveModel(ModelVO modelVO) {
final String modelId = workFlowService.create(modelVO);
return R.ok(modelId);
}
五、实现层
@Override
public String create(ModelVO modelVO) {
ObjectNode editorNode = objectMapper.createObjectNode();
editorNode.put("id", "canvas");
editorNode.put("resourceId", "canvas");
ObjectNode stencilSetNode = objectMapper.createObjectNode();
stencilSetNode.put("namespace", "http://b3mn.org/stencilset/bpmn2.0#");
editorNode.put("stencilset", stencilSetNode);
Model model = repositoryService.newModel();
ObjectNode modelObjectNode = objectMapper.createObjectNode();
modelObjectNode.put(ModelDataJsonConstants.MODEL_NAME, modelVO.getModelName());
modelObjectNode.put(ModelDataJsonConstants.MODEL_REVISION, 1);
modelObjectNode.put(ModelDataJsonConstants.MODEL_DESCRIPTION, modelVO.getDescription());
model.setMetaInfo(modelObjectNode.toString());
model.setName(modelVO.getModelName());
model.setKey(modelVO.getModelKey());
log.debug("editorNode.toString() = {}", editorNode.toString());
// 保存模型
repositoryService.saveModel(model);
repositoryService.addModelEditorSource(model.getId(), editorNode.toString().getBytes(StandardCharsets.UTF_8));
return model.getId();
}