diff --git a/o2web/source/x_component_process_FormDesigner/$Main/bottom/tools-element.json b/o2web/source/x_component_process_FormDesigner/$Main/bottom/tools-element.json index f941162b5213154269c34bfcada1f180133d5eee..f6cb71fd22f7b0d8d9dbafd063a1014afb22900a 100644 --- a/o2web/source/x_component_process_FormDesigner/$Main/bottom/tools-element.json +++ b/o2web/source/x_component_process_FormDesigner/$Main/bottom/tools-element.json @@ -79,6 +79,11 @@ "text": MWF.xApplication.process.FormDesigner.LP.modules.el_rate, "className": "Elrate" }, + "elcolorpicker": { + "fontIcon": "el-icon-help", + "text": MWF.xApplication.process.FormDesigner.LP.modules.el_colorpicker, + "className": "Elcolorpicker" + }, "elcommon": { "fontIcon": "el-icon-full-screen", "text": MWF.xApplication.process.FormDesigner.LP.modules.el_common, diff --git a/o2web/source/x_component_process_FormDesigner/$Main/default/tools-element.json b/o2web/source/x_component_process_FormDesigner/$Main/default/tools-element.json index f941162b5213154269c34bfcada1f180133d5eee..f6cb71fd22f7b0d8d9dbafd063a1014afb22900a 100644 --- a/o2web/source/x_component_process_FormDesigner/$Main/default/tools-element.json +++ b/o2web/source/x_component_process_FormDesigner/$Main/default/tools-element.json @@ -79,6 +79,11 @@ "text": MWF.xApplication.process.FormDesigner.LP.modules.el_rate, "className": "Elrate" }, + "elcolorpicker": { + "fontIcon": "el-icon-help", + "text": MWF.xApplication.process.FormDesigner.LP.modules.el_colorpicker, + "className": "Elcolorpicker" + }, "elcommon": { "fontIcon": "el-icon-full-screen", "text": MWF.xApplication.process.FormDesigner.LP.modules.el_common, diff --git a/o2web/source/x_component_process_FormDesigner/Module/Elcolorpicker.js b/o2web/source/x_component_process_FormDesigner/Module/Elcolorpicker.js new file mode 100644 index 0000000000000000000000000000000000000000..69326707a0632d5870e1bd84cc38d3cfd2c5b085 --- /dev/null +++ b/o2web/source/x_component_process_FormDesigner/Module/Elcolorpicker.js @@ -0,0 +1,58 @@ +MWF.xApplication.process.FormDesigner.Module = MWF.xApplication.process.FormDesigner.Module || {}; +MWF.xDesktop.requireApp("process.FormDesigner", "Module.$ElElement", null, false); +MWF.xApplication.process.FormDesigner.Module.Elcolorpicker = MWF.FCElcolorpicker = new Class({ + Extends: MWF.FC$ElElement, + Implements: [Options, Events], + options: { + "style": "default", + "propertyPath": "../x_component_process_FormDesigner/Module/Elcolorpicker/elcolorpicker.html" + }, + + _initModuleType: function(){ + this.className = "Elcolorpicker"; + this.moduleType = "element"; + this.moduleName = "elcolorpicker"; + }, + _createElementHtml: function(){ + var html = ""; + if (this.json.vueSlot) html += this.json.vueSlot; + html += ""; + 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 input = this.node.getElement("input"); + // if (input) input.set("value", this.json.name); + // } + }, + setPropertyId: function(){ + // if (!this.json.name){ + // var input = this.node.getElement("input"); + // if (input) input.set("value", this.json.id); + // } + } +}); diff --git a/o2web/source/x_component_process_FormDesigner/Module/Elcolorpicker/default/css.wcss b/o2web/source/x_component_process_FormDesigner/Module/Elcolorpicker/default/css.wcss new file mode 100644 index 0000000000000000000000000000000000000000..c8be1bd1551751c64ad7d1f35decc2cd8d29868b --- /dev/null +++ b/o2web/source/x_component_process_FormDesigner/Module/Elcolorpicker/default/css.wcss @@ -0,0 +1,75 @@ +{ + "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": "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 dashed #999", + "border-left": "1px dashed #999", + "border-right": "1px dashed #999", + "border-bottom": "1px dashed #999", + "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" + }, + "moduleNodeError": { + "border-radius": "5px", + "border-top": "1px dashed #999", + "border-left": "1px dashed #999", + "border-right": "1px dashed #999", + "border-bottom": "1px dashed #999", + "height": "40px", + "width": "200px", + "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" + } + +} diff --git a/o2web/source/x_component_process_FormDesigner/Module/Elcolorpicker/default/icon/copy1.png b/o2web/source/x_component_process_FormDesigner/Module/Elcolorpicker/default/icon/copy1.png new file mode 100644 index 0000000000000000000000000000000000000000..1398026fb8577130ad7d3bfebf8f4f148dc312a9 Binary files /dev/null and b/o2web/source/x_component_process_FormDesigner/Module/Elcolorpicker/default/icon/copy1.png differ diff --git a/o2web/source/x_component_process_FormDesigner/Module/Elcolorpicker/default/icon/delete1.png b/o2web/source/x_component_process_FormDesigner/Module/Elcolorpicker/default/icon/delete1.png new file mode 100644 index 0000000000000000000000000000000000000000..8f420087aae2f5a6e8cb22376e257d0ee8b2e12e Binary files /dev/null and b/o2web/source/x_component_process_FormDesigner/Module/Elcolorpicker/default/icon/delete1.png differ diff --git a/o2web/source/x_component_process_FormDesigner/Module/Elcolorpicker/default/icon/move1.png b/o2web/source/x_component_process_FormDesigner/Module/Elcolorpicker/default/icon/move1.png new file mode 100644 index 0000000000000000000000000000000000000000..c50bda51149245dfc2f8d081b359c898173eb2f3 Binary files /dev/null and b/o2web/source/x_component_process_FormDesigner/Module/Elcolorpicker/default/icon/move1.png differ diff --git a/o2web/source/x_component_process_FormDesigner/Module/Elcolorpicker/elcolorpicker.html b/o2web/source/x_component_process_FormDesigner/Module/Elcolorpicker/elcolorpicker.html new file mode 100644 index 0000000000000000000000000000000000000000..fedcd69fc2d491b47d0a533fec0d15432c0c83b3 --- /dev/null +++ b/o2web/source/x_component_process_FormDesigner/Module/Elcolorpicker/elcolorpicker.html @@ -0,0 +1,141 @@ +
+
+ + + + + + + + + + + + + + + + + +
{{$.lp.id}}:
{{$.lp.name}}:
{{$.lp.readonly}}: + {{$.lp.yes}} + {{$.lp.no}} +
{{$.lp.disabled}}: + {{$.lp.yes}} + {{$.lp.no}} +
+ + + + + + + + + + +
{{$.lp.size}}: + default + medium + small + mini +
{{$.lp.showAlpha}}: + {{$.lp.yes}} + {{$.lp.no}} +
+
+ + + + + +
{{$.lp.colorFormat}}: + + hex + + rgb + hsl + hsv +
+
+
+
+ + + + + + +
{{$.lp.compute}}: + {{$.lp.create}} + {{$.lp.save}} + {{$.lp.show}} +
+ +
+ +
+
+ +
+
+
Vue Data
+
+
Vue Method
+
+
Vue CSS
+
+ +
Vue Slots
+
+
+
+
+
+ + + + + +
{{$.lp.enableSection}}: + {{$.lp.yes}} + {{$.lp.no}} +
+ +
+ + + + + +
{{$.lp.sectionBy}}: + {{$.lp.handler}}
+ {{$.lp.handlerUnit}}
+ {{$.lp.activityId}}
+ {{$.lp.splitValue}}
+ {{$.lp.script}}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/o2web/source/x_component_process_FormDesigner/Module/Elcolorpicker/template.json b/o2web/source/x_component_process_FormDesigner/Module/Elcolorpicker/template.json new file mode 100644 index 0000000000000000000000000000000000000000..b366f69fb860e8fb8025880a3f9ebc5ece887a03 --- /dev/null +++ b/o2web/source/x_component_process_FormDesigner/Module/Elcolorpicker/template.json @@ -0,0 +1,86 @@ +{ + "id": "", + "name": "", + "type": "Elcolorpicker", + "description": "", + "isReadonly" : false, + "disabled": false, + "showAlpha": false, + "colorFormat": "hex", + "vueData": {}, + "vueMethods": {}, + "vueCss": {}, + "vueSlot": "", + "elProperties": {}, + "elStyles": {}, + "events": { + "queryLoad": { + "code": "", + "html": "" + }, + "postLoad": { + "code": "", + "html": "" + }, + "load": { + "code": "", + "html": "" + }, + "change": { + "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": "" +} diff --git a/o2web/source/x_component_process_FormDesigner/Module/Elrate.js b/o2web/source/x_component_process_FormDesigner/Module/Elrate.js index f1eef363eb076fc7404d4d9fe854d879cbdd3ac2..7a5f627c78f233fdaa6405ee46367c2be0780bbf 100644 --- a/o2web/source/x_component_process_FormDesigner/Module/Elrate.js +++ b/o2web/source/x_component_process_FormDesigner/Module/Elrate.js @@ -49,15 +49,15 @@ MWF.xApplication.process.FormDesigner.Module.Elrate = MWF.FCElrate = new Class({ return this.copyNode; }, setPropertyName: function(){ - if (this.json.name){ - var input = this.node.getElement("input"); - if (input) input.set("value", this.json.name); - } + // if (this.json.name){ + // var input = this.node.getElement("input"); + // if (input) input.set("value", this.json.name); + // } }, setPropertyId: function(){ - if (!this.json.name){ - var input = this.node.getElement("input"); - if (input) input.set("value", this.json.id); - } + // if (!this.json.name){ + // var input = this.node.getElement("input"); + // if (input) input.set("value", this.json.id); + // } } }); diff --git a/o2web/source/x_component_process_FormDesigner/Module/Elrate/template.json b/o2web/source/x_component_process_FormDesigner/Module/Elrate/template.json index eadbe3c40202c43ce67e56c2663dbb0dcb18205b..6c8c82fb0162f37a33caf248c49a37ddaf9d506d 100644 --- a/o2web/source/x_component_process_FormDesigner/Module/Elrate/template.json +++ b/o2web/source/x_component_process_FormDesigner/Module/Elrate/template.json @@ -4,6 +4,7 @@ "type": "Elrate", "description": "", "isReadonly" : false, + "disabled": false, "allowHalf": false, "max" : 5, "lowThreshold": 2, diff --git a/o2web/source/x_component_process_FormDesigner/Module/Package.js b/o2web/source/x_component_process_FormDesigner/Module/Package.js index c3f3c6c77db64a5db9b995140861fcb0146feb9a..a0f02993089b6ccc781fd277072b9375e9776252 100644 --- a/o2web/source/x_component_process_FormDesigner/Module/Package.js +++ b/o2web/source/x_component_process_FormDesigner/Module/Package.js @@ -71,4 +71,5 @@ MWF.xDesktop.requireApp("process.FormDesigner", "Module.Eltime", null, false); MWF.xDesktop.requireApp("process.FormDesigner", "Module.Eldate", null, false); MWF.xDesktop.requireApp("process.FormDesigner", "Module.Eldatetime", null, false); MWF.xDesktop.requireApp("process.FormDesigner", "Module.Elrate", null, false); +MWF.xDesktop.requireApp("process.FormDesigner", "Module.Elcolorpicker", null, false); MWF.xDesktop.requireApp("process.FormDesigner", "Module.SmartBI", null, false); \ No newline at end of file diff --git a/o2web/source/x_component_process_FormDesigner/lp/en.js b/o2web/source/x_component_process_FormDesigner/lp/en.js index b23876dc9cc8d409740f5132300fbab9df4aabe3..924f3cf503d291aee3765313fdab8f4c5cd345f7 100644 --- a/o2web/source/x_component_process_FormDesigner/lp/en.js +++ b/o2web/source/x_component_process_FormDesigner/lp/en.js @@ -351,6 +351,7 @@ MWF.xApplication.process.FormDesigner.LP = { "el_date": "Date", "el_datetime": "Datetime", "el_rate": "Rate", + "el_colorpicker": "ColorPicker", "el_common": "Common", "importer": "DataImporter", @@ -554,6 +555,10 @@ MWF.xApplication.process.FormDesigner.LP = { "showScore": "Show Score", "textColor": "Text Color", "textContent": "Text Content", + + "showAlpha": "Show Alpha", + "colorFormat": "Color Format", + "selectStyle": "Select Style", "options": "Options", "optionScript": "Options Script", diff --git a/o2web/source/x_component_process_FormDesigner/lp/zh-cn.js b/o2web/source/x_component_process_FormDesigner/lp/zh-cn.js index 49e9fe695c04dfd4597f0a769b33e6c4659769c3..afcb62989f39308a136410130e42c33b7d063087 100644 --- a/o2web/source/x_component_process_FormDesigner/lp/zh-cn.js +++ b/o2web/source/x_component_process_FormDesigner/lp/zh-cn.js @@ -351,6 +351,7 @@ MWF.xApplication.process.FormDesigner.LP = { "el_date": "日期", "el_datetime": "日期时间", "el_rate": "评分", + "el_colorpicker": "颜色选择", "el_common": "通用", "importer": "数据导入", @@ -554,6 +555,9 @@ MWF.xApplication.process.FormDesigner.LP = { "textColor": "文本颜色", "textContent": "文本内容", + "showAlpha": "显示透明度", + "colorFormat": "颜色格式", + "selectStyle": "Select样式", "options": "可选值", "optionScript": "可选值脚本", diff --git a/o2web/source/x_component_process_Xform/Elcolorpicker.js b/o2web/source/x_component_process_Xform/Elcolorpicker.js new file mode 100644 index 0000000000000000000000000000000000000000..729b8c4708f9ff131bd069cef13ba9455d437c7d --- /dev/null +++ b/o2web/source/x_component_process_Xform/Elcolorpicker.js @@ -0,0 +1,73 @@ +o2.xDesktop.requireApp("process.Xform", "$Elinput", null, false); +/** @class Elinput 基于Element UI的输入框组件。 + * @example + * //可以在脚本中获取该组件 + * //方法1： + * var input = this.form.get("name"); //获取组件 + * //方法2 + * var input = this.target; //在组件事件脚本中获取 + * @extends MWF.xApplication.process.Xform.$Module + * @o2category FormComponents + * @o2range {Process|CMS|Portal} + * @hideconstructor + */ +MWF.xApplication.process.Xform.Elcolorpicker = MWF.APPElcolorpicker = new Class( + /** @lends o2.xApplication.process.Xform.Elcolorpicker# */ + { + Implements: [Events], + Extends: MWF.APP$Elinput, + options: { + "moduleEvents": ["load", "queryLoad", "postLoad"], + "elEvents": ["change"] + }, + _appendVueData: function(){ + if (!this.json.isReadonly) this.json.isReadonly = false; + if (!this.json.disabled) this.json.disabled = false; + if (!this.json.showAlpha) this.json.showAlpha = false; + if (!this.json.colorFormat) { + if( this.json.showAlpha ){ + this.json.colorFormat = "hex"; + }else{ + this.json.colorFormat = "rgb"; + } + } + + }, + // appendVueExtend: function(app){ + // if (!app.methods) app.methods = {}; + // app.methods.$loadElEvent = function(ev){ + // this.validationMode(); + // if (ev==="change") this._setBusinessData(this.getInputData()); + // if (this.json.events && this.json.events[ev] && this.json.events[ev].code){ + // this.form.Macro.fire(this.json.events[ev].code, this, event); + // } + // }.bind(this); + // }, + _createElementHtml: function(){ + var html = "