From a5c41b8779380bb333f43641d41e244fba7bfaf6 Mon Sep 17 00:00:00 2001
From: "Mr.sun" <2290907227@qq.com>
Date: Fri, 29 Mar 2024 11:36:55 +0800
Subject: [PATCH] =?UTF-8?q?=E5=AD=97=E4=BD=93=E8=B0=83=E5=B0=8F,=E9=97=B4?=
 =?UTF-8?q?=E9=9A=99=E8=B0=83=E5=B0=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/heavyTable/index.vue        | 368 ++++++++++-----------
 src/views/basicData/locationData/config.js |   1 +
 2 files changed, 185 insertions(+), 184 deletions(-)

diff --git a/src/components/heavyTable/index.vue b/src/components/heavyTable/index.vue
index fb1b33d..722d10d 100644
--- a/src/components/heavyTable/index.vue
+++ b/src/components/heavyTable/index.vue
@@ -16,9 +16,11 @@
           :value="item.istrue"
         ></el-checkbox>
       </el-checkbox-group>
-      <el-button slot="reference" plain :disabled="ColumnFilteringFlag"
-        ><i class="el-icon-arrow-down el-icon-menu"
-      /></el-button>
+      <el-button
+        slot="reference"
+        plain
+        :disabled="ColumnFilteringFlag"
+      ><i class="el-icon-arrow-down el-icon-menu" /></el-button>
     </el-popover>
     <!-- <div class="w-table" :class="{ 'w-table_moving': dragState.dragging }"> -->
     <el-table
@@ -35,8 +37,11 @@
       @row-click="rowClick"
       @cell-dblclick="cellDblclick"
       :row-class-name="tableRowClassName"
-      :row-style="selectedHighlight"
+      :row-style="{height:'0px'}"
+      :cell-style="{padding:'2px'}"
+      style="font-size: 12px"
     >
+      <!-- :row-style="selectedHighlight" -->
       <!--       v-table-drag -->
       <template v-for="(item, index) in config">
         <el-table-column
@@ -68,8 +73,7 @@
                 (status) =>
                   item.event && item.event(status, scope.row, item.prop)
               "
-              >{{ "" }}</el-radio
-            >
+            >{{ "" }}</el-radio>
           </template>
         </el-table-column>
         <el-table-column
@@ -117,7 +121,10 @@
               </template>
             </el-table-column>
           </template>
-          <template v-if="!item.children" slot-scope="scope">
+          <template
+            v-if="!item.children"
+            slot-scope="scope"
+          >
             <table-cell
               :item="item"
               :scope="scope"
@@ -129,7 +136,10 @@
     </el-table>
     <!-- </div> -->
     <!-- <div v-if="paging && paging.total / paging.size > 1" class="shim"></div> -->
-    <div v-if="paging" class="pagination">
+    <div
+      v-if="paging"
+      class="pagination"
+    >
       <el-pagination
         background
         v-if="paging.total / paging.size > 1"
@@ -148,192 +158,187 @@
 </template>
 
 <script>
-import TableCell from "./item.vue";
-import elementOffsetTop from "./elementOffsetTop";
-import debounce from "./debounce";
-import Vue from "vue";
+import TableCell from './item.vue'
+import elementOffsetTop from './elementOffsetTop'
+import debounce from './debounce'
+import Vue from 'vue'
 // v-table-drag  自定义指令拖动的方式 存在bug
-Vue.directive("tableDrag", {
+Vue.directive('tableDrag', {
   update: function (el, binding, vnode) {
-    var container = el.parentNode;
-    var tbody = el.getElementsByClassName("el-table__body-wrapper")[0];
-    var thead = el.getElementsByClassName("el-table__header-wrapper")[0];
+    var container = el.parentNode
+    var tbody = el.getElementsByClassName('el-table__body-wrapper')[0]
+    var thead = el.getElementsByClassName('el-table__header-wrapper')[0]
     // 更新数据时，先还原数据本来的顺序，不然新加载的数据和表头对不上
-    var trCollection = container.getElementsByTagName("tr");
+    var trCollection = container.getElementsByTagName('tr')
     for (var i = 0; i < trCollection.length; i++) {
-      var tr = trCollection[i];
+      var tr = trCollection[i]
       if (i == 0) {
-        var collection = tr.getElementsByTagName("th");
+        var collection = tr.getElementsByTagName('th')
       } else {
-        var collection = tr.getElementsByTagName("td");
+        var collection = tr.getElementsByTagName('td')
       }
       if (collection.length > 1) {
-        let cellArr = [];
+        let cellArr = []
         for (let j = 0; j < collection.length; j++) {
-          let cell = collection[j];
-          let classNames = cell.className;
-          let className = classNames.split(" ")[0];
-          let arr = className.split("_");
+          let cell = collection[j]
+          let classNames = cell.className
+          let className = classNames.split(' ')[0]
+          let arr = className.split('_')
           if (arr.length) {
-            let index = arr[arr.length - 1];
-            cellArr[index - 1] = cell;
+            let index = arr[arr.length - 1]
+            cellArr[index - 1] = cell
           }
         }
         for (let k = 0; k < cellArr.length; k++) {
-          tr.insertBefore(cellArr[k], collection[k]);
+          tr.insertBefore(cellArr[k], collection[k])
         }
       }
     }
 
     // 列拖拽开始...
-    if (!container.className.includes("drag-table"))
-      container.className = " drag-table";
+    if (!container.className.includes('drag-table')) container.className = ' drag-table'
     thead.onmousedown = function (e) {
-      const clickX = event.clientX;
-      const rect = event.target.getBoundingClientRect();
-      const divLeft = rect.left;
-      const divRight = rect.right;
+      const clickX = event.clientX
+      const rect = event.target.getBoundingClientRect()
+      const divLeft = rect.left
+      const divRight = rect.right
 
       //拖动列
-      if (
-        event.target.tagName == "DIV" &&
-        clickX > divLeft + 5 &&
-        clickX < divRight - 5
-      ) {
+      if (event.target.tagName == 'DIV' && clickX > divLeft + 5 && clickX < divRight - 5) {
         //被拖动的th
-        var ev_th = event.target.parentNode;
-        var scrollLeft = tbody.scrollLeft;
+        var ev_th = event.target.parentNode
+        var scrollLeft = tbody.scrollLeft
 
         //算出鼠标相对元素的位置
-        let disX = e.clientX + scrollLeft - ev_th.offsetLeft;
-        let disY = e.clientY - ev_th.offsetTop;
+        let disX = e.clientX + scrollLeft - ev_th.offsetLeft
+        let disY = e.clientY - ev_th.offsetTop
 
-        let thWidthArr = []; // 记录所有的th的宽度,依次累加
-        let thWidthObj = {}; // 记录所有的th的宽度,依次累加
-        let finallIndex = 0; //最终的th index
-        let directionIndex = 0; // 单击的是第几个th
-        let move = 0; // 移动的方向 1-右 2-左
+        let thWidthArr = [] // 记录所有的th的宽度,依次累加
+        let thWidthObj = {} // 记录所有的th的宽度,依次累加
+        let finallIndex = 0 //最终的th index
+        let directionIndex = 0 // 单击的是第几个th
+        let move = 0 // 移动的方向 1-右 2-左
 
-        const ths = ev_th.parentNode.children;
-        var len = ths.length - 1; // 删除elementUI最后的class="gutter"的元素
+        const ths = ev_th.parentNode.children
+        var len = ths.length - 1 // 删除elementUI最后的class="gutter"的元素
         for (let thi = 0; thi < len; thi++) {
-          const itemth = ths[thi];
-          itemth.index = thi;
-          thWidthArr.push(itemth.offsetLeft);
+          const itemth = ths[thi]
+          itemth.index = thi
+          thWidthArr.push(itemth.offsetLeft)
         }
 
-        directionIndex = ev_th.index;
+        directionIndex = ev_th.index
         // 以鼠标按下的这个th处,创建一个和th内容一样的div,
-        const createDiv = document.createElement("div");
-        createDiv.id = "created-div";
-        container.appendChild(createDiv);
+        const createDiv = document.createElement('div')
+        createDiv.id = 'created-div'
+        container.appendChild(createDiv)
 
         document.onmousemove = (e) => {
           // 用鼠标的位置减去鼠标相对元素的位置，得到元素的位置
-          let left = e.clientX - disX;
-          let top = e.clientY - disY;
+          let left = e.clientX - disX
+          let top = e.clientY - disY
           if (Math.abs(e.clientX - disX - ev_th.offsetLeft) < 10) {
-            return;
+            return
           }
           //绑定元素位置到positionX和positionY上面
 
           //移动当前元素
-          const thText = ev_th.innerHTML;
-          createDiv.innerHTML = thText;
-          createDiv.style.position = "absolute";
-          createDiv.style.width = ev_th.offsetWidth + "px";
-          createDiv.style.height = ev_th.offsetHeight + "px";
-          createDiv.style.background = "rgb(242, 242, 242)";
-          createDiv.style.lineHeight = ev_th.offsetHeight + "px";
-          createDiv.style.textAlign = "center";
-          createDiv.style.left = left + "px";
-          createDiv.style.top = top + "px";
-          createDiv.style.whiteSpace = "nowrap";
-          createDiv.style.textOverflow = "ellipsis";
-          createDiv.style.overflow = "hidden";
+          const thText = ev_th.innerHTML
+          createDiv.innerHTML = thText
+          createDiv.style.position = 'absolute'
+          createDiv.style.width = ev_th.offsetWidth + 'px'
+          createDiv.style.height = ev_th.offsetHeight + 'px'
+          createDiv.style.background = 'rgb(242, 242, 242)'
+          createDiv.style.lineHeight = ev_th.offsetHeight + 'px'
+          createDiv.style.textAlign = 'center'
+          createDiv.style.left = left + 'px'
+          createDiv.style.top = top + 'px'
+          createDiv.style.whiteSpace = 'nowrap'
+          createDiv.style.textOverflow = 'ellipsis'
+          createDiv.style.overflow = 'hidden'
 
-          finallIndex = 0; //鼠标拖动过程中所停留在的th的index
+          finallIndex = 0 //鼠标拖动过程中所停留在的th的index
 
-          var distance = createDiv.offsetLeft + scrollLeft;
-          var i = thWidthArr.length - 1;
+          var distance = createDiv.offsetLeft + scrollLeft
+          var i = thWidthArr.length - 1
           while (i >= 0) {
             if (distance >= thWidthArr[i]) {
-              finallIndex = i;
-              break;
+              finallIndex = i
+              break
             }
-            i--;
+            i--
           }
-        };
+        }
         document.onmouseup = (e) => {
           if (directionIndex < finallIndex) {
-            move = 1;
+            move = 1
           } //右移
           else if (directionIndex > finallIndex) {
-            move = 2;
+            move = 2
           } //左移
-          const th_trs = thead.getElementsByTagName("tr");
-          const td_trs = tbody.getElementsByTagName("tr");
-          container.removeChild(createDiv);
+          const th_trs = thead.getElementsByTagName('tr')
+          const td_trs = tbody.getElementsByTagName('tr')
+          container.removeChild(createDiv)
 
           // 取消鼠标拖动和鼠标抬起事件
-          document.onmousemove = null;
-          document.onmouseup = null;
+          document.onmousemove = null
+          document.onmouseup = null
 
           // 如果没有进行拖动操作(鼠标点下就抬起)
           if (Math.abs(e.clientX - disX - ev_th.offsetLeft) < 10) {
-            thWidthArr = [];
-            disX = 0;
-            return;
+            thWidthArr = []
+            disX = 0
+            return
           }
 
           // 遍历tr,将th和td放到最终的位置上
-          var itemtr = th_trs[0];
-          if (itemtr.getElementsByTagName("th").length) {
-            const ths = itemtr.getElementsByTagName("th");
+          var itemtr = th_trs[0]
+          if (itemtr.getElementsByTagName('th').length) {
+            const ths = itemtr.getElementsByTagName('th')
             if (move === 1) {
-              itemtr.insertBefore(ths[directionIndex], ths[finallIndex + 1]);
+              itemtr.insertBefore(ths[directionIndex], ths[finallIndex + 1])
             } else if (move === 2) {
-              itemtr.insertBefore(ths[directionIndex], ths[finallIndex]);
+              itemtr.insertBefore(ths[directionIndex], ths[finallIndex])
             }
           }
           for (let i = 0; i < td_trs.length; i++) {
-            const itemtr = td_trs[i];
-            if (itemtr.getElementsByTagName("td").length) {
-              const tds = itemtr.getElementsByTagName("td");
+            const itemtr = td_trs[i]
+            if (itemtr.getElementsByTagName('td').length) {
+              const tds = itemtr.getElementsByTagName('td')
               if (move === 1) {
-                itemtr.insertBefore(tds[directionIndex], tds[finallIndex + 1]);
+                itemtr.insertBefore(tds[directionIndex], tds[finallIndex + 1])
               } else if (move === 2) {
-                itemtr.insertBefore(tds[directionIndex], tds[finallIndex]);
+                itemtr.insertBefore(tds[directionIndex], tds[finallIndex])
               }
             }
           }
 
           // 重置thWidthArr和disX
-          thWidthArr = [];
-          disX = 0;
-        };
+          thWidthArr = []
+          disX = 0
+        }
       }
-    };
-  },
-});
+    }
+  }
+})
 export default {
-  name: "RfHeavyTable",
+  name: 'RfHeavyTable',
   components: {
-    TableCell,
+    TableCell
   },
   props: {
     ColumnFilteringFlag: {
       type: Boolean,
       default: false,
-      require: false,
+      require: false
     },
     config: {
       type: Array,
-      default: () => [],
+      default: () => []
     },
     data: {
       type: Array,
-      default: () => [],
+      default: () => []
     },
     paging: {
       type: Object,
@@ -343,13 +348,13 @@ export default {
         total: 0,
         autoSize: false,
         lineHeight: null,
-        offsetBottom: null,
-      }),
+        offsetBottom: null
+      })
     },
     loading: Boolean,
     tableClass: {
       type: String,
-      default: "heavyTable",
+      default: 'heavyTable'
     },
     tableProps: Object,
 
@@ -359,20 +364,20 @@ export default {
      */
     colorStatus: {
       type: Object,
-      default: () => ({}),
+      default: () => ({})
     },
     // 是否显示点击样式
     isSelectedHighlight: {
       type: Boolean,
-      default: true,
-    },
+      default: true
+    }
   },
   data() {
     return {
-      radioSlot: "",
+      radioSlot: '',
       selecteddata: [], //选中数据
       sortdata: {}, //排序
-      getIndex: "", //行点击
+      getIndex: '', //行点击
       checkedColumns: [], //列筛选
       checkBoxGroup: [], //列筛选
       // dragState: {
@@ -382,28 +387,26 @@ export default {
       //   dragging: false, // 是否正在拖动
       //   direction: undefined, // 拖动方向
       // },
-      tableHeader: this.config, //表头
-    };
+      tableHeader: this.config //表头
+    }
   },
   computed: {
     changeId() {
-      return this.tableProps && this.tableProps["row-key"]
-        ? this.tableProps["row-key"]
-        : "id";
-    },
+      return this.tableProps && this.tableProps['row-key'] ? this.tableProps['row-key'] : 'id'
+    }
   },
   beforeUpdate() {
     // 重新布局表格
     this.$nextTick(() => {
-      this.$refs.heavyTable.doLayout();
-    });
+      this.$refs.heavyTable.doLayout()
+    })
   },
   // 监控列隐藏
   watch: {
     checkedColumns: {
       handler(val) {
-        this.$emit("configChangeShow", val);
-        let arr = this.checkBoxGroup.filter((i) => !val.includes(i)); // 未选中
+        this.$emit('configChangeShow', val)
+        let arr = this.checkBoxGroup.filter((i) => !val.includes(i)) // 未选中
         /**
          * 是否记录本地缓存
          * localStorage.setItem(this.colTable, JSON.stringify(arr));
@@ -412,29 +415,29 @@ export default {
         this.config.filter((i) => {
           if (arr.indexOf(i.label) != -1) {
             this.$nextTick(function () {
-              i.istrue = false;
-              this.$refs.heavyTable.doLayout();
-            });
+              i.istrue = false
+              this.$refs.heavyTable.doLayout()
+            })
           } else {
             this.$nextTick(function () {
-              i.istrue = true;
-              this.$refs.heavyTable.doLayout();
-            });
+              i.istrue = true
+              this.$refs.heavyTable.doLayout()
+            })
           }
-        });
+        })
       },
-      immediate: false,
-    },
+      immediate: false
+    }
   },
   created() {
     // 列筛选
     this.config.forEach((item, index) => {
-      this.checkBoxGroup.push(item.label);
+      this.checkBoxGroup.push(item.label)
       if (item.istrue || item.istrue === undefined) {
         // 初始化并不是所有都为true,且会存在不写istrue属性的(这时为undefined)
-        this.checkedColumns.push(item.label);
+        this.checkedColumns.push(item.label)
       }
-    });
+    })
     /**
      * 是否记录本地缓存
      * 
@@ -451,69 +454,66 @@ export default {
   },
   mounted() {
     if (this.paging.autoSize) {
-      this.autoTableContentHeight();
-      window.addEventListener(
-        "resize",
-        debounce(this.autoTableContentHeight, 1000)
-      );
+      this.autoTableContentHeight()
+      window.addEventListener('resize', debounce(this.autoTableContentHeight, 1000))
     }
   },
 
   methods: {
     // 处理点击表格当前项目按钮事件
     handlerEvent(event, row, currItemKey) {
-      this.$emit(event, row, currItemKey);
+      this.$emit(event, row, currItemKey)
     },
     // 翻页
     handlePageChange(val) {
-      this.operatBtnClick("handlePageChange", val, this.propdata);
+      this.operatBtnClick('handlePageChange', val, this.propdata)
     },
     // 选择框改变事件
     handleSelectionChange(val) {
-      this.selecteddata = val;
-      this.$emit("handleselection", val);
-      this.$emit("selectionChange", val);
+      this.selecteddata = val
+      this.$emit('handleselection', val)
+      this.$emit('selectionChange', val)
     },
     // 过滤改变事件
     sortChange(val) {
-      console.log(val);
-      this.sortdata = val;
-      this.$emit("sortChange", val);
+      console.log(val)
+      this.sortdata = val
+      this.$emit('sortChange', val)
     },
     // 行点击事件
     rowClick(row) {
-      this.getIndex = row.index;
-      this.$emit("rowClick", row);
+      this.getIndex = row.index
+      this.$emit('rowClick', row)
     },
     // 双击某个单元格
     cellDblclick(row, column) {
-      this.$emit("cell-dblclick", row, column);
+      this.$emit('cell-dblclick', row, column)
     },
     // 清除或者设置点击样式
-    setIndex(index = "") {
-      this.getIndex = index;
+    setIndex(index = '') {
+      this.getIndex = index
     },
     // 行点击事件
     tableRowClassName({ row, rowIndex }) {
       //把每一行的索引放进row
-      row.index = rowIndex;
+      row.index = rowIndex
     },
     // 行点击事件
     selectedHighlight({ row, rowIndex }) {
       if (this.getIndex === rowIndex && this.isSelectedHighlight) {
         return {
-          "background-color": "#e6f1fe",
-        };
+          'background-color': '#e6f1fe'
+        }
       }
 
-      const { fieldName, colorList } = this.colorStatus;
-      if (!fieldName || !colorList) return;
-      const status = row[fieldName];
-      const item = colorList.find((it) => it.status === status);
+      const { fieldName, colorList } = this.colorStatus
+      if (!fieldName || !colorList) return
+      const status = row[fieldName]
+      const item = colorList.find((it) => it.status === status)
       if (item && item.color) {
         return {
-          "background-color": `${item.color}`,
-        };
+          'background-color': `${item.color}`
+        }
       }
     },
     // // //拖拽列
@@ -638,26 +638,26 @@ export default {
 
     // 设置表格一页最大行数
     autoTableContentHeight() {
-      if (!this.$refs["heavyTable"]) return;
-      const el = this.$refs["heavyTable"].bodyWrapper;
+      if (!this.$refs['heavyTable']) return
+      const el = this.$refs['heavyTable'].bodyWrapper
       // const ele = this.$refs["heavyTable"].bodyWrapper.firstChild.children[1].children[0]//el-table__cell
       // console.log(ele.offsetHeight)
-      const fullHeight = document.body.clientHeight;
-      const offsetTop = elementOffsetTop(el);
-      const offsetBottom = this.paging.offsetBottom || 92;
-      const tableLineHeight = this.paging.lineHeight || 57;
-      const visibleHeight = fullHeight - offsetTop - offsetBottom;
-      const rows = Math.floor(visibleHeight / tableLineHeight);
-      const oldPages = Math.ceil(this.paging.total / this.paging.size);
-      const nowPages = Math.ceil(this.paging.total / rows);
+      const fullHeight = document.body.clientHeight
+      const offsetTop = elementOffsetTop(el)
+      const offsetBottom = this.paging.offsetBottom || 92
+      const tableLineHeight = this.paging.lineHeight || 57
+      const visibleHeight = fullHeight - offsetTop - offsetBottom
+      const rows = Math.floor(visibleHeight / tableLineHeight)
+      const oldPages = Math.ceil(this.paging.total / this.paging.size)
+      const nowPages = Math.ceil(this.paging.total / rows)
       if (oldPages > nowPages && this.paging.page > nowPages) {
-        this.paging.page = nowPages;
+        this.paging.page = nowPages
       }
-      this.paging.size = rows < 1 ? 1 : rows;
-      this.$emit("current-change", this.paging.page);
-    },
-  },
-};
+      this.paging.size = rows < 1 ? 1 : rows
+      this.$emit('current-change', this.paging.page)
+    }
+  }
+}
 </script>
 
 <style lang="css" scoped>
diff --git a/src/views/basicData/locationData/config.js b/src/views/basicData/locationData/config.js
index e9c65d1..e21756a 100644
--- a/src/views/basicData/locationData/config.js
+++ b/src/views/basicData/locationData/config.js
@@ -10,6 +10,7 @@ export function tableConfig() {
         prop: "index",
         type: "index",
         istrue: true,
+
       },
       {
         label: "货位id",