文本回填

Mr Ke

2020-06-24 cb0a06de99bd629c2021e3d9b32fe8eae8c54879

 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;
const { RangePicker, MonthPicker } = 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,124 +106,141 @@
        });
    };

    //月份选择器
    monthPickerChange = (name, m, d) => {
        this.props.setFormData({
            ...this.props.formData,
            [name]: d
        })
    }

    render() {
        const { formData = {}, data = [], children } = this.props;
        const { formData = {}, data = [], children, width = "25%", showReset = true } = this.props;
        let size = 'default';

        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 }} hoverable={false} >
                                    {(() => {
                                        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>
                                                    <Form.Item label={item.label}>
                                                        <Select
                                                            size={size}
                                                            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.value}
                                                                        key={item.value}>
                                                                        {item.name}
                                                                    </Select.Option>
                                                                ))}
                                                        </Select>
                                                    </Form.Item>
                                                );
                                            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>
                                                    <Form.Item label={item.label}>
                                                        <Input
                                                            size={size}
                                                            placeholder={item.name}
                                                            name={item.key}
                                                            value={formData[item.key]}
                                                            onChange={this.handleInput}
                                                        />
                                                    </Form.Item>
                                                );
                                            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>
                                                    <Form.Item label={item.label}>
                                                        <DatePicker
                                                            size={size}
                                                            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>
                                                );
                                            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>
                                                    <Form.Item label={item.label}>
                                                        <RangePicker
                                                            style={{ width: '100%' }}
                                                            size={size}
                                                            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>
                                                );
                                            case 'br':
                                            case 'monthPicker':
                                                return (
                                                    <Col span={24} style={{ marginBottom: '10px' }} />
                                                );
                                                    <Form.Item label={item.label}>
                                                        <MonthPicker
                                                            style={{ width: '100%' }}
                                                            size={size}
                                                            placeholder={item.name}
                                                            onChange={(date, dateString) => {
                                                                console.log(date, dateString);
                                                                this.monthPickerChange(item.key, date, dateString);
                                                            }}
                                                            disabledDate={item.disabledDate || false}
                                                            value={formData[item.key] ? moment(formData[item.key], 'YYYY-MM') : undefined}
                                                        />
                                                    </Form.Item>

                                                )
                                            // 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 }}>
                            <Row type="flex" gutter={20} align="middle" align="middle" style={{ height: 40 }}>
                                <Col>
                                    <Button
                                        size="small"
                                        size={size}
                                        type="primary"
                                        onClick={() => {
                                            this.onClick('search');
@@ -208,15 +248,18 @@
                                        查询
                                </Button>
                                </Col>
                                <Col>
                                    <Button
                                        size="small"
                                        onClick={() => {
                                            this.onClick('reset');
                                        }}>
                                        重置
                                </Button>
                                </Col>
                                {
                                    showReset ?
                                        <Col>
                                            <Button
                                                size={size}
                                                onClick={() => {
                                                    this.onClick('reset');
                                                }}>
                                                重置
                                            </Button>
                                        </Col> : null
                                }
                                {
                                    children &&
                                    <Col>
@@ -224,11 +267,9 @@
                                    </Col>
                                }
                            </Row>
                        </Col>
                    </Row>

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

                <Divider />
            </div>
        )