feat:处理课程分类添加数据后没有实时显示

src/modules/root/Header.tsx

@@ -2,7 +2,7 @@
  * @Author: 吴文洁
  * @Date: 2019-09-10 18:26:03
  * @LastEditors: zhangleyuan
- * @LastEditTime: 2020-12-07 16:46:18
+ * @LastEditTime: 2020-12-07 19:36:43
  * @Description:
  */
 import React , { useContext, useEffect ,useState}from 'react';
@@ -65,9 +65,9 @@ function Header(){
       title: "你确定要退出登录吗？",
       content: "退出后，需重新登录",
       icon: <QuestionCircleOutlined />,
-      okText: "删除",
+      okText: "退出登录",
       okType: "danger",
-      cancelText: "取消",
+      cancelText: "点错了",
       onOk: () => {
         handleLogout();
       },

src/modules/store-manege/CourseCatalogPage.tsx

@@ -54,25 +54,43 @@ function CourseCatalogPage() {
   }
   function deleteCatalog(record:any){
     return  confirm({
-      title: record.hasSon? '你确定要删除此分类吗？':'你确定要删除此子分类吗？',
-      content:  record.hasSon? '删除后，此分类下包含的所有子分类都会被删除，此操作不可恢复。':'此操作不可恢复。',
+      title: record.type==='parent'? '你确定要删除此分类吗？':'你确定要删除此子分类吗？',
+      content: record.type==='parent'? '删除后，此分类下包含的所有子分类都会被删除，此操作不可恢复。':'此操作不可恢复。',
       icon: <QuestionCircleOutlined />,
       okText: '删除',
       okType: 'danger',
       cancelText: '取消',
       onOk: () => {
-        handleDeleteCatalog(record.id);
+        handleDeleteCatalog(record);
       }
     })
   }
 
-  function handleDeleteCatalog(categoryId: string) {
+  function handleDeleteCatalog(record:any) {
     const param ={
-      categoryId
+      categoryId:record.id
     }
     StoreService.delCourseCategory(param).then((res: any) =>{
+      let  _courseCatalogList:any = [...courseCatalogList];
+      if(record.type ==='parent'){
+        for(let i=0;i<_courseCatalogList.length;i++){
+          if(_courseCatalogList[i].id === record.id){
+            _courseCatalogList.splice(i,1);
+          }
+        }
+      }else{
+        for(let i=0;i<_courseCatalogList.length;i++){
+          if(_courseCatalogList[i].child){
+            for(let j=0;j<_courseCatalogList[i].child.length;j++){
+              if(_courseCatalogList[i].child[j].id === record.id){
+                _courseCatalogList[i].child.splice(j,1);
+              }
+            }
+          }
+        }
+      }
+      setCourseCatalogList(_courseCatalogList)
       message.success("分类已删除");
-      getCourseCatalogList();
     });
   }
   function parseColumn():any{
@@ -128,28 +146,52 @@ function CourseCatalogPage() {
       setTotal(res.result.total);
     });
   }
-  
   function refreshCatalogList(data:any):any{
     // const _courseCatalogList = [...courseCatalogList];
     // setCourseCatalogList(_courseCatalogList)
-   
+    let  _courseCatalogList:any = [...courseCatalogList];
     const { type} = data;
     switch (type){
       case 'addCatalog':
-       
         const item = {
           categoryName:data.catalogName,
           id:data.id,
-          hasSon:true,
-          key:data.id
+          hasSon:false,
+          key:data.id,
+          type:'parent'
         }
-        const _courseCatalogList:any = [...courseCatalogList];
-        console.log('1',_courseCatalogList);
         _courseCatalogList.push(item);
-        console.log('2',_courseCatalogList);
+        
         setCourseCatalogList(_courseCatalogList)
       break;
-
+      case 'editCatalog':   
+        _courseCatalogList.map((item:any,index:any)=>{
+          if(item.id === data.id){
+            item.categoryName = data.catalogName
+          }
+          return item
+        });
+        setCourseCatalogList(_courseCatalogList)
+      break;
+      case 'addSecondCatalog':  
+          const secondItem = {
+            categoryName:data.catalogName,
+            id:data.id,
+            key:data.id
+          }
+          let  _courseCatalogList2:any = [...courseCatalogList];
+          _courseCatalogList2.map((item:any,index:any)=>{
+            if(item.id === data.parentId){
+              if(!item.child){
+                item.child=[];
+              }
+              item.child.push(secondItem)
+            }
+            return item
+          });
+          setCourseCatalogList(_courseCatalogList2)
+          console.log("courseCatalogList",courseCatalogList);
+      break;
       default:
       break;
     }
@@ -218,7 +260,13 @@ function CourseCatalogPage() {
                     return
                   }
                   if (record.child.length !== 0){
-                    return <Table columns={parseColumn()} dataSource={record.child} pagination={false}   className="child-table"/>
+                    // return <Table columns={parseColumn()} dataSource={record.child} pagination={false}   className="child-table"/>
+                    return <div>{
+                        record.child.map((item:any,index:any)=>{
+                          return <span>{item.categoryName}</span>
+                        })
+                      }
+                    </div>
                   }else{
                     return <div>还未添加任何子分类</div>;
                   }
@@ -245,7 +293,7 @@ function CourseCatalogPage() {
           catalogModalVisible && <CatalogAddOrEditModal modalType={catalogModalType} onClose={()=>{setCatalogModalVisible(false)}} refreshCatalogList={refreshCatalogList} choosedItem={choosedItem}/>
         }
         {
-          secondCatalogModalVisible && <SecondCatalogAddOrEditModal modalType={secondCatalogModalType} parentId={parentCatalogId} onClose={()=>{setSecondCatalogModalVisible(false)}} choosedItem={choosedItem} />
+          secondCatalogModalVisible && <SecondCatalogAddOrEditModal modalType={secondCatalogModalType} parentId={parentCatalogId} onClose={()=>{setSecondCatalogModalVisible(false)}} choosedItem={choosedItem} refreshCatalogList={refreshCatalogList} />
         }
       </div>
     </div>

src/modules/store-manege/modal/CatalogAddOrEditModal.tsx

@@ -2,7 +2,7 @@
  * @Author: wufan
  * @Date: 2020-11-27 16:21:49
  * @LastEditors: zhangleyuan
- * @LastEditTime: 2020-12-07 17:46:39
+ * @LastEditTime: 2020-12-07 19:05:11
  * @Description: Description
  * @@Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
  */
@@ -21,7 +21,6 @@ interface CatalogAddOrEditModalProps {
 function CatalogAddOrEditModal(props: CatalogAddOrEditModalProps) {
   const {onClose,modalType,refreshCatalogList,choosedItem} = props;
   const [catalogName,setCatalogName] = useState(choosedItem.categoryName);
-  console.log("catalogName",catalogName);
   useEffect(() => {
   });
   function handleConfirm(){
@@ -52,9 +51,13 @@ function CatalogAddOrEditModal(props: CatalogAddOrEditModalProps) {
       categoryName: catalogName,
     }
     StoreService.editCourseCategory(param).then((res: any) => {
-      onClose();
-      const data = {}
+      const data = {
+        type:'editCatalog',
+        catalogName:catalogName,
+        id:choosedItem.id
+      }
       refreshCatalogList(data);
+      onClose();
     });
   }
   return (

src/modules/store-manege/modal/SecondCatalogAddOrEditModal.tsx

 /*
  * @Author: wufan
  * @Date: 2020-11-27 16:21:49
- * @LastEditors: wufan
- * @LastEditTime: 2020-12-07 16:00:56
+ * @LastEditors: zhangleyuan
+ * @LastEditTime: 2020-12-07 19:51:03
  * @Description: Description
  * @@Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
  */
@@ -16,14 +16,15 @@ import StoreService from "@/domains/store-domain/storeService";
 
 const { Option } = Select;
 interface SecondCatalogAddOrEditModalProps {
-  onClose: (e: any) => void;
+  onClose:any;
   modalType:string;
   parentId:string;
-  choosedItem:any
+  choosedItem:any;
+  refreshCatalogList:any;
 }
 
 function SecondCatalogAddOrEditModal(props: SecondCatalogAddOrEditModalProps) {
-  const {onClose,modalType,parentId} = props;
+  const {onClose,modalType,parentId,refreshCatalogList} = props;
   const [secondCatalogName,setSecondCatalogName] =  useState('');
   useEffect(() => {
 
@@ -41,7 +42,14 @@ function SecondCatalogAddOrEditModal(props: SecondCatalogAddOrEditModalProps) {
       categoryName:secondCatalogName
     }
     StoreService.addCourseCategory(param).then((res: any) => {
-      
+      const data = {
+        type:'addSecondCatalog',
+        catalogName:secondCatalogName,
+        parentId,
+        id:res.result
+      }
+      refreshCatalogList(data);
+      onClose();
     });
   }
   return (