add date filter

2026-09-23 12:53:42 +08:00
parent 8bf0b7d343
commit 73b7544572
2 changed files with 370 additions and 3 deletions
@@ -10,6 +10,12 @@
 				placeholder="搜索产品名称（拼音）或编码"
 			/>
 			<t-dropdown-menu class="menus">
+				<t-dropdown-item
+					v-model="dateFilterType"
+					:label="dateFilterLabel"
+					:options="dateOptions"
+					@change="selectDateFilter"
+				/>
 				<t-dropdown-item v-model="operationType" label="操作类型" :options="operationOptions" @change="selectOperationType" />
 				<t-dropdown-item v-model="direction" label="出入库" :options="directionOptions" @change="selectDirection" />
 			</t-dropdown-menu>
@@ -21,6 +27,20 @@
 			@scrolltolower="loadMore"
 		>
 			<div class="list-wrap">
+				<t-cell-group v-if="isCustomDate" class="date-summary" theme="card">
+					<t-cell
+						title="开始时间"
+						:note="dateRange[0] || '-'"
+						arrow
+						@click="openStartTime"
+					/>
+					<t-cell
+						title="结束时间"
+						:note="dateRange[1] || '-'"
+						arrow
+						@click="openEndTime"
+					/>
+				</t-cell-group>
 				<t-cell-group v-if="filteredProduct && filteredSku" theme="card">
 					<t-cell class="sku">
 						<template #leftIcon>
@@ -119,15 +139,40 @@
 			</div>
 		</t-pull-down-refresh>
 	</div>
+	<t-popup v-model="startVisible" placement="bottom">
+		<t-date-time-picker
+			v-if="startVisible"
+			v-model="startDraft"
+			format="YYYY-MM-DD HH:mm"
+			:mode="['date', 'minute']"
+			title="开始时间"
+			:default-value="dateRange[0]"
+			@cancel="cancelStartTime"
+			@confirm="confirmStartTime"
+		/>
+	</t-popup>
+	<t-popup v-model="endVisible" placement="bottom">
+		<t-date-time-picker
+			v-if="endVisible"
+			v-model="endDraft"
+			format="YYYY-MM-DD HH:mm"
+			:mode="['date', 'minute']"
+			title="结束时间"
+			:default-value="dateRange[1]"
+			@cancel="cancelEndTime"
+			@confirm="confirmEndTime"
+		/>
+	</t-popup>
 </template>

 <script setup lang="ts">
 import { type DropdownValue } from "tdesign-mobile-vue";
-import { PassTimeLabel } from "timi-web";
+import { PassTimeLabel, Time } from "timi-web";
 import { UserAPI } from "timi-web-api";
 import ProductAPI from "@/api/ProductAPI";
 import { useNavBarStore } from "@/store/navBarStore";
 import type { Product, ProductSku, StockOperationType, StockRecord, StockRecordDirection } from "@/types/Product";
+import { buildPresetDateRange, parseDateFilterType, parseDateTime } from "@/utils/date";
 import { getErrorMessage } from "@/utils/error";
 import { getProductPhotoURL, getProductQuantityText, getProductTypeText, getStockOperationText } from "@/utils/product";
 import { Message } from "@/utils/message";
@@ -137,6 +182,7 @@ import { buildFallbackAvatar } from "@/utils/avatar";

 defineOptions({ name: "ProductStockRecordList" });

+type DateFilterType = "today" | "yesterday" | "thisWeek" | "thisMonth" | "lastMonth" | "all" | "custom";
 type OperationFilter = "ALL" | StockOperationType;
 type DirectionFilter = "ALL" | StockRecordDirection;

@@ -161,9 +207,26 @@ const activeReservationRequested = getQueryText("activeReservationOnly") === "tr
 const operationType = ref<OperationFilter>(getQueryText("operationType") as OperationFilter || (activeReservationRequested ? "ORDER_RESERVE" : "ALL"));
 const direction = ref<DirectionFilter>(getQueryText("direction") as DirectionFilter || "ALL");
 const keyword = ref(getQueryText("keyword"));
+const dateOptions: Array<{ label: string; value: DateFilterType }> = [
+	{ label: "今天", value: "today" },
+	{ label: "昨天", value: "yesterday" },
+	{ label: "本周", value: "thisWeek" },
+	{ label: "本月", value: "thisMonth" },
+	{ label: "上个月", value: "lastMonth" },
+	{ label: "全部", value: "all" },
+	{ label: "自定义范围", value: "custom" }
+];
+const dateFilterType = ref<DateFilterType>(parseDateFilterType(getQueryText("dateType"), dateOptions, "thisWeek"));
+const dateRange = ref<[string, string]>(parseDateRange(dateFilterType.value));
+const startDraft = ref("");
+const endDraft = ref("");
+const startVisible = ref(false);
+const endVisible = ref(false);
 const activeReservationOnly = computed(() => activeReservationRequested && operationType.value === "ORDER_RESERVE");
 let keywordTimer: number | undefined;
 let requestToken = 0;
+const dateFilterLabel = computed(() => dateOptions.find(item => item.value === dateFilterType.value)?.label || "时间范围");
+const isCustomDate = computed(() => dateFilterType.value === "custom");
 const emptyText = computed(() => {
 	if (loading.value) {
 		return "正在加载库存流水";
@@ -198,6 +261,13 @@ function getQueryText(key: string): string {
 	return Array.isArray(value) ? String(value[0] || "") : String(value || "");
 }

+function parseDateRange(type: DateFilterType): [string, string] {
+	if (type !== "custom") {
+		return buildPresetDateRange(type);
+	}
+	return [getQueryText("beginAt"), getQueryText("endAt")];
+}
+
 function getDefaultFilteredSkuUnitId(): string {
 	return filteredSkuUnitList.value.find(unit => unit.isBase)?.id || filteredSkuUnitList.value[0]?.id || "";
 }
@@ -276,6 +346,7 @@ async function loadMore(force = false): Promise<void> {
 	const token = ++requestToken;
 	loading.value = true;
 	try {
+		const [beginAt, endAt] = buildUnixRange();
 		const result = await ProductAPI.recordList({
 			productId: productId.value || undefined,
 			skuId: skuId.value || undefined,
@@ -283,6 +354,8 @@ async function loadMore(force = false): Promise<void> {
 			operationType: operationType.value === "ALL" ? undefined : operationType.value,
 			activeReservationOnly: activeReservationOnly.value || undefined,
 			direction: direction.value === "ALL" ? undefined : direction.value,
+			beginAt,
+			endAt,
 			index: pageIndex.value,
 			size: pageSize
 		});
@@ -332,6 +405,101 @@ async function selectDirection(value: DropdownValue): Promise<void> {
 	}
 }

+async function selectDateFilter(value: DropdownValue): Promise<void> {
+	if (Array.isArray(value)) {
+		return;
+	}
+	dateFilterType.value = String(value) as DateFilterType;
+	if (dateFilterType.value !== "custom") {
+		dateRange.value = buildPresetDateRange(dateFilterType.value);
+		await replaceFilterQuery();
+		await reload();
+	} else {
+		await replaceFilterQuery();
+	}
+}
+
+function openStartTime(): void {
+	startDraft.value = dateRange.value[0];
+	startVisible.value = true;
+}
+
+function openEndTime(): void {
+	endDraft.value = dateRange.value[1];
+	endVisible.value = true;
+}
+
+function cancelStartTime(): void {
+	startVisible.value = false;
+	startDraft.value = dateRange.value[0];
+}
+
+function cancelEndTime(): void {
+	endVisible.value = false;
+	endDraft.value = dateRange.value[1];
+}
+
+async function confirmStartTime(value?: string | number): Promise<void> {
+	startVisible.value = false;
+	dateRange.value = [String(value || startDraft.value), dateRange.value[1]];
+	await confirmCustomRange();
+}
+
+async function confirmEndTime(value?: string | number): Promise<void> {
+	endVisible.value = false;
+	dateRange.value = [dateRange.value[0], String(value || endDraft.value)];
+	await confirmCustomRange();
+}
+
+async function confirmCustomRange(): Promise<void> {
+	if (dateRange.value[0] && dateRange.value[1] && dateRange.value[1] < dateRange.value[0]) {
+		dateRange.value = [dateRange.value[1], dateRange.value[0]];
+	}
+	dateFilterType.value = "custom";
+	await replaceFilterQuery();
+	await reload();
+}
+
+function buildFilterQuery(transitionDepth = getQueryText("transitionDepth")): Record<string, string> {
+	const query = {
+		productId: productId.value,
+		skuId: skuId.value,
+		keyword: keyword.value.trim(),
+		operationType: operationType.value === "ALL" ? "" : operationType.value,
+		direction: direction.value === "ALL" ? "" : direction.value,
+		activeReservationOnly: activeReservationRequested ? "true" : "",
+		dateType: dateFilterType.value,
+		beginAt: dateRange.value[0] || "",
+		endAt: dateRange.value[1] || ""
+	};
+	if (isValidTransitionDepth(transitionDepth)) {
+		return { ...query, transitionDepth };
+	}
+	return query;
+}
+
+async function replaceFilterQuery(): Promise<void> {
+	await router.replace({
+		name: "ProductStockRecordList",
+		query: buildFilterQuery()
+	});
+}
+
+function isValidTransitionDepth(value: string): boolean {
+	const depth = Number(value);
+	return value !== "" && Number.isInteger(depth) && 0 <= depth && depth <= 20;
+}
+
+function buildUnixRange(): [number | undefined, number | undefined] {
+	if (dateFilterType.value === "all") {
+		return [0, Time.toTimestamp(new Date())];
+	}
+	return [
+		Time.toTimestamp(parseDateTime(dateRange.value[0], false)),
+		Time.toTimestamp(parseDateTime(dateRange.value[1], true))
+	];
+}
+
 async function reload(): Promise<void> {
 	pageIndex.value = 0;
 	recordList.value = [];
@@ -438,6 +606,22 @@ onUnmounted(() => {
 		display: flex;
 		flex-direction: column;

+		.date-summary {
+
+			:deep(.t-cell__title) {
+				flex: 0 0 4.5rem;
+			}
+
+			:deep(.t-cell__note) {
+				flex: 1 1 0;
+				min-width: 0;
+				overflow: hidden;
+				text-align: right;
+				text-overflow: ellipsis;
+				white-space: nowrap;
+			}
+		}
+
 		.sku {
 			--td-tag-square-border-radius: .5rem;