增加对serviceTask支持

package.json

@@ -95,8 +95,8 @@
     "@vitejs/plugin-vue": "^5.0.4",
     "@vitejs/plugin-vue-jsx": "^3.1.0",
     "autoprefixer": "^10.4.17",
-    "bpmn-js": "8.9.0",
-    "bpmn-js-properties-panel": "0.46.0",
+    "bpmn-js": "^17.9.2",
+    "bpmn-js-properties-panel": "5.23.0",
     "consola": "^3.2.3",
     "eslint": "^8.57.0",
     "eslint-config-prettier": "^9.1.0",

src/components/bpmnProcessDesigner/package/designer/plugins/palette/CustomPalette.js

@@ -165,6 +165,12 @@ F.prototype.getPaletteEntries = function () {
       'bpmn-icon-user-task',
       translate('Create User Task')
     ),
+    'create.service-task': createAction(
+      'bpmn:ServiceTask',
+      'activity',
+      'bpmn-icon-service',
+      translate('Create Service Task')
+    ),
     'create.data-object': createAction(
       'bpmn:DataObjectReference',
       'data-object',

src/components/bpmnProcessDesigner/package/designer/plugins/palette/paletteProvider.js

@@ -171,6 +171,12 @@ PaletteProvider.prototype.getPaletteEntries = function () {
       'bpmn-icon-user-task',
       translate('Create User Task')
     ),
+    'create.service-task': createAction(
+      'bpmn:ServiceTask',
+      'activity',
+      'bpmn-icon-service',
+      translate('Create Service Task')
+    ),
     'create.data-object': createAction(
       'bpmn:DataObjectReference',
       'data-object',

src/components/bpmnProcessDesigner/package/designer/plugins/translate/zh.js

@@ -56,6 +56,7 @@ export default {
   'Create EndEvent': '创建结束事件',
   'Create Task': '创建任务',
   'Create User Task': '创建用户任务',
+  'Create Service Task': '创建服务任务',
   'Create Gateway': '创建网关',
   'Create DataObjectReference': '创建数据对象',
   'Create DataStoreReference': '创建数据存储',

src/components/bpmnProcessDesigner/package/penal/PropertiesPanel.vue

@@ -27,12 +27,12 @@
         <element-form :id="elementId" :type="elementType" />
       </el-collapse-item>
       <el-collapse-item name="task" v-if="elementType.indexOf('Task') !== -1" key="task">
-        <template #title><Icon icon="ep:checked" />任务（审批人）</template>
+        <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"
+        v-if="elementType.indexOf('Task') !== -1 && elementType !== 'UserTask'"
         key="multiInstance"
       >
         <template #title><Icon icon="ep:help-filled" />多实例（会签配置）</template>

src/components/bpmnProcessDesigner/package/penal/properties/ElementProperties.vue

@@ -75,17 +75,14 @@ const attributeFormRef = ref()
 const bpmnInstances = () => (window as any)?.bpmnInstances
 
 const resetAttributesList = () => {
-  console.log(window, 'windowwindowwindowwindowwindowwindowwindow')
   bpmnElement.value = bpmnInstances().bpmnElement
   otherExtensionList.value = [] // 其他扩展配置
-  bpmnElementProperties.value =
-    // bpmnElement.value.businessObject?.extensionElements?.filter((ex) => {
-    bpmnElement.value.businessObject?.extensionElements?.values.filter((ex) => {
+  bpmnElementProperties.value = bpmnElement.value.businessObject?.extensionElements?.values?.filter((ex) => {
       if (ex.$type !== `${prefix}:Properties`) {
         otherExtensionList.value.push(ex)
       }
       return ex.$type === `${prefix}:Properties`
-    }) ?? []
+    }) ?? [];
 
   // 保存所有的 扩展属性字段
   bpmnElementPropertyList.value = bpmnElementProperties.value.reduce(

src/components/bpmnProcessDesigner/package/penal/task/ElementTask.vue

@@ -30,6 +30,7 @@
 
 <script lang="ts" setup>
 import UserTask from './task-components/UserTask.vue'
+import ServiceTask from './task-components/ServiceTask.vue'
 import ScriptTask from './task-components/ScriptTask.vue'
 import ReceiveTask from './task-components/ReceiveTask.vue'
 
@@ -50,6 +51,7 @@ const installedComponent = ref({
   // 接收消息任务，需要在全局下插入新的消息实例，并在该节点下的 messageRef 属性绑定该实例
   // 发送任务、服务任务、业务规则任务共用一个相同配置
   UserTask: 'UserTask', // 用户任务配置
+  ServiceTask: 'ServiceTask', // 服务任务配置
   ScriptTask: 'ScriptTask', // 脚本任务配置
   ReceiveTask: 'ReceiveTask' // 消息接收任务
 })
@@ -82,6 +84,9 @@ watch(
     if (props.type == installedComponent.value.UserTask) {
       witchTaskComponent.value = UserTask
     }
+    if (props.type == installedComponent.value.ServiceTask) {
+      witchTaskComponent.value = ServiceTask
+    }
     if (props.type == installedComponent.value.ScriptTask) {
       witchTaskComponent.value = ScriptTask
     }

src/components/bpmnProcessDesigner/package/penal/task/task-components/ServiceTask.vue

@@ -0,0 +1,91 @@
+<template>
+  <div>
+    <el-form-item label="执行类型" key="executeType">
+      <el-select v-model="serviceTaskForm.executeType">
+        <el-option label="Java类" value="class" />
+        <el-option label="表达式" value="expression" />
+        <el-option label="代理表达式" value="delegateExpression" />
+      </el-select>
+    </el-form-item>
+    <el-form-item
+      v-if="serviceTaskForm.executeType === 'class'"
+      label="Java类"
+      prop="class"
+      key="execute-class"
+    >
+      <el-input v-model="serviceTaskForm.class" clearable @change="updateElementTask" />
+    </el-form-item>
+    <el-form-item
+      v-if="serviceTaskForm.executeType === 'expression'"
+      label="表达式"
+      prop="expression"
+      key="execute-expression"
+    >
+      <el-input v-model="serviceTaskForm.expression" clearable @change="updateElementTask" />
+    </el-form-item>
+    <el-form-item
+      v-if="serviceTaskForm.executeType === 'delegateExpression'"
+      label="代理表达式"
+      prop="delegateExpression"
+      key="execute-delegate"
+    >
+      <el-input v-model="serviceTaskForm.delegateExpression" clearable @change="updateElementTask" />
+    </el-form-item>
+  </div>
+</template>
+
+<script lang="ts" setup>
+defineOptions({ name: 'ServiceTask' })
+const props = defineProps({
+  id: String,
+  type: String
+})
+
+const defaultTaskForm = ref({
+  executeType: '',
+  class: '',
+  expression: '',
+  delegateExpression: ''
+})
+
+const serviceTaskForm = ref<any>({})
+const bpmnElement = ref()
+
+const bpmnInstances = () => (window as any)?.bpmnInstances
+
+const resetTaskForm = () => {
+  for (let key in defaultTaskForm.value) {
+    let value = bpmnElement.value?.businessObject[key] || defaultTaskForm.value[key]
+    serviceTaskForm.value[key] = value
+    if (value) {
+      serviceTaskForm.value.executeType = key
+    }
+  }
+}
+
+const updateElementTask = () => {
+  let taskAttr = Object.create(null);
+  const type = serviceTaskForm.value.executeType;
+  for (let key in serviceTaskForm.value) {
+    if (key !== 'executeType' && key !== type) taskAttr[key] = null;
+  }
+  taskAttr[type] = serviceTaskForm.value[type] || "";
+  bpmnInstances().modeling.updateProperties(toRaw(bpmnElement.value), taskAttr)
+}
+
+onBeforeUnmount(() => {
+  bpmnElement.value = null
+})
+
+watch(
+  () => props.id,
+  () => {
+    bpmnElement.value = bpmnInstances().bpmnElement
+    nextTick(() => {
+      resetTaskForm()
+    })
+  },
+  { immediate: true }
+)
+
+</script>