react-form-ui-y

1.input API 属性属性名（name）类型（type）必要性（Required）默认值（default）描述（description） inputName String true 无 formText String false hintText String false errorText String false 该值不能为空报错提示 changeValue Fun false remarks Object false selectType String false select 还有可选项dialog minDate String false maxDate String false setDate String false 设置展示的月份，优先级是 value，setDate，new Date() renderType String false en 日历渲染类型 en 美式日历日~六； ch 中式日历一~日 schedule String false 是否需要排班， 0不需要排班，所有日期可选， 1需要排班，仅排班日可选， 2需要排班，仅非排班日可选 getScheduleFn Fun false 会传begindate 和 enddate scheduleData Object false 排班数据,也可为可选择的日期, 格式 ["2018-01-01","2018-01-25"] scheduleLoading Boolean false 排班loading required Boolean false false disabled Boolean false false designationTheme String false default 主题类型：default（默认），tender dataType String false default 表单赋值的类型，如获取的formData，默认结果formData formType String false default(box) 表单类型 textWidth String false valueWidth String false textAlign String false left(formType："box"默认left，default默认right) right center（无） valueAlign String false right 2.安装 npm install "react-form-ui-y" --save 3.使用 reducers.js import {combineReducers} from 'redux' import {formData, subVerifyRes} from './form/index'//表单 const CombineReducers = combineReducers({ formData,//表单数据 subVerifyRes//表单校验的方法 }); export default CombineReducers demo.jsx import {connect} from 'react-redux' import {bindActionCreators} from 'redux' import {DateWeekField,actionForm} from 'react-form-ui-y'; class TestDateWeek extends Component { constructor(props) { super(props); this.state = { scheduleLoading: false, scheduleData: [ "2018-11-05", "2018-11-06", "2018-11-07", "2018-11-08", "2018-11-09", "2018-11-12", "2018-11-13", "2018-11-14", "2018-11-15", "2018-11-16", ] }; }; changeValue = (obj) => { console.log("changeValue-obj：", obj); //如果有需要用到级联赋值之类的，如，修改姓名自动给base赋值 //如果不需要赋值，此方法当忽略 if (obj.name == "zhName") { let data = [ { type: "dateRange",//type 类型 name: "say2",//name textarea 名称唯一标识 text: "",//text textarea 值 value: "",//textarea 的 text 与value一样 obj: {},//textarea 没有obj remarks: null,//备注传什么进去传什么出来 other: {// required: true//在设置值的时候，如果此项为必填项，required必须设置为true } }, //多个赋值同上 ]; this.props.dispatch.setFormData(data); // this.props.dispatch.setFormData(data,"table") 默认default } }; resetFn = () => { //默认重置全部什么都不传 this.props.dispatch.resetForm();//默认重置全部什么都不传 //指定重置可获取全部的key看看需要传哪些也可以手写如 ["default","table"] // let formKey = Object.keys(this.props.formData);// // this.props.dispatch.resetForm(["default"]) }; submitFn = () => { let _this = this; //设置必填校验默认校验 ["default"] _this.props.dispatch.submitVerify(_this.props.formData); // 如果需要指定校验或者全校验可获取全部的key看看需要传哪些也可以 ["default","table"] // let formKey = Object.keys(_this.props.formData); // _this.props.dispatch.submitVerify(_this.props.formData, ["default", "table"]); //在回调了监听返回值 _this.props.subVerifyRes setTimeout(function () { console.log("subVerifyRes", _this.props.subVerifyRes); if (_this.props.subVerifyRes.default == "success") { console.log("可提交", _this.props.formData) } else { console.log('还有必填项未填', _this.props.formData); } }, 100); }; componentDidMount() { } //日期请求排班 getScheduleFn = (beginDate, endDate) => { console.log("日期请求排班:", beginDate, endDate); let _this = this; _this.setState({ scheduleLoading: true, }); //服务 setTimeout(function () { _this.setState({ scheduleLoading: false, scheduleData: [ "2018-11-05", "2018-11-06", "2018-11-07", "2018-11-08", "2018-11-09", "2018-11-12", "2018-11-13", "2018-11-14", "2018-11-15", "2018-11-16", ] }) }, 1000) }; render() { console.log('this.props.formData', this.props.formData); return ( <div> <div style={{display: "flex"}}> <DateWeekField inputName="dateWeek1" //表单唯一的ID，不能重复，必填 formText="纪念时周" //描述，不传就没有描述 hintText="请选择周日期" //输入提示语 required={true} //是否是必填项 changeValue={this.changeValue} //改变输入框值的时候，触发的方法，有需要就用，无需要就不用 remarks={[1, 2, 3]} //备注，传送器，传什么进去，传什么出来 //date特有 //selectType="dialog" //select（默认） dialog //minDate="2018-11-10" //maxDate="2018-12-15" //setDate="2018-09-15" //设置展示的月份，优先级是 value，setDate，new Date() //renderType="ch"//日历渲染类型 en 美式日历日~六； ch 中式日历一~日，默认en //schedule="1"//是否需要排班， 0不需要排班，所有日期可选， 1需要排班，仅排班日可选， 2需要排版，仅非排班日可选 //getScheduleFn={this.getScheduleFn} // 会传begindate 和 enddate //scheduleData={this.state.scheduleData || []}//排班数据,也可为可选择的日期, 格式 ["2018-01-01","2018-01-25"] //scheduleLoading={this.state.scheduleLoading}//排班loading //disabled={true} //designationTheme = "" //主题类型：default（默认），tender //formType="box" //表单类型：default（默认），box //dataType="table" //表单赋值的类型，如获取的formData，默认结果formData.default = {}; //errorText="该选项为必填项" //textWidth="15rem" //valueWidth="20rem" //textAlign="left" // left(formType："box"默认left，default默认right) right center（无） //valueAlign="center" // left center right /> </div> <div className="button-box"> <Button scenesType="submit" handleBtn={this.submitFn} btnText="确认"/>        <Button scenesType="back" handleBtn={this.resetFn} btnText="重置"/> </div> </div> ) } } const mapStateToProps = state => ({ formData: state.formData, subVerifyRes: state.subVerifyRes, }); const mapDispatchToProps = dispatch => ({ dispatch: bindActionCreators(actionForm, dispatch), }); export default connect(mapStateToProps, mapDispatchToProps)(TestDateWeek);