嵌入bpmn设计流程模块

yudao-ui-admin-vue3/package.json

@@ -54,7 +54,15 @@
     "vue-types": "^5.0.2",
     "vxe-table": "^4.3.9",
     "web-storage-cache": "^1.1.1",
-    "xe-utils": "^3.5.7"
+    "xe-utils": "^3.5.7",
+    "bpmn-js-token-simulation": "^0.10.0",
+    "camunda-bpmn-moddle": "^7.0.1",
+    "fast-xml-parser": "^4.0.13",
+    "highlight.js": "^9.18.5",
+    "min-dash": "^4.0.0",
+    "vue3-treeselect": "^0.1.10",
+    "vuedraggable": "^4.1.0",
+    "xml-js": "^1.6.11"
   },
   "devDependencies": {
     "@commitlint/cli": "^17.4.2",
@@ -76,6 +84,8 @@
     "autoprefixer": "^10.4.13",
     "consola": "^2.15.3",
     "eslint": "^8.32.0",
+    "bpmn-js": "^8.9.0",
+    "bpmn-js-properties-panel": "^0.46.0",
     "eslint-config-prettier": "^8.6.0",
     "eslint-define-config": "^1.14.0",
     "eslint-plugin-prettier": "^4.2.1",
@@ -123,4 +133,4 @@
     "url": "https://gitee.com/zhijiantianya/ruoyi-vue-pro/issues"
   },
   "homepage": "https://gitee.com/zhijiantianya/ruoyi-vue-pro"
-}
+}

yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/designer/ProcessDesigner.vue

@@ -0,0 +1,671 @@
+<template>
+  <div class="my-process-designer">
+    <div class="my-process-designer__header">
+      <slot name="control-header"></slot>
+      <template v-if="!$slots['control-header']">
+        <ElButtonGroup key="file-control">
+          <XButton preIcon="ep:folder-opened" title="打开文件" @click="refFile.click()" />
+          <el-tooltip effect="light" placement="bottom">
+            <template #content>
+              <XButton type="text" title="下载为XML文件" @click="downloadProcessAsXml()" />
+              <br />
+
+              <XButton type="text" title="下载为SVG文件" @click="downloadProcessAsSvg()" />
+              <br />
+
+              <XButton type="text" title="下载为BPMN文件" @click="downloadProcessAsBpmn()" />
+            </template>
+            <XButton title="下载文件" preIcon="ep:download" />
+          </el-tooltip>
+          <el-tooltip effect="light">
+            <XButton preIcon="ep:view" title="浏览" />
+            <template #content>
+              <el-button type="text" @click="previewProcessXML">预览XML</el-button>
+              <br />
+              <el-button type="text" @click="previewProcessJson">预览JSON</el-button>
+            </template>
+          </el-tooltip>
+          <el-tooltip
+            v-if="props.simulation"
+            effect="light"
+            :content="simulationStatus ? '退出模拟' : '开启模拟'"
+          >
+            <XButton preIcon="ep:cpu" title="模拟" @click="processSimulation" />
+          </el-tooltip>
+        </ElButtonGroup>
+        <ElButtonGroup key="align-control">
+          <el-tooltip effect="light" content="向左对齐">
+            <!-- <el-button
+              class="align align-left"
+              icon="el-icon-s-data"
+              @click="elementsAlign('left')"
+            /> -->
+            <XButton
+              preIcon="fa:align-left"
+              class="align align-bottom"
+              @click="elementsAlign('left')"
+            />
+          </el-tooltip>
+          <el-tooltip effect="light" content="向右对齐">
+            <!-- <el-button
+              class="align align-right"
+              icon="el-icon-s-data"
+              @click="elementsAlign('right')"
+            /> -->
+            <XButton
+              preIcon="fa:align-left"
+              class="align align-top"
+              @click="elementsAlign('right')"
+            />
+          </el-tooltip>
+          <el-tooltip effect="light" content="向上对齐">
+            <!-- <el-button
+              class="align align-top"
+              icon="el-icon-s-data"
+              @click="elementsAlign('top')"
+            /> -->
+            <XButton
+              preIcon="fa:align-left"
+              class="align align-left"
+              @click="elementsAlign('top')"
+            />
+          </el-tooltip>
+          <el-tooltip effect="light" content="向下对齐">
+            <!-- <el-button
+              class="align align-bottom"
+              icon="el-icon-s-data"
+              @click="elementsAlign('bottom')"
+            /> -->
+            <XButton
+              preIcon="fa:align-left"
+              class="align align-right"
+              @click="elementsAlign('bottom')"
+            />
+          </el-tooltip>
+          <el-tooltip effect="light" content="水平居中">
+            <!-- <el-button
+              class="align align-center"
+              icon="el-icon-s-data"
+              @click="elementsAlign('center')"
+            /> -->
+            <!-- class="align align-center" -->
+            <XButton
+              preIcon="fa:align-left"
+              class="align align-center"
+              @click="elementsAlign('center')"
+            />
+          </el-tooltip>
+          <el-tooltip effect="light" content="垂直居中">
+            <!-- <el-button
+              class="align align-middle"
+              icon="el-icon-s-data"
+              @click="elementsAlign('middle')"
+            /> -->
+            <XButton
+              preIcon="fa:align-left"
+              class="align align-middle"
+              @click="elementsAlign('middle')"
+            />
+          </el-tooltip>
+        </ElButtonGroup>
+        <ElButtonGroup key="scale-control">
+          <el-tooltip effect="light" content="缩小视图">
+            <!-- <el-button
+              :disabled="defaultZoom < 0.2"
+              icon="el-icon-zoom-out"
+              @click="processZoomOut()"
+            /> -->
+            <XButton
+              preIcon="ep:zoom-out"
+              @click="processZoomOut()"
+              :disabled="defaultZoom < 0.2"
+            />
+          </el-tooltip>
+          <el-button>{{ Math.floor(defaultZoom * 10 * 10) + '%' }}</el-button>
+          <el-tooltip effect="light" content="放大视图">
+            <!-- <el-button
+              :disabled="defaultZoom > 4"
+              icon="el-icon-zoom-in"
+              @click="processZoomIn()"
+            /> -->
+            <XButton preIcon="ep:zoom-in" @click="processZoomIn()" :disabled="defaultZoom > 4" />
+          </el-tooltip>
+          <el-tooltip effect="light" content="重置视图并居中">
+            <!-- <el-button icon="el-icon-c-scale-to-original" @click="processReZoom()" /> -->
+            <XButton preIcon="ep:scale-to-original" @click="processReZoom()" />
+          </el-tooltip>
+        </ElButtonGroup>
+        <ElButtonGroup key="stack-control">
+          <el-tooltip effect="light" content="撤销">
+            <!-- <el-button :disabled="!revocable" icon="el-icon-refresh-left" @click="processUndo()" /> -->
+            <XButton preIcon="ep:refresh-left" @click="processUndo()" :disabled="!revocable" />
+          </el-tooltip>
+          <el-tooltip effect="light" content="恢复">
+            <!-- <el-button
+              :disabled="!recoverable"
+              icon="el-icon-refresh-right"
+              @click="processRedo()"
+            /> -->
+            <XButton preIcon="ep:refresh-right" @click="processRedo()" :disabled="!recoverable" />
+          </el-tooltip>
+          <el-tooltip effect="light" content="重新绘制">
+            <!-- <el-button icon="el-icon-refresh" @click="processRestart" /> -->
+            <XButton preIcon="ep:refresh" @click="processRestart()" />
+          </el-tooltip>
+        </ElButtonGroup>
+        <XButton
+          preIcon="ep:plus"
+          title="保存模型"
+          @click="processSave"
+          :type="props.headerButtonType"
+          :disabled="simulationStatus"
+        />
+      </template>
+      <!-- 用于打开本地文件-->
+      <input
+        type="file"
+        id="files"
+        ref="refFile"
+        style="display: none"
+        accept=".xml, .bpmn"
+        @change="importLocalFile"
+      />
+    </div>
+    <div class="my-process-designer__container">
+      <div
+        class="my-process-designer__canvas"
+        ref="bpmnCanvas"
+        id="bpmnCanvas"
+        style="width: 1680px; height: 800px"
+      ></div>
+      <!-- <div id="js-properties-panel" class="panel"></div> -->
+      <!-- <div class="my-process-designer__canvas" ref="bpmn-canvas"></div> -->
+    </div>
+    <el-dialog
+      title="预览"
+      width="80%"
+      v-model="previewModelVisible"
+      append-to-body
+      destroy-on-close
+    >
+      <pre>
+        <!-- <code class="hljs" v-html="highlightedCode(previewType, previewResult)"></code> -->
+        {{ previewResult }}
+      </pre>
+    </el-dialog>
+  </div>
+</template>
+
+<script setup lang="ts" name="MyProcessDesigner">
+// import 'bpmn-js/dist/assets/diagram-js.css' // 左边工具栏以及编辑节点的样式
+// import 'bpmn-js/dist/assets/bpmn-font/css/bpmn.css'
+// import 'bpmn-js/dist/assets/bpmn-font/css/bpmn-codes.css'
+// import 'bpmn-js/dist/assets/bpmn-font/css/bpmn-embedded.css'
+// import 'bpmn-js-properties-panel/dist/assets/bpmn-js-properties-panel.css' // 右侧框样式
+import { ElTooltip, ElButtonGroup, ElDialog, ElButton, ElMessage, ElMessageBox } from 'element-plus'
+import { computed, onBeforeMount, onBeforeUnmount, onMounted, provide, ref } from 'vue'
+import BpmnModeler from 'bpmn-js/lib/Modeler'
+import DefaultEmptyXML from './plugins/defaultEmpty'
+// 翻译方法
+import customTranslate from './plugins/translate/customTranslate'
+import translationsCN from './plugins/translate/zh'
+// 模拟流转流程
+import tokenSimulation from 'bpmn-js-token-simulation'
+// 标签解析构建器
+// import bpmnPropertiesProvider from "bpmn-js-properties-panel/lib/provider/bpmn";
+// import propertiesPanelModule from 'bpmn-js-properties-panel'
+// import propertiesProviderModule from 'bpmn-js-properties-panel/lib/provider/camunda'
+// 标签解析 Moddle
+import camundaModdleDescriptor from './plugins/descriptor/camundaDescriptor.json'
+import activitiModdleDescriptor from './plugins/descriptor/activitiDescriptor.json'
+import flowableModdleDescriptor from './plugins/descriptor/flowableDescriptor.json'
+// 标签解析 Extension
+import camundaModdleExtension from './plugins/extension-moddle/camunda'
+import activitiModdleExtension from './plugins/extension-moddle/activiti'
+import flowableModdleExtension from './plugins/extension-moddle/flowable'
+// 引入json转换与高亮
+// import xml2js from 'xml-js'
+import xml2js from 'fast-xml-parser'
+
+// 代码高亮插件
+// import hljs from 'highlight.js/lib/highlight'
+// import 'highlight.js/styles/github-gist.css'
+// hljs.registerLanguage('xml', 'highlight.js/lib/languages/xml')
+// hljs.registerLanguage('json', 'highlight.js/lib/languages/json')
+// const eventName = reactive({
+//   name: ''
+// })
+const bpmnCanvas = ref()
+const refFile = ref()
+const emit = defineEmits([
+  'destroy',
+  'init-finished',
+  'save',
+  'commandStack-changed',
+  'input',
+  'change',
+  'canvas-viewbox-changed',
+  // eventName.name
+  'element-click'
+])
+
+const props = defineProps({
+  value: String, // xml 字符串
+  // valueWatch: true, // xml 字符串的 watch 状态
+  processId: String, // 流程 key 标识
+  processName: String, // 流程 name 名字
+  formId: Number, // 流程 form 表单编号
+  translations: Object, // 自定义的翻译文件
+  additionalModel: [Object, Array], // 自定义model
+  moddleExtension: Object, // 自定义moddle
+  onlyCustomizeAddi: {
+    type: Boolean,
+    default: false
+  },
+  onlyCustomizeModdle: {
+    type: Boolean,
+    default: false
+  },
+  simulation: {
+    type: Boolean,
+    default: true
+  },
+  keyboard: {
+    type: Boolean,
+    default: true
+  },
+  prefix: {
+    type: String,
+    default: 'camunda'
+  },
+  events: {
+    type: Array,
+    default: () => ['element.click']
+  },
+  headerButtonSize: {
+    type: String,
+    default: 'small',
+    validator: (value) => ['default', 'medium', 'small', 'mini'].indexOf(value) !== -1
+  },
+  headerButtonType: {
+    type: String,
+    default: 'primary',
+    validator: (value) =>
+      ['default', 'primary', 'success', 'warning', 'danger', 'info'].indexOf(value) !== -1
+  }
+})
+
+provide('configGlobal', props)
+let bpmnModeler = null
+const defaultZoom = ref(1)
+const previewModelVisible = ref(false)
+const simulationStatus = ref(false)
+const previewResult = ref('')
+const previewType = ref('xml')
+const recoverable = ref(false)
+const revocable = ref(false)
+const additionalModules = computed(() => {
+  console.log(props.additionalModel, 'additionalModel')
+  const Modules = []
+  // 仅保留用户自定义扩展模块
+  if (props.onlyCustomizeAddi) {
+    if (Object.prototype.toString.call(props.additionalModel) == '[object Array]') {
+      return props.additionalModel || []
+    }
+    return [props.additionalModel]
+  }
+
+  // 插入用户自定义扩展模块
+  if (Object.prototype.toString.call(props.additionalModel) == '[object Array]') {
+    Modules.push(...props.additionalModel)
+  } else {
+    props.additionalModel && Modules.push(props.additionalModel)
+  }
+
+  // 翻译模块
+  const TranslateModule = {
+    translate: ['value', customTranslate(props.translations || translationsCN)]
+  }
+  Modules.push(TranslateModule)
+
+  // 模拟流转模块
+  if (props.simulation) {
+    Modules.push(tokenSimulation)
+  }
+
+  // 根据需要的流程类型设置扩展元素构建模块
+  // if (this.prefix === "bpmn") {
+  //   Modules.push(bpmnModdleExtension);
+  // }
+  console.log(props.prefix, 'props.prefix ')
+  if (props.prefix === 'camunda') {
+    Modules.push(camundaModdleExtension)
+  }
+  if (props.prefix === 'flowable') {
+    Modules.push(flowableModdleExtension)
+  }
+  if (props.prefix === 'activiti') {
+    Modules.push(activitiModdleExtension)
+  }
+
+  return Modules
+})
+const moddleExtensions = computed(() => {
+  console.log(props.onlyCustomizeModdle, 'props.onlyCustomizeModdle')
+  console.log(props.moddleExtension, 'props.moddleExtension')
+  console.log(props.prefix, 'props.prefix')
+  const Extensions = {}
+  // 仅使用用户自定义模块
+  if (props.onlyCustomizeModdle) {
+    return props.moddleExtension || null
+  }
+
+  // 插入用户自定义模块
+  if (props.moddleExtension) {
+    for (let key in props.moddleExtension) {
+      Extensions[key] = props.moddleExtension[key]
+    }
+  }
+
+  // 根据需要的 "流程类型" 设置 对应的解析文件
+  if (props.prefix === 'activiti') {
+    Extensions.activiti = activitiModdleDescriptor
+  }
+  if (props.prefix === 'flowable') {
+    Extensions.flowable = flowableModdleDescriptor
+  }
+  if (props.prefix === 'camunda') {
+    Extensions.camunda = camundaModdleDescriptor
+  }
+  return Extensions
+})
+console.log(additionalModules, 'additionalModules()')
+console.log(moddleExtensions, 'moddleExtensions()')
+const initBpmnModeler = () => {
+  if (bpmnModeler) return
+  let data = document.getElementById('bpmnCanvas')
+  console.log(data, 'data')
+  console.log(props.keyboard, 'props.keyboard')
+  console.log(additionalModules, 'additionalModules()')
+  console.log(moddleExtensions, 'moddleExtensions()')
+
+  bpmnModeler = new BpmnModeler({
+    // container: this.$refs['bpmn-canvas'],
+    // container: getCurrentInstance(),
+    // container: needClass,
+    // container: bpmnCanvas.value,
+    container: data,
+    // width: '100%',
+    // 添加控制板
+    // propertiesPanel: {
+    // parent: '#js-properties-panel'
+    // },
+    keyboard: props.keyboard ? { bindTo: document } : null,
+    // additionalModules: additionalModules.value,
+    additionalModules: additionalModules.value,
+    moddleExtensions: moddleExtensions.value
+
+    // additionalModules: [
+    // additionalModules.value
+    // propertiesPanelModule,
+    // propertiesProviderModule
+    // propertiesProviderModule
+    // ],
+    // moddleExtensions: { camunda: moddleExtensions.value }
+  })
+
+  // bpmnModeler.createDiagram()
+
+  console.log(bpmnModeler, 'bpmnModeler111111')
+  emit('init-finished', bpmnModeler)
+  initModelListeners()
+}
+
+const initModelListeners = () => {
+  const EventBus = bpmnModeler.get('eventBus')
+  console.log(EventBus, 'EventBus')
+  // 注册需要的监听事件, 将. 替换为 - , 避免解析异常
+  props.events.forEach((event) => {
+    EventBus.on(event, function (eventObj) {
+      let eventName = event.replace(/\./g, '-')
+      // eventName.name = eventName
+      let element = eventObj ? eventObj.element : null
+      console.log(eventName, 'eventName')
+      console.log(element, 'element')
+      emit('element-click', element, eventObj)
+      // emit(eventName, element, eventObj)
+    })
+  })
+  // 监听图形改变返回xml
+  EventBus.on('commandStack.changed', async (event) => {
+    try {
+      recoverable.value = bpmnModeler.get('commandStack').canRedo()
+      revocable.value = bpmnModeler.get('commandStack').canUndo()
+      let { xml } = await bpmnModeler.saveXML({ format: true })
+      emit('commandStack-changed', event)
+      emit('input', xml)
+      emit('change', xml)
+    } catch (e) {
+      console.error(`[Process Designer Warn]: ${e.message || e}`)
+    }
+  })
+  // 监听视图缩放变化
+  bpmnModeler.on('canvas.viewbox.changed', ({ viewbox }) => {
+    emit('canvas-viewbox-changed', { viewbox })
+    const { scale } = viewbox
+    defaultZoom.value = Math.floor(scale * 100) / 100
+  })
+}
+/* 创建新的流程图 */
+const createNewDiagram = async (xml) => {
+  console.log(xml, 'xml')
+  // 将字符串转换成图显示出来
+  let newId = props.processId || `Process_${new Date().getTime()}`
+  let newName = props.processName || `业务流程_${new Date().getTime()}`
+  let xmlString = xml || DefaultEmptyXML(newId, newName, props.prefix)
+  try {
+    // console.log(xmlString, 'xmlString')
+    // console.log(this.bpmnModeler.importXML);
+    let { warnings } = await bpmnModeler.importXML(xmlString)
+    console.log(warnings, 'warnings')
+    if (warnings && warnings.length) {
+      warnings.forEach((warn) => console.warn(warn))
+    }
+  } catch (e) {
+    console.error(`[Process Designer Warn]: ${e?.message || e}`)
+  }
+}
+
+// 下载流程图到本地
+const downloadProcess = async (type, name) => {
+  try {
+    // 按需要类型创建文件并下载
+    if (type === 'xml' || type === 'bpmn') {
+      const { err, xml } = await bpmnModeler.saveXML()
+      // 读取异常时抛出异常
+      if (err) {
+        console.error(`[Process Designer Warn ]: ${err.message || err}`)
+      }
+      let { href, filename } = setEncoded(type.toUpperCase(), name, xml)
+      downloadFunc(href, filename)
+    } else {
+      const { err, svg } = await bpmnModeler.saveSVG()
+      // 读取异常时抛出异常
+      if (err) {
+        return console.error(err)
+      }
+      let { href, filename } = setEncoded('SVG', name, svg)
+      downloadFunc(href, filename)
+    }
+  } catch (e) {
+    console.error(`[Process Designer Warn ]: ${e.message || e}`)
+  }
+  // 文件下载方法
+  function downloadFunc(href, filename) {
+    if (href && filename) {
+      let a = document.createElement('a')
+      a.download = filename //指定下载的文件名
+      a.href = href //  URL对象
+      a.click() // 模拟点击
+      URL.revokeObjectURL(a.href) // 释放URL 对象
+    }
+  }
+}
+
+// 根据所需类型进行转码并返回下载地址
+const setEncoded = (type, filename = 'diagram', data) => {
+  const encodedData = encodeURIComponent(data)
+  return {
+    filename: `${filename}.${type}`,
+    href: `data:application/${
+      type === 'svg' ? 'text/xml' : 'bpmn20-xml'
+    };charset=UTF-8,${encodedData}`,
+    data: data
+  }
+}
+
+// 加载本地文件
+const importLocalFile = () => {
+  const file = refFile.value.files[0]
+  const reader = new FileReader()
+  reader.readAsText(file)
+  reader.onload = function () {
+    let xmlStr = this.result
+    createNewDiagram(xmlStr)
+  }
+}
+/* ------------------------------------------------ refs methods ------------------------------------------------------ */
+const downloadProcessAsXml = () => {
+  downloadProcess('xml')
+}
+const downloadProcessAsBpmn = () => {
+  downloadProcess('bpmn')
+}
+const downloadProcessAsSvg = () => {
+  downloadProcess('svg')
+}
+const processSimulation = () => {
+  simulationStatus.value = !simulationStatus.value
+  console.log(bpmnModeler.get('toggleMode', 'strict'), "bpmnModeler.get('toggleMode')")
+  props.simulation && bpmnModeler.get('toggleMode', 'strict').toggleMode()
+}
+const processRedo = () => {
+  bpmnModeler.get('commandStack').redo()
+}
+const processUndo = () => {
+  bpmnModeler.get('commandStack').undo()
+}
+const processZoomIn = (zoomStep = 0.1) => {
+  let newZoom = Math.floor(defaultZoom.value * 100 + zoomStep * 100) / 100
+  if (newZoom > 4) {
+    throw new Error('[Process Designer Warn ]: The zoom ratio cannot be greater than 4')
+  }
+  defaultZoom.value = newZoom
+  bpmnModeler.get('canvas').zoom(defaultZoom.value)
+}
+const processZoomOut = (zoomStep = 0.1) => {
+  let newZoom = Math.floor(defaultZoom.value * 100 - zoomStep * 100) / 100
+  if (newZoom < 0.2) {
+    throw new Error('[Process Designer Warn ]: The zoom ratio cannot be less than 0.2')
+  }
+  defaultZoom.value = newZoom
+  bpmnModeler.get('canvas').zoom(defaultZoom.value)
+}
+// const processZoomTo = (newZoom = 1) => {
+//   if (newZoom < 0.2) {
+//     throw new Error('[Process Designer Warn ]: The zoom ratio cannot be less than 0.2')
+//   }
+//   if (newZoom > 4) {
+//     throw new Error('[Process Designer Warn ]: The zoom ratio cannot be greater than 4')
+//   }
+//   defaultZoom = newZoom
+//   bpmnModeler.get('canvas').zoom(newZoom)
+// }
+const processReZoom = () => {
+  defaultZoom.value = 1
+  bpmnModeler.get('canvas').zoom('fit-viewport', 'auto')
+}
+const processRestart = () => {
+  recoverable.value = false
+  revocable.value = false
+  createNewDiagram(null)
+}
+const elementsAlign = (align) => {
+  const Align = bpmnModeler.get('alignElements')
+  const Selection = bpmnModeler.get('selection')
+  const SelectedElements = Selection.get()
+  console.log(SelectedElements, 'SelectedElements')
+  if (!SelectedElements || SelectedElements.length <= 1) {
+    ElMessage.warning('请按住 Shift 键选择多个元素对齐')
+    // alert('请按住 Ctrl 键选择多个元素对齐')
+    return
+  }
+  ElMessageBox.confirm('自动对齐可能造成图形变形，是否继续？', '警告', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning'
+  }).then(() => {
+    Align.trigger(SelectedElements, align)
+  })
+}
+/*-----------------------------    方法结束     ---------------------------------*/
+const previewProcessXML = () => {
+  console.log(bpmnModeler.saveXML, 'bpmnModeler')
+  bpmnModeler.saveXML({ format: true }).then(({ xml }) => {
+    console.log(xml, 'xml111111')
+    previewResult.value = xml
+    previewType.value = 'xml'
+    previewModelVisible.value = true
+  })
+}
+const previewProcessJson = () => {
+  bpmnModeler.saveXML({ format: true }).then(({ xml }) => {
+    console.log(xml, 'xml')
+    const parser = new xml2js.XMLParser()
+    let jObj = parser.parse(xml)
+    // console.log(jObj, 'jObjjObjjObjjObjjObj')
+    // const builder = new xml2js.XMLBuilder(xml)
+    // const xmlContent = builder
+    // console.log(xmlContent, 'xmlContent')
+    // console.log(xml2js, 'convertconvertconvert')
+    previewResult.value = jObj
+    // previewResult.value = convert.xml2json(xml,  {explicitArray : false},{ spaces: 2 })
+    previewType.value = 'json'
+    previewModelVisible.value = true
+  })
+}
+/* ------------------------------------------------ 芋道源码 methods ------------------------------------------------------ */
+const processSave = async () => {
+  const { err, xml } = await bpmnModeler.saveXML()
+  // 读取异常时抛出异常
+  if (err) {
+    // this.$modal.msgError('保存模型失败，请重试！')
+    alert('保存模型失败，请重试！')
+    return
+  }
+  // 触发 save 事件
+  emit('save', xml)
+}
+/** 高亮显示 */
+// const highlightedCode = (previewType, previewResult) => {
+//   console.log(previewType, 'previewType, previewResult')
+//   console.log(previewResult, 'previewType, previewResult')
+//   console.log(hljs.highlight, 'hljs.highlight')
+//   const result = hljs.highlight(previewType, previewResult.value || '', true)
+//   return result.value || '&nbsp;'
+// }
+onBeforeMount(() => {
+  console.log(props, 'propspropspropsprops')
+})
+onMounted(() => {
+  initBpmnModeler()
+  createNewDiagram(props.value)
+})
+onBeforeUnmount(() => {
+  // this.$once('hook:beforeDestroy', () => {
+  // })
+  if (bpmnModeler) bpmnModeler.destroy()
+  emit('destroy', bpmnModeler)
+  bpmnModeler = null
+})
+</script>

yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/designer/ProcessViewer.vue

@@ -0,0 +1,526 @@
+<template>
+  <div class="my-process-designer">
+    <div class="my-process-designer__container">
+      <div class="my-process-designer__canvas" ref="bpmn-canvas"></div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts" name="MyProcessViewer">
+import BpmnViewer from 'bpmn-js/lib/Viewer'
+import DefaultEmptyXML from './plugins/defaultEmpty'
+import { onMounted } from 'vue'
+import { onBeforeUnmount, provide, ref, watch } from 'vue'
+const props = defineProps({
+  value: {
+    // BPMN XML 字符串
+    type: String
+  },
+  prefix: {
+    // 使用哪个引擎
+    type: String,
+    default: 'camunda'
+  },
+  activityData: {
+    // 活动的数据。传递时，可高亮流程
+    type: Array,
+    default: () => []
+  },
+  processInstanceData: {
+    // 流程实例的数据。传递时，可展示流程发起人等信息
+    type: Object
+  },
+  taskData: {
+    // 任务实例的数据。传递时，可展示 UserTask 审核相关的信息
+    type: Array,
+    default: () => []
+  }
+})
+
+provide('configGlobal', props)
+
+const xml = ref('')
+const activityList = ref([])
+const processInstance = ref(undefined)
+const taskList = ref([])
+const bpmnCanvas = ref()
+// const element = ref()
+const elementOverlayIds = ref()
+const overlays = ref()
+
+const initBpmnModeler = () => {
+  if (bpmnModeler) return
+  bpmnModeler = new BpmnViewer({
+    container: bpmnCanvas.value,
+    bpmnRenderer: {}
+  })
+}
+
+/* 创建新的流程图 */
+const createNewDiagram = async (xml) => {
+  // 将字符串转换成图显示出来
+  let newId = `Process_${new Date().getTime()}`
+  let newName = `业务流程_${new Date().getTime()}`
+  let xmlString = xml || DefaultEmptyXML(newId, newName, props.prefix)
+  try {
+    // console.log(this.bpmnModeler.importXML);
+    let { warnings } = await bpmnModeler.importXML(xmlString)
+    if (warnings && warnings.length) {
+      warnings.forEach((warn) => console.warn(warn))
+    }
+    // 高亮流程图
+    await highlightDiagram()
+    const canvas = bpmnModeler.get('canvas')
+    canvas.zoom('fit-viewport', 'auto')
+  } catch (e) {
+    console.error(e)
+    // console.error(`[Process Designer Warn]: ${e?.message || e}`);
+  }
+}
+/* 高亮流程图 */
+// TODO 芋艿：如果多个 endActivity 的话，目前的逻辑可能有一定的问题。https://www.jdon.com/workflow/multi-events.html
+const highlightDiagram = async () => {
+  const activityList = activityList.value
+  if (activityList.length === 0) {
+    return
+  }
+  // 参考自 https://gitee.com/tony2y/RuoYi-flowable/blob/master/ruoyi-ui/src/components/Process/index.vue#L222 实现
+  // 再次基础上，增加不同审批结果的颜色等等
+  let canvas = bpmnModeler.get('canvas')
+  let todoActivity = activityList.find((m) => !m.endTime) // 找到待办的任务
+  let endActivity = activityList[activityList.length - 1] // 获得最后一个任务
+  // debugger
+  // console.log(this.bpmnModeler.getDefinitions().rootElements[0].flowElements);
+  bpmnModeler.getDefinitions().rootElements[0].flowElements?.forEach((n) => {
+    let activity = activityList.find((m) => m.key === n.id) // 找到对应的活动
+    if (!activity) {
+      return
+    }
+    if (n.$type === 'bpmn:UserTask') {
+      // 用户任务
+      // 处理用户任务的高亮
+      const task = taskList.value.find((m) => m.id === activity.taskId) // 找到活动对应的 taskId
+      if (!task) {
+        return
+      }
+      // 高亮任务
+      canvas.addMarker(n.id, getResultCss(task.result))
+
+      // 如果非通过，就不走后面的线条了
+      if (task.result !== 2) {
+        return
+      }
+      // 处理 outgoing 出线
+      const outgoing = getActivityOutgoing(activity)
+      outgoing?.forEach((nn) => {
+        // debugger
+        let targetActivity = activityList.find((m) => m.key === nn.targetRef.id)
+        // 如果目标活动存在，则根据该活动是否结束，进行【bpmn:SequenceFlow】连线的高亮设置
+        if (targetActivity) {
+          canvas.addMarker(nn.id, targetActivity.endTime ? 'highlight' : 'highlight-todo')
+        } else if (nn.targetRef.$type === 'bpmn:ExclusiveGateway') {
+          // TODO 芋艿：这个流程，暂时没走到过
+          canvas.addMarker(nn.id, activity.endTime ? 'highlight' : 'highlight-todo')
+          canvas.addMarker(nn.targetRef.id, activity.endTime ? 'highlight' : 'highlight-todo')
+        } else if (nn.targetRef.$type === 'bpmn:EndEvent') {
+          // TODO 芋艿：这个流程，暂时没走到过
+          if (!todoActivity && endActivity.key === n.id) {
+            canvas.addMarker(nn.id, 'highlight')
+            canvas.addMarker(nn.targetRef.id, 'highlight')
+          }
+          if (!activity.endTime) {
+            canvas.addMarker(nn.id, 'highlight-todo')
+            canvas.addMarker(nn.targetRef.id, 'highlight-todo')
+          }
+        }
+      })
+    } else if (n.$type === 'bpmn:ExclusiveGateway') {
+      // 排它网关
+      // 设置【bpmn:ExclusiveGateway】排它网关的高亮
+      canvas.addMarker(n.id, getActivityHighlightCss(activity))
+      // 查找需要高亮的连线
+      let matchNN = undefined
+      let matchActivity = undefined
+      n.outgoing?.forEach((nn) => {
+        let targetActivity = activityList.find((m) => m.key === nn.targetRef.id)
+        if (!targetActivity) {
+          return
+        }
+        // 特殊判断 endEvent 类型的原因，ExclusiveGateway 可能后续连有 2 个路径：
+        //  1. 一个是 UserTask => EndEvent
+        //  2. 一个是 EndEvent
+        // 在选择路径 1 时，其实 EndEvent 可能也存在，导致 1 和 2 都高亮，显然是不正确的。
+        // 所以，在 matchActivity 为 EndEvent 时，需要进行覆盖~~
+        if (!matchActivity || matchActivity.type === 'endEvent') {
+          matchNN = nn
+          matchActivity = targetActivity
+        }
+      })
+      if (matchNN && matchActivity) {
+        canvas.addMarker(matchNN.id, getActivityHighlightCss(matchActivity))
+      }
+    } else if (n.$type === 'bpmn:ParallelGateway') {
+      // 并行网关
+      // 设置【bpmn:ParallelGateway】并行网关的高亮
+      canvas.addMarker(n.id, getActivityHighlightCss(activity))
+      n.outgoing?.forEach((nn) => {
+        // 获得连线是否有指向目标。如果有，则进行高亮
+        const targetActivity = activityList.find((m) => m.key === nn.targetRef.id)
+        if (targetActivity) {
+          canvas.addMarker(nn.id, getActivityHighlightCss(targetActivity)) // 高亮【bpmn:SequenceFlow】连线
+          // 高亮【...】目标。其中 ... 可以是 bpm:UserTask、也可以是其它的。当然，如果是 bpm:UserTask 的话，其实不做高亮也没问题，因为上面有逻辑做了这块。
+          canvas.addMarker(nn.targetRef.id, getActivityHighlightCss(targetActivity))
+        }
+      })
+    } else if (n.$type === 'bpmn:StartEvent') {
+      // 开始节点
+      n.outgoing?.forEach((nn) => {
+        // outgoing 例如说【bpmn:SequenceFlow】连线
+        // 获得连线是否有指向目标。如果有，则进行高亮
+        let targetActivity = activityList.find((m) => m.key === nn.targetRef.id)
+        if (targetActivity) {
+          canvas.addMarker(nn.id, 'highlight') // 高亮【bpmn:SequenceFlow】连线
+          canvas.addMarker(n.id, 'highlight') // 高亮【bpmn:StartEvent】开始节点（自己）
+        }
+      })
+    } else if (n.$type === 'bpmn:EndEvent') {
+      // 结束节点
+      if (!processInstance.value || processInstance.value.result === 1) {
+        return
+      }
+      canvas.addMarker(n.id, getResultCss(processInstance.value.result))
+    } else if (n.$type === 'bpmn:ServiceTask') {
+      //服务任务
+      if (activity.startTime > 0 && activity.endTime === 0) {
+        //进入执行，标识进行色
+        canvas.addMarker(n.id, getResultCss(1))
+      }
+      if (activity.endTime > 0) {
+        // 执行完成，节点标识完成色, 所有outgoing标识完成色。
+        canvas.addMarker(n.id, getResultCss(2))
+        const outgoing = getActivityOutgoing(activity)
+        outgoing?.forEach((out) => {
+          canvas.addMarker(out.id, getResultCss(2))
+        })
+      }
+    }
+  })
+}
+const getActivityHighlightCss = (activity) => {
+  return activity.endTime ? 'highlight' : 'highlight-todo'
+}
+const getResultCss = (result) => {
+  if (result === 1) {
+    // 审批中
+    return 'highlight-todo'
+  } else if (result === 2) {
+    // 已通过
+    return 'highlight'
+  } else if (result === 3) {
+    // 不通过
+    return 'highlight-reject'
+  } else if (result === 4) {
+    // 已取消
+    return 'highlight-cancel'
+  }
+  return ''
+}
+
+const getActivityOutgoing = (activity) => {
+  // 如果有 outgoing，则直接使用它
+  if (activity.outgoing && activity.outgoing.length > 0) {
+    return activity.outgoing
+  }
+  // 如果没有，则遍历获得起点为它的【bpmn:SequenceFlow】节点们。原因是：bpmn-js 的 UserTask 拿不到 outgoing
+  const flowElements = bpmnModeler.getDefinitions().rootElements[0].flowElements
+  const outgoing = []
+  flowElements.forEach((item) => {
+    if (item.$type !== 'bpmn:SequenceFlow') {
+      return
+    }
+    if (item.sourceRef.id === activity.key) {
+      outgoing.push(item)
+    }
+  })
+  return outgoing
+}
+const initModelListeners = () => {
+  const EventBus = bpmnModeler.get('eventBus')
+  // 注册需要的监听事件
+  EventBus.on('element.hover', function (eventObj) {
+    let element = eventObj ? eventObj.element : null
+    elementHover(element)
+  })
+  EventBus.on('element.out', function (eventObj) {
+    let element = eventObj ? eventObj.element : null
+    elementOut(element)
+  })
+}
+// 流程图的元素被 hover
+const elementHover = (element) => {
+  element.value = element
+  !elementOverlayIds.value && (elementOverlayIds.value = {})
+  !overlays.value && (overlays.value = bpmnModeler.get('overlays'))
+  // 展示信息
+  const activity = activityList.value.find((m) => m.key === element.value.id)
+  if (!activity) {
+    return
+  }
+  if (!elementOverlayIds.value[element.value.id] && element.value.type !== 'bpmn:Process') {
+    let html = `<div class="element-overlays">
+            <p>Elemet id: ${element.value.id}</p>
+            <p>Elemet type: ${element.value.type}</p>
+          </div>` // 默认值
+    if (element.value.type === 'bpmn:StartEvent' && processInstance.value) {
+      html = `<p>发起人：${processInstance.value.startUser.nickname}</p>
+                  <p>部门：${processInstance.value.startUser.deptName}</p>
+                  <p>创建时间：${parseTime(processInstance.value.createTime)}`
+    } else if (element.value.type === 'bpmn:UserTask') {
+      // debugger
+      let task = taskList.value.find((m) => m.id === activity.taskId) // 找到活动对应的 taskId
+      if (!task) {
+        return
+      }
+      html = `<p>审批人：${task.assigneeUser.nickname}</p>
+                  <p>部门：${task.assigneeUser.deptName}</p>
+                  <p>结果：${getDictDataLabel(
+                    DICT_TYPE.BPM_PROCESS_INSTANCE_RESULT,
+                    task.result
+                  )}</p>
+                  <p>创建时间：${parseTime(task.createTime)}</p>`
+      if (task.endTime) {
+        html += `<p>结束时间：${parseTime(task.endTime)}</p>`
+      }
+      if (task.reason) {
+        html += `<p>审批建议：${task.reason}</p>`
+      }
+    } else if (element.value.type === 'bpmn:ServiceTask' && processInstance.value) {
+      if (activity.startTime > 0) {
+        html = `<p>创建时间：${parseTime(activity.startTime)}</p>`
+      }
+      if (activity.endTime > 0) {
+        html += `<p>结束时间：${parseTime(activity.endTime)}</p>`
+      }
+      console.log(html)
+    } else if (element.value.type === 'bpmn:EndEvent' && processInstance.value) {
+      html = `<p>结果：${getDictDataLabel(
+        DICT_TYPE.BPM_PROCESS_INSTANCE_RESULT,
+        processInstance.value.result
+      )}</p>`
+      if (processInstance.value.endTime) {
+        html += `<p>结束时间：${parseTime(processInstance.value.endTime)}</p>`
+      }
+    }
+    elementOverlayIds.value[element.value.id] = overlays.value.add(element.value, {
+      position: { left: 0, bottom: 0 },
+      html: `<div class="element-overlays">${html}</div>`
+    })
+  }
+}
+// 流程图的元素被 out
+const elementOut = (element) => {
+  overlays.value.remove({ element })
+  elementOverlayIds.value[element.id] = null
+}
+
+onMounted(() => {
+  xml.value = props.value
+  activityList.value = props.activityData
+  // 初始化
+  initBpmnModeler()
+  createNewDiagram(xml.value)
+  // 初始模型的监听器
+  initModelListeners()
+})
+onBeforeUnmount(() => {
+  // this.$once('hook:beforeDestroy', () => {
+  // })
+  if (bpmnModeler) bpmnModeler.destroy()
+  emit('destroy', bpmnModeler)
+  bpmnModeler = null
+})
+
+watch(
+  () => props.value,
+  (newValue) => {
+    console.log(newValue, 'oldVal')
+    xml.value = newValue
+    createNewDiagram(xml.value)
+  }
+)
+watch(
+  () => props.activityData,
+  (newActivityData) => {
+    activityList.value = newActivityData
+    createNewDiagram(xml.value)
+  }
+)
+watch(
+  () => props.processInstanceData,
+  (newProcessInstanceData) => {
+    processInstance.value = newProcessInstanceData
+    createNewDiagram(xml.value)
+  }
+)
+watch(
+  () => props.taskData,
+  (newTaskListData) => {
+    taskList.value = newTaskListData
+    createNewDiagram(xml.value)
+  }
+)
+</script>
+
+<style>
+/** 处理中 */
+.highlight-todo.djs-connection > .djs-visual > path {
+  stroke: #1890ff !important;
+  stroke-dasharray: 4px !important;
+  fill-opacity: 0.2 !important;
+}
+.highlight-todo.djs-shape .djs-visual > :nth-child(1) {
+  fill: #1890ff !important;
+  stroke: #1890ff !important;
+  stroke-dasharray: 4px !important;
+  fill-opacity: 0.2 !important;
+}
+
+:deep(.highlight-todo.djs-connection > .djs-visual > path) {
+  stroke: #1890ff !important;
+  stroke-dasharray: 4px !important;
+  fill-opacity: 0.2 !important;
+  marker-end: url(#sequenceflow-end-_E7DFDF-_E7DFDF-803g1kf6zwzmcig1y2ulm5egr);
+}
+:deep(.highlight-todo.djs-shape .djs-visual > :nth-child(1)) {
+  fill: #1890ff !important;
+  stroke: #1890ff !important;
+  stroke-dasharray: 4px !important;
+  fill-opacity: 0.2 !important;
+}
+
+/** 通过 */
+.highlight.djs-shape .djs-visual > :nth-child(1) {
+  fill: green !important;
+  stroke: green !important;
+  fill-opacity: 0.2 !important;
+}
+.highlight.djs-shape .djs-visual > :nth-child(2) {
+  fill: green !important;
+}
+.highlight.djs-shape .djs-visual > path {
+  fill: green !important;
+  fill-opacity: 0.2 !important;
+  stroke: green !important;
+}
+.highlight.djs-connection > .djs-visual > path {
+  stroke: green !important;
+}
+
+.highlight:not(.djs-connection) .djs-visual > :nth-child(1) {
+  fill: green !important; /* color elements as green */
+}
+
+:deep(.highlight.djs-shape .djs-visual > :nth-child(1)) {
+  fill: green !important;
+  stroke: green !important;
+  fill-opacity: 0.2 !important;
+}
+:deep(.highlight.djs-shape .djs-visual > :nth-child(2)) {
+  fill: green !important;
+}
+:deep(.highlight.djs-shape .djs-visual > path) {
+  fill: green !important;
+  fill-opacity: 0.2 !important;
+  stroke: green !important;
+}
+:deep(.highlight.djs-connection > .djs-visual > path) {
+  stroke: green !important;
+}
+
+/** 不通过 */
+.highlight-reject.djs-shape .djs-visual > :nth-child(1) {
+  fill: red !important;
+  stroke: red !important;
+  fill-opacity: 0.2 !important;
+}
+.highlight-reject.djs-shape .djs-visual > :nth-child(2) {
+  fill: red !important;
+}
+.highlight-reject.djs-shape .djs-visual > path {
+  fill: red !important;
+  fill-opacity: 0.2 !important;
+  stroke: red !important;
+}
+.highlight-reject.djs-connection > .djs-visual > path {
+  stroke: red !important;
+}
+
+.highlight-reject:not(.djs-connection) .djs-visual > :nth-child(1) {
+  fill: red !important; /* color elements as green */
+}
+
+:deep(.highlight-reject.djs-shape .djs-visual > :nth-child(1)) {
+  fill: red !important;
+  stroke: red !important;
+  fill-opacity: 0.2 !important;
+}
+:deep(.highlight-reject.djs-shape .djs-visual > :nth-child(2)) {
+  fill: red !important;
+}
+:deep(.highlight-reject.djs-shape .djs-visual > path) {
+  fill: red !important;
+  fill-opacity: 0.2 !important;
+  stroke: red !important;
+}
+:deep(.highlight-reject.djs-connection > .djs-visual > path) {
+  stroke: red !important;
+}
+
+/** 已取消 */
+.highlight-cancel.djs-shape .djs-visual > :nth-child(1) {
+  fill: grey !important;
+  stroke: grey !important;
+  fill-opacity: 0.2 !important;
+}
+.highlight-cancel.djs-shape .djs-visual > :nth-child(2) {
+  fill: grey !important;
+}
+.highlight-cancel.djs-shape .djs-visual > path {
+  fill: grey !important;
+  fill-opacity: 0.2 !important;
+  stroke: grey !important;
+}
+.highlight-cancel.djs-connection > .djs-visual > path {
+  stroke: grey !important;
+}
+
+.highlight-cancel:not(.djs-connection) .djs-visual > :nth-child(1) {
+  fill: grey !important; /* color elements as green */
+}
+
+:deep(.highlight-cancel.djs-shape .djs-visual > :nth-child(1)) {
+  fill: grey !important;
+  stroke: grey !important;
+  fill-opacity: 0.2 !important;
+}
+:deep(.highlight-cancel.djs-shape .djs-visual > :nth-child(2)) {
+  fill: grey !important;
+}
+:deep(.highlight-cancel.djs-shape .djs-visual > path) {
+  fill: grey !important;
+  fill-opacity: 0.2 !important;
+  stroke: grey !important;
+}
+:deep(.highlight-cancel.djs-connection > .djs-visual > path) {
+  stroke: grey !important;
+}
+
+.element-overlays {
+  box-sizing: border-box;
+  padding: 8px;
+  background: rgba(0, 0, 0, 0.6);
+  border-radius: 4px;
+  color: #fafafa;
+  width: 200px;
+}
+</style>

yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/designer/index.js

@@ -0,0 +1,8 @@
+import MyProcessDesigner from "./ProcessDesigner.vue";
+
+MyProcessDesigner.install = function(Vue) {
+  Vue.component(MyProcessDesigner.name, MyProcessDesigner);
+};
+
+// 流程图的设计器，可编辑
+export default MyProcessDesigner;

yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/designer/index2.js

@@ -0,0 +1,8 @@
+import MyProcessViewer from "./ProcessViewer.vue";
+
+MyProcessViewer.install = function(Vue) {
+  Vue.component(MyProcessViewer.name, MyProcessViewer);
+};
+
+// 流程图的查看器，不可编辑
+export default MyProcessViewer;

yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/designer/plugins/content-pad/contentPadProvider.js

@@ -0,0 +1,390 @@
+import { assign, forEach, isArray } from 'min-dash'
+
+import { is } from "bpmn-js/lib/util/ModelUtil"
+
+import { isExpanded, isEventSubProcess } from "bpmn-js/lib/util/DiUtil"
+
+import { isAny } from "bpmn-js/lib/features/modeling/util/ModelingUtil"
+
+import { getChildLanes } from "bpmn-js/lib/features/modeling/util/LaneUtil"
+
+import { hasPrimaryModifier } from "diagram-js/lib/util/Mouse"
+
+/**
+ * A provider for BPMN 2.0 elements context pad
+ */
+export default function ContextPadProvider (
+  config,
+  injector,
+  eventBus,
+  contextPad,
+  modeling,
+  elementFactory,
+  connect,
+  create,
+  popupMenu,
+  canvas,
+  rules,
+  translate,
+  elementRegistry
+) {
+  config = config || {}
+
+  contextPad.registerProvider(this)
+
+  this._contextPad = contextPad
+
+  this._modeling = modeling
+
+  this._elementFactory = elementFactory
+  this._connect = connect
+  this._create = create
+  this._popupMenu = popupMenu
+  this._canvas = canvas
+  this._rules = rules
+  this._translate = translate
+
+  if (config.autoPlace !== false) {
+    this._autoPlace = injector.get("autoPlace", false)
+  }
+
+  eventBus.on("create.end", 250, function (event) {
+    const context = event.context,
+      shape = context.shape
+
+    if (!hasPrimaryModifier(event) || !contextPad.isOpen(shape)) {
+      return
+    }
+
+    const entries = contextPad.getEntries(shape)
+
+    if (entries.replace) {
+      entries.replace.action.click(event, shape)
+    }
+  })
+}
+
+ContextPadProvider.$inject = [
+  "config.contextPad",
+  "injector",
+  "eventBus",
+  "contextPad",
+  "modeling",
+  "elementFactory",
+  "connect",
+  "create",
+  "popupMenu",
+  "canvas",
+  "rules",
+  "translate",
+  "elementRegistry"
+]
+
+ContextPadProvider.prototype.getContextPadEntries = function (element) {
+  const contextPad = this._contextPad,
+    modeling = this._modeling,
+    elementFactory = this._elementFactory,
+    connect = this._connect,
+    create = this._create,
+    popupMenu = this._popupMenu,
+    canvas = this._canvas,
+    rules = this._rules,
+    autoPlace = this._autoPlace,
+    translate = this._translate
+
+  const actions = {}
+
+  if (element.type === "label") {
+    return actions
+  }
+
+  const businessObject = element.businessObject
+
+  function startConnect (event, element) {
+    connect.start(event, element)
+  }
+
+  function removeElement () {
+    modeling.removeElements([element])
+  }
+
+  function getReplaceMenuPosition (element) {
+    const Y_OFFSET = 5
+
+    const diagramContainer = canvas.getContainer(),
+      pad = contextPad.getPad(element).html
+
+    const diagramRect = diagramContainer.getBoundingClientRect(),
+      padRect = pad.getBoundingClientRect()
+
+    const top = padRect.top - diagramRect.top
+    const left = padRect.left - diagramRect.left
+
+    const pos = {
+      x: left,
+      y: top + padRect.height + Y_OFFSET
+    }
+
+    return pos
+  }
+
+  /**
+   * Create an append action
+   *
+   * @param {string} type
+   * @param {string} className
+   * @param {string} [title]
+   * @param {Object} [options]
+   *
+   * @return {Object} descriptor
+   */
+  function appendAction (type, className, title, options) {
+    if (typeof title !== "string") {
+      options = title
+      title = translate("Append {type}", { type: type.replace(/^bpmn:/, "") })
+    }
+
+    function appendStart (event, element) {
+      const shape = elementFactory.createShape(assign({ type: type }, options))
+      create.start(event, shape, {
+        source: element
+      })
+    }
+
+    const append = autoPlace
+      ? function (event, element) {
+        const shape = elementFactory.createShape(assign({ type: type }, options))
+
+        autoPlace.append(element, shape)
+      }
+      : appendStart
+
+    return {
+      group: "model",
+      className: className,
+      title: title,
+      action: {
+        dragstart: appendStart,
+        click: append
+      }
+    }
+  }
+
+  function splitLaneHandler (count) {
+    return function (event, element) {
+      // actual split
+      modeling.splitLane(element, count)
+
+      // refresh context pad after split to
+      // get rid of split icons
+      contextPad.open(element, true)
+    }
+  }
+
+  if (isAny(businessObject, ["bpmn:Lane", "bpmn:Participant"]) && isExpanded(businessObject)) {
+    const childLanes = getChildLanes(element)
+
+    assign(actions, {
+      "lane-insert-above": {
+        group: "lane-insert-above",
+        className: "bpmn-icon-lane-insert-above",
+        title: translate("Add Lane above"),
+        action: {
+          click: function (event, element) {
+            modeling.addLane(element, "top")
+          }
+        }
+      }
+    })
+
+    if (childLanes.length < 2) {
+      if (element.height >= 120) {
+        assign(actions, {
+          "lane-divide-two": {
+            group: "lane-divide",
+            className: "bpmn-icon-lane-divide-two",
+            title: translate("Divide into two Lanes"),
+            action: {
+              click: splitLaneHandler(2)
+            }
+          }
+        })
+      }
+
+      if (element.height >= 180) {
+        assign(actions, {
+          "lane-divide-three": {
+            group: "lane-divide",
+            className: "bpmn-icon-lane-divide-three",
+            title: translate("Divide into three Lanes"),
+            action: {
+              click: splitLaneHandler(3)
+            }
+          }
+        })
+      }
+    }
+
+    assign(actions, {
+      "lane-insert-below": {
+        group: "lane-insert-below",
+        className: "bpmn-icon-lane-insert-below",
+        title: translate("Add Lane below"),
+        action: {
+          click: function (event, element) {
+            modeling.addLane(element, "bottom")
+          }
+        }
+      }
+    })
+  }
+
+  if (is(businessObject, "bpmn:FlowNode")) {
+    if (is(businessObject, "bpmn:EventBasedGateway")) {
+      assign(actions, {
+        "append.receive-task": appendAction("bpmn:ReceiveTask", "bpmn-icon-receive-task", translate("Append ReceiveTask")),
+        "append.message-intermediate-event": appendAction(
+          "bpmn:IntermediateCatchEvent",
+          "bpmn-icon-intermediate-event-catch-message",
+          translate("Append MessageIntermediateCatchEvent"),
+          { eventDefinitionType: "bpmn:MessageEventDefinition" }
+        ),
+        "append.timer-intermediate-event": appendAction(
+          "bpmn:IntermediateCatchEvent",
+          "bpmn-icon-intermediate-event-catch-timer",
+          translate("Append TimerIntermediateCatchEvent"),
+          { eventDefinitionType: "bpmn:TimerEventDefinition" }
+        ),
+        "append.condition-intermediate-event": appendAction(
+          "bpmn:IntermediateCatchEvent",
+          "bpmn-icon-intermediate-event-catch-condition",
+          translate("Append ConditionIntermediateCatchEvent"),
+          { eventDefinitionType: "bpmn:ConditionalEventDefinition" }
+        ),
+        "append.signal-intermediate-event": appendAction(
+          "bpmn:IntermediateCatchEvent",
+          "bpmn-icon-intermediate-event-catch-signal",
+          translate("Append SignalIntermediateCatchEvent"),
+          { eventDefinitionType: "bpmn:SignalEventDefinition" }
+        )
+      })
+    } else if (isEventType(businessObject, "bpmn:BoundaryEvent", "bpmn:CompensateEventDefinition")) {
+      assign(actions, {
+        "append.compensation-activity": appendAction("bpmn:Task", "bpmn-icon-task", translate("Append compensation activity"), {
+          isForCompensation: true
+        })
+      })
+    } else if (
+      !is(businessObject, "bpmn:EndEvent") &&
+      !businessObject.isForCompensation &&
+      !isEventType(businessObject, "bpmn:IntermediateThrowEvent", "bpmn:LinkEventDefinition") &&
+      !isEventSubProcess(businessObject)
+    ) {
+      assign(actions, {
+        "append.end-event": appendAction("bpmn:EndEvent", "bpmn-icon-end-event-none", translate("Append EndEvent")),
+        "append.gateway": appendAction("bpmn:ExclusiveGateway", "bpmn-icon-gateway-none", translate("Append Gateway")),
+        "append.append-task": appendAction("bpmn:UserTask", "bpmn-icon-user-task", translate("Append Task")),
+        "append.intermediate-event": appendAction(
+          "bpmn:IntermediateThrowEvent",
+          "bpmn-icon-intermediate-event-none",
+          translate("Append Intermediate/Boundary Event")
+        )
+      })
+    }
+  }
+
+  if (!popupMenu.isEmpty(element, "bpmn-replace")) {
+    // Replace menu entry
+    assign(actions, {
+      replace: {
+        group: "edit",
+        className: "bpmn-icon-screw-wrench",
+        title: '修改类型',
+        action: {
+          click: function (event, element) {
+            const position = assign(getReplaceMenuPosition(element), {
+              cursor: { x: event.x, y: event.y }
+            })
+
+            popupMenu.open(element, "bpmn-replace", position)
+          }
+        }
+      }
+    })
+  }
+
+  if (isAny(businessObject, ["bpmn:FlowNode", "bpmn:InteractionNode", "bpmn:DataObjectReference", "bpmn:DataStoreReference"])) {
+    assign(actions, {
+      "append.text-annotation": appendAction("bpmn:TextAnnotation", "bpmn-icon-text-annotation"),
+
+      connect: {
+        group: "connect",
+        className: "bpmn-icon-connection-multi",
+        title: translate("Connect using " + (businessObject.isForCompensation ? "" : "Sequence/MessageFlow or ") + "Association"),
+        action: {
+          click: startConnect,
+          dragstart: startConnect
+        }
+      }
+    })
+  }
+
+  if (isAny(businessObject, ["bpmn:DataObjectReference", "bpmn:DataStoreReference"])) {
+    assign(actions, {
+      connect: {
+        group: "connect",
+        className: "bpmn-icon-connection-multi",
+        title: translate("Connect using DataInputAssociation"),
+        action: {
+          click: startConnect,
+          dragstart: startConnect
+        }
+      }
+    })
+  }
+
+  if (is(businessObject, "bpmn:Group")) {
+    assign(actions, {
+      "append.text-annotation": appendAction("bpmn:TextAnnotation", "bpmn-icon-text-annotation")
+    })
+  }
+
+  // delete element entry, only show if allowed by rules
+  let deleteAllowed = rules.allowed('elements.delete', { elements: [element] })
+
+  if (isArray(deleteAllowed)) {
+    // was the element returned as a deletion candidate?
+    deleteAllowed = deleteAllowed[0] === element
+  }
+
+  if (deleteAllowed) {
+    assign(actions, {
+      delete: {
+        group: "edit",
+        className: "bpmn-icon-trash",
+        title: translate("Remove"),
+        action: {
+          click: removeElement
+        }
+      }
+    })
+  }
+
+  return actions
+}
+
+// helpers /////////
+
+function isEventType (eventBo, type, definition) {
+  const isType = eventBo.$instanceOf(type)
+  let isDefinition = false
+
+  const definitions = eventBo.eventDefinitions || []
+  forEach(definitions, function (def) {
+    if (def.$type === definition) {
+      isDefinition = true
+    }
+  })
+
+  return isType && isDefinition
+}

yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/designer/plugins/content-pad/index.js

@@ -0,0 +1,6 @@
+import CustomContextPadProvider from "./contentPadProvider";
+
+export default {
+  __init__: ["contextPadProvider"],
+  contextPadProvider: ["type", CustomContextPadProvider]
+};

yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/designer/plugins/defaultEmpty.js

@@ -0,0 +1,24 @@
+export default (key, name, type) => {
+  if (!type) type = "camunda";
+  const TYPE_TARGET = {
+    activiti: "http://activiti.org/bpmn",
+    camunda: "http://bpmn.io/schema/bpmn",
+    flowable: "http://flowable.org/bpmn"
+  };
+  return `<?xml version="1.0" encoding="UTF-8"?>
+<bpmn2:definitions 
+  xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
+  xmlns:bpmn2="http://www.omg.org/spec/BPMN/20100524/MODEL"
+  xmlns:bpmndi="http://www.omg.org/spec/BPMN/20100524/DI"
+  xmlns:dc="http://www.omg.org/spec/DD/20100524/DC"
+  xmlns:di="http://www.omg.org/spec/DD/20100524/DI"
+  id="diagram_${key}"
+  targetNamespace="${TYPE_TARGET[type]}">
+  <bpmn2:process id="${key}" name="${name}" isExecutable="true">
+  </bpmn2:process>
+  <bpmndi:BPMNDiagram id="BPMNDiagram_1">
+    <bpmndi:BPMNPlane id="BPMNPlane_1" bpmnElement="${key}">
+    </bpmndi:BPMNPlane>
+  </bpmndi:BPMNDiagram>
+</bpmn2:definitions>`;
+};

yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/designer/plugins/descriptor/activitiDescriptor.json

@@ -0,0 +1,1071 @@
+{
+  "name": "Activiti",
+  "uri": "http://activiti.org/bpmn",
+  "prefix": "activiti",
+  "xml": {
+    "tagAlias": "lowerCase"
+  },
+  "associations": [],
+  "types": [
+    {
+      "name": "Definitions",
+      "isAbstract": true,
+      "extends": [
+        "bpmn:Definitions"
+      ],
+      "properties": [
+        {
+          "name": "diagramRelationId",
+          "isAttr": true,
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "InOutBinding",
+      "superClass": [
+        "Element"
+      ],
+      "isAbstract": true,
+      "properties": [
+        {
+          "name": "source",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "sourceExpression",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "target",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "businessKey",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "local",
+          "isAttr": true,
+          "type": "Boolean",
+          "default": false
+        },
+        {
+          "name": "variables",
+          "isAttr": true,
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "In",
+      "superClass": [
+        "InOutBinding"
+      ],
+      "meta": {
+        "allowedIn": [
+          "bpmn:CallActivity"
+        ]
+      }
+    },
+    {
+      "name": "Out",
+      "superClass": [
+        "InOutBinding"
+      ],
+      "meta": {
+        "allowedIn": [
+          "bpmn:CallActivity"
+        ]
+      }
+    },
+    {
+      "name": "AsyncCapable",
+      "isAbstract": true,
+      "extends": [
+        "bpmn:Activity",
+        "bpmn:Gateway",
+        "bpmn:Event"
+      ],
+      "properties": [
+        {
+          "name": "async",
+          "isAttr": true,
+          "type": "Boolean",
+          "default": false
+        },
+        {
+          "name": "asyncBefore",
+          "isAttr": true,
+          "type": "Boolean",
+          "default": false
+        },
+        {
+          "name": "asyncAfter",
+          "isAttr": true,
+          "type": "Boolean",
+          "default": false
+        },
+        {
+          "name": "exclusive",
+          "isAttr": true,
+          "type": "Boolean",
+          "default": true
+        }
+      ]
+    },
+    {
+      "name": "JobPriorized",
+      "isAbstract": true,
+      "extends": [
+        "bpmn:Process",
+        "activiti:AsyncCapable"
+      ],
+      "properties": [
+        {
+          "name": "jobPriority",
+          "isAttr": true,
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "SignalEventDefinition",
+      "isAbstract": true,
+      "extends": [
+        "bpmn:SignalEventDefinition"
+      ],
+      "properties": [
+        {
+          "name": "async",
+          "isAttr": true,
+          "type": "Boolean",
+          "default": false
+        }
+      ]
+    },
+    {
+      "name": "ErrorEventDefinition",
+      "isAbstract": true,
+      "extends": [
+        "bpmn:ErrorEventDefinition"
+      ],
+      "properties": [
+        {
+          "name": "errorCodeVariable",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "errorMessageVariable",
+          "isAttr": true,
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "Error",
+      "isAbstract": true,
+      "extends": [
+        "bpmn:Error"
+      ],
+      "properties": [
+        {
+          "name": "activiti:errorMessage",
+          "isAttr": true,
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "PotentialStarter",
+      "superClass": [
+        "Element"
+      ],
+      "properties": [
+        {
+          "name": "resourceAssignmentExpression",
+          "type": "bpmn:ResourceAssignmentExpression"
+        }
+      ]
+    },
+    {
+      "name": "FormSupported",
+      "isAbstract": true,
+      "extends": [
+        "bpmn:StartEvent",
+        "bpmn:UserTask"
+      ],
+      "properties": [
+        {
+          "name": "formHandlerClass",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "formKey",
+          "isAttr": true,
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "TemplateSupported",
+      "isAbstract": true,
+      "extends": [
+        "bpmn:Process",
+        "bpmn:FlowElement"
+      ],
+      "properties": [
+        {
+          "name": "modelerTemplate",
+          "isAttr": true,
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "Initiator",
+      "isAbstract": true,
+      "extends": [ "bpmn:StartEvent" ],
+      "properties": [
+        {
+          "name": "initiator",
+          "isAttr": true,
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "ScriptTask",
+      "isAbstract": true,
+      "extends": [
+        "bpmn:ScriptTask"
+      ],
+      "properties": [
+        {
+          "name": "resultVariable",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "resource",
+          "isAttr": true,
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "Process",
+      "isAbstract": true,
+      "extends": [
+        "bpmn:Process"
+      ],
+      "properties": [
+        {
+          "name": "candidateStarterGroups",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "candidateStarterUsers",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "versionTag",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "historyTimeToLive",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "isStartableInTasklist",
+          "isAttr": true,
+          "type": "Boolean",
+          "default": true
+        },
+        {
+          "name":"executionListener",
+          "isAbstract": true,
+          "type":"Expression"
+        }
+      ]
+    },
+    {
+      "name": "EscalationEventDefinition",
+      "isAbstract": true,
+      "extends": [
+        "bpmn:EscalationEventDefinition"
+      ],
+      "properties": [
+        {
+          "name": "escalationCodeVariable",
+          "isAttr": true,
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "FormalExpression",
+      "isAbstract": true,
+      "extends": [
+        "bpmn:FormalExpression"
+      ],
+      "properties": [
+        {
+          "name": "resource",
+          "isAttr": true,
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "multiinstance_type",
+      "superClass":[
+        "Element"
+      ]
+    },
+    {
+      "name": "multiinstance_condition",
+      "superClass":[
+        "Element"
+      ]
+    },
+    {
+      "name": "Assignable",
+      "extends": [ "bpmn:UserTask" ],
+      "properties": [
+        {
+          "name": "assignee",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "candidateUsers",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "candidateGroups",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "dueDate",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "followUpDate",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "priority",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "multiinstance_condition",
+          "isAttr": true,
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "CallActivity",
+      "extends": [ "bpmn:CallActivity" ],
+      "properties": [
+        {
+          "name": "calledElementBinding",
+          "isAttr": true,
+          "type": "String",
+          "default": "latest"
+        },
+        {
+          "name": "calledElementVersion",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "calledElementVersionTag",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "calledElementTenantId",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "caseRef",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "caseBinding",
+          "isAttr": true,
+          "type": "String",
+          "default": "latest"
+        },
+        {
+          "name": "caseVersion",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "caseTenantId",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "variableMappingClass",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "variableMappingDelegateExpression",
+          "isAttr": true,
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "ServiceTaskLike",
+      "extends": [
+        "bpmn:ServiceTask",
+        "bpmn:BusinessRuleTask",
+        "bpmn:SendTask",
+        "bpmn:MessageEventDefinition"
+      ],
+      "properties": [
+        {
+          "name": "expression",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "class",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "delegateExpression",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "resultVariable",
+          "isAttr": true,
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "DmnCapable",
+      "extends": [
+        "bpmn:BusinessRuleTask"
+      ],
+      "properties": [
+        {
+          "name": "decisionRef",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "decisionRefBinding",
+          "isAttr": true,
+          "type": "String",
+          "default": "latest"
+        },
+        {
+          "name": "decisionRefVersion",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "mapDecisionResult",
+          "isAttr": true,
+          "type": "String",
+          "default": "resultList"
+        },
+        {
+          "name": "decisionRefTenantId",
+          "isAttr": true,
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "ExternalCapable",
+      "extends": [
+        "activiti:ServiceTaskLike"
+      ],
+      "properties": [
+        {
+          "name": "type",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "topic",
+          "isAttr": true,
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "TaskPriorized",
+      "extends": [
+        "bpmn:Process",
+        "activiti:ExternalCapable"
+      ],
+      "properties": [
+        {
+          "name": "taskPriority",
+          "isAttr": true,
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "Properties",
+      "superClass": [
+        "Element"
+      ],
+      "meta": {
+        "allowedIn": [ "*" ]
+      },
+      "properties": [
+        {
+          "name": "values",
+          "type": "Property",
+          "isMany": true
+        }
+      ]
+    },
+    {
+      "name": "Property",
+      "superClass": [
+        "Element"
+      ],
+      "properties": [
+        {
+          "name": "id",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "name",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "value",
+          "type": "String",
+          "isAttr": true
+        }
+      ]
+    },
+    {
+      "name": "Connector",
+      "superClass": [
+        "Element"
+      ],
+      "meta": {
+        "allowedIn": [
+          "activiti:ServiceTaskLike"
+        ]
+      },
+      "properties": [
+        {
+          "name": "inputOutput",
+          "type": "InputOutput"
+        },
+        {
+          "name": "connectorId",
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "InputOutput",
+      "superClass": [
+        "Element"
+      ],
+      "meta": {
+        "allowedIn": [
+          "bpmn:FlowNode",
+          "activiti:Connector"
+        ]
+      },
+      "properties": [
+        {
+          "name": "inputOutput",
+          "type": "InputOutput"
+        },
+        {
+          "name": "connectorId",
+          "type": "String"
+        },
+        {
+          "name": "inputParameters",
+          "isMany": true,
+          "type": "InputParameter"
+        },
+        {
+          "name": "outputParameters",
+          "isMany": true,
+          "type": "OutputParameter"
+        }
+      ]
+    },
+    {
+      "name": "InputOutputParameter",
+      "properties": [
+        {
+          "name": "name",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "value",
+          "isBody": true,
+          "type": "String"
+        },
+        {
+          "name": "definition",
+          "type": "InputOutputParameterDefinition"
+        }
+      ]
+    },
+    {
+      "name": "InputOutputParameterDefinition",
+      "isAbstract": true
+    },
+    {
+      "name": "List",
+      "superClass": [ "InputOutputParameterDefinition" ],
+      "properties": [
+        {
+          "name": "items",
+          "isMany": true,
+          "type": "InputOutputParameterDefinition"
+        }
+      ]
+    },
+    {
+      "name": "Map",
+      "superClass": [ "InputOutputParameterDefinition" ],
+      "properties": [
+        {
+          "name": "entries",
+          "isMany": true,
+          "type": "Entry"
+        }
+      ]
+    },
+    {
+      "name": "Entry",
+      "properties": [
+        {
+          "name": "key",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "value",
+          "isBody": true,
+          "type": "String"
+        },
+        {
+          "name": "definition",
+          "type": "InputOutputParameterDefinition"
+        }
+      ]
+    },
+    {
+      "name": "Value",
+      "superClass": [
+        "InputOutputParameterDefinition"
+      ],
+      "properties": [
+        {
+          "name": "id",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "name",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "value",
+          "isBody": true,
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "Script",
+      "superClass": [ "InputOutputParameterDefinition" ],
+      "properties": [
+        {
+          "name": "scriptFormat",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "resource",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "value",
+          "isBody": true,
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "Field",
+      "superClass": [ "Element" ],
+      "meta": {
+        "allowedIn": [
+          "activiti:ServiceTaskLike",
+          "activiti:ExecutionListener",
+          "activiti:TaskListener"
+        ]
+      },
+      "properties": [
+        {
+          "name": "name",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "expression",
+          "type": "String"
+        },
+        {
+          "name": "stringValue",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "string",
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "InputParameter",
+      "superClass": [ "InputOutputParameter" ]
+    },
+    {
+      "name": "OutputParameter",
+      "superClass": [ "InputOutputParameter" ]
+    },
+    {
+      "name": "Collectable",
+      "isAbstract": true,
+      "extends": [ "bpmn:MultiInstanceLoopCharacteristics" ],
+      "superClass": [ "activiti:AsyncCapable" ],
+      "properties": [
+        {
+          "name": "collection",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "elementVariable",
+          "isAttr": true,
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "FailedJobRetryTimeCycle",
+      "superClass": [ "Element" ],
+      "meta": {
+        "allowedIn": [
+          "activiti:AsyncCapable",
+          "bpmn:MultiInstanceLoopCharacteristics"
+        ]
+      },
+      "properties": [
+        {
+          "name": "body",
+          "isBody": true,
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "ExecutionListener",
+      "superClass": [ "Element" ],
+      "meta": {
+        "allowedIn": [
+          "bpmn:Task",
+          "bpmn:ServiceTask",
+          "bpmn:UserTask",
+          "bpmn:BusinessRuleTask",
+          "bpmn:ScriptTask",
+          "bpmn:ReceiveTask",
+          "bpmn:ManualTask",
+          "bpmn:ExclusiveGateway",
+          "bpmn:SequenceFlow",
+          "bpmn:ParallelGateway",
+          "bpmn:InclusiveGateway",
+          "bpmn:EventBasedGateway",
+          "bpmn:StartEvent",
+          "bpmn:IntermediateCatchEvent",
+          "bpmn:IntermediateThrowEvent",
+          "bpmn:EndEvent",
+          "bpmn:BoundaryEvent",
+          "bpmn:CallActivity",
+          "bpmn:SubProcess",
+          "bpmn:Process"
+        ]
+      },
+      "properties": [
+        {
+          "name": "expression",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "class",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "delegateExpression",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "event",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "script",
+          "type": "Script"
+        },
+        {
+          "name": "fields",
+          "type": "Field",
+          "isMany": true
+        }
+      ]
+    },
+    {
+      "name": "TaskListener",
+      "superClass": [ "Element" ],
+      "meta": {
+        "allowedIn": [
+          "bpmn:UserTask"
+        ]
+      },
+      "properties": [
+        {
+          "name": "expression",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "class",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "delegateExpression",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "event",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "script",
+          "type": "Script"
+        },
+        {
+          "name": "fields",
+          "type": "Field",
+          "isMany": true
+        }
+      ]
+    },
+    {
+      "name": "FormProperty",
+      "superClass": [ "Element" ],
+      "meta": {
+        "allowedIn": [
+          "bpmn:StartEvent",
+          "bpmn:UserTask"
+        ]
+      },
+      "properties": [
+        {
+          "name": "id",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "name",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "type",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "required",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "readable",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "writable",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "variable",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "expression",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "datePattern",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "default",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "values",
+          "type": "Value",
+          "isMany": true
+        }
+      ]
+    },
+    {
+      "name": "FormProperty",
+      "superClass": [ "Element" ],
+      "properties": [
+        {
+          "name": "id",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "label",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "type",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "datePattern",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "defaultValue",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "properties",
+          "type": "Properties"
+        },
+        {
+          "name": "validation",
+          "type": "Validation"
+        },
+        {
+          "name": "values",
+          "type": "Value",
+          "isMany": true
+        }
+      ]
+    },
+    {
+      "name": "Validation",
+      "superClass": [ "Element" ],
+      "properties": [
+        {
+          "name": "constraints",
+          "type": "Constraint",
+          "isMany": true
+        }
+      ]
+    },
+    {
+      "name": "Constraint",
+      "superClass": [ "Element" ],
+      "properties": [
+        {
+          "name": "name",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "config",
+          "type": "String",
+          "isAttr": true
+        }
+      ]
+    },
+    {
+      "name": "ConditionalEventDefinition",
+      "isAbstract": true,
+      "extends": [
+        "bpmn:ConditionalEventDefinition"
+      ],
+      "properties": [
+        {
+          "name": "variableName",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "variableEvent",
+          "isAttr": true,
+          "type": "String"
+        }
+      ]
+    }
+  ],
+  "emumerations": [ ]
+}

yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/designer/plugins/descriptor/camundaDescriptor.json

@@ -0,0 +1,1087 @@
+{
+  "name": "Camunda",
+  "uri": "http://camunda.org/schema/1.0/bpmn",
+  "prefix": "camunda",
+  "xml": {
+    "tagAlias": "lowerCase"
+  },
+  "associations": [],
+  "types": [
+    {
+      "name": "Definitions",
+      "isAbstract": true,
+      "extends": [
+        "bpmn:Definitions"
+      ],
+      "properties": [
+        {
+          "name": "diagramRelationId",
+          "isAttr": true,
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "InOutBinding",
+      "superClass": [
+        "Element"
+      ],
+      "isAbstract": true,
+      "properties": [
+        {
+          "name": "source",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "sourceExpression",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "target",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "businessKey",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "local",
+          "isAttr": true,
+          "type": "Boolean",
+          "default": false
+        },
+        {
+          "name": "variables",
+          "isAttr": true,
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "In",
+      "superClass": [
+        "InOutBinding"
+      ],
+      "meta": {
+        "allowedIn": [
+          "bpmn:CallActivity",
+          "bpmn:SignalEventDefinition"
+        ]
+      }
+    },
+    {
+      "name": "Out",
+      "superClass": [
+        "InOutBinding"
+      ],
+      "meta": {
+        "allowedIn": [
+          "bpmn:CallActivity"
+        ]
+      }
+    },
+    {
+      "name": "AsyncCapable",
+      "isAbstract": true,
+      "extends": [
+        "bpmn:Activity",
+        "bpmn:Gateway",
+        "bpmn:Event"
+      ],
+      "properties": [
+        {
+          "name": "async",
+          "isAttr": true,
+          "type": "Boolean",
+          "default": false
+        },
+        {
+          "name": "asyncBefore",
+          "isAttr": true,
+          "type": "Boolean",
+          "default": false
+        },
+        {
+          "name": "asyncAfter",
+          "isAttr": true,
+          "type": "Boolean",
+          "default": false
+        },
+        {
+          "name": "exclusive",
+          "isAttr": true,
+          "type": "Boolean",
+          "default": true
+        }
+      ]
+    },
+    {
+      "name": "JobPriorized",
+      "isAbstract": true,
+      "extends": [
+        "bpmn:Process",
+        "camunda:AsyncCapable"
+      ],
+      "properties": [
+        {
+          "name": "jobPriority",
+          "isAttr": true,
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "SignalEventDefinition",
+      "isAbstract": true,
+      "extends": [
+        "bpmn:SignalEventDefinition"
+      ],
+      "properties": [
+        {
+          "name": "async",
+          "isAttr": true,
+          "type": "Boolean",
+          "default": false
+        }
+      ]
+    },
+    {
+      "name": "ErrorEventDefinition",
+      "isAbstract": true,
+      "extends": [
+        "bpmn:ErrorEventDefinition"
+      ],
+      "properties": [
+        {
+          "name": "errorCodeVariable",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "errorMessageVariable",
+          "isAttr": true,
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "Error",
+      "isAbstract": true,
+      "extends": [
+        "bpmn:Error"
+      ],
+      "properties": [
+        {
+          "name": "camunda:errorMessage",
+          "isAttr": true,
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "PotentialStarter",
+      "superClass": [
+        "Element"
+      ],
+      "properties": [
+        {
+          "name": "resourceAssignmentExpression",
+          "type": "bpmn:ResourceAssignmentExpression"
+        }
+      ]
+    },
+    {
+      "name": "FormSupported",
+      "isAbstract": true,
+      "extends": [
+        "bpmn:StartEvent",
+        "bpmn:UserTask"
+      ],
+      "properties": [
+        {
+          "name": "formHandlerClass",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "formKey",
+          "isAttr": true,
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "TemplateSupported",
+      "isAbstract": true,
+      "extends": [
+        "bpmn:Process",
+        "bpmn:FlowElement"
+      ],
+      "properties": [
+        {
+          "name": "modelerTemplate",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "modelerTemplateVersion",
+          "isAttr": true,
+          "type": "Integer"
+        }
+      ]
+    },
+    {
+      "name": "Initiator",
+      "isAbstract": true,
+      "extends": [ "bpmn:StartEvent" ],
+      "properties": [
+        {
+          "name": "initiator",
+          "isAttr": true,
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "ScriptTask",
+      "isAbstract": true,
+      "extends": [
+        "bpmn:ScriptTask"
+      ],
+      "properties": [
+        {
+          "name": "resultVariable",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "resource",
+          "isAttr": true,
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "Process",
+      "isAbstract": true,
+      "extends": [
+        "bpmn:Process"
+      ],
+      "properties": [
+        {
+          "name": "candidateStarterGroups",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "candidateStarterUsers",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "versionTag",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "historyTimeToLive",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "isStartableInTasklist",
+          "isAttr": true,
+          "type": "Boolean",
+          "default": true
+        }
+      ]
+    },
+    {
+      "name": "EscalationEventDefinition",
+      "isAbstract": true,
+      "extends": [
+        "bpmn:EscalationEventDefinition"
+      ],
+      "properties": [
+        {
+          "name": "escalationCodeVariable",
+          "isAttr": true,
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "FormalExpression",
+      "isAbstract": true,
+      "extends": [
+        "bpmn:FormalExpression"
+      ],
+      "properties": [
+        {
+          "name": "resource",
+          "isAttr": true,
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "Assignable",
+      "extends": [ "bpmn:UserTask" ],
+      "properties": [
+        {
+          "name": "assignee",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "candidateUsers",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "candidateGroups",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "dueDate",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "followUpDate",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "priority",
+          "isAttr": true,
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "CallActivity",
+      "extends": [ "bpmn:CallActivity" ],
+      "properties": [
+        {
+          "name": "calledElementBinding",
+          "isAttr": true,
+          "type": "String",
+          "default": "latest"
+        },
+        {
+          "name": "calledElementVersion",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "calledElementVersionTag",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "calledElementTenantId",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "caseRef",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "caseBinding",
+          "isAttr": true,
+          "type": "String",
+          "default": "latest"
+        },
+        {
+          "name": "caseVersion",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "caseTenantId",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "variableMappingClass",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "variableMappingDelegateExpression",
+          "isAttr": true,
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "ServiceTaskLike",
+      "extends": [
+        "bpmn:ServiceTask",
+        "bpmn:BusinessRuleTask",
+        "bpmn:SendTask",
+        "bpmn:MessageEventDefinition"
+      ],
+      "properties": [
+        {
+          "name": "expression",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "class",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "delegateExpression",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "resultVariable",
+          "isAttr": true,
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "DmnCapable",
+      "extends": [
+        "bpmn:BusinessRuleTask"
+      ],
+      "properties": [
+        {
+          "name": "decisionRef",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "decisionRefBinding",
+          "isAttr": true,
+          "type": "String",
+          "default": "latest"
+        },
+        {
+          "name": "decisionRefVersion",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "mapDecisionResult",
+          "isAttr": true,
+          "type": "String",
+          "default": "resultList"
+        },
+        {
+          "name": "decisionRefTenantId",
+          "isAttr": true,
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "ExternalCapable",
+      "extends": [
+        "camunda:ServiceTaskLike"
+      ],
+      "properties": [
+        {
+          "name": "type",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "topic",
+          "isAttr": true,
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "TaskPriorized",
+      "extends": [
+        "bpmn:Process",
+        "camunda:ExternalCapable"
+      ],
+      "properties": [
+        {
+          "name": "taskPriority",
+          "isAttr": true,
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "Properties",
+      "superClass": [
+        "Element"
+      ],
+      "meta": {
+        "allowedIn": [ "*" ]
+      },
+      "properties": [
+        {
+          "name": "values",
+          "type": "Property",
+          "isMany": true
+        }
+      ]
+    },
+    {
+      "name": "Property",
+      "superClass": [
+        "Element"
+      ],
+      "properties": [
+        {
+          "name": "id",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "name",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "value",
+          "type": "String",
+          "isAttr": true
+        }
+      ]
+    },
+    {
+      "name": "Connector",
+      "superClass": [
+        "Element"
+      ],
+      "meta": {
+        "allowedIn": [
+          "camunda:ServiceTaskLike"
+        ]
+      },
+      "properties": [
+        {
+          "name": "inputOutput",
+          "type": "InputOutput"
+        },
+        {
+          "name": "connectorId",
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "InputOutput",
+      "superClass": [
+        "Element"
+      ],
+      "meta": {
+        "allowedIn": [
+          "bpmn:FlowNode",
+          "camunda:Connector"
+        ]
+      },
+      "properties": [
+        {
+          "name": "inputOutput",
+          "type": "InputOutput"
+        },
+        {
+          "name": "connectorId",
+          "type": "String"
+        },
+        {
+          "name": "inputParameters",
+          "isMany": true,
+          "type": "InputParameter"
+        },
+        {
+          "name": "outputParameters",
+          "isMany": true,
+          "type": "OutputParameter"
+        }
+      ]
+    },
+    {
+      "name": "InputOutputParameter",
+      "properties": [
+        {
+          "name": "name",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "value",
+          "isBody": true,
+          "type": "String"
+        },
+        {
+          "name": "definition",
+          "type": "InputOutputParameterDefinition"
+        }
+      ]
+    },
+    {
+      "name": "InputOutputParameterDefinition",
+      "isAbstract": true
+    },
+    {
+      "name": "List",
+      "superClass": [ "InputOutputParameterDefinition" ],
+      "properties": [
+        {
+          "name": "items",
+          "isMany": true,
+          "type": "InputOutputParameterDefinition"
+        }
+      ]
+    },
+    {
+      "name": "Map",
+      "superClass": [ "InputOutputParameterDefinition" ],
+      "properties": [
+        {
+          "name": "entries",
+          "isMany": true,
+          "type": "Entry"
+        }
+      ]
+    },
+    {
+      "name": "Entry",
+      "properties": [
+        {
+          "name": "key",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "value",
+          "isBody": true,
+          "type": "String"
+        },
+        {
+          "name": "definition",
+          "type": "InputOutputParameterDefinition"
+        }
+      ]
+    },
+    {
+      "name": "Value",
+      "superClass": [
+        "InputOutputParameterDefinition"
+      ],
+      "properties": [
+        {
+          "name": "id",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "name",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "value",
+          "isBody": true,
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "Script",
+      "superClass": [ "InputOutputParameterDefinition" ],
+      "properties": [
+        {
+          "name": "scriptFormat",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "resource",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "value",
+          "isBody": true,
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "Field",
+      "superClass": [ "Element" ],
+      "meta": {
+        "allowedIn": [
+          "camunda:ServiceTaskLike",
+          "camunda:ExecutionListener",
+          "camunda:TaskListener"
+        ]
+      },
+      "properties": [
+        {
+          "name": "name",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "expression",
+          "type": "String"
+        },
+        {
+          "name": "stringValue",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "string",
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "InputParameter",
+      "superClass": [ "InputOutputParameter" ]
+    },
+    {
+      "name": "OutputParameter",
+      "superClass": [ "InputOutputParameter" ]
+    },
+    {
+      "name": "Collectable",
+      "isAbstract": true,
+      "extends": [ "bpmn:MultiInstanceLoopCharacteristics" ],
+      "superClass": [ "camunda:AsyncCapable" ],
+      "properties": [
+        {
+          "name": "collection",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "elementVariable",
+          "isAttr": true,
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "FailedJobRetryTimeCycle",
+      "superClass": [ "Element" ],
+      "meta": {
+        "allowedIn": [
+          "camunda:AsyncCapable",
+          "bpmn:MultiInstanceLoopCharacteristics"
+        ]
+      },
+      "properties": [
+        {
+          "name": "body",
+          "isBody": true,
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "ExecutionListener",
+      "superClass": [ "Element" ],
+      "meta": {
+        "allowedIn": [
+          "bpmn:Task",
+          "bpmn:ServiceTask",
+          "bpmn:UserTask",
+          "bpmn:BusinessRuleTask",
+          "bpmn:ScriptTask",
+          "bpmn:ReceiveTask",
+          "bpmn:ManualTask",
+          "bpmn:ExclusiveGateway",
+          "bpmn:SequenceFlow",
+          "bpmn:ParallelGateway",
+          "bpmn:InclusiveGateway",
+          "bpmn:EventBasedGateway",
+          "bpmn:StartEvent",
+          "bpmn:IntermediateCatchEvent",
+          "bpmn:IntermediateThrowEvent",
+          "bpmn:EndEvent",
+          "bpmn:BoundaryEvent",
+          "bpmn:CallActivity",
+          "bpmn:SubProcess",
+          "bpmn:Process"
+        ]
+      },
+      "properties": [
+        {
+          "name": "expression",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "class",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "delegateExpression",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "event",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "script",
+          "type": "Script"
+        },
+        {
+          "name": "fields",
+          "type": "Field",
+          "isMany": true
+        }
+      ]
+    },
+    {
+      "name": "TaskListener",
+      "superClass": [ "Element" ],
+      "meta": {
+        "allowedIn": [
+          "bpmn:UserTask"
+        ]
+      },
+      "properties": [
+        {
+          "name": "expression",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "class",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "delegateExpression",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "event",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "script",
+          "type": "Script"
+        },
+        {
+          "name": "fields",
+          "type": "Field",
+          "isMany": true
+        },
+        {
+          "name": "id",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "eventDefinitions",
+          "type": "bpmn:TimerEventDefinition",
+          "isMany": true
+        }
+      ]
+    },
+    {
+      "name": "FormProperty",
+      "superClass": [ "Element" ],
+      "meta": {
+        "allowedIn": [
+          "bpmn:StartEvent",
+          "bpmn:UserTask"
+        ]
+      },
+      "properties": [
+        {
+          "name": "id",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "name",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "type",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "required",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "readable",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "writable",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "variable",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "expression",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "datePattern",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "default",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "values",
+          "type": "Value",
+          "isMany": true
+        }
+      ]
+    },
+    {
+      "name": "FormData",
+      "superClass": [ "Element" ],
+      "meta": {
+        "allowedIn": [
+          "bpmn:StartEvent",
+          "bpmn:UserTask"
+        ]
+      },
+      "properties": [
+        {
+          "name": "fields",
+          "type": "FormField",
+          "isMany": true
+        },
+        {
+          "name": "businessKey",
+          "type": "String",
+          "isAttr": true
+        }
+      ]
+    },
+    {
+      "name": "FormField",
+      "superClass": [ "Element" ],
+      "properties": [
+        {
+          "name": "id",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "label",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "type",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "datePattern",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "defaultValue",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "properties",
+          "type": "Properties"
+        },
+        {
+          "name": "validation",
+          "type": "Validation"
+        },
+        {
+          "name": "values",
+          "type": "Value",
+          "isMany": true
+        }
+      ]
+    },
+    {
+      "name": "Validation",
+      "superClass": [ "Element" ],
+      "properties": [
+        {
+          "name": "constraints",
+          "type": "Constraint",
+          "isMany": true
+        }
+      ]
+    },
+    {
+      "name": "Constraint",
+      "superClass": [ "Element" ],
+      "properties": [
+        {
+          "name": "name",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "config",
+          "type": "String",
+          "isAttr": true
+        }
+      ]
+    },
+    {
+      "name": "ConditionalEventDefinition",
+      "isAbstract": true,
+      "extends": [
+        "bpmn:ConditionalEventDefinition"
+      ],
+      "properties": [
+        {
+          "name": "variableName",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "variableEvents",
+          "isAttr": true,
+          "type": "String"
+        }
+      ]
+    }
+  ],
+  "emumerations": [ ]
+}

yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/designer/plugins/descriptor/flowableDescriptor.json

@@ -0,0 +1,1210 @@
+{
+  "name": "Flowable",
+  "uri": "http://flowable.org/bpmn",
+  "prefix": "flowable",
+  "xml": {
+    "tagAlias": "lowerCase"
+  },
+  "associations": [],
+  "types": [
+    {
+      "name": "InOutBinding",
+      "superClass": ["Element"],
+      "isAbstract": true,
+      "properties": [
+        {
+          "name": "source",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "sourceExpression",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "target",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "businessKey",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "local",
+          "isAttr": true,
+          "type": "Boolean",
+          "default": false
+        },
+        {
+          "name": "variables",
+          "isAttr": true,
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "In",
+      "superClass": ["InOutBinding"],
+      "meta": {
+        "allowedIn": ["bpmn:CallActivity"]
+      }
+    },
+    {
+      "name": "Out",
+      "superClass": ["InOutBinding"],
+      "meta": {
+        "allowedIn": ["bpmn:CallActivity"]
+      }
+    },
+    {
+      "name": "AsyncCapable",
+      "isAbstract": true,
+      "extends": ["bpmn:Activity", "bpmn:Gateway", "bpmn:Event"],
+      "properties": [
+        {
+          "name": "async",
+          "isAttr": true,
+          "type": "Boolean",
+          "default": false
+        },
+        {
+          "name": "asyncBefore",
+          "isAttr": true,
+          "type": "Boolean",
+          "default": false
+        },
+        {
+          "name": "asyncAfter",
+          "isAttr": true,
+          "type": "Boolean",
+          "default": false
+        },
+        {
+          "name": "exclusive",
+          "isAttr": true,
+          "type": "Boolean",
+          "default": true
+        }
+      ]
+    },
+    {
+      "name": "JobPriorized",
+      "isAbstract": true,
+      "extends": ["bpmn:Process", "flowable:AsyncCapable"],
+      "properties": [
+        {
+          "name": "jobPriority",
+          "isAttr": true,
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "SignalEventDefinition",
+      "isAbstract": true,
+      "extends": ["bpmn:SignalEventDefinition"],
+      "properties": [
+        {
+          "name": "async",
+          "isAttr": true,
+          "type": "Boolean",
+          "default": false
+        }
+      ]
+    },
+    {
+      "name": "ErrorEventDefinition",
+      "isAbstract": true,
+      "extends": ["bpmn:ErrorEventDefinition"],
+      "properties": [
+        {
+          "name": "errorCodeVariable",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "errorMessageVariable",
+          "isAttr": true,
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "Error",
+      "isAbstract": true,
+      "extends": ["bpmn:Error"],
+      "properties": [
+        {
+          "name": "flowable:errorMessage",
+          "isAttr": true,
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "PotentialStarter",
+      "superClass": ["Element"],
+      "properties": [
+        {
+          "name": "resourceAssignmentExpression",
+          "type": "bpmn:ResourceAssignmentExpression"
+        }
+      ]
+    },
+    {
+      "name": "FormSupported",
+      "isAbstract": true,
+      "extends": ["bpmn:StartEvent", "bpmn:UserTask"],
+      "properties": [
+        {
+          "name": "formHandlerClass",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "formKey",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "formType",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "formReadOnly",
+          "isAttr": true,
+          "type": "Boolean",
+          "default": false
+        },
+        {
+          "name": "formInit",
+          "isAttr": true,
+          "type": "Boolean",
+          "default": true
+        }
+      ]
+    },
+    {
+      "name": "TemplateSupported",
+      "isAbstract": true,
+      "extends": ["bpmn:Process", "bpmn:FlowElement"],
+      "properties": [
+        {
+          "name": "modelerTemplate",
+          "isAttr": true,
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "Initiator",
+      "isAbstract": true,
+      "extends": ["bpmn:StartEvent"],
+      "properties": [
+        {
+          "name": "initiator",
+          "isAttr": true,
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "ScriptTask",
+      "isAbstract": true,
+      "extends": ["bpmn:ScriptTask"],
+      "properties": [
+        {
+          "name": "resultVariable",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "resource",
+          "isAttr": true,
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "Process",
+      "isAbstract": true,
+      "extends": ["bpmn:Process"],
+      "properties": [
+        {
+          "name": "candidateStarterGroups",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "candidateStarterUsers",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "versionTag",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "historyTimeToLive",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "isStartableInTasklist",
+          "isAttr": true,
+          "type": "Boolean",
+          "default": true
+        }
+      ]
+    },
+    {
+      "name": "EscalationEventDefinition",
+      "isAbstract": true,
+      "extends": ["bpmn:EscalationEventDefinition"],
+      "properties": [
+        {
+          "name": "escalationCodeVariable",
+          "isAttr": true,
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "FormalExpression",
+      "isAbstract": true,
+      "extends": ["bpmn:FormalExpression"],
+      "properties": [
+        {
+          "name": "resource",
+          "isAttr": true,
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "Assignable",
+      "extends": ["bpmn:UserTask"],
+      "properties": [
+        {
+          "name": "assignee",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "candidateUsers",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "candidateGroups",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "dueDate",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "followUpDate",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "priority",
+          "isAttr": true,
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "Assignee",
+      "supperClass": "Element",
+      "meta": {
+        "allowedIn": ["*"]
+      },
+      "properties": [
+        {
+          "name": "label",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "viewId",
+          "type": "Number",
+          "isAttr": true
+        }
+      ]
+    },
+    {
+      "name": "CallActivity",
+      "extends": ["bpmn:CallActivity"],
+      "properties": [
+        {
+          "name": "calledElementBinding",
+          "isAttr": true,
+          "type": "String",
+          "default": "latest"
+        },
+        {
+          "name": "calledElementVersion",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "calledElementVersionTag",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "calledElementTenantId",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "caseRef",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "caseBinding",
+          "isAttr": true,
+          "type": "String",
+          "default": "latest"
+        },
+        {
+          "name": "caseVersion",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "caseTenantId",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "variableMappingClass",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "variableMappingDelegateExpression",
+          "isAttr": true,
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "ServiceTaskLike",
+      "extends": [
+        "bpmn:ServiceTask",
+        "bpmn:BusinessRuleTask",
+        "bpmn:SendTask",
+        "bpmn:MessageEventDefinition"
+      ],
+      "properties": [
+        {
+          "name": "expression",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "class",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "delegateExpression",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "resultVariable",
+          "isAttr": true,
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "DmnCapable",
+      "extends": ["bpmn:BusinessRuleTask"],
+      "properties": [
+        {
+          "name": "decisionRef",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "decisionRefBinding",
+          "isAttr": true,
+          "type": "String",
+          "default": "latest"
+        },
+        {
+          "name": "decisionRefVersion",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "mapDecisionResult",
+          "isAttr": true,
+          "type": "String",
+          "default": "resultList"
+        },
+        {
+          "name": "decisionRefTenantId",
+          "isAttr": true,
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "ExternalCapable",
+      "extends": ["flowable:ServiceTaskLike"],
+      "properties": [
+        {
+          "name": "type",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "topic",
+          "isAttr": true,
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "TaskPriorized",
+      "extends": ["bpmn:Process", "flowable:ExternalCapable"],
+      "properties": [
+        {
+          "name": "taskPriority",
+          "isAttr": true,
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "Properties",
+      "superClass": ["Element"],
+      "meta": {
+        "allowedIn": ["*"]
+      },
+      "properties": [
+        {
+          "name": "values",
+          "type": "Property",
+          "isMany": true
+        }
+      ]
+    },
+    {
+      "name": "Property",
+      "superClass": ["Element"],
+      "properties": [
+        {
+          "name": "id",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "name",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "value",
+          "type": "String",
+          "isAttr": true
+        }
+      ]
+    },
+    {
+      "name": "Button",
+      "superClass": ["Element"],
+      "meta": {
+        "allowedIn": ["bpmn:UserTask"]
+      },
+      "properties": [
+        {
+          "name": "id",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "name",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "code",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "isHide",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "next",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "sort",
+          "type": "Integer",
+          "isAttr": true
+        }
+      ]
+    },
+    {
+      "name": "Assignee",
+      "superClass": ["Element"],
+      "meta": {
+        "allowedIn": ["bpmn:UserTask"]
+      },
+      "properties": [
+        {
+          "name": "id",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "type",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "value",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "condition",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "operationType",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "sort",
+          "type": "Integer",
+          "isAttr": true
+        }
+      ]
+    },
+    {
+      "name": "Connector",
+      "superClass": ["Element"],
+      "meta": {
+        "allowedIn": ["flowable:ServiceTaskLike"]
+      },
+      "properties": [
+        {
+          "name": "inputOutput",
+          "type": "InputOutput"
+        },
+        {
+          "name": "connectorId",
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "InputOutput",
+      "superClass": ["Element"],
+      "meta": {
+        "allowedIn": ["bpmn:FlowNode", "flowable:Connector"]
+      },
+      "properties": [
+        {
+          "name": "inputOutput",
+          "type": "InputOutput"
+        },
+        {
+          "name": "connectorId",
+          "type": "String"
+        },
+        {
+          "name": "inputParameters",
+          "isMany": true,
+          "type": "InputParameter"
+        },
+        {
+          "name": "outputParameters",
+          "isMany": true,
+          "type": "OutputParameter"
+        }
+      ]
+    },
+    {
+      "name": "InputOutputParameter",
+      "properties": [
+        {
+          "name": "name",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "value",
+          "isBody": true,
+          "type": "String"
+        },
+        {
+          "name": "definition",
+          "type": "InputOutputParameterDefinition"
+        }
+      ]
+    },
+    {
+      "name": "InputOutputParameterDefinition",
+      "isAbstract": true
+    },
+    {
+      "name": "List",
+      "superClass": ["InputOutputParameterDefinition"],
+      "properties": [
+        {
+          "name": "items",
+          "isMany": true,
+          "type": "InputOutputParameterDefinition"
+        }
+      ]
+    },
+    {
+      "name": "Map",
+      "superClass": ["InputOutputParameterDefinition"],
+      "properties": [
+        {
+          "name": "entries",
+          "isMany": true,
+          "type": "Entry"
+        }
+      ]
+    },
+    {
+      "name": "Entry",
+      "properties": [
+        {
+          "name": "key",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "value",
+          "isBody": true,
+          "type": "String"
+        },
+        {
+          "name": "definition",
+          "type": "InputOutputParameterDefinition"
+        }
+      ]
+    },
+    {
+      "name": "Value",
+      "superClass": ["InputOutputParameterDefinition"],
+      "properties": [
+        {
+          "name": "id",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "name",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "value",
+          "isBody": true,
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "Script",
+      "superClass": ["InputOutputParameterDefinition"],
+      "properties": [
+        {
+          "name": "scriptFormat",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "resource",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "value",
+          "isBody": true,
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "Field",
+      "superClass": ["Element"],
+      "meta": {
+        "allowedIn": [
+          "flowable:ServiceTaskLike",
+          "flowable:ExecutionListener",
+          "flowable:TaskListener"
+        ]
+      },
+      "properties": [
+        {
+          "name": "name",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "expression",
+          "type": "String"
+        },
+        {
+          "name": "stringValue",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "string",
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "ChildField",
+      "superClass": ["Element"],
+      "properties": [
+        {
+          "name": "id",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "name",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "type",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "required",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "readable",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "writable",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "variable",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "expression",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "datePattern",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "default",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "values",
+          "type": "Value",
+          "isMany": true
+        }
+      ]
+    },
+    {
+      "name": "InputParameter",
+      "superClass": ["InputOutputParameter"]
+    },
+    {
+      "name": "OutputParameter",
+      "superClass": ["InputOutputParameter"]
+    },
+    {
+      "name": "Collectable",
+      "isAbstract": true,
+      "extends": ["bpmn:MultiInstanceLoopCharacteristics"],
+      "superClass": ["flowable:AsyncCapable"],
+      "properties": [
+        {
+          "name": "collection",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "elementVariable",
+          "isAttr": true,
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "FailedJobRetryTimeCycle",
+      "superClass": ["Element"],
+      "meta": {
+        "allowedIn": [
+          "flowable:AsyncCapable",
+          "bpmn:MultiInstanceLoopCharacteristics"
+        ]
+      },
+      "properties": [
+        {
+          "name": "body",
+          "isBody": true,
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "ExecutionListener",
+      "superClass": ["Element"],
+      "meta": {
+        "allowedIn": [
+          "bpmn:Task",
+          "bpmn:ServiceTask",
+          "bpmn:UserTask",
+          "bpmn:BusinessRuleTask",
+          "bpmn:ScriptTask",
+          "bpmn:ReceiveTask",
+          "bpmn:ManualTask",
+          "bpmn:ExclusiveGateway",
+          "bpmn:SequenceFlow",
+          "bpmn:ParallelGateway",
+          "bpmn:InclusiveGateway",
+          "bpmn:EventBasedGateway",
+          "bpmn:StartEvent",
+          "bpmn:IntermediateCatchEvent",
+          "bpmn:IntermediateThrowEvent",
+          "bpmn:EndEvent",
+          "bpmn:BoundaryEvent",
+          "bpmn:CallActivity",
+          "bpmn:SubProcess",
+          "bpmn:Process"
+        ]
+      },
+      "properties": [
+        {
+          "name": "expression",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "class",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "delegateExpression",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "event",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "script",
+          "type": "Script"
+        },
+        {
+          "name": "fields",
+          "type": "Field",
+          "isMany": true
+        }
+      ]
+    },
+    {
+      "name": "TaskListener",
+      "superClass": ["Element"],
+      "meta": {
+        "allowedIn": ["bpmn:UserTask"]
+      },
+      "properties": [
+        {
+          "name": "expression",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "class",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "delegateExpression",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "event",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "script",
+          "type": "Script"
+        },
+        {
+          "name": "fields",
+          "type": "Field",
+          "isMany": true
+        }
+      ]
+    },
+    {
+      "name": "FormProperty",
+      "superClass": ["Element"],
+      "meta": {
+        "allowedIn": ["bpmn:StartEvent", "bpmn:UserTask"]
+      },
+      "properties": [
+        {
+          "name": "id",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "name",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "type",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "required",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "readable",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "writable",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "variable",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "expression",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "datePattern",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "default",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "values",
+          "type": "Value",
+          "isMany": true
+        },
+        {
+          "name": "children",
+          "type": "ChildField",
+          "isMany": true
+        },
+        {
+          "name": "extensionElements",
+          "type": "bpmn:ExtensionElements",
+          "isMany": true
+        }
+      ]
+    },
+    {
+      "name": "FormData",
+      "superClass": ["Element"],
+      "meta": {
+        "allowedIn": ["bpmn:StartEvent", "bpmn:UserTask"]
+      },
+      "properties": [
+        {
+          "name": "fields",
+          "type": "FormField",
+          "isMany": true
+        },
+        {
+          "name": "businessKey",
+          "type": "String",
+          "isAttr": true
+        }
+      ]
+    },
+    {
+      "name": "FormField",
+      "superClass": ["Element"],
+      "properties": [
+        {
+          "name": "id",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "label",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "type",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "datePattern",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "defaultValue",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "properties",
+          "type": "Properties"
+        },
+        {
+          "name": "validation",
+          "type": "Validation"
+        },
+        {
+          "name": "values",
+          "type": "Value",
+          "isMany": true
+        }
+      ]
+    },
+    {
+      "name": "Validation",
+      "superClass": ["Element"],
+      "properties": [
+        {
+          "name": "constraints",
+          "type": "Constraint",
+          "isMany": true
+        }
+      ]
+    },
+    {
+      "name": "Constraint",
+      "superClass": ["Element"],
+      "properties": [
+        {
+          "name": "name",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "config",
+          "type": "String",
+          "isAttr": true
+        }
+      ]
+    },
+    {
+      "name": "ConditionalEventDefinition",
+      "isAbstract": true,
+      "extends": ["bpmn:ConditionalEventDefinition"],
+      "properties": [
+        {
+          "name": "variableName",
+          "isAttr": true,
+          "type": "String"
+        },
+        {
+          "name": "variableEvent",
+          "isAttr": true,
+          "type": "String"
+        }
+      ]
+    },
+    {
+      "name": "Condition",
+      "superClass": ["Element"],
+      "meta": {
+        "allowedIn": ["bpmn:SequenceFlow"]
+      },
+      "properties": [
+        {
+          "name": "id",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "field",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "compare",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "value",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "logic",
+          "type": "String",
+          "isAttr": true
+        },
+        {
+          "name": "sort",
+          "type": "Integer",
+          "isAttr": true
+        }
+      ]
+    }
+  ],
+  "emumerations": []
+}

yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/designer/plugins/extension-moddle/activiti/activitiExtension.js

@@ -0,0 +1,79 @@
+"use strict"
+
+import { some } from 'min-dash'
+
+// const some = require('min-dash').some
+// const some = some
+
+const ALLOWED_TYPES = {
+  FailedJobRetryTimeCycle: ['bpmn:StartEvent', 'bpmn:BoundaryEvent', 'bpmn:IntermediateCatchEvent', 'bpmn:Activity'],
+  Connector: ['bpmn:EndEvent', 'bpmn:IntermediateThrowEvent'],
+  Field: ['bpmn:EndEvent', 'bpmn:IntermediateThrowEvent']
+}
+
+function is (element, type) {
+  return element && typeof element.$instanceOf === "function" && element.$instanceOf(type)
+}
+
+function exists (element) {
+  return element && element.length
+}
+
+function includesType (collection, type) {
+  return (
+    exists(collection) &&
+    some(collection, function (element) {
+      return is(element, type)
+    })
+  )
+}
+
+function anyType (element, types) {
+  return some(types, function (type) {
+    return is(element, type)
+  })
+}
+
+function isAllowed (propName, propDescriptor, newElement) {
+  const name = propDescriptor.name,
+    types = ALLOWED_TYPES[name.replace(/activiti:/, '')]
+
+  return name === propName && anyType(newElement, types)
+}
+
+function ActivitiModdleExtension (eventBus) {
+  eventBus.on(
+    "property.clone",
+    function (context) {
+      const newElement = context.newElement,
+        propDescriptor = context.propertyDescriptor
+
+      this.canCloneProperty(newElement, propDescriptor)
+    },
+    this
+  )
+}
+
+ActivitiModdleExtension.$inject = ["eventBus"]
+
+ActivitiModdleExtension.prototype.canCloneProperty = function (newElement, propDescriptor) {
+  if (isAllowed("activiti:FailedJobRetryTimeCycle", propDescriptor, newElement)) {
+    return (
+      includesType(newElement.eventDefinitions, "bpmn:TimerEventDefinition") ||
+      includesType(newElement.eventDefinitions, "bpmn:SignalEventDefinition") ||
+      is(newElement.loopCharacteristics, "bpmn:MultiInstanceLoopCharacteristics")
+    )
+  }
+
+  if (isAllowed("activiti:Connector", propDescriptor, newElement)) {
+    return includesType(newElement.eventDefinitions, "bpmn:MessageEventDefinition")
+  }
+
+  if (isAllowed("activiti:Field", propDescriptor, newElement)) {
+    return includesType(newElement.eventDefinitions, "bpmn:MessageEventDefinition")
+  }
+}
+
+// module.exports = ActivitiModdleExtension;
+export default ActivitiModdleExtension
+

yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/designer/plugins/extension-moddle/activiti/index.js

@@ -0,0 +1,11 @@
+/*
+ * @author igdianov
+ * address https://github.com/igdianov/activiti-bpmn-moddle
+ * */
+
+import activitiExtension from "./activitiExtension"
+
+export default {
+  __init__: ["ActivitiModdleExtension"],
+  ActivitiModdleExtension: ["type", activitiExtension]
+}

yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/designer/plugins/extension-moddle/camunda/extension.js

@@ -0,0 +1,157 @@
+"use strict"
+
+
+import {
+  isFunction,
+  isObject,
+  some
+} from 'min-dash'
+
+// const isFunction = isFunction,
+//   isObject = isObject,
+//   some = some
+// const isFunction = require('min-dash').isFunction,
+//   isObject = require('min-dash').isObject,
+//   some = require('min-dash').some
+
+const WILDCARD = '*'
+
+function CamundaModdleExtension (eventBus) {
+  const self = this
+
+  eventBus.on("moddleCopy.canCopyProperty", function (context) {
+    const property = context.property,
+      parent = context.parent
+
+    return self.canCopyProperty(property, parent)
+  })
+}
+
+CamundaModdleExtension.$inject = ["eventBus"]
+
+/**
+ * Check wether to disallow copying property.
+ */
+CamundaModdleExtension.prototype.canCopyProperty = function (property, parent) {
+  // (1) check wether property is allowed in parent
+  if (isObject(property) && !isAllowedInParent(property, parent)) {
+    return false
+  }
+
+  // (2) check more complex scenarios
+
+  if (is(property, "camunda:InputOutput") && !this.canHostInputOutput(parent)) {
+    return false
+  }
+
+  if (isAny(property, ["camunda:Connector", "camunda:Field"]) && !this.canHostConnector(parent)) {
+    return false
+  }
+
+  if (is(property, "camunda:In") && !this.canHostIn(parent)) {
+    return false
+  }
+}
+
+CamundaModdleExtension.prototype.canHostInputOutput = function (parent) {
+  // allowed in camunda:Connector
+  const connector = getParent(parent, 'camunda:Connector')
+
+  if (connector) {
+    return true
+  }
+
+  // special rules inside bpmn:FlowNode
+  const flowNode = getParent(parent, 'bpmn:FlowNode')
+
+  if (!flowNode) {
+    return false
+  }
+
+  if (isAny(flowNode, ["bpmn:StartEvent", "bpmn:Gateway", "bpmn:BoundaryEvent"])) {
+    return false
+  }
+
+  return !(is(flowNode, "bpmn:SubProcess") && flowNode.get("triggeredByEvent"))
+
+
+}
+
+CamundaModdleExtension.prototype.canHostConnector = function (parent) {
+  const serviceTaskLike = getParent(parent, 'camunda:ServiceTaskLike')
+
+  if (is(serviceTaskLike, "bpmn:MessageEventDefinition")) {
+    // only allow on throw and end events
+    return getParent(parent, "bpmn:IntermediateThrowEvent") || getParent(parent, "bpmn:EndEvent")
+  }
+
+  return true
+}
+
+CamundaModdleExtension.prototype.canHostIn = function (parent) {
+  const callActivity = getParent(parent, 'bpmn:CallActivity')
+
+  if (callActivity) {
+    return true
+  }
+
+  const signalEventDefinition = getParent(parent, 'bpmn:SignalEventDefinition')
+
+  if (signalEventDefinition) {
+    // only allow on throw and end events
+    return getParent(parent, "bpmn:IntermediateThrowEvent") || getParent(parent, "bpmn:EndEvent")
+  }
+
+  return true
+}
+
+// module.exports = CamundaModdleExtension;
+export default CamundaModdleExtension
+
+// helpers //////////
+
+function is (element, type) {
+  return element && isFunction(element.$instanceOf) && element.$instanceOf(type)
+}
+
+function isAny (element, types) {
+  return some(types, function (t) {
+    return is(element, t)
+  })
+}
+
+function getParent (element, type) {
+  if (!type) {
+    return element.$parent
+  }
+
+  if (is(element, type)) {
+    return element
+  }
+
+  if (!element.$parent) {
+    return
+  }
+
+  return getParent(element.$parent, type)
+}
+
+function isAllowedInParent (property, parent) {
+  // (1) find property descriptor
+  const descriptor = property.$type && property.$model.getTypeDescriptor(property.$type)
+
+  const allowedIn = descriptor && descriptor.meta && descriptor.meta.allowedIn
+
+  if (!allowedIn || isWildcard(allowedIn)) {
+    return true
+  }
+
+  // (2) check wether property has parent of allowed type
+  return some(allowedIn, function (type) {
+    return getParent(parent, type)
+  })
+}
+
+function isWildcard (allowedIn) {
+  return allowedIn.indexOf(WILDCARD) !== -1
+}

yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/designer/plugins/extension-moddle/camunda/index.js

@@ -0,0 +1,8 @@
+"use strict"
+
+import extension from "./extension"
+
+export default {
+  __init__: ["camundaModdleExtension"],
+  camundaModdleExtension: ["type", extension]
+}

yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/designer/plugins/extension-moddle/flowable/flowableExtension.js

@@ -0,0 +1,80 @@
+"use strict"
+
+import { some } from 'min-dash'
+
+// const some = some
+// const some = require('min-dash').some
+
+
+
+const ALLOWED_TYPES = {
+  FailedJobRetryTimeCycle: ['bpmn:StartEvent', 'bpmn:BoundaryEvent', 'bpmn:IntermediateCatchEvent', 'bpmn:Activity'],
+  Connector: ['bpmn:EndEvent', 'bpmn:IntermediateThrowEvent'],
+  Field: ['bpmn:EndEvent', 'bpmn:IntermediateThrowEvent']
+}
+
+function is (element, type) {
+  return element && typeof element.$instanceOf === "function" && element.$instanceOf(type)
+}
+
+function exists (element) {
+  return element && element.length
+}
+
+function includesType (collection, type) {
+  return (
+    exists(collection) &&
+    some(collection, function (element) {
+      return is(element, type)
+    })
+  )
+}
+
+function anyType (element, types) {
+  return some(types, function (type) {
+    return is(element, type)
+  })
+}
+
+function isAllowed (propName, propDescriptor, newElement) {
+  const name = propDescriptor.name,
+    types = ALLOWED_TYPES[name.replace(/flowable:/, '')]
+
+  return name === propName && anyType(newElement, types)
+}
+
+function FlowableModdleExtension (eventBus) {
+  eventBus.on(
+    "property.clone",
+    function (context) {
+      const newElement = context.newElement,
+        propDescriptor = context.propertyDescriptor
+
+      this.canCloneProperty(newElement, propDescriptor)
+    },
+    this
+  )
+}
+
+FlowableModdleExtension.$inject = ["eventBus"]
+
+FlowableModdleExtension.prototype.canCloneProperty = function (newElement, propDescriptor) {
+  if (isAllowed("flowable:FailedJobRetryTimeCycle", propDescriptor, newElement)) {
+    return (
+      includesType(newElement.eventDefinitions, "bpmn:TimerEventDefinition") ||
+      includesType(newElement.eventDefinitions, "bpmn:SignalEventDefinition") ||
+      is(newElement.loopCharacteristics, "bpmn:MultiInstanceLoopCharacteristics")
+    )
+  }
+
+  if (isAllowed("flowable:Connector", propDescriptor, newElement)) {
+    return includesType(newElement.eventDefinitions, "bpmn:MessageEventDefinition")
+  }
+
+  if (isAllowed("flowable:Field", propDescriptor, newElement)) {
+    return includesType(newElement.eventDefinitions, "bpmn:MessageEventDefinition")
+  }
+}
+
+// module.exports = FlowableModdleExtension;
+export default FlowableModdleExtension

yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/designer/plugins/extension-moddle/flowable/index.js

@@ -0,0 +1,10 @@
+/*
+ * @author igdianov
+ * address https://github.com/igdianov/activiti-bpmn-moddle
+ * */
+import flowableExtension from "./flowableExtension"
+
+export default {
+  __init__: ["FlowableModdleExtension"],
+  FlowableModdleExtension: ["type", flowableExtension]
+}

yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/designer/plugins/palette/CustomPalette.js

@@ -0,0 +1,157 @@
+import PaletteProvider from 'bpmn-js/lib/features/palette/PaletteProvider'
+import { assign } from "min-dash"
+
+export default function CustomPalette (palette, create, elementFactory, spaceTool, lassoTool, handTool, globalConnect, translate) {
+  PaletteProvider.call(this, palette, create, elementFactory, spaceTool, lassoTool, handTool, globalConnect, translate, 2000)
+}
+
+const F = function () { } // 核心，利用空对象作为中介；
+F.prototype = PaletteProvider.prototype // 核心，将父类的原型赋值给空对象F；
+
+// 利用中介函数重写原型链方法
+F.prototype.getPaletteEntries = function () {
+  const actions = {},
+    create = this._create,
+    elementFactory = this._elementFactory,
+    spaceTool = this._spaceTool,
+    lassoTool = this._lassoTool,
+    handTool = this._handTool,
+    globalConnect = this._globalConnect,
+    translate = this._translate
+
+  function createAction (type, group, className, title, options) {
+    function createListener (event) {
+      const shape = elementFactory.createShape(assign({ type: type }, options))
+
+      if (options) {
+        shape.businessObject.di.isExpanded = options.isExpanded
+      }
+
+      create.start(event, shape)
+    }
+
+    const shortType = type.replace(/^bpmn:/, '')
+
+    return {
+      group: group,
+      className: className,
+      title: title || translate("Create {type}", { type: shortType }),
+      action: {
+        dragstart: createListener,
+        click: createListener
+      }
+    }
+  }
+
+  function createSubprocess (event) {
+    const subProcess = elementFactory.createShape({
+      type: 'bpmn:SubProcess',
+      x: 0,
+      y: 0,
+      isExpanded: true
+    })
+
+    const startEvent = elementFactory.createShape({
+      type: 'bpmn:StartEvent',
+      x: 40,
+      y: 82,
+      parent: subProcess
+    })
+
+    create.start(event, [subProcess, startEvent], {
+      hints: {
+        autoSelect: [startEvent]
+      }
+    })
+  }
+
+  function createParticipant (event) {
+    create.start(event, elementFactory.createParticipantShape())
+  }
+
+  assign(actions, {
+    "hand-tool": {
+      group: "tools",
+      className: "bpmn-icon-hand-tool",
+      title: '激活抓手工具',
+      // title: translate("Activate the hand tool"),
+      action: {
+        click: function (event) {
+          handTool.activateHand(event)
+        }
+      }
+    },
+    "lasso-tool": {
+      group: "tools",
+      className: "bpmn-icon-lasso-tool",
+      title: translate("Activate the lasso tool"),
+      action: {
+        click: function (event) {
+          lassoTool.activateSelection(event)
+        }
+      }
+    },
+    "space-tool": {
+      group: "tools",
+      className: "bpmn-icon-space-tool",
+      title: translate("Activate the create/remove space tool"),
+      action: {
+        click: function (event) {
+          spaceTool.activateSelection(event)
+        }
+      }
+    },
+    "global-connect-tool": {
+      group: "tools",
+      className: "bpmn-icon-connection-multi",
+      title: translate("Activate the global connect tool"),
+      action: {
+        click: function (event) {
+          globalConnect.toggle(event)
+        }
+      }
+    },
+    "tool-separator": {
+      group: "tools",
+      separator: true
+    },
+    "create.start-event": createAction("bpmn:StartEvent", "event", "bpmn-icon-start-event-none", translate("Create StartEvent")),
+    "create.intermediate-event": createAction(
+      "bpmn:IntermediateThrowEvent",
+      "event",
+      "bpmn-icon-intermediate-event-none",
+      translate("Create Intermediate/Boundary Event")
+    ),
+    "create.end-event": createAction("bpmn:EndEvent", "event", "bpmn-icon-end-event-none", translate("Create EndEvent")),
+    "create.exclusive-gateway": createAction("bpmn:ExclusiveGateway", "gateway", "bpmn-icon-gateway-none", translate("Create Gateway")),
+    "create.user-task": createAction("bpmn:UserTask", "activity", "bpmn-icon-user-task", translate("Create User Task")),
+    "create.data-object": createAction("bpmn:DataObjectReference", "data-object", "bpmn-icon-data-object", translate("Create DataObjectReference")),
+    "create.data-store": createAction("bpmn:DataStoreReference", "data-store", "bpmn-icon-data-store", translate("Create DataStoreReference")),
+    "create.subprocess-expanded": {
+      group: "activity",
+      className: "bpmn-icon-subprocess-expanded",
+      title: translate("Create expanded SubProcess"),
+      action: {
+        dragstart: createSubprocess,
+        click: createSubprocess
+      }
+    },
+    "create.participant-expanded": {
+      group: "collaboration",
+      className: "bpmn-icon-participant",
+      title: translate("Create Pool/Participant"),
+      action: {
+        dragstart: createParticipant,
+        click: createParticipant
+      }
+    },
+    "create.group": createAction("bpmn:Group", "artifact", "bpmn-icon-group", translate("Create Group"))
+  })
+
+  return actions
+}
+
+CustomPalette.$inject = ["palette", "create", "elementFactory", "spaceTool", "lassoTool", "handTool", "globalConnect", "translate"]
+
+CustomPalette.prototype = new F() // 核心，将 F的实例赋值给子类；
+CustomPalette.prototype.constructor = CustomPalette // 修复子类CustomPalette的构造器指向，防止原型链的混乱；

yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/designer/plugins/palette/index.js

@@ -0,0 +1,22 @@
+// import PaletteModule from "diagram-js/lib/features/palette";
+// import CreateModule from "diagram-js/lib/features/create";
+// import SpaceToolModule from "diagram-js/lib/features/space-tool";
+// import LassoToolModule from "diagram-js/lib/features/lasso-tool";
+// import HandToolModule from "diagram-js/lib/features/hand-tool";
+// import GlobalConnectModule from "diagram-js/lib/features/global-connect";
+// import translate from "diagram-js/lib/i18n/translate";
+//
+// import PaletteProvider from "./paletteProvider";
+//
+// export default {
+//   __depends__: [PaletteModule, CreateModule, SpaceToolModule, LassoToolModule, HandToolModule, GlobalConnectModule, translate],
+//   __init__: ["paletteProvider"],
+//   paletteProvider: ["type", PaletteProvider]
+// };
+
+import CustomPalette from "./CustomPalette";
+
+export default {
+  __init__: ["paletteProvider"],
+  paletteProvider: ["type", CustomPalette]
+};

yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/designer/plugins/palette/paletteProvider.js

@@ -0,0 +1,160 @@
+import { assign } from "min-dash"
+
+/**
+ * A palette provider for BPMN 2.0 elements.
+ */
+export default function PaletteProvider (palette, create, elementFactory, spaceTool, lassoTool, handTool, globalConnect, translate) {
+  this._palette = palette
+  this._create = create
+  this._elementFactory = elementFactory
+  this._spaceTool = spaceTool
+  this._lassoTool = lassoTool
+  this._handTool = handTool
+  this._globalConnect = globalConnect
+  this._translate = translate
+
+  palette.registerProvider(this)
+}
+
+PaletteProvider.$inject = ["palette", "create", "elementFactory", "spaceTool", "lassoTool", "handTool", "globalConnect", "translate"]
+
+PaletteProvider.prototype.getPaletteEntries = function () {
+  const actions = {},
+    create = this._create,
+    elementFactory = this._elementFactory,
+    spaceTool = this._spaceTool,
+    lassoTool = this._lassoTool,
+    handTool = this._handTool,
+    globalConnect = this._globalConnect,
+    translate = this._translate
+
+  function createAction (type, group, className, title, options) {
+    function createListener (event) {
+      const shape = elementFactory.createShape(assign({ type: type }, options))
+
+      if (options) {
+        shape.businessObject.di.isExpanded = options.isExpanded
+      }
+
+      create.start(event, shape)
+    }
+
+    const shortType = type.replace(/^bpmn:/, '')
+
+    return {
+      group: group,
+      className: className,
+      title: title || translate("Create {type}", { type: shortType }),
+      action: {
+        dragstart: createListener,
+        click: createListener
+      }
+    }
+  }
+
+  function createSubprocess (event) {
+    const subProcess = elementFactory.createShape({
+      type: 'bpmn:SubProcess',
+      x: 0,
+      y: 0,
+      isExpanded: true
+    })
+
+    const startEvent = elementFactory.createShape({
+      type: 'bpmn:StartEvent',
+      x: 40,
+      y: 82,
+      parent: subProcess
+    })
+
+    create.start(event, [subProcess, startEvent], {
+      hints: {
+        autoSelect: [startEvent]
+      }
+    })
+  }
+
+  function createParticipant (event) {
+    create.start(event, elementFactory.createParticipantShape())
+  }
+
+  assign(actions, {
+    "hand-tool": {
+      group: "tools",
+      className: "bpmn-icon-hand-tool",
+      title: translate("Activate the hand tool"),
+      action: {
+        click: function (event) {
+          handTool.activateHand(event)
+        }
+      }
+    },
+    "lasso-tool": {
+      group: "tools",
+      className: "bpmn-icon-lasso-tool",
+      title: translate("Activate the lasso tool"),
+      action: {
+        click: function (event) {
+          lassoTool.activateSelection(event)
+        }
+      }
+    },
+    "space-tool": {
+      group: "tools",
+      className: "bpmn-icon-space-tool",
+      title: translate("Activate the create/remove space tool"),
+      action: {
+        click: function (event) {
+          spaceTool.activateSelection(event)
+        }
+      }
+    },
+    "global-connect-tool": {
+      group: "tools",
+      className: "bpmn-icon-connection-multi",
+      title: translate("Activate the global connect tool"),
+      action: {
+        click: function (event) {
+          globalConnect.toggle(event)
+        }
+      }
+    },
+    "tool-separator": {
+      group: "tools",
+      separator: true
+    },
+    "create.start-event": createAction("bpmn:StartEvent", "event", "bpmn-icon-start-event-none", translate("Create StartEvent")),
+    "create.intermediate-event": createAction(
+      "bpmn:IntermediateThrowEvent",
+      "event",
+      "bpmn-icon-intermediate-event-none",
+      translate("Create Intermediate/Boundary Event")
+    ),
+    "create.end-event": createAction("bpmn:EndEvent", "event", "bpmn-icon-end-event-none", translate("Create EndEvent")),
+    "create.exclusive-gateway": createAction("bpmn:ExclusiveGateway", "gateway", "bpmn-icon-gateway-none", translate("Create Gateway")),
+    "create.user-task": createAction("bpmn:UserTask", "activity", "bpmn-icon-user-task", translate("Create User Task")),
+    "create.data-object": createAction("bpmn:DataObjectReference", "data-object", "bpmn-icon-data-object", translate("Create DataObjectReference")),
+    "create.data-store": createAction("bpmn:DataStoreReference", "data-store", "bpmn-icon-data-store", translate("Create DataStoreReference")),
+    "create.subprocess-expanded": {
+      group: "activity",
+      className: "bpmn-icon-subprocess-expanded",
+      title: translate("Create expanded SubProcess"),
+      action: {
+        dragstart: createSubprocess,
+        click: createSubprocess
+      }
+    },
+    "create.participant-expanded": {
+      group: "collaboration",
+      className: "bpmn-icon-participant",
+      title: translate("Create Pool/Participant"),
+      action: {
+        dragstart: createParticipant,
+        click: createParticipant
+      }
+    },
+    "create.group": createAction("bpmn:Group", "artifact", "bpmn-icon-group", translate("Create Group"))
+  })
+
+  return actions
+}

yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/designer/plugins/translate/customTranslate.js

@@ -0,0 +1,41 @@
+// import translations from "./zh";
+//
+// export default function customTranslate(template, replacements) {
+//   replacements = replacements || {};
+//
+//   // Translate
+//   template = translations[template] || template;
+//
+//   // Replace
+//   return template.replace(/{([^}]+)}/g, function(_, key) {
+//     let str = replacements[key];
+//     if (
+//       translations[replacements[key]] !== null &&
+//       translations[replacements[key]] !== "undefined"
+//     ) {
+//       // eslint-disable-next-line no-mixed-spaces-and-tabs
+//       str = translations[replacements[key]];
+//       // eslint-disable-next-line no-mixed-spaces-and-tabs
+//     }
+//     return str || "{" + key + "}";
+//   });
+// }
+
+export default function customTranslate(translations) {
+  return function(template, replacements) {
+    replacements = replacements || {};
+    // Translate
+    template = translations[template] || template;
+
+    // Replace
+    return template.replace(/{([^}]+)}/g, function(_, key) {
+      let str = replacements[key];
+      if (translations[replacements[key]] !== null && translations[replacements[key]] !== undefined) {
+        // eslint-disable-next-line no-mixed-spaces-and-tabs
+        str = translations[replacements[key]];
+        // eslint-disable-next-line no-mixed-spaces-and-tabs
+      }
+      return str || "{" + key + "}";
+    });
+  };
+}

yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/designer/plugins/translate/zh.js

@@ -0,0 +1,238 @@
+/**
+ * This is a sample file that should be replaced with the actual translation.
+ *
+ * Checkout https://github.com/bpmn-io/bpmn-js-i18n for a list of available
+ * translations and labels to translate.
+ */
+export default {
+  // 添加部分
+  "Append EndEvent": "追加结束事件",
+  "Append Gateway": "追加网关",
+  "Append Task": "追加任务",
+  "Append Intermediate/Boundary Event": "追加中间抛出事件/边界事件",
+
+  "Activate the global connect tool": "激活全局连接工具",
+  "Append {type}": "添加 {type}",
+  "Add Lane above": "在上面添加道",
+  "Divide into two Lanes": "分割成两个道",
+  "Divide into three Lanes": "分割成三个道",
+  "Add Lane below": "在下面添加道",
+  "Append compensation activity": "追加补偿活动",
+  "Change type": "修改类型",
+  "Connect using Association": "使用关联连接",
+  "Connect using Sequence/MessageFlow or Association": "使用顺序/消息流或者关联连接",
+  "Connect using DataInputAssociation": "使用数据输入关联连接",
+  Remove: "移除",
+  "Activate the hand tool": "激活抓手工具",
+  "Activate the lasso tool": "激活套索工具",
+  "Activate the create/remove space tool": "激活创建/删除空间工具",
+  "Create expanded SubProcess": "创建扩展子过程",
+  "Create IntermediateThrowEvent/BoundaryEvent": "创建中间抛出事件/边界事件",
+  "Create Pool/Participant": "创建池/参与者",
+  "Parallel Multi Instance": "并行多重事件",
+  "Sequential Multi Instance": "时序多重事件",
+  DataObjectReference: "数据对象参考",
+  DataStoreReference: "数据存储参考",
+  Loop: "循环",
+  "Ad-hoc": "即席",
+  "Create {type}": "创建 {type}",
+  Task: "任务",
+  "Send Task": "发送任务",
+  "Receive Task": "接收任务",
+  "User Task": "用户任务",
+  "Manual Task": "手工任务",
+  "Business Rule Task": "业务规则任务",
+  "Service Task": "服务任务",
+  "Script Task": "脚本任务",
+  "Call Activity": "调用活动",
+  "Sub Process (collapsed)": "子流程（折叠的）",
+  "Sub Process (expanded)": "子流程（展开的）",
+  "Start Event": "开始事件",
+  StartEvent: "开始事件",
+  "Intermediate Throw Event": "中间事件",
+  "End Event": "结束事件",
+  EndEvent: "结束事件",
+  "Create StartEvent": "创建开始事件",
+  "Create EndEvent": "创建结束事件",
+  "Create Task": "创建任务",
+  "Create User Task": "创建用户任务",
+  "Create Gateway": "创建网关",
+  "Create DataObjectReference": "创建数据对象",
+  "Create DataStoreReference": "创建数据存储",
+  "Create Group": "创建分组",
+  "Create Intermediate/Boundary Event": "创建中间/边界事件",
+  "Message Start Event": "消息开始事件",
+  "Timer Start Event": "定时开始事件",
+  "Conditional Start Event": "条件开始事件",
+  "Signal Start Event": "信号开始事件",
+  "Error Start Event": "错误开始事件",
+  "Escalation Start Event": "升级开始事件",
+  "Compensation Start Event": "补偿开始事件",
+  "Message Start Event (non-interrupting)": "消息开始事件（非中断）",
+  "Timer Start Event (non-interrupting)": "定时开始事件（非中断）",
+  "Conditional Start Event (non-interrupting)": "条件开始事件（非中断）",
+  "Signal Start Event (non-interrupting)": "信号开始事件（非中断）",
+  "Escalation Start Event (non-interrupting)": "升级开始事件（非中断）",
+  "Message Intermediate Catch Event": "消息中间捕获事件",
+  "Message Intermediate Throw Event": "消息中间抛出事件",
+  "Timer Intermediate Catch Event": "定时中间捕获事件",
+  "Escalation Intermediate Throw Event": "升级中间抛出事件",
+  "Conditional Intermediate Catch Event": "条件中间捕获事件",
+  "Link Intermediate Catch Event": "链接中间捕获事件",
+  "Link Intermediate Throw Event": "链接中间抛出事件",
+  "Compensation Intermediate Throw Event": "补偿中间抛出事件",
+  "Signal Intermediate Catch Event": "信号中间捕获事件",
+  "Signal Intermediate Throw Event": "信号中间抛出事件",
+  "Message End Event": "消息结束事件",
+  "Escalation End Event": "定时结束事件",
+  "Error End Event": "错误结束事件",
+  "Cancel End Event": "取消结束事件",
+  "Compensation End Event": "补偿结束事件",
+  "Signal End Event": "信号结束事件",
+  "Terminate End Event": "终止结束事件",
+  "Message Boundary Event": "消息边界事件",
+  "Message Boundary Event (non-interrupting)": "消息边界事件（非中断）",
+  "Timer Boundary Event": "定时边界事件",
+  "Timer Boundary Event (non-interrupting)": "定时边界事件（非中断）",
+  "Escalation Boundary Event": "升级边界事件",
+  "Escalation Boundary Event (non-interrupting)": "升级边界事件（非中断）",
+  "Conditional Boundary Event": "条件边界事件",
+  "Conditional Boundary Event (non-interrupting)": "条件边界事件（非中断）",
+  "Error Boundary Event": "错误边界事件",
+  "Cancel Boundary Event": "取消边界事件",
+  "Signal Boundary Event": "信号边界事件",
+  "Signal Boundary Event (non-interrupting)": "信号边界事件（非中断）",
+  "Compensation Boundary Event": "补偿边界事件",
+  "Exclusive Gateway": "互斥网关",
+  "Parallel Gateway": "并行网关",
+  "Inclusive Gateway": "相容网关",
+  "Complex Gateway": "复杂网关",
+  "Event based Gateway": "事件网关",
+  Transaction: "转运",
+  "Sub Process": "子流程",
+  "Event Sub Process": "事件子流程",
+  "Collapsed Pool": "折叠池",
+  "Expanded Pool": "展开池",
+
+  // Errors
+  "no parent for {element} in {parent}": "在{parent}里，{element}没有父类",
+  "no shape type specified": "没有指定的形状类型",
+  "flow elements must be children of pools/participants": "流元素必须是池/参与者的子类",
+  "out of bounds release": "out of bounds release",
+  "more than {count} child lanes": "子道大于{count} ",
+  "element required": "元素不能为空",
+  "diagram not part of bpmn:Definitions": "流程图不符合bpmn规范",
+  "no diagram to display": "没有可展示的流程图",
+  "no process or collaboration to display": "没有可展示的流程/协作",
+  "element {element} referenced by {referenced}#{property} not yet drawn": "由{referenced}#{property}引用的{element}元素仍未绘制",
+  "already rendered {element}": "{element} 已被渲染",
+  "failed to import {element}": "导入{element}失败",
+  //属性面板的参数
+  Id: "编号",
+  Name: "名称",
+  General: "常规",
+  Details: "详情",
+  "Message Name": "消息名称",
+  Message: "消息",
+  Initiator: "创建者",
+  "Asynchronous Continuations": "持续异步",
+  "Asynchronous Before": "异步前",
+  "Asynchronous After": "异步后",
+  "Job Configuration": "工作配置",
+  Exclusive: "排除",
+  "Job Priority": "工作优先级",
+  "Retry Time Cycle": "重试时间周期",
+  Documentation: "文档",
+  "Element Documentation": "元素文档",
+  "History Configuration": "历史配置",
+  "History Time To Live": "历史的生存时间",
+  Forms: "表单",
+  "Form Key": "表单key",
+  "Form Fields": "表单字段",
+  "Business Key": "业务key",
+  "Form Field": "表单字段",
+  ID: "编号",
+  Type: "类型",
+  Label: "名称",
+  "Default Value": "默认值",
+  "Default Flow": "默认流转路径",
+  "Conditional Flow": "条件流转路径",
+  "Sequence Flow": "普通流转路径",
+  Validation: "校验",
+  "Add Constraint": "添加约束",
+  Config: "配置",
+  Properties: "属性",
+  "Add Property": "添加属性",
+  Value: "值",
+  Listeners: "监听器",
+  "Execution Listener": "执行监听",
+  "Event Type": "事件类型",
+  "Listener Type": "监听器类型",
+  "Java Class": "Java类",
+  Expression: "表达式",
+  "Must provide a value": "必须提供一个值",
+  "Delegate Expression": "代理表达式",
+  Script: "脚本",
+  "Script Format": "脚本格式",
+  "Script Type": "脚本类型",
+  "Inline Script": "内联脚本",
+  "External Script": "外部脚本",
+  Resource: "资源",
+  "Field Injection": "字段注入",
+  Extensions: "扩展",
+  "Input/Output": "输入/输出",
+  "Input Parameters": "输入参数",
+  "Output Parameters": "输出参数",
+  Parameters: "参数",
+  "Output Parameter": "输出参数",
+  "Timer Definition Type": "定时器定义类型",
+  "Timer Definition": "定时器定义",
+  Date: "日期",
+  Duration: "持续",
+  Cycle: "循环",
+  Signal: "信号",
+  "Signal Name": "信号名称",
+  Escalation: "升级",
+  Error: "错误",
+  "Link Name": "链接名称",
+  Condition: "条件名称",
+  "Variable Name": "变量名称",
+  "Variable Event": "变量事件",
+  "Specify more than one variable change event as a comma separated list.": "多个变量事件以逗号隔开",
+  "Wait for Completion": "等待完成",
+  "Activity Ref": "活动参考",
+  "Version Tag": "版本标签",
+  Executable: "可执行文件",
+  "External Task Configuration": "扩展任务配置",
+  "Task Priority": "任务优先级",
+  External: "外部",
+  Connector: "连接器",
+  "Must configure Connector": "必须配置连接器",
+  "Connector Id": "连接器编号",
+  Implementation: "实现方式",
+  "Field Injections": "字段注入",
+  Fields: "字段",
+  "Result Variable": "结果变量",
+  Topic: "主题",
+  "Configure Connector": "配置连接器",
+  "Input Parameter": "输入参数",
+  Assignee: "代理人",
+  "Candidate Users": "候选用户",
+  "Candidate Groups": "候选组",
+  "Due Date": "到期时间",
+  "Follow Up Date": "跟踪日期",
+  Priority: "优先级",
+  "The follow up date as an EL expression (e.g. ${someDate} or an ISO date (e.g. 2015-06-26T09:54:00)":
+    "跟踪日期必须符合EL表达式，如： ${someDate} ,或者一个ISO标准日期，如：2015-06-26T09:54:00",
+  "The due date as an EL expression (e.g. ${someDate} or an ISO date (e.g. 2015-06-26T09:54:00)":
+    "跟踪日期必须符合EL表达式，如： ${someDate} ,或者一个ISO标准日期，如：2015-06-26T09:54:00",
+  Variables: "变量",
+  "Candidate Starter Configuration": "候选人起动器配置",
+  "Candidate Starter Groups": "候选人起动器组",
+  "This maps to the process definition key.": "这映射到流程定义键。",
+  "Candidate Starter Users": "候选人起动器的用户",
+  "Specify more than one user as a comma separated list.": "指定多个用户作为逗号分隔的列表。",
+  "Tasklist Configuration": "Tasklist配置",
+  Startable: "启动",
+  "Specify more than one group as a comma separated list.": "指定多个组作为逗号分隔的列表。"
+};

yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/index.ts

@@ -0,0 +1,37 @@
+import { App } from 'vue'
+import MyProcessDesigner from './designer'
+import MyProcessPenal from './penal'
+import MyProcessViewer from './designer/index2'
+
+const components = [MyProcessDesigner, MyProcessPenal, MyProcessViewer]
+
+// const install = function (Vue) {
+//   components.forEach(component => {
+//     Vue.component(component.name, component)
+//   })
+// }
+
+// if (typeof window !== "undefined" && window.Vue) {
+//   install(window.Vue)
+// }
+//   components.forEach(component => {
+//     Vue.component(component.name, component)
+//   })
+const componentss = {
+  install: (Vue: App): void => {
+    components.forEach((component) => {
+      Vue.component(component.name, component)
+    })
+  }
+}
+// let version = "0.0.1"
+export const MyPD = (app) => {
+  // export default {
+  // app.use(version)
+  // app.use(install)
+  // app.use(MyProcessDesigner)
+  // app.use(MyProcessPenal)
+  // app.use(MyProcessViewer)
+  // app.use(components)
+  app.use(componentss)
+}

yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/palette/ProcessPalette.vue

@@ -0,0 +1,41 @@
+<template>
+  <div class="my-process-palette">
+    <div class="test-button" @click="addTask" @mousedown="addTask">测试任务</div>
+    <div class="test-container" id="palette-container">1</div>
+  </div>
+</template>
+
+<script setup lang="ts" name="MyProcessPalette">
+import { assign } from 'min-dash'
+
+const addTask = (event, options = {}) => {
+  const ElementFactory = window.bpmnInstances.elementFactory
+  const create = window.bpmnInstances.modeler.get('create')
+
+  console.log(ElementFactory, create)
+
+  const shape = ElementFactory.createShape(assign({ type: 'bpmn:UserTask' }, options))
+
+  if (options) {
+    shape.businessObject.di.isExpanded = options.isExpanded
+  }
+
+  console.log(event, 'event')
+  console.log(shape, 'shape')
+  create.start(event, shape)
+}
+</script>
+
+<style scoped lang="scss">
+.my-process-palette {
+  box-sizing: border-box;
+  padding: 80px 20px 20px 20px;
+  .test-button {
+    box-sizing: border-box;
+    padding: 8px 16px;
+    border-radius: 4px;
+    border: 1px solid rgba(24, 144, 255, 0.8);
+    cursor: pointer;
+  }
+}
+</style>

yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/penal/PropertiesPanel.vue

@@ -0,0 +1,204 @@
+<template>
+  <div class="process-panel__container" :style="{ width: `${width}px` }">
+    <el-collapse v-model="activeTab">
+      <el-collapse-item name="base">
+        <!-- class="panel-tab__title" -->
+        <template #title>
+          <Icon icon="ep:info-filled" />
+          常规</template
+        >
+        <ElementBaseInfo
+          :id-edit-disabled="idEditDisabled"
+          :business-object="elementBusinessObject"
+          :type="elementType"
+          :model="model"
+        />
+      </el-collapse-item>
+      <el-collapse-item name="condition" v-if="elementType === 'Process'" key="message">
+        <template #title><Icon icon="ep:comment" />消息与信号</template>
+        <signal-and-massage />
+      </el-collapse-item>
+      <el-collapse-item name="condition" v-if="conditionFormVisible" key="condition">
+        <template #title><Icon icon="ep:promotion" />流转条件</template>
+        <flow-condition :business-object="elementBusinessObject" :type="elementType" />
+      </el-collapse-item>
+      <el-collapse-item name="condition" v-if="formVisible" key="form">
+        <template #title><Icon icon="ep:list" />表单</template>
+        <!-- <element-form :id="elementId" :type="elementType" /> -->
+        友情提示：使用
+        <router-link :to="{ path: '/bpm/manager/form' }"
+          ><el-link type="danger">流程表单</el-link>
+        </router-link>
+        替代，提供更好的表单设计功能
+      </el-collapse-item>
+      <el-collapse-item name="task" v-if="elementType.indexOf('Task') !== -1" key="task">
+        <template #title><Icon icon="ep:checked" />任务</template>
+        <element-task :id="elementId" :type="elementType" />
+      </el-collapse-item>
+      <el-collapse-item
+        name="multiInstance"
+        v-if="elementType.indexOf('Task') !== -1"
+        key="multiInstance"
+      >
+        <template #title><Icon icon="ep:help-filled" />多实例</template>
+        <element-multi-instance :business-object="elementBusinessObject" :type="elementType" />
+      </el-collapse-item>
+      <el-collapse-item name="listeners" key="listeners">
+        <template #title><Icon icon="ep:bell-filled" />执行监听器</template>
+        <element-listeners :id="elementId" :type="elementType" />
+      </el-collapse-item>
+      <el-collapse-item name="taskListeners" v-if="elementType === 'UserTask'" key="taskListeners">
+        <template #title><Icon icon="ep:bell-filled" />任务监听器</template>
+        <user-task-listeners :id="elementId" :type="elementType" />
+      </el-collapse-item>
+      <el-collapse-item name="extensions" key="extensions">
+        <template #title><Icon icon="ep:circle-plus-filled" />扩展属性</template>
+        <element-properties :id="elementId" :type="elementType" />
+      </el-collapse-item>
+      <el-collapse-item name="other" key="other">
+        <template #title><Icon icon="ep:promotion" />其他</template>
+        <element-other-config :id="elementId" />
+      </el-collapse-item>
+    </el-collapse>
+  </div>
+</template>
+<script setup lang="ts" name="MyPropertiesPanel">
+import ElementBaseInfo from './base/ElementBaseInfo.vue'
+import ElementOtherConfig from './other/ElementOtherConfig.vue'
+import ElementTask from './task/ElementTask.vue'
+import ElementMultiInstance from './multi-instance/ElementMultiInstance.vue'
+import FlowCondition from './flow-condition/FlowCondition.vue'
+import SignalAndMassage from './signal-message/SignalAndMessage.vue'
+import ElementListeners from './listeners/ElementListeners.vue'
+import ElementProperties from './properties/ElementProperties.vue'
+// import ElementForm from './form/ElementForm.vue'
+import UserTaskListeners from './listeners/UserTaskListeners.vue'
+import { provide, ref, watch, onBeforeUnmount, onMounted } from 'vue'
+import { ElCollapse, ElCollapseItem, ElLink } from 'element-plus'
+/**
+ * 侧边栏
+ * @Author MiyueFE
+ * @Home https://github.com/miyuesc
+ * @Date 2021年3月31日18:57:51
+ */
+const props = defineProps({
+  bpmnModeler: Object,
+  prefix: {
+    type: String,
+    default: 'camunda'
+  },
+  width: {
+    type: Number,
+    default: 480
+  },
+  idEditDisabled: {
+    type: Boolean,
+    default: false
+  },
+  model: Object // 流程模型的数据
+})
+
+const activeTab = ref('base')
+const elementId = ref('')
+const elementType = ref('')
+const elementBusinessObject = ref({}) // 元素 businessObject 镜像，提供给需要做判断的组件使用
+const conditionFormVisible = ref(false) // 流转条件设置
+const formVisible = ref(false) // 表单配置
+const bpmnElement = ref()
+const timer = ref()
+provide('prefix', props.prefix)
+provide('width', props.width)
+const initModels = () => {
+  // console.log(props, 'props')
+  // console.log(props.bpmnModeler, 'sakdjjaskdsajdkasdjkadsjk')
+  // 初始化 modeler 以及其他 moddle
+  // nextTick(() => {
+  if (!props.bpmnModeler) {
+    // 避免加载时 流程图 并未加载完成
+    timer.value = setTimeout(() => initModels(), 10)
+    return
+  }
+  if (timer.value) {
+    clearTimeout(timer.value)
+    window.bpmnInstances = {
+      modeler: props.bpmnModeler,
+      modeling: props.bpmnModeler.get('modeling'),
+      moddle: props.bpmnModeler.get('moddle'),
+      eventBus: props.bpmnModeler.get('eventBus'),
+      bpmnFactory: props.bpmnModeler.get('bpmnFactory'),
+      elementFactory: props.bpmnModeler.get('elementFactory'),
+      elementRegistry: props.bpmnModeler.get('elementRegistry'),
+      replace: props.bpmnModeler.get('replace'),
+      selection: props.bpmnModeler.get('selection')
+    }
+  }
+
+  console.log(window.bpmnInstances, 'window.bpmnInstances')
+  getActiveElement()
+  // })
+}
+const getActiveElement = () => {
+  // 初始第一个选中元素 bpmn:Process
+  initFormOnChanged(null)
+  props.bpmnModeler.on('import.done', (e) => {
+    console.log(e, 'eeeee')
+    initFormOnChanged(null)
+  })
+  // 监听选择事件，修改当前激活的元素以及表单
+  props.bpmnModeler.on('selection.changed', ({ newSelection }) => {
+    initFormOnChanged(newSelection[0] || null)
+  })
+  props.bpmnModeler.on('element.changed', ({ element }) => {
+    // 保证 修改 "默认流转路径" 类似需要修改多个元素的事件发生的时候，更新表单的元素与原选中元素不一致。
+    if (element && element.id === elementId.value) {
+      initFormOnChanged(element)
+    }
+  })
+}
+// 初始化数据
+const initFormOnChanged = (element) => {
+  let activatedElement = element
+  if (!activatedElement) {
+    activatedElement =
+      window.bpmnInstances.elementRegistry.find((el) => el.type === 'bpmn:Process') ??
+      window.bpmnInstances.elementRegistry.find((el) => el.type === 'bpmn:Collaboration')
+  }
+  if (!activatedElement) return
+  console.log(`
+              ----------
+      select element changed:
+                id:  ${activatedElement.id}
+              type:  ${activatedElement.businessObject.$type}
+              ----------
+              `)
+  console.log('businessObject: ', activatedElement.businessObject)
+  window.bpmnInstances.bpmnElement = activatedElement
+  bpmnElement.value = activatedElement
+  elementId.value = activatedElement.id
+  elementType.value = activatedElement.type.split(':')[1] || ''
+  elementBusinessObject.value = JSON.parse(JSON.stringify(activatedElement.businessObject))
+  conditionFormVisible.value = !!(
+    elementType.value === 'SequenceFlow' &&
+    activatedElement.source &&
+    activatedElement.source.type.indexOf('StartEvent') === -1
+  )
+  formVisible.value = elementType.value === 'UserTask' || elementType.value === 'StartEvent'
+}
+onMounted(() => {
+  setTimeout(() => {
+    initModels()
+  }, 100)
+})
+onBeforeUnmount(() => {
+  window.bpmnInstances = null
+  console.log(props, 'props1')
+  console.log(props.bpmnModeler, 'props.bpmnModeler1')
+})
+
+watch(
+  () => elementId.value,
+  () => {
+    activeTab.value = 'base'
+  }
+)
+</script>

yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/penal/base/ElementBaseInfo.vue

@@ -0,0 +1,162 @@
+<template>
+  <div class="panel-tab__content">
+    <el-form label-width="90px" :model="needProps" :rules="rules">
+      <div v-if="elementBaseInfo == 'bpmn:Process'">
+        <!-- 如果是 Process 信息的时候，使用自定义表单 -->
+        <el-link
+          href="https://doc.iocoder.cn/bpm/#_3-%E6%B5%81%E7%A8%8B%E5%9B%BE%E7%A4%BA%E4%BE%8B"
+          type="danger"
+          target="_blank"
+          >如何实现实现会签、或签？</el-link
+        >
+        <el-form-item label="流程标识" prop="key">
+          <el-input
+            v-model="needProps.key"
+            placeholder="请输入流标标识"
+            :disabled="needProps.id !== undefined && needProps.id.length > 0"
+            @change="handleKeyUpdate"
+          />
+        </el-form-item>
+        <el-form-item label="流程名称" prop="name">
+          <el-input
+            v-model="needProps.name"
+            placeholder="请输入流程名称"
+            clearable
+            @change="handleNameUpdate"
+          />
+        </el-form-item>
+      </div>
+      <div v-else>
+        <el-form-item label="ID">
+          <el-input v-model="elementBaseInfo.id" clearable @change="updateBaseInfo('id')" />
+        </el-form-item>
+        <el-form-item label="名称">
+          <el-input v-model="elementBaseInfo.name" clearable @change="updateBaseInfo('name')" />
+        </el-form-item>
+      </div>
+    </el-form>
+  </div>
+</template>
+<script setup lang="ts" name="ElementBaseInfo">
+import { ref, reactive, watch, nextTick, onMounted, onBeforeUnmount } from 'vue'
+import { ElLink, ElForm, ElFormItem, ElInput } from 'element-plus'
+const props = defineProps({
+  businessObject: Object,
+  model: Object // 流程模型的数据
+})
+const needProps = ref()
+const bpmnElement = ref()
+const elementBaseInfo = ref({})
+// 流程表单的下拉框的数据
+// const forms = ref([])
+// 流程模型的校验
+const rules = reactive({
+  key: [{ required: true, message: '流程标识不能为空', trigger: 'blur' }],
+  name: [{ required: true, message: '流程名称不能为空', trigger: 'blur' }]
+})
+
+const resetBaseInfo = () => {
+  console.log(window, 'window')
+  console.log(bpmnElement, 'bpmnElement')
+
+  bpmnElement.value = window?.bpmnInstances?.bpmnElement
+  console.log(bpmnElement.value, 'resetBaseInfo')
+  elementBaseInfo.value = bpmnElement.value.businessObject
+  // elementBaseInfo.value = JSON.parse(JSON.stringify(bpmnElement.value.businessObject))
+  console.log(elementBaseInfo.value, 'elementBaseInfo')
+}
+const handleKeyUpdate = (value) => {
+  // 校验 value 的值，只有 XML NCName 通过的情况下，才进行赋值。否则，会导致流程图报错，无法绘制的问题
+  if (!value) {
+    return
+  }
+  if (!value.match(/[a-zA-Z_][\-_.0-9a-zA-Z$]*/)) {
+    console.log('key 不满足 XML NCName 规则，所以不进行赋值')
+    return
+  }
+  console.log('key 满足 XML NCName 规则，所以进行赋值')
+
+  // 在 BPMN 的 XML 中，流程标识 key，其实对应的是 id 节点
+  elementBaseInfo.value['id'] = value
+  updateBaseInfo('id')
+}
+const handleNameUpdate = (value) => {
+  console.log(elementBaseInfo, 'elementBaseInfo')
+  if (!value) {
+    return
+  }
+  elementBaseInfo.value['name'] = value
+  updateBaseInfo('name')
+}
+// const handleDescriptionUpdate=(value)=> {
+// TODO 芋艿：documentation 暂时无法修改，后续在看看
+// this.elementBaseInfo['documentation'] = value;
+// this.updateBaseInfo('documentation');
+// }
+const updateBaseInfo = (key) => {
+  console.log(key, 'key')
+  // 触发 elementBaseInfo 对应的字段
+  const attrObj = Object.create(null)
+  // console.log(attrObj, 'attrObj')
+  attrObj[key] = elementBaseInfo.value[key]
+  // console.log(attrObj, 'attrObj111')
+  // const attrObj = {
+  //   id: elementBaseInfo.value[key]
+  //   // di: { id: `${elementBaseInfo.value[key]}_di` }
+  // }
+
+  if (key === 'id') {
+    console.log('jinru')
+    window.bpmnInstances.modeling.updateProperties(bpmnElement.value, {
+      id: elementBaseInfo.value[key],
+      di: { id: `${elementBaseInfo.value[key]}_di` }
+    })
+  } else {
+    console.log(attrObj, 'attrObj')
+    window.bpmnInstances.modeling.updateProperties(bpmnElement.value, attrObj)
+  }
+}
+onMounted(() => {
+  // 针对上传的 bpmn 流程图时，需要延迟 1 秒的时间，保证 key 和 name 的更新
+  setTimeout(() => {
+    console.log(props.model, 'props.model')
+    handleKeyUpdate(props.model.key)
+    handleNameUpdate(props.model.name)
+    console.log(props, 'propsssssssssssssssssssss')
+  }, 1000)
+})
+
+watch(
+  () => props.businessObject,
+  (val) => {
+    console.log(val, 'val11111111111111111111')
+    if (val) {
+      nextTick(() => {
+        resetBaseInfo()
+      })
+    }
+  }
+)
+// watch(
+//   () => ({ ...props }),
+//   (oldVal, newVal) => {
+//     console.log(oldVal, 'oldVal')
+//     console.log(newVal, 'newVal')
+//     if (newVal) {
+//       needProps.value = newVal
+//     }
+//   },
+//   {
+//     immediate: true
+//   }
+// )
+// 'model.key': {
+//   immediate: false,
+//   handler: function (val) {
+//     this.handleKeyUpdate(val)
+//   }
+// }
+onBeforeUnmount(() => {
+  bpmnElement.value = null
+})
+</script>

yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/penal/flow-condition/FlowCondition.vue

@@ -0,0 +1,188 @@
+<template>
+  <div class="panel-tab__content">
+    <el-form :model="flowConditionForm" label-width="90px" size="mini">
+      <el-form-item label="流转类型">
+        <el-select v-model="flowConditionForm.type" @change="updateFlowType">
+          <el-option label="普通流转路径" value="normal" />
+          <el-option label="默认流转路径" value="default" />
+          <el-option label="条件流转路径" value="condition" />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="条件格式" v-if="flowConditionForm.type === 'condition'" key="condition">
+        <el-select v-model="flowConditionForm.conditionType">
+          <el-option label="表达式" value="expression" />
+          <el-option label="脚本" value="script" />
+        </el-select>
+      </el-form-item>
+      <el-form-item
+        label="表达式"
+        v-if="flowConditionForm.conditionType && flowConditionForm.conditionType === 'expression'"
+        key="express"
+      >
+        <el-input
+          v-model="flowConditionForm.body"
+          style="width: 192px"
+          clearable
+          @change="updateFlowCondition"
+        />
+      </el-form-item>
+      <template
+        v-if="flowConditionForm.conditionType && flowConditionForm.conditionType === 'script'"
+      >
+        <el-form-item label="脚本语言" key="language">
+          <el-input v-model="flowConditionForm.language" clearable @change="updateFlowCondition" />
+        </el-form-item>
+        <el-form-item label="脚本类型" key="scriptType">
+          <el-select v-model="flowConditionForm.scriptType">
+            <el-option label="内联脚本" value="inlineScript" />
+            <el-option label="外部脚本" value="externalScript" />
+          </el-select>
+        </el-form-item>
+        <el-form-item
+          label="脚本"
+          v-if="flowConditionForm.scriptType === 'inlineScript'"
+          key="body"
+        >
+          <el-input
+            v-model="flowConditionForm.body"
+            type="textarea"
+            clearable
+            @change="updateFlowCondition"
+          />
+        </el-form-item>
+        <el-form-item
+          label="资源地址"
+          v-if="flowConditionForm.scriptType === 'externalScript'"
+          key="resource"
+        >
+          <el-input v-model="flowConditionForm.resource" clearable @change="updateFlowCondition" />
+        </el-form-item>
+      </template>
+    </el-form>
+  </div>
+</template>
+
+<script setup lang="ts" name="FlowCondition">
+import { ref, nextTick, watch, onBeforeUnmount } from 'vue'
+import { ElSelect, ElForm, ElFormItem, ElInput, ElOption } from 'element-plus'
+
+const props = defineProps({
+  businessObject: Object,
+  type: String
+})
+const flowConditionForm = ref({})
+const bpmnElement = ref()
+const bpmnElementSource = ref()
+const bpmnElementSourceRef = ref()
+const flowConditionRef = ref()
+const resetFlowCondition = () => {
+  bpmnElement.value = window.bpmnInstances.bpmnElement
+  bpmnElementSource.value = bpmnElement.value.source
+  bpmnElementSourceRef.value = bpmnElement.value.businessObject.sourceRef
+  if (
+    bpmnElementSourceRef.value &&
+    bpmnElementSourceRef.value.default &&
+    bpmnElementSourceRef.value.default.id === this.bpmnElement.id
+  ) {
+    // 默认
+    flowConditionForm.value = { type: 'default' }
+  } else if (!bpmnElement.value.businessObject.conditionExpression) {
+    // 普通
+    flowConditionForm.value = { type: 'normal' }
+  } else {
+    // 带条件
+    const conditionExpression = bpmnElement.value.businessObject.conditionExpression
+    flowConditionForm.value = { ...conditionExpression, type: 'condition' }
+    // resource 可直接标识 是否是外部资源脚本
+    if (flowConditionForm.value.resource) {
+      // this.$set(this.flowConditionForm, "conditionType", "script");
+      // this.$set(this.flowConditionForm, "scriptType", "externalScript");
+      flowConditionForm.value['conditionType'] = 'script'
+      flowConditionForm.value['scriptType'] = 'externalScript'
+      return
+    }
+    if (conditionExpression.language) {
+      // this.$set(this.flowConditionForm, "conditionType", "script");
+      // this.$set(this.flowConditionForm, "scriptType", "inlineScript");
+      flowConditionForm.value['conditionType'] = 'script'
+      flowConditionForm.value['scriptType'] = 'inlineScript'
+
+      return
+    }
+    // this.$set(this.flowConditionForm, "conditionType", "expression");
+    flowConditionForm.value['conditionType'] = 'expression'
+  }
+}
+const updateFlowType = (flowType) => {
+  // 正常条件类
+  if (flowType === 'condition') {
+    flowConditionRef.value = window.bpmnInstances.moddle.create('bpmn:FormalExpression')
+    window.bpmnInstances.modeling.updateProperties(bpmnElement.value, {
+      conditionExpression: flowConditionRef.value
+    })
+    return
+  }
+  // 默认路径
+  if (flowType === 'default') {
+    window.bpmnInstances.modeling.updateProperties(bpmnElement.value, {
+      conditionExpression: null
+    })
+    window.bpmnInstances.modeling.updateProperties(bpmnElementSource.value, {
+      default: bpmnElement.value
+    })
+    return
+  }
+  // 正常路径，如果来源节点的默认路径是当前连线时，清除父元素的默认路径配置
+  if (
+    bpmnElementSourceRef.value.default &&
+    bpmnElementSourceRef.value.default.id === bpmnElement.value.id
+  ) {
+    window.bpmnInstances.modeling.updateProperties(bpmnElementSource.value, {
+      default: null
+    })
+  }
+  window.bpmnInstances.modeling.updateProperties(bpmnElement.value, {
+    conditionExpression: null
+  })
+}
+const updateFlowCondition = () => {
+  let { conditionType, scriptType, body, resource, language } = flowConditionForm.value
+  let condition
+  if (conditionType === 'expression') {
+    condition = window.bpmnInstances.moddle.create('bpmn:FormalExpression', { body })
+  } else {
+    if (scriptType === 'inlineScript') {
+      condition = window.bpmnInstances.moddle.create('bpmn:FormalExpression', { body, language })
+      // this.$set(this.flowConditionForm, "resource", "");
+      flowConditionForm.value['resource'] = ''
+    } else {
+      // this.$set(this.flowConditionForm, "body", "");
+      flowConditionForm.value['body'] = ''
+      condition = window.bpmnInstances.moddle.create('bpmn:FormalExpression', {
+        resource,
+        language
+      })
+    }
+  }
+  window.bpmnInstances.modeling.updateProperties(bpmnElement.value, {
+    conditionExpression: condition
+  })
+}
+
+onBeforeUnmount(() => {
+  bpmnElement.value = null
+  bpmnElementSource.value = null
+  bpmnElementSourceRef.value = null
+})
+
+watch(
+  () => props.businessObject,
+  (val) => {
+    if (val) {
+      nextTick(() => {
+        resetFlowCondition()
+      })
+    }
+  }
+)
+</script>

yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/penal/form/ElementForm.vue

@@ -0,0 +1,456 @@
+<template>
+  <div class="panel-tab__content">
+    <el-form label-width="80px">
+      <el-form-item label="表单标识">
+        <el-input v-model="formKey" clearable @change="updateElementFormKey" />
+      </el-form-item>
+      <el-form-item label="业务标识">
+        <el-select v-model="businessKey" @change="updateElementBusinessKey">
+          <el-option v-for="i in fieldList" :key="i.id" :value="i.id" :label="i.label" />
+          <el-option label="无" value="" />
+        </el-select>
+      </el-form-item>
+    </el-form>
+
+    <!--字段列表-->
+    <div class="element-property list-property">
+      <el-divider><Icon icon="ep:coin" /> 表单字段</el-divider>
+      <el-table :data="fieldList" max-height="240" border fit>
+        <el-table-column label="序号" type="index" width="50px" />
+        <el-table-column label="字段名称" prop="label" min-width="80px" show-overflow-tooltip />
+        <el-table-column
+          label="字段类型"
+          prop="type"
+          min-width="80px"
+          :formatter="(row) => fieldType[row.type] || row.type"
+          show-overflow-tooltip
+        />
+        <el-table-column
+          label="默认值"
+          prop="defaultValue"
+          min-width="80px"
+          show-overflow-tooltip
+        />
+        <el-table-column label="操作" width="90px">
+          <template #default="scope">
+            <el-button type="text" @click="openFieldForm(scope, scope.$index)">编辑</el-button>
+            <el-divider direction="vertical" />
+            <el-button type="text" style="color: #ff4d4f" @click="removeField(scope, scope.$index)"
+              >移除</el-button
+            >
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+    <div class="element-drawer__button">
+      <XButton type="primary" proIcon="ep:plus" title="添加字段" @click="openFieldForm(null, -1)" />
+    </div>
+
+    <!--字段配置侧边栏-->
+    <el-drawer
+      v-model="fieldModelVisible"
+      title="字段配置"
+      :size="`${width}px`"
+      append-to-body
+      destroy-on-close
+    >
+      <el-form :model="formFieldForm" label-width="90px">
+        <el-form-item label="字段ID">
+          <el-input v-model="formFieldForm.id" clearable />
+        </el-form-item>
+        <el-form-item label="类型">
+          <el-select
+            v-model="formFieldForm.typeType"
+            placeholder="请选择字段类型"
+            clearable
+            @change="changeFieldTypeType"
+          >
+            <el-option v-for="(value, key) of fieldType" :label="value" :value="key" :key="key" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="类型名称" v-if="formFieldForm.typeType === 'custom'">
+          <el-input v-model="formFieldForm.type" clearable />
+        </el-form-item>
+        <el-form-item label="名称">
+          <el-input v-model="formFieldForm.label" clearable />
+        </el-form-item>
+        <el-form-item label="时间格式" v-if="formFieldForm.typeType === 'date'">
+          <el-input v-model="formFieldForm.datePattern" clearable />
+        </el-form-item>
+        <el-form-item label="默认值">
+          <el-input v-model="formFieldForm.defaultValue" clearable />
+        </el-form-item>
+      </el-form>
+
+      <!-- 枚举值设置 -->
+      <template v-if="formFieldForm.type === 'enum'">
+        <el-divider key="enum-divider" />
+        <p class="listener-filed__title" key="enum-title">
+          <span><Icon icon="ep:menu" />枚举值列表：</span>
+          <el-button type="primary" @click="openFieldOptionForm(null, -1, 'enum')"
+            >添加枚举值</el-button
+          >
+        </p>
+        <el-table :data="fieldEnumList" key="enum-table" max-height="240" border fit>
+          <el-table-column label="序号" width="50px" type="index" />
+          <el-table-column label="枚举值编号" prop="id" min-width="100px" show-overflow-tooltip />
+          <el-table-column label="枚举值名称" prop="name" min-width="100px" show-overflow-tooltip />
+          <el-table-column label="操作" width="90px">
+            <template #default="scope">
+              <el-button type="text" @click="openFieldOptionForm(scope, scope.$index, 'enum')"
+                >编辑</el-button
+              >
+              <el-divider direction="vertical" />
+              <el-button
+                type="text"
+                style="color: #ff4d4f"
+                @click="removeFieldOptionItem(scope, scope.$index, 'enum')"
+                >移除</el-button
+              >
+            </template>
+          </el-table-column>
+        </el-table>
+      </template>
+
+      <!-- 校验规则 -->
+      <el-divider key="validation-divider" />
+      <p class="listener-filed__title" key="validation-title">
+        <span><Icon icon="ep:menu" />约束条件列表：</span>
+        <el-button type="primary" @click="openFieldOptionForm(null, -1, 'constraint')"
+          >添加约束</el-button
+        >
+      </p>
+      <el-table :data="fieldConstraintsList" key="validation-table" max-height="240" border fit>
+        <el-table-column label="序号" width="50px" type="index" />
+        <el-table-column label="约束名称" prop="name" min-width="100px" show-overflow-tooltip />
+        <el-table-column label="约束配置" prop="config" min-width="100px" show-overflow-tooltip />
+        <el-table-column label="操作" width="90px">
+          <template #default="scope">
+            <el-button type="text" @click="openFieldOptionForm(scope, scope.$index, 'constraint')"
+              >编辑</el-button
+            >
+            <el-divider direction="vertical" />
+            <el-button
+              type="text"
+              style="color: #ff4d4f"
+              @click="removeFieldOptionItem(scope, scope.$index, 'constraint')"
+              >移除</el-button
+            >
+          </template>
+        </el-table-column>
+      </el-table>
+
+      <!-- 表单属性 -->
+      <el-divider key="property-divider" />
+      <p class="listener-filed__title" key="property-title">
+        <span><Icon icon="ep:menu" />字段属性列表：</span>
+        <el-button type="primary" @click="openFieldOptionForm(null, -1, 'property')"
+          >添加属性</el-button
+        >
+      </p>
+      <el-table :data="fieldPropertiesList" key="property-table" max-height="240" border fit>
+        <el-table-column label="序号" width="50px" type="index" />
+        <el-table-column label="属性编号" prop="id" min-width="100px" show-overflow-tooltip />
+        <el-table-column label="属性值" prop="value" min-width="100px" show-overflow-tooltip />
+        <el-table-column label="操作" width="90px">
+          <template #default="scope">
+            <el-button type="text" @click="openFieldOptionForm(scope, scope.$index, 'property')"
+              >编辑</el-button
+            >
+            <el-divider direction="vertical" />
+            <el-button
+              type="text"
+              style="color: #ff4d4f"
+              @click="removeFieldOptionItem(scope, scope.$index, 'property')"
+              >移除</el-button
+            >
+          </template>
+        </el-table-column>
+      </el-table>
+
+      <!-- 底部按钮 -->
+      <div class="element-drawer__button">
+        <el-button>取 消</el-button>
+        <el-button type="primary" @click="saveField">保 存</el-button>
+      </div>
+    </el-drawer>
+
+    <el-dialog
+      v-model="fieldOptionModelVisible"
+      :title="optionModelTitle"
+      width="600px"
+      append-to-body
+      destroy-on-close
+    >
+      <el-form :model="fieldOptionForm" label-width="96px">
+        <el-form-item label="编号/ID" v-if="fieldOptionType !== 'constraint'" key="option-id">
+          <el-input v-model="fieldOptionForm.id" clearable />
+        </el-form-item>
+        <el-form-item label="名称" v-if="fieldOptionType !== 'property'" key="option-name">
+          <el-input v-model="fieldOptionForm.name" clearable />
+        </el-form-item>
+        <el-form-item label="配置" v-if="fieldOptionType === 'constraint'" key="option-config">
+          <el-input v-model="fieldOptionForm.config" clearable />
+        </el-form-item>
+        <el-form-item label="值" v-if="fieldOptionType === 'property'" key="option-value">
+          <el-input v-model="fieldOptionForm.value" clearable />
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <el-button @click="fieldOptionModelVisible = false">取 消</el-button>
+        <el-button type="primary" @click="saveFieldOption">确 定</el-button>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<script setup lang="ts" name="ElementForm">
+import { ref, inject, watch, nextTick } from 'vue'
+import {
+  ElDialog,
+  ElForm,
+  ElFormItem,
+  ElSelect,
+  ElOption,
+  ElDivider,
+  ElTable,
+  ElTableColumn,
+  ElButton,
+  ElDrawer,
+  ElInput
+} from 'element-plus'
+const props = defineProps({
+  id: String,
+  type: String
+})
+const prefix = inject('prefix')
+const width = inject('width')
+
+const formKey = ref('')
+const businessKey = ref('')
+const optionModelTitle = ref('')
+const fieldList = ref([])
+const formFieldForm = ref({})
+const fieldType = ref({
+  long: '长整型',
+  string: '字符串',
+  boolean: '布尔类',
+  date: '日期类',
+  enum: '枚举类',
+  custom: '自定义类型'
+})
+const formFieldIndex = ref(-1) // 编辑中的字段， -1 为新增
+const formFieldOptionIndex = ref(-1) // 编辑中的字段配置项， -1 为新增
+const fieldModelVisible = ref(false)
+const fieldOptionModelVisible = ref(false)
+const fieldOptionForm = ref({}) // 当前激活的字段配置项数据
+const fieldOptionType = ref('') // 当前激活的字段配置项弹窗 类型
+const fieldEnumList = ref([]) // 枚举值列表
+const fieldConstraintsList = ref([]) // 约束条件列表
+const fieldPropertiesList = ref([]) // 绑定属性列表
+const bpmnELement = ref()
+const elExtensionElements = ref()
+const formData = ref()
+const otherExtensions = ref()
+
+const resetFormList = () => {
+  bpmnELement.value = window.bpmnInstances.bpmnElement
+  formKey.value = bpmnELement.value.businessObject.formKey
+  // 获取元素扩展属性 或者 创建扩展属性
+  elExtensionElements.value =
+    bpmnELement.value.businessObject.get('extensionElements') ||
+    window.bpmnInstances.moddle.create('bpmn:ExtensionElements', { values: [] })
+  // 获取元素表单配置 或者 创建新的表单配置
+  formData.value =
+    elExtensionElements.value.values.filter((ex) => ex.$type === `${prefix}:FormData`)?.[0] ||
+    window.bpmnInstances.moddle.create(`${prefix}:FormData`, { fields: [] })
+
+  // 业务标识 businessKey， 绑定在 formData 中
+  businessKey.value = formData.value.businessKey
+
+  // 保留剩余扩展元素，便于后面更新该元素对应属性
+  otherExtensions.value = elExtensionElements.value.values.filter(
+    (ex) => ex.$type !== `${prefix}:FormData`
+  )
+
+  // 复制原始值，填充表格
+  fieldList.value = JSON.parse(JSON.stringify(formData.value.fields || []))
+
+  // 更新元素扩展属性，避免后续报错
+  updateElementExtensions()
+}
+const updateElementFormKey = () => {
+  window.bpmnInstances.modeling.updateProperties(bpmnELement.value, { formKey: formKey.value })
+}
+const updateElementBusinessKey = () => {
+  window.bpmnInstances.modeling.updateModdleProperties(bpmnELement.value, formData.value, {
+    businessKey: businessKey.value
+  })
+}
+// 根据类型调整字段type
+const changeFieldTypeType = (type) => {
+  // this.$set(this.formFieldForm, "type", type === "custom" ? "" : type);
+  formFieldForm.value['type'] = type === 'custom' ? '' : type
+}
+
+// 打开字段详情侧边栏
+const openFieldForm = (field, index) => {
+  formFieldIndex.value = index
+  if (index !== -1) {
+    const FieldObject = formData.value.fields[index]
+    formFieldForm.value = JSON.parse(JSON.stringify(field))
+    // 设置自定义类型
+    // this.$set(this.formFieldForm, "typeType", !this.fieldType[field.type] ? "custom" : field.type);
+    formFieldForm.value['typeType'] = !fieldType.value[field.type] ? 'custom' : field.type
+    // 初始化枚举值列表
+    field.type === 'enum' &&
+      (fieldEnumList.value = JSON.parse(JSON.stringify(FieldObject?.values || [])))
+    // 初始化约束条件列表
+    fieldConstraintsList.value = JSON.parse(
+      JSON.stringify(FieldObject?.validation?.constraints || [])
+    )
+    // 初始化自定义属性列表
+    fieldPropertiesList.value = JSON.parse(JSON.stringify(FieldObject?.properties?.values || []))
+  } else {
+    formFieldForm.value = {}
+    // 初始化枚举值列表
+    fieldEnumList.value = []
+    // 初始化约束条件列表
+    fieldConstraintsList.value = []
+    // 初始化自定义属性列表
+    fieldPropertiesList.value = []
+  }
+  fieldModelVisible.value = true
+}
+// 打开字段 某个 配置项 弹窗
+const openFieldOptionForm = (option, index, type) => {
+  fieldOptionModelVisible.value = true
+  fieldOptionType.value = type
+  formFieldOptionIndex.value = index
+  if (type === 'property') {
+    fieldOptionForm.value = option ? JSON.parse(JSON.stringify(option)) : {}
+    return (optionModelTitle.value = '属性配置')
+  }
+  if (type === 'enum') {
+    fieldOptionForm.value = option ? JSON.parse(JSON.stringify(option)) : {}
+    return (optionModelTitle.value = '枚举值配置')
+  }
+  fieldOptionForm.value = option ? JSON.parse(JSON.stringify(option)) : {}
+  return (optionModelTitle.value = '约束条件配置')
+}
+
+// 保存字段 某个 配置项
+const saveFieldOption = () => {
+  if (formFieldOptionIndex.value === -1) {
+    if (fieldOptionType.value === 'property') {
+      fieldPropertiesList.value.push(fieldOptionForm.value)
+    }
+    if (fieldOptionType.value === 'constraint') {
+      fieldConstraintsList.value.push(fieldOptionForm.value)
+    }
+    if (fieldOptionType.value === 'enum') {
+      fieldEnumList.value.push(fieldOptionForm.value)
+    }
+  } else {
+    fieldOptionType.value === 'property' &&
+      fieldPropertiesList.value.splice(formFieldOptionIndex.value, 1, fieldOptionForm.value)
+    fieldOptionType.value === 'constraint' &&
+      fieldConstraintsList.value.splice(formFieldOptionIndex.value, 1, fieldOptionForm.value)
+    fieldOptionType.value === 'enum' &&
+      fieldEnumList.value.splice(formFieldOptionIndex.value, 1, fieldOptionForm.value)
+  }
+  fieldOptionModelVisible.value = false
+  fieldOptionForm.value = {}
+}
+// 保存字段配置
+const saveField = () => {
+  const { id, type, label, defaultValue, datePattern } = formFieldForm.value
+  const Field = window.bpmnInstances.moddle.create(`${prefix}:FormField`, { id, type, label })
+  defaultValue && (Field.defaultValue = defaultValue)
+  datePattern && (Field.datePattern = datePattern)
+  // 构建属性
+  if (fieldPropertiesList.value && fieldPropertiesList.value.length) {
+    const fieldPropertyList = fieldPropertiesList.value.map((fp) => {
+      return window.bpmnInstances.moddle.create(`${prefix}:Property`, {
+        id: fp.id,
+        value: fp.value
+      })
+    })
+    Field.properties = window.bpmnInstances.moddle.create(`${this.prefix}:Properties`, {
+      values: fieldPropertyList
+    })
+  }
+  // 构建校验规则
+  if (fieldConstraintsList.value && fieldConstraintsList.value.length) {
+    const fieldConstraintList = fieldConstraintsList.value.map((fc) => {
+      return window.bpmnInstances.moddle.create(`${prefix}:Constraint`, {
+        name: fc.name,
+        config: fc.config
+      })
+    })
+    Field.validation = window.bpmnInstances.moddle.create(`${prefix}:Validation`, {
+      constraints: fieldConstraintList
+    })
+  }
+  // 构建枚举值
+  if (fieldEnumList.value && fieldEnumList.value.length) {
+    Field.values = fieldEnumList.value.map((fe) => {
+      return window.bpmnInstances.moddle.create(`${prefix}:Value`, { name: fe.name, id: fe.id })
+    })
+  }
+  // 更新数组 与 表单配置实例
+  if (formFieldIndex.value === -1) {
+    fieldList.value.push(formFieldForm.value)
+    formData.value.fields.push(Field)
+  } else {
+    fieldList.value.splice(formFieldIndex.value, 1, formFieldForm.value)
+    formData.value.fields.splice(formFieldIndex.value, 1, Field)
+  }
+  updateElementExtensions()
+  fieldModelVisible.value = false
+}
+
+// 移除某个 字段的 配置项
+const removeFieldOptionItem = (option, index, type) => {
+  console.log(option, 'option')
+  if (type === 'property') {
+    fieldPropertiesList.value.splice(index, 1)
+    return
+  }
+  if (type === 'enum') {
+    fieldEnumList.value.splice(index, 1)
+    return
+  }
+  fieldConstraintsList.value.splice(index, 1)
+}
+// 移除 字段
+const removeField = (field, index) => {
+  console.log(field, 'field')
+  fieldList.value.splice(index, 1)
+  formData.value.fields.splice(index, 1)
+  updateElementExtensions()
+}
+
+const updateElementExtensions = () => {
+  // 更新回扩展元素
+  const newElExtensionElements = window.bpmnInstances.moddle.create(`bpmn:ExtensionElements`, {
+    values: otherExtensions.value.concat(formData.value)
+  })
+  // 更新到元素上
+  window.bpmnInstances.modeling.updateProperties(bpmnELement.value, {
+    extensionElements: newElExtensionElements
+  })
+}
+
+watch(
+  () => props.id,
+  (val) => {
+    val &&
+      val.length &&
+      nextTick(() => {
+        resetFormList()
+      })
+  },
+  { immediate: true }
+)
+</script>

yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/penal/index.js

@@ -0,0 +1,7 @@
+import MyPropertiesPanel from "./PropertiesPanel.vue";
+
+MyPropertiesPanel.install = function(Vue) {
+  Vue.component(MyPropertiesPanel.name, MyPropertiesPanel);
+};
+
+export default MyPropertiesPanel;

yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/penal/listeners/ElementListeners.vue

@@ -0,0 +1,415 @@
+<template>
+  <div class="panel-tab__content">
+    <el-table :data="elementListenersList" size="mini" border>
+      <el-table-column label="序号" width="50px" type="index" />
+      <el-table-column label="事件类型" min-width="100px" prop="event" />
+      <el-table-column
+        label="监听器类型"
+        min-width="100px"
+        show-overflow-tooltip
+        :formatter="(row) => listenerTypeObject[row.listenerType]"
+      />
+      <el-table-column label="操作" width="90px">
+        <template #default="scope">
+          <el-button size="mini" type="text" @click="openListenerForm(scope, scope.$index)"
+            >编辑</el-button
+          >
+          <el-divider direction="vertical" />
+          <el-button
+            size="mini"
+            type="text"
+            style="color: #ff4d4f"
+            @click="removeListener(scope, scope.$index)"
+            >移除</el-button
+          >
+        </template>
+      </el-table-column>
+    </el-table>
+    <div class="element-drawer__button">
+      <XButton
+        size="mini"
+        type="primary"
+        preIcon="ep:plus"
+        title="添加监听器"
+        @click="openListenerForm(null)"
+      />
+    </div>
+
+    <!-- 监听器 编辑/创建 部分 -->
+    <el-drawer
+      v-model="listenerFormModelVisible"
+      title="执行监听器"
+      :size="`${width}px`"
+      append-to-body
+      destroy-on-close
+    >
+      <el-form :model="listenerForm" label-width="96px" ref="listenerFormRef">
+        <el-form-item
+          label="事件类型"
+          prop="event"
+          :rules="{ required: true, trigger: ['blur', 'change'] }"
+        >
+          <el-select v-model="listenerForm.event">
+            <el-option label="start" value="start" />
+            <el-option label="end" value="end" />
+          </el-select>
+        </el-form-item>
+        <el-form-item
+          label="监听器类型"
+          prop="listenerType"
+          :rules="{ required: true, trigger: ['blur', 'change'] }"
+        >
+          <el-select v-model="listenerForm.listenerType">
+            <el-option
+              v-for="i in Object.keys(listenerTypeObject)"
+              :key="i"
+              :label="listenerTypeObject[i]"
+              :value="i"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item
+          v-if="listenerForm.listenerType === 'classListener'"
+          label="Java类"
+          prop="class"
+          key="listener-class"
+          :rules="{ required: true, trigger: ['blur', 'change'] }"
+        >
+          <el-input v-model="listenerForm.class" clearable />
+        </el-form-item>
+        <el-form-item
+          v-if="listenerForm.listenerType === 'expressionListener'"
+          label="表达式"
+          prop="expression"
+          key="listener-expression"
+          :rules="{ required: true, trigger: ['blur', 'change'] }"
+        >
+          <el-input v-model="listenerForm.expression" clearable />
+        </el-form-item>
+        <el-form-item
+          v-if="listenerForm.listenerType === 'delegateExpressionListener'"
+          label="代理表达式"
+          prop="delegateExpression"
+          key="listener-delegate"
+          :rules="{ required: true, trigger: ['blur', 'change'] }"
+        >
+          <el-input v-model="listenerForm.delegateExpression" clearable />
+        </el-form-item>
+        <template v-if="listenerForm.listenerType === 'scriptListener'">
+          <el-form-item
+            label="脚本格式"
+            prop="scriptFormat"
+            key="listener-script-format"
+            :rules="{ required: true, trigger: ['blur', 'change'], message: '请填写脚本格式' }"
+          >
+            <el-input v-model="listenerForm.scriptFormat" clearable />
+          </el-form-item>
+          <el-form-item
+            label="脚本类型"
+            prop="scriptType"
+            key="listener-script-type"
+            :rules="{ required: true, trigger: ['blur', 'change'], message: '请选择脚本类型' }"
+          >
+            <el-select v-model="listenerForm.scriptType">
+              <el-option label="内联脚本" value="inlineScript" />
+              <el-option label="外部脚本" value="externalScript" />
+            </el-select>
+          </el-form-item>
+          <el-form-item
+            v-if="listenerForm.scriptType === 'inlineScript'"
+            label="脚本内容"
+            prop="value"
+            key="listener-script"
+            :rules="{ required: true, trigger: ['blur', 'change'], message: '请填写脚本内容' }"
+          >
+            <el-input v-model="listenerForm.value" clearable />
+          </el-form-item>
+          <el-form-item
+            v-if="listenerForm.scriptType === 'externalScript'"
+            label="资源地址"
+            prop="resource"
+            key="listener-resource"
+            :rules="{ required: true, trigger: ['blur', 'change'], message: '请填写资源地址' }"
+          >
+            <el-input v-model="listenerForm.resource" clearable />
+          </el-form-item>
+        </template>
+      </el-form>
+      <el-divider />
+      <p class="listener-filed__title">
+        <span><Icon icon="ep:menu" />注入字段：</span>
+        <el-button type="primary" @click="openListenerFieldForm(null)">添加字段</el-button>
+      </p>
+      <el-table
+        :data="fieldsListOfListener"
+        size="mini"
+        max-height="240"
+        border
+        fit
+        style="flex: none"
+      >
+        <el-table-column label="序号" width="50px" type="index" />
+        <el-table-column label="字段名称" min-width="100px" prop="name" />
+        <el-table-column
+          label="字段类型"
+          min-width="80px"
+          show-overflow-tooltip
+          :formatter="(row) => fieldTypeObject[row.fieldType]"
+        />
+        <el-table-column
+          label="字段值/表达式"
+          min-width="100px"
+          show-overflow-tooltip
+          :formatter="(row) => row.string || row.expression"
+        />
+        <el-table-column label="操作" width="100px">
+          <template #default="scope">
+            <el-button size="mini" type="text" @click="openListenerFieldForm(scope, scope.$index)"
+              >编辑</el-button
+            >
+            <el-divider direction="vertical" />
+            <el-button
+              size="mini"
+              type="text"
+              style="color: #ff4d4f"
+              @click="removeListenerField(scope, scope.$index)"
+              >移除</el-button
+            >
+          </template>
+        </el-table-column>
+      </el-table>
+
+      <div class="element-drawer__button">
+        <el-button size="mini" @click="listenerFormModelVisible = false">取 消</el-button>
+        <el-button size="mini" type="primary" @click="saveListenerConfig">保 存</el-button>
+      </div>
+    </el-drawer>
+
+    <!-- 注入西段 编辑/创建 部分 -->
+    <el-dialog
+      title="字段配置"
+      v-model="listenerFieldFormModelVisible"
+      width="600px"
+      append-to-body
+      destroy-on-close
+    >
+      <el-form
+        :model="listenerFieldForm"
+        label-width="96spx"
+        ref="listenerFieldFormRef"
+        style="height: 136px"
+      >
+        <el-form-item
+          label="字段名称："
+          prop="name"
+          :rules="{ required: true, trigger: ['blur', 'change'] }"
+        >
+          <el-input v-model="listenerFieldForm.name" clearable />
+        </el-form-item>
+        <el-form-item
+          label="字段类型："
+          prop="fieldType"
+          :rules="{ required: true, trigger: ['blur', 'change'] }"
+        >
+          <el-select v-model="listenerFieldForm.fieldType">
+            <el-option
+              v-for="i in Object.keys(fieldTypeObject)"
+              :key="i"
+              :label="fieldTypeObject[i]"
+              :value="i"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item
+          v-if="listenerFieldForm.fieldType === 'string'"
+          label="字段值："
+          prop="string"
+          key="field-string"
+          :rules="{ required: true, trigger: ['blur', 'change'] }"
+        >
+          <el-input v-model="listenerFieldForm.string" clearable />
+        </el-form-item>
+        <el-form-item
+          v-if="listenerFieldForm.fieldType === 'expression'"
+          label="表达式："
+          prop="expression"
+          key="field-expression"
+          :rules="{ required: true, trigger: ['blur', 'change'] }"
+        >
+          <el-input v-model="listenerFieldForm.expression" clearable />
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <el-button size="mini" @click="listenerFieldFormModelVisible = false">取 消</el-button>
+        <el-button size="mini" type="primary" @click="saveListenerFiled">确 定</el-button>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+<script setup lang="ts" name="ElementListeners">
+import { ref, inject, watch, nextTick } from 'vue'
+import {
+  ElMessageBox,
+  ElTable,
+  ElTableColumn,
+  ElDivider,
+  ElOption,
+  ElSelect,
+  ElInput,
+  ElDrawer,
+  ElDialog,
+  ElForm,
+  ElFormItem
+} from 'element-plus'
+import { createListenerObject, updateElementExtensions } from '../../utils'
+import { initListenerType, initListenerForm, listenerType, fieldType } from './utilSelf'
+const props = defineProps({
+  id: String,
+  type: String
+})
+const prefix = inject('prefix')
+const width = inject('width')
+const elementListenersList = ref([]) // 监听器列表
+const listenerForm = ref({}) // 监听器详情表单
+const listenerFormModelVisible = ref(false) // 监听器 编辑 侧边栏显示状态
+const fieldsListOfListener = ref([])
+const listenerFieldForm = ref({}) // 监听器 注入字段 详情表单
+const listenerFieldFormModelVisible = ref(false) // 监听器 注入字段表单弹窗 显示状态
+const editingListenerIndex = ref(-1) // 监听器所在下标，-1 为新增
+const editingListenerFieldIndex = ref(-1) // 字段所在下标，-1 为新增
+const listenerTypeObject = ref(listenerType)
+const fieldTypeObject = ref(fieldType)
+const bpmnElement = ref()
+const otherExtensionList = ref()
+const bpmnElementListeners = ref()
+const listenerFormRef = ref()
+const listenerFieldFormRef = ref()
+
+const resetListenersList = () => {
+  bpmnElement.value = window.bpmnInstances.bpmnElement
+  otherExtensionList.value = []
+  bpmnElementListeners.value =
+    bpmnElement.value.businessObject?.extensionElements?.values?.filter(
+      (ex) => ex.$type === `${prefix}:ExecutionListener`
+    ) ?? []
+  elementListenersList.value = bpmnElementListeners.value.map((listener) =>
+    initListenerType(listener)
+  )
+}
+// 打开 监听器详情 侧边栏
+const openListenerForm = (listener, index) => {
+  if (listener) {
+    listenerForm.value = initListenerForm(listener)
+    editingListenerIndex.value = index
+  } else {
+    listenerForm.value = {}
+    editingListenerIndex.value = -1 // 标记为新增
+  }
+  if (listener && listener.fields) {
+    fieldsListOfListener.value = listener.fields.map((field) => ({
+      ...field,
+      fieldType: field.string ? 'string' : 'expression'
+    }))
+  } else {
+    fieldsListOfListener.value = []
+    listenerForm.value['fields'] = []
+  }
+  // 打开侧边栏并清楚验证状态
+  listenerFormModelVisible.value = true
+  nextTick(() => {
+    if (listenerFormRef.value) listenerFormRef.value.clearValidate()
+  })
+}
+// 打开监听器字段编辑弹窗
+const openListenerFieldForm = (field, index) => {
+  listenerFieldForm.value = field ? JSON.parse(JSON.stringify(field)) : {}
+  editingListenerFieldIndex.value = field ? index : -1
+  listenerFieldFormModelVisible.value = true
+  nextTick(() => {
+    if (listenerFieldFormRef.value) listenerFieldFormRef.value.clearValidate()
+  })
+}
+// 保存监听器注入字段
+const saveListenerFiled = async () => {
+  let validateStatus = await listenerFieldFormRef.value.validate()
+  if (!validateStatus) return // 验证不通过直接返回
+  if (editingListenerFieldIndex.value === -1) {
+    fieldsListOfListener.value.push(listenerFieldForm.value)
+    listenerForm.value.fields.push(listenerFieldForm.value)
+  } else {
+    fieldsListOfListener.value.splice(editingListenerFieldIndex.value, 1, listenerFieldForm.value)
+    listenerForm.value.fields.splice(editingListenerFieldIndex.value, 1, listenerFieldForm.value)
+  }
+  listenerFieldFormModelVisible.value = false
+  nextTick(() => {
+    listenerFieldForm.value = {}
+  })
+}
+// 移除监听器字段
+const removeListenerField = (field, index) => {
+  console.log(field, 'field')
+  ElMessageBox.confirm('确认移除该字段吗？', '提示', {
+    confirmButtonText: '确 认',
+    cancelButtonText: '取 消'
+  })
+    .then(() => {
+      fieldsListOfListener.value.splice(index, 1)
+      listenerForm.value.fields.splice(index, 1)
+    })
+    .catch(() => console.info('操作取消'))
+}
+// 移除监听器
+const removeListener = (listener, index) => {
+  console.log(listener, 'listener')
+  ElMessageBox.confirm('确认移除该监听器吗？', '提示', {
+    confirmButtonText: '确 认',
+    cancelButtonText: '取 消'
+  })
+    .then(() => {
+      bpmnElementListeners.value.splice(index, 1)
+      elementListenersList.value.splice(index, 1)
+      updateElementExtensions(
+        bpmnElement.value,
+        otherExtensionList.value.concat(bpmnElementListeners.value)
+      )
+    })
+    .catch(() => console.info('操作取消'))
+}
+// 保存监听器配置
+const saveListenerConfig = async () => {
+  let validateStatus = await listenerFormRef.value.validate()
+  if (!validateStatus) return // 验证不通过直接返回
+  const listenerObject = createListenerObject(listenerForm.value, false, prefix)
+  if (editingListenerIndex.value === -1) {
+    bpmnElementListeners.value.push(listenerObject)
+    elementListenersList.value.push(listenerForm.value)
+  } else {
+    bpmnElementListeners.value.splice(editingListenerIndex.value, 1, listenerObject)
+    elementListenersList.value.splice(editingListenerIndex.value, 1, listenerForm.value)
+  }
+  // 保存其他配置
+  otherExtensionList.value =
+    bpmnElement.value.businessObject?.extensionElements?.values?.filter(
+      (ex) => ex.$type !== `${prefix}:ExecutionListener`
+    ) ?? []
+  updateElementExtensions(
+    bpmnElement.value,
+    otherExtensionList.value.concat(bpmnElementListeners.value)
+  )
+  // 4. 隐藏侧边栏
+  listenerFormModelVisible.value = false
+  listenerForm.value = {}
+}
+
+watch(
+  () => props.id,
+  (val) => {
+    val &&
+      val.length &&
+      nextTick(() => {
+        resetListenersList()
+      })
+  },
+  { immediate: true }
+)
+</script>

yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/penal/listeners/UserTaskListeners.vue

@@ -0,0 +1,456 @@
+<template>
+  <div class="panel-tab__content">
+    <el-table :data="elementListenersList" size="mini" border>
+      <el-table-column label="序号" width="50px" type="index" />
+      <el-table-column
+        label="事件类型"
+        min-width="80px"
+        show-overflow-tooltip
+        :formatter="(row) => listenerEventTypeObject[row.event]"
+      />
+      <el-table-column label="事件id" min-width="80px" prop="id" show-overflow-tooltip />
+      <el-table-column
+        label="监听器类型"
+        min-width="80px"
+        show-overflow-tooltip
+        :formatter="(row) => listenerTypeObject[row.listenerType]"
+      />
+      <el-table-column label="操作" width="90px">
+        <template #default="scope">
+          <el-button size="mini" type="text" @click="openListenerForm(scope, scope.$index)"
+            >编辑</el-button
+          >
+          <el-divider direction="vertical" />
+          <el-button
+            size="mini"
+            type="text"
+            style="color: #ff4d4f"
+            @click="removeListener(scope, scope.$index)"
+            >移除</el-button
+          >
+        </template>
+      </el-table-column>
+    </el-table>
+    <div class="element-drawer__button">
+      <XButton
+        size="mini"
+        type="primary"
+        preIcon="ep:plus"
+        title="添加监听器"
+        @click="openListenerForm(null)"
+      />
+    </div>
+
+    <!-- 监听器 编辑/创建 部分 -->
+    <el-drawer
+      v-model="listenerFormModelVisible"
+      title="任务监听器"
+      :size="`${width}px`"
+      append-to-body
+      destroy-on-close
+    >
+      <el-form size="mini" :model="listenerForm" label-width="96px" ref="listenerFormRef">
+        <el-form-item
+          label="事件类型"
+          prop="event"
+          :rules="{ required: true, trigger: ['blur', 'change'] }"
+        >
+          <el-select v-model="listenerForm.event">
+            <el-option
+              v-for="i in Object.keys(listenerEventTypeObject)"
+              :key="i"
+              :label="listenerEventTypeObject[i]"
+              :value="i"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item
+          label="监听器ID"
+          prop="id"
+          :rules="{ required: true, trigger: ['blur', 'change'] }"
+        >
+          <el-input v-model="listenerForm.id" clearable />
+        </el-form-item>
+        <el-form-item
+          label="监听器类型"
+          prop="listenerType"
+          :rules="{ required: true, trigger: ['blur', 'change'] }"
+        >
+          <el-select v-model="listenerForm.listenerType">
+            <el-option
+              v-for="i in Object.keys(listenerTypeObject)"
+              :key="i"
+              :label="listenerTypeObject[i]"
+              :value="i"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item
+          v-if="listenerForm.listenerType === 'classListener'"
+          label="Java类"
+          prop="class"
+          key="listener-class"
+          :rules="{ required: true, trigger: ['blur', 'change'] }"
+        >
+          <el-input v-model="listenerForm.class" clearable />
+        </el-form-item>
+        <el-form-item
+          v-if="listenerForm.listenerType === 'expressionListener'"
+          label="表达式"
+          prop="expression"
+          key="listener-expression"
+          :rules="{ required: true, trigger: ['blur', 'change'] }"
+        >
+          <el-input v-model="listenerForm.expression" clearable />
+        </el-form-item>
+        <el-form-item
+          v-if="listenerForm.listenerType === 'delegateExpressionListener'"
+          label="代理表达式"
+          prop="delegateExpression"
+          key="listener-delegate"
+          :rules="{ required: true, trigger: ['blur', 'change'] }"
+        >
+          <el-input v-model="listenerForm.delegateExpression" clearable />
+        </el-form-item>
+        <template v-if="listenerForm.listenerType === 'scriptListener'">
+          <el-form-item
+            label="脚本格式"
+            prop="scriptFormat"
+            key="listener-script-format"
+            :rules="{ required: true, trigger: ['blur', 'change'], message: '请填写脚本格式' }"
+          >
+            <el-input v-model="listenerForm.scriptFormat" clearable />
+          </el-form-item>
+          <el-form-item
+            label="脚本类型"
+            prop="scriptType"
+            key="listener-script-type"
+            :rules="{ required: true, trigger: ['blur', 'change'], message: '请选择脚本类型' }"
+          >
+            <el-select v-model="listenerForm.scriptType">
+              <el-option label="内联脚本" value="inlineScript" />
+              <el-option label="外部脚本" value="externalScript" />
+            </el-select>
+          </el-form-item>
+          <el-form-item
+            v-if="listenerForm.scriptType === 'inlineScript'"
+            label="脚本内容"
+            prop="value"
+            key="listener-script"
+            :rules="{ required: true, trigger: ['blur', 'change'], message: '请填写脚本内容' }"
+          >
+            <el-input v-model="listenerForm.value" clearable />
+          </el-form-item>
+          <el-form-item
+            v-if="listenerForm.scriptType === 'externalScript'"
+            label="资源地址"
+            prop="resource"
+            key="listener-resource"
+            :rules="{ required: true, trigger: ['blur', 'change'], message: '请填写资源地址' }"
+          >
+            <el-input v-model="listenerForm.resource" clearable />
+          </el-form-item>
+        </template>
+
+        <template v-if="listenerForm.event === 'timeout'">
+          <el-form-item label="定时器类型" prop="eventDefinitionType" key="eventDefinitionType">
+            <el-select v-model="listenerForm.eventDefinitionType">
+              <el-option label="日期" value="date" />
+              <el-option label="持续时长" value="duration" />
+              <el-option label="循环" value="cycle" />
+              <el-option label="无" value="null" />
+            </el-select>
+          </el-form-item>
+          <el-form-item
+            v-if="!!listenerForm.eventDefinitionType && listenerForm.eventDefinitionType !== 'null'"
+            label="定时器"
+            prop="eventTimeDefinitions"
+            key="eventTimeDefinitions"
+            :rules="{ required: true, trigger: ['blur', 'change'], message: '请填写定时器配置' }"
+          >
+            <el-input v-model="listenerForm.eventTimeDefinitions" clearable />
+          </el-form-item>
+        </template>
+      </el-form>
+
+      <el-divider />
+      <p class="listener-filed__title">
+        <span><Icon icon="ep:menu" />注入字段：</span>
+        <el-button size="mini" type="primary" @click="openListenerFieldForm(null)"
+          >添加字段</el-button
+        >
+      </p>
+      <el-table
+        :data="fieldsListOfListener"
+        size="mini"
+        max-height="240"
+        border
+        fit
+        style="flex: none"
+      >
+        <el-table-column label="序号" width="50px" type="index" />
+        <el-table-column label="字段名称" min-width="100px" prop="name" />
+        <el-table-column
+          label="字段类型"
+          min-width="80px"
+          show-overflow-tooltip
+          :formatter="(row) => fieldTypeObject[row.fieldType]"
+        />
+        <el-table-column
+          label="字段值/表达式"
+          min-width="100px"
+          show-overflow-tooltip
+          :formatter="(row) => row.string || row.expression"
+        />
+        <el-table-column label="操作" width="100px">
+          <template #default="scope">
+            <el-button size="mini" type="text" @click="openListenerFieldForm(scope, scope.$index)"
+              >编辑</el-button
+            >
+            <el-divider direction="vertical" />
+            <el-button
+              size="mini"
+              type="text"
+              style="color: #ff4d4f"
+              @click="removeListenerField(scope, scope.$index)"
+              >移除</el-button
+            >
+          </template>
+        </el-table-column>
+      </el-table>
+
+      <div class="element-drawer__button">
+        <el-button size="mini" @click="listenerFormModelVisible = false">取 消</el-button>
+        <el-button size="mini" type="primary" @click="saveListenerConfig">保 存</el-button>
+      </div>
+    </el-drawer>
+
+    <!-- 注入西段 编辑/创建 部分 -->
+    <el-dialog
+      title="字段配置"
+      v-model="listenerFieldFormModelVisible"
+      width="600px"
+      append-to-body
+      destroy-on-close
+    >
+      <el-form
+        :model="listenerFieldForm"
+        size="mini"
+        label-width="96px"
+        ref="listenerFieldFormRef"
+        style="height: 136px"
+      >
+        <el-form-item
+          label="字段名称："
+          prop="name"
+          :rules="{ required: true, trigger: ['blur', 'change'] }"
+        >
+          <el-input v-model="listenerFieldForm.name" clearable />
+        </el-form-item>
+        <el-form-item
+          label="字段类型："
+          prop="fieldType"
+          :rules="{ required: true, trigger: ['blur', 'change'] }"
+        >
+          <el-select v-model="listenerFieldForm.fieldType">
+            <el-option
+              v-for="i in Object.keys(fieldTypeObject)"
+              :key="i"
+              :label="fieldTypeObject[i]"
+              :value="i"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item
+          v-if="listenerFieldForm.fieldType === 'string'"
+          label="字段值："
+          prop="string"
+          key="field-string"
+          :rules="{ required: true, trigger: ['blur', 'change'] }"
+        >
+          <el-input v-model="listenerFieldForm.string" clearable />
+        </el-form-item>
+        <el-form-item
+          v-if="listenerFieldForm.fieldType === 'expression'"
+          label="表达式："
+          prop="expression"
+          key="field-expression"
+          :rules="{ required: true, trigger: ['blur', 'change'] }"
+        >
+          <el-input v-model="listenerFieldForm.expression" clearable />
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <el-button size="mini" @click="listenerFieldFormModelVisible = false">取 消</el-button>
+        <el-button size="mini" type="primary" @click="saveListenerFiled">确 定</el-button>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+<script lang="ts" setup name="UserTaskListeners">
+import { ref, inject, watch, nextTick } from 'vue'
+import {
+  ElDialog,
+  ElForm,
+  ElFormItem,
+  ElSelect,
+  ElOption,
+  ElDivider,
+  ElTable,
+  ElTableColumn,
+  ElMessageBox,
+  ElButton,
+  ElDrawer
+} from 'element-plus'
+import { createListenerObject, updateElementExtensions } from '../../utils'
+import { initListenerForm, initListenerType, eventType, listenerType, fieldType } from './utilSelf'
+const props = defineProps({
+  id: String,
+  type: String
+})
+const prefix = inject('prefix')
+const width = inject('width')
+const elementListenersList = ref([])
+const listenerEventTypeObject = ref(eventType)
+const listenerTypeObject = ref(listenerType)
+const listenerFormModelVisible = ref(false)
+const listenerForm = ref({})
+const fieldTypeObject = ref(fieldType)
+const fieldsListOfListener = ref([])
+const listenerFieldFormModelVisible = ref(false) // 监听器 注入字段表单弹窗 显示状态
+const editingListenerIndex = ref(-1) // 监听器所在下标，-1 为新增
+const editingListenerFieldIndex = ref(-1) // 字段所在下标，-1 为新增
+const listenerFieldForm = ref({}) // 监听器 注入字段 详情表单
+const bpmnElement = ref()
+const bpmnElementListeners = ref()
+const otherExtensionList = ref()
+const listenerFormRef = ref()
+const listenerFieldFormRef = ref()
+
+const resetListenersList = () => {
+  bpmnElement.value = window.bpmnInstances.bpmnElement
+  otherExtensionList.value = []
+  bpmnElementListeners.value =
+    bpmnElement.value.businessObject?.extensionElements?.values?.filter(
+      (ex) => ex.$type === `${prefix}:TaskListener`
+    ) ?? []
+  elementListenersList.value = bpmnElementListeners.value.map((listener) =>
+    initListenerType(listener)
+  )
+}
+const openListenerForm = (listener, index) => {
+  if (listener) {
+    listenerForm.value = initListenerForm(listener)
+    editingListenerIndex.value = index
+  } else {
+    listenerForm.value = {}
+    editingListenerIndex.value = -1 // 标记为新增
+  }
+  if (listener && listener.fields) {
+    fieldsListOfListener.value = listener.fields.map((field) => ({
+      ...field,
+      fieldType: field.string ? 'string' : 'expression'
+    }))
+  } else {
+    fieldsListOfListener.value = []
+    listenerForm.value['fields'] = []
+  }
+  // 打开侧边栏并清楚验证状态
+  listenerFormModelVisible.value = true
+  nextTick(() => {
+    if (listenerFormRef.value) listenerFormRef.value.clearValidate()
+  })
+}
+// 移除监听器
+const removeListener = (listener, index) => {
+  console.log(listener, 'listener')
+  ElMessageBox.confirm('确认移除该监听器吗？', '提示', {
+    confirmButtonText: '确 认',
+    cancelButtonText: '取 消'
+  })
+    .then(() => {
+      bpmnElementListeners.value.splice(index, 1)
+      elementListenersList.value.splice(index, 1)
+      updateElementExtensions(
+        bpmnElement.value,
+        otherExtensionList.value.concat(bpmnElementListeners.value)
+      )
+    })
+    .catch(() => console.info('操作取消'))
+}
+// 保存监听器
+const saveListenerConfig = async () => {
+  let validateStatus = await listenerFormRef.value.validate()
+  if (!validateStatus) return // 验证不通过直接返回
+  const listenerObject = createListenerObject(listenerForm.value, true, prefix)
+  if (editingListenerIndex.value === -1) {
+    bpmnElementListeners.value.push(listenerObject)
+    elementListenersList.value.push(listenerForm.value)
+  } else {
+    bpmnElementListeners.value.splice(editingListenerIndex.value, 1, listenerObject)
+    elementListenersList.value.splice(editingListenerIndex.value, 1, listenerForm.value)
+  }
+  // 保存其他配置
+  otherExtensionList.value =
+    bpmnElement.value.businessObject?.extensionElements?.values?.filter(
+      (ex) => ex.$type !== `${prefix}:TaskListener`
+    ) ?? []
+  updateElementExtensions(
+    bpmnElement.value,
+    otherExtensionList.value.concat(bpmnElementListeners.value)
+  )
+  // 4. 隐藏侧边栏
+  listenerFormModelVisible.value = false
+  listenerForm.value = {}
+}
+// 打开监听器字段编辑弹窗
+const openListenerFieldForm = (field, index) => {
+  listenerFieldForm.value = field ? JSON.parse(JSON.stringify(field)) : {}
+  editingListenerFieldIndex.value = field ? index : -1
+  listenerFieldFormModelVisible.value = true
+  nextTick(() => {
+    if (listenerFieldFormRef.value) listenerFieldFormRef.value.clearValidate()
+  })
+}
+// 保存监听器注入字段
+const saveListenerFiled = async () => {
+  let validateStatus = await listenerFieldFormRef.value.validate()
+  if (!validateStatus) return // 验证不通过直接返回
+  if (editingListenerFieldIndex.value === -1) {
+    fieldsListOfListener.value.push(listenerFieldForm.value)
+    listenerForm.value.fields.push(listenerFieldForm.value)
+  } else {
+    fieldsListOfListener.value.splice(editingListenerFieldIndex.value, 1, listenerFieldForm.value)
+    listenerForm.value.fields.splice(editingListenerFieldIndex.value, 1, listenerFieldForm.value)
+  }
+  listenerFieldFormModelVisible.value = false
+  nextTick(() => {
+    listenerFieldForm.value = {}
+  })
+}
+// 移除监听器字段
+const removeListenerField = (field, index) => {
+  console.log(field, 'field')
+  ElMessageBox.confirm('确认移除该字段吗？', '提示', {
+    confirmButtonText: '确 认',
+    cancelButtonText: '取 消'
+  })
+    .then(() => {
+      fieldsListOfListener.value.splice(index, 1)
+      listenerForm.value.fields.splice(index, 1)
+    })
+    .catch(() => console.info('操作取消'))
+}
+
+watch(
+  () => props.id,
+  (val) => {
+    val &&
+      val.length &&
+      nextTick(() => {
+        resetListenersList()
+      })
+  },
+  { immediate: true }
+)
+</script>

yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/penal/listeners/template.js

@@ -0,0 +1,177 @@
+export const template = isTaskListener => {
+  return `
+  <div class="panel-tab__content">
+    <el-table :data="elementListenersList" size="mini" border>
+      <el-table-column label="序号" width="50px" type="index" />
+      <el-table-column label="事件类型" min-width="100px" prop="event" />
+      <el-table-column label="监听器类型" min-width="100px" show-overflow-tooltip :formatter="row => listenerTypeObject[row.listenerType]" />
+      <el-table-column label="操作" width="90px">
+        <template #default="scope">
+          <el-button size="mini" type="text" @click="openListenerForm(scope, scope.$index)">编辑</el-button>
+          <el-divider direction="vertical" />
+          <el-button size="mini" type="text" style="color: #ff4d4f" @click="removeListener(scope, scope.$index)">移除</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <div class="element-drawer__button">
+      <el-button size="mini" type="primary" icon="el-icon-plus" @click="openListenerForm(null)">添加监听器</el-button>
+    </div>
+
+    <!-- 监听器 编辑/创建 部分 -->
+    <el-drawer :visible.sync="listenerFormModelVisible" title="执行监听器" :size="width + 'px'" append-to-body destroy-on-close>
+      <el-form size="mini" :model="listenerForm" label-width="96px" ref="listenerFormRef" @submit.native.prevent>
+        <el-form-item label="事件类型" prop="event" :rules="{ required: true, trigger: ['blur', 'change'] }">
+          <el-select v-model="listenerForm.event">
+            <el-option label="start" value="start" />
+            <el-option label="end" value="end" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="监听器类型" prop="listenerType" :rules="{ required: true, trigger: ['blur', 'change'] }">
+          <el-select v-model="listenerForm.listenerType">
+            <el-option v-for="i in Object.keys(listenerTypeObject)" :key="i" :label="listenerTypeObject[i]" :value="i" />
+          </el-select>
+        </el-form-item>
+        <el-form-item
+          v-if="listenerForm.listenerType === 'classListener'"
+          label="Java类"
+          prop="class"
+          key="listener-class"
+          :rules="{ required: true, trigger: ['blur', 'change'] }"
+        >
+          <el-input v-model="listenerForm.class" clearable />
+        </el-form-item>
+        <el-form-item
+          v-if="listenerForm.listenerType === 'expressionListener'"
+          label="表达式"
+          prop="expression"
+          key="listener-expression"
+          :rules="{ required: true, trigger: ['blur', 'change'] }"
+        >
+          <el-input v-model="listenerForm.expression" clearable />
+        </el-form-item>
+        <el-form-item
+          v-if="listenerForm.listenerType === 'delegateExpressionListener'"
+          label="代理表达式"
+          prop="delegateExpression"
+          key="listener-delegate"
+          :rules="{ required: true, trigger: ['blur', 'change'] }"
+        >
+          <el-input v-model="listenerForm.delegateExpression" clearable />
+        </el-form-item>
+        <template v-if="listenerForm.listenerType === 'scriptListener'">
+          <el-form-item
+            label="脚本格式"
+            prop="scriptFormat"
+            key="listener-script-format"
+            :rules="{ required: true, trigger: ['blur', 'change'], message: '请填写脚本格式' }"
+          >
+            <el-input v-model="listenerForm.scriptFormat" clearable />
+          </el-form-item>
+          <el-form-item
+            label="脚本类型"
+            prop="scriptType"
+            key="listener-script-type"
+            :rules="{ required: true, trigger: ['blur', 'change'], message: '请选择脚本类型' }"
+          >
+            <el-select v-model="listenerForm.scriptType">
+              <el-option label="内联脚本" value="inlineScript" />
+              <el-option label="外部脚本" value="externalScript" />
+            </el-select>
+          </el-form-item>
+          <el-form-item
+            v-if="listenerForm.scriptType === 'inlineScript'"
+            label="脚本内容"
+            prop="value"
+            key="listener-script"
+            :rules="{ required: true, trigger: ['blur', 'change'], message: '请填写脚本内容' }"
+          >
+            <el-input v-model="listenerForm.value" clearable />
+          </el-form-item>
+          <el-form-item
+            v-if="listenerForm.scriptType === 'externalScript'"
+            label="资源地址"
+            prop="resource"
+            key="listener-resource"
+            :rules="{ required: true, trigger: ['blur', 'change'], message: '请填写资源地址' }"
+          >
+            <el-input v-model="listenerForm.resource" clearable />
+          </el-form-item>
+        </template>
+        ${isTaskListener
+      ? "<el-form-item label='定时器类型' prop='eventDefinitionType' key='eventDefinitionType'>" +
+      "<el-select v-model='listenerForm.eventDefinitionType'>" +
+      "<el-option label='日期' value='date' />" +
+      "<el-option label='持续时长' value='duration' />" +
+      "<el-option label='循环' value='cycle' />" +
+      "<el-option label='无' value='' />" +
+      "</el-select>" +
+      "</el-form-item>" +
+      "<el-form-item v-if='!!listenerForm.eventDefinitionType' label='定时器' prop='eventDefinitions' key='eventDefinitions'>" +
+      "<el-input v-model='listenerForm.eventDefinitions' clearable />" +
+      "</el-form-item>"
+      : ""
+    }
+      </el-form>
+      <el-divider />
+      <p class="listener-filed__title">
+        <span><i class="el-icon-menu"></i>注入字段：</span>
+        <el-button size="mini" type="primary" @click="openListenerFieldForm(null)">添加字段</el-button>
+      </p>
+      <el-table :data="fieldsListOfListener" size="mini" max-height="240" border fit style="flex: none">
+        <el-table-column label="序号" width="50px" type="index" />
+        <el-table-column label="字段名称" min-width="100px" prop="name" />
+        <el-table-column label="字段类型" min-width="80px" show-overflow-tooltip :formatter="row => fieldTypeObject[row.fieldType]" />
+        <el-table-column label="字段值/表达式" min-width="100px" show-overflow-tooltip :formatter="row => row.string || row.expression" />
+        <el-table-column label="操作" width="100px">
+          <template #default="scope">
+            <el-button size="mini" type="text" @click="openListenerFieldForm(scope, scope.$index)">编辑</el-button>
+            <el-divider direction="vertical" />
+            <el-button size="mini" type="text" style="color: #ff4d4f" @click="removeListenerField(scope, scope.$index)">移除</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+
+      <div class="element-drawer__button">
+        <el-button size="mini" @click="listenerFormModelVisible = false">取 消</el-button>
+        <el-button size="mini" type="primary" @click="saveListenerConfig">保 存</el-button>
+      </div>
+    </el-drawer>
+
+    <!-- 注入西段 编辑/创建 部分 -->
+    <el-dialog title="字段配置" :visible.sync="listenerFieldFormModelVisible" width="600px" append-to-body destroy-on-close>
+      <el-form :model="listenerFieldForm" size="mini" label-width="96px" ref="listenerFieldFormRef" style="height: 136px" @submit.native.prevent>
+        <el-form-item label="字段名称：" prop="name" :rules="{ required: true, trigger: ['blur', 'change'] }">
+          <el-input v-model="listenerFieldForm.name" clearable />
+        </el-form-item>
+        <el-form-item label="字段类型：" prop="fieldType" :rules="{ required: true, trigger: ['blur', 'change'] }">
+          <el-select v-model="listenerFieldForm.fieldType">
+            <el-option v-for="i in Object.keys(fieldTypeObject)" :key="i" :label="fieldTypeObject[i]" :value="i" />
+          </el-select>
+        </el-form-item>
+        <el-form-item
+          v-if="listenerFieldForm.fieldType === 'string'"
+          label="字段值："
+          prop="string"
+          key="field-string"
+          :rules="{ required: true, trigger: ['blur', 'change'] }"
+        >
+          <el-input v-model="listenerFieldForm.string" clearable />
+        </el-form-item>
+        <el-form-item
+          v-if="listenerFieldForm.fieldType === 'expression'"
+          label="表达式："
+          prop="expression"
+          key="field-expression"
+          :rules="{ required: true, trigger: ['blur', 'change'] }"
+        >
+          <el-input v-model="listenerFieldForm.expression" clearable />
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <el-button size="mini" @click="listenerFieldFormModelVisible = false">取 消</el-button>
+        <el-button size="mini" type="primary" @click="saveListenerFiled">确 定</el-button>
+      </template>
+    </el-dialog>
+  </div>
+  `
+}

yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/penal/listeners/utilSelf.js

@@ -0,0 +1,62 @@
+// 初始化表单数据
+export function initListenerForm(listener) {
+  let self = {
+    ...listener
+  };
+  if (listener.script) {
+    self = {
+      ...listener,
+      ...listener.script,
+      scriptType: listener.script.resource ? "externalScript" : "inlineScript"
+    };
+  }
+  if (listener.event === "timeout" && listener.eventDefinitions) {
+    if (listener.eventDefinitions.length) {
+      let k = "";
+      for (let key in listener.eventDefinitions[0]) {
+        console.log(listener.eventDefinitions, key);
+        if (key.indexOf("time") !== -1) {
+          k = key;
+          self.eventDefinitionType = key.replace("time", "").toLowerCase();
+        }
+      }
+      console.log(k);
+      self.eventTimeDefinitions = listener.eventDefinitions[0][k].body;
+    }
+  }
+  return self;
+}
+
+export function initListenerType(listener) {
+  let listenerType;
+  if (listener.class) listenerType = "classListener";
+  if (listener.expression) listenerType = "expressionListener";
+  if (listener.delegateExpression) listenerType = "delegateExpressionListener";
+  if (listener.script) listenerType = "scriptListener";
+  return {
+    ...JSON.parse(JSON.stringify(listener)),
+    ...(listener.script ?? {}),
+    listenerType: listenerType
+  };
+}
+
+export const listenerType = {
+  classListener: "Java 类",
+  expressionListener: "表达式",
+  delegateExpressionListener: "代理表达式",
+  scriptListener: "脚本"
+};
+
+export const eventType = {
+  create: "创建",
+  assignment: "指派",
+  complete: "完成",
+  delete: "删除",
+  update: "更新",
+  timeout: "超时"
+};
+
+export const fieldType = {
+  string: "字符串",
+  expression: "表达式"
+};

yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/penal/multi-instance/ElementMultiInstance.vue

@@ -0,0 +1,237 @@
+<template>
+  <div class="panel-tab__content">
+    <el-form label-width="90px">
+      <el-form-item label="回路特性">
+        <el-select v-model="loopCharacteristics" @change="changeLoopCharacteristicsType">
+          <!--bpmn:MultiInstanceLoopCharacteristics-->
+          <el-option label="并行多重事件" value="ParallelMultiInstance" />
+          <el-option label="时序多重事件" value="SequentialMultiInstance" />
+          <!--bpmn:StandardLoopCharacteristics-->
+          <el-option label="循环事件" value="StandardLoop" />
+          <el-option label="无" value="Null" />
+        </el-select>
+      </el-form-item>
+      <template
+        v-if="
+          loopCharacteristics === 'ParallelMultiInstance' ||
+          loopCharacteristics === 'SequentialMultiInstance'
+        "
+      >
+        <el-form-item label="循环基数" key="loopCardinality">
+          <el-input
+            v-model="loopInstanceForm.loopCardinality"
+            clearable
+            @change="updateLoopCardinality"
+          />
+        </el-form-item>
+        <el-form-item label="集合" key="collection" v-show="false">
+          <el-input v-model="loopInstanceForm.collection" clearable @change="updateLoopBase" />
+        </el-form-item>
+        <el-form-item label="元素变量" key="elementVariable">
+          <el-input v-model="loopInstanceForm.elementVariable" clearable @change="updateLoopBase" />
+        </el-form-item>
+        <el-form-item label="完成条件" key="completionCondition">
+          <el-input
+            v-model="loopInstanceForm.completionCondition"
+            clearable
+            @change="updateLoopCondition"
+          />
+        </el-form-item>
+        <el-form-item label="异步状态" key="async">
+          <el-checkbox
+            v-model="loopInstanceForm.asyncBefore"
+            label="异步前"
+            @change="updateLoopAsync('asyncBefore')"
+          />
+          <el-checkbox
+            v-model="loopInstanceForm.asyncAfter"
+            label="异步后"
+            @change="updateLoopAsync('asyncAfter')"
+          />
+          <el-checkbox
+            v-model="loopInstanceForm.exclusive"
+            v-if="loopInstanceForm.asyncAfter || loopInstanceForm.asyncBefore"
+            label="排除"
+            @change="updateLoopAsync('exclusive')"
+          />
+        </el-form-item>
+        <el-form-item
+          label="重试周期"
+          prop="timeCycle"
+          v-if="loopInstanceForm.asyncAfter || loopInstanceForm.asyncBefore"
+          key="timeCycle"
+        >
+          <el-input v-model="loopInstanceForm.timeCycle" clearable @change="updateLoopTimeCycle" />
+        </el-form-item>
+      </template>
+    </el-form>
+  </div>
+</template>
+
+<script setup lang="ts" name="ElementMultiInstance">
+import { inject, ref, onBeforeUnmount, watch } from 'vue'
+import { ElForm, ElFormItem, ElSelect, ElOption, ElCheckbox, ElInput } from 'element-plus'
+const props = defineProps({
+  businessObject: Object,
+  type: String
+})
+const prefix = inject('prefix')
+const loopCharacteristics = ref('')
+//默认配置，用来覆盖原始不存在的选项，避免报错
+const defaultLoopInstanceForm = ref({
+  completionCondition: '',
+  loopCardinality: '',
+  extensionElements: [],
+  asyncAfter: false,
+  asyncBefore: false,
+  exclusive: false
+})
+const loopInstanceForm = ref({})
+const bpmnElement = ref()
+const multiLoopInstance = ref()
+
+const getElementLoop = (businessObject) => {
+  if (!businessObject.loopCharacteristics) {
+    loopCharacteristics.value = 'Null'
+    loopInstanceForm.value = {}
+    return
+  }
+  if (businessObject.loopCharacteristics.$type === 'bpmn:StandardLoopCharacteristics') {
+    loopCharacteristics.value = 'StandardLoop'
+    loopInstanceForm.value = {}
+    return
+  }
+  if (businessObject.loopCharacteristics.isSequential) {
+    loopCharacteristics.value = 'SequentialMultiInstance'
+  } else {
+    loopCharacteristics.value = 'ParallelMultiInstance'
+  }
+  // 合并配置
+  loopInstanceForm.value = {
+    ...defaultLoopInstanceForm.value,
+    ...businessObject.loopCharacteristics,
+    completionCondition: businessObject.loopCharacteristics?.completionCondition?.body ?? '',
+    loopCardinality: businessObject.loopCharacteristics?.loopCardinality?.body ?? ''
+  }
+  // 保留当前元素 businessObject 上的 loopCharacteristics 实例
+  multiLoopInstance.value = window.bpmnInstances.bpmnElement.businessObject.loopCharacteristics
+  // 更新表单
+  if (
+    businessObject.loopCharacteristics.extensionElements &&
+    businessObject.loopCharacteristics.extensionElements.values &&
+    businessObject.loopCharacteristics.extensionElements.values.length
+  ) {
+    loopInstanceForm.value['timeCycle'] =
+      businessObject.loopCharacteristics.extensionElements.values[0].body
+  }
+}
+const changeLoopCharacteristicsType = (type) => {
+  // this.loopInstanceForm = { ...this.defaultLoopInstanceForm }; // 切换类型取消原表单配置
+  // 取消多实例配置
+  if (type === 'Null') {
+    window.bpmnInstances.modeling.updateProperties(bpmnElement.value, { loopCharacteristics: null })
+    return
+  }
+  // 配置循环
+  if (type === 'StandardLoop') {
+    const loopCharacteristicsObject = window.bpmnInstances.moddle.create(
+      'bpmn:StandardLoopCharacteristics'
+    )
+    window.bpmnInstances.modeling.updateProperties(bpmnElement.value, {
+      loopCharacteristics: loopCharacteristicsObject
+    })
+    multiLoopInstance.value = null
+    return
+  }
+  // 时序
+  if (type === 'SequentialMultiInstance') {
+    multiLoopInstance.value = window.bpmnInstances.moddle.create(
+      'bpmn:MultiInstanceLoopCharacteristics',
+      { isSequential: true }
+    )
+  } else {
+    multiLoopInstance.value = window.bpmnInstances.moddle.create(
+      'bpmn:MultiInstanceLoopCharacteristics',
+      { collection: '${coll_userList}' }
+    )
+  }
+  window.bpmnInstances.modeling.updateProperties(bpmnElement.value, {
+    loopCharacteristics: multiLoopInstance.value
+  })
+}
+// 循环基数
+const updateLoopCardinality = (cardinality) => {
+  let loopCardinality = null
+  if (cardinality && cardinality.length) {
+    loopCardinality = window.bpmnInstances.moddle.create('bpmn:FormalExpression', {
+      body: cardinality
+    })
+  }
+  window.bpmnInstances.modeling.updateModdleProperties(bpmnElement.value, multiLoopInstance.value, {
+    loopCardinality
+  })
+}
+// 完成条件
+const updateLoopCondition = (condition) => {
+  let completionCondition = null
+  if (condition && condition.length) {
+    completionCondition = window.bpmnInstances.moddle.create('bpmn:FormalExpression', {
+      body: condition
+    })
+  }
+  window.bpmnInstances.modeling.updateModdleProperties(bpmnElement.value, multiLoopInstance.value, {
+    completionCondition
+  })
+}
+// 重试周期
+const updateLoopTimeCycle = (timeCycle) => {
+  const extensionElements = window.bpmnInstances.moddle.create('bpmn:ExtensionElements', {
+    values: [
+      window.bpmnInstances.moddle.create(`${prefix}:FailedJobRetryTimeCycle`, {
+        body: timeCycle
+      })
+    ]
+  })
+  window.bpmnInstances.modeling.updateModdleProperties(bpmnElement.value, multiLoopInstance.value, {
+    extensionElements
+  })
+}
+// 直接更新的基础信息
+const updateLoopBase = () => {
+  window.bpmnInstances.modeling.updateModdleProperties(bpmnElement.value, multiLoopInstance.value, {
+    collection: loopInstanceForm.value.collection || null,
+    elementVariable: loopInstanceForm.value.elementVariable || null
+  })
+}
+// 各异步状态
+const updateLoopAsync = (key) => {
+  const { asyncBefore, asyncAfter } = loopInstanceForm.value
+  let asyncAttr = Object.create(null)
+  if (!asyncBefore && !asyncAfter) {
+    // this.$set(this.loopInstanceForm, "exclusive", false);
+    loopInstanceForm.value['exclusive'] = false
+    asyncAttr = { asyncBefore: false, asyncAfter: false, exclusive: false, extensionElements: null }
+  } else {
+    asyncAttr[key] = loopInstanceForm.value[key]
+  }
+  window.bpmnInstances.modeling.updateModdleProperties(
+    bpmnElement.value,
+    multiLoopInstance.value,
+    asyncAttr
+  )
+}
+
+onBeforeUnmount(() => {
+  multiLoopInstance.value = null
+  bpmnElement.value = null
+})
+
+watch(
+  () => props.type,
+  (val) => {
+    bpmnElement.value = window.bpmnInstances.bpmnElement
+    getElementLoop(val)
+  },
+  { immediate: true }
+)
+</script>

yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/penal/other/ElementOtherConfig.vue

@@ -0,0 +1,55 @@
+<template>
+  <div class="panel-tab__content">
+    <div class="element-property input-property">
+      <div class="element-property__label">元素文档：</div>
+      <div class="element-property__value">
+        <el-input
+          type="textarea"
+          v-model="documentation"
+          resize="vertical"
+          :autosize="{ minRows: 2, maxRows: 4 }"
+          @input="updateDocumentation"
+          @blur="updateDocumentation"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts" name="ElementOtherConfig">
+import { ref, watch, nextTick, onBeforeUnmount } from 'vue'
+import { ElInput } from 'element-plus'
+const props = defineProps({
+  id: String
+})
+const documentation = ref('')
+const bpmnElement = ref()
+const updateDocumentation = () => {
+  ;(bpmnElement.value && bpmnElement.value.id === props.id) ||
+    (bpmnElement.value = window.bpmnInstances.elementRegistry.get(props.id))
+  const documentation = window.bpmnInstances.bpmnFactory.create('bpmn:Documentation', {
+    text: documentation.value
+  })
+  window.bpmnInstances.modeling.updateProperties(bpmnElement.value, {
+    documentation: [documentation]
+  })
+}
+onBeforeUnmount(() => {
+  bpmnElement.value = null
+})
+
+watch(
+  () => props.id,
+  (id) => {
+    if (id && id.length) {
+      nextTick(() => {
+        const documentations = window.bpmnInstances.bpmnElement.businessObject?.documentation
+        documentation.value = documentations && documentations.length ? documentations[0].text : ''
+      })
+    } else {
+      documentation.value = ''
+    }
+  },
+  { immediate: true }
+)
+</script>

yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/penal/properties/ElementProperties.vue

@@ -0,0 +1,172 @@
+<template>
+  <div class="panel-tab__content">
+    <el-table :data="elementPropertyList" max-height="240" border fit>
+      <el-table-column label="序号" width="50px" type="index" />
+      <el-table-column label="属性名" prop="name" min-width="100px" show-overflow-tooltip />
+      <el-table-column label="属性值" prop="value" min-width="100px" show-overflow-tooltip />
+      <el-table-column label="操作" width="90px">
+        <template #default="scope">
+          <el-button type="text" @click="openAttributesForm(scope, scope.$index)">编辑</el-button>
+          <el-divider direction="vertical" />
+          <el-button
+            type="text"
+            style="color: #ff4d4f"
+            @click="removeAttributes(scope, scope.$index)"
+            >移除</el-button
+          >
+        </template>
+      </el-table-column>
+    </el-table>
+    <div class="element-drawer__button">
+      <XButton
+        type="primary"
+        preIcon="ep:plus"
+        title="添加属性"
+        @click="openAttributesForm(null, -1)"
+      />
+    </div>
+
+    <el-dialog
+      v-model="propertyFormModelVisible"
+      title="属性配置"
+      width="600px"
+      append-to-body
+      destroy-on-close
+    >
+      <el-form :model="propertyForm" label-width="80px" ref="attributeFormRef">
+        <el-form-item label="属性名：" prop="name">
+          <el-input v-model="propertyForm.name" clearable />
+        </el-form-item>
+        <el-form-item label="属性值：" prop="value">
+          <el-input v-model="propertyForm.value" clearable />
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <el-button @click="propertyFormModelVisible = false">取 消</el-button>
+        <el-button type="primary" @click="saveAttribute">确 定</el-button>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<script setup lang="ts" name="ElementProperties">
+import { ref, inject, nextTick, watch } from 'vue'
+import {
+  ElMessageBox,
+  ElDialog,
+  ElButton,
+  ElForm,
+  ElFormItem,
+  ElTable,
+  ElTableColumn,
+  ElDivider,
+  ElInput
+} from 'element-plus'
+const props = defineProps({
+  id: String,
+  type: String
+})
+const prefix = inject('prefix')
+// const width = inject('width')
+
+const elementPropertyList = ref([])
+const propertyForm = ref({})
+const editingPropertyIndex = ref(-1)
+const propertyFormModelVisible = ref(false)
+const bpmnElement = ref()
+const otherExtensionList = ref()
+const bpmnElementProperties = ref()
+const bpmnElementPropertyList = ref()
+const attributeFormRef = ref()
+
+const resetAttributesList = () => {
+  bpmnElement.value = window.bpmnInstances.bpmnElement
+  otherExtensionList.value = [] // 其他扩展配置
+  bpmnElementProperties.value =
+    bpmnElement.value.businessObject?.extensionElements?.values?.filter((ex) => {
+      if (ex.$type !== `${prefix.value}:Properties`) {
+        otherExtensionList.value.push(ex)
+      }
+      return ex.$type === `${prefix.value}:Properties`
+    }) ?? []
+
+  // 保存所有的 扩展属性字段
+  bpmnElementPropertyList.value = bpmnElementProperties.value.reduce(
+    (pre, current) => pre.concat(current.values),
+    []
+  )
+  // 复制 显示
+  elementPropertyList.value = JSON.parse(JSON.stringify(bpmnElementPropertyList.value ?? []))
+}
+const openAttributesForm = (attr, index) => {
+  editingPropertyIndex.value = index
+  propertyForm.value = index === -1 ? {} : JSON.parse(JSON.stringify(attr))
+  propertyFormModelVisible.value = true
+  nextTick(() => {
+    if (attributeFormRef.value) attributeFormRef.value.clearValidate()
+  })
+}
+const removeAttributes = (attr, index) => {
+  console.log(attr, 'attr')
+  ElMessageBox.confirm('确认移除该属性吗？', '提示', {
+    confirmButtonText: '确 认',
+    cancelButtonText: '取 消'
+  })
+    .then(() => {
+      elementPropertyList.value.splice(index, 1)
+      bpmnElementPropertyList.value.splice(index, 1)
+      // 新建一个属性字段的保存列表
+      const propertiesObject = window.bpmnInstances.moddle.create(`${prefix.value}:Properties`, {
+        values: bpmnElementPropertyList.value
+      })
+      updateElementExtensions(propertiesObject)
+      resetAttributesList()
+    })
+    .catch(() => console.info('操作取消'))
+}
+const saveAttribute = () => {
+  const { name, value } = propertyForm.value
+  console.log(bpmnElementPropertyList.value)
+  if (editingPropertyIndex.value !== -1) {
+    window.bpmnInstances.modeling.updateModdleProperties(
+      bpmnElement.value,
+      bpmnElementPropertyList.value[editingPropertyIndex.value],
+      {
+        name,
+        value
+      }
+    )
+  } else {
+    // 新建属性字段
+    const newPropertyObject = window.bpmnInstances.moddle.create(`${prefix.value}:Property`, {
+      name,
+      value
+    })
+    // 新建一个属性字段的保存列表
+    const propertiesObject = window.bpmnInstances.moddle.create(`${prefix.value}:Properties`, {
+      values: bpmnElementPropertyList.value.concat([newPropertyObject])
+    })
+    updateElementExtensions(propertiesObject)
+  }
+  propertyFormModelVisible.value = false
+  resetAttributesList()
+}
+const updateElementExtensions = (properties) => {
+  const extensions = window.bpmnInstances.moddle.create('bpmn:ExtensionElements', {
+    values: otherExtensionList.value.concat([properties])
+  })
+  window.bpmnInstances.modeling.updateProperties(bpmnElement.value, {
+    extensionElements: extensions
+  })
+}
+
+watch(
+  () => props.id,
+  (val) => {
+    if (val) {
+      val && val.length && resetAttributesList()
+    }
+  },
+  { immediate: true }
+)
+</script>

yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/penal/signal-message/SignalAndMessage.vue

@@ -0,0 +1,120 @@
+<template>
+  <div class="panel-tab__content">
+    <div class="panel-tab__content--title">
+      <span><Icon icon="ep:menu" style="margin-right: 8px; color: #555555" />消息列表</span>
+      <XButton type="primary" title="创建新消息" preIcon="ep:plus" @click="openModel('message')" />
+    </div>
+    <el-table :data="messageList" border>
+      <el-table-column type="index" label="序号" width="60px" />
+      <el-table-column label="消息ID" prop="id" max-width="300px" show-overflow-tooltip />
+      <el-table-column label="消息名称" prop="name" max-width="300px" show-overflow-tooltip />
+    </el-table>
+    <div
+      class="panel-tab__content--title"
+      style="padding-top: 8px; margin-top: 8px; border-top: 1px solid #eeeeee"
+    >
+      <span><Icon icon="ep:menu" style="margin-right: 8px; color: #555555" />信号列表</span>
+      <XButton type="primary" title="创建新信号" preIcon="ep:plus" @click="openModel('signal')" />
+    </div>
+    <el-table :data="signalList" border>
+      <el-table-column type="index" label="序号" width="60px" />
+      <el-table-column label="信号ID" prop="id" max-width="300px" show-overflow-tooltip />
+      <el-table-column label="信号名称" prop="name" max-width="300px" show-overflow-tooltip />
+    </el-table>
+
+    <el-dialog
+      v-model="modelVisible"
+      :title="modelConfig.title"
+      :close-on-click-modal="false"
+      width="400px"
+      append-to-body
+      destroy-on-close
+    >
+      <el-form :model="modelObjectForm" label-width="90px">
+        <el-form-item :label="modelConfig.idLabel">
+          <el-input v-model="modelObjectForm.id" clearable />
+        </el-form-item>
+        <el-form-item :label="modelConfig.nameLabel">
+          <el-input v-model="modelObjectForm.name" clearable />
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <el-button @click="modelVisible = false">取 消</el-button>
+        <el-button type="primary" @click="addNewObject">保 存</el-button>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+<script setup lang="ts" name="SignalAndMassage">
+import {
+  ElMessage,
+  ElDialog,
+  ElForm,
+  ElFormItem,
+  ElTable,
+  ElTableColumn,
+  ElButton,
+  ElInput
+} from 'element-plus'
+import { ref, computed, onMounted } from 'vue'
+const signalList = ref([])
+const messageList = ref([])
+const modelVisible = ref(false)
+const modelType = ref('')
+const modelObjectForm = ref({})
+const rootElements = ref()
+const messageIdMap = ref()
+const signalIdMap = ref()
+const modelConfig = computed(() => {
+  if (modelType.value === 'message') {
+    return { title: '创建消息', idLabel: '消息ID', nameLabel: '消息名称' }
+  } else {
+    return { title: '创建信号', idLabel: '信号ID', nameLabel: '信号名称' }
+  }
+})
+
+const initDataList = () => {
+  console.log(window, 'window')
+  rootElements.value = window.bpmnInstances.modeler.getDefinitions().rootElements
+  messageIdMap.value = {}
+  signalIdMap.value = {}
+  messageList.value = []
+  signalList.value = []
+  rootElements.value.forEach((el) => {
+    if (el.$type === 'bpmn:Message') {
+      messageIdMap.value[el.id] = true
+      messageList.value.push({ ...el })
+    }
+    if (el.$type === 'bpmn:Signal') {
+      signalIdMap.value[el.id] = true
+      signalList.value.push({ ...el })
+    }
+  })
+}
+const openModel = (type) => {
+  modelType.value = type
+  modelObjectForm.value = {}
+  modelVisible.value = true
+}
+const addNewObject = () => {
+  if (modelType.value === 'message') {
+    if (messageIdMap.value[modelObjectForm.value.id]) {
+      ElMessage.error('该消息已存在，请修改id后重新保存')
+    }
+    const messageRef = window.bpmnInstances.moddle.create('bpmn:Message', modelObjectForm.value)
+    rootElements.value.push(messageRef)
+  } else {
+    if (signalIdMap.value[modelObjectForm.value.id]) {
+      ElMessage.error('该信号已存在，请修改id后重新保存')
+    }
+    const signalRef = window.bpmnInstances.moddle.create('bpmn:Signal', modelObjectForm.value)
+    rootElements.value.push(signalRef)
+  }
+  modelVisible.value = false
+  initDataList()
+}
+
+onMounted(() => {
+  initDataList()
+})
+</script>

yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/penal/task/ElementTask.vue

@@ -0,0 +1,85 @@
+<template>
+  <div class="panel-tab__content">
+    <el-form size="mini" label-width="90px">
+      <el-form-item label="异步延续">
+        <el-checkbox
+          v-model="taskConfigForm.asyncBefore"
+          label="异步前"
+          @change="changeTaskAsync"
+        />
+        <el-checkbox v-model="taskConfigForm.asyncAfter" label="异步后" @change="changeTaskAsync" />
+        <el-checkbox
+          v-model="taskConfigForm.exclusive"
+          v-if="taskConfigForm.asyncAfter || taskConfigForm.asyncBefore"
+          label="排除"
+          @change="changeTaskAsync"
+        />
+      </el-form-item>
+      <component :is="witchTaskComponent" v-bind="$props" />
+    </el-form>
+  </div>
+</template>
+
+<script setup lang="ts" name="ElementTaskConfig">
+import { ref, watch, shallowRef } from 'vue'
+import { ElForm, ElFormItem, ElCheckbox } from 'element-plus'
+import UserTask from './task-components/UserTask.vue'
+import ScriptTask from './task-components/ScriptTask.vue'
+import ReceiveTask from './task-components/ReceiveTask.vue'
+
+const props = defineProps({
+  id: String,
+  type: String
+})
+const taskConfigForm = ref({
+  asyncAfter: false,
+  asyncBefore: false,
+  exclusive: false
+})
+const witchTaskComponent = shallowRef()
+const installedComponent = ref({
+  // 手工任务与普通任务一致，不需要其他配置
+  // 接收消息任务，需要在全局下插入新的消息实例，并在该节点下的 messageRef 属性绑定该实例
+  // 发送任务、服务任务、业务规则任务共用一个相同配置
+  UserTask: 'UserTask', // 用户任务配置
+  ScriptTask: 'ScriptTask', // 脚本任务配置
+  ReceiveTask: 'ReceiveTask' // 消息接收任务
+})
+const bpmnElement = ref()
+
+const changeTaskAsync = () => {
+  if (!taskConfigForm.value.asyncBefore && !taskConfigForm.value.asyncAfter) {
+    taskConfigForm.value.exclusive = false
+  }
+  window.bpmnInstances.modeling.updateProperties(window.bpmnInstances.bpmnElement, {
+    ...taskConfigForm.value
+  })
+}
+
+watch(
+  () => props.id,
+  () => {
+    bpmnElement.value = window.bpmnInstances.bpmnElement
+    taskConfigForm.value.asyncBefore = bpmnElement.value?.businessObject?.asyncBefore
+    taskConfigForm.value.asyncAfter = bpmnElement.value?.businessObject?.asyncAfter
+    taskConfigForm.value.exclusive = bpmnElement.value?.businessObject?.exclusive
+  },
+  { immediate: true }
+)
+watch(
+  () => props.type,
+  () => {
+    // witchTaskComponent.value = installedComponent.value[props.type]
+    if (props.type == installedComponent.value.UserTask) {
+      witchTaskComponent.value = UserTask
+    }
+    if (props.type == installedComponent.value.ScriptTask) {
+      witchTaskComponent.value = ScriptTask
+    }
+    if (props.type == installedComponent.value.ReceiveTask) {
+      witchTaskComponent.value = ReceiveTask
+    }
+  },
+  { immediate: true }
+)
+</script>

yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/penal/task/task-components/ReceiveTask.vue

@@ -0,0 +1,123 @@
+<template>
+  <div style="margin-top: 16px">
+    <el-form-item label="消息实例">
+      <div
+        style="
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+          flex-wrap: nowrap;
+        "
+      >
+        <el-select v-model="bindMessageId" @change="updateTaskMessage">
+          <el-option
+            v-for="id in Object.keys(messageMap)"
+            :value="id"
+            :label="messageMap[id]"
+            :key="id"
+          />
+        </el-select>
+        <XButton
+          size="mini"
+          type="primary"
+          preIcon="ep:plus"
+          style="margin-left: 8px"
+          @click="openMessageModel"
+        />
+      </div>
+    </el-form-item>
+    <el-dialog
+      v-model="messageModelVisible"
+      :close-on-click-modal="false"
+      title="创建新消息"
+      width="400px"
+      append-to-body
+      destroy-on-close
+    >
+      <el-form :model="newMessageForm" size="mini" label-width="90px">
+        <el-form-item label="消息ID">
+          <el-input v-model="newMessageForm.id" clearable />
+        </el-form-item>
+        <el-form-item label="消息名称">
+          <el-input v-model="newMessageForm.name" clearable />
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <el-button size="mini" type="primary" @click="createNewMessage">确 认</el-button>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<script setup lang="ts" name="ReceiveTask">
+import { ref, watch, onBeforeUnmount, onMounted, nextTick } from 'vue'
+import { ElMessage, ElFormItem, ElDialog, ElForm, ElSelect, ElOption } from 'element-plus'
+const props = defineProps({
+  id: String,
+  type: String
+})
+const bindMessageId = ref('')
+const newMessageForm = ref({})
+const messageMap = ref({})
+const messageModelVisible = ref(false)
+const bpmnElement = ref()
+const bpmnMessageRefsMap = ref()
+const bpmnRootElements = ref()
+
+const getBindMessage = () => {
+  bpmnElement.value = window.bpmnInstances.bpmnElement
+  bindMessageId.value = bpmnElement.value.businessObject?.messageRef?.id || '-1'
+}
+const openMessageModel = () => {
+  messageModelVisible.value = true
+  newMessageForm.value = {}
+}
+const createNewMessage = () => {
+  if (messageMap.value[newMessageForm.value.id]) {
+    ElMessage.error('该消息已存在，请修改id后重新保存')
+    return
+  }
+  const newMessage = window.bpmnInstances.moddle.create('bpmn:Message', newMessageForm.value)
+  bpmnRootElements.value.push(newMessage)
+  messageMap.value[newMessageForm.value.id] = newMessageForm.value.name
+  bpmnMessageRefsMap.value[newMessageForm.value.id] = newMessage
+  messageModelVisible.value = false
+}
+const updateTaskMessage = (messageId) => {
+  if (messageId === '-1') {
+    window.bpmnInstances.modeling.updateProperties(bpmnElement.value, {
+      messageRef: null
+    })
+  } else {
+    window.bpmnInstances.modeling.updateProperties(bpmnElement.value, {
+      messageRef: bpmnMessageRefsMap.value[messageId]
+    })
+  }
+}
+
+onMounted(() => {
+  bpmnMessageRefsMap.value = Object.create(null)
+  bpmnRootElements.value = window.bpmnInstances.modeler.getDefinitions().rootElements
+  bpmnRootElements.value
+    .filter((el) => el.$type === 'bpmn:Message')
+    .forEach((m) => {
+      bpmnMessageRefsMap.value[m.id] = m
+      messageMap.value[m.id] = m.name
+    })
+  messageMap.value['-1'] = '无'
+})
+
+onBeforeUnmount(() => {
+  bpmnElement.value = null
+})
+watch(
+  () => props.id,
+  () => {
+    bpmnElement.value = window.bpmnInstances.bpmnElement
+    nextTick(() => {
+      getBindMessage()
+    })
+  },
+  { immediate: true }
+)
+</script>

yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/penal/task/task-components/ScriptTask.vue

@@ -0,0 +1,98 @@
+<template>
+  <div style="margin-top: 16px">
+    <el-form-item label="脚本格式">
+      <el-input
+        v-model="scriptTaskForm.scriptFormat"
+        clearable
+        @input="updateElementTask()"
+        @change="updateElementTask()"
+      />
+    </el-form-item>
+    <el-form-item label="脚本类型">
+      <el-select v-model="scriptTaskForm.scriptType">
+        <el-option label="内联脚本" value="inline" />
+        <el-option label="外部资源" value="external" />
+      </el-select>
+    </el-form-item>
+    <el-form-item label="脚本" v-show="scriptTaskForm.scriptType === 'inline'">
+      <el-input
+        v-model="scriptTaskForm.script"
+        type="textarea"
+        resize="vertical"
+        :autosize="{ minRows: 2, maxRows: 4 }"
+        clearable
+        @input="updateElementTask()"
+        @change="updateElementTask()"
+      />
+    </el-form-item>
+    <el-form-item label="资源地址" v-show="scriptTaskForm.scriptType === 'external'">
+      <el-input
+        v-model="scriptTaskForm.resource"
+        clearable
+        @input="updateElementTask()"
+        @change="updateElementTask()"
+      />
+    </el-form-item>
+    <el-form-item label="结果变量">
+      <el-input
+        v-model="scriptTaskForm.resultVariable"
+        clearable
+        @input="updateElementTask()"
+        @change="updateElementTask()"
+      />
+    </el-form-item>
+  </div>
+</template>
+
+<script setup lang="ts" name="ScriptTask">
+import { ref, watch, nextTick, onBeforeUnmount } from 'vue'
+import { ElInput, ElFormItem } from 'element-plus'
+const props = defineProps({
+  id: String,
+  type: String
+})
+const defaultTaskForm = ref({
+  scriptFormat: '',
+  script: '',
+  resource: '',
+  resultVariable: ''
+})
+const scriptTaskForm = ref({})
+const bpmnElement = ref()
+
+const resetTaskForm = () => {
+  for (let key in defaultTaskForm.value) {
+    let value = bpmnElement.value?.businessObject[key] || defaultTaskForm.value[key]
+    scriptTaskForm.value[key] = value
+  }
+  scriptTaskForm.value.scriptType = scriptTaskForm.value.script ? 'inline' : 'external'
+}
+const updateElementTask = () => {
+  let taskAttr = Object.create(null)
+  taskAttr.scriptFormat = scriptTaskForm.value.scriptFormat || null
+  taskAttr.resultVariable = scriptTaskForm.value.resultVariable || null
+  if (scriptTaskForm.value.scriptType === 'inline') {
+    taskAttr.script = scriptTaskForm.value.script || null
+    taskAttr.resource = null
+  } else {
+    taskAttr.resource = scriptTaskForm.value.resource || null
+    taskAttr.script = null
+  }
+  window.bpmnInstances.modeling.updateProperties(bpmnElement.value, taskAttr)
+}
+
+onBeforeUnmount(() => {
+  bpmnElement.value = null
+})
+
+watch(
+  () => props.id,
+  () => {
+    bpmnElement.value = window.bpmnInstances.bpmnElement
+    nextTick(() => {
+      resetTaskForm()
+    })
+  },
+  { immediate: true }
+)
+</script>

yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/penal/task/task-components/UserTask.vue

@@ -0,0 +1,97 @@
+<template>
+  <div style="margin-top: 16px">
+    <!--    <el-form-item label="处理用户">-->
+    <!--      <el-select v-model="userTaskForm.assignee" @change="updateElementTask('assignee')">-->
+    <!--        <el-option v-for="ak in mockData" :key="'ass-' + ak" :label="`用户${ak}`" :value="`user${ak}`" />-->
+    <!--      </el-select>-->
+    <!--    </el-form-item>-->
+    <!--    <el-form-item label="候选用户">-->
+    <!--      <el-select v-model="userTaskForm.candidateUsers" multiple collapse-tags @change="updateElementTask('candidateUsers')">-->
+    <!--        <el-option v-for="uk in mockData" :key="'user-' + uk" :label="`用户${uk}`" :value="`user${uk}`" />-->
+    <!--      </el-select>-->
+    <!--    </el-form-item>-->
+    <!--    <el-form-item label="候选分组">-->
+    <!--      <el-select v-model="userTaskForm.candidateGroups" multiple collapse-tags @change="updateElementTask('candidateGroups')">-->
+    <!--        <el-option v-for="gk in mockData" :key="'ass-' + gk" :label="`分组${gk}`" :value="`group${gk}`" />-->
+    <!--      </el-select>-->
+    <!--    </el-form-item>-->
+    <el-form-item label="到期时间">
+      <el-input v-model="userTaskForm.dueDate" clearable @change="updateElementTask('dueDate')" />
+    </el-form-item>
+    <el-form-item label="跟踪时间">
+      <el-input
+        v-model="userTaskForm.followUpDate"
+        clearable
+        @change="updateElementTask('followUpDate')"
+      />
+    </el-form-item>
+    <el-form-item label="优先级">
+      <el-input v-model="userTaskForm.priority" clearable @change="updateElementTask('priority')" />
+    </el-form-item>
+    友情提示：任务的分配规则，使用
+    <router-link target="_blank" :to="{ path: '/bpm/manager/model' }"
+      ><el-link type="danger">流程模型</el-link>
+    </router-link>
+    下的【分配规则】替代，提供指定角色、部门负责人、部门成员、岗位、工作组、自定义脚本等 7
+    种维护的任务分配维度，更加灵活！
+  </div>
+</template>
+
+<script setup lang="ts" name="UserTask">
+import { ref, watch, nextTick, onBeforeUnmount } from 'vue'
+import { ElLink, ElFormItem, ElInput } from 'element-plus'
+const props = defineProps({
+  id: String,
+  type: String
+})
+const defaultTaskForm = ref({
+  assignee: '',
+  candidateUsers: [],
+  candidateGroups: [],
+  dueDate: '',
+  followUpDate: '',
+  priority: ''
+})
+const userTaskForm = ref({})
+// const mockData=ref([1, 2, 3, 4, 5, 6, 7, 8, 9, 10])
+const bpmnElement = ref()
+const resetTaskForm = () => {
+  for (let key in defaultTaskForm.value) {
+    let value
+    if (key === 'candidateUsers' || key === 'candidateGroups') {
+      value = bpmnElement.value?.businessObject[key]
+        ? bpmnElement.value.businessObject[key].split(',')
+        : []
+    } else {
+      value = bpmnElement.value?.businessObject[key] || defaultTaskForm.value[key]
+    }
+    userTaskForm.value[key] = value
+  }
+}
+const updateElementTask = (key) => {
+  const taskAttr = Object.create(null)
+  if (key === 'candidateUsers' || key === 'candidateGroups') {
+    taskAttr[key] =
+      userTaskForm.value[key] && userTaskForm.value[key].length
+        ? userTaskForm.value[key].join()
+        : null
+  } else {
+    taskAttr[key] = userTaskForm.value[key] || null
+  }
+  window.bpmnInstances.modeling.updateProperties(bpmnElement.value, taskAttr)
+}
+
+watch(
+  () => props.id,
+  () => {
+    bpmnElement.value = window.bpmnInstances.bpmnElement
+    nextTick(() => {
+      resetTaskForm()
+    })
+  },
+  { immediate: true }
+)
+onBeforeUnmount(() => {
+  bpmnElement.value = null
+})
+</script>

yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/theme/element-variables.scss

@@ -0,0 +1,70 @@
+/* 改变主题色变量 */
+$--color-primary: #1890ff;
+$--color-danger: #ff4d4f;
+
+/* 改变 icon 字体路径变量，必需 */
+$--font-path: '~element-ui/lib/theme-chalk/fonts';
+
+@import "~element-ui/packages/theme-chalk/src/index";
+
+.el-table td,
+.el-table th {
+  color: #333;
+}
+.el-drawer__header {
+  padding: 16px 16px 8px 16px;
+  margin: 0;
+  line-height: 24px;
+  font-size: 18px;
+  color: #303133;
+  box-sizing: border-box;
+  border-bottom: 1px solid #e8e8e8;
+}
+div[class^="el-drawer"]:focus,
+span:focus {
+  outline: none;
+}
+.el-drawer__body {
+  box-sizing: border-box;
+  padding: 16px;
+  width: 100%;
+  overflow-y: auto;
+}
+
+.el-dialog {
+  margin-top: 50vh !important;
+  transform: translateY(-50%);
+  overflow: hidden;
+}
+.el-dialog__wrapper {
+  overflow: hidden;
+  max-height: 100vh;
+}
+.el-dialog__header {
+  padding: 16px 16px 8px 16px;
+  box-sizing: border-box;
+  border-bottom: 1px solid #e8e8e8;
+}
+.el-dialog__body {
+  padding: 16px;
+  max-height: 80vh;
+  box-sizing: border-box;
+  overflow-y: auto;
+}
+.el-dialog__footer {
+  padding: 16px;
+  box-sizing: border-box;
+  border-top: 1px solid #e8e8e8;
+}
+.el-dialog__close {
+  font-weight: 600;
+}
+.el-select {
+  width: 100%;
+}
+.el-divider:not(.el-divider--horizontal) {
+  margin: 0 8px ;
+}
+.el-divider.el-divider--horizontal {
+  margin: 16px 0;
+}

yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/theme/index.scss

@@ -0,0 +1,2 @@
+@import "./process-designer.scss";
+@import "./process-panel.scss";

yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/theme/process-designer.scss

@@ -0,0 +1,161 @@
+@import 'bpmn-js-token-simulation/assets/css/bpmn-js-token-simulation.css';
+@import 'bpmn-js-token-simulation/assets/css/font-awesome.min.css';
+@import 'bpmn-js-token-simulation/assets/css/normalize.css';
+
+// 边框被 token-simulation 样式覆盖了
+.djs-palette {
+  background: var(--palette-background-color);
+  border: solid 1px var(--palette-border-color) !important;
+  border-radius: 2px;
+}
+
+.my-process-designer {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  .my-process-designer__header {
+    width: 100%;
+    min-height: 36px;
+    .el-button {
+      text-align: center;
+    }
+    .el-button-group {
+      margin: 4px;
+    }
+    .el-tooltip__popper {
+      .el-button {
+        width: 100%;
+        text-align: left;
+        padding-left: 8px;
+        padding-right: 8px;
+      }
+      .el-button:hover {
+        background: rgba(64, 158, 255, 0.8);
+        color: #ffffff;
+      }
+    }
+    .align {
+      position: relative;
+      i {
+        &:after {
+          content: '|';
+          position: absolute;
+          // transform: rotate(90deg) translate(200%, 60%);
+          transform: rotate(180deg) translate(271%, -10%);
+        }
+      }
+    }
+    .align.align-left i {
+      transform: rotate(90deg);
+    }
+    .align.align-right i {
+      transform: rotate(-90deg);
+    }
+    .align.align-top i {
+      transform: rotate(180deg);
+    }
+    .align.align-bottom i {
+      transform: rotate(0deg);
+    }
+    .align.align-center i {
+      transform: rotate(0deg);
+      &:after {
+        // transform: rotate(90deg) translate(0, 60%);
+        transform: rotate(0deg) translate(-0%, -5%);
+      }
+    }
+    .align.align-middle i {
+      transform: rotate(-90deg);
+      &:after {
+        // transform: rotate(90deg) translate(0, 60%);
+        transform: rotate(0deg) translate(0, -10%);
+      }
+    }
+  }
+  .my-process-designer__container {
+    display: inline-flex;
+    width: 100%;
+    flex: 1;
+    .my-process-designer__canvas {
+      flex: 1;
+      height: 100%;
+      position: relative;
+      background: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PHBhdHRlcm4gaWQ9ImEiIHdpZHRoPSI0MCIgaGVpZ2h0PSI0MCIgcGF0dGVyblVuaXRzPSJ1c2VyU3BhY2VPblVzZSI+PHBhdGggZD0iTTAgMTBoNDBNMTAgMHY0ME0wIDIwaDQwTTIwIDB2NDBNMCAzMGg0ME0zMCAwdjQwIiBmaWxsPSJub25lIiBzdHJva2U9IiNlMGUwZTAiIG9wYWNpdHk9Ii4yIi8+PHBhdGggZD0iTTQwIDBIMHY0MCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZTBlMGUwIi8+PC9wYXR0ZXJuPjwvZGVmcz48cmVjdCB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2EpIi8+PC9zdmc+')
+        repeat !important;
+      div.toggle-mode {
+        display: none;
+      }
+    }
+    .my-process-designer__property-panel {
+      height: 100%;
+      overflow: scroll;
+      overflow-y: auto;
+      z-index: 10;
+      * {
+        box-sizing: border-box;
+      }
+    }
+    svg {
+      width: 100%;
+      height: 100%;
+      min-height: 100%;
+      overflow: hidden;
+    }
+  }
+}
+
+//侧边栏配置
+// .djs-palette .two-column .open {
+.open {
+  // .djs-palette.open {
+  .djs-palette-entries {
+    div[class^='bpmn-icon-']:before,
+    div[class*='bpmn-icon-']:before {
+      line-height: unset;
+    }
+    div.entry {
+      position: relative;
+    }
+    div.entry:hover {
+      &::after {
+        width: max-content;
+        content: attr(title);
+        vertical-align: text-bottom;
+        position: absolute;
+        right: -10px;
+        top: 0;
+        bottom: 0;
+        overflow: hidden;
+        transform: translateX(100%);
+        font-size: 0.5em;
+        display: inline-block;
+        text-decoration: inherit;
+        font-variant: normal;
+        text-transform: none;
+        background: #fafafa;
+        box-shadow: 0 0 6px #eeeeee;
+        border: 1px solid #cccccc;
+        box-sizing: border-box;
+        padding: 0 16px;
+        border-radius: 4px;
+        z-index: 100;
+      }
+    }
+  }
+}
+pre {
+  margin: 0;
+  height: 100%;
+  overflow: hidden;
+  max-height: calc(80vh - 32px);
+  overflow-y: auto;
+}
+.hljs {
+  word-break: break-word;
+  white-space: pre-wrap;
+}
+.hljs * {
+  font-family: Consolas, Monaco, monospace;
+}

yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/theme/process-panel.scss

@@ -0,0 +1,107 @@
+.process-panel__container {
+  box-sizing: border-box;
+  padding: 0 8px;
+  border-left: 1px solid #eeeeee;
+  box-shadow: 0 0 8px #cccccc;
+  max-height: 100%;
+  overflow-y: scroll;
+}
+.panel-tab__title {
+  font-weight: 600;
+  padding: 0 8px;
+  font-size: 1.1em;
+  line-height: 1.2em;
+  i {
+    margin-right: 8px;
+    font-size: 1.2em;
+  }
+}
+.panel-tab__content {
+  width: 100%;
+  box-sizing: border-box;
+  border-top: 1px solid #eeeeee;
+  padding: 8px 16px;
+  .panel-tab__content--title {
+    display: flex;
+    justify-content: space-between;
+    padding-bottom: 8px;
+    span {
+      flex: 1;
+      text-align: left;
+    }
+  }
+}
+.element-property {
+  width: 100%;
+  display: flex;
+  align-items: flex-start;
+  margin: 8px 0;
+  .element-property__label {
+    display: block;
+    width: 90px;
+    text-align: right;
+    overflow: hidden;
+    padding-right: 12px;
+    line-height: 32px;
+    font-size: 14px;
+    box-sizing: border-box;
+  }
+  .element-property__value {
+    flex: 1;
+    line-height: 32px;
+  }
+  .el-form-item {
+    width: 100%;
+    margin-bottom: 0;
+    padding-bottom: 18px;
+  }
+}
+.list-property {
+  flex-direction: column;
+  .element-listener-item {
+    width: 100%;
+    display: inline-grid;
+    grid-template-columns: 16px auto 32px 32px;
+    grid-column-gap: 8px;
+  }
+  .element-listener-item + .element-listener-item {
+    margin-top: 8px;
+  }
+}
+.listener-filed__title {
+  display: inline-flex;
+  width: 100%;
+  justify-content: space-between;
+  align-items: center;
+  margin-top: 0;
+  span {
+    width: 200px;
+    text-align: left;
+    font-size: 14px;
+  }
+  i {
+    margin-right: 8px;
+  }
+}
+.element-drawer__button {
+  margin-top: 8px;
+  width: 100%;
+  display: inline-flex;
+  justify-content: space-around;
+}
+.element-drawer__button > .el-button {
+  width: 100%;
+}
+
+.el-collapse-item__content {
+  padding-bottom: 0;
+}
+.el-input.is-disabled .el-input__inner {
+  color: #999999;
+}
+.el-form-item.el-form-item--mini {
+  margin-bottom: 0;
+  & + .el-form-item {
+    margin-top: 16px;
+  }
+}

yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/package/utils.js

@@ -0,0 +1,69 @@
+// 创建监听器实例
+export function createListenerObject(options, isTask, prefix) {
+  const listenerObj = Object.create(null);
+  listenerObj.event = options.event;
+  isTask && (listenerObj.id = options.id); // 任务监听器特有的 id 字段
+  switch (options.listenerType) {
+    case "scriptListener":
+      listenerObj.script = createScriptObject(options, prefix);
+      break;
+    case "expressionListener":
+      listenerObj.expression = options.expression;
+      break;
+    case "delegateExpressionListener":
+      listenerObj.delegateExpression = options.delegateExpression;
+      break;
+    default:
+      listenerObj.class = options.class;
+  }
+  // 注入字段
+  if (options.fields) {
+    listenerObj.fields = options.fields.map(field => {
+      return createFieldObject(field, prefix);
+    });
+  }
+  // 任务监听器的 定时器 设置
+  if (isTask && options.event === "timeout" && !!options.eventDefinitionType) {
+    const timeDefinition = window.bpmnInstances.moddle.create("bpmn:FormalExpression", { body: options.eventTimeDefinitions });
+    const TimerEventDefinition = window.bpmnInstances.moddle.create("bpmn:TimerEventDefinition", {
+      id: `TimerEventDefinition_${uuid(8)}`,
+      [`time${options.eventDefinitionType.replace(/^\S/, s => s.toUpperCase())}`]: timeDefinition
+    });
+    listenerObj.eventDefinitions = [TimerEventDefinition];
+  }
+  return window.bpmnInstances.moddle.create(`${prefix}:${isTask ? "TaskListener" : "ExecutionListener"}`, listenerObj);
+}
+
+// 创建 监听器的注入字段 实例
+export function createFieldObject(option, prefix) {
+  const { name, fieldType, string, expression } = option;
+  const fieldConfig = fieldType === "string" ? { name, string } : { name, expression };
+  return window.bpmnInstances.moddle.create(`${prefix}:Field`, fieldConfig);
+}
+
+// 创建脚本实例
+export function createScriptObject(options, prefix) {
+  const { scriptType, scriptFormat, value, resource } = options;
+  const scriptConfig = scriptType === "inlineScript" ? { scriptFormat, value } : { scriptFormat, resource };
+  return window.bpmnInstances.moddle.create(`${prefix}:Script`, scriptConfig);
+}
+
+// 更新元素扩展属性
+export function updateElementExtensions(element, extensionList) {
+  const extensions = window.bpmnInstances.moddle.create("bpmn:ExtensionElements", {
+    values: extensionList
+  });
+  window.bpmnInstances.modeling.updateProperties(element, {
+    extensionElements: extensions
+  });
+}
+
+// 创建一个id
+export function uuid(length = 8, chars) {
+  let result = "";
+  let charsString = chars || "0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ";
+  for (let i = length; i > 0; --i) {
+    result += charsString[Math.floor(Math.random() * charsString.length)];
+  }
+  return result;
+}

yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/src/highlight/index.js

@@ -0,0 +1,5 @@
+const hljs = require("highlight.js/lib/core");
+hljs.registerLanguage("xml", require("highlight.js/lib/languages/xml"));
+hljs.registerLanguage("json", require("highlight.js/lib/languages/json"));
+
+module.exports = hljs;

yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/src/modules/custom-renderer/CustomRenderer.js

@@ -0,0 +1,14 @@
+import BpmnRenderer from "bpmn-js/lib/draw/BpmnRenderer";
+
+export default function CustomRenderer(config, eventBus, styles, pathMap, canvas, textRenderer) {
+  BpmnRenderer.call(this, config, eventBus, styles, pathMap, canvas, textRenderer, 2000);
+
+  this.handlers["label"] = function() {
+    return null;
+  };
+}
+
+const F = function() {}; // 核心，利用空对象作为中介；
+F.prototype = BpmnRenderer.prototype; // 核心，将父类的原型赋值给空对象F；
+CustomRenderer.prototype = new F(); // 核心，将 F的实例赋值给子类；
+CustomRenderer.prototype.constructor = CustomRenderer; // 修复子类CustomRenderer的构造器指向，防止原型链的混乱；

yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/src/modules/custom-renderer/index.js

@@ -0,0 +1,6 @@
+import CustomRenderer from "./CustomRenderer";
+
+export default {
+  __init__: ["customRenderer"],
+  customRenderer: ["type", CustomRenderer]
+};

yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/src/modules/rules/CustomRules.js

@@ -0,0 +1,16 @@
+import BpmnRules from "bpmn-js/lib/features/rules/BpmnRules";
+import inherits from "inherits";
+
+export default function CustomRules(eventBus) {
+  BpmnRules.call(this, eventBus);
+}
+
+inherits(CustomRules, BpmnRules);
+
+CustomRules.prototype.canDrop = function() {
+  return false;
+};
+
+CustomRules.prototype.canMove = function() {
+  return false;
+};

yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/src/modules/rules/index.js

@@ -0,0 +1,6 @@
+import CustomRules from "./CustomRules";
+
+export default {
+  __init__: ["customRules"],
+  customRules: ["type", CustomRules]
+};

yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/src/translations.ts

@@ -0,0 +1,25 @@
+/**
+ * This is a sample file that should be replaced with the actual translation.
+ *
+ * Checkout https://github.com/bpmn-io/bpmn-js-i18n for a list of available
+ * translations and labels to translate.
+ */
+export default {
+  'Exclusive Gateway': 'Exklusives Gateway',
+  'Parallel Gateway': 'Paralleles Gateway',
+  'Inclusive Gateway': 'Inklusives Gateway',
+  'Complex Gateway': 'Komplexes Gateway',
+  'Event based Gateway': 'Ereignis-basiertes Gateway',
+  'Message Start Event': '消息启动事件',
+  'Timer Start Event': '定时启动事件',
+  'Conditional Start Event': '条件启动事件',
+  'Signal Start Event': '信号启动事件',
+  'Error Start Event': '错误启动事件',
+  'Escalation Start Event': '升级启动事件',
+  'Compensation Start Event': '补偿启动事件',
+  'Message Start Event (non-interrupting)': '消息启动事件 (非中断)',
+  'Timer Start Event (non-interrupting)': '定时启动事件 (非中断)',
+  'Conditional Start Event (non-interrupting)': '条件启动事件 (非中断)',
+  'Signal Start Event (non-interrupting)': '信号启动事件 (非中断)',
+  'Escalation Start Event (non-interrupting)': '升级启动事件 (非中断)'
+}

yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/src/utils/directive/clickOutSide.js

@@ -0,0 +1,39 @@
+//outside.js
+
+const ctx = "@@clickoutsideContext";
+
+export default {
+  bind(el, binding, vnode) {
+    const ele = el;
+    const documentHandler = e => {
+      if (!vnode.context || ele.contains(e.target)) {
+        return false;
+      }
+      // 调用指令回调
+      if (binding.expression) {
+        vnode.context[el[ctx].methodName](e);
+      } else {
+        el[ctx].bindingFn(e);
+      }
+    };
+    // 将方法添加到ele
+    ele[ctx] = {
+      documentHandler,
+      methodName: binding.expression,
+      bindingFn: binding.value
+    };
+
+    setTimeout(() => {
+      document.addEventListener("touchstart", documentHandler); // 为document绑定事件
+    });
+  },
+  update(el, binding) {
+    const ele = el;
+    ele[ctx].methodName = binding.expression;
+    ele[ctx].bindingFn = binding.value;
+  },
+  unbind(el) {
+    document.removeEventListener("touchstart", el[ctx].documentHandler); // 解绑
+    delete el[ctx];
+  }
+};

yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/src/utils/index.js

@@ -0,0 +1,10 @@
+export function debounce(fn, delay = 500) {
+  let timer;
+  return function(...args) {
+    if (timer) {
+      clearTimeout(timer);
+      timer = null;
+    }
+    timer = setTimeout(fn.bind(this, ...args), delay);
+  };
+}

yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/src/utils/log.js

@@ -0,0 +1,63 @@
+class Log {
+  static type = ["primary", "success", "warn", "error", "info"];
+
+  static typeColor(type = "default") {
+    let color = "";
+    switch (type) {
+      case "primary":
+        color = "#2d8cf0";
+        break;
+      case "success":
+        color = "#19be6b";
+        break;
+      case "info":
+        color = "#909399";
+        break;
+      case "warn":
+        color = "#ff9900";
+        break;
+      case "error":
+        color = "#f03f14";
+        break;
+      case "default":
+        color = "#35495E";
+        break;
+      default:
+        color = type;
+        break;
+    }
+    return color;
+  }
+
+  static print(text, type = "default", back = false) {
+    if (typeof text === "object") {
+      // 如果是對象則調用打印對象方式
+      console.dir(text);
+      return;
+    }
+    if (back) {
+      // 如果是打印帶背景圖的
+      console.log(`%c ${text} `, `background:${this.typeColor(type)}; padding: 2px; border-radius: 4px;color: #fff;`);
+    } else {
+      console.log(`%c ${text} `, `color: ${this.typeColor(type)};`);
+    }
+  }
+
+  static pretty(title, text, type = "primary") {
+    if (typeof text === "object") {
+      console.log(
+        `%c ${title} %c`,
+        `background:${this.typeColor(type)};border:1px solid ${this.typeColor(type)}; padding: 1px; border-radius: 4px 0 0 4px; color: #fff;`
+      );
+      console.dir(text);
+      return;
+    }
+    console.log(
+      `%c ${title} %c ${text} %c`,
+      `background:${this.typeColor(type)};border:1px solid ${this.typeColor(type)}; padding: 1px; border-radius: 4px 0 0 4px; color: #fff;`,
+      `border:1px solid ${this.typeColor(type)}; padding: 1px; border-radius: 0 4px 4px 0; color: ${this.typeColor(type)};`,
+      "background:transparent"
+    );
+  }
+}
+export default Log;

yudao-ui-admin-vue3/src/components/bpmnProcessDesigner/src/utils/xml2json.js

@@ -0,0 +1,50 @@
+function xmlStr2XmlObj(xmlStr) {
+  let xmlObj = {};
+  if (document.all) {
+    const xmlDom = new window.ActiveXObject("Microsoft.XMLDOM");
+    xmlDom.loadXML(xmlStr);
+    xmlObj = xmlDom;
+  } else {
+    xmlObj = new DOMParser().parseFromString(xmlStr, "text/xml");
+  }
+  return xmlObj;
+}
+
+function xml2json(xml) {
+  try {
+    let obj = {};
+    if (xml.children.length > 0) {
+      for (let i = 0; i < xml.children.length; i++) {
+        const item = xml.children.item(i);
+        const nodeName = item.nodeName;
+        if (typeof obj[nodeName] == "undefined") {
+          obj[nodeName] = xml2json(item);
+        } else {
+          if (typeof obj[nodeName].push == "undefined") {
+            const old = obj[nodeName];
+            obj[nodeName] = [];
+            obj[nodeName].push(old);
+          }
+          obj[nodeName].push(xml2json(item));
+        }
+      }
+    } else {
+      obj = xml.textContent;
+    }
+    return obj;
+  } catch (e) {
+    console.log(e.message);
+  }
+}
+
+function xmlObj2json(xml) {
+  const xmlObj = xmlStr2XmlObj(xml);
+  console.log(xmlObj);
+  let jsonObj = {};
+  if (xmlObj.childNodes.length > 0) {
+    jsonObj = xml2json(xmlObj);
+  }
+  return jsonObj;
+}
+
+export default xmlObj2json;

yudao-ui-admin-vue3/src/main.ts

@@ -42,6 +42,13 @@ import './permission'
 
 import { isDevMode } from '@/utils/env'
 
+import { MyPD } from '@/components/bpmnProcessDesigner/package/index.js'
+import '@/components/bpmnProcessDesigner/package/theme/index.scss'
+import 'bpmn-js/dist/assets/diagram-js.css'
+import 'bpmn-js/dist/assets/bpmn-font/css/bpmn.css'
+import 'bpmn-js/dist/assets/bpmn-font/css/bpmn-codes.css'
+import 'bpmn-js/dist/assets/bpmn-font/css/bpmn-embedded.css'
+
 // 本地开发模式 全局引入 element-plus 样式，加快第一次进入速度
 if (isDevMode()) {
   console.info(isDevMode())
@@ -54,6 +61,8 @@ const setupAll = async () => {
 
   await setupI18n(app)
 
+  MyPD(app)
+
   setupStore(app)
 
   setupGlobCom(app)

yudao-ui-admin-vue3/src/router/modules/remaining.ts

@@ -198,6 +198,18 @@ const remainingRouter: AppRouteRecordRaw[] = [
           activeMenu: 'bpm/manager/form/formEditor'
         }
       },
+      {
+        path: '/manager/model/edit',
+        component: () => import('@/views/bpm/model/modelEditor.vue'),
+        name: 'modelEditor',
+        meta: {
+          noCache: true,
+          hidden: true,
+          canTo: true,
+          title: '设计流程',
+          activeMenu: 'bpm/manager/model/design'
+        }
+      },
       {
         path: '/manager/definition',
         component: () => import('@/views/bpm/definition/index.vue'),

yudao-ui-admin-vue3/src/types/auto-components.d.ts

@@ -21,54 +21,49 @@ declare module '@vue/runtime-core' {
     DictTag: typeof import('./../components/DictTag/src/DictTag.vue')['default']
     Echart: typeof import('./../components/Echart/src/Echart.vue')['default']
     Editor: typeof import('./../components/Editor/src/Editor.vue')['default']
-    ElAvatar: typeof import('element-plus/es')['ElAvatar']
     ElBadge: typeof import('element-plus/es')['ElBadge']
     ElButton: typeof import('element-plus/es')['ElButton']
     ElCard: typeof import('element-plus/es')['ElCard']
-    ElCheckbox: typeof import('element-plus/es')['ElCheckbox']
     ElCol: typeof import('element-plus/es')['ElCol']
     ElCollapseTransition: typeof import('element-plus/es')['ElCollapseTransition']
     ElConfigProvider: typeof import('element-plus/es')['ElConfigProvider']
     ElDescriptions: typeof import('element-plus/es')['ElDescriptions']
     ElDescriptionsItem: typeof import('element-plus/es')['ElDescriptionsItem']
-    ElDialog: typeof import('element-plus/es')['ElDialog']
     ElDivider: typeof import('element-plus/es')['ElDivider']
     ElDrawer: typeof import('element-plus/es')['ElDrawer']
     ElDropdown: typeof import('element-plus/es')['ElDropdown']
     ElDropdownItem: typeof import('element-plus/es')['ElDropdownItem']
     ElDropdownMenu: typeof import('element-plus/es')['ElDropdownMenu']
+    ElementBaseInfo: typeof import('./../components/bpmnProcessDesigner/package/penal/base/ElementBaseInfo.vue')['default']
+    ElementForm: typeof import('./../components/bpmnProcessDesigner/package/penal/form/ElementForm.vue')['default']
+    ElementListeners: typeof import('./../components/bpmnProcessDesigner/package/penal/listeners/ElementListeners.vue')['default']
+    ElementMultiInstance: typeof import('./../components/bpmnProcessDesigner/package/penal/multi-instance/ElementMultiInstance.vue')['default']
+    ElementOtherConfig: typeof import('./../components/bpmnProcessDesigner/package/penal/other/ElementOtherConfig.vue')['default']
+    ElementProperties: typeof import('./../components/bpmnProcessDesigner/package/penal/properties/ElementProperties.vue')['default']
+    ElementTask: typeof import('./../components/bpmnProcessDesigner/package/penal/task/ElementTask.vue')['default']
     ElForm: typeof import('element-plus/es')['ElForm']
     ElFormItem: typeof import('element-plus/es')['ElFormItem']
     ElIcon: typeof import('element-plus/es')['ElIcon']
-    ElImage: typeof import('element-plus/es')['ElImage']
     ElImageViewer: typeof import('element-plus/es')['ElImageViewer']
     ElInput: typeof import('element-plus/es')['ElInput']
-    ElInputNumber: typeof import('element-plus/es')['ElInputNumber']
     ElLink: typeof import('element-plus/es')['ElLink']
     ElOption: typeof import('element-plus/es')['ElOption']
     ElPopover: typeof import('element-plus/es')['ElPopover']
     ElRadio: typeof import('element-plus/es')['ElRadio']
-    ElRadioButton: typeof import('element-plus/es')['ElRadioButton']
     ElRadioGroup: typeof import('element-plus/es')['ElRadioGroup']
     ElRow: typeof import('element-plus/es')['ElRow']
-    ElScrollbar: typeof import('element-plus/es')['ElScrollbar']
     ElSelect: typeof import('element-plus/es')['ElSelect']
     ElSkeleton: typeof import('element-plus/es')['ElSkeleton']
-    ElSpace: typeof import('element-plus/es')['ElSpace']
     ElSwitch: typeof import('element-plus/es')['ElSwitch']
-    ElTable: typeof import('element-plus/es')['ElTable']
     ElTableColumn: typeof import('element-plus/es')['ElTableColumn']
     ElTabPane: typeof import('element-plus/es')['ElTabPane']
     ElTabs: typeof import('element-plus/es')['ElTabs']
     ElTag: typeof import('element-plus/es')['ElTag']
-    ElTimeline: typeof import('element-plus/es')['ElTimeline']
-    ElTimelineItem: typeof import('element-plus/es')['ElTimelineItem']
     ElTooltip: typeof import('element-plus/es')['ElTooltip']
-    ElTransfer: typeof import('element-plus/es')['ElTransfer']
-    ElTree: typeof import('element-plus/es')['ElTree']
     ElTreeSelect: typeof import('element-plus/es')['ElTreeSelect']
     ElUpload: typeof import('element-plus/es')['ElUpload']
     Error: typeof import('./../components/Error/src/Error.vue')['default']
+    FlowCondition: typeof import('./../components/bpmnProcessDesigner/package/penal/flow-condition/FlowCondition.vue')['default']
     Form: typeof import('./../components/Form/src/Form.vue')['default']
     Highlight: typeof import('./../components/Highlight/src/Highlight.vue')['default']
     Icon: typeof import('./../components/Icon/src/Icon.vue')['default']
@@ -77,16 +72,25 @@ declare module '@vue/runtime-core' {
     ImageViewer: typeof import('./../components/ImageViewer/src/ImageViewer.vue')['default']
     Infotip: typeof import('./../components/Infotip/src/Infotip.vue')['default']
     InputPassword: typeof import('./../components/InputPassword/src/InputPassword.vue')['default']
+    ProcessDesigner: typeof import('./../components/bpmnProcessDesigner/package/designer/ProcessDesigner.vue')['default']
+    ProcessPalette: typeof import('./../components/bpmnProcessDesigner/package/palette/ProcessPalette.vue')['default']
+    ProcessViewer: typeof import('./../components/bpmnProcessDesigner/package/designer/ProcessViewer.vue')['default']
+    PropertiesPanel: typeof import('./../components/bpmnProcessDesigner/package/penal/PropertiesPanel.vue')['default']
     Qrcode: typeof import('./../components/Qrcode/src/Qrcode.vue')['default']
+    ReceiveTask: typeof import('./../components/bpmnProcessDesigner/package/penal/task/task-components/ReceiveTask.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
+    ScriptTask: typeof import('./../components/bpmnProcessDesigner/package/penal/task/task-components/ScriptTask.vue')['default']
     Search: typeof import('./../components/Search/src/Search.vue')['default']
+    SignalAndMessage: typeof import('./../components/bpmnProcessDesigner/package/penal/signal-message/SignalAndMessage.vue')['default']
     Sticky: typeof import('./../components/Sticky/src/Sticky.vue')['default']
     Table: typeof import('./../components/Table/src/Table.vue')['default']
     Tooltip: typeof import('./../components/Tooltip/src/Tooltip.vue')['default']
     UploadFile: typeof import('./../components/UploadFile/src/UploadFile.vue')['default']
     UploadImg: typeof import('./../components/UploadFile/src/UploadImg.vue')['default']
     UploadImgs: typeof import('./../components/UploadFile/src/UploadImgs.vue')['default']
+    UserTask: typeof import('./../components/bpmnProcessDesigner/package/penal/task/task-components/UserTask.vue')['default']
+    UserTaskListeners: typeof import('./../components/bpmnProcessDesigner/package/penal/listeners/UserTaskListeners.vue')['default']
     Verify: typeof import('./../components/Verifition/src/Verify.vue')['default']
     VerifyPoints: typeof import('./../components/Verifition/src/Verify/VerifyPoints.vue')['default']
     VerifySlide: typeof import('./../components/Verifition/src/Verify/VerifySlide.vue')['default']

yudao-ui-admin-vue3/src/views/bpm/model/modelEditor.vue

@@ -0,0 +1,208 @@
+<template>
+  <div class="app-container">
+    <!-- 流程设计器，负责绘制流程等 -->
+    <!-- <myProcessDesigner -->
+    <my-process-designer
+      :key="`designer-${reloadIndex}`"
+      v-if="xmlString != undefined"
+      v-model="xmlString"
+      :value="xmlString"
+      v-bind="controlForm"
+      keyboard
+      ref="processDesigner"
+      @init-finished="initModeler"
+      :additionalModel="controlForm.additionalModel"
+      @save="save"
+    />
+    <!-- 流程属性器，负责编辑每个流程节点的属性 -->
+    <!-- <MyProcessPalette -->
+    <my-properties-panel
+      :key="`penal-${reloadIndex}`"
+      :bpmnModeler="modeler"
+      :prefix="controlForm.prefix"
+      class="process-panel"
+      :model="model"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted } from 'vue'
+// import { translations } from '@/components/bpmnProcessDesigner/src/translations'
+// 自定义元素选中时的弹出菜单（修改 默认任务 为 用户任务）
+import CustomContentPadProvider from '@/components/bpmnProcessDesigner/package/designer/plugins/content-pad'
+// 自定义左侧菜单（修改 默认任务 为 用户任务）
+import CustomPaletteProvider from '@/components/bpmnProcessDesigner/package/designer/plugins/palette'
+// import xmlObj2json from "./utils/xml2json";
+// import myProcessDesigner from '@/components/bpmnProcessDesigner/package/designer/ProcessDesigner.vue'
+// import MyProcessPalette from '@/components/bpmnProcessDesigner/package/palette/ProcessPalette.vue'
+import { createModelApi, getModelApi, updateModelApi } from '@/api/bpm/model'
+
+import { useRouter } from 'vue-router'
+import { onBeforeMount } from 'vue'
+const router = useRouter()
+
+// 自定义侧边栏
+// import MyProcessPanel from "../package/process-panel/ProcessPanel";
+
+const xmlString = ref(undefined) // BPMN XML
+const modeler = ref(null)
+const reloadIndex = ref(0)
+// const controlDrawerVisible = ref(false)
+// const translationsSelf = translations
+const controlForm = ref({
+  simulation: true,
+  labelEditing: false,
+  labelVisible: false,
+  prefix: 'flowable',
+  headerButtonSize: 'mini',
+  additionalModel: [CustomContentPadProvider, CustomPaletteProvider]
+})
+// const addis = ref({
+//   CustomContentPadProvider,
+//   CustomPaletteProvider
+// })
+// 流程模型的信息
+const model = ref({})
+onBeforeMount(() => {
+  // window.bpmnInstances = {}
+})
+onMounted(() => {
+  // 如果 modelId 非空，说明是修改流程模型
+  const modelId = router.currentRoute.value.query && router.currentRoute.value.query.modelId
+  console.log(modelId, 'modelId')
+  if (modelId) {
+    let data = '4b4909d8-97e7-11ec-8e20-862bc1a4a054'
+    getModelApi(data).then((response) => {
+      console.log(response, 'response')
+      // xmlString.value = response.data.bpmnXml
+      xmlString.value =
+        '<?xml version="1.0" encoding="UTF-8"?>\n<bpmn2:definitions xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:bpmn2="http://www.omg.org/spec/BPMN/20100524/MODEL" xmlns:bpmndi="http://www.omg.org/spec/BPMN/20100524/DI" xmlns:dc="http://www.omg.org/spec/DD/20100524/DC" xmlns:di="http://www.omg.org/spec/DD/20100524/DI" id="diagram_Process_1645980650311" targetNamespace="http://activiti.org/bpmn"><bpmn2:process id="flowable_01" name="flowable测试" isExecutable="true"><bpmn2:startEvent id="Event_1iruxim"><bpmn2:outgoing>Flow_0804gmo</bpmn2:outgoing></bpmn2:startEvent><bpmn2:userTask id="task01" name="task01"><bpmn2:incoming>Flow_0804gmo</bpmn2:incoming><bpmn2:outgoing>Flow_0cx479x</bpmn2:outgoing></bpmn2:userTask><bpmn2:sequenceFlow id="Flow_0804gmo" sourceRef="Event_1iruxim" targetRef="task01" /><bpmn2:endEvent id="Event_1mdsccz"><bpmn2:incoming>Flow_0cx479x</bpmn2:incoming></bpmn2:endEvent><bpmn2:sequenceFlow id="Flow_0cx479x" sourceRef="task01" targetRef="Event_1mdsccz" /></bpmn2:process><bpmndi:BPMNDiagram id="BPMNDiagram_1"><bpmndi:BPMNPlane id="flowable_01_di" bpmnElement="flowable_01"><bpmndi:BPMNEdge id="Flow_0cx479x_di" bpmnElement="Flow_0cx479x"><di:waypoint x="440" y="350" /><di:waypoint x="492" y="350" /></bpmndi:BPMNEdge><bpmndi:BPMNEdge id="Flow_0804gmo_di" bpmnElement="Flow_0804gmo"><di:waypoint x="288" y="350" /><di:waypoint x="340" y="350" /></bpmndi:BPMNEdge><bpmndi:BPMNShape id="Event_1iruxim_di" bpmnElement="Event_1iruxim"><dc:Bounds x="252" y="332" width="36" height="36" /></bpmndi:BPMNShape><bpmndi:BPMNShape id="task01_di" bpmnElement="task01"><dc:Bounds x="340" y="310" width="100" height="80" /></bpmndi:BPMNShape><bpmndi:BPMNShape id="Event_1mdsccz_di" bpmnElement="Event_1mdsccz"><dc:Bounds x="492" y="332" width="36" height="36" /></bpmndi:BPMNShape></bpmndi:BPMNPlane></bpmndi:BPMNDiagram></bpmn2:definitions>'
+
+      model.value = {
+        key: 'flowable_01',
+        name: 'flowable测试',
+        description: 'ooxx',
+        category: '1',
+        formType: 10,
+        formId: 11,
+        formCustomCreatePath: null,
+        formCustomViewPath: null,
+        id: '4b4909d8-97e7-11ec-8e20-862bc1a4a054',
+        createTime: 1645978019795,
+        bpmnXml: undefined // 清空 bpmnXml 属性
+      }
+      console.log(modeler.value, 'modeler11111111')
+      // model.value = {
+      //   ...response.data,
+      //   bpmnXml: undefined // 清空 bpmnXml 属性
+      // }
+      // this.controlForm.processId = response.data.key
+    })
+  }
+})
+const initModeler = (item) => {
+  setTimeout(() => {
+    modeler.value = item
+    console.log(item, 'initModeler方法modeler')
+    console.log(modeler.value, 'initModeler方法modeler')
+    // controlForm.value.prefix = '2222'
+  }, 10)
+}
+
+const save = (bpmnXml) => {
+  const data = {
+    ...model.value,
+    bpmnXml: bpmnXml // this.bpmnXml 只是初始化流程图，后续修改无法通过它获得
+  }
+
+  // 修改的提交
+  if (data.id) {
+    updateModelApi(data).then((response) => {
+      console.log(response, 'response')
+      // this.$modal.msgSuccess("修改成功")
+      // 跳转回去
+      close()
+    })
+    return
+  }
+  // 添加的提交
+  createModelApi(data).then((response) => {
+    console.log(response, 'response1')
+    // this.$modal.msgSuccess("保存成功")
+    // 跳转回去
+    close()
+  })
+}
+/** 关闭按钮 */
+const close = () => {
+  // this.$tab.closeOpenPage({ path: "/bpm/manager/model" })
+  router.push({ path: '/bpm/manager/model' })
+}
+</script>
+
+<style lang="scss">
+//body {
+//  overflow: hidden;
+//  margin: 0;
+//  box-sizing: border-box;
+//}
+//.app {
+//  width: 100%;
+//  height: 100%;
+//  box-sizing: border-box;
+//  display: inline-grid;
+//  grid-template-columns: 100px auto max-content;
+//}
+.demo-control-bar {
+  position: fixed;
+  right: 8px;
+  bottom: 8px;
+  z-index: 1;
+  .open-control-dialog {
+    width: 48px;
+    height: 48px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 4px;
+    font-size: 32px;
+    background: rgba(64, 158, 255, 1);
+    color: #ffffff;
+    cursor: pointer;
+  }
+}
+
+// TODO 芋艿：去掉多余的 faq
+//.info-tip {
+//  position: fixed;
+//  top: 40px;
+//  right: 500px;
+//  z-index: 10;
+//  color: #999999;
+//}
+
+.control-form {
+  .el-radio {
+    width: 100%;
+    line-height: 32px;
+  }
+}
+.element-overlays {
+  box-sizing: border-box;
+  padding: 8px;
+  background: rgba(0, 0, 0, 0.6);
+  border-radius: 4px;
+  color: #fafafa;
+}
+
+.my-process-designer {
+  height: calc(100vh - 84px);
+}
+.process-panel__container {
+  position: absolute;
+  right: 0;
+  top: 55px;
+  height: calc(100vh - 84px);
+}
+</style>