import React, { useState, useEffect, useCallback } from 'react'; import { Spin, Button } from 'antd'; import ListCardItem from './listCardItem'; import { get, post } from '../../services'; import styles from './listCardItem.less'; const tip = 'loading...'; const ListCard = props => { const { ouid, searchWord, valueCallback, onCommit = () => {}, btnLoading = false, } = props; const [valueList, setValueList] = useState({}); const [dataList, setdataList] = useState([]); const [loading, setLoading] = useState(true); const getValueCallback = useCallback((value, index) => { valueList[index] = value; setValueList({ ...valueList }); valueCallback({ ...valueList }); }, []); useEffect(() => { setLoading(true); const defaultConfig = { optionsList: [], title: '默认组', id: '', }; // /Cityinterface/rest/services/OMS.svc/U_GetUserListForBatchOper get('/Cityinterface/rest/services/OMS.svc/P_GetUserByStation', { // OUID:ouid||'', stationID: ouid || '', _version: 9999, _dc: new Date().getTime(), }) .then(res => { setLoading(false); const list = []; // eslint-disable-next-line no-unused-expressions res && res.forEach(item => { list.push({ ...defaultConfig, ...item }); }); setdataList(list); }) .catch(err => { console.error(err); setLoading(false); }); }, [ouid]); return ( <div> {loading ? ( <Spin size="large" spinning={loading} tip={tip} style={{ position: 'absolute', top: '30%', left: '0', right: '0', bottom: '0', }} /> ) : ( dataList && dataList.length > 0 && dataList.map((item, index) => ( <ListCardItem {...item} itemid={index} key={`item${index}key`} getValueCallback={getValueCallback} searchWord={searchWord} {...props} /> )) )} {true && !loading && dataList && ( <div className={styles.btnBox}> <Button type="primary" onClick={() => onCommit()} loading={btnLoading} > 提交 </Button> </div> )} </div> ); }; export default ListCard;