From 957b0d9b40fbf5786d5cbbc35db50d12775ae502 Mon Sep 17 00:00:00 2001
From: roymondchen <roymondchen@tencent.com>
Date: Wed, 18 Dec 2024 15:34:04 +0800
Subject: [PATCH] =?UTF-8?q?fix(form):=20table=20=E5=BC=80=E5=90=AFdropSort?=
 =?UTF-8?q?=E5=90=8E=EF=BC=8C=E5=A4=9A=E6=AC=A1=E6=8B=96=E5=8A=A8row?=
 =?UTF-8?q?=E5=90=8E=E4=BC=9A=E6=8A=A5=E9=94=99?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/form/src/containers/Table.vue | 46 ++++++++++----------------
 1 file changed, 17 insertions(+), 29 deletions(-)

diff --git a/packages/form/src/containers/Table.vue b/packages/form/src/containers/Table.vue
index 2f607249..eda8bf7a 100644
--- a/packages/form/src/containers/Table.vue
+++ b/packages/form/src/containers/Table.vue
@@ -18,7 +18,7 @@
             @select="selectHandle"
             @sort-change="sortChange"
           >
-            <TMagicTableColumn v-if="config.itemExtra" :fixed="'left'" width="30" type="expand">
+            <TMagicTableColumn v-if="config.itemExtra && !config.dropSort" :fixed="'left'" width="30" type="expand">
               <template v-slot="scope">
                 <span v-html="itemExtra(config.itemExtra, scope.$index)" class="m-form-tip"></span>
               </template>
@@ -204,7 +204,7 @@ import {
   TMagicUpload,
   useZIndex,
 } from '@tmagic/design';
-import { asyncLoadJs, sleep } from '@tmagic/utils';
+import { asyncLoadJs } from '@tmagic/utils';
 
 import type { ContainerChangeEventData, FormState, SortProp, TableColumnConfig, TableConfig } from '../schema';
 import { display as displayFunc, initValue } from '../utils/form';
@@ -286,11 +286,6 @@ const sortChange = ({ prop, order }: SortProp) => {
   }
 };
 
-const foreUpdate = () => {
-  updateKey.value += 1;
-  setTimeout(() => rowDrop());
-};
-
 const swapArray = (index1: number, index2: number) => {
   props.model[modelName.value].splice(index1, 0, props.model[modelName.value].splice(index2, 1)[0]);
 
@@ -302,32 +297,25 @@ const swapArray = (index1: number, index2: number) => {
   mForm?.$emit('field-change', props.prop, props.model[modelName.value]);
 };
 
+let sortable: Sortable | undefined;
 const rowDrop = () => {
+  sortable?.destroy();
   const tableEl = tMagicTable.value?.instance.$el;
   const tBodyEl = tableEl?.querySelector('.el-table__body > tbody');
-  if (tBodyEl) {
-    // eslint-disable-next-line prefer-destructuring
-    const sortable = Sortable.create(tBodyEl, {
-      onEnd: ({ newIndex, oldIndex }: SortableEvent) => {
-        if (typeof newIndex === 'undefined') return;
-        if (typeof oldIndex === 'undefined') return;
-        swapArray(newIndex, oldIndex);
-        emit('change', props.model[modelName.value]);
-        foreUpdate();
-        sortable.destroy();
-        mForm?.$emit('field-change', props.prop, props.model[modelName.value]);
-        sleep(1000).then(() => {
-          const elTrs = tableEl.querySelectorAll('.el-table__body > tbody > tr');
-          if (elTrs?.[newIndex]) {
-            elTrs[newIndex].style.backgroundColor = 'rgba(243, 89, 59, 0.2)';
-            sleep(1000).then(() => {
-              elTrs[newIndex].style.backgroundColor = '';
-            });
-          }
-        });
-      },
-    });
+  if (!tBodyEl) {
+    return;
   }
+  sortable = Sortable.create(tBodyEl, {
+    draggable: '.tmagic-design-table-row',
+    direction: 'vertical',
+    onEnd: ({ newIndex, oldIndex }: SortableEvent) => {
+      if (typeof newIndex === 'undefined') return;
+      if (typeof oldIndex === 'undefined') return;
+      swapArray(newIndex, oldIndex);
+      emit('change', props.model[modelName.value]);
+      mForm?.$emit('field-change', props.prop, props.model[modelName.value]);
+    },
+  });
 };
 
 const newHandler = async (row?: any) => {