pg-formmarker

NPM SCRIPT

npm run start

本地项目演示运行

npm run build

发布 npm 打包构建

npm publish

发布 npm 仓库

• 审批等线性流程创建器
• 表单创建器

流程图组件使用

1. 下载安装

  npm install pg-frommarker

2. 引入使用

  import { Flow } from 'pg-formmarker'
  const flowRef = useRef();
  <Flow
    data={initData},
    onChange={fun(data,flatData)},
    onSelect={fun(id,items)},
    ref={flowRef}
    disable={true}
    nodeEnum={nodeEnum}
  ></Flow>

  flowRef.current.changeItem(id, items);

4. 相关 api

• data 初始化数据

{
  "nodeType":"start",
  "name":"发起人",
  "nodeId":"sid-startevent",
  "content:" 节点显示内容"，
  "prevId":"",
  "properties":{}
}

• 数据发生改变的回调 onChange
  • 回调参数 data 为 json 嵌套数据结构
  • 回调参数 flatData 为拍平节点和连线分离的数组结构
• 选中节点回调 onSelect
  • 回调参数 id, 选中节点 id
  • 回调参数 items， 选中节点的相关数据
• 获取组件实例 ref （新增）
  • 通过 ref 可以获取 low 组件实例
• 修改节点属性的方法 changeItem （新增）
  • 通过 ref 进行调用
  • 参数 id, 修改节点 id
  • 参数 items， 修改节点属性 （参考 onSelect 返回数据）
• 禁用添加节点功能 disable
  • 通过设置 disable 属性为 true
• 覆盖默认创建节点信息 nodeEnum
  • 仅支持以下类型覆盖
  • 建议仅修改 节点名字和初始内容

  const initNodeEnum = {
    start: {
      color: 'rgb(87, 106, 149)',
      name: '发起人',
      nodeType: 'start',
      content: '请选择发起人',
      icon: '',
    },
    approver: {
      color: 'rgb(255, 148, 62)',
      name: '处理人',
      content: '请选择处理人',
      nodeType: 'approver',
      icon: '',
    },
    notifier: {
      color: 'rgb(50, 150, 250)',
      name: '抄送人',
      nodeType: 'notifier',
      content: '请选择抄送人',
      icon: '',
    },
    service: {
      color: 'green',
      name: '系统处理',
      content: '请选择处理方式',
      nodeType: 'service',
      icon: '',
    },
  };

表单创建器组件

import { FormMarker, FormPreView } from 'pg-formmarker';
<FormMarker list={list} onChange={(data) => {}} customData={data} />;
// 预览
<FormPreView list={list}/> 

Api

1. list Array 模拟器初始化数据
2. onChange function 数据修改后触发回调
3. customData 默认提供多种组件类型，如果需要自定义 通过 customData 属性设置

const customData = [
  {
    name: '基础组件',
    key: 'basic',
    data: [
      { name: '单行文本', canUse: true, type: 'InputJson' },
      { name: '多行文本', canUse: true, type: 'TextareaJson' },
      { name: '数字输入框', canUse: true, type: 'NumberJson' },
      { name: '单选框', canUse: true, type: 'RadioJson' },
      { name: '多选框', canUse: true, type: 'CheckboxJson' },
      { name: '日期', canUse: true, type: 'DateJson' },
      { name: '日期区间', canUse: true, type: 'DateIntervalJson' },
      { name: '位置', canUse: true, type: 'LocationJson' },
      { name: '金额', canUse: true, type: 'MoneyJson' },
      { name: '图片', canUse: true, type: 'ImgJson' },
      { name: '附件', canUse: true, type: 'AdjunctJson' },
      { name: '签名', canUse: true, type: 'SignJson' },
      { name: '说明文字', canUse: true, type: 'ExplainJson' },
      { name: '评分', canUse: true, type: 'GradeJson' },
      // { name: '标签选择器', canUse: true, type: 'LabelSelectJson' },
      { name: '计数器', canUse: true, type: 'StepJson' },
      { name: '图片', canUse: true, type: 'UploadJson' },
    ],
  },
  {
    name: '工单套件',
    key: 'workorder',
    data: [
      { name: '工单套件', type: 'WorkOrderJson', tag: 'suite' },
      { name: '回答套件', type: 'AnswerJson', tag: 'suite' },
      { name: '啥也不是', type: 'InputJson', tag: 'suite' },
    ],
  },
  {
    name: '自定义组件',
    key: 'custom',
    data: [],
  },
];

功能介绍

• 页面引入即可生成 表单创建模板
• 支持拖拽创建组件
• 支持拖拽调整组件顺序
• 支持内置普通组件库和自定义组件库
• 支持修改组件属性
• 支持表单组件获取 通过 onChange 回调参数
• 支持模拟预览功能

G6 绘制流程图

功能去除