增加ElementUI组件 select

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

@@ -22,7 +22,7 @@ MWF.xApplication.process.FormDesigner.Module.$ElElement = MWF.FC$ElElement = new
 		this.containerNode = null;
 		this.isPropertyLoaded = false;
 	},
-	_dragMoveComplete: MWF.FC$Component.prototype._dragComplete,
+	_dragMoveComplete: MWF.FC$Module.prototype._dragComplete,
 	_dragComplete: function(){
 		if (!this.node){
 			this._createNode(function(){
@@ -164,7 +164,9 @@ MWF.xApplication.process.FormDesigner.Module.$ElElement = MWF.FC$ElElement = new
 		return {
 			data: this._createVueData(),
 			mounted: function(){
+				this.$nextTick(function(){
 					_self._afterMounted(this.$el, callback);
+				});
 			},
 			errorCaptured: function(err, vm, info){
 				alert("errorCaptured:"+info);
@@ -187,6 +189,7 @@ MWF.xApplication.process.FormDesigner.Module.$ElElement = MWF.FC$ElElement = new
 		}
 	},
 	_afterMounted: function(el, callback){
+		debugger;
 		this.node = el;
 		this.node.store("module", this);
 		this._loadVueCss();

o2web/source/x_component_process_FormDesigner/Module/Elselect.js

@@ -14,6 +14,7 @@ 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+"\"";
@@ -31,7 +32,7 @@ MWF.xApplication.process.FormDesigner.Module.Elselect = MWF.FCElselect = new Cla
 		// if (this.json.loadingText) html += " loading-text=\""+this.json.loadingText+"\"";
 		// html += " :fetch-suggestions=\"$fetchSuggestions\"";
 
-
+		// html += " v-model=\"id\"";
 		html += " :placeholder=\"description\"";
 		html += " :size=\"size\"";
 		html += " :clearable=\"clearable\"";
@@ -43,18 +44,25 @@ MWF.xApplication.process.FormDesigner.Module.Elselect = MWF.FCElselect = new Cla
 		html += " :allow-create=\"allowCreate\"";
 		html += " :no-match-text=\"noMatchText\"";
 		html += " :no-data-text=\"noDataText\"";
-		html += " :remote=\"filterRemote\"";
+		html += " :remote=\"remote\"";
 		html += " :loading-text=\"loadingText\"";
 
 		html += " :style=\"elStyles\"";
 
-		html += " value=\""+this.json.id+"\">";
-		html += "<el-option></el-option>";
+		html += " :value=\"id\">";
+		//html += ">";
+		html += "<el-option label=\"\" value=\"\"></el-option>";
 		if (this.json.vueSlot) html += this.json.vueSlot;
 		html += "</el-select>";
 		return html;
 	},
-
+	_createVueData: function(){
+		//var data = this.json;
+		return function(){
+			this.json[this.json.id] = "";
+			return Object.assign(this.json, this.tmpVueData||{});
+		}.bind(this)
+	},
 	_setEditStyle_custom: function(name){
 		// switch (name){
 		// 	case "name": this.setPropertyName(); break;
@@ -66,7 +74,15 @@ MWF.xApplication.process.FormDesigner.Module.Elselect = MWF.FCElselect = new Cla
 		this.node = el;
 		this.node.store("module", this);
 		this._loadVueCss();
-		this.node.getElement("input").removeEvents("click");
 		if (callback) callback();
+		//window.setTimeout(function(){
+		this.node.getElement("input").addEvent("click", function(e){
+			this.selected();
+			e.stopPropagation();
+		}.bind(this));
+		this.node.getElement(".el-select").addEvent("click", function(e){
+			this.selected();
+			e.stopPropagation();
+		}.bind(this));
 	},
 });

o2web/source/x_component_process_FormDesigner/Module/Elselect/elselect.html

@@ -21,7 +21,7 @@
 				</td>
 			</tr>
 		</table>
-		<div style="text-align: center; height:24px; padding-left: 5px; line-height: 24px; background-color: #EEE; border-bottom: 1px solid #999;font-weight:bold;">{{$.lp.options}}</div>
+		<div style="text-align: center; height:24px; padding-left: 5px; line-height: 24px; background-color: #EEE; border-bottom: 1px solid #ccc; border-top: 1px solid #999;font-weight:bold;">{{$.lp.options}}</div>
 		<table width="100%" border="0" cellpadding="5" cellspacing="0" class="editTable">
 			<tr>
 				<td class="editTableTitle">{{$.lp.optionsGroup}}:</td>
@@ -45,22 +45,39 @@
 
 			<div id="text{$.pid}selectEditItemValues" style="display: text{($.itemType!=='script')?'block':'none'}" class="MWFArraylist" name="itemValues" title="{{$.lp.options}}"></div>
 			<div id="text{$.pid}selectEditItemScript" style="display: text{($.itemType=='script')?'block':'none'}; border-bottom: 1px solid #cccccc">
-				<div class="MWFScriptArea" name="itemScript" title="{{$.lp.optionScript}} (S)"></div>
+				<div class="MWFFormulaArea" name="itemScript" title="{{$.lp.optionScript}} (S)"></div>
 				<div style="padding: 5px">{{$.lp.selectItemScriptInfo}}</div>
-				<div style="padding: 5px">
-					<div>return [{"value": "value1", label: "label1"}, {"value": "value2", label: "label2"}, {"value": "value3", , label: "label3"}];</div>
+<!--				<div style="padding: 5px; border-bottom: 1px solid #cccccc">-->
+<!--					<div>return [{"value": "value1", label: "label1"}, {"value": "value2", label: "label2"}, {"value": "value3", , label: "label3"}];</div>-->
+<!--				</div>-->
 			</div>
 		</div>
+
+		<div style="display: text{($.itemsGroup!==true) ? 'none' : 'block'}; border-bottom: 1px solid #cccccc">
+			<div class="MWFFormulaArea" name="itemGroupScript" title="{{$.lp.optionScript}} (S)"></div>
+			<div style="padding: 5px">{{$.lp.selectItemScriptInfo}}</div>
+<!--			<div style="padding: 5px; border-bottom: 1px solid #cccccc">-->
+<!--				<div>return {</div>-->
+<!--				<div><span>&nbsp;&nbsp;&nbsp;&nbsp;</span>options: [{</div>-->
+<!--				<div><span>&nbsp;&nbsp;&nbsp;&nbsp;</span><span>&nbsp;&nbsp;&nbsp;&nbsp;</span>label: '热门城市',</div>-->
+<!--				<div><span>&nbsp;&nbsp;&nbsp;&nbsp;</span><span>&nbsp;&nbsp;&nbsp;&nbsp;</span>options: [{value: 'Shanghai', label: '上海'}, {value: 'Beijing', label: '北京'}]</div>-->
+<!--				<div><span>&nbsp;&nbsp;&nbsp;&nbsp;</span>}, {</div>-->
+<!--				<div><span>&nbsp;&nbsp;&nbsp;&nbsp;</span><span>&nbsp;&nbsp;&nbsp;&nbsp;</span>label: '城市名',</div>-->
+<!--				<div><span>&nbsp;&nbsp;&nbsp;&nbsp;</span><span>&nbsp;&nbsp;&nbsp;&nbsp;</span>options: [{value: 'Chengdu', label: '成都'}, {value: 'Shenzhen', label: '深圳'}, {value: 'Guangzhou', label: '广州'}]</div>-->
+<!--				<div><span>&nbsp;&nbsp;&nbsp;&nbsp;</span>}]</div>-->
+<!--				<div>}</div>-->
+<!--			</div>-->
 		</div>
 
-		<div></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="default" text{(!$.size || $.inputSize==='default')?'checked':''}/>default
+					<input type="radio" name="size" value="default" text{(!$.size || $.size==='default')?'checked':''}/>default
 					<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
@@ -133,7 +150,7 @@
 				<tr>
 					<td class="editTableTitle">{{$.lp.noDataText}}:</td>
 					<td class="editTableValue">
-						<input type="text" name="noMatchText" value="text{$.noMatchText}" class="editTableInput"/>
+						<input type="text" name="noDataText" value="text{$.noDataText}" class="editTableInput"/>
 					</td>
 				</tr>
 			</table>
@@ -165,8 +182,12 @@
 
 		</div>
 
-		<div class="MWFMaplist" name="elStyles" title="{{$.lp.style}}"></div>
-		<div class="MWFMaplist" name="elProperties" title="{{$.lp.attribute}}"></div>
+		<div class="MWFMaplist" name="elStyles" collapse="true" title="Select {{$.lp.style}}"></div>
+		<div class="MWFMaplist" name="elProperties" collapse="true" title="Select {{$.lp.attribute}}"></div>
+		<div class="MWFMaplist" name="elOptionStyles" collapse="true" title="Option {{$.lp.style}}"></div>
+		<div class="MWFMaplist" name="elOptionProperties" collapse="true" title="Option {{$.lp.attribute}}"></div>
+		<div class="MWFMaplist" name="elGroupStyles" collapse="true" title="Group {{$.lp.style}}"></div>
+		<div class="MWFMaplist" name="elGroupProperties" collapse="true" title="Group {{$.lp.attribute}}"></div>
 
 		<table width="100%" border="0" cellpadding="5" cellspacing="0" class="editTable">
 			<tr>
@@ -197,6 +218,11 @@
 		<div style="display: text{($.vueSlot) ? 'block' : 'none'}">
 			<div class="MWFHtmlEditorArea" name="vueSlot" title="Input Slot (HTML)"></div>
 		</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;">{{$.lp.selectTemplete}}</div>
+		<div style="display: text{($.customTemplete) ? 'block' : 'none'}">
+			<div class="MWFHtmlEditorArea" name="customTemplete" title="{{$.lp.selectTemplete}} (HTML)"></div>
+		</div>
 	</div>
 	<div title="{{$.lp.section}}" class="MWFTab">
 		<table width="100%" border="0" cellpadding="5" cellspacing="0" class="editTable">

o2web/source/x_component_process_FormDesigner/Module/Elselect/template.json

@@ -3,6 +3,39 @@
 	"name": "",
 	"type": "Elselect",
 	"description": "",
+
+	"isReadonly" : false,
+	"itemsGroup" : false,
+	"itemType" : "values",
+	"size" : "default",
+	"clearable" : false,
+	"multiple" : false,
+	"collapseTags" : false,
+	"filterable" : false,
+	"allowCreate" : false,
+	"remote" : false,
+	"popperClass" : "",
+	"multipleLimit" : 0,
+	"noMatchText" : "",
+	"noDataText": "",
+	"loadingText" : "",
+	"itemScript": {},
+	"itemGroupScript": {},
+	"filterMethod": {},
+	"remoteMethod": {},
+
+	"vueData": {},
+	"vueMethods": {},
+	"vueCss": {},
+	"vueSlot": "",
+
+	"elProperties": {},
+	"elStyles": {},
+	"elOptionProperties": {},
+	"elOptionStyles": {},
+	"elGroupProperties": {},
+	"elGroupStyles": {},
+
 	"events": {
 	  "queryLoad": {
 		"code": "",
@@ -16,7 +49,11 @@
 		  "code": "",
 		  "html": ""
 		},
-		"select": {
+		"visible-change": {
+			"code": "",
+			"html": ""
+		},
+		"remove-tag": {
 			"code": "",
 			"html": ""
 		},

o2web/source/x_component_process_FormDesigner/lp/en.js

@@ -1091,6 +1091,7 @@ MWF.xApplication.process.FormDesigner.LP = {
         "marksScriptInfo": "Return an object, the type of key must be number and the value must be in the closed interval [min, max], and each mark can be styled separately",
         "optionsGroup": "Options Group",
         "selectItemScriptInfo": "Return a list of optional value arrays; or a Promise object that resolves the optional value array.",
+        "selectTemplete": "Custom Options Templete",
 
         "showOptions": "Show Options",
         "onInput": "When inputting",

o2web/source/x_component_process_FormDesigner/lp/zh-cn.js

@@ -1098,6 +1098,7 @@ MWF.xApplication.process.FormDesigner.LP = {
         "marksScriptInfo": "返回一个对象，key 的类型必须为 number 且取值在闭区间 [min, max] 内，每个标记可以单独设置样式",
         "optionsGroup": "可选项分组",
         "selectItemScriptInfo": "返回一个可选值数组列表；或者一个resolve了可选值数组的Promise对象",
+        "selectTemplete": "自定义选项模板",
 
 
         "showOptions": "显示选项",

o2web/source/x_component_process_Xform/Elselect.js

+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.Elselect = MWF.APPElselect =  new Class(
+    /** @lends o2.xApplication.process.Xform.Elinput# */
+    {
+    Implements: [Events],
+    Extends: MWF.APP$Elinput,
+    options: {
+        "moduleEvents": ["load", "queryLoad", "postLoad"],
+        "elEvents": ["focus", "blur", "change", "visible-change", "remove-tag", "clear"]
+    },
+    _appendVueData: function(){
+        this.form.Macro.environment.data.check(this.json.id);
+        //if (!this.json[this.json.id]){
+        this.json[this.json.id] = this._getBusinessData();
+        //}
+
+        // "size" : "default",
+        //     "clearable" : false,
+        //     "multiple" : false,
+        //     "collapseTags" : false,
+        //     "filterable" : false,
+        //     "allowCreate" : false,
+        //     "remote" : false,
+        //     "popperClass" : "",
+        //     "multipleLimit" : 0,
+        //     "noMatchText" : "",
+        //     "noDataText": "",
+        //     "loadingText" : "",
+        //     "itemScript": {},
+        // "itemGroupScript": {},
+        // "filterMethod": {},
+        // "remoteMethod": {},
+
+        if (!this.json.clearable) this.json.clearable = false;
+        if (!this.json.size) this.json.size = "";
+        if (!this.json.multiple) this.json.multiple = false;
+        if (!this.json.collapseTags) this.json.collapseTags = false;
+        if (!this.json.filterable) this.json.filterable = false;
+        if (!this.json.allowCreate) this.json.allowCreate = false;
+        if (!this.json.remote) this.json.remote = false;
+        if (!this.json.popperClass) this.json.popperClass = "";
+        if (!this.json.multipleLimit || !this.json.multipleLimit.toInt()) this.json.multipleLimit = 0;
+        if (!this.json.noMatchText) this.json.noMatchText = "";
+        if (!this.json.noDataText) this.json.noDataText = "";
+        if (!this.json.loadingText) this.json.loadingText = "";
+        if (!this.json.description) this.json.description = "";
+        if (!this.json.disabled) this.json.disabled = false;
+        if (!this.json.loading) this.json.loading = false;
+        if (!this.json.options) this.json.options = [];
+
+        this._loadOptions();
+
+        if (this.json.multiple===true) if (!this.json[this.json.id] || !this.json[this.json.id].length) this.json[this.json.id] = [];
+    },
+    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, null);
+            }
+        }.bind(this);
+        if (this.json.filterMethod && this.json.filterMethod.code){
+            var fn = this.form.Macro.exec(this.json.filterMethod.code, this);
+            app.methods.$filterMethod = function(){
+                fn.apply(this, arguments);
+            }.bind(this)
+        }
+        if (this.json.remoteMethod && this.json.remoteMethod.code){
+            var fn = this.form.Macro.exec(this.json.remoteMethod.code, this);
+            app.methods.$remoteMethod = function(){
+                fn.apply(this, arguments);
+            }.bind(this)
+        }
+    },
+    _setOptionsWithCode: function(code){
+        var v = this.form.Macro.exec(code, this);
+        if (v.then){
+            v.then(function(o){
+                if (o2.typeOf(o)==="array"){
+                    this.json.options = o;
+                }
+            }.bind(this));
+        }else if (o2.typeOf(v)==="array"){
+            this.json.options = v;
+        }
+    },
+    _loadOptions: function(){
+        if (this.json.itemsGroup===true){
+            if (this.json.itemGroupScript && this.json.itemGroupScript.code)  this._setOptionsWithCode(this.json.itemGroupScript.code);
+        }else{
+            if (this.json.itemType=="script"){
+                if (this.json.itemScript && this.json.itemScript.code) this._setOptionsWithCode(this.json.itemScript.code);
+            }else{
+                if (this.json.itemValues && (o2.typeOf(this.json.itemValues)==="array")){
+                    this.json.options = this.json.itemValues.map(function(item){
+                        if (item){
+                            var arr = item.split("|");
+                            if (arr.length>1){
+                                return {"label": arr[0], "value": arr[1]};
+                            }else{
+                                return {"label": arr[0], "value": arr[0]};
+                            }
+                        }
+                    });
+                }
+            }
+        }
+    },
+    _createElementHtml: function(){
+        debugger;
+        var html = "<el-select";
+        html += " v-model=\""+this.json.id+"\"";
+        html += " :clearable=\"clearable\"";
+        html += " :size=\"size\"";
+        html += " :filterable=\"filterable\"";
+        html += " :disabled=\"disabled\"";
+        html += " :placeholder=\"description\"";
+        html += " :multiple=\"multiple\"";
+        html += " :collapse-tags=\"collapseTags\"";
+        html += " :allow-create=\"allowCreate\"";
+        html += " :remote=\"remote\"";
+        html += " :popper-class=\"popperClass\"";
+        html += " :multiple-limit=\"multipleLimit\"";
+        html += " :no-match-text=\"noMatchText\"";
+        html += " :no-data-text=\"noDataText\"";
+        html += " :loading-text=\"loadingText\"";
+        html += " :loading=\"loading\"";
+
+        if (this.json.filterMethod && this.json.filterMethod.code){
+            html += " :filter-method=\"$filterMethod\"";
+        }
+        if (this.json.remoteMethod && this.json.remoteMethod.code){
+            html += " :remote-method=\"$remoteMethod\"";
+        }
+
+        this.options.elEvents.forEach(function(k){
+            html += " @"+k+"=\"$loadElEvent('"+k+"')\"";
+        });
+
+        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) html += " :style=\"elStyles\"";
+        html += ">";
+
+        var itemFor = "item in options";
+        if (this.json.itemsGroup===true){
+            html += "<el-option-group v-for=\"group in options\" :key=\"group.label\" :label=\"group.label\"";
+            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) html += " :style=\"elGroupStyles\"";
+            html += ">";
+
+            itemFor = "item in group.options";
+        }
+        html += "<el-option v-for=\""+itemFor+"\" :key=\"item.value\" :label=\"item.label\" :value=\"item.value\"";
+        if (this.json.elOptionProperties){
+            Object.keys(this.json.elOptionProperties).forEach(function(k){
+                if (this.json.elOptionProperties[k]) html += " "+k+"=\""+this.json.elOptionProperties[k]+"\"";
+            }, this);
+        }
+        if (this.json.elOptionStyles) html += " :style=\"elOptionStyles\"";
+        html += ">";
+        if (this.json.customTemplete) html += this.json.customTemplete;
+        html += "</el-option>";
+
+        if (this.json.itemsGroup===true){
+            html += "</el-option-group>"
+        }
+
+        if (this.json.vueSlot) html += this.json.vueSlot;
+
+        html += "</el-select>";
+        return html;
+    }
+});