邀请通知列表

src/views/Jyh/PersonalCenter/Detail/InvitationNoticeList.vue

@@ -0,0 +1,74 @@
+<template>
+  <div class="invitation-notice-container">
+    <Card simple class="jyh-card mt-3">
+      <div class="card-title">邀请通知列表</div>
+      <div class="mb-3">
+        <d-table
+          class="jyh-table jyh-table-2"
+          :header-bg="true"
+          :data="noticeTableData"
+        >
+          <d-column field="content" header="邀请内容"></d-column>
+          <d-column field="time" header="邀请时间" width="200"></d-column>
+          <d-column field="creator" header="邀请人" width="180"></d-column>
+          <d-column header="操作" width="150">
+            <template #default="scope">
+              <d-button
+                variant="text"
+                color="primary"
+                class="mr-2"
+              >
+                接收
+              </d-button>
+              <d-button
+                variant="text"
+                color="primary"
+              >
+                拒绝
+              </d-button>
+            </template>
+          </d-column>
+        </d-table>
+        <div class="invitation-pagination">
+          <d-pagination
+            style="display: inline-flex;"
+            :total="pager.total"
+            v-model:pageSize="pager.pageSize"
+            v-model:pageIndex="pager.pageIndex"
+            :can-view-total="true"
+            :can-change-page-size="true"
+            :can-jump-page="true"
+            :max-items="5"
+          />
+        </div>
+      </div>
+    </Card>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, shallowReactive } from 'vue';
+
+const noticeTableData = ref([
+  {
+    content: '当您订阅的软件有漏洞预警通知时，将以应用号的方式通知。可在首页查看或取消订阅！',
+    time: '2025-03-15 17:29:30',
+    creator: '132456798',
+  }
+]);
+const pager = shallowReactive({
+  total: 1,
+  pageIndex: 1,
+  pageSize: 10,
+  pageSizeOptions: [10, 20, 30, 40, 50],
+});
+</script>
+
+<style lang="scss" scoped>
+.invitation-notice-container {
+  .invitation-pagination {
+    padding: 12px 0;
+    text-align: right;
+  }
+}
+</style>

src/views/Jyh/PersonalCenter/index.vue

@@ -23,6 +23,7 @@
           <d-tab id="yjtzlb" title="预警通知列表"></d-tab>
           <d-tab id="dylb" title="订阅列表"></d-tab>
           <d-tab id="organizationManage" title="组织管理"></d-tab>
+          <d-tab id="invitation" title="邀请通知"></d-tab>
         </d-tabs>
       </div>
     </div>
@@ -30,6 +31,7 @@
       <early-warning v-if="selectTab==='yjtzlb'"/>
       <subscribe-list v-if="selectTab==='dylb'"/>
       <OrganizationManage v-if="selectTab === 'organizationManage'" />
+      <InvitationNoticeList v-if="selectTab === 'invitation'" />
     </div>
   </div>
 </template>
@@ -41,6 +43,7 @@ import { getOrgInfo } from '@/views/Org/hooks/orgInfo';
 import EarlyWarning from './Detail/EarlyWarning.vue';
 import SubscribeList from './Detail/SubscribeList.vue';
 import OrganizationManage from './OrganizationManage/OrganizationManage.vue';
+import InvitationNoticeList from './Detail/InvitationNoticeList.vue';
 
 const { namespace } = getOrgInfo();
 const avatarUrl = '/src/assets/imgs/avatar/male.png';