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

资源管理图片初步

Browse Source
This commit is contained in:
禺狨 2023-03-08 18:32:11 +08:00
parent be8216b218
commit 5dc57f8c80
2 changed files with 41 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
src/pages/resource/images/index.module.less
View File

@ -19,3 +19,16 @@
line-height: 30px; line-height: 30px;
display: flex; display: flex;
} }
.closeButton {
position: absolute;
right: -8px;
top: -8px;
}
.imageItem{
position: relative;
width: 120px;
height: 80px;
}

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

@ -3,7 +3,7 @@ import {
Button, Button,
Row, Row,
Col, Col,
Modal, Popconfirm,
Image, Image,
Empty, Empty,
message, message,
@ -11,7 +11,6 @@ import {
} from "antd"; } from "antd";
import { resource, resourceCategory } from "../../../api"; import { resource, resourceCategory } from "../../../api";
import styles from "./index.module.less"; import styles from "./index.module.less";
import { CreateResourceCategory } from "../../../compenents/create-rs-category";
import { CloseOutlined } from "@ant-design/icons"; import { CloseOutlined } from "@ant-design/icons";
import { UploadImageSub } from "../../../compenents/upload-image-button/upload-image-sub"; import { UploadImageSub } from "../../../compenents/upload-image-button/upload-image-sub";
import { TreeCategory, PerButton } from "../../../compenents"; import { TreeCategory, PerButton } from "../../../compenents";
@ -45,7 +44,6 @@ export const ResourceImagesPage = () => {
sort: 0, sort: 0,
}, },
]); ]);
const [defaultCid, setDefaultCid] = useState(0);
const [refreshCategories, setRefreshCategories] = useState(1); const [refreshCategories, setRefreshCategories] = useState(1);
const [imageList, setImageList] = useState<ImageItem[]>([]); const [imageList, setImageList] = useState<ImageItem[]>([]);
@ -54,6 +52,7 @@ export const ResourceImagesPage = () => {
const [size, setSize] = useState(12); const [size, setSize] = useState(12);
const [total, setTotal] = useState(0); const [total, setTotal] = useState(0);
const [category_ids, setCategoryIds] = useState<any>([]); const [category_ids, setCategoryIds] = useState<any>([]);
const [selected, setSelected] = useState(0);
// 获取图片资源的分类 // 获取图片资源的分类
const getCategories = () => { const getCategories = () => {
@ -77,8 +76,9 @@ export const ResourceImagesPage = () => {
// 获取图片列表 // 获取图片列表
const getImageList = () => { const getImageList = () => {
let categoryIds = category_ids.join(",");
resource resource
.resourceList(page, size, "", "", "", "IMAGE", category_ids) .resourceList(page, size, "", "", "", "IMAGE", categoryIds)
.then((res: any) => { .then((res: any) => {
setTotal(res.data.result.total); setTotal(res.data.result.total);
setImageList(res.data.result.data); setImageList(res.data.result.data);
@ -119,7 +119,7 @@ export const ResourceImagesPage = () => {
<Row style={{ marginBottom: 24 }}> <Row style={{ marginBottom: 24 }}>
<Col span={24}> <Col span={24}>
<UploadImageSub <UploadImageSub
categoryId={defaultCid} categoryId={Number(category_ids.join(","))}
onUpdate={() => { onUpdate={() => {
resetImageList(); resetImageList();
}} }}
@ -139,19 +139,29 @@ export const ResourceImagesPage = () => {
)} )}
{imageList.map((item) => ( {imageList.map((item) => (
<Col <Col key={item.id} span={6}>
key={item.id} <div className={styles.imageItem}>
span={6} <Image
onClick={() => { preview={false}
console.log(item.url); width={120}
}} height={80}
> src={item.url}
<Image />
preview={false} <Popconfirm
width={120} title="警告"
height={80} description="即将删除此图片，确认操作？"
src={item.url} onConfirm={() => removeCategory(item.id)}
/> okText="确定"
cancelText="取消"
>
<Button
className={styles.closeButton}
danger
shape="circle"
icon={<CloseOutlined />}
/>
</Popconfirm>
</div>
</Col> </Col>
))} ))}