popbean-react
Version:
let me think about something,comming soon...
175 lines • 5.92 kB
JavaScript
var React = require('react/addons');
//
//var LensedStateMixin = require('react-lensed-state');
var LensedStateMixin = require('../../../src/bs3/linked-state');
var moment = require('moment');
var css = require('../../../node_modules/react-datepicker/dist/react-datepicker.css');
var DatePicker = require('react-datepicker');
var Select = require('react-select');
var select_css = require('../../../node_modules/react-select/dist/default.css');
var sb_style = require('../../../less/bs3/sb-spa-2.less');
//
var ActionBar = require('../../../src/bs3/action-bar');
//select
//
var options = [
{ value: 'one', label: 'One' },
{ value: 'two', label: 'Two' }
];
var DashBoard = React.createClass({
mixins:[LensedStateMixin],
getDefaultProps:function(){
return {
title:'hello world',
};
},
getInitialState:function(){
return {
data:{
date_1:moment()
}
};
},
getActions:function(){
var detail_ctrl_model = [
{
code:"save-btn",
label:"绑定输出",
icon:"glyphicon glyphicon-save",
handler:function(event){
var data = this.state.data;
console.log('data',data);
}.bind(this)
}
];
return detail_ctrl_model;
},
render:function(){//怎么看怎么觉得应该有个壳子
//
// var jst = require("babel/simple");
// var content = '<div>soso</div>';
// var rs = jst.transform(content,{optional: ["reactCompat"]});
// console.log('rs',rs);
//
return(
<div id="page-wrapper">
<div className="row">
<div className="col-lg-12">
<h3 className="panel-heading">静态表单(验证代码模板用)</h3>
</div>
</div>
<div className="row">
<div className="form-group col-xs-6">
<label for="main_code_1">主-编码-1</label>
<input type="text" id="main_code_1" className="form-control" placeholder=".col-xs-2" valueLink={this.linkState('data.main_code_1')}/>
</div>
<div className="form-group col-xs-6">
<label for="main_code_2">主-编码-2</label>
<input type="text" id="main_code_2" className="form-control" placeholder=".col-xs-3" valueLink={this.linkState('data.main_code_2')}/>
</div>
</div>
<div className="row">
<div className="form-group col-xs-12">
<label for="main_memo_1">主-备注-1</label>
<textarea type="text" id="main_memo_1" className="form-control" placeholder="tip" rows="3" valueLink={this.linkState('data.main_memo_1')}></textarea>
</div>
</div>
<div className="row">
<div className="form-group col-xs-6">
<label for="main_date_1">主-时间-1</label>
<DatePicker key="main_date_1"
dateFormat="YYYY-MM-DD"
className="form-control"
id="main_date_1"
selected={this.state.data.date_1}
onChange={this.dateChange}/>
</div>
</div>
<div className="row">
<div className="form-group col-xs-6">
<label for="main_bool_1">主-布尔-1</label>
<div className="checkbox">
<label>
<input type="checkbox" checkedLink={this.linkState('data.main_bool_1')}></input>选中则为吃翔
</label>
</div>
</div>
</div>
<div className="row">
<div className="form-group col-xs-6">
<label for="main_bool_1">主-布尔-1</label>
<div className="radio">
<label className="radio-inline">
<input type="radio" id="s1" checkedLink={this.radioLink('data.main_stat_1','opt_1')}/>1
</label>
<label className="radio-inline">
<input type="radio" id="s2" checkedLink={this.radioLink('data.main_stat_1','opt_2')}/>2
</label>
<label className="radio-inline">
<input type="radio" id="s3" checkedLink={this.radioLink('data.main_stat_1','opt_3')}/>3
</label>
</div>
</div>
</div>
<div className="row">
<div className="form-group col-xs-6">
<label for="main_dp_1">主-参照-1</label>
<Select
name="form-field-name"
value="one"
options={options}
onChange={this.logChange}
/>
</div>
<div className="form-group col-xs-6">
<label for="main_dp_2">主-参照-2(异步)</label>
<Select
name="form-field-name"
value="one"
asyncOptions={this.lazyLoad}
onChange={this.logChange}
/>
</div>
</div>
<div className="row">
<div className="form-group col-xs-6">
<label for="main_dp_3">主-参照-3(multi-select)</label>
<Select
name="form-field-name"
value="one"
multi={true}
options={options}
onChange={this.logChange}
/>
</div>
</div>
<ActionBar model={this.getActions()} float="center"/>
</div>
);
},
onSave:function(evet){
console.log(this.refs.df.state.data);
},
dateChange:function(date){
var update = {date_1:date};
var new_state = React.addons.update(this.state,{data:{"$set":update}});
this.setState(new_state);
},
logChange:function(val){
console.log('val',val);
},
lazyLoad:function(input,callback){
fetch('/service/accounts').then(function(response){
return response.json();
}).then(function(json){
var tmp = json['data'];
callback(null,{
options:tmp,
complete:true
});
}).catch(function(ex){
console.log(ex);
});
}
});
module.exports = DashBoard;