achenc1013/ThriveX-Admin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

完成标签管理

Browse Source
This commit is contained in:
宇阳
2024-08-08 23:24:20 +08:00
parent af37fa997f
commit 805ea3b99f
5 changed files with 166 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
src/App.tsx
View File

@@ -8,6 +8,7 @@ import Create from './pages/Create';
import Cate from './pages/Cate';
import Article from './pages/Article';
import Comment from './pages/Comment';
import Tag from './pages/Tag';
import Web from './pages/Web';
import Swiper from './pages/Swiper';
import Setup from './pages/Setup';
@@ -101,6 +102,16 @@ function App() {
}
/>
<Route
path="/tag"
element={
<>
<PageTitle title="Thrive - 标签管理" />
<Tag />
</>
}
/>
<Route
path="/comment"
element={

12
src/components/Sidebar/index.tsx
View File

@@ -182,6 +182,18 @@ const Sidebar = ({ sidebarOpen, setSidebarOpen }: SidebarProps) => {
</NavLink>
</li>
<li>
<NavLink
to="/tag"
className={({ isActive }) =>
'group relative flex items-center gap-2.5 rounded-md px-4 font-medium text-bodydark2 duration-300 ease-in-out hover:text-white ' +
(isActive && '!text-white')
}
>
标签管理
</NavLink>
</li>
<li>
<NavLink
to="/comment"

10
src/pages/Cate/index.scss
View File

@@ -4,9 +4,9 @@
width: 100% !important;
}
.ant-tree-node-selected {
.controls {
display: block !important;
}
}
// .ant-tree-node-selected {
// .controls {
// display: block !important;
// }
// }
}

33
src/pages/Cate/index.tsx
View File

@@ -1,4 +1,4 @@
import React, { useState, useEffect, useRef } from 'react';
import { useState, useEffect } from 'react';
import { Cate } from '@/types/cate';
import { addCateDataAPI, delCateDataAPI, editCateDataAPI, getCateDataAPI, getCateListAPI } from '@/api/Cate';
import { DownOutlined } from '@ant-design/icons';
@@ -6,12 +6,13 @@ import { Form, Input, Button, Tree, Modal, Spin, Dropdown, Card, MenuProps, Popc
import Title from '@/components/Title';
import "./index.scss"
const CatePage: React.FC = () => {
const CatePage = () => {
const [loading, setLoading] = useState(false);
const [model, setModel] = useState(false);
const [isModelOpen, setIsModelOpen] = useState(false);
const [cate, setCate] = useState<Cate>({} as Cate);
const [list, setList] = useState<Cate[]>([]);
const [isMethod, setIsMethod] = useState<'create' | 'edit'>('create');
const [form] = Form.useForm();
const getCateList = async () => {
const { data } = await getCateListAPI();
@@ -21,14 +22,18 @@ const CatePage: React.FC = () => {
const addCateData = (id: number) => {
setIsMethod("create")
setModel(true);
setIsModelOpen(true);
console.log(cate, 333);
form.resetFields();
setCate({ ...cate, level: id });
};
const editCateData = async (id: number) => {
setIsMethod("edit")
setLoading(true);
setModel(true);
setIsModelOpen(true);
const { data } = await getCateDataAPI(id);
setCate(data);
form.setFieldsValue(data);
@@ -42,8 +47,6 @@ const CatePage: React.FC = () => {
getCateList();
};
const [form] = Form.useForm();
const submit = async () => {
form.validateFields().then(async (values: Cate) => {
if (isMethod === "edit") {
@@ -58,7 +61,7 @@ const CatePage: React.FC = () => {
form.resetFields();
setCate({} as Cate);
setModel(false);
setIsModelOpen(false);
getCateList();
setIsMethod("create")
})
@@ -66,7 +69,7 @@ const CatePage: React.FC = () => {
const closeModel = () => {
setIsMethod("create")
setModel(false);
setIsModelOpen(false);
form.resetFields();
setCate({} as Cate);
};
@@ -98,11 +101,9 @@ const CatePage: React.FC = () => {
<div className='group w-full flex justify-between items-center'>
<h3>{item.name}</h3>
<div className='controls hidden'>
<Dropdown menu={{ items }} arrow>
<Button type='link' size='small'>操作 <DownOutlined /></Button>
</Dropdown>
</div>
<Dropdown menu={{ items }} arrow>
<Button type='link' size='small'>操作 <DownOutlined /></Button>
</Dropdown>
</div>
),
key: item.id,
@@ -122,14 +123,14 @@ const CatePage: React.FC = () => {
<Card className={`CatePage [&>.ant-card-body]:!p-2 [&>.ant-card-body]:!pb-6 mt-2`}>
<div className='my-2 text-center'>
<Button type="primary" onClick={() => setModel(true)}>新增一级分类</Button>
<Button type="primary" onClick={() => addCateData(0)}>新增一级分类</Button>
</div>
<Spin spinning={loading}>
<Tree defaultExpandAll={true} treeData={treeData(list)} />
</Spin>
<Modal title={isMethod === "edit" ? "编辑分类" : "新增分类"} open={model} onCancel={closeModel} footer={null}>
<Modal title={isMethod === "edit" ? "编辑分类" : "新增分类"} open={isModelOpen} onCancel={closeModel} footer={null}>
<Form form={form} layout="vertical" initialValues={cate} size='large' className='mt-6'>
<Form.Item label="名称" name="name" rules={[{ required: true, message: '分类名称不能为空' }]}>
<Input placeholder="大前端" />

120
src/pages/Tag/index.tsx Normal file
View File

@@ -0,0 +1,120 @@
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 { addTagDataAPI, delTagDataAPI, editTagDataAPI, getTagListAPI } from '@/api/Tag';
import Title from '@/components/Title';
interface Tag {
id?: number;
name: string;
}
const TagManagement: React.FC = () => {
const [form] = Form.useForm<Tag>();
const [loading, setLoading] = useState(false);
const [tag, setTag] = useState<Tag>({ name: '' });
const [title, setTitle] = useState<string>('新增标签');
const [list, setList] = useState<Tag[]>([]);
// 获取标签列表
const getTagList = async () => {
const { data } = await getTagListAPI()
setList(data as Tag[]);
setLoading(false)
}
useEffect(() => {
setLoading(true)
getTagList()
}, []);
const delTagData = async (id: number) => {
setLoading(true);
await delTagDataAPI(id);
message.success('🎉 删除标签成功');
getTagList()
};
const editTagData = (data: Tag) => {
setLoading(true);
setTag(data);
setTitle('编辑标签');
};
const submit = () => {
form.validateFields().then(async (values) => {
const fn = (message: string) => {
form.resetFields();
notification.success({
message: '成功',
description: message,
});
getTagList()
};
if (tag.id) {
await editTagDataAPI(tag);
setTitle('新增标签');
fn('🎉 编辑标签成功');
} else {
await addTagDataAPI(values);
fn('🎉 新增标签成功');
}
})
};
return (
<>
<Title value="标签管理" />
<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>
<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>
</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>
</Card>
</>
);
};
export default TagManagement;