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 7e482f903ecb2995b39f7b99f5ce225c130eef4b..08e64f8315373cba43656f4e0c24b1203df5b6c1 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 @@ -94,6 +94,11 @@ "text": MWF.xApplication.process.FormDesigner.LP.modules.el_dropdown, "className": "Eldropdown" }, + "elcarousel": { + "fontIcon": "el-icon-film", + "text": MWF.xApplication.process.FormDesigner.LP.modules.el_carousel, + "className": "Elcarousel" + }, "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 7e482f903ecb2995b39f7b99f5ce225c130eef4b..08e64f8315373cba43656f4e0c24b1203df5b6c1 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 @@ -94,6 +94,11 @@ "text": MWF.xApplication.process.FormDesigner.LP.modules.el_dropdown, "className": "Eldropdown" }, + "elcarousel": { + "fontIcon": "el-icon-film", + "text": MWF.xApplication.process.FormDesigner.LP.modules.el_carousel, + "className": "Elcarousel" + }, "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/Elcarousel.js b/o2web/source/x_component_process_FormDesigner/Module/Elcarousel.js new file mode 100644 index 0000000000000000000000000000000000000000..a61d88f2ef194121223c2e5262b351b507ffe28c --- /dev/null +++ b/o2web/source/x_component_process_FormDesigner/Module/Elcarousel.js @@ -0,0 +1,102 @@ +MWF.xApplication.process.FormDesigner.Module = MWF.xApplication.process.FormDesigner.Module || {}; +MWF.xDesktop.requireApp("process.FormDesigner", "Module.$ElElement", null, false); +MWF.xApplication.process.FormDesigner.Module.Elcarousel = MWF.FCElcarousel = new Class({ + Extends: MWF.FC$ElElement, + Implements: [Options, Events], + options: { + "style": "default", + "propertyPath": "../x_component_process_FormDesigner/Module/Elcarousel/elcarousel.html" + }, + + _initModuleType: function(){ + this.className = "Elcarousel"; + this.moduleType = "element"; + this.moduleName = "elcarousel"; + }, + _createElementHtml: function(){ + + var html = "<el-carousel"; + html += " :size=\"size\""; + html += " :placement=\"placement\""; + // html += " :disabled=\"disabled\""; + html += " :trigger=\"trigger\""; + html += " :hide-on-click=\"hideOnClick\""; + + if( this.json.showButton && this.json.splitButton ){ + html += " :split-button=\"splitButton\""; + html += " :type=\"buttonType\""; + } + + if (this.json.elProperties){ + Object.keys(this.json.elProperties).forEach(function(k){ + if (this.json.elProperties[k]) html += " "+k+"=\""+this.json.elProperties[k]+"\""; + }, this); + } + + html += " :style=\"elStyles\">"; + + if (this.json.vueSlot){ + html += this.json.vueSlot; + }else{ + html += this.getButtonHtml(); + } + html += "</el-carousel>"; + + 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; + }, + getButtonHtml: function(){ + if( this.json.showButton ){ + if( this.json.splitButton ) { + return this.json.text || this.json.id; + }else{ + return "<el-button type=\""+this.json.buttonType+"\" size=\""+this.json.size+"\">"+ ( this.json.text || this.json.id ) + + "<i class=\"el-icon-arrow-down el-icon--right\"></i>"+ + "</el-button>"; + } + }else{ + return " <span class=\"el-dropdown-link\">"+ ( this.json.text || this.json.id ) + + "<i class=\"el-icon-arrow-down el-icon--right\"></i>"+ + "</span>"; + } + }, + _setEditStyle_custom: function(name){ + switch (name){ + case "name": this.setPropertyName(); break; + case "id": + case "text": + case "size": + case "buttonType": + case "vueSlot": + if (this.isPropertyLoaded) if (this.vm) this.resetElement(); break; + case "showButton": + case "splitButton": + if (this.isPropertyLoaded) if (this.vm) this.resetElement(); break; + default: break; + } + }, + 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/Elcarousel/default/css.wcss b/o2web/source/x_component_process_FormDesigner/Module/Elcarousel/default/css.wcss new file mode 100644 index 0000000000000000000000000000000000000000..c8be1bd1551751c64ad7d1f35decc2cd8d29868b --- /dev/null +++ b/o2web/source/x_component_process_FormDesigner/Module/Elcarousel/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/Elcarousel/default/icon/copy1.png b/o2web/source/x_component_process_FormDesigner/Module/Elcarousel/default/icon/copy1.png new file mode 100644 index 0000000000000000000000000000000000000000..1398026fb8577130ad7d3bfebf8f4f148dc312a9 Binary files /dev/null and b/o2web/source/x_component_process_FormDesigner/Module/Elcarousel/default/icon/copy1.png differ diff --git a/o2web/source/x_component_process_FormDesigner/Module/Elcarousel/default/icon/delete1.png b/o2web/source/x_component_process_FormDesigner/Module/Elcarousel/default/icon/delete1.png new file mode 100644 index 0000000000000000000000000000000000000000..8f420087aae2f5a6e8cb22376e257d0ee8b2e12e Binary files /dev/null and b/o2web/source/x_component_process_FormDesigner/Module/Elcarousel/default/icon/delete1.png differ diff --git a/o2web/source/x_component_process_FormDesigner/Module/Elcarousel/default/icon/move1.png b/o2web/source/x_component_process_FormDesigner/Module/Elcarousel/default/icon/move1.png new file mode 100644 index 0000000000000000000000000000000000000000..c50bda51149245dfc2f8d081b359c898173eb2f3 Binary files /dev/null and b/o2web/source/x_component_process_FormDesigner/Module/Elcarousel/default/icon/move1.png differ diff --git a/o2web/source/x_component_process_FormDesigner/Module/Elcarousel/elcarousel.html b/o2web/source/x_component_process_FormDesigner/Module/Elcarousel/elcarousel.html new file mode 100644 index 0000000000000000000000000000000000000000..2f71491af92530127291bb7e13064ec924b91ca2 --- /dev/null +++ b/o2web/source/x_component_process_FormDesigner/Module/Elcarousel/elcarousel.html @@ -0,0 +1,154 @@ +<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> + </table> + + <table width="100%" border="0" cellpadding="5" cellspacing="0" class="editTable"> + <tr> + <td class="editTableTitle">{{$.lp.height}}:</td> + <td class="editTableValue"><input type="number" name="height" value="text{$.height}" class="editTableInput"/></td> + </tr> + <tr> + <td class="editTableTitle">{{$.lp.initialIndex}}:</td> + <td class="editTableValue"><input type="number" name="initialIndex" value="text{$.initialIndex}" class="editTableInput"/></td> + </tr> + <tr> + <td class="editTableTitle">{{$.lp.type}}:</td> + <td class="editTableValue"> + <input type="radio" name="carouselType" value="" text{(!$.carouselType)?'checked':''}/>{{$.lp.triggerValue[0]}} + <input type="radio" name="carouselType" value="card" text{($.trigger==='card')?'checked':''}/>{{$.lp.triggerValue[1]}} + </td> + </tr> + <tr> + <td class="editTableTitle">{{$.lp.trigger}}:</td> + <td class="editTableValue"> + <input type="radio" name="trigger" value="" text{(!$.trigger)?'checked':''}/>{{$.lp.triggerValue[0]}} + <input type="radio" name="trigger" value="click" text{($.trigger==='click')?'checked':''}/>{{$.lp.triggerValue[1]}} + </td> + </tr> + <tr> + <td class="editTableTitle">{{$.lp.autoplay}}:</td> + <td class="editTableValue"> + <input type="radio" name="autoplay" value="true" text{($.autoplay)?'checked':''}/>{{$.lp.yes}} + <input type="radio" name="autoplay" value="false" text{(!$.autoplay)?'checked':''}/>{{$.lp.no}} + </td> + </tr> + <tr> + <td class="editTableTitle">{{$.lp.interval}}:</td> + <td class="editTableValue"><input type="number" name="interval" value="text{$.interval}" class="editTableInput"/></td> + </tr> + <tr> + <td class="editTableTitle">{{$.lp.indicatorPosition}}:</td> + <td class="editTableValue"> + <input type="radio" name="indicatorPosition" value="" text{(!$.indicatorPosition || $.indicatorPosition==='')?'checked':''}/>{{$.lp.indicatorPositionValue[0]}} + <input type="radio" name="indicatorPosition" value="outside" text{($.indicatorPosition==='outside')?'checked':''}/>{{$.lp.indicatorPositionValue[1]}} + <input type="radio" name="indicatorPosition" value="none" text{($.indicatorPosition==='none')?'checked':''}/>{{$.lp.indicatorPositionValue[2]}} + </td> + </tr> + <tr> + <td class="editTableTitle">{{$.lp.arrow}}:</td> + <td class="editTableValue"> + <input type="radio" name="arrow" value="hover" text{(!$.arrow || $.arrow==='hover')?'checked':''}/>{{$.lp.indicatorPositionValue[0]}} + <input type="radio" name="arrow" value="always" text{($.arrow==='always')?'checked':''}/>{{$.lp.indicatorPositionValue[1]}} + <input type="radio" name="arrow" value="never" text{($.arrow==='never')?'checked':''}/>{{$.lp.indicatorPositionValue[2]}} + </td> + </tr> + <tr> + <td class="editTableTitle">{{$.lp.loop}}:</td> + <td class="editTableValue"> + <input type="radio" name="loop" value="true" text{($.loop)?'checked':''}/>{{$.lp.yes}} + <input type="radio" name="loop" value="false" text{(!$.loop)?'checked':''}/>{{$.lp.no}} + </td> + </tr> + <tr> + <td class="editTableTitle">{{$.lp.direction}}:</td> + <td class="editTableValue"> + <input type="radio" name="direction" value="horizontal" text{(!$.direction || $.direction==='horizontal')?'checked':''}/>default + <input type="radio" name="direction" value="vertical" text{($.direction==='vertical')?'checked':''}/>large + </td> + </tr> + </table> + + <div class="MWFMaplist" name="elStyles" title="{{$.lp.style}}"></div> + <div class="MWFMaplist" name="elProperties" title="{{$.lp.attribute}}"></div> + + <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 || $.compute=='create')?'checked':''}/>{{$.lp.create}} + <input type="radio" name="compute" value="save" text{($.compute=='save')?'checked':''}/>{{$.lp.save}} + <input type="radio" name="compute" value="show" text{($.compute=='show')?'checked':''}/>{{$.lp.show}} + </td> + </tr> + </table> + + <div class="MWFScriptArea" name="defaultValue" title="{{$.lp.defaultValue}} (S)"></div> + + <div class="MWFValidation" name="validationConfig"></div> + <div class="MWFScriptArea" name="validation" title="{{$.lp.verificationScript}} (S)"></div> + + </div> + <div title="{{$.lp.menuItem}}" class="MWFTab"> + <table> + <tr> + <td class="editTableTitle"></td> + <td class="editTableValue"> + <input type="radio" name="dataType" value="json" text{($.dataType!=='script')?'checked':''} + onclick="if (this.checked){ + $('text{$.pid}dataJson').setStyle('display', ''); + $('text{$.pid}dataScript').setStyle('display', 'none'); + }" + />{{$.lp.data}} + <input type="radio" name="dataType" value="script" text{($.dataType==='script')?'checked':''} + onclick="if (this.checked){ + $('text{$.pid}dataJson').setStyle('display', 'none'); + $('text{$.pid}dataScript').setStyle('display', ''); + }" + />{{$.lp.script}} + </td> + </tr> + </table> + <div id="text{$.pid}dataJson" class="MWFElTDropdownData" name="dataJson" style="display: text{($.dataType=='script')?'none':''}"></div> + <div id="text{$.pid}dataScript" style="display: text{($.dataType=='script')?'':'none'}"> + <div style="padding: 5px;">鑴氭湰杩斿洖閫夐」鏁扮粍锛屾牸寮忓涓嬶細<br/>return [{ <br/> + "label" : "", //鏄剧ず鐨勬枃鏈�, string<br/> + "command" : "", //鎸囦护,鑿滃崟椤圭殑鐐瑰嚮浜嬩欢锛坈ommand锛夊彲浠ユ帴鏀跺埌,string/number/object <br/> + "disabled" : false, //鏄惁绂佺敤, boolean<br/> + "divided" : false, //鏄惁鏄剧ず鍒嗗壊绾匡紝boolean<br/> + "icon" : "" // 鍥炬爣绫诲悕, string<br/> + }, ...]; </div> + <div class="MWFScriptArea" name="dataScript"></div> + </div> + </div> + <div title="Vue" class="MWFTab"> + <div onclick="var node = this.getNext(); node.setStyle('display', ((node.getStyle('display')!='none') ? 'none': 'block'))" style="cursor: pointer; height:24px; padding-left: 5px; line-height: 24px; background-color: #EEE; border-bottom: 1px solid #999;font-weight:bold;">Vue Data</div> + <div style="display: text{($.vueData && $.vueData.code) ? 'block': 'none'}" class="MWFScriptArea" name="vueData" title="Vue Data (S)"></div> + <div onclick="var node = this.getNext(); node.setStyle('display', ((node.getStyle('display')!='none') ? 'none': 'block'))" style="cursor: pointer; height:24px; padding-left: 5px; line-height: 24px; background-color: #EEE; border-bottom: 1px solid #999;font-weight:bold;">Vue Method</div> + <div div style="display: text{($.vueMethods && $.vueMethods.code) ? 'block': 'none'}" class="MWFScriptArea" name="vueMethods" title="Vue Methods (S)"></div> + <div onclick="var node = this.getNext(); node.setStyle('display', ((node.getStyle('display')!='none') ? 'none': 'block'))" style="cursor: pointer; height:24px; padding-left: 5px; line-height: 24px; background-color: #EEE; border-bottom: 1px solid #999;font-weight:bold;">Vue CSS</div> + <div div style="display: text{($.vueCss && $.vueCss.code) ? 'block': 'none'}" class="MWFCssArea" name="vueCss" title="Vue Css (S)"></div> + + <div onclick="var node = this.getNext(); node.setStyle('display', ((node.getStyle('display')!='none') ? 'none': 'block'))" style="cursor: pointer; height:24px; padding-left: 5px; line-height: 24px; background-color: #EEE; border-bottom: 1px solid #999;font-weight:bold;">Vue Slots</div> + <div style="display: text{($.vueSlot) ? 'block' : 'none'}"> + <div class="MWFHtmlEditorArea" name="vueSlot" title="Input Slot (HTML)"></div> + </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> diff --git a/o2web/source/x_component_process_FormDesigner/Module/Elcarousel/template.json b/o2web/source/x_component_process_FormDesigner/Module/Elcarousel/template.json new file mode 100644 index 0000000000000000000000000000000000000000..b3d61b900fbbcac797f0ec18d4948ee67ee2b5ef --- /dev/null +++ b/o2web/source/x_component_process_FormDesigner/Module/Elcarousel/template.json @@ -0,0 +1,45 @@ +{ + "id": "", + "name": "", + "type": "Elcarousel", + "disabled": false, + "size" : "", + "text": "", + "placement": "bottom-end", + "trigger": "hover", + "hideOnClick": true, + "showButton": true, + "splitButton": false, + "buttonType": "", + "showTimeout": 250, + "hideTimeout": 150, + "dataType": "json", + "vueData": {}, + "vueMethods": {}, + "vueCss": {}, + "vueSlot": "", + "elProperties": {}, + "elStyles": {}, + "events": { + "queryLoad": { + "code": "", + "html": "" + }, + "postLoad": { + "code": "", + "html": "" + }, + "load": { + "code": "", + "html": "" + }, + "change": { + "code": "", + "html": "" + } + }, + "properties": {}, + "class": "", + "styles": {}, + "container": "" +} diff --git a/o2web/source/x_component_process_FormDesigner/Module/Package.js b/o2web/source/x_component_process_FormDesigner/Module/Package.js index 3842da48486b4741a669c2df72a42ba09c02527e..23a85990e0029e27a914ee11ff0a5da396fd0f9b 100644 --- a/o2web/source/x_component_process_FormDesigner/Module/Package.js +++ b/o2web/source/x_component_process_FormDesigner/Module/Package.js @@ -74,4 +74,5 @@ MWF.xDesktop.requireApp("process.FormDesigner", "Module.Elrate", null, false); MWF.xDesktop.requireApp("process.FormDesigner", "Module.Elcolorpicker", null, false); MWF.xDesktop.requireApp("process.FormDesigner", "Module.Eltree", null, false); MWF.xDesktop.requireApp("process.FormDesigner", "Module.Eldropdown", null, false); +MWF.xDesktop.requireApp("process.FormDesigner", "Module.Elcarousel", 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 034f3366746bc06d4a4fa4ab04da76bcc6997e73..4fb82466823f0bcb36117bfbd22292c06c38e17c 100644 --- a/o2web/source/x_component_process_FormDesigner/lp/en.js +++ b/o2web/source/x_component_process_FormDesigner/lp/en.js @@ -354,6 +354,7 @@ MWF.xApplication.process.FormDesigner.LP = { "el_colorpicker": "ColorPicker", "el_tree": "Tree", "el_dropdown": "Dropdown", + "el_carousel": "Carousel", "el-menu": "menu", "el_common": "Common", 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 942574441c296b39492cb406e2554b58d60a06c8..0c7d41df5f7f962bdc38cfba33b5f8f795febaa2 100644 --- a/o2web/source/x_component_process_FormDesigner/lp/zh-cn.js +++ b/o2web/source/x_component_process_FormDesigner/lp/zh-cn.js @@ -354,6 +354,7 @@ MWF.xApplication.process.FormDesigner.LP = { "el_colorpicker": "棰滆壊閫夋嫨", "el_tree": "鏍�", "el_dropdown": "涓嬫媺鑿滃崟", + "el_carousel": "骞荤伅鐗�", "el-menu": "瀵艰埅鑿滃崟", "el_common": "閫氱敤",