smsb-web-rz/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="Reason of rejection"
      @confirm="onConfirmReject"
    >
      <div class="c-grid-form u-align-self--center">
        <span class="c-grid-form__label">
          Reason of rejection
        </span>
        <el-select
          v-model="review.type"
          placeholder="Please select"
        >
          <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">
            Description
          </span>
          <el-input
            v-model.trim="review.reason"
            type="textarea"
            placeholder="Please fill in the reason for rejection"
            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: 72, align: 'center' },
          { prop: 'file', label: 'Resources', type: 'asset', on: this.onViewAsset },
          { prop: 'size', label: 'File Size', align: 'right' },
          { prop: 'ratio', label: 'Resolution', align: 'right' },
          { prop: 'diff', label: 'Other', align: 'right' },
          { prop: 'createTime', label: 'Submission Time', width: 160, align: 'right' },
          {
            type: 'invoke', width: 160, render: [
              { label: 'View', on: this.onViewAsset },
              { label: 'Pass', on: this.onResolve },
              { label: 'Reject', on: this.onReject }
            ]
          }
        ]
      },
      reviewOptions: [
        { value: 'reject', label: 'Customize' },
        { value: 'Content non-compliance' }
      ],
      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: ['-', 'Pending Review', 'Passed', 'Rejected'][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: 'Please select or fill in the reason for rejection'
        })
        return
      }
      rejectAsset(this.$asset, reason).then(() => {
        done()
        this.$refs.table.decrease(1)
      })
    },
    onViewAsset ({ file }) {
      this.$refs.previewDialog.show(file)
    }
  }
}
</script>