caimei-authentic-manager/src/views/normal/audit/club/device/review.vue

<template>
  <div class="app-container">
    <div class="audit-content">
      <div class="grid">
        <div class="row">
          <div class="col">设备名称：</div>
          <div class="col">{{ productInfo.productName }}</div>
        </div>
        <div class="row">
          <div class="col">设备SN码：</div>
          <div class="col">{{ productInfo.snCode }}</div>
        </div>
      </div>
      <div class="row">
        <div class="col">设备图片：</div>
        <div class="col">
          <el-image
            style="width: 120px; height: 120px"
            :src="productInfo.productImage"
            :preview-src-list="[productInfo.productImage]"
          />
        </div>
      </div>

      <div class="row">
        <div class="col">所属品牌：</div>
        <div class="col">{{ productInfo.brandName }}</div>
      </div>

      <div class="row">
        <div class="col">购买渠道：</div>
        <div class="col">{{ productInfo.purchaseWay }}</div>
      </div>

      <div class="row">
        <div class="col">发票：</div>
        <div class="col">
          <el-image
            style="width: 120px; height: 120px"
            :src="productInfo.invoiceImage"
            :preview-src-list="[productInfo.invoiceImage]"
          />
        </div>
      </div>
      <div class="row">
        <div class="col">设备参数：</div>
        <div class="col">
          <template v-for="(param, index) in productInfo.paramList">
            <div :key="index" class="param">
              <div class="label">{{ param.paramName }}：</div>
              <div class="content">{{ param.paramContent }}</div>
            </div>
          </template>
        </div>
      </div>
      <el-form ref="auditForm" label-width="112px" :model="auditForm" :rules="rules">
        <el-form-item label="审核：">
          <el-radio-group v-model="auditForm.auditStatus">
            <el-radio :label="1">通过</el-radio>
            <el-radio :label="0">不通过</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item v-if="auditForm.auditStatus === 0" label="原因：" prop="invalidReason">
          <el-input v-model="auditForm.invalidReason" type="textarea" :rows="3" />
        </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 { getProductById, auditProduct } from '@/api/product'
import { mapGetters } from 'vuex'
export default {
  data() {
    return {
      productInfo: {
        productId: '',
        productName: '',
        snCode: '',
        productImage: '',
        certificateImage: '',
        paramList: [],
        invoiceImage: '',
        brandName: '',
        purchaseWay: ''
      },
      auditForm: {
        productId: '',
        auditBy: '', // 审核人id
        authId: '', // 机构id
        auditStatus: 1, // 审核状态
        invalidReason: '', // 审核信息
        source: 2
      },
      rules: {
        invalidReason: { required: true, message: '不通过原因不能为空', tigger: 'blur' }
      }
    }
  },
  computed: {
    ...mapGetters(['authUserId'])
  },
  created() {
    this.productInfo.productId = this.$route.query.id
    this.authId = this.$route.query.authId
    this.getDetail()
  },
  methods: {
    // 获取商品详情
    getDetail() {
      this.isLoading = true
      getProductById({ productId: this.productInfo.productId })
        .then((res) => {
          this.productInfo = { ...this.productInfo, ...res.data }
        })
        .finally(() => {
          this.isLoading = false
        })
    },
    // 提交审核信息
    submit() {
      this.$refs.auditForm.validate((valid) => {
        if (valid) {
          this.isLoading = true
          // 指定审核人
          this.auditForm.auditBy = this.authUserId
          this.auditForm.productId = this.productInfo.productId
          auditProduct(this.auditForm)
            .then((res) => {
              this.$message.success(res.data)
              this.$store.dispatch('tagsView/delView', this.$route)
              this.$router.back()
            })
            .finally(() => {
              this.isLoading = false
            })
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.app-container {
  .audit-content {
    max-width: 1000px;
    margin: 0 auto;
    margin-top: 25px;
  }
  .grid,
  .param {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    // grid-template-rows: repeat(2, 1fr);
    grid-column-gap: 0px;
    grid-row-gap: 0px;
  }

  .param {
    div {
      padding-bottom: 16px;
      text-align: left;

      &:first-child {
        text-align: right;
      }
    }
  }

  .row {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    margin-bottom: 25px;
    .col {
      font-size: 14px;
      color: #333;
      &:first-child {
        min-width: 100px;
        text-align: right;
        margin-right: 8px;
        font-weight: bold;
        color: #666;
      }

      .el-image {
        margin-left: 12px;
        &:first-child {
          margin-left: 0;
        }
      }
    }
  }

  .el-button {
    width: 120px;
  }
}
</style>