hhyykk/ipms-sjy
1
1
Fork 0
mirror of https://gitee.com/hhyykk/ipms-sjy.git synced 2025-07-14 11:05:06 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

完善 bpmnProcessDesigner 流程设计器的使用，基本可用了！

Browse Source
This commit is contained in:
YunaiV
2022-01-03 01:12:36 +08:00
parent c4003396a5
commit 490f907ada
20 changed files with 242 additions and 135 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
yudao-admin-ui/src/components/bpmnProcessDesigner/package/designer/ProcessDesigner.vue
View File

@ -4,7 +4,7 @@
<slot name="control-header"></slot>
<template v-if="!$slots['control-header']">
<el-button-group key="file-control">
<el-button :size="headerButtonSize" :type="headerButtonType" icon="el-icon-folder-opened" @click="$refs.refFile.click()">打开文件</el-button>
<el-button :size="headerButtonSize" icon="el-icon-folder-opened" @click="$refs.refFile.click()">打开文件</el-button>
<el-tooltip effect="light">
<div slot="content">
<el-button :size="headerButtonSize" type="text" @click="downloadProcessAsXml()">下载为XML文件</el-button>
@ -13,7 +13,7 @@
<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" icon="el-icon-download">下载文件</el-button>
</el-tooltip>
<el-tooltip effect="light">
<div slot="content">
@ -21,10 +21,10 @@
<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" icon="el-icon-view">预览</el-button>
</el-tooltip>
<el-tooltip v-if="simulation" effect="light" :content="this.simulationStatus ? '退出模拟' : '开启模拟'">
<el-button :size="headerButtonSize" :type="headerButtonType" icon="el-icon-cpu" @click="processSimulation">
<el-button :size="headerButtonSize" icon="el-icon-cpu" @click="processSimulation">
模拟
</el-button>
</el-tooltip>
@ -72,6 +72,7 @@
<el-button :size="headerButtonSize" icon="el-icon-refresh" @click="processRestart" />
</el-tooltip>
</el-button-group>
<el-button :size="headerButtonSize" :type="headerButtonType" icon="el-icon-plus" @click="processSave">保存模型</el-button>
</template>
<!-- 用于打开本地文件-->
<input type="file" id="files" ref="refFile" style="display: none" accept=".xml, .bpmn" @change="importLocalFile" />
@ -111,8 +112,9 @@ export default {
componentName: "MyProcessDesigner",
props: {
value: String, // xml 字符串
processId: String,
processName: String,
processId: String, // 流程 key 标识
processName: String, // 流程 name 名字
formId: Number, // 流程 form 表单编号
translations: Object, // 自定义的翻译文件
additionalModel: [Object, Array], // 自定义model
moddleExtension: Object, // 自定义moddle
@ -244,6 +246,11 @@ export default {
this.bpmnModeler = null;
});
},
watch: {
value: function (newValue) { // 在 xmlString 发生变化时，重新创建，从而绘制流程图
this.createNewDiagram(newValue);
}
},
methods: {
initBpmnModeler() {
if (this.bpmnModeler) return;
@ -445,6 +452,17 @@ export default {
this.previewType = "json";
this.previewModelVisible = true;
});
},
/* ------------------------------------------------ 芋道源码 methods ------------------------------------------------------ */
async processSave() {
const { err, xml } = await this.bpmnModeler.saveXML();
// 读取异常时抛出异常
if (err) {
this.msgError('保存模型失败，请重试！')
return
}
// 触发 save 事件
this.$emit('save', xml)
}
}
};