이전에 기사를 게시하고 친구들에게 프런트엔드 bpmn.js 라이브러리를 소개했습니다. 이 라이브러리를 사용하면 프로젝트에 흐름도 그리기 기능을 포함시킬 수 있습니다.
단, 이 라이브러리는 기본적으로 Camunda용으로 설계되어 있으므로 그려진 순서도에서 내보낸 XML 파일을 직접 사용할 수 없습니다. XML 파일을 Flowable 프로세스에서 사용할 수 있는 XML 파일로 변환하려면 일부 심층적인 사용자 정의가 필요합니다. 엔진. 이 심층적인 사용자 정의는 너무 번거롭습니다.
그래서 Flowable flowchart를 직접 그릴 수 있는 기성 라이브러리가 프론트 엔드에 있는지 궁금합니다. 검색해보니 두 가지가 있는데, 둘 다 Vue2를 기반으로 개발되었기 때문에 Vue3에서는 사용할 수 없다는 문제가 있습니다. Vue2, Vue2만 참아보세요. 결국, 저는 전문적인 프론트엔드 엔지니어가 아니기 때문에 제가 습득한 프론트엔드 기술만으로도 백엔드 요구 사항을 충족할 수 있습니다. Vue3은 명확합니다. [관련 추천: vuejs 비디오 튜토리얼]
자, 더 이상 고민하지 말고 Flowable 흐름 차트를 그릴 수 있는 두 개의 프런트엔드 라이브러리를 친구들에게 소개하겠습니다.
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>이 코드를 분석해 보겠습니다.
먼저 워크플로-bpmn-modeler에서 bpmnModeler를 가져옵니다.
bpmnModeler 컴포넌트를 등록하세요.
페이지에서 직접 bpmnModeler 구성요소를 사용하세요. 이 구성요소를 사용할 때 5개의 속성과 1개의 메소드가 있습니다. 하나씩 설명하겠습니다.
xml: 이 속성은 순서도의 XML 문자열입니다. bpmnModeler에 의해 표시됩니다. bpmnModeler 컴포넌트가 이 XML 문자열에 해당하는 순서도를 그릴 수 있도록 순서도의 XML 문자열을 미리 제공할 수 있습니다. 이것을 무시하고 빈 문자열을 제공하면 됩니다.
users: 이것은 UserTask를 구성할 때 이 UserTask를 처리할 사용자를 설정할 수 있습니다.
groups: 이는 사용자와 유사하며 UserTask에도 있습니다. UserTask에 대한 후보 그룹을 구성하려면 그룹의 콘텐츠가 사용됩니다.
카테고리: 이 속성은 개인 테스트에서는 기능이 없습니다. 소스 코드도 읽었습니다. 이 속성은 소스 코드에서 사용되지 않으며 무시할 수 있습니다.
is-view: 현재 bpmnModeler가 흐름도를 그리려는지 아니면 단순히 흐름도를 표시할지 여부를 나타냅니다. False는 bpmnModeler를 사용하여 흐름도를 그리는 것을 의미합니다. true로 설정하면 bpmnModeler는 Flowchart 표시에 사용됩니다. (Flowchart의 XML 파일을 미리 준비하고 bpmnModeler를 사용하여 표시합니다.)
@save: 웹 페이지에서 모델 저장 버튼을 클릭하면 실행되는 콜백 함수입니다.
그렇습니다.
다음으로 Vue 프로젝트를 시작하면 이 순서도 그리기 페이지를 볼 수 있습니다.
이제 즐겁게 순서도를 그릴 수 있습니다~
다음으로 송 형제가 이것을 사용하여 단계별로 가르쳐 드릴 것입니다. 이전 글에서 사용한 플로우 차트는 다음과 같았습니다.
그리는 방법을 살펴보겠습니다.
1 먼저 프로세스의 기본 정보를 정의해 보겠습니다.
2. 다음으로 관리자 승인 또는 거부 프로세스를 그립니다.
작업 유형을 설정하려면 이 렌치 버튼을 클릭하세요.
이 작업에 대한 리스너 설정:
리스너를 설정하는 이유는 프론트엔드 사용자가 탈퇴 신청 시 승인자를 직접 선택할 수도 있고, 승인자의 신원(관리자 등)을 선택할 수도 있기 때문입니다. 의. 따라서 작업 리스너를 추가합니다. 프로세스가 이 작업을 실행할 때 프런트 엔드에서 전달된 매개 변수를 기반으로 작업을 후보 또는 후보 사용자 그룹이 처리해야 하는지 여부를 작업 리스너에 설정합니다.
3. 상호 배타적인 게이트웨이 추가:
4. 승인 통과 라인
다음으로 승인 조건은 승인 필드가 true라는 것입니다. 이는 승인이 통과되었음을 의미합니다.
프로그래밍 소개
를 방문하세요! !위 내용은 Flowable 순서도를 그릴 수 있는 두 개의 Vue 프런트 엔드 라이브러리 공유의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
