refactor event
This commit is contained in:
Timi
@@ -0,0 +1,248 @@
|
||||
<template>
|
||||
<div v-can="{ value: [permissionCodes.event.read, permissionCodes.user.read], mode: 'and' }" class="registration-event-list">
|
||||
<t-cell-group theme="card">
|
||||
<t-cell
|
||||
class="item"
|
||||
v-for="item in eventList"
|
||||
:key="item.id"
|
||||
:arrow="canUpdateEventItem"
|
||||
:hover="canUpdateEventItem"
|
||||
@click="handleEventClick(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="!eventList.length" class="empty-block">暂无登记事件</div>
|
||||
<t-button v-can="permissionCodes.event.create" class="create" theme="primary" @click="createEventItem">
|
||||
<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 EventAPI from "@/api/EventAPI";
|
||||
import ManagedUserAPI from "@/api/ManagedUserAPI";
|
||||
import { useNavBarStore } from "@/store/navBarStore";
|
||||
import type { EventItem, EventStatus, EventLimitType } from "@/types/EventItem";
|
||||
import { permissionCodes } from "@/utils/permission";
|
||||
|
||||
defineOptions({
|
||||
name: "eventList"
|
||||
});
|
||||
|
||||
const router = useRouter();
|
||||
const navBarStore = useNavBarStore();
|
||||
const userStore = useUserStore();
|
||||
const defaultColor = "#2f88ff";
|
||||
const eventList = ref<EventItem[]>([]);
|
||||
const roleOptions = ref<Role[]>([]);
|
||||
const canUpdateEventItem = computed(() => userStore.hasPermissions(permissionCodes.event.update));
|
||||
|
||||
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 createEventItem(): void {
|
||||
router.push("/management/registration-events/create");
|
||||
}
|
||||
|
||||
async function goSort(): Promise<void> {
|
||||
await router.push("/management/registration-events/sort");
|
||||
}
|
||||
|
||||
function editEventItem(item: EventItem): void {
|
||||
if (!item.id) {
|
||||
return;
|
||||
}
|
||||
|
||||
router.push(`/management/registration-events/${item.id}/edit`);
|
||||
}
|
||||
|
||||
function handleEventClick(item: EventItem): void {
|
||||
if (!canUpdateEventItem.value) {
|
||||
return;
|
||||
}
|
||||
|
||||
editEventItem(item);
|
||||
}
|
||||
|
||||
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 loadData(): Promise<void> {
|
||||
const [eventResult, roles] = await Promise.all([
|
||||
EventAPI.list({
|
||||
index: 0,
|
||||
size: 100
|
||||
}),
|
||||
ManagedUserAPI.roleList()
|
||||
]);
|
||||
roleOptions.value = roles || [];
|
||||
eventList.value = eventResult.list || [];
|
||||
}
|
||||
|
||||
onMounted(async () => {
|
||||
navBarStore.clearRight();
|
||||
if (canUpdateEventItem.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>
|
||||
|
||||
Reference in New Issue
Block a user