smsb-web-develop/src/views/platform/media/mixin.js

import {
  getAssetsWithDel,
  updateAsset,
  deleteAsset,
  submitAsset
} from '@/api/asset'
import {
  State,
  AssetType
} from '@/constant'
import {
  createListOptions,
  parseByte,
  parseDuration
} from '@/utils'

export default {
  props: {
    status: {
      type: Number,
      default: State.AVAILABLE_ASSET
    }
  },
  data () {
    return {
      type: AssetType.IMAGE,
      active: `${this.status}`,
      [AssetType.IMAGE]: {
        [State.AVAILABLE_ASSET]: createListOptions({ type: AssetType.IMAGE, status: State.AVAILABLE_ASSET }),
        [State.RESOLVED]: createListOptions({ type: AssetType.IMAGE, status: State.RESOLVED, originalName: '' }),
        [State.REJECTED]: createListOptions({ type: AssetType.IMAGE, status: State.REJECTED })
      },
      [AssetType.VIDEO]: {
        [State.AVAILABLE_ASSET]: createListOptions({ type: AssetType.VIDEO, status: State.AVAILABLE_ASSET }),
        [State.RESOLVED]: createListOptions({ type: AssetType.VIDEO, status: State.RESOLVED, originalName: '' }),
        [State.REJECTED]: createListOptions({ type: AssetType.VIDEO, status: State.REJECTED })
      },
      [AssetType.AUDIO]: {
        [State.AVAILABLE_ASSET]: createListOptions({ type: AssetType.AUDIO, status: State.AVAILABLE_ASSET }),
        [State.RESOLVED]: createListOptions({ type: AssetType.AUDIO, status: State.RESOLVED, originalName: '' }),
        [State.REJECTED]: createListOptions({ type: AssetType.AUDIO, status: State.REJECTED })
      }
    }
  },
  computed: {
    schema () {
      return {
        list: getAssetsWithDel,
        transform: this.transform,
        filters: this.active === `${State.RESOLVED}`
          ? [
            { key: 'originalName', type: 'search', placeholder: '媒资名称' }
          ]
          : [],
        cols: [
          { prop: 'file', type: 'asset', on: this.onViewAsset },
          { prop: 'name', 'min-width': 100, render: this.active === `${State.AVAILABLE_ASSET}`
            ? (data, h) => data.del
              ? h('edit-input', {
                model: {
                  value: data.name,
                  callback (val) {
                    data.name = typeof val === 'string' ? val.trim() : val
                  }
                },
                on: {
                  edit: () => this.onEdit(data)
                }
              })
              : data.name
            : null },
          this.active === `${State.REJECTED}` ? { prop: 'remark', label: '驳回原因' } : null,
          this.isImage ? null : { prop: 'duration', label: '时长' },
          { prop: 'size', label: '文件大小' },
          { prop: 'createTime', label: '上传时间' },
          { prop: 'ai', label: 'AI审核', type: 'tag', width: 100 },
          { type: 'invoke', align: 'center', width: 140, render: [
            { label: '查看', on: this.onView },
            // canEdit ? { label: '提交', on: this.onSubmit } : null,
            { label: '删除', render ({ del }) { return del }, on: this.onDel }
          ] }
        ]
      }
    },
    currOptions: {
      get () {
        return this[this.type][this.active]
      },
      set (val) {
        this[this.type][this.active] = val
      }
    },
    isImage () {
      return this.type === AssetType.IMAGE
    },
    isVideo () {
      return this.type === AssetType.VIDEO
    },
    isAudio () {
      return this.type === AssetType.AUDIO
    }
  },
  methods: {
    adjustHeader ({ column }) {
      return column.property === 'name' && this.isAudio ? 'o-media-name' : ''
    },
    transform (asset) {
      asset.name = asset.originalName
      asset.file = {
        type: asset.type,
        url: asset.keyName,
        thumbnail: asset.thumbnail
      }
      asset.duration = parseDuration(asset.duration)
      asset.size = parseByte(asset.size)
      asset.ai = this.getAIState(asset)
      return asset
    },
    getAIState ({ aiAuditState: status, aiAuditMsg: msg }) {
      switch (status) {
        case 1:
          return {
            type: 'danger',
            label: '不合规'
          }
        case 2:
          return {
            type: 'warning',
            label: '疑似',
            msg
          }
        case 3:
          return {
            type: 'info',
            label: '审核失败',
            msg
          }
        case 4:
        case 5:
        case 6:
          return {
            type: 'primmary',
            label: '审核中'
          }
        case 7:
          return {
            type: 'success',
            label: '通过'
          }
        case 8:
          return {
            type: 'info',
            label: '无法审核',
            msg
          }
        case 9:
          return {
            type: 'info',
            label: '未开启'
          }
        default:
          return null
      }
    },
    to (type) {
      if (this.type !== AssetType[type]) {
        this.type = null
        this.$nextTick(() => {
          this.type = AssetType[type]
        })
      }
    },
    onView ({ file }) {
      this.onViewAsset(file)
    },
    onViewAsset (asset) {
      this.$refs.previewDialog.show(asset)
    },
    onEdit (asset) {
      if (!asset.name) {
        asset.name = asset.originalName
        return
      }

      if (asset.name === asset.originalName) {
        return
      }

      updateAsset({
        keyName: asset.keyName,
        originalName: asset.name
      }).then(
        () => {
          asset.originalName = asset.name
        },
        () => {
          asset.name = asset.originalName
        }
      )
    },
    onSubmit (asset) {
      submitAsset(asset).then(() => {
        this.$refs.table.decrease(1)
      })
    },
    onDel (asset) {
      deleteAsset(asset).then(() => {
        this.$refs.table.decrease(1)
      })
    }
  }
}