import React, { useState, useEffect } from 'react'; import { Tabs } from 'antd'; import MonthAudit from './MonthAudit'; import UrgentAudit from './UrgentAudit'; const { TabPane } = Tabs; const Index = (props) => { const {tabList, auditCount, update} = props const [tab, setTab] = useState('month'); const tabMove = (val) => { setTab(val); update?.() }; useEffect(() => { if (tabList === 'month' || tabList === 'urgent') setTab(tabList) }, [tabList]) return ( <div> <div style={{marginTop:10, position: 'relative'}}> <Tabs activeKey={tab} onChange={tabMove} style={{marginBottom: 15}}> <TabPane tab={ <div className="pos_aline">月度请购 {auditCount?.purchaseSummaryNumber > 0 && ( <span className="audit_count">{auditCount?.purchaseSummaryNumber}</span> )} </div> } key="month"/> <TabPane tab={( <div className="pos_aline">紧急请购 {auditCount?.purchaseUrgentNumber > 0 && ( <span className="audit_count">{auditCount?.purchaseUrgentNumber || 0}</span> )} </div> )} key="urgent"/> </Tabs> </div> {{ "month": <MonthAudit/>, "urgent": <UrgentAudit/> }[tab]} </div> ); }; export default Index;