oil-station/fuintAdmin/src/views/order/order_Added.vue

<!--增值交易订单-->
<template>
  <div class="app-container">    <!--    表单查询-->
    <el-card class="box-card">
      <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" label-width="100px">
        <el-form-item label="" prop="returnType">
          <el-select
            v-model="queryParams.returnType"
            clearable
            placeholder="归还状态"
          >
            <el-option label="挂账" value="0"></el-option>
            <el-option label="归还" value="1"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="" prop="status">
          <el-select
            v-model="queryParams.status"
            placeholder="订单状态"
            clearable
          >
            <el-option label="未归还" value="0"></el-option>
            <el-option label="已归还" value="1"></el-option>
            <el-option label="部分归还" value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="" prop="unitName">
          <el-input
            v-model="queryParams.unitName"
            placeholder="单位名称"
            clearable
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        <el-form-item label="" prop="personCredit">
          <el-input
            v-model="queryParams.personCredit"
            placeholder="挂账人"
            clearable
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        <el-form-item label="" prop="contactMobile">
          <el-input
            v-model="queryParams.contactMobile"
            placeholder="请输入挂账人联系电话"
            clearable
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        <el-form-item label="" prop="mobile">
          <el-input
            v-model="queryParams.mobile"
            placeholder="请输入操作人手机号"
            clearable
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        <el-form-item label="">
<!--          挂账人-->
<!--          <el-date-picker-->
<!--            v-model="dateRange"-->
<!--            style="width: 400px"-->
<!--            size="medium"-->
<!--            value-format="yyyy-MM-dd"-->
<!--            type="datetimerange"-->
<!--            range-separator="至"-->
<!--            start-placeholder="开始日期"-->
<!--            end-placeholder="结束日期"-->
<!--          ></el-date-picker>-->
          <el-date-picker
            v-model="beginTime"
            style="width: 160px"
            type="date"
            placeholder="开始日期">
          </el-date-picker>
          至
          <el-date-picker
            v-model="endTime"
            style="width: 160px"
            type="date"
            placeholder="结束日期">
          </el-date-picker>
        </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-form-item>
      </el-form>
    </el-card>
    <!--    统计-->
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>挂账订单统计</span>
      </div>
      <div class="box-gang">
        <div class="box">
          <div class="size-bole">{{ total }}</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">{{ allAmount }}</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">{{ returnTotal }}</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">{{ returnAllAmount }}</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">{{ noReturnAllAmount }}</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>
    </el-card>
    <!--    列表-->
    <el-card class="box-card">
      <div class="wgang">
        <div></div>
        <div style="display: flex ">

          <el-button type="primary" size="mini" icon="el-icon-plus" @click = "exportExcelCashier()">导出订单</el-button>
        </div>
      </div>
      <div class="table-box">
        <el-table
          :data="hangBillList"
          style="width: 100%">
<!--          <el-table-column type="expand">-->
<!--            <template slot-scope="props">-->
<!--              <el-form label-position="left" style="margin-left: 20px" inline class="demo-table-expand">-->
<!--                <el-form-item label="操作人手机号">-->
<!--                  <span>{{ props.row.mobile }}</span>-->
<!--                </el-form-item><br/>-->
<!--                <el-form-item label="更新时间">-->
<!--                  <span>{{ props.row.updateTime ? props.row.updateTime:"&#45;&#45;" }}</span>-->
<!--                </el-form-item><br/>-->
<!--                <el-form-item label="单据备注">-->
<!--                  <span>{{ props.row.remark ? props.row.remark:"&#45;&#45;" }}</span>-->
<!--                </el-form-item><br/>-->
<!--                <el-form-item label="单据金额">-->
<!--                  <span>{{ props.row.amount ? props.row.amount:"0" }}</span>-->
<!--                </el-form-item>-->
<!--                <el-form-item label="已还金额">-->
<!--                  <span>{{ props.row.repaidAmount ? props.row.repaidAmount:"0" }}</span>-->
<!--                </el-form-item>-->
<!--                <el-form-item label="未还金额">-->
<!--                  <span>{{ props.row.outstandAmount ? props.row.outstandAmount:"0" }}</span>-->
<!--                </el-form-item>-->
<!--              </el-form>-->
<!--            </template>-->
<!--          </el-table-column>-->
          <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 align="center" label="挂账单位">
            <el-table-column prop="unitName" align="center" label="单位名称"> </el-table-column>
            <el-table-column prop="personCredit" align="center" label="挂账人"> </el-table-column>
            <el-table-column prop="contactMobile" align="center" label="联系电话"> </el-table-column>
          </el-table-column>
          <el-table-column label="记录明细" align="center">
            <el-table-column prop="returnType" align="center" label="类型">
              <template slot-scope="scope">
                <el-tag v-if="scope.row.returnType == 0">挂账</el-tag>
                <el-tag v-else type="success">归还</el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="amount" align="center" label="金额"> </el-table-column>
            <el-table-column prop="status" align="center" label="状态">
              <template slot-scope="scope">
                <span v-if="scope.row.status == 0">未归还</span>
                <span v-else-if="scope.row.status == 1" type="success">已归还</span>
                <span v-else type="success">部分归还</span>
              </template>
            </el-table-column>
            <el-table-column prop="repaidAmount" align="center" label="已归还金额"> </el-table-column>
            <el-table-column prop="outstandAmount" align="center" label="未归还金额"> </el-table-column>
          </el-table-column>
          <el-table-column prop="realName" align="center" label="操作人"> </el-table-column>
          <el-table-column prop="createTime" align="center" label="创建时间" width="220">
            <template slot-scope="scope">
              <span>{{ parseTime(scope.row.createTime) }}</span>
            </template>
          </el-table-column>

          <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="text"
                @click="returnRecord(scope.row.id)"
              >归还详情</el-button>
            </template>
          </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>


    </el-card>

    <!--    归还记录信息-->
    <el-drawer
      title="归还详情"
      :visible.sync="drawer"
      direction="rtl"
      size="55%"
      :before-close="handleClose">
      <div style="display: grid; place-items: center;">
        <el-card style="background-color: #f5f5f5;width: 90%">
          <div slot="header" class="clearfix">
            <div style="position: relative;">
              <div style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);">
                <h2>单据号：{{record.orderNo}}</h2>
              </div>
            </div>
            <br>
            <div style="display: flex; justify-content: space-between;">
              <span>操作员工：</span>
              <span>{{  record.realName }}</span>
            </div>
          </div>
          <div >
            <div  style="display: flex; justify-content: space-between;">
              <span>挂账单位</span>
              <span>{{record.unitName}}</span>
            </div>
            <div  style="display: flex; justify-content: space-between;margin: 10px 0">
              <span>挂账人</span>
              <span>{{record.personCredit}}</span>
            </div>
            <div  style="display: flex; justify-content: space-between;">
              <span>联系电话</span>
              <span>{{record.contactMobile}}</span>
            </div>
          </div>
        </el-card>
        <el-card style="margin-top: 15px;width: 90%">
          <el-table ref="tables"
                    v-loading="loading"
                    :data="returnRecordList">
            <el-table-column label="单据号" align="center" prop="orderNo" width="200"></el-table-column>
            <el-table-column label="类型" align="center" prop="returnType">
              <template slot-scope="scope">
                <el-tag v-if="scope.row.returnType == 0">挂账</el-tag>
                <el-tag v-else type="success">归还</el-tag>
              </template>
            </el-table-column>
            <el-table-column label="归还金额" align="center" prop="amount" />
            <el-table-column label="找零金额" align="center" prop="seekZero" />
            <el-table-column label="归还方式" align="center" prop="status">
              <template slot-scope="scope">
                <span>{{ getPayMeth(payList,scope.row.status) }}</span>
              </template>
            </el-table-column>
            <el-table-column label="支付状态" align="center" prop="payStatus">
              <template slot-scope="scope">
                <el-tag v-if="scope.row.payStatus == 'unpaid'">未支付</el-tag>
                <el-tag type="success" v-else-if="scope.row.payStatus == 'paid'">已支付</el-tag>
                <el-tag type="danger" v-else>支付失败</el-tag>
              </template>
            </el-table-column>
            <el-table-column label="操作人" align="center" prop="realName" />
            <el-table-column label="支付时间" align="center" prop="payTime" width="200">
              <template slot-scope="scope">
                <span>{{ parseTime(scope.row.payTime) }}</span>
              </template>
            </el-table-column>
          </el-table>

          <div class="pagination-box">
            <el-pagination
              background
              layout="prev, pager, next"
              v-show="total2>0"
              :total="total2"
              :page.sync="queryParams1.page"
              :limit.sync="queryParams1.pageSize"
              @current-change="getRecordList">
            </el-pagination>
          </div>
        </el-card>
      </div>
    </el-drawer>
  </div>
</template>

<script>
import {
  hangBillAllAmount,
  hangBillAllNoReturnAmount,
  hangBillAllReturnAmount, hangBillInfo, hangBillReturnTotal,
  listHangBill
} from "@/api/order/hangbill";
import {getDicts} from "@/api/order/data";
import {listReturnRecord} from "@/api/order/returnrecord";
import {exportExcelHangBillApi} from "@/api/order/exportExcel";

export default {
  name: "order_Cashier",
  data(){
    return{
      queryParams1: {
        page: 1,
        pageSize: 10,
        hangBillId:"",
      },
      hangBillList:[],
      total:0,
      total2:0,
      loading:false,
      queryParams:{
        page:1,
        pageSize:10,
        returnType:"",
        status:"",
        unitName:"",
        personCredit:"",
        contactMobile:"",
        mobile:"",
      },
      dateRange:[],
      beginTime:"",
      endTime:"",
      returnRecordList:[],
      payList:[],
      // 归还账单总数
      returnTotal:0,
      // 挂账总额
      allAmount:0,
      // 归还总额
      returnAllAmount:0,
      // 未归还总额
      noReturnAllAmount:0,
      drawer:false,
      // 挂账信息
      record:{},
      // 是否为当天时间
      isSysDate:false,
    }
  },
  created() {
    let start = new Date();
    start.setHours(0)
    start.setMinutes(0)
    start.setSeconds(0)
    start.setMilliseconds(0)
    this.dateRange = [start,new Date()];
    this.beginTime = start
    this.endTime = new Date()
    this.isSysDate = true
    this.getList()
    this.getPayList()
  },
  methods: {

    exportExcelCashier() {
      // this.dateRange.push(this.beginTime)
      // this.dateRange.push(this.endTime)
      let dateRange = []
      if (this.beginTime && this.endTime) {
        dateRange.push(this.beginTime.toLocaleDateString())
        dateRange.push(this.endTime.toLocaleDateString())
      }
      exportExcelHangBillApi(this.addDateRange(this.queryParams, dateRange)).then(res=>{
        const blob = new Blob([res], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
        this.$download.saveAs(blob,'挂账订单统计.xLsx')
      })
    },
    // 归还记录详情弹框
    returnRecord(id){
      this.record = {}
      this.drawer = true
      hangBillInfo(id).then(response => {
        this.record = response.data
      })
      this.getRecordList(id,1);
    },
    getRecordList(id,val){
      if (val!=1){
        this.queryParams1.page = id
        this.queryParams1.hangBillId = this.record.id
      }else {
        this.queryParams1.hangBillId = id
      }
      listReturnRecord(this.queryParams1).then(response => {
        this.returnRecordList = response.data.records
        this.total2 = response.data.total
      })
    },
    // 获取支付方式
    getPayList() {
      getDicts("payment_type").then(response => {
        this.payList = response.data;
      })
    },
    getPayMeth(list,val){
      let name = "";
      if (list!=null && list!=""){
        list.forEach(item => {
          if (item.dictValue == val){
            name = item.dictLabel
          }
        })
      }
      return name;
    },
    // 是否关闭弹框
    handleClose(done) {
      done();
    },
    getList(val){
      if (val!=undefined){
        this.queryParams.page = val
      }

      let dateRange1 = this.dateRange
      // let dateRange = []
      // if (this.isSysDate){
      //   dateRange.push(dateRange1[0].toLocaleDateString())
      //   dateRange.push(dateRange1[1].toLocaleDateString())
      // }else {
      //   dateRange = this.dateRange
      // }
      let dateRange = []
      if (this.beginTime && this.endTime) {
        dateRange.push(this.beginTime.toLocaleDateString())
        dateRange.push(this.endTime.toLocaleDateString())
      }

      listHangBill(this.addDateRange(this.queryParams, dateRange)).then( response => {
        this.hangBillList = response.data.records
        this.total = response.data.total;
        this.isSysDate = false
      })
      this.getStatistic();
    },
    // 获取挂账统计信息
    getStatistic(){
      let dateRange = []
      if (this.beginTime && this.endTime) {
        dateRange.push(this.beginTime.toLocaleDateString())
        dateRange.push(this.endTime.toLocaleDateString())
      }
      hangBillReturnTotal(this.addDateRange(this.queryParams, dateRange)).then(res => {
        this.returnTotal = res.data
      })
      hangBillAllAmount(this.addDateRange(this.queryParams, dateRange)).then(res => {
        if (res.data) {
          this.allAmount = res.data
        }
      })
      hangBillAllReturnAmount(this.addDateRange(this.queryParams, dateRange)).then(res => {
        if (res.data) {
          this.returnAllAmount = res.data
        }
      })
      hangBillAllNoReturnAmount(this.addDateRange(this.queryParams, dateRange)).then(res => {
        if (res.data) {
          this.noReturnAllAmount = res.data
        }
      })
    },
    // 搜索按钮操作
    handleQuery() {
      this.queryParams.page = 1;
      this.getList();
    },
    // 重置按钮操作
    resetQuery() {
      this.dateRange = [];
      this.queryParams.page = 1;
      this.beginTime = ""
      this.endTime = ""
      this.resetForm("queryForm");
      this.handleQuery();
    },
  }
}
</script>

<style scoped lang="scss">
.app-top{
  width: 100%;

  height: 60px;
  box-sizing: border-box;
  padding: 10px;
}
.clearfix{
  width: 100%;

}
.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;
  }
}
.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;
}
.wgang{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;

}
.table-box{
  width: 100%;
}
.pagination-box{
  width: 100%;
  margin: 10px auto;
  display: flex;
  align-items: center;
  justify-content: center;
}
.top-app-sou{
  width: 20%;
}

.icon-img{
  //margin-left: 110px;
  width: 100%;
  height: 20px;
  margin-right: 5px;
  img{
    float: right;
    //width: 100%;
    width: 20px;
    height: 100%;
  }
}
.box1{
  //box-sizing: border-box;
  padding: 5px;
  //background: #f9f9f9;
  margin-right: 20px;
  margin-bottom: 20px;
  padding-left: 20px;

  width: 211px;
  height: 60px;
  background: rgba(255,150,85,0.05);
  border-radius: 6px 6px 6px 6px;
  border: 1px solid #FF9655;
}
</style>