fe-manage/src/components/common/FJUpload.vue

<template>
  <div>
    <div>
      <Upload v-model:value="files" ref="uploadRef" :file-type="fileType">
        <div class="accessory" style="cursor: pointer">
          <span class="fujian">附件：</span><button v-if="againUpload" class="xkbtn" type="button">上传附件</button>
          <button v-else class="xkbtn" type="button" @click="notClick">附件上传中</button>
        </div>
      </Upload>
      <div class ="tips" style="color: rgb(153, 155, 163);">支持.pdf,.ppt,.pptx,.doc,.docx,.xls,.xlsx,.jpg,.jpeg,.png,.gif,.zip</div>
    </div>
    <div class="mbl_items12" >
      <div
          class="i12_box1"
          v-for="(item, index) in files"
          style="align-items: flex-end"
          :key="index"
      >
        <div class="file_img"></div>
        <div class="file_detail">
          <div class="file_name">
            <span style="color: #6f6f6f;width:200px;display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;">
              {{ 
                item.name.indexOf('http')!==-1?
                item.name.slice(item.name.lastIndexOf('/') + 1)
                :item.name.indexOf('-')!==-1?item.name.slice(0,item.name.indexOf('-')) + item.name.slice(item.name.indexOf('.')) :item.name 
              }}
            </span>
          </div>
          <!--          <div class="file_size">-->
          <!--            <span style="color: #999ba3">{{ item.size }}</span>-->
          <!--          </div>-->
          <div class="file_updata">
            <div class="updatabox">
              <div
                  :class="`${{uploading: 'updatacolor3', done: 'updatacolor' ,error: 'updatacolor2'}[item.status] || 'updatacolor'}`"
                  :style="{width:`${item.status==='uploading'?parseInt(item.percent):100}%`}"></div>
              <div v-if="item.status"
                   style="right:-62px"
                   :class="`${{uploading: 'updataxq1', done: 'updataxq' ,error: 'updataxq2'}[item.status] || 'updataxq'}`">
                {{ {uploading: '正在上传', done: '上传完成', error: '上传失败'}[item.status] || '' }}
              </div>
            </div>
            <div class="upjd" v-if="item.percent">
              <span style="margin: auto 5px">{{ item.status === 'uploading' ? parseInt(item.percent) : 100 }}%</span>
            </div>
          </div>
        </div>
        <div class="file_operation" @click="del(index)" style="color: #4ea6ff">
          删除
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import {defineEmits, defineProps, ref, watch, onMounted} from "vue";
import { message } from "ant-design-vue";
import Upload from "./BaseUpload.vue";

const emit = defineEmits(["changevalue"])
const props = defineProps({
  value: String,
})
const files = ref([])
const againUpload = ref(true)
const uploadRef = ref()

const fileType = ref([
  "jpg",
  "jpeg",
  "png",
  "gif",
  "pdf",
  "ppt",
  "pptx",
  "doc",
  "docx",
  "xls",
  "xlsx",
  "zip",
])

onMounted(() => {
  init()
})

watch(files, () => {
  console.log('lalalalala', files,files.value.length,files.value)
  if(files.value.length!==0){
    if(files.value[files.value.length-1].status){
      if(files.value[files.value.length-1].status=='done'){
        againUpload.value = true;
      }else{
        againUpload.value = false;
      }
    }else{
      againUpload.value = true;
    }
  }else{
    againUpload.value = true;
  }
  files.value && files.value.length && emit('update:value', files.value.filter(e => e.url).map(e => e.url).join(','))
  console.log(files.value.filter(e => e.url).map(e => e.url).join(','));
})

watch(props, init)

function init() {
  if (props.value !== files.value.map(e => e.url).join(',')) {
    files.value = props.value ? props.value.split(',').map(e => ({name: e, url: e})) : []
  }
}

function del(i) {
  uploadRef.value.remove(i)
  emit('changevalue', i)
  againUpload.value = true;
}

function notClick(event) {
  message.destroy();
  message.error("附件上传中，请稍后操作！");
  event.stopPropagation();
  event.preventDefault();
  return false;
}

</script>
<style lang="scss">

.mbl_items12 {
  width: 440px;
  margin-top: 20px;
  margin-right: 13px;

  .i12_box1 {
    display: flex;
    align-items: center;
    padding: 17px 0px 17px 21px;
    border: 1px solid #eff4fc;
    border-radius: 8px;
    margin-bottom: 10px;

    .file_img {
      width: 27px;
      height: 32px;
      background-image: url(@/assets/images/coursewareManage/imgs.png);
      margin-right: 22px;

      img {
        width: 100%;
        height: 100%;
      }
    }

    .file_detail {
      width: 250px;
      margin-right: 21px;

      .file_updata {
        display: flex;
        align-items: center;

        .updatabox {
          position: relative;
          width: 230px;
          height: 5px;
          background-color: rgba(192, 192, 192, 0.25);
          border-radius: 3px;

          .updatacolor {
            position: absolute;
            left: 0;
            width: 100%;
            height: 5px;
            background-color: #57c887;
            border-radius: 3px;
          }

          .updatacolor2 {
            position: absolute;
            left: 0;
            width: 80%;
            height: 5px;
            background-color: #ff7474;
            border-radius: 3px;
          }

          .updatacolor3 {
            position: absolute;
            left: 0;
            width: 60%;
            height: 5px;
            background-color: #4ea6ff;
            border-radius: 3px;
          }

          .updataxq {
            position: absolute;
            right: -62px;
            top: -30px;
            color: #57c887;
          }

          .updataxq1 {
            position: absolute;
            right: -62px;
            top: -30px;
            color: #4ea6ff;
          }

          .updataxq2 {
            position: absolute;
            right: -62px;
            top: -30px;
            color: #ff7474;
          }
        }
      }
    }

    .file_operation {
      display: flex;

      .fobox {
        margin-right: 5px;
        cursor: pointer;
      }
    }
  }
}
.accessory{
.xkbtn {
    cursor: pointer;
    width: 130px;
    height: 40px;
    background: #4ea6ff;
    border-radius: 8px;
    border: 0;
    margin-right: 8px;
    color: #fff;
}
}
</style>