sz-kjsxy-web/src/views/course/components/BatchAuditDialog.vue

<template>
  <div>
    <xy-dialog ref="dialog" :width="60" :is-show.sync="isShow" :type="'form'" title="批量审核"
      :form="form" :rules="rules" @submit="submit">
      <template v-slot:status>
        <div class="xy-table-item">
          <div class="xy-table-item-label" style="font-weight: bold">
            <span style="color: red;font-weight: bold;padding-right: 4px;">*</span>审核：
          </div>
          <div class="xy-table-item-content">
            <el-select filterable v-model="form.status" placeholder="请选择" clearable style="width: 100%;">
              <el-option v-for="item in apply_status_list" :key="item.id" :label="item.value" :value="item.id" />
            </el-select>
          </div>
        </div>
      </template>
      <template v-slot:score>
        <div class="xy-table-item">
          <div class="xy-table-item-label" style="font-weight: bold">评分：</div>
          <div class="xy-table-item-content">
            <el-input type="number" v-model="form.score" placeholder="请输入评分" clearable style="width: 100%;" />
          </div>
        </div>
      </template>
      <template v-slot:giveup_reason>
        <div v-if="form.status === 5" class="xy-table-item">
          <div class="xy-table-item-label" style="font-weight: bold">
            <span style="color: red;font-weight: bold;padding-right: 4px;">*</span>放弃原因：
          </div>
          <div class="xy-table-item-content">
            <el-input type="textarea" v-model="form.giveup_reason" placeholder="请输入放弃原因" style="width: 100%;" />
          </div>
        </div>
      </template>
      <template v-slot:file_ids>
        <div v-if="form.status === 1" class="xy-table-item">
          <div class="xy-table-item-label" style="font-weight: bold">录取通知书：</div>
          <div class="xy-table-item-content">
            <el-upload
              :action="action"
              class="upload-demo"
              :file-list="fileList"
              ref="pictureUpload"
              :auto-upload="true"
              :limit="1"
              :on-success="uploadSuccess"
              :on-remove="uploadRemove"
            >
              <el-button size="small" type="primary">点击上传</el-button>
              <div class="el-upload__tip" slot="tip">可上传各类格式文件</div>
            </el-upload>
          </div>
        </div>
      </template>
      <template v-slot:reason>
        <div class="xy-table-item">
          <div class="xy-table-item-label" style="font-weight: bold">
            <span v-if="form.status === 2" style="color: red;font-weight: bold;padding-right: 4px;">*</span>备注：
          </div>
          <div class="xy-table-item-content">
            <el-input type="textarea" :rows="4" v-model="form.reason" placeholder="请输入备注(展示给学员查看)" style="width: 100%;" />
          </div>
        </div>
      </template>
    </xy-dialog>
  </div>
</template>

<script>
  import myMixins from '@/mixin/selectMixin.js'
  import { updateStatus } from '@/api/apply/index.js'

  export default {
    mixins: [myMixins],
    data() {
      return {
        isShow: false,
        action: `${process.env.VUE_APP_UPLOAD_API}`,
        ids_obj: {
          ids: '',
          course_id: ''
        },
        form: {
          status: '',
          score: '',
          giveup_reason: '',
          file_ids: [],
          reason: ''
        },
        fileList: [],
        rules: {
          status: [{ required: true, message: '请选择审核结果', trigger: 'change' }]
        }
      }
    },
    methods: {
      setIds(obj) {
        this.ids_obj = { ...obj }
      },
      uploadSuccess(response, file, fileList) {
        this.fileList = fileList
      },
      uploadRemove(file, fileList) {
        this.fileList = fileList
      },
      submit() {
        if (this.form.status !== 0 && (this.form.status == null || this.form.status === '')) {
          this.$message.warning('请选择审核结果')
          return
        }
        const s = this.form.status
        if (s === 2) {
          if (!this.form.reason || !String(this.form.reason).trim()) {
            this.$message.warning('审核不通过时，请填写备注')
            return
          }
        }
        if (s === 5) {
          if (!this.form.giveup_reason || !String(this.form.giveup_reason).trim()) {
            this.$message.warning('主动放弃时，请填写放弃原因')
            return
          }
        }

        const fileIds = []
        if (this.fileList && this.fileList.length > 0) {
          this.fileList.forEach(item => {
            if (item.response && item.response.id) {
              fileIds.push(item.response.id)
            } else if (item.id) {
              fileIds.push(item.id)
            }
          })
        }

        const payload = {
          course_id: this.ids_obj.course_id,
          ids: this.ids_obj.ids,
          status: this.form.status,
          reason: this.form.reason || '',
          score: this.form.score || '',
          giveup_reason: this.form.giveup_reason || '',
          file_ids: fileIds
        }

        updateStatus(payload).then(res => {
          this.$message.success('批量审核成功')
          this.isShow = false
          this.$emit('refresh')
        }).catch(err => {
          this.$message.error(err && (err.message || err.msg) ? (err.message || err.msg) : '批量审核失败')
        })
      }
    },
    watch: {
      isShow(val) {
        if (!val) {
          this.ids_obj = { ids: '', course_id: '' }
          this.form = {
            status: '',
            score: '',
            giveup_reason: '',
            file_ids: [],
            reason: ''
          }
          this.fileList = []
          this.$refs.dialog && this.$refs.dialog.reset()
        }
      }
    }
  }
</script>

<style scoped lang="scss">
  ::v-deep .status,
  ::v-deep .score,
  ::v-deep .giveup_reason,
  ::v-deep .file_ids,
  ::v-deep .reason {
    flex-basis: 100%;
  }
</style>