xwl2023/Yi.Framework
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

perf:修改添加子文章传参parentId

Browse Source
This commit is contained in:
Xwen
2023-12-14 17:57:07 +08:00
parent 3cf0fabe15
commit a84ff4a0f8
1 changed files with 100 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files

158
Yi.Bbs.Vue3/src/views/Article.vue
View File

@@ -7,12 +7,27 @@
<el-col :span="24"> <el-col :span="24">
<InfoCard header="文章信息" text="展开" hideDivider="true"> <InfoCard header="文章信息" text="展开" hideDivider="true">
<template #content> <template #content>
<el-button style="width: 100%; margin-bottom: 0.8rem" @click="loadDiscuss(true)">首页</el-button> <el-button
<el-button v-hasPer="['bbs:article:add']" @click="addArticle(0)" type="primary" style="width: 100%; margin-bottom: 0.8rem"
style="width: 100%; margin-bottom: 0.8rem; margin-left: 0">添加子文章</el-button> @click="loadDiscuss(true)"
>首页</el-button
>
<el-button
v-hasPer="['bbs:article:add']"
@click="addArticle('00000000-0000-0000-0000-000000000000')"
type="primary"
style="width: 100%; margin-bottom: 0.8rem; margin-left: 0"
>添加子文章</el-button
>
<!--目录在这里 --> <!--目录在这里 -->
<TreeArticleInfo :data="articleData" @remove="delArticle" @update="updateArticle" @create="addNextArticle" <TreeArticleInfo
@handleNodeClick="handleNodeClick" :currentNodeKey="currentNodeKey"/> :data="articleData"
@remove="delArticle"
@update="updateArticle"
@create="addNextArticle"
@handleNodeClick="handleNodeClick"
:currentNodeKey="currentNodeKey"
/>
</template> </template>
</InfoCard> </InfoCard>
</el-col> </el-col>
@@ -37,50 +52,70 @@
<el-row class="left-div"> <el-row class="left-div">
<el-col :span="24"> <el-col :span="24">
<!-- {{ discuss.user }} --> <!-- {{ discuss.user }} -->
<AvatarInfo :size="50" :showWatching="true" :time="discuss.creationTime" :userInfo="discuss.user"></AvatarInfo> <AvatarInfo
:size="50"
:showWatching="true"
:time="discuss.creationTime"
:userInfo="discuss.user"
></AvatarInfo>
<!-- :userInfo="{nick:'qwe'} --> <!-- :userInfo="{nick:'qwe'} -->
<el-divider /> <el-divider />
<h2>{{ discuss.title }}</h2> <h2>{{ discuss.title }}</h2>
<el-image :preview-src-list="[getUrl(discuss.cover)]" v-if="discuss.cover" :src="getUrl(discuss.cover)" style="width: 150px;height: 150px;" /> <el-image
:preview-src-list="[getUrl(discuss.cover)]"
v-if="discuss.cover"
:src="getUrl(discuss.cover)"
style="width: 150px; height: 150px"
/>
<ArticleContentInfo
<ArticleContentInfo :code="discuss.content??''"></ArticleContentInfo> :code="discuss.content ?? ''"
></ArticleContentInfo>
<el-divider class="tab-divider" /> <el-divider class="tab-divider" />
<el-space :size="10" :spacer="spacer"> <el-space :size="10" :spacer="spacer">
<AgreeInfo :data="discuss"/> <AgreeInfo :data="discuss" />
<el-button icon="Star" text> 0</el-button> <el-button icon="Star" text> 0</el-button>
<el-button icon="Share" text> 分享</el-button> <el-button icon="Share" text> 分享</el-button>
<el-button icon="Operation" text> 操作</el-button> <el-button icon="Operation" text> 操作</el-button>
</el-space> </el-space>
</el-col> </el-col>
<el-col :span="24" class="comment"> <el-col :span="24" class="comment">
<CommentInfo />
<CommentInfo/>
</el-col> </el-col>
</el-row> </el-row>
<BottomInfo/> <BottomInfo />
</el-col> </el-col>
<el-col :span="5"> <el-col :span="5">
<el-row class="right-div"> <el-row class="right-div">
<el-col :span="24"> <el-col :span="24">
<InfoCard class="art-info-right" header="主题信息" text="更多" hideDivider="true"> <InfoCard
class="art-info-right"
header="主题信息"
text="更多"
hideDivider="true"
>
<template #content> <template #content>
<div> <div>
<ul class="art-info-ul"> <ul class="art-info-ul">
<li> <li>
<el-button type="primary" size="default" <el-button
v-hasPer="['bbs:discuss:edit']" type="primary"
@click="updateHander(route.params.discussId)">编辑</el-button> size="default"
<el-button style="margin-left: 1rem" type="danger" v-hasPer="['bbs:discuss:edit']"
v-hasPer="['bbs:discuss:remove']" @click="updateHander(route.params.discussId)"
@click="delHander(route.params.discussId)">删除</el-button> >编辑</el-button
>
<el-button
style="margin-left: 1rem"
type="danger"
v-hasPer="['bbs:discuss:remove']"
@click="delHander(route.params.discussId)"
>删除</el-button
>
</li> </li>
<li>分类： <span>主题</span></li> <li>分类： <span>主题</span></li>
标签： 标签：
@@ -95,11 +130,20 @@
<InfoCard class="art-info-right" header="目录" hideDivider="true"> <InfoCard class="art-info-right" header="目录" hideDivider="true">
<template #content> <template #content>
<div> <div>
<el-empty :image-size="100" style="padding: 20px 0;" v-if="catalogueData.length==0" description="无目录" /> <el-empty
:image-size="100"
style="padding: 20px 0"
v-if="catalogueData.length == 0"
description="无目录"
/>
<ul v-else class="art-info-ul"> <ul v-else class="art-info-ul">
<li v-for="(item, i) in catalogueData" :key="i"> <li v-for="(item, i) in catalogueData" :key="i">
<el-button style="width: 100%; justify-content: left" type="primary" text>{{ `${i + 1} ： ${item}` <el-button
}}</el-button> style="width: 100%; justify-content: left"
type="primary"
text
>{{ `${i + 1} ： ${item}` }}</el-button
>
</li> </li>
</ul> </ul>
</div> </div>
@@ -131,42 +175,44 @@ import AvatarInfo from "@/components/AvatarInfo.vue";
import InfoCard from "@/components/InfoCard.vue"; import InfoCard from "@/components/InfoCard.vue";
import ArticleContentInfo from "@/components/ArticleContentInfo.vue"; import ArticleContentInfo from "@/components/ArticleContentInfo.vue";
import CommentInfo from "@/components/CommentInfo.vue"; import CommentInfo from "@/components/CommentInfo.vue";
import BottomInfo from '@/components/BottomInfo.vue' import BottomInfo from "@/components/BottomInfo.vue";
import TreeArticleInfo from "@/components/TreeArticleInfo.vue"; import TreeArticleInfo from "@/components/TreeArticleInfo.vue";
import { useRoute, useRouter } from "vue-router"; import { useRoute, useRouter } from "vue-router";
import AgreeInfo from '@/components/AgreeInfo.vue' import AgreeInfo from "@/components/AgreeInfo.vue";
import { get as discussGet, del as discussDel } from "@/apis/discussApi.js"; import { get as discussGet, del as discussDel } from "@/apis/discussApi.js";
import { all as articleall, del as articleDel, get as articleGet } from "@/apis/articleApi.js"; import {
all as articleall,
del as articleDel,
get as articleGet,
} from "@/apis/articleApi.js";
//数据定义 //数据定义
const route = useRoute(); const route = useRoute();
const router = useRouter(); const router = useRouter();
const spacer = h(ElDivider, { direction: "vertical" }); const spacer = h(ElDivider, { direction: "vertical" });
const items = [{ user: "用户1" }, { user: "用户2" }, { user: "用户3" }]; const items = [{ user: "用户1" }, { user: "用户2" }, { user: "用户3" }];
//子文章数据 //子文章数据
const articleData = ref([]); const articleData = ref([]);
//主题内容 //主题内容
const discuss = ref({}); const discuss = ref({});
//封面url //封面url
const getUrl= (str)=>{ const getUrl = (str) => {
return `${import.meta.env.VITE_APP_BASEAPI}/file/${str}` return `${import.meta.env.VITE_APP_BASEAPI}/file/${str}`;
} };
//当前默认选择的子文章 //当前默认选择的子文章
const currentNodeKey=route.params.articleId; const currentNodeKey = route.params.articleId;
//目录数据 //目录数据
const catalogueData = ref([]); const catalogueData = ref([]);
//子文章初始化 //子文章初始化
const loadArticleData = async () => { const loadArticleData = async () => {
const response= await articleall(route.params.discussId) const response = await articleall(route.params.discussId);
articleData.value = response.data; articleData.value = response.data;
} };
//主题初始化 //主题初始化
const loadDiscuss = async (isRewrite) => { const loadDiscuss = async (isRewrite) => {
if (isRewrite) { if (isRewrite) {
//跳转路由 //跳转路由
router.push(`/article/${route.params.discussId}`); router.push(`/article/${route.params.discussId}`);
@@ -183,16 +229,15 @@ const ContentHander = () => {
//加载目录 //加载目录
var reg = /(#{1,6})\s(.*)/g; var reg = /(#{1,6})\s(.*)/g;
if(discuss.value.content) if (discuss.value.content) {
{ var myArray = discuss.value.content.match(reg);
var myArray = discuss.value.content.match(reg); if (myArray != null) {
if (myArray != null) { catalogueData.value = myArray.map((x) => {
catalogueData.value = myArray.map((x) => { return x.replace(/#/g, "").replace(/\s/g, "");
return x.replace(/#/g, "").replace(/\s/g, ""); });
}); }
} }
} };
}
//添加树型子文章 //添加树型子文章
const addArticle = (parentArticleId) => { const addArticle = (parentArticleId) => {
//跳转路由 //跳转路由
@@ -251,7 +296,7 @@ const addNextArticle = (node, data) => {
}, },
}; };
router.push(routerPer); router.push(routerPer);
} };
//跳转更新子菜单 //跳转更新子菜单
const updateArticle = (node, data) => { const updateArticle = (node, data) => {
@@ -263,22 +308,21 @@ const updateArticle = (node, data) => {
artType: "article", artType: "article",
discussId: data.discussId, discussId: data.discussId,
parentArticleId: data.parentId, parentArticleId: data.parentId,
articleId: data.id articleId: data.id,
}, },
}; };
router.push(routerPer); router.push(routerPer);
} };
//单机节点 //单机节点
const handleNodeClick = async(data) => { const handleNodeClick = async (data) => {
//跳转路由 //跳转路由
router.push(`/article/${route.params.discussId}/${data.id}`); router.push(`/article/${route.params.discussId}/${data.id}`);
const response=await articleGet(data.id); const response = await articleGet(data.id);
discuss.value.content = response.data.content; discuss.value.content = response.data.content;
ContentHander(); ContentHander();
} };
//删除子文章 //删除子文章
const delArticle = (node, data) => { const delArticle = (node, data) => {
ElMessageBox.confirm(`确定是否删除编号[${data.id}]的子文章吗?`, "警告", { ElMessageBox.confirm(`确定是否删除编号[${data.id}]的子文章吗?`, "警告", {
@@ -286,7 +330,6 @@ const delArticle = (node, data) => {
cancelButtonText: "取消", cancelButtonText: "取消",
type: "warning", type: "warning",
}).then(async () => { }).then(async () => {
await articleDel(data.id); await articleDel(data.id);
await loadArticleData(); await loadArticleData();
@@ -295,14 +338,13 @@ const delArticle = (node, data) => {
message: "删除成功", message: "删除成功",
}); });
}); });
};
}
onMounted(async () => { onMounted(async () => {
await loadDiscuss(); await loadDiscuss();
await loadArticleData(); await loadArticleData();
}); });
</script> </script>
<style scoped > <style scoped>
.comment { .comment {
min-height: 40rem; min-height: 40rem;
} }