背景

不親切なプロセス設定の問題については、国内のDingTalkがbpmnの仕様とは関係なく、プロセスモデリングモード一式を別途設計・実装しており、それを誰かが模倣してオープンソース化しました（https://github.com/StavinLi/ Workflow -Vue3 ) の効果図は次のとおりです:

実装の一般原則は、無限にネストされたサブノードに基づいており、json データを出力し、それをバックエンドに渡します。今日は、フロントエンドの統合作業について話しましょう。

プロセスモデリングコンポーネントのカプセル化

flowDesign.vue コンポーネントは、プロセスモデリングの操作をカプセル化し、プロセステンプレートの編集ビューを調整し、モデルプロパティを flowDesign.vue コンポーネントで置き換えるために追加されます。スタイルは次のとおりです:
画像.png
ソースコード

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

プロセスモデリングコンポーネントの機能統合

以前に統合されて使用されていた vue-simple-uploader や vue-echarts などについては、npm パッケージを直接インストールするだけです。
プロセスモデリング機能はそれほど単純ではなく、独自のプラットフォームまたはシステムと深く統合する必要があります。オープンソースプロジェクトであるWorkflow-Vue3は、単純なコンポーネント機能ではなく、独立したフロントエンドプロジェクトとして提供されており、パッケージ数も少なく、ソースコードを参照して統合を調整するため、多くの変換が必要となります。問題点も多く、以下で詳しく説明します。

コンポーネントの移行

モジュールワークフローのビューディレクトリの下にある flowTemplate ディレクトリの下に、オープンソースプロジェクト Workflow-Vue3 の関連ファイル (コンポーネント、CSS、ストア、ユーティリティ、その他のディレクトリを含む) を一元的に保存する新しいモデルフォルダーを作成します。
画像.png
さらに、いくつかの画像リソースがプラットフォームアセットディレクトリに配置されています。

参照関係の調整

ファイルの移行が完了したら、次のステップは参照関係の調整です。元のプロジェクトでは @this ルートディレクトリ src が指す場所を多く使用しますが、プラットフォームでは管理用のディレクトリに配置され、参照パスが指定されます。調整する必要があります。
元のプロジェクトと同様に、参照は次のとおりです。

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

以下のように調整する必要があります。

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

移行した vue ファイルのほとんどすべての参照を再度変更する必要があり、vue コンポーネント間の参照だけでなく、CSS スタイルや画像の参照アドレスもそれに応じて調整する必要があります。

コンポーネントの登録

コンポーネントの使用に合わせて調整されたスタンドアロンプロジェクト。いくつかの調整が必要です。
元のプロジェクトは、次のように 2 つのコアコンポーネントを main.js にグローバルに登録します。

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

プラットフォームでは、プロセスモデリングはワークフローモジュールの機能にすぎず、他の場所では使用されないため、自己カプセル化内の flowDesign.vue コンポーネントでのみ参照されます。

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

addNode コンポーネントは、nodeWrap コンポーネント内で使用されるため、nodeWrap コンポーネント内で参照されます。

オープンソースプロジェクトの workflow-vue3 自体には統合手順や注意事項がないため、ソースコードを見てエラーを報告することで調整することがほとんどです。時間がかかる。

スタイルがありません

上記の作業が完了すると、js はエラーメッセージを出力しなくなり、ページはコンテンツを読み込むことができます。モデリングページは次のようになります。明らかに
画像.png
CSS の不足が原因です。元の項目が設定ページに追加されました。追加しました。はい、nodeWrap コンポーネントも追加すると正常に表示されます。
@import '…/css/workflow.css';

このとき、実は元のプロジェクトは周辺ページに一度追加するだけで済むのに、なぜ複数のページに追加する必要があるのかという疑問が生じます。

アイコンが見つからない問題

上記により、CSS スタイルが欠落している問題が解決されます。下の図に示すように、全体的な表示は正常ですが、アイコンが欠落しています。
画像.png
この問題のトラブルシューティングには長い時間がかかり、アイコンフォントの名前が間違っているのではないかとかつて疑われていました。プラットフォームの元のコンポーネントと同じ名前が原因で発生しました。例外は、CSS スコープの問題であることが最終的に判明しました。つまり、スコープをグローバルに有効にするには、スコープを削除する必要があります。これにより、複数の導入の問題も解決されます。前の章の CSS について説明します。

ただし、ここには隠れた危険があります。CSS スタイルのプロセスモデリングによりスコープ制限が削除され、プラットフォーム自体の一部のスタイルと機能に影響が及びます。

バックエンドリクエストの処理

組織、人員、役割、プロセス構成などを含む、元のプロジェクトのアナログ数量バックエンドリクエストの呼び出しを一時的に処理し、アノテーションを付けるか、静的な JSON データに置き換えて、その後の深い統合で処理します。これをプラットフォームの実際のバックエンドデータに置き換えます。

実行結果

上記の作業が完了すると、次の図に示すように、元のプロジェクトのデモンストレーション効果と同じプレビュー効果が正常に表示されます。
画像.png
ここでは、スポンサー、レビュアー、および CC を初期サンプルデータとして使用したデフォルトの例を示します。

開発プラットフォーム情報

プラットフォーム名: One Two Three 開発プラットフォーム
紹介: エンタープライズレベルの総合開発プラットフォーム
設計情報: csdn コラム
オープンソースアドレス: Gitee
オープンソースプロトコル: MIT
オープンソースは簡単ではありません。お気に入り、いいね、コメントへようこそ。

アプリケーション開発プラットフォームの統合ワークフロー - フロントエンドの統合とプロセスモデリング機能の変革

背景