|
|
|
|
@ -2,37 +2,78 @@ |
|
|
|
|
<div class="header_title"> |
|
|
|
|
<span>资讯</span> |
|
|
|
|
</div> |
|
|
|
|
<div> |
|
|
|
|
<el-card shadow="always"> |
|
|
|
|
<div class="header-flex-container"> |
|
|
|
|
<div class="common-layout"> |
|
|
|
|
<el-container> |
|
|
|
|
<el-aside> |
|
|
|
|
<div> |
|
|
|
|
<el-button class="button-container_column" name="editColumnButton" @click="editHandle" round>栏目管理</el-button> |
|
|
|
|
</div> |
|
|
|
|
<div class="header-flex-container"> |
|
|
|
|
|
|
|
|
|
<ul class="header-list"> |
|
|
|
|
<li v-for="item in column"> |
|
|
|
|
<el-dropdown placement="bottom"> |
|
|
|
|
<span @mouseenter="EssayList(item.id)">{{ item.categoryName }}</span> <!-- 使用span代替p --> |
|
|
|
|
<el-dropdown placement="right"> |
|
|
|
|
<div class="header-column" type="primary"> |
|
|
|
|
<span @mouseenter="EssayList(item.id)">{{ item.categoryName }}</span> <!-- 使用span代替p --> |
|
|
|
|
</div> |
|
|
|
|
<!--当前栏目新闻管理--> |
|
|
|
|
<template #dropdown> |
|
|
|
|
<el-dropdown-menu> |
|
|
|
|
<el-dropdown-item> |
|
|
|
|
<ul> |
|
|
|
|
<li class="flex-container" @click="newViews(listObject)" v-for="listObject in essay" style="margin-bottom: 15px"> |
|
|
|
|
<ul> |
|
|
|
|
<li class="flex-container" @click="newViews(listObject)" v-for="listObject in essay" style="margin-bottom: 15px"> |
|
|
|
|
<el-tag type="info" size="large" style="height: 30px;font-size: 15px"> |
|
|
|
|
<p >{{listObject.title}}</p> |
|
|
|
|
<el-button type="danger" @click.stop="deleteNewsList(listObject.id)" round>删除</el-button> |
|
|
|
|
<el-button type="primary" @click.stop="editNewsDialogFormVisible = true; newViews(listObject)" round>编辑</el-button> |
|
|
|
|
</li> |
|
|
|
|
</ul> |
|
|
|
|
</el-tag> |
|
|
|
|
<div class="button-container"> |
|
|
|
|
<el-button type="danger" @click.stop="deleteNewsList(listObject.id)" round plain>删除</el-button> |
|
|
|
|
<el-button type="primary" @click.stop="editNewsDialogFormVisible = true; newViews(listObject)" round plain>编辑</el-button> |
|
|
|
|
</div> |
|
|
|
|
</li> |
|
|
|
|
</ul> |
|
|
|
|
</el-dropdown-item> |
|
|
|
|
<div class="add-news-button"> |
|
|
|
|
<el-button @click="addNewsDialogFormVisibleButton(item.id)" type="primary" plain round>添加当前栏目新闻</el-button> |
|
|
|
|
<el-button @click="addNewsDialogFormVisibleButton(item.id)" type="success" style="margin-bottom: 10px" plain round>添加当前栏目新闻</el-button> |
|
|
|
|
</div> |
|
|
|
|
</el-dropdown-menu> |
|
|
|
|
</template> |
|
|
|
|
</el-dropdown> |
|
|
|
|
</li> |
|
|
|
|
</ul> |
|
|
|
|
<div> |
|
|
|
|
<el-button name="editColumnButton" @click="editHandle" round>栏目管理</el-button> |
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
</div> |
|
|
|
|
</el-card> |
|
|
|
|
|
|
|
|
|
</el-aside> |
|
|
|
|
<!-- 新闻内容--> |
|
|
|
|
<el-main> |
|
|
|
|
<div class="mainContainer"> |
|
|
|
|
<div class="card-header"> |
|
|
|
|
<el-card shadow="hover"> |
|
|
|
|
<div style="height:33px"> |
|
|
|
|
<span class="contentTitle">{{nowTimeNewsData.title}}</span> |
|
|
|
|
</div> |
|
|
|
|
</el-card> |
|
|
|
|
<el-card shadow="hover"> |
|
|
|
|
<div class="news-flex-container"> |
|
|
|
|
<p>发布人：{{ nowTimeNewsData.userId }}</p> |
|
|
|
|
<p>阅读数量：{{ nowTimeNewsData.readingNumber }}</p> |
|
|
|
|
<p>发布日期：{{ nowTimeNewsData.publishTime }}</p> |
|
|
|
|
<p>更新时间：{{nowTimeNewsData.updateTime}}</p> |
|
|
|
|
</div> |
|
|
|
|
</el-card> |
|
|
|
|
</div> |
|
|
|
|
<div style="text-align: center"> |
|
|
|
|
<el-scrollbar class="scrollbarContent"> |
|
|
|
|
<span>{{ nowTimeNewsData.content }}</span> |
|
|
|
|
<!-- <p>{{ nowTimeNewsData.content }}</p>--> |
|
|
|
|
</el-scrollbar> |
|
|
|
|
</div> |
|
|
|
|
<el-card style="text-align: center"> |
|
|
|
|
<el-link href="https://element-plus.org" target="_blank" style="margin-right: 30px;font-size: 19px">关于我们</el-link> |
|
|
|
|
</el-card> |
|
|
|
|
</div> |
|
|
|
|
</el-main> |
|
|
|
|
</el-container> |
|
|
|
|
</div> |
|
|
|
|
<!-- 栏目编辑弹框--> |
|
|
|
|
<el-drawer v-model="drawer" title="title" :with-header="false"> |
|
|
|
|
@ -60,7 +101,7 @@ |
|
|
|
|
<el-input v-model="form.categoryName" autocomplete="off" /> |
|
|
|
|
</el-form-item> |
|
|
|
|
<el-form-item label="栏目父id" label-width="140px"> |
|
|
|
|
<el-input v-model="form.categoryPid" autocomplete="off" /> |
|
|
|
|
<el-input v-model="form.categoryPid" autocomplete="off" readonly/> |
|
|
|
|
</el-form-item> |
|
|
|
|
<!-- <el-form-item label="创建时间" label-width="140px">--> |
|
|
|
|
<!-- <el-input v-model="form.createTime" autocomplete="off" type="date"/>--> |
|
|
|
|
@ -90,90 +131,15 @@ |
|
|
|
|
</div> |
|
|
|
|
</template> |
|
|
|
|
</el-dialog> |
|
|
|
|
<!-- 新闻内容--> |
|
|
|
|
<el-card class="container"> |
|
|
|
|
<template #header> |
|
|
|
|
<div class="card-header"> |
|
|
|
|
<span class="contentTitle">{{nowTimeNewsData.title}}</span> |
|
|
|
|
<el-card shadow="hover"> |
|
|
|
|
<div class="news-flex-container"> |
|
|
|
|
<p>发布人：{{ nowTimeNewsData.userId }}</p> |
|
|
|
|
<p>阅读数量：{{ nowTimeNewsData.readingNumber }}</p> |
|
|
|
|
<p>发布日期：{{ nowTimeNewsData.publishTime }}</p> |
|
|
|
|
<p>更新时间：{{nowTimeNewsData.updateTime}}</p> |
|
|
|
|
</div> |
|
|
|
|
</el-card> |
|
|
|
|
</div> |
|
|
|
|
</template> |
|
|
|
|
<div style="text-align: center"> |
|
|
|
|
<el-input |
|
|
|
|
v-model="nowTimeNewsData.content" |
|
|
|
|
style="width: 80%;font-size: 20px" |
|
|
|
|
:rows="15" |
|
|
|
|
type="textarea" |
|
|
|
|
placeholder="Please input" |
|
|
|
|
/> |
|
|
|
|
</div> |
|
|
|
|
<template #footer> |
|
|
|
|
<div style="text-align: center"> |
|
|
|
|
<el-link href="https://element-plus.org" target="_blank" style="margin-right: 30px;font-size: 19px">关于我们</el-link> |
|
|
|
|
</div> |
|
|
|
|
</template> |
|
|
|
|
</el-card> |
|
|
|
|
<!-- 栏目内添加新闻--> |
|
|
|
|
<el-dialog v-model="addNewsDialogFormVisible" title="添加新闻" width="500px"> |
|
|
|
|
<el-form v-model="newsForm"> |
|
|
|
|
<el-form-item label="所属栏目id" label-width="140px"> |
|
|
|
|
<el-input v-model="newsForm.categoryId" autocomplete="off" readonly disabled/> |
|
|
|
|
</el-form-item> |
|
|
|
|
<el-form-item label="文章内容" label-width="140px"> |
|
|
|
|
<el-input v-model="newsForm.content" autocomplete="off" /> |
|
|
|
|
</el-form-item> |
|
|
|
|
<!-- <el-form-item label="文章文件" label-width="140px">--> |
|
|
|
|
<!-- <el-input v-model="newsForm.file" autocomplete="off" />--> |
|
|
|
|
<!-- </el-form-item>--> |
|
|
|
|
<!-- <el-form-item label="文章id" label-width="140px">--> |
|
|
|
|
<!-- <el-input v-model="newsForm.id" autocomplete="off" />--> |
|
|
|
|
<!-- </el-form-item>--> |
|
|
|
|
<!-- <el-form-item label="标题图片" label-width="140px">--> |
|
|
|
|
<!-- <el-input v-model="newsForm.pic" autocomplete="off" />--> |
|
|
|
|
<!-- </el-form-item>--> |
|
|
|
|
<!-- <el-form-item label="发布时间" label-width="140px">--> |
|
|
|
|
<!-- <el-input v-model="newsForm.publishTime" autocomplete="off" type="date"/>--> |
|
|
|
|
<!-- </el-form-item>--> |
|
|
|
|
<el-form-item label="浏览次数" label-width="140px"> |
|
|
|
|
<el-input v-model="newsForm.readingNumber" autocomplete="off" /> |
|
|
|
|
</el-form-item> |
|
|
|
|
<el-form-item label="发布状态" label-width="140px"> |
|
|
|
|
<el-input v-model="newsForm.status" placeholder="1:已发布 2:未发布" autocomplete="off" /> |
|
|
|
|
</el-form-item> |
|
|
|
|
<el-form-item label="文章标题" label-width="140px"> |
|
|
|
|
<el-input v-model="newsForm.title" autocomplete="off" /> |
|
|
|
|
</el-form-item> |
|
|
|
|
<!-- <el-form-item label="更新时间" label-width="140px">--> |
|
|
|
|
<!-- <el-input v-model="newsForm.updateTime" autocomplete="off" type="date"/>--> |
|
|
|
|
<!-- </el-form-item>--> |
|
|
|
|
<el-form-item label="发布文章的用户id" label-width="140px"> |
|
|
|
|
<el-input v-model="newsForm.userId" autocomplete="off" readonly disabled/> |
|
|
|
|
</el-form-item> |
|
|
|
|
</el-form> |
|
|
|
|
<template #footer> |
|
|
|
|
<div class="dialog-footer"> |
|
|
|
|
<el-button @click="addNewsDialogFormVisible = false">取消</el-button> |
|
|
|
|
<el-button type="primary" @click="addNewsContentConfirm"> |
|
|
|
|
提交 |
|
|
|
|
</el-button> |
|
|
|
|
</div> |
|
|
|
|
</template> |
|
|
|
|
</el-dialog> |
|
|
|
|
<!-- 修改新闻--> |
|
|
|
|
<el-dialog v-model="editNewsDialogFormVisible" title="修改新闻" width="500px"> |
|
|
|
|
<el-drawer v-model="editNewsDialogFormVisible" title="修改新闻" width="500px"> |
|
|
|
|
<el-form v-model="nowTimeNewsData"> |
|
|
|
|
<el-form-item label="所属栏目id" label-width="140px"> |
|
|
|
|
<el-input v-model="nowTimeNewsData.categoryId" autocomplete="off" readonly disabled/> |
|
|
|
|
</el-form-item> |
|
|
|
|
<el-form-item label="文章内容" label-width="140px"> |
|
|
|
|
<el-input v-model="nowTimeNewsData.content" autocomplete="off" /> |
|
|
|
|
<textarea style="width: 100%;height: 300px" v-model="nowTimeNewsData.content"></textarea> |
|
|
|
|
<!-- <el-input class="brief_text" type="textarea" /> --> |
|
|
|
|
</el-form-item> |
|
|
|
|
<!-- <el-form-item label="文章文件" label-width="140px">--> |
|
|
|
|
<!-- <el-input v-model="nowTimeNewsData.file" autocomplete="off" />--> |
|
|
|
|
@ -205,13 +171,13 @@ |
|
|
|
|
</el-form> |
|
|
|
|
<template #footer> |
|
|
|
|
<div class="dialog-footer"> |
|
|
|
|
<el-button @click="addNewsDialogFormVisible = false">取消</el-button> |
|
|
|
|
<el-button @click="editNewsDialogFormVisible = false">取消</el-button> |
|
|
|
|
<el-button type="primary" @click="editNewsContentConfirm"> |
|
|
|
|
提交 |
|
|
|
|
</el-button> |
|
|
|
|
</div> |
|
|
|
|
</template> |
|
|
|
|
</el-dialog> |
|
|
|
|
</el-drawer> |
|
|
|
|
</template> |
|
|
|
|
|
|
|
|
|
<script setup lang="ts"> |
|
|
|
|
@ -224,9 +190,11 @@ import { |
|
|
|
|
deleteEssay, |
|
|
|
|
editEssay |
|
|
|
|
} from "@/api/user/news.js" |
|
|
|
|
import {ref,reactive,onMounted} from 'vue'; |
|
|
|
|
import {ref,reactive,onMounted,mounted} from 'vue'; |
|
|
|
|
import {ElButton,ElDrawer, ElMessageBox, ElMessage} from 'element-plus' |
|
|
|
|
import useUserStore from "@/store/modules/user"; |
|
|
|
|
import {useRouter} from "vue-router"; |
|
|
|
|
const router = useRouter(); |
|
|
|
|
const userStore = useUserStore() |
|
|
|
|
const drawer = ref(false) |
|
|
|
|
const addFormVisible = ref(false) |
|
|
|
|
@ -240,41 +208,27 @@ const addNewsDialogFormVisible = ref(false) |
|
|
|
|
const editNewsDialogFormVisible = ref(false) |
|
|
|
|
//添加当前新闻栏目按钮 |
|
|
|
|
const addNewsDialogFormVisibleButton = (id)=>{ |
|
|
|
|
addNewsDialogFormVisible.value = true |
|
|
|
|
columnId.value = id |
|
|
|
|
// addNewsDialogFormVisible.value = true |
|
|
|
|
router.push(`/news/newsContentDetails?id=${id}`) |
|
|
|
|
// columnId.value = id |
|
|
|
|
} |
|
|
|
|
const nowTimeNewsData = ref({}) |
|
|
|
|
//新闻详细信息获取 |
|
|
|
|
const newViews = (listObject)=> { |
|
|
|
|
nowTimeNewsData.value = listObject |
|
|
|
|
nowTimeNewsData.value = { ...listObject } |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
//栏目 |
|
|
|
|
const form = ref({ |
|
|
|
|
categoryName:'', |
|
|
|
|
categoryPid:'', |
|
|
|
|
categoryPid:0, |
|
|
|
|
createTime:'', |
|
|
|
|
creatorId:userStore.userInfo.id, |
|
|
|
|
creatorId:userStore.data.id, |
|
|
|
|
id:'', |
|
|
|
|
sort:'', |
|
|
|
|
status:'', |
|
|
|
|
updateTime:'' |
|
|
|
|
}) |
|
|
|
|
|
|
|
|
|
//新闻 |
|
|
|
|
const newsForm = ref({ |
|
|
|
|
categoryId:columnId, |
|
|
|
|
content:'', |
|
|
|
|
file:'', |
|
|
|
|
id:'', |
|
|
|
|
pic:'', |
|
|
|
|
publishTime:'', |
|
|
|
|
readingNumber:'', |
|
|
|
|
status:'', |
|
|
|
|
title:'', |
|
|
|
|
updateTime:'', |
|
|
|
|
userId:userStore.userInfo.id, |
|
|
|
|
}) |
|
|
|
|
//获取栏目信息 |
|
|
|
|
const CategoryList = async () => { |
|
|
|
|
const res = await queryCategory() |
|
|
|
|
@ -326,28 +280,15 @@ const deleteHandle = async (id)=>{ |
|
|
|
|
} |
|
|
|
|
//新闻文章查询 |
|
|
|
|
const EssayList = async (id)=>{ |
|
|
|
|
const ress = await queryEssay(id) |
|
|
|
|
// console.log(ress.data,'ress') |
|
|
|
|
essay.value = ress.data |
|
|
|
|
const response = await queryEssay(id) |
|
|
|
|
// console.log(response.data,'response') |
|
|
|
|
essay.value = response.data |
|
|
|
|
if (essay.value.length > 0) { |
|
|
|
|
newViews(essay.value[0]); // 显示第一条新闻 |
|
|
|
|
} |
|
|
|
|
// console.log(essay.value,'essay') |
|
|
|
|
} |
|
|
|
|
//新闻文章添加 |
|
|
|
|
const addNewsContentConfirm = async ()=>{ |
|
|
|
|
addNewsDialogFormVisible.value = false |
|
|
|
|
await addEssay({ |
|
|
|
|
categoryId:newsForm.value.categoryId, |
|
|
|
|
content:newsForm.value.content, |
|
|
|
|
// file:newsForm.value.file, |
|
|
|
|
// id:newsForm.value.id, |
|
|
|
|
// pic:newsForm.value.pic, |
|
|
|
|
publishTime:newsForm.value.publishTime, |
|
|
|
|
readingNumber:newsForm.value.readingNumber, |
|
|
|
|
status:newsForm.value.status, |
|
|
|
|
title:newsForm.value.title, |
|
|
|
|
updateTime:newsForm.value.updateTime, |
|
|
|
|
userId:newsForm.value.userId |
|
|
|
|
}) |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
//新闻删除 |
|
|
|
|
const deleteNewsList = async (id)=>{ |
|
|
|
|
// console.log(id) |
|
|
|
|
@ -390,17 +331,27 @@ const editNewsContentConfirm = async ()=>{ |
|
|
|
|
margin: auto; |
|
|
|
|
background-image: linear-gradient(60deg,honeydew,powderblue,honeydew); |
|
|
|
|
} |
|
|
|
|
.el-aside { |
|
|
|
|
height: 100vh; /* 设置高度为视窗高度 */ |
|
|
|
|
overflow-y: auto; /* 当内容超出时显示滚动条 */ |
|
|
|
|
} |
|
|
|
|
.header-flex-container { |
|
|
|
|
display: flex; |
|
|
|
|
align-items: center; /* 垂直居中 */ |
|
|
|
|
/*align-items: center; !* 垂直居中 *!*/ |
|
|
|
|
padding: 20px; |
|
|
|
|
background: #4b81d7; |
|
|
|
|
justify-content: space-between; /* 左边对齐和右边对齐 */ |
|
|
|
|
gap: 10px; |
|
|
|
|
background: white; |
|
|
|
|
margin-top: 20px; |
|
|
|
|
height: 81vh; |
|
|
|
|
overflow-y: auto; |
|
|
|
|
} |
|
|
|
|
.header-flex-container::-webkit-scrollbar { |
|
|
|
|
width: 0px; /* 滚动条宽度 */ |
|
|
|
|
} |
|
|
|
|
.header-list { |
|
|
|
|
display: flex; /* 使li元素水平排列 */ |
|
|
|
|
/*display: flex; !* 使li元素水平排列 *!*/ |
|
|
|
|
flex-wrap: wrap; /* 如果需要换行 */ |
|
|
|
|
align-items: center; /* 如果需要，也可以使li元素垂直居中 */ |
|
|
|
|
/*align-items: center; !* 如果需要，也可以使li元素垂直居中 *!*/ |
|
|
|
|
margin: 0; /* 移除默认外边距 */ |
|
|
|
|
padding: 0; /* 移除默认内边距 */ |
|
|
|
|
} |
|
|
|
|
@ -412,8 +363,16 @@ const editNewsContentConfirm = async ()=>{ |
|
|
|
|
list-style: none; |
|
|
|
|
margin-right: 10px; |
|
|
|
|
} |
|
|
|
|
.el-dropdown { |
|
|
|
|
margin-right: 30px; |
|
|
|
|
.header-column{ |
|
|
|
|
height:30px; |
|
|
|
|
margin-top: 20px; |
|
|
|
|
margin-right: 80px; |
|
|
|
|
padding: 5px; |
|
|
|
|
margin-bottom: 20px; |
|
|
|
|
cursor: pointer; /* 鼠标悬停时显示手指形状，表示可点击 */ |
|
|
|
|
} |
|
|
|
|
.header-column span{ |
|
|
|
|
color: #222222; |
|
|
|
|
} |
|
|
|
|
.add-news-button { |
|
|
|
|
margin-top: auto; /* 将按钮推到底部 */ |
|
|
|
|
@ -421,13 +380,11 @@ const editNewsContentConfirm = async ()=>{ |
|
|
|
|
width: 100%; |
|
|
|
|
} |
|
|
|
|
.contentTitle{ |
|
|
|
|
color: red; |
|
|
|
|
color: firebrick; |
|
|
|
|
font-size: 30px; |
|
|
|
|
text-align: center; |
|
|
|
|
display: block; |
|
|
|
|
width: 100%; /* 或者设置一个具体的宽度 */ |
|
|
|
|
line-height: 40px; |
|
|
|
|
margin-bottom: 20px; |
|
|
|
|
} |
|
|
|
|
.flex-container { |
|
|
|
|
display: flex; |
|
|
|
|
@ -435,7 +392,17 @@ const editNewsContentConfirm = async ()=>{ |
|
|
|
|
align-items: center; |
|
|
|
|
flex-direction: row; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
/* 添加新的类来控制按钮的位置 */ |
|
|
|
|
.button-container { |
|
|
|
|
display: flex; |
|
|
|
|
justify-content: flex-end; /* 按钮靠右 */ |
|
|
|
|
align-items: center; /* 垂直居中 */ |
|
|
|
|
} |
|
|
|
|
.button-container_column{ |
|
|
|
|
position:absolute; |
|
|
|
|
margin-top: 30px; |
|
|
|
|
margin-left: 200px; |
|
|
|
|
} |
|
|
|
|
.news-flex-container { |
|
|
|
|
display: flex; /* 使用 Flexbox 布局 */ |
|
|
|
|
justify-content: space-between; /* 平均分配空间 */ |
|
|
|
|
@ -455,5 +422,14 @@ const editNewsContentConfirm = async ()=>{ |
|
|
|
|
.flex-container p:last-child { |
|
|
|
|
margin-right: 0; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.scrollbarContent{ |
|
|
|
|
height:60vh; |
|
|
|
|
border: 1px; |
|
|
|
|
background: white; |
|
|
|
|
border-radius: 1%; |
|
|
|
|
font-size: 20px; |
|
|
|
|
padding: 10px; |
|
|
|
|
overflow-y: auto; |
|
|
|
|
line-height: 2.0; |
|
|
|
|
} |
|
|
|
|
</style> |
JayChou
3 months ago