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. // debugger;
  133. // if (this.json.subformSelected && this.json.subformSelected!="none" && this.json.subformType!=="script"){
  134. // this.redoSelectedSubform(this.json.subformSelected, $(this.property.data.pid+"selectSubform").getElement("select"), "");
  135. // }else{
  136. this.loadIcon();
  137. // }
  138. this.node.addEvent("click", function(){
  139. this.refreshSubform();
  140. }.bind(this));
  141. this.node.addEvent("dblclick", function(e){
  142. this.openSubform(e);
  143. }.bind(this));
  144. },
  145. postGetFormData: function(node){
  146. if (!node || node.contains(this.node)) this.show();
  147. },
  148. queryGetFormData: function(node){
  149. if (!node || node.contains(this.node)) this.hide();
  150. },
  151. hide: function(){
  152. this.node.empty();
  153. },
  154. show: function(){
  155. if (this.subformData){
  156. this.subformModule = new MWF.FCSubform.Form(this.form, this.node, {
  157. mode : this.form.options.mode,
  158. parentformIdList : this.getParentformIdList(),
  159. level : this.getLevel()
  160. });
  161. this.subformModule.subformSelector = this.getSubformSelector();
  162. this.subformModule.subformSelectedValue = this.getSubformSelectedValue();
  163. this.subformModule.level1Subform = this.getLevel1Subform();
  164. this.subformModule.load(this.subformData);
  165. }else{
  166. this.node.empty();
  167. this.loadIcon();
  168. }
  169. },
  170. "delete": function(e){
  171. var module = this;
  172. this.form.designer.shortcut = false;
  173. this.form.designer.confirm("warn", module.node, MWF.APPFD.LP.notice.deleteElementTitle, MWF.APPFD.LP.notice.deleteElement, 300, 120, function(){
  174. if (this.queryGetFormDataFun) module.form.removeEvent("queryGetFormData", this.queryGetFormDataFun);
  175. if (this.postGetFormDataFun) module.form.removeEvent("postGetFormData", this.postGetFormDataFun);
  176. module.addHistoryLog( "delete", null, null, null, null, module.getHtml() );
  177. module.destroy();
  178. module.form.selected();
  179. module.form.designer.shortcut = true;
  180. this.close();
  181. }, function(){
  182. module.form.designer.shortcut = true;
  183. this.close();
  184. }, null);
  185. },
  186. getLevel : function(){
  187. return ( this.form.options.level1 || 0 ) + 1;
  188. },
  189. getLevel1Subform : function(){
  190. return this.form.level1Subform || this;
  191. },
  192. getSubformSelector : function(){
  193. return this.subformSelector || this.form.subformSelector;
  194. },
  195. getSubformSelectedValue : function(){
  196. return this.subformSelectedValue || this.form.subformSelectedValue;
  197. },
  198. checkSubformNested : function( id ){
  199. if( this.form.options.parentformIdList ){
  200. return !this.form.options.parentformIdList.contains( id );
  201. }
  202. return true;
  203. },
  204. isSubformUnique : function( id , oldId ){
  205. if( !this.form.topform )return true;
  206. if( !this.getLevel1Subform() || !this.getLevel1Subform().json )return true;
  207. return this.form.topform.isSubformUnique( id, this.getLevel1Subform().json.id, oldId );
  208. },
  209. getParentformIdList : function(){
  210. var parentformIdList;
  211. if( this.form.options.parentformIdList ){
  212. parentformIdList = Array.clone( this.form.options.parentformIdList );
  213. parentformIdList.push( this.form.json.id )
  214. }else{
  215. parentformIdList = [ this.form.json.id ];
  216. }
  217. return parentformIdList;
  218. },
  219. refreshSubform: function(){
  220. if (this.json.subformSelected && this.json.subformSelected!=="none" && this.json.subformType!=="script"){
  221. MWF.Actions.get("x_processplatform_assemble_designer").getForm(this.json.subformSelected, function(json){
  222. if (this.subformData.updateTime!==json.data.updateTime){
  223. var select = null;
  224. if (this.property){
  225. select = $(this.property.data.pid+"selectSubform").getElement("select");
  226. }
  227. this.clearSubformList(this.json.subformSelected);
  228. this.reloadSubform(json.data, select, "");
  229. }
  230. }.bind(this));
  231. }
  232. },
  233. loadIcon: function(){
  234. this.iconNode = new Element("div", {
  235. "styles": this.css.iconNode
  236. }).inject(this.node);
  237. new Element("div", {
  238. "styles": this.css.iconNodeIcon
  239. }).inject(this.iconNode);
  240. new Element("div", {
  241. "styles": this.css.iconNodeText,
  242. "text": "Subform"
  243. }).inject(this.iconNode);
  244. },
  245. _loadNodeStyles: function(){
  246. this.iconNode = this.node.getElement("div").setStyles(this.css.iconNode);
  247. this.iconNode.getFirst("div").setStyles(this.css.iconNodeIcon);
  248. this.iconNode.getLast("div").setStyles(this.css.iconNodeText);
  249. },
  250. _setEditStyle_custom : function(name, input, oldValue){
  251. if (name==="subformSelected"){
  252. if (this.json.subformSelected!==oldValue){
  253. this.redoSelectedSubform(name, input, oldValue);
  254. }
  255. }
  256. if (name==="subformType"){
  257. if (this.json.subformType!==oldValue){
  258. if (this.json.subformType !== "script"){
  259. this.redoSelectedSubform(name, $(this.property.data.pid+"selectSubform").getElement("select"), "");
  260. }
  261. if (this.json.subformType === "script"){
  262. this.subformData = null;
  263. this.clearSubformList(this.json.subformSelected);
  264. this.node.empty();
  265. this.loadIcon();
  266. }
  267. }
  268. }
  269. },
  270. redoSelectedSubform: function(name, input, oldValue){
  271. if (this.json.subformSelected==="none") this.json.subformSelected="";
  272. if (this.json.subformSelected && this.json.subformSelected!=="none"){
  273. if(input)this.subformSelector = input;
  274. if( !input )input = this.getSubformSelector();
  275. if( oldValue )this.subformSelectedValue = oldValue;
  276. if( !oldValue )oldValue = this.getSubformSelectedValue() || "";
  277. var level1Subform = this.getLevel1Subform();
  278. if( !this.checkSubformNested(this.json.subformSelected) ){
  279. //var p = level1Subform.node.getPosition(document.body);
  280. //this.form.designer.alert("error", {
  281. // "event": {
  282. // "x": p.x + 150,
  283. // "y": p.y + 80
  284. // }
  285. //}, this.form.designer.lp.subformNestedTitle, this.form.designer.lp.subformNestedInfor, 400, 120);
  286. this.form.designer.notice( this.form.designer.lp.subformNestedInfor, "error", level1Subform.node );
  287. level1Subform.json.subformSelected = oldValue;
  288. if (input) {
  289. for (var i = 0; i < input.options.length; i++) {
  290. if (input.options[i].value === oldValue || (input.options[i].value==="none" && !oldValue ) ) {
  291. input.options[i].set("selected", true);
  292. break;
  293. }
  294. }
  295. }
  296. if( !oldValue ){
  297. level1Subform.node.empty();
  298. level1Subform.loadIcon();
  299. }else{
  300. level1Subform.refreshSubform();
  301. }
  302. }else if( !this.isSubformUnique( this.json.subformSelected , oldValue ) ){
  303. //if (this.form.subformList && this.form.subformList[this.json.subformSelected] ){
  304. //var p = (input) ? input.getPosition() : this.node.getPosition();
  305. //var p = level1Subform.node.getPosition(document.body);
  306. //this.form.designer.alert("error", {
  307. // "event": {
  308. // "x": p.x+150,
  309. // "y": p.y+80
  310. // }
  311. //}, this.form.designer.lp.subformConflictTitle, this.form.designer.lp.subformConflictInfor, 400, 120);
  312. this.form.designer.notice( this.form.designer.lp.subformConflictInfor, "error", level1Subform.node );
  313. level1Subform.json.subformSelected = oldValue;
  314. if (input){
  315. for (var i=0; i<input.options.length; i++){
  316. if (input.options[i].value===oldValue || (input.options[i].value==="none" && !oldValue ) ){
  317. input.options[i].set("selected", true);
  318. break;
  319. }
  320. }
  321. }
  322. if( !oldValue ){
  323. level1Subform.node.empty();
  324. level1Subform.loadIcon();
  325. }else{
  326. level1Subform.refreshSubform();
  327. }
  328. }else{
  329. MWF.Actions.get("x_processplatform_assemble_designer").getForm(this.json.subformSelected, function(json){
  330. this.reloadSubform(json.data, input, oldValue);
  331. }.bind(this));
  332. }
  333. }else{
  334. this.subformData = null;
  335. this.clearSubformList(oldValue);
  336. this.node.empty();
  337. this.loadIcon();
  338. }
  339. },
  340. clearSubformList: function(formName){
  341. if (!this.form.subformList) this.form.subformList = {};
  342. if (formName) if (this.form.subformList[formName]) delete this.form.subformList[formName];
  343. if( !this.form.topform )this.form.topform = this.form;
  344. this.form.topform.clearSubformList( this.getLevel1Subform().json.id );
  345. },
  346. addSubformList: function(){
  347. if (!this.form.subformList) this.form.subformList = {};
  348. this.form.subformList[this.json.subformSelected] = Object.clone(this.subformData.json);
  349. if( !this.form.topform )this.form.topform = this.form;
  350. this.form.topform.addSubformList( this.getLevel1Subform().json.id, this.json.subformSelected );
  351. },
  352. getSubformData: function(data){
  353. var subformDataStr = null;
  354. if (this.form.options.mode !== "Mobile"){
  355. subformDataStr = data.data;
  356. }else{
  357. subformDataStr = data.mobileData;
  358. }
  359. this.subformData = null;
  360. if (subformDataStr){
  361. this.subformData = JSON.decode(MWF.decodeJsonString(subformDataStr));
  362. this.subformData.updateTime = data.updateTime;
  363. }
  364. },
  365. reloadSubform: function(data, input, oldValue){
  366. this.getSubformData(data);
  367. if (this.subformData){
  368. var oldSubformData = (this.form.subformList && oldValue) ? this.form.subformList[oldValue] : null;
  369. this.clearSubformList(oldValue);
  370. if (this.checkSubform(data, input)){
  371. this.node.empty();
  372. this.loadSubform( null );
  373. this.addSubformList();
  374. }else{
  375. if (oldSubformData){
  376. if (!this.form.subformList) this.form.subformList = {};
  377. this.form.subformList[oldValue] = oldSubformData;
  378. }else{
  379. this.clearSubformList(oldValue);
  380. this.node.empty();
  381. this.loadIcon();
  382. }
  383. this.json.subformSelected = oldValue;
  384. if (!oldValue){
  385. if (input) input.options[0].set("selected", true);
  386. }else{
  387. if (input){
  388. for (var i=0; i<input.options.length; i++){
  389. if (input.options[i].value===oldValue){
  390. input.options[i].set("selected", true);
  391. break;
  392. }
  393. }
  394. }
  395. }
  396. }
  397. }else{
  398. this.json.subformSelected = oldValue;
  399. if (input){
  400. if (!oldValue){
  401. input.options[0].set("selected", true);
  402. }else{
  403. for (var i=0; i<input.options.length; i++){
  404. if (input.options[i].value===oldValue){
  405. input.options[i].set("selected", true);
  406. break;
  407. }
  408. }
  409. }
  410. }
  411. }
  412. },
  413. regetSubformData: function(){
  414. var flag = false;
  415. if (this.json.subformSelected && this.json.subformSelected!=="none" && this.json.subformType!=="script"){
  416. MWF.Actions.get("x_processplatform_assemble_designer").getForm(this.json.subformSelected, function(json){
  417. if (!this.subformData || this.subformData.updateTime!==json.data.updateTime){
  418. this.getSubformData(json.data);
  419. flag = true;
  420. }
  421. }.bind(this), null, false);
  422. }
  423. return flag;
  424. },
  425. getConflictFields: function(){
  426. var moduleNames = [];
  427. if (this.subformData){
  428. Object.each(this.subformData.json.moduleList, function(o, key){
  429. var check = this.form.checkModuleId(key, o.type, this.subformData.json.id);
  430. if (check.fieldConflict){
  431. moduleNames.push(key)
  432. }else if (check.elementConflict){
  433. o.changeId = this.json.id+"_"+key;
  434. }
  435. }.bind(this));
  436. }
  437. return moduleNames;
  438. },
  439. checkSubform: function(data, input){
  440. var moduleNames = this.getConflictFields();
  441. // Object.each(this.subformData.json.moduleList, function(o, key){
  442. // var check = this.form.checkModuleId(key, o.type, this.subformData.json.id);
  443. // if (check.fieldConflict){
  444. // moduleNames.push(key)
  445. // }else if (check.elementConflict){
  446. // o.changeId = this.json.id+"_"+key;
  447. // }
  448. // }.bind(this));
  449. if (moduleNames.length){
  450. var txt = this.form.designer.lp.subformNameConflictInfor;
  451. txt = txt.replace("{name}", moduleNames.join(", "));
  452. //var p = (input) ? input.getPosition() : this.node.getPosition();
  453. // var p = this.node.getPosition(document.body);
  454. // this.form.designer.alert("error", {
  455. // "event": {
  456. // "x": p.x+150,
  457. // "y": p.y+80
  458. // }
  459. // }, this.form.designer.lp.subformNameConflictTitle, txt, 400, 200);
  460. this.form.designer.notice(txt, "error", this.node);
  461. return false;
  462. }
  463. return true;
  464. },
  465. loadSubform: function(data) {
  466. this.subformData.json.style = this.form.json.style;
  467. this.subformData.json.properties = this.form.json.properties;
  468. this.subformData.json.jsheader = {"code": "", "html": ""};
  469. this.subformData.json.events = {};
  470. this.subformData.json.formStyleType = this.form.json.formStyleType;
  471. //this.subformData.json.id = this.json.id;
  472. this.subformModule = new MWF.FCSubform.Form(this.form, this.node, {
  473. mode : this.form.options.mode,
  474. parentformIdList : this.getParentformIdList(),
  475. level : this.getLevel()
  476. });
  477. this.subformModule.subformSelector = this.getSubformSelector();
  478. this.subformModule.subformSelectedValue = this.getSubformSelectedValue();
  479. this.subformModule.level1Subform = this.getLevel1Subform();
  480. this.subformModule.load(this.subformData);
  481. //this.createRefreshNode();
  482. },
  483. destroy: function(){
  484. this.form.moduleList.erase(this);
  485. this.form.moduleNodeList.erase(this.node);
  486. this.form.moduleElementNodeList.erase(this.node);
  487. this.form.subformModuleList.erase(this);
  488. this.clearSubformList(this.json.subformSelected);
  489. this.node.destroy();
  490. this.actionArea.destroy();
  491. delete this.form.json.moduleList[this.json.id];
  492. this.json = null;
  493. delete this.json;
  494. this.treeNode.destroy();
  495. }
  496. });
  497. MWF.xApplication.process.FormDesigner.Module.Subform.Form = new Class({
  498. Extends: MWF.FCForm,
  499. initialize: function(form, container, options){
  500. this.setOptions(options);
  501. this.topform = form.topform || form;
  502. this.parentform = form;
  503. this.css = this.parentform.css;
  504. this.container = container;
  505. this.form = this;
  506. this.isSubform = true;
  507. this.moduleType = "subform";
  508. this.moduleList = [];
  509. this.moduleNodeList = [];
  510. this.moduleContainerNodeList = [];
  511. this.moduleElementNodeList = [];
  512. this.moduleComponentNodeList = [];
  513. // this.moduleContainerList = [];
  514. this.dataTemplate = {};
  515. this.designer = this.parentform.designer;
  516. this.selectedModules = [];
  517. },
  518. load : function(data){
  519. this.data = data;
  520. this.json = data.json;
  521. this.html = data.html;
  522. this.json.mode = this.options.mode;
  523. this.container.set("html", this.html);
  524. this.loadDomModules();
  525. //this.setCustomStyles();
  526. //this.node.setProperties(this.json.properties);
  527. //this.setNodeEvents();
  528. if (this.options.mode==="Mobile"){
  529. //if (oldStyleValue) this._setEditStyle("formStyleType", null, oldStyleValue);
  530. }
  531. },
  532. loadDomModules: function(){
  533. this.node = this.container.getFirst();
  534. this.node.set("id", this.json.id);
  535. this.node.setStyles((this.options.mode==="Mobile") ? this.css.formMobileNode : this.css.formNode);
  536. this.node.store("module", this);
  537. this.loadDomTree();
  538. },
  539. loadDomTree: function(){
  540. this.createFormTreeNode();
  541. this.parseModules(this, this.node);
  542. },
  543. createFormTreeNode: function(){
  544. this.treeNode = {
  545. "insertChild": function(){return this;},
  546. "appendChild": function(){return this;},
  547. "selectNode": function(){},
  548. "node": null,
  549. "parentNode": {}
  550. };
  551. this.treeNode.module = this;
  552. }
  553. });