flowable/flowable-front/package/components/nodePanel/sequenceFlow.vue

<template>
  <div>
    <x-form ref="xForm" v-model="formData" :config="formConfig">
      <template #executionListener>
        <el-badge :value="executionListenerLength">
          <el-button size="small" @click="dialogName = 'executionListenerDialog'">编辑</el-button>
        </el-badge>
      </template>
	  <template #conditionExpressionListener>
	      <el-button size="small" @click="dialogName = 'conditionListenerDialog'">编辑</el-button>
	  </template>
    </x-form>
    <executionListenerDialog
      v-if="dialogName === 'executionListenerDialog'"
      :element="element"
      :modeler="modeler"
      @close="finishExecutionListener"
    />
	<conditionListenerDialog
	  v-if="dialogName === 'conditionListenerDialog'"
	  :element="element"
	  :modeler="modeler"
	  :tableName = "tableName"
	  @getCondition = "getCondition"
	  @close="finishExecutionListener"
	/>
  </div>
</template>

<script>
import mixinPanel from '../../common/mixinPanel'
import mixinExecutionListener from '../../common/mixinExecutionListener'
import { commonParse, conditionExpressionParse } from '../../common/parseElement'
import conditionListenerDialog from './property/conditionListener'
export default {
  mixins: [mixinPanel, mixinExecutionListener],
  props: {
  	tableName : {
  		type: String,
  		default: ''
  	}
  },
  data() {
    return {
      formData: {}
    }
  },
  components:{
	  conditionListenerDialog
  },
  computed: {
    formConfig() {
      return {
        inline: false,
        item: [
          {
            xType: 'input',
            name: 'id',
            label: '节点 id',
            rules: [{ required: true, message: 'Id 不能为空' }],
			disabled : true
          },
          {
            xType: 'input',
            name: 'name',
            label: '节点名称'
          },
          {
            xType: 'input',
            name: 'documentation',
            label: '节点描述'
          },
          {
            xType: 'slot',
            name: 'executionListener',
            label: '执行监听器'
          },
          {
            xType: 'input',
            name: 'conditionExpression',
            label: '跳转条件',
			readonly : true
          },
		  {
		    xType: 'slot',
		    name: 'conditionExpressionListener',
		    label: '条件编辑'
		  },
          /* {
            xType: 'input',
            name: 'skipExpression',
            label: '跳过表达式'
          } */
        ]
      }
    }
  },
  methods:{
	  getCondition(data) {
		  this.$set(this.formData, "conditionExpression", data);
	  }
  },
  watch: {
    'formData.conditionExpression': function(val) {
      if (val) {
        const newCondition = this.modeler.get('moddle').create('bpmn:FormalExpression', { body: val })
        this.updateProperties({ conditionExpression: newCondition })
      } else {
        this.updateProperties({ conditionExpression: null })
      }
    },
    'formData.skipExpression': function(val) {
      if (val === '') val = null
      this.updateProperties({ 'flowable:skipExpression': val })
    }
  },
  created() {
    let cache = commonParse(this.element)
    cache = conditionExpressionParse(cache)
    this.formData = cache
  }
}
</script>

<style></style>