提交 6e813af2 编写于 作者: NoSubject's avatar NoSubject

增加ElementUI组件 autocomplete

上级 07812fea
MWF.xApplication.process.FormDesigner.Module = MWF.xApplication.process.FormDesigner.Module || {};
MWF.xDesktop.requireApp("process.FormDesigner", "Module.$ElElement", null, false);
MWF.xApplication.process.FormDesigner.Module.Elinput = MWF.FCElinput = new Class({
MWF.xApplication.process.FormDesigner.Module.Elautocomplete = MWF.FCElautocomplete = new Class({
Extends: MWF.FC$ElElement,
Implements: [Options, Events],
options: {
"style": "default",
"propertyPath": "../x_component_process_FormDesigner/Module/Elinput/elinput.html"
"propertyPath": "../x_component_process_FormDesigner/Module/Elautocomplete/elautocomplete.html"
},
_initModuleType: function(){
this.className = "Elinput";
this.className = "Elautocomplete";
this.moduleType = "element";
this.moduleName = "elinput";
this.moduleName = "elautocomplete";
},
_createElementHtml: function(){
debugger;
//var html = "<el-input placeholder=\"请输入内容\"></el-input>";
var html = "<el-input";
var html = "<el-autocomplete";
if (this.json.description) html += " placeholder=\""+this.json.description+"\"";
html += " type=\""+(this.json.inputType || "text")+"\"";
if (this.json.maxlength) html += " maxlength=\""+this.json.maxlength+"\"";
if (this.json.showWordLimit) html += " show-word-limit";
if (this.json.clearable) html += " clearable";
if (this.json.showPassword) html += " show-password";
if (this.json.size && this.json.size!=="default") html += " size=\""+this.json.size+"\"";
html += " rows=\""+(this.json.textareaRows || "2")+"\"";
if (this.json.autosize){
var o = {};
if (this.json.minRows) o.minRows = this.json.minRows;
if (this.json.maxRows) o.maxRows = this.json.maxRows;
html += " autosize=\""+JSON.stringify(o)+"\"";
}
if (this.json.resize) html += " resize=\""+this.json.resize+"\"";
if (this.json.placement) html += " placement=\""+this.json.placement+"\"";
if (this.json.popperClass) html += " popper-class=\""+this.json.popperClass+"\"";
if (this.json.triggerOnFocus===false ) html += " :trigger-on-focus='false'";
if (this.json.prefixIcon) html += " prefix-icon=\""+this.json.prefixIcon+"\"";
if (this.json.suffixIcon) html += " suffix-icon=\""+this.json.suffixIcon+"\"";
html += " :fetch-suggestions=\"$fetchSuggestions\"";
if (this.json.elProperties){
Object.keys(this.json.elProperties).forEach(function(k){
......@@ -49,10 +38,33 @@ MWF.xApplication.process.FormDesigner.Module.Elinput = MWF.FCElinput = new Class
}, this);
html += " style=\""+style+"\"";
}
html += " value=\""+this.json.id+"\"></el-input>";
html += " value=\""+this.json.id+"\">";
if (this.json.vueSlot) html += this.json.vueSlot;
html += "</el-autocomplete>";
return html;
},
_createVueExtend: function(callback){
var _self = this;
return {
data: this._createVueData(),
mounted: function(){
_self._afterMounted(this.$el, callback);
},
methods: {
$fetchSuggestions: function(qs, cb){
if (this.json.itemType!=='script'){
if (this.json.itemValues){
cb(this.json.itemValues.map(function(v){
return {"value": v};
}));
return;
}
}
cb([]);
}.bind(this)
}
};
},
_createCopyNode: function(){
this.copyNode = new Element("div", {
"styles": this.css.moduleNodeShow
......
{
"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 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"
}
}
<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!=='script')?'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!=='script')?'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_placement}}:</td>
<td class="editTableValue">
<div style="width: 140px; float: left"><input type="radio" name="placement" value="top" text{($.placement=='top')?'checked':''}/>top</div>
<div style="width: 140px; float: left"><input type="radio" name="placement" value="top-start" text{($.placement=='top-start')?'checked':''}/>top-start</div>
<div style="width: 140px; float: left"><input type="radio" name="placement" value="top-end" text{($.placement=='top-end')?'checked':''}/>top-end</div>
<div style="width: 140px; float: left"><input type="radio" name="placement" value="bottom" text{($.placement=='bottom')?'checked':''}/>bottom</div>
<div style="width: 140px; float: left"><input type="radio" name="placement" value="bottom-start" text{(!$.placement || $.placement=='bottom-start')?'checked':''}/>bottom-start</div>
<div style="width: 140px; float: left"><input type="radio" name="placement" value="bottom-end" text{($.placement=='bottom-end')?'checked':''}/>bottom-end</div>
<!-- <div style="width: 140px; float: left"><input type="radio" name="inputType" value="search" text{($.inputType=='search')?'checked':''}/>{{$.lp.search}}(search)</div>-->
<!-- <div style="width: 140px; float: left"><input type="radio" name="inputType" value="color" text{($.inputType=='color')?'checked':''}/>{{$.lp.color}}(color)</div>-->
<!-- <div style="width: 140px; float: left"><input type="radio" name="inputType" value="email" text{($.inputType=='email')?'checked':''}/>{{$.lp.email}}(email)</div>-->
<!-- <div style="width: 140px; float: left"><input type="radio" name="inputType" value="date" text{($.inputType=='date')?'checked':''}/>{{$.lp.date}}(date)</div>-->
<!-- <div style="width: 140px; float: left"><input type="radio" name="inputType" value="month" text{($.inputType=='month')?'checked':''}/>{{$.lp.month}}(month)</div>-->
<!-- <div style="width: 140px; float: left"><input type="radio" name="inputType" value="time" text{($.inputType=='time')?'checked':''}/>{{$.lp.time}}(time)</div>-->
<!-- <div style="width: 140px; float: left"><input type="radio" name="inputType" value="datetime-local" text{($.inputType=='datetime-local')?'checked':''}/>{{$.lp["datetime-local"]}}(datetime-local)</div>-->
<!-- <div style="width: 140px; float: left"><input type="radio" name="inputType" value="week" text{($.inputType=='week')?'checked':''}/>{{$.lp.week}}(week)</div>-->
</td>
</tr>
<tr>
<td class="editTableTitle">{{$.lp.popperClass}}:</td>
<td class="editTableValue"><input type="text" name="popperClass" value="text{$.popperClass}" class="editTableInput"/></td>
</tr>
<tr>
<td class="editTableValue" colspan="2"><b>{{$.lp.triggerOnFocus}}:</b>
<input type="radio" name="triggerOnFocus" value="true" text{($.showWordLimit!==false)?'checked':''}/>{{$.lp.yes}}
<input type="radio" name="triggerOnFocus" value="false" text{($.showWordLimit===false)?'checked':''}/>{{$.lp.no}}
</td>
</tr>
</table>
<div onclick="var node = this.getNext(); node.setStyle('display', ((node.getStyle('display')!='none') ? 'none': 'block'))" style="cursor: pointer; height:24px; text-align: center; line-height: 24px; background-color: #EEE; border-top: 1px solid #999;font-weight:bold;">{{$.lp.prefixIcon}}</div>
<div style="display: text{($.prefixIcon)?'block':'none'}" class="MWFElIcon" name="prefixIcon"></div>
<div onclick="var node = this.getNext(); node.setStyle('display', ((node.getStyle('display')!='none') ? 'none': 'block'))" style="cursor: pointer; height:24px; text-align: center; line-height: 24px; background-color: #EEE; border-top: 1px solid #999;font-weight:bold;">{{$.lp.suffixIcon}}</div>
<div style="display: text{($.suffixIcon)?'block':'none'}" class="MWFElIcon" name="suffixIcon"></div>
<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="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>
{
"id": "",
"name": "",
"type": "Elautocomplete",
"description": "",
"events": {
"queryLoad": {
"code": "",
"html": ""
},
"postLoad": {
"code": "",
"html": ""
},
"load": {
"code": "",
"html": ""
},
"select": {
"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": ""
}
},
"properties": {},
"class": "",
"styles": {},
"container": ""
}
......@@ -14,7 +14,6 @@ MWF.xApplication.process.FormDesigner.Module.Elinput = MWF.FCElinput = new Class
this.moduleName = "elinput";
},
_createElementHtml: function(){
debugger;
//var html = "<el-input placeholder=\"请输入内容\"></el-input>";
var html = "<el-input";
if (this.json.description) html += " placeholder=\""+this.json.description+"\"";
......@@ -50,7 +49,9 @@ MWF.xApplication.process.FormDesigner.Module.Elinput = MWF.FCElinput = new Class
html += " style=\""+style+"\"";
}
html += " value=\""+this.json.id+"\"></el-input>";
html += " value=\""+this.json.id+"\">";
if (this.json.vueSlot) html += this.json.vueSlot;
html += "</el-input>";
return html;
},
_createCopyNode: function(){
......
......@@ -131,7 +131,17 @@
</div>
<div title="Vue" class="MWFTab">
<div 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 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>
......
......@@ -1001,7 +1001,35 @@ MWF.xApplication.process.FormDesigner.LP = {
"ckeditConfigInfor4": "For more configuration, please check the official website of Ckeditor",
"ckeditConfigInfor5": "https://ckeditor.com/ckeditor-4/",
"ckeditConfigInfor6": "Note: After the editor properties are customized, the text format may no longer meet the national party and government agency official document format standards"
"ckeditConfigInfor6": "Note: After the editor properties are customized, the text format may no longer meet the national party and government agency official document format standards",
"password": "password",
"search": "search",
"email": "email",
"datetime-local":"datetime-local",
"month": "month",
"date": "date",
"time": "time",
"week": "week",
"textarea": "textarea",
"wordNumber": "wordNumber",
"maxlength": "maxlength",
"clearable": "clearable",
"showPassword": "showPassword",
"prefixIcon": "prefixIcon",
"suffixIcon": "suffixIcon",
"textareaRows": "Textarea Rows",
"autosize": "autosize",
"minRows": "minRows",
"maxRows": "maxRows",
"resize": "resize",
"resizeNone": "none",
"resizeBoth": "both",
"resizeHorizontal": "horizontal",
"resizeVertical": "vertical",
"el_placement": "placement",
"popperClass": "Popper Class",
"triggerOnFocus": "trigger on focus"
},
"actionBar": {
"close":"Close",
......
......@@ -1032,7 +1032,11 @@ MWF.xApplication.process.FormDesigner.LP = {
"resizeNone": "不允许",
"resizeBoth": "允许",
"resizeHorizontal": "横向",
"resizeVertical": "纵向"
"resizeVertical": "纵向",
"el_placement": "弹出位置",
"popperClass": "列表类名",
"triggerOnFocus": "激活即列出输入建议"
},
"actionBar": {
"close":"关闭",
......
......@@ -22,9 +22,10 @@ Object.assign(o2.APP$Elinput.prototype, {
if (this.readonly || this.json.isReadonly) this.node.set("text", value);
if (old!==data) this.fireEvent("change");
this.moduleValueAG = null;
this.validationMode();
},
getInputData: function(){
return this.json[this.json.id] || this._getBusinessData();
return this.json[this.json.id];
},
_loadNodeEdit: function(){
this.node.appendHTML(this._createElementHtml(), "before");
......
......@@ -80,7 +80,8 @@ o2.xApplication.process.Xform.$ElModule = MWF.APP$ElModule = new Class(
* @see https://vuejs.org/
* @member {VueInstance}
*/
this.vm = new Vue(this.vueApp).$mount(this.node);
this.vm = new Vue(this.vueApp);
this.vm.$mount(this.node);
},
_createVueExtend: function(){
......@@ -91,10 +92,20 @@ o2.xApplication.process.Xform.$ElModule = MWF.APP$ElModule = new Class(
_self._afterMounted(this.$el);
}
};
app.methods = this._createVueMethods(app);
this.appendVueExtend(app);
return app;
},
appendVueMethods: function(app){},
appendVueExtend: function(app){},
_createVueMethods: function(){
var methods = {};
if (this.json.vueMethods && this.json.vueMethods.code){
methods = this.form.Macro.exec(this.json.vueMethods.code, this);
}
this.appendVueMethods();
return methods || {};
},
_createVueData: function(){
if (this.json.vueData && this.json.vueData.code){
var d = this.form.Macro.exec(this.json.vueData.code, this);
......
o2.xDesktop.requireApp("process.Xform", "$Elinput", null, false);
/** @class Elautocomplete 基于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.Elautocomplete = MWF.APPElautocomplete = new Class(
/** @lends o2.xApplication.process.Xform.Elautocomplete# */
{
Implements: [Events],
Extends: MWF.APP$Elinput,
options: {
"moduleEvents": ["load", "queryLoad", "postLoad"],
"elEvents": ["select", "change"]
},
/**
* @summary 组件的配置信息,同时也是Vue组件的data。
* @member MWF.xApplication.process.Xform.Elinput#json {JsonObject}
* @example
* //可以在脚本中获取此对象,下面两行代码是等价的,它们获取的是同一个对象
* var json = this.form.get("elinput").json; //获取组件的json对象
* var json = this.form.get("elinput").vm.$data; //获取Vue组件的data数据,
*
* //通过json对象操作Element组件
* json.size = "mini"; //改变输入框大小
* json.disabled = true; //设置输入框为禁用
*/
_appendVueData: function(){
if (!this.json[this.json.id]){
this.json[this.json.id] = this._getBusinessData();
}
if (!this.json.placement) this.json.placement = "bottom-start";
if (!this.json.popperClass) this.json.popperClass = "";
if (!this.json.triggerOnFocus && this.json.triggerOnFocus!==false) this.json.triggerOnFocus = true;
if (!this.json.prefixIcon) this.json.prefixIcon = "";
if (!this.json.suffixIcon) this.json.suffixIcon = "";
if (!this.json.description) this.json.description = "";
},
appendVueExtend: function(app){
if (!app.methods) app.methods = {};
app.methods.$loadElEvent = function(ev){
this.validationMode();
if (this.json.events[ev] && this.json.events[ev].code){
this.form.Macro.fire(this.json.events[ev].code, this, event);
}
}.bind(this);
app.methods.$fetchSuggestions = function(qs, cb){
debugger;
if (this.json.itemType!=='script'){
if (this.json.itemValues){
var items = this.json.itemValues.filter(function(v){
return !qs || v.indexOf(qs)!=-1;
}).map(function(v){
return {"value": v};
})
cb(items);
return;
}
cb();
}else{
this.form.Macro.environment.queryString = qs;
var list = this.form.Macro.exec(this.json.itemScript.code, this);
Promise.resolve(list).then(function(items){
cb(items);
delete this.form.Macro.environment.queryString;
}).catch(function(){
cb();
delete this.form.Macro.environment.queryString;
});
}
}.bind(this);
},
_createElementHtml: function(){
var html = "<el-autocomplete";
html += " v-model=\""+this.json.id+"\"";
html += " :placement=\"placement\"";
html += " :popper-class=\"popperClass\"";
html += " :trigger-on-focus=\"triggerOnFocus\"";
html += " :prefix-icon=\"prefixIcon\"";
html += " :suffix-icon=\"suffixIcon\"";
html += " :placeholder=\"description\"";
html += " :fetch-suggestions=\"$fetchSuggestions\"";
html += " :hide-loading=\"false\"";
html += " :popper-append-to-body=\"false\"";
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){
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 += ">";
if (this.json.vueSlot) html += this.json.vueSlot;
html += "</el-autocomplete>";
return html;
}
});
......@@ -11,7 +11,7 @@ o2.xDesktop.requireApp("process.Xform", "$Elinput", null, false);
* @o2range {Process|CMS|Portal}
* @hideconstructor
*/
v = MWF.APPElinput = new Class(
MWF.xApplication.process.Xform.Elinput = MWF.APPElinput = new Class(
/** @lends o2.xApplication.process.Xform.Elinput# */
{
Implements: [Events],
......@@ -62,13 +62,20 @@ v = MWF.APPElinput = new Class(
if (!this.json.autosize) this.json.autosize = false;
if (!this.json.readonly) this.json.readonly = false;
if (!this.json.resize) this.json.resize = "none";
if (!this.json.description) this.json.description = "";
},
appendVueExtend: function(app){
if (!app.methods) app.methods = {};
app.methods.$loadElEvent = function(ev){
alert(ev);
//return this.form.Macro.fire(e.code, this, event);
}.bind(this)
this.validationMode();
// if (ev=="change"){
// debugger;
// this._setBusinessData(this.getInputData("change"));
// }
if (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 = "<el-input";
......@@ -89,8 +96,9 @@ v = MWF.APPElinput = new Class(
html += " :type=\"inputType\"";
html += " :placeholder=\"description\"";
Object.keys(this.options.elEvents).forEach(function(k){
html += " @"+k+"=\"$loadElEvent("+k+")\"";
debugger;
this.options.elEvents.forEach(function(k){
html += " @"+k+"=\"$loadElEvent('"+k+"')\"";
});
if (this.json.elProperties){
......@@ -107,7 +115,11 @@ v = MWF.APPElinput = new Class(
html += " style=\""+style+"\"";
}
html += ">"+((this.json.circle!=="yes" && this.json.isText!=="no") ? (this.json.name || this.json.id) : "")+"</el-input>";
html += ">";
if (this.json.vueSlot) html += this.json.vueSlot;
html += "</el-input>";
return html;
}
});
bind = {};
var library = {
'version': '4.0',
'version': '6.2',
"defineProperties": Object.defineProperties || function (obj, properties) {
function convertToDescriptor(desc) {
function hasProperty(obj, prop) {
......@@ -151,23 +151,22 @@ var wrapWorkContext = {
//applications
var includedScripts = [];
var _self = this;
var include = function(name, callback){
if (includedScripts.indexOf(name)==-1){
var json = JSON.parse(_self.workContext.getScript(name, includedScripts));
includedScripts = includedScripts.concat(json.importedList);
if (json.text){
//MWF.Macro.exec(json.data.text, bind);
var f = eval("(function(){return function(){\n"+json.text+"\n}})();");
returnValue = f.apply(bind);
if (callback) callback.apply(bind);
}
}
};
var define = function(name, fun, overwrite){
// var includedScripts = [];
// var _self = this;
// var include = function(name, callback){
// if (includedScripts.indexOf(name)==-1){
// var json = JSON.parse(_self.workContext.getScript(name, includedScripts));
// includedScripts = includedScripts.concat(json.importedList);
// if (json.text){
// //MWF.Macro.exec(json.data.text, bind);
// var f = eval("(function(){return function(){\n"+json.text+"\n}})();");
// returnValue = f.apply(bind);
//
// if (callback) callback.apply(bind);
// }
// }
// };
var _define = function(name, fun, overwrite){
var over = true;
if (overwrite===false) over = false;
var o = {};
......@@ -175,29 +174,30 @@ var define = function(name, fun, overwrite){
library.defineProperties(bind, o);
};
var Dict = function(name){
var dictionary = _self.dictionary;
this.name = name;
this.get = function(path){
return JSON.parse(dictionary.select(this.name, path));
};
this.set = function(path, value){
try {
dictionary.update(this.name, library.JSONEncode(value), path);
return true;
}catch(e){
return false;
}
};
this.add = function(path, value){
try {
dictionary.insert(this.name, library.JSONEncode(value), path);
return true;
}catch(e){
return false;
}
};
};
// var Dict = function(name){
// var dictionary = _self.dictionary;
// this.name = name;
// this.get = function(path){
// return JSON.parse(dictionary.select(this.name, path));
// };
// this.set = function(path, value){
// try {
// dictionary.update(this.name, library.JSONEncode(value), path);
// return true;
// }catch(e){
// return false;
// }
// };
// this.add = function(path, value){
// try {
// dictionary.insert(this.name, library.JSONEncode(value), path);
// return true;
// }catch(e){
// return false;
// }
// };
// };
if ((typeof JSON) == 'undefined'){
JSON = {};
}
......@@ -814,6 +814,200 @@ var _Actions = {
};
bind.Actions = _Actions;
//定义所需的服务
var _processActions = new _Action("x_processplatform_assemble_surface", {
"getDictionary": {"uri": "/jaxrs/applicationdict/{applicationDict}/application/{applicationFlag}"},
"getDictRoot": {"uri": "/jaxrs/applicationdict/{applicationDict}/application/{application}/data"},
"getDictData": {"uri": "/jaxrs/applicationdict/{applicationDict}/application/{application}/{path}/data"},
"setDictData": {"uri": "/jaxrs/applicationdict/{applicationDict}/application/{application}/{path}/data", "method": "PUT"},
"addDictData": {"uri": "/jaxrs/applicationdict/{applicationDict}/application/{application}/{path}/data", "method": "POST"},
"deleteDictData": {"uri": "/jaxrs/applicationdict/{applicationDict}/application/{application}/{path}/data", "method": "DELETE"},
"getScript": {"uri": "/jaxrs/script/{flag}/application/{applicationFlag}", "method": "POST"},
});
var _cmsActions = new _Action("x_cms_assemble_control", {
"getDictionary": {"uri": "/jaxrs/design/appdict/{appDictId}"},
"getDictRoot": {"uri": "/jaxrs/surface/appdict/{appDictId}/appInfo/{appId}/data"},
"getDictData": {"uri": "/jaxrs/surface/appdict/{appDictId}/appInfo/{appId}/{path}/data"},
"setDictData": {"uri": "/jaxrs/surface/appdict/{appDictId}/appInfo/{appId}/{path}/data", "method": "PUT"},
"addDictData": {"uri": "/jaxrs/surface/appdict/{appDictId}/appInfo/{appId}/{path}/data", "method": "POST"},
"deleteDictData": {"uri": "/jaxrs/surface/appdict/{appDictId}/appInfo/{appId}/{path}/data", "method": "DELETE"},
"getDictRootAnonymous" : {"uri": "/jaxrs/anonymous/surface/appdict/{appDictId}/appInfo/{appId}/data"},
"getDictDataAnonymous" : {"uri": "/jaxrs/anonymous/surface/appdict/{appDictId}/appInfo/{appId}/{path}/data"},
"getScript": {"uri": "/jaxrs/script/{flag}/appInfo/{appInfoFlag}", "method": "POST"},
});
var _portalActions = new _Action("x_portal_assemble_surface", {
"getScript": {"uri": "/jaxrs/script/portal/{portal}/name/{ }","method": "POST"}
});
//include 引用脚本
//optionsOrName : {
// type : "", 默认为process, 可以为 portal process cms
// application : "", 门户/流程/CMS的名称/别名/id, 默认为当前应用
// name : "" // 脚本名称/别名/id
//}
//或者name: "" // 脚本名称/别名/id
var _exec = function(code, _self){
var returnValue;
//try{
if (!_self) _self = this;
try {
var f = eval("(function(){return function(){\n"+code+"\n}})();");
returnValue = f.apply(_self);
}catch(e){
console.log("exec", new Error("exec script error"));
console.log(e);
}
return returnValue;
}
var includedScripts = this.includedScripts || {};
this.includedScripts = includedScripts;
var _include = function( optionsOrName , callback ){
var options = optionsOrName;
if( typeOf( options ) == "string" ){
options = { name : options };
}
var name = options.name;
var type = ( options.type && options.application ) ? options.type : "process";
var application = options.application
if (!name || !type || !application){
console.log("include", new Error("can not find script. missing script name or application"));
return false;
}
if (!includedScripts[application]) includedScripts[application] = [];
if (includedScripts[application].indexOf( name )> -1){
if (callback) callback.apply(this);
return;
}
var scriptAction;
var scriptData;
switch ( type ){
case "portal" :
_portalActions.getScript( application, name, {"importedList":includedScripts[application]}, function(json){
if (json.data){
includedScripts[application] = includedScripts[application].concat(json.data.importedList);
scriptData = json.data;
}
}.bind(this));
break;
case "process" :
_processActions.getScript( name, application, {"importedList":includedScripts[application]}, function(json){
if (json.data){
includedScripts[application] = includedScripts[application].concat(json.data.importedList);
scriptData = json.data;
}
}.bind(this));
break;
case "cms" :
_cmsActions.getScript(name, application, {"importedList":includedScripts[application]}, function(json){
if (json.data){
includedScripts[application] = includedScripts[application].concat(json.data.importedList);
scriptData = json.data;
}
}.bind(this));
break;
}
includedScripts[application].push(name);
if (scriptData && scriptData.text){
bind.exec(scriptData.text, this);
if (callback) callback.apply(this);
}
};
var _createDict = function(application){
//optionsOrName : {
// type : "", //默认为process, 可以为 process cms
// application : "", //流程/CMS的名称/别名/id, 默认为当前应用
// name : "", // 数据字典名称/别名/id
// enableAnonymous : false //允许在未登录的情况下读取CMS的数据字典
//}
//或者name: "" // 数据字典名称/别名/id
return function(optionsOrName){
var options = optionsOrName;
if( typeOf( options ) == "string" ){
options = { name : options };
}
var name = this.name = options.name;
var type = ( options.type && options.application ) ? options.type : "process";
var applicationId = options.application || application;
var enableAnonymous = options.enableAnonymous || false;
//MWF.require("MWF.xScript.Actions.DictActions", null, false);
if( type == "cms" ){
var action = bind.cmsActions;
}else{
var action = bind.processActions;
}
var encodePath = function( path ){
var arr = path.split(/\./g);
var ar = arr.map(function(v){
return encodeURIComponent(v);
});
return ar.join("/");
};
this.get = function(path, success, failure){
var value = null;
if (path){
var p = encodePath( path );
action[(enableAnonymous && type == "cms") ? "getDictDataAnonymous" : "getDictData"](encodeURIComponent(this.name), applicationId, p, function(json){
value = json.data;
if (success) success(json.data);
}, function(xhr, text, error){
if (failure) failure(xhr, text, error);
});
}else{
action[(enableAnonymous && type == "cms") ? "getDictRootAnonymous" : "getDictRoot"](encodeURIComponent(this.name), applicationId, function(json){
value = json.data;
if (success) success(json.data);
}, function(xhr, text, error){
if (failure) failure(xhr, text, error);
}, false);
}
return value;
};
this.set = function(path, value, success, failure){
var p = encodePath( path );
//var p = path.replace(/\./g, "/");
action.setDictData(encodeURIComponent(this.name), applicationId, p, value, function(json){
if (success) success(json.data);
}, function(xhr, text, error){
if (failure) failure(xhr, text, error);
}, false, false);
};
this.add = function(path, value, success, failure){
var p = encodePath( path );
//var p = path.replace(/\./g, "/");
action.addDictData(encodeURIComponent(this.name), applicationId, p, value, function(json){
if (success) success(json.data);
}, function(xhr, text, error){
if (failure) failure(xhr, text, error);
}, false, false);
};
this["delete"] = function(path, success, failure){
var p = encodePath( path );
//var p = path.replace(/\./g, "/");
action.deleteDictData(encodeURIComponent(this.name), applicationId, p, function(json){
if (success) success(json.data);
}, function(xhr, text, error){
if (failure) failure(xhr, text, error);
}, false, false);
};
this.destory = this["delete"];
}
};
bind.exec = _exec;
bind.include = _include;
bind.Dict = _createDict();
try{
oPrint = oPrint;
}catch(e){
......@@ -836,9 +1030,9 @@ bind.service = this.webservicesClient;
bind.org = _org;
bind.Action = _Action;
//bind.organization = this.organization;
bind.include = include;
bind.define = define;
bind.Dict = Dict;
//bind.include = include;
bind.define = _define;
//bind.Dict = Dict;
bind.form = null;
bind.body = {
"set": function(data){
......@@ -928,55 +1122,6 @@ Object.defineProperty(response, "get", {enumerable: true,configurable: true,
});
bind.response = response;
// bind.response = (function(){
// // var _self = this;
// // if (this.jaxrsResponse){
// if (this.jaxrsResponse.get()){
// var value = this.jaxrsResponse.get();
// if (JSON.validate(value)){
// return {
// "status": this.jaxrsResponse.status,
// "value": JSON.decode(value),
// "get": function(){ JSON.decode(value) }
// };
// }else{
// return {
// "status": this.jaxrsResponse.status,
// "value": value,
// "get": function(){ return value; }
// };
// }
// }else{
// return {
// "status": this.jaxrsResponse.status,
// "value": this.jaxrsResponse.value,
// "get": function(){ return _self.jaxrsResponse.value; }
// };
// }
// }else{
// return {
// "get": function(){
// return _self.jaxwsResponse || null;
// // if (_self.jaxwsResponse && _self.jaxwsResponse.get()){
// // if (JSON.validate(_self.jaxwsResponse.get())){
// // return {
// // "status": _self.jaxwsResponse.status,
// // "value": JSON.decode(_self.jaxwsResponse.get())
// // };
// // }else{
// // return {
// // "status": _self.jaxwsResponse.status,
// // "value": _self.jaxwsResponse.value
// // };
// // }
// // }else{
// // return {"status": _self.jaxwsResponse.status};
// // }
// }
// }
// }
// }).apply(this);
bind.assginData = {
"data": null,
"get": function(){
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册