前台代码提交

src/views/noCar/invoice.vue

@@ -4,6 +4,21 @@
         <el-row>
           <el-col :span="24">
             <div class="top">
+              <div class="top" >
+               <span style="margin-top: 10px;margin-bottom: 10px;">导入文件：</span>
+              <el-upload
+                class="upload-demo"
+                ref="upload"
+                style="margin-bottom: 10px"
+                action="http://invoice.back.jkcredit.com/dishonestuser/upload"
+                :on-preview="handlePreview"
+                :on-remove="handleRemove"
+                :on-change="handleSuccess"
+                :auto-upload="false">
+                <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
+                <el-button style="margin-left: 10px;" size="small" type="success" @click="batchUpload" v-loading.fullscreen.lock="fullscreenLoading">批量查询</el-button>
+              </el-upload>
+            </div>
               <div class="demo-input-suffix">
                 <el-input  placeholder="客户名称" class="input-demo" v-model="formCondition.companyName"></el-input>
                 <el-input  placeholder="运单编号" class="input-demo" v-model="formCondition.waybillNum"></el-input>
@@ -12,10 +27,13 @@
               </div>
               <div class="demo-input-suffix" style="margin-top: 5px;margin-left: 10px;">
                 <el-date-picker v-model="formCondition.invoiceMakeTime" type="daterange" value-format="yyyy-MM-dd HH:mm:SS" range-separator="至" start-placeholder="开票时间始" end-placeholder="开票时间止"></el-date-picker>
-                <el-input  placeholder="发票代码" class="input-demo" v-model="formCondition.invoiceCode"></el-input>
+              </div>
+               <div class="demo-input-suffix" style="margin-top: 5px;margin-right: 10px;">
+                   <el-input  placeholder="发票代码" class="input-demo" v-model="formCondition.invoiceCode"></el-input>
                 <el-input  placeholder="发票号码" class="input-demo" v-model="formCondition.invoiceNum"></el-input>
-                <el-button type="success" style="margin-left: 1%;" @click="loadData">查询</el-button>
-                <el-button type="primary" style="margin-left: 1%;" @click="exportExcel">导出报表</el-button>
+                <el-button style="margin-right: 1%;" @click="DownloadTemplate">查询模板下载</el-button>
+                <el-button type="success" style="margin-right: 1%;" @click="loadData">查询</el-button>
+                <el-button type="primary" style="margin-right: 1%;" @click="exportExcel">导出报表</el-button>
               </div>
             </div>
           </el-col>
@@ -180,7 +198,10 @@ import XLSX from "xlsx";
           return{
             formCondition:{
             },
-           invoiceTable:[],
+            formUserList: {
+            "file": ""
+            },
+            invoiceTable:[],
             hightt:'0px',
             current: 1,
             pagesize: 8,
@@ -211,6 +232,38 @@ import XLSX from "xlsx";
               this.total = response.data.data.total;
             }
           },
+           // 下载模板
+          DownloadTemplate() {
+            var url = hostUrl+"noCar/templateDownload?fileName=4"
+            window.location.href= url;
+
+          },
+            handleRemove(file, fileList) {
+            console.log(file, fileList);
+          },
+
+          handlePreview(file) {
+            console.log(file);
+          },
+          handleSuccess (a) {
+            this.formUserList.file = a.raw;
+          },
+             // 批量上传模板信息
+    async batchUpload() {
+      this.fullscreenLoading = true;
+      const formData = new FormData();
+      formData.append('file', this.formUserList.file);
+      const response = await this.$http.post(`noCar/batchImportNocarInvoices`,formData);
+      var {data: { code, msg, data }} = response;
+      if(code === 0 && msg === '1') {
+         this.fullscreenLoading = false;
+         this.invoiceTable = response.data.data;
+         this.total = response.data.data.length;
+      }else {
+        this.fullscreenLoading = false;
+        this.$message.error('数据存在错误，请检查文件中数据');
+      }
+    },
           // 分页方法
           handleSizeChange(val) {
             this.pagesize = val;