gao-customer-h5/src/pages/management/RegistrationEventList.vue

<template>
	<div v-can="{ value: [gaoPermissionCodes.registrationEvent.read, gaoPermissionCodes.user.read], mode: 'and' }" class="registration-event-list">
		<t-cell-group theme="card">
			<t-cell
				class="item"
				v-for="item in registrationEventList"
				:key="item.id"
				:arrow="canUpdateRegistrationEvent"
				:hover="canUpdateRegistrationEvent"
				@click="handleRegistrationEventClick(item)"
			>
				<template #title>
					<div class="header">
						<div class="color" :style="{ background: item.color || defaultColor }" />
						<div class="title" v-text="item.name || '未命名事件'" />
						<t-tag
							class="status"
							:theme="getStatusTag(item).theme"
							variant="outline"
							:content="getStatusTag(item).text"
						/>
						<t-tag v-if="item.requirePhoto" theme="warning" variant="outline">需拍照</t-tag>
					</div>
				</template>
				<template #description>
					<div class="description">
						<div class="line">
							<span>可登记角色</span>
							<t-tag
								v-for="roleCode in item.roleCodeList"
								:key="roleCode"
								theme="primary"
								variant="light-outline"
								:content="getRoleName(roleCode)"
							/>
							<span v-if="!(item.roleCodeList || []).length" class="muted" v-text="'未配置'" />
						</div>
						<div class="line" v-text="getLimitText(item)" />
					</div>
				</template>
			</t-cell>
		</t-cell-group>
		<div v-if="!registrationEventList.length" class="empty-block">暂无登记事件</div>
		<t-button v-can="gaoPermissionCodes.registrationEvent.create" class="create" theme="primary" @click="createRegistrationEvent">
			<template #icon>
				<t-icon name="add" />
			</template>
			新增登记事件
		</t-button>
	</div>
</template>

<script setup lang="ts">
import { Toast } from "tdesign-mobile-vue";
import { useUserStore, type Role } from "timi-web";
import RegistrationEventAPI from "@/api/RegistrationEventAPI";
import GaoUserAPI from "@/api/GaoUserAPI";
import { useNavBarStore } from "@/store/navBarStore";
import type { RegistrationEvent, RegistrationEventStatus, RegistrationLimitType } from "@/types/RegistrationEvent";
import { gaoPermissionCodes } from "@/utils/gaoPermission";

defineOptions({
	name: "RegistrationEventList"
});

const router = useRouter();
const navBarStore = useNavBarStore();
const userStore = useUserStore();
const defaultColor = "#2f88ff";
const registrationEventList = ref<RegistrationEvent[]>([]);
const roleOptions = ref<Role[]>([]);
const canUpdateRegistrationEvent = computed(() => userStore.hasPermissions(gaoPermissionCodes.registrationEvent.update));

type StatusTag = {
	text: string;
	theme: "default" | "primary" | "danger";
};

const fixedStatusTagMap: Partial<Record<RegistrationEventStatus, StatusTag>> = {
	DRAFT: { text: "草稿", theme: "default" },
	INACTIVE: { text: "不可登记", theme: "default" },
	DELETED: { text: "已删除", theme: "default" }
};
const activeStatusTag: StatusTag = { text: "可登记", theme: "primary" };
const notEffectiveStatusTag: StatusTag = { text: "未生效", theme: "default" };
const expiredStatusTag: StatusTag = { text: "已过期", theme: "danger" };

function createRegistrationEvent(): void {
	router.push("/management/registration-events/create");
}

async function goSort(): Promise<void> {
	await router.push("/management/registration-events/sort");
}

function editRegistrationEvent(item: RegistrationEvent): void {
	if (!item.id) {
		return;
	}

	router.push(`/management/registration-events/${item.id}/edit`);
}

function handleRegistrationEventClick(item: RegistrationEvent): void {
	if (!canUpdateRegistrationEvent.value) {
		return;
	}

	editRegistrationEvent(item);
}

function getStatusTag(item: RegistrationEvent): StatusTag {
	const status = item.status || "ACTIVE";
	const fixedStatusTag = fixedStatusTagMap[status];
	if (fixedStatusTag) {
		return fixedStatusTag;
	}
	const now = Date.now();
	if (item.beginAt !== undefined && now < item.beginAt) {
		return notEffectiveStatusTag;
	}
	if (item.endAt !== undefined && item.endAt < now) {
		return expiredStatusTag;
	}
	return activeStatusTag;
}

function getLimitText(item: RegistrationEvent): string {
	const limitTextMap: Record<RegistrationLimitType, string> = {
		NONE: "不限次数",
		DAILY_HALF_DAY: "上午/下午各一次",
		INTERVAL_HOUR: `每隔 ${item.limitValue || 0} 小时`,
		NATURAL_DAY: "每个自然日一次",
		NATURAL_MONTH: "每个自然月一次",
		TOTAL_LIMIT: `事件总上限 ${item.limitValue || 0} 次`,
		CUSTOMER_TOTAL_LIMIT: `单客户总上限 ${item.limitValue || 0} 次`
	};
	return limitTextMap[item.limitType || "NONE"];
}

function getRoleName(code: string): string {
	const role = roleOptions.value.find(item => item.code === code);
	return role?.name || code;
}

async function loadData(): Promise<void> {
	const [eventResult, roles] = await Promise.all([
		RegistrationEventAPI.list({
			index: 0,
			size: 100
		}),
		GaoUserAPI.roleList()
	]);
	roleOptions.value = roles || [];
	registrationEventList.value = eventResult.list || [];
}

onMounted(async () => {
	navBarStore.clearRight();
	if (canUpdateRegistrationEvent.value) {
		navBarStore.setRightText("排序", "var(--td-brand-color)", goSort);
	}
	try {
		await loadData();
	} catch {
		Toast({
			theme: "error",
			direction: "row",
			message: "登记事件加载失败"
		});
	}
});

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

<style scoped lang="less">
.registration-event-list {
	padding: calc(var(--app-nav-height) + 1rem) 0 6rem 0;

	.item {

		.header {
			gap: .5rem;
			width: 100%;
			display: flex;
			margin-top: .25rem;

			.color {
				width: 1.5rem;
				height: 1.5rem;
				border-radius: .4rem;
			}
		}

		.description {
			margin-top: .5rem;

			.line {
				gap: .5rem;
				display: flex;
				align-items: center;

				.muted {
					color: #52607a;
				}
			}
		}
	}

	.empty-block {
		color: #52607a;
		padding: 2rem 1rem;
		text-align: center;
	}

	.create {
		left: 1rem;
		right: 1rem;
		bottom: calc(.75rem + env(safe-area-inset-bottom, 0));
		position: fixed;
	}
}

:global(html.theme-dark) {
	.registration-event-list {
		.item {
			background: rgba(15, 23, 42, .88);
			border-color: rgba(148, 163, 184, .16);
			box-shadow: 0 .75rem 2rem rgba(2, 6, 23, .28);

			.content {
				p,
				.meta span {
					color: #94a3b8;
				}
			}
		}

		.empty-block {
			color: #94a3b8;
		}
	}
}
</style>