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

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 }}>