vue实现业务提交审核

Vue 实现业务提交审核功能

在 Vue 中实现业务提交审核功能，通常涉及表单数据收集、验证、提交和状态管理。以下是一个完整的实现方案：

表单设计与数据绑定

创建审核表单组件，使用 v-model 实现双向数据绑定：

<template>
  <form @submit.prevent="submitForm">
    <input v-model="formData.title" placeholder="标题"/>
    <textarea v-model="formData.content" placeholder="内容"/>
    <select v-model="formData.category">
      <option v-for="opt in categories" :value="opt.value">{{ opt.label }}</option>
    </select>
    <button type="submit">提交审核</button>
  </form>
</template>

<script>
export default {
  data() {
    return {
      formData: {
        title: '',
        content: '',
        category: ''
      },
      categories: [
        { value: 'tech', label: '技术' },
        { value: 'biz', label: '业务' }
      ]
    }
  }
}
</script>

表单验证

使用计算属性或验证库进行表单验证：

computed: {
  isValid() {
    return this.formData.title.trim() && 
           this.formData.content.trim() &&
           this.formData.category
  }
},
methods: {
  submitForm() {
    if (!this.isValid) {
      alert('请填写完整信息')
      return
    }
    // 提交逻辑
  }
}

提交审核请求

通过 axios 发送审核请求：

methods: {
  async submitForm() {
    try {
      const response = await axios.post('/api/submit-review', this.formData)
      this.$router.push({ path: '/result', query: { id: response.data.id } })
    } catch (error) {
      console.error('提交失败:', error)
    }
  }
}

审核状态管理

使用 Vuex 管理审核状态：

// store/modules/review.js
const state = {
  submissions: []
}

const mutations = {
  ADD_SUBMISSION(state, payload) {
    state.submissions.push(payload)
  }
}

const actions = {
  async submitReview({ commit }, formData) {
    const response = await axios.post('/api/reviews', formData)
    commit('ADD_SUBMISSION', response.data)
    return response
  }
}

审核进度展示

创建审核状态组件：

<template>
  <div v-if="submission">
    <h3>{{ submission.title }}</h3>
    <p>状态: {{ statusMap[submission.status] }}</p>
    <div v-if="submission.comments">
      <p>审核意见: {{ submission.comments }}</p>
    </div>
  </div>
</template>

<script>
export default {
  computed: {
    submission() {
      return this.$store.state.review.submissions.find(
        s => s.id === this.$route.params.id
      )
    },
    statusMap() {
      return {
        pending: '审核中',
        approved: '已通过',
        rejected: '已拒绝'
      }
    }
  }
}
</script>

实时状态更新

使用 WebSocket 或轮询实现实时状态更新：

// 在组件中
mounted() {
  this.pollStatus()
},
methods: {
  pollStatus() {
    setInterval(async () => {
      const response = await axios.get(`/api/reviews/${this.submission.id}`)
      this.$store.commit('UPDATE_SUBMISSION', response.data)
    }, 5000)
  }
}

错误处理和用户反馈

添加全局错误处理和反馈机制：

// main.js
Vue.config.errorHandler = (err, vm, info) => {
  console.error('Vue error:', err)
  // 显示用户友好的错误提示
  vm.$notify({
    title: '错误',
    message: '操作失败，请稍后重试',
    type: 'error'
  })
}

权限控制

使用路由守卫控制访问权限：

// router.js
router.beforeEach((to, from, next) => {
  if (to.meta.requiresAuth && !store.state.user.isAuthenticated) {
    next('/login')
  } else {
    next()
  }
})

以上方案涵盖了从表单设计到状态管理的完整流程，可根据实际业务需求进行调整和扩展。