taoge_xiaodi/maintenance_system
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update 优化bpmn位置

Browse Source
This commit is contained in:
LiuHao
2024-04-15 12:02:40 +08:00
parent 73db6deec3
commit 945eec5418
28 changed files with 593 additions and 572 deletions
Download Patch File Download Diff File Expand all files Collapse all files

68
src/bpmn/panel/GatewayPanel.vue Normal file
View File

@ -0,0 +1,68 @@
<template>
<div>
<el-collapse v-model="currentCollapseItem">
<el-collapse-item name="1">
<template #title>
<div class="collapse__title">
<el-icon>
<InfoFilled />
</el-icon>
常规
</div>
</template>
<div>
<el-form ref="formRef" :model="formData" :rules="formRules" label-width="80px">
<el-form-item prop="id" label="节点 ID">
<el-input v-model="formData.id" @change="idChange"> </el-input>
</el-form-item>
<el-form-item prop="name" label="节点名称">
<el-input v-model="formData.name" @change="nameChange"> </el-input>
</el-form-item>
</el-form>
</div>
</el-collapse-item>
<el-collapse-item name="2">
<template #title>
<div class="collapse__title">
<el-icon>
<BellFilled />
</el-icon>
执行监听器
</div>
</template>
<div>
<ExecutionListener :element="element"></ExecutionListener>
</div>
</el-collapse-item>
</el-collapse>
</div>
</template>
<script setup lang="ts">
import useParseElement from '../hooks/useParseElement';
import usePanel from '../hooks/usePanel';
import { Modeler, ModdleElement } from 'bpmn';
import { GatewayPanel } from 'bpmnDesign';
import ExecutionListener from './property/ExecutionListener.vue';
interface PropType {
element: ModdleElement;
}
const props = withDefaults(defineProps<PropType>(), {});
const { nameChange, idChange } = usePanel({
element: toRaw(props.element)
});
const { parseData } = useParseElement({
element: toRaw(props.element)
});
const currentCollapseItem = ref(['1', '2']);
const formData = ref(parseData<GatewayPanel>());
const formRules = ref<ElFormRules>({
processCategory: [{ required: true, message: '请选择', trigger: 'blur' }],
id: [{ required: true, message: '请输入', trigger: 'blur' }],
name: [{ required: true, message: '请输入', trigger: 'blur' }]
});
</script>
<style lang="scss" scoped></style>

68
src/bpmn/panel/ParticipantPanel.vue Normal file
View File

@ -0,0 +1,68 @@
<template>
<div>
<el-collapse v-model="currentCollapseItem">
<el-collapse-item name="1">
<template #title>
<div class="collapse__title">
<el-icon>
<InfoFilled />
</el-icon>
常规
</div>
</template>
<div>
<el-form ref="formRef" :model="formData" :rules="formRules" label-width="90px">
<el-form-item prop="id" label="节点 ID">
<el-input v-model="formData.id" @change="idChange"></el-input>
</el-form-item>
<el-form-item prop="name" label="节点名称">
<el-input v-model="formData.name" @change="nameChange"></el-input>
</el-form-item>
</el-form>
</div>
</el-collapse-item>
<el-collapse-item name="2">
<template #title>
<div class="collapse__title">
<el-icon>
<BellFilled />
</el-icon>
执行监听器
</div>
</template>
<div>
<ExecutionListener :element="element"></ExecutionListener>
</div>
</el-collapse-item>
</el-collapse>
</div>
</template>
<script setup lang="ts">
import useParseElement from '../hooks/useParseElement';
import usePanel from '../hooks/usePanel';
import ExecutionListener from './property/ExecutionListener.vue';
import { ModdleElement } from 'bpmn';
import { ParticipantPanel } from 'bpmnDesign';
interface PropType {
element: ModdleElement;
}
const props = withDefaults(defineProps<PropType>(), {});
const { nameChange, idChange } = usePanel({
element: toRaw(props.element)
});
const { parseData } = useParseElement({
element: toRaw(props.element)
});
const formData = ref(parseData<ParticipantPanel>());
const currentCollapseItem = ref(['1', '2']);
const formRules = ref<ElFormRules>({
id: [{ required: true, message: '请输入', trigger: 'blur' }],
name: [{ required: true, message: '请输入', trigger: 'blur' }]
});
</script>
<style lang="scss" scoped></style>

71
src/bpmn/panel/ProcessPanel.vue Normal file
View File

@ -0,0 +1,71 @@
<template>
<div>
<el-collapse v-model="currentCollapseItem">
<el-collapse-item name="1">
<template #title>
<div class="collapse__title">
<el-icon>
<InfoFilled />
</el-icon>
常规
</div>
</template>
<div>
<el-form ref="formRef" :model="formData" :rules="formRules" label-width="80px">
<el-form-item label="流程标识" prop="id">
<el-input v-model="formData.id" @change="idChange"></el-input>
</el-form-item>
<el-form-item label="流程名称" prop="name">
<el-input v-model="formData.name" @change="nameChange"></el-input>
</el-form-item>
</el-form>
</div>
</el-collapse-item>
<el-collapse-item name="2">
<template #title>
<div class="collapse__title">
<el-icon>
<BellFilled />
</el-icon>
执行监听器
</div>
</template>
<div>
<ExecutionListener :element="element"></ExecutionListener>
</div>
</el-collapse-item>
</el-collapse>
</div>
</template>
<script setup lang="ts">
import ExecutionListener from './property/ExecutionListener.vue';
import useParseElement from '../hooks/useParseElement';
import usePanel from '../hooks/usePanel';
import { Modeler, ModdleElement } from 'bpmn';
import { ProcessPanel } from 'bpmnDesign';
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
interface PropType {
element: ModdleElement;
}
const props = withDefaults(defineProps<PropType>(), {});
const { parseData } = useParseElement({
element: toRaw(props.element)
});
const { idChange, nameChange } = usePanel({
element: toRaw(props.element)
});
const currentCollapseItem = ref(['1', '2']);
const formData = ref<ProcessPanel>(parseData<ProcessPanel>());
const formRules = ref<ElFormRules>({
id: [{ required: true, message: '请输入', trigger: 'blur' }],
name: [{ required: true, message: '请输入', trigger: 'blur' }]
});
</script>
<style scoped lang="scss"></style>

95
src/bpmn/panel/SequenceFlowPanel.vue Normal file
View File

@ -0,0 +1,95 @@
<template>
<div>
<el-collapse v-model="currentCollapseItem">
<el-collapse-item name="1">
<template #title>
<div class="collapse__title">
<el-icon>
<InfoFilled />
</el-icon>
常规
</div>
</template>
<div>
<el-form ref="formRef" :model="formData" :rules="formRules" label-width="90px">
<el-form-item prop="id" label="节点 ID">
<el-input v-model="formData.id" @change="idChange"> </el-input>
</el-form-item>
<el-form-item prop="name" label="节点名称">
<el-input v-model="formData.name" @change="nameChange"> </el-input>
</el-form-item>
<el-form-item prop="conditionExpression" label="跳转条件">
<el-input v-model="formData.conditionExpressionValue" @change="conditionExpressionChange"> </el-input>
</el-form-item>
<el-form-item prop="skipExpression" label="跳过表达式">
<el-input v-model="formData.skipExpression" @change="skipExpressionChange"> </el-input>
</el-form-item>
</el-form>
</div>
</el-collapse-item>
<el-collapse-item name="2">
<template #title>
<div class="collapse__title">
<el-icon>
<BellFilled />
</el-icon>
执行监听器
</div>
</template>
<div>
<ExecutionListener :element="element"></ExecutionListener>
</div>
</el-collapse-item>
</el-collapse>
</div>
</template>
<script setup lang="ts">
import useParseElement from '../hooks/useParseElement';
import useModelerStore from '@/store/modules/modeler';
import usePanel from '../hooks/usePanel';
import ExecutionListener from './property/ExecutionListener.vue';
import { Modeler, ModdleElement } from 'bpmn';
import { SequenceFlowPanel } from 'bpmnDesign';
interface PropType {
element: ModdleElement;
}
const props = withDefaults(defineProps<PropType>(), {});
const { nameChange, idChange, updateProperties } = usePanel({
element: toRaw(props.element)
});
const { parseData } = useParseElement({
element: toRaw(props.element)
});
const moddle = useModelerStore().getModdle();
const currentCollapseItem = ref(['1', '2']);
const formData = ref(parseData<SequenceFlowPanel>());
const formRules = ref<ElFormRules>({
processCategory: [{ required: true, message: '请选择', trigger: 'blur' }],
id: [{ required: true, message: '请输入', trigger: 'blur' }],
name: [{ required: true, message: '请输入', trigger: 'blur' }]
});
const conditionExpressionChange = (val: string) => {
if (val) {
const newCondition = moddle.create('bpmn:FormalExpression', { body: val });
updateProperties({ conditionExpression: newCondition });
} else {
updateProperties({ conditionExpression: null });
}
};
const skipExpressionChange = (val: string) => {
updateProperties({ 'flowable:skipExpression': val });
};
onBeforeMount(() => {
if (formData.value.conditionExpression) {
formData.value.conditionExpressionValue = formData.value.conditionExpression.body;
}
});
</script>
<style lang="scss" scoped></style>

67
src/bpmn/panel/StartEndPanel.vue Normal file
View File

@ -0,0 +1,67 @@
<template>
<div>
<el-collapse v-model="currentCollapseItem">
<el-collapse-item name="1">
<template #title>
<div class="collapse__title">
<el-icon>
<InfoFilled />
</el-icon>
常规
</div>
</template>
<div>
<el-form ref="formRef" :model="formData" :rules="formRules" label-width="90px">
<el-form-item prop="id" label="节点 ID">
<el-input v-model="formData.id" @change="idChange"> </el-input>
</el-form-item>
<el-form-item prop="name" label="节点名称">
<el-input v-model="formData.name" @change="nameChange"> </el-input>
</el-form-item>
</el-form>
</div>
</el-collapse-item>
<el-collapse-item name="2">
<template #title>
<div class="collapse__title">
<el-icon>
<BellFilled />
</el-icon>
执行监听器
</div>
</template>
<div>
<ExecutionListener :element="element"></ExecutionListener>
</div>
</el-collapse-item>
</el-collapse>
</div>
</template>
<script setup lang="ts">
import ExecutionListener from './property/ExecutionListener.vue';
import useParseElement from '../hooks/useParseElement';
import usePanel from '../hooks/usePanel';
import { Modeler, ModdleElement } from 'bpmn';
import { StartEndPanel } from 'bpmnDesign';
interface PropType {
element: ModdleElement;
}
const props = withDefaults(defineProps<PropType>(), {});
const { nameChange, idChange } = usePanel({
element: toRaw(props.element)
});
const { parseData } = useParseElement({
element: toRaw(props.element)
});
const formData = ref(parseData<StartEndPanel>());
const currentCollapseItem = ref(['1', '2']);
const formRules = ref<ElFormRules>({
id: [{ required: true, message: '请输入', trigger: 'blur' }],
name: [{ required: true, message: '请输入', trigger: 'blur' }]
});
</script>
<style lang="scss" scoped></style>

193
src/bpmn/panel/SubProcessPanel.vue Normal file
View File

@ -0,0 +1,193 @@
<template>
<div>
<el-form ref="formRef" :model="formData" :rules="formRules" label-width="90px">
<el-collapse v-model="currentCollapseItem">
<el-collapse-item name="1">
<template #title>
<div class="collapse__title">
<el-icon>
<InfoFilled />
</el-icon>
常规
</div>
</template>
<div>
<el-form-item prop="id" label="节点 ID">
<el-input v-model="formData.id" @change="idChange"> </el-input>
</el-form-item>
<el-form-item prop="name" label="节点名称">
<el-input v-model="formData.name" @change="nameChange"> </el-input>
</el-form-item>
</div>
</el-collapse-item>
<el-collapse-item name="2">
<template #title>
<div class="collapse__title">
<el-icon>
<BellFilled />
</el-icon>
执行监听器
</div>
</template>
<div>
<ExecutionListener :element="element"></ExecutionListener>
</div>
</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 constant.MultiInstanceType" :key="item.id" :value="item.value" :label="item.label"> </el-option>
</el-select>
</el-form-item>
<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>
</el-form>
</div>
</template>
<script setup lang="ts">
import ExecutionListener from './property/ExecutionListener.vue';
import useParseElement from '../hooks/useParseElement';
import usePanel from '../hooks/usePanel';
import { ModdleElement } from 'bpmn';
import { SubProcessPanel } from 'bpmnDesign';
import { MultiInstanceTypeEnum } from '@/enums/bpmn/IndexEnums';
interface PropType {
element: ModdleElement;
}
const props = withDefaults(defineProps<PropType>(), {});
const { nameChange, idChange, updateProperties, createModdleElement, constant } = usePanel({
element: toRaw(props.element)
});
const { parseData } = useParseElement({
element: toRaw(props.element)
});
const formData = ref(parseData<SubProcessPanel>());
const currentCollapseItem = ref(['1', '2', '3']);
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<ModdleElement>('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 });
};
onBeforeMount(() => {
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>({
id: [{ required: true, message: '请输入', trigger: 'blur' }],
name: [{ required: true, message: '请输入', trigger: 'blur' }]
});
</script>
<style lang="scss" scoped></style>

486
src/bpmn/panel/TaskPanel.vue Normal file
View File

@ -0,0 +1,486 @@
<template>
<div>
<el-form ref="formRef" size="default" :model="formData" :rules="formRules" label-width="100px">
<el-collapse v-model="currentCollapseItem">
<el-collapse-item name="1">
<template #title>
<div class="collapse__title">
<el-icon>
<InfoFilled />
</el-icon>
常规
</div>
</template>
<div>
<el-form-item prop="id" label="节点 ID">
<el-input v-model="formData.id" @change="idChange"> </el-input>
</el-form-item>
<el-form-item prop="name" label="节点名称">
<el-input v-model="formData.name" @change="nameChange"> </el-input>
</el-form-item>
<el-form-item v-if="showConfig.skipExpression" prop="skipExpression" label="跳过表达式">
<el-input v-model="formData.skipExpression" @change="skipExpressionChange"> </el-input>
</el-form-item>
<el-form-item v-loading="formManageListLoading" prop="formKey" label="表单地址">
<el-select v-model="formData.formKey" clearable filterable placeholder="请选择表单" style="width: 260px" @change="formKeyChange">
<el-option
v-for="item in formManageList"
:key="item.id"
:label="item.formTypeName + ':' + item.formName"
:value="item.formType + ':' + item.id"
/>
</el-select>
</el-form-item>
</div>
</el-collapse-item>
<el-collapse-item name="2">
<template #title>
<div class="collapse__title">
<el-icon>
<Checked />
</el-icon>
任务
</div>
</template>
<div>
<el-form-item v-if="showConfig.async" prop="sync" label="是否异步">
<el-switch v-model="formData.async" inline-prompt active-text="是" inactive-text="否" @change="syncChange" />
</el-form-item>
<el-tabs tab-position="left" class="demo-tabs" @tab-click="taskTabClick">
<el-tab-pane label="身份存储">
<el-form-item label="分配人员">
<el-input v-model="assignee.userName" disabled>
<template #append>
<el-button icon="Search" type="primary" @click="openSingleUserSelect" />
</template>
</el-input>
</el-form-item>
<el-form-item label="候选人员">
<el-badge :value="selectUserLength" :max="99">
<el-button size="small" type="primary" @click="openUserSelect">选择人员</el-button>
</el-badge>
</el-form-item>
<el-form-item label="候选组">
<el-badge :value="selectRoleLength" :max="99">
<el-button size="small" type="primary" @click="openRoleSelect">选择组</el-button>
</el-badge>
</el-form-item>
</el-tab-pane>
<el-tab-pane label="固定值">
<el-form-item prop="auditUserType" label="分配类型">
<el-select v-model="formData.allocationType">
<el-option v-for="item in AllocationTypeSelect" :key="item.id" :value="item.value" :label="item.label"> </el-option>
</el-select>
</el-form-item>
<el-form-item v-if="formData.allocationType === AllocationTypeEnum.USER" label="分配人员">
<el-input v-model="formData.fixedAssignee" @change="fixedAssigneeChange">
<template #append>
<!-- <el-button icon="Search" size="small" type="primary" @click="proxy.$modal.msgWarning('开发中。。。。。。')" /> -->
</template>
</el-input>
</el-form-item>
<div v-if="formData.allocationType === AllocationTypeEnum.CANDIDATE">
<el-form-item label="候选人员">
<el-badge :value="selectUserLength" :max="99">
<el-button size="small" type="primary" @click="openUserSelect">选择人员</el-button>
</el-badge>
</el-form-item>
<el-form-item label="候选组">
<el-badge :value="selectRoleLength" :max="99">
<el-button size="small" type="primary" @click="openRoleSelect">选择组</el-button>
</el-badge>
</el-form-item>
</div>
<el-form-item v-if="formData.allocationType === AllocationTypeEnum.SPECIFY && showConfig.specifyDesc" style="">
<el-radio-group v-model="formData.specifyDesc" class="ml-4">
<el-radio v-for="item in SpecifyDesc" :key="item.id" :label="item.value" size="large">{{ item.label }}</el-radio>
</el-radio-group>
</el-form-item>
</el-tab-pane>
</el-tabs>
<el-form-item v-if="showConfig.dueDate" prop="dueDate" label="到期时间">
<el-input v-model="formData.dueDate" clearable @change="dueDateChange" @click="openDueDate">
<template #append>
<el-button icon="Search" type="primary" @click="openDueDate" />
</template>
</el-input>
</el-form-item>
<el-form-item v-if="showConfig.priority" prop="priority" label="优先级">
<el-input-number v-model="formData.priority" :min="0" @change="priorityChange"> </el-input-number>
</el-form-item>
</div>
</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 constant.MultiInstanceType" :key="item.id" :value="item.value" :label="item.label"> </el-option>
</el-select>
</el-form-item>
<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>
<div class="collapse__title">
<el-icon>
<BellFilled />
</el-icon>
任务监听器
</div>
</template>
<div>
<TaskListener v-if="showConfig.taskListener" :element="element"></TaskListener>
</div>
</el-collapse-item>
<el-collapse-item v-if="showConfig.executionListener" name="5">
<template #title>
<div class="collapse__title">
<el-icon>
<BellFilled />
</el-icon>
执行监听器
</div>
</template>
<div>
<ExecutionListener v-if="showConfig.executionListener" :element="element"></ExecutionListener>
</div>
</el-collapse-item>
<el-form-item v-if="showConfig.isForCompensation" prop="isForCompensation" label="是否为补偿">
<el-switch v-model="formData.isForCompensation" inline-prompt active-text="是" inactive-text="否" />
</el-form-item>
<el-form-item v-if="showConfig.triggerServiceTask" prop="triggerServiceTask" label="服务任务可触发">
<el-switch v-model="formData.triggerServiceTask" inline-prompt active-text="是" inactive-text="否" />
</el-form-item>
<el-form-item v-if="showConfig.autoStoreVariables" prop="autoStoreVariables" label="自动存储变量">
<el-switch v-model="formData.autoStoreVariables" inline-prompt active-text="是" inactive-text="否" />
</el-form-item>
<el-form-item v-if="showConfig.ruleVariablesInput" prop="skipExpression" label="输入变量">
<el-input v-model="formData.ruleVariablesInput"> </el-input>
</el-form-item>
<el-form-item v-if="showConfig.exclude" prop="exclude" label="排除">
<el-switch v-model="formData.exclude" inline-prompt active-text="是" inactive-text="否" />
</el-form-item>
<el-form-item v-if="showConfig.class" prop="class" label="类">
<el-input v-model="formData.class"> </el-input>
</el-form-item>
</el-collapse>
</el-form>
<UserSelect ref="userSelectRef" :data="formData.candidateUsers" @confirm-call-back="userSelectCallBack"></UserSelect>
<UserSelect ref="singleUserSelectRef" :data="formData.assignee" :multiple="false" @confirm-call-back="singleUserSelectCallBack"></UserSelect>
<RoleSelect ref="roleSelectRef" :data="formData.candidateGroups" @confirm-call-back="roleSelectCallBack"></RoleSelect>
<DueDate ref="dueDateRef" v-model="formData.dueDate" :data="formData.dueDate" @confirm-call-back="dueDateCallBack"></DueDate>
</div>
</template>
<script setup lang="ts">
import useParseElement from '../hooks/useParseElement';
import usePanel from '../hooks/usePanel';
import UserSelect from '@/components/UserSelect';
import RoleSelect from '@/components/RoleSelect';
import ExecutionListener from './property/ExecutionListener.vue';
import TaskListener from './property/TaskListener.vue';
import DueDate from './property/DueDate.vue';
import { ModdleElement } from 'bpmn';
import { TaskPanel } from 'bpmnDesign';
import { AllocationTypeEnum, MultiInstanceTypeEnum, SpecifyDescEnum } from '@/enums/bpmn/IndexEnums';
import { UserVO } from '@/api/system/user/types';
import { RoleVO } from '@/api/system/role/types';
import { selectListFormManage } from '@/api/workflow/formManage';
import { FormManageVO } from '@/api/workflow/formManage/types';
const formManageList = ref<FormManageVO[]>([]);
const formManageListLoading = ref(false);
interface PropType {
element: ModdleElement;
}
const props = withDefaults(defineProps<PropType>(), {});
const { showConfig, nameChange, formKeyChange, idChange, updateProperties, getExtensionElements, createModdleElement, constant } = usePanel({
element: toRaw(props.element)
});
const { parseData } = useParseElement({
element: toRaw(props.element)
});
const initFormData = {
id: '',
name: '',
dueDate: '',
multiInstanceType: MultiInstanceTypeEnum.NONE,
allocationType: AllocationTypeEnum.USER,
specifyDesc: SpecifyDescEnum.SPECIFY_SINGLE
};
const formData = ref({ ...initFormData, ...parseData<TaskPanel>() });
const assignee = ref<Partial<UserVO>>({
userName: ''
});
const currentCollapseItem = ref(['1', '2']);
const userSelectRef = ref<InstanceType<typeof UserSelect>>();
const singleUserSelectRef = ref<InstanceType<typeof UserSelect>>();
const roleSelectRef = ref<InstanceType<typeof RoleSelect>>();
const dueDateRef = ref<InstanceType<typeof DueDate>>();
const isMultiple = ref(true);
const openUserSelect = () => {
userSelectRef.value.open();
};
const openSingleUserSelect = () => {
singleUserSelectRef.value.open();
};
const openRoleSelect = () => {
roleSelectRef.value.open();
};
const openDueDate = (e) => {
dueDateRef.value.openDialog();
};
const singleUserSelectCallBack = (data: UserVO[]) => {
const user: UserVO = data.length !== 0 ? data[0] : undefined;
updateProperties({ 'flowable:assignee': user?.userId });
assignee.value = user ? user : { userName: '' };
formData.value.assignee = String(user?.userId);
let extensionElements = getExtensionElements();
extensionElements.values = extensionElements.get('values').filter((item) => item.$type !== 'flowable:extAssignee');
if (user) {
const extAssigneeElement = createModdleElement('flowable:extAssignee', { body: '' }, extensionElements);
extensionElements.get('values').push(extAssigneeElement);
extAssigneeElement.body = JSON.stringify({ userName: user.userName, userId: user.userId });
}
if (extensionElements.values.length === 0) {
extensionElements = undefined;
}
updateProperties({ extensionElements: extensionElements });
};
const userSelectCallBack = (data: UserVO[]) => {
let extensionElements = getExtensionElements();
extensionElements.values = extensionElements.values.filter((item) => item.$type !== 'flowable:extCandidateUsers');
if (data.length === 0) {
formData.value.candidateUsers = undefined;
updateProperties({ 'flowable:candidateUsers': undefined });
} else {
const userIds = data.map((item) => item.userId).join(',');
formData.value.candidateUsers = userIds;
updateProperties({ 'flowable:candidateUsers': userIds });
const extCandidateUsersElement = createModdleElement('flowable:extCandidateUsers', { body: '' }, extensionElements);
extensionElements.values.push(extCandidateUsersElement);
const users = data.map((item) => {
return {
userId: item.userId,
userName: item.userName
};
});
extCandidateUsersElement.body = JSON.stringify(users);
}
if (extensionElements.values.length === 0) {
extensionElements = undefined;
}
updateProperties({ extensionElements: extensionElements });
};
const roleSelectCallBack = (data: RoleVO[]) => {
if (data.length === 0) {
formData.value.candidateGroups = '';
updateProperties({ 'flowable:candidateGroups': undefined });
} else {
const roleIds = data.map((item) => item.roleId).join(',');
formData.value.candidateGroups = roleIds;
updateProperties({ 'flowable:candidateGroups': roleIds });
}
};
const dueDateCallBack = (data: string) => {
updateProperties({ 'flowable:dueDate': data });
};
const taskTabClick = (e) => {
formData.value.candidateGroups = '';
formData.value.candidateUsers = '';
formData.value.assignee = '';
assignee.value = {};
};
const syncChange = (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 fixedAssigneeChange = (newVal) => {
updateProperties({ 'flowable:assignee': newVal && newVal.length > 0 ? newVal : undefined });
};
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<ModdleElement>('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 dueDateChange = (newVal) => {
updateProperties({ 'flowable:dueDate': newVal && newVal.length > 0 ? newVal : undefined });
};
const selectUserLength = computed(() => {
if (formData.value.candidateUsers) {
return formData.value.candidateUsers.split(',').length;
} else {
return 0;
}
});
const selectRoleLength = computed(() => {
if (formData.value.candidateGroups) {
return formData.value.candidateGroups.split(',').length;
} else {
return 0;
}
});
onBeforeMount(() => {
const extensionElements = getExtensionElements(false);
if (extensionElements && extensionElements.get('values')) {
let extAssigneeElement = extensionElements.get('values').find((item) => item.$type === 'flowable:extAssignee');
if (extAssigneeElement) {
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;
}
if (formData.value.assignee) {
formData.value.fixedAssignee = formData.value.assignee;
}
});
const formRules = ref<ElFormRules>({
id: [{ required: true, message: '请输入', trigger: 'blur' }],
name: [{ required: true, message: '请输入', trigger: 'blur' }]
});
const AllocationTypeSelect = [
{ id: 'b9cdf970-dd91-47c0-819f-42a7010ca2a6', label: '指定人员', value: AllocationTypeEnum.USER },
{ id: '3f7ccbcd-c464-4602-bb9d-e96649d10585', label: '候选人员', value: AllocationTypeEnum.CANDIDATE },
{ id: 'c49065e0-7f2d-4c09-aedb-ab2d47d9a454', label: '发起人自己', value: AllocationTypeEnum.YOURSELF },
{ id: '6ef40a03-7e9a-4898-89b2-c88fe9064542', label: '发起人指定', value: AllocationTypeEnum.SPECIFY }
];
const SpecifyDesc = [
{ id: 'fa253b34-4335-458c-b1bc-b039e2a2b7a6', label: '指定一个人', value: 'specifySingle' },
{ id: '7365ff54-2e05-4312-9bfb-0b8edd779c5b', label: '指定多个人', value: 'specifyMultiple' }
];
const listFormManage = async () => {
formManageListLoading.value = true;
const res = await selectListFormManage();
formManageList.value = res.data;
formManageListLoading.value = false;
};
onMounted(() => {
nextTick(() => {
listFormManage();
});
});
</script>
<style lang="scss" scoped></style>

108
src/bpmn/panel/index.vue Normal file
View File

@ -0,0 +1,108 @@
<template>
<div ref="propertyPanel">
<div v-if="nodeName" class="node-name">{{ nodeName }}</div>
<component :is="component" v-if="element" :element="element" />
</div>
</template>
<script setup lang="ts" name="PropertyPanel">
import { NodeName } from '../assets/lang/zh';
import TaskPanel from './TaskPanel.vue';
import ProcessPanel from './ProcessPanel.vue';
import StartEndPanel from './StartEndPanel.vue';
import GatewayPanel from './GatewayPanel.vue';
import SequenceFlowPanel from './SequenceFlowPanel.vue';
import ParticipantPanel from './ParticipantPanel.vue';
import SubProcessPanel from './SubProcessPanel.vue';
import { Modeler, ModdleElement } from 'bpmn';
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
interface propsType {
modeler: Modeler;
}
const props = withDefaults(defineProps<propsType>(), {});
const element = ref<ModdleElement>();
const processElement = ref<ModdleElement>();
const startEndType = ['bpmn:IntermediateThrowEvent', 'bpmn:StartEvent', 'bpmn:EndEvent'];
const taskType = [
'bpmn:UserTask',
'bpmn:Task',
'bpmn:SendTask',
'bpmn:ReceiveTask',
'bpmn:ManualTask',
'bpmn:BusinessRuleTask',
'bpmn:ServiceTask',
'bpmn:ScriptTask'
];
const sequenceType = ['bpmn:SequenceFlow'];
const gatewayType = ['bpmn:InclusiveGateway', 'bpmn:ExclusiveGateway', 'bpmn:ParallelGateway', 'bpmn:EventBasedGateway', 'bpmn:ComplexGateway'];
const processType = ['bpmn:Process'];
// 组件计算
const component = computed(() => {
if (!element.value) return null;
const type = element.value.type;
if (startEndType.includes(type)) return StartEndPanel;
if (taskType.includes(type)) return TaskPanel;
if (sequenceType.includes(type)) return SequenceFlowPanel;
if (gatewayType.includes(type)) return GatewayPanel;
if (processType.includes(type)) return ProcessPanel;
if (type === 'bpmn:Participant') return ParticipantPanel;
if (type === 'bpmn:SubProcess') return SubProcessPanel;
//return proxy?.$modal.msgWarning('面板开发中....');
});
const nodeName = computed(() => {
if (element.value) {
const bizObj = element.value.businessObject;
const type = bizObj?.eventDefinitions && bizObj?.eventDefinitions.length > 0 ? bizObj.eventDefinitions[0].$type : bizObj.$type;
return NodeName[type] || type;
}
});
const handleModeler = () => {
props.modeler.on('root.added', (e: any) => {
element.value = null;
if (e.element.type === 'bpmn:Process') {
nextTick(() => {
element.value = e.element;
processElement.value = e.element;
});
}
});
props.modeler.on('element.click', (e: any) => {
if (e.element.type === 'bpmn:Process') {
nextTick(() => {
element.value = e.element;
processElement.value = e.element;
});
}
});
props.modeler.on('selection.changed', (e: any) => {
// 先给null为了让vue刷新
element.value = null;
const newElement = e.newSelection[0];
if (newElement) {
nextTick(() => {
element.value = newElement;
});
} else {
nextTick(() => {
element.value = processElement.value;
});
}
});
};
onMounted(() => {
handleModeler();
});
</script>
<style scoped lang="scss">
.node-name {
font-size: 16px;
font-weight: bold;
padding: 10px;
}
</style>

252
src/bpmn/panel/property/DueDate.vue Normal file
View File

@ -0,0 +1,252 @@
<template>
<div>
<el-dialog v-model="visible" :title="title" width="600px" append-to-body>
<el-form label-width="100px">
<el-form-item label="小时">
<el-radio-group v-model="hourValue" @change="hourChange">
<el-radio-button label="4" />
<el-radio-button label="8" />
<el-radio-button label="12" />
<el-radio-button label="24" />
<el-radio-button label="自定义" />
<el-input-number v-show="hourValue === '自定义'" v-model="customHourValue" :min="1" @change="customHourValueChange"></el-input-number>
</el-radio-group>
</el-form-item>
<el-form-item label="天">
<el-radio-group v-model="dayValue" @change="dayChange">
<el-radio-button label="1" />
<el-radio-button label="2" />
<el-radio-button label="3" />
<el-radio-button label="4" />
<el-radio-button label="自定义" />
<el-input-number v-show="dayValue === '自定义'" v-model="customDayValue" :min="1" @change="customDayValueChange"></el-input-number>
</el-radio-group>
</el-form-item>
<el-form-item label="周">
<el-radio-group v-model="weekValue" @change="weekChange">
<el-radio-button label="1" />
<el-radio-button label="2" />
<el-radio-button label="3" />
<el-radio-button label="4" />
<el-radio-button label="自定义" />
<el-input-number v-show="weekValue === '自定义'" v-model="customWeekValue" :min="1" @change="customWeekValueChange"></el-input-number>
</el-radio-group>
</el-form-item>
<el-form-item label="月">
<el-radio-group v-model="monthValue" @change="monthChange">
<el-radio-button label="1" />
<el-radio-button label="2" />
<el-radio-button label="3" />
<el-radio-button label="4" />
<el-radio-button label="自定义" />
<el-input-number v-show="monthValue === '自定义'" v-model="customMonthValue" :min="1" @change="customMonthValueChange"></el-input-number>
</el-radio-group>
</el-form-item>
</el-form>
<template #footer>
<div>
<el-button @click="closeDialog">取消</el-button>
<el-button type="primary" @click="confirm">确定</el-button>
</div>
</template>
</el-dialog>
</div>
</template>
<script setup lang="ts">
import useDialog from '@/hooks/useDialog';
interface PropType {
modelValue?: string;
data?: string;
}
const prop = withDefaults(defineProps<PropType>(), {
modelValue: '',
data: ''
});
const emit = defineEmits(['update:modelValue', 'confirmCallBack']);
const { title, visible, openDialog, closeDialog } = useDialog({
title: '设置任务到期时间'
});
const formValue = ref();
const valueType = ref();
const hourValue = ref('');
const dayValue = ref('');
const weekValue = ref('');
const monthValue = ref('');
const customHourValue = ref(1);
const customDayValue = ref(1);
const customWeekValue = ref(1);
const customMonthValue = ref(1);
const hourValueConst = ['4', '8', '12', '24'];
const dayAndWeekAndMonthValueConst = ['1', '2', '3', '4'];
const initValue = () => {
formValue.value = prop.data;
if (prop.data) {
const lastStr = prop.data.substring(prop.data.length - 1);
if (lastStr === 'H') {
const hourValueValue = prop.data.substring(2, prop.data.length - 1);
if (hourValueConst.includes(hourValueValue)) {
hourValue.value = hourValueValue;
} else {
hourValue.value = '自定义';
customHourValue.value = Number(hourValueValue);
}
}
const dayAndWeekAndMonthValue = prop.data.substring(1, prop.data.length - 1);
if (lastStr === 'D') {
if (dayAndWeekAndMonthValueConst.includes(dayAndWeekAndMonthValue)) {
dayValue.value = dayAndWeekAndMonthValue;
} else {
dayValue.value = '自定义';
customDayValue.value = Number(dayAndWeekAndMonthValue);
}
}
if (lastStr === 'W') {
if (dayAndWeekAndMonthValueConst.includes(dayAndWeekAndMonthValue)) {
weekValue.value = dayAndWeekAndMonthValue;
} else {
weekValue.value = '自定义';
customWeekValue.value = Number(dayAndWeekAndMonthValue);
}
}
if (lastStr === 'M') {
if (dayAndWeekAndMonthValueConst.includes(dayAndWeekAndMonthValue)) {
monthValue.value = dayAndWeekAndMonthValue;
} else {
monthValue.value = '自定义';
customMonthValue.value = Number(dayAndWeekAndMonthValue);
}
}
}
};
const confirm = () => {
emit('update:modelValue', formValue.value);
emit('confirmCallBack', formValue.value);
closeDialog();
};
const customHourValueChange = (customHourValue) => {
formValue.value = `PT${customHourValue}H`;
dayValue.value = '';
weekValue.value = '';
monthValue.value = '';
customDayValue.value = 1;
customWeekValue.value = 1;
customMonthValue.value = 1;
};
const customDayValueChange = (customDayValue) => {
formValue.value = `P${customDayValue}D`;
hourValue.value = '';
weekValue.value = '';
monthValue.value = '';
customHourValue.value = 1;
customWeekValue.value = 1;
customMonthValue.value = 1;
};
const customWeekValueChange = (customWeekValue) => {
formValue.value = `P${customWeekValue}W`;
hourValue.value = '';
dayValue.value = '';
monthValue.value = '';
customHourValue.value = 1;
customDayValue.value = 1;
customMonthValue.value = 1;
};
const customMonthValueChange = (customMonthValue) => {
formValue.value = `P${customMonthValue}M`;
hourValue.value = '';
dayValue.value = '';
weekValue.value = '';
customHourValue.value = 1;
customDayValue.value = 1;
customWeekValue.value = 1;
};
const hourChange = (hourValue) => {
if (hourValue === '自定义') {
formValue.value = `PT${customHourValue.value}H`;
} else {
formValue.value = `PT${hourValue}H`;
}
dayValue.value = '';
weekValue.value = '';
monthValue.value = '';
customDayValue.value = 1;
customWeekValue.value = 1;
customMonthValue.value = 1;
};
const dayChange = (dayValue) => {
if (dayValue === '自定义') {
formValue.value = `P${customDayValue.value}D`;
} else {
formValue.value = `P${dayValue}D`;
}
hourValue.value = '';
weekValue.value = '';
monthValue.value = '';
customHourValue.value = 1;
customWeekValue.value = 1;
customMonthValue.value = 1;
};
const weekChange = (weekValue) => {
if (weekValue === '自定义') {
formValue.value = `P${customWeekValue.value}W`;
} else {
formValue.value = `P${weekValue}W`;
}
hourValue.value = '';
dayValue.value = '';
monthValue.value = '';
customHourValue.value = 1;
customDayValue.value = 1;
customMonthValue.value = 1;
};
const monthChange = (monthValue) => {
if (monthValue === '自定义') {
formValue.value = `P${customMonthValue.value}M`;
} else {
formValue.value = `P${monthValue}M`;
}
hourValue.value = '';
dayValue.value = '';
weekValue.value = '';
customHourValue.value = 1;
customDayValue.value = 1;
customWeekValue.value = 1;
};
watch(
() => visible.value,
() => {
if (visible.value) {
initValue();
}
}
);
defineExpose({
openDialog,
closeDialog
});
</script>

308
src/bpmn/panel/property/ExecutionListener.vue Normal file
View File

@ -0,0 +1,308 @@
<template>
<div>
<vxe-toolbar>
<template #buttons>
<el-button type="primary" link size="small" @click="insertEvent">新增</el-button>
<el-button type="primary" link size="small" @click="removeSelectRowEvent">删除</el-button>
</template>
</vxe-toolbar>
<vxe-table
ref="tableRef"
size="mini"
height="100px"
border
show-overflow
keep-source
:data="tableData"
:menu-config="menuConfig"
@cell-dblclick="cellDBLClickEvent"
@menu-click="contextMenuClickEvent"
>
<vxe-column type="checkbox" width="40"></vxe-column>
<vxe-column type="seq" width="40"></vxe-column>
<vxe-column field="event" title="事件" min-width="100px">
<template #default="slotParams">
<span>{{ eventSelect.find((e) => e.value === slotParams.row.event)?.label }}</span>
</template>
</vxe-column>
<vxe-column field="type" title="类型" min-width="100px">
<template #default="slotParams">
<span>{{ typeSelect.find((e) => e.value === slotParams.row.type)?.label }}</span>
</template>
</vxe-column>
<vxe-column field="className" title="Java 类名" min-width="100px"> </vxe-column>
</vxe-table>
<el-dialog
v-model="formDialog.visible.value"
:title="formDialog.title.value"
width="600px"
:close-on-click-modal="false"
:close-on-press-escape="false"
:show-close="false"
append-to-body
>
<el-form ref="formRef" :model="formData" :rules="tableRules" label-width="100px">
<el-form-item label="事件" prop="event">
<el-select v-model="formData.event">
<el-option v-for="item in eventSelect" :key="item.id" :value="item.value" :label="item.label"></el-option>
</el-select>
</el-form-item>
<el-form-item label="类型" prop="type">
<template #label>
<span>
类型
<el-tooltip placement="top">
<el-icon><QuestionFilled /></el-icon>
<template #content>
类：示例 com.company.MyCustomListener，自定义类必须实现 org.flowable.engine.delegate.TaskListener 接口<br />
表达式：示例 ${myObject.callMethod(task, task.eventName)}<br />
委托表达式：示例 ${myListenerSpringBean} ，该 springBean 需要实现 org.flowable.engine.delegate.TaskListener 接口
</template>
</el-tooltip>
</span>
</template>
<el-select v-model="formData.type">
<el-option v-for="item in typeSelect" :key="item.id" :value="item.value" :label="item.label"></el-option>
</el-select>
</el-form-item>
<el-form-item
:label="typeSelect.filter((e) => e.value === formData.type)[0] ? typeSelect.filter((e) => e.value === formData.type)[0]?.label : '表达式'"
prop="className"
>
<el-input v-model="formData.className" type="text"></el-input>
</el-form-item>
</el-form>
<el-tabs type="border-card">
<el-tab-pane label="参数">
<ListenerParam ref="listenerParamRef" :table-data="formData.params" />
</el-tab-pane>
</el-tabs>
<template #footer>
<div class="dialog-footer">
<el-button @click="formDialog.closeDialog">取 消</el-button>
<el-button type="primary" @click="submitEvent">确 定</el-button>
</div>
</template>
</el-dialog>
</div>
</template>
<script setup lang="ts">
import ListenerParam from './ListenerParam.vue';
import { VxeTableEvents, VxeTableInstance, VxeTablePropTypes } from 'vxe-table';
import { ExecutionListenerVO } from 'bpmnDesign';
import { Moddle, Modeler, ModdleElement } from 'bpmn';
import usePanel from '../../hooks/usePanel';
import useDialog from '@/hooks/useDialog';
import useModelerStore from '@/store/modules/modeler';
const emit = defineEmits(['close']);
interface PropType {
element: ModdleElement;
}
const props = withDefaults(defineProps<PropType>(), {});
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const selectRow = ref<ExecutionListenerVO | null>();
const formDialog = useDialog({
title: selectRow.value ? '编辑&保存' : '新增&保存'
});
const { showConfig, elementType, updateProperties } = usePanel({
element: toRaw(props.element)
});
const { getModdle } = useModelerStore();
const moddle = getModdle();
const listenerParamRef = ref<InstanceType<typeof ListenerParam>>();
const tableRef = ref<VxeTableInstance<ExecutionListenerVO>>();
const formRef = ref<ElFormInstance>();
const initData: ExecutionListenerVO = {
event: '',
type: '',
className: '',
params: []
};
const formData = ref<ExecutionListenerVO>({ ...initData });
const tableData = ref<ExecutionListenerVO[]>([]);
const tableRules = ref<ElFormRules>({
event: [{ required: true, message: '请选择', trigger: 'blur' }],
type: [{ required: true, message: '请选择', trigger: 'blur' }],
className: [{ required: true, message: '请输入', trigger: 'blur' }]
});
const submitEvent = async () => {
const error = await listenerParamRef.value.validate();
await formRef.value.validate((validate) => {
if (validate && !error) {
const $table = tableRef.value;
if ($table) {
formData.value.params = listenerParamRef.value.getTableData();
if (selectRow.value) {
Object.assign(selectRow.value, formData.value);
} else {
$table.insertAt({ ...formData.value }, -1);
}
updateElement();
formDialog.closeDialog();
}
}
});
};
const removeSelectRowEvent = async () => {
const $table = tableRef.value;
if ($table) {
const selectCount = $table.getCheckboxRecords().length;
if (selectCount === 0) {
proxy?.$modal.msgWarning('请选择行');
} else {
await $table.removeCheckboxRow();
updateElement();
}
}
};
const insertEvent = async () => {
Object.assign(formData.value, initData);
selectRow.value = null;
formDialog.openDialog();
};
const editEvent = (row: ExecutionListenerVO) => {
Object.assign(formData.value, row);
selectRow.value = row;
formDialog.openDialog();
};
const removeEvent = async (row: ExecutionListenerVO) => {
await proxy?.$modal.confirm('您确定要删除该数据?');
const $table = tableRef.value;
if ($table) {
await $table.remove(row);
updateElement();
}
};
const updateElement = () => {
const $table = tableRef.value;
const data = $table.getTableData().fullData;
if (data.length) {
let extensionElements = props.element.businessObject.get('extensionElements');
if (!extensionElements) {
extensionElements = moddle.create('bpmn:ExtensionElements');
}
// 清除旧值
extensionElements.values = extensionElements.values?.filter((item) => item.$type !== 'flowable:ExecutionListener') ?? [];
data.forEach((item) => {
const executionListener = 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 = moddle.create('flowable:Field');
fieldElement['name'] = field.name;
fieldElement[field.type] = field.value;
executionListener.get('fields').push(fieldElement);
});
}
extensionElements.get('values').push(executionListener);
});
updateProperties({ extensionElements: extensionElements });
} else {
const extensionElements = props.element.businessObject[`extensionElements`];
if (extensionElements) {
extensionElements.values = extensionElements.values?.filter((item) => item.$type !== 'flowable:ExecutionListener') ?? [];
}
}
};
const cellDBLClickEvent: VxeTableEvents.CellDblclick<ExecutionListenerVO> = ({ row }) => {
editEvent(row);
};
const menuConfig = reactive<VxeTablePropTypes.MenuConfig<ExecutionListenerVO>>({
body: {
options: [
[
{ code: 'edit', name: '编辑', prefixIcon: 'vxe-icon-edit', disabled: false },
{ code: 'remove', name: '删除', prefixIcon: 'vxe-icon-delete', disabled: false }
]
]
},
visibleMethod({ options, column }) {
const isDisabled = !column;
options.forEach((list) => {
list.forEach((item) => {
item.disabled = isDisabled;
});
});
return true;
}
});
const contextMenuClickEvent: VxeTableEvents.MenuClick<ExecutionListenerVO> = ({ menu, row, column }) => {
const $table = tableRef.value;
if ($table) {
switch (menu.code) {
case 'edit':
editEvent(row);
break;
case 'remove':
removeEvent(row);
break;
}
}
};
const initTableData = () => {
tableData.value =
props.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]
};
}) ?? []
};
}) ?? [];
};
onMounted(() => {
initTableData();
});
const typeSelect = [
{ id: '742fdeb7-23b4-416b-ac66-cd4ec8b901b7', label: '类', value: 'class' },
{ id: '660c9c46-8fae-4bae-91a0-0335420019dc', label: '表达式', value: 'expression' },
{ id: '4b8135ab-6bc3-4a0f-80be-22f58bc6c5fd', label: '委托表达式', value: 'delegateExpression' }
];
const eventSelect = [
{ id: 'e6e0a51a-2d5d-4dc4-b847-b5c14f43a6ab', label: '开始', value: 'start' },
{ id: '6da97c1e-15fc-4445-8943-75d09f49778e', label: '结束', value: 'end' },
{ id: '6a2cbcec-e026-4f11-bef7-fff0b5c871e2', label: '启用', value: 'take' }
];
</script>
<style scoped lang="scss">
.el-badge {
:deep(.el-badge__content) {
top: 10px;
}
}
</style>

121
src/bpmn/panel/property/ListenerParam.vue Normal file
View File

@ -0,0 +1,121 @@
<template>
<vxe-toolbar>
<template #buttons>
<el-button icon="Plus" @click="insertRow">新增</el-button>
</template>
</vxe-toolbar>
<vxe-table
ref="tableRef"
:height="height"
border
show-overflow
keep-source
:data="tableData"
:edit-rules="tableRules"
:edit-config="{ trigger: 'click', mode: 'row', showStatus: true }"
>
<vxe-column type="seq" width="40"></vxe-column>
<vxe-column field="type" title="类型" :edit-render="{}">
<template #default="slotParams">
<span>{{ typeSelect.find((e) => e.value === slotParams.row.type)?.label }}</span>
</template>
<template #edit="slotParams">
<vxe-select v-model="slotParams.row.type">
<vxe-option v-for="item in typeSelect" :key="item.id" :value="item.value" :label="item.label"></vxe-option>
</vxe-select>
</template>
</vxe-column>
<vxe-column field="name" title="名称" :edit-render="{}">
<template #edit="slotParams">
<vxe-input v-model="slotParams.row.name" type="text"></vxe-input>
</template>
</vxe-column>
<vxe-column field="value" title="值" :edit-render="{}">
<template #edit="slotParams">
<vxe-input v-model="slotParams.row.value" type="text"></vxe-input>
</template>
</vxe-column>
<vxe-column title="操作" width="100" show-overflow align="center">
<template #default="slotParams">
<el-tooltip content="删除" placement="top">
<el-button link type="danger" icon="Delete" @click="removeRow(slotParams.row)"></el-button>
</el-tooltip>
</template>
</vxe-column>
</vxe-table>
</template>
<script setup lang="ts">
import { VXETable, VxeTableInstance, VxeTablePropTypes } from 'vxe-table';
import { ParamVO } from 'bpmnDesign';
import useDialog from '@/hooks/useDialog';
interface PropType {
height?: string;
tableData?: ParamVO[];
}
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const props = withDefaults(defineProps<PropType>(), {
height: '200px',
tableData: () => []
});
const tableRules = ref<VxeTablePropTypes.EditRules>({
type: [{ required: true, message: '请选择', trigger: 'blur' }],
name: [{ required: true, message: '请输入', trigger: 'blur' }],
value: [{ required: true, message: '请输入', trigger: 'blur' }]
});
const { title, visible, openDialog, closeDialog } = useDialog({
title: '监听器参数'
});
const typeSelect = [
{ id: '742fdeb7-23b4-416b-ac66-cd4ec8b901b7', label: '字符串', value: 'stringValue' },
{ id: '660c9c46-8fae-4bae-91a0-0335420019dc', label: '表达式', value: 'expression' }
];
const tableRef = ref<VxeTableInstance<ParamVO>>();
const getTableData = () => {
const $table = tableRef.value;
if ($table) {
return $table.getTableData().fullData;
}
return [];
};
const insertRow = async () => {
const $table = tableRef.value;
if ($table) {
const { row: newRow } = await $table.insertAt({}, -1);
// 插入一条数据并触发校验
await $table.validate(newRow);
}
};
const removeRow = async (row: ParamVO) => {
await proxy?.$modal.confirm('您确定要删除该数据?');
const $table = tableRef.value;
if ($table) {
await $table.remove(row);
}
};
const validate = async () => {
const $table = tableRef.value;
if ($table) {
return await $table.validate(true);
}
};
defineExpose({
closeDialog,
openDialog,
validate,
getTableData
});
</script>
<style scoped lang="scss"></style>

310
src/bpmn/panel/property/TaskListener.vue Normal file
View File

@ -0,0 +1,310 @@
<template>
<div>
<vxe-toolbar>
<template #buttons>
<el-button type="primary" link size="small" @click="insertEvent">新增</el-button>
<el-button type="primary" link size="small" @click="removeSelectRowEvent">删除</el-button>
</template>
</vxe-toolbar>
<vxe-table
ref="tableRef"
size="mini"
height="100px"
border
show-overflow
keep-source
:data="tableData"
:menu-config="menuConfig"
@cell-dblclick="cellDBLClickEvent"
@menu-click="contextMenuClickEvent"
>
<vxe-column type="checkbox" width="40"></vxe-column>
<vxe-column type="seq" width="40"></vxe-column>
<vxe-column field="event" title="事件" min-width="100px">
<template #default="slotParams">
<span>{{ eventSelect.find((e) => e.value === slotParams.row.event)?.label }}</span>
</template>
</vxe-column>
<vxe-column field="type" title="类型" min-width="100px">
<template #default="slotParams">
<span>{{ typeSelect.find((e) => e.value === slotParams.row.type)?.label }}</span>
</template>
</vxe-column>
<vxe-column field="className" title="Java 类名" min-width="100px"> </vxe-column>
</vxe-table>
<el-dialog
v-model="formDialog.visible.value"
:title="formDialog.title.value"
width="600px"
:close-on-click-modal="false"
:close-on-press-escape="false"
:show-close="false"
append-to-body
>
<el-form ref="formRef" :model="formData" :rules="tableRules" label-width="100px">
<el-form-item label="事件" prop="event">
<template #label>
<span>
事件
<el-tooltip placement="top">
<el-icon><QuestionFilled /></el-icon>
<template #content>
create（创建）：当任务已经创建，并且所有任务参数都已经设置时触发。<br />
assignment（指派）：当任务已经指派给某人时触发。请注意：当流程执行到达用户任务时，在触发create事件之前，会首先触发assignment事件。<br />
complete（完成）：当任务已经完成，从运行时数据中删除前触发。<br />
delete（删除）：在任务即将被删除前触发。请注意任务由completeTask正常完成时也会触发。
</template>
</el-tooltip>
</span>
</template>
<el-select v-model="formData.event">
<el-option v-for="item in eventSelect" :key="item.id" :value="item.value" :label="item.label"></el-option>
</el-select>
</el-form-item>
<el-form-item label="类型" prop="type">
<el-select v-model="formData.type">
<el-option v-for="item in typeSelect" :key="item.id" :value="item.value" :label="item.label"></el-option>
</el-select>
</el-form-item>
<el-form-item
:label="typeSelect.filter((e) => e.value === formData.type)[0] ? typeSelect.filter((e) => e.value === formData.type)[0]?.label : '表达式'"
prop="className"
>
<el-input v-model="formData.className" type="text"></el-input>
</el-form-item>
</el-form>
<el-tabs type="border-card">
<el-tab-pane label="参数">
<ListenerParam ref="listenerParamRef" :table-data="formData.params" />
</el-tab-pane>
</el-tabs>
<template #footer>
<div class="dialog-footer">
<el-button @click="formDialog.closeDialog">取 消</el-button>
<el-button type="primary" @click="submitEvent">确 定</el-button>
</div>
</template>
</el-dialog>
</div>
</template>
<script setup lang="ts">
import ListenerParam from './ListenerParam.vue';
import { VxeTableEvents, VxeTableInstance, VxeTablePropTypes } from 'vxe-table';
import { TaskListenerVO } from 'bpmnDesign';
import { ModdleElement } from 'bpmn';
import usePanel from '../../hooks/usePanel';
import useDialog from '@/hooks/useDialog';
import useModelerStore from '@/store/modules/modeler';
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
interface PropType {
element: ModdleElement;
}
const props = withDefaults(defineProps<PropType>(), {});
const selectRow = ref<TaskListenerVO | null>();
const formDialog = useDialog({
title: selectRow.value ? '编辑&保存' : '新增&保存'
});
const { showConfig, elementType, updateProperties } = usePanel({
element: toRaw(props.element)
});
const { getModdle } = useModelerStore();
const moddle = getModdle();
const listenerParamRef = ref<InstanceType<typeof ListenerParam>>();
const tableRef = ref<VxeTableInstance<TaskListenerVO>>();
const formRef = ref<ElFormInstance>();
const initData: TaskListenerVO = {
event: '',
type: '',
className: '',
name: '',
params: []
};
const formData = ref<TaskListenerVO>({ ...initData });
const currentIndex = ref(0);
const tableData = ref<TaskListenerVO[]>([]);
const tableRules = ref<VxeTablePropTypes.EditRules>({
event: [{ required: true, message: '请选择', trigger: 'blur' }],
type: [{ required: true, message: '请选择', trigger: 'blur' }],
name: [{ required: true, message: '请输入', trigger: 'blur' }],
className: [{ required: true, message: '请输入', trigger: 'blur' }]
});
const submitEvent = async () => {
const error = await listenerParamRef.value.validate();
await formRef.value.validate((validate) => {
if (validate && !error) {
const $table = tableRef.value;
if ($table) {
formData.value.params = listenerParamRef.value.getTableData();
if (selectRow.value) {
Object.assign(selectRow.value, formData.value);
} else {
$table.insertAt({ ...formData.value }, -1);
}
updateElement();
formDialog.closeDialog();
}
}
});
};
const insertEvent = async () => {
Object.assign(formData.value, initData);
selectRow.value = null;
formDialog.openDialog();
};
const editEvent = (row: TaskListenerVO) => {
Object.assign(formData.value, row);
selectRow.value = row;
formDialog.openDialog();
};
const removeEvent = async (row: TaskListenerVO) => {
await proxy?.$modal.confirm('您确定要删除该数据?');
const $table = tableRef.value;
if ($table) {
await $table.remove(row);
updateElement();
}
};
const removeSelectRowEvent = async () => {
const $table = tableRef.value;
if ($table) {
const selectCount = $table.getCheckboxRecords().length;
if (selectCount === 0) {
proxy?.$modal.msgWarning('请选择行');
} else {
await $table.removeCheckboxRow();
updateElement();
}
}
};
const updateElement = () => {
const $table = tableRef.value;
const data = $table.getTableData().fullData;
if (data.length) {
let extensionElements = props.element.businessObject.get('extensionElements');
if (!extensionElements) {
extensionElements = moddle.create('bpmn:ExtensionElements');
}
// 清除旧值
extensionElements.values = extensionElements.values?.filter((item) => item.$type !== 'flowable:TaskListener') ?? [];
data.forEach((item) => {
const taskListener = 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 = moddle.create('flowable:Field');
fieldElement['name'] = field.name;
fieldElement[field.type] = field.value;
taskListener.get('fields').push(fieldElement);
});
}
extensionElements.get('values').push(taskListener);
});
updateProperties({ extensionElements: extensionElements });
} else {
const extensionElements = props.element.businessObject[`extensionElements`];
if (extensionElements) {
extensionElements.values = extensionElements.values?.filter((item) => item.$type !== 'flowable:TaskListener') ?? [];
}
}
};
const cellDBLClickEvent: VxeTableEvents.CellDblclick<TaskListenerVO> = ({ row }) => {
editEvent(row);
};
const menuConfig = reactive<VxeTablePropTypes.MenuConfig<TaskListenerVO>>({
body: {
options: [
[
{ code: 'edit', name: '编辑', prefixIcon: 'vxe-icon-edit', disabled: false },
{ code: 'remove', name: '删除', prefixIcon: 'vxe-icon-delete', disabled: false }
]
]
},
visibleMethod({ options, column }) {
const isDisabled = !column;
options.forEach((list) => {
list.forEach((item) => {
item.disabled = isDisabled;
});
});
return true;
}
});
const contextMenuClickEvent: VxeTableEvents.MenuClick<TaskListenerVO> = ({ menu, row, column }) => {
const $table = tableRef.value;
if ($table) {
switch (menu.code) {
case 'edit':
editEvent(row);
break;
case 'remove':
removeEvent(row);
break;
}
}
};
const initTableData = () => {
tableData.value =
props.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]
};
}) ?? []
};
}) ?? [];
};
onMounted(() => {
initTableData();
});
const typeSelect = [
{ id: '742fdeb7-23b4-416b-ac66-cd4ec8b901b7', label: '类', value: 'class' },
{ id: '660c9c46-8fae-4bae-91a0-0335420019dc', label: '表达式', value: 'expression' },
{ id: '4b8135ab-6bc3-4a0f-80be-22f58bc6c5fd', label: '委托表达式', value: 'delegateExpression' }
];
const eventSelect = [
{ id: 'e6e0a51a-2d5d-4dc4-b847-b5c14f43a6ab', label: '创建', value: 'create' },
{ id: '6da97c1e-15fc-4445-8943-75d09f49778e', label: '指派', value: 'assignment' },
{ id: '6a2cbcec-e026-4f11-bef7-fff0b5c871e2', label: '完成', value: 'complete' },
{ id: '68801972-85f1-482f-bd86-1fad015c26ed', label: '删除', value: 'delete' }
];
</script>
<style scoped lang="scss">
.el-badge {
:deep(.el-badge__content) {
top: 10px;
}
}
</style>