Source/UBCS-WEB/src/components/flow-cycle/flowchartEditor.vue

@@ -14,7 +14,11 @@
        </div>
        <!-- Main Chart -->
        <div class="vfe-chart-main">
          <flow :data="flowChartData" :onAfterChange="onAfterChange" />
          <flow
            :data="flowChartData"
            :onAfterChange="onAfterChange"
            :onAfterItemSelected="onAfterItemSelected"
          />
          <div class="tooltip">
            <template v-for="item in tooltipData">
              <p>{{ item.name }}: {{ item.value }}</p>
@@ -23,7 +27,14 @@
        </div>
        <div class="vfe-chart-panel" v-if="type !== 'detail'">
          <div class="vfe-chart-panel-detail">
            <editor-detail-panel :rowData="rowData" ref="EditorDetailPanel" />
            <editor-detail-panel
              :rowData="rowData"
              ref="EditorDetailPanel"
              :existNodes="existNodes"
              :existEdges="existEdges"
              :currentSelectedLine="currentSelectedLine"
              :type="type"
            />
          </div>
        </div>
      </div>
@@ -83,6 +94,9 @@
      },
      tooltipShow: true,
      tooltipData: [],
      existNodes: this.chartData.nodes || [],
      existEdges: this.chartData.edges || [],
      currentSelectedLine: {}
    };
  },

@@ -95,25 +109,7 @@
  },

  methods: {
    // onAfterChange(e) {
    //   const model = e.model
    //   console.log(JSON.parse(JSON.stringify(e)));
    //   if (!model.change) {
    //     model.id = model.label
    //     model.change = true
    //   } else {
    //     return
    //   }
    //   const { nodes } = this.$refs.flowChart.propsAPI.save()
    //   if (Array.isArray(nodes) && nodes.length > 0) {

    //   } else {
    //     this.$refs.flowChart.propsAPI.add("node", model);
    //   }
    //   throw '禁止原生新增方法'
    // },
    onAfterChange(e) {
      console.log(e);
      try {
        if (e.action === "add" && e.model.type === "node") {
          if (!e.model.change) {
@@ -131,7 +127,21 @@
          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] || {}
        console.log(currentEdge, 'currentEdgecurrentEdge');
        if (!Array.isArray(currentEdge.events)) {
          currentEdge.events = []
        }
        this.currentSelectedLine = currentEdge
      }
    },

    _downloadImage(data, filename = "flowchart.png") {
      const a = document.createElement("a");
      a.href = data;
@@ -150,6 +160,9 @@
    getFlowData() {
      return this.$refs.flowChart.propsAPI.save();
    },
    getEdgesEvents() {
      return this.$refs.EditorDetailPanel.edgeEventList;
    }
  },
};
</script>
@@ -221,6 +234,7 @@
      width: 300px;
      background-color: #fafafa;
      border-left: 1px solid #e6e9ed;
      overflow-y: scroll;

      .vfe-chart-panel-detail {
        box-sizing: border-box;