拖拽基础

src/Defaults.ts

@@ -17,6 +17,14 @@ export const text = {
 
 export const toolbar = {}
 
+export const tbfill = {}
+
+export const tbseparator = {}
+
+export const button ={}
+
+export const splitter = {}
+
 export const maintab = {}
 
 export const rows = {}

src/Scope.ts

@@ -9,6 +9,8 @@ export class Scope {
      */
     id = _.uniqueId('scope_')
 
+    originalVjson
+
     /**
      * 一个 ExtJS 能接受的配置对象
      */
@@ -35,6 +37,12 @@ export class Scope {
      */
     _watchList
 
+    /**
+     * 页面显示的时候带的参数 在设计刷新的时候使用
+     */
+    _vjsonOption
+    _dataOption
+
     _addWatch(tplExpress, fn) {
         if (!this._watchList) {
             this._watchList = []
@@ -106,9 +114,10 @@ export class Scope {
      * @param vjsonOption 界面覆盖选项（可以为空）
      * @param dataOption 数据覆盖选项（可以为空）
      */
-    showPage(vjsonOption, dataOption) {
+    showPage(vjsonOption, dataOption, reload = false) {
         const that = this
-
+        this._vjsonOption = vjsonOption;
+        this._dataOption = dataOption;
         const vmodel = _.defaultsDeep({
             data: {}
         }, dataOption, that.model)
@@ -137,7 +146,7 @@ export class Scope {
         }, vjsonOption, that.vjson)
 
         const tt = Ext.getCmp('TT')
-        tt.addScope(this, config)
+        tt.addScope(this, config, reload)
 
         return config
     }
@@ -150,7 +159,8 @@ export class Scope {
      */
     renderTo(element, vjsonOption, dataOption) {
         const that = this
-
+        this._vjsonOption = vjsonOption;
+        this._dataOption = dataOption;
         const vmodel = _.defaultsDeep({
             data: {}
         }, dataOption, that.model)
@@ -182,6 +192,11 @@ export class Scope {
         new Ext.container.Viewport(config);
     }
 
+    reRender() {
+        this.vjson = this.buildVjson()
+        this.showPage(this._vjsonOption,this._dataOption, true)
+    }
+
     /**
      * 关闭对话框（或标签页）
      */
@@ -223,7 +238,13 @@ export class Scope {
     constructor({model, vjson}) {
         const that = this
         this.model = model
-        this.vjson = _.defaultsDeep({
+        this.originalVjson = _.cloneDeep(vjson)
+        this.vjson = this.buildVjson()
+    }
+
+    buildVjson() {
+        const that = this
+        return _.defaultsDeep({
             closable: true,
             listeners: {
                 afterrender(sender) {
@@ -236,7 +257,7 @@ export class Scope {
                     that.onRender()
 
                     // 如果vjson中配置了 afterrender ,需要恢复状态
-                    invokeMethod(vjson.listeners?.afterrender, that, arguments)
+                    invokeMethod(that.originalVjson.listeners?.afterrender, that, arguments)
                 },
                 activate(sender) {
                     // 调用 onActivate 回调
@@ -247,45 +268,45 @@ export class Scope {
                         window['currentScope'] = sender.lookupViewModel().yvanScope
                     }
                     // 如果vjson中配置了 afterrender ,需要恢复状态
-                    invokeMethod(vjson.listeners?.activate, that, arguments)
+                    invokeMethod(that.originalVjson.listeners?.activate, that, arguments)
                 },
                 deactivate(sender) {
                     // 调用 onActivate 回调
                     that.onDeactivate()
                     // 如果vjson中配置了 afterrender ,需要恢复状态
-                    invokeMethod(vjson.listeners?.deactivate, that, arguments)
+                    invokeMethod(that.originalVjson.listeners?.deactivate, that, arguments)
                 },
                 beforedestroy(sender) {
                     // 调用 onBeforeDestroy 回调
                     that.onBeforeDestroy()
                     // 如果vjson中配置了 afterrender ,需要恢复状态
-                    invokeMethod(vjson.listeners?.beforedestroy, that, arguments)
+                    invokeMethod(that.originalVjson.listeners?.beforedestroy, that, arguments)
                 },
                 beforeclose(sender) {
                     // 调用 onActivate 回调
                     that.onBeforeClose()
                     // 如果vjson中配置了 afterrender ,需要恢复状态
-                    invokeMethod(vjson.listeners?.beforeclose, that, arguments)
+                    invokeMethod(that.originalVjson.listeners?.beforeclose, that, arguments)
                 },
                 destroy(sender) {
                     // 调用 onActivate 回调
                     that.onDestroy()
 
                     // 销毁 viewModel
-                    that.viewModel.destroy()
-                    delete that.viewModel
-                    delete that.vjson
+                    // that.viewModel.destroy()
+                    // 如果vjson中配置了 afterrender ,需要恢复状态
+                    invokeMethod(that.originalVjson.listeners?.destroy, that, arguments)
+                    // delete that.viewModel
+                    // delete that.vjson
+                    // delete that.originalVjson
                     delete that._watchList
                     delete that._handle
-
-                    // 如果vjson中配置了 afterrender ,需要恢复状态
-                    invokeMethod(vjson.listeners?.destroy, that, arguments)
                 },
             },
             yvanScope: this,
             referenceHolder: true,
 
-        }, vjson)
+        }, this.originalVjson)
     }
 
     /**

src/controls/MainTab.js

@@ -37,15 +37,20 @@ export default function () {
          * @param scopeInstance 业务对象实例
          * @param config ExtJS配置对象
          */
-        addScope(scopeInstance, config) {
+        addScope(scopeInstance, config, reload) {
             if (config.path) {
                 for (let i = 0; i < this.items.items.length; i++) {
                     // 找到当前 tabs 里有没有已经打开过
                     const tab = this.items.items[i]
                     if (_.isEqual(tab.path, config.path)) {
-                        // 激活
-                        this.setActiveTab(tab);
-                        return
+                        if (reload) {
+                            this.remove(tab)
+                            break
+                        } else {
+                            // 激活
+                            this.setActiveTab(tab);
+                            return
+                        }
                     }
                 }
             }

src/controls/base.ts

@@ -18,7 +18,7 @@ export function baseConfig(config, dragType?: DragType) {
         let cc = ''
         switch (dragType) {
             case "col-container":
-                cc = 'design_col_container'
+                cc = 'design_cols_container'
                 break
 
             case "col-item":
@@ -26,7 +26,7 @@ export function baseConfig(config, dragType?: DragType) {
                 break
 
             case "row-container":
-                cc = 'design_row_container'
+                cc = 'design_rows_container'
                 break
 
             case "row-item":

src/controls/button.js

@@ -1,5 +1,7 @@
 import _ from 'lodash'
 import $ from 'jquery'
+import {baseConfig} from "./base";
+import {button} from "../Defaults";
 
 export default function () {
   /**
@@ -8,9 +10,7 @@ export default function () {
   const ct = Ext.button.Button.prototype.constructor
   Ext.button.Button.override({
     constructor: function (config) {
-      const newConfig = _.defaultsDeep({}, config, {
-        cls: ['yvan_design']
-      })
+      const newConfig = _.defaultsDeep({}, config, baseConfig(config, "col-item"), button)
       ct.call(this, newConfig)
     }
   });

src/controls/splitter.js

@@ -1,17 +1,14 @@
 import _ from 'lodash'
 import $ from 'jquery'
+import {baseConfig} from "./base";
+import {splitter} from "../Defaults";
 
 export default function () {
-  /**
-   *
-   */
-  const ct = Ext.resizer.Splitter.prototype.constructor
-  Ext.resizer.Splitter.override({
-    constructor: function (config) {
-      const newConfig = _.defaultsDeep({}, config, {
-        cls: ['yvan_design', 'design_rows_container']
-      })
-      ct.call(this, newConfig)
-    }
-  });
+    const ct = Ext.resizer.Splitter.prototype.constructor
+    Ext.resizer.Splitter.override({
+        constructor: function (config) {
+            const newConfig = _.defaultsDeep({}, config, baseConfig(config, "row-item"), splitter)
+            ct.call(this, newConfig)
+        }
+    });
 }

src/controls/toolbar/tbfill.js

@@ -1,17 +1,17 @@
 import _ from 'lodash'
 import $ from 'jquery'
+import {baseConfig} from "../base";
+import {tbfill} from "../../Defaults";
 
 export default function () {
-  /**
-   *
-   */
-  const ct = Ext.toolbar.Fill.prototype.constructor
-  Ext.toolbar.Fill.override({
-    constructor: function (config) {
-      const newConfig = _.defaultsDeep({}, config, {
-        cls: ['yvan_design']
-      })
-      ct.call(this, newConfig)
-    }
-  });
+    /**
+     *
+     */
+    const ct = Ext.toolbar.Fill.prototype.constructor
+    Ext.toolbar.Fill.override({
+        constructor: function (config) {
+            const newConfig = _.defaultsDeep({}, config, baseConfig(config, "col-item"), tbfill)
+            ct.call(this, newConfig)
+        }
+    });
 }

src/controls/toolbar/tbseparator.js

@@ -1,17 +1,17 @@
 import _ from 'lodash'
 import $ from 'jquery'
+import {baseConfig} from "../base";
+import {tbseparator} from "../../Defaults";
 
 export default function () {
-  /**
-   *
-   */
-  const ct = Ext.toolbar.Separator.prototype.constructor
-  Ext.toolbar.Separator.override({
-    constructor: function (config) {
-      const newConfig = _.defaultsDeep({}, config, {
-        cls: ['yvan_design']
-      })
-      ct.call(this, newConfig)
-    }
-  });
+    /**
+     *
+     */
+    const ct = Ext.toolbar.Separator.prototype.constructor
+    Ext.toolbar.Separator.override({
+        constructor: function (config) {
+            const newConfig = _.defaultsDeep({}, config, baseConfig(config, "col-item"), tbseparator)
+            ct.call(this, newConfig)
+        }
+    });
 }

src/init.ts

@@ -7,6 +7,7 @@ import initSplitter from './controls/splitter'
 import initCombo from './controls/combo'
 import initRows from './controls/rows'
 import initCols from './controls/cols'
+import initButton from './controls/button'
 
 export function init() {
     // 引入 filters 过滤插件
@@ -64,4 +65,5 @@ export function init() {
     initToolbar()
     initContainer()
     initSplitter()
+    initButton()
 }