$ElComponent.js 3.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153
  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.$ElComponent = MWF.FC$ElComponent = new Class({
  4. Extends: MWF.FC$Component,
  5. Implements: [Options, Events],
  6. _initModuleType: function(){
  7. this.className = "ElComponent"
  8. this.moduleType = "component";
  9. this.moduleName = "elComponent";
  10. },
  11. initialize: function(form, options){
  12. debugger;
  13. this.setOptions(options);
  14. this._initModuleType();
  15. this.path = "../x_component_process_FormDesigner/Module/"+this.className+"/";
  16. this.cssPath = "../x_component_process_FormDesigner/Module/"+this.className+"/"+this.options.style+"/css.wcss";
  17. this._loadCss();
  18. this.form = form;
  19. this.container = null;
  20. this.containerNode = null;
  21. this.isPropertyLoaded = false;
  22. },
  23. showProperty: function(callback){
  24. if (!this.property){
  25. this.property = new MWF.xApplication.process.FormDesigner.Property(this, this.form.designer.propertyContentArea, this.form.designer, {
  26. "path": this.options.propertyPath,
  27. "onPostLoad": function(){
  28. this.property.show();
  29. this.isPropertyLoaded = true;
  30. if (callback) callback();
  31. }.bind(this)
  32. });
  33. this.property.load();
  34. }else{
  35. this.property.show();
  36. if (callback) callback();
  37. }
  38. },
  39. _createMoveNode: function(){
  40. this.moveNode = new Element("div", {
  41. "MWFType": this.moduleName,
  42. "id": this.json.id,
  43. "styles": this.css.moduleNodeMove,
  44. "text": this.json.name || this.json.id,
  45. "events": {
  46. "selectstart": function(){
  47. return false;
  48. }
  49. }
  50. }).inject(this.form.container);
  51. },
  52. _createNode: function(){
  53. this.node = new Element("div", {
  54. "MWFType": this.moduleName,
  55. "id": this.json.id,
  56. "styles": this.css.moduleNode,
  57. "events": {
  58. "selectstart": function(){
  59. return false;
  60. }
  61. }
  62. });
  63. },
  64. _initModule: function(){
  65. if (!this.initialized){
  66. if (this.json.initialized!=="yes") this.setStyleTemplate();
  67. this._resetModuleDomNode();
  68. }
  69. },
  70. _loadVue: function(callback){
  71. if (!window.Vue){
  72. o2.load(["vue", "elementui"], { "sequence": true }, callback);
  73. }else{
  74. if (callback) callback();
  75. }
  76. },
  77. _createElementHtml: function(){
  78. return "";
  79. },
  80. _resetModuleDomNode: function(){
  81. if (!this.vm){
  82. this.node.set("html", this._createElementHtml());
  83. this._loadVue(this._mountVueApp.bind(this));
  84. }
  85. },
  86. _mountVueApp: function(){
  87. if (!this.vueApp) this.vueApp = this._createVueExtend();
  88. try{
  89. this.vm = new Vue(this.vueApp);
  90. this.vm.$o2module = this;
  91. this.vm.$o2callback = callback;
  92. this.vm.$mount(this.node);
  93. }catch(e){
  94. this.node.store("module", this);
  95. this._loadVueCss();
  96. if (callback) callback();
  97. }
  98. },
  99. _createVueData: function(){
  100. return {};
  101. },
  102. _createVueExtend: function(){
  103. var _self = this;
  104. return {
  105. data: this._createVueData(),
  106. mounted: function(){
  107. _self._afterMounted(this.$el);
  108. }
  109. };
  110. },
  111. _afterMounted: function(el){
  112. this.node = el;
  113. this.node.store("module", this);
  114. this._getContainers();
  115. this._getElements();
  116. this._setNodeProperty();
  117. if (!this.form.isSubform) this._createIconAction();
  118. this._setNodeEvent();
  119. this.initialized = true;
  120. this.json.initialized = "yes";
  121. this.selected(true);
  122. },
  123. _setOtherNodeEvent: function(){},
  124. _setEditStyle_custom: function(name){
  125. switch (name){
  126. case "name": this.setPropertyName(); break;
  127. case "id": this.setPropertyId(); break;
  128. default: if (this.isPropertyLoaded) if (this.vm) this.resetElement();
  129. }
  130. },
  131. setPropertyName: function(){},
  132. setPropertyId: function(){},
  133. resetElement: function(){
  134. this._createNode();
  135. this.node.inject(this.vm.$el,"before");
  136. var node = this.vm.$el;
  137. this.vm.$destroy();
  138. node.destroy();
  139. this.vm = null;
  140. this.isSetEvents = false;
  141. this._resetModuleDomNode();
  142. }
  143. });