fix(form): table拖拽排序后重新渲染组件

packages/form/src/table/Table.vue

@@ -133,16 +133,15 @@ const { pageSize, currentPage, paginationData, handleSizeChange, handleCurrentCh
 );
 
 const { nextZIndex } = useZIndex();
+const updateKey = ref(1);
 
 const { addable, newHandler } = useAdd(props, emit);
 const { columns } = useTableColumns(props, emit, currentPage, pageSize, modelName);
-useSortable(props, emit, tMagicTableRef, modelName);
+useSortable(props, emit, tMagicTableRef, modelName, updateKey);
 const { isFullscreen, toggleFullscreen } = useFullscreen();
 const { importable, excelHandler, clearHandler } = useImport(props, emit, newHandler);
 const { selectHandle, toggleRowSelection } = useSelection(props, emit, tMagicTableRef);
 
-const updateKey = ref(1);
-
 const data = computed(() => (props.config.pagination ? paginationData.value : props.model[modelName.value]));
 
 const toggleMode = () => {

packages/form/src/table/useSortable.ts

@@ -1,4 +1,4 @@
-import { inject, type Ref, type ShallowRef, watchEffect } from 'vue';
+import { inject, nextTick, type Ref, type ShallowRef, watchEffect } from 'vue';
 import Sortable, { type SortableEvent } from 'sortablejs';
 
 import { type TMagicTable } from '@tmagic/design';
@@ -13,6 +13,7 @@ export const useSortable = (
   emit: (event: 'select' | 'change' | 'addDiffCount', ...args: any[]) => void,
   tMagicTableRef: ShallowRef<InstanceType<typeof TMagicTable> | null>,
   modelName: Ref<string | number>,
+  updateKey: Ref<number>,
 ) => {
   const mForm = inject<FormState | undefined>('mForm');
 
@@ -36,6 +37,13 @@ export const useSortable = (
 
         emit('change', newData);
         mForm?.$emit('field-change', newData);
+
+        sortable?.destroy();
+        sortable = undefined;
+
+        nextTick(() => {
+          updateKey.value += 1;
+        });
       },
     });
   };

packages/form/src/table/useTableColumns.ts

@@ -107,7 +107,7 @@ export const useTableColumns = (
       actionFixed = props.config.fixed;
     }
 
-    const actionClumn = {
+    const actionColumn = {
       props: {
         label: '操作',
         fixed: actionFixed,
@@ -133,7 +133,7 @@ export const useTableColumns = (
     };
 
     if (actionFixed !== 'right') {
-      columns.push(actionClumn);
+      columns.push(actionColumn);
     }
 
     if (props.sort && props.model[modelName.value] && props.model[modelName.value].length > 1) {
@@ -237,7 +237,7 @@ export const useTableColumns = (
     }
 
     if (actionFixed === 'right') {
-      columns.push(actionClumn);
+      columns.push(actionColumn);
     }
 
     return columns;

packages/form/src/utils/form.ts

@@ -16,7 +16,6 @@
  * limitations under the License.
  */
 
-import { toRaw } from 'vue';
 import dayjs from 'dayjs';
 import utc from 'dayjs/plugin/utc';
 import { cloneDeep } from 'lodash-es';
@@ -121,12 +120,12 @@ const initValueItem = function (
   asyncLoadConfig(value, initValue, item as HtmlField);
 
   // 这种情况比较多，提前结束
-  if (name && !items && typeof initValue[name] !== 'undefined') {
+  if (name && !items && typeof initValue?.[name] !== 'undefined') {
     if (typeof value[name] === 'undefined') {
       if (type === 'number') {
         value[name] = Number(initValue[name]);
       } else {
-        value[name] = typeof initValue[name] === 'object' ? cloneDeep(initValue[name]) : initValue[name];
+        value[name] = typeof initValue[name] === 'object' ? initValue[name] : initValue[name];
       }
     }
 
@@ -281,13 +280,15 @@ export const initValue = async (
 ) => {
   if (!Array.isArray(config)) throw new Error('config应该为数组');
 
-  let valuesTmp = createValues(mForm, config, toRaw(initValues), {});
+  const initValuesCopy = cloneDeep(initValues);
+
+  let valuesTmp = createValues(mForm, config, initValuesCopy, {});
 
   const [firstForm] = config as [ContainerCommonConfig];
   if (firstForm && typeof firstForm.onInitValue === 'function') {
     valuesTmp = await firstForm.onInitValue(mForm, {
       formValue: valuesTmp,
-      initValue: initValues,
+      initValue: initValuesCopy,
     });
   }