资源删除初步

This commit is contained in:
禺狨 2023-03-13 11:00:34 +08:00
parent 69da71b7c2
commit 28d192b590
9 changed files with 151 additions and 59 deletions

View File

@ -8,6 +8,7 @@ interface PropInterface {
class: string;
icon: any;
onClick: () => void;
disabled: any;
}
export const PerButton = (props: PropInterface) => {
@ -29,6 +30,7 @@ export const PerButton = (props: PropInterface) => {
onClick={() => {
props.onClick();
}}
disabled={props.disabled}
>
{props.text}
</Button>
@ -41,6 +43,7 @@ export const PerButton = (props: PropInterface) => {
onClick={() => {
props.onClick();
}}
disabled={props.disabled}
>
{props.text}
</Button>

View File

@ -86,6 +86,7 @@ export const CoursePage = () => {
icon={null}
p="course"
onClick={() => navigate(`/course/update/${record.id}`)}
disabled={null}
/>
<Popconfirm
title="警告"
@ -101,6 +102,7 @@ export const CoursePage = () => {
icon={null}
p="course"
onClick={() => null}
disabled={null}
/>
</Popconfirm>
</Space>
@ -226,6 +228,7 @@ export const CoursePage = () => {
icon={<PlusOutlined />}
p="course"
onClick={() => null}
disabled={null}
/>
</Link>
</div>

View File

@ -65,6 +65,7 @@ export const DepartmentPage: React.FC = () => {
icon={null}
p="department-cud"
onClick={() => navigate(`/department/update/${record.id}`)}
disabled={null}
/>
<Popconfirm
title="警告"
@ -80,6 +81,7 @@ export const DepartmentPage: React.FC = () => {
icon={null}
p="department-cud"
onClick={() => null}
disabled={null}
/>
</Popconfirm>
</Space>
@ -154,6 +156,7 @@ export const DepartmentPage: React.FC = () => {
icon={<PlusOutlined />}
p="department-cud"
onClick={() => null}
disabled={null}
/>
</Link>
</div>

View File

@ -88,6 +88,7 @@ export const MemberPage: React.FC = () => {
icon={null}
p="user-update"
onClick={() => navigate(`/member/update/${record.id}`)}
disabled={null}
/>
<Popconfirm
title="警告"
@ -103,6 +104,7 @@ export const MemberPage: React.FC = () => {
icon={null}
p="user-destroy"
onClick={() => null}
disabled={null}
/>
</Popconfirm>
</Space>
@ -245,6 +247,7 @@ export const MemberPage: React.FC = () => {
icon={<PlusOutlined />}
p="user-store"
onClick={() => null}
disabled={null}
/>
</Link>
<Link style={{ textDecoration: "none" }} to={`/member/import`}>
@ -255,6 +258,7 @@ export const MemberPage: React.FC = () => {
icon={null}
p="user-store"
onClick={() => null}
disabled={null}
/>
</Link>
</div>

View File

@ -26,8 +26,35 @@
top: -8px;
}
.checkbox {
width: 20px;
height: 20px;
background: rgba(#ffffff, 0.6);
border-radius: 3px;
border: 2px solid #d9d9d9;
position: absolute;
left: 10px;
top: 10px;
z-index: 100;
}
.imageItem{
.checked {
width: 20px;
height: 20px;
background: #fff2f0;
border-radius: 3px;
border: 2px solid #fff2f0;
position: absolute;
left: 10px;
top: 10px;
z-index: 100;
display: flex;
align-items: center;
justify-content: center;
color: #ff4d4f;
}
.imageItem {
position: relative;
width: 150px;
height: 150px;

View File

@ -3,7 +3,7 @@ import {
Button,
Row,
Col,
Popconfirm,
Modal,
Image,
Empty,
message,
@ -13,7 +13,10 @@ import { resource } from "../../../api";
import styles from "./index.module.less";
import { CloseOutlined } from "@ant-design/icons";
import { UploadImageSub } from "../../../compenents/upload-image-button/upload-image-sub";
import { TreeCategory } from "../../../compenents";
import { TreeCategory, PerButton } from "../../../compenents";
import { ExclamationCircleFilled, CheckOutlined } from "@ant-design/icons";
const { confirm } = Modal;
interface ImageItem {
id: number;
@ -41,9 +44,22 @@ export const ResourceImagesPage = () => {
if (id === 0) {
return;
}
resource.destroyResource(id).then(() => {
message.success("删除成功");
resetImageList();
confirm({
title: "操作确认",
icon: <ExclamationCircleFilled />,
content: "确认删除此图片?",
okText: "确认",
okType: "danger",
cancelText: "取消",
onOk() {
resource.destroyResource(id).then(() => {
message.success("删除成功");
resetImageList();
});
},
onCancel() {
console.log("Cancel");
},
});
};
@ -53,8 +69,15 @@ export const ResourceImagesPage = () => {
resource
.resourceList(page, size, "", "", "", "IMAGE", categoryIds)
.then((res: any) => {
let imageData = res.data.result.data;
if (imageData.length > 0) {
for (let i = 0; i < imageData.length; i++) {
imageData[i].isChecked = false;
}
}
setTotal(res.data.result.total);
setImageList(res.data.result.data);
setImageList(imageData);
console.log(imageData);
})
.catch((err: any) => {
console.log("错误,", err);
@ -72,6 +95,10 @@ export const ResourceImagesPage = () => {
getImageList();
}, [category_ids, refresh, page, size]);
const onChange = () => {
console.log(111);
};
return (
<>
<div className="tree-main-body">
@ -87,12 +114,26 @@ export const ResourceImagesPage = () => {
</div>
<Row gutter={16} style={{ marginBottom: 24 }}>
<Col span={24}>
<UploadImageSub
categoryIds={category_ids}
onUpdate={() => {
resetImageList();
}}
></UploadImageSub>
<div className="j-b-flex">
<UploadImageSub
categoryIds={category_ids}
onUpdate={() => {
resetImageList();
}}
></UploadImageSub>
<div className="d-flex">
<Button className="mr-16"></Button>
<PerButton
disabled={null}
type="primary"
text="删除"
class=""
icon={null}
p="resource-destroy"
onClick={() => null}
/>
</div>
</div>
</Col>
</Row>
<Row gutter={[24, 24]}>
@ -102,35 +143,38 @@ export const ResourceImagesPage = () => {
</Col>
)}
{imageList.map((item) => (
{imageList.map((item: any) => (
<Col key={item.id} span={3}>
<div className={styles.imageItem}>
<div
className={
item.isChecked ? styles.checked : styles.checkbox
}
>
{item.isChecked && <CheckOutlined />}
</div>
<Image
preview={true}
width={150}
height={150}
src={item.url}
/>
<Popconfirm
title="警告"
description="即将删除此图片,确认操作?"
onConfirm={() => removeResource(item.id)}
okText="确定"
cancelText="取消"
>
<Button
className={styles.closeButton}
danger
shape="circle"
icon={<CloseOutlined />}
/>
</Popconfirm>
<Button
className={styles.closeButton}
danger
shape="circle"
icon={<CloseOutlined />}
onClick={() => removeResource(item.id)}
/>
</div>
</Col>
))}
{imageList.length > 0 && (
<Col span={24}>
<Col
span={24}
style={{ display: "flex", flexDirection: "row-reverse" }}
>
<Pagination
showSizeChanger
onChange={(currentPage, currentSize) => {

View File

@ -51,6 +51,7 @@ export const ResourceCategoryPage: React.FC = () => {
icon={null}
p="resource-category"
onClick={() => navigate(`/resource-category/update/${record.id}`)}
disabled={null}
/>
<Popconfirm
title="警告"
@ -66,6 +67,7 @@ export const ResourceCategoryPage: React.FC = () => {
icon={null}
p="resource-category"
onClick={() => null}
disabled={null}
/>
</Popconfirm>
</Space>
@ -144,6 +146,7 @@ export const ResourceCategoryPage: React.FC = () => {
icon={<PlusOutlined />}
p="resource-category"
onClick={() => null}
disabled={null}
/>
</Link>
</div>

View File

@ -1,25 +1,16 @@
import { useEffect, useState } from "react";
import {
Button,
Row,
Col,
Popconfirm,
Image,
Empty,
Table,
message,
Space,
} from "antd";
import { Button, Modal, Table, message, Space } from "antd";
import { resource } from "../../../api";
import styles from "./index.module.less";
import { CloseOutlined } from "@ant-design/icons";
import { UploadImageSub } from "../../../compenents/upload-image-button/upload-image-sub";
import { ExclamationCircleFilled } from "@ant-design/icons";
import type { ColumnsType } from "antd/es/table";
import { dateFormat } from "../../../utils/index";
import { TreeCategory, DurationText } from "../../../compenents";
import { TreeCategory, DurationText, PerButton } from "../../../compenents";
import { UploadVideoButton } from "../../../compenents/upload-video-button";
import icon from "../../../assets/images/commen/icon-video.png";
const { confirm } = Modal;
interface DataType {
id: React.Key;
name: string;
@ -86,17 +77,15 @@ export const ResourceVideosPage = () => {
<Button type="link" className="b-link c-red" onClick={() => null}>
</Button>
<Popconfirm
title="警告"
description="即将删除此账号,确认操作?"
onConfirm={() => removeResource(record.id)}
okText="确定"
cancelText="取消"
>
<Button type="link" className="b-link c-red" onClick={() => null}>
</Button>
</Popconfirm>
<PerButton
type="link"
text="删除"
class="b-link c-red"
icon={null}
p="resource-destroy"
onClick={() => removeResource(record.id)}
disabled={null}
/>
</Space>
),
},
@ -107,9 +96,22 @@ export const ResourceVideosPage = () => {
if (id === 0) {
return;
}
resource.destroyResource(id).then(() => {
message.success("删除成功");
resetVideoList();
confirm({
title: "操作确认",
icon: <ExclamationCircleFilled />,
content: "确认删除此视频?",
okText: "确认",
okType: "danger",
cancelText: "取消",
onOk() {
resource.destroyResource(id).then(() => {
message.success("删除成功");
resetVideoList();
});
},
onCancel() {
console.log("Cancel");
},
});
};

View File

@ -82,6 +82,7 @@ export const SystemAdministratorPage: React.FC = () => {
onClick={() =>
navigate(`/system/administrator/update/${record.id}`)
}
disabled={null}
/>
<Popconfirm
title="警告"
@ -97,6 +98,7 @@ export const SystemAdministratorPage: React.FC = () => {
icon={null}
p="admin-user-cud"
onClick={() => null}
disabled={null}
/>
</Popconfirm>
</Space>
@ -192,6 +194,7 @@ export const SystemAdministratorPage: React.FC = () => {
icon={<PlusOutlined />}
p="admin-user-cud"
onClick={() => null}
disabled={null}
/>
</Link>
</div>