/*
|
* @Company: hugeInfo
|
* @Author: ldh
|
* @Date: 2022-03-16 11:58:56
|
* @LastEditTime: 2022-04-02 09:19:22
|
* @LastEditors: ldh
|
* @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 moment from 'moment';
|
|
const { RangePicker } = DatePicker;
|
|
const { Option } = Select;
|
|
/**
|
* form, // form组件
|
* itemData, // 搜索的数据数组
|
* labelLength, // form的label标签字符串的长度
|
* rowNum, // 一行放多少个搜索item
|
* handleRest, // 重置
|
* handleSearch, // 搜索
|
*/
|
const TableSearch = ({ form, itemData, labelLength = 7, rowNum = 3, handleReset, handleSearch }) => {
|
const [searchMore, setSearchMore] = useState(false);
|
|
let span = 24 / rowNum;
|
|
let display = false;
|
|
// 是否需要展开 or 收起
|
let lineNum = rowNum * 2;
|
if (itemData.length > lineNum) {
|
display = true;
|
}
|
|
return (
|
<Form form={form} labelAlign="right">
|
<Row gutter={[24, 16]}>
|
{itemData.map((x, t) => {
|
let placeholder = x.type === 'Select' || x.type === 'TreeSelect' ? '全部' : '请输入';
|
let dom = null;
|
let rules = {};
|
if (x.type === 'Input') {
|
dom = <Input placeholder={placeholder} allowClear onPressEnter={handleSearch} {...x} />;
|
rules = { max: x.max || 32 };
|
}
|
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={{
|
'今日': [moment(), moment()],
|
'本月': [moment().startOf('month'), moment().endOf('month')],
|
}}
|
allowClear
|
{...x}
|
/>
|
);
|
}
|
if (x.type === 'TreeSelect') {
|
dom = (
|
<TreeSelect
|
showSearch
|
placeholder={placeholder}
|
dropdownStyle={{ maxHeight: 400, 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: `${14 * labelLength}px` }}>{x.label}</div>}>
|
{dom}
|
</Form.Item>
|
</Col>
|
);
|
})}
|
</Row>
|
<Row style={{ marginTop: '16px' }}>
|
<Col span={24} className="searchButton">
|
<Button className="buttonMargin" onClick={handleReset}>
|
重置
|
</Button>
|
<Button type="primary" htmlType="submit" onClick={handleSearch}>
|
搜索
|
</Button>
|
{display && (
|
<span className="searchMore" onClick={() => setSearchMore(!searchMore)}>
|
{!searchMore ? '展开' : '收起'} <DownOutlined className={`searchMore-icon ${searchMore && '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;
|
