提交

liuwh

2024-09-17 74960e7d4f3042fb9e0ec54af823a360d4aa2bbe

 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,7 +60,7 @@

  return (
    <Form form={form} labelAlign="right" className="tableSearch">
      <Row gutter={[24, 16]}>
      <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;
@@ -106,30 +107,50 @@
              />
            );
          }
          if (x.type === 'null') {
            dom = (
              <Col span={x.span || 8}></Col>
            );
          }
          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>
            </>
            <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>
            // <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: '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>
          {
            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)}>
              {!searchMore ? '展开' : '折叠'}
              {!searchMore ? '展开更多' : '收起更多'}
              <DownOutlined className={`tableSearch-searchMore-icon ${searchMore && 'tableSearch-searchMore-iconRotate'}`} />
            </span>
          )}
@@ -145,6 +166,7 @@
  rowNum: PropTypes.number,
  handleReset: PropTypes.func,
  handleSearch: PropTypes.func,
  exportButton: PropTypes.func,
};

export default NewTableSearch;