Commit 9bc42ce6 authored by chenjiuping's avatar chenjiuping

或签

parent 3404722f
......@@ -19,7 +19,7 @@ if (process.env.npm_config_preview || rawArgv.includes('--preview')) {
app.use(
publicPath,
serveStatic('./dist', {
index: ['index.html', '/']
index: ['', '/']
})
)
......
......@@ -5,6 +5,7 @@
"author": "捷道",
"license": "MIT",
"scripts": {
"local": "vue-cli-service serve --mode local",
"dev": "vue-cli-service serve",
"build:dev": "vue-cli-service build --mode dev",
"build:prod": "vue-cli-service build",
......
......@@ -72,7 +72,7 @@
<el-button :size="headerButtonSize" icon="el-icon-refresh" @click="processRestart" />
</el-tooltip>
</el-button-group>
<el-button :size="headerButtonSize" :type="headerButtonType" icon="el-icon-plus" @click="processSave">保存模型</el-button>
<el-button :size="headerButtonSize" :type="headerButtonType" icon="el-icon-plus" @click="processSave" :disabled = "simulationStatus">保存模型</el-button>
</template>
<!-- 用于打开本地文件-->
<input type="file" id="files" ref="refFile" style="display: none" accept=".xml, .bpmn" @change="importLocalFile" />
......@@ -118,6 +118,7 @@ export default {
componentName: "MyProcessDesigner",
props: {
value: String, // xml 字符串
valueWatch: true, // xml 字符串的 watch 状态
processId: String, // 流程 key 标识
processName: String, // 流程 name 名字
formId: Number, // 流程 form 表单编号
......@@ -252,11 +253,6 @@ export default {
this.bpmnModeler = null;
});
},
watch: {
value: function (newValue) { // 在 xmlString 发生变化时,重新创建,从而绘制流程图
this.createNewDiagram(newValue);
}
},
methods: {
initBpmnModeler() {
if (this.bpmnModeler) return;
......@@ -307,7 +303,7 @@ export default {
let newName = this.processName || `业务流程_${new Date().getTime()}`;
let xmlString = xml || DefaultEmptyXML(newId, newName, this.prefix);
try {
console.log(this.bpmnModeler.importXML);
// console.log(this.bpmnModeler.importXML);
let { warnings } = await this.bpmnModeler.importXML(xmlString);
if (warnings && warnings.length) {
warnings.forEach(warn => console.warn(warn));
......@@ -459,7 +455,7 @@ export default {
this.previewModelVisible = true;
});
},
/* ------------------------------------------------ 道源码 methods ------------------------------------------------------ */
/* ------------------------------------------------ 道源码 methods ------------------------------------------------------ */
async processSave() {
const { err, xml } = await this.bpmnModeler.saveXML();
// 读取异常时抛出异常
......@@ -478,8 +474,3 @@ export default {
}
};
</script>
<style scoped>
.my-process-designer{
height: calc(100vh - 84px - 40px);
}
</style>
......@@ -90,15 +90,14 @@ export default {
let xmlString = xml || DefaultEmptyXML(newId, newName, this.prefix);
try {
// console.log(this.bpmnModeler.importXML);
let { warnings } = await this.bpmnModeler.importXML(xmlString)
// 220906 增加一个缩放,自动适应尺寸
this.bpmnModeler.get('canvas').zoom('fit-viewport');
let { warnings } = await this.bpmnModeler.importXML(xmlString);
if (warnings && warnings.length) {
warnings.forEach(warn => console.warn(warn));
}
// 高亮流程图
await this.highlightDiagram();
const canvas = this.bpmnModeler.get('canvas');
canvas.zoom("fit-viewport", "auto");
} catch (e) {
console.error(e);
// console.error(`[Process Designer Warn]: ${e?.message || e}`);
......@@ -117,23 +116,25 @@ export default {
let todoActivity = activityList.find(m => !m.endTime) // 找到待办的任务
let endActivity = activityList[activityList.length - 1] // 获得最后一个任务
// debugger
console.log(this.bpmnModeler.getDefinitions().rootElements[0].flowElements);
// console.log(this.bpmnModeler.getDefinitions().rootElements[0].flowElements);
this.bpmnModeler.getDefinitions().rootElements[0].flowElements?.forEach(n => {
let activity = activityList.find(m => m.key === n.id) // 找到对应的活动
if (!activity) {
return;
}
if (n.$type === 'bpmn:UserTask') { // 用户任务
if (!activity) {
return;
}
// 处理用户任务的高亮
const task = this.taskList.find(m => m.id === activity.taskId); // 找到活动对应的 taskId
if (task) {
canvas.addMarker(n.id, this.getResultCss(task.result));
// 如果非通过,就不走后面的线条了
if (task.result !== 2) {
return;
}
if (!task) {
return;
}
// 高亮任务
canvas.addMarker(n.id, this.getResultCss(task.result));
// 如果非通过,就不走后面的线条了
if (task.result !== 2) {
return;
}
// 处理 outgoing 出线
const outgoing = this.getActivityOutgoing(activity);
outgoing?.forEach(nn => {
......@@ -157,9 +158,6 @@ export default {
}
});
} else if (n.$type === 'bpmn:ExclusiveGateway') { // 排它网关
if (!activity) {
return
}
// 设置【bpmn:ExclusiveGateway】排它网关的高亮
canvas.addMarker(n.id, this.getActivityHighlightCss(activity));
// 查找需要高亮的连线
......@@ -184,9 +182,6 @@ export default {
canvas.addMarker(matchNN.id, this.getActivityHighlightCss(matchActivity));
}
} else if (n.$type === 'bpmn:ParallelGateway') { // 并行网关
if (!activity) {
return
}
// 设置【bpmn:ParallelGateway】并行网关的高亮
canvas.addMarker(n.id, this.getActivityHighlightCss(activity));
n.outgoing?.forEach(nn => {
......@@ -212,6 +207,17 @@ export default {
return;
}
canvas.addMarker(n.id, this.getResultCss(this.processInstance.result));
} else if (n.$type === 'bpmn:ServiceTask'){ //服务任务
if(activity.startTime>0 && activity.endTime===0){//进入执行,标识进行色
canvas.addMarker(n.id, this.getResultCss(1));
}
if(activity.endTime>0){// 执行完成,节点标识完成色, 所有outgoing标识完成色。
canvas.addMarker(n.id, this.getResultCss(2));
const outgoing = this.getActivityOutgoing(activity)
outgoing?.forEach(out=>{
canvas.addMarker(out.id,this.getResultCss(2))
})
}
}
})
},
......@@ -219,13 +225,13 @@ export default {
return activity.endTime ? 'highlight' : 'highlight-todo';
},
getResultCss(result) {
if (result === 1) {
if (result === 1) { // 审批中
return 'highlight-todo';
} else if (result === 2) {
} else if (result === 2) { // 已通过
return 'highlight';
} else if (result === 3) {
} else if (result === 3) { // 不通过
return 'highlight-reject';
} else if (result === 4) {
} else if (result === 4) { // 已取消
return 'highlight-cancel';
}
return '';
......@@ -267,6 +273,10 @@ export default {
!this.elementOverlayIds && (this.elementOverlayIds = {});
!this.overlays && (this.overlays = this.bpmnModeler.get("overlays"));
// 展示信息
const activity = this.activityList.find(m => m.key === element.id);
if (!activity) {
return;
}
if (!this.elementOverlayIds[element.id] && element.type !== "bpmn:Process") {
let html = `<div class="element-overlays">
<p>Elemet id: ${element.id}</p>
......@@ -278,10 +288,6 @@ export default {
<p>创建时间:${this.parseTime(this.processInstance.createTime)}`;
} else if (element.type === 'bpmn:UserTask') {
// debugger
const activity = this.activityList.find(m => m.key === element.id);
if (!activity) {
return;
}
let task = this.taskList.find(m => m.id === activity.taskId); // 找到活动对应的 taskId
if (!task) {
return;
......@@ -293,9 +299,17 @@ export default {
if (task.endTime) {
html += `<p>结束时间:${this.parseTime(task.endTime)}</p>`
}
if (task.comment) {
html += `<p>审批建议:${task.comment}</p>`
if (task.reason) {
html += `<p>审批建议:${task.reason}</p>`
}
} else if (element.type === 'bpmn:ServiceTask' && this.processInstance) {
if(activity.startTime>0){
html = `<p>创建时间:${this.parseTime(activity.startTime)}</p>`;
}
if(activity.endTime>0){
html += `<p>结束时间:${this.parseTime(activity.endTime)}</p>`
}
console.log(html)
} else if (element.type === 'bpmn:EndEvent' && this.processInstance) {
html = `<p>结果:${this.getDictDataLabel(this.DICT_TYPE.BPM_PROCESS_INSTANCE_RESULT, this.processInstance.result)}</p>`;
if (this.processInstance.endTime) {
......@@ -317,7 +331,8 @@ export default {
};
</script>
<style scoped>
<style>
/** 处理中 */
.highlight-todo.djs-connection > .djs-visual > path {
stroke: #1890ff !important;
......@@ -331,13 +346,13 @@ export default {
fill-opacity: 0.2 !important;
}
/deep/.highlight-todo.djs-connection > .djs-visual > path {
:deep(.highlight-todo.djs-connection > .djs-visual > path) {
stroke: #1890ff !important;
stroke-dasharray: 4px !important;
fill-opacity: 0.2 !important;
marker-end: url(#sequenceflow-end-_E7DFDF-_E7DFDF-803g1kf6zwzmcig1y2ulm5egr);
}
/deep/.highlight-todo.djs-shape .djs-visual > :nth-child(1) {
:deep(.highlight-todo.djs-shape .djs-visual > :nth-child(1)) {
fill: #1890ff !important;
stroke: #1890ff !important;
stroke-dasharray: 4px !important;
......@@ -366,20 +381,20 @@ export default {
fill: green !important; /* color elements as green */
}
/deep/.highlight.djs-shape .djs-visual > :nth-child(1) {
:deep(.highlight.djs-shape .djs-visual > :nth-child(1)) {
fill: green !important;
stroke: green !important;
fill-opacity: 0.2 !important;
}
/deep/.highlight.djs-shape .djs-visual > :nth-child(2) {
:deep(.highlight.djs-shape .djs-visual > :nth-child(2)) {
fill: green !important;
}
/deep/.highlight.djs-shape .djs-visual > path {
:deep(.highlight.djs-shape .djs-visual > path) {
fill: green !important;
fill-opacity: 0.2 !important;
stroke: green !important;
}
/deep/.highlight.djs-connection > .djs-visual > path {
:deep(.highlight.djs-connection > .djs-visual > path) {
stroke: green !important;
}
......@@ -405,20 +420,20 @@ export default {
fill: red !important; /* color elements as green */
}
/deep/.highlight-reject.djs-shape .djs-visual > :nth-child(1) {
:deep(.highlight-reject.djs-shape .djs-visual > :nth-child(1)) {
fill: red !important;
stroke: red !important;
fill-opacity: 0.2 !important;
}
/deep/.highlight-reject.djs-shape .djs-visual > :nth-child(2) {
:deep(.highlight-reject.djs-shape .djs-visual > :nth-child(2)) {
fill: red !important;
}
/deep/.highlight-reject.djs-shape .djs-visual > path {
:deep(.highlight-reject.djs-shape .djs-visual > path) {
fill: red !important;
fill-opacity: 0.2 !important;
stroke: red !important;
}
/deep/.highlight-reject.djs-connection > .djs-visual > path {
:deep(.highlight-reject.djs-connection > .djs-visual > path) {
stroke: red !important;
}
......@@ -444,20 +459,20 @@ export default {
fill: grey !important; /* color elements as green */
}
/deep/.highlight-cancel.djs-shape .djs-visual > :nth-child(1) {
:deep(.highlight-cancel.djs-shape .djs-visual > :nth-child(1)) {
fill: grey !important;
stroke: grey !important;
fill-opacity: 0.2 !important;
}
/deep/.highlight-cancel.djs-shape .djs-visual > :nth-child(2) {
:deep(.highlight-cancel.djs-shape .djs-visual > :nth-child(2)) {
fill: grey !important;
}
/deep/.highlight-cancel.djs-shape .djs-visual > path {
:deep(.highlight-cancel.djs-shape .djs-visual > path) {
fill: grey !important;
fill-opacity: 0.2 !important;
stroke: grey !important;
}
/deep/.highlight-cancel.djs-connection > .djs-visual > path {
:deep(.highlight-cancel.djs-connection > .djs-visual > path) {
stroke: grey !important;
}
......
......@@ -49,14 +49,14 @@ export default function ContextPadProvider(
}
eventBus.on("create.end", 250, function(event) {
var context = event.context,
shape = context.shape;
const context = event.context,
shape = context.shape
if (!hasPrimaryModifier(event) || !contextPad.isOpen(shape)) {
return;
}
var entries = contextPad.getEntries(shape);
const entries = contextPad.getEntries(shape)
if (entries.replace) {
entries.replace.action.click(event, shape);
......@@ -81,7 +81,7 @@ ContextPadProvider.$inject = [
];
ContextPadProvider.prototype.getContextPadEntries = function(element) {
var contextPad = this._contextPad,
const contextPad = this._contextPad,
modeling = this._modeling,
elementFactory = this._elementFactory,
connect = this._connect,
......@@ -90,15 +90,15 @@ ContextPadProvider.prototype.getContextPadEntries = function(element) {
canvas = this._canvas,
rules = this._rules,
autoPlace = this._autoPlace,
translate = this._translate;
translate = this._translate
var actions = {};
const actions = {}
if (element.type === "label") {
return actions;
}
var businessObject = element.businessObject;
const businessObject = element.businessObject
function startConnect(event, element) {
connect.start(event, element);
......@@ -109,21 +109,21 @@ ContextPadProvider.prototype.getContextPadEntries = function(element) {
}
function getReplaceMenuPosition(element) {
var Y_OFFSET = 5;
const Y_OFFSET = 5
var diagramContainer = canvas.getContainer(),
pad = contextPad.getPad(element).html;
const diagramContainer = canvas.getContainer(),
pad = contextPad.getPad(element).html
var diagramRect = diagramContainer.getBoundingClientRect(),
padRect = pad.getBoundingClientRect();
const diagramRect = diagramContainer.getBoundingClientRect(),
padRect = pad.getBoundingClientRect()
var top = padRect.top - diagramRect.top;
var left = padRect.left - diagramRect.left;
const top = padRect.top - diagramRect.top
const left = padRect.left - diagramRect.left
var pos = {
const pos = {
x: left,
y: top + padRect.height + Y_OFFSET
};
}
return pos;
}
......@@ -145,19 +145,19 @@ ContextPadProvider.prototype.getContextPadEntries = function(element) {
}
function appendStart(event, element) {
var shape = elementFactory.createShape(assign({ type: type }, options));
const shape = elementFactory.createShape(assign({ type: type }, options))
create.start(event, shape, {
source: element
});
}
var append = autoPlace
const append = autoPlace
? function(event, element) {
var shape = elementFactory.createShape(assign({ type: type }, options));
const shape = elementFactory.createShape(assign({ type: type }, options))
autoPlace.append(element, shape);
}
: appendStart;
autoPlace.append(element, shape)
}
: appendStart
return {
group: "model",
......@@ -182,7 +182,7 @@ ContextPadProvider.prototype.getContextPadEntries = function(element) {
}
if (isAny(businessObject, ["bpmn:Lane", "bpmn:Participant"]) && isExpanded(businessObject)) {
var childLanes = getChildLanes(element);
const childLanes = getChildLanes(element)
assign(actions, {
"lane-insert-above": {
......@@ -302,9 +302,9 @@ ContextPadProvider.prototype.getContextPadEntries = function(element) {
title: translate("Change type"),
action: {
click: function(event, element) {
var position = assign(getReplaceMenuPosition(element), {
const position = assign(getReplaceMenuPosition(element), {
cursor: { x: event.x, y: event.y }
});
})
popupMenu.open(element, "bpmn-replace", position);
}
......@@ -350,7 +350,7 @@ ContextPadProvider.prototype.getContextPadEntries = function(element) {
}
// delete element entry, only show if allowed by rules
var deleteAllowed = rules.allowed("elements.delete", { elements: [element] });
let deleteAllowed = rules.allowed('elements.delete', { elements: [element] })
if (isArray(deleteAllowed)) {
// was the element returned as a deletion candidate?
......@@ -376,10 +376,10 @@ ContextPadProvider.prototype.getContextPadEntries = function(element) {
// helpers /////////
function isEventType(eventBo, type, definition) {
var isType = eventBo.$instanceOf(type);
var isDefinition = false;
const isType = eventBo.$instanceOf(type)
let isDefinition = false
var definitions = eventBo.eventDefinitions || [];
const definitions = eventBo.eventDefinitions || []
forEach(definitions, function(def) {
if (def.$type === definition) {
isDefinition = true;
......
"use strict";
var some = require("min-dash").some;
const some = require('min-dash').some
var ALLOWED_TYPES = {
FailedJobRetryTimeCycle: ["bpmn:StartEvent", "bpmn:BoundaryEvent", "bpmn:IntermediateCatchEvent", "bpmn:Activity"],
Connector: ["bpmn:EndEvent", "bpmn:IntermediateThrowEvent"],
Field: ["bpmn:EndEvent", "bpmn:IntermediateThrowEvent"]
};
const ALLOWED_TYPES = {
FailedJobRetryTimeCycle: ['bpmn:StartEvent', 'bpmn:BoundaryEvent', 'bpmn:IntermediateCatchEvent', 'bpmn:Activity'],
Connector: ['bpmn:EndEvent', 'bpmn:IntermediateThrowEvent'],
Field: ['bpmn:EndEvent', 'bpmn:IntermediateThrowEvent']
}
function is(element, type) {
return element && typeof element.$instanceOf === "function" && element.$instanceOf(type);
......@@ -32,8 +32,8 @@ function anyType(element, types) {
}
function isAllowed(propName, propDescriptor, newElement) {
var name = propDescriptor.name,
types = ALLOWED_TYPES[name.replace(/activiti:/, "")];
const name = propDescriptor.name,
types = ALLOWED_TYPES[name.replace(/activiti:/, '')]
return name === propName && anyType(newElement, types);
}
......@@ -42,8 +42,8 @@ function ActivitiModdleExtension(eventBus) {
eventBus.on(
"property.clone",
function(context) {
var newElement = context.newElement,
propDescriptor = context.propertyDescriptor;
const newElement = context.newElement,
propDescriptor = context.propertyDescriptor
this.canCloneProperty(newElement, propDescriptor);
},
......
"use strict";
var isFunction = require("min-dash").isFunction,
isObject = require("min-dash").isObject,
some = require("min-dash").some;
const isFunction = require('min-dash').isFunction,
isObject = require('min-dash').isObject,
some = require('min-dash').some
var WILDCARD = "*";
const WILDCARD = '*'
function CamundaModdleExtension(eventBus) {
var self = this;
const self = this
eventBus.on("moddleCopy.canCopyProperty", function(context) {
var property = context.property,
parent = context.parent;
const property = context.property,
parent = context.parent
return self.canCopyProperty(property, parent);
});
......@@ -45,14 +45,14 @@ CamundaModdleExtension.prototype.canCopyProperty = function(property, parent) {
CamundaModdleExtension.prototype.canHostInputOutput = function(parent) {
// allowed in camunda:Connector
var connector = getParent(parent, "camunda:Connector");
const connector = getParent(parent, 'camunda:Connector')
if (connector) {
return true;
}
// special rules inside bpmn:FlowNode
var flowNode = getParent(parent, "bpmn:FlowNode");
const flowNode = getParent(parent, 'bpmn:FlowNode')
if (!flowNode) {
return false;
......@@ -62,15 +62,13 @@ CamundaModdleExtension.prototype.canHostInputOutput = function(parent) {
return false;
}
if (is(flowNode, "bpmn:SubProcess") && flowNode.get("triggeredByEvent")) {
return false;
}
return !(is(flowNode, "bpmn:SubProcess") && flowNode.get("triggeredByEvent"));
return true;
};
CamundaModdleExtension.prototype.canHostConnector = function(parent) {
var serviceTaskLike = getParent(parent, "camunda:ServiceTaskLike");
const serviceTaskLike = getParent(parent, 'camunda:ServiceTaskLike')
if (is(serviceTaskLike, "bpmn:MessageEventDefinition")) {
// only allow on throw and end events
......@@ -81,13 +79,13 @@ CamundaModdleExtension.prototype.canHostConnector = function(parent) {
};
CamundaModdleExtension.prototype.canHostIn = function(parent) {
var callActivity = getParent(parent, "bpmn:CallActivity");
const callActivity = getParent(parent, 'bpmn:CallActivity')
if (callActivity) {
return true;
}
var signalEventDefinition = getParent(parent, "bpmn:SignalEventDefinition");
const signalEventDefinition = getParent(parent, 'bpmn:SignalEventDefinition')
if (signalEventDefinition) {
// only allow on throw and end events
......@@ -129,9 +127,9 @@ function getParent(element, type) {
function isAllowedInParent(property, parent) {
// (1) find property descriptor
var descriptor = property.$type && property.$model.getTypeDescriptor(property.$type);
const descriptor = property.$type && property.$model.getTypeDescriptor(property.$type)
var allowedIn = descriptor && descriptor.meta && descriptor.meta.allowedIn;
const allowedIn = descriptor && descriptor.meta && descriptor.meta.allowedIn
if (!allowedIn || isWildcard(allowedIn)) {
return true;
......
"use strict";
var some = require("min-dash").some;
const some = require('min-dash').some
var ALLOWED_TYPES = {
FailedJobRetryTimeCycle: ["bpmn:StartEvent", "bpmn:BoundaryEvent", "bpmn:IntermediateCatchEvent", "bpmn:Activity"],
Connector: ["bpmn:EndEvent", "bpmn:IntermediateThrowEvent"],
Field: ["bpmn:EndEvent", "bpmn:IntermediateThrowEvent"]
};
const ALLOWED_TYPES = {
FailedJobRetryTimeCycle: ['bpmn:StartEvent', 'bpmn:BoundaryEvent', 'bpmn:IntermediateCatchEvent', 'bpmn:Activity'],
Connector: ['bpmn:EndEvent', 'bpmn:IntermediateThrowEvent'],
Field: ['bpmn:EndEvent', 'bpmn:IntermediateThrowEvent']
}
function is(element, type) {
return element && typeof element.$instanceOf === "function" && element.$instanceOf(type);
......@@ -32,8 +32,8 @@ function anyType(element, types) {
}
function isAllowed(propName, propDescriptor, newElement) {
var name = propDescriptor.name,
types = ALLOWED_TYPES[name.replace(/flowable:/, "")];
const name = propDescriptor.name,
types = ALLOWED_TYPES[name.replace(/flowable:/, '')]
return name === propName && anyType(newElement, types);
}
......@@ -42,8 +42,8 @@ function FlowableModdleExtension(eventBus) {
eventBus.on(
"property.clone",
function(context) {
var newElement = context.newElement,
propDescriptor = context.propertyDescriptor;
const newElement = context.newElement,
propDescriptor = context.propertyDescriptor
this.canCloneProperty(newElement, propDescriptor);
},
......
......@@ -10,18 +10,18 @@ F.prototype = PaletteProvider.prototype; // 核心,将父类的原型赋值给
// 利用中介函数重写原型链方法
F.prototype.getPaletteEntries = function() {
var actions = {},
const actions = {},
create = this._create,
elementFactory = this._elementFactory,
spaceTool = this._spaceTool,
lassoTool = this._lassoTool,
handTool = this._handTool,
globalConnect = this._globalConnect,
translate = this._translate;
translate = this._translate
function createAction(type, group, className, title, options) {
function createListener(event) {
var shape = elementFactory.createShape(assign({ type: type }, options));
const shape = elementFactory.createShape(assign({ type: type }, options))
if (options) {
shape.businessObject.di.isExpanded = options.isExpanded;
......@@ -30,7 +30,7 @@ F.prototype.getPaletteEntries = function() {
create.start(event, shape);
}
var shortType = type.replace(/^bpmn:/, "");
const shortType = type.replace(/^bpmn:/, '')
return {
group: group,
......@@ -44,19 +44,19 @@ F.prototype.getPaletteEntries = function() {
}
function createSubprocess(event) {
var subProcess = elementFactory.createShape({
type: "bpmn:SubProcess",
const subProcess = elementFactory.createShape({
type: 'bpmn:SubProcess',
x: 0,
y: 0,
isExpanded: true
});
})
var startEvent = elementFactory.createShape({
type: "bpmn:StartEvent",
const startEvent = elementFactory.createShape({
type: 'bpmn:StartEvent',
x: 40,
y: 82,
parent: subProcess
});
})
create.start(event, [subProcess, startEvent], {
hints: {
......
......@@ -19,18 +19,18 @@ export default function PaletteProvider(palette, create, elementFactory, spaceTo
PaletteProvider.$inject = ["palette", "create", "elementFactory", "spaceTool", "lassoTool", "handTool", "globalConnect", "translate"];
PaletteProvider.prototype.getPaletteEntries = function() {
var actions = {},
const actions = {},
create = this._create,
elementFactory = this._elementFactory,
spaceTool = this._spaceTool,
lassoTool = this._lassoTool,
handTool = this._handTool,
globalConnect = this._globalConnect,
translate = this._translate;
translate = this._translate
function createAction(type, group, className, title, options) {
function createListener(event) {
var shape = elementFactory.createShape(assign({ type: type }, options));
const shape = elementFactory.createShape(assign({ type: type }, options))
if (options) {
shape.businessObject.di.isExpanded = options.isExpanded;
......@@ -39,7 +39,7 @@ PaletteProvider.prototype.getPaletteEntries = function() {
create.start(event, shape);
}
var shortType = type.replace(/^bpmn:/, "");
const shortType = type.replace(/^bpmn:/, '')
return {
group: group,
......@@ -53,19 +53,19 @@ PaletteProvider.prototype.getPaletteEntries = function() {
}
function createSubprocess(event) {
var subProcess = elementFactory.createShape({
type: "bpmn:SubProcess",
const subProcess = elementFactory.createShape({
type: 'bpmn:SubProcess',
x: 0,
y: 0,
isExpanded: true
});
})
var startEvent = elementFactory.createShape({
type: "bpmn:StartEvent",
const startEvent = elementFactory.createShape({
type: 'bpmn:StartEvent',
x: 40,
y: 82,
parent: subProcess
});
})
create.start(event, [subProcess, startEvent], {
hints: {
......
......@@ -163,7 +163,6 @@ export default {
// 初始化数据
initFormOnChanged(element) {
let activatedElement = element;
// debugger
if (!activatedElement) {
activatedElement =
window.bpmnInstances.elementRegistry.find(el => el.type === "bpmn:Process") ??
......
......@@ -2,6 +2,7 @@
<div class="panel-tab__content">
<el-form size="mini" label-width="90px" :model="model" :rules="rules" @submit.native.prevent>
<div v-if="elementBaseInfo.$type === 'bpmn:Process'"> <!-- 如果是 Process 信息的时候,使用自定义表单 -->
<el-form-item label="流程标识" prop="key">
<el-input v-model="model.key" placeholder="请输入流标标识"
:disabled="model.id !== undefined && model.id.length > 0" @change="handleKeyUpdate" />
......@@ -66,6 +67,7 @@ export default {
},
methods: {
resetBaseInfo() {
debugger;
this.bpmnElement = window?.bpmnInstances?.bpmnElement;
this.elementBaseInfo = JSON.parse(JSON.stringify(this.bpmnElement.businessObject));
},
......@@ -74,7 +76,7 @@ export default {
if (!value) {
return;
}
if (!value.match(/[a-zA-Z_][\-_.0-9_a-zA-Z$]*/)) {
if (!value.match(/[a-zA-Z_][\-_.0-9a-zA-Z$]*/)) {
console.log('key 不满足 XML NCName 规则,所以不进行赋值');
return;
}
......@@ -101,6 +103,7 @@ export default {
const attrObj = Object.create(null);
attrObj[key] = this.elementBaseInfo[key];
if (key === "id") {
debugger;
window.bpmnInstances.modeling.updateProperties(this.bpmnElement, {
id: this.elementBaseInfo[key],
di: { id: `${this.elementBaseInfo[key]}_di` }
......
......@@ -15,7 +15,7 @@
</el-select>
</el-form-item>
<el-form-item label="表达式" v-if="flowConditionForm.conditionType && flowConditionForm.conditionType === 'expression'" key="express">
<el-input v-model="flowConditionForm.body" clearable @change="updateFlowCondition" />
<el-input v-model="flowConditionForm.body" style="width:192px;" clearable @change="updateFlowCondition" />
</el-form-item>
<template v-if="flowConditionForm.conditionType && flowConditionForm.conditionType === 'script'">
<el-form-item label="脚本语言" key="language">
......
......@@ -15,7 +15,7 @@
<el-form-item label="循环基数" key="loopCardinality">
<el-input v-model="loopInstanceForm.loopCardinality" clearable @change="updateLoopCardinality" />
</el-form-item>
<el-form-item label="集合" key="collection">
<el-form-item label="集合" key="collection" v-show="false">
<el-input v-model="loopInstanceForm.collection" clearable @change="updateLoopBase" />
</el-form-item>
<el-form-item label="元素变量" key="elementVariable">
......@@ -131,7 +131,7 @@ export default {
if (type === "SequentialMultiInstance") {
this.multiLoopInstance = window.bpmnInstances.moddle.create("bpmn:MultiInstanceLoopCharacteristics", { isSequential: true });
} else {
this.multiLoopInstance = window.bpmnInstances.moddle.create("bpmn:MultiInstanceLoopCharacteristics");
this.multiLoopInstance = window.bpmnInstances.moddle.create("bpmn:MultiInstanceLoopCharacteristics", { collection: "${coll_userList}" });
}
window.bpmnInstances.modeling.updateProperties(this.bpmnElement, {
loopCharacteristics: this.multiLoopInstance
......
......@@ -13,7 +13,7 @@
display: flex;
flex-direction: column;
width: 100%;
height: 100%;
height: 500px;
box-sizing: border-box;
.my-process-designer__header {
width: 100%;
......@@ -141,11 +141,11 @@
}
}
pre {
/* margin: 0;
margin: 0;
height: 100%;
overflow: hidden;
max-height: calc(80vh - 32px);
overflow-y: auto; */
overflow-y: auto;
}
.hljs {
word-break: break-word;
......
<template>
<div class="app-container">
<!-- 流程设计器,负责绘制流程等 -->
<my-process-designer :key="`designer-${reloadIndex}`" v-model="xmlString" v-bind="controlForm"
<my-process-designer v-if="xmlString !== undefined" :key="`designer-${reloadIndex}`" v-model="xmlString" v-bind="controlForm"
keyboard ref="processDesigner" @init-finished="initModeler"
@save="save"/>
......@@ -29,7 +30,7 @@ export default {
components: { MyProcessPalette },
data() {
return {
xmlString: "", // BPMN XML
xmlString: undefined, // BPMN XML
modeler: null,
reloadIndex: 0,
controlDrawerVisible: false,
......@@ -38,7 +39,7 @@ export default {
simulation: true,
labelEditing: false,
labelVisible: false,
prefix: "activiti",
prefix: "flowable",
headerButtonSize: "mini",
additionalModel: [CustomContentPadProvider, CustomPaletteProvider]
},
......@@ -53,6 +54,7 @@ export default {
created() {
// 如果 modelId 非空,说明是修改流程模型
const modelId = this.$route.query && this.$route.query.modelId
if (modelId) {
getModel(modelId).then(response => {
this.xmlString = response.data.bpmnXml
......@@ -68,24 +70,8 @@ export default {
initModeler(modeler) {
setTimeout(() => {
this.modeler = modeler;
console.log(modeler);
}, 10);
},
reloadProcessDesigner(deep) {
this.controlForm.additionalModel = [];
for (let key in this.addis) {
if (this.addis[key]) {
this.controlForm.additionalModel.push(this.addis[key]);
}
}
deep && (this.xmlString = undefined);
this.reloadIndex += 1;
this.modeler = null; // 避免 panel 异常
// if (deep) {
// this.xmlString = undefined;
// this.$refs.processDesigner.processRestart();
// }
},
save(bpmnXml) {
const data = {
...this.model,
......@@ -129,9 +115,6 @@ export default {
// display: inline-grid;
// grid-template-columns: 100px auto max-content;
//}
.app-container{
min-height: calc(100vh - 84px);
}
.demo-control-bar {
position: fixed;
right: 8px;
......@@ -174,9 +157,9 @@ export default {
color: #fafafa;
}
/* .my-process-designer {
.my-process-designer {
height: calc(100vh - 84px);
} */
}
.process-panel__container {
position: absolute;
right: 0;
......
......@@ -38,10 +38,10 @@
<!-- 操作工具栏 -->
<el-row :gutter="10" class="mb8">
<!-- <el-col :span="1.5">
<el-col :span="1.5">
<el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd"
v-hasPermi="['bpm:process-instance:query']">{{$t('发起流程')}}</el-button>
</el-col> -->
</el-col>
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
</el-row>
......
This diff is collapsed.
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment