rename notify
This commit is contained in:
Timi
@@ -75,7 +75,7 @@ import { useNavBarStore } from "@/store/navBarStore";
|
||||
import { useCurrentStoreStore } from "@/store/currentStoreStore";
|
||||
|
||||
defineOptions({
|
||||
name: "NotifyManagementCreate"
|
||||
name: "NotifyCreate"
|
||||
});
|
||||
|
||||
const router = useRouter();
|
||||
@@ -245,12 +245,12 @@ async function saveNotification(): Promise<void> {
|
||||
Message.success(sendAt ? "定时通知已创建" : "通知已发送");
|
||||
if (result.id) {
|
||||
await router.replace({
|
||||
name: "NotifyManagementDetail",
|
||||
name: "NotifyDetail",
|
||||
params: { id: result.id }
|
||||
});
|
||||
return;
|
||||
}
|
||||
await router.replace({ name: "NotifyManagement" });
|
||||
await router.replace({ name: "NotifyList" });
|
||||
} catch (error) {
|
||||
Message.error(getErrorMessage(error, "通知保存失败"));
|
||||
} finally {
|
||||
+289
-116
@@ -1,78 +1,176 @@
|
||||
<template>
|
||||
<div v-can="corePermissionCodes.notify.read" class="notify-detail">
|
||||
<article v-if="detail" class="article">
|
||||
<header class="header">
|
||||
<h1 v-text="getSubject(detail)" />
|
||||
<div class="sender">
|
||||
发送用户：<span v-text="getSenderName(detail)" />
|
||||
</div>
|
||||
<pass-time-label class="time" :timestamp="detail.sendAt" underline />
|
||||
</header>
|
||||
<section class="body">
|
||||
<notify-view
|
||||
:detail="detail"
|
||||
empty-text="暂无通知内容"
|
||||
:resolve-attachment-url="resolveAttachmentUrl"
|
||||
/>
|
||||
</section>
|
||||
</article>
|
||||
<div v-can="corePermissionCodes.notify.read" class="notify-management-detail">
|
||||
<t-empty
|
||||
v-else
|
||||
v-if="!detail"
|
||||
:description="isLoading ? '正在加载通知' : '通知不存在'"
|
||||
/>
|
||||
<template v-else>
|
||||
<article class="article">
|
||||
<header class="header">
|
||||
<h1 v-text="getSubject(detail)" />
|
||||
<div class="time" v-text="getSendTime(detail.detailList?.[0])" />
|
||||
</header>
|
||||
<section class="body">
|
||||
<notify-view
|
||||
v-if="mainDetail"
|
||||
:detail="mainDetail"
|
||||
empty-text="暂无通知内容"
|
||||
:resolve-attachment-url="resolveAttachmentUrl"
|
||||
/>
|
||||
<div v-else class="empty-content">暂无通知内容</div>
|
||||
</section>
|
||||
</article>
|
||||
<t-cell-group title="通知状态" theme="card">
|
||||
<t-cell title="接收用户" :note="`${detail.detailList?.length || 0} 人`" />
|
||||
<t-cell title="已读用户" :note="`${readCount} 人`" />
|
||||
<t-cell title="当前状态">
|
||||
<template #note>
|
||||
<t-tag size="small" :theme="getSummaryTheme" :content="getSummaryStatus" />
|
||||
</template>
|
||||
</t-cell>
|
||||
</t-cell-group>
|
||||
<div v-if="canCancelNotify && canCancel" class="actions">
|
||||
<t-button theme="primary" variant="outline" block :loading="isCanceling" @click="confirmCancel">
|
||||
取消发送
|
||||
</t-button>
|
||||
</div>
|
||||
<div v-if="canDeleteNotify" class="actions">
|
||||
<t-button theme="danger" variant="outline" block :loading="isDeleting" @click="confirmDelete">
|
||||
删除通知
|
||||
</t-button>
|
||||
</div>
|
||||
<t-segmented
|
||||
v-model="recipientFilter"
|
||||
class="filter"
|
||||
block
|
||||
:options="recipientFilterOptions"
|
||||
/>
|
||||
<t-cell-group v-if="filteredDetailList.length" title="发送用户" theme="card" class="recipients">
|
||||
<t-cell v-for="item in filteredDetailList" :key="item.id">
|
||||
<template #title>
|
||||
<div class="recipient-title">
|
||||
<span v-text="getRecipientName(item)" />
|
||||
<t-tag size="small" :theme="getReadTheme(item)" :content="getReadText(item)" />
|
||||
</div>
|
||||
</template>
|
||||
<template #description>
|
||||
<div class="recipient-description">
|
||||
<span v-text="getRecipientContact(item)" />
|
||||
<span v-if="item.resultDesc" v-text="item.resultDesc" />
|
||||
</div>
|
||||
</template>
|
||||
<template #note>
|
||||
<span v-text="getReadTime(item)" />
|
||||
</template>
|
||||
</t-cell>
|
||||
</t-cell-group>
|
||||
<t-empty v-else description="暂无匹配的接收用户" />
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { NotifyView } from "timi-tdesign-mobile";
|
||||
import { PassTimeLabel } from "timi-web";
|
||||
import { NotifyAPI, type NotifyDetail } from "timi-web-api";
|
||||
import { Time } from "timi-web";
|
||||
import { NotifyAPI, type Notify, type NotifyDetail, useUserStore } from "timi-web-api";
|
||||
import { DialogPlugin } from "tdesign-mobile-vue";
|
||||
import { useNavBarStore } from "@/store/navBarStore";
|
||||
import { Message } from "@/utils/message";
|
||||
import { getErrorMessage } from "@/utils/error";
|
||||
import { getAttachmentReadURL } from "@/utils/attachment";
|
||||
import { useNavBarStore } from "@/store/navBarStore";
|
||||
import { corePermissionCodes } from "@/utils/permission";
|
||||
import { Message } from "@/utils/message.ts";
|
||||
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
const navBarStore = useNavBarStore();
|
||||
type RecipientFilter = "all" | "unread" | "read";
|
||||
type NotifyTagTheme = "default" | "success" | "warning" | "primary" | "danger";
|
||||
|
||||
defineOptions({
|
||||
name: "NotifyDetail"
|
||||
});
|
||||
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
const navBarStore = useNavBarStore();
|
||||
const userStore = useUserStore();
|
||||
const canDeleteNotify = computed(() => userStore.hasPermissions(corePermissionCodes.notify.delete));
|
||||
const canCancelNotify = computed(() => userStore.hasPermissions(corePermissionCodes.notify.cancel));
|
||||
|
||||
// ---------- 通知数据 ----------
|
||||
|
||||
const detail = ref<NotifyDetail>();
|
||||
const detail = ref<Notify>();
|
||||
const isLoading = ref(false);
|
||||
const isCanceling = ref(false);
|
||||
const isDeleting = ref(false);
|
||||
const recipientFilter = ref<RecipientFilter>("all");
|
||||
let loadToken = 0;
|
||||
|
||||
const recipientFilterOptions = [
|
||||
{ value: "all" as RecipientFilter, label: "全部" },
|
||||
{ value: "unread" as RecipientFilter, label: "未读" },
|
||||
{ value: "read" as RecipientFilter, label: "已读" }
|
||||
];
|
||||
const mainDetail = computed(() => detail.value?.detailList?.[0]);
|
||||
const readCount = computed(() => detail.value?.detailList?.filter(item => Boolean(item.readAt)).length || 0);
|
||||
const filteredDetailList = computed(() => {
|
||||
const detailList = detail.value?.detailList || [];
|
||||
if (recipientFilter.value === "unread") {
|
||||
return detailList.filter(item => !item.readAt);
|
||||
}
|
||||
if (recipientFilter.value === "read") {
|
||||
return detailList.filter(item => Boolean(item.readAt));
|
||||
}
|
||||
return detailList;
|
||||
});
|
||||
const canCancel = computed(() => detail.value?.detailList?.some(item => isCancelable(item)) || false);
|
||||
const getSummaryStatus = computed(() => {
|
||||
const detailList = detail.value?.detailList || [];
|
||||
if (canCancel.value) {
|
||||
return "待发送";
|
||||
}
|
||||
if (detailList.length && detailList.every(item => item.status === "CANCEL")) {
|
||||
return "已取消";
|
||||
}
|
||||
if (detailList.some(item => item.status === "FAIL" || item.status === "TIMEOUT")) {
|
||||
return "部分失败";
|
||||
}
|
||||
return "已发送";
|
||||
});
|
||||
const getSummaryTheme = computed<NotifyTagTheme>(() => {
|
||||
if (getSummaryStatus.value === "待发送") {
|
||||
return "warning";
|
||||
}
|
||||
if (getSummaryStatus.value === "已取消") {
|
||||
return "default";
|
||||
}
|
||||
if (getSummaryStatus.value === "部分失败") {
|
||||
return "danger";
|
||||
}
|
||||
return "success";
|
||||
});
|
||||
|
||||
function resolveAttachmentUrl(attachmentId: string): string {
|
||||
return getAttachmentReadURL(attachmentId);
|
||||
}
|
||||
|
||||
async function loadDetail(): Promise<void> {
|
||||
const requestToken = loadToken + 1;
|
||||
loadToken = requestToken;
|
||||
detail.value = undefined;
|
||||
navBarStore.clearRight();
|
||||
const detailId = String(route.params.id || "");
|
||||
if (!detailId) {
|
||||
detail.value = undefined;
|
||||
const notifyId = String(route.params.id || "");
|
||||
if (!notifyId) {
|
||||
return;
|
||||
}
|
||||
|
||||
detail.value = undefined;
|
||||
isLoading.value = true;
|
||||
try {
|
||||
const result = await NotifyAPI.internalDetail(detailId);
|
||||
const result = await NotifyAPI.managementDetail(notifyId);
|
||||
if (requestToken !== loadToken) {
|
||||
return;
|
||||
}
|
||||
|
||||
detail.value = result;
|
||||
setDeleteAction();
|
||||
await markRead(result, requestToken);
|
||||
setRightAction();
|
||||
} catch (error) {
|
||||
console.warn("通知详情加载失败", error);
|
||||
Message.error("通知详情加载失败");
|
||||
Message.error(getErrorMessage(error, "通知详情加载失败"));
|
||||
} finally {
|
||||
if (requestToken === loadToken) {
|
||||
isLoading.value = false;
|
||||
@@ -80,81 +178,127 @@ async function loadDetail(): Promise<void> {
|
||||
}
|
||||
}
|
||||
|
||||
function setDeleteAction(): void {
|
||||
if (detail.value?.id) {
|
||||
function setRightAction(): void {
|
||||
if (detail.value?.id && canDeleteNotify.value) {
|
||||
navBarStore.setRightText("删除", "var(--td-error-color)", confirmDelete);
|
||||
}
|
||||
}
|
||||
|
||||
async function confirmDelete(): Promise<void> {
|
||||
const detailId = detail.value?.id;
|
||||
if (!detailId || isDeleting.value) {
|
||||
// ---------- 通知操作 ----------
|
||||
|
||||
function isCancelable(item: NotifyDetail): boolean {
|
||||
return item.status === "WAITING" && Boolean(item.sendAt && Time.now() < item.sendAt);
|
||||
}
|
||||
|
||||
async function confirmCancel(): Promise<void> {
|
||||
const notifyId = detail.value?.id;
|
||||
if (!notifyId || !canCancelNotify.value || !canCancel.value || isCanceling.value) {
|
||||
return;
|
||||
}
|
||||
const dialog = DialogPlugin.confirm({
|
||||
title: "取消定时通知",
|
||||
content: "确定取消这条尚未发送的通知吗？",
|
||||
cancelBtn: "返回",
|
||||
confirmBtn: "取消发送",
|
||||
onCancel() {
|
||||
dialog.destroy();
|
||||
},
|
||||
async onConfirm() {
|
||||
dialog.destroy();
|
||||
isCanceling.value = true;
|
||||
try {
|
||||
await NotifyAPI.managementCancel(notifyId);
|
||||
await loadDetail();
|
||||
Message.success("通知已取消");
|
||||
} catch (error) {
|
||||
Message.error(getErrorMessage(error, "通知取消失败"));
|
||||
} finally {
|
||||
isCanceling.value = false;
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
async function confirmDelete(): Promise<void> {
|
||||
const notifyId = detail.value?.id;
|
||||
if (!notifyId || !canDeleteNotify.value || isDeleting.value) {
|
||||
return;
|
||||
}
|
||||
const dialog = DialogPlugin.confirm({
|
||||
title: "删除通知",
|
||||
content: "确定删除这条通知吗？删除后将不再显示。",
|
||||
cancelBtn: "取消",
|
||||
content: "确定删除这条通知吗？删除后收件人也将无法查看。",
|
||||
cancelBtn: "返回",
|
||||
confirmBtn: "删除",
|
||||
onCancel() {
|
||||
dialog.destroy();
|
||||
},
|
||||
async onConfirm() {
|
||||
dialog.destroy();
|
||||
await deleteDetail(detailId);
|
||||
isDeleting.value = true;
|
||||
navBarStore.clearRight();
|
||||
try {
|
||||
await NotifyAPI.managementDelete(notifyId);
|
||||
Message.success("通知已删除");
|
||||
await router.replace({ name: "NotifyList" });
|
||||
} catch (error) {
|
||||
Message.error(getErrorMessage(error, "通知删除失败"));
|
||||
setRightAction();
|
||||
} finally {
|
||||
isDeleting.value = false;
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
async function deleteDetail(detailId: string): Promise<void> {
|
||||
if (isDeleting.value) {
|
||||
return;
|
||||
}
|
||||
|
||||
isDeleting.value = true;
|
||||
navBarStore.clearRight();
|
||||
try {
|
||||
await NotifyAPI.deleteInternal(detailId);
|
||||
Message.success("通知已删除");
|
||||
await router.replace({ name: "NotifyList" });
|
||||
} catch (error) {
|
||||
Message.error(getErrorMessage(error, "通知删除失败"));
|
||||
setDeleteAction();
|
||||
} finally {
|
||||
isDeleting.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
async function markRead(item: NotifyDetail, requestToken: number): Promise<void> {
|
||||
if (!item.id || item.readAt) {
|
||||
return;
|
||||
}
|
||||
try {
|
||||
await NotifyAPI.markInternalRead(item.id);
|
||||
if (requestToken === loadToken && detail.value) {
|
||||
detail.value = {
|
||||
...detail.value,
|
||||
readAt: Date.now()
|
||||
};
|
||||
}
|
||||
} catch (error) {
|
||||
console.warn("通知标记已读失败", error);
|
||||
}
|
||||
}
|
||||
|
||||
// ---------- 展示 ----------
|
||||
|
||||
function getSubject(item: NotifyDetail): string {
|
||||
return item.subject?.trim() || "站内通知";
|
||||
function getSubject(item: Notify): string {
|
||||
return item.detailList?.[0]?.subject?.trim() || "站内通知";
|
||||
}
|
||||
|
||||
function getSenderName(item: NotifyDetail): string {
|
||||
return item.fromUser?.nick?.trim() || item.fromUser?.name?.trim() || "系统通知";
|
||||
function getSendTime(item?: NotifyDetail): string {
|
||||
if (!item?.sendAt) {
|
||||
return "-";
|
||||
}
|
||||
if (isCancelable(item)) {
|
||||
return `定时 ${Time.toDateTime(item.sendAt)}`;
|
||||
}
|
||||
return Time.toDateTime(item.sendAt);
|
||||
}
|
||||
|
||||
function resolveAttachmentUrl(attachmentId: string): string {
|
||||
return getAttachmentReadURL(attachmentId);
|
||||
function getRecipientName(item: NotifyDetail): string {
|
||||
return item.toUser?.nick?.trim() || item.toUser?.name?.trim() || item.sendTo || "未知用户";
|
||||
}
|
||||
|
||||
function getRecipientContact(item: NotifyDetail): string {
|
||||
return item.toUser?.phoneNo || item.sendTo || "-";
|
||||
}
|
||||
|
||||
function getReadText(item: NotifyDetail): string {
|
||||
if (isCancelable(item)) {
|
||||
return "待发送";
|
||||
}
|
||||
if (item.status === "CANCEL") {
|
||||
return "已取消";
|
||||
}
|
||||
if (item.status === "FAIL" || item.status === "TIMEOUT") {
|
||||
return item.status === "TIMEOUT" ? "已超时" : "发送失败";
|
||||
}
|
||||
return item.readAt ? "已读" : "未读";
|
||||
}
|
||||
|
||||
function getReadTheme(item: NotifyDetail): NotifyTagTheme {
|
||||
if (isCancelable(item)) {
|
||||
return "warning";
|
||||
}
|
||||
if (item.status === "CANCEL" || item.status === "FAIL" || item.status === "TIMEOUT") {
|
||||
return "danger";
|
||||
}
|
||||
return item.readAt ? "primary" : "default";
|
||||
}
|
||||
|
||||
function getReadTime(item: NotifyDetail): string {
|
||||
return item.readAt ? `已读 ${Time.toDateTime(item.readAt)}` : "未读";
|
||||
}
|
||||
|
||||
// ---------- 生命周期 ----------
|
||||
@@ -163,35 +307,30 @@ watch(() => route.params.id, async () => {
|
||||
await loadDetail();
|
||||
}, { immediate: true });
|
||||
|
||||
onMounted(() => {
|
||||
navBarStore.clearRight();
|
||||
});
|
||||
|
||||
onUnmounted(() => {
|
||||
navBarStore.clearRight();
|
||||
});
|
||||
onMounted(() => navBarStore.clearRight());
|
||||
onUnmounted(() => navBarStore.clearRight());
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.notify-detail {
|
||||
.notify-management-detail {
|
||||
gap: 1rem;
|
||||
min-height: 100%;
|
||||
padding: calc(var(--app-nav-height) + 1rem) 0 1rem 0;
|
||||
padding: calc(var(--app-nav-height) + 1rem) 0 1rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.article {
|
||||
padding: 1.25rem 1rem;
|
||||
margin: 0 1rem;
|
||||
background: rgba(255, 255, 255, .92);
|
||||
background: var(--td-bg-color-container);
|
||||
box-shadow: var(--td-shadow-1);
|
||||
border-radius: 1.4rem;
|
||||
}
|
||||
|
||||
.header {
|
||||
text-align: center;
|
||||
border-bottom: 1px solid rgba(148, 163, 184, .2);
|
||||
padding-bottom: 1rem;
|
||||
border-bottom: 1px solid rgba(148, 163, 184, .2);
|
||||
|
||||
h1 {
|
||||
margin: 0;
|
||||
@@ -204,12 +343,6 @@ onUnmounted(() => {
|
||||
margin-top: .5rem;
|
||||
font-size: .8125rem;
|
||||
}
|
||||
|
||||
.sender {
|
||||
color: #64748b;
|
||||
margin-top: .5rem;
|
||||
font-size: .8125rem;
|
||||
}
|
||||
}
|
||||
|
||||
.body {
|
||||
@@ -217,32 +350,72 @@ onUnmounted(() => {
|
||||
padding-top: 1rem;
|
||||
font-size: .9375rem;
|
||||
line-height: 1.8;
|
||||
white-space: pre-wrap;
|
||||
word-break: break-word;
|
||||
|
||||
.empty-content {
|
||||
color: #64748b;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.actions {
|
||||
padding: 0 1rem;
|
||||
}
|
||||
|
||||
.filter {
|
||||
width: calc(100% - 2rem);
|
||||
margin: 0 1rem;
|
||||
}
|
||||
|
||||
.recipients {
|
||||
:deep(.t-cell__title) {
|
||||
flex: 1 1 0;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
:deep(.t-cell__description) {
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.recipient-title,
|
||||
.recipient-description {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.recipient-title {
|
||||
gap: .5rem;
|
||||
|
||||
> span:first-child {
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
.recipient-description {
|
||||
gap: .75rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
:global(html.theme-dark) {
|
||||
.notify-detail {
|
||||
.article {
|
||||
background: rgba(15, 23, 42, .88);
|
||||
box-shadow: 0 .75rem 2rem rgba(2, 6, 23, .32);
|
||||
}
|
||||
|
||||
.notify-management-detail {
|
||||
.header {
|
||||
border-bottom-color: rgba(148, 163, 184, .16);
|
||||
|
||||
.time {
|
||||
color: #94a3b8;
|
||||
}
|
||||
|
||||
.sender {
|
||||
color: #94a3b8;
|
||||
}
|
||||
}
|
||||
|
||||
.body {
|
||||
color: #cbd5e1;
|
||||
|
||||
.empty-content {
|
||||
color: #94a3b8;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
+164
-240
@@ -1,12 +1,5 @@
|
||||
<template>
|
||||
<div v-can="corePermissionCodes.notify.read" class="notify-list">
|
||||
<t-segmented
|
||||
v-model="filterMode"
|
||||
class="filter"
|
||||
block
|
||||
:options="filterOptions"
|
||||
@change="switchFilter"
|
||||
/>
|
||||
<div v-can="corePermissionCodes.notify.read" class="notify-management">
|
||||
<t-pull-down-refresh
|
||||
v-model="isRefreshing"
|
||||
:refresh-timeout="30000"
|
||||
@@ -20,45 +13,42 @@
|
||||
class="item"
|
||||
>
|
||||
<t-cell
|
||||
:description="getPreview(item)"
|
||||
:note="getTime(item)"
|
||||
:description="getSendTime(item)"
|
||||
arrow
|
||||
hover
|
||||
@click="toDetail(item)"
|
||||
>
|
||||
<template #leftIcon>
|
||||
<div class="icon" :class="{ unread: isUnread(item) }">
|
||||
<t-icon name="notification" size="1.25rem" />
|
||||
<div class="icon" :class="{ scheduled: isScheduled(item) }">
|
||||
<t-icon :name="isScheduled(item) ? 'time' : 'notification'" size="1.25rem" />
|
||||
</div>
|
||||
</template>
|
||||
<template #title>
|
||||
<div class="title">
|
||||
<span v-text="getSubject(item)" />
|
||||
<t-tag
|
||||
v-if="isUnread(item)"
|
||||
class="unread-label"
|
||||
theme="danger"
|
||||
size="small"
|
||||
>未读</t-tag>
|
||||
</div>
|
||||
</template>
|
||||
<template #note>
|
||||
<t-tag size="small" :theme="getStatusTheme(item)" :content="getStatusText(item)" />
|
||||
</template>
|
||||
</t-cell>
|
||||
<template #right>
|
||||
<t-button
|
||||
v-if="canCancel(item)"
|
||||
class="cancel"
|
||||
theme="primary"
|
||||
@click.stop="confirmCancel(item)"
|
||||
>取消</t-button>
|
||||
<t-button
|
||||
v-if="canDeleteNotify"
|
||||
class="delete"
|
||||
theme="danger"
|
||||
:loading="deletingId === item.id"
|
||||
@click.stop="confirmDelete(item)"
|
||||
>
|
||||
删除
|
||||
</t-button>
|
||||
>删除</t-button>
|
||||
</template>
|
||||
</t-swipe-cell>
|
||||
</t-cell-group>
|
||||
<t-empty
|
||||
v-else-if="!isLoading"
|
||||
description="暂无站内通知"
|
||||
/>
|
||||
<t-empty v-else-if="!isLoading" description="暂无已发送通知" />
|
||||
<div class="load-state" v-text="loadStateText" />
|
||||
</t-pull-down-refresh>
|
||||
</div>
|
||||
@@ -66,14 +56,14 @@
|
||||
|
||||
<script setup lang="ts">
|
||||
import { Time } from "timi-web";
|
||||
import { NotifyAPI, type NotifyDetail, type Page, type PageResult, useUserStore } from "timi-web-api";
|
||||
import { NotifyAPI, type Notify, type NotifyManagementItem, type Page, type PageResult, useUserStore } from "timi-web-api";
|
||||
import { DialogPlugin } from "tdesign-mobile-vue";
|
||||
import { Message } from "@/utils/message";
|
||||
import { useNavBarStore } from "@/store/navBarStore";
|
||||
import { getErrorMessage } from "@/utils/error";
|
||||
import { useNavBarStore } from "@/store/navBarStore";
|
||||
import { corePermissionCodes } from "@/utils/permission";
|
||||
|
||||
type NotifyFilter = "all" | "unread";
|
||||
type NotifyTagTheme = "default" | "success" | "warning" | "primary" | "danger";
|
||||
|
||||
defineOptions({
|
||||
name: "NotifyList"
|
||||
@@ -84,33 +74,24 @@ const router = useRouter();
|
||||
const navBarStore = useNavBarStore();
|
||||
const userStore = useUserStore();
|
||||
const canReadNotify = computed(() => userStore.hasPermissions(corePermissionCodes.notify.read));
|
||||
|
||||
// ---------- 筛选 ----------
|
||||
|
||||
const filterMode = ref<NotifyFilter>("all");
|
||||
const unreadCount = ref(0);
|
||||
const unreadTabLabel = computed(() => 0 < unreadCount.value ? `未读 ${unreadCount.value}` : "未读");
|
||||
const filterOptions = computed(() => [
|
||||
{ value: "all" as NotifyFilter, label: "全部" },
|
||||
{ value: "unread" as NotifyFilter, label: unreadTabLabel.value }
|
||||
]);
|
||||
const canCreateNotify = computed(() => userStore.hasPermissions(corePermissionCodes.notify.create));
|
||||
const canDeleteNotify = computed(() => userStore.hasPermissions(corePermissionCodes.notify.delete));
|
||||
const canCancelNotify = computed(() => userStore.hasPermissions(corePermissionCodes.notify.cancel));
|
||||
|
||||
// ---------- 列表分页 ----------
|
||||
|
||||
const isRefreshing = ref(false);
|
||||
const isLoading = ref(false);
|
||||
const isNoMore = ref(false);
|
||||
const page = reactive<Page<NotifyDetail>>({
|
||||
const page = reactive<Page<Notify>>({
|
||||
index: 0,
|
||||
size: pageSize
|
||||
size: pageSize,
|
||||
orderMap: { createdAt: "DESC" }
|
||||
});
|
||||
const pageResult = reactive<PageResult<NotifyDetail>>({
|
||||
const pageResult = reactive<PageResult<NotifyManagementItem>>({
|
||||
total: 0,
|
||||
list: []
|
||||
});
|
||||
let loadToken = 0;
|
||||
let loadingPromise: Promise<void> | undefined;
|
||||
let isPageActive = true;
|
||||
|
||||
const loadStateText = computed(() => {
|
||||
if (isLoading.value) {
|
||||
@@ -122,185 +103,93 @@ const loadStateText = computed(() => {
|
||||
return "上拉加载更多";
|
||||
});
|
||||
|
||||
async function fetchPage(requestToken: number): Promise<void> {
|
||||
isLoading.value = true;
|
||||
const result = await NotifyAPI.listInternal(page, filterMode.value === "unread");
|
||||
if (requestToken !== loadToken) {
|
||||
return;
|
||||
}
|
||||
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;
|
||||
// ---------- 展示 ----------
|
||||
|
||||
function getSubject(item: NotifyManagementItem): string {
|
||||
return item.subject?.trim() || "站内通知";
|
||||
}
|
||||
|
||||
async function loadMore(): Promise<void> {
|
||||
if (loadingPromise) {
|
||||
await loadingPromise;
|
||||
return;
|
||||
function isScheduled(item: NotifyManagementItem): boolean {
|
||||
return Boolean(item.sendAt && item.waitingCount && Time.now() < item.sendAt);
|
||||
}
|
||||
|
||||
function getStatusText(item: NotifyManagementItem): string {
|
||||
if (isScheduled(item)) {
|
||||
return "待发送";
|
||||
}
|
||||
if (isNoMore.value) {
|
||||
const total = item.recipientCount || 0;
|
||||
if (0 < total && item.cancelCount === total) {
|
||||
return "已取消";
|
||||
}
|
||||
if (item.failCount || item.timeoutCount) {
|
||||
return "部分失败";
|
||||
}
|
||||
return "已发送";
|
||||
}
|
||||
|
||||
function getStatusTheme(item: NotifyManagementItem): NotifyTagTheme {
|
||||
if (isScheduled(item)) {
|
||||
return "warning";
|
||||
}
|
||||
if (getStatusText(item) === "已取消") {
|
||||
return "default";
|
||||
}
|
||||
if (getStatusText(item) === "部分失败") {
|
||||
return "danger";
|
||||
}
|
||||
return "success";
|
||||
}
|
||||
|
||||
function getSendTime(item: NotifyManagementItem): string {
|
||||
if (isScheduled(item)) {
|
||||
return `定时 ${Time.toDateTime(item.sendAt)}`;
|
||||
}
|
||||
return Time.toPassedDateTime(item.sendAt || item.createdAt) || "-";
|
||||
}
|
||||
|
||||
function canCancel(item: NotifyManagementItem): boolean {
|
||||
return canCancelNotify.value && isScheduled(item);
|
||||
}
|
||||
|
||||
// ---------- 列表操作 ----------
|
||||
|
||||
async function loadMore(): Promise<void> {
|
||||
if (isLoading.value || isNoMore.value || !canReadNotify.value) {
|
||||
return;
|
||||
}
|
||||
|
||||
const requestToken = loadToken;
|
||||
const request = (async () => {
|
||||
try {
|
||||
await fetchPage(requestToken);
|
||||
} finally {
|
||||
if (requestToken === loadToken) {
|
||||
isLoading.value = false;
|
||||
}
|
||||
}
|
||||
})();
|
||||
loadingPromise = request;
|
||||
isLoading.value = true;
|
||||
try {
|
||||
await request;
|
||||
const result = await NotifyAPI.listManagement(page);
|
||||
pageResult.total = result.total || 0;
|
||||
pageResult.list.push(...(result.list || []));
|
||||
page.index += 1;
|
||||
isNoMore.value = pageResult.list.length >= pageResult.total || (result.list || []).length < page.size;
|
||||
} catch (error) {
|
||||
Message.error(getErrorMessage(error, "通知列表加载失败"));
|
||||
} finally {
|
||||
if (loadingPromise === request) {
|
||||
loadingPromise = undefined;
|
||||
}
|
||||
isLoading.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
async function reloadList(): Promise<void> {
|
||||
const requestToken = loadToken + 1;
|
||||
loadToken = requestToken;
|
||||
page.index = 0;
|
||||
pageResult.total = 0;
|
||||
pageResult.list = [];
|
||||
isNoMore.value = false;
|
||||
if (loadingPromise) {
|
||||
await loadingPromise;
|
||||
}
|
||||
if (requestToken === loadToken) {
|
||||
await loadMore();
|
||||
}
|
||||
await loadMore();
|
||||
}
|
||||
|
||||
async function refresh(): Promise<void> {
|
||||
isRefreshing.value = true;
|
||||
try {
|
||||
await reloadList();
|
||||
await loadUnreadCount();
|
||||
} finally {
|
||||
isRefreshing.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
// ---------- 操作 ----------
|
||||
|
||||
const isMarkingAllRead = ref(false);
|
||||
const deletingId = ref("");
|
||||
|
||||
async function loadUnreadCount(): Promise<void> {
|
||||
try {
|
||||
unreadCount.value = Math.max(0, await NotifyAPI.countUnreadInternal());
|
||||
} catch (error) {
|
||||
unreadCount.value = 0;
|
||||
console.warn("未读通知数量加载失败", error);
|
||||
} finally {
|
||||
updateNavBarAction();
|
||||
}
|
||||
}
|
||||
|
||||
async function switchFilter(context: { value: string | number }): Promise<void> {
|
||||
const nextFilter = String(context.value) as NotifyFilter;
|
||||
if (nextFilter !== "all" && nextFilter !== "unread") {
|
||||
return;
|
||||
}
|
||||
filterMode.value = nextFilter;
|
||||
await reloadList();
|
||||
}
|
||||
|
||||
async function markAllRead(): Promise<void> {
|
||||
if (isMarkingAllRead.value || unreadCount.value === 0) {
|
||||
return;
|
||||
}
|
||||
isMarkingAllRead.value = true;
|
||||
try {
|
||||
await NotifyAPI.markAllInternalRead();
|
||||
unreadCount.value = 0;
|
||||
await reloadList();
|
||||
Message.success("已全部标记为已读");
|
||||
} catch (error) {
|
||||
console.warn("全部通知标记已读失败", error);
|
||||
Message.error("全部标记已读失败");
|
||||
} finally {
|
||||
isMarkingAllRead.value = false;
|
||||
updateNavBarAction();
|
||||
}
|
||||
}
|
||||
|
||||
async function confirmDelete(item: NotifyDetail): Promise<void> {
|
||||
if (!item.id || deletingId.value) {
|
||||
return;
|
||||
}
|
||||
|
||||
const detailId = item.id;
|
||||
const dialog = DialogPlugin.confirm({
|
||||
title: "删除通知",
|
||||
content: "确定删除这条通知吗？删除后将不再显示。",
|
||||
cancelBtn: "取消",
|
||||
confirmBtn: "删除",
|
||||
onCancel() {
|
||||
dialog.destroy();
|
||||
},
|
||||
async onConfirm() {
|
||||
dialog.destroy();
|
||||
await deleteNotification(detailId);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
async function deleteNotification(detailId: string): Promise<void> {
|
||||
if (deletingId.value) {
|
||||
return;
|
||||
}
|
||||
|
||||
deletingId.value = detailId;
|
||||
try {
|
||||
await NotifyAPI.deleteInternal(detailId);
|
||||
await reloadList();
|
||||
await loadUnreadCount();
|
||||
Message.success("通知已删除");
|
||||
} catch (error) {
|
||||
Message.error(getErrorMessage(error, "通知删除失败"));
|
||||
} finally {
|
||||
deletingId.value = "";
|
||||
}
|
||||
}
|
||||
|
||||
function updateNavBarAction(): void {
|
||||
if (!isPageActive) {
|
||||
return;
|
||||
}
|
||||
navBarStore.clearRight();
|
||||
if (0 < unreadCount.value) {
|
||||
navBarStore.setRightText("全部已读", "var(--td-brand-color)", markAllRead);
|
||||
}
|
||||
}
|
||||
|
||||
// ---------- 展示和导航 ----------
|
||||
|
||||
function isUnread(item: NotifyDetail): boolean {
|
||||
return !item.readAt;
|
||||
}
|
||||
|
||||
function getSubject(item: NotifyDetail): string {
|
||||
return item.subject?.trim() || "站内通知";
|
||||
}
|
||||
|
||||
function getPreview(item: NotifyDetail): string {
|
||||
const text = item.content?.replace(/\s+/g, " ").trim() || "无通知内容";
|
||||
return 80 < text.length ? `${text.slice(0, 80)}...` : text;
|
||||
}
|
||||
|
||||
function getTime(item: NotifyDetail): string {
|
||||
return Time.toPassedDateTime(item.createdAt || item.sendAt) || "-";
|
||||
}
|
||||
|
||||
async function toDetail(item: NotifyDetail): Promise<void> {
|
||||
async function toDetail(item: NotifyManagementItem): Promise<void> {
|
||||
if (!item.id) {
|
||||
return;
|
||||
}
|
||||
@@ -310,6 +199,62 @@ async function toDetail(item: NotifyDetail): Promise<void> {
|
||||
});
|
||||
}
|
||||
|
||||
async function toCreate(): Promise<void> {
|
||||
await router.push({ name: "NotifyCreate" });
|
||||
}
|
||||
|
||||
async function confirmCancel(item: NotifyManagementItem): Promise<void> {
|
||||
if (!item.id || !canCancel(item)) {
|
||||
return;
|
||||
}
|
||||
const notifyId = item.id;
|
||||
const dialog = DialogPlugin.confirm({
|
||||
title: "取消定时通知",
|
||||
content: "确定取消这条尚未发送的通知吗？",
|
||||
cancelBtn: "返回",
|
||||
confirmBtn: "取消发送",
|
||||
onCancel() {
|
||||
dialog.destroy();
|
||||
},
|
||||
async onConfirm() {
|
||||
dialog.destroy();
|
||||
try {
|
||||
await NotifyAPI.managementCancel(notifyId);
|
||||
await reloadList();
|
||||
Message.success("通知已取消");
|
||||
} catch (error) {
|
||||
Message.error(getErrorMessage(error, "通知取消失败"));
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
async function confirmDelete(item: NotifyManagementItem): Promise<void> {
|
||||
if (!item.id || !canDeleteNotify.value) {
|
||||
return;
|
||||
}
|
||||
const notifyId = item.id;
|
||||
const dialog = DialogPlugin.confirm({
|
||||
title: "删除通知",
|
||||
content: "确定删除这条通知吗？删除后收件人也将无法查看。",
|
||||
cancelBtn: "返回",
|
||||
confirmBtn: "删除",
|
||||
onCancel() {
|
||||
dialog.destroy();
|
||||
},
|
||||
async onConfirm() {
|
||||
dialog.destroy();
|
||||
try {
|
||||
await NotifyAPI.managementDelete(notifyId);
|
||||
await reloadList();
|
||||
Message.success("通知已删除");
|
||||
} catch (error) {
|
||||
Message.error(getErrorMessage(error, "通知删除失败"));
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// ---------- 生命周期 ----------
|
||||
|
||||
onMounted(async () => {
|
||||
@@ -317,51 +262,31 @@ onMounted(async () => {
|
||||
if (!canReadNotify.value) {
|
||||
return;
|
||||
}
|
||||
try {
|
||||
await reloadList();
|
||||
await loadUnreadCount();
|
||||
} catch (error) {
|
||||
console.warn("站内通知加载失败", error);
|
||||
Message.error("站内通知加载失败");
|
||||
if (canCreateNotify.value) {
|
||||
navBarStore.setRightText("新建", "var(--td-brand-color)", toCreate);
|
||||
}
|
||||
await reloadList();
|
||||
});
|
||||
|
||||
onUnmounted(() => {
|
||||
isPageActive = false;
|
||||
navBarStore.clearRight();
|
||||
});
|
||||
onUnmounted(() => navBarStore.clearRight());
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.notify-list {
|
||||
display: flex;
|
||||
padding: calc(var(--app-nav-height) + 1rem) 0 1rem 0;
|
||||
.notify-management {
|
||||
min-height: 100%;
|
||||
flex-direction: column;
|
||||
|
||||
.filter {
|
||||
width: calc(100% - 2rem);
|
||||
margin: 0 1rem;
|
||||
}
|
||||
padding: calc(var(--app-nav-height) + 1rem) 0 1rem;
|
||||
|
||||
.items {
|
||||
overflow: hidden;
|
||||
padding-top: 1rem;
|
||||
|
||||
.item {
|
||||
|
||||
.cancel,
|
||||
.delete {
|
||||
height: 100%;
|
||||
padding: 0 1rem;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
:deep(.t-cell:after) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.t-cell__title) {
|
||||
flex: 1 1 0;
|
||||
min-width: 0;
|
||||
@@ -387,16 +312,20 @@ onUnmounted(() => {
|
||||
border-radius: .875rem;
|
||||
justify-content: center;
|
||||
|
||||
&.unread {
|
||||
color: #0f766e;
|
||||
background: #ccfbf1;
|
||||
&.scheduled {
|
||||
color: #b45309;
|
||||
background: #fef3c7;
|
||||
}
|
||||
}
|
||||
|
||||
.title,
|
||||
.description {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.title {
|
||||
gap: .5rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
> span:first-child {
|
||||
min-width: 0;
|
||||
@@ -406,29 +335,24 @@ onUnmounted(() => {
|
||||
}
|
||||
}
|
||||
|
||||
.unread-label {
|
||||
font-size: .6875rem;
|
||||
.description {
|
||||
gap: .75rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
:global(html.theme-dark) {
|
||||
.notify-list {
|
||||
.notify-management {
|
||||
.icon {
|
||||
color: #94a3b8;
|
||||
background: #1e293b;
|
||||
|
||||
&.unread {
|
||||
color: #5eead4;
|
||||
background: rgba(13, 148, 136, .2);
|
||||
&.scheduled {
|
||||
color: #fbbf24;
|
||||
background: rgba(180, 83, 9, .2);
|
||||
}
|
||||
}
|
||||
|
||||
.unread-label {
|
||||
color: #5eead4;
|
||||
background: rgba(13, 148, 136, .2);
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,372 +0,0 @@
|
||||
<template>
|
||||
<div v-can="corePermissionCodes.notify.read" class="notify-management">
|
||||
<t-pull-down-refresh
|
||||
v-model="isRefreshing"
|
||||
:refresh-timeout="30000"
|
||||
@refresh="refresh"
|
||||
@scrolltolower="loadMore"
|
||||
>
|
||||
<t-cell-group v-if="pageResult.list.length" class="items" theme="card">
|
||||
<t-swipe-cell
|
||||
v-for="item in pageResult.list"
|
||||
:key="item.id"
|
||||
class="item"
|
||||
>
|
||||
<t-cell
|
||||
:description="getPreview(item)"
|
||||
:note="getSendTime(item)"
|
||||
arrow
|
||||
hover
|
||||
@click="toDetail(item)"
|
||||
>
|
||||
<template #leftIcon>
|
||||
<div class="icon" :class="{ scheduled: isScheduled(item) }">
|
||||
<t-icon :name="isScheduled(item) ? 'time' : 'notification'" size="1.25rem" />
|
||||
</div>
|
||||
</template>
|
||||
<template #title>
|
||||
<div class="title">
|
||||
<span v-text="getSubject(item)" />
|
||||
<t-tag size="small" :theme="getStatusTheme(item)" :content="getStatusText(item)" />
|
||||
</div>
|
||||
</template>
|
||||
<template #description>
|
||||
<div class="description">
|
||||
<span v-text="getRecipientSummary(item)" />
|
||||
<span v-if="item.readCount" v-text="`已读 ${item.readCount}`" />
|
||||
</div>
|
||||
</template>
|
||||
</t-cell>
|
||||
<template #right>
|
||||
<t-button
|
||||
v-if="canCancel(item)"
|
||||
class="cancel"
|
||||
theme="primary"
|
||||
@click.stop="confirmCancel(item)"
|
||||
>取消</t-button>
|
||||
<t-button
|
||||
v-if="canDeleteNotify"
|
||||
class="delete"
|
||||
theme="danger"
|
||||
@click.stop="confirmDelete(item)"
|
||||
>删除</t-button>
|
||||
</template>
|
||||
</t-swipe-cell>
|
||||
</t-cell-group>
|
||||
<t-empty v-else-if="!isLoading" description="暂无已发送通知" />
|
||||
<div class="load-state" v-text="loadStateText" />
|
||||
</t-pull-down-refresh>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { Time } from "timi-web";
|
||||
import { NotifyAPI, type Notify, type NotifyManagementItem, type Page, type PageResult, useUserStore } from "timi-web-api";
|
||||
import { DialogPlugin } from "tdesign-mobile-vue";
|
||||
import { Message } from "@/utils/message";
|
||||
import { getErrorMessage } from "@/utils/error";
|
||||
import { useNavBarStore } from "@/store/navBarStore";
|
||||
import { corePermissionCodes } from "@/utils/permission";
|
||||
|
||||
type NotifyTagTheme = "default" | "success" | "warning" | "primary" | "danger";
|
||||
|
||||
defineOptions({
|
||||
name: "NotifyManagement"
|
||||
});
|
||||
|
||||
const pageSize = 20;
|
||||
const router = useRouter();
|
||||
const navBarStore = useNavBarStore();
|
||||
const userStore = useUserStore();
|
||||
const canReadNotify = computed(() => userStore.hasPermissions(corePermissionCodes.notify.read));
|
||||
const canCreateNotify = computed(() => userStore.hasPermissions(corePermissionCodes.notify.create));
|
||||
const canDeleteNotify = computed(() => userStore.hasPermissions(corePermissionCodes.notify.delete));
|
||||
const canCancelNotify = computed(() => userStore.hasPermissions(corePermissionCodes.notify.cancel));
|
||||
|
||||
// ---------- 列表分页 ----------
|
||||
|
||||
const isRefreshing = ref(false);
|
||||
const isLoading = ref(false);
|
||||
const isNoMore = ref(false);
|
||||
const page = reactive<Page<Notify>>({
|
||||
index: 0,
|
||||
size: pageSize,
|
||||
orderMap: { createdAt: "DESC" }
|
||||
});
|
||||
const pageResult = reactive<PageResult<NotifyManagementItem>>({
|
||||
total: 0,
|
||||
list: []
|
||||
});
|
||||
|
||||
const loadStateText = computed(() => {
|
||||
if (isLoading.value) {
|
||||
return "正在加载通知";
|
||||
}
|
||||
if (isNoMore.value) {
|
||||
return pageResult.list.length ? "没有更多通知" : "";
|
||||
}
|
||||
return "上拉加载更多";
|
||||
});
|
||||
|
||||
// ---------- 展示 ----------
|
||||
|
||||
function getSubject(item: NotifyManagementItem): string {
|
||||
return item.subject?.trim() || "站内通知";
|
||||
}
|
||||
|
||||
function getPreview(item: NotifyManagementItem): string {
|
||||
const text = item.content?.replace(/\s+/g, " ").trim() || "无通知内容";
|
||||
return 80 < text.length ? `${text.slice(0, 80)}...` : text;
|
||||
}
|
||||
|
||||
function isScheduled(item: NotifyManagementItem): boolean {
|
||||
return Boolean(item.sendAt && item.waitingCount && Time.now() < item.sendAt);
|
||||
}
|
||||
|
||||
function getStatusText(item: NotifyManagementItem): string {
|
||||
if (isScheduled(item)) {
|
||||
return "待发送";
|
||||
}
|
||||
const total = item.recipientCount || 0;
|
||||
if (0 < total && item.cancelCount === total) {
|
||||
return "已取消";
|
||||
}
|
||||
if (item.failCount || item.timeoutCount) {
|
||||
return "部分失败";
|
||||
}
|
||||
return "已发送";
|
||||
}
|
||||
|
||||
function getStatusTheme(item: NotifyManagementItem): NotifyTagTheme {
|
||||
if (isScheduled(item)) {
|
||||
return "warning";
|
||||
}
|
||||
if (getStatusText(item) === "已取消") {
|
||||
return "default";
|
||||
}
|
||||
if (getStatusText(item) === "部分失败") {
|
||||
return "danger";
|
||||
}
|
||||
return "success";
|
||||
}
|
||||
|
||||
function getRecipientSummary(item: NotifyManagementItem): string {
|
||||
return `${item.recipientCount || 0} 位接收用户`;
|
||||
}
|
||||
|
||||
function getSendTime(item: NotifyManagementItem): string {
|
||||
if (isScheduled(item)) {
|
||||
return `定时 ${Time.toDateTime(item.sendAt)}`;
|
||||
}
|
||||
return Time.toPassedDateTime(item.sendAt || item.createdAt) || "-";
|
||||
}
|
||||
|
||||
function canCancel(item: NotifyManagementItem): boolean {
|
||||
return canCancelNotify.value && isScheduled(item);
|
||||
}
|
||||
|
||||
// ---------- 列表操作 ----------
|
||||
|
||||
async function loadMore(): Promise<void> {
|
||||
if (isLoading.value || isNoMore.value || !canReadNotify.value) {
|
||||
return;
|
||||
}
|
||||
|
||||
isLoading.value = true;
|
||||
try {
|
||||
const result = await NotifyAPI.listManagement(page);
|
||||
pageResult.total = result.total || 0;
|
||||
pageResult.list.push(...(result.list || []));
|
||||
page.index += 1;
|
||||
isNoMore.value = pageResult.list.length >= pageResult.total || (result.list || []).length < page.size;
|
||||
} catch (error) {
|
||||
Message.error(getErrorMessage(error, "通知列表加载失败"));
|
||||
} finally {
|
||||
isLoading.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
async function reloadList(): Promise<void> {
|
||||
page.index = 0;
|
||||
pageResult.total = 0;
|
||||
pageResult.list = [];
|
||||
isNoMore.value = false;
|
||||
await loadMore();
|
||||
}
|
||||
|
||||
async function refresh(): Promise<void> {
|
||||
isRefreshing.value = true;
|
||||
try {
|
||||
await reloadList();
|
||||
} finally {
|
||||
isRefreshing.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
async function toDetail(item: NotifyManagementItem): Promise<void> {
|
||||
if (!item.id) {
|
||||
return;
|
||||
}
|
||||
await router.push({
|
||||
name: "NotifyManagementDetail",
|
||||
params: { id: item.id }
|
||||
});
|
||||
}
|
||||
|
||||
async function toCreate(): Promise<void> {
|
||||
await router.push({ name: "NotifyManagementCreate" });
|
||||
}
|
||||
|
||||
async function confirmCancel(item: NotifyManagementItem): Promise<void> {
|
||||
if (!item.id || !canCancel(item)) {
|
||||
return;
|
||||
}
|
||||
const notifyId = item.id;
|
||||
const dialog = DialogPlugin.confirm({
|
||||
title: "取消定时通知",
|
||||
content: "确定取消这条尚未发送的通知吗？",
|
||||
cancelBtn: "返回",
|
||||
confirmBtn: "取消发送",
|
||||
onCancel() {
|
||||
dialog.destroy();
|
||||
},
|
||||
async onConfirm() {
|
||||
dialog.destroy();
|
||||
try {
|
||||
await NotifyAPI.managementCancel(notifyId);
|
||||
await reloadList();
|
||||
Message.success("通知已取消");
|
||||
} catch (error) {
|
||||
Message.error(getErrorMessage(error, "通知取消失败"));
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
async function confirmDelete(item: NotifyManagementItem): Promise<void> {
|
||||
if (!item.id || !canDeleteNotify.value) {
|
||||
return;
|
||||
}
|
||||
const notifyId = item.id;
|
||||
const dialog = DialogPlugin.confirm({
|
||||
title: "删除通知",
|
||||
content: "确定删除这条通知吗？删除后收件人也将无法查看。",
|
||||
cancelBtn: "返回",
|
||||
confirmBtn: "删除",
|
||||
onCancel() {
|
||||
dialog.destroy();
|
||||
},
|
||||
async onConfirm() {
|
||||
dialog.destroy();
|
||||
try {
|
||||
await NotifyAPI.managementDelete(notifyId);
|
||||
await reloadList();
|
||||
Message.success("通知已删除");
|
||||
} catch (error) {
|
||||
Message.error(getErrorMessage(error, "通知删除失败"));
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// ---------- 生命周期 ----------
|
||||
|
||||
onMounted(async () => {
|
||||
navBarStore.clearRight();
|
||||
if (!canReadNotify.value) {
|
||||
return;
|
||||
}
|
||||
if (canCreateNotify.value) {
|
||||
navBarStore.setRightText("新建", "var(--td-brand-color)", toCreate);
|
||||
}
|
||||
await reloadList();
|
||||
});
|
||||
|
||||
onUnmounted(() => navBarStore.clearRight());
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.notify-management {
|
||||
min-height: 100%;
|
||||
padding: calc(var(--app-nav-height) + 1rem) 0 1rem;
|
||||
|
||||
.items {
|
||||
overflow: hidden;
|
||||
|
||||
.item {
|
||||
.cancel,
|
||||
.delete {
|
||||
height: 100%;
|
||||
padding: 0 1rem;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
:deep(.t-cell__title) {
|
||||
flex: 1 1 0;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
:deep(.t-cell__description) {
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
:deep(.t-cell__note) {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.icon {
|
||||
width: 3.5rem;
|
||||
height: 3.5rem;
|
||||
color: #64748b;
|
||||
display: flex;
|
||||
background: #e2e8f0;
|
||||
align-items: center;
|
||||
border-radius: .875rem;
|
||||
justify-content: center;
|
||||
|
||||
&.scheduled {
|
||||
color: #b45309;
|
||||
background: #fef3c7;
|
||||
}
|
||||
}
|
||||
|
||||
.title,
|
||||
.description {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.title {
|
||||
gap: .5rem;
|
||||
|
||||
> span:first-child {
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
.description {
|
||||
gap: .75rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
:global(html.theme-dark) {
|
||||
.notify-management {
|
||||
.icon {
|
||||
color: #94a3b8;
|
||||
background: #1e293b;
|
||||
|
||||
&.scheduled {
|
||||
color: #fbbf24;
|
||||
background: rgba(180, 83, 9, .2);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,422 +0,0 @@
|
||||
<template>
|
||||
<div v-can="corePermissionCodes.notify.read" class="notify-management-detail">
|
||||
<t-empty
|
||||
v-if="!detail"
|
||||
:description="isLoading ? '正在加载通知' : '通知不存在'"
|
||||
/>
|
||||
<template v-else>
|
||||
<article class="article">
|
||||
<header class="header">
|
||||
<h1 v-text="getSubject(detail)" />
|
||||
<div class="time" v-text="getSendTime(detail.detailList?.[0])" />
|
||||
</header>
|
||||
<section class="body">
|
||||
<notify-view
|
||||
v-if="mainDetail"
|
||||
:detail="mainDetail"
|
||||
empty-text="暂无通知内容"
|
||||
:resolve-attachment-url="resolveAttachmentUrl"
|
||||
/>
|
||||
<div v-else class="empty-content">暂无通知内容</div>
|
||||
</section>
|
||||
</article>
|
||||
<t-cell-group title="通知状态" theme="card">
|
||||
<t-cell title="接收用户" :note="`${detail.detailList?.length || 0} 人`" />
|
||||
<t-cell title="已读用户" :note="`${readCount} 人`" />
|
||||
<t-cell title="当前状态">
|
||||
<template #note>
|
||||
<t-tag size="small" :theme="getSummaryTheme" :content="getSummaryStatus" />
|
||||
</template>
|
||||
</t-cell>
|
||||
</t-cell-group>
|
||||
<div v-if="canCancelNotify && canCancel" class="actions">
|
||||
<t-button theme="primary" variant="outline" block :loading="isCanceling" @click="confirmCancel">
|
||||
取消发送
|
||||
</t-button>
|
||||
</div>
|
||||
<div v-if="canDeleteNotify" class="actions">
|
||||
<t-button theme="danger" variant="outline" block :loading="isDeleting" @click="confirmDelete">
|
||||
删除通知
|
||||
</t-button>
|
||||
</div>
|
||||
<t-segmented
|
||||
v-model="recipientFilter"
|
||||
class="filter"
|
||||
block
|
||||
:options="recipientFilterOptions"
|
||||
/>
|
||||
<t-cell-group v-if="filteredDetailList.length" title="发送用户" theme="card" class="recipients">
|
||||
<t-cell v-for="item in filteredDetailList" :key="item.id">
|
||||
<template #title>
|
||||
<div class="recipient-title">
|
||||
<span v-text="getRecipientName(item)" />
|
||||
<t-tag size="small" :theme="getReadTheme(item)" :content="getReadText(item)" />
|
||||
</div>
|
||||
</template>
|
||||
<template #description>
|
||||
<div class="recipient-description">
|
||||
<span v-text="getRecipientContact(item)" />
|
||||
<span v-if="item.resultDesc" v-text="item.resultDesc" />
|
||||
</div>
|
||||
</template>
|
||||
<template #note>
|
||||
<span v-text="getReadTime(item)" />
|
||||
</template>
|
||||
</t-cell>
|
||||
</t-cell-group>
|
||||
<t-empty v-else description="暂无匹配的接收用户" />
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { NotifyView } from "timi-tdesign-mobile";
|
||||
import { Time } from "timi-web";
|
||||
import { NotifyAPI, type Notify, type NotifyDetail, useUserStore } from "timi-web-api";
|
||||
import { DialogPlugin } from "tdesign-mobile-vue";
|
||||
import { Message } from "@/utils/message";
|
||||
import { getErrorMessage } from "@/utils/error";
|
||||
import { getAttachmentReadURL } from "@/utils/attachment";
|
||||
import { useNavBarStore } from "@/store/navBarStore";
|
||||
import { corePermissionCodes } from "@/utils/permission";
|
||||
|
||||
type RecipientFilter = "all" | "unread" | "read";
|
||||
type NotifyTagTheme = "default" | "success" | "warning" | "primary" | "danger";
|
||||
|
||||
defineOptions({
|
||||
name: "NotifyManagementDetail"
|
||||
});
|
||||
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
const navBarStore = useNavBarStore();
|
||||
const userStore = useUserStore();
|
||||
const canDeleteNotify = computed(() => userStore.hasPermissions(corePermissionCodes.notify.delete));
|
||||
const canCancelNotify = computed(() => userStore.hasPermissions(corePermissionCodes.notify.cancel));
|
||||
|
||||
// ---------- 通知数据 ----------
|
||||
|
||||
const detail = ref<Notify>();
|
||||
const isLoading = ref(false);
|
||||
const isCanceling = ref(false);
|
||||
const isDeleting = ref(false);
|
||||
const recipientFilter = ref<RecipientFilter>("all");
|
||||
let loadToken = 0;
|
||||
|
||||
const recipientFilterOptions = [
|
||||
{ value: "all" as RecipientFilter, label: "全部" },
|
||||
{ value: "unread" as RecipientFilter, label: "未读" },
|
||||
{ value: "read" as RecipientFilter, label: "已读" }
|
||||
];
|
||||
const mainDetail = computed(() => detail.value?.detailList?.[0]);
|
||||
const readCount = computed(() => detail.value?.detailList?.filter(item => Boolean(item.readAt)).length || 0);
|
||||
const filteredDetailList = computed(() => {
|
||||
const detailList = detail.value?.detailList || [];
|
||||
if (recipientFilter.value === "unread") {
|
||||
return detailList.filter(item => !item.readAt);
|
||||
}
|
||||
if (recipientFilter.value === "read") {
|
||||
return detailList.filter(item => Boolean(item.readAt));
|
||||
}
|
||||
return detailList;
|
||||
});
|
||||
const canCancel = computed(() => detail.value?.detailList?.some(item => isCancelable(item)) || false);
|
||||
const getSummaryStatus = computed(() => {
|
||||
const detailList = detail.value?.detailList || [];
|
||||
if (canCancel.value) {
|
||||
return "待发送";
|
||||
}
|
||||
if (detailList.length && detailList.every(item => item.status === "CANCEL")) {
|
||||
return "已取消";
|
||||
}
|
||||
if (detailList.some(item => item.status === "FAIL" || item.status === "TIMEOUT")) {
|
||||
return "部分失败";
|
||||
}
|
||||
return "已发送";
|
||||
});
|
||||
const getSummaryTheme = computed<NotifyTagTheme>(() => {
|
||||
if (getSummaryStatus.value === "待发送") {
|
||||
return "warning";
|
||||
}
|
||||
if (getSummaryStatus.value === "已取消") {
|
||||
return "default";
|
||||
}
|
||||
if (getSummaryStatus.value === "部分失败") {
|
||||
return "danger";
|
||||
}
|
||||
return "success";
|
||||
});
|
||||
|
||||
function resolveAttachmentUrl(attachmentId: string): string {
|
||||
return getAttachmentReadURL(attachmentId);
|
||||
}
|
||||
|
||||
async function loadDetail(): Promise<void> {
|
||||
const requestToken = loadToken + 1;
|
||||
loadToken = requestToken;
|
||||
detail.value = undefined;
|
||||
navBarStore.clearRight();
|
||||
const notifyId = String(route.params.id || "");
|
||||
if (!notifyId) {
|
||||
return;
|
||||
}
|
||||
|
||||
isLoading.value = true;
|
||||
try {
|
||||
const result = await NotifyAPI.managementDetail(notifyId);
|
||||
if (requestToken !== loadToken) {
|
||||
return;
|
||||
}
|
||||
detail.value = result;
|
||||
setRightAction();
|
||||
} catch (error) {
|
||||
Message.error(getErrorMessage(error, "通知详情加载失败"));
|
||||
} finally {
|
||||
if (requestToken === loadToken) {
|
||||
isLoading.value = false;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function setRightAction(): void {
|
||||
if (detail.value?.id && canDeleteNotify.value) {
|
||||
navBarStore.setRightText("删除", "var(--td-error-color)", confirmDelete);
|
||||
}
|
||||
}
|
||||
|
||||
// ---------- 通知操作 ----------
|
||||
|
||||
function isCancelable(item: NotifyDetail): boolean {
|
||||
return item.status === "WAITING" && Boolean(item.sendAt && Time.now() < item.sendAt);
|
||||
}
|
||||
|
||||
async function confirmCancel(): Promise<void> {
|
||||
const notifyId = detail.value?.id;
|
||||
if (!notifyId || !canCancelNotify.value || !canCancel.value || isCanceling.value) {
|
||||
return;
|
||||
}
|
||||
const dialog = DialogPlugin.confirm({
|
||||
title: "取消定时通知",
|
||||
content: "确定取消这条尚未发送的通知吗？",
|
||||
cancelBtn: "返回",
|
||||
confirmBtn: "取消发送",
|
||||
onCancel() {
|
||||
dialog.destroy();
|
||||
},
|
||||
async onConfirm() {
|
||||
dialog.destroy();
|
||||
isCanceling.value = true;
|
||||
try {
|
||||
await NotifyAPI.managementCancel(notifyId);
|
||||
await loadDetail();
|
||||
Message.success("通知已取消");
|
||||
} catch (error) {
|
||||
Message.error(getErrorMessage(error, "通知取消失败"));
|
||||
} finally {
|
||||
isCanceling.value = false;
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
async function confirmDelete(): Promise<void> {
|
||||
const notifyId = detail.value?.id;
|
||||
if (!notifyId || !canDeleteNotify.value || isDeleting.value) {
|
||||
return;
|
||||
}
|
||||
const dialog = DialogPlugin.confirm({
|
||||
title: "删除通知",
|
||||
content: "确定删除这条通知吗？删除后收件人也将无法查看。",
|
||||
cancelBtn: "返回",
|
||||
confirmBtn: "删除",
|
||||
onCancel() {
|
||||
dialog.destroy();
|
||||
},
|
||||
async onConfirm() {
|
||||
dialog.destroy();
|
||||
isDeleting.value = true;
|
||||
navBarStore.clearRight();
|
||||
try {
|
||||
await NotifyAPI.managementDelete(notifyId);
|
||||
Message.success("通知已删除");
|
||||
await router.replace({ name: "NotifyManagement" });
|
||||
} catch (error) {
|
||||
Message.error(getErrorMessage(error, "通知删除失败"));
|
||||
setRightAction();
|
||||
} finally {
|
||||
isDeleting.value = false;
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// ---------- 展示 ----------
|
||||
|
||||
function getSubject(item: Notify): string {
|
||||
return item.detailList?.[0]?.subject?.trim() || "站内通知";
|
||||
}
|
||||
|
||||
function getSendTime(item?: NotifyDetail): string {
|
||||
if (!item?.sendAt) {
|
||||
return "-";
|
||||
}
|
||||
if (isCancelable(item)) {
|
||||
return `定时 ${Time.toDateTime(item.sendAt)}`;
|
||||
}
|
||||
return Time.toDateTime(item.sendAt);
|
||||
}
|
||||
|
||||
function getRecipientName(item: NotifyDetail): string {
|
||||
return item.toUser?.nick?.trim() || item.toUser?.name?.trim() || item.sendTo || "未知用户";
|
||||
}
|
||||
|
||||
function getRecipientContact(item: NotifyDetail): string {
|
||||
return item.toUser?.phoneNo || item.sendTo || "-";
|
||||
}
|
||||
|
||||
function getReadText(item: NotifyDetail): string {
|
||||
if (isCancelable(item)) {
|
||||
return "待发送";
|
||||
}
|
||||
if (item.status === "CANCEL") {
|
||||
return "已取消";
|
||||
}
|
||||
if (item.status === "FAIL" || item.status === "TIMEOUT") {
|
||||
return item.status === "TIMEOUT" ? "已超时" : "发送失败";
|
||||
}
|
||||
return item.readAt ? "已读" : "未读";
|
||||
}
|
||||
|
||||
function getReadTheme(item: NotifyDetail): NotifyTagTheme {
|
||||
if (isCancelable(item)) {
|
||||
return "warning";
|
||||
}
|
||||
if (item.status === "CANCEL" || item.status === "FAIL" || item.status === "TIMEOUT") {
|
||||
return "danger";
|
||||
}
|
||||
return item.readAt ? "primary" : "default";
|
||||
}
|
||||
|
||||
function getReadTime(item: NotifyDetail): string {
|
||||
return item.readAt ? `已读 ${Time.toDateTime(item.readAt)}` : "未读";
|
||||
}
|
||||
|
||||
// ---------- 生命周期 ----------
|
||||
|
||||
watch(() => route.params.id, async () => {
|
||||
await loadDetail();
|
||||
}, { immediate: true });
|
||||
|
||||
onMounted(() => navBarStore.clearRight());
|
||||
onUnmounted(() => navBarStore.clearRight());
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.notify-management-detail {
|
||||
gap: 1rem;
|
||||
min-height: 100%;
|
||||
padding: calc(var(--app-nav-height) + 1rem) 0 1rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.article {
|
||||
padding: 1.25rem 1rem;
|
||||
margin: 0 1rem;
|
||||
background: var(--td-bg-color-container);
|
||||
box-shadow: var(--td-shadow-1);
|
||||
border-radius: 1.4rem;
|
||||
}
|
||||
|
||||
.header {
|
||||
text-align: center;
|
||||
padding-bottom: 1rem;
|
||||
border-bottom: 1px solid rgba(148, 163, 184, .2);
|
||||
|
||||
h1 {
|
||||
margin: 0;
|
||||
font-size: 1.25rem;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.time {
|
||||
color: #64748b;
|
||||
margin-top: .5rem;
|
||||
font-size: .8125rem;
|
||||
}
|
||||
}
|
||||
|
||||
.body {
|
||||
color: #334155;
|
||||
padding-top: 1rem;
|
||||
font-size: .9375rem;
|
||||
line-height: 1.8;
|
||||
word-break: break-word;
|
||||
|
||||
.empty-content {
|
||||
color: #64748b;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.actions {
|
||||
padding: 0 1rem;
|
||||
}
|
||||
|
||||
.filter {
|
||||
width: calc(100% - 2rem);
|
||||
margin: 0 1rem;
|
||||
}
|
||||
|
||||
.recipients {
|
||||
:deep(.t-cell__title) {
|
||||
flex: 1 1 0;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
:deep(.t-cell__description) {
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.recipient-title,
|
||||
.recipient-description {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.recipient-title {
|
||||
gap: .5rem;
|
||||
|
||||
> span:first-child {
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
.recipient-description {
|
||||
gap: .75rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
:global(html.theme-dark) {
|
||||
.notify-management-detail {
|
||||
.header {
|
||||
.time {
|
||||
color: #94a3b8;
|
||||
}
|
||||
}
|
||||
|
||||
.body {
|
||||
color: #cbd5e1;
|
||||
|
||||
.empty-content {
|
||||
color: #94a3b8;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,249 @@
|
||||
<template>
|
||||
<div v-can="corePermissionCodes.notify.read" class="notify-detail">
|
||||
<article v-if="detail" class="article">
|
||||
<header class="header">
|
||||
<h1 v-text="getSubject(detail)" />
|
||||
<div class="sender">
|
||||
发送用户：<span v-text="getSenderName(detail)" />
|
||||
</div>
|
||||
<pass-time-label class="time" :timestamp="detail.sendAt" underline />
|
||||
</header>
|
||||
<section class="body">
|
||||
<notify-view
|
||||
:detail="detail"
|
||||
empty-text="暂无通知内容"
|
||||
:resolve-attachment-url="resolveAttachmentUrl"
|
||||
/>
|
||||
</section>
|
||||
</article>
|
||||
<t-empty
|
||||
v-else
|
||||
:description="isLoading ? '正在加载通知' : '通知不存在'"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { NotifyView } from "timi-tdesign-mobile";
|
||||
import { PassTimeLabel } from "timi-web";
|
||||
import { NotifyAPI, type NotifyDetail } from "timi-web-api";
|
||||
import { DialogPlugin } from "tdesign-mobile-vue";
|
||||
import { useNavBarStore } from "@/store/navBarStore";
|
||||
import { getErrorMessage } from "@/utils/error";
|
||||
import { getAttachmentReadURL } from "@/utils/attachment";
|
||||
import { corePermissionCodes } from "@/utils/permission";
|
||||
import { Message } from "@/utils/message.ts";
|
||||
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
const navBarStore = useNavBarStore();
|
||||
|
||||
defineOptions({
|
||||
name: "UserNotifyDetail"
|
||||
});
|
||||
|
||||
// ---------- 通知数据 ----------
|
||||
|
||||
const detail = ref<NotifyDetail>();
|
||||
const isLoading = ref(false);
|
||||
const isDeleting = ref(false);
|
||||
let loadToken = 0;
|
||||
|
||||
async function loadDetail(): Promise<void> {
|
||||
const requestToken = loadToken + 1;
|
||||
loadToken = requestToken;
|
||||
navBarStore.clearRight();
|
||||
const detailId = String(route.params.id || "");
|
||||
if (!detailId) {
|
||||
detail.value = undefined;
|
||||
return;
|
||||
}
|
||||
|
||||
detail.value = undefined;
|
||||
isLoading.value = true;
|
||||
try {
|
||||
const result = await NotifyAPI.internalDetail(detailId);
|
||||
if (requestToken !== loadToken) {
|
||||
return;
|
||||
}
|
||||
|
||||
detail.value = result;
|
||||
setDeleteAction();
|
||||
await markRead(result, requestToken);
|
||||
} catch (error) {
|
||||
console.warn("通知详情加载失败", error);
|
||||
Message.error("通知详情加载失败");
|
||||
} finally {
|
||||
if (requestToken === loadToken) {
|
||||
isLoading.value = false;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function setDeleteAction(): void {
|
||||
if (detail.value?.id) {
|
||||
navBarStore.setRightText("删除", "var(--td-error-color)", confirmDelete);
|
||||
}
|
||||
}
|
||||
|
||||
async function confirmDelete(): Promise<void> {
|
||||
const detailId = detail.value?.id;
|
||||
if (!detailId || isDeleting.value) {
|
||||
return;
|
||||
}
|
||||
|
||||
const dialog = DialogPlugin.confirm({
|
||||
title: "删除通知",
|
||||
content: "确定删除这条通知吗？删除后将不再显示。",
|
||||
cancelBtn: "取消",
|
||||
confirmBtn: "删除",
|
||||
onCancel() {
|
||||
dialog.destroy();
|
||||
},
|
||||
async onConfirm() {
|
||||
dialog.destroy();
|
||||
await deleteDetail(detailId);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
async function deleteDetail(detailId: string): Promise<void> {
|
||||
if (isDeleting.value) {
|
||||
return;
|
||||
}
|
||||
|
||||
isDeleting.value = true;
|
||||
navBarStore.clearRight();
|
||||
try {
|
||||
await NotifyAPI.deleteInternal(detailId);
|
||||
Message.success("通知已删除");
|
||||
await router.replace({ name: "UserNotifyList" });
|
||||
} catch (error) {
|
||||
Message.error(getErrorMessage(error, "通知删除失败"));
|
||||
setDeleteAction();
|
||||
} finally {
|
||||
isDeleting.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
async function markRead(item: NotifyDetail, requestToken: number): Promise<void> {
|
||||
if (!item.id || item.readAt) {
|
||||
return;
|
||||
}
|
||||
try {
|
||||
await NotifyAPI.markInternalRead(item.id);
|
||||
if (requestToken === loadToken && detail.value) {
|
||||
detail.value = {
|
||||
...detail.value,
|
||||
readAt: Date.now()
|
||||
};
|
||||
}
|
||||
} catch (error) {
|
||||
console.warn("通知标记已读失败", error);
|
||||
}
|
||||
}
|
||||
|
||||
// ---------- 展示 ----------
|
||||
|
||||
function getSubject(item: NotifyDetail): string {
|
||||
return item.subject?.trim() || "站内通知";
|
||||
}
|
||||
|
||||
function getSenderName(item: NotifyDetail): string {
|
||||
return item.fromUser?.nick?.trim() || item.fromUser?.name?.trim() || "系统通知";
|
||||
}
|
||||
|
||||
function resolveAttachmentUrl(attachmentId: string): string {
|
||||
return getAttachmentReadURL(attachmentId);
|
||||
}
|
||||
|
||||
// ---------- 生命周期 ----------
|
||||
|
||||
watch(() => route.params.id, async () => {
|
||||
await loadDetail();
|
||||
}, { immediate: true });
|
||||
|
||||
onMounted(() => {
|
||||
navBarStore.clearRight();
|
||||
});
|
||||
|
||||
onUnmounted(() => {
|
||||
navBarStore.clearRight();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.notify-detail {
|
||||
gap: 1rem;
|
||||
min-height: 100%;
|
||||
padding: calc(var(--app-nav-height) + 1rem) 0 1rem 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.article {
|
||||
padding: 1.25rem 1rem;
|
||||
margin: 0 1rem;
|
||||
background: rgba(255, 255, 255, .92);
|
||||
box-shadow: var(--td-shadow-1);
|
||||
border-radius: 1.4rem;
|
||||
}
|
||||
|
||||
.header {
|
||||
text-align: center;
|
||||
border-bottom: 1px solid rgba(148, 163, 184, .2);
|
||||
padding-bottom: 1rem;
|
||||
|
||||
h1 {
|
||||
margin: 0;
|
||||
font-size: 1.25rem;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.time {
|
||||
color: #64748b;
|
||||
margin-top: .5rem;
|
||||
font-size: .8125rem;
|
||||
}
|
||||
|
||||
.sender {
|
||||
color: #64748b;
|
||||
margin-top: .5rem;
|
||||
font-size: .8125rem;
|
||||
}
|
||||
}
|
||||
|
||||
.body {
|
||||
color: #334155;
|
||||
padding-top: 1rem;
|
||||
font-size: .9375rem;
|
||||
line-height: 1.8;
|
||||
white-space: pre-wrap;
|
||||
word-break: break-word;
|
||||
}
|
||||
}
|
||||
|
||||
:global(html.theme-dark) {
|
||||
.notify-detail {
|
||||
.article {
|
||||
background: rgba(15, 23, 42, .88);
|
||||
box-shadow: 0 .75rem 2rem rgba(2, 6, 23, .32);
|
||||
}
|
||||
|
||||
.header {
|
||||
border-bottom-color: rgba(148, 163, 184, .16);
|
||||
|
||||
.time {
|
||||
color: #94a3b8;
|
||||
}
|
||||
|
||||
.sender {
|
||||
color: #94a3b8;
|
||||
}
|
||||
}
|
||||
|
||||
.body {
|
||||
color: #cbd5e1;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,434 @@
|
||||
<template>
|
||||
<div v-can="corePermissionCodes.notify.read" class="notify-list">
|
||||
<t-segmented
|
||||
v-model="filterMode"
|
||||
class="filter"
|
||||
block
|
||||
:options="filterOptions"
|
||||
@change="switchFilter"
|
||||
/>
|
||||
<t-pull-down-refresh
|
||||
v-model="isRefreshing"
|
||||
:refresh-timeout="30000"
|
||||
@refresh="refresh"
|
||||
@scrolltolower="loadMore"
|
||||
>
|
||||
<t-cell-group v-if="pageResult.list.length" class="items" theme="card">
|
||||
<t-swipe-cell
|
||||
v-for="item in pageResult.list"
|
||||
:key="item.id"
|
||||
class="item"
|
||||
>
|
||||
<t-cell
|
||||
:description="getPreview(item)"
|
||||
:note="getTime(item)"
|
||||
arrow
|
||||
hover
|
||||
@click="toDetail(item)"
|
||||
>
|
||||
<template #leftIcon>
|
||||
<div class="icon" :class="{ unread: isUnread(item) }">
|
||||
<t-icon name="notification" size="1.25rem" />
|
||||
</div>
|
||||
</template>
|
||||
<template #title>
|
||||
<div class="title">
|
||||
<span v-text="getSubject(item)" />
|
||||
<t-tag
|
||||
v-if="isUnread(item)"
|
||||
class="unread-label"
|
||||
theme="danger"
|
||||
size="small"
|
||||
>未读</t-tag>
|
||||
</div>
|
||||
</template>
|
||||
</t-cell>
|
||||
<template #right>
|
||||
<t-button
|
||||
class="delete"
|
||||
theme="danger"
|
||||
:loading="deletingId === item.id"
|
||||
@click.stop="confirmDelete(item)"
|
||||
>
|
||||
删除
|
||||
</t-button>
|
||||
</template>
|
||||
</t-swipe-cell>
|
||||
</t-cell-group>
|
||||
<t-empty
|
||||
v-else-if="!isLoading"
|
||||
description="暂无站内通知"
|
||||
/>
|
||||
<div class="load-state" v-text="loadStateText" />
|
||||
</t-pull-down-refresh>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { Time } from "timi-web";
|
||||
import { NotifyAPI, type NotifyDetail, type Page, type PageResult, useUserStore } from "timi-web-api";
|
||||
import { DialogPlugin } from "tdesign-mobile-vue";
|
||||
import { Message } from "@/utils/message";
|
||||
import { useNavBarStore } from "@/store/navBarStore";
|
||||
import { getErrorMessage } from "@/utils/error";
|
||||
import { corePermissionCodes } from "@/utils/permission";
|
||||
|
||||
type NotifyFilter = "all" | "unread";
|
||||
|
||||
defineOptions({
|
||||
name: "UserNotifyList"
|
||||
});
|
||||
|
||||
const pageSize = 20;
|
||||
const router = useRouter();
|
||||
const navBarStore = useNavBarStore();
|
||||
const userStore = useUserStore();
|
||||
const canReadNotify = computed(() => userStore.hasPermissions(corePermissionCodes.notify.read));
|
||||
|
||||
// ---------- 筛选 ----------
|
||||
|
||||
const filterMode = ref<NotifyFilter>("all");
|
||||
const unreadCount = ref(0);
|
||||
const unreadTabLabel = computed(() => 0 < unreadCount.value ? `未读 ${unreadCount.value}` : "未读");
|
||||
const filterOptions = computed(() => [
|
||||
{ value: "all" as NotifyFilter, label: "全部" },
|
||||
{ value: "unread" as NotifyFilter, label: unreadTabLabel.value }
|
||||
]);
|
||||
|
||||
// ---------- 列表分页 ----------
|
||||
|
||||
const isRefreshing = ref(false);
|
||||
const isLoading = ref(false);
|
||||
const isNoMore = ref(false);
|
||||
const page = reactive<Page<NotifyDetail>>({
|
||||
index: 0,
|
||||
size: pageSize
|
||||
});
|
||||
const pageResult = reactive<PageResult<NotifyDetail>>({
|
||||
total: 0,
|
||||
list: []
|
||||
});
|
||||
let loadToken = 0;
|
||||
let loadingPromise: Promise<void> | undefined;
|
||||
let isPageActive = true;
|
||||
|
||||
const loadStateText = computed(() => {
|
||||
if (isLoading.value) {
|
||||
return "正在加载通知";
|
||||
}
|
||||
if (isNoMore.value) {
|
||||
return pageResult.list.length ? "没有更多通知" : "";
|
||||
}
|
||||
return "上拉加载更多";
|
||||
});
|
||||
|
||||
async function fetchPage(requestToken: number): Promise<void> {
|
||||
isLoading.value = true;
|
||||
const result = await NotifyAPI.listInternal(page, filterMode.value === "unread");
|
||||
if (requestToken !== loadToken) {
|
||||
return;
|
||||
}
|
||||
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;
|
||||
}
|
||||
|
||||
async function loadMore(): Promise<void> {
|
||||
if (loadingPromise) {
|
||||
await loadingPromise;
|
||||
return;
|
||||
}
|
||||
if (isNoMore.value) {
|
||||
return;
|
||||
}
|
||||
|
||||
const requestToken = loadToken;
|
||||
const request = (async () => {
|
||||
try {
|
||||
await fetchPage(requestToken);
|
||||
} finally {
|
||||
if (requestToken === loadToken) {
|
||||
isLoading.value = false;
|
||||
}
|
||||
}
|
||||
})();
|
||||
loadingPromise = request;
|
||||
try {
|
||||
await request;
|
||||
} finally {
|
||||
if (loadingPromise === request) {
|
||||
loadingPromise = undefined;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
async function reloadList(): Promise<void> {
|
||||
const requestToken = loadToken + 1;
|
||||
loadToken = requestToken;
|
||||
page.index = 0;
|
||||
pageResult.total = 0;
|
||||
pageResult.list = [];
|
||||
isNoMore.value = false;
|
||||
if (loadingPromise) {
|
||||
await loadingPromise;
|
||||
}
|
||||
if (requestToken === loadToken) {
|
||||
await loadMore();
|
||||
}
|
||||
}
|
||||
|
||||
async function refresh(): Promise<void> {
|
||||
isRefreshing.value = true;
|
||||
try {
|
||||
await reloadList();
|
||||
await loadUnreadCount();
|
||||
} finally {
|
||||
isRefreshing.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
// ---------- 操作 ----------
|
||||
|
||||
const isMarkingAllRead = ref(false);
|
||||
const deletingId = ref("");
|
||||
|
||||
async function loadUnreadCount(): Promise<void> {
|
||||
try {
|
||||
unreadCount.value = Math.max(0, await NotifyAPI.countUnreadInternal());
|
||||
} catch (error) {
|
||||
unreadCount.value = 0;
|
||||
console.warn("未读通知数量加载失败", error);
|
||||
} finally {
|
||||
updateNavBarAction();
|
||||
}
|
||||
}
|
||||
|
||||
async function switchFilter(context: { value: string | number }): Promise<void> {
|
||||
const nextFilter = String(context.value) as NotifyFilter;
|
||||
if (nextFilter !== "all" && nextFilter !== "unread") {
|
||||
return;
|
||||
}
|
||||
filterMode.value = nextFilter;
|
||||
await reloadList();
|
||||
}
|
||||
|
||||
async function markAllRead(): Promise<void> {
|
||||
if (isMarkingAllRead.value || unreadCount.value === 0) {
|
||||
return;
|
||||
}
|
||||
isMarkingAllRead.value = true;
|
||||
try {
|
||||
await NotifyAPI.markAllInternalRead();
|
||||
unreadCount.value = 0;
|
||||
await reloadList();
|
||||
Message.success("已全部标记为已读");
|
||||
} catch (error) {
|
||||
console.warn("全部通知标记已读失败", error);
|
||||
Message.error("全部标记已读失败");
|
||||
} finally {
|
||||
isMarkingAllRead.value = false;
|
||||
updateNavBarAction();
|
||||
}
|
||||
}
|
||||
|
||||
async function confirmDelete(item: NotifyDetail): Promise<void> {
|
||||
if (!item.id || deletingId.value) {
|
||||
return;
|
||||
}
|
||||
|
||||
const detailId = item.id;
|
||||
const dialog = DialogPlugin.confirm({
|
||||
title: "删除通知",
|
||||
content: "确定删除这条通知吗？删除后将不再显示。",
|
||||
cancelBtn: "取消",
|
||||
confirmBtn: "删除",
|
||||
onCancel() {
|
||||
dialog.destroy();
|
||||
},
|
||||
async onConfirm() {
|
||||
dialog.destroy();
|
||||
await deleteNotification(detailId);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
async function deleteNotification(detailId: string): Promise<void> {
|
||||
if (deletingId.value) {
|
||||
return;
|
||||
}
|
||||
|
||||
deletingId.value = detailId;
|
||||
try {
|
||||
await NotifyAPI.deleteInternal(detailId);
|
||||
await reloadList();
|
||||
await loadUnreadCount();
|
||||
Message.success("通知已删除");
|
||||
} catch (error) {
|
||||
Message.error(getErrorMessage(error, "通知删除失败"));
|
||||
} finally {
|
||||
deletingId.value = "";
|
||||
}
|
||||
}
|
||||
|
||||
function updateNavBarAction(): void {
|
||||
if (!isPageActive) {
|
||||
return;
|
||||
}
|
||||
navBarStore.clearRight();
|
||||
if (0 < unreadCount.value) {
|
||||
navBarStore.setRightText("全部已读", "var(--td-brand-color)", markAllRead);
|
||||
}
|
||||
}
|
||||
|
||||
// ---------- 展示和导航 ----------
|
||||
|
||||
function isUnread(item: NotifyDetail): boolean {
|
||||
return !item.readAt;
|
||||
}
|
||||
|
||||
function getSubject(item: NotifyDetail): string {
|
||||
return item.subject?.trim() || "站内通知";
|
||||
}
|
||||
|
||||
function getPreview(item: NotifyDetail): string {
|
||||
const text = item.content?.replace(/\s+/g, " ").trim() || "无通知内容";
|
||||
return 80 < text.length ? `${text.slice(0, 80)}...` : text;
|
||||
}
|
||||
|
||||
function getTime(item: NotifyDetail): string {
|
||||
return Time.toPassedDateTime(item.createdAt || item.sendAt) || "-";
|
||||
}
|
||||
|
||||
async function toDetail(item: NotifyDetail): Promise<void> {
|
||||
if (!item.id) {
|
||||
return;
|
||||
}
|
||||
await router.push({
|
||||
name: "UserNotifyDetail",
|
||||
params: { id: item.id }
|
||||
});
|
||||
}
|
||||
|
||||
// ---------- 生命周期 ----------
|
||||
|
||||
onMounted(async () => {
|
||||
navBarStore.clearRight();
|
||||
if (!canReadNotify.value) {
|
||||
return;
|
||||
}
|
||||
try {
|
||||
await reloadList();
|
||||
await loadUnreadCount();
|
||||
} catch (error) {
|
||||
console.warn("站内通知加载失败", error);
|
||||
Message.error("站内通知加载失败");
|
||||
}
|
||||
});
|
||||
|
||||
onUnmounted(() => {
|
||||
isPageActive = false;
|
||||
navBarStore.clearRight();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.notify-list {
|
||||
display: flex;
|
||||
padding: calc(var(--app-nav-height) + 1rem) 0 1rem 0;
|
||||
min-height: 100%;
|
||||
flex-direction: column;
|
||||
|
||||
.filter {
|
||||
width: calc(100% - 2rem);
|
||||
margin: 0 1rem;
|
||||
}
|
||||
|
||||
.items {
|
||||
overflow: hidden;
|
||||
padding-top: 1rem;
|
||||
|
||||
.item {
|
||||
|
||||
.delete {
|
||||
height: 100%;
|
||||
padding: 0 1rem;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
:deep(.t-cell:after) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.t-cell__title) {
|
||||
flex: 1 1 0;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
:deep(.t-cell__description) {
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
:deep(.t-cell__note) {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.icon {
|
||||
width: 3.5rem;
|
||||
height: 3.5rem;
|
||||
color: #64748b;
|
||||
display: flex;
|
||||
background: #e2e8f0;
|
||||
align-items: center;
|
||||
border-radius: .875rem;
|
||||
justify-content: center;
|
||||
|
||||
&.unread {
|
||||
color: #0f766e;
|
||||
background: #ccfbf1;
|
||||
}
|
||||
}
|
||||
|
||||
.title {
|
||||
gap: .5rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
> span:first-child {
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
.unread-label {
|
||||
font-size: .6875rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
:global(html.theme-dark) {
|
||||
.notify-list {
|
||||
.icon {
|
||||
color: #94a3b8;
|
||||
background: #1e293b;
|
||||
|
||||
&.unread {
|
||||
color: #5eead4;
|
||||
background: rgba(13, 148, 136, .2);
|
||||
}
|
||||
}
|
||||
|
||||
.unread-label {
|
||||
color: #5eead4;
|
||||
background: rgba(13, 148, 136, .2);
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user