工作流表单+模型代码提交

src/components/bpmnProcessDesigner/package/penal/PropertiesPanel.vue

@@ -1,100 +1,125 @@
 <template>
-    <div
-        class='process-panel__container'
-        :style="{ width: `${width}px`, height: `700px`, overflow: 'auto', background: '#fff' }"
-    >
-        <el-collapse v-model='activeTab'>
-            <el-collapse-item name='base'>
-                <!-- class="panel-tab__title" -->
-                <template #title>
-                    <Icon name='el-icon-InfoFilled' />
-                    常规
-                </template>
-                <ElementBaseInfo
-                    :id-edit-disabled='idEditDisabled'
-                    :business-object='elementBusinessObject'
-                    :type='elementType'
-                    :model='model'
-                />
-            </el-collapse-item>
-            <!-- <el-collapse-item name="condition" v-if="elementType === 'Process'" key="message">
-                <template #title>
-                    <Icon name="el-icon-Comment" />
-                    消息与信号
-                </template>
-                <SignalAndMassage /> 
-            </el-collapse-item>-->
-            <el-collapse-item name='condition' v-if='conditionFormVisible' key='condition'>
-                <template #title>
-                    <Icon name='el-icon-Promotion' />
-                    流转条件
-                </template>
-                <FlowCondition :business-object='elementBusinessObject' :type='elementType' />
-            </el-collapse-item>
-            <el-collapse-item name='condition' v-if='formVisible' key='form'>
-                <template #title>
-                    <Icon name='el-icon-List' />
-                    表单
-                </template>
-                <ElementForm :id='elementId' :type='elementType' />
-            </el-collapse-item>
-            <el-collapse-item name='task' v-if="elementType.indexOf('Task') !== -1" key='task'>
-                <template #title>
-                    <Icon name='el-icon-Checked' />
-                    任务（审批人）
-                </template>
-                <ElementTask :id='elementId' :type='elementType' />
-            </el-collapse-item>
-<!--            <el-collapse-item name='multiInstance' v-if="elementType.indexOf('Task') !== -1" key='multiInstance'>-->
-<!--                <template #title>-->
-<!--                    <Icon name='el-icon-HelpFilled' />-->
-<!--                    多实例（会签配置）-->
-<!--                </template>-->
-<!--                <ElementMultiInstance :business-object='elementBusinessObject' :type='elementType' />-->
-<!--            </el-collapse-item>-->
-<!--            <el-collapse-item name='listeners' key='listeners'>-->
-<!--                <template #title>-->
-<!--                    <Icon name='el-icon-BellFilled' />-->
-<!--                    执行监听器-->
-<!--                </template>-->
-<!--                <ElementListeners :id='elementId' :type='elementType' />-->
-<!--            </el-collapse-item>-->
-<!--            <el-collapse-item name='taskListeners' v-if="elementType === 'UserTask'" key='taskListeners'>-->
-<!--                <template #title>-->
-<!--                    <Icon name='el-icon-BellFilled' />-->
-<!--                    任务监听器-->
-<!--                </template>-->
-<!--                <UserTaskListeners :id='elementId' :type='elementType' />-->
-<!--            </el-collapse-item>-->
-<!--            <el-collapse-item name='extensions' key='extensions'>-->
-<!--                <template #title>-->
-<!--                    <Icon name='el-icon-CirclePlusFilled' />-->
-<!--                    扩展属性-->
-<!--                </template>-->
-<!--                <ElementProperties :id='elementId' :type='elementType' />-->
-<!--            </el-collapse-item>-->
-            <el-collapse-item name='other' key='other'>
-                <template #title>
-                    <Icon name='el-icon-Promotion' />
-                    其他
-                </template>
-                <ElementOtherConfig :id='elementId' />
-            </el-collapse-item>
-        </el-collapse>
-    </div>
+  <div class='process-panel__container' :style='{ width: `${width}px` }'>
+    <el-collapse v-model='activeTab'>
+      <el-collapse-item name='base'>
+        <!-- class="panel-tab__title" -->
+        <template #title>
+          <el-icon :size='20'>
+            <InfoFilled />
+          </el-icon>
+          常规
+        </template
+        >
+        <ElementBaseInfo
+            :id-edit-disabled='idEditDisabled'
+            :business-object='elementBusinessObject'
+            :type='elementType'
+            :model='model'
+        />
+      </el-collapse-item>
+      <el-collapse-item name='condition' v-if="elementType === 'Process'" key='message'>
+        <template #title>
+          <el-icon :size='20'>
+            <Comment />
+          </el-icon>
+          消息与信号
+        </template>
+        <signal-and-massage />
+      </el-collapse-item>
+      <el-collapse-item name='condition' v-if='conditionFormVisible' key='condition'>
+        <template #title>
+          <el-icon :size='20'>
+            <Promotion />
+          </el-icon>
+          流转条件
+        </template>
+        <flow-condition :business-object='elementBusinessObject' :type='elementType' />
+      </el-collapse-item>
+      <el-collapse-item name='condition' v-if='formVisible' key='form'>
+        <template #title>
+          <el-icon :size='20'>
+            <List />
+          </el-icon>
+          表单
+        </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>
+          <el-icon :size='20'>
+            <Checked />
+          </el-icon>
+          任务（审批人）
+        </template>
+        <element-task :id='elementId' :type='elementType' />
+      </el-collapse-item>
+      <el-collapse-item
+          name='multiInstance'
+          v-if="elementType.indexOf('Task') !== -1"
+          key='multiInstance'
+      >
+        <template #title>
+          <el-icon :size='20'>
+            <HelpFilled />
+          </el-icon>
+          多实例（会签配置）
+        </template>
+        <element-multi-instance :business-object='elementBusinessObject' :type='elementType' />
+      </el-collapse-item>
+      <el-collapse-item name='listeners' key='listeners'>
+        <template #title>
+          <el-icon :size='20'>
+            <BellFilled />
+          </el-icon>
+          执行监听器
+        </template>
+        <element-listeners :id='elementId' :type='elementType' />
+      </el-collapse-item>
+      <el-collapse-item name='taskListeners' v-if="elementType === 'UserTask'" key='taskListeners'>
+        <template #title>
+          <el-icon :size='20'>
+            <BellFilled />
+          </el-icon>
+          任务监听器
+        </template>
+        <user-task-listeners :id='elementId' :type='elementType' />
+      </el-collapse-item>
+      <el-collapse-item name='extensions' key='extensions'>
+        <template #title>
+          <el-icon :size='20'>
+            <CirclePlusFilled />
+          </el-icon>
+          扩展属性
+        </template>
+        <element-properties :id='elementId' :type='elementType' />
+      </el-collapse-item>
+      <el-collapse-item name='other' key='other'>
+        <template #title>
+          <el-icon :size='20'>
+            <Promotion />
+          </el-icon>
+          其他
+        </template>
+        <element-other-config :id='elementId' />
+      </el-collapse-item>
+    </el-collapse>
+  </div>
 </template>
 <script lang='ts' setup>
-import { onMounted, provide, ref, watch, onBeforeUnmount } from 'vue'
+import {CirclePlusFilled, BellFilled,HelpFilled, Checked, List, Promotion, Comment, InfoFilled } from '@element-plus/icons-vue'
+
+
 import ElementBaseInfo from './base/ElementBaseInfo.vue'
 import ElementOtherConfig from './other/ElementOtherConfig.vue'
 import ElementTask from './task/ElementTask.vue'
-// import ElementMultiInstance from './multi-instance/ElementMultiInstance.vue'
+import ElementMultiInstance from './multi-instance/ElementMultiInstance.vue'
 import FlowCondition from './flow-condition/FlowCondition.vue'
-// import SignalAndMassage from './signal-message/SignalAndMessage.vue'
-// 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 SignalAndMassage from './signal-message/SignalAndMessage.vue'
+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 ElementForm from '@/components/bpmnProcessDesigner/package/penal/form/ElementForm.vue'
 
 defineOptions({ name: 'MyPropertiesPanel' })
 
@@ -105,24 +130,24 @@ defineOptions({ name: 'MyPropertiesPanel' })
  * @Date 2021年3月31日18:57:51
  */
 const props = defineProps({
-    bpmnModeler: {
-        type: Object,
-        default: () => {
-        }
-    },
-    prefix: {
-        type: String,
-        default: 'camunda'
-    },
-    width: {
-        type: Number,
-        default: 480
-    },
-    idEditDisabled: {
-        type: Boolean,
-        default: false
-    },
-    model: Object // 流程模型的数据
+  bpmnModeler: {
+    type: Object,
+    default: () => {
+    }
+  },
+  prefix: {
+    type: String,
+    default: 'camunda'
+  },
+  width: {
+    type: Number,
+    default: 480
+  },
+  idEditDisabled: {
+    type: Boolean,
+    default: false
+  },
+  model: Object // 流程模型的数据
 })
 
 const activeTab = ref('base')
@@ -141,94 +166,94 @@ const bpmnInstances = () => (window as any)?.bpmnInstances
 const unwatchBpmn = watch(
     () => props.bpmnModeler,
     () => {
-        // 避免加载时 流程图 并未加载完成
-        if (!props.bpmnModeler) {
-            console.log('缺少props.bpmnModeler')
-            return
-        }
+      // 避免加载时 流程图 并未加载完成
+      if (!props.bpmnModeler) {
+        console.log('缺少props.bpmnModeler')
+        return
+      }
 
-        console.log('props.bpmnModeler 有值了！！！')
-        const w = window as any
-        w.bpmnInstances = {
-            modeler: props.bpmnModeler,
-            modeling: props.bpmnModeler.get('modeling'),
-            moddle: props.bpmnModeler.get('moddle'),
-            eventBus: props.bpmnModeler.get('eventBus'),
-            bpmnFactory: props.bpmnModeler.get('bpmnFactory'),
-            elementFactory: props.bpmnModeler.get('elementFactory'),
-            elementRegistry: props.bpmnModeler.get('elementRegistry'),
-            replace: props.bpmnModeler.get('replace'),
-            selection: props.bpmnModeler.get('selection')
-        }
+      console.log('props.bpmnModeler 有值了！！！')
+      const w = window as any
+      w.bpmnInstances = {
+        modeler: props.bpmnModeler,
+        modeling: props.bpmnModeler.get('modeling'),
+        moddle: props.bpmnModeler.get('moddle'),
+        eventBus: props.bpmnModeler.get('eventBus'),
+        bpmnFactory: props.bpmnModeler.get('bpmnFactory'),
+        elementFactory: props.bpmnModeler.get('elementFactory'),
+        elementRegistry: props.bpmnModeler.get('elementRegistry'),
+        replace: props.bpmnModeler.get('replace'),
+        selection: props.bpmnModeler.get('selection')
+      }
 
-        console.log(bpmnInstances(), 'window.bpmnInstances')
-        getActiveElement()
-        unwatchBpmn()
+      // console.log(bpmnInstances(), 'window.bpmnInstances')
+      getActiveElement()
+      unwatchBpmn()
     },
     {
-        immediate: true
+      immediate: true
     }
 )
 
 const getActiveElement = () => {
-    // 初始第一个选中元素 bpmn:Process
+  // 初始第一个选中元素 bpmn:Process
+  initFormOnChanged(null)
+  props.bpmnModeler.on('import.done', (e) => {
+    // console.log(e, 'eeeee')
     initFormOnChanged(null)
-    props.bpmnModeler.on('import.done', e => {
-        console.log(e, 'eeeee')
-        initFormOnChanged(null)
-    })
-    // 监听选择事件，修改当前激活的元素以及表单
-    props.bpmnModeler.on('selection.changed', ({ newSelection }) => {
-        initFormOnChanged(newSelection[0] || null)
-    })
-    props.bpmnModeler.on('element.changed', ({ element }) => {
-        // 保证 修改 "默认流转路径" 类似需要修改多个元素的事件发生的时候，更新表单的元素与原选中元素不一致。
-        if (element && element.id === elementId.value) {
-            initFormOnChanged(element)
-        }
-    })
+  })
+  // 监听选择事件，修改当前激活的元素以及表单
+  props.bpmnModeler.on('selection.changed', ({ newSelection }) => {
+    initFormOnChanged(newSelection[0] || null)
+  })
+  props.bpmnModeler.on('element.changed', ({ element }) => {
+    // 保证 修改 "默认流转路径" 类似需要修改多个元素的事件发生的时候，更新表单的元素与原选中元素不一致。
+    if (element && element.id === elementId.value) {
+      initFormOnChanged(element)
+    }
+  })
 }
 // 初始化数据
-const initFormOnChanged = element => {
-    let activatedElement = element
-    if (!activatedElement) {
-        activatedElement =
-            bpmnInstances().elementRegistry.find(el => el.type === 'bpmn:Process') ??
-            bpmnInstances().elementRegistry.find(el => el.type === 'bpmn:Collaboration')
-    }
-    if (!activatedElement) return
-    console.log(`
-              ----------
-      select element changed:
-                id:  ${activatedElement.id}
-              type:  ${activatedElement.businessObject.$type}
-              ----------
-              `)
-    console.log('businessObject: ', activatedElement.businessObject)
-    bpmnInstances().bpmnElement = activatedElement
-    bpmnElement.value = activatedElement
-    elementId.value = activatedElement.id
-    elementType.value = activatedElement.type.split(':')[1] || ''
-    elementBusinessObject.value = JSON.parse(JSON.stringify(activatedElement.businessObject))
-    conditionFormVisible.value = !!(
-        elementType.value === 'SequenceFlow' &&
-        activatedElement.source &&
-        activatedElement.source.type.indexOf('StartEvent') === -1
-    )
-    formVisible.value = elementType.value === 'UserTask' || elementType.value === 'StartEvent'
+const initFormOnChanged = (element) => {
+  let activatedElement = element
+  if (!activatedElement) {
+    activatedElement =
+        bpmnInstances().elementRegistry.find((el) => el.type === 'bpmn:Process') ??
+        bpmnInstances().elementRegistry.find((el) => el.type === 'bpmn:Collaboration')
+  }
+  if (!activatedElement) return
+  // console.log(`
+  //             ----------
+  //     select element changed:
+  //               id:  ${activatedElement.id}
+  //             type:  ${activatedElement.businessObject.$type}
+  //             ----------
+  //             `)
+  // console.log('businessObject: ', activatedElement.businessObject)
+  bpmnInstances().bpmnElement = activatedElement
+  bpmnElement.value = activatedElement
+  elementId.value = activatedElement.id
+  elementType.value = activatedElement.type.split(':')[1] || ''
+  elementBusinessObject.value = JSON.parse(JSON.stringify(activatedElement.businessObject))
+  conditionFormVisible.value = !!(
+      elementType.value === 'SequenceFlow' &&
+      activatedElement.source &&
+      activatedElement.source.type.indexOf('StartEvent') === -1
+  )
+  formVisible.value = elementType.value === 'UserTask' || elementType.value === 'StartEvent'
 }
 
 onBeforeUnmount(() => {
-    const w = window as any
-    w.bpmnInstances = null
-    console.log(props, 'props1')
-    console.log(props.bpmnModeler, 'props.bpmnModeler1')
+  const w = window as any
+  w.bpmnInstances = null
+  // console.log(props, 'props1')
+  // console.log(props.bpmnModeler, 'props.bpmnModeler1')
 })
 
 watch(
     () => elementId.value,
     () => {
-        activeTab.value = 'base'
+      activeTab.value = 'base'
     }
 )
 </script>