74 lines
2.0 KiB
Vue
74 lines
2.0 KiB
Vue
|
<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>
|