• 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;
  • 相关阅读:
    记一次线上OOM问题分析与解决
    理解JAVA内存模型
    SpringBoot+Shiro+JPA+LayUI的后台管理系统
    学会使用BeanUtils,提高你的开发效率
    一篇文章教你快速上手接口管理工具swagger
    js 多维数组转一维数组(根据字段展示)
    记一次阿里云服务器中部署egg遇到的问题 (docker vim)
    react 封装tab组件
    js 添加 好玩的注释
    js 下载文件流
  • 原文地址:https://www.cnblogs.com/zxm1993/p/11423866.html
Copyright © 2020-2023  润新知