oil-station/fuintAdmin/src/views/handover/info/rec/trading.vue
2024-11-06 17:36:11 +08:00

671 lines
22 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 class="container">
<div class="new-top" >
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" label-width="120px">
<el-form-item label="">
<el-input style="width: 215px;" v-model="queryParams.orderNo" placeholder="请输入订单号"></el-input>
</el-form-item>
<el-form-item label="" prop="payChannel">
<el-select
v-model="queryParams.payChannel"
clearable
placeholder="请选择订单类型"
>
<el-option label="小程序" value="applet"/>
<el-option label="收银台" value="cashier"/>
<el-option label="POS端" value="POS"/>
<el-option label="平台" value="PC"/>
</el-select>
</el-form-item>
<el-form-item label="" prop="type">
<el-select
v-model="queryParams.type"
clearable
placeholder="请选择订单分类"
>
<el-option label="油品" value="1"/>
<el-option label="商品" value="2"/>
<el-option label="储值卡" value="3"/>
<el-option label="积分" value="4"/>
<el-option label="囤油卡" value="5"/>
<el-option label="收银台订单" value="6"/>
<el-option label="挂账订单" value="7"/>
<el-option label="pos" value="8"/>
</el-select>
</el-form-item>
<!-- <el-form-item label="" prop="payChannel">
<el-select
v-model="queryParams.payChannel"
clearable
placeholder="请选择订单分类"
>
<el-option label="小程序" value="applet"/>
<el-option label="收银台" value="cashier"/>
<el-option label="POS端" value="POS"/>
</el-select>
</el-form-item> -->
<el-form-item label="" prop="payType">
<el-select v-model="queryParams.payType" placeholder="请选择支付方式" clearable>
<el-option
v-for="dicts in this.dictPayType"
:key="dicts.dictValue"
:label="dicts.dictLabel"
:value="dicts.dictValue"
/>
</el-select>
</el-form-item>
<!-- <el-form-item label="" prop="payType">
<el-select
v-model="queryParams.payType"
clearable
placeholder="请选择支付渠道"
>
<el-option label="现金" value="CASH"/>
<el-option label="微信" value="WECHAT"/>
<el-option label="支付宝" value="ALIPAY"/>
<el-option label="余额" value="balance"/>
</el-select>
</el-form-item> -->
<!-- <el-form-item label="" prop="paymentChannel">
<el-select v-model="queryParams.paymentChannel" placeholder="请选择支付渠道" clearable>
<el-option
v-for="dicts in this.dict"
:key="dicts.dictValue"
:label="dicts.dictLabel"
:value="dicts.dictValue"
/>
</el-select>
</el-form-item> -->
<el-form-item label="" prop="status">
<el-select
v-model="queryParams.status"
clearable
placeholder="请选择订单状态"
>
<el-option label="已支付" value="paid"/>
<el-option label="未支付" value="unpaid"/>
<el-option label="已退款" value="refund"/>
<el-option label="支付失败" value="payFail"/>
</el-select>
</el-form-item>
<el-form-item label="" prop="staffId">
<el-select v-model="queryParams.staffId" placeholder="请选择关联员工" clearable>
<el-option
v-for="dicts in this.staffList"
:key="dicts.acctId"
:label="dicts.accountName"
:value="dicts.acctId"
/>
</el-select>
</el-form-item>
<el-form-item label="" prop="userMobile">
<el-input v-model="queryParams.userMobile" placeholder="请输入用户手机号"></el-input>
</el-form-item>
<el-form-item label="">
<el-date-picker
v-model="queryParams.dataRange"
type="daterange"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
format="yyyy-MM-dd"
value-format="yyyy-MM-dd"
>
</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" icon="el-icon-search" @click="exportExcel">导出</el-button>
</el-form-item>
</el-form>
</div>
<div class="wit_box" >
<div class="box-gang">
<div class="box">
<el-tooltip class="item" effect="dark" content="微信收款(元)/ 笔数" placement="top-start" >
<div class="size-bole">{{ orderStatistics.wechat || 0 }} / {{ orderStatistics.wechatCount || 0 }}</div>
</el-tooltip>
<div class="size-hui">
<div class="dian" style="background: #0DC291"></div>
<div class="nei">微信收款(元)/ 笔数</div>
</div>
</div>
<div class="box">
<el-tooltip class="item" effect="dark" content="支付宝收款(元)/ 笔数" placement="top-start">
<div class="size-bole" style="color:#00CAFF;">{{ orderStatistics.alipay || 0 }} / {{ orderStatistics.alipayCount || 0 }}</div>
</el-tooltip>
<div class="size-hui">
<div class="dian" style="background: #00CAFF"></div>
<div class="nei">支付宝收款(元)/ 笔数</div>
</div>
</div>
<div class="box">
<el-tooltip class="item" effect="dark" content="云闪付收款(元)/ 笔数" placement="top-start">
<div class="size-bole" style="color:#F44522;" >{{ orderStatistics.unionPay || 0 }} / {{ orderStatistics.unionPayCount || 0 }} </div>
</el-tooltip>
<div class="size-hui">
<div class="dian" style="background: #F44522"></div>
<div class="nei">云闪付收款(元)/ 笔数</div>
</div>
</div>
<div class="box">
<el-tooltip class="item" effect="dark" content="pos机收款/ 笔数" placement="top-start">
<div class="size-bole" style="color:#FF7E00;" >{{ orderStatistics.pos || 0 }} / {{ orderStatistics.posCount || 0 }}</div>
</el-tooltip>
<div class="size-hui">
<div class="dian" style="background: #FF7E00"></div>
<div class="nei">pos机收款/ 笔数</div>
</div>
</div>
<div class="box">
<el-tooltip class="item" effect="dark" content="现金收款(元)/ 笔数" placement="top-start">
<div class="size-bole" style="color:#0D2ED8;">{{ orderStatistics.cash || 0 }} / {{ orderStatistics.cashCount || 0 }}</div>
</el-tooltip>
<div class="size-hui">
<div class="dian" style="background: #0D2ED8"></div>
<div class="nei">现金收款(元)/ 笔数</div>
</div>
</div>
<div class="box">
<el-tooltip class="item" effect="dark" content="会员消费(元)/ 笔数" placement="top-start">
<div class="size-bole" style="color:#790DD8;">{{ orderStatistics.vip || 0 }} / {{ orderStatistics.vipCount || 0 }}</div>
</el-tooltip>
<div class="size-hui">
<div class="dian" style="background: #790DD8"></div>
<div class="nei">会员消费(元)/ 笔数</div>
</div>
</div>
<div class="box">
<el-tooltip class="item" effect="dark" content="挂帐收款(元)/ 笔数" placement="top-start">
<div class="size-bole" style="color:#D80D54;">{{orderStatistics.afterPay || 0 }} / {{orderStatistics.afterPayCount || 0 }}</div>
</el-tooltip>
<div class="size-hui">
<div class="dian" style="background: #D80D54"></div>
<div class="nei">挂帐收款(元)/ 笔数</div>
</div>
</div>
</div>
<div class="table-box" style="margin-top: 15px">
<el-table
:data="orderList"
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="payChannel" align="center" label="订单类型">
<template slot-scope="scope">
<span v-if="scope.row.payChannel=='cashier'">收银台</span>
<span v-else-if="scope.row.payChannel=='POS'">POS机</span>
<span v-else-if="scope.row.payChannel=='PC'">平台</span>
<span v-else-if="scope.row.payChannel=='applet'">小程序</span>
<span v-else>其他</span>
</template>
</el-table-column>
<el-table-column prop="type" align="center" label="订单分类">
<template slot-scope="scope">
<span v-if="scope.row.type=='1'">油品</span>
<span v-else-if="scope.row.type=='2'">商品</span>
<span v-else-if="scope.row.type=='3'">储值卡</span>
<span v-else-if="scope.row.type=='4'">积分</span>
<span v-else-if="scope.row.type=='5'">囤油卡</span>
<span v-else-if="scope.row.type=='6'">收银台订单</span>
<span v-else-if="scope.row.type=='7'">挂账订单</span>
<span v-else-if="scope.row.type=='8'">POS订单</span>
<span v-else>其他</span>
</template>
</el-table-column>
<el-table-column prop="goodsMoney" align="center" label="订单金额(元)">
</el-table-column>
<el-table-column prop="discountAmount" align="center" label="优惠金额(元)"> </el-table-column>
<el-table-column prop="payMoney" align="center" label="实收金额(元)">
<template slot-scope="scope">
<span v-if="scope.row.payType == 'ALIPAY'">{{ scope.row.payMoney}}</span>
<span v-else-if="scope.row.payType == 'WECHAT'">{{ scope.row.payMoney}}</span>
<span v-else-if="scope.row.payType == 'UNIONPAY'">{{ scope.row.payMoney}}</span>
<span v-else-if="scope.row.payType == 'CASH'">{{ scope.row.payMoney}}</span>
<span v-else-if="scope.row.payType == 'APPLET_CODE'">{{ scope.row.payMoney}}</span>
<span v-else-if="scope.row.payType == 'after_pay'">{{ scope.row.payMoney}}</span>
<span v-else> -- </span>
</template>
</el-table-column>
<el-table-column prop="payMoney" align="center" label="会员消费金额(元)">
<template slot-scope="scope">
<span v-if="scope.row.payType == 'card_value'">{{ scope.row.payMoney}}</span>
<span v-else-if="scope.row.payType == 'fule_card'">{{ scope.row.payMoney}}</span>
<span v-else-if="scope.row.payType == 'car_card_value'">{{ scope.row.payMoney}}</span>
<span v-else> -- </span>
</template>
</el-table-column>
<el-table-column prop="refMoney" align="center" label="挂账/归还金额(元)">
<template slot-scope="scope">
<span v-if="scope.row.type == 7">{{ scope.row.goodsMoney}}</span>
<span v-else> -- </span>
</template>
</el-table-column>
<el-table-column prop="userMobile" align="center" label="用户手机号" > </el-table-column>
<el-table-column prop="payType" align="center" label="支付方式">
<template slot-scope="scope">
<span v-if="scope.row.payType == 'ALIPAY'">支付宝</span>
<span v-else-if="scope.row.payType == 'WECHAT'">微信</span>
<span v-else-if="scope.row.payType == 'UNIONPAY'">银联二维码</span>
<span v-else-if="scope.row.payType == 'CASH'">现金</span>
<span v-else-if="scope.row.payType == 'APPLET_CODE'">小程序码</span>
<span v-else-if="scope.row.payType == 'card_value'">储值卡</span>
<span v-else-if="scope.row.payType == 'fule_card'">囤油卡</span>
<span v-else-if="scope.row.payType == 'car_card_value'">车队卡</span>
<span v-else-if="scope.row.payType == 'after_pay'">挂账</span>
</template>
</el-table-column>
<el-table-column prop="status" align="center" label="订单状态">
<template slot-scope="scope">
<el-tag v-if="scope.row.status == 'unpaid'">未支付</el-tag>
<el-tag type="success" v-else-if="scope.row.status == 'paid'">已支付</el-tag>
<el-tag type="danger" v-else-if="scope.row.status == 'refund'">已退款</el-tag>
<el-tag type="danger" v-else>支付失败</el-tag>
</template>
</el-table-column>
<el-table-column prop="createBy" align="center" label="关联员工"> </el-table-column>
<el-table-column prop="createTime" align="center" label="订单创建时间" width="180"> </el-table-column>
<el-table-column prop="updateTime" align="center" label="订单完成时间" width="180"> </el-table-column>
<el-table-column align="center" label="操作">
<template slot-scope="scope">
<el-button
size="mini"
type="text"
@click="getOrdersInfo(scope.row)"
>详情</el-button>
</template>
</el-table-column>
</el-table>
</div>
<pagination
v-show="total>0"
:total="total"
:page.sync="queryParams.page"
:limit.sync="queryParams.pageSize"
@pagination="getDeptList"
/>
</div>
<el-dialog
title="订单信息"
:visible.sync="dialogVisible">
<el-descriptions :title="'订单号:'+ordersInfo.orderNo">
<el-descriptions-item label="门店">{{ordersInfo.storeName}}</el-descriptions-item>
<el-descriptions-item label="收银员">{{ordersInfo.createBy}}</el-descriptions-item>
<el-descriptions-item label="支付渠道">{{ordersInfo.payChannel}}</el-descriptions-item>
<el-descriptions-item label="商户号">{{ordersInfo.mchntCd}}</el-descriptions-item>
<el-descriptions-item label="费率">{{ordersInfo.amount}}</el-descriptions-item>
<el-descriptions-item label="订单来源">{{ordersInfo.type}}</el-descriptions-item>
<el-descriptions-item label="所属模块">{{ordersInfo.amount}}</el-descriptions-item>
<el-descriptions-item label="支付方式">{{ordersInfo.payType}}</el-descriptions-item>
<el-descriptions-item label="付款用户">{{ordersInfo.userName}}</el-descriptions-item>
<el-descriptions-item label="订单状态">{{ordersInfo.status}}</el-descriptions-item>
<el-descriptions-item label="备注">{{ordersInfo.content}}</el-descriptions-item>
</el-descriptions>
<el-descriptions class="margin-top" title="金额详情" :column="3" border>
<el-descriptions-item>
<template slot="label">
订单金额
</template>
{{ordersInfo.goodsMoney?ordersInfo.goodsMoney:"--"}}
</el-descriptions-item>
<el-descriptions-item>
<template slot="label">
优惠后应付金额
</template>
{{ordersInfo.payMoney?ordersInfo.payMoney:"--"}}
</el-descriptions-item>
<el-descriptions-item>
<template slot="label">
退款金额
</template>
{{ordersInfo.refMoney?ordersInfo.refMoney:"--"}}
</el-descriptions-item>
<el-descriptions-item>
<template slot="label">
实收金额
</template>
{{ordersInfo.payMoney?ordersInfo.payMoney:"--"}}
</el-descriptions-item>
</el-descriptions>
</el-dialog>
</div>
</template>
<script>
import {
exportExcelHandoverOrderApi, getmyDataApi,findOrderStatistics,
transactionList,
getDicts,
getStaffByStorId
} from "@/api/allOrder";
export default {
name: "reconciliation-trading",
data(){
return{
dict:{},
orderStatistics:{},
wechat:0,
wechats:0,
radio1:"油号选错",
loading:false,
dialogVisible:false,
// 员工列表
staffList:[],
ordersInfo:{},
// 日期范围
dateRange: [],
beginTime:"",
endTime:"",
// 是否为当天时间
isSysDate:false,
// 收银台订单列表
orderList:[],
deptList:[],
// 查询参数
queryParams: {
page: 1,
pageSize: 10,
beginTime:"",
endTime:"",
orderNo:"",
status:"",
payType:"",
payChannel:"",
deptType:"3",
storeId:"",
deptId:"",
userName:"",
staffId:"",
dataRange:[],
},
total:0,
}
},
async 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
await this.getDeptList();
// this.getList();
this.getDicts();
this.getStaffByStorId();
this.getOrderStatistics()
},
methods:{
async getDicts() {
getDicts("payment_channel").then(response => {
this.dict = response.data;
})
getDicts("payment_type").then(response => {
this.dictPayType = response.data;
})
},
async getStaffByStorId() {
getStaffByStorId().then(response => {
this.staffList = response.data;
})
},
async getDeptList() {
// getRunningWaterByTissueApi(this.addDateRange(this.queryParams)).then( response => {
// this.deptList = response.data.records;
// })
await getmyDataApi(this.addDateRange(this.queryParams)).then( response => {
this.queryParams.deptId = response.data.deptId;
this.getList()
})
},
exportExcel() {
exportExcelHandoverOrderApi(this.queryParams).then(res => {
const blob = new Blob([res], {type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'});
this.$download.saveAs(blob, '交易明细统计.xLsx')
})
},
// 获取订单统计信息
async getOrderStatistics() {
let dateRange = []
if (this.beginTime && this.endTime) {
dateRange.push(this.beginTime.toLocaleDateString())
dateRange.push(this.endTime.toLocaleDateString())
}
findOrderStatistics(this.addDateRange(this.queryParams, dateRange)).then(res => {
this.orderStatistics = res.data
})
},
// 获取列表信息
async getList(val) {
transactionList(this.queryParams).then(response => {
this.orderList = response.data.records;
this.total = response.data.total;
this.isSysDate = false
})
},
getOrdersInfo(data) {
this.dialogVisible = true;
this.ordersInfo = data
},
// 搜索按钮操作
handleQuery() {
this.queryParams.page = 1;
this.getDeptList()
this.getOrderStatistics()
// this.getList();
},
// 重置按钮操作
resetQuery() {
this.dateRange = [];
this.queryParams = {
page: 1,
pageSize: 10,
deptType:"3",
}
this.beginTime = ""
this.endTime = ""
this.getDeptList()
this.handleQuery();
},
}
}
</script>
<style scoped lang="scss">
.container{
background: #f4f5f9;
box-sizing: border-box;
padding-bottom: 8px;
}
.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;
}
.box{
//box-sizing: border-box;
padding: 5px;
//background: #f9f9f9;
padding-left: 20px;
width: 211px;
height: 60px;
background:#fff;
border-radius: 10px;
border: 1px solid #FF9655;
}
.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 {
color: #333333;
width: 150px;
}
}
.dian{
width: 6px;
height: 6px;
border-radius: 50%;
margin-right: 5px;
}
.el-form--inline .el-form-item {
margin-bottom: 15px;
margin-right: 21px;
}
.icon-img{
//margin-left: 110px;
width: 100%;
height: 20px;
margin-right: 5px;
img{
float: right;
//width: 100%;
width: 20px;
height: 100%;
}
}
.f-button{
width: 100%;
float: right ;
text-align: right;
}
.size-bole{
//font-weight: bold;
//width: 53px;
height: 31px;
//font-family: YouSheBiaoTiHei;
font-size: 24px;
color: #0DC291;
font-weight: 600;
font-size: 24px;
//line-height: 0px;
text-align: left;
font-style: normal;
text-transform: none;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.wgang{
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 20px;
}
.table-box{
width: 100%;
height: 54vh;
overflow: auto;
}
.pagination-box{
width: 100%;
margin: 10px auto;
display: flex;
align-items: center;
justify-content: center;
}
.top-app-sou{
width: 20%;
}
.tk{
text-align: center;
color: grey;
margin: 10px 0;
}
.new-top{
width: 99%;
background: #FFFFFF;
margin: 15px auto;
height: 115px;
box-sizing: border-box;
padding: 15px;
border-radius: 4px;
margin-bottom: 5px;
}
.wit_box{
width: 99%;
background: #FFFFFF;
margin: 5px auto;
box-sizing: border-box;
padding: 15px;
border-radius: 8px;
height: 73vh;
}
</style>