本项目用 svelte 编写，直接编译成操作原生 dom 的 js 语句，组件和动画也都是纯手写的，不依赖任何库和框架，可以运行在任何项目里,支持 theme。

安装

npm i xm-process

一共两个组件， Buttons 用于展示流程按钮，里面封装了所有流程的操作，Steps 是一个纯展示组件，用于展示流程状态。它们都是一个 js 类，为了使用方便，你应该基于自己的框架把它们封装成组件，以 react 为例：

import React, { useEffect, useRef } from 'react'
import { Buttons as B, Steps as S } from 'xm-process'
import 'xm-process/dist/style.css'

export function Buttons(props) {
  const container = useRef()
  const ins = useRef()

  useEffect(() => {
    ins.current =  new B({
      target: container.current,
      props,
    })
  }, [])

  useEffect(() => {
    ins.current.$set(props)
  }, [props])

  return <span ref={container} />
}

export function Steps(props) {
  const container = useRef()

  useEffect(() => {
    new S({
      target: container.current,
      props,
    })
  }, [])

  return <div ref={container} />
}

组件是不包含任何布局的，你可以按照 ui 要求，自由的使用它们。

基本原理

你的表单只用处理自己的业务逻辑，把一些参数和回调函数传给流程组件，流程组件会处理所有流程相关的业务

流程分开启时和审核中两个阶段，你需要在流程引擎的外接表单里注册你的表单模型以及表单启动和审核链接，流程运行过程中会产生待办，点击待办会跳到你注册的链接，并把流程和表单的相关参数带上，你把它们取到传给组件即可。

一般要实现两个页面，一个用于流程的开启，一个用于流程的审核，它们的传参是完全不一样的。并且大部分情况下，表单在启动时是全部可写，审核阶段是全部只读，分两个页面你可以把表单权限写死，不必去读表单权限去做复杂设置。

启动阶段最重要的参数是procKey,流程的标识；审核阶段最重要的是userTaskId,用户任务的标识。

启动阶段

• appId 必传 应用的 id, 你无需关心，只需从路径上取到传给组件即可。

• procKey 必传 流程定义的 key, 你无需关心，只需从路径上取到传给组件即可。

• setFormAccess 非必传 流程可以控制表单字段的读写权限，所以你需要传给组件一个设置权限的函数，它会在拉取到配置后调用这个函数。字段权限分为 'WRITE'(可写), 'READ'(只读)， 'NONE'(隐藏) 入参的格式为:{[key: string]: 'WRITE' | 'NONE' | 'READ'}, 如{a: 'WRITE', b: 'NONE', c: 'READ'}， 注意：如果为空，代表所有字段只读, 你需要设置所有字段为只读。

• onSubmit 必传 驱动流程的顺序为你先把表单提交给自己的业务方，之后再去驱动流程。驱动流程时需要给流程表单的值和表单数据的 id。

• btnDefaultClass, btnPrimaryClass 非必传 有可能会有自己业务的操作按钮，它们通常放在一排 为了保持按钮样式统一，需要把 button 的样式传给组件，它们的默认值是'ant-btn'和 'ant-btn ant-btn-primary'，所以在 antd 框架下是不用传的。

• baseURL 非必传 不同的环境要走不同的网关，这需要传不同的 baseURL, 目前如果在前台使用，是不需要传的，如果要在后台发流程需要传值为 /wfadmin

• successTexts 非必传 提交成功后的弹出消息的文案，有可能你的业务要定制，分启动和审核两个文案，所以是一个数组，默认值是 ['提交成功，流程已启动', '已提交审核']

• onFinish 非必传 提交结束后你可能关闭弹窗，或者离开页面，可以把逻辑传给这个函数

<Buttons
  baseURL="/wfadmin"
  appId="1"
  procKey="a"
  setFormAccess={({ a, b, c }) => {
    // 设置表单的权限
  }}
  onSubmit={async () => {
    // 先调用你的业务接口保存表单
    const id = await yourOwnApi(values)
    // 把id和表单数据返回以驱动流程
    return {id, values}
    // id 是数据的唯一标识，比如一条新闻的id，values是表单数据，表单数据规范见下方
  }}
  onFinish={() => console.log('已提交，等待审核’)}
/>

表单数据规范

为什么要提交表单数据给流程？因为表单里很多字段是要驱动流程的，比如某些字段可能要作为分支的条件，某些字段要作为提交人，某些字段要标识流程的紧急程度。所以，你不必把流程不关心的字段传过来(比如富文本)，只需传流程需要的。目前流程需要传的是

• _dept 必填 格式{label, value}, 发起人部门，发起人可能在多个部门，需要发起人确认下自己部门，这样流程才能获取他的上下级。应该是一个 Select 选择框。

• _taskLevel, 非必填 应该是一个 Select, options 为 [{label: '特急', value: 1},{label: '急件', value: 2},{label: '一般', value: 1},]。

审核阶段

• userTaskId 必传 用户任务的 id, 你无需关心，只需从路径上取到传给组件。

<Steps userTaskId="1" />
// 如果你需要展示流程状态，就需要这个组件。

<Buttons
  userTaskId="1"
  setFormAccess={({ a, b, c }) => {
    // 设置表单的权限
  }}
  onSubmit={async () => {
    // 先调用你的业务接口保存表单
    const id = await yourOwnApi(values)
    // 把id和表单数据返回以驱动流程， values 为表单的值, 审核时只返回values即可
    return { values}
  }}
/>

路径里额外的参数

• procFormDataKey 这是数据的唯一标识，你可以在路径里拿到。因为在表单审核过程中，需要回填表单数据。比如一条新闻，你在流程启动的时把这条新闻的 id 传给了流程，这时流程会再把 id 以这个参数 给你，你用它来拉取新闻数据。

• procFormKey (系统表单会用到) 如果是系统表单，路径里还会额外带这个参数，这时表单定义的 key，你需要用它来拉取表单 schema 。