Application development platform integrated workflow - front-end integration and transformation of process modeling function

background

For the problem of unfriendly process settings, domestic DingTalk designed and implemented a set of process modeling mode separately, which has nothing to do with the bpmn specification. Someone imitated it and made it open source ( https://github.com/StavinLi/Workflow -Vue3 ), the effect diagram is as follows:

the general principle of implementation is based on infinitely nested sub-nodes, outputting json data, and passing it to the backend. Today, let’s talk about the integration work of the frontend.

Process Modeling Component Encapsulation

The flowDesign.vue component is added to encapsulate the operation of process modeling, adjust the editing view of the process template, and replace the model properties with the flowDesign.vue component. The style is as follows:

source code

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

Functional Integration of Process Modeling Components

For the vue-simple-uploader, vue-echarts, etc. that were integrated and used before, just install the npm package directly.
The process modeling function is not so simple, it needs to be deeply integrated with its own platform or system. Workflow-Vue3, an open source project, does not provide a simple component function, but an independent front-end project. There are not many packages, and the integration is more adjusted with reference to the source code, which involves a lot of transformation and is relatively difficult. There are many problems, which will be explained in detail below.

Component Migration

Under the flowTemplate directory under the view directory of the module workflow, create a new model folder to centrally store related files of the open source project Workflow-Vue3, including components, css, stores, utils and other directories.

In addition, there are some image resources, which are placed in the platform assets directory

Reference relationship adjustment

After the files are migrated, the next step is to adjust the reference relationship. The original project uses a lot of @ this root directory src to point to, but in the platform, it is placed in a directory for management, and the reference path needs to be adjusted.
As in the original project, the reference is as follows:

import { useStore } from '@/stores/index'
import { bgColors, placeholderList } from '@/utils/const'

Needs to be adjusted to:

import { useStore } from '../stores/index'
import { bgColors, placeholderList } from '../utils/const'

Almost all the references of migrated vue files need to be changed again, and not only the references between vue components, but also the reference addresses of css styles and pictures also need to be adjusted accordingly.

Component registration

Standalone projects adjusted for component usage, some adaptations are required.
The original project registers two core components globally in main.js, as follows:

import nodeWrap from '@/components/nodeWrap.vue'
app.component('nodeWrap', nodeWrap); 
import addNode from '@/components/addNode.vue'
app.component('addNode', addNode); 

In the platform, process modeling is only a function of the workflow module and will not be used elsewhere, so it is only referenced in the flowDesign.vue component in the self-encapsulation.

import nodeWrap from './model/components/nodeWrap.vue'

The addNode component will be used inside the nodeWrap component, so it is referenced inside the nodeWrap component.

The open source project workflow-vue3 itself has no integration instructions and precautions, so most of them are adjusted by looking at the source code and reporting errors. Time-consuming.

missing styles

After completing the above work, js no longer outputs error messages, and the page can load content. The modeling page is as follows: it

is obviously caused by the lack of css. The original item was added to the setting page. I added it to the corresponding flowDesign page and found that it is still deformed. Yes, the display is normal after the nodeWrap component is also added.
@import '…/css/workflow.css';

At this time, a question actually arises, why the original project only needs to be added once on the peripheral page, but I need to add it on multiple pages.

Icon missing problem

The above solves the missing css style problem, the overall display is normal, but the icon is missing, as shown in the figure below: It took

a long time to troubleshoot this problem, and it was once suspected that the naming of the iconfont was caused by the same name as the original component of the platform The exception was finally found to be a css scope problem, that is, the scoped needs to be removed to make it take effect globally... This also solves the problem of multiple introductions of css in the previous chapter.

However, there is a hidden danger here, that is, the css style of process modeling removes the scoped restriction, which will affect some styles and functions of the platform itself.

Backend request processing

The original project analog quantity back-end request call, including organization, personnel, role, process configuration, etc., I made temporary processing, annotated it, or replaced it with static json data, and then processed it later in the deep integration, replacing it with The real back-end data of the platform.

running result

After completing the above work, the same preview effect as the original project demonstration effect can be displayed normally, as shown in the figure below:

Here is a default example, using the sponsor, reviewer and CC as the initial sample data.

Development platform information

Platform name: One Two Three Development Platform
Introduction: Enterprise-level general development platform
Design information: csdn column
Open source address: Gitee
open source protocol: MIT
open source is not easy, welcome to favorite, like, comment.