이전에 기사를 게시하고 친구들에게 프런트엔드 bpmn.js 라이브러리를 소개했습니다. 이 라이브러리를 사용하면 프로젝트에 흐름도 그리기 기능을 포함시킬 수 있습니다.
단, 이 라이브러리는 기본적으로 Camunda용으로 설계되어 있으므로 그려진 순서도에서 내보낸 XML 파일을 직접 사용할 수 없습니다. XML 파일을 Flowable 프로세스에서 사용할 수 있는 XML 파일로 변환하려면 일부 심층적인 사용자 정의가 필요합니다. 엔진. 이 심층적인 사용자 정의는 너무 번거롭습니다.
그래서 Flowable flowchart를 직접 그릴 수 있는 기성 라이브러리가 프론트 엔드에 있는지 궁금합니다. 검색해보니 두 가지가 있는데, 둘 다 Vue2를 기반으로 개발되었기 때문에 Vue3에서는 사용할 수 없다는 문제가 있습니다. Vue2, Vue2만 참아보세요. 결국, 저는 전문적인 프론트엔드 엔지니어가 아니기 때문에 제가 습득한 프론트엔드 기술만으로도 백엔드 요구 사항을 충족할 수 있습니다. Vue3은 명확합니다. [관련 추천: vuejs 비디오 튜토리얼]
자, 더 이상 고민하지 말고 Flowable 흐름 차트를 그릴 수 있는 두 개의 프런트엔드 라이브러리를 친구들에게 소개하겠습니다.
workflow-bpmn-modeler
workflow-bpmn-modeler는 Vue 및 bpmn.io@7.0을 기반으로 하며 흐름 가능한 워크플로 디자이너를 구현합니다. 이 프로세스 그리기 도구를 사용하려면 flowable6.4.1 버전을 사용하는 것이 좋습니다. 상용 재구성은 flowable6.4.2 버전부터 시작됩니다. 코딩 학습을 용이하게 하려면 flowable6.4.1 버전을 사용하는 것이 좋습니다.
이 사용법은 실제로 매우 간단합니다. 먼저 Vue2 프로젝트를 만듭니다. 잘못된 버전의 Vue를 선택하지 않도록 주의하세요. 프로젝트가 생성된 후 다음 명령 중 하나를 실행합니다. 추가:
npm i workflow-bpmn-modeler
로그인 후 복사
또는:
yarn add workflow-bpmn-modeler
로그인 후 복사
를 추가한 후 package.json의 내용은 다음과 같습니다.
{
"name": "bpmn_demo02",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build"
},
"dependencies": {
"core-js": "^3.8.3",
"element-ui": "^2.15.9",
"vue": "^2.6.14",
"vue-router": "^3.5.1",
"workflow-bpmn-modeler": "^0.2.8"
},
"devDependencies": {
"@vue/cli-plugin-babel": "~5.0.0",
"@vue/cli-plugin-router": "~5.0.0",
"@vue/cli-service": "~5.0.0",
"vue-template-compiler": "^2.6.14"
}
}로그인 후 복사
버전 번호에 주의하세요.
다음으로 이 구성 요소를 .vue 파일에서 사용할 수 있습니다. 코드는 다음과 같습니다.
<template>
<div>
<bpmn-modeler></bpmn-modeler>
</div>
</template>
<script>
import bpmnModeler from "workflow-bpmn-modeler";
export default {
components: {
bpmnModeler,
},
data() {
return {
xml: "", // 后端查询到的xml
users: [
{ name: "javaboy", id: 1 },
{ name: "itboyhub", id: 2 },
{ name: "江南一点雨", id: 3 },
],
groups: [
{ name: "经理", id: 4 },
{ name: "组长", id: 5 },
{ name: "员工", id: 6 },
],
categorys: [
{ name: "OA", id: "oa" },
{ name: "财务", id: "finance" },
],
};
},
methods: {
getModelDetail() {
// 发送请求，获取xml
// this.xml = response.xml
},
save(data) {
console.log(data); // { process: {...}, xml: '...', svg: '...' }
},
},
};
</script>로그인 후 복사
이 코드를 분석해 보겠습니다.
그렇습니다.
다음으로 Vue 프로젝트를 시작하면 이 순서도 그리기 페이지를 볼 수 있습니다.
이제 즐겁게 순서도를 그릴 수 있습니다~
다음으로 송 형제가 이것을 사용하여 단계별로 가르쳐 드릴 것입니다. 이전 글에서 사용한 플로우 차트는 다음과 같았습니다.
그리는 방법을 살펴보겠습니다.
1 먼저 프로세스의 기본 정보를 정의해 보겠습니다.
2. 다음으로 관리자 승인 또는 거부 프로세스를 그립니다.
작업 유형을 설정하려면 이 렌치 버튼을 클릭하세요.
이 작업에 대한 리스너 설정:
리스너를 설정하는 이유는 프론트엔드 사용자가 탈퇴 신청 시 승인자를 직접 선택할 수도 있고, 승인자의 신원(관리자 등)을 선택할 수도 있기 때문입니다. 의. 따라서 작업 리스너를 추가합니다. 프로세스가 이 작업을 실행할 때 프런트 엔드에서 전달된 매개 변수를 기반으로 작업을 후보 또는 후보 사용자 그룹이 처리해야 하는지 여부를 작업 리스너에 설정합니다.
3. 상호 배타적인 게이트웨이 추가:
4. 승인 통과 라인
다음으로 승인 조건은 승인 필드가 true라는 것입니다. 이는 승인이 통과되었음을 의미합니다.
5. 승인 후 알림 보내기
승인이 완료된 후 사용자에게 알림을 보내는 서비스 작업이므로 위치도 구성해야 합니다. 사용자 정의 클래스:
6. End
마지막으로 승인을 입력하고 UserTask를 통과하고 종료:
7. 위 프로세스에 따라 프로세스를 계속 그립니다. 거부된 휴가 수:
muheflow-bpmn-modeler
송 형제가 여러분에게 소개하고 싶은 두 번째 도구는 muheflow-bpmn-modeler입니다. 이는 Vue 및 bpmn.io@8.0을 기반으로 하며 흐름 가능한 워크플로우 디자이너. 이 프로세스 그리기 도구를 사용하려면 flowable6.4.1 버전을 사용하는 것이 좋습니다. 상용 재구성은 flowable6.4.2 버전부터 시작됩니다. 코딩 학습을 용이하게 하려면 flowable6.4.1 버전을 사용하는 것이 좋습니다.
소스코드는 못찾았으나 사용법은workflow-bpmn-modeler의 사용법과 별반 차이가 없음을 알았습니다~ 그러니 헛소리는 하지말고 위와 같이 사용하시면 됩니다.
더 많은 프로그래밍 관련 지식을 보려면
프로그래밍 소개
를 방문하세요! !
위 내용은 Flowable 순서도를 그릴 수 있는 두 개의 Vue 프런트 엔드 라이브러리 공유의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
