workflow-bpmn-modeler-andtv-vue3 0.0.1

package/package/components/nodePanel/task.vue

@@ -0,0 +1,452 @@
+<template>
+  <div>
+    <a-form ref="formRef" :model="formData" layout="horizontal">
+      <a-form-item label="节点 id" name="id" :rules="[{ required: true, message: 'Id 不能为空' }]">
+        <a-input v-model:value="formData.id" />
+      </a-form-item>
+      
+      <a-form-item label="节点名称" name="name">
+        <a-input v-model:value="formData.name" />
+      </a-form-item>
+      
+      <a-form-item label="节点描述" name="documentation">
+        <a-textarea v-model:value="formData.documentation" />
+      </a-form-item>
+      
+      <a-form-item label="执行监听器">
+        <a-badge :count="executionListenerLength">
+          <a-button size="small" @click="dialogName = 'executionListenerDialog'">编辑</a-button>
+        </a-badge>
+      </a-form-item>
+      
+      <a-form-item v-if="showConfig.taskListener" label="任务监听器">
+        <a-badge :count="taskListenerLength">
+          <a-button size="small" @click="dialogName = 'taskListenerDialog'">编辑</a-button>
+        </a-badge>
+      </a-form-item>
+      
+      <a-form-item v-if="showConfig.userType" label="人员类型" name="userType">
+        <a-select v-model:value="formData.userType" :options="userTypeOptions" />
+      </a-form-item>
+      
+      <a-form-item v-if="showConfig.assignee && formData.userType === 'assignee'" label="指定人员" name="assignee">
+        <a-select 
+          v-model:value="formData.assignee" 
+          :options="userOptions" 
+          :filter-option="filterOption"
+          allow-clear
+          show-search
+        />
+      </a-form-item>
+      
+      <a-form-item v-if="showConfig.candidateUsers && formData.userType === 'candidateUsers'" label="候选人员" name="candidateUsers">
+        <a-select 
+          v-model:value="formData.candidateUsers" 
+          :options="userOptions" 
+          :filter-option="filterOption"
+          mode="multiple"
+          allow-clear
+          show-search
+        />
+      </a-form-item>
+      
+      <a-form-item v-if="showConfig.candidateGroups && formData.userType === 'candidateGroups'" label="候选组" name="candidateGroups">
+        <a-select 
+          v-model:value="formData.candidateGroups" 
+          :options="groupOptions" 
+          :filter-option="filterOption"
+          mode="multiple"
+          allow-clear
+          show-search
+        />
+      </a-form-item>
+      
+      <a-form-item label="多实例">
+        <a-badge :dot="hasMultiInstance">
+          <a-button size="small" @click="dialogName = 'multiInstanceDialog'">编辑</a-button>
+        </a-badge>
+      </a-form-item>
+      
+      <a-form-item v-if="showConfig.async" label="异步" name="async">
+        <a-switch v-model:checked="formData.async" checked-children="是" un-checked-children="否" />
+      </a-form-item>
+      
+      <a-form-item v-if="showConfig.priority" label="优先级" name="priority">
+        <a-input v-model:value="formData.priority" />
+      </a-form-item>
+      
+      <a-form-item v-if="showConfig.formKey" label="表单标识key" name="formKey">
+        <a-input v-model:value="formData.formKey" />
+      </a-form-item>
+      
+      <a-form-item v-if="showConfig.skipExpression" label="跳过表达式" name="skipExpression">
+        <a-input v-model:value="formData.skipExpression" />
+      </a-form-item>
+      
+      <a-form-item v-if="showConfig.isForCompensation" label="是否为补偿" name="isForCompensation">
+        <a-switch v-model:checked="formData.isForCompensation" checked-children="是" un-checked-children="否" />
+      </a-form-item>
+      
+      <a-form-item v-if="showConfig.triggerable" label="服务任务可触发" name="triggerable">
+        <a-switch v-model:checked="formData.triggerable" checked-children="是" un-checked-children="否" />
+      </a-form-item>
+      
+      <a-form-item v-if="showConfig.autoStoreVariables" label="自动存储变量" name="autoStoreVariables">
+        <a-switch v-model:checked="formData.autoStoreVariables" checked-children="是" un-checked-children="否" />
+      </a-form-item>
+      
+      <a-form-item v-if="showConfig.ruleVariablesInput" label="输入变量" name="ruleVariablesInput">
+        <a-input v-model:value="formData.ruleVariablesInput" />
+      </a-form-item>
+      
+      <a-form-item v-if="showConfig.rules" label="规则" name="rules">
+        <a-input v-model:value="formData.rules" />
+      </a-form-item>
+      
+      <a-form-item v-if="showConfig.resultVariable" label="结果变量" name="resultVariable">
+        <a-input v-model:value="formData.resultVariable" />
+      </a-form-item>
+      
+      <a-form-item v-if="showConfig.exclude" label="排除" name="exclude">
+        <a-switch v-model:checked="formData.exclude" checked-children="是" un-checked-children="否" />
+      </a-form-item>
+      
+      <a-form-item v-if="showConfig.class" label="类" name="class">
+        <a-input v-model:value="formData.class" />
+      </a-form-item>
+      
+      <a-form-item v-if="showConfig.dueDate" label="到期时间" name="dueDate">
+        <a-date-picker v-model:value="formData.dueDate" show-time />
+      </a-form-item>
+    </a-form>
+    
+    <executionListenerDialog
+      v-if="dialogName === 'executionListenerDialog'"
+      :element="element"
+      :modeler="modeler"
+      @close="finishExecutionListener"
+    />
+    <taskListenerDialog
+      v-if="dialogName === 'taskListenerDialog'"
+      :element="element"
+      :modeler="modeler"
+      @close="finishTaskListener"
+    />
+    <multiInstanceDialog
+      v-if="dialogName === 'multiInstanceDialog'"
+      :element="element"
+      :modeler="modeler"
+      @close="finishMultiInstance"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, watch, onMounted, nextTick } from 'vue'
+import { FormInstance } from 'ant-design-vue'
+import executionListenerDialog from './property/executionListener.vue'
+import taskListenerDialog from './property/taskListener.vue'
+import multiInstanceDialog from './property/multiInstance.vue'
+import { commonParse, userTaskParse } from '../../common/parseElement'
+import showConfigData from '../../flowable/showConfig'
+import Modeler from 'bpmn-js/lib/Modeler'
+// import dayjs from 'dayjs' // 暂时注释，如果需要日期处理再启用
+
+defineOptions({
+  name: 'TaskPanel'
+})
+
+interface User {
+  name: string
+  id: string
+}
+
+interface Group {
+  name: string
+  id: string
+}
+
+interface Props {
+  users: User[]
+  groups: Group[]
+  modeler: Modeler
+  element: any
+}
+
+const props = defineProps<Props>()
+
+const formRef = ref<FormInstance>()
+const dialogName = ref('')
+const executionListenerLength = ref(0)
+const taskListenerLength = ref(0)
+const hasMultiInstance = ref(false)
+const formData = ref<Record<string, any>>({})
+
+const userTypeOptions = [
+        { label: '指定人员', value: 'assignee' },
+        { label: '候选人员', value: 'candidateUsers' },
+        { label: '候选组', value: 'candidateGroups' }
+]
+
+const userOptions = computed(() => 
+  props.users.map(user => ({ label: user.name, value: user.id }))
+)
+
+const groupOptions = computed(() => 
+  props.groups.map(group => ({ label: group.name, value: group.id }))
+)
+
+const elementType = computed(() => {
+  const bizObj = props.element.businessObject
+  return bizObj.eventDefinitions
+    ? bizObj.eventDefinitions[0].$type
+    : bizObj.$type
+})
+
+const showConfig = computed(() => (showConfigData as any)[elementType.value] || {})
+
+const filterOption = (input: string, option: any) => {
+  return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
+}
+
+const updateProperties = (properties: Record<string, any>) => {
+  nextTick(() => {
+    try {
+      const modeling = props.modeler.get('modeling')
+      modeling.updateProperties(props.element, properties)
+    } catch (error) {
+    }
+  })
+}
+
+const computedExecutionListenerLength = () => {
+  if (props.element?.businessObject?.extensionElements?.values) {
+    executionListenerLength.value = props.element.businessObject.extensionElements.values
+      .filter((item: any) => item.$type === 'flowable:ExecutionListener').length
+  } else {
+    executionListenerLength.value = 0
+  }
+}
+
+const computedTaskListenerLength = () => {
+  if (props.element?.businessObject?.extensionElements?.values) {
+    taskListenerLength.value = props.element.businessObject.extensionElements.values
+      .filter((item: any) => item.$type === 'flowable:TaskListener').length
+  } else {
+    taskListenerLength.value = 0
+  }
+}
+
+const computedHasMultiInstance = () => {
+  hasMultiInstance.value = !!props.element?.businessObject?.loopCharacteristics
+}
+
+const finishExecutionListener = () => {
+  if (dialogName.value === 'executionListenerDialog') {
+    computedExecutionListenerLength()
+  }
+  dialogName.value = ''
+}
+
+const finishTaskListener = () => {
+  if (dialogName.value === 'taskListenerDialog') {
+    computedTaskListenerLength()
+  }
+  dialogName.value = ''
+}
+
+const finishMultiInstance = () => {
+  if (dialogName.value === 'multiInstanceDialog') {
+    computedHasMultiInstance()
+  }
+  dialogName.value = ''
+}
+
+// Watch for form data changes
+watch(() => formData.value.userType, (val, oldVal) => {
+  if (oldVal && props.element?.businessObject?.$attrs) {
+        const types = ['assignee', 'candidateUsers', 'candidateGroups']
+        types.forEach(type => {
+      delete props.element.businessObject.$attrs[`flowable:${type}`]
+      delete formData.value[type]
+    })
+  }
+})
+
+watch(() => formData.value.assignee, (val) => {
+  if (formData.value.userType !== 'assignee') {
+    if (props.element?.businessObject?.$attrs) {
+      delete props.element.businessObject.$attrs[`flowable:assignee`]
+    }
+        return
+      }
+  updateProperties({ 'flowable:assignee': val })
+})
+
+watch(() => formData.value.candidateUsers, (val) => {
+  if (formData.value.userType !== 'candidateUsers') {
+    if (props.element?.businessObject?.$attrs) {
+      delete props.element.businessObject.$attrs[`flowable:candidateUsers`]
+    }
+        return
+      }
+  updateProperties({ 'flowable:candidateUsers': val?.join(',') })
+})
+
+watch(() => formData.value.candidateGroups, (val) => {
+  if (formData.value.userType !== 'candidateGroups') {
+    if (props.element?.businessObject?.$attrs) {
+      delete props.element.businessObject.$attrs[`flowable:candidateGroups`]
+    }
+        return
+      }
+  updateProperties({ 'flowable:candidateGroups': val?.join(',') })
+})
+
+watch(() => formData.value.async, (val) => {
+      if (val === '') val = null
+  updateProperties({ 'flowable:async': val })
+})
+
+watch(() => formData.value.dueDate, (val) => {
+      if (val === '') val = null
+  updateProperties({ 'flowable:dueDate': val })
+})
+
+watch(() => formData.value.formKey, (val) => {
+      if (val === '') val = null
+  updateProperties({ 'flowable:formKey': val })
+})
+
+watch(() => formData.value.priority, (val) => {
+      if (val === '') val = null
+  updateProperties({ 'flowable:priority': val })
+})
+
+watch(() => formData.value.skipExpression, (val) => {
+      if (val === '') val = null
+  updateProperties({ 'flowable:skipExpression': val })
+})
+
+watch(() => formData.value.isForCompensation, (val) => {
+      if (val === '') val = null
+  updateProperties({ 'isForCompensation': val })
+})
+
+watch(() => formData.value.triggerable, (val) => {
+      if (val === '') val = null
+  updateProperties({ 'flowable:triggerable': val })
+})
+
+watch(() => formData.value.class, (val) => {
+      if (val === '') val = null
+  updateProperties({ 'flowable:class': val })
+})
+
+watch(() => formData.value.autoStoreVariables, (val) => {
+      if (val === '') val = null
+  updateProperties({ 'flowable:autoStoreVariables': val })
+})
+
+watch(() => formData.value.exclude, (val) => {
+      if (val === '') val = null
+  updateProperties({ 'flowable:exclude': val })
+})
+
+watch(() => formData.value.ruleVariablesInput, (val) => {
+      if (val === '') val = null
+  updateProperties({ 'flowable:ruleVariablesInput': val })
+})
+
+watch(() => formData.value.rules, (val) => {
+      if (val === '') val = null
+  updateProperties({ 'flowable:rules': val })
+})
+
+watch(() => formData.value.resultVariable, (val) => {
+      if (val === '') val = null
+  updateProperties({ 'flowable:resultVariable': val })
+})
+
+watch(() => formData.value.id, (val) => {
+  updateProperties({ id: val })
+})
+
+watch(() => formData.value.name, (val) => {
+  updateProperties({ name: val })
+})
+
+watch(() => formData.value.documentation, (val) => {
+  if (!val) {
+    updateProperties({ documentation: [] })
+    return
+  }
+  if (props.modeler?.get('moddle')) {
+    const documentationElement = props.modeler.get('moddle').create('bpmn:Documentation', { text: val })
+    updateProperties({ documentation: [documentationElement] })
+  }
+})
+
+onMounted(() => {
+  if (props.element) {
+    let cache = commonParse(props.element)
+    cache = userTaskParse(cache)
+    formData.value = cache
+    computedExecutionListenerLength()
+    computedTaskListenerLength()
+    computedHasMultiInstance()
+  }
+})
+</script>
+
+<style scoped>
+.flow-containers {
+  padding: 0;
+  background: transparent;
+  min-height: 100%;
+}
+
+.flow-containers :deep(.ant-form-item) {
+  margin-bottom: 16px;
+}
+
+.flow-containers :deep(.ant-form-item-label) {
+  font-weight: 500;
+  color: #262626;
+}
+
+.flow-containers :deep(.ant-input),
+.flow-containers :deep(.ant-select),
+.flow-containers :deep(.ant-textarea) {
+  border-radius: 6px;
+  transition: all 0.3s;
+}
+
+.flow-containers :deep(.ant-button) {
+  border-radius: 6px;
+  font-weight: 500;
+}
+
+.flow-containers :deep(.ant-badge) {
+  margin-right: 8px;
+}
+
+.flow-containers :deep(.ant-badge .ant-badge-count) {
+  background: linear-gradient(135deg, #ff4d4f 0%, #ff7875 100%);
+  box-shadow: 0 2px 4px rgba(255, 77, 79, 0.3);
+}
+
+.flow-containers :deep(.ant-switch) {
+  background-color: #d9d9d9;
+}
+
+.flow-containers :deep(.ant-switch-checked) {
+  background: linear-gradient(135deg, #52c41a 0%, #73d13d 100%);
+}
+
+.flow-containers :deep(.ant-select-multiple .ant-select-selection-item) {
+  background: linear-gradient(135deg, #e6f7ff 0%, #bae7ff 100%);
+  border: 1px solid #91d5ff;
+  border-radius: 4px;
+}
+</style>