import React from 'react';
import {Form, Table, Button, Select, Input, DatePicker} from 'antd';
 
const FormItem = Form.Item;
const Option = Select.Option;
const {RangePicker} = DatePicker;//獲取日期選擇控件中的日期范圍控件
 
class UserManage extends React.Component {
  render() {
    const columns = [
      {
        title: '聯(lián)系人',
        dataIndex: 'userName',
        key: 'userName',
      }, {
        title: '手機(jī)號(hào)',
        dataIndex: 'mobile',
        key: 'mobile',
      }, {
        title: '公司名稱',
        dataIndex: 'companyName',
        key: 'companyName',
      }, {
        title: '最近活躍時(shí)間',
        dataIndex: 'lastOnlineTime',
        key: 'lastOnlineTime',
      }, {
        title: '禁言狀態(tài)',
        dataIndex: 'status',
        key: 'status',
      },
    ];
 
    return (
      <div>
        <Form layout="inline" style={{marginBottom: '10px'}}>
          <FormItem label="最近活躍時(shí)間">
            <RangePicker style={{width: '255px'}}/>
          </FormItem>
          <FormItem label="用戶">
            <Input type="text" placeholder="公司名稱、手機(jī)號(hào)" style={{width: '155px'}}/>
          </FormItem>
          <FormItem label="禁言狀態(tài)">
            <Select defaultValue="全部" style={{width: '155px'}}>
              <Option value="全部">全部</Option>
              <Option value="是">是</Option>
              <Option value="否">否</Option>
            </Select>
          </FormItem>
          <Button type="primary" style={{marginTop: '3px', marginRight: '3px'}}>查詢</Button>
          <Button style={{marginTop: '3px'}}>重置</Button>
        </Form>
        <Table
          columns={columns}
        />
      </div>
    )
  }
}
 
export default Form.create()(UserManage)

...
render(){
    const {form} = this.props;
    const {getFieldDecorator} = form;
...
    return (
      <div>
        <Form onSubmit={this.handleQuery} layout="inline" style={{marginBottom: '10px'}}>
          <FormItem label="最近活躍時(shí)間">
            {getFieldDecorator('lastOnlineTime')(<RangePicker style={{width: '255px'}}/>)}
          </FormItem>
          <FormItem label="用戶">
            {getFieldDecorator('userQueryLike')(<Input type="text" placeholder="公司名稱或手機(jī)號(hào)" style={{width: '155px'}}/>)}
          </FormItem>
          <FormItem label="禁言狀態(tài)">
            {getFieldDecorator('status', {initialValue: "全部"})(
            <Select  style={{width: '155px'}}>
              <Option value="0">全部</Option>
              <Option value="1">是</Option>
              <Option value="2">否</Option>
            </Select>)}
          </FormItem>
          <Button type="primary" htmlType="submit" style={{marginTop: '3px', marginRight: '3px'}}>查詢</Button>
          <Button style={{marginTop: '3px'}}>重置</Button>
        </Form>
        <Table
          columns={columns} /*dataSource={(從model取得的數(shù)據(jù))}*/
        />
      </div>
    )
}
...

...
class UserManage extends React.Component {
  //表單查詢
  handleQuery = (e) => {
    if (e) e.preventDefault();
    const {dispatch, form} = this.props;
    form.validateFields((err, fieldsValue) => {
      if (err) return;
      //獲取時(shí)間范圍的值
      const rangeValue = fieldsValue['lastOnlineTime'];
      const userQueryLike = fieldsValue['userQueryLike'];
      //獲取查詢條件
      const values = {
        ...fieldsValue,
        "lastOnlineTime": (rangeValue && rangeValue.length > 1) ?
          ([rangeValue[0].format('YYYY-MM-DD'), rangeValue[1].format('YYYY-MM-DD')]) : null,
        "userQueryLike": userQueryLike ? userQueryLike.trim() : userQueryLike,
      };
      dispatch({
        type: "userManageModel/getUserList",
        payload: {
          values: values,
        }
      });
 
    });
  };
...
}
...