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

import {
  getAssets,
  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.READY
    }
  },
  data () {
    return {
      type: AssetType.IMAGE,
      active: `${this.status}`,
      [AssetType.IMAGE]: {
        [State.READY]: createListOptions({ type: AssetType.IMAGE, status: State.READY }),
        [State.SUBMITTED]: createListOptions({ type: AssetType.IMAGE, status: State.SUBMITTED }),
        [State.RESOLVED]: createListOptions({ type: AssetType.IMAGE, status: State.RESOLVED, originalName: '' }),
        [State.REJECTED]: createListOptions({ type: AssetType.IMAGE, status: State.REJECTED })
      },
      [AssetType.VIDEO]: {
        [State.READY]: createListOptions({ type: AssetType.VIDEO, status: State.READY }),
        [State.SUBMITTED]: createListOptions({ type: AssetType.VIDEO, status: State.SUBMITTED }),
        [State.RESOLVED]: createListOptions({ type: AssetType.VIDEO, status: State.RESOLVED, originalName: '' }),
        [State.REJECTED]: createListOptions({ type: AssetType.VIDEO, status: State.REJECTED })
      },
      [AssetType.AUDIO]: {
        [State.READY]: createListOptions({ type: AssetType.AUDIO, status: State.READY }),
        [State.SUBMITTED]: createListOptions({ type: AssetType.AUDIO, status: State.SUBMITTED }),
        [State.RESOLVED]: createListOptions({ type: AssetType.AUDIO, status: State.RESOLVED, originalName: '' }),
        [State.REJECTED]: createListOptions({ type: AssetType.AUDIO, status: State.REJECTED })
      }
    }
  },
  computed: {
    schema () {
      const canEdit = this.active === `${State.READY}`

      return {
        list: getAssets,
        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: canEdit ? (data, h) => {
            return h('edit-input', {
              model: {
                value: data.name,
                callback (val) {
                  data.name = typeof val === 'string' ? val.trim() : val
                }
              },
              on: {
                edit: () => this.onEdit(data)
              }
            })
          } : null },
          this.isImage ? null : { prop: 'duration', label: '时长' },
          { prop: 'size', label: '文件大小' },
          { prop: 'createTime', label: '上传时间' },
          { 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 }
          ].filter(val => val) }
        ]
      }
    },
    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)
      return asset
    },
    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)
      })
    }
  }
}