smsb-web-develop/src/layout/components/Navbar/UploadDashboard/index.vue

<template>
  <div
    class="u-pointer"
    @click="open"
  >
    <i
      class="el-icon-upload u-color--blue u-font-size--2xl has-active"
      :class="{ breathe: uploading }"
    />
    <c-dialog
      ref="dialog"
      size="lg fixed"
      title="文件上传"
      append-to-body
    >
      <div class="l-flex__fill l-flex">
        <directory-tree
          class="c-sibling-item c-sidebar u-width--md"
          :option="directoryOption"
          editable
          @change="onDirectoryChanged"
          @refresh="onRefresh"
        />
        <div class="l-flex__fill l-flex--col c-sibling-item far">
          <div class="l-flex__none l-flex--row c-sibling-item--v">
            <div class="l-flex__fill" />
            <div class="l-flex--row c-sibling-item">
              <span class="c-sibling-item u-color--info">
                目录
              </span>
              <div class="c-sibling-item el-input__inner u-width u-ellipsis">
                {{ directory }}
              </div>
            </div>
            <div class="l-flex--row c-sibling-item">
              <span class="c-sibling-item u-color--info">
                类型
              </span>
              <schema-select
                v-model="tag"
                class="c-sibling-item u-width--xs"
                :schema="tagSelectSchema"
              />
            </div>
            <div class="l-flex--row c-sibling-item far">
              <span class="c-sibling-item u-color--info">
                标签
              </span>
              <schema-select
                v-model="subTag"
                class="c-sibling-item u-width--xs"
                :schema="subTagSelectSchema"
              />
            </div>
            <div class="l-flex--row c-sibling-item far">
              <span class="c-sibling-item u-color--info">
                转码
              </span>
              <el-switch
                v-model="videoTranscode"
                class="c-sibling-item"
                active-color="#13ce66"
                inactive-color="#ff4949"
              />
            </div>
          </div>
          <el-upload
            ref="upload"
            class="c-sibling-item--v o-upload"
            :class="{ 'l-flex__fill': !hasFile }"
            action="none"
            :accept="accept"
            :auto-upload="false"
            :show-file-list="false"
            :on-change="onChange"
            drag
            multiple
          >
            <div class="l-flex--row">
              <i class="c-sibling-item o-upload__icon el-icon-upload" />
              <span class="c-sibling-item near">
                拖拽文件到此或
              </span>
              <span class="c-sibling-item near u-color--blue">
                点击选择文件
              </span>
            </div>
            <div class="o-upload__accept">
              {{ accept }}
            </div>
          </el-upload>
          <file-progress
            v-if="hasFile"
            class="l-flex__auto c-sibling-item--v far"
          />
        </div>
      </div>
    </c-dialog>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import {
  AssetTag,
  AssetTagInfo
} from '@/constant'
import { EventBus } from '@/utils'
import {
  appendFile,
  addListener,
  removeListener,
  isUploading
} from '@/utils/upload'
import { getAssetSubTags } from '@/api/asset'
import FileProgress from './FileProgress'

export default {
  name: 'UploadDashboard',
  components: {
    FileProgress
  },
  data () {
    return {
      uploading: false,
      hasFile: false,
      tag: AssetTag.AD,
      subTag: '',
      videoTranscode: true,
      tagSelectSchema: { 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] }
      ] },
      subTagSelectSchema: {
        remote: getAssetSubTags,
        placeholder: '暂不配置',
        value: 'id',
        label: 'name'
      },
      directoryOption: null,
      directoryInfo: null
    }
  },
  computed: {
    ...mapGetters(['org']),
    accept () {
      return '.png,.jpg,.jpeg,.gif,.mp4,audio/mpeg,.ppt,.pptx,application/pdf,.doc,.docx,.ts,.mpg,.wmv,.avi,.mov,.m4v'
    },
    directory () {
      return this.directoryInfo?.directory
    }
  },
  created () {
    addListener('change', this.check)
    EventBus.$on('upload', this.onShowByOption)
  },
  beforeDestroy () {
    removeListener('change', this.check)
    EventBus.$off('upload', this.onShowByOption)
  },
  methods: {
    onChange ({ raw }) {
      this.$refs.upload.clearFiles()
      const { org, directory, treeId } = this.directoryInfo
      appendFile(raw, {
        tag: this.tag,
        subtag: this.subTag,
        org,
        directory,
        treeId,
        videoTranscode: this.videoTranscode
      })
    },
    open () {
      this.$refs.dialog.show()
    },
    onShowByOption (option) {
      this.directoryOption = option
      this.open()
    },
    check (files) {
      this.uploading = isUploading()
      this.hasFile = files.length > 0
    },
    onDirectoryChanged (directory) {
      const { root, id, name, group } = directory
      this.directoryOption = directory
      this.directoryInfo = root
        ? { org: group.path, directory: `${group.name}-${name}` }
        : { org: group.path, directory: `${group.name}-${name}`, treeId: id }
    },
    onRefresh () {
      EventBus.$emit('directory-refresh', this.directoryOption)
    }
  }
}
</script>

<style lang="scss" scoped>
.breathe {
  animation: breathe 1s ease-in-out infinite alternate;
}

@keyframes breathe {
  0% {
    text-shadow: 0 0 2px rgba($blue, 0.5);
  }
  100% {
    text-shadow: 0 0 20px $blue;
  }
}
</style>