cxc/ruoyi-ui
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

保存、预览流程

Browse Source
This commit is contained in:
cxc
2022-12-20 14:34:38 +08:00
parent 7726fcbf54
commit a0c3e7bd00
21 changed files with 1301 additions and 856 deletions
Download Patch File Download Diff File Expand all files Collapse all files

60
src/plugins/package/designer/ProcessDesigner.vue
View File

@ -259,7 +259,8 @@ import { ElMessage, ElMessageBox } from "element-plus";
const bpmnCanvasRef = ref();
const refFile = ref();
const props = defineProps({
value: String, // xml 字符串
modelValue: String, // xml 字符串
// value: String,
processId: String,
processName: String,
translations: Object, // 自定义的翻译文件
@ -285,7 +286,7 @@ const props = defineProps({
type: String,
default: "flowable",
},
events: {
eventlist: {
type: Array,
default: () => ["element.click"],
},
@ -305,7 +306,8 @@ const props = defineProps({
},
});
const {
value,
// value,
modelValue,
processId,
processName,
translations,
@ -316,7 +318,7 @@ const {
simulation,
keyboard,
prefix,
events,
eventlist,
headerButtonSize,
headerButtonType,
} = toRefs(props);
@ -375,22 +377,21 @@ const additionalModules = computed(() => {
}
// 根据需要的流程类型设置扩展元素构建模块
// if (prefix.value === "bpmn") {
// Modules.push(bpmnModdleExtension);
// }
// // if (prefix.value === "bpmn") {
// // Modules.push(bpmnModdleExtension);
// // }
if (prefix.value === "camunda") {
Modules.push(camundaModdleExtension);
}
// FIXME: Function.prototype.bind.apply(...) is not a constructor
// if (prefix.value === "flowable") {
// Modules.push(flowableModdleExtension);
// }
if (prefix.value === "flowable") {
Modules.push(flowableModdleExtension);
}
if (prefix.value === "activiti") {
Modules.push(activitiModdleExtension);
}
return Modules;
});
console.log(additionalModules.value);
const moddleExtensions = computed(() => {
const Extensions = {};
// 仅使用用户自定义模块
@ -421,7 +422,7 @@ const moddleExtensions = computed(() => {
onMounted(() => {
initBpmnModeler();
createNewDiagram(value.value);
createNewDiagram(modelValue.value);
});
onBeforeUnmount(() => {
if (bpmnModeler) bpmnModeler.destroy();
@ -447,19 +448,14 @@ function initBpmnModeler() {
additionalModules: additionalModules.value,
moddleExtensions: moddleExtensions.value,
});
console.log("init-finished");
emit("init-finished", bpmnModeler);
initModelListeners();
}
function initModelListeners() {
const EventBus = bpmnModeler.get("eventBus");
console.log(EventBus);
// const that = this;
// 注册需要的监听事件, 将. 替换为 - , 避免解析异常
events.value.forEach((event) => {
bpmnModeler.on(event, function (eventObj) {
console.log("element-click", eventObj);
eventlist.value.forEach((event) => {
EventBus.on(event, function (eventObj) {
let eventName = event.replace(/\./g, "-");
let element = eventObj ? eventObj.element : null;
emit(eventName, element, eventObj);
@ -467,18 +463,18 @@ function initModelListeners() {
});
});
//FIXME: 监听图形改变返回xml
// EventBus.on("commandStack.changed", async (event) => {
// try {
// recoverable.value = bpmnModeler.get("commandStack").canRedo();
// revocable.value = bpmnModeler.get("commandStack").canUndo();
// let { xml } = await bpmnModeler.saveXML({ format: true });
// emit("commandStack-changed", event);
// emit("input", xml);
// emit("change", xml);
// } catch (e) {
// console.error(`[Process Designer Warn]: ${e.message || e}`);
// }
// });
EventBus.on("commandStack.changed", async (event) => {
try {
recoverable.value = bpmnModeler.get("commandStack").canRedo();
revocable.value = bpmnModeler.get("commandStack").canUndo();
let { xml } = await bpmnModeler.saveXML({ format: true });
emit("commandStack-changed", event);
emit("input", xml);
emit("change", xml);
} catch (e) {
console.error(`[Process Designer Warn]: ${e.message || e}`);
}
});
// 监听视图缩放变化
bpmnModeler.on("canvas.viewbox.changed", ({ viewbox }) => {
emit("canvas-viewbox-changed", { viewbox });

4
src/plugins/package/designer/plugins/extension-moddle/flowable/index.js
View File

@ -2,8 +2,8 @@
* @author igdianov
* address https://github.com/igdianov/activiti-bpmn-moddle
* */
import flowableExtension from './flowableExtension'
export default {
__init__: ["FlowableModdleExtension"],
FlowableModdleExtension: ["type", () => import("./flowableExtension")],
FlowableModdleExtension: ["type", flowableExtension],
};

0
src/plugins/package/designer/test.vue
View File

8
src/plugins/package/highlight/index.js
View File

@ -1,5 +1,5 @@
// import hljs from "highlight.js/lib/core";
// hljs.registerLanguage("xml", () => import("highlight.js/lib/languages/xml"));
// hljs.registerLanguage("json", () => import("highlight.js/lib/languages/json"));
import hljs from "highlight.js/lib/core";
hljs.registerLanguage("xml", () => import("highlight.js/lib/languages/xml"));
hljs.registerLanguage("json", () => import("highlight.js/lib/languages/json"));
// export default hljs;
export default hljs;

129
src/plugins/package/penal/PropertiesPanel.vue
View File

@ -2,9 +2,11 @@
<div class="process-panel__container" :style="{ width: `${this.width}px` }">
<el-collapse v-model="activeTab">
<el-collapse-item name="base">
<div slot="title" class="panel-tab__title">
<i class="el-icon-info"></i>常规
</div>
<template #title>
<div class="panel-tab__title">
<el-icon><InfoFilled /></el-icon>常规
</div>
</template>
<element-base-info
:id-edit-disabled="idEditDisabled"
:business-object="elementBusinessObject"
@ -16,9 +18,11 @@
v-if="elementType === 'Process'"
key="message"
>
<div slot="title" class="panel-tab__title">
<i class="el-icon-s-comment"></i>消息与信号
</div>
<template #title>
<div class="panel-tab__title">
<el-icon><Comment /></el-icon>消息与信号
</div>
</template>
<signal-and-massage />
</el-collapse-item>
<el-collapse-item
@ -26,18 +30,22 @@
v-if="conditionFormVisible"
key="condition"
>
<div slot="title" class="panel-tab__title">
<i class="el-icon-s-promotion"></i>流转条件
</div>
<template #title>
<div class="panel-tab__title">
<el-icon><Promotion /></el-icon>流转条件
</div>
</template>
<flow-condition
:business-object="elementBusinessObject"
:type="elementType"
/>
</el-collapse-item>
<el-collapse-item name="condition" v-if="formVisible" key="form">
<div slot="title" class="panel-tab__title">
<i class="el-icon-s-order"></i>表单
</div>
<template #title>
<div class="panel-tab__title">
<el-icon><Document /></el-icon>表单
</div>
</template>
<element-form :id="elementId" :type="elementType" />
</el-collapse-item>
<el-collapse-item
@ -45,9 +53,11 @@
v-if="elementType.indexOf('Task') !== -1"
key="task"
>
<div slot="title" class="panel-tab__title">
<i class="el-icon-s-claim"></i>任务
</div>
<template #title
><div class="panel-tab__title">
<el-icon><Checked /></el-icon>任务
</div>
</template>
<element-task :id="elementId" :type="elementType" />
</el-collapse-item>
<el-collapse-item
@ -55,18 +65,22 @@
v-if="elementType.indexOf('Task') !== -1 && elementType !== 'UserTask'"
key="multiInstance"
>
<div slot="title" class="panel-tab__title">
<i class="el-icon-s-help"></i>多实例
</div>
<template #title
><div class="panel-tab__title">
<el-icon><Help /></el-icon>多实例
</div>
</template>
<element-multi-instance
:business-object="elementBusinessObject"
:type="elementType"
/>
</el-collapse-item>
<el-collapse-item name="listeners" key="listeners">
<div slot="title" class="panel-tab__title">
<i class="el-icon-message-solid"></i>执行监听器
</div>
<template #title
><div class="panel-tab__title">
<el-icon><Message /></el-icon>执行监听器
</div>
</template>
<element-listeners :id="elementId" :type="elementType" />
</el-collapse-item>
<el-collapse-item
@ -74,21 +88,27 @@
v-if="elementType === 'UserTask'"
key="taskListeners"
>
<div slot="title" class="panel-tab__title">
<i class="el-icon-message-solid"></i>任务监听器
</div>
<template #title
><div class="panel-tab__title">
<el-icon><Message /></el-icon>任务监听器
</div></template
>
<user-task-listeners :id="elementId" :type="elementType" />
</el-collapse-item>
<el-collapse-item name="extensions" key="extensions">
<div slot="title" class="panel-tab__title">
<i class="el-icon-circle-plus"></i>扩展属性
</div>
<template #title
><div class="panel-tab__title">
<el-icon><CirclePlus /></el-icon>扩展属性
</div></template
>
<element-properties :id="elementId" :type="elementType" />
</el-collapse-item>
<el-collapse-item name="other" key="other">
<div slot="title" class="panel-tab__title">
<i class="el-icon-s-promotion"></i>其他
</div>
<template #title
><div class="panel-tab__title">
<el-icon><Promotion /></el-icon>其他
</div></template
>
<element-other-config :id="elementId" />
</el-collapse-item>
</el-collapse>
@ -128,11 +148,6 @@ const props = defineProps({
const { bpmnModeler, prefix, width, idEditDisabled } = toRefs(props);
provide("prefix", prefix.value);
provide("width", width.value);
const bpmnStore = useBpmnStore();
// const data = reactive({
// timer: undefined,
// });
// const { timer } = toRefs(data);
const activeTab = ref("base");
const elementId = ref("");
@ -143,49 +158,15 @@ const formVisible = ref(false); // 表单配置
let timer;
let bpmnElement;
function initModels() {
// bpmnStore.count = 123;
console.log(bpmnModeler.value);
// 初始化 modeler 以及其他 moddle
if (!bpmnModeler.value) {
// 避免加载时 流程图 并未加载完成
timer = setTimeout(() => initModels(), 10);
return;
}
// console.log(timer);
if (timer) clearTimeout(timer);
// timer = null;
console.log(bpmnModeler.value);
// bpmnStore.bpmnInstances = {
// test: bpmnModeler.value,
// };
// bpmnModeler.value.get = undefined;
// console.log(JSON.stringify(bpmnModeler.value));
// bpmnStore.setBpmnInstances({
// modeler: { _container: bpmnModeler.value._container },
// // modeling: bpmnModeler.value.get("modeling"),
// // moddle: bpmnModeler.value.get("moddle"),
// // eventBus: bpmnModeler.value.get("eventBus"),
// // bpmnFactory: bpmnModeler.value.get("bpmnFactory"),
// // elementFactory: bpmnModeler.value.get("elementFactory"),
// elementRegistry: {
// _elements: bpmnModeler.value.get("elementRegistry")._elements,
// },
// // replace: bpmnModeler.value.get("replace"),
// // selection: bpmnModeler.value.get("selection"),
// });
// bpmnStore.bpmnInstances =
// {
// modeler: bpmnModeler.value,
// modeling: bpmnModeler.value.get("modeling"),
// moddle: bpmnModeler.value.get("moddle"),
// eventBus: bpmnModeler.value.get("eventBus"),
// bpmnFactory: bpmnModeler.value.get("bpmnFactory"),
// elementFactory: bpmnModeler.value.get("elementFactory"),
// elementRegistry: bpmnModeler.value.get("elementRegistry"),
// replace: bpmnModeler.value.get("replace"),
// selection: bpmnModeler.value.get("selection"),
// };
console.log(bpmnStore.bpmnInstances, "167");
window.bpmnInstances = {
modeler: bpmnModeler.value,
modeling: bpmnModeler.value.get("modeling"),
@ -200,7 +181,6 @@ function initModels() {
getActiveElement();
}
function getActiveElement() {
console.log("select first");
// 初始第一个选中元素 bpmn:Process
initFormOnChanged(null);
bpmnModeler.value.on("import.done", (e) => {
@ -208,7 +188,6 @@ function getActiveElement() {
});
// 监听选择事件，修改当前激活的元素以及表单
bpmnModeler.value.on("selection.changed", ({ newSelection }) => {
console.log("selection.changed");
initFormOnChanged(newSelection[0] || null);
});
bpmnModeler.value.on("element.changed", ({ element }) => {
@ -254,9 +233,9 @@ function initFormOnChanged(element) {
formVisible.value =
elementType.value === "UserTask" || elementType.value === "StartEvent";
}
function beforeDestroy() {
onBeforeUnmount(() => {
window.bpmnInstances = null;
}
});
watch(elementId, (val) => {
activeTab.value = "base";

15
src/plugins/package/penal/base/ElementBaseInfo.vue
View File

@ -40,8 +40,7 @@
<script setup name="ElementBaseInfo">
import { nextTick, onBeforeUnmount, toRefs } from "vue";
import useBpmnStore from "@/store/modules/bpmn";
const bpmnStore = useBpmnStore();
let bpmnElement;
const props = defineProps({
businessObject: Object,
type: String,
@ -55,7 +54,7 @@ const data = reactive({
elementBaseInfo: {},
bpmnElement: undefined,
});
const { elementBaseInfo, bpmnElement } = toRefs(data);
const { elementBaseInfo } = toRefs(data);
watch(
businessObject,
(val) => {
@ -69,24 +68,24 @@ watch(
);
function resetBaseInfo() {
bpmnElement.value = window?.bpmnInstances?.bpmnElement;
bpmnElement = window?.bpmnInstances?.bpmnElement;
elementBaseInfo.value = JSON.parse(
JSON.stringify(bpmnElement.value.businessObject)
JSON.stringify(bpmnElement.businessObject)
);
}
function updateBaseInfo(key) {
const attrObj = Object.create(null);
attrObj[key] = elementBaseInfo.value[key];
if (key === "id") {
window.bpmnInstances.modeling.updateProperties(bpmnElement.value, {
window.bpmnInstances.modeling.updateProperties(bpmnElement, {
id: elementBaseInfo.value[key],
di: { id: `${elementBaseInfo.value[key]}_di` },
});
} else {
window.bpmnInstances.modeling.updateProperties(bpmnElement.value, attrObj);
window.bpmnInstances.modeling.updateProperties(bpmnElement, attrObj);
}
}
onBeforeUnmount(() => {
bpmnElement.value = null;
bpmnElement = null;
});
</script>

2
src/plugins/package/penal/form/ElementForm.vue
View File

@ -181,7 +181,7 @@
<el-input v-model="fieldOptionForm.value" clearable />
</el-form-item>
</el-form>
<template slot="footer">
<template #footer>
<el-button size="small" @click="fieldOptionModelVisible = false"
>取 消</el-button
>

13
src/plugins/package/penal/listeners/ElementListeners.vue
View File

@ -11,16 +11,13 @@
/>
<el-table-column label="操作" width="90px">
<template slot-scope="{ row, $index }">
<el-button
size="small"
type="text"
@click="openListenerForm(row, $index)"
<el-button size="small" link @click="openListenerForm(row, $index)"
>编辑</el-button
>
<el-divider direction="vertical" />
<el-button
size="small"
type="text"
link
style="color: #ff4d4f"
@click="removeListener(row, $index)"
>移除</el-button
@ -196,14 +193,14 @@
<template slot-scope="{ row, $index }">
<el-button
size="small"
type="text"
link
@click="openListenerFieldForm(row, $index)"
>编辑</el-button
>
<el-divider direction="vertical" />
<el-button
size="small"
type="text"
link
style="color: #ff4d4f"
@click="removeListenerField(row, $index)"
>移除</el-button
@ -278,7 +275,7 @@
<el-input v-model="listenerFieldForm.expression" clearable />
</el-form-item>
</el-form>
<template slot="footer">
<template #footer>
<el-button size="small" @click="listenerFieldFormModelVisible = false"
>取 消</el-button
>

323
src/plugins/package/penal/listeners/UserTaskListeners.vue
View File

@ -2,35 +2,98 @@
<div class="panel-tab__content">
<el-table :data="elementListenersList" size="small" border>
<el-table-column label="序号" width="50px" type="index" />
<el-table-column label="事件类型" min-width="80px" show-overflow-tooltip :formatter="row => listenerEventTypeObject[row.event]" />
<el-table-column label="事件id" min-width="80px" prop="id" show-overflow-tooltip />
<el-table-column label="监听器类型" min-width="80px" show-overflow-tooltip :formatter="row => listenerTypeObject[row.listenerType]" />
<el-table-column
label="事件类型"
min-width="80px"
show-overflow-tooltip
:formatter="(row) => listenerEventTypeObject[row.event]"
/>
<el-table-column
label="事件id"
min-width="80px"
prop="id"
show-overflow-tooltip
/>
<el-table-column
label="监听器类型"
min-width="80px"
show-overflow-tooltip
:formatter="(row) => listenerTypeObject[row.listenerType]"
/>
<el-table-column label="操作" width="90px">
<template slot-scope="{ row, $index }">
<el-button size="small" type="text" @click="openListenerForm(row, $index)">编辑</el-button>
<el-button size="small" link @click="openListenerForm(row, $index)"
>编辑</el-button
>
<el-divider direction="vertical" />
<el-button size="small" type="text" style="color: #ff4d4f" @click="removeListener(row, $index)">移除</el-button>
<el-button
size="small"
link
style="color: #ff4d4f"
@click="removeListener(row, $index)"
>移除</el-button
>
</template>
</el-table-column>
</el-table>
<div class="element-drawer__button">
<el-button size="small" type="primary" icon="el-icon-plus" @click="openListenerForm(null)">添加监听器</el-button>
<el-button
size="small"
type="primary"
icon="el-icon-plus"
@click="openListenerForm(null)"
>添加监听器</el-button
>
</div>
<!-- 监听器 编辑/创建 部分 -->
<el-drawer v-model="listenerFormModelVisible" title="任务监听器" :size="`${width}px`" append-to-body destroy-on-close>
<el-form size="small" :model="listenerForm" label-width="96px" ref="listenerFormRef" @submit.native.prevent>
<el-form-item label="事件类型" prop="event" :rules="{ required: true, trigger: ['blur', 'change'] }">
<el-drawer
v-model="listenerFormModelVisible"
title="任务监听器"
:size="`${width}px`"
append-to-body
destroy-on-close
>
<el-form
size="small"
:model="listenerForm"
label-width="96px"
ref="listenerFormRef"
@submit.native.prevent
>
<el-form-item
label="事件类型"
prop="event"
:rules="{ required: true, trigger: ['blur', 'change'] }"
>
<el-select v-model="listenerForm.event">
<el-option v-for="i in Object.keys(listenerEventTypeObject)" :key="i" :label="listenerEventTypeObject[i]" :value="i" />
<el-option
v-for="i in Object.keys(listenerEventTypeObject)"
:key="i"
:label="listenerEventTypeObject[i]"
:value="i"
/>
</el-select>
</el-form-item>
<el-form-item label="监听器ID" prop="id" :rules="{ required: true, trigger: ['blur', 'change'] }">
<el-form-item
label="监听器ID"
prop="id"
:rules="{ required: true, trigger: ['blur', 'change'] }"
>
<el-input v-model="listenerForm.id" clearable />
</el-form-item>
<el-form-item label="监听器类型" prop="listenerType" :rules="{ required: true, trigger: ['blur', 'change'] }">
<el-form-item
label="监听器类型"
prop="listenerType"
:rules="{ required: true, trigger: ['blur', 'change'] }"
>
<el-select v-model="listenerForm.listenerType">
<el-option v-for="i in Object.keys(listenerTypeObject)" :key="i" :label="listenerTypeObject[i]" :value="i" />
<el-option
v-for="i in Object.keys(listenerTypeObject)"
:key="i"
:label="listenerTypeObject[i]"
:value="i"
/>
</el-select>
</el-form-item>
<el-form-item
@ -65,7 +128,11 @@
label="脚本格式"
prop="scriptFormat"
key="listener-script-format"
:rules="{ required: true, trigger: ['blur', 'change'], message: '请填写脚本格式' }"
:rules="{
required: true,
trigger: ['blur', 'change'],
message: '请填写脚本格式',
}"
>
<el-input v-model="listenerForm.scriptFormat" clearable />
</el-form-item>
@ -73,7 +140,11 @@
label="脚本类型"
prop="scriptType"
key="listener-script-type"
:rules="{ required: true, trigger: ['blur', 'change'], message: '请选择脚本类型' }"
:rules="{
required: true,
trigger: ['blur', 'change'],
message: '请选择脚本类型',
}"
>
<el-select v-model="listenerForm.scriptType">
<el-option label="内联脚本" value="inlineScript" />
@ -85,7 +156,11 @@
label="脚本内容"
prop="value"
key="listener-script"
:rules="{ required: true, trigger: ['blur', 'change'], message: '请填写脚本内容' }"
:rules="{
required: true,
trigger: ['blur', 'change'],
message: '请填写脚本内容',
}"
>
<el-input v-model="listenerForm.value" clearable />
</el-form-item>
@ -94,14 +169,22 @@
label="资源地址"
prop="resource"
key="listener-resource"
:rules="{ required: true, trigger: ['blur', 'change'], message: '请填写资源地址' }"
:rules="{
required: true,
trigger: ['blur', 'change'],
message: '请填写资源地址',
}"
>
<el-input v-model="listenerForm.resource" clearable />
</el-form-item>
</template>
<template v-if="listenerForm.event === 'timeout'">
<el-form-item label="定时器类型" prop="eventDefinitionType" key="eventDefinitionType">
<el-form-item
label="定时器类型"
prop="eventDefinitionType"
key="eventDefinitionType"
>
<el-select v-model="listenerForm.eventDefinitionType">
<el-option label="日期" value="date" />
<el-option label="持续时长" value="duration" />
@ -110,11 +193,18 @@
</el-select>
</el-form-item>
<el-form-item
v-if="!!listenerForm.eventDefinitionType && listenerForm.eventDefinitionType !== 'null'"
v-if="
!!listenerForm.eventDefinitionType &&
listenerForm.eventDefinitionType !== 'null'
"
label="定时器"
prop="eventTimeDefinitions"
key="eventTimeDefinitions"
:rules="{ required: true, trigger: ['blur', 'change'], message: '请填写定时器配置' }"
:rules="{
required: true,
trigger: ['blur', 'change'],
message: '请填写定时器配置',
}"
>
<el-input v-model="listenerForm.eventTimeDefinitions" clearable />
</el-form-item>
@ -124,37 +214,100 @@
<el-divider />
<p class="listener-filed__title">
<span><i class="el-icon-menu"></i>注入字段：</span>
<el-button size="small" type="primary" @click="openListenerFieldForm(null)">添加字段</el-button>
<el-button
size="small"
type="primary"
@click="openListenerFieldForm(null)"
>添加字段</el-button
>
</p>
<el-table :data="fieldsListOfListener" size="small" max-height="240" border fit style="flex: none">
<el-table
:data="fieldsListOfListener"
size="small"
max-height="240"
border
fit
style="flex: none"
>
<el-table-column label="序号" width="50px" type="index" />
<el-table-column label="字段名称" min-width="100px" prop="name" />
<el-table-column label="字段类型" min-width="80px" show-overflow-tooltip :formatter="row => fieldTypeObject[row.fieldType]" />
<el-table-column label="字段值/表达式" min-width="100px" show-overflow-tooltip :formatter="row => row.string || row.expression" />
<el-table-column
label="字段类型"
min-width="80px"
show-overflow-tooltip
:formatter="(row) => fieldTypeObject[row.fieldType]"
/>
<el-table-column
label="字段值/表达式"
min-width="100px"
show-overflow-tooltip
:formatter="(row) => row.string || row.expression"
/>
<el-table-column label="操作" width="100px">
<template slot-scope="{ row, $index }">
<el-button size="small" type="text" @click="openListenerFieldForm(row, $index)">编辑</el-button>
<el-button
size="small"
link
@click="openListenerFieldForm(row, $index)"
>编辑</el-button
>
<el-divider direction="vertical" />
<el-button size="small" type="text" style="color: #ff4d4f" @click="removeListenerField(row, $index)">移除</el-button>
<el-button
size="small"
link
style="color: #ff4d4f"
@click="removeListenerField(row, $index)"
>移除</el-button
>
</template>
</el-table-column>
</el-table>
<div class="element-drawer__button">
<el-button size="small" @click="listenerFormModelVisible = false">取 消</el-button>
<el-button size="small" type="primary" @click="saveListenerConfig">保 存</el-button>
<el-button size="small" @click="listenerFormModelVisible = false"
>取 消</el-button
>
<el-button size="small" type="primary" @click="saveListenerConfig"
>保 存</el-button
>
</div>
</el-drawer>
<!-- 注入西段 编辑/创建 部分 -->
<el-dialog title="字段配置" v-model="listenerFieldFormModelVisible" width="600px" append-to-body destroy-on-close>
<el-form :model="listenerFieldForm" size="small" label-width="96px" ref="listenerFieldFormRef" style="height: 136px" @submit.native.prevent>
<el-form-item label="字段名称：" prop="name" :rules="{ required: true, trigger: ['blur', 'change'] }">
<el-dialog
title="字段配置"
v-model="listenerFieldFormModelVisible"
width="600px"
append-to-body
destroy-on-close
>
<el-form
:model="listenerFieldForm"
size="small"
label-width="96px"
ref="listenerFieldFormRef"
style="height: 136px"
@submit.native.prevent
>
<el-form-item
label="字段名称："
prop="name"
:rules="{ required: true, trigger: ['blur', 'change'] }"
>
<el-input v-model="listenerFieldForm.name" clearable />
</el-form-item>
<el-form-item label="字段类型：" prop="fieldType" :rules="{ required: true, trigger: ['blur', 'change'] }">
<el-form-item
label="字段类型："
prop="fieldType"
:rules="{ required: true, trigger: ['blur', 'change'] }"
>
<el-select v-model="listenerFieldForm.fieldType">
<el-option v-for="i in Object.keys(fieldTypeObject)" :key="i" :label="fieldTypeObject[i]" :value="i" />
<el-option
v-for="i in Object.keys(fieldTypeObject)"
:key="i"
:label="fieldTypeObject[i]"
:value="i"
/>
</el-select>
</el-form-item>
<el-form-item
@ -176,26 +329,37 @@
<el-input v-model="listenerFieldForm.expression" clearable />
</el-form-item>
</el-form>
<template slot="footer">
<el-button size="small" @click="listenerFieldFormModelVisible = false">取 消</el-button>
<el-button size="small" type="primary" @click="saveListenerFiled">确 定</el-button>
<template #footer>
<el-button size="small" @click="listenerFieldFormModelVisible = false"
>取 消</el-button
>
<el-button size="small" type="primary" @click="saveListenerFiled"
>确 定</el-button
>
</template>
</el-dialog>
</div>
</template>
<script>
import { ElMessageBox } from "element-plus";
import { createListenerObject, updateElementExtensions } from "../../utils";
import { initListenerForm, initListenerType, eventType, listenerType, fieldType } from "./utilSelf";
import {
initListenerForm,
initListenerType,
eventType,
listenerType,
fieldType,
} from "./utilSelf";
export default {
name: "UserTaskListeners",
props: {
id: String,
type: String
type: String,
},
inject: {
prefix: "prefix",
width: "width"
width: "width",
},
data() {
return {
@ -209,7 +373,7 @@ export default {
listenerFieldFormModelVisible: false, // 监听器 注入字段表单弹窗 显示状态
editingListenerIndex: -1, // 监听器所在下标，-1 为新增
editingListenerFieldIndex: -1, // 字段所在下标，-1 为新增
listenerFieldForm: {} // 监听器 注入字段 详情表单
listenerFieldForm: {}, // 监听器 注入字段 详情表单
};
},
watch: {
@ -217,15 +381,20 @@ export default {
immediate: true,
handler(val) {
val && val.length && this.$nextTick(() => this.resetListenersList());
}
}
},
},
},
methods: {
resetListenersList() {
this.bpmnElement = window.bpmnInstances.bpmnElement;
this.otherExtensionList = [];
this.bpmnElementListeners = this.bpmnElement.businessObject?.extensionElements?.values?.filter(ex => ex.$type === `${this.prefix}:TaskListener`) ?? [];
this.elementListenersList = this.bpmnElementListeners.map(listener => initListenerType(listener));
this.bpmnElementListeners =
this.bpmnElement.businessObject?.extensionElements?.values?.filter(
(ex) => ex.$type === `${this.prefix}:TaskListener`
) ?? [];
this.elementListenersList = this.bpmnElementListeners.map((listener) =>
initListenerType(listener)
);
},
openListenerForm(listener, index) {
if (listener) {
@ -236,7 +405,10 @@ export default {
this.editingListenerIndex = -1; // 标记为新增
}
if (listener && listener.fields) {
this.fieldsListOfListener = listener.fields.map(field => ({ ...field, fieldType: field.string ? "string" : "expression" }));
this.fieldsListOfListener = listener.fields.map((field) => ({
...field,
fieldType: field.string ? "string" : "expression",
}));
} else {
this.fieldsListOfListener = [];
this.$set(this.listenerForm, "fields", []);
@ -244,19 +416,23 @@ export default {
// 打开侧边栏并清楚验证状态
this.listenerFormModelVisible = true;
this.$nextTick(() => {
if (this.$refs["listenerFormRef"]) this.$refs["listenerFormRef"].clearValidate();
if (this.$refs["listenerFormRef"])
this.$refs["listenerFormRef"].clearValidate();
});
},
// 移除监听器
removeListener(listener, index) {
this.$confirm("确认移除该监听器吗？", "提示", {
ElMessageBox.confirm("确认移除该监听器吗？", "提示", {
confirmButtonText: "确 认",
cancelButtonText: "取 消"
cancelButtonText: "取 消",
})
.then(() => {
this.bpmnElementListeners.splice(index, 1);
this.elementListenersList.splice(index, 1);
updateElementExtensions(this.bpmnElement, this.otherExtensionList.concat(this.bpmnElementListeners));
updateElementExtensions(
this.bpmnElement,
this.otherExtensionList.concat(this.bpmnElementListeners)
);
})
.catch(() => console.info("操作取消"));
},
@ -264,17 +440,35 @@ export default {
async saveListenerConfig() {
let validateStatus = await this.$refs["listenerFormRef"].validate();
if (!validateStatus) return; // 验证不通过直接返回
const listenerObject = createListenerObject(this.listenerForm, true, this.prefix);
const listenerObject = createListenerObject(
this.listenerForm,
true,
this.prefix
);
if (this.editingListenerIndex === -1) {
this.bpmnElementListeners.push(listenerObject);
this.elementListenersList.push(this.listenerForm);
} else {
this.bpmnElementListeners.splice(this.editingListenerIndex, 1, listenerObject);
this.elementListenersList.splice(this.editingListenerIndex, 1, this.listenerForm);
this.bpmnElementListeners.splice(
this.editingListenerIndex,
1,
listenerObject
);
this.elementListenersList.splice(
this.editingListenerIndex,
1,
this.listenerForm
);
}
// 保存其他配置
this.otherExtensionList = this.bpmnElement.businessObject?.extensionElements?.values?.filter(ex => ex.$type !== `${this.prefix}:TaskListener`) ?? [];
updateElementExtensions(this.bpmnElement, this.otherExtensionList.concat(this.bpmnElementListeners));
this.otherExtensionList =
this.bpmnElement.businessObject?.extensionElements?.values?.filter(
(ex) => ex.$type !== `${this.prefix}:TaskListener`
) ?? [];
updateElementExtensions(
this.bpmnElement,
this.otherExtensionList.concat(this.bpmnElementListeners)
);
// 4. 隐藏侧边栏
this.listenerFormModelVisible = false;
this.listenerForm = {};
@ -285,7 +479,8 @@ export default {
this.editingListenerFieldIndex = field ? index : -1;
this.listenerFieldFormModelVisible = true;
this.$nextTick(() => {
if (this.$refs["listenerFieldFormRef"]) this.$refs["listenerFieldFormRef"].clearValidate();
if (this.$refs["listenerFieldFormRef"])
this.$refs["listenerFieldFormRef"].clearValidate();
});
},
// 保存监听器注入字段
@ -296,8 +491,16 @@ export default {
this.fieldsListOfListener.push(this.listenerFieldForm);
this.listenerForm.fields.push(this.listenerFieldForm);
} else {
this.fieldsListOfListener.splice(this.editingListenerFieldIndex, 1, this.listenerFieldForm);
this.listenerForm.fields.splice(this.editingListenerFieldIndex, 1, this.listenerFieldForm);
this.fieldsListOfListener.splice(
this.editingListenerFieldIndex,
1,
this.listenerFieldForm
);
this.listenerForm.fields.splice(
this.editingListenerFieldIndex,
1,
this.listenerFieldForm
);
}
this.listenerFieldFormModelVisible = false;
this.$nextTick(() => (this.listenerFieldForm = {}));
@ -306,14 +509,14 @@ export default {
removeListenerField(field, index) {
this.$confirm("确认移除该字段吗？", "提示", {
confirmButtonText: "确 认",
cancelButtonText: "取 消"
cancelButtonText: "取 消",
})
.then(() => {
this.fieldsListOfListener.splice(index, 1);
this.listenerForm.fields.splice(index, 1);
})
.catch(() => console.info("操作取消"));
}
}
},
},
};
</script>

39
src/plugins/package/penal/listeners/template.js
View File

@ -7,9 +7,9 @@ export const template = isTaskListener => {
<el-table-column label="监听器类型" min-width="100px" show-overflow-tooltip :formatter="row => listenerTypeObject[row.listenerType]" />
<el-table-column label="操作" width="90px">
<template slot-scope="{ row, $index }">
<el-button size="small" type="text" @click="openListenerForm(row, $index)">编辑</el-button>
<el-button size="small" link @click="openListenerForm(row, $index)">编辑</el-button>
<el-divider direction="vertical" />
<el-button size="small" type="text" style="color: #ff4d4f" @click="removeListener(row, $index)">移除</el-button>
<el-button size="small" link style="color: #ff4d4f" @click="removeListener(row, $index)">移除</el-button>
</template>
</el-table-column>
</el-table>
@ -97,21 +97,20 @@ export const template = isTaskListener => {
<el-input v-model="listenerForm.resource" clearable />
</el-form-item>
</template>
${
isTaskListener
? "<el-form-item label='定时器类型' prop='eventDefinitionType' key='eventDefinitionType'>" +
"<el-select v-model='listenerForm.eventDefinitionType'>" +
"<el-option label='日期' value='date' />" +
"<el-option label='持续时长' value='duration' />" +
"<el-option label='循环' value='cycle' />" +
"<el-option label='无' value='' />" +
"</el-select>" +
"</el-form-item>" +
"<el-form-item v-if='!!listenerForm.eventDefinitionType' label='定时器' prop='eventDefinitions' key='eventDefinitions'>" +
"<el-input v-model='listenerForm.eventDefinitions' clearable />" +
"</el-form-item>"
: ""
}
${isTaskListener
? "<el-form-item label='定时器类型' prop='eventDefinitionType' key='eventDefinitionType'>" +
"<el-select v-model='listenerForm.eventDefinitionType'>" +
"<el-option label='日期' value='date' />" +
"<el-option label='持续时长' value='duration' />" +
"<el-option label='循环' value='cycle' />" +
"<el-option label='无' value='' />" +
"</el-select>" +
"</el-form-item>" +
"<el-form-item v-if='!!listenerForm.eventDefinitionType' label='定时器' prop='eventDefinitions' key='eventDefinitions'>" +
"<el-input v-model='listenerForm.eventDefinitions' clearable />" +
"</el-form-item>"
: ""
}
</el-form>
<el-divider />
<p class="listener-filed__title">
@ -125,9 +124,9 @@ export const template = isTaskListener => {
<el-table-column label="字段值/表达式" min-width="100px" show-overflow-tooltip :formatter="row => row.string || row.expression" />
<el-table-column label="操作" width="100px">
<template slot-scope="{ row, $index }">
<el-button size="small" type="text" @click="openListenerFieldForm(row, $index)">编辑</el-button>
<el-button size="small" link @click="openListenerFieldForm(row, $index)">编辑</el-button>
<el-divider direction="vertical" />
<el-button size="small" type="text" style="color: #ff4d4f" @click="removeListenerField(row, $index)">移除</el-button>
<el-button size="small" link style="color: #ff4d4f" @click="removeListenerField(row, $index)">移除</el-button>
</template>
</el-table-column>
</el-table>
@ -168,7 +167,7 @@ export const template = isTaskListener => {
<el-input v-model="listenerFieldForm.expression" clearable />
</el-form-item>
</el-form>
<template slot="footer">
<template #footer>
<el-button size="small" @click="listenerFieldFormModelVisible = false">取 消</el-button>
<el-button size="small" type="primary" @click="saveListenerFiled">确 定</el-button>
</template>

73
src/plugins/package/penal/other/ElementOtherConfig.vue
View File

@ -16,44 +16,47 @@
</div>
</div>
</template>
<script setup name="ElementOtherConfig">
import { toRefs } from "vue";
<script>
export default {
name: "ElementOtherConfig",
props: {
id: String
},
data() {
return {
documentation: ""
};
},
watch: {
id: {
immediate: true,
handler: function(id) {
if (id && id.length) {
this.$nextTick(() => {
const documentations = window.bpmnInstances.bpmnElement.businessObject?.documentation;
this.documentation = documentations && documentations.length ? documentations[0].text : "";
});
} else {
this.documentation = "";
}
}
}
},
methods: {
updateDocumentation() {
(this.bpmnElement && this.bpmnElement.id === this.id) || (this.bpmnElement = window.bpmnInstances.elementRegistry.get(this.id));
const documentation = window.bpmnInstances.bpmnFactory.create("bpmn:Documentation", { text: this.documentation });
window.bpmnInstances.modeling.updateProperties(this.bpmnElement, {
documentation: [documentation]
const props = defineProps({
id: String,
});
const { id } = toRefs(props);
let bpmnElement;
const documentation = ref("");
watch(
id,
(val) => {
if (id && id.length) {
nextTick(() => {
const documentations =
window.bpmnInstances.bpmnElement.businessObject?.documentation;
documentation.value =
documentations && documentations.length ? documentations[0].text : "";
});
} else {
documentation.value = "";
}
},
beforeDestroy() {
this.bpmnElement = null;
{
immediate: true,
}
};
);
function updateDocumentation() {
(bpmnElement && bpmnElement.id === this.id) ||
(bpmnElement = window.bpmnInstances.elementRegistry.get(this.id));
const documentation = window.bpmnInstances.bpmnFactory.create(
"bpmn:Documentation",
{ text: this.documentation }
);
window.bpmnInstances.modeling.updateProperties(bpmnElement, {
documentation: [documentation],
});
}
onBeforeUnmount(() => {
bpmnElement = null;
});
</script>

283
src/plugins/package/penal/properties/ElementProperties.vue
View File

@ -1,23 +1,65 @@
<template>
<div class="panel-tab__content">
<el-table :data="elementPropertyList" size="small" max-height="240" border fit>
<el-table
:data="elementPropertyList"
size="small"
max-height="240"
border
fit
>
<el-table-column label="序号" width="50px" type="index" />
<el-table-column label="属性名" prop="name" min-width="100px" show-overflow-tooltip />
<el-table-column label="属性值" prop="value" min-width="100px" show-overflow-tooltip />
<el-table-column
label="属性名"
prop="name"
min-width="100px"
show-overflow-tooltip
/>
<el-table-column
label="属性值"
prop="value"
min-width="100px"
show-overflow-tooltip
/>
<el-table-column label="操作" width="90px">
<template slot-scope="{ row, $index }">
<el-button size="small" type="text" @click="openAttributesForm(row, $index)">编辑</el-button>
<el-button size="small" link @click="openAttributesForm(row, $index)"
>编辑</el-button
>
<el-divider direction="vertical" />
<el-button size="small" type="text" style="color: #ff4d4f" @click="removeAttributes(row, $index)">移除</el-button>
<el-button
size="small"
link
style="color: #ff4d4f"
@click="removeAttributes(row, $index)"
>移除</el-button
>
</template>
</el-table-column>
</el-table>
<div class="element-drawer__button">
<el-button size="small" type="primary" icon="el-icon-plus" @click="openAttributesForm(null, -1)">添加属性</el-button>
<el-button
size="small"
type="primary"
icon="el-icon-plus"
@click="openAttributesForm(null, -1)"
>添加属性</el-button
>
</div>
<el-dialog v-model="propertyFormModelVisible" title="属性配置" width="600px" append-to-body destroy-on-close>
<el-form :model="propertyForm" label-width="80px" size="small" ref="attributeFormRef" @submit.native.prevent>
<el-dialog
v-model="propertyFormModelVisible"
title="属性配置"
width="600px"
append-to-body
destroy-on-close
>
<el-form
:model="propertyForm"
label-width="80px"
size="small"
ref="attributeFormRef"
@submit.native.prevent
>
<el-form-item label="属性名：" prop="name">
<el-input v-model="propertyForm.name" clearable />
</el-form-item>
@ -25,110 +67,139 @@
<el-input v-model="propertyForm.value" clearable />
</el-form-item>
</el-form>
<template slot="footer">
<el-button size="small" @click="propertyFormModelVisible = false">取 消</el-button>
<el-button size="small" type="primary" @click="saveAttribute">确 定</el-button>
<template #footer>
<el-button size="small" @click="propertyFormModelVisible = false"
>取 消</el-button
>
<el-button size="small" type="primary" @click="saveAttribute"
>确 定</el-button
>
</template>
</el-dialog>
</div>
</template>
<script setup name="ElementProperties">
import { ElMessageBox } from "element-plus";
import { toRefs } from "vue";
<script>
export default {
name: "ElementProperties",
props: {
id: String,
type: String
},
inject: {
prefix: "prefix",
width: "width"
},
data() {
return {
elementPropertyList: [],
propertyForm: {},
editingPropertyIndex: -1,
propertyFormModelVisible: false
};
},
watch: {
id: {
immediate: true,
handler(val) {
val && val.length && this.resetAttributesList();
}
}
},
methods: {
resetAttributesList() {
this.bpmnElement = window.bpmnInstances.bpmnElement;
this.otherExtensionList = []; // 其他扩展配置
this.bpmnElementProperties =
this.bpmnElement.businessObject?.extensionElements?.values?.filter(ex => {
if (ex.$type !== `${this.prefix}:Properties`) {
this.otherExtensionList.push(ex);
}
return ex.$type === `${this.prefix}:Properties`;
}) ?? [];
const props = defineProps({
id: String,
type: String,
});
const { id, type } = toRefs(props);
const prefix = inject("prefix");
const width = inject("width");
const data = reactive({
propertyForm: {},
});
const { propertyForm } = toRefs(data);
// 保存所有的 扩展属性字段
this.bpmnElementPropertyList = this.bpmnElementProperties.reduce((pre, current) => pre.concat(current.values), []);
// 复制 显示
this.elementPropertyList = JSON.parse(JSON.stringify(this.bpmnElementPropertyList ?? []));
},
openAttributesForm(attr, index) {
this.editingPropertyIndex = index;
this.propertyForm = index === -1 ? {} : JSON.parse(JSON.stringify(attr));
this.propertyFormModelVisible = true;
this.$nextTick(() => {
if (this.$refs["attributeFormRef"]) this.$refs["attributeFormRef"].clearValidate();
});
},
removeAttributes(attr, index) {
this.$confirm("确认移除该属性吗？", "提示", {
confirmButtonText: "确 认",
cancelButtonText: "取 消"
})
.then(() => {
this.elementPropertyList.splice(index, 1);
this.bpmnElementPropertyList.splice(index, 1);
// 新建一个属性字段的保存列表
const propertiesObject = window.bpmnInstances.moddle.create(`${this.prefix}:Properties`, {
values: this.bpmnElementPropertyList
});
this.updateElementExtensions(propertiesObject);
this.resetAttributesList();
})
.catch(() => console.info("操作取消"));
},
saveAttribute() {
const { name, value } = this.propertyForm;
if (this.editingPropertyIndex !== -1) {
window.bpmnInstances.modeling.updateModdleProperties(this.bpmnElement, this.bpmnElementPropertyList[this.editingPropertyIndex], {
name,
value
});
} else {
// 新建属性字段
const newPropertyObject = window.bpmnInstances.moddle.create(`${this.prefix}:Property`, { name, value });
// 新建一个属性字段的保存列表
const propertiesObject = window.bpmnInstances.moddle.create(`${this.prefix}:Properties`, {
values: this.bpmnElementPropertyList.concat([newPropertyObject])
});
this.updateElementExtensions(propertiesObject);
let bpmnElement;
let otherExtensionList;
let bpmnElementPropertyList;
let bpmnElementProperties;
const elementPropertyList = ref([]);
const editingPropertyIndex = ref(-1);
const propertyFormModelVisible = ref(false);
watch(
id,
(val) => {
val && val.length && resetAttributesList();
},
{ immediate: true }
);
function resetAttributesList() {
bpmnElement = window.bpmnInstances.bpmnElement;
otherExtensionList = []; // 其他扩展配置
bpmnElementProperties =
bpmnElement.businessObject?.extensionElements?.values?.filter((ex) => {
if (ex.$type !== `${prefix}:Properties`) {
otherExtensionList.push(ex);
}
this.propertyFormModelVisible = false;
this.resetAttributesList();
},
updateElementExtensions(properties) {
const extensions = window.bpmnInstances.moddle.create("bpmn:ExtensionElements", {
values: this.otherExtensionList.concat([properties])
});
window.bpmnInstances.modeling.updateProperties(this.bpmnElement, {
extensionElements: extensions
});
}
return ex.$type === `${prefix}:Properties`;
}) ?? [];
// 保存所有的 扩展属性字段
bpmnElementPropertyList = bpmnElementProperties.reduce(
(pre, current) => pre.concat(current.values),
[]
);
// 复制 显示
elementPropertyList.value = JSON.parse(
JSON.stringify(bpmnElementPropertyList ?? [])
);
}
const attributeFormRef = ref();
function openAttributesForm(attr, index) {
editingPropertyIndex.value = index;
propertyForm.value = index === -1 ? {} : JSON.parse(JSON.stringify(attr));
propertyFormModelVisible.value = true;
nextTick(() => {
if (attributeFormRef.value) attributeFormRef.value.clearValidate();
});
}
function removeAttributes(attr, index) {
ElMessageBox.confirm("确认移除该属性吗？", "提示", {
confirmButtonText: "确 认",
cancelButtonText: "取 消",
})
.then(() => {
elementPropertyList.value.splice(index, 1);
bpmnElementPropertyList.splice(index, 1);
// 新建一个属性字段的保存列表
const propertiesObject = window.bpmnInstances.moddle.create(
`${prefix}:Properties`,
{
values: bpmnElementPropertyList,
}
);
updateElementExtensions(propertiesObject);
resetAttributesList();
})
.catch(() => console.info("操作取消"));
}
function saveAttribute() {
const { name, value } = propertyForm.value;
if (editingPropertyIndex.value !== -1) {
window.bpmnInstances.modeling.updateModdleProperties(
bpmnElement,
bpmnElementPropertyList[editingPropertyIndex.value],
{
name,
value,
}
);
} else {
// 新建属性字段
const newPropertyObject = window.bpmnInstances.moddle.create(
`${prefix}:Property`,
{ name, value }
);
// 新建一个属性字段的保存列表
const propertiesObject = window.bpmnInstances.moddle.create(
`${prefix}:Properties`,
{
values: bpmnElementPropertyList.concat([newPropertyObject]),
}
);
updateElementExtensions(propertiesObject);
}
};
propertyFormModelVisible.value = false;
resetAttributesList();
}
function updateElementExtensions(properties) {
const extensions = window.bpmnInstances.moddle.create(
"bpmn:ExtensionElements",
{
values: otherExtensionList.concat([properties]),
}
);
window.bpmnInstances.modeling.updateProperties(bpmnElement, {
extensionElements: extensions,
});
}
</script>

152
src/plugins/package/penal/signal-message/SignalAndMessage.vue
View File

@ -8,7 +8,7 @@
<el-button
size="small"
type="primary"
icon="el-icon-plus"
icon="plus"
@click="openModel('message')"
>创建新消息</el-button
>
@ -39,7 +39,7 @@
<el-button
size="small"
type="primary"
icon="el-icon-plus"
icon="plus"
@click="openModel('signal')"
>创建新信号</el-button
>
@ -81,7 +81,7 @@
<el-input v-model="modelObjectForm.name" clearable />
</el-form-item>
</el-form>
<template slot="footer">
<template #footer>
<el-button size="small" @click="modelVisible = false">取 消</el-button>
<el-button size="small" type="primary" @click="addNewObject"
>保 存</el-button
@ -90,77 +90,77 @@
</el-dialog>
</div>
</template>
<script>
export default {
name: "SignalAndMassage",
data() {
return {
signalList: [],
messageList: [],
modelVisible: false,
modelType: "",
modelObjectForm: {},
};
},
computed: {
modelConfig() {
if (this.modelType === "message") {
return { title: "创建消息", idLabel: "消息ID", nameLabel: "消息名称" };
} else {
return { title: "创建信号", idLabel: "信号ID", nameLabel: "信号名称" };
}
},
},
mounted() {
this.initDataList();
},
methods: {
initDataList() {
this.rootElements =
window.bpmnInstances.modeler.getDefinitions().rootElements;
this.messageIdMap = {};
this.signalIdMap = {};
this.messageList = [];
this.signalList = [];
this.rootElements.forEach((el) => {
if (el.$type === "bpmn:Message") {
this.messageIdMap[el.id] = true;
this.messageList.push({ ...el });
}
if (el.$type === "bpmn:Signal") {
this.signalIdMap[el.id] = true;
this.signalList.push({ ...el });
}
});
},
openModel(type) {
this.modelType = type;
this.modelObjectForm = {};
this.modelVisible = true;
},
addNewObject() {
if (this.modelType === "message") {
if (this.messageIdMap[this.modelObjectForm.id]) {
return ElMessage.error("该消息已存在，请修改id后重新保存");
}
const messageRef = window.bpmnInstances.moddle.create(
"bpmn:Message",
this.modelObjectForm
);
this.rootElements.push(messageRef);
} else {
if (this.signalIdMap[this.modelObjectForm.id]) {
return this.$message.error("该信号已存在，请修改id后重新保存");
}
const signalRef = window.bpmnInstances.moddle.create(
"bpmn:Signal",
this.modelObjectForm
);
this.rootElements.push(signalRef);
}
this.modelVisible = false;
this.initDataList();
},
},
};
<script setup name="SignalAndMassage">
import { ElMessage } from "element-plus";
import { ref } from "vue";
let rootElements;
let messageIdMap;
let signalIdMap;
const signalList = ref([]);
const messageList = ref([]);
const modelVisible = ref(false);
const modelType = ref("");
const data = reactive({
modelObjectForm: {},
});
const { modelObjectForm } = toRefs(data);
const modelConfig = computed(() => {
if (modelType.value === "message") {
return { title: "创建消息", idLabel: "消息ID", nameLabel: "消息名称" };
} else {
return { title: "创建信号", idLabel: "信号ID", nameLabel: "信号名称" };
}
});
function initDataList() {
rootElements = window.bpmnInstances.modeler.getDefinitions().rootElements;
messageIdMap = {};
signalIdMap = {};
messageList.value = [];
signalList.value = [];
rootElements.forEach((el) => {
if (el.$type === "bpmn:Message") {
messageIdMap[el.id] = true;
messageList.value.push({ ...el });
}
if (el.$type === "bpmn:Signal") {
signalIdMap[el.id] = true;
signalList.value.push({ ...el });
}
});
}
function openModel(type) {
modelType.value = type;
modelObjectForm.value = {};
modelVisible.value = true;
}
function addNewObject() {
if (modelType.value === "message") {
if (messageIdMap[modelObjectForm.value.id]) {
return ElMessage.error("该消息已存在，请修改id后重新保存");
}
const messageRef = window.bpmnInstances.moddle.create(
"bpmn:Message",
modelObjectForm.value
);
rootElements.push(messageRef);
} else {
if (signalIdMap[modelObjectForm.value.id]) {
return ElMessage.error("该信号已存在，请修改id后重新保存");
}
const signalRef = window.bpmnInstances.moddle.create(
"bpmn:Signal",
modelObjectForm.value
);
rootElements.push(signalRef);
}
modelVisible.value = false;
initDataList();
}
onMounted(() => {
initDataList();
});
</script>

2
src/plugins/package/penal/task/task-components/ReceiveTask.vue
View File

@ -17,7 +17,7 @@
<el-input v-model="newMessageForm.name" clearable />
</el-form-item>
</el-form>
<template slot="footer">
<template #footer>
<el-button size="small" type="primary" @click="createNewMessage">确 认</el-button>
</template>
</el-dialog>

5
src/plugins/package/theme/process-panel.scss
View File

@ -8,6 +8,8 @@
overflow-y: scroll;
}
.panel-tab__title {
display: flex;
align-items: center;
font-weight: 600;
padding: 0 8px;
font-size: 1.1em;
@ -93,7 +95,7 @@
.element-drawer__button > .el-button {
width: 100%;
}
.el-collapse-item__content {
padding-bottom: 0;
}
@ -107,4 +109,3 @@
}
}
}