smsb-web-develop/src/views/ad/review-order/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 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>
    <table-dialog
      ref="adDialog"
      title="上播内容"
      :schema="adSchema"
    />
    <preview-dialog ref="previewDialog" />
  </wrapper>
</template>

<script>
import {
  State,
  AssetType,
  AssetTypeInfo
} from '@/constant'
import { parseDuration } from '@/utils'
import {
  getOrders,
  resolveOrder,
  rejectOrder
} from '../api'

export default {
  name: 'AdOrderReview',
  data () {
    return {
      schema: {
        condition: { status: State.SUBMITTED },
        list: getOrders,
        transform: this.transform,
        cols: [
          { type: 'refresh' },
          { prop: 'deviceName', label: '设备', 'min-width': 100 },
          { prop: 'startDate', label: '起始日期', align: 'right', 'min-width': 100 },
          { prop: 'range', label: '时段', align: 'right', 'min-width': 100 },
          { prop: 'freq', label: '频率', align: 'right', 'min-width': 140 },
          { prop: 'price', label: '总价(元)', 'min-width': 100, align: 'right' },
          { prop: 'createTime', label: '提交时间', 'min-width': 140, align: 'right' },
          { type: 'invoke', width: 180, render: [
            { label: '上播内容', on: this.onView },
            { label: '通过', on: this.onResolve },
            { label: '拒绝', on: this.onReject }
          ] }
        ]
      },
      reviewOptions: [
        { value: 'reject', label: '自定义' },
        { value: '播放时段已被占用' },
        { value: '内容不合规' }
      ],
      review: {
        type: '',
        reason: ''
      },
      adSchema: {
        list: this.getOrderAssets,
        cols: [
          { prop: 'fileType', label: '文件', width: 100, align: 'center' },
          { prop: 'file', label: '', type: 'asset', on: this.onViewAsset },
          { prop: 'adDuration', label: '上播时长', align: 'center' },
          { prop: 'ratio', label: '分辨率', align: 'right' },
          { prop: 'statusTag', type: 'tag' },
          { type: 'invoke', render: [
            { label: '查看', allow: ({ file }) => !!file, on: this.onViewAsset }
          ] }
        ]
      }
    }
  },
  methods: {
    transform ({ id, price, status, createTime, expand, orders, assets }) {
      const { startDate, startTime, endTime, day, duration, count } = orders[0]
      return {
        id,
        deviceName: orders[0].name,
        startDate,
        range: `${startTime}-${endTime}`,
        price: (price / 100).toFixed(2),
        freq: `${day}天 x ${duration}秒 x ${count}次`,
        remark: status === State.REJECTED ? expand : '-',
        createTime,
        assets
      }
    },
    onView (order) {
      this.$order = order
      this.$refs.adDialog.show()
    },
    onResolve (order) {
      resolveOrder(order).then(() => {
        this.$refs.table.decrease(1)
      })
    },
    onReject (order) {
      this.$order = order
      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
      }
      rejectOrder(this.$order, reason).then(() => {
        done()
        this.$refs.table.decrease(1)
      })
    },
    getOrderAssets () {
      const assets = this.$order.assets
      return Promise.resolve({
        data: assets.map(this.transformOrderAsset),
        totalCount: assets.length
      })
    },
    transformOrderAsset ({ keyName, type, adDuration, width, height, thumb, status, reason }) {
      const isImage = type === AssetType.IMAGE
      return type
        ? {
          fileType: AssetTypeInfo[type],
          file: {
            type,
            url: keyName,
            thumb: isImage ? keyName : thumb,
            origin: !isImage
          },
          adDuration: parseDuration(adDuration),
          ratio: width && height ? `${width}x${height}` : '-',
          status,
          statusTag: {
            type: ['', 'primay', 'success', 'danger'][status],
            label: ['-', '待审核', '已审核', '驳回'][status],
            msg: status === State.REJECTED ? reason : ''
          }
        }
        : {
          fileType: '素材已删除',
          adDuration: parseDuration(adDuration)
        }
    },
    onViewAsset ({ file }) {
      this.$refs.previewDialog.show(file)
    }
  }
}
</script>