!213 bpmn 流程模型设计器 bpmn-process-designer 整合

Merge pull request !213 from puhui999/dev

apps/web-antd/src/components/bpmn-process-designer/package/designer/ProcessDesigner.vue

@@ -9,6 +9,7 @@ import {
   defineEmits,
   defineOptions,
   defineProps,
+  h,
   onBeforeUnmount,
   onMounted,
   provide,
@@ -477,7 +478,7 @@ const elementsAlign = (align: string) => {
     content: '自动对齐可能造成图形变形，是否继续？',
     okText: '确定',
     cancelText: '取消',
-    icon: WarningOutlined as any,
+    icon: h(WarningOutlined) as any,
     onOk() {
       Align.trigger(SelectedElements, align);
     },
@@ -524,7 +525,7 @@ onBeforeUnmount(() => {
       <template v-if="!$slots['control-header']">
         <ButtonGroup key="file-control">
           <Button
-            :icon="FolderOpenOutlined"
+            :icon="h(FolderOpenOutlined)"
             title="打开文件"
             @click="refFile.click()"
           />
@@ -544,7 +545,7 @@ onBeforeUnmount(() => {
                 </Button>
               </div>
             </template>
-            <Button :icon="DownloadOutlined" title="下载文件" />
+            <Button :icon="h(DownloadOutlined)" title="下载文件" />
           </Tooltip>
           <Tooltip>
             <template #title>
@@ -552,14 +553,14 @@ onBeforeUnmount(() => {
               <br />
               <Button type="link" @click="previewProcessJson">预览JSON</Button>
             </template>
-            <Button :icon="EyeOutlined" title="浏览" />
+            <Button :icon="h(EyeOutlined)" title="浏览" />
           </Tooltip>
           <Tooltip
             v-if="props.simulation"
             :title="simulationStatus ? '退出模拟' : '开启模拟'"
           >
             <Button
-              :icon="ApiOutlined"
+              :icon="h(ApiOutlined)"
               title="模拟"
               @click="processSimulation"
             />
@@ -568,42 +569,42 @@ onBeforeUnmount(() => {
         <ButtonGroup key="align-control">
           <Tooltip title="向左对齐">
             <Button
-              :icon="AlignLeftOutlined"
+              :icon="h(AlignLeftOutlined)"
               class="align align-bottom"
               @click="elementsAlign('left')"
             />
           </Tooltip>
           <Tooltip title="向右对齐">
             <Button
-              :icon="AlignLeftOutlined"
+              :icon="h(AlignLeftOutlined)"
               class="align align-top"
               @click="elementsAlign('right')"
             />
           </Tooltip>
           <Tooltip title="向上对齐">
             <Button
-              :icon="AlignLeftOutlined"
+              :icon="h(AlignLeftOutlined)"
               class="align align-left"
               @click="elementsAlign('top')"
             />
           </Tooltip>
           <Tooltip title="向下对齐">
             <Button
-              :icon="AlignLeftOutlined"
+              :icon="h(AlignLeftOutlined)"
               class="align align-right"
               @click="elementsAlign('bottom')"
             />
           </Tooltip>
           <Tooltip title="水平居中">
             <Button
-              :icon="AlignLeftOutlined"
+              :icon="h(AlignLeftOutlined)"
               class="align align-center"
               @click="elementsAlign('center')"
             />
           </Tooltip>
           <Tooltip title="垂直居中">
             <Button
-              :icon="AlignLeftOutlined"
+              :icon="h(AlignLeftOutlined)"
               class="align align-middle"
               @click="elementsAlign('middle')"
             />
@@ -612,7 +613,7 @@ onBeforeUnmount(() => {
         <ButtonGroup key="scale-control">
           <Tooltip title="缩小视图">
             <Button
-              :icon="ZoomOutOutlined"
+              :icon="h(ZoomOutOutlined)"
               @click="processZoomOut()"
               :disabled="defaultZoom < 0.2"
             />
@@ -620,32 +621,32 @@ onBeforeUnmount(() => {
           <Button>{{ `${Math.floor(defaultZoom * 10 * 10)}%` }}</Button>
           <Tooltip title="放大视图">
             <Button
-              :icon="ZoomInOutlined"
+              :icon="h(ZoomInOutlined)"
               @click="processZoomIn()"
               :disabled="defaultZoom > 4"
             />
           </Tooltip>
           <Tooltip title="重置视图并居中">
-            <Button :icon="ReloadOutlined" @click="processReZoom()" />
+            <Button :icon="h(ReloadOutlined)" @click="processReZoom()" />
           </Tooltip>
         </ButtonGroup>
         <ButtonGroup key="stack-control">
           <Tooltip title="撤销">
             <Button
-              :icon="UndoOutlined"
+              :icon="h(UndoOutlined)"
               @click="processUndo()"
               :disabled="!revocable"
             />
           </Tooltip>
           <Tooltip title="恢复">
             <Button
-              :icon="RedoOutlined"
+              :icon="h(RedoOutlined)"
               @click="processRedo()"
               :disabled="!recoverable"
             />
           </Tooltip>
           <Tooltip title="重新绘制">
-            <Button :icon="ReloadOutlined" @click="processRestart()" />
+            <Button :icon="h(ReloadOutlined)" @click="processRestart()" />
           </Tooltip>
         </ButtonGroup>
       </template>

apps/web-antd/src/components/bpmn-process-designer/package/designer/ProcessViewer.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
-import { defineProps, onBeforeUnmount, onMounted, ref, watch } from 'vue';
+import { defineProps, h, onBeforeUnmount, onMounted, ref, watch } from 'vue';
 
-import { BpmProcessInstanceStatus } from '@vben/constants';
+import { BpmProcessInstanceStatus, DICT_TYPE } from '@vben/constants';
 import { UndoOutlined, ZoomInOutlined, ZoomOutOutlined } from '@vben/icons';
 import { dateFormatter, formatPast2 } from '@vben/utils';
 
@@ -10,7 +10,6 @@ import BpmnViewer from 'bpmn-js/lib/Viewer';
 import MoveCanvasModule from 'diagram-js/lib/navigation/movecanvas';
 
 import { DictTag } from '#/components/dict-tag';
-import { DICT_TYPE } from '#/utils/dict';
 
 import '../theme/index.scss';
 
@@ -399,7 +398,7 @@ onBeforeUnmount(() => {
         <ButtonGroup key="scale-control">
           <Button
             :disabled="defaultZoom <= 0.3"
-            :icon="ZoomOutOutlined"
+            :icon="h(ZoomOutOutlined)"
             @click="processZoomOut()"
           />
           <Button style="width: 90px">
@@ -407,10 +406,10 @@ onBeforeUnmount(() => {
           </Button>
           <Button
             :disabled="defaultZoom >= 3.9"
-            :icon="ZoomInOutlined"
+            :icon="h(ZoomInOutlined)"
             @click="processZoomIn()"
           />
-          <Button :icon="UndoOutlined" @click="processReZoom()" />
+          <Button :icon="h(UndoOutlined)" @click="processReZoom()" />
         </ButtonGroup>
       </Row>
     </div>

apps/web-antd/src/components/bpmn-process-designer/package/penal/PropertiesPanel.vue

@@ -2,11 +2,12 @@
 import { nextTick, onBeforeUnmount, onMounted, provide, ref, watch } from 'vue';
 
 import { IconifyIcon } from '@vben/icons';
+import { cloneDeep } from '@vben/utils';
 
 import { Collapse } from 'ant-design-vue';
 
-import ElementCustomConfig from '#/components/bpmnProcessDesigner/package/penal/custom-config/ElementCustomConfig.vue';
+import ElementCustomConfig from '#/components/bpmn-process-designer/package/penal/custom-config/ElementCustomConfig.vue';
-import ElementForm from '#/components/bpmnProcessDesigner/package/penal/form/ElementForm.vue';
+import ElementForm from '#/components/bpmn-process-designer/package/penal/form/ElementForm.vue';
 
 import ElementBaseInfo from './base/ElementBaseInfo.vue';
 import FlowCondition from './flow-condition/FlowCondition.vue';
@@ -186,9 +187,7 @@ const initFormOnChanged = (element: any) => {
     bpmnElement.value = activatedElement;
     elementId.value = activatedElement.id;
     elementType.value = activatedElement.type.split(':')[1] || '';
-    elementBusinessObject.value = structuredClone(
+    elementBusinessObject.value = cloneDeep(activatedElement.businessObject);
-      activatedElement.businessObject,
-    );
     conditionFormVisible.value =
       elementType.value === 'SequenceFlow' &&
       activatedElement.source &&

apps/web-antd/src/components/bpmn-process-designer/package/penal/base/ElementBaseInfo.vue

@@ -56,10 +56,7 @@ const resetBaseInfo = () => {
   // elementBaseInfo.value = JSON.parse(JSON.stringify(bpmnElement.value.businessObject))
   // console.log(elementBaseInfo.value, 'elementBaseInfo22222222222')
 };
-const handleKeyUpdate = (event: Event) => {
+const handleKeyUpdate = (value: any) => {
-  const target = event.target as HTMLInputElement;
-  const value = target.value;
-
   // 校验 value 的值，只有 XML NCName 通过的情况下，才进行赋值。否则，会导致流程图报错，无法绘制的问题
   if (!value) {
     return;
@@ -71,22 +68,23 @@ const handleKeyUpdate = (event: Event) => {
   // console.log('key 满足 XML NCName 规则，所以进行赋值');
 
   // 在 BPMN 的 XML 中，流程标识 key，其实对应的是 id 节点
-  elementBaseInfo.value.id = value;
+  if (elementBaseInfo.value) {
+    elementBaseInfo.value.id = value;
+  }
 
   setTimeout(() => {
     updateBaseInfo('id');
   }, 100);
 };
 
-const handleNameUpdate = (event: Event) => {
+const handleNameUpdate = (value: any) => {
-  const target = event.target as HTMLInputElement;
-  const value = target.value;
-
   // console.log(elementBaseInfo, 'elementBaseInfo');
   if (!value) {
     return;
   }
-  elementBaseInfo.value.name = value;
+  if (elementBaseInfo.value) {
+    elementBaseInfo.value.name = value;
+  }
 
   setTimeout(() => {
     updateBaseInfo('name');
@@ -101,6 +99,12 @@ const updateBaseInfo = (key: string) => {
   // console.log(key, 'key');
   // 触发 elementBaseInfo 对应的字段
   const attrObj: Record<string, any> = Object.create(null);
+
+  // 安全检查
+  if (!elementBaseInfo.value || !bpmnElement.value) {
+    return;
+  }
+
   // console.log(attrObj, 'attrObj')
   attrObj[key] = elementBaseInfo.value[key];
   // console.log(attrObj, 'attrObj111')

apps/web-antd/src/components/bpmn-process-designer/package/penal/form/ElementForm.vue

@@ -1,6 +1,8 @@
 <script lang="ts" setup>
 import { computed, inject, nextTick, onMounted, ref, toRaw, watch } from 'vue';
 
+import { cloneDeep } from '@vben/utils';
+
 import { Form, FormItem, Select } from 'ant-design-vue';
 
 import { getFormSimpleList } from '#/api/bpm/form';
@@ -72,7 +74,7 @@ const resetFormList = () => {
   );
 
   // 复制原始值，填充表格
-  fieldList.value = structuredClone(formData.value.fields || []);
+  fieldList.value = cloneDeep(formData.value.fields || []);
 
   // 更新元素扩展属性，避免后续报错
   updateElementExtensions();
@@ -109,7 +111,7 @@ const _openFieldForm = (field: any, index: any) => {
     fieldPropertiesList.value = [];
   } else {
     const FieldObject = formData.value.fields[index];
-    formFieldForm.value = structuredClone(field);
+    formFieldForm.value = cloneDeep(field);
     // 设置自定义类型
     // this.$set(this.formFieldForm, "typeType", !this.fieldType[field.type] ? "custom" : field.type);
     formFieldForm.value.typeType = fieldType.value[
@@ -119,13 +121,13 @@ const _openFieldForm = (field: any, index: any) => {
       : 'custom';
     // 初始化枚举值列表
     field.type === 'enum' &&
-      (fieldEnumList.value = structuredClone(FieldObject?.values || []));
+      (fieldEnumList.value = cloneDeep(FieldObject?.values || []));
     // 初始化约束条件列表
-    fieldConstraintsList.value = structuredClone(
+    fieldConstraintsList.value = cloneDeep(
       FieldObject?.validation?.constraints || [],
     );
     // 初始化自定义属性列表
-    fieldPropertiesList.value = structuredClone(
+    fieldPropertiesList.value = cloneDeep(
       FieldObject?.properties?.values || [],
     );
   }
@@ -137,14 +139,14 @@ const _openFieldOptionForm = (option: any, index: any, type: any) => {
   fieldOptionType.value = type;
   formFieldOptionIndex.value = index;
   if (type === 'property') {
-    fieldOptionForm.value = option ? structuredClone(option) : {};
+    fieldOptionForm.value = option ? cloneDeep(option) : {};
     return (optionModelTitle.value = '属性配置');
   }
   if (type === 'enum') {
-    fieldOptionForm.value = option ? structuredClone(option) : {};
+    fieldOptionForm.value = option ? cloneDeep(option) : {};
     return (optionModelTitle.value = '枚举值配置');
   }
-  fieldOptionForm.value = option ? structuredClone(option) : {};
+  fieldOptionForm.value = option ? cloneDeep(option) : {};
   return (optionModelTitle.value = '约束条件配置');
 };
 

apps/web-antd/src/components/bpmn-process-designer/package/penal/listeners/ElementListeners.vue

@@ -2,6 +2,7 @@
 import { inject, nextTick, ref, watch } from 'vue';
 
 import { IconifyIcon, PlusOutlined } from '@vben/icons';
+import { cloneDeep } from '@vben/utils';
 
 import {
   Button,
@@ -96,9 +97,10 @@ const openListenerForm = (listener: any, index: number) => {
     }
   });
 };
+
 // 打开监听器字段编辑弹窗
 const openListenerFieldForm = (field: any, index: number) => {
-  listenerFieldForm.value = field ? structuredClone(field) : {};
+  listenerFieldForm.value = field ? cloneDeep(field) : {};
   editingListenerFieldIndex.value = field ? index : -1;
   listenerFieldFormModelVisible.value = true;
   nextTick(() => {

apps/web-antd/src/components/bpmn-process-designer/package/penal/listeners/ProcessListenerDialog.vue

@@ -4,14 +4,13 @@ import type { BpmProcessListenerApi } from '#/api/bpm/processListener';
 
 import { reactive, ref } from 'vue';
 
-import { CommonStatusEnum } from '@vben/constants';
+import { CommonStatusEnum, DICT_TYPE } from '@vben/constants';
 
 import { Button, Modal, Pagination, Table } from 'ant-design-vue';
 
 import { getProcessListenerPage } from '#/api/bpm/processListener';
 import { ContentWrap } from '#/components/content-wrap';
 import { DictTag } from '#/components/dict-tag';
-import { DICT_TYPE } from '#/utils/dict';
 
 /** BPM 流程 表单 */
 defineOptions({ name: 'ProcessListenerDialog' });

apps/web-antd/src/components/bpmn-process-designer/package/penal/listeners/UserTaskListeners.vue

@@ -2,6 +2,7 @@
 import { inject, nextTick, ref, watch } from 'vue';
 
 import { MenuOutlined, PlusOutlined, SelectOutlined } from '@vben/icons';
+import { cloneDeep } from '@vben/utils';
 
 import {
   Button,
@@ -17,7 +18,7 @@ import {
   TableColumn,
 } from 'ant-design-vue';
 
-import ProcessListenerDialog from '#/components/bpmnProcessDesigner/package/penal/listeners/ProcessListenerDialog.vue';
+import ProcessListenerDialog from '#/components/bpmn-process-designer/package/penal/listeners/ProcessListenerDialog.vue';
 
 import { createListenerObject, updateElementExtensions } from '../../utils';
 import {
@@ -162,9 +163,10 @@ const saveListenerConfig = async () => {
   listenerFormModelVisible.value = false;
   listenerForm.value = {};
 };
+
 // 打开监听器字段编辑弹窗
 const openListenerFieldForm = (field: any, index?: number) => {
-  listenerFieldForm.value = field ? structuredClone(field) : {};
+  listenerFieldForm.value = field ? cloneDeep(field) : {};
   editingListenerFieldIndex.value = field ? index : -1;
   listenerFieldFormModelVisible.value = true;
   nextTick(() => {

apps/web-antd/src/components/bpmn-process-designer/package/penal/listeners/utilSelf.ts

@@ -1,4 +1,6 @@
 // 初始化表单数据
+import { cloneDeep } from '@vben/utils';
+
 export function initListenerForm(listener: any) {
   let self = {
     ...listener,
@@ -36,7 +38,7 @@ export function initListenerType(listener: any) {
   if (listener.delegateExpression) listenerType = 'delegateExpressionListener';
   if (listener.script) listenerType = 'scriptListener';
   return {
-    ...structuredClone(listener),
+    ...cloneDeep(listener),
     ...listener.script,
     listenerType,
   };

apps/web-antd/src/components/bpmn-process-designer/package/penal/properties/ElementProperties.vue

@@ -2,6 +2,7 @@
 import { inject, nextTick, ref, toRaw, watch } from 'vue';
 
 import { IconifyIcon } from '@vben/icons';
+import { cloneDeep } from '@vben/utils';
 
 import {
   Button,
@@ -60,9 +61,7 @@ const resetAttributesList = () => {
     (current: any) => current.values,
   );
   // 复制 显示
-  elementPropertyList.value = structuredClone(
+  elementPropertyList.value = cloneDeep(bpmnElementPropertyList.value ?? []);
-    bpmnElementPropertyList.value ?? [],
-  );
 };
 
 const openAttributesForm = (
@@ -71,7 +70,7 @@ const openAttributesForm = (
 ) => {
   editingPropertyIndex.value = index;
   // @ts-ignore
-  propertyForm.value = index === -1 ? {} : structuredClone(attr);
+  propertyForm.value = index === -1 ? {} : cloneDeep(attr);
   propertyFormModelVisible.value = true;
   nextTick(() => {
     if (attributeFormRef.value) attributeFormRef.value.clearValidate();

apps/web-antd/src/components/bpmn-process-designer/package/penal/task/task-components/CallActivity.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { inject, nextTick, ref, toRaw, watch } from 'vue';
+import { h, inject, nextTick, ref, toRaw, watch } from 'vue';
 
 import { alert } from '@vben/common-ui';
 import { PlusOutlined } from '@vben/icons';
@@ -230,7 +230,7 @@ watch(
           <Button
             class="ml-auto"
             type="primary"
-            :icon="PlusOutlined"
+            :icon="h(PlusOutlined)"
             title="添加参数"
             size="small"
             @click="openVariableForm('in', null, -1)"
@@ -284,7 +284,7 @@ watch(
           <Button
             class="ml-auto"
             type="primary"
-            :icon="PlusOutlined"
+            :icon="h(PlusOutlined)"
             title="添加参数"
             size="small"
             @click="openVariableForm('out', null, -1)"

apps/web-antd/src/components/bpmn-process-designer/package/penal/task/task-components/ReceiveTask.vue

@@ -57,7 +57,9 @@ const createNewMessage = () => {
   bpmnRootElements.value.push(newMessage);
   messageMap.value[newMessageForm.value.id] = newMessageForm.value.name;
   // @ts-ignore
-  bpmnMessageRefsMap.value?.[newMessageForm.value.id] = newMessage;
+  if (bpmnMessageRefsMap.value) {
+    bpmnMessageRefsMap.value[newMessageForm.value.id] = newMessage;
+  }
   messageModelVisible.value = false;
 };
 const updateTaskMessage = (messageId: string) => {
@@ -80,7 +82,9 @@ onMounted(() => {
     .filter((el: any) => el.$type === 'bpmn:Message')
     .forEach((m: any) => {
       // @ts-ignore
-      bpmnMessageRefsMap.value?.[m.id] = m;
+      if (bpmnMessageRefsMap.value) {
+        bpmnMessageRefsMap.value[m.id] = m;
+      }
       messageMap.value[m.id] = m.name;
     });
   messageMap.value['-1'] = '无';
@@ -119,9 +123,10 @@ watch(
           <SelectOption
             v-for="key in Object.keys(messageMap)"
             :value="key"
-            :label="messageMap[key]"
             :key="key"
-          />
+          >
+            {{ messageMap[key] }}
+          </SelectOption>
         </Select>
         <Button
           type="primary"

apps/web-antd/src/components/bpmn-process-designer/package/penal/task/task-components/UserTask.vue

@@ -355,9 +355,10 @@ onBeforeUnmount(() => {
         <SelectOption
           v-for="(dict, index) in CANDIDATE_STRATEGY"
           :key="index"
-          :label="dict.label"
           :value="dict.value"
-        />
+        >
+          {{ dict.label }}
+        </SelectOption>
       </Select>
     </FormItem>
     <FormItem
@@ -375,9 +376,10 @@ onBeforeUnmount(() => {
         <SelectOption
           v-for="item in roleOptions"
           :key="item.id"
-          :label="item.name"
           :value="item.id"
-        />
+        >
+          {{ item.name }}
+        </SelectOption>
       </Select>
     </FormItem>
     <FormItem
@@ -416,9 +418,10 @@ onBeforeUnmount(() => {
         <SelectOption
           v-for="item in postOptions"
           :key="item.id"
-          :label="item.name"
           :value="item.id"
-        />
+        >
+          {{ item.name }}
+        </SelectOption>
       </Select>
     </FormItem>
     <FormItem
@@ -436,9 +439,10 @@ onBeforeUnmount(() => {
         <SelectOption
           v-for="item in userOptions"
           :key="item.id"
-          :label="item.nickname"
           :value="item.id"
-        />
+        >
+          {{ item.nickname }}
+        </SelectOption>
       </Select>
     </FormItem>
     <FormItem
@@ -456,9 +460,10 @@ onBeforeUnmount(() => {
         <SelectOption
           v-for="item in userGroupOptions"
           :key="item.id"
-          :label="item.name"
           :value="item.id"
-        />
+        >
+          {{ item.name }}
+        </SelectOption>
       </Select>
     </FormItem>
     <FormItem
@@ -475,10 +480,11 @@ onBeforeUnmount(() => {
         <SelectOption
           v-for="(item, idx) in userFieldOnFormOptions"
           :key="idx"
-          :label="item.title"
           :value="item.field"
           :disabled="!item.required"
-        />
+        >
+          {{ item.title }}
+        </SelectOption>
       </Select>
     </FormItem>
     <FormItem
@@ -497,10 +503,11 @@ onBeforeUnmount(() => {
         <SelectOption
           v-for="(item, idx) in deptFieldOnFormOptions"
           :key="idx"
-          :label="item.title"
           :value="item.field"
           :disabled="!item.required"
-        />
+        >
+          {{ item.title }}
+        </SelectOption>
       </Select>
     </FormItem>
     <FormItem
@@ -520,9 +527,10 @@ onBeforeUnmount(() => {
         <SelectOption
           v-for="(item, index) in MULTI_LEVEL_DEPT"
           :key="index"
-          :label="item.label"
           :value="item.value"
-        />
+        >
+          {{ item.label }}
+        </SelectOption>
       </Select>
     </FormItem>
     <FormItem

apps/web-antd/src/components/bpmnProcessDesigner/package/penal/listeners/template.js

@@ -1,178 +0,0 @@
-export const template = (isTaskListener) => {
-  return `
-  <div class="panel-tab__content">
-    <el-table :data="elementListenersList" size="small" 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="small" type="primary" link @click="openListenerForm(scope, scope.$index)">编辑</el-button>
-          <el-divider direction="vertical" />
-          <el-button size="small" type="primary" link style="color: #ff4d4f" @click="removeListener(scope, scope.$index)">移除</el-button>
-        </template>
-      </el-table-column>
-    </el-table>
-    <div class="element-drawer__button">
-      <el-button size="small" 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="small" :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="small" type="primary" @click="openListenerFieldForm(null)">添加字段</el-button>
-      </p>
-      <el-table :data="fieldsListOfListener" size="small" 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="small" type="primary" link @click="openListenerFieldForm(scope, scope.$index)">编辑</el-button>
-            <el-divider direction="vertical" />
-            <el-button size="small" type="primary" link style="color: #ff4d4f" @click="removeListenerField(scope, scope.$index)">移除</el-button>
-          </template>
-        </el-table-column>
-      </el-table>
-
-      <div class="element-drawer__button">
-        <el-button size="small" @click="listenerFormModelVisible = false">取 消</el-button>
-        <el-button size="small" 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="small" 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="small" @click="listenerFieldFormModelVisible = false">取 消</el-button>
-        <el-button size="small" type="primary" @click="saveListenerFiled">确 定</el-button>
-      </template>
-    </el-dialog>
-  </div>
-  `;
-};

apps/web-antd/src/components/bpmnProcessDesigner/package/theme/element-variables.scss

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

apps/web-antd/src/views/bpm/model/form/modules/bpm-model-editor.vue

@@ -0,0 +1,135 @@
+<script lang="ts" setup>
+import type { Ref } from 'vue';
+
+import type { BpmModelApi } from '#/api/bpm/model';
+
+import { inject, onBeforeUnmount, provide, ref, shallowRef, watch } from 'vue';
+
+import { BpmModelFormType } from '@vben/constants';
+
+import { message } from 'ant-design-vue';
+
+import { getFormDetail } from '#/api/bpm/form';
+import {
+  MyProcessDesigner,
+  MyProcessPenal,
+} from '#/components/bpmn-process-designer/package';
+// 自定义元素选中时的弹出菜单（修改 默认任务 为 用户任务）
+import CustomContentPadProvider from '#/components/bpmn-process-designer/package/designer/plugins/content-pad';
+// 自定义左侧菜单（修改 默认任务 为 用户任务）
+import CustomPaletteProvider from '#/components/bpmn-process-designer/package/designer/plugins/palette';
+import { ContentWrap } from '#/components/content-wrap';
+
+defineOptions({ name: 'BpmModelEditor' });
+
+defineProps<{
+  modelId?: string;
+  modelKey: string;
+  modelName: string;
+  value?: string;
+}>();
+
+const emit = defineEmits(['success', 'init-finished']);
+
+// 表单信息
+const formFields = ref<string[]>([]);
+// 表单类型，暂仅限流程表单
+const formType = ref(BpmModelFormType.NORMAL);
+provide('formFields', formFields);
+provide('formType', formType);
+
+// 注入流程数据
+const xmlString = inject('processData') as Ref;
+// 注入模型数据
+const modelData = inject('modelData') as Ref;
+
+const modeler = shallowRef(); // BPMN Modeler
+const processDesigner = ref();
+const controlForm = ref({
+  simulation: true,
+  labelEditing: false,
+  labelVisible: false,
+  prefix: 'flowable',
+  headerButtonSize: 'mini',
+  additionalModel: [CustomContentPadProvider, CustomPaletteProvider],
+});
+const model = ref<BpmModelApi.Model>(); // 流程模型的信息
+
+/** 初始化 modeler */
+const initModeler = async (item: any) => {
+  // 先初始化模型数据
+  model.value = modelData.value;
+  modeler.value = item;
+};
+
+/** 添加/修改模型 */
+const save = async (bpmnXml: string) => {
+  try {
+    xmlString.value = bpmnXml;
+    emit('success', bpmnXml);
+  } catch (error) {
+    console.error('保存失败:', error);
+    message.error('保存失败');
+  }
+};
+
+/** 监听表单 ID 变化，加载表单数据 */
+watch(
+  () => modelData.value.formId,
+  async (newFormId) => {
+    if (newFormId && modelData.value.formType === BpmModelFormType.NORMAL) {
+      const data = await getFormDetail(newFormId);
+      formFields.value = data.fields;
+    } else {
+      formFields.value = [];
+    }
+  },
+  { immediate: true },
+);
+
+// 在组件卸载时清理
+onBeforeUnmount(() => {
+  modeler.value = null;
+  // 清理全局实例
+  const w = window as any;
+  if (w.bpmnInstances) {
+    w.bpmnInstances = null;
+  }
+});
+</script>
+
+<template>
+  <ContentWrap>
+    <!-- 流程设计器，负责绘制流程等 -->
+    <MyProcessDesigner
+      key="designer"
+      v-model="xmlString"
+      :value="xmlString"
+      v-bind="controlForm"
+      keyboard
+      ref="processDesigner"
+      @init-finished="initModeler"
+      :additional-model="controlForm.additionalModel"
+      :model="model"
+      @save="save"
+      :process-id="modelKey"
+      :process-name="modelName"
+    />
+    <!-- 流程属性器，负责编辑每个流程节点的属性 -->
+    <MyProcessPenal
+      v-if="modeler"
+      key="penal"
+      :bpmn-modeler="modeler"
+      :prefix="controlForm.prefix"
+      class="process-panel"
+      :model="model"
+    />
+  </ContentWrap>
+</template>
+<style lang="scss">
+.process-panel__container {
+  position: absolute;
+  top: 172px;
+  right: 70px;
+}
+</style>

apps/web-antd/src/views/bpm/model/form/modules/process-design.vue

@@ -5,7 +5,7 @@ import { computed, inject, nextTick, ref } from 'vue';
 
 import { BpmModelType } from '@vben/constants';
 
-// TODO BPM 流程模型设计器 BpmModelEditor 待整合
+import BpmModelEditor from './bpm-model-editor.vue';
 import SimpleModelDesign from './simple-model-design.vue';
 
 // 创建本地数据副本
@@ -56,7 +56,13 @@ defineExpose({ validate });
   <div class="h-full">
     <!-- BPMN设计器 -->
     <template v-if="modelData.type === BpmModelType.BPMN">
-      <!-- TODO BPMN 流程设计器 -->
+      <BpmModelEditor
+        v-if="showDesigner"
+        :model-id="modelData.id"
+        :model-key="modelData.key"
+        :model-name="modelData.name"
+        @success="handleDesignSuccess"
+      />
     </template>
     <!-- Simple设计器 -->
     <template v-else>