smsb-web-develop/src/views/screen/material/stream/index.vue

<template>
  <wrapper
    fill
    margin
    padding
    background
  >
    <schema-table
      ref="table"
      :schema="schema"
    />
    <streaming-media-dialog
      ref="addDialog"
      @done="onAdded"
    />
    <preview-dialog ref="previewDialog" />
  </wrapper>
</template>

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

export default {
  components: {
    StreamingMediaDialog
  },
  computed: {
    schema () {
      return {
        props: {
          'row-class-name': 'u-pointer'
        },
        listeners: {
          'row-click': this.onToggleSelection,
          'selection-change': this.onSelectionChange
        },
        list: getAssetsByQuery,
        transform: this.transformAsset,
        condition: { type: AssetType.STREAMING_MEDIA },
        buttons: [
          { type: 'add', on: this.addStreamingMedia },
          { type: 'del', on: this.onBatchDel }
        ],
        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: 'originalName', type: 'search', placeholder: '资源名称' }
        ],
        cols: [
          { type: 'selection' },
          { prop: 'tagInfo', type: 'refresh', width: 80, 'align': 'center' },
          { prop: 'file', label: '资源', type: 'asset', on: this.onView },
          { render: (data, h) => h('edit-input', {
            props: {
              value: `${data.originalName}`
            },
            on: { edit: val => this.onEdit(data, val) }
          }), 'class-name': 'c-edit-column', 'min-width': 120 },
          { prop: 'userName', label: '添加人员', 'align': 'center', width: 120 },
          { prop: 'createTime', label: '添加时间', 'align': 'center', width: 160 },
          { type: 'invoke', render: [
            { label: '查看', on: this.onView },
            { label: '删除', allow: this.canDel, on: this.onDel }
          ], width: 100 }
        ]
      }
    }
  },
  methods: {
    transformAsset (asset) {
      asset.tagInfo = AssetTagInfo[asset.tag]
      return asset
    },
    onView ({ file }) {
      this.$refs.previewDialog.show(file)
    },
    onDel (asset) {
      deleteAsset(asset).then(() => {
        this.$refs.table.decrease(1)
      })
    },
    addStreamingMedia () {
      this.$refs.addDialog.show()
    },
    onAdded (streamingMedia) {
      this.$refs.table.resetCondition(streamingMedia)
    },
    onEdit (asset, { newVal, oldVal }) {
      if (newVal === oldVal) {
        return
      }
      if (!newVal) {
        this.$message({
          type: 'warning',
          message: '请填写资源名称'
        })
        return
      }

      asset.originalName = newVal
      updateAsset({
        keyName: asset.keyName,
        originalName: newVal
      }).catch(() => {
        asset.originalName = oldVal
      })
    },
    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) {
      if (row.status !== State.DRAFT) {
        this.$refs.table.getInst().toggleRowSelection(row)
      }
    },
    onSelectionChange (val) {
      this.$selectionItems = val
    }
  }
}
</script>