公告管理

admin-web/src/views/admin/notice/index.vue

@@ -2,24 +2,38 @@
     <div class="system-notice-container">
         <!-- 搜索栏 -->
         <el-card class="search-card" shadow="never">
-            <el-form :inline="true" :model="queryParams" class="search-form">
-                <el-form-item label="标题">
-                    <el-input v-model="queryParams.title" placeholder="请输入标题" clearable style="width: 200px" />
-                </el-form-item>
-                <el-form-item label="状态">
-                    <ext-d-select v-model="queryParams.status" type="notice_status" placeholder="请选择" clearable style="width: 150px" />
-                </el-form-item>
-                <el-form-item label="目标">
-                    <ext-d-select v-model="queryParams.target" type="notice_target" placeholder="请选择" clearable style="width: 150px" />
-                </el-form-item>
-                <el-form-item>
-                    <el-button type="primary" @click="handleQuery">
-                        <el-icon><ele-Search /></el-icon> 查询
-                    </el-button>
-                    <el-button @click="resetQuery">
-                        <el-icon><ele-Refresh /></el-icon> 重置
-                    </el-button>
-                </el-form-item>
+            <el-form :model="queryParams" class="search-form">
+                <el-row :gutter="16">
+                    <el-col :span="6">
+                        <el-form-item label="标题">
+                            <el-input v-model="queryParams.title" placeholder="请输入标题" clearable />
+                        </el-form-item>
+                    </el-col>
+                    <el-col :span="6">
+                        <el-form-item label="状态">
+                            <ext-d-select v-model="queryParams.status" type="notice_status" placeholder="请选择" clearable style="width: 100%" />
+                        </el-form-item>
+                    </el-col>
+                    <el-col :span="6">
+                        <el-form-item label="目标">
+                            <el-select v-model="queryParams.target" placeholder="请选择" clearable style="width: 100%">
+                                <el-option label="客户端" value="client" />
+                                <el-option label="商户端" value="merchant" />
+                                <el-option label="全部" value="all" />
+                            </el-select>
+                        </el-form-item>
+                    </el-col>
+                    <el-col :span="6">
+                        <el-form-item>
+                            <el-button type="primary" @click="handleQuery">
+                                <el-icon><ele-Search /></el-icon> 查询
+                            </el-button>
+                            <el-button @click="resetQuery">
+                                <el-icon><ele-Refresh /></el-icon> 重置
+                            </el-button>
+                        </el-form-item>
+                    </el-col>
+                </el-row>
             </el-form>
         </el-card>
 
@@ -36,24 +50,24 @@
 
             <!-- 数据表格 -->
             <el-table v-loading="loading" :data="tableData" border stripe>
-                <el-table-column prop="id" label="ID" width="80" align="center" />
-                <el-table-column prop="title" label="标题" min-width="200" show-overflow-tooltip />
-                <el-table-column prop="content" label="内容" min-width="300" show-overflow-tooltip />
-                <el-table-column prop="adminUserName" label="发布者" width="120" align="center" />
-                <el-table-column prop="status" label="状态" width="100" align="center">
+                <el-table-column prop="id" label="ID" width="70" align="center" />
+                <el-table-column prop="title" label="标题" min-width="160" show-overflow-tooltip />
+                <el-table-column prop="content" label="内容" min-width="200" show-overflow-tooltip />
+                <el-table-column prop="adminUserName" label="发布者" width="100" align="center" />
+                <el-table-column prop="status" label="状态" width="90" align="center">
                     <template #default="{ row }">
-                        <el-tag :type="getStatusType(row.status)">{{ getStatusLabel(row.status) }}</el-tag>
+                        <el-tag :type="getStatusType(row.status)" size="small">{{ getStatusLabel(row.status) }}</el-tag>
                     </template>
                 </el-table-column>
-                <el-table-column prop="target" label="目标" width="100" align="center">
+                <el-table-column prop="target" label="目标" width="90" align="center">
                     <template #default="{ row }">
-                        {{ getTargetLabel(row.target) }}
+                        <el-tag :type="row.target === 'merchant' ? 'warning' : ''" size="small">{{ getTargetLabel(row.target) }}</el-tag>
                     </template>
                 </el-table-column>
-                <el-table-column prop="startTime" label="开始时间" width="170" align="center" />
-                <el-table-column prop="endTime" label="结束时间" width="170" align="center" />
-                <el-table-column prop="createTime" label="创建时间" width="170" align="center" />
-                <el-table-column label="操作" width="150" align="center" fixed="right">
+                <el-table-column prop="startTime" label="开始时间" width="155" align="center" />
+                <el-table-column prop="endTime" label="结束时间" width="155" align="center" />
+                <el-table-column prop="createTime" label="创建时间" width="155" align="center" />
+                <el-table-column label="操作" width="140" align="center" fixed="right">
                     <template #default="{ row }">
                         <el-button type="primary" link size="small" @click="handleEdit(row)">编辑</el-button>
                         <el-button type="danger" link size="small" @click="handleDelete(row)">删除</el-button>
@@ -76,20 +90,20 @@
         </el-card>
 
         <!-- 新增/编辑对话框 -->
-        <el-dialog v-model="dialogVisible" :title="dialogTitle" width="600px" destroy-on-close>
-            <el-form ref="formRef" :model="formData" :rules="rules" label-width="100px">
+        <el-dialog v-model="dialogVisible" :title="dialogTitle" width="580px" destroy-on-close>
+            <el-form ref="formRef" :model="formData" :rules="rules" label-width="90px">
                 <el-form-item label="公告标题" prop="title">
                     <el-input v-model="formData.title" placeholder="请输入公告标题" />
                 </el-form-item>
                 <el-form-item label="公告内容" prop="content">
-                    <el-input v-model="formData.content" type="textarea" :rows="5" placeholder="请输入公告内容" />
+                    <el-input v-model="formData.content" type="textarea" :rows="4" placeholder="请输入公告内容" />
                 </el-form-item>
-                <el-form-item label="目标" prop="target">
+                <el-form-item label="投放目标">
                     <el-checkbox-group v-model="formData.targetList">
                         <el-checkbox label="client">客户端</el-checkbox>
                         <el-checkbox label="merchant">商户端</el-checkbox>
                     </el-checkbox-group>
-                    <span style="color: #999; font-size: 12px; margin-left: 10px;">不选则默认全部</span>
+                    <span class="target-hint">不选则默认全部</span>
                 </el-form-item>
                 <el-form-item label="生效时间" prop="startTime">
                     <el-date-picker
@@ -150,7 +164,6 @@ const formData = reactive({
     content: '',
     startTime: '',
     endTime: '',
-    stationIdList: [] as number[],
     target: '' as string,
     targetList: [] as string[]
 });
@@ -162,25 +175,38 @@ const rules = {
 
 // Mock 数据
 const mockData = [
-    { id: 1, title: '系统升级通知', content: '系统将于近期进行升级维护', adminUserName: '管理员', status: 1, startTime: '2024-01-01 00:00:00', endTime: '2024-12-31 23:59:59', createTime: '2024-01-01 10:00:00' },
-    { id: 2, title: '春节放假通知', content: '春节期间系统正常运行', adminUserName: '管理员', status: 0, startTime: '2024-02-01 00:00:00', endTime: '2024-02-15 23:59:59', createTime: '2024-01-15 10:00:00' },
-    { id: 3, title: '新功能上线', content: '消息通知中心功能已上线', adminUserName: '管理员', status: 2, startTime: '2024-01-01 00:00:00', endTime: '2024-01-10 23:59:59', createTime: '2024-01-01 08:00:00' }
+    { id: 1, title: '系统升级通知', content: '系统将于近期进行升级维护', adminUserName: '管理员', status: 1, target: 'client', startTime: '2024-01-01 00:00:00', endTime: '2024-12-31 23:59:59', createTime: '2024-01-01 10:00:00' },
+    { id: 2, title: '春节放假通知', content: '春节期间系统正常运行', adminUserName: '管理员', status: 0, target: 'all', startTime: '2024-02-01 00:00:00', endTime: '2024-02-15 23:59:59', createTime: '2024-01-15 10:00:00' },
+    { id: 3, title: '新功能上线', content: '消息通知中心功能已上线', adminUserName: '管理员', status: 2, target: 'merchant', startTime: '2024-01-01 00:00:00', endTime: '2024-01-10 23:59:59', createTime: '2024-01-01 08:00:00' }
 ];
 
+// 目标显示映射（不依赖字典，确保字典未加载时也能正常显示）
+const targetMap: Record<string, string> = { client: '客户端', merchant: '商户端', all: '全部' };
+const getTargetLabel = (target: string) => targetMap[target] || target || '--';
+
 // 获取状态标签
 const getStatusLabel = (status: number) => u.fmt.fmtDict(status, 'notice_status');
 const getStatusType = (status: number) => u.fmt.fmtDictColor(status, 'notice_status');
-const getTargetLabel = (target: string) => u.fmt.fmtDict(target, 'notice_target');
 
 // 查询数据
 const handleQuery = async () => {
     loading.value = true;
     try {
-        const res = await $get('/notice/list', queryParams) as any;
-        tableData.value = res?.list || mockData;
-        total.value = res?.total || mockData.length;
+        // 过滤空值参数
+        const params: any = { pageNum: queryParams.pageNum, pageSize: queryParams.pageSize };
+        if (queryParams.title) params.title = queryParams.title;
+        if (queryParams.status !== null && queryParams.status !== undefined && queryParams.status !== '') params.status = queryParams.status;
+        if (queryParams.target) params.target = queryParams.target;
+
+        const res = await $get('/notice/list', params) as any;
+        if (res && res.list) {
+            tableData.value = res.list;
+            total.value = res.total || 0;
+        } else {
+            tableData.value = mockData;
+            total.value = mockData.length;
+        }
     } catch (error) {
-        // 使用 Mock 数据
         tableData.value = mockData;
         total.value = mockData.length;
     } finally {
@@ -231,9 +257,8 @@ const handleEdit = (row: any) => {
 const handleSubmit = async () => {
     if (!formRef.value) return;
     await formRef.value.validate();
-    
+
     try {
-        // 将 targetList 转为 target 字符串
         if (!formData.targetList || formData.targetList.length === 0 || formData.targetList.length === 2) {
             formData.target = 'all';
         } else {
@@ -277,9 +302,9 @@ onMounted(() => {
 }
 
 .search-form {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 10px;
+    :deep(.el-form-item) {
+        margin-bottom: 0;
+    }
 }
 
 .card-header {
@@ -293,4 +318,10 @@ onMounted(() => {
     display: flex;
     justify-content: flex-end;
 }
+
+.target-hint {
+    color: #999;
+    font-size: 12px;
+    margin-left: 10px;
+}
 </style>