绘制了新闻列表界面
This commit is contained in:
parent
88349683e7
commit
38563e7ee3
@ -1,9 +1,9 @@
|
|||||||
// import NewsList from '../views/news-management/NewsList.vue'
|
import NewsList from '../views/news-management/NewsList.vue'
|
||||||
// import NewsDetail from '../views/news-management/NewsDetail.vue'
|
// import NewsDetail from '../views/news-management/NewsDetail.vue'
|
||||||
// import NewsEdit from '../views/news-management/NewsEdit.vue'
|
// import NewsEdit from '../views/news-management/NewsEdit.vue'
|
||||||
|
|
||||||
export default [
|
export default [
|
||||||
// { path: '/news', component: NewsList },
|
{ path: '/news', component: NewsList },
|
||||||
// { path: '/news/:id', component: NewsDetail },
|
// { path: '/news/:id', component: NewsDetail },
|
||||||
// { path: '/news/:id/edit', component: NewsEdit }
|
// { path: '/news/:id/edit', component: NewsEdit }
|
||||||
]
|
]
|
||||||
|
|||||||
210
src/views/news-management/NewsList.vue
Normal file
210
src/views/news-management/NewsList.vue
Normal file
@ -0,0 +1,210 @@
|
|||||||
|
<script setup>
|
||||||
|
import { ref } from 'vue';
|
||||||
|
import { ElTable, ElTableColumn, ElInput, ElButton, ElPagination, ElForm, ElFormItem } from 'element-plus';
|
||||||
|
|
||||||
|
const searchTitle = ref('');
|
||||||
|
const searchPath = ref('');
|
||||||
|
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 currentPage = ref(1);
|
||||||
|
const pageSize = ref(10);
|
||||||
|
|
||||||
|
const handleSearch = () => {
|
||||||
|
// 搜索逻辑
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleReset = () => {
|
||||||
|
searchTitle.value = '';
|
||||||
|
searchPath.value = '';
|
||||||
|
searchAuthor.value = '';
|
||||||
|
searchSummary.value = '';
|
||||||
|
sortOrder.value = '';
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleEdit = (index) => {
|
||||||
|
// 编辑逻辑
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleDelete = (index) => {
|
||||||
|
// 删除逻辑
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div class="container">
|
||||||
|
<div class="search-container">
|
||||||
|
<el-form inline>
|
||||||
|
<el-form-item label="新闻标题">
|
||||||
|
<el-input v-model="searchTitle" placeholder="请输入标题"/>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="新闻图片路径">
|
||||||
|
<el-input v-model="searchPath" placeholder="请输入路径"/>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="排序">
|
||||||
|
<el-input v-model="sortOrder" placeholder="请输入排序"/>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="作者">
|
||||||
|
<el-input v-model="searchAuthor" placeholder="请输入作者"/>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="新闻简介">
|
||||||
|
<el-input v-model="searchSummary" placeholder="请输入简介"/>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item>
|
||||||
|
<el-button type="primary" @click="handleSearch">搜索</el-button>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item>
|
||||||
|
<el-button @click="handleReset">重置</el-button>
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="button-container">
|
||||||
|
<el-button type="success">新增</el-button>
|
||||||
|
<el-button type="warning">修改</el-button>
|
||||||
|
<el-button type="danger">删除</el-button>
|
||||||
|
<el-button type="info">导出</el-button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<el-table :data="newsData.slice((currentPage - 1) * pageSize, currentPage * pageSize)" 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>
|
||||||
|
<el-table-column prop="summary" label="新闻简介" align="center"></el-table-column>
|
||||||
|
<el-table-column label="操作" align="center">
|
||||||
|
<template #default="scope">
|
||||||
|
<el-button @click="handleEdit(scope.$index)" type="text">修改</el-button>
|
||||||
|
<el-button @click="handleDelete(scope.$index)" type="text">删除</el-button>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
</el-table>
|
||||||
|
|
||||||
|
<div class="pagination-container">
|
||||||
|
<el-pagination
|
||||||
|
@size-change="pageSize = $event"
|
||||||
|
@current-change="currentPage = $event"
|
||||||
|
:current-page="currentPage"
|
||||||
|
:page-size="pageSize"
|
||||||
|
layout="total, sizes, prev, pager, next, jumper"
|
||||||
|
:total="newsData.length"
|
||||||
|
:page-sizes="[10, 20, 50, 100]"
|
||||||
|
>
|
||||||
|
</el-pagination>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.container {
|
||||||
|
padding: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.search-container {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: 5px;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
//width: 80%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.button-container {
|
||||||
|
display: flex;
|
||||||
|
gap: 10px;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-table {
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pagination-container {
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-end;
|
||||||
|
margin-top: 20px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Loading…
Reference in New Issue
Block a user