Checkbox.js 14 KB

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