smsb-web-develop/src/views/screen/material/media/MediaDesigner.vue

<template>
  <wrapper
    fill
    margin
    padding
    background
  >
    <el-tabs
      :value="active"
      class="c-tabs has-bottom-padding"
      @tab-click="onTabClick"
    >
      <el-tab-pane
        v-for="tab in tabs"
        :key="tab.value"
        :label="tab.label"
        :name="tab.value"
      />
    </el-tabs>
    <schema-table
      ref="table"
      :key="active"
      :schema="schema"
      @row-click="onToggleSelection"
      @selection-change="onSelectionChange"
    />
    <streaming-media-dialog
      ref="addDialog"
      @done="onAdded"
    />
    <preview-dialog ref="previewDialog" />
  </wrapper>
</template>

<script>
import {
  State,
  AssetType,
  AssetTypeInfo,
  AssetTag,
  AssetTagInfo
} from '@/constant'
import {
  parseByte,
  getAIState
} from '@/utils'
import {
  getAssetsWithDel,
  updateAsset,
  deleteAsset,
  deleteAssets
} from '@/api/asset'
import StreamingMediaDialog from './components/StreamingMediaDialog.vue'

export default {
  name: 'MediaDesigner',
  components: {
    StreamingMediaDialog
  },
  data () {
    return {
      active: `${State.AVAILABLE_ASSET}`,
      tabs: [
        { value: `${State.AVAILABLE_ASSET}`, label: '待审核' },
        { value: `${State.RESOLVED}`, label: '已审核' },
        { value: `${State.REJECTED}`, label: '已驳回' }
      ]
    }
  },
  computed: {
    schema () {
      const active = Number(this.active)
      const isRejected = active === State.REJECTED

      return {
        buttons: [
          { type: 'add', label: `新增${AssetTypeInfo[AssetType.STREAMING_MEDIA]}`, on: this.addStreamingMedia },
          { type: 'del', on: this.onBatchDel }
        ],
        condition: { status: active, ...this.$condition },
        list: getAssetsWithDel,
        transform: this.transform,
        filters: [
          { key: 'tag', type: 'select', placeholder: '类型', options: [
            { value: AssetTag.AD, label: AssetTagInfo[AssetTag.AD] },
            { value: AssetTag.PUBLICITY, label: AssetTagInfo[AssetTag.PUBLICITY] },
            { value: AssetTag.LOCAL_PUBLICITY, label: AssetTagInfo[AssetTag.LOCAL_PUBLICITY] },
            { value: AssetTag.SHIM, label: AssetTagInfo[AssetTag.SHIM] }
          ] },
          { key: 'type', type: 'select', placeholder: '资源类型', options: [
            { value: AssetType.IMAGE, label: AssetTypeInfo[AssetType.IMAGE] },
            { value: AssetType.VIDEO, label: AssetTypeInfo[AssetType.VIDEO] },
            { value: AssetType.STREAMING_MEDIA, label: AssetTypeInfo[AssetType.STREAMING_MEDIA] },
            { value: AssetType.AUDIO, label: AssetTypeInfo[AssetType.AUDIO] },
            { value: AssetType.PPT, label: AssetTypeInfo[AssetType.PPT] },
            { value: AssetType.PDF, label: AssetTypeInfo[AssetType.PDF] },
            { value: AssetType.DOC, label: AssetTypeInfo[AssetType.DOC] }
          ] },
          { key: 'originalName', type: 'search', placeholder: '资源名称' }
        ],
        cols: [
          { type: 'selection', selectable: row => row.del },
          { prop: 'tagInfo', type: 'refresh', width: 80 },
          { prop: 'typeName', label: '资源', align: 'center', width: 80 },
          { prop: 'file', label: '', type: 'asset', on: this.onView },
          { prop: 'name', ...active === State.AVAILABLE_ASSET
            ? {
              render: (data, h) => h('edit-input', {
                model: {
                  value: data.name,
                  callback (val) {
                    data.name = typeof val === 'string' ? val.trim() : val
                  }
                },
                on: {
                  edit: () => this.onEdit(data)
                }
              }),
              'class-name': 'c-edit-column'
            }
            : null, 'min-width': 100 },
          active === State.RESOLVED ? null : { prop: 'ai', label: 'AI审核', type: 'tag' },
          isRejected ? { prop: 'remark', label: '驳回原因', 'align': 'right', 'min-width': 120 } : null,
          isRejected ? null : { prop: 'size', label: '资源大小', 'align': 'right' },
          isRejected ? null : { prop: 'diff', label: '其他', 'align': 'right' },
          isRejected ? null : { prop: 'createTime', label: '上传时间', 'align': 'right' },
          { type: 'invoke', render: [
            { label: '查看', allow: ({ status }) => status !== State.DRAFT, on: this.onView },
            { label: '删除', allow: ({ del }) => del, on: this.onDel }
          ] }
        ]
      }
    }
  },
  methods: {
    onTabClick ({ name: active }) {
      if (this.active !== active) {
        const { tag, type, originalName } = this.$refs.table.getCondition()
        this.$condition = { tag, type, originalName }
        this.active = active
        this.$selectionItems = null
      }
    },
    transform (asset) {
      asset.tagInfo = AssetTagInfo[asset.tag]
      asset.typeName = AssetTypeInfo[asset.type]
      asset.name = asset.originalName
      asset.size = parseByte(asset.size)
      asset.ai = getAIState(asset)
      return asset
    },
    onView ({ status, file }) {
      if (status === State.DRAFT) {
        this.$message({
          type: 'warning',
          message: '文件正在解析中，请稍后再试'
        })
        return
      }
      this.$refs.previewDialog.show(file)
    },
    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
        }
      )
    },
    onDel (asset) {
      deleteAsset(asset).then(() => {
        this.$refs.table.decrease(1)
      })
    },
    addStreamingMedia () {
      this.$refs.addDialog.show()
    },
    onAdded (streamingMedia) {
      if (Number(this.active) === State.AVAILABLE_ASSET) {
        this.$refs.table.resetCondition(streamingMedia)
      }
    },
    onBatchDel () {
      if (this.$selectionItems?.length) {
        deleteAssets(this.$selectionItems.map(({ keyName }) => keyName)).then(() => {
          this.$refs.table.decrease(this.$selectionItems.length)
          this.$selectionItems = null
        })
      } else {
        this.$message({
          type: 'warning',
          message: '请先选择需要删除的资源'
        })
      }
    },
    onToggleSelection (row) {
      this.$refs.table.getInst().toggleRowSelection(row)
    },
    onSelectionChange (val) {
      this.$selectionItems = val
    }
  }
}
</script>