add date filter

src/pages/product/ProductStockRecordList.vue

@@ -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;
 

src/pages/salesOrder/FundRecordList.vue

@@ -32,6 +32,12 @@
 				</template>
 			</t-input>
 			<t-dropdown-menu class="menus">
+				<t-dropdown-item
+					v-model="dateFilterType"
+					:label="dateFilterLabel"
+					:options="dateOptions"
+					@change="selectDateFilter"
+				/>
 				<t-dropdown-item
 					v-if="!isSelfReceiveOnly"
 					v-model="operationType"
@@ -48,6 +54,20 @@
 			</t-dropdown-menu>
 		</div>
 		<t-pull-down-refresh v-model="isRefreshing" :refresh-timeout="30000" @refresh="reload" @scrolltolower="loadMore">
+			<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="recordList.length" class="empty-cell-title-margin" theme="card">
 				<t-cell
 					class="item"
@@ -124,10 +144,35 @@
 		v-model:visible="customerSelectorVisible"
 		@change="handleCustomerChange"
 	/>
+	<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, Time } from "timi-web";
 import { useUserStore } from "timi-web-api";
 import CustomerAPI from "@/api/CustomerAPI";
 import SalesOrderAPI from "@/api/SalesOrderAPI";
@@ -135,16 +180,18 @@ import CustomerSelector from "@/components/CustomerSelector.vue";
 import { useNavBarStore } from "@/store/navBarStore";
 import type { Customer } from "@/types/Customer";
 import type { FundOperationType, FundRecord, FundRecordStatus } from "@/types/SalesOrder";
+import { buildPresetDateRange, parseDateFilterType, parseDateTime } from "@/utils/date";
 import { getErrorMessage } from "@/utils/error";
 import { formatPackageAmount } from "@/utils/package";
 import { getFundOperationText, getFundStatusText } from "@/utils/salesOrder";
 import { Message } from "@/utils/message";
 import { permissionCodes } from "@/utils/permission";
 import { getCustomerPhotoURL } from "@/utils/customer";
-import { PassTimeLabel } from "timi-web";
 
 defineOptions({ name: "FundRecordList" });
 
+type DateFilterType = "today" | "yesterday" | "thisWeek" | "thisMonth" | "lastMonth" | "all" | "custom";
+
 const route = useRoute();
 const router = useRouter();
 const navBarStore = useNavBarStore();
@@ -161,6 +208,21 @@ const customerId = ref(getQueryText(route.query.customerId));
 const selectedCustomer = ref<Customer>();
 const customerSelectorVisible = ref(false);
 const customerSearchKeyword = ref("");
+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(route.query.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 isSelfReceiveOnly = computed(() => !userStore.hasPermissions(permissionCodes.fundRecord.read)
 	&& userStore.hasPermissions(permissionCodes.fundReceive.create));
 const pageAccess = computed(() => [permissionCodes.fundRecord.read, permissionCodes.fundReceive.create]);
@@ -179,24 +241,36 @@ const statusOptions = [
 	{ label: "已撤销", value: "CANCELLED" }
 ];
 const loadStateText = computed(() => loading.value ? "正在加载" : noMore.value ? "已经到底了" : "上拉加载更多");
+const dateFilterLabel = computed(() => dateOptions.find(item => item.value === dateFilterType.value)?.label || "时间范围");
+const isCustomDate = computed(() => dateFilterType.value === "custom");
 
 function getQueryText(value: unknown): string {
 	return Array.isArray(value) ? "" : typeof value === "string" ? value : "";
 }
 
+function parseDateRange(type: DateFilterType): [string, string] {
+	if (type !== "custom") {
+		return buildPresetDateRange(type);
+	}
+	return [getQueryText(route.query.beginAt), getQueryText(route.query.endAt)];
+}
+
 async function loadMore(): Promise<void> {
 	if (loading.value || noMore.value) {
 		return;
 	}
 	loading.value = true;
 	try {
+		const [beginAt, endAt] = buildUnixRange();
 		const page = {
 			index: pageIndex.value,
 			size: 15,
 			salesOrderId: String(route.query.salesOrderId || "") || undefined,
 			customerId: customerId.value || undefined,
 			operationType: isSelfReceiveOnly.value || operationType.value === "ALL" ? undefined : operationType.value as FundOperationType,
-			status: status.value === "ALL" ? undefined : status.value as FundRecordStatus
+			status: status.value === "ALL" ? undefined : status.value as FundRecordStatus,
+			beginAt,
+			endAt
 		};
 		const result = isSelfReceiveOnly.value
 			? await SalesOrderAPI.myReceiveRecordList(page)
@@ -283,6 +357,99 @@ async function selectStatus(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(route.query.transitionDepth)): Record<string, string> {
+	const query = {
+		salesOrderId: getQueryText(route.query.salesOrderId),
+		customerId: customerId.value,
+		operationType: isSelfReceiveOnly.value || operationType.value === "ALL" ? "" : operationType.value,
+		status: status.value === "ALL" ? "" : status.value,
+		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: "FundRecordList",
+		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))
+	];
+}
+
 function getOperatorText(item: FundRecord): string {
 	return item.operator?.name || item.operator?.nick || item.operatorUserId || "未知";
 }
@@ -391,6 +558,22 @@ onUnmounted(() => navBarStore.clearRight());
 		}
 	}
 
+	.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;
+		}
+	}
+
 	:deep(.t-pull-down-refresh) {
 		padding-top: .75rem;
 	}