多选删除图片资源

src/api/resource.ts

@@ -55,3 +55,9 @@ export function storeResource(
 export function destroyResource(id: number) {
   return client.destroy(`/backend/v1/resource/${id}`);
 }
+
+export function destroyResourceMulti(ids: number[]) {
+  return client.post(`/backend/v1/resource/destroy-multi`, {
+    ids: ids,
+  });
+}

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

@@ -36,6 +36,7 @@
   left: 10px;
   top: 10px;
   z-index: 100;
+  cursor: pointer;
 }
 
 .checked {
@@ -52,6 +53,7 @@
   align-items: center;
   justify-content: center;
   color: #ff4d4f;
+  cursor: pointer;
 }
 
 .imageItem {

src/pages/resource/images/index.tsx

@@ -11,7 +11,6 @@ import {
 } 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 { TreeCategory, PerButton } from "../../../compenents";
 import { ExclamationCircleFilled, CheckOutlined } from "@ant-design/icons";
@@ -38,21 +37,22 @@ export const ResourceImagesPage = () => {
   const [size, setSize] = useState(32);
   const [total, setTotal] = useState(0);
   const [category_ids, setCategoryIds] = useState<any>([]);
+  const [selectKey, setSelectKey] = useState<any>([]);
 
   // 删除图片
-  const removeResource = (id: number) => {
+  const removeResource = () => {
-    if (id === 0) {
+    if (selectKey.length === 0) {
       return;
     }
     confirm({
       title: "操作确认",
       icon: <ExclamationCircleFilled />,
-      content: "确认删除此图片？",
+      content: "确认删除选中图片？",
       okText: "确认",
       okType: "danger",
       cancelText: "取消",
       onOk() {
-        resource.destroyResource(id).then(() => {
+        resource.destroyResourceMulti(selectKey).then(() => {
           message.success("删除成功");
           resetImageList();
         });
@@ -69,15 +69,8 @@ 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(imageData);
+        setImageList(res.data.result.data);
-        console.log(imageData);
       })
       .catch((err: any) => {
         console.log("错误,", err);
@@ -95,8 +88,16 @@ export const ResourceImagesPage = () => {
     getImageList();
   }, [category_ids, refresh, page, size]);
 
-  const onChange = () => {
+  const onChange = (item: any, index: number) => {
-    console.log(111);
+    let arr = selectKey;
+    if (arr.indexOf(item.id) === -1) {
+      arr.push(item.id);
+      setSelectKey(arr);
+    } else {
+      arr.splice(arr.indexOf(item.id), 1);
+      setSelectKey(arr);
+    }
+    setRefresh(!refresh);
   };
 
   return (
@@ -124,13 +125,13 @@ export const ResourceImagesPage = () => {
                 <div className="d-flex">
                   <Button className="mr-16">全选</Button>
                   <PerButton
-                    disabled={null}
+                    disabled={selectKey.length === 0}
                     type="primary"
                     text="删除"
                     class=""
                     icon={null}
                     p="resource-destroy"
-                    onClick={() => null}
+                    onClick={() => removeResource()}
                   />
                 </div>
               </div>
@@ -143,15 +144,18 @@ export const ResourceImagesPage = () => {
               </Col>
             )}
 
-            {imageList.map((item: any) => (
+            {imageList.map((item: any, index: number) => (
               <Col key={item.id} span={3}>
                 <div className={styles.imageItem}>
                   <div
                     className={
-                      item.isChecked ? styles.checked : styles.checkbox
+                      selectKey.indexOf(item.id) === -1
+                        ? styles.checkbox
+                        : styles.checked
                     }
+                    onClick={() => onChange(item, index)}
                   >
-                    {item.isChecked && <CheckOutlined />}
+                    {selectKey.indexOf(item.id) !== -1 && <CheckOutlined />}
                   </div>
                   <Image
                     preview={true}
@@ -159,13 +163,13 @@ export const ResourceImagesPage = () => {
                     height={150}
                     src={item.url}
                   />
-                  <Button
+                  {/* <Button
                     className={styles.closeButton}
                     danger
                     shape="circle"
                     icon={<CloseOutlined />}
                     onClick={() => removeResource(item.id)}
-                  />
+                  /> */}
                 </div>
               </Col>
             ))}

src/pages/resource/videos/index.tsx

@@ -21,6 +21,7 @@ interface DataType {
 export const ResourceVideosPage = () => {
   const [videoList, setVideoList] = useState<any>([]);
   const [videosExtra, setVideoExtra] = useState<any>([]);
+  const [adminUsers, setAdminUsers] = useState<any>({});
   const [refresh, setRefresh] = useState(false);
   const [page, setPage] = useState(1);
   const [size, setSize] = useState(10);
@@ -60,7 +61,9 @@ export const ResourceVideosPage = () => {
     },
     {
       title: "创建人",
-      dataIndex: "disk",
+      dataIndex: "id",
+      render: (id: string) =>
+        JSON.stringify(adminUsers) !== "{}" && <span>{adminUsers.id}</span>,
     },
     {
       title: "视频时长",
@@ -125,6 +128,7 @@ export const ResourceVideosPage = () => {
         setTotal(res.data.result.total);
         setVideoList(res.data.result.data);
         setVideoExtra(res.data.videos_extra);
+        setAdminUsers(res.data.admin_users);
         setLoading(false);
       })
       .catch((err: any) => {