mirror of
https://github.com/PlayEdu/backend
synced 2025-06-20 16:42:47 +08:00
资源分类页面初步
This commit is contained in:
禺狨
parent
23b01e0fb9
commit
74984e07fa
@ -16,6 +16,30 @@ code {
|
||||
monospace;
|
||||
}
|
||||
|
||||
.w-250px {
|
||||
width: 250px;
|
||||
}
|
||||
|
||||
.w-300px {
|
||||
width: 300px;
|
||||
}
|
||||
|
||||
.w-350px {
|
||||
width: 350px;
|
||||
}
|
||||
|
||||
.w-400px {
|
||||
width: 200px;
|
||||
}
|
||||
|
||||
.w-450px {
|
||||
width: 200px;
|
||||
}
|
||||
|
||||
.w-500px {
|
||||
width: 200px;
|
||||
}
|
||||
|
||||
.ml-8 {
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
@ -0,0 +1 @@
|
||||
|
||||
@ -1,19 +1,20 @@
|
||||
import React, { useState, useEffect } from "react";
|
||||
import { Button, Space, Table, Popconfirm, message } from "antd";
|
||||
import { Button, Space, Tree, Modal, message } from "antd";
|
||||
import type { ColumnsType } from "antd/es/table";
|
||||
import styles from "./index.module.less";
|
||||
import { PlusOutlined, ReloadOutlined } from "@ant-design/icons";
|
||||
import { PlusOutlined, ExclamationCircleFilled } from "@ant-design/icons";
|
||||
import { resourceCategory } from "../../../api/index";
|
||||
import { dateFormat } from "../../../utils/index";
|
||||
import { Link, useNavigate } from "react-router-dom";
|
||||
import { PerButton } from "../../../compenents";
|
||||
import type { DataNode, TreeProps } from "antd/es/tree";
|
||||
|
||||
const { confirm } = Modal;
|
||||
|
||||
interface Option {
|
||||
id: string | number;
|
||||
name: string;
|
||||
created_at: string;
|
||||
key: string | number;
|
||||
title: any;
|
||||
children?: Option[];
|
||||
sort: number;
|
||||
}
|
||||
|
||||
interface DataType {
|
||||
@ -26,71 +27,28 @@ interface DataType {
|
||||
export const ResourceCategoryPage: React.FC = () => {
|
||||
const navigate = useNavigate();
|
||||
const [loading, setLoading] = useState<boolean>(true);
|
||||
const [list, setList] = useState<any>([]);
|
||||
const [refresh, setRefresh] = useState(false);
|
||||
const [tableKey, setTableKey] = useState<number>(0);
|
||||
|
||||
const columns: ColumnsType<DataType> = [
|
||||
{
|
||||
title: "分类名",
|
||||
dataIndex: "name",
|
||||
render: (text: string) => <span>{text}</span>,
|
||||
},
|
||||
|
||||
{
|
||||
title: "操作",
|
||||
key: "action",
|
||||
fixed: "right",
|
||||
width: 160,
|
||||
render: (_, record) => (
|
||||
<Space size="small">
|
||||
<PerButton
|
||||
type="link"
|
||||
text="编辑"
|
||||
class="b-link c-red"
|
||||
icon={null}
|
||||
p="resource-category"
|
||||
onClick={() => navigate(`/resource-category/update/${record.id}`)}
|
||||
disabled={null}
|
||||
/>
|
||||
<Popconfirm
|
||||
title="警告"
|
||||
description="即将删除此分类，确认操作？"
|
||||
onConfirm={() => delUser(record.id)}
|
||||
okText="确定"
|
||||
cancelText="取消"
|
||||
>
|
||||
<PerButton
|
||||
type="link"
|
||||
text="删除"
|
||||
class="b-link c-red"
|
||||
icon={null}
|
||||
p="resource-category"
|
||||
onClick={() => null}
|
||||
disabled={null}
|
||||
/>
|
||||
</Popconfirm>
|
||||
</Space>
|
||||
),
|
||||
},
|
||||
];
|
||||
const [treeData, setTreeData] = useState<any>([]);
|
||||
const [selectKey, setSelectKey] = useState<any>([]);
|
||||
|
||||
useEffect(() => {
|
||||
getData();
|
||||
}, [refresh]);
|
||||
|
||||
const onSelect = (selectedKeys: any, info: any) => {
|
||||
setSelectKey(selectedKeys);
|
||||
console.log(selectedKeys);
|
||||
};
|
||||
|
||||
const getData = () => {
|
||||
setLoading(true);
|
||||
resourceCategory.resourceCategoryList().then((res: any) => {
|
||||
const categories = res.data.categories;
|
||||
let num = tableKey;
|
||||
if (JSON.stringify(categories) !== "{}") {
|
||||
const new_arr: Option[] = checkArr(categories, 0);
|
||||
setList(new_arr);
|
||||
setTreeData(new_arr);
|
||||
}
|
||||
|
||||
setLoading(false);
|
||||
setTableKey(num + 1);
|
||||
});
|
||||
};
|
||||
|
||||
@ -99,18 +57,72 @@ export const ResourceCategoryPage: React.FC = () => {
|
||||
for (let i = 0; i < categories[id].length; i++) {
|
||||
if (!categories[categories[id][i].id]) {
|
||||
arr.push({
|
||||
name: categories[id][i].name,
|
||||
id: categories[id][i].id,
|
||||
sort: categories[id][i].sort,
|
||||
created_at: categories[id][i].created_at,
|
||||
title: (
|
||||
<div className="d-flex">
|
||||
<div className="w-250px mr-24">{categories[id][i].name}</div>
|
||||
<Space size="small">
|
||||
<PerButton
|
||||
type="link"
|
||||
text="编辑"
|
||||
class="b-link c-red"
|
||||
icon={null}
|
||||
p="resource-category"
|
||||
onClick={() =>
|
||||
navigate(
|
||||
`/resource-category/update/${categories[id][i].id}`
|
||||
)
|
||||
}
|
||||
disabled={null}
|
||||
/>
|
||||
|
||||
<PerButton
|
||||
type="link"
|
||||
text="删除"
|
||||
class="b-link c-red"
|
||||
icon={null}
|
||||
p="resource-category"
|
||||
onClick={() => delUser(categories[id][i].id)}
|
||||
disabled={null}
|
||||
/>
|
||||
</Space>
|
||||
</div>
|
||||
),
|
||||
key: categories[id][i].id,
|
||||
});
|
||||
} else {
|
||||
const new_arr: Option[] = checkArr(categories, categories[id][i].id);
|
||||
arr.push({
|
||||
name: categories[id][i].name,
|
||||
id: categories[id][i].id,
|
||||
created_at: categories[id][i].created_at,
|
||||
sort: categories[id][i].sort,
|
||||
title: (
|
||||
<div className="d-flex">
|
||||
<div className="w-250px mr-24">{categories[id][i].name}</div>
|
||||
<Space size="small">
|
||||
<PerButton
|
||||
type="link"
|
||||
text="编辑"
|
||||
class="b-link c-red"
|
||||
icon={null}
|
||||
p="resource-category"
|
||||
onClick={() =>
|
||||
navigate(
|
||||
`/resource-category/update/${categories[id][i].id}`
|
||||
)
|
||||
}
|
||||
disabled={null}
|
||||
/>
|
||||
|
||||
<PerButton
|
||||
type="link"
|
||||
text="删除"
|
||||
class="b-link c-red"
|
||||
icon={null}
|
||||
p="resource-category"
|
||||
onClick={() => delUser(categories[id][i].id)}
|
||||
disabled={null}
|
||||
/>
|
||||
</Space>
|
||||
</div>
|
||||
),
|
||||
key: categories[id][i].id,
|
||||
children: new_arr,
|
||||
});
|
||||
}
|
||||
@ -119,59 +131,75 @@ export const ResourceCategoryPage: React.FC = () => {
|
||||
};
|
||||
|
||||
const resetData = () => {
|
||||
setList([]);
|
||||
setTreeData([]);
|
||||
setRefresh(!refresh);
|
||||
};
|
||||
|
||||
const delUser = (id: any) => {
|
||||
resourceCategory.destroyResourceCategory(id).then((res: any) => {
|
||||
message.success("操作成功");
|
||||
resetData();
|
||||
if (id === 0) {
|
||||
return;
|
||||
}
|
||||
|
||||
confirm({
|
||||
title: "操作确认",
|
||||
icon: <ExclamationCircleFilled />,
|
||||
content: "确认删除选中图片？",
|
||||
okText: "确认",
|
||||
okType: "danger",
|
||||
cancelText: "取消",
|
||||
onOk() {
|
||||
resourceCategory.destroyResourceCategory(id).then((res: any) => {
|
||||
message.success("操作成功");
|
||||
resetData();
|
||||
});
|
||||
},
|
||||
onCancel() {
|
||||
console.log("Cancel");
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
const onDragEnter: TreeProps["onDragEnter"] = (info) => {
|
||||
console.log(info);
|
||||
// expandedKeys 需要受控时设置
|
||||
// setExpandedKeys(info.expandedKeys)
|
||||
};
|
||||
|
||||
const onDrop: TreeProps["onDrop"] = (info) => {
|
||||
console.log(info);
|
||||
// expandedKeys 需要受控时设置
|
||||
// setExpandedKeys(info.expandedKeys)
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="playedu-main-top mb-24">
|
||||
<div className="d-flex">
|
||||
<Link
|
||||
style={{ textDecoration: "none" }}
|
||||
to={`/resource-category/create`}
|
||||
>
|
||||
<PerButton
|
||||
type="primary"
|
||||
text="新建分类"
|
||||
class="mr-16"
|
||||
icon={<PlusOutlined />}
|
||||
p="resource-category"
|
||||
onClick={() => null}
|
||||
disabled={null}
|
||||
/>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
<div className="playedu-main-body">
|
||||
<div className="float-left j-b-flex mb-24">
|
||||
<div className="d-flex">
|
||||
<Link
|
||||
style={{ textDecoration: "none" }}
|
||||
to={`/resource-category/create`}
|
||||
>
|
||||
<PerButton
|
||||
type="primary"
|
||||
text="新建分类"
|
||||
class="mr-16"
|
||||
icon={<PlusOutlined />}
|
||||
p="resource-category"
|
||||
onClick={() => null}
|
||||
disabled={null}
|
||||
/>
|
||||
</Link>
|
||||
</div>
|
||||
<div className="d-flex">
|
||||
<Button
|
||||
type="link"
|
||||
icon={<ReloadOutlined />}
|
||||
style={{ color: "#333333" }}
|
||||
onClick={() => {
|
||||
setRefresh(!refresh);
|
||||
}}
|
||||
></Button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="float-left">
|
||||
<Table
|
||||
pagination={false}
|
||||
key={tableKey}
|
||||
columns={columns}
|
||||
dataSource={list}
|
||||
loading={loading}
|
||||
rowKey={(record) => record.id}
|
||||
defaultExpandAllRows={true}
|
||||
/>
|
||||
</div>
|
||||
<Tree
|
||||
onSelect={onSelect}
|
||||
treeData={treeData}
|
||||
draggable
|
||||
blockNode
|
||||
onDragEnter={onDragEnter}
|
||||
onDrop={onDrop}
|
||||
/>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user