前端引入vue-super-flow流程图插件

bash 复制代码

npm install vue-super-flow

javascript 复制代码

<template>
  <div class="super-flow-base-wrap">
    <super-flow
      ref="superFlow"
      :node-list="nodeList"
      :link-list="linkList"
      :origin="origin"
      :draggable="false"
      :linkAddable="false"
      :linkEditable="false">
      <template v-slot:node="{ meta }">
        <div :class="`flow-node flow-node-${meta.prop}`">
          <header class="ellipsis">
            <div>{{ meta.a1 }}</div>
            <div>
              编号：<span class="link-text" @mousedown.stop @click="handleClick('123')">{{ meta.a2 }}</span>
            </div>
          </header>
          <section>
            <div>单据类型：{{ meta.a3 }}</div>
            <div>单据日期：{{ meta.a4 }}</div>
            <div>
              创建人员：{{ meta.a5 }}<span>{{ "(" + meta.a6 + ")" }}</span>
            </div>
          </section>
        </div>
      </template>
    </super-flow>
  </div>
</template>

<script>
import SuperFlow from "vue-super-flow";
import "vue-super-flow/lib/index.css";

export default {
  data() {
    return {
      origin: [0, 0],
      nodeList: [],
      linkList: [],
    };
  },
  components: {
    SuperFlow,
  },
  created() {
    const nodeList = [
      {
        id: "node1",
        width: 280,
        height: 150,
        coordinate: [200, 500],
        meta: {
          a1: "采购申请单",
          a2: "CGSQ20250725003",
          a3: "原材料申购",
          a4: "2025-07-06",
          a5: "小明",
          a6: "A00123",
        },
      },
      {
        id: "node2",
        width: 280,
        height: 150,
        coordinate: [600, 500],
        meta: {
          a1: "采购订单",
          a2: "CGDD20250725003",
          a3: "原材料采购",
          a4: "2025-08-02",
          a5: "小明",
          a6: "A00123",
        },
      },
      {
        id: "node3",
        width: 280,
        height: 150,
        coordinate: [1000, 200],
        meta: {
          a1: "采购订单变更单",
          a2: "CGDD20250725003",
          a3: "原材料采购变更",
          a4: "2025-08-03",
          a5: "小明",
          a6: "A00123",
        },
      },
      {
        id: "node4",
        width: 280,
        height: 150,
        coordinate: [1000, 800],
        meta: {
          a1: "采购收货单",
          a2: "CGSQ20250725003",
          a3: "原材料采购收货",
          a4: "2025-08-05",
          a5: "小米",
          a6: "A00790",
        },
      },
      {
        id: "node5",
        width: 280,
        height: 150,
        coordinate: [1400, 800],
        meta: {
          a1: "采购退货单",
          a2: "CGSQ20250725003",
          a3: "原材料采购退货",
          a4: "2025-08-09",
          a5: "小米",
          a6: "A00790",
        },
      },
    ];
    const linkList = [
      {
        id: "l1",
        startId: "node1",
        endId: "node2",
        startAt: [200, 50], // 连接线规则官网没有描述，大概了解第一个是控制左右的(小于等于100从左边开始, 大于100从右边开始)
        endAt: [0, 50],
        meta: null,
      },
      {
        id: "l2",
        startId: "node2",
        endId: "node3",
        startAt: [300, 50],
        endAt: [0, 50],
        meta: null,
      },
      {
        id: "l3",
        startId: "node2",
        endId: "node4",
        startAt: [300, 50],
        endAt: [0, 50],
        meta: null,
      },
      {
        id: "l4",
        startId: "node4",
        endId: "node5",
        startAt: [300, 50],
        endAt: [0, 50],
        meta: null,
      },
    ];
    setTimeout(() => {
      this.nodeList = nodeList;
      this.linkList = linkList;
    }, 100);
  },
  mounted() {},
  methods: {
    handleClick(val) {
      console.log(val, "点击了");
    },
  },
};
</script>

<style lang="scss" scoped>
.ellipsis {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  word-wrap: break-word;
}

.super-flow-base-wrap {
  width: 100%;
  height: 100%;
  margin: 0 auto;
  background-color: #f5f5f5;
  overflow: scroll;

  .super-flow {
    width: 2000px;
    height: 1080px;
  }

  .super-flow__node {
    .flow-node {
      > header {
        font-size: 14px;
        line-height: 24px;
        padding: 5px 8px;
        color: #ffffff;
        background: #60a0fd;
      }

      > section {
        font-size: 14px;
        line-height: 22px;
        padding: 6px 8px;
        word-break: break-all;
        margin-bottom: 5px;
      }
      .link-text {
        cursor: pointer;
      }
    }
  }
}
</style>

有个小问题slot 插槽的点击事件第一次监听不到，第二次才能触发

原因：click事件和节点拖动事件冲突了，需要在 click 事件上的节点上阻止 mousedown 事件的触发@mousedown.stop

效果图

官网：Vue super flow快速方便实现流程图https://caohuatao.github.io/

这世界很喧嚣，做你自己就好