当前位置：首页 > VUE

vue实现审核

2026-02-10 03:30:23VUE

Vue 实现审核功能的方法

审核功能通常包括提交审核、审核列表、审核操作等模块。以下是基于 Vue 的实现方案：

审核表单组件

创建一个审核表单组件，用于提交需要审核的内容。使用 v-model 绑定表单数据，通过 Axios 提交到后端。

<template>
  <form @submit.prevent="submitAudit">
    <input v-model="formData.content" placeholder="输入审核内容">
    <button type="submit">提交审核</button>
  </form>
</template>

<script>
export default {
  data() {
    return {
      formData: {
        content: ''
      }
    }
  },
  methods: {
    async submitAudit() {
      try {
        await this.$http.post('/api/audit', this.formData)
        alert('提交成功')
      } catch (error) {
        console.error(error)
      }
    }
  }
}
</script>

审核列表展示

使用 v-for 渲染审核列表，展示待审核项的基本信息和状态。

<template>
  <div v-for="item in auditList" :key="item.id" class="audit-item">
    <p>{{ item.content }}</p>
    <p>状态: {{ getStatusText(item.status) }}</p>
    <button @click="approve(item.id)" v-if="item.status === 0">通过</button>
    <button @click="reject(item.id)" v-if="item.status === 0">拒绝</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      auditList: []
    }
  },
  async created() {
    this.auditList = await this.$http.get('/api/audit/list')
  },
  methods: {
    getStatusText(status) {
      const statusMap = {0: '待审核', 1: '已通过', 2: '已拒绝'}
      return statusMap[status]
    },
    async approve(id) {
      await this.$http.post(`/api/audit/approve/${id}`)
      this.refreshList()
    },
    async reject(id) {
      await this.$http.post(`/api/audit/reject/${id}`)
      this.refreshList()
    },
    async refreshList() {
      this.auditList = await this.$http.get('/api/audit/list')
    }
  }
}
</script>

状态管理

对于复杂的审核流程，可以使用 Vuex 管理审核状态。

// store/modules/audit.js
export default {
  state: {
    auditList: []
  },
  mutations: {
    SET_AUDIT_LIST(state, list) {
      state.auditList = list
    },
    UPDATE_AUDIT_ITEM(state, {id, status}) {
      const item = state.auditList.find(item => item.id === id)
      if (item) item.status = status
    }
  },
  actions: {
    async fetchAuditList({commit}) {
      const list = await $http.get('/api/audit/list')
      commit('SET_AUDIT_LIST', list)
    },
    async approveItem({commit}, id) {
      await $http.post(`/api/audit/approve/${id}`)
      commit('UPDATE_AUDIT_ITEM', {id, status: 1})
    }
  }
}

权限控制

在路由层面或组件层面实现权限控制，确保只有有权限的用户能看到审核功能。

vue实现审核

// router.js
{
  path: '/audit',
  component: Audit,
  meta: { requiresAuth: true, roles: ['admin', 'auditor'] }
}

<template>
  <div v-if="hasPermission">
    <!-- 审核内容 -->
  </div>
</template>

<script>
export default {
  computed: {
    hasPermission() {
      return this.$store.getters.userRoles.some(role => 
        ['admin', 'auditor'].includes(role)
      )
    }
  }
}
</script>