arrière-plan
Pour le problème des paramètres de processus peu conviviaux, DingTalk domestique a conçu et mis en œuvre séparément un ensemble de modes de modélisation de processus, qui n'a rien à voir avec la spécification bpmn. Quelqu'un l'a imité et l'a rendu open source ( https://github.com/StavinLi/ Workflow -Vue3 ), le diagramme d'effet est le suivant :
le principe général de mise en œuvre est basé sur des sous-nœuds imbriqués à l'infini, sortant des données json et les transmettant au backend. Aujourd'hui, parlons du travail d'intégration du frontend.
Encapsulation de composants de modélisation de processus
Le composant flowDesign.vue est ajouté pour encapsuler l'opération de modélisation de processus, ajuster la vue d'édition du modèle de processus et remplacer les propriétés du modèle par le composant flowDesign.vue. Le style est le suivant :
code source
<template>
<div class="w-full">
<el-input disabled style="width: 152px" />
<el-button-group>
<el-button icon="grid" @click="init" style="border-left-width: 0; padding: 10px" />
<el-button icon="delete" @click="clear" style="border-left-width: 0; padding: 10px" />
</el-button-group>
<Dialog title="流程建模" v-model="visible" fullscreen>
<div>
<div class="fd-nav">
<div class="fd-nav-left">
<!-- TODO 显示流程模板名称 -->
<div class="fd-nav-title">{
{ flowTemplateName }}</div>
</div>
<div class="fd-nav-right">
<el-button type="primary" @click="save">保存</el-button>
</div>
</div>
<div class="fd-nav-content">
<section class="dingflow-design">
<div class="zoom">
<div class="zoom-out" :class="nowVal == 50 && 'disabled'" @click="zoomSize(1)"></div>
<span>{
{ nowVal }}%</span>
<div class="zoom-in" :class="nowVal == 300 && 'disabled'" @click="zoomSize(2)"></div>
</div>
<div class="box-scale" :style="`transform: scale(${nowVal / 100});`">
<nodeWrap v-model:nodeConfig="nodeConfig" v-model:flowPermission="flowPermission" />
<div class="end-node">
<div class="end-node-circle"></div>
<div class="end-node-text">流程结束</div>
</div>
</div>
</section>
</div>
<errorDialog v-model:visible="tipVisible" :list="tipList" />
<promoterDrawer />
<approverDrawer :directorMaxLevel="directorMaxLevel" />
<copyerDrawer />
<conditionDrawer />
</div>
</Dialog>
</div>
</template>
<script>
import { Dialog } from '@/components/abc/Dialog'
import errorDialog from './model/components/dialog/errorDialog.vue'
import promoterDrawer from './model/components/drawer/promoterDrawer.vue'
import approverDrawer from './model/components/drawer/approverDrawer.vue'
import copyerDrawer from './model/components/drawer/copyerDrawer.vue'
import conditionDrawer from './model/components/drawer/conditionDrawer.vue'
import nodeWrap from './model/components/nodeWrap.vue'
// import addNode from './model/components/drawer/conditionDrawer.vue'
export default {
components: {
Dialog,
errorDialog,
promoterDrawer,
approverDrawer,
copyerDrawer,
conditionDrawer,
nodeWrap
},
props: {
modelValue: {
type: String
},
flowTemplateName: {
type: String
}
},
data() {
return {
visible: false,
// 当前缩放值
nowVal: 100,
// 模型配置
nodeConfig: {},
flowPermission: [],
tipVisible: false,
directorMaxLevel: 0,
tipList: [],
// 初始化数据
defaultNodeConfig: {
nodeName: '发起人',
type: 0,
priorityLevel: '',
settype: '',
selectMode: '',
selectRange: '',
directorLevel: '',
examineMode: '',
noHanderAction: '',
examineEndDirectorLevel: '',
ccSelfSelectFlag: '',
conditionList: [],
nodeUserList: [],
childNode: {
nodeName: '审核人',
error: false,
type: 1,
settype: 2,
selectMode: 0,
selectRange: 0,
directorLevel: 1,
examineMode: 1,
noHanderAction: 2,
examineEndDirectorLevel: 0,
childNode: {
nodeName: '抄送人',
type: 2,
ccSelfSelectFlag: 1,
childNode: null,
nodeUserList: [],
error: false
},
nodeUserList: []
},
conditionNodes: []
}
}
},
mounted() {
this.init()
},
methods: {
init() {
if (this.modelValue != '{}') {
// 绑定数据不为空，则使用绑定数据初始化
this.nodeConfig = JSON.parse(this.modelValue)
} else {
// 否则，加载默认配置
this.nodeConfig = this.defaultNodeConfig
}
this.visible = true
},
save() {
this.$emit('update:modelValue', JSON.stringify(this.nodeConfig))
this.visible = false
},
// 清空配置
clear() {
this.$confirm('此操作将重置流程配置为初始状态, 是否继续?', '确认', {
type: 'warning'
})
.then(() => {
this.$emit('update:modelValue', '{}')
})
.catch(() => {
this.$message.info('已取消')
})
},
zoomSize(type) {
if (type == 1) {
if (this.nowVal == 50) {
return
}
this.nowVal -= 10
} else {
if (this.nowVal == 300) {
return
}
this.nowVal += 10
}
}
}
}
</script>
<style>
@import './model/css/workflow.css';
.error-modal-list {
width: 455px;
}
</style>
Intégration fonctionnelle des composants de modélisation de processus
Pour le vue-simple-uploader, vue-echarts, etc. qui étaient intégrés et utilisés auparavant, installez simplement le package npm directement.
La fonction de modélisation de processus n'est pas si simple, elle doit être profondément intégrée à sa propre plate-forme ou système. Workflow-Vue3, un projet open source, ne fournit pas une simple fonction de composant, mais un projet front-end indépendant.Il n'y a pas beaucoup de packages, et l'intégration est plus ajustée par rapport au code source, ce qui implique beaucoup de transformation. et est relativement difficile.Il existe de nombreux problèmes, qui seront expliqués en détail ci-dessous.
Migration de composants
Sous le répertoire flowTemplate sous le répertoire d'affichage du flux de travail du module, créez un nouveau dossier modèle pour stocker de manière centralisée les fichiers associés du projet open source Workflow-Vue3, y compris les composants, css, magasins, utils et autres répertoires.
De plus, il existe des ressources d'image, qui sont placées dans le répertoire des actifs de la plate-forme
Ajustement de la relation de référence
Une fois les fichiers migrés, l'étape suivante consiste à ajuster la relation de référence. Le projet d'origine utilise beaucoup de @ ce répertoire racine src pour pointer, mais dans la plate-forme, il est placé dans un répertoire pour la gestion, et le chemin de référence doit être ajusté.
Comme dans le projet original, la référence est la suivante :
import { useStore } from '@/stores/index'
import { bgColors, placeholderList } from '@/utils/const'
Doit être ajusté à :
import { useStore } from '../stores/index'
import { bgColors, placeholderList } from '../utils/const'
Presque toutes les références des fichiers vue migrés doivent être modifiées à nouveau, et non seulement les références entre les composants vue, mais aussi les adresses de référence des styles CSS et des images doivent également être ajustées en conséquence.
Enregistrement des composants
Projets autonomes adaptés à l'utilisation des composants, certaines adaptations sont nécessaires.
Le projet d'origine enregistre globalement deux composants principaux dans main.js, comme suit :
import nodeWrap from '@/components/nodeWrap.vue'
app.component('nodeWrap', nodeWrap);
import addNode from '@/components/addNode.vue'
app.component('addNode', addNode);
Dans la plateforme, la modélisation des processus n'est qu'une fonction du module de workflow et ne sera pas utilisée ailleurs, elle n'est donc référencée que dans le composant flowDesign.vue dans l'auto-encapsulation.
import nodeWrap from './model/components/nodeWrap.vue'
Le composant addNode sera utilisé dans le composant nodeWrap, il est donc référencé dans le composant nodeWrap.
Le flux de travail du projet open source-vue3 lui-même n'a pas d'instructions d'intégration ni de précautions, de sorte que la plupart d'entre elles sont ajustées en examinant le code source et en signalant les erreurs. Prend du temps.
styles manquants
Après avoir terminé le travail ci-dessus, js n'affiche plus de messages d'erreur et la page peut charger du contenu. La page de modélisation est la suivante : elle est
évidemment causée par le manque de css. L'élément d'origine a été ajouté à la page de configuration. Je l'ai ajouté à la page flowDesign correspondante et a constaté qu'il est toujours déformé. Oui, l'affichage est normal après l'ajout du composant nodeWrap.
@import '…/css/workflow.css';
À ce moment, une question se pose en fait, pourquoi le projet d'origine n'a besoin d'être ajouté qu'une seule fois sur la page périphérique, mais je dois l'ajouter sur plusieurs pages.
Problème d'icône manquante
Ce qui précède résout le problème de style css manquant, l'affichage global est normal, mais l'icône est manquante, comme le montre la figure ci-dessous : Il a fallu
beaucoup de temps pour résoudre ce problème, et on a déjà suspecté que le nom de l'iconfont était causé par le même nom que le composant d'origine de la plate-forme L'exception s'est finalement avérée être un problème de portée css, c'est-à-dire que la portée doit être supprimée pour qu'elle prenne effet globalement... Cela résout également le problème des introductions multiples de css dans le chapitre précédent.
Cependant, il y a un danger caché ici, c'est-à-dire que le style CSS de la modélisation de processus supprime la restriction de portée, ce qui affectera certains styles et fonctions de la plate-forme elle-même.
Traitement des requêtes backend
L'appel de demande back-end de quantité analogique du projet d'origine, y compris l'organisation, le personnel, le rôle, la configuration du processus, etc., j'ai effectué un traitement temporaire, l'ai annoté ou remplacé par des données json statiques, puis je l'ai traité ultérieurement dans l'intégration approfondie en le remplaçant par les vraies données back-end de la plateforme.
résultat courant
Après avoir terminé le travail ci-dessus, le même effet de prévisualisation que l'effet de démonstration du projet d'origine peut être affiché normalement, comme illustré dans la figure ci-dessous :
Voici un exemple par défaut, utilisant le sponsor, le réviseur et le CC comme données d'échantillon initiales.
Informations sur la plateforme de développement
Nom de la plate-forme : One Two Three Development Platform
Introduction : plate-forme de développement générale au niveau de l'entreprise
Informations sur la conception : colonne csdn
Adresse open source : Protocole open source Gitee : MIT open source n'est pas facile, bienvenue dans les favoris, comme, commenter.