From e791fe904f26f30efa94474cc6eb0555c9091931 Mon Sep 17 00:00:00 2001 From: LiuHao Date: Sun, 4 Feb 2024 13:40:52 +0800 Subject: [PATCH] =?UTF-8?q?update=20=E5=A2=9E=E5=8A=A0=E4=BB=BB=E5=8A=A1?= =?UTF-8?q?=E9=9D=A2=E6=9D=BF=E6=8F=90=E7=A4=BA?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../module/Palette/CustomPaletteProvider.ts | 25 +- .../BpmnDesign/assets/style/index.scss | 230 ++++++++++++++++++ src/components/BpmnDesign/index.vue | 1 + 3 files changed, 232 insertions(+), 24 deletions(-) create mode 100644 src/components/BpmnDesign/assets/style/index.scss diff --git a/src/components/BpmnDesign/assets/module/Palette/CustomPaletteProvider.ts b/src/components/BpmnDesign/assets/module/Palette/CustomPaletteProvider.ts index fe8fd78..38f1cea 100644 --- a/src/components/BpmnDesign/assets/module/Palette/CustomPaletteProvider.ts +++ b/src/components/BpmnDesign/assets/module/Palette/CustomPaletteProvider.ts @@ -56,12 +56,9 @@ class CustomPaletteProvider extends PaletteProvider { !shape.businessObject.di && (shape.businessObject.di = {}); shape.businessObject.di.isExpanded = (options as { [key: string]: any }).isExpanded; } - create.start(event, shape, null); } - const shortType = type.replace(/^bpmn:/, ''); - return { group: group, className: className, @@ -73,24 +70,6 @@ class CustomPaletteProvider extends PaletteProvider { }; } - function createSqlTask(event) { - const sqlTask = elementFactory.createShape({ type: 'miyue:SqlTask' }); - create.start(event, sqlTask, null); - } - - // 定义一个函数来创建自定义用户任务 - function createCustomUserTask(event) { - const bpmnFactory: BpmnFactory | undefined = modeler().getBpmnFactory(); - const customUserTask = elementFactory.createShape({ - type: 'bpmn:UserTask', - businessObject: bpmnFactory.create('bpmn:UserTask', { - name: '自定义用户任务', - isForCompensation: false // 添加多实例属性，示例中设置为false - }) - }); - create.start(event, customUserTask, {}); - } - function createMultiInstanceUserTask(event) { const bpmnFactory: BpmnFactory | undefined = modeler().getBpmnFactory(); // 创建一个 bpmn:UserTask @@ -116,18 +95,16 @@ class CustomPaletteProvider extends PaletteProvider { separator: true }, 'create.user-task': createAction('bpmn:UserTask', 'activity', 'bpmn-icon-user-task', '创建用户任务'), - 'create.multi-instance-user-task': { group: 'activity', type: 'bpmn:UserTask', - className: 'bpmn-icon-user', // bpmn-icon-user bpmn-icon-user-task + className: 'bpmn-icon-user task-multi-instance', title: '创建多实例用户任务', action: { click: createMultiInstanceUserTask, dragstart: createMultiInstanceUserTask } }, - 'task-separator': { group: 'activity', separator: true diff --git a/src/components/BpmnDesign/assets/style/index.scss b/src/components/BpmnDesign/assets/style/index.scss new file mode 100644 index 0000000..d3ce379 --- /dev/null +++ b/src/components/BpmnDesign/assets/style/index.scss @@ -0,0 +1,230 @@ +.djs-palette { + width: 300px; + + .bpmn-icon-hand-tool: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-lasso-tool: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-space-tool:hover { + &:after { + content: '启动创建/删除空间工具'; + position: absolute; + left: 45px; + width: 170px; + font-size: 15px; + font-weight: bold; + color: #3a84de; + border-radius: 2px; + border: 1px solid #cccccc; + background-color: #fafafa; + opacity: 0.8; + } + } + .bpmn-icon-connection-multi:hover { + &:after { + content: '启动全局连接工具'; + position: absolute; + left: 100px; + width: 140px; + font-size: 15px; + font-weight: bold; + color: #3a84de; + border-radius: 2px; + border: 1px solid #cccccc; + background-color: #fafafa; + opacity: 0.8; + } + } + .bpmn-icon-start-event-none: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-intermediate-event-none:hover { + &:after { + content: '创建中间/边界事件'; + position: absolute; + left: 100px; + width: 140px; + font-size: 15px; + font-weight: bold; + color: #3a84de; + border-radius: 2px; + border: 1px solid #cccccc; + background-color: #fafafa; + opacity: 0.8; + } + } + .bpmn-icon-end-event-none: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-gateway-none:hover { + &:after { + content: '创建网关'; + position: absolute; + left: 100px; + width: 90px; + font-size: 15px; + font-weight: bold; + color: #3a84de; + border-radius: 2px; + border: 1px solid #cccccc; + background-color: #fafafa; + opacity: 0.8; + } + } + .bpmn-icon-gateway-parallel: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-gateway-eventbased: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-task:hover { + &:after { + content: '创建任务'; + position: absolute; + left: 45px; + width: 80px; + font-size: 15px; + font-weight: bold; + color: #3a84de; + border-radius: 2px; + border: 1px solid #cccccc; + background-color: #fafafa; + opacity: 0.8; + } + } + .bpmn-icon-subprocess-expanded:hover { + &:after { + content: '创建可折叠子流程'; + position: absolute; + left: 100px; + width: 140px; + font-size: 15px; + font-weight: bold; + color: #3a84de; + border-radius: 2px; + border: 1px solid #cccccc; + background-color: #fafafa; + opacity: 0.8; + } + } + .bpmn-icon-user-task: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; + } + } + + .task-multi-instance:hover { + &:after { + content: '创建多实例用户任务'; + position: absolute; + left: 100px; + width: 160px; + font-size: 15px; + font-weight: bold; + color: #3a84de; + border-radius: 2px; + border: 1px solid #cccccc; + background-color: #fafafa; + opacity: 0.8; + } + } + .bpmn-icon-participant: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; + } + } +} diff --git a/src/components/BpmnDesign/index.vue b/src/components/BpmnDesign/index.vue index 225bc8c..ba275c8 100644 --- a/src/components/BpmnDesign/index.vue +++ b/src/components/BpmnDesign/index.vue @@ -83,6 +83,7 @@ import 'bpmn-js/dist/assets/diagram-js.css'; import 'bpmn-js/dist/assets/bpmn-font/css/bpmn.css'; import 'bpmn-js/dist/assets/bpmn-font/css/bpmn-codes.css'; import 'bpmn-js/dist/assets/bpmn-font/css/bpmn-embedded.css'; +import './assets/style/index.scss'; import { Canvas, Modeler } from 'bpmn'; import PropertyPanel from './PropertyPanel.vue'; import BpmnModeler from 'bpmn-js/lib/Modeler.js';