update 支持多实例
This commit is contained in:
parent
c9c33b9745
commit
0db70e5dd3
@ -19,7 +19,7 @@
|
|||||||
<el-input v-model="formData.name" @change="nameChange"> </el-input>
|
<el-input v-model="formData.name" @change="nameChange"> </el-input>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item v-if="showConfig.skipExpression" prop="skipExpression" label="跳过表达式">
|
<el-form-item v-if="showConfig.skipExpression" prop="skipExpression" label="跳过表达式">
|
||||||
<el-input v-model="formData.skipExpression"> </el-input>
|
<el-input v-model="formData.skipExpression" @change="skipExpressionChange"> </el-input>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
</div>
|
</div>
|
||||||
</el-collapse-item>
|
</el-collapse-item>
|
||||||
@ -91,21 +91,84 @@
|
|||||||
</el-tab-pane>
|
</el-tab-pane>
|
||||||
</el-tabs>
|
</el-tabs>
|
||||||
|
|
||||||
<el-form-item v-if="showConfig.multipleUserAuditType" prop="multipleUserAuditType" label="多人审批方式">
|
|
||||||
<el-radio-group v-model="formData.multipleUserAuditType" class="ml-4 block-radio">
|
|
||||||
<el-radio v-for="item in MultipleUserAuditType" :key="item.id" :label="item.value" size="large">{{ item.label }}</el-radio>
|
|
||||||
</el-radio-group>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item v-if="showConfig.dueDate" prop="dueDate" label="到期时间">
|
<el-form-item v-if="showConfig.dueDate" prop="dueDate" label="到期时间">
|
||||||
<el-input v-model="formData.dueDate" @click="openDueDate"></el-input>
|
<el-input v-model="formData.dueDate" @click="openDueDate"></el-input>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item v-if="showConfig.priority" prop="priority" label="优先级">
|
<el-form-item v-if="showConfig.priority" prop="priority" label="优先级">
|
||||||
<el-input-number v-model="formData.priority" :min="0"> </el-input-number>
|
<el-input-number v-model="formData.priority" :min="0" @change="priorityChange"> </el-input-number>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
</div>
|
</div>
|
||||||
</el-collapse-item>
|
</el-collapse-item>
|
||||||
|
<el-collapse-item name="3">
|
||||||
|
<template #title>
|
||||||
|
<div class="collapse__title">
|
||||||
|
<el-icon>
|
||||||
|
<HelpFilled />
|
||||||
|
</el-icon>
|
||||||
|
多实例
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<div>
|
||||||
|
<el-form-item label="多实例类型">
|
||||||
|
<el-select v-model="formData.multiInstanceType" @change="multiInstanceTypeChange">
|
||||||
|
<el-option v-for="item in MultiInstanceType" :key="item.id" :value="item.value" :label="item.label"> </el-option>
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
|
||||||
<el-collapse-item v-if="showConfig.taskListener" name="3">
|
<div v-if="formData.multiInstanceType !== MultiInstanceTypeEnum.NONE">
|
||||||
|
<el-form-item label="集合">
|
||||||
|
<template #label>
|
||||||
|
<span>
|
||||||
|
集合
|
||||||
|
<el-tooltip placement="top">
|
||||||
|
<el-icon><QuestionFilled /></el-icon>
|
||||||
|
<template #content>
|
||||||
|
属性会作为表达式进行解析。如果表达式解析为字符串而不是一个集合,<br />
|
||||||
|
不论是因为本身配置的就是静态字符串值,还是表达式计算结果为字符串,<br />
|
||||||
|
这个字符串都会被当做变量名,并从流程变量中用于获取实际的集合。
|
||||||
|
</template>
|
||||||
|
</el-tooltip>
|
||||||
|
</span>
|
||||||
|
</template>
|
||||||
|
<el-input v-model="formData.collection" @change="collectionChange"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="元素变量">
|
||||||
|
<template #label>
|
||||||
|
<span>
|
||||||
|
元素变量
|
||||||
|
<el-tooltip placement="top">
|
||||||
|
<el-icon><QuestionFilled /></el-icon>
|
||||||
|
<template #content>
|
||||||
|
每创建一个用户任务前,先以该元素变量为label,集合中的一项为value,<br />
|
||||||
|
创建(局部)流程变量,该局部流程变量被用于指派用户任务。<br />
|
||||||
|
一般来说,该字符串应与指定人员变量相同。
|
||||||
|
</template>
|
||||||
|
</el-tooltip>
|
||||||
|
</span>
|
||||||
|
</template>
|
||||||
|
<el-input v-model="formData.elementVariable" @change="elementVariableChange"> </el-input>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="完成条件">
|
||||||
|
<template #label>
|
||||||
|
<span>
|
||||||
|
完成条件
|
||||||
|
<el-tooltip placement="top">
|
||||||
|
<el-icon><QuestionFilled /></el-icon>
|
||||||
|
<template #content>
|
||||||
|
多实例活动在所有实例都完成时结束,然而也可以指定一个表达式,在每个实例<br />
|
||||||
|
结束时进行计算。当表达式计算为true时,将销毁所有剩余的实例,并结束多实例<br />
|
||||||
|
活动,继续执行流程。例如 ${nrOfCompletedInstances/nrOfInstances >= 0.6 },<br />
|
||||||
|
表示当任务完成60%时,该节点就算完成
|
||||||
|
</template>
|
||||||
|
</el-tooltip>
|
||||||
|
</span>
|
||||||
|
</template>
|
||||||
|
<el-input v-model="formData.completionCondition" @change="completionConditionChange"> </el-input>
|
||||||
|
</el-form-item>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</el-collapse-item>
|
||||||
|
<el-collapse-item v-if="showConfig.taskListener" name="4">
|
||||||
<template #title>
|
<template #title>
|
||||||
<div class="collapse__title">
|
<div class="collapse__title">
|
||||||
<el-icon>
|
<el-icon>
|
||||||
@ -118,7 +181,7 @@
|
|||||||
<TaskListener v-if="showConfig.taskListener" :element="element"></TaskListener>
|
<TaskListener v-if="showConfig.taskListener" :element="element"></TaskListener>
|
||||||
</div>
|
</div>
|
||||||
</el-collapse-item>
|
</el-collapse-item>
|
||||||
<el-collapse-item v-if="showConfig.executionListener" name="4">
|
<el-collapse-item v-if="showConfig.executionListener" name="5">
|
||||||
<template #title>
|
<template #title>
|
||||||
<div class="collapse__title">
|
<div class="collapse__title">
|
||||||
<el-icon>
|
<el-icon>
|
||||||
@ -131,6 +194,7 @@
|
|||||||
<ExecutionListener v-if="showConfig.executionListener" :element="element"></ExecutionListener>
|
<ExecutionListener v-if="showConfig.executionListener" :element="element"></ExecutionListener>
|
||||||
</div>
|
</div>
|
||||||
</el-collapse-item>
|
</el-collapse-item>
|
||||||
|
|
||||||
<el-form-item v-if="showConfig.isForCompensation" prop="isForCompensation" label="是否为补偿">
|
<el-form-item v-if="showConfig.isForCompensation" prop="isForCompensation" label="是否为补偿">
|
||||||
<el-switch v-model="formData.isForCompensation" inline-prompt active-text="是" inactive-text="否" />
|
<el-switch v-model="formData.isForCompensation" inline-prompt active-text="是" inactive-text="否" />
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
@ -165,8 +229,7 @@ import RoleSelect from '@/components/RoleSelect';
|
|||||||
import DueDate from '@/components/BpmnDesign/panel/property/DueDate.vue';
|
import DueDate from '@/components/BpmnDesign/panel/property/DueDate.vue';
|
||||||
import { Element } from 'bpmn';
|
import { Element } from 'bpmn';
|
||||||
import { TaskPanel } from 'bpmnDesign';
|
import { TaskPanel } from 'bpmnDesign';
|
||||||
import { AllocationTypeEnum, MultipleUserAuditTypeEnum, SpecifyDescEnum } from '@/enums/bpmn/IndexEnums';
|
import { AllocationTypeEnum, MultiInstanceTypeEnum, SpecifyDescEnum } from '@/enums/bpmn/IndexEnums';
|
||||||
import { BellFilled, Checked, InfoFilled } from '@element-plus/icons-vue';
|
|
||||||
import { UserVO } from '@/api/system/user/types';
|
import { UserVO } from '@/api/system/user/types';
|
||||||
import { RoleVO } from '@/api/system/role/types';
|
import { RoleVO } from '@/api/system/role/types';
|
||||||
|
|
||||||
@ -187,7 +250,7 @@ const initFormData = {
|
|||||||
id: '',
|
id: '',
|
||||||
name: '',
|
name: '',
|
||||||
dueDate: '',
|
dueDate: '',
|
||||||
multipleUserAuditType: MultipleUserAuditTypeEnum.SERIAL,
|
multiInstanceType: MultiInstanceTypeEnum.NONE,
|
||||||
allocationType: AllocationTypeEnum.USER,
|
allocationType: AllocationTypeEnum.USER,
|
||||||
specifyDesc: SpecifyDescEnum.SPECIFY_SINGLE
|
specifyDesc: SpecifyDescEnum.SPECIFY_SINGLE
|
||||||
};
|
};
|
||||||
@ -279,6 +342,59 @@ const taskTabClick = (e) => {
|
|||||||
const syncChange = (newVal) => {
|
const syncChange = (newVal) => {
|
||||||
updateProperties({ 'flowable:async': newVal });
|
updateProperties({ 'flowable:async': newVal });
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const skipExpressionChange = (newVal) => {
|
||||||
|
updateProperties({ 'flowable:skipExpression': newVal && newVal.length > 0 ? newVal : undefined });
|
||||||
|
};
|
||||||
|
const priorityChange = (newVal) => {
|
||||||
|
updateProperties({ 'flowable:priority': newVal });
|
||||||
|
};
|
||||||
|
const multiInstanceTypeChange = (newVal) => {
|
||||||
|
if (newVal !== MultiInstanceTypeEnum.NONE) {
|
||||||
|
let loopCharacteristics = props.element.businessObject.get('loopCharacteristics');
|
||||||
|
if (!loopCharacteristics) {
|
||||||
|
loopCharacteristics = createModdleElement('bpmn:MultiInstanceLoopCharacteristics', {}, props.element.businessObject);
|
||||||
|
}
|
||||||
|
loopCharacteristics.isSequential = newVal === MultiInstanceTypeEnum.SERIAL;
|
||||||
|
updateProperties({ loopCharacteristics: loopCharacteristics });
|
||||||
|
} else {
|
||||||
|
updateProperties({ loopCharacteristics: undefined });
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const collectionChange = (newVal) => {
|
||||||
|
let loopCharacteristics = props.element.businessObject.get('loopCharacteristics');
|
||||||
|
if (!loopCharacteristics) {
|
||||||
|
loopCharacteristics = createModdleElement('bpmn:MultiInstanceLoopCharacteristics', {}, props.element.businessObject);
|
||||||
|
}
|
||||||
|
loopCharacteristics.collection = newVal && newVal.length > 0 ? newVal : undefined;
|
||||||
|
updateProperties({ loopCharacteristics: loopCharacteristics });
|
||||||
|
};
|
||||||
|
const elementVariableChange = (newVal) => {
|
||||||
|
let loopCharacteristics = props.element.businessObject.get('loopCharacteristics');
|
||||||
|
if (!loopCharacteristics) {
|
||||||
|
loopCharacteristics = createModdleElement('bpmn:MultiInstanceLoopCharacteristics', {}, props.element.businessObject);
|
||||||
|
}
|
||||||
|
loopCharacteristics.elementVariable = newVal && newVal.length > 0 ? newVal : undefined;
|
||||||
|
updateProperties({ loopCharacteristics: loopCharacteristics });
|
||||||
|
};
|
||||||
|
const completionConditionChange = (newVal) => {
|
||||||
|
let loopCharacteristics = props.element.businessObject.get('loopCharacteristics');
|
||||||
|
if (!loopCharacteristics) {
|
||||||
|
loopCharacteristics = createModdleElement('bpmn:MultiInstanceLoopCharacteristics', {}, props.element.businessObject);
|
||||||
|
}
|
||||||
|
if (newVal && newVal.length > 0) {
|
||||||
|
if (!loopCharacteristics.completionCondition) {
|
||||||
|
loopCharacteristics.completionCondition = createModdleElement('bpmn:Expression', { body: newVal }, loopCharacteristics);
|
||||||
|
} else {
|
||||||
|
loopCharacteristics.completionCondition.body = newVal;
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
loopCharacteristics.completionCondition = undefined;
|
||||||
|
}
|
||||||
|
updateProperties({ loopCharacteristics: loopCharacteristics });
|
||||||
|
};
|
||||||
|
|
||||||
const selectUserLength = computed(() => {
|
const selectUserLength = computed(() => {
|
||||||
if (formData.value.candidateUsers) {
|
if (formData.value.candidateUsers) {
|
||||||
return formData.value.candidateUsers.split(',').length;
|
return formData.value.candidateUsers.split(',').length;
|
||||||
@ -293,36 +409,6 @@ const selectRoleLength = computed(() => {
|
|||||||
return 0;
|
return 0;
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
watch(
|
|
||||||
() => formData.value.async,
|
|
||||||
(newVal: boolean) => {
|
|
||||||
if (newVal) {
|
|
||||||
updateProperties({ 'flowable:async': true });
|
|
||||||
} else {
|
|
||||||
updateProperties({ 'flowable:async': undefined });
|
|
||||||
}
|
|
||||||
}
|
|
||||||
);
|
|
||||||
watch(
|
|
||||||
() => formData.value.skipExpression,
|
|
||||||
(newVal: string) => {
|
|
||||||
if (newVal) {
|
|
||||||
updateProperties({ 'flowable:skipExpression': newVal });
|
|
||||||
} else {
|
|
||||||
updateProperties({ 'flowable:skipExpression': undefined });
|
|
||||||
}
|
|
||||||
}
|
|
||||||
);
|
|
||||||
watch(
|
|
||||||
() => formData.value.priority,
|
|
||||||
(newVal: number) => {
|
|
||||||
if (newVal) {
|
|
||||||
updateProperties({ 'flowable:priority': newVal });
|
|
||||||
} else {
|
|
||||||
updateProperties({ 'flowable:priority': undefined });
|
|
||||||
}
|
|
||||||
}
|
|
||||||
);
|
|
||||||
watch(
|
watch(
|
||||||
() => formData.value.dueDate,
|
() => formData.value.dueDate,
|
||||||
(newVal: string) => {
|
(newVal: string) => {
|
||||||
@ -333,9 +419,7 @@ watch(
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
);
|
);
|
||||||
|
|
||||||
onBeforeMount(() => {
|
onBeforeMount(() => {
|
||||||
// formData.value = { ...initData, ...parseData<TaskPanel>() };
|
|
||||||
const extensionElements = getExtensionElements(false);
|
const extensionElements = getExtensionElements(false);
|
||||||
if (extensionElements && extensionElements.get('values')) {
|
if (extensionElements && extensionElements.get('values')) {
|
||||||
let extAssigneeElement = extensionElements.get('values').find((item) => item.$type === 'flowable:extAssignee');
|
let extAssigneeElement = extensionElements.get('values').find((item) => item.$type === 'flowable:extAssignee');
|
||||||
@ -343,6 +427,14 @@ onBeforeMount(() => {
|
|||||||
assignee.value = JSON.parse(extAssigneeElement.body);
|
assignee.value = JSON.parse(extAssigneeElement.body);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
if (formData.value.loopCharacteristics) {
|
||||||
|
const loopCharacteristics = formData.value.loopCharacteristics;
|
||||||
|
formData.value.collection = loopCharacteristics.collection || '';
|
||||||
|
formData.value.elementVariable = loopCharacteristics.elementVariable || '';
|
||||||
|
formData.value.completionCondition = loopCharacteristics.completionCondition?.body || '';
|
||||||
|
formData.value.multiInstanceType = loopCharacteristics.isSequential ? MultiInstanceTypeEnum.SERIAL : MultiInstanceTypeEnum.PARALLEL;
|
||||||
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
const formRules = ref<ElFormRules>({
|
const formRules = ref<ElFormRules>({
|
||||||
@ -361,17 +453,11 @@ const SpecifyDesc = [
|
|||||||
{ id: '7365ff54-2e05-4312-9bfb-0b8edd779c5b', label: '指定多个人', value: 'specifyMultiple' }
|
{ id: '7365ff54-2e05-4312-9bfb-0b8edd779c5b', label: '指定多个人', value: 'specifyMultiple' }
|
||||||
];
|
];
|
||||||
|
|
||||||
const MultipleUserAuditType = [
|
const MultiInstanceType = [
|
||||||
{ id: 'b5acea7c-b7e5-46b0-8778-390db091bdab', label: '串行(每人依次审批)', value: 'serial' },
|
{ id: '373d4b81-a0d1-4eb8-8685-0d2fb1b468e2', label: '无', value: MultiInstanceTypeEnum.NONE },
|
||||||
{ id: 'b4f0c683-1ccc-43c4-8380-e1b998986caf', label: '并行(所有人审批通过)', value: 'parallel' },
|
{ id: 'b5acea7c-b7e5-46b0-8778-390db091bdab', label: '串行', value: MultiInstanceTypeEnum.SERIAL },
|
||||||
{ id: '373d4b81-a0d1-4eb8-8685-0d2fb1b468e2', label: '或签(任意一人审批通过)', value: 'orSign' }
|
{ id: 'b4f0c683-1ccc-43c4-8380-e1b998986caf', label: '并行', value: MultiInstanceTypeEnum.PARALLEL }
|
||||||
];
|
];
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped></style>
|
||||||
.block-radio {
|
|
||||||
display: flex;
|
|
||||||
flex-flow: column nowrap;
|
|
||||||
align-items: flex-start;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
@ -10,8 +10,8 @@ export enum SpecifyDescEnum {
|
|||||||
SPECIFY_SINGLE = 'specifySingle'
|
SPECIFY_SINGLE = 'specifySingle'
|
||||||
}
|
}
|
||||||
|
|
||||||
export enum MultipleUserAuditTypeEnum {
|
export enum MultiInstanceTypeEnum {
|
||||||
SERIAL = 'serial',
|
SERIAL = 'serial',
|
||||||
PARALLEL = 'parallel',
|
PARALLEL = 'parallel',
|
||||||
OR_SIGN = 'orSign'
|
NONE = 'none'
|
||||||
}
|
}
|
||||||
|
17
src/types/bpmn/panel.d.ts
vendored
17
src/types/bpmn/panel.d.ts
vendored
@ -1,5 +1,5 @@
|
|||||||
declare module 'bpmnDesign' {
|
declare module 'bpmnDesign' {
|
||||||
import { AllocationTypeEnum, SpecifyDescEnum, MultipleUserAuditTypeEnum } from '@/enums/bpmn/IndexEnums';
|
import { AllocationTypeEnum, SpecifyDescEnum, MultiInstanceTypeEnum } from '@/enums/bpmn/IndexEnums';
|
||||||
|
|
||||||
export interface ParamVO {
|
export interface ParamVO {
|
||||||
type: string;
|
type: string;
|
||||||
@ -31,7 +31,7 @@ declare module 'bpmnDesign' {
|
|||||||
export interface TaskPanel extends BasePanel {
|
export interface TaskPanel extends BasePanel {
|
||||||
allocationType: AllocationTypeEnum;
|
allocationType: AllocationTypeEnum;
|
||||||
specifyDesc: SpecifyDescEnum;
|
specifyDesc: SpecifyDescEnum;
|
||||||
multipleUserAuditType: MultipleUserAuditTypeEnum;
|
multiInstanceType: MultiInstanceTypeEnum;
|
||||||
async?: boolean;
|
async?: boolean;
|
||||||
priority?: number;
|
priority?: number;
|
||||||
skipExpression?: string;
|
skipExpression?: string;
|
||||||
@ -47,6 +47,19 @@ declare module 'bpmnDesign' {
|
|||||||
candidateUsers?: string;
|
candidateUsers?: string;
|
||||||
assignee?: string;
|
assignee?: string;
|
||||||
candidateGroups?: string;
|
candidateGroups?: string;
|
||||||
|
collection?: string;
|
||||||
|
elementVariable?: string;
|
||||||
|
completionCondition?: string;
|
||||||
|
isSequential?: boolean;
|
||||||
|
|
||||||
|
loopCharacteristics?: {
|
||||||
|
collection: string;
|
||||||
|
elementVariable: string;
|
||||||
|
isSequential: boolean;
|
||||||
|
completionCondition: {
|
||||||
|
body: string;
|
||||||
|
};
|
||||||
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
export interface StartEndPanel extends BasePanel {}
|
export interface StartEndPanel extends BasePanel {}
|
||||||
|
Loading…
x
Reference in New Issue
Block a user