@lc-bmp/approval-flow

@bmp/approval-flow

审批流视图组件库 — 审批流程时间线、审批操作弹窗，支持跨模块复用。

安装

pnpm add @bmp/approval-flow
# 或
npm install @bmp/approval-flow

前置依赖（peerDependencies）

快速接入（3 步）

第 1 步：全局配置 request

在宿主项目的 main.js 中一次性配置：

import { setupApprovalFlow } from '@bmp/approval-flow'
import request from '@/utils/request'

setupApprovalFlow({ request })

⚠️ request 必须是宿主项目封装好的 axios 实例（支持 .get() / .post() 方法）。 若未配置，组件调用 API 时会抛出错误提示。

第 2 步：合并国际化文案

在宿主项目的 i18n 配置中合并本包的 locale：

// src/locales/zh-CN.js
import approvalZhCN from '@bmp/approval-flow/locale/zh-CN'

export default {
  // ...项目原有的文案
  ...approvalZhCN
}

同理处理 en.js 和 zh-TW.js：

import approvalEn from '@bmp/approval-flow/locale/en'
import approvalZhTW from '@bmp/approval-flow/locale/zh-TW'

如果宿主项目已有 approvalList 相关的国际化 key，可跳过此步，但需确保 key 一致。

第 3 步：在页面中使用

方式 A：弹窗模式（推荐）

<template>
  <div>
    <!-- 你的业务内容 -->
    <bmp-button @click="handleViewFlow(row)">查看审批流程</bmp-button>
  </div>

  <!-- 审批流弹窗 -->
  <ApprovalFlowViewerDialog ref="flowDialogRef" @success="onFlowSuccess" />
</template>

<script setup>
import { ref } from 'vue'
import { ApprovalFlowViewerDialog } from '@bmp/approval-flow'

const flowDialogRef = ref()

const handleViewFlow = (row) => {
  // 打开弹窗，传入流程实例 ID
  flowDialogRef.value.open(row.id)

  // 或自定义弹窗标题
  // flowDialogRef.value.open(row.id, '采购单审批流程')
}

const onFlowSuccess = () => {
  // 审批操作成功后的回调（如刷新列表）
  console.log('审批成功')
}
</script>

方式 B：内嵌模式

将审批流时间线直接嵌入页面（不弹窗）：

<template>
  <ApprovalFlowViewer
    :instance-id="instanceId"
    @loaded="onLoaded"
    @success="onSuccess"
    @error="onError"
  />
</template>

<script setup>
import { ApprovalFlowViewer } from '@bmp/approval-flow'

const instanceId = 'xxx'

const onLoaded = (data) => { console.log('流程数据加载完成', data) }
const onSuccess = () => { console.log('审批操作成功') }
const onError = (err) => { console.error('加载失败', err) }
</script>

组件 API

ApprovalFlowViewerDialog（弹窗组件）

ApprovalFlowViewer（视图组件）

ApprovalActionDialog（审批操作弹窗）

宿主项目需确保的国际化 key

本组件使用了以下 common.* key，需由宿主项目提供：

{
  common: {
    close: '关闭',    // ApprovalFlowViewerDialog 关闭按钮
    cancel: '取消',   // ApprovalActionDialog 取消按钮
    ok: '确定'        // ApprovalActionDialog 确定按钮
  }
}

这些 key 通常在 bmp-layout 或宿主项目的 locales 中已存在，无需额外添加。

构建与发布

# 进入包目录
cd bmp-approval-flow-ui

# 安装依赖
pnpm install

# 构建
pnpm build

# 发布到内部 npm 仓库
npm publish --registry=http://your-internal-registry.com

目录结构

bmp-approval-flow-ui/
├── src/
│   ├── index.js                    # 入口：setupApprovalFlow + 组件导出
│   ├── api/
│   │   ├── requestProxy.js         # request 代理（宿主项目注入）
│   │   ├── processPublic.js        # 公开查询 API
│   │   └── process.js              # 审批操作 API
│   ├── components/
│   │   ├── ApprovalFlowViewer.vue  # 审批流时间线视图
│   │   ├── ApprovalFlowViewerDialog.vue  # 弹窗封装
│   │   └── ApprovalActionDialog.vue      # 审批意见弹窗
│   └── locale/
│       ├── zh-CN.js
│       ├── en.js
│       └── zh-TW.js
├── locale/                         # 构建后供外部导入的 locale
│   ├── zh-CN.js
│   ├── en.js
│   └── zh-TW.js
├── package.json
├── vite.config.js
└── README.md