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

<template>
  <wrapper
    fill
    margin
    background
  >
    <el-tabs
      v-model="active"
      class="c-tabs"
    >
      <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"
      ref="component"
      @reject="onReject"
    />
    <confirm-dialog
      ref="rejectDialog"
      title="驳回"
      @confirm="onConfirmReject"
    >
      <div class="c-grid-form u-flex-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"
            maxlength="50"
            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/publish'
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 'asset':
          return rejectAsset
        case 'program':
          return rejectProgram
        case 'recur':
        case 'schedule':
          return rejectSchedule
        case 'release':
          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
      }
      this.reject(this.$item, reason).then(() => {
        this.$refs.component.refresh()
        done()
      })
    }
  }
}
</script>

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