feat:数据-列表shift操作

src/views/components/Data.vue

@@ -189,9 +189,7 @@
       @dragend="onAddShapeEnd"
     >
       <div
-        v-for="(device, i) in data.dataset.devices.sort((a, b) => {
-          return (a.checked === b.checked) ? 0 : a.checked ? -1 : 1;
-        })"
+        v-for="(device, i) in data.dataset.devices"
         v-show="!(device.show === false)"
       >
         <div
@@ -217,6 +215,7 @@
             <t-checkbox
               v-if="data.checkAll"
               v-model="device.checked"
+              @click="onCheckChange($event,i)"
             ></t-checkbox>
             <template v-else>
               <CaretDownSmallIcon
@@ -230,7 +229,7 @@
                 @click="device.expend = true"
               />
             </template>
-            <p class="title-span" @click="data.checkAll&&(device.checked = !device.checked)">{{ device.label }}</p>
+            <p class="title-span" @click="checkChange($event,device,i)">{{ device.label }}</p>
           </div>
 
           <div class="flex">
@@ -1466,6 +1465,42 @@ const onAddShapeEnd = () => {
   },1000);
 }
 
+let lastIndex = -1;
+
+const onCheckChange = (e,i) => {
+  if( lastIndex>-1 ){
+    if(e.shiftKey){
+      let start = Math.min(i,lastIndex);
+      let end = Math.max(i,lastIndex);
+      data.dataset?.devices?.forEach((item,index) => {
+        if(index>=start && index<=end){
+          item.checked = true;
+        }
+      });
+      e.stopPropagation();
+      e.preventDefault();
+    }
+  }
+  lastIndex = i;
+
+}
+
+const checkChange = (e, device, i) => {
+  data.checkAll&&(device.checked = !device.checked);
+  if( lastIndex>-1 ){
+    if(e.shiftKey){
+      let start = Math.min(i,lastIndex);
+      let end = Math.max(i,lastIndex);
+      data.dataset?.devices?.forEach((item,index) => {
+        if(index>=start && index<=end){
+          item.checked = true;
+        }
+      });
+    }
+  }
+  lastIndex = i;
+}
+
 const onAddmock = (item: any) => {
   if (data.dataMocks.find((elem) => elem.id === item.id)) {
     return;