czg_team/cashier-web
7
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

优化数据统计的传参以及部分展示字段以优化

Browse Source
This commit is contained in:
gyq
2025-11-24 16:37:49 +08:00
parent 7f76996829
commit 980f0357c1
5 changed files with 151 additions and 239 deletions
Download Patch File Download Diff File Expand all files Collapse all files

127
src/views/data/index.vue
View File

@@ -52,22 +52,23 @@
<span>营业</span>
</div>
<div class="u-flex" style="flex-wrap: wrap">
<el-select v-if="isHeadShop == 1&&loginType == 0" v-model="shopId" placeholder="选择分店" style="width: 200px; margin-right: 10px;" @change="shopChange">
<el-select v-if="isHeadShop == 1 && loginType == 0" v-model="shopId" placeholder="选择分店"
style="width: 200px; margin-right: 10px;" @change="shopChange">
<el-option v-for="item in branchList" :key="item.shopId" :label="item.shopName" :value="item.shopId" />
</el-select>
<div class="time_wrap u-flex" style="flex-shrink: 0">
<el-radio-group v-model="timeValue" class="m-r-5" @change="timeChange">
<el-radio-button value="0">今天</el-radio-button>
<el-radio-button value="-1">昨天</el-radio-button>
<el-radio-button value="-7">最近7天</el-radio-button>
<el-radio-button value="-30">最近30天</el-radio-button>
<el-radio-button value="week">本周</el-radio-button>
<el-radio-button value="month">本月</el-radio-button>
<el-radio-button value="today">今天</el-radio-button>
<el-radio-button value="yesterday">昨天</el-radio-button>
<el-radio-button value="last_7_days">最近7天</el-radio-button>
<el-radio-button value="last_30_days">最近30天</el-radio-button>
<el-radio-button value="this_week">本周</el-radio-button>
<el-radio-button value="this_month">本月</el-radio-button>
<el-radio-button value="custom">自定义</el-radio-button>
</el-radio-group>
<div class="u-flex">
<el-date-picker v-if="timeValue == 'custom'" v-model="query.createdAt" type="daterange"
range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" value-format="YYYY-MM-DD HH:mm:ss"
range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" value-format="YYYY-MM-DD"
@change="summarytrade" />
</div>
</div>
@@ -309,13 +310,13 @@
<el-table v-loading="saleTableLoading" :data="saleTable" style="width: 100%">
<!-- <el-table-column label="排名" prop="productId"></el-table-column> -->
<el-table-column label="商品名称" prop="productName" />
<el-table-column label="数量" prop="number" />
<el-table-column label="金额" prop="amount" />
<el-table-column label="数量" prop="saleCount" />
<el-table-column label="金额" prop="saleAmount" />
</el-table>
<div class="head-container" style="padding-top: 20px; display: flex; justify-content: flex-end">
<!-- <div class="head-container" style="padding-top: 20px; display: flex; justify-content: flex-end">
<el-pagination :total="saleTableTotal" :page-size="saleTableSize" :current-page="saleTablePage"
layout="total, prev, pager, next, jumper" @current-change="paginationChange" />
</div>
</div> -->
</div>
</div>
</div>
@@ -342,6 +343,7 @@ import ShopApi from "@/api/account/shop";
import dayjs from "dayjs";
import * as echarts from "echarts";
import { debounce, formatDecimal } from "@/utils/tools";
import { formatDateRange } from './utils/index.js'
export default {
name: "home",
data() {
@@ -418,9 +420,9 @@ export default {
productCountChart: null,
productSumChart: null,
lineChartType: 0,
timeValue: "0",
timeValue: "today",
query: {
createdAt: "",
createdAt: [dayjs().format("YYYY-MM-DD"), dayjs().format("YYYY-MM-DD")],
},
tradeLoading: false,
tradeSale: {
@@ -429,7 +431,8 @@ export default {
tradeVip: "",
tradeCount: "",
isHeadShop: JSON.parse(localStorage.getItem("userInfo")).isHeadShop,
loginType: localStorage.getItem("loginType")
loginType: localStorage.getItem("loginType"),
shopInfo: JSON.parse(localStorage.getItem("userInfo")),
};
},
computed: {
@@ -461,7 +464,7 @@ export default {
this.dateAmount();
this.dateProduct();
// this.summaryDateGet();
this.timeChange("0");
this.timeChange(this.timeValue);
this.__resizeHandler = debounce(() => {
if (this.saleChart) {
@@ -495,67 +498,14 @@ export default {
let res = await ShopApi.getBranchList()
this.branchList = res;
},
shopChange(){
shopChange() {
this.summarytrade();
this.lineChartTypeChange(this.lineChartType)
this.dateProduct()
},
// 切换时间
timeChange(e) {
const format = ["YYYY-MM-DD 00:00:00", "YYYY-MM-DD 23:59:59"];
switch (e) {
case "":
// 全部
this.query.createdAt = [];
break;
case "0":
// 今天
this.query.createdAt = [dayjs().format(format[0]), dayjs().format(format[1])];
break;
case "-1":
// 昨天
this.query.createdAt = [
dayjs().add(-1, "d").format(format[0]),
dayjs().add(-1, "d").format(format[1]),
];
break;
case "-7":
// 最近7天
this.query.createdAt = [
dayjs().add(-7, "d").format(format[0]),
dayjs().format(format[1]),
];
break;
case "-30":
// 最近7天
this.query.createdAt = [
dayjs().add(-30, "d").format(format[0]),
dayjs().format(format[1]),
];
break;
case "week":
// 本周
this.query.createdAt = [
dayjs().startOf("week").format(format[0]),
dayjs().endOf("week").format(format[1]),
];
break;
case "month":
// 本周
this.query.createdAt = [
dayjs().startOf("month").format(format[0]),
dayjs().endOf("month").format(format[1]),
];
break;
case "custom":
// 自定义
this.query.createdAt = [
dayjs().add(-30, "d").format(format[0]),
dayjs().format(format[1]),];
break;
default:
break;
}
this.query.createdAt = formatDateRange(e)
if (e != "custom") {
this.summarytrade();
}
@@ -564,13 +514,14 @@ export default {
async summarytrade() {
try {
this.tradeLoading = true;
if( this.query.createdAt[1] ){
this.query.createdAt.splice(1,1,this.query.createdAt[1].replace("00:00:00","23:59:59"))
}
// if( this.query.createdAt[1] ){
// this.query.createdAt.splice(1,1,this.query.createdAt[1].replace("00:00:00","23:59:59"))
// }
const res = await dataSummaryApi.trade({
beginDate: this.query.createdAt[0],
endDate: this.query.createdAt[1],
shopId: this.shopId
rangeType: this.timeValue,
shopId: this.shopInfo.id
});
this.trade = res;
this.tradeLoading = false;
@@ -894,22 +845,22 @@ export default {
async dateAmount() {
try {
this.saleLoading = true;
const res = await dataSummaryApi.dateAmount({ day: this.saleActive,shopId: this.shopId });
const data = res.total.map((item) => {
const res = await dataSummaryApi.dateAmount({ day: this.saleActive, shopId: this.shopId });
const data = res.map((item) => {
return {
orderAmount: item.orderAmount,
// actualAmount: item.actualAmount,
// discountAmount: item.discountAmount
};
});
const time = res.total.map((item) => item.tradeDay);
const time = res.map((item) => item.tradeDay);
this.initSaleChart(time, data);
setTimeout(() => {
this.saleLoading = false;
}, 300);
} catch (error) {
console.log(error);
}
setTimeout(() => {
this.saleLoading = false;
}, 300);
},
paginationChange(e) {
this.saleTablePage = e;
@@ -921,13 +872,11 @@ export default {
this.saleTableLoading = true;
const res = await dataSummaryApi.productSaleDate({
day: this.saleTableActive,
page: this.saleTablePage,
size: this.saleTableSize,
shopId: this.shopId
shopId: this.shopInfo.id,
});
this.saleTable = res.records;
this.saleTableTotal = res.totalRow * 1;
this.summaryDateGet(res.countList);
this.saleTable = res;
this.saleTableTotal = res.length;
// this.summaryDateGet(res.countList);
setTimeout(() => {
this.saleTableLoading = false;
}, 300);
@@ -939,8 +888,8 @@ export default {
async datePayType() {
try {
this.payChartLoading = true;
const res = await dataSummaryApi.datePayType({ day: this.saleActive,shopId: this.shopId });
const data = res.countPayType.map((item) => {
const res = await dataSummaryApi.datePayType({ day: this.saleActive, shopId: this.shopInfo.id });
const data = res.map((item) => {
return {
value: item.count,
name: item.payType,

97
src/views/data/sales.vue
View File

@@ -11,7 +11,7 @@
<el-input placeholder="商品名称" v-model="query.productName" />
</el-form-item>
<el-form-item v-if="isHeadShop == 1&&loginType == 0">
<el-form-item v-if="isHeadShop == 1 && loginType == 0">
<el-select v-model="shopId" placeholder="选择分店" style="width: 200px; margin-right: 10px"
@change="getCategory">
<el-option v-for="item in branchList" :key="item.shopId" :label="item.shopName" :value="item.shopId" />
@@ -25,13 +25,13 @@
</template>
<el-form-item>
<el-radio-group v-model="timeValue" @change="timeChange">
<el-radio-button value="">全部</el-radio-button>
<el-radio-button value="0">今天</el-radio-button>
<el-radio-button value="-1">昨天</el-radio-button>
<el-radio-button value="-7">最近7天</el-radio-button>
<el-radio-button value="-30">最近30天</el-radio-button>
<el-radio-button value="week">本周</el-radio-button>
<el-radio-button value="month">本月</el-radio-button>
<!-- <el-radio-button value="">全部</el-radio-button> -->
<el-radio-button value="today">今天</el-radio-button>
<el-radio-button value="yesterday">昨天</el-radio-button>
<el-radio-button value="last_7_days">最近7天</el-radio-button>
<el-radio-button value="last_30_days">最近30天</el-radio-button>
<el-radio-button value="this_week">本周</el-radio-button>
<el-radio-button value="this_month">本月</el-radio-button>
<el-radio-button value="custom">自定义</el-radio-button>
</el-radio-group>
<el-date-picker class="u-m-l-10" v-model="query.createdAt" type="daterange" range-separator="至"
@@ -156,16 +156,18 @@
</template>
<script>
import _ from 'lodash'
import saleSummaryApi from "@/api/order/sale-summary";
import categoryApi from "@/api/product/productclassification";
import ShopApi from "@/api/account/shop";
import dayjs from "dayjs";
import { downloadFile } from "@/utils/index";
import { formatDateRange } from './utils/index.js'
export default {
data() {
return {
timeValue: "",
timeValue: "today",
resetQuery: null,
orderType: "2",
categorys: [],
@@ -175,6 +177,7 @@ export default {
prodCategoryId: "",
},
tableData: {
totalList: [],
data: [],
page: 1,
size: 10,
@@ -187,8 +190,8 @@ export default {
branchList: [],
shopId: null,
isHeadShop: JSON.parse(localStorage.getItem("userInfo")).isHeadShop,
loginType: localStorage.getItem("loginType")
loginType: localStorage.getItem("loginType"),
shopInfo: JSON.parse(localStorage.getItem("userInfo")),
};
},
filters: {
@@ -238,9 +241,10 @@ export default {
const res = await saleSummaryApi.count({
beginDate: this.query.createdAt[0],
endDate: this.query.createdAt[1],
rangeType: this.timeValue,
prodCategoryId: this.query.prodCategoryId,
productName: this.query.productName,
shopId: this.shopId,
shopId: this.shopInfo.id,
type: this.orderType,
});
this.payCount = res;
@@ -263,11 +267,10 @@ export default {
shopId: this.shopId
});
downloadFile(file, "数据", "xlsx");
this.downloadLoading = false;
} catch (error) {
this.downloadLoading = false;
console.log(error);
}
this.downloadLoading = false;
},
// 重置查询
resetHandle() {
@@ -284,7 +287,8 @@ export default {
// 分页回调
paginationChange(e) {
this.tableData.page = e;
this.getTableData();
this.tableData.data = this.tableData.totalList[this.tableData.page - 1] || [];
// this.getTableData();
},
async getTableData() {
this.tableData.loading = true;
@@ -299,71 +303,22 @@ export default {
type: this.orderType,
beginDate: this.query.createdAt[0],
endDate: this.query.createdAt[1],
rangeType: this.timeValue,
productName: this.query.productName,
prodCategoryId: this.query.prodCategoryId,
shopId: this.shopId
shopId: this.shopInfo.id,
});
this.tableData.loading = false;
this.tableData.data = res.records;
this.tableData.total = res.totalRow;
this.tableData.totalList = _.chunk(res, this.tableData.size);
this.tableData.data = this.tableData.totalList[this.tableData.page - 1] || [];
this.tableData.total = res.length;
} catch (error) {
console.log(error);
}
this.tableData.loading = false;
},
// 切换时间
timeChange(e) {
const format = ["YYYY-MM-DD 00:00:00", "YYYY-MM-DD 23:59:59"];
switch (e) {
case "":
// 全部
this.query.createdAt = [];
break;
case "0":
// 今天
this.query.createdAt = [dayjs().format(format[0]), dayjs().format(format[1])];
break;
case "-1":
// 昨天
this.query.createdAt = [
dayjs().add(-1, "d").format(format[0]),
dayjs().add(-1, "d").format(format[1]),
];
break;
case "-7":
// 最近7天
this.query.createdAt = [
dayjs().add(-7, "d").format(format[0]),
dayjs().format(format[1]),
];
break;
case "-30":
// 最近7天
this.query.createdAt = [
dayjs().add(-30, "d").format(format[0]),
dayjs().format(format[1]),
];
break;
case "week":
// 本周
this.query.createdAt = [
dayjs().startOf("week").format(format[0]),
dayjs().endOf("week").format(format[1]),
];
break;
case "month":
// 本周
this.query.createdAt = [
dayjs().startOf("month").format(format[0]),
dayjs().endOf("month").format(format[1]),
];
break;
case "custom":
// 自定义
this.query.createdAt = [];
break;
default:
break;
}
this.query.createdAt = formatDateRange(e)
},
},
};

103
src/views/data/table.vue
View File

@@ -8,21 +8,21 @@
<el-form :model="query" inline label-position="left">
<div class="u-flex gap-10" style="flex-wrap: wrap;">
<el-radio-group v-model="timeValue" @change="timeChange">
<el-radio-button value="">全部</el-radio-button>
<el-radio-button value="0">今天</el-radio-button>
<el-radio-button value="-1">昨天</el-radio-button>
<el-radio-button value="-7">最近7天</el-radio-button>
<el-radio-button value="-30">最近30天</el-radio-button>
<el-radio-button value="week">本周</el-radio-button>
<el-radio-button value="month">本月</el-radio-button>
<!-- <el-radio-button value="">全部</el-radio-button> -->
<el-radio-button value="today">今天</el-radio-button>
<el-radio-button value="yesterday">昨天</el-radio-button>
<el-radio-button value="last_7_days">最近7天</el-radio-button>
<el-radio-button value="last_30_days">最近30天</el-radio-button>
<el-radio-button value="this_week">本周</el-radio-button>
<el-radio-button value="this_month">本月</el-radio-button>
<el-radio-button value="custom">自定义</el-radio-button>
</el-radio-group>
<div>
<div v-if="timeValue == 'custom'">
<el-date-picker v-model="query.createdAt" type="daterange" range-separator="至" start-placeholder="开始日期"
end-placeholder="结束日期" value-format="YYYY-MM-DD HH:mm:ss"></el-date-picker>
end-placeholder="结束日期" value-format="YYYY-MM-DD"></el-date-picker>
</div>
<div>
<el-select v-model="shopId" v-if="isHeadShop == 1&& loginType == 0" placeholder="选择分店"
<el-select v-model="shopId" v-if="isHeadShop == 1 && loginType == 0" placeholder="选择分店"
style="width: 200px; margin-right: 10px">
<el-option v-for="item in branchList" :key="item.shopId" :label="item.shopName" :value="item.shopId" />
</el-select>
@@ -99,24 +99,27 @@
</template>
<script>
import _ from "lodash";
import tableSummaryApi from "@/api/order/table-summary";
import ShopApi from "@/api/account/shop";
import dayjs from "dayjs";
import { downloadFile } from "@/utils/index";
import { formatDateRange } from './utils/index.js'
export default {
data() {
return {
timeValue: "",
timeValue: "today",
resetQuery: null,
orderType: "1",
categorys: [],
query: {
createdAt: [],
createdAt: [dayjs().format("YYYY-MM-DD"), dayjs().format("YYYY-MM-DD")],
proName: "",
cateId: "",
},
tableData: {
totalList: [],
data: [],
page: 1,
size: 10,
@@ -129,8 +132,8 @@ export default {
shopId: null,
branchList: [],
isHeadShop: JSON.parse(localStorage.getItem("userInfo")).isHeadShop,
loginType: localStorage.getItem("loginType")
loginType: localStorage.getItem("loginType"),
shopInfo: JSON.parse(localStorage.getItem("userInfo"))
};
},
filters: {
@@ -196,23 +199,26 @@ export default {
// 分页回调
paginationChange(e) {
this.tableData.page = e;
this.getTableData();
this.tableData.data = this.tableData.totalList[this.tableData.page - 1] || [];
// this.getTableData();
},
async getTableData() {
this.tableData.loading = true;
try {
if (this.query.createdAt[1]) {
this.query.createdAt.splice(1, 1, this.query.createdAt[1].replace("00:00:00", "23:59:59"))
}
// if (this.query.createdAt[1]) {
// this.query.createdAt.splice(1, 1, this.query.createdAt[1].replace("00:00:00", "23:59:59"))
// }
const res = await tableSummaryApi.list({
page: this.tableData.page,
size: this.tableData.size,
// page: this.tableData.page,
// size: this.tableData.size,
rangeType: this.timeValue,
beginDate: this.query.createdAt[0],
endDate: this.query.createdAt[1],
shopId: this.shopId
shopId: this.shopInfo.id
});
this.tableData.loading = false;
this.tableData.data = res;
this.tableData.totalList = _.chunk(res, this.tableData.size);
this.tableData.data = this.tableData.totalList[this.tableData.page - 1] || [];
this.tableData.total = res.length;
} catch (error) {
console.log(error);
@@ -220,58 +226,7 @@ export default {
},
// 切换时间
timeChange(e) {
const format = ["YYYY-MM-DD 00:00:00", "YYYY-MM-DD 23:59:59"];
switch (e) {
case "":
// 全部
this.query.createdAt = [];
break;
case "0":
// 今天
this.query.createdAt = [dayjs().format(format[0]), dayjs().format(format[1])];
break;
case "-1":
// 昨天
this.query.createdAt = [
dayjs().add(-1, "d").format(format[0]),
dayjs().add(-1, "d").format(format[1]),
];
break;
case "-7":
// 最近7天
this.query.createdAt = [
dayjs().add(-7, "d").format(format[0]),
dayjs().format(format[1]),
];
break;
case "-30":
// 最近7天
this.query.createdAt = [
dayjs().add(-30, "d").format(format[0]),
dayjs().format(format[1]),
];
break;
case "week":
// 本周
this.query.createdAt = [
dayjs().startOf("week").format(format[0]),
dayjs().endOf("week").format(format[1]),
];
break;
case "month":
// 本周
this.query.createdAt = [
dayjs().startOf("month").format(format[0]),
dayjs().endOf("month").format(format[1]),
];
break;
case "custom":
// 自定义
this.query.createdAt = [];
break;
default:
break;
}
this.query.createdAt = formatDateRange(e)
},
},
};

50
src/views/data/utils/index.js Normal file
View File

@@ -0,0 +1,50 @@
import dayjs from "dayjs";
// 格式化日期范围
export function formatDateRange(range, format = "YYYY-MM-DD") {
let arr = []
switch (range) {
case "today":
// 今天
arr = [dayjs().format(format), dayjs().format(format)];
break;
case "yesterday":
// 昨天
arr = [
dayjs().add(-1, "d").format(format),
dayjs().add(-1, "d").format(format),
];
break;
case "last_7_days":
// 最近7天
arr = [
dayjs().add(-6, "d").format(format),
dayjs().format(format),
];
break;
case "last_30_days":
// 最近7天
arr = [
dayjs().add(-29, "d").format(format),
dayjs().format(format),
];
break;
case "this_week":
// 本周
arr = [
dayjs().startOf("week").format(format),
dayjs().endOf("week").format(format),
];
break;
case "this_month":
// 本周
arr = [
dayjs().startOf("month").format(format),
dayjs().endOf("month").format(format),
];
break;
default:
break;
}
return arr;
}

13
src/views/order/index/components/detail.vue
View File

@@ -81,10 +81,10 @@
<div>优惠券抵扣：￥{{ detail.fullCouponDiscountAmount }}</div>
</div>
<div class="row">
<div>满减活动：￥0.00</div>
<div>新客立减：￥0.00</div>
<div>限时折扣：￥0.00</div>
<div>会员折扣：￥0.00</div>
<div>满减活动：￥{{ detail.discountActAmount || '-' }}</div>
<div>新客立减：￥{{ detail.newCustomerDiscountAmount || '-' }}</div>
<!-- <div>限时折扣：￥{{ JSON.parse(detail.limitRateJson). }}</div> -->
<div>会员折扣：￥{{ detail.vipDiscountAmount || '-' }}</div>
</div>
<div class="row">
<div>退单金额：￥{{ detail.refundAmount }}</div>
@@ -134,7 +134,7 @@
</div>
</template>
</el-table-column>
<el-table-column label="商品">
<el-table-column label="商品" width="150">
<template v-slot="scope">
<div class="shop_info">
<el-image :src="scope.row.productImg" style="width: 40px; height: 40px"></el-image>
@@ -143,6 +143,9 @@
{{ scope.row.productName }}
</span>
<span style="color: #999">{{ scope.row.productSkuName }}</span>
<div>
<el-tag v-if="scope.row.isTimeDiscount" type="danger" disable-transitions>限时折扣</el-tag>
</div>
</div>
</div>
</template>