zoukankan      html  css  js  c++  java
  • getFieldsValue,getFieldValue,validateFields,resetFields,getFieldDecorator的用法;

    import React from 'react';
    import { Card, Row, Col, Form, DatePicker, Select, Button, Checkbox, Table, Switch, message, Pagination, Input } from 'antd';
    const { Option } = Select;
    const FormItem = Form.Item;
    const formItemLayout = { // label 和input宽度
    labelCol: { span:7 },
    wrapperCol: { span: 17 },
    };
    const formItemSwitch = { // label 和input宽度
    labelCol: { span:11 },
    wrapperCol: { span: 13 },
    };

    const AccordingConsumption = Form.create()(
    class extends React.Component {
    constructor() {
    super();
    this.state = {
    userInfo: JSON.parse(window.sessionStorage.userData),
    data: [],
    queryCondition: {},
    SelectData: {},
    inOpLocDr:'',
    vendor: '',
    WaListData: [], //库存单数据
    pageSize: 10,
    page: 1,
    total:0,
    };
    }

    //清空表格内容
    handleReset = () => {
    this.props.form.resetFields();
    };

    searchInformation=()=>{
    this.setState({page: 1},()=>{
    this.getConsumptionList()
    })
    };

    // 获取库存单列表数据
    getConsumptionList=()=>{
    let data = this.props.form.getFieldsValue(); //获取所以输入框的值
    console.log('data',data);
    let useDays = this.props.form.getFieldValue('useDays'); //获取单个输入框的值
                console.log('useDays',useDays);
                this.props.form.validateFields((error, value)=>{  //获取所以输入框的值(value),并且获取到输入框是否报错(error)。
    let obj = JSON.parse(JSON.stringify(value));
    if(error == null){
    console.log(obj)
    }
    })

    };

    render() {
    const { getFieldDecorator } = this.props.form;
    //库存科室列表
    let inOpLocDrSelect = [];
    this.state.SelectData.loc && this.state.SelectData.loc.map((item, i) => {
    inOpLocDrSelect.push(<Option value={item.id} key={i}>{item.descripts}</Option>)
    });

    return (
    <div className="accordingConsumption">
    <Row>
    <Card
    size="small"
    title="库存报警"
    >
    <Col span={19}>
    <Form>
    <Row >
    <Col span={5}>
    <FormItem {...formItemLayout} label="科室">
    {getFieldDecorator('locDesc',{
    initialValue: this.state.userInfo.locID ? this.state.userInfo.locID : undefined,
    rules:[{ required : true, message: '科室不能为空'}]
    })(
    <Select allowClear>
    {inOpLocDrSelect}
    </Select>
    ) }
    </FormItem>
    </Col>
    <Col span={5}>
    <FormItem {...formItemLayout} label="开始日期">
    {getFieldDecorator('StartDate',{
    initialValue: undefined,
    })(
    <DatePicker format="YYYY-MM-DD" />
    ) }
    </FormItem>
    </Col>
    <Col span={5}>
    <FormItem {...formItemLayout} label="结束日期">
    {getFieldDecorator('EndData',{
    initialValue: undefined,
    })(
    <DatePicker format="YYYY-MM-DD" />
    ) }
    </FormItem>
    </Col>
    <Col span={4}>
    <FormItem {...formItemSwitch} label="用药天数">
    {getFieldDecorator('useDays',{
    initialValue: undefined,
    })(
    <Input />
    ) }
    </FormItem>
    </Col>
    <Col span={5}>
    <FormItem {...formItemSwitch} label="包含不可用品种">
    {getFieldDecorator('incNotFlag',{
    valuePropName: 'checked',
    initialValue: false,
    rules:[{required: false}]
    })(
    <Switch checkedChildren="是" unCheckedChildren="否" />
    ) }
    </FormItem>
    </Col>
    </Row>
    </Form>
    </Col>
    <Col span={5}>
    <Row style={{marginBottom: '18px'}} className="button">
    <Button style={{marginRight: '30px'}} onClick={this.searchInformation}>查询</Button>
    <Button type="primary" onClick={this.handleReset}>清屏</Button>
    </Row>
    </Col>

    </Card>
    </Row>
    </div>
    )
    }
    }
    );
    export default AccordingConsumption;
  • 相关阅读:
    Object.keys
    数组内容深拷贝的应用
    CSS如何让页脚固定在页面底部
    vue eslint开发 关掉 tab错误提示
    input框,需要隐式显示的时候,不让它自动填充的办法
    关于BFC
    File协议与HTTP协议 以及区别
    关于缓存
    深拷贝浅拷贝 遇到了bug
    聚餐学习
  • 原文地址:https://www.cnblogs.com/zxm1993/p/11423866.html
Copyright © 2011-2022 走看看