|
@@ -20,7 +20,7 @@
|
|
<XTextButton title="下载为BPMN文件" @click="downloadProcessAsBpmn()" />
|
|
<XTextButton title="下载为BPMN文件" @click="downloadProcessAsBpmn()" />
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</template>
|
|
- <XButton title="下载文件" preIcon="ep:download" />
|
|
|
|
|
|
+ <XButton preIcon="ep:download" title="下载文件" />
|
|
</el-tooltip>
|
|
</el-tooltip>
|
|
<el-tooltip effect="light">
|
|
<el-tooltip effect="light">
|
|
<XButton preIcon="ep:view" title="浏览" />
|
|
<XButton preIcon="ep:view" title="浏览" />
|
|
@@ -34,62 +34,62 @@
|
|
</el-tooltip>
|
|
</el-tooltip>
|
|
<el-tooltip
|
|
<el-tooltip
|
|
v-if="props.simulation"
|
|
v-if="props.simulation"
|
|
- effect="light"
|
|
|
|
:content="simulationStatus ? '退出模拟' : '开启模拟'"
|
|
:content="simulationStatus ? '退出模拟' : '开启模拟'"
|
|
|
|
+ effect="light"
|
|
>
|
|
>
|
|
<XButton preIcon="ep:cpu" title="模拟" @click="processSimulation" />
|
|
<XButton preIcon="ep:cpu" title="模拟" @click="processSimulation" />
|
|
</el-tooltip>
|
|
</el-tooltip>
|
|
</ElButtonGroup>
|
|
</ElButtonGroup>
|
|
<ElButtonGroup key="align-control">
|
|
<ElButtonGroup key="align-control">
|
|
- <el-tooltip effect="light" content="向左对齐">
|
|
|
|
|
|
+ <el-tooltip content="向左对齐" effect="light">
|
|
<!-- <el-button
|
|
<!-- <el-button
|
|
class="align align-left"
|
|
class="align align-left"
|
|
icon="el-icon-s-data"
|
|
icon="el-icon-s-data"
|
|
@click="elementsAlign('left')"
|
|
@click="elementsAlign('left')"
|
|
/> -->
|
|
/> -->
|
|
<XButton
|
|
<XButton
|
|
- preIcon="fa:align-left"
|
|
|
|
class="align align-bottom"
|
|
class="align align-bottom"
|
|
|
|
+ preIcon="fa:align-left"
|
|
@click="elementsAlign('left')"
|
|
@click="elementsAlign('left')"
|
|
/>
|
|
/>
|
|
</el-tooltip>
|
|
</el-tooltip>
|
|
- <el-tooltip effect="light" content="向右对齐">
|
|
|
|
|
|
+ <el-tooltip content="向右对齐" effect="light">
|
|
<!-- <el-button
|
|
<!-- <el-button
|
|
class="align align-right"
|
|
class="align align-right"
|
|
icon="el-icon-s-data"
|
|
icon="el-icon-s-data"
|
|
@click="elementsAlign('right')"
|
|
@click="elementsAlign('right')"
|
|
/> -->
|
|
/> -->
|
|
<XButton
|
|
<XButton
|
|
- preIcon="fa:align-left"
|
|
|
|
class="align align-top"
|
|
class="align align-top"
|
|
|
|
+ preIcon="fa:align-left"
|
|
@click="elementsAlign('right')"
|
|
@click="elementsAlign('right')"
|
|
/>
|
|
/>
|
|
</el-tooltip>
|
|
</el-tooltip>
|
|
- <el-tooltip effect="light" content="向上对齐">
|
|
|
|
|
|
+ <el-tooltip content="向上对齐" effect="light">
|
|
<!-- <el-button
|
|
<!-- <el-button
|
|
class="align align-top"
|
|
class="align align-top"
|
|
icon="el-icon-s-data"
|
|
icon="el-icon-s-data"
|
|
@click="elementsAlign('top')"
|
|
@click="elementsAlign('top')"
|
|
/> -->
|
|
/> -->
|
|
<XButton
|
|
<XButton
|
|
- preIcon="fa:align-left"
|
|
|
|
class="align align-left"
|
|
class="align align-left"
|
|
|
|
+ preIcon="fa:align-left"
|
|
@click="elementsAlign('top')"
|
|
@click="elementsAlign('top')"
|
|
/>
|
|
/>
|
|
</el-tooltip>
|
|
</el-tooltip>
|
|
- <el-tooltip effect="light" content="向下对齐">
|
|
|
|
|
|
+ <el-tooltip content="向下对齐" effect="light">
|
|
<!-- <el-button
|
|
<!-- <el-button
|
|
class="align align-bottom"
|
|
class="align align-bottom"
|
|
icon="el-icon-s-data"
|
|
icon="el-icon-s-data"
|
|
@click="elementsAlign('bottom')"
|
|
@click="elementsAlign('bottom')"
|
|
/> -->
|
|
/> -->
|
|
<XButton
|
|
<XButton
|
|
- preIcon="fa:align-left"
|
|
|
|
class="align align-right"
|
|
class="align align-right"
|
|
|
|
+ preIcon="fa:align-left"
|
|
@click="elementsAlign('bottom')"
|
|
@click="elementsAlign('bottom')"
|
|
/>
|
|
/>
|
|
</el-tooltip>
|
|
</el-tooltip>
|
|
- <el-tooltip effect="light" content="水平居中">
|
|
|
|
|
|
+ <el-tooltip content="水平居中" effect="light">
|
|
<!-- <el-button
|
|
<!-- <el-button
|
|
class="align align-center"
|
|
class="align align-center"
|
|
icon="el-icon-s-data"
|
|
icon="el-icon-s-data"
|
|
@@ -97,65 +97,65 @@
|
|
/> -->
|
|
/> -->
|
|
<!-- class="align align-center" -->
|
|
<!-- class="align align-center" -->
|
|
<XButton
|
|
<XButton
|
|
- preIcon="fa:align-left"
|
|
|
|
class="align align-center"
|
|
class="align align-center"
|
|
|
|
+ preIcon="fa:align-left"
|
|
@click="elementsAlign('center')"
|
|
@click="elementsAlign('center')"
|
|
/>
|
|
/>
|
|
</el-tooltip>
|
|
</el-tooltip>
|
|
- <el-tooltip effect="light" content="垂直居中">
|
|
|
|
|
|
+ <el-tooltip content="垂直居中" effect="light">
|
|
<!-- <el-button
|
|
<!-- <el-button
|
|
class="align align-middle"
|
|
class="align align-middle"
|
|
icon="el-icon-s-data"
|
|
icon="el-icon-s-data"
|
|
@click="elementsAlign('middle')"
|
|
@click="elementsAlign('middle')"
|
|
/> -->
|
|
/> -->
|
|
<XButton
|
|
<XButton
|
|
- preIcon="fa:align-left"
|
|
|
|
class="align align-middle"
|
|
class="align align-middle"
|
|
|
|
+ preIcon="fa:align-left"
|
|
@click="elementsAlign('middle')"
|
|
@click="elementsAlign('middle')"
|
|
/>
|
|
/>
|
|
</el-tooltip>
|
|
</el-tooltip>
|
|
</ElButtonGroup>
|
|
</ElButtonGroup>
|
|
<ElButtonGroup key="scale-control">
|
|
<ElButtonGroup key="scale-control">
|
|
- <el-tooltip effect="light" content="缩小视图">
|
|
|
|
|
|
+ <el-tooltip content="缩小视图" effect="light">
|
|
<!-- <el-button
|
|
<!-- <el-button
|
|
:disabled="defaultZoom < 0.2"
|
|
:disabled="defaultZoom < 0.2"
|
|
icon="el-icon-zoom-out"
|
|
icon="el-icon-zoom-out"
|
|
@click="processZoomOut()"
|
|
@click="processZoomOut()"
|
|
/> -->
|
|
/> -->
|
|
<XButton
|
|
<XButton
|
|
|
|
+ :disabled="defaultZoom < 0.2"
|
|
preIcon="ep:zoom-out"
|
|
preIcon="ep:zoom-out"
|
|
@click="processZoomOut()"
|
|
@click="processZoomOut()"
|
|
- :disabled="defaultZoom < 0.2"
|
|
|
|
/>
|
|
/>
|
|
</el-tooltip>
|
|
</el-tooltip>
|
|
<el-button>{{ Math.floor(defaultZoom * 10 * 10) + '%' }}</el-button>
|
|
<el-button>{{ Math.floor(defaultZoom * 10 * 10) + '%' }}</el-button>
|
|
- <el-tooltip effect="light" content="放大视图">
|
|
|
|
|
|
+ <el-tooltip content="放大视图" effect="light">
|
|
<!-- <el-button
|
|
<!-- <el-button
|
|
:disabled="defaultZoom > 4"
|
|
:disabled="defaultZoom > 4"
|
|
icon="el-icon-zoom-in"
|
|
icon="el-icon-zoom-in"
|
|
@click="processZoomIn()"
|
|
@click="processZoomIn()"
|
|
/> -->
|
|
/> -->
|
|
- <XButton preIcon="ep:zoom-in" @click="processZoomIn()" :disabled="defaultZoom > 4" />
|
|
|
|
|
|
+ <XButton :disabled="defaultZoom > 4" preIcon="ep:zoom-in" @click="processZoomIn()" />
|
|
</el-tooltip>
|
|
</el-tooltip>
|
|
- <el-tooltip effect="light" content="重置视图并居中">
|
|
|
|
|
|
+ <el-tooltip content="重置视图并居中" effect="light">
|
|
<!-- <el-button icon="el-icon-c-scale-to-original" @click="processReZoom()" /> -->
|
|
<!-- <el-button icon="el-icon-c-scale-to-original" @click="processReZoom()" /> -->
|
|
<XButton preIcon="ep:scale-to-original" @click="processReZoom()" />
|
|
<XButton preIcon="ep:scale-to-original" @click="processReZoom()" />
|
|
</el-tooltip>
|
|
</el-tooltip>
|
|
</ElButtonGroup>
|
|
</ElButtonGroup>
|
|
<ElButtonGroup key="stack-control">
|
|
<ElButtonGroup key="stack-control">
|
|
- <el-tooltip effect="light" content="撤销">
|
|
|
|
|
|
+ <el-tooltip content="撤销" effect="light">
|
|
<!-- <el-button :disabled="!revocable" icon="el-icon-refresh-left" @click="processUndo()" /> -->
|
|
<!-- <el-button :disabled="!revocable" icon="el-icon-refresh-left" @click="processUndo()" /> -->
|
|
- <XButton preIcon="ep:refresh-left" @click="processUndo()" :disabled="!revocable" />
|
|
|
|
|
|
+ <XButton :disabled="!revocable" preIcon="ep:refresh-left" @click="processUndo()" />
|
|
</el-tooltip>
|
|
</el-tooltip>
|
|
- <el-tooltip effect="light" content="恢复">
|
|
|
|
|
|
+ <el-tooltip content="恢复" effect="light">
|
|
<!-- <el-button
|
|
<!-- <el-button
|
|
:disabled="!recoverable"
|
|
:disabled="!recoverable"
|
|
icon="el-icon-refresh-right"
|
|
icon="el-icon-refresh-right"
|
|
@click="processRedo()"
|
|
@click="processRedo()"
|
|
/> -->
|
|
/> -->
|
|
- <XButton preIcon="ep:refresh-right" @click="processRedo()" :disabled="!recoverable" />
|
|
|
|
|
|
+ <XButton :disabled="!recoverable" preIcon="ep:refresh-right" @click="processRedo()" />
|
|
</el-tooltip>
|
|
</el-tooltip>
|
|
- <el-tooltip effect="light" content="重新绘制">
|
|
|
|
|
|
+ <el-tooltip content="重新绘制" effect="light">
|
|
<!-- <el-button icon="el-icon-refresh" @click="processRestart" /> -->
|
|
<!-- <el-button icon="el-icon-refresh" @click="processRestart" /> -->
|
|
<XButton preIcon="ep:refresh" @click="processRestart()" />
|
|
<XButton preIcon="ep:refresh" @click="processRestart()" />
|
|
</el-tooltip>
|
|
</el-tooltip>
|
|
@@ -163,30 +163,30 @@
|
|
</template>
|
|
</template>
|
|
<!-- 用于打开本地文件-->
|
|
<!-- 用于打开本地文件-->
|
|
<input
|
|
<input
|
|
- type="file"
|
|
|
|
id="files"
|
|
id="files"
|
|
ref="refFile"
|
|
ref="refFile"
|
|
- style="display: none"
|
|
|
|
accept=".xml, .bpmn"
|
|
accept=".xml, .bpmn"
|
|
|
|
+ style="display: none"
|
|
|
|
+ type="file"
|
|
@change="importLocalFile"
|
|
@change="importLocalFile"
|
|
/>
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div class="my-process-designer__container">
|
|
<div class="my-process-designer__container">
|
|
<div
|
|
<div
|
|
- class="my-process-designer__canvas"
|
|
|
|
- ref="bpmnCanvas"
|
|
|
|
id="bpmnCanvas"
|
|
id="bpmnCanvas"
|
|
|
|
+ ref="bpmnCanvas"
|
|
|
|
+ class="my-process-designer__canvas"
|
|
style="width: 1680px; height: 800px"
|
|
style="width: 1680px; height: 800px"
|
|
></div>
|
|
></div>
|
|
<!-- <div id="js-properties-panel" class="panel"></div> -->
|
|
<!-- <div id="js-properties-panel" class="panel"></div> -->
|
|
<!-- <div class="my-process-designer__canvas" ref="bpmn-canvas"></div> -->
|
|
<!-- <div class="my-process-designer__canvas" ref="bpmn-canvas"></div> -->
|
|
</div>
|
|
</div>
|
|
<Dialog
|
|
<Dialog
|
|
- title="预览"
|
|
|
|
v-model="previewModelVisible"
|
|
v-model="previewModelVisible"
|
|
- width="80%"
|
|
|
|
:scroll="true"
|
|
:scroll="true"
|
|
max-height="600px"
|
|
max-height="600px"
|
|
|
|
+ title="预览"
|
|
|
|
+ width="80%"
|
|
>
|
|
>
|
|
<div>
|
|
<div>
|
|
<pre><code v-dompurify-html="highlightedCode(previewResult)" class="hljs"></code></pre>
|
|
<pre><code v-dompurify-html="highlightedCode(previewResult)" class="hljs"></code></pre>
|
|
@@ -224,7 +224,7 @@ import flowableModdleExtension from './plugins/extension-moddle/flowable'
|
|
// 引入json转换与高亮
|
|
// 引入json转换与高亮
|
|
// import xml2js from 'xml-js'
|
|
// import xml2js from 'xml-js'
|
|
// import xml2js from 'fast-xml-parser'
|
|
// import xml2js from 'fast-xml-parser'
|
|
-import { XmlNode, XmlNodeType, parseXmlString } from 'steady-xml'
|
|
|
|
|
|
+import { parseXmlString, XmlNode, XmlNodeType } from 'steady-xml'
|
|
// 代码高亮插件
|
|
// 代码高亮插件
|
|
// import hljs from 'highlight.js/lib/highlight'
|
|
// import hljs from 'highlight.js/lib/highlight'
|
|
// import 'highlight.js/styles/github-gist.css'
|
|
// import 'highlight.js/styles/github-gist.css'
|
|
@@ -642,7 +642,7 @@ const previewProcessJson = () => {
|
|
})
|
|
})
|
|
}
|
|
}
|
|
|
|
|
|
-/* ------------------------------------------------ 芋道源码 methods ------------------------------------------------------ */
|
|
|
|
|
|
+/* ------------------------------------------------ 赢伟达源码 methods ------------------------------------------------------ */
|
|
onMounted(() => {
|
|
onMounted(() => {
|
|
initBpmnModeler()
|
|
initBpmnModeler()
|
|
createNewDiagram(props.value)
|
|
createNewDiagram(props.value)
|