---
title: 流程设计器
order: 1
---

在 BPMN 编辑器的基础上封装的流程设计器，除了 BPMN 的 XML 外，有流程模型的概念，包含流程 code、version、applyType、resourceType 以及 status 等。

支持节点业务属性配置。

```jsx
import React, { useRef } from "react";
import ReactDOM from "react-dom";
import { Button, Message } from "@alifd/next";
import { ProcessDesigner } from "@alibsp/process-designer-cq";

//======= 仅限 demo 时需要单独引，项目中应有包括样式，不需要使用组件时单独引 ======
import "@alifd/next/index.css";
//=======

const processData = {
  code: "mock-code",
  version: "mock-version",
  applyType: "mock-apply-type",
  resourceType: "mock-resource-type",
  // confog: '<?xml .....', // 没配置则使用内置的默认初始值
};

function ProcessLineConfig(props) {
  return (
    <div>
      <p>props</p>
      <pre>{JSON.stringify(props, null, 2)}</pre>
    </div>
  );
}

// 流程自定义属性配置
const additionalProperties = [
  {
    type: "bizButton",
    group: "general",
    id: "biz-line",
    label: "线规则配置",
    targetType: "bpmn:SequenceFlow",
  },
  {
    type: "bizButton",
    group: "general",
    id: "biz-complete-strategy",
    label: "完成策略配置",
    targetType: "bpmn:UserTask",
  },
  {
    type: "bizButton",
    group: "general",
    id: "biz-complete-strategy",
    label: "完成策略配置",
    targetType: "bpmn:ServiceTask",
  },
];

// 自定义业务属性映射配置组件
const bizSettingsMap = {
  // 使用自定义组件
  "biz-line": {
    comp: ProcessLineConfig,
  },
  // 使用 iframe
  "biz-complete-strategy": {
    url: "https://taobao.com?propertyId=${propertyId}&code=${process.code}&version=${process.version}",
  },
};

async function save(data) {
  console.log("save", data);
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve();
    }, 1000);
  });
}

function App() {
  const modelerRef = useRef();

  const handleSave = async () => {
    const xml = await modelerRef.current?.getXML();

    Message.loading();

    await save({
      ...processData,
      xml,
    });

    Message.success("已保存");
  };

  const handleOutput = () => {
    modelerRef.current?.savePdf("name");

  }

  return (
    <div style={{ height: 1000 }}>
      <div>
        <Button type="primary" onClick={handleSave}>
          保存
        </Button>
        <Button type="primary" onClick={handleOutput}>
          导出
        </Button>
      </div>
      <ProcessDesigner
        ref={modelerRef}
        process={processData}
        additionalProperties={additionalProperties}
        bizSettingsMap={bizSettingsMap}
        onSave={(callback) => {
          console.log("先保存");
          callback && callback();
        }}
      />
    </div>
  );
}

ReactDOM.render(<App />, mountNode);
```