Skip to content

X
xiaomai-cloud-class-web
Commit 389411ac by zhangleyuan
Options

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

parent b61e44e4
Showing with 89 additions and 30 deletions
src/modules/root/Header.tsx
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
* @Author: 吴文洁 * @Author: 吴文洁
* @Date: 2019-09-10 18:26:03 * @Date: 2019-09-10 18:26:03
* @LastEditors: zhangleyuan * @LastEditors: zhangleyuan
* @LastEditTime: 2020-12-07 16:46:18 * @LastEditTime: 2020-12-07 19:36:43
* @Description: * @Description:
*/ */
import React , { useContext, useEffect ,useState}from 'react'; import React , { useContext, useEffect ,useState}from 'react';
...@@ -65,9 +65,9 @@ function Header(){ ...@@ -65,9 +65,9 @@ function Header(){
title: "你确定要退出登录吗？", title: "你确定要退出登录吗？",
content: "退出后，需重新登录", content: "退出后，需重新登录",
icon: <QuestionCircleOutlined />, icon: <QuestionCircleOutlined />,
okText: "删除", okText: "退出登录",
okType: "danger", okType: "danger",
cancelText: "取消", cancelText: "点错了",
onOk: () => { onOk: () => {
handleLogout(); handleLogout();
}, },
......
src/modules/store-manege/CourseCatalogPage.tsx
...@@ -54,25 +54,43 @@ function CourseCatalogPage() { ...@@ -54,25 +54,43 @@ function CourseCatalogPage() {
} }
function deleteCatalog(record:any){ function deleteCatalog(record:any){
return confirm({ return confirm({
title: record.hasSon? '你确定要删除此分类吗？':'你确定要删除此子分类吗？', title: record.type==='parent'? '你确定要删除此分类吗？':'你确定要删除此子分类吗？',
content: record.hasSon? '删除后，此分类下包含的所有子分类都会被删除，此操作不可恢复。':'此操作不可恢复。', content: record.type==='parent'? '删除后，此分类下包含的所有子分类都会被删除，此操作不可恢复。':'此操作不可恢复。',
icon: <QuestionCircleOutlined />, icon: <QuestionCircleOutlined />,
okText: '删除', okText: '删除',
okType: 'danger', okType: 'danger',
cancelText: '取消', cancelText: '取消',
onOk: () => { onOk: () => {
handleDeleteCatalog(record.id); handleDeleteCatalog(record);
} }
}) })
} }
function handleDeleteCatalog(categoryId: string) { function handleDeleteCatalog(record:any) {
const param ={ const param ={
categoryId categoryId:record.id
} }
StoreService.delCourseCategory(param).then((res: any) =>{ 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("分类已删除"); message.success("分类已删除");
getCourseCatalogList();
}); });
} }
function parseColumn():any{ function parseColumn():any{
...@@ -128,28 +146,52 @@ function CourseCatalogPage() { ...@@ -128,28 +146,52 @@ function CourseCatalogPage() {
setTotal(res.result.total); setTotal(res.result.total);
}); });
} }
function refreshCatalogList(data:any):any{ function refreshCatalogList(data:any):any{
// const _courseCatalogList = [...courseCatalogList]; // const _courseCatalogList = [...courseCatalogList];
// setCourseCatalogList(_courseCatalogList) // setCourseCatalogList(_courseCatalogList)
let _courseCatalogList:any = [...courseCatalogList];
const { type} = data; const { type} = data;
switch (type){ switch (type){
case 'addCatalog': case 'addCatalog':
const item = { const item = {
categoryName:data.catalogName, categoryName:data.catalogName,
id:data.id, id:data.id,
hasSon:true, hasSon:false,
key:data.id key:data.id,
type:'parent'
} }
const _courseCatalogList:any = [...courseCatalogList];
console.log('1',_courseCatalogList);
_courseCatalogList.push(item); _courseCatalogList.push(item);
console.log('2',_courseCatalogList);
setCourseCatalogList(_courseCatalogList) setCourseCatalogList(_courseCatalogList)
break; 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: default:
break; break;
} }
...@@ -218,7 +260,13 @@ function CourseCatalogPage() { ...@@ -218,7 +260,13 @@ function CourseCatalogPage() {
return return
} }
if (record.child.length !== 0){ 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{ }else{
return <div>还未添加任何子分类</div>; return <div>还未添加任何子分类</div>;
} }
...@@ -245,7 +293,7 @@ function CourseCatalogPage() { ...@@ -245,7 +293,7 @@ function CourseCatalogPage() {
catalogModalVisible && <CatalogAddOrEditModal modalType={catalogModalType} onClose={()=>{setCatalogModalVisible(false)}} refreshCatalogList={refreshCatalogList} choosedItem={choosedItem}/> 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>
</div> </div>
......
src/modules/store-manege/modal/CatalogAddOrEditModal.tsx
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
* @Author: wufan * @Author: wufan
* @Date: 2020-11-27 16:21:49 * @Date: 2020-11-27 16:21:49
* @LastEditors: zhangleyuan * @LastEditors: zhangleyuan
* @LastEditTime: 2020-12-07 17:46:39 * @LastEditTime: 2020-12-07 19:05:11
* @Description: Description * @Description: Description
* @@Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有 * @@Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
*/ */
...@@ -21,7 +21,6 @@ interface CatalogAddOrEditModalProps { ...@@ -21,7 +21,6 @@ interface CatalogAddOrEditModalProps {
function CatalogAddOrEditModal(props: CatalogAddOrEditModalProps) { function CatalogAddOrEditModal(props: CatalogAddOrEditModalProps) {
const {onClose,modalType,refreshCatalogList,choosedItem} = props; const {onClose,modalType,refreshCatalogList,choosedItem} = props;
const [catalogName,setCatalogName] = useState(choosedItem.categoryName); const [catalogName,setCatalogName] = useState(choosedItem.categoryName);
console.log("catalogName",catalogName);
useEffect(() => { useEffect(() => {
}); });
function handleConfirm(){ function handleConfirm(){
...@@ -52,9 +51,13 @@ function CatalogAddOrEditModal(props: CatalogAddOrEditModalProps) { ...@@ -52,9 +51,13 @@ function CatalogAddOrEditModal(props: CatalogAddOrEditModalProps) {
categoryName: catalogName, categoryName: catalogName,
} }
StoreService.editCourseCategory(param).then((res: any) => { StoreService.editCourseCategory(param).then((res: any) => {
onClose(); const data = {
const data = {} type:'editCatalog',
catalogName:catalogName,
id:choosedItem.id
}
refreshCatalogList(data); refreshCatalogList(data);
onClose();
}); });
} }
return ( return (
......
src/modules/store-manege/modal/SecondCatalogAddOrEditModal.tsx
/* /*
* @Author: wufan * @Author: wufan
* @Date: 2020-11-27 16:21:49 * @Date: 2020-11-27 16:21:49
* @LastEditors: wufan * @LastEditors: zhangleyuan
* @LastEditTime: 2020-12-07 16:00:56 * @LastEditTime: 2020-12-07 19:51:03
* @Description: Description * @Description: Description
* @@Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有 * @@Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
*/ */
...@@ -16,14 +16,15 @@ import StoreService from "@/domains/store-domain/storeService"; ...@@ -16,14 +16,15 @@ import StoreService from "@/domains/store-domain/storeService";
const { Option } = Select; const { Option } = Select;
interface SecondCatalogAddOrEditModalProps { interface SecondCatalogAddOrEditModalProps {
onClose: (e: any) => void; onClose:any;
modalType:string; modalType:string;
parentId:string; parentId:string;
choosedItem:any choosedItem:any;
refreshCatalogList:any;
} }
function SecondCatalogAddOrEditModal(props: SecondCatalogAddOrEditModalProps) { function SecondCatalogAddOrEditModal(props: SecondCatalogAddOrEditModalProps) {
const {onClose,modalType,parentId} = props; const {onClose,modalType,parentId,refreshCatalogList} = props;
const [secondCatalogName,setSecondCatalogName] = useState(''); const [secondCatalogName,setSecondCatalogName] = useState('');
useEffect(() => { useEffect(() => {
...@@ -41,7 +42,14 @@ function SecondCatalogAddOrEditModal(props: SecondCatalogAddOrEditModalProps) { ...@@ -41,7 +42,14 @@ function SecondCatalogAddOrEditModal(props: SecondCatalogAddOrEditModalProps) {
categoryName:secondCatalogName categoryName:secondCatalogName
} }
StoreService.addCourseCategory(param).then((res: any) => { StoreService.addCourseCategory(param).then((res: any) => {
const data = {
type:'addSecondCatalog',
catalogName:secondCatalogName,
parentId,
id:res.result
}
refreshCatalogList(data);
onClose();
}); });
} }
return ( return (
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment