审批流多角色处理方案（前端视角）

审批流多角色处理方案（前端视角）

一、问题核心分析

场景：用户同时具备多个角色（如「部门经理+项目负责人+财务审核人」），当审批流程到达该节点时，前端需要：

1. 界面展示：明确当前审批身份

2. 操作控制：区分不同角色的操作权限

3. 数据隔离：按角色展示对应审批信息

---

二、前端解决方案

1. 角色优先级策略

方案：预先定义角色优先级（如财务审核人 > 项目负责人 > 部门经理）

实现：

// 角色优先级配置
const ROLE_PRIORITY = {
  finance: 3,
  project_owner: 2,
  dept_manager: 1
};

// 获取当前最高优先级角色
const getHighestPriorityRole = (userRoles: string[]) => {
  return userRoles.sort((a, b) => ROLE_PRIORITY[b] - ROLE_PRIORITY[a])[0];
};

适用场景：业务要求同一时间只能用一种身份审批

---

2. 多角色 并行 处理

方案：允许用户切换角色分别审批

实现：

<template>
  <el-select v-model="currentRole" @change="loadApprovalData">
    <el-option 
      v-for="role in availableRoles" 
      :key="role" 
      :label="formatRoleName(role)" 
      :value="role"
    />
  </el-select>

  <!-- 根据角色展示不同审批组件 -->
  <FinanceApproval v-if="currentRole === 'finance'" />
  <ProjectApproval v-else-if="currentRole === 'project_owner'" />
</template>

关键点：

• 切换角色时重置表单状态

• 浏览器本地缓存当前选择角色

---

3. 混合审批模式

方案：单界面融合多角色操作项

实现：

// 动态生成操作按钮
const getActions = (roles) => {
  return roles.flatMap(role => ({
    label: `${role}审批通过`,
    handler: () => submitApproval(role),
    type: 'primary'
  }));
};

界面效果：

[财务通过按钮] [项目通过按钮] [部门拒绝按钮]

---

三、后端协作设计

1. 接口规范：

// 提交审批时携带当前角色
POST /api/approval/submit
Body: { 
  approvalId: string,
  role: 'finance' | 'project_owner', // 明确当前操作角色
  action: 'approve' | 'reject',
  comment: string
}

2. 数据过滤：

• 请求参数添加current_role字段

• 后端根据角色返回对应数据：

  • {
      "finance_data": { /* 财务专属字段 */ },
      "project_data": { /* 项目专属字段 */ }
    }
    

---

四、状态管理与缓存

1. Pinia/Vuex 存储：

// 存储当前审批上下文
const useApprovalStore = defineStore('approval', {
  state: () => ({
    currentRole: '',
    roleContexts: {
      finance: { /* 财务审批上下文 */ },
      project_owner: { /* 项目审批上下文 */ }
    }
  })
});

2. 本地持久化：

// 记住最后一次使用的角色
watch(
  () => currentRole.value,
  (role) => localStorage.setItem('last_used_role', role)
);

---

五、用户体验优化

1. 视觉区分：

   1. .finance-action { border-left: 3px solid #f56c6c; }
      .project-action { border-left: 3px solid #409eff; }
      

2. 操作引导：

   1. <el-tooltip content="您正在以财务身份审批" v-if="currentRole === 'finance'">
        <el-icon><Warning /></el-icon>
      </el-tooltip>
      

3. 审批记录展示：

   1. // 按角色分类显示历史记录
      const groupedHistory = historyItems.reduce((acc, item) => {
        (acc[item.role] || (acc[item.role] = [])).push(item);
        return acc;
      }, {});
      

---

六、安全与边缘情况

1. 权限二次校验：

   1. // 提交前验证角色是否仍有效
      const submit = async () => {
        const validRoles = await fetchCurrentRoles();
        if (!validRoles.includes(currentRole.value)) {
          throw new Error('角色权限已变更');
        }
      };
      

2. 冲突处理：

   1. 乐观锁机制（提交携带数据版本号）

   2. 提示「其他身份已处理过该流程」

---

七、面试回答技巧

"在OA系统开发中，我设计了多角色审批方案：

1. 动态界面：根据用户角色渲染对应操作面板，支持一键切换身份
2. 数据隔离：通过/api/approval?role=finance接口按角色过滤敏感数据
3. 防误操作：提交时二次校验角色权限，并记录完整操作日志

上线后审批效率提升40%，错误操作减少75%"