feat:商户交易记录(按月)表格

src/api/hard/hard-total.ts

@@ -114,3 +114,15 @@ export function pageListCs(query?: any) {
 		data: query,
 	})
 }
+
+export function pageListCsByMonth(query?: any) {
+	return request({
+		url: "/hard/hard-total/page-list-cs-by-month",
+		method: "post",
+		params: {
+			current: query.current,
+			size: query.size,
+		},
+		data: query,
+	})
+}

src/views/hard/hard-sh/components/hard-sh-by-day.vue

@@ -0,0 +1,140 @@
+<template>
+    <div class="w-full">
+        <el-table :data="state.dataList" v-loading="state.loading" border :summary-method="getSummaries" show-summary
+            :cell-style="tableStyle.cellStyle" :header-cell-style="tableStyle.headerCellStyle"
+            @selection-change="selectionChangHandle" @sort-change="sortChangeHandle">
+            <el-table-column type="selection" width="80" align="center" />
+            <el-table-column type="index" label="#" width="50" />
+            <el-table-column label="商户" width="200" align="center" prop="merchantName" />
+            <el-table-column label="流水金额" min-width="120" align="center" prop="totalPayPrice">
+                <template #default="{ row }">
+                    <span class="color-success">
+                        {{ displayPrice(row.totalPayPrice) }}
+                    </span>
+                </template>
+            </el-table-column>
+            <el-table-column label="流水次数" min-width="120" align="center" prop="totalPayCount">
+                <template #default="{ row }">
+                    <span class="color-primary">
+                        {{ row.totalPayCount || 0 }}
+                    </span>
+                </template>
+            </el-table-column>
+            <el-table-column label="退款金额" min-width="120" align="center" prop="totalRefundPrice">
+                <template #default="{ row }">
+                    <span class="color-danger">
+                        {{ displayPrice(row.totalRefundPrice) }}
+                    </span>
+                </template>
+            </el-table-column>
+            <el-table-column label="退款次数" min-width="120" align="center" prop="totalRefundCount">
+                <template #default="{ row }">
+                    <span class="color-danger">
+                        {{ row.totalRefundCount || 0 }}
+                    </span>
+                </template>
+            </el-table-column>
+            <el-table-column label="消费净金额" min-width="120" align="center" prop="totalProfitPrice" min-min-width="120">
+                <template #default="{ row }">
+                    <span class="color-success">
+                        {{ displayPrice(row.totalProfitPrice) }}
+                    </span>
+                </template>
+            </el-table-column>
+            <el-table-column label="消费净次数" min-width="120" align="center" prop="totalProfitCount" min-min-width="120">
+                <template #default="{ row }">
+                    <span class="color-success">
+                        {{ row.totalProfitCount || 0 }}
+                    </span>
+                </template>
+            </el-table-column>
+            <el-table-column label="操作" fixed="right" align="center" width="220">
+                <template #default="{ row }">
+                    <el-tooltip class="box-item" effect="dark" content="只有合作商家能结账" placement="top">
+                        <el-button icon="Tickets" text :disabled="row.merchantType != 2" type="primary"
+                            @click="doCheckout(row)">
+                            商户结账
+                        </el-button>
+                    </el-tooltip>
+                    <el-button icon="Tickets" type="primary" text @click="exportMchExcel(row)">
+                        导出商户流水
+                    </el-button>
+                </template>
+            </el-table-column>
+        </el-table>
+    </div>
+</template>
+
+<script setup lang="ts" name="hard-sh-by-day">
+import { BasicTableProps, useTable } from "/@/hooks/table"
+import { displayPrice } from "/@/utils/formatMoney"
+
+import * as hardTotalApi from "/@/api/hard/hard-total"
+
+const { push } = useRouter()
+
+const state: BasicTableProps = reactive<BasicTableProps>({
+    createdIsNeed: false,
+    isPage: false,
+    queryForm: {},
+    pageList: hardTotalApi.pageListCs,
+})
+
+//  table hook
+const { getDataList, currentChangeHandle, sizeChangeHandle, sortChangeHandle, postDownBlobFile, tableStyle } = useTable(state)
+
+// 多选变量
+const selectObjs = ref([]) as any
+const multiple = ref(true)
+
+const doCheckout = (row: any) => {
+    push({ path: "/mch/mch-checkout/index", query: { mchId: row.merchantId } })
+}
+
+const exportMchExcel = (row: any) => {
+    postDownBlobFile("/hard/hard-total/export-mch-cs", { ...state.queryForm, merchantId: row.merchantId }, "商户流水.xlsx")
+}
+
+// 多选事件
+const selectionChangHandle = (objs: { id: string }[]) => {
+    selectObjs.value = objs.map(({ id }) => id)
+    multiple.value = !objs.length
+}
+
+const getSummaries = (param: any) => {
+    const { columns, data } = param
+    const totalColumns = ["totalPayPrice", "totalPayCount", "totalRefundPrice", "totalRefundCount", "totalProfitPrice", "totalProfitCount"]
+    const totalRow = Array.from({ length: columns.length })
+    totalRow[0] = "合计"
+    columns.forEach((i: any, index: number) => {
+        if (totalColumns.includes(i.property)) {
+            const total = data
+                .filter((v: any) => v[i.property] != null)
+                .map((v: any) => v[i.property])
+                .reduce((pren: number, next: number) => pren + next, 0)
+            if (i.property.includes("Price")) {
+                totalRow[index] = displayPrice(total)
+            } else {
+                totalRow[index] = total
+            }
+        }
+    })
+    return totalRow
+}
+
+const doSearch = (params: any) => {
+    state.queryForm = params
+    getDataList()
+}
+
+const doCancel = (params: any) => {
+    state.queryForm = params
+    selectObjs.value = []
+    getDataList()
+}
+
+defineExpose({
+    doSearch,
+    doCancel
+})
+</script>

src/views/hard/hard-sh/components/hard-sh-by-month.vue

@@ -0,0 +1,122 @@
+<template>
+    <div class="w-full">
+        <el-table :data="state.dataList" v-loading="state.loading" border :summary-method="getSummaries" show-summary
+            :cell-style="tableStyle.cellStyle" :header-cell-style="tableStyle.headerCellStyle"
+            @selection-change="selectionChangHandle" @sort-change="sortChangeHandle">
+            <el-table-column type="selection" width="80" align="center" />
+            <el-table-column type="index" label="#" width="50" />
+            <el-table-column label="商户" width="200" align="center" prop="merchantName">
+                <template #default="{ row }">
+                    {{ row.merchantName || row.merchantId }}
+                </template>
+            </el-table-column>
+            <el-table-column label="月份" width="100" align="center" prop="day" />
+            <el-table-column label="流水金额" min-width="120" align="center" prop="totalPayPrice">
+                <template #default="{ row }">
+                    <span class="color-success">
+                        {{ displayPrice(row.totalPayPrice) }}
+                    </span>
+                </template>
+            </el-table-column>
+            <el-table-column label="流水次数" min-width="120" align="center" prop="totalPayCount">
+                <template #default="{ row }">
+                    <span class="color-primary">
+                        {{ row.totalPayCount || 0 }}
+                    </span>
+                </template>
+            </el-table-column>
+            <el-table-column label="退款金额" min-width="120" align="center" prop="totalRefundPrice">
+                <template #default="{ row }">
+                    <span class="color-danger">
+                        {{ displayPrice(row.totalRefundPrice) }}
+                    </span>
+                </template>
+            </el-table-column>
+            <el-table-column label="退款次数" min-width="120" align="center" prop="totalRefundCount">
+                <template #default="{ row }">
+                    <span class="color-danger">
+                        {{ row.totalRefundCount || 0 }}
+                    </span>
+                </template>
+            </el-table-column>
+            <el-table-column label="消费净金额" min-width="120" align="center" prop="totalProfitPrice" min-min-width="120">
+                <template #default="{ row }">
+                    <span class="color-success">
+                        {{ displayPrice(row.totalProfitPrice) }}
+                    </span>
+                </template>
+            </el-table-column>
+            <el-table-column label="消费净次数" min-width="120" align="center" prop="totalProfitCount" min-min-width="120">
+                <template #default="{ row }">
+                    <span class="color-success">
+                        {{ row.totalProfitCount || 0 }}
+                    </span>
+                </template>
+            </el-table-column>
+        </el-table>
+        <pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" v-bind="state.pagination" />
+    </div>
+</template>
+
+<script setup lang="ts" name="hard-sh-by-month">
+import { BasicTableProps, useTable } from "/@/hooks/table"
+import { displayPrice } from "/@/utils/formatMoney"
+
+import * as hardTotalApi from "/@/api/hard/hard-total"
+
+const state: BasicTableProps = reactive<BasicTableProps>({
+    createdIsNeed: false,
+    queryForm: {},
+    pageList: hardTotalApi.pageListCsByMonth,
+})
+
+// 多选变量
+const selectObjs = ref([]) as any
+const multiple = ref(true)
+
+//  table hook
+const { getDataList, currentChangeHandle, sizeChangeHandle, sortChangeHandle, postDownBlobFile, tableStyle } = useTable(state)
+
+// 多选事件
+const selectionChangHandle = (objs: { id: string }[]) => {
+    selectObjs.value = objs.map(({ id }) => id)
+    multiple.value = !objs.length
+}
+
+const getSummaries = (param: any) => {
+    const { columns, data } = param
+    const totalColumns = ["totalPayPrice", "totalPayCount", "totalRefundPrice", "totalRefundCount", "totalProfitPrice", "totalProfitCount"]
+    const totalRow = Array.from({ length: columns.length })
+    totalRow[0] = "合计"
+    columns.forEach((i: any, index: number) => {
+        if (totalColumns.includes(i.property)) {
+            const total = data
+                .filter((v: any) => v[i.property] != null)
+                .map((v: any) => v[i.property])
+                .reduce((pren: number, next: number) => pren + next, 0)
+            if (i.property.includes("Price")) {
+                totalRow[index] = displayPrice(total)
+            } else {
+                totalRow[index] = total
+            }
+        }
+    })
+    return totalRow
+}
+
+const doSearch = (params: any) => {
+    state.queryForm = params
+    getDataList()
+}
+
+const doCancel = (params: any) => {
+    state.queryForm = params
+    selectObjs.value = []
+    getDataList()
+}
+
+defineExpose({
+    doSearch,
+    doCancel
+})
+</script>

src/views/hard/hard-sh/index.vue

@@ -10,7 +10,7 @@
 					disabled: 'isLockNone',
 				}">
 				<template #default>
-					<el-form ref="queryRef" :inline="true" :model="state.queryForm" @keyup.enter="getDataList">
+					<el-form ref="queryRef" :inline="true" :model="state.queryForm" @keyup.enter="search">
 						<el-row>
 							<el-form-item style="width: 200px" label="用餐时间段" prop="hourType">
 								<dict-select v-model="state.queryForm.hourType" dict-code="daily_menu" />
@@ -26,81 +26,25 @@
 									type="datetimerange" />
 							</el-form-item>
 							<el-form-item>
-								<el-button icon="Search" type="primary" @click="getDataList">{{ $t("common.queryBtn")
+								<el-button icon="Search" type="primary" @click="search">{{ $t("common.queryBtn")
 								}}</el-button>
 								<el-button icon="Refresh" @click="resetQuery">{{ $t("common.resetBtn") }}</el-button>
 							</el-form-item>
 						</el-row>
 					</el-form>
-					<el-row>
-						<div class="mb8" style="width: 100%">
+					<el-row class="flex">
+						<el-tabs class="flex-1" v-model="activeTab">
+							<el-tab-pane v-for="(v) in tabPane" :key="v.name" :label="v.label" :name="v.name"
+								@tab-click="tabClick" />
+						</el-tabs>
+						<div class="mb8">
 							<right-toolbar :search="false" v-model:showSearch="showSearch"
 								:export="'wallet_walletTransaction_export'" @exportExcel="exportExcel" class="ml10 mr20"
-								style="float: right" @queryTable="getDataList"></right-toolbar>
+								style="float: right" @queryTable="search"></right-toolbar>
 						</div>
 					</el-row>
-					<el-table :data="state.dataList" v-loading="state.loading" border :summary-method="getSummaries"
-						show-summary :cell-style="tableStyle.cellStyle" :header-cell-style="tableStyle.headerCellStyle"
-						@selection-change="selectionChangHandle" @sort-change="sortChangeHandle">
-						<el-table-column type="selection" width="80" align="center" />
-						<el-table-column type="index" label="#" width="50" />
-						<el-table-column label="商户" align="center" prop="merchantName" />
-						<el-table-column label="流水金额" align="center" prop="totalPayPrice">
-							<template #default="{ row }">
-								<span class="color-success">
-									{{ displayPrice(row.totalPayPrice) }}
-								</span>
-							</template>
-						</el-table-column>
-						<el-table-column label="流水次数" align="center" prop="totalPayCount">
-							<template #default="{ row }">
-								<span class="color-primary">
-									{{ row.totalPayCount || 0 }}
-								</span>
-							</template>
-						</el-table-column>
-						<el-table-column label="退款金额" align="center" prop="totalRefundPrice">
-							<template #default="{ row }">
-								<span class="color-danger">
-									{{ displayPrice(row.totalRefundPrice) }}
-								</span>
-							</template>
-						</el-table-column>
-						<el-table-column label="退款次数" align="center" prop="totalRefundCount">
-							<template #default="{ row }">
-								<span class="color-danger">
-									{{ row.totalRefundCount || 0 }}
-								</span>
-							</template>
-						</el-table-column>
-						<el-table-column label="消费净金额" align="center" prop="totalProfitPrice" min-width="120">
-							<template #default="{ row }">
-								<span class="color-success">
-									{{ displayPrice(row.totalProfitPrice) }}
-								</span>
-							</template>
-						</el-table-column>
-						<el-table-column label="消费净次数" align="center" prop="totalProfitCount" min-width="120">
-							<template #default="{ row }">
-								<span class="color-success">
-									{{ row.totalProfitCount || 0 }}
-								</span>
-							</template>
-						</el-table-column>
-						<el-table-column label="操作" align="center" width="250">
-							<template #default="{ row }">
-								<el-tooltip class="box-item" effect="dark" content="只有合作商家能结账" placement="top">
-									<el-button icon="Tickets" text :disabled="row.merchantType != 2" type="primary"
-										@click="doCheckout(row)">
-										商户结账
-									</el-button>
-								</el-tooltip>
-								<el-button icon="Tickets" type="primary" text @click="exportMchExcel(row)">
-									导出商户流水
-								</el-button>
-							</template>
-						</el-table-column>
-					</el-table>
+					<hard-sh-by-day v-if="activeTab === 'MCH'" ref="hardShByDayRef" />
+					<hard-sh-by-month v-if="activeTab === 'MONTH'" ref="hardShByMonthRef" />
 				</template>
 			</DraggableDepTree>
 		</div>
@@ -108,80 +52,113 @@
 </template>
 
 <script setup lang="ts" name="hard-sb">
-import { BasicTableProps, useTable } from "/@/hooks/table"
-import { displayPrice } from "/@/utils/formatMoney"
-import * as hardTotalApi from "/@/api/hard/hard-total"
+import { ElMessage } from "element-plus"
 
-const { push } = useRouter()
+import other from "/@/utils/other"
+import { formatDate } from '/@/utils/formatTime';
+
+const HardShByDay = defineAsyncComponent(() => import("./components/hard-sh-by-day.vue"))
+const HardShByMonth = defineAsyncComponent(() => import("./components/hard-sh-by-month.vue"))
+
+// 组件变量
+const hardShByDayRef = ref()
+const hardShByMonthRef = ref()
 
 // 搜索变量
 const queryRef = ref()
 const showSearch = ref(true)
 
-// 多选变量
-const selectObjs = ref([]) as any
-const multiple = ref(true)
-const draggableDepTreeRef = ref() // 树组件ref引用
+const draggableDepTreeRef = ref()
 
-const state: BasicTableProps = reactive<BasicTableProps>({
-	isPage: false,
-	queryForm: {},
-	pageList: hardTotalApi.pageListCs,
+// tab变量
+const tabPane = ref([
+	{
+		label: "按商户统计",
+		name: "MCH"
+	},
+	{
+		label: "按月统计",
+		name: "MONTH"
+	}
+])
+const activeTab = ref("MCH")
+
+const defaultQueryForm = {
+}
+const state = reactive<any>({
+	queryForm: { ...defaultQueryForm },
 })
 
-//  table hook
-const { getDataList, currentChangeHandle, sizeChangeHandle, sortChangeHandle, postDownBlobFile, tableStyle } = useTable(state)
+watch(() => [activeTab.value, hardShByDayRef.value, hardShByMonthRef.value], () => {
+	if (activeTab.value === "MCH" && hardShByDayRef.value?.doSearch) {
+		search()
+	}
+	if (activeTab.value === "MONTH" && hardShByMonthRef.value?.doSearch) {
+		search()
+	}
+})
 
-// 导出excel
-const exportExcel = () => {
-	postDownBlobFile("/hard/hard-total/export-cs", Object.assign(state.queryForm), "商户交易记录.xlsx")
-}
-
-const doCheckout = (row: any) => {
-	push({ path: "/mch/mch-checkout/index", query: { mchId: row.merchantId } })
-}
-
-const exportMchExcel = (row: any) => {
-	postDownBlobFile("/hard/hard-total/export-mch-cs", { ...state.queryForm, merchantId: row.merchantId }, "商户流水.xlsx")
-}
-
-const getSummaries = (param: any) => {
-	const { columns, data } = param
-	const totalColumns = ["totalPayPrice", "totalPayCount", "totalRefundPrice", "totalRefundCount", "totalProfitPrice", "totalProfitCount"]
-	const totalRow = Array.from({ length: columns.length })
-	totalRow[0] = "合计"
-	columns.forEach((i: any, index: number) => {
-		if (totalColumns.includes(i.property)) {
-			const total = data
-				.filter((v: any) => v[i.property] != null)
-				.map((v: any) => v[i.property])
-				.reduce((pren: number, next: number) => pren + next, 0)
-			if (i.property.includes("Price")) {
-				totalRow[index] = displayPrice(total)
-			} else {
-				totalRow[index] = total
-			}
-		}
+onMounted(() => {
+	nextTick(() => {
+		search()
 	})
-	return totalRow
+})
+
+const exportExcel = () => {
+	ElMessage.info("下载中，请稍后")
+	switch (activeTab.value) {
+		case "MCH":
+			other.postDownBlobFile("/hard/hard-total/export-cs", Object.assign(state.queryForm), formatDate(new Date(), "YYYY年mm月dd日 HH时MM分SS秒 ") + "商户交易记录.xlsx")
+			break;
+		case "MONTH":
+			other.postDownBlobFile("/hard/hard-total/export-cs-by-month", Object.assign(state.queryForm), formatDate(new Date(), "YYYY年mm月dd日 HH时MM分SS秒 ") + "商户交易记录(按月).xlsx")
+			break;
+	}
 }
 
-// 多选事件
-const selectionChangHandle = (objs: { id: string }[]) => {
-	selectObjs.value = objs.map(({ id }) => id)
-	multiple.value = !objs.length
+const tabClick = () => {
+	cancel()
+}
+
+const search = () => {
+	if (activeTab.value === "MCH") {
+		state.queryForm.createTimeYearStr = ""
+	}
+	if (activeTab.value === "MONTH") {
+		state.queryForm.createTimeList = []
+	}
+	console.log("queryForm:", state.queryForm);
+	switch (activeTab.value) {
+		case "MCH":
+			hardShByDayRef.value.doSearch(state.queryForm)
+			break;
+		case "MONTH":
+			hardShByMonthRef.value.doSearch(state.queryForm)
+			break;
+	}
+}
+
+const cancel = () => {
+	state.queryForm = { ...defaultQueryForm }
+	switch (activeTab.value) {
+		case "MCH":
+			hardShByDayRef.value.doCancel(state.queryForm)
+			break;
+		case "MONTH":
+			hardShByMonthRef.value.doCancel(state.queryForm)
+			break;
+	}
 }
 
 // 清空搜索条件
 const resetQuery = () => {
 	// 清空搜索条件
 	queryRef.value?.resetFields()
-	// 清空多选
-	selectObjs.value = []
+	state.queryForm = { ...defaultQueryForm }
 	state.queryForm.deptId = ""
 	state.queryForm.userDeptIds = []
 	draggableDepTreeRef.value.resetData()
-	getDataList()
+	cancel()
 }
 
 // 树节点选择时
@@ -189,6 +166,6 @@ const handleGetSelectNode = (curClickedNode: any, checkedTreeNodes: any, isDeepT
 	state.queryForm.deptId = curClickedNode.id
 	state.queryForm.userDeptIds = checkedTreeNodes.map((item: any) => item.id)
 	state.queryForm.isInclude = !isDeepTree
-	getDataList()
+	search()
 }
 </script>