import React, { useState } from 'react';
|
import PropTypes from 'prop-types';
|
import { Form, Row, Col } from 'antd';
|
import { Button, Select, Input, DatePicker, Cascader, TreeSelect } from '@arco-design/web-react';
|
import { DownOutlined, SearchOutlined } 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, // 搜索
|
* exportButton, //导出按钮
|
* searchDom, //查询的dom
|
* initialValues, //默认值
|
*/
|
const NewTableSearch = ({ form, itemData, labelLength = 5, headTitle, rowNum = 3, handleReset, handleSearch, exportButtonShow = true, exportButton, searchDom, initialValues = {} }) => {
|
const [searchMore, setSearchMore] = useState(false);
|
|
const span = 24 / rowNum;
|
|
let display = false;
|
|
// 是否需要展开 or 收起
|
const lineNum = rowNum * 3;
|
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" initialValues={initialValues}>
|
<Row className='tableSearch-searchMore-row' gutter={[24, 16]} >
|
{headTitle && <Col span={24}><div className="tableView-header-title">{headTitle}</div></Col>}
|
{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 value={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 = (
|
<Input.Search
|
showSearch
|
placeholder={placeholder}
|
dropdownStyle={{ maxHeight: 500, overflow: 'auto' }}
|
treeData={x.treedata}
|
treeDefaultExpandAll
|
allowClear
|
filterTreeNode={(inputValue, treeNode) => (treeNode.label.indexOf(inputValue) !== -1 ? true : false)}
|
{...x}
|
/>
|
);
|
}
|
if (x.type === 'searchButton') {
|
dom = (
|
<Input.Search placeholder={placeholder} allowClear {...x} />
|
);
|
rules = { max: x.max || 32, message: '搜索内容过长' };
|
}
|
if (x.type === 'Cascader') {
|
dom = (
|
<Cascader
|
placeholder={placeholder}
|
options={x.treedata}
|
allowClear={x.allowClear || true}
|
changeOnSelect={x.changeSelect || false}
|
{...x}
|
/>
|
);
|
rules = { type: 'array' };
|
}
|
if (x.type === 'TreeSelect1') {
|
const loop = (tree) => {
|
return tree.map((item) => {
|
if (item.children && item.children.length) {
|
item.children = loop(item.children);
|
}
|
return {
|
...item,
|
title: item.label,
|
key: item.value,
|
};
|
});
|
};
|
const newTree = loop(x.treedata);
|
dom = (
|
<TreeSelect
|
showSearch
|
style={{
|
width: '100%',
|
}}
|
dropdownStyle={{
|
maxHeight: 400,
|
overflow: 'auto',
|
}}
|
allowClear
|
treeDefaultExpandAll
|
treeData={newTree}
|
placeholder={placeholder}
|
filterTreeNode={(inputText, node) => {
|
return node.props.title.toLowerCase().indexOf(inputText.toLowerCase()) > -1;
|
}}
|
{...x}
|
/>
|
);
|
}
|
if (x.type === 'null') {
|
dom = (
|
<Col span={x.span || 8}></Col>
|
);
|
}
|
return (
|
<Col span={x.span || 8} style={display && { display: searchMore ? 'block' : t < lineNum ? 'block' : 'none' }} key={t + 1}>
|
{
|
x.type === 'null' ? <>{dom}</> :
|
<Form.Item name={x.name} rules={[rules]} label={<div style={{ flex: '1', ...x.labelStyle }}>{x.label}</div>}>
|
{/* <Form.Item name={x.name} rules={[rules]} label={<div style={{ width: `${fontSize * labelLength}px` }}>{x.label}</div>}> */}
|
{dom}
|
</Form.Item>
|
}
|
</Col>
|
);
|
})}
|
</Row>
|
{display && (
|
<span className="tableSearch-searchMore" onClick={() => setSearchMore(!searchMore)}>
|
{!searchMore ? '展开更多' : '收起更多'}
|
<DownOutlined className={`tableSearch-searchMore-icon ${searchMore && 'tableSearch-searchMore-iconRotate'}`} />
|
</span>
|
)}
|
<div className='NewTableSearch-border'></div>
|
<Row style={{ marginTop: '16px' }}>
|
<Col span={24} style={{ textAlign: 'left' }}>
|
<Button className="public-buttonMargin" type="primary" htmlType="submit" onClick={handleSearch}>
|
{searchDom ? searchDom : <><SearchOutlined /> 查询</>}
|
</Button>
|
{
|
exportButtonShow &&
|
<Button className="public-buttonMargin" type="outline" htmlType="submit" onClick={exportButton}>
|
导出查询结果
|
</Button>
|
}
|
<Button onClick={handleReset}>
|
重置条件
|
</Button>
|
|
</Col>
|
</Row>
|
</Form>
|
);
|
};
|
|
NewTableSearch.propTypes = {
|
itemData: PropTypes.array,
|
labelLength: PropTypes.number,
|
rowNum: PropTypes.number,
|
handleReset: PropTypes.func,
|
handleSearch: PropTypes.func,
|
exportButton: PropTypes.func,
|
};
|
|
export default NewTableSearch;
|
