ホームページ >ウェブフロントエンド >Vue.js >Flowable フローチャートを描画できる 2 つの Vue フロントエンドライブラリを共有する

Flowable フローチャートを描画できる 2 つの Vue フロントエンドライブラリを共有する

青灯夜游転載: 2022-09-07 19:59:394141ブラウズ

以前、記事を投稿して友達にフロントエンドの bpmn.js ライブラリを紹介しましたが、このライブラリを利用するとフローチャートを描画する機能をプロジェクトに組み込むことができます。

ただし、このライブラリはデフォルトで Camunda 用に設計されているため、描画されたフローチャートからエクスポートされた XML ファイルを直接使用することはできません。XML ファイルを使用可能なプロセスエンジンに変換するには、ある程度の詳細なカスタマイズを行う必要があります。 .XML ファイル。この奥深いカスタマイズは面倒すぎる。

それでは、Flowable フローチャートを描画するために直接使用できる、フロントエンドに既製のライブラリがあるかどうか疑問に思いました。探してみると 2 つ見つかりました。両者の類似性はかなり高いのですが、両方とも Vue2 をベースに開発されているため、Vue3 では使用できないという問題があります。ツールとしては忘れてください。 Vue2、ただの Vue2、我慢してください。結局のところ、私はプロのフロントエンドエンジニアではありません。習得したフロントエンドのスキルがバックエンドのニーズを満たすことができれば十分です。もし私がプロのフロントエンドエンジニアだったら、bpmn.js Vue3 を確実に理解するでしょう。明らかに。 [関連する推奨事項: vuejs ビデオチュートリアル ]

さて、早速、Flowable フローチャートを描画できる 2 つのフロントエンドライブラリを友達に紹介しましょう。

workflow-bpmn-modeler

workflow-bpmn-modeler は、Vue と bpmn.io@7.0 に基づいた流動的なワークフローデザイナーを実装します。このプロセス描画ツールを使用するには、flowable6.4.1 バージョンの使用を推奨します。商用再構築は、flowable6.4.2 バージョンから開始されます。コーディングの学習を容易にするために、flowable6.4.1 バージョンの使用を推奨します。

この使用法は実際には非常に簡単です。まず、Vue2 プロジェクトを作成します。間違ったバージョンの Vue を選択しないように注意してください。プロジェクトが作成された後、workflow-bpmn-modeler 依存関係を追加し、次のいずれかを実行します。次のコマンドを追加します:

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>

このコードを分析しましょう:

まず、workflow-bpmn-modeler から bpmnModeler をインポートします。
bpmnModeler コンポーネントを登録します。
bpmnModeler コンポーネントをページ内で直接使用します。このコンポーネントを使用する場合、5 つの属性と 1 つのメソッドがあります。1 つずつ説明しましょう:
- xml : この属性は、bpmnModeler で表示するフローチャートの XML 文字列です。フローチャートの XML 文字列を事前に指定すると、bpmnModeler コンポーネントがこの XML 文字列に対応するフローチャートを描画します。単純にフローチャートを自分で描きたい場合は、これを無視して空の文字列を与えることができます。
- users: これは配列です。UserTask を構成するときに、この UserTask を誰が処理するかを設定できます。Users は、ここで使用されるユーザーを構成します。
- groups: これはユーザーに似ており、UserTask にもあります。UserTask の候補グループを構成する場合は、グループ内のコンテンツが使用されます。
- カテゴリ: この属性は、私の個人的なテストでは機能しません。ソースコードも読みました。この属性はソースコードでは使用されていません。これはまったく役に立たない属性であり、無視されます。
- is-view: これは、現在の bpmnModeler がフローチャートを描画したいのか、それとも単にフローチャートを表示するのかを示します。False は、bpmnModeler を使用してフローチャートを描画することを意味します。 true は、 bpmnModeler がフローチャートの表示のみに使用されることを意味します (フローチャートの XML ファイルを事前に準備し、 bpmnModeler を使用して表示します)。
- @save: これは、Web ページ上のモデルの保存ボタンがクリックされたときにトリガーされるコールバック関数です。

わかりました、以上です。

次に、Vue プロジェクトを開始すると、次のフローチャート描画ページが表示されます:

Flowable フローチャートを描画できる 2 つの Vue フロントエンドライブラリを共有する

これで、フローチャートを楽しく描画できるようになります~

次に、ソング兄弟はこれを使って、前の記事で使用した休暇申請フローチャートの書き方を段階的に教えます。その時のフローチャートは次のとおりです。

Flowable フローチャートを描画できる 2 つの Vue フロントエンドライブラリを共有する

描画方法を見てみましょう:

1. まず、プロセスの基本情報を定義しましょう:

Flowable フローチャートを描画できる 2 つの Vue フロントエンドライブラリを共有する

2. 次に、描画マネージャーはプロセスを承認または拒否します。

このレンチボタンをクリックして、タスクタイプを設定します。

Flowable フローチャートを描画できる 2 つの Vue フロントエンドライブラリを共有する

このタスクのリスナーを設定します。

Flowable フローチャートを描画できる 2 つの Vue フロントエンドライブラリを共有する

リスナーを設定する理由は、フロントエンドユーザーが休暇申請を送信するときに、承認者を直接選択するか、承認者の ID を選択できるためです。承認者 (マネージャなど) )、両方のオプションが許可されます。そこでタスクリスナーを追加し、このタスクに対して処理を実行する際に、フロントエンドから渡されたパラメータに基づいてタスクを候補者が処理するのか候補ユーザーグループが処理するのかをタスクリスナーに設定します。

3. 相互排他的なゲートウェイを追加します:

Flowable フローチャートを描画できる 2 つの Vue フロントエンドライブラリを共有する