修改国家政策页面添加分页 新建表格假数据

src/views/AAAFont/nationalPolicy/index.vue

@@ -41,7 +41,7 @@
                           </template>
                           <template #default>
                             <div class="right-li-wrapper">
-                              <div class="right-li right-li-first" @click="handleClick">
+                              <div class="right-li" @click="handleClick">
                                 <div class="li-left">
                                   <el-tag type="danger" style="font-size: 14px">国家政策</el-tag>
                                 </div>
@@ -243,7 +243,7 @@
                                   <span>2024-11-15</span>
                                 </div>
                               </div>
-                              <div class="right-li right-li-first">
+                              <div class="right-li" @click="handleClick">
                                 <div class="li-left">
                                   <el-tag style="font-size: 14px">行业新闻</el-tag>
                                 </div>
@@ -252,7 +252,7 @@
                                 >
                                 <div class="li-right"><span>2024-12-17</span></div>
                               </div>
-                              <div class="right-li">
+                              <div class="right-li" @click="handleClick">
                                 <div class="li-left">
                                   <el-tag style="font-size: 14px">行业新闻</el-tag>
                                 </div>
@@ -261,7 +261,7 @@
                                 >
                                 <div class="li-right"><span>2024-12-17</span></div>
                               </div>
-                              <div class="right-li">
+                              <div class="right-li" @click="handleClick">
                                 <div class="li-left">
                                   <el-tag style="font-size: 14px">行业新闻</el-tag>
                                 </div>
@@ -272,7 +272,7 @@
                                 </div>
                                 <div class="li-right"><span>2024-12-17</span></div>
                               </div>
-                              <div class="right-li">
+                              <div class="right-li" @click="handleClick">
                                 <div class="li-left">
                                   <el-tag style="font-size: 14px">行业新闻</el-tag>
                                 </div>
@@ -283,7 +283,7 @@
                                   <span>2024-11-20</span>
                                 </div>
                               </div>
-                              <div class="right-li">
+                              <div class="right-li" @click="handleClick">
                                 <div class="li-left">
                                   <el-tag style="font-size: 14px">行业新闻</el-tag>
                                 </div>
@@ -294,7 +294,7 @@
                                   <span>2024-12-15</span>
                                 </div>
                               </div>
-                              <div class="right-li">
+                              <div class="right-li" @click="handleClick">
                                 <div class="li-left">
                                   <el-tag style="font-size: 14px">行业新闻</el-tag>
                                 </div>
@@ -305,7 +305,7 @@
                                   <span>2024-11-25</span>
                                 </div>
                               </div>
-                              <div class="right-li">
+                              <div class="right-li" @click="handleClick">
                                 <div class="li-left">
                                   <el-tag style="font-size: 14px">行业新闻</el-tag>
                                 </div>
@@ -316,7 +316,7 @@
                                   <span>2024-12-10</span>
                                 </div>
                               </div>
-                              <div class="right-li">
+                              <div class="right-li" @click="handleClick">
                                 <div class="li-left">
                                   <el-tag style="font-size: 14px">行业新闻</el-tag>
                                 </div>
@@ -534,7 +534,8 @@
                                   <span>2024-11-15</span>
                                 </div>
                               </div>
-                            </div>
+                              /></div
+                            >
                           </template>
                         </el-tab-pane>
                         <el-tab-pane name="third">
@@ -626,6 +627,13 @@
                             </div></template
                           >
                         </el-tab-pane>
+                        <Pagination
+                          v-model:current="current"
+                          :total="50"
+                          show-less-items
+                          :show-total="(total) => `共计 ${total} 条`"
+                          style="transform: translateY(-50%)"
+                        />
                       </el-tabs>
                     </div>
                   </div>
@@ -657,6 +665,10 @@
   import Icon from '@/components/Icon/Icon.vue';
   import { getToken } from '@/utils/auth';
   import { useRouter, onBeforeRouteLeave } from 'vue-router';
+  import { Pagination, Table } from 'ant-design-vue';
+  import { tableData } from './mock';
+  import { BasicTable, useTable, TableAction } from '@/components/Table';
+  import { columns } from './tableSchema';
 
   const fileType = ref(''); // 文件下载后缀
   const choseFile = ref({}); // 选择文件对象
@@ -672,6 +684,7 @@
   const noticePicture2 = ref({}); // 通知公告图片
   const isShowDown = ref(true); // 是否显示下载按钮
   const activeName1 = ref('first');
+  const current = ref(1);
   const downloadEntity = ref({
     // 下载实体
     // 名称需要带文件类型，要不然默认为txt
@@ -679,6 +692,26 @@
     fileAddress: '/profile/attachments/project-recommendation-summary.xlsx',
   });
 
+  const [registerTabletab2, { getRowSelection }] = useTable({
+    api: async () => {
+      const response = {
+        pageNu: '1',
+        pageSize: '5',
+        pages: '1',
+        total: tableData.length,
+        code: '',
+        message: '',
+        data: tableData,
+      };
+      return { ...response };
+    },
+    scroll: { y: 300 },
+    rowKey: 'businessId',
+    columns: columns,
+    showTableSetting: false,
+    showIndexColumn: false,
+    bordered: false,
+  });
   document.querySelectorAll('.right-li').forEach((element) => {
     element.addEventListener('click', () => {
       console.log('click');
@@ -1652,7 +1685,8 @@
   }
 
   .right-li-wrapper {
-    height: 670px;
+    height: 640px;
+    margin: 0 0 30px;
     overflow-y: scroll;
   }
 
@@ -1660,7 +1694,7 @@
     display: flex;
     justify-content: space-between;
     margin: 30px 20px 20px 0;
-    font-size: 18px;
+    font-size: 14px;
     cursor: pointer; /* 添加鼠标指针样式 */
   }
 

src/views/AAAFont/nationalPolicy/mock.ts

+import { getAllRoleList } from '@/api/system/role/role';
+import { BasicColumn, FormSchema } from '@/components/Table';
+import { h } from 'vue';
+import { Tag, Switch } from 'ant-design-vue';
+import { useMessage } from '@/hooks/web/useMessage';
+import { changeFlagApi } from '@/api/system/user/user';
+
+export const tableData: any[] = [
+  {
+    date: '2024-12-17',
+    title: '“数据知识产权登记平台”公示公告',
+    tag: '国家政策',
+  },
+  {
+    date: '2024-12-17',
+    title: '《数据安全负面行为清单》（评审版）',
+    tag: '国家政策',
+  },
+  {
+    date: '2024-12-17',
+    title: '《中国数安港数据安全合规管理委员会工作规程》',
+    tag: '国家政策',
+  },
+  // ...
+];

src/views/AAAFont/nationalPolicy/tableSchema.ts

+import { getAllRoleList } from '@/api/system/role/role';
+import { BasicColumn, FormSchema } from '@/components/Table';
+import { h } from 'vue';
+import { Tag, Switch } from 'ant-design-vue';
+import { useMessage } from '@/hooks/web/useMessage';
+import { changeFlagApi } from '@/api/system/user/user';
+import { Column, Row } from 'vxe-pc-ui';
+
+export const columns: BasicColumn[] = [
+  {
+    title: '政策类型',
+    dataIndex: 'tag',
+    width: 200,
+  },
+  {
+    title: '标题',
+    dataIndex: 'title',
+    width: 900,
+  },
+  {
+    title: '发布日期',
+    dataIndex: 'date',
+    width: 200,
+  },
+];