构建“银行级审批系统前端架构”：Vue 3 + Naive UI 实战封装

📋 构建“银行级审批系统前端架构”：Vue 3 + Naive UI 实战封装

✅ 为什么写这篇？

在汇丰这样的金融机构，审批系统贯穿风控、信贷、财务、客户变更等多个业务场景。
一个通用型前端审批框架，能极大提高开发效率、提升权限控制精度。
本篇带你用 Vue 3 + Naive UI，打造一个“可复用 + 权限驱动 + 状态可追踪”的审批系统。

---

📌 场景还原

不同用户在审批系统中看到的字段、操作按钮、审批流节点都不一样。你需要根据用户角色动态渲染页面，同时统一处理“通过 / 驳回 / 备注”等动作。

---

📦 技术选型

技术	用途
Vue 3 + Composition API	前端组件逻辑封装
Naive UI	UI 框架
Pinia	状态管理
Vite	构建工具

---

🧱 组件结构设计

ApprovalPage.vue
├── ApprovalForm.vue          // 动态表单（字段权限控制）
├── ApprovalTimeline.vue      // 审批流程图（展示每个节点状态）
├── ApprovalActions.vue       // 操作按钮（权限控制）

---

🧪 实战代码展示

1️⃣ 动态字段权限渲染（ApprovalForm.vue）

<template>
  <n-form :model="formModel">
    <n-form-item v-for="field in visibleFields" :key="field.key" :label="field.label">
      <n-input v-model:value="formModel[field.key]" :disabled="!field.editable" />
    </n-form-item>
  </n-form>
</template>

<script setup>
import { ref, computed } from 'vue'

const formModel = ref({
  name: '汇丰客户A',
  amount: 100000,
  comment: ''
})

const userRole = 'reviewer' // 可动态从用户信息获取

const fieldPermissions = {
  name: { editable: false, roles: ['admin', 'reviewer'] },
  amount: { editable: userRole === 'admin', roles: ['admin'] },
  comment: { editable: true, roles: ['admin', 'reviewer', 'manager'] }
}

const visibleFields = computed(() => {
  return Object.entries(formModel.value).map(([key, value]) => ({
    key,
    label: key.toUpperCase(),
    editable: fieldPermissions[key]?.editable,
  })).filter(f => fieldPermissions[f.key]?.roles.includes(userRole))
})
</script>

2️⃣ 动态按钮权限控制（ApprovalActions.vue）

<template>
  <n-space>
    <n-button v-if="canApprove" @click="approve">通过</n-button>
    <n-button v-if="canReject" @click="reject" type="error">驳回</n-button>
  </n-space>
</template>

<script setup>
const userRole = 'reviewer'

const canApprove = userRole === 'reviewer' || userRole === 'manager'
const canReject = userRole !== 'guest'

function approve() {
  console.log('✅ 审批通过')
}

function reject() {
  console.log('❌ 审批驳回')
}
</script>

3️⃣ 审批流程时间线组件（ApprovalTimeline.vue）

<template>
  <n-timeline>
    <n-timeline-item
      v-for="(item, index) in flow"
      :key="index"
      :title="item.node"
      :content="item.status"
      :time="item.time"
      :type="item.status === '通过' ? 'success' : item.status === '驳回' ? 'error' : 'default'"
    />
  </n-timeline>
</template>

<script setup>
const flow = [
  { node: '提交人', status: '提交', time: '2025-05-16 10:00' },
  { node: '初审', status: '通过', time: '2025-05-16 11:30' },
  { node: '终审', status: '待处理', time: '' }
]
</script>

---

🖥️ 页面展示结果

✅ 表单中字段按角色权限自动启用/禁用
✅ 不同角色看到的操作按钮不同
✅ 时间线实时展示审批进度

---

⚠️ 常见错误点

错误点	描述
❌ 权限配置与角色匹配失效	未正确处理角色的 editable 映射
❌ 页面按钮未响应权限变更	权限变化后未刷新状态
❌ 审批时间线数据结构设计不清晰	审批状态字段命名不一致

---

🎯 总结

• 本文实现了银行通用审批页面的前端结构
• 使用了 Naive UI、组合式 API、动态权限渲染
• 支持灵活复用在不同类型的审批任务中