Merge branch 'feature/element_Carousel' into 'wrdp'

Merge of feature/element_Carousel 表单中加入了幻灯片组件 to wrdp

See merge request o2oa/o2oa!6479

(cherry picked from commit ea7a3f60)

9a3d6dcc element_carousel
def24ddc 走马灯
4a1ead89 幻灯片
071dbb31 element_走马灯
7c0db405 element幻灯片
ebda8390 走马灯
12203890 走马灯
3fa966a2 走马灯
afb2b0e9 走马灯
c7a0767d 走马灯
ef1212e2 走马灯
784ebaf3 走马灯

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,

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,

o2web/source/x_component_process_FormDesigner/Module/$ElElement.js

@@ -11,7 +11,6 @@ MWF.xApplication.process.FormDesigner.Module.$ElElement = MWF.FC$ElElement = new
 	},
 
 	initialize: function(form, options){
-		debugger;
 		this.setOptions(options);
 		this._initModuleType();
 		this.path = "../x_component_process_FormDesigner/Module/"+this.className+"/";
@@ -111,7 +110,6 @@ MWF.xApplication.process.FormDesigner.Module.$ElElement = MWF.FC$ElElement = new
 		}.bind(this));
 	},
 	_resetVueModuleDomNode: function(callback){
-		debugger;
 		if (!this.vm){
 			if (!this.node.hasClass("o2_vue")) this.node.addClass("o2_vue");
 			var html = this._filterHtml(this._createElementHtml());
@@ -250,7 +248,6 @@ MWF.xApplication.process.FormDesigner.Module.$ElElement = MWF.FC$ElElement = new
 			}.bind(this));
 			this.json.preprocessing = "y";
 
-			debugger;
 			this._resetElementFun = this.resetElement.bind(this);
 			this.form.addEvent("postSave", this._resetElementFun);
 		}catch(e){};

o2web/source/x_component_process_FormDesigner/Module/Elbutton.js

@@ -14,7 +14,6 @@ MWF.xApplication.process.FormDesigner.Module.Elbutton = MWF.FCElbutton = new Cla
 		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+"\"";

o2web/source/x_component_process_FormDesigner/Module/Elcarousel.js

+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 += " height="+ (this.json.height ? (this.json.height+"px") : "");
+		html += " initial-index=1";
+		html += " indicator-position=\"outside\"";
+		html += " arrow=\"always\"";
+		html += " interval=30000";
+		html += " :type=\"carouselType\"";
+		html += " loop";
+		html += " :direction=\"direction\"";
+		// html += " :initial-index=\"initialIndex\"";
+		// html += " :trigger=\"trigger\"";
+		// html += " :autoplay=\"autoplay\"";
+		// html += " :interval=\"interval\"";
+		// html += " :indicator-position=\"indicatorPosition\"";
+		// html += " :arrow=\"arrow\"";
+		// html += " :type=\"carouselType\"";
+		// html += " :loop=\"loop\"";
+		// html += " :direction=\"direction\"";
+
+		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{
+			var lineHeight = this.json.height ? ( "line-height:"+this.json.height + "px;") : "";
+			html += "<el-carousel-item v-for='item in 3' :key='item'>";
+			html += 	"<div style=\"text-align: center;"+lineHeight+"\">"+this.json.id+"</div>";
+			html += "</el-carousel-item>";
+		}
+
+		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;
+	},
+	_setEditStyle_custom: function(name){
+		switch (name){
+			case "name": this.setPropertyName(); break;
+			case "id":
+			case "height":
+			case "vueSlot":
+				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);
+		// }
+	}
+});

o2web/source/x_component_process_FormDesigner/Module/Elcarousel/default/css.wcss

+{
+	"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,
+		"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
+	},
+	"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
+	}
+	
+}

o2web/source/x_component_process_FormDesigner/Module/Elcarousel/elcarousel.html

+<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="editTableInputNoWidth"/>px</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.carouselTypeValue[0]}}
+					<input type="radio" name="carouselType" value="card" text{($.trigger==='card')?'checked':''}/>{{$.lp.carouselTypeValue[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="editTableInputNoWidth"/>ms</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.arrowValue[0]}}
+					<input type="radio" name="arrow" value="always" text{($.arrow==='always')?'checked':''}/>{{$.lp.arrowValue[1]}}
+					<input type="radio" name="arrow" value="never" text{($.arrow==='never')?'checked':''}/>{{$.lp.arrowValue[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':''}/>{{$.lp.directionValue[0]}}
+					<input type="radio" name="direction" value="vertical" text{($.direction==='vertical')?'checked':''}/>{{$.lp.directionValue[1]}}
+				</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.data}}"  class="MWFTab">
+		<table>
+			<tr>
+				<td class="editTableTitle"></td>
+				<td class="editTableValue">
+					<input type="radio" name="dataType" value="hotpicture" text{(!$.dataType || $.dataType==='hotpicture')?'checked':''}
+						   onclick="if (this.checked){
+							$('text{$.pid}hotpicture').setStyle('display', '');
+							$('text{$.pid}source').setStyle('display', 'none');
+							$('text{$.pid}dataScript').setStyle('display', 'none');
+						}"
+					/>{{$.lp.hotpicture}}
+					<input type="radio" name="dataType" value="source" text{($.dataType==='source')?'checked':''}
+						   onclick="if (this.checked){
+							$('text{$.pid}hotpicture').setStyle('display', 'none');
+							$('text{$.pid}source').setStyle('display', '');
+							$('text{$.pid}dataScript').setStyle('display', 'none');
+						}"
+					/>{{$.lp.systemSource}}
+					<input type="radio" name="dataType" value="script" text{($.dataType==='script')?'checked':''}
+						   onclick="if (this.checked){
+							$('text{$.pid}hotpicture').setStyle('display', 'none');
+							$('text{$.pid}source').setStyle('display', 'none');
+							$('text{$.pid}dataScript').setStyle('display', '');
+						}"
+					/>{{$.lp.script}}
+				</td>
+			</tr>
+		</table>
+		<div id="text{$.pid}hotpicture" style="display: text{(!$.dataType || $.dataType=='hotpicture')?'':'none'}">
+			<table width="100%" border="0" cellpadding="5" cellspacing="0" class="editTable">
+				<tr>
+					<td class="editTableTitle">{{$.lp.count}}:</td>
+					<td class="editTableValue"><input type="number" name="count" value="text{$.count}" class="editTableInput"/></td>
+				</tr>
+				<tr>
+					<td class="editTableTitle">{{$.lp.page}}:</td>
+					<td class="editTableValue"><input type="number" name="page" value="text{$.page}" class="editTableInput"/></td>
+				</tr>
+			</table>
+			<div style="padding: 5px;">脚本可返回过滤参数，格式如下：<br/>return { <br/>
+				"application" : "", //BBS论坛, CMS内容管理，忽略为全部<br/>
+				"title" : "", //标题包含的文字，模糊匹配<br/>
+				}; </div>
+			<div class="MWFFormulaArea" name="filterScript" title="{{$.lp.filterParameter}}"></div>
+		</div>
+		<div id="text{$.pid}source" style="display: text{($.dataType=='source')?'':'none'}">
+			<table width="100%" border="0" cellpadding="5" cellspacing="0" class="editTable">
+				<tr>
+					<td class="editTableTitle">{{$.lp.method}}:</td>
+					<td class="editTableValue">
+						<select name="httpMethod" onchange="var i=this.selectedIndex; if (i==1 || i==2 || i==3){$('text{$.pid}requestBodyArea').setStyle('display', 'block');}else{$('text{$.pid}requestBodyArea').setStyle('display', 'none');}">
+							<option value="GET" text{($.httpMethod=='GET')?'selected':''}>GET</option>
+							<option value="POST" text{($.httpMethod=='POST')?'selected':''}>POST</option>
+							<option value="PUT" text{($.httpMethod=='PUT')?'selected':''}>PUT</option>
+							<option value="PATCH" text{($.httpMethod=='PATCH')?'selected':''}>PATCH</option>
+							<option value="OPTIONS" text{($.httpMethod=='OPTIONS')?'selected':''}>OPTIONS</option>
+							<option value="HEAD" text{($.httpMethod=='HEAD')?'selected':''}>HEAD</option>
+							<option value="DELETE" text{($.httpMethod=='DELETE')?'selected':''}>DELETE</option>
+						</select>
+					</td>
+				</tr>
+			</table>
+			<div id="text{$.pid}sourceO2Area" style="display: text{($.sourceType!='other')?'block':'none'}">
+				<table width="100%" border="0" cellpadding="5" cellspacing="0" class="editTable">
+					<tr>
+						<td class="editTableTitle">{{$.lp.applicationService}}:</td>
+						<td class="editTableValue"><div class="MWFContextRoot" name="contextRoot">
+							<select></select>
+							<select style="display: none"></select><br/>
+							<select style="display: none"></select>
+							<input style="display: none" type="text" name="selectPath" value="text{$.selectPath}" class="editTableInput"/>
+						</div></td>
+					</tr>
+				</table>
+			</div>
+
+			<table width="100%" border="0" cellpadding="5" cellspacing="0" class="editTable">
+				<tr>
+					<td class="editTableTitle">{{$.lp.servicePath}}:</td>
+					<td class="editTableValue">
+						<div>{{$.lp.servicePathNote}}</div>
+						<input type="text" name="path" value="text{$.path}" class="editTableInput"/>
+					</td>
+				</tr>
+				<tr>
+					<td class="editTableTitle">{{$.lp.dataItemPath}}:</td>
+					<td class="editTableValue">
+						<div>{{$.lp.dataItemPathNote}}</div>
+						<input type="text" name="dataItemPath" value="text{$.dataItemPath}" class="editTableInput"/>
+					</td>
+				</tr>
+			</table>
+			<div style="background-color: #eeeeee; border-top:1px solid #999999; height: 24px; line-height: 24px; text-align: center;">{{$.lp.parameter}}</div>
+			<div class="MWFParameterArea" name="parameters"></div>
+
+			<div id="text{$.pid}requestBodyArea" style="display: text{($.httpMethod=='PUT' || $.httpMethod=='POST' || $.httpMethod=='PATCH')?'block':'none'}">
+				<div class="MWFFormulaArea" name="requestBody" title="{{$.lp.requestBody}}"></div>
+			</div>
+
+			<div class="MWFSourceTestRestful">
+				<div style="background-color: #eeeeee; border-top:1px solid #999999; height: 24px; line-height: 24px; text-align: center; cursor:pointer">{{$.lp.test}}</div>
+				<div style="margin: 10px; text-align:center"></div>
+			</div>
+
+
+		</div>
+		<div id="text{$.pid}dataScript" style="display: text{($.dataType=='script')?'':'none'}">
+			<div style="padding: 5px;">{{$.lp.dataScriptNote2}}</div>
+			<div class="MWFScriptArea" name="dataScript"></div>
+			<table><tr>
+				<td class="editTableTitle">{{$.lp.dataItemPath}}:</td>
+				<td class="editTableValue">
+					<div>{{$.lp.dataItemPathNote}}</div>
+					<input type="text" name="scriptDataItemPath" value="text{$.scriptDataItemPath}" class="editTableInput"/>
+				</td>
+			</tr>
+			</table>
+		</div>
+	</div>
+
+	<div title="{{$.lp.content}}"  class="MWFTab">
+<!--		<table>-->
+<!--			<tr>-->
+<!--				<td class="editTableTitle"></td>-->
+<!--				<td class="editTableValue">-->
+<!--					<input type="radio" name="contentType" value="config" text{(!$.contentType || $.contentType==='config')?'checked':''}-->
+<!--						   onclick="if (this.checked){-->
+<!--							$('text{$.pid}contentConfig').setStyle('display', '');-->
+<!--							$('text{$.pid}contentScript').setStyle('display', 'none');-->
+<!--						}"-->
+<!--					/>{{$.lp.config}}-->
+<!--					<input type="radio" name="contentType" value="script" text{($.contentType==='script')?'checked':''}-->
+<!--						   onclick="if (this.checked){-->
+<!--							$('text{$.pid}contentConfig').setStyle('display', 'none');-->
+<!--							$('text{$.pid}contentScript').setStyle('display', '');-->
+<!--						}"-->
+<!--					/>{{$.lp.script}}-->
+<!--				</td>-->
+<!--			</tr>-->
+<!--		</table>-->
+		<div id="text{$.pid}contentConfig" class="MWFElCarouselContent" name="contentConfig"
+			 style="display: text{($.contentType!='script')?'':'none'}">
+		</div>
+<!--		<div id="text{$.pid}contentScript" style="display: text{($.contentType=='script')?'':'none'}">-->
+<!--			<div style="padding: 5px;">脚本返回Promise对象或数据</div>-->
+<!--			<div class="MWFScriptArea" name="contentScript"></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" style="display: none">
+		<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/Elcarousel/template.json

+{
+	"id": "",
+	"name": "",
+	"type": "Elcarousel",
+	"height": "200",
+	"initialIndex": 0,
+	"trigger": "",
+	"autoplay": true,
+	"interval": 3000,
+	"indicatorPosition": "outside",
+	"arrow": "hover",
+	"carouselType": "",
+	"loop": true,
+	"direction": "horizontal",
+	"count": "6",
+	"page": "1",
+	"httpMethod": "GET",
+	"contentConfig": [],
+	"dataItemPath": "data",
+	"scriptDataItemPath": "data",
+	"vueData": {},
+	"vueMethods": {},
+	"vueCss": {},
+	"vueSlot": "",
+	"elProperties": {},
+	"elStyles": {},
+	"events": {
+	  "queryLoad": {
+		"code": "",
+		"html": ""
+	  },
+	  "postLoad": {
+		"code": "",
+		"html": ""
+	  },
+		"load": {
+		  "code": "",
+		  "html": ""
+		},
+		"change": {
+			"code": "",
+			"html": ""
+		}
+	},
+	"properties": {},
+	"class": "",
+	"styles": {},
+	"container": ""
+}

o2web/source/x_component_process_FormDesigner/Module/Eldropdown/eldropdown.html

@@ -112,21 +112,21 @@
 		<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>
+<!--		<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="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 class="MWFValidation" name="validationConfig"></div>-->
+<!--		<div class="MWFScriptArea" name="validation" title="{{$.lp.verificationScript}} (S)"></div>-->
 		
 	</div>
 	<div title="{{$.lp.menuItem}}"  class="MWFTab">

o2web/source/x_component_process_FormDesigner/Module/Elselect.js

@@ -14,7 +14,6 @@ MWF.xApplication.process.FormDesigner.Module.Elselect = MWF.FCElselect = new Cla
 		this.moduleName = "elselect";
 	},
 	_createElementHtml: function(){
-		debugger;
 		//var html = "<el-input placeholder=\"请输入内容\"></el-input>";
 		var html = "<el-select";
 		// if (this.json.description) html += " placeholder=\""+this.json.description+"\"";

o2web/source/x_component_process_FormDesigner/Module/Elslider.js

@@ -14,7 +14,6 @@ MWF.xApplication.process.FormDesigner.Module.Elslider = MWF.FCElslider = new Cla
 		this.moduleName = "elslider";
 	},
 	_createElementHtml: function(){
-		debugger;
 		//var html = "<el-input placeholder=\"请输入内容\"></el-input>";
 		var html = "<el-slider";
 		html += " v-model=\"tmpValue\"";

o2web/source/x_component_process_FormDesigner/Module/Eltime.js

@@ -14,7 +14,6 @@ MWF.xApplication.process.FormDesigner.Module.Eltime = MWF.FCEltime = new Class({
 		this.moduleName = "eltime";
 	},
 	_createElementHtml: function() {
-		debugger;
 		if (this.json.timeSelectType === "select"){
 			// if (this.json.isRange ) {
 			// 	return this.createSelectRangeElementHtml();

o2web/source/x_component_process_FormDesigner/Module/Eltree.js

@@ -41,7 +41,6 @@ MWF.xApplication.process.FormDesigner.Module.Eltree = MWF.FCEltree = new Class({
 		}).inject(this.iconNode);
 	},
 	_createElementHtml: function(){
-		debugger;
 		var html =  "<el-tree";
 		html += " v-model=\"tmpValue\"";
 
@@ -107,7 +106,6 @@ MWF.xApplication.process.FormDesigner.Module.Eltree = MWF.FCEltree = new Class({
 		}.bind(this)
 	},
 	_setEditStyle_custom: function(name, obj, oldValue){
-		debugger;
 		switch (name){
 			// case "dataType": this.setPropertyName(); break;
 			// case "id": this.setPropertyId(); break;

o2web/source/x_component_process_FormDesigner/Module/Eltree/default/css.wcss

@@ -26,7 +26,6 @@
 		"width": "18px",
 		"height": "2px",
 		"opacity": 0.5,
-		"display": "inline-block",
 		"background": "#ffa200"
 	},
 	"moduleNode": {
@@ -43,8 +42,7 @@
 		"position": "static",
 		"top": "auto",
 		"left": "auto",
-		"opacity": 1,
-		"display": "inline-block"
+		"opacity": 1
 	},
 	"moduleNodeError": {
 		"border-radius": "5px",
@@ -62,8 +60,7 @@
 		"position": "static",
 		"top": "auto",
 		"left": "auto",
-		"opacity": 1,
-		"display": "inline-block"
+		"opacity": 1
 	},
 	"buttonIcon": {
 		"height": "26px",

o2web/source/x_component_process_FormDesigner/Module/Eltree/eltree.html

@@ -196,8 +196,8 @@
 
 <!--		<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 class="MWFValidation" name="validationConfig"></div>-->
+<!--		<div class="MWFScriptArea" name="validation" title="{{$.lp.verificationScript}} (S)"></div>-->
 		
 	</div>
 	<div title="{{$.lp.data}}"  class="MWFTab">

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

o2web/source/x_component_process_FormDesigner/Property.js

@@ -119,6 +119,7 @@ MWF.xApplication.process.FormDesigner.Property = MWF.FCProperty = new Class({
                     this.loadElCommonPreview();
                     this.loadElTreeData();
                     this.loadElTDropDownData();
+                    this.loadElCarouselContent();
 
                     this.loadSmartBISelect();
 
@@ -160,7 +161,7 @@ MWF.xApplication.process.FormDesigner.Property = MWF.FCProperty = new Class({
             MWF.requireApp("process.FormDesigner", "widget.ElTreeEditor", function(){
                 var treeEditor = new MWF.xApplication.process.FormDesigner.widget.ElTreeEditor(node, {
                     "title": title,
-                    "maxObj": this.propertyNode.parentElement.parentElement.parentElement,
+                    "maxObj": this.designer.formContentNode || this.designer.pageContentNode,
                     "onChange": function(){
                         debugger;
                         // this.data[name] = Object.assign(this.data[name], treeEditor.toJson());
@@ -186,7 +187,27 @@ MWF.xApplication.process.FormDesigner.Property = MWF.FCProperty = new Class({
             MWF.requireApp("process.FormDesigner", "widget.ElDropdownItemEditor", function(){
                 var treeEditor = new MWF.xApplication.process.FormDesigner.widget.ElDropdownItemEditor(node, {
                     "title": title,
-                    "maxObj": this.propertyNode.parentElement.parentElement.parentElement,
+                    "maxObj": this.designer.formContentNode || this.designer.pageContentNode,
+                    "onChange": function(){
+                    }.bind(this)
+                });
+                treeEditor.load(json);
+            }.bind(this));
+            node.addEvent("keydown", function(e){e.stopPropagation();});
+        }.bind(this));
+    },
+
+    loadElCarouselContent: function(){
+        var arrays = this.propertyContent.getElements(".MWFElCarouselContent");
+        arrays.each(function(node){
+            var title = node.get("title");
+            var name = node.get("name");
+            var json = this.data[name];
+            if (!json) json = [];
+            MWF.requireApp("process.FormDesigner", "widget.ElCarouselContent", function(){
+                var treeEditor = new MWF.xApplication.process.FormDesigner.widget.ElCarouselContent(node, {
+                    "title": title,
+                    "maxObj": this.designer.formContentNode || this.designer.pageContentNode,
                     "onChange": function(){
                     }.bind(this)
                 });
@@ -1224,11 +1245,11 @@ MWF.xApplication.process.FormDesigner.Property = MWF.FCProperty = new Class({
         var addressObj = layout.serviceAddressList[contextRoot];
         var address = "";
         if (addressObj){
-            address = layout.config.app_protocol+"//"+addressObj.host+(addressObj.port==80 ? "" : ":"+addressObj.port)+addressObj.context;
+            address = layout.config.app_protocol+"//"+addressObj.host+((!addressObj.port || addressObj.port==80) ? "" : ":"+addressObj.port)+addressObj.context;
         }else{
             var host = layout.desktop.centerServer.host || window.location.hostname;
             var port = layout.desktop.centerServer.port;
-            address = layout.config.app_protocol+"//"+host+(port=="80" ? "" : ":"+port)+"/x_program_center";
+            address = layout.config.app_protocol+"//"+host+(!port || port=="80" ? "" : ":"+port)+"/x_program_center";
         }
         return address;
     },