xiaoshi_system/src/utils/model/upload/index.vue

<template>
  <div class="myUpload">
    <div class="myUpload1" v-if="show">
      <div class="myDemo">
        <el-upload
          class="upload-demo"
          action="#"
          :auto-upload="false"
          :drag="drag"
          :multiple="multiple"
          :data="data"
          :name="name"
          :show-file-list="false"
          :accept="accept"
          :list-type="listType"
          :disabled="disabled"
          :limit="limit"
          :on-preview="onPreview"
          :on-remove="onRemove"
          :on-success="onSuccess"
          :on-error="onError"
          :on-progress="onProgress"
          :on-change="onChange"
          :on-exceed="onExceed"
          style="width: 100%"
        >
          <i class="el-icon-upload"></i>
          <div class="el-upload__text">
            <div>将文件拖到此处，或<em>点击上传</em></div>
            <div v-if="accept"><span>只能上传{{ accept }}文件</span></div>
          </div>
        </el-upload>
      </div>
      <div class="line" v-if="fileList.length > 0"></div>
      <div class="fileList" v-if="fileList.length > 0">
        <ul>
          <li v-for="item in fileList" :key="item.guid" @dblclick="ondblclick(item)">
            <myTooltip :content="item.name ? item.name : item.originalName">
              <div class="noWrap">
                <i class="el-icon-document" style="margin-right: 10px"></i
                ><span class="name" @click="checkFiles(item)">{{
                  item.name ? item.name : item.originalName
                }}</span>
              </div>
            </myTooltip>
            <div class="type">{{ item.guid ? "已上传" : "待上传" }}</div>
            <div class="icon" @click="onRemove(item, fileList)">
              <i class="el-icon-close"></i>
            </div>
          </li>
        </ul>
      </div>
    </div>
    <el-dialog
      custom-class="myUpload_dialog"
      :visible.sync="dialogVisible"
      width="500px"
      :before-close="handleClose"
      :append-to-body="true" 
      :close-on-click-modal="false">
      <div slot="title">提示信息<span class="title" ><i class="el-icon-warning"></i></span></div>
      <div>
        <div v-if="discontent.length>0">
          <div  class="content">
            <div>
              <i class="el-icon-error red"></i>
            </div>
            <div @click="showDiscontent = !showDiscontent">
              <i class="el-icon-caret-right" v-if="!showDiscontent"></i>
              <i class="el-icon-caret-bottom" v-else></i>
            </div>
            <div>
              上传文件格式不正确
            </div>
          </div>
          <div v-if="showDiscontent" class="list showList">
            <div v-for="(item,index) in discontent" :key="item.name">{{ item.name }}<span v-if="index != discontent.length-1">，</span></div>
          </div>
        </div>
        <div v-if="exist.length>0">
          <div class="content">
            <div>
              <i class="el-icon-error red"></i>
            </div>
            <div @click="showExist = !showExist">
              <i class="el-icon-caret-right" v-if="!showExist"></i>
              <i class="el-icon-caret-bottom" v-else></i>
            </div>
            <div>
              上传文件名称重复
            </div>
          </div>
          <div v-if="showExist" class="showList">
            <div class="list">{{ exist.map((item) => { return item.name;}).join('，') }}</div>
            <div class="menu">
              <div @click="choose(1)">
                <i class="el-icon-check"></i>
                <span>替换目标中的文件</span>
              </div>
              <div @click="choose(2)">
                <i class="iconfont icon--skip"></i>
                <span>跳过这些文件</span>
              </div>
              <!-- <div @click="choose(3)">
                <i class="iconfont icon-wenbentihuan"></i>
                <span>让我决定每个文件</span>
              </div> -->
            </div>
          </div>
        </div>
        
      </div>
      <div slot="footer">
        <el-button type="primary" size="small" @click="handleClose" >我知道了</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import myTooltip from '../tooltip/index'
export default {
  components: {
    myTooltip
  },
  props: {
    //上传的接口或地址
    action: {
      type: String,
      default: "",
    },
    multiple: {
      type: Boolean,
    },
    data: {
      type: Object,
    },
    name: {
      type: String,
      default: "",
    },
    showFileList: {
      type: Boolean,
    },
    drag: {
      type: Boolean,
      default: true,
    },
    accept: {
      type: String,
      default: "",
    },
    listType: {
      type: String,
      default: "text",
    },
    //是否立即上传
    autoUpload: {
      type: Boolean,
      default: false,
    },
    //文件列表
    fileList: {
      type: Array,
      default: () => {
        return [];
      },
    },
    disabled: {
      type: Boolean,
      default: false,
    },
    limit: {
      type: Number,
    },
  },
  data() {
    return {
      discontent: [],
      showDiscontent:false,
      exist:[],
      exist2:[],
      showExist:false,
      dialogVisible:false,
      show : false
    };
  },
  watch: {},
  computed: {},
  created() {
    this.show = true
  },
  mounted() {
  },
  methods: {
    // 双击已上传的文件
    ondblclick(file) {
      this.$emit('on-dblclick',file)
    },
    onPreview(file) {
      this.$emit("on-preview", file);
    },
    onRemove(file, fileList) {
      this.$emit("on-remove", file, fileList);
    },
    onSuccess(response, file, fileList) {
      this.$emit("on-success", response, file, fileList);
    },
    onError(err, file, fileList) {
      this.$emit("on-error", err, file, fileList);
    },
    onProgress(event, file, fileList) {
      this.$emit("on-progress", event, file, fileList);
    },
    onChange(file, fileList) {
      this.$nextTick(() => {
        if(this.discontent.length>0 || this.exist.length>0){
          this.open()
        }
      });
      //审核上传文件类型
      if (this.accept) {
        var arr = this.accept.split(/,|，/g);
        var fileType = file.name.substring(file.name.lastIndexOf("."));
        var index = arr.findIndex((item) => {
          return item == fileType;
        });
        if (index == -1) {
          this.discontent.push(file);
          return false;
        }
      }
      //验证是否有重复文件
      if(this.fileList.length>0){
        var index = this.fileList.findIndex(item =>{
          return item.name == file.name || item.originalName == file.name
        })
        if(index != -1){
          this.exist.push(file)
          this.exist2.push(this.fileList[index])
          return false
        }
      }
      this.$emit("on-change", file);
      //是否立即上传
      if (this.autoUpload) {
        this.uploadFile(file)
        return false
      }
      
    
    },
    onExceed(file, fileList) {
      this.$emit("on-exceed", file, fileList);
    },
    //查看文件
    checkFiles(file) {
      if(file.guid){

      }else{

      }
    },
    //上传附件
    uploadFile(file){
      let formData = new FormData()
      formData.append('sourceId',this.$constants.sourceId)
      formData.append('files',file.raw)
      this.$api.uploadFile(formData).then(response=>{
        if(response.code == 200){
          file.guid = response.data[0]
          file.raw.guid = response.data[0]
          this.$emit("on-change", file)
        }
      })
    },
    //打开提示弹窗
    open(){
      this.dialogVisible = true
    },
    //关闭弹窗
    handleClose(){
      this.dialogVisible = false
      this.discontent = []
      this.exist = []
      this.exist2=[]
      this.showDiscontent=false
      this.showExist = false
    },
    //操作
    choose(type){
      switch(type){
        case 1:
          this.exist2.forEach((item,index)=>{
            this.onRemove(item,this.fileList)
            this.$emit("on-change", this.exist[index]);
            this.uploadFile(this.exist[index])
          })
          this.handleClose()
          break;
        case 2:
          this.handleClose()
          break;
        case 3:
          break;
      }
    },
 
  },
  destroyed(){
    this.show = false
  },
};
</script>
<style lang="scss">
.myUpload1 {
  .el-upload {
    width: 100%;
    height: 100%;
    .el-upload-dragger {
      width: 100% !important;
      height: 100%;
      border: none;
      border-radius: 0px;
    }
    .el-upload-dragger:hover {
      border: none;
    }
  }
  .el-upload-list {
    display: none;
  }
}
.myUpload_dialog{
  border: 2px solid var(--bg);
  box-shadow: none;
  --fs:15px;
  i{
    cursor: pointer;
  }
  .el-dialog__close{
    color: black;
    font-weight: bold;
  }
  .el-dialog__headerbtn{
    top: 14px;
  }
  .el-dialog__header{
    border-bottom: 2px solid var(--bg) !important;
    color: red;
    padding: 10px;
  }
  .el-dialog__body{
    padding: 20px 10px;
  }
  .el-dialog__footer{
    border-top:none !important;
  }
  .title{
    margin-left: 10px;
  }
  .content{
    display: flex;
    align-items: center;
    padding: 5px 0px;
    color: var(--bg);
    font-size: var(--fs);
    font-family: var(--fm);
    font-weight: bold;
  }
  .red{
    color: red;
  }
  .showList{
    padding-left:var(--fs) ;
  }
  .list{
    padding-top: 5px;
    padding-bottom: 5px;
    font-size: 14px;
    display: flex;
    flex-wrap: wrap;
    // overflow: hidden;
    // white-space: nowrap;
    // text-overflow:ellipsis;
  }
  .menu{
    font-size: 14px;
    i{
      font-size: 14px;
    }
    div{
      font-family: var(--fm);
      padding: 5px 0;
      cursor: pointer;
      color: var(--bg);
      i{
        color: blue;
      }
        span{
          margin-left:10px
        }
    }
    div:hover{
      background: #85afd9;
    }
  }
  
}
</style>
<style lang="scss" scoped>
.myUpload {
  width: calc(100% - 0px);
  height: 185px;
  padding: 5px;
}
.myUpload1 {
  width: calc(100% - 20px);
  height: 100%;
  padding: 5px;
  display: flex;
  align-items: center;
  background: white;
  border: 1px dashed var(--bg);
  border-radius: 10px;
  .myDemo {
    width: 100%;
    height: 100%;
    flex: 1;
  }
  .line {
    width: 1px;
    height: 100%;
    background: var(--bg);
  }
  .fileList {
    width: 100%;
    height: 100%;
    overflow-y: auto;
    flex: 2;
    ul {
      list-style-type: none;
      padding: 0 10px;
      li {
        line-height: initial;
        padding: 5px 10px;
        border-radius: 5px;
        display: flex;
        justify-content: space-between;

        .type {
          min-width:75px;
          display: block;
          color: #57a5f7;
        }
        .icon {
          display: none;
        }
      }
      li:hover {
        background: #f4f4f4;
        .name {
          color: #57a5f7;
          cursor: pointer;
        }
        .type {
          min-width:75px;
          display: none;
        }
        .icon {
          display: block;
          cursor: pointer;
        }
      }
    }
  }
}
</style>