fix: enable drag-and-drop on entire SPU table rows

src/views/warehouse/warehouseRuleSetting/components/EditDialog.vue

@@ -94,23 +94,22 @@
         <el-icon style="color: #409eff; font-size: 16px"><Warning /></el-icon
         ><span>拖动SPU调整扣减顺序</span>
       </div>
-      <div class="spu-table-wrapper">
+      <div
+        class="spu-table-wrapper"
+        @dragstart="handleRowDragStart"
+        @dragover.prevent
+        @drop="handleRowDrop"
+        @dragend="handleRowDragEnd"
+      >
         <TableView
+          ref="spuTableRef"
           :paginated-data="editForm.spuList ?? []"
           :columns="spuTableColumns"
           row-key="warehouseSpu"
           size="small"
         >
-          <template #sortNo="{ row, index }">
-            <span
-              class="drag-handle"
-              draggable="true"
-              @dragstart="handleDragStart(index)"
-              @dragover.prevent
-              @drop="handleDrop(index)"
-            >
+          <template #sortNo="{ row }">
             {{ row.sortOrder }}
-            </span>
           </template>
           <template #spuImage="{ row }">
             <ImageView :src="row.skuImage" width="40px" height="40px" />
@@ -182,6 +181,7 @@ const spuSearchKeyword = ref('')
 const spuSearchResultList = ref<WarehouseRuleSpuItem[]>([])
 const popoverVisible = ref(false)
 const dragIndex = ref<number | null>(null)
+const spuTableRef = ref()
 
 watch(
   () => props.visible,
@@ -189,6 +189,9 @@ watch(
     if (visible && props.warehouseList.length) {
       editForm.value.warehouseId = props.warehouseList[0].id
     }
+    if (visible) {
+      setupRowDrag()
+    }
   },
 )
 
@@ -229,8 +232,52 @@ const resetFields = (data?: EditForm) => {
   })
 }
 
-const handleDragStart = (index: number) => {
+const getRowIndexFromEvent = (e: DragEvent) => {
+  const row = (e.target as HTMLElement).closest('tr.el-table__row')
+  if (!row?.parentElement) {
+    return null
+  }
+  return Array.from(row.parentElement.children).indexOf(row)
+}
+
+const setupRowDrag = () => {
+  nextTick(() => {
+    const tableEl = spuTableRef.value?.tableRef?.$el as HTMLElement | undefined
+    const rows = tableEl?.querySelectorAll(
+      '.el-table__body-wrapper tbody tr.el-table__row',
+    )
+    rows?.forEach((row) => {
+      row.setAttribute('draggable', 'true')
+    })
+  })
+}
+
+watch(() => editForm.value.spuList, setupRowDrag, { deep: true })
+
+const handleRowDragStart = (e: DragEvent) => {
+  const target = e.target as HTMLElement
+  if (target.closest('button, a, .el-button')) {
+    e.preventDefault()
+    return
+  }
+  const index = getRowIndexFromEvent(e)
+  if (index === null || index < 0) {
+    return
+  }
   dragIndex.value = index
+  e.dataTransfer!.effectAllowed = 'move'
+}
+
+const handleRowDrop = (e: DragEvent) => {
+  const index = getRowIndexFromEvent(e)
+  if (index === null || index < 0) {
+    return
+  }
+  handleDrop(index)
+}
+
+const handleRowDragEnd = () => {
+  dragIndex.value = null
 }
 
 const handleDrop = (index: number) => {
@@ -400,13 +447,15 @@ defineExpose({
 
 .spu-table-wrapper {
   height: 280px;
-}
 
-.drag-handle {
-  display: inline-block;
-  width: 100%;
+  :deep(tbody tr.el-table__row) {
     cursor: move;
     user-select: none;
+  }
+
+  :deep(img) {
+    -webkit-user-drag: none;
+  }
 }
 
 .dialog-footer {