fix：修改所有表格翻页后不回到顶部的问题并且保证删除修改后滚动条位置不变

2020-12-31 17:41:40 +08:00
parent b267dfa3f3
commit 62f88ebf6c
12 changed files with 125 additions and 13 deletions
--- a/nezha-fronted/src/components/common/alert/alertMessageTable.vue
+++ b/nezha-fronted/src/components/common/alert/alertMessageTable.vue
@@ -355,6 +355,8 @@
        viewAssetState: false,

        scrollbarWrap: null,
+        delFlag:false,
+        tableDataInitNum:0,
      }
    },
    computed: {
@@ -636,6 +638,7 @@
      deleteMessage() {
        this.$refs.remarkForm.validate(valid => {
          if (valid) {
+            this.delFlag=true;
            this.$emit('deleteMessage',this.deleteBox,()=>{
              this.deleteBox.ids=[];
              bus.$emit("alert-message-change")
@@ -855,7 +858,16 @@
          if (n.length === 0 && this.pageObj.pageNo > 1) {
            this.pageNo(this.pageObj.pageNo-1);
          }
+          if(!this.delFlag){
+            this.$refs.alertListTable.bodyWrapper.scrollTop = 0
          }
+          this.tableDataInitNum++;//因为异步加载的问题导致该表格加载三次 只有最后一次是稳定 故只有第三次是去除是否删除的标记
+          if(this.tableDataInitNum===2){
+            this.tableDataInitNum=0;
+            this.delFlag=false;
+          }
+        }
+
      }
    },
    mounted() {
--- a/nezha-fronted/src/components/common/deleteButton.vue
+++ b/nezha-fronted/src/components/common/deleteButton.vue
@@ -25,6 +25,7 @@
          cancelButtonText: this.$t("tip.no"),
          type: 'warning'
        }).then(() => {
+          this.$emit('before');
          let params=this.filterParam();
          this.$delete(this.api+params).then(response => {
            if (response.code === 200) {
--- a/nezha-fronted/src/components/page/alert/config.vue
+++ b/nezha-fronted/src/components/page/alert/config.vue
@@ -48,7 +48,7 @@
              </button>
            </template>
          </export-excel>
-          <delete-button :delete-objs="batchDeleteObjs" @after="getTableData" api="alert/rule" v-has="'rule_delete'"></delete-button>
+          <delete-button :delete-objs="batchDeleteObjs" @after="getTableData" @before="delFlag=true" api="alert/rule" v-has="'rule_delete'"></delete-button>
        </div>
        <div class="pagination-top pagination-top-hide display-none"></div>
      </div>
@@ -289,6 +289,7 @@
        viewAsset: false,
        searchTime: bus.getTimezontDateRange(),
        scrollbarWrap: null,
+        delFlag:false,
      }
    },
    methods: {
@@ -307,6 +308,7 @@
      closeRightBox(refresh) {
        this.rightBox.show = false;
        if (refresh) {
+          this.delFlag=true;
          this.getTableData();
        }
      },
@@ -318,6 +320,7 @@
        }).then(() => {
          this.$delete("alert/rule?ids=" + u.id).then(response => {
            if (response.code === 200) {
+              this.delFlag=true;
              this.$message({type: 'success', message: this.$t("tip.deleteSuccess")});
              this.getTableData();
            } else {
@@ -509,6 +512,11 @@
          if (n.length === 0 && this.pageObj.pageNo > 1) {
            this.pageNo(this.pageObj.pageNo-1);
          }
+          if(!this.delFlag){ // 不是删除时回到顶部
+            this.$refs.alertRuleTable.bodyWrapper.scrollTop = 0
+          }else{
+            this.delFlag=false;
+          }
        }
      }
    },
--- a/nezha-fronted/src/components/page/asset/asset.vue
+++ b/nezha-fronted/src/components/page/asset/asset.vue
@@ -21,7 +21,7 @@
          <button :title="$t('overall.batchEdit')" @click.stop="batchEdit" class="nz-btn nz-btn-size-normal nz-btn-style-light" id="asset-batch-asset" style="margin-left: 15px" v-has="'asset_toBatchEdit'">
            <i class="nz-icon nz-icon-batch-edit"></i>
          </button>
-          <delete-button :delete-objs="batchDeleteObjs" @after="getTableData" api="asset" v-has="'asset_delete'"></delete-button>
+          <delete-button :delete-objs="batchDeleteObjs" @after="getTableData" @before="delFlag=true" api="asset" v-has="'asset_delete'"></delete-button>
        </div>
        <div class="pagination-top pagination-top-hide display-none"></div>
      </div>
@@ -388,11 +388,11 @@
          idcId: '',
          idcIds: ''
        },
-
        assetPingSwitch: localStorage.getItem('nz-sys-asset-ping-switch'),
        tagKeys:[],

-        scrollbarWrap: null
+        scrollbarWrap: null,
+        delFlag:false,
      }
    },
    computed:{
@@ -434,6 +434,14 @@
          }else if(n.length === 0 && this.pageObj.pageNo === 1){
            this.afterTableListChange();
          }
+
+          if(!this.delFlag){ // 不是删除时回到顶部
+            this.$refs.assetTable.bodyWrapper.scrollTop = 0
+          }else{
+            this.delFlag=false;
+          }
+
+
        }
      }
    },
@@ -555,6 +563,7 @@
          this.$delete("asset?ids=" + asset.id).then(response => {
            if (response.code === 200) {
              this.$message({duration: 2000, type: 'success', message: this.$t("tip.deleteSuccess")});
+              this.delFlag=true;
             this.getTableData()
            } else {
              this.$message.error(response.msg);
@@ -593,6 +602,7 @@
        this.rightBox.show = false;
        this.rightBox.batchShow = false;
        if (refresh) {
+          this.delFlag=true;
         this.getTableData()
          this.loadKeys();
        }
--- a/nezha-fronted/src/components/page/config/account.vue
+++ b/nezha-fronted/src/components/page/config/account.vue
@@ -31,7 +31,7 @@
                  class="nz-btn nz-btn-size-normal nz-btn-style-light margin-l-20" id="account-add">
            <i class="nz-icon-create-square nz-icon"></i>
          </button>
-          <delete-button :delete-objs="batchDeleteObjs" :filter-function="(arr)=>{return '?userIds='+arr.map(t=>t.userId).join(',')}" @after="getTableData" api="sys/user/delete" v-has="'account_delete'"></delete-button>
+          <delete-button :delete-objs="batchDeleteObjs" :filter-function="(arr)=>{return '?userIds='+arr.map(t=>t.userId).join(',')}" @after="getTableData" api="sys/user/delete" v-has="'account_delete'" @before="delFlag=true"></delete-button>
        </div>
        <!-- 顶部分页组件，当打开底部上滑框时出现 -->
        <div class="pagination-top pagination-top-hide display-none"></div>
@@ -250,6 +250,7 @@
        },
        searchLabel: {}, //搜索参数
        scrollbarWrap: null,
+        delFlag:false,
      }
    },
    methods: {
@@ -280,6 +281,8 @@
      closeRightBox(refresh) {
        this.rightBox.show = false;
        if (refresh) {
+          this.delFlag=true;
+          this.delFlag=true;
          this.getTableData();
        }
      },
@@ -301,6 +304,7 @@
        }).then(() => {
          this.$delete("sys/user/delete?userIds=" + u.userId).then(response => {
            if (response.code === 200) {
+              this.delFlag=true;
              this.$message({duration: 2000, type: 'success', message: this.$t("tip.deleteSuccess")});
              this.getTableData();
            } else {
@@ -458,6 +462,13 @@
          if (n.length === 0 && this.pageObj.pageNo > 1) {
            this.pageNo(this.pageObj.pageNo-1);
          }
+
+          if(!this.delFlag){ // 不是删除时回到顶部
+            this.$refs.accountTable.bodyWrapper.scrollTop = 0
+          }else{
+            this.delFlag=false;
+          }
+
        }
      }
    },
--- a/nezha-fronted/src/components/page/config/dc.vue
+++ b/nezha-fronted/src/components/page/config/dc.vue
@@ -17,7 +17,7 @@
                  class="nz-btn nz-btn-size-normal nz-btn-style-light margin-l-20" id="dc-add">
            <i class="nz-icon-create-square nz-icon"></i>
          </button>
-          <delete-button :delete-objs="batchDeleteObjs" @after="getTableData" api="idc" v-has="'dc_delete'"></delete-button>
+          <delete-button :delete-objs="batchDeleteObjs" @before="delFlag=true" @after="getTableData" api="idc" v-has="'dc_delete'"></delete-button>
        </div>
        <div class="pagination-top pagination-top-hide display-none"></div>
      </div>
@@ -269,6 +269,7 @@
        searchLabel: {}, //搜索参数
        tabShow: 1, // 控制显示一级页面和二级页面 1 dc 2cabinet
        scrollbarWrap: null,
+        delFlag:false,
      }
    },
    computed:{
@@ -366,6 +367,7 @@
      closeDcBox(refresh) {
        this.rightBox.dc.show = false;
        if (refresh) {
+          this.delFlag=true;
          this.getTableData();
          bus.$emit("dc-list-change");
        }
@@ -373,6 +375,7 @@
      closeTrafficBox(refresh) {
        this.rightBox.trafficSetting.show = false;
        if (refresh) {
+          this.delFlag=true;
          this.getTableData();
        }
      },
@@ -384,6 +387,7 @@
        }).then(() => {
          this.$delete("idc?ids=" + u.id).then(response => {
            if (response.code === 200) {
+              this.delFlag=true;
              this.$message({duration: 1000, type: 'success', message: this.$t("tip.deleteSuccess")});
              this.getTableData();
              bus.$emit("dc-list-change");
@@ -516,6 +520,12 @@
          if (n.length === 0 && this.pageObj.pageNo > 1) {
            this.pageNo(this.pageObj.pageNo-1);
          }
+
+          if(!this.delFlag){ // 不是删除时回到顶部
+            this.$refs.dcTable.bodyWrapper.scrollTop = 0
+          }else{
+            this.delFlag=false;
+          }
        }
      }
    },
--- a/nezha-fronted/src/components/page/config/menus.vue
+++ b/nezha-fronted/src/components/page/config/menus.vue
@@ -19,7 +19,7 @@
                  id="menus-add" type="button">
            <i class="nz-icon-create-square nz-icon"></i>
          </button>
-          <delete-button :delete-objs="batchDeleteObjs" :filter-function="(arr)=>{return '?ids='+arr.map(t=>t.id).join(',')}" @after="getTableData" api="sys/menu"></delete-button>
+          <delete-button :delete-objs="batchDeleteObjs" :filter-function="(arr)=>{return '?ids='+arr.map(t=>t.id).join(',')}" @before="delFlag=true" @after="getTableData" api="sys/menu"></delete-button>
        </div>
        <!-- 顶部分页组件，当打开底部上滑框时出现 -->
        <div class="pagination-top pagination-top-hide display-none"></div>
@@ -206,12 +206,14 @@
        },
        searchLabel: {}, //搜索参数
        scrollbarWrap: null,
+        delFlag:false,
      }
    },
    methods: {
      closeRightBox(refresh) {
        this.rightBox.show = false;
        if (refresh) {
+          this.delFlag=true;
          this.getTableData();
        }
      },
@@ -233,6 +235,7 @@
        }).then(() => {
          this.$delete("sys/menu?ids=" + u.id).then(response => {
            if (response.code === 200) {
+              this.delFlag=true;
              this.$message({duration: 2000, type: 'success', message: this.$t("tip.deleteSuccess")});
              this.getTableData();
            } else {
@@ -305,6 +308,24 @@
        this.getTableData();
      },
    },
+    watch:{
+      tableData: {
+        deep: true,
+        handler(n) {
+          if (n.length === 0 && this.pageObj.pageNo > 1) {
+            this.pageNo(this.pageObj.pageNo-1);
+          }
+
+          if(!this.delFlag){ // 不是删除时回到顶部
+            this.$refs.menusTable.bodyWrapper.scrollTop = 0
+          }else{
+            this.delFlag=false;
+          }
+
+
+        }
+      }
+    },
    created(){
      //是否存在分页缓存
      let pageSize = localStorage.getItem('nz-pageSize-' + localStorage.getItem('nz-username') + '-' + this.tableId);
--- a/nezha-fronted/src/components/page/config/mib.vue
+++ b/nezha-fronted/src/components/page/config/mib.vue
@@ -22,7 +22,7 @@
          <button :title="$t('overall.createMib')" @click="add" class="nz-btn nz-btn-size-normal nz-btn-style-light  margin-l-20" id="mib-add"  type="button" v-has="'snmp_file_toAdd'">
            <i class="nz-icon-create-square nz-icon"></i>
          </button>
-          <delete-button :delete-objs="batchDeleteObjs" @after="getTableData" api="mib" v-has="'snmp_file_delete'"></delete-button>
+          <delete-button :delete-objs="batchDeleteObjs" @after="getTableData" @before="delFlag=true" api="mib" v-has="'snmp_file_delete'"></delete-button>
        </div>
      </div>
      <!-- 自定义table列 -->
@@ -205,6 +205,7 @@
        },
        searchLabel: {}, //搜索参数
        scrollbarWrap: null,
+        delFlag:false,
      }
    },
    methods: {
@@ -218,6 +219,7 @@
      closeRightBox(refresh) {
        this.rightBox.show = false;
        if (refresh) {
+          this.delFlag=true;
          this.getTableData();
        }
      },
@@ -229,6 +231,7 @@
        }).then(() => {
          this.$delete("mib?ids=" + u.id).then(response => {
            if (response.code === 200) {
+              this.delFlag=true;
              this.$message({duration: 1000, type: 'success', message: this.$t("tip.deleteSuccess")});
              this.getTableData();
            } else {
@@ -352,6 +355,11 @@
          if (n.length === 0 && this.pageObj.pageNo > 1) {
            this.pageNo(this.pageObj.pageNo-1);
          }
+          if(!this.delFlag){ // 不是删除时回到顶部
+            this.$refs.mibTable.bodyWrapper.scrollTop = 0
+          }else{
+            this.delFlag=false;
+          }
        }
      }
    },
--- a/nezha-fronted/src/components/page/config/model.vue
+++ b/nezha-fronted/src/components/page/config/model.vue
@@ -15,7 +15,7 @@
          <button :title="$t('overall.createModel')" @click="add" class="nz-btn nz-btn-size-normal nz-btn-style-light margin-l-20" id="model-add" v-has="'model_toAdd'">
            <i class="nz-icon-create-square nz-icon"></i>
          </button>
-          <delete-button :delete-objs="batchDeleteObjs" @after="getTableData" api="model" v-has="'model_delete'"></delete-button>
+          <delete-button :delete-objs="batchDeleteObjs" @after="getTableData" @before="delFlag=true" api="model" v-has="'model_delete'"></delete-button>
        </div>
        <div class="pagination-top pagination-top-hide display-none"></div>
      </div>
@@ -204,6 +204,7 @@
        },
        searchLabel: {}, //搜索参数
        scrollbarWrap: null,
+        delFlag:false,
      }
    },
    methods: {
@@ -248,6 +249,7 @@
        }).then(() => {
          this.$delete("model?ids=" + u.id).then(response => {
            if (response.code === 200) {
+              this.delFlag=true;
              this.$message({duration: 1000, type: 'success', message: this.$t("tip.deleteSuccess")});
              this.getTableData();
            } else {
@@ -266,6 +268,7 @@
      closeRightBox(refresh) {
        this.rightBox.show = false;
        if (refresh) {
+          this.delFlag=true;
          this.getTableData();
        }
      },
@@ -371,6 +374,11 @@
          if (n.length === 0 && this.pageObj.pageNo > 1) {
            this.pageNo(this.pageObj.pageNo-1);
          }
+          if(!this.delFlag){ // 不是删除时回到顶部
+            this.$refs.modelTable.bodyWrapper.scrollTop = 0
+          }else{
+            this.delFlag=false;
+          }
        }
      }
    },
--- a/nezha-fronted/src/components/page/config/promServer.vue
+++ b/nezha-fronted/src/components/page/config/promServer.vue
@@ -16,7 +16,7 @@
                  class="nz-btn nz-btn-size-normal nz-btn-style-light margin-l-20" id="prom-add">
            <i class="nz-icon-create-square nz-icon"></i>
          </button>
-          <delete-button :delete-objs="batchDeleteObjs" @after="getTableData" api="promServer" v-has="'prom_delete'"></delete-button>
+          <delete-button :delete-objs="batchDeleteObjs" @after="getTableData" @before="delFlag=true" api="promServer" v-has="'prom_delete'"></delete-button>
        </div>
        <div class="pagination-top pagination-top-hide display-none"></div>
      </div>
@@ -224,6 +224,7 @@
        searchLabel: {}, //搜索参数
        promServerType:null,
        scrollbarWrap: null,
+        delFlag:false,
      }
    },
    methods: {
@@ -276,6 +277,7 @@
        }).then(() => {
          this.$delete("promServer?ids=" + u.id).then(response => {
            if (response.code === 200) {
+              this.delFlag=true;
              this.$message({duration: 1000, type: 'success', message: this.$t("tip.deleteSuccess")});
              this.getTableData();
            } else {
@@ -296,6 +298,7 @@
      closeRightBox(refresh) {
        this.rightBox.show = false;
        if (refresh) {
+          this.delFlag=true;
          this.getTableData();
        }
      },
@@ -451,6 +454,11 @@
          if (n.length === 0 && this.pageObj.pageNo > 1) {
            this.pageNo(this.pageObj.pageNo-1);
          }
+          if(!this.delFlag){ // 不是删除时回到顶部
+            this.$refs.promTable.bodyWrapper.scrollTop = 0
+          }else{
+            this.delFlag=false;
+          }
        }
      }
    },
--- a/nezha-fronted/src/components/page/config/roles.vue
+++ b/nezha-fronted/src/components/page/config/roles.vue
@@ -18,7 +18,7 @@
                  id="roles-add" type="button">
            <i class="nz-icon-create-square nz-icon"></i>
          </button>
-          <delete-button :delete-objs="batchDeleteObjs" :filter-function="(arr)=>{return '?ids='+arr.map(t=>t.id).join(',')}" @after="getTableData" api="sys/role" v-has="'role_delete'"></delete-button>
+          <delete-button :delete-objs="batchDeleteObjs" :filter-function="(arr)=>{return '?ids='+arr.map(t=>t.id).join(',')}" @after="getTableData" @before="delFlag=true" api="sys/role" v-has="'role_delete'"></delete-button>
        </div>
        <!-- 顶部分页组件，当打开底部上滑框时出现 -->
        <div class="pagination-top pagination-top-hide display-none"></div>
@@ -182,12 +182,14 @@
        },
        searchLabel: {}, //搜索参数
        scrollbarWrap: null,
+        delFlag:false,
      }
    },
    methods: {
      closeRightBox(refresh) {
        this.rightBox.show = false;
        if (refresh) {
+          this.delFlag=true;
          this.getTableData();
        }
      },
@@ -210,6 +212,7 @@
        }).then(() => {
          this.$delete("sys/role?ids=" + u.id).then(response => {
            if (response.code === 200) {
+              this.delFlag=true;
              this.$message({duration: 2000, type: 'success', message: this.$t("tip.deleteSuccess")});
              this.getTableData();
            } else {
@@ -300,6 +303,11 @@
          if (n.length === 0 && this.pageObj.pageNo > 1) {
            this.pageNo(this.pageObj.pageNo-1);
          }
+          if(!this.delFlag){ // 不是删除时回到顶部
+            this.$refs.rolesTable.bodyWrapper.scrollTop = 0
+          }else{
+            this.delFlag=false;
+          }
        }
      }
    },
--- a/nezha-fronted/src/components/page/project/project.vue
+++ b/nezha-fronted/src/components/page/project/project.vue
@@ -49,7 +49,7 @@
                </button>
              </template>
            </export-excel>
-            <delete-button :delete-objs="batchDeleteObjs" @after="afterCloseImport" api="endpoint" v-has="'project_endpoint_delete'"></delete-button>
+            <delete-button :delete-objs="batchDeleteObjs" @after="afterCloseImport" @before="delFlag=true" api="endpoint" v-has="'project_endpoint_delete'"></delete-button>
          </div>
          <div class="pagination-top pagination-top-hide display-none"></div>
        </div>
@@ -379,7 +379,8 @@
            readonly:true,
          }],
        },
-        scrollbarWrap: null
+        scrollbarWrap: null,
+        delFlag:false,
      }
    },
    methods:{
@@ -553,6 +554,7 @@
        }).then(()=>{
          this.$delete("endpoint?ids="+endpoint.id).then(response=>{
            if(response.code===200){
+              this.delFlag=true;
              this.$message({duration:1000,type:'success',message:this.$t("tip.deleteSuccess")});
              this.getEndpointTableData();
            }else{
@@ -842,6 +844,11 @@
          if (n.length === 0 && this.endpointPageObj.pageNo > 1) {
            this.endpointPageNo(this.endpointPageObj.pageNo-1);
          }
+          if(!this.delFlag){ // 不是删除时回到顶部 以及修改时
+            this.$refs.endpointTable.bodyWrapper.scrollTop = 0
+          }else{
+            this.delFlag=false;
+          }
        }
      }
    },