mirror of
https://github.com/PlayEdu/backend
synced 2025-07-19 14:19:31 +08:00
资源分类
This commit is contained in:
禺狨
parent
8cde51d53b
commit
db1c7652d1
@ -30,7 +30,7 @@ export function updateResourceCategory(
|
||||
parentId: number,
|
||||
sort: number
|
||||
) {
|
||||
return client.post(`/backend/v1/resource-category/${id}`, {
|
||||
return client.put(`/backend/v1/resource-category/${id}`, {
|
||||
name,
|
||||
parent_id: parentId,
|
||||
sort,
|
||||
|
||||
@ -4,4 +4,5 @@ export * from "./left-menu";
|
||||
export * from "./upload-image-button";
|
||||
export * from "./tree-department";
|
||||
export * from "./back-bar";
|
||||
export * from "./permission-button";
|
||||
export * from "./permission-button";
|
||||
export * from "./tree-category";
|
||||
0
src/compenents/tree-category/index.module.less
Normal file
0
src/compenents/tree-category/index.module.less
Normal file
60
src/compenents/tree-category/index.tsx
Normal file
60
src/compenents/tree-category/index.tsx
Normal file
@ -0,0 +1,60 @@
|
||||
import { Button, Input, message, Tree } from "antd";
|
||||
import { useState, useEffect } from "react";
|
||||
import { resourceCategory } from "../../api/index";
|
||||
interface Option {
|
||||
key: string | number;
|
||||
title: string;
|
||||
children?: Option[];
|
||||
}
|
||||
|
||||
interface PropInterface {
|
||||
onUpdate: (keys: any) => void;
|
||||
}
|
||||
|
||||
export const TreeCategory = (props: PropInterface) => {
|
||||
const [treeData, setTreeData] = useState<any>([]);
|
||||
const [loading, setLoading] = useState<boolean>(true);
|
||||
useEffect(() => {
|
||||
setLoading(true);
|
||||
resourceCategory.resourceCategoryList().then((res: any) => {
|
||||
const categories = res.data.categories;
|
||||
const new_arr: Option[] = [
|
||||
{
|
||||
key: "",
|
||||
title: "全部",
|
||||
children: checkArr(categories, 0),
|
||||
},
|
||||
];
|
||||
setTreeData(new_arr);
|
||||
setTimeout(() => {
|
||||
setLoading(false);
|
||||
}, 1000);
|
||||
});
|
||||
}, []);
|
||||
|
||||
const checkArr = (categories: any[], id: number) => {
|
||||
const arr = [];
|
||||
for (let i = 0; i < categories[id].length; i++) {
|
||||
if (!categories[categories[id][i].id]) {
|
||||
arr.push({
|
||||
title: categories[id][i].name,
|
||||
key: categories[id][i].id,
|
||||
});
|
||||
} else {
|
||||
const new_arr: Option[] = checkArr(categories, categories[id][i].id);
|
||||
arr.push({
|
||||
title: categories[id][i].name,
|
||||
key: categories[id][i].id,
|
||||
children: new_arr,
|
||||
});
|
||||
}
|
||||
}
|
||||
return arr;
|
||||
};
|
||||
|
||||
const onSelect = (selectedKeys: any, info: any) => {
|
||||
props.onUpdate(selectedKeys);
|
||||
};
|
||||
|
||||
return <Tree onSelect={onSelect} treeData={treeData} />;
|
||||
};
|
||||
@ -14,6 +14,7 @@ import styles from "./index.module.less";
|
||||
import { CreateResourceCategory } from "../../../compenents/create-rs-category";
|
||||
import { CloseOutlined } from "@ant-design/icons";
|
||||
import { UploadImageSub } from "../../../compenents/upload-image-button/upload-image-sub";
|
||||
import { TreeCategory, PerButton } from "../../../compenents";
|
||||
|
||||
interface CategoryItem {
|
||||
id: number;
|
||||
@ -52,6 +53,7 @@ export const ResourceImagesPage = () => {
|
||||
const [page, setPage] = useState(1);
|
||||
const [size, setSize] = useState(12);
|
||||
const [total, setTotal] = useState(0);
|
||||
const [category_ids, setCategoryIds] = useState<any>([]);
|
||||
|
||||
// 获取图片资源的分类
|
||||
const getCategories = () => {
|
||||
@ -104,112 +106,121 @@ export const ResourceImagesPage = () => {
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="playedu-main-body">
|
||||
<Row gutter={16}>
|
||||
<Col span={4}>
|
||||
<>
|
||||
<div className={styles.categoryTitle}>
|
||||
<div>图片分类</div>
|
||||
<div className="ml-15">
|
||||
<CreateResourceCategory
|
||||
type="IMAGE"
|
||||
onUpdate={() => {
|
||||
setRefreshCategories(refreshCategories + 1);
|
||||
}}
|
||||
></CreateResourceCategory>
|
||||
</div>
|
||||
</div>
|
||||
{categories.length === 0 && (
|
||||
<Empty
|
||||
description="暂无分类"
|
||||
image={Empty.PRESENTED_IMAGE_SIMPLE}
|
||||
></Empty>
|
||||
)}
|
||||
|
||||
{categories.map((item) => (
|
||||
<div
|
||||
key={item.id}
|
||||
className={`${styles.categoryItem} ${
|
||||
item.id === defaultCid ? "active" : ""
|
||||
}`}
|
||||
onClick={() => {
|
||||
setDefaultCid(item.id);
|
||||
}}
|
||||
>
|
||||
<div>{item.name}</div>
|
||||
{item.id !== 0 && (
|
||||
<Button
|
||||
className="ml-15"
|
||||
danger
|
||||
shape="circle"
|
||||
size="small"
|
||||
onClick={() => {
|
||||
removeCategory(item.id);
|
||||
}}
|
||||
icon={<CloseOutlined />}
|
||||
/>
|
||||
<Row>
|
||||
<Col span={4}>
|
||||
<div className="playedu-main-body" style={{ marginLeft: -24 }}>
|
||||
<TreeCategory onUpdate={(keys: any) => setCategoryIds(keys)} />
|
||||
</div>
|
||||
</Col>
|
||||
<Col span={20}>
|
||||
<div className="playedu-main-body">
|
||||
<Row gutter={16}>
|
||||
<Col span={4}>
|
||||
<>
|
||||
<div className={styles.categoryTitle}>
|
||||
<div>图片分类</div>
|
||||
<div className="ml-15">
|
||||
<CreateResourceCategory
|
||||
type="IMAGE"
|
||||
onUpdate={() => {
|
||||
setRefreshCategories(refreshCategories + 1);
|
||||
}}
|
||||
></CreateResourceCategory>
|
||||
</div>
|
||||
</div>
|
||||
{categories.length === 0 && (
|
||||
<Empty
|
||||
description="暂无分类"
|
||||
image={Empty.PRESENTED_IMAGE_SIMPLE}
|
||||
></Empty>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</>
|
||||
</Col>
|
||||
<Col span={20}>
|
||||
<Row style={{ marginBottom: 24 }}>
|
||||
<Col span={24}>
|
||||
<UploadImageSub
|
||||
categoryId={defaultCid}
|
||||
onUpdate={() => {
|
||||
resetImageList();
|
||||
}}
|
||||
></UploadImageSub>
|
||||
|
||||
{categories.map((item) => (
|
||||
<div
|
||||
key={item.id}
|
||||
className={`${styles.categoryItem} ${
|
||||
item.id === defaultCid ? "active" : ""
|
||||
}`}
|
||||
onClick={() => {
|
||||
setDefaultCid(item.id);
|
||||
}}
|
||||
>
|
||||
<div>{item.name}</div>
|
||||
{item.id !== 0 && (
|
||||
<Button
|
||||
className="ml-15"
|
||||
danger
|
||||
shape="circle"
|
||||
size="small"
|
||||
onClick={() => {
|
||||
removeCategory(item.id);
|
||||
}}
|
||||
icon={<CloseOutlined />}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</>
|
||||
</Col>
|
||||
<Col span={20}>
|
||||
<Row style={{ marginBottom: 24 }}>
|
||||
<Col span={24}>
|
||||
<UploadImageSub
|
||||
categoryId={defaultCid}
|
||||
onUpdate={() => {
|
||||
resetImageList();
|
||||
}}
|
||||
></UploadImageSub>
|
||||
</Col>
|
||||
</Row>
|
||||
<Row
|
||||
gutter={[
|
||||
{ xs: 8, sm: 16, md: 24, lg: 32 },
|
||||
{ xs: 4, sm: 8, md: 12, lg: 16 },
|
||||
]}
|
||||
>
|
||||
{imageList.length === 0 && (
|
||||
<Col span={24}>
|
||||
<Empty description="暂无图片" />
|
||||
</Col>
|
||||
)}
|
||||
|
||||
{imageList.map((item) => (
|
||||
<Col
|
||||
key={item.id}
|
||||
span={6}
|
||||
onClick={() => {
|
||||
console.log(item.url);
|
||||
}}
|
||||
>
|
||||
<Image
|
||||
preview={false}
|
||||
width={120}
|
||||
height={80}
|
||||
src={item.url}
|
||||
/>
|
||||
</Col>
|
||||
))}
|
||||
|
||||
{imageList.length > 0 && (
|
||||
<Col span={24}>
|
||||
<Pagination
|
||||
showSizeChanger
|
||||
onChange={(currentPage, currentSize) => {
|
||||
setPage(currentPage);
|
||||
setSize(currentSize);
|
||||
}}
|
||||
defaultCurrent={page}
|
||||
total={total}
|
||||
/>
|
||||
</Col>
|
||||
)}
|
||||
</Row>
|
||||
</Col>
|
||||
</Row>
|
||||
<Row
|
||||
gutter={[
|
||||
{ xs: 8, sm: 16, md: 24, lg: 32 },
|
||||
{ xs: 4, sm: 8, md: 12, lg: 16 },
|
||||
]}
|
||||
>
|
||||
{imageList.length === 0 && (
|
||||
<Col span={24}>
|
||||
<Empty description="暂无图片" />
|
||||
</Col>
|
||||
)}
|
||||
|
||||
{imageList.map((item) => (
|
||||
<Col
|
||||
key={item.id}
|
||||
span={6}
|
||||
onClick={() => {
|
||||
console.log(item.url);
|
||||
}}
|
||||
>
|
||||
<Image
|
||||
preview={false}
|
||||
width={120}
|
||||
height={80}
|
||||
src={item.url}
|
||||
/>
|
||||
</Col>
|
||||
))}
|
||||
|
||||
{imageList.length > 0 && (
|
||||
<Col span={24}>
|
||||
<Pagination
|
||||
showSizeChanger
|
||||
onChange={(currentPage, currentSize) => {
|
||||
setPage(currentPage);
|
||||
setSize(currentSize);
|
||||
}}
|
||||
defaultCurrent={page}
|
||||
total={total}
|
||||
/>
|
||||
</Col>
|
||||
)}
|
||||
</Row>
|
||||
</Col>
|
||||
</Row>
|
||||
</div>
|
||||
</div>
|
||||
</Col>
|
||||
</Row>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user