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

nezha-fronted/src/components/page/config/model.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 :data="tableData"
                 border style="width: 100%;"
                 ref="modelTable"
@@ -32,7 +42,7 @@
                 @sort-change="tableDataSort"
       >
         <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}`"
@@ -66,7 +76,7 @@
         </el-table-column>
         <el-table-column :resizable="false" width="28">
           <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>
@@ -83,14 +93,6 @@
       <bottom-box v-if="bottomBox.showSubList" :sub-resize-show="bottomBox.subResizeShow" :is-fullscreen="bottomBox.isFullScreen" from="model" :target-tab.sync="bottomBox.targetTab" :obj="bottomBox.model"
                   @closeSubList="bottomBox.showSubList = false" @fullScreen="fullScreen" @exitFullScreen="exitFullScreen" @listResize="listResize" ref="panelBox"></bottom-box>
     </transition>
-    <element-set
-      v-if="tools.showElementSet"
-      v-clickoutside="elementsetHide"
-      :table-title="tableTitle"
-      :dropCol="tools.dropCol"
-      @tools.tablelable="tablelabelEmit"
-      ref="elementset"
-    ></element-set>
     <transition name="right-box">
       <model-box v-if="rightBox.show" ref="modelBox" :model="model" @close="closeRightBox" @reload="getTableData"></model-box>
     </transition>
@@ -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: 'modelTable', //需要分页的table的id，用于记录每页数量
 
@@ -196,45 +197,12 @@
       }
     },
     methods: {
-      elementsetShow(s, e) {
-        this.tools.showElementSet = true;
-        this.$nextTick(() => {
-          let 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();
-      },
       assetStatClassName(param) {
         if (param.column.label == this.$t("config.model.assets")) {
           return "asset-state";
         }
         return "";
       },
-      tablelabelEmit(data) {
-        //获取子组件传过来的参数
-        this.$store.commit('setHeaderTable', data);
-        this.tools.tablelable = data;
-      },
       panel(obj) {
         this.bottomBox.showSubList = true;
         this.bottomBox.model = obj;
@@ -372,6 +340,10 @@
       },
     },
     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) {
@@ -398,12 +370,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: {
       'bottomBox.showSubList': function(n) {