<!DOCTYPE html>
<html>
  <head>
    <title>Form Design</title>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, shrink-to-fit=no"
    />
    <style type="text/css">
      #root,
      #root > div {
        display: flex;
        width: 100%;
        height: 100%;
        overflow: hidden;
      }
    </style>
    <link type="text/css" rel="styleSheet" href="path/yrui-flow-editor/dist/index.css" />
  </head>
  <body>
    <div id="root"></div>
    <script
      crossorigin
      src="https://unpkg.com/react@16.4.0/umd/react.production.min.js"
    ></script>
    <script
      crossorigin
      src="https://unpkg.com/react-dom@16.4.0/umd/react-dom.production.min.js"
    ></script>
    <script src="path/yrui-flow-editor/dist/index.js"></script>
    <script>
      const nodesData = [
        {
          size: "80*72",
          shape: "flow-rhombus",
          color: "#13C2C2",
          label: "分叉节点fsd",
          dataType: "rhombus"
        },
        {
          size: "80*48",
          shape: "flow-capsule",
          color: "#722ED1",
          label: "模型节点sdf",
          dataType: "capsule"
        }
      ];
      const nodesAttr = {
        rhombus: [
          {
            type: "textfield",
            label: "单行文本框",
            name: "textfield",
            isRequired: "true",
            errorTip: "请输入"
          }
        ],
        capsule: [
          {
            type: "textfield",
            label: "单行文本框",
            name: "textfield",
            isRequired: "true",
            errorTip: "只支持xyz",
            regex: "[xyz]",
            flags: "i"
          }
        ]
      };
      const edgesAttr = [
        {
          type: "textfield",
          label: "单行文本框",
          name: "textfield",
          isRequired: "true",
          errorTip: "请输入"
        }
      ];
      const aa = new window["yrui-flow-editor"]({
        nodesData: nodesData,
        nodesAttr: nodesAttr,
        edgesAttr: edgesAttr,
        onSave: function(values) {
          console.log(values);
        }
      });
      const domContainer = document.getElementById("root");
      ReactDOM.render(aa.render(), domContainer);
    </script>
  </body>
</html>

using ES6 modules


import "yrui-flow-editor/dist/index.css";
import FlowPage from "yrui-flow-editor";

class App extends Component {
  state = {
    data: {
      nodes: [
        {
          checkbox: ["0"],
          color: "#FA8C16",
          dataType: "circle",
          datepicker: "2019-01-05",
          dropdown: "0",
          id: "63016fd9",
          index: 0,
          label: "起止节点1",
          textfield: "textfieldtextfield",
          radio: "0",
          shape: "flow-circle",
          size: "72*72",
          textareafield: "只需向大V",
          type: "node",
          x: 191.34375,
          y: 158
        },
        {
          color: "#7d69ff",
          dataType: "circle2",
          id: "3fdf6380",
          index: 1,
          label: "起止节点2",
          shape: "flow-circle",
          size: "72*72",
          type: "node",
          x: 547.34375,
          y: 133
        }
      ],
      edges: [
        {
          checkbox: ["1"],
          datepicker: "2019-01-20",
          dropdown: "1",
          id: "2d528056",
          index: 2,
          label: "箭头1",
          textfield: "textfieldtextfield",
          radio: "0",
          shape: "flow-polyline-round",
          source: "63016fd9",
          sourceAnchor: 1,
          target: "3fdf6380",
          targetAnchor: 3,
          textareafield: "水电费水电费"
        }
      ]
    },
    nodesData: [
      {
        size: "72*72",
        shape: "flow-circle",
        color: "#FA8C16",
        label: "起止节点1",
        dataType: "circle"
      },
      {
        size: "72*72",
        shape: "flow-circle",
        color: "#7d69ff",
        label: "起止节点2",
        dataType: "circle2"
      },
      {
        size: "80*48",
        shape: "flow-rect",
        color: "#1890FF",
        label: "常规节点1",
        dataType: "rect"
      },
      {
        size: "80*72",
        shape: "flow-rhombus",
        color: "#13C2C2",
        label: "分叉节点1",
        dataType: "rhombus"
      },
      {
        size: "80*48",
        shape: "flow-capsule",
        color: "#722ED1",
        label: "模型节点1",
        dataType: "capsule"
      }
    ],
    nodesAttr: {
      circle: [
        {
          type: "textfield",
          label: "单行文本框",
          name: "textfield",
          isRequired: "true",
          errorTip: "请输入",
          onChange: (e, form) => {
            const data = this.flowPage.getCanvasData();
            form.setFieldsValue({
              textareafield: e.target.value + data.nodes[0].label
            });
          }
        },
        {
          type: "textareafield",
          label: "多行文本框",
          name: "textareafield",
          isRequired: "true",
          errorTip: "请输入"
        },
        {
          type: "datepicker",
          label: "日期",
          name: "datepicker",
          isRequired: "true"
        },
        {
          type: "checkbox",
          label: "多选框",
          name: "checkbox",
          isRequired: "true",
          options: [
            { label: "Apple", value: "0" },
            { label: "Pear", value: "1" },
            { label: "bananan", value: "2" }
          ]
        },
        {
          type: "radio",
          label: "单选框",
          name: "radio",
          isRequired: "true",
          defaultValue: "0",
          options: [
            { label: "选项一", value: "0" },
            { label: "选项二", value: "1" },
            { label: "选项三", value: "2" }
          ]
        },
        {
          type: "dropdown",
          label: "下拉框",
          name: "dropdown",
          isRequired: "true",
          options: [
            { label: "选项一", value: "0" },
            { label: "选项二", value: "1" },
            { label: "选项三", value: "2" }
          ]
        }
      ],
      rect: [
        {
          type: "textfield",
          label: "单行文本框",
          name: "textfield",
          isRequired: "true"
        }
      ],
      rhombus: [
        {
          type: "textfield",
          label: "单行文本框",
          name: "textfield",
          isRequired: "true",
          errorTip: "请输入"
        }
      ],
      capsule: [
        {
          type: "textfield",
          label: "单行文本框",
          name: "textfield",
          isRequired: "true",
          errorTip: "只支持xyz",
          regex: "[xyz]",
          flags:"i"
        }
      ]
    },
    edgesAttr: [
      {
        type: "textfield",
        label: "单行文本框",
        name: "textfield",
        isRequired: "true",
        errorTip: "请输入"
      },
      {
        type: "textareafield",
        label: "多行文本框",
        name: "textareafield",
        isRequired: "true",
        errorTip: "请输入"
      },
      {
        type: "datepicker",
        label: "日期",
        name: "datepicker",
        isRequired: "true"
      },
      {
        type: "checkbox",
        label: "多选框",
        name: "checkbox",
        isRequired: "true",
        options: [
          { label: "Apple", value: "0" },
          { label: "Pear", value: "1" },
          { label: "bananan", value: "2" }
        ]
      },
      {
        type: "radio",
        label: "单选框",
        name: "radio",
        isRequired: "true",
        defaultValue: "0",
        options: [
          { label: "选项一", value: "0" },
          { label: "选项二", value: "1" },
          { label: "选项三", value: "2" }
        ]
      },
      {
        type: "dropdown",
        label: "下拉框",
        name: "dropdown",
        isRequired: "true",
        options: [
          { label: "选项一", value: "0" },
          { label: "选项二", value: "1" },
          { label: "选项三", value: "2" }
        ]
      }
    ]
  };
  save = values => {
    console.log(values);
  };
  getFlowPage = comp => {
    this.flowPage = comp;
  };
  render() {
    const { data, nodesAttr, nodesData, edgesAttr } = this.state;
    return (
      <FlowPage
        data={data}
        nodesAttr={nodesAttr}
        nodesData={nodesData}
        edgesAttr={edgesAttr}
        onSave={this.save}
        ref={this.getFlowPage}
      />
    );
  }
}
ReactDOM.render(<App />,mountNode);

API

FlowPage

一个流程设计器。

参数	说明	类型	默认值
data	设计器数据。当是函数时，需返回指定格式的数据	object \| function	{ nodes: [], edges: [] }
nodesData	node数据	array \| object	-
nodesAttr	当前node点属性项	object	-
edgesAttr	连接线属性项	array	-
groupsAttr	群组属性项	array	-
otherPanelTitle	底部面板title	string	-
onSave	点击工具栏保存按钮事件	(data)=>void	-
onAfterNodeAdd	节点添加事件，节点增加后触发	({dataMap,model})=>void	-
onAfterNodeRemove	节点删除事件，节点删除后触发	({dataMap,model})=>void	-
onAfterNodeUpdate	节点数据更新事件，在节点属性或位置被更新后触发	({dataMap,originModel,model})=>void	-
onAfterEdgeAdd	连接线添加事件，连接线增加后触发	({dataMap,model,source,target})=>void	-
onAfterEdgeRemove	连接线删除事件，连接线删除后触发	({dataMap,model,source,target})=>void	-
onAfterEdgeUpdate	连接线数据更新事件，在连接线属性或位置被更新后触发	({dataMap,originModel,model,source,target})=>void	-
onDragBeforeShowAnchor	从锚点拖出边后，显示锚点前，可用作控制，要去连的锚点是否显示。	(ev)=>void	-
onBeforeAddEdge	鼠标悬浮锚点后，开启添加边模式前，可用作控制，哪些锚点可添加边	(data)=>void	-
getCanvasDetail	自定义画布属性	function	-
getMultiDetail	自定义多选属性	function	-
showTip	是否展示Node提示信息，为true时，默认展示节点label信息	boolean	false
TipDescFun	自定义Node提示信息	(model)=>ReactNode	-
formItemLayout	label标签布局和输入控件布局样式	object	`{labelCol: {sm: { span: 9 }},wrapperCol: {sm: { span: 15 }}}`

labelCol和wrapperCol详见Form.Item的labelCol和wrapperCol

onDragBeforeShowAnchor

const onDragBeforeShowAnchor=(ev)=>{
  // ev.sourceAnchor  源锚点
  // ev.source        源子项
  // ev.targetAnchor  目标锚点
  // ev.target        目标子项
  ev.cancel = true; // 若设置为 true 则取消显示要去连接的锚点
}

onBeforeAddEdge

const onBeforeAddEdge=()=>{
  // ev.anchor  锚点
  // ev.item    子项
  ev.cancel = true; // 若设置该锚点不会触发连接模式
}

nodesData

可自定义需展示的可拖拽node。有两种数据类型，当数据类型是object时，则代表有分组。

const nodesData={
      "起始节点": [
        {
          size: "72*72",
          shape: "flow-circle",
          color: "#FA8C16",
          label: "起止节点1",
          dataType: "circle"
        },
        {
          size: "72*72",
          shape: "flow-circle",
          color: "#7d69ff",
          label: "起止节点2fff",
          dataType: "circle2"
        }
      ],
      "其他节点": [
        {
          size: "80*48",
          shape: "flow-rect",
          color: "#1890FF",
          label: "常规节点sdfsdf",
          dataType: "rect"
        },
        {
          size: "80*72",
          shape: "flow-rhombus",
          color: "#13C2C2",
          label: "分叉节点1sfsd",
          dataType: "rhombus"
        }
      ]
    }

参数	说明	类型	默认值
dataType	node点类型	string	-
size	大小，格式为50*50	string	-
shape	形状，内部自定义四种形状：flow-circle，flow-rect，flow-rhombus，flow-capsule	string	-
color	颜色	string	-
label	标签名	string	-
src	概览图像路径	string	-

nodesAttr

可拖拽node的自定义属性。

参数	说明	类型	默认值
type	类型，默认有textfield，textareafield，datepicker，checkbox，radio，dropdown	string	-
label	标题	string	-
name	字段名	string	-
defaultValue	默认值	string\|array	-
disabled	是否禁用状态，默认为 false	boolean	false
isRequired	是否必填	string	-
errorTip	错误提示信息	string	-
regex	正则表达式的文本	string	-
flags	正则表达式标志	string	-
render	自定义表单组件	(item,form,model)=> ReactNode	-
placement	放置位置，右边"right"，底部"bottom"	string	"bottom"

edgesAttr

连线的自定义属性。

参数	说明	类型	默认值
type	类型，默认有textfield，textareafield，datepicker，checkbox，radio，dropdown	string	-
label	标题	string	-
name	字段名	string	-
defaultValue	默认值	string\|array	-
disabled	是否禁用状态，默认为 false	boolean	false
isRequired	是否必填	string	-
errorTip	错误提示信息	string	-
regex	正则表达式的文本	string	-
flags	正则表达式标志	string	-
render	自定义表单组件	(item,form,model)=> ReactNode	-

type

node的type默认有textfield(文本框)，textareafield(多行文本框)，datepicker（日期选择框）,checkbox(多选框)，radio(单选框)，dropdown(下拉框)这几种。

textfield

参数	说明	类型	默认值
onChange	输入框内容变化时的回调	function(e:Event,form)	-

textareafield

参数	说明	类型	默认值
onChange	输入框内容变化时的回调	function(e:Event,form)	-

datepicker

mode仅在type为datepicker时可传。

参数	说明	类型	默认值
mode	类型，默认有month，year，week，range	string	-
onChange	时间发生变化的回调	function(dateStrings: string \| [string, string],form)	-

checkbox

当type为checkbox时，可传options。选中的数据格式为['Apple']

参数	说明	类型	默认值
options	格式为`[{ label: 'Apple', value: 'Apple',disabled: false }]` 或函数，当是函数时，需返回指定格式	array \|function	-
fieldNames	自定义 options 中 label value disabled 字段	object	-
onChange	变化时回调函数	function(value,form)	-

radio

当type为radio时，可传options。

参数	说明	类型	默认值
options	格式为`[{ label: 'Apple', value: 'Apple',disabled: false }]` 或函数，当是函数时，需返回指定格式	array \|function	-
fieldNames	自定义 options 中 label value disabled 字段	object	-
onChange	选项变化时的回调函数	function(e:Event,form)	-

当type为radio时，可传options。

参数	说明	类型	默认值
options	格式为`[{ label: 'Apple', value: 'Apple'}]` 或函数，当是函数时，需返回指定格式	array \|function	-
fieldNames	自定义 options 中 label value 字段	object	`{ label: "label", value: "value" }`
mode	为多选或标签	'multiple' \| 'tags'	-
onChange	选中option时调用此函数。当mode为multiple或tags时，value为[string, string]类型，否则，value为string类型	function(value:string \| [string, string],form)	-

Compatibility

该插件支持chrome，firefox最新两个版本。

License

Licensed under the MIT License

Keywords

FAQs

What is yrfe-temp?

Is yrfe-temp well maintained?

Package last updated on 15 Aug 2022

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

yrfe-temp

yrui-flow-editor

Index

Install

使用 npm 或 yarn 安装

浏览器引入

Usage

using Umd build