vue实现审核功能

实现审核功能的基本思路

审核功能通常涉及状态管理、权限控制和操作记录。Vue中可以通过组件化设计、状态管理库（如Vuex或Pinia）和后端API配合实现。

审核状态管理

使用Vuex或Pinia存储审核状态数据。定义审核状态枚举和对应操作：

// Pinia示例
import { defineStore } from 'pinia'

export const useAuditStore = defineStore('audit', {
  state: () => ({
    items: [], // 待审核条目
    statusOptions: [
      { value: 0, label: '待审核' },
      { value: 1, label: '已通过' },
      { value: 2, label: '已拒绝' }
    ]
  }),
  actions: {
    async fetchItems() {
      const res = await api.getPendingItems()
      this.items = res.data
    },
    async approveItem(id) {
      await api.approveItem(id)
      await this.fetchItems()
    }
  }
})

审核操作组件

创建可复用的审核操作组件，包含通过/拒绝按钮和备注输入：

<template>
  <div class="audit-actions">
    <el-button type="success" @click="handleApprove">通过</el-button>
    <el-button type="danger" @click="handleReject">拒绝</el-button>
    <el-input v-model="remark" placeholder="审核备注"></el-input>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useAuditStore } from '@/stores/audit'

const props = defineProps(['itemId'])
const remark = ref('')
const auditStore = useAuditStore()

const handleApprove = () => {
  auditStore.approveItem(props.itemId, remark.value)
}

const handleReject = () => {
  auditStore.rejectItem(props.itemId, remark.value)
}
</script>

审核列表展示

使用表格展示待审核内容，集成审核操作组件：

<template>
  <el-table :data="auditStore.items">
    <el-table-column prop="content" label="内容"></el-table-column>
    <el-table-column prop="status" label="状态">
      <template #default="{row}">
        {{ getStatusText(row.status) }}
      </template>
    </el-table-column>
    <el-table-column label="操作">
      <template #default="{row}">
        <AuditActions :item-id="row.id" />
      </template>
    </el-table-column>
  </el-table>
</template>

<script setup>
import { useAuditStore } from '@/stores/audit'
import AuditActions from './AuditActions.vue'

const auditStore = useAuditStore()
auditStore.fetchItems()

const getStatusText = (status) => {
  return auditStore.statusOptions.find(o => o.value === status)?.label || ''
}
</script>

权限控制

通过路由守卫和组件权限指令控制审核功能访问：

// 路由守卫
router.beforeEach((to) => {
  if (to.meta.requiresAudit && !userStore.hasAuditPermission) {
    return '/403'
  }
})

// 自定义指令
app.directive('audit', {
  mounted(el, binding) {
    if (!userStore.hasAuditPermission) {
      el.parentNode.removeChild(el)
    }
  }
})

审核日志记录

创建独立的审核日志组件，显示历史记录：

<template>
  <el-timeline>
    <el-timeline-item 
      v-for="log in logs"
      :key="log.id"
      :timestamp="log.time"
      placement="top"
    >
      {{ log.operator }} {{ log.action }}了内容：{{ log.content }}
      <p v-if="log.remark">备注：{{ log.remark }}</p>
    </el-timeline-item>
  </el-timeline>
</template>

<script setup>
import { ref } from 'vue'
import { getAuditLogs } from '@/api/audit'

const logs = ref([])
getAuditLogs().then(res => {
  logs.value = res.data
})
</script>

后端API集成

典型审核API接口设计示例：

// 获取待审核列表
export const getPendingItems = () => axios.get('/audit/pending')

// 审核通过
export const approveItem = (id, remark) => 
  axios.post(`/audit/${id}/approve`, { remark })

// 审核拒绝
export const rejectItem = (id, remark) => 
  axios.post(`/audit/${id}/reject`, { remark })

// 获取审核日志
export const getAuditLogs = (params) => 
  axios.get('/audit/logs', { params })