admin-web-master/src/views/online/reportDownload/index.vue

<template>
  <div style="background-color:#f7f7f7;padding:10px 10px;">
    <div class="zhuti">
      <div style="height:58px;line-height:58px;">
        <div style="color:#0006"> <span>交易联机</span> <span style="padding:0 5px;">></span> <span
            style="color:#000000e6">报表下载</span></div>
      </div>
      <div>
        <div class="formSearch">
          <el-form
            :inline="true"
            :model="pageindex"
            label-position="left"
          >
            <el-form-item label="支付状态">
              <el-select
                v-model="pageindex.payStatus"
                placeholder="请选择"
                style="width: 168px;"
              >
                <el-option label="PAY_SUCCESS" value="PAY_SUCCESS" />
              </el-select>
            </el-form-item>
            <el-form-item label="选择日期">
              <el-date-picker
                    v-model="createDate"
                    type="daterange"
                    value-format="yyyy-MM-dd"
                    style="width: 200px;"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期">
                  </el-date-picker>
            </el-form-item>
            <el-form-item>
              <el-button
                plain
                style="background-color: #3F9B6A;color: #fff;border-color:#3F9B6A;"
                @click="onSubmit"
                >查询
              </el-button>
              <el-button
                plain
                style="color: #000; border-color: #d5d5d5;"
                @click="resetting"
                >重置
              </el-button>
            </el-form-item>
          </el-form>
        </div>
        <div style="margin-bottom:20px;">
          <el-button
            style="background-color: #3F9B6A;color: #fff;"
          @click="downloadImage"
            >下载
          </el-button>
        </div>
        <!-- 表格 -->
        <el-table
          :data="tableData"
           :header-cell-style="{fontSize: '14px',color:'#0009',fontWeight: 'normal',backgroundColor:'#F2F3F5'}"
        >
          <el-table-column
            label="序号"
            min-width="4%"
          >
          <template slot-scope="scope">
            {{scope.$index+1}}
          </template>
          </el-table-column>
          <el-table-column
            label="订单号"
            prop="orderFormId"
            width="auto"
            min-width="12%"
          >
          </el-table-column>
          <el-table-column
            label="交易号"
            prop="payId"
            width="auto"
            min-width="12%"
			show-overflow-tooltip
          >
          </el-table-column>
          <el-table-column
            label="账单金额"
            prop="price"
            width="auto"
            min-width="12%"
          >
          </el-table-column>
          <el-table-column
            label="平台流水"
            prop="realPrice"
            width="auto"
            min-width="7%"
          >
          </el-table-column>
          <el-table-column
            label="交易流水"
            prop="realPrice"
            width="auto"
            min-width="7%"
          >
          </el-table-column>
          <el-table-column
            prop="payTime"
            label="支付时间"
            width="auto"
            min-width="10%"
			show-overflow-tooltip
          >
		<template slot-scope="scope">
			{{formatIsoToDateTime(scope.row.payTime)}}
		</template>
          </el-table-column>
          <el-table-column
            prop="payChannel"
            label="支付方式"
            width="auto"
            min-width="10%"
          >
          </el-table-column>
          <el-table-column
            prop="payStatus"
            label="交易状态"
            width="auto"
            min-width="10%"
          >
          </el-table-column>
        </el-table>
        <div class="fenye">
          <div style="line-height: 34px">共{{total}}条</div>
          <el-pagination
            class="pagination"
            :hide-on-single-page="flag"
            background
            :current-page="pageindex.pageNumber+1"
            :page-sizes="[10, 20, 50, 100]"
            :page-size="pageindex.pageSize"
            layout="prev, pager,next"
            :total="total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import {reportDownload,excelMerchantQueriesOrderDetails} from '../../../api/online.js'
export default {
  data () {
    return {
      total: 0,
      flag: false,
    tableData: [],
    createDate:[],
    pageindex: {
      payStatus:'',
       pageSize: 10,
      pageNumber: 0,
      startTime:'',
       endTime:'',
    },
    }
  },
  computed: {},
  mounted(){
    this.getOrder()
  },
  methods: {
          async getOrder(){
           const res =  await reportDownload(this.pageindex)
            this.tableData = res.data.content
          this.total = res.data.totalElements
            },
   async downloadImage(){
     let res = await excelMerchantQueriesOrderDetails(this.pageindex)
    if(!res){
      return
    }
    const blob = new Blob([res], { type: 'application/vnd.ms-excel' })
    const fileName = '报表.xls'
    if ('download' in document.createElement('a')) {
       // 非IE下载
       const elink = document.createElement('a')
       elink.download = fileName
       elink.style.display = 'none'
       elink.href = URL.createObjectURL(blob)
       document.body.appendChild(elink)
       elink.click()
       URL.revokeObjectURL(elink.href) // 释放URL 对象
       document.body.removeChild(elink)
     } else {
      // IE10+下载
      navigator.msSaveBlob(blob, fileName)
    }
    this.$message({
      message: '下载成功',
      type: 'success'
    })
  // const imageUrl = 'https://jy.scjysm.asia:18086/mefile/file/static/tabbar/export.xlsx';
  //     // 创建一个隐藏的<a>标签
  //     const link = document.createElement('a');
  //     link.href = imageUrl;
  //     link.download = '报表.xlsx'; // 设置下载的文件名
  //     document.body.appendChild(link);
  //     link.click(); // 触发点击事件
  //     document.body.removeChild(link); // 下载完成后移除<a>标签
    },
	formatIsoToDateTime(isoTime) {
		// 1. 空值/非法值处理
		if (!isoTime) return '';
		if (typeof isoTime !== 'string') return '';
	
		// 2. 解析时间（兼容带时区的ISO格式，如2025-03-11T14:19:54+08:00）
		const date = new Date(isoTime.replace('T', ' ').replace(/-/g, '/'));
		if (isNaN(date.getTime())) return '';
	
		// 3. 补零函数（确保两位数）
		const pad = (num) => num.toString().padStart(2, '0');
	
		// 4. 提取时间分量（注意：月份从0开始，需+1）
		return  `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())} ${pad(date.getHours())}:${pad(date.getMinutes())}:${pad(date.getSeconds())}`
		//  [
		// 	date.getFullYear(), // 年
		// 	pad(date.getMonth() + 1), // 月（0→1月）
		// 	pad(date.getDate()), // 日
		// 	pad(date.getHours()), // 时
		// 	pad(date.getMinutes()), // 分
		// 	pad(date.getSeconds()) // 秒
		// ].join('-').replace(/(\d{4})-(\d{2})-(\d{2})/, '$1-$2-$3 ').slice(0, 19);
		// 最终格式：YYYY-MM-DD HH:mm:ss（精确到秒，共19位）
	},
    handleSizeChange(){
    },
	
    handleCurrentChange(val){
	 this.pageindex.pageNumber = val -1
	 this.getOrder()
    },
    onSubmit(){
      if(this.createDate.length !=0){
         this.pageindex.startTime =this.createDate[0]
		 this.pageindex.endTime =this.createDate[1]
      }
        this.getOrder()
    },
    resetting(){
      this.createDate= [],
    this.pageindex = {
      payStatus:'',
       pageSize: 10,
      pageNumber: 0,
      startTime:'',
       endTime:'',
    }
        this.getOrder(this.pageindex)
    },
  }
}
</script>
<style scoped >
.zhuti {
    padding: 0 20px 20px 20px;
    min-height: calc(100vh - 50px - 20px);
    background-color: #Fff;
    position: relative;
  }
/deep/ .el-form-item__content {
  line-height: 0;
}
.tableBtn {
  display: inline-block;
  margin-right: 10px;
}
::v-deep .formSearch {
  position: relative;
  margin-bottom: 20px;
  display: flex;
  width: 100%;
  height: 30px;
  font-size: 12px;
  justify-content: space-between;
  .el-form-item__label{
    font-size: 14px;
    color: #000;
    font-weight: 400;
  }
}
.greens {
  color: #3F9B6A;
}
/deep/ .el-table__row {
  font-size: 14px;
}
.fenye {
  margin-top: 20px;
  display: flex;
  justify-content: space-between;
  position: relative;
}
/deep/ .el-pagination.is-background .el-pager li:not(.disabled).active {
  background-color: #3F9B6A;
}
.el-row {
  margin-bottom: 20px;
}
:last-child {
  margin-bottom: 0;
}
.el-col {
  border-radius: 4px;
}
.bg-purple-dark {
  background: #99a9bf;
}
.bg-purple {
  background: #d3dce6;
}
.bg-purple-light {
  background: #e5e9f2;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
/deep/ .bg-purple[data-v-0e3fe4ec] {
  background: #fff;
  height: 50px;
}
/deep/ .el-form--label-top .el-form-item__label {
  padding: 0;
}
.demo-input-suffix{
  display: flex;
  margin-right: 20px;
}
.pagination{
  text-align:right;
  line-height: 20px;
}
::v-deep .btn .el-button:focus,
.el-button:hover {
  border: 1px solid #3F9B6A;
}
     ::v-deep .el-select .el-input.is-focus .el-input__inner{
         border-color:#3F9B6A
     }
     ::v-deep .dialog_css_Xq{
       .el-dialog__header{
         background-color:#fafafa;
       }
       .el-dialog__title{
         color:#000
       }
     }
    ::v-deep .el-tabs__item.is-active{
       color:#3F9B6A;
     }
 ::v-deep .el-tabs__active-bar{
  background-color:#3F9B6A;
}
</style>