flowable/flowable-front/package/components/nodePanel/task.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 #taskListener>
        <el-badge :value="taskListenerLength">
          <el-button size="small" @click="dialogName = 'taskListenerDialog'">编辑</el-button>
        </el-badge>
      </template>
	  <template #formListener>
		<el-button size="small" @click="formUrlOrFormJson">编辑</el-button>
	  </template>
	  <template #purviewListener>
	  		<el-button size="small" @click="dialogName = 'purviewListenerDialog'">编辑</el-button>
	  </template>
      <template #multiInstance>
        <el-badge :is-dot="hasMultiInstance">
          <el-button size="small" @click="dialogName = 'multiInstanceDialog'">编辑</el-button>
        </el-badge>
      </template>
    </x-form>
    <executionListenerDialog
      v-if="dialogName === 'executionListenerDialog'"
      :element="element"
      :modeler="modeler"
      @close="finishExecutionListener"
    />
    <taskListenerDialog
      v-if="dialogName === 'taskListenerDialog'"
      :element="element"
      :modeler="modeler"
      @close="finishTaskListener"
    />
	<el-drawer
		  :visible.sync="formVisible"
		  direction="rtl"
		  :withHeader = "false"
		  close-on-press-escape
		  destroy-on-close
		  ref = "drawerGenerator"
		  :append-to-body = "true"
		  size="100%">
		<formListenerDialog
		:tableName = "tableName"
		:formJson = "nodeFormJson"
		:parentsRefs = "parentsRefs"
		:nodeId = "formData.id"
		@sendFormJson = "getFormJson"
		>
		</formListenerDialog>
	</el-drawer>
	<urlListener
		v-if="dialogName === 'urlListenerDialog'"
		:nodeId = "formData.id"
		:customUrl = "customUrl"
		@sendCustomUrl = "gendCustomUrl"
	>
	</urlListener>

	<purviewListenerDialog 
	v-if="dialogName === 'purviewListenerDialog'"
	:purview = "purview"
	:nodeId = "formData.id"
	@sendPurview = "getPurview"
	>
	</purviewListenerDialog>
    <multiInstanceDialog
      v-if="dialogName === 'multiInstanceDialog'"
      :element="element"
      :modeler="modeler"
      @close="finishMultiInstance"
    />
  </div>
</template>

<script>
import mixinPanel from '../../common/mixinPanel'
import executionListenerDialog from './property/executionListener'
import taskListenerDialog from './property/taskListener'
import multiInstanceDialog from './property/multiInstance'
import purviewListenerDialog from './property/purviewListener'
import urlListener from './property/urlListener'
import formListenerDialog from '../../../src/views/index/Home'
import { commonParse, userTaskParse } from '../../common/parseElement'
export default {
  components: {
    executionListenerDialog,
    taskListenerDialog,
    multiInstanceDialog,
	formListenerDialog,
	purviewListenerDialog,
	urlListener
  },
  mixins: [mixinPanel],
  props: {
    users: {
      type: Array,
      required: true
    },
    groups: {
      type: Array,
      required: true
    },
	tableName : {
		type: String,
		default: ''
	}, 
	/** 节点配置信息 */
	nodeIdFormJsonArray : {
		type : Array,
		default: () => []
	},
	/** 菜单总配置信息 */
	menuConfig : {
		type : Object,
		default: () => {}
	},
	flowAbleIndex :{
		type : Object,
		default: () => {}
	},
  },
  data() {
    return {
      userTypeOption: [
        { label: '指定人员', value: 'assignee' },
        { label: '候选人员', value: 'candidateUsers' },
        { label: '候选组', value: 'candidateGroups' }
      ],
      dialogName: '',
	  formVisible : false,
	  purviewVisible : false,
      executionListenerLength: 0,
      taskListenerLength: 0,
      hasMultiInstance: false,
      formData: {},
	  parentsRefs : this.$refs,
	  nodeFormJson : '',
	  purview : '',
	  customUrl : '',
	  type : ''
    }
  },
  mounted () {
	this.type = this.menuConfig.type;
	if (!!this.element.businessObject.extensionElements) {
		this.executionListenerLength = this.element.businessObject.extensionElements.values.length;
	}
  },
  computed: {
    formConfig() {
      const _this = this
      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: 'slot',
            name: 'taskListener',
            label: '任务监听器',
            show: !!_this.showConfig.taskListener
          }, */
		  {
		    xType: 'slot',
		    name: 'formListener',
		    label: '视图设置',
		    show: !!_this.showConfig.taskListener
		  },
		  {
		    xType: 'slot',
		    name: 'purviewListener',
		    label: '操作权限',
		    show: !!_this.showConfig.taskListener
		  },
          {
            xType: 'select',
            name: 'userType',
            label: '人员类型',
            dic: _this.userTypeOption,
            show: !!_this.showConfig.userType
          },
          {
            xType: 'select',
            name: 'assignee',
            label: '指定人员',
            //是否允许加入自己随便输入的
            allowCreate: false,
            filterable: true,
            dic: { data: _this.users, label: 'name', value: 'id' },
            show: !!_this.showConfig.assignee && _this.formData.userType === 'assignee'
          },
          {
            xType: 'select',
            name: 'candidateUsers',
            label: '候选人员',
            multiple: true,
            allowCreate: false,
            filterable: true,
            dic: { data: _this.users, label: 'name', value: 'id' },
            show: !!_this.showConfig.candidateUsers && _this.formData.userType === 'candidateUsers'
          },
          {
            xType: 'select',
            name: 'candidateGroups',
            label: '候选组',
            multiple: true,
            allowCreate: false,
            filterable: true,
            dic: { data: _this.groups, label: 'name', value: 'id' },
            show: !!_this.showConfig.candidateGroups && _this.formData.userType === 'candidateGroups'
          },
        /*   {
            xType: 'slot',
            name: 'multiInstance',
            label: '多实例'
          }, */
     /*      {
            xType: 'switch',
            name: 'async',
            label: '异步',
            activeText: '是',
            inactiveText: '否',
            show: !!_this.showConfig.async
          }, */
       /*    {
            xType: 'input',
            name: 'priority',
            label: '优先级',
            show: !!_this.showConfig.priority
          }, */
         /*  {
            xType: 'input',
            name: 'formKey',
            label: '表单标识key',
            show: !!_this.showConfig.formKey
          }, */
         /*  {
            xType: 'input',
            name: 'skipExpression',
            label: '跳过表达式',
            show: !!_this.showConfig.skipExpression
          }, */
          {
            xType: 'switch',
            name: 'isForCompensation',
            label: '是否为补偿',
            activeText: '是',
            inactiveText: '否',
            show: !!_this.showConfig.isForCompensation
          },
          {
            xType: 'switch',
            name: 'triggerable',
            label: '服务任务可触发',
            activeText: '是',
            inactiveText: '否',
            show: !!_this.showConfig.triggerable
          },
          {
            xType: 'switch',
            name: 'autoStoreVariables',
            label: '自动存储变量',
            activeText: '是',
            inactiveText: '否',
            show: !!_this.showConfig.autoStoreVariables
          },
          {
            xType: 'input',
            name: 'ruleVariablesInput',
            label: '输入变量',
            show: !!_this.showConfig.ruleVariablesInput
          },
          {
            xType: 'input',
            name: 'rules',
            label: '规则',
            show: !!_this.showConfig.rules
          },
          {
            xType: 'input',
            name: 'resultVariable',
            label: '结果变量',
            show: !!_this.showConfig.resultVariable
          },
          {
            xType: 'switch',
            name: 'exclude',
            label: '排除',
            activeText: '是',
            inactiveText: '否',
            show: !!_this.showConfig.exclude
          },
          {
            xType: 'input',
            name: 'class',
            label: '类',
            show: !!_this.showConfig.class
          }/* ,
          {
            xType: 'datePicker',
            type: 'datetime',
            name: 'dueDate',
            label: '到期时间',
            show: !!_this.showConfig.dueDate
          } */
        ]
      }
    }
  },
  watch: {
    'formData.userType': function(val, oldVal) {
      if (oldVal) {
        const types = ['assignee', 'candidateUsers', 'candidateGroups']
        types.forEach(type => {
          delete this.element.businessObject.$attrs[`flowable:${type}`]
          delete this.formData[type]
        })
      }
    },
    'formData.assignee': function(val) {
      if (this.formData.userType !== 'assignee') {
        delete this.element.businessObject.$attrs[`flowable:assignee`]
        return
      }
      this.updateProperties({ 'flowable:assignee': val })
    },
    'formData.candidateUsers': function(val) {
      if (this.formData.userType !== 'candidateUsers') {
        delete this.element.businessObject.$attrs[`flowable:candidateUsers`]
        return
      }
      this.updateProperties({ 'flowable:candidateUsers': val?.join(',') })
    },
    'formData.candidateGroups': function(val) {
      if (this.formData.userType !== 'candidateGroups') {
        delete this.element.businessObject.$attrs[`flowable:candidateGroups`]
        return
      }
      this.updateProperties({ 'flowable:candidateGroups': val?.join(',') })
    },
    'formData.async': function(val) {
      if (val === '') val = null
      this.updateProperties({ 'flowable:async': true })
    },
    'formData.dueDate': function(val) {
      if (val === '') val = null
      this.updateProperties({ 'flowable:dueDate': val })
    },
    'formData.formKey': function(val) {
      if (val === '') val = null
      this.updateProperties({ 'flowable:formKey': val })
    },
    'formData.priority': function(val) {
      if (val === '') val = null
      this.updateProperties({ 'flowable:priority': val })
    },
    'formData.skipExpression': function(val) {
      if (val === '') val = null
      this.updateProperties({ 'flowable:skipExpression': val })
    },
    'formData.isForCompensation': function(val) {
      if (val === '') val = null
      this.updateProperties({ 'isForCompensation': val })
    },
    'formData.triggerable': function(val) {
      if (val === '') val = null
      this.updateProperties({ 'flowable:triggerable': val })
    },
    'formData.class': function(val) {
      if (val === '') val = null
      this.updateProperties({ 'flowable:class': val })
    },
    'formData.autoStoreVariables': function(val) {
      if (val === '') val = null
      this.updateProperties({ 'flowable:autoStoreVariables': val })
    },
    'formData.exclude': function(val) {
      if (val === '') val = null
      this.updateProperties({ 'flowable:exclude': val })
    },
    'formData.ruleVariablesInput': function(val) {
      if (val === '') val = null
      this.updateProperties({ 'flowable:ruleVariablesInput': val })
    },
    'formData.rules': function(val) {
      if (val === '') val = null
      this.updateProperties({ 'flowable:rules': val })
    },
    'formData.resultVariable': function(val) {
      if (val === '') val = null
      this.updateProperties({ 'flowable:resultVariable': val })
    },
	nodeIdFormJsonArray : {
		 handler(val, oldVal){
			 this.flowAbleIndex.nodeConfigListener(val);
		 },
		 deep:true //true 深度监听
	}
  },
  created() {
    let cache = commonParse(this.element)
    cache = userTaskParse(cache)
    this.formData = cache
    this.computedExecutionListenerLength()
    this.computedTaskListenerLength()
    this.computedHasMultiInstance()
  },
  methods: {
    computedExecutionListenerLength() {
      this.executionListenerLength = this.element.businessObject.extensionElements?.values
        ?.filter(item => item.$type === 'flowable:ExecutionListener').length ?? 0
    },
    computedTaskListenerLength() {
      this.taskListenerLength = this.element.businessObject.extensionElements?.values
        ?.filter(item => item.$type === 'flowable:TaskListener').length ?? 0
    },
    computedHasMultiInstance() {
      if (this.element.businessObject.loopCharacteristics) {
        this.hasMultiInstance = true
      } else {
        this.hasMultiInstance = false
      }
    },
    finishExecutionListener() {
      if (this.dialogName === 'executionListenerDialog') {
        this.computedExecutionListenerLength()
      }
      this.dialogName = ''
    },
    finishTaskListener() {
      if (this.dialogName === 'taskListenerDialog') {
        this.computedTaskListenerLength()
      }
      this.dialogName = ''
    },
    finishMultiInstance() {
      if (this.dialogName === 'multiInstanceDialog') {
        this.computedHasMultiInstance()
      }
      this.dialogName = ''
    },
	getFormJson(data) {
		var flag = false;
		for (let d of this.nodeIdFormJsonArray) {
			if (d.nodeId == data.nodeId) {
				d.jsonData = data.jsonData;
				flag = true;
				break;
			}
		}
		
		if (!flag) {
			this.nodeIdFormJsonArray.push(data);
		}
	},
	getPurview(data) {
		var flag = false;
		for (let d of this.nodeIdFormJsonArray) {
			if (d.nodeId == data.nodeId) {
				d.purview = data.purview;
				flag = true;
				break;
			}
		}
		
		if (!flag) {
			this.nodeIdFormJsonArray.push(data);
		}
	},
	gendCustomUrl(data) {
		var flag = false;
		for (let d of this.nodeIdFormJsonArray) {
			if (d.nodeId == data.nodeId) {
				d.customUrl = data.customUrl;
				flag = true;
				break;
			}
		}
		if (!flag) {
			this.nodeIdFormJsonArray.push(data);
		}
	},
	formUrlOrFormJson () {
		this.nodeFormJson = this.menuConfig.formJson;
		this.customUrl = this.menuConfig.customUrl;
		for (let n of this.nodeIdFormJsonArray) {
			if (n.nodeId == this.formData.id) {
				this.nodeFormJson = n.jsonData;
				this.purview = n.purview;
				this.customUrl = n.customUrl;
				break;
			}
		}
		
		// 自定义视图
		if (this.type == '0') {
			this.formVisible = true;
		} else {
			this.dialogName = 'urlListenerDialog'
		}
	},
	closedDialog() {
		this.dialogName = '';
	}
  }
}
</script>

<style></style>