perf: VueX缩减、优化; 表头编辑插件重构

nezha-fronted/src/components/page/config/promServer.vue

@@ -19,10 +19,20 @@
         </div>
         <div class="pagination-top pagination-top-hide display-none"></div>
       </div>
+      <!-- 自定义table列 -->
+      <transition name="el-zoom-in-top">
+        <element-set
+          v-if="tools.showCustomTableTitle"
+          @close="tools.showCustomTableTitle = false"
+          :custom-table-title.sync="tools.customTableTitle"
+          :original-table-title="tableTitle"
+          ref="customTableTitle"
+        ></element-set>
+      </transition>
       <el-table :data="tableData" border v-show="bottomBox.mainResizeShow" :height="mainTableHeight" style="width: 100%;"
                 v-loading="tools.loading" ref="promTable" class="nz-table" v-scrollBar:el-table="'large'"
                 @sort-change="tableDataSort">
-        <el-table-column :resizable="false" v-for="(item, index) in tools.tablelable"
+        <el-table-column :resizable="false" v-for="(item, index) in tools.customTableTitle"
                          v-if="item.show"
                          :width="item.width"
                          :key="`col-${index}`"
@@ -57,7 +67,7 @@
         </el-table-column>
         <el-table-column width="28" :resizable="false">
           <template slot="header" slot-scope="scope">
-            <span @click.stop="elementsetShow('shezhi',$event)" class="nz-table-gear">
+            <span @mousedown.stop="!tools.showCustomTableTitle && (tools.showCustomTableTitle = true)" class="nz-table-gear">
               <i class="nz-icon nz-icon-gear"></i>
             </span>
           </template>
@@ -77,14 +87,6 @@
     <transition name="right-box">
       <prom-server-box v-if="rightBox.show" :prom-server="promServer" @close="closeRightBox"></prom-server-box>
     </transition>
-    <element-set
-      v-if="tools.showElementSet"
-      v-clickoutside="elementsetHide"
-      :table-title="tableTitle"
-      :dropCol="tools.dropCol"
-      @tablelable="tablelabelEmit"
-      ref="elementset"
-    ></element-set>
   </div>
 
 </template>
@@ -120,10 +122,9 @@
           loading: false, //是否显示table加载动画
           toTopBtnTop: this.$tableHeight.toTopBtnTop, //to-top按钮的top属性
           tableHover: false, //控制滚动条和top按钮同时出现
-          showElementSet: false, //自定义列弹框是否显示
           showTopBtn: false, //显示To top按钮
-          tablelable: [], //从缓存中加载的table header
-          dropCol: [], //自定义列工具的数据
+          showCustomTableTitle: false, //自定义列弹框是否显示
+          customTableTitle: [], //自定义列工具的数据
         },
 
         tableId: 'promTable', //需要分页的table的id，用于记录每页数量
@@ -252,37 +253,6 @@
         });
         return detail;
       },
-      elementsetShow(s, e) {
-        this.tools.showElementSet = true;
-        var eventfixed = {
-          shezhi: 0,
-          screen: 0
-        };
-        eventfixed[s] = 1;
-        e.preventDefault();
-        this.$store.commit('setHeaderTable', this.tools.tablelable);
-        this.$store.commit('setEventfixed', eventfixed);
-        const h = document.documentElement.clientHeight;
-        const w = document.documentElement.clientWidth;
-        const dw = this.$refs.elementset.$el.offsetWidth;
-        const dh = this.$refs.elementset.$el.offsetHeight;
-        let positionx =
-          e.clientX + dw <= w - 10 ? e.clientX + 14 : e.clientX + 14 - dw;
-        let positiony =
-          e.clientY + dh <= h - 10
-            ? e.clientY + 20
-            : e.clientY + 20 - (e.clientY + dh - h);
-        this.$store.commit('setPosition', {positionx, positiony});
-      },
-      elementsetHide() {
-        //悬浮点击空白隐藏
-        this.$refs.elementset.elementsetHide();
-      },
-      tablelabelEmit(data) {
-        //获取子组件传过来的参数
-        this.$store.commit('setHeaderTable', data);
-        this.tools.tablelable = data;
-      },
       edit(u) {
         this.promServer = JSON.parse(JSON.stringify(u));
         this.rightBox.show = true;
@@ -426,11 +396,15 @@
         this.getTableData();
       },
     },
-    mounted: function () {
+    mounted() {
       //初始化数据
       Promise.all([this.getDcData()]).then(response => {
         this.getTableData();
       });
+      //初始化表头
+      this.tools.customTableTitle = localStorage.getItem("nz-tableTitle-" + localStorage.getItem("nz-username") + "-" + this.$route.path)
+        ? JSON.parse(localStorage.getItem("nz-tableTitle-" + localStorage.getItem("nz-username") + "-" + this.$route.path))
+        : this.tableTitle;
       //是否存在分页缓存
       let pageSize = localStorage.getItem('nz-pageSize-' + localStorage.getItem('nz-username') + '-' + this.tableId);
       if (pageSize != 'undefined' && pageSize != null) {
@@ -456,12 +430,6 @@
           });
         }
       });
-      this.tools.tablelable = localStorage.getItem("nz-tableTitle-" + localStorage.getItem("nz-username") + "-" + this.$route.path)
-        ? JSON.parse(localStorage.getItem("nz-tableTitle-" + localStorage.getItem("nz-username") + "-" + this.$route.path))
-        : this.tableTitle;
-      this.tools.dropCol = localStorage.getItem("nz-tableTitle-" + localStorage.getItem("nz-username") + "-" + this.$route.path)
-        ? JSON.parse(localStorage.getItem("nz-tableTitle-" + localStorage.getItem("nz-username") + "-" + this.$route.path))
-        : this.tableTitle;
     },
 
     watch: {