cip-components/cip-form-input/basic/file/file-row.vue

<template>
  <div :class="`file-row is-${file.status}`" >
    <div class="file-row__item-name">
      <el-icon><Paperclip /></el-icon>
      <span class="file-row__item-file-name">{{
          file.id
            ? file[config.optionProps?.label || 'name']
            : file.name
        }}</span>
    </div>
    <!--    进度条仅在当前页面上传的文件中显示-->
    <template v-if="file.status === 'ready'">
      <el-progress style="width: 100%" :percentage="file.percentage" :stroke-width="2"></el-progress>
      <div>
        ({{parseFileSize(file.loaded)}}/{{parseFileSize(file.total)}})
        <cip-button-text v-if="file.status === 'ready'" type="danger" @click="cancelUpload(file)">取消</cip-button-text>
      </div>
    </template>
    <template v-else>
      <div class="handle-button-wrapper">
        <cip-button-text  :type="isPreview?'visited':undefined" :loading="previewLoading" v-if="previewAble" @click="previewFile">
          预览
        </cip-button-text>
        <cip-button-text  :type="isDownload?'visited':undefined" :loading="downloadLoading" v-if="downloadAble" @click="downloadFile">
          下载
        </cip-button-text>
        <template v-if="removable">
          <cip-button-text  @click="remove" :loading="removeLoading">
            删除
          </cip-button-text>
        </template>
      </div>
    </template>
  </div>
</template>
<script>
import { computed, ref } from 'vue'
import { ElMessageBox, ElProgress, ElIcon } from 'element-plus'
import { Dialog as VanDialog } from 'vant'
import { download } from './upload'
import { getEquipmentType, isEmpty } from '@cip/utils/util'
import { Paperclip } from '@element-plus/icons-vue'
import CipButtonText from '@cip/components/cip-button-text'

export default {
  components: { ElProgress, CipButtonText, ElIcon, Paperclip },
  props: {
    file: {
      type: Object,
      default: () => { return {} }
    },
    config: Object,
    dependOnValues: Object,
    removable: Boolean
  },
  setup (props, { emit }) {
    const isMobile = getEquipmentType() === 'mobile'
    const previewLoading = ref(false)
    const downloadLoading = ref(false)
    const removeLoading = ref(false)
    const fileValue = computed(() => {
      return props.file
    })
    // 根据文件大小 显示 B kb mb
    const parseFileSize = (size) => {
      let unit = 'k'
      if (size > 1024) {
        size = size / 1024
        unit = 'kb'
      }
      if (size > 1024) {
        size = size / 1024
        unit = 'mb'
      }
      return `${Math.floor(size)}${unit}`
    }
    const cancelUpload = (file) => {
      file.abort()
    }

    const previewAble = computed(() => {
      if (typeof props.config.previewAble === 'boolean') return props.config.previewAble
      return props.config.previewAble?.(props.dependOnValues, fileValue.value)
    })
    const isPreview = computed(() => {
      return !!props.file.read
    })
    const isDownload = computed(() => {
      return !!props.file.download
    })
    const previewFile = async () => {
      previewLoading.value = true
      try {
        await props.config.previewFile?.(fileValue.value, props.config)
      } finally {
        previewLoading.value = false
      }
    }
    const downloadAble = computed(() => {
      if (isEmpty(props.config.downloadAble)) return true
      if (typeof props.config.downloadAble === 'boolean') return props.config.downloadAble
      return props.config.downloadAble(props.dependOnValues, fileValue.value)
    })
    const downloadFile = async () => {
      try {
        downloadLoading.value = true
        if (isEmpty(props.config.downloadFile)) {
          await download(fileValue.value)
        } else {
          await props.config.downloadFile(fileValue.value, props.config)
        }
      } finally {
        downloadLoading.value = false
      }
    }

    const remove = async () => {
      const message = `确认删除《${fileValue.value[props.config.optionProps?.label || 'name']}》`
      try {
        isMobile
          ? await VanDialog.confirm({
            title: '警告',
            message
          })
          : await ElMessageBox.confirm(message, '警告', { type: 'warning' })
        removeLoading.value = true
        if (props.config.deleteFile) {
          await props.config.deleteFile?.(fileValue.value, props.config)
        }
        emit('after-remove', fileValue.value)
      } catch (e) {
      } finally {
        removeLoading.value = false
      }
    }
    return {
      removeLoading,
      parseFileSize,
      cancelUpload,
      previewAble,
      previewLoading,
      previewFile,
      downloadAble,
      downloadLoading,
      downloadFile,
      remove,
      removeLoading,
      isPreview,
      isDownload
    }
  }
}
</script>
<style lang="less">
.file-row{
  width: 100%;
  font-size: 14px;
  //line-height: 1.1em;
  line-height: @formItemLineHeight;
  padding: 4px 6px;
  /*display: flex;*/
  /*justify-content: space-between;*/
  /*align-items: center;*/
  flex-wrap: nowrap;
  position: relative;
  overflow: hidden;
  &:hover{
    background: #e6f7ff;
    .handle-button-wrapper{
      visibility: visible;
      top:0;
      left: 0;
      bottom: 0;
    }
  }
  &__file-name{
    display: inline-block;
    margin-left: 8px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  &__process{
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .handle-button-wrapper{
    display: flex;
    align-items: center;
    position: absolute;
    left: -100%;
    background: rgba(255,255,255,0.8);
    visibility: hidden;
    opacity: 0.9;
    transition: all 0.3s;
    padding: 0 8px;
    .el-button{
      padding: 0 4px;
      + .el-button{
        margin-left: 4px;
      }
    }
  }
  &__button{
    cursor: pointer;
    flex-shrink: 0;
    &+.file-row__button{
      margin-left:4px;
    }
  }
}
</style>