popbean-react
Version:
let me think about something,comming soon...
254 lines (251 loc) • 8.23 kB
JavaScript
/*
*/
function buildField(item,colcount){//将一个field构建成一个字符串
var ret = '';
if(item['type'] == 'memo'){
ret = '<div className="form-group col-xs-12">';
ret += '<label htmlFor="'+item.code+'">'+item.label+'</label>';
ret += '<textarea type="text" className="form-control" id="'+item.code+'" placeholder="'+item.tip+'" rows="3" valueLink={this.linkState("data.'+item.code+'")}';
console.log('item[readOnly]',item['readOnly']);
if(item['readonly'] || item['readonly'] == 'true'){
ret += ' readOnly';
}
ret += '></textarea></div>';
}else if(item['type'] == 'date'){
ret = '<div className="form-group col-xs-'+ (12/colcount) +'">';
ret += '<label htmlFor="'+item.code+'">'+item.label+'</label>';
ret += '<DatePicker ';
ret += 'key="'+item.code+'" ';
ret += 'dateFormat="YYYY-MM-DD" ';
ret += 'className="form-control" ';
ret += 'id="'+item.code+'"';
ret += 'selected={this.state.data.'+item.code+'}';
ret += 'onChange={datechange_bus["'+item.code+'"]}';
if(item['readonly'] || item['readonly'] == 'true'){
ret += ' readOnly';
}
ret += '/></div>';
}else if(item['type'] == 'ref'){//引用数据
ret = buildRefField(item,colcount);
}else if(item['type'] == 'stat'){
ret = buildStatField(item,colcount);
}else if(item['type'] == 'bool'){
ret = buildBoolField(item,colcount);
}else {
ret = '<div className="form-group col-xs-'+(12/colcount)+'">';
ret += '<label htmlFor="'+item.code+'">'+item.label+'</label>';
ret += '<input type="text" className="form-control" id="'+item['code']+'" placeholder="'+item.tip+'" valueLink={this.linkState("data.'+item.code+'")}';
if(item['readonly'] || item['readonly'] == 'true'){
ret += ' readOnly';
}
ret += '/></div>';
}
ret += '\n';
return ret;
}
function buildBoolField(item,colcount){
var ret = '<div className="form-group col-xs-'+(12/colcount)+'">';
ret += '<label for="'+item.code+'">'+item.label+'</label>';
ret += '<div className="checkbox">';
ret += '<label>';
ret += '<input type="checkbox" checkedLink={this.linkState("data.'+item.code+'")}';
if(item['readonly'] || item['readonly'] == 'true'){
ret += ' readOnly';
}
ret += '></input>'+item.tip;
ret += '</label>';
ret += '</div>';
ret += '</div>';
return ret;
}
/*
构建stat的显示
*/
function buildStatField(item,colcount){//值域超过3项就占领一行
var range = item['rangeset'];//rangeset:value1:label1@value2:label2@value3:label3:default
var pairs = range.split('@');
// var colspan = pairs.length >3?12:6;//如果需要支持，就要从split哪里下手，而不仅仅是这里
var ret = '<div className="form-group col-xs-'+(12/colcount)+'">';//需要根据值域范围来搞
ret += '<label for="'+item.code+'">'+item.label+'</label>';
ret += '<div className="radio">';
pairs.map(function(pair){
var array = pair.split(':');//对于默认值的问题，交给后端解决，而不是前端
var tmp = '<label className="radio-inline">';
tmp += '<input type="radio" checkedLink={this.radioLink("data.'+item.code+'","'+array[0]+'")}';
if(item['readonly'] || item['readonly'] == 'true'){
ret += ' readOnly';
}
tmp += '/>'+array[1];
tmp += '</label>';
ret += tmp;
});
ret += '</div>';
ret += '</div>';
return ret;
}
function buildRefField(item,colcount){
var ret = '<div className="form-group col-xs-'+(12/colcount)+'">';//需要根据值域范围来搞
ret += '<label for="'+item.code+'">'+item.label+'</label>';
ret += '<ReactSelect name="'+item.code+'"';
ret += ' value={this.state.data.'+item.code+'}';
if( (typeof item.range) == 'string'){//异步模式
ret += ' asyncOptions={reffetch_bus["'+item.code+'"]}';
}else{
//
ret += ' options={ref_range["'+item.code+'"]}';
item.range;
}
ret += 'onChange={refchange_bus["'+item.code+'"]}';
if(item['readonly'] || item['readonly'] == 'true'){
ret += ' readOnly';
}
ret += '/>';
ret +='</div>';
return ret;
}
function layout(fields,start,end,col_count){//将指定区段的属性放到数组中
var ret = [];
if(start == end){//独立成行的情况
var part = '<div className="row">'+'\n';
part += buildField(fields[start],col_count);
part +='</div>'+'\n';
ret.push(part);//做一个group就行
return ret;
}
var rows = Math.ceil((end-start+1)/col_count);
for(var i=0;i<rows;i++){//初始化
ret[i] = '<div className="row">'+'\n';
for(var ii=0;ii<col_count;ii++){
if((i*col_count+ii+1)<=(end-start+1)){//如果超出了范围就滚蛋
ret[i] += buildField(fields[i*col_count+ii],col_count)+'\n';
}
}
ret[i] += '</div>'+'\n';
}
/*
var current_col = 0;//所在组
for(var i=start;i<=end;i++){
if(current_col > (col_count-1)){
current_col = 0;//复位
}
for(var ii=0;ii<col_count;ii++){
var tmp = (i+1)%(ii+1);
current_col ++;
if(tmp == 0){
ret[ii] += buildField(fields[i],col_count)+'\n';
break;
}
}
}
for(var i=0;i<rows;i++){//初始化
ret[i] += '</div>'+'\n';
}*/
return ret;
}
function split(fields){//将数据分组
var ret = [];
var start = 0;
for(var i = 0,len=fields.length;i<len;i++){
if(fields[i]['type'] == 'memo'){
if(start != i){//说明就是
ret.push({start:start,end:i-1});
start = i+1;//将
}else{
start=i;
}
ret.push({start:i,end:i});//将当前这个memo也加进去
}
}
if(start != (fields.length-1)){
ret.push({start:start,end:(fields.length-1)});
}
return ret;
}
function filter(model,scope){//复制出来一份
var ret = {};
for(var key in model){//很毛坯的拷贝一个对象
ret[key] = model[key];
}
//将需要显示的内容识别出来
var fields = [];
ret.fields.map(function(item){
if(item.scope == 'both' || item.scope == scope){
fields.push(item);
}
});
model.fields = fields;
return model;
}
var Builder = {
};
function clone(obj){
var ret = {};
for(var key in obj){//很毛坯的拷贝一个对象
ret[key] = obj[key];
}
return ret;
}
module.exports = Builder;
module.exports ={
build:function(colcount,fields){//根据输入的字符串来搞
//col_count应该[1,3]
var ret = '<div>';
var array = split(fields);
for(var i=0,len=array.length;i<len;i++){
var tmp_array = layout(fields,array[i]['start'],array[i]['end'],colcount);
tmp_array.map(function(item){
ret += item;
});
}
ret += '</div>';
return ret;
},
filter:function(model,scope){//过滤属性;适用于search-box的获取
var ret = clone(model);
//将需要显示的内容识别出来
var fields = [];
ret.fields.map(function(item){
if(item.scope == 'both' || item.scope == scope){
fields.push(item);
}
});
ret.fields = fields;
return ret;
},
filterByStage:function(fields,stage){//按照card和list两种状态来过滤?
//将需要显示的内容识别出来
var ret = [];
fields.map(function(item){
if(item['visible'] =='false' || item['visible'] == false){
//不显示就算了
}else{
if(item['show'+stage] == 'true' || item['show'+stage] == true){
var inst ;
if(stage =='list'){
inst = {
name:item['code'],
title:item['label']
};
inst[stage+'pos'] = item[stage+'pos'];
}else{
inst = item;
}
ret.push(inst);
}
}
});
//
ret = ret.sort(function(a,b){
return parseInt(a[stage+'pos']||0)-parseInt(b[stage+'pos']||0);
});
//
return ret;
},
sort:function(model,sortkey){//指定排序
var ret = clone(model);
ret.fields = ret.fields.sort(function(a,b){
return parseInt(a[sortkey])-parseInt(b[sortkey]);
});
return ret;
}
};