CrossBorder_OS/frontend/src/views/system/NotificationView.vue

<template>
  <div class="app-page">
    <section class="glass-card section-card">
      <div class="table-toolbar">
        <div class="chip-list">
          <el-button type="primary" @click="openSend">发送通知</el-button>
        </div>
        <el-form :model="filters" inline>
          <el-form-item label="类型">
            <el-select v-model="filters.type" placeholder="全部" clearable style="width:120px">
              <el-option label="系统通知" value="系统通知" />
              <el-option label="业务通知" value="业务通知" />
              <el-option label="待办提醒" value="待办提醒" />
              <el-option label="公告" value="公告" />
            </el-select>
          </el-form-item>
          <el-form-item label="状态">
            <el-select v-model="filters.readStatus" placeholder="全部" clearable style="width:120px">
              <el-option label="未读" value="unread" />
              <el-option label="已读" value="read" />
            </el-select>
          </el-form-item>
        </el-form>
      </div>
    </section>

    <section class="glass-card section-card">
      <el-table :data="filteredItems" style="width:100%" v-loading="loading">
        <el-table-column type="selection" width="45" />
        <el-table-column prop="type" label="类型" width="100">
          <template #default="{ row }">
            <el-tag :type="getNotificationType(row.type).type" size="small">{{ getNotificationType(row.type).label }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="title" label="标题" min-width="250" />
        <el-table-column prop="content" label="内容" min-width="300" show-overflow-tooltip />
        <el-table-column prop="sender" label="发送人" width="100" />
        <el-table-column prop="time" label="时间" width="160" />
        <el-table-column prop="readStatus" label="状态" width="80">
          <template #default="{ row }">
            <el-tag :type="getNotificationStatus(row.readStatus).type" size="small">{{ getNotificationStatus(row.readStatus).label }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="120" fixed="right">
          <template #default="{ row }">
            <el-button link type="primary" @click="openDetail(row)">查看</el-button>
            <el-button link type="danger" @click="deleteNotice(row)">删除</el-button>
          </template>
        </el-table-column>
        <template #empty>
          <el-empty description="暂无数据" />
        </template>
      </el-table>
    </section>

    <el-dialog v-model="sendDialogVisible" title="发送通知" width="500px" destroy-on-close>
      <el-form :model="sendForm" label-width="80px">
        <el-form-item label="接收人" required>
          <el-select v-model="sendForm.receiverType" placeholder="选择接收范围" style="width:100%">
            <el-option label="全部用户" value="all" />
            <el-option label="指定角色" value="role" />
            <el-option label="指定用户" value="user" />
          </el-select>
        </el-form-item>
        <el-form-item label="消息类型" required>
          <el-select v-model="sendForm.type" placeholder="选择类型" style="width:100%">
            <el-option label="系统通知" value="系统通知" />
            <el-option label="业务通知" value="业务通知" />
            <el-option label="待办提醒" value="待办提醒" />
            <el-option label="公告" value="公告" />
          </el-select>
        </el-form-item>
        <el-form-item label="标题" required>
          <el-input v-model="sendForm.title" placeholder="通知标题" />
        </el-form-item>
        <el-form-item label="内容" required>
          <el-input v-model="sendForm.content" type="textarea" :rows="4" placeholder="通知内容" />
        </el-form-item>
        <el-form-item label="重要">
          <el-switch v-model="sendForm.important" />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="sendDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="confirmSend">发送</el-button>
      </template>
    </el-dialog>

    <el-dialog v-model="detailDialogVisible" title="通知详情" width="500px">
      <el-descriptions :column="1" border v-if="detailItem">
        <el-descriptions-item label="类型">
          <el-tag :type="getNotificationType(detailItem.type).type" size="small">{{ getNotificationType(detailItem.type).label }}</el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="标题">{{ detailItem.title }}</el-descriptions-item>
        <el-descriptions-item label="内容">{{ detailItem.content }}</el-descriptions-item>
        <el-descriptions-item label="发送人">{{ detailItem.sender }}</el-descriptions-item>
        <el-descriptions-item label="时间">{{ detailItem.time }}</el-descriptions-item>
      </el-descriptions>
      <template #footer>
        <el-button @click="detailDialogVisible = false">关闭</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { computed, onMounted, reactive, ref } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import { getNotificationType, getNotificationStatus } from '@/utils/enumMappings';

interface NoticeItem {
  id: string;
  type: string;
  title: string;
  content: string;
  sender: string;
  time: string;
  readStatus: string;
}

const items = ref<NoticeItem[]>([
  { id: 'N001', type: '系统通知', title: '系统维护公告', content: '平台将于2026-04-25 02:00-04:00进行系统维护，届时部分功能将暂停使用。', sender: '系统管理员', time: '2026-04-20 10:00:00', readStatus: '未读' },
  { id: 'N002', type: '业务通知', title: '新订单提醒', content: '您有5笔新订单待处理，请及时登录系统查看。', sender: 'OMS系统', time: '2026-04-20 09:30:00', readStatus: '未读' },
  { id: 'N003', type: '待办提醒', title: '采购单待审批', content: '您有待审批的采购单 PO-20260420-003，请及时处理。', sender: '采购系统', time: '2026-04-20 09:00:00', readStatus: '已读' },
  { id: 'N004', type: '公告', title: '五一劳动节放假安排', content: '五一假期期间（5月1日-5月5日），仓库暂停发货，4月30日中午12点后的订单将于5月6日起陆续发货。', sender: '运营部', time: '2026-04-19 15:00:00', readStatus: '已读' },
  { id: 'N005', type: '业务通知', title: '库存预警', content: 'SKU-LUGG-20-BLK 当前库存15件，低于安全库存50件，请及时补货。', sender: '库存系统', time: '2026-04-19 14:30:00', readStatus: '已读' }
]);

const loading = ref(false);
const sendDialogVisible = ref(false);
const detailDialogVisible = ref(false);
const detailItem = ref<NoticeItem | null>(null);

const filters = ref({ type: '', readStatus: '' });

const sendForm = reactive({
  receiverType: 'all',
  type: '',
  title: '',
  content: '',
  important: false
});

const filteredItems = computed(() => {
  return items.value.filter(item => {
    if (filters.value.type && item.type !== filters.value.type) return false;
    if (filters.value.readStatus && item.readStatus !== (filters.value.readStatus === 'read' ? '已读' : '未读')) return false;
    return true;
  });
});

const loadData = () => { loading.value = true; setTimeout(() => { loading.value = false; }, 300); };

const openSend = () => { Object.assign(sendForm, { receiverType: 'all', type: '', title: '', content: '', important: false }); sendDialogVisible.value = true; };

const confirmSend = () => {
  if (!sendForm.type || !sendForm.title || !sendForm.content) { ElMessage.warning('请填写必填项'); return; }
  items.value.unshift({ id: `N${String(items.value.length + 1).padStart(3, '0')}`, type: sendForm.type, title: sendForm.title, content: sendForm.content, sender: '当前用户', time: new Date().toLocaleString(), readStatus: '未读' });
  sendDialogVisible.value = false;
  ElMessage.success('通知已发送');
};

const openDetail = (row: NoticeItem) => {
  detailItem.value = row;
  if (row.readStatus === '未读') {
    const idx = items.value.findIndex(i => i.id === row.id);
    if (idx !== -1) items.value[idx].readStatus = '已读';
  }
  detailDialogVisible.value = true;
};

const deleteNotice = async (row: NoticeItem) => {
  await ElMessageBox.confirm('确认删除此通知？', '删除确认');
  const idx = items.value.findIndex(i => i.id === row.id);
  if (idx !== -1) items.value.splice(idx, 1);
  ElMessage.success('通知已删除');
};

onMounted(loadData);
</script>

<style scoped>
.filter-form :deep(.el-form-item) { margin-bottom: 0; }
</style>