120 lines
3.6 KiB
TypeScript
120 lines
3.6 KiB
TypeScript
import React, { useEffect, useState } from 'react';
|
|
import '../Style/ld_style.less';
|
|
import { Input, List } from 'antd';
|
|
import { history } from 'umi'
|
|
import { getBranchList, getMemberAndBranch } from './service';
|
|
import person from '@/assets/topic/person.png'
|
|
import branch from '@/assets/topic/branch.png'
|
|
|
|
const { Search } = Input;
|
|
|
|
const PartyBranch: React.FC<{}> = () => {
|
|
//member number and branch number
|
|
const [memberNumber, setMemberNumber] = useState<any>({});
|
|
//branch list
|
|
const [branchData, setBranchData] = useState<any[]>([]);
|
|
//get member and branch
|
|
const getMemberNumber = () => {
|
|
getMemberAndBranch().then(res => {
|
|
if (res?.code == 200) {
|
|
setMemberNumber(res?.data);
|
|
}
|
|
})
|
|
}
|
|
|
|
//get member and branch
|
|
const getBranchData = () => {
|
|
getBranchList().then(res => {
|
|
if (res?.code == 200) {
|
|
setBranchData(res?.data);
|
|
}
|
|
})
|
|
}
|
|
//search params redirect
|
|
const onSearch = (value: string) => {
|
|
const params = {
|
|
param: value
|
|
}
|
|
history.push({ pathname: "/partyMemberTopic/personInfor", state: params });
|
|
}
|
|
|
|
//onclick
|
|
const clickCard = (data: any) => {
|
|
history.push({ pathname: "/partyMemberTopic/personInfor", state: data });
|
|
}
|
|
|
|
//to home
|
|
const toHome = () => {
|
|
history.push("/partyMemberTopic/home");
|
|
}
|
|
|
|
//to total personInfor
|
|
const personNumClick = () => {
|
|
history.push({ pathname: "/partyMemberTopic/personInfor" });
|
|
}
|
|
|
|
useEffect(() => {
|
|
getMemberNumber();
|
|
getBranchData();
|
|
}, [])
|
|
return (
|
|
<div className="page-container">
|
|
<div className="top-banner">
|
|
<div className="back-home">
|
|
<span onClick={() => toHome()}>返回首页</span>
|
|
</div>
|
|
</div>
|
|
<div className="search">
|
|
<span className="text"><span>党员名录</span>(当前共{memberNumber?.member}条)</span>
|
|
<div className="search-box">
|
|
<Search
|
|
placeholder="输入姓名/邮箱/电话"
|
|
allowClear
|
|
enterButton="搜索"
|
|
style={{ width: 322 }}
|
|
onSearch={onSearch}
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div className="static-box">
|
|
<div className="person-num" onClick={() => personNumClick()}>党员数量<span>{memberNumber?.member}</span>人</div>
|
|
<div className="party-num">党支部数量<span>{memberNumber?.branch}</span>个</div>
|
|
</div>
|
|
<div className="mess-box">
|
|
<List
|
|
grid={{ gutter: 16, column: 4 }}
|
|
dataSource={branchData}
|
|
renderItem={(item: any) => (
|
|
<List.Item>
|
|
<div className="wrapper" onClick={() => clickCard(item)}>
|
|
<div className="pic-bg">{item.branchName}</div>
|
|
<div className="mess">
|
|
{/* <div className="mess-left">党员数量</div>
|
|
<div className="mess-right">
|
|
<span>{item.count}</span>人
|
|
</div> */}
|
|
<div className="mess-left">
|
|
<span>{item.branchCount}</span>个
|
|
<div>
|
|
<img src={branch} />
|
|
<span>党支部数</span>
|
|
</div>
|
|
</div>
|
|
<div className="mess-right">
|
|
<span>{item.count}</span>人
|
|
<div>
|
|
<img src={person} />
|
|
<span>党员数量</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</List.Item>
|
|
)}
|
|
/>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default PartyBranch; |