684 lines
25 KiB
Vue
684 lines
25 KiB
Vue
<script setup lang="ts">
|
||
import { computed, nextTick, onMounted, onUnmounted, reactive, ref } from 'vue';
|
||
import { useRoute } from 'vue-router';
|
||
import { ElMessage, ElMessageBox, type FormInstance, type FormRules } from 'element-plus';
|
||
import {
|
||
CALL_QUICK_PHRASES,
|
||
NOTIFICATION_PRIORITIES,
|
||
PRIORITY_LABELS,
|
||
PRIORITY_TAG_TYPES,
|
||
SOCKET_EVENTS,
|
||
formatDate,
|
||
relativeTime,
|
||
truncate,
|
||
type ClassDto,
|
||
type ClassPeriod,
|
||
type NotificationCreatorSummary,
|
||
type NotificationDaySummary,
|
||
type NotificationDto,
|
||
type NotificationPriority,
|
||
type StudentDto,
|
||
} from '@classhelper/shared';
|
||
import { callApi, classApi, notificationApi } from '@/api';
|
||
import { useRealtimeStore } from '@/stores/realtime';
|
||
import { findClassInSession } from '@/composables/useClassInSession';
|
||
import UrgentClassWarning from '@/components/UrgentClassWarning.vue';
|
||
|
||
const realtime = useRealtimeStore();
|
||
const route = useRoute();
|
||
|
||
const loading = ref(false);
|
||
const classes = ref<ClassDto[]>([]);
|
||
const notifications = ref<NotificationDto[]>([]);
|
||
const filter = reactive({ classId: '', priority: '', keyword: '', date: '', createdBy: '' });
|
||
|
||
/**
|
||
* 按天归档 / 按发布人归档的候选列表（需求：通知按天归档，也可按发布人、类型看）。
|
||
*
|
||
* 两者跟着"班级 + 优先级"走：班级一换，日期栏与发布人栏就应该只剩那个班里真实存在的
|
||
* 日期与人 —— 否则选项里全是别的班级的数据，选中后得到空列表，看着像坏了。
|
||
* 发布人栏还额外跟着当前选中的日期收敛（"这一天都有谁发过通知"）。
|
||
*/
|
||
const days = ref<NotificationDaySummary[]>([]);
|
||
const creators = ref<NotificationCreatorSummary[]>([]);
|
||
let archiveRequest = 0;
|
||
let refreshRequest = 0;
|
||
let notificationRequest = 0;
|
||
|
||
async function loadArchive(): Promise<void> {
|
||
const request = ++archiveRequest;
|
||
const base = {
|
||
...(filter.classId ? { classId: filter.classId } : {}),
|
||
...(filter.priority ? { priority: filter.priority } : {}),
|
||
};
|
||
const [dayList, creatorList] = await Promise.all([
|
||
notificationApi.days(base).catch(() => ({ days: [] as NotificationDaySummary[] })),
|
||
notificationApi
|
||
.creators({ ...base, ...(filter.date ? { date: filter.date } : {}) })
|
||
.catch(() => ({ creators: [] as NotificationCreatorSummary[] })),
|
||
]);
|
||
if (request !== archiveRequest) return;
|
||
days.value = dayList.days;
|
||
creators.value = creatorList.creators;
|
||
if (filter.createdBy && !creatorList.creators.some((item) => item.id === filter.createdBy))
|
||
filter.createdBy = '';
|
||
}
|
||
|
||
/** 筛选变化后统一刷新：先更新归档候选，再拉当前筛选下的列表 */
|
||
async function refreshList(): Promise<void> {
|
||
const request = ++refreshRequest;
|
||
notificationRequest += 1;
|
||
await loadArchive();
|
||
if (request !== refreshRequest) return;
|
||
await loadNotifications();
|
||
}
|
||
|
||
/**
|
||
* 是否"单班视图"：选中了具体班级时列表只服务一个班。
|
||
* 单班视图只展示"已读情况"（已读 N 人 / 未读），跨班视图才展示已读率百分比。
|
||
*/
|
||
const isSingleClass = computed(() => Boolean(filter.classId));
|
||
|
||
/**
|
||
* 各班学生数（classId → 人数）。
|
||
* NotificationDto 只有 readCount（已读人数），没有 unreadCount / reads，
|
||
* 已读率的分母只能自己算，所以进入页面时按班级各取一次学生名单长度。
|
||
*/
|
||
const classStudentCounts = ref<Record<string, number | null>>({});
|
||
|
||
function classSizeOf(classId: string): number | null {
|
||
return classStudentCounts.value[classId] ?? null;
|
||
}
|
||
|
||
async function loadClasses(): Promise<void> {
|
||
classes.value = await classApi.list();
|
||
if (!filter.classId && classes.value.length > 0) filter.classId = classes.value[0]?.id ?? '';
|
||
await loadClassStudentCounts();
|
||
}
|
||
|
||
async function loadClassStudentCounts(): Promise<void> {
|
||
const entries = await Promise.all(
|
||
classes.value.map(async (item) => {
|
||
const students = await classApi.students(item.id).catch(() => null);
|
||
return [item.id, students?.length ?? null] as const;
|
||
}),
|
||
);
|
||
classStudentCounts.value = Object.fromEntries(entries);
|
||
}
|
||
|
||
async function loadNotifications(): Promise<void> {
|
||
const request = ++notificationRequest;
|
||
loading.value = true;
|
||
try {
|
||
const params: {
|
||
classId?: string;
|
||
priority?: string;
|
||
keyword?: string;
|
||
date?: string;
|
||
createdBy?: string;
|
||
} = {};
|
||
if (filter.classId) params.classId = filter.classId;
|
||
if (filter.priority) params.priority = filter.priority;
|
||
if (filter.keyword.trim()) params.keyword = filter.keyword.trim();
|
||
if (filter.date) params.date = filter.date;
|
||
if (filter.createdBy) params.createdBy = filter.createdBy;
|
||
const list = await notificationApi.list(params);
|
||
if (request === notificationRequest) notifications.value = list;
|
||
} finally {
|
||
if (request === notificationRequest) loading.value = false;
|
||
}
|
||
}
|
||
|
||
/* ------------------------------------------------------------ 叫人（教师可用） */
|
||
|
||
/**
|
||
* 叫人入口放在通知页：班主任与科任老师都能用（学生管理页是管理员专属）。
|
||
* 学生名单走 `/classes/:id/students`（班级详情接口，教师有权访问），
|
||
* 不使用管理员专属的 `/students`。
|
||
*/
|
||
const callVisible = ref(false);
|
||
const callSending = ref(false);
|
||
const callClassId = ref('');
|
||
const callStudentId = ref('');
|
||
const callStudents = ref<StudentDto[]>([]);
|
||
const callQuickPhrase = ref<string>(CALL_QUICK_PHRASES[0] ?? '');
|
||
const callMessage = ref('');
|
||
/** 紧急叫人：无视上课时段立即展开；默认普通（只进队列，课后弹出） */
|
||
const callUrgent = ref(false);
|
||
|
||
async function openCall(): Promise<void> {
|
||
callClassId.value = filter.classId || classes.value[0]?.id || '';
|
||
callStudentId.value = '';
|
||
callMessage.value = '';
|
||
callQuickPhrase.value = CALL_QUICK_PHRASES[0] ?? '';
|
||
callUrgent.value = false;
|
||
callStudents.value = [];
|
||
callVisible.value = true;
|
||
if (callClassId.value) await loadCallStudents();
|
||
}
|
||
|
||
async function loadCallStudents(): Promise<void> {
|
||
callStudentId.value = '';
|
||
callStudents.value = callClassId.value ? await classApi.students(callClassId.value) : [];
|
||
}
|
||
|
||
function pickCallPhrase(phrase: string): void {
|
||
callQuickPhrase.value = callQuickPhrase.value === phrase ? '' : phrase;
|
||
}
|
||
|
||
async function submitCall(): Promise<void> {
|
||
if (!callClassId.value) {
|
||
ElMessage.warning('请选择班级');
|
||
return;
|
||
}
|
||
if (!callStudentId.value) {
|
||
ElMessage.warning('请选择学生');
|
||
return;
|
||
}
|
||
if (!callMessage.value.trim() && !callQuickPhrase.value.trim()) {
|
||
ElMessage.warning('请选择快捷短语或填写自定义消息');
|
||
return;
|
||
}
|
||
callSending.value = true;
|
||
try {
|
||
const created = await callApi.create({
|
||
classId: callClassId.value,
|
||
studentId: callStudentId.value,
|
||
urgent: callUrgent.value,
|
||
...(callMessage.value.trim() ? { message: callMessage.value.trim() } : {}),
|
||
...(callQuickPhrase.value.trim() ? { quickPhrase: callQuickPhrase.value.trim() } : {}),
|
||
});
|
||
ElMessage.success(`已${callUrgent.value ? '紧急' : ''}通知：${created.title}`);
|
||
callVisible.value = false;
|
||
} finally {
|
||
callSending.value = false;
|
||
}
|
||
}
|
||
|
||
/* ------------------------------------------------------------ 发布 */
|
||
|
||
const formVisible = ref(false);
|
||
const formRef = ref<FormInstance>();
|
||
const form = reactive<{
|
||
classIds: string[];
|
||
title: string;
|
||
content: string;
|
||
priority: NotificationPriority;
|
||
}>({
|
||
classIds: [],
|
||
title: '',
|
||
content: '',
|
||
priority: 'NORMAL',
|
||
});
|
||
|
||
const rules: FormRules = {
|
||
classIds: [{ required: true, type: 'array', min: 1, message: '请选择目标班级', trigger: 'change' }],
|
||
title: [{ required: true, message: '请输入通知标题', trigger: 'blur' }],
|
||
content: [{ required: true, message: '请输入通知内容', trigger: 'blur' }],
|
||
};
|
||
|
||
/** 上课时段发布紧急通知的全屏二次确认状态（classIds = 本次要发布的班级） */
|
||
const urgentWarning = reactive({
|
||
visible: false,
|
||
period: null as ClassPeriod | null,
|
||
title: '',
|
||
classIds: [] as string[],
|
||
});
|
||
|
||
function classNameOf(classId: string): string {
|
||
return classes.value.find((item) => item.id === classId)?.name ?? classId;
|
||
}
|
||
|
||
async function openCreate(): Promise<void> {
|
||
// 班级列表可能还没加载完（进入页面后立刻点按钮）：先补一次，避免「目标班级」为空导致校验失败
|
||
if (classes.value.length === 0) await loadClasses().catch(() => undefined);
|
||
form.classIds = filter.classId ? [filter.classId] : classes.value[0] ? [classes.value[0].id] : [];
|
||
form.title = '';
|
||
form.content = '';
|
||
form.priority = 'NORMAL';
|
||
formVisible.value = true;
|
||
}
|
||
|
||
/**
|
||
* 上课时段检查见 `composables/useClassInSession.ts`（大模型助手那条发布路径也用它，
|
||
* 判据只留一份，别在这里再写一遍）。
|
||
*/
|
||
|
||
const submitFormSaving = ref(false);
|
||
async function submitForm(): Promise<void> {
|
||
if (submitFormSaving.value) return;
|
||
submitFormSaving.value = true;
|
||
try {
|
||
const valid = await formRef.value?.validate().catch(() => false);
|
||
if (!valid) return;
|
||
|
||
const classIds = [...form.classIds];
|
||
if (classIds.length === 0) {
|
||
ElMessage.warning('请至少选择一个目标班级');
|
||
return;
|
||
}
|
||
|
||
// 上课时段发布紧急通知：先查询所有目标班级的上课状态，任一命中则弹全屏二次确认（3 秒倒计时）
|
||
if (form.priority === 'URGENT') {
|
||
const hit = await findClassInSession(classIds);
|
||
if (hit) {
|
||
urgentWarning.period = hit.period;
|
||
urgentWarning.title = form.title.trim();
|
||
urgentWarning.classIds = classIds;
|
||
urgentWarning.visible = true;
|
||
return;
|
||
}
|
||
}
|
||
|
||
await doPublish(classIds, false);
|
||
} finally {
|
||
submitFormSaving.value = false;
|
||
}
|
||
}
|
||
|
||
/** 单个班级的发布失败信息（用于汇总提示） */
|
||
interface PublishFailure {
|
||
classId: string;
|
||
reason: string;
|
||
/** 服务端因"上课时段紧急通知"拦截（409 URGENT_DURING_CLASS） */
|
||
urgentConflict: boolean;
|
||
period: ClassPeriod | null;
|
||
}
|
||
|
||
/**
|
||
* 真正提交：调用服务端的**批量发布**端点（`POST /api/notifications/bulk`）一次提交，
|
||
* 服务端逐班做权限断言与上课保护，并把每个班的结果回给我们。
|
||
*
|
||
* 为什么不再由前端对每个班各发一次请求：N 个班就是 N 次往返，权限/上课保护
|
||
* 分散在 N 个响应里，前端还得自己合并；服务端批量端点把这些收敛成一份逐班结果（见 AGENTS.md §5）。
|
||
* confirmDuringClass 为 true 表示教师已在上课警告里确认。
|
||
*/
|
||
const doPublishSaving = ref(false);
|
||
async function doPublish(classIds: string[], confirmDuringClass: boolean): Promise<void> {
|
||
if (doPublishSaving.value) return;
|
||
doPublishSaving.value = true;
|
||
try {
|
||
if (classIds.length === 0) return;
|
||
|
||
const result = await notificationApi.bulkCreate({
|
||
classIds,
|
||
title: form.title.trim(),
|
||
content: form.content,
|
||
priority: form.priority,
|
||
...(confirmDuringClass ? { confirmDuringClass: true } : {}),
|
||
});
|
||
|
||
const successCount = result.succeeded;
|
||
const failures: PublishFailure[] = result.results
|
||
.filter((item) => !item.ok)
|
||
.map((item) => ({
|
||
classId: item.classId,
|
||
reason: item.message ?? '发布失败',
|
||
urgentConflict: item.code === 'URGENT_DURING_CLASS',
|
||
period: ((item.details ?? {}) as { current?: ClassPeriod | null }).current ?? null,
|
||
}));
|
||
|
||
// 兜底：并发场景下服务端仍可能拦截（例如刚好上课铃响），对这批班级重新走一次二次确认
|
||
const conflicted = failures.filter((item) => item.urgentConflict);
|
||
const pendingConfirm = !confirmDuringClass && conflicted.length > 0;
|
||
if (pendingConfirm) {
|
||
urgentWarning.period = conflicted[0]?.period ?? null;
|
||
urgentWarning.title = form.title.trim();
|
||
urgentWarning.classIds = conflicted.map((item) => item.classId);
|
||
urgentWarning.visible = true;
|
||
}
|
||
|
||
const reported = confirmDuringClass ? failures : failures.filter((item) => !item.urgentConflict);
|
||
reportPublishResult(successCount, reported);
|
||
|
||
if (successCount > 0) {
|
||
// 有班级发布成功：关掉弹窗并刷新列表；只有"还有班级等着二次确认"时才保留弹窗内的数据。
|
||
// 注意这里是 pendingConfirm 而不是 !pendingConfirm —— 写成取反会让弹窗在**发布成功后仍然开着**，
|
||
// 老师以为没发出去再点一次「立即发布」，同一批班级就重复收到通知（还会重复广播）。
|
||
formVisible.value = pendingConfirm;
|
||
await refreshList();
|
||
}
|
||
} finally {
|
||
doPublishSaving.value = false;
|
||
}
|
||
}
|
||
|
||
/** 多班发布结果汇总：成功 N 个班、失败 M 个班（失败列出班级名 + 原因） */
|
||
function reportPublishResult(successCount: number, failures: PublishFailure[]): void {
|
||
if (successCount === 0 && failures.length === 0) return;
|
||
if (failures.length === 0) {
|
||
ElMessage.success(`通知已发布到 ${successCount} 个班级，已推送给学生客户端`);
|
||
return;
|
||
}
|
||
const detail = failures.map((item) => `${classNameOf(item.classId)}（${item.reason}）`).join('；');
|
||
ElMessage({
|
||
type: successCount > 0 ? 'warning' : 'error',
|
||
message: `成功 ${successCount} 个班，失败 ${failures.length} 个班｜${detail}`,
|
||
duration: 6000,
|
||
showClose: true,
|
||
});
|
||
}
|
||
|
||
function onUrgentConfirmed(): void {
|
||
const classIds = [...urgentWarning.classIds];
|
||
urgentWarning.visible = false;
|
||
urgentWarning.classIds = [];
|
||
void doPublish(classIds, true);
|
||
}
|
||
|
||
function onUrgentCancelled(): void {
|
||
urgentWarning.visible = false;
|
||
urgentWarning.classIds = [];
|
||
ElMessage.info('已取消发布，紧急通知未发出');
|
||
}
|
||
|
||
async function removeNotification(row: NotificationDto): Promise<void> {
|
||
await ElMessageBox.confirm(`删除通知「${row.title}」？`, '确认', { type: 'warning' });
|
||
await notificationApi.remove(row.id);
|
||
ElMessage.success('已删除');
|
||
await loadNotifications();
|
||
}
|
||
|
||
/** 已读率（跨班视图使用）：分母按该通知所属班级的学生数算 */
|
||
function readRate(row: NotificationDto): number {
|
||
const total = classSizeOf(row.classId);
|
||
if (!total) return 0;
|
||
return Math.round(((row.readCount ?? 0) / total) * 100);
|
||
}
|
||
|
||
function onNotificationEvent(): void {
|
||
void loadNotifications();
|
||
}
|
||
|
||
/**
|
||
* 从仪表盘点「最新通知」跳过来时带的 `?highlight=<通知 id>`：
|
||
* 高亮那一行并滚动过去。之前这个参数没有任何人消费，
|
||
* 用户点完只是跳到通知列表，看不出去的是哪一条。
|
||
*/
|
||
const highlightedId = computed(() => {
|
||
const value = route.query.highlight;
|
||
return typeof value === 'string' ? value : '';
|
||
});
|
||
|
||
function rowClassName({ row }: { row: NotificationDto }): string {
|
||
return row.id === highlightedId.value ? 'row-highlight' : '';
|
||
}
|
||
|
||
onMounted(async () => {
|
||
realtime.on(SOCKET_EVENTS.notificationDeleted, onNotificationEvent);
|
||
await loadClasses();
|
||
await refreshList();
|
||
realtime.on(SOCKET_EVENTS.notificationNew, onNotificationEvent);
|
||
// 列表渲染完再滚动，否则表格行还没生成
|
||
if (highlightedId.value) {
|
||
await nextTick();
|
||
document.querySelector('.row-highlight')?.scrollIntoView({ block: 'center', behavior: 'smooth' });
|
||
}
|
||
});
|
||
|
||
onUnmounted(() => {
|
||
realtime.off(SOCKET_EVENTS.notificationDeleted, onNotificationEvent);
|
||
realtime.off(SOCKET_EVENTS.notificationNew, onNotificationEvent);
|
||
});
|
||
</script>
|
||
|
||
<template>
|
||
<div class="page">
|
||
<div class="page-header">
|
||
<div>
|
||
<h2 class="page-title">通知发布</h2>
|
||
<p class="page-subtitle">发布后按班级房间广播（notification:new），ClassHelper 班级端 5 秒内到达</p>
|
||
</div>
|
||
<div class="toolbar">
|
||
<el-select
|
||
v-model="filter.classId"
|
||
placeholder="选择班级"
|
||
clearable
|
||
style="width: 170px"
|
||
@change="refreshList"
|
||
>
|
||
<el-option v-for="item in classes" :key="item.id" :label="item.name" :value="item.id" />
|
||
</el-select>
|
||
<el-select
|
||
v-model="filter.priority"
|
||
placeholder="全部优先级"
|
||
clearable
|
||
style="width: 150px"
|
||
@change="refreshList"
|
||
>
|
||
<el-option
|
||
v-for="item in NOTIFICATION_PRIORITIES"
|
||
:key="item"
|
||
:label="PRIORITY_LABELS[item]"
|
||
:value="item"
|
||
/>
|
||
</el-select>
|
||
<!-- 按天归档：只列当前班级/优先级下真实存在的日期与条数 -->
|
||
<el-select
|
||
v-model="filter.date"
|
||
placeholder="按天归档"
|
||
clearable
|
||
style="width: 170px"
|
||
@change="refreshList"
|
||
>
|
||
<el-option
|
||
v-for="item in days"
|
||
:key="item.date"
|
||
:label="`${item.date}（${item.count}）`"
|
||
:value="item.date"
|
||
/>
|
||
</el-select>
|
||
<!-- 按发布人归档：跟着班级/优先级/日期收敛 -->
|
||
<el-select
|
||
v-model="filter.createdBy"
|
||
placeholder="全部发布人"
|
||
clearable
|
||
style="width: 160px"
|
||
@change="loadNotifications"
|
||
>
|
||
<el-option
|
||
v-for="item in creators"
|
||
:key="item.id"
|
||
:label="`${item.name}（${item.count}）`"
|
||
:value="item.id"
|
||
/>
|
||
</el-select>
|
||
<el-input
|
||
v-model="filter.keyword"
|
||
placeholder="搜索标题/内容"
|
||
clearable
|
||
style="width: 170px"
|
||
@keyup.enter="loadNotifications"
|
||
@clear="loadNotifications"
|
||
/>
|
||
<el-button type="warning" :icon="'Bell'" @click="openCall">叫人</el-button>
|
||
<el-button type="primary" :icon="'Plus'" @click="openCreate">发布通知</el-button>
|
||
</div>
|
||
</div>
|
||
|
||
<el-card shadow="never" class="table-card">
|
||
<el-table
|
||
v-loading="loading"
|
||
:data="notifications"
|
||
empty-text="暂无通知"
|
||
:row-class-name="rowClassName"
|
||
>
|
||
<el-table-column label="优先级" width="90">
|
||
<template #default="{ row }">
|
||
<el-tag
|
||
:type="PRIORITY_TAG_TYPES[row.priority as NotificationPriority]"
|
||
size="small"
|
||
effect="light"
|
||
>
|
||
{{ PRIORITY_LABELS[row.priority as NotificationPriority] }}
|
||
</el-tag>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column prop="title" label="标题" min-width="200" show-overflow-tooltip />
|
||
<el-table-column label="内容摘要" min-width="220">
|
||
<template #default="{ row }">{{ truncate(row.content, 40) }}</template>
|
||
</el-table-column>
|
||
<el-table-column label="发布人" width="110">
|
||
<template #default="{ row }">{{ row.creator?.name ?? '-' }}</template>
|
||
</el-table-column>
|
||
<el-table-column label="发布时间" width="170">
|
||
<template #default="{ row }">
|
||
<div>{{ formatDate(row.createdAt, true) }}</div>
|
||
<div class="text-muted">{{ relativeTime(row.createdAt) }}</div>
|
||
</template>
|
||
</el-table-column>
|
||
<!-- 所属日期：按天归档用的口径（本地日期），晚间发布不会被算到第二天 -->
|
||
<el-table-column label="所属日期" width="120">
|
||
<template #default="{ row }">
|
||
<el-tag size="small" effect="plain">{{ row.assignDate }}</el-tag>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column :label="isSingleClass ? '已读情况' : '已读率'" width="150">
|
||
<template #default="{ row }">
|
||
<!--
|
||
单班视图：只显示该通知的已读情况（不显示百分比）。
|
||
NotificationDto 只有 readCount（已读人数），没有 unreadCount / reads 明细，
|
||
所以这里用「已读 N 人 / 未读」标签 + 班级总人数表达已读情况。
|
||
-->
|
||
<template v-if="isSingleClass">
|
||
<el-tag :type="(row.readCount ?? 0) > 0 ? 'success' : 'info'" size="small" effect="light">
|
||
{{ (row.readCount ?? 0) > 0 ? `已读 ${row.readCount} 人` : '未读' }}
|
||
</el-tag>
|
||
<div class="text-muted">
|
||
{{
|
||
classSizeOf(row.classId) === null ? '班级人数暂不可用' : `共 ${classSizeOf(row.classId)} 人`
|
||
}}
|
||
</div>
|
||
</template>
|
||
<!-- 跨班视图（未选具体班级）：显示已读率百分比，分母按该通知所属班级算 -->
|
||
<template v-else-if="classSizeOf(row.classId) !== null">
|
||
<el-progress :percentage="readRate(row)" :stroke-width="10" />
|
||
<span class="text-muted">{{ row.readCount ?? 0 }}/{{ classSizeOf(row.classId) }} 人</span>
|
||
</template>
|
||
<span v-else class="text-muted">已读 {{ row.readCount ?? 0 }} 人 · 班级人数暂不可用</span>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="操作" width="90" fixed="right">
|
||
<template #default="{ row }">
|
||
<el-button link type="danger" @click="removeNotification(row)">删除</el-button>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
</el-card>
|
||
|
||
<el-dialog v-model="formVisible" title="发布通知" width="560px">
|
||
<el-form ref="formRef" :model="form" :rules="rules" label-width="90px">
|
||
<el-form-item label="目标班级" prop="classIds">
|
||
<el-select
|
||
v-model="form.classIds"
|
||
multiple
|
||
filterable
|
||
collapse-tags
|
||
collapse-tags-tooltip
|
||
placeholder="可多选；一次发布到所有选中班级"
|
||
style="width: 100%"
|
||
>
|
||
<el-option v-for="item in classes" :key="item.id" :label="item.name" :value="item.id" />
|
||
</el-select>
|
||
</el-form-item>
|
||
<el-form-item label="优先级">
|
||
<el-radio-group v-model="form.priority">
|
||
<el-radio-button v-for="item in NOTIFICATION_PRIORITIES" :key="item" :value="item">
|
||
{{ PRIORITY_LABELS[item] }}
|
||
</el-radio-button>
|
||
</el-radio-group>
|
||
</el-form-item>
|
||
<el-form-item label="标题" prop="title">
|
||
<el-input v-model="form.title" maxlength="120" show-word-limit />
|
||
</el-form-item>
|
||
<el-form-item label="内容" prop="content">
|
||
<el-input v-model="form.content" type="textarea" :rows="5" maxlength="5000" show-word-limit />
|
||
</el-form-item>
|
||
</el-form>
|
||
<template #footer>
|
||
<el-button @click="formVisible = false">取消</el-button>
|
||
<el-button type="primary" :loading="submitFormSaving" @click="submitForm">立即发布</el-button>
|
||
</template>
|
||
</el-dialog>
|
||
|
||
<!-- 叫人：选班级 → 选学生 → 快捷短语 / 自定义消息 → ClassHelper 班级端灵动岛立即弹出 -->
|
||
<el-dialog v-model="callVisible" title="叫人" width="520px">
|
||
<el-form label-width="76px">
|
||
<el-form-item label="班级">
|
||
<el-select v-model="callClassId" style="width: 100%" @change="loadCallStudents">
|
||
<el-option v-for="item in classes" :key="item.id" :label="item.name" :value="item.id" />
|
||
</el-select>
|
||
</el-form-item>
|
||
<el-form-item label="学生">
|
||
<el-select v-model="callStudentId" filterable placeholder="选择学生" style="width: 100%">
|
||
<el-option
|
||
v-for="item in callStudents"
|
||
:key="item.id"
|
||
:label="`${item.name}（${item.studentNo}）`"
|
||
:value="item.id"
|
||
/>
|
||
</el-select>
|
||
</el-form-item>
|
||
<el-form-item label="快捷短语">
|
||
<div class="call-phrases">
|
||
<el-tag
|
||
v-for="phrase in CALL_QUICK_PHRASES"
|
||
:key="phrase"
|
||
class="call-phrase"
|
||
:effect="callQuickPhrase === phrase ? 'dark' : 'plain'"
|
||
:type="callQuickPhrase === phrase ? 'warning' : 'info'"
|
||
@click="pickCallPhrase(phrase)"
|
||
>
|
||
{{ phrase }}
|
||
</el-tag>
|
||
</div>
|
||
</el-form-item>
|
||
<el-form-item label="自定义">
|
||
<el-input
|
||
v-model="callMessage"
|
||
type="textarea"
|
||
:rows="2"
|
||
maxlength="200"
|
||
show-word-limit
|
||
placeholder="可选；填写后优先于快捷短语"
|
||
/>
|
||
</el-form-item>
|
||
<el-form-item label="级别">
|
||
<el-radio-group v-model="callUrgent">
|
||
<el-radio-button :value="false">普通（不打断课堂）</el-radio-button>
|
||
<el-radio-button :value="true">紧急（立即展开）</el-radio-button>
|
||
</el-radio-group>
|
||
</el-form-item>
|
||
</el-form>
|
||
<el-alert
|
||
:type="callUrgent ? 'error' : 'warning'"
|
||
:closable="false"
|
||
:title="
|
||
callUrgent
|
||
? '紧急叫人：ClassHelper 班级端桌面无视上课时段立即展开，需学生点「收到」'
|
||
: '普通叫人：ClassHelper 班级端课间先显示胶囊、点击展开；上课时段只排队，下课后弹出'
|
||
"
|
||
/>
|
||
<template #footer>
|
||
<el-button @click="callVisible = false">取消</el-button>
|
||
<el-button type="warning" :loading="callSending" @click="submitCall">发送叫人</el-button>
|
||
</template>
|
||
</el-dialog>
|
||
<!-- 上课时段发布紧急通知的全屏二次确认（3 秒倒计时） -->
|
||
<UrgentClassWarning
|
||
:visible="urgentWarning.visible"
|
||
:period="urgentWarning.period"
|
||
:pending-title="urgentWarning.title"
|
||
@cancel="onUrgentCancelled"
|
||
@confirm="onUrgentConfirmed"
|
||
/>
|
||
</div>
|
||
</template>
|
||
|
||
<style scoped>
|
||
/* 从仪表盘点「最新通知」跳转过来的定位高亮（?highlight=<通知 id>） */
|
||
:deep(.row-highlight) td {
|
||
background: var(--el-color-primary-light-9) !important;
|
||
}
|
||
</style>
|