smsb-web-develop/src/views/review/index.vue

<template>
  <wrapper
    fill
    margin
    padding
    background
  >
    <el-tabs
      v-model="active"
      class="c-tabs has-bottom-padding"
    >
      <el-tab-pane
        label="媒资审核"
        name="ReviewAsset"
      />
      <el-tab-pane
        label="节目审核"
        name="ReviewProgram"
      />
      <el-tab-pane
        label="轮播审核"
        name="ReviewProgramRecur"
      />
      <el-tab-pane
        label="排期审核"
        name="ReviewSchedule"
      />
      <el-tab-pane
        label="发布审核"
        name="ReviewPublish"
      />
    </el-tabs>
    <component
      :is="active"
      :key="active"
      ref="component"
      @reject="onReject"
    />
    <confirm-dialog
      ref="rejectDialog"
      title="驳回"
      @confirm="onConfirmReject"
    >
      <div class="c-grid-form u-align-self--center">
        <span class="c-grid-form__label">审核意见</span>
        <el-select
          v-model="review.type"
          placeholder="请选择"
        >
          <el-option
            v-for="option in reviewOptions"
            :key="option.label"
            :label="option.label"
            :value="option.value"
          />
        </el-select>
        <template v-if="review.type === 'reject'">
          <span class="c-grid-form__label required">原因</span>
          <el-input
            v-model.trim="review.reason"
            type="textarea"
            placeholder="请填写驳回原因"
            maxlength="50"
            :rows="3"
            resize="none"
            show-word-limit
          />
        </template>
      </div>
    </confirm-dialog>
  </wrapper>
</template>

<script>
import { rejectAsset } from '@/api/asset'
import { rejectProgram } from '@/api/program'
import { rejectSchedule } from '@/api/calendar'
import { rejectPublish } from '@/api/platform'
import { cancelRequest } from '@/utils/request'
import ReviewAsset from './components/ReviewAsset'
import ReviewProgram from './components/ReviewProgram'
import ReviewProgramRecur from './components/ReviewProgramRecur'
import ReviewSchedule from './components/ReviewSchedule'
import ReviewPublish from './components/ReviewPublish'

export default {
  name: 'Review',
  components: {
    ReviewAsset,
    ReviewProgram,
    ReviewProgramRecur,
    ReviewSchedule,
    ReviewPublish
  },
  data () {
    return {
      active: 'ReviewAsset',
      reviewOptions: [
        { value: 'reject', label: '驳回' },
        { value: '图文不符' },
        { value: '内容不合规' }
      ],
      review: {
        type: '',
        reason: ''
      }
    }
  },
  computed: {
    reject () {
      switch (this.active) {
        case 'ReviewAsset':
          return rejectAsset
        case 'ReviewProgram':
          return rejectProgram
        case 'ReviewProgramRecur':
        case 'ReviewSchedule':
          return rejectSchedule
        case 'ReviewPublish':
          return rejectPublish
        default:
          return () => Promise.reject()
      }
    }
  },
  watch: {
    active () {
      cancelRequest()
    }
  },
  methods: {
    onReject (item) {
      this.$item = item
      this.review = {
        type: 'reject',
        reason: ''
      }
      this.$refs.rejectDialog.show()
    },
    onConfirmReject (done) {
      const reason = this.review.type === 'reject' ? this.review.reason : this.review.type
      if (!reason) {
        this.$message({
          type: 'warning',
          message: '请选择或填写驳回原因'
        })
        return
      }
      console.log(this.active, this.reject)
      this.reject(this.$item, reason).then(() => {
        done()
        this.$refs.component.refresh()
      })
    }
  }
}
</script>

<style lang="scss" scoped>
</style>