feat:修改课程分类的数据的显示

src/modules/store-manege/CourseCatalogPage.tsx

@@ -71,25 +71,28 @@ function CourseCatalogPage() {
       categoryId:record.id
     }
     StoreService.delCourseCategory(param).then((res: any) =>{
-      let  _courseCatalogList:any = [...courseCatalogList];
       if(record.type ==='parent'){
+        let  _courseCatalogList:any = [...courseCatalogList];
         for(let i=0;i<_courseCatalogList.length;i++){
           if(_courseCatalogList[i].id === record.id){
             _courseCatalogList.splice(i,1);
           }
         }
+        setCourseCatalogList(_courseCatalogList)
       }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);
+        let  _courseCatalogListClone:any = JSON.parse(JSON.stringify(courseCatalogList));
+        for(let i=0;i<_courseCatalogListClone.length;i++){
+          if(_courseCatalogListClone[i].child){
+            for(let j=0;j<_courseCatalogListClone[i].child.length;j++){
+              if(_courseCatalogListClone[i].child[j].id === record.id){
+                _courseCatalogListClone[i].child.splice(j,1);
               }
             }
           }
         }
+        setCourseCatalogList(_courseCatalogListClone)
       }
-      setCourseCatalogList(_courseCatalogList)
+     
       message.success("分类已删除");
     });
   }
@@ -147,8 +150,6 @@ function CourseCatalogPage() {
     });
   }
   function refreshCatalogList(data:any):any{
-    // const _courseCatalogList = [...courseCatalogList];
-    // setCourseCatalogList(_courseCatalogList)
     let  _courseCatalogList:any = [...courseCatalogList];
     const { type} = data;
     switch (type){
@@ -161,7 +162,6 @@ function CourseCatalogPage() {
           type:'parent'
         }
         _courseCatalogList.push(item);
-        
         setCourseCatalogList(_courseCatalogList)
       break;
       case 'editCatalog':   
@@ -179,8 +179,8 @@ function CourseCatalogPage() {
             id:data.id,
             key:data.id
           }
-          let  _courseCatalogList2:any = [...courseCatalogList];
-          _courseCatalogList2.map((item:any,index:any)=>{
+          let  _courseCatalogListClone:any = JSON.parse(JSON.stringify(courseCatalogList));
+          _courseCatalogListClone.map((item:any,index:any)=>{
             if(item.id === data.parentId){
               if(!item.child){
                 item.child=[];
@@ -189,8 +189,28 @@ function CourseCatalogPage() {
             }
             return item
           });
-          setCourseCatalogList(_courseCatalogList2)
-          console.log("courseCatalogList",courseCatalogList);
+          setCourseCatalogList(_courseCatalogListClone)
+      break;
+      case 'editSecondCatalog':
+        const secondEditItem = {
+          categoryName:data.catalogName,
+          id:data.id,
+          key:data.id
+        }
+        let  _courseCatalogListEditClone:any = JSON.parse(JSON.stringify(courseCatalogList));
+        _courseCatalogListEditClone.map((item:any,index:any)=>{
+          if(item.id === data.parentId){
+             if(item.child){
+              item.child.map((_item:any,_index:any)=>{
+                if(_item.id === data.id){
+                  _item.categoryName =data.catalogName;
+                }
+              })
+             }  
+            
+          }
+          return item
+        });
       break;
       default:
       break;
@@ -209,7 +229,6 @@ function CourseCatalogPage() {
   }
 
   function editCatalog(record:any){
-   
     if(record.type ==="parent"){
       setCatalogModalType('edit');
       setCatalogModalVisible(true);
@@ -254,19 +273,19 @@ function CourseCatalogPage() {
             <Table
                 columns={ parseColumn() }
                 pagination={false}
-              
                 expandedRowRender={(record:RecordTypes) => {
                   if(!record.child){
                     return
                   }
                   if (record.child.length !== 0){
-                    // 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>
+                    console.log("record.child",record.child);
+                    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>;
                   }

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

@@ -11,6 +11,7 @@ import React, { useState, useEffect } from "react";
 import { Modal,Form,Input,Button,Select} from "antd";
 import './SecondCatalogAddOrEditModal.less'
 import User from '@/common/js/user';
+import _ from "underscore";
 import StoreService from "@/domains/store-domain/storeService";
 
 
@@ -24,20 +25,35 @@ interface SecondCatalogAddOrEditModalProps {
 }
 
 function SecondCatalogAddOrEditModal(props: SecondCatalogAddOrEditModalProps) {
-  const {onClose,modalType,parentId,refreshCatalogList} = props;
+  const {onClose,modalType,parentId,refreshCatalogList,choosedItem} = props;
   const [secondCatalogName,setSecondCatalogName] =  useState('');
-  useEffect(() => {
-
+  const [selectParentId,setSelectParentId] =  useState(parentId);
+  const [optionList,setOptionList] = useState([]);
+  const [query, setQuery] = useState({
+    current: 0,
+    size: 100,
+    storeId: User.getStoreId(),
   });
-
+  useEffect(() => {
+    getOptionList();
+  },[query]);
+  function getOptionList():any {
+    let _query = _.clone(query);
+    _query.current = query.current + 1;
+    StoreService.getCourseCatalogList(_query).then((res: any) => {
+      setOptionList(res.result.records);
+    });
+  }
   function handleConfirm(){
     if(modalType === "add"){
       addSecondcatalog();
+    }else{
+      editSecondcatalog();
     }
   }
   function addSecondcatalog():any{
     const param = {
-      parentId,
+      parentId:selectParentId,
       storeId: User.getStoreId(),
       categoryName:secondCatalogName
     }
@@ -45,13 +61,30 @@ function SecondCatalogAddOrEditModal(props: SecondCatalogAddOrEditModalProps) {
       const data = {
         type:'addSecondCatalog',
         catalogName:secondCatalogName,
-        parentId,
+        parentId:selectParentId,
         id:res.result
       }
       refreshCatalogList(data);
       onClose();
     });
   }
+  function editSecondcatalog():any{
+    const param = {
+      parentId:selectParentId,
+      categoryId:choosedItem.id,
+      categoryName: secondCatalogName,
+    }
+    StoreService.editCourseCategory(param).then((res: any) => {
+      const data = {
+        type:'editSecondCatalog',
+        catalogName:secondCatalogName,
+        id:choosedItem.id,
+        parentId:selectParentId,
+      }
+      refreshCatalogList(data);
+      onClose();
+    });
+  }
   return (
     <Modal
       visible={true}
@@ -96,10 +129,18 @@ function SecondCatalogAddOrEditModal(props: SecondCatalogAddOrEditModalProps) {
               name="所属分类"
               rules={[{ required: true}]}
           >
-          <Select style={{ width: 240 }}>
-            <Option value="china">全部</Option>
-            <Option value="usa">一阶培训</Option>
-        </Select>
+           <Select
+                style={{ width: 240 }}
+                defaultValue={parentId}
+                onChange={(value) => {
+                  setSelectParentId(String(value))
+                }}
+              >
+                {_.map(optionList, (item:any, index) => {
+                  return <Option id={item.id} value={item.id}>{item.categoryName}</Option>
+                })}
+
+              </Select>
         </Form.Item>
      </Form>
     </Modal>