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.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-table-button size="large" :type="isPreview?'visited':undefined" :loading="previewLoading" v-if="previewAble" @click="previewFile">
          预览
        </cip-button-text>
        <cip-button-text size="large" :type="isDownload?'visited':undefined" :loading="downloadLoading" v-if="downloadAble" @click="downloadFile">
          下载
        </cip-table-button> -->
        <template v-if="file.status!=='error'">
          <i v-if="previewAble" class="el-icon-view" @click="previewFile"></i>
          <i v-if="downloadAble" class="el-icon-download" @click="downloadFile"></i>
        </template>
        <el-icon v-if="file.status==='success'" class="upload--success"><SuccessFilled /></el-icon>
        <i v-if="removable" class="el-icon-close upload--close" @click="remove"></i>
      </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 { SuccessFilled, Paperclip } from '@element-plus/icons-vue'
import CipButtonText from '@cip/components/cip-button-text'

export default {
  components: { ElProgress, CipButtonText, ElIcon, Paperclip, SuccessFilled },
  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 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)
    })
    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)
      } 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)
    })
    const downloadFile = async () => {
      try {
        downloadLoading.value = true
        if (isEmpty(props.config.downloadFile)) {
          await download(fileValue.value)
        } else {
          await props.config.downloadFile(fileValue.value)
        }
      } finally {
        downloadLoading.value = false
      }
    }

    const remove = async () => {
      try {
        isMobile
          ? await VanDialog.confirm({
            title: '警告',
            message: `确认删除《${fileValue.value.name}》`
          })
          : await ElMessageBox.confirm(`确认删除《${fileValue.value.name}》`, '警告', { type: 'warning' })
        if (props.config.deleteFile) {
          await props.config.deleteFile?.(fileValue.value)
        }
        emit('after-remove', fileValue.value)
      } catch (e) {
      }
    }
    return {
      parseFileSize,
      cancelUpload,
      previewAble,
      previewLoading,
      previewFile,
      downloadAble,
      downloadLoading,
      downloadFile,
      remove,
      isPreview,
      isDownload
    }
  }
}
</script>
<style lang="less">
.file-row{
  transition: all .5s cubic-bezier(.55,0,.1,1);
  font-size: 14px;
  color: var(~'--@{elNamespace}-text-color-regular');
  margin-bottom: 4px;
  position: relative;
  box-sizing: border-box;
  border-radius: 4px;
  width: 100%;
  padding: 4px;
  line-height: 16px;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  &:hover{
    background: var(~'--@{elNamespace}-fill-color-light');
    .upload--close{
      display: block;
    }
    .upload--success{
      display: none;
    }
  }
  &.is-ready{
    .upload--close{
      display: none;
    }
    .upload--success{
      display: none;
    }
  }
  &.is-error{
    .upload--close{
      display: block;
      margin-left: 5px;
    }
    .upload--success{
      display: none;
    }
    .file-row__item-name{
      color:var(~'--@{elNamespace}-color-danger');
    }
  }
  .upload--close{
    display: none;
  }
  .upload--success{
    color: var(~'--@{elNamespace}-color-success');
  }
  &__item-name{
    color: var(~'--@{elNamespace}-text-color-regular');
    display: inline-flex;
    text-align: center;
    align-items: center;
    padding-right: 4px;
    transition: color var(~'--@{elNamespace}-transition-duration');
    font-size: var(~'--@{elNamespace}-font-size-base');
    overflow: hidden;
    i{
      margin-right: 6px;
      color: var(~'--@{elNamespace}-text-color-secondary');
    }
  }
  &__item-file-name{
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  &__process{
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
  }
  .handle-button-wrapper{
    display: flex;
    i + i {
      margin-left: 4px;
    }
  }
  &__button{
    cursor: pointer;
    flex-shrink: 0;
    &+.file-row__button{
      margin-left:4px;
    }
  }
  .@{elNamespace}-progress__text{
    display: none;
  }
}
</style>