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

<!--增值交易订单-->
<template>
  <div class="app-container">    <!--    表单查询-->
    <div class="box-card">
      <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" label-width="100px">
        <el-form-item label="" prop="orderNo">
          <el-input
            v-model="queryParams.orderNo"
            placeholder="请输入订单号"
            clearable
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        <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="staffId">
          <el-select
            v-model="queryParams.staffId"
            clearable
            placeholder="请选择员工"
            @change="$forceUpdate"
          >
            <el-option v-for="item in staffList" :key="item.id" :label="item.realName" :value="item.id">
              <span style="float: left">{{ item.realName }}</span>
              <span style="float: right; color: #8492a6; font-size: 13px">{{ item.mobile }}</span>
            </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="">
          <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;margin-right: 0px">
          <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" @click="exportExcelCashier()">导出</el-button>

        </el-form-item>
      </el-form>
      <div class="table-box">
        <el-table
          :data="hangBillList"
          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="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 prop="returnType" align="center" label="类型">
            <template slot-scope="scope">
              <div v-if="scope.row.returnType == 0">挂账</div>
              <div v-else>归还</div>
            </template>
          </el-table-column>
          <el-table-column prop="amount" align="center" label="挂账金额(元)"></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 prop="status" align="center" label="状态">
            <template slot-scope="scope">
              <span v-if="scope.row.status == 0" style="color: #F44522">未归还</span>
              <span v-else-if="scope.row.status == 1" style="color: #0DC291">已归还</span>
              <span v-else style="color: #0DC291">部分归还</span>
            </template>
          </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.updateTime) || 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">
        <pagination
          v-show="total>0"
          :total="total"
          :page.sync="queryParams.page"
          :limit.sync="queryParams.pageSize"
          @pagination="getList"
        />
      </div>


    </div>

    <!--    归还记录信息-->
    <el-drawer
      title="归还详情"
      :visible.sync="drawer"
      direction="rtl"
      size="55%"
      :before-close="handleClose">
      <div style="display: grid; place-items: center;">
        <div style="background-color: #f5f5f5;width: 90%;box-sizing: border-box;padding: 15px;padding-top: 20px">
          <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>
        </div>
        <div style="margin-top: 15px;width: 90%">
          <el-table ref="tables"
                    border
                    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>
        </div>
      </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";
import {queryStaffs} from "@/api/order/staff";

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: [],
      // 员工列表
      staffList: [],
      // 归还账单总数
      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)
      this.$confirm('是否导出列表中的数据！', '提示', {
        confirmButtonText: '导出',
        cancelButtonText: '取消'
      }).then(() => {
        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')
        })
      }).catch(() => {

      });
    },
    // 归还记录详情弹框
    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;
      })
      queryStaffs().then(response => {
        this.staffList = 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() {
      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%;
  height: 89vh;
  border-radius: 8px;
  margin-bottom: 15px;
  background: #fff;
  box-sizing: border-box;
  padding: 10px;
}

.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 #fe8c4a;
}

.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 {
  height: 31px;
  font-family: YouSheBiaoTiHei;
  font-weight: 400;
  font-size: 24px;
  color: #555555;
  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%;
  height: 73vh;
  overflow: auto;
}

.pagination-box {
  width: 100%;
  margin: 10px auto;
  display: flex;
  align-items: end;
  justify-content: end;
}

.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>