RyanGoodwill/frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

新闻列表页面半成品，搜索待完成。

Browse Source 
上方4按钮待完成。
权限问题。。。
This commit is contained in:
高子兴 2024-07-04 18:02:06 +08:00
parent a1aee89ae7
commit f8c0d1066d
1 changed files with 43 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

55
src/views/news-management/NewsList.vue
View File

@ -1,8 +1,12 @@
<script setup>
import {onMounted, ref} from 'vue';
import {ElButton, ElForm, ElFormItem, ElInput, ElPagination, ElTable, ElTableColumn} from 'element-plus';
import {ElButton, ElForm, ElFormItem, ElInput, ElMessage, ElPagination, ElTable, ElTableColumn} from 'element-plus';
import axios from "axios";
import {useStore} from "vuex";
import {useRouter} from "vue-router";
import EditNews from "@views/news-management/EditNews.vue";
const router = useRouter();
const store = useStore();
const token = store.getters['authentication/token']
@ -20,9 +24,11 @@ const currentPage = ref(1);
const pageSize = ref(10);
const newsCount = ref(0);
const firstTimeLoad = ref(true);
const selections = ref([]);
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)
// console.error(allNewsData.value.length, currentPage.value, pageSize.value, newsCount.value)
let params = {
token: token,
start: allNewsData.value.length,
@ -39,7 +45,7 @@ const loadNews = async () => {
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);
// console.error((currentPage.value - 1) * pageSize.value, currentPage.value * pageSize.value, newsData.value);
};
onMounted(() => {
@ -60,13 +66,37 @@ const handleReset = () => {
sortOrder.value = '';
};
const handleEdit = (index) => {
// 编辑逻辑
const handleEditButton = () => {
//读取每一个selection中的选项id并新建标签页分别跳转打开编辑页面
selections.value.forEach(selection => {
// TODO：待修改
router.push({name: 'EditNews', params: {id: selection.id}})
})
};
const handleDelete = (index) => {
const handleDeleteButton = () => {
// 删除逻辑
};
const handleSelectionChange = (newSelections) => {
selections.value = newSelections
}
const handleEditInTable = (index) => {
router.push({name: 'editNews', query: {mode: 'edit', id: newsData.value[index].id}})
};
const handleDeleteInTable = async (index) => {
try {
await axios.delete(`/api/news/${newsData.value[index].id}`, {params: {token: token,}})
newsData.value.splice(index, 1);
allNewsData.value.splice(index, 1);
newsCount.value--;
} catch (e) {
ElMessage.error('删除失败')
console.error(e)
}
};
</script>
<template>
@ -98,21 +128,22 @@ const handleDelete = (index) => {
</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="success" @click="router.push('/news/edit?mode=create')">新增</el-button>
<el-button type="warning" @click="handleEditButton">修改</el-button>
<el-button type="danger" @click="handleDeleteButton">删除</el-button>
<el-button type="info">导出</el-button>
</div>
<el-table :data="newsData" style="width: 100%;">
<el-table :data="newsData" style="width: 100%;"
@selection-change="handleSelectionChange">
<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>
<el-button @click="handleEditInTable(scope.$index)" type="text">修改</el-button>
<el-button @click="handleDeleteInTable(scope.$index)" type="text">删除</el-button>
</template>
</el-table-column>
</el-table>