🔁 审批流程不再混乱！用 React + 流程图 + 权限控制，打造“会动的银行审批系统”

前端付豪
264 阅读3分钟

🔁 审批流程不再混乱！用 React + 流程图 + 权限控制，打造“会动的银行审批系统”

汇丰内部的审批系统不是「通过/驳回」那么简单，
它要支持多角色、流程图展示、操作记录、权限校验、动态状态切换……
本篇手把手带你用 React + TypeScript 实现一个具备“流程感”的审批系统，告别按钮堆砌，迈向企业级流转！

✅ 为什么写这篇？

  • 在汇丰，一个审批流程可能有 5 个角色：提交人 → 初审 → 复审 → 风控 → 终审
  • 每一环节都需要精确权限控制，并且能清晰展示流程状态，供各角色使用
  • 很多前端系统都“假装有审批”：只放几个按钮，完全没有流程感、不知进展、权限混乱

🧰 技术选型

技术用途
React + TS前端框架
AntV X6（或 react-flow）流程图组件（展示审批路径）
Zustand权限状态管理
Day.js审批时间格式处理

📌 目标功能

构建一个“银行级审批详情页”，包含：

  • ✅ 流程图动态展示各节点状态（✅ / ⏳ / ❌）
  • ✅ 审批人操作记录可追溯（时间、备注、动作）
  • ✅ 当前用户权限控制：是否能审批？哪些字段可编辑？
  • ✅ 按钮区动态渲染：通过/驳回/加签/转交

🧪 实战拆解

1️⃣ 状态结构定义（支持流程图）

type Approver = {
  name: string
  role: string
  status: 'pending' | 'approved' | 'rejected'
  time?: string
  comment?: string
}

const approvalFlow: Approver[] = [
  { name: '张三', role: '提交人', status: 'approved', time: '2025-05-16 10:00' },
  { name: '李四', role: '初审', status: 'approved', time: '2025-05-16 11:00' },
  { name: '王五', role: '复审', status: 'pending' },
  { name: '赵六', role: '终审', status: 'pending' },
]

2️⃣ 流程图展示（基于 AntV X6 或简化版）

<EasyFlowGraph data={approvalFlow} />

// EasyFlowGraph.tsx (简版)
function EasyFlowGraph({ data }) {
  return (
    <div className="flex gap-4">
      {data.map((node, index) => (
        <div key={index} className="text-center">
          <div className={`p-2 rounded-full ${node.status === 'approved' ? 'bg-green-500' : node.status === 'pending' ? 'bg-yellow-400' : 'bg-red-500'}`}>
            {node.role}
          </div>
          <small>{node.name}</small>
          {node.time && <div>{dayjs(node.time).format('HH:mm')}</div>}
        </div>
      ))}
    </div>
  )
}

3️⃣ 操作记录模块

{approvalFlow.map((node, idx) =>
  node.status !== 'pending' ? (
    <div key={idx}>
      🕒 {node.time} - {node.name} [{node.role}] → {node.status} - {node.comment || '无备注'}
    </div>
  ) : null
)}

4️⃣ 按钮权限逻辑（根据当前用户角色）

const currentUserRole = '复审'

const currentNode = approvalFlow.find(item => item.role === currentUserRole)
const canApprove = currentNode && currentNode.status === 'pending'

{canApprove && (
  <div className="flex gap-4">
    <button onClick={() => handleAction('approved')}>✅ 通过</button>
    <button onClick={() => handleAction('rejected')}>❌ 驳回</button>
  </div>
)}

🖥️ 效果演示

  • 👁 流程图左到右展示审批路径，颜色区分状态（绿=通过，黄=待审，红=驳回）
  • 📝 审批记录模块展示所有历史动作（含时间 + 备注）
  • 🙋 当前用户可根据权限决定是否操作按钮
  • 🔒 其他用户看不到按钮，但能查看流程

⚠️ 易错点总结

错误点描述
❌ 当前流程节点判断错误导致权限按钮被误显示
❌ 状态更新只改了 UI 没落库审批状态与后台不一致
❌ 多人并发审批流程未锁定可能导致重复审批或脏数据

✅ 建议进阶：

  • 将流程图数据与后端接口绑定（动态展示节点数量）
  • 支持流程“打回重填”与“加签”操作
  • 审批操作支持二次确认 + 输入备注弹窗

🎯 总结

  • 本文用 React 构建了一个可视化审批系统页面
  • 实现了流程图、审批记录、权限按钮、状态感知等企业级功能
  • 是构建风控、信贷、财务审批系统的重要模块组件

下一篇将进入数据科学场景：

🔍 《Python 构建客户画像模型：精准分类与金融标签实战》

avatar
文章
阅读
粉丝