【Aactiviti7 从入门到放弃】（四）前端相关

最新推荐文章于 2024-04-28 23:55:38 发布
最新推荐文章于 2024-04-28 23:55:38 发布
阅读量923 收藏 1
点赞数
分类专栏： Aactiviti7 文章标签： 前端 intellij-idea java
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/eddielee9217/article/details/122703694
版权

目录

前言：本章节讲述前端，后端没兴趣可以跳过

8.1 BPMNJS扩展 - BPMN下载

8.1.1 启动前端项目

启动后，会弹出 “http://localhost:9013/” 地址，但是因为端口与后端端口不一致，会产生跨域问题。所以我们使用后端启动项目，然后使用 “http://localhost:8080/bpmnjs/dist/index.html” 地址来访问前端项目，记得不能关闭 npm

  • 启动步骤
    • 使用 npm run dev 启动前端项目 (Don’t shut down)
      • http://localhost:9013/
    • IDEA 启动 ActivityApplication 的SpringBoot项目
      • http://localhost:8080/bpmnjs/dist/index.html

8.1.2 在 index.html 添加导出按钮

src/main/resources/resources/bpmnjs/app/index.html

<!--  </ul>前面添加 -->

<li>
  <a id="downloadBPMN" href>
    导出
  </a>
</li>

src/main/resources/resources/bpmnjs/resources/tools.js

import $ from 'jquery';

const proHost = window.location.protocol + "//" + window.location.host;
const href = window.location.href.split("bpmnjs")[0];
const key = href.split(window.location.host)[1];
const publicurl = proHost + key;
const tools = {

  /**
   * 下载bpmn
   * @param {object} bpmnModeler bpmn对象
   */
  download(bpmnModeler) {
    const downloadLink = $("#downloadBPMN");
    bpmnModeler.saveXML({format: true}, function (err, xml) {
      if (err) {
        return console.error('could not save BPMN 2.0 diagram', err);
      }
      tools.setEncoded(downloadLink, 'diagram.bpmn', err ? null : xml);
    });
    // alert("2222")
  },

  setEncoded(link, name, data) {
    const encodedData = encodeURIComponent(data);

    if (data) {
      link.addClass('active').attr({
        'href': 'data:application/bpmn20-xml;charset=UTF-8,' + encodedData,
        'download': name
      });
    } else {
      link.removeClass('active');
    }
  }

}
export default tools

src/main/resources/resources/bpmnjs/app/index.js

import tools from "../resources/tools";

// 导出BPMN
$("#downloadBPMN").on("click", function () {
  tools.download(bpmnModeler);
  // alert("1111")
})

8.1.3 效果图

http://localhost:8080/bpmnjs/dist/index.html

在这里插入图片描述

8.3 BPMNJS扩展 - BPMN在线部署

8.3.1 在 index.html 添加部署按钮

src/main/resources/resources/bpmnjs/app/index.html

<li>
  <a id="saveBPMN" href>
    部署
  </a>
</li>

src/main/resources/resources/bpmnjs/resources/tools.js

saveBpmn(bpmnModeler) {
  bpmnModeler.saveXML({format: true}, function (err, xml) {
    if (err) {
      return console.error('could not save bpmn', err);
    }
    console.log(xml)
    var param = {
      "stringBPMN": xml
    }
    $.ajax({
      url: publicurl + 'processDefinition/addDeploymentByString',
      type: 'POST',
      dataType: "json",
      data: param,
      success: function (result) {
        if (result.status === '0') {
          alert('BPMN部署成功');
        } else {
          alert(result.msg);
        }
      },
      error: function (err) {
        alert(err);
      }
    });
  });
},

http://localhost:8080/processDefinition/addDeploymentByString?stringBPMN=xxxxx

src/main/resources/resources/bpmnjs/app/index.js

$("#saveBPMN").on("click", function () {
  tools.saveBpmn(bpmnModeler);
  // alert("1111")
})

8.3.2 效果说明

  1. 随意画个 BPMN 图
  2. 然后点击“部署”按钮
  3. 复制控制台输出的 xml
    在这里插入图片描述
    PostMan 部署 XML
    在这里插入图片描述
    查看流程定义列表，看是否部署成功
    在这里插入图片描述

8.4 BPMNJS扩展 - BPMN导入（后端方法）

8.4.1 后端编写上传文件的方法

src/main/java/com/edcode/activiti/controller/ProcessDefinitionController.java

/**
 * 上传文件
 * @param request
 * @param multipartFile
 * @return
 */
@PostMapping(value = "/upload")
public AjaxResponse upload(HttpServletRequest request,
    @RequestParam("processFile") MultipartFile multipartFile) {
  try {
    // 判断是否有文件传入
    if (multipartFile.isEmpty()) {
      System.out.println("文件为空");
    }
    // 文件名
    String fileName = multipartFile.getOriginalFilename();
    // 后缀名
    String suffixName = fileName.substring(fileName.lastIndexOf("."));
    // 存储上传的 bpmn 文件路径
    String filePath = "D:/Develop/Mine/IdeaProjects/springboot-activiti7/src/main/resources/resources/bpmn/";
    // 新的文件名称
    fileName = UUID.randomUUID() + suffixName;
    // 如果配置文件指定目录,就可以直接这样写(不指定路径的,就需要自己填充保存路径)
    File file = new File(filePath + fileName);
    // 判断文件夹是否存在，不存在就创建
    if (!file.getParentFile().exists()) {
      file.getParentFile().mkdirs();
    }
    try {
      // 使用此方法保存必须要绝对路径且文件夹必须已存在,否则报错
      multipartFile.transferTo(file);
    } catch (IOException e) {
      System.out.println("上传失败：" + e.getMessage());
    }

    return AjaxResponse.AjaxData(
        GlobalConfig.ResponseCode.SUCCESS.getCode(),
        GlobalConfig.ResponseCode.SUCCESS.getDesc(),
        fileName);

  } catch (Exception e) {
    return AjaxResponse.AjaxData(
        GlobalConfig.ResponseCode.ERROR.getCode(),
        "上传文件失败",
        e.toString());
  }
}

8.4.1.1 使用 PostMan 测试上传

POST http://localhost:8080/processDefinition/upload
在这里插入图片描述
会发现项目里面有两个 1c64d01f-f89c-40ef-b778-cfd4798f48d6.bpmn
在这里插入图片描述其中一个是刚刚吃上传的文件，另外一个 target 是 IDEA 在部署的时候出现的，如果你在浏览器输入 上传的文件路径，就会打开 target 目录下的 bpmn 文件

在这里插入图片描述

8.5 BPMNJS扩展-BPMN导入（前端Ajax）

8.5.1 在 index.html 添加导入按钮

src/main/resources/resources/bpmnjs/app/index.html

<li>
   <form id="form1" name="myForm" onsubmit="return false" method="post" enctype="multipart/form-data" title="上传文件">
     <input type="file" name="uploadFile" id="uploadFile" accept=".bpmn" style="display: none">
     <label class="label" for="uploadFile" >导入</label>
   </form>
 </li>

src/main/resources/resources/bpmnjs/app/index.js

// 导入BPMN，浏览器查看
$("#uploadFile").on("change", function () {
  // alert("1111")
  tools.uploadBPMN(bpmnModeler);
})

src/main/resources/resources/bpmnjs/resources/tools.js

/**
 * 上传bpmn
 * @param {object} bpmnModeler bpmn对象
 */
uploadBPMN(bpmnModeler) {
  const FileUpload = document.myForm.uploadFile.files[0];
  const fm = new FormData();
  fm.append('processFile', FileUpload);
  console.log("2222")
  $.ajax({
    url: publicurl + 'processDefinition/upload',
    type: 'POST',
    data: fm,
    async: false,
    contentType: false, //禁止设置请求类型
    processData: false, //禁止jquery对DAta数据的处理,默认会处理
    success: function (result) {
      const url = publicurl + 'bpmn/' + result.obj; //路径+文件名
      tools.openFromUrl(bpmnModeler, url)
    },
    error: function (err) {
      console.log(err)
    }
  });
},

openFromUrl(bpmnModeler, url) {
  $.ajax(url, {
    dataType: 'text'
  }).done(async function (xml) {
    try {
      await bpmnModeler.importXML(xml);
    } catch (e) {
      console.error(e);
    }
  })
},

8.5.2 效果说明

点击“导入”按钮，选择需要打开的BPMN文件
在这里插入图片描述上传完成后，web页面就会显示BPMN图
在这里插入图片描述> src/main/resources/resources/bpmn/xxx.bpmn 也会出现对应的bpmn文件

8.6 BPMNJS扩展-查看与高亮历史

前端童靴可以研究下，也是调用后端高亮接口

8.7 layuimini部署 （后端管理）

  • GitHub发版地址：https://github.com/zhongshaofa/layuimini/releases
  • Gitee发版地址：https://gitee.com/zhongshaofa/layuimini/releases

8.7.1 layuimini 操作流程

  • 从 github 或 gitee 下载 （gitee下载更快）
  • 解压后文件夹目录叫 layuimini
  • http://localhost:8080/layuimini/page/login-1.html
  • 登录页面修改
  • 在js/lay-config.js配置全局变量html页面引入
  • lnit.json菜单
  • 创建菜单对应页面
  • 页面功能开发

8.7.2 layuimini 下载与初次启动

  • 解压后，layuimini-v2 文件夹，需要改名：layuimini
  • 拖动到 src/main/resources/resources/ 目录下
  • 访问：http://localhost:8080/layuimini/page/login-1.html

8.8 重置登录页面

8.8.1 获取URL地址

src/main/resources/resources/layuimini/js/lay-config.js
在这里插入图片描述

const proHost = window.location.protocol + "//" + window.location.host;
const href = window.location.href.split("layuimini")[0];
const key = href.split(window.location.host)[1];
const publicurl = proHost + key;
var userName = localStorage.getItem('userName')

8.8.2 通过 Ajax 请求后端

src/main/resources/resources/layuimini/page/login-1.html

// layer.msg('登录成功', function () {
//     window.location = '../index.html';
// });

const fd = new FormData();
fd.append('username', data.username)
fd.append('password', data.password)
$.ajax({
    cache: true,
    type: "post",
    url: '' + publicurl + 'login',
    async: false,
    data: fd,
    contentType: false,
    processData: false,
    success: function (res) {
        layer.msg('登录成功', function () {
            localStorage.setItem('userName', res.obj);
            window.location = '../index.html'
        });
    },
    error: function (err) {
        layer.alert(err.responseJSON.obj, {
            icon: 2,
            title: "提示"
        });
    }
});

请求 spring security 的 /login 登录的方法

com.edcode.activiti.controller.ActivitiSecurityController#requireAuthentication

8.8.3 使用浏览器测试

输入错误的用户
在这里插入图片描述
输入正确的用户

在这里插入图片描述

8.9 新增左则的列表页面

8.9.1 修改退出登录成功显示页面

src/main/resources/resources/layuimini/index.html

$('.login-out').on("click", function () {
     layer.msg('退出登录成功', function () {
         window.location = 'page/login-1.html';
     });
 });

8.9.2 创建流程部署列表的Sheet

左则列表，都是使用json格式存放在这个路径下

src/main/resources/resources/layuimini/api/init.json

// 省略...

"menuInfo": [
 {
   "title": "常规管理",
   "icon": "fa fa-address-book",
   "href": "",
   "target": "_self",
   "child": [
     {
       "title": "流程部署列表",
       "href": "page/ProcessDeployments.html",
       "icon": "fa fa-file-text",
       "target": "_self"
     },

// 省略...

8.9.3 新建 ProcessDeployments.html

  • 复制 src/main/resources/resources/layuimini/page/table.html
  • 拷贝改名 src/main/resources/resources/layuimini/page/ProcessDeployments.html

引入依赖

<script src="../lib/jquery-3.4.1/jquery-3.4.1.min.js" charset="utf-8"></script>
<script src="../js/lay-config.js?v=2.0.0" charset="utf-8"></script>

table 标签 60行, currentTableId 修改 ProcessDeploymentsTableID

<table class="layui-hide" id="ProcessDeploymentsTableID" lay-filter="currentTableFilter"></table>

88 行，currentTableId 修改 ProcessDeploymentsTableID，并且把请求获取流程定义列表

// 省略...

table.render({
   elem: '#ProcessDeploymentsTableID',
   url: '' + publicurl + 'processDefinition/getDefinitions', // 获取流程定义列表
   toolbar: '#toolbarDemo',
   defaultToolbar: [],
   parseData: function (res) {
       return {
           "code": res.status,
           "msg": res.msg,
           "count": res.obj.length,
           "data": res.obj
       };
   },
   cols: [[
       {type: "checkbox", width: '5%'},
       {field: 'deploymentID', width: '20%', title: '编号', sort: true},
       {field: 'name', width: '20%', title: '流程名称'},
       {field: 'resourceName', width: '20%', title: '文件名称', sort: true},
       {field: 'key', width: '20%', title: 'Key'},
       {field: 'version', title: '版本', width: '10%'},
       {title: '操作', minWidth: '20%', toolbar: '#currentTableBar', align: "center"}
   ]],

// 省略...

全局查询搜索“toolbar监听事件”找到 add 方法，修改成如下

// 省略...

/**
 * toolbar监听事件
 */
table.on('toolbar(currentTableFilter)', function (obj) {
    if (obj.event === 'add') {  // 监听添加操作
        window.open(''+publicurl+'bpmnjs/dist/index.html?type=addBpmn') // 跳转到 BPMN-JS 页面
    } else if (obj.event === 'delete') {  // 监听删除操作
        var checkStatus = table.checkStatus('currentTableId')
            , data = checkStatus.data;
        layer.alert(JSON.stringify(data));
    }
});

// 省略...

8.9.4 效果图

在这里插入图片描述

如果不显示左边sheet的显示问题，是因为读取的是 target 目录下的文件，解决方法：可以停止项目，使用Maven clean, 然后在启动

eddie_k2
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
activiti前端画图转化_整合Acitiviti在线流程设计器(Activiti
weixin_35647812的博客
12-30 2743
整合Acitiviti在线流程设计器(Activiti-Modeler 5.18.0)1.概述前言一直以来都是从事大量的工作流相关的项目，用过很多商用的工作流产品，包括国内与国外的，尽管商用的工作产品在UI操作上比较人性化，但个人用户觉得，这东西只需要一些初级用户，对于我们一直在为一些高级的客户提供一些专业的数据整合、流程梳理、系统间的数据穿透时，这些系统因为不开源，给项目的实施带来巨大的风险，在...
Activiti7工作流引擎：实战篇(三) 前端演示
人不风流枉少年
12-24 2026
一：登录 jack 123456 rose 123456 tom 123456 jerry 123456 二：部署流程 三：发起申请 四：rose审核 五：tom审批 六：源码
Activiti7 开发快速入门【2024版】
最新发布
applebomb的专栏
04-28 1088
记录开发最核心的部分，理论结合业务实操减少废话，从未接触工作流快速带入开发。假设你是后端的同学学过JAVA和流程图，则可以继续向后看，否则先把基础课程书准备好先翻翻。
工作流（activiti7）-简单的介绍和使用（一）
Angus博客
07-26 1万+
工作流（activiti） 工作流（activiti） 1.1 工作流介绍 1.2 工作流系统 1.3 具体应用 2.1集成使用 2.2 BPM 1.1 工作流介绍 工作流(Workflow)，就是通过计算机对业务流程自动化执行管理。它主要解决的是“使在多个参与者之间按照某种预定义的规则自动进行传递文档、信息或任务的过程，从而实现某个预期的业务目标，或者促使此目标的实现”。说白了就是流程一个过程。（比如请假流程，报销流程，审批流程等等。。）。 Activ...
SpringBoot 整合Activiti 前端绘图工具
qq_41508171的博客
08-28 4882
前端绘图工具已经整合好了   当创建完点击包存的时候数据库只有这个表添加了数据  这个表里就没有数据是不是少了哪一步
前后端分离Springboot 整合使用activiti7教程（一）（全网最细）
谁说自己不可以
03-30 3656
SpringBootyuActiviti7的详细整合使用，笔记整理不易，请继续关注订阅专栏
Activiti5.2版
11-21
关于提供的压缩包子文件的文件名称列表，其中有 "3837网址导航.url" 和 "软件下载天堂.url"，这些通常是指网页快捷方式文件，它们可能包含与Activiti5.2相关的下载资源或者教程链接，方便用户查找和学习Activiti的...
Activiti的流程部署
05-07
Activiti的流程部署Activiti的流程部署Activiti的流程部署Activiti的流程部署
MSCode微服务平台框架采用Activiti7使用的基于BPMN2.0标准的bpmn-js和Camunda BPM流程组件，对Web设计更友好，适应Activiti未来发展
iframework的博客
05-17 957
MSCode微服务平台基于Spring Cloud、Spring Boot、Activiti7工作流和阿里巴巴组件，提供分布式版本和单体式版本以及代码生成器的所有源码和详尽文档，适配电脑、平板和手机，快速开发办公(OA)、电商、金融、财务、教育、医疗、信息管理(MIS)、客户关系(CRM)和企业资源计划(ERP)等业务系统。我公司提供二次开发技术支持，传授微服务分布式知识。 MSCode微服务平台框架采用Activiti7使用的基于BPMN2.0标准的bpmn-js和Camunda BPM流程组件，对We
（一）Activiti7 之工作流介绍
增强分享精神，维护良好的编程环境，传递你我他
06-19 1323
应公司要求，需要研究项目中的框架 activiti7 ，所以有了下面这些内容。Activity 第一版在2010年5月发布，当时仅支持最简单的流程处理，之后的版本陆续完善了对BPMN 2.0规范的支持。其核心是使用Java开发的。其前身就是JBPM。activiti5以及activiti6、flowable是Tijs Rademakers团队开发的，Activiti7是 Salaboy团队开发的。
activiti 通过xml上传 直接部署模型
书读百遍，其义自见
09-04 713
注意这里的addModelEditorSource addModelEditorSourceExtra获取。// 版本。
【2023最新Activiti7全网最全】3、Activiti7基本操作
wufaqidong1的博客
03-16 985
查询流程相关的信息，包括流程的定义，流程的部署，流程定义的版本/*** 查询流程的定义*/@Test// 获取一个 ProcessDefinitionQuery对象 用来查询操作.orderByProcessDefinitionVersion() // 安装版本排序.desc() // 倒序.list();// 输出流程定义的信息System.out.println("流程定义的ID：" + processDefinition.getId());
spring cloud-Activiti 7上传流程
08-22 377
上传流程，如在开发系统设计好模型后，可上传到测试系统，测试通过后，可直接上传到生产系统。上传流程的同时，也将模型建立起来。 其实现思路如下： public ResultData upload(@RequestParam(value = "file", required = true) MultipartFile file, @RequestParam String deploymentName, ...
activiti7(三)：Activiti7简介与HelloWorld
热门推荐
no problem的博客
04-25 1万+
activiti7简介与helloworld，旨在学习activiti7的工作流程和原理
基于若依开发管理项目中引入工作流引擎activiti7，包含前后端（原创）
a10534126的博客
03-02 5896
原项目中用到了工作流引擎，使用若依框架开发， 原二开使用项目：https://gitee.com/y_project/RuoYi-Vue 基于activiti7地址：https://gitee.com/smell2/ruoyi-vue-activiti 导入模块到原二开项目中 使用步骤 admin导入bpmn文件，或者绘制工作流，并激活。 post为普通员工进入我的审批可以查看所有审批（经销商角色） 数据会存入历史表和任务表 历史表展现全部任务数据，task会展示对应岗位的相应条数据 登录商管账号，进入
Android混合开发之Activity类与html页面之间的相互跳转
findsafety的专栏
05-05 1万+
在底部有本程序源码下载  本程序流程 ：程序启动-->testActivity--->phonegap2框架类--->index.html--->testActivity，主要实现activity与html页面的相互跳转，并实现 传递参数的功能。 程序结构图： 1.创建一个安卓项目，在该项目里面添加PhoneGap框架(具体步骤请 点击查看 )，我们知道我们在
Liferay7 BPM门户开发之45: 集成Activiti文件上传部署流程BPMN模型
昕友软件博客
12-15 288
  开发文件上传，部署流程模板。 首先，开发jsp页面，deploy.jsp &lt;%@ include file="/init.jsp" %&gt; &lt;h3&gt;${RETURN_MESSAGE}&lt;/h3&gt; &lt;h2&gt;&lt;liferay-ui:message key="Deploy"/&gt;&lt;/h2&gt; &a
layui upload插件的使用（java）以及怎么处理每个文件都要请求一次路径
lianzhang861的博客
05-16 1万+
一般的上传空间的原理都是使用input type='file'的h5元素实现的，那这个layui的原理也是如此。 每次点击选择文件按钮，控件自动生成一个input，将文件选择，选择后将其files中的属性提取出文件名，大小等信息，关于files可看这篇文章。选择的文件可以累加，文件的files都会保存在构造函数内部 https://blog.csdn.net/lianzhang861/ar...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

eddie_k2

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值