/*
|
* @Company: hugeInfo
|
* @Author: ldh
|
* @Date: 2022-03-16 11:58:56
|
* @LastEditTime: 2023-07-13 14:32:22
|
* @LastEditors: lwh
|
* @Version: 1.0.0
|
* @Description: 公有页面的搜索
|
*/
|
import React, { useState } from 'react';
|
import PropTypes from 'prop-types';
|
import { Form, Row, Col, Input, DatePicker, Select, Button, TreeSelect } from 'antd';
|
import { DownOutlined } from '@ant-design/icons';
|
import * as $$ from '../../utils/utility';
|
import './index.less';
|
|
const { RangePicker } = DatePicker;
|
|
const { Option } = Select;
|
|
/**
|
* form, // form组件
|
* itemData, // 搜索的数据数组
|
* labelLength, // form的label标签字符串的长度
|
* rowNum, // 一行放多少个搜索item
|
* handleRest, // 重置
|
* handleSearch, // 搜索
|
*/
|
const TableSearch = ({ form, itemData, labelLength = 5, rowNum = 3, handleReset, handleSearch }) => {
|
const [searchMore, setSearchMore] = useState(false);
|
|
const span = 24 / rowNum;
|
|
let display = false;
|
|
// 是否需要展开 or 收起
|
const lineNum = rowNum * 2;
|
if (itemData.length > lineNum) display = true;
|
|
// 系统字体大小
|
const fontSize = parseInt(getComputedStyle(window.document.getElementsByTagName('HTML')[0]).fontSize);
|
|
// 输出placeholder
|
function setPlaceholder(key, type) {
|
let str = '';
|
switch (key) {
|
case 'caseNo':
|
str = '输入查询案号';
|
break;
|
case 'judicNo':
|
str = '输入查询司法确认案号';
|
break;
|
case 'plaintiffs':
|
str = '申请方当事人/代理人姓名';
|
break;
|
case 'defendants':
|
str = '被申请方当事人/代理人姓名';
|
break;
|
case 'addr':
|
str = '输入纠纷发生详细地址的关键词';
|
break;
|
default:
|
str = type === 'Select' ? '全部' : '请输入';
|
break;
|
}
|
return str;
|
}
|
|
return (
|
<Form form={form} labelAlign="right" className="tableSearch">
|
<Row gutter={[24, 16]}>
|
{itemData.map((x, t) => {
|
let placeholder = x.placeholder || setPlaceholder(x.name, x.type);
|
let allowClear = x.allowClear || true;
|
let dom = null;
|
let rules = {};
|
if (x.type === 'Input') {
|
dom = <Input placeholder={placeholder} allowClear {...x} />;
|
rules = { max: x.max || 32, message: '搜索内容过长' };
|
}
|
if (x.type === 'Select') {
|
dom = (
|
<Select allowClear placeholder={placeholder} {...x}>
|
{x.selectdata?.map((y) => (
|
<Option key={y.value}>{y.label}</Option>
|
))}
|
</Select>
|
);
|
}
|
if (x.type === 'RangePicker') {
|
rules = { type: 'array' };
|
dom = (
|
<RangePicker
|
style={{ width: '100%' }}
|
ranges={{
|
'今日': [$$.myMoment(), $$.myMoment()],
|
'本月': [$$.myMoment().startOf('month'), $$.myMoment().endOf('month')],
|
}}
|
allowClear
|
{...x}
|
/>
|
);
|
}
|
if (x.type === 'TreeSelect') {
|
dom = (
|
<TreeSelect
|
showSearch
|
placeholder={placeholder}
|
dropdownStyle={{ maxHeight: 500, overflow: 'auto' }}
|
treeData={x.treedata}
|
treeDefaultExpandAll
|
allowClear
|
filterTreeNode={(inputValue, treeNode) => (treeNode.label.indexOf(inputValue) !== -1 ? true : false)}
|
{...x}
|
/>
|
);
|
}
|
return (
|
<Col span={span} style={display && { display: searchMore ? 'block' : t < lineNum ? 'block' : 'none' }} key={t + 1}>
|
<Form.Item name={x.name} rules={[rules]} label={<div style={{ width: `${fontSize * labelLength}px` }}>{x.label}</div>}>
|
{dom}
|
</Form.Item>
|
</Col>
|
);
|
})}
|
</Row>
|
<Row style={{ marginTop: '16px' }}>
|
<Col span={24} style={{ textAlign: 'right' }}>
|
<Button className="public-buttonMargin" onClick={handleReset}>
|
重置
|
</Button>
|
<Button type="primary" htmlType="submit" onClick={handleSearch}>
|
查询
|
</Button>
|
{display && (
|
<span className="tableSearch-searchMore" onClick={() => setSearchMore(!searchMore)}>
|
{!searchMore ? '展开' : '折叠'}
|
<DownOutlined className={`tableSearch-searchMore-icon ${searchMore && 'tableSearch-searchMore-iconRotate'}`} />
|
</span>
|
)}
|
</Col>
|
</Row>
|
</Form>
|
);
|
};
|
|
TableSearch.propTypes = {
|
itemData: PropTypes.array,
|
labelLength: PropTypes.number,
|
rowNum: PropTypes.number,
|
handleReset: PropTypes.func,
|
handleSearch: PropTypes.func,
|
};
|
|
export default TableSearch;
|
