!605 合并(!549 工作流增加对serviceTask支持)，并优化

Merge pull request !605 from Lesan/feature/bpm

Author: YunaiV

package.json

@@ -96,8 +96,8 @@
     "@vitejs/plugin-vue": "^5.0.4",
     "@vitejs/plugin-vue-jsx": "^3.1.0",
     "autoprefixer": "^10.4.17",
-    "bpmn-js": "8.10.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

@@ -1,5 +1,5 @@
 <template>
-  <div class="process-panel__container" :style="{ width: `${width}px`,maxHeight: '700px' }">
+  <div class="process-panel__container" :style="{ width: `${width}px`, maxHeight: '700px' }">
     <el-collapse v-model="activeTab">
       <el-collapse-item name="base">
         <!-- class="panel-tab__title" -->
@@ -26,8 +26,8 @@
         <template #title><Icon icon="ep:list" />表单</template>
         <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>
+      <el-collapse-item name="task" v-if="isTaskCollapseItemShow(elementType)" key="task">
+        <template #title><Icon icon="ep:checked" />{{ getTaskCollapseItemName(elementType) }}</template>
         <element-task :id="elementId" :type="elementType" />
       </el-collapse-item>
       <el-collapse-item
@@ -72,6 +72,7 @@ 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 { getTaskCollapseItemName,isTaskCollapseItemShow } from './task/data'
 
 defineOptions({ name: 'MyPropertiesPanel' })
 

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

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

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

@@ -29,9 +29,7 @@
 </template>
 
 <script lang="ts" setup>
-import UserTask from './task-components/UserTask.vue'
-import ScriptTask from './task-components/ScriptTask.vue'
-import ReceiveTask from './task-components/ReceiveTask.vue'
+import { installedComponent } from './data'
 
 defineOptions({ name: 'ElementTaskConfig' })
 
@@ -45,14 +43,7 @@ const taskConfigForm = ref({
   exclusive: false
 })
 const witchTaskComponent = ref()
-const installedComponent = ref({
-  // 手工任务与普通任务一致，不需要其他配置
-  // 接收消息任务，需要在全局下插入新的消息实例，并在该节点下的 messageRef 属性绑定该实例
-  // 发送任务、服务任务、业务规则任务共用一个相同配置
-  UserTask: 'UserTask', // 用户任务配置
-  ScriptTask: 'ScriptTask', // 脚本任务配置
-  ReceiveTask: 'ReceiveTask' // 消息接收任务
-})
+
 const bpmnElement = ref()
 
 const bpmnInstances = () => (window as any).bpmnInstances
@@ -78,15 +69,8 @@ watch(
 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
+    if (props.type) {
+      witchTaskComponent.value = installedComponent[props.type].componet
     }
   },
   { immediate: true }

src/components/bpmnProcessDesigner/package/penal/task/data.ts

@@ -0,0 +1,31 @@
+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'
+
+export const installedComponent = {
+  UserTask: {
+    name: '用户任务',
+    componet: UserTask
+  },
+  ServiceTask: {
+    name: '服务任务',
+    componet: ServiceTask
+  },
+  ScriptTask: {
+    name: '脚本任务',
+    componet: ScriptTask
+  },
+  ReceiveTask: {
+    name: '接收任务',
+    componet: ReceiveTask
+  }
+}
+
+export const getTaskCollapseItemName = (elementType) => {
+  return installedComponent[elementType].name
+}
+
+export const isTaskCollapseItemShow = (elementType) => {
+  return installedComponent[elementType]
+}

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>