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

以前、記事を投稿して友達にフロントエンドの 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 プロジェクトを開始すると、次のフローチャート描画ページが表示されます:

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

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

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

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

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

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

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

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

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

4. 承認パスライン

次に、最初に承認が渡されます。合格の条件は、承認済みフィールドが true の場合、承認が合格したことを意味します:

5. 承認後に通知を送信

After承認が通過すると、ユーザーに通知が送信されます。これはサービス タスクです。通知を送信するためのクラスは自分たちで作成するため、カスタム クラスの場所も構成する必要があります:

6. 終了

# #最後に承認を入力し、UserTask を渡して終了します:

7. 拒否ラインを描画します

上記のプロセスに従って続行します 拒否された休暇のプロセスを描画します:

muheflow-bpmn-modeler

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

これのソース コードは見つかりませんでしたが、これの使用法は workflow-bpmn-modeler の使用法と何ら変わらないことがわかりました ~ したがって、ナンセンスな話はせず、単にこれを次のように使用しますその上。

プログラミング関連の知識について詳しくは、

プログラミング入門

をご覧ください。 ！

以上がFlowable フローチャートを描画できる 2 つの Vue フロントエンド ライブラリを共有するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。