Teilen Sie zwei Vue-Frontend-Bibliotheken, die Flowable-Flussdiagramme zeichnen können

Ich habe zuvor einen Artikel veröffentlicht und meinen Freunden die Front-End-Bibliothek bpmn.js vorgestellt. Mit dieser Bibliothek können wir die Funktion zum Zeichnen von Flussdiagrammen in unsere Projekte einbetten.

Diese Bibliothek ist jedoch standardmäßig für Camunda konzipiert, sodass die aus dem gezeichneten Flussdiagramm exportierte XML-Datei nicht direkt verwendet werden kann, um die XML-Datei in eine vom Flowable-Prozess verwendbare XML-Datei zu konvertieren Motor. Diese umfassende Anpassung ist zu mühsam.

Also habe ich mich gefragt, ob es im Frontend eine vorgefertigte Bibliothek gibt, die direkt zum Zeichnen von Flowable-Flussdiagrammen verwendet werden kann? Nachdem ich herumgesucht habe, habe ich zwei ziemlich große Ähnlichkeiten festgestellt. Beide haben jedoch ein Problem, nämlich dass sie beide auf Basis von Vue2 entwickelt wurden und nicht in Vue3 verwendet werden können. Vue2, nur Vue2, ertrage es. Schließlich bin ich kein professioneller Front-End-Ingenieur. Wenn ich ein professioneller Front-End-Ingenieur wäre, würde ich bpmn.js+ auf jeden Fall verstehen Vue3 klar. [Verwandte Empfehlungen: vuejs-Video-Tutorial]

Okay, ohne weitere Umschweife möchte ich meinen Freunden diese beiden Front-End-Bibliotheken vorstellen, die Flowable-Flussdiagramme zeichnen können.

workflow-bpmn-modeler

workflow-bpmn-modeler basiert auf Vue und bpmn.io@7.0 und implementiert einen fließfähigen Workflow-Designer. Um dieses Prozesszeichnungstool zu verwenden, wird empfohlen, die Version flowable6.4.1 zu verwenden. Die kommerzielle Rekonstruktion beginnt mit der Version flowable6.4.2. Um das Programmieren zu erleichtern, wird empfohlen, die Version flowable6.4.1 zu verwenden.

Diese Verwendung ist eigentlich sehr einfach. Zuerst erstellen wir ein Vue2-Projekt. Nachdem das Projekt erstellt wurde, fügen wir einen der folgenden Befehle hinzu hinzufügen:

npm i workflow-bpmn-modeler

oder:

Nachdem

yarn add workflow-bpmn-modeler

hinzugefügt wurde, lautet der Inhalt von package.json wie folgt:

{
  "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"
  }
}

Achten Sie auf die Versionsnummer.

Als nächstes können wir diese Komponente in einer .vue-Datei verwenden. Der Code lautet wie folgt:

<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>

Lassen Sie uns diesen Code analysieren:

• Importieren Sie zuerst bpmnModeler aus Workflow-bpmn-modeler.

• Registrieren Sie die bpmnModeler-Komponente.

• Verwenden Sie die bpmnModeler-Komponente direkt auf der Seite. Wenn Sie diese Komponente verwenden, gibt es fünf Attribute und eine Methode. Lassen Sie uns nacheinander darüber sprechen:

  • xml: Dieses Attribut ist die XML-Zeichenfolge des Flussdiagramms von bpmnModeler angezeigt werden. Sie können im Voraus einen XML-String eines Flussdiagramms angeben, damit die bpmnModeler-Komponente das Flussdiagramm entsprechend diesem XML-String zeichnet Ignorieren Sie dies und geben Sie einen leeren String ein.

  • users: Dies ist ein Array. Wenn wir UserTask konfigurieren, können wir festlegen, wer diese UserTask verwaltet.

  • Gruppen: Dies ist ähnlich wie bei Benutzern und auch in UserTask. Wenn wir eine Kandidatengruppe für UserTask konfigurieren möchten, werden die Inhalte in Gruppen verwendet.

  • Kategorien: Dieses Attribut hat im persönlichen Test keine Funktion. Dieses Attribut wird im Quellcode nicht verwendet und kann ignoriert werden.

  • ist-Ansicht: Dies gibt an, ob der aktuelle bpmnModeler das Flussdiagramm zeichnen möchte oder nur das Flussdiagramm anzeigt. Wenn es auf true gesetzt ist, bedeutet dies, dass bpmnModeler nur das Flussdiagramm zeichnet Wird zur Anzeige des Flussdiagramms verwendet (bereiten Sie die XML-Datei des Flussdiagramms im Voraus vor und verwenden Sie bpmnModeler, um es anzuzeigen).

  • @save: Dies ist eine Rückruffunktion, die ausgelöst wird, wenn auf der Webseite auf die Schaltfläche „Modell speichern“ geklickt wird.

Okay, das ist es.

Als nächstes starten wir das Vue-Projekt und Sie können diese Flussdiagramm-Zeichenseite sehen:

Jetzt können Sie problemlos das Flussdiagramm zeichnen~

Als nächstes wird Ihnen Bruder Song Schritt für Schritt beibringen, wie Sie den Urlaubsantrag zeichnen Das im vorherigen Artikel verwendete Flussdiagramm sah so aus:

Sehen wir uns an, wie man es zeichnet:

1 Definieren wir zunächst die grundlegenden Informationen des Prozesses:

2. Zeichnen Sie als Nächstes den Genehmigungs- oder Ablehnungsprozess des Managers:

Klicken Sie auf diese Schraubenschlüssel-Schaltfläche, um den Aufgabentyp festzulegen:

Legen Sie einen Listener für diese Aufgabe fest:

Der Grund für die Einrichtung des Listeners besteht darin, dass der Front-End-Benutzer beim Einreichen eines Urlaubsantrags direkt den Genehmiger auswählen oder die Identität des Genehmigers (z. B. einen Manager) auswählen kann. von. Deshalb fügen wir einen Aufgaben-Listener hinzu. Wenn der Prozess diese Aufgabe ausführt, legen wir im Aufgaben-Listener fest, ob die Aufgabe vom Kandidaten oder der Kandidatenbenutzergruppe basierend auf den vom Frontend übergebenen Parametern verarbeitet werden soll.

3. Fügen Sie ein sich gegenseitig ausschließendes Gateway hinzu:

4. Als nächstes wird die Genehmigung bestanden, was bedeutet, dass die Genehmigung bestanden ist:

5. Benachrichtigung nach Genehmigung senden

Nachdem die Genehmigung erteilt wurde, senden Sie eine Benachrichtigung an den Benutzer. Die Klasse zum Senden von Benachrichtigungen wird von uns selbst geschrieben, daher müssen wir auch den Standort konfigurieren Benutzerdefinierte Klasse:

6. Geben Sie abschließend die Genehmigung ein und übergeben Sie UserTask und beenden Sie:

7. Folgen Sie dem obigen Prozess und zeichnen Sie den Prozess weiter abgelehnter Urlaub:

muheflow-bpmn-modeler

Das zweite Tool, das Brother Song Ihnen vorstellen möchte, ist muheflow-bpmn-modeler, das auf Vue und bpmn.io@8.0 basiert und ein Flowable implementiert Workflow-Designer. Um dieses Prozesszeichnungstool zu verwenden, wird empfohlen, die Version flowable6.4.1 zu verwenden. Die kommerzielle Rekonstruktion beginnt mit der Version flowable6.4.2. Um das Programmieren zu erleichtern, wird empfohlen, die Version flowable6.4.1 zu verwenden.

Ich habe den Quellcode dafür nicht gefunden, aber ich habe festgestellt, dass sich die Verwendung davon nicht von der Verwendung von Workflow-BPMN-Modeler unterscheidet ~ Ich werde also keinen Unsinn reden, sondern dies einfach wie oben verwenden. Weitere Kenntnisse zum Thema Programmierung finden Sie unter:

Einführung in die Programmierung

! !

Das obige ist der detaillierte Inhalt vonTeilen Sie zwei Vue-Frontend-Bibliotheken, die Flowable-Flussdiagramme zeichnen können. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!