SectionMerger.js 18 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457
  1. MWF.xApplication.process.FormDesigner.widget = MWF.xApplication.process.FormDesigner.widget || {};
  2. MWF.require("MWF.widget.ScriptArea", null, false);
  3. MWF.xApplication.process.FormDesigner.widget.SectionMerger = new Class({
  4. Implements: [Options, Events],
  5. Extends: MWF.widget.Common,
  6. options: {
  7. "style": "default",
  8. "maxObj": document.body
  9. },
  10. initialize: function(node, property, options){
  11. this.setOptions(options);
  12. this.node = $(node);
  13. this.property = property;
  14. this.app = this.property.designer;
  15. this.designer = this.property.designer;
  16. this.form = this.property.form;
  17. this.module = this.property.module;
  18. // this.path = "../x_component_process_FormDesigner/widget/$SectionMerger/";
  19. // this.cssPath = "../x_component_process_FormDesigner/widget/$SectionMerger/"+this.options.style+"/css.wcss";
  20. this.lp = this.app.lp.propertyTemplate;
  21. if( !this.lp ){
  22. o2.xDesktop.requireApp("process.FormDesigner", "lp."+o2.language, null, false);
  23. this.lp = MWF.xApplication.process.FormDesigner.LP.propertyTemplate;
  24. }
  25. // this._loadCss();
  26. },
  27. load: function(data){
  28. var _self = this;
  29. this.data = data;
  30. this.node.set("html", this.getHtml());
  31. this.readArea = this.node.getElement(".sectionMergeReadArea");
  32. this.readTypeArea = this.node.getElement(".sectionMergeReadTypeArea");
  33. this.readDefaultArea = this.node.getElement(".sectionMergeReadDefaultArea");
  34. this.readHtmlScriptArea = this.node.getElement(".sectionMergeReadHtmlScriptArea");
  35. this.readDataScriptArea = this.node.getElement(".sectionMergeReadDataScriptArea");
  36. this.keyContentSeparatorArea = this.node.getElement(".keyContentSeparatorArea");
  37. this.sectionKeyStylesArea = this.node.getElement(".sectionKeyStylesArea");
  38. this.readStyleArea = this.node.getElement(".sectionMergeReadStyleArea");
  39. this.readWithSectionKeyArea = this.node.getElement(".readWithSectionKeyArea");
  40. this.sectionKeyScriptArea = this.node.getElement(".sectionKeyScriptArea");
  41. this.sectionKeySequenceArea = this.node.getElement(".sectionKeySequenceArea");
  42. this.sectionKeyTotalArea = this.node.getElement(".sectionKeyTotalArea");
  43. this.editArea = this.node.getElement(".sectionMergeEditArea");
  44. this.editScriptArea = this.node.getElement(".sectionMergeEditScriptArea");
  45. this.mergeTypeEditTable = this.node.getElement("[item='mergeTypeEditTable']");
  46. this.sortScriptArea = this.node.getElement(".sectionMergeSortScriptArea");
  47. var lp = this.lp;
  48. var moduleName = this.module.moduleName;
  49. this.hasEditDefaultModuleList = ["textfield", "checkbox", "datatable", "datatemplate", "org", "textarea", "elautocomplete", "elcheckbox", "elinput"];
  50. debugger;
  51. if( o2.typeOf( this.data.sectionMerge ) === "null" )this.data.sectionMerge = "none";
  52. if( o2.typeOf( this.data.mergeTypeRead ) === "null" )this.data.mergeTypeRead = "default";
  53. if( o2.typeOf( this.data.showSectionKey ) === "null" )this.data.showSectionKey = true;
  54. if( o2.typeOf( this.data.sectionKey ) === "null" )this.data.sectionKey = "person";
  55. if( o2.typeOf( this.data.mergeTypeEdit ) === "null" ){
  56. if( !this.hasEditDefaultModuleList.contains( moduleName ) ){
  57. this.data.mergeTypeEdit = "script"
  58. }else if(["number", "elnumber"].contains(moduleName)){
  59. this.data.mergeTypeEdit = "amount"
  60. }else{
  61. this.data.mergeTypeEdit = "default"
  62. }
  63. }
  64. MWF.xDesktop.requireApp("Template", "MForm", function () {
  65. this.form = new MForm(this.node, this.data, {
  66. isEdited: true,
  67. style : "",
  68. hasColon : true,
  69. itemTemplate: {
  70. sectionMerge: { name: this.data.pid + "sectionMerge", type : "radio",
  71. selectValue: function(){
  72. return ["none", "read", "edit"];
  73. // switch (moduleName) {
  74. // case "datatable":
  75. // case "datatemplate":
  76. // return ["none", "read", "editSection", "edit"];
  77. // default:
  78. // return ["none", "read", "edit"]
  79. // }
  80. },
  81. selectText: function () {
  82. // switch (moduleName) {
  83. // case "datatable":
  84. // case "datatemplate":
  85. // return [lp.none, lp.mergeDisplay, lp.editCurrentSection, lp.mergeEdit];
  86. // default:
  87. // return [lp.none, lp.mergeDisplay, lp.mergeEdit]
  88. // }
  89. return [lp.none, lp.mergeDisplay, lp.mergeEdit];
  90. },
  91. event: {
  92. change: function (it, ev) {
  93. _self.property.setRadioValue("sectionMerge", this);
  94. _self.checkShow()
  95. }
  96. }},
  97. mergeTypeRead: { name: this.data.pid + "mergeTypeRead",
  98. type : "radio", className: "editTableRadio",
  99. selectValue: function(){
  100. switch (moduleName) {
  101. case "datatable":
  102. case "datatemplate":
  103. return ["default", "dataScript"];
  104. case "number":
  105. case "elnumber":
  106. return ["default", "amount", "average", "htmlScript"];
  107. default:
  108. return ["default", "htmlScript"]
  109. }
  110. },
  111. selectText: function () {
  112. switch (moduleName) {
  113. case "datatable":
  114. case "datatemplate":
  115. return [lp.default, lp.dataScript];
  116. case "number":
  117. case "elnumber":
  118. return [lp.default, lp.amountValue, lp.averageValue, lp.htmlScript];
  119. default:
  120. return [lp.default, lp.htmlScript];
  121. }
  122. },
  123. event: {
  124. change: function (it) {
  125. _self.property.setRadioValue("mergeTypeRead", this);
  126. _self.checkShow()
  127. }
  128. }},
  129. showSectionKey: { name: this.data.pid + "showSectionKey",
  130. type : "radio", className: "editTableRadio", selectValue: ["true", "false"], selectText: [lp.yes, lp.no], event: {
  131. change: function (it) {
  132. _self.property.setRadioValue("showSectionKey", this);
  133. _self.checkShow()
  134. }
  135. }},
  136. sequenceBySection: { name: this.data.pid + "sequenceBySection",
  137. type : "radio", className: "editTableRadio", selectValue: ["section","module"], selectText: [lp.bySection, lp.byModule], event: {
  138. change: function (it) {
  139. _self.property.setRadioValue("sequenceBySection", this);
  140. _self.checkShow()
  141. }
  142. }},
  143. totalRowBySection: { name: this.data.pid + "totalRowBySection",
  144. type : "checkbox", className: "editTableRadio", selectValue: ["section","module"], selectText: [lp.bySection, lp.byModule], event: {
  145. change: function (it) {
  146. _self.property.setCheckboxValue("totalRowBySection", this);
  147. _self.checkShow()
  148. }
  149. }},
  150. keyContentSeparator: { name: this.data.pid + "keyContentSeparator",
  151. tType : "text" , className: "editTableInput", event: {
  152. change: function (it) {
  153. _self.property.setValue("keyContentSeparator", it.getValue(), this);
  154. }
  155. }},
  156. sectionKey: { name: this.data.pid + "sectionKey",
  157. type : "radio", selectValue: ["person", "unit", "activity", "splitValue", "script"], selectText: [lp.handler, lp.handlerUnit, lp.activityId, lp.splitValue, lp.script], event: {
  158. change: function (it) {
  159. _self.property.setRadioValue("sectionKey", this);
  160. _self.checkShow()
  161. }
  162. }},
  163. mergeTypeEdit: { name: this.data.pid + "mergeTypeEdit",
  164. type : "radio", className: "editTableRadio",
  165. selectValue: function(){
  166. return ["number", "elnumber"].contains(moduleName) ? ["amount", "average", "script"] : ["default", "script"]
  167. },
  168. selectText: function () {
  169. return ["number", "elnumber"].contains(moduleName) ? [lp.amountValue, lp.averageValue, lp.script] : [lp.default, lp.script]
  170. },
  171. event: {
  172. change: function (it) {
  173. _self.property.setRadioValue("mergeTypeEdit", this);
  174. _self.checkShow()
  175. }
  176. }},
  177. }
  178. }, this.app, this.form.css);
  179. this.form.load();
  180. // this.setEditNodeStyles( this.node );
  181. this.loadMaplist();
  182. this.loadScriptArea();
  183. this.checkShow( this.data );
  184. this.fireEvent("postLoad");
  185. }.bind(this), true);
  186. },
  187. checkShow: function(d){
  188. debugger;
  189. if( !d )d = this.data;
  190. var _self = this;
  191. var showCondition = {
  192. "readArea": function() {
  193. return d.sectionMerge==='read' || d.sectionMerge==='editSection';
  194. },
  195. "readTypeArea": function(){
  196. return d.sectionMerge==='read';
  197. },
  198. "readDefaultArea": function () {
  199. return d.mergeTypeRead==='default' || !d.mergeTypeRead || d.sectionMerge==='editSection';
  200. },
  201. "readWithSectionKeyArea": function () {
  202. return !!d.showSectionKey || d.sectionMerge==='editSection';
  203. },
  204. "keyContentSeparatorArea": function () {
  205. return !!d.showSectionKey;
  206. },
  207. "sectionKeyStylesArea": function () {
  208. return !!d.showSectionKey;
  209. },
  210. "sectionKeyScriptArea": function () {
  211. return d.sectionKey === "script";
  212. },
  213. "sectionKeyTotalArea": function () {
  214. return d.showSectionKey && ["datatable"].contains( _self.module.moduleName );
  215. },
  216. "sectionKeySequenceArea": function () {
  217. return d.showSectionKey && ["datatable", "datatemplate"].contains( _self.module.moduleName );
  218. },
  219. "readStyleArea": function () {
  220. return !["datatable", "datatemplate"].contains( _self.module.moduleName );
  221. },
  222. "readHtmlScriptArea": function () {
  223. return d.sectionMerge==='read' && d.mergeTypeRead==='htmlScript';
  224. },
  225. "readDataScriptArea": function () {
  226. return d.sectionMerge==='read' && d.mergeTypeRead==='dataScript';
  227. },
  228. "editArea": function() {
  229. return d.sectionMerge==='edit';
  230. },
  231. "editScriptArea": function () {
  232. return d.sectionMerge==='edit' && d.mergeTypeEdit === 'script';
  233. },
  234. "sortScriptArea": function () {
  235. return ( d.sectionMerge==='read' && d.mergeTypeRead === "default" ) ||
  236. (d.sectionMerge==='edit' && d.mergeTypeEdit === "default") ||
  237. d.sectionMerge==='editSection'
  238. },
  239. "mergeTypeEditTable" : function () {
  240. return _self.hasEditDefaultModuleList.contains( _self.module.moduleName ) ||
  241. ["number", "elnumber"].contains( _self.module.moduleName );
  242. }
  243. };
  244. for( var key in showCondition ){
  245. if( showCondition[key]() ){
  246. this[key].setStyle("display", "");
  247. }else{
  248. this[key].hide()
  249. }
  250. }
  251. },
  252. getHtml: function(){
  253. return '<table width="100%" border="0" cellpadding="5" cellspacing="0" class="editTable">' +
  254. ' <tr>' +
  255. ' <td class="editTableTitle">'+this.lp.enableSectionMerge+':</td>' +
  256. ' <td class="editTableValue" item="sectionMerge"></td>' +
  257. ' </tr>' +
  258. '</table>' +
  259. '<div class="sectionMergeReadArea">' +
  260. ' <div class="sectionMergeReadTypeArea">' +
  261. ' <table width="100%" border="0" cellpadding="5" cellspacing="0" class="editTable">' +
  262. ' <tr>' +
  263. ' <td class="editTableTitle">'+this.lp.mergeType+':</td>' +
  264. ' <td class="editTableValue" item="mergeTypeRead"></td>' +
  265. ' </tr>' +
  266. ' </table>' +
  267. ' </div>' +
  268. ' <div class="sectionMergeReadDefaultArea">' +
  269. ' <table width="100%" border="0" cellpadding="5" cellspacing="0" class="editTable">' +
  270. ' <tr>' +
  271. ' <td class="editTableTitle">'+this.lp.showSectionKey+':</td>' +
  272. ' <td class="editTableValue" item="showSectionKey"></td>' +
  273. ' </tr>' +
  274. ' </table>' +
  275. ' <div class="sectionMergeReadStyleArea">' +
  276. ' <div class="MWFMaplist" name="sectionNodeStyles" title="'+this.lp.sectionNodeStyles+'"></div>' +
  277. ' <div class="MWFMaplist" name="sectionContentStyles" title="'+this.lp.sectionContentStyles+'"></div>' +
  278. ' </div>' +
  279. ' <div class="readWithSectionKeyArea">' +
  280. ' <div class="sectionKeyStylesArea">' +
  281. ' <div class="MWFMaplist" name="sectionKeyStyles" title="'+this.lp.sectionKeystyles+'"></div>' +
  282. ' </div>'+
  283. ' <div class="sectionKeySequenceArea">' +
  284. ' <table width="100%" border="0" cellpadding="5" cellspacing="0" class="editTable">' +
  285. ' <tr>' +
  286. ' <td class="editTableTitle">'+this.lp.serialNumber+':</td>' +
  287. ' <td class="editTableValue" item="sequenceBySection"></td>' +
  288. ' </tr>' +
  289. ' </table>' +
  290. ' </div>' +
  291. ' <div class="sectionKeyTotalArea">' +
  292. ' <table width="100%" border="0" cellpadding="5" cellspacing="0" class="editTable">' +
  293. ' <tr>' +
  294. ' <td class="editTableTitle">'+this.lp.totalRow+':</td>' +
  295. ' <td class="editTableValue" item="totalRowBySection"></td>' +
  296. ' </tr>' +
  297. ' </table>' +
  298. ' </div>' +
  299. ' <div class="keyContentSeparatorArea">' +
  300. ' <table width="100%" border="0" cellpadding="5" cellspacing="0" class="editTable">' +
  301. ' <tr>' +
  302. ' <td class="editTableTitle">'+this.lp.separator+':</td>' +
  303. ' <td class="editTableValue" item="keyContentSeparator"></td>' +
  304. ' </tr>' +
  305. ' </table>' +
  306. ' </div>' +
  307. ' <table width="100%" border="0" cellpadding="5" cellspacing="0" class="editTable">' +
  308. ' <tr>' +
  309. ' <td class="editTableTitle">'+this.lp.sectionKey+':</td>' +
  310. ' <td class="editTableValue" item="sectionKey"></td>' +
  311. ' </tr>' +
  312. ' </table>' +
  313. ' <div class="sectionKeyScriptArea">' +
  314. ' <div class="MWFScriptArea" name="sectionKeyScript" title="'+this.lp.sectionKeyScript+' (S)"></div>' +
  315. ' </div>' +
  316. ' </div>' +
  317. ' </div>' +
  318. ' <div class="sectionMergeReadHtmlScriptArea">' +
  319. ' <div class="MWFScriptArea" name="sectionMergeReadHtmlScript" title="'+this.lp.sectionMergeReadHtmlScript+' (S)"></div>' +
  320. ' <div style="padding: 10px;color:#999">返回需展现的html</div>' +
  321. ' </div> ' +
  322. ' <div class="sectionMergeReadDataScriptArea">' +
  323. ' <div class="MWFScriptArea" name="sectionMergeReadDataScript" title="'+this.lp.sectionMergeReadDataScript+' (S)"></div>' +
  324. ' <div style="padding: 10px;color:#999">返回删除区段后合并的数据,不保存到后台</div>' +
  325. ' </div> ' +
  326. '</div>' +
  327. '<div class="sectionMergeEditArea">' +
  328. ' <table width="100%" border="0" cellpadding="5" cellspacing="0" class="editTable" item="mergeTypeEditTable">' +
  329. ' <tr>' +
  330. ' <td class="editTableTitle">'+this.lp.mergeType+':</td>' +
  331. ' <td class="editTableValue" item="mergeTypeEdit"></td>' +
  332. ' </tr>' +
  333. ' </table>' +
  334. ' <div class="sectionMergeEditScriptArea">' +
  335. ' <div class="MWFScriptArea" name="sectionMergeEditScript" title="'+this.lp.sectionMergeEditScript+' (S)"></div>' +
  336. ' <div style="padding: 10px;color:#999">通过this.data[fieldId]获取字段数据,返回删除区段后合并的数据。</div>' +
  337. ' </div>' +
  338. '</div>' +
  339. '<div class="sectionMergeSortScriptArea">' +
  340. ' <div class="MWFScriptArea" name="sectionMergeSortScript" title="'+this.lp.sectionMergeSortScript+' (S)"></div>' +
  341. ' <div style="padding: 10px;color:#999">排序脚本通过this.event.a和this.event.b获取数据,处理后返回正数表示升序,负数表示降序。this.event.a和this.event.b值如: <br/>' +
  342. ' { <br/>' +
  343. ' key: "张三@zhangsan@P", //区段值 <br/>' +
  344. ' data: "内容" //字段内容 <br/>' +
  345. ' }' +
  346. ' </div>' +
  347. '</div>'
  348. },
  349. setEditNodeStyles: function(node){
  350. var nodes = node.getChildren();
  351. if (nodes.length){
  352. nodes.each(function(el){
  353. var cName = el.get("class");
  354. if (cName){
  355. if (this.form.css[cName]) el.setStyles(this.form.css[cName]);
  356. }
  357. this.setEditNodeStyles(el);
  358. }.bind(this));
  359. }
  360. },
  361. loadMaplist: function(){
  362. var maplists = this.node.getElements(".MWFMaplist");
  363. maplists.each(function(node){
  364. var title = node.get("title");
  365. var name = node.get("name");
  366. var lName = name.toLowerCase();
  367. var collapse = node.get("collapse");
  368. var mapObj = this.data[name];
  369. if (!mapObj) mapObj = {};
  370. MWF.require("MWF.widget.Maplist", function(){
  371. node.empty();
  372. var maplist = new MWF.widget.Maplist(node, {
  373. "title": title,
  374. "collapse": (collapse) ? true : false,
  375. "onChange": function(){
  376. //this.data[name] = maplist.toJson();
  377. //
  378. var oldData = this.data[name];
  379. this.property.changeJsonDate(name, maplist.toJson());
  380. this.property.changeStyle(name, oldData);
  381. this.property.changeData(name, null, oldData);
  382. }.bind(this),
  383. "onDelete": function(key){
  384. debugger;
  385. this.module.deletePropertiesOrStyles(name, key);
  386. }.bind(this),
  387. "isProperty": (lName.contains("properties") || lName.contains("property") || lName.contains("attribute"))
  388. });
  389. maplist.load(mapObj);
  390. this.property.maplists[name] = maplist;
  391. }.bind(this));
  392. }.bind(this));
  393. },
  394. loadScriptArea: function(){
  395. var scriptAreas = this.node.getElements(".MWFScriptArea");
  396. var formulaAreas = this.node.getElements(".MWFFormulaArea");
  397. this.loadScriptEditor(scriptAreas);
  398. this.loadScriptEditor(formulaAreas, "formula");
  399. },
  400. loadScriptEditor: function(scriptAreas, style){
  401. scriptAreas.each(function(node){
  402. var title = node.get("title");
  403. var name = node.get("name");
  404. if (!this.data[name]) this.data[name] = {"code": "", "html": ""};
  405. var scriptContent = this.data[name];
  406. var mode = node.dataset["mode"];
  407. MWF.require("MWF.widget.ScriptArea", function(){
  408. var scriptArea = new MWF.widget.ScriptArea(node, {
  409. "title": title,
  410. "isbind": false,
  411. "mode": mode || "javascript",
  412. //"maxObj": this.propertyNode.parentElement.parentElement.parentElement,
  413. "maxObj": this.designer.formContentNode || this.designer.pageContentNode,
  414. "onChange": function(){
  415. //this.data[name] = scriptArea.toJson();
  416. if (!this.data[name]){
  417. this.data[name] = {"code": "", "html": ""};
  418. if (this.module.form.scriptDesigner) this.module.form.scriptDesigner.addScriptItem(this.data[name], "code", this.data, name);
  419. }
  420. var oldValue = this.data[name].code;
  421. var json = scriptArea.toJson();
  422. this.data[name].code = json.code;
  423. this.property.checkHistory(name+".code", oldValue, this.data[name].code);
  424. //this.data[name].html = json.html;
  425. }.bind(this),
  426. "onSave": function(){
  427. this.designer.saveForm();
  428. }.bind(this),
  429. "style": style || "default",
  430. "runtime": "web"
  431. });
  432. scriptArea.load(scriptContent);
  433. }.bind(this));
  434. }.bind(this));
  435. }
  436. });