SpringBoot 集成Activiti 实现Model(模型）管理

╰半橙微兮° 2023-10-10 14:11 47阅读 0赞

## **Activiti 之Model 模型管理需求:** ##

实现Model 检索、新增、编辑、删除、导出和部署功能。

## **Activiti 之Model 模型管理页面操作：** ##

**Model 首页：**

![7fecf676c6ea4d358efde0360479fc93.png][]

**Model 检索：**

![e7fa533abc594e7dadac1eb765d29908.png][]

**Model 新增：**

![577296f0e5254a66857417fd80a372ef.png][]

![06a2c01b52ea4fc7b3a307b972d1a064.png][] **Model 编辑：**

简单设计转正流程，记得点击保存按钮。

![257c552c98424f028687af91e7677053.png][]

**Model 导出：**

![1d348d339cfc4d0b9a24eec668511505.png][]

![03d57523fdfc4aae8985edfe1259b75d.png][]

**Model 删除：**

![2436027c55b14444a03b17218a086c88.png][]

5001 流程模型已经被删除。

![0e14606c155f432ab75357a0c32bade1.png][]

**Model 部署：**

功能说明：依据流程模型定义发起一次流程实例，由于该功能涉及用户和用户组设置、表单设计。这里仅仅实现在控制台后端输出流程实例Id。

选择模型定义，点击部署：

![fc891c435c134c16baf56018dff25b15.png][]

请教流程实例Id输出：

![26a9219c43a04f208d363197ee745950.png][]

## SpringBoot 之**Activiti Model 模型管理后台** ##

**SpringBoot程序入口排除Activiti自带SpringSecurity 安全框架校验**

package com.zzg;
    
    import org.activiti.spring.boot.SecurityAutoConfiguration;
    import org.mybatis.spring.annotation.MapperScan;
    import org.springframework.boot.SpringApplication;
    import org.springframework.boot.autoconfigure.SpringBootApplication;
    
    @SpringBootApplication(exclude={SecurityAutoConfiguration.class})
    @MapperScan("com.zzg.mapper")
    public class OAApplication {
        public static void main(String[] args) {
            SpringApplication.run(OAApplication.class, args);
        }
    }

**SpringBoot 引入前端开发框架LayUI**

在layUI 开源网站中，下载LayUI。下载地址：[Layui - 经典开源模块化前端 UI 框架][Layui - _ UI]

在本项目的resource/static文件夹中，引入layui 框架。

![db9ab46e77504c7fbd8dee89e00a23ac.png][]

**SpringBoot 配置SpringMVC 资源路径映射**

package com.zzg.config;
    
    import org.springframework.context.annotation.Configuration;
    import org.springframework.web.servlet.config.annotation.ResourceHandlerRegistry;
    import org.springframework.web.servlet.config.annotation.WebMvcConfigurerAdapter;
    
    @Configuration
    public class SpringMVCConfig extends WebMvcConfigurerAdapter {
        @Override
        public void addResourceHandlers(ResourceHandlerRegistry registry) {
            registry.addResourceHandler("/static/**").addResourceLocations("classpath:/static/");super.addResourceHandlers(registry);
        }
    }

**SpringBoot 添加流程模型控制器（**ModelController**）**

package com.zzg.controller;
    
    import com.fasterxml.jackson.databind.JsonNode;
    import com.fasterxml.jackson.databind.ObjectMapper;
    import com.fasterxml.jackson.databind.node.ObjectNode;
    import com.zzg.common.vo.PageList;
    import com.zzg.common.vo.Resp;
    import com.zzg.common.vo.enums.CodeMsgEnum;
    import org.activiti.bpmn.converter.BpmnXMLConverter;
    import org.activiti.bpmn.model.BpmnModel;
    import org.activiti.editor.constants.ModelDataJsonConstants;
    import org.activiti.editor.language.json.converter.BpmnJsonConverter;
    import org.activiti.engine.RepositoryService;
    import org.activiti.engine.repository.Deployment;
    import org.activiti.engine.repository.Model;
    import org.activiti.engine.repository.ModelQuery;
    import org.activiti.engine.repository.ProcessDefinition;
    import org.apache.commons.io.IOUtils;
    import org.apache.commons.lang3.StringUtils;
    import org.slf4j.Logger;
    import org.slf4j.LoggerFactory;
    import org.springframework.beans.factory.annotation.Autowired;
    import org.springframework.web.bind.annotation.*;
    import org.springframework.web.servlet.ModelAndView;
    
    import javax.servlet.http.HttpServletRequest;
    import javax.servlet.http.HttpServletResponse;
    import java.io.ByteArrayInputStream;
    import java.io.OutputStream;
    import java.io.UnsupportedEncodingException;
    import java.net.URLEncoder;
    import java.util.Date;
    import java.util.List;
    import java.util.Map;
    
    @RequestMapping("/model")
    @RestController
    public class ModelController {
        private static Logger logger= LoggerFactory.getLogger(ActivitiController.class);
    
        /**
         * 流程存储服务
         */
        @Autowired
        private RepositoryService repositoryService;
    
        @Autowired
        private ObjectMapper objectMapper;
    
        /**
         * 模型默认首页
         * @return
         */
        @GetMapping("/index")
        public ModelAndView index() {
            return new ModelAndView("redirect:/model.html");
        }
    
        /**
         * 模型分页查询
         * @param request
         * @return
         */
        @GetMapping("/page")
        public PageList getModels(HttpServletRequest request){
            String pageParame = request.getParameter("page");
            String sizeParame = request.getParameter("size");
            String modelName = request.getParameter("name");
            Integer page = StringUtils.isNotEmpty(pageParame) ? Integer.valueOf(pageParame) : 1;
            Integer size = StringUtils.isNotEmpty(sizeParame) ? Integer.valueOf(sizeParame) : 10;
    
            // 获取模型查询实例
            ModelQuery modelQuery = repositoryService.createModelQuery();
            // 根据模型名称模糊查询
            Integer total;
            List<Model> models;
    
            if (StringUtils.isNotEmpty(modelName)) {
                // 获取模型总数
                total = (int) modelQuery.modelNameLike("%" + modelName + "%").count();
                // 获取列表数据
                models = modelQuery
                        .modelNameLike("%" + modelName + "%")
                        .orderByLastUpdateTime()
                        .desc()
                        .listPage((page - 1) * size, size);
            } else {
                // 获取模型总数
                total = (int) modelQuery.count();
                // 获取列表数据
                models = modelQuery
                        .orderByLastUpdateTime()
                        .desc()
                        .listPage((page - 1) * size, size);
            }
            //封装到pageList对象中
            PageList pageList = new PageList(page,total, size);
            pageList.setList(models);
    
            return pageList;
        }
    
        /**
         * 模型删除
         * @param request
         */
        @GetMapping("/delete")
        public Resp<String> delete(HttpServletRequest request){
            String processId = request.getParameter("processId");
            System.out.println("processId is:" + processId);
    //        if(StringUtils.isNotEmpty(processId)){
    //            return Resp.ERROR(CodeMsgEnum.ERROR);
    //        }
            Model model = repositoryService.getModel(processId);
            if(model!=null){
                System.out.println("指定模型存在");
                repositoryService.deleteModel(processId);
            }
            return Resp.OK_WITHOUT_DATA();
        }
    
        /**
         * 新增模型
         * @param map
         * @return
         * @throws UnsupportedEncodingException
         */
        @PostMapping(value = "/insert", produces = "application/json;charset=utf-8")
        public Resp<String> insert(@RequestBody Map map) throws UnsupportedEncodingException {
            System.out.println("model 参数接受:" + map);
            //初始化一个空模型
            Model model = repositoryService.newModel();
    
            //设置一些默认信息，可以用参数接收
            int revision = 1;
            String key = String.valueOf(map.get("processKey"));
            String name =String.valueOf(map.get("processName"));;
            String description = String.valueOf(map.get("processDesc"));
    
            //ModelEditorSource
            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);
    
    
            ObjectNode modelNode = objectMapper.createObjectNode();
            modelNode.put(ModelDataJsonConstants.MODEL_NAME, name);
            modelNode.put(ModelDataJsonConstants.MODEL_DESCRIPTION, description);
            modelNode.put(ModelDataJsonConstants.MODEL_REVISION, revision);
    
            model.setName(name);
            model.setKey(key);
            model.setMetaInfo(modelNode.toString());
    
            repositoryService.saveModel(model);
    
            String id = model.getId();
    
            repositoryService.addModelEditorSource(id, editorNode.toString().getBytes("utf-8"));
            // return new ModelAndView("redirect:/modeler.html?modelId=" + id);
            return Resp.OK(id);
    
        }
    
        /**
         * 根据Model部署流程
         */
        @PostMapping(value = "deploy/{modelId}")
        public Resp<String> deploy(@PathVariable("modelId") String modelId) {
            try {
                // 获取模型
                Model model = repositoryService.getModel(modelId);
                ObjectNode objectNode = (ObjectNode) new ObjectMapper().readTree(repositoryService.getModelEditorSource(model.getId()));
                BpmnModel bpmnModel = new BpmnJsonConverter().convertToBpmnModel(objectNode);
    
                String processName = model.getName()+".bpmn20.xml";
                byte[] bytes = new BpmnXMLConverter().convertToXML(bpmnModel);
                // 部署流程
                Deployment deployment = repositoryService
                        .createDeployment().name(model.getName())
                        .addString(processName, new String(bytes,"UTF-8"))
                        .deploy();
                System.out.println("流程部署id----"+deployment.getId());
                return Resp.OK(deployment.getId());
            } catch (Exception e) {
                logger.error("根据模型部署流程失败：modelId={}", modelId, e);
                return Resp.ERROR(CodeMsgEnum.ERROR);
            }
        }
    
        /**
         * 导出指定模型xml 文件
         * @param modelId
         * @param response
         */
        @GetMapping(value = "export/{modelId}")
        public void export(@PathVariable String modelId, HttpServletResponse response) {
            try {
                Model modelData = repositoryService.getModel(modelId);
                BpmnJsonConverter jsonConverter = new BpmnJsonConverter();
                JsonNode editorNode = new ObjectMapper().readTree(repositoryService.getModelEditorSource(modelData.getId()));
                BpmnModel bpmnModel = jsonConverter.convertToBpmnModel(editorNode);
                BpmnXMLConverter xmlConverter = new BpmnXMLConverter();
                byte[] bpmnBytes = xmlConverter.convertToXML(bpmnModel);
    
                ByteArrayInputStream in = new ByteArrayInputStream(bpmnBytes);
                OutputStream outputStream = response.getOutputStream();
                IOUtils.copy(in, outputStream);
                String filename = bpmnModel.getMainProcess().getId() + ".bpmn.xml";
                response.setHeader("content-type", "application/octet-stream");
                response.setContentType("application/octet-stream;charset=UTF-8");
                response.setHeader("Content-Disposition", "attachment;filename=" + URLEncoder.encode(filename, "utf-8"));
                outputStream.flush();
                outputStream.close();
            } catch (Exception e) {
                logger.error("导出model的xml文件失败：{}", e.getMessage(), e);
            }
        }
    
    
    }

**SpringBoot 添加流程模型管理页面**

在项目中的resource/static文件夹中添加流程模型管理页面(model.html)

<!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport"
              content="width=device-width, initial-scale=1, maximum-scale=1">
        <title>**系统 - Layui</title>
        <link rel="stylesheet" href="layui/css/layui.css">
    </head>
    <body class="layui-layout-body">
    <div class="layui-layout layui-layout-admin">
        <div class="layui-header">
            <div class="layui-logo">** 系统</div>
            <ul class="layui-nav layui-layout-right">
                <li class="layui-nav-item"><a href="javascript:;"> 超级管理员 </a>
                    <dl class="layui-nav-child">
                        <dd>
                            <a href="">基本资料</a>
                        </dd>
                        <dd>
                            <a href="">安全设置</a>
                        </dd>
                    </dl></li>
                <li class="layui-nav-item"><a href="">退了</a></li>
            </ul>
        </div>
    
        <div class="layui-side layui-bg-black">
            <div class="layui-side-scroll">
                
                <ul class="layui-nav layui-nav-tree" lay-filter="test">
                    <li class="layui-nav-item layui-nav-itemed"><a class=""
                                                                   href="javascript:;">流程管理</a>
                        <dl class="layui-nav-child">
                            <dd>
                                <a href="javascript:;">流程定义</a>
                            </dd>
                            <dd>
                                <a href="javascript:;">表单定义</a>
                            </dd>
    
                        </dl></li>
                    <li class="layui-nav-item"><a href="javascript:;">用户管理</a>
                        <dl class="layui-nav-child">
                            <dd>
                                <a href="javascript:;">查询用户</a>
                            </dd>
                            <dd>
                                <a href="javascript:;">新增用户</a>
                            </dd>
                        </dl></li>
                    <li class="layui-nav-item"><a href="javascript:;">借阅信息</a>
                        <dl class="layui-nav-child">
                            <dd>
                                <a href="javascript:;">所有记录</a>
                            </dd>
                            <dd>
                                <a href="javascript:;">个人记录</a>
                            </dd>
                        </dl></li>
                    <li class="layui-nav-item"><a href="">帮助</a></li>
                </ul>
            </div>
        </div>
    
        <div class="layui-body">
            
            <div style="padding: 15px;">
    
                <div class="demoTable">
                    流程名称：
                    <div class="layui-inline">
                        <input class="layui-input" name="id" id="demoReload" autocomplete="off">
                    </div>
                    <button class="layui-btn" data-type="reload">搜索</button>
                    <button class="layui-btn" data-type="add">新增</button>
    
                </div>
    
    
                <table id="tb-book" lay-filter="tb-book"></table>
    
                <script type="text/html" id="barDemo">
                    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
                    <a class="layui-btn layui-btn-xs" lay-event="deploy">部署</a>
                    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
                    <a class="layui-btn layui-btn-warm layui-btn-xs" lay-event="export">导出</a>
                </script>
    
                
                <script type="text/html" id="edit_form">
                    <div class="layui-col-md10" style="margin-left: 35px;margin-top: 20px">
                        <form class="layui-form layui-form-pane" lay-filter="edit_form" action="">
                            <div class="layui-form-item">
                                <label class="layui-form-label">流程Key</label>
                                <div class="layui-input-block">
                                    <input type="text" name="processKey" required  lay-verify="required" placeholder="请输入流程Key"
                                           autocomplete="off" class="layui-input">
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">流程名称</label>
                                <div class="layui-input-block">
                                    <input type="text" name="processName" required  lay-verify="required" placeholder="请输入流程Key"
                                           autocomplete="off" class="layui-input">
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">流程描述</label>
                                <div class="layui-input-block">
                                    <input type="text" name="processDesc" required  lay-verify="required" placeholder="请输入流程Key"
                                           autocomplete="off" class="layui-input">
                                </div>
                            </div>
                            <div class="layui-form-item" style="margin-top: 20px">
                                <div class="layui-input-block">
                                    <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
                                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                                </div>
                            </div>
    
                        </form>
    
                    </div>
                </script>
    
            </div>
        </div>
    
        <div class="layui-footer">
            
            © layui.com - **系统
        </div>
    
    
    </div>
    <script src="layui/layui.js"></script>
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    
    
    <script>
    	layui.use(['element','table', 'form'], function(){
      	  	element = layui.element;
      	  	table = layui.table;
      	  	form = layui.form;
    
      	  	//第一个实例
      table.render({
        elem: '#tb-book'
        ,height: 312
        ,url: 'http://localhost:8080/model/page'
        ,where: {page: '1', size: '10'}
        ,page: true //开启分页
        ,cols: [[ //表头
          {field: 'id', title: 'ID', sort: true, fixed: 'left'}
          ,{field: 'name', title: '流程名称', }
          ,{field: 'key', title: '流程Key', }
          ,{field: 'category', title: '流程分类', }
          ,{field: 'createTime', title: '创建时间', }
          ,{fixed: 'right', title:'操作', toolbar: '#barDemo', width:260}
        ]]
        ,parseData: function (res) { //将原始数据解析成 table 组件所规定的数据
            console.log(res)
                    return {
                        "code": 0, //解析接口状态
                        "count": res.totalData, //解析数据长度
                        "data": res.list //解析数据列表
                    };
         }
      });
    
         // 表格数据重载
        var $ = layui.$, active = {
        reload: function(){
          var demoReload = $('#demoReload');
          console.log('----'+ demoReload.val())
          //执行重载
          table.reload('tb-book', {
            page: {
              curr: 1 //重新从第 1 页开始
            }
            ,where: {
                name: demoReload.val()
            }
          });
        },
        add: function(){
             layer.open({
                    type: 1,
                    title: '新增流程',
                    area: ['420px', '330px'],
                    content: $('#edit_form').html()
                });
    
                 form.on('submit(formDemo)',function(messge){
                     console.log(messge);
                     var str={
                                    "processDesc":messge.field.processDesc,
                                    "processKey":messge.field.processKey,
                                    "processName":messge.field.processName
                              };
                        $.ajax({
                                url:"http://localhost:8080/model/insert",
                                type:"POST",
                                contentType: "application/json; charset=utf-8",
                                dataType: "json",
                                data: JSON.stringify(str),
                                success:function (msg) {
                                    console.log("成功消息:" + msg);
                                    if (msg.code === 200) {
                                        layer.msg("新增成功", {icon: 6});
                                      	layer.closeAll();
                                        // 跳转至流程设计界面
                                         window.location.href ="http://localhost:8080/modeler.html?modelId=" + msg.data
                                    } else {
                                        layer.msg("新增失败", {icon: 5});
                                    }
                                }
                            })
                            return false;//阻止表单跳转,网页url不显示提交的参数。
                        })
    
        }
      };
    
      $('.demoTable .layui-btn').on('click', function(){
        var type = $(this).data('type');
        active[type] ? active[type].call(this) : '';
      });
    
    
      //监听工具条
      table.on('tool(tb-book)', function(obj){
        console.log(obj);
        var data = obj.data;
        if(obj.event === 'deploy') {
    
                        $.ajax({
                                url:"http://localhost:8080/model/deploy/" + data.id,
                                type:"POST",
                                success:function (msg) {
                                    console.log(msg);
                                    // var returnCode = msg.returnValue//取得返回数据（Sting类型的字符串）的信息进行取值判断
                                    if (msg.code === 200) {
                                        //layer.closeAll('loading');
                                        //layer.load(2);
                                        layer.msg("模型部署成功:" + msg.data, {icon: 6});
                                      	layer.closeAll();
                                        // 加载层 - 风格
                                    } else {
                                        layer.msg("模型部署失败", {icon: 5});
                                    }
                                }
                            })
    
    
        } else if(obj.event === 'del'){
          layer.confirm('真的删除行么', function(index){
            obj.del();
            layer.close(index);
            console.log('id is:', data.id)
             $.ajax({
                                url:"http://localhost:8080/model/delete?processId="+data.id,
                                success:function (msg) {
                                    console.log(msg);
                                    // var returnCode = msg.returnValue//取得返回数据（Sting类型的字符串）的信息进行取值判断
                                    if (msg) {
                                        //layer.closeAll('loading');
                                        //layer.load(2);
                                        layer.msg("修改成功", {icon: 6});
                                      	layer.closeAll();
                                        // 加载层 - 风格
                                    } else {
                                        layer.msg("新增失败", {icon: 5});
                                    }
                                }
                            })
    
          });
        } else if(obj.event === 'edit'){
          console.log("点击编辑")
          window.location.href ="http://localhost:8080/modeler.html?modelId=" + data.id
    
        } else if(obj.event ==='export'){
          console.log("点击导出")
          window.location.href ="http://localhost:8080/model/export/" + data.id
        }
    
    
      });
    
    	});
    </script>
    </body>
    </html>

**GitHub地址：**[https://github.com/zhouzhiwengang/SpringBoot-Project.git][https_github.com_zhouzhiwengang_SpringBoot-Project.git]

[7fecf676c6ea4d358efde0360479fc93.png]: https://img-blog.csdnimg.cn/7fecf676c6ea4d358efde0360479fc93.png
[e7fa533abc594e7dadac1eb765d29908.png]: https://img-blog.csdnimg.cn/e7fa533abc594e7dadac1eb765d29908.png
[577296f0e5254a66857417fd80a372ef.png]: https://img-blog.csdnimg.cn/577296f0e5254a66857417fd80a372ef.png
[06a2c01b52ea4fc7b3a307b972d1a064.png]: https://img-blog.csdnimg.cn/06a2c01b52ea4fc7b3a307b972d1a064.png
[257c552c98424f028687af91e7677053.png]: https://img-blog.csdnimg.cn/257c552c98424f028687af91e7677053.png
[1d348d339cfc4d0b9a24eec668511505.png]: https://img-blog.csdnimg.cn/1d348d339cfc4d0b9a24eec668511505.png
[03d57523fdfc4aae8985edfe1259b75d.png]: https://img-blog.csdnimg.cn/03d57523fdfc4aae8985edfe1259b75d.png
[2436027c55b14444a03b17218a086c88.png]: https://img-blog.csdnimg.cn/2436027c55b14444a03b17218a086c88.png
[0e14606c155f432ab75357a0c32bade1.png]: https://img-blog.csdnimg.cn/0e14606c155f432ab75357a0c32bade1.png
[fc891c435c134c16baf56018dff25b15.png]: https://img-blog.csdnimg.cn/fc891c435c134c16baf56018dff25b15.png
[26a9219c43a04f208d363197ee745950.png]: https://img-blog.csdnimg.cn/26a9219c43a04f208d363197ee745950.png
[Layui - _ UI]: https://layui.itze.cn/
[db9ab46e77504c7fbd8dee89e00a23ac.png]: https://img-blog.csdnimg.cn/db9ab46e77504c7fbd8dee89e00a23ac.png
[https_github.com_zhouzhiwengang_SpringBoot-Project.git]: https://github.com/zhouzhiwengang/SpringBoot-Project.git