Form.js 19 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521
  1. MWF.xApplication.cms.FormDesigner.Module = MWF.xApplication.cms.FormDesigner.Module || {};
  2. MWF.xDesktop.requireApp("process.FormDesigner", "Module.Form", null, false);
  3. MWF.xDesktop.requireApp("cms.FormDesigner", "Property", null, false);
  4. MWF.xApplication.cms.FormDesigner.Module.Form = MWF.CMSFCForm = new Class({
  5. Extends: MWF.FCForm,
  6. options: {
  7. "style": "default",
  8. "propertyPath": "../x_component_cms_FormDesigner/Module/Form/form.html",
  9. "mode": "PC",
  10. "fields": ["Calendar", "Checkbox", "Datagrid", "Datagrid$Title", "Datagrid$Data", "Datatable", "Datatable$Title", "Datatable$Data",
  11. "Datatemplate", "Htmleditor", "TinyMCEEditor", "Number", "Currency", "Office", "Orgfield", "Personfield", "Readerfield", "Authorfield", "Org",
  12. "Reader", "Author", "Radio", "Select", "Textarea", "Textfield", "Address","Combox",
  13. "Elcascader","Elcheckbox","Elcolorpicker", "Eldate", "Eldatetime", "Elinput", "Elnumber", "Elradio", "Elrate", "Elselect", "Elslider", "Elswitch", "ElTime"],
  14. "injectActions" : [
  15. {
  16. "name" : "top",
  17. "styles" : "injectActionTop",
  18. "event" : "click",
  19. "action" : "injectTop",
  20. "title": MWF.APPFD.LP.formAction["insertTop"]
  21. },
  22. {
  23. "name" : "bottom",
  24. "styles" : "injectActionBottom",
  25. "event" : "click",
  26. "action" : "injectBottom",
  27. "title": MWF.APPFD.LP.formAction["insertBottom"]
  28. }
  29. ]
  30. },
  31. initialize: function(designer, container, options){
  32. this.setOptions(options);
  33. this.path = "../x_component_process_FormDesigner/Module/Form/";
  34. this.cssPath = "../x_component_process_FormDesigner/Module/Form/"+this.options.style+"/css.wcss";
  35. this._loadCss();
  36. this.container = null;
  37. this.form = this;
  38. this.moduleType = "form";
  39. this.moduleList = [];
  40. this.moduleNodeList = [];
  41. this.moduleContainerNodeList = [];
  42. this.moduleElementNodeList = [];
  43. this.moduleComponentNodeList = [];
  44. // this.moduleContainerList = [];
  45. this.dataTemplate = {};
  46. this.designer = designer;
  47. this.container = container;
  48. this.selectedModules = [];
  49. },
  50. // 移动端表单加载工具栏
  51. loadMobileActionToos: function() {
  52. if (this.options.mode==="Mobile"){
  53. if (!this.json.defaultTools){
  54. this.json.defaultTools = o2.JSON.get("../x_component_cms_FormDesigner/Module/Form/toolbars.json", null,false);
  55. }
  56. if (!this.json.tools) this.json.tools=[];
  57. }
  58. },
  59. //loadTemplateStyles : function( file, callback ){
  60. // debugger;
  61. // if( !file ){
  62. // if (callback) callback({});
  63. // return;
  64. // }
  65. // this.templateStylesList = this.templateStylesList || {};
  66. // if( this.templateStylesList[file] ){
  67. // if (callback) callback(this.templateStylesList[file]);
  68. // return;
  69. // }
  70. // var stylesUrl = "../x_component_cms_FormDesigner/Module/Form/skin/"+file;
  71. // MWF.getJSON(stylesUrl,{
  72. // "onSuccess": function(responseJSON){
  73. // this.templateStylesList[file] = responseJSON;
  74. // if (callback) callback(responseJSON);
  75. // }.bind(this),
  76. // "onRequestFailure": function(){
  77. // if (callback) callback({});
  78. // }.bind(this),
  79. // "onError": function(){
  80. // if (callback) callback({});
  81. // }.bind(this)
  82. // }
  83. // );
  84. //},
  85. loadTemplateStyleFile : function(file, callback ){
  86. if( !file ){
  87. if (callback) callback({});
  88. return;
  89. }
  90. var stylesUrl = "../x_component_cms_FormDesigner/Module/Form/skin/"+file;
  91. MWF.getJSON(stylesUrl,{
  92. "onSuccess": function(responseJSON){
  93. //this.templateStylesList[file] = responseJSON;
  94. if (callback) callback(responseJSON);
  95. }.bind(this),
  96. "onRequestFailure": function(){
  97. if (callback) callback({});
  98. }.bind(this),
  99. "onError": function(){
  100. if (callback) callback({});
  101. }.bind(this)
  102. }
  103. );
  104. },
  105. loadTemplateExtendStyleFile : function(extendFile, callback ){
  106. if( !extendFile ){
  107. if (callback) callback({});
  108. return;
  109. }
  110. var stylesUrl = "../x_component_cms_FormDesigner/Module/Form/skin/"+extendFile;
  111. MWF.getJSON(stylesUrl,{
  112. "onSuccess": function(responseJSON){
  113. //this.templateStylesList[file] = responseJSON;
  114. if (callback) callback(responseJSON);
  115. }.bind(this),
  116. "onRequestFailure": function(){
  117. if (callback) callback({});
  118. }.bind(this),
  119. "onError": function(){
  120. if (callback) callback({});
  121. }.bind(this)
  122. }
  123. );
  124. },
  125. loadStylesList: function(callback){
  126. //var stylesUrl = "../x_component_process_FormDesigner/Module/Form/template/"+((this.options.mode=="Mobile") ? "mobileStyles": "styles")+".json";
  127. //var stylesUrl = "../x_component_process_FormDesigner/Module/Form/template/"+((this.options.mode=="Mobile") ? "styles": "styles")+".json";
  128. var configUrl = "../x_component_cms_FormDesigner/Module/Form/skin/config.json";
  129. MWF.getJSON(configUrl,{
  130. "onSuccess": function(responseJSON){
  131. this.stylesList = responseJSON;
  132. if (callback) callback(this.stylesList);
  133. }.bind(this),
  134. "onRequestFailure": function(){
  135. this.stylesList = {};
  136. if (callback) callback(this.stylesList);
  137. }.bind(this),
  138. "onError": function(){
  139. this.stylesList = {};
  140. if (callback) callback(this.stylesList);
  141. }.bind(this)
  142. }
  143. );
  144. },
  145. //loadStylesList: function(callback){
  146. //var stylesUrl = "../x_component_cms_FormDesigner/Module/Form/template/"+((this.options.mode=="Mobile") ? "styles": "styles")+".json";
  147. //MWF.getJSON(stylesUrl,{
  148. // "onSuccess": function(responseJSON){
  149. // this.stylesList= responseJSON;
  150. // if (callback) callback(this.stylesList);
  151. // }.bind(this),
  152. // "onRequestFailure": function(){
  153. // this.stylesList = {};
  154. // if (callback) callback(this.stylesList);
  155. // }.bind(this),
  156. // "onError": function(){
  157. // this.stylesList = {};
  158. // if (callback) callback(this.stylesList);
  159. // }.bind(this)
  160. // }
  161. //);
  162. //},
  163. loadModule: function(json, dom, parent){
  164. var module, className;
  165. if( !json ){
  166. className = ( dom.get("MWFType") || "div" ).capitalize();
  167. this.getTemplateData(className, function(data){
  168. var moduleData = Object.clone(data);
  169. moduleData.id = dom.get("id");
  170. this.json.moduleList[dom.get("id")] = moduleData;
  171. module = new MWF["CMSFC"+className](this);
  172. module.load(moduleData, dom, parent);
  173. }.bind(this), false);
  174. return module;
  175. }else if( MWF["CMSFC"+json.type] ){
  176. className = json.type.capitalize();
  177. this.getTemplateData(className, function(data){
  178. var moduleData = Object.clone(data);
  179. Object.merge(moduleData, json);
  180. Object.merge(json, moduleData);
  181. module = new MWF["CMSFC"+json.type](this);
  182. module.load(json, dom, parent);
  183. }.bind(this), false);
  184. return module;
  185. }else{
  186. className = json.type.capitalize();
  187. this.getTemplateData(className, function(data){
  188. var moduleData = Object.clone(data);
  189. Object.merge(moduleData, json);
  190. Object.merge(json, moduleData);
  191. module = new MWF["CMSFCDiv"](this);
  192. module.load(json, dom, parent);
  193. }.bind(this), false);
  194. return module;
  195. }
  196. },
  197. createModule: function(className, e){
  198. //var classPre = MWF.CMSFD.RedesignModules.indexOf( className.toLowerCase() ) != -1 ? "CMSFC" : "FC";
  199. var classPre = "CMSFC";
  200. this.getTemplateData(className, function(data){
  201. var moduleData = Object.clone(data);
  202. var newTool = new MWF[classPre+className](this);
  203. newTool.create(moduleData, e);
  204. }.bind(this));
  205. },
  206. getTemplateData: function(className, callback, async){
  207. if (this.dataTemplate[className]){
  208. if (callback) callback(this.dataTemplate[className]);
  209. }else{
  210. var _className = className.indexOf("Process") === 0 ? className.substr( 7, className.length - 1 ) : className;
  211. var path = MWF.CMSFD.ResetTemplateModules.indexOf( className.toLowerCase() ) != -1 ? "x_component_cms_FormDesigner" : "x_component_process_FormDesigner";
  212. var templateUrl = "../"+path+"/Module/"+_className+"/template.json";
  213. MWF.getJSON(templateUrl, function(responseJSON, responseText){
  214. this.dataTemplate[className] = responseJSON;
  215. if (callback) callback(responseJSON);
  216. }.bind(this), async);
  217. }
  218. },
  219. showProperty: function(callback){
  220. if (!this.property){
  221. this.property = new MWF.xApplication.cms.FormDesigner.Property(this, this.designer.propertyContentArea, this.designer, {
  222. "path": this.options.propertyPath,
  223. "onPostLoad": function(){
  224. this.property.show();
  225. if (callback) callback();
  226. }.bind(this)
  227. });
  228. this.property.load();
  229. }else{
  230. this.property.show();
  231. }
  232. },
  233. save: function(callback){
  234. this.designer.saveForm();
  235. //this._getFormData();
  236. //this.designer.actions.saveForm(this.data, function(responseJSON){
  237. // this.form.designer.notice(MWF.APPFD.LP.notice["save_success"], "ok", null, {x: "left", y:"bottom"});
  238. //
  239. // //this.json.id = responseJSON.data;
  240. // if (!this.json.name) this.treeNode.setText("<"+this.json.type+"> "+this.json.id);
  241. // this.treeNode.setTitle(this.json.id);
  242. // this.node.set("id", this.json.id);
  243. //
  244. // if (callback) callback();
  245. // //this.reload(responseJSON.data);
  246. //}.bind(this));
  247. },
  248. implode: function(){
  249. MWF.xDesktop.requireApp("cms.FormDesigner", "Import", function(){
  250. MWF.CMSFormImport.create("O2", this);
  251. }.bind(this));
  252. },
  253. implodeHTML: function(){
  254. MWF.xDesktop.requireApp("cms.FormDesigner", "Import", function(){
  255. MWF.CMSFormImport.create("html", this, {"type": "process"});
  256. }.bind(this));
  257. },
  258. implodeOffice: function(){
  259. MWF.xDesktop.requireApp("cms.FormDesigner", "Import", function(){
  260. MWF.CMSFormImport.create("office", this);
  261. }.bind(this));
  262. },
  263. showFormVersion: function(){
  264. this.versionNode = new Element("div");
  265. this.dlg = o2.DL.open({
  266. "title": MWF.CMSFD.LP.version["title"],
  267. "content": this.versionNode,
  268. "offset": {"y": -100},
  269. "isMax": false,
  270. "width": 500,
  271. "height": 300,
  272. "buttonList": [
  273. {
  274. "type": "cancel",
  275. "text": MWF.CMSFD.LP.version["close"],
  276. "action": function(){ this.close(); }
  277. }
  278. ],
  279. "onPostShow": function(){
  280. this.loadVersionList();
  281. }.bind(this),
  282. "onPostClose": function(){
  283. this.dlg = null;
  284. }.bind(this)
  285. });
  286. },
  287. loadVersionList : function(){
  288. var tableHtml = "<table width='100%' cellspacing='0' cellpadding='3' style='margin-top: 1px'><tr>" +
  289. "<th>"+MWF.CMSFD.LP.version["no"]+"</th>" +
  290. "<th>"+MWF.CMSFD.LP.version["person"]+"</th>" +
  291. "<th>"+MWF.CMSFD.LP.version["updateTime"]+"</th>" +
  292. "<th>"+MWF.CMSFD.LP.version["op"]+"</th>" +
  293. "</tr></table>";
  294. this.versionNode.set("html", tableHtml);
  295. this.versionTable = this.versionNode.getElement("table");
  296. o2.Actions.load("x_cms_assemble_control").FormVersionAction.listWithForm(this.form.json.id, function(json){
  297. this.versionList = json.data;
  298. this.versionList.each(function (version,index) {
  299. var node = new Element("tr").inject(this.versionTable);
  300. var html = "<td>"+(index+1)+"</td>" +
  301. "<td>"+version.person+"</td>" +
  302. "<td>"+version.updateTime+"</td>" +
  303. "<td></td>";
  304. node.set("html", html);
  305. var actionNode = new Element("div",{"styles":{
  306. "width": "60px",
  307. "padding": "0px 3px",
  308. "border-radius": "20px",
  309. "cursor" : "pointer",
  310. "color": "#ffffff",
  311. "background-color": "#4A90E2",
  312. "float": "left",
  313. "margin-right": "2px",
  314. "text-align": "center",
  315. "font-weight": "100"
  316. }}).inject(node.getLast("td"));
  317. actionNode.set("text", MWF.CMSFD.LP.version["resume"]);
  318. actionNode.addEvent("click",function (e) {
  319. var _self = this;
  320. this.designer.confirm("warn", e, MWF.CMSFD.LP.version["resumeConfirm"], MWF.CMSFD.LP.version["resumeInfo"], 460, 120, function(){
  321. _self.resumeForm(version);
  322. this.close();
  323. }, function(){
  324. this.close();
  325. });
  326. }.bind(this));
  327. }.bind(this))
  328. }.bind(this));
  329. },
  330. resumeForm : function(version){
  331. o2.Actions.load("x_cms_assemble_control").FormVersionAction.get(version.id, function( json ){
  332. var formData = JSON.parse(json.data.data);
  333. //this.action.FormAction.update(version.form, formData,function( json ){
  334. this.designer.notice(MWF.CMSFD.LP.version["resumeSuccess"]);
  335. var data = JSON.decode(MWF.decodeJsonString(formData.data));
  336. data.isNewForm = false;
  337. this.reload(data);
  338. this.dlg.close();
  339. //}.bind(this), null, false);
  340. }.bind(this), null, false);
  341. },
  342. setPropertiesOrStyles: function(name){
  343. if (name=="styles"){
  344. this.setCustomStyles();
  345. }
  346. if (name=="properties"){
  347. this.node.setProperties(this.json.properties);
  348. }
  349. },
  350. setCustomStyles: function(){
  351. var border = this.node.getStyle("border");
  352. this.node.clearStyles();
  353. this.node.setStyles((this.options.mode==="Mobile") ? this.css.formMobileNode : this.css.formNode);
  354. var y = this.container.getStyle("height");
  355. y = (y) ? y.toInt()-2 : this.container.getSize().y-2;
  356. this.node.setStyle("min-height", ""+y+"px");
  357. if (this.initialStyles) this.node.setStyles(this.initialStyles);
  358. this.node.setStyle("border", border);
  359. Object.each(this.json.styles, function(value, key){
  360. var reg = /^border\w*/ig;
  361. if (!key.test(reg)){
  362. this.node.setStyle(key, value);
  363. }
  364. }.bind(this));
  365. },
  366. //_setEditStyle: function(name, obj, oldValue){
  367. // if (name=="name"){
  368. // var title = this.json.name || this.json.id;
  369. // this.treeNode.setText("<"+this.json.type+"> "+title+" ["+this.options.mode+"] ");
  370. // }
  371. // if (name=="id"){
  372. // if (!this.json.name) this.treeNode.setText("<"+this.json.type+"> "+this.json.id+" ["+this.options.mode+"] ");
  373. // this.treeNode.setTitle(this.json.id);
  374. // this.node.set("id", this.json.id);
  375. // }
  376. // if (name=="formStyleType"){
  377. // this.templateStyles = (this.stylesList && this.json.formStyleType) ? this.stylesList[this.json.formStyleType] : null;
  378. // if (oldValue) {
  379. // var oldTemplateStyles = this.stylesList[oldValue];
  380. // if (oldTemplateStyles){
  381. // if (oldTemplateStyles["form"]) this.clearTemplateStyles(oldTemplateStyles["form"]);
  382. // }
  383. // }
  384. // if (this.templateStyles){
  385. // if (this.templateStyles["form"]) this.setTemplateStyles(this.templateStyles["form"]);
  386. // }
  387. // this.setAllStyles();
  388. //
  389. // this.moduleList.each(function(module){
  390. // if (oldTemplateStyles){
  391. // module.clearTemplateStyles(oldTemplateStyles[module.moduleName]);
  392. // }
  393. // module.setStyleTemplate();
  394. // module.setAllStyles();
  395. // }.bind(this));
  396. // }
  397. // if (name==="css"){
  398. // this.reloadCss();
  399. // }
  400. // this._setEditStyle_custom(name, obj, oldValue);
  401. //},
  402. _setEditStyle: function(name, obj, oldValue){
  403. if (name=="name"){
  404. var title = this.json.name || this.json.id;
  405. this.treeNode.setText("<"+this.json.type+"> "+title+" ["+this.options.mode+"] ");
  406. }
  407. if (name=="id"){
  408. if (!this.json.name) this.treeNode.setText("<"+this.json.type+"> "+this.json.id+" ["+this.options.mode+"] ");
  409. this.treeNode.setTitle(this.json.id);
  410. this.node.set("id", this.json.id);
  411. }
  412. if (name=="formStyleType"){
  413. var file = (this.stylesList && this.json.formStyleType) ? this.stylesList[this.json.formStyleType].file : null;
  414. var extendFile = (this.stylesList && this.json.formStyleType) ? this.stylesList[this.json.formStyleType].extendFile : null;
  415. this.loadTemplateStyles( file, extendFile, function( templateStyles ){
  416. //this.templateStyles = (this.stylesList && this.json.formStyleType) ? this.stylesList[this.json.formStyleType] : null;
  417. this.templateStyles = templateStyles;
  418. var oldFile, oldExtendFile;
  419. if( oldValue && this.stylesList[oldValue] ){
  420. oldFile = this.stylesList[oldValue].file;
  421. oldExtendFile = this.stylesList[oldValue].extendFile;
  422. }
  423. this.loadTemplateStyles( oldFile, oldExtendFile, function( oldTemplateStyles ){
  424. //if (oldValue) {
  425. // var oldTemplateStyles = this.stylesList[oldValue];
  426. // if (oldTemplateStyles){
  427. // if (oldTemplateStyles["form"]) this.clearTemplateStyles(oldTemplateStyles["form"]);
  428. // }
  429. //}
  430. this.json.styleConfig = (this.stylesList && this.json.formStyleType) ? this.stylesList[this.json.formStyleType] : null;
  431. if (oldTemplateStyles["form"]) this.clearTemplateStyles(oldTemplateStyles["form"]);
  432. if (this.templateStyles["form"]) this.setTemplateStyles(this.templateStyles["form"]);
  433. this.setAllStyles();
  434. this.moduleList.each(function(module){
  435. if (oldTemplateStyles[module.moduleName]){
  436. module.clearTemplateStyles(oldTemplateStyles[module.moduleName]);
  437. }
  438. module.setStyleTemplate();
  439. module.setAllStyles();
  440. }.bind(this));
  441. }.bind(this))
  442. }.bind(this))
  443. }
  444. if (name==="css"){
  445. this.reloadCss();
  446. }
  447. this._setEditStyle_custom(name, obj, oldValue);
  448. },
  449. parseCSS: function(css){
  450. var rex = /(url\(.*\))/g;
  451. var match;
  452. while ((match = rex.exec(css)) !== null) {
  453. var pic = match[0];
  454. var len = pic.length;
  455. var s = pic.substring(pic.length-2, pic.length-1);
  456. var n0 = (s==="'" || s==="\"") ? 5 : 4;
  457. var n1 = (s==="'" || s==="\"") ? 2 : 1;
  458. pic = pic.substring(n0, pic.length-n1);
  459. if ((pic.indexOf("x_processplatform_assemble_surface")!=-1 || pic.indexOf("x_portal_assemble_surface")!=-1)){
  460. var host1 = MWF.Actions.getHost("x_processplatform_assemble_surface");
  461. var host2 = MWF.Actions.getHost("x_portal_assemble_surface");
  462. if (pic.indexOf("/x_processplatform_assemble_surface")!==-1){
  463. pic = pic.replace("/x_processplatform_assemble_surface", host1+"/x_processplatform_assemble_surface");
  464. }else if (pic.indexOf("x_processplatform_assemble_surface")!==-1){
  465. pic = pic.replace("x_processplatform_assemble_surface", host1+"/x_processplatform_assemble_surface");
  466. }
  467. if (pic.indexOf("/x_portal_assemble_surface")!==-1){
  468. pic = pic.replace("/x_portal_assemble_surface", host2+"/x_portal_assemble_surface");
  469. }else if (pic.indexOf("x_portal_assemble_surface")!==-1){
  470. pic = pic.replace("x_portal_assemble_surface", host2+"/x_portal_assemble_surface");
  471. }
  472. pic = o2.filterUrl(pic);
  473. }
  474. pic = "url('"+pic+"')";
  475. var len2 = pic.length;
  476. css = css.substring(0, match.index) + pic + css.substring(rex.lastIndex, css.length);
  477. rex.lastIndex = rex.lastIndex + (len2-len);
  478. }
  479. return css;
  480. },
  481. preview: function(){
  482. MWF.xDesktop.requireApp("cms.FormDesigner", "Preview", function(){
  483. if (this.options.mode=="Mobile"){
  484. this.previewBox = new MWF.xApplication.cms.FormDesigner.Preview(this, {"size": {"x": "400", "y": 580}});
  485. }else{
  486. this.previewBox = new MWF.xApplication.cms.FormDesigner.Preview(this);
  487. }
  488. this.previewBox.load();
  489. }.bind(this));
  490. }
  491. });