下载excel

src/api/WorkshopProcurement/OutsourcingMaterialsInvoice.js

@@ -1,14 +1,14 @@
 import request from '@/utils/request'
 
 // 发票查询
-export function searchInvoice(pageCurrent, pageSize, check1, num1, check2, supplierName0) {
+export function searchInvoice(pageCurrent, pageSize, check1, num1, check2, supplierName0, num2, num3, num4, num5, num6) {
   return request({
     url: '',
     method: 'post',
     data: {
       type: '1',
       name: '备料管理_发票_查询数据',
-      param: '发票号_check=' + check1 + '&发票号=' + num1 + '&供应商名称_check=' + check2 + '&供应商名称=' + supplierName0,
+      param: '发票号_check=' + check1 + '&发票号=' + num1 + '&供应商名称_check=' + check2 + '&供应商名称=' + supplierName0 + '&供应商流水号_check=' + num2 + '&供应商流水号=' + num3 + '&日期_check=' + num4 + '&开始日期=' + num5 + '&结束日期=' + num6,
       Pagination: pageCurrent + '&' + pageSize
     }
   })
@@ -156,3 +156,13 @@ export function addMateriel(num, num1) {
     }
   })
 }
+export function getGongyingshang() {
+  return request({
+    url: '',
+    method: 'post',
+    data: {
+      type: '1',
+      name: '备料管理_发票_初始化获取供应商'
+    }
+  })
+}

src/views/WorkshopProcurement/OutsourcingMaterialsInvoice/index.vue

@@ -1,24 +1,47 @@
 <template>
   <div class="app-container">
     <el-card>
-      <span>发票号:</span>
-      <el-input v-model="invoiceNum" placeholder="发票号" size="small" style="margin: 3px 0;width: 130px" clearable/>
-      <span style="margin-left: 10px">供应商:</span>
-      <el-input v-model="supplierName0" placeholder="供应商" size="small" style="width:130px" clearable/>
-      <el-tooltip :open-delay="1200" effect="dark" content="查询外购备料发票信息" placement="top">
-        <el-button
-          type="success"
+      <el-row>
+        <span v-show="false">发票号:</span>
+        <el-input v-show="false" v-model="invoiceNum" placeholder="发票号" size="small" style="margin: 3px 0;width: 130px" clearable/>
+        <span>供应商:</span>
+        <el-input v-show="false" v-model="supplierName0" placeholder="供应商" size="small" style="width:130px" clearable/>
+        <el-select v-model="gongyingshangValue" placeholder="供应商" style="width: 180px" size="small" filterable clearable @change="searchTable1">
+          <el-option
+            v-for="item in gongyingshang"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value"/>
+        </el-select>
+        <span class="demonstration">时间段:</span>
+        <el-date-picker
+          v-model="startTime"
+          value-format="yyyy-MM-dd"
           size="small"
-          icon="el-icon-search"
-          style="margin-left: 10px"
-          @click="total1=0;pageCurrent1=1;pageSize1=10;searchTable1()">查询</el-button>
-      </el-tooltip>
-      <el-button
-        type="primary"
-        size="small"
-        icon="el-icon-circle-plus-outline"
-        style="margin-left: 10px"
-        @click="addTable1()">新增发票</el-button>
+          style="width: 180px"
+          type="date"
+          placeholder="选择日期"/>
+        <span class="demonstration">~</span>
+        <el-date-picker
+          v-model="endTime"
+          value-format="yyyy-MM-dd"
+          size="small"
+          style="width: 180px"
+          type="date"
+          placeholder="选择日期"/>
+        <el-tooltip :open-delay="1200" effect="dark" content="查询外购备料发票信息" placement="top">
+          <el-button
+            type="success"
+            size="small"
+            icon="el-icon-search"
+            style="margin-left: 10px"
+            @click="total1=0;pageCurrent1=1;pageSize1=10;searchTable1()">查询</el-button>
+        </el-tooltip>
+        <el-button type="primary" size="small" icon="el-icon-circle-plus-outline" style="margin-left: 10px" @click="addTable1()">新增发票</el-button>
+        <el-button type="primary" size="small" icon="el-icon-download" style="margin-left:10px" @click="downloadExcel()">导出</el-button>
+      </el-row>
+      <!--<el-row style="margin-top: 5px">-->
+      <!--</el-row>-->
     </el-card>
     <el-card>
       <el-table
@@ -234,12 +257,19 @@
   </div>
 </template>
 
-<script>import { searchInvoice, addInvoice, editInvoice, deleteInvoice, searchSupplier, searchInvoiceDetail, searchArriveOrder, addMateriel, deleteInvoiceMX } from '@/api/WorkshopProcurement/OutsourcingMaterialsInvoice'
+<script>
+import { searchInvoice, addInvoice, editInvoice, deleteInvoice, searchSupplier, searchInvoiceDetail, searchArriveOrder, addMateriel, deleteInvoiceMX, getGongyingshang } from '@/api/WorkshopProcurement/OutsourcingMaterialsInvoice'
 import { mapGetters } from 'vuex'
+import { ExcelDownLoad } from '@/utils/request'
+
 export default {
   name: '', // 发票交接单
   data() {
     return {
+      gongyingshangValue: '',
+      gongyingshang: [],
+      startTime: '',
+      endTime: '',
       contractNumValue: '',
       supplierName0: '',
       contractNums: [],
@@ -305,11 +335,23 @@ export default {
           })
         }
       })
+      this.gongyingshangValue = ''
+      this.gongyingshang = []
+      getGongyingshang().then(response => {
+        for (let i = 0; i < response.data.length; i++) {
+          this.gongyingshang.push({
+            label: response.data[i].供应商名称,
+            value: response.data[i].供应商
+          })
+        }
+      })
     },
     searchTable1() {
       this.invoiceNum ? this.check1 = 1 : this.check1 = 0
       this.supplierName0 ? this.check2 = 1 : this.check2 = 0
-      searchInvoice(this.pageCurrent1, this.pageSize1, this.check1, this.invoiceNum, this.check2, this.supplierName0).then(response => {
+      this.gongyingshangValue ? this.check3 = 1 : this.check3 = 0
+      this.startTime && this.endTime ? this.check4 = 1 : this.check4 = 0
+      searchInvoice(this.pageCurrent1, this.pageSize1, this.check1, this.invoiceNum, this.check2, this.supplierName0, this.check3, this.gongyingshangValue, this.check4, this.startTime, this.endTime).then(response => {
         for (let j = 0; j < response.data.rows.length; j++) {
           response.data.rows[j].开票金额 = parseInt(response.data.rows[j].开票金额 * 100) / 100
           if (response.data.rows[j].开票时间 !== null) {
@@ -438,7 +480,6 @@ export default {
       })
     },
     deleteTable1(row) {
-      console.log(row)
       this.$confirm('确认删除吗?', '提示', {
         confirmButtonText: '确定',
         cancelButtonText: '取消',
@@ -506,9 +547,69 @@ export default {
           message: '已取消操作'
         })
       })
+    },
+    downloadExcel() {
+      if (!this.startTime) {
+        this.$message.error('请选择开始日期')
+      } else if (!this.endTime) {
+        this.$message.error('请选择结束日期')
+      } else if (!this.gongyingshangValue) {
+        this.$message.error('请选择供应商')
+      } else {
+        for (let i = 0; i < this.gongyingshang.length; i++) {
+          if (this.gongyingshang[i].value === this.gongyingshangValue) {
+            var name = this.gongyingshang[i].label
+          }
+        }
+        const _ExcelDownLoad = ExcelDownLoad
+        this.download(`${_ExcelDownLoad}?startTime=${this.startTime}&endTime=${this.endTime}&Gongyingshang=${this.gongyingshangValue}&name=${name}`)
+      }
+    },
+    /**
+     * 下载
+     * @param  {String} url 目标文件地址
+     * @param  {String} filename 想要保存的文件名称
+     */
+    download(url) {
+      this.getBlob(url, function(blob, filename) {
+        saveAs(blob, filename)
+      })
+    },
+    getBlob(url, cb) {
+      var xhr = new XMLHttpRequest()
+      xhr.open('GET', url, true)
+      xhr.responseType = 'blob'
+      xhr.onload = function() {
+        if (xhr.status === 200) {
+          const name = xhr.getResponseHeader('content-disposition').split('=')[1]
+          cb(xhr.response, name)
+        }
+      }
+      xhr.send()
     }
   }
 }
+/**
+ * 保存
+ * @param  {Blob} blob
+ * @param  {String} filename 想要保存的文件名称
+ */
+function saveAs(blob, filename = '下载文件.xls') {
+  if (window.navigator.msSaveOrOpenBlob) {
+    navigator.msSaveBlob(blob, filename)
+  } else {
+    var link = document.createElement('a')
+    var body = document.querySelector('body')
+    link.href = window.URL.createObjectURL(blob)
+    link.download = filename
+    // fix Firefox
+    link.style.display = 'none'
+    body.appendChild(link)
+    link.click()
+    body.removeChild(link)
+    window.URL.revokeObjectURL(link.href)
+  }
+}
 </script>
 
 <style scoped>