popbean-react/src/bs3/grid-panel/detail-panel.jsx

let me think about something,comming soon...

var React = require('react');
var ActionBar = require('../action-bar');
var DynamicForm = require('../dynamic-form');
var FormBuilder = require('../form-builder');
var DataGrid = require('react-datagrid');
var grid_style = require('../../../node_modules/react-datagrid/dist/index.css');
var Modal = require('../modal');
//只是堆积界面的显示，控制还是放外面好了
//
var DetailPanel = React.createClass({
	contextTypes:{
		router:React.PropTypes.func
	},
	getInitialState:function(){//FIXME 要提供propTypes
		console.log('init state');
		return {
			fields:[],
			model:{
				slaves:[]
			},
			data:{

			}
		};
	},
	getActions:function(){
		var {app,code} = this.context.router.getCurrentParams();
		var detail_ctrl_model = [
			{
				code:"save-btn",
				label:"保存",
				icon:"glyphicon glyphicon-save",
				handler:function(event){
					var data = this.refs.df.state.data;
					//拿到数据后，进行必要的保存，并返回界面
					this.context.router.transitionTo('node-factory-list',{app:app,code:code});//如果有必要就执行一个查询
				}.bind(this)
			},
			{
				code:"back-btn",
				label:"返回",
				icon:"glyphicon glyphicon-chevron-left",
				handler:function(event){
					this.context.router.transitionTo('node-factory-list',{app:app,code:code});
				}.bind(this)
			}
		];
		return detail_ctrl_model;
	},
	componentWillMount:function(){
		var query = this.context.router.getCurrentQuery();
		var tmp = JSON.parse(query['json']);
		var new_state = {model:tmp['model']};
		if(tmp['data']){
			new_state['data'] = tmp['data'];
		}
		console.log('new_state:',new_state);
		this.setState(new_state);//FIXME 为啥不直接将tmp塞进去？为了避免带入杂质，只要想要的
	},
	componentDidMount:function(){
		this.refs.df.setState({data:this.state.data});
	},
	componentWillReceiveProps:function(){
		console.log('component will receive props');
	},
	shouldComponentUpdate:function(){
		console.log('should component update');	
	},
	componentWillUpdate:function(){
		console.log('component will update');
	},
	componentDidUpdate:function(){
		console.log('component did update');	
	},
	componentWillUnmount:function(){
		//console.log('component will unmount');
	},
	/*_buildGridModel:function(fields){
		var columns = [];
		fields.map(function(item){
			var inst = {
				name:item['code'],
				title:item['label']
			};
			columns.push(inst);
		});
		return columns;
	},*/
	render:function(){
		var ctrl_actions = this.getActions();
		var slaves = this.state.model.slaves || [];
		return (
		<div>
		<DynamicForm model={this.state.model.main} ref="df"/>
		{
			slaves.map(function(slave){
				//FIXME 暂时不考虑upload的情况
				var self = this;
				// var columns = this._buildGridModel(slave.fields);
				var columns = FormBuilder.filterByStage(slave.fields,'list');
				var slave_actions = [
					{
						code:'slave-add',
						icon:'glyphicon glyphicon-plus-sign',
						type:'icon',
						tip:'添加',
						handler:this._onAddSlave.bind(this,slave)
					},
					{
						code:'slave-edit',
						icon:'glyphicon glyphicon-edit',
						type:'icon',
						tip:'修改'
					},
					{
						code:'slave-del',
						icon:'glyphicon glyphicon-remove',
						type:'icon',
						tip:'删除'
					}
				];
				var slave_ctrl = [
					{
						code:'slave-save',
						icon:'glyphicon glyphicon-plus-sign',
						label:"确定",
						handler:this._onSaveSlave.bind(this,slave),
						tip:'确定'
					},
					{
						code:'slave-close',
						icon:'glyphicon glyphicon-share-alt',
						label:"关闭",
						handler:this._onCloseSlave.bind(this,slave),
						tip:'关闭'	
					}
				];
				return (
					<div>
						<div className="form-group">
						  <label className="col-sm-1 control-label"><h5>{slave.name}</h5></label>
						  <div className="col-sm-11">
						  	<hr/>
						  </div>
						</div>
						<ActionBar model={slave_actions} />
						<DataGrid columns={columns} results={ self.state.data[slave.code] ? self.state.data[slave.code]: [{}] } showTableHeading={true}/>
						<Modal ref={slave.code +'_dlg'} actions={slave_ctrl}>
							<DynamicForm model={slave} ref={slave.code+'_df'}/>
						</Modal>
					</div>
				);
			},this)
		}
			<ActionBar model={ctrl_actions} float="center"/>
		</div>
		);
	},
	_onAddSlave:function(slave){
		this.refs[slave.code+'_dlg'].show();
	},
	_onCloseSlave:function(slave){
		this.refs[slave.code+'_dlg'].hide();
	},
	_onSaveSlave:function(slave){
		var inst = this.refs[slave.code+'_df'];
		var data = inst.state;
		//执行一个fetch，上传数据后更新this.state.data[slave.code]=
		/*
		var self = this;
		fetch('',data)
		.then(function(response){
			return response.json();
		})
		.then(function(json){
			var data = json['data'];
			self.refs[slave.code+'_dlg'].hide();
		})
		.catch(function(ex){
			console.log(ex);
		});*/
		// console.log('save slave',inst,'data',data);
		
	}
});
module.exports = DetailPanel;