fix: 自定义顺序无法拖拽

This commit is contained in:
chenjianxing 2021-09-17 15:21:17 +08:00 committed by jianxing
parent d9fb7ef66a
commit 942ba20bb7
3 changed files with 31 additions and 15 deletions

View File

@ -328,7 +328,9 @@ export default {
} }
}, },
doLayout() { doLayout() {
setTimeout(this.$refs.table.doLayout(), 200); if (this.$refs.table) {
setTimeout(this.$refs.table.doLayout(), 200);
}
}, },
filter(filters) { filter(filters) {
_filter(filters, this.condition); _filter(filters, this.condition);

View File

@ -78,13 +78,15 @@ export default {
mounted() { mounted() {
// //
let el = document.getElementById(this.id); let el = document.getElementById(this.id);
el.addEventListener('click', () => { if (el) {
this.defaultOpen = null; el.addEventListener('click', () => {
}); this.defaultOpen = null;
let input = el.getElementsByClassName('auto-textarea-input'); });
input[0].addEventListener('blur', () => { let input = el.getElementsByClassName('auto-textarea-input');
this.defaultOpen = 'preview'; input[0].addEventListener('blur', () => {
}); this.defaultOpen = 'preview';
});
}
}, },
methods: { methods: {
imgAdd(pos, file){ imgAdd(pos, file){

View File

@ -1,4 +1,4 @@
import {getCurrentProjectID, getCurrentUser, humpToLine} from "@/common/js/utils"; import {getCurrentProjectID, getCurrentUser, getUUID, humpToLine} from "@/common/js/utils";
import {CUSTOM_TABLE_HEADER} from "@/common/js/default-table-header"; import {CUSTOM_TABLE_HEADER} from "@/common/js/default-table-header";
import {updateCustomFieldTemplate} from "@/network/custom-field-template"; import {updateCustomFieldTemplate} from "@/network/custom-field-template";
import i18n from "@/i18n/i18n"; import i18n from "@/i18n/i18n";
@ -529,10 +529,20 @@ export function getCustomFieldBatchEditOption(customFields, typeArr, valueArr, m
export function handleRowDrop(data, callback) { export function handleRowDrop(data, callback) {
setTimeout(() => { setTimeout(() => {
const tbody = document.querySelector('.el-table__body-wrapper tbody'); const tbody = document.querySelector('.el-table__body-wrapper tbody');
const dropBars = tbody.getElementsByClassName('table-row-drop-bar');
// 每次调用生成一个class
// 避免增删列表数据时,回调函数中的 data 与实际 data 不一致
let dropClass = 'table-row-drop-bar-random' + '_' + getUUID();
dropBars.forEach(dropBar => {
dropBar.classList.add(dropClass);
});
Sortable.create(tbody, { Sortable.create(tbody, {
handle: ".table-row-drop-bar", handle: "." + dropClass,
animation: 100, animation: 100,
onEnd({ newIndex, oldIndex }) { onEnd({ newIndex, oldIndex}) {
let param = {}; let param = {};
param.moveId = data[oldIndex].id; param.moveId = data[oldIndex].id;
if (newIndex === 0) { if (newIndex === 0) {
@ -543,10 +553,12 @@ export function handleRowDrop(data, callback) {
param.moveMode = 'AFTER'; param.moveMode = 'AFTER';
param.targetId = data[newIndex].id; param.targetId = data[newIndex].id;
} }
const currRow = data.splice(oldIndex, 1)[0]; if (data && data.length > 1) {
data.splice(newIndex, 0, currRow); const currRow = data.splice(oldIndex, 1)[0];
if (callback) { data.splice(newIndex, 0, currRow);
callback(param); if (callback) {
callback(param);
}
} }
} }
}); });