gao-customer-h5/src/pages/notify/NotifyRecipientList.vue

<template>
	<div v-can="corePermissionCodes.notify.read" class="notify-recipient-list">
		<template v-if="detail">
			<t-segmented
				v-model="recipientFilter"
				class="filter"
				block
				:options="recipientFilterOptions"
				v-entrance-transition
			/>
			<t-cell-group v-if="filteredDetailList.length" theme="card" class="recipients">
				<t-cell
					v-for="(item, index) in filteredDetailList"
					:key="item.id"
					v-entrance-transition="index * 70"
				>
					<template #title>
						<div class="recipient-title">
							<span v-text="getRecipientName(item)" />
						</div>
					</template>
					<template v-if="recipientFilter === 'all'" #description>
						<div class="recipient-description">
							<pass-time-label :timestamp="item.sendAt" underline />
							<span v-if="item.resultDesc" v-text="item.resultDesc" />
						</div>
					</template>
					<template #note>
						<t-tag
							v-if="recipientFilter === 'all'"
							size="small"
							:theme="getStatusTheme(item)"
							:content="getStatusText(item)"
						/>
						<pass-time-label
							v-else-if="recipientFilter === 'read'"
							:timestamp="item.readAt"
							underline
						/>
						<telephone-link v-else :value="item.toUser?.phoneNo" />
					</template>
				</t-cell>
			</t-cell-group>
			<t-empty v-else description="暂无匹配的接收用户" v-entrance-transition="70" />
		</template>
		<t-empty
			v-else
			:description="isLoading ? '正在加载发送用户' : '通知不存在'"
		/>
	</div>
</template>

<script setup lang="ts">
import { PassTimeLabel, Time } from "timi-web";
import { NotifyAPI, type Notify, type NotifyDetail } from "timi-web-api";
import { Message } from "@/utils/message";
import { getErrorMessage } from "@/utils/error";
import { useNavBarStore } from "@/store/navBarStore";
import { corePermissionCodes } from "@/utils/permission";

type RecipientFilter = "all" | "unread" | "read";
type NotifyTagTheme = "default" | "success" | "warning" | "primary" | "danger";

defineOptions({
	name: "NotifyRecipientList"
});

const route = useRoute();
const navBarStore = useNavBarStore();

// ---------- 通知数据 ----------

const detail = ref<Notify>();
const isLoading = ref(false);
const recipientFilter = ref<RecipientFilter>(getRecipientFilterFromRoute());
let loadToken = 0;

const recipientFilterOptions = [
	{ value: "all" as RecipientFilter, label: "全部" },
	{ value: "unread" as RecipientFilter, label: "未读" },
	{ value: "read" as RecipientFilter, label: "已读" }
];
const filteredDetailList = computed(() => {
	const detailList = detail.value?.detailList || [];
	if (recipientFilter.value === "unread") {
		return detailList.filter(item => !item.readAt);
	}
	if (recipientFilter.value === "read") {
		return detailList.filter(item => Boolean(item.readAt));
	}
	return detailList;
});

function getRecipientFilterFromRoute(): RecipientFilter {
	const filter = String(route.query.filter || "");
	return filter === "unread" || filter === "read" ? filter : "all";
}

async function loadDetail(): Promise<void> {
	const requestToken = loadToken + 1;
	loadToken = requestToken;
	detail.value = undefined;
	const notifyId = String(route.params.id || "");
	if (!notifyId) {
		return;
	}

	isLoading.value = true;
	try {
		const result = await NotifyAPI.managementDetail(notifyId);
		if (requestToken !== loadToken) {
			return;
		}
		detail.value = result;
	} catch (error) {
		Message.error(getErrorMessage(error, "发送用户加载失败"));
	} finally {
		if (requestToken === loadToken) {
			isLoading.value = false;
		}
	}
}

// ---------- 用户展示 ----------

function isCancelable(item: NotifyDetail): boolean {
	return item.status === "WAITING" && Boolean(item.sendAt && Time.now() < item.sendAt);
}

function getRecipientName(item: NotifyDetail): string {
	return item.toUser?.nick?.trim() || item.toUser?.name?.trim() || item.sendTo || "未知用户";
}

function getStatusText(item: NotifyDetail): string {
	if (isCancelable(item)) {
		return "待发送";
	}
	if (item.status === "CANCEL") {
		return "已取消";
	}
	if (item.status === "FAIL" || item.status === "TIMEOUT") {
		return item.status === "TIMEOUT" ? "已超时" : "发送失败";
	}
	return item.readAt ? "已读" : "未读";
}

function getStatusTheme(item: NotifyDetail): NotifyTagTheme {
	if (isCancelable(item)) {
		return "warning";
	}
	if (item.status === "CANCEL" || item.status === "FAIL" || item.status === "TIMEOUT") {
		return "danger";
	}
	return item.readAt ? "primary" : "default";
}

// ---------- 生命周期 ----------

watch(() => route.params.id, async () => {
	await loadDetail();
}, { immediate: true });

watch(() => route.query.filter, () => {
	recipientFilter.value = getRecipientFilterFromRoute();
});

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

<style scoped lang="less">
.notify-recipient-list {
	gap: 1rem;
	min-height: 100%;
	padding: calc(var(--app-nav-height) + 1rem) 0 1rem;
	display: flex;
	flex-direction: column;

	.filter {
		width: calc(100% - 2rem);
		margin: 0 1rem;
	}

	.recipients {
		:deep(.t-cell__title) {
			flex: 1 1 0;
			min-width: 0;
		}

		:deep(.t-cell__description) {
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
		}

		.recipient-title,
		.recipient-description {
			display: flex;
			align-items: center;
		}

		.recipient-title {
			gap: .5rem;

			> span:first-child {
				min-width: 0;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}
		}

		.recipient-description {
			gap: .75rem;
		}
	}
}
</style>