/*
|
* @Company: hugeInfo
|
* @Author: ldh
|
* @Date: 2022-07-28 11:31:52
|
* @LastEditTime: 2022-12-02 17:23:16
|
* @LastEditors: ldh
|
* @Version: 1.0.0
|
* @Description: 系列案公共展示区域组件
|
*/
|
import React, { useState, useEffect } from 'react';
|
import { Input, Typography } from 'antd';
|
import { FolderFilled, DownOutlined } from '@ant-design/icons';
|
import './index.less';
|
|
const { Search } = Input;
|
|
const { Text } = Typography;
|
|
const CaseFolderCheck = ({ caseData, childrenDom }) => {
|
// 系列案折叠
|
const [show, setShow] = useState([]);
|
|
// 系列案申请人数，被申请人数
|
const [casePersons, setCasePersons] = useState({ plaintiffList: 0, defendantList: 0 });
|
|
// 系列案搜索
|
function handleSearchCase(value) {
|
if (!value) {
|
setShow([]);
|
return;
|
}
|
let obj = { ...casePersons };
|
delete obj.plaintiffList;
|
delete obj.defendantList;
|
let arr = [];
|
for (let key in obj) {
|
if (obj[key].plaintiffs?.indexOf(value) !== -1 || obj[key].defendants?.indexOf(value) !== -1) {
|
arr.push(key);
|
}
|
}
|
setShow(arr);
|
}
|
|
// 系列案展开折叠
|
function handleCaseShow(t) {
|
let index = show.indexOf(t);
|
if (index !== -1) {
|
show.splice(index, 1);
|
setShow([...show]);
|
} else {
|
setShow([...show, t]);
|
}
|
}
|
|
useEffect(() => {
|
let obj = {};
|
caseData.forEach((x, t) => {
|
obj[t] = { plaintiffs: x.plaintiffs, defendants: x.defendants };
|
});
|
// 名称去重计算当事人人数
|
let plaintiffsArr = [],
|
defendantsArr = [];
|
for (let key in obj) {
|
plaintiffsArr = plaintiffsArr.concat(obj[key].plaintiffs);
|
defendantsArr = defendantsArr.concat(obj[key].defendants);
|
}
|
setCasePersons({
|
...obj,
|
plaintiffList: Array.from(new Set(plaintiffsArr))?.length || 0,
|
defendantList: Array.from(new Set(defendantsArr))?.length || 0,
|
});
|
}, []);
|
|
return (
|
<>
|
<div className="caseFolderCheck-folderHeader">
|
<div className="caseFolderCheck-folderHeader-title">
|
<FolderFilled style={{ fontSize: '40px', color: '#ffcf5c', marginRight: '8px' }} />
|
<div>
|
<h5 style={{ marginBottom: '4px' }}>系列案</h5>
|
<div>
|
<span>申请人数：{casePersons.plaintiffList}</span>
|
<span className="public-rightBorder">被申请人数：{casePersons.defendantList}</span>
|
</div>
|
</div>
|
</div>
|
<Search placeholder="查询申请人、被申请人" style={{ width: 232 }} onSearch={handleSearchCase} />
|
</div>
|
<div className="caseFolderCheck-folderMain">
|
{caseData.map((x, t) => {
|
return (
|
<div key={t}>
|
<div className="caseFolderCheck-folderMain-item">
|
<div className="caseFolderCheck-folderMain-title">
|
<div>系列案-{t < 10 ? `0${t + 1}` : t + 1}</div>
|
<div className="public-rightBorder">
|
申请人：
|
<Text style={{ maxWidth: '200px' }} ellipsis={{ tooltip: casePersons[t]?.plaintiffs }}>
|
{casePersons[t]?.plaintiffs}
|
</Text>
|
</div>
|
<div className="public-rightBorder">
|
被申请人：
|
<Text style={{ maxWidth: '200px' }} ellipsis={{ tooltip: casePersons[t]?.defendants }}>
|
{casePersons[t]?.defendants}
|
</Text>
|
</div>
|
</div>
|
<div onClick={() => handleCaseShow(`${t}`)} className={show.includes(`${t}`) ? 'caseFolderCheck-folderMain-show' : 'public-a'}>
|
<span style={{ marginRight: '4px' }}>{show.includes(`${t}`) ? '折叠' : '展开'}</span>
|
<DownOutlined style={{ fontSize: '12px' }} className={show.includes(`${t}`) ? 'caseFolderCheck-folderMain-rotate' : ''} />
|
</div>
|
</div>
|
{show.includes(`${t}`) ? <div className="caseFolderCheck-folderMain-content">{childrenDom(x)}</div> : null}
|
</div>
|
);
|
})}
|
</div>
|
</>
|
);
|
};
|
|
export default CaseFolderCheck;
|
