workflow-bpmn-modeler-andtv-vue3 10.1.2 → 10.2.0

package/package/package/components/nodePanel/gateway.vue

@@ -0,0 +1,165 @@
+<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="async">
+        <a-switch v-model:checked="formData.async" checked-children="是" un-checked-children="否" />
+      </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: 'GatewayPanel'
+})
+
+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.async, (val) => {
+  if (val === '') val = null
+  updateProperties({ 'flowable:async': 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>

package/package/package/components/nodePanel/process.vue

@@ -0,0 +1,201 @@
+<template>
+  <div>
+    <a-form ref="formRef" :model="formData" layout="horizontal">
+      <a-form-item label="流程分类" name="processCategory">
+        <a-select v-model:value="formData.processCategory" :options="categoryOptions" />
+      </a-form-item>
+      
+      <a-form-item label="流程标识key" 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="信号定义">
+        <a-badge :count="signalLength">
+          <a-button size="small" @click="dialogName = 'signalDialog'">编辑</a-button>
+        </a-badge>
+      </a-form-item>
+    </a-form>
+    
+    <executionListenerDialog
+      v-if="dialogName === 'executionListenerDialog'"
+      :element="element"
+      :modeler="modeler"
+      @close="finishExecutionListener"
+    />
+    <signalDialog
+      v-if="dialogName === 'signalDialog'"
+      :element="element"
+      :modeler="modeler"
+      @close="finishSignal"
+    />
+  </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 signalDialog from './property/signal.vue'
+import { commonParse } from '../../common/parseElement'
+import showConfigData from '../../flowable/showConfig'
+import Modeler from 'bpmn-js/lib/Modeler'
+
+defineOptions({
+  name: 'ProcessPanel'
+})
+
+interface Category {
+  name: string
+  id: string
+}
+
+interface Props {
+  categorys: Category[]
+  modeler: Modeler
+  element: any
+}
+
+const props = defineProps<Props>()
+
+const formRef = ref<FormInstance>()
+const dialogName = ref('')
+const executionListenerLength = ref(0)
+const signalLength = 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 categoryOptions = computed(() => 
+  props.categorys.map(category => ({ label: category.name, value: category.id }))
+)
+
+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 computedSignalLength = () => {
+  signalLength.value = props.element?.businessObject?.extensionElements?.values?.length ?? 0
+}
+
+const finishExecutionListener = () => {
+  if (dialogName.value === 'executionListenerDialog') {
+    computedExecutionListenerLength()
+  }
+  dialogName.value = ''
+}
+
+const finishSignal = () => {
+  if (dialogName.value === 'signalDialog') {
+    computedSignalLength()
+  }
+  dialogName.value = ''
+}
+
+// Watch for form data changes
+watch(() => formData.value.processCategory, (val) => {
+  if (val === '') val = null
+  updateProperties({ 'flowable:processCategory': 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()
+    computedSignalLength()
+  }
+})
+</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/package/components/nodePanel/property/executionListener.vue

@@ -0,0 +1,240 @@
+<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="executionListener" tab="执行监听器">
+            <div style="margin-bottom: 16px;">
+              <a-button type="primary" size="small" @click="addExecutionListener">
+                <template #icon><PlusOutlined /></template>
+                添加执行监听器
+              </a-button>
+            </div>
+            
+            <a-table
+              :columns="columns"
+              :data-source="formData.executionListener"
+              :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="start">start</a-select-option>
+                    <a-select-option value="end">end</a-select-option>
+                    <a-select-option value="take">take</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="removeExecutionListener(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.executionListener[nowIndex]?.params" @close="finishConfigParam" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, 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: 'ExecutionListenerDialog'
+})
+
+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({
+  executionListener: [] 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) {
+    }
+  })
+}
+
+const addExecutionListener = () => {
+  formData.value.executionListener.push({
+    event: 'start',
+    type: 'class',
+    className: '',
+    params: []
+  })
+}
+
+const removeExecutionListener = (index: number) => {
+  formData.value.executionListener.splice(index, 1)
+}
+
+const configParam = (index: number) => {
+  nowIndex.value = index
+  const nowObj = formData.value.executionListener[index]
+  if (!nowObj.params) {
+    nowObj.params = []
+  }
+  showParamDialog.value = true
+}
+
+const finishConfigParam = (param: any) => {
+  showParamDialog.value = false
+  if (nowIndex.value !== null) {
+    const cache = formData.value.executionListener[nowIndex.value]
+    cache.params = param
+    formData.value.executionListener[nowIndex.value] = { ...cache }
+  }
+  nowIndex.value = null
+}
+
+const updateElement = () => {
+  if (formData.value.executionListener?.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:ExecutionListener') ?? []
+    formData.value.executionListener.forEach((item: any) => {
+      const executionListener = props.modeler.get('moddle').create('flowable:ExecutionListener')
+      executionListener['event'] = item.event
+      executionListener[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
+          executionListener.get('fields').push(fieldElement)
+        })
+      }
+      extensionElements.get('values').push(executionListener)
+    })
+    updateProperties({ extensionElements: extensionElements })
+  } else {
+    const extensionElements = props.element.businessObject[`extensionElements`]
+    if (extensionElements) {
+      extensionElements.values = extensionElements.values?.filter((item: any) => item.$type !== 'flowable:ExecutionListener') ?? []
+    }
+  }
+}
+
+const closeDialog = () => {
+  updateElement()
+  dialogVisible.value = false
+  emit('close')
+}
+
+onMounted(() => {
+  if (props.element?.businessObject?.extensionElements?.values) {
+    formData.value.executionListener = props.element.businessObject.extensionElements.values
+      .filter((item: any) => item.$type === 'flowable:ExecutionListener')
+      .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>