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

feat: 完善文章编辑功能

Browse Source
This commit is contained in:
橙子
2023-03-12 01:50:11 +08:00
parent 3de32945f2
commit 27962cd25f
13 changed files with 933 additions and 99 deletions
Download Patch File Download Diff File Expand all files Collapse all files

55
Yi.BBS.Vue3/src/views/AddArticle.vue
View File

@@ -1,55 +0,0 @@
<template>
<div style="width: 100%;">
<div class="body-div">
<el-form label-width="120px" label-position="left">
<el-form-item label="分类：">
<el-radio-group v-model="radio">
<el-radio-button label="1" >文章</el-radio-button>
<el-radio-button label="2" >主题</el-radio-button>
<el-radio-button label="3" >板块</el-radio-button>
<el-radio-button label="4" >其他</el-radio-button>
</el-radio-group>
</el-form-item>
<el-form-item label="标题：">
<el-input placeholder="请输入" />
</el-form-item>
<el-form-item label="描述：">
<el-input placeholder="请输入" />
</el-form-item>
<el-form-item label="内容：">
<MavonEdit height="30rem" v-model="text" :codeStyle="codeStyle"/>
</el-form-item>
<el-form-item label="封面：">
<el-input placeholder="请输入" />
</el-form-item>
<el-form-item label="标签：">
<el-input placeholder="请输入" />
</el-form-item>
<el-form-item > <el-button class="submit-btn" type="primary">提交</el-button></el-form-item>
</el-form>
</div>
</div>
</template>
<script setup>
import MavonEdit from '@/components/MavonEdit.vue'
import { ref } from 'vue';
const text=ref("")
const radio=ref(1)
const codeStyle=ref("atom-one-dark");
</script>
<style scoped>
.submit-btn
{
width: 40%;
}
.body-div
{
min-height: 1000px;
background-color: #fff;
margin: 1.5rem;
padding: 1.5rem;
}
</style>

43
Yi.BBS.Vue3/src/views/Article.vue
View File

@@ -4,14 +4,16 @@
<el-row :gutter="20" class="top-div">
<el-col :span="5">
<el-row>
<el-col :span="24">
<InfoCard class="art-info-left" header="主题信息" text="展开" hideDivider="true">
<el-row class="art-info-left">
<el-col :span="24">
<InfoCard header="主题信息" text="展开" hideDivider="true">
<template #content>
<el-button style="width: 100%;margin-bottom: 0.8rem;">首页</el-button>
<el-tree :data="data" @node-click="handleNodeClick" />
</template>
</InfoCard>
</el-col>
<el-col :span="24">
<InfoCard :items=items header="推荐好友" text="更多">
<template #item="temp">
@@ -26,7 +28,7 @@
</template>
</InfoCard>
</el-col>
</el-col>
</el-row>
@@ -39,10 +41,8 @@
<AvatarInfo :size="50" :showWatching="true" :time="'2023-03-08 21:09:02'"></AvatarInfo>
<el-divider />
<h2>{{discuss.title}}</h2>
<!-- {{discuss.content}} -->
<ArticleContentInfo/>
<ArticleContentInfo :code="discuss.content"></ArticleContentInfo>
<el-divider class="tab-divider" />
@@ -73,7 +73,14 @@
<InfoCard class="art-info-right" header="文章信息" text="更多" hideDivider="true">
<template #content>
<div>
<ul class="art-info-ul">
<li>
<RouterLink :to='`/editArt/discuss/update/${route.params.discussId}`'> <el-button type="primary" size="default" >编辑</el-button></RouterLink>
</li>
<li>
分类： <span>文章</span>
</li>
@@ -89,8 +96,8 @@
<template #content>
<div>
<ul class="art-info-ul">
<li v-for="i in 6">
<el-button style="width: 100%;justify-content: left" type="primary" text>{{ i }}：第一小结</el-button>
<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>
</li>
</ul>
</div>
@@ -204,13 +211,25 @@ const data = [
//主题内容
const discuss=ref({});
//目录数据
const catalogueData=ref([]);
//主题初始化
const loadDiscuss=async()=>{
discuss.value= await discussGet(route.params.discussId);
//加载目录
var reg = /(#{1,6})\s(.*)/g;
var myArray =discuss.value.content.match(reg);
if(myArray!=null)
{
catalogueData.value= myArray.map(x=>{ return x.replace(/#/g,"").replace(/\s/g,'')})
}
}
onMounted(async()=>{
onMounted(async()=>{
await loadDiscuss();
})
@@ -220,7 +239,7 @@ onMounted(async()=>{
{
height:40rem;
}
.art-info-left {
.art-info-left .el-col {
margin-bottom: 1rem;
}

13
Yi.BBS.Vue3/src/views/Discuss.vue
View File

@@ -14,9 +14,10 @@
/>
</el-form-item>
<div class="form-right">
<el-button>重置</el-button>
<el-button type="primary" @click="async()=>{ await loadDiscussList();}">查询</el-button>
<el-button @click="enterEditArticle" type="primary">分享</el-button>
<el-dropdown>
<span class="el-dropdown-link">
展开
@@ -71,10 +72,11 @@
import DisscussCard from '@/components/DisscussCard.vue'
import {getList} from '@/apis/discussApi.js'
import { onMounted, ref,reactive } from 'vue'
import { useRoute } from 'vue-router'
import { useRoute,useRouter } from 'vue-router'
//数据定义
const route=useRoute()
const router=useRouter()
const activeName = ref('first')
const discussList=ref([]);
const total=ref(100)
@@ -82,7 +84,7 @@ const query=reactive({
pageNum:1,
pageSize:10,
title:'',
plateId:''
plateId:route.params.plateId
})
const handleClick = (tab, event) => {
@@ -95,12 +97,15 @@ onMounted(async()=>{
//加载discuss
const loadDiscussList=async()=>{
query.plateId=route.params.plateId;
const response= await getList(query);
discussList.value=response.items;
total.value=Number( response.total);
}
//进入添加主题页面
const enterEditArticle=()=>{
router.push(`/editArt/discuss/create/${route.params.plateId}`)
}
</script>
<style scoped>
.el-pagination

121
Yi.BBS.Vue3/src/views/EditArticle.vue Normal file
View File

@@ -0,0 +1,121 @@
<template>
<div style="width: 100%;">
<div class="body-div">
<el-form label-width="120px" :model="discuss" label-position="left" :rules="rules" ref="ruleFormRef">
<el-form-item label="分类：">
<el-radio-group v-model="radio">
<el-radio-button label="1">文章</el-radio-button>
<el-radio-button label="2">主题</el-radio-button>
<el-radio-button label="3">板块</el-radio-button>
<el-radio-button label="4">其他</el-radio-button>
</el-radio-group>
</el-form-item>
<el-form-item label="标题：" prop="title">
<el-input placeholder="请输入" v-model="discuss.title" />
</el-form-item>
<el-form-item label="描述：" prop="introduction">
<el-input placeholder="请输入" v-model="discuss.introduction" />
</el-form-item>
<el-form-item label="内容：" prop="content">
{{ discuss.content + "[111]" }}
<MavonEdit height="30rem" v-model="discuss.content" :codeStyle="codeStyle" />
</el-form-item>
<el-form-item label="封面：">
<el-input placeholder="请输入" />
</el-form-item>
<el-form-item label="标签：" prop="types">
<el-input placeholder="请输入" v-model="discuss.types" />
</el-form-item>
<el-form-item> <el-button @click="submit(ruleFormRef)" class="submit-btn"
type="primary">提交</el-button></el-form-item>
</el-form>
</div>
</div>
</template>
<script setup>
import MavonEdit from '@/components/MavonEdit.vue'
import { ref, reactive,onMounted } from 'vue';
import { useRoute } from 'vue-router'
import { add as discussAdd, update as discussUpdate,get as discussGet } from '@/apis/discussApi.js'
//数据定义
const route = useRoute()
const radio = ref(1)
const codeStyle = "atom-one-dark"
//需要添加的主题信息
const discuss = reactive({
title: "",
types: "",
introduction: "",
content: "",
plateId: route.params.id
});
//定义效验规则
const ruleFormRef = ref(null)
const rules = reactive({
title: [
{ required: true, message: '请输入标题', trigger: 'blur' },
{ min: 3, max: 20, message: '长度 3 到 20', trigger: 'blur' },
],
})
//提交按钮,需要区分操作类型
const submit = async (formEl) => {
if (!formEl) return
await formEl.validate(async (valid, fields) => {
if (valid) {
//创建
if (route.params.operType == 'create') {
await discussAdd(discuss)
}
//更新
else if (route.params.operType == 'update') {
await discussUpdate(route.params.id, discuss)
}
ruleFormRef.value.resetFields();
discuss.plateId = route.params.id;
}
})
}
onMounted(async()=>{
//如果是更新操作，需要先查询
if (route.params.operType == 'update') {
await loadDiscuss();
}
})
//加载主题
const loadDiscuss=async()=>{
const response= await discussGet(route.params.id);
discuss.content= response.content;
discuss.title= response.title;
discuss.types= response.types;
discuss.introduction= response.introduction;
}
// const clear = (source) => {
// const keys = Object.keys(source);
// let obj = {};
// keys.forEach((item) => {
// obj[item] = "";
// });
// Object.assign(source, obj);
// };
</script>
<style scoped>
.submit-btn {
width: 40%;
}
.body-div {
min-height: 1000px;
background-color: #fff;
margin: 1.5rem;
padding: 1.5rem;
}
</style>