workflow-bpmn-modeler-andtv-vue3 0.0.1

package/package/components/nodePanel/property/taskListener.vue

@@ -0,0 +1,242 @@
+<template>
+  <div>
+    <a-modal
+      v-model:open="dialogVisible"
+      title="任务监听器"
+      width="900px"
+      :mask-closable="false"
+      :keyboard="false"
+      :closable="false"
+      @cancel="$emit('close')"
+    >
+      <a-form ref="formRef" :model="formData" layout="vertical">
+        <a-tabs>
+          <a-tab-pane key="taskListener" tab="任务监听器">
+            <div style="margin-bottom: 16px;">
+              <a-button type="primary" size="small" @click="addTaskListener">
+                <template #icon><PlusOutlined /></template>
+                添加任务监听器
+              </a-button>
+            </div>
+            
+            <a-table
+              :columns="columns"
+              :data-source="formData.taskListener"
+              :pagination="false"
+              size="small"
+            >
+              <template #bodyCell="{ column, record, index }">
+                <template v-if="column.key === 'event'">
+                  <a-select v-model:value="record.event" size="small" style="width: 100%">
+                    <a-select-option value="create">create</a-select-option>
+                    <a-select-option value="assignment">assignment</a-select-option>
+                    <a-select-option value="complete">complete</a-select-option>
+                    <a-select-option value="delete">delete</a-select-option>
+                  </a-select>
+                </template>
+                <template v-if="column.key === 'type'">
+                  <a-select v-model:value="record.type" size="small" style="width: 100%">
+                    <a-select-option value="class">class</a-select-option>
+                    <a-select-option value="expression">expression</a-select-option>
+                    <a-select-option value="delegateExpression">delegateExpression</a-select-option>
+                  </a-select>
+                </template>
+                <template v-if="column.key === 'className'">
+                  <a-input v-model:value="record.className" size="small" placeholder="请输入类名" />
+                </template>
+                <template v-if="column.key === 'params'">
+                  <a-badge :count="record.params ? record.params.length : 0">
+                    <a-button size="small" @click="configParam(index)">配置</a-button>
+                  </a-badge>
+                </template>
+                <template v-if="column.key === 'action'">
+                  <a-button type="link" danger size="small" @click="removeTaskListener(index)">删除</a-button>
+                </template>
+              </template>
+            </a-table>
+          </a-tab-pane>
+        </a-tabs>
+      </a-form>
+      
+      <template #footer>
+        <a-button type="primary" @click="closeDialog">确 定</a-button>
+        </template>
+    </a-modal>
+    
+    <listenerParam v-if="showParamDialog && nowIndex !== null" :value="formData.taskListener[nowIndex]?.params" @close="finishConfigParam" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, nextTick } from 'vue'
+import { FormInstance } from 'ant-design-vue'
+import { PlusOutlined } from '@ant-design/icons-vue'
+import listenerParam from './listenerParam.vue'
+import Modeler from 'bpmn-js/lib/Modeler'
+
+defineOptions({
+  name: 'TaskListenerDialog'
+})
+
+interface Props {
+  element: any
+  modeler: Modeler
+}
+
+const props = defineProps<Props>()
+const emit = defineEmits<{
+  close: []
+}>()
+
+const formRef = ref<FormInstance>()
+const dialogVisible = ref(true)
+const showParamDialog = ref(false)
+const nowIndex = ref<number | null>(null)
+const formData = ref({
+  taskListener: [] as any[]
+})
+
+const columns = [
+  {
+    title: '事件',
+    dataIndex: 'event',
+    key: 'event',
+    width: 120
+  },
+  {
+    title: '类型',
+    dataIndex: 'type',
+    key: 'type',
+    width: 150
+  },
+  {
+    title: 'Java类名',
+    dataIndex: 'className',
+    key: 'className'
+  },
+  {
+    title: '参数',
+    key: 'params',
+    width: 100
+  },
+  {
+    title: '操作',
+    key: 'action',
+    width: 80
+  }
+]
+
+const updateProperties = (properties: Record<string, any>) => {
+  nextTick(() => {
+    try {
+      const modeling = props.modeler.get('modeling')
+      modeling.updateProperties(props.element, properties)
+    } catch (error) {
+      console.warn('Update properties error:', error)
+    }
+  })
+}
+
+const addTaskListener = () => {
+  formData.value.taskListener.push({
+    event: 'create',
+    type: 'class',
+    className: '',
+    params: []
+  })
+}
+
+const removeTaskListener = (index: number) => {
+  formData.value.taskListener.splice(index, 1)
+}
+
+const configParam = (index: number) => {
+  nowIndex.value = index
+  const nowObj = formData.value.taskListener[index]
+  if (!nowObj.params) {
+    nowObj.params = []
+  }
+  showParamDialog.value = true
+}
+
+const finishConfigParam = (param: any) => {
+  showParamDialog.value = false
+  if (nowIndex.value !== null) {
+    const cache = formData.value.taskListener[nowIndex.value]
+    cache.params = param
+    formData.value.taskListener[nowIndex.value] = { ...cache }
+  }
+  nowIndex.value = null
+}
+
+const updateElement = () => {
+  if (formData.value.taskListener?.length) {
+    let extensionElements = props.element.businessObject.get('extensionElements')
+    if (!extensionElements) {
+      extensionElements = props.modeler.get('moddle').create('bpmn:ExtensionElements')
+    }
+    // 清除旧值
+    extensionElements.values = extensionElements.values?.filter((item: any) => item.$type !== 'flowable:TaskListener') ?? []
+    formData.value.taskListener.forEach((item: any) => {
+      const taskListener = props.modeler.get('moddle').create('flowable:TaskListener')
+      taskListener['event'] = item.event
+      taskListener[item.type] = item.className
+      if (item.params && item.params.length) {
+        item.params.forEach((field: any) => {
+          const fieldElement = props.modeler.get('moddle').create('flowable:Field')
+          fieldElement['name'] = field.name
+          fieldElement[field.type] = field.value
+          taskListener.get('fields').push(fieldElement)
+        })
+      }
+      extensionElements.get('values').push(taskListener)
+    })
+    updateProperties({ extensionElements: extensionElements })
+  } else {
+    const extensionElements = props.element.businessObject[`extensionElements`]
+    if (extensionElements) {
+      extensionElements.values = extensionElements.values?.filter((item: any) => item.$type !== 'flowable:TaskListener') ?? []
+    }
+  }
+}
+
+const closeDialog = () => {
+  updateElement()
+  dialogVisible.value = false
+  emit('close')
+}
+
+onMounted(() => {
+  if (props.element?.businessObject?.extensionElements?.values) {
+    formData.value.taskListener = props.element.businessObject.extensionElements.values
+      .filter((item: any) => item.$type === 'flowable:TaskListener')
+      .map((item: any) => {
+        let type
+        if ('class' in item) type = 'class'
+        if ('expression' in item) type = 'expression'
+        if ('delegateExpression' in item) type = 'delegateExpression'
+        return {
+          event: item.event,
+          type: type,
+          className: type ? item[type] : '',
+          params: item.fields?.map((field: any) => {
+            let fieldType
+            if ('stringValue' in field) fieldType = 'stringValue'
+            if ('expression' in field) fieldType = 'expression'
+            return {
+              name: field.name,
+              type: fieldType,
+              value: fieldType ? field[fieldType] : ''
+            }
+          }) ?? []
+        }
+      })
+  }
+})
+</script>
+
+<style scoped>
+.flow-containers .ant-badge {
+  margin-right: 8px;
+}
+</style>

package/package/components/nodePanel/sequenceFlow.vue

@@ -0,0 +1,180 @@
+<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 label="跳转条件" name="conditionExpression">
+        <a-input v-model:value="formData.conditionExpression" />
+      </a-form-item>
+      
+      <a-form-item label="跳过表达式" name="skipExpression">
+        <a-input v-model:value="formData.skipExpression" />
+      </a-form-item>
+    </a-form>
+    
+    <executionListenerDialog
+      v-if="dialogName === 'executionListenerDialog'"
+      :element="element"
+      :modeler="modeler"
+      @close="finishExecutionListener"
+    />
+  </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 { commonParse, conditionExpressionParse } from '../../common/parseElement'
+import showConfigData from '../../flowable/showConfig'
+import Modeler from 'bpmn-js/lib/Modeler'
+
+defineOptions({
+  name: 'SequenceFlowPanel'
+})
+
+interface Props {
+  modeler: Modeler
+  element: any
+}
+
+const props = defineProps<Props>()
+
+const formRef = ref<FormInstance>()
+const dialogName = ref('')
+const executionListenerLength = ref(0)
+const formData = ref<Record<string, any>>({})
+
+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 updateProperties = (properties: Record<string, any>) => {
+  nextTick(() => {
+    try {
+      const modeling = props.modeler.get('modeling')
+      modeling.updateProperties(props.element, properties)
+    } catch (error) {
+      console.warn('Update properties error:', 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 finishExecutionListener = () => {
+  if (dialogName.value === 'executionListenerDialog') {
+    computedExecutionListenerLength()
+  }
+  dialogName.value = ''
+}
+
+// Watch for form data changes
+watch(() => formData.value.conditionExpression, (val) => {
+  if (val && props.modeler?.get('moddle')) {
+    const newCondition = props.modeler.get('moddle').create('bpmn:FormalExpression', { body: val })
+    updateProperties({ conditionExpression: newCondition })
+      } else {
+    updateProperties({ conditionExpression: null })
+      }
+})
+
+watch(() => formData.value.skipExpression, (val) => {
+      if (val === '') val = null
+  updateProperties({ 'flowable:skipExpression': 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 = conditionExpressionParse(cache)
+    formData.value = cache
+    computedExecutionListenerLength()
+  }
+})
+</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);
+}
+</style>

package/package/components/nodePanel/startEnd.vue

@@ -0,0 +1,174 @@
+<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.initiator" label="发起人" name="initiator">
+        <a-input v-model:value="formData.initiator" />
+      </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>
+    
+    <executionListenerDialog
+      v-if="dialogName === 'executionListenerDialog'"
+      :element="element"
+      :modeler="modeler"
+      @close="finishExecutionListener"
+    />
+  </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 { commonParse } from '../../common/parseElement'
+import showConfigData from '../../flowable/showConfig'
+import Modeler from 'bpmn-js/lib/Modeler'
+
+defineOptions({
+  name: 'StartEndPanel'
+})
+
+interface Props {
+  modeler: Modeler
+  element: any
+}
+
+const props = defineProps<Props>()
+
+const formRef = ref<FormInstance>()
+const dialogName = ref('')
+const executionListenerLength = ref(0)
+const formData = ref<Record<string, any>>({})
+
+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 updateProperties = (properties: Record<string, any>) => {
+  nextTick(() => {
+    try {
+      const modeling = props.modeler.get('modeling')
+      modeling.updateProperties(props.element, properties)
+    } catch (error) {
+      console.warn('Update properties error:', 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 finishExecutionListener = () => {
+  if (dialogName.value === 'executionListenerDialog') {
+    computedExecutionListenerLength()
+  }
+  dialogName.value = ''
+}
+
+// Watch for form data changes
+watch(() => formData.value.initiator, (val) => {
+  if (val === '') val = null
+  updateProperties({ 'flowable:initiator': val })
+})
+
+watch(() => formData.value.formKey, (val) => {
+  if (val === '') val = null
+  updateProperties({ 'flowable:formKey': 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) {
+    formData.value = commonParse(props.element)
+    computedExecutionListenerLength()
+  }
+})
+</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);
+}
+</style>