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

package/package/package/components/nodePanel/property/listenerParam.vue

@@ -0,0 +1,137 @@
+<template>
+  <div>
+    <a-modal
+      v-model:open="dialogVisible"
+      title="监听器参数"
+      width="700px"
+      :mask-closable="false"
+      :keyboard="false"
+      :closable="false"
+      @cancel="handleClose"
+    >
+      <a-form ref="formRef" :model="formData" layout="vertical">
+        <a-tabs>
+          <a-tab-pane key="paramList" tab="监听器参数">
+            <a-table
+              :columns="columns"
+              :data-source="formData.paramList"
+              :pagination="false"
+              size="small"
+            >
+              <template #bodyCell="{ column, record, index }">
+                <template v-if="column.key === 'type'">
+                  <a-select
+                    v-model:value="record.type"
+                    :options="typeOptions"
+                    style="width: 100%"
+                  />
+                </template>
+                <template v-else-if="column.key === 'name'">
+                  <a-input v-model:value="record.name" />
+                </template>
+                <template v-else-if="column.key === 'value'">
+                  <a-input v-model:value="record.value" />
+                </template>
+                <template v-else-if="column.key === 'action'">
+                  <a-button type="link" danger @click="removeParam(index)">删除</a-button>
+                </template>
+              </template>
+            </a-table>
+            <a-button type="dashed" block @click="addParam" style="margin-top: 16px">
+              + 添加参数
+            </a-button>
+          </a-tab-pane>
+        </a-tabs>
+      </a-form>
+      
+      <template #footer>
+        <a-button type="primary" @click="closeDialog">确 定</a-button>
+      </template>
+    </a-modal>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted } from 'vue'
+import { FormInstance } from 'ant-design-vue'
+
+defineOptions({
+  name: 'ListenerParamDialog'
+})
+
+interface Props {
+  value: any[]
+}
+
+const props = defineProps<Props>()
+const emit = defineEmits<{
+  close: [value: any[]]
+}>()
+
+const formRef = ref<FormInstance>()
+const dialogVisible = ref(true)
+const formData = ref({
+  paramList: [] as any[]
+})
+
+const typeOptions = [
+  { label: '字符串', value: 'stringValue' },
+  { label: '表达式', value: 'expression' }
+]
+
+const columns = [
+  {
+    title: '类型',
+    dataIndex: 'type',
+    key: 'type',
+    width: 180
+  },
+  {
+    title: '名称',
+    dataIndex: 'name',
+    key: 'name',
+    width: 180
+  },
+  {
+    title: '值',
+    dataIndex: 'value',
+    key: 'value'
+  },
+  {
+    title: '操作',
+    key: 'action',
+    width: 80
+  }
+]
+
+const addParam = () => {
+  formData.value.paramList.push({
+    type: 'stringValue',
+    name: '',
+    value: ''
+  })
+}
+
+const removeParam = (index: number) => {
+  formData.value.paramList.splice(index, 1)
+}
+
+const closeDialog = () => {
+  dialogVisible.value = false
+  emit('close', formData.value.paramList)
+}
+
+const handleClose = () => {
+  emit('close', formData.value.paramList)
+}
+
+onMounted(() => {
+  formData.value.paramList = [...props.value]
+})
+</script>
+
+<style scoped>
+.flow-containers .ant-badge {
+  margin-right: 8px;
+}
+</style>

package/package/package/components/nodePanel/property/multiInstance.vue

@@ -0,0 +1,177 @@
+<template>
+  <div>
+    <a-modal
+      v-model:open="dialogVisible"
+      title="多实例配置"
+      width="500px"
+      :mask-closable="false"
+      :keyboard="false"
+      :closable="false"
+      class="muti-instance"
+      @cancel="$emit('close')"
+    >
+      <a-alert
+        type="info"
+        :closable="false"
+        show-icon
+        style="margin-bottom: 20px"
+      >
+        <template #message>
+          按照BPMN2.0规范的要求，用于为每个实例创建执行的父执行，会提供下列变量:<br>
+          nrOfInstances：实例总数。<br>
+          nrOfActiveInstances：当前活动的（即未完成的），实例数量。对于顺序多实例，这个值总为1。<br>
+          nrOfCompletedInstances：已完成的实例数量。<br>
+          loopCounter：给定实例在for-each循环中的index。<br>
+        </template>
+      </a-alert>
+      
+      <a-form ref="formRef" :model="formData" layout="vertical">
+        <a-form-item label="多实例类型" name="multiInstanceType">
+          <a-select v-model:value="formData.multiInstanceType" :options="multiInstanceTypeOptions" />
+        </a-form-item>
+        
+        <a-form-item label="基数" name="cardinality">
+          <a-input v-model:value="formData.cardinality" placeholder="请输入基数" />
+        </a-form-item>
+        
+        <a-form-item label="集合" name="collection">
+          <a-input v-model:value="formData.collection" placeholder="请输入集合" />
+        </a-form-item>
+        
+        <a-form-item label="元素变量" name="elementVariable">
+          <a-input v-model:value="formData.elementVariable" placeholder="请输入元素变量" />
+        </a-form-item>
+        
+        <a-form-item label="完成条件" name="completionCondition">
+          <a-input v-model:value="formData.completionCondition" placeholder="请输入完成条件" />
+        </a-form-item>
+        
+        <a-form-item label="顺序" name="sequential">
+          <a-switch v-model:checked="formData.sequential" checked-children="是" un-checked-children="否" />
+        </a-form-item>
+      </a-form>
+      
+      <template #footer>
+        <a-button @click="cancel">取 消</a-button>
+        <a-button type="primary" @click="save">确 定</a-button>
+      </template>
+    </a-modal>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, nextTick, watch } from 'vue'
+import { FormInstance } from 'ant-design-vue'
+import { formatJsonKeyValue } from '../../../common/parseElement'
+import Modeler from 'bpmn-js/lib/Modeler'
+
+defineOptions({
+  name: 'MultiInstanceDialog'
+})
+
+interface Props {
+  element: any
+  modeler: Modeler
+}
+
+const props = defineProps<Props>()
+const emit = defineEmits<{
+  close: []
+}>()
+
+const formRef = ref<FormInstance>()
+const dialogVisible = ref(true)
+const formData = ref<Record<string, any>>({})
+
+const multiInstanceTypeOptions = [
+  { label: '并行', value: 'parallel' },
+  { label: '顺序', value: 'sequential' }
+]
+
+// 监听多实例类型变化
+watch(() => formData.value.multiInstanceType, (newType) => {
+  formData.value.sequential = newType === 'sequential'
+})
+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 updateElement = () => {
+  if (formData.value.sequential !== null && formData.value.sequential !== undefined) {
+    let loopCharacteristics = props.element.businessObject.get('loopCharacteristics')
+    if (!loopCharacteristics) {
+      loopCharacteristics = props.modeler.get('moddle').create('bpmn:MultiInstanceLoopCharacteristics')
+    }
+    loopCharacteristics['isSequential'] = formData.value.sequential
+    
+    // 处理基数
+    if (formData.value.cardinality) {
+      const cardinality = props.modeler.get('moddle').create('bpmn:Expression', { body: formData.value.cardinality })
+      loopCharacteristics['cardinality'] = cardinality
+    }
+    
+    // 处理集合
+    if (formData.value.collection) {
+      const collection = props.modeler.get('moddle').create('bpmn:Expression', { body: formData.value.collection })
+      loopCharacteristics['collection'] = collection
+    }
+    
+    loopCharacteristics['elementVariable'] = formData.value.elementVariable
+    
+    if (formData.value.completionCondition) {
+      const completionCondition = props.modeler.get('moddle').create('bpmn:Expression', { body: formData.value.completionCondition })
+          loopCharacteristics['completionCondition'] = completionCondition
+        }
+    updateProperties({ loopCharacteristics: loopCharacteristics })
+      } else {
+    delete props.element.businessObject.loopCharacteristics
+  }
+}
+
+const save = () => {
+  updateElement()
+  dialogVisible.value = false
+  emit('close')
+}
+
+const cancel = () => {
+  dialogVisible.value = false
+  emit('close')
+}
+
+onMounted(() => {
+  const loopCharacteristics = props.element.businessObject.loopCharacteristics
+  if (loopCharacteristics) {
+    formData.value = {
+      multiInstanceType: loopCharacteristics.isSequential ? 'sequential' : 'parallel',
+      cardinality: loopCharacteristics.cardinality?.body || '',
+      collection: loopCharacteristics.collection?.body || '',
+      elementVariable: loopCharacteristics.elementVariable || '',
+      completionCondition: loopCharacteristics.completionCondition?.body || '',
+      sequential: loopCharacteristics.isSequential || false
+    }
+  } else {
+    formData.value = {
+      multiInstanceType: 'parallel',
+      cardinality: '',
+      collection: '',
+      elementVariable: '',
+      completionCondition: '',
+      sequential: false
+    }
+  }
+})
+</script>
+
+<style scoped>
+.muti-instance .ant-form-item {
+  margin-bottom: 22px;
+}
+</style>

package/package/package/components/nodePanel/property/signal.vue

@@ -0,0 +1,178 @@
+<template>
+  <div>
+    <a-modal
+      v-model:open="dialogVisible"
+      title="信号定义"
+      width="700px"
+      :mask-closable="false"
+      :keyboard="false"
+      :closable="false"
+      @cancel="$emit('close')"
+    >
+      <a-form ref="formRef" :model="formData" layout="vertical">
+        <a-tabs>
+          <a-tab-pane key="signal" tab="信号定义">
+            <a-table
+              :columns="columns"
+              :data-source="formData.signal"
+              :pagination="false"
+              size="small"
+            >
+              <template #bodyCell="{ column, record, index }">
+                <template v-if="column.key === 'scope'">
+                  <a-select v-model:value="record.scope" size="small" style="width: 100%" placeholder="请选择">
+                    <a-select-option value="global">全局</a-select-option>
+                    <a-select-option value="processInstance">流程实例</a-select-option>
+                  </a-select>
+                </template>
+                <template v-if="column.key === 'id'">
+                  <a-input v-model:value="record.id" size="small" placeholder="请输入信号ID" />
+                </template>
+                <template v-if="column.key === 'name'">
+                  <a-input v-model:value="record.name" size="small" placeholder="请输入信号名称" />
+                </template>
+                <template v-if="column.key === 'action'">
+                  <a-button type="link" danger size="small" @click="removeSignal(index)">删除</a-button>
+                </template>
+              </template>
+            </a-table>
+            <div style="margin-top: 16px;">
+              <a-button type="primary" size="small" @click="addSignal">
+                <template #icon><PlusOutlined /></template>
+                新增
+              </a-button>
+            </div>
+          </a-tab-pane>
+        </a-tabs>
+      </a-form>
+      
+      <template #footer>
+        <a-button type="primary" @click="closeDialog">确 定</a-button>
+      </template>
+    </a-modal>
+  </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 Modeler from 'bpmn-js/lib/Modeler'
+
+defineOptions({
+  name: 'SignalDialog'
+})
+
+interface Props {
+  element: any
+  modeler: Modeler
+}
+
+const props = defineProps<Props>()
+const emit = defineEmits<{
+  close: []
+}>()
+
+const formRef = ref<FormInstance>()
+const dialogVisible = ref(true)
+const formData = ref({
+  signal: [] as any[]
+})
+
+const columns = [
+  {
+    title: 'scope',
+    dataIndex: 'scope',
+    key: 'scope',
+    width: 120
+  },
+  {
+    title: 'id',
+    dataIndex: 'id',
+    key: 'id',
+    width: 150
+  },
+  {
+    title: '名称',
+    dataIndex: 'name',
+    key: 'name',
+    width: 150
+  },
+  {
+    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 addSignal = () => {
+  formData.value.signal.push({
+    name: '',
+    id: '',
+    scope: 'global'
+  })
+}
+
+const removeSignal = (index: number) => {
+  formData.value.signal.splice(index, 1)
+}
+
+const updateElement = () => {
+  if (formData.value.signal?.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:Signal') ?? []
+    formData.value.signal.forEach((item: any) => {
+      const signal = props.modeler.get('moddle').create('flowable:Signal')
+      signal['id'] = item.id
+      signal['name'] = item.name
+      signal['scope'] = item.scope
+      extensionElements.get('values').push(signal)
+    })
+    updateProperties({ extensionElements: extensionElements })
+  } else {
+    const extensionElements = props.element.businessObject[`extensionElements`]
+    if (extensionElements) {
+      extensionElements.values = extensionElements.values?.filter((item: any) => item.$type !== 'flowable:Signal') ?? []
+    }
+  }
+}
+
+const closeDialog = () => {
+  updateElement()
+  dialogVisible.value = false
+  emit('close')
+}
+
+onMounted(() => {
+  // 初始化信号数据
+  if (props.element?.businessObject?.extensionElements?.values) {
+    formData.value.signal = props.element.businessObject.extensionElements.values
+      .filter((item: any) => item.$type === 'flowable:Signal')
+      .map((item: any) => ({
+        id: item.id,
+        name: item.name,
+        scope: item.scope || 'global'
+      }))
+  }
+})
+</script>
+
+<style scoped>
+.flow-containers .ant-badge {
+  margin-right: 8px;
+}
+</style>