资源分类

src/api/resource-category.ts

@@ -1,7 +1,7 @@
 import client from "./internal/httpClient";
 
-export function resourceCategoryList(type: string) {
+export function resourceCategoryList() {
-  return client.get("/backend/v1/resource-category/index", { type });
+  return client.get("/backend/v1/resource-category/index", {});
 }
 
 export function createResourceCategory() {
@@ -9,13 +9,13 @@ export function createResourceCategory() {
 }
 
 export function storeResourceCategory(
-  type: string,
   name: string,
+  parentId: number,
   sort: number
 ) {
   return client.post("/backend/v1/resource-category/create", {
-    type,
     name,
+    parent_id: parentId,
     sort,
   });
 }
@@ -26,13 +26,13 @@ export function resourceCategory(id: number) {
 
 export function updateResourceCategory(
   id: number,
-  type: string,
   name: string,
+  parentId: number,
   sort: number
 ) {
   return client.post(`/backend/v1/resource-category/${id}`, {
-    type,
     name,
+    parent_id: parentId,
     sort,
   });
 }

src/compenents/create-rs-category/index.tsx

@@ -18,7 +18,7 @@ export const CreateResourceCategory = (props: PropInterface) => {
       return;
     }
     resourceCategory
-      .storeResourceCategory(props.type, name, 0)
+      .storeResourceCategory(name, 0, 0)
       .then(() => {
         setName("");
         message.success("分类添加成功");

src/compenents/left-menu/index.tsx

@@ -26,6 +26,7 @@ const items = [
     "3",
     <MailOutlined />,
     [
+      getItem("资源分类", "/resource-category", null, null, null),
       getItem("视频", "/videos", null, null, null),
       getItem("图片", "/images", null, null, null),
     ],

src/compenents/upload-image-button/index.tsx

@@ -60,7 +60,7 @@ export const UploadImageButton = (props: PropsInterface) => {
 
   // 获取图片资源的分类
   const getCategories = () => {
-    resourceCategory.resourceCategoryList("IMAGE").then((res: any) => {
+    resourceCategory.resourceCategoryList().then((res: any) => {
       let data = res.data.data;
       if (data.length > 0) {
         setCategories([...categories, ...res.data.data]);

src/pages/department/create.tsx

@@ -25,8 +25,10 @@ export const DepartmentCreatePage: React.FC = () => {
   const getParams = () => {
     department.createDepartment().then((res: any) => {
       const departments = res.data.departments;
+      if (JSON.stringify(departments) !== "{}") {
         const new_arr: Option[] = checkArr(departments, 0);
         setCategories(new_arr);
+      }
     });
   };
 

src/pages/department/index.tsx

@@ -95,9 +95,12 @@ export const DepartmentPage: React.FC = () => {
     setLoading(true);
     department.departmentList().then((res: any) => {
       const departments = res.data.departments;
+      if (JSON.stringify(departments) !== "{}") {
         const new_arr: Option[] = checkArr(departments, 0);
-      let num = tableKey;
         setList(new_arr);
+      }
+      let num = tableKey;
+
       setTimeout(() => {
         setLoading(false);
         setTableKey(num + 1);

src/pages/department/update.tsx

@@ -30,8 +30,10 @@ export const DepartmentUpdatePage: React.FC = () => {
   const getParams = () => {
     department.createDepartment().then((res: any) => {
       const departments = res.data.departments;
+      if (JSON.stringify(departments) !== "{}") {
         const new_arr: Option[] = checkArr(departments, 0);
         setCategories(new_arr);
+      }
     });
   };
 

src/pages/index.ts

@@ -19,3 +19,7 @@ export * from "./department/create";
 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";
+

src/pages/resource/images/index.tsx

@@ -55,7 +55,7 @@ export const ResourceImagesPage = () => {
 
   // 获取图片资源的分类
   const getCategories = () => {
-    resourceCategory.resourceCategoryList("IMAGE").then((res: any) => {
+    resourceCategory.resourceCategoryList().then((res: any) => {
       let data = res.data.data;
       if (data.length > 0) {
         setCategories([...categories, ...res.data.data]);

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

@@ -0,0 +1,148 @@
+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

@@ -0,0 +1,193 @@
+import React, { useState, useEffect } from "react";
+import { Button, Space, Table, Popconfirm, message } from "antd";
+import type { ColumnsType } from "antd/es/table";
+import styles from "./index.module.less";
+import { PlusOutlined, ReloadOutlined } from "@ant-design/icons";
+import { resourceCategory } from "../../../api/index";
+import { dateFormat } from "../../../utils/index";
+import { Link, useNavigate } from "react-router-dom";
+import { PerButton } from "../../../compenents";
+
+interface Option {
+  id: string | number;
+  name: string;
+  created_at: string;
+  children?: Option[];
+  sort: number;
+}
+
+interface DataType {
+  id: React.Key;
+  name: string;
+  created_at: string;
+  sort: number;
+}
+
+export const ResourceCategoryPage: React.FC = () => {
+  const navigate = useNavigate();
+  const [loading, setLoading] = useState<boolean>(true);
+  const [list, setList] = useState<any>([]);
+  const [refresh, setRefresh] = useState(false);
+  const [tableKey, setTableKey] = useState<number>(0);
+
+  const columns: ColumnsType<DataType> = [
+    {
+      title: "分类名",
+      dataIndex: "name",
+      render: (text: string) => <span>{text}</span>,
+    },
+    {
+      title: "ID",
+      key: "id",
+      dataIndex: "id",
+    },
+    {
+      title: "Sort",
+      key: "sort",
+      dataIndex: "sort",
+    },
+    {
+      title: "时间",
+      dataIndex: "created_at",
+      render: (text: string) => <span>{text && dateFormat(text)}</span>,
+    },
+    {
+      title: "操作",
+      key: "action",
+      fixed: "right",
+      width: 160,
+      render: (_, record) => (
+        <Space size="small">
+          <PerButton
+            type="link"
+            text="详情"
+            class="c-red"
+            icon={null}
+            p="department-update"
+            onClick={() => navigate(`/resource-category/update/${record.id}`)}
+          />
+          <Popconfirm
+            title="警告"
+            description="即将删除此分类，确认操作？"
+            onConfirm={() => delUser(record.id)}
+            okText="确定"
+            cancelText="取消"
+          >
+            <PerButton
+              type="link"
+              text="删除"
+              class="c-red"
+              icon={null}
+              p="department-destroy"
+              onClick={() => null}
+            />
+          </Popconfirm>
+        </Space>
+      ),
+    },
+  ];
+
+  useEffect(() => {
+    getData();
+  }, [refresh]);
+
+  const getData = () => {
+    setLoading(true);
+    resourceCategory.resourceCategoryList().then((res: any) => {
+      const categories = res.data.categories;
+      let num = tableKey;
+      if (JSON.stringify(categories) !== "{}") {
+        const new_arr: Option[] = checkArr(categories, 0);
+        setList(new_arr);
+      }
+
+      setTimeout(() => {
+        setLoading(false);
+        setTableKey(num + 1);
+      }, 1000);
+    });
+  };
+
+  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({
+          name: categories[id][i].name,
+          id: categories[id][i].id,
+          sort: categories[id][i].sort,
+          created_at: categories[id][i].created_at,
+        });
+      } else {
+        const new_arr: Option[] = checkArr(categories, categories[id][i].id);
+        arr.push({
+          name: categories[id][i].name,
+          id: categories[id][i].id,
+          created_at: categories[id][i].created_at,
+          sort: categories[id][i].sort,
+          children: new_arr,
+        });
+      }
+    }
+    return arr;
+  };
+
+  const resetData = () => {
+    setList([]);
+    setRefresh(!refresh);
+  };
+
+  const delUser = (id: any) => {
+    resourceCategory.destroyResourceCategory(id).then((res: any) => {
+      setTimeout(() => {
+        message.success("操作成功");
+        setRefresh(!refresh);
+      }, 500);
+    });
+  };
+
+  return (
+    <>
+      <div className="playedu-main-body">
+        <div className="float-left j-b-flex mb-24">
+          <div className="d-flex">
+            <Link
+              style={{ textDecoration: "none" }}
+              to={`/resource-category/create`}
+            >
+              <PerButton
+                type="primary"
+                text="新建"
+                class="mr-16"
+                icon={<PlusOutlined />}
+                p="department-store"
+                onClick={() => null}
+              />
+            </Link>
+          </div>
+          <div className="d-flex">
+            <Button
+              type="link"
+              icon={<ReloadOutlined />}
+              style={{ color: "#333333" }}
+              onClick={() => {
+                setRefresh(!refresh);
+              }}
+            ></Button>
+          </div>
+        </div>
+        <div className="float-left">
+          <Table
+            pagination={false}
+            key={tableKey}
+            columns={columns}
+            dataSource={list}
+            loading={loading}
+            rowKey={(record) => record.id}
+            defaultExpandAllRows={true}
+          />
+        </div>
+      </div>
+    </>
+  );
+};

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

@@ -0,0 +1,185 @@
+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[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

@@ -21,6 +21,9 @@ import {
   DepartmentUpdatePage,
   ChangePasswordPage,
   ResourceImagesPage,
+  ResourceCategoryPage,
+  ResourceCategoryCreatePage,
+  ResourceCategoryUpdatePage,
 } from "../pages";
 
 const routes: RouteObject[] = [
@@ -36,6 +39,18 @@ const routes: RouteObject[] = [
         path: "/change-password",
         element: <ChangePasswordPage />,
       },
+      {
+        path: "/resource-category",
+        element: <ResourceCategoryPage />,
+      },
+      {
+        path: "/resource-category/create",
+        element: <ResourceCategoryCreatePage />,
+      },
+      {
+        path: "/resource-category/update/:catId",
+        element: <ResourceCategoryUpdatePage />,
+      },
       {
         path: "/images",
         element: <ResourceImagesPage />,