47 lines
3.3 KiB
Vue
47 lines
3.3 KiB
Vue
|
<script setup lang="ts">
|
||
|
|
import { ref } from 'vue'
|
||
|
|
import { Download, Eye, Plus, Send } from '@lucide/vue'
|
||
|
|
import AdminPage from '@/shared/components/AdminPage.vue'
|
||
|
|
import DataTable, { type DataTableColumn } from '@/shared/components/DataTable.vue'
|
||
|
|
import ListPageLayout from '@/shared/components/ListPageLayout.vue'
|
||
|
|
import QueryToolbar, { type QueryField, type QueryModel } from '@/shared/components/QueryToolbar.vue'
|
||
|
|
import ContractPendingNotice from '@/modules/notifications/components/ContractPendingNotice.vue'
|
||
|
|
import MessageComposerDialog from '@/modules/notifications/components/MessageComposerDialog.vue'
|
||
|
|
|
||
|
|
const page = ref(1)
|
||
|
|
const pageSize = ref(20)
|
||
|
|
const composerOpen = ref(false)
|
||
|
|
const filters = ref<QueryModel>({ type: '', status: '', keyword: '' })
|
||
|
|
const queryFields: QueryField[] = [
|
||
|
|
{ key: 'type', type: 'select', label: '消息类型', placeholder: '全部类型', options: [{ label: '系统通知', value: '系统通知' }, { label: '业务提醒', value: '业务提醒' }, { label: '异常告警', value: '异常告警' }] },
|
||
|
|
{ key: 'status', type: 'select', label: '消息状态', placeholder: '全部状态', options: [{ label: '已发送', value: '已发送' }, { label: '草稿', value: '草稿' }] },
|
||
|
|
{ key: 'keyword', type: 'input', label: '标题或内容', placeholder: '消息标题/内容' },
|
||
|
|
]
|
||
|
|
const columns: DataTableColumn[] = [
|
||
|
|
{ key: 'actions', label: '操作', width: 190, fixed: 'left', slotName: 'actions' },
|
||
|
|
{ key: 'id', prop: 'id', label: '消息ID', minWidth: 170 },
|
||
|
|
{ key: 'title', prop: 'title', label: '标题', minWidth: 220 },
|
||
|
|
{ key: 'type', prop: 'type', label: '类型', width: 110 },
|
||
|
|
{ key: 'target', prop: 'target', label: '接收对象', minWidth: 150 },
|
||
|
|
{ key: 'sentAt', prop: 'sentAt', label: '发送时间', width: 170 },
|
||
|
|
{ key: 'readSummary', prop: 'readSummary', label: '已读/总数', width: 110 },
|
||
|
|
{ key: 'status', prop: 'status', label: '状态', width: 100 },
|
||
|
|
]
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<template>
|
||
|
|
<AdminPage><ListPageLayout aria-label="消息管理列表">
|
||
|
|
<template #toolbar><QueryToolbar v-model="filters" class="surface-panel" aria-label="消息筛选" ariaLabel="消息筛选" :fields="queryFields" preference-key="notifications-messages-query" /></template>
|
||
|
|
<template #state><ContractPendingNotice /></template>
|
||
|
|
<section class="surface-panel table-panel">
|
||
|
|
<DataTable v-model:page="page" v-model:page-size="pageSize" :data="[]" :columns="columns" preference-key="notifications-messages-table" :total="0" row-key="id" empty-text="接口接入后显示平台消息">
|
||
|
|
<template #toolbar-actions><el-button type="primary" @click="composerOpen = true"><Plus :size="16" />新建消息</el-button><el-button disabled><Download :size="16" />导出Excel</el-button></template>
|
||
|
|
<template #pagination-left><span>共 0 条消息</span></template>
|
||
|
|
<template #actions><div class="table-actions"><el-button link type="primary" disabled><Eye :size="15" />详情</el-button><el-button link type="primary" disabled><Send :size="15" />发送</el-button></div></template>
|
||
|
|
</DataTable>
|
||
|
|
</section>
|
||
|
|
</ListPageLayout><MessageComposerDialog v-model="composerOpen" /></AdminPage>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<style scoped>.table-actions { display: flex; min-height: 32px; align-items: center; gap: 8px; }.table-actions :deep(.el-button + .el-button) { margin-left: 0; }</style>
|