当前位置：首页 > VUE

vue实现进度审批

2026-01-16 07:13:50VUE

Vue 实现进度审批功能

进度审批功能通常涉及表单提交、状态跟踪和交互反馈。以下是实现的基本思路和代码示例。

审批流程数据结构设计

使用对象数组存储审批步骤，每个步骤包含状态、审批人等信息：

data() {
  return {
    approvalSteps: [
      { id: 1, name: '提交申请', status: 'completed', approver: '系统' },
      { id: 2, name: '部门审批', status: 'pending', approver: '张经理' },
      { id: 3, name: '财务审核', status: 'pending', approver: '李会计' },
      { id: 4, name: '总经理审批', status: 'pending', approver: '王总' }
    ],
    currentStep: 1
  }
}

可视化进度条组件

使用<el-steps>（Element UI）或自定义组件展示进度：

<template>
  <el-steps :active="currentStep" finish-status="success">
    <el-step 
      v-for="step in approvalSteps" 
      :key="step.id"
      :title="step.name"
      :description="step.approver"
      :status="step.status">
    </el-step>
  </el-steps>
</template>

状态更新逻辑

通过API获取审批状态后更新数据：

methods: {
  async updateApprovalStatus() {
    const res = await axios.get('/api/approval/status')
    this.approvalSteps = res.data.steps
    this.currentStep = res.data.currentStep
  }
}

审批操作组件

添加批准/拒绝按钮及处理逻辑：

<template>
  <div v-if="showActionButtons">
    <el-button type="primary" @click="handleApprove">批准</el-button>
    <el-button type="danger" @click="handleReject">拒绝</el-button>
  </div>
</template>

<script>
export default {
  computed: {
    showActionButtons() {
      const current = this.approvalSteps[this.currentStep - 1]
      return current.status === 'pending' && current.approver === user.name
    }
  },
  methods: {
    async handleApprove() {
      await axios.post('/api/approval/approve')
      this.updateApprovalStatus()
    }
  }
}
</script>

实时状态更新

通过WebSocket或轮询实现实时更新：

mounted() {
  this.updateApprovalStatus()
  this.timer = setInterval(this.updateApprovalStatus, 30000)
},
beforeDestroy() {
  clearInterval(this.timer)
}

审批历史记录

单独组件展示审批日志：

<el-timeline>
  <el-timeline-item
    v-for="log in approvalLogs"
    :key="log.id"
    :timestamp="log.time">
    {{ log.operator }} {{ log.action }}：{{ log.comment }}
  </el-timeline-item>
</el-timeline>