demo-web-ui
This commit is contained in:
liupopo
@@ -0,0 +1,81 @@
|
||||
<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>
|
||||
</x-form>
|
||||
<executionListenerDialog
|
||||
v-if="dialogName === 'executionListenerDialog'"
|
||||
:element="element"
|
||||
:modeler="modeler"
|
||||
@close="finishExecutionListener"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import mixinPanel from '../../common/mixinPanel'
|
||||
import mixinExecutionListener from '../../common/mixinExecutionListener'
|
||||
import { commonParse } from '../../common/parseElement'
|
||||
export default {
|
||||
mixins: [mixinPanel, mixinExecutionListener],
|
||||
data() {
|
||||
return {
|
||||
formData: {}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
formConfig() {
|
||||
return {
|
||||
inline: false,
|
||||
item: [
|
||||
{
|
||||
xType: 'input',
|
||||
name: 'id',
|
||||
label: '节点 id',
|
||||
rules: [{ required: true, message: 'Id 不能为空' }]
|
||||
},
|
||||
{
|
||||
xType: 'input',
|
||||
name: 'name',
|
||||
label: '节点名称'
|
||||
},
|
||||
{
|
||||
xType: 'input',
|
||||
name: 'documentation',
|
||||
label: '节点描述'
|
||||
},
|
||||
{
|
||||
xType: 'slot',
|
||||
name: 'executionListener',
|
||||
label: '执行监听器'
|
||||
},
|
||||
{
|
||||
xType: 'switch',
|
||||
name: 'async',
|
||||
label: '异步',
|
||||
activeText: '是',
|
||||
inactiveText: '否'
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
'formData.async': function(val) {
|
||||
if (val === '') val = null
|
||||
this.updateProperties({ 'flowable:async': val })
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.formData = commonParse(this.element)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
</style>
|
||||
113
demo-web-ui/src/views/Process/components/nodePanel/process.vue
Normal file
113
demo-web-ui/src/views/Process/components/nodePanel/process.vue
Normal file
@@ -0,0 +1,113 @@
|
||||
<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 #signal>
|
||||
<el-badge :value="signalLength">
|
||||
<el-button size="small" @click="dialogName = 'signalDialog'">编辑</el-button>
|
||||
</el-badge>
|
||||
</template>
|
||||
</x-form>
|
||||
<executionListenerDialog
|
||||
v-if="dialogName === 'executionListenerDialog'"
|
||||
:element="element"
|
||||
:modeler="modeler"
|
||||
@close="finishExecutionListener"
|
||||
/>
|
||||
<signalDialog
|
||||
v-if="dialogName === 'signalDialog'"
|
||||
:element="element"
|
||||
:modeler="modeler"
|
||||
@close="finishExecutionListener"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import mixinPanel from '../../common/mixinPanel'
|
||||
import mixinExecutionListener from '../../common/mixinExecutionListener'
|
||||
import signalDialog from './property/signal'
|
||||
import { commonParse } from '../../common/parseElement'
|
||||
export default {
|
||||
components: {
|
||||
signalDialog
|
||||
},
|
||||
mixins: [mixinPanel, mixinExecutionListener],
|
||||
data() {
|
||||
return {
|
||||
signalLength: 0,
|
||||
formData: {}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
formConfig() {
|
||||
const _this = this
|
||||
return {
|
||||
inline: false,
|
||||
item: [
|
||||
{
|
||||
xType: 'select',
|
||||
name: 'processCategory',
|
||||
label: '流程分类',
|
||||
dic: { data: _this.categorys, label: 'dictLabel', value: 'dictValue' }
|
||||
},
|
||||
{
|
||||
xType: 'input',
|
||||
name: 'id',
|
||||
label: '流程标识key',
|
||||
rules: [{ required: true, message: 'Id 不能为空' }]
|
||||
},
|
||||
{
|
||||
xType: 'input',
|
||||
name: 'name',
|
||||
label: '流程名称'
|
||||
},
|
||||
{
|
||||
xType: 'input',
|
||||
name: 'documentation',
|
||||
label: '节点描述'
|
||||
},
|
||||
{
|
||||
xType: 'slot',
|
||||
name: 'executionListener',
|
||||
label: '执行监听器'
|
||||
},
|
||||
{
|
||||
xType: 'slot',
|
||||
name: 'signal',
|
||||
label: '信号定义'
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
'formData.processCategory': function(val) {
|
||||
if (val === '') val = null
|
||||
this.updateProperties({ 'flowable:processCategory': val })
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.formData = commonParse(this.element)
|
||||
},
|
||||
methods: {
|
||||
computedSignalLength() {
|
||||
this.signalLength = this.element.businessObject.extensionElements?.values?.length ?? 0
|
||||
},
|
||||
finishSignal() {
|
||||
if (this.dialogName === 'signalDialog') {
|
||||
this.computedSignalLength()
|
||||
}
|
||||
this.dialogName = ''
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,194 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-dialog
|
||||
title="执行监听器"
|
||||
:visible.sync="dialogVisible"
|
||||
width="900px"
|
||||
:close-on-click-modal="false"
|
||||
:close-on-press-escape="false"
|
||||
:show-close="false"
|
||||
@closed="$emit('close')"
|
||||
>
|
||||
<x-form ref="xForm" v-model="formData" :config="formConfig">
|
||||
<template #params="scope">
|
||||
<el-badge :value="scope.row.params ? scope.row.params.length : 0" type="primary">
|
||||
<el-button size="small" @click="configParam(scope.$index)">配置</el-button>
|
||||
</el-badge>
|
||||
</template>
|
||||
</x-form>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button type="primary" size="medium" @click="closeDialog">确 定</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
<listenerParam v-if="showParamDialog" :value="formData.executionListener[nowIndex].params" @close="finishConfigParam" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import mixinPanel from '../../../common/mixinPanel'
|
||||
import listenerParam from './listenerParam'
|
||||
export default {
|
||||
components: { listenerParam },
|
||||
mixins: [mixinPanel],
|
||||
data() {
|
||||
return {
|
||||
dialogVisible: true,
|
||||
showParamDialog: false,
|
||||
nowIndex: null,
|
||||
formData: {
|
||||
executionListener: []
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
formConfig() {
|
||||
// const _this = this
|
||||
return {
|
||||
inline: false,
|
||||
item: [
|
||||
{
|
||||
xType: 'tabs',
|
||||
tabs: [
|
||||
{
|
||||
label: '执行监听器',
|
||||
name: 'executionListener',
|
||||
column: [
|
||||
{
|
||||
label: '事件',
|
||||
name: 'event',
|
||||
width: 180,
|
||||
rules: [{ required: true, message: '请选择', trigger: ['blur', 'change'] }],
|
||||
xType: 'select',
|
||||
dic: [
|
||||
{ label: 'start', value: 'start' },
|
||||
{ label: 'end', value: 'end' },
|
||||
{ label: 'take', value: 'take' }
|
||||
]
|
||||
},
|
||||
{
|
||||
label: '类型',
|
||||
name: 'type',
|
||||
width: 180,
|
||||
rules: [{ required: true, message: '请选择', trigger: ['blur', 'change'] }],
|
||||
xType: 'select',
|
||||
dic: [
|
||||
{ label: '类', value: 'class' },
|
||||
{ label: '表达式', value: 'expression' },
|
||||
{ label: '委托表达式', value: 'delegateExpression' }
|
||||
],
|
||||
tooltip: `类：示例 com.company.MyCustomListener，自定义类必须实现 org.flowable.engine.delegate.TaskListener 接口 <br />
|
||||
表达式：示例 \${myObject.callMethod(task, task.eventName)} <br />
|
||||
委托表达式：示例 \${myListenerSpringBean} ，该 springBean 需要实现 org.flowable.engine.delegate.TaskListener 接口
|
||||
`
|
||||
},
|
||||
{
|
||||
label: 'java 类名',
|
||||
name: 'className',
|
||||
xType: 'input',
|
||||
rules: [{ required: true, message: '请输入', trigger: ['blur', 'change'] }]
|
||||
},
|
||||
{
|
||||
xType: 'slot',
|
||||
label: '参数',
|
||||
width: 120,
|
||||
slot: true,
|
||||
name: 'params'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.formData.executionListener = this.element.businessObject.extensionElements?.values
|
||||
.filter(item => item.$type === 'flowable:ExecutionListener')
|
||||
.map(item => {
|
||||
let type
|
||||
if ('class' in item) type = 'class'
|
||||
if ('expression' in item) type = 'expression'
|
||||
if ('delegateExpression' in item) type = 'delegateExpression'
|
||||
return {
|
||||
event: item.event,
|
||||
type: type,
|
||||
className: item[type],
|
||||
params: item.fields?.map(field => {
|
||||
let fieldType
|
||||
if ('stringValue' in field) fieldType = 'stringValue'
|
||||
if ('expression' in field) fieldType = 'expression'
|
||||
return {
|
||||
name: field.name,
|
||||
type: fieldType,
|
||||
value: field[fieldType]
|
||||
}
|
||||
}) ?? []
|
||||
}
|
||||
}) ?? []
|
||||
},
|
||||
methods: {
|
||||
configParam(index) {
|
||||
this.nowIndex = index
|
||||
const nowObj = this.formData.executionListener[index]
|
||||
if (!nowObj.params) {
|
||||
nowObj.params = []
|
||||
}
|
||||
this.showParamDialog = true
|
||||
},
|
||||
finishConfigParam(param) {
|
||||
this.showParamDialog = false
|
||||
// hack 数量不更新问题
|
||||
const cache = this.formData.executionListener[this.nowIndex]
|
||||
cache.params = param
|
||||
this.$set(this.formData.executionListener[this.nowIndex], this.nowIndex, cache)
|
||||
this.nowIndex = null
|
||||
},
|
||||
updateElement() {
|
||||
if (this.formData.executionListener?.length) {
|
||||
let extensionElements = this.element.businessObject.get('extensionElements')
|
||||
if (!extensionElements) {
|
||||
extensionElements = this.modeler.get('moddle').create('bpmn:ExtensionElements')
|
||||
}
|
||||
// 清除旧值
|
||||
extensionElements.values = extensionElements.values?.filter(item => item.$type !== 'flowable:ExecutionListener') ?? []
|
||||
this.formData.executionListener.forEach(item => {
|
||||
const executionListener = this.modeler.get('moddle').create('flowable:ExecutionListener')
|
||||
executionListener['event'] = item.event
|
||||
executionListener[item.type] = item.className
|
||||
if (item.params && item.params.length) {
|
||||
item.params.forEach(field => {
|
||||
const fieldElement = this.modeler.get('moddle').create('flowable:Field')
|
||||
fieldElement['name'] = field.name
|
||||
fieldElement[field.type] = field.value
|
||||
// 注意：flowable.json 中定义的string和expression类为小写，不然会和原生的String类冲突，此处为hack
|
||||
// const valueElement = this.modeler.get('moddle').create(`flowable:${field.type}`, { body: field.value })
|
||||
// fieldElement[field.type] = valueElement
|
||||
executionListener.get('fields').push(fieldElement)
|
||||
})
|
||||
}
|
||||
extensionElements.get('values').push(executionListener)
|
||||
})
|
||||
this.updateProperties({ extensionElements: extensionElements })
|
||||
} else {
|
||||
const extensionElements = this.element.businessObject[`extensionElements`]
|
||||
if (extensionElements) {
|
||||
extensionElements.values = extensionElements.values?.filter(item => item.$type !== 'flowable:ExecutionListener') ?? []
|
||||
}
|
||||
}
|
||||
},
|
||||
closeDialog() {
|
||||
this.$refs.xForm.validate().then(() => {
|
||||
this.updateElement()
|
||||
this.dialogVisible = false
|
||||
}).catch(e => console.error(e))
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.flow-containers .el-badge__content.is-fixed {
|
||||
top: 18px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,96 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-dialog
|
||||
title="监听器参数"
|
||||
:visible.sync="dialogVisible"
|
||||
width="700px"
|
||||
:close-on-click-modal="false"
|
||||
:close-on-press-escape="false"
|
||||
:show-close="false"
|
||||
@closed="$emit('close', formData.paramList)"
|
||||
>
|
||||
<x-form ref="xForm" v-model="formData" :config="formConfig" />
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button type="primary" size="medium" @click="closeDialog">确 定</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import mixinXcrud from '../../../common/mixinXcrud'
|
||||
export default {
|
||||
mixins: [mixinXcrud],
|
||||
props: {
|
||||
value: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
dialogVisible: true,
|
||||
formData: {
|
||||
paramList: this.value
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
formConfig() {
|
||||
return {
|
||||
inline: false,
|
||||
item: [
|
||||
{
|
||||
xType: 'tabs',
|
||||
tabs: [
|
||||
{
|
||||
label: '监听器参数',
|
||||
name: 'paramList',
|
||||
column: [
|
||||
{
|
||||
label: '类型',
|
||||
name: 'type',
|
||||
width: 180,
|
||||
rules: [{ required: true, message: '请选择', trigger: ['blur', 'change'] }],
|
||||
xType: 'select',
|
||||
dic: [
|
||||
{ label: '字符串', value: 'stringValue' },
|
||||
{ label: '表达式', value: 'expression' }
|
||||
]
|
||||
},
|
||||
{
|
||||
label: '名称',
|
||||
name: 'name',
|
||||
width: 180,
|
||||
rules: [{ required: true, message: '请选择', trigger: ['blur', 'change'] }],
|
||||
xType: 'input'
|
||||
},
|
||||
{
|
||||
label: '值',
|
||||
name: 'value',
|
||||
xType: 'input',
|
||||
rules: [{ required: true, message: '请输入', trigger: ['blur', 'change'] }]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
closeDialog() {
|
||||
this.$refs.xForm.validate().then(() => {
|
||||
this.dialogVisible = false
|
||||
}).catch(e => console.error(e))
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.flow-containers .el-badge__content.is-fixed {
|
||||
top: 18px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,117 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-dialog
|
||||
title="多实例配置"
|
||||
:visible.sync="dialogVisible"
|
||||
width="500px"
|
||||
:close-on-click-modal="false"
|
||||
:close-on-press-escape="false"
|
||||
:show-close="false"
|
||||
class="muti-instance"
|
||||
@closed="$emit('close')"
|
||||
>
|
||||
<el-alert
|
||||
type="info"
|
||||
:closable="false"
|
||||
show-icon
|
||||
style="margin-bottom: 20px"
|
||||
>
|
||||
<template #title>
|
||||
按照BPMN2.0规范的要求，用于为每个实例创建执行的父执行，会提供下列变量:<br>
|
||||
nrOfInstances：实例总数。<br>
|
||||
nrOfActiveInstances：当前活动的（即未完成的），实例数量。对于顺序多实例，这个值总为1。<br>
|
||||
nrOfCompletedInstances：已完成的实例数量。<br>
|
||||
loopCounter：给定实例在for-each循环中的index。<br>
|
||||
</template>
|
||||
</el-alert>
|
||||
<x-form ref="xForm" v-model="formData" :config="formConfig" />
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import mixinPanel from '../../../common/mixinPanel'
|
||||
import { formatJsonKeyValue } from '../../../common/parseElement'
|
||||
export default {
|
||||
mixins: [mixinPanel],
|
||||
data() {
|
||||
return {
|
||||
dialogVisible: true,
|
||||
formData: {}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
formConfig() {
|
||||
const _this = this
|
||||
return {
|
||||
inline: false,
|
||||
item: [
|
||||
{
|
||||
xType: 'input',
|
||||
name: 'collection',
|
||||
label: '集合',
|
||||
tooltip: '属性会作为表达式进行解析。如果表达式解析为字符串而不是一个集合，<br />不论是因为本身配置的就是静态字符串值，还是表达式计算结果为字符串，<br />这个字符串都会被当做变量名，并从流程变量中用于获取实际的集合。'
|
||||
},
|
||||
{
|
||||
xType: 'input',
|
||||
name: 'elementVariable',
|
||||
label: '元素变量',
|
||||
tooltip: '每创建一个用户任务前，先以该元素变量为label，集合中的一项为value，<br />创建（局部）流程变量，该局部流程变量被用于指派用户任务。<br />一般来说，该字符串应与指定人员变量相同。'
|
||||
},
|
||||
{
|
||||
xType: 'radio',
|
||||
name: 'isSequential',
|
||||
label: '执行方式',
|
||||
dic: [{ label: '串行', value: true }, { label: '并行', value: false }]
|
||||
},
|
||||
{
|
||||
xType: 'input',
|
||||
name: 'completionCondition',
|
||||
label: '完成条件',
|
||||
tooltip: '多实例活动在所有实例都完成时结束，然而也可以指定一个表达式，在每个实例<br />结束时进行计算。当表达式计算为true时，将销毁所有剩余的实例，并结束多实例<br />活动，继续执行流程。例如 ${nrOfCompletedInstances/nrOfInstances >= 0.6 }，<br />表示当任务完成60%时，该节点就算完成'
|
||||
}
|
||||
],
|
||||
operate: [
|
||||
{ text: '确定', show: true, click: _this.save },
|
||||
{ text: '清空', show: true, click: () => { _this.formData = {} } }
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
const cache = JSON.parse(JSON.stringify(this.element.businessObject.loopCharacteristics ?? {}))
|
||||
cache.completionCondition = cache.completionCondition?.body
|
||||
this.formData = formatJsonKeyValue(cache)
|
||||
},
|
||||
methods: {
|
||||
updateElement() {
|
||||
if (this.formData.isSequential !== null && this.formData.isSequential !== undefined) {
|
||||
let loopCharacteristics = this.element.businessObject.get('loopCharacteristics')
|
||||
if (!loopCharacteristics) {
|
||||
loopCharacteristics = this.modeler.get('moddle').create('bpmn:MultiInstanceLoopCharacteristics')
|
||||
}
|
||||
loopCharacteristics['isSequential'] = this.formData.isSequential
|
||||
loopCharacteristics['collection'] = this.formData.collection
|
||||
loopCharacteristics['elementVariable'] = this.formData.elementVariable
|
||||
if (this.formData.completionCondition) {
|
||||
const completionCondition = this.modeler.get('moddle').create('bpmn:Expression', { body: this.formData.completionCondition })
|
||||
loopCharacteristics['completionCondition'] = completionCondition
|
||||
}
|
||||
this.updateProperties({ loopCharacteristics: loopCharacteristics })
|
||||
} else {
|
||||
delete this.element.businessObject.loopCharacteristics
|
||||
}
|
||||
},
|
||||
save() {
|
||||
this.updateElement()
|
||||
this.dialogVisible = false
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.muti-instance .el-form-item {
|
||||
margin-bottom: 22px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,124 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-dialog
|
||||
title="信号定义"
|
||||
:visible.sync="dialogVisible"
|
||||
width="700px"
|
||||
:close-on-click-modal="false"
|
||||
:close-on-press-escape="false"
|
||||
:show-close="false"
|
||||
@closed="$emit('close')"
|
||||
>
|
||||
<x-form ref="xForm" v-model="formData" :config="formConfig" />
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button type="primary" size="medium" @click="closeDialog">确 定</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import mixinPanel from '../../../common/mixinPanel'
|
||||
export default {
|
||||
mixins: [mixinPanel],
|
||||
data() {
|
||||
return {
|
||||
dialogVisible: true,
|
||||
formData: {
|
||||
signal: []
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
formConfig() {
|
||||
// const _this = this
|
||||
return {
|
||||
inline: false,
|
||||
item: [
|
||||
{
|
||||
xType: 'tabs',
|
||||
tabs: [
|
||||
{
|
||||
label: '信号定义',
|
||||
name: 'signal',
|
||||
column: [
|
||||
{
|
||||
label: 'scope',
|
||||
name: 'scope',
|
||||
width: 180,
|
||||
rules: [{ required: true, message: '请选择', trigger: ['blur', 'change'] }],
|
||||
xType: 'select',
|
||||
dic: [
|
||||
{ label: '全局', value: 'start' },
|
||||
{ label: '流程实例', value: 'end' }
|
||||
]
|
||||
},
|
||||
{
|
||||
label: 'id',
|
||||
name: 'id',
|
||||
width: 200,
|
||||
rules: [{ required: true, message: '请输入', trigger: ['blur', 'change'] }],
|
||||
xType: 'input'
|
||||
},
|
||||
{
|
||||
label: '名称',
|
||||
name: 'name',
|
||||
xType: 'input',
|
||||
rules: [{ required: true, message: '请输入', trigger: ['blur', 'change'] }]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
// this.formData.signal = this.element.businessObject.extensionElements?.values.map(item => {
|
||||
// let type
|
||||
// if ('class' in item.$attrs) type = 'class'
|
||||
// if ('expression' in item.$attrs) type = 'expression'
|
||||
// if ('delegateExpression' in item.$attrs) type = 'delegateExpression'
|
||||
// return {
|
||||
// event: item.$attrs.event,
|
||||
// type: type,
|
||||
// className: item.$attrs[type]
|
||||
// }
|
||||
// }) ?? []
|
||||
},
|
||||
methods: {
|
||||
updateElement() {
|
||||
if (this.formData.signal?.length) {
|
||||
let extensionElements = this.element.businessObject.get('extensionElements')
|
||||
if (!extensionElements) {
|
||||
extensionElements = this.modeler.get('moddle').create('bpmn:signal')
|
||||
}
|
||||
const length = extensionElements.get('values').length
|
||||
for (let i = 0; i < length; i++) {
|
||||
// 清除旧值
|
||||
extensionElements.get('values').pop()
|
||||
}
|
||||
this.updateProperties({ extensionElements: extensionElements })
|
||||
} else {
|
||||
const extensionElements = this.element.businessObject[`extensionElements`]
|
||||
if (extensionElements) {
|
||||
extensionElements.values = extensionElements.values?.filter(item => item.$type !== 'flowable:ExecutionListener')
|
||||
}
|
||||
}
|
||||
},
|
||||
closeDialog() {
|
||||
this.$refs.xForm.validate().then(() => {
|
||||
this.updateElement()
|
||||
this.dialogVisible = false
|
||||
}).catch(e => console.error(e))
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.flow-containers .el-badge__content.is-fixed {
|
||||
top: 18px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,196 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-dialog
|
||||
title="任务监听器"
|
||||
:visible.sync="dialogVisible"
|
||||
width="900px"
|
||||
:close-on-click-modal="false"
|
||||
:close-on-press-escape="false"
|
||||
:show-close="false"
|
||||
@closed="$emit('close')"
|
||||
>
|
||||
<x-form ref="xForm" v-model="formData" :config="formConfig">
|
||||
<template #params="scope">
|
||||
<el-badge :value="scope.row.params ? scope.row.params.length : 0" type="primary">
|
||||
<el-button size="small" @click="configParam(scope.$index)">配置</el-button>
|
||||
</el-badge>
|
||||
</template>
|
||||
</x-form>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button type="primary" size="medium" @click="closeDialog">确 定</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
<listenerParam v-if="showParamDialog" :value="formData.taskListener[nowIndex].params" @close="finishConfigParam" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import mixinPanel from '../../../common/mixinPanel'
|
||||
import listenerParam from './listenerParam'
|
||||
export default {
|
||||
components: { listenerParam },
|
||||
mixins: [mixinPanel],
|
||||
data() {
|
||||
return {
|
||||
dialogVisible: true,
|
||||
showParamDialog: false,
|
||||
nowIndex: null,
|
||||
formData: {
|
||||
taskListener: []
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
formConfig() {
|
||||
// const _this = this
|
||||
return {
|
||||
inline: false,
|
||||
item: [
|
||||
{
|
||||
xType: 'tabs',
|
||||
tabs: [
|
||||
{
|
||||
label: '任务监听器',
|
||||
name: 'taskListener',
|
||||
column: [
|
||||
{
|
||||
label: '事件',
|
||||
name: 'event',
|
||||
width: 180,
|
||||
rules: [{ required: true, message: '请选择', trigger: ['blur', 'change'] }],
|
||||
xType: 'select',
|
||||
dic: [
|
||||
{ label: 'create', value: 'create' },
|
||||
{ label: 'assignment', value: 'assignment' },
|
||||
{ label: 'complete', value: 'complete' },
|
||||
{ label: 'delete', value: 'delete' }
|
||||
],
|
||||
tooltip: `create（创建）：当任务已经创建，并且所有任务参数都已经设置时触发。<br />
|
||||
assignment（指派）：当任务已经指派给某人时触发。请注意：当流程执行到达用户任务时，在触发create事件之前，会首先触发assignment事件。<br />
|
||||
complete（完成）：当任务已经完成，从运行时数据中删除前触发。<br />
|
||||
delete（删除）：在任务即将被删除前触发。请注意任务由completeTask正常完成时也会触发。
|
||||
`
|
||||
},
|
||||
{
|
||||
label: '类型',
|
||||
name: 'type',
|
||||
width: 180,
|
||||
rules: [{ required: true, message: '请选择', trigger: ['blur', 'change'] }],
|
||||
xType: 'select',
|
||||
dic: [
|
||||
{ label: '类', value: 'class' },
|
||||
{ label: '表达式', value: 'expression' },
|
||||
{ label: '委托表达式', value: 'delegateExpression' }
|
||||
]
|
||||
},
|
||||
{
|
||||
label: 'java 类名',
|
||||
name: 'className',
|
||||
xType: 'input',
|
||||
rules: [{ required: true, message: '请输入', trigger: ['blur', 'change'] }]
|
||||
},
|
||||
{
|
||||
xType: 'slot',
|
||||
label: '参数',
|
||||
width: 120,
|
||||
slot: true,
|
||||
name: 'params'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.formData.taskListener = this.element.businessObject.extensionElements?.values
|
||||
.filter(item => item.$type === 'flowable:TaskListener')
|
||||
.map(item => {
|
||||
let type
|
||||
if ('class' in item) type = 'class'
|
||||
if ('expression' in item) type = 'expression'
|
||||
if ('delegateExpression' in item) type = 'delegateExpression'
|
||||
return {
|
||||
event: item.event,
|
||||
type: type,
|
||||
className: item[type],
|
||||
params: item.fields?.map(field => {
|
||||
let fieldType
|
||||
if ('stringValue' in field) fieldType = 'stringValue'
|
||||
if ('expression' in field) fieldType = 'expression'
|
||||
return {
|
||||
name: field.name,
|
||||
type: fieldType,
|
||||
value: field[fieldType]
|
||||
}
|
||||
}) ?? []
|
||||
}
|
||||
}) ?? []
|
||||
},
|
||||
methods: {
|
||||
configParam(index) {
|
||||
this.nowIndex = index
|
||||
const nowObj = this.formData.taskListener[index]
|
||||
if (!nowObj.params) {
|
||||
nowObj.params = []
|
||||
}
|
||||
this.showParamDialog = true
|
||||
},
|
||||
finishConfigParam(param) {
|
||||
this.showParamDialog = false
|
||||
// hack 数量不更新问题
|
||||
const cache = this.formData.taskListener[this.nowIndex]
|
||||
cache.params = param
|
||||
this.$set(this.formData.taskListener[this.nowIndex], this.nowIndex, cache)
|
||||
this.nowIndex = null
|
||||
},
|
||||
updateElement() {
|
||||
if (this.formData.taskListener?.length) {
|
||||
let extensionElements = this.element.businessObject.get('extensionElements')
|
||||
if (!extensionElements) {
|
||||
extensionElements = this.modeler.get('moddle').create('bpmn:ExtensionElements')
|
||||
}
|
||||
// 清除旧值
|
||||
extensionElements.values = extensionElements.values?.filter(item => item.$type !== 'flowable:TaskListener') ?? []
|
||||
this.formData.taskListener.forEach(item => {
|
||||
const taskListener = this.modeler.get('moddle').create('flowable:TaskListener')
|
||||
taskListener['event'] = item.event
|
||||
taskListener[item.type] = item.className
|
||||
if (item.params && item.params.length) {
|
||||
item.params.forEach(field => {
|
||||
const fieldElement = this.modeler.get('moddle').create('flowable:Field')
|
||||
fieldElement['name'] = field.name
|
||||
fieldElement[field.type] = field.value
|
||||
// 注意：flowable.json 中定义的string和expression类为小写，不然会和原生的String类冲突，此处为hack
|
||||
// const valueElement = this.modeler.get('moddle').create(`flowable:${field.type}`, { body: field.value })
|
||||
// fieldElement[field.type] = valueElement
|
||||
taskListener.get('fields').push(fieldElement)
|
||||
})
|
||||
}
|
||||
extensionElements.get('values').push(taskListener)
|
||||
})
|
||||
this.updateProperties({ extensionElements: extensionElements })
|
||||
} else {
|
||||
const extensionElements = this.element.businessObject[`extensionElements`]
|
||||
if (extensionElements) {
|
||||
extensionElements.values = extensionElements.values?.filter(item => item.$type !== 'flowable:TaskListener') ?? []
|
||||
}
|
||||
}
|
||||
},
|
||||
closeDialog() {
|
||||
this.$refs.xForm.validate().then(() => {
|
||||
this.updateElement()
|
||||
this.dialogVisible = false
|
||||
}).catch(e => console.error(e))
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.flow-containers .el-badge__content.is-fixed {
|
||||
top: 18px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,92 @@
|
||||
<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>
|
||||
</x-form>
|
||||
<executionListenerDialog
|
||||
v-if="dialogName === 'executionListenerDialog'"
|
||||
:element="element"
|
||||
:modeler="modeler"
|
||||
@close="finishExecutionListener"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import mixinPanel from '../../common/mixinPanel'
|
||||
import mixinExecutionListener from '../../common/mixinExecutionListener'
|
||||
import { commonParse, conditionExpressionParse } from '../../common/parseElement'
|
||||
export default {
|
||||
mixins: [mixinPanel, mixinExecutionListener],
|
||||
data() {
|
||||
return {
|
||||
formData: {}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
formConfig() {
|
||||
return {
|
||||
inline: false,
|
||||
item: [
|
||||
{
|
||||
xType: 'input',
|
||||
name: 'id',
|
||||
label: '节点 id',
|
||||
rules: [{ required: true, message: 'Id 不能为空' }]
|
||||
},
|
||||
{
|
||||
xType: 'input',
|
||||
name: 'name',
|
||||
label: '节点名称'
|
||||
},
|
||||
{
|
||||
xType: 'input',
|
||||
name: 'documentation',
|
||||
label: '节点描述'
|
||||
},
|
||||
{
|
||||
xType: 'slot',
|
||||
name: 'executionListener',
|
||||
label: '执行监听器'
|
||||
},
|
||||
{
|
||||
xType: 'input',
|
||||
name: 'conditionExpression',
|
||||
label: '跳转条件'
|
||||
},
|
||||
{
|
||||
xType: 'input',
|
||||
name: 'skipExpression',
|
||||
label: '跳过表达式'
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
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>
|
||||
@@ -0,0 +1,94 @@
|
||||
<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>
|
||||
</x-form>
|
||||
<executionListenerDialog
|
||||
v-if="dialogName === 'executionListenerDialog'"
|
||||
:element="element"
|
||||
:modeler="modeler"
|
||||
@close="finishExecutionListener"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import mixinPanel from '../../common/mixinPanel'
|
||||
import mixinExecutionListener from '../../common/mixinExecutionListener'
|
||||
import { commonParse } from '../../common/parseElement'
|
||||
export default {
|
||||
mixins: [mixinPanel, mixinExecutionListener],
|
||||
data() {
|
||||
return {
|
||||
formData: {}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
formConfig() {
|
||||
const _this = this
|
||||
return {
|
||||
inline: false,
|
||||
item: [
|
||||
{
|
||||
xType: 'input',
|
||||
name: 'id',
|
||||
label: '节点 id',
|
||||
rules: [{ required: true, message: 'Id 不能为空' }]
|
||||
},
|
||||
{
|
||||
xType: 'input',
|
||||
name: 'name',
|
||||
label: '节点名称'
|
||||
},
|
||||
{
|
||||
xType: 'input',
|
||||
name: 'documentation',
|
||||
label: '节点描述'
|
||||
},
|
||||
{
|
||||
xType: 'slot',
|
||||
name: 'executionListener',
|
||||
label: '执行监听器'
|
||||
},
|
||||
{
|
||||
xType: 'input',
|
||||
name: 'initiator',
|
||||
label: '发起人',
|
||||
show: !!_this.showConfig.initiator
|
||||
},
|
||||
{
|
||||
xType: 'input',
|
||||
name: 'formKey',
|
||||
label: '表单标识key',
|
||||
show: !!_this.showConfig.formKey
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
'formData.initiator': function(val) {
|
||||
if (val === '') val = null
|
||||
// 默认设置流程发起人
|
||||
// if (val === '') val = 'INITIATOR'
|
||||
this.updateProperties({ 'flowable:initiator': val })
|
||||
},
|
||||
'formData.formKey': function(val) {
|
||||
if (val === '') val = null
|
||||
this.updateProperties({ 'flowable:formKey': val })
|
||||
}
|
||||
},
|
||||
created() {
|
||||
// this.updateProperties({ 'flowable:initiator': 'INITIATOR' })
|
||||
this.formData = commonParse(this.element)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
</style>
|
||||
426
demo-web-ui/src/views/Process/components/nodePanel/task.vue
Normal file
426
demo-web-ui/src/views/Process/components/nodePanel/task.vue
Normal file
@@ -0,0 +1,426 @@
|
||||
<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 #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"
|
||||
/>
|
||||
<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 { commonParse, userTaskParse } from '../../common/parseElement'
|
||||
export default {
|
||||
components: {
|
||||
executionListenerDialog,
|
||||
taskListenerDialog,
|
||||
multiInstanceDialog
|
||||
},
|
||||
mixins: [mixinPanel],
|
||||
props: {
|
||||
users: {
|
||||
type: Array,
|
||||
required: true
|
||||
},
|
||||
groups: {
|
||||
type: Array,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
userTypeOption: [
|
||||
{ label: '指定人员', value: 'assignee' },
|
||||
{ label: '候选人员', value: 'candidateUsers' },
|
||||
{ label: '候选组', value: 'candidateGroups' }
|
||||
],
|
||||
dataTypeOption: [
|
||||
{ label: '固定', value: 'fixed' },
|
||||
{ label: '动态', value: 'dynamic' }
|
||||
],
|
||||
dialogName: '',
|
||||
executionListenerLength: 0,
|
||||
taskListenerLength: 0,
|
||||
hasMultiInstance: false,
|
||||
formData: {}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
formConfig() {
|
||||
const _this = this
|
||||
return {
|
||||
inline: false,
|
||||
item: [
|
||||
{
|
||||
xType: 'input',
|
||||
name: 'id',
|
||||
label: '节点 id',
|
||||
rules: [{ required: true, message: 'Id 不能为空' }]
|
||||
},
|
||||
{
|
||||
xType: 'input',
|
||||
name: 'name',
|
||||
label: '节点名称',
|
||||
rules: [{ required: true, message: '节点名称不能为空' }]
|
||||
},
|
||||
{
|
||||
xType: 'input',
|
||||
name: 'documentation',
|
||||
label: '节点描述'
|
||||
},
|
||||
{
|
||||
xType: 'slot',
|
||||
name: 'executionListener',
|
||||
label: '执行监听器'
|
||||
},
|
||||
{
|
||||
xType: 'slot',
|
||||
name: 'taskListener',
|
||||
label: '任务监听器',
|
||||
show: !!_this.showConfig.taskListener
|
||||
},
|
||||
{
|
||||
xType: 'select',
|
||||
name: 'userType',
|
||||
label: '人员类型',
|
||||
dic: _this.userTypeOption,
|
||||
show: !!_this.showConfig.userType
|
||||
},
|
||||
{
|
||||
xType: 'radio',
|
||||
name: 'dataType',
|
||||
label: '指定方式',
|
||||
dic: _this.dataTypeOption,
|
||||
show: !!_this.showConfig.dataType,
|
||||
rules: [{ required: true, message: '请指定方式' }]
|
||||
},
|
||||
// {
|
||||
// xType: 'input',
|
||||
// name: 'assigneeFixed',
|
||||
// label: '指定人(表达式)',
|
||||
// show: !!_this.showConfig.assigneeFixed && _this.formData.userType === 'assignee' && _this.formData.dataType === 'fixed'
|
||||
// },
|
||||
// {
|
||||
// xType: 'input',
|
||||
// name: 'candidateUsersFixed',
|
||||
// label: '候选人(表达式)',
|
||||
// show: !!_this.showConfig.candidateUsersFixed && _this.formData.userType === 'candidateUsers' && _this.formData.dataType === 'fixed'
|
||||
// },
|
||||
// {
|
||||
// xType: 'input',
|
||||
// name: 'candidateGroupsFixed',
|
||||
// label: '候选组(表达式)',
|
||||
// show: !!_this.showConfig.candidateGroupsFixed && _this.formData.userType === 'candidateGroups' && _this.formData.dataType === 'fixed'
|
||||
// },
|
||||
{
|
||||
xType: 'select',
|
||||
name: 'assignee',
|
||||
label: '指定人员',
|
||||
allowCreate: true,
|
||||
filterable: true,
|
||||
dic: { data: _this.users, label: 'nickName', value: 'userId' },
|
||||
show: !!_this.showConfig.assignee && _this.formData.userType === 'assignee'
|
||||
},
|
||||
{
|
||||
xType: 'select',
|
||||
name: 'candidateUsers',
|
||||
label: '候选人员',
|
||||
multiple: true,
|
||||
allowCreate: true,
|
||||
filterable: true,
|
||||
dic: { data: _this.users, label: 'nickName', value: 'userId' },
|
||||
show: !!_this.showConfig.candidateUsers && _this.formData.userType === 'candidateUsers'
|
||||
},
|
||||
{
|
||||
xType: 'select',
|
||||
name: 'candidateGroups',
|
||||
label: '候选组',
|
||||
multiple: true,
|
||||
allowCreate: true,
|
||||
filterable: true,
|
||||
dic: { data: _this.groups, label: 'roleName', value: 'roleId' },
|
||||
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.dataType': function(val) {
|
||||
const that = this
|
||||
this.updateProperties({'flowable:dataType': val})
|
||||
if (val === 'dynamic') {
|
||||
this.updateProperties({'flowable:userType': that.formData.userType})
|
||||
}
|
||||
// 切换时 删除之前选中的值
|
||||
const types = ['assignee', 'candidateUsers', 'candidateGroups']
|
||||
types.forEach(type => {
|
||||
delete this.element.businessObject.$attrs[`flowable:${type}`]
|
||||
delete this.formData[type]
|
||||
})
|
||||
// 传值到父组件
|
||||
const params = {
|
||||
dataType: val,
|
||||
userType: this.formData.userType
|
||||
}
|
||||
this.$emit('dataType', params)
|
||||
},
|
||||
'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 })
|
||||
}
|
||||
},
|
||||
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 = ''
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style></style>
|
||||
Reference in New Issue
Block a user