1.安装
npm install micro-ui-y --save

2.引用
import { DragTableField } from 'micro-ui-y'

3.DragTableField API 属性
属性名（name）	类型（type）	必要性（Required）	默认值（default）	描述（description）
checkBox        Boolean     false               false               是否可以选择操作，为true 才可选择，默认false
checkType       String      flase               checkBox            checkBox为true时，控制选择框，单选、复选，至：checkBox radio



4. 方法及redux状态
import { actionGrid } from 'micro-ui-y'
action方法：
addRows(gridType="default")  对内，不外用
delRows(selectItem, gridType = "default") selectItem值格式：[1569568660032] 对内，不外用
copyRows(copyRows, gridType = "default") copyRows值格式：[1569568660032] 对内，不外用

editRows(editRows, gridType = "default")  editRows值格式：[1569568660032]

//设置是否存在复选框
setSelectFlag(flag, gridType = "default") flag为true和false  对内，不外用

setSelectItem(type, getTimeValue, flag, gridType = "default") 对内，不外用
type  getTime_value 点击单个选择   getTime_all  点击全选  getTime_all 删除
getTimeValue 单个getTimeValue   整个 gridRows
flag  none   all

//设置全选
setSelectAll(flag, gridType = "default") 对内，不外用


Tr
actionGrid   setSelectItem
state  selectFlag  selectItem






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 "../npm/index"


const tHeadData = [
    {
        title: "申请盖章文件名称",
        width: "20rem"
    },
    {
        title: "文件内容(概述)",
        width: "25rem"
    },
    {
        title: "受文单位",
        width: "20rem"
    },
    {
        title: "份数",
        width: "10rem"
    },
    {
        title: "盖章方式",
        width: "20rem"
    },
];
const dataSource1 = [
    {text: "玫瑰花", value: "meiguihua"},
    {text: "蝴蝶兰", value: "hudeilan"},
    {text: "野菊", value: "yeju"},
    {text: "茉莉花", value: "molihua"},
];
class TestGridField extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            dataSource: dataSource1,
        };
    };


    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);
    };

    componentDidMount() {

    }

    render() {
        console.log("props:", this.props);
        const defaultGridRows = this.props.gridRows.default || [];
        return (
            <div>
                <GridField tHeadData={tHeadData}
                           dataType="grid_" //默认 grid_
                           width="80rem"
                           gridType="default"//默认 default
                >
                    {defaultGridRows.map((item, index)=> {
                        if (!item) {
                            return null
                        }
                        return (
                            <Tr key={index} getTimeValue={item} gridType="default" style={{
                                padding: "0.2rem 0",
                            }}>
                                {/*场景 td*/}
                                <Td style={{width: tHeadData[0].width}}>
                                    <InputField inputName="failName"
                                                hintText="请输入文件名称"
                                                required={true}
                                                changeValue={this.changeValue}
                                                remarks={[1, 2, 3]}
                                                dataType={`grid_${item}`}//与GridField的dataType="grid_"对应上
                                                valueWidth="21rem"
                                    />
                                </Td>
                                <Td style={{width: tHeadData[1].width}}>
                                    <InputField inputName="remarks"
                                                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"
                                                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"
                                                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"
                                                 hintText="请选择盖章方式"
                                                 required={true}
                                                 changeValue={this.changeValue}
                                                 remarks={[1, 2, 3]}
                                                 dataSource={this.state.dataSource}
                                                 dataType={`grid_${item}`}
                                                 valueWidth="16rem"
                                    />
                                </Td>
                            </Tr>)
                    })
                    }

                </GridField>

                <br/><br/><br/><br/><br/><br/>

                <GridField
                    tHeadData={tHeadData}
                    dataType="grid_" //默认 grid_
                    width="80rem"
                    gridType="table"
                >
                    {
                        this.props.gridRows.table && this.props.gridRows.table.map((item, index)=> {
                            if (!item) {
                                return null
                            }
                            return (
                                <Tr key={index} getTimeValue={item} gridType="table"
                                    style={{
                                        padding: "0.2rem 0",
                                    }}>
                                    <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 => ({
    // dispatch: bindActionCreators(actionGrid, dispatch),
    dispatchForm: bindActionCreators(actionForm, dispatch),
});

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




5.help
@Author fuyan Gu
@Email 1303928929@qq.com