vue antdesign upload 2 基本使用

<template>
  <div>

    <a-card :bordered="false">
      <div class="table-operator" >
        <a-button type="primary"  icon="plus" @click="modalClick($event,'','add')">增加</a-button>
      </div>
      <a-table
        :columns="columns"
        :data-source="loadData"
        :loading="loading"
        :selections="true"
        :rowClassName="rowClassName"
        :customRow="customRow"
        :pagination="pagination"
        :rowKey="(record)=>record.tsCustContract.infoId"
        @change="nextClick"
        class="borderTable"
      >
        <template v-slot:serial="text,record,index">
          <div>
            <span>{{ serialNumber(text,record,index)}}</span>
          </div>
        </template>
        <template v-slot:noSlot="text,record,index">
          <div style="position:relative;width:100px;">
            <span>{{text?text:' '}}</span>
            <span v-if="record.tsCustContract.state == 2"
                  style="width:66px;height:25px;background: #bd223a;border-radius:5px 0 5px 0;color:#fff;
  position:absolute;top:-24px;right:-60px"
            >即将到期</span>
          </div>
        </template>
        <template v-slot:custIdSlot="text,record,index">
          <span>{{text ? judgeObj(dictDataMap['ts-customer'],text,'name') : ''}}</span>

        </template>

        <template v-slot:state="text,record,index">
          <span v-if="record.tsCustContract.state == '1'">有效</span>
          <span v-if="record.tsCustContract.state == '0'">无效</span>
          <span v-if="record.tsCustContract.state == '2'">即将到期</span>
          <span v-else>&nbsp;&nbsp;</span>
        </template>

        <template v-slot:action="text,record,index">
          <a-button @click.stop="modalClick($event,record,'views')" type="link" class="ownerLinkFirst">查看</a-button>
          <a-button @click.stop="modalClick($event,record,'edit')" type="link" class="ownerLink">修改</a-button>
          <a-popconfirm
            title="是否确认删除此条数据?"
            ok-text="确认"
            cancel-text="取消"
            @confirm="delFormTsCustContract($event,record)"
            @cancel="cancel"
          >
            <a-button type="link" class="ownerLink">删除</a-button>
          </a-popconfirm>
        </template>
      </a-table>
    </a-card>
    <!---弹出框-->
    <a-modal
      :title="modalTitle"
      :visible="modalVisible"
      :confirm-loading="confirmLoading"
      :width="1000"
      @cancel="handleCancel"
    >
      <a-form-model
        ref="ruleForm"
        :model="tsCustContract"
        :rules="rules"
        v-bind="modelObj"
      >
        <div v-if="modalOptType!='views'">
          <a-row>
            <a-col :span="21"><h6 class="tab_title">附件列表</h6></a-col>
            <a-col :span="3">
              <a-upload
                :data="{upload_sysName:'tsk',upload_folder:'tsAttachFile'}"
                :action="apiUrl.uploadServlet"
                @change="uploadChange"
                :before-upload="beforeAvatarUpload"
                :fileList="fileList"
                :multiple="true">
                <a-button type="primary">文件上传</a-button>
              </a-upload>
            </a-col>
          </a-row>
          <div class="upload_box">
            <a-row>
              <a-col :md="4" v-for="(item,index) in attachFileData" :key="index">
                <div class="upload_div">
                  <p v-if="item.tsAttachFile.attachType == 'jpg' || item.tsAttachFile.attachType == 'png'" style="text-align: center"><img :src="item.tsAttachFile.attachUrl" style="width:80px;height:80px"/></p>
                  <p v-if="item.tsAttachFile.attachType == 'txt'" style="width:85px;height:85px;margin:0 auto;text-align: center;line-height: 85px;border:1px solid #eee;font-weight: bold">
                    <img src="@/assets/images/txt_img.jpg" style="width:80px;height:80px"/>
                  </p>
                  <p v-if="item.tsAttachFile.attachType == 'docx'||item.tsAttachFile.attachType == 'doc'" style="width:85px;height:85px;margin:0 auto;text-align: center;line-height: 85px;border:1px solid #eee;font-weight: bold">
                    <img src="@/assets/images/doc_img.jpg" style="width:80px;height:80px"/>
                  </p>
                  <p v-if="item.tsAttachFile.attachType == 'pdf'" style="width:85px;height:85px;margin:0 auto;text-align: center;line-height: 85px;border:1px solid #eee;font-weight: bold">
                    <img src="@/assets/images/pdf_img.jpg" style="width:80px;height:80px"/>
                  </p>
                  <p style="text-align: center">{{item.tsAttachFile.attachName}}</p>
                  <p class="upload_iconclose" v-if="modalOptType='edit'" @click="delFormTsAttachFileInfoId(item)">
                    <a-icon type="close"  /></p>
                </div>
              </a-col>
            </a-row>
          </div>
        </div>
        <div v-else>
          <h5 class="file_title">附件列表</h5>
          <div clas="upload_box" style="border:1px solid #eee;padding:10px">
            <a-row>
              <a-col :span="3" v-for="(item,index) in attachFileData" :key="index">
                <p v-if="item.tsAttachFile.attachType == 'jpg' || item.tsAttachFile.attachType == 'png'" style="text-align: center">
                  <img :src="item.tsAttachFile.attachUrl" style="width:80px;height:80px"/>
                </p>
                <p v-if="item.tsAttachFile.attachType == 'txt'" style="width:85px;height:85px;margin:0 auto;text-align: center;line-height: 85px;border:1px solid #eee;font-weight: bold">
                  <img src="@/assets/images/txt_img.jpg" style="width:80px;height:80px"/>
                </p>
                <p v-if="item.tsAttachFile.attachType == 'docx'||item.tsAttachFile.attachType == 'doc'" style="width:85px;height:85px;margin:0 auto;text-align: center;line-height: 85px;border:1px solid #eee;font-weight: bold">
                  <img src="@/assets/images/doc_img.jpg" style="width:80px;height:80px"/>
                </p>
                <p v-if="item.tsAttachFile.attachType == 'pdf'" style="width:85px;height:85px;margin:0 auto;text-align: center;line-height: 85px;border:1px solid #eee;font-weight: bold">
                  <img src="@/assets/images/pdf_img.jpg" style="width:80px;height:80px"/>
                </p>
                <p style="text-align: center">{{item.tsAttachFile.attachName}}</p>
              </a-col>
            </a-row>
          </div>
        </div>
      </a-form-model>
      <template v-slot:footer>
        <a-button @click="handleCancel">取消</a-button>
        <a-button type="primary" @click="handleOk" v-if="modalOptType!='views'">确定</a-button>
      </template>
    </a-modal>
  </div>
</template>
<script>
  import { eachArray,judgeObj, eachObj,dictDataInit,getDataCommon,createUuid } from '@/utils/util'
  import urlApi from '@/config/configUrl'
  export default {
    data() {
      return {
        fileList: [],//所有附件的集合
        newFileList: [],
        attachFileData:[],
      }
    },
    computed: {
      apiUrl() {
        return urlApi
      }
    },
    methods: {
      searchFormTsAttachFile(objId){
        let requestParameters = Object.assign({
          pageName: 'ts-attach-file',
          formName: 'searchForm',
          // 'tsAttachFile.w_sysEname': this.$sysEname,
          orderBy: 'create_time desc'
        })
        getCommonList(requestParameters).then(res => {
          //console.log('获取上传数据==',res)
          this.attachFileData = []
          res.rows.forEach((item)=>{
            if(item.tsAttachFile.objId == objId && item.tsAttachFile.objName == 'ts-cust-contract'){
              this.attachFileData.push(item)
            }
          })
          console.log('相对应infoid下的上传数据',this.attachFileData)
        })
      },
      modalClick(e, obj, type) {
        this.modalOptType = type
        switch (type) {
          case 'add':
            this.tsCustContract = Object.assign({},initFormObj);
            this.fileList = []
            this.attachFileData = []
            break;
          case 'views':
            this.tsCustContract = obj.tsCustContract;
            this.searchFormTsAttachFile(obj.tsCustContract.infoId)
            break
          case 'edit':
            this.tsCustContract = Object.assign({},obj.tsCustContract);
            this.fileList = []
            this.searchFormTsAttachFile(obj.tsCustContract.infoId)
            break;
        }
        this.$nextTick(function(){
          this.$refs.ruleForm.clearValidate()
        })
      },
      addFormTsAttachFile(infoId){
        //this.tsCustContractPK=res.result.tsCustContract_infoId
        const requestParameters=Object.assign({
          pageName: 'ts-attach-file-addbatch',
          formName: 'addFormBatch',
          'tsAttachFile.objId':infoId,
          'tsAttachFile.objName':'ts-cust-contract'
        })
        requestParameters['tsAttachFile.splitAttr']='attachName'
        requestParameters['ifBatch']='T'
        requestParameters['tsAttachFile']=this.newFileList//this.configList
        console.log('添加附件====',this.newFileList)
        getCommonSubmit(requestParameters).then((res)=>{
        })
      },
      editFormTsCustContract(){
        this.tsCustContract.orgEname = this.tsCustContract.orgCode;//增加默认机构标识
        const requestParameters=eachObj(this.tsCustContract,'tsCustContract');
        //this.getFileEdit(this.tsCustContract.infoId,requestParameters)
        requestParameters.pageName='ts-cust-contract'
        requestParameters.formName='editForm'
        requestParameters['tsCustContract.w_infoId'] = this.tsCustContract.infoId
        requestParameters['tsCustContract.startTime'] = moment(this.tsCustContract.startTime).format('YYYY-MM-DD')
        requestParameters['tsCustContract.endTime'] = moment(this.tsCustContract.endTime).format('YYYY-MM-DD')
        console.log('修改=====',this.newFileList)
        getCommonSubmit(requestParameters).then(res => {
          this.addFormTsAttachFile(res.result.tsCustContract_infoId)
          if(res.flag == 'T'){
            this.modalVisible = false;
            this.searchFormTsCustContract();
            this.searchFormTsAttachFile(res.result.tsCustContract_infoId)
          }else{
            this.$message.error(res.msg);
          }
        })
      },
      editFormTsAttachFile(infoId){
        //this.tsCustContractPK=res.result.tsCustContract_infoId
        const requestParameters=Object.assign({
          pageName: 'ts-attach-file',
          formName: 'editForm',
          'tsAttachFile.objId':infoId,
          'tsAttachFile.objName':'ts-cust-contract'
        })
        requestParameters['tsAttachFile.splitAttr']='attachName'
        requestParameters['ifBatch']='T'
        requestParameters['tsAttachFile']=this.newFileList//this.configList
        console.log('hahaha',this.newFileList)
        getCommonSubmit(requestParameters).then((res)=>{
          console.log('1111',res)
          this.searchFormTsAttachFile()
        })
      },
      handleOk(){
        this.$nextTick(function(){
          console.log(this.$refs,this.tsCustContract,'this.$refs')
          this.$refs.ruleForm.validate(valid => {
            console.log(valid,'valid')
            if (valid) {
              if(this.modalOptType == 'add'){
                this.addFormTsCustContract()
              }else if(this.modalOptType == 'edit'){
                this.editFormTsCustContract()
              }
            }
          })
        })
      },
      delFormTsCustContract(e, obj) {
        let id = obj.tsCustContract.infoId;
        let requestParameters = {
          pageName: 'ts-cust-contract',
          formName: 'delForm',
          'tsCustContract.w_infoId': id,
        };
        getCommonSubmit(requestParameters).then(res => {
          if (res.flag == 'T') {
            this.delFormTsAttachFile(id)
          } else {
            this.$message.error(res.msg);
          }
        })
      },
      delFormTsAttachFile(id) { //通过objid删除
        let requestParameters = {
          pageName: 'ts-attach-file',
          formName: 'delForm',
          'tsAttachFile.w_objId': id,
          'tsAttachFile.w_objName':'ts-cust-contract'
        };
        getCommonSubmit(requestParameters).then(res => {
          console.log("删除附件",res)
          this.searchFormTsCustContract();
        })
      },
      delFormTsAttachFileInfoId(item) {  //通过infoid删除
        console.log(item,'shanle')
        let requestParameters = {
          pageName: 'ts-attach-file',
          formName: 'delForm',
          'tsAttachFile.w_infoId': item.tsAttachFile.infoId,
        };
        getCommonSubmit(requestParameters).then(res => {
          this.newFileList.splice(item,1)
          console.log('this.newFileList====',this.newFileList)
          console.log("删除附件",res)
          this.searchFormTsAttachFile(item.tsAttachFile.objId)
        })
      },
      //上传文件
      uploadChange({fileList}) {
        this.newFileList = []
        this.fileList = fileList
        this.fileList.forEach(item => {
          const {status, response = {}} = item
          if (status === 'done') {
            const {fileNameOld, fileType, murl} = response
            this.newFileList.push({
              infoId: createUuid('pk'),
              attachName: fileNameOld,
              attachType: fileType,
              attachUrl: murl,
              attachFolder: 0,
            })
          }
        })
      },
      beforeAvatarUpload(file){
        const isLt = file.size / 1024 / 5 >= 1 && file.size / 1024 / 1024 / 10 <= 1;
        if (!isLt) {
          this.$message.error("上传文件大小不得小于5KB,不得大于10MB!");
        }
        return isLt;
      },
    }
  }
</script>
<style scoped>
  .ant-table-tbody > tr.rowClassColor{
    background: #d00;
  }
  .ant-table-tbody > tr.ant-table-row.ant-table-row-level-0.rowClassColor > td{
    color:#bd223a !important;
    background: #d00 !important;
  }



  .tab_title{
    font-size:14px;
    position:relative;
    padding:20px 10px;
    font-weight: bold
  }
  .tab_title:before{
    content: " ";
    display:block;
    width:3px;
    height:25px;
    background: #ccc;
    position: absolute;
    top:18px;
    left:0px;
  }
  .upload_box{
    border:1px solid #eee;
    padding:10px;
  }
  .file_title{
    font-size:16px;
    line-height: 40px;
  }
  .upload_box p{
    text-align: center;
  }
  .upload_box h4{
    width:60px;
    height:65px;
    text-align: center;
    line-height: 65px;
  }
  .upload_div{
    width:85px;
    position:relative;
  }
  .upload_iconclose{
    position:absolute;
    top:0;
    right:6px;
    cursor: pointer;
  }
  .upload_iconclose .anticon{
    color:#bd223a
  }
  /deep/ tr.ant-table-row.ant-table-row-level-0.clickRowStyle td{
    color:#c94454
  }
</style>