flowable/flowable-front/package/PropertyPanel.vue

<template>
  <div ref="propertyPanel" class="property-panel">
    <div v-if="nodeName" class="node-name">{{ nodeName }}</div>
    <component
      :is="getComponent"
      v-if="element"
      :element="element"
      :modeler="modeler"
      :users="users"
      :groups="groups"
	  :tableName="tableName"
	  :nodeIdFormJsonArray="nodeIdFormJsonArray"
	  :menuConfig = "menuConfig"
	  :purview="purview"
      :categorys="categorys"
	  :flowAbleIndex="flowAbleIndex"
    />
  </div>
</template>

<script>
import taskPanel from './components/nodePanel/task'
import startEndPanel from './components/nodePanel/startEnd'
import processPanel from './components/nodePanel/process'
import sequenceFlowPanel from './components/nodePanel/sequenceFlow'
import gatewayPanel from './components/nodePanel/gateway'
import { NodeName } from './lang/zh'

export default {
  name: 'PropertyPanel',
  components: { processPanel, taskPanel, startEndPanel, sequenceFlowPanel, gatewayPanel },
  props: {
    users: {
      type: Array,
      required: true
    },
    groups: {
      type: Array,
      required: true
    },
    categorys: {
      type: Array,
      required: true
    },
    modeler: {
      type: Object,
      required: true
    },
	tableName : {
		type: String,
		default: ''
	}, 
	nodeIdFormJsonArray : {
		type : Array,
		default: () => []
	},
	purview : {
		type: String,
		default: ''
	},
	menuConfig :{
		type : Object,
		default: () => {}
	},
	flowAbleIndex : {
		type : Object,
		default: () => {}
	}
  },
  data() {
    return {
      element: null,
      form: {
        id: '',
        name: '',
        color: null
      },
      roles: [
        { value: 'manager', label: '经理' },
        { value: 'personnel', label: '人事' },
        { value: 'charge', label: '主管' }
      ]
    }
  },
  computed: {
    getComponent() {
		console.log("getComponent");
		const type = this.element?.type;
		if (type == 'bpmn:EndEvent') {
			let extensionElements = this.element.businessObject.get('extensionElements')
			if (!extensionElements) {
				extensionElements = this.modeler.get('moddle').create('bpmn:ExtensionElements');
				const executionListener = this.modeler.get('moddle').create('flowable:ExecutionListener')
				executionListener['event'] = 'start'
				executionListener['class'] = 'com.huyi.flowable.listener.ExecutionCallListener'
				extensionElements.get('values').push(executionListener)
				const modeling = this.modeler.get('modeling')
				modeling.updateProperties(this.element, { extensionElements: extensionElements })
			}
		}
		if (['bpmn:IntermediateThrowEvent', 'bpmn:StartEvent', 'bpmn:EndEvent'].includes(type)) {
			return 'startEndPanel';
		}
		if ([
			'bpmn:UserTask',
			'bpmn:Task',
			'bpmn:SendTask',
			'bpmn:ReceiveTask',
			'bpmn:ManualTask',
			'bpmn:BusinessRuleTask',
			'bpmn:ServiceTask',
			'bpmn:ScriptTask'
			// 'bpmn:CallActivity',
			// 'bpmn:SubProcess'
		].includes(type)) {
			return 'taskPanel';
		}
		if (type === 'bpmn:SequenceFlow') {
			return 'sequenceFlowPanel';
		}
		if ([
			'bpmn:InclusiveGateway',
			'bpmn:ExclusiveGateway',
			'bpmn:ParallelGateway',
			'bpmn:EventBasedGateway'
		].includes(type)) {
			return 'gatewayPanel';
		}
		if (type === 'bpmn:Process') {
			return 'processPanel';
		}
		return null;
    },
    nodeName() {
      if (this.element) {
        const bizObj = this.element.businessObject
        const type = bizObj?.eventDefinitions
          ? bizObj.eventDefinitions[0].$type
          : bizObj.$type
        return NodeName[type] || type
      }
      return ''
    }
  },
  mounted() {
    this.handleModeler()
  },
  methods: {
    handleModeler() {
      this.modeler.on('root.added', e => {
        if (e.element.type === 'bpmn:Process') {
          this.element = null
          this.$nextTick().then(() => {
            this.element = e.element
          })
        }
      })
	  // 节点点击
      this.modeler.on('element.click', e => {
        const { element } = e
        console.log(element)
        if (element.type === 'bpmn:Process') {
          this.element = element
        }
      })
      this.modeler.on('selection.changed', e => {
        // hack 同类型面板不刷新
        this.element = null
        const element = e.newSelection[0]
        if (element) {
          this.$nextTick().then(() => {
            this.element = element
          })
        }
      })
    }
  }
}
</script>

<style lang="scss">
.property-panel {
  padding: 20px 20px;
  // reset element css
  .el-form--label-top .el-form-item__label {
    padding: 0;
  }
  .el-form-item {
    margin-bottom: 6px;
  }
  .tab-table .el-form-item {
    margin-bottom: 16px;
  }
  .node-name{
    border-bottom: 1px solid #ccc;
    padding: 0 0 10px 20px;
    margin-bottom: 10px;
    font-size: 16px;
    font-weight: bold;
    color: #444;
  }
}
</style>