动态刷新列表已上线，太吊了
This commit is contained in:
parent
5ba8b2c662
commit
3fa9984464
@ -1,6 +1,11 @@
|
||||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
import { ElTable, ElTableColumn, ElInput, ElButton, ElPagination, ElForm, ElFormItem } from 'element-plus';
|
||||
import {onMounted, ref} from 'vue';
|
||||
import {ElButton, ElForm, ElFormItem, ElInput, ElPagination, ElTable, ElTableColumn} from 'element-plus';
|
||||
import axios from "axios";
|
||||
import {useStore} from "vuex";
|
||||
|
||||
const store = useStore();
|
||||
const token = store.getters['authentication/token']
|
||||
|
||||
const searchTitle = ref('');
|
||||
const searchPath = ref('');
|
||||
@ -8,92 +13,40 @@ const searchAuthor = ref('');
|
||||
const searchSummary = ref('');
|
||||
const sortOrder = ref('');
|
||||
|
||||
const newsData = ref([
|
||||
{
|
||||
title: '【资讯】江苏省软件产品检测中心软件自主创新',
|
||||
author: '江苏省软件产品检测中心',
|
||||
summary: '江苏省软件产品检测中心'
|
||||
},
|
||||
{
|
||||
title: '2023智慧工程-信创（开源）应用竞赛案例赛两个赛道',
|
||||
author: '上海计算机软件技术开发中心',
|
||||
summary: '2023智慧工程-信创（开源）应用竞赛案例赛'
|
||||
},
|
||||
{
|
||||
title: '【政策措施】省政府办公厅印发关于加快工业软件自主创新的通知',
|
||||
author: '江苏省软件产品检测中心',
|
||||
summary: '江苏省软件产品检测中心'
|
||||
},
|
||||
{
|
||||
title: '【政策措施】省政府办公厅印发关于加快工业软件自主创新的通知',
|
||||
author: '江苏省软件产品检测中心',
|
||||
summary: '江苏省软件产品检测中心'
|
||||
},
|
||||
{
|
||||
title: '【政策措施】省政府办公厅印发关于加快工业软件自主创新的通知',
|
||||
author: '江苏省软件产品检测中心',
|
||||
summary: '江苏省软件产品检测中心'
|
||||
},
|
||||
{
|
||||
title: '【政策措施】省政府办公厅印发关于加快工业软件自主创新的通知',
|
||||
author: '江苏省软件产品检测中心',
|
||||
summary: '江苏省软件产品检测中心'
|
||||
},
|
||||
{
|
||||
title: '【政策措施】省政府办公厅印发关于加快工业软件自主创新的通知',
|
||||
author: '江苏省软件产品检测中心',
|
||||
summary: '江苏省软件产品检测中心'
|
||||
},
|
||||
{
|
||||
title: '【政策措施】省政府办公厅印发关于加快工业软件自主创新的通知',
|
||||
author: '江苏省软件产品检测中心',
|
||||
summary: '江苏省软件产品检测中心'
|
||||
},
|
||||
{
|
||||
title: '【政策措施】省政府办公厅印发关于加快工业软件自主创新的通知',
|
||||
author: '江苏省软件产品检测中心',
|
||||
summary: '江苏省软件产品检测中心'
|
||||
},
|
||||
{
|
||||
title: '【政策措施】省政府办公厅印发关于加快工业软件自主创新的通知',
|
||||
author: '江苏省软件产品检测中心',
|
||||
summary: '江苏省软件产品检测中心'
|
||||
}, {
|
||||
title: '【政策措施】省政府办公厅印发关于加快工业软件自主创新的通知',
|
||||
author: '江苏省软件产品检测中心',
|
||||
summary: '江苏省软件产品检测中心'
|
||||
},
|
||||
{
|
||||
title: '【政策措施】省政府办公厅印发关于加快工业软件自主创新的通知',
|
||||
author: '江苏省软件产品检测中心',
|
||||
summary: '江苏省软件产品检测中心'
|
||||
},
|
||||
{
|
||||
title: '【政策措施】省政府办公厅印发关于加快工业软件自主创新的通知',
|
||||
author: '江苏省软件产品检测中心',
|
||||
summary: '江苏省软件产品检测中心'
|
||||
},
|
||||
{
|
||||
title: '【政策措施】省政府办公厅印发关于加快工业软件自主创新的通知',
|
||||
author: '江苏省软件产品检测中心',
|
||||
summary: '江苏省软件产品检测中心'
|
||||
},
|
||||
{
|
||||
title: '【政策措施】省政府办公厅印发关于加快工业软件自主创新的通知',
|
||||
author: '江苏省软件产品检测中心',
|
||||
summary: '江苏省软件产品检测中心'
|
||||
},
|
||||
{
|
||||
title: '【政策措施】省政府办公厅印发关于加快工业软件自主创新的通知',
|
||||
author: '江苏省软件产品检测中心',
|
||||
summary: '江苏省软件产品检测中心'
|
||||
},
|
||||
|
||||
// 更多数据...
|
||||
]);
|
||||
const allNewsData = ref([]);
|
||||
const newsData = ref([]);
|
||||
|
||||
const currentPage = ref(1);
|
||||
const pageSize = ref(10);
|
||||
const newsCount = ref(0);
|
||||
const firstTimeLoad = ref(true);
|
||||
const loadNews = async () => {
|
||||
if (firstTimeLoad.value || allNewsData.value.length < (currentPage.value * pageSize) && (currentPage.value * pageSize) <= newsCount) {
|
||||
console.error(allNewsData.value.length, currentPage.value, pageSize.value, newsCount.value)
|
||||
let params = {
|
||||
token: token,
|
||||
start: allNewsData.value.length,
|
||||
end: allNewsData.value.length + pageSize.value * 2
|
||||
}
|
||||
try {
|
||||
const response = await axios.get('/api/news', {params})
|
||||
const data = response.data
|
||||
newsCount.value = data.newsCount;
|
||||
allNewsData.value.push(...data.newsList);
|
||||
} catch (e) {
|
||||
console.log(e)
|
||||
}
|
||||
firstTimeLoad.value = false;
|
||||
}
|
||||
newsData.value = allNewsData.value.slice((currentPage.value - 1) * pageSize.value, currentPage.value * pageSize.value)
|
||||
console.error((currentPage.value - 1) * pageSize.value, currentPage.value * pageSize.value, newsData.value);
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
loadNews();
|
||||
|
||||
})
|
||||
|
||||
|
||||
const handleSearch = () => {
|
||||
// 搜索逻辑
|
||||
@ -151,7 +104,7 @@ const handleDelete = (index) => {
|
||||
<el-button type="info">导出</el-button>
|
||||
</div>
|
||||
|
||||
<el-table :data="newsData.slice((currentPage - 1) * pageSize, currentPage * pageSize)" style="width: 100%;">
|
||||
<el-table :data="newsData" style="width: 100%;">
|
||||
<el-table-column type="selection" width="55"></el-table-column>
|
||||
<el-table-column prop="title" label="新闻标题" align="center"></el-table-column>
|
||||
<el-table-column prop="author" label="作者" align="center"></el-table-column>
|
||||
@ -166,12 +119,12 @@ const handleDelete = (index) => {
|
||||
|
||||
<div class="pagination-container">
|
||||
<el-pagination
|
||||
@size-change="pageSize = $event"
|
||||
@current-change="currentPage = $event"
|
||||
@size-change="pageSize = $event;loadNews()"
|
||||
@current-change="currentPage = $event;loadNews()"
|
||||
:current-page="currentPage"
|
||||
:page-size="pageSize"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
:total="newsData.length"
|
||||
:total="newsCount"
|
||||
:page-sizes="[10, 20, 50, 100]"
|
||||
>
|
||||
</el-pagination>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user