提升菜单栏体验，升级公共查询表单组件

Mr Ke

2020-04-29 c0c820559b46f3a5ede6fbd7f66e77d09981829f

 src/components/common/SearchFormView/index.jsx

@@ -6,13 +6,37 @@

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

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


// data参数：数据模板
// [
//     { type: 'input', name: '姓名', label: '姓名', key: 'name' },  //inpu类型
//     {
//         type: 'select',
//         name: '所属部门',
//         label: '所属部门',
//         key: 'deptId',
//         desc: 'deptName',
//         list: [{ name: '1', value: '选项1' }, { name: '2', value: '选项2' }],
//     }, //select 类型
//     {
//         type: 'rangePicker',
//         label: '时间范围',
//         name: JSON.stringify(['开始时间', '结束时间']),
//         key: JSON.stringify(['startTime', 'endTime']),
//         keylistName: 'rangeTimelist',
//     },  //时间范围选择器
//     {
//         type: 'datePicker',
//         label: '指定时间',
//         name: '指定日期',
//         key: 'date'
//     } //时间选择器
// ]
export default class SearchFormView extends Component {
    constructor(props) {
        super(props);
@@ -27,7 +51,6 @@
    componentDidMount() { }

    onClick = type => {
        const { pathName } = this.props;
        let data;
        switch (type) {
            case 'search':
@@ -83,23 +106,21 @@
        });
    };


    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}>
                    <Card bordered={false}>

                        {data.length > 0 &&
                            data.map((item, idx) => (
                                <React.Fragment key={idx}>
                                <Card.Grid key={idx} style={{ width: '20%' }} hoverable={false} >
                                    {(() => {
                                        switch (item.type) {
                                            case 'select':
                                                return (
                                                    <Col span={4}>
                                                        <Form.Item label={item.label}>
                                                            <Select
                                                                size="small"
@@ -118,11 +139,9 @@
                                                                    ))}
                                                            </Select>
                                                        </Form.Item>
                                                    </Col>
                                                );
                                            case 'input':
                                                return (
                                                    <Col span={4}>
                                                        <Form.Item label={item.label}>
                                                            <Input
                                                                size="small"
@@ -132,11 +151,9 @@
                                                                onChange={this.handleInput}
                                                            />
                                                        </Form.Item>
                                                    </Col>
                                                );
                                            case 'datePicker':
                                                return (
                                                    <Col span={4}>
                                                        <Form.Item label={item.label}>
                                                            <DatePicker
                                                                size="small"
@@ -148,13 +165,12 @@
                                                                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
                                                            style={{ width: '100%'}}
                                                                size="small"
                                                                ranges={{
                                                                    Today: [moment(), moment()],
@@ -183,21 +199,19 @@
                                                                placeholder={JSON.parse(item.name)}
                                                            />
                                                        </Form.Item>
                                                    </Col>
                                                );
                                            case 'br':
                                                return (
                                                    <Col span={24} style={{ marginBottom: '10px' }} />
                                                );
                                            // case 'br':
                                            //     return (
                                            //         <Col span={24} style={{ marginBottom: '10px' }} />
                                            //     );
                                            default:
                                                return null;
                                        }
                                    })()}
                                </React.Fragment>
                                </Card.Grid>
                            ))}

                        <Col>
                            <Row type="flex" gutter={20} align="middle" align="middle">
                        <Card.Grid style={{ width: '20%' }}>
                            <Row type="flex" gutter={20} align="middle" align="middle" style={{ height: 40 }}>
                                <Col>
                                    <Button
                                        size="small"
@@ -224,11 +238,9 @@
                                    </Col>
                                }
                            </Row>
                        </Col>
                    </Row>

                        </Card.Grid>
                    </Card>
                </div>

                <Divider />
            </div>
        )