446 lines
13 KiB
Vue
446 lines
13 KiB
Vue
<!-- 收银台订单-->
|
||
<template>
|
||
<div style="margin-top: 0px;margin-right: 40px">
|
||
<el-card class="box-card" style="margin-top: 0px;">
|
||
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" label-width="120px" >
|
||
<div class="d-s" style="margin-bottom: 15px;justify-content: space-between">
|
||
<div class="d-s">
|
||
<div class="anniu-h" :class="{ 'anniu-act': index == timeIndex }" v-for="(item,index) in timeList"
|
||
:key="index" @click="editColor(index)">
|
||
{{ item }}
|
||
</div>
|
||
<el-date-picker
|
||
v-model="value2"
|
||
type="datetimerange"
|
||
style="height: 32px"
|
||
range-separator="至"
|
||
value-format="yyyy-MM-dd HH:mm:ss"
|
||
start-placeholder="开始日期"
|
||
end-placeholder="结束日期"
|
||
:disabled="disabled"
|
||
@click="handleQuery">
|
||
</el-date-picker>
|
||
<div style="margin-left: 15px;margin-top: 17px">
|
||
<el-form-item label="" prop="deptId" style="width: 180px">
|
||
<el-select
|
||
v-model="queryParams.deptId"
|
||
clearable
|
||
placeholder="所属机构"
|
||
>
|
||
<el-option v-for="item in deptList" :key="item.id" :label="item.deptName" :value="item.deptId">
|
||
</el-option>
|
||
</el-select>
|
||
</el-form-item>
|
||
</div>
|
||
</div>
|
||
|
||
<el-form-item class="" style="float: right;margin-top: 17px;">
|
||
<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>
|
||
</div>
|
||
</el-form>
|
||
<div class="wrap-boxs">
|
||
<div class="k_" id="k_1">
|
||
<div class="size_">交易金额汇总数（万元）/交易笔数</div>
|
||
<div class="title_">{{ orderStatistics.payMoney?orderStatistics.payMoney/10000:0 }}/{{ orderStatistics.count }}</div>
|
||
</div>
|
||
<div class="k_" id="k_2" v-for="item in orderStatistics.fenxiByDaili2ByData">
|
||
<div class="size_">{{ item.paymentChannel }}交易金额（万元）</div>
|
||
<div class="title_">{{ item.payMoneyChannel?item.payMoneyChannel/10000:0 }}</div>
|
||
</div>
|
||
</div>
|
||
</el-card>
|
||
<el-card class="box-card">
|
||
<div class="table-box">
|
||
<el-table
|
||
:data="orderList"
|
||
style="width: 100%">
|
||
<el-table-column type="index" width="50" align="center" label="序号"/>
|
||
<el-table-column align="center" prop="storeName" label="机构名称"></el-table-column>
|
||
<el-table-column align="center" prop="parentName" label="所属机构"></el-table-column>
|
||
<el-table-column align="center" prop="payMoney" label="累计交易金额"></el-table-column>
|
||
<el-table-column align="center" prop="count" label="累计交易笔数"></el-table-column>
|
||
<el-table-column align="center" label="支付通道交易信息：金额（万元），笔数（万笔），占比（%）">
|
||
<template>
|
||
<el-table-column align="center" prop="fuYouAmount" label="富友交易金额">
|
||
<template slot-scope="scope">
|
||
<span>{{scope.row.fuYouAmount/100000 || 0}}</span>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column align="center" prop="fuYouCount" label="富友交易笔数">
|
||
<template slot-scope="scope">
|
||
<span>{{scope.row.fuYouCount/1000 || 0}}</span>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column align="center" prop="fuYouAmount" label="富友交易占比">
|
||
<template slot-scope="scope">
|
||
<span>{{(scope.row.fuYouAmount/(scope.row.payMoney)).toFixed(2) || 0}}</span>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column align="center" prop="laKaLaAmount" label="拉卡拉交易金额">
|
||
<template slot-scope="scope">
|
||
<span>{{scope.row.laKaLaAmount/100000 || 0}}</span>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column align="center" prop="laKaLaCount" label="拉卡拉交易笔数">
|
||
<template slot-scope="scope">
|
||
<span>{{scope.row.laKaLaCount/1000 || 0}}</span>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column align="center" prop="count92" label="拉卡拉交易占比">
|
||
<template slot-scope="scope">
|
||
<span>{{(scope.row.laKaLaAmount/(scope.row.payMoney)).toFixed(2) || 0}}</span>
|
||
</template>
|
||
</el-table-column>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column align="center" prop="date" label="统计日期">
|
||
<template>
|
||
{{this.value2[0]}} 至 {{this.value2[1]}}
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
</div>
|
||
<pagination
|
||
v-show="total>0"
|
||
:total="total"
|
||
:page.sync="queryParams.page"
|
||
:limit.sync="queryParams.pageSize"
|
||
@pagination="getList"
|
||
/>
|
||
|
||
</el-card>
|
||
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
|
||
import {
|
||
exportExcelTradingApi, getFenxiByDailiApi, getFenxiByDailiByDataApi,
|
||
getRunningWaterByTissueApi,
|
||
getTissueByDataApi,
|
||
getTradingPageApi
|
||
} from "@/api/allOrder";
|
||
import {getFenXiOilOrderDataApi, getFenXiOilOrderListApi} from "@/api/financialStatement/yunyingfenxi";
|
||
import {parseTime} from "@/utils/fuint";
|
||
|
||
export default {
|
||
name: "dai_yunyingfenxi-paym",
|
||
data() {
|
||
return {
|
||
radio1: "油号选错",
|
||
loading: false,
|
||
dialogVisible: false,
|
||
// 员工列表
|
||
staffList: [],
|
||
ordersInfo: {},
|
||
// 日期范围
|
||
dateRange: [],
|
||
beginTime: "",
|
||
endTime: "",
|
||
// 是否为当天时间
|
||
isSysDate: false,
|
||
// 收银台订单列表
|
||
orderList: [],
|
||
deptList: [],
|
||
|
||
|
||
timeList: [
|
||
"今日",
|
||
"近一周",
|
||
"近一月",
|
||
"近一年",
|
||
"自定义",
|
||
],
|
||
timeIndex: 0,
|
||
disabled:true,
|
||
value2: [],
|
||
// 查询参数
|
||
queryParams: {
|
||
page: 1,
|
||
pageSize: 10,
|
||
beginTime: "",
|
||
endTime: "",
|
||
orderNo: "",
|
||
status: "",
|
||
payType: "",
|
||
payChannel: "",
|
||
deptType: "3",
|
||
storeId: "",
|
||
deptId: "",
|
||
},
|
||
orderStatistics: {
|
||
count: '0',
|
||
|
||
payMoney: '0',
|
||
fenxiByDaili2ByData: [
|
||
{
|
||
paymentChannel:'富友',
|
||
payMoneyChannel:'0'
|
||
},
|
||
{
|
||
paymentChannel:'拉卡拉',
|
||
payMoneyChannel:'0'
|
||
},
|
||
]
|
||
},
|
||
total: 0,
|
||
}
|
||
},
|
||
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
|
||
let start1 = new Date();
|
||
start1.setHours(0)
|
||
start1.setMinutes(0)
|
||
start1.setSeconds(0)
|
||
start1.setMilliseconds(0)
|
||
this.value2 = [parseTime(start1), parseTime(new Date())];
|
||
this.getList();
|
||
this.getDeptList();
|
||
|
||
},
|
||
methods: {
|
||
editColor(index) {
|
||
this.timeIndex = index
|
||
this.disabled = true
|
||
if (this.timeList[index] == '今日') {
|
||
let start = new Date();
|
||
start.setHours(0)
|
||
start.setMinutes(0)
|
||
start.setSeconds(0)
|
||
start.setMilliseconds(0)
|
||
this.value2 = [start, new Date()];
|
||
} else if (this.timeList[index] == '近一周') {
|
||
let nowDate = new Date();
|
||
let oneWeekAgo = new Date(nowDate.getTime() - 6 * 24 * 60 * 60 * 1000)
|
||
this.value2 = [parseTime(oneWeekAgo), parseTime(nowDate)]
|
||
} else if (this.timeList[index] == '近一月') {
|
||
let nowDate = new Date();
|
||
let oneWeekAgo = new Date(nowDate.getTime() - 30 * 24 * 60 * 60 * 1000)
|
||
this.value2 = [parseTime(oneWeekAgo), parseTime(nowDate)]
|
||
} else if (this.timeList[index] == '近一年') {
|
||
let nowDate = new Date();
|
||
let oneWeekAgo = new Date(nowDate.getFullYear() - 1, nowDate.getMonth(), nowDate.getDate())
|
||
this.value2 = [parseTime(oneWeekAgo), parseTime(nowDate)]
|
||
}else if (this.timeList[index]=='自定义'){
|
||
this.disabled = false
|
||
}
|
||
this.handleQuery()
|
||
},
|
||
getDeptList() {
|
||
getRunningWaterByTissueApi(this.addDateRange(this.queryParams)).then(response => {
|
||
this.deptList = response.data.records;
|
||
})
|
||
},
|
||
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')
|
||
})
|
||
},
|
||
// 获取订单统计信息
|
||
|
||
getOrderStatistics() {
|
||
let dateRange = []
|
||
if (this.beginTime && this.endTime) {
|
||
dateRange.push(this.beginTime.toLocaleDateString())
|
||
dateRange.push(this.endTime.toLocaleDateString())
|
||
}
|
||
getFenxiByDailiByDataApi(this.addDateRange(this.queryParams, this.value2)).then(res => {
|
||
this.orderStatistics = res.data
|
||
if(this.orderStatistics.
|
||
fenxiByDaili2ByData.length==0) {
|
||
this.orderStatistics.fenxiByDaili2ByData = [{
|
||
paymentChannel:'交易',
|
||
payMoneyChannel:'0'
|
||
},
|
||
{
|
||
paymentChannel:'富友',
|
||
payMoneyChannel:'0'
|
||
},
|
||
{
|
||
paymentChannel:'拉卡拉',
|
||
payMoneyChannel:'0'
|
||
}
|
||
]
|
||
}
|
||
console.log("res.data1111", res.data)
|
||
})
|
||
},
|
||
|
||
|
||
// 获取列表信息
|
||
getList(val) {
|
||
let dateRange = []
|
||
if (this.beginTime && this.endTime) {
|
||
dateRange.push(this.beginTime.toLocaleDateString())
|
||
dateRange.push(this.endTime.toLocaleDateString())
|
||
}
|
||
getFenxiByDailiApi(this.addDateRange(this.queryParams, this.value2)).then(response => {
|
||
this.orderList = response.data.records;
|
||
this.total = response.data.total;
|
||
this.isSysDate = false
|
||
})
|
||
this.getOrderStatistics()
|
||
},
|
||
getOrdersInfo(data) {
|
||
this.dialogVisible = true;
|
||
this.ordersInfo = data
|
||
},
|
||
// 搜索按钮操作
|
||
handleQuery() {
|
||
this.queryParams.page = 1;
|
||
this.getList();
|
||
},
|
||
// 重置按钮操作
|
||
resetQuery() {
|
||
this.dateRange = [];
|
||
this.queryParams = {
|
||
page: 1,
|
||
pageSize: 10,
|
||
}
|
||
this.beginTime = ""
|
||
this.endTime = ""
|
||
let start1 = new Date();
|
||
start1.setHours(0)
|
||
start1.setMinutes(0)
|
||
start1.setSeconds(0)
|
||
start1.setMilliseconds(0)
|
||
this.value2 = [parseTime(start1), parseTime(new Date())];
|
||
this.timeIndex = 0
|
||
this.handleQuery();
|
||
},
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
.box-card {
|
||
width: 100%;
|
||
margin: 0px 20px 20px 20px;
|
||
}
|
||
|
||
.el-form--inline .el-form-item {
|
||
margin-right: 20px;
|
||
}
|
||
|
||
.table-box {
|
||
width: 100%;
|
||
}
|
||
|
||
.wrap-boxs {
|
||
width: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
margin-bottom: 15px;
|
||
}
|
||
|
||
.k_ {
|
||
width: 240px;
|
||
height: 75px;
|
||
margin-right: 20px;
|
||
box-sizing: border-box;
|
||
padding: 15px 10px;
|
||
padding-top: 5px;
|
||
color: #333333;
|
||
}
|
||
|
||
.size_ {
|
||
font-weight: 400;
|
||
font-size: 14px;
|
||
color: #333333;
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
.title_ {
|
||
font-weight: 600;
|
||
font-size: 24px;
|
||
color: #333333;
|
||
}
|
||
|
||
#k_1 {
|
||
background: url("../imgs/k1.png");
|
||
background-repeat: no-repeat; /* 禁止背景图片重复 */
|
||
background-size:100% 100%;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
#k_2 {
|
||
background: url("../imgs/k2.png");
|
||
background-repeat: no-repeat; /* 禁止背景图片重复 */
|
||
background-size:100% 100%;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
#k_3 {
|
||
background: url("../imgs/k3.png");
|
||
background-size: cover; /* 背景图片铺满盒子 */
|
||
background-repeat: no-repeat; /* 禁止背景图片重复 */
|
||
}
|
||
|
||
#k_4 {
|
||
background: url("../imgs/k4.png");
|
||
background-size: cover; /* 背景图片铺满盒子 */
|
||
background-repeat: no-repeat; /* 禁止背景图片重复 */
|
||
}
|
||
|
||
#k_5 {
|
||
background: url("../imgs/k5.png");
|
||
background-size: cover; /* 背景图片铺满盒子 */
|
||
background-repeat: no-repeat; /* 禁止背景图片重复 */
|
||
}
|
||
|
||
#k_6 {
|
||
background: url("../imgs/k6.png");
|
||
background-size: cover; /* 背景图片铺满盒子 */
|
||
background-repeat: no-repeat; /* 禁止背景图片重复 */
|
||
}
|
||
|
||
#k_7 {
|
||
background: url("../imgs/k7.png");
|
||
background-size: cover; /* 背景图片铺满盒子 */
|
||
background-repeat: no-repeat; /* 禁止背景图片重复 */
|
||
}
|
||
|
||
.d-s {
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
.anniu-h {
|
||
width: 80px;
|
||
height: 26px;
|
||
background: #FAFAFA;
|
||
border-radius: 4px 4px 4px 4px;
|
||
border: 1px solid #DDDDDD;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
color: #777777;
|
||
margin-right: 20px;
|
||
}
|
||
|
||
.anniu-act {
|
||
background: #FF9655 !important;
|
||
border: 1px solid #FF9655 !important;
|
||
color: #fff;
|
||
|
||
}
|
||
|
||
</style>
|