gao-customer-h5/src/pages/store/StoreList.vue

<template>
	<div v-can="permissionCodes.store.read" class="store-list">
		<t-pull-down-refresh
			class="list-wrapper"
			v-model="isRefreshing"
			:refresh-timeout="30000"
			@refresh="refresh"
			@scrolltolower="fetch"
		>
			<t-cell-group theme="card">
				<t-cell
					class="item"
					v-for="item in pageResult.list"
					:key="item.id"
					arrow
					@click="toEdit(item)"
				>
					<template #title>
						<div class="header">
							<div class="text-bold" v-text="item.name || '未命名门店'"></div>
							<t-tag size="small" :theme="getStoreStatusTheme(item.status)" variant="outline" :content="getStoreStatusText(item.status)" />
						</div>
					</template>
					<template #description>
						<div class="description">
							<span class="gray" v-text="item.telephone ? `电话：${item.telephone}` : '电话：-'" />
							<span class="gray" v-text="item.address ? `地址：${item.address}` : '地址：-'" />
						</div>
					</template>
				</t-cell>
			</t-cell-group>
			<div v-if="!pageResult.list.length" class="empty-block" v-text="isLoading ? '正在加载门店' : '暂无门店'" />
			<div v-if="pageResult.list.length" class="load-state" v-text="isNoMore ? '已加载全部门店' : '上拉加载更多'" />
		</t-pull-down-refresh>
	</div>
	<nav-bar-action-menu v-if="canShowActionMenu" :actions="actionList" />
</template>

<script setup lang="ts">
import { Message } from "@/utils/message";
import { Time, Toolkit, type Page, type PageResult, useUserStore } from "timi-web";
import StoreAPI from "@/api/StoreAPI";
import { useNavBarStore } from "@/store/navBarStore";
import type { Store } from "@/types/Store";
import type { NavBarAction } from "@/types/NavBarAction";
import { permissionCodes } from "@/utils/permission";
import { getStoreStatusText, getStoreStatusTheme } from "@/utils/store";

defineOptions({
	name: "StoreList"
});

const router = useRouter();
const navBarStore = useNavBarStore();
const userStore = useUserStore();
const canCreateStore = computed(() => userStore.hasPermissions(permissionCodes.store.create));
const canSortStore = computed(() => userStore.hasPermissions(permissionCodes.store.update));
const canExportStore = computed(() => userStore.hasPermissions(permissionCodes.store.export));
const canShowActionMenu = computed(() => canCreateStore.value || canSortStore.value || canExportStore.value);
const isExporting = ref(false);

const actionList = computed<NavBarAction[]>(() => {
	const list: NavBarAction[] = [];
	if (canCreateStore.value) {
		list.push({
			action: toCreate,
			theme: "primary",
			icon: "add",
			key: "create",
			text: "新增门店"
		});
	}
	if (canSortStore.value) {
		list.push({
			action: toSort,
			icon: "order",
			key: "sort",
			text: "排序"
		});
	}
	if (canExportStore.value) {
		list.push({
			action: exportExcel,
			icon: "download",
			key: "export",
			loading: isExporting.value,
			text: "导出 Excel"
		});
	}
	return list;
});

// ---------- 列表数据 ----------

const isRefreshing = ref(false);
const isLoading = ref(false);
const isNoMore = ref(false);
const page = reactive<Page<Store>>({
	index: 0,
	size: 20,
	orderMap: {
		sort: "ASC",
		createdAt: "DESC"
	}
});
const pageResult = reactive<PageResult<Store>>({
	total: 0,
	list: []
});

async function refresh(): Promise<void> {
	isRefreshing.value = true;
	try {
		page.index = 0;
		pageResult.total = 0;
		pageResult.list = [];
		isNoMore.value = false;
		await fetch();
	} finally {
		isRefreshing.value = false;
	}
}

async function fetch(): Promise<void> {
	if (isLoading.value || isNoMore.value) {
		return;
	}
	isLoading.value = true;
	try {
		const result = await StoreAPI.list(page);
		pageResult.total = result.total || 0;
		pageResult.list = pageResult.list.concat(result.list || []);
		page.index += 1;
		isNoMore.value = pageResult.list.length >= pageResult.total || (result.list || []).length < page.size;
	} finally {
		isLoading.value = false;
	}
}

// ---------- 操作 ----------

async function exportExcel(): Promise<void> {
	if (isExporting.value) {
		return;
	}
	isExporting.value = true;
	try {
		const blob = await StoreAPI.exportXSSF({
			index: 0,
			size: 10000,
			orderMap: page.orderMap
		});
		Toolkit.downloadBlob(blob, `门店列表-${Time.formatDate(new Date())}.xlsx`);
		Message.success("导出已开始");
	} finally {
		isExporting.value = false;
	}
}

async function toEdit(item: Store): Promise<void> {
	if (!item.id) {
		return;
	}
	await router.push(`/management/stores/${item.id}`);
}

async function toCreate(): Promise<void> {
	await router.push("/management/stores/create");
}

async function toSort(): Promise<void> {
	await router.push("/management/stores/sort");
}

onMounted(async () => {
	navBarStore.clearRight();
	navBarStore.setCustomRightVisible(canShowActionMenu.value);
	try {
		await fetch();
	} catch {
		Message.error("门店列表加载失败");
	}
});

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

<style scoped lang="less">
.store-list {
	gap: .75rem;
	display: grid;
	padding: calc(var(--app-nav-height) + 1rem) 0 1rem 0;

	.list-wrapper {
		min-height: 50vh;

		.item {

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

			.description {
				display: flex;
				flex-direction: column;
			}
		}
	}

}

:global(html.theme-dark) {
	.store-list {
		.item {
			background: #1e293b;

			.name {
				color: #e2e8f0;
			}

			.meta {
				color: #94a3b8;
			}
		}
	}
}
</style>