资源分类

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,112 +106,121 @@ export const ResourceImagesPage = () => {
 
   return (
     <>
-      <div className="playedu-main-body">
+      <Row>
-        <Row gutter={16}>
+        <Col span={4}>
-          <Col span={4}>
+          <div className="playedu-main-body" style={{ marginLeft: -24 }}>
-            <>
+            <TreeCategory onUpdate={(keys: any) => setCategoryIds(keys)} />
-              <div className={styles.categoryTitle}>
+          </div>
-                <div>图片分类</div>
+        </Col>
-                <div className="ml-15">
+        <Col span={20}>
-                  <CreateResourceCategory
+          <div className="playedu-main-body">
-                    type="IMAGE"
+            <Row gutter={16}>
-                    onUpdate={() => {
+              <Col span={4}>
-                      setRefreshCategories(refreshCategories + 1);
+                <>
-                    }}
+                  <div className={styles.categoryTitle}>
-                  ></CreateResourceCategory>
+                    <div>图片分类</div>
-                </div>
+                    <div className="ml-15">
-              </div>
+                      <CreateResourceCategory
-              {categories.length === 0 && (
+                        type="IMAGE"
-                <Empty
+                        onUpdate={() => {
-                  description="暂无分类"
+                          setRefreshCategories(refreshCategories + 1);
-                  image={Empty.PRESENTED_IMAGE_SIMPLE}
+                        }}
-                ></Empty>
+                      ></CreateResourceCategory>
-              )}
+                    </div>
-
+                  </div>
-              {categories.map((item) => (
+                  {categories.length === 0 && (
-                <div
+                    <Empty
-                  key={item.id}
+                      description="暂无分类"
-                  className={`${styles.categoryItem} ${
+                      image={Empty.PRESENTED_IMAGE_SIMPLE}
-                    item.id === defaultCid ? "active" : ""
+                    ></Empty>
-                  }`}
-                  onClick={() => {
-                    setDefaultCid(item.id);
-                  }}
-                >
-                  <div>{item.name}</div>
-                  {item.id !== 0 && (
-                    <Button
-                      className="ml-15"
-                      danger
-                      shape="circle"
-                      size="small"
-                      onClick={() => {
-                        removeCategory(item.id);
-                      }}
-                      icon={<CloseOutlined />}
-                    />
                   )}
-                </div>
+
-              ))}
+                  {categories.map((item) => (
-            </>
+                    <div
-          </Col>
+                      key={item.id}
-          <Col span={20}>
+                      className={`${styles.categoryItem} ${
-            <Row style={{ marginBottom: 24 }}>
+                        item.id === defaultCid ? "active" : ""
-              <Col span={24}>
+                      }`}
-                <UploadImageSub
+                      onClick={() => {
-                  categoryId={defaultCid}
+                        setDefaultCid(item.id);
-                  onUpdate={() => {
+                      }}
-                    resetImageList();
+                    >
-                  }}
+                      <div>{item.name}</div>
-                ></UploadImageSub>
+                      {item.id !== 0 && (
+                        <Button
+                          className="ml-15"
+                          danger
+                          shape="circle"
+                          size="small"
+                          onClick={() => {
+                            removeCategory(item.id);
+                          }}
+                          icon={<CloseOutlined />}
+                        />
+                      )}
+                    </div>
+                  ))}
+                </>
+              </Col>
+              <Col span={20}>
+                <Row style={{ marginBottom: 24 }}>
+                  <Col span={24}>
+                    <UploadImageSub
+                      categoryId={defaultCid}
+                      onUpdate={() => {
+                        resetImageList();
+                      }}
+                    ></UploadImageSub>
+                  </Col>
+                </Row>
+                <Row
+                  gutter={[
+                    { xs: 8, sm: 16, md: 24, lg: 32 },
+                    { xs: 4, sm: 8, md: 12, lg: 16 },
+                  ]}
+                >
+                  {imageList.length === 0 && (
+                    <Col span={24}>
+                      <Empty description="暂无图片" />
+                    </Col>
+                  )}
+
+                  {imageList.map((item) => (
+                    <Col
+                      key={item.id}
+                      span={6}
+                      onClick={() => {
+                        console.log(item.url);
+                      }}
+                    >
+                      <Image
+                        preview={false}
+                        width={120}
+                        height={80}
+                        src={item.url}
+                      />
+                    </Col>
+                  ))}
+
+                  {imageList.length > 0 && (
+                    <Col span={24}>
+                      <Pagination
+                        showSizeChanger
+                        onChange={(currentPage, currentSize) => {
+                          setPage(currentPage);
+                          setSize(currentSize);
+                        }}
+                        defaultCurrent={page}
+                        total={total}
+                      />
+                    </Col>
+                  )}
+                </Row>
               </Col>
             </Row>
-            <Row
+          </div>
-              gutter={[
+        </Col>
-                { xs: 8, sm: 16, md: 24, lg: 32 },
+      </Row>
-                { xs: 4, sm: 8, md: 12, lg: 16 },
-              ]}
-            >
-              {imageList.length === 0 && (
-                <Col span={24}>
-                  <Empty description="暂无图片" />
-                </Col>
-              )}
-
-              {imageList.map((item) => (
-                <Col
-                  key={item.id}
-                  span={6}
-                  onClick={() => {
-                    console.log(item.url);
-                  }}
-                >
-                  <Image
-                    preview={false}
-                    width={120}
-                    height={80}
-                    src={item.url}
-                  />
-                </Col>
-              ))}
-
-              {imageList.length > 0 && (
-                <Col span={24}>
-                  <Pagination
-                    showSizeChanger
-                    onChange={(currentPage, currentSize) => {
-                      setPage(currentPage);
-                      setSize(currentSize);
-                    }}
-                    defaultCurrent={page}
-                    total={total}
-                  />
-                </Col>
-              )}
-            </Row>
-          </Col>
-        </Row>
-      </div>
     </>
   );
 };