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 拖动排序

Browse Source
This commit is contained in:
roymondchen 2022-11-07 15:49:51 +08:00
parent 6fdc28e121
commit 617b025ce1
2 changed files with 21 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
packages/design/src/Table.vue
View File

@ -11,7 +11,7 @@
</template> </template>
<script setup lang="ts" name="TMTable"> <script setup lang="ts" name="TMTable">
import { computed, ref } from 'vue'; import { computed, ref, watchEffect } from 'vue';
import { getConfig } from './config'; import { getConfig } from './config';
@ -43,8 +43,16 @@ const sortChangeHandler = (...args: any[]) => {
emit('sort-change', ...args); emit('sort-change', ...args);
}; };
let $el: HTMLDivElement | undefined;
watchEffect(() => {
$el = table.value?.$el;
});
defineExpose({ defineExpose({
$el: table.value?.$el, instance: table,
$el,
clearSelection(...args: any[]) { clearSelection(...args: any[]) {
return table.value?.clearSelection(...args); return table.value?.clearSelection(...args);

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

@ -160,7 +160,7 @@
</template> </template>
<script setup lang="ts" name="MFormTable"> <script setup lang="ts" name="MFormTable">
import { computed, inject, onMounted, ref, toRefs } from 'vue'; import { computed, inject, onMounted, ref, toRefs, watchEffect } from 'vue';
import { ArrowDown, ArrowUp, Delete, FullScreen, Grid } from '@element-plus/icons-vue'; import { ArrowDown, ArrowUp, Delete, FullScreen, Grid } from '@element-plus/icons-vue';
import { cloneDeep } from 'lodash-es'; import { cloneDeep } from 'lodash-es';
import Sortable, { SortableEvent } from 'sortablejs'; import Sortable, { SortableEvent } from 'sortablejs';
@ -248,11 +248,11 @@ const swapArray = (index1: number, index2: number) => {
}; };
const rowDrop = () => { const rowDrop = () => {
const tableEl = tMagicTable.value?.$el; const tableEl = tMagicTable.value?.instance.$el;
if (tableEl?.querySelectorAll('.el-table__body > tbody')) { const tBodyEl = tableEl?.querySelector('.el-table__body > tbody');
if (tBodyEl) {
// eslint-disable-next-line prefer-destructuring // eslint-disable-next-line prefer-destructuring
const el = tableEl.querySelectorAll('.el-table__body > tbody')[0]; const sortable = Sortable.create(tBodyEl, {
const sortable = Sortable.create(el, {
onEnd: ({ newIndex, oldIndex }: SortableEvent) => { onEnd: ({ newIndex, oldIndex }: SortableEvent) => {
if (typeof newIndex === 'undefined') return; if (typeof newIndex === 'undefined') return;
if (typeof oldIndex === 'undefined') return; if (typeof oldIndex === 'undefined') return;
@ -262,11 +262,11 @@ const rowDrop = () => {
sortable.destroy(); sortable.destroy();
mForm?.$emit('field-change', props.prop, props.model[modelName.value]); mForm?.$emit('field-change', props.prop, props.model[modelName.value]);
sleep(1000).then(() => { sleep(1000).then(() => {
const eltrs = tableEl.querySelectorAll('.el-table__body > tbody > tr'); const elTrs = tableEl.querySelectorAll('.el-table__body > tbody > tr');
if (eltrs?.[newIndex]) { if (elTrs?.[newIndex]) {
eltrs[newIndex].style.backgroundColor = 'rgba(243, 89, 59, 0.2)'; elTrs[newIndex].style.backgroundColor = 'rgba(243, 89, 59, 0.2)';
sleep(1000).then(() => { sleep(1000).then(() => {
eltrs[newIndex].style.backgroundColor = ''; elTrs[newIndex].style.backgroundColor = '';
}); });
} }
}); });
@ -348,7 +348,9 @@ onMounted(() => {
if (props.sort && props.sortKey) { if (props.sort && props.sortKey) {
props.model[modelName.value].sort((a: any, b: any) => b[props.sortKey] - a[props.sortKey]); props.model[modelName.value].sort((a: any, b: any) => b[props.sortKey] - a[props.sortKey]);
} }
});
watchEffect(() => {
if (props.config.dropSort) { if (props.config.dropSort) {
rowDrop(); rowDrop();
} }