mirror of
https://gitee.com/yudaocode/yudao-ui-admin-vben.git
synced 2025-12-30 10:32:25 +00:00
feat:【antd】【bpm】bpmn 设计器:增加消息与信号的编辑、删除功能,来自:c568d45180
This commit is contained in:
@@ -5,6 +5,7 @@ import { IconifyIcon } from '@vben/icons';
|
|||||||
|
|
||||||
import {
|
import {
|
||||||
Button,
|
Button,
|
||||||
|
Divider,
|
||||||
Form,
|
Form,
|
||||||
FormItem,
|
FormItem,
|
||||||
Input,
|
Input,
|
||||||
@@ -23,10 +24,20 @@ const modelObjectForm = ref<any>({});
|
|||||||
const rootElements = ref();
|
const rootElements = ref();
|
||||||
const messageIdMap = ref();
|
const messageIdMap = ref();
|
||||||
const signalIdMap = ref();
|
const signalIdMap = ref();
|
||||||
|
const editingIndex = ref(-1); // 正在编辑的索引,-1 表示新建
|
||||||
const modelConfig = computed(() => {
|
const modelConfig = computed(() => {
|
||||||
|
const isEdit = editingIndex.value !== -1;
|
||||||
return modelType.value === 'message'
|
return modelType.value === 'message'
|
||||||
? { title: '创建消息', idLabel: '消息ID', nameLabel: '消息名称' }
|
? {
|
||||||
: { title: '创建信号', idLabel: '信号ID', nameLabel: '信号名称' };
|
title: isEdit ? '编辑消息' : '创建消息',
|
||||||
|
idLabel: '消息ID',
|
||||||
|
nameLabel: '消息名称',
|
||||||
|
}
|
||||||
|
: {
|
||||||
|
title: isEdit ? '编辑信号' : '创建信号',
|
||||||
|
idLabel: '信号ID',
|
||||||
|
nameLabel: '信号名称',
|
||||||
|
};
|
||||||
});
|
});
|
||||||
const bpmnInstances = () => (window as any)?.bpmnInstances;
|
const bpmnInstances = () => (window as any)?.bpmnInstances;
|
||||||
|
|
||||||
@@ -48,35 +59,101 @@ const initDataList = () => {
|
|||||||
}
|
}
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
const openModel = (type: any) => {
|
const openModel = (type: any) => {
|
||||||
modelType.value = type;
|
modelType.value = type;
|
||||||
|
editingIndex.value = -1;
|
||||||
modelObjectForm.value = {};
|
modelObjectForm.value = {};
|
||||||
dialogVisible.value = true;
|
dialogVisible.value = true;
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const openEditModel = (type: any, row: any, index: number) => {
|
||||||
|
modelType.value = type;
|
||||||
|
editingIndex.value = index;
|
||||||
|
modelObjectForm.value = { ...row };
|
||||||
|
dialogVisible.value = true;
|
||||||
|
};
|
||||||
|
|
||||||
const addNewObject = () => {
|
const addNewObject = () => {
|
||||||
if (modelType.value === 'message') {
|
if (modelType.value === 'message') {
|
||||||
if (messageIdMap.value[modelObjectForm.value.id]) {
|
// 编辑模式
|
||||||
message.error('该消息已存在,请修改id后重新保存');
|
if (editingIndex.value === -1) {
|
||||||
|
// 新建模式
|
||||||
|
if (messageIdMap.value[modelObjectForm.value.id]) {
|
||||||
|
message.error('该消息已存在,请修改id后重新保存');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
const messageRef = bpmnInstances().moddle.create(
|
||||||
|
'bpmn:Message',
|
||||||
|
modelObjectForm.value,
|
||||||
|
);
|
||||||
|
rootElements.value.push(messageRef);
|
||||||
|
} else {
|
||||||
|
const targetMessage = messageList.value[editingIndex.value];
|
||||||
|
// 查找 rootElements 中的原始对象
|
||||||
|
const rootMessage = rootElements.value.find(
|
||||||
|
(el: any) => el.$type === 'bpmn:Message' && el.id === targetMessage.id,
|
||||||
|
);
|
||||||
|
if (rootMessage) {
|
||||||
|
rootMessage.id = modelObjectForm.value.id;
|
||||||
|
rootMessage.name = modelObjectForm.value.name;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
const messageRef = bpmnInstances().moddle.create(
|
|
||||||
'bpmn:Message',
|
|
||||||
modelObjectForm.value,
|
|
||||||
);
|
|
||||||
rootElements.value.push(messageRef);
|
|
||||||
} else {
|
} else {
|
||||||
if (signalIdMap.value[modelObjectForm.value.id]) {
|
// 编辑模式
|
||||||
message.error('该信号已存在,请修改id后重新保存');
|
if (editingIndex.value === -1) {
|
||||||
|
// 新建模式
|
||||||
|
if (signalIdMap.value[modelObjectForm.value.id]) {
|
||||||
|
message.error('该信号已存在,请修改id后重新保存');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
const signalRef = bpmnInstances().moddle.create(
|
||||||
|
'bpmn:Signal',
|
||||||
|
modelObjectForm.value,
|
||||||
|
);
|
||||||
|
rootElements.value.push(signalRef);
|
||||||
|
} else {
|
||||||
|
const targetSignal = signalList.value[editingIndex.value];
|
||||||
|
// 查找 rootElements 中的原始对象
|
||||||
|
const rootSignal = rootElements.value.find(
|
||||||
|
(el: any) => el.$type === 'bpmn:Signal' && el.id === targetSignal.id,
|
||||||
|
);
|
||||||
|
if (rootSignal) {
|
||||||
|
rootSignal.id = modelObjectForm.value.id;
|
||||||
|
rootSignal.name = modelObjectForm.value.name;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
const signalRef = bpmnInstances().moddle.create(
|
|
||||||
'bpmn:Signal',
|
|
||||||
modelObjectForm.value,
|
|
||||||
);
|
|
||||||
rootElements.value.push(signalRef);
|
|
||||||
}
|
}
|
||||||
dialogVisible.value = false;
|
dialogVisible.value = false;
|
||||||
initDataList();
|
initDataList();
|
||||||
};
|
};
|
||||||
|
|
||||||
|
// 补充"编辑"、"移除"功能。相关 issue:https://github.com/YunaiV/yudao-cloud/issues/270
|
||||||
|
const removeObject = (type: any, row: any) => {
|
||||||
|
Modal.confirm({
|
||||||
|
title: '提示',
|
||||||
|
content: `确认移除该${type === 'message' ? '消息' : '信号'}吗?`,
|
||||||
|
okText: '确 认',
|
||||||
|
cancelText: '取 消',
|
||||||
|
onOk() {
|
||||||
|
// 从 rootElements 中移除
|
||||||
|
const targetType = type === 'message' ? 'bpmn:Message' : 'bpmn:Signal';
|
||||||
|
const elementIndex = rootElements.value.findIndex(
|
||||||
|
(el: any) => el.$type === targetType && el.id === row.id,
|
||||||
|
);
|
||||||
|
if (elementIndex !== -1) {
|
||||||
|
rootElements.value.splice(elementIndex, 1);
|
||||||
|
}
|
||||||
|
// 刷新列表
|
||||||
|
initDataList();
|
||||||
|
message.success('移除成功');
|
||||||
|
},
|
||||||
|
onCancel() {
|
||||||
|
// console.info('操作取消');
|
||||||
|
},
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
initDataList();
|
initDataList();
|
||||||
});
|
});
|
||||||
@@ -103,6 +180,26 @@ onMounted(() => {
|
|||||||
</TableColumn>
|
</TableColumn>
|
||||||
<TableColumn title="消息ID" data-index="id" />
|
<TableColumn title="消息ID" data-index="id" />
|
||||||
<TableColumn title="消息名称" data-index="name" />
|
<TableColumn title="消息名称" data-index="name" />
|
||||||
|
<TableColumn title="操作" width="110px">
|
||||||
|
<template #default="{ record, index }">
|
||||||
|
<Button
|
||||||
|
size="small"
|
||||||
|
type="link"
|
||||||
|
@click="openEditModel('message', record, index)"
|
||||||
|
>
|
||||||
|
编辑
|
||||||
|
</Button>
|
||||||
|
<Divider type="vertical" />
|
||||||
|
<Button
|
||||||
|
size="small"
|
||||||
|
type="link"
|
||||||
|
danger
|
||||||
|
@click="removeObject('message', record)"
|
||||||
|
>
|
||||||
|
移除
|
||||||
|
</Button>
|
||||||
|
</template>
|
||||||
|
</TableColumn>
|
||||||
</Table>
|
</Table>
|
||||||
<div class="panel-tab__content--title mt-2 border-t border-gray-200 pt-2">
|
<div class="panel-tab__content--title mt-2 border-t border-gray-200 pt-2">
|
||||||
<span class="flex items-center">
|
<span class="flex items-center">
|
||||||
@@ -124,6 +221,26 @@ onMounted(() => {
|
|||||||
</TableColumn>
|
</TableColumn>
|
||||||
<TableColumn title="信号ID" data-index="id" />
|
<TableColumn title="信号ID" data-index="id" />
|
||||||
<TableColumn title="信号名称" data-index="name" />
|
<TableColumn title="信号名称" data-index="name" />
|
||||||
|
<TableColumn title="操作" width="110px">
|
||||||
|
<template #default="{ record, index }">
|
||||||
|
<Button
|
||||||
|
size="small"
|
||||||
|
type="link"
|
||||||
|
@click="openEditModel('signal', record, index)"
|
||||||
|
>
|
||||||
|
编辑
|
||||||
|
</Button>
|
||||||
|
<Divider type="vertical" />
|
||||||
|
<Button
|
||||||
|
size="small"
|
||||||
|
type="link"
|
||||||
|
danger
|
||||||
|
@click="removeObject('signal', record)"
|
||||||
|
>
|
||||||
|
移除
|
||||||
|
</Button>
|
||||||
|
</template>
|
||||||
|
</TableColumn>
|
||||||
</Table>
|
</Table>
|
||||||
|
|
||||||
<Modal
|
<Modal
|
||||||
|
|||||||
Reference in New Issue
Block a user