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

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

@@ -19,6 +19,16 @@
         </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
         class="nz-table"
         :data="tableData"
@@ -35,7 +45,7 @@
       >
         <el-table-column
           :resizable="false"
-          v-for="(item, index) in tools.tablelable"
+          v-for="(item, index) in tools.customTableTitle"
           v-if="item.show"
           :width="item.width"
           :key="`col-${index}`"
@@ -72,7 +82,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>
@@ -92,15 +102,6 @@
     <transition name="right-box">
       <alert-config-box v-if="rightBox.show" :alert-rule="alertRule" @close="closeRightBox" ref="alertConfigBox"></alert-config-box>
     </transition>
-    <element-set
-      v-if="tools.showElementSet"
-      @close="elementsetHide"
-      v-clickoutside="elementsetHide"
-      :table-title="tableTitle"
-      :tools.dropCol="tools.dropCol"
-      @tablelable="tablelabelEmit"
-      ref="elementset"
-    ></element-set>
   </div>
 
 </template>
@@ -132,10 +133,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: [], //自定义列工具的数据
         },
         mainTableHeight: this.$tableHeight.normal, //主列表table高度
 
@@ -256,40 +256,6 @@
         this.bottomBox.showSubList = true;
         this.bottomBox.targetTab = 'alertMessage';
       },
-      elementsetShow(s, e) {
-        this.tools.showElementSet = true;
-        this.$nextTick(() => {
-          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.tools.showElementSet = false;
-      },
-      tablelabelEmit(data) {
-        //获取子组件传过来的参数
-        this.$store.commit('setHeaderTable', data);
-        this.tools.tablelable = data;
-        this.tools.dropCol = data;
-      },
       edit(u) {
         this.alertRule = JSON.parse(JSON.stringify(u));
         this.rightBox.show = true;
@@ -542,6 +508,10 @@
       window.onresize = null;
     },
     mounted() {
+      //初始化表头
+      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) {
@@ -569,12 +539,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;
     }
   }
 </script>