|
|
@@ -0,0 +1,230 @@
|
|
|
+<template>
|
|
|
+ <div class="app-container">
|
|
|
+ <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="100px">
|
|
|
+ <el-form-item label="统计日期" prop="dateRange">
|
|
|
+ <el-date-picker
|
|
|
+ v-model="dateRange"
|
|
|
+ type="date"
|
|
|
+ placeholder="统计日期"
|
|
|
+ value-format="yyyy-MM-dd"
|
|
|
+ />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item>
|
|
|
+ <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>
|
|
|
+ </el-form>
|
|
|
+
|
|
|
+ <el-row :gutter="10" class="mb8">
|
|
|
+ <el-col :span="1.5">
|
|
|
+ <el-button
|
|
|
+ type="warning"
|
|
|
+ plain
|
|
|
+ icon="el-icon-download"
|
|
|
+ @click="handleExport"
|
|
|
+ v-hasPermi="['settlement:store:statistics:export']"
|
|
|
+ >导出</el-button>
|
|
|
+ </el-col>
|
|
|
+ <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
|
|
|
+ </el-row>
|
|
|
+
|
|
|
+ <el-table v-loading="loading" :data="statisticsList" border>
|
|
|
+ <!-- 基本信息 -->
|
|
|
+ <el-table-column label="统计日期" align="center" prop="day" width="100">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ {{ parseDay(scope.row.day) }}
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+
|
|
|
+ <el-table-column label="统计门店" align="center" prop="day" width="100">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ {{ scope.row.storeName }}
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+
|
|
|
+ <!-- 总计统计 -->
|
|
|
+ <el-table-column label="总计" align="center">
|
|
|
+ <el-table-column label="订单总数" align="center" width="100">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ {{ scope.row.clothOrderCount + scope.row.goodsOrderCount }}
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="订单总额" align="center" width="120">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ {{ (scope.row.clothOrderAmount + scope.row.goodsOrderAmount).toFixed(2) }}
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="总支付金额" align="center" width="120">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ {{ calculateTotalPayAmount(scope.row) }}
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="总退款金额" align="center" width="120">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ {{ calculateTotalRefundAmount(scope.row) }}
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table-column>
|
|
|
+
|
|
|
+ <!-- 洗衣订单统计 -->
|
|
|
+ <el-table-column label="洗衣订单" align="center">
|
|
|
+ <el-table-column label="订单数" align="center" prop="clothOrderCount" width="90" />
|
|
|
+ <el-table-column label="衣物件数" align="center" prop="clothCount" width="90" />
|
|
|
+ <el-table-column label="订单总额" align="center" prop="clothOrderAmount" width="100" />
|
|
|
+ <el-table-column label="支付金额" align="center">
|
|
|
+ <el-table-column label="微信支付" align="center" prop="clothWechatAmount" width="100" />
|
|
|
+ <el-table-column label="支付宝" align="center" prop="clothAlipayAmount" width="100" />
|
|
|
+ <el-table-column label="现金" align="center" prop="clothCashAmount" width="100" />
|
|
|
+ <el-table-column label="会员卡" align="center" prop="clothMemberAmount" width="100" />
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="退款金额" align="center">
|
|
|
+ <el-table-column label="微信退款" align="center" prop="clothWechatRefundAmount" width="100" />
|
|
|
+ <el-table-column label="支付宝退款" align="center" prop="clothAlipayRefundAmount" width="100" />
|
|
|
+ <el-table-column label="现金退款" align="center" prop="clothCashRefundAmount" width="100" />
|
|
|
+ <el-table-column label="会员卡退款" align="center" prop="clothMemberRefundAmount" width="100" />
|
|
|
+ </el-table-column>
|
|
|
+ </el-table-column>
|
|
|
+
|
|
|
+ <!-- 商品订单统计 -->
|
|
|
+ <el-table-column label="商品订单" align="center">
|
|
|
+ <el-table-column label="订单数" align="center" prop="goodsOrderCount" width="90" />
|
|
|
+ <el-table-column label="订单总额" align="center" prop="goodsOrderAmount" width="100" />
|
|
|
+ <el-table-column label="支付金额" align="center">
|
|
|
+ <el-table-column label="微信支付" align="center" prop="goodsWechatAmount" width="100" />
|
|
|
+ <el-table-column label="支付宝" align="center" prop="goodsAlipayAmount" width="100" />
|
|
|
+ <el-table-column label="现金" align="center" prop="goodsCashAmount" width="100" />
|
|
|
+ <el-table-column label="会员卡" align="center" prop="goodsMemberAmount" width="100" />
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="退款金额" align="center">
|
|
|
+ <el-table-column label="微信退款" align="center" prop="goodsWechatRefundAmount" width="100" />
|
|
|
+ <el-table-column label="支付宝退款" align="center" prop="goodsAlipayRefundAmount" width="100" />
|
|
|
+ <el-table-column label="现金退款" align="center" prop="goodsCashRefundAmount" width="100" />
|
|
|
+ <el-table-column label="会员卡退款" align="center" prop="goodsMemberRefundAmount" width="100" />
|
|
|
+ </el-table-column>
|
|
|
+ </el-table-column>
|
|
|
+
|
|
|
+
|
|
|
+ </el-table>
|
|
|
+
|
|
|
+ <pagination
|
|
|
+ v-show="total > 0"
|
|
|
+ :total="total"
|
|
|
+ :page.sync="queryParams.pageNum"
|
|
|
+ :limit.sync="queryParams.pageSize"
|
|
|
+ @pagination="getList"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import { listStatistics, listStatisticsByStore, exportStatistics } from "@/api/settlement/statistics";
|
|
|
+
|
|
|
+export default {
|
|
|
+ name: "StoreStatistics",
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ // 遮罩层
|
|
|
+ loading: false,
|
|
|
+ // 显示搜索条件
|
|
|
+ showSearch: true,
|
|
|
+ // 总条数
|
|
|
+ total: 0,
|
|
|
+ // 统计列表数据
|
|
|
+ statisticsList: [],
|
|
|
+ // 日期范围
|
|
|
+ dateRange: '',
|
|
|
+ // 查询参数
|
|
|
+ queryParams: {
|
|
|
+ pageNum: 1,
|
|
|
+ pageSize: 10,
|
|
|
+ startDate: undefined,
|
|
|
+ endDate: undefined
|
|
|
+ }
|
|
|
+ };
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ this.getList();
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ /** 查询统计列表 */
|
|
|
+ getList() {
|
|
|
+ this.loading = true;
|
|
|
+ if (this.dateRange) {
|
|
|
+ this.queryParams.startDate = this.dateRange;
|
|
|
+ } else {
|
|
|
+ this.queryParams.startDate = undefined;
|
|
|
+ }
|
|
|
+ listStatisticsByStore(this.queryParams).then(response => {
|
|
|
+ this.statisticsList = response.rows;
|
|
|
+ this.total = response.total;
|
|
|
+ this.loading = false;
|
|
|
+ });
|
|
|
+ },
|
|
|
+ /** 搜索按钮操作 */
|
|
|
+ handleQuery() {
|
|
|
+ this.queryParams.pageNum = 1;
|
|
|
+ this.getList();
|
|
|
+ },
|
|
|
+ /** 重置按钮操作 */
|
|
|
+ resetQuery() {
|
|
|
+ this.dateRange = [];
|
|
|
+ this.resetForm("queryForm");
|
|
|
+ this.handleQuery();
|
|
|
+ },
|
|
|
+ /** 导出按钮操作 */
|
|
|
+ handleExport() {
|
|
|
+ const queryParams = { ...this.queryParams };
|
|
|
+ if (this.dateRange && this.dateRange.length > 0) {
|
|
|
+ queryParams.startDate = this.dateRange[0];
|
|
|
+ queryParams.endDate = this.dateRange[1];
|
|
|
+ }
|
|
|
+ this.$confirm('是否确认导出所有统计数据项?', "警告", {
|
|
|
+ confirmButtonText: "确定",
|
|
|
+ cancelButtonText: "取消",
|
|
|
+ type: "warning"
|
|
|
+ }).then(() => {
|
|
|
+ this.$download('settlement/store/statistics/export', queryParams);
|
|
|
+ });
|
|
|
+ },
|
|
|
+ // 解析日期显示
|
|
|
+ parseDay(day) {
|
|
|
+ if (!day) return '';
|
|
|
+ const str = day.toString();
|
|
|
+ return `${str.substring(0, 4)}-${str.substring(4, 6)}-${str.substring(6, 8)}`;
|
|
|
+ },
|
|
|
+ // 计算总支付金额
|
|
|
+ calculateTotalPayAmount(row) {
|
|
|
+ const clothPay = (row.clothWechatAmount || 0) +
|
|
|
+ (row.clothAlipayAmount || 0) +
|
|
|
+ (row.clothCashAmount || 0) +
|
|
|
+ (row.clothMemberAmount || 0);
|
|
|
+ const goodsPay = (row.goodsWechatAmount || 0) +
|
|
|
+ (row.goodsAlipayAmount || 0) +
|
|
|
+ (row.goodsCashAmount || 0) +
|
|
|
+ (row.goodsMemberAmount || 0);
|
|
|
+ return (clothPay + goodsPay).toFixed(2);
|
|
|
+ },
|
|
|
+ // 计算总退款金额
|
|
|
+ calculateTotalRefundAmount(row) {
|
|
|
+ const clothRefund = (row.clothWechatRefundAmount || 0) +
|
|
|
+ (row.clothAlipayRefundAmount || 0) +
|
|
|
+ (row.clothCashRefundAmount || 0) +
|
|
|
+ (row.clothMemberRefundAmount || 0);
|
|
|
+ const goodsRefund = (row.goodsWechatRefundAmount || 0) +
|
|
|
+ (row.goodsAlipayRefundAmount || 0) +
|
|
|
+ (row.goodsCashRefundAmount || 0) +
|
|
|
+ (row.goodsMemberRefundAmount || 0);
|
|
|
+ return (clothRefund + goodsRefund).toFixed(2);
|
|
|
+ }
|
|
|
+ }
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped>
|
|
|
+.el-table .warning-row {
|
|
|
+ background: oldlace;
|
|
|
+}
|
|
|
+.el-table .success-row {
|
|
|
+ background: #f0f9eb;
|
|
|
+}
|
|
|
+</style>
|
