分类、部门删除预检查

src/pages/course/index.tsx

@@ -1,8 +1,6 @@
 import { useEffect, useState } from "react";
 import {
   Button,
-  Row,
-  Col,
   Modal,
   Image,
   Table,
@@ -12,7 +10,7 @@ import {
   Space,
   Tabs,
 } from "antd";
-import { course } from "../../api";
+import { course, department, resourceCategory } from "../../api";
 import styles from "./index.module.less";
 import { PlusOutlined, ExclamationCircleFilled } from "@ant-design/icons";
 import type { ColumnsType } from "antd/es/table";
@@ -45,6 +43,7 @@ export const CoursePage = () => {
   const [dep_ids, setDepIds] = useState<any>([]);
   const [selLabel, setLabel] = useState<string>("全部课程");
   const [categoryCount, setCategoryCount] = useState<any>({});
+  const [tabKey, setTabKey] = useState(1);
 
   const items: TabsProps["items"] = [
     {
@@ -136,7 +135,7 @@ export const CoursePage = () => {
             class="b-link c-red"
             icon={null}
             p="course"
-            onClick={() => removeItem(record.id)}
+            onClick={() => delItem(record.id)}
             disabled={null}
           />
         </Space>
@@ -145,7 +144,7 @@ export const CoursePage = () => {
   ];
 
   // 删除课程
-  const removeItem = (id: number) => {
+  const delItem = (id: number) => {
     if (id === 0) {
       return;
     }
@@ -214,7 +213,7 @@ export const CoursePage = () => {
   };
 
   const onChange = (key: string) => {
-    console.log(key);
+    setTabKey(Number(key));
   };
 
   return (
@@ -228,7 +227,6 @@ export const CoursePage = () => {
             onChange={onChange}
           />
         </div>
-
         <div className="right-box">
           <div className="playedu-main-title float-left mb-24">{selLabel}</div>
           <div className="float-left j-b-flex mb-24">

src/pages/department/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 { department } from "../../api/index";
@@ -8,6 +8,7 @@ import type { DataNode, TreeProps } from "antd/es/tree";
 import { DepartmentCreate } from "./compenents/create";
 import { DepartmentUpdate } 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 DepartmentPage: React.FC = () => {
+  const navigate = useNavigate();
   const permisssions = useSelector((state: any) => state.permisssions);
   const [loading, setLoading] = useState<boolean>(true);
   const [refresh, setRefresh] = useState(false);
@@ -34,12 +36,12 @@ export const DepartmentPage: React.FC = () => {
   const [createVisible, setCreateVisible] = useState<boolean>(false);
   const [updateVisible, setUpdateVisible] = useState<boolean>(false);
   const [did, setDid] = useState<number>(0);
+  const [modal, contextHolder] = Modal.useModal();
 
   const onSelect = (selectedKeys: any, info: any) => {
     setSelectKey(selectedKeys);
   };
 
-
   const through = (p: string) => {
     if (!permisssions) {
       return false;
@@ -91,7 +93,7 @@ export const DepartmentPage: React.FC = () => {
                   <i
                     className="iconfont icon-icon-delete"
                     style={{ fontSize: 24 }}
-                    onClick={() => delUser(departments[id][i].id)}
+                    onClick={() => removeItem(departments[id][i].id)}
                   />
                 </>
               )}
@@ -124,7 +126,7 @@ export const DepartmentPage: React.FC = () => {
                   <i
                     className="iconfont icon-icon-delete"
                     style={{ fontSize: 24 }}
-                    onClick={() => delUser(departments[id][i].id)}
+                    onClick={() => removeItem(departments[id][i].id)}
                   />
                 </>
               )}
@@ -143,11 +145,83 @@ export const DepartmentPage: 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>
+      ),
+    });
+    department.checkDestroy(id).then((res: any) => {
+      setTimeout(() => {
+        instance.destroy();
+      }, 500);
+      if (
+        res.data.children.length === 0 &&
+        res.data.courses.length === 0 &&
+        res.data.users.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.users.length > 0 && (
+                  <Button
+                    type="link"
+                    style={{ paddingLeft: 4, paddingRight: 4 }}
+                    danger
+                    onClick={() => navigate("/member")}
+                  >
+                    （{res.data.users.length}个学员），
+                  </Button>
+                )}
+                请先解除关联再删除！
+              </p>
+            ),
+          });
+        }
+      }
+    });
+  };
 
+  const delUser = (id: any) => {
     confirm({
       title: "操作确认",
       icon: <ExclamationCircleFilled />,
@@ -288,6 +362,7 @@ export const DepartmentPage: React.FC = () => {
   return (
     <>
       <div className="playedu-main-top mb-24">
+        {contextHolder}
         <div className="d-flex">
           <PerButton
             type="primary"

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"