资源分类

src/api/resource-category.ts

@@ -30,7 +30,7 @@ export function updateResourceCategory(
   parentId: number,
   sort: number
 ) {
-  return client.post(`/backend/v1/resource-category/${id}`, {
+  return client.put(`/backend/v1/resource-category/${id}`, {
     name,
     parent_id: parentId,
     sort,

src/compenents/index.ts

@@ -5,3 +5,4 @@ export * from "./upload-image-button";
 export * from "./tree-department";
 export * from "./back-bar";
 export * from "./permission-button";
+export * from "./tree-category";

src/compenents/tree-category/index.tsx

@@ -0,0 +1,60 @@
+import { Button, Input, message, Tree } from "antd";
+import { useState, useEffect } from "react";
+import { resourceCategory } from "../../api/index";
+interface Option {
+  key: string | number;
+  title: string;
+  children?: Option[];
+}
+
+interface PropInterface {
+  onUpdate: (keys: any) => void;
+}
+
+export const TreeCategory = (props: PropInterface) => {
+  const [treeData, setTreeData] = useState<any>([]);
+  const [loading, setLoading] = useState<boolean>(true);
+  useEffect(() => {
+    setLoading(true);
+    resourceCategory.resourceCategoryList().then((res: any) => {
+      const categories = res.data.categories;
+      const new_arr: Option[] = [
+        {
+          key: "",
+          title: "全部",
+          children: checkArr(categories, 0),
+        },
+      ];
+      setTreeData(new_arr);
+      setTimeout(() => {
+        setLoading(false);
+      }, 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({
+          title: categories[id][i].name,
+          key: categories[id][i].id,
+        });
+      } else {
+        const new_arr: Option[] = checkArr(categories, categories[id][i].id);
+        arr.push({
+          title: categories[id][i].name,
+          key: categories[id][i].id,
+          children: new_arr,
+        });
+      }
+    }
+    return arr;
+  };
+
+  const onSelect = (selectedKeys: any, info: any) => {
+    props.onUpdate(selectedKeys);
+  };
+
+  return <Tree onSelect={onSelect} treeData={treeData} />;
+};

src/pages/resource/images/index.tsx

@@ -14,6 +14,7 @@ import styles from "./index.module.less";
 import { CreateResourceCategory } from "../../../compenents/create-rs-category";
 import { CloseOutlined } from "@ant-design/icons";
 import { UploadImageSub } from "../../../compenents/upload-image-button/upload-image-sub";
+import { TreeCategory, PerButton } from "../../../compenents";
 
 interface CategoryItem {
   id: number;
@@ -52,6 +53,7 @@ export const ResourceImagesPage = () => {
   const [page, setPage] = useState(1);
   const [size, setSize] = useState(12);
   const [total, setTotal] = useState(0);
+  const [category_ids, setCategoryIds] = useState<any>([]);
 
   // 获取图片资源的分类
   const getCategories = () => {
@@ -104,6 +106,13 @@ export const ResourceImagesPage = () => {
 
   return (
     <>
+      <Row>
+        <Col span={4}>
+          <div className="playedu-main-body" style={{ marginLeft: -24 }}>
+            <TreeCategory onUpdate={(keys: any) => setCategoryIds(keys)} />
+          </div>
+        </Col>
+        <Col span={20}>
           <div className="playedu-main-body">
             <Row gutter={16}>
               <Col span={4}>
@@ -210,6 +219,8 @@ export const ResourceImagesPage = () => {
               </Col>
             </Row>
           </div>
+        </Col>
+      </Row>
     </>
   );
 };