update 增加任务面板提示
This commit is contained in:
LiuHao
parent
35dd7c17cb
commit
e791fe904f
@ -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
|
||||
|
||||
230
src/components/BpmnDesign/assets/style/index.scss
Normal file
230
src/components/BpmnDesign/assets/style/index.scss
Normal file
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -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';
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user