Partagez deux bibliothèques frontales Vue capables de dessiner des organigrammes Flowable

J'ai déjà publié un article et présenté la bibliothèque frontale bpmn.js à mes amis. Grâce à cette bibliothèque, nous pouvons intégrer la fonction de dessin d'organigrammes dans nos projets.

Cependant, cette bibliothèque est conçue pour Camunda par défaut, de sorte que le fichier XML exporté à partir de l'organigramme dessiné ne peut pas être utilisé directement. Une personnalisation approfondie doit être effectuée pour convertir le fichier XML en un fichier XML utilisable par le processus Flowable. moteur. Cette personnalisation profonde est trop gênante.

Je me demandais donc s'il existe une bibliothèque prête à l'emploi sur le front-end qui peut être utilisée directement pour dessiner des organigrammes Flowable ? Après avoir cherché, j'en ai trouvé deux. La similitude entre les deux est assez élevée, mais les deux ont un problème, c'est-à-dire qu'ils sont tous deux développés sur la base de Vue2 et ne peuvent pas être utilisés dans Vue3. Vue2, juste Vue2, supportez-le. Après tout, je ne suis pas un ingénieur front-end professionnel. Il suffit que les compétences front-end que je maîtrise puissent répondre à mes besoins back-end. Si j'étais un ingénieur front-end professionnel, je comprendrais certainement bpmn.js+. Vue3 clairement. [Recommandations associées : Tutoriel vidéo vuejs]

D'accord, sans plus tarder, permettez-moi de présenter à mes amis ces deux bibliothèques frontales qui peuvent dessiner des organigrammes Flowable.

workflow-bpmn-modeler

workflow-bpmn-modeler est basé sur Vue et bpmn.io@7.0, implémentant un concepteur de flux de travail fluide. Pour utiliser cet outil de dessin de processus, il est recommandé d'utiliser la version flowable6.4.1. La reconstruction commerciale commencera avec la version flowable6.4.2. Afin de faciliter l'apprentissage du codage, il est recommandé d'utiliser la version flowable6.4.1.

Cette utilisation est en fait très simple. Tout d'abord, nous créons un projet Vue2. Attention à ne pas choisir la mauvaise version de Vue. Une fois le projet créé, ajoutez la dépendance workflow-bpmn-modeler et exécutez l'une des commandes suivantes. ajoutez :

npm i workflow-bpmn-modeler

ou :

Après l'ajout de

yarn add workflow-bpmn-modeler

, le contenu de package.json est le suivant :

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

Faites attention au numéro de version.

Ensuite, nous pouvons utiliser ce composant dans un fichier .vue, le code est le suivant :

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

Analysons ce code :

• Importez d'abord bpmnModeler depuis workflow-bpmn-modeler.

• Enregistrez le composant bpmnModeler.

• Utilisez le composant bpmnModeler directement dans la page. Lors de l'utilisation de ce composant, il existe cinq attributs et une méthode. Parlons-en un par un :

  • xml : Cet attribut est la chaîne XML de l'organigramme. à afficher par bpmnModeler. Nous pouvons donner à l'avance une chaîne XML d'un organigramme, afin que le composant bpmnModeler dessine l'organigramme correspondant à cette chaîne XML. Si nous voulons simplement dessiner l'organigramme nous-mêmes, nous pouvons le faire. ignorez cela et donnez une chaîne vide fera l'affaire.

  • users : Il s'agit d'un tableau. Lorsque nous configurons UserTask, nous pouvons définir qui gérera cette UserTask. Les utilisateurs configurent les utilisateurs utilisés ici.

  • groupes : Ceci est similaire aux utilisateurs et se trouve également dans UserTask. Si nous voulons configurer un groupe de candidats pour UserTask, alors le contenu des groupes sera utilisé.

  • categorys : Cet attribut n'a aucune fonction dans les tests personnels. J'ai également lu le code source. Cet attribut n'est pas utilisé dans le code source. C'est un attribut complètement inutile et peut être ignoré.

  • is-view : Cela indique si le bpmnModeler actuel souhaite dessiner un organigramme ou simplement afficher l'organigramme. False signifie que nous utilisons bpmnModeler pour dessiner l'organigramme. S'il est défini sur true, cela signifie que bpmnModeler est uniquement. utilisé pour l'affichage (préparez le fichier XML de l'organigramme à l'avance et utilisez bpmnModeler pour l'afficher).

  • @save : Il s'agit d'une fonction de rappel qui sera déclenchée lorsque vous cliquerez sur le bouton Enregistrer le modèle sur la page Web.

D'accord, c'est tout.

Ensuite, nous démarrons le projet Vue et vous pouvez voir cette page de dessin d'organigramme :

Maintenant, vous pouvez dessiner l'organigramme avec plaisir~

Ensuite, Brother Song l'utilisera pour vous apprendre étape par étape à dessiner la demande de congé L'organigramme utilisé dans l'article précédent. L'organigramme à cette époque était comme ceci :

Voyons comment le dessiner :

1 Tout d'abord, définissons les informations de base du processus :

. 2. Ensuite, dessinez le processus d'approbation ou de rejet du responsable :

Cliquez sur ce bouton clé pour définir le type de tâche :

Définissez un auditeur pour cette tâche :

La raison de la configuration de l'auditeur est que lorsque l'utilisateur frontal soumet une demande de congé, il peut sélectionner directement l'approbateur ou sélectionner l'identité de l'approbateur (comme un responsable). de. Nous ajoutons donc un écouteur de tâches. Lorsque le processus exécute cette tâche, nous définissons dans l'écouteur de tâches si la tâche doit être traitée par le candidat ou le groupe d'utilisateurs candidats en fonction des paramètres transmis par le front-end.

3. Ajoutez une passerelle mutuellement exclusive :

4. Ligne de passage d'approbation

Ensuite, la condition d'approbation est que le champ approuvé est vrai, ce qui signifie que l'approbation est passée :

.

5. Envoyer une notification après approbation

Une fois l'approbation passée, envoyez une notification à l'utilisateur. Il s'agit d'une tâche de service. La classe d'envoi de notification est écrite par nous-mêmes, nous devons donc également configurer l'emplacement de la notification. classe personnalisée :

6. Fin

Enfin, entrez l'approbation et passez la tâche utilisateur et terminez :

7. Tracez la ligne de rejet

Suivez le processus ci-dessus et continuez à tracer le processus de congé rejeté :

muheflow-bpmn-modeler

Le deuxième outil que Brother Song souhaite vous présenter est muheflow-bpmn-modeler, qui est basé sur Vue et bpmn.io@8.0 et implémente un concepteur de flux de travail. Pour utiliser cet outil de dessin de processus, il est recommandé d'utiliser la version flowable6.4.1. La reconstruction commerciale commencera avec la version flowable6.4.2. Afin de faciliter l'apprentissage du codage, il est recommandé d'utiliser la version flowable6.4.1.

Je n'ai pas trouvé le code source de ceci, mais j'ai trouvé que son utilisation n'est pas différente de l'utilisation de workflow-bpmn-modeler ~ Donc je ne dirai pas de bêtises, utilisez simplement ceci comme ci-dessus.

Pour plus de connaissances sur la programmation, veuillez visiter : Introduction à la programmation ! !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!