finance-ssr/components/common/upload1.vue

<!--出账申请上传组件-->
<template id="upload1">
  <div>
    <input type="file" class="com-input" @change="update($event,filelist,transfer.id)" accept="image/jpeg,image/jpg,image/gif,image/bmp,image/png,.pdf,.doc,.docx,.xls,.xlsx" />
    <div style="margin-left: 100px">
      <div v-if="filelist==0">
        <div v-for="(item,index1) in fileList0">
          <span v-text="item.name"></span>
          <span  @click="deleteAttach(item.id,0,index1)" class="delete" v-if="transfer.status==201 || transfer.status==205">
                        <i class="fa fa-trash"></i>删除
                        </span>
        </div>
      </div>
      <div v-if="filelist==1">
        <div v-for="(item,index1) in fileList1">
          <span v-text="item.name"></span>
          <span  @click="deleteAttach(item.id,1,index1)" class="delete" v-if="transfer.status==201 || transfer.status==205">
                        <i class="fa fa-trash"></i>删除
                        </span>
        </div>
      </div>
      <div v-if="filelist==2">
        <div v-for="(item,index1) in fileList2">
          <span v-text="item.name"></span>
          <span  @click="deleteAttach(item.id,2,index1)" class="delete" v-if="transfer.status==201 || transfer.status==205">
                        <i class="fa fa-trash"></i>删除
                        </span>
        </div>
      </div>
      <div v-if="filelist==3">
        <div v-for="(item,index1) in fileList3">
          <span v-text="item.name"></span>
          <span  @click="deleteAttach(item.id,3,index1)" class="delete" v-if="transfer.status==201 || transfer.status==205">
                        <i class="fa fa-trash"></i>删除
                        </span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
    export default {
     data:function() {
       return {

         //附件1
         fileList0: [],
         //附件2
         fileList1: [],
         fileList2: [],
         fileList3: [],
         attach: {id: '', type: '', aaid: '', name: '', path: '', size: ''},
          }
        },
      props: ['filelist', 'transfer'],
      mounted:function(){
        for(var i=0;i<this.transfer.attaches.length;i++){
          if(this.transfer.attaches[i].type=='交易买方贸易合同'){
            this.fileList0.push(this.transfer.attaches[i])
          }else if(this.transfer.attaches[i].type=='增值税发票'){
            this.fileList1.push(this.transfer.attaches[i])
          }else if(this.transfer.attaches[i].type=='货运单据'){
            this.fileList2.push(this.transfer.attaches[i])
          }else if(this.transfer.attaches[i].type=='其他'){
            this.fileList3.push(this.transfer.attaches[i])
          }
        }
      },
      methods:{
        update:function(e, index,aaid) {
          let file = e.target.files[0]
          this.attach.name = e.target.files[0].name;
          this.attach.aaid = aaid;
          if (index == 0) {
            this.attach.type = '交易买方贸易合同';
          } else if (index == 1) {
            this.attach.type = '增值税发票';
          } else if (index == 2) {
            this.attach.type = '货运单据';
          } else if (index == 3) {
            this.attach.type = '其他';
          }
          let param = new FormData()
          param.append('file', file, file.name)
          param.append('type', this.attach.type)
          param.append('aaid', this.attach.aaid)
          param.append('chunk', '0')
          let _this = this
            let config = {
              headers: {'Content-Type': 'multipart/form-data'}
            }
           return this.$axios.post('/accountapply/attachsave', param, config)
              .then(response => {
                if(response.data.type == '交易买方贸易合同'){
                  _this.fileList0.push(response.data)
                }else if (response.data.type == '增值税发票') {
                  _this.fileList1.push(response.data)
                } else if (response.data.type == '货运单据') {
                  _this.fileList2.push(response.data)
                } else if (response.data.type == '其他') {
                  _this.fileList3.push(response.data)
                }
              })
        },
        deleteAttach: function (id, index, index1) {
          let _this = this;
          var params = new URLSearchParams();
          params.append('id', id)
          this.$axios.post('/accountapply/attachdelete', params)
            .then(function () {
              switch (index) {
                case 0:
                  _this.fileList0.splice(index1, 1)
                  break;
                case 1:
                  _this.fileList1.splice(index1, 1)
                  break;
                case 2:
                  _this.fileList2.splice(index1, 1)
                  break;
                case 3:
                  _this.fileList3.splice(index1, 1)
                  break;
              }
            }).catch(function () {
            alert('删除失败')
          })

        }

     },
    }
</script>