smsb-web-develop/src/views/ad/applet/review-asset/index.vue

<template>
  <wrapper
    fill
    margin
    padding
    background
  >
    <schema-table
      ref="table"
      :schema="schema"
    />
    <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 u-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>
    <preview-dialog ref="previewDialog" />
  </wrapper>
</template>

<script>
import { State } from '@/constant'
import {
  parseByte,
  parseDuration,
  transformOrderAssetToAsset
} from '@/utils'
import {
  getAssets,
  resolveAsset,
  rejectAsset
} from '../api'

export default {
  name: 'AdAssetReview',
  data () {
    return {
      schema: {
        list: getAssets,
        transform: this.transformAsset,
        condition: { status: State.SUBMITTED },
        cols: [
          { prop: 'typeInfo', type: 'refresh', width: 80 },
          { prop: 'file', label: '', type: 'asset', on: this.onViewAsset },
          { prop: 'size', label: '文件大小', align: 'right' },
          { prop: 'ratio', label: '分辨率', align: 'right' },
          { prop: 'diff', label: '其他', align: 'right' },
          { prop: 'createTime', label: '提交时间', width: 160, align: 'right' },
          { type: 'invoke', width: 160, render: [
            { label: '查看', on: this.onViewAsset },
            { label: '通过', on: this.onResolve },
            { label: '拒绝', on: this.onReject }
          ] }
        ]
      },
      reviewOptions: [
        { value: 'reject', label: '自定义' },
        { value: '内容不合规' }
      ],
      review: {
        type: '',
        reason: ''
      }
    }
  },
  methods: {
    transformAsset (asset) {
      const data = transformOrderAssetToAsset(asset)
      if (data.file) {
        const { width, height, status, reason, size, duration, createTime } = asset
        data.ratio = width && height ? `${width}x${height}` : '-'
        data.statusTag = {
          type: ['', 'primay', 'success', 'danger'][status],
          label: ['-', '待审核', '通过', '驳回'][status],
          msg: reason
        }
        data.size = parseByte(size)
        data.diff = parseDuration(duration)
        data.createTime = createTime
      }
      data.keyName = asset.keyName
      return data
    },
    onResolve (asset) {
      resolveAsset(asset).then(() => {
        this.$refs.table.decrease(1)
      })
    },
    onReject (asset) {
      this.$asset = asset
      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
      }
      rejectAsset(this.$asset, reason).then(() => {
        done()
        this.$refs.table.decrease(1)
      })
    },
    onViewAsset ({ file }) {
      this.$refs.previewDialog.show(file)
    }
  }
}
</script>