react-form-ui-y
Version:
214 lines (192 loc) • 10.8 kB
Plain Text
1.input API 属性
属性名（name） 类型（type） 必要性（Required） 默认值（default） 描述（description）
inputName String true 无
formText String false
errorText String false 该值不能为空 报错提示
changeValue Fun false
remarks Object false
dataSource Object true 无 单选项值 格式必须为 [{text:"女",value:"F"},{text:"男",value:"M"}]
requestFlag Boolean true true 下拉滚动的状态 触发下拉滚动设置false，请求完服务为true
requestLoading Boolean true false 服务请求的loading true false
onRequestService Fun true 滚动请求 和 输入请求
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 {SelectLenovoCheckboxField,actionForm} from 'react-form-ui-y';
let selectDataSource = [
{text: "玫瑰花", value: "1"},
{text: "野百合", value: "2"},
{text: "兰花蓝花兰花蓝花兰花蓝花兰花蓝花兰花蓝花兰花蓝花兰花蓝花兰花蓝花兰花蓝花兰花蓝花兰花蓝花兰花蓝花兰花蓝花", value: "3"},
{text: "hua-hua-hua-hua-hua-hua-hua-hua-hua-hua-hua-hua-hua-hua-hua-hua-hua-hua", value: "4"},
{text: "绿萝", value: "5"},
{text: "玫瑰花1", value: "6"},
{text: "野百合2", value: "7"},
{text: "兰花蓝花兰花蓝花兰花蓝花兰花蓝花兰花蓝花兰花蓝花兰花蓝花兰花蓝花兰花蓝花兰花蓝花兰花蓝花兰花蓝花兰花蓝花3", value: "8"},
{text: "hua-hua-hua-hua-hua-hua-hua-hua-hua-hua-hua-hua-hua-hua-hua-hua-hua-hua4", value: "9"},
{text: "绿萝5", value: "10"},
{text: "绿萝", value: "11"},
{text: "玫瑰花1", value: "12"},
{text: "野百合2", value: "13"},
{text: "兰花蓝花兰花蓝花兰花蓝花兰花蓝花兰花蓝花兰花蓝花兰花蓝花兰花蓝花兰花蓝花兰花蓝花兰花蓝花兰花蓝花兰花蓝花3", value: "14"},
{text: "hua-hua-hua-hua-hua-hua-hua-hua-hua-hua-hua-hua-hua-hua-hua-hua-hua-hua4", value: "15"},
{text: "绿萝5", value: "16"},
];
class TestSelectLenovoCheckbox extends Component {
constructor(props) {
super(props);
this.state = {
requestFlag: true,//联想下拉 滚动请求的状态 true 可以继续滚动 false 阻止滚动
requestLoading: false,//
selectDataSource,
};
};
//联想下拉的搜索 联想下拉复选
onRequestService = (type, value) => {
let _this = this;
if (type == "search") {//搜索触发的服务
console.log("联想下拉的搜索", value);
_this.setState({
requestLoading: true,
});
setTimeout(function () {
_this.setState({
requestFlag: true,
requestLoading: false,
selectDataSource: [
{text: "玫瑰花", value: "1"},
{text: "野百合", value: "2"},
{text: "绿萝5", value: "16"},
]
//设置dataSource
});
}, 500)
} else if (type == "page") {//分页触发的服务
this.setState({
requestFlag: false,
requestLoading: true,
});
//服务
setTimeout(function () {
_this.setState({
requestFlag: true,
requestLoading: false,
//设置dataSource
});
}, 1000)
}
};
changeValue = (obj) => {
console.log("changeValue-obj：", obj);
//如果有需要用到级联赋值之类的，如，修改姓名自动给base赋值
//如果不需要赋值，此方法当忽略
if (obj.name == "zhName") {
let data = [
{
type: "selectLenovoCheckbox",//type 类型
name: "say2",//name textarea 名称 唯一标识
text: ["深圳","北京"],//text textarea 值
value: ["shenzhen","beijing"],//textarea 的 text 与value一样
obj: [{text:"深圳",value:"shenzhen"},{text:"北京",value:"beijing"}],//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() {
}
render() {
console.log('this.props.formData', this.props.formData);
return (
<div>
<div style={{display: "flex"}}>
<SelectLenovoCheckboxField inputName="selectLenovoCheck1" //表单唯一的ID，不能重复，必填
formText="联想复选" //描述，不传就没有描述
hintText="请选择联想复选下拉值" //输入提示语
required={true} //是否是必填项
changeValue={this.changeValue} //改变输入框值的时候，触发的方法，有需要就用，无需要就不用
remarks={[1, 2, 3]} //备注，传送器，传什么进去，传什么出来
//联想复选下拉 特有
dataSource={this.state.selectDataSource}//选项值 格式必须为 [{text:"女",value:"F"},{text:"男",value:"M"}]
requestFlag={this.state.requestFlag}//下拉滚动的状态 触发下拉滚动设置false，请求完服务为true
requestLoading={this.state.requestLoading}//服务请求的loading true false
onRequestService={this.onRequestService}//滚动请求 和 输入请求
//selectType="dialog" //select（默认） dialog
//selectWidth="50rem"
//selectAlign="center" //无效 //left（默认） center
//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 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)(TestSelectLenovoCheckbox);