分类、部门删除预检查

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

@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from "react";
-import { Button, Tree, Modal, message, Tooltip } from "antd";
+import { Spin, Button, Tree, Modal, message, Tooltip } from "antd";
 import styles from "./index.module.less";
 import { PlusOutlined, ExclamationCircleFilled } from "@ant-design/icons";
 import { resourceCategory } from "../../../api/index";
@@ -8,6 +8,7 @@ import type { DataNode, TreeProps } from "antd/es/tree";
 import { ResourceCategoryCreate } from "./compenents/create";
 import { ResourceCategoryUpdate } from "./compenents/update";
 import { useSelector } from "../../../store/hooks";
+import { useNavigate } from "react-router-dom";
 
 const { confirm } = Modal;
 
@@ -25,6 +26,7 @@ interface DataType {
 }
 
 export const ResourceCategoryPage: React.FC = () => {
+  const navigate = useNavigate();
   const permisssions = useSelector((state: any) => state.permisssions);
   const [loading, setLoading] = useState<boolean>(true);
   const [refresh, setRefresh] = useState(false);
@@ -33,6 +35,7 @@ export const ResourceCategoryPage: React.FC = () => {
   const [createVisible, setCreateVisible] = useState<boolean>(false);
   const [updateVisible, setUpdateVisible] = useState<boolean>(false);
   const [cid, setCid] = useState<number>(0);
+  const [modal, contextHolder] = Modal.useModal();
 
   useEffect(() => {
     getData();
@@ -89,7 +92,7 @@ export const ResourceCategoryPage: React.FC = () => {
                 <i
                   className="iconfont icon-icon-delete"
                   style={{ fontSize: 24 }}
-                  onClick={() => delUser(categories[id][i].id)}
+                  onClick={() => removeItem(categories[id][i].id)}
                 />
               )}
             </div>
@@ -122,7 +125,7 @@ export const ResourceCategoryPage: React.FC = () => {
                 <i
                   className="iconfont icon-icon-delete"
                   style={{ fontSize: 24 }}
-                  onClick={() => delUser(categories[id][i].id)}
+                  onClick={() => removeItem(categories[id][i].id)}
                 />
               )}
             </div>
@@ -140,10 +143,94 @@ export const ResourceCategoryPage: React.FC = () => {
     setRefresh(!refresh);
   };
 
-  const delUser = (id: any) => {
+  const removeItem = (id: number) => {
     if (id === 0) {
       return;
     }
+    const instance = modal.warning({
+      title: "操作确认",
+      centered: true,
+      content: (
+        <div className="j-flex">
+          <Spin tip="检查中" />
+        </div>
+      ),
+    });
+    resourceCategory.checkDestroy(id).then((res: any) => {
+      setTimeout(() => {
+        instance.destroy();
+      }, 500);
+      if (
+        res.data.children.length === 0 &&
+        res.data.courses.length === 0 &&
+        res.data.images.length === 0 &&
+        res.data.videos.length === 0
+      ) {
+        delUser(id);
+      } else {
+        if (res.data.children.length > 0) {
+          modal.warning({
+            title: "操作确认",
+            centered: true,
+            okText: "确认",
+            content: (
+              <p>
+                此分类下包含
+                <span className="c-red">
+                  （{res.data.children.length}个子分类）
+                </span>
+                ，请先解除关联再删除！
+              </p>
+            ),
+          });
+        } else {
+          modal.warning({
+            title: "操作确认",
+            centered: true,
+            okText: "确认",
+            content: (
+              <p>
+                此分类已关联
+                {res.data.courses.length > 0 && (
+                  <Button
+                    style={{ paddingLeft: 4, paddingRight: 4 }}
+                    type="link"
+                    danger
+                    onClick={() => navigate("/course")}
+                  >
+                    （{res.data.courses.length}个线上课程），
+                  </Button>
+                )}
+                {res.data.videos.length > 0 && (
+                  <Button
+                    type="link"
+                    style={{ paddingLeft: 4, paddingRight: 4 }}
+                    danger
+                    onClick={() => navigate("/videos")}
+                  >
+                    （{res.data.videos.length}个视频文件），
+                  </Button>
+                )}
+                {res.data.images.length > 0 && (
+                  <Button
+                    type="link"
+                    style={{ paddingLeft: 4, paddingRight: 4 }}
+                    danger
+                    onClick={() => navigate("/images")}
+                  >
+                    （{res.data.images.length}个图片文件），
+                  </Button>
+                )}
+                请先解除关联再删除！
+              </p>
+            ),
+          });
+        }
+      }
+    });
+  };
+
+  const delUser = (id: any) => {
     confirm({
       title: "操作确认",
       icon: <ExclamationCircleFilled />,
@@ -283,6 +370,7 @@ export const ResourceCategoryPage: React.FC = () => {
   return (
     <>
       <div className="playedu-main-top mb-24">
+        {contextHolder}
         <div className="d-flex">
           <PerButton
             type="primary"