feat:添加表格加载渲染

This commit is contained in:
shixiaohua 2024-05-10 16:10:54 +08:00
parent 4dc2f1ad6c
commit e1d7446d8c
2 changed files with 10 additions and 5 deletions

View File

@ -12,7 +12,9 @@ import {DataType, ResponseVO, ResultPage} from "@/lib/definitions";
export default function Layout({children}: { children: React.ReactNode }) {
const [resultDataTypeList, setResultDataTypeList] = useState<DataType[]>([]);
const [loadingState,setLoadingState] =useState(true)
const refreshDate = (): void => {
setLoadingState(true)
getTaskTreeResult(JSON.stringify({
pageSize:1000,
pageNumber:1,
@ -24,6 +26,7 @@ export default function Layout({children}: { children: React.ReactNode }) {
dataType.state=taskStateList.find(taskState=>taskState.code===dataType.state+'')?.name
})
setResultDataTypeList(result.data.content)
setLoadingState(false)
}
})
}
@ -62,7 +65,7 @@ export default function Layout({children}: { children: React.ReactNode }) {
<div>
<div className='firstRow' style={{display: 'flex'}}>
<div className='leftUp'>
<TreeTable refreshDate={refreshDate} priority='3' resultDataTypeList={resultDataTypeList}/>
<TreeTable loadingState={loadingState} refreshDate={refreshDate} priority='3' resultDataTypeList={resultDataTypeList}/>
</div>
<div id='tenUp' className='up'>
@ -70,7 +73,7 @@ export default function Layout({children}: { children: React.ReactNode }) {
</div>
<div className='rightUp' >
<TreeTable refreshDate={refreshDate} priority='2' resultDataTypeList={resultDataTypeList}/>
<TreeTable loadingState={loadingState} refreshDate={refreshDate} priority='2' resultDataTypeList={resultDataTypeList}/>
</div>
</div>
<div id='left' className='left'>
@ -78,14 +81,14 @@ export default function Layout({children}: { children: React.ReactNode }) {
</div>
<div className='secondRow' style={{display: 'flex'}}>
<div className='leftDown'>
<TreeTable refreshDate={refreshDate} priority='1' resultDataTypeList={resultDataTypeList}/>
<TreeTable loadingState={loadingState} refreshDate={refreshDate} priority='1' resultDataTypeList={resultDataTypeList}/>
</div>
<div className='up'>
<span id='upDown'></span>
</div>
{/*<div style={{float:'left',width:'48%',height: '48vh',background:"gray"}}>{children}</div>*/}
<div className='rightDown'>
<TreeTable refreshDate={refreshDate} priority='0' resultDataTypeList={resultDataTypeList}/>
<TreeTable loadingState={loadingState} refreshDate={refreshDate} priority='0' resultDataTypeList={resultDataTypeList}/>
</div>
</div>
</div>

View File

@ -29,7 +29,8 @@ const rowSelection: TableRowSelection<DataType> = {
interface TableSearchType {
priority: string,
resultDataTypeList: DataType[],
refreshDate?: () => void
refreshDate?: () => void,
loadingState:boolean
}
const TreeTable: React.FC<TableSearchType> = (props) => {
@ -178,6 +179,7 @@ const TreeTable: React.FC<TableSearchType> = (props) => {
})}
pagination={{pageSize: 5}}
scroll={{y: 280}}
loading={props.loadingState}
/>
</ConfigProvider>
{/*<Space align="center" style={{ marginBottom: 16 }}>*/}