Eltree.js 3.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129
  1. MWF.xApplication.process.FormDesigner.Module = MWF.xApplication.process.FormDesigner.Module || {};
  2. MWF.xDesktop.requireApp("process.FormDesigner", "Module.Elinput", null, false);
  3. MWF.xApplication.process.FormDesigner.Module.Eltree = MWF.FCEltree = new Class({
  4. Extends: MWF.FCElinput,
  5. Implements: [Options, Events],
  6. options: {
  7. "style": "default",
  8. "propertyPath": "../x_component_process_FormDesigner/Module/Eltree/eltree.html"
  9. },
  10. _initModuleType: function(){
  11. this.className = "Eltree";
  12. this.moduleType = "element";
  13. this.moduleName = "eltree";
  14. },
  15. _afterMounted: function(el, callback){
  16. this.node = el;
  17. this.node.store("module", this);
  18. this._loadVueCss();
  19. this._createIcon();
  20. if (callback) callback();
  21. },
  22. _filterHtml: function(html){
  23. var reg = /(?:@|v-on|v-model)\S*(?:\=)\S*(?:\"|\'|\s)/g;
  24. var v = html.replace(reg, "");
  25. return v;
  26. },
  27. _createIcon: function(){
  28. this.iconNode = new Element("div", {
  29. "styles": this.css.iconNode,
  30. "o2icon": "eltree"
  31. }).inject(this.node, "top");
  32. new Element("div", {
  33. "styles": this.css.iconNodeIcon
  34. }).inject(this.iconNode);
  35. new Element("div", {
  36. "styles": this.css.iconNodeText,
  37. "text": "Eltree"
  38. }).inject(this.iconNode);
  39. },
  40. _createElementHtml: function(){
  41. var html = "<el-tree";
  42. html += " v-model=\"tmpValue\"";
  43. html += " :empty-text=\"emptyText\"";
  44. html += " :node-key=\"nodeKey\"";
  45. html += " :data=\"data\"";
  46. html += " :props=\"defaultProps\"";
  47. html += " :render-after-expand=\"tmpRenderAfterExpand\"";
  48. html += " :default-expand-all=\"tmpDefaultExpandAll\"";
  49. html += " :highlight-current=\"highlightCurrent\"";
  50. html += " :expand-on-click-node=\"expandOnClickNode\"";
  51. html += " :check-on-click-node=\"checkOnClickNode\"";
  52. html += " :show-checkbox=\"showCheckbox\"";
  53. html += " :check-strictly=\"checkStrictly\"";
  54. html += " :accordion=\"accordion\"";
  55. html += " :indent=\"indent\"";
  56. //
  57. // html += " :style=\"elStyles\"";
  58. if (this.json.elProperties){
  59. Object.keys(this.json.elProperties).forEach(function(k){
  60. if (this.json.elProperties[k]) html += " "+k+"=\""+this.json.elProperties[k]+"\"";
  61. }, this);
  62. }
  63. html += "></el-tree>";
  64. return html;
  65. },
  66. _refreshTree: function(){
  67. this.json.tmpDefaultExpandAll = true;
  68. },
  69. _createVueExtend: function(callback){
  70. var _self = this;
  71. return {
  72. data: this._createVueData(),
  73. // mounted: function(){
  74. // _self._afterMounted(this.$el, callback);
  75. // },
  76. mounted: function(){
  77. this.$nextTick(function(){
  78. _self._afterMounted(this.$el, callback);
  79. });
  80. }
  81. };
  82. },
  83. _createVueData: function(){
  84. return function() {
  85. var data = this.json;
  86. data.tmpRenderAfterExpand = false;
  87. data.tmpDefaultExpandAll = !!data.defaultExpandAll;
  88. if( !data.dataJson ) data.dataJson = {};
  89. if( data.dataType === "json" ){
  90. data.data = data.dataJson;
  91. }else{
  92. data.data = [];
  93. }
  94. Object.assign(data, this.tmpVueData || {});
  95. return data;
  96. }.bind(this)
  97. },
  98. _setEditStyle_custom: function(name, obj, oldValue){
  99. switch (name){
  100. // case "dataType": this.setPropertyName(); break;
  101. // case "id": this.setPropertyId(); break;
  102. // case "range":
  103. // case "max":
  104. // case "vertical":
  105. case "dataJson":
  106. if( this.isPropertyLoaded && this.vm)this.resetElement();
  107. break;
  108. case "dataType":
  109. var data = this.json;
  110. if( data.dataType !== oldValue ){
  111. if (this.vm) this.resetElement();
  112. }
  113. break;
  114. default:
  115. }
  116. },
  117. setPropertyName: function(){},
  118. setPropertyId: function(){}
  119. });