kanban-parent/kanban-console/src/main/webapp/resources/app/view/template/templateeditpanel.js

Ext.define('erp.view.template.templateeditpanel',{
	extend:'Ext.panel.Panel',
	//title:'编辑区',
	id:'templateeditpanel',
	layout:'border',
	alias:'widget.templateeditpanel',
	style:'overflow:visible;',
	initComponent : function(){ 
		var me = this;
		Ext.apply(me, {
			items : [{
				xtype:'editcomponent',
				cls: 'components',
				region:'south'
			},{
				xtype:'templatebuilderpanel',
				region:'center'
			},{
				xtype:'elementconfigpanel',
				region:'east'
			}],
			tbar:[{
				xtype:'button',
				text:'保存',
				id:'saveBtn',
				scope:this,
				disabled:true,
				handler:function(){
					me.saveAsXml();
				}
			},{
				xtype:'button',
				text:'清空',
				id:'clearAllBtn',
				handler:me.clearAll,
				disabled:true
			},{
				xtype:'button',
				text:'模板设置',
				id:'tplSetBtn',
				handler:me.setTemplateConfig,
				disabled:true
			},{
				xtype:'button',
				text:'导出',
				//disabled:true,
				handler:function(){
					me.exportXml();
				}
			},{
				xtype:'button',
				text:'导入',
				disabled:true,
				handler:function(){
					me.importXml();
				}
			}]
		});
		me.callParent(arguments); 
	},
	importXml:function(){
		var me = this;
		Ext.create('Ext.window.Window',{
			title:'导入',
			width:500,
			height:500,
			layout:'fit',
			modal:true,
			id:'importWin',
			items:[{
				xtype:'textarea',
				id:'xmlContent',
				grow:true,
				listeners:{
					afterrender:function(cmp){
        				cmp.getEl().set({
			                'spellcheck': 'false'
			            });
        			}						
				}
			}],
			buttons:[{
				text:'确定',
				handler:function(){
					me.editPanelRepaint();	
				}
			}]
		}).show();
	},
	editPanelRepaint:function(){
		var me = this;
		var templateList = Ext.getCmp('templatetree');
		var record = templateList.getSelectionModel().getSelection()[0];
		if(!record){
			Ext.Msg.alert('提示','请先选择模板！')
		}else{
			var xml = Ext.getCmp('xmlContent').value;
			if(!xml){
				Ext.Msg.alert('提示','请先输入内容');
			}else{
				var bol = me.validateXmlFormat(xml);
				if(!bol){
					return;
				}
				record.set('content',xml);
				templateList.fireEvent('repaintcomponent',templateList,record);		
				Ext.getCmp('importWin').close();
			}
		}		
	},
	validateXmlFormat:function(xml){
		if(DOMParser){
	        var parser = new DOMParser(),
	            xmldom, 
	            errors;
	        try {
	            xmldom = parser.parseFromString(xml, "text/xml");
	            errors = xmldom.getElementsByTagName("parsererror");
	            if (errors.length > 0){
	                throw new Error("XML Parsing Error:" + (new XMLSerializer()).serializeToString(xmldom, "text/xml"));
	            }
	            return true;
	        } catch (ex) {
	        	Ext.Msg.alert('提示','XML格式有误:'+ex.message);
	        	return false;
	        }        					
		}else{
			return true;
		}
	},
	exportXml:function(){
		var me = this;
		var builderPanel = Ext.getCmp('templatebuilderpanel');
		var items = builderPanel.items.items;
		var content = me.getComponentXml(items,builderPanel);
		var xml = me.formatXml(content);
		Ext.create('Ext.window.Window',{
			title:'导出',
			width:500,
			height:500,
			layout:'fit',
			modal:true,
			items:[{
				xtype:'textarea',
				grow:true,
				value:xml,
				listeners:{
					afterrender:function(cmp){
        				cmp.getEl().set({
			                'spellcheck': 'false'
			            });
        			}						
				}
			}]
		}).show();
	},
	setTemplateConfig:function(){
		var record = Ext.getCmp('templatetree').getSelectionModel().getSelection()[0];
		var me = Ext.getCmp('templateeditpanel');
		var globalParams = me.getGlobalParams();
		var radios = me.parseGlobalParamToRadio(globalParams,record.get('globalParameterCodes'));
		var win = record.win;
		if(!win){
			win = Ext.create('Ext.window.Window',{
				title:'模板设置',
				width:580,
				height:500,
				modal:true,
				layout:'fit',
				id:'tplSet',
				items:[{
					xtype:'form',
					layout:'column',
					id:'tplSetForm',
					defaults:{
						margin:'5 5 5 5'
					},
					items:[{
						xtype:'textarea',
						fieldLabel:'标题',
						columnWidth:1,
						height:80,
						name:'title',
						value:record.get('title'),
						listeners:{
							afterrender:function(cmp){
		        				cmp.getEl().set({
					                'spellcheck': 'false'
					            });
		        			}						
						}
					},{
			        	xtype:'combo',
			        	columnWidth:0.75,
			        	fieldLabel:'数据源',
			        	name:'dataSourceCode',
			        	id:'dataSourceCode',
			        	//value:'UAS',
			        	editable:false,
			        	store:Ext.create('Ext.data.Store',{
			        		fields:['username','code','name'],
			        		proxy:{
			        			type:'ajax',
			        			url:'datasource/get',
			        			reader: {
					            	type: 'json',
					            	root: 'content'
						        }
			        		},
			        		autoLoad: true,
			        		listeners:{
			        			load:function(){
			        				var combo = Ext.getCmp('dataSourceCode');
			        				combo.reset();
			        				combo.setValue(record.get('dataSourceCode'));
			        			}
			        		}
			        	}),
					    queryMode: 'local',
					    displayField: 'name',
					    valueField: 'code'
			        },{
						xtype:'fieldset',
						title:'公共参数',
						columnWidth:1,
				        collapsible: true,
				        layout:'column',
				        defaults:{
				        	margin:'5 5 5 5',
				        	columnWidth:0.5,
				        	labelWidth:130
				        },
				        items:[{
				        	xtype:'checkboxgroup',
				        	columnWidth:1,
				        	layout:'column',
				        	defaults:{
				        		columnWidth:0.33
				        	},
				        	name:'globalParameterCodes',
				        	items:radios,
				        	vertical: false
				        }]
				        
					}],
					buttons:[{
						text:'确定',
						handler:function(btn){
							var form = Ext.getCmp('tplSetForm');
							var values = form.getForm().getValues();
							var me = Ext.getCmp('templateeditpanel');
							me.saveAsXml(values);
						}
					},{
						text:'取消',
						handler:function(btn){
							var win = Ext.getCmp('tplSet');
							win.close();
						}
					}]
				}]
			}).show();	
		}
	},
	getGlobalParams:function(){
		var items = new Array();
		Ext.Ajax.request({
			url:'globalParameters/get',
			method:'get',
			async:false,
			callback:function(options,success,response){
				var res = Ext.decode(response.responseText);
				Ext.Array.each(res.content,function(param){
					var item = new Object();
					item.code = param.code;
					item.name = param.name;
					items.push(item);
				});
			}
		});
		return items;

	},
	parseGlobalParamToRadio:function(globalParameters,globalParameterCodes){
		var me = this;
		var items = new Array();
		var item;
		Ext.Array.each(globalParameters,function(param){
			item = new Object();
			item.boxLabel = param.name;
			item.name = 'globalParameterCodes';
			item.inputValue = param.code;
			items.push(item);
			if(globalParameterCodes&&globalParameterCodes.length>0){
				Ext.Array.each(globalParameterCodes,function(code){
					if(param.code==code){
						item.checked = true;
					}
				});
			}
		});
		return items;
	},
	saveAsXml:function(extraParams){
		var me = this;
		var builderPanel = Ext.getCmp('templatebuilderpanel');
		var items = builderPanel.items.items;
		if(items.length>0){
			var content = me.getComponentXml(items,builderPanel);
			me.save(content,extraParams);
		}else{
			Ext.Msg.alert('提示','未添加组件!');
		}
	},
	getComponentXml:function(items,builderPanel){
		var content = '<content>';
		Ext.Array.each(items,function(panel,index){
			if(builderPanel.currenSelectPanel&&builderPanel.currenSelectPanel.id==panel.id){
				panel.saveData(panel,builderPanel);
			}
			var xml = panel.getXmlString(panel);
			content += xml;
		});
		content += '</content>';	
		return content;
	},
	save:function(content,extraParams){
		var templateTree = Ext.getCmp('templatetree');
		var record = templateTree.getSelectionModel().getSelection()[0];
		var templateCode = record.get('code');
		var json = {
        	content:content
		};
		if(templateCode){
			type = 'updatePart';
			json.code = templateCode;
		}else{
			type = 'savePart';
		}
		if(extraParams){
			Ext.apply(json,extraParams);
			if(!extraParams.globalParameterCodes){
				json.globalParameterCodes = [];
			}
		}
		Ext.Ajax.request({
        	url:'template/'+type,
        	method:'POST',
        	params:{
        		json:Ext.encode(json)
        	},
        	callback:function(options,success,response){
        		var res = response.responseText;
        		Ext.Msg.alert('提示','保存成功!');
        		var win = Ext.getCmp('tplSet');
        		if(win){
        			win.close();
        		}
        	}
        });
	},
	clearAll:function(){
		Ext.Msg.confirm('提示','是否确定清空所有组件?',function(btn){
			if(btn=='yes'){
				var me = Ext.getCmp('templateeditpanel');
				me.clear();
			}
		});
	},
	myFn:function(data){
		console.log(data);
	},
	clear:function(){
		var builderPanel = Ext.getCmp('templatebuilderpanel');
		builderPanel.removeAll();
		Ext.getCmp('elementdetailgrid').getStore().removeAll();
		Ext.getCmp('detailpropertiesgrid').getStore().removeAll();
		Ext.getCmp('baseConfigForm').removeAll(true);
		builderPanel.currenSelectPanel = null;		
	},
	formatXml:function(xml) {
	    var formatted = '';
	    var reg = /(>)(<)(\/*)/g;
	    xml = xml.replace(reg, '$1\r\n$2$3');
	    var pad = 0;
	    Ext.Array.each(xml.split('\r\n'), function(node, index) {
	        var indent = 0;
	        if (node.match( /.+<\/\w[^>]*>$/ )) {
	            indent = 0;
	        } else if (node.match( /^<\/\w/ )) {
	            if (pad != 0) {
	                pad -= 1;
	            }
	        } else if (node.match( /^<\w[^>]*[^\/]>.*$/ )) {
	            indent = 1;
	        } else {
	            indent = 0;
	        }
	
	        var padding = '';
	        for (var i = 0; i < pad; i++) {
	            padding += '  ';
	        }
	
	        formatted += padding + node + '\r\n';
	        pad += indent;
	    });
	
	    return formatted;
	}
});