feat(公告): 优化公告详情查看功能并简化UI

src/views/announcement/index.scss

@@ -4,47 +4,47 @@
     padding: 16px;
     background-color: #f5f7fa;
     border-radius: 4px;
-    
+
     p {
       margin: 8px 0;
       line-height: 1.6;
-      
+
       strong {
         color: #303133;
         margin-right: 8px;
       }
     }
   }
-  
+
   .detail-body {
-    padding: 16px;
+    // padding: 16px;
     border: 1px solid #e4e7ed;
     border-radius: 4px;
     background-color: #fff;
     min-height: 200px;
-    
+
     // 富文本内容样式
     ::v-deep {
       img {
         max-width: 100%;
         height: auto;
       }
-      
+
       table {
         border-collapse: collapse;
         width: 100%;
-        
+
         td, th {
           border: 1px solid #ddd;
           padding: 8px;
           text-align: left;
         }
-        
+
         th {
           background-color: #f2f2f2;
         }
       }
-      
+
       blockquote {
         border-left: 4px solid #409eff;
         padding-left: 16px;
@@ -52,19 +52,19 @@
         color: #666;
         background-color: #f9f9f9;
       }
-      
+
       pre {
         background-color: #f4f4f4;
         padding: 12px;
         border-radius: 4px;
         overflow-x: auto;
-        
+
         code {
           background-color: transparent;
           padding: 0;
         }
       }
-      
+
       code {
         background-color: #f4f4f4;
         padding: 2px 4px;
@@ -77,7 +77,7 @@
 
 .dialog-footer {
   text-align: right;
-  
+
   .el-button {
     margin-left: 8px;
   }
@@ -88,32 +88,32 @@
   .el-tag {
     margin: 2px;
   }
-  
+
   // 状态标签样式
   .el-tag--success {
     background-color: #f0f9ff;
     border-color: #67c23a;
     color: #67c23a;
   }
-  
+
   .el-tag--warning {
     background-color: #fdf6ec;
     border-color: #e6a23c;
     color: #e6a23c;
   }
-  
+
   .el-tag--danger {
     background-color: #fef0f0;
     border-color: #f56c6c;
     color: #f56c6c;
   }
-  
+
   .el-tag--info {
     background-color: #f4f4f5;
     border-color: #909399;
     color: #909399;
   }
-  
+
   .el-tag--primary {
     background-color: #ecf5ff;
     border-color: #409eff;
@@ -126,14 +126,14 @@
   .detail-content {
     .detail-info {
       padding: 12px;
-      
+
       p {
         font-size: 14px;
       }
     }
-    
+
     .detail-body {
       padding: 12px;
     }
   }
-}
+}

src/views/announcement/index.vue

@@ -7,7 +7,7 @@
             :announcement-id="editAnnouncementId"
             @save-success="handleFormSaveSuccess"
         />
-        
+
         <!-- 公告列表 -->
         <avue-crud
             v-if="!announcementFormVisible"
@@ -29,17 +29,13 @@
             @refresh-change="refreshChange"
             @on-load="onLoad"
         >
-            <template slot="menuLeft">
+            <template slot="menu" slot-scope="{ row, index }">
                 <el-button
-                    type="primary"
+                    type="text"
                     size="small"
                     icon="el-icon-view"
-                    plain
-                    @click="handleDetail"
-                    v-if="selectionList.length === 1"
-                >
-                    查看详情
-                </el-button>
+                    @click="handleDetail(row)"
+                >详情</el-button>
             </template>
 
             <!-- 客户黑名单字段自定义插槽 -->
@@ -92,35 +88,9 @@
         </avue-crud>
 
         <!-- 详情对话框 -->
-        <el-dialog title="公告详情" :visible.sync="detailVisible" width="60%" :close-on-click-modal="false">
+        <el-dialog title="公告详情" :visible.sync="detailVisible" append-to-body width="60%" :close-on-click-modal="false">
             <div class="detail-content" v-if="currentDetail.id">
-                <div class="detail-info">
-                    <p><strong>公告标题：</strong>{{ currentDetail.title }}</p>
-                    <p><strong>分类：</strong>{{ currentDetail.categoryName }}</p>
-                    <p><strong>组织：</strong>{{ currentDetail.orgName }}</p>
-                    <p><strong>创建时间：</strong>{{ currentDetail.createTime }}</p>
-                    <p><strong>可见角色：</strong>
-                        <span v-for="role in parseRolesMask(currentDetail.visibleRoles)" :key="role.value">
-                            <el-tag :type="getRoleTagType(role.value)" size="mini" style="margin-right: 4px;">
-                                {{ role.label }}
-                            </el-tag>
-                        </span>
-                    </p>
-                    <p><strong>状态：</strong>
-                        <el-tag :type="getStatusTagType(currentDetail.status)">
-                            {{ getStatusLabel(currentDetail.status) }}
-                        </el-tag>
-                    </p>
-                    <!-- 显示客户黑名单信息 -->
-                    <p v-if="currentDetail.customerBlacklist && currentDetail.customerBlacklist.length > 0">
-                        <strong>客户黑名单：</strong>
-                        <span v-for="(customer) in currentDetail.customerBlacklist" :key="customer.id">
-                            <el-tag size="mini" style="margin-right: 4px; margin-bottom: 4px;">
-                                {{ getCustomerDisplayName(customer) }}
-                            </el-tag>
-                        </span>
-                    </p>
-                </div>
+                <!-- 仅展示富文本内容 -->
                 <div class="detail-body" v-html="currentDetail.content"></div>
             </div>
             <span slot="footer" class="dialog-footer">

src/views/announcement/mixins/announcementIndex.js

@@ -176,7 +176,7 @@ export default {
                 searchMenuSpan: 6,
                 border: true,
                 index: true,
-                viewBtn: true,
+                viewBtn: false,
                 selection: true,
                 excelBtn: false,
                 columnBtn: false,
@@ -357,7 +357,7 @@ export default {
         permissionList() {
             return {
                 addBtn: true,
-                viewBtn: true,
+                viewBtn: false,
                 delBtn: false,
                 editBtn: true,
             };
@@ -447,21 +447,22 @@ export default {
         },
 
         /**
-         * 查看详情
+         * 查看详情（支持行内操作）
          * @async
          * @this {import('@/views/announcement/types').AnnouncementComponent & import('vue').default}
+         * @param {Partial<NoticeRecord>} [row] - 可选，当前行数据
          * @returns {Promise<void>}
          * @throws {Error} 当获取详情失败时抛出错误
          */
-        async handleDetail() {
-            if (this.selectionList.length !== 1) {
+        async handleDetail(row) {
+            const id = row && row.id ? row.id : (this.selectionList[0] && this.selectionList[0].id);
+            if (!id) {
                 this.$message.warning("请选择一条数据查看详情");
                 return;
             }
 
             try {
-                const response = await getAnnouncement(this.selectionList[0].id);
-
+                const response = await getAnnouncement(id);
                 this.currentDetail = response.data?.data || {};
                 this.detailVisible = true;
             } catch (error) {