资源分类新建、编辑弹窗组件化

src/index.less

@@ -70,6 +70,10 @@ code {
   margin-bottom: 10px;
 }
 
+.mt-24 {
+  margin-top: 24px;
+}
+
 .mb-24 {
   margin-bottom: 24px;
 }

src/pages/index.ts

@@ -23,7 +23,5 @@ export * from "./department/update";
 export * from "./change-password";
 export * from "./resource/images";
 export * from "./resource/resource-category/index";
-export * from "./resource/resource-category/create";
-export * from "./resource/resource-category/update";
 export * from "./resource/videos";
 

src/pages/resource/resource-category/compenents/create.tsx

@@ -0,0 +1,148 @@
+import React, { useState, useRef, useEffect } from "react";
+import { Modal, Form, Input, Cascader, message } from "antd";
+import styles from "./create.module.less";
+import { resourceCategory } from "../../../../api/index";
+import type { FormInstance } from "antd/es/form";
+
+interface PropInterface {
+  open: boolean;
+  onCancel: () => void;
+}
+
+interface Option {
+  value: string | number;
+  label: string;
+  children?: Option[];
+}
+
+export const ResourceCategoryCreate: React.FC<PropInterface> = ({
+  open,
+  onCancel,
+}) => {
+  const [form] = Form.useForm();
+  const [loading, setLoading] = useState<boolean>(true);
+  const [categories, setCategories] = useState<any>([]);
+  const [parent_id, setParentId] = useState<number>(0);
+
+  useEffect(() => {
+    getParams();
+  }, []);
+
+  useEffect(() => {
+    form.setFieldsValue({
+      name: "",
+      parent_id: [0],
+    });
+  }, [form, open]);
+
+  const getParams = () => {
+    resourceCategory.createResourceCategory().then((res: any) => {
+      const categories = res.data.categories;
+      if (JSON.stringify(categories) !== "{}") {
+        const new_arr: Option[] = checkArr(categories, 0);
+        new_arr.unshift({
+          label: "无",
+          value: 0,
+        });
+        setCategories(new_arr);
+      }
+    });
+  };
+
+  const checkArr = (categories: any[], id: number) => {
+    const arr = [];
+    for (let i = 0; i < categories[id].length; i++) {
+      if (!categories[categories[id][i].id]) {
+        arr.push({
+          label: categories[id][i].name,
+          value: categories[id][i].id,
+        });
+      } else {
+        const new_arr: Option[] = checkArr(categories, categories[id][i].id);
+        arr.push({
+          label: categories[id][i].name,
+          value: categories[id][i].id,
+          children: new_arr,
+        });
+      }
+    }
+    return arr;
+  };
+
+  const onFinish = (values: any) => {
+    resourceCategory
+      .storeResourceCategory(values.name, parent_id || 0, 0)
+      .then((res: any) => {
+        message.success("保存成功！");
+        onCancel();
+      });
+  };
+
+  const onFinishFailed = (errorInfo: any) => {
+    console.log("Failed:", errorInfo);
+  };
+
+  const handleChange = (value: any) => {
+    if (value !== undefined) {
+      let it = value[value.length - 1];
+      setParentId(it);
+    } else {
+      setParentId(0);
+    }
+  };
+
+  const displayRender = (label: any, selectedOptions: any) => {
+    return label[label.length - 1];
+  };
+
+  return (
+    <>
+      <Modal
+        title="新建分类"
+        centered
+        forceRender
+        open={open}
+        width={416}
+        onOk={() => form.submit()}
+        onCancel={() => onCancel()}
+      >
+        <div className="float-left mt-24">
+          <Form
+            form={form}
+            name="basic"
+            labelCol={{ span: 8 }}
+            wrapperCol={{ span: 16 }}
+            initialValues={{ remember: true }}
+            onFinish={onFinish}
+            onFinishFailed={onFinishFailed}
+            autoComplete="off"
+          >
+            <Form.Item
+              label="所属上级"
+              name="parent_id"
+              rules={[{ required: true, message: "请选择所属上级!" }]}
+            >
+              <Cascader
+                style={{ width: 200 }}
+                allowClear
+                placeholder="请选择所属上级"
+                onChange={handleChange}
+                options={categories}
+                changeOnSelect
+                expand-trigger="hover"
+                displayRender={displayRender}
+              />
+            </Form.Item>
+            <Form.Item
+              label="分类名称"
+              name="name"
+              rules={[{ required: true, message: "请输入分类名称!" }]}
+            >
+              <Input style={{ width: 200 }} placeholder="请输入分类名称" />
+            </Form.Item>
+          </Form>
+        </div>
+      </Modal>
+    </>
+  );
+};

src/pages/resource/resource-category/compenents/update.tsx

@@ -0,0 +1,178 @@
+import React, { useState, useRef, useEffect } from "react";
+import { Modal, Form, Input, Cascader, message } from "antd";
+import styles from "./create.module.less";
+import { resourceCategory } from "../../../../api/index";
+import type { FormInstance } from "antd/es/form";
+
+interface PropInterface {
+  id: number;
+  open: boolean;
+  onCancel: () => void;
+}
+
+interface Option {
+  value: string | number;
+  label: string;
+  children?: Option[];
+}
+
+export const ResourceCategoryUpdate: React.FC<PropInterface> = ({
+  id,
+  open,
+  onCancel,
+}) => {
+  const [form] = Form.useForm();
+  const [loading, setLoading] = useState<boolean>(true);
+  const [categories, setCategories] = useState<any>([]);
+  const [parent_id, setParentId] = useState<number>(0);
+
+  useEffect(() => {
+    getParams();
+  }, []);
+
+  useEffect(() => {
+    if (id === 0) {
+      return;
+    }
+    getDetail();
+  }, [id]);
+
+  useEffect(() => {
+    form.setFieldsValue({
+      name: "",
+      parent_id: [0],
+    });
+  }, [form, open]);
+
+  const getParams = () => {
+    resourceCategory.createResourceCategory().then((res: any) => {
+      const categories = res.data.categories;
+      if (JSON.stringify(categories) !== "{}") {
+        const new_arr: Option[] = checkArr(categories, 0);
+        new_arr.unshift({
+          label: "无",
+          value: 0,
+        });
+        setCategories(new_arr);
+      }
+    });
+  };
+
+  const getDetail = () => {
+    resourceCategory.resourceCategory(id).then((res: any) => {
+      let data = res.data;
+      let arr = data.parent_chain.split(",");
+      let new_arr: any[] = [];
+      arr.map((num: any) => {
+        new_arr.push(Number(num));
+      });
+      form.setFieldsValue({
+        name: data.name,
+        sort: data.sort,
+        parent_id: new_arr,
+      });
+      setParentId(data.parent_id);
+    });
+  };
+
+  const checkArr = (categories: any[], id: number) => {
+    const arr = [];
+    for (let i = 0; i < categories[id].length; i++) {
+      if (!categories[categories[id][i].id]) {
+        arr.push({
+          label: categories[id][i].name,
+          value: categories[id][i].id,
+        });
+      } else {
+        const new_arr: Option[] = checkArr(categories, categories[id][i].id);
+        arr.push({
+          label: categories[id][i].name,
+          value: categories[id][i].id,
+          children: new_arr,
+        });
+      }
+    }
+    return arr;
+  };
+
+  const onFinish = (values: any) => {
+    resourceCategory
+      .updateResourceCategory(id, values.name, parent_id || 0, values.sort)
+      .then((res: any) => {
+        message.success("保存成功！");
+        onCancel();
+      });
+  };
+
+  const onFinishFailed = (errorInfo: any) => {
+    console.log("Failed:", errorInfo);
+  };
+
+  const handleChange = (value: any) => {
+    if (value !== undefined) {
+      let it = value[value.length - 1];
+      if (it === id) {
+        setParentId(0);
+      } else {
+        setParentId(it);
+      }
+    } else {
+      setParentId(0);
+    }
+  };
+
+  const displayRender = (label: any, selectedOptions: any) => {
+    return label[label.length - 1];
+  };
+
+  return (
+    <>
+      <Modal
+        title="新建分类"
+        centered
+        forceRender
+        open={open}
+        width={416}
+        onOk={() => form.submit()}
+        onCancel={() => onCancel()}
+      >
+        <div className="float-left mt-24">
+          <Form
+            form={form}
+            name="basic"
+            labelCol={{ span: 8 }}
+            wrapperCol={{ span: 16 }}
+            initialValues={{ remember: true }}
+            onFinish={onFinish}
+            onFinishFailed={onFinishFailed}
+            autoComplete="off"
+          >
+            <Form.Item
+              label="所属上级"
+              name="parent_id"
+              rules={[{ required: true, message: "请选择所属上级!" }]}
+            >
+              <Cascader
+                style={{ width: 200 }}
+                allowClear
+                placeholder="请选择所属上级"
+                onChange={handleChange}
+                options={categories}
+                changeOnSelect
+                expand-trigger="hover"
+                displayRender={displayRender}
+              />
+            </Form.Item>
+            <Form.Item
+              label="分类名称"
+              name="name"
+              rules={[{ required: true, message: "请输入分类名称!" }]}
+            >
+              <Input style={{ width: 200 }} placeholder="请输入分类名称" />
+            </Form.Item>
+          </Form>
+        </div>
+      </Modal>
+    </>
+  );
+};

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

@@ -1,148 +0,0 @@
-import React, { useState, useEffect } from "react";
-import { Row, Col, Form, Input, Cascader, Button, message } from "antd";
-import styles from "./create.module.less";
-import { resourceCategory } from "../../../api/index";
-import { useNavigate } from "react-router-dom";
-import { BackBartment } from "../../../compenents";
-
-interface Option {
-  value: string | number;
-  label: string;
-  children?: Option[];
-}
-
-export const ResourceCategoryCreatePage: React.FC = () => {
-  const navigate = useNavigate();
-  const [form] = Form.useForm();
-  const [loading, setLoading] = useState<boolean>(true);
-  const [categories, setCategories] = useState<any>([]);
-  const [parent_id, setParentId] = useState<number>(0);
-
-  useEffect(() => {
-    getParams();
-  }, []);
-
-  const getParams = () => {
-    resourceCategory.createResourceCategory().then((res: any) => {
-      const categories = res.data.categories;
-      if (JSON.stringify(categories) !== '{}') {
-        const new_arr: Option[] = checkArr(categories, 0);
-        setCategories(new_arr);
-      }
-    });
-  };
-
-  const checkArr = (categories: any[], id: number) => {
-    const arr = [];
-    for (let i = 0; i < categories[id].length; i++) {
-      if (!categories[categories[id][i].id]) {
-        arr.push({
-          label: categories[id][i].name,
-          value: categories[id][i].id,
-        });
-      } else {
-        const new_arr: Option[] = checkArr(categories, categories[id][i].id);
-        arr.push({
-          label: categories[id][i].name,
-          value: categories[id][i].id,
-          children: new_arr,
-        });
-      }
-    }
-    return arr;
-  };
-
-  const onFinish = (values: any) => {
-    resourceCategory
-      .storeResourceCategory(values.name, parent_id || 0, values.sort)
-      .then((res: any) => {
-        message.success("保存成功！");
-        navigate(-1);
-      });
-  };
-
-  const onFinishFailed = (errorInfo: any) => {
-    console.log("Failed:", errorInfo);
-  };
-
-  const handleChange = (value: any) => {
-    if (value !== undefined) {
-      let it = value[value.length - 1];
-      setParentId(it);
-    } else {
-      setParentId(0);
-    }
-  };
-
-  const displayRender = (label: any, selectedOptions: any) => {
-    return label[label.length - 1];
-  };
-
-  return (
-    <>
-      <Row className="playedu-main-body">
-        <Col>
-          <div className="float-left mb-24">
-            <BackBartment title="新建资源分类" />
-          </div>
-          <div className="float-left">
-            <Form
-              form={form}
-              name="basic"
-              labelCol={{ span: 8 }}
-              wrapperCol={{ span: 16 }}
-              style={{ width: 600 }}
-              initialValues={{ remember: true }}
-              onFinish={onFinish}
-              onFinishFailed={onFinishFailed}
-              autoComplete="off"
-            >
-              <Form.Item label="父级" name="parent_id">
-                <Cascader
-                  style={{ width: 300 }}
-                  allowClear
-                  placeholder="请选择分类"
-                  onChange={handleChange}
-                  options={categories}
-                  changeOnSelect
-                  expand-trigger="hover"
-                  displayRender={displayRender}
-                />
-              </Form.Item>
-              <Form.Item
-                label="分类名"
-                name="name"
-                rules={[{ required: true, message: "请输入分类名!" }]}
-              >
-                <Input style={{ width: 300 }} placeholder="请输入分类名" />
-              </Form.Item>
-              <Form.Item
-                label="Sort"
-                name="sort"
-                rules={[{ required: true, message: "请输入Sort!" }]}
-              >
-                <Input
-                  type="number"
-                  style={{ width: 300 }}
-                  placeholder="请输入Sort"
-                />
-              </Form.Item>
-              <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
-                <Button type="primary" htmlType="submit">
-                  保存
-                </Button>
-                <Button
-                  className="ml-15"
-                  htmlType="button"
-                  onClick={() => navigate(-1)}
-                >
-                  取消
-                </Button>
-              </Form.Item>
-            </Form>
-          </div>
-        </Col>
-      </Row>
-    </>
-  );
-};

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

@@ -7,6 +7,8 @@ import { resourceCategory } from "../../../api/index";
 import { Link, useNavigate } from "react-router-dom";
 import { PerButton } from "../../../compenents";
 import type { DataNode, TreeProps } from "antd/es/tree";
+import { ResourceCategoryCreate } from "./compenents/create";
+import { ResourceCategoryUpdate } from "./compenents/update";
 
 const { confirm } = Modal;
 
@@ -29,6 +31,9 @@ export const ResourceCategoryPage: React.FC = () => {
   const [refresh, setRefresh] = useState(false);
   const [treeData, setTreeData] = useState<any>([]);
   const [selectKey, setSelectKey] = useState<any>([]);
+  const [createVisible, setCreateVisible] = useState<boolean>(false);
+  const [updateVisible, setUpdateVisible] = useState<boolean>(false);
+  const [cid, setCid] = useState<number>(0);
 
   useEffect(() => {
     getData();
@@ -36,7 +41,6 @@ export const ResourceCategoryPage: React.FC = () => {
 
   const onSelect = (selectedKeys: any, info: any) => {
     setSelectKey(selectedKeys);
-    console.log(selectedKeys);
   };
 
   const getData = () => {
@@ -66,11 +70,10 @@ export const ResourceCategoryPage: React.FC = () => {
                   class="b-link c-red"
                   icon={null}
                   p="resource-category"
-                  onClick={() =>
-                    navigate(
-                      `/resource-category/update/${categories[id][i].id}`
-                    )
-                  }
+                  onClick={() => {
+                    setCid(categories[id][i].id);
+                    setUpdateVisible(true);
+                  }}
                   disabled={null}
                 />
                 <div className="form-column"></div>
@@ -101,11 +104,10 @@ export const ResourceCategoryPage: React.FC = () => {
                   class="b-link c-red"
                   icon={null}
                   p="resource-category"
-                  onClick={() =>
-                    navigate(
-                      `/resource-category/update/${categories[id][i].id}`
-                    )
-                  }
+                  onClick={() => {
+                    setCid(categories[id][i].id);
+                    setUpdateVisible(true);
+                  }}
                   disabled={null}
                 />
                 <div className="form-column"></div>
@@ -138,7 +140,6 @@ export const ResourceCategoryPage: React.FC = () => {
     if (id === 0) {
       return;
     }
-
     confirm({
       title: "操作确认",
       icon: <ExclamationCircleFilled />,
@@ -234,20 +235,15 @@ export const ResourceCategoryPage: React.FC = () => {
     <>
       <div className="playedu-main-top mb-24">
         <div className="d-flex">
-          <Link
-            style={{ textDecoration: "none" }}
-            to={`/resource-category/create`}
-          >
-            <PerButton
-              type="primary"
-              text="新建分类"
-              class="mr-16"
-              icon={<PlusOutlined />}
-              p="resource-category"
-              onClick={() => null}
-              disabled={null}
-            />
-          </Link>
+          <PerButton
+            type="primary"
+            text="新建分类"
+            class="mr-16"
+            icon={<PlusOutlined />}
+            p="resource-category"
+            onClick={() => setCreateVisible(true)}
+            disabled={null}
+          />
         </div>
       </div>
       <div className="playedu-main-body">
@@ -259,6 +255,21 @@ export const ResourceCategoryPage: React.FC = () => {
           onDragEnter={onDragEnter}
           onDrop={onDrop}
         />
+        <ResourceCategoryCreate
+          open={createVisible}
+          onCancel={() => {
+            setCreateVisible(false);
+            setRefresh(!refresh);
+          }}
+        />
+        <ResourceCategoryUpdate
+          id={cid}
+          open={updateVisible}
+          onCancel={() => {
+            setUpdateVisible(false);
+            setRefresh(!refresh);
+          }}
+        />
       </div>
     </>
   );

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

@@ -1,188 +0,0 @@
-import React, { useState, useEffect } from "react";
-import { Row, Col, Form, Input, Cascader, Button, message } from "antd";
-import styles from "./create.module.less";
-import { resourceCategory } from "../../../api/index";
-import { useParams, useNavigate } from "react-router-dom";
-import { BackBartment } from "../../../compenents";
-
-interface Option {
-  value: string | number;
-  label: string;
-  children?: Option[];
-}
-
-export const ResourceCategoryUpdatePage: React.FC = () => {
-  const params = useParams();
-  const navigate = useNavigate();
-  const [form] = Form.useForm();
-  const [loading, setLoading] = useState<boolean>(true);
-  const [categories, setCategories] = useState<any>([]);
-  const [parent_id, setParentId] = useState<number>(0);
-
-  useEffect(() => {
-    getParams();
-  }, []);
-
-  useEffect(() => {
-    getDetail();
-  }, [params.catId]);
-
-  const getParams = () => {
-    resourceCategory.createResourceCategory().then((res: any) => {
-      const categories = res.data.categories;
-      if (JSON.stringify(categories) !== "{}") {
-        const new_arr: Option[] = checkArr(categories, 0);
-        setCategories(new_arr);
-      }
-    });
-  };
-
-  const getDetail = () => {
-    resourceCategory.resourceCategory(Number(params.catId)).then((res: any) => {
-      let data = res.data;
-      let arr = data.parent_chain.split(",");
-      let new_arr: any[] = [];
-      arr.map((num: any) => {
-        new_arr.push(Number(num));
-      });
-      form.setFieldsValue({
-        name: data.name,
-        sort: data.sort,
-        parent_id: new_arr,
-      });
-      setParentId(data.parent_id);
-    });
-  };
-  
-
-  const checkArr = (categories: any[], id: number) => {
-    const arr = [];
-    for (let i = 0; i < categories[id].length; i++) {
-      if (categories[id][i].id === Number(params.catId)) {
-        console.log("截断");
-      } else if (!categories[categories[id][i].id]) {
-        arr.push({
-          label: categories[id][i].name,
-          value: categories[id][i].id,
-        });
-      } else {
-        const new_arr: Option[] = checkArr(categories, categories[id][i].id);
-        arr.push({
-          label: categories[id][i].name,
-          value: categories[id][i].id,
-          children: new_arr,
-        });
-      }
-    }
-    return arr;
-  };
-
-  const onFinish = (values: any) => {
-    let id = Number(params.catId);
-    resourceCategory
-      .updateResourceCategory(id, values.name, parent_id || 0, values.sort)
-      .then((res: any) => {
-        message.success("保存成功！");
-        navigate(-1);
-      });
-  };
-
-  const onFinishFailed = (errorInfo: any) => {
-    console.log("Failed:", errorInfo);
-  };
-
-  const handleChange = (value: any) => {
-    let id = Number(params.catId);
-    if (value !== undefined) {
-      let it = value[value.length - 1];
-      if (it === id) {
-        setParentId(0);
-      } else {
-        setParentId(it);
-      }
-    } else {
-      setParentId(0);
-    }
-  };
-
-  const displayRender = (label: any, selectedOptions: any) => {
-    let id = Number(params.catId);
-    if (selectedOptions && selectedOptions[0]) {
-      let current = selectedOptions[selectedOptions.length - 1].value;
-      if (current === id) {
-        message.error("不能选择自己作为父类");
-        return 0;
-      }
-    }
-
-    return label[label.length - 1];
-  };
-
-  return (
-    <>
-      <Row className="playedu-main-body">
-        <Col>
-          <div className="float-left mb-24">
-            <BackBartment title="编辑资源分类" />
-          </div>
-          <div className="float-left">
-            <Form
-              form={form}
-              name="basic"
-              labelCol={{ span: 8 }}
-              wrapperCol={{ span: 16 }}
-              style={{ width: 600 }}
-              initialValues={{ remember: true }}
-              onFinish={onFinish}
-              onFinishFailed={onFinishFailed}
-              autoComplete="off"
-            >
-              <Form.Item label="父级" name="parent_id">
-                <Cascader
-                  style={{ width: 300 }}
-                  allowClear
-                  placeholder="请选择分类"
-                  onChange={handleChange}
-                  options={categories}
-                  changeOnSelect
-                  expand-trigger="hover"
-                  displayRender={displayRender}
-                />
-              </Form.Item>
-              <Form.Item
-                label="分类名"
-                name="name"
-                rules={[{ required: true, message: "请输入分类名!" }]}
-              >
-                <Input style={{ width: 300 }} placeholder="请输入分类名" />
-              </Form.Item>
-              <Form.Item
-                label="Sort"
-                name="sort"
-                rules={[{ required: true, message: "请输入Sort!" }]}
-              >
-                <Input
-                  type="number"
-                  style={{ width: 300 }}
-                  placeholder="请输入Sort"
-                />
-              </Form.Item>
-              <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
-                <Button type="primary" htmlType="submit">
-                  保存
-                </Button>
-                <Button
-                  className="ml-15"
-                  htmlType="button"
-                  onClick={() => navigate(-1)}
-                >
-                  取消
-                </Button>
-              </Form.Item>
-            </Form>
-          </div>
-        </Col>
-      </Row>
-    </>
-  );
-};

src/router/routes.tsx

@@ -24,8 +24,6 @@ import {
   ChangePasswordPage,
   ResourceImagesPage,
   ResourceCategoryPage,
-  ResourceCategoryCreatePage,
-  ResourceCategoryUpdatePage,
   ResourceVideosPage,
   SystemIndexPage
 } from "../pages";
@@ -47,14 +45,6 @@ const routes: RouteObject[] = [
         path: "/resource-category",
         element: <ResourceCategoryPage />,
       },
-      {
-        path: "/resource-category/create",
-        element: <ResourceCategoryCreatePage />,
-      },
-      {
-        path: "/resource-category/update/:catId",
-        element: <ResourceCategoryUpdatePage />,
-      },
       {
         path: "/images",
         element: <ResourceImagesPage />,