表单数据模型 FormModel

1.说明

用于Form组件生成N个标准Input而设置的

2.参数顺序

constructor(name,label="",type = "text",required=false,value="",hide=false,url=null,data=[],extraData=[],valueField="value",textField="text")

3.API

参数名 默认值 参数说明
name null 对应的数据字段名称
label "" 表单的文字说明
type text 表单类型
required false 是否必填
value "" 表单默认值
text "" 显示的文本值
hide false 是否隐藏表单
url null 表单数据请求的url,如下拉列表的数据通过url请求
data [] 数据源
extraData [] 数据源的附加数据
valueField value 数据字段值名称
textField text 数据文本值名称
backSource null ajax返回的数据源中 哪个属性作为数据源
readonly false 是否只读
onClick null click的Handler
onChange null 值发生改变的Handler
onSelect null 选中事件,如下拉框选择时
className null 需要额外添加的class
equal "" 判断当前表单值是否与另一个表单值相等
min null 最小值
max null 最大值
regexp null 正则验证
placeholder "" 占位提示文字
onlyline false 表单是否占一行显示
rows 5 表单类型为textarea时,表单的行数
secondUrl null 下拉选择面板中二级节点查询Url
thirdUrl null 下拉选择面板中三级节点查询Url
params {} 一级节点查询的参数
secondParams {} 二级节点查询的参数
secondParamsKey null 一级节点的value作为二级节点查询的参数
thirdParams {} 三级节点查询的参数
thirdParamsKey null 二级节点的value作为三级节点查询的参数
hotTitle null 热门选择的标题
hotData null 热门选择的数据
headers null 当表单类型为gridpicker时,表格头部的设置
size default 默认大小
position null 表单的位置

4.代码演示

/**
 * Created by ALOG on 17/6/5.
 */

let React =require( "react");
let ReactDOM=require("react-dom");
let wasabi=require("wasabiD");
let Form=wasabi.Form;
let FormModel=wasabi.FormModel;
let HeaderModel=wasabi.HeaderModel;
var alogUtil = require("../libs/alogUtil.js");
var queryFormDataUrl=alogUtil.orderUrl()+"/sell-portal/rma/queryRmaQueryFormData.htm"+alogUtil.getOMSParams();

class Demo extends React.Component {
    formModelInit(){
        let rmaCode=new FormModel("rmaCode","系统售后单号",'text');
        rmaCode.readonly=true;

        let rmaSource = new FormModel("rmaSource", "单据来源", "select",true,null,false,queryFormDataUrl);
        rmaSource.dataSource = "data.rmaSourceList";
        rmaSource.value = "MANUAL";
        rmaSource.text = "手工新建";
        rmaSource.placeholder="必填项";
        rmaSource.extraData=[{text:"我是额外数据",text:"all"}];

        let submitTime=new FormModel("submitTime","申请时间",'datetime');


        let saleOrderCode=new FormModel("saleOrderCode","关联订单号",'gridpicker',false,null,false,
            alogUtil.orderUrl()+"/sell-portal/rma/queryRmaDetailFormData.htm"+alogUtil.getOMSParams());
        saleOrderCode.valueField="orderCodeOrOutBizCode";
        saleOrderCode.textField="orderCodeOrOutBizCode";
        saleOrderCode.dataSource="data.rmaRelativeSaleOrderList";
        saleOrderCode.required=true;
        saleOrderCode.placeholder="请输入系统订单编码或外部原订单号";
        saleOrderCode.onSelect=this.gridPickerSelect;
        saleOrderCode.headers=[new HeaderModel("saleOrderCode", "订单系统编码",null,false,false),
            new HeaderModel("saleOrderOuterCode", "外部原订单号",null,false,false),
            new HeaderModel("warehouseName", "发后仓库",null,false,false),
            new HeaderModel("buyerName", "收货人",null,false,false),
            new HeaderModel("orderStatus", "订单状态",(rowData,rowIndex)=>{
                return rowData.orderStatus;
            },false,false)];


        return [
            rmaCode,
            rmaSource,
            saleOrderCode,
            submitTime,
        ];
    }


    render(){
        return (
            <Form ref="refundInfoForm"
                  model={this.formModelInit()}
                  copyHide={true}
                  submitHide={false}
                  closeHide={true}
                  disabled={false}></Form>
        )
    }
}
ReactDOM.render(<Demo/>,document.getElementById("root"));

results matching ""

    No results matching ""