model
This commit is contained in:
@ -22,6 +22,7 @@
|
||||
"axios": "0.27.2",
|
||||
"bpmn-js-token-simulation": "0.10.0",
|
||||
"clipboard": "^2.0.11",
|
||||
"diagram-js": "^11.4.1",
|
||||
"echarts": "5.4.0",
|
||||
"element-plus": "2.2.21",
|
||||
"file-saver": "2.0.5",
|
||||
@ -31,6 +32,7 @@
|
||||
"jsencrypt": "3.3.1",
|
||||
"nprogress": "0.2.0",
|
||||
"pinia": "2.0.22",
|
||||
"stream-browserify": "^3.0.0",
|
||||
"throttle-debounce": "^5.0.0",
|
||||
"vue": "3.2.45",
|
||||
"vue-cropper": "1.0.3",
|
||||
@ -44,7 +46,7 @@
|
||||
"@vitejs/plugin-vue-jsx": "^3.0.0",
|
||||
"@vue/babel-helper-vue-transform-on": "^1.0.2",
|
||||
"@vue/compiler-sfc": "3.2.45",
|
||||
"bpmn-js": "^11.1.0",
|
||||
"bpmn-js": "7.4.0",
|
||||
"bpmn-js-properties-panel": "^1.13.1",
|
||||
"camunda-bpmn-moddle": "^7.0.1",
|
||||
"sass": "1.56.1",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div class="process-design" :style="'display: flex; height:' + height">
|
||||
<!-- <bpmn-process-designer
|
||||
<bpmn-process-designer
|
||||
v-model="xmlString"
|
||||
v-bind="controlForm"
|
||||
keyboard
|
||||
@ -16,15 +16,21 @@
|
||||
@event="handlerEvent"
|
||||
@save="onSaveProcess"
|
||||
/>
|
||||
|
||||
<bmpn-process-penal
|
||||
:bpmn-modeler="modeler"
|
||||
:prefix="controlForm.prefix"
|
||||
class="process-panel"
|
||||
/> -->
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import BmpnProcessPenal from "@/plugins/package/penal";
|
||||
import BpmnProcessDesigner from "@/plugins/package/designer";
|
||||
import "@/plugins/package/theme/index.scss";
|
||||
// import "highlight.js/styles/atom-one-dark-reasonable.css";
|
||||
import CustomContentPadProvider from "@/plugins/package/designer/plugins/content-pad";
|
||||
import CustomPaletteProvider from "@/plugins/package/designer/plugins/palette";
|
||||
import { ref } from "vue";
|
||||
const props = defineProps({
|
||||
bpmnXml: {
|
||||
@ -37,9 +43,39 @@ const props = defineProps({
|
||||
},
|
||||
});
|
||||
const { bpmnXml, designerForm } = toRefs(props);
|
||||
|
||||
const modeler = ref(null);
|
||||
const height = ref(document.documentElement.clientHeight - 94.5 + "px;");
|
||||
const xmlString = ref(bpmnXml.value);
|
||||
const emit = defineEmits(["save"]);
|
||||
const data = reactive({
|
||||
element: null,
|
||||
controlForm: {
|
||||
processId: designerForm.value.processKey || "",
|
||||
processName: designerForm.value.processName || "",
|
||||
simulation: false,
|
||||
labelEditing: false,
|
||||
labelVisible: false,
|
||||
prefix: "flowable",
|
||||
headerButtonSize: "small",
|
||||
additionalModel: [CustomContentPadProvider, CustomPaletteProvider],
|
||||
},
|
||||
});
|
||||
const { controlForm, element } = toRefs(data);
|
||||
|
||||
function elementClick(elementArgv) {
|
||||
element.value = elementArgv;
|
||||
console.log(elementArgv);
|
||||
}
|
||||
function initModeler(modelerArgv) {
|
||||
setTimeout(() => {
|
||||
modeler.value = modelerArgv;
|
||||
console.log(modeler.value.get("eventBus"), "71");
|
||||
}, 10);
|
||||
}
|
||||
function handlerEvent(eventName, element) {}
|
||||
function onSaveProcess(saveData) {
|
||||
emit("save", saveData);
|
||||
}
|
||||
</script>
|
||||
<!--
|
||||
|
||||
@ -51,7 +87,7 @@ import CustomContentPadProvider from "@/plugins/package/designer/plugins/content
|
||||
// 自定义左侧菜单（修改 默认任务 为 用户任务）
|
||||
import CustomPaletteProvider from "@/plugins/package/designer/plugins/palette";
|
||||
import vuePlugin from "@/plugins/package/highlight";
|
||||
import "highlight.js/styles/atom-one-dark-reasonable.css";
|
||||
// import "highlight.js/styles/atom-one-dark-reasonable.css";
|
||||
// Vue.use(vuePlugin);
|
||||
|
||||
export default {
|
||||
@ -63,32 +99,12 @@ export default {
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
modeler: null,
|
||||
controlForm: {
|
||||
processId: this.designerForm.processKey || "",
|
||||
processName: this.designerForm.processName || "",
|
||||
simulation: false,
|
||||
labelEditing: false,
|
||||
labelVisible: false,
|
||||
prefix: "flowable",
|
||||
headerButtonSize: "small",
|
||||
additionalModel: [CustomContentPadProvider, CustomPaletteProvider],
|
||||
},
|
||||
|
||||
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
elementClick(element) {
|
||||
this.element = element;
|
||||
},
|
||||
initModeler(modeler) {
|
||||
setTimeout(() => {
|
||||
this.modeler = modeler;
|
||||
}, 10);
|
||||
},
|
||||
handlerEvent(eventName, element) {},
|
||||
onSaveProcess(saveData) {
|
||||
this.$emit("save", saveData);
|
||||
},
|
||||
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
@ -4,89 +4,232 @@
|
||||
<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-edit-outline" @click="onSave">保存流程</el-button>
|
||||
<el-button :size="headerButtonSize" :type="headerButtonType" icon="el-icon-folder-opened" @click="$refs.refFile.click()">打开文件</el-button>
|
||||
<el-button
|
||||
:size="headerButtonSize"
|
||||
:type="headerButtonType"
|
||||
icon="edit"
|
||||
@click="onSave"
|
||||
>保存流程</el-button
|
||||
>
|
||||
<el-button
|
||||
:size="headerButtonSize"
|
||||
:type="headerButtonType"
|
||||
icon="folder-opened"
|
||||
@click="refFile.click()"
|
||||
>打开文件</el-button
|
||||
>
|
||||
<el-tooltip effect="light">
|
||||
<div slot="content">
|
||||
<el-button :size="headerButtonSize" type="text" @click="downloadProcessAsXml()">下载为XML文件</el-button>
|
||||
<template #content>
|
||||
<el-button
|
||||
:size="headerButtonSize"
|
||||
link
|
||||
type="primary"
|
||||
@click="downloadProcessAsXml()"
|
||||
>下载为XML文件</el-button
|
||||
>
|
||||
<br />
|
||||
<el-button :size="headerButtonSize" type="text" @click="downloadProcessAsSvg()">下载为SVG文件</el-button>
|
||||
<el-button
|
||||
:size="headerButtonSize"
|
||||
link
|
||||
type="primary"
|
||||
@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-button
|
||||
:size="headerButtonSize"
|
||||
link
|
||||
type="primary"
|
||||
@click="downloadProcessAsBpmn()"
|
||||
>下载为BPMN文件</el-button
|
||||
>
|
||||
</template>
|
||||
<el-button
|
||||
:size="headerButtonSize"
|
||||
:type="headerButtonType"
|
||||
icon="download"
|
||||
>下载文件</el-button
|
||||
>
|
||||
</el-tooltip>
|
||||
<el-tooltip effect="light">
|
||||
<div slot="content">
|
||||
<el-button :size="headerButtonSize" type="text" @click="previewProcessXML">预览XML</el-button>
|
||||
<template #content>
|
||||
<el-button
|
||||
:size="headerButtonSize"
|
||||
link
|
||||
type="primary"
|
||||
@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-button
|
||||
:size="headerButtonSize"
|
||||
link
|
||||
type="primary"
|
||||
@click="previewProcessJson"
|
||||
>预览JSON</el-button
|
||||
>
|
||||
</template>
|
||||
<el-button
|
||||
:size="headerButtonSize"
|
||||
:type="headerButtonType"
|
||||
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-tooltip
|
||||
v-if="simulation"
|
||||
effect="light"
|
||||
:content="simulationStatus ? '退出模拟' : '开启模拟'"
|
||||
>
|
||||
<el-button
|
||||
:size="headerButtonSize"
|
||||
:type="headerButtonType"
|
||||
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-button
|
||||
:size="headerButtonSize"
|
||||
class="align align-left"
|
||||
icon="histogram"
|
||||
@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-button
|
||||
:size="headerButtonSize"
|
||||
class="align align-right"
|
||||
icon="histogram"
|
||||
@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-button
|
||||
:size="headerButtonSize"
|
||||
class="align align-top"
|
||||
icon="histogram"
|
||||
@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-button
|
||||
:size="headerButtonSize"
|
||||
class="align align-bottom"
|
||||
icon="histogram"
|
||||
@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-button
|
||||
:size="headerButtonSize"
|
||||
class="align align-center"
|
||||
icon="histogram"
|
||||
@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-button
|
||||
:size="headerButtonSize"
|
||||
class="align align-middle"
|
||||
icon="histogram"
|
||||
@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.3" icon="el-icon-zoom-out" @click="processZoomOut()" />
|
||||
<el-button
|
||||
:size="headerButtonSize"
|
||||
:disabled="defaultZoom <= 0.3"
|
||||
icon="zoom-out"
|
||||
@click="processZoomOut()"
|
||||
/>
|
||||
</el-tooltip>
|
||||
<el-button :size="headerButtonSize">{{ Math.floor(this.defaultZoom * 10 * 10) + "%" }}</el-button>
|
||||
<el-button :size="headerButtonSize">{{
|
||||
Math.floor(defaultZoom * 10 * 10) + "%"
|
||||
}}</el-button>
|
||||
<el-tooltip effect="light" content="放大视图">
|
||||
<el-button :size="headerButtonSize" :disabled="defaultZoom >= 3.9" icon="el-icon-zoom-in" @click="processZoomIn()" />
|
||||
<el-button
|
||||
:size="headerButtonSize"
|
||||
:disabled="defaultZoom >= 3.9"
|
||||
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-button
|
||||
:size="headerButtonSize"
|
||||
icon="ScaleToOriginal"
|
||||
@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-button
|
||||
:size="headerButtonSize"
|
||||
:disabled="!revocable"
|
||||
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-button
|
||||
:size="headerButtonSize"
|
||||
:disabled="!recoverable"
|
||||
icon="refresh-right"
|
||||
@click="processRedo()"
|
||||
/>
|
||||
</el-tooltip>
|
||||
<el-tooltip effect="light" content="重新绘制">
|
||||
<el-button :size="headerButtonSize" icon="el-icon-refresh" @click="processRestart" />
|
||||
<el-button
|
||||
:size="headerButtonSize"
|
||||
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" />
|
||||
<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 class="my-process-designer__canvas" ref="bpmnCanvasRef"></div>
|
||||
</div>
|
||||
<el-dialog title="预览" width="60%" :visible.sync="previewModelVisible" append-to-body destroy-on-close>
|
||||
<highlightjs :language="previewType" :code="previewResult" style="height: 60vh" />
|
||||
|
||||
<el-dialog
|
||||
title="预览"
|
||||
width="60%"
|
||||
v-model="previewModelVisible"
|
||||
append-to-body
|
||||
destroy-on-close
|
||||
>
|
||||
<!-- <highlightjs
|
||||
:language="previewType"
|
||||
:code="previewResult"
|
||||
style="height: 60vh"
|
||||
/> -->
|
||||
<!-- <div
|
||||
v-html="
|
||||
highlightjs.highlight(previewResult, { language: previewType }).value
|
||||
"
|
||||
></div> -->
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
<script setup name="BpmnProcessDesigner">
|
||||
// 生产环境时优化
|
||||
// const BpmnModeler = window.BpmnJS;
|
||||
import BpmnModeler from "bpmn-js/lib/Modeler";
|
||||
@ -108,11 +251,14 @@ import activitiModdleExtension from "./plugins/extension-moddle/activiti";
|
||||
import flowableModdleExtension from "./plugins/extension-moddle/flowable";
|
||||
// 引入json转换与高亮
|
||||
import convert from "xml-js";
|
||||
// import highlightjs from "@/plugins/package/highlight";
|
||||
|
||||
export default {
|
||||
name: "BpmnProcessDesigner",
|
||||
componentName: "BpmnProcessDesigner",
|
||||
props: {
|
||||
import { computed, onMounted, ref } from "vue";
|
||||
import { ElMessage, ElMessageBox } from "element-plus";
|
||||
|
||||
const bpmnCanvasRef = ref();
|
||||
const refFile = ref();
|
||||
const props = defineProps({
|
||||
value: String, // xml 字符串
|
||||
processId: String,
|
||||
processName: String,
|
||||
@ -121,223 +267,261 @@ export default {
|
||||
moddleExtension: Object, // 自定义moddle
|
||||
onlyCustomizeAddi: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
default: false,
|
||||
},
|
||||
onlyCustomizeModdle: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
default: false,
|
||||
},
|
||||
simulation: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
default: true,
|
||||
},
|
||||
keyboard: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
default: true,
|
||||
},
|
||||
prefix: {
|
||||
type: String,
|
||||
default: "flowable"
|
||||
default: "flowable",
|
||||
},
|
||||
events: {
|
||||
type: Array,
|
||||
default: () => ["element.click"]
|
||||
default: () => ["element.click"],
|
||||
},
|
||||
headerButtonSize: {
|
||||
type: String,
|
||||
default: "small",
|
||||
validator: value => ["default", "medium", "small", "mini"].indexOf(value) !== -1
|
||||
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
|
||||
}
|
||||
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 {
|
||||
value,
|
||||
processId,
|
||||
processName,
|
||||
translations,
|
||||
additionalModel,
|
||||
moddleExtension,
|
||||
onlyCustomizeAddi,
|
||||
onlyCustomizeModdle,
|
||||
simulation,
|
||||
keyboard,
|
||||
prefix,
|
||||
events,
|
||||
headerButtonSize,
|
||||
headerButtonType,
|
||||
} = toRefs(props);
|
||||
const emit = defineEmits([
|
||||
"destroy",
|
||||
"save",
|
||||
"commandStack-changed",
|
||||
"input",
|
||||
"change",
|
||||
"init-finished",
|
||||
"element-click",
|
||||
"event",
|
||||
"canvas-viewbox-changed",
|
||||
"connection-added",
|
||||
"connection-removed",
|
||||
"connection-changed",
|
||||
]);
|
||||
const defaultZoom = ref(1);
|
||||
const previewModelVisible = ref(false);
|
||||
const simulationStatus = ref(false);
|
||||
const previewResult = ref("");
|
||||
const previewType = ref("xml");
|
||||
const recoverable = ref(false);
|
||||
const revocable = ref(false);
|
||||
let bpmnModeler;
|
||||
const additionalModules = computed(() => {
|
||||
const Modules = [];
|
||||
// 仅保留用户自定义扩展模块
|
||||
if (this.onlyCustomizeAddi) {
|
||||
if (Object.prototype.toString.call(this.additionalModel) === "[object Array]") {
|
||||
return this.additionalModel || [];
|
||||
if (onlyCustomizeAddi.value) {
|
||||
if (
|
||||
Object.prototype.toString.call(additionalModel.value) === "[object Array]"
|
||||
) {
|
||||
return additionalModel.value || [];
|
||||
}
|
||||
return [this.additionalModel];
|
||||
return [additionalModel.value];
|
||||
}
|
||||
|
||||
// 插入用户自定义扩展模块
|
||||
if (Object.prototype.toString.call(this.additionalModel) === "[object Array]") {
|
||||
Modules.push(...this.additionalModel);
|
||||
if (
|
||||
Object.prototype.toString.call(additionalModel.value) === "[object Array]"
|
||||
) {
|
||||
Modules.push(...additionalModel.value);
|
||||
} else {
|
||||
this.additionalModel && Modules.push(this.additionalModel);
|
||||
additionalModel.value && Modules.push(additionalModel.value);
|
||||
}
|
||||
|
||||
// 翻译模块
|
||||
const TranslateModule = {
|
||||
translate: ["value", customTranslate(this.translations || translationsCN)]
|
||||
translate: ["value", customTranslate(translations.value || translationsCN)],
|
||||
};
|
||||
Modules.push(TranslateModule);
|
||||
|
||||
// 模拟流转模块
|
||||
if (this.simulation) {
|
||||
if (simulation.value) {
|
||||
Modules.push(tokenSimulation);
|
||||
}
|
||||
|
||||
// 根据需要的流程类型设置扩展元素构建模块
|
||||
// if (this.prefix === "bpmn") {
|
||||
// if (prefix.value === "bpmn") {
|
||||
// Modules.push(bpmnModdleExtension);
|
||||
// }
|
||||
if (this.prefix === "camunda") {
|
||||
if (prefix.value === "camunda") {
|
||||
Modules.push(camundaModdleExtension);
|
||||
}
|
||||
if (this.prefix === "flowable") {
|
||||
Modules.push(flowableModdleExtension);
|
||||
}
|
||||
if (this.prefix === "activiti") {
|
||||
// FIXME: Function.prototype.bind.apply(...) is not a constructor
|
||||
// if (prefix.value === "flowable") {
|
||||
// Modules.push(flowableModdleExtension);
|
||||
// }
|
||||
if (prefix.value === "activiti") {
|
||||
Modules.push(activitiModdleExtension);
|
||||
}
|
||||
|
||||
return Modules;
|
||||
},
|
||||
moddleExtensions() {
|
||||
});
|
||||
console.log(additionalModules.value);
|
||||
const moddleExtensions = computed(() => {
|
||||
const Extensions = {};
|
||||
// 仅使用用户自定义模块
|
||||
if (this.onlyCustomizeModdle) {
|
||||
return this.moddleExtension || null;
|
||||
if (onlyCustomizeModdle.value) {
|
||||
return moddleExtension.value || null;
|
||||
}
|
||||
|
||||
// 插入用户自定义模块
|
||||
if (this.moddleExtension) {
|
||||
for (let key in this.moddleExtension) {
|
||||
Extensions[key] = this.moddleExtension[key];
|
||||
if (moddleExtension.value) {
|
||||
for (let key in moddleExtension.value) {
|
||||
Extensions[key] = moddleExtension.value[key];
|
||||
}
|
||||
}
|
||||
|
||||
// 根据需要的 "流程类型" 设置 对应的解析文件
|
||||
if (this.prefix === "activiti") {
|
||||
if (prefix.value === "activiti") {
|
||||
Extensions.activiti = activitiModdleDescriptor;
|
||||
}
|
||||
if (this.prefix === "flowable") {
|
||||
if (prefix.value === "flowable") {
|
||||
Extensions.flowable = flowableModdleDescriptor;
|
||||
}
|
||||
if (this.prefix === "camunda") {
|
||||
if (prefix.value === "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: {
|
||||
onSave () {
|
||||
|
||||
onMounted(() => {
|
||||
initBpmnModeler();
|
||||
createNewDiagram(value.value);
|
||||
});
|
||||
onBeforeUnmount(() => {
|
||||
if (bpmnModeler) bpmnModeler.destroy();
|
||||
emit("destroy", bpmnModeler);
|
||||
bpmnModeler = null;
|
||||
});
|
||||
function onSave() {
|
||||
return new Promise((resolve, reject) => {
|
||||
if (this.bpmnModeler == null) {
|
||||
if (bpmnModeler == null) {
|
||||
reject();
|
||||
}
|
||||
this.bpmnModeler.saveXML({ format: true }).then(({ xml }) => {
|
||||
this.$emit('save', xml);
|
||||
bpmnModeler.saveXML({ format: true }).then(({ xml }) => {
|
||||
emit("save", xml);
|
||||
resolve(xml);
|
||||
});
|
||||
})
|
||||
},
|
||||
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;
|
||||
}
|
||||
function initBpmnModeler() {
|
||||
if (bpmnModeler) return;
|
||||
bpmnModeler = new BpmnModeler({
|
||||
container: bpmnCanvasRef.value,
|
||||
keyboard: keyboard.value ? { bindTo: document } : null,
|
||||
additionalModules: additionalModules.value,
|
||||
moddleExtensions: moddleExtensions.value,
|
||||
});
|
||||
console.log("init-finished");
|
||||
emit("init-finished", bpmnModeler);
|
||||
initModelListeners();
|
||||
}
|
||||
function initModelListeners() {
|
||||
const EventBus = bpmnModeler.get("eventBus");
|
||||
console.log(EventBus);
|
||||
// const that = this;
|
||||
// 注册需要的监听事件, 将. 替换为 - , 避免解析异常
|
||||
this.events.forEach(event => {
|
||||
EventBus.on(event, function(eventObj) {
|
||||
events.value.forEach((event) => {
|
||||
bpmnModeler.on(event, function (eventObj) {
|
||||
console.log("element-click", eventObj);
|
||||
|
||||
let eventName = event.replace(/\./g, "-");
|
||||
let element = eventObj ? eventObj.element : null;
|
||||
that.$emit(eventName, element, eventObj);
|
||||
that.$emit('event', eventName, element, eventObj);
|
||||
emit(eventName, element, eventObj);
|
||||
emit("event", 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}`);
|
||||
}
|
||||
});
|
||||
//FIXME: 监听图形改变返回xml
|
||||
// EventBus.on("commandStack.changed", async (event) => {
|
||||
// try {
|
||||
// recoverable.value = bpmnModeler.get("commandStack").canRedo();
|
||||
// revocable.value = bpmnModeler.get("commandStack").canUndo();
|
||||
// let { xml } = await bpmnModeler.saveXML({ format: true });
|
||||
// emit("commandStack-changed", event);
|
||||
// emit("input", xml);
|
||||
// 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 });
|
||||
bpmnModeler.on("canvas.viewbox.changed", ({ viewbox }) => {
|
||||
emit("canvas-viewbox-changed", { viewbox });
|
||||
const { scale } = viewbox;
|
||||
this.defaultZoom = Math.floor(scale * 100) / 100;
|
||||
defaultZoom.value = Math.floor(scale * 100) / 100;
|
||||
});
|
||||
},
|
||||
}
|
||||
/* 创建新的流程图 */
|
||||
async createNewDiagram(xml) {
|
||||
async function 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);
|
||||
let newId = processId.value || `Process_${new Date().getTime()}`;
|
||||
let newName = processName.value || `业务流程_${new Date().getTime()}`;
|
||||
let xmlString = xml || DefaultEmptyXML(newId, newName, prefix.value);
|
||||
try {
|
||||
let { warnings } = await this.bpmnModeler.importXML(xmlString);
|
||||
let { warnings } = await bpmnModeler.importXML(xmlString);
|
||||
if (warnings && warnings.length) {
|
||||
warnings.forEach(warn => console.warn(warn));
|
||||
warnings.forEach((warn) => console.warn(warn));
|
||||
}
|
||||
} catch (e) {
|
||||
console.error(`[Process Designer Warn]: ${e.message || e}`);
|
||||
}
|
||||
},
|
||||
}
|
||||
|
||||
// 下载流程图到本地
|
||||
async downloadProcess(type, name) {
|
||||
async function downloadProcess(type, name) {
|
||||
try {
|
||||
const _this = this;
|
||||
// const _this = this;
|
||||
// 按需要类型创建文件并下载
|
||||
if (type === "xml" || type === "bpmn") {
|
||||
const { err, xml } = await this.bpmnModeler.saveXML();
|
||||
const { err, xml } = await bpmnModeler.saveXML();
|
||||
// 读取异常时抛出异常
|
||||
if (err) {
|
||||
console.error(`[Process Designer Warn ]: ${err.message || err}`);
|
||||
}
|
||||
let { href, filename } = _this.setEncoded(type.toUpperCase(), name, xml);
|
||||
let { href, filename } = setEncoded(type.toUpperCase(), name, xml);
|
||||
downloadFunc(href, filename);
|
||||
} else {
|
||||
const { err, svg } = await this.bpmnModeler.saveSVG();
|
||||
const { err, svg } = await bpmnModeler.saveSVG();
|
||||
// 读取异常时抛出异常
|
||||
if (err) {
|
||||
return console.error(err);
|
||||
}
|
||||
let { href, filename } = _this.setEncoded("SVG", name, svg);
|
||||
let { href, filename } = setEncoded("SVG", name, svg);
|
||||
downloadFunc(href, filename);
|
||||
}
|
||||
} catch (e) {
|
||||
@ -353,113 +537,124 @@ export default {
|
||||
URL.revokeObjectURL(a.href); // 释放URL 对象
|
||||
}
|
||||
}
|
||||
},
|
||||
}
|
||||
|
||||
// 根据所需类型进行转码并返回下载地址
|
||||
setEncoded(type, filename = "diagram", data) {
|
||||
function 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
|
||||
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];
|
||||
function importLocalFile() {
|
||||
// const that = this;
|
||||
const file = refFile.value.files[0];
|
||||
const reader = new FileReader();
|
||||
reader.readAsText(file);
|
||||
reader.onload = function () {
|
||||
let xmlStr = this.result;
|
||||
that.createNewDiagram(xmlStr);
|
||||
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;
|
||||
function downloadProcessAsXml() {
|
||||
downloadProcess("xml");
|
||||
}
|
||||
function downloadProcessAsBpmn() {
|
||||
downloadProcess("bpmn");
|
||||
}
|
||||
function downloadProcessAsSvg() {
|
||||
downloadProcess("svg");
|
||||
}
|
||||
function processSimulation() {
|
||||
simulationStatus.value = !simulationStatus.value;
|
||||
simulation.value && bpmnModeler.get("toggleMode").toggleMode();
|
||||
}
|
||||
function processRedo() {
|
||||
bpmnModeler.get("commandStack").redo();
|
||||
}
|
||||
function processUndo() {
|
||||
bpmnModeler.get("commandStack").undo();
|
||||
}
|
||||
function processZoomIn(zoomStep = 0.1) {
|
||||
let newZoom = Math.floor(defaultZoom.value * 100 + zoomStep * 100) / 100;
|
||||
if (newZoom > 4) {
|
||||
throw new Error("[Process Designer Warn ]: The zoom ratio cannot be greater than 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");
|
||||
defaultZoom.value = newZoom;
|
||||
bpmnModeler.get("canvas").zoom(defaultZoom.value);
|
||||
}
|
||||
this.defaultZoom = newZoom;
|
||||
this.bpmnModeler.get("canvas").zoom(this.defaultZoom);
|
||||
},
|
||||
processZoomTo(newZoom = 1) {
|
||||
function processZoomOut(zoomStep = 0.1) {
|
||||
let newZoom = Math.floor(defaultZoom.value * 100 - zoomStep * 100) / 100;
|
||||
if (newZoom < 0.2) {
|
||||
throw new Error("[Process Designer Warn ]: The zoom ratio cannot be less than 0.2");
|
||||
throw new Error(
|
||||
"[Process Designer Warn ]: The zoom ratio cannot be less than 0.2"
|
||||
);
|
||||
}
|
||||
defaultZoom.value = newZoom;
|
||||
bpmnModeler.get("canvas").zoom(defaultZoom.value);
|
||||
}
|
||||
function 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");
|
||||
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).then(() => this.bpmnModeler.get("canvas").zoom(1, "auto"));
|
||||
},
|
||||
elementsAlign(align) {
|
||||
const Align = this.bpmnModeler.get("alignElements");
|
||||
const Selection = this.bpmnModeler.get("selection");
|
||||
defaultZoom.value = newZoom;
|
||||
bpmnModeler.get("canvas").zoom(newZoom);
|
||||
}
|
||||
function processReZoom() {
|
||||
defaultZoom.value = 1;
|
||||
bpmnModeler.get("canvas").zoom("fit-viewport", "auto");
|
||||
}
|
||||
function processRestart() {
|
||||
recoverable.value = false;
|
||||
revocable.value = false;
|
||||
createNewDiagram(null).then(() => bpmnModeler.get("canvas").zoom(1, "auto"));
|
||||
}
|
||||
function elementsAlign(align) {
|
||||
const Align = bpmnModeler.get("alignElements");
|
||||
const Selection = bpmnModeler.get("selection");
|
||||
const SelectedElements = Selection.get();
|
||||
if (!SelectedElements || SelectedElements.length <= 1) {
|
||||
this.$message.warning("请按住 Ctrl 键选择多个元素对齐");
|
||||
ElMessage.warning("请按住 Ctrl 键选择多个元素对齐");
|
||||
return;
|
||||
}
|
||||
this.$confirm("自动对齐可能造成图形变形，是否继续？", "警告", {
|
||||
ElMessageBox.confirm("自动对齐可能造成图形变形，是否继续？", "警告", {
|
||||
confirmButtonText: "确定",
|
||||
cancelButtonText: "取消",
|
||||
type: "warning"
|
||||
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;
|
||||
}
|
||||
/*---------------------------- 方法结束 ---------------------------------*/
|
||||
function previewProcessXML() {
|
||||
bpmnModeler.saveXML({ format: true }).then(({ xml }) => {
|
||||
previewResult.value = xml;
|
||||
previewType.value = "xml";
|
||||
previewModelVisible.value = true;
|
||||
});
|
||||
}
|
||||
function previewProcessJson() {
|
||||
bpmnModeler.saveXML({ format: true }).then(({ xml }) => {
|
||||
previewResult.value = convert.xml2json(xml, { spaces: 2 });
|
||||
previewType.value = "json";
|
||||
previewModelVisible.value = true;
|
||||
});
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style>
|
||||
@import "highlight.js/styles/atom-one-dark-reasonable.css";
|
||||
</style>
|
||||
|
||||
@ -95,4 +95,4 @@ ActivitiModdleExtension.prototype.canCloneProperty = function (
|
||||
}
|
||||
};
|
||||
|
||||
module.exports = ActivitiModdleExtension;
|
||||
export default ActivitiModdleExtension;
|
||||
|
||||
@ -108,7 +108,7 @@ CamundaModdleExtension.prototype.canHostIn = function (parent) {
|
||||
return true;
|
||||
};
|
||||
|
||||
module.exports = CamundaModdleExtension;
|
||||
export default CamundaModdleExtension;
|
||||
|
||||
// helpers //////////
|
||||
|
||||
|
||||
@ -94,4 +94,4 @@ FlowableModdleExtension.prototype.canCloneProperty = function (
|
||||
}
|
||||
};
|
||||
|
||||
module.exports = FlowableModdleExtension;
|
||||
export default FlowableModdleExtension;
|
||||
|
||||
0
src/plugins/package/designer/test.vue
Normal file
0
src/plugins/package/designer/test.vue
Normal file
@ -1,5 +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"));
|
||||
// import hljs from "highlight.js/lib/core";
|
||||
// hljs.registerLanguage("xml", () => import("highlight.js/lib/languages/xml"));
|
||||
// hljs.registerLanguage("json", () => import("highlight.js/lib/languages/json"));
|
||||
|
||||
export default hljs;
|
||||
// export default hljs;
|
||||
|
||||
@ -2,49 +2,100 @@
|
||||
<div class="process-panel__container" :style="{ width: `${this.width}px` }">
|
||||
<el-collapse v-model="activeTab">
|
||||
<el-collapse-item name="base">
|
||||
<div slot="title" class="panel-tab__title"><i class="el-icon-info"></i>常规</div>
|
||||
<element-base-info :id-edit-disabled="idEditDisabled" :business-object="elementBusinessObject" :type="elementType" />
|
||||
<div slot="title" class="panel-tab__title">
|
||||
<i class="el-icon-info"></i>常规
|
||||
</div>
|
||||
<element-base-info
|
||||
:id-edit-disabled="idEditDisabled"
|
||||
:business-object="elementBusinessObject"
|
||||
:type="elementType"
|
||||
/>
|
||||
</el-collapse-item>
|
||||
<el-collapse-item name="condition" v-if="elementType === 'Process'" key="message">
|
||||
<div slot="title" class="panel-tab__title"><i class="el-icon-s-comment"></i>消息与信号</div>
|
||||
<el-collapse-item
|
||||
name="condition"
|
||||
v-if="elementType === 'Process'"
|
||||
key="message"
|
||||
>
|
||||
<div slot="title" class="panel-tab__title">
|
||||
<i class="el-icon-s-comment"></i>消息与信号
|
||||
</div>
|
||||
<signal-and-massage />
|
||||
</el-collapse-item>
|
||||
<el-collapse-item name="condition" v-if="conditionFormVisible" key="condition">
|
||||
<div slot="title" class="panel-tab__title"><i class="el-icon-s-promotion"></i>流转条件</div>
|
||||
<flow-condition :business-object="elementBusinessObject" :type="elementType" />
|
||||
<el-collapse-item
|
||||
name="condition"
|
||||
v-if="conditionFormVisible"
|
||||
key="condition"
|
||||
>
|
||||
<div slot="title" class="panel-tab__title">
|
||||
<i class="el-icon-s-promotion"></i>流转条件
|
||||
</div>
|
||||
<flow-condition
|
||||
:business-object="elementBusinessObject"
|
||||
:type="elementType"
|
||||
/>
|
||||
</el-collapse-item>
|
||||
<el-collapse-item name="condition" v-if="formVisible" key="form">
|
||||
<div slot="title" class="panel-tab__title"><i class="el-icon-s-order"></i>表单</div>
|
||||
<div slot="title" class="panel-tab__title">
|
||||
<i class="el-icon-s-order"></i>表单
|
||||
</div>
|
||||
<element-form :id="elementId" :type="elementType" />
|
||||
</el-collapse-item>
|
||||
<el-collapse-item name="task" v-if="elementType.indexOf('Task') !== -1" key="task">
|
||||
<div slot="title" class="panel-tab__title"><i class="el-icon-s-claim"></i>任务</div>
|
||||
<el-collapse-item
|
||||
name="task"
|
||||
v-if="elementType.indexOf('Task') !== -1"
|
||||
key="task"
|
||||
>
|
||||
<div slot="title" class="panel-tab__title">
|
||||
<i class="el-icon-s-claim"></i>任务
|
||||
</div>
|
||||
<element-task :id="elementId" :type="elementType" />
|
||||
</el-collapse-item>
|
||||
<el-collapse-item name="multiInstance" v-if="elementType.indexOf('Task') !== -1 && elementType !== 'UserTask'" key="multiInstance">
|
||||
<div slot="title" class="panel-tab__title"><i class="el-icon-s-help"></i>多实例</div>
|
||||
<element-multi-instance :business-object="elementBusinessObject" :type="elementType" />
|
||||
<el-collapse-item
|
||||
name="multiInstance"
|
||||
v-if="elementType.indexOf('Task') !== -1 && elementType !== 'UserTask'"
|
||||
key="multiInstance"
|
||||
>
|
||||
<div slot="title" class="panel-tab__title">
|
||||
<i class="el-icon-s-help"></i>多实例
|
||||
</div>
|
||||
<element-multi-instance
|
||||
:business-object="elementBusinessObject"
|
||||
:type="elementType"
|
||||
/>
|
||||
</el-collapse-item>
|
||||
<el-collapse-item name="listeners" key="listeners">
|
||||
<div slot="title" class="panel-tab__title"><i class="el-icon-message-solid"></i>执行监听器</div>
|
||||
<div slot="title" class="panel-tab__title">
|
||||
<i class="el-icon-message-solid"></i>执行监听器
|
||||
</div>
|
||||
<element-listeners :id="elementId" :type="elementType" />
|
||||
</el-collapse-item>
|
||||
<el-collapse-item name="taskListeners" v-if="elementType === 'UserTask'" key="taskListeners">
|
||||
<div slot="title" class="panel-tab__title"><i class="el-icon-message-solid"></i>任务监听器</div>
|
||||
<el-collapse-item
|
||||
name="taskListeners"
|
||||
v-if="elementType === 'UserTask'"
|
||||
key="taskListeners"
|
||||
>
|
||||
<div slot="title" class="panel-tab__title">
|
||||
<i class="el-icon-message-solid"></i>任务监听器
|
||||
</div>
|
||||
<user-task-listeners :id="elementId" :type="elementType" />
|
||||
</el-collapse-item>
|
||||
<el-collapse-item name="extensions" key="extensions">
|
||||
<div slot="title" class="panel-tab__title"><i class="el-icon-circle-plus"></i>扩展属性</div>
|
||||
<div slot="title" class="panel-tab__title">
|
||||
<i class="el-icon-circle-plus"></i>扩展属性
|
||||
</div>
|
||||
<element-properties :id="elementId" :type="elementType" />
|
||||
</el-collapse-item>
|
||||
<el-collapse-item name="other" key="other">
|
||||
<div slot="title" class="panel-tab__title"><i class="el-icon-s-promotion"></i>其他</div>
|
||||
<div slot="title" class="panel-tab__title">
|
||||
<i class="el-icon-s-promotion"></i>其他
|
||||
</div>
|
||||
<element-other-config :id="elementId" />
|
||||
</el-collapse-item>
|
||||
</el-collapse>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
|
||||
<script setup name="BpmnPropertiesPanel">
|
||||
import ElementBaseInfo from "./base/ElementBaseInfo";
|
||||
import ElementOtherConfig from "./other/ElementOtherConfig";
|
||||
import ElementTask from "./task/ElementTask";
|
||||
@ -55,114 +106,129 @@ import ElementListeners from "./listeners/ElementListeners";
|
||||
import ElementProperties from "./properties/ElementProperties";
|
||||
import ElementForm from "./form/ElementForm";
|
||||
import UserTaskListeners from "./listeners/UserTaskListeners";
|
||||
/**
|
||||
* 侧边栏
|
||||
* @Author MiyueFE
|
||||
* @Home https://github.com/miyuesc
|
||||
* @Date 2021年3月31日18:57:51
|
||||
*/
|
||||
export default {
|
||||
name: "BpmnPropertiesPanel",
|
||||
components: {
|
||||
UserTaskListeners,
|
||||
ElementForm,
|
||||
ElementProperties,
|
||||
ElementListeners,
|
||||
SignalAndMassage,
|
||||
FlowCondition,
|
||||
ElementMultiInstance,
|
||||
ElementTask,
|
||||
ElementOtherConfig,
|
||||
ElementBaseInfo
|
||||
},
|
||||
componentName: "BpmnPropertiesPanel",
|
||||
props: {
|
||||
import { provide, toRefs, watch } from "vue";
|
||||
import useBpmnStore from "@/store/modules/bpmn";
|
||||
|
||||
const props = defineProps({
|
||||
bpmnModeler: Object,
|
||||
prefix: {
|
||||
type: String,
|
||||
default: "camunda"
|
||||
default: "camunda",
|
||||
},
|
||||
width: {
|
||||
type: Number,
|
||||
default: 480
|
||||
default: 480,
|
||||
},
|
||||
idEditDisabled: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
default: false,
|
||||
},
|
||||
provide() {
|
||||
return {
|
||||
prefix: this.prefix,
|
||||
width: this.width
|
||||
};
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
activeTab: "base",
|
||||
elementId: "",
|
||||
elementType: "",
|
||||
elementBusinessObject: {}, // 元素 businessObject 镜像，提供给需要做判断的组件使用
|
||||
conditionFormVisible: false, // 流转条件设置
|
||||
formVisible: false // 表单配置
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
elementId: {
|
||||
handler() {
|
||||
this.activeTab = "base";
|
||||
}
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.initModels();
|
||||
},
|
||||
methods: {
|
||||
initModels() {
|
||||
});
|
||||
|
||||
const { bpmnModeler, prefix, width, idEditDisabled } = toRefs(props);
|
||||
provide("prefix", prefix.value);
|
||||
provide("width", width.value);
|
||||
const bpmnStore = useBpmnStore();
|
||||
// const data = reactive({
|
||||
// timer: undefined,
|
||||
// });
|
||||
// const { timer } = toRefs(data);
|
||||
|
||||
const activeTab = ref("base");
|
||||
const elementId = ref("");
|
||||
const elementType = ref("");
|
||||
const elementBusinessObject = ref({}); // 元素 businessObject 镜像，提供给需要做判断的组件使用
|
||||
const conditionFormVisible = ref(false); // 流转条件设置
|
||||
const formVisible = ref(false); // 表单配置
|
||||
let timer;
|
||||
let bpmnElement;
|
||||
function initModels() {
|
||||
// bpmnStore.count = 123;
|
||||
console.log(bpmnModeler.value);
|
||||
// 初始化 modeler 以及其他 moddle
|
||||
if (!this.bpmnModeler) {
|
||||
if (!bpmnModeler.value) {
|
||||
// 避免加载时 流程图 并未加载完成
|
||||
this.timer = setTimeout(() => this.initModels(), 10);
|
||||
timer = setTimeout(() => initModels(), 10);
|
||||
return;
|
||||
}
|
||||
if (this.timer) clearTimeout(this.timer);
|
||||
// console.log(timer);
|
||||
if (timer) clearTimeout(timer);
|
||||
// timer = null;
|
||||
console.log(bpmnModeler.value);
|
||||
// bpmnStore.bpmnInstances = {
|
||||
// test: bpmnModeler.value,
|
||||
// };
|
||||
// bpmnModeler.value.get = undefined;
|
||||
// console.log(JSON.stringify(bpmnModeler.value));
|
||||
// bpmnStore.setBpmnInstances({
|
||||
// modeler: { _container: bpmnModeler.value._container },
|
||||
// // modeling: bpmnModeler.value.get("modeling"),
|
||||
// // moddle: bpmnModeler.value.get("moddle"),
|
||||
// // eventBus: bpmnModeler.value.get("eventBus"),
|
||||
// // bpmnFactory: bpmnModeler.value.get("bpmnFactory"),
|
||||
// // elementFactory: bpmnModeler.value.get("elementFactory"),
|
||||
// elementRegistry: {
|
||||
// _elements: bpmnModeler.value.get("elementRegistry")._elements,
|
||||
// },
|
||||
// // replace: bpmnModeler.value.get("replace"),
|
||||
// // selection: bpmnModeler.value.get("selection"),
|
||||
// });
|
||||
// bpmnStore.bpmnInstances =
|
||||
// {
|
||||
// modeler: bpmnModeler.value,
|
||||
// modeling: bpmnModeler.value.get("modeling"),
|
||||
// moddle: bpmnModeler.value.get("moddle"),
|
||||
// eventBus: bpmnModeler.value.get("eventBus"),
|
||||
// bpmnFactory: bpmnModeler.value.get("bpmnFactory"),
|
||||
// elementFactory: bpmnModeler.value.get("elementFactory"),
|
||||
// elementRegistry: bpmnModeler.value.get("elementRegistry"),
|
||||
// replace: bpmnModeler.value.get("replace"),
|
||||
// selection: bpmnModeler.value.get("selection"),
|
||||
// };
|
||||
console.log(bpmnStore.bpmnInstances, "167");
|
||||
window.bpmnInstances = {
|
||||
modeler: this.bpmnModeler,
|
||||
modeling: this.bpmnModeler.get("modeling"),
|
||||
moddle: this.bpmnModeler.get("moddle"),
|
||||
eventBus: this.bpmnModeler.get("eventBus"),
|
||||
bpmnFactory: this.bpmnModeler.get("bpmnFactory"),
|
||||
elementFactory: this.bpmnModeler.get("elementFactory"),
|
||||
elementRegistry: this.bpmnModeler.get("elementRegistry"),
|
||||
replace: this.bpmnModeler.get("replace"),
|
||||
selection: this.bpmnModeler.get("selection")
|
||||
modeler: bpmnModeler.value,
|
||||
modeling: bpmnModeler.value.get("modeling"),
|
||||
moddle: bpmnModeler.value.get("moddle"),
|
||||
eventBus: bpmnModeler.value.get("eventBus"),
|
||||
bpmnFactory: bpmnModeler.value.get("bpmnFactory"),
|
||||
elementFactory: bpmnModeler.value.get("elementFactory"),
|
||||
elementRegistry: bpmnModeler.value.get("elementRegistry"),
|
||||
replace: bpmnModeler.value.get("replace"),
|
||||
selection: bpmnModeler.value.get("selection"),
|
||||
};
|
||||
this.getActiveElement();
|
||||
},
|
||||
getActiveElement() {
|
||||
getActiveElement();
|
||||
}
|
||||
function getActiveElement() {
|
||||
console.log("select first");
|
||||
// 初始第一个选中元素 bpmn:Process
|
||||
this.initFormOnChanged(null);
|
||||
this.bpmnModeler.on("import.done", e => {
|
||||
this.initFormOnChanged(null);
|
||||
initFormOnChanged(null);
|
||||
bpmnModeler.value.on("import.done", (e) => {
|
||||
initFormOnChanged(null);
|
||||
});
|
||||
// 监听选择事件，修改当前激活的元素以及表单
|
||||
this.bpmnModeler.on("selection.changed", ({ newSelection }) => {
|
||||
this.initFormOnChanged(newSelection[0] || null);
|
||||
bpmnModeler.value.on("selection.changed", ({ newSelection }) => {
|
||||
console.log("selection.changed");
|
||||
initFormOnChanged(newSelection[0] || null);
|
||||
});
|
||||
this.bpmnModeler.on("element.changed", ({ element }) => {
|
||||
bpmnModeler.value.on("element.changed", ({ element }) => {
|
||||
// 保证 修改 "默认流转路径" 类似需要修改多个元素的事件发生的时候，更新表单的元素与原选中元素不一致。
|
||||
if (element && element.id === this.elementId) {
|
||||
this.initFormOnChanged(element);
|
||||
if (element && element.id === elementId.value) {
|
||||
initFormOnChanged(element);
|
||||
}
|
||||
});
|
||||
},
|
||||
}
|
||||
// 初始化数据
|
||||
initFormOnChanged(element) {
|
||||
function initFormOnChanged(element) {
|
||||
let activatedElement = element;
|
||||
if (!activatedElement) {
|
||||
activatedElement =
|
||||
window.bpmnInstances.elementRegistry.find(el => el.type === "bpmn:Process") ??
|
||||
window.bpmnInstances.elementRegistry.find(el => el.type === "bpmn:Collaboration");
|
||||
window.bpmnInstances.elementRegistry.find(
|
||||
(el) => el.type === "bpmn:Process"
|
||||
) ??
|
||||
window.bpmnInstances.elementRegistry.find(
|
||||
(el) => el.type === "bpmn:Collaboration"
|
||||
);
|
||||
}
|
||||
if (!activatedElement) return;
|
||||
console.log(`
|
||||
@ -174,20 +240,26 @@ export default {
|
||||
`);
|
||||
console.log("businessObject: ", activatedElement.businessObject);
|
||||
window.bpmnInstances.bpmnElement = activatedElement;
|
||||
this.bpmnElement = activatedElement;
|
||||
this.elementId = activatedElement.id;
|
||||
this.elementType = activatedElement.type.split(":")[1] || "";
|
||||
this.elementBusinessObject = JSON.parse(JSON.stringify(activatedElement.businessObject));
|
||||
this.conditionFormVisible = !!(
|
||||
this.elementType === "SequenceFlow" &&
|
||||
bpmnElement = activatedElement;
|
||||
elementId.value = activatedElement.id;
|
||||
elementType.value = activatedElement.type.split(":")[1] || "";
|
||||
elementBusinessObject.value = JSON.parse(
|
||||
JSON.stringify(activatedElement.businessObject)
|
||||
);
|
||||
conditionFormVisible.value = !!(
|
||||
elementType.value === "SequenceFlow" &&
|
||||
activatedElement.source &&
|
||||
activatedElement.source.type.indexOf("StartEvent") === -1
|
||||
);
|
||||
this.formVisible = this.elementType === "UserTask" || this.elementType === "StartEvent";
|
||||
},
|
||||
beforeDestroy() {
|
||||
formVisible.value =
|
||||
elementType.value === "UserTask" || elementType.value === "StartEvent";
|
||||
}
|
||||
function beforeDestroy() {
|
||||
window.bpmnInstances = null;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
watch(elementId, (val) => {
|
||||
activeTab.value = "base";
|
||||
});
|
||||
initModels();
|
||||
</script>
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div class="panel-tab__content">
|
||||
<el-form size="mini" label-width="90px" @submit.native.prevent>
|
||||
<el-form size="small" label-width="90px" @submit.native.prevent>
|
||||
<el-form-item label="ID">
|
||||
<el-input
|
||||
v-model="elementBaseInfo.id"
|
||||
@ -10,67 +10,83 @@
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="名称">
|
||||
<el-input v-model="elementBaseInfo.name" clearable @change="updateBaseInfo('name')" />
|
||||
<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-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-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: {
|
||||
<script setup name="ElementBaseInfo">
|
||||
import { nextTick, onBeforeUnmount, toRefs } from "vue";
|
||||
import useBpmnStore from "@/store/modules/bpmn";
|
||||
const bpmnStore = useBpmnStore();
|
||||
const props = defineProps({
|
||||
businessObject: Object,
|
||||
type: String,
|
||||
idEditDisabled: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
}
|
||||
default: true,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
});
|
||||
const { businessObject, type, idEditDisabled } = toRefs(props);
|
||||
const data = reactive({
|
||||
elementBaseInfo: {},
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
businessObject: {
|
||||
immediate: false,
|
||||
handler: function(val) {
|
||||
bpmnElement: undefined,
|
||||
});
|
||||
const { elementBaseInfo, bpmnElement } = toRefs(data);
|
||||
watch(
|
||||
businessObject,
|
||||
(val) => {
|
||||
if (val) {
|
||||
this.$nextTick(() => this.resetBaseInfo());
|
||||
}
|
||||
}
|
||||
nextTick(() => {
|
||||
resetBaseInfo();
|
||||
});
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
resetBaseInfo() {
|
||||
this.bpmnElement = window?.bpmnInstances?.bpmnElement;
|
||||
this.elementBaseInfo = JSON.parse(JSON.stringify(this.bpmnElement.businessObject));
|
||||
},
|
||||
updateBaseInfo(key) {
|
||||
{ immediate: false }
|
||||
);
|
||||
|
||||
function resetBaseInfo() {
|
||||
bpmnElement.value = window?.bpmnInstances?.bpmnElement;
|
||||
elementBaseInfo.value = JSON.parse(
|
||||
JSON.stringify(bpmnElement.value.businessObject)
|
||||
);
|
||||
}
|
||||
function updateBaseInfo(key) {
|
||||
const attrObj = Object.create(null);
|
||||
attrObj[key] = this.elementBaseInfo[key];
|
||||
attrObj[key] = elementBaseInfo.value[key];
|
||||
if (key === "id") {
|
||||
window.bpmnInstances.modeling.updateProperties(this.bpmnElement, {
|
||||
id: this.elementBaseInfo[key],
|
||||
di: { id: `${this.elementBaseInfo[key]}_di` }
|
||||
window.bpmnInstances.modeling.updateProperties(bpmnElement.value, {
|
||||
id: elementBaseInfo.value[key],
|
||||
di: { id: `${elementBaseInfo.value[key]}_di` },
|
||||
});
|
||||
} else {
|
||||
window.bpmnInstances.modeling.updateProperties(this.bpmnElement, attrObj);
|
||||
window.bpmnInstances.modeling.updateProperties(bpmnElement.value, attrObj);
|
||||
}
|
||||
}
|
||||
},
|
||||
beforeDestroy() {
|
||||
this.bpmnElement = null;
|
||||
}
|
||||
};
|
||||
onBeforeUnmount(() => {
|
||||
bpmnElement.value = null;
|
||||
});
|
||||
</script>
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div class="panel-tab__content">
|
||||
<el-form :model="flowConditionForm" label-width="90px" size="mini" @submit.native.prevent>
|
||||
<el-form :model="flowConditionForm" label-width="90px" size="small" @submit.native.prevent>
|
||||
<el-form-item label="流转类型">
|
||||
<el-select v-model="flowConditionForm.type" @change="updateFlowType">
|
||||
<el-option label="普通流转路径" value="normal" />
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div class="panel-tab__content">
|
||||
<el-form size="mini" label-width="80px" @submit.native.prevent>
|
||||
<el-form size="small" label-width="80px" @submit.native.prevent>
|
||||
<el-form-item label="表单" prop="formKey">
|
||||
<el-select
|
||||
v-model="formKey"
|
||||
@ -30,27 +30,27 @@
|
||||
<!--字段列表-->
|
||||
<!-- <div class="element-property list-property">-->
|
||||
<!-- <el-divider><i class="el-icon-coin"></i> 表单字段</el-divider>-->
|
||||
<!-- <el-table :data="fieldList" size="mini" max-height="240" border fit>-->
|
||||
<!-- <el-table :data="fieldList" size="small" max-height="240" border fit>-->
|
||||
<!-- <el-table-column label="序号" type="index" width="50px" />-->
|
||||
<!-- <el-table-column label="字段名称" prop="label" min-width="80px" show-overflow-tooltip />-->
|
||||
<!-- <el-table-column label="字段类型" prop="type" min-width="80px" :formatter="row => fieldType[row.type] || row.type" show-overflow-tooltip />-->
|
||||
<!-- <el-table-column label="默认值" prop="defaultValue" min-width="80px" show-overflow-tooltip />-->
|
||||
<!-- <el-table-column label="操作" width="90px">-->
|
||||
<!-- <template slot-scope="{ row, $index }">-->
|
||||
<!-- <el-button size="mini" type="text" @click="openFieldForm(row, $index)">编辑</el-button>-->
|
||||
<!-- <el-button size="small" type="text" @click="openFieldForm(row, $index)">编辑</el-button>-->
|
||||
<!-- <el-divider direction="vertical" />-->
|
||||
<!-- <el-button size="mini" type="text" style="color: #ff4d4f" @click="removeField(row, $index)">移除</el-button>-->
|
||||
<!-- <el-button size="small" type="text" style="color: #ff4d4f" @click="removeField(row, $index)">移除</el-button>-->
|
||||
<!-- </template>-->
|
||||
<!-- </el-table-column>-->
|
||||
<!-- </el-table>-->
|
||||
<!-- </div>-->
|
||||
<!-- <div class="element-drawer__button">-->
|
||||
<!-- <el-button size="mini" type="primary" icon="el-icon-plus" @click="openFieldForm(null, -1)">添加字段</el-button>-->
|
||||
<!-- <el-button size="small" type="primary" icon="el-icon-plus" @click="openFieldForm(null, -1)">添加字段</el-button>-->
|
||||
<!-- </div>-->
|
||||
|
||||
<!--字段配置侧边栏-->
|
||||
<!-- <el-drawer :visible.sync="fieldModelVisible" title="字段配置" :size="`${width}px`" append-to-body destroy-on-close>-->
|
||||
<!-- <el-form :model="formFieldForm" label-width="90px" size="mini" @submit.native.prevent>-->
|
||||
<!-- <el-drawer v-model="fieldModelVisible" title="字段配置" :size="`${width}px`" append-to-body destroy-on-close>-->
|
||||
<!-- <el-form :model="formFieldForm" label-width="90px" size="small" @submit.native.prevent>-->
|
||||
<!-- <el-form-item label="字段ID">-->
|
||||
<!-- <el-input v-model="formFieldForm.id" clearable />-->
|
||||
<!-- </el-form-item>-->
|
||||
@ -78,17 +78,17 @@
|
||||
<!-- <el-divider key="enum-divider" />-->
|
||||
<!-- <p class="listener-filed__title" key="enum-title">-->
|
||||
<!-- <span><i class="el-icon-menu"></i>枚举值列表：</span>-->
|
||||
<!-- <el-button size="mini" type="primary" @click="openFieldOptionForm(null, -1, 'enum')">添加枚举值</el-button>-->
|
||||
<!-- <el-button size="small" type="primary" @click="openFieldOptionForm(null, -1, 'enum')">添加枚举值</el-button>-->
|
||||
<!-- </p>-->
|
||||
<!-- <el-table :data="fieldEnumList" size="mini" key="enum-table" max-height="240" border fit>-->
|
||||
<!-- <el-table :data="fieldEnumList" size="small" key="enum-table" max-height="240" border fit>-->
|
||||
<!-- <el-table-column label="序号" width="50px" type="index" />-->
|
||||
<!-- <el-table-column label="枚举值编号" prop="id" min-width="100px" show-overflow-tooltip />-->
|
||||
<!-- <el-table-column label="枚举值名称" prop="name" min-width="100px" show-overflow-tooltip />-->
|
||||
<!-- <el-table-column label="操作" width="90px">-->
|
||||
<!-- <template slot-scope="{ row, $index }">-->
|
||||
<!-- <el-button size="mini" type="text" @click="openFieldOptionForm(row, $index, 'enum')">编辑</el-button>-->
|
||||
<!-- <el-button size="small" type="text" @click="openFieldOptionForm(row, $index, 'enum')">编辑</el-button>-->
|
||||
<!-- <el-divider direction="vertical" />-->
|
||||
<!-- <el-button size="mini" type="text" style="color: #ff4d4f" @click="removeFieldOptionItem(row, $index, 'enum')">移除</el-button>-->
|
||||
<!-- <el-button size="small" type="text" style="color: #ff4d4f" @click="removeFieldOptionItem(row, $index, 'enum')">移除</el-button>-->
|
||||
<!-- </template>-->
|
||||
<!-- </el-table-column>-->
|
||||
<!-- </el-table>-->
|
||||
@ -98,17 +98,17 @@
|
||||
<!-- <el-divider key="validation-divider" />-->
|
||||
<!-- <p class="listener-filed__title" key="validation-title">-->
|
||||
<!-- <span><i class="el-icon-menu"></i>约束条件列表：</span>-->
|
||||
<!-- <el-button size="mini" type="primary" @click="openFieldOptionForm(null, -1, 'constraint')">添加约束</el-button>-->
|
||||
<!-- <el-button size="small" type="primary" @click="openFieldOptionForm(null, -1, 'constraint')">添加约束</el-button>-->
|
||||
<!-- </p>-->
|
||||
<!-- <el-table :data="fieldConstraintsList" size="mini" key="validation-table" max-height="240" border fit>-->
|
||||
<!-- <el-table :data="fieldConstraintsList" size="small" key="validation-table" 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="config" min-width="100px" show-overflow-tooltip />-->
|
||||
<!-- <el-table-column label="操作" width="90px">-->
|
||||
<!-- <template slot-scope="{ row, $index }">-->
|
||||
<!-- <el-button size="mini" type="text" @click="openFieldOptionForm(row, $index, 'constraint')">编辑</el-button>-->
|
||||
<!-- <el-button size="small" type="text" @click="openFieldOptionForm(row, $index, 'constraint')">编辑</el-button>-->
|
||||
<!-- <el-divider direction="vertical" />-->
|
||||
<!-- <el-button size="mini" type="text" style="color: #ff4d4f" @click="removeFieldOptionItem(row, $index, 'constraint')">移除</el-button>-->
|
||||
<!-- <el-button size="small" type="text" style="color: #ff4d4f" @click="removeFieldOptionItem(row, $index, 'constraint')">移除</el-button>-->
|
||||
<!-- </template>-->
|
||||
<!-- </el-table-column>-->
|
||||
<!-- </el-table>-->
|
||||
@ -117,30 +117,30 @@
|
||||
<!-- <el-divider key="property-divider" />-->
|
||||
<!-- <p class="listener-filed__title" key="property-title">-->
|
||||
<!-- <span><i class="el-icon-menu"></i>字段属性列表：</span>-->
|
||||
<!-- <el-button size="mini" type="primary" @click="openFieldOptionForm(null, -1, 'property')">添加属性</el-button>-->
|
||||
<!-- <el-button size="small" type="primary" @click="openFieldOptionForm(null, -1, 'property')">添加属性</el-button>-->
|
||||
<!-- </p>-->
|
||||
<!-- <el-table :data="fieldPropertiesList" size="mini" key="property-table" max-height="240" border fit>-->
|
||||
<!-- <el-table :data="fieldPropertiesList" size="small" key="property-table" max-height="240" border fit>-->
|
||||
<!-- <el-table-column label="序号" width="50px" type="index" />-->
|
||||
<!-- <el-table-column label="属性编号" prop="id" 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="openFieldOptionForm(row, $index, 'property')">编辑</el-button>-->
|
||||
<!-- <el-button size="small" type="text" @click="openFieldOptionForm(row, $index, 'property')">编辑</el-button>-->
|
||||
<!-- <el-divider direction="vertical" />-->
|
||||
<!-- <el-button size="mini" type="text" style="color: #ff4d4f" @click="removeFieldOptionItem(row, $index, 'property')">移除</el-button>-->
|
||||
<!-- <el-button size="small" type="text" style="color: #ff4d4f" @click="removeFieldOptionItem(row, $index, 'property')">移除</el-button>-->
|
||||
<!-- </template>-->
|
||||
<!-- </el-table-column>-->
|
||||
<!-- </el-table>-->
|
||||
|
||||
<!-- <!– 底部按钮 –>-->
|
||||
<!-- <div class="element-drawer__button">-->
|
||||
<!-- <el-button size="mini">取 消</el-button>-->
|
||||
<!-- <el-button size="mini" type="primary" @click="saveField">保 存</el-button>-->
|
||||
<!-- <el-button size="small">取 消</el-button>-->
|
||||
<!-- <el-button size="small" type="primary" @click="saveField">保 存</el-button>-->
|
||||
<!-- </div>-->
|
||||
<!-- </el-drawer>-->
|
||||
|
||||
<el-dialog
|
||||
:visible.sync="fieldOptionModelVisible"
|
||||
v-model="fieldOptionModelVisible"
|
||||
:title="optionModelTitle"
|
||||
width="600px"
|
||||
append-to-body
|
||||
@ -148,7 +148,7 @@
|
||||
>
|
||||
<el-form
|
||||
:model="fieldOptionForm"
|
||||
size="mini"
|
||||
size="small"
|
||||
label-width="96px"
|
||||
@submit.native.prevent
|
||||
>
|
||||
@ -182,10 +182,10 @@
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<template slot="footer">
|
||||
<el-button size="mini" @click="fieldOptionModelVisible = false"
|
||||
<el-button size="small" @click="fieldOptionModelVisible = false"
|
||||
>取 消</el-button
|
||||
>
|
||||
<el-button size="mini" type="primary" @click="saveFieldOption"
|
||||
<el-button size="small" type="primary" @click="saveFieldOption"
|
||||
>确 定</el-button
|
||||
>
|
||||
</template>
|
||||
|
||||
@ -1,33 +1,80 @@
|
||||
<template>
|
||||
<div class="panel-tab__content">
|
||||
<el-table :data="elementListenersList" size="mini" border>
|
||||
<el-table :data="elementListenersList" size="small" border>
|
||||
<el-table-column label="序号" width="50px" type="index" />
|
||||
<el-table-column label="事件类型" min-width="100px" prop="event" />
|
||||
<el-table-column label="监听器类型" min-width="100px" show-overflow-tooltip :formatter="row => listenerTypeObject[row.listenerType]" />
|
||||
<el-table-column
|
||||
label="监听器类型"
|
||||
min-width="100px"
|
||||
show-overflow-tooltip
|
||||
:formatter="(row) => listenerTypeObject[row.listenerType]"
|
||||
/>
|
||||
<el-table-column label="操作" width="90px">
|
||||
<template slot-scope="{ row, $index }">
|
||||
<el-button size="mini" type="text" @click="openListenerForm(row, $index)">编辑</el-button>
|
||||
<el-button
|
||||
size="small"
|
||||
type="text"
|
||||
@click="openListenerForm(row, $index)"
|
||||
>编辑</el-button
|
||||
>
|
||||
<el-divider direction="vertical" />
|
||||
<el-button size="mini" type="text" style="color: #ff4d4f" @click="removeListener(row, $index)">移除</el-button>
|
||||
<el-button
|
||||
size="small"
|
||||
type="text"
|
||||
style="color: #ff4d4f"
|
||||
@click="removeListener(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="openListenerForm(null)">添加监听器</el-button>
|
||||
<el-button
|
||||
size="small"
|
||||
type="primary"
|
||||
icon="el-icon-plus"
|
||||
@click="openListenerForm(null)"
|
||||
>添加监听器</el-button
|
||||
>
|
||||
</div>
|
||||
|
||||
<!-- 监听器 编辑/创建 部分 -->
|
||||
<el-drawer :visible.sync="listenerFormModelVisible" title="执行监听器" :size="`${width}px`" append-to-body destroy-on-close>
|
||||
<el-form size="mini" :model="listenerForm" label-width="96px" ref="listenerFormRef" @submit.native.prevent>
|
||||
<el-form-item label="事件类型" prop="event" :rules="{ required: true, trigger: ['blur', 'change'] }">
|
||||
<el-drawer
|
||||
v-model="listenerFormModelVisible"
|
||||
title="执行监听器"
|
||||
:size="`${width}px`"
|
||||
append-to-body
|
||||
destroy-on-close
|
||||
>
|
||||
<el-form
|
||||
size="small"
|
||||
:model="listenerForm"
|
||||
label-width="96px"
|
||||
ref="listenerFormRef"
|
||||
@submit.native.prevent
|
||||
>
|
||||
<el-form-item
|
||||
label="事件类型"
|
||||
prop="event"
|
||||
:rules="{ required: true, trigger: ['blur', 'change'] }"
|
||||
>
|
||||
<el-select v-model="listenerForm.event">
|
||||
<el-option label="start" value="start" />
|
||||
<el-option label="end" value="end" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="监听器类型" prop="listenerType" :rules="{ required: true, trigger: ['blur', 'change'] }">
|
||||
<el-form-item
|
||||
label="监听器类型"
|
||||
prop="listenerType"
|
||||
:rules="{ required: true, trigger: ['blur', 'change'] }"
|
||||
>
|
||||
<el-select v-model="listenerForm.listenerType">
|
||||
<el-option v-for="i in Object.keys(listenerTypeObject)" :key="i" :label="listenerTypeObject[i]" :value="i" />
|
||||
<el-option
|
||||
v-for="i in Object.keys(listenerTypeObject)"
|
||||
:key="i"
|
||||
:label="listenerTypeObject[i]"
|
||||
:value="i"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
@ -62,7 +109,11 @@
|
||||
label="脚本格式"
|
||||
prop="scriptFormat"
|
||||
key="listener-script-format"
|
||||
:rules="{ required: true, trigger: ['blur', 'change'], message: '请填写脚本格式' }"
|
||||
:rules="{
|
||||
required: true,
|
||||
trigger: ['blur', 'change'],
|
||||
message: '请填写脚本格式',
|
||||
}"
|
||||
>
|
||||
<el-input v-model="listenerForm.scriptFormat" clearable />
|
||||
</el-form-item>
|
||||
@ -70,7 +121,11 @@
|
||||
label="脚本类型"
|
||||
prop="scriptType"
|
||||
key="listener-script-type"
|
||||
:rules="{ required: true, trigger: ['blur', 'change'], message: '请选择脚本类型' }"
|
||||
:rules="{
|
||||
required: true,
|
||||
trigger: ['blur', 'change'],
|
||||
message: '请选择脚本类型',
|
||||
}"
|
||||
>
|
||||
<el-select v-model="listenerForm.scriptType">
|
||||
<el-option label="内联脚本" value="inlineScript" />
|
||||
@ -82,7 +137,11 @@
|
||||
label="脚本内容"
|
||||
prop="value"
|
||||
key="listener-script"
|
||||
:rules="{ required: true, trigger: ['blur', 'change'], message: '请填写脚本内容' }"
|
||||
:rules="{
|
||||
required: true,
|
||||
trigger: ['blur', 'change'],
|
||||
message: '请填写脚本内容',
|
||||
}"
|
||||
>
|
||||
<el-input v-model="listenerForm.value" clearable />
|
||||
</el-form-item>
|
||||
@ -91,7 +150,11 @@
|
||||
label="资源地址"
|
||||
prop="resource"
|
||||
key="listener-resource"
|
||||
:rules="{ required: true, trigger: ['blur', 'change'], message: '请填写资源地址' }"
|
||||
:rules="{
|
||||
required: true,
|
||||
trigger: ['blur', 'change'],
|
||||
message: '请填写资源地址',
|
||||
}"
|
||||
>
|
||||
<el-input v-model="listenerForm.resource" clearable />
|
||||
</el-form-item>
|
||||
@ -100,37 +163,100 @@
|
||||
<el-divider />
|
||||
<p class="listener-filed__title">
|
||||
<span><i class="el-icon-menu"></i>注入字段：</span>
|
||||
<el-button size="mini" type="primary" @click="openListenerFieldForm(null)">添加字段</el-button>
|
||||
<el-button
|
||||
size="small"
|
||||
type="primary"
|
||||
@click="openListenerFieldForm(null)"
|
||||
>添加字段</el-button
|
||||
>
|
||||
</p>
|
||||
<el-table :data="fieldsListOfListener" size="mini" max-height="240" border fit style="flex: none">
|
||||
<el-table
|
||||
:data="fieldsListOfListener"
|
||||
size="small"
|
||||
max-height="240"
|
||||
border
|
||||
fit
|
||||
style="flex: none"
|
||||
>
|
||||
<el-table-column label="序号" width="50px" type="index" />
|
||||
<el-table-column label="字段名称" min-width="100px" prop="name" />
|
||||
<el-table-column label="字段类型" min-width="80px" show-overflow-tooltip :formatter="row => fieldTypeObject[row.fieldType]" />
|
||||
<el-table-column label="字段值/表达式" min-width="100px" show-overflow-tooltip :formatter="row => row.string || row.expression" />
|
||||
<el-table-column
|
||||
label="字段类型"
|
||||
min-width="80px"
|
||||
show-overflow-tooltip
|
||||
:formatter="(row) => fieldTypeObject[row.fieldType]"
|
||||
/>
|
||||
<el-table-column
|
||||
label="字段值/表达式"
|
||||
min-width="100px"
|
||||
show-overflow-tooltip
|
||||
:formatter="(row) => row.string || row.expression"
|
||||
/>
|
||||
<el-table-column label="操作" width="100px">
|
||||
<template slot-scope="{ row, $index }">
|
||||
<el-button size="mini" type="text" @click="openListenerFieldForm(row, $index)">编辑</el-button>
|
||||
<el-button
|
||||
size="small"
|
||||
type="text"
|
||||
@click="openListenerFieldForm(row, $index)"
|
||||
>编辑</el-button
|
||||
>
|
||||
<el-divider direction="vertical" />
|
||||
<el-button size="mini" type="text" style="color: #ff4d4f" @click="removeListenerField(row, $index)">移除</el-button>
|
||||
<el-button
|
||||
size="small"
|
||||
type="text"
|
||||
style="color: #ff4d4f"
|
||||
@click="removeListenerField(row, $index)"
|
||||
>移除</el-button
|
||||
>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<div class="element-drawer__button">
|
||||
<el-button size="mini" @click="listenerFormModelVisible = false">取 消</el-button>
|
||||
<el-button size="mini" type="primary" @click="saveListenerConfig">保 存</el-button>
|
||||
<el-button size="small" @click="listenerFormModelVisible = false"
|
||||
>取 消</el-button
|
||||
>
|
||||
<el-button size="small" type="primary" @click="saveListenerConfig"
|
||||
>保 存</el-button
|
||||
>
|
||||
</div>
|
||||
</el-drawer>
|
||||
|
||||
<!-- 注入西段 编辑/创建 部分 -->
|
||||
<el-dialog title="字段配置" :visible.sync="listenerFieldFormModelVisible" width="600px" append-to-body destroy-on-close>
|
||||
<el-form :model="listenerFieldForm" size="mini" label-width="96px" ref="listenerFieldFormRef" style="height: 136px" @submit.native.prevent>
|
||||
<el-form-item label="字段名称：" prop="name" :rules="{ required: true, trigger: ['blur', 'change'] }">
|
||||
<el-dialog
|
||||
title="字段配置"
|
||||
v-model="listenerFieldFormModelVisible"
|
||||
width="600px"
|
||||
append-to-body
|
||||
destroy-on-close
|
||||
>
|
||||
<el-form
|
||||
:model="listenerFieldForm"
|
||||
size="small"
|
||||
label-width="96px"
|
||||
ref="listenerFieldFormRef"
|
||||
style="height: 136px"
|
||||
@submit.native.prevent
|
||||
>
|
||||
<el-form-item
|
||||
label="字段名称："
|
||||
prop="name"
|
||||
:rules="{ required: true, trigger: ['blur', 'change'] }"
|
||||
>
|
||||
<el-input v-model="listenerFieldForm.name" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item label="字段类型：" prop="fieldType" :rules="{ required: true, trigger: ['blur', 'change'] }">
|
||||
<el-form-item
|
||||
label="字段类型："
|
||||
prop="fieldType"
|
||||
:rules="{ required: true, trigger: ['blur', 'change'] }"
|
||||
>
|
||||
<el-select v-model="listenerFieldForm.fieldType">
|
||||
<el-option v-for="i in Object.keys(fieldTypeObject)" :key="i" :label="fieldTypeObject[i]" :value="i" />
|
||||
<el-option
|
||||
v-for="i in Object.keys(fieldTypeObject)"
|
||||
:key="i"
|
||||
:label="fieldTypeObject[i]"
|
||||
:value="i"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
@ -153,144 +279,183 @@
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<template slot="footer">
|
||||
<el-button size="mini" @click="listenerFieldFormModelVisible = false">取 消</el-button>
|
||||
<el-button size="mini" type="primary" @click="saveListenerFiled">确 定</el-button>
|
||||
<el-button size="small" @click="listenerFieldFormModelVisible = false"
|
||||
>取 消</el-button
|
||||
>
|
||||
<el-button size="small" type="primary" @click="saveListenerFiled"
|
||||
>确 定</el-button
|
||||
>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { createListenerObject, updateElementExtensions } from "../../utils";
|
||||
import { initListenerType, initListenerForm, listenerType, fieldType } from "./utilSelf";
|
||||
|
||||
export default {
|
||||
name: "ElementListeners",
|
||||
props: {
|
||||
<script setup name="ElementListeners">
|
||||
import { ElMessageBox } from "element-plus";
|
||||
import { toRefs } from "vue";
|
||||
import { createListenerObject, updateElementExtensions } from "../../utils";
|
||||
import {
|
||||
initListenerType,
|
||||
initListenerForm,
|
||||
listenerType,
|
||||
fieldType,
|
||||
} from "./utilSelf";
|
||||
const props = defineProps({
|
||||
id: String,
|
||||
type: String
|
||||
},
|
||||
inject: {
|
||||
prefix: "prefix",
|
||||
width: "width"
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
elementListenersList: [], // 监听器列表
|
||||
type: String,
|
||||
});
|
||||
const { id, type } = toRefs(props);
|
||||
const data = reactive({
|
||||
listenerForm: {}, // 监听器详情表单
|
||||
listenerFormModelVisible: false, // 监听器 编辑 侧边栏显示状态
|
||||
fieldsListOfListener: [],
|
||||
listenerFieldForm: {}, // 监听器 注入字段 详情表单
|
||||
listenerFieldFormModelVisible: false, // 监听器 注入字段表单弹窗 显示状态
|
||||
editingListenerIndex: -1, // 监听器所在下标，-1 为新增
|
||||
editingListenerFieldIndex: -1, // 字段所在下标，-1 为新增
|
||||
listenerTypeObject: listenerType,
|
||||
fieldTypeObject: fieldType
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
id: {
|
||||
immediate: true,
|
||||
handler(val) {
|
||||
val && val.length && this.$nextTick(() => this.resetListenersList());
|
||||
});
|
||||
let bpmnElement;
|
||||
let otherExtensionList;
|
||||
let bpmnElementListeners;
|
||||
const { listenerForm, listenerFieldForm } = toRefs(data);
|
||||
const listenerFormRef = ref();
|
||||
const listenerFieldFormRef = ref();
|
||||
const elementListenersList = ref([]); // 监听器列表
|
||||
// const listenerForm = ref({});
|
||||
const listenerFormModelVisible = ref(false); // 监听器 编辑 侧边栏显示状态
|
||||
const fieldsListOfListener = ref([]);
|
||||
// const listenerFieldForm = ref({});
|
||||
const listenerFieldFormModelVisible = ref(false); // 监听器 注入字段表单弹窗 显示状态
|
||||
const editingListenerIndex = ref(-1); // 监听器所在下标，-1 为新增
|
||||
const editingListenerFieldIndex = ref(-1); // 字段所在下标，-1 为新增
|
||||
const listenerTypeObject = ref(listenerType);
|
||||
const fieldTypeObject = ref(fieldType);
|
||||
const prefix = inject("prefix");
|
||||
const width = inject("width");
|
||||
watch(id, (val) => {
|
||||
val && val.length && nextTick(() => resetListenersList());
|
||||
});
|
||||
|
||||
function resetListenersList() {
|
||||
bpmnElement = window.bpmnInstances.bpmnElement;
|
||||
otherExtensionList = [];
|
||||
bpmnElementListeners =
|
||||
bpmnElement.businessObject?.extensionElements?.values?.filter(
|
||||
(ex) => ex.$type === `${prefix.value}:ExecutionListener`
|
||||
) ?? [];
|
||||
elementListenersList.value = bpmnElementListeners.map((listener) =>
|
||||
initListenerType(listener)
|
||||
);
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
resetListenersList() {
|
||||
this.bpmnElement = window.bpmnInstances.bpmnElement;
|
||||
this.otherExtensionList = [];
|
||||
this.bpmnElementListeners =
|
||||
this.bpmnElement.businessObject?.extensionElements?.values?.filter(ex => ex.$type === `${this.prefix}:ExecutionListener`) ?? [];
|
||||
this.elementListenersList = this.bpmnElementListeners.map(listener => initListenerType(listener));
|
||||
},
|
||||
// 打开 监听器详情 侧边栏
|
||||
openListenerForm(listener, index) {
|
||||
function openListenerForm(listener, index) {
|
||||
if (listener) {
|
||||
this.listenerForm = initListenerForm(listener);
|
||||
this.editingListenerIndex = index;
|
||||
listenerForm.value = initListenerForm(listener);
|
||||
editingListenerIndex.value = index;
|
||||
} else {
|
||||
this.listenerForm = {};
|
||||
this.editingListenerIndex = -1; // 标记为新增
|
||||
listenerForm.value = {};
|
||||
editingListenerIndex.value = -1; // 标记为新增
|
||||
}
|
||||
if (listener && listener.fields) {
|
||||
this.fieldsListOfListener = listener.fields.map(field => ({ ...field, fieldType: field.string ? "string" : "expression" }));
|
||||
fieldsListOfListener.value = listener.fields.map((field) => ({
|
||||
...field,
|
||||
fieldType: field.string ? "string" : "expression",
|
||||
}));
|
||||
} else {
|
||||
this.fieldsListOfListener = [];
|
||||
this.$set(this.listenerForm, "fields", []);
|
||||
fieldsListOfListener.value = [];
|
||||
listenerForm.value.fields = [];
|
||||
}
|
||||
// 打开侧边栏并清楚验证状态
|
||||
this.listenerFormModelVisible = true;
|
||||
this.$nextTick(() => {
|
||||
if (this.$refs["listenerFormRef"]) this.$refs["listenerFormRef"].clearValidate();
|
||||
listenerFormModelVisible.value = true;
|
||||
nextTick(() => {
|
||||
if (listenerFormRef.value) listenerFormRef.value.clearValidate();
|
||||
});
|
||||
},
|
||||
// 打开监听器字段编辑弹窗
|
||||
openListenerFieldForm(field, index) {
|
||||
this.listenerFieldForm = field ? JSON.parse(JSON.stringify(field)) : {};
|
||||
this.editingListenerFieldIndex = field ? index : -1;
|
||||
this.listenerFieldFormModelVisible = true;
|
||||
this.$nextTick(() => {
|
||||
if (this.$refs["listenerFieldFormRef"]) this.$refs["listenerFieldFormRef"].clearValidate();
|
||||
});
|
||||
},
|
||||
// 保存监听器注入字段
|
||||
async saveListenerFiled() {
|
||||
let validateStatus = await this.$refs["listenerFieldFormRef"].validate();
|
||||
if (!validateStatus) return; // 验证不通过直接返回
|
||||
if (this.editingListenerFieldIndex === -1) {
|
||||
this.fieldsListOfListener.push(this.listenerFieldForm);
|
||||
this.listenerForm.fields.push(this.listenerFieldForm);
|
||||
} else {
|
||||
this.fieldsListOfListener.splice(this.editingListenerFieldIndex, 1, this.listenerFieldForm);
|
||||
this.listenerForm.fields.splice(this.editingListenerFieldIndex, 1, this.listenerFieldForm);
|
||||
}
|
||||
this.listenerFieldFormModelVisible = false;
|
||||
this.$nextTick(() => (this.listenerFieldForm = {}));
|
||||
},
|
||||
// 移除监听器字段
|
||||
removeListenerField(field, index) {
|
||||
this.$confirm("确认移除该字段吗？", "提示", {
|
||||
confirmButtonText: "确 认",
|
||||
cancelButtonText: "取 消"
|
||||
})
|
||||
.then(() => {
|
||||
this.fieldsListOfListener.splice(index, 1);
|
||||
this.listenerForm.fields.splice(index, 1);
|
||||
})
|
||||
.catch(() => console.info("操作取消"));
|
||||
},
|
||||
// 移除监听器
|
||||
removeListener(listener, index) {
|
||||
this.$confirm("确认移除该监听器吗？", "提示", {
|
||||
confirmButtonText: "确 认",
|
||||
cancelButtonText: "取 消"
|
||||
})
|
||||
.then(() => {
|
||||
this.bpmnElementListeners.splice(index, 1);
|
||||
this.elementListenersList.splice(index, 1);
|
||||
updateElementExtensions(this.bpmnElement, this.otherExtensionList.concat(this.bpmnElementListeners));
|
||||
})
|
||||
.catch(() => console.info("操作取消"));
|
||||
},
|
||||
// 保存监听器配置
|
||||
async saveListenerConfig() {
|
||||
let validateStatus = await this.$refs["listenerFormRef"].validate();
|
||||
// 打开监听器字段编辑弹窗
|
||||
function openListenerFieldForm(field, index) {
|
||||
listenerFieldForm.value = field ? JSON.parse(JSON.stringify(field)) : {};
|
||||
editingListenerFieldIndex.value = field ? index : -1;
|
||||
listenerFieldFormModelVisible.value = true;
|
||||
nextTick(() => {
|
||||
if (listenerFieldFormRef.value) listenerFieldFormRef.value.clearValidate();
|
||||
});
|
||||
}
|
||||
// 保存监听器注入字段
|
||||
async function saveListenerFiled() {
|
||||
let validateStatus = await listenerFieldFormRef.value.validate();
|
||||
if (!validateStatus) return; // 验证不通过直接返回
|
||||
const listenerObject = createListenerObject(this.listenerForm, false, this.prefix);
|
||||
if (this.editingListenerIndex === -1) {
|
||||
this.bpmnElementListeners.push(listenerObject);
|
||||
this.elementListenersList.push(this.listenerForm);
|
||||
if (editingListenerFieldIndex.value === -1) {
|
||||
fieldsListOfListener.value.push(listenerFieldForm.value);
|
||||
listenerForm.value.fields.push(listenerFieldForm.value);
|
||||
} else {
|
||||
this.bpmnElementListeners.splice(this.editingListenerIndex, 1, listenerObject);
|
||||
this.elementListenersList.splice(this.editingListenerIndex, 1, this.listenerForm);
|
||||
fieldsListOfListener.value.splice(
|
||||
editingListenerFieldIndex.value,
|
||||
1,
|
||||
listenerFieldForm.value
|
||||
);
|
||||
listenerForm.value.fields.splice(
|
||||
editingListenerFieldIndex.value,
|
||||
1,
|
||||
listenerFieldForm.value
|
||||
);
|
||||
}
|
||||
listenerFieldFormModelVisible.value = false;
|
||||
nextTick(() => (listenerFieldForm.value = {}));
|
||||
}
|
||||
// 移除监听器字段
|
||||
function removeListenerField(field, index) {
|
||||
ElMessageBox.confirm("确认移除该字段吗？", "提示", {
|
||||
confirmButtonText: "确 认",
|
||||
cancelButtonText: "取 消",
|
||||
})
|
||||
.then(() => {
|
||||
fieldsListOfListener.value.splice(index, 1);
|
||||
listenerForm.value.fields.splice(index, 1);
|
||||
})
|
||||
.catch(() => console.info("操作取消"));
|
||||
}
|
||||
// 移除监听器
|
||||
function removeListener(listener, index) {
|
||||
ElMessageBox.confirm("确认移除该监听器吗？", "提示", {
|
||||
confirmButtonText: "确 认",
|
||||
cancelButtonText: "取 消",
|
||||
})
|
||||
.then(() => {
|
||||
bpmnElementListeners.splice(index, 1);
|
||||
elementListenersList.value.splice(index, 1);
|
||||
updateElementExtensions(
|
||||
bpmnElement,
|
||||
otherExtensionList.concat(bpmnElementListeners)
|
||||
);
|
||||
})
|
||||
.catch(() => console.info("操作取消"));
|
||||
}
|
||||
// 保存监听器配置
|
||||
async function saveListenerConfig() {
|
||||
let validateStatus = await listenerFormRef.value.validate();
|
||||
if (!validateStatus) return; // 验证不通过直接返回
|
||||
const listenerObject = createListenerObject(
|
||||
listenerForm.value,
|
||||
false,
|
||||
prefix.value
|
||||
);
|
||||
if (editingListenerIndex.value === -1) {
|
||||
bpmnElementListeners.push(listenerObject);
|
||||
elementListenersList.value.push(listenerForm.value);
|
||||
} else {
|
||||
bpmnElementListeners.splice(editingListenerIndex.value, 1, listenerObject);
|
||||
elementListenersList.value.splice(
|
||||
editingListenerIndex.value,
|
||||
1,
|
||||
listenerForm.value
|
||||
);
|
||||
}
|
||||
// 保存其他配置
|
||||
this.otherExtensionList = this.bpmnElement.businessObject?.extensionElements?.values?.filter(ex => ex.$type !== `${this.prefix}:ExecutionListener`) ?? [];
|
||||
updateElementExtensions(this.bpmnElement, this.otherExtensionList.concat(this.bpmnElementListeners));
|
||||
otherExtensionList =
|
||||
bpmnElement.businessObject?.extensionElements?.values?.filter(
|
||||
(ex) => ex.$type !== `${prefix.value}:ExecutionListener`
|
||||
) ?? [];
|
||||
updateElementExtensions(
|
||||
bpmnElement,
|
||||
otherExtensionList.concat(bpmnElementListeners)
|
||||
);
|
||||
// 4. 隐藏侧边栏
|
||||
this.listenerFormModelVisible = false;
|
||||
this.listenerForm = {};
|
||||
listenerFormModelVisible.value = false;
|
||||
listenerForm.value = {};
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
@ -1,25 +1,25 @@
|
||||
<template>
|
||||
<div class="panel-tab__content">
|
||||
<el-table :data="elementListenersList" size="mini" border>
|
||||
<el-table :data="elementListenersList" size="small" border>
|
||||
<el-table-column label="序号" width="50px" type="index" />
|
||||
<el-table-column label="事件类型" min-width="80px" show-overflow-tooltip :formatter="row => listenerEventTypeObject[row.event]" />
|
||||
<el-table-column label="事件id" min-width="80px" prop="id" show-overflow-tooltip />
|
||||
<el-table-column label="监听器类型" min-width="80px" show-overflow-tooltip :formatter="row => listenerTypeObject[row.listenerType]" />
|
||||
<el-table-column label="操作" width="90px">
|
||||
<template slot-scope="{ row, $index }">
|
||||
<el-button size="mini" type="text" @click="openListenerForm(row, $index)">编辑</el-button>
|
||||
<el-button size="small" type="text" @click="openListenerForm(row, $index)">编辑</el-button>
|
||||
<el-divider direction="vertical" />
|
||||
<el-button size="mini" type="text" style="color: #ff4d4f" @click="removeListener(row, $index)">移除</el-button>
|
||||
<el-button size="small" type="text" style="color: #ff4d4f" @click="removeListener(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="openListenerForm(null)">添加监听器</el-button>
|
||||
<el-button size="small" type="primary" icon="el-icon-plus" @click="openListenerForm(null)">添加监听器</el-button>
|
||||
</div>
|
||||
|
||||
<!-- 监听器 编辑/创建 部分 -->
|
||||
<el-drawer :visible.sync="listenerFormModelVisible" title="任务监听器" :size="`${width}px`" append-to-body destroy-on-close>
|
||||
<el-form size="mini" :model="listenerForm" label-width="96px" ref="listenerFormRef" @submit.native.prevent>
|
||||
<el-drawer v-model="listenerFormModelVisible" title="任务监听器" :size="`${width}px`" append-to-body destroy-on-close>
|
||||
<el-form size="small" :model="listenerForm" label-width="96px" ref="listenerFormRef" @submit.native.prevent>
|
||||
<el-form-item label="事件类型" prop="event" :rules="{ required: true, trigger: ['blur', 'change'] }">
|
||||
<el-select v-model="listenerForm.event">
|
||||
<el-option v-for="i in Object.keys(listenerEventTypeObject)" :key="i" :label="listenerEventTypeObject[i]" :value="i" />
|
||||
@ -124,31 +124,31 @@
|
||||
<el-divider />
|
||||
<p class="listener-filed__title">
|
||||
<span><i class="el-icon-menu"></i>注入字段：</span>
|
||||
<el-button size="mini" type="primary" @click="openListenerFieldForm(null)">添加字段</el-button>
|
||||
<el-button size="small" type="primary" @click="openListenerFieldForm(null)">添加字段</el-button>
|
||||
</p>
|
||||
<el-table :data="fieldsListOfListener" size="mini" max-height="240" border fit style="flex: none">
|
||||
<el-table :data="fieldsListOfListener" size="small" max-height="240" border fit style="flex: none">
|
||||
<el-table-column label="序号" width="50px" type="index" />
|
||||
<el-table-column label="字段名称" min-width="100px" prop="name" />
|
||||
<el-table-column label="字段类型" min-width="80px" show-overflow-tooltip :formatter="row => fieldTypeObject[row.fieldType]" />
|
||||
<el-table-column label="字段值/表达式" min-width="100px" show-overflow-tooltip :formatter="row => row.string || row.expression" />
|
||||
<el-table-column label="操作" width="100px">
|
||||
<template slot-scope="{ row, $index }">
|
||||
<el-button size="mini" type="text" @click="openListenerFieldForm(row, $index)">编辑</el-button>
|
||||
<el-button size="small" type="text" @click="openListenerFieldForm(row, $index)">编辑</el-button>
|
||||
<el-divider direction="vertical" />
|
||||
<el-button size="mini" type="text" style="color: #ff4d4f" @click="removeListenerField(row, $index)">移除</el-button>
|
||||
<el-button size="small" type="text" style="color: #ff4d4f" @click="removeListenerField(row, $index)">移除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<div class="element-drawer__button">
|
||||
<el-button size="mini" @click="listenerFormModelVisible = false">取 消</el-button>
|
||||
<el-button size="mini" type="primary" @click="saveListenerConfig">保 存</el-button>
|
||||
<el-button size="small" @click="listenerFormModelVisible = false">取 消</el-button>
|
||||
<el-button size="small" type="primary" @click="saveListenerConfig">保 存</el-button>
|
||||
</div>
|
||||
</el-drawer>
|
||||
|
||||
<!-- 注入西段 编辑/创建 部分 -->
|
||||
<el-dialog title="字段配置" :visible.sync="listenerFieldFormModelVisible" width="600px" append-to-body destroy-on-close>
|
||||
<el-form :model="listenerFieldForm" size="mini" label-width="96px" ref="listenerFieldFormRef" style="height: 136px" @submit.native.prevent>
|
||||
<el-dialog title="字段配置" v-model="listenerFieldFormModelVisible" width="600px" append-to-body destroy-on-close>
|
||||
<el-form :model="listenerFieldForm" size="small" label-width="96px" ref="listenerFieldFormRef" style="height: 136px" @submit.native.prevent>
|
||||
<el-form-item label="字段名称：" prop="name" :rules="{ required: true, trigger: ['blur', 'change'] }">
|
||||
<el-input v-model="listenerFieldForm.name" clearable />
|
||||
</el-form-item>
|
||||
@ -177,8 +177,8 @@
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<template slot="footer">
|
||||
<el-button size="mini" @click="listenerFieldFormModelVisible = false">取 消</el-button>
|
||||
<el-button size="mini" type="primary" @click="saveListenerFiled">确 定</el-button>
|
||||
<el-button size="small" @click="listenerFieldFormModelVisible = false">取 消</el-button>
|
||||
<el-button size="small" type="primary" @click="saveListenerFiled">确 定</el-button>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</div>
|
||||
|
||||
@ -1,25 +1,25 @@
|
||||
export const template = isTaskListener => {
|
||||
return `
|
||||
<div class="panel-tab__content">
|
||||
<el-table :data="elementListenersList" size="mini" border>
|
||||
<el-table :data="elementListenersList" size="small" border>
|
||||
<el-table-column label="序号" width="50px" type="index" />
|
||||
<el-table-column label="事件类型" min-width="100px" prop="event" />
|
||||
<el-table-column label="监听器类型" min-width="100px" show-overflow-tooltip :formatter="row => listenerTypeObject[row.listenerType]" />
|
||||
<el-table-column label="操作" width="90px">
|
||||
<template slot-scope="{ row, $index }">
|
||||
<el-button size="mini" type="text" @click="openListenerForm(row, $index)">编辑</el-button>
|
||||
<el-button size="small" type="text" @click="openListenerForm(row, $index)">编辑</el-button>
|
||||
<el-divider direction="vertical" />
|
||||
<el-button size="mini" type="text" style="color: #ff4d4f" @click="removeListener(row, $index)">移除</el-button>
|
||||
<el-button size="small" type="text" style="color: #ff4d4f" @click="removeListener(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="openListenerForm(null)">添加监听器</el-button>
|
||||
<el-button size="small" type="primary" icon="el-icon-plus" @click="openListenerForm(null)">添加监听器</el-button>
|
||||
</div>
|
||||
|
||||
<!-- 监听器 编辑/创建 部分 -->
|
||||
<el-drawer :visible.sync="listenerFormModelVisible" title="执行监听器" :size="width + 'px'" append-to-body destroy-on-close>
|
||||
<el-form size="mini" :model="listenerForm" label-width="96px" ref="listenerFormRef" @submit.native.prevent>
|
||||
<el-drawer v-model="listenerFormModelVisible" title="执行监听器" :size="width + 'px'" append-to-body destroy-on-close>
|
||||
<el-form size="small" :model="listenerForm" label-width="96px" ref="listenerFormRef" @submit.native.prevent>
|
||||
<el-form-item label="事件类型" prop="event" :rules="{ required: true, trigger: ['blur', 'change'] }">
|
||||
<el-select v-model="listenerForm.event">
|
||||
<el-option label="start" value="start" />
|
||||
@ -116,31 +116,31 @@ export const template = isTaskListener => {
|
||||
<el-divider />
|
||||
<p class="listener-filed__title">
|
||||
<span><i class="el-icon-menu"></i>注入字段：</span>
|
||||
<el-button size="mini" type="primary" @click="openListenerFieldForm(null)">添加字段</el-button>
|
||||
<el-button size="small" type="primary" @click="openListenerFieldForm(null)">添加字段</el-button>
|
||||
</p>
|
||||
<el-table :data="fieldsListOfListener" size="mini" max-height="240" border fit style="flex: none">
|
||||
<el-table :data="fieldsListOfListener" size="small" max-height="240" border fit style="flex: none">
|
||||
<el-table-column label="序号" width="50px" type="index" />
|
||||
<el-table-column label="字段名称" min-width="100px" prop="name" />
|
||||
<el-table-column label="字段类型" min-width="80px" show-overflow-tooltip :formatter="row => fieldTypeObject[row.fieldType]" />
|
||||
<el-table-column label="字段值/表达式" min-width="100px" show-overflow-tooltip :formatter="row => row.string || row.expression" />
|
||||
<el-table-column label="操作" width="100px">
|
||||
<template slot-scope="{ row, $index }">
|
||||
<el-button size="mini" type="text" @click="openListenerFieldForm(row, $index)">编辑</el-button>
|
||||
<el-button size="small" type="text" @click="openListenerFieldForm(row, $index)">编辑</el-button>
|
||||
<el-divider direction="vertical" />
|
||||
<el-button size="mini" type="text" style="color: #ff4d4f" @click="removeListenerField(row, $index)">移除</el-button>
|
||||
<el-button size="small" type="text" style="color: #ff4d4f" @click="removeListenerField(row, $index)">移除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<div class="element-drawer__button">
|
||||
<el-button size="mini" @click="listenerFormModelVisible = false">取 消</el-button>
|
||||
<el-button size="mini" type="primary" @click="saveListenerConfig">保 存</el-button>
|
||||
<el-button size="small" @click="listenerFormModelVisible = false">取 消</el-button>
|
||||
<el-button size="small" type="primary" @click="saveListenerConfig">保 存</el-button>
|
||||
</div>
|
||||
</el-drawer>
|
||||
|
||||
<!-- 注入西段 编辑/创建 部分 -->
|
||||
<el-dialog title="字段配置" :visible.sync="listenerFieldFormModelVisible" width="600px" append-to-body destroy-on-close>
|
||||
<el-form :model="listenerFieldForm" size="mini" label-width="96px" ref="listenerFieldFormRef" style="height: 136px" @submit.native.prevent>
|
||||
<el-dialog title="字段配置" v-model="listenerFieldFormModelVisible" width="600px" append-to-body destroy-on-close>
|
||||
<el-form :model="listenerFieldForm" size="small" label-width="96px" ref="listenerFieldFormRef" style="height: 136px" @submit.native.prevent>
|
||||
<el-form-item label="字段名称：" prop="name" :rules="{ required: true, trigger: ['blur', 'change'] }">
|
||||
<el-input v-model="listenerFieldForm.name" clearable />
|
||||
</el-form-item>
|
||||
@ -169,8 +169,8 @@ export const template = isTaskListener => {
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<template slot="footer">
|
||||
<el-button size="mini" @click="listenerFieldFormModelVisible = false">取 消</el-button>
|
||||
<el-button size="mini" type="primary" @click="saveListenerFiled">确 定</el-button>
|
||||
<el-button size="small" @click="listenerFieldFormModelVisible = false">取 消</el-button>
|
||||
<el-button size="small" type="primary" @click="saveListenerFiled">确 定</el-button>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</div>
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div class="panel-tab__content">
|
||||
<el-form size="mini" label-width="90px" @submit.native.prevent>
|
||||
<el-form size="small" label-width="90px" @submit.native.prevent>
|
||||
<el-form-item label="回路特性">
|
||||
<el-select v-model="loopCharacteristics" @change="changeLoopCharacteristicsType">
|
||||
<!--bpmn:MultiInstanceLoopCharacteristics-->
|
||||
|
||||
@ -6,7 +6,7 @@
|
||||
<el-input
|
||||
type="textarea"
|
||||
v-model="documentation"
|
||||
size="mini"
|
||||
size="small"
|
||||
resize="vertical"
|
||||
:autosize="{ minRows: 2, maxRows: 4 }"
|
||||
@input="updateDocumentation"
|
||||
|
||||
@ -1,23 +1,23 @@
|
||||
<template>
|
||||
<div class="panel-tab__content">
|
||||
<el-table :data="elementPropertyList" size="mini" max-height="240" border fit>
|
||||
<el-table :data="elementPropertyList" size="small" 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-button size="small" 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>
|
||||
<el-button size="small" 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>
|
||||
<el-button size="small" 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-dialog v-model="propertyFormModelVisible" title="属性配置" width="600px" append-to-body destroy-on-close>
|
||||
<el-form :model="propertyForm" label-width="80px" size="small" ref="attributeFormRef" @submit.native.prevent>
|
||||
<el-form-item label="属性名：" prop="name">
|
||||
<el-input v-model="propertyForm.name" clearable />
|
||||
</el-form-item>
|
||||
@ -26,8 +26,8 @@
|
||||
</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>
|
||||
<el-button size="small" @click="propertyFormModelVisible = false">取 消</el-button>
|
||||
<el-button size="small" type="primary" @click="saveAttribute">确 定</el-button>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</div>
|
||||
|
||||
@ -1,26 +1,79 @@
|
||||
<template>
|
||||
<div class="panel-tab__content">
|
||||
<div class="panel-tab__content--title">
|
||||
<span><i class="el-icon-menu" style="margin-right: 8px; color: #555555"></i>消息列表</span>
|
||||
<el-button size="mini" type="primary" icon="el-icon-plus" @click="openModel('message')">创建新消息</el-button>
|
||||
<span
|
||||
><i class="el-icon-menu" style="margin-right: 8px; color: #555555"></i
|
||||
>消息列表</span
|
||||
>
|
||||
<el-button
|
||||
size="small"
|
||||
type="primary"
|
||||
icon="el-icon-plus"
|
||||
@click="openModel('message')"
|
||||
>创建新消息</el-button
|
||||
>
|
||||
</div>
|
||||
<el-table :data="messageList" size="mini" border>
|
||||
<el-table :data="messageList" size="small" border>
|
||||
<el-table-column type="index" label="序号" width="60px" />
|
||||
<el-table-column label="消息ID" prop="id" max-width="300px" show-overflow-tooltip />
|
||||
<el-table-column label="消息名称" prop="name" max-width="300px" show-overflow-tooltip />
|
||||
<el-table-column
|
||||
label="消息ID"
|
||||
prop="id"
|
||||
max-width="300px"
|
||||
show-overflow-tooltip
|
||||
/>
|
||||
<el-table-column
|
||||
label="消息名称"
|
||||
prop="name"
|
||||
max-width="300px"
|
||||
show-overflow-tooltip
|
||||
/>
|
||||
</el-table>
|
||||
<div class="panel-tab__content--title" style="padding-top: 8px; margin-top: 8px; border-top: 1px solid #eeeeee">
|
||||
<span><i class="el-icon-menu" style="margin-right: 8px; color: #555555"></i>信号列表</span>
|
||||
<el-button size="mini" type="primary" icon="el-icon-plus" @click="openModel('signal')">创建新信号</el-button>
|
||||
<div
|
||||
class="panel-tab__content--title"
|
||||
style="padding-top: 8px; margin-top: 8px; border-top: 1px solid #eeeeee"
|
||||
>
|
||||
<span
|
||||
><i class="el-icon-menu" style="margin-right: 8px; color: #555555"></i
|
||||
>信号列表</span
|
||||
>
|
||||
<el-button
|
||||
size="small"
|
||||
type="primary"
|
||||
icon="el-icon-plus"
|
||||
@click="openModel('signal')"
|
||||
>创建新信号</el-button
|
||||
>
|
||||
</div>
|
||||
<el-table :data="signalList" size="mini" border>
|
||||
<el-table :data="signalList" size="small" border>
|
||||
<el-table-column type="index" label="序号" width="60px" />
|
||||
<el-table-column label="信号ID" prop="id" max-width="300px" show-overflow-tooltip />
|
||||
<el-table-column label="信号名称" prop="name" max-width="300px" show-overflow-tooltip />
|
||||
<el-table-column
|
||||
label="信号ID"
|
||||
prop="id"
|
||||
max-width="300px"
|
||||
show-overflow-tooltip
|
||||
/>
|
||||
<el-table-column
|
||||
label="信号名称"
|
||||
prop="name"
|
||||
max-width="300px"
|
||||
show-overflow-tooltip
|
||||
/>
|
||||
</el-table>
|
||||
|
||||
<el-dialog :visible.sync="modelVisible" :title="modelConfig.title" :close-on-click-modal="false" width="400px" append-to-body destroy-on-close>
|
||||
<el-form :model="modelObjectForm" size="mini" label-width="90px" @submit.native.prevent>
|
||||
<el-dialog
|
||||
v-model="modelVisible"
|
||||
:title="modelConfig.title"
|
||||
:close-on-click-modal="false"
|
||||
width="400px"
|
||||
append-to-body
|
||||
destroy-on-close
|
||||
>
|
||||
<el-form
|
||||
:model="modelObjectForm"
|
||||
size="small"
|
||||
label-width="90px"
|
||||
@submit.native.prevent
|
||||
>
|
||||
<el-form-item :label="modelConfig.idLabel">
|
||||
<el-input v-model="modelObjectForm.id" clearable />
|
||||
</el-form-item>
|
||||
@ -29,8 +82,10 @@
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<template slot="footer">
|
||||
<el-button size="mini" @click="modelVisible = false">取 消</el-button>
|
||||
<el-button size="mini" type="primary" @click="addNewObject">保 存</el-button>
|
||||
<el-button size="small" @click="modelVisible = false">取 消</el-button>
|
||||
<el-button size="small" type="primary" @click="addNewObject"
|
||||
>保 存</el-button
|
||||
>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</div>
|
||||
@ -44,7 +99,7 @@ export default {
|
||||
messageList: [],
|
||||
modelVisible: false,
|
||||
modelType: "",
|
||||
modelObjectForm: {}
|
||||
modelObjectForm: {},
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
@ -54,19 +109,20 @@ export default {
|
||||
} else {
|
||||
return { title: "创建信号", idLabel: "信号ID", nameLabel: "信号名称" };
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.initDataList();
|
||||
},
|
||||
methods: {
|
||||
initDataList() {
|
||||
this.rootElements = window.bpmnInstances.modeler.getDefinitions().rootElements;
|
||||
this.rootElements =
|
||||
window.bpmnInstances.modeler.getDefinitions().rootElements;
|
||||
this.messageIdMap = {};
|
||||
this.signalIdMap = {};
|
||||
this.messageList = [];
|
||||
this.signalList = [];
|
||||
this.rootElements.forEach(el => {
|
||||
this.rootElements.forEach((el) => {
|
||||
if (el.$type === "bpmn:Message") {
|
||||
this.messageIdMap[el.id] = true;
|
||||
this.messageList.push({ ...el });
|
||||
@ -85,20 +141,26 @@ export default {
|
||||
addNewObject() {
|
||||
if (this.modelType === "message") {
|
||||
if (this.messageIdMap[this.modelObjectForm.id]) {
|
||||
return this.$message.error("该消息已存在，请修改id后重新保存");
|
||||
return ElMessage.error("该消息已存在，请修改id后重新保存");
|
||||
}
|
||||
const messageRef = window.bpmnInstances.moddle.create("bpmn:Message", this.modelObjectForm);
|
||||
const messageRef = window.bpmnInstances.moddle.create(
|
||||
"bpmn:Message",
|
||||
this.modelObjectForm
|
||||
);
|
||||
this.rootElements.push(messageRef);
|
||||
} else {
|
||||
if (this.signalIdMap[this.modelObjectForm.id]) {
|
||||
return this.$message.error("该信号已存在，请修改id后重新保存");
|
||||
}
|
||||
const signalRef = window.bpmnInstances.moddle.create("bpmn:Signal", this.modelObjectForm);
|
||||
const signalRef = window.bpmnInstances.moddle.create(
|
||||
"bpmn:Signal",
|
||||
this.modelObjectForm
|
||||
);
|
||||
this.rootElements.push(signalRef);
|
||||
}
|
||||
this.modelVisible = false;
|
||||
this.initDataList();
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div class="panel-tab__content">
|
||||
<el-form size="mini" label-width="90px" @submit.native.prevent>
|
||||
<el-form size="small" label-width="90px" @submit.native.prevent>
|
||||
<!-- <el-form-item label="异步延续">-->
|
||||
<!-- <el-checkbox v-model="taskConfigForm.asyncBefore" label="异步前" @change="changeTaskAsync" />-->
|
||||
<!-- <el-checkbox v-model="taskConfigForm.asyncAfter" label="异步后" @change="changeTaskAsync" />-->
|
||||
|
||||
@ -5,11 +5,11 @@
|
||||
<el-select v-model="bindMessageId" @change="updateTaskMessage">
|
||||
<el-option v-for="id in Object.keys(messageMap)" :value="id" :label="messageMap[id]" :key="id" />
|
||||
</el-select>
|
||||
<el-button size="mini" type="primary" icon="el-icon-plus" style="margin-left: 8px" @click="openMessageModel" />
|
||||
<el-button size="small" type="primary" icon="el-icon-plus" style="margin-left: 8px" @click="openMessageModel" />
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-dialog :visible.sync="messageModelVisible" :close-on-click-modal="false" title="创建新消息" width="400px" append-to-body destroy-on-close>
|
||||
<el-form :model="newMessageForm" size="mini" label-width="90px" @submit.native.prevent>
|
||||
<el-dialog v-model="messageModelVisible" :close-on-click-modal="false" title="创建新消息" width="400px" append-to-body destroy-on-close>
|
||||
<el-form :model="newMessageForm" size="small" label-width="90px" @submit.native.prevent>
|
||||
<el-form-item label="消息ID">
|
||||
<el-input v-model="newMessageForm.id" clearable />
|
||||
</el-form-item>
|
||||
@ -18,7 +18,7 @@
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<template slot="footer">
|
||||
<el-button size="mini" type="primary" @click="createNewMessage">确 认</el-button>
|
||||
<el-button size="small" type="primary" @click="createNewMessage">确 认</el-button>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</div>
|
||||
|
||||
@ -15,11 +15,11 @@
|
||||
{{userText}}
|
||||
</el-tag>
|
||||
<div class="element-drawer__button">
|
||||
<el-button size="mini" type="primary" icon="el-icon-plus" @click="onSelectUsers()">添加用户</el-button>
|
||||
<el-button size="small" type="primary" icon="el-icon-plus" @click="onSelectUsers()">添加用户</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="dataType === 'ROLES'">
|
||||
<el-select v-model="roleIds" multiple size="mini" placeholder="请选择 角色" @change="changeSelectRoles">
|
||||
<el-select v-model="roleIds" multiple size="small" placeholder="请选择 角色" @change="changeSelectRoles">
|
||||
<el-option
|
||||
v-for="item in roleOptions"
|
||||
:key="item.roleId"
|
||||
@ -33,7 +33,7 @@
|
||||
<tree-select
|
||||
:width="320"
|
||||
:height="400"
|
||||
size="mini"
|
||||
size="small"
|
||||
:data="deptTreeData"
|
||||
:defaultProps="deptProps"
|
||||
multiple
|
||||
@ -67,7 +67,7 @@
|
||||
</el-row>
|
||||
|
||||
<!-- 候选用户弹窗 -->
|
||||
<el-dialog title="候选用户" :visible.sync="userOpen" width="60%" append-to-body>
|
||||
<el-dialog title="候选用户" v-model="userOpen" width="60%" append-to-body>
|
||||
<el-row type="flex" :gutter="20">
|
||||
<!--部门数据-->
|
||||
<el-col :span="7">
|
||||
|
||||
@ -1,3 +1,5 @@
|
||||
import useBpmnStore from "@/store/modules/bpmn";
|
||||
const bpmnStore = useBpmnStore();
|
||||
// 创建监听器实例
|
||||
export function createListenerObject(options, isTask, prefix) {
|
||||
const listenerObj = Object.create(null);
|
||||
@ -18,50 +20,72 @@ export function createListenerObject(options, isTask, prefix) {
|
||||
}
|
||||
// 注入字段
|
||||
if (options.fields) {
|
||||
listenerObj.fields = options.fields.map(field => {
|
||||
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", {
|
||||
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
|
||||
});
|
||||
[`time${options.eventDefinitionType.replace(/^\S/, (s) =>
|
||||
s.toUpperCase()
|
||||
)}`]: timeDefinition,
|
||||
}
|
||||
);
|
||||
listenerObj.eventDefinitions = [TimerEventDefinition];
|
||||
}
|
||||
return window.bpmnInstances.moddle.create(`${prefix}:${isTask ? "TaskListener" : "ExecutionListener"}`, listenerObj);
|
||||
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 };
|
||||
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);
|
||||
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
|
||||
});
|
||||
const extensions = window.bpmnInstances.moddle.create(
|
||||
"bpmn:ExtensionElements",
|
||||
{
|
||||
values: extensionList,
|
||||
}
|
||||
);
|
||||
window.bpmnInstances.modeling.updateProperties(element, {
|
||||
extensionElements: extensions
|
||||
extensionElements: extensions,
|
||||
});
|
||||
}
|
||||
|
||||
// 创建一个id
|
||||
export function uuid(length = 8, chars) {
|
||||
let result = "";
|
||||
let charsString = chars || "0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ";
|
||||
let charsString =
|
||||
chars || "0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ";
|
||||
for (let i = length; i > 0; --i) {
|
||||
result += charsString[Math.floor(Math.random() * charsString.length)];
|
||||
}
|
||||
|
||||
@ -1,46 +1,46 @@
|
||||
import Cookies from 'js-cookie'
|
||||
import Cookies from "js-cookie";
|
||||
|
||||
const useAppStore = defineStore(
|
||||
'app',
|
||||
{
|
||||
const useAppStore = defineStore("app", {
|
||||
state: () => ({
|
||||
sidebar: {
|
||||
opened: Cookies.get('sidebarStatus') ? !!+Cookies.get('sidebarStatus') : true,
|
||||
opened: Cookies.get("sidebarStatus")
|
||||
? !!+Cookies.get("sidebarStatus")
|
||||
: true,
|
||||
withoutAnimation: false,
|
||||
hide: false
|
||||
hide: false,
|
||||
},
|
||||
device: 'desktop',
|
||||
size: Cookies.get('size') || 'default'
|
||||
device: "desktop",
|
||||
size: Cookies.get("size") || "default",
|
||||
}),
|
||||
actions: {
|
||||
toggleSideBar(withoutAnimation) {
|
||||
if (this.sidebar.hide) {
|
||||
return false;
|
||||
}
|
||||
this.sidebar.opened = !this.sidebar.opened
|
||||
this.sidebar.withoutAnimation = withoutAnimation
|
||||
this.sidebar.opened = !this.sidebar.opened;
|
||||
this.sidebar.withoutAnimation = withoutAnimation;
|
||||
if (this.sidebar.opened) {
|
||||
Cookies.set('sidebarStatus', 1)
|
||||
Cookies.set("sidebarStatus", 1);
|
||||
} else {
|
||||
Cookies.set('sidebarStatus', 0)
|
||||
Cookies.set("sidebarStatus", 0);
|
||||
}
|
||||
},
|
||||
closeSideBar({ withoutAnimation }) {
|
||||
Cookies.set('sidebarStatus', 0)
|
||||
this.sidebar.opened = false
|
||||
this.sidebar.withoutAnimation = withoutAnimation
|
||||
Cookies.set("sidebarStatus", 0);
|
||||
this.sidebar.opened = false;
|
||||
this.sidebar.withoutAnimation = withoutAnimation;
|
||||
},
|
||||
toggleDevice(device) {
|
||||
this.device = device
|
||||
this.device = device;
|
||||
},
|
||||
setSize(size) {
|
||||
this.size = size;
|
||||
Cookies.set('size', size)
|
||||
Cookies.set("size", size);
|
||||
},
|
||||
toggleSideBarHide(status) {
|
||||
this.sidebar.hide = status
|
||||
}
|
||||
}
|
||||
})
|
||||
this.sidebar.hide = status;
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
export default useAppStore
|
||||
export default useAppStore;
|
||||
|
||||
17
src/store/modules/bpmn.js
Normal file
17
src/store/modules/bpmn.js
Normal file
@ -0,0 +1,17 @@
|
||||
// import { defineStore } from "pinia";
|
||||
|
||||
const useBpmnStore = defineStore("bpmn", {
|
||||
state: () => ({
|
||||
bpmnInstances: {},
|
||||
count: 1,
|
||||
}),
|
||||
actions: {
|
||||
setBpmnInstances(data) {
|
||||
console.log(data);
|
||||
this.bpmnInstances = data;
|
||||
// this.bpmnInstances.name = "423";
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
export default useBpmnStore;
|
||||
@ -19,6 +19,7 @@ export default defineConfig(({ mode, command }) => {
|
||||
"~": path.resolve(__dirname, "./"),
|
||||
// 设置别名
|
||||
"@": path.resolve(__dirname, "./src"),
|
||||
stream: "stream-browserify",
|
||||
},
|
||||
// https://cn.vitejs.dev/config/#resolve-extensions
|
||||
extensions: [".mjs", ".js", ".ts", ".jsx", ".tsx", ".json", ".vue"],
|
||||
|
||||
Reference in New Issue
Block a user