Merge branch 'feature/Process.form_style_custom' into 'develop'

Merge of feature/【流程管理】增加使用脚本自定义表单样式的功能 to develop

See merge request o2oa/o2oa!1096

o2web/source/x_component_Selector/FormStyle.js

@@ -0,0 +1,271 @@
+MWF.xApplication.Selector = MWF.xApplication.Selector || {};
+MWF.xDesktop.requireApp("Selector", "Person", null, false);
+MWF.xApplication.Selector.FormStyle = new Class({
+    Extends: MWF.xApplication.Selector.Person,
+    options: {
+        "style": "default",
+        "count": 0,
+        "title": MWF.xApplication.Selector.LP.selectFormStyle,
+        "values": [],
+        "names": [],
+        "expand": false,
+        "mode" : "pc",
+        "forceSearchInItem" : true
+    },
+    loadSelectItems: function(addToNext){
+        var stylesUrl = "../x_component_process_FormDesigner/Module/Form/skin/config.json";
+        MWF.getJSON(stylesUrl,{
+                "onSuccess": function(json){
+                    debugger;
+                    var subItemList = [];
+                    Object.each(json, function(s, key){
+                        if( s.mode.contains( this.options.mode ) ){
+                            subItemList.push({
+                                name : s.name,
+                                id : key
+                            });
+
+                        }
+                    }.bind(this));
+                    var category = this._newItemCategory({
+                        name : "系统样式",
+                        id : "stystem",
+                        subItemList : subItemList
+                    }, this, this.itemAreaNode);
+
+                    var json = {};
+                    var appJs = {};
+                    var array = [];
+                    o2.Actions.load("x_processplatform_assemble_designer").ScriptAction.listNext("(0)", 500, function (scriptJson) {
+                        o2.Actions.load("x_processplatform_assemble_designer").ApplicationAction.list(function (appJson) {
+                            appJson.data.each( function (app) {
+                                appJs[ app.id ] = app;
+                            });
+                            scriptJson.data.each( function (script) {
+                                if( !json[script.application] ){
+                                    json[script.application] = appJs[ script.application ];
+                                    json[script.application].scriptList = [];
+                                }
+                                script.appName = appJs[ script.application ].name;
+                                script.appId = script.application;
+                                script.type = "script";
+                                json[script.application].scriptList.push( script )
+                            }.bind(this));
+                            for( var application in json ){
+                                if( json[application].scriptList && json[application].scriptList.length ){
+                                    array.push( json[application] );
+                                }
+                            }
+
+                            var category = this._newItemCategory({
+                                name : "自定义样式（脚本）",
+                                id : "script",
+                                applicationList : array
+                            }, this, this.itemAreaNode);
+                        }.bind(this))
+                    }.bind(this));
+                }.bind(this)
+            }
+        );
+        // this.processAction.listApplications(function(json){
+        //     json.data.each(function(data){
+        //         if (!data.scriptList){
+        //             this.designerAction.listScript(data.id, function(scriptJson){
+        //                 data.scriptList = scriptJson.data;
+        //             }.bind(this), null, false);
+        //         }
+        //         if (data.scriptList && data.scriptList.length){
+        //             var category = this._newItemCategory(data, this, this.itemAreaNode);
+        //             data.scriptList.each(function(d){
+        //                 d.applicationName = data.name;
+        //                 var item = this._newItem(d, this, category.children);
+        //                 this.items.push(item);
+        //             }.bind(this));
+        //         }
+        //     }.bind(this));
+        // }.bind(this));
+    },
+    _scrollEvent: function(y){
+        return true;
+    },
+    _getChildrenItemIds: function(data){
+        return data.scriptList || data.subItemList || data.applicationList;
+    },
+    _newItemCategory: function(data, selector, item, level){
+        return new MWF.xApplication.Selector.FormStyle.ItemCategory(data, selector, item, level)
+    },
+
+    _listItemByKey: function(callback, failure, key){
+        return false;
+    },
+    _getItem: function(callback, failure, id, async){
+        this.queryAction.getTable(function(json){
+            if (callback) callback.apply(this, [json]);
+        }.bind(this), failure, ((typeOf(id)==="string") ? id : id.id), async);
+    },
+    _newItemSelected: function(data, selector, item){
+        return new MWF.xApplication.Selector.FormStyle.ItemSelected(data, selector, item)
+    },
+    _listItemByPinyin: function(callback, failure, key){
+        return false;
+    },
+    _newItem: function(data, selector, container, level){
+        return new MWF.xApplication.Selector.FormStyle.Item(data, selector, container, level);
+    }
+});
+MWF.xApplication.Selector.FormStyle.Item = new Class({
+    Extends: MWF.xApplication.Selector.Person.Item,
+    _getShowName: function(){
+        return this.data.name;
+    },
+    _setIcon: function(){
+        this.iconNode.setStyle("background-image", "url("+"../x_component_Selector/$Selector/default/icon/attr.png)");
+    },
+    loadSubItem: function(){
+        return false;
+    },
+    checkSelectedSingle: function(){
+        var selectedItem = this.selector.options.values.filter(function(item, index){
+            if (typeOf(item)==="object"){
+                if( this.data.id && item.id ){
+                    return this.data.id === item.id;
+                }
+                //return (this.data.id === item.id) || (this.data.name === item.name) ;
+            }
+            //if (typeOf(item)==="object") return (this.data.id === item.id) || (this.data.name === item.name) ;
+            if (typeOf(item)==="string") return (this.data.id === item) || (this.data.name === item);
+            return false;
+        }.bind(this));
+        if (selectedItem.length){
+            this.selectedSingle();
+        }
+    },
+    checkSelected: function(){
+
+        var selectedItem = this.selector.selectedItems.filter(function(item, index){
+            if( item.data.id && this.data.id){
+                return item.data.id === this.data.id;
+            }
+            //return (item.data.id === this.data.id) || (item.data.name === this.data.name);
+        }.bind(this));
+        if (selectedItem.length){
+            //selectedItem[0].item = this;
+            selectedItem[0].addItem(this);
+            this.selectedItem = selectedItem[0];
+            this.setSelected();
+        }
+    }
+});
+
+MWF.xApplication.Selector.FormStyle.ItemSelected = new Class({
+    Extends: MWF.xApplication.Selector.Person.ItemSelected,
+    _getShowName: function(){
+        return this.data.name;
+    },
+    _setIcon: function(){
+        this.iconNode.setStyle("background-image", "url("+"../x_component_Selector/$Selector/default/icon/attr.png)");
+    },
+    check: function(){
+        if (this.selector.items.length){
+            var items = this.selector.items.filter(function(item, index){
+                //return (item.data.id === this.data.id) || (item.data.name === this.data.name);
+                if( item.data.id && this.data.id){
+                    return item.data.id === this.data.id;
+                }
+            }.bind(this));
+            this.items = items;
+            if (items.length){
+                items.each(function(item){
+                    item.selectedItem = this;
+                    item.setSelected();
+                }.bind(this));
+            }
+        }
+    }
+});
+
+MWF.xApplication.Selector.FormStyle.ItemCategory = new Class({
+    Extends: MWF.xApplication.Selector.Person.ItemCategory,
+    clickItem: function (callback) {
+        if (this._hasChild() ) {
+            var firstLoaded = !this.loaded;
+            this.loadSub(function () {
+                if (firstLoaded && this._hasChild() ) {
+                    if (!this.selector.isFlatCategory) {
+                        this.children.setStyles({"display": "block", "height": "auto"});
+                        this.actionNode.setStyles(this.selector.css.selectorItemCategoryActionNode_expand);
+                        this.isExpand = true;
+                    }
+                    // this.checkSelectAll();
+                } else {
+                    var display = this.children.getStyle("display");
+                    if (display === "none") {
+                        // this.selector.fireEvent("expand", [this] );
+                        this.children.setStyles({"display": "block", "height": "auto"});
+                        this.actionNode.setStyles(this.selector.css.selectorItemCategoryActionNode_expand);
+                        this.isExpand = true;
+                    } else {
+                        // this.selector.fireEvent("collapse", [this] );
+                        this.children.setStyles({"display": "none", "height": "0px"});
+                        this.actionNode.setStyles(this.selector.css.selectorItemCategoryActionNode_collapse);
+                        this.isExpand = false;
+                    }
+                }
+                if (callback) callback();
+            }.bind(this));
+        }
+    },
+    loadSub: function (callback) {
+        if (!this.loaded) {
+            if( this.data.subItemList ){
+                this.data.subItemList.each(function (subItem, index) {
+                    var item = this.selector._newItem(subItem, this.selector, this.children, this.level + 1, this);
+                    this.selector.items.push(item);
+                    if(this.subItems)this.subItems.push( item );
+                }.bind(this));
+            }
+            if( this.data.scriptList ){
+                this.data.scriptList.each(function (subItem, index) {
+                    var item = this.selector._newItem(subItem, this.selector, this.children, this.level + 1, this);
+                    this.selector.items.push(item);
+                    if(this.subItems)this.subItems.push( item );
+                }.bind(this));
+            }
+            if ( this.data.applicationList ) {
+                this.data.applicationList.each(function (subCategory, index) {
+                    var category = this.selector._newItemCategory(subCategory, this.selector, this.children, this.level + 1, this);
+                    this.subCategorys.push( category );
+                }.bind(this));
+            }
+            this.loaded = true;
+            if (callback) callback();
+        } else {
+            if (callback) callback();
+        }
+    },
+    _getShowName: function(){
+        return this.data.name;
+    },
+    _getTtiteText: function () {
+        return this.data.name;
+    },
+    createNode: function(){
+        this.node = new Element("div", {
+            "styles": this.selector.css.selectorItemCategory_department
+        }).inject(this.container);
+    },
+    _setIcon: function(){
+        this.iconNode.setStyle("background-image", "url("+"../x_component_Selector/$Selector/default/icon/applicationicon.png)");
+    },
+    _hasChild: function(){
+        return ( this.data.scriptList && this.data.scriptList.length ) ||
+            ( this.data.subItemList && this.data.subItemList.length) ||
+            ( this.data.applicationList && this.data.applicationList.length);
+    },
+    afterLoad: function(){
+        if ( this._hasChild() ){
+            this.clickItem();
+        }
+    },
+    check: function(){}
+});

o2web/source/x_component_Selector/Script.js

@@ -0,0 +1,178 @@
+MWF.xApplication.Selector = MWF.xApplication.Selector || {};
+MWF.xDesktop.requireApp("Selector", "Person", null, false);
+MWF.xApplication.Selector.Script = new Class({
+    Extends: MWF.xApplication.Selector.Person,
+    options: {
+        "style": "default",
+        "count": 0,
+        "title": MWF.xApplication.Selector.LP.selectScript,
+        "values": [],
+        "names": [],
+        "expand": false,
+        "forceSearchInItem" : true
+    },
+    loadSelectItems: function(addToNext){
+        var json = {};
+        var appJs = {};
+        o2.Actions.load("x_processplatform_assemble_designer").ScriptAction.listNext("(0)", 500, function (scriptJson) {
+            o2.Actions.load("x_processplatform_assemble_designer").ApplicationAction.list(function (appJson) {
+                appJson.data.each( function (app) {
+                    appJs[ app.id ] = app;
+                });
+                scriptJson.data.each( function (script) {
+                    if( !json[script.application] ){
+                        json[script.application] = appJs[ script.application ];
+                        json[script.application].scriptList = [];
+                    }
+                    script.appName = appJs[ script.application ].name;
+                    script.appId = script.application;
+                    json[script.application].scriptList.push( script )
+                }.bind(this));
+                for( var application in json ){
+                    var category = this._newItemCategory(json[application], this, this.itemAreaNode);
+                    json[application].scriptList.each(function(d){
+                        var item = this._newItem(d, this, category.children);
+                        this.items.push(item);
+                    }.bind(this));
+                }
+            }.bind(this))
+        }.bind(this));
+        // this.processAction.listApplications(function(json){
+        //     json.data.each(function(data){
+        //         if (!data.scriptList){
+        //             this.designerAction.listScript(data.id, function(scriptJson){
+        //                 data.scriptList = scriptJson.data;
+        //             }.bind(this), null, false);
+        //         }
+        //         if (data.scriptList && data.scriptList.length){
+        //             var category = this._newItemCategory(data, this, this.itemAreaNode);
+        //             data.scriptList.each(function(d){
+        //                 d.applicationName = data.name;
+        //                 var item = this._newItem(d, this, category.children);
+        //                 this.items.push(item);
+        //             }.bind(this));
+        //         }
+        //     }.bind(this));
+        // }.bind(this));
+    },
+    _scrollEvent: function(y){
+        return true;
+    },
+    _getChildrenItemIds: function(data){
+        return data.scriptList || [];
+    },
+    _newItemCategory: function(data, selector, item, level){
+        return new MWF.xApplication.Selector.Script.ItemCategory(data, selector, item, level)
+    },
+
+    _listItemByKey: function(callback, failure, key){
+        return false;
+    },
+    _getItem: function(callback, failure, id, async){
+        this.queryAction.getTable(function(json){
+            if (callback) callback.apply(this, [json]);
+        }.bind(this), failure, ((typeOf(id)==="string") ? id : id.id), async);
+    },
+    _newItemSelected: function(data, selector, item){
+        return new MWF.xApplication.Selector.Script.ItemSelected(data, selector, item)
+    },
+    _listItemByPinyin: function(callback, failure, key){
+        return false;
+    },
+    _newItem: function(data, selector, container, level){
+        return new MWF.xApplication.Selector.Script.Item(data, selector, container, level);
+    }
+});
+MWF.xApplication.Selector.Script.Item = new Class({
+    Extends: MWF.xApplication.Selector.Person.Item,
+    _getShowName: function(){
+        return this.data.name;
+    },
+    _setIcon: function(){
+        this.iconNode.setStyle("background-image", "url("+"../x_component_Selector/$Selector/default/icon/attr.png)");
+    },
+    loadSubItem: function(){
+        return false;
+    },
+    checkSelectedSingle: function(){
+        var selectedItem = this.selector.options.values.filter(function(item, index){
+            if (typeOf(item)==="object"){
+                if( this.data.id && item.id ){
+                    return this.data.id === item.id;
+                }
+                //return (this.data.id === item.id) || (this.data.name === item.name) ;
+            }
+            //if (typeOf(item)==="object") return (this.data.id === item.id) || (this.data.name === item.name) ;
+            if (typeOf(item)==="string") return (this.data.id === item) || (this.data.name === item);
+            return false;
+        }.bind(this));
+        if (selectedItem.length){
+            this.selectedSingle();
+        }
+    },
+    checkSelected: function(){
+
+        var selectedItem = this.selector.selectedItems.filter(function(item, index){
+            if( item.data.id && this.data.id){
+                return item.data.id === this.data.id;
+            }else{
+                return item.data.name === this.data.name;
+            }
+            //return (item.data.id === this.data.id) || (item.data.name === this.data.name);
+        }.bind(this));
+        if (selectedItem.length){
+            //selectedItem[0].item = this;
+            selectedItem[0].addItem(this);
+            this.selectedItem = selectedItem[0];
+            this.setSelected();
+        }
+    }
+});
+
+MWF.xApplication.Selector.Script.ItemSelected = new Class({
+    Extends: MWF.xApplication.Selector.Person.ItemSelected,
+    _getShowName: function(){
+        return this.data.name;
+    },
+    _setIcon: function(){
+        this.iconNode.setStyle("background-image", "url("+"../x_component_Selector/$Selector/default/icon/attr.png)");
+    },
+    check: function(){
+        if (this.selector.items.length){
+            var items = this.selector.items.filter(function(item, index){
+                //return (item.data.id === this.data.id) || (item.data.name === this.data.name);
+                if( item.data.id && this.data.id){
+                    return item.data.id === this.data.id;
+                }else{
+                    return item.data.name === this.data.name;
+                }
+            }.bind(this));
+            this.items = items;
+            if (items.length){
+                items.each(function(item){
+                    item.selectedItem = this;
+                    item.setSelected();
+                }.bind(this));
+            }
+        }
+    }
+});
+
+MWF.xApplication.Selector.Script.ItemCategory = new Class({
+    Extends: MWF.xApplication.Selector.Person.ItemCategory,
+    _getShowName: function(){
+        return this.data.name;
+    },
+    createNode: function(){
+        this.node = new Element("div", {
+            "styles": this.selector.css.selectorItemCategory_department
+        }).inject(this.container);
+    },
+    _setIcon: function(){
+        this.iconNode.setStyle("background-image", "url("+"../x_component_Selector/$Selector/default/icon/applicationicon.png)");
+    },
+    _hasChild: function(){
+        return (this.data.scriptList && this.data.scriptList.length);
+    },
+    check: function(){}
+});

o2web/source/x_component_Selector/lp/zh-cn.js

@@ -13,9 +13,11 @@ MWF.xApplication.Selector.LP = MWF.SelectorLP = {
     "selectProcess": "选择流程",
     "selectView": "选择视图",
     "selectTable": "选择数据表",
+    "selectFormStyle" : "选择表单样式",
     "selectCMSApplication": "选择内容管理应用",
     "selectCMSCategory": "选择内容管理栏目",
     "noSelectableItemText" : "无待选项",
+    "selectScript" : "选择脚本",
 
     "searchDescription" : "搜索内容",
 

o2web/source/x_component_process_FormDesigner/Module/Form.js

@@ -106,44 +106,58 @@ 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";
+			var formStyleType = this.json.formStyleType;
+			if( typeOf( formStyleType ) === "object" && formStyleType.type === "script"  ){ //如果是自定义表单样式
+				this.loadCustomTemplateStyles( formStyleType, function ( templateStyles ) {
+					this._load( templateStyles );
+				}.bind(this))
+			}else {
+				if( typeOf( formStyleType ) === "object" )formStyleType = formStyleType.id;
+
+				var oldStyleValue = "";
+				if ((!formStyleType) || !this.stylesList[formStyleType]){
+					this.json.formStyleType = "blue-simple";
+					formStyleType = "blue-simple";
+				}
+				if (this.options.mode == "Mobile") {
+					if ( formStyleType != "defaultMobile") {
+						var styles = this.stylesList[formStyleType];
+						if (!styles || typeOf(styles.mode) !== "array" || !styles.mode.contains("mobile")) {
+							oldStyleValue = formStyleType;
+							this.json.formStyleType = "defaultMobile";
+							formStyleType = "defaultMobile";
+						}
 					}
 				}
-			}
 
-			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[formStyleType].file, this.stylesList[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 +203,33 @@ 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 ) {
+			try{
+				var f = eval("(function(){\n return "+json.data.text+"\n})");
+				var j = f();
+				if( typeOf(j) !== "object" ){
+					this.designer.notice( MWF.APPFD.LP.notValidJson, "error" );
+				}else{
+					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 +291,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 +1165,64 @@ 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;
-				}
-				this.loadTemplateStyles( oldFile, oldExtendFile, function( oldTemplateStyles ){
-					//if (oldValue) {
-					//	var oldTemplateStyles = this.stylesList[oldValue];
-					//	if (oldTemplateStyles){
-					//		if (oldTemplateStyles["form"]) this.clearTemplateStyles(oldTemplateStyles["form"]);
-					//	}
-					//}
+        if ( name=="formStyleType" ){
 
-					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));
+			var loadOldTemplateStyle = function () {
+				if( typeOf(oldValue) === "object" && oldValue.type === "script" ){ //如果原来是自定义表单样式
+					this.loadCustomTemplateStyles( oldValue , function (oldTemplateStyles) {
+						this.switchTemplateStyles( oldTemplateStyles );
+					}.bind(this))
+				}else{
+					var oldFile, oldExtendFile;
+					if( typeOf(oldValue) === "object" )oldValue === oldValue.id;
+					if( oldValue && this.stylesList[oldValue] ){
+						oldFile = this.stylesList[oldValue].file;
+						oldExtendFile = this.stylesList[oldValue].extendFile;
+					}
+					this.loadTemplateStyles( oldFile, oldExtendFile, function( oldTemplateStyles ){
+						this.switchTemplateStyles( oldTemplateStyles );
+					}.bind(this))
+				}
+			}.bind(this);
+
+			var formStyleType = this.json.formStyleType;
+			if( typeOf(formStyleType) === "object" && formStyleType.type === "script" ){
+				this.loadCustomTemplateStyles( formStyleType , function (templateStyles) {
+					this.templateStyles = templateStyles;
+					loadOldTemplateStyle();
+					this.json.styleConfig = formStyleType;
 				}.bind(this))
-
-			}.bind(this))
+			}else{
+				if( typeOf(formStyleType) === "object" )formStyleType = formStyleType.id;
+
+				var file = (this.stylesList && formStyleType) ? this.stylesList[formStyleType].file : null;
+				var extendFile = (this.stylesList && formStyleType) ? this.stylesList[formStyleType].extendFile : null;
+				this.loadTemplateStyles( file, extendFile, function( templateStyles ){
+					this.templateStyles = templateStyles;
+					loadOldTemplateStyle();
+					this.json.styleConfig = (this.stylesList && formStyleType) ? this.stylesList[formStyleType] : null;
+				}.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

@@ -23,10 +23,36 @@
                     <!--<select class="" name="titleField"></select>-->
                 <!--</td>-->
             <!--</tr>-->
+<!--            <tr>-->
+<!--                <td class="editTableTitle" rowspan="2">表单样式:</td>-->
+<!--                <td class="editTableValue">-->
+<!--                    <input type="radio" onclick="if (this.checked) {-->
+<!--                        $('text{$.pid}formStyleTypeTr').setStyle('display', '');-->
+<!--                        $('text{$.pid}formStyleTypeCustomTr').setStyle('display', 'none');-->
+<!--                    }" name="formStyleTypeRadio" value="default" text{(typeOf($.currentFormStyle)!='object' )?'checked':''}/>系统-->
+<!--                    <input type="radio" onclick="if (this.checked) {-->
+<!--                        $('text{$.pid}formStyleTypeTr').setStyle('display', 'none');-->
+<!--                        $('text{$.pid}formStyleTypeCustomTr').setStyle('display', '');-->
+<!--                    }" name="formStyleTypeRadio" value="custom" text{(typeOf($.currentFormStyle)=='object')?'checked':''}/>自定义-->
+<!--                </td>-->
+<!--            </tr>-->
+<!--            <tr id="text{$.pid}formStyleTypeCustomTr" style="display: text{(typeOf($.currentFormStyle)=='object')?'':'none'}">-->
+<!--                <td class="editTableValue">-->
+<!--                    <div class="MWFScriptSelect" name="formStyleCustom"></div>-->
+<!--                    <div class="MWFScriptSelectRefresh"></div>-->
+<!--                </td>-->
+<!--            </tr>-->
+<!--            <tr id="text{$.pid}formStyleTypeTr" style="display: text{(typeOf($.currentFormStyle)!='object')?'':'none'}">-->
+<!--                <td class="editTableValue">-->
+<!--                    <select class="MWFFormStyle" name="formStyleType"></select>-->
+<!--                </td>-->
+<!--            </tr>-->
             <tr>
                 <td class="editTableTitle">表单样式:</td>
                 <td class="editTableValue">
-                    <select class="MWFFormStyle" name="formStyleType"></select>
+                    <!--                    <select class="MWFFormStyle" name="formStyleType"></select>-->
+                    <div class="MWFFormStyleSelect" name="formStyleType"></div>
+                    <div class="MWFScriptSelectRefresh"></div>
                 </td>
             </tr>
             <tr>

o2web/source/x_component_process_FormDesigner/Property.js

@@ -1135,6 +1135,7 @@ debugger;
         }.bind(this));
     },
     loadStylesList: function(){
+        var _self = this;
         var styleSelNodes = this.propertyContent.getElements(".MWFFormStyle");
         styleSelNodes.each(function(node){
             if (this.module.form.stylesList){
@@ -1152,8 +1153,39 @@ debugger;
             }else{
                 node.getParent("tr").setStyle("display", "none");
             }
+
+            var refreshNode = new Element("div", {"styles": this.form.css.propertyRefreshFormNode}).inject(node, "after");
+            refreshNode.addEvent("click", function(e){
+                _self.changeData(this.get("name"), this );
+            }.bind(node));
         }.bind(this));
     },
+    // loadStylesList: function(){
+	//     var _self = this;
+    //     var styleSelNodes = this.propertyContent.getElements(".MWFFormStyle");
+    //     styleSelNodes.each(function(node){
+    //         if (this.module.form.stylesList){
+    //             if (!this.data.formStyleType) this.data.formStyleType = "default";
+    //             var mode = ( this.form.options.mode || "" ).toLowerCase() === "mobile" ? "mobile" : "pc";
+    //             Object.each(this.module.form.stylesList, function(s, key){
+    //                 if( s.mode.contains( mode ) ){
+    //                     new Element("option", {
+    //                         "text": s.name,
+    //                         "value": key,
+    //                         "selected": ((!this.data.formStyleType && key=="default") || (this.data.formStyleType==key))
+    //                     }).inject(node)
+    //                 }
+    //             }.bind(this));
+    //         }else{
+    //             node.getParent("tr").setStyle("display", "none");
+    //         }
+    //
+    //         var refreshNode = new Element("div", {"styles": this.form.css.propertyRefreshFormNode}).inject(node, "after");
+    //         refreshNode.addEvent("click", function(e){
+    //             _self.changeData(this.get("name"), this );
+    //         }.bind(node));
+    //     }.bind(this));
+    // },
     loadDivTemplateType: function(){
         var nodes = this.propertyContent.getElements(".MWFDivTemplate");
         if (nodes.length){
@@ -1210,6 +1242,8 @@ debugger;
         var querystatNodes = this.propertyContent.getElements(".MWFQueryStatSelect");
         var fileNodes = this.propertyContent.getElements(".MWFImageFileSelect");
         var processFileNodes = this.propertyContent.getElements(".MWFProcessImageFileSelect");
+        var scriptNodes = this.propertyContent.getElements(".MWFScriptSelect");
+        var formStyleNodes = this.propertyContent.getElements(".MWFFormStyleSelect");
 
         MWF.xDesktop.requireApp("process.ProcessDesigner", "widget.PersonSelector", function(){
             personIdentityNodes.each(function(node){
@@ -1278,6 +1312,97 @@ debugger;
                 });
             }.bind(this));
 
+            scriptNodes.each(function(node){
+                new MWF.xApplication.process.ProcessDesigner.widget.PersonSelector(node, this.form.designer, {
+                    "type": "Script",
+                    "count": 1,
+                    "names": [this.data[node.get("name")]],
+                    "onChange": function(ids){
+                        this.saveScriptSelectItem(node, ids);
+                    }.bind(this)
+                });
+            }.bind(this));
+
+            var _self = this;
+            formStyleNodes.each(function(node){
+                debugger;
+                var data = this.data[node.get("name")];
+                if( typeOf( data ) === "string" ){
+                    for( var key in this.module.form.stylesList ){
+                        var s = this.module.form.stylesList[key];
+                        if( ((!data && key=="default") || (data==key)) ){
+                            data = {
+                                name : s.name,
+                                id : key
+                            };
+                            break;
+                        }
+                    }
+                }
+                new MWF.xApplication.process.ProcessDesigner.widget.PersonSelector(node, this.form.designer, {
+                    "type": "FormStyle",
+                    "count": 1,
+                    "names": [data],
+                    "selectorOptions" : {
+                        "mode" : ( this.form.options.mode || "" ).toLowerCase() === "mobile" ? "mobile" : "pc"
+                    },
+                    "validFun" : function (ids) {
+                        var flag = true;
+                        if( ids.length === 0 ){
+                            this.designer.notice(MWF.APPFD.LP.mustSelectFormStyle, "error");
+                            flag = false;
+                        }else if( ids[0].data.type === "script" ){
+                            this.designer.actions.getScriptByName(  ids[0].data.name, ids[0].data.application,  function( json ) {
+                                debugger;
+                                try{
+                                    var f = eval("(function(){\n return "+json.data.text+"\n})");
+                                    var j = f();
+                                    if( typeOf(j) !== "object" ){
+                                        this.designer.notice( MWF.APPFD.LP.notValidJson, "error" );
+                                        flag = false;
+                                    }
+                                }catch (e) {
+                                    this.designer.notice( MWF.APPFD.LP.notValidJson +"："+ e.message, "error" );
+                                    flag = false;
+                                }
+                            }.bind(this), function () {
+                                flag = false;
+                            }, false);
+                        }
+                        return flag;
+                    }.bind(this),
+                    "onChange": function(ids){
+                        var d = ids[0].data;
+                        var data;
+                        if( d.type === "script" ){
+                            data = {
+                                "type" : "script",
+                                "name": d.name,
+                                "alias": d.alias,
+                                "id": d.id,
+                                "appName" : d.appName || d.applicationName,
+                                "appId": d.appId,
+                                "application": d.application
+                            };
+                        }else{
+                            data = d.id;
+                        }
+                        var name = node.get("name");
+                        var oldValue = this.data[name];
+                        this.data[name] = data;
+                        this.changeData(name, node, oldValue);
+                    }.bind(this)
+                });
+
+                var next = node.getNext();
+                if( next && next.get("class") === "MWFScriptSelectRefresh" ){
+                    var refreshNode = new Element("div", {"styles": this.form.css.propertyRefreshFormNode}).inject(next);
+                    refreshNode.addEvent("click", function(e){
+                        _self.changeData(this.get("name"), this );
+                    }.bind(node));
+                }
+            }.bind(this));
+
             fileNodes.each(function(node){
                 var d = this.data[node.get("name")];
                 var data = d || {};
@@ -1349,6 +1474,30 @@ debugger;
     },
     removeViewItem: function(node, item){
 
+    },
+    saveScriptSelectItem: function(node, ids){
+	    debugger;
+        if (ids[0]){
+            var script = ids[0].data;
+            var data = {
+                "type" : "script",
+                "name": script.name,
+                "alias": script.alias,
+                "id": script.id,
+                "appName" : script.appName || script.applicationName,
+                "appId": script.appId,
+                "application": script.application
+            };
+
+            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;
+        }
     },
     removeDutyItem: function(node, item){
         if (item.data.id){

o2web/source/x_component_process_FormDesigner/lp/zh-cn.js

@@ -145,6 +145,8 @@ MWF.xApplication.process.FormDesigner.LP = {
     "save": "保存",
     "cancel": "取消",
     "newCategory": "新分类",
+    "mustSelectFormStyle" : "必须选择一种表单样式",
+    "notValidJson" : "错误的json格式",
 
     "imageClipper" : "图片编辑",
 

o2web/source/x_component_process_ProcessDesigner/widget/PersonSelector.js

@@ -87,6 +87,9 @@ MWF.xApplication.process.ProcessDesigner.widget.PersonSelector = new Class({
 
                             if (this.options.type.toLowerCase()==="portalfile") this.identitys.push(new MWF.widget.O2File(data, this.node));
                             if (this.options.type.toLowerCase()==="processfile") this.identitys.push(new MWF.widget.O2File(data, this.node));
+
+                            if (this.options.type.toLowerCase()==="script") this.identitys.push(new MWF.widget.O2Other(data, this.node));
+                            if (this.options.type.toLowerCase()==="formstyle") this.identitys.push(new MWF.widget.O2Other(data, this.node));
                         }.bind(this));
                     }
                 }.bind(this));
@@ -125,6 +128,9 @@ MWF.xApplication.process.ProcessDesigner.widget.PersonSelector = new Class({
                 "isImage": this.options.isImage,
                 "include" : include,
                 "onComplete": function(items){
+                    if( typeOf(this.options.validFun)==="function" && !this.options.validFun( items ) ){
+                        return;
+                    }
                     this.identitys = [];
                     if (this.options.type.toLowerCase()!=="duty") this.node.empty();
                     MWF.require("MWF.widget.O2Identity", function(){
@@ -147,6 +153,9 @@ MWF.xApplication.process.ProcessDesigner.widget.PersonSelector = new Class({
                             if (this.options.type.toLowerCase()==="dutyname") this.identitys.push(new MWF.widget.O2Duty(item.data, this.node));
                             if (this.options.type.toLowerCase()==="portalfile") this.identitys.push(new MWF.widget.O2File(item.data, this.node));
                             if (this.options.type.toLowerCase()==="processfile") this.identitys.push(new MWF.widget.O2File(item.data, this.node));
+
+                            if (this.options.type.toLowerCase()==="script") this.identitys.push(new MWF.widget.O2Other(item.data, this.node));
+                            if (this.options.type.toLowerCase()==="formstyle") this.identitys.push(new MWF.widget.O2Other(item.data, this.node));
                         }.bind(this));
                         if (this.options.type.toLowerCase()==="duty") {
                             items.each(function(item){
@@ -158,6 +167,9 @@ MWF.xApplication.process.ProcessDesigner.widget.PersonSelector = new Class({
                 }.bind(this)
             };
             if( this.options.title )options.title = this.options.title;
+            if( this.options.selectorOptions ){
+                options = Object.merge(options, this.options.selectorOptions );
+            }
             var selector = new MWF.O2Selector(this.app.content, options);
         }.bind(this));
     }

o2web/source/x_component_process_Xform/Htmleditor.js

@@ -37,7 +37,7 @@ MWF.xApplication.process.Xform.Htmleditor = MWF.APPHtmleditor =  new Class({
             var config = Object.clone(this.json.editorProperties);
             if (this.json.config){
                 if (this.json.config.code){
-                    var obj = MWF.Macro.exec(this.json.config.code, this);
+                    var obj = this.form.Macro.exec(this.json.config.code, this);
                     Object.each(obj, function(v, k){
                         config[k] = v;
                     });