From 24fa2e63f7c155c87457980e6c656f3891132a47 Mon Sep 17 00:00:00 2001
From: ludc
Date: 星期三, 14 八月 2024 16:28:26 +0800
Subject: [PATCH] Merge remote-tracking branch 'origin/master'
---
Source/plt-web/plt-web-ui/src/components/flow-cycle/flowchartEditor.vue | 294 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 294 insertions(+), 0 deletions(-)
diff --git a/Source/plt-web/plt-web-ui/src/components/flow-cycle/flowchartEditor.vue b/Source/plt-web/plt-web-ui/src/components/flow-cycle/flowchartEditor.vue
new file mode 100644
index 0000000..2555966
--- /dev/null
+++ b/Source/plt-web/plt-web-ui/src/components/flow-cycle/flowchartEditor.vue
@@ -0,0 +1,294 @@
+<template>
+ <vue-flowchart-editor ref="flowChart" class="vue-flowchart-editor">
+ <div class="vfe-chart">
+ <!-- 椤堕儴鑿滃崟 -->
+ <div v-if="type !== 'detail'" class="vfe-chart-header">
+ <editor-toolbar @handler-save="handlerSave" @reset-tree="handleResetTree" :chart-data="chartData"/>
+ </div>
+ <div class="vfe-chart-container">
+ <!-- 宸︿晶椤圭洰鏍� -->
+ <div v-if="disabledBtn" class="vfe-chart-sidebar">
+ <editor-item-panel :node-items="chartDataNodeItems"/>
+ </div>
+ <!-- 涓诲浘琛� -->
+ <div class="vfe-chart-main">
+ <flow
+ :data="chartData"
+ :onAfterChange="onAfterChange"
+ :onAfterItemSelected="onAfterItemSelected"
+ />
+ <!-- 鎻愮ず妗� -->
+ <div class="tooltip">
+ <template v-for="item in tooltipData">
+ <p>{{ item.name }}: {{ item.value }}</p>
+ </template>
+ </div>
+ </div>
+
+ <div v-if="type !== 'detail'" class="vfe-chart-panel">
+ <div class="vfe-chart-panel-detail">
+ <editor-detail-panel
+ ref="EditorDetailPanel"
+ :currentSelectedLine="currentSelectedLine"
+ :existEdges="existEdges"
+ :existNodes="existNodes"
+ :rowData="rowData"
+ :type="type"
+ />
+ </div>
+ </div>
+
+ </div>
+ </div>
+
+ <!-- 鍙抽敭鑿滃崟 -->
+ <editor-context-menu v-if="type !== 'detail'"/>
+ <!-- 鑷畾涔夎竟閰嶇疆 -->
+ <register-edge
+ :config="customEdgeConfig"
+ extend="flow-polyline"
+ name="custom-polyline"
+ />
+ <!-- 鑷畾涔夊懡浠ょ粍浠� -->
+ <custom-command :download="downloadImage"/>
+ </vue-flowchart-editor>
+</template>
+
+<script>
+import VueFlowchartEditor, {Flow, RegisterEdge} from "vue-flowchart-editor";
+import EditorToolbar from "./components/Toolbar";
+import EditorItemPanel from "./components/ItemPanel";
+import EditorDetailPanel from "./components/DetailPanel";
+import EditorMinimap from "./components/EditorMinimap";
+import EditorContextMenu from "./components/ContextMenu";
+import CustomCommand from "./components/CustomCommand";
+
+export default {
+ name: "FlowchartEditor",
+
+ components: {
+ VueFlowchartEditor,
+ Flow,
+ EditorToolbar,
+ EditorItemPanel,
+ EditorDetailPanel,
+ EditorMinimap,
+ EditorContextMenu,
+ CustomCommand,
+ RegisterEdge,
+ },
+
+ props: ["chartData", "chartDataNodeItems", "saveData", "rowData", "type"],
+
+ data() {
+ return {
+ // 褰撳墠鍥捐〃鐨勬暟鎹�
+ flowChartData: {},
+ // 鑷畾涔夎竟鐨勯厤缃�
+ customEdgeConfig: {
+ getActivedStyle(/*item*/) {
+ return {
+ lineWidth: 3, // 娲昏穬鐘舵�佷笅鐨勮竟鏍峰紡
+ };
+ },
+ getSelectedStyle(/*item*/) {
+ return {
+ lineWidth: 3, // 閫変腑鐘舵�佷笅鐨勮竟鏍峰紡
+ };
+ },
+ },
+ // 宸ュ叿鎻愮ず鏄剧ず寮�鍏�
+ tooltipShow: true,
+ // 宸ュ叿鎻愮ず鏁版嵁
+ tooltipData: [],
+ // 宸插瓨鍦ㄧ殑鑺傜偣鍜岃竟
+ existNodes: this.chartData.nodes || [],
+ existEdges: this.chartData.edges || [],
+ // 褰撳墠閫変腑鐨勮竟
+ currentSelectedLine: {}
+ };
+ },
+ computed: {
+ disabledBtn() {
+ return this.$store.state.flow.methodBtn;
+ }
+ },
+
+ mounted() {
+ // 缁勪欢鎸傝浇瀹屾垚鍚庯紝鑷姩缂╂斁鐢诲竷锛堜粎鍦ㄦ坊鍔犳ā寮忎笅锛�
+ if (this.type === "add") {
+ this.$nextTick(() => {
+ this.$refs.flowChart.propsAPI.executeCommand("autoZoom");
+ });
+ }
+ },
+
+ methods: {
+ update(){
+ this.$refs.flowChart.propsAPI.read(this.flowChartData);
+ },
+ // 澶勭悊鍥捐〃鏁版嵁鏇存敼鐨勪簨浠�
+ onAfterChange(e) {
+ console.log(e)
+ try {
+ if('edit' === this.$store.state.flow.type){
+ this.$refs.flowChart.propsAPI.remove(e.item);
+ if(e.action === 'remove'){
+ this.$message.error('缂栬緫鐘舵�佷笅涓嶈兘鍒囨崲閫変腑椤癸紒');
+ }
+ return;
+ }
+ // 濡傛灉娣诲姞浜嗚妭鐐逛笖鑺傜偣娌℃湁琚洿鏀硅繃
+ if (e.action === "add" && e.model.type === "node") {
+ if (!e.model.change) {
+ this.$refs.flowChart.propsAPI.remove(e.item); // 绉婚櫎鍘熸湁鐨勮妭鐐�
+ e.model.id = e.model.label; // 浣跨敤鏍囩浣滀负鑺傜偣鐨� ID
+ e.model.change = true;
+ this.$refs.flowChart.propsAPI.add("node", e.model); // 娣诲姞鏂扮殑鑺傜偣
+ }
+ }
+ } catch (err) {
+ console.log(err)
+ // 澶勭悊鑺傜偣 ID 鍐茬獊閿欒
+ if (
+ err.message ===
+ `id:${e.model.label} has already been set, please set new one`
+ ) {
+ this.$message.error("涓嶈兘娣诲姞宸插瓨鍦ㄧ殑鑺傜偣锛�");
+ }
+ }
+ // 淇濆瓨褰撳墠鐨勮妭鐐瑰拰杈规暟鎹�
+ const {nodes, edges} = this.$refs.flowChart.propsAPI.save();
+ this.existNodes = nodes || [];
+ this.existEdges = edges || [];
+ },
+ // 澶勭悊閫変腑绾垮彉鍖栫殑浜嬩欢 鍥炲～褰撳墠绾夸俊鎭�
+ onAfterItemSelected({item}) {
+ if (item.target) {
+ // 鏌ユ壘褰撳墠閫変腑鐨勮竟
+ const currentEdge = this.existEdges.filter(itm => itm.id === item.id)[0] || {};
+ if (!Array.isArray(currentEdge.events)) {
+ currentEdge.events = []
+ }
+ this.currentSelectedLine = currentEdge;
+ }
+ },
+
+ // 涓嬭浇鍥剧墖
+ _downloadImage(data, filename = "flowchart.png") {
+ const a = document.createElement("a");
+ a.href = data;
+ a.download = filename;
+ document.body.appendChild(a);
+ a.click();
+ },
+
+ // 璋冪敤涓嬭浇鍥剧墖鏂规硶
+ downloadImage() {
+ const page = this.$refs["flowChart"].propsAPI.editor.getCurrentPage();
+ this._downloadImage(page.saveImage().toDataURL("image/png"));
+ },
+ // 鑾峰彇鏂扮殑琛屾暟鎹紙浠庤缁嗛潰鏉夸腑锛�
+ getNewRowData() {
+ return this.$refs.EditorDetailPanel.getNewRowDate();
+ },
+ // 鑾峰彇褰撳墠鍥捐〃鐨勬暟鎹�
+ getFlowData() {
+ return this.$refs.flowChart.propsAPI.save();
+ },
+ // 鑾峰彇杈逛簨浠跺垪琛紙浠庤缁嗛潰鏉夸腑锛�
+ getEdgesEvents() {
+ return this.$refs.EditorDetailPanel.edgeEventList;
+ },
+
+ // 璋冪敤鐖剁粍浠堕噸缃�
+ handleResetTree(){
+ this.$emit('reset-tree');
+ },
+ handlerSave(){
+ this.$emit('handler-save')
+ }
+ },
+};
+</script>
+
+<style lang="scss" scoped>
+.vue-flowchart-editor {
+ display: flex;
+ flex: 1;
+ flex-direction: column;
+ width: 100%;
+ height: 100%;
+ background: #fff;
+}
+
+.vfe-chart {
+ position: relative;
+ width: 100%;
+ height: 100%;
+ display: flex;
+ flex-direction: column;
+
+ .vfe-chart-header {
+ border: 1px solid #e6e9ed;
+ padding: 8px;
+ }
+
+ .vfe-chart-container {
+ flex: 1;
+ display: flex;
+ height: 550px;
+ overflow: hidden;
+
+ .vfe-chart-main {
+ position: relative;
+ flex: 1;
+ height: 80vh; // fix scroll show
+ width: 65%;
+
+ .tooltip {
+ position: absolute;
+ display: none;
+ top: 0;
+ left: 0;
+ width: 100px;
+ height: auto;
+ padding: 15px;
+ border-radius: 10px;
+ z-index: 999;
+ opacity: 0.8;
+ color: #ffffff;
+ font-size: 12px;
+ background-color: #000;
+
+ p {
+ margin: 0;
+ }
+ }
+ }
+
+ .vfe-chart-sidebar {
+ margin-top: 10px;
+ position: relative;
+ display: flex;
+ justify-content: center;
+ width: 210px;
+ background-color: #fafafa;
+ border-right: 1px solid #e6e9ed;
+ }
+
+ .vfe-chart-panel {
+ position: relative;
+ width: 260px;
+ background-color: #fafafa;
+ border-left: 1px solid #e6e9ed;
+ overflow-y: scroll;
+
+ .vfe-chart-panel-detail {
+ box-sizing: border-box;
+ padding: 10px;
+ }
+ }
+ }
+}
+</style>
--
Gitblit v1.9.3