发票下载

zhangxiaoxu123

2022-12-31 d048c7eb44ccaa504b7b4f462d83dbaa25928d8f

 src/components/page/invoice/invoiceForm.vue

@@ -5,9 +5,12 @@
            <div class="invoiceForm-main-inside">
                <div class="invoice-date-box">
                    <el-date-picker
                            class="invoice-date-box"
                            :editable="false"
                            format="yyyy-MM"
                            value-format="yyyy-MM"
                            v-model="date"
                            type="date"
                            type="month"
                            @change="changeDate"
                            placeholder="选择日期">
                    </el-date-picker>
                </div>
@@ -31,7 +34,6 @@
                                    <svg class="iconSvg" style="font-size: 12px" aria-hidden="true">
                                        <use xlink:href="#icon-shijian3"></use>
                                    </svg>
                                    {{item.isShow}}
                                    {{item.enterTime}}
                                </div>
                                <div class="invoiceForm-content">
@@ -57,7 +59,7 @@
                <div class="fapiao-btn">
                    <el-checkbox v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
                    <div class="fapiao-right">
                        <span class="money">金额：<font class="big">235</font>元</span>
                        <span class="money">金额：<font class="big">{{countMoney}}</font>元</span>
                        <el-button size="mini" @click="seeInvoice">下载发票</el-button>
                    </div>
                </div>
@@ -85,8 +87,12 @@
                current:1,
                size:8,
                total:'',
                filedId: []
                filedId: [],
                countMoney:0
            }
        },
        created() {
          this.date = this.$byutil.dateFormat(new Date(), "yyyy-MM");
        },
        mounted() {
            this.getByCarNo()
@@ -99,12 +105,14 @@

            },
            getByCarNo() {
              this.invoiceData = []
                let url = this.$systemconfig.basePath + '/orderrecord/getByCarNo';
                let params = {
                    carNo: this.$route.query.carNo,
                    phone: this.$route.query.phone,
                    current: this.current,
                    size: this.size
                    size: this.size,
                    month: this.date
                }
                this.$byutil.postData(this,url,params,res => {
                    let row = res.data.records
@@ -126,31 +134,57 @@
            handleCheckAllChange(val) {
                this.filedId = []
                let ids = []
                this.countMoney = 0
                this.invoiceData.forEach(item => {
                    ids.push(item.id)
                    ids.push(item.fileId)
                    item.isShow = val
                    this.filedId.push(item.id)
                    this.countMoney += item.money
                    this.filedId.push(item.fileId)
                })
            },
            handleCheckedCitiesChange(value) {
                console.log(value,'value')
                this.filedId = []
                this.countMoney = 0
                let checkedCount = value.length;
                let ids = value.filter(item => {
                    return item.isShow == true
                })

                console.log(ids,'ids=========')
                if(ids.length > 0) {
                    ids.forEach(item => {
                        this.filedId.push(item.id)
                       this.countMoney += item.money
                        this.filedId.push(item.fileId)
                    })
                }
                this.checkAll = checkedCount === ids.length;
            },
            seeInvoice() {  //查看发票
                console.log(this.filedId,'this.filedId==========')
            }
              if(this.filedId.length == 0){
                alert("请至少选择一项")
              }else {
                let result =  this.filedId.join(",")
                let url = this.$systemconfig.basePath + '/fileInfo/download/downloadZips';
                let param = {
                  fileIds : result
                }
                this.$byutil.exportData(this,url,param,res => {
                    console.log(res,'res=========')
                    let blob = new Blob([res], {type: 'application/zip'});
                    let downloadElement = document.createElement("a");
                    downloadElement.style.display = "none";
                    let href = window.URL.createObjectURL(blob); //创建下载的链接
                    downloadElement.href = href;
                    downloadElement.download = '发票下载.zip'
                    document.body.appendChild(downloadElement);
                    downloadElement.click(); //点击下载
                    document.body.removeChild(downloadElement); //下载完成移除元素
                    window.URL.revokeObjectURL(href); //释放掉blob对象
                })
              }
            },
          changeDate(){
              this.getByCarNo();
          }
        }
    }
</script>
@@ -164,16 +198,22 @@
    }
    .invoice-date-box{
        .el-input__prefix{
           right: 3vw  /* 10/7.5 */!important;
            top: 0.93vw  /* 7/7.5 */;
            left: 21vw  /* 10/7.5 */!important;
            top: 2.4vw;
        }
        .el-input__inner{
            border: none!important;
            color: #303030;
            font-size: 3.73vw  /* 28/7.5 */;
            font-weight: 500;
        }
        .el-icon-date:before{
            content: url("../../../assets/images/down.png");
            background: url("../../../assets/images/down1.png") no-repeat center;
            background-size: 100% 100%;
            width: 2.67vw  /* 20/7.5 */;
            height: 0.267rem  /* 20/75 */;
            height: 2.67vw  /* 20/7.5 */;
            content: '';
            display: block;
        }
        input::-webkit-input-placeholder{ /*WebKit browsers*/
            color: #303030;
@@ -183,12 +223,15 @@
        .el-input--prefix .el-input__inner{
            padding-left: 2.67vw  /* 20/7.5 */;
        }
        .el-icon-circle-close:before{
            content: '';
        }
    }

</style>
<style lang="scss" scoped>
    *{
        font-family: '平方';
        font-family: '苹方';
        color: #626262;
    }
    ::v-deep{
@@ -247,6 +290,7 @@
                background-color: #fff;
                padding:1.33vw  /* 10/7.5 */ 2.67vw  /* 20/7.5 */;
                display: flex;
                border-bottom: 1px solid #f5f5f5;
            }
        }

@@ -299,7 +343,6 @@
    }
    .money-small{
        font-size: 3.2vw  /* 24/7.5 */;
        font-weight: lighter;
    }
}
</style>