sop-pro

SOP 业务公共组件, 相比@fruits-chain/dashu-sop组件, 内部对 SOP 模板、答案、暂 存、等功能进行了封装, 并内置了 loading、error 等状态下的 UI

使用

yarn add @fruits-chain/dashu-sop-pro @fruits-chain/dashu-sop @fruits-chain/dashu-upload

请确保项目安装了上述包中peerDependencies列出的所有三方包，并仔细检查版本。

API

Form

SOP 表单组件

使用

import React from "react"
import { Form, useSopRef } from "@fruits-chain/dashu-sop-pro"

const Demo = () => {
  const sopFormRef = useSopRef()
  return (
    <Form
      ref={sopFormRef}
      title={"每个模板的title"} // 可以为render函数
      uuid={"全局唯一id"} // 推荐由路由+业务id+操作类型组成
      businessId={"业务id"}
      sopIds={"SOP ID组成的数组"}
    />
  )
}

Preview

SOP 预览组件

使用

import React from "react"
import { Preview } from "@fruits-chain/dashu-sop-pro"

const Demo = () => {
  return (
    <Preview
      title={"每个模板的title"}
      businessId={"业务id"}
      sopIds={"SOP ID组成的数组"}
    />
  )
}

useSopRef

创建Form组件的ref, 组件内部通过ref向外暴露了部分API

form

SopForm表单form属性实例

requestTempSave

请求暂存, 返回一个Promise<bool>对象, 成功结果为true, 失败结果为false

requestSave

请求保存修改后的数据, 返回一个Promise<bool>对象, 成功结果为true, 失败结果 为false

clear

清除当前表单内后台上传存储的本地资源，比如当用户已经将数据同步到后端后，应该手 动调用此方法

refresh

刷新 SOP 模板及答案的数据

usePreviewRef

refresh

刷新 SOP 模板及答案的数据