vue实现进度审批

Vue实现进度审批功能

进度审批功能通常涉及多个状态展示和用户交互。以下是基于Vue的实现方法：

状态管理

使用Vuex或Pinia管理审批流程状态。定义审批流程的各个阶段，如"待审批"、"审批中"、"已通过"、"已拒绝"等。

// store/modules/approval.js
const state = {
  currentStep: 1,
  steps: [
    { id: 1, name: '提交申请', status: 'completed' },
    { id: 2, name: '部门审批', status: 'active' },
    { id: 3, name: '财务审批', status: 'pending' },
    { id: 4, name: '完成', status: 'pending' }
  ]
}

进度条组件

创建可复用的进度条组件，展示当前审批进度。

<template>
  <div class="progress-container">
    <div v-for="step in steps" :key="step.id" 
         :class="['step', step.status]">
      <div class="step-circle">{{ step.id }}</div>
      <div class="step-label">{{ step.name }}</div>
    </div>
    <div class="progress-bar" :style="progressStyle"></div>
  </div>
</template>

<script>
export default {
  props: ['steps'],
  computed: {
    progressStyle() {
      const completedSteps = this.steps.filter(s => s.status === 'completed').length
      return {
        width: `${(completedSteps / (this.steps.length - 1)) * 100}%`
      }
    }
  }
}
</script>

审批操作组件

创建包含审批按钮和意见输入的表单组件。

<template>
  <div class="approval-actions">
    <textarea v-model="comment" placeholder="审批意见"></textarea>
    <button @click="approve">通过</button>
    <button @click="reject">拒绝</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      comment: ''
    }
  },
  methods: {
    approve() {
      this.$emit('approve', this.comment)
    },
    reject() {
      this.$emit('reject', this.comment)
    }
  }
}
</script>

审批历史记录

展示审批流程的历史记录，包括审批人、时间和意见。

<template>
  <div class="approval-history">
    <div v-for="record in history" :key="record.id" class="record">
      <div class="record-header">
        <span>{{ record.approver }}</span>
        <span>{{ record.time }}</span>
      </div>
      <div class="record-comment">{{ record.comment }}</div>
      <div class="record-status">{{ record.status }}</div>
    </div>
  </div>
</template>

API集成

与后端API集成，实现审批状态的更新和获取。

// api/approval.js
import axios from 'axios'

export default {
  getApprovalProgress(id) {
    return axios.get(`/api/approvals/${id}`)
  },
  submitApproval(data) {
    return axios.post('/api/approvals', data)
  },
  updateApprovalStatus(id, status) {
    return axios.put(`/api/approvals/${id}/status`, { status })
  }
}

响应式设计

确保审批界面在不同设备上都能良好显示。

.progress-container {
  display: flex;
  justify-content: space-between;
  position: relative;
}

.step {
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 1;
}

.progress-bar {
  position: absolute;
  height: 2px;
  background: #4CAF50;
  top: 15px;
  left: 0;
  transition: width 0.3s ease;
}

@media (max-width: 768px) {
  .progress-container {
    flex-direction: column;
  }
  .progress-bar {
    width: 2px !important;
    height: auto;
    left: 15px;
    top: 0;
  }
}

实时更新

使用WebSocket或轮询实现审批状态的实时更新。

// 在组件中
mounted() {
  this.fetchApprovalStatus()
  this.polling = setInterval(this.fetchApprovalStatus, 5000)
},
beforeDestroy() {
  clearInterval(this.polling)
},
methods: {
  fetchApprovalStatus() {
    api.getApprovalProgress(this.approvalId).then(response => {
      this.$store.commit('UPDATE_APPROVAL_STATUS', response.data)
    })
  }
}

以上实现提供了完整的审批流程功能，包括状态展示、用户交互、历史记录和实时更新。根据具体业务需求，可以进一步扩展或调整功能模块。