From ffc2260d39b8f8a22ce45743bf30249c5a77a1fa Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=AE=87=E9=98=B3?= <3311118881@qq.com> Date: Fri, 9 Aug 2024 14:35:26 +0800 Subject: [PATCH] =?UTF-8?q?=E8=A7=A3=E5=86=B3=E7=9B=AE=E5=89=8D=E5=B7=B2?= =?UTF-8?q?=E7=9F=A5=E9=97=AE=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/Cate/index.tsx | 6 +- src/pages/Tag/index.tsx | 116 +++++++++++++++++++-------------------- 2 files changed, 61 insertions(+), 61 deletions(-) diff --git a/src/pages/Cate/index.tsx b/src/pages/Cate/index.tsx index 47060a8..59d5078 100644 --- a/src/pages/Cate/index.tsx +++ b/src/pages/Cate/index.tsx @@ -13,7 +13,7 @@ const CatePage = () => { const [list, setList] = useState([]); const [isMethod, setIsMethod] = useState<'create' | 'edit'>('create'); const [form] = Form.useForm(); - + const getCateList = async () => { const { data } = await getCateListAPI(); setList(data as Cate[]); @@ -130,8 +130,8 @@ const CatePage = () => { - -
+ + diff --git a/src/pages/Tag/index.tsx b/src/pages/Tag/index.tsx index 1eb11d1..377a91f 100644 --- a/src/pages/Tag/index.tsx +++ b/src/pages/Tag/index.tsx @@ -1,6 +1,5 @@ import React, { useState, useEffect } from 'react'; -import { Form, Input, Button, Table, notification, Card, message, Popconfirm } from 'antd'; -import { TagOutlined, SettingOutlined } from '@ant-design/icons'; +import { Form, Input, Button, Table, Card, message, Popconfirm, Spin } from 'antd'; import { addTagDataAPI, delTagDataAPI, editTagDataAPI, getTagListAPI } from '@/api/Tag'; import Title from '@/components/Title'; @@ -18,50 +17,49 @@ const TagManagement: React.FC = () => { // 获取标签列表 const getTagList = async () => { - const { data } = await getTagListAPI() + const { data } = await getTagListAPI(); setList(data as Tag[]); - setLoading(false) - } + setLoading(false); + }; useEffect(() => { - setLoading(true) - getTagList() + setLoading(true); + getTagList(); }, []); const delTagData = async (id: number) => { setLoading(true); await delTagDataAPI(id); message.success('🎉 删除标签成功'); - getTagList() + getTagList(); }; const editTagData = (data: Tag) => { - setLoading(true); setTag(data); + form.setFieldsValue(data) setTitle('编辑标签'); }; const submit = () => { form.validateFields().then(async (values) => { - const fn = (message: string) => { + setLoading(true); + const fn = (value: string) => { form.resetFields(); - - notification.success({ - message: '成功', - description: message, - }); - getTagList() + form.setFieldsValue({ name: '' }) + setTag({} as Tag) + message.success(value); + getTagList(); }; if (tag.id) { - await editTagDataAPI(tag); + await editTagDataAPI({ ...tag, ...values }); setTitle('新增标签'); fn('🎉 编辑标签成功'); } else { await addTagDataAPI(values); fn('🎉 新增标签成功'); } - }) + }); }; return ( @@ -69,49 +67,51 @@ const TagManagement: React.FC = () => { <Card className="mt-2"> - <div className="w-8/12 flex justify-between px-8 mx-auto"> - <div className="flex flex-col w-[40%]"> - <h2 className="text-xl pb-4 text-center">{title}</h2> + <Spin spinning={loading}> + <div className="w-8/12 flex justify-between px-8 mx-auto"> + <div className="flex flex-col w-[40%]"> + <h2 className="text-xl pb-4 text-center">{title}</h2> - <Form form={form} size="large" layout="vertical" initialValues={tag}> - <Form.Item - label="标签名称" - name="name" - rules={[{ required: true, message: '标签不能为空' }]} - > - <Input placeholder="大前端" /> - </Form.Item> + <Form form={form} size="large" layout="vertical" initialValues={tag}> + <Form.Item + label="标签名称" + name="name" + rules={[{ required: true, message: '标签不能为空' }]} + > + <Input placeholder="大前端" /> + </Form.Item> - <Form.Item> - <Button type="primary" size="large" onClick={submit} className="w-full">{title}</Button> - </Form.Item> - </Form> + <Form.Item> + <Button type="primary" size="large" onClick={submit} className="w-full">{title}</Button> + </Form.Item> + </Form> + </div> + + <div className="flex flex-col w-[50%]"> + <h2 className="text-xl pb-4 text-center">标签列表</h2> + + <Table dataSource={list} rowKey="id"> + <Table.Column title="ID" dataIndex="id" /> + <Table.Column title="名称" dataIndex="name" align="center" /> + <Table.Column + title="操作" + align="center" + render={(text, record: Tag) => ( + <> + <div className='flex justify-center space-x-4'> + <Button size="small" onClick={() => editTagData(record)}>编辑</Button> + + <Popconfirm title="警告" description="你确定要删除吗" okText="确定" cancelText="取消" onConfirm={() => delTagData(record.id!)}> + <Button size="small" type="primary" danger>删除</Button> + </Popconfirm> + </div> + </> + )} + /> + </Table> + </div> </div> - - <div className="flex flex-col w-[50%]"> - <h2 className="text-xl pb-4 text-center">标签列表</h2> - - <Table dataSource={list} rowKey="id"> - <Table.Column title="ID" dataIndex="id" /> - <Table.Column title="名称" dataIndex="name" align="center" /> - <Table.Column - title="操作" - align="center" - render={(text, record: Tag) => ( - <> - <div className='flex justify-center space-x-4'> - <Button size="small" onClick={() => editTagData(record)}>编辑</Button> - - <Popconfirm title="警告" description="你确定要删除吗" okText="确定" cancelText="取消" onConfirm={() => delTagData(record.id!)}> - <Button size="small" type="primary" danger>删除</Button> - </Popconfirm> - </div> - </> - )} - /> - </Table> - </div> - </div> + </Spin> </Card> </> );