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

View File

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