okr-performance/frontend/src/views/notification/NotificationView.vue

<template>
  <div class="notification-page">
    <el-card>
      <template #header>
        <div class="card-header">
          <span>消息通知</span>
          <el-button text type="primary" @click="markAllRead">全部已读</el-button>
        </div>
      </template>
      <el-table :data="notifications" stripe v-loading="loading">
        <el-table-column label="状态" width="70">
          <template #default="{ row }">
            <el-tag size="small" :type="row.isRead === 0 ? 'danger' : 'info'">
              {{ row.isRead === 0 ? '未读' : '已读' }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="title" label="标题" min-width="180" />
        <el-table-column prop="content" label="内容" min-width="240" show-overflow-tooltip />
        <el-table-column label="类型" width="120">
          <template #default="{ row }">{{ typeLabel(row.type) }}</template>
        </el-table-column>
        <el-table-column prop="createdAtFriendly" label="时间" width="100" />
      </el-table>
      <div style="margin-top:16px; text-align:center">
        <el-pagination
          v-model:current-page="page"
          :total="total"
          :page-size="20"
          layout="prev, pager, next"
          @current-change="loadData"
        />
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { notificationApi } from '../../api'

const notifications = ref([])
const loading = ref(false)
const page = ref(1)
const total = ref(0)

function typeLabel(type) {
  const map = {
    OKR_REVIEW: 'OKR审核', OKR_REVIEWED: '审核结果',
    SCORE_CONFIRM: '评分确认', SCORE_CONFIRMED: '确认通知',
    PERIOD_DEADLINE: '截止提醒',
    PERIOD_OKR_ALIGN: '周期发布', PERIOD_EXECUTING: '开始执行',
    PERIOD_ASSESSING: '考评开始', PERIOD_ARCHIVED: '周期归档',
    FEEDBACK_NOTIFY: '面谈通知'
  }
  return map[type] || type
}
async function loadData() {
  loading.value = true
  try {
    const data = await notificationApi.getPage({ page: page.value, size: 20 })
    notifications.value = data.records
    total.value = data.total
  } finally {
    loading.value = false
  }
}
async function markAllRead() {
  await notificationApi.markAllRead()
  await loadData()
}
onMounted(loadData)
</script>

<style scoped>
.notification-page { max-width: 960px; margin: 0 auto; }
.card-header { display: flex; justify-content: space-between; align-items: center; }
</style>