caimei-authentic-manager/src/views/authentic/review/doc/imageDetail.vue

<template>
  <div class="app-container">
    <div class="detail">
      <el-form ref="formRef" label-width="120px" :model="formData" :rules="formRules">
        <el-form-item label="标题：">
          {{ imageTitle }}
        </el-form-item>
        <el-form-item label="图片：">
          <template v-for="(item,index) in imageList">
            <el-image :key="index" style="width: 150px; height: 150px" :src="item" :preview-src-list="imageList" />
          </template>
        </el-form-item>
        <el-form-item label="审核状态：">
          <el-radio-group v-model="formData.auditStatus">
            <el-radio :label="1">通过</el-radio>
            <el-radio :label="0">不通过</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item v-if="formData.auditStatus!==1" prop="invalidReason" label="原因：">
          <el-input v-model="formData.invalidReason" type="textarea" placeholder="请说明原因" />
        </el-form-item>
        <el-form-item>
          <el-button type="info" @click="$_back">返回</el-button>
          <el-button type="primary" @click="submit">提交</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import { getImageDetail } from '@/api/doc'
import { auditImage } from '@/api/docReview'
import { mapGetters } from 'vuex'
export default {
  data() {
    return {
      imageList: [], // 上传的图片列表
      imageTitle: '', // 图片标题
      formData: {
        imageId: '', // 文章id
        auditStatus: 1, // 审核状态
        invalidReason: '', // 不同过原因
        auditBy: '' // 审核人
      },
      formRules: {
        invalidReason: { required: true, message: '不通过原因不能为空', tigger: 'blur' }
      }
    }
  },
  computed: {
    ...mapGetters(['authUserId'])
  },
  created() {
    this.formData.imageId = this.$route.query.imageId
    this.getDetail()
  },
  methods: {
    // 审核
    submit() {
      this.$refs.formRef.validate(valide => {
        if (!valide) return
        this.formData.auditBy = this.authUserId
        auditImage(this.formData)
          .then(res => {
            console.log(res)
            if (res.code !== 0) return
            this.$message({
              message: res.data,
              type: 'success',
              duration: 1000
            })
            // 如果保存文章成功就要关闭当前页面
            this.$store.dispatch('tagsView/delView', this.$route)
            this.$router.back()
          })
      })
    },
    // 获取图片数据详情
    getDetail() {
      getImageDetail({ imageId: this.formData.imageId })
        .then(res => {
          console.log(res)
          if (res.code !== 0) return
          this.imageList = res.data.imageList
          this.imageTitle = res.data.imageTitle
        })
    }
  }
}
</script>

<style lang="scss" scoped>
.detail{
  width: 800px;
  margin: 25px auto;
  .el-image{
    margin-right: 12px;
    &:nth-child(4n){
      margin-right: 0;
    }
  }
  .el-button{
    width: 120px;
  }
}
</style>