diff --git a/src/api/Cate.ts b/src/api/Cate.ts index 50c120e..3b0f012 100644 --- a/src/api/Cate.ts +++ b/src/api/Cate.ts @@ -14,11 +14,11 @@ export const editCateDataAPI = (data: Cate) => Request("PATCH", "/cate", d export const getCateDataAPI = (id?: number) => Request("GET", `/cate/${id}`) // 获取分类列表 -export const getCateListAPI = (pagination?: Page) => { +export const getCateListAPI = (pattern?: "list" | "recursion", pagination?: Page) => { if (pagination) { const { page, size } = pagination return Request>("GET", `/cate?page=${page}&size=${size}`); } else { - return Request("GET", `/cate/all`); + return Request("GET", `/cate/all?pattern=${pattern ? pattern : "recursion"}`); } }; diff --git a/src/pages/Article/index.tsx b/src/pages/Article/index.tsx index f9818ff..6e01b38 100644 --- a/src/pages/Article/index.tsx +++ b/src/pages/Article/index.tsx @@ -1,13 +1,17 @@ import React, { useState, useEffect } from 'react'; -import { Table, Button, Tag, notification, Card, Popconfirm } from 'antd'; -import { delArticleDataAPI, getArticleListAPI } from '@/api/Article'; -import dayjs from 'dayjs'; -import type { Article } from '@/types/app/article'; +import { Table, Button, Tag, notification, Card, Popconfirm, Form, Input, Cascader, Select, DatePicker } from 'antd'; import { titleSty } from '@/styles/sty' import Title from '@/components/Title'; +import { Link } from 'react-router-dom'; + +import { getCateListAPI } from '@/api/Cate' +import { getTagListAPI } from '@/api/Tag' +import { delArticleDataAPI, getArticleListAPI } from '@/api/Article'; import type { Tag as ArticleTag } from '@/types/app/tag'; import type { Cate } from '@/types/app/cate'; -import { Link } from 'react-router-dom'; +import type { Article } from '@/types/app/article'; + +import dayjs from 'dayjs'; const Article: React.FC = () => { const [loading, setLoading] = useState(false); @@ -116,11 +120,79 @@ const Article: React.FC = () => { }, ]; + const onSubmit = (values: any) => { + console.log(values); + + const cateIds: number[] = []; + + values.cateIds.forEach((item: number | number[]) => { + !(item instanceof Object) ? cateIds.push(item) : cateIds.push(...item.flat()) + }) + + const data = { + cateIds: cateIds.join(""), + tagIds: values.tagIds.join(""), + } + console.log(data); + } + + const [cateList, setCateList] = useState([]) + const [tagList, setTagList] = useState([]) + + const getCateList = async () => { + const { data } = await getCateListAPI() + setCateList(data as Cate[]) + } + + const getTagList = async () => { + const { data } = await getTagListAPI() + setTagList(data as ArticleTag[]) + } + + useEffect(() => { + getCateList() + getTagList() + }, []) + return ( <> - <Card className={`${titleSty} mt-2`}> + <Card className='my-2'> + <Form layout="inline" onFinish={onSubmit} autoComplete="off"> + <Form.Item label="标题" name="title" className='w-2/12'> + <Input placeholder='请输入标题关键词' /> + </Form.Item> + + <Form.Item label="选择分类" name="cateIds" className='w-2/12'> + <Cascader + options={cateList} + maxTagCount="responsive" + fieldNames={{ label: "name", value: "id" }} + placeholder="请选择文章分类" + /> + </Form.Item> + + <Form.Item label="选择标签" name="tagIds" className='w-2/12'> + <Select + allowClear + options={tagList} + fieldNames={{ label: 'name', value: 'id' }} + placeholder="请选择文章标签" + /> + </Form.Item> + + <Form.Item label="选择发布时间" name="createTime" className='w-3/12'> + <DatePicker showTime placeholder="选择时间范围" /> + </Form.Item> + + <Form.Item> + <Button type="primary" htmlType="submit">查询</Button> + </Form.Item> + </Form> + </Card> + + <Card className={`${titleSty}`}> <Table rowKey="id" dataSource={articleList} diff --git a/src/pages/Create/components/PublishForm/index.tsx b/src/pages/Create/components/PublishForm/index.tsx index 62e6628..580fbf2 100644 --- a/src/pages/Create/components/PublishForm/index.tsx +++ b/src/pages/Create/components/PublishForm/index.tsx @@ -2,15 +2,17 @@ import { useEffect, useState } from "react"; import { Form, Input, Button, Select, DatePicker, Cascader, FormProps, message } from "antd"; import TextArea from "antd/es/input/TextArea"; import { RuleObject } from "antd/es/form"; +import { useNavigate } from "react-router-dom"; +import "./index.scss" + import { addArticleDataAPI, editArticleDataAPI } from '@/api/Article' import { getCateListAPI } from '@/api/Cate' import { getTagListAPI } from '@/api/Tag' import { Cate } from "@/types/app/cate"; import { Tag } from "@/types/app/tag"; +import { Article } from "@/types/app/article"; + import dayjs from 'dayjs'; -import "./index.scss" -import { Article } from "@/types/article"; -import { useNavigate } from "react-router-dom"; interface FieldType { title: string, @@ -33,6 +35,7 @@ const PublishForm = ({ data, closeModel }: { data: Article, closeModel: () => vo const cateIds = transCateArray(data.cateList) const tagIds = data.tagList.map(item => item.id) + form.setFieldsValue({ ...data, cateIds, @@ -111,7 +114,7 @@ const PublishForm = ({ data, closeModel }: { data: Article, closeModel: () => vo maxTagCount="responsive" fieldNames={{ label: "name", value: "id" }} placeholder="请选择文章分类" - multiple + onChange={(value) => console.log(value)} className="w-full" /> </Form.Item> @@ -141,7 +144,6 @@ const PublishForm = ({ data, closeModel }: { data: Article, closeModel: () => vo export default PublishForm; -// 提取分类的id function transCateArray(arr: Cate[]): any { return arr.map((item: Cate) => { if (item.children && item.children.length > 0) { diff --git a/src/pages/Create/index.tsx b/src/pages/Create/index.tsx index a29648d..c7fa943 100644 --- a/src/pages/Create/index.tsx +++ b/src/pages/Create/index.tsx @@ -6,7 +6,7 @@ import PublishForm from './components/PublishForm'; import { useEffect, useState } from 'react'; import Title from '@/components/Title'; -import { Article } from '@/types/article'; +import { Article } from '@/types/app/article'; import { getArticleDataAPI } from '@/api/Article' import { useSearchParams } from 'react-router-dom'; diff --git a/src/utils/index.ts b/src/utils/index.ts new file mode 100644 index 0000000..e69de29