gao-customer-h5/src/pages/salesOrder/FundRecordList.vue

<template>
	<div v-can="pageAccess" class="sales-order-record-list">
		<div class="filters">
			<t-input
				class="customer"
				v-model.trim="customerSearchKeyword"
				borderless
				placeholder="输入客户编码或姓名"
				@enter="applyCustomerSearch"
			>
				<template #suffix-icon>
					<div class="actions">
						<t-button
							v-if="customerId"
							shape="circle"
							theme="danger"
							variant="text"
							size="extra-small"
							aria-label="清除客户选择"
							@click.stop="clearCustomer"
						>
							<t-icon name="close" size="1rem" />
						</t-button>
						<t-button
							size="extra-small"
							theme="primary"
							variant="outline"
							content="选择客户"
							@click.stop="customerSelectorVisible = true"
						/>
					</div>
				</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"
					label="操作类型"
					:options="operationOptions"
					@change="selectOperation"
				/>
				<t-dropdown-item
					v-model="status"
					label="状态"
					:options="statusOptions"
					@change="selectStatus"
				/>
			</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"
					v-for="(item, index) in recordList"
					:key="item.id"
					arrow
					v-entrance-transition="index * 30"
					@click="toDetail(item)"
				>
					<template #leftIcon>
						<t-image
							v-if="getCustomerPhotoURL(item.customer, 64)"
							:src="getCustomerPhotoURL(item.customer, 64)"
							:alt="getCustomerText(item)"
							fit="cover"
							class="avatar"
						/>
						<div v-else class="avatar fallback" v-text="getCustomerText(item).slice(0, 1)" />
					</template>
					<template #title>
						<div class="title">
							<span class="customer" v-text="getCustomerText(item)" />
							<div class="operation">
								<span v-text="getFundOperationText(item.operationType)" />
								<t-tag
									size="small"
									:content="getRecordStatusText(item)"
									variant="light-outline"
									:theme="getRecordStatusTheme(item)"
								/>
							</div>
						</div>
					</template>
					<template #description>
						<div class="description">
							<div class="operator">
								<div class="field">
									<span class="label">发起人</span>
									<span class="text-bold" v-text="getOperatorText(item)" />
								</div>
								<div v-if="item.verifier" class="field">
									<span class="label">核销人</span>
									<span class="text-bold" v-text="getVerifierText(item)" />
								</div>
								<pass-time-label :timestamp="item.occurredAt" underline />
							</div>
							<div class="amounts">
								<div class="order-amount">
									<span class="label">订单总价</span>
									<span>￥</span>
									<span v-text="formatPackageAmount(item.salesOrderAmount)" />
								</div>
								<div class="unpaid-amount">
									<span class="label">剩余待收</span>
									<span>￥</span>
									<span v-text="formatPackageAmount(item.salesOrderUnpaidAmountSnapshot)" />
								</div>
								<div class="record-amount">
									<span class="label">流水金额</span>
									<span class="red">￥</span>
									<span class="value red" v-text="formatPackageAmount(item.amount)" />
								</div>
							</div>
						</div>
					</template>
				</t-cell>
			</t-cell-group>
			<div v-else class="empty" v-text="loading ? '正在加载资金流水' : '暂无资金流水'" />
			<div class="center-tips" v-text="loadStateText" />
		</t-pull-down-refresh>
	</div>
	<customer-selector
		v-model="customerId"
		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";
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";

defineOptions({ name: "FundRecordList" });

type DateFilterType = "today" | "yesterday" | "thisWeek" | "thisMonth" | "lastMonth" | "all" | "custom";

const route = useRoute();
const router = useRouter();
const navBarStore = useNavBarStore();
const userStore = useUserStore();
const recordList = ref<FundRecord[]>([]);
const operationType = ref(route.query.operationType === "RECEIVE" ? "RECEIVE" : "ALL");
const status = ref(route.query.status === "PENDING" ? "PENDING" : "ALL");
const pageIndex = ref(0);
const total = ref(0);
const loading = ref(false);
const isRefreshing = ref(false);
const noMore = ref(false);
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]);
const operationOptions = [
	{ label: "全部类型", value: "ALL" },
	{ label: "线下收款", value: "RECEIVE" },
	{ label: "退款", value: "REFUND" },
	{ label: "确认无需退款", value: "CONFIRM_NO_REFUND" },
	{ label: "资金冲正", value: "REVOKE" }
];
const statusOptions = [
	{ label: "全部状态", value: "ALL" },
	{ label: "待核销", value: "PENDING" },
	{ label: "已核销", value: "VERIFIED" },
	{ label: "已拒绝", value: "REJECTED" },
	{ 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,
			beginAt,
			endAt
		};
		const result = isSelfReceiveOnly.value
			? await SalesOrderAPI.myReceiveRecordList(page)
			: await SalesOrderAPI.fundRecordList(page);
		const list = result.list || [];
		recordList.value = recordList.value.concat(list);
		total.value = result.total || 0;
		pageIndex.value += 1;
		noMore.value = list.length < 15 || total.value <= recordList.value.length;
	} finally {
		loading.value = false;
	}
}

async function handleCustomerChange(value: string | string[]): Promise<void> {
	customerId.value = Array.isArray(value) ? String(value[0] || "") : value;
	try {
		selectedCustomer.value = customerId.value ? await CustomerAPI.detail(customerId.value) : undefined;
		customerSearchKeyword.value = getCustomerSearchKeyword(selectedCustomer.value);
		await reload();
	} catch (error) {
		Message.error(getErrorMessage(error, "客户资金流水加载失败"));
	}
}

async function applyCustomerSearch(): Promise<void> {
	const keyword = customerSearchKeyword.value.trim();
	if (!keyword) {
		await clearCustomer();
		return;
	}
	if (keyword === getCustomerSearchKeyword(selectedCustomer.value)) {
		return;
	}

	try {
		const customer = await CustomerAPI.findByCode(keyword) || await CustomerAPI.findByName(keyword);
		if (!customer?.id) {
			Message.warning("未找到客户");
			return;
		}
		customerId.value = customer.id;
		selectedCustomer.value = customer;
		customerSearchKeyword.value = getCustomerSearchKeyword(customer);
		await reload();
	} catch (error) {
		Message.error(getErrorMessage(error, "客户信息加载失败"));
	}
}

function getCustomerSearchKeyword(customer?: Customer): string {
	return customer?.name?.trim() || customer?.code?.trim() || "";
}

async function clearCustomer(): Promise<void> {
	customerId.value = "";
	selectedCustomer.value = undefined;
	customerSearchKeyword.value = "";
	await reload();
}

async function reload(): Promise<void> {
	if (loading.value) {
		return;
	}
	pageIndex.value = 0;
	recordList.value = [];
	total.value = 0;
	noMore.value = false;
	await loadMore();
}

async function selectOperation(value: DropdownValue): Promise<void> {
	if (!Array.isArray(value)) {
		operationType.value = String(value);
		await reload();
	}
}

async function selectStatus(value: DropdownValue): Promise<void> {
	if (!Array.isArray(value)) {
		status.value = String(value);
		await reload();
	}
}

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 || "未知";
}

function getVerifierText(item: FundRecord): string {
	return item.verifier?.name || item.verifier?.nick || item.verifierUserId || "未核销";
}

function getCustomerText(item: FundRecord): string {
	return item.customer?.name || item.customer?.code || item.customerId || "未知客户";
}

function getStatusTheme(statusValue?: FundRecordStatus): "success" | "warning" | "danger" | "default" {
	return statusValue === "VERIFIED" ? "success" : statusValue === "PENDING" ? "warning" : statusValue === "REJECTED" ? "danger" : "default";
}

function getRecordStatusText(item: FundRecord): string {
	return item.revokeRecordId ? "已被冲正" : getFundStatusText(item.status);
}

function getRecordStatusTheme(item: FundRecord): "success" | "warning" | "danger" | "default" {
	return item.revokeRecordId ? "danger" : getStatusTheme(item.status);
}

async function toDetail(item: FundRecord): Promise<void> {
	if (item.id) {
		await router.push({
			path: `/management/fund-records/${item.id}`,
			query: { transitionDepth: String(getCurrentRouteDepth() + 1) }
		});
	}
}

function getCurrentRouteDepth(): number {
	const transitionDepth = Array.isArray(route.query.transitionDepth)
		? route.query.transitionDepth[0]
		: route.query.transitionDepth;
	const depth = Number(transitionDepth);
	if (transitionDepth && Number.isInteger(depth) && 0 <= depth && depth <= 20) {
		return depth;
	}
	return Number(route.meta.depth ?? 0);
}

onMounted(async () => {
	navBarStore.clearRight();
	try {
		if (customerId.value) {
			selectedCustomer.value = await CustomerAPI.detail(customerId.value);
			customerSearchKeyword.value = getCustomerSearchKeyword(selectedCustomer.value);
		}
		await reload();
	} catch (error) {
		Message.error(getErrorMessage(error, "资金流水加载失败"));
	}
});

onUnmounted(() => navBarStore.clearRight());
</script>

<style scoped lang="less">
.sales-order-record-list {
	padding: var(--app-nav-height) 0 1rem;

	.filters {
		top: var(--app-nav-height);
		left: 0;
		right: 0;
		z-index: 10;
		display: flex;
		padding: .75rem 1rem;
		position: sticky;
		background: #F5F5F8;
		box-shadow: var(--td-shadow-1);
		flex-direction: column;

		.customer {
			--td-button-border-radius: .75rem;
			--td-input-vertical-padding: .25rem 1rem;

			border: 1px solid var(--td-component-border);
			z-index: 2;
			background: var(--td-bg-color-container);
			padding-right: .3rem;
			border-radius: 1rem;

			.actions {
				gap: .25rem;
				display: flex;
				align-items: center;
			}
		}

		.menus {
			--td-spacer-1: 6px;

			width: 100%;
			border: 1px solid rgba(148, 163, 184, .18);
			z-index: -1;
			overflow: hidden;
			margin-top: -1rem;
			background: #fff;
			border-top: none;
			padding-top: .8rem;
			border-radius: 0 0 1rem 1rem;
		}
	}

	.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;
	}

	.item {

		.avatar {
			width: 3.5rem;
			height: 3.5rem;
		}

		.title {
			gap: .5rem;
			display: flex;
			font-size: .75rem;
			align-items: center;
			justify-content: space-between;

			.customer {
				min-width: 0;
				overflow: hidden;
				font-weight: 600;
				white-space: nowrap;
				text-overflow: ellipsis;
			}

			.operation {
				gap: .5rem;
				display: flex;
				flex-shrink: 0;
				align-items: center;
			}
		}

		.description {
			display: flex;
			align-items: start;
			justify-content: space-between;

			.operator {
				gap: 0;
				color: var(--td-text-color-secondary);
				display: flex;
				font-size: .75rem;
				flex-wrap: wrap;
				line-height: 1.5;
				flex-direction: column;

				.field {
					gap: .25rem;
					display: inline-flex;
				}

				.label {
					color: var(--td-text-color-placeholder);
				}
			}

			.amounts {
				display: flex;
				font-size: .75rem;
				line-height: 1.5;
				align-items: end;
				flex-direction: column;

				.label {
					color: var(--td-text-color-placeholder);
				}

				.order-amount,
				.unpaid-amount,
				.record-amount {
					display: flex;
					align-items: baseline;
					white-space: nowrap;
				}
			}
		}
	}

	.empty {
		color: var(--td-text-color-secondary);
		padding: 2rem 1rem;
		text-align: center;
	}
}

:deep(.sales-order-record-list .avatar .t-image__img) {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: inherit;
}

:global(html.theme-dark) .sales-order-record-list {
	.fallback {
		background: #115e59;
	}
}
</style>