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

完成了页面嵌入适配，列表上方的创建、修改、删除

Browse Source 
NewsList和EditNews之间的数据传递
完全是巨大的工程
This commit is contained in:
高子兴 2024-07-05 02:19:53 +08:00
parent 6e725128ea
commit 769254498f
2 changed files with 169 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

89
src/views/news-management/EditNews.vue
View File

@ -1,5 +1,5 @@
<script setup>
import {onMounted, ref} from 'vue';
import {defineEmits, defineProps, onMounted, ref} from 'vue';
import {
ElButton,
ElForm,
@ -66,6 +66,7 @@ const form = ref({
imagePath: ''
});
const createMode = ref(false);
const componentMode = ref(false);
const modeTitle = ref('');
const fileList = ref([]); // 用于存储上传文件的列表
@ -73,6 +74,22 @@ const basePath = '/api/news'
const uploadUrl = basePath + '/uploadPic'; // 上传的后端地址
const dialogImageUrl = ref('');
const dialogVisible = ref(false); // 用于图片放大预览
const props = defineProps({
mode: {
type: String,
required: false
},
id: {
type: String,
required: false
}
});
const containerStyle = ref('form-container')
const emit = defineEmits(['setNewsDialogInvisible']);
const setNewsDialogInvisible = (changed) => {
emit('setNewsDialogInvisible', changed);
};
//下面是编辑模式需要的一些变量
const id = ref('');
@ -121,8 +138,7 @@ const handleRemove = (file) => {
const handleCommit = async () => {
// 判断form中的每一个字段都不为空字符串且不为null
if (form.value.title === '' || form.value.author === '' || form.value.content === '' || form.value.summary === '' || form.value.tenant === '')
{
if (form.value.title === '' || form.value.author === '' || form.value.content === '' || form.value.summary === '' || form.value.tenant === '') {
await ElMessageBox.alert('请填写完整信息！');
return;
}
@ -135,7 +151,12 @@ const handleCommit = async () => {
try {
const response = await axios.post(basePath, form.value);
ElMessage.success('添加成功！');
router.push('/news');
if (componentMode){
setNewsDialogInvisible(true);
}
else{
router.push('/news');
}
} catch (e) {
await ElMessageBox.alert(e.response.data.message);
}
@ -143,7 +164,12 @@ const handleCommit = async () => {
try {
const response = await axios.put(`${basePath}/${id.value}`, form.value);
ElMessage.success('修改成功！');
router.push('/news');
if (componentMode){
setNewsDialogInvisible(true);
}
else{
router.push('/news');
}
} catch (e) {
await ElMessageBox.alert(e.response.data.message);
}
@ -151,6 +177,15 @@ const handleCommit = async () => {
}
};
const handleCancel = () => {
if (componentMode){
setNewsDialogInvisible(false);
}
else{
router.push('/news');
}
};
const isLayoutReady = ref(false);
const config = ref(null); // CKEditor needs the DOM tree before calculating the configuration.
const editor = ClassicEditor;
@ -172,11 +207,24 @@ const fetchNewsDetail = async () => {
onMounted(() => {
token.value = store.getters['authentication/token'];
form.value.token = token.value;
if (route.query.mode === 'create' || route.params.mode === 'create') {
if (props.mode !== undefined){
componentMode.value = true;
containerStyle.value = 'form-container-component'
if (props.mode === 'create'){
createMode.value = true;
modeTitle.value = '添加资讯';
}
else if (props.mode === 'edit'){
createMode.value = false;
id.value = props.id;
modeTitle.value = '修改资讯';
fetchNewsDetail();
}
}
else if (route.query.mode === 'create' || route.params.mode === 'create') {
createMode.value = true;
modeTitle.value = '添加资讯';
}
if (route.query.mode === 'edit' || route.params.mode === 'edit') {
} else if (route.query.mode === 'edit' || route.params.mode === 'edit') {
id.value = route.params.id === undefined ? route.query.id : route.params.id;
createMode.value = false;
modeTitle.value = '修改资讯';
@ -373,11 +421,11 @@ onMounted(() => {
</script>
<template>
<div class="form-container">
<div :class="containerStyle">
<ElForm :model="form" label-width="120px" @submit.prevent="handleCommit">
<h2>{{ modeTitle }}</h2>
<ElFormItem label="新闻标题" required>
<ElInput v-model="form.title" placeholder="请输入新闻标题" required></ElInput>
<ElInput v-model="form.title" placeholder="请输入新闻标题" required></ElInput>
</ElFormItem>
<ElFormItem label="新闻图片路径" required>
<el-upload
@ -448,7 +496,7 @@ onMounted(() => {
</ElFormItem>
<ElFormItem>
<ElButton type="primary" native-type="submit">确定</ElButton>
<ElButton @click="router.push('/news')">取消</ElButton>
<ElButton @click="handleCancel">取消</ElButton>
</ElFormItem>
</ElForm>
</div>
@ -524,4 +572,23 @@ onMounted(() => {
max-width: 100%;
width: auto; /* 使宽度根据内容调整 */
}
.form-container-component {
display: flex;
justify-content: center;
align-items: center;
height: auto;
background: white;
overflow-y: auto; /* 使容器在内容溢出时出现滚动条 */
}
.form-container-component .el-form {
background: white;
padding: 2rem;
width: 100%;
height: 100%;
max-height: 90vh; /* 确保表单不会超过视口高度 */
overflow-y: auto; /* 使表单在内容溢出时出现滚动条 */
}
</style>

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

@ -1,9 +1,20 @@
<script setup>
import {onMounted, ref} from 'vue';
import {ElButton, ElForm, ElFormItem, ElInput, ElMessage, ElPagination, ElTable, ElTableColumn} from 'element-plus';
import {
ElButton,
ElForm,
ElFormItem,
ElInput,
ElMessage,
ElMessageBox,
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();
@ -25,6 +36,10 @@ const newsCount = ref(0);
const firstTimeLoad = ref(true);
const selections = ref([]);
const editNewsDialogVisible = ref(false);
const editNewsDialogMode = ref('create');
const editId = 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)
@ -38,6 +53,7 @@ const loadNews = async () => {
const data = response.data
newsCount.value = data.newsCount;
allNewsData.value.push(...data.newsList);
ElMessage.success('列表已刷新');
} catch (e) {
console.log(e)
}
@ -65,7 +81,18 @@ const handleReset = () => {
sortOrder.value = '';
};
const handleCreateButton = () => {
editNewsDialogMode.value = 'create'
openEditNewsDialog()
};
const handleEditButton = () => {
if (selections.value.length === 1) {
editNewsDialogMode.value = 'edit'
editId.value = selections.value[0].id
openEditNewsDialog()
return
}
//读取每一个selection中的选项id并新建标签页分别跳转打开编辑页面
selections.value.forEach(selection => {
const url = router.resolve({name: 'editNews', query: {mode: 'edit', id: selection.id}}).href;
@ -73,16 +100,48 @@ const handleEditButton = () => {
});
};
// 删除按钮的处理方法
const handleDeleteButton = () => {
// 删除逻辑
if (selections.value.length === 0) {
ElMessage.warning('请选择要删除的资讯');
return;
}
ElMessageBox.confirm(
`你是否确认要删除<span style="color: red; ">${selections.value.length}</span>条资讯`,
'警告',
{
confirmButtonText: '确认',
cancelButtonText: '取消',
type: 'warning',
dangerouslyUseHTMLString: true
}
).then(async () => {
try {
for (const selection of selections.value) {
await axios.delete(`/api/news/${selection.id}`, {params: {token: token}});
}
ElMessage.success('删除成功');
// 刷新列表
await refreshNewsList()
} catch (e) {
ElMessage.error('删除失败');
console.error(e);
}
}).catch(() => {
ElMessage.info('已取消删除');
});
};
const handleSelectionChange = (newSelections) => {
selections.value = newSelections
}
const handleEditInTable = (index) => {
router.push({name: 'editNews', query: {mode: 'edit', id: newsData.value[index].id}})
const handleEditInTable = async (index) => {
// router.push({name: 'editNews', query: {mode: 'edit', id: newsData.value[index].id}})
editNewsDialogMode.value = 'edit'
editId.value = newsData.value[index].id
openEditNewsDialog()
};
const handleDeleteInTable = async (index) => {
@ -96,6 +155,25 @@ const handleDeleteInTable = async (index) => {
console.error(e)
}
};
const refreshNewsList = async () => {
newsData.value = [];
allNewsData.value = [];
newsCount.value = 0;
currentPage.value = 1;
firstTimeLoad.value = true;
await loadNews();
};
const openEditNewsDialog = () => {
editNewsDialogVisible.value = true;
};
const setNewsDialogInvisible = (changed) => {
editNewsDialogVisible.value = false;
if (changed){
refreshNewsList();
}
}
</script>
<template>
@ -127,7 +205,7 @@ const handleDeleteInTable = async (index) => {
</div>
<div class="button-container">
<el-button type="success" @click="router.push('/news/edit?mode=create')">新增</el-button>
<el-button type="success" @click="handleCreateButton">新增</el-button>
<el-button type="warning" @click="handleEditButton">修改</el-button>
<el-button type="danger" @click="handleDeleteButton">删除</el-button>
<el-button type="info">导出</el-button>
@ -160,6 +238,14 @@ const handleDeleteInTable = async (index) => {
</el-pagination>
</div>
</div>
<el-dialog
v-model="editNewsDialogVisible"
width="60%"
top="8vh"
destroy-on-close
>
<EditNews :mode="editNewsDialogMode" :id="editId" @setNewsDialogInvisible="setNewsDialogInvisible"/>
</el-dialog>
</template>
<style scoped>