crm-mobile/components/wk-file-content/wk-file-content.vue

<template>
  <view class="wk-file-content">
    <view v-if="list.length > 0" class="file-group">
      <view
        v-for="(item, index) in list"
        :key="index"
        class="file-item"
        @click.stop="handleDownloadFile(item)">
        <image
          :src="calcIcon(item.name)"
          alt=""
          class="file-icon" />
        <text class="file-name">
          {{ item.name }}
        </text>
        <text class="file-size">
          {{ getSize(item.size) }}
        </text>
        <!-- <text
					v-if="showDelete"
					class="wk wk-close file-delete"
					@click.stop="deleteFile(index)" /> -->
        <text
          v-if="showDelete && item.readOnly !== 1"
          class="wk wk-close file-delete"
          @click.stop="deleteFile(index)" />
      </view>
    </view>
  </view>
</template>

<script>
	/**
	 * 附件模块
	 * @author yxk
	 * @property {Array} list 附件列表
	 * @property {Boolean} showDelete 是否可删除，默认false不可删除
	 * @event {Function} delete 点击确认删除时触发
	 */
  import {calcIcon, downloadFile} from 'UTIL/file'
	
  export default {
    name: 'WkFileContent',
    props: {
      list: {
        type: Array,
        default: () => []
      },
      showDelete: {
        type: Boolean,
        default: false
      }
    },
    data() {
      return {}
    },
    computed: {
      calcIcon() {
        return calcIcon
      }
    },
    methods: {
      /**
       * 计算文件大小
       */
      getSize(size) {
        if (!size || size == '') {
          return '0KB';
        }
        if (isNaN(Number(size))) return size

        const unitArr = ['B', 'KB', 'MB', 'GB', 'TB']
        let index = 0;
        let calcRes = '0KB'

        function calcSize(num) {
          let res = num / 1024
          if (res < 1) {
            calcRes = Number(num.toFixed(2)) + unitArr[index]
          } else {
            index++;
            if (index > 4) {
              calcRes = Number(num.toFixed(2)) + unitArr[4]
            } else {
              calcSize(res)
            }
          }
        }
        calcSize(Number(size))
        return calcRes
      },

      /**
       * 删除回调
       */
      deleteFile(index) {
        this.$emit('delete', index, this.list[index])
      },

      /**
       * 下载附件
       */
      handleDownloadFile(fileItem) {				
        downloadFile(fileItem)
      }
    }
  }
</script>

<style scoped lang="scss">
	.wk-file-content {
		margin: 10rpx 0;
		.file-group {
			.file-item {
				height: 80rpx;
				padding: 0 20rpx;
				background-color: $light-bg;
				margin-bottom: 20rpx;
				@include left;

				&:last-child {
					margin-bottom: 0;
				}

				.file-icon {
					width: 28rpx;
					height: 34rpx;
					margin-right: 20rpx;
				}

				.file-name {
					flex: 1;
					font-size: 26rpx;
					line-height: 1.5;
					color: $dark;
					@include ellipsis;
				}

				.file-size {
					font-size: 26rpx;
					line-height: 1.5;
					color: $light;
					margin-left: 20rpx;
				}

				.file-delete {
					font-size: $wk-font-base;
					font-weight: bold;
					color: $light;
					margin-left: 20rpx;
				}
			}
		}

	}
</style>