From 52aa9f64e5dea1c0e30bc1094fa580c3851d8f9d Mon Sep 17 00:00:00 2001
From: zhangyongtian <1181606322@qq.com>
Date: Sat, 14 Sep 2024 18:02:38 +0800
Subject: [PATCH] Merge branch 'master' of http://120.79.193.119:9090/r/gzzfw/frontEnd/gzDyh
---
gz-customerSystem/src/components/NewTableSearch/index.jsx | 145 ++++++++++++++++++++++++++----------------------
1 files changed, 78 insertions(+), 67 deletions(-)
diff --git a/gz-customerSystem/src/components/NewTableSearch/index.jsx b/gz-customerSystem/src/components/NewTableSearch/index.jsx
index 5964455..5e8a818 100644
--- a/gz-customerSystem/src/components/NewTableSearch/index.jsx
+++ b/gz-customerSystem/src/components/NewTableSearch/index.jsx
@@ -1,7 +1,7 @@
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 { DownOutlined, SearchOutlined } from '@ant-design/icons';
import * as $$ from '../../utils/utility';
import './index.less';
@@ -16,8 +16,9 @@
* rowNum, // 一行放多少个搜索item
* handleRest, // 重置
* handleSearch, // 搜索
+ * exportButton //导出按钮
*/
-const NewTableSearch = ({ form, itemData, labelLength = 5, rowNum = 3, handleReset, handleSearch }) => {
+const NewTableSearch = ({ form, itemData, labelLength = 5, rowNum = 3, handleReset, handleSearch, exportButton }) => {
const [searchMore, setSearchMore] = useState(false);
const span = 24 / rowNum;
@@ -59,77 +60,86 @@
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={8} 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>
- <Col span={8}></Col>
- <Col span={8}></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 key={y.value}>{y.label}</Option>
+ ))}
+ </Select>
);
- })}
- </Row>
+ }
+ 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 (
+ <Row className='tableSearch-searchMore-row' gutter={[24, 16]} style={display && { display: searchMore ? 'block' : t < lineNum ? 'block' : 'none' }}>
+ <Col span={x.span || 8} 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>
+ // <div>
+ // <Col span={8} 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>
+ // <Col span={8}></Col>
+ // <Col span={8}></Col>
+ // </div>
+ );
+ })}
<Row style={{ marginTop: '16px' }}>
- <Col span={24} style={{ textAlign: 'right' }}>
- <Button className="public-buttonMargin" onClick={handleReset}>
- 重置
- </Button>
- <Button type="primary" htmlType="submit" onClick={handleSearch}>
+ <Col span={24} style={{ textAlign: 'left' }}>
+ <Button className="public-buttonMargin" type="primary" htmlType="submit" icon={<SearchOutlined />} onClick={handleSearch}>
查询
+ </Button>
+ <Button className="public-buttonMargin" type="primary" ghost htmlType="submit" onClick={exportButton}>
+ 导出查询结果
+ </Button>
+ <Button onClick={handleReset}>
+ 重置条件
</Button>
{display && (
<span className="tableSearch-searchMore" onClick={() => setSearchMore(!searchMore)}>
- {!searchMore ? '展开' : '折叠'}
+ {!searchMore ? '展开更多' : '收起更多'}
<DownOutlined className={`tableSearch-searchMore-icon ${searchMore && 'tableSearch-searchMore-iconRotate'}`} />
</span>
)}
@@ -145,6 +155,7 @@
rowNum: PropTypes.number,
handleReset: PropTypes.func,
handleSearch: PropTypes.func,
+ exportButton: PropTypes.func,
};
export default NewTableSearch;
--
Gitblit v1.8.0