Subform.js 23 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606
  1. MWF.xApplication.process.FormDesigner.Module = MWF.xApplication.process.FormDesigner.Module || {};
  2. MWF.xDesktop.requireApp("process.FormDesigner", "Module.$Element", null, false);
  3. MWF.xApplication.process.FormDesigner.Module.Subform = MWF.FCSubform = new Class({
  4. Extends: MWF.FC$Element,
  5. Implements: [Options, Events],
  6. options: {
  7. "style": "default",
  8. "propertyPath": "../x_component_process_FormDesigner/Module/Subform/subform.html",
  9. "actions": [
  10. {
  11. "name": "move",
  12. "icon": "move1.png",
  13. "event": "mousedown",
  14. "action": "move",
  15. "title": MWF.APPFD.LP.formAction.move
  16. },
  17. {
  18. "name": "delete",
  19. "icon": "delete1.png",
  20. "event": "click",
  21. "action": "delete",
  22. "title": MWF.APPFD.LP.formAction["delete"]
  23. },
  24. {
  25. "name": "selectParent",
  26. "icon": "selectParent.png",
  27. "event": "click",
  28. "action": "selectParent",
  29. "title": MWF.APPFD.LP.formAction["selectParent"]
  30. }
  31. // {
  32. // "name": "styleBrush",
  33. // "icon": "styleBrush.png",
  34. // "event": "click",
  35. // "action": "styleBrush",
  36. // "title": MWF.APPFD.LP.formAction["styleBrush"]
  37. // }
  38. ]
  39. },
  40. initialize: function(form, options){
  41. this.setOptions(options);
  42. this.path = "../x_component_process_FormDesigner/Module/Subform/";
  43. this.cssPath = "../x_component_process_FormDesigner/Module/Subform/"+this.options.style+"/css.wcss";
  44. this._loadCss();
  45. this.moduleType = "element";
  46. this.moduleName = "subform";
  47. this.form = form;
  48. this.container = null;
  49. this.containerNode = null;
  50. },
  51. load : function(json, node, parent){
  52. this.json = json;
  53. this.node= node;
  54. this.node.store("module", this);
  55. //this.node.empty();
  56. this.node.setStyles(this.css.moduleNode);
  57. //this._loadNodeStyles();
  58. this._initModule();
  59. if (this.json.subformSelected && this.json.subformSelected!=="none" && this.json.subformType!=="script"){
  60. this.redoSelectedSubform(this.json.subformSelected, null, "");
  61. }else{
  62. this.node.empty();
  63. this.loadIcon();
  64. }
  65. this._loadTreeNode(parent);
  66. this.setCustomStyles();
  67. this.parentContainer = this.treeNode.parentNode.module;
  68. this._setEditStyle_custom("id");
  69. this.parseModules();
  70. this.json.moduleName = this.moduleName;
  71. this.node.addEvent("click", function(){
  72. this.refreshSubform();
  73. }.bind(this));
  74. this.node.addEvent("dblclick", function(e){
  75. this.openSubform(e);
  76. }.bind(this));
  77. },
  78. _initModule: function(){
  79. if (!this.json.isSaved) this.setStyleTemplate();
  80. this.setPropertiesOrStyles("styles");
  81. this.setPropertiesOrStyles("inputStyles");
  82. this.setPropertiesOrStyles("properties");
  83. this._setNodeProperty();
  84. if (!this.form.isSubform) this._createIconAction();
  85. this._setNodeEvent();
  86. this.json.isSaved = true;
  87. if( !this.form.subformModuleList )this.form.subformModuleList = [];
  88. this.form.subformModuleList.push( this );
  89. this.queryGetFormDataFun = this.queryGetFormData.bind(this);
  90. this.postGetFormDataFun = this.postGetFormData.bind(this);
  91. this.form.addEvent("queryGetFormData", this.queryGetFormDataFun);
  92. this.form.addEvent("postGetFormData", this.postGetFormDataFun);
  93. },
  94. openSubform: function(e){
  95. if (this.json.subformSelected && this.json.subformSelected!=="none" && this.json.subformType!=="script"){
  96. layout.desktop.openApplication(e, "process.FormDesigner", {"id": this.json.subformSelected, "appId": "FormDesigner"+this.json.subformSelected});
  97. }
  98. },
  99. _createMoveNode: function(){
  100. this.moveNode = new Element("div", {
  101. "MWFType": "subform",
  102. "id": this.json.id,
  103. "styles": this.css.moduleNodeMove,
  104. "events": {
  105. "selectstart": function(){
  106. return false;
  107. }
  108. }
  109. }).inject(this.form.container);
  110. },
  111. _getDroppableNodes: function(){
  112. var nodes = [this.form.node].concat(this.form.moduleElementNodeList, this.form.moduleContainerNodeList, this.form.moduleComponentNodeList);
  113. this.form.moduleList.each( function(module){
  114. //子表单不能往数据模板里拖
  115. if( module.moduleName === "datatemplate" ){
  116. var subDoms = this.form.getModuleNodes(module.node);
  117. nodes.erase( module.node );
  118. subDoms.each(function (dom) {
  119. nodes.erase( dom );
  120. })
  121. }
  122. }.bind(this));
  123. return nodes;
  124. },
  125. _createNode: function(){
  126. this.node = this.moveNode.clone(true, true);
  127. this.node.setStyles(this.css.moduleNode);
  128. this.node.set("id", this.json.id);
  129. this.node.addEvent("selectstart", function(){
  130. return false;
  131. });
  132. // if (this.json.subformSelected && this.json.subformSelected!="none" && this.json.subformType!=="script"){
  133. // this.redoSelectedSubform(this.json.subformSelected, $(this.property.data.pid+"selectSubform").getElement("select"), "");
  134. // }else{
  135. this.loadIcon();
  136. // }
  137. this.node.addEvent("click", function(){
  138. this.refreshSubform();
  139. }.bind(this));
  140. this.node.addEvent("dblclick", function(e){
  141. this.openSubform(e);
  142. }.bind(this));
  143. },
  144. postGetFormData: function(node){
  145. if (!node || node.contains(this.node)) this.show();
  146. },
  147. queryGetFormData: function(node){
  148. if (!node || node.contains(this.node)) this.hide();
  149. },
  150. hide: function(){
  151. this.node.empty();
  152. },
  153. show: function(){
  154. if (this.subformData){
  155. this.subformModule = new MWF.FCSubform.Form(this.form, this.node, {
  156. mode : this.form.options.mode,
  157. parentformIdList : this.getParentformIdList(),
  158. level : this.getLevel()
  159. });
  160. this.subformModule.subformSelector = this.getSubformSelector();
  161. this.subformModule.subformSelectedValue = this.getSubformSelectedValue();
  162. this.subformModule.level1Subform = this.getLevel1Subform();
  163. this.subformModule.load(this.subformData);
  164. }else{
  165. this.node.empty();
  166. this.loadIcon();
  167. }
  168. },
  169. "delete": function(e){
  170. var module = this;
  171. this.form.designer.shortcut = false;
  172. this.form.designer.confirm("warn", module.node, MWF.APPFD.LP.notice.deleteElementTitle, MWF.APPFD.LP.notice.deleteElement, 300, 120, function(){
  173. if (this.queryGetFormDataFun) module.form.removeEvent("queryGetFormData", this.queryGetFormDataFun);
  174. if (this.postGetFormDataFun) module.form.removeEvent("postGetFormData", this.postGetFormDataFun);
  175. module.addHistoryLog( "delete", null, null, null, null, module.getHtml() );
  176. module.destroy();
  177. module.form.selected();
  178. module.form.designer.shortcut = true;
  179. this.close();
  180. }, function(){
  181. module.form.designer.shortcut = true;
  182. this.close();
  183. }, null);
  184. },
  185. getLevel : function(){
  186. return ( this.form.options.level1 || 0 ) + 1;
  187. },
  188. getLevel1Subform : function(){
  189. return this.form.level1Subform || this;
  190. },
  191. getSubformSelector : function(){
  192. return this.subformSelector || this.form.subformSelector;
  193. },
  194. getSubformSelectedValue : function(){
  195. return this.subformSelectedValue || this.form.subformSelectedValue;
  196. },
  197. checkSubformNested : function( id ){
  198. if( this.form.options.parentformIdList ){
  199. return !this.form.options.parentformIdList.contains( id );
  200. }
  201. return true;
  202. },
  203. isSubformUnique : function( id , oldId ){
  204. if( !this.form.topform )return true;
  205. if( !this.getLevel1Subform() || !this.getLevel1Subform().json )return true;
  206. return this.form.topform.isSubformUnique( id, this.getLevel1Subform().json.id, oldId );
  207. },
  208. getParentformIdList : function(){
  209. var parentformIdList;
  210. if( this.form.options.parentformIdList ){
  211. parentformIdList = Array.clone( this.form.options.parentformIdList );
  212. parentformIdList.push( this.form.json.id )
  213. }else{
  214. parentformIdList = [ this.form.json.id ];
  215. }
  216. return parentformIdList;
  217. },
  218. refreshSubform: function(){
  219. if (this.json.subformSelected && this.json.subformSelected!=="none" && this.json.subformType!=="script"){
  220. MWF.Actions.get("x_processplatform_assemble_designer").getForm(this.json.subformSelected, function(json){
  221. if (this.subformData.updateTime!==json.data.updateTime){
  222. var select = null;
  223. if (this.property){
  224. select = $(this.property.data.pid+"selectSubform").getElement("select");
  225. }
  226. this.clearSubformList(this.json.subformSelected);
  227. this.reloadSubform(json.data, select, "");
  228. }
  229. }.bind(this));
  230. }
  231. },
  232. loadIcon: function(){
  233. this.iconNode = new Element("div", {
  234. "styles": this.css.iconNode
  235. }).inject(this.node);
  236. new Element("div", {
  237. "styles": this.css.iconNodeIcon
  238. }).inject(this.iconNode);
  239. new Element("div", {
  240. "styles": this.css.iconNodeText,
  241. "text": "Subform"
  242. }).inject(this.iconNode);
  243. },
  244. _loadNodeStyles: function(){
  245. this.iconNode = this.node.getElement("div").setStyles(this.css.iconNode);
  246. this.iconNode.getFirst("div").setStyles(this.css.iconNodeIcon);
  247. this.iconNode.getLast("div").setStyles(this.css.iconNodeText);
  248. },
  249. _setEditStyle_custom : function(name, input, oldValue){
  250. if (name==="subformSelected"){
  251. if (this.json.subformSelected!==oldValue){
  252. this.redoSelectedSubform(name, input, oldValue);
  253. }
  254. }
  255. if (name==="subformType"){
  256. if (this.json.subformType!==oldValue){
  257. if (this.json.subformType !== "script"){
  258. this.redoSelectedSubform(name, $(this.property.data.pid+"selectSubform").getElement("select"), "");
  259. }
  260. if (this.json.subformType === "script"){
  261. this.subformData = null;
  262. this.clearSubformList(this.json.subformSelected);
  263. this.node.empty();
  264. this.loadIcon();
  265. }
  266. }
  267. }
  268. },
  269. redoSelectedSubform: function(name, input, oldValue){
  270. if (this.json.subformSelected==="none") this.json.subformSelected="";
  271. if (this.json.subformSelected && this.json.subformSelected!=="none"){
  272. if(input)this.subformSelector = input;
  273. if( !input )input = this.getSubformSelector();
  274. if( oldValue )this.subformSelectedValue = oldValue;
  275. if( !oldValue )oldValue = this.getSubformSelectedValue() || "";
  276. var level1Subform = this.getLevel1Subform();
  277. if( !this.checkSubformNested(this.json.subformSelected) ){
  278. //var p = level1Subform.node.getPosition(document.body);
  279. //this.form.designer.alert("error", {
  280. // "event": {
  281. // "x": p.x + 150,
  282. // "y": p.y + 80
  283. // }
  284. //}, this.form.designer.lp.subformNestedTitle, this.form.designer.lp.subformNestedInfor, 400, 120);
  285. this.form.designer.notice( this.form.designer.lp.subformNestedInfor, "error", level1Subform.node );
  286. level1Subform.json.subformSelected = oldValue;
  287. if (input) {
  288. for (var i = 0; i < input.options.length; i++) {
  289. if (input.options[i].value === oldValue || (input.options[i].value==="none" && !oldValue ) ) {
  290. input.options[i].set("selected", true);
  291. break;
  292. }
  293. }
  294. }
  295. if( !oldValue ){
  296. level1Subform.node.empty();
  297. level1Subform.loadIcon();
  298. }else{
  299. level1Subform.refreshSubform();
  300. }
  301. }else if( !this.isSubformUnique( this.json.subformSelected , oldValue ) ){
  302. //if (this.form.subformList && this.form.subformList[this.json.subformSelected] ){
  303. //var p = (input) ? input.getPosition() : this.node.getPosition();
  304. //var p = level1Subform.node.getPosition(document.body);
  305. //this.form.designer.alert("error", {
  306. // "event": {
  307. // "x": p.x+150,
  308. // "y": p.y+80
  309. // }
  310. //}, this.form.designer.lp.subformConflictTitle, this.form.designer.lp.subformConflictInfor, 400, 120);
  311. this.form.designer.notice( this.form.designer.lp.subformConflictInfor, "error", level1Subform.node );
  312. level1Subform.json.subformSelected = oldValue;
  313. if (input){
  314. for (var i=0; i<input.options.length; i++){
  315. if (input.options[i].value===oldValue || (input.options[i].value==="none" && !oldValue ) ){
  316. input.options[i].set("selected", true);
  317. break;
  318. }
  319. }
  320. }
  321. if( !oldValue ){
  322. level1Subform.node.empty();
  323. level1Subform.loadIcon();
  324. }else{
  325. level1Subform.refreshSubform();
  326. }
  327. }else{
  328. MWF.Actions.get("x_processplatform_assemble_designer").getForm(this.json.subformSelected, function(json){
  329. this.reloadSubform(json.data, input, oldValue);
  330. }.bind(this));
  331. }
  332. }else{
  333. this.subformData = null;
  334. this.clearSubformList(oldValue);
  335. this.node.empty();
  336. this.loadIcon();
  337. }
  338. },
  339. clearSubformList: function(formName){
  340. if (!this.form.subformList) this.form.subformList = {};
  341. if (formName) if (this.form.subformList[formName]) delete this.form.subformList[formName];
  342. if( !this.form.topform )this.form.topform = this.form;
  343. this.form.topform.clearSubformList( this.getLevel1Subform().json.id );
  344. },
  345. addSubformList: function(){
  346. if (!this.form.subformList) this.form.subformList = {};
  347. this.form.subformList[this.json.subformSelected] = Object.clone(this.subformData.json);
  348. if( !this.form.topform )this.form.topform = this.form;
  349. this.form.topform.addSubformList( this.getLevel1Subform().json.id, this.json.subformSelected );
  350. },
  351. getSubformData: function(data){
  352. var subformDataStr = null;
  353. if (this.form.options.mode !== "Mobile"){
  354. subformDataStr = data.data;
  355. }else{
  356. subformDataStr = data.mobileData;
  357. }
  358. this.subformData = null;
  359. if (subformDataStr){
  360. this.subformData = JSON.decode(MWF.decodeJsonString(subformDataStr));
  361. this.subformData.updateTime = data.updateTime;
  362. }
  363. },
  364. reloadSubform: function(data, input, oldValue){
  365. this.getSubformData(data);
  366. if (this.subformData){
  367. var oldSubformData = (this.form.subformList && oldValue) ? this.form.subformList[oldValue] : null;
  368. this.clearSubformList(oldValue);
  369. if (this.checkSubform(data, input)){
  370. this.node.empty();
  371. this.loadSubform( null );
  372. this.addSubformList();
  373. }else{
  374. if (oldSubformData){
  375. if (!this.form.subformList) this.form.subformList = {};
  376. this.form.subformList[oldValue] = oldSubformData;
  377. }else{
  378. this.clearSubformList(oldValue);
  379. this.node.empty();
  380. this.loadIcon();
  381. }
  382. this.json.subformSelected = oldValue;
  383. if (!oldValue){
  384. if (input) input.options[0].set("selected", true);
  385. }else{
  386. if (input){
  387. for (var i=0; i<input.options.length; i++){
  388. if (input.options[i].value===oldValue){
  389. input.options[i].set("selected", true);
  390. break;
  391. }
  392. }
  393. }
  394. }
  395. }
  396. }else{
  397. this.json.subformSelected = oldValue;
  398. if (input){
  399. if (!oldValue){
  400. input.options[0].set("selected", true);
  401. }else{
  402. for (var i=0; i<input.options.length; i++){
  403. if (input.options[i].value===oldValue){
  404. input.options[i].set("selected", true);
  405. break;
  406. }
  407. }
  408. }
  409. }
  410. }
  411. },
  412. regetSubformData: function(){
  413. var flag = false;
  414. if (this.json.subformSelected && this.json.subformSelected!=="none" && this.json.subformType!=="script"){
  415. MWF.Actions.get("x_processplatform_assemble_designer").getForm(this.json.subformSelected, function(json){
  416. if (!this.subformData || this.subformData.updateTime!==json.data.updateTime){
  417. this.getSubformData(json.data);
  418. flag = true;
  419. }
  420. }.bind(this), null, false);
  421. }
  422. return flag;
  423. },
  424. getConflictFields: function(){
  425. var moduleNames = [];
  426. if (this.subformData){
  427. Object.each(this.subformData.json.moduleList, function(o, key){
  428. var check = this.form.checkModuleId(key, o.type, this.subformData.json.id);
  429. if (check.fieldConflict){
  430. moduleNames.push(key)
  431. }else if (check.elementConflict){
  432. o.changeId = this.json.id+"_"+key;
  433. }
  434. }.bind(this));
  435. }
  436. return moduleNames;
  437. },
  438. checkSubform: function(data, input){
  439. var moduleNames = this.getConflictFields();
  440. // Object.each(this.subformData.json.moduleList, function(o, key){
  441. // var check = this.form.checkModuleId(key, o.type, this.subformData.json.id);
  442. // if (check.fieldConflict){
  443. // moduleNames.push(key)
  444. // }else if (check.elementConflict){
  445. // o.changeId = this.json.id+"_"+key;
  446. // }
  447. // }.bind(this));
  448. if (moduleNames.length){
  449. var txt = this.form.designer.lp.subformNameConflictInfor;
  450. txt = txt.replace("{name}", moduleNames.join(", "));
  451. //var p = (input) ? input.getPosition() : this.node.getPosition();
  452. // var p = this.node.getPosition(document.body);
  453. // this.form.designer.alert("error", {
  454. // "event": {
  455. // "x": p.x+150,
  456. // "y": p.y+80
  457. // }
  458. // }, this.form.designer.lp.subformNameConflictTitle, txt, 400, 200);
  459. this.form.designer.notice(txt, "error", this.node);
  460. return false;
  461. }
  462. return true;
  463. },
  464. loadSubform: function(data) {
  465. this.subformData.json.style = this.form.json.style;
  466. this.subformData.json.properties = this.form.json.properties;
  467. this.subformData.json.jsheader = {"code": "", "html": ""};
  468. this.subformData.json.events = {};
  469. this.subformData.json.formStyleType = this.form.json.formStyleType;
  470. //this.subformData.json.id = this.json.id;
  471. this.subformModule = new MWF.FCSubform.Form(this.form, this.node, {
  472. mode : this.form.options.mode,
  473. parentformIdList : this.getParentformIdList(),
  474. level : this.getLevel()
  475. });
  476. this.subformModule.subformSelector = this.getSubformSelector();
  477. this.subformModule.subformSelectedValue = this.getSubformSelectedValue();
  478. this.subformModule.level1Subform = this.getLevel1Subform();
  479. this.subformModule.load(this.subformData);
  480. //this.createRefreshNode();
  481. },
  482. destroy: function(){
  483. this.form.moduleList.erase(this);
  484. this.form.moduleNodeList.erase(this.node);
  485. this.form.moduleElementNodeList.erase(this.node);
  486. this.form.subformModuleList.erase(this);
  487. this.clearSubformList(this.json.subformSelected);
  488. this.node.destroy();
  489. this.actionArea.destroy();
  490. delete this.form.json.moduleList[this.json.id];
  491. this.json = null;
  492. delete this.json;
  493. this.treeNode.destroy();
  494. }
  495. });
  496. MWF.xApplication.process.FormDesigner.Module.Subform.Form = new Class({
  497. Extends: MWF.FCForm,
  498. initialize: function(form, container, options){
  499. this.setOptions(options);
  500. this.topform = form.topform || form;
  501. this.parentform = form;
  502. this.css = this.parentform.css;
  503. this.container = container;
  504. this.form = this;
  505. this.isSubform = true;
  506. this.moduleType = "subform";
  507. this.moduleList = [];
  508. this.moduleNodeList = [];
  509. this.moduleContainerNodeList = [];
  510. this.moduleElementNodeList = [];
  511. this.moduleComponentNodeList = [];
  512. // this.moduleContainerList = [];
  513. this.dataTemplate = {};
  514. this.designer = this.parentform.designer;
  515. this.selectedModules = [];
  516. },
  517. load : function(data){
  518. this.data = data;
  519. this.json = data.json;
  520. this.html = data.html;
  521. this.json.mode = this.options.mode;
  522. this.container.set("html", this.html);
  523. this.loadDomModules();
  524. //this.setCustomStyles();
  525. //this.node.setProperties(this.json.properties);
  526. //this.setNodeEvents();
  527. if (this.options.mode==="Mobile"){
  528. //if (oldStyleValue) this._setEditStyle("formStyleType", null, oldStyleValue);
  529. }
  530. },
  531. loadDomModules: function(){
  532. this.node = this.container.getFirst();
  533. this.node.set("id", this.json.id);
  534. this.node.setStyles((this.options.mode==="Mobile") ? this.css.formMobileNode : this.css.formNode);
  535. this.node.store("module", this);
  536. this.loadDomTree();
  537. },
  538. loadDomTree: function(){
  539. this.createFormTreeNode();
  540. this.parseModules(this, this.node);
  541. },
  542. createFormTreeNode: function(){
  543. this.treeNode = {
  544. "insertChild": function(){return this;},
  545. "appendChild": function(){return this;},
  546. "selectNode": function(){},
  547. "node": null,
  548. "parentNode": {}
  549. };
  550. this.treeNode.module = this;
  551. }
  552. });