379 lines
9.6 KiB
Vue
379 lines
9.6 KiB
Vue
<template>
|
|
<div
|
|
v-can="{ value: [permissionCodes.event.read, permissionCodes.user.read], mode: 'and' }"
|
|
:class="{ 'has-filter': hasFilter }"
|
|
class="registration-event-list"
|
|
>
|
|
<div v-if="hasFilter" class="filter-menu">
|
|
<t-dropdown-menu>
|
|
<t-dropdown-item
|
|
v-if="isGlobalManager"
|
|
v-model="selectedStoreId"
|
|
:label="storeFilterLabel"
|
|
:options="storeOptions"
|
|
@change="selectStoreFilter"
|
|
/>
|
|
</t-dropdown-menu>
|
|
</div>
|
|
<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 visibleEventList"
|
|
:key="item.id"
|
|
:arrow="canUpdateEventItem"
|
|
:hover="canUpdateEventItem"
|
|
@click="toEventItem(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="!visibleEventList.length" class="empty-block" v-text="emptyText" />
|
|
<div v-if="visibleEventList.length" class="load-state" v-text="isNoMore ? '已经到底了' : '上拉加载更多'" />
|
|
</t-pull-down-refresh>
|
|
<t-button v-can="permissionCodes.event.create" class="create" theme="primary" @click="toCreate">
|
|
<template #icon>
|
|
<t-icon name="add" />
|
|
</template>
|
|
新增登记事件
|
|
</t-button>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { Toast, type DropdownValue } from "tdesign-mobile-vue";
|
|
import { type Page, type PageResult, type Role, useUserStore } from "timi-web";
|
|
import EventAPI from "@/api/EventAPI";
|
|
import ManagedUserAPI from "@/api/ManagedUserAPI";
|
|
import { useCurrentStoreStore } from "@/store/currentStoreStore";
|
|
import { useNavBarStore } from "@/store/navBarStore";
|
|
import type { EventItem, EventLimitType, EventStatus } from "@/types/EventItem";
|
|
import { gaoRoleCodes, permissionCodes } from "@/utils/permission";
|
|
|
|
defineOptions({
|
|
name: "eventList"
|
|
});
|
|
|
|
const router = useRouter();
|
|
const navBarStore = useNavBarStore();
|
|
const userStore = useUserStore();
|
|
const currentStoreStore = useCurrentStoreStore();
|
|
|
|
const isGlobalManager = computed(() => userStore.hasRoles(gaoRoleCodes.globalManager));
|
|
const hasFilter = computed(() => isGlobalManager.value);
|
|
|
|
// ---------- 门店筛选 ----------
|
|
|
|
const allStoreFilterValue = "__ALL_STORES__";
|
|
const selectedStoreId = ref(allStoreFilterValue);
|
|
const loginStoreId = ref("");
|
|
const storeOptions = computed(() => [
|
|
{ label: "全部门店", value: allStoreFilterValue },
|
|
...currentStoreStore.storeList
|
|
.map(item => ({
|
|
label: item.name || item.code || "未命名门店",
|
|
value: item.id || ""
|
|
}))
|
|
.filter(item => item.value)
|
|
]);
|
|
const storeFilterLabel = computed(() => storeOptions.value.find(item => item.value === selectedStoreId.value)?.label || "全部门店");
|
|
const eventListOptions = computed(() => {
|
|
if (isGlobalManager.value) {
|
|
return selectedStoreId.value === allStoreFilterValue
|
|
? { allStores: true }
|
|
: { storeId: selectedStoreId.value };
|
|
}
|
|
return { storeId: loginStoreId.value };
|
|
});
|
|
|
|
// ---------- 列表数据 ----------
|
|
|
|
const defaultColor = "#2f88ff";
|
|
const roleOptions = ref<Role[]>([]);
|
|
const isRefreshing = ref(false);
|
|
const isLoading = ref(false);
|
|
const isNoMore = ref(false);
|
|
const page = reactive<Page<EventItem>>({
|
|
index: 0,
|
|
size: 15
|
|
});
|
|
const pageResult = reactive<PageResult<EventItem>>({
|
|
total: 0,
|
|
list: []
|
|
});
|
|
const canUpdateEventItem = computed(() => userStore.hasPermissions(permissionCodes.event.update));
|
|
const visibleEventList = computed(() => pageResult.list);
|
|
const emptyText = computed(() => {
|
|
if (isLoading.value) {
|
|
return "正在加载登记事件";
|
|
}
|
|
return "暂无登记事件";
|
|
});
|
|
|
|
type StatusTag = {
|
|
text: string;
|
|
theme: "default" | "primary" | "danger";
|
|
};
|
|
|
|
const fixedStatusTagMap: Partial<Record<EventStatus, 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 toEventItem(item: EventItem): void {
|
|
if (!canUpdateEventItem.value) {
|
|
return;
|
|
}
|
|
if (!item.id) {
|
|
return;
|
|
}
|
|
router.push(`/management/registration-events/${item.id}/edit`);
|
|
}
|
|
|
|
// ---------- 展示文案 ----------
|
|
|
|
function getStatusTag(item: EventItem): 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: EventItem): string {
|
|
const limitTextMap: Record<EventLimitType, 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 loadStoreScope(): Promise<void> {
|
|
if (isGlobalManager.value) {
|
|
await currentStoreStore.loadStoreList();
|
|
return;
|
|
}
|
|
|
|
const store = await currentStoreStore.loadLoginStore();
|
|
loginStoreId.value = store?.id || "";
|
|
}
|
|
|
|
async function fetch(): Promise<void> {
|
|
if (isLoading.value || isNoMore.value) {
|
|
return;
|
|
}
|
|
isLoading.value = true;
|
|
try {
|
|
const result = await EventAPI.list(page, eventListOptions.value);
|
|
pageResult.total = result.total;
|
|
pageResult.list = pageResult.list.concat(result.list || []);
|
|
page.index += 1;
|
|
isNoMore.value = (result.list || []).length < page.size || pageResult.total <= pageResult.list.length;
|
|
} finally {
|
|
isLoading.value = false;
|
|
}
|
|
}
|
|
|
|
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 loadData(): Promise<void> {
|
|
await loadStoreScope();
|
|
const [eventResult, roles] = await Promise.all([
|
|
EventAPI.list(page, eventListOptions.value),
|
|
ManagedUserAPI.roleList()
|
|
]);
|
|
roleOptions.value = roles || [];
|
|
pageResult.total = eventResult.total;
|
|
pageResult.list = eventResult.list || [];
|
|
page.index = 1;
|
|
isNoMore.value = pageResult.list.length >= pageResult.total || pageResult.list.length < page.size;
|
|
}
|
|
|
|
async function selectStoreFilter(value: DropdownValue): Promise<void> {
|
|
if (Array.isArray(value)) {
|
|
return;
|
|
}
|
|
|
|
selectedStoreId.value = String(value);
|
|
await refresh();
|
|
}
|
|
|
|
async function toCreate(): Promise<void> {
|
|
await router.push({
|
|
path: "/management/registration-events/create",
|
|
query: isGlobalManager.value && selectedStoreId.value !== allStoreFilterValue
|
|
? { storeId: selectedStoreId.value }
|
|
: undefined
|
|
});
|
|
}
|
|
|
|
onMounted(async () => {
|
|
navBarStore.clearRight();
|
|
if (canUpdateEventItem.value) {
|
|
navBarStore.setRightText("排序", "var(--td-brand-color)", () => {
|
|
router.push("/management/registration-events/sort");
|
|
});
|
|
}
|
|
try {
|
|
await loadData();
|
|
} catch {
|
|
Toast.error("登记事件加载失败");
|
|
}
|
|
});
|
|
|
|
onUnmounted(() => {
|
|
navBarStore.clearRight();
|
|
});
|
|
</script>
|
|
|
|
<style scoped lang="less">
|
|
.registration-event-list {
|
|
padding: calc(var(--app-nav-height) + 1rem) 0 6rem 0;
|
|
|
|
&.has-filter {
|
|
padding-top: calc(var(--app-nav-height) + 4rem);
|
|
}
|
|
|
|
.filter-menu {
|
|
top: var(--app-nav-height);
|
|
left: 0;
|
|
right: 0;
|
|
z-index: 20;
|
|
position: fixed;
|
|
background: var(--td-bg-color-container);
|
|
}
|
|
|
|
.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>
|