JLNTV_IPD/tmagic-editor
4
0
Fork 0
mirror of https://github.com/Tencent/tmagic-editor.git synced 2025-04-06 03:57:56 +08:00
Code Issues Projects Releases Wiki Activity

fix(form): table 开启dropSort后，多次拖动row后会报错

Browse Source
This commit is contained in:
roymondchen 2024-12-18 15:34:04 +08:00
parent 432f1f5a55
commit 957b0d9b40
1 changed files with 17 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

46
packages/form/src/containers/Table.vue
View File

@ -18,7 +18,7 @@
@select="selectHandle" @select="selectHandle"
@sort-change="sortChange" @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"> <template v-slot="scope">
<span v-html="itemExtra(config.itemExtra, scope.$index)" class="m-form-tip"></span> <span v-html="itemExtra(config.itemExtra, scope.$index)" class="m-form-tip"></span>
</template> </template>
@ -204,7 +204,7 @@ import {
TMagicUpload, TMagicUpload,
useZIndex, useZIndex,
} from '@tmagic/design'; } from '@tmagic/design';
import { asyncLoadJs, sleep } from '@tmagic/utils'; import { asyncLoadJs } from '@tmagic/utils';
import type { ContainerChangeEventData, FormState, SortProp, TableColumnConfig, TableConfig } from '../schema'; import type { ContainerChangeEventData, FormState, SortProp, TableColumnConfig, TableConfig } from '../schema';
import { display as displayFunc, initValue } from '../utils/form'; 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) => { const swapArray = (index1: number, index2: number) => {
props.model[modelName.value].splice(index1, 0, props.model[modelName.value].splice(index2, 1)[0]); 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]); mForm?.$emit('field-change', props.prop, props.model[modelName.value]);
}; };
let sortable: Sortable | undefined;
const rowDrop = () => { const rowDrop = () => {
sortable?.destroy();
const tableEl = tMagicTable.value?.instance.$el; const tableEl = tMagicTable.value?.instance.$el;
const tBodyEl = tableEl?.querySelector('.el-table__body > tbody'); const tBodyEl = tableEl?.querySelector('.el-table__body > tbody');
if (tBodyEl) { if (!tBodyEl) {
// eslint-disable-next-line prefer-destructuring return;
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 = '';
});
}
});
},
});
} }
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) => { const newHandler = async (row?: any) => {