shift多选增加mixin

src/utils/shiftSelectMixin.js

+export default {
+    data() {
+        return {
+            keepDown: false,
+            // 按shfit键实现多选
+            startIndex: null
+        }
+    },
+    mounted() {
+        this._keydownBind = e => {
+            if (e.keyCode === 16 && e.shiftKey) {
+                this.keepDown = true;
+            }
+        }
+        this._keyupBind = e => {
+            this.keepDown = false;
+        }
+        window.addEventListener('keydown', this._keydownBind);
+        window.addEventListener('keyup', this._keyupBind);
+    },
+    deactivated() {
+        window.removeEventListener('keydown', this._keydownBind)
+        window.removeEventListener('keyup', this._keyupBind)
+    },
+    activated() {
+        window.addEventListener('keydown', this._keydownBind);
+        window.addEventListener('keyup', this._keyupBind);
+    },
+    beforeDestroy() {
+        window.removeEventListener('keydown', this._keydownBind)
+        window.removeEventListener('keyup', this._keyupBind)
+    },
+    methods: {
+        handleSelectionChange(selection, row) {
+            const data = this.$refs.tableRef.tableData; // 获取table当前数据
+            const startIdx = this.startIndex; // 获取首次选择对应列的索引
+            const lastindex = data.findIndex(v => v === selection[selection.length - 1])
+            this.selectedRows = selection;
+            if (this.keepDown && selection.includes(data[startIdx])) {
+              const sum = Math.abs(startIdx - lastindex) + 1; // 用户可能反向选取，所以要取绝对值
+              const min = Math.min(startIdx, lastindex); // 获取起点和终点较小的值
+              let i = 0;
+              while (i < sum) {
+                const index = min + i;
+                if (!this.selectedRows.includes(data[index])) {
+                  this.$refs.tableRef.toggleRowSelection(data[index], true);
+                }
+                i++;
+              }
+            } else {
+              this.startIndex = lastindex
+              
+            }
+            this.ids = this.selectedRows.map(item => item.workorderId)
+            this.single = this.selectedRows.length !== 1
+            this.multiple = !this.selectedRows.length
+        }
+    }
+}

src/views/mes/pro/workorder/indexApply.vue

@@ -216,7 +216,7 @@
       </div>
     </el-dialog>
 
-    <el-table v-loading="loading" :data="workorderList" row-key="workorderId" default-expand-all :max-height="tableHeight"
+    <el-table v-loading="loading" :data="workorderList" row-key="workorderId" default-expand-all :max-height="tableHeight" ref="tableRef"
       @selection-change="handleSelectionChange" :tree-props="{ children: 'children', hasChildren: 'hasChildren' }">
       <!-- 新增复选框 -->
       <el-table-column type="selection" width="55" align="center" />
@@ -582,7 +582,7 @@ import {
   closeWorkorder
 } from "@/api/mes/pro/workorder";
 import { addProtaskList } from "@/api/mes/pro/protask";
-
+import shiftSelectMixin from '@/utils/shiftSelectMixin'
 import Workorderbom from "./bom/bom.vue";
 import WorkorderItemList from "./items/item.vue";
 import ItemSelect from "@/components/itemSelect/single.vue";
@@ -607,6 +607,7 @@ export default {
     "mes_workorder_sourcetype",
     "mes_workorder_type",
   ],
+  mixins: [shiftSelectMixin],
   components: {
     productOrderDetail,
     productOrderSpecification,
@@ -771,6 +772,7 @@ export default {
     this.$nextTick(()=>{
       this.tableHeight = window.innerHeight - 358
     })
+    
   },
   methods: {
     //筛选日期设置默认值
@@ -1140,19 +1142,35 @@ export default {
       //   this.optType = "view";
       // });
     },
-    handleSelectionChange(selection) {
-      this.dict.type.mes_workorder_type
+    handleSelectionChange(selection, row) {
+      const data = this.$refs.tableRef.tableData; // 获取table当前数据
+      const startIdx = this.startIndex; // 获取首次选择对应列的索引
+      const lastindex = data.findIndex(v => v === selection[selection.length - 1])
+      this.selectedRows = selection;
+      if (this.keepDown && selection.includes(data[startIdx])) {
+        const sum = Math.abs(startIdx - lastindex) + 1; // 用户可能反向选取，所以要取绝对值
+        const min = Math.min(startIdx, lastindex); // 获取起点和终点较小的值
+        let i = 0;
+        while (i < sum) {
+          const index = min + i;
+          if (!this.selectedRows.includes(data[index])) {
+            this.$refs.tableRef.toggleRowSelection(data[index], true);
+          }
+          i++;
+        }
+      } else {
+        this.startIndex = lastindex
+        
+      }
+      this.ids = this.selectedRows.map(item => item.workorderId)
+      this.single = this.selectedRows.length !== 1
+      this.multiple = !this.selectedRows.length
       this.combinationDisable = false
-      selection.forEach(item => {
+      this.selectedRows.forEach(item => {
         if (['complements', 'prototype'].indexOf(item.workorderType) > -1) {
           this.combinationDisable = true
         }
       })
-      // this.selectedRows = val;
-      this.selectedRows = selection;
-      this.ids = selection.map(item => item.workorderId)
-      this.single = selection.length !== 1
-      this.multiple = !selection.length
     },
     //   // 多选框选中数据
     // handleSelectionChange(selection) {