Skip to content

o2oa
o2oa

浙江兰德纵横网络技术股份有限公司 / o2oa

通知 338
Star 10
Fork 6
o2oa
o2oa

体验新版 GitCode，发现更多精彩内容 >>

提交 2ca95cc0 编写于 作者: NoSubject's avatar NoSubject
1 浏览文件
操作

增加VUE-Element组件

上级 35c6d5bb
展开全部 隐藏空白更改
内联 并排
Showing with 16186 addition and 125 deletion
o2web/source/o2_core/o2.js
浏览文件 @ 2ca95cc0
......@@ -494,7 +494,9 @@ if (window.Promise && !Promise.any){
"JSBeautifier_html": ["../o2_lib/JSBeautifier/beautify-html.js"],
"JSONTemplate": ["../o2_lib/mootools/plugin/Template.js"],
"kity": ["../o2_lib/kityminder/kity/kity.js"],
"kityminder": ["../o2_lib/kityminder/core/dist/kityminder.core.js"]
"kityminder": ["../o2_lib/kityminder/core/dist/kityminder.core.js"],
"vue": ["../o2_lib/vue/vue.js"],
"elementui": ["../o2_lib/vue/element/index.js"]
};
var _loaded = {};
var _loadedCss = {};
......
o2web/source/o2_core/o2/widget/Common.js
浏览文件 @ 2ca95cc0
......@@ -55,11 +55,11 @@ o2.widget.Common = new Class({
};
};
o2.require("o2.widget.ScrollBar", function(){
new o2.widget.ScrollBar(node, {
var scrollBar = new o2.widget.ScrollBar(node, {
"style": style,
"offset": offset
});
if (callback) callback();
if (callback) callback(scrollBar);
});
return false;
}
......
o2web/source/o2_lib/vue/element/index.css 0 → 100644
浏览文件 @ 2ca95cc0
因为 它太大了无法显示 source diff 。你可以改为 查看blob。
o2web/source/o2_lib/vue/element/index.js 0 → 100644
浏览文件 @ 2ca95cc0
此差异已折叠。
o2web/source/o2_lib/vue/vue.js 0 → 100644
浏览文件 @ 2ca95cc0
此差异已折叠。
o2web/source/x_component_process_FormDesigner/$Main/bottom/css.wcss
浏览文件 @ 2ca95cc0
......@@ -127,7 +127,10 @@
"height": "42px",
"background-position": "center center",
"background-repeat": "no-repeat",
"float": "left"
"float": "left",
"font-size": "24px",
"line-height": "40px",
"text-align": "center"
},
"toolbarToolTextNode": {
"margin-left": "46px",
......@@ -360,4 +363,4 @@
"border": "1px solid #999",
"background": "url("+"../x_component_process_FormDesigner/$Main/bottom/editCancel_bg.png) no-repeat"
},
}
\ No newline at end of file
}
o2web/source/x_component_process_FormDesigner/$Main/bottom/tools-element.json 0 → 100644
浏览文件 @ 2ca95cc0
{
"elcontainer": {
"fontIcon": "el-icon-s-grid",
"text": MWF.xApplication.process.FormDesigner.LP.modules.el_container,
"className": "Elcontainer"
},
"elinput": {
"fontIcon": "el-icon-edit",
"text": MWF.xApplication.process.FormDesigner.LP.modules.el_input,
"className": "Elinput"
},
"elnumber": {
"fontIcon": "el-icon-edit-outline",
"text": MWF.xApplication.process.FormDesigner.LP.modules.el_number,
"className": "Elnumber"
},
"elicon": {
"fontIcon": "el-icon-picture-outline-round",
"text": MWF.xApplication.process.FormDesigner.LP.modules.el_icon,
"className": "Elicon"
},
"elbutton": {
"fontIcon": "el-icon-thumb",
"text": MWF.xApplication.process.FormDesigner.LP.modules.el_button,
"className": "Elbutton"
},
"elradio": {
"fontIcon": "el-icon-success",
"text": MWF.xApplication.process.FormDesigner.LP.modules.el_radio,
"className": "Elradio"
},
"elcheckbox": {
"fontIcon": "el-icon-circle-plus",
"text": MWF.xApplication.process.FormDesigner.LP.modules.el_checkbox,
"className": "Elcheckbox"
},
"elselect": {
"fontIcon": "el-icon-arrow-down",
"text": MWF.xApplication.process.FormDesigner.LP.modules.el_select,
"className": "Elselect"
},
"elcascader": {
"fontIcon": "el-icon-caret-bottom",
"text": MWF.xApplication.process.FormDesigner.LP.modules.el_cascader,
"className": "Elcascader"
},
"elswitch": {
"fontIcon": "el-icon-open",
"text": MWF.xApplication.process.FormDesigner.LP.modules.el_switch,
"className": "Elswitch"
},
"elslider": {
"fontIcon": "el-icon-s-operation",
"text": MWF.xApplication.process.FormDesigner.LP.modules.el_slider,
"className": "Elslider"
},
}
o2web/source/x_component_process_FormDesigner/$Main/bottom/toolsGroup.json 0 → 100644
浏览文件 @ 2ca95cc0
[
{
"name": "default",
"json": "tools.json",
"text": MWF.xApplication.process.FormDesigner.LP.modules.group_system,
},
{
"name": "element",
"json": "tools-element.json",
"text": MWF.xApplication.process.FormDesigner.LP.modules.group_element,
"className": "Textfield"
}
]
o2web/source/x_component_process_FormDesigner/$Main/default/css.wcss
浏览文件 @ 2ca95cc0
......@@ -15,7 +15,7 @@
"-moz-user-select": "text"
},
"formNode": {
"margin-left": "141px",
"margin-left": "150px",
"margin-right": "401px",
"border-right": "1px solid #505050",
"border-left": "1px solid #505050",
......@@ -50,17 +50,33 @@
"float": "right",
"cursor": "pointer"
},
"toolbarGroupContentNode": {
"overflow": "hidden"
},
"toolbarContentNode": {
"background-color": "#DDD",
"background-color": "#FFFFFF",
"border-radius": "0px",
"margin": "2px",
"padding-right": "4px",
"overflow": "hidden"
},
"toolbarGroupNode": {
"overflow": "hidden"
},
"toolbarGroupTitleNode": {
"height": "28px",
"overflow": "hidden",
"line-height": "28px",
"font-size": "12px",
"padding": "0 10px",
"font-weight": "bold",
"border-bottom": "1px solid #EEEEEE",
"cursor": "pointer"
},
"toolbarToolNode": {
"margin-top": "3px",
"background": "#DDD",
"border": "2px solid #DDD",
"background": "#FFFFFF",
"border": "2px solid #FFFFFF",
"height": "42px",
"color": "#000",
"cursor": "move",
......@@ -125,7 +141,10 @@
"height": "42px",
"background-position": "center center",
"background-repeat": "no-repeat",
"float": "left"
"float": "left",
"font-size": "24px",
"line-height": "40px",
"text-align": "center"
},
"toolbarToolTextNode": {
"margin-left": "46px",
......
o2web/source/x_component_process_FormDesigner/$Main/default/tools-element.json 0 → 100644
浏览文件 @ 2ca95cc0
{
"elcontainer": {
"fontIcon": "el-icon-s-grid",
"text": MWF.xApplication.process.FormDesigner.LP.modules.el_container,
"className": "Elcontainer"
},
"elinput": {
"fontIcon": "el-icon-edit",
"text": MWF.xApplication.process.FormDesigner.LP.modules.el_input,
"className": "Elinput"
},
"elnumber": {
"fontIcon": "el-icon-edit-outline",
"text": MWF.xApplication.process.FormDesigner.LP.modules.el_number,
"className": "Elnumber"
},
"elicon": {
"fontIcon": "el-icon-picture-outline-round",
"text": MWF.xApplication.process.FormDesigner.LP.modules.el_icon,
"className": "Elicon"
},
"elbutton": {
"fontIcon": "el-icon-thumb",
"text": MWF.xApplication.process.FormDesigner.LP.modules.el_button,
"className": "Elbutton"
},
"elradio": {
"fontIcon": "el-icon-success",
"text": MWF.xApplication.process.FormDesigner.LP.modules.el_radio,
"className": "Elradio"
},
"elcheckbox": {
"fontIcon": "el-icon-circle-plus",
"text": MWF.xApplication.process.FormDesigner.LP.modules.el_checkbox,
"className": "Elcheckbox"
},
"elselect": {
"fontIcon": "el-icon-arrow-down",
"text": MWF.xApplication.process.FormDesigner.LP.modules.el_select,
"className": "Elselect"
},
"elcascader": {
"fontIcon": "el-icon-caret-bottom",
"text": MWF.xApplication.process.FormDesigner.LP.modules.el_cascader,
"className": "Elcascader"
},
"elswitch": {
"fontIcon": "el-icon-open",
"text": MWF.xApplication.process.FormDesigner.LP.modules.el_switch,
"className": "Elswitch"
},
"elslider": {
"fontIcon": "el-icon-s-operation",
"text": MWF.xApplication.process.FormDesigner.LP.modules.el_slider,
"className": "Elslider"
},
}
o2web/source/x_component_process_FormDesigner/$Main/default/toolsGroup.json 0 → 100644
浏览文件 @ 2ca95cc0
[
{
"name": "default",
"json": "tools.json",
"text": MWF.xApplication.process.FormDesigner.LP.modules.group_system,
},
{
"name": "element",
"json": "tools-element.json",
"text": MWF.xApplication.process.FormDesigner.LP.modules.group_element,
"className": "Textfield"
}
]
o2web/source/x_component_process_FormDesigner/Main.js
浏览文件 @ 2ca95cc0
......@@ -231,26 +231,20 @@ MWF.xApplication.process.FormDesigner.Main = new Class({
this.loadToolbar();
this.loadFormNode();
this.loadProperty();
this.loadTools();
this.resizeNode();
this.addEvent("resize", this.resizeNode.bind(this));
this.loadTools(function(){
this.resizeNode();
this.addEvent("resize", this.resizeNode.bind(this));
}.bind(this));
this.loadForm();
if (this.toolbarContentNode){
this.setScrollBar(this.toolbarContentNode, null, {
"V": {"x": 0, "y": 0},
"H": {"x": 0, "y": 0}
});
//this.setScrollBar(this.propertyDomScrollArea, "form_property", {
// "V": {"x": 0, "y": 0},
// "H": {"x": 0, "y": 0}
//});
MWF.require("MWF.widget.ScrollBar", function(){
new MWF.widget.ScrollBar(this.propertyDomScrollArea, {
"style":"default", "where": "before", "distance": 30, "friction": 4, "indent": false, "axis": {"x": false, "y": true}
});
}.bind(this));
}
MWF.require("MWF.widget.ScrollBar", function(){
new MWF.widget.ScrollBar(this.propertyDomScrollArea, {
"style":"default", "where": "before", "distance": 30, "friction": 4, "indent": false, "axis": {"x": false, "y": true}
});
}.bind(this));
this.checkSidebars();
},
checkSidebars: function(){
......@@ -276,6 +270,7 @@ MWF.xApplication.process.FormDesigner.Main = new Class({
this.toolsData = null;
this.toolbarMode = "all";
this.tools = [];
this.toolGroups = [];
this.toolbarDecrease = 0;
this.designNode = null;
......@@ -311,16 +306,35 @@ MWF.xApplication.process.FormDesigner.Main = new Class({
}.bind(this)
}
}).inject(this.toolbarNode);
this.toolbarContentNode = new Element("div", {
"styles": this.css.toolbarContentNode,
"events": {
"selectstart": function(e){
e.preventDefault();
e.stopPropagation();
}
}
}).inject(this.toolbarNode);
this.toolbarGroupContentNode = new Element("div", {"styles": this.css.toolbarGroupContentNode}).inject(this.toolbarNode);
this.toolbarGroupContentNode.addEvent("selectstart", function(e){
e.preventDefault();
e.stopPropagation();
});
// this.toolbarContentNode = new Element("div", {
// "styles": this.css.toolbarContentNode,
// "events": {
// "selectstart": function(e){
// e.preventDefault();
// e.stopPropagation();
// }
// }
// }).inject(this.toolbarNode);
//
// if (this.toolbarContentNode){
// this.setScrollBar(this.toolbarContentNode, null, {
// "V": {"x": 0, "y": 0},
// "H": {"x": 0, "y": 0}
// });
// MWF.require("MWF.widget.ScrollBar", function(){
// new MWF.widget.ScrollBar(this.propertyDomScrollArea, {
// "style":"default", "where": "before", "distance": 30, "friction": 4, "indent": false, "axis": {"x": false, "y": true}
// });
// }.bind(this));
// }
},
switchToolbarMode: function(){
if (this.toolbarMode=="all"){
......@@ -981,89 +995,134 @@ MWF.xApplication.process.FormDesigner.Main = new Class({
},
//loadTools------------------------------
loadTools: function(){
var designer = this;
this.getTools(function(){
Object.each(this.toolsData, function(value, key){
var toolNode = new Element("div", {
"styles": this.css.toolbarToolNode,
"title": value.text,
"events": {
"mouseover": function(e){
try {
this.setStyles(designer.css.toolbarToolNodeOver);
}catch(e){
this.setStyles(designer.css.toolbarToolNodeOverCSS2);
};
},
"mouseout": function(e){
try {
this.setStyles(designer.css.toolbarToolNode);
}catch(e){};
},
"mousedown": function(e){
try {
this.setStyles(designer.css.toolbarToolNodeDown);
}catch(e){
this.setStyles(designer.css.toolbarToolNodeDownCSS2);
};
},
"mouseup": function(e){
try {
this.setStyles(designer.css.toolbarToolNodeUp);
}catch(e){
this.setStyles(designer.css.toolbarToolNodeUpCSS2);
};
}
}
}).inject(this.toolbarContentNode);
toolNode.store("toolClass", value.className);
var iconNode = new Element("div", {
"styles": this.css.toolbarToolIconNode
}).inject(toolNode);
iconNode.setStyle("background-image", "url("+this.path+this.options.style+"/icon/"+value.icon+")");
var textNode = new Element("div", {
"styles": this.css.toolbarToolTextNode,
"text": value.text
});
textNode.inject(toolNode);
// var designer = this;
toolNode.addEvent("mousedown", function(e){
var className = this.retrieve("toolClass");
designer.form.createModule(className, e);
});
this.tools.push(toolNode);
}.bind(this));
}.bind(this));
},
getTools: function(callback){
loadTools: function(callback){
o2.loadCss("../o2_lib/vue/element/index.css");
this.getGroups(function(){
this.toolsGroupData.forEach(function(o){
//var o = this.toolsGroupData[key];
this.toolGroups.push(new MWF.xApplication.process.FormDesigner.ToolsGroup(o, this));
}, this);
if (callback) callback();
}.bind(this));
},
getGroups: function(callback){
if (this.toolsGroupData){
if (callback) callback();
}else{
var toolsGroupDataUrl = this.path+this.options.style+"/toolsGroup.json";
o2.JSON.get(toolsGroupDataUrl, function(responseJSON){
this.toolsGroupData = responseJSON;
if (callback) callback();
}.bind(this));
}
},
if (this.toolsData){
if (callback) callback();
}else{
var toolsDataUrl = this.path+this.options.style+"/tools.json";
var r = new Request.JSON({
url: toolsDataUrl,
secure: false,
async: false,
method: "get",
noCache: true,
onSuccess: function(responseJSON, responseText){
this.toolsData = responseJSON;
if (callback) callback();
}.bind(this),
onError: function(text, error){
this.notice("request tools data error: "+error, "error");
}.bind(this)
});
r.send();
}
},
// loadTools1: function(){
// var designer = this;
//
// this.toolbarContentNode = new Element("div", {
// "styles": this.css.toolbarContentNode,
// }).inject(this.toolbarGroupContentNode);
//
//
//
//
// if (this.toolbarContentNode){
// this.setScrollBar(this.toolbarContentNode, null, {
// "V": {"x": 0, "y": 0},
// "H": {"x": 0, "y": 0}
// });
// MWF.require("MWF.widget.ScrollBar", function(){
// new MWF.widget.ScrollBar(this.propertyDomScrollArea, {
// "style":"default", "where": "before", "distance": 30, "friction": 4, "indent": false, "axis": {"x": false, "y": true}
// });
// }.bind(this));
// }
//
//
// this.getTools(function(){
// Object.each(this.toolsData, function(value, key){
// var toolNode = new Element("div", {
// "styles": this.css.toolbarToolNode,
// "title": value.text,
// "events": {
// "mouseover": function(e){
// try {
// this.setStyles(designer.css.toolbarToolNodeOver);
// }catch(e){
// this.setStyles(designer.css.toolbarToolNodeOverCSS2);
// };
// },
// "mouseout": function(e){
// try {
// this.setStyles(designer.css.toolbarToolNode);
// }catch(e){};
// },
// "mousedown": function(e){
// try {
// this.setStyles(designer.css.toolbarToolNodeDown);
// }catch(e){
// this.setStyles(designer.css.toolbarToolNodeDownCSS2);
// };
// },
// "mouseup": function(e){
// try {
// this.setStyles(designer.css.toolbarToolNodeUp);
// }catch(e){
// this.setStyles(designer.css.toolbarToolNodeUpCSS2);
// };
// }
// }
// }).inject(this.toolbarContentNode);
// toolNode.store("toolClass", value.className);
//
// var iconNode = new Element("div", {
// "styles": this.css.toolbarToolIconNode
// }).inject(toolNode);
// iconNode.setStyle("background-image", "url("+this.path+this.options.style+"/icon/"+value.icon+")");
//
// var textNode = new Element("div", {
// "styles": this.css.toolbarToolTextNode,
// "text": value.text
// });
// textNode.inject(toolNode);
//
// // var designer = this;
// toolNode.addEvent("mousedown", function(e){
//
// var className = this.retrieve("toolClass");
// designer.form.createModule(className, e);
// });
//
// this.tools.push(toolNode);
// }.bind(this));
// }.bind(this));
// },
// getTools: function(callback){
//
// if (this.toolsData){
// if (callback) callback();
// }else{
// var toolsDataUrl = this.path+this.options.style+"/tools.json";
// var r = new Request.JSON({
// url: toolsDataUrl,
// secure: false,
// async: false,
// method: "get",
// noCache: true,
// onSuccess: function(responseJSON, responseText){
// this.toolsData = responseJSON;
// if (callback) callback();
// }.bind(this),
// onError: function(text, error){
// this.notice("request tools data error: "+error, "error");
// }.bind(this)
// });
// r.send();
// }
// },
//resizeNode------------------------------------------------
resizeNodeLeftRight: function(){
......@@ -1101,7 +1160,17 @@ MWF.xApplication.process.FormDesigner.Main = new Class({
y = titleSize.y+titleMarginTop+titleMarginBottom+titlePaddingTop+titlePaddingBottom;
y = nodeSize.y-y;
this.toolbarContentNode.setStyle("height", ""+y+"px");
this.toolbarGroupContentNode.setStyle("height", ""+y+"px");
var groupHeight = 0;
this.toolGroups.each(function(g){
groupHeight += g.toolbarGroupTitleNode.getSize().y;
});
var contentHeight = y-groupHeight-5;
this.toolGroups.each(function(g){
g.setContentHeight(contentHeight);
//g.toolbarContentNode.setStyle("height", ""+contentHeight+"px");
});
titleSize = this.propertyTitleNode.getSize();
......@@ -1153,7 +1222,15 @@ MWF.xApplication.process.FormDesigner.Main = new Class({
y = titleSize.y+titleMarginTop+titleMarginBottom+titlePaddingTop+titlePaddingBottom;
y = nodeSize.y-y;
this.toolbarContentNode.setStyle("height", ""+y+"px");
this.toolbarGroupContentNode.setStyle("height", ""+y+"px");
var groupHeight = 0;
this.toolGroups.each(function(g){
groupHeight += g.toolbarGroupTitleNode.getSize().y;
});
var contentHeight = y-groupHeight-5;
this.toolGroups.each(function(g){
g.setContentHeight(contentHeight);
});
......@@ -1834,3 +1911,173 @@ MWF.xApplication.process.FormDesigner.Main = new Class({
}
}
});
MWF.xApplication.process.FormDesigner.ToolsGroup = new Class({
Implements: [Events],
initialize: function(data, app){
this.data = data;
this.app = app;
this.css = this.app.css;
this.tools = [];
this.load();
},
load: function(){
this.toolbarGroupNode = new Element("div", {
"styles": this.css.toolbarGroupNode,
}).inject(this.app.toolbarGroupContentNode);
this.toolbarGroupTitleNode = new Element("div", {
"class": "mainColor_bg",
"styles": this.css.toolbarGroupTitleNode,
"text": this.data.text,
"events": {
"click": this.show.bind(this)
}
}).inject(this.toolbarGroupNode);
this.toolbarContentNode = new Element("div", {
"styles": this.css.toolbarContentNode,
}).inject(this.toolbarGroupNode);
this.loadTools();
if (this.toolbarContentNode){
this.app.setScrollBar(this.toolbarContentNode, null, {
"V": {"x": 0, "y": 0},
"H": {"x": 0, "y": 0}
}, function(scrollBar){
this.scrollBar = scrollBar;
}.bind(this));
}
this.toolbarContentNode.setStyle("height", "0px");
this.toolbarContentNode.hide();
},
setContentHeight: function(height){
debugger;
this.height = height;
if (this.isShow){
this.toolbarContentNode.setStyle("height", ""+this.height+"px");
}
},
show: function(){
if (this.app.currentToolGroup != this){
if (this.app.currentToolGroup) this.app.currentToolGroup.hide();
if (!this.morph){
this.morph = new Fx.Morph(this.toolbarContentNode, {
"duration": "100",
transition: Fx.Transitions.Sine.easeOut
});
}
this.toolbarContentNode.show();
this.morph.start({"height": [0, this.height]}).chain(function(){
if (this.scrollBar && this.scrollBar.scrollVAreaNode) this.scrollBar.scrollVAreaNode.show();
this.app.currentToolGroup = this;
this.isShow = true;
}.bind(this));
}
},
hide: function(){
if (this.app.currentToolGroup==this) this.app.currentToolGroup = null;
if (!this.morph){
this.morph = new Fx.Morph(this.toolbarContentNode, {
"duration": "100",
transition: Fx.Transitions.Sine.easeOut
});
}
this.isShow = false;
if (this.scrollBar && this.scrollBar.scrollVAreaNode) this.scrollBar.scrollVAreaNode.hide();
this.morph.start({
"height": [this.height, 0]
}).chain(function(){
this.toolbarContentNode.hide();
}.bind(this));
},
loadTools: function(){
var designer = this.app;
var group = this;
this.getTools(function(){
Object.each(this.toolsData, function(value, key){
var toolNode = new Element("div", {
"styles": this.css.toolbarToolNode,
"title": value.text,
"events": {
"mouseover": function(e){
try {
this.setStyles(designer.css.toolbarToolNodeOver);
}catch(e){
this.setStyles(designer.css.toolbarToolNodeOverCSS2);
};
},
"mouseout": function(e){
try {
this.setStyles(designer.css.toolbarToolNode);
}catch(e){};
},
"mousedown": function(e){
try {
this.setStyles(designer.css.toolbarToolNodeDown);
}catch(e){
this.setStyles(designer.css.toolbarToolNodeDownCSS2);
};
},
"mouseup": function(e){
try {
this.setStyles(designer.css.toolbarToolNodeUp);
}catch(e){
this.setStyles(designer.css.toolbarToolNodeUpCSS2);
};
}
}
}).inject(this.toolbarContentNode);
toolNode.store("toolClass", value.className);
var iconNode = new Element("div", {
"styles": this.css.toolbarToolIconNode
}).inject(toolNode);
if (value.icon) iconNode.setStyle("background-image", "url("+this.app.path+this.app.options.style+"/icon/"+value.icon+")");
if (value.fontIcon){
iconNode.addClass("mainColor_color");
iconNode.set("html", "<i class=\""+value.fontIcon+"\"></i>");
}
var textNode = new Element("div", {
"styles": this.css.toolbarToolTextNode,
"text": value.text
});
textNode.inject(toolNode);
// var designer = this;
toolNode.addEvent("mousedown", function(e){
var className = this.retrieve("toolClass");
designer.form.createModule(className, e, group.data.name);
});
this.tools.push(toolNode);
}.bind(this));
if (this.data.name==="default") this.show();
}.bind(this));
},
getTools: function(callback){
if (this.toolsData){
if (callback) callback();
}else{
var toolsDataUrl = this.app.path+this.app.options.style+"/"+this.data.json;
o2.JSON.get(toolsDataUrl, function(responseJSON){
this.toolsData = responseJSON;
if (!this.app.toolsData){
this.app.toolsData = this.toolsData;
}else{
this.app.toolsData = Object.merge(this.app.toolsData, this.toolsData)
}
if (callback) callback();
}.bind(this));
}
},
});
o2web/source/x_component_process_FormDesigner/Module/$ElComponent.js 0 → 100644
浏览文件 @ 2ca95cc0
MWF.xApplication.process.FormDesigner.Module = MWF.xApplication.process.FormDesigner.Module || {};
MWF.xDesktop.requireApp("process.FormDesigner", "Module.$Element", null, false);
MWF.xApplication.process.FormDesigner.Module.$ElComponent = MWF.FC$ElComponent = new Class({
Extends: MWF.FC$Component,
Implements: [Options, Events],
_initModuleType: function(){
this.className = "ElComponent"
this.moduleType = "component";
this.moduleName = "elComponent";
},
initialize: function(form, options){
debugger;
this.setOptions(options);
this._initModuleType();
this.path = "../x_component_process_FormDesigner/Module/"+this.className+"/";
this.cssPath = "../x_component_process_FormDesigner/Module/"+this.className+"/"+this.options.style+"/css.wcss";
this._loadCss();
this.form = form;
this.container = null;
this.containerNode = null;
this.isPropertyLoaded = false;
},
showProperty: function(){
if (!this.property){
this.property = new MWF.xApplication.process.FormDesigner.Property(this, this.form.designer.propertyContentArea, this.form.designer, {
"path": this.options.propertyPath,
"onPostLoad": function(){
this.property.show();
this.isPropertyLoaded = true;
}.bind(this)
});
this.property.load();
}else{
this.property.show();
}
},
_createMoveNode: function(){
this.moveNode = new Element("div", {
"MWFType": this.moduleName,
"id": this.json.id,
"styles": this.css.moduleNodeMove,
"text": this.json.name || this.json.id,
"events": {
"selectstart": function(){
return false;
}
}
}).inject(this.form.container);
},
_createNode: function(){
this.node = new Element("div", {
"MWFType": this.moduleName,
"id": this.json.id,
"styles": this.css.moduleNode,
"events": {
"selectstart": function(){
return false;
}
}
});
},
_initModule: function(){
if (!this.initialized){
if (this.json.initialized!=="yes") this.setStyleTemplate();
this._resetModuleDomNode();
}
},
_loadVue: function(callback){
if (!window.Vue){
o2.load(["vue", "elementui"], { "sequence": true }, callback);
}else{
if (callback) callback();
}
},
_createElementHtml: function(){
return "";
},
_resetModuleDomNode: function(){
if (!this.vm){
this.node.set("html", this._createElementHtml());
this._loadVue(this._mountVueApp.bind(this));
}
},
_mountVueApp: function(){
if (!this.vueApp) this.vueApp = this._createVueExtend();
this.vm = new Vue(this.vueApp).$mount(this.node);
},
_createVueData: function(){
return {};
},
_createVueExtend: function(){
var _self = this;
return {
data: this._createVueData(),
mounted: function(){
_self._afterMounted(this.$el);
}
};
},
_afterMounted: function(el){
this.node = el;
this.node.store("module", this);
this._getContainers();
this._getElements();
this._setNodeProperty();
if (!this.form.isSubform) this._createIconAction();
this._setNodeEvent();
this.initialized = true;
this.json.initialized = "yes";
this.selected(true);
},
_setOtherNodeEvent: function(){},
_setEditStyle_custom: function(name){
switch (name){
case "name": this.setPropertyName(); break;
case "id": this.setPropertyId(); break;
default: if (this.isPropertyLoaded) if (this.vm) this.resetElement();
}
},
setPropertyName: function(){},
setPropertyId: function(){},
resetElement: function(){
this._createNode();
this.node.inject(this.vm.$el,"before");
var node = this.vm.$el;
this.vm.$destroy();
node.destroy();
this.vm = null;
this.isSetEvents = false;
this._resetModuleDomNode();
}
});
o2web/source/x_component_process_FormDesigner/Module/$ElElement.js 0 → 100644
浏览文件 @ 2ca95cc0
MWF.xApplication.process.FormDesigner.Module = MWF.xApplication.process.FormDesigner.Module || {};
MWF.xDesktop.requireApp("process.FormDesigner", "Module.$Element", null, false);
MWF.xApplication.process.FormDesigner.Module.$ElElement = MWF.FC$ElElement = new Class({
Extends: MWF.FC$Element,
Implements: [Options, Events],
_initModuleType: function(){
this.className = "Elbutton"
this.moduleType = "element";
this.moduleName = "elbutton";
},
initialize: function(form, options){
this.setOptions(options);
this._initModuleType();
this.path = "../x_component_process_FormDesigner/Module/"+this.className+"/";
this.cssPath = "../x_component_process_FormDesigner/Module/"+this.className+"/"+this.options.style+"/css.wcss";
this._loadCss();
this.form = form;
this.container = null;
this.containerNode = null;
this.isPropertyLoaded = false;
},
_dragMoveComplete: MWF.FC$Component.prototype._dragComplete,
_dragComplete: function(){
if (!this.node){
this._createNode(function(){
this._dragMoveComplete();
}.bind(this));
}else{
this._dragMoveComplete();
}
},
showProperty: function(){
if (!this.property){
this.property = new MWF.xApplication.process.FormDesigner.Property(this, this.form.designer.propertyContentArea, this.form.designer, {
"path": this.options.propertyPath,
"onPostLoad": function(){
this.property.show();
this.isPropertyLoaded = true;
}.bind(this)
});
this.property.load();
}else{
this.property.show();
}
},
_createMoveNode: function(){
this.moveNode = new Element("div", {
"MWFType": this.moduleName,
"id": this.json.id,
"styles": this.css.moduleNodeMove,
"text": this.json.name || this.json.id,
"events": {
"selectstart": function(){
return false;
}
}
}).inject(this.form.container);
},
_createVueAppNode: function(){
this.node = new Element("div", {
"MWFType": this.moduleName,
"id": this.json.id,
"styles": this.css.moduleNode,
"events": {
"selectstart": function(){
return false;
}
}
});
},
_createNode: function(callback){
this._createVueAppNode();
this._resetVueModuleDomNode(callback);
},
_initModule: function(){
if (!this.json.isSaved) this.setStyleTemplate();
this._resetVueModuleDomNode(function(){
this._setNodeProperty();
if (!this.form.isSubform) this._createIconAction();
this._setNodeEvent();
//this.selected(true);
}.bind(this));
this.json.isSaved = true;
},
_loadVue: function(callback){
if (!window.Vue){
o2.load(["vue", "elementui"], { "sequence": true }, callback);
}else{
if (callback) callback();
}
},
_createElementHtml: function(){
return "";
},
_resetVueModuleDomNode: function(callback){
if (!this.vm){
this.node.set("html", this._createElementHtml());
this._loadVue(function(){
this._mountVueApp(callback);
}.bind(this));
}else{
if (callback) callback();
}
},
_resetModuleDomNode: function(){
},
_mountVueApp: function(callback){
//if (!this.vueApp)
this.vueApp = this._createVueExtend(callback);
this.vm = new Vue(this.vueApp);
this.vm.$mount(this.node);
},
_createVueData: function(){
var data = {};
return data;
},
_createVueExtend: function(callback){
var _self = this;
return {
data: this._createVueData(),
mounted: function(){
_self._afterMounted(this.$el, callback);
}
};
},
_afterMounted: function(el, callback){
debugger;
this.node = el;
this.node.store("module", this);
if (callback) callback();
},
_setOtherNodeEvent: function(){},
_setEditStyle_custom: function(name){
switch (name){
case "name": this.setPropertyName(); break;
case "id": this.setPropertyId(); break;
default: if (this.isPropertyLoaded) if (this.vm) this.resetElement();
}
},
setPropertyName: function(){},
setPropertyId: function(){},
resetElement: function(){
this._createVueAppNode();
this.node.inject(this.vm.$el,"before");
var node = this.vm.$el;
this.vm.$destroy();
node.destroy();
this.vm = null;
this.isSetEvents = false;
this._resetVueModuleDomNode(function(){
this._setNodeProperty();
if (!this.form.isSubform) this._createIconAction();
this._setNodeEvent();
}.bind(this));
}
});
o2web/source/x_component_process_FormDesigner/Module/Elbutton.js 0 → 100644
浏览文件 @ 2ca95cc0
MWF.xApplication.process.FormDesigner.Module = MWF.xApplication.process.FormDesigner.Module || {};
MWF.xDesktop.requireApp("process.FormDesigner", "Module.$ElElement", null, false);
MWF.xApplication.process.FormDesigner.Module.Elbutton = MWF.FCElbutton = new Class({
Extends: MWF.FC$ElElement,
Implements: [Options, Events],
options: {
"style": "default",
"propertyPath": "../x_component_process_FormDesigner/Module/Elbutton/elbutton.html"
},
_initModuleType: function(){
this.className = "Elbutton"
this.moduleType = "element";
this.moduleName = "elbutton";
},
_createElementHtml: function(){
debugger;
var html = "<el-button";
if (this.json.size && this.json.size!=="auto") html += " size=\""+this.json.size+"\"";
if (this.json.bttype && this.json.bttype!=="default") html += " type=\""+this.json.bttype+"\"";
if (this.json.plain===true) html += " plain";
if (this.json.round===true) html += " round";
if (this.json.circle===true) html += " circle";
if (this.json.icon) html += " icon=\""+this.json.icon+"\"";
if (this.json.disabled===true) html += " disabled";
if (this.json.loading===true) html += " loading";
if (this.json.autofocus===true) html += " autofocus";
if (this.json.elProperties){
Object.keys(this.json.elProperties).forEach(function(k){
if (this.json.elProperties[k]) html += " "+k+"=\""+this.json.elProperties[k]+"\"";
}, this);
}
if (this.json.elStyles){
var style = "";
Object.keys(this.json.elStyles).forEach(function(k){
if (this.json.elStyles[k]) style += k+":"+this.json.elStyles[k]+";";
}, this);
html += " style=\""+style+"\"";
}
html += ">"+((this.json.circle!==true && this.json.isText!==false) ? (this.json.name || this.json.id) : "")+"</el-button>";
return html;
},
_createCopyNode: function(){
this.copyNode = new Element("div", {
"styles": this.css.moduleNodeShow
});
this.copyNode.addEvent("selectstart", function(){
return false;
});
},
_getCopyNode: function(){
if (!this.copyNode) this._createCopyNode();
this.copyNode.setStyle("display", "inline-block");
return this.copyNode;
},
setPropertyName: function(){
if (this.json.name){
var button = this.node.getElement("button");
if (!button) button = this.node.getFirst("input");
if (button) button.set("text", this.json.name);
}
},
setPropertyId: function(){
if (!this.json.name){
var button = this.node.getElement("button");
if (!button) button = this.node.getFirst("input");
if (button) button.set("text", this.json.id);
}
}
});
o2web/source/x_component_process_FormDesigner/Module/Elbutton/default/css.wcss 0 → 100644
浏览文件 @ 2ca95cc0
{
"moduleNodeMove": {
"border-radius": "5px",
"border": "1px solid #ffa200",
"overflow": "hidden",
"margin": "3px",
"-webkit-user-select": "none",
"-moz-user-select": "none",
"position": "absolute",
"z-index": 10002,
"opacity": 0.7,
"cursor": "move",
"height": "26px",
"line-height": "26px",
"padding": "0 10px",
"display": "inline-block"
},
"moduleNodeShow": {
"border": "1px solid #333",
"margin": "3px",
"-webkit-user-select": "none",
"-moz-user-select": "none",
"position": "static",
"top": "auto",
"left": "auto",
"width": "18px",
"height": "2px",
"opacity": 0.5,
"display": "inline-block",
"background": "#ffa200"
},
"moduleNode": {
"border-radius": "5px",
"border-top": "1px solid #999",
"border-left": "1px solid #999",
"border-right": "1px solid #333",
"border-bottom": "1px solid #333",
"overflow": "hidden",
"cursor": "pointer",
"margin": "3px",
"-webkit-user-select": "none",
"-moz-user-select": "none",
"position": "static",
"top": "auto",
"left": "auto",
"opacity": 1,
"display": "inline-block"
},
"buttonIcon": {
"height": "26px",
"cursor": "pointer",
"border": "0px",
"margin": "0px"
}
}
o2web/source/x_component_process_FormDesigner/Module/Elbutton/elbutton.html 0 → 100644
浏览文件 @ 2ca95cc0
<div style="background-color: #FFF; overflow: hidden">
<div title="{{$.lp.base}}" class="MWFTab">
<table width="100%" border="0" cellpadding="5" cellspacing="0" class="editTable">
<tr>
<td class="editTableTitle">{{$.lp.id}}:</td>
<td class="editTableValue"><input type="text" name="id" value="text{$.id}" class="editTableInput"/></td>
</tr>
<tr>
<td class="editTableTitle">{{$.lp.name}}:</td>
<td class="editTableValue"><input type="text" name="name" value="text{$.name}" class="editTableInput"/></td>
</tr>
<tr>
<td class="editTableTitle">{{$.lp.description}}:</td>
<td class="editTableValue"><input type="text" name="description" value="text{$.description}" class="editTableInput"/></td>
</tr>
</table>
<table width="100%" border="0" cellpadding="5" cellspacing="0" class="editTable">
<tr>
<td class="editTableTitle">{{$.lp.size}}:</td>
<td class="editTableValue">
<input type="radio" name="size" value="medium" text{($.size==='medium')?'checked':''}/>medium
<input type="radio" name="size" value="small" text{($.size==='small')?'checked':''}/>small
<input type="radio" name="size" value="mini" text{($.size==='mini')?'checked':''}/>mini
<input type="radio" name="size" value="auto" text{($.size!=='medium' && $.size!=='small' && $.size!=='mini')?'checked':''}/>auto
</td>
</tr>
<tr>
<td class="editTableTitle">{{$.lp.type}}:</td>
<td class="editTableValue">
<input type="radio" name="bttype" value="default" text{($.bttype!=='primary' && $.bttype!=='success' && $.bttype!=='warning' && $.bttype!=='danger' && $.bttype!=='info' && $.bttype!=='text')?'checked':''}/>{{$.lp.el_bt_default}}
<input type="radio" name="bttype" value="primary" text{($.bttype=='primary')?'checked':''}/>{{$.lp.el_bt_primary}}
<input type="radio" name="bttype" value="success" text{($.bttype==='success')?'checked':''}/>{{$.lp.el_bt_success}}
<input type="radio" name="bttype" value="warning" text{($.bttype==='warning')?'checked':''}/>{{$.lp.el_bt_warning}}
<input type="radio" name="bttype" value="danger" text{($.bttype==='danger')?'checked':''}/>{{$.lp.el_bt_danger}}
<input type="radio" name="bttype" value="info" text{($.bttype==='info')?'checked':''}/>{{$.lp.el_bt_info}}
<input type="radio" name="bttype" value="text" text{($.bttype==='text')?'checked':''}/>{{$.lp.el_bt_text}}
</td>
</tr>
<tr>
<td class="editTableTitle">{{$.lp.el_icon}}:</td>
<td class="editTableValue">
<div class="MWFElIcon" name="icon"></div>
</td>
</tr>
<tr>
<td class="editTableTitle">{{$.lp.el_plain}}:</td>
<td class="editTableValue">
<input type="radio" name="plain" value="true" text{($.plain==true)?'checked':''}/>{{$.lp.yes}}
<input type="radio" name="plain" value="false" text{($.plain!=true)?'checked':''}/>{{$.lp.no}}
</td>
</tr>
<tr>
<td class="editTableTitle">{{$.lp.el_round}}:</td>
<td class="editTableValue">
<input type="radio" name="round" value="true" text{($.round==true)?'checked':''}/>{{$.lp.yes}}
<input type="radio" name="round" value="false" text{($.round!=true)?'checked':''}/>{{$.lp.no}}
</td>
</tr>
<tr>
<td class="editTableTitle">{{$.lp.el_circle}}:</td>
<td class="editTableValue">
<input type="radio" name="circle" value="true" text{($.circle==true)?'checked':''}/>{{$.lp.yes}}
<input type="radio" name="circle" value="false" text{($.circle!=true)?'checked':''}/>{{$.lp.no}}
</td>
</tr>
<tr>
<td class="editTableTitle">{{$.lp.el_disabled}}:</td>
<td class="editTableValue">
<input type="radio" name="disabled" value="true" text{($.disabled==true)?'checked':''}/>{{$.lp.yes}}
<input type="radio" name="disabled" value="false" text{($.disabled!=true)?'checked':''}/>{{$.lp.no}}
</td>
</tr>
<tr>
<td class="editTableTitle">{{$.lp.el_loading}}:</td>
<td class="editTableValue">
<input type="radio" name="loading" value="true" text{($.loading==true)?'checked':''}/>{{$.lp.yes}}
<input type="radio" name="loading" value="false" text{($.loading!=true)?'checked':''}/>{{$.lp.no}}
</td>
</tr>
<tr>
<td class="editTableTitle">{{$.lp.el_autofocus}}:</td>
<td class="editTableValue">
<input type="radio" name="autofocus" value="true" text{($.autofocus==true)?'checked':''}/>{{$.lp.yes}}
<input type="radio" name="autofocus" value="false" text{($.autofocus!=true)?'checked':''}/>{{$.lp.no}}
</td>
</tr>
<tr>
<td class="editTableTitle">{{$.lp.el_isText}}:</td>
<td class="editTableValue">
<input type="radio" name="isText" value="true" text{($.isText!=false)?'checked':''}/>{{$.lp.yes}}
<input type="radio" name="isText" value="false" text{($.isText==false)?'checked':''}/>{{$.lp.no}}
</td>
</tr>
</table>
<div class="MWFMaplist" name="elStyles" title="{{$.lp.style}}"></div>
<div class="MWFMaplist" name="elProperties" title="{{$.lp.attribute}}"></div>
</div>
<div title="Vue" class="MWFTab">
<div class="MWFScriptArea" name="vueData" title="Vue Data (S)"></div>
</div>
<div title="{{$.lp.event}}" class="MWFTab">
<div class="MWFEventsArea" name="events"></div>
</div>
<div title="HTML" class="MWFTab">
<div class="MWFHTMLArea" style="width:100%; height:400px; border:0px;font-family: Verdana, Geneva, sans-serif; font-size:14px"></div>
</div>
<div title="JSON" class="MWFTab">
<div class="MWFJSONArea" style="font-family: Verdana, Geneva, sans-serif; font-size:14px"></div>
</div>
</div>
o2web/source/x_component_process_FormDesigner/Module/Elbutton/template.json 0 → 100644
浏览文件 @ 2ca95cc0
{
"id": "",
"name": "",
"type": "Elbutton",
"description": "",
"events": {
"queryLoad": {
"code": "",
"html": ""
},
"postLoad": {
"code": "",
"html": ""
},
"load": {
"code": "",
"html": ""
},
"click": {
"code": "",
"html": ""
},
"dblclick": {
"code": "",
"html": ""
},
"keydown": {
"code": "",
"html": ""
},
"keypress": {
"code": "",
"html": ""
},
"keyup": {
"code": "",
"html": ""
},
"mousedown": {
"code": "",
"html": ""
},
"mousemove": {
"code": "",
"html": ""
},
"mouseout": {
"code": "",
"html": ""
},
"mouseover": {
"code": "",
"html": ""
},
"mouseup": {
"code": "",
"html": ""
},
"focus": {
"code": "",
"html": ""
},
"blur": {
"code": "",
"html": ""
}
},
"properties": {},
"class": "",
"styles": {},
"container": ""
}
o2web/source/x_component_process_FormDesigner/Module/Elcheckbox.js 0 → 100644
浏览文件 @ 2ca95cc0
MWF.xApplication.process.FormDesigner.Module = MWF.xApplication.process.FormDesigner.Module || {};
MWF.xDesktop.requireApp("process.FormDesigner", "Module.Checkbox", null, false);
MWF.xApplication.process.FormDesigner.Module.Elcheckbox = MWF.FCElcheckbox = new Class({
Extends: MWF.FC$ElElement,
Implements: [Options, Events],
options: {
"style": "default",
"type": "elcheckbox",
"path": "../x_component_process_FormDesigner/Module/Elcheckbox/",
"propertyPath": "../x_component_process_FormDesigner/Module/Elcheckbox/elcheckbox.html"
},
_initModuleType: function(){
this.className = "Elcheckbox"
this.moduleType = "element";
this.moduleName = "elcheckbox";
},
_createElementHtml: function(){
debugger;
var html = "<el-checkbox-group v-model=\""+this.json.id+"\"";
if (this.json.textColor) html += " text-color=\""+this.json.textColor+"\"";
if (this.json.fillColor) html += " fill=\""+this.json.fillColor+"\"";
if (this.json.size && this.json.size!=="default") html += " size=\""+this.json.size+"\"";
if (this.json.elGroupProperties){
Object.keys(this.json.elGroupProperties).forEach(function(k){
if (this.json.elGroupProperties[k]) html += " "+k+"=\""+this.json.elGroupProperties[k]+"\"";
}, this);
}
if (this.json.elGroupStyles){
var style = "";
Object.keys(this.json.elGroupStyles).forEach(function(k){
if (this.json.elGroupStyles[k]) style += k+":"+this.json.elGroupStyles[k]+";";
}, this);
html += " style=\""+style+"\"";
}
html += (this.json.buttonRadio) ? " ><el-checkbox-button" : " ><el-checkbox";
if (this.json.border===true) html += " border";
if (this.json.elProperties){
Object.keys(this.json.elProperties).forEach(function(k){
if (this.json.elProperties[k]) html += " "+k+"=\""+this.json.elProperties[k]+"\"";
}, this);
}
var radiostyle = "box-sizing: border-box!important;";
if (this.json.elStyles){
Object.keys(this.json.elStyles).forEach(function(k){
if (this.json.elStyles[k]) radiostyle += k+":"+this.json.elStyles[k]+";";
}, this);
}
html += " style=\""+radiostyle+"\"";
html += " label=\""+this.json.id+"\">"+((this.json.buttonRadio) ? "</el-checkbox-button></el-checkbox-group>" : "</el-checkbox></el-checkbox-group>");
return html;
},
_createCopyNode: function(){
this.copyNode = new Element("div", {
"styles": this.css.moduleNodeShow
});
this.copyNode.addEvent("selectstart", function(){
return false;
});
},
_getCopyNode: function(){
if (!this.copyNode) this._createCopyNode();
this.copyNode.setStyle("display", "inline-block");
return this.copyNode;
},
setPropertyId: function(){
if (this.isPropertyLoaded) if (this.vm) this.resetElement();
},
_createVueData: function(){
var data = {};
data[this.json.id] = [this.json.id];
return data;
},
});
o2web/source/x_component_process_FormDesigner/Module/Elcheckbox/default/css.wcss 0 → 100644
浏览文件 @ 2ca95cc0
{
"moduleNodeMove": {
"border": "2px solid #ffa200",
"overflow": "hidden",
"margin": "3px",
"-webkit-user-select": "none",
"-moz-user-select": "none",
"position": "absolute",
"z-index": 10002,
"opacity": 0.7,
"width": "120px",
"cursor": "move",
"display": "inline-block"
},
"moduleNodeShow": {
"border": "1px solid #333",
"height": "2px",
"cursor": "pointer",
"margin": "3px",
"-webkit-user-select": "none",
"-moz-user-select": "none",
"position": "static",
"top": "auto",
"left": "auto",
"width": "18px",
"opacity": 0.5,
"background": "#ffa200",
"display": "inline-block",
"line-height": "2px",
"font-size": "2px"
},
"moduleNode": {
"border": "1px dashed #999",
"cursor": "pointer",
"overflow": "hidden",
"margin": "3px",
"-webkit-user-select": "none",
"-moz-user-select": "none",
"position": "static",
"top": "auto",
"left": "auto",
"opacity": 1,
"padding": "0 3px",
"display": "inline-block"
}
}
o2web/source/x_component_process_FormDesigner/Module/Elcheckbox/elcheckbox.html 0 → 100644
浏览文件 @ 2ca95cc0
<div style="background-color: #FFF; overflow: hidden">
<div title="{{$.lp.base}}" class="MWFTab">
<table width="100%" border="0" cellpadding="5" cellspacing="0" class="editTable">
<tr>
<td class="editTableTitle">{{$.lp.id}}:</td>
<td class="editTableValue"><input type="text" name="id" value="text{$.id}" class="editTableInput"/></td>
</tr>
<tr>
<td class="editTableTitle">{{$.lp.name}}:</td>
<td class="editTableValue"><input type="text" name="name" value="text{$.name}" class="editTableInput"/></td>
</tr>
<tr>
<td class="editTableTitle">{{$.lp.description}}:</td>
<td class="editTableValue"><input type="text" name="description" value="text{$.description}" class="editTableInput"/></td>
</tr>
<tr>
<td class="editTableTitle">{{$.lp.readonly}}:</td>
<td class="editTableValue">
<input type="radio" name="isReadonly" value="true" text{($.isReadonly)?'checked':''}/>{{$.lp.yes}}
<input type="radio" name="isReadonly" value="false" text{(!$.isReadonly)?'checked':''}/>{{$.lp.no}}
</td>
</tr>
<tr>
<td class="editTableTitle">{{$.lp.options}}:</td>
<td class="editTableValue">
<input class="editTableRadio" onclick="if (this.checked){ $('text{$.pid}selectEditItemValues').setStyle('display', 'block'); $('text{$.pid}selectEditItemScript').setStyle('display', 'none')}" name="itemType" text{($.itemType=='values')?'checked':''} type="radio" value="values"/>{{$.lp.textValue}}
<input class="editTableRadio" onclick="if (this.checked){ $('text{$.pid}selectEditItemScript').setStyle('display', 'block'); $('text{$.pid}selectEditItemValues').setStyle('display', 'none')}" name="itemType" text{($.itemType=='script')?'checked':''} type="radio" value="script"/>{{$.lp.script}}
</td>
</tr>
</table>
<div id="text{$.pid}selectEditItemValues" style="display: text{($.itemType=='values')?'block':'none'}" class="MWFArraylist" name="itemValues" title="{{$.lp.options}}"></div>
<div id="text{$.pid}selectEditItemScript" style="display: text{($.itemType=='script')?'block':'none'}" class="MWFScriptArea" name="itemScript" title="{{$.lp.optionScript}} (S)"></div>
<table width="100%" border="0" cellpadding="5" cellspacing="0" class="editTable">
<tr>
<td class="editTableTitle">{{$.lp.el_buttonRadio}}:</td>
<td class="editTableValue">
<input type="radio" name="buttonRadio" onclick="if (this.checked){ $('text{$.pid}radioBaseAttrArea').setStyle('display', 'none'); $('text{$.pid}buttonBaseAttrArea').setStyle('display', 'block')}" value="true" text{($.buttonRadio==true)?'checked':''}/>{{$.lp.yes}}
<input type="radio" name="buttonRadio" onclick="if (this.checked){ $('text{$.pid}radioBaseAttrArea').setStyle('display', 'block'); $('text{$.pid}buttonBaseAttrArea').setStyle('display', 'none')}" value="false" text{($.buttonRadio!=true)?'checked':''}/>{{$.lp.no}}
</td>
</tr>
</table>
<div id="text{$.pid}radioBaseAttrArea" style="display: text{($.buttonRadio==true)?'none':'block'}">
<table width="100%" border="0" cellpadding="5" cellspacing="0" class="editTable">
<tr>
<td class="editTableTitle">{{$.lp.el_border}}:</td>
<td class="editTableValue">
<input type="radio" name="border" value="true" text{($.border==true)?'checked':''}/>{{$.lp.yes}}
<input type="radio" name="border" value="false" text{($.border!=true)?'checked':''}/>{{$.lp.no}}
</td>
</tr>
</table>
</div>
<table width="100%" border="0" cellpadding="5" cellspacing="0" class="editTable">
<tr>
<td class="editTableTitle">{{$.lp.size}}:</td>
<td class="editTableValue">
<input type="radio" name="size" value="medium" text{($.size==='medium')?'checked':''}/>medium
<input type="radio" name="size" value="small" text{($.size==='small')?'checked':''}/>small
<input type="radio" name="size" value="mini" text{($.size==='mini')?'checked':''}/>mini
<input type="radio" name="size" value="default" text{($.size!=='medium' && $.size!=='small' && $.size!=='mini')?'checked':''}/>default
</td>
</tr>
</table>
<div id="text{$.pid}buttonBaseAttrArea" style="display: text{($.buttonRadio!=true)?'none':'block'}">
<table width="100%" border="0" cellpadding="5" cellspacing="0" class="editTable">
<tr>
<td class="editTableTitle">{{$.lp.el_radioColor}}:</td>
<td class="editTableValue">
<div class="o2_vue MWFElementColor" name="textColor"><el-color-picker v-model="textColor" @change="change" size="mini" style="box-sizing: border-box!important;"></el-color-picker></div>
<!-- <input type="color" name="textColor" value="text{$.textColor}" class="editTableInput"/>-->
</td>
</tr>
<tr>
<td class="editTableTitle">{{$.lp.el_radioFillColor}}:</td>
<td class="editTableValue">
<div class="o2_vue MWFElementColor" name="fillColor"><el-color-picker v-model="fillColor" @change="change" size="mini" style="box-sizing: border-box!important;"></el-color-picker></div>
<!-- <input type="color" name="fillColor" value="text{$.fillColor}" class="editTableInput"/>-->
</td>
</tr>
</table>
</div>
<hr/>
<table width="100%" border="0" cellpadding="5" cellspacing="0" class="editTable">
<tr>
<td class="editTableTitle">{{$.lp.compute}}:</td>
<td class="editTableValue">
<input type="radio" name="compute" value="create" text{($.compute.indexOf('create')!=-1)?'checked':''}/>{{$.lp.create}}
<input type="radio" name="compute" value="save" text{($.compute.indexOf('save')!=-1)?'checked':''}/>{{$.lp.save}}
<input type="radio" name="compute" value="show" text{($.compute.indexOf('show')!=-1)?'checked':''}/>{{$.lp.show}}
</td>
</tr>
</table>
<div class="MWFScriptArea" name="defaultValue" title="{{$.lp.defaultValue}} (S)"></div>
<div class="MWFMaplist" name="elStyles" title="{{$.lp.style}}"></div>
<div class="MWFMaplist" name="elProperties" title="{{$.lp.attribute}}"></div>
<div class="MWFMaplist" name="elGroupStyles" title="{{$.lp.elGroupStyles}}"></div>
<div class="MWFMaplist" name="elGroupProperties" title="{{$.lp.elGroupProperties}}"></div>
<div class="MWFValidation" name="validationConfig"></div>
<div class="MWFScriptArea" name="validation" title="{{$.lp.verificationScript}} (S)"></div>
</div>
<div title="{{$.lp.section}}" class="MWFTab">
<table width="100%" border="0" cellpadding="5" cellspacing="0" class="editTable">
<tr>
<td class="editTableTitle">{{$.lp.enableSection}}:</td>
<td class="editTableValue">
<input onclick="if (this.checked){ $('text{$.pid}sectionByEditArea').setStyle('display', 'block')}" type="radio" name="section" value="yes" text{($.section=='yes')?'checked':''}/>{{$.lp.yes}}
<input onclick="if (this.checked){ $('text{$.pid}sectionByEditArea').setStyle('display', 'none')}" type="radio" name="section" value="no" text{($.section!='yes')?'checked':''}/>{{$.lp.no}}
</td>
</tr>
</table>
<div id="text{$.pid}sectionByEditArea" style="display: text{($.section=='yes')?'block':'none'};">
<table width="100%" border="0" cellpadding="5" cellspacing="0" class="editTable">
<tr>
<td class="editTableTitle">{{$.lp.sectionBy}}:</td>
<td class="editTableValue">
<input class="editTableRadio" onclick="if (this.checked){ $('text{$.pid}sectionByScriptEditArea').setStyle('display', 'none');}" name="sectionBy" text{(($.sectionBy=='person') || ($.sectionBy!='unit' && $.sectionBy!='activity' && $.sectionBy!='script'))?'checked':''} type="radio" value="person"/>{{$.lp.handler}}<br/>
<input class="editTableRadio" onclick="if (this.checked){ $('text{$.pid}sectionByScriptEditArea').setStyle('display', 'none');}" name="sectionBy" text{($.sectionBy=='department')?'checked':''} type="radio" value="unit"/>{{$.lp.handlerUnit}}<br/>
<input class="editTableRadio" onclick="if (this.checked){ $('text{$.pid}sectionByScriptEditArea').setStyle('display', 'none');}" name="sectionBy" text{($.sectionBy=='activity')?'checked':''} type="radio" value="activity"/>{{$.lp.activityId}}<br/>
<input class="editTableRadio" onclick="if (this.checked){ $('text{$.pid}sectionByScriptEditArea').setStyle('display', 'none');}" name="sectionBy" text{($.sectionBy=='splitValue')?'checked':''} type="radio" value="splitValue"/>{{$.lp.splitValue}}<br/>
<input class="editTableRadio" onclick="if (this.checked){ $('text{$.pid}sectionByScriptEditArea').setStyle('display', 'block');}" name="sectionBy" text{($.sectionBy=='script')?'checked':''} type="radio" value="script"/>{{$.lp.script}}<br/>
</td>
</tr>
</table>
<div id="text{$.pid}sectionByScriptEditArea" style="display: text{($.sectionBy=='script')?'block':'none'};">
<div class="MWFScriptArea" name="sectionByScript" title="{{$.lp.sectionBy}} (S)"></div>
</div>
</div>
</div>
<div title="Vue" class="MWFTab">
<div class="MWFScriptArea" name="vueData" title="Vue Data (S)"></div>
</div>
<div title="{{$.lp.event}}" class="MWFTab">
<div class="MWFEventsArea" name="events"></div>
</div>
<div title="HTML" class="MWFTab">
<div class="MWFHTMLArea" style="font-family: Verdana, Geneva, sans-serif; font-size:14px"></div>
</div>
<div title="JSON" class="MWFTab">
<div class="MWFJSONArea" style="font-family: Verdana, Geneva, sans-serif; font-size:14px"></div>
</div>
</div>
o2web/source/x_component_process_FormDesigner/Module/Elcheckbox/template.json 0 → 100644
浏览文件 @ 2ca95cc0
{
"id": "",
"name": "",
"type": "Elcheckbox",
"description": "",
"itemType": "values",
"itemValues": [],
"itemScript": {
"code": "",
"html": ""
},
"defaultValue": {
"code": "",
"html": ""
},
"compute": "create", //create, show, save
"events": {
"queryLoad" : {
"code": "",
"html": ""
},
"postLoad" : {
"code": "",
"html": ""
},
"load": {
"code": "",
"html": ""
},
"click": {
"code": "",
"html": ""
},
"dblclick": {
"code": "",
"html": ""
},
"change" : {
"code": "",
"html": ""
},
"keydown": {
"code": "",
"html": ""
},
"keypress": {
"code": "",
"html": ""
},
"keyup": {
"code": "",
"html": ""
},
"mousedown": {
"code": "",
"html": ""
},
"mousemove": {
"code": "",
"html": ""
},
"mouseout": {
"code": "",
"html": ""
},
"mouseover": {
"code": "",
"html": ""
},
"mouseup": {
"code": "",
"html": ""
},
"focus": {
"code": "",
"html": ""
},
"blur": {
"code": "",
"html": ""
}
},
"properties": {},
"class": "",
"buttonStyles": {},
"styles": {},
"container": ""
}
o2web/source/x_component_process_FormDesigner/Module/Elcontainer$Container.js 0 → 100644
浏览文件 @ 2ca95cc0
MWF.xApplication.process.FormDesigner.Module = MWF.xApplication.process.FormDesigner.Module || {};
MWF.xDesktop.requireApp("process.FormDesigner", "Module.$Container", null, false);
MWF.xApplication.process.FormDesigner.Module.Elcontainer$Main = MWF.FCElcontainer$Main = new Class({
Extends: MWF.FC$Container,
Implements: [Options, Events],
options: {
"style": "default",
"propertyPath": "../x_component_process_FormDesigner/Module/Elcontainer$Container/elcontainer$Container.html",
"actions": [
{
"name": "selectedContainer",
"icon": "select.png",
"event": "click",
"action": "selectedContainer",
"title": MWF.APPFD.LP.formAction["selectedContainer"]
}
// {
// "name": "delete",
// "icon": "delete1.png",
// "event": "click",
// "action": "delete",
// "title": MWF.APPFD.LP.formAction["delete"]
// }
],
"injectActions" : [
{
"name" : "top",
"styles" : "injectActionTop",
"event" : "click",
"action" : "injectTop",
"title": MWF.APPFD.LP.formAction["insertTop"]
},
{
"name" : "bottom",
"styles" : "injectActionBottom",
"event" : "click",
"action" : "injectBottom",
"title": MWF.APPFD.LP.formAction["insertBottom"]
}
]
},
_initModuleType: function(){
this.className = "Elcontainer$Main"
this.moduleType = "container";
this.moduleName = "elcontainer$Main";
this.cssName = "css_main";
},
initialize: function(form, options){
this.setOptions(options);
this._initModuleType();
this.path = "../x_component_process_FormDesigner/Module/Elcontainer$Container/";
this.cssPath = "../x_component_process_FormDesigner/Module/Elcontainer$Container/"+this.options.style+"/"+this.cssName+".wcss";
this._loadCss();
this._initModuleType();
this.Node = null;
this.form = form;
},
load : function(json, node, parent){
this.json = json;
this.node= node;
this.node.store("module", this);
this.node.setStyles(this.css.moduleNode);
this._loadNodeStyles();
this._loadNodeCustomStyles();
this._initModule();
this._loadTreeNode(parent);
debugger;
if (!this.json.id){
var id = this._getNewId(((parent) ? parent.json.id : null));
this.json.id = id;
}
if (!this.form.json.moduleList[this.json.id]){
this.form.json.moduleList[this.json.id] = this.json;
}
this.parseModules();
this.parentContainer = this.treeNode.parentNode.module;
this._setEditStyle_custom("id");
this.json.moduleName = this.moduleName;
},
_dragInLikeElement: function(module){
return false;
},
destroy: function(){
this.container.containers.erase(this);
var modules = this._getSubModule();
modules.each(function(module){
//module._deleteModule();
module.destroy();
});
this._deleteModule();
}
});
MWF.xApplication.process.FormDesigner.Module.Elcontainer$Aside = MWF.FCElcontainer$Aside = new Class({
Extends: MWF.FCElcontainer$Main,
Implements: [Options, Events],
_initModuleType: function(){
this.className = "Elcontainer$Aside"
this.moduleType = "container";
this.moduleName = "elcontainer$Aside";
this.cssName = "css_aside";
}
});
MWF.xApplication.process.FormDesigner.Module.Elcontainer$Footer = MWF.FCElcontainer$Footer = new Class({
Extends: MWF.FCElcontainer$Main,
Implements: [Options, Events],
_initModuleType: function(){
this.className = "Elcontainer$Footer"
this.moduleType = "container";
this.moduleName = "elcontainer$Footer";
this.cssName = "css_footer";
}
});
MWF.xApplication.process.FormDesigner.Module.Elcontainer$Header = MWF.FCElcontainer$Header = new Class({
Extends: MWF.FCElcontainer$Main,
Implements: [Options, Events],
_initModuleType: function(){
this.className = "Elcontainer$Header"
this.moduleType = "container";
this.moduleName = "elcontainer$Header";
this.cssName = "css_header";
}
});
o2web/source/x_component_process_FormDesigner/Module/Elcontainer$Container/default/css_aside.wcss 0 → 100644
浏览文件 @ 2ca95cc0
{
"moduleNodeMove": {
},
"moduleNodeShow": {
},
"moduleNode": {
"border": "1px dashed #333",
"background-color": "#D3DCE6",
"width": "240px",
"cursor": "pointer",
"-webkit-user-select": "none",
"-moz-user-select": "none",
"opacity": 1
}
}
o2web/source/x_component_process_FormDesigner/Module/Elcontainer$Container/default/css_footer.wcss 0 → 100644
浏览文件 @ 2ca95cc0
{
"moduleNodeMove": {
},
"moduleNodeShow": {
},
"moduleNode": {
"border": "1px dashed #333",
"background-color": "#B3C0D1",
"height": "60px",
"cursor": "pointer",
"-webkit-user-select": "none",
"-moz-user-select": "none",
"opacity": 1
}
}
o2web/source/x_component_process_FormDesigner/Module/Elcontainer$Container/default/css_header.wcss 0 → 100644
浏览文件 @ 2ca95cc0
{
"moduleNodeMove": {
},
"moduleNodeShow": {
},
"moduleNode": {
"border": "1px dashed #333",
"background-color": "#B3C0D1",
"height": "60px",
"cursor": "pointer",
"-webkit-user-select": "none",
"-moz-user-select": "none",
"opacity": 1
}
}
o2web/source/x_component_process_FormDesigner/Module/Elcontainer$Container/default/css_main.wcss 0 → 100644
浏览文件 @ 2ca95cc0
{
"moduleNodeMove": {
},
"moduleNodeShow": {
},
"moduleNode": {
"border": "1px dashed #333",
"cursor": "pointer",
"-webkit-user-select": "none",
"-moz-user-select": "none",
"opacity": 1
}
}
o2web/source/x_component_process_FormDesigner/Module/Elcontainer$Container/elcontainer$Container.html 0 → 100644
浏览文件 @ 2ca95cc0
<div style="background-color: #FFF; overflow: hidden">
<div title="{{$.lp.base}}" class="MWFTab">
<table width="100%" border="0" cellpadding="5" cellspacing="0" class="editTable">
<tr>
<td class="editTableTitle">{{$.lp.id}}:</td>
<td class="editTableValue"><input type="text" name="id" value="text{$.id}" class="editTableInput"/></td>
</tr>
<tr>
<td class="editTableTitle">{{$.lp.name}}:</td>
<td class="editTableValue"><input type="text" name="name" value="text{$.name}" class="editTableInput"/></td>
</tr>
<tr>
<td class="editTableTitle">{{$.lp.description}}:</td>
<td class="editTableValue"><input type="text" name="description" value="text{$.description}" class="editTableInput"/></td>
</tr>
</table>
<div class="MWFMaplist" name="styles" title="{{$.lp.style}}"></div>
<div class="MWFMaplist" name="properties" title="{{$.lp.attribute}}"></div>
</div>
<div title="{{$.lp.event}}" class="MWFTab">
<div class="MWFEventsArea" name="events"></div>
</div>
<div title="HTML" class="MWFTab">
<div class="MWFHTMLArea" style="font-family: Verdana, Geneva, sans-serif; font-size:14px"></div>
</div>
<div title="JSON" class="MWFTab">
<div class="MWFJSONArea" style="font-family: Verdana, Geneva, sans-serif; font-size:14px"></div>
</div>
</div>
\ No newline at end of file
o2web/source/x_component_process_FormDesigner/Module/Elcontainer$Container/elcontainer.html 0 → 100644
浏览文件 @ 2ca95cc0
<div style="background-color: #FFF; overflow: hidden">
<div title="{{$.lp.base}}" class="MWFTab">
<table width="100%" border="0" cellpadding="5" cellspacing="0" class="editTable">
<tr>
<td class="editTableTitle">{{$.lp.id}}:</td>
<td class="editTableValue"><input type="text" name="id" value="text{$.id}" class="editTableInput"/></td>
</tr>
<tr>
<td class="editTableTitle">{{$.lp.name}}:</td>
<td class="editTableValue"><input type="text" name="name" value="text{$.name}" class="editTableInput"/></td>
</tr>
<tr>
<td class="editTableTitle">{{$.lp.description}}:</td>
<td class="editTableValue"><input type="text" name="description" value="text{$.description}" class="editTableInput"/></td>
</tr>
</table>
<table width="100%" border="0" cellpadding="5" cellspacing="0" class="editTable">
<tr>
<td class="editTableTitle">{{$.lp.size}}:</td>
<td class="editTableValue">
<input type="radio" name="size" value="medium" text{($.size==='medium')?'checked':''}/>medium
<input type="radio" name="size" value="small" text{($.size==='small')?'checked':''}/>small
<input type="radio" name="size" value="mini" text{($.size==='mini')?'checked':''}/>mini
<input type="radio" name="size" value="auto" text{($.size!=='medium' && $.size!=='small' && $.size!=='mini')?'checked':''}/>auto
</td>
</tr>
<tr>
<td class="editTableTitle">{{$.lp.type}}:</td>
<td class="editTableValue">
<input type="radio" name="type" value="default" text{($.type!=='primary' && $.type!=='success' && $.type!=='warning' && $.type!=='danger' && $.type!=='info' && $.type!=='text')?'checked':''}/>{{$.lp.el_bt_default}}
<br/><input type="radio" name="type" value="primary" text{($.type=='primary')?'checked':''}/>{{$.lp.el_bt_primary}}
<br/><input type="radio" name="type" value="success" text{($.type==='success')?'checked':''}/>{{$.lp.el_bt_success}}
<br/><input type="radio" name="type" value="warning" text{($.type==='warning')?'checked':''}/>{{$.lp.el_bt_warning}}
<br/><input type="radio" name="type" value="danger" text{($.type==='danger')?'checked':''}/>{{$.lp.el_bt_danger}}
<br/><input type="radio" name="type" value="info" text{($.type==='info')?'checked':''}/>{{$.lp.el_bt_info}}
<br/><input type="radio" name="type" value="text" text{($.type==='text')?'checked':''}/>{{$.lp.el_bt_text}}
</td>
</tr>
<tr>
<td class="editTableTitle">{{$.lp.el_plain}}:</td>
<td class="editTableValue">
<input type="radio" name="plain" value="yes" text{($.plain==='yes')?'checked':''}/>{{$.lp.yes}}
<input type="radio" name="plain" value="no" text{($.plain!=='yes')?'checked':''}/>{{$.lp.no}}
</td>
</tr>
<tr>
<td class="editTableTitle">{{$.lp.el_round}}:</td>
<td class="editTableValue">
<input type="radio" name="round" value="yes" text{($.round==='yes')?'checked':''}/>{{$.lp.yes}}
<input type="radio" name="round" value="no" text{($.round!=='yes')?'checked':''}/>{{$.lp.no}}
</td>
</tr>
<tr>
<td class="editTableTitle">{{$.lp.el_circle}}:</td>
<td class="editTableValue">
<input type="radio" name="circle" value="yes" text{($.circle==='yes')?'checked':''}/>{{$.lp.yes}}
<input type="radio" name="circle" value="no" text{($.circle!=='yes')?'checked':''}/>{{$.lp.no}}
</td>
</tr>
<tr>
<td class="editTableTitle">{{$.lp.el_icon}}:</td>
<td class="editTableValue"><input type="text" name="icon" value="text{$.icon}" class="editTableInput"/></td>
</tr>
<tr>
<td class="editTableTitle">{{$.lp.el_disabled}}:</td>
<td class="editTableValue">
<input type="radio" name="disabled" value="yes" text{($.disabled==='yes')?'checked':''}/>{{$.lp.yes}}
<input type="radio" name="disabled" value="no" text{($.disabled!=='yes')?'checked':''}/>{{$.lp.no}}
</td>
</tr>
<tr>
<td class="editTableTitle">{{$.lp.el_loading}}:</td>
<td class="editTableValue">
<input type="radio" name="loading" value="yes" text{($.loading==='yes')?'checked':''}/>{{$.lp.yes}}
<input type="radio" name="loading" value="no" text{($.loading!=='yes')?'checked':''}/>{{$.lp.no}}
</td>
</tr>
<tr>
<td class="editTableTitle">{{$.lp.el_autofocus}}:</td>
<td class="editTableValue">
<input type="radio" name="autofocus" value="yes" text{($.autofocus==='yes')?'checked':''}/>{{$.lp.yes}}
<input type="radio" name="autofocus" value="no" text{($.autofocus!=='yes')?'checked':''}/>{{$.lp.no}}
</td>
</tr>
<tr>
<td class="editTableTitle">{{$.lp.el_isText}}:</td>
<td class="editTableValue">
<input type="radio" name="isText" value="yes" text{($.isText!=='no')?'checked':''}/>{{$.lp.yes}}
<input type="radio" name="isText" value="no" text{($.isText==='no')?'checked':''}/>{{$.lp.no}}
</td>
</tr>
</table>
<div class="MWFMaplist" name="elStyles" title="{{$.lp.style}}"></div>
<div class="MWFMaplist" name="elProperties" title="{{$.lp.attribute}}"></div>
</div>
<div title="{{$.lp.event}}" class="MWFTab">
<div class="MWFEventsArea" name="events"></div>
</div>
<div title="HTML" class="MWFTab">
<div class="MWFHTMLArea" style="width:100%; height:400px; border:0px;font-family: Verdana, Geneva, sans-serif; font-size:14px"></div>
</div>
<div title="JSON" class="MWFTab">
<div class="MWFJSONArea" style="font-family: Verdana, Geneva, sans-serif; font-size:14px"></div>
</div>
</div>
o2web/source/x_component_process_FormDesigner/Module/Elcontainer$Container/template.json 0 → 100644
浏览文件 @ 2ca95cc0
{
"id": "",
"name": "",
"type": "Elcontainer$Container",
"description": "",
"events": {
"queryLoad": {
"code": "",
"html": ""
},
"postLoad": {
"code": "",
"html": ""
},
"load": {
"code": "",
"html": ""
},
"click": {
"code": "",
"html": ""
},
"dblclick": {
"code": "",
"html": ""
},
"keydown": {
"code": "",
"html": ""
},
"keypress": {
"code": "",
"html": ""
},
"keyup": {
"code": "",
"html": ""
},
"mousedown": {
"code": "",
"html": ""
},
"mousemove": {
"code": "",
"html": ""
},
"mouseout": {
"code": "",
"html": ""
},
"mouseover": {
"code": "",
"html": ""
},
"mouseup": {
"code": "",
"html": ""
},
"focus": {
"code": "",
"html": ""
},
"blur": {
"code": "",
"html": ""
}
},
"properties": {},
"class": "",
"styles": {},
"container": ""
}
o2web/source/x_component_process_FormDesigner/Module/Elcontainer.js 0 → 100644
浏览文件 @ 2ca95cc0
MWF.xApplication.process.FormDesigner.Module = MWF.xApplication.process.FormDesigner.Module || {};
MWF.xDesktop.requireApp("process.FormDesigner", "Module.$ElComponent", null, false);
MWF.xApplication.process.FormDesigner.Module.Elcontainer = MWF.FCElcontainer = new Class({
Extends: MWF.FC$Component,
Implements: [Options, Events],
options: {
"style": "default",
"propertyPath": "../x_component_process_FormDesigner/Module/Elcontainer/elcontainer.html",
"layoutTemplates": {
"side-header-main-footer":"<el-container>\n" +
" <el-aside></el-aside>\n" +
" <el-container>\n" +
" <el-header></el-header>\n" +
" <el-main></el-main>\n" +
" <el-footer></el-footer>\n" +
" </el-container>\n" +
"</el-container>",
"header-main": "<el-container>\n" +
" <el-header></el-header>\n" +
" <el-main></el-main>\n" +
"</el-container>",
"header-main-footer": "<el-container>\n" +
" <el-header></el-header>\n" +
" <el-main></el-main>\n" +
" <el-footer></el-footer>\n" +
"</el-container>",
"header-side-main": "<el-container>\n" +
" <el-header></el-header>\n" +
" <el-container>\n" +
" <el-aside></el-aside>\n" +
" <el-main></el-main>\n" +
" </el-container>\n" +
"</el-container>",
"header-side-main-footer":"<el-container>\n" +
" <el-header></el-header>\n" +
" <el-container>\n" +
" <el-aside></el-aside>\n" +
" <el-container>\n" +
" <el-main></el-main>\n" +
" <el-footer></el-footer>\n" +
" </el-container>\n" +
" </el-container>\n" +
"</el-container>",
"header-footer-side-main":"<el-container>\n" +
" <el-header></el-header>\n" +
" <el-container>\n" +
" <el-aside></el-aside>\n" +
" <el-container>\n" +
" <el-main></el-main>\n" +
" </el-container>\n" +
" </el-container>\n" +
" <el-footer></el-footer>\n" +
"</el-container>",
"footer-side-header-main":"<el-container>\n" +
" <el-container>\n" +
" <el-aside></el-aside>\n" +
" <el-container>\n" +
" <el-header></el-header>\n" +
" <el-main></el-main>\n" +
" </el-container>\n" +
" </el-container>\n" +
" <el-footer></el-footer>\n" +
"</el-container>",
"side-header-main": "<el-container>\n" +
" <el-aside></el-aside>\n" +
" <el-container>\n" +
" <el-header></el-header>\n" +
" <el-main></el-main>\n" +
" </el-container>\n" +
"</el-container>"
}
},
_initModuleType: function(){
this.className = "Elcontainer"
this.moduleType = "component";
this.moduleName = "elcontainer";
},
initialize: function(form, options){
this.setOptions(options);
this._initModuleType();
this.path = "../x_component_process_FormDesigner/Module/"+this.className+"/";
this.cssPath = "../x_component_process_FormDesigner/Module/"+this.className+"/"+this.options.style+"/css.wcss";
this._loadCss();
this.form = form;
this.container = null;
this.containerNode = null;
this.isPropertyLoaded = false;
this.containers = [];
this.elements = [];
//this._dragMoveComplete = this._dragComplete;
},
_dragMoveComplete: MWF.FC$Component.prototype._dragComplete,
_createMoveNode: function(){
var html = "<section class=\"el-container\" style='height: 100%'>";
html += "<aside class=\"el-aside\" style=\"width: 40px; background-color: #D3DCE6\"></aside>";
html += "<section class=\"el-container is-vertical\">";
html += "<header class=\"el-header\" style=\"height: 20px; background-color: #B3C0D1\"></header>";
html += "<main class=\"el-main\"></main>";
html += "<footer class=\"el-footer\" style=\"height: 20px; background-color: #B3C0D1\"></footer>";
html += "</section>";
html += "</section>";
// var tableHTML = "<table border=\"0\" cellpadding=\"0\" cellspacing=\"2\" width=\"100%\" align=\"center\">";
// tableHTML += "<tr><td></td><td></td><td></td></tr>";
// tableHTML += "<tr><td></td><td></td><td></td></tr>";
// tableHTML += "<tr><td></td><td></td><td></td></tr>";
// tableHTML += "</table>";
this.moveNode = new Element("div", {
"html": html
}).inject(this.form.container);
// this.moveNode = divNode.getFirst();
// this.moveNode.inject(divNode, "after");
// divNode.destroy();
this.moveNode.setStyles(this.css.moduleNodeMove);
},
_createElementHtml: function(){
//var html = "<el-container>";
var html = "";
html += " <el-aside></el-aside>";
html += " <el-container>";
html += " <el-header></el-header>";
html += " <el-main></el-main>";
html += " <el-footer></el-footer>";
html += " </el-container>";
//html += "</el-container>";
return html;
},
_createNode: function(callback){
var module = this;
var url = this.path+"elcontainerCreate.html";
MWF.require("MWF.widget.Dialog", function(){
var size = $(document.body).getSize();
var x = size.x/2-395;
var y = size.y/2-280;
var dlg = new MWF.DL({
"title": "Create Elcontainer",
"style": "user",
"top": y,
"left": x-40,
"fromTop":size.y/2-65,
"fromLeft": size.x/2,
"width": 790,
"height": 560,
"isResize": false,
"url": url,
"lp": MWF.xApplication.process.FormDesigner.LP.propertyTemplate,
"container": layout.desktop.node,
"buttonList": [
{
"text": MWF.APPFD.LP.button.ok,
"action": function(){
var value = this.editor.getValue();
module._createElcontainerNode(callback, value);
this.close();
}
},
{
"text": MWF.APPFD.LP.button.cancel,
"type": "cancel",
"action": function(){
module._dragCancel();
this.close();
}
}
],
"onPostShow": function(){
module._loadCreateHtmlEditor(this);
module._loadCreateLayoutSelect(this);
}
});
dlg.show();
});
},
_loadCreateHtmlEditor: function(dlg){
var codeNode = dlg.content.getElement(".MWFVueCode");
o2.require("o2.widget.JavascriptEditor", function(){
dlg.editor = new o2.widget.JavascriptEditor(codeNode, {
"option": {
value: this.options.layoutTemplates["side-header-main-footer"],
mode: "html",
"lineNumbers": false
},
});
dlg.editor.load();
}.bind(this));
},
_loadCreateLayoutSelect: function(dlg){
var imgs = dlg.content.getElements("img");
imgs.each(function(img){
img.addEvent("click", function(){
imgs.removeClass("mainColor_border");
imgs.setStyle("border-color", "#ffffff");
img.addClass("mainColor_border");
img.setStyle("border-color", "#4A90E2");
dlg.editor.setValue(this.options.layoutTemplates[img.get("name")]);
}.bind(this));
}.bind(this));
},
_createElcontainerNode: function(callback, value){
var node = new Element("div", {
"html": value
});
this.node = node.getFirst();
this.node.dispose();
node.destroy();
this.node.set({
"MWFType": this.moduleName,
"id": this.json.id,
"styles": this.css.moduleNode,
"events": {
"selectstart": function(){
return false;
}
}
});
this._loadVue(function(){
this._mountVueApp(callback);
}.bind(this));
},
_loadVue: function(callback){
if (!window.Vue){
o2.load(["vue", "elementui"], { "sequence": true }, callback);
}else{
if (callback) callback();
}
},
_mountVueApp: function(callback){
if (!this.vueApp) this.vueApp = this._createVueExtend(callback);
this.vm = new Vue(this.vueApp).$mount(this.node);
},
_createVueExtend: function(callback){
var _self = this;
return {
data: this._createVueData(),
mounted: function(){
_self._afterMounted(this.$el);
if (callback) callback();
}
};
},
_createVueData: function(callback){
return {};
},
_afterMounted: function(el){
this.node = el;
this.node.store("module", this);
},
_dragComplete: function(){
if (!this.node){
this._createNode(function(){
this._dragMoveComplete();
}.bind(this));
}else{
this._dragMoveComplete();
}
},
_getElements: function(){
this.elements = [];
},
_getContainerDoms: function(dom){
var node = dom.getFirst();
while (node){
var tag = node.tagName.toString().toLowerCase();
if (tag!=="section" || !node.get("mwftype")){
switch (tag){
case "aside":
this.asideNodes.push(node);
break;
case "header":
this.headerNodes.push(node);
break;
case "main":
this.mainNodes.push(node);
break;
case "footer":
this.footerNodes.push(node);
break;
default:
this._getContainerDoms(node);
}
}
node = node.getNext();
}
},
_getContainers: function(){
if (!this.containers || !this.containers.length)this.containers = [];
this.asideNodes = [];
this.headerNodes = [];
this.mainNodes = [];
this.footerNodes = [];
this._getContainerDoms(this.node);
// var asides = this.node.getElements("aside");
// var headers = this.node.getElements("header");
// var mains = this.node.getElements("main");
// var footers = this.node.getElements("footer");
this.form.getTemplateData("Elcontainer$Container", function(data){
this.asideNodes.each(function(aside){
this._createContainer(aside, data, "Elcontainer$Aside");
}.bind(this));
this.headerNodes.each(function(header){
this._createContainer(header, data, "Elcontainer$Header");
}.bind(this));
this.mainNodes.each(function(main){
this._createContainer(main, data, "Elcontainer$Main");
}.bind(this));
this.footerNodes.each(function(footer){
this._createContainer(footer, data, "Elcontainer$Footer");
}.bind(this));
}.bind(this));
},
_createContainer: function(node, data, className){
data.type = className;
var json = this.form.getDomjson(node);
var container = null;
if (!json){
var moduleData = Object.clone(data);
container = new MWF["FC"+className](this.form);
container.container = this;
container.load(moduleData, node, this);
container.node.set({
"MWFType": container.moduleName,
"id": container.json.id
});
}else{
var moduleData = Object.clone(data);
Object.merge(moduleData, json);
Object.merge(json, moduleData);
container = new MWF["FC"+className](this.form);
container.container = this;
container.load(json, node, this);
container.node.set({
"MWFType": container.moduleName,
"id": container.json.id
});
}
this.containers.push(container);
}
});
o2web/source/x_component_process_FormDesigner/Module/Elcontainer/default/css.wcss 0 → 100644
浏览文件 @ 2ca95cc0
{
"moduleNodeMove": {
"border": "2px dashed #ffa200",
"height": "80px",
"overflow": "hidden",
"margin": "3px",
"display": "block",
"-webkit-user-select": "none",
"-moz-user-select": "none",
"position": "absolute",
"z-index": 102,
"opacity": 0.7,
"width": "160px",
"cursor": "move"
},
"moduleNodeShow": {
"border": "1px dashed #333",
"height": "2px",
"cursor": "pointer",
"line-height": "22px",
"overflow": "hidden",
"margin": "3px 3px",
"-webkit-user-select": "none",
"-moz-user-select": "none",
"position": "static",
"display": "block",
"top": "auto",
"left": "auto",
"width": "auto",
"opacity": 0.5,
"background": "#ffa200"
},
"moduleNode": {
"border": "1px dashed #333",
"min-height": "30px",
"cursor": "pointer",
"margin": "3px 3px",
"-webkit-user-select": "none",
"-moz-user-select": "none",
"opacity": 1
}
}
o2web/source/x_component_process_FormDesigner/Module/Elcontainer/elcontainer.html 0 → 100644
浏览文件 @ 2ca95cc0
<div style="background-color: #FFF; overflow: hidden">
<div title="{{$.lp.base}}" class="MWFTab">
<table width="100%" border="0" cellpadding="5" cellspacing="0" class="editTable">
<tr>
<td class="editTableTitle">{{$.lp.id}}:</td>
<td class="editTableValue"><input type="text" name="id" value="text{$.id}" class="editTableInput"/></td>
</tr>
<tr>
<td class="editTableTitle">{{$.lp.name}}:</td>
<td class="editTableValue"><input type="text" name="name" value="text{$.name}" class="editTableInput"/></td>
</tr>
<tr>
<td class="editTableTitle">{{$.lp.description}}:</td>
<td class="editTableValue"><input type="text" name="description" value="text{$.description}" class="editTableInput"/></td>
</tr>
</table>
<!-- <div style="height:24px; text-align: center; line-height: 24px; background-color: #EEE; border-top: 1px solid #999;font-weight:bold;">{{$.lp.layout}}</div>-->
<!-- <div style="padding: 5px">-->
<!-- <img style="width:160px; margin: 5px; border: 3px solid #ffffff; cursor: pointer" src="../x_component_process_FormDesigner/Module/Elcontainer/default/layout/layout1.png">-->
<!-- <img style="width:160px; margin: 5px; border: 3px solid #ffffff; cursor: pointer" src="../x_component_process_FormDesigner/Module/Elcontainer/default/layout/layout2.png">-->
<!-- <img style="width:160px; margin: 5px; border: 3px solid #ffffff; cursor: pointer" src="../x_component_process_FormDesigner/Module/Elcontainer/default/layout/layout3.png">-->
<!-- <img style="width:160px; margin: 5px; border: 3px solid #ffffff; cursor: pointer" src="../x_component_process_FormDesigner/Module/Elcontainer/default/layout/layout4.png">-->
<!-- <img style="width:160px; margin: 5px; border: 3px solid #ffffff; cursor: pointer" src="../x_component_process_FormDesigner/Module/Elcontainer/default/layout/layout5.png">-->
<!-- <img style="width:160px; margin: 5px; border: 3px solid #ffffff; cursor: pointer" src="../x_component_process_FormDesigner/Module/Elcontainer/default/layout/layout6.png">-->
<!-- <img style="width:160px; margin: 5px; border: 3px solid #ffffff; cursor: pointer" src="../x_component_process_FormDesigner/Module/Elcontainer/default/layout/layout7.png">-->
<!-- <img style="width:160px; margin: 5px; border: 3px solid #ffffff; cursor: pointer" src="../x_component_process_FormDesigner/Module/Elcontainer/default/layout/layout8.png">-->
<!-- <img style="width:160px; margin: 5px; border: 3px solid #ffffff; cursor: pointer" src="../x_component_process_FormDesigner/Module/Elcontainer/default/layout/layout9.png">-->
<!-- </div>-->
<!-- <table width="100%" border="0" cellpadding="5" cellspacing="0" class="editTable">-->
<!-- <tr>-->
<!-- <td class="editTableTitle">{{$.lp.size}}:</td>-->
<!-- <td class="editTableValue">-->
<!-- <input type="radio" name="size" value="medium" text{($.size==='medium')?'checked':''}/>medium-->
<!-- <input type="radio" name="size" value="small" text{($.size==='small')?'checked':''}/>small-->
<!-- <input type="radio" name="size" value="mini" text{($.size==='mini')?'checked':''}/>mini-->
<!-- <input type="radio" name="size" value="auto" text{($.size!=='medium' && $.size!=='small' && $.size!=='mini')?'checked':''}/>auto-->
<!-- </td>-->
<!-- </tr>-->
<!-- <tr>-->
<!-- <td class="editTableTitle">{{$.lp.el_plain}}:</td>-->
<!-- <td class="editTableValue">-->
<!-- <input type="radio" name="plain" value="yes" text{($.plain==='yes')?'checked':''}/>{{$.lp.yes}}-->
<!-- <input type="radio" name="plain" value="no" text{($.plain!=='yes')?'checked':''}/>{{$.lp.no}}-->
<!-- </td>-->
<!-- </tr>-->
<!-- <tr>-->
<!-- <td class="editTableTitle">{{$.lp.el_round}}:</td>-->
<!-- <td class="editTableValue">-->
<!-- <input type="radio" name="round" value="yes" text{($.round==='yes')?'checked':''}/>{{$.lp.yes}}-->
<!-- <input type="radio" name="round" value="no" text{($.round!=='yes')?'checked':''}/>{{$.lp.no}}-->
<!-- </td>-->
<!-- </tr>-->
<!-- <tr>-->
<!-- <td class="editTableTitle">{{$.lp.el_circle}}:</td>-->
<!-- <td class="editTableValue">-->
<!-- <input type="radio" name="circle" value="yes" text{($.circle==='yes')?'checked':''}/>{{$.lp.yes}}-->
<!-- <input type="radio" name="circle" value="no" text{($.circle!=='yes')?'checked':''}/>{{$.lp.no}}-->
<!-- </td>-->
<!-- </tr>-->
<!-- <tr>-->
<!-- <td class="editTableTitle">{{$.lp.el_icon}}:</td>-->
<!-- <td class="editTableValue"><input type="text" name="icon" value="text{$.icon}" class="editTableInput"/></td>-->
<!-- </tr>-->
<!-- <tr>-->
<!-- <td class="editTableTitle">{{$.lp.el_disabled}}:</td>-->
<!-- <td class="editTableValue">-->
<!-- <input type="radio" name="disabled" value="yes" text{($.disabled==='yes')?'checked':''}/>{{$.lp.yes}}-->
<!-- <input type="radio" name="disabled" value="no" text{($.disabled!=='yes')?'checked':''}/>{{$.lp.no}}-->
<!-- </td>-->
<!-- </tr>-->
<!-- <tr>-->
<!-- <td class="editTableTitle">{{$.lp.el_loading}}:</td>-->
<!-- <td class="editTableValue">-->
<!-- <input type="radio" name="loading" value="yes" text{($.loading==='yes')?'checked':''}/>{{$.lp.yes}}-->
<!-- <input type="radio" name="loading" value="no" text{($.loading!=='yes')?'checked':''}/>{{$.lp.no}}-->
<!-- </td>-->
<!-- </tr>-->
<!-- <tr>-->
<!-- <td class="editTableTitle">{{$.lp.el_autofocus}}:</td>-->
<!-- <td class="editTableValue">-->
<!-- <input type="radio" name="autofocus" value="yes" text{($.autofocus==='yes')?'checked':''}/>{{$.lp.yes}}-->
<!-- <input type="radio" name="autofocus" value="no" text{($.autofocus!=='yes')?'checked':''}/>{{$.lp.no}}-->
<!-- </td>-->
<!-- </tr>-->
<!-- <tr>-->
<!-- <td class="editTableTitle">{{$.lp.el_isText}}:</td>-->
<!-- <td class="editTableValue">-->
<!-- <input type="radio" name="isText" value="yes" text{($.isText!=='no')?'checked':''}/>{{$.lp.yes}}-->
<!-- <input type="radio" name="isText" value="no" text{($.isText==='no')?'checked':''}/>{{$.lp.no}}-->
<!-- </td>-->
<!-- </tr>-->
<!-- </table>-->
<div class="MWFMaplist" name="styles" title="{{$.lp.style}}"></div>
<div class="MWFMaplist" name="properties" title="{{$.lp.attribute}}"></div>
</div>
<div title="{{$.lp.event}}" class="MWFTab">
<div class="MWFEventsArea" name="events"></div>
</div>
<div title="HTML" class="MWFTab">
<div class="MWFHTMLArea" style="width:100%; height:400px; border:0px;font-family: Verdana, Geneva, sans-serif; font-size:14px"></div>
</div>
<div title="JSON" class="MWFTab">
<div class="MWFJSONArea" style="font-family: Verdana, Geneva, sans-serif; font-size:14px"></div>
</div>
</div>
o2web/source/x_component_process_FormDesigner/Module/Elcontainer/elcontainerCreate.html 0 → 100644
浏览文件 @ 2ca95cc0
<div style="font-size:12px">
<div style="height:28px; line-height:28px; font-size: 14px; padding-left: 10px; margin-top: 10px">{{$.lp.layoutCode}}</div>
<div style="margin:0 10px; height: 160px; border: 1px solid #999999">
<div style="height: 160px;" class="MWFVueCode"></div>
</div>
<div style="height:28px; line-height:28px; font-size: 14px; padding-left: 10px; margin-top: 10px">{{$.lp.layoutTemplate}}</div>
<div style="padding: 5px">
<img name="side-header-main-footer" class="mainColor_border" style="width:160px; margin: 5px; border-width: 3px; border-style: solid; border-color: #4A90E2; cursor: pointer" src="../x_component_process_FormDesigner/Module/Elcontainer/default/layout/layout9.png">
<img name="header-main" style="width:160px; margin: 5px; border-width: 3px; border-style: solid; border-color: #FFFFFF; cursor: pointer" src="../x_component_process_FormDesigner/Module/Elcontainer/default/layout/layout1.png">
<img name="header-main-footer" style="width:160px; margin: 5px; border-width: 3px; border-style: solid; border-color: #FFFFFF; cursor: pointer" src="../x_component_process_FormDesigner/Module/Elcontainer/default/layout/layout2.png">
<!-- <img style="width:160px; margin: 5px; border-width: 3px; border-style: solid; border-color: #FFFFFF; cursor: pointer" src="../x_component_process_FormDesigner/Module/Elcontainer/default/layout/layout3.png">-->
<img name="header-side-main" style="width:160px; margin: 5px; border-width: 3px; border-style: solid; border-color: #FFFFFF; cursor: pointer" src="../x_component_process_FormDesigner/Module/Elcontainer/default/layout/layout4.png">
<img name="header-side-main-footer" style="width:160px; margin: 5px; border-width: 3px; border-style: solid; border-color: #FFFFFF; cursor: pointer" src="../x_component_process_FormDesigner/Module/Elcontainer/default/layout/layout5.png">
<img name="header-footer-side-main" style="width:160px; margin: 5px; border-width: 3px; border-style: solid; border-color: #FFFFFF; cursor: pointer" src="../x_component_process_FormDesigner/Module/Elcontainer/default/layout/layout6.png">
<img name="footer-side-header-main" style="width:160px; margin: 5px; border-width: 3px; border-style: solid; border-color: #FFFFFF; cursor: pointer" src="../x_component_process_FormDesigner/Module/Elcontainer/default/layout/layout7.png">
<img name="side-header-main" style="width:160px; margin: 5px; border-width: 3px; border-style: solid; border-color: #FFFFFF; cursor: pointer" src="../x_component_process_FormDesigner/Module/Elcontainer/default/layout/layout8.png">
</div>
</div>
o2web/source/x_component_process_FormDesigner/Module/Elcontainer/template.json 0 → 100644
浏览文件 @ 2ca95cc0
{
"id": "",
"name": "",
"type": "Elcontainer",
"description": "",
"events": {
"queryLoad": {
"code": "",
"html": ""
},
"postLoad": {
"code": "",
"html": ""
},
"load": {
"code": "",
"html": ""
},
"click": {
"code": "",
"html": ""
},
"dblclick": {
"code": "",
"html": ""
},
"keydown": {
"code": "",
"html": ""
},
"keypress": {
"code": "",
"html": ""
},
"keyup": {
"code": "",
"html": ""
},
"mousedown": {
"code": "",
"html": ""
},
"mousemove": {
"code": "",
"html": ""
},
"mouseout": {
"code": "",
"html": ""
},
"mouseover": {
"code": "",
"html": ""
},
"mouseup": {
"code": "",
"html": ""
},
"focus": {
"code": "",
"html": ""
},
"blur": {
"code": "",
"html": ""
}
},
"properties": {},
"class": "",
"styles": {},
"container": ""
}
o2web/source/x_component_process_FormDesigner/Module/Elicon.js 0 → 100644
浏览文件 @ 2ca95cc0
MWF.xApplication.process.FormDesigner.Module = MWF.xApplication.process.FormDesigner.Module || {};
MWF.xDesktop.requireApp("process.FormDesigner", "Module.$ElElement", null, false);
MWF.xApplication.process.FormDesigner.Module.Elicon = MWF.FCElicon = new Class({
Extends: MWF.FC$ElElement,
Implements: [Options, Events],
options: {
"style": "default",
"propertyPath": "../x_component_process_FormDesigner/Module/Elicon/elicon.html"
},
_initModuleType: function(){
this.className = "Elicon"
this.moduleType = "element";
this.moduleName = "elicon";
},
_createElementHtml: function(){
debugger;
var html = "<i class='"+(this.json.icon || "el-icon-platform-eleme")+"'";
if (this.json.elProperties){
Object.keys(this.json.elProperties).forEach(function(k){
if (this.json.elProperties[k]) html += " "+k+"=\""+this.json.elProperties[k]+"\"";
}, this);
}
if (this.json.elStyles){
var style = "";
Object.keys(this.json.elStyles).forEach(function(k){
if (this.json.elStyles[k]) style += k+":"+this.json.elStyles[k]+";";
}, this);
html += " style=\""+style+"\"";
}
html += "></i>";
return html;
},
_createMoveNode: function(){
this.moveNode = new Element("div", {
"MWFType": "label",
"styles": this.css.moduleNodeMove,
"events": {
"selectstart": function(){
return false;
}
}
}).inject(this.form.container);
},
_createCopyNode: function(){
this.copyNode = new Element("div", {
"styles": this.css.moduleNodeShow
});
this.copyNode.addEvent("selectstart", function(){
return false;
});
},
_getCopyNode: function(){
if (!this.copyNode) this._createCopyNode();
this.copyNode.setStyle("display", "inline-block");
return this.copyNode;
},
setPropertyName: function(){},
setPropertyId: function(){}
});
o2web/source/x_component_process_FormDesigner/Module/Elicon/default/css.wcss 0 → 100644
浏览文件 @ 2ca95cc0
{
"moduleNodeMove": {
"border-radius": "5px",
"border": "1px solid #ffa200",
"overflow": "hidden",
"margin": "3px",
"-webkit-user-select": "none",
"-moz-user-select": "none",
"position": "absolute",
"z-index": 10002,
"opacity": 0.7,
"cursor": "move",
"height": "28px",
"width": "28px",
"line-height": "26px",
"padding": "0",
"display": "inline-block"
},
"moduleNodeShow": {
"border": "1px solid #333",
"margin": "3px",
"-webkit-user-select": "none",
"-moz-user-select": "none",
"position": "static",
"top": "auto",
"left": "auto",
"width": "18px",
"height": "2px",
"opacity": 0.5,
"display": "inline-block",
"background": "#ffa200"
},
"moduleNode": {
"border": "1px dashed #333",
"overflow": "hidden",
"cursor": "pointer",
"margin": "3px",
"-webkit-user-select": "none",
"-moz-user-select": "none",
"position": "static",
"top": "auto",
"left": "auto",
"opacity": 1,
"font-size": "16px",
"display": "inline-block"
}
}
o2web/source/x_component_process_FormDesigner/Module/Elicon/elicon.html 0 → 100644
浏览文件 @ 2ca95cc0
<div style="background-color: #FFF; overflow: hidden">
<div title="{{$.lp.base}}" class="MWFTab">
<table width="100%" border="0" cellpadding="5" cellspacing="0" class="editTable">
<tr>
<td class="editTableTitle">{{$.lp.id}}:</td>
<td class="editTableValue"><input type="text" name="id" value="text{$.id}" class="editTableInput"/></td>
</tr>
<tr>
<td class="editTableTitle">{{$.lp.name}}:</td>
<td class="editTableValue"><input type="text" name="name" value="text{$.name}" class="editTableInput"/></td>
</tr>
<tr>
<td class="editTableTitle">{{$.lp.description}}:</td>
<td class="editTableValue"><input type="text" name="description" value="text{$.description}" class="editTableInput"/></td>
</tr>
</table>
<table width="100%" border="0" cellpadding="5" cellspacing="0" class="editTable">
<tr>
<td class="editTableTitle">{{$.lp.el_icon}}:</td>
<td class="editTableValue">
<div class="MWFElIcon" name="icon"></div>
</td>
</tr>
</table>
<div class="MWFMaplist" name="elStyles" title="{{$.lp.style}}"></div>
<div class="MWFMaplist" name="elProperties" title="{{$.lp.attribute}}"></div>
</div>
<div title="{{$.lp.event}}" class="MWFTab">
<div class="MWFEventsArea" name="events"></div>
</div>
<div title="HTML" class="MWFTab">
<div class="MWFHTMLArea" style="width:100%; height:400px; border:0px;font-family: Verdana, Geneva, sans-serif; font-size:14px"></div>
</div>
<div title="JSON" class="MWFTab">
<div class="MWFJSONArea" style="font-family: Verdana, Geneva, sans-serif; font-size:14px"></div>
</div>
</div>
o2web/source/x_component_process_FormDesigner/Module/Elicon/template.json 0 → 100644
浏览文件 @ 2ca95cc0
{
"id": "",
"name": "",
"type": "Elicon",
"icon": "el-icon-platform-eleme",
"description": "",
"events": {
"queryLoad": {
"code": "",
"html": ""
},
"postLoad": {
"code": "",
"html": ""
},
"load": {
"code": "",
"html": ""
},
"click": {
"code": "",
"html": ""
},
"dblclick": {
"code": "",
"html": ""
},
"keydown": {
"code": "",
"html": ""
},
"keypress": {
"code": "",
"html": ""
},
"keyup": {
"code": "",
"html": ""
},
"mousedown": {
"code": "",
"html": ""
},
"mousemove": {
"code": "",
"html": ""
},
"mouseout": {
"code": "",
"html": ""
},
"mouseover": {
"code": "",
"html": ""
},
"mouseup": {
"code": "",
"html": ""
},
"focus": {
"code": "",
"html": ""
},
"blur": {
"code": "",
"html": ""
}
},
"properties": {},
"class": "",
"styles": {},
"container": ""
}
o2web/source/x_component_process_FormDesigner/Module/Elradio.js 0 → 100644
浏览文件 @ 2ca95cc0
MWF.xApplication.process.FormDesigner.Module = MWF.xApplication.process.FormDesigner.Module || {};
MWF.xDesktop.requireApp("process.FormDesigner", "Module.Checkbox", null, false);
MWF.xApplication.process.FormDesigner.Module.Elradio = MWF.FCElradio = new Class({
Extends: MWF.FC$ElElement,
Implements: [Options, Events],
options: {
"style": "default",
"type": "elradio",
"path": "../x_component_process_FormDesigner/Module/Elradio/",
"propertyPath": "../x_component_process_FormDesigner/Module/Elradio/elradio.html"
},
_initModuleType: function(){
this.className = "Elradio"
this.moduleType = "element";
this.moduleName = "elradio";
},
_createElementHtml: function(){
debugger;
var html = "<el-radio-group style='box-sizing: border-box!important'";
if (this.json.textColor) html += " text-color=\""+this.json.textColor+"\"";
if (this.json.fillColor) html += " fill=\""+this.json.fillColor+"\"";
if (this.json.size && this.json.size!=="default") html += " size=\""+this.json.size+"\"";
if (this.json.elGroupProperties){
Object.keys(this.json.elGroupProperties).forEach(function(k){
if (this.json.elGroupProperties[k]) html += " "+k+"=\""+this.json.elGroupProperties[k]+"\"";
}, this);
}
if (this.json.elGroupStyles){
var style = "";
Object.keys(this.json.elGroupStyles).forEach(function(k){
if (this.json.elGroupStyles[k]) style += k+":"+this.json.elGroupStyles[k]+";";
}, this);
html += " style=\""+style+"\"";
}
html += (this.json.buttonRadio) ? " ><el-radio-button" : " ><el-radio";
if (this.json.border===true) html += " border";
if (this.json.elProperties){
Object.keys(this.json.elProperties).forEach(function(k){
if (this.json.elProperties[k]) html += " "+k+"=\""+this.json.elProperties[k]+"\"";
}, this);
}
var radiostyle = "box-sizing: border-box!important;";
if (this.json.elStyles){
Object.keys(this.json.elStyles).forEach(function(k){
if (this.json.elStyles[k]) radiostyle += k+":"+this.json.elStyles[k]+";";
}, this);
}
html += " style=\""+radiostyle+"\"";
html += ">"+this.json.id+((this.json.buttonRadio) ? "</el-radio-button></el-radio-group>" : "</el-radio></el-radio-group>");
return html;
},
_createCopyNode: function(){
this.copyNode = new Element("div", {
"styles": this.css.moduleNodeShow
});
this.copyNode.addEvent("selectstart", function(){
return false;
});
},
_getCopyNode: function(){
if (!this.copyNode) this._createCopyNode();
this.copyNode.setStyle("display", "inline-block");
return this.copyNode;
},
setPropertyId: function(){
if (this.isPropertyLoaded) if (this.vm) this.resetElement();
}
});
o2web/source/x_component_process_FormDesigner/Module/Elradio/default/css.wcss 0 → 100644
浏览文件 @ 2ca95cc0
{
"moduleNodeMove": {
"border": "2px solid #ffa200",
"overflow": "hidden",
"margin": "3px",
"-webkit-user-select": "none",
"-moz-user-select": "none",
"position": "absolute",
"z-index": 10002,
"opacity": 0.7,
"width": "120px",
"cursor": "move",
"display": "inline-block"
},
"moduleNodeShow": {
"border": "1px solid #333",
"height": "2px",
"cursor": "pointer",
"margin": "3px",
"-webkit-user-select": "none",
"-moz-user-select": "none",
"position": "static",
"top": "auto",
"left": "auto",
"width": "18px",
"opacity": 0.5,
"background": "#ffa200",
"display": "inline-block",
"line-height": "2px",
"font-size": "2px"
},
"moduleNode": {
"border": "1px dashed #999",
"cursor": "pointer",
"overflow": "hidden",
"margin": "3px",
"-webkit-user-select": "none",
"-moz-user-select": "none",
"position": "static",
"top": "auto",
"left": "auto",
"opacity": 1,
"padding": "0 3px",
"display": "inline-block"
}
}
o2web/source/x_component_process_FormDesigner/Module/Elradio/elradio.html 0 → 100644
浏览文件 @ 2ca95cc0
<div style="background-color: #FFF; overflow: hidden">
<div title="{{$.lp.base}}" class="MWFTab">
<table width="100%" border="0" cellpadding="5" cellspacing="0" class="editTable">
<tr>
<td class="editTableTitle">{{$.lp.id}}:</td>
<td class="editTableValue"><input type="text" name="id" value="text{$.id}" class="editTableInput"/></td>
</tr>
<tr>
<td class="editTableTitle">{{$.lp.name}}:</td>
<td class="editTableValue"><input type="text" name="name" value="text{$.name}" class="editTableInput"/></td>
</tr>
<tr>
<td class="editTableTitle">{{$.lp.description}}:</td>
<td class="editTableValue"><input type="text" name="description" value="text{$.description}" class="editTableInput"/></td>
</tr>
<tr>
<td class="editTableTitle">{{$.lp.readonly}}:</td>
<td class="editTableValue">
<input type="radio" name="isReadonly" value="true" text{($.isReadonly)?'checked':''}/>{{$.lp.yes}}
<input type="radio" name="isReadonly" value="false" text{(!$.isReadonly)?'checked':''}/>{{$.lp.no}}
</td>
</tr>
<tr>
<td class="editTableTitle">{{$.lp.options}}:</td>
<td class="editTableValue">
<input class="editTableRadio" onclick="if (this.checked){ $('text{$.pid}selectEditItemValues').setStyle('display', 'block'); $('text{$.pid}selectEditItemScript').setStyle('display', 'none')}" name="itemType" text{($.itemType=='values')?'checked':''} type="radio" value="values"/>{{$.lp.textValue}}
<input class="editTableRadio" onclick="if (this.checked){ $('text{$.pid}selectEditItemScript').setStyle('display', 'block'); $('text{$.pid}selectEditItemValues').setStyle('display', 'none')}" name="itemType" text{($.itemType=='script')?'checked':''} type="radio" value="script"/>{{$.lp.script}}
</td>
</tr>
</table>
<div id="text{$.pid}selectEditItemValues" style="display: text{($.itemType=='values')?'block':'none'}" class="MWFArraylist" name="itemValues" title="{{$.lp.options}}"></div>
<div id="text{$.pid}selectEditItemScript" style="display: text{($.itemType=='script')?'block':'none'}" class="MWFScriptArea" name="itemScript" title="{{$.lp.optionScript}} (S)"></div>
<table width="100%" border="0" cellpadding="5" cellspacing="0" class="editTable">
<tr>
<td class="editTableTitle">{{$.lp.el_buttonRadio}}:</td>
<td class="editTableValue">
<input type="radio" name="buttonRadio" onclick="if (this.checked){ $('text{$.pid}radioBaseAttrArea').setStyle('display', 'none'); $('text{$.pid}buttonBaseAttrArea').setStyle('display', 'block')}" value="true" text{($.buttonRadio==true)?'checked':''}/>{{$.lp.yes}}
<input type="radio" name="buttonRadio" onclick="if (this.checked){ $('text{$.pid}radioBaseAttrArea').setStyle('display', 'block'); $('text{$.pid}buttonBaseAttrArea').setStyle('display', 'none')}" value="false" text{($.buttonRadio!=true)?'checked':''}/>{{$.lp.no}}
</td>
</tr>
</table>
<div id="text{$.pid}radioBaseAttrArea" style="display: text{($.buttonRadio==true)?'none':'block'}">
<table width="100%" border="0" cellpadding="5" cellspacing="0" class="editTable">
<tr>
<td class="editTableTitle">{{$.lp.el_border}}:</td>
<td class="editTableValue">
<input type="radio" name="border" value="true" text{($.border==true)?'checked':''}/>{{$.lp.yes}}
<input type="radio" name="border" value="false" text{($.border!=true)?'checked':''}/>{{$.lp.no}}
</td>
</tr>
</table>
</div>
<table width="100%" border="0" cellpadding="5" cellspacing="0" class="editTable">
<tr>
<td class="editTableTitle">{{$.lp.size}}:</td>
<td class="editTableValue">
<input type="radio" name="size" value="medium" text{($.size==='medium')?'checked':''}/>medium
<input type="radio" name="size" value="small" text{($.size==='small')?'checked':''}/>small
<input type="radio" name="size" value="mini" text{($.size==='mini')?'checked':''}/>mini
<input type="radio" name="size" value="default" text{($.size!=='medium' && $.size!=='small' && $.size!=='mini')?'checked':''}/>default
</td>
</tr>
</table>
<div id="text{$.pid}buttonBaseAttrArea" style="display: text{($.buttonRadio!=true)?'none':'block'}">
<table width="100%" border="0" cellpadding="5" cellspacing="0" class="editTable">
<tr>
<td class="editTableTitle">{{$.lp.el_radioColor}}:</td>
<td class="editTableValue">
<div class="o2_vue MWFElementColor" name="textColor"><el-color-picker v-model="textColor" @change="change" size="mini" style="box-sizing: border-box!important;"></el-color-picker></div>
<!-- <input type="color" name="textColor" value="text{$.textColor}" class="editTableInput"/>-->
</td>
</tr>
<tr>
<td class="editTableTitle">{{$.lp.el_radioFillColor}}:</td>
<td class="editTableValue">
<div class="o2_vue MWFElementColor" name="fillColor"><el-color-picker v-model="fillColor" @change="change" size="mini" style="box-sizing: border-box!important;"></el-color-picker></div>
<!-- <input type="color" name="fillColor" value="text{$.fillColor}" class="editTableInput"/>-->
</td>
</tr>
</table>
</div>
<hr/>
<table width="100%" border="0" cellpadding="5" cellspacing="0" class="editTable">
<tr>
<td class="editTableTitle">{{$.lp.compute}}:</td>
<td class="editTableValue">
<input type="radio" name="compute" value="create" text{($.compute.indexOf('create')!=-1)?'checked':''}/>{{$.lp.create}}
<input type="radio" name="compute" value="save" text{($.compute.indexOf('save')!=-1)?'checked':''}/>{{$.lp.save}}
<input type="radio" name="compute" value="show" text{($.compute.indexOf('show')!=-1)?'checked':''}/>{{$.lp.show}}
</td>
</tr>
</table>
<div class="MWFScriptArea" name="defaultValue" title="{{$.lp.defaultValue}} (S)"></div>
<div class="MWFMaplist" name="elStyles" title="{{$.lp.style}}"></div>
<div class="MWFMaplist" name="elProperties" title="{{$.lp.attribute}}"></div>
<div class="MWFMaplist" name="elGroupStyles" title="{{$.lp.elGroupStyles}}"></div>
<div class="MWFMaplist" name="elGroupProperties" title="{{$.lp.elGroupProperties}}"></div>
<div class="MWFValidation" name="validationConfig"></div>
<div class="MWFScriptArea" name="validation" title="{{$.lp.verificationScript}} (S)"></div>
</div>
<div title="{{$.lp.section}}" class="MWFTab">
<table width="100%" border="0" cellpadding="5" cellspacing="0" class="editTable">
<tr>
<td class="editTableTitle">{{$.lp.enableSection}}:</td>
<td class="editTableValue">
<input onclick="if (this.checked){ $('text{$.pid}sectionByEditArea').setStyle('display', 'block')}" type="radio" name="section" value="yes" text{($.section=='yes')?'checked':''}/>{{$.lp.yes}}
<input onclick="if (this.checked){ $('text{$.pid}sectionByEditArea').setStyle('display', 'none')}" type="radio" name="section" value="no" text{($.section!='yes')?'checked':''}/>{{$.lp.no}}
</td>
</tr>
</table>
<div id="text{$.pid}sectionByEditArea" style="display: text{($.section=='yes')?'block':'none'};">
<table width="100%" border="0" cellpadding="5" cellspacing="0" class="editTable">
<tr>
<td class="editTableTitle">{{$.lp.sectionBy}}:</td>
<td class="editTableValue">
<input class="editTableRadio" onclick="if (this.checked){ $('text{$.pid}sectionByScriptEditArea').setStyle('display', 'none');}" name="sectionBy" text{(($.sectionBy=='person') || ($.sectionBy!='unit' && $.sectionBy!='activity' && $.sectionBy!='script'))?'checked':''} type="radio" value="person"/>{{$.lp.handler}}<br/>
<input class="editTableRadio" onclick="if (this.checked){ $('text{$.pid}sectionByScriptEditArea').setStyle('display', 'none');}" name="sectionBy" text{($.sectionBy=='department')?'checked':''} type="radio" value="unit"/>{{$.lp.handlerUnit}}<br/>
<input class="editTableRadio" onclick="if (this.checked){ $('text{$.pid}sectionByScriptEditArea').setStyle('display', 'none');}" name="sectionBy" text{($.sectionBy=='activity')?'checked':''} type="radio" value="activity"/>{{$.lp.activityId}}<br/>
<input class="editTableRadio" onclick="if (this.checked){ $('text{$.pid}sectionByScriptEditArea').setStyle('display', 'none');}" name="sectionBy" text{($.sectionBy=='splitValue')?'checked':''} type="radio" value="splitValue"/>{{$.lp.splitValue}}<br/>
<input class="editTableRadio" onclick="if (this.checked){ $('text{$.pid}sectionByScriptEditArea').setStyle('display', 'block');}" name="sectionBy" text{($.sectionBy=='script')?'checked':''} type="radio" value="script"/>{{$.lp.script}}<br/>
</td>
</tr>
</table>
<div id="text{$.pid}sectionByScriptEditArea" style="display: text{($.sectionBy=='script')?'block':'none'};">
<div class="MWFScriptArea" name="sectionByScript" title="{{$.lp.sectionBy}} (S)"></div>
</div>
</div>
</div>
<div title="Vue" class="MWFTab">
<div class="MWFScriptArea" name="vueData" title="Vue Data (S)"></div>
</div>
<div title="{{$.lp.event}}" class="MWFTab">
<div class="MWFEventsArea" name="events"></div>
</div>
<div title="HTML" class="MWFTab">
<div class="MWFHTMLArea" style="font-family: Verdana, Geneva, sans-serif; font-size:14px"></div>
</div>
<div title="JSON" class="MWFTab">
<div class="MWFJSONArea" style="font-family: Verdana, Geneva, sans-serif; font-size:14px"></div>
</div>
</div>
o2web/source/x_component_process_FormDesigner/Module/Elradio/template.json 0 → 100644
浏览文件 @ 2ca95cc0
{
"id": "",
"name": "",
"type": "Elradio",
"description": "",
"itemType": "values",
"itemValues": [],
"itemScript": {
"code": "",
"html": ""
},
"defaultValue": {
"code": "",
"html": ""
},
"compute": "create", //create, show, save
"events": {
"queryLoad" : {
"code": "",
"html": ""
},
"postLoad" : {
"code": "",
"html": ""
},
"load": {
"code": "",
"html": ""
},
"click": {
"code": "",
"html": ""
},
"dblclick": {
"code": "",
"html": ""
},
"change" : {
"code": "",
"html": ""
},
"keydown": {
"code": "",
"html": ""
},
"keypress": {
"code": "",
"html": ""
},
"keyup": {
"code": "",
"html": ""
},
"mousedown": {
"code": "",
"html": ""
},
"mousemove": {
"code": "",
"html": ""
},
"mouseout": {
"code": "",
"html": ""
},
"mouseover": {
"code": "",
"html": ""
},
"mouseup": {
"code": "",
"html": ""
},
"focus": {
"code": "",
"html": ""
},
"blur": {
"code": "",
"html": ""
}
},
"properties": {},
"class": "",
"buttonStyles": {},
"styles": {},
"container": ""
}
o2web/source/x_component_process_FormDesigner/Module/Package.js
浏览文件 @ 2ca95cc0
......@@ -47,6 +47,12 @@ MWF.xDesktop.requireApp("process.FormDesigner", "Module.Org", null, false);
MWF.xDesktop.requireApp("process.FormDesigner", "Module.Opinion", null, false);
MWF.xDesktop.requireApp("process.FormDesigner", "Module.Statement", null, false);
MWF.xDesktop.requireApp("process.FormDesigner", "Module.StatementSelector", null, false);
MWF.xDesktop.requireApp("process.FormDesigner", "Module.Elbutton", null, false);
MWF.xDesktop.requireApp("process.FormDesigner", "Module.Elcontainer$Container", null, false);
MWF.xDesktop.requireApp("process.FormDesigner", "Module.Elcontainer", null, false);
MWF.xDesktop.requireApp("process.FormDesigner", "Module.Elicon", null, false);
MWF.xDesktop.requireApp("process.FormDesigner", "Module.Elradio", null, false);
MWF.xDesktop.requireApp("process.FormDesigner", "Module.Elcheckbox", null, false);
MWF.xDesktop.requireApp("process.FormDesigner", "Module.Importer", null, false);
MWF.xDesktop.requireApp("process.FormDesigner", "Module.ReadLog", null, false);
o2web/source/x_component_process_FormDesigner/Property.js
浏览文件 @ 2ca95cc0
......@@ -99,6 +99,10 @@ MWF.xApplication.process.FormDesigner.Property = MWF.FCProperty = new Class({
this.loadStatementFilter();
this.loadDocumentTempleteSelect();
this.loadFieldConfig();
this.loadElSelectIcon();
this.loadVueElementUI();
this.loadHelp();
// this.loadScriptIncluder();
// this.loadDictionaryIncluder();
......@@ -688,6 +692,103 @@ MWF.xApplication.process.FormDesigner.Property = MWF.FCProperty = new Class({
}.bind(this));
}
},
// _loadVue: function(callback){
// if (!window.Vue){
// o2.load(["vue", "elementui"], { "sequence": true }, callback);
// }else{
// if (callback) callback();
// }
// },
loadVueElementUI: function(){
var nodes = this.propertyContent.getElements(".MWFElementColor");
if (nodes.length) {
this._loadVue(function(){
var _self = this;
nodes.each(function(node){
var name = node.get("name");
var v = _self.data[name] || "";
var data = {};
data[name] = v;
new Vue({
data: data,
methods: {
change: function(color){
_self.data[name] = color;
_self.changeData(name);
}
}
}).$mount(node);
});
}.bind(this));
}
},
_loadVue: function(callback){
if (!window.Vue){
o2.loadAll({"css": "../o2_lib/vue/element/index.css", "js": ["vue", "elementui"]}, { "sequence": true }, callback);
}else{
if (callback) callback();
}
},
loadElSelectIcon: function(){
debugger;
var nodes = this.propertyContent.getElements(".MWFElIcon");
if (nodes.length){
var _self = this;
var icons = ["el-icon-platform-eleme","el-icon-eleme","el-icon-delete-solid","el-icon-delete","el-icon-s-tools","el-icon-setting","el-icon-user-solid","el-icon-user","el-icon-phone","el-icon-phone-outline","el-icon-more","el-icon-more-outline","el-icon-star-on","el-icon-star-off","el-icon-s-goods","el-icon-goods","el-icon-warning","el-icon-warning-outline","el-icon-question","el-icon-info","el-icon-remove","el-icon-circle-plus","el-icon-success","el-icon-error","el-icon-zoom-in","el-icon-zoom-out","el-icon-remove-outline","el-icon-circle-plus-outline","el-icon-circle-check","el-icon-circle-close","el-icon-s-help","el-icon-help","el-icon-minus","el-icon-plus","el-icon-check","el-icon-close","el-icon-picture","el-icon-picture-outline","el-icon-picture-outline-round","el-icon-upload","el-icon-upload2","el-icon-download","el-icon-camera-solid","el-icon-camera","el-icon-video-camera-solid","el-icon-video-camera","el-icon-message-solid","el-icon-bell","el-icon-s-cooperation","el-icon-s-order","el-icon-s-platform","el-icon-s-fold","el-icon-s-unfold","el-icon-s-operation","el-icon-s-promotion","el-icon-s-home","el-icon-s-release","el-icon-s-ticket","el-icon-s-management","el-icon-s-open","el-icon-s-shop","el-icon-s-marketing","el-icon-s-flag","el-icon-s-comment","el-icon-s-finance","el-icon-s-claim","el-icon-s-custom","el-icon-s-opportunity","el-icon-s-data","el-icon-s-check","el-icon-s-grid","el-icon-menu","el-icon-share","el-icon-d-caret","el-icon-caret-left","el-icon-caret-right","el-icon-caret-bottom","el-icon-caret-top","el-icon-bottom-left","el-icon-bottom-right","el-icon-back","el-icon-right","el-icon-bottom","el-icon-top","el-icon-top-left","el-icon-top-right","el-icon-arrow-left","el-icon-arrow-right","el-icon-arrow-down","el-icon-arrow-up","el-icon-d-arrow-left","el-icon-d-arrow-right","el-icon-video-pause","el-icon-video-play","el-icon-refresh","el-icon-refresh-right","el-icon-refresh-left","el-icon-finished","el-icon-sort","el-icon-sort-up","el-icon-sort-down","el-icon-rank","el-icon-loading","el-icon-view","el-icon-c-scale-to-original","el-icon-date","el-icon-edit","el-icon-edit-outline","el-icon-folder","el-icon-folder-opened","el-icon-folder-add","el-icon-folder-remove","el-icon-folder-delete","el-icon-folder-checked","el-icon-tickets","el-icon-document-remove","el-icon-document-delete","el-icon-document-copy","el-icon-document-checked","el-icon-document","el-icon-document-add","el-icon-printer","el-icon-paperclip","el-icon-takeaway-box","el-icon-search","el-icon-monitor","el-icon-attract","el-icon-mobile","el-icon-scissors","el-icon-umbrella","el-icon-headset","el-icon-brush","el-icon-mouse","el-icon-coordinate","el-icon-magic-stick","el-icon-reading","el-icon-data-line","el-icon-data-board","el-icon-pie-chart","el-icon-data-analysis","el-icon-collection-tag","el-icon-film","el-icon-suitcase","el-icon-suitcase-1","el-icon-receiving","el-icon-collection","el-icon-files","el-icon-notebook-1","el-icon-notebook-2","el-icon-toilet-paper","el-icon-office-building","el-icon-school","el-icon-table-lamp","el-icon-house","el-icon-no-smoking","el-icon-smoking","el-icon-shopping-cart-full","el-icon-shopping-cart-1","el-icon-shopping-cart-2","el-icon-shopping-bag-1","el-icon-shopping-bag-2","el-icon-sold-out","el-icon-sell","el-icon-present","el-icon-box","el-icon-bank-card","el-icon-money","el-icon-coin","el-icon-wallet","el-icon-discount","el-icon-price-tag","el-icon-news","el-icon-guide","el-icon-male","el-icon-female","el-icon-thumb","el-icon-cpu","el-icon-link","el-icon-connection","el-icon-open","el-icon-turn-off","el-icon-set-up","el-icon-chat-round","el-icon-chat-line-round","el-icon-chat-square","el-icon-chat-dot-round","el-icon-chat-dot-square","el-icon-chat-line-square","el-icon-message","el-icon-postcard","el-icon-position","el-icon-turn-off-microphone","el-icon-microphone","el-icon-close-notification","el-icon-bangzhu","el-icon-time","el-icon-odometer","el-icon-crop","el-icon-aim","el-icon-switch-button","el-icon-full-screen","el-icon-copy-document","el-icon-mic","el-icon-stopwatch","el-icon-medal-1","el-icon-medal","el-icon-trophy","el-icon-trophy-1","el-icon-first-aid-kit","el-icon-discover","el-icon-place","el-icon-location","el-icon-location-outline","el-icon-location-information","el-icon-add-location","el-icon-delete-location","el-icon-map-location","el-icon-alarm-clock","el-icon-timer","el-icon-watch-1","el-icon-watch","el-icon-lock","el-icon-unlock","el-icon-key","el-icon-service","el-icon-mobile-phone","el-icon-bicycle","el-icon-truck","el-icon-ship","el-icon-basketball","el-icon-football","el-icon-soccer","el-icon-baseball","el-icon-wind-power","el-icon-light-rain","el-icon-lightning","el-icon-heavy-rain","el-icon-sunrise","el-icon-sunrise-1","el-icon-sunset","el-icon-sunny","el-icon-cloudy","el-icon-partly-cloudy","el-icon-cloudy-and-sunny","el-icon-moon","el-icon-moon-night","el-icon-dish","el-icon-dish-1","el-icon-food","el-icon-chicken","el-icon-fork-spoon","el-icon-knife-fork","el-icon-burger","el-icon-tableware","el-icon-sugar","el-icon-dessert","el-icon-ice-cream","el-icon-hot-water","el-icon-water-cup","el-icon-coffee-cup","el-icon-cold-drink","el-icon-goblet","el-icon-goblet-full","el-icon-goblet-square","el-icon-goblet-square-full","el-icon-refrigerator","el-icon-grape","el-icon-watermelon","el-icon-cherry","el-icon-apple","el-icon-pear","el-icon-orange","el-icon-coffee","el-icon-ice-tea","el-icon-ice-drink","el-icon-milk-tea","el-icon-potato-strips","el-icon-lollipop","el-icon-ice-cream-square","el-icon-ice-cream-round"];
nodes.each(function(node){
var name = node.get("name");
var data = this.data[name] || "";
var area = new Element("div", {
"styles": {
"height": "300px",
"overflow": "auto",
"font-size": "24px"
}
}).inject(node);
icons.forEach(function(i){
if (data==i){
area.appendHTML("<i style=\"background-color: #999999; padding:5px}\" @click='selected' data-icon=\""+i+"\" class=\""+i+" mainColor_bg\"></i>");
}else{
area.appendHTML("<i style='cursor: pointer; padding:5px' @click='selected' data-icon=\""+i+"\" class='"+i+"'></i>");
}
});
this._loadVue(function(){
new Vue({
methods:{
selected: function(e){
var iNode = (e.target || e.srcElement);
if (iNode && iNode.hasClass("mainColor_bg")){
iNode.removeClass("mainColor_bg");
_self.data[name] = "";
_self.changeData(name);
}else{
this.$el.getElements("i").forEach(function(el){
if (el.hasClass("mainColor_bg")) el.removeClass("mainColor_bg");
});
if (iNode){
iNode.addClass("mainColor_bg");
var iconName = iNode.dataset["icon"];
_self.data[name] = iconName;
_self.changeData(name);
}
}
}
}
}).$mount(node);
}.bind(this));
// MWF.xDesktop.requireApp("process.FormDesigner", "widget.FiledConfigurator", function(){
// var filedConfigurator = new MWF.xApplication.process.FormDesigner.widget.FiledConfigurator(node, this.designer, {
// "onChange": function(){
// debugger;
// this.data[name] = filedConfigurator.getData();
// }.bind(this)
// }, data);
// filedConfigurator.load()
// }.bind(this));
}.bind(this));
}
},
loadIconSelect: function(){
var nodes = this.propertyContent.getElements(".MWFIcon");
......
o2web/source/x_component_process_FormDesigner/lp/zh-cn.js
浏览文件 @ 2ca95cc0
......@@ -68,7 +68,8 @@ MWF.xApplication.process.FormDesigner.LP = {
"insertBottom" : "插入到底部",
"insertBefore" : "插入到前面",
"insertAfter" : "插入到后面",
"injectNotice" : "按住Ctrl松开鼠标精确定位"
"injectNotice" : "按住Ctrl松开鼠标精确定位",
"selectedContainer": "选择父对象"
},
"actionbar": {
......@@ -321,6 +322,22 @@ MWF.xApplication.process.FormDesigner.LP = {
"office": "Office控件",
"statementSelector": "选择查询视图",
"statement": "嵌入查询视图",
"group_system": "系统组件",
"group_element": "Element组件",
"el_container": "布局容器",
"el_icon": "图标",
"el_button": "按钮",
"el_radio": "单选框",
"el_checkbox": "多选框",
"el_select": "选择器",
"el_input": "输入框",
"el_cascader": "级联选择器",
"el_number": "计数器",
"el_switch": "开关",
"el_slider": "滑块",
"importer": "数据导入",
"readLog": "阅读记录"
},
......@@ -923,6 +940,37 @@ MWF.xApplication.process.FormDesigner.LP = {
"datatableEditMode": "编辑方式",
"datatableEditModeValue": ["每次编辑单行","同时编辑多行"],
"onlyPc": "仅PC端可用",
"size": "尺寸",
"el_bt_default": "默认按钮",
"el_bt_primary": "主要按钮",
"el_bt_success": "成功按钮",
"el_bt_warning": "警告按钮",
"el_bt_danger": "危险按钮",
"el_bt_info": "信息按钮",
"el_bt_text": "文字按钮",
"el_plain": "朴素按钮",
"el_round": "圆角按钮",
"el_circle": "圆型按钮",
"el_icon": "按钮图标",
"el_disabled": "是否禁用",
"el_loading": "加载中",
"el_autofocus": "默认焦点",
"el_isText": "显示文字",
"layout": "布局",
"layoutCode": "布局代码",
"layoutTemplate": "常用布局",
"elGroupStyles": "组样式",
"elGroupProperties": "组属性",
"el_border": "显示边框",
"el_radioColor": "字体颜色",
"el_radioFillColor": "填充颜色",
"el_buttonRadio": "按钮模式",
"datatemplateOuterNote": "注: 位于当前数据模板外部的相关组件标识。数据模板可以有多层，外部组件标识填写有下列规则：<br/>" +
"1、单层或者是最外层的数据模板，填\"fieldId\"，表示表单上的直接组件。<br/>" +
"2、如果有多层数据模板，\"./fieldId\"表示和当前数据模板同层次的组件，\"../fieldId\"表示和上一层数据模板同层次的组件，以此类推。<br/>" +
......
o2web/source/x_component_process_Xform/$Form/default/css.wcss
浏览文件 @ 2ca95cc0
......@@ -1184,5 +1184,17 @@
"attachmentOrderFlagNode": {
"height": "2px",
"background-color": "#5c649c"
}
},
"el-container-aside": {
"background-color": "#D3DCE6",
"width": "240px"
},
"el-container-header": {
"background-color": "#B3C0D1",
"height": "60px"
},
"el-container-footer": {
"background-color": "#B3C0D1",
"height": "60px"
}
}
o2web/source/x_component_process_Xform/Elbutton.js 0 → 100644
浏览文件 @ 2ca95cc0
MWF.xDesktop.requireApp("process.Xform", "$Module", null, false);
/** @class Elbutton 基于Element UI的按钮组件。
* @example
* //可以在脚本中获取该组件
* //方法1：
* var button = this.form.get("name"); //获取组件
* //方法2
* var button = this.target; //在组件事件脚本中获取
* @extends MWF.xApplication.process.Xform.$Module
* @o2category FormComponents
* @o2range {Process|CMS|Portal}
* @hideconstructor
*/
MWF.xApplication.process.Xform.Elbutton = MWF.APPElbutton = new Class(
/** @lends MWF.xApplication.process.Xform.Elbutton# */
{
Implements: [Events],
Extends: MWF.APP$Module,
/**
* @summary 组件的配置信息，同时也是Vue组件的data。
* @member MWF.xApplication.process.Xform.Elbutton#json {JsonObject}
* @example
* //可以在脚本中获取此对象，下面两行代码是等价的，它们获取的是同一个对象
* var json = this.form.get("elbutton").json; //获取组件的json对象
* var json = this.form.get("elbutton").vm.$data; //获取Vue组件的data数据，
*
* //通过json对象操作Element组件
* json.bttype = "success"; //将按钮样式改为success
* json.loading = true; //将按钮显示为加载中状态
* json.disabled = true; //将按钮设置为禁用
*/
load: function(){
this._loadModuleEvents();
if (this.fireEvent("queryLoad")){
this._queryLoaded();
this._loadUserInterface();
}
},
_loadUserInterface: function(){
this.node.appendHTML(this._createElementHtml(), "before");
var button = this.node.getPrevious();
this.node.destroy();
this.node = button;
this.node.set({
"id": this.json.id,
"MWFType": this.json.type
});
this._createVueApp();
},
_createVueApp: function(){
if (!this.vm) this._loadVue(this._mountVueApp.bind(this));
},
_loadVue: function(callback){
if (!window.Vue){
o2.loadAll({"css": "../o2_lib/vue/element/index.css", "js": ["vue", "elementui"]}, { "sequence": true }, callback);
}else{
if (callback) callback();
}
},
_mountVueApp: function(){
if (!this.vueApp) this.vueApp = this._createVueExtend();
/**
* @summary Vue对象实例
* @see https://vuejs.org/
* @member {VueInstance}
*/
this.vm = new Vue(this.vueApp).$mount(this.node);
},
_createVueExtend: function(){
var _self = this;
return {
data: this._createVueData(),
mounted: function(){
_self._afterMounted(this.$el);
}
};
},
_createVueData: function(){
if (this.json.vueData && this.json.vueData.code){
var d = this.form.Macro.exec(this.json.vueData.code, this);
this.json = Object.merge(d, this.json);
}
if (!this.json.size) this.json.size = "";
if (!this.json.bttype) this.json.bttype = "";
if (!this.json.plain) this.json.plain = false;
if (!this.json.round) this.json.round = false;
if (!this.json.circle) this.json.circle = false;
if (!this.json.disabled) this.json.disabled = false;
if (!this.json.loading) this.json.loading = false;
return this.json;
},
_afterMounted: function(el){
this.node = el;
this.node.set({
"id": this.json.id,
"MWFType": this.json.type
});
this._loadDomEvents();
this._afterLoaded();
this.fireEvent("postLoad");
this.fireEvent("load");
},
_createElementHtml: function(){
debugger;
var html = "<el-button";
html += " :size=\"size\"";
html += " :type=\"bttype\"";
html += " :plain=\"plain\"";
html += " :round=\"round\"";
html += " :circle=\"circle\"";
html += " :disabled=\"disabled\"";
html += " :loading=\"loading\"";
// html += " :loading=\"loading\"";
// if (this.json.size!=="auto") html += " size=\""+this.json.size+"\"";
// if (this.json.bttype!=="default") html += " type=\""+this.json.bttype+"\"";
// if (this.json.plain==="yes") html += " plain";
// if (this.json.round==="yes") html += " round";
// if (this.json.circle==="yes") html += " circle";
// if (this.json.icon) html += " icon=\""+this.json.icon+"\"";
// if (this.json.disabled==="yes") html += " disabled";
// if (this.json.loading==="yes") html += " :loading=\"loading\"";
if (this.json.autofocus==="yes") html += " autofocus";
if (this.json.elProperties){
Object.keys(this.json.elProperties).forEach(function(k){
if (this.json.elProperties[k]) html += " "+k+"=\""+this.json.elProperties[k]+"\"";
}, this);
}
if (this.json.elStyles){
var style = "";
Object.keys(this.json.elStyles).forEach(function(k){
if (this.json.elStyles[k]) style += k+":"+this.json.elStyles[k]+";";
}, this);
html += " style=\""+style+"\"";
}
html += ">"+((this.json.circle!=="yes" && this.json.isText!=="no") ? (this.json.name || this.json.id) : "")+"</el-button>";
return html;
}
});
o2web/source/x_component_process_Xform/Elcheckbox.js 0 → 100644
浏览文件 @ 2ca95cc0
MWF.xDesktop.requireApp("process.Xform", "Elradio", null, false);
/** @class Elradio 基于Element UI的按钮组件。
* @example
* //可以在脚本中获取该组件
* //方法1：
* var radio = this.form.get("name"); //获取组件
* //方法2
* var radio = this.target; //在组件事件脚本中获取
* @extends MWF.xApplication.process.Xform.$Module
* @o2category FormComponents
* @o2range {Process|CMS|Portal}
* @hideconstructor
*/
MWF.xApplication.process.Xform.Elcheckbox = MWF.APPElcheckbox = new Class(
/** @lends MWF.xApplication.process.Xform.Elradio# */
{
Implements: [Events],
Extends: MWF.APPElradio,
options: {
/**
* 组件加载前触发。
* @event MWF.xApplication.process.Xform.$Module#queryLoad
* @see {@link https://www.yuque.com/o2oa/ixsnyt/hm5uft#i0zTS|组件事件说明}
*/
/**
* 组件加载时触发.
* @event MWF.xApplication.process.Xform.$Module#load
* @see {@link https://www.yuque.com/o2oa/ixsnyt/hm5uft#i0zTS|组件事件说明}
*/
/**
* 组件加载后触发.
* @event MWF.xApplication.process.Xform.$Module#postLoad
* @see {@link https://www.yuque.com/o2oa/ixsnyt/hm5uft#i0zTS|组件事件说明}
*/
/**
* 值发生改变时触发.
* @event MWF.xApplication.process.Xform.$Module#change
* @see {@link https://www.yuque.com/o2oa/ixsnyt/hm5uft#i0zTS|组件事件说明}
*/
"moduleEvents": ["load", "queryLoad", "postLoad", "change"]
},
/**
* @summary 组件的配置信息，同时也是Vue组件的data。
* @member MWF.xApplication.process.Xform.Elradio#json {JsonObject}
* @example
* //可以在脚本中获取此对象，下面两行代码是等价的，它们获取的是同一个对象
* var json = this.form.get("elcheckbox").json; //获取组件的json对象
* var json = this.form.get("elcheckbox").vm.$data; //获取Vue组件的data数据，
*
* //通过json对象操作Element组件
* json.border = true; //带边框的多选按钮
* json.size = "small"; //设置多选按钮大小，仅border为true时有效
* json.textColor = "#ff0000"; //设置按钮样式时，选中状态的文本颜色
* json.fillColor = "#ff0000"; //设置按钮样式时，选中状态的背景颜色
*/
load: function(){
this._loadModuleEvents();
if (this.fireEvent("queryLoad")){
this._queryLoaded();
this._loadUserInterface();
}
},
_loadNode: function(){
this.node.empty();
if (this.readonly || this.json.isReadonly ){
this._loadNodeRead();
}else{
this._loadNodeEdit();
}
},
_resetNodeEdit: function(){
var div = new Element("div");
div.inject(this.node, "after");
this.node.destroy();
this.node = div;
},
_loadNodeEdit: function(){
if (!this.json.preprocessing) this._resetNodeEdit();
this.setOptions();
},
setOptions: function(){
var optionItems = this.getOptions();
this._setOptions(optionItems);
},
_setOptions: function(optionItems){
var p = o2.promiseAll(optionItems).then(function(radioValues){
//this.moduleSelectAG = null;
return this._loadElradio(radioValues);
}.bind(this), function(){
this.moduleSelectAG = null;
}.bind(this));
this.moduleSelectAG = Promise.resolve(p);
},
_loadElradio: function(radioValues){
return new Promise(function(resolve){
if (radioValues && o2.typeOf(radioValues)==="array"){
this.node.appendHTML(this._createElementHtml(radioValues), "before");
var button = this.node.getPrevious();
this.node.destroy();
this.node = button;
this.node.set({
"id": this.json.id,
"MWFType": this.json.type
});
this._createVueApp(resolve);
}
}.bind(this));
},
_createElementHtml: function(radioValues){
debugger;
var html = "<el-checkbox-group style='box-sizing: border-box!important'";
html += " v-model=\""+this.json.id+"\"";
html += " :text-color=\"textColor\"";
html += " :fill=\"fillColor\"";
html += " :size=\"size\"";
html += " @change=\"change\"";
if (this.json.elGroupProperties){
Object.keys(this.json.elGroupProperties).forEach(function(k){
if (this.json.elGroupProperties[k]) html += " "+k+"=\""+this.json.elGroupProperties[k]+"\"";
}, this);
}
if (this.json.elGroupStyles){
var style = "";
Object.keys(this.json.elGroupStyles).forEach(function(k){
if (this.json.elGroupStyles[k]) style += k+":"+this.json.elGroupStyles[k]+";";
}, this);
html += " style=\""+style+"\"";
}
html += " >";
radioValues.each(function(item){
var tmps = item.split("|");
var text = tmps[0];
var value = tmps[1] || text;
html += (this.json.buttonRadio) ? "<el-checkbox-button" : "<el-checkbox";
html += " label=\""+value+"\"";
html += " :border=\"border\"";
if (this.json.elProperties){
Object.keys(this.json.elProperties).forEach(function(k){
if (this.json.elProperties[k]) html += " "+k+"=\""+this.json.elProperties[k]+"\"";
}, this);
}
var radiostyle = "box-sizing: border-box!important;";
if (this.json.elStyles){
Object.keys(this.json.elStyles).forEach(function(k){
if (this.json.elStyles[k]) radiostyle += k+":"+this.json.elStyles[k]+";";
}, this);
}
html += " style=\""+radiostyle+"\"";
html += " >"+text;
html += (this.json.buttonRadio) ? "</el-checkbox-button>" : "</el-checkbox>";
}.bind(this));
html += "</el-checkbox-group>";
return html;
},
__setValue: function(value){
this._setBusinessData(value);
this.json[this.json.id] = (value) ? value : [];
},
__setData: function(data){
this._setBusinessData(value);
this.json[this.json.id] = value;
this.validationMode();
this.fireEvent("setData");
},
_createVueApp: function(callback){
if (!this.vm){
this._loadVue(function(){
this._mountVueApp(callback);
}.bind(this));
}else{
if (callback) callback();
}
},
_loadVue: function(callback){
if (!window.Vue){
o2.loadAll({"css": "../o2_lib/vue/element/index.css", "js": ["vue", "elementui"]}, { "sequence": true }, callback);
}else{
if (callback) callback();
}
},
_mountVueApp: function(callback){
if (!this.vueApp) this.vueApp = this._createVueExtend(callback);
/**
* @summary Vue对象实例
* @see https://vuejs.org/
* @member {VueInstance}
*/
this.vm = new Vue(this.vueApp).$mount(this.node);
},
_createVueExtend: function(callback){
var _self = this;
return {
data: this._createVueData(),
mounted: function(){
_self._afterMounted(this.$el);
if (callback) callback();
},
methods: {
change: function(v){
_self.validationMode();
if (_self.validation()) {
_self._setBusinessData(v);
_self.fireEvent("change");
}
}
}
};
},
_createVueData: function(){
this.json[this.json.id] = [];
if (this.json.vueData && this.json.vueData.code){
var d = this.form.Macro.exec(this.json.vueData.code, this);
this.json = Object.merge(d, this.json);
}
if (!this.json.textColor) this.json.textColor = "";
if (!this.json.fillColor) this.json.fillColor = "";
if (!this.json.size) this.json.size = "";
return this.json;
},
_afterMounted: function(el){
this.node = el;
this.node.set({
"id": this.json.id,
"MWFType": this.json.type
});
this._loadDomEvents();
this._afterLoaded();
this.fireEvent("postLoad");
this.fireEvent("load");
},
getInputData: function(){
return this.json[this.json.id];
},
});
o2web/source/x_component_process_Xform/Elcontainer.js 0 → 100644
浏览文件 @ 2ca95cc0
MWF.xDesktop.requireApp("process.Xform", "$Module", null, false);
/** @class Div 容器组件。
* @example
* //可以在脚本中获取该组件
* //方法1：
* var div = this.form.get("name"); //获取组件
* //方法2
* var div = this.target; //在组件事件脚本中获取
* @extends MWF.xApplication.process.Xform.$Module
* @o2category FormComponents
* @o2range {Process|CMS|Portal}
* @hideconstructor
*/
MWF.xApplication.process.Xform.Elcontainer = MWF.APPElcontainer = new Class({
Extends: MWF.APP$Module,
_loadUserInterface: function(){
var asides = this.node.getElements("aside");
var headers = this.node.getElements("header");
var mains = this.node.getElements("main");
var footers = this.node.getElements("footer");
if (!this.asides || !this.asides.length) this.asides = [];
if (!this.headers || !this.headers.length) this.headers = [];
if (!this.mains || !this.mains.length) this.mains = [];
if (!this.footers || !this.footers.length) this.footers = [];
asides.each(function(aside){ this.asides.push(this._loadSubModule(aside)); }.bind(this));
headers.each(function(header){ this.headers.push(this._loadSubModule(header)); }.bind(this));
mains.each(function(main){ this.mains.push(this._loadSubModule(main)); }.bind(this));
footers.each(function(footer){ this.footers.push(this._loadSubModule(footer)); }.bind(this));
},
_loadSubModule: function(node){
var json = this.form._getDomjson(node);
var module = null;
if (json){
var container = this;
module = this.form._loadModule(json, node, function(){
this.container = container;
});
this.form.modules.push(module);
}
return module;
}
});
MWF.xApplication.process.Xform.Elcontainer$Main = MWF.APPElcontainer$Main = new Class({
Extends: MWF.APP$Module
});
MWF.xApplication.process.Xform.Elcontainer$Aside = MWF.APPElcontainer$Aside = new Class({
Extends: MWF.APP$Module,
_loadUserInterface: function(){
var css = Object.clone(this.form.css["el-container-aside"]);
if (this.json.recoveryStyles){
var keys = Object.keys(css);
keys.forEach(function(key){
if (this.json.recoveryStyles[key]) delete css[key];
}.bind(this))
}
this.node.setStyles(css);
}
});
MWF.xApplication.process.Xform.Elcontainer$Header = MWF.APPElcontainer$Header = new Class({
Extends: MWF.APP$Module,
_loadUserInterface: function(){
var css = Object.clone(this.form.css["el-container-header"]);
if (this.json.recoveryStyles){
var keys = Object.keys(css);
keys.forEach(function(key){
if (this.json.recoveryStyles[key]) delete css[key];
}.bind(this))
}
this.node.setStyles(css);
//this.node.setStyles(this.form.css["el-container-header"]);
}
});
MWF.xApplication.process.Xform.Elcontainer$Footer = MWF.APPElcontainer$Footer = new Class({
Extends: MWF.APP$Module,
_loadUserInterface: function(){
var css = Object.clone(this.form.css["el-container-footer"]);
if (this.json.recoveryStyles){
var keys = Object.keys(css);
keys.forEach(function(key){
if (this.json.recoveryStyles[key]) delete css[key];
}.bind(this))
}
this.node.setStyles(css);
//this.node.setStyles(this.form.css["el-container-footer"]);
}
});
o2web/source/x_component_process_Xform/Elicon.js 0 → 100644
浏览文件 @ 2ca95cc0
MWF.xDesktop.requireApp("process.Xform", "$Module", null, false);
/** @class Elicon 基于Element UI的图标组件。
* @example
* //可以在脚本中获取该组件
* //方法1：
* var icon = this.form.get("name"); //获取组件
* //方法2
* var icon = this.target; //在组件事件脚本中获取
* @extends MWF.xApplication.process.Xform.$Module
* @o2category FormComponents
* @o2range {Process|CMS|Portal}
* @hideconstructor
*/
MWF.xApplication.process.Xform.Elicon = MWF.APPElicon = new Class(
/** @lends MWF.xApplication.process.Xform.Elicon# */
{
Implements: [Events],
Extends: MWF.APP$Module,
load: function(){
this._loadModuleEvents();
if (this.fireEvent("queryLoad")){
this._queryLoaded();
this._loadUserInterface();
}
},
_loadUserInterface: function(){
this.node.appendHTML(this._createElementHtml(), "before");
var icon = this.node.getPrevious();
this.node.destroy();
this.node = icon;
this.node.set({
"id": this.json.id,
"MWFType": this.json.type
});
this._createVueApp();
},
_createVueApp: function(){
debugger;
if (!this.vm) this._loadVue(this._mountVueApp.bind(this));
},
_loadVue: function(callback){
if (!window.Vue){
o2.loadAll({"css": "../o2_lib/vue/element/index.css", "js": ["vue", "elementui"]}, { "sequence": true }, callback);
}else{
if (callback) callback();
}
},
_mountVueApp: function(){
if (!this.vueApp) this.vueApp = this._createVueExtend();
/**
* @summary Vue对象实例
* @see https://vuejs.org/
* @member {VueInstance}
*/
this.vm = new Vue(this.vueApp).$mount(this.node);
},
_createVueExtend: function(){
var _self = this;
return {
data: this._createVueData(),
mounted: function(){
_self._afterMounted(this.$el);
}
};
},
_createVueData: function(){
return this.json;
},
_afterMounted: function(el){
this.node = el;
this.node.set({
"id": this.json.id,
"MWFType": this.json.type
});
this._loadDomEvents();
this._afterLoaded();
this.fireEvent("postLoad");
this.fireEvent("load");
},
_createElementHtml: function(){
var html = "<i";
html += " :class=\"icon\"";
if (this.json.elProperties){
Object.keys(this.json.elProperties).forEach(function(k){
if (this.json.elProperties[k]) html += " "+k+"=\""+this.json.elProperties[k]+"\"";
}, this);
}
if (this.json.elStyles){
var style = "";
Object.keys(this.json.elStyles).forEach(function(k){
if (this.json.elStyles[k]) style += k+":"+this.json.elStyles[k]+";";
}, this);
html += " style=\""+style+"\"";
}
html += "></i>";
return html;
}
});
o2web/source/x_component_process_Xform/Elradio.js 0 → 100644
浏览文件 @ 2ca95cc0
MWF.xDesktop.requireApp("process.Xform", "Radio", null, false);
/** @class Elradio 基于Element UI的按钮组件。
* @example
* //可以在脚本中获取该组件
* //方法1：
* var radio = this.form.get("name"); //获取组件
* //方法2
* var radio = this.target; //在组件事件脚本中获取
* @extends MWF.xApplication.process.Xform.$Module
* @o2category FormComponents
* @o2range {Process|CMS|Portal}
* @hideconstructor
*/
MWF.xApplication.process.Xform.Elradio = MWF.APPElradio = new Class(
/** @lends MWF.xApplication.process.Xform.Elradio# */
{
Implements: [Events],
Extends: MWF.APPRadio,
options: {
/**
* 组件加载前触发。
* @event MWF.xApplication.process.Xform.$Module#queryLoad
* @see {@link https://www.yuque.com/o2oa/ixsnyt/hm5uft#i0zTS|组件事件说明}
*/
/**
* 组件加载时触发.
* @event MWF.xApplication.process.Xform.$Module#load
* @see {@link https://www.yuque.com/o2oa/ixsnyt/hm5uft#i0zTS|组件事件说明}
*/
/**
* 组件加载后触发.
* @event MWF.xApplication.process.Xform.$Module#postLoad
* @see {@link https://www.yuque.com/o2oa/ixsnyt/hm5uft#i0zTS|组件事件说明}
*/
/**
* 值发生改变时触发.
* @event MWF.xApplication.process.Xform.$Module#change
* @see {@link https://www.yuque.com/o2oa/ixsnyt/hm5uft#i0zTS|组件事件说明}
*/
"moduleEvents": ["load", "queryLoad", "postLoad", "change"]
},
/**
* @summary 组件的配置信息，同时也是Vue组件的data。
* @member MWF.xApplication.process.Xform.Elradio#json {JsonObject}
* @example
* //可以在脚本中获取此对象，下面两行代码是等价的，它们获取的是同一个对象
* var json = this.form.get("elradio").json; //获取组件的json对象
* var json = this.form.get("elradio").vm.$data; //获取Vue组件的data数据，
*
* //通过json对象操作Element组件
* json.border = true; //带边框的单选按钮
* json.size = "small"; //设置单选按钮大小，仅border为true时有效
* json.textColor = "#ff0000"; //设置按钮样式时，选中状态的文本颜色
* json.fillColor = "#ff0000"; //设置按钮样式时，选中状态的背景颜色
*/
load: function(){
this._loadModuleEvents();
if (this.fireEvent("queryLoad")){
this._queryLoaded();
this._loadUserInterface();
}
},
_loadNode: function(){
this.node.empty();
if (this.readonly || this.json.isReadonly ){
this._loadNodeRead();
}else{
this._loadNodeEdit();
}
},
_resetNodeEdit: function(){
var div = new Element("div");
div.inject(this.node, "after");
this.node.destroy();
this.node = div;
},
_loadNodeEdit: function(){
if (!this.json.preprocessing) this._resetNodeEdit();
this.setOptions();
},
setOptions: function(){
var optionItems = this.getOptions();
this._setOptions(optionItems);
},
_setOptions: function(optionItems){
var p = o2.promiseAll(optionItems).then(function(radioValues){
//this.moduleSelectAG = null;
return this._loadElradio(radioValues);
}.bind(this), function(){
this.moduleSelectAG = null;
}.bind(this));
this.moduleSelectAG = Promise.resolve(p);
},
_loadElradio: function(radioValues){
return new Promise(function(resolve){
if (radioValues && o2.typeOf(radioValues)==="array"){
this.node.appendHTML(this._createElementHtml(radioValues), "before");
var button = this.node.getPrevious();
this.node.destroy();
this.node = button;
this.node.set({
"id": this.json.id,
"MWFType": this.json.type
});
this._createVueApp(resolve);
}
}.bind(this));
},
_createElementHtml: function(radioValues){
var html = "<el-radio-group style='box-sizing: border-box!important'";
html += " v-model=\""+this.json.id+"\"";
html += " :text-color=\"textColor\"";
html += " :fill=\"fillColor\"";
html += " :size=\"size\"";
html += " @change=\"change\"";
if (this.json.elGroupProperties){
Object.keys(this.json.elGroupProperties).forEach(function(k){
if (this.json.elGroupProperties[k]) html += " "+k+"=\""+this.json.elGroupProperties[k]+"\"";
}, this);
}
if (this.json.elGroupStyles){
var style = "";
Object.keys(this.json.elGroupStyles).forEach(function(k){
if (this.json.elGroupStyles[k]) style += k+":"+this.json.elGroupStyles[k]+";";
}, this);
html += " style=\""+style+"\"";
}
html += " >";
radioValues.each(function(item){
var tmps = item.split("|");
var text = tmps[0];
var value = tmps[1] || text;
html += (this.json.buttonRadio) ? " ><el-radio-button" : " ><el-radio";
html += " label=\""+value+"\"";
html += " :border=\"border\"";
if (this.json.elProperties){
Object.keys(this.json.elProperties).forEach(function(k){
if (this.json.elProperties[k]) html += " "+k+"=\""+this.json.elProperties[k]+"\"";
}, this);
}
var radiostyle = "box-sizing: border-box!important;";
if (this.json.elStyles){
Object.keys(this.json.elStyles).forEach(function(k){
if (this.json.elStyles[k]) radiostyle += k+":"+this.json.elStyles[k]+";";
}, this);
}
html += " style=\""+radiostyle+"\"";
html += " >"+text;
html += (this.json.buttonRadio) ? "</el-radio-button>" : "</el-radio>";
}.bind(this));
html += "</el-radio-group>";
return html;
},
__setValue: function(value){
this._setBusinessData(value);
this.json[this.json.id] = value;
},
__setData: function(data){
this._setBusinessData(value);
this.json[this.json.id] = value;
this.validationMode();
this.fireEvent("setData");
},
_createVueApp: function(callback){
if (!this.vm){
this._loadVue(function(){
this._mountVueApp(callback);
}.bind(this));
}else{
if (callback) callback();
}
},
_loadVue: function(callback){
if (!window.Vue){
o2.loadAll({"css": "../o2_lib/vue/element/index.css", "js": ["vue", "elementui"]}, { "sequence": true }, callback);
}else{
if (callback) callback();
}
},
_mountVueApp: function(callback){
if (!this.vueApp) this.vueApp = this._createVueExtend(callback);
/**
* @summary Vue对象实例
* @see https://vuejs.org/
* @member {VueInstance}
*/
this.vm = new Vue(this.vueApp).$mount(this.node);
},
_createVueExtend: function(callback){
var _self = this;
return {
data: this._createVueData(),
mounted: function(){
_self._afterMounted(this.$el);
if (callback) callback();
},
methods: {
change: function(v){
_self.validationMode();
if (_self.validation()) {
_self._setBusinessData(v);
_self.fireEvent("change");
}
}
}
};
},
_createVueData: function(){
this.json[this.json.id] = "";
if (this.json.vueData && this.json.vueData.code){
var d = this.form.Macro.exec(this.json.vueData.code, this);
this.json = Object.merge(d, this.json);
}
if (!this.json.textColor) this.json.textColor = "";
if (!this.json.fillColor) this.json.fillColor = "";
if (!this.json.size) this.json.size = "";
return this.json;
},
_afterMounted: function(el){
this.node = el;
this.node.set({
"id": this.json.id,
"MWFType": this.json.type
});
this._loadDomEvents();
this._afterLoaded();
this.fireEvent("postLoad");
this.fireEvent("load");
},
getInputData: function(){
return this.json[this.json.id];
},
});
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或