oil-station/fuintAdmin/src/views/financialStatement/reconciliation/tab/favourable.vue

<template>
  <div style="margin-top: 0px">
    <div class="card-change-1-search">
      <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" label-width="80px">
        <el-form-item label="">
          <el-date-picker
            v-model="beginTime"
            style="width: 140px"
            type="date"
            placeholder="开始日期">
          </el-date-picker>
          至
          <el-date-picker
            v-model="endTime"
            style="width: 140px"
            type="date"
            placeholder="结束日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="">
          <el-input v-model="queryParams.orderNo" placeholder="订单号"></el-input>
        </el-form-item>
        <el-form-item label="" prop="favType">
          <el-input v-model="queryParams.favType" placeholder="优惠类型"></el-input>
        </el-form-item>
        <el-form-item label="" prop="favFrom">
          <el-input v-model="queryParams.favFrom" placeholder="优惠来源"></el-input>
        </el-form-item>
        <el-form-item label="" prop="favConsumptionType">
          <el-input v-model="queryParams.favConsumptionType" placeholder="消费类型"></el-input>
        </el-form-item>
        <el-form-item style="float: right">
          <el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
          <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
<!--          <el-button type="primary" icon="el-icon-plus" @click = "exportExcelCashier()">导出订单</el-button>-->

        </el-form-item>
      </el-form>
    </div>
    <div class="card-change-1" style="margin-right: 20px">
      <div class="box-gang">
        <div class="box">
          <div class="size-bole">{{ count.count || 0 }}笔</div>
          <div class="size-hui">
            <div class="nei">总优惠笔数</div>
            <div class="icon-img">
              <img src="../../../../assets/images/cut/组 4666@2x.png" alt="">
            </div>
          </div>
        </div>
        <div class="box">
          <div class="size-bole">{{ count.allMoney || 0 }}元</div>
          <div class="size-hui">
            <div class="nei">总优惠金额</div>
            <div class="icon-img">
              <img src="../../../../assets/images/cut/组 4666@2x.png" alt="">
            </div>
          </div>
        </div>
      </div>
      <div class="table-box">
        <el-table
          :data="list"
          border
          style="width: 100%">
          <el-table-column type="index" width="50" align="center" label="序号"/>
          <el-table-column prop="orderNo" align="center" label="订单号" width="220"> </el-table-column>
          <el-table-column prop="favFrom" align="center" label="订单类型"> </el-table-column>
          <el-table-column prop="favType" align="center" label="优惠类型" width="220"> </el-table-column>
          <el-table-column prop="favConsumptionType" align="center" label="订单分类"> </el-table-column>
          <el-table-column prop="favMoney" align="center" label="优惠金额"> </el-table-column>
          <el-table-column prop="favMoney" align="center" label="付款用户"> </el-table-column>
          <el-table-column prop="favMoney" align="center" label="订单状态"> </el-table-column>
          <el-table-column prop="favMoney" align="center" label="关联员工"> </el-table-column>
          <el-table-column prop="createTime" align="center" label="创建时间"> </el-table-column>
        </el-table>
      </div>
      <!--      <div class="pagination-box">-->
      <!--        <el-pagination-->
      <!--          background-->
      <!--          v-show="total>0"-->
      <!--          layout="prev, pager, next"-->
      <!--          :total="total"-->
      <!--          :page.sync="queryParams.page"-->
      <!--          :limit.sync="queryParams.pageSize"-->
      <!--          @current-change="getList">-->
      <!--        </el-pagination>-->
      <!--      </div>-->

      <pagination
        v-show="total>0"
        :total="total"
        :page.sync="queryParams.page"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
      />

    </div>
  </div>
</template>

<script>

import {getCount, getFavourableList} from "@/api/favourable/favourable";

export default {
  name: "reconciliation-favourable",
  data(){
    return {
      total:0,
      list:[],
      // 查询参数
      queryParams: {
        page: 1,
        pageSize: 10,
      },
      // 日期范围
      dateRange: [],
      beginTime:"",
      endTime:"",
      count:{}
    }
  },
  created() {
    this.getList();
  },
  methods:{
    getList(){
      let dateRange = []
      if (this.beginTime && this.endTime) {
        dateRange.push(this.beginTime.toLocaleDateString())
        dateRange.push(this.endTime.toLocaleDateString())
      }
      getFavourableList(this.addDateRange(this.queryParams,dateRange)).then(res => {
        this.list = res.data.records
        this.total = res.data.total
      })
      this.getCount()
    },
    getCount(){
      getCount(this.addDateRange(this.queryParams)).then(res => {
        this.count = res.data
      })
    },
    // 搜索按钮操作
    handleQuery() {
      this.queryParams.page = 1;
      this.getList();
    },
    // 重置按钮操作
    resetQuery() {
      this.dateRange = [];
      this.queryParams = {
        page: 1,
        pageSize: 10,
      }
      this.beginTime = ""
      this.endTime = ""
      this.handleQuery();
    },
    exportExcelCashier() {
      let dateRange = []
      if (this.beginTime && this.endTime) {
        dateRange.push(this.beginTime.toLocaleDateString())
        dateRange.push(this.endTime.toLocaleDateString())
      }
      // exportExcelTradingApi(this.addDateRange(this.queryParams, dateRange)).then(res=>{
      //   const blob = new Blob([res], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
      //   this.$download.saveAs(blob,'交易明细统计.xLsx')
      // })
    },
  }
}
</script>

<style lang="scss" scoped>

.box-card{
  width: 100%;
  margin-bottom: 15px;
}
.box-gang{
  width: 100%;
  display: flex;
  align-items: center;
}
.box{
  //box-sizing: border-box;
  padding: 5px;
  //background: #f9f9f9;
  margin-right: 20px;
  padding-left: 20px;

  width: 211px;
  height: 60px;
  background: rgba(64,158,255,0.05);
  border-radius: 6px 6px 6px 6px;
  border: 1px solid #409EFF;
}
.el-form--inline .el-form-item {
  margin-right: 44px;
}
.size-hui{
  display: flex;
  align-items: center;
  //width: 200px;
  font-family: Source Han Sans CN, Source Han Sans CN;
  font-weight: 400;
  font-size: 13px;
  color: #888888;
  //line-height: 0px;
  text-align: left;
  font-style: normal;
  text-transform: none;
  .nei {
    width: 150px;
  }
}

.icon-img{
  //margin-left: 110px;
  width: 100%;
  height: 20px;
  margin-right: 5px;
  img{
    float: right;
    //width: 100%;
    width: 20px;
    height: 100%;
  }
}
.size-bole{
  //font-weight: bold;

  //width: 53px;
  height: 31px;
  font-family: YouSheBiaoTiHei;
  font-weight: 400;
  font-size: 24px;
  color: #555555;
  //line-height: 0px;
  text-align: left;
  font-style: normal;
  text-transform: none;
}
</style>