mrcio-ui/lib/grid/help-grid.txt

1.安装
npm install mrcio-ui --save

2.引用
import { GridField, Tr, Td } from 'mrcio-ui'

3.grid API 属性
GridField
属性名（name）	类型（type）	必要性（Required）	默认值（default）	描述（description）
tHeadData	    Array    	true                无                	grid表格的数据结构，格式：[{title: "申请盖章文件名称", width: "20rem"}]
dataType	    String	    true	            "grid_"	            表单dataType的前缀，默认："grid_"
width   	    String      true	            0	                grid的宽度

Tr
属性名（name）	类型（type）	必要性（Required）	默认值（default）	描述（description）
getTimeValue                true                                    表单的标识，必须：getTimeValue={item}

Td
属性名（name）	类型（type）	必要性（Required）	默认值（default）	描述（description）
style           Object      false

4. 使用方式




import React, {Component} from 'react'
import {connect} from 'react-redux'
import {bindActionCreators} from 'redux'
import {
    Button,

    GridField,
    Tr,
    Td,
    actionGrid,

    InputField,
    TextareaField,
    SelectField,
    actionForm
} from 'mrcio-ui'


let tHeadData = [
    {
        title: "申请盖章文件名称",
        width: "20rem"
    },
    {
        title: "文件内容(概述)",
        width: "25rem"
    },
    {
        title: "受文单位",
        width: "20rem"
    },
    {
        title: "份数",
        width: "10rem"
    },
    {
        title: "盖章方式",
        width: "20rem"
    },
];

class TestGridField extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            dataSource: [
                {text: "玫瑰花", value: "meiguihua"},
                {text: "蝴蝶兰", value: "hudeilan"},
                {text: "野菊", value: "yeju"},
                {text: "茉莉花", value: "molihua"},
            ],
        };
    };


    submitFn = () => {
        let _this = this;

        let dataTypes = this.props.gridRows.map((item, index)=>"grid_" + item);
        _this.props.dispatchForm.submitVerify(_this.props.formData, dataTypes);

        //在回调了监听返回值  _this.props.subVerifyRes
        setTimeout(function () {
            console.log("subVerifyRes", _this.props.subVerifyRes);

            let flag = "success";//只是真对
            for (let o in dataTypes) {
                if (_this.props.subVerifyRes[o] != "success") {
                    flag = "fail"
                }
            }

            if (flag == "success") {
                console.log("可提交", _this.props.formData)
            } else {
                console.log('还有必填项未填', _this.props.formData);
            }

        }, 100);
    };

    render() {
        console.log(this.props);
        return (
            <div>
                <GridField
                    tHeadData={tHeadData}
                    dataType="grid_" //默认 grid_
                    width="80rem"
                >
                    {
                        this.props.gridRows.map((item, index)=> {
                            if (!item) {
                                return null
                            }
                            return (
                                <Tr key={index} getTimeValue={item} style={{
                                    padding: "0.2rem 0",
                                }}>
                                    {/*场景 td*/}
                                    <Td  style={{width: tHeadData[0].width}}>
                                        <InputField inputName="failName" //表单唯一的ID，不能重复，必填
                                                    hintText="请输入文件名称" //输入提示语
                                                    required={true} //是否是必填项
                                                    changeValue={this.changeValue} //改变输入框值的时候，触发的方法，有需要就用，无需要就不用
                                                    remarks={[1, 2, 3]} //备注，传送器，传什么进去，传什么出来
                                                    dataType={`grid_${item}`}
                                                    valueWidth="21rem"
                                        />
                                    </Td>
                                    <Td style={{width: tHeadData[1].width}}>
                                        <InputField inputName="remarks" //表单唯一的ID，不能重复，必填
                                                    hintText="请输入文件内容" //输入提示语
                                                    required={true} //是否是必填项
                                                    changeValue={this.changeValue} //改变输入框值的时候，触发的方法，有需要就用，无需要就不用
                                                    remarks={[1, 2, 3]} //备注，传送器，传什么进去，传什么出来
                                                    dataType={`grid_${item}`}
                                                    valueWidth="16rem"
                                        />
                                    </Td>
                                    <Td style={{width: tHeadData[2].width}}>
                                        <InputField inputName="unit" //表单唯一的ID，不能重复，必填
                                                    hintText="请输入受文单位" //输入提示语
                                                    required={true} //是否是必填项
                                                    changeValue={this.changeValue} //改变输入框值的时候，触发的方法，有需要就用，无需要就不用
                                                    remarks={[1, 2, 3]} //备注，传送器，传什么进去，传什么出来
                                                    dataType={`grid_${item}`}
                                                    valueWidth="16rem"
                                        />
                                    </Td>
                                    <Td style={{width: tHeadData[3].width}}>
                                        <InputField inputName="number" //表单唯一的ID，不能重复，必填
                                                    hintText="请输入份数" //输入提示语
                                                    required={true} //是否是必填项
                                                    changeValue={this.changeValue} //改变输入框值的时候，触发的方法，有需要就用，无需要就不用
                                                    remarks={[1, 2, 3]} //备注，传送器，传什么进去，传什么出来
                                                    dataType={`grid_${item}`}
                                                    valueWidth="8rem"
                                        />
                                    </Td>
                                    <Td style={{width: tHeadData[4].width}}>
                                        <SelectField inputName="way" //表单唯一的ID，不能重复，必填
                                                     hintText="请选择盖章方式" //输入提示语
                                                     required={true} //是否是必填项
                                                     changeValue={this.changeValue} //改变输入框值的时候，触发的方法，有需要就用，无需要就不用
                                                     remarks={[1, 2, 3]} //备注，传送器，传什么进去，传什么出来
                                                     dataSource={this.state.dataSource}//选项值 格式必须为 [{text:"女",value:"F"},{text:"男",value:"M"}]
                                                     dataType={`grid_${item}`}
                                                     valueWidth="16rem"
                                        />
                                    </Td>
                                </Tr>)
                        })
                    }

                </GridField>

                <Button scenesType="submit" handleBtn={this.submitFn} btnText="确认"/>


            </div>
        )
    }
}


const mapStateToProps = state => ({
    formData: state.formData,
    subVerifyRes: state.subVerifyRes,

    gridRows: state.gridRows,//渲染行数
    selectFlag: state.selectFlag,//是否可见复选框  true false
});

const mapDispatchToProps = dispatch => ({
    dispatchForm: bindActionCreators(actionForm, dispatch),
});

export default connect(mapStateToProps, mapDispatchToProps)(TestGridField);