回显文章数据

src/pages/Article/index.tsx

@@ -7,6 +7,7 @@ import { titleSty } from '@/styles/sty'
 import Title from '@/components/Title';
 import type { Tag as ArticleTag } from '@/types/tag';
 import type { Cate } from '@/types/cate';
+import { Link } from 'react-router-dom';
 
 const Article: React.FC = () => {
     const [loading, setLoading] = useState<boolean>(false);
@@ -94,7 +95,7 @@ const Article: React.FC = () => {
             key: 'createTime',
             align: 'center',
             width: 200,
-            render: (text: string) => dayjs(text).format('YYYY-MM-DD HH:mm:ss'),
+            render: (text: string) => dayjs(+text).format('YYYY-MM-DD HH:mm:ss'),
         },
         {
             title: '操作',
@@ -103,7 +104,9 @@ const Article: React.FC = () => {
             align: 'center',
             render: (text: string, record: Article) => (
                 <div className='flex space-x-2'>
-                    <Button onClick={() => window.location.href = `/create?id=${record.id}`}>修改</Button>
+                    <Link to={`/create?id=${record.id}`}>
+                        <Button>修改</Button>
+                    </Link>
 
                     <Popconfirm title="警告" description="你确定要删除吗" okText="确定" cancelText="取消" onConfirm={() => delArticleData(record.id!)}>
                         <Button type="primary" danger>删除</Button>

src/pages/Create/components/PublishForm/index.tsx

@@ -20,11 +20,26 @@ interface FieldType {
     description: string;
 }
 
-const PublishForm = ({ content }: { content: string }) => {
+const PublishForm = ({ data }: { data: Article }) => {
     const [form] = Form.useForm()
     const [cateList, setCateList] = useState<Cate[]>([])
     const [tagList, setTagList] = useState<Tag[]>([])
 
+    useEffect(() => {
+        if (!data.id) return
+        const cateIds = transCateArray(data.cateList)
+        console.log(cateIds);
+
+        const tagIds = data.tagList.map(item => item.id)
+        form.setFieldsValue({
+            ...data,
+            cateIds,
+            tagIds,
+            createTime: dayjs(+data.createTime!)
+        })
+        console.log(data, 9999);
+    }, [data])
+
     const getCateList = async () => {
         const { data } = await getCateListAPI()
         setCateList(data as Cate[])
@@ -40,23 +55,19 @@ const PublishForm = ({ content }: { content: string }) => {
         getTagList()
     }, [])
 
+    // 校验文章封面
     const validateURL = (_: RuleObject, value: string) => {
-        if (!value || /^(https?:\/\/)/.test(value)) {
-            return Promise.resolve();
-        }
-        return Promise.reject(new Error('请输入有效的封面链接'));
+        return !value || /^(https?:\/\/)/.test(value) ? Promise.resolve() : Promise.reject(new Error('请输入有效的封面链接'));
     };
 
     const onSubmit: FormProps<FieldType>['onFinish'] = async (values) => {
-        console.log(values);
-
         values.createTime = values.createTime.valueOf()
         values.cateIds = (values.cateIds as number[]).flat().join(',')
         values.tagIds = values.tagIds ? (values.tagIds as number[]).join(',') : ""
+        console.log(values);
 
-        console.log({ ...values, content });
-        await addArticleDataAPI({ ...values, content } as Article)
-        message.success("🎉 发布成功")
+        // await addArticleDataAPI({ ...values, content: data.content } as Article)
+        // message.success("🎉 发布成功")
     }
 
     return (
@@ -117,3 +128,14 @@ const PublishForm = ({ content }: { content: string }) => {
 };
 
 export default PublishForm;
+
+// 提取分类的id
+function transCateArray(arr: Cate[]): any {
+    return arr.map((item: Cate) => {
+        if (item.children && item.children.length > 0) {
+            return [item.id, ...transCateArray(item.children)].flat();
+        } else {
+            return item.id;
+        }
+    });
+}

src/pages/Create/components/VditorMD/index.tsx

@@ -4,11 +4,21 @@ import "vditor/dist/index.css";
 import "./index.scss"
 
 interface VditorProps {
+    value?: string,
     getValue: (value: string) => void
 }
 
-const VditorEditor = ({ getValue }: VditorProps) => {
+const VditorEditor = ({ value, getValue }: VditorProps) => {
     const [vd, setVd] = useState<Vditor>();
+
+    // useEffect(() => {
+    //     if (vd) {
+    //         vd.setValue(value || '')
+    //     }
+    //     console.log(value,444);
+        
+    // }, [value])
+
     useEffect(() => {
         const vditor = new Vditor("vditor", {
             minHeight: 550,
@@ -25,6 +35,10 @@ const VditorEditor = ({ getValue }: VditorProps) => {
                 getValue(value)
             },
             after: () => {
+                console.log(value?.trim(),!!value?.trim().length);
+                
+                // value?.trim().length && vditor.setValue(value)
+
                 // vditor.setValue("`Vditor` 最小代码示例");
 
                 setVd(vditor);

src/pages/Create/index.tsx

@@ -3,16 +3,25 @@ import { BiSave } from "react-icons/bi";
 
 import VditorEditor from './components/VditorMD';
 import PublishForm from './components/PublishForm';
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 
 import Title from '@/components/Title';
+import { Article } from '@/types/article';
+import { getArticleDataAPI } from '@/api/Article'
+import { useSearchParams } from 'react-router-dom';
 
 const CreatePage = () => {
+  const [params] = useSearchParams()
+  const id = +params.get('id')!
+
+  const [data, setData] = useState<Article>({} as Article)
   const [content, setContent] = useState('');
   const [publishOpen, setPublishOpen] = useState(false)
 
   // 获取编辑器的内容
   const getVditorData = (value: string) => {
+    console.log(value, 333);
+
     setContent(value)
   }
 
@@ -21,6 +30,28 @@ const CreatePage = () => {
     content.trim().length >= 1 ? setPublishOpen(true) : message.error('请输入文章内容')
   }
 
+  // 获取文章数据
+  const getArticleData = async () => {
+    const { data } = await getArticleDataAPI(id)
+    setData(data)
+    console.log(222,data);
+  }
+
+  useEffect(() => {
+    if (id) {
+      console.log(111);
+      
+      getArticleData()
+    }
+  }, [id])
+
+  useEffect(() => {
+    if (data.id) {
+      setContent(data.content)
+      console.log(333,data);
+    }
+  }, [data])
+
   return (
     <>
       <Title value="创作" />
@@ -32,7 +63,7 @@ const CreatePage = () => {
           </Button>
         </div>
 
-        <VditorEditor getValue={getVditorData} />
+        <VditorEditor value={data.content} getValue={getVditorData} />
 
         <Drawer
           title="发布文章"
@@ -42,7 +73,7 @@ const CreatePage = () => {
           onClose={() => setPublishOpen(false)}
           open={publishOpen}
         >
-          <PublishForm content={content} />
+          <PublishForm data={data} />
         </Drawer>
       </Card >
     </>

src/types/Article.d.ts

@@ -1,3 +1,6 @@
+import { Cate } from "./cate"
+import { Tag } from "./tag"
+
 export interface Article {
     id?: number,
     title: string,
@@ -5,7 +8,9 @@ export interface Article {
     content: string,
     cover: string,
     cateIds: string,
+    cateList: Cate[]
     tagIds: string,
+    tagList: Tag[]
     view?: number
     count?: number,
     createTime?: number,

src/types/cate.d.ts

@@ -5,6 +5,5 @@ export interface Cate {
     url: string,
     icon: string,
     level: number,
-    children?: Omit<Cate>[]
-    checked?: boolean;
+    children?: Cate[]
 }