From 3ae864f005e8a874de01c15e14b83196a3f6f11b Mon Sep 17 00:00:00 2001
From: xusd <hugeinfo123>
Date: Wed, 18 Sep 2024 10:21:30 +0800
Subject: [PATCH] 新增一个测试环境
---
gz-customerSystem/src/components/NewTableSearch/index.jsx | 158 +++++++++++++++++++++++++++++-----------------------
1 files changed, 87 insertions(+), 71 deletions(-)
diff --git a/gz-customerSystem/src/components/NewTableSearch/index.jsx b/gz-customerSystem/src/components/NewTableSearch/index.jsx
index c2d55df..e08aa71 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, exportButtonShow = true, exportButton }) => {
const [searchMore, setSearchMore] = useState(false);
const span = 24 / rowNum;
@@ -59,79 +60,93 @@
return (
<Form form={form} labelAlign="right" className="tableSearch">
-
- {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 (
- <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>
+ <Row className='tableSearch-searchMore-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}
+ />
+ );
+ }
+ 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={{ 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>
- );
- })}
+ // <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>
+ <div className='NewTableSearch-border'></div>
<Row style={{ marginTop: '16px' }}>
<Col span={24} style={{ textAlign: 'left' }}>
- <Button className="public-buttonMargin" onClick={handleReset}>
- 重置
- </Button>
- <Button type="primary" htmlType="submit" onClick={handleSearch}>
+ <Button className="public-buttonMargin" type="primary" htmlType="submit" icon={<SearchOutlined />} onClick={handleSearch}>
查询
+ </Button>
+ {
+ exportButtonShow &&
+ <Button className="public-buttonMargin" type="primary" ghost htmlType="submit" onClick={exportButton}>
+ 导出查询结果
+ </Button>
+ }
+ <Button onClick={handleReset}>
+ 重置条件
</Button>
{display && (
<span className="tableSearch-searchMore" onClick={() => setSearchMore(!searchMore)}>
@@ -151,6 +166,7 @@
rowNum: PropTypes.number,
handleReset: PropTypes.func,
handleSearch: PropTypes.func,
+ exportButton: PropTypes.func,
};
export default NewTableSearch;
--
Gitblit v1.8.0