增加VUE-Element组件 Elcascader

o2web/source/x_component_process_FormDesigner/Module/Elcascader/elcascader.html

@@ -69,7 +69,15 @@
 				</td>
 			</tr>
 		</table>
-		<div style="display: text{($.filterable===true) ? 'block' : 'none'}" class="MWFFormulaArea" name="filterMethod" title="{{$.lp.filterMethod}} (S)"></div>
+		<div style="display: text{($.filterable===true) ? 'block' : 'none'}">
+			<div class="MWFFormulaArea" name="filterMethod" title="{{$.lp.filterMethod}} (S)"></div>
+			<div style="padding: 5px; border-bottom: 1px solid #666666">{{$.lp.filterMethodInfo}}</div>
+			<div class="MWFFormulaArea" name="beforeFilter" title="{{$.lp.beforeFilter}} (S)"></div>
+			<div style="padding: 5px; border-bottom: 1px solid #666666">{{$.lp.beforeFilterInfo}}</div>
+		</div>
+
+
+
 
 		<table width="100%" border="0" cellpadding="5" cellspacing="0" class="editTable">
 			<tr>
@@ -118,13 +126,15 @@
 			<tr>
 				<td class="editTableTitle">{{$.lp.lazy}}:</td>
 				<td class="editTableValue">
-					<input type="radio" name="props.lazy" value="true" text{($.props.lazy===true)?'checked':''}/>{{$.lp.yes}}
-					<input type="radio" name="props.lazy" value="false" text{($.props.lazy!==true)?'checked':''}/>{{$.lp.no}}
+					<input type="radio" onclick="if (this.checked){ this.getParent('table').getNext().show();}" name="props.lazy" value="true" text{($.props.lazy===true)?'checked':''}/>{{$.lp.yes}}
+					<input type="radio" onclick="if (this.checked){ this.getParent('table').getNext().hide();}" name="props.lazy" value="false" text{($.props.lazy!==true)?'checked':''}/>{{$.lp.no}}
 				</td>
 			</tr>
 		</table>
-		<div style="display: text{($.props.lazy===true) ? 'block' : 'none'}" class="MWFFormulaArea" name="lazyLoadScript" title="{{$.lp.lazyLoadScript}} (S)"></div>
-
+		<div style="display: text{($.props.lazy===true) ? 'block' : 'none'}">
+			<div class="MWFFormulaArea" name="lazyLoadScript" title="{{$.lp.lazyLoadScript}} (S)"></div>
+			<div style="padding: 5px; border-bottom: 1px solid #666666">{{$.lp.lazyLoadScriptInfo}}</div>
+		</div>
 
 		<table width="100%" border="0" cellpadding="5" cellspacing="0" class="editTable">
 			<tr>
@@ -159,8 +169,8 @@
 			</tr>
 		</table>
 
-		<div class="MWFMaplist" name="elStyles" title="Select {{$.lp.style}}"></div>
-		<div class="MWFMaplist" name="elProperties"  title="Select {{$.lp.attribute}}"></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">-->
@@ -193,10 +203,10 @@
 			<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 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/Elcascader/template.json

@@ -16,6 +16,8 @@
 
 	"itemsScript": {},
 	"filterMethod": {},
+	"lazyLoadScript": {},
+	"beforeFilter": {},
 
 	"props": {
 		"expandTrigger": "click",
@@ -25,7 +27,7 @@
 		"lazy": false,
 		"lazyLoad": null,
 		"value": "value",
-		"label": "label\"",
+		"label": "label",
 		"children": "children",
 		"disabled": "disabled",
 		"leaf": "leaf"
@@ -60,6 +62,14 @@
 			"code": "",
 			"html": ""
 		},
+		"expand-change":{
+			"code": "",
+			"html": ""
+		},
+		"before-filter": {
+			"code": "",
+			"html": ""
+		},
 		"change": {
 			"code": "",
 			"html": ""

o2web/source/x_component_process_FormDesigner/lp/en.js

@@ -1105,6 +1105,10 @@ MWF.xApplication.process.FormDesigner.LP = {
         "props_disabled": "Disabled Key",
         "props_leaf": "Leaf key",
         "expandTrigger": "Expand Trigger",
+        "beforeFilter": "Before Filter",
+        "filterMethodInfo": "Return a Function. Custom search logic, the first parameter is the node node, the second parameter is the search keyword keyword, by returning a boolean value to indicate whether it is hit or not",
+        "beforeFilterInfo": "Return a Function. Filter the hook before, the parameter is the input value, if it returns false or returns a Promise and is rejected, then stop filtering",
+        "lazyLoadScriptInfo": "The method of loading dynamic data is only valid when lazy is true; it returns a function (node, resolve), where node is the currently clicked node, and resolve is the callback for the completion of data loading (must be called)",
 
         "showOptions": "Show Options",
         "onInput": "When inputting",

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

@@ -1112,6 +1112,10 @@ MWF.xApplication.process.FormDesigner.LP = {
         "props_disabled": "选项禁用属性",
         "props_leaf": "叶子节点标志属性",
         "expandTrigger": "展开方式",
+        "beforeFilter": "筛选之前",
+        "filterMethodInfo": "返回一个Function。自定义搜索逻辑，第一个参数是节点node，第二个参数是搜索关键词keyword，通过返回布尔值表示是否命中",
+        "beforeFilterInfo": "返回一个Function。筛选之前的钩子，参数为输入的值，若返回 false 或者返回 Promise 且被 reject，则停止筛选",
+        "lazyLoadScriptInfo": "加载动态数据的方法，仅在 lazy 为 true 时有效; 返回一个function(node, resolve)，node为当前点击的节点，resolve为数据加载完成的回调(必须调用)",
 
         "showOptions": "显示选项",
         "onInput": "输入时",

o2web/source/x_component_process_Xform/Elcascader.js

+o2.xDesktop.requireApp("process.Xform", "$Elinput", null, false);
+/** @class Elcascader 基于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.Elcascader = MWF.APPElcascader =  new Class(
+    /** @lends o2.xApplication.process.Xform.Elcascader# */
+    {
+    Implements: [Events],
+    Extends: MWF.APP$Elinput,
+    options: {
+        "moduleEvents": ["load", "queryLoad", "postLoad"],
+        "elEvents": ["focus", "blur", "change", "visible-change", "remove-tag", "expand-change", "before-filter"]
+    },
+    _appendVueData: function(){
+        this.form.Macro.environment.data.check(this.json.id);
+        this.json[this.json.id] = this._getBusinessData();
+
+        if (!this.json.options) this.json.options = [];
+        if (!this.json.clearable) this.json.clearable = false;
+        if (!this.json.size) this.json.size = "";
+        if (!this.json.popperClass) this.json.popperClass = "";
+        if (this.json.showAllLevels!==false) this.json.showAllLevels = true;
+        if (!this.json.separator) this.json.separator = "/";
+        if (!this.json.disabled) this.json.disabled = false;
+        if (!this.json.description) this.json.description = "";
+        if (!this.json.filterable) this.json.filterable = false;
+        if (!this.json.collapseTags) this.json.collapseTags = false;
+        if (!this.json.props) this.json.props = {};
+
+        if (!this.json.props.expandTrigger) this.json.props.expandTrigger = "click";
+        if (!this.json.props.multiple) this.json.props.multiple = false;
+        if (this.json.props.emitPath!==false) this.json.props.emitPath = true;
+        if (!this.json.props.lazy) this.json.props.lazy = false;
+        if (!this.json.props.lazyLoad) this.json.props.lazyLoad = null;
+        if (!this.json.props.value) this.json.props.value = "value";
+        if (!this.json.props.label) this.json.props.label = "label";
+        if (!this.json.props.children) this.json.props.children = "children";
+        if (!this.json.props.disabled) this.json.props.disabled = "disabled";
+        if (!this.json.props.leaf) this.json.props.leaf = "leaf";
+
+        this._loadOptions();
+
+        if (this.json.props.multiple===true) if (!this.json[this.json.id] || !this.json[this.json.id].length) this.json[this.json.id] = [];
+    },
+    appendVueMethods: function(methods){
+        if (this.json.filterMethod && this.json.filterMethod.code){
+            var fn = this.form.Macro.exec(this.json.filterMethod.code, this);
+            methods.$filterMethod = function(){
+                fn.apply(this, arguments);
+            }.bind(this)
+        }
+        if (this.json.lazyLoadScript && this.json.lazyLoadScript.code){
+            var fn = this.form.Macro.exec(this.json.lazyLoadScript.code, this);
+            this.json.props.lazyLoad = function(){
+                fn.apply(this, arguments);
+            }.bind(this)
+        }
+        if (this.json.beforeFilter && this.json.beforeFilter.code){
+            var fn = this.form.Macro.exec(this.json.beforeFilter.code, this);
+            methods.$beforeFilter = 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.itemsScript && this.json.itemsScript.code)  this._setOptionsWithCode(this.json.itemsScript.code);
+    },
+    _createElementHtml: function(){
+
+        if (!this.json.options) this.json.options = [];
+        if (!this.json.clearable) this.json.clearable = false;
+        if (!this.json.size) this.json.size = "";
+        if (!this.json.popperClass) this.json.popperClass = "";
+        if (this.json.showAllLevels!==false) this.json.showAllLevels = true;
+        if (!this.json.separator) this.json.separator = "/";
+        if (!this.json.disabled) this.json.disabled = false;
+        if (!this.json.description) this.json.description = "";
+        if (!this.json.filterable) this.json.filterable = false;
+        if (!this.json.props) this.json.props = {};
+
+        var html = "<el-cascader ";
+        html += " v-model=\""+this.json.id+"\"";
+        html += " :clearable=\"clearable\"";
+        html += " :size=\"size\"";
+        html += " :filterable=\"filterable\"";
+        html += " :disabled=\"disabled\"";
+        html += " :placeholder=\"description\"";
+        html += " :options=\"options\"";
+        html += " :collapse-tags=\"collapseTags\"";
+        html += " :show-all-levels=\"showAllLevels\"";
+        html += " :separator=\"separator\"";
+        html += " :popper-class=\"popperClass\"";
+        html += " :props=\"props\"";
+
+        if (this.json.filterMethod && this.json.filterMethod.code){
+            html += " :filter-method=\"$filterMethod\"";
+        }
+        if (this.json.beforeFilter && this.json.beforeFilter.code){
+            html += " :before-filter=\"$beforeFilter\"";
+        }
+
+        this.options.elEvents.forEach(function(k){
+            html += " @"+k+"=\"$loadElEvent_"+k.camelCase()+"\"";
+        });
+
+        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 += ">";
+
+        if (this.json.vueSlot) html += this.json.vueSlot;
+
+        html += "</el-cascader >";
+        return html;
+    },
+    __setValue: function(value){
+        this.moduleValueAG = null;
+        this._setBusinessData(value);
+        this.json[this.json.id] = value;
+        //if (this.readonly || this.json.isReadonly) this.node.set("text", value);
+        this.fieldModuleLoaded = true;
+        return value;
+    },
+    __setData: function(data){
+        var old = this.getInputData();
+        this._setBusinessData(data);
+        this.json[this.json.id] = data;
+        //if (this.readonly || this.json.isReadonly) this.node.set("text", value);
+        if (old!==data) this.fireEvent("change");
+        this.moduleValueAG = null;
+        this.validationMode();
+    },
+    getCheckedNodes: function(leafOnly){
+        return (this.vm) ? this.vm.getCheckedNodes(leafOnly) : null;
+    }
+}); 

o2web/source/x_component_process_Xform/Elselect.js

 o2.xDesktop.requireApp("process.Xform", "$Elinput", null, false);
-/** @class Elinput 基于Element UI的输入框组件。
+/** @class Elselect 基于Element UI的选择框组件。
  * @example
  * //可以在脚本中获取该组件
  * //方法1：
@@ -12,7 +12,7 @@ o2.xDesktop.requireApp("process.Xform", "$Elinput", null, false);
  * @hideconstructor
  */
 MWF.xApplication.process.Xform.Elselect = MWF.APPElselect =  new Class(
-    /** @lends o2.xApplication.process.Xform.Elinput# */
+    /** @lends o2.xApplication.process.Xform.Elselect# */
     {
     Implements: [Events],
     Extends: MWF.APP$Elinput,

o2web/source/x_desktop/js/sss.js

@@ -783,4 +783,25 @@ bind.expire = {
     "setDate": function(date){
         try{expire.setDate(date);}catch(e){}
     }
-};
\ No newline at end of file
+};
+
+
+var app = this.form.getApp();
+var _form = app.appForm;
+
+_form.readedWork = function(){
+    var read = null;
+    for (var i = 0; i < _form.businessData.readList.length; i++) {
+        if (_form.businessData.readList[i].person === layout.session.user.distinguishedName) {
+            read = _form.businessData.readList[i];
+            break;
+        }
+    }
+    app.action.setReaded(function () {
+        if (layout.mobile) {
+            _form.finishOnMobile();
+        } else {
+            app.reload();
+        }
+    }, null, read.id, read);
+}