update notify style
This commit is contained in:
Timi
@@ -1,76 +1,37 @@
|
||||
<template>
|
||||
<div v-can="corePermissionCodes.notify.read" class="notify-management-detail">
|
||||
<div v-can="corePermissionCodes.notify.read" class="notify-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-group title="通知状态" theme="card" v-entrance-transition>
|
||||
<t-cell title="发送用户" :note="`${detail.detailList?.length || 0} 人`" arrow @click="openRecipientList"/>
|
||||
<t-cell title="已读用户" :note="`${readCount} 人`" arrow @click="openReadRecipientList"/>
|
||||
<t-cell title="未读用户" :note="`${unreadCount} 人`" arrow @click="openUnreadRecipientList"/>
|
||||
<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">
|
||||
<div v-if="canCancelNotify && canCancel" class="actions" v-entrance-transition="70">
|
||||
<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"
|
||||
<notify-content
|
||||
:detail="mainDetail"
|
||||
:subject="getSubject(detail)"
|
||||
:time="getSendTime(mainDetail)"
|
||||
:resolve-attachment-url="resolveAttachmentUrl"
|
||||
v-entrance-transition="140"
|
||||
/>
|
||||
<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";
|
||||
@@ -79,9 +40,10 @@ import { getErrorMessage } from "@/utils/error";
|
||||
import { getAttachmentReadURL } from "@/utils/attachment";
|
||||
import { useNavBarStore } from "@/store/navBarStore";
|
||||
import { corePermissionCodes } from "@/utils/permission";
|
||||
import NotifyContent from "@/pages/notify/component/NotifyContent.vue";
|
||||
|
||||
type RecipientFilter = "all" | "unread" | "read";
|
||||
type NotifyTagTheme = "default" | "success" | "warning" | "primary" | "danger";
|
||||
type RecipientFilter = "all" | "unread" | "read";
|
||||
|
||||
defineOptions({
|
||||
name: "NotifyDetail"
|
||||
@@ -100,26 +62,11 @@ 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 unreadCount = computed(() => detail.value?.detailList?.filter(item => !item.readAt).length || 0);
|
||||
const canCancel = computed(() => detail.value?.detailList?.some(item => isCancelable(item)) || false);
|
||||
const getSummaryStatus = computed(() => {
|
||||
const detailList = detail.value?.detailList || [];
|
||||
@@ -266,39 +213,36 @@ function getSendTime(item?: NotifyDetail): string {
|
||||
return Time.toDateTime(item.sendAt);
|
||||
}
|
||||
|
||||
function getRecipientName(item: NotifyDetail): string {
|
||||
return item.toUser?.nick?.trim() || item.toUser?.name?.trim() || item.sendTo || "未知用户";
|
||||
async function openRecipientList(): Promise<void> {
|
||||
const notifyId = detail.value?.id;
|
||||
if (!notifyId) {
|
||||
return;
|
||||
}
|
||||
await router.push({
|
||||
name: "NotifyRecipientList",
|
||||
params: { id: notifyId },
|
||||
query: { filter: "all" satisfies RecipientFilter }
|
||||
});
|
||||
}
|
||||
|
||||
function getRecipientContact(item: NotifyDetail): string {
|
||||
return item.toUser?.phoneNo || item.sendTo || "-";
|
||||
async function openReadRecipientList(): Promise<void> {
|
||||
await openRecipientListByFilter("read");
|
||||
}
|
||||
|
||||
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 ? "已读" : "未读";
|
||||
async function openUnreadRecipientList(): Promise<void> {
|
||||
await openRecipientListByFilter("unread");
|
||||
}
|
||||
|
||||
function getReadTheme(item: NotifyDetail): NotifyTagTheme {
|
||||
if (isCancelable(item)) {
|
||||
return "warning";
|
||||
async function openRecipientListByFilter(filter: RecipientFilter): Promise<void> {
|
||||
const notifyId = detail.value?.id;
|
||||
if (!notifyId) {
|
||||
return;
|
||||
}
|
||||
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)}` : "未读";
|
||||
await router.push({
|
||||
name: "NotifyRecipientList",
|
||||
params: { id: notifyId },
|
||||
query: { filter }
|
||||
});
|
||||
}
|
||||
|
||||
// ---------- 生命周期 ----------
|
||||
@@ -312,10 +256,10 @@ onUnmounted(() => navBarStore.clearRight());
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.notify-management-detail {
|
||||
.notify-detail {
|
||||
gap: 1rem;
|
||||
min-height: 100%;
|
||||
padding: calc(var(--app-nav-height) + 1rem) 0 1rem;
|
||||
padding: var(--app-nav-height) 0 1rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
@@ -361,62 +305,5 @@ onUnmounted(() => navBarStore.clearRight());
|
||||
.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>
|
||||
|
||||
Reference in New Issue
Block a user