feat:增加草稿博客功能

src/apis/blog.ts

@@ -1,26 +1,15 @@
 import { cloudService } from './index'
-import { IBlog, IBlogCategory, IBlogComment, IBlogStats, IBlogVisit, INewBlog, IQueryBlog } from '@/types/blog'
+import { IBlog, IBlogCategory, IBlogComment, IBlogStats, IBlogVisit, INewBlog } from '@/types/blog'
 
-import qs from 'qs'
 import { IPageRecord } from '@/types'
 
 export const queryBlogApi = (currentPage: number, pageSize: number): Promise<IPageRecord<IBlog>> =>
   cloudService({
-    url: '/blog-api/blog/page',
+    url: '/blog-api/blog/all/page',
     method: 'get',
     params: { currentPage, pageSize }
   })
 
-export const queryBlogByConditionApi = (query: IQueryBlog): Promise<IBlog[]> =>
-  cloudService({
-    url: '/blog-api/blog/condition',
-    method: 'get',
-    params: query,
-    paramsSerializer: (params) => {
-      return qs.stringify(params, { arrayFormat: 'indices' })
-    }
-  })
-
 export const queryBlogByIdApi = (id: number): Promise<IBlog> =>
   cloudService({
     url: `/blog-api/blog/${id}/content`,

src/store/blog.ts

@@ -5,7 +5,7 @@ import {
 } from '@/types/blog'
 import {
   addBlogApi, addBlogCommentApi, deleteBlogApi,
-  queryBlogApi, queryBlogByConditionApi, queryBlogByIdApi,
+  queryBlogApi, queryBlogByIdApi,
   queryBlogCategoryApi, queryBlogCommentApi, queryBlogStatsApi, queryLatestBlogApi, updateBlogApi
 } from '@/apis/blog.ts'
 import { IHandleApi } from 'vue3-common/types'
@@ -51,7 +51,8 @@ export const useBlogStore = defineStore('blog', {
       topValue: 1,
       isGreat: false,
       category: '',
-      content: ''
+      content: '',
+      isApproved: 0
     } as INewBlog,
     blogCategoryList: [] as IBlogCategory[],
     blogStats: {} as IBlogStats,
@@ -74,9 +75,6 @@ export const useBlogStore = defineStore('blog', {
       this.blogList = result.records
       this.pageInfo.totalSize = result.total
     },
-    async queryBlogByCondition(query: IQueryBlog) {
-      this.blogList = await queryBlogByConditionApi(query)
-    },
     async queryBlogById(id: number) {
       this.currentBlog = await queryBlogByIdApi(id)
       await this.queryBlogComment(this.currentBlogId)
@@ -133,7 +131,8 @@ export const useBlogStore = defineStore('blog', {
         content: '',
         isGreat: false,
         title: '',
-        topValue: 0
+        topValue: 0,
+        isApproved: 0
       }
     },
     getEmptyBlogComment(): IBlogComment {

src/types/blog.ts

@@ -10,6 +10,7 @@ export interface IBlog {
   wordCount: number;
   readDuration: number;
   visitCount: number;
+  isApproved: number;
   createTime: string;
   updateTime: string;
 }
@@ -21,6 +22,7 @@ export interface INewBlog {
   isGreat: boolean;
   category: string;
   content: string;
+  isApproved: number;
 }
 
 export interface IQueryBlog {

src/utils/element/elRules.ts

@@ -9,12 +9,12 @@ export const emailPattern = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/
 
 export const blogRules = {
   title: [
-    { required: true, message: '请输入博客标题', trigger: 'change' }
+    { required: true, message: '请输入博客标题', trigger: 'blur' }
   ],
   category: [
-    { required: true, message: '请输入或选择博客分类', trigger: 'change' },
+    // { required: true, message: '请输入或选择博客分类', trigger: 'change' },
     // { pattern: new RegExp(chinesePattern), message: '请输入中英文或数字' },
-    { min: 1, max: 10, message: '请输入10字以内的类别', trigger: 'blur' }]
+    { required: true, min: 1, max: 10, message: '请输入10字以内的类别', trigger: 'blur' }]
 }
 
 export const loginRules = {

src/views/blog/article.vue

@@ -28,6 +28,12 @@
       </el-table-column>
       <el-table-column prop="wordCount" label="字数" align="center" min-width="10%" />
       <el-table-column prop="visitCount" label="阅读次数" align="center" min-width="10%" />
+      <el-table-column label="是否发布" align="center" min-width="10%">
+        <template #default="scope">
+          <el-tag type="success" v-if="scope.row.isApproved">已发布</el-tag>
+          <el-tag type="danger" v-else>草稿</el-tag>
+        </template>
+      </el-table-column>
       <el-table-column fixed="right" label="操作" align="center" width="300">
         <template #default="scope">
           <el-button type="primary" @click="previewBlogClick(scope.row)">预览</el-button>

src/views/blog/detail[id].vue

@@ -34,7 +34,10 @@
 
     <div class="button-container">
       <el-button type="primary" @click="backClick">返回</el-button>
-      <el-button type="primary" @click="submitFormEvent">保存</el-button>
+      <el-button type="primary"
+                 :disabled="blogStore.newBlog.isApproved === 1"
+                 @click="submitFormEvent(0)">保存为草稿</el-button>
+      <el-button type="primary" @click="submitFormEvent(1)">发布</el-button>
     </div>
   </div>
 </template>
@@ -63,6 +66,7 @@ const focusCategoryEvent = async () => {
 }
 
 onMounted(async () => {
+  console.log('cxx')
   formRef.value?.clearValidate()
 
   const blogId = route.params.id as number
@@ -91,9 +95,10 @@ const validateBlog = (): boolean => {
 /**
  * 提交表单事件
  */
-const submitFormEvent = () => {
+const submitFormEvent = (isApprove: number) => {
   // 表单校验
   formRef.value?.validate().then(async () => {
+    blogStore.newBlog.isApproved = isApprove
     if (validateBlog()) {
       await blogStore.handleBlogApi()
       await router.push('/blog')