采用技术

antv x6 + vue3 + vite

安装

npm i shy-flow-x6

引入

//main.js
import ShyFlow from "shy-flow-x6/dist/shy-flow-x6.es";
import "shy-flow-x6/dist/style.css";
//or
import ShyFlow from "shy-flow-x6/lib/index";
const app = createApp(App);
app.use(ShyFlow);

使用

<!-- .vue -->
<ShyFlow ref="ShyFlowRef" :hasBaseNode="true" :customNodeList="customNodeList" :initData="initData"></ShyFlow>

//通过ref能获取画布实例，ShyFlowRef.value.graphEl.toJSON()导出当前画布节点json
hasBaseNode; //是否显示基础节点
initData; //需要渲染的初始数据
graphCustomConfig; //画布配置项，和antv x6一样
customNodeList = [
  {
    name: "event", //必填 最好不要重名，方便后端判断
    nodeAttrs: {
      headText: "事件名称", //初始头部值
      bodyText: "事件内容", //初始内容值
      bgColor: "#EE7E03", //自定义背景颜色
    },
    columns: [
      {
        type: "input",
        label: "事件名称",
        prop: "eventName",
        isNodeHead: true, //必选  判断节点头部显示字段
      },
      {
        type: "textarea",
        label: "事件内容",
        prop: "eventContent",
        isNodeBody: true, //必选  判断节点内容显示字段
      },
    ],
  },
];

//columns表单项配置
const columnItem = {
  label: e.label,
  prop: e.prop,
  type: e.type || "input",
  value: e.value,
  selectMode: e.selectMode, //'multiple' | 'tags' | 'combobox'
  dicData: e.dicData,
  dicProp: e.dicProp,
  min: e.min,
  max: e.max,
  rules: e.rules,
};