admin-sjzx/src/components/bpmnProcessDesigner/package/penal/PropertiesPanel.vue

<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>
</template>
<script lang='ts' setup>
import { onMounted, provide, ref, watch, onBeforeUnmount } from '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 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'

defineOptions({ name: 'MyPropertiesPanel' })

/**
 * 侧边栏
 * @Author MiyueFE
 * @Home https://github.com/miyuesc
 * @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 // 流程模型的数据
})

const activeTab = ref('base')
const elementId = ref('')
const elementType = ref('')
const elementBusinessObject = ref<any>({}) // 元素 businessObject 镜像，提供给需要做判断的组件使用
const conditionFormVisible = ref(false) // 流转条件设置
const formVisible = ref(false) // 表单配置
const bpmnElement = ref()

provide('prefix', props.prefix)
provide('width', props.width)
const bpmnInstances = () => (window as any)?.bpmnInstances

// 监听 props.bpmnModeler 然后 initModels
const unwatchBpmn = watch(
    () => props.bpmnModeler,
    () => {
        // 避免加载时 流程图 并未加载完成
        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(bpmnInstances(), 'window.bpmnInstances')
        getActiveElement()
        unwatchBpmn()
    },
    {
        immediate: true
    }
)

const getActiveElement = () => {
    // 初始第一个选中元素 bpmn:Process
    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)
        }
    })
}
// 初始化数据
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')
})

watch(
    () => elementId.value,
    () => {
        activeTab.value = 'base'
    }
)
</script>