绘制了新闻列表界面
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 NewsEdit from '../views/news-management/NewsEdit.vue'
|
||||
|
||||
export default [
|
||||
// { path: '/news', component: NewsList },
|
||||
{ path: '/news', component: NewsList },
|
||||
// { path: '/news/:id', component: NewsDetail },
|
||||
// { 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