mirror of
https://github.com/PlayEdu/backend
synced 2025-12-23 11:33:25 +08:00
素材库优化
This commit is contained in:
none
20
src/compenents/upload-image-button/index.module.less
Normal file
20
src/compenents/upload-image-button/index.module.less
Normal file
@@ -0,0 +1,20 @@
|
||||
.categoryItem {
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
line-height: 50px;
|
||||
float: left;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
|
||||
&.active {
|
||||
background-color: red;
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
|
||||
.categoryTitle {
|
||||
width: 100%;
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
display: flex;
|
||||
}
|
||||
227
src/compenents/upload-image-button/index.tsx
Normal file
227
src/compenents/upload-image-button/index.tsx
Normal file
@@ -0,0 +1,227 @@
|
||||
import React, { useEffect, useState } from "react";
|
||||
import {
|
||||
Button,
|
||||
Row,
|
||||
Col,
|
||||
Modal,
|
||||
Image,
|
||||
Empty,
|
||||
message,
|
||||
Pagination,
|
||||
} from "antd";
|
||||
import { resource, resourceCategory } from "../../api";
|
||||
import styles from "./index.module.less";
|
||||
import { CreateResourceCategory } from "../create-resource-category";
|
||||
import { CloseOutlined } from "@ant-design/icons";
|
||||
import { UploadImageSub } from "./upload-image-sub";
|
||||
|
||||
interface CategoryItem {
|
||||
id: number;
|
||||
type: string;
|
||||
name: string;
|
||||
sort: number;
|
||||
}
|
||||
|
||||
interface ImageItem {
|
||||
id: number;
|
||||
category_id: number;
|
||||
name: string;
|
||||
extension: string;
|
||||
size: number;
|
||||
disk: string;
|
||||
file_id: string;
|
||||
path: string;
|
||||
url: string;
|
||||
created_at: string;
|
||||
}
|
||||
|
||||
interface PropsInterface {
|
||||
onSelected: (url: string) => void;
|
||||
}
|
||||
|
||||
export const UploadImageButton = (props: PropsInterface) => {
|
||||
const [showModal, setShowModal] = useState(false);
|
||||
const [categories, setCategories] = useState<CategoryItem[]>([]);
|
||||
const [defaultCid, setDefaultCid] = useState(0);
|
||||
const [refreshCategories, setRefreshCategories] = useState(1);
|
||||
|
||||
const [imageList, setImageList] = useState<ImageItem[]>([]);
|
||||
const [refresh, setRefresh] = useState(false);
|
||||
const [page, setPage] = useState(0);
|
||||
const [size, setSize] = useState(12);
|
||||
const [total, setTotal] = useState(0);
|
||||
|
||||
const getCategories = () => {
|
||||
resourceCategory.resourceCategoryList("IMAGE").then((res: any) => {
|
||||
let data = res.data.data;
|
||||
if (data.length > 0) {
|
||||
setDefaultCid(data[0].id);
|
||||
setCategories(res.data.data);
|
||||
}
|
||||
});
|
||||
};
|
||||
const removeCategory = (id: number) => {
|
||||
resourceCategory.destroyResourceCategory(id).then(() => {
|
||||
message.success("删除成功");
|
||||
setRefreshCategories(refreshCategories + 1);
|
||||
});
|
||||
};
|
||||
|
||||
const getImageList = () => {
|
||||
if (defaultCid === 0) {
|
||||
return;
|
||||
}
|
||||
resource
|
||||
.resourceList(page, size, "", "", "", "IMAGE", defaultCid + "")
|
||||
.then((res: any) => {
|
||||
setTotal(res.data.total);
|
||||
setImageList(res.data.data);
|
||||
})
|
||||
.catch((err) => {
|
||||
console.log("错误,", err);
|
||||
});
|
||||
};
|
||||
|
||||
const resetImageList = () => {
|
||||
setPage(1);
|
||||
setImageList([]);
|
||||
setRefresh(!refresh);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
getCategories();
|
||||
}, [refreshCategories]);
|
||||
|
||||
useEffect(() => {
|
||||
getImageList();
|
||||
}, [defaultCid, refresh, page, size]);
|
||||
|
||||
return (
|
||||
<>
|
||||
<Button
|
||||
onClick={() => {
|
||||
setShowModal(true);
|
||||
}}
|
||||
>
|
||||
上传图片
|
||||
</Button>
|
||||
|
||||
{showModal && (
|
||||
<Modal
|
||||
title="图片素材库"
|
||||
closable={false}
|
||||
onCancel={() => {
|
||||
setShowModal(false);
|
||||
}}
|
||||
open={true}
|
||||
width="1000px"
|
||||
maskClosable={false}
|
||||
>
|
||||
<Row gutter={16}>
|
||||
<Col span={4}>
|
||||
<>
|
||||
<div className={styles.categoryTitle}>
|
||||
<div>图片分类</div>
|
||||
<div>
|
||||
<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>
|
||||
<div>
|
||||
<Button
|
||||
danger
|
||||
shape="circle"
|
||||
onClick={() => {
|
||||
removeCategory(item.id);
|
||||
}}
|
||||
icon={<CloseOutlined />}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</>
|
||||
</Col>
|
||||
<Col span={20}>
|
||||
<Row>
|
||||
<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={() => {
|
||||
props.onSelected(item.url);
|
||||
setShowModal(false);
|
||||
}}
|
||||
>
|
||||
<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>
|
||||
</Modal>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,79 @@
|
||||
import { Button, message, Modal } from "antd";
|
||||
import Dragger from "antd/es/upload/Dragger";
|
||||
import { useState } from "react";
|
||||
import config from "../../../js/config";
|
||||
import { getToken } from "../../../utils";
|
||||
import { InboxOutlined } from "@ant-design/icons";
|
||||
|
||||
interface PropsInterface {
|
||||
categoryId: number;
|
||||
onUpdate: () => void;
|
||||
}
|
||||
|
||||
export const UploadImageSub = (props: PropsInterface) => {
|
||||
const [showModal, setShowModal] = useState(false);
|
||||
|
||||
const uploadProps = {
|
||||
name: "file",
|
||||
multiple: true,
|
||||
action:
|
||||
config.app_url +
|
||||
"/backend/v1/upload/image?category_id=" +
|
||||
props.categoryId,
|
||||
headers: {
|
||||
authorization: "Bearer " + getToken(),
|
||||
},
|
||||
onChange(info: any) {
|
||||
const { status } = info.file;
|
||||
if (status !== "uploading") {
|
||||
console.log(info.file, info.fileList);
|
||||
}
|
||||
if (status === "done") {
|
||||
message.success(`${info.file.name} 上传成功`);
|
||||
} else if (status === "error") {
|
||||
message.error(`${info.file.name} 上传失败`);
|
||||
}
|
||||
},
|
||||
showUploadList: {
|
||||
showRemoveIcon: false,
|
||||
showDownloadIcon: false,
|
||||
},
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<Button
|
||||
type="primary"
|
||||
onClick={() => {
|
||||
setShowModal(true);
|
||||
}}
|
||||
>
|
||||
上传图片
|
||||
</Button>
|
||||
|
||||
{showModal && (
|
||||
<Modal
|
||||
open={true}
|
||||
closable={false}
|
||||
onCancel={() => {
|
||||
setShowModal(false);
|
||||
}}
|
||||
onOk={() => {
|
||||
props.onUpdate();
|
||||
setShowModal(false);
|
||||
}}
|
||||
>
|
||||
<Dragger {...uploadProps}>
|
||||
<p className="ant-upload-drag-icon">
|
||||
<InboxOutlined />
|
||||
</p>
|
||||
<p className="ant-upload-text">请将图片拖拽到此处上传</p>
|
||||
<p className="ant-upload-hint">
|
||||
支持一次上传多个 / 支持 png,jpg,jpeg,gif 格式图片
|
||||
</p>
|
||||
</Dragger>
|
||||
</Modal>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
};
|
||||
Reference in New Issue
Block a user