From 1c0e614d7da8f62ac52080a60b364f419c0d6795 Mon Sep 17 00:00:00 2001
From: LiuHao <liuhaoai545@gmail.com>
Date: 星期一, 18 三月 2024 10:44:21 +0800
Subject: [PATCH] update 新增池/参与者面板
---
src/components/BpmnDesign/assets/lang/zh.ts | 10 ++++-
src/components/BpmnDesign/assets/style/index.scss | 51 +++++++++++++++++++++++++
src/components/BpmnDesign/panel/index.vue | 2 +
src/components/BpmnDesign/panel/ParticipantPanel.vue | 40 ++++++++++++++++++++
4 files changed, 101 insertions(+), 2 deletions(-)
diff --git a/src/components/BpmnDesign/assets/lang/zh.ts b/src/components/BpmnDesign/assets/lang/zh.ts
index 61921a5..44e2c86 100644
--- a/src/components/BpmnDesign/assets/lang/zh.ts
+++ b/src/components/BpmnDesign/assets/lang/zh.ts
@@ -16,7 +16,12 @@
'bpmn:ParallelGateway': '骞惰缃戝叧',
'bpmn:InclusiveGateway': '鐩稿缃戝叧',
'bpmn:ComplexGateway': '澶嶆潅缃戝叧',
- 'bpmn:EventBasedGateway': '浜嬩欢缃戝叧'
+ 'bpmn:EventBasedGateway': '浜嬩欢缃戝叧',
+ 'bpmn:Participant': '姹�/鍙備笌鑰�',
+ 'bpmn:SubProcess': '瀛愭祦绋�',
+ 'bpmn:DataObjectReference': '鏁版嵁瀵硅薄寮曠敤',
+ 'bpmn:DataStoreReference': '鏁版嵁瀛樺偍寮曠敤',
+ 'bpmn:Group': '缁�'
};
export default {
@@ -114,5 +119,6 @@
'Append message intermediate catch event': '杩藉姞涓棿娑堟伅鎹曡幏浜嬩欢',
'Append timer intermediate catch event': '杩藉姞涓棿瀹氭椂鎹曡幏浜嬩欢',
'Append conditional intermediate catch event': '杩藉姞涓棿鏉′欢鎹曡幏浜嬩欢',
- 'Append signal intermediate catch event': '杩藉姞涓棿淇″彿鎹曡幏浜嬩欢'
+ 'Append signal intermediate catch event': '杩藉姞涓棿淇″彿鎹曡幏浜嬩欢',
+ 'flow elements must be children of pools/participants': '娴佺▼鍏冪礌蹇呴』鏄睜/鍙備笌鑰呯殑瀛愬厓绱�'
};
diff --git a/src/components/BpmnDesign/assets/style/index.scss b/src/components/BpmnDesign/assets/style/index.scss
index d3ce379..130b842 100644
--- a/src/components/BpmnDesign/assets/style/index.scss
+++ b/src/components/BpmnDesign/assets/style/index.scss
@@ -227,4 +227,55 @@
opacity: 0.8;
}
}
+ .bpmn-icon-data-object {
+ &:hover {
+ &:after {
+ content: '鍒涘缓鏁版嵁瀵硅薄';
+ position: absolute;
+ left: 45px;
+ width: 120px;
+ font-size: 15px;
+ font-weight: bold;
+ color: #3a84de;
+ border-radius: 2px;
+ border: 1px solid #cccccc;
+ background-color: #fafafa;
+ opacity: 0.8;
+ }
+ }
+ }
+ .bpmn-icon-data-store {
+ &:hover {
+ &:after {
+ content: '鍒涘缓鏁版嵁瀛樺偍';
+ position: absolute;
+ left: 100px;
+ width: 120px;
+ font-size: 15px;
+ font-weight: bold;
+ color: #3a84de;
+ border-radius: 2px;
+ border: 1px solid #cccccc;
+ background-color: #fafafa;
+ opacity: 0.8;
+ }
+ }
+ }
+ .bpmn-icon-group {
+ &:hover {
+ &:after {
+ content: '鍒涘缓鍒嗙粍';
+ position: absolute;
+ left: 100px;
+ width: 100px;
+ font-size: 15px;
+ font-weight: bold;
+ color: #3a84de;
+ border-radius: 2px;
+ border: 1px solid #cccccc;
+ background-color: #fafafa;
+ opacity: 0.8;
+ }
+ }
+ }
}
diff --git a/src/components/BpmnDesign/panel/ParticipantPanel.vue b/src/components/BpmnDesign/panel/ParticipantPanel.vue
new file mode 100644
index 0000000..7dd5474
--- /dev/null
+++ b/src/components/BpmnDesign/panel/ParticipantPanel.vue
@@ -0,0 +1,40 @@
+<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-item label="鎵ц鐩戝惉鍣�" style="margin-bottom: 0"> </el-form-item>
+ <ExecutionListener :element="element"></ExecutionListener>
+ </el-form>
+ </div>
+</template>
+<script setup lang="ts">
+import useParseElement from '@/components/BpmnDesign/hooks/useParseElement';
+import usePanel from '@/components/BpmnDesign/hooks/usePanel';
+import { 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 formRules = ref<ElFormRules>({
+ id: [{ required: true, message: '璇疯緭鍏�', trigger: 'blur' }],
+ name: [{ required: true, message: '璇疯緭鍏�', trigger: 'blur' }]
+});
+</script>
+
+<style lang="scss" scoped></style>
diff --git a/src/components/BpmnDesign/panel/index.vue b/src/components/BpmnDesign/panel/index.vue
index 6c2d146..6ba7fee 100644
--- a/src/components/BpmnDesign/panel/index.vue
+++ b/src/components/BpmnDesign/panel/index.vue
@@ -11,6 +11,7 @@
import StartEndPanel from './StartEndPanel.vue';
import GatewayPanel from './GatewayPanel.vue';
import SequenceFlowPanel from './SequenceFlowPanel.vue';
+import ParticipantPanel from './ParticipantPanel.vue';
import { Modeler, ModdleElement } from 'bpmn';
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
interface propsType {
@@ -45,6 +46,7 @@
if (sequenceType.includes(type)) return SequenceFlowPanel;
if (gatewayType.includes(type)) return GatewayPanel;
if (processType.includes(type)) return ProcessPanel;
+ if (type === 'bpmn:Participant') return ParticipantPanel;
//return proxy?.$modal.msgWarning('闈㈡澘寮�鍙戜腑....');
});
--
Gitblit v1.9.3