refactor file tree
This commit is contained in:
Timi
@@ -0,0 +1,212 @@
|
||||
<template>
|
||||
<div v-can="permissionCodes.store.read" class="store-list">
|
||||
<t-pull-down-refresh
|
||||
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 class="actions">
|
||||
<t-button v-can="permissionCodes.store.export" theme="default" :loading="isExporting" @click="exportExcel">
|
||||
<template #icon>
|
||||
<t-icon name="download" />
|
||||
</template>
|
||||
导出
|
||||
</t-button>
|
||||
<t-button v-can="permissionCodes.store.create" theme="primary" @click="router.push('/management/stores/create')">
|
||||
<template #icon>
|
||||
<t-icon name="add" />
|
||||
</template>
|
||||
新增
|
||||
</t-button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { Toast } from "tdesign-mobile-vue";
|
||||
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 { permissionCodes } from "@/utils/permission";
|
||||
import { getStoreStatusText, getStoreStatusTheme } from "@/utils/store";
|
||||
|
||||
defineOptions({
|
||||
name: "StoreList"
|
||||
});
|
||||
|
||||
const router = useRouter();
|
||||
const navBarStore = useNavBarStore();
|
||||
const userStore = useUserStore();
|
||||
|
||||
// ---------- 列表数据 ----------
|
||||
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
// ---------- 操作 ----------
|
||||
|
||||
const isExporting = ref(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`);
|
||||
Toast.success("导出已开始");
|
||||
} finally {
|
||||
isExporting.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
async function toEdit(item: Store): Promise<void> {
|
||||
if (!item.id) {
|
||||
return;
|
||||
}
|
||||
|
||||
await router.push(`/management/stores/${item.id}`);
|
||||
}
|
||||
|
||||
onMounted(async () => {
|
||||
navBarStore.clearRight();
|
||||
if (userStore.hasPermissions(permissionCodes.store.update)) {
|
||||
navBarStore.setRightText("排序", "var(--td-brand-color)", () => {
|
||||
router.push("/management/stores/sort");
|
||||
});
|
||||
}
|
||||
try {
|
||||
await fetch();
|
||||
} catch {
|
||||
Toast.error("门店列表加载失败");
|
||||
}
|
||||
});
|
||||
|
||||
onUnmounted(() => {
|
||||
navBarStore.clearRight();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.store-list {
|
||||
gap: .75rem;
|
||||
display: grid;
|
||||
padding: calc(var(--app-nav-height) + 1rem) 0 6rem 0;
|
||||
|
||||
.item {
|
||||
|
||||
.header {
|
||||
gap: .5rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.description {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
||||
.actions {
|
||||
gap: .75rem;
|
||||
left: 1rem;
|
||||
right: 1rem;
|
||||
bottom: calc(.75rem + env(safe-area-inset-bottom, 0));
|
||||
display: grid;
|
||||
position: fixed;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
:global(html.theme-dark) {
|
||||
.store-list {
|
||||
.item {
|
||||
background: #1e293b;
|
||||
|
||||
.name {
|
||||
color: #e2e8f0;
|
||||
}
|
||||
|
||||
.meta {
|
||||
color: #94a3b8;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user