집 > 기사 > 웹 프론트엔드 > Flowable 순서도를 그릴 수 있는 두 개의 Vue 프런트 엔드 라이브러리 공유

Flowable 순서도를 그릴 수 있는 두 개의 Vue 프런트 엔드 라이브러리 공유

青灯夜游앞으로: 2022-09-07 19:59:393925검색

이전에 기사를 게시하고 친구들에게 프런트엔드 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: &#39;...&#39;, svg: &#39;...&#39; }
      },
    },
  };
</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 프로젝트를 시작하면 이 순서도 그리기 페이지를 볼 수 있습니다.

Flowable 순서도를 그릴 수 있는 두 개의 Vue 프런트 엔드 라이브러리 공유

이제 즐겁게 순서도를 그릴 수 있습니다~

다음으로 송 형제가 이것을 사용하여 단계별로 가르쳐 드릴 것입니다. 이전 글에서 사용한 플로우 차트는 다음과 같았습니다.

Flowable 순서도를 그릴 수 있는 두 개의 Vue 프런트 엔드 라이브러리 공유

그리는 방법을 살펴보겠습니다.

1 먼저 프로세스의 기본 정보를 정의해 보겠습니다.

Flowable 순서도를 그릴 수 있는 두 개의 Vue 프런트 엔드 라이브러리 공유

2. 다음으로 관리자 승인 또는 거부 프로세스를 그립니다.

작업 유형을 설정하려면 이 렌치 버튼을 클릭하세요.

Flowable 순서도를 그릴 수 있는 두 개의 Vue 프런트 엔드 라이브러리 공유

이 작업에 대한 리스너 설정:

Flowable 순서도를 그릴 수 있는 두 개의 Vue 프런트 엔드 라이브러리 공유

리스너를 설정하는 이유는 프론트엔드 사용자가 탈퇴 신청 시 승인자를 직접 선택할 수도 있고, 승인자의 신원(관리자 등)을 선택할 수도 있기 때문입니다. 의. 따라서 작업 리스너를 추가합니다. 프로세스가 이 작업을 실행할 때 프런트 엔드에서 전달된 매개 변수를 기반으로 작업을 후보 또는 후보 사용자 그룹이 처리해야 하는지 여부를 작업 리스너에 설정합니다.

3. 상호 배타적인 게이트웨이 추가:

Flowable 순서도를 그릴 수 있는 두 개의 Vue 프런트 엔드 라이브러리 공유