|
|
@@ -1,45 +1,45 @@
|
|
|
<template>
|
|
|
<div class="layout-pd">
|
|
|
+ <!-- 操作 -->
|
|
|
<el-row>
|
|
|
- <!--操作-->
|
|
|
<el-col :xs="24">
|
|
|
<el-card class="mt8" shadow="hover">
|
|
|
<el-form :model="Data.Filter" @submit.stop.prevent>
|
|
|
<el-form-item prop="name" style="width: 100%">
|
|
|
<el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="6" class="mb20">
|
|
|
<el-form-item label="油枪">
|
|
|
- <el-input v-model="Data.Filter.nozzleNum" placeholder="请输入油枪"
|
|
|
- clearable></el-input>
|
|
|
+ <el-input v-model="Data.Filter.nozzleNum" placeholder="请输入油枪" clearable></el-input>
|
|
|
</el-form-item>
|
|
|
</el-col>
|
|
|
<el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="6" class="mb20">
|
|
|
<el-form-item label="油品">
|
|
|
- <el-input v-model="Data.Filter.oilName" placeholder="请输入油品" clearable></el-input>
|
|
|
- </el-form-item>
|
|
|
- </el-col>
|
|
|
- <!-- <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="6" class="mb20">
|
|
|
- <el-form-item label="状态">
|
|
|
- <el-select v-model="Data.Filter.StationName" placeholder="请选择状态">
|
|
|
- <el-option v-for="(value, key) in selectList.Online" :key="key" :label="value"
|
|
|
- :value="value" />
|
|
|
- </el-select>
|
|
|
+ <el-input v-model="Data.Filter.oilName" placeholder="请输入集合编号" clearable></el-input>
|
|
|
</el-form-item>
|
|
|
</el-col>
|
|
|
<el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="6" class="mb20">
|
|
|
<el-form-item label="支付方式">
|
|
|
- <el-select v-model="Data.Filter.onlineStatus" placeholder="请选择支付方式">
|
|
|
- <el-option v-for="(value, key) in selectList.Online" :key="key" :label="value"
|
|
|
- :value="value" />
|
|
|
+ <el-select v-model="Data.selectedPayment" placeholder="请选择支付方式">
|
|
|
+ <el-option v-for="payment in Data.paymentOptions" :key="payment.id" :label="payment.paymentName" :value="payment.id + ''" />
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="6" class="mb20">
|
|
|
+ <el-form-item label="油站">
|
|
|
+ <el-select v-model="Data.Filter.StationName" placeholder="全部">
|
|
|
+ <el-option v-for="(value, key) in selectList.station" :key="key" :label="value" :value="value" />
|
|
|
</el-select>
|
|
|
</el-form-item>
|
|
|
- </el-col> -->
|
|
|
+ </el-col>
|
|
|
<el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="6" class="mb20">
|
|
|
<el-form-item label="加油时间">
|
|
|
- <el-date-picker v-model="Data.time1" type="datetimerange"
|
|
|
- value-format="YYYY-MM-DD HH:mm:ss" range-separator="To"
|
|
|
- start-placeholder="Start date" end-placeholder="End date" />
|
|
|
+ <el-date-picker v-model="Data.time1" type="datetimerange" value-format="YYYY-MM-DD HH:mm:ss" range-separator="To" start-placeholder="开始日期" end-placeholder="结束日期" />
|
|
|
</el-form-item>
|
|
|
- </el-col>
|
|
|
+ </el-col>
|
|
|
+ <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="6" class="mb20">
|
|
|
+ <el-form-item label="支付用户">
|
|
|
+ <el-input v-model="Data.Filter.phoneNumberOruserName" placeholder="请输入用户名称和手机号" clearable></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
</el-form-item>
|
|
|
</el-form>
|
|
|
|
|
|
@@ -61,32 +61,44 @@
|
|
|
row-key="id" style="width: 100%">
|
|
|
<el-table-column v-for="column in Data.dynamicColumns" :key="column.prop" :prop="column.prop"
|
|
|
:label="column.label" />
|
|
|
- <!-- 操作 -->
|
|
|
+ <!-- 操作
|
|
|
<el-table-column label="操作" fixed="right" align="center" header-align="center"
|
|
|
class="right-operation" width="140">
|
|
|
<template #default="scope">
|
|
|
<el-link class="my-el-link mr12 ml12" type="primary" :underline="false" target="_blank"
|
|
|
icon="ele-Tickets" @click.stop="toView(scope.row.id)">查看</el-link>
|
|
|
</template>
|
|
|
- </el-table-column>
|
|
|
+ </el-table-column> -->
|
|
|
</el-table>
|
|
|
+ <!-- 暂无数据提示 -->
|
|
|
+ <div v-if="currentPageData.length === 0 &&!Data.loading"></div>
|
|
|
+ <!-- 页码 -->
|
|
|
<div class="my-flex my-flex-end" style="margin-top: 20px">
|
|
|
- <el-pagination v-model:currentPage="Data.pageInput.page"
|
|
|
- v-model:page-size="Data.pageInput.pageSize" :total="Data.total"
|
|
|
- :page-sizes="[5, 10, 20, 50, 100]" small background @size-change="onSizeChange"
|
|
|
- @current-change="onCurrentChange" layout="total, sizes, prev, pager, next, jumper" />
|
|
|
+ <el-pagination
|
|
|
+ v-model:currentPage="Data.pageInput.page"
|
|
|
+ v-model:page-size="Data.pageInput.pageSize"
|
|
|
+ :total="Data.total"
|
|
|
+ :default-page-size="10"
|
|
|
+ :page-sizes="[10,20,50,100]"
|
|
|
+ small
|
|
|
+ background
|
|
|
+ @size-change="onSizeChange"
|
|
|
+ @current-change="onCurrentChange"
|
|
|
+ :page-count="pageCount"
|
|
|
+ layout="total, sizes, prev, pager, next, jumper"
|
|
|
+ />
|
|
|
</div>
|
|
|
</el-card>
|
|
|
</el-col>
|
|
|
</el-row>
|
|
|
</div>
|
|
|
-
|
|
|
</template>
|
|
|
|
|
|
<script setup lang="ts" name="partsManagement/oilGun">
|
|
|
-import { onMounted, reactive, watch } from "vue";
|
|
|
-import { getOrderInfoPage } from "/@/api/api";
|
|
|
+import { onMounted, reactive, watch, computed } from "vue";
|
|
|
+import { getOrderInfoPage,getOrderFilter } from "/@/api/api";
|
|
|
import { OrderInfoFilter } from "/@/api/admin/orderDto/QRBookDto";
|
|
|
+import { nextTick } from 'vue';
|
|
|
|
|
|
/**页面对象 */
|
|
|
const Data = reactive({
|
|
|
@@ -99,96 +111,157 @@ const Data = reactive({
|
|
|
nozzleNum: null,
|
|
|
/**油品 */
|
|
|
oilName: null,
|
|
|
- // /**支付方式 */
|
|
|
- // CompanyName: "",
|
|
|
- // /**状态 */
|
|
|
- // onlineStatus: "",
|
|
|
+ /**支付方式 */
|
|
|
+ onlineStatus: null,
|
|
|
/**加油开始的时间 */
|
|
|
startCheckTime: null,
|
|
|
/**加油结束的时间 */
|
|
|
endCheckTime: null,
|
|
|
+ /**油站 */
|
|
|
+ StationName: null,
|
|
|
+ // 支付方式类型
|
|
|
+ paymentType:null,
|
|
|
+ // 用户手机号码or用户名称
|
|
|
+ phoneNumberOruserName:null
|
|
|
} as OrderInfoFilter,
|
|
|
/**表格信息 */
|
|
|
tableModel: [],
|
|
|
/**动态表头 */
|
|
|
dynamicColumns: [
|
|
|
{ prop: 'ttc', label: '流水号' },
|
|
|
+ { prop: 'stationName', label: '油站' },
|
|
|
+ { prop: 'machineName', label: '油机号' },
|
|
|
{ prop: 'nozzleAndOil', label: '油枪|油品' },
|
|
|
{ prop: 'priceAndVolume', label: '单价|升数' },
|
|
|
{ prop: 'amount', label: '金额' },
|
|
|
- { prop: 'endTime', label: '挂枪时间' },
|
|
|
- // { prop: 'fuelId', label: '支付状态' },
|
|
|
- ],
|
|
|
+ { prop: 'paymentTime', label: '挂枪时间' },
|
|
|
+ { prop: 'endTime', label: '交易时间' },
|
|
|
+ { prop: 'paymentName', label: '支付方式' },
|
|
|
+ { prop: 'fuelId', label: '支付状态' },
|
|
|
+ { prop: 'phoneNumber', label: '支付用户' }
|
|
|
+ ],
|
|
|
/**分页总数 */
|
|
|
total: 0,
|
|
|
/**分页标识 */
|
|
|
pageInput: {
|
|
|
page: 1,
|
|
|
pageSize: 10,
|
|
|
- },
|
|
|
+ },
|
|
|
+ selectedPayment:'', //储存ID
|
|
|
+ paymentOptions:[] //储存支付方式
|
|
|
})
|
|
|
|
|
|
/** 选择框列表 */
|
|
|
const selectList = reactive({
|
|
|
Online: ["在线", "离线"],
|
|
|
- Device: [
|
|
|
+ Device: [
|
|
|
"启用",
|
|
|
"备案",
|
|
|
"维修",
|
|
|
"出厂注册"],
|
|
|
- Level: [1, 2, 3, 4, 5]
|
|
|
-})
|
|
|
+ Level: [1, 2, 3, 4, 5],
|
|
|
+ station:[
|
|
|
+ '全部'
|
|
|
+ ]
|
|
|
+})
|
|
|
+
|
|
|
+// 计算当前页的数据
|
|
|
+const currentPageData = computed(() => {
|
|
|
+ console.log('Data.tableModel', Data.tableModel); // 添加调试语句，查看数据是否正确更新
|
|
|
+ const start = (Data.pageInput.page - 1) * Data.pageInput.pageSize;
|
|
|
+ const end = start + Data.pageInput.pageSize;
|
|
|
+ return Data.tableModel.slice(start, end);
|
|
|
+});
|
|
|
+
|
|
|
+// 计算显示的页码数量
|
|
|
+const pageCount = computed(() => {
|
|
|
+ const totalPages = Math.ceil(Data.total / Data.pageInput.pageSize);
|
|
|
+ return totalPages < 5? 5 : totalPages;
|
|
|
+});
|
|
|
|
|
|
/** 查询订单 */
|
|
|
-const onQuery = (async () => {
|
|
|
+const onQuery = async () => {
|
|
|
Data.loading = true;
|
|
|
+ try {
|
|
|
+ let filterParams = {
|
|
|
+ page: Data.pageInput.page,
|
|
|
+ pageSize: Data.pageInput.pageSize,
|
|
|
+ ...Data.Filter
|
|
|
+ };
|
|
|
+ // 根据选中的支付方式设置筛选参数
|
|
|
+ if (Data.selectedPayment && Data.selectedPayment!== '0') {
|
|
|
+ filterParams.paymentType = parseInt(Data.selectedPayment);
|
|
|
+ } else {
|
|
|
+ // 如果选择“全部”，不传递paymentType参数
|
|
|
+ filterParams.paymentType = null;
|
|
|
+ }
|
|
|
+
|
|
|
+ // if(Data.Filter.payUserName=order.userName||order.phoneNumber){
|
|
|
+ // filterParams.phoneNumberOruserName = Data.Filter.payUserName
|
|
|
+ // }
|
|
|
+
|
|
|
+ const orders = await getOrderInfoPage(filterParams);
|
|
|
+ console.log('后端返回的原始数据:', orders);
|
|
|
+ console.log('后端返回的总记录数:', orders.total);
|
|
|
+ console.log('后端返回的当前页数据列表长度:', orders.list.length);
|
|
|
+
|
|
|
+ Data.total = orders.total;
|
|
|
+ Data.tableModel = orders.list.map(order => {
|
|
|
+ return {
|
|
|
+ 'stationName': order.stationName,
|
|
|
+ 'ttc': order.ttc,
|
|
|
+ 'nozzleAndOil': order.nozzleNum + "|" + order.oilName,
|
|
|
+ 'priceAndVolume': order.price + "|" + order.volume + 'L',
|
|
|
+ 'amount': order.amount,
|
|
|
+ 'paymentTime': order.authorizationTime,
|
|
|
+ 'endTime': order.endTime,
|
|
|
+ 'fuelId': order.paymentStatus === 0? "未支付" : order.paymentStatus === 1? "已支付" : "未知状态",
|
|
|
+ 'phoneNumber': order.userName,
|
|
|
+ 'paymentName': order.payType === 1? "微信支付" : order.payType === 2? "支付宝" : "未知状态",
|
|
|
+ "machineName": order.machineName
|
|
|
+ };
|
|
|
+ });
|
|
|
+ console.log('处理后的数据列表长度:', Data.tableModel.length);
|
|
|
+ } catch (error) {
|
|
|
+ console.error('查询订单数据时出错:', error);
|
|
|
+ } finally {
|
|
|
+ Data.loading = false;
|
|
|
+ await nextTick();
|
|
|
+ }
|
|
|
+};
|
|
|
+
|
|
|
|
|
|
- var orders = await getOrderInfoPage({
|
|
|
- ...Data.pageInput,
|
|
|
- ...Data.Filter
|
|
|
- });
|
|
|
- console.log(orders)
|
|
|
- Data.total = orders.total;
|
|
|
- Data.tableModel = orders.list.map(order => {
|
|
|
- return {
|
|
|
- 'ttc': order.ttc,
|
|
|
- 'nozzleAndOil': order.nozzleNum + "|" + order.oilName,
|
|
|
- 'priceAndVolume': order.price + "|" + order.volume,
|
|
|
- 'amount': order.amount,
|
|
|
- 'endTime': order.endTime,
|
|
|
- }
|
|
|
- })
|
|
|
-
|
|
|
- Data.loading = false;
|
|
|
-})
|
|
|
|
|
|
/** 重置查询条件 */
|
|
|
const onReset = () => {
|
|
|
Data.Filter = {
|
|
|
- /**油枪号 */
|
|
|
nozzleNum: null,
|
|
|
- /**油品 */
|
|
|
oilName: null,
|
|
|
- // /**支付方式 */
|
|
|
- // CompanyName: "",
|
|
|
- // /**状态 */
|
|
|
- // onlineStatus: "",
|
|
|
- /**加油开始的时间 */
|
|
|
+ onlineStatus: null,
|
|
|
startCheckTime: null,
|
|
|
- /**加油结束的时间 */
|
|
|
endCheckTime: null,
|
|
|
- }
|
|
|
- Data.time1 = ""
|
|
|
-}
|
|
|
+ StationName: null,
|
|
|
+ payUserName: null,
|
|
|
+ paymentType: null,
|
|
|
+ phoneNumberOruseName: null
|
|
|
+ };
|
|
|
+ Data.time1 = "";
|
|
|
+ // 重置时选择“全部”
|
|
|
+ Data.selectedPayment = '0';
|
|
|
+ onQuery();
|
|
|
+};
|
|
|
|
|
|
/** 页数修改 */
|
|
|
const onSizeChange = (pageSize) => {
|
|
|
- Data.pageInput.pageSize = pageSize
|
|
|
+ Data.pageInput.pageSize = pageSize;
|
|
|
+ Data.pageInput.page = 1;
|
|
|
+ onQuery();
|
|
|
}
|
|
|
|
|
|
/** 页码修改 */
|
|
|
const onCurrentChange = (page) => {
|
|
|
- Data.pageInput.page = page
|
|
|
+ Data.pageInput.page = page;
|
|
|
+ onQuery();
|
|
|
}
|
|
|
|
|
|
/** 操作 */
|
|
|
@@ -198,8 +271,21 @@ const toView = ((data: any) => {
|
|
|
|
|
|
// 挂载时
|
|
|
onMounted(async () => {
|
|
|
- await onQuery()
|
|
|
-})
|
|
|
+ const response = await getOrderFilter();
|
|
|
+ console.log("支付方式请求结果", response);
|
|
|
+ // 确保response.payments是一个数组
|
|
|
+ if (Array.isArray(response.payments)) {
|
|
|
+ const allOption = { id: 0, paymentName: '全部' };
|
|
|
+ Data.paymentOptions = [allOption, ...response.payments];
|
|
|
+ } else {
|
|
|
+ console.error("支付方式数据格式错误,response.payments不是一个数组");
|
|
|
+ Data.paymentOptions = [allOption];
|
|
|
+ }
|
|
|
+ console.log('支付方式筛选:', Data.paymentOptions);
|
|
|
+ // 初始化选择“全部”
|
|
|
+ Data.selectedPayment = '0';
|
|
|
+ await onQuery();
|
|
|
+});
|
|
|
|
|
|
/** 过滤条件监听——枪号 */
|
|
|
watch(() => Data.Filter.nozzleNum,(val) => {
|
|
|
@@ -225,6 +311,33 @@ watch(() => Data.time1,(val) => {
|
|
|
Data.Filter.startCheckTime = new Date(val?.[0].toString());
|
|
|
Data.Filter.endCheckTime = new Date(val?.[1].toString());
|
|
|
})
|
|
|
+
|
|
|
+/** 过滤条件监听——支付方式 */
|
|
|
+watch(() => Data.Filter.onlineStatus,(val) => {
|
|
|
+ if(val) {
|
|
|
+ Data.Filter.onlineStatus = val
|
|
|
+ } else {
|
|
|
+ Data.Filter.onlineStatus = null
|
|
|
+ }
|
|
|
+})
|
|
|
+
|
|
|
+/** 过滤条件监听——支付方式类型 */
|
|
|
+watch(() => Data.Filter.paymentType,(val) => {
|
|
|
+ if(val) {
|
|
|
+ Data.Filter.paymentType = val
|
|
|
+ } else {
|
|
|
+ Data.Filter.paymentType = null
|
|
|
+ }
|
|
|
+})
|
|
|
+
|
|
|
+/** 过滤条件监听——用户手机号码or用户名称 */
|
|
|
+watch(() => Data.Filter.phoneNumberOruseName,(val) => {
|
|
|
+ if(val) {
|
|
|
+ Data.Filter.phoneNumberOruseName = val
|
|
|
+ } else {
|
|
|
+ Data.Filter.phoneNumberOruseName = null
|
|
|
+ }
|
|
|
+})
|
|
|
</script>
|
|
|
|
|
|
<style scoped lang="scss">
|
|
|
@@ -244,4 +357,12 @@ watch(() => Data.time1,(val) => {
|
|
|
::v-deep .el-table th.el-table__cell {
|
|
|
background-color: #F6F6F6;
|
|
|
}
|
|
|
+
|
|
|
+.mb21{
|
|
|
+ margin-left: 68px;
|
|
|
+}
|
|
|
+
|
|
|
+.mb22{
|
|
|
+ width: 2000px;
|
|
|
+}
|
|
|
</style>
|
