oil-station/fuintCashierWeb/src/views/cashier/orderComponents/order_Oil.vue
DESKTOP-369JRHT\12997 888a6709e2 9.30
2024-09-30 14:10:07 +08:00

1059 lines
33 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!--油品订单-->
<template>
<div>
<div class="top_new">
<el-form :model="queryParams" width="100%" ref="queryForm" size="small" :inline="true" label-width="68px">
<div style=" width: 1645px; display: flex; justify-content: space-between">
<el-form-item label="" prop="staffId">
<el-select
v-model="queryParams.staffId"
clearable
placeholder="请选择操作人">
<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="">
<el-input v-model="queryParams.orderNo" clearable placeholder="请输入订单号"></el-input>
</el-form-item>
<el-form-item label="" prop="terminal">
<el-select
v-model="queryParams.terminal"
clearable
placeholder="请选择订单类型"
>
<el-option v-for="item in terminalList"
:key="item.id"
:label="item.dictLabel"
:value="item.dictValue">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="" prop="oilGunNum">
<el-select
v-model="queryParams.oilGunNum"
filterable
clearable
placeholder="请选择油品油号"
>
<el-option v-for="item in oilGunList"
:key="item.id"
:label="item.gunName"
:value="item.id">
<span style="float: left">{{ item.oilName }}</span>
<span style="float: right; color: #8492a6; font-size: 13px">{{ item.gunName }}</span>
</el-option>
</el-select>
</el-form-item>
<el-form-item label="" prop="oilGunNum">
<el-select
v-model="queryParams.oilGunNum"
filterable
clearable
placeholder="请选择油枪"
>
<el-option v-for="item in oilGunList"
:key="item.id"
:label="item.gunName"
:value="item.id">
<span style="float: left">{{ item.oilName }}</span>
<span style="float: right; color: #8492a6; font-size: 13px">{{ item.gunName }}</span>
</el-option>
</el-select>
</el-form-item>
<el-form-item label="" prop="payType">
<el-select
v-model="queryParams.payType"
clearable
placeholder="请选择支付方式"
>
<el-option v-for="item in payList"
:key="item.id"
:label="item.dictLabel"
:value="item.dictValue">
</el-option>
<el-option label="电子囤油卡" value="oilCard"/>
<el-option label="电子电子储值卡" value="balance"/>
</el-select>
</el-form-item>
<el-form-item label="">
<el-input v-model="queryParams.payUser" clearable placeholder="请输入付款用户"></el-input>
</el-form-item>
</div>
<el-form-item label="" >
<el-date-picker
v-model="beginTime"
style="width: 215px"
type="date"
placeholder="开始日期">
</el-date-picker>
<span >
</span>
<el-date-picker
v-model="endTime"
style="width: 215px"
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-button type="primary" @click="exportExcelOilOrder()">导出</el-button>
</el-form-item>
</el-form>
</div>
<div class="cot-box">
<div>
<div class="box-gang">
<div class="box2">
<div style="font-size: 26px;color: #0DC291;font-weight: bold;margin-top: 5px">
{{ orderStatistics.theTotalAmountOfOil || 0 }}/{{ orderStatistics.numberOfOilPens || 0 }}
</div>
<div class="size-hui">
<div style="width: 8px;height: 8px;border-radius: 4px;background: #0DC291"></div>
<div style="font-weight: bold;font-size: 13px;margin-left: 5px">油品订单总金额(元)/笔数</div>
</div>
</div>
<div class="box2">
<div style="font-size: 26px;color: #00CAFF;font-weight: bold;margin-top: 5px">
{{ orderStatistics.totalAmountReceived || 0 }}
</div>
<div class="size-hui">
<div style="width: 8px;height: 8px;border-radius: 4px;background: #00CAFF"></div>
<div style="font-weight: bold;font-size: 13px;margin-left: 5px">实付总金额(元)</div>
</div>
</div>
<div class="box2">
<div style="font-size: 26px;color: #F44522;font-weight: bold;margin-top: 5px">
{{ orderStatistics.theTotalAmountOfTheOffer || 0 }}
</div>
<div class="size-hui">
<div style="width: 8px;height: 8px;border-radius: 4px;background: #F44522"></div>
<div style="font-weight: bold;font-size: 13px;margin-left: 5px">优惠总金额(元)</div>
</div>
</div>
<div class="box2">
<div style="font-size: 26px;color: #FA6400;font-weight: bold;margin-top: 5px">
{{ orderStatistics.wechat || 0 }}/{{ orderStatistics.alipay || 0 }}
</div>
<div class="size-hui">
<div style="width: 8px;height: 8px;border-radius: 4px;background: #FA6400"></div>
<div style="font-weight: bold;font-size: 13px;margin-left: 5px">微信/支付宝(元)</div>
</div>
</div>
<div class="box2">
<div style="font-size: 26px;color: #2B63F4;font-weight: bold;margin-top: 5px">
{{ orderStatistics.wechat || 0 }}/{{ orderStatistics.alipay || 0 }}
</div>
<div class="size-hui">
<div style="width: 8px;height: 8px;border-radius: 4px;background: #2B63F4"></div>
<div style="font-weight: bold;font-size: 13px;margin-left: 5px">云闪付/pos刷卡</div>
</div>
</div>
<div class="box2">
<div style="font-size: 26px;color: #FE59E5;font-weight: bold;margin-top: 5px">
{{ orderStatistics.wechat || 0 }}/{{ orderStatistics.alipay || 0 }}
</div>
<div class="size-hui">
<div style="width: 8px;height: 8px;border-radius: 4px;background: #FE59E5"></div>
<div style="font-weight: bold;font-size: 13px;margin-left: 5px">储值卡/囤油卡(元)</div>
</div>
</div>
<div class="box2">
<div style="font-size: 26px;color: #F7B500;font-weight: bold;margin-top: 5px">
{{ orderStatistics.cash || 0 }}
</div>
<div class="size-hui">
<div style="width: 8px;height: 8px;border-radius: 4px;background: #F7B500"></div>
<div style="font-weight: bold;font-size: 13px;margin-left: 5px">现金(元)</div>
</div>
</div>
</div>
</div>
<div class="new_bottom">
<div>
<el-table
v-loading="loading"
border
:data="oilOrderList"
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="terminal" label="订单类型" align="center" width="80">
<template slot-scope="props">
<span>{{ getVal(terminalList, props.row.terminal) }}</span>
</template>
</el-table-column>
<el-table-column prop="oilGunNum" label="油品/油号" align="center" >
<template slot-scope="props">
<span>{{ getName(oilNameList, props.row.oils) }}</span>
</template>
</el-table-column>
<el-table-column prop="oilGunNum" label="油枪" align="center" >
<template slot-scope="props">
<span>{{ getName1(oilGunList, props.row.oilGunNum) }}</span>
</template>
</el-table-column>
<el-table-column prop="orderAmount" label="订单金额(元)" align="center"></el-table-column>
<el-table-column prop="discountAmount" label="优惠金额(元)" align="center"></el-table-column>
<el-table-column prop="payAmount" label="实付金额(元)" align="center"></el-table-column>
<el-table-column prop="balanceAmount" label="储值卡付款金额(元)" align="center" />
<el-table-column prop="oilCardAmount" label="囤油卡付款金额(元)" align="center" />
<el-table-column prop="payUser" label="付款用户" align="center" ></el-table-column>
<el-table-column prop="payType" label="支付方式" align="center">
<template slot-scope="scope">
<span>{{ getType(payList, scope.row.payType) }}</span>
<span v-if="scope.row.payType=='oilCard'">囤油卡</span>
<span v-if="scope.row.payType=='balance'">电子储值卡</span>
<span v-if="scope.row.payType=='credit'">挂账</span>
</template>
</el-table-column>
<el-table-column prop="orderStatus" label="订单状态" align="center" >
<template slot-scope="scope">
<el-tag v-if="scope.row.orderStatus === 'unpaid'">未支付</el-tag>
<el-tag type="success" v-else-if="scope.row.orderStatus === 'paid'">已支付</el-tag>
<el-tag type="danger" v-else-if="scope.row.orderStatus === 'refund'">已退款</el-tag>
<el-tag type="danger" v-else>支付失败</el-tag>
</template>
</el-table-column>
<!-- <el-table-column prop="orderType" label="订单类型" align="center"></el-table-column>-->
<el-table-column prop="orderType" label="用户评价" align="center">
<template slot-scope="scope">
<span>{{ scope.row.remark || "--" }}</span>
</template>
</el-table-column>
<el-table-column prop="orderType" label="关联员工" align="center"></el-table-column>
<el-table-column prop="orderType" label="操作人" align="center"></el-table-column>
<el-table-column label="订单完成时间" align="center" prop="payTime">
<template slot-scope="scope">
<span>{{ scope.row.payTime ? parseTime(scope.row.payTime) : "--" }}</span>
</template>
</el-table-column>
<el-table-column label="操作" align="center" class-name="small-padding fixed-width" >
<template slot-scope="scope">
<el-button style="color: #fe8c4a" @click="patchwork(scope.row)" type="text">补打
</el-button>
<!-- @click="handleRefund(scope.row.id)" -->
<el-button style="color: #fe8c4a" type="text" @click="refHandleRefund(scope.row.id)"
v-if="scope.row.orderStatus === 'paid' && scope.row.terminal=='applet'" >退款
</el-button>
</template>
</el-table-column>
</el-table>
</div>
<div class="pagination-box">
<el-pagination
v-show="total>0"
layout="prev, pager, next, jumper"
:total="total"
:page.sync="queryParams.page"
:limit.sync="queryParams.pageSize"
@current-change="getList">
</el-pagination>
</div>
</div>
</div>
<!-- 订单退款 密码 -->
<el-dialog
:close-on-click-modal="false"
title="订单退款"
width="25%"
:visible.sync="refDialogRefund">
<div style="margin: 10px 0">
退款密码<br/>
</div>
<div>
<el-input placeholder="请输入退款密码" v-model="refPass" show-password></el-input>
<br/>
</div>
<span slot="footer" class="dialog-footer">
<el-button @click="refDialogRefund = false">取 消</el-button>
<el-button type="primary" @click="refHandleRefundByif()">确 定</el-button>
</span>
</el-dialog>
<!-- 订单退款-->
<el-dialog
:close-on-click-modal="false"
title="订单退款"
width="25%"
:visible.sync="dialogRefund">
<div style="text-align: center;font-weight: bold">
¥<span style="font-size: 35px">{{ oilOrder.payAmount }}</span>
</div>
<div class="tk">订单金额</div>
<div class="tk">退款单号:{{ oilOrder.orderNo }}</div>
<!-- <el-input placeholder="请输入退款金额" v-model="refundAmt"></el-input>-->
<!-- 是否推掉优惠券-->
<br>
<span>是否退掉优惠券: </span>
<el-checkbox v-model="isOilVouchers">优惠卷信息</el-checkbox>
<div style="margin: 10px 0">
退款原因<br/>
<el-radio-group v-model="radio1" style="margin: 10px 0">
<el-radio-button label="油号选错"></el-radio-button>
<el-radio-button label="金额错误"></el-radio-button>
<el-radio-button label="其他原因"></el-radio-button>
</el-radio-group>
</div>
<div>
<el-input placeholder="请输入退款原因" v-model="refundRemark"></el-input>
<br/>
<span
style="color: grey;font-size: 12px">退款仅支持全额退款,退款金额将按照支付信息原路退回、优惠券、电子储值卡等原路退回处理</span>
</div>
<span slot="footer" class="dialog-footer">
<el-button @click="dialogRefund = false">取 消</el-button>
<el-button type="primary" @click="refundConfirmed()">确 定</el-button>
</span>
</el-dialog>
<!-- 支付成功后小票打印内容-->
<div id="reportSuccess" ref="report" class="box-center" v-show="false">
<div class="box-title">订单统计</div>
<div class="box-ge">
<div class="input-box">
<div>{{ getName(oilNameList, oilOrder.oils) }}/{{ getName1(oilGunList, oilOrder.oilGunNum) }}</div>
<div>¥{{ oilOrder.orderAmount }}</div>
</div>
<div class="input-box">
<div>支付方式</div>
<div v-if="oilOrder.payType == 'CASH'">现金</div>
<div v-else-if="oilOrder.payType == 'WECHAT'">微信</div>
<div v-else-if="oilOrder.payType == 'ALIPAY'">支付宝</div>
<div v-else-if="oilOrder.payType == 'UNIONPAY'">银联二维码</div>
<div v-else-if="oilOrder.payType == 'balance'">电子储值卡</div>
<div v-else-if="oilOrder.payType == 'oilCard'">囤油卡</div>
<div v-else>小程序码</div>
</div>
<div class="input-box">
<div>合计</div>
<div>¥{{ oilOrder.orderAmount }}</div>
</div>
<div class="input-box" v-if="oilOrder.discountAmount>0">
<div>优惠合计</div>
<div>¥{{ oilOrder.discountAmount }}</div>
</div>
<div class="input-box" v-if="oilOrder.balanceAmount>0">
<div>电子储值卡付款金额</div>
<div>¥{{ oilOrder.balanceAmount }}</div>
</div>
<!-- <div class="input-box" v-if="oilOrder.oilCardAmount>0">-->
<!-- <div>囤油卡付款升数</div>-->
<!-- <div>¥{{ oilOrder.oilCardAmount }}</div>-->
<!-- </div>-->
<div class="input-box">
<div>实付款</div>
<div>{{ oilOrder.payAmount }}</div>
</div>
</div>
</div>
</div>
</template>
<script>
import {queryStaffs} from "@/api/cashier/staff";
import {getDicts} from "@/api/dict/data";
import {getOilNameList} from "@/api/cashier/oilnumgun";
import {listOilOrder, oilOrderInfo, orderStatisticsApi} from "@/api/cashier/oilorder";
import {queryUsers} from "@/api/cashier/user/user";
import {oilNumbers} from "@/api/cashier/oilnumber";
import {getOilNumberGun} from "@/api/cashier/oilGuns";
import {getOrderInfoApi, refundApi} from "@/api/cashier/refund";
import {exportExcelOilOrderApi} from "@/api/order/exportExcel";
import {connectFlag, getLodop} from "@/api/LodopFuncs";
import {getInfoByIdApi} from "@/api/cashier/cardfavorablerecord";
import {printOilOrderReport} from "@/api/print";
import { ifRefPassApi } from '@/api/staff/store'
export default {
name: "order_Oil",
data() {
return {
//退款密码
refPass:'',
refDialogRefund:false,
// 会员信息
userName: "",
oilOrder: {},
// 退款密码
refundRemark: "",
radio1: "油号选错",
dialogRefund: false,
loading: false,
// 是否退优惠券
isOilVouchers: false,
// 员工列表
staffList: [],
// 终端列表
terminalList: [],
// 支付类型列表
payList: [],
// 油号列表
oilNameList: [],
// 油枪列表
oilNumList: [],
// 日期范围
dateRange: [],
beginTime: "",
endTime: "",
// 油品订单列表
oilOrderList: [],
payTypeList: [],
// 查询参数
queryParams: {
page: 1,
pageSize: 10,
},
total: 0,
// 油枪列表
oilGunList: [],
// 用户列表
userList: [],
// 输入退款金额
refundAmt: 0,
orderStatistics: {
numberOfOilPens: '0',
theTotalAmountOfOil: '0',
theTotalAmountOfTheOffer: '0',
numberOfTransactions: '0',
totalAmountReceived: '0',
wechat: '0',
alipay: '0',
cash: '0',
},
// 是否为当天时间
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.getStaffList();
this.getOrderStatistics();
this.getList();
this.getPayType();
this.getOilGunList();
this.getUserList();
},
methods: {
async refHandleRefundByif() {
this.refDialogRefund = true;
await ifRefPassApi({refPass: this.refPass}).then(res => {
if (res.data) {
this.handleRefund(this.getId)
this.refDialogRefund = false;
} else {
this.$message({
type: 'info',
message: '密码错误'
});
}
})
},
async printLocally() {
if (!connectFlag) {
return
}
//初始化打印函数
let LODOP = getLodop(); // 初始化打印
LODOP.PRINT_INIT();
var bodyStyle = `<style>
.input-box{
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
font-size: 14px;
margin: 5px 0px;
}
.box-ge{
border-bottom: 1px solid #000000 ;
box-sizing: border-box;
padding: 10px;
}
.box-title{
font-size: 18px;
text-align: center;
align-items: center;
margin-top: 15px;
}
.input-hui{
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
font-size: 14px;
margin: 15px 0px;
background: #b2b2b2;
box-sizing: border-box;
padding: 5px 0px;
}
.input-hui-frou{
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
font-size: 14px;
margin: 15px 0px;
background: #b2b2b2;
box-sizing: border-box;
padding: 5px 0px;
div{
width: 25%;
text-align: left;
}
}
.input-box-frou{
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
font-size: 14px;
margin: 5px 0px;
div{
width: 25%;
text-align: left;
}
}
.box-center{
height: 500px;
}
</style>
`
var fromHtml = bodyStyle + this.$refs.report.innerHTML
LODOP.ADD_PRINT_HTM(0, 0, "100%", "100%", fromHtml);
LODOP.SET_PRINT_MODE("FULL_WIDTH_FOR_OVERFLOW", true);
// LODOP.ADD_PRINT_BARCODE(10,40,100,100,'QRCode','123456789');
// let preview = LODOP.PREVIEW();
// console.log("preview",preview);
LODOP.PRINT();
},
async refHandleRefund(id) {
this.getId = id
this.refPass = ""
this.refDialogRefund = true;
},
// 打印商品支付后的订单
oilOrderReport() {
console.log("22222222222222222")
let oilOrderR = []
let o = {
oilName: this.getName(this.oilNameList, this.oilOrder.oils) + "-" + this.getName1(this.oilGunList, this.oilOrder.oilGunNum),
amount: this.oilOrder.orderAmount.toString()
}
oilOrderR.push(o)
let goodsOrderR = []
// 支付方式
const payTypeMap = {
'CASH': '现金',
'WECHAT': '微信',
'ALIPAY': '支付宝',
'UNIONPAY': '银联二维码',
'credit': '挂账',
'oilCard': '囤油卡',
'balance': '电子储值卡'
};
let payTypeText = payTypeMap[this.oilOrder.payType] || '小程序码';
let f = {
oilOrder: oilOrderR,
goodsOrder: goodsOrderR,
payType: payTypeText,
unitName: "", // 挂账单位
// 订单总额
// consumeAmount:this.consumeAmount,
creditAmount: "",//挂账金额
// 优惠合计
discount: this.oilOrder.discountAmount, // 油惠合计
// 电子储值卡付款
consumeAmount: this.oilOrder.balanceAmount,
// 屯油卡付款
consumeRefuelMoney: this.oilOrder.oilCardAmount,
// 实付款
actualPay: this.oilOrder.payAmount,
}
printOilOrderReport(f).then(res => {
})
},
exportExcelOilOrder() {
let dateRange = []
if (this.beginTime && this.endTime) {
dateRange.push(this.beginTime.toLocaleDateString())
dateRange.push(this.endTime.toLocaleDateString())
}
exportExcelOilOrderApi(this.addDateRange(this.queryParams, dateRange)).then(res => {
const blob = new Blob([res], {type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'});
this.$download.saveAs(blob, '油品订单统计.xLsx')
})
},
getUserList() {
queryUsers().then(res => {
this.userList = res.data
})
},
// 获取油枪信息
getOilGunList() {
getOilNumberGun().then(res => {
res.data.forEach(item => {
if (item.oilGunList.length > 0) {
item.oilGunList.forEach(i => {
i.oilName = item.oilName
this.oilGunList.push(i)
})
}
})
})
},
getPayType() {
getDicts("payment_type").then(res => {
this.payTypeList = res.data
})
},
// 订单统计
getOrderStatistics() {
let dateRange = []
if (this.beginTime && this.endTime) {
dateRange.push(this.beginTime.toLocaleDateString())
dateRange.push(this.endTime.toLocaleDateString())
}
orderStatisticsApi(this.addDateRange(this.queryParams, dateRange)).then(res => {
this.orderStatistics = res.data
})
},
// 补打
patchwork(data) {
const orderNo = data.orderNo
this.$modal.confirm('确定您要补打当前订单吗?当前订单号[' + orderNo + '],请确保云打印机正在运行中').then(function () {
// return oilOrderInfo(data.id).then( response => {
// this.oilOrder = response.data
// this.printLocally()
// })
// return delUser(row.id);
}).then(async () => {
await oilOrderInfo(data.id).then(response => {
this.oilOrder = response.data
this.$modal.msgSuccess("打印指令已发送打印机,请查看打印结果");
})
// this.printLocally()
this.oilOrderReport()
}).catch(() => {
});
},
// 退款
async handleRefund(id) {
await oilOrderInfo(id).then(response => {
this.oilOrder = response.data
})
let title = ''
await getOrderInfoApi({
orderNo: this.oilOrder.orderNo,
type: 'oil'
}).then(res => {
if (res.code === 200) {
if (res.data.type === "1") {
title = '该订单下有其它商品订单,退款之后商品将不能图退款'
this.oilOrder.payAmount = res.data.money
}
}
});
if (title) {
//退款确定
this.$confirm(title + ', 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
this.dialogRefund = true;
}).catch(() => {
this.$message({
type: 'info',
message: '已取消退款'
});
});
} else {
this.dialogRefund = true;
}
},
async refundConfirmed() {
// if (!this.refundAmt) {
// this.$message({
// type: 'info',
// message: '请输入退款金额'
// });
// return
// }
this.dialogRefund = false;
this.loading = true;
console.log("cashierOrder", this.cashierOrder)
let map = {
// 是否退优惠券
isOilVouchers: this.isOilVouchers,
orderNo: this.oilOrder.orderNo,
storeId: this.oilOrder.storeId,
refundRemark: this.radio1 + "-" + this.refundRemark,
type: "canRefund",
refundAmt: this.payAmount,
refType: "oilOrder",
isOil: true,
}
await refundApi(map).then(res => {
this.$message({
type: 'info',
message: '退款成功'
});
})
this.loading = false
// this.created()
this.getList();
},
// 获取优惠券信息
getInfoById() {
getInfoByIdApi().then(res => {
})
},
// 根据员工id查询员工信息
queryStaf(list, id) {
let name = "";
list.forEach(item => {
if (item.id == id) {
name = `${item.realName}(${item.mobile})`
}
})
return name;
},
getType(list, val) {
let name = "";
list.forEach(item => {
if (item.dictValue == val) {
name = item.dictLabel
}
})
return name;
},
// 根据id查询会员信息
queryUser(list, id) {
list.forEach(item => {
if (item.id == id) {
this.userName = item.name + "|" + item.mobile
}
})
return this.userName;
},
getVal(list, val) {
let name = "";
list.forEach(item => {
if (item.dictValue == val) {
name = item.dictLabel
}
})
return name;
},
// 获取订单列表信息
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())
}
listOilOrder(this.addDateRange(this.queryParams, dateRange)).then(response => {
this.oilOrderList = response.data.records;
this.total = response.data.total;
this.isSysDate = false
})
},
// 搜索按钮操作
handleQuery() {
this.queryParams.page = 1;
this.getList();
this.getOrderStatistics();
},
// 重置按钮操作
resetQuery() {
this.dateRange = [];
this.queryParams = {
page: 1,
pageSize: 10,
}
this.beginTime = ""
this.endTime = ""
// this.resetForm("queryForm");
this.handleQuery();
},
// 获取列表信息
getStaffList() {
queryStaffs().then(response => {
this.staffList = response.data;
})
getDicts("terminal").then(response => {
this.terminalList = response.data;
})
getDicts("payment_type").then(response => {
this.payList = response.data;
})
getOilNameList().then(response => {
this.oilNameList = response.data;
})
oilNumbers().then(response => {
this.oilNumList = response.data;
})
},
// 获取油号名称
getName(oilNameList, id) {
let name = ""
let _this = this;
if (oilNameList != null && oilNameList != "") {
oilNameList.forEach(item => {
if (item.id == id) {
name = item.oilName;
_this.oilType = item.oilType;
}
})
}
return name;
},
// 获取油枪名称
getName1(oilNameList, id) {
let name = ""
let _this = this;
if (oilNameList != null && oilNameList != "") {
oilNameList.forEach(item => {
if (item.id == id) {
name = item.gunName;
}
})
}
return name;
},
}
}
</script>
<style scoped>
.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;
justify-content: space-between;
flex-wrap: wrap; /* 允许内容换行 */
}
.box {
//box-sizing: border-box;
padding: 5px;
//background: #f9f9f9;
margin-right: 20px;
margin-bottom: 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 {
}
.size-hui {
display: flex;
align-items: center;
font-family: Source Han Sans CN, Source Han Sans CN;
font-weight: 400;
font-size: 13px;
color: #888888;
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;
}
.icon-img {
width: 20px;
height: 20px;
margin-right: 5px;
img {
float: right;
width: 20px;
height: 20px;
}
}
.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: flex-end;
}
.top-app-sou {
width: 20%;
}
.tk {
text-align: center;
color: grey;
margin: 10px 0;
}
.box1 {
padding: 5px;
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;
}
.box2 {
padding: 5px;
margin-bottom: 20px;
padding-left: 20px;
width: 211px;
height: 70px;
border-radius: 6px 6px 6px 6px;
border: 1px solid #FF9655;
}
.cot-box {
width: 98%;
border-radius: 8px;
background: #fff;
box-sizing: border-box;
padding: 20px;
margin: 0 auto;
}
.top_new{
display: flex;
justify-content: space-between;
height: 120px;
background: #fff;
width: 98%;
margin: 5px auto;
border-radius: 8px;
box-sizing: border-box;
padding: 15px;
}
.new_bottom{
min-height: 65vh;
}
</style>