popbean-react
Version:
let me think about something,comming soon...
244 lines (242 loc) • 6.78 kB
JSX
var React = require('react');
//
var DataGrid = require('react-datagrid');
//var grid_style = require('react-datagrid/index-no-normalize.css');
var grid_style = require('../../../node_modules/react-datagrid/dist/index.css');
//
var ActionBar = require('../action-bar');
var SearchBox = require('../search-box');
var FormBuilder = require('../form-builder');
// var action_icon_style = require('../../../node_modules/material-design-icons/sprites/css-sprite/sprite-content-black.css');
// var mui = require('material-ui-cssinjs');
// var ThemeManager = new mui.Styles.ThemeManager();
//先不考虑操作的扩展，后续如果要加，就使用merge的方式
//
// var mui = require('material-ui-cssinjs');
// var {Checkbox,Dialog,FlatButton} = mui;
//
//
var ListPanel = React.createClass({
contextTypes:{
router:React.PropTypes.func
},
getDefaultProps:function(){
return {
};
},
getInitialState:function(){
return {
model:{
main:{
fields:[]
}
},
data:[
],
selected:{}
};
},
getActions:function(){
var {app,code} = this.context.router.getCurrentParams();
var action_model = [
{
code:"add-btn",
label:"新增",
icon:"glyphicon glyphicon-plus-sign",
tip:'新增数据',
handler:function(event){
var p = {model:this.state.model};
this.context.router.transitionTo('node-factory-detail',{app:app,code:code},{json:JSON.stringify(p)});
}.bind(this)
},
{
code:"edit-btn",
label:"修改",
icon:"glyphicon glyphicon-edit",
tip:'修改数据',
handler:function(event){
var selected = this._getSelected();
if(!selected || selected.length<1){
return ;
}
if(selected.length>1){
console.log('别闹了，还是洗洗回家睡吧');
return ;
}
var p = {model:this.state.model,data:selected[0]};
console.log('edit:-->',p);
this.context.router.transitionTo('node-factory-detail',{app:app,code:code},{json:JSON.stringify(p)});
}.bind(this)
},
{
code:"del-btn",
label:"删除",
icon:"glyphicon glyphicon-remove",
tip:'删除数据',
handler:function(event){//FIXME 应该修改模板，将选中的数据贴上去，以便确认
this.refs.del_dlg.show();
}.bind(this)
}
];
return action_model;
},
/*_buildGridModel:function(fields){
var columns = [];
fields.map(function(item){
var inst = {
name:item['code'],
title:item['label']
};
columns.push(inst);
});
return columns;
},*/
_loadNodeFactoryModel:function(){
var self = this;
var {app,code} = this.context.router.getCurrentParams();
//
console.log('url','/service/'+app+'/node-factory/'+code+'/model');
fetch('/service/'+app+'/node-factory/'+code+'/model')
.then(function(response){
return response.json();
})
.then(function(json){//获得数据去填充
var data = json.data;
data.app = app;
data.code = code;
if(self.isMounted()){//这是必要的保护
self.setState(data);
self.onSearch();
}
}).catch(function(ex){
//FIXME 感觉统一处理比较好
console.log('读取数据错误',ex);
});
},
componentDidMount:function(){
console.log('did mount');
this._loadNodeFactoryModel();
},
componentWillMount:function(){console.log('will mount');},
componentWillReceiveProps:function(){
var {app,code} = this.context.router.getCurrentParams();
console.log('old app',this.state.app,'old code',this.state.code,'new app',app,'new code',code);
if(this.state.app+this.state.code != app+code){
this._loadNodeFactoryModel();
}
// console.log('will receive props');
},
componentWillUpdate:function(){
console.log('will update');
},
render:function(){
var columns = FormBuilder.filterByStage(this.state.model.main.fields,'list');
console.log('list columns',columns,this.state.model);
//
var model = this.getActions();
//
/*
var customActions = [
<FlatButton
key={1}
label="取消"
secondary={true}
onTouchTap={this._onClose}/>,
<FlatButton
key={2}
label="确认"
primary={true}
onTouchTap={this._onDelete}/>
];
<Dialog
ref="del_dlg"
title="删除确认"
actions={customActions}
modal={true}>
你确定要这么干么?
</Dialog>
*/
return (
<div>
<SearchBox model={this.state.model.main} onSearch={this.onSearch} ref="sb"/>
<ActionBar model={model}/>
<DataGrid columns={columns} dataSource={this.state.data} emptyText={'没有数据'}
onSelectionChange={this._onSelectionChange}
idProperty={this.state.model.main.id}
selected={this.state.selected}/>
</div>
);
},
onSearch:function(){//从界面上获取数据
var param = this.refs.sb.getQueryParam();
var self = this;
fetch('/service/cms/content')
.then(function(response){
return response.json();
}).then(function(json){
var tmp = json['data'];
self.setState({data:tmp});
}).catch(function(ex){
console.log(ex);//FIXME 暂时如此处理，以后可以统一一下调用一个函数
});
console.log('query soso',param);
},
_onClose:function(){
this.refs.del_dlg.dismiss();
},
_onDelete:function(){
//获得被选中的数据
var {code} = this.context.router.getCurrentParams();
var selected = this._getSelected();
if(!selected || selected.length<1){
return ;
}
console.log(selected);
var id_list = [];
var id_key = this.state.model.main.id;
selected.map(function(item){
id_list.push(item[id_key]);
});
console.log(selected,id_list,id_key);
var p = {};
p[id_key] = id_list;
var self = this;
//FIXME RemoteCallClient.post(url,param,success_handler,fail_handler)
//FIXME 需要注意的是，fetch的post method用静态文件测试，是有问题的
//FIXME url最好改成使用lodash的tpl进行处理
console.log('url:','/service/cms/nodefactory/'+code+'/data/delete/'+id_list.join(','));
fetch('/service/cms/nodefactory/'+code+'/data/delete/'+id_list.join(','))
.then(function(response){
return response.json();
})
.then(function(json){
var msg = json['data'];
console.log(msg);
self.refs.del_dlg.dismiss();
self.onSearch();
})
.catch(function(ex){
console.log('-->',ex);
});
},
_onSelectionChange:function(newSelection){
console.log(newSelection);
this.setState({
selected:newSelection
});
},
_getSelected:function(){//获得当前的选中行
var selected = this.state.selected;
var id = this.state.model.id;//FIXME 本质上这是id_key
var tmp = [];
var len = 0;
var ret = [];
var self = this;
Object.keys(this.state.selected).forEach(function(id){
len+=1;
ret.push(self.state.selected[id]);
});
return ret;
}
});
module.exports = ListPanel;