通知和代办添加数据及展示效果

src/layouts/default/header/components/notify/data.ts

@@ -39,3 +39,18 @@ export const tabListData: TabItem[] = [
     list: [],
   },
 ];
+export const toDoDate = [
+  { id: 1,  title: '您收到一条新的线索:北于村 疑似简易棚房', datetime: '2024-09-23 10:39:03',},
+  { id: 2,  title: '您收到一条新的线索:大唐庄村 疑似碾压踩踏', datetime: '2024-09-23 10:39:03',},
+  { id: 3,  title: '您收到一条新的线索:吉乐庄村 疑似取土采挖', datetime: '2024-09-23 10:27:31',},
+  { id: 4,  title: '您收到一条新的线索:福埠庄村 疑似碾压踩踏', datetime: '2024-09-23 10:27:31',},
+  { id: 5,  title: '您收到一条新的线索:大唐庄村 疑似碾压踩踏', datetime: '2024-09-23 10:25:06',},
+  { id: 6,  title: '您收到一条新的线索:东石桥村 疑似新增建筑', datetime: '2024-09-23 10:24:55',},
+  { id: 7,  title: '您收到一条新的线索:石灰埠村 疑似光伏用地', datetime: '2024-09-23 10:24:03',},
+  { id: 8,  title: '您收到一条新的线索:华城村 疑似取土采挖', datetime: '2024-09-23 10:22:55'},
+]
+export const updateDate = [
+  { id: 1,  title: '自然资源监管平台6月07日更新公告', datetime: '2025-06-07 10:39:03',
+    content:'1.手机端非法采矿专题新增地图和全部功能模块\n2.电脑端非法采矿专题新增数据列表功能\n3.手机端违法用地专题图斑来源筛选优化\n4.电脑端新增"图斑持续监管"功能模块，实现对指定图斑的全周期动态监测与智能化管理。\n5.电脑端矿产专题优化矿产图斑导出功能，新增审核全要素信息导出'
+  },
+]

src/layouts/default/header/components/notify/index.vue

@@ -5,6 +5,7 @@
       title=""
       trigger="click"
       :overlayClassName="`${prefixCls}__overlay`"
+      :overlayStyle="{ width: '360px' }"
     >
       <Badge :count="count" dot :numberStyle="numberStyle">
         <BellOutlined />
@@ -19,7 +20,7 @@
               </template>
               <!-- 绑定title-click事件的通知列表中标题是“可点击”的-->
               <NoticeList :list="item.list" v-if="item.key === '1'" @title-click="onNoticeClick" />
-              <NoticeList :list="item.list" v-else />
+              <NoticeList :list="item.list" v-else  @title-click="onNoticeClick"/>
             </Tabs.TabPane>
           </template>
         </Tabs>
@@ -110,7 +111,7 @@
     FileSearchOutlined,
     StarFilled,
   } from '@ant-design/icons-vue';
-  import { tabListData } from './data';
+  import { tabListData, toDoDate, updateDate } from './data';
   import { useDesign } from '@/hooks/web/useDesign';
   import { useMessage } from '@/hooks/web/useMessage';
   import { getLastList, readMsg, getInfoByContentId } from '@/api/demo/message';
@@ -189,7 +190,16 @@
           },
         });
       }
-    } else {
+    } else if(record.content) {
+      openLookModal(true, {
+        record: {
+          content: record.title,
+          createDate: record.datetime,
+          isRead: 0,
+          contentInfo: record.content
+        },
+      });
+    }else {
       openLookModal(true, {
         record: {
           content: record.title,
@@ -220,7 +230,9 @@
           });
         }
       });
-      listData.value[0].list = arr;
+      // listData.value[0].list = arr;
+      listData.value[1].list = updateDate;
+      listData.value[2].list = toDoDate;
     }
   }
 

src/views/demo/message/msg/DetailModal.vue

@@ -20,6 +20,19 @@
     setModalProps({ confirmLoading: false });
     console.log(data);
     mockData.value = data.record;
+    if(data.record?.contentInfo){
+      schema.push({
+        field: 'contentInfo',
+        label: '内容',
+        render: (val) => {
+          return h(
+            'div',
+            { style: { whiteSpace: 'pre-line' } },
+            val || ''
+          );
+        },
+      })
+    }
   });
   const schema: DescItem[] = [
     {