cip-components/cip-form-input/basic/image/img-row.vue

<template>
  <div class="img-row" >
<!--    升级img展示组件-->
    <cip-dynamic-image class="img-row__img-item" :src="realUrl"></cip-dynamic-image>
<!--    <img class="img-row__img-item" :src="file.url">-->
    <!--进度条仅在当前页面上传的文件中显示-->
    <template v-if="file.status !== 'success' && file.percentage <= 100">
      <el-progress style="flex-grow: 2" type="circle" :percentage="file.percentage" :status="file.status"></el-progress>
      <div class="progress-cancel">
        <el-button v-if="!file.status" size="mini" type="text" @click="cancelUpload(file)">取消</el-button>
      </div>
    </template>
    <template v-else>
      <div class="handle-button-wrapper">
        <el-button size="mini" type="text" @click="preview"><i class="el-icon-zoom-in"></i></el-button>
        <el-button size="mini" type="text" @click="download"><i class="el-icon-download"></i></el-button>
        <el-button size="mini" type="text" @click="remove" :loading="removeLoading" v-if="removable"><i class="el-icon-delete"></i></el-button>
      </div>
    </template>
  </div>
</template>
<script>
import { computed, ref } from 'vue'
import { ElMessageBox, ElButton, ElProgress } from 'element-plus'
import CipDynamicImage from '../../../cip-dynamic-image'
import apiConfig from '@cip/request/apiConfig'
import { getValueByTemplate } from '@cip/utils/util'
export default {
  components: { ElButton, ElProgress, CipDynamicImage },
  props: {
    file: {
      type: Object,
      default: () => { return {} }
    },
    config: Object,
    removable: Boolean
  },
  setup (props, { emit }) {
    const realUrl = computed(() => {
      const url = props.file.url
      if (props.config.imgTemplate) {
        return props.config.imgTemplate(url)
      } else {
        return url
      }
    })
    const removeLoading = ref(false)
    const fileValue = computed(() => {
      return props.file
    })
    const cancelUpload = (file) => {
      file.abort()
    }
    const preview = () => {
      emit('preview', fileValue.value)
    }
    const download = () => {
      const download = document.createElement('a')
      download.setAttribute('href', getValueByTemplate(realUrl.value, apiConfig) + '?response-content-type=application/octet-stream')
      download.setAttribute('download', fileValue.value.name || fileValue.value.url)
      download.click()
    }
    const remove = () => {
      removeLoading.value = true
      const name = fileValue.value.name
      const message = name ? `确认删除《${name}》` : '确认删除'
      ElMessageBox.confirm(message, '警告', {
        type: 'warning'
      }).then(() => {
        emit('after-remove', fileValue.value)
      }).catch((e) => {
        console.info('用户取消删除')
      }).finally(() => {
        removeLoading.value = false
      })
    }
    return {
      realUrl,
      cancelUpload,
      preview,
      download,
      remove,
      removeLoading
    }
  }
}
</script>
<style lang="less">
.img-row{
  overflow: hidden;
  background-color: #fff;
  border: 1px solid #c0ccda;
  border-radius: 6px;
  box-sizing: border-box;
  width: 148px;
  height: 148px;
  margin: 0 8px 8px 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  transition: all .5s cubic-bezier(.55,0,.1,1);
  font-size: 14px;
  color: #606266;
  line-height: 1.8;
  &:hover{
    .handle-button-wrapper{
      opacity: 0.4;
    }
  }
  &__img-item{
     width: 100%;
    height: 100%;
  }
  &__process{
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .handle-button-wrapper{
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    cursor: default;
    text-align: center;
    color: #fff;
    opacity: 0;
    font-size: 20px;
    transition: opacity .3s;
    background-color: rgba(0,0,0,.5);
    i{
      font-size: 22px;
      color: #fff;
    }
  }
  &__button{
    cursor: pointer;
    flex-shrink: 0;
    &+.file-row__button{
      margin-left:4px;
    }
  }
  .el-progress{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  .progress-cancel{
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content:center;
    .el-button{
      padding-top: 60px;
    }
  }
}
</style>