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 && (shape.businessObject.di = {});
|
||||||
shape.businessObject.di.isExpanded = (options as { [key: string]: any }).isExpanded;
|
shape.businessObject.di.isExpanded = (options as { [key: string]: any }).isExpanded;
|
||||||
}
|
}
|
||||||
|
|
||||||
create.start(event, shape, null);
|
create.start(event, shape, null);
|
||||||
}
|
}
|
||||||
|
|
||||||
const shortType = type.replace(/^bpmn:/, '');
|
const shortType = type.replace(/^bpmn:/, '');
|
||||||
|
|
||||||
return {
|
return {
|
||||||
group: group,
|
group: group,
|
||||||
className: className,
|
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) {
|
function createMultiInstanceUserTask(event) {
|
||||||
const bpmnFactory: BpmnFactory | undefined = modeler().getBpmnFactory();
|
const bpmnFactory: BpmnFactory | undefined = modeler().getBpmnFactory();
|
||||||
// 创建一个 bpmn:UserTask
|
// 创建一个 bpmn:UserTask
|
||||||
@ -116,18 +95,16 @@ class CustomPaletteProvider extends PaletteProvider {
|
|||||||
separator: true
|
separator: true
|
||||||
},
|
},
|
||||||
'create.user-task': createAction('bpmn:UserTask', 'activity', 'bpmn-icon-user-task', '创建用户任务'),
|
'create.user-task': createAction('bpmn:UserTask', 'activity', 'bpmn-icon-user-task', '创建用户任务'),
|
||||||
|
|
||||||
'create.multi-instance-user-task': {
|
'create.multi-instance-user-task': {
|
||||||
group: 'activity',
|
group: 'activity',
|
||||||
type: 'bpmn:UserTask',
|
type: 'bpmn:UserTask',
|
||||||
className: 'bpmn-icon-user', // bpmn-icon-user bpmn-icon-user-task
|
className: 'bpmn-icon-user task-multi-instance',
|
||||||
title: '创建多实例用户任务',
|
title: '创建多实例用户任务',
|
||||||
action: {
|
action: {
|
||||||
click: createMultiInstanceUserTask,
|
click: createMultiInstanceUserTask,
|
||||||
dragstart: createMultiInstanceUserTask
|
dragstart: createMultiInstanceUserTask
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
'task-separator': {
|
'task-separator': {
|
||||||
group: 'activity',
|
group: 'activity',
|
||||||
separator: true
|
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.css';
|
||||||
import 'bpmn-js/dist/assets/bpmn-font/css/bpmn-codes.css';
|
import 'bpmn-js/dist/assets/bpmn-font/css/bpmn-codes.css';
|
||||||
import 'bpmn-js/dist/assets/bpmn-font/css/bpmn-embedded.css';
|
import 'bpmn-js/dist/assets/bpmn-font/css/bpmn-embedded.css';
|
||||||
|
import './assets/style/index.scss';
|
||||||
import { Canvas, Modeler } from 'bpmn';
|
import { Canvas, Modeler } from 'bpmn';
|
||||||
import PropertyPanel from './PropertyPanel.vue';
|
import PropertyPanel from './PropertyPanel.vue';
|
||||||
import BpmnModeler from 'bpmn-js/lib/Modeler.js';
|
import BpmnModeler from 'bpmn-js/lib/Modeler.js';
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user