表单搜索公用组件

Mr Ke

2020-04-06 9d70ed845a45c0cafb8ff39cb8a821613faeade4

表单搜索公用组件

 src/components/common/HotListTableView/index.jsx

@@ -30,7 +30,7 @@
        page: 1,
        size: 10,
      },
      loading: false
      loading: true
    };
  }

@@ -116,6 +116,7 @@

  render() {
    let { keywordlist, formData, loading } = this.state;

    let tableParams = {
      url: `api/news/newslist`,
      formData,
@@ -124,15 +125,10 @@
      extraFromData: {
      },
      setFormData: this.setFormData
    }
    };
    return (
      <div className="hot-list-table-view-main">
        {
          loading ? <div style={{ padding: 10 }}>
            <Skeleton />
          </div>
            :
            <React.Fragment>
        <Skeleton loading={loading}>
              <BreadcrumbView data={[{ name: '行业热点知识库' }]} />
              <div className="hot-list-table-view-main-content">
                <Tabs defaultActiveKey={'全部'} onChange={this.tabChange}>
@@ -144,11 +140,15 @@
                    ))
                  }
                </Tabs>
            {/* 避免请求两遍 */}
            {
              !loading &&
                <TableView {...tableParams} />
              </div>
            </React.Fragment>

        }
      </div>
        </Skeleton>
      </div>
    )
  }
}

 src/components/common/SearchFormView/index.jsx

New file
@@ -0,0 +1,236 @@
/* eslint-disable */
/**柯礼钦
 * 4/3/2020, 3:00:49 PM
 * doc comment for the file goes here
 */

/** 表单搜索组件 */
import React, { ReactNode, ReactEventHandler, Component } from 'react';
import { Row, Col, Form, Input, Button, Select, DatePicker, Divider } from 'antd';
import moment from 'moment';

const { RangePicker } = DatePicker;
import './index.scss';


export default class SearchFormView extends Component {
    constructor(props) {
        super(props);
        this.config = {
        };
        this.state = {
        };
    }

    componentWillMount() { }

    componentDidMount() { }

    onClick = type => {
        const { pathName } = this.props;
        let data;
        switch (type) {
            case 'search':
                data = { ...this.props.formData, __key: Date.now() };
                this.props.setFormData(data);
                return;
            case 'reset':
                data = { __key: Date.now(), page: 1, size: 10 };
                this.props.setFormData(data);
                return;
            case 'build':
                return;
        }
    };

    //各类型表单元素触发事件
    // input输入类型
    handleInput = ({ target: { name, value } }) => {
        this.props.setFormData({ ...this.props.formData, [name]: value });
    };

    // select下拉选择
    handleSelectChange = name => {
        return value => {
            this.handleInput({ target: { name, value } });
        };
    };

    // 时间段区域选择
    rangePickerChange = (name, key, m, d) => {
        if (m.length > 0) {
            this.props.setFormData({
                ...this.props.formData,
                [name]: d.join(','),
                [JSON.parse(key)[0]]: d[0],
                [JSON.parse(key)[1]]: d[1],
            });
        } else {
            this.props.setFormData({
                ...this.props.formData,
                [name]: undefined,
                [JSON.parse(key)[0]]: '',
                [JSON.parse(key)[1]]: '',
            });
        }
    };

    // 时间选择器
    datePickerChange = (name, v) => {
        this.props.setFormData({
            ...this.props.formData,
            [name]: v,
        });
    };


    render() {
        const { formData = {}, data = [], children } = this.props;

        return (
            <div className="search-form-view-main">
                <div className="search-form-view-main-margin-bottom">
                    <Row type="flex" align="middle" gutter={20}>

                        {data.length > 0 &&
                            data.map((item, idx) => (
                                <React.Fragment key={idx}>
                                    {(() => {
                                        switch (item.type) {
                                            case 'select':
                                                return (
                                                    <Col span={4}>
                                                        <Form.Item label={item.label}>
                                                            <Select
                                                                size="small"
                                                                style={{ width: '100%' }}
                                                                placeholder={item.name}
                                                                value={formData[item.key]}
                                                                allowClear
                                                                onChange={this.handleSelectChange(item.key)}>
                                                                {item.list &&
                                                                    item.list.map(item => (
                                                                        <Select.Option
                                                                            value={item.id}
                                                                            key={item.id}>
                                                                            {item.name}
                                                                        </Select.Option>
                                                                    ))}
                                                            </Select>
                                                        </Form.Item>
                                                    </Col>
                                                );
                                            case 'input':
                                                return (
                                                    <Col span={4}>
                                                        <Form.Item label={item.label}>
                                                            <Input
                                                                size="small"
                                                                placeholder={item.name}
                                                                name={item.key}
                                                                value={formData[item.key]}
                                                                onChange={this.handleInput}
                                                            />
                                                        </Form.Item>
                                                    </Col>
                                                );
                                            case 'datePicker':
                                                return (
                                                    <Col span={4}>
                                                        <Form.Item label={item.label}>
                                                            <DatePicker
                                                                size="small"
                                                                style={{ width: '100%' }}
                                                                placeholder={item.name}
                                                                onChange={(date, dateString) => {
                                                                    this.datePickerChange(item.key, dateString);
                                                                }}
                                                                value={formData[item.key] ? moment(formData[item.key], 'YYYY-MM-DD') : undefined}
                                                            />
                                                        </Form.Item>
                                                    </Col>
                                                );
                                            case 'rangePicker':
                                                return (
                                                    <Col span={6}>
                                                        <Form.Item label={item.label}>
                                                            <RangePicker
                                                                size="small"
                                                                ranges={{
                                                                    Today: [moment(), moment()],
                                                                    'This Month': [
                                                                        moment().startOf('month'),
                                                                        moment().endOf('month'),
                                                                    ],
                                                                }}
                                                                value={
                                                                    item.keylistName &&
                                                                        formData[item.keylistName] &&
                                                                        typeof formData[item.keylistName] == 'string'
                                                                        ? formData[item.keylistName]
                                                                            .split(',')
                                                                            .map(item => moment(item, 'YYYY-MM-DD'))
                                                                        : []
                                                                }
                                                                onChange={(date, dateString) => {
                                                                    this.rangePickerChange(
                                                                        item.keylistName,
                                                                        item.key,
                                                                        date,
                                                                        dateString
                                                                    );
                                                                }}
                                                                placeholder={JSON.parse(item.name)}
                                                            />
                                                        </Form.Item>
                                                    </Col>
                                                );
                                            case 'br':
                                                return (
                                                    <Col span={24} style={{ marginBottom: '10px' }} />
                                                );
                                            default:
                                                return null;
                                        }
                                    })()}
                                </React.Fragment>
                            ))}

                        <Col>
                            <Row type="flex" gutter={20} align="middle" align="middle">
                                <Col>
                                    <Button
                                        size="small"
                                        type="primary"
                                        onClick={() => {
                                            this.onClick('search');
                                        }}>
                                        查询
                                </Button>
                                </Col>
                                <Col>
                                    <Button
                                        size="small"
                                        onClick={() => {
                                            this.onClick('reset');
                                        }}>
                                        重置
                                </Button>
                                </Col>
                                {
                                    children &&
                                    <Col>
                                        {children}
                                    </Col>
                                }
                            </Row>
                        </Col>
                    </Row>

                </div>

                <Divider />
            </div>
        )
    }
}

 src/components/common/SearchFormView/index.scss

New file
@@ -0,0 +1,22 @@
/* eslint-disable */
/**柯礼钦
 * 4/3/2020, 3:00:49 PM
 * doc comment for the file goes here
 */

/** Happy Coding */
.search-form-view {
  &-main {
    &-margin-bottom{
    margin-bottom: 18px;

    }
    .ant-form-item {
      margin-bottom: 0 !important;
      display: flex;
    }
    .ant-form-item-control-wrapper {
      flex: 1;
    }
  }
}

 src/components/page/SystemPage/index.jsx

@@ -137,7 +137,7 @@
      { title: '通知标题', className: "txt-c", dataIndex: 'documentItle;' },
      { title: '通知内容', className: "txt-c", dataIndex: 'documentContent' },
      // { title: '文档类型', className: "txt-c", dataIndex: 'documentType', render: (text, record) => text == "DT00001" ? "规章制度" : text == "DT00002" ? "通知公告" : text },
      { title: '接受情况', className: "txt-c", dataIndex: 'groupType', render: (text, record) => <span>{readNumber || 0}/{noticeNumber || 0}</span> },
      { title: '接受情况', className: "txt-c", dataIndex: 'groupType', render: (text, record) => <span>{record.readNumber || 0}/{record.noticeNumber || 0}</span> },
      { title: '通知时间', className: "txt-c", dataIndex: 'createTime', render: (text, record) => text !== "" && text != null ? moment(text).format("YYYY-MM-DD HH:mm") : "" },
      // {
      //   title: '操作', className: "txt-c", key: 'operation', render: (text, record) => {

 src/index.js

@@ -46,15 +46,14 @@
              
              {/* 全部通知 */}
              <Route path="/index/workbench/announcement" component={Announcement} />
              <Route path="/index/rules" component={System} />
              
              {/* 首页 */}
              <Route path="/index" component={Workbench} />
              <Route path="/index/system" component={System} />
              
              <Route path="/login" component={Login} />

              <Route path="/" component={Index} />
              {/* 路由的页面重定向 */}
              <Redirect to="/" component={Index} />
              <Redirect to="/" component={Workbench} />
            </Switch>
          </Content>
        </Layout>