资源删除初步

src/compenents/permission-button/index.tsx

@@ -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>

src/pages/course/index.tsx

@@ -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>

src/pages/department/index.tsx

@@ -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>

src/pages/member/index.tsx

@@ -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>

src/pages/resource/images/index.module.less

@@ -26,9 +26,36 @@
   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;
-}
+}

src/pages/resource/images/index.tsx

@@ -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(() => {
+    confirm({
-      message.success("删除成功");
+      title: "操作确认",
-      resetImageList();
+      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
+              <div className="j-b-flex">
-                categoryIds={category_ids}
+                <UploadImageSub
-                onUpdate={() => {
+                  categoryIds={category_ids}
-                  resetImageList();
+                  onUpdate={() => {
-                }}
+                    resetImageList();
-              ></UploadImageSub>
+                  }}
+                ></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
+                  <Button
-                    title="警告"
+                    className={styles.closeButton}
-                    description="即将删除此图片，确认操作？"
+                    danger
-                    onConfirm={() => removeResource(item.id)}
+                    shape="circle"
-                    okText="确定"
+                    icon={<CloseOutlined />}
-                    cancelText="取消"
+                    onClick={() => removeResource(item.id)}
-                  >
+                  />
-                    <Button
-                      className={styles.closeButton}
-                      danger
-                      shape="circle"
-                      icon={<CloseOutlined />}
-                    />
-                  </Popconfirm>
                 </div>
               </Col>
             ))}
 
             {imageList.length > 0 && (
-              <Col span={24}>
+              <Col
+                span={24}
+                style={{ display: "flex", flexDirection: "row-reverse" }}
+              >
                 <Pagination
                   showSizeChanger
                   onChange={(currentPage, currentSize) => {

src/pages/resource/resource-category/index.tsx

@@ -36,7 +36,7 @@ export const ResourceCategoryPage: React.FC = () => {
       dataIndex: "name",
       render: (text: string) => <span>{text}</span>,
     },
-    
+
     {
       title: "操作",
       key: "action",
@@ -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>

src/pages/resource/videos/index.tsx

@@ -1,25 +1,16 @@
 import { useEffect, useState } from "react";
-import {
+import { Button, Modal, Table, message, Space } from "antd";
-  Button,
-  Row,
-  Col,
-  Popconfirm,
-  Image,
-  Empty,
-  Table,
-  message,
-  Space,
-} from "antd";
 import { resource } from "../../../api";
 import styles from "./index.module.less";
-import { CloseOutlined } from "@ant-design/icons";
+import { ExclamationCircleFilled } from "@ant-design/icons";
-import { UploadImageSub } from "../../../compenents/upload-image-button/upload-image-sub";
 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
+          <PerButton
-            title="警告"
+            type="link"
-            description="即将删除此账号，确认操作？"
+            text="删除"
-            onConfirm={() => removeResource(record.id)}
+            class="b-link c-red"
-            okText="确定"
+            icon={null}
-            cancelText="取消"
+            p="resource-destroy"
-          >
+            onClick={() => removeResource(record.id)}
-            <Button type="link" className="b-link c-red" onClick={() => null}>
+            disabled={null}
-              删除
+          />
-            </Button>
-          </Popconfirm>
         </Space>
       ),
     },
@@ -107,9 +96,22 @@ export const ResourceVideosPage = () => {
     if (id === 0) {
       return;
     }
-    resource.destroyResource(id).then(() => {
+    confirm({
-      message.success("删除成功");
+      title: "操作确认",
-      resetVideoList();
+      icon: <ExclamationCircleFilled />,
+      content: "确认删除此视频？",
+      okText: "确认",
+      okType: "danger",
+      cancelText: "取消",
+      onOk() {
+        resource.destroyResource(id).then(() => {
+          message.success("删除成功");
+          resetVideoList();
+        });
+      },
+      onCancel() {
+        console.log("Cancel");
+      },
     });
   };
 

src/pages/system/administrator/index.tsx

@@ -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>