ilead-ibpmp-design-new/package/common/mixinPanel.js

基于 `vue` 和 `bpmn.io@7.0` ，实现 flowable 的 modeler 模型设计器

/*
 * @Author: your name
 * @Date: 2020-11-26 10:56:43
 * @LastEditTime: 2020-12-09 18:14:16
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \ilead-uid:\work\2020\ilead-ui\ilead-ibpmp-design\package\common\mixinPanel.js
 */
// import xcrud from 'xcrud'
// import golbalConfig from 'xcrud/package/common/config'
import xcrud from '../components/xcrud/index.js'
import golbalConfig from '../components/xcrud/common/config.js'
import showConfig from '../flowable/showConfig'
golbalConfig.set({
  input: {
    // size: 'mini'
  },
  select: {
    // size: 'mini'
  },
  colorPicker: {
    showAlpha: true
  },
  xform: {
    form: {
      labelWidth: '105px'
      // size: 'mini'
    }
  }
})
export default {
  components: { xForm: xcrud.xForm },
  props: {
    modeler: {
      type: Object,
      required: true
    },
    element: {
      type: Object,
      required: true
    },
    categorys: {
      type: Array,
      default: () => []
    }
  },
  watch: {
    'formData.id': function(val) {
      this.updateProperties({ id: val })
    },
    'formData.name': function(val) {
      this.updateProperties({ name: val })
    },
    'color': function(val) {
      this.setColor({ fill: val, stroke: val })
      this.updateProperties({ color: val })
    }
  },
  methods: {
    updateProperties(properties) {
      const modeling = this.modeler.get('modeling')
      modeling.updateProperties(this.element, properties)
    },
    setColor(properties) {
      const modeling = this.modeler.get('modeling')
      modeling.setColor(this.element, properties)
    }
  },
  computed: {
    elementType() {
      const bizObj = this.element.businessObject
      return bizObj.eventDefinitions
        ? bizObj.eventDefinitions[0].$type
        : bizObj.$type
    },
    showConfig() {
      return showConfig[this.elementType] || {}
    }
  }
}