引入 bpmnProcessDesigner 组件
YunaiV
4 years ago
parent
c84a9dd67e
commit
167692b04d
@ -0,0 +1,451 @@
|
|||||||
|
<template>
|
||||||
|
<div class="my-process-designer">
|
||||||
|
<div class="my-process-designer__header">
|
||||||
|
<slot name="control-header"></slot>
|
||||||
|
<template v-if="!$slots['control-header']">
|
||||||
|
<el-button-group key="file-control">
|
||||||
|
<el-button :size="headerButtonSize" :type="headerButtonType" icon="el-icon-folder-opened" @click="$refs.refFile.click()">打开文件</el-button>
|
||||||
|
<el-tooltip effect="light">
|
||||||
|
<div slot="content">
|
||||||
|
<el-button :size="headerButtonSize" type="text" @click="downloadProcessAsXml()">下载为XML文件</el-button>
|
||||||
|
<br />
|
||||||
|
<el-button :size="headerButtonSize" type="text" @click="downloadProcessAsSvg()">下载为SVG文件</el-button>
|
||||||
|
<br />
|
||||||
|
<el-button :size="headerButtonSize" type="text" @click="downloadProcessAsBpmn()">下载为BPMN文件</el-button>
|
||||||
|
</div>
|
||||||
|
<el-button :size="headerButtonSize" :type="headerButtonType" icon="el-icon-download">下载文件</el-button>
|
||||||
|
</el-tooltip>
|
||||||
|
<el-tooltip effect="light">
|
||||||
|
<div slot="content">
|
||||||
|
<el-button :size="headerButtonSize" type="text" @click="previewProcessXML">预览XML</el-button>
|
||||||
|
<br />
|
||||||
|
<el-button :size="headerButtonSize" type="text" @click="previewProcessJson">预览JSON</el-button>
|
||||||
|
</div>
|
||||||
|
<el-button :size="headerButtonSize" :type="headerButtonType" icon="el-icon-view">预览</el-button>
|
||||||
|
</el-tooltip>
|
||||||
|
<el-tooltip v-if="simulation" effect="light" :content="this.simulationStatus ? '退出模拟' : '开启模拟'">
|
||||||
|
<el-button :size="headerButtonSize" :type="headerButtonType" icon="el-icon-cpu" @click="processSimulation">
|
||||||
|
模拟
|
||||||
|
</el-button>
|
||||||
|
</el-tooltip>
|
||||||
|
</el-button-group>
|
||||||
|
<el-button-group key="align-control">
|
||||||
|
<el-tooltip effect="light" content="向左对齐">
|
||||||
|
<el-button :size="headerButtonSize" class="align align-left" icon="el-icon-s-data" @click="elementsAlign('left')" />
|
||||||
|
</el-tooltip>
|
||||||
|
<el-tooltip effect="light" content="向右对齐">
|
||||||
|
<el-button :size="headerButtonSize" class="align align-right" icon="el-icon-s-data" @click="elementsAlign('right')" />
|
||||||
|
</el-tooltip>
|
||||||
|
<el-tooltip effect="light" content="向上对齐">
|
||||||
|
<el-button :size="headerButtonSize" class="align align-top" icon="el-icon-s-data" @click="elementsAlign('top')" />
|
||||||
|
</el-tooltip>
|
||||||
|
<el-tooltip effect="light" content="向下对齐">
|
||||||
|
<el-button :size="headerButtonSize" class="align align-bottom" icon="el-icon-s-data" @click="elementsAlign('bottom')" />
|
||||||
|
</el-tooltip>
|
||||||
|
<el-tooltip effect="light" content="水平居中">
|
||||||
|
<el-button :size="headerButtonSize" class="align align-center" icon="el-icon-s-data" @click="elementsAlign('center')" />
|
||||||
|
</el-tooltip>
|
||||||
|
<el-tooltip effect="light" content="垂直居中">
|
||||||
|
<el-button :size="headerButtonSize" class="align align-middle" icon="el-icon-s-data" @click="elementsAlign('middle')" />
|
||||||
|
</el-tooltip>
|
||||||
|
</el-button-group>
|
||||||
|
<el-button-group key="scale-control">
|
||||||
|
<el-tooltip effect="light" content="缩小视图">
|
||||||
|
<el-button :size="headerButtonSize" :disabled="defaultZoom < 0.2" icon="el-icon-zoom-out" @click="processZoomOut()" />
|
||||||
|
</el-tooltip>
|
||||||
|
<el-button :size="headerButtonSize">{{ Math.floor(this.defaultZoom * 10 * 10) + "%" }}</el-button>
|
||||||
|
<el-tooltip effect="light" content="放大视图">
|
||||||
|
<el-button :size="headerButtonSize" :disabled="defaultZoom > 4" icon="el-icon-zoom-in" @click="processZoomIn()" />
|
||||||
|
</el-tooltip>
|
||||||
|
<el-tooltip effect="light" content="重置视图并居中">
|
||||||
|
<el-button :size="headerButtonSize" icon="el-icon-c-scale-to-original" @click="processReZoom()" />
|
||||||
|
</el-tooltip>
|
||||||
|
</el-button-group>
|
||||||
|
<el-button-group key="stack-control">
|
||||||
|
<el-tooltip effect="light" content="撤销">
|
||||||
|
<el-button :size="headerButtonSize" :disabled="!revocable" icon="el-icon-refresh-left" @click="processUndo()" />
|
||||||
|
</el-tooltip>
|
||||||
|
<el-tooltip effect="light" content="恢复">
|
||||||
|
<el-button :size="headerButtonSize" :disabled="!recoverable" icon="el-icon-refresh-right" @click="processRedo()" />
|
||||||
|
</el-tooltip>
|
||||||
|
<el-tooltip effect="light" content="重新绘制">
|
||||||
|
<el-button :size="headerButtonSize" icon="el-icon-refresh" @click="processRestart" />
|
||||||
|
</el-tooltip>
|
||||||
|
</el-button-group>
|
||||||
|
</template>
|
||||||
|
<!-- 用于打开本地文件-->
|
||||||
|
<input type="file" id="files" ref="refFile" style="display: none" accept=".xml, .bpmn" @change="importLocalFile" />
|
||||||
|
</div>
|
||||||
|
<div class="my-process-designer__container">
|
||||||
|
<div class="my-process-designer__canvas" ref="bpmn-canvas"></div>
|
||||||
|
</div>
|
||||||
|
<el-dialog title="预览" width="60%" :visible.sync="previewModelVisible" append-to-body destroy-on-close>
|
||||||
|
<highlightjs :language="previewType" :code="previewResult" />
|
||||||
|
</el-dialog>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import BpmnModeler from "bpmn-js/lib/Modeler";
|
||||||
|
import DefaultEmptyXML from "./plugins/defaultEmpty";
|
||||||
|
// 翻译方法
|
||||||
|
import customTranslate from "./plugins/translate/customTranslate";
|
||||||
|
import translationsCN from "./plugins/translate/zh";
|
||||||
|
// 模拟流转流程
|
||||||
|
import tokenSimulation from "bpmn-js-token-simulation";
|
||||||
|
// 标签解析构建器
|
||||||
|
// import bpmnPropertiesProvider from "bpmn-js-properties-panel/lib/provider/bpmn";
|
||||||
|
// 标签解析 Moddle
|
||||||
|
import camundaModdleDescriptor from "./plugins/descriptor/camundaDescriptor.json";
|
||||||
|
import activitiModdleDescriptor from "./plugins/descriptor/activitiDescriptor.json";
|
||||||
|
import flowableModdleDescriptor from "./plugins/descriptor/flowableDescriptor.json";
|
||||||
|
// 标签解析 Extension
|
||||||
|
import camundaModdleExtension from "./plugins/extension-moddle/camunda";
|
||||||
|
import activitiModdleExtension from "./plugins/extension-moddle/activiti";
|
||||||
|
import flowableModdleExtension from "./plugins/extension-moddle/flowable";
|
||||||
|
// 引入json转换与高亮
|
||||||
|
import convert from "xml-js";
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: "MyProcessDesigner",
|
||||||
|
componentName: "MyProcessDesigner",
|
||||||
|
props: {
|
||||||
|
value: String, // xml 字符串
|
||||||
|
processId: String,
|
||||||
|
processName: String,
|
||||||
|
translations: Object, // 自定义的翻译文件
|
||||||
|
additionalModel: [Object, Array], // 自定义model
|
||||||
|
moddleExtension: Object, // 自定义moddle
|
||||||
|
onlyCustomizeAddi: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false
|
||||||
|
},
|
||||||
|
onlyCustomizeModdle: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false
|
||||||
|
},
|
||||||
|
simulation: {
|
||||||
|
type: Boolean,
|
||||||
|
default: true
|
||||||
|
},
|
||||||
|
keyboard: {
|
||||||
|
type: Boolean,
|
||||||
|
default: true
|
||||||
|
},
|
||||||
|
prefix: {
|
||||||
|
type: String,
|
||||||
|
default: "camunda"
|
||||||
|
},
|
||||||
|
events: {
|
||||||
|
type: Array,
|
||||||
|
default: () => ["element.click"]
|
||||||
|
},
|
||||||
|
headerButtonSize: {
|
||||||
|
type: String,
|
||||||
|
default: "small",
|
||||||
|
validator: value => ["default", "medium", "small", "mini"].indexOf(value) !== -1
|
||||||
|
},
|
||||||
|
headerButtonType: {
|
||||||
|
type: String,
|
||||||
|
default: "primary",
|
||||||
|
validator: value => ["default", "primary", "success", "warning", "danger", "info"].indexOf(value) !== -1
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
defaultZoom: 1,
|
||||||
|
previewModelVisible: false,
|
||||||
|
simulationStatus: false,
|
||||||
|
previewResult: "",
|
||||||
|
previewType: "xml",
|
||||||
|
recoverable: false,
|
||||||
|
revocable: false
|
||||||
|
};
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
additionalModules() {
|
||||||
|
const Modules = [];
|
||||||
|
// 仅保留用户自定义扩展模块
|
||||||
|
if (this.onlyCustomizeAddi) {
|
||||||
|
if (Object.prototype.toString.call(this.additionalModel) === "[object Array]") {
|
||||||
|
return this.additionalModel || [];
|
||||||
|
}
|
||||||
|
return [this.additionalModel];
|
||||||
|
}
|
||||||
|
|
||||||
|
// 插入用户自定义扩展模块
|
||||||
|
if (Object.prototype.toString.call(this.additionalModel) === "[object Array]") {
|
||||||
|
Modules.push(...this.additionalModel);
|
||||||
|
} else {
|
||||||
|
this.additionalModel && Modules.push(this.additionalModel);
|
||||||
|
}
|
||||||
|
|
||||||
|
// 翻译模块
|
||||||
|
const TranslateModule = {
|
||||||
|
translate: ["value", customTranslate(this.translations || translationsCN)]
|
||||||
|
};
|
||||||
|
Modules.push(TranslateModule);
|
||||||
|
|
||||||
|
// 模拟流转模块
|
||||||
|
if (this.simulation) {
|
||||||
|
Modules.push(tokenSimulation);
|
||||||
|
}
|
||||||
|
|
||||||
|
// 根据需要的流程类型设置扩展元素构建模块
|
||||||
|
// if (this.prefix === "bpmn") {
|
||||||
|
// Modules.push(bpmnModdleExtension);
|
||||||
|
// }
|
||||||
|
if (this.prefix === "camunda") {
|
||||||
|
Modules.push(camundaModdleExtension);
|
||||||
|
}
|
||||||
|
if (this.prefix === "flowable") {
|
||||||
|
Modules.push(flowableModdleExtension);
|
||||||
|
}
|
||||||
|
if (this.prefix === "activiti") {
|
||||||
|
Modules.push(activitiModdleExtension);
|
||||||
|
}
|
||||||
|
|
||||||
|
return Modules;
|
||||||
|
},
|
||||||
|
moddleExtensions() {
|
||||||
|
const Extensions = {};
|
||||||
|
// 仅使用用户自定义模块
|
||||||
|
if (this.onlyCustomizeModdle) {
|
||||||
|
return this.moddleExtension || null;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 插入用户自定义模块
|
||||||
|
if (this.moddleExtension) {
|
||||||
|
for (let key in this.moddleExtension) {
|
||||||
|
Extensions[key] = this.moddleExtension[key];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 根据需要的 "流程类型" 设置 对应的解析文件
|
||||||
|
if (this.prefix === "activiti") {
|
||||||
|
Extensions.activiti = activitiModdleDescriptor;
|
||||||
|
}
|
||||||
|
if (this.prefix === "flowable") {
|
||||||
|
Extensions.flowable = flowableModdleDescriptor;
|
||||||
|
}
|
||||||
|
if (this.prefix === "camunda") {
|
||||||
|
Extensions.camunda = camundaModdleDescriptor;
|
||||||
|
}
|
||||||
|
|
||||||
|
return Extensions;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
this.initBpmnModeler();
|
||||||
|
this.createNewDiagram(this.value);
|
||||||
|
this.$once("hook:beforeDestroy", () => {
|
||||||
|
if (this.bpmnModeler) this.bpmnModeler.destroy();
|
||||||
|
this.$emit("destroy", this.bpmnModeler);
|
||||||
|
this.bpmnModeler = null;
|
||||||
|
});
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
initBpmnModeler() {
|
||||||
|
if (this.bpmnModeler) return;
|
||||||
|
this.bpmnModeler = new BpmnModeler({
|
||||||
|
container: this.$refs["bpmn-canvas"],
|
||||||
|
keyboard: this.keyboard ? { bindTo: document } : null,
|
||||||
|
additionalModules: this.additionalModules,
|
||||||
|
moddleExtensions: this.moddleExtensions
|
||||||
|
});
|
||||||
|
this.$emit("init-finished", this.bpmnModeler);
|
||||||
|
this.initModelListeners();
|
||||||
|
},
|
||||||
|
initModelListeners() {
|
||||||
|
const EventBus = this.bpmnModeler.get("eventBus");
|
||||||
|
const that = this;
|
||||||
|
// 注册需要的监听事件, 将. 替换为 - , 避免解析异常
|
||||||
|
this.events.forEach(event => {
|
||||||
|
EventBus.on(event, function(eventObj) {
|
||||||
|
let eventName = event.replace(/\./g, "-");
|
||||||
|
let element = eventObj ? eventObj.element : null;
|
||||||
|
that.$emit(eventName, element, eventObj);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
// 监听图形改变返回xml
|
||||||
|
EventBus.on("commandStack.changed", async event => {
|
||||||
|
try {
|
||||||
|
this.recoverable = this.bpmnModeler.get("commandStack").canRedo();
|
||||||
|
this.revocable = this.bpmnModeler.get("commandStack").canUndo();
|
||||||
|
let { xml } = await this.bpmnModeler.saveXML({ format: true });
|
||||||
|
this.$emit("commandStack-changed", event);
|
||||||
|
this.$emit("input", xml);
|
||||||
|
this.$emit("change", xml);
|
||||||
|
} catch (e) {
|
||||||
|
console.error(`[Process Designer Warn]: ${e.message || e}`);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
// 监听视图缩放变化
|
||||||
|
this.bpmnModeler.on("canvas.viewbox.changed", ({ viewbox }) => {
|
||||||
|
this.$emit("canvas-viewbox-changed", { viewbox });
|
||||||
|
const { scale } = viewbox;
|
||||||
|
this.defaultZoom = Math.floor(scale * 100) / 100;
|
||||||
|
});
|
||||||
|
},
|
||||||
|
/* 创建新的流程图 */
|
||||||
|
async createNewDiagram(xml) {
|
||||||
|
// 将字符串转换成图显示出来
|
||||||
|
let newId = this.processId || `Process_${new Date().getTime()}`;
|
||||||
|
let newName = this.processName || `业务流程_${new Date().getTime()}`;
|
||||||
|
let xmlString = xml || DefaultEmptyXML(newId, newName, this.prefix);
|
||||||
|
try {
|
||||||
|
console.log(this.bpmnModeler.importXML);
|
||||||
|
let { warnings } = await this.bpmnModeler.importXML(xmlString);
|
||||||
|
if (warnings && warnings.length) {
|
||||||
|
warnings.forEach(warn => console.warn(warn));
|
||||||
|
}
|
||||||
|
} catch (e) {
|
||||||
|
console.error(`[Process Designer Warn]: ${e?.message || e}`);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
// 下载流程图到本地
|
||||||
|
async downloadProcess(type, name) {
|
||||||
|
try {
|
||||||
|
const _this = this;
|
||||||
|
// 按需要类型创建文件并下载
|
||||||
|
if (type === "xml" || type === "bpmn") {
|
||||||
|
const { err, xml } = await this.bpmnModeler.saveXML();
|
||||||
|
// 读取异常时抛出异常
|
||||||
|
if (err) {
|
||||||
|
console.error(`[Process Designer Warn ]: ${err.message || err}`);
|
||||||
|
}
|
||||||
|
let { href, filename } = _this.setEncoded(type.toUpperCase(), name, xml);
|
||||||
|
downloadFunc(href, filename);
|
||||||
|
} else {
|
||||||
|
const { err, svg } = await this.bpmnModeler.saveSVG();
|
||||||
|
// 读取异常时抛出异常
|
||||||
|
if (err) {
|
||||||
|
return console.error(err);
|
||||||
|
}
|
||||||
|
let { href, filename } = _this.setEncoded("SVG", name, svg);
|
||||||
|
downloadFunc(href, filename);
|
||||||
|
}
|
||||||
|
} catch (e) {
|
||||||
|
console.error(`[Process Designer Warn ]: ${e.message || e}`);
|
||||||
|
}
|
||||||
|
// 文件下载方法
|
||||||
|
function downloadFunc(href, filename) {
|
||||||
|
if (href && filename) {
|
||||||
|
let a = document.createElement("a");
|
||||||
|
a.download = filename; //指定下载的文件名
|
||||||
|
a.href = href; // URL对象
|
||||||
|
a.click(); // 模拟点击
|
||||||
|
URL.revokeObjectURL(a.href); // 释放URL 对象
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
// 根据所需类型进行转码并返回下载地址
|
||||||
|
setEncoded(type, filename = "diagram", data) {
|
||||||
|
const encodedData = encodeURIComponent(data);
|
||||||
|
return {
|
||||||
|
filename: `${filename}.${type}`,
|
||||||
|
href: `data:application/${type === "svg" ? "text/xml" : "bpmn20-xml"};charset=UTF-8,${encodedData}`,
|
||||||
|
data: data
|
||||||
|
};
|
||||||
|
},
|
||||||
|
|
||||||
|
// 加载本地文件
|
||||||
|
importLocalFile() {
|
||||||
|
const that = this;
|
||||||
|
const file = this.$refs.refFile.files[0];
|
||||||
|
const reader = new FileReader();
|
||||||
|
reader.readAsText(file);
|
||||||
|
reader.onload = function() {
|
||||||
|
let xmlStr = this.result;
|
||||||
|
that.createNewDiagram(xmlStr);
|
||||||
|
};
|
||||||
|
},
|
||||||
|
/* ------------------------------------------------ refs methods ------------------------------------------------------ */
|
||||||
|
downloadProcessAsXml() {
|
||||||
|
this.downloadProcess("xml");
|
||||||
|
},
|
||||||
|
downloadProcessAsBpmn() {
|
||||||
|
this.downloadProcess("bpmn");
|
||||||
|
},
|
||||||
|
downloadProcessAsSvg() {
|
||||||
|
this.downloadProcess("svg");
|
||||||
|
},
|
||||||
|
processSimulation() {
|
||||||
|
this.simulationStatus = !this.simulationStatus;
|
||||||
|
this.simulation && this.bpmnModeler.get("toggleMode").toggleMode();
|
||||||
|
},
|
||||||
|
processRedo() {
|
||||||
|
this.bpmnModeler.get("commandStack").redo();
|
||||||
|
},
|
||||||
|
processUndo() {
|
||||||
|
this.bpmnModeler.get("commandStack").undo();
|
||||||
|
},
|
||||||
|
processZoomIn(zoomStep = 0.1) {
|
||||||
|
let newZoom = Math.floor(this.defaultZoom * 100 + zoomStep * 100) / 100;
|
||||||
|
if (newZoom > 4) {
|
||||||
|
throw new Error("[Process Designer Warn ]: The zoom ratio cannot be greater than 4");
|
||||||
|
}
|
||||||
|
this.defaultZoom = newZoom;
|
||||||
|
this.bpmnModeler.get("canvas").zoom(this.defaultZoom);
|
||||||
|
},
|
||||||
|
processZoomOut(zoomStep = 0.1) {
|
||||||
|
let newZoom = Math.floor(this.defaultZoom * 100 - zoomStep * 100) / 100;
|
||||||
|
if (newZoom < 0.2) {
|
||||||
|
throw new Error("[Process Designer Warn ]: The zoom ratio cannot be less than 0.2");
|
||||||
|
}
|
||||||
|
this.defaultZoom = newZoom;
|
||||||
|
this.bpmnModeler.get("canvas").zoom(this.defaultZoom);
|
||||||
|
},
|
||||||
|
processZoomTo(newZoom = 1) {
|
||||||
|
if (newZoom < 0.2) {
|
||||||
|
throw new Error("[Process Designer Warn ]: The zoom ratio cannot be less than 0.2");
|
||||||
|
}
|
||||||
|
if (newZoom > 4) {
|
||||||
|
throw new Error("[Process Designer Warn ]: The zoom ratio cannot be greater than 4");
|
||||||
|
}
|
||||||
|
this.defaultZoom = newZoom;
|
||||||
|
this.bpmnModeler.get("canvas").zoom(newZoom);
|
||||||
|
},
|
||||||
|
processReZoom() {
|
||||||
|
this.defaultZoom = 1;
|
||||||
|
this.bpmnModeler.get("canvas").zoom("fit-viewport", "auto");
|
||||||
|
},
|
||||||
|
processRestart() {
|
||||||
|
this.recoverable = false;
|
||||||
|
this.revocable = false;
|
||||||
|
this.createNewDiagram(null);
|
||||||
|
},
|
||||||
|
elementsAlign(align) {
|
||||||
|
const Align = this.bpmnModeler.get("alignElements");
|
||||||
|
const Selection = this.bpmnModeler.get("selection");
|
||||||
|
const SelectedElements = Selection.get();
|
||||||
|
if (!SelectedElements || SelectedElements.length <= 1) {
|
||||||
|
this.$message.warning("请按住 Ctrl 键选择多个元素对齐");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
this.$confirm("自动对齐可能造成图形变形，是否继续？", "警告", {
|
||||||
|
confirmButtonText: "确定",
|
||||||
|
cancelButtonText: "取消",
|
||||||
|
type: "warning"
|
||||||
|
}).then(() => Align.trigger(SelectedElements, align));
|
||||||
|
},
|
||||||
|
/*----------------------------- 方法结束 ---------------------------------*/
|
||||||
|
previewProcessXML() {
|
||||||
|
this.bpmnModeler.saveXML({ format: true }).then(({ xml }) => {
|
||||||
|
this.previewResult = xml;
|
||||||
|
this.previewType = "xml";
|
||||||
|
this.previewModelVisible = true;
|
||||||
|
});
|
||||||
|
},
|
||||||
|
previewProcessJson() {
|
||||||
|
this.bpmnModeler.saveXML({ format: true }).then(({ xml }) => {
|
||||||
|
this.previewResult = convert.xml2json(xml, { spaces: 2 });
|
||||||
|
this.previewType = "json";
|
||||||
|
this.previewModelVisible = true;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
@ -0,0 +1,7 @@
|
|||||||
|
import MyProcessDesigner from "./ProcessDesigner.vue";
|
||||||
|
|
||||||
|
MyProcessDesigner.install = function(Vue) {
|
||||||
|
Vue.component(MyProcessDesigner.name, MyProcessDesigner);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default MyProcessDesigner;
|
||||||
@ -0,0 +1,390 @@
|
|||||||
|
import { assign, forEach, isArray } from "min-dash";
|
||||||
|
|
||||||
|
import { is } from "bpmn-js/lib/util/ModelUtil";
|
||||||
|
|
||||||
|
import { isExpanded, isEventSubProcess } from "bpmn-js/lib/util/DiUtil";
|
||||||
|
|
||||||
|
import { isAny } from "bpmn-js/lib/features/modeling/util/ModelingUtil";
|
||||||
|
|
||||||
|
import { getChildLanes } from "bpmn-js/lib/features/modeling/util/LaneUtil";
|
||||||
|
|
||||||
|
import { hasPrimaryModifier } from "diagram-js/lib/util/Mouse";
|
||||||
|
|
||||||
|
/**
|
||||||
|
* A provider for BPMN 2.0 elements context pad
|
||||||
|
*/
|
||||||
|
export default function ContextPadProvider(
|
||||||
|
config,
|
||||||
|
injector,
|
||||||
|
eventBus,
|
||||||
|
contextPad,
|
||||||
|
modeling,
|
||||||
|
elementFactory,
|
||||||
|
connect,
|
||||||
|
create,
|
||||||
|
popupMenu,
|
||||||
|
canvas,
|
||||||
|
rules,
|
||||||
|
translate,
|
||||||
|
elementRegistry
|
||||||
|
) {
|
||||||
|
config = config || {};
|
||||||
|
|
||||||
|
contextPad.registerProvider(this);
|
||||||
|
|
||||||
|
this._contextPad = contextPad;
|
||||||
|
|
||||||
|
this._modeling = modeling;
|
||||||
|
|
||||||
|
this._elementFactory = elementFactory;
|
||||||
|
this._connect = connect;
|
||||||
|
this._create = create;
|
||||||
|
this._popupMenu = popupMenu;
|
||||||
|
this._canvas = canvas;
|
||||||
|
this._rules = rules;
|
||||||
|
this._translate = translate;
|
||||||
|
|
||||||
|
if (config.autoPlace !== false) {
|
||||||
|
this._autoPlace = injector.get("autoPlace", false);
|
||||||
|
}
|
||||||
|
|
||||||
|
eventBus.on("create.end", 250, function(event) {
|
||||||
|
var context = event.context,
|
||||||
|
shape = context.shape;
|
||||||
|
|
||||||
|
if (!hasPrimaryModifier(event) || !contextPad.isOpen(shape)) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
var entries = contextPad.getEntries(shape);
|
||||||
|
|
||||||
|
if (entries.replace) {
|
||||||
|
entries.replace.action.click(event, shape);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
ContextPadProvider.$inject = [
|
||||||
|
"config.contextPad",
|
||||||
|
"injector",
|
||||||
|
"eventBus",
|
||||||
|
"contextPad",
|
||||||
|
"modeling",
|
||||||
|
"elementFactory",
|
||||||
|
"connect",
|
||||||
|
"create",
|
||||||
|
"popupMenu",
|
||||||
|
"canvas",
|
||||||
|
"rules",
|
||||||
|
"translate",
|
||||||
|
"elementRegistry"
|
||||||
|
];
|
||||||
|
|
||||||
|
ContextPadProvider.prototype.getContextPadEntries = function(element) {
|
||||||
|
var contextPad = this._contextPad,
|
||||||
|
modeling = this._modeling,
|
||||||
|
elementFactory = this._elementFactory,
|
||||||
|
connect = this._connect,
|
||||||
|
create = this._create,
|
||||||
|
popupMenu = this._popupMenu,
|
||||||
|
canvas = this._canvas,
|
||||||
|
rules = this._rules,
|
||||||
|
autoPlace = this._autoPlace,
|
||||||
|
translate = this._translate;
|
||||||
|
|
||||||
|
var actions = {};
|
||||||
|
|
||||||
|
if (element.type === "label") {
|
||||||
|
return actions;
|
||||||
|
}
|
||||||
|
|
||||||
|
var businessObject = element.businessObject;
|
||||||
|
|
||||||
|
function startConnect(event, element) {
|
||||||
|
connect.start(event, element);
|
||||||
|
}
|
||||||
|
|
||||||
|
function removeElement() {
|
||||||
|
modeling.removeElements([element]);
|
||||||
|
}
|
||||||
|
|
||||||
|
function getReplaceMenuPosition(element) {
|
||||||
|
var Y_OFFSET = 5;
|
||||||
|
|
||||||
|
var diagramContainer = canvas.getContainer(),
|
||||||
|
pad = contextPad.getPad(element).html;
|
||||||
|
|
||||||
|
var diagramRect = diagramContainer.getBoundingClientRect(),
|
||||||
|
padRect = pad.getBoundingClientRect();
|
||||||
|
|
||||||
|
var top = padRect.top - diagramRect.top;
|
||||||
|
var left = padRect.left - diagramRect.left;
|
||||||
|
|
||||||
|
var pos = {
|
||||||
|
x: left,
|
||||||
|
y: top + padRect.height + Y_OFFSET
|
||||||
|
};
|
||||||
|
|
||||||
|
return pos;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Create an append action
|
||||||
|
*
|
||||||
|
* @param {string} type
|
||||||
|
* @param {string} className
|
||||||
|
* @param {string} [title]
|
||||||
|
* @param {Object} [options]
|
||||||
|
*
|
||||||
|
* @return {Object} descriptor
|
||||||
|
*/
|
||||||
|
function appendAction(type, className, title, options) {
|
||||||
|
if (typeof title !== "string") {
|
||||||
|
options = title;
|
||||||
|
title = translate("Append {type}", { type: type.replace(/^bpmn:/, "") });
|
||||||
|
}
|
||||||
|
|
||||||
|
function appendStart(event, element) {
|
||||||
|
var shape = elementFactory.createShape(assign({ type: type }, options));
|
||||||
|
create.start(event, shape, {
|
||||||
|
source: element
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
var append = autoPlace
|
||||||
|
? function(event, element) {
|
||||||
|
var shape = elementFactory.createShape(assign({ type: type }, options));
|
||||||
|
|
||||||
|
autoPlace.append(element, shape);
|
||||||
|
}
|
||||||
|
: appendStart;
|
||||||
|
|
||||||
|
return {
|
||||||
|
group: "model",
|
||||||
|
className: className,
|
||||||
|
title: title,
|
||||||
|
action: {
|
||||||
|
dragstart: appendStart,
|
||||||
|
click: append
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
function splitLaneHandler(count) {
|
||||||
|
return function(event, element) {
|
||||||
|
// actual split
|
||||||
|
modeling.splitLane(element, count);
|
||||||
|
|
||||||
|
// refresh context pad after split to
|
||||||
|
// get rid of split icons
|
||||||
|
contextPad.open(element, true);
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
if (isAny(businessObject, ["bpmn:Lane", "bpmn:Participant"]) && isExpanded(businessObject)) {
|
||||||
|
var childLanes = getChildLanes(element);
|
||||||
|
|
||||||
|
assign(actions, {
|
||||||
|
"lane-insert-above": {
|
||||||
|
group: "lane-insert-above",
|
||||||
|
className: "bpmn-icon-lane-insert-above",
|
||||||
|
title: translate("Add Lane above"),
|
||||||
|
action: {
|
||||||
|
click: function(event, element) {
|
||||||
|
modeling.addLane(element, "top");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
if (childLanes.length < 2) {
|
||||||
|
if (element.height >= 120) {
|
||||||
|
assign(actions, {
|
||||||
|
"lane-divide-two": {
|
||||||
|
group: "lane-divide",
|
||||||
|
className: "bpmn-icon-lane-divide-two",
|
||||||
|
title: translate("Divide into two Lanes"),
|
||||||
|
action: {
|
||||||
|
click: splitLaneHandler(2)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
if (element.height >= 180) {
|
||||||
|
assign(actions, {
|
||||||
|
"lane-divide-three": {
|
||||||
|
group: "lane-divide",
|
||||||
|
className: "bpmn-icon-lane-divide-three",
|
||||||
|
title: translate("Divide into three Lanes"),
|
||||||
|
action: {
|
||||||
|
click: splitLaneHandler(3)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
assign(actions, {
|
||||||
|
"lane-insert-below": {
|
||||||
|
group: "lane-insert-below",
|
||||||
|
className: "bpmn-icon-lane-insert-below",
|
||||||
|
title: translate("Add Lane below"),
|
||||||
|
action: {
|
||||||
|
click: function(event, element) {
|
||||||
|
modeling.addLane(element, "bottom");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
if (is(businessObject, "bpmn:FlowNode")) {
|
||||||
|
if (is(businessObject, "bpmn:EventBasedGateway")) {
|
||||||
|
assign(actions, {
|
||||||
|
"append.receive-task": appendAction("bpmn:ReceiveTask", "bpmn-icon-receive-task", translate("Append ReceiveTask")),
|
||||||
|
"append.message-intermediate-event": appendAction(
|
||||||
|
"bpmn:IntermediateCatchEvent",
|
||||||
|
"bpmn-icon-intermediate-event-catch-message",
|
||||||
|
translate("Append MessageIntermediateCatchEvent"),
|
||||||
|
{ eventDefinitionType: "bpmn:MessageEventDefinition" }
|
||||||
|
),
|
||||||
|
"append.timer-intermediate-event": appendAction(
|
||||||
|
"bpmn:IntermediateCatchEvent",
|
||||||
|
"bpmn-icon-intermediate-event-catch-timer",
|
||||||
|
translate("Append TimerIntermediateCatchEvent"),
|
||||||
|
{ eventDefinitionType: "bpmn:TimerEventDefinition" }
|
||||||
|
),
|
||||||
|
"append.condition-intermediate-event": appendAction(
|
||||||
|
"bpmn:IntermediateCatchEvent",
|
||||||
|
"bpmn-icon-intermediate-event-catch-condition",
|
||||||
|
translate("Append ConditionIntermediateCatchEvent"),
|
||||||
|
{ eventDefinitionType: "bpmn:ConditionalEventDefinition" }
|
||||||
|
),
|
||||||
|
"append.signal-intermediate-event": appendAction(
|
||||||
|
"bpmn:IntermediateCatchEvent",
|
||||||
|
"bpmn-icon-intermediate-event-catch-signal",
|
||||||
|
translate("Append SignalIntermediateCatchEvent"),
|
||||||
|
{ eventDefinitionType: "bpmn:SignalEventDefinition" }
|
||||||
|
)
|
||||||
|
});
|
||||||
|
} else if (isEventType(businessObject, "bpmn:BoundaryEvent", "bpmn:CompensateEventDefinition")) {
|
||||||
|
assign(actions, {
|
||||||
|
"append.compensation-activity": appendAction("bpmn:Task", "bpmn-icon-task", translate("Append compensation activity"), {
|
||||||
|
isForCompensation: true
|
||||||
|
})
|
||||||
|
});
|
||||||
|
} else if (
|
||||||
|
!is(businessObject, "bpmn:EndEvent") &&
|
||||||
|
!businessObject.isForCompensation &&
|
||||||
|
!isEventType(businessObject, "bpmn:IntermediateThrowEvent", "bpmn:LinkEventDefinition") &&
|
||||||
|
!isEventSubProcess(businessObject)
|
||||||
|
) {
|
||||||
|
assign(actions, {
|
||||||
|
"append.end-event": appendAction("bpmn:EndEvent", "bpmn-icon-end-event-none", translate("Append EndEvent")),
|
||||||
|
"append.gateway": appendAction("bpmn:ExclusiveGateway", "bpmn-icon-gateway-none", translate("Append Gateway")),
|
||||||
|
"append.append-task": appendAction("bpmn:UserTask", "bpmn-icon-user-task", translate("Append Task")),
|
||||||
|
"append.intermediate-event": appendAction(
|
||||||
|
"bpmn:IntermediateThrowEvent",
|
||||||
|
"bpmn-icon-intermediate-event-none",
|
||||||
|
translate("Append Intermediate/Boundary Event")
|
||||||
|
)
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!popupMenu.isEmpty(element, "bpmn-replace")) {
|
||||||
|
// Replace menu entry
|
||||||
|
assign(actions, {
|
||||||
|
replace: {
|
||||||
|
group: "edit",
|
||||||
|
className: "bpmn-icon-screw-wrench",
|
||||||
|
title: translate("Change type"),
|
||||||
|
action: {
|
||||||
|
click: function(event, element) {
|
||||||
|
var position = assign(getReplaceMenuPosition(element), {
|
||||||
|
cursor: { x: event.x, y: event.y }
|
||||||
|
});
|
||||||
|
|
||||||
|
popupMenu.open(element, "bpmn-replace", position);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
if (isAny(businessObject, ["bpmn:FlowNode", "bpmn:InteractionNode", "bpmn:DataObjectReference", "bpmn:DataStoreReference"])) {
|
||||||
|
assign(actions, {
|
||||||
|
"append.text-annotation": appendAction("bpmn:TextAnnotation", "bpmn-icon-text-annotation"),
|
||||||
|
|
||||||
|
connect: {
|
||||||
|
group: "connect",
|
||||||
|
className: "bpmn-icon-connection-multi",
|
||||||
|
title: translate("Connect using " + (businessObject.isForCompensation ? "" : "Sequence/MessageFlow or ") + "Association"),
|
||||||
|
action: {
|
||||||
|
click: startConnect,
|
||||||
|
dragstart: startConnect
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
if (isAny(businessObject, ["bpmn:DataObjectReference", "bpmn:DataStoreReference"])) {
|
||||||
|
assign(actions, {
|
||||||
|
connect: {
|
||||||
|
group: "connect",
|
||||||
|
className: "bpmn-icon-connection-multi",
|
||||||
|
title: translate("Connect using DataInputAssociation"),
|
||||||
|
action: {
|
||||||
|
click: startConnect,
|
||||||
|
dragstart: startConnect
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
if (is(businessObject, "bpmn:Group")) {
|
||||||
|
assign(actions, {
|
||||||
|
"append.text-annotation": appendAction("bpmn:TextAnnotation", "bpmn-icon-text-annotation")
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// delete element entry, only show if allowed by rules
|
||||||
|
var deleteAllowed = rules.allowed("elements.delete", { elements: [element] });
|
||||||
|
|
||||||
|
if (isArray(deleteAllowed)) {
|
||||||
|
// was the element returned as a deletion candidate?
|
||||||
|
deleteAllowed = deleteAllowed[0] === element;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (deleteAllowed) {
|
||||||
|
assign(actions, {
|
||||||
|
delete: {
|
||||||
|
group: "edit",
|
||||||
|
className: "bpmn-icon-trash",
|
||||||
|
title: translate("Remove"),
|
||||||
|
action: {
|
||||||
|
click: removeElement
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
return actions;
|
||||||
|
};
|
||||||
|
|
||||||
|
// helpers /////////
|
||||||
|
|
||||||
|
function isEventType(eventBo, type, definition) {
|
||||||
|
var isType = eventBo.$instanceOf(type);
|
||||||
|
var isDefinition = false;
|
||||||
|
|
||||||
|
var definitions = eventBo.eventDefinitions || [];
|
||||||
|
forEach(definitions, function(def) {
|
||||||
|
if (def.$type === definition) {
|
||||||
|
isDefinition = true;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
return isType && isDefinition;
|
||||||
|
}
|
||||||
@ -0,0 +1,6 @@
|
|||||||
|
import CustomContextPadProvider from "./contentPadProvider";
|
||||||
|
|
||||||
|
export default {
|
||||||
|
__init__: ["contextPadProvider"],
|
||||||
|
contextPadProvider: ["type", CustomContextPadProvider]
|
||||||
|
};
|
||||||
@ -0,0 +1,24 @@
|
|||||||
|
export default (key, name, type) => {
|
||||||
|
if (!type) type = "camunda";
|
||||||
|
const TYPE_TARGET = {
|
||||||
|
activiti: "http://activiti.org/bpmn",
|
||||||
|
camunda: "http://bpmn.io/schema/bpmn",
|
||||||
|
flowable: "http://flowable.org/bpmn"
|
||||||
|
};
|
||||||
|
return `<?xml version="1.0" encoding="UTF-8"?>
|
||||||
|
<bpmn2:definitions
|
||||||
|
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
|
||||||
|
xmlns:bpmn2="http://www.omg.org/spec/BPMN/20100524/MODEL"
|
||||||
|
xmlns:bpmndi="http://www.omg.org/spec/BPMN/20100524/DI"
|
||||||
|
xmlns:dc="http://www.omg.org/spec/DD/20100524/DC"
|
||||||
|
xmlns:di="http://www.omg.org/spec/DD/20100524/DI"
|
||||||
|
id="diagram_${key}"
|
||||||
|
targetNamespace="${TYPE_TARGET[type]}">
|
||||||
|
<bpmn2:process id="${key}" name="${name}" isExecutable="true">
|
||||||
|
</bpmn2:process>
|
||||||
|
<bpmndi:BPMNDiagram id="BPMNDiagram_1">
|
||||||
|
<bpmndi:BPMNPlane id="BPMNPlane_1" bpmnElement="${key}">
|
||||||
|
</bpmndi:BPMNPlane>
|
||||||
|
</bpmndi:BPMNDiagram>
|
||||||
|
</bpmn2:definitions>`;
|
||||||
|
};
|
||||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,74 @@
|
|||||||
|
"use strict";
|
||||||
|
|
||||||
|
var 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"]
|
||||||
|
};
|
||||||
|
|
||||||
|
function is(element, type) {
|
||||||
|
return element && typeof element.$instanceOf === "function" && element.$instanceOf(type);
|
||||||
|
}
|
||||||
|
|
||||||
|
function exists(element) {
|
||||||
|
return element && element.length;
|
||||||
|
}
|
||||||
|
|
||||||
|
function includesType(collection, type) {
|
||||||
|
return (
|
||||||
|
exists(collection) &&
|
||||||
|
some(collection, function(element) {
|
||||||
|
return is(element, type);
|
||||||
|
})
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function anyType(element, types) {
|
||||||
|
return some(types, function(type) {
|
||||||
|
return is(element, type);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function isAllowed(propName, propDescriptor, newElement) {
|
||||||
|
var name = propDescriptor.name,
|
||||||
|
types = ALLOWED_TYPES[name.replace(/activiti:/, "")];
|
||||||
|
|
||||||
|
return name === propName && anyType(newElement, types);
|
||||||
|
}
|
||||||
|
|
||||||
|
function ActivitiModdleExtension(eventBus) {
|
||||||
|
eventBus.on(
|
||||||
|
"property.clone",
|
||||||
|
function(context) {
|
||||||
|
var newElement = context.newElement,
|
||||||
|
propDescriptor = context.propertyDescriptor;
|
||||||
|
|
||||||
|
this.canCloneProperty(newElement, propDescriptor);
|
||||||
|
},
|
||||||
|
this
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
ActivitiModdleExtension.$inject = ["eventBus"];
|
||||||
|
|
||||||
|
ActivitiModdleExtension.prototype.canCloneProperty = function(newElement, propDescriptor) {
|
||||||
|
if (isAllowed("activiti:FailedJobRetryTimeCycle", propDescriptor, newElement)) {
|
||||||
|
return (
|
||||||
|
includesType(newElement.eventDefinitions, "bpmn:TimerEventDefinition") ||
|
||||||
|
includesType(newElement.eventDefinitions, "bpmn:SignalEventDefinition") ||
|
||||||
|
is(newElement.loopCharacteristics, "bpmn:MultiInstanceLoopCharacteristics")
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (isAllowed("activiti:Connector", propDescriptor, newElement)) {
|
||||||
|
return includesType(newElement.eventDefinitions, "bpmn:MessageEventDefinition");
|
||||||
|
}
|
||||||
|
|
||||||
|
if (isAllowed("activiti:Field", propDescriptor, newElement)) {
|
||||||
|
return includesType(newElement.eventDefinitions, "bpmn:MessageEventDefinition");
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
module.exports = ActivitiModdleExtension;
|
||||||
@ -0,0 +1,9 @@
|
|||||||
|
/*
|
||||||
|
* @author igdianov
|
||||||
|
* address https://github.com/igdianov/activiti-bpmn-moddle
|
||||||
|
* */
|
||||||
|
|
||||||
|
module.exports = {
|
||||||
|
__init__: ["ActivitiModdleExtension"],
|
||||||
|
ActivitiModdleExtension: ["type", require("./activitiExtension")]
|
||||||
|
};
|
||||||
@ -0,0 +1,148 @@
|
|||||||
|
"use strict";
|
||||||
|
|
||||||
|
var isFunction = require("min-dash").isFunction,
|
||||||
|
isObject = require("min-dash").isObject,
|
||||||
|
some = require("min-dash").some;
|
||||||
|
|
||||||
|
var WILDCARD = "*";
|
||||||
|
|
||||||
|
function CamundaModdleExtension(eventBus) {
|
||||||
|
var self = this;
|
||||||
|
|
||||||
|
eventBus.on("moddleCopy.canCopyProperty", function(context) {
|
||||||
|
var property = context.property,
|
||||||
|
parent = context.parent;
|
||||||
|
|
||||||
|
return self.canCopyProperty(property, parent);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
CamundaModdleExtension.$inject = ["eventBus"];
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Check wether to disallow copying property.
|
||||||
|
*/
|
||||||
|
CamundaModdleExtension.prototype.canCopyProperty = function(property, parent) {
|
||||||
|
// (1) check wether property is allowed in parent
|
||||||
|
if (isObject(property) && !isAllowedInParent(property, parent)) {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
|
||||||
|
// (2) check more complex scenarios
|
||||||
|
|
||||||
|
if (is(property, "camunda:InputOutput") && !this.canHostInputOutput(parent)) {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (isAny(property, ["camunda:Connector", "camunda:Field"]) && !this.canHostConnector(parent)) {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (is(property, "camunda:In") && !this.canHostIn(parent)) {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
CamundaModdleExtension.prototype.canHostInputOutput = function(parent) {
|
||||||
|
// allowed in camunda:Connector
|
||||||
|
var connector = getParent(parent, "camunda:Connector");
|
||||||
|
|
||||||
|
if (connector) {
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
|
||||||
|
// special rules inside bpmn:FlowNode
|
||||||
|
var flowNode = getParent(parent, "bpmn:FlowNode");
|
||||||
|
|
||||||
|
if (!flowNode) {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (isAny(flowNode, ["bpmn:StartEvent", "bpmn:Gateway", "bpmn:BoundaryEvent"])) {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (is(flowNode, "bpmn:SubProcess") && flowNode.get("triggeredByEvent")) {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
|
||||||
|
return true;
|
||||||
|
};
|
||||||
|
|
||||||
|
CamundaModdleExtension.prototype.canHostConnector = function(parent) {
|
||||||
|
var serviceTaskLike = getParent(parent, "camunda:ServiceTaskLike");
|
||||||
|
|
||||||
|
if (is(serviceTaskLike, "bpmn:MessageEventDefinition")) {
|
||||||
|
// only allow on throw and end events
|
||||||
|
return getParent(parent, "bpmn:IntermediateThrowEvent") || getParent(parent, "bpmn:EndEvent");
|
||||||
|
}
|
||||||
|
|
||||||
|
return true;
|
||||||
|
};
|
||||||
|
|
||||||
|
CamundaModdleExtension.prototype.canHostIn = function(parent) {
|
||||||
|
var callActivity = getParent(parent, "bpmn:CallActivity");
|
||||||
|
|
||||||
|
if (callActivity) {
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
|
||||||
|
var signalEventDefinition = getParent(parent, "bpmn:SignalEventDefinition");
|
||||||
|
|
||||||
|
if (signalEventDefinition) {
|
||||||
|
// only allow on throw and end events
|
||||||
|
return getParent(parent, "bpmn:IntermediateThrowEvent") || getParent(parent, "bpmn:EndEvent");
|
||||||
|
}
|
||||||
|
|
||||||
|
return true;
|
||||||
|
};
|
||||||
|
|
||||||
|
module.exports = CamundaModdleExtension;
|
||||||
|
|
||||||
|
// helpers //////////
|
||||||
|
|
||||||
|
function is(element, type) {
|
||||||
|
return element && isFunction(element.$instanceOf) && element.$instanceOf(type);
|
||||||
|
}
|
||||||
|
|
||||||
|
function isAny(element, types) {
|
||||||
|
return some(types, function(t) {
|
||||||
|
return is(element, t);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function getParent(element, type) {
|
||||||
|
if (!type) {
|
||||||
|
return element.$parent;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (is(element, type)) {
|
||||||
|
return element;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!element.$parent) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
return getParent(element.$parent, type);
|
||||||
|
}
|
||||||
|
|
||||||
|
function isAllowedInParent(property, parent) {
|
||||||
|
// (1) find property descriptor
|
||||||
|
var descriptor = property.$type && property.$model.getTypeDescriptor(property.$type);
|
||||||
|
|
||||||
|
var allowedIn = descriptor && descriptor.meta && descriptor.meta.allowedIn;
|
||||||
|
|
||||||
|
if (!allowedIn || isWildcard(allowedIn)) {
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
|
||||||
|
// (2) check wether property has parent of allowed type
|
||||||
|
return some(allowedIn, function(type) {
|
||||||
|
return getParent(parent, type);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function isWildcard(allowedIn) {
|
||||||
|
return allowedIn.indexOf(WILDCARD) !== -1;
|
||||||
|
}
|
||||||
@ -0,0 +1,6 @@
|
|||||||
|
"use strict";
|
||||||
|
|
||||||
|
module.exports = {
|
||||||
|
__init__: ["camundaModdleExtension"],
|
||||||
|
camundaModdleExtension: ["type", require("./extension")]
|
||||||
|
};
|
||||||
@ -0,0 +1,74 @@
|
|||||||
|
"use strict";
|
||||||
|
|
||||||
|
var 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"]
|
||||||
|
};
|
||||||
|
|
||||||
|
function is(element, type) {
|
||||||
|
return element && typeof element.$instanceOf === "function" && element.$instanceOf(type);
|
||||||
|
}
|
||||||
|
|
||||||
|
function exists(element) {
|
||||||
|
return element && element.length;
|
||||||
|
}
|
||||||
|
|
||||||
|
function includesType(collection, type) {
|
||||||
|
return (
|
||||||
|
exists(collection) &&
|
||||||
|
some(collection, function(element) {
|
||||||
|
return is(element, type);
|
||||||
|
})
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function anyType(element, types) {
|
||||||
|
return some(types, function(type) {
|
||||||
|
return is(element, type);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function isAllowed(propName, propDescriptor, newElement) {
|
||||||
|
var name = propDescriptor.name,
|
||||||
|
types = ALLOWED_TYPES[name.replace(/flowable:/, "")];
|
||||||
|
|
||||||
|
return name === propName && anyType(newElement, types);
|
||||||
|
}
|
||||||
|
|
||||||
|
function FlowableModdleExtension(eventBus) {
|
||||||
|
eventBus.on(
|
||||||
|
"property.clone",
|
||||||
|
function(context) {
|
||||||
|
var newElement = context.newElement,
|
||||||
|
propDescriptor = context.propertyDescriptor;
|
||||||
|
|
||||||
|
this.canCloneProperty(newElement, propDescriptor);
|
||||||
|
},
|
||||||
|
this
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
FlowableModdleExtension.$inject = ["eventBus"];
|
||||||
|
|
||||||
|
FlowableModdleExtension.prototype.canCloneProperty = function(newElement, propDescriptor) {
|
||||||
|
if (isAllowed("flowable:FailedJobRetryTimeCycle", propDescriptor, newElement)) {
|
||||||
|
return (
|
||||||
|
includesType(newElement.eventDefinitions, "bpmn:TimerEventDefinition") ||
|
||||||
|
includesType(newElement.eventDefinitions, "bpmn:SignalEventDefinition") ||
|
||||||
|
is(newElement.loopCharacteristics, "bpmn:MultiInstanceLoopCharacteristics")
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (isAllowed("flowable:Connector", propDescriptor, newElement)) {
|
||||||
|
return includesType(newElement.eventDefinitions, "bpmn:MessageEventDefinition");
|
||||||
|
}
|
||||||
|
|
||||||
|
if (isAllowed("flowable:Field", propDescriptor, newElement)) {
|
||||||
|
return includesType(newElement.eventDefinitions, "bpmn:MessageEventDefinition");
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
module.exports = FlowableModdleExtension;
|
||||||
@ -0,0 +1,9 @@
|
|||||||
|
/*
|
||||||
|
* @author igdianov
|
||||||
|
* address https://github.com/igdianov/activiti-bpmn-moddle
|
||||||
|
* */
|
||||||
|
|
||||||
|
module.exports = {
|
||||||
|
__init__: ["FlowableModdleExtension"],
|
||||||
|
FlowableModdleExtension: ["type", require("./flowableExtension")]
|
||||||
|
};
|
||||||
@ -0,0 +1,23 @@
|
|||||||
|
// import PaletteModule from "diagram-js/lib/features/palette";
|
||||||
|
// import CreateModule from "diagram-js/lib/features/create";
|
||||||
|
// import SpaceToolModule from "diagram-js/lib/features/space-tool";
|
||||||
|
// import LassoToolModule from "diagram-js/lib/features/lasso-tool";
|
||||||
|
// import HandToolModule from "diagram-js/lib/features/hand-tool";
|
||||||
|
// import GlobalConnectModule from "diagram-js/lib/features/global-connect";
|
||||||
|
// import translate from "diagram-js/lib/i18n/translate";
|
||||||
|
//
|
||||||
|
// import PaletteProvider from "./paletteProvider";
|
||||||
|
//
|
||||||
|
// export default {
|
||||||
|
// __depends__: [PaletteModule, CreateModule, SpaceToolModule, LassoToolModule, HandToolModule, GlobalConnectModule, translate],
|
||||||
|
// __init__: ["paletteProvider"],
|
||||||
|
// paletteProvider: ["type", PaletteProvider]
|
||||||
|
// };
|
||||||
|
|
||||||
|
// custom/index.js
|
||||||
|
import CustomPalette from "./CustomPalette";
|
||||||
|
|
||||||
|
export default {
|
||||||
|
__init__: ["paletteProvider"],
|
||||||
|
paletteProvider: ["type", CustomPalette]
|
||||||
|
};
|
||||||
@ -0,0 +1,160 @@
|
|||||||
|
import { assign } from "min-dash";
|
||||||
|
|
||||||
|
/**
|
||||||
|
* A palette provider for BPMN 2.0 elements.
|
||||||
|
*/
|
||||||
|
export default function PaletteProvider(palette, create, elementFactory, spaceTool, lassoTool, handTool, globalConnect, translate) {
|
||||||
|
this._palette = palette;
|
||||||
|
this._create = create;
|
||||||
|
this._elementFactory = elementFactory;
|
||||||
|
this._spaceTool = spaceTool;
|
||||||
|
this._lassoTool = lassoTool;
|
||||||
|
this._handTool = handTool;
|
||||||
|
this._globalConnect = globalConnect;
|
||||||
|
this._translate = translate;
|
||||||
|
|
||||||
|
palette.registerProvider(this);
|
||||||
|
}
|
||||||
|
|
||||||
|
PaletteProvider.$inject = ["palette", "create", "elementFactory", "spaceTool", "lassoTool", "handTool", "globalConnect", "translate"];
|
||||||
|
|
||||||
|
PaletteProvider.prototype.getPaletteEntries = function() {
|
||||||
|
var actions = {},
|
||||||
|
create = this._create,
|
||||||
|
elementFactory = this._elementFactory,
|
||||||
|
spaceTool = this._spaceTool,
|
||||||
|
lassoTool = this._lassoTool,
|
||||||
|
handTool = this._handTool,
|
||||||
|
globalConnect = this._globalConnect,
|
||||||
|
translate = this._translate;
|
||||||
|
|
||||||
|
function createAction(type, group, className, title, options) {
|
||||||
|
function createListener(event) {
|
||||||
|
var shape = elementFactory.createShape(assign({ type: type }, options));
|
||||||
|
|
||||||
|
if (options) {
|
||||||
|
shape.businessObject.di.isExpanded = options.isExpanded;
|
||||||
|
}
|
||||||
|
|
||||||
|
create.start(event, shape);
|
||||||
|
}
|
||||||
|
|
||||||
|
var shortType = type.replace(/^bpmn:/, "");
|
||||||
|
|
||||||
|
return {
|
||||||
|
group: group,
|
||||||
|
className: className,
|
||||||
|
title: title || translate("Create {type}", { type: shortType }),
|
||||||
|
action: {
|
||||||
|
dragstart: createListener,
|
||||||
|
click: createListener
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
function createSubprocess(event) {
|
||||||
|
var subProcess = elementFactory.createShape({
|
||||||
|
type: "bpmn:SubProcess",
|
||||||
|
x: 0,
|
||||||
|
y: 0,
|
||||||
|
isExpanded: true
|
||||||
|
});
|
||||||
|
|
||||||
|
var startEvent = elementFactory.createShape({
|
||||||
|
type: "bpmn:StartEvent",
|
||||||
|
x: 40,
|
||||||
|
y: 82,
|
||||||
|
parent: subProcess
|
||||||
|
});
|
||||||
|
|
||||||
|
create.start(event, [subProcess, startEvent], {
|
||||||
|
hints: {
|
||||||
|
autoSelect: [startEvent]
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function createParticipant(event) {
|
||||||
|
create.start(event, elementFactory.createParticipantShape());
|
||||||
|
}
|
||||||
|
|
||||||
|
assign(actions, {
|
||||||
|
"hand-tool": {
|
||||||
|
group: "tools",
|
||||||
|
className: "bpmn-icon-hand-tool",
|
||||||
|
title: translate("Activate the hand tool"),
|
||||||
|
action: {
|
||||||
|
click: function(event) {
|
||||||
|
handTool.activateHand(event);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"lasso-tool": {
|
||||||
|
group: "tools",
|
||||||
|
className: "bpmn-icon-lasso-tool",
|
||||||
|
title: translate("Activate the lasso tool"),
|
||||||
|
action: {
|
||||||
|
click: function(event) {
|
||||||
|
lassoTool.activateSelection(event);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"space-tool": {
|
||||||
|
group: "tools",
|
||||||
|
className: "bpmn-icon-space-tool",
|
||||||
|
title: translate("Activate the create/remove space tool"),
|
||||||
|
action: {
|
||||||
|
click: function(event) {
|
||||||
|
spaceTool.activateSelection(event);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"global-connect-tool": {
|
||||||
|
group: "tools",
|
||||||
|
className: "bpmn-icon-connection-multi",
|
||||||
|
title: translate("Activate the global connect tool"),
|
||||||
|
action: {
|
||||||
|
click: function(event) {
|
||||||
|
globalConnect.toggle(event);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"tool-separator": {
|
||||||
|
group: "tools",
|
||||||
|
separator: true
|
||||||
|
},
|
||||||
|
"create.start-event": createAction("bpmn:StartEvent", "event", "bpmn-icon-start-event-none", translate("Create StartEvent")),
|
||||||
|
"create.intermediate-event": createAction(
|
||||||
|
"bpmn:IntermediateThrowEvent",
|
||||||
|
"event",
|
||||||
|
"bpmn-icon-intermediate-event-none",
|
||||||
|
translate("Create Intermediate/Boundary Event")
|
||||||
|
),
|
||||||
|
"create.end-event": createAction("bpmn:EndEvent", "event", "bpmn-icon-end-event-none", translate("Create EndEvent")),
|
||||||
|
"create.exclusive-gateway": createAction("bpmn:ExclusiveGateway", "gateway", "bpmn-icon-gateway-none", translate("Create Gateway")),
|
||||||
|
"create.user-task": createAction("bpmn:UserTask", "activity", "bpmn-icon-user-task", translate("Create User Task")),
|
||||||
|
"create.data-object": createAction("bpmn:DataObjectReference", "data-object", "bpmn-icon-data-object", translate("Create DataObjectReference")),
|
||||||
|
"create.data-store": createAction("bpmn:DataStoreReference", "data-store", "bpmn-icon-data-store", translate("Create DataStoreReference")),
|
||||||
|
"create.subprocess-expanded": {
|
||||||
|
group: "activity",
|
||||||
|
className: "bpmn-icon-subprocess-expanded",
|
||||||
|
title: translate("Create expanded SubProcess"),
|
||||||
|
action: {
|
||||||
|
dragstart: createSubprocess,
|
||||||
|
click: createSubprocess
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"create.participant-expanded": {
|
||||||
|
group: "collaboration",
|
||||||
|
className: "bpmn-icon-participant",
|
||||||
|
title: translate("Create Pool/Participant"),
|
||||||
|
action: {
|
||||||
|
dragstart: createParticipant,
|
||||||
|
click: createParticipant
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"create.group": createAction("bpmn:Group", "artifact", "bpmn-icon-group", translate("Create Group"))
|
||||||
|
});
|
||||||
|
|
||||||
|
return actions;
|
||||||
|
};
|
||||||
@ -0,0 +1,41 @@
|
|||||||
|
// import translations from "./zh";
|
||||||
|
//
|
||||||
|
// export default function customTranslate(template, replacements) {
|
||||||
|
// replacements = replacements || {};
|
||||||
|
//
|
||||||
|
// // Translate
|
||||||
|
// template = translations[template] || template;
|
||||||
|
//
|
||||||
|
// // Replace
|
||||||
|
// return template.replace(/{([^}]+)}/g, function(_, key) {
|
||||||
|
// let str = replacements[key];
|
||||||
|
// if (
|
||||||
|
// translations[replacements[key]] !== null &&
|
||||||
|
// translations[replacements[key]] !== "undefined"
|
||||||
|
// ) {
|
||||||
|
// // eslint-disable-next-line no-mixed-spaces-and-tabs
|
||||||
|
// str = translations[replacements[key]];
|
||||||
|
// // eslint-disable-next-line no-mixed-spaces-and-tabs
|
||||||
|
// }
|
||||||
|
// return str || "{" + key + "}";
|
||||||
|
// });
|
||||||
|
// }
|
||||||
|
|
||||||
|
export default function customTranslate(translations) {
|
||||||
|
return function(template, replacements) {
|
||||||
|
replacements = replacements || {};
|
||||||
|
// Translate
|
||||||
|
template = translations[template] || template;
|
||||||
|
|
||||||
|
// Replace
|
||||||
|
return template.replace(/{([^}]+)}/g, function(_, key) {
|
||||||
|
let str = replacements[key];
|
||||||
|
if (translations[replacements[key]] !== null && translations[replacements[key]] !== undefined) {
|
||||||
|
// eslint-disable-next-line no-mixed-spaces-and-tabs
|
||||||
|
str = translations[replacements[key]];
|
||||||
|
// eslint-disable-next-line no-mixed-spaces-and-tabs
|
||||||
|
}
|
||||||
|
return str || "{" + key + "}";
|
||||||
|
});
|
||||||
|
};
|
||||||
|
}
|
||||||
@ -0,0 +1,20 @@
|
|||||||
|
import MyProcessDesigner from "./designer";
|
||||||
|
import MyProcessPenal from "./penal";
|
||||||
|
|
||||||
|
const components = [MyProcessDesigner, MyProcessPenal];
|
||||||
|
|
||||||
|
const install = function(Vue) {
|
||||||
|
components.forEach(component => {
|
||||||
|
Vue.component(component.name, component);
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
if (typeof window !== "undefined" && window.Vue) {
|
||||||
|
install(window.Vue);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default {
|
||||||
|
version: "0.0.1",
|
||||||
|
install,
|
||||||
|
...components
|
||||||
|
};
|
||||||
@ -0,0 +1,48 @@
|
|||||||
|
<template>
|
||||||
|
<div class="my-process-palette">
|
||||||
|
<div class="test-button" @click="addTask" @mousedown="addTask">测试任务</div>
|
||||||
|
<div class="test-container" id="palette-container">1</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { assign } from "min-dash";
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: "MyProcessPalette",
|
||||||
|
data() {
|
||||||
|
return {};
|
||||||
|
},
|
||||||
|
mounted() {},
|
||||||
|
methods: {
|
||||||
|
addTask(event, options = {}) {
|
||||||
|
const ElementFactory = window.bpmnInstances.elementFactory;
|
||||||
|
const create = window.bpmnInstances.modeler.get("create");
|
||||||
|
|
||||||
|
console.log(ElementFactory, create);
|
||||||
|
|
||||||
|
const shape = ElementFactory.createShape(assign({ type: "bpmn:UserTask" }, options));
|
||||||
|
|
||||||
|
if (options) {
|
||||||
|
shape.businessObject.di.isExpanded = options.isExpanded;
|
||||||
|
}
|
||||||
|
|
||||||
|
create.start(event, shape);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
.my-process-palette {
|
||||||
|
box-sizing: border-box;
|
||||||
|
padding: 80px 20px 20px 20px;
|
||||||
|
.test-button {
|
||||||
|
box-sizing: border-box;
|
||||||
|
padding: 8px 16px;
|
||||||
|
border-radius: 4px;
|
||||||
|
border: 1px solid rgba(24, 144, 255, 0.8);
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,75 @@
|
|||||||
|
<template>
|
||||||
|
<div class="panel-tab__content">
|
||||||
|
<el-form size="mini" label-width="90px" @submit.native.prevent>
|
||||||
|
<el-form-item label="ID">
|
||||||
|
<el-input
|
||||||
|
v-model="elementBaseInfo.id"
|
||||||
|
:disabled="idEditDisabled || elementBaseInfo.$type === 'bpmn:Process'"
|
||||||
|
clearable
|
||||||
|
@change="updateBaseInfo('id')"
|
||||||
|
/>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="名称">
|
||||||
|
<el-input v-model="elementBaseInfo.name" clearable @change="updateBaseInfo('name')" />
|
||||||
|
</el-form-item>
|
||||||
|
<!--流程的基础属性-->
|
||||||
|
<template v-if="elementBaseInfo.$type === 'bpmn:Process'">
|
||||||
|
<el-form-item label="版本标签">
|
||||||
|
<el-input v-model="elementBaseInfo.versionTag" clearable @change="updateBaseInfo('versionTag')" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="可执行">
|
||||||
|
<el-switch v-model="elementBaseInfo.isExecutable" active-text="是" inactive-text="否" @change="updateBaseInfo('isExecutable')" />
|
||||||
|
</el-form-item>
|
||||||
|
</template>
|
||||||
|
</el-form>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: "ElementBaseInfo",
|
||||||
|
props: {
|
||||||
|
businessObject: Object,
|
||||||
|
type: String,
|
||||||
|
idEditDisabled: {
|
||||||
|
type: Boolean,
|
||||||
|
default: true
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
elementBaseInfo: {}
|
||||||
|
};
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
businessObject: {
|
||||||
|
immediate: false,
|
||||||
|
handler: function(val) {
|
||||||
|
if (val) {
|
||||||
|
this.$nextTick(() => this.resetBaseInfo());
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
resetBaseInfo() {
|
||||||
|
this.bpmnElement = window?.bpmnInstances?.bpmnElement;
|
||||||
|
this.elementBaseInfo = JSON.parse(JSON.stringify(this.bpmnElement.businessObject));
|
||||||
|
},
|
||||||
|
updateBaseInfo(key) {
|
||||||
|
const attrObj = Object.create(null);
|
||||||
|
attrObj[key] = this.elementBaseInfo[key];
|
||||||
|
if (key === "id") {
|
||||||
|
window.bpmnInstances.modeling.updateProperties(this.bpmnElement, {
|
||||||
|
id: this.elementBaseInfo[key],
|
||||||
|
di: { id: `${this.elementBaseInfo[key]}_di` }
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
window.bpmnInstances.modeling.updateProperties(this.bpmnElement, attrObj);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
beforeDestroy() {
|
||||||
|
this.bpmnElement = null;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
@ -0,0 +1,7 @@
|
|||||||
|
import MyPropertiesPanel from "./PropertiesPanel.vue";
|
||||||
|
|
||||||
|
MyPropertiesPanel.install = function(Vue) {
|
||||||
|
Vue.component(MyPropertiesPanel.name, MyPropertiesPanel);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default MyPropertiesPanel;
|
||||||
@ -0,0 +1,62 @@
|
|||||||
|
// 初始化表单数据
|
||||||
|
export function initListenerForm(listener) {
|
||||||
|
let self = {
|
||||||
|
...listener
|
||||||
|
};
|
||||||
|
if (listener.script) {
|
||||||
|
self = {
|
||||||
|
...listener,
|
||||||
|
...listener.script,
|
||||||
|
scriptType: listener.script.resource ? "externalScript" : "inlineScript"
|
||||||
|
};
|
||||||
|
}
|
||||||
|
if (listener.event === "timeout" && listener.eventDefinitions) {
|
||||||
|
if (listener.eventDefinitions.length) {
|
||||||
|
let k = "";
|
||||||
|
for (let key in listener.eventDefinitions[0]) {
|
||||||
|
console.log(listener.eventDefinitions, key);
|
||||||
|
if (key.indexOf("time") !== -1) {
|
||||||
|
k = key;
|
||||||
|
self.eventDefinitionType = key.replace("time", "").toLowerCase();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
console.log(k);
|
||||||
|
self.eventTimeDefinitions = listener.eventDefinitions[0][k].body;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return self;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function initListenerType(listener) {
|
||||||
|
let listenerType;
|
||||||
|
if (listener.class) listenerType = "classListener";
|
||||||
|
if (listener.expression) listenerType = "expressionListener";
|
||||||
|
if (listener.delegateExpression) listenerType = "delegateExpressionListener";
|
||||||
|
if (listener.script) listenerType = "scriptListener";
|
||||||
|
return {
|
||||||
|
...JSON.parse(JSON.stringify(listener)),
|
||||||
|
...(listener.script ?? {}),
|
||||||
|
listenerType: listenerType
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
export const listenerType = {
|
||||||
|
classListener: "Java 类",
|
||||||
|
expressionListener: "表达式",
|
||||||
|
delegateExpressionListener: "代理表达式",
|
||||||
|
scriptListener: "脚本"
|
||||||
|
};
|
||||||
|
|
||||||
|
export const eventType = {
|
||||||
|
create: "创建",
|
||||||
|
assignment: "指派",
|
||||||
|
complete: "完成",
|
||||||
|
delete: "删除",
|
||||||
|
update: "更新",
|
||||||
|
timeout: "超时"
|
||||||
|
};
|
||||||
|
|
||||||
|
export const fieldType = {
|
||||||
|
string: "字符串",
|
||||||
|
expression: "表达式"
|
||||||
|
};
|
||||||
@ -0,0 +1,135 @@
|
|||||||
|
<template>
|
||||||
|
<div class="panel-tab__content">
|
||||||
|
<el-table :data="elementPropertyList" size="mini" max-height="240" border fit>
|
||||||
|
<el-table-column label="序号" width="50px" type="index" />
|
||||||
|
<el-table-column label="属性名" prop="name" min-width="100px" show-overflow-tooltip />
|
||||||
|
<el-table-column label="属性值" prop="value" min-width="100px" show-overflow-tooltip />
|
||||||
|
<el-table-column label="操作" width="90px">
|
||||||
|
<template slot-scope="{ row, $index }">
|
||||||
|
<el-button size="mini" type="text" @click="openAttributesForm(row, $index)">编辑</el-button>
|
||||||
|
<el-divider direction="vertical" />
|
||||||
|
<el-button size="mini" type="text" style="color: #ff4d4f" @click="removeAttributes(row, $index)">移除</el-button>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
</el-table>
|
||||||
|
<div class="element-drawer__button">
|
||||||
|
<el-button size="mini" type="primary" icon="el-icon-plus" @click="openAttributesForm(null, -1)">添加属性</el-button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<el-dialog :visible.sync="propertyFormModelVisible" title="属性配置" width="600px" append-to-body destroy-on-close>
|
||||||
|
<el-form :model="propertyForm" label-width="80px" size="mini" ref="attributeFormRef" @submit.native.prevent>
|
||||||
|
<el-form-item label="属性名：" prop="name">
|
||||||
|
<el-input v-model="propertyForm.name" clearable />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="属性值：" prop="value">
|
||||||
|
<el-input v-model="propertyForm.value" clearable />
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
<template slot="footer">
|
||||||
|
<el-button size="mini" @click="propertyFormModelVisible = false">取 消</el-button>
|
||||||
|
<el-button size="mini" type="primary" @click="saveAttribute">确 定</el-button>
|
||||||
|
</template>
|
||||||
|
</el-dialog>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: "ElementProperties",
|
||||||
|
props: {
|
||||||
|
id: String,
|
||||||
|
type: String
|
||||||
|
},
|
||||||
|
inject: {
|
||||||
|
prefix: "prefix",
|
||||||
|
width: "width"
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
elementPropertyList: [],
|
||||||
|
propertyForm: {},
|
||||||
|
editingPropertyIndex: -1,
|
||||||
|
propertyFormModelVisible: false
|
||||||
|
};
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
id: {
|
||||||
|
immediate: true,
|
||||||
|
handler(val) {
|
||||||
|
val && val.length && this.resetAttributesList();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
resetAttributesList() {
|
||||||
|
this.bpmnElement = window.bpmnInstances.bpmnElement;
|
||||||
|
this.otherExtensionList = []; // 其他扩展配置
|
||||||
|
this.bpmnElementProperties =
|
||||||
|
this.bpmnElement.businessObject?.extensionElements?.values?.filter(ex => {
|
||||||
|
if (ex.$type !== `${this.prefix}:Properties`) {
|
||||||
|
this.otherExtensionList.push(ex);
|
||||||
|
}
|
||||||
|
return ex.$type === `${this.prefix}:Properties`;
|
||||||
|
}) ?? [];
|
||||||
|
|
||||||
|
// 保存所有的 扩展属性字段
|
||||||
|
this.bpmnElementPropertyList = this.bpmnElementProperties.reduce((pre, current) => pre.concat(current.values), []);
|
||||||
|
// 复制 显示
|
||||||
|
this.elementPropertyList = JSON.parse(JSON.stringify(this.bpmnElementPropertyList ?? []));
|
||||||
|
},
|
||||||
|
openAttributesForm(attr, index) {
|
||||||
|
this.editingPropertyIndex = index;
|
||||||
|
this.propertyForm = index === -1 ? {} : JSON.parse(JSON.stringify(attr));
|
||||||
|
this.propertyFormModelVisible = true;
|
||||||
|
this.$nextTick(() => {
|
||||||
|
if (this.$refs["attributeFormRef"]) this.$refs["attributeFormRef"].clearValidate();
|
||||||
|
});
|
||||||
|
},
|
||||||
|
removeAttributes(attr, index) {
|
||||||
|
this.$confirm("确认移除该属性吗？", "提示", {
|
||||||
|
confirmButtonText: "确 认",
|
||||||
|
cancelButtonText: "取 消"
|
||||||
|
})
|
||||||
|
.then(() => {
|
||||||
|
this.elementPropertyList.splice(index, 1);
|
||||||
|
this.bpmnElementPropertyList.splice(index, 1);
|
||||||
|
// 新建一个属性字段的保存列表
|
||||||
|
const propertiesObject = window.bpmnInstances.moddle.create(`${this.prefix}:Properties`, {
|
||||||
|
values: this.bpmnElementPropertyList
|
||||||
|
});
|
||||||
|
this.updateElementExtensions(propertiesObject);
|
||||||
|
this.resetAttributesList();
|
||||||
|
})
|
||||||
|
.catch(() => console.info("操作取消"));
|
||||||
|
},
|
||||||
|
saveAttribute() {
|
||||||
|
const { name, value } = this.propertyForm;
|
||||||
|
console.log(this.bpmnElementPropertyList);
|
||||||
|
if (this.editingPropertyIndex !== -1) {
|
||||||
|
window.bpmnInstances.modeling.updateModdleProperties(this.bpmnElement, this.bpmnElementPropertyList[this.editingPropertyIndex], {
|
||||||
|
name,
|
||||||
|
value
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
// 新建属性字段
|
||||||
|
const newPropertyObject = window.bpmnInstances.moddle.create(`${this.prefix}:Property`, { name, value });
|
||||||
|
// 新建一个属性字段的保存列表
|
||||||
|
const propertiesObject = window.bpmnInstances.moddle.create(`${this.prefix}:Properties`, {
|
||||||
|
values: this.bpmnElementPropertyList.concat([newPropertyObject])
|
||||||
|
});
|
||||||
|
this.updateElementExtensions(propertiesObject);
|
||||||
|
}
|
||||||
|
this.propertyFormModelVisible = false;
|
||||||
|
this.resetAttributesList();
|
||||||
|
},
|
||||||
|
updateElementExtensions(properties) {
|
||||||
|
const extensions = window.bpmnInstances.moddle.create("bpmn:ExtensionElements", {
|
||||||
|
values: this.otherExtensionList.concat([properties])
|
||||||
|
});
|
||||||
|
window.bpmnInstances.modeling.updateProperties(this.bpmnElement, {
|
||||||
|
extensionElements: extensions
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
@ -0,0 +1,85 @@
|
|||||||
|
<template>
|
||||||
|
<div style="margin-top: 16px">
|
||||||
|
<el-form-item label="脚本格式">
|
||||||
|
<el-input v-model="scriptTaskForm.scriptFormat" clearable @input="updateElementTask()" @change="updateElementTask()" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="脚本类型">
|
||||||
|
<el-select v-model="scriptTaskForm.scriptType">
|
||||||
|
<el-option label="内联脚本" value="inline" />
|
||||||
|
<el-option label="外部资源" value="external" />
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="脚本" v-show="scriptTaskForm.scriptType === 'inline'">
|
||||||
|
<el-input
|
||||||
|
v-model="scriptTaskForm.script"
|
||||||
|
type="textarea"
|
||||||
|
resize="vertical"
|
||||||
|
:autosize="{ minRows: 2, maxRows: 4 }"
|
||||||
|
clearable
|
||||||
|
@input="updateElementTask()"
|
||||||
|
@change="updateElementTask()"
|
||||||
|
/>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="资源地址" v-show="scriptTaskForm.scriptType === 'external'">
|
||||||
|
<el-input v-model="scriptTaskForm.resource" clearable @input="updateElementTask()" @change="updateElementTask()" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="结果变量">
|
||||||
|
<el-input v-model="scriptTaskForm.resultVariable" clearable @input="updateElementTask()" @change="updateElementTask()" />
|
||||||
|
</el-form-item>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: "ScriptTask",
|
||||||
|
props: {
|
||||||
|
id: String,
|
||||||
|
type: String
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
defaultTaskForm: {
|
||||||
|
scriptFormat: "",
|
||||||
|
script: "",
|
||||||
|
resource: "",
|
||||||
|
resultVariable: ""
|
||||||
|
},
|
||||||
|
scriptTaskForm: {}
|
||||||
|
};
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
id: {
|
||||||
|
immediate: true,
|
||||||
|
handler() {
|
||||||
|
this.bpmnElement = window.bpmnInstances.bpmnElement;
|
||||||
|
this.$nextTick(() => this.resetTaskForm());
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
resetTaskForm() {
|
||||||
|
for (let key in this.defaultTaskForm) {
|
||||||
|
let value = this.bpmnElement?.businessObject[key] || this.defaultTaskForm[key];
|
||||||
|
this.$set(this.scriptTaskForm, key, value);
|
||||||
|
}
|
||||||
|
this.$set(this.scriptTaskForm, "scriptType", this.scriptTaskForm.script ? "inline" : "external");
|
||||||
|
},
|
||||||
|
updateElementTask() {
|
||||||
|
let taskAttr = Object.create(null);
|
||||||
|
taskAttr.scriptFormat = this.scriptTaskForm.scriptFormat || null;
|
||||||
|
taskAttr.resultVariable = this.scriptTaskForm.resultVariable || null;
|
||||||
|
if (this.scriptTaskForm.scriptType === "inline") {
|
||||||
|
taskAttr.script = this.scriptTaskForm.script || null;
|
||||||
|
taskAttr.resource = null;
|
||||||
|
} else {
|
||||||
|
taskAttr.resource = this.scriptTaskForm.resource || null;
|
||||||
|
taskAttr.script = null;
|
||||||
|
}
|
||||||
|
window.bpmnInstances.modeling.updateProperties(this.bpmnElement, taskAttr);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
beforeDestroy() {
|
||||||
|
this.bpmnElement = null;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
@ -0,0 +1,86 @@
|
|||||||
|
<template>
|
||||||
|
<div style="margin-top: 16px">
|
||||||
|
<el-form-item label="处理用户">
|
||||||
|
<el-select v-model="userTaskForm.assignee" @change="updateElementTask('assignee')">
|
||||||
|
<el-option v-for="ak in mockData" :key="'ass-' + ak" :label="`用户${ak}`" :value="`user${ak}`" />
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="候选用户">
|
||||||
|
<el-select v-model="userTaskForm.candidateUsers" multiple collapse-tags @change="updateElementTask('candidateUsers')">
|
||||||
|
<el-option v-for="uk in mockData" :key="'user-' + uk" :label="`用户${uk}`" :value="`user${uk}`" />
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="候选分组">
|
||||||
|
<el-select v-model="userTaskForm.candidateGroups" multiple collapse-tags @change="updateElementTask('candidateGroups')">
|
||||||
|
<el-option v-for="gk in mockData" :key="'ass-' + gk" :label="`分组${gk}`" :value="`group${gk}`" />
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="到期时间">
|
||||||
|
<el-input v-model="userTaskForm.dueDate" clearable @change="updateElementTask('dueDate')" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="跟踪时间">
|
||||||
|
<el-input v-model="userTaskForm.followUpDate" clearable @change="updateElementTask('followUpDate')" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="优先级">
|
||||||
|
<el-input v-model="userTaskForm.priority" clearable @change="updateElementTask('priority')" />
|
||||||
|
</el-form-item>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: "UserTask",
|
||||||
|
props: {
|
||||||
|
id: String,
|
||||||
|
type: String
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
defaultTaskForm: {
|
||||||
|
assignee: "",
|
||||||
|
candidateUsers: [],
|
||||||
|
candidateGroups: [],
|
||||||
|
dueDate: "",
|
||||||
|
followUpDate: "",
|
||||||
|
priority: ""
|
||||||
|
},
|
||||||
|
userTaskForm: {},
|
||||||
|
mockData: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
|
||||||
|
};
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
id: {
|
||||||
|
immediate: true,
|
||||||
|
handler() {
|
||||||
|
this.bpmnElement = window.bpmnInstances.bpmnElement;
|
||||||
|
this.$nextTick(() => this.resetTaskForm());
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
resetTaskForm() {
|
||||||
|
for (let key in this.defaultTaskForm) {
|
||||||
|
let value;
|
||||||
|
if (key === "candidateUsers" || key === "candidateGroups") {
|
||||||
|
value = this.bpmnElement?.businessObject[key] ? this.bpmnElement.businessObject[key].split(",") : [];
|
||||||
|
} else {
|
||||||
|
value = this.bpmnElement?.businessObject[key] || this.defaultTaskForm[key];
|
||||||
|
}
|
||||||
|
this.$set(this.userTaskForm, key, value);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
updateElementTask(key) {
|
||||||
|
const taskAttr = Object.create(null);
|
||||||
|
if (key === "candidateUsers" || key === "candidateGroups") {
|
||||||
|
taskAttr[key] = this.userTaskForm[key] && this.userTaskForm[key].length ? this.userTaskForm[key].join() : null;
|
||||||
|
} else {
|
||||||
|
taskAttr[key] = this.userTaskForm[key] || null;
|
||||||
|
}
|
||||||
|
window.bpmnInstances.modeling.updateProperties(this.bpmnElement, taskAttr);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
beforeDestroy() {
|
||||||
|
this.bpmnElement = null;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
@ -0,0 +1,70 @@
|
|||||||
|
/* 改变主题色变量 */
|
||||||
|
$--color-primary: #1890ff;
|
||||||
|
$--color-danger: #ff4d4f;
|
||||||
|
|
||||||
|
/* 改变 icon 字体路径变量，必需 */
|
||||||
|
$--font-path: '~element-ui/lib/theme-chalk/fonts';
|
||||||
|
|
||||||
|
@import "~element-ui/packages/theme-chalk/src/index";
|
||||||
|
|
||||||
|
.el-table td,
|
||||||
|
.el-table th {
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
.el-drawer__header {
|
||||||
|
padding: 16px 16px 8px 16px;
|
||||||
|
margin: 0;
|
||||||
|
line-height: 24px;
|
||||||
|
font-size: 18px;
|
||||||
|
color: #303133;
|
||||||
|
box-sizing: border-box;
|
||||||
|
border-bottom: 1px solid #e8e8e8;
|
||||||
|
}
|
||||||
|
div[class^="el-drawer"]:focus,
|
||||||
|
span:focus {
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
.el-drawer__body {
|
||||||
|
box-sizing: border-box;
|
||||||
|
padding: 16px;
|
||||||
|
width: 100%;
|
||||||
|
overflow-y: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-dialog {
|
||||||
|
margin-top: 50vh !important;
|
||||||
|
transform: translateY(-50%);
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
.el-dialog__wrapper {
|
||||||
|
overflow: hidden;
|
||||||
|
max-height: 100vh;
|
||||||
|
}
|
||||||
|
.el-dialog__header {
|
||||||
|
padding: 16px 16px 8px 16px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
border-bottom: 1px solid #e8e8e8;
|
||||||
|
}
|
||||||
|
.el-dialog__body {
|
||||||
|
padding: 16px;
|
||||||
|
max-height: 80vh;
|
||||||
|
box-sizing: border-box;
|
||||||
|
overflow-y: auto;
|
||||||
|
}
|
||||||
|
.el-dialog__footer {
|
||||||
|
padding: 16px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
border-top: 1px solid #e8e8e8;
|
||||||
|
}
|
||||||
|
.el-dialog__close {
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
.el-select {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
.el-divider:not(.el-divider--horizontal) {
|
||||||
|
margin: 0 8px ;
|
||||||
|
}
|
||||||
|
.el-divider.el-divider--horizontal {
|
||||||
|
margin: 16px 0;
|
||||||
|
}
|
||||||
@ -0,0 +1,2 @@
|
|||||||
|
@import "./process-designer.scss";
|
||||||
|
@import "./process-panel.scss";
|
||||||
@ -0,0 +1,156 @@
|
|||||||
|
@import "~bpmn-js-token-simulation/assets/css/bpmn-js-token-simulation.css";
|
||||||
|
@import "~bpmn-js-token-simulation/assets/css/font-awesome.min.css";
|
||||||
|
@import "~bpmn-js-token-simulation/assets/css/normalize.css";
|
||||||
|
|
||||||
|
// 边框被 token-simulation 样式覆盖了
|
||||||
|
.djs-palette {
|
||||||
|
background: var(--palette-background-color);
|
||||||
|
border: solid 1px var(--palette-border-color) !important;
|
||||||
|
border-radius: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.my-process-designer {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
box-sizing: border-box;
|
||||||
|
.my-process-designer__header {
|
||||||
|
width: 100%;
|
||||||
|
min-height: 36px;
|
||||||
|
.el-button {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.el-button-group {
|
||||||
|
margin: 4px;
|
||||||
|
}
|
||||||
|
.el-tooltip__popper {
|
||||||
|
.el-button {
|
||||||
|
width: 100%;
|
||||||
|
text-align: left;
|
||||||
|
padding-left: 8px;
|
||||||
|
padding-right: 8px;
|
||||||
|
}
|
||||||
|
.el-button:hover {
|
||||||
|
background: rgba(64, 158, 255, 0.8);
|
||||||
|
color: #ffffff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.align {
|
||||||
|
position: relative;
|
||||||
|
i {
|
||||||
|
&:after {
|
||||||
|
content: "|";
|
||||||
|
position: absolute;
|
||||||
|
transform: rotate(90deg) translate(200%, 60%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.align.align-left i {
|
||||||
|
transform: rotate(90deg);
|
||||||
|
}
|
||||||
|
.align.align-right i {
|
||||||
|
transform: rotate(-90deg);
|
||||||
|
}
|
||||||
|
.align.align-top i {
|
||||||
|
transform: rotate(180deg);
|
||||||
|
}
|
||||||
|
.align.align-bottom i {
|
||||||
|
transform: rotate(0deg);
|
||||||
|
}
|
||||||
|
.align.align-center i {
|
||||||
|
transform: rotate(90deg);
|
||||||
|
&:after {
|
||||||
|
transform: rotate(90deg) translate(0, 60%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.align.align-middle i {
|
||||||
|
transform: rotate(0deg);
|
||||||
|
&:after {
|
||||||
|
transform: rotate(90deg) translate(0, 60%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.my-process-designer__container {
|
||||||
|
display: inline-flex;
|
||||||
|
width: 100%;
|
||||||
|
flex: 1;
|
||||||
|
.my-process-designer__canvas {
|
||||||
|
flex: 1;
|
||||||
|
height: 100%;
|
||||||
|
position: relative;
|
||||||
|
background: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PHBhdHRlcm4gaWQ9ImEiIHdpZHRoPSI0MCIgaGVpZ2h0PSI0MCIgcGF0dGVyblVuaXRzPSJ1c2VyU3BhY2VPblVzZSI+PHBhdGggZD0iTTAgMTBoNDBNMTAgMHY0ME0wIDIwaDQwTTIwIDB2NDBNMCAzMGg0ME0zMCAwdjQwIiBmaWxsPSJub25lIiBzdHJva2U9IiNlMGUwZTAiIG9wYWNpdHk9Ii4yIi8+PHBhdGggZD0iTTQwIDBIMHY0MCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZTBlMGUwIi8+PC9wYXR0ZXJuPjwvZGVmcz48cmVjdCB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2EpIi8+PC9zdmc+")
|
||||||
|
repeat !important;
|
||||||
|
div.toggle-mode {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.my-process-designer__property-panel {
|
||||||
|
height: 100%;
|
||||||
|
overflow: scroll;
|
||||||
|
overflow-y: auto;
|
||||||
|
z-index: 10;
|
||||||
|
* {
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
svg {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
min-height: 100%;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
//侧边栏配置
|
||||||
|
.djs-palette.open {
|
||||||
|
.djs-palette-entries {
|
||||||
|
div[class^="bpmn-icon-"]:before,
|
||||||
|
div[class*="bpmn-icon-"]:before {
|
||||||
|
line-height: unset;
|
||||||
|
}
|
||||||
|
div.entry {
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
div.entry:hover {
|
||||||
|
&::after {
|
||||||
|
width: max-content;
|
||||||
|
content: attr(title);
|
||||||
|
vertical-align: text-bottom;
|
||||||
|
position: absolute;
|
||||||
|
right: -10px;
|
||||||
|
top: 0;
|
||||||
|
bottom: 0;
|
||||||
|
overflow: hidden;
|
||||||
|
transform: translateX(100%);
|
||||||
|
font-size: 0.5em;
|
||||||
|
display: inline-block;
|
||||||
|
text-decoration: inherit;
|
||||||
|
font-variant: normal;
|
||||||
|
text-transform: none;
|
||||||
|
background: #fafafa;
|
||||||
|
box-shadow: 0 0 6px #eeeeee;
|
||||||
|
border: 1px solid #cccccc;
|
||||||
|
box-sizing: border-box;
|
||||||
|
padding: 0 16px;
|
||||||
|
border-radius: 4px;
|
||||||
|
z-index: 100;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
pre {
|
||||||
|
margin: 0;
|
||||||
|
height: 100%;
|
||||||
|
overflow: hidden;
|
||||||
|
max-height: calc(80vh - 32px);
|
||||||
|
overflow-y: auto;
|
||||||
|
}
|
||||||
|
.hljs {
|
||||||
|
word-break: break-word;
|
||||||
|
white-space: pre-wrap;
|
||||||
|
}
|
||||||
|
.hljs * {
|
||||||
|
font-family: Consolas, Monaco, monospace;
|
||||||
|
}
|
||||||
@ -0,0 +1,107 @@
|
|||||||
|
.process-panel__container {
|
||||||
|
box-sizing: border-box;
|
||||||
|
padding: 0 8px;
|
||||||
|
border-left: 1px solid #eeeeee;
|
||||||
|
box-shadow: 0 0 8px #cccccc;
|
||||||
|
max-height: 100%;
|
||||||
|
overflow-y: scroll;
|
||||||
|
}
|
||||||
|
.panel-tab__title {
|
||||||
|
font-weight: 600;
|
||||||
|
padding: 0 8px;
|
||||||
|
font-size: 1.1em;
|
||||||
|
line-height: 1.2em;
|
||||||
|
i {
|
||||||
|
margin-right: 8px;
|
||||||
|
font-size: 1.2em;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.panel-tab__content {
|
||||||
|
width: 100%;
|
||||||
|
box-sizing: border-box;
|
||||||
|
border-top: 1px solid #eeeeee;
|
||||||
|
padding: 8px 16px;
|
||||||
|
.panel-tab__content--title {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
padding-bottom: 8px;
|
||||||
|
span {
|
||||||
|
flex: 1;
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.element-property {
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
align-items: flex-start;
|
||||||
|
margin: 8px 0;
|
||||||
|
.element-property__label {
|
||||||
|
display: block;
|
||||||
|
width: 90px;
|
||||||
|
text-align: right;
|
||||||
|
overflow: hidden;
|
||||||
|
padding-right: 12px;
|
||||||
|
line-height: 32px;
|
||||||
|
font-size: 14px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
.element-property__value {
|
||||||
|
flex: 1;
|
||||||
|
line-height: 32px;
|
||||||
|
}
|
||||||
|
.el-form-item {
|
||||||
|
width: 100%;
|
||||||
|
margin-bottom: 0;
|
||||||
|
padding-bottom: 18px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.list-property {
|
||||||
|
flex-direction: column;
|
||||||
|
.element-listener-item {
|
||||||
|
width: 100%;
|
||||||
|
display: inline-grid;
|
||||||
|
grid-template-columns: 16px auto 32px 32px;
|
||||||
|
grid-column-gap: 8px;
|
||||||
|
}
|
||||||
|
.element-listener-item + .element-listener-item {
|
||||||
|
margin-top: 8px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.listener-filed__title {
|
||||||
|
display: inline-flex;
|
||||||
|
width: 100%;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
margin-top: 0;
|
||||||
|
span {
|
||||||
|
width: 200px;
|
||||||
|
text-align: left;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
i {
|
||||||
|
margin-right: 8px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.element-drawer__button {
|
||||||
|
margin-top: 8px;
|
||||||
|
width: 100%;
|
||||||
|
display: inline-flex;
|
||||||
|
justify-content: space-around;
|
||||||
|
}
|
||||||
|
.element-drawer__button > .el-button {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-collapse-item__content {
|
||||||
|
padding-bottom: 0;
|
||||||
|
}
|
||||||
|
.el-input.is-disabled .el-input__inner {
|
||||||
|
color: #999999;
|
||||||
|
}
|
||||||
|
.el-form-item.el-form-item--mini {
|
||||||
|
margin-bottom: 0;
|
||||||
|
& + .el-form-item {
|
||||||
|
margin-top: 16px;
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,69 @@
|
|||||||
|
// 创建监听器实例
|
||||||
|
export function createListenerObject(options, isTask, prefix) {
|
||||||
|
const listenerObj = Object.create(null);
|
||||||
|
listenerObj.event = options.event;
|
||||||
|
isTask && (listenerObj.id = options.id); // 任务监听器特有的 id 字段
|
||||||
|
switch (options.listenerType) {
|
||||||
|
case "scriptListener":
|
||||||
|
listenerObj.script = createScriptObject(options, prefix);
|
||||||
|
break;
|
||||||
|
case "expressionListener":
|
||||||
|
listenerObj.expression = options.expression;
|
||||||
|
break;
|
||||||
|
case "delegateExpressionListener":
|
||||||
|
listenerObj.delegateExpression = options.delegateExpression;
|
||||||
|
break;
|
||||||
|
default:
|
||||||
|
listenerObj.class = options.class;
|
||||||
|
}
|
||||||
|
// 注入字段
|
||||||
|
if (options.fields) {
|
||||||
|
listenerObj.fields = options.fields.map(field => {
|
||||||
|
return createFieldObject(field, prefix);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
// 任务监听器的 定时器 设置
|
||||||
|
if (isTask && options.event === "timeout" && !!options.eventDefinitionType) {
|
||||||
|
const timeDefinition = window.bpmnInstances.moddle.create("bpmn:FormalExpression", { body: options.eventTimeDefinitions });
|
||||||
|
const TimerEventDefinition = window.bpmnInstances.moddle.create("bpmn:TimerEventDefinition", {
|
||||||
|
id: `TimerEventDefinition_${uuid(8)}`,
|
||||||
|
[`time${options.eventDefinitionType.replace(/^\S/, s => s.toUpperCase())}`]: timeDefinition
|
||||||
|
});
|
||||||
|
listenerObj.eventDefinitions = [TimerEventDefinition];
|
||||||
|
}
|
||||||
|
return window.bpmnInstances.moddle.create(`${prefix}:${isTask ? "TaskListener" : "ExecutionListener"}`, listenerObj);
|
||||||
|
}
|
||||||
|
|
||||||
|
// 创建 监听器的注入字段 实例
|
||||||
|
export function createFieldObject(option, prefix) {
|
||||||
|
const { name, fieldType, string, expression } = option;
|
||||||
|
const fieldConfig = fieldType === "string" ? { name, string } : { name, expression };
|
||||||
|
return window.bpmnInstances.moddle.create(`${prefix}:Field`, fieldConfig);
|
||||||
|
}
|
||||||
|
|
||||||
|
// 创建脚本实例
|
||||||
|
export function createScriptObject(options, prefix) {
|
||||||
|
const { scriptType, scriptFormat, value, resource } = options;
|
||||||
|
const scriptConfig = scriptType === "inlineScript" ? { scriptFormat, value } : { scriptFormat, resource };
|
||||||
|
return window.bpmnInstances.moddle.create(`${prefix}:Script`, scriptConfig);
|
||||||
|
}
|
||||||
|
|
||||||
|
// 更新元素扩展属性
|
||||||
|
export function updateElementExtensions(element, extensionList) {
|
||||||
|
const extensions = window.bpmnInstances.moddle.create("bpmn:ExtensionElements", {
|
||||||
|
values: extensionList
|
||||||
|
});
|
||||||
|
window.bpmnInstances.modeling.updateProperties(element, {
|
||||||
|
extensionElements: extensions
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// 创建一个id
|
||||||
|
export function uuid(length = 8, chars) {
|
||||||
|
let result = "";
|
||||||
|
let charsString = chars || "0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ";
|
||||||
|
for (let i = length; i > 0; --i) {
|
||||||
|
result += charsString[Math.floor(Math.random() * charsString.length)];
|
||||||
|
}
|
||||||
|
return result;
|
||||||
|
}
|
||||||
@ -0,0 +1,5 @@
|
|||||||
|
const hljs = require("highlight.js/lib/core");
|
||||||
|
hljs.registerLanguage("xml", require("highlight.js/lib/languages/xml"));
|
||||||
|
hljs.registerLanguage("json", require("highlight.js/lib/languages/json"));
|
||||||
|
|
||||||
|
module.exports = hljs;
|
||||||
@ -0,0 +1,28 @@
|
|||||||
|
import Vue from "vue";
|
||||||
|
import App from "./App.vue";
|
||||||
|
|
||||||
|
import axios from "axios";
|
||||||
|
Vue.prototype.$axios = axios;
|
||||||
|
|
||||||
|
// 加载基础ElementUI
|
||||||
|
import ElementUI from "element-ui";
|
||||||
|
Vue.use(ElementUI);
|
||||||
|
import "../package/theme/element-variables.scss";
|
||||||
|
|
||||||
|
import { vuePlugin } from "@/highlight";
|
||||||
|
import "highlight.js/styles/atom-one-dark-reasonable.css";
|
||||||
|
Vue.use(vuePlugin);
|
||||||
|
|
||||||
|
import MyPD from "../package/index.js";
|
||||||
|
Vue.use(MyPD);
|
||||||
|
import "../package/theme/index.scss";
|
||||||
|
|
||||||
|
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-properties-panel/dist/assets/bpmn-js-properties-panel.css"; // 右边工具栏样式
|
||||||
|
|
||||||
|
new Vue({
|
||||||
|
render: h => h(App)
|
||||||
|
}).$mount("#app");
|
||||||
@ -0,0 +1,6 @@
|
|||||||
|
import CustomRenderer from "./CustomRenderer";
|
||||||
|
|
||||||
|
export default {
|
||||||
|
__init__: ["customRenderer"],
|
||||||
|
customRenderer: ["type", CustomRenderer]
|
||||||
|
};
|
||||||
@ -0,0 +1,16 @@
|
|||||||
|
import BpmnRules from "bpmn-js/lib/features/rules/BpmnRules";
|
||||||
|
import inherits from "inherits";
|
||||||
|
|
||||||
|
export default function CustomRules(eventBus) {
|
||||||
|
BpmnRules.call(this, eventBus);
|
||||||
|
}
|
||||||
|
|
||||||
|
inherits(CustomRules, BpmnRules);
|
||||||
|
|
||||||
|
CustomRules.prototype.canDrop = function() {
|
||||||
|
return false;
|
||||||
|
};
|
||||||
|
|
||||||
|
CustomRules.prototype.canMove = function() {
|
||||||
|
return false;
|
||||||
|
};
|
||||||
@ -0,0 +1,6 @@
|
|||||||
|
import CustomRules from "./CustomRules";
|
||||||
|
|
||||||
|
export default {
|
||||||
|
__init__: ["customRules"],
|
||||||
|
customRules: ["type", CustomRules]
|
||||||
|
};
|
||||||
@ -0,0 +1,25 @@
|
|||||||
|
/**
|
||||||
|
* This is a sample file that should be replaced with the actual translation.
|
||||||
|
*
|
||||||
|
* Checkout https://github.com/bpmn-io/bpmn-js-i18n for a list of available
|
||||||
|
* translations and labels to translate.
|
||||||
|
*/
|
||||||
|
export default {
|
||||||
|
"Exclusive Gateway": "Exklusives Gateway",
|
||||||
|
"Parallel Gateway": "Paralleles Gateway",
|
||||||
|
"Inclusive Gateway": "Inklusives Gateway",
|
||||||
|
"Complex Gateway": "Komplexes Gateway",
|
||||||
|
"Event based Gateway": "Ereignis-basiertes Gateway",
|
||||||
|
"Message Start Event": "消息启动事件",
|
||||||
|
"Timer Start Event": "定时启动事件",
|
||||||
|
"Conditional Start Event": "条件启动事件",
|
||||||
|
"Signal Start Event": "信号启动事件",
|
||||||
|
"Error Start Event": "错误启动事件",
|
||||||
|
"Escalation Start Event": "升级启动事件",
|
||||||
|
"Compensation Start Event": "补偿启动事件",
|
||||||
|
"Message Start Event (non-interrupting)": "消息启动事件 (非中断)",
|
||||||
|
"Timer Start Event (non-interrupting)": "定时启动事件 (非中断)",
|
||||||
|
"Conditional Start Event (non-interrupting)": "条件启动事件 (非中断)",
|
||||||
|
"Signal Start Event (non-interrupting)": "信号启动事件 (非中断)",
|
||||||
|
"Escalation Start Event (non-interrupting)": "升级启动事件 (非中断)"
|
||||||
|
};
|
||||||
@ -0,0 +1,39 @@
|
|||||||
|
//outside.js
|
||||||
|
|
||||||
|
const ctx = "@@clickoutsideContext";
|
||||||
|
|
||||||
|
export default {
|
||||||
|
bind(el, binding, vnode) {
|
||||||
|
const ele = el;
|
||||||
|
const documentHandler = e => {
|
||||||
|
if (!vnode.context || ele.contains(e.target)) {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
// 调用指令回调
|
||||||
|
if (binding.expression) {
|
||||||
|
vnode.context[el[ctx].methodName](e);
|
||||||
|
} else {
|
||||||
|
el[ctx].bindingFn(e);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
// 将方法添加到ele
|
||||||
|
ele[ctx] = {
|
||||||
|
documentHandler,
|
||||||
|
methodName: binding.expression,
|
||||||
|
bindingFn: binding.value
|
||||||
|
};
|
||||||
|
|
||||||
|
setTimeout(() => {
|
||||||
|
document.addEventListener("touchstart", documentHandler); // 为document绑定事件
|
||||||
|
});
|
||||||
|
},
|
||||||
|
update(el, binding) {
|
||||||
|
const ele = el;
|
||||||
|
ele[ctx].methodName = binding.expression;
|
||||||
|
ele[ctx].bindingFn = binding.value;
|
||||||
|
},
|
||||||
|
unbind(el) {
|
||||||
|
document.removeEventListener("touchstart", el[ctx].documentHandler); // 解绑
|
||||||
|
delete el[ctx];
|
||||||
|
}
|
||||||
|
};
|
||||||
@ -0,0 +1,10 @@
|
|||||||
|
export function debounce(fn, delay = 500) {
|
||||||
|
let timer;
|
||||||
|
return function(...args) {
|
||||||
|
if (timer) {
|
||||||
|
clearTimeout(timer);
|
||||||
|
timer = null;
|
||||||
|
}
|
||||||
|
timer = setTimeout(fn.bind(this, ...args), delay);
|
||||||
|
};
|
||||||
|
}
|
||||||
@ -0,0 +1,63 @@
|
|||||||
|
class Log {
|
||||||
|
static type = ["primary", "success", "warn", "error", "info"];
|
||||||
|
|
||||||
|
static typeColor(type = "default") {
|
||||||
|
let color = "";
|
||||||
|
switch (type) {
|
||||||
|
case "primary":
|
||||||
|
color = "#2d8cf0";
|
||||||
|
break;
|
||||||
|
case "success":
|
||||||
|
color = "#19be6b";
|
||||||
|
break;
|
||||||
|
case "info":
|
||||||
|
color = "#909399";
|
||||||
|
break;
|
||||||
|
case "warn":
|
||||||
|
color = "#ff9900";
|
||||||
|
break;
|
||||||
|
case "error":
|
||||||
|
color = "#f03f14";
|
||||||
|
break;
|
||||||
|
case "default":
|
||||||
|
color = "#35495E";
|
||||||
|
break;
|
||||||
|
default:
|
||||||
|
color = type;
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
return color;
|
||||||
|
}
|
||||||
|
|
||||||
|
static print(text, type = "default", back = false) {
|
||||||
|
if (typeof text === "object") {
|
||||||
|
// 如果是對象則調用打印對象方式
|
||||||
|
console.dir(text);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
if (back) {
|
||||||
|
// 如果是打印帶背景圖的
|
||||||
|
console.log(`%c ${text} `, `background:${this.typeColor(type)}; padding: 2px; border-radius: 4px;color: #fff;`);
|
||||||
|
} else {
|
||||||
|
console.log(`%c ${text} `, `color: ${this.typeColor(type)};`);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
static pretty(title, text, type = "primary") {
|
||||||
|
if (typeof text === "object") {
|
||||||
|
console.log(
|
||||||
|
`%c ${title} %c`,
|
||||||
|
`background:${this.typeColor(type)};border:1px solid ${this.typeColor(type)}; padding: 1px; border-radius: 4px 0 0 4px; color: #fff;`
|
||||||
|
);
|
||||||
|
console.dir(text);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
console.log(
|
||||||
|
`%c ${title} %c ${text} %c`,
|
||||||
|
`background:${this.typeColor(type)};border:1px solid ${this.typeColor(type)}; padding: 1px; border-radius: 4px 0 0 4px; color: #fff;`,
|
||||||
|
`border:1px solid ${this.typeColor(type)}; padding: 1px; border-radius: 0 4px 4px 0; color: ${this.typeColor(type)};`,
|
||||||
|
"background:transparent"
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
export default Log;
|
||||||
@ -0,0 +1,50 @@
|
|||||||
|
function xmlStr2XmlObj(xmlStr) {
|
||||||
|
let xmlObj = {};
|
||||||
|
if (document.all) {
|
||||||
|
const xmlDom = new window.ActiveXObject("Microsoft.XMLDOM");
|
||||||
|
xmlDom.loadXML(xmlStr);
|
||||||
|
xmlObj = xmlDom;
|
||||||
|
} else {
|
||||||
|
xmlObj = new DOMParser().parseFromString(xmlStr, "text/xml");
|
||||||
|
}
|
||||||
|
return xmlObj;
|
||||||
|
}
|
||||||
|
|
||||||
|
function xml2json(xml) {
|
||||||
|
try {
|
||||||
|
let obj = {};
|
||||||
|
if (xml.children.length > 0) {
|
||||||
|
for (let i = 0; i < xml.children.length; i++) {
|
||||||
|
const item = xml.children.item(i);
|
||||||
|
const nodeName = item.nodeName;
|
||||||
|
if (typeof obj[nodeName] == "undefined") {
|
||||||
|
obj[nodeName] = xml2json(item);
|
||||||
|
} else {
|
||||||
|
if (typeof obj[nodeName].push == "undefined") {
|
||||||
|
const old = obj[nodeName];
|
||||||
|
obj[nodeName] = [];
|
||||||
|
obj[nodeName].push(old);
|
||||||
|
}
|
||||||
|
obj[nodeName].push(xml2json(item));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
obj = xml.textContent;
|
||||||
|
}
|
||||||
|
return obj;
|
||||||
|
} catch (e) {
|
||||||
|
console.log(e.message);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function xmlObj2json(xml) {
|
||||||
|
const xmlObj = xmlStr2XmlObj(xml);
|
||||||
|
console.log(xmlObj);
|
||||||
|
let jsonObj = {};
|
||||||
|
if (xmlObj.childNodes.length > 0) {
|
||||||
|
jsonObj = xml2json(xmlObj);
|
||||||
|
}
|
||||||
|
return jsonObj;
|
||||||
|
}
|
||||||
|
|
||||||
|
export default xmlObj2json;
|
||||||
@ -0,0 +1,25 @@
|
|||||||
|
/**
|
||||||
|
* This is a sample file that should be replaced with the actual translation.
|
||||||
|
*
|
||||||
|
* Checkout https://github.com/bpmn-io/bpmn-js-i18n for a list of available
|
||||||
|
* translations and labels to translate.
|
||||||
|
*/
|
||||||
|
export default {
|
||||||
|
"Exclusive Gateway": "Exklusives Gateway",
|
||||||
|
"Parallel Gateway": "Paralleles Gateway",
|
||||||
|
"Inclusive Gateway": "Inklusives Gateway",
|
||||||
|
"Complex Gateway": "Komplexes Gateway",
|
||||||
|
"Event based Gateway": "Ereignis-basiertes Gateway",
|
||||||
|
"Message Start Event": "消息启动事件",
|
||||||
|
"Timer Start Event": "定时启动事件",
|
||||||
|
"Conditional Start Event": "条件启动事件",
|
||||||
|
"Signal Start Event": "信号启动事件",
|
||||||
|
"Error Start Event": "错误启动事件",
|
||||||
|
"Escalation Start Event": "升级启动事件",
|
||||||
|
"Compensation Start Event": "补偿启动事件",
|
||||||
|
"Message Start Event (non-interrupting)": "消息启动事件 (非中断)",
|
||||||
|
"Timer Start Event (non-interrupting)": "定时启动事件 (非中断)",
|
||||||
|
"Conditional Start Event (non-interrupting)": "条件启动事件 (非中断)",
|
||||||
|
"Signal Start Event (non-interrupting)": "信号启动事件 (非中断)",
|
||||||
|
"Escalation Start Event (non-interrupting)": "升级启动事件 (非中断)"
|
||||||
|
};
|
||||||
Loading…
Reference in New Issue