Combox.js 8.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267
  1. MWF.xDesktop.requireApp("process.Xform", "$Input", null, false);
  2. /** @class Combox 组合框组件。
  3. * @example
  4. * //可以在脚本中获取该组件
  5. * //方法1:
  6. * var field = this.form.get("fieldName"); //获取组件对象
  7. * //方法2
  8. * var field = this.target; //在组件本身的脚本中获取,比如事件脚本、默认值脚本、校验脚本等等
  9. * @extends MWF.xApplication.process.Xform.$Input
  10. * @category FormComponents
  11. * @hideconstructor
  12. */
  13. MWF.xApplication.process.Xform.Combox = MWF.APPCombox = new Class(
  14. /** @lends MWF.xApplication.process.Xform.Combox# */
  15. {
  16. Implements: [Events],
  17. Extends: MWF.APP$Input,
  18. iconStyle: "selectIcon",
  19. options: {
  20. /**
  21. * 手工输入完成后触发。
  22. * @event MWF.xApplication.process.Xform.Combox#commitInput
  23. * @see {@link https://www.yuque.com/o2oa/ixsnyt/hm5uft#i0zTS|组件事件说明}
  24. */
  25. /**
  26. * 值改变时触发。
  27. * @event MWF.xApplication.process.Xform.Combox#change
  28. * @see {@link https://www.yuque.com/o2oa/ixsnyt/hm5uft#i0zTS|组件事件说明}
  29. */
  30. "moduleEvents": ["load", "queryLoad", "postLoad", "commitInput", "change"]
  31. },
  32. initialize: function(node, json, form, options){
  33. this.node = $(node);
  34. this.node.store("module", this);
  35. this.json = json;
  36. this.form = form;
  37. this.field = true;
  38. },
  39. _loadNode: function(){
  40. if (this.readonly){
  41. this._loadNodeRead();
  42. }else{
  43. this._loadNodeEdit();
  44. }
  45. },
  46. _loadNodeRead: function(){
  47. this.node.empty();
  48. this.node.set({
  49. "nodeId": this.json.id,
  50. "MWFType": this.json.type
  51. });
  52. //new Element("select").inject(this.node);
  53. },
  54. _loadNodeEdit: function(){
  55. this.node.empty();
  56. MWF.require("MWF.widget.Combox", function(){
  57. this.combox = select = new MWF.widget.Combox({
  58. "onlySelect": this.json.onlySelect==="y",
  59. "count": this.json.count.toInt() || 0,
  60. "splitStr": this.json.splitStr || ",\\s*|;\\s*|,\\s*|;\\s*",
  61. "splitShow": this.json.splitShow || ", ",
  62. "list": this.getOptions(),
  63. "onCommitInput": function(item){
  64. this.fireEvent("commitInput");
  65. }.bind(this),
  66. "onChange": function(){
  67. this.fireEvent("change");
  68. }.bind(this),
  69. "optionsMethod": this._searchOptions()
  70. });
  71. }.bind(this), false);
  72. // var select = new Element("select");
  73. // select.set(this.json.properties);
  74. select.inject(this.node);
  75. //this.node.destroy();
  76. // this.areaNode = this.node;
  77. // this.node = select;
  78. this.node.set({
  79. "id": this.json.id,
  80. "MWFType": this.json.type
  81. });
  82. this.combox.addEvent("change", function(){
  83. this.validationMode();
  84. if (this.validation()) this._setBusinessData(this.getInputData("change"));
  85. }.bind(this));
  86. },
  87. _searchOptions: function(){
  88. if (this.json.itemType === "dynamic"){
  89. return function(value, callback){
  90. var event = {
  91. "value": value,
  92. "callback": callback
  93. };
  94. this.form.Macro.fire(((this.json.itemDynamic) ? this.json.itemDynamic.code : ""), this, event);
  95. }.bind(this);
  96. }else{
  97. return null;
  98. }
  99. },
  100. /**
  101. * @summary 获取选择项数组.
  102. * @example
  103. * var array = this.form.get('fieldName').getOptions();
  104. * @return {Array} 选择项数组,如果配置为脚本返回计算结果.
  105. */
  106. getOptions: function(){
  107. var list = [];
  108. if (this.json.itemType === "values"){
  109. list = this.json.itemValues;
  110. }else if (this.json.itemType === "script"){
  111. list = this.form.Macro.exec(((this.json.itemScript) ? this.json.itemScript.code : ""), this);
  112. }
  113. if (list.length){
  114. var options = [];
  115. list.each(function(v){
  116. if (typeOf(v)==="object"){
  117. options.push(v);
  118. }else{
  119. v = v.toString();
  120. arr = v.split("|");
  121. var o = { "text": "", "keyword": "", "value": "" };
  122. switch (arr.length){
  123. case 0: break;
  124. case 1:
  125. o.text = arr[0];
  126. o.keyword = arr[0];
  127. o.value = arr[0];
  128. break;
  129. case 2:
  130. o.text = arr[0];
  131. o.keyword = arr[0];
  132. o.value = arr[1];
  133. break;
  134. case 3:
  135. o.text = arr[0];
  136. o.keyword = arr[1];
  137. o.value = arr[2];
  138. break;
  139. default:
  140. o.text = arr[0];
  141. o.keyword = arr[1];
  142. o.value = arr[2];
  143. }
  144. options.push(o);
  145. }
  146. }.bind(this));
  147. return options;
  148. }
  149. return [];
  150. },
  151. /**
  152. * 当表单上没有对应组件的时候,可以使用this.data[fieldName] = data赋值。
  153. * @summary 为组件赋值。
  154. * @param value{String} .
  155. * @example
  156. * this.form.get("fieldName").setData("test"); //赋文本值
  157. * @example
  158. * //如果无法确定表单上是否有组件,需要判断
  159. * if( this.form.get('fieldName') ){ //判断表单是否有无对应组件
  160. * this.form.get('fieldName').setData( data );
  161. * }else{
  162. * this.data['fieldName'] = data;
  163. * }
  164. */
  165. setData: function(value){
  166. this._setBusinessData(value);
  167. this._setValue(value);
  168. },
  169. _setValue: function(value){
  170. if (!value) value = [];
  171. if (value.length==1 && (!value[0])) value = [];
  172. if (typeOf(value) !=="array") value = [value];
  173. if (this.combox){
  174. this.combox.clear();
  175. comboxValues = [];
  176. value.each(function(v){
  177. if (typeOf(v)==="object"){
  178. comboxValues.push({
  179. "text": v.text || v.title || v.subject || v.name,
  180. "value": v
  181. });
  182. }else{
  183. comboxValues.push(v.toString());
  184. }
  185. }.bind(this));
  186. this.combox.addNewValues(comboxValues);
  187. }else{
  188. value.each(function(v, i){
  189. var text = "";
  190. if (typeOf(v)==="object"){
  191. text = v.text || v.title || v.subject || v.name;
  192. }else{
  193. text = v.toString();
  194. }
  195. if (i<value.length-1) text += this.json.splitShow;
  196. new Element("div", {"styles": {
  197. "float": "left",
  198. "margin-right": "5px"
  199. },"text": text}).inject(this.node.getFirst() || this.node);
  200. }.bind(this));
  201. }
  202. },
  203. /**
  204. * @summary 重新计算下拉选项,该功能通常用在下拉选项为动态计算的情况.
  205. * @example
  206. * this.form.get('fieldName').resetOption();
  207. */
  208. resetOption: function(){
  209. if (this.combox){
  210. var list = this.getOptions();
  211. this.combox.setOptions({"list": list});
  212. }
  213. },
  214. /**
  215. * @summary 添加下拉选项.
  216. * @param text {String} 下拉选项文本
  217. * @param value {String} 下拉选项值
  218. * @example
  219. * this.form.get('fieldName').addOption("秘密","level1");
  220. */
  221. addOption: function(text, value){
  222. if (this.combox){
  223. var list = this.getOptions();
  224. list.push({
  225. "text": text,
  226. "value": value
  227. });
  228. this.combox.setOptions({"list": list});
  229. }
  230. },
  231. isEmpty : function(){
  232. var data = this.getData();
  233. if( typeOf(data) === "array" ){
  234. return data.length === 0;
  235. }else{
  236. return !data;
  237. }
  238. },
  239. getInputData: function(){
  240. if (this.combox) return this.combox.getData();
  241. return this._getBusinessData();
  242. },
  243. /**
  244. * @summary 获取选中的值和文本.
  245. * @example
  246. * var array = this.form.get('fieldName').getTextData();
  247. * @return {Object} 返回选中项值和文本,格式为 { 'value' : value, 'text' : text }.
  248. */
  249. getTextData: function(){
  250. var v = this.getData();
  251. return {"value": v, "text": v};
  252. //return this.node.get("text");
  253. },
  254. resetData: function(){
  255. this.setData(this.getValue());
  256. }
  257. });