yuezi-saas/frontend/src/views/office/notifications/index.vue

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import { notificationApi } from '@/api/office.js'

// ─── State ────────────────────────────────────────────────────────────────────

const tableData = ref([])
const total = ref(0)
const loading = ref(false)

const searchForm = reactive({ type: '', is_read: '' })
const pagination = reactive({ page: 1, per_page: 20 })

const typeMap = { 1: '系统', 2: '审批', 3: '待办', 4: '提醒' }
const typeStyle = { 1: '', 2: 'warning', 3: 'danger', 4: 'success' }

// ─── Methods ──────────────────────────────────────────────────────────────────

async function fetchList() {
  loading.value = true
  try {
    const res = await notificationApi.getList({ ...searchForm, ...pagination })
    tableData.value = res.data?.list || res.data?.data || []
    total.value = res.data?.total || 0
  } finally { loading.value = false }
}

function handleSearch() { pagination.page = 1; fetchList() }
function handleReset() { Object.assign(searchForm, { type: '', is_read: '' }); handleSearch() }

async function handleMarkRead(row) {
  await notificationApi.markRead(row.id)
  ElMessage.success('已标记为已读')
  fetchList()
}

async function handleMarkAllRead() {
  await notificationApi.markAllRead()
  ElMessage.success('全部标记为已读')
  fetchList()
}

function handlePageChange(val) { pagination.page = val; fetchList() }
function handleSizeChange(val) { pagination.per_page = val; pagination.page = 1; fetchList() }

onMounted(fetchList)
</script>

<template>
  <div class="p-6 space-y-4">
    <div class="bg-white rounded-2xl border border-gray-100 shadow-sm p-4 flex items-center flex-wrap gap-3">
      <el-select v-model="searchForm.type" placeholder="通知类型" clearable style="width: 140px">
        <el-option v-for="(v, k) in typeMap" :key="k" :label="v" :value="Number(k)" />
      </el-select>
      <el-select v-model="searchForm.is_read" placeholder="读取状态" clearable style="width: 130px">
        <el-option label="未读" :value="0" />
        <el-option label="已读" :value="1" />
      </el-select>
      <el-button type="primary" @click="handleSearch">查询</el-button>
      <el-button @click="handleReset">重置</el-button>
    </div>

    <div class="bg-white rounded-2xl border border-gray-100 shadow-sm">
      <div class="flex items-center justify-between px-5 py-4 border-b border-gray-50">
        <div class="flex items-center gap-3">
          <span class="font-medium text-gray-700">通知列表</span>
        </div>
        <el-button type="primary" @click="handleMarkAllRead">全部标记已读</el-button>
      </div>
      <div class="px-2">
        <el-table v-loading="loading" :data="tableData" style="width: 100%">
          <el-table-column prop="title" label="标题" min-width="180" />
          <el-table-column prop="content" label="内容" min-width="260" show-overflow-tooltip />
          <el-table-column label="类型" width="90" align="center">
            <template #default="{ row }">
              <el-tag :type="typeStyle[row.type]" size="small">{{ typeMap[row.type] || '-' }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="状态" width="80" align="center">
            <template #default="{ row }">
              <span class="read-dot" :class="row.is_read ? 'read' : 'unread'" />
              <span>{{ row.is_read ? '已读' : '未读' }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="created_at" label="创建时间" min-width="160" />
          <el-table-column label="操作" width="120" fixed="right" align="center">
            <template #default="{ row }">
              <el-button v-if="!row.is_read" size="small" type="primary" text @click="handleMarkRead(row)">标记已读</el-button>
              <span v-else class="text-muted">-</span>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="px-5 py-3 border-t border-gray-50">
        <el-pagination
          v-model:current-page="pagination.page"
          v-model:page-size="pagination.per_page"
          :total="total"
          :page-sizes="[10, 20, 50]"
          layout="total, sizes, prev, pager, next, jumper"
          background
          @current-change="handlePageChange"
          @size-change="handleSizeChange"
        />
      </div>
    </div>
  </div>
</template>

<style scoped>
.read-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 6px;
  vertical-align: middle;
}

.read-dot.unread {
  background-color: #67c23a;
}

.read-dot.read {
  background-color: #c0c4cc;
}

.text-muted {
  color: var(--color-text-secondary);
  font-size: 13px;
}
</style>