Checkbox.js 15 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442
  1. MWF.xDesktop.requireApp("process.Xform", "$Input", null, false);
  2. MWF.require("MWF.widget.UUID", null, false);
  3. /** @class Calendar 多选按钮组件。
  4. * @example
  5. * //可以在脚本中获取该组件
  6. * //方法1:
  7. * var field = this.form.get("fieldName"); //获取组件对象
  8. * //方法2
  9. * var field = this.target; //在组件本身的脚本中获取,比如事件脚本、默认值脚本、校验脚本等等
  10. * @extends MWF.xApplication.process.Xform.$Input
  11. * @category FormComponents
  12. * @hideconstructor
  13. */
  14. MWF.xApplication.process.Xform.Checkbox = MWF.APPCheckbox = new Class(
  15. /** @lends MWF.xApplication.process.Xform.Checkbox# */
  16. {
  17. Implements: [Events],
  18. Extends: MWF.APP$Input,
  19. loadDescription: function(){},
  20. _loadNode: function(){
  21. if (this.readonly || this.json.isReadonly ){
  22. this._loadNodeRead();
  23. }else{
  24. this._loadNodeEdit();
  25. }
  26. },
  27. _loadNodeRead: function(){
  28. this.node.empty();
  29. this.node.set({
  30. "nodeId": this.json.id,
  31. "MWFType": this.json.type
  32. });
  33. var radioValues = this.getOptions();
  34. var value = this.getValue();
  35. if (value){
  36. var texts = [];
  37. radioValues.each(function(item){
  38. var tmps = item.split("|");
  39. var t = tmps[0];
  40. var v = tmps[1] || t;
  41. if (value.indexOf(v)!=-1){
  42. texts.push(t);
  43. }
  44. });
  45. this.node.set("text", texts.join(", "));
  46. }
  47. },
  48. _resetNodeEdit: function(){
  49. var div = new Element("div");
  50. div.set(this.json.properties);
  51. div.inject(this.node, "after");
  52. this.node.destroy();
  53. this.node = div;
  54. },
  55. _loadNodeEdit: function(){
  56. //this.container = new Element("select");
  57. if (!this.json.preprocessing) this._resetNodeEdit();
  58. this.node.set({
  59. "id": this.json.id,
  60. "MWFType": this.json.type,
  61. "styles": {
  62. "display": "inline"
  63. }
  64. });
  65. this.setOptions();
  66. },
  67. _loadDomEvents: function(){
  68. },
  69. _loadEvents: function(){
  70. Object.each(this.json.events, function(e, key){
  71. if (e.code){
  72. if (this.options.moduleEvents.indexOf(key)!=-1){
  73. this.addEvent(key, function(event){
  74. return this.form.Macro.fire(e.code, this, event);
  75. }.bind(this));
  76. }else{
  77. //this.node.addEvent(key, function(event){
  78. // return this.form.Macro.fire(e.code, this, event);
  79. //}.bind(this));
  80. }
  81. }
  82. }.bind(this));
  83. },
  84. addModuleEvent: function(key, fun){
  85. if (this.options.moduleEvents.indexOf(key)!==-1){
  86. this.addEvent(key, function(event){
  87. return (fun) ? fun(this, event) : null;
  88. }.bind(this));
  89. }else{
  90. var inputs = this.node.getElements("input");
  91. inputs.each(function(input){
  92. input.addEvent(key, function(event){
  93. return (fun) ? fun(this, event) : null;
  94. }.bind(this));
  95. }.bind(this));
  96. }
  97. },
  98. /**
  99. * @summary 重新计算下拉选项,该功能通常用在下拉选项为动态计算的情况.
  100. * @example
  101. * this.form.get('fieldName').resetOption();
  102. */
  103. resetOption: function(){
  104. this.node.empty();
  105. this.setOptions();
  106. },
  107. /**
  108. * @summary 获取选择项数组.
  109. * @example
  110. * var array = this.form.get('fieldName').getOptions();
  111. * @return {Array} 选择项数组,如果配置为脚本返回计算结果.
  112. */
  113. getOptions: function(){
  114. if (this.json.itemType == "values"){
  115. return this.json.itemValues;
  116. }else{
  117. return this.form.Macro.exec(((this.json.itemScript) ? this.json.itemScript.code : ""), this);
  118. }
  119. //return [];
  120. },
  121. setOptions: function(){
  122. var optionItems = this.getOptions();
  123. this._setOptions(optionItems);
  124. },
  125. _setOptions: function(optionItems){
  126. var p = o2.promiseAll(optionItems).then(function(radioValues){
  127. this.moduleSelectAG = null;
  128. if (!radioValues) radioValues = [];
  129. if (o2.typeOf(radioValues)==="array"){
  130. var flag = (new MWF.widget.UUID).toString();
  131. radioValues.each(function(item){
  132. var tmps = item.split("|");
  133. var text = tmps[0];
  134. var value = tmps[1] || text;
  135. var radio = new Element("input", {
  136. "type": "checkbox",
  137. "name": ((this.json.properties) ? this.json.properties.name : null) || flag+this.json.id,
  138. "value": value,
  139. "showText": text,
  140. "styles": this.json.buttonStyles
  141. }).inject(this.node);
  142. //radio.appendText(text, "after");
  143. var textNode = new Element( "span", {
  144. "text" : text,
  145. "styles" : { "cursor" : "default" }
  146. }).inject(this.node);
  147. textNode.addEvent("click", function( ev ){
  148. if( this.radio.get("disabled") === true || this.radio.get("disabled") === "true" )return;
  149. this.radio.checked = ! this.radio.checked;
  150. this.radio.fireEvent("change");
  151. this.radio.fireEvent("click");
  152. }.bind( {radio : radio} ) );
  153. radio.addEvent("click", function(){
  154. this.validationMode();
  155. if (this.validation()) this._setBusinessData(this.getInputData("change") || []);
  156. }.bind(this));
  157. Object.each(this.json.events, function(e, key){
  158. if (e.code){
  159. if (this.options.moduleEvents.indexOf(key)!=-1){
  160. }else{
  161. radio.addEvent(key, function(event){
  162. return this.form.Macro.fire(e.code, this, event);
  163. }.bind(this));
  164. }
  165. }
  166. }.bind(this));
  167. }.bind(this));
  168. }
  169. }.bind(this), function(){});
  170. this.moduleSelectAG = p;
  171. if (p) p.then(function(){
  172. this.moduleSelectAG = null;
  173. }.bind(this), function(){
  174. this.moduleSelectAG = null;
  175. }.bind(this));
  176. },
  177. _setValue: function(value, m){
  178. var mothed = m || "__setValue";
  179. if (!!value){
  180. var p = o2.promiseAll(value).then(function(v){
  181. //if (o2.typeOf(v)=="array") v = v[0];
  182. if (this.moduleSelectAG){
  183. this.moduleValueAG = this.moduleSelectAG;
  184. this.moduleSelectAG.then(function(){
  185. this[mothed](v);
  186. return v;
  187. }.bind(this), function(){});
  188. }else{
  189. this[mothed](v)
  190. }
  191. return v;
  192. }.bind(this), function(){});
  193. this.moduleValueAG = p;
  194. if (this.moduleValueAG) this.moduleValueAG.then(function(){
  195. this.moduleValueAG = null;
  196. }.bind(this), function(){
  197. this.moduleValueAG = null;
  198. }.bind(this));
  199. }else{
  200. this[mothed](value);
  201. }
  202. // this.moduleValueAG = o2.AG.all(value).then(function(v){
  203. // if (this.moduleSelectAG){
  204. // this.moduleValueAG = this.moduleSelectAG;
  205. // this.moduleSelectAG.then(function(){
  206. // this.moduleValueAG = null;
  207. // this.__setValue(v);
  208. // }.bind(this));
  209. // }else{
  210. // this.moduleValueAG = null;
  211. // this.__setValue(v);
  212. // }
  213. // return v;
  214. // }.bind(this));
  215. //
  216. // if (this.moduleValueAG) this.moduleValueAG.then(function(){
  217. // this.moduleValueAG = "";
  218. // }.bind(this));
  219. },
  220. __setValue: function(value){
  221. this._setBusinessData(value);
  222. var radios = this.node.getElements("input");
  223. for (var i=0; i<radios.length; i++){
  224. var radio = radios[i];
  225. radio.checked = value.indexOf(radio.value) != -1;
  226. }
  227. },
  228. /**
  229. * @summary 获取选中的值和文本.
  230. * @example
  231. * var array = this.form.get('fieldName').getTextData();
  232. * @return {Object} 返回选中项值和文本,格式为 { 'value' : value, 'text' : text }.
  233. */
  234. getTextData: function(){
  235. var inputs = this.node.getElements("input");
  236. var value = [];
  237. var text = [];
  238. if (inputs.length){
  239. inputs.each(function(input){
  240. if (input.checked){
  241. var v = input.get("value");
  242. var t = input.get("showText");
  243. value.push(v || "");
  244. text.push(t || v || "");
  245. }
  246. });
  247. }
  248. if (!value.length) value = [""];
  249. if (!text.length) text = [""];
  250. return {"value": value, "text": text};
  251. },
  252. //getData: function(){
  253. //var inputs = this.node.getElements("input");
  254. //var value = [];
  255. //if (inputs.length){
  256. // inputs.each(function(input){
  257. // if (input.checked){
  258. // var v = input.get("value");
  259. // if (v) value.push(v || "");
  260. // }
  261. // });
  262. //}
  263. //return (value.length==1) ? value[0] : value;
  264. //},
  265. isEmpty: function(){
  266. var data = this.getData();
  267. if( typeOf(data) !== "array" )return true;
  268. if( data.length === 0 )return true;
  269. return false;
  270. },
  271. getInputData: function(){
  272. if (this.readonly || this.json.isReadonly ){
  273. return this._getBusinessData();
  274. }else{
  275. var inputs = this.node.getElements("input");
  276. var value = [];
  277. if (inputs.length){
  278. inputs.each(function(input){
  279. if (input.checked){
  280. var v = input.get("value");
  281. if (v) value.push(v || "");
  282. }
  283. });
  284. }
  285. return (value.length) ? value : [];
  286. }
  287. },
  288. resetData: function(){
  289. this.setData(this.getValue());
  290. },
  291. /**当参数为Promise的时候,请查看文档: {@link https://www.yuque.com/o2oa/ixsnyt/ws07m0|使用Promise处理表单异步}
  292. * @summary 为字段赋值,并且使值对应的选项选中。
  293. * @param data{String|Promise} .
  294. * @example
  295. * this.form.get("fieldName").setData("test"); //赋文本值
  296. * @example
  297. * //使用Promise
  298. * var field = this.form.get("fieldName");
  299. * var dict = new this.Dict("test"); //test为数据字典名称
  300. * var promise = dict.get("tools", true); //异步使用数据字典的get方法时返回Promise,参数true表示异步
  301. * field.setData( promise );
  302. */
  303. setData: function(data){
  304. return this._setValue(data, "__setData");
  305. // if (data && data.isAG){
  306. // this.moduleValueAG = data;
  307. // data.addResolve(function(v){
  308. // this.setData(v);
  309. // }.bind(this));
  310. // }else{
  311. // this.__setData(data);
  312. // this.moduleValueAG = null;
  313. // }
  314. },
  315. __setData: function(data){
  316. this._setBusinessData(data);
  317. var inputs = this.node.getElements("input");
  318. if (inputs.length){
  319. inputs.each(function(input){
  320. if (typeOf(data)=="array"){
  321. if (data.indexOf(input.get("value"))!=-1){
  322. input.set("checked", true);
  323. }else{
  324. input.set("checked", false);
  325. }
  326. }else{
  327. if (data == input.get("value")){
  328. input.set("checked", true);
  329. }else{
  330. input.set("checked", false);
  331. }
  332. }
  333. });
  334. this.validationMode();
  335. }
  336. this.fireEvent("setData");
  337. },
  338. notValidationMode: function(text){
  339. if (!this.isNotValidationMode){
  340. this.isNotValidationMode = true;
  341. this.node.store("background", this.node.getStyles("background"));
  342. this.node.setStyle("background", "#ffdcdc");
  343. this.errNode = this.createErrorNode(text);
  344. if (this.iconNode){
  345. this.errNode.inject(this.iconNode, "after");
  346. }else{
  347. this.errNode.inject(this.node, "after");
  348. }
  349. this.showNotValidationMode(this.node);
  350. if (!this.node.isIntoView()) this.node.scrollIntoView();
  351. }
  352. },
  353. validationMode: function(){
  354. if (this.isNotValidationMode){
  355. this.isNotValidationMode = false;
  356. this.node.setStyles(this.node.retrieve("background"));
  357. if (this.errNode){
  358. this.errNode.destroy();
  359. this.errNode = null;
  360. }
  361. }
  362. },
  363. validationConfigItem: function(routeName, data){
  364. var flag = (data.status==="all") ? true: (routeName === data.decision);
  365. if (flag){
  366. var n = this.getInputData();
  367. if( typeOf(n)==="array" && n.length === 0 )n = "";
  368. var v = (data.valueType==="value") ? n : n.length;
  369. switch (data.operateor){
  370. case "isnull":
  371. if (!v){
  372. this.notValidationMode(data.prompt);
  373. return false;
  374. }
  375. break;
  376. case "notnull":
  377. if (v){
  378. this.notValidationMode(data.prompt);
  379. return false;
  380. }
  381. break;
  382. case "gt":
  383. if (v>data.value){
  384. this.notValidationMode(data.prompt);
  385. return false;
  386. }
  387. break;
  388. case "lt":
  389. if (v<data.value){
  390. this.notValidationMode(data.prompt);
  391. return false;
  392. }
  393. break;
  394. case "equal":
  395. if (v==data.value){
  396. this.notValidationMode(data.prompt);
  397. return false;
  398. }
  399. break;
  400. case "neq":
  401. if (v!=data.value){
  402. this.notValidationMode(data.prompt);
  403. return false;
  404. }
  405. break;
  406. case "contain":
  407. if (v.indexOf(data.value)!=-1){
  408. this.notValidationMode(data.prompt);
  409. return false;
  410. }
  411. break;
  412. case "notcontain":
  413. if (v.indexOf(data.value)==-1){
  414. this.notValidationMode(data.prompt);
  415. return false;
  416. }
  417. break;
  418. }
  419. }
  420. return true;
  421. }
  422. });