分类组件显示当前列表对应分类数量

src/compenents/tree-category/index.tsx

@@ -4,12 +4,13 @@ import { resourceCategory } from "../../api/index";
 
 interface Option {
   key: string | number;
-  title: string;
+  title: any;
   children?: Option[];
 }
 
 interface PropInterface {
   text: string;
+  categoryCount: any;
   onUpdate: (keys: any, title: any) => void;
 }
 
@@ -17,6 +18,7 @@ export const TreeCategory = (props: PropInterface) => {
   const [treeData, setTreeData] = useState<any>([]);
   const [loading, setLoading] = useState<boolean>(true);
   const [selectKey, setSelectKey] = useState<any>([]);
+
   useEffect(() => {
     setLoading(true);
     resourceCategory.resourceCategoryList().then((res: any) => {
@@ -24,32 +26,39 @@ export const TreeCategory = (props: PropInterface) => {
       if (JSON.stringify(categories) !== "{}") {
         const new_arr: Option[] = checkArr(categories, 0);
         setTreeData(new_arr);
-      } else {
-        const new_arr: Option[] = [
-          {
-            key: "",
-            title: "全部",
-            children: [],
-          },
-        ];
-        setTreeData(new_arr);
       }
       setLoading(false);
     });
-  }, []);
+  }, [props.categoryCount]);
 
   const checkArr = (categories: any[], id: number) => {
     const arr = [];
     for (let i = 0; i < categories[id].length; i++) {
       if (!categories[categories[id][i].id]) {
+        let name = (
+          <div className="d-flex">
+            {categories[id][i].name}
+            <span className="tree-num">
+              ({props.categoryCount[categories[id][i].id] || 0})
+            </span>
+          </div>
+        );
         arr.push({
-          title: categories[id][i].name,
+          title: name,
           key: categories[id][i].id,
         });
       } else {
+        let name = (
+          <div className="d-flex">
+            {categories[id][i].name}
+            <span className="tree-num">
+              ({props.categoryCount[categories[id][i].id] || 0})
+            </span>
+          </div>
+        );
         const new_arr: Option[] = checkArr(categories, categories[id][i].id);
         arr.push({
-          title: categories[id][i].name,
+          title: name,
           key: categories[id][i].id,
           children: new_arr,
         });
@@ -87,6 +96,9 @@ export const TreeCategory = (props: PropInterface) => {
         onClick={() => onSelect([], "")}
       >
         全部{props.text}
+        {JSON.stringify(props.categoryCount) !== "{}" && (
+          <span className="tree-num">({props.categoryCount["0"]})</span>
+        )}
       </div>
       <Tree onSelect={onSelect} onExpand={onExpand} treeData={treeData} />
     </div>

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

@@ -97,7 +97,11 @@ export const UploadImageButton = (props: PropsInterface) => {
         >
           <Row gutter={16}>
             <Col span={4}>
-              <TreeCategory text={"图片"} onUpdate={(keys: any) => setCategoryIds(keys)} />
+              <TreeCategory
+                categoryCount={{}}
+                text={"图片"}
+                onUpdate={(keys: any) => setCategoryIds(keys)}
+              />
             </Col>
             <Col span={20}>
               <Row style={{ marginBottom: 24 }}>

src/index.less

@@ -459,3 +459,7 @@ textarea.ant-input {
   height: 14px;
   background: #cccccc;
 }
+
+.tree-num {
+  color: rgba(0, 0, 0, 0.45);
+}

src/pages/course/index.tsx

@@ -44,6 +44,7 @@ export const CoursePage = () => {
   const [title, setTitle] = useState<string>("");
   const [dep_ids, setDepIds] = useState<any>([]);
   const [selLabel, setLabel] = useState<string>("全部视频");
+  const [categoryCount, setCategoryCount] = useState<any>({});
 
   const items: TabsProps["items"] = [
     {
@@ -53,9 +54,14 @@ export const CoursePage = () => {
         <div className="float-left">
           <TreeCategory
             text={"课程"}
+            categoryCount={categoryCount}
             onUpdate={(keys: any, title: any) => {
               setCategoryIds(keys);
+              if (typeof title == "string") {
                 setLabel(title);
+              } else {
+                setLabel(title.props.children[0]);
+              }
             }}
           />
         </div>
@@ -172,6 +178,7 @@ export const CoursePage = () => {
       .then((res: any) => {
         setTotal(res.data.total);
         setList(res.data.data);
+        setCategoryCount(res.data.category_count);
         setLoading(false);
       })
       .catch((err: any) => {

src/pages/resource/images/index.tsx

@@ -43,6 +43,7 @@ export const ResourceImagesPage = () => {
   const [hoverArr, setHoverArr] = useState<any>([]);
   const [selLabel, setLabel] = useState<string>("全部图片");
   const [loading, setLoading] = useState<boolean>(false);
+  const [categoryCount, setCategoryCount] = useState<any>({});
 
   // 删除图片
   const removeResource = () => {
@@ -87,6 +88,7 @@ export const ResourceImagesPage = () => {
         }
         setVisibleArr(arr);
         setHoverArr(arr);
+        setCategoryCount(res.data.category_count);
         setLoading(false);
       })
       .catch((err: any) => {
@@ -151,14 +153,19 @@ export const ResourceImagesPage = () => {
         <div className="left-box">
           <TreeCategory
             text={"图片"}
+            categoryCount={categoryCount}
             onUpdate={(keys: any, title: any) => {
               setCategoryIds(keys);
+              if (typeof title == "string") {
                 setLabel(title);
+              } else {
+                setLabel(title.props.children[0]);
+              }
             }}
           />
         </div>
         <div className="right-box">
-          <div className="playedu-main-title float-left mb-24">
+          <div className="d-flex playedu-main-title float-left mb-24">
             图片 / {selLabel}
           </div>
           <Row gutter={16} style={{ marginBottom: 24 }}>

src/pages/resource/videos/index.tsx

@@ -29,6 +29,7 @@ export const ResourceVideosPage = () => {
   const [loading, setLoading] = useState<boolean>(true);
   const [category_ids, setCategoryIds] = useState<any>([]);
   const [selLabel, setLabel] = useState<string>("全部视频");
+  const [categoryCount, setCategoryCount] = useState<any>({});
 
   const columns: ColumnsType<DataType> = [
     // {
@@ -127,6 +128,7 @@ export const ResourceVideosPage = () => {
         setVideoList(res.data.result.data);
         setVideoExtra(res.data.videos_extra);
         setAdminUsers(res.data.admin_users);
+        setCategoryCount(res.data.category_count);
         setLoading(false);
       })
       .catch((err: any) => {
@@ -166,14 +168,19 @@ export const ResourceVideosPage = () => {
         <div className="left-box">
           <TreeCategory
             text={"视频"}
+            categoryCount={categoryCount}
             onUpdate={(keys: any, title: any) => {
               setCategoryIds(keys);
+              if (typeof title == "string") {
                 setLabel(title);
+              } else {
+                setLabel(title.props.children[0]);
+              }
             }}
           />
         </div>
         <div className="right-box">
-          <div className="playedu-main-title float-left mb-24">
+          <div className="d-flex playedu-main-title float-left mb-24">
             视频 / {selLabel}
           </div>
           <div className="float-left mb-24">