fondo
Para el problema de la configuración de procesos hostil, DingTalk doméstico diseñó e implementó un conjunto de modos de modelado de procesos por separado, que no tiene nada que ver con la especificación bpmn. Alguien lo imitó y lo hizo de código abierto ( https://github.com/StavinLi/ Flujo de trabajo -Vue3 ), el diagrama de efectos es el siguiente:
el principio general de implementación se basa en subnodos infinitamente anidados, generando datos json y pasándolos al backend. Hoy, hablemos sobre el trabajo de integración del frontend.
Encapsulación de componentes de modelado de procesos
El componente flowDesign.vue se agrega para encapsular la operación de modelado de procesos, ajustar la vista de edición de la plantilla de proceso y reemplazar las propiedades del modelo con el componente flowDesign.vue. El estilo es el siguiente:
código fuente
<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>
Integración funcional de componentes de modelado de procesos
Para vue-simple-uploader, vue-echarts, etc. que se integraron y usaron antes, simplemente instale el paquete npm directamente.
La función de modelado de procesos no es tan simple, necesita estar profundamente integrada con su propia plataforma o sistema. Workflow-Vue3, un proyecto de código abierto, no proporciona una función de componente simple, sino un proyecto de front-end independiente. No hay muchos paquetes, y la integración es más ajustada con referencia al código fuente, lo que implica mucha transformación. y es relativamente difícil Hay muchos problemas, que se explicarán en detalle a continuación.
Migración de componentes
En el directorio flowTemplate, en el directorio de visualización del flujo de trabajo del módulo, cree una nueva carpeta de modelo para almacenar de forma centralizada los archivos relacionados del proyecto de código abierto Workflow-Vue3, incluidos los componentes, css, tiendas, utilidades y otros directorios.
Además, hay algunos recursos de imágenes, que se colocan en el directorio de activos de la plataforma.
Ajuste de la relación de referencia
Después de migrar los archivos, el siguiente paso es ajustar la relación de referencia. El proyecto original usa mucho @ este directorio raíz src para apuntar, pero en la plataforma, se coloca en un directorio para administración y la ruta de referencia necesita ser ajustado.
Como en el proyecto original, la referencia es la siguiente:
import { useStore } from '@/stores/index'
import { bgColors, placeholderList } from '@/utils/const'
Necesita ser ajustado a:
import { useStore } from '../stores/index'
import { bgColors, placeholderList } from '../utils/const'
Casi todas las referencias de los archivos vue migrados deben cambiarse nuevamente, y no solo las referencias entre los componentes vue, sino también las direcciones de referencia de los estilos css y las imágenes también deben ajustarse en consecuencia.
Registro de componentes
Proyectos independientes ajustados para el uso de componentes, se requieren algunas adaptaciones.
El proyecto original registra dos componentes principales globalmente en main.js, de la siguiente manera:
import nodeWrap from '@/components/nodeWrap.vue'
app.component('nodeWrap', nodeWrap);
import addNode from '@/components/addNode.vue'
app.component('addNode', addNode);
En la plataforma, el modelado de procesos es solo una función del módulo de flujo de trabajo y no se utilizará en ningún otro lugar, por lo que solo se hace referencia en el componente flowDesign.vue en el autoencapsulado.
import nodeWrap from './model/components/nodeWrap.vue'
El componente addNode se usará dentro del componente nodeWrap, por lo que se hace referencia dentro del componente nodeWrap.
El flujo de trabajo del proyecto de código abierto-vue3 en sí mismo no tiene instrucciones ni precauciones de integración, por lo que la mayoría de ellas se ajustan mirando el código fuente y reportando errores. Pérdida de tiempo.
estilos faltantes
Después de completar el trabajo anterior, js ya no genera mensajes de error y la página puede cargar contenido. La página de modelado es la siguiente: obviamente se
debe a la falta de CSS. El elemento original se agregó a la página de configuración. Lo agregué. a la página de diseño de flujo correspondiente y descubrió que todavía está deformado. Sí, la visualización es normal después de que también se agrega el componente nodeWrap.
@import '…/css/workflow.css';
En este momento, surge una pregunta: por qué el proyecto original solo debe agregarse una vez en la página periférica, pero necesito agregarlo en varias páginas.
Problema de falta de icono
Lo anterior resuelve el problema del estilo CSS faltante, la visualización general es normal, pero falta el ícono, como se muestra en la figura a continuación: Llevó
mucho tiempo solucionar este problema, y una vez se sospechó que el nombre de la fuente del ícono era causado por el mismo nombre que el componente original de la plataforma. La excepción finalmente resultó ser un problema de alcance css, es decir, el alcance debe eliminarse para que tenga efecto globalmente... Esto también resuelve el problema de las introducciones múltiples de css en el capítulo anterior.
Sin embargo, hay un peligro oculto aquí, es decir, el estilo css de modelado de procesos elimina la restricción de alcance, lo que afectará algunos estilos y funciones de la propia plataforma.
Procesamiento de solicitudes de back-end
La llamada de solicitud de back-end de cantidad analógica del proyecto original, incluida la organización, el personal, el rol, la configuración del proceso, etc., realicé un procesamiento temporal, lo anoté o lo reemplacé con datos json estáticos, y luego lo procesé más tarde en la integración profunda, reemplazándolo con los datos reales de back-end de la plataforma.
resultado de ejecución
Después de completar el trabajo anterior, el mismo efecto de vista previa que el efecto de demostración del proyecto original se puede mostrar normalmente, como se muestra en la siguiente figura:
Aquí hay un ejemplo predeterminado, utilizando el patrocinador, el revisor y CC como datos de muestra iniciales.
Información de la plataforma de desarrollo
Nombre de la plataforma: One Two Three Development Platform
Introducción: plataforma de desarrollo general de nivel empresarial
Información de diseño: columna csdn
Dirección de código abierto: protocolo de código abierto Gitee
: el código abierto del MIT
no es fácil, bienvenido a favoritos, me gusta, comentario.