yexuejc007/PlayEdu-backend
1
0
Fork 0
mirror of https://github.com/PlayEdu/backend synced 2025-12-23 07:09:27 +08:00
Code Issues Packages Projects Releases Wiki Activity

资源分类

Browse Source
This commit is contained in:
禺狨
2023-03-08 18:07:07 +08:00
parent 8cde51d53b
commit db1c7652d1
5 changed files with 177 additions and 105 deletions
Download Patch File Download Diff File Expand all files Collapse all files

217
src/pages/resource/images/index.tsx
View File

@@ -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>
</>
);
};