Vue中实现审核功能

Vue 中实现审核功能的方法

数据模型设计

在 Vue 中实现审核功能，需要设计一个包含审核状态的数据模型。通常使用 status 字段表示审核状态，例如：

data() {
  return {
    items: [
      { id: 1, name: 'Item 1', status: 'pending' },
      { id: 2, name: 'Item 2', status: 'approved' },
      { id: 3, name: 'Item 3', status: 'rejected' }
    ]
  }
}

状态显示组件

创建一个组件用于显示审核状态，可以使用条件渲染和样式类来区分不同状态：

<template>
  <div>
    <span v-if="item.status === 'pending'" class="pending">Pending</span>
    <span v-else-if="item.status === 'approved'" class="approved">Approved</span>
    <span v-else class="rejected">Rejected</span>
  </div>
</template>

审核操作按钮

添加审核操作按钮，允许用户更改状态：

<template>
  <div>
    <button @click="approve(item.id)" :disabled="item.status === 'approved'">Approve</button>
    <button @click="reject(item.id)" :disabled="item.status === 'rejected'">Reject</button>
  </div>
</template>

<script>
export default {
  methods: {
    approve(id) {
      const item = this.items.find(item => item.id === id)
      item.status = 'approved'
    },
    reject(id) {
      const item = this.items.find(item => item.id === id)
      item.status = 'rejected'
    }
  }
}
</script>

API 集成

将审核状态更改与后端 API 集成：

methods: {
  async approve(id) {
    try {
      await axios.put(`/api/items/${id}/approve`)
      const item = this.items.find(item => item.id === id)
      item.status = 'approved'
    } catch (error) {
      console.error('Approval failed:', error)
    }
  }
}

权限控制

根据用户角色显示或隐藏审核按钮：

<template>
  <div>
    <button 
      v-if="user.role === 'admin'"
      @click="approve(item.id)"
    >Approve</button>
  </div>
</template>

审核历史记录

添加审核历史记录功能，跟踪状态变更：

data() {
  return {
    auditLogs: [],
    items: [
      {
        id: 1,
        name: 'Item 1',
        status: 'pending',
        history: [
          { timestamp: '2023-01-01', user: 'User1', action: 'created' },
          { timestamp: '2023-01-02', user: 'Admin1', action: 'reviewed' }
        ]
      }
    ]
  }
}

批量审核功能

实现多选和批量审核操作：

<template>
  <div>
    <table>
      <tr v-for="item in items" :key="item.id">
        <td><input type="checkbox" v-model="selectedItems" :value="item.id"></td>
        <td>{{ item.name }}</td>
      </tr>
    </table>
    <button @click="bulkApprove">Approve Selected</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectedItems: []
    }
  },
  methods: {
    bulkApprove() {
      this.selectedItems.forEach(id => {
        this.approve(id)
      })
    }
  }
}
</script>