自定义表单样式

o2web/source/x_component_process_FormDesigner/Module/Form.js

@@ -106,44 +106,53 @@ MWF.xApplication.process.FormDesigner.Module.Form = MWF.FCForm = new Class({
 
 		this.container.set("html", this.html);
 		this.loadStylesList(function(){
-			var oldStyleValue = "";
-			if ((!this.json.formStyleType) || !this.stylesList[this.json.formStyleType]) this.json.formStyleType="blue-simple";
-			if (this.options.mode=="Mobile"){
-				if (this.json.formStyleType != "defaultMobile"){
-					//oldStyleValue = this.json.formStyleType;
-					//this.json.formStyleType = "defaultMobile";
-					var styles = this.stylesList[this.json.formStyleType];
-					if( !styles || typeOf(styles.mode)!=="array" || !styles.mode.contains( "mobile" ) ){
-						oldStyleValue = this.json.formStyleType;
-						this.json.formStyleType = "defaultMobile";
+			if( this.json.formStyleTypeType === "custom"){ //如果是自定义表单样式
+				this.currentFormStyleType = this.json.formStyleCustom;
+				this.loadCustomTemplateStyles( this.json.formStyleCustom, function ( templateStyles ) {
+					this._load( templateStyles );
+				}.bind(this))
+			}else {
+				var oldStyleValue = "";
+				if ((!this.json.formStyleType) || !this.stylesList[this.json.formStyleType]) this.json.formStyleType = "blue-simple";
+				if (this.options.mode == "Mobile") {
+					if (this.json.formStyleType != "defaultMobile") {
+						var styles = this.stylesList[this.json.formStyleType];
+						if (!styles || typeOf(styles.mode) !== "array" || !styles.mode.contains("mobile")) {
+							oldStyleValue = this.json.formStyleType;
+							this.json.formStyleType = "defaultMobile";
+						}
 					}
 				}
-			}
+				this.currentFormStyleType = this.json.formStyleType;
 
-			this.loadTemplateStyles( this.stylesList[this.json.formStyleType].file, this.stylesList[this.json.formStyleType].extendFile, function( templateStyles ){
-				//this.templateStyles = (this.stylesList && this.json.formStyleType) ? this.stylesList[this.json.formStyleType] : null;
-				this.templateStyles = templateStyles;
-				this.loadDomModules();
+				this.loadTemplateStyles(this.stylesList[this.json.formStyleType].file, this.stylesList[this.json.formStyleType].extendFile, function (templateStyles) {
+					//this.templateStyles = (this.stylesList && this.json.formStyleType) ? this.stylesList[this.json.formStyleType] : null;
+					this._load(templateStyles, oldStyleValue);
+				}.bind(this));
+			}
+		}.bind(this));
+	},
+	_load : function( templateStyles, oldStyleValue ){
+		this.templateStyles = templateStyles;
+		this.loadDomModules();
 
-				if (this.json.formStyleType && this.templateStyles && this.templateStyles["form"]){
-					this.setTemplateStyles(this.templateStyles["form"]);
-				}
+		if (this.json.formStyleType && this.templateStyles && this.templateStyles["form"]){
+			this.setTemplateStyles(this.templateStyles["form"]);
+		}
 
-				this.setCustomStyles();
-				this.node.setProperties(this.json.properties);
+		this.setCustomStyles();
+		this.node.setProperties(this.json.properties);
 
-				this.setNodeEvents();
+		this.setNodeEvents();
 
-				if (this.options.mode=="Mobile"){
-					if (oldStyleValue) this._setEditStyle("formStyleType", null, oldStyleValue);
-				}
+		if (this.options.mode=="Mobile"){
+			if (oldStyleValue) this._setEditStyle("formStyleType", null, oldStyleValue);
+		}
 
-				this.selected();
-				this.autoSave();
-				this.designer.addEvent("queryClose", function(){
-					if (this.autoSaveTimerID) window.clearInterval(this.autoSaveTimerID);
-				}.bind(this));
-			}.bind(this));
+		this.selected();
+		this.autoSave();
+		this.designer.addEvent("queryClose", function(){
+			if (this.autoSaveTimerID) window.clearInterval(this.autoSaveTimerID);
 		}.bind(this));
 	},
     removeStyles: function(from, to){
@@ -189,7 +198,30 @@ MWF.xApplication.process.FormDesigner.Module.Form = MWF.FCForm = new Class({
 		//if( styles.dialogStyle )this.json.dialogStyle = styles.dialogStyle;
 		//if( styles.selectorStyle )this.json.selectorStyle = styles.selectorStyle;
     },
-
+	loadCustomTemplateStyles : function( scriptObject, callback ){
+		// {
+		// 	"type" : "script",
+		// 	"name": script.name,
+		// 	"alias": script.alias,
+		// 	"id": script.id,
+		// 	"appName" : script.appName || script.applicationName,
+		// 	"appId": script.appId,
+		// 	"application": script.application
+		// }
+		this.designer.actions.getScriptByName(  scriptObject.name, scriptObject.application,  function( json ) {
+			debugger;
+			try{
+				var f = eval("(function(){\n return "+json.data.text+"\n})");
+				var j = f();
+				if(callback)callback(j);
+			}catch (e) {
+				this.designer.notice( e.message, "error" )
+			}
+		}.bind(this), function( responseJSON ){
+			this.designer.notice( JSON.parse(responseJSON.responseText).message, "error" )
+			if(callback)callback({});
+		}.bind(this))
+	},
 	loadTemplateStyles : function( file, extendFile, callback ){
 		if( !file ){
 			if (callback) callback({});
@@ -251,22 +283,26 @@ MWF.xApplication.process.FormDesigner.Module.Form = MWF.FCForm = new Class({
     loadStylesList: function(callback){
         //var stylesUrl = "../x_component_process_FormDesigner/Module/Form/template/"+((this.options.mode=="Mobile") ? "mobileStyles": "styles")+".json";
         //var stylesUrl = "../x_component_process_FormDesigner/Module/Form/template/"+((this.options.mode=="Mobile") ? "styles": "styles")+".json";
-		var configUrl = "../x_component_process_FormDesigner/Module/Form/skin/config.json";
-        MWF.getJSON(configUrl,{
-                "onSuccess": function(responseJSON){
-                    this.stylesList = responseJSON;
-                    if (callback) callback(this.stylesList);
-                }.bind(this),
-                "onRequestFailure": function(){
-					this.stylesList = {};
-                    if (callback) callback(this.stylesList);
-                }.bind(this),
-                "onError": function(){
-                    this.stylesList = {};
-                    if (callback) callback(this.stylesList);
-                }.bind(this)
-            }
-        );
+		if( this.stylesList ){
+			callback( this.stylesList )
+		}else{
+			var configUrl = "../x_component_process_FormDesigner/Module/Form/skin/config.json";
+			MWF.getJSON(configUrl,{
+					"onSuccess": function(responseJSON){
+						this.stylesList = responseJSON;
+						if (callback) callback(this.stylesList);
+					}.bind(this),
+					"onRequestFailure": function(){
+						this.stylesList = {};
+						if (callback) callback(this.stylesList);
+					}.bind(this),
+					"onError": function(){
+						this.stylesList = {};
+						if (callback) callback(this.stylesList);
+					}.bind(this)
+				}
+			);
+		}
     },
     autoSave: function(){
         this.autoSaveCheckNode = this.designer.formToolbarNode.getElement("#MWFFormAutoSaveCheck");
@@ -1121,50 +1157,62 @@ MWF.xApplication.process.FormDesigner.Module.Form = MWF.FCForm = new Class({
 			this.treeNode.setTitle(this.json.id);
 			this.node.set("id", this.json.id);
 		}
-        if (name=="formStyleType"){
-
-			var file = (this.stylesList && this.json.formStyleType) ? this.stylesList[this.json.formStyleType].file : null;
-			var extendFile = (this.stylesList && this.json.formStyleType) ? this.stylesList[this.json.formStyleType].extendFile : null;
-			this.loadTemplateStyles( file, extendFile, function( templateStyles ){
-				//this.templateStyles = (this.stylesList && this.json.formStyleType) ? this.stylesList[this.json.formStyleType] : null;
-				this.templateStyles = templateStyles;
-
-				var oldFile, oldExtendFile;
-				if( oldValue && this.stylesList[oldValue] ){
-					oldFile = this.stylesList[oldValue].file;
-					oldExtendFile = this.stylesList[oldValue].extendFile;
+        if (name=="formStyleType" || name=="formStyleCustom" ){
+
+			var loadOldTemplateStyle = function () {
+				if( typeOf(this.currentFormStyleType) === "object" ){ //如果是自定义表单样式
+					this.loadCustomTemplateStyles( this.json.formStyleCustom , function (oldTemplateStyles) {
+						this.json.styleConfig = this.json.formStyleCustom;
+						this.switchTemplateStyles( oldTemplateStyles );
+						this.currentFormStyleType = this.json.formStyleCustom;
+					}.bind(this))
+				}else{
+					var oldFile, oldExtendFile;
+					if( oldValue && this.stylesList[oldValue] ){
+						oldFile = this.stylesList[oldValue].file;
+						oldExtendFile = this.stylesList[oldValue].extendFile;
+					}
+					this.loadTemplateStyles( oldFile, oldExtendFile, function( oldTemplateStyles ){
+						this.json.styleConfig = (this.stylesList && this.json.formStyleType) ? this.stylesList[this.json.formStyleType] : null;
+						this.switchTemplateStyles( oldTemplateStyles );
+						this.currentFormStyleType = this.json.formStyleCustom;
+					}.bind(this))
 				}
-				this.loadTemplateStyles( oldFile, oldExtendFile, function( oldTemplateStyles ){
-					//if (oldValue) {
-					//	var oldTemplateStyles = this.stylesList[oldValue];
-					//	if (oldTemplateStyles){
-					//		if (oldTemplateStyles["form"]) this.clearTemplateStyles(oldTemplateStyles["form"]);
-					//	}
-					//}
+			}.bind(this);
 
-					this.json.styleConfig = (this.stylesList && this.json.formStyleType) ? this.stylesList[this.json.formStyleType] : null;
-
-					if (oldTemplateStyles["form"]) this.clearTemplateStyles(oldTemplateStyles["form"]);
-					if (this.templateStyles["form"]) this.setTemplateStyles(this.templateStyles["form"]);
-
-					this.setAllStyles();
-
-					this.moduleList.each(function(module){
-						if (oldTemplateStyles[module.moduleName]){
-							module.clearTemplateStyles(oldTemplateStyles[module.moduleName]);
-						}
-						module.setStyleTemplate();
-						module.setAllStyles();
-					}.bind(this));
+			if( name=="formStyleCustom" ){
+				this.loadCustomTemplateStyles( this.json.formStyleCustom , function (templateStyles) {
+					this.templateStyles = templateStyles;
+					loadOldTemplateStyle();
 				}.bind(this))
-
-			}.bind(this))
+			}else{
+				var file = (this.stylesList && this.json.formStyleType) ? this.stylesList[this.json.formStyleType].file : null;
+				var extendFile = (this.stylesList && this.json.formStyleType) ? this.stylesList[this.json.formStyleType].extendFile : null;
+				this.loadTemplateStyles( file, extendFile, function( templateStyles ){
+					this.templateStyles = templateStyles;
+					loadOldTemplateStyle();
+				}.bind(this))
+			}
         }
         if (name==="css"){
             this.reloadCss();
         }
 		this._setEditStyle_custom(name, obj, oldValue);
 	},
+	switchTemplateStyles : function( oldTemplateStyles ){
+		if (oldTemplateStyles["form"]) this.clearTemplateStyles(oldTemplateStyles["form"]);
+		if (this.templateStyles["form"]) this.setTemplateStyles(this.templateStyles["form"]);
+
+		this.setAllStyles();
+
+		this.moduleList.each(function(module){
+			if (oldTemplateStyles[module.moduleName]){
+				module.clearTemplateStyles(oldTemplateStyles[module.moduleName]);
+			}
+			module.setStyleTemplate();
+			module.setAllStyles();
+		}.bind(this));
+	},
 
     parseCSS: function(css){
         var rex = /(url\(.*\))/g;

o2web/source/x_component_process_FormDesigner/Module/Form/form.html

@@ -36,12 +36,12 @@
                     }" name="formStyleTypeType" value="custom" text{($.formStyleTypeType=='custom')?'checked':''}/>自定义
                 </td>
             </tr>
-            <tr id="text{$.pid}formStyleTypeTr" style="display: text{($.submitFormType!='custom')?'':'none'}">
+            <tr id="text{$.pid}formStyleTypeTr" style="display: text{($.formStyleTypeType!='custom')?'':'none'}">
                 <td class="editTableValue">
                     <select class="MWFFormStyle" name="formStyleType"></select>
                 </td>
             </tr>
-            <tr id="text{$.pid}formStyleTypeCustomTr" style="display: text{($.submitFormType=='custom')?'':'none'}">
+            <tr id="text{$.pid}formStyleTypeCustomTr" style="display: text{($.formStyleTypeType=='custom')?'':'none'}">
                 <td class="editTableValue">
                    <div class="MWFScriptSelect" name="formStyleCustom"></div>
                 </td>

o2web/source/x_component_process_FormDesigner/Property.js

@@ -1361,21 +1361,28 @@ debugger;
 
     },
     saveScriptSelectItem: function(node, ids){
+	    debugger;
         if (ids[0]){
-            var view = ids[0].data;
+            var script = ids[0].data;
             var data = {
-                "name": view.name,
-                "alias": view.alias,
-                "id": view.id,
-                "appName" : view.appName || view.applicationName || view.query,
-                "appId": view.appId,
-                "application": view.application || view.query
+                "type" : "script",
+                "name": script.name,
+                "alias": script.alias,
+                "id": script.id,
+                "appName" : script.appName || script.applicationName,
+                "appId": script.appId,
+                "application": script.application
             };
-            this.data[node.get("name")] = data;
+
+            var name = node.get("name");
+            var oldValue = this.data[name];
+            this.data[name] = data;
+
+            // this.changeJsonDate(name, data );
+            this.changeData(name, node, oldValue);
         }else{
-            this.data[node.get("name")] = null;
+            // this.data[node.get("name")] = null;
         }
-        // if (this.module._checkView) this.module._checkView();
     },
     removeDutyItem: function(node, item){
         if (item.data.id){