在表单中嵌入视图修改

o2web/source/o2_core/o2/xScript/ViewEnvironment.js

@@ -748,7 +748,7 @@ MWF.xScript.ViewEnvironment = function (ev) {
     //仅前台对象-----------------------------------------
     //form
     this.page = this.form = this.queryView = {
-
+        "getParentEnvironment" : function () { return _form.parentEnvironment; }, //视图嵌入的表单或页面的上下文
         "getViewInfor" : function () { return _form.getViewInfor(); },
         "getPageInfor" : function () { return _form.getPageInfor(); },
         "getPageData" : function () { return _form.getPageData(); },

o2web/source/x_component_process_FormDesigner/Module/View.js

@@ -14,6 +14,9 @@ MWF.xApplication.process.FormDesigner.Module.View = MWF.FCView = new Class({
 		this.path = "/x_component_process_FormDesigner/Module/View/";
 		this.cssPath = "/x_component_process_FormDesigner/Module/View/"+this.options.style+"/css.wcss";
 
+        this.imagePath_default = "/x_component_query_ViewDesigner/$View/";
+        this.imagePath_custom = "/x_component_process_FormDesigner/Module/Actionbar/";
+
 		this._loadCss();
 		this.moduleType = "element";
 		this.moduleName = "view";
@@ -103,6 +106,7 @@ MWF.xApplication.process.FormDesigner.Module.View = MWF.FCView = new Class({
         this.viewNode = this.node.getChildren("div")[1];
         if (this.viewNode){
             this.node.setStyle("background", "transparent");
+            this.actionbarNode = this.viewNode.getChildren("div")[0];
             this.viewTable = this.viewNode.getElement("table").setStyles(this.css.viewTitleTableNode);
             this.viewLine = this.viewTable.getElement("tr").setStyles(this.css.viewTitleLineNode);
             this.viewSelectCell = this.viewLine.getElement("td");
@@ -112,9 +116,13 @@ MWF.xApplication.process.FormDesigner.Module.View = MWF.FCView = new Class({
         }
 	},
     _createViewNode: function(callback){
+
         if (!this.viewNode) this.viewNode = new Element("div", {"styles": this.css.viewNode}).inject(this.node);
+        if( !this.actionbarNode)this.actionbarNode = new Element("div.actionbarNode",{}).inject( this.viewNode, "top" );
+
         this.node.setStyle("background", "transparent");
 
+
         this.viewTable = new Element("table", {
             "styles": this.css.viewTitleTableNode,
             "border": "0px",
@@ -132,6 +140,13 @@ MWF.xApplication.process.FormDesigner.Module.View = MWF.FCView = new Class({
 
         MWF.Actions.get("x_query_assemble_designer").getView(this.json["queryView"].id, function(json){
             var viewData = JSON.decode(json.data.data);
+
+            this.viewData = viewData;
+            if( this.json.actionbar === "show" ){
+                this.actionbarList = [];
+                this._showActionbar();
+            }
+
             var columnList = viewData.selectEntryList || viewData.selectList;
             columnList.each(function(column){
                 if (!column.hideColumn){
@@ -176,6 +191,9 @@ MWF.xApplication.process.FormDesigner.Module.View = MWF.FCView = new Class({
             this.treeNode.setTitle(this.json.id);
             this.node.set("id", this.json.id);
         }
+        if(name=="actionbar"){
+            input.get("value") === "show" ? this._showActionbar() : this._hideActionbar();
+        }
 
         this._setEditStyle_custom(name, input, oldValue);
 
@@ -231,5 +249,80 @@ MWF.xApplication.process.FormDesigner.Module.View = MWF.FCView = new Class({
     _checkTitle: function(){
         if (!this.json["isTitle"]) this.json["isTitle"] = "yes";
         if (this.viewNode) this._setViewNodeTitle();
+    },
+
+    _hideActionbar : function(){
+        if(this.actionbarNode)this.actionbarNode.hide();
+    },
+    _showActionbar : function(){
+	    if( !this.actionbarNode )return;
+        MWF.require("MWF.widget.Toolbar", null, false);
+        this.actionbarNode.show();
+        if( !this.viewData.actionbarList )this.viewData.actionbarList = [];
+        if( !this.actionbarList || this.actionbarList.length == 0 ){
+            this.actionbarNode.empty();
+            if( this.viewData.actionbarList.length ){
+                if( !this.actionbarList )this.actionbarList = [];
+                this.viewData.actionbarList.each( function(json){
+
+                    var toolbarWidget = new MWF.widget.Toolbar(this.actionbarNode, {"style": json.style}, this);
+                    if (json.actionStyles)toolbarWidget.css = json.actionStyles;
+
+                    if( !json.hideSystemTools )this.setToolbars( json.defaultTools, this.actionbarNode, json );
+                    this.setCustomToolbars( json.tools, this.actionbarNode, json );
+
+                    toolbarWidget.load();
+                    this.actionbarList.push( toolbarWidget );
+                }.bind(this));
+            }else{
+
+            }
+        }
+    },
+    setToolbars: function(tools, node, json){
+	    var style = "default";
+        tools.each(function(tool){
+            var actionNode = new Element("div", {
+                "MWFnodetype": tool.type,
+                "MWFButtonImage": this.imagePath_default+""+style+"/actionbar/"+tool.img,
+                "title": tool.title,
+                "MWFButtonAction": tool.action,
+                "MWFButtonText": tool.text
+            }).inject(node);
+            if( this.json.iconOverStyle ){
+                actionNode.set("MWFButtonImageOver" , this.imagePath_default+""+ style+"/actionbar/"+json.iconOverStyle+"/"+tool.img );
+            }
+            // this.systemTools.push(actionNode);
+            // if (tool.sub){
+            //     var subNode = node.getLast();
+            //     this.setToolbars(tool.sub, subNode);
+            // }
+        }.bind(this));
+    },
+    setCustomToolbars: function(tools, node, json){
+        //var style = (this.json.style || "default").indexOf("red") > -1 ? "red" : "blue";
+        var path = "";
+        if( json.customIconStyle ){
+            path = json.customIconStyle+ "/";
+        }
+        var customImageStyle = "default";
+
+        tools.each(function(tool){
+            var actionNode = new Element("div", {
+                "MWFnodetype": tool.type,
+                "MWFButtonImage": this.imagePath_custom+""+customImageStyle +"/custom/"+path+tool.img,
+                "title": tool.title,
+                "MWFButtonAction": tool.action,
+                "MWFButtonText": tool.text
+            }).inject(node);
+            if( this.json.customIconOverStyle ){
+                actionNode.set("MWFButtonImageOver" , this.imagePath_custom+""+customImageStyle +"/custom/"+json.customIconOverStyle+ "/" +tool.img );
+            }
+            // this.customTools.push(actionNode);
+            // if (tool.sub){
+            //     var subNode = node.getLast();
+            //     this.setCustomToolbars(tool.sub, subNode);
+            // }
+        }.bind(this));
     }
 });

o2web/source/x_component_process_FormDesigner/Module/View/view.html

@@ -166,6 +166,13 @@
 					</select>
 				</td>
 			</tr>
+			<tr>
+				<td class="editTableTitle">操作条</td>
+				<td class="editTableValue">
+					<input class="editTableRadio" name="actionbar" text{($.actionbar=='show')?'checked':''} type="radio" value="show"/>显示
+					<input class="editTableRadio" name="actionbar" text{($.actionbar!='show')?'checked':''} type="radio" value="hidden"/>不显示
+				</td>
+			</tr>
 			<!--<tr>-->
 			<!--<td class="editTableTitle">打开文件</td>-->
 			<!--<td class="editTableValue">-->

o2web/source/x_component_query_Query/Viewer.js

@@ -590,11 +590,11 @@ MWF.xApplication.query.Query.Viewer = MWF.QViewer = new Class({
             this.viewTitleLine = new Element("tr", {"styles": this.css.viewTitleLineNode}).inject(this.viewTable);
 
             //if (this.json.select==="single" || this.json.select==="multi") {
-                this.selectTitleCell = new Element("td", {
-                    "styles": this.css.viewTitleCellNode
-                }).inject(this.viewTitleLine);
-                this.selectTitleCell.setStyle("width", "10px");
-                if (this.json.titleStyles) this.selectTitleCell.setStyles(this.json.titleStyles);
+            this.selectTitleCell = new Element("td", {
+                "styles": this.css.viewTitleCellNode
+            }).inject(this.viewTitleLine);
+            this.selectTitleCell.setStyle("width", "10px");
+            if (this.json.titleStyles) this.selectTitleCell.setStyles(this.json.titleStyles);
             //}
 
             //序号
@@ -859,9 +859,9 @@ MWF.xApplication.query.Query.Viewer = MWF.QViewer = new Class({
     loadData: function(){
         if (this.gridJson.length){
             // if( !this.options.paging ){
-                this.gridJson.each(function(line, i){
-                    this.items.push(new MWF.xApplication.query.Query.Viewer.Item(this, line, null, i));
-                }.bind(this));
+            this.gridJson.each(function(line, i){
+                this.items.push(new MWF.xApplication.query.Query.Viewer.Item(this, line, null, i));
+            }.bind(this));
             // }else{
             //     this.loadPaging();
             // }
@@ -1103,9 +1103,9 @@ MWF.xApplication.query.Query.Viewer.Item = new Class({
         }
 
         //if (this.view.json.select==="single" || this.view.json.select==="multi"){
-            this.selectTd = new Element("td", {"styles": this.css.viewContentTdNode}).inject(this.node);
-            this.selectTd.setStyles({"cursor": "pointer"});
-            if (this.view.json.itemStyles) this.selectTd.setStyles(this.view.json.itemStyles);
+        this.selectTd = new Element("td", {"styles": this.css.viewContentTdNode}).inject(this.node);
+        this.selectTd.setStyles({"cursor": "pointer"});
+        if (this.view.json.itemStyles) this.selectTd.setStyles(this.view.json.itemStyles);
         //}
 
         //序号
@@ -1120,22 +1120,22 @@ MWF.xApplication.query.Query.Viewer.Item = new Class({
             var cell = this.data.data[k];
             if (cell === undefined) cell = "";
             //if (cell){
-                if (this.view.hideColumns.indexOf(k)===-1){
-                    var td = new Element("td", {"styles": this.css.viewContentTdNode}).inject(this.node);
-                    if (k!== this.view.viewJson.group.column){
-                        //var v = (this.view.entries[k].code) ? MWF.Macro.exec(this.view.entries[k].code, {"value": cell, "gridData": this.view.gridJson, "data": this.view.viewData, "entry": this.data}) : cell;
-                        var v = cell;
-                        if (c.isHtml){
-                            td.set("html", v);
-                        }else{
-                            td.set("text", v);
-                        }
-                    }
-                    if (this.view.openColumns.indexOf(k)!==-1){
-                        this.setOpenWork(td, c)
+            if (this.view.hideColumns.indexOf(k)===-1){
+                var td = new Element("td", {"styles": this.css.viewContentTdNode}).inject(this.node);
+                if (k!== this.view.viewJson.group.column){
+                    //var v = (this.view.entries[k].code) ? MWF.Macro.exec(this.view.entries[k].code, {"value": cell, "gridData": this.view.gridJson, "data": this.view.viewData, "entry": this.data}) : cell;
+                    var v = cell;
+                    if (c.isHtml){
+                        td.set("html", v);
+                    }else{
+                        td.set("text", v);
                     }
-                    if (this.view.json.itemStyles) td.setStyles(this.view.json.itemStyles);
                 }
+                if (this.view.openColumns.indexOf(k)!==-1){
+                    this.setOpenWork(td, c)
+                }
+                if (this.view.json.itemStyles) td.setStyles(this.view.json.itemStyles);
+            }
             //}
         }.bind(this));
 
@@ -1403,8 +1403,8 @@ MWF.xApplication.query.Query.Viewer.ItemCategory = new Class({
 
         this.node = new Element("tr", {"styles": this.css.viewContentTrNode}).inject(this.view.viewTable);
         //if (this.view.json.select==="single" || this.view.json.select==="multi"){
-            this.selectTd = new Element("td", {"styles": this.css.viewContentCategoryTdNode}).inject(this.node);
-            if (this.view.json.itemStyles) this.selectTd.setStyles(this.view.json.itemStyles);
+        this.selectTd = new Element("td", {"styles": this.css.viewContentCategoryTdNode}).inject(this.node);
+        if (this.view.json.itemStyles) this.selectTd.setStyles(this.view.json.itemStyles);
         //}
         this.categoryTd = new Element("td", {
             "styles": this.css.viewContentCategoryTdNode,
@@ -1434,9 +1434,9 @@ MWF.xApplication.query.Query.Viewer.ItemCategory = new Class({
     },
     setEvent: function(){
         //if (this.selectTd){
-            this.node.addEvents({
-                "click": function(){this.expandOrCollapse();}.bind(this)
-            });
+        this.node.addEvents({
+            "click": function(){this.expandOrCollapse();}.bind(this)
+        });
         //}
     },
     expandOrCollapse: function(){

o2web/source/x_component_query_ViewDesigner/$View/view.html

@@ -46,12 +46,12 @@
                 <td class="editTableTitle">每页行数:</td>
                 <td class="editTableValue"><input type="number" name="pageSize" value="text{$.pageSize || 20}" class="editTableInput"/></td>
             </tr>
-            <tr>
-                <td class="editTableTitle">视图样式:</td>
-                <td class="editTableValue">
-                    <select class="MWFViewStyle" name="viewStyleType"></select>
-                </td>
-            </tr>
+<!--            <tr>-->
+<!--                <td class="editTableTitle">视图样式:</td>-->
+<!--                <td class="editTableValue">-->
+<!--                    <select class="MWFViewStyle" name="viewStyleType"></select>-->
+<!--                </td>-->
+<!--            </tr>-->
             <tr>
                 <td class="editTableTitle">隐藏操作条:</td>
                 <td class="editTableValue">
@@ -134,6 +134,7 @@
                 </td>
             </tr>
         </table>
+
         <table width="100%" border="0" cellpadding="5" cellspacing="0" class="editTable">
             <tr>
                 <td class="editTableTitle">权限:</td>
@@ -582,6 +583,14 @@
         </div>
     </div>
 
+<!--    <div title="样式"  class="MWFTab">-->
+<!--        <div class="MWFMaplist" name="tableStyles" collapse="true" title="表格样式"></div>-->
+<!--        <div class="MWFMaplist" name="titleTdStyles" collapse="true" title="标题单元格样式"></div>-->
+<!--        <div class="MWFMaplist" name="contentTdStyles" collapse="true" title="内容单元格样式"></div>-->
+<!--        <div class="MWFMaplist" name="contentTdOverStyles" collapse="true" title="内容单元格鼠标over事件样式"></div>-->
+<!--        <div class="MWFMaplist" name="contentTdSelectedStyles" collapse="true" title="内容单元格选中样式"></div>-->
+<!--    </div>-->
+
     <div title="事件"  class="MWFTab">
         <div class="MWFEventsArea" name="data.events"></div>
     </div>

o2web/source/x_component_query_ViewDesigner/Property.js

@@ -66,6 +66,7 @@ MWF.xApplication.query.ViewDesigner.Property = MWF.FVProperty = new Class({
                     this.loadEventsEditor();
                     this.loadActionStylesArea();
                     this.loadActionArea();
+                    this.loadStylesList();
                 }
             }.bind(this));
         }else{
@@ -830,6 +831,27 @@ MWF.xApplication.query.ViewDesigner.Property = MWF.FVProperty = new Class({
 
         }.bind(this));
 
+    },
+    loadStylesList: function(){
+        var styleSelNodes = this.propertyContent.getElements(".MWFViewStyle");
+        styleSelNodes.each(function(node){
+            debugger;
+            if (this.module.stylesList){
+                if (!this.data.data.viewStyleType) this.data.data.viewStyleType = "default";
+                // var mode = ( this.form.options.mode || "" ).toLowerCase() === "mobile" ? "mobile" : "pc";
+                Object.each(this.module.stylesList, function(s, key){
+                    // if( s.mode.contains( mode ) ){
+                        new Element("option", {
+                            "text": s.name,
+                            "value": key,
+                            "selected": ((!this.data.data.viewStyleType && key=="default") || (this.data.data.viewStyleType==key))
+                        }).inject(node)
+                    // }
+                }.bind(this));
+            }else{
+                node.getParent("tr").setStyle("display", "none");
+            }
+        }.bind(this));
     }
     //initWhereEntryData: function(){
     //    if (!this.data.data.restrictWhereEntry) this.data.data.restrictWhereEntry = {

o2web/source/x_component_query_ViewDesigner/View.js

@@ -121,16 +121,20 @@ MWF.xApplication.query.ViewDesigner.View = new Class({
 
         this.domListNode = new Element("div", {"styles": {"overflow": "hidden"}}).inject(this.designer.propertyDomArea);
 
-        this.loadActionbar();
+        this.loadTemplateStyle( function () {
 
-        this.loadView();
+            this.loadActionbar();
 
-        this.selected();
-        this.setEvent();
+            this.loadView();
+
+            this.selected();
+            this.setEvent();
+
+            //if (this.options.showTab) this.page.showTabIm();
+            this.setViewWidth();
 
-        //if (this.options.showTab) this.page.showTabIm();
-        this.setViewWidth();
-        this.designer.addEvent("resize", this.setViewWidth.bind(this));
+            this.designer.addEvent("resize", this.setViewWidth.bind(this));
+        }.bind(this))
     },
     setEvent: function(){
         this.areaNode.addEvent("click", this.selected.bind(this));
@@ -619,6 +623,38 @@ MWF.xApplication.query.ViewDesigner.View = new Class({
                 this.viewContentTableNode.getElements(".viewContentCheckboxTd").setStyle("display","none");
             }
         }
+        if (name=="data.viewStyleType"){
+
+            var file = (this.stylesList && this.json.data.viewStyleType) ? this.stylesList[this.json.data.viewStyleType].file : null;
+            var extendFile = (this.stylesList && this.json.data.viewStyleType) ? this.stylesList[this.json.data.viewStyleType].extendFile : null;
+            this.loadTemplateStyles( file, extendFile, function( templateStyles ){
+                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 ){
+
+                    this.json.data.styleConfig = (this.stylesList && this.json.data.viewStyleType) ? this.stylesList[this.json.data.viewStyleType] : 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));
+                }.bind(this))
+
+            }.bind(this))
+        }
     },
 
     saveAs: function(){
@@ -679,6 +715,147 @@ MWF.xApplication.query.ViewDesigner.View = new Class({
             this.designer.notice(this.designer.lp.notice.saveAs_success, "success", this.node, {"x": "left", "y": "bottom"});
             if (callback) callback();
         }.bind(this));
+    },
+
+
+    loadTemplateStyle : function( callback ){
+        this.loadStylesList(function(){
+            var oldStyleValue = "";
+            if ((!this.json.data.viewStyleType) || !this.stylesList[this.json.data.viewStyleType]) this.json.data.viewStyleType="default";
+            // if (this.options.mode=="Mobile"){
+            //     if (this.json.viewStyleType != "defaultMobile"){
+            //         var styles = this.stylesList[this.json.viewStyleType];
+            //         if( !styles || typeOf(styles.mode)!=="array" || !styles.mode.contains( "mobile" ) ){
+            //             oldStyleValue = this.json.viewStyleType;
+            //             this.json.viewStyleType = "defaultMobile";
+            //         }
+            //     }
+            // }
+
+            this.loadTemplateStyles( this.stylesList[this.json.data.viewStyleType].file, this.stylesList[this.json.data.viewStyleType].extendFile,
+                function( templateStyles ){
+                    this.templateStyles = templateStyles;
+                    // this.loadDomModules();
+
+                    if (this.json.data.viewStyleType && this.templateStyles && this.templateStyles["form"]){
+                        this.setTemplateStyles(this.templateStyles["form"]);
+                    }
+
+                    // this.setCustomStyles();
+                    this.node.setProperties(this.json.data.properties);
+
+                    if(callback)callback();
+
+                    // this.setNodeEvents();
+
+                    // if (this.options.mode=="Mobile"){
+                    //     if (oldStyleValue) this._setEditStyle("viewStyleType", null, oldStyleValue);
+                    // }
+                }.bind(this)
+            );
+        }.bind(this));
+    },
+    removeStyles: function(from, to){
+        if (this.json.data[to]){
+            Object.each(from, function(style, key){
+                if (this.json.data[to][key] && this.json.data[to][key]==style){
+                    delete this.json.data[to][key];
+                }
+            }.bind(this));
+        }
+    },
+    copyStyles: function(from, to){
+        if (!this.json.data[to]) this.json.data[to] = {};
+        Object.each(from, function(style, key){
+            if (!this.json.data[to][key]) this.json.data[to][key] = style;
+        }.bind(this));
+    },
+    clearTemplateStyles: function(styles){
+        if (styles){
+            if (styles.styles) this.removeStyles(styles.styles, "styles");
+            if (styles.properties) this.removeStyles(styles.properties, "properties");
+        }
+    },
+    setTemplateStyles: function(styles){
+        if (styles.styles) this.copyStyles(styles.styles, "styles");
+        if (styles.properties) this.copyStyles(styles.properties, "properties");
+    },
+
+    loadTemplateStyles : function( file, extendFile, callback ){
+        if( !file ){
+            if (callback) callback({});
+            return;
+        }
+        this.templateStylesList = this.templateStylesList || {};
+        if( this.templateStylesList[file] ){
+            if (callback) callback(this.templateStylesList[file]);
+            return;
+        }
+        this.loadTemplateStyleFile( file, function( json_file ){
+            this.loadTemplateExtendStyleFile( extendFile, function( json_extend ){
+                this.templateStylesList[file] = Object.merge( json_file, json_extend );
+                if (callback) callback(this.templateStylesList[file]);
+            }.bind(this))
+        }.bind(this))
+
+    },
+    loadTemplateStyleFile : function(file, callback ){
+        if( !file ){
+            if (callback) callback({});
+            return;
+        }
+        var stylesUrl = "/x_component_query_ViewDesigner/$View/skin/"+file;
+        MWF.getJSON(stylesUrl,{
+                "onSuccess": function(responseJSON){
+                    //this.templateStylesList[file] = responseJSON;
+                    if (callback) callback(responseJSON);
+                }.bind(this),
+                "onRequestFailure": function(){
+                    if (callback) callback({});
+                }.bind(this),
+                "onError": function(){
+                    if (callback) callback({});
+                }.bind(this)
+            }
+        );
+    },
+    loadTemplateExtendStyleFile : function(extendFile, callback ){
+        if( !extendFile ){
+            if (callback) callback({});
+            return;
+        }
+        var stylesUrl = "/x_component_query_ViewDesigner/$View/skin/"+extendFile;
+        MWF.getJSON(stylesUrl,{
+                "onSuccess": function(responseJSON){
+                    //this.templateStylesList[file] = responseJSON;
+                    if (callback) callback(responseJSON);
+                }.bind(this),
+                "onRequestFailure": function(){
+                    if (callback) callback({});
+                }.bind(this),
+                "onError": function(){
+                    if (callback) callback({});
+                }.bind(this)
+            }
+        );
+    },
+    loadStylesList: function(callback){
+        var configUrl = "/x_component_query_ViewDesigner/$View/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)
+            }
+        );
     }
 
 });