Radio.js 15 KB

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