BizProcess 审批流程

审批详情页两件套：节点条（发起 → 审批 → …，水平 / 垂直两种方向，状态着色 + running 呼吸动画，节点可带说明 / 处理人 / 时间）+ 审批记录时间线（opinions 非空时自动渲染，复用 BizTimeline，审批结果映射节点颜色与徽标）。节点内容支持三层插槽接管，单条意见亦可自定义。

基础用法

发起申请事假 3 天处理人：王小明2026-09-19 17:20

组长审批处理人：张组长2026-09-20 10:24

部门经理审批出差中，预计今日处理处理人：李经理

人事备案处理人：人事-赵姐

完成

审批记录

• 张组长同意

  情况属实，同意休假，注意交接。

  2026-09-20 10:24
• 李经理驳回

  项目上线关键期，建议延后一周再休。

  2026-09-20 15:47
• 李经理同意

  上线完成后同意休假 3 天。

  2026-09-21 09:12

节点字段：name / status / description / operator / time；节点状态 wait 灰 / running 主题色呼吸 / success 绿 / rejected 红；opinions-title 控制记录区标题（传空串隐藏）。

<script setup lang="ts">
/** 基础用法：请假审批详情——节点带 说明/处理人/时间，审批记录时间线（同意/驳回自动着色） */
import { ref } from 'vue'
import { BizProcess } from 'vue3-ep-biz-lib'
import type { BizProcessNode, BizProcessOpinion } from 'vue3-ep-biz-lib'

const nodes = ref<BizProcessNode[]>([
  { name: '发起申请', status: 'success', operator: '王小明', time: '2026-09-19 17:20', description: '事假 3 天' },
  { name: '组长审批', status: 'success', operator: '张组长', time: '2026-09-20 10:24' },
  { name: '部门经理审批', status: 'running', operator: '李经理', description: '出差中，预计今日处理' },
  { name: '人事备案', status: 'wait', operator: '人事-赵姐' },
  { name: '完成', status: 'wait' },
])

/** result 为「同意 / 驳回」时时间线自动着色；自定义结果文案可用 opinion-status-map 扩展 */
const opinions = ref<BizProcessOpinion[]>([
  { author: '张组长', content: '情况属实，同意休假，注意交接。', time: '2026-09-20 10:24', result: '同意' },
  { author: '李经理', content: '项目上线关键期，建议延后一周再休。', time: '2026-09-20 15:47', result: '驳回' },
  { author: '李经理', content: '上线完成后同意休假 3 天。', time: '2026-09-21 09:12', result: '同意' },
])
</script>

<template>
  <BizProcess :nodes="nodes" :opinions="opinions" opinions-title="审批记录" />
</template>

显示代码

插槽与垂直布局

1

提交采购单处理人：采购部-陈晨

2

预算校验命中预算 12,800 元 ≤ 限额处理人：系统自动

3

财务审批处理人：财务-周会计

总经理审批 大额总经理

流转记录（垂直布局 + 自定义结果映射）

• 财务-周会计转交 · 2026-09-20 16:02

  发票信息齐全，等待预算科目确认。

  2026-09-20 16:02
• 采购部-陈晨补充材料 · 2026-09-19 11:40

  已补充供应商资质扫描件。

  2026-09-19 11:40

direction="vertical" 纵向排布；三层插槽优先级 node-<index> 具名 > node 通用 > 默认渲染（示例中第 4 个节点用具名插槽加大额标签，其余走通用插槽自定义圆点为序号）；opinion-status-map 扩展「转交 / 补充材料」等自定义结果；opinion 插槽接管单条意见展示。

<script setup lang="ts">
/** 进阶：垂直布局 + 三层插槽接管（node-0 具名 > node 通用 > 默认）+ opinion 插槽自定义意见 */
import { ElIcon, ElTag } from 'element-plus'
import { Wallet } from '@element-plus/icons-vue'
import { BizProcess } from 'vue3-ep-biz-lib'
import type { BizProcessNode, BizProcessOpinion } from 'vue3-ep-biz-lib'

const nodes: BizProcessNode[] = [
  { name: '提交采购单', status: 'success', operator: '采购部-陈晨', time: '2026-09-18 09:30' },
  { name: '预算校验', status: 'success', operator: '系统自动', time: '2026-09-18 09:30', description: '命中预算 12,800 元 ≤ 限额' },
  { name: '财务审批', status: 'running', operator: '财务-周会计' },
  { name: '总经理审批', status: 'wait', operator: '总经理', description: '金额 > 10 万时触发' },
]

const opinions: BizProcessOpinion[] = [
  { author: '财务-周会计', content: '发票信息齐全，等待预算科目确认。', time: '2026-09-20 16:02', result: '转交' },
  { author: '采购部-陈晨', content: '已补充供应商资质扫描件。', time: '2026-09-19 11:40', result: '补充材料' },
]
</script>

<template>
  <div style="display: flex; flex-direction: column; gap: 32px">
    <!-- 垂直布局 + 自定义结果映射 + opinion 插槽 -->
    <BizProcess
      direction="vertical"
      :nodes="nodes"
      :opinions="opinions"
      opinions-title="流转记录（垂直布局 + 自定义结果映射）"
      :opinion-status-map="{
        转交: { type: 'warning', text: '转交' },
        补充材料: { type: 'primary', text: '补材' },
      }"
    >
      <!-- 具名插槽：只接管第 4 个节点（总经理审批），加风险标签 -->
      <template #node-3="{ node }">
        <span class="biz-process__dot">
          <ElIcon :size="16"><Wallet /></ElIcon>
        </span>
        <div class="biz-process__info">
          <span class="biz-process__name">{{ node.name }} <ElTag size="small" type="warning">大额</ElTag></span>
          <span class="biz-process__meta">{{ node.operator }}</span>
        </div>
      </template>
      <!-- 通用插槽：其余节点在默认渲染外附加一行提示 -->
      <template #node="{ node, index }">
        <span class="biz-process__dot">{{ index + 1 }}</span>
        <div class="biz-process__info">
          <span class="biz-process__name">{{ node.name }}</span>
          <span v-if="node.description" class="biz-process__desc">{{ node.description }}</span>
          <span v-if="node.operator" class="biz-process__meta">处理人：{{ node.operator }}</span>
        </div>
      </template>
      <!-- 意见插槽：自定义单条意见展示 -->
      <template #opinion="{ opinion }">
        <div>
          <b>{{ opinion.author }}</b>
          <span style="margin-left: 8px; font-size: 12px; color: var(--el-text-color-placeholder)">{{ opinion.result }} · {{ opinion.time }}</span>
          <div style="font-size: 13px; color: var(--el-text-color-secondary)">{{ opinion.content }}</div>
        </div>
      </template>
    </BizProcess>
  </div>
</template>

显示代码

订单审批流与节点点击

提交订单金额 ¥58,000处理人：张三09-23 10:02

部门审批处理人：李经理09-23 10:15

财务复核大额触发复核处理人：王会计

出库发货

点击任一节点查看处理详情（node-click 携带 node / index；插槽内按钮等交互可在内部 @click.stop 避免冒泡）

审批流场景：running 节点呼吸态提示进行中；node-click 携带 node / index，点击节点在下方查看该节点处理详情（表单快照 / 处理人 / 时间）。

<script setup lang="ts">
/** 场景：订单审批流——node-click 查看节点处理详情 */
import { ref } from 'vue'
import { ElDescriptions, ElMessage } from 'element-plus'
import { BizProcess } from 'vue3-ep-biz-lib'
import type { BizProcessNode } from 'vue3-ep-biz-lib'

const nodes: BizProcessNode[] = [
  { name: '提交订单', status: 'success', operator: '张三', time: '09-23 10:02', description: '金额 ¥58,000' },
  { name: '部门审批', status: 'success', operator: '李经理', time: '09-23 10:15' },
  { name: '财务复核', status: 'running', operator: '王会计', description: '大额触发复核' },
  { name: '出库发货', status: 'wait' },
]

const activeNode = ref<BizProcessNode | null>(null)

const onNodeClick = (node: BizProcessNode, index: number): void => {
  activeNode.value = node
  ElMessage.info(`点击了第 ${index + 1} 步「${node.name}」`)
}
</script>

<template>
  <div style="max-width: 560px">
    <BizProcess :nodes="nodes" :node-width="110" @node-click="onNodeClick" />

    <ElDescriptions
      v-if="activeNode !== null"
      :title="`节点详情：${activeNode.name}`"
      :column="2"
      size="small"
      border
      style="margin-top: 20px"
    >
      <ElDescriptions.Item label="状态">{{ activeNode.status ?? '—' }}</ElDescriptions.Item>
      <ElDescriptions.Item label="处理人">{{ activeNode.operator ?? '—' }}</ElDescriptions.Item>
      <ElDescriptions.Item label="时间">{{ activeNode.time ?? '—' }}</ElDescriptions.Item>
      <ElDescriptions.Item label="说明">{{ activeNode.description ?? '—' }}</ElDescriptions.Item>
    </ElDescriptions>

    <div v-else style="margin-top: 16px; font-size: 13px; color: var(--el-text-color-secondary)">
      点击任一节点查看处理详情（node-click 携带 node / index；插槽内按钮等交互可在内部 @click.stop 避免冒泡）
    </div>
  </div>
</template>

显示代码

OA 请假审批

发起申请年假 2 天（10-09 ~ 10-10）处理人：赵六09-23 09:05

直属上级处理人：钱经理09-23 09:31

人事备案处理人：孙专员

完成

审批记录

• 钱经理同意

  已知悉，注意 10 月发版窗口前完成交接。

  09-23 09:31
• 孙专员待处理

  核对年假余额中…

  09-23 09:40

请假场景：流程节点与审批记录 opinions 时间线同屏联动——节点看进度、时间线看意见。

<script setup lang="ts">
/** 场景：OA 请假审批——流程节点 + 审批记录时间线联动 */
import { BizProcess } from 'vue3-ep-biz-lib'
import type { BizProcessNode, BizProcessOpinion } from 'vue3-ep-biz-lib'

const nodes: BizProcessNode[] = [
  { name: '发起申请', status: 'success', operator: '赵六', time: '09-23 09:05', description: '年假 2 天（10-09 ~ 10-10）' },
  { name: '直属上级', status: 'success', operator: '钱经理', time: '09-23 09:31' },
  { name: '人事备案', status: 'running', operator: '孙专员' },
  { name: '完成', status: 'wait' },
]

const opinions: BizProcessOpinion[] = [
  { author: '钱经理', result: '同意', content: '已知悉，注意 10 月发版窗口前完成交接。', time: '09-23 09:31' },
  { author: '孙专员', result: '待处理', content: '核对年假余额中…', time: '09-23 09:40' },
]
</script>

<template>
  <div style="max-width: 560px">
    <BizProcess :nodes="nodes" :opinions="opinions" :node-width="104" opinions-title="审批记录" />
  </div>
</template>

显示代码

采购审批（金额分支）

采购申请伺服电机 ×12处理人：采购部-周七09-22 16:20

部门负责人处理人：吴总监09-22 17:05

财务加签（>5万）金额 ¥86,400 触发加签处理人：郑会计

总经理审批

供应商发货

垂直布局适合嵌在详情页侧栏；加签节点由业务侧按金额分支动态拼装 nodes

审批场景：金额超 5 万触发财务加签节点，vertical 垂直布局嵌入详情页侧栏。

<script setup lang="ts">
/** 场景：采购审批（金额分支）——大于 5 万自动加签财务，垂直布局 */
import { BizProcess } from 'vue3-ep-biz-lib'
import type { BizProcessNode } from 'vue3-ep-biz-lib'

const nodes: BizProcessNode[] = [
  { name: '采购申请', status: 'success', operator: '采购部-周七', time: '09-22 16:20', description: '伺服电机 ×12' },
  { name: '部门负责人', status: 'success', operator: '吴总监', time: '09-22 17:05' },
  { name: '财务加签（>5万）', status: 'running', operator: '郑会计', description: '金额 ¥86,400 触发加签' },
  { name: '总经理审批', status: 'wait' },
  { name: '供应商发货', status: 'wait' },
]
</script>

<template>
  <div style="max-width: 360px">
    <BizProcess :nodes="nodes" direction="vertical" />
    <div style="margin-top: 12px; font-size: 13px; color: var(--el-text-color-secondary)">
      垂直布局适合嵌在详情页侧栏；加签节点由业务侧按金额分支动态拼装 nodes
    </div>
  </div>
</template>

显示代码

节点表单快照

基本信息

企业名称：云联科技（南京）有限公司统一信用代码：91320114MA1X9Y2K3L

资质上传

营业执照：已上传（3.2MB）开户许可证：已上传（1.1MB）

合同签署

合同编号：HT-2026-0918签署方式：电子签 · 09-18 完成

开户放款

回溯场景：node-<index> 具名插槽按步骤渲染提交数据摘要——完成态绿点 / 进行中黄点 + 两行快照文本。

<script setup lang="ts">
/** 场景：节点表单快照——node-<index> 插槽渲染每步提交的数据摘要 */
import { BizProcess } from 'vue3-ep-biz-lib'
import type { BizProcessNode } from 'vue3-ep-biz-lib'

const nodes: BizProcessNode[] = [
  { name: '基本信息', status: 'success' },
  { name: '资质上传', status: 'success' },
  { name: '合同签署', status: 'success' },
  { name: '开户放款', status: 'running' },
]

const snapshots: Record<number, string[]> = {
  0: ['企业名称：云联科技（南京）有限公司', '统一信用代码：91320114MA1X9Y2K3L'],
  1: ['营业执照：已上传（3.2MB）', '开户许可证：已上传（1.1MB）'],
  2: ['合同编号：HT-2026-0918', '签署方式：电子签 · 09-18 完成'],
}
</script>

<template>
  <div style="max-width: 560px">
    <BizProcess :nodes="nodes" :node-width="120">
      <template v-for="(lines, index) in snapshots" :key="index" #[`node-${index}`]="{ node }">
        <div style="min-width: 150px">
          <div style="display: flex; align-items: center; gap: 6px; font-weight: 600">
            <span :style="{ width: 8, height: 8, borderRadius: '50%', background: node.status === 'success' ? 'var(--el-color-success)' : 'var(--el-color-warning)' }" />
            {{ node.name }}
          </div>
          <div style="margin-top: 6px; display: flex; flex-direction: column; gap: 2px; font-size: 12px; color: var(--el-text-color-secondary); text-align: left">
            <span v-for="line in lines" :key="line">{{ line }}</span>
          </div>
        </div>
      </template>
    </BizProcess>
  </div>
</template>

显示代码

Props

属性名	类型	默认值	说明
nodes	BizProcessNode[]	—（必填）	节点条配置，见下表
opinions	BizProcessOpinion[]	—	审批意见，非空时渲染审批记录时间线
direction	'horizontal' / 'vertical'	'horizontal'	节点条方向；垂直模式为左圆点右内容
node-width	number	88	水平模式节点最小宽度（px），内容多时调大避免换行
opinions-title	string	'审批记录'	审批记录标题；传空串 '' 隐藏标题
opinions-reverse	boolean	false	审批记录倒序（最新在前）
opinion-status-map	Record<string, { type?, hollow?, text? }>	{ 同意, 驳回 }	审批结果 → 时间线样式映射，可扩展自定义结果文案

BizProcessNode 节点字段

字段	类型	说明
name	string	节点名称（必填）
status	'wait' / 'running' / 'success' / 'rejected'	节点状态，缺省 wait
description	string	节点说明，显示在名称下方
operator	string	处理人，默认渲染为「处理人：xxx」
time	string	处理时间

BizProcessOpinion 意见字段：author（必填）/ content / time / result（经 opinion-status-map 映射）。

Events

事件名	参数	说明
node-click	(node: BizProcessNode, index: number)	节点点击（常用于打开该节点表单快照 / 处理详情）；插槽内按钮等交互如不想冒泡请在内部 @click.stop

Slots

插槽名	作用域	说明
node-<index>	{ node, index }	接管指定下标节点，优先级最高
node	{ node, index }	通用接管所有节点（未命中的走默认渲染）
opinion	{ opinion }	自定义单条审批意见（含 author / content / time / result）

插槽内可复用内置样式类：biz-process__dot（状态圆点）、biz-process__info（信息列）、biz-process__name / __desc / __meta。

Expose

属性/方法	说明
—	无暴露实例方法（数据驱动）