1、完善配载
2、调整客商 3、调整临时额度 4、新增表头拖拽排序
This commit is contained in:
@@ -86,7 +86,8 @@ const collectLabelGroups = form => {
|
||||
};
|
||||
|
||||
const alignFormLabelsByColumn = form => {
|
||||
const groups = collectLabelGroups(form);
|
||||
if (form.classList.contains('dialog-form-label-fixed')) return;
|
||||
const groups = collectLabelGroups(form);
|
||||
|
||||
groups.forEach(group => {
|
||||
group.labels.forEach(label => {
|
||||
|
||||
@@ -0,0 +1,176 @@
|
||||
const STORAGE_PREFIX = 'tms:table-column-order:';
|
||||
|
||||
const getStore = instance =>
|
||||
instance?.store ||
|
||||
instance?.exposed?.store ||
|
||||
instance?.proxy?.store ||
|
||||
instance?.$?.exposed?.store ||
|
||||
instance?.$?.ctx?.store ||
|
||||
instance?.$?.store;
|
||||
|
||||
const getColumnKey = column =>
|
||||
String(column.property || column.columnKey || column.label || column.id || '');
|
||||
|
||||
const getTableKey = (instance, columns) => {
|
||||
const routePath = instance.$route?.path || instance.proxy?.$route?.path || window.location.pathname;
|
||||
const signature = columns
|
||||
.map(getColumnKey)
|
||||
.filter(Boolean)
|
||||
.sort()
|
||||
.join('|');
|
||||
return `${STORAGE_PREFIX}${routePath}:${signature}`;
|
||||
};
|
||||
|
||||
const canDragColumn = column =>
|
||||
column && !column.fixed && !['selection', 'index', 'expand'].includes(column.type);
|
||||
|
||||
const getColumnFromHeader = (header, columns) =>
|
||||
columns.find(column => header.classList.contains(column.id));
|
||||
|
||||
const updateColumnOrder = (instance, columns) => {
|
||||
const store = getStore(instance);
|
||||
if (!store?.states?._columns || columns.length !== store.states._columns.value.length) return;
|
||||
columns.forEach((column, index) => {
|
||||
column.no = index;
|
||||
});
|
||||
store.states._columns.value = [...columns];
|
||||
store.updateColumns?.();
|
||||
store.scheduleLayout?.(true, true);
|
||||
};
|
||||
|
||||
const restoreColumnOrder = instance => {
|
||||
const store = getStore(instance);
|
||||
const columns = store?.states?._columns?.value;
|
||||
if (!Array.isArray(columns) || columns.length < 2) return;
|
||||
const saved = JSON.parse(localStorage.getItem(getTableKey(instance, columns)) || '[]');
|
||||
if (!Array.isArray(saved) || !saved.length) return;
|
||||
const orderMap = new Map(saved.map((key, index) => [key, index]));
|
||||
const ordered = [...columns].sort((a, b) => {
|
||||
const aOrder = orderMap.get(getColumnKey(a));
|
||||
const bOrder = orderMap.get(getColumnKey(b));
|
||||
if (aOrder === undefined && bOrder === undefined) return a.no - b.no;
|
||||
if (aOrder === undefined) return 1;
|
||||
if (bOrder === undefined) return -1;
|
||||
return aOrder - bOrder;
|
||||
});
|
||||
updateColumnOrder(instance, ordered);
|
||||
};
|
||||
|
||||
const bindHeaderDrag = instance => {
|
||||
const store = getStore(instance);
|
||||
const columns = store?.states?._columns?.value;
|
||||
const headerRow = instance.$el?.querySelector('.el-table__header-wrapper thead tr');
|
||||
if (!headerRow || headerRow.__tmsColumnDragBound || !Array.isArray(columns)) return;
|
||||
headerRow.__tmsColumnDragBound = true;
|
||||
let draggingColumn = null;
|
||||
|
||||
[...headerRow.children].forEach(header => {
|
||||
const column = getColumnFromHeader(header, columns);
|
||||
if (!canDragColumn(column)) return;
|
||||
header.draggable = true;
|
||||
header.classList.add('tms-table-column-draggable');
|
||||
});
|
||||
|
||||
headerRow.addEventListener('dragstart', event => {
|
||||
const header = event.target.closest('th');
|
||||
const currentColumns = store.states._columns.value;
|
||||
const column = header && getColumnFromHeader(header, currentColumns);
|
||||
if (!canDragColumn(column)) {
|
||||
event.preventDefault();
|
||||
return;
|
||||
}
|
||||
draggingColumn = column;
|
||||
event.dataTransfer.effectAllowed = 'move';
|
||||
header.classList.add('is-column-dragging');
|
||||
});
|
||||
headerRow.addEventListener('dragover', event => {
|
||||
const header = event.target.closest('th');
|
||||
const column = header && getColumnFromHeader(header, store.states._columns.value);
|
||||
if (draggingColumn && canDragColumn(column)) event.preventDefault();
|
||||
});
|
||||
headerRow.addEventListener('drop', event => {
|
||||
const header = event.target.closest('th');
|
||||
const targetColumn = header && getColumnFromHeader(header, store.states._columns.value);
|
||||
if (!draggingColumn || !canDragColumn(targetColumn) || draggingColumn === targetColumn) return;
|
||||
event.preventDefault();
|
||||
const ordered = [...store.states._columns.value];
|
||||
const from = ordered.indexOf(draggingColumn);
|
||||
if (from < 0) return;
|
||||
const movingRight = from < ordered.indexOf(targetColumn);
|
||||
ordered.splice(from, 1);
|
||||
const targetIndex = ordered.indexOf(targetColumn);
|
||||
ordered.splice(targetIndex + (movingRight ? 1 : 0), 0, draggingColumn);
|
||||
updateColumnOrder(instance, ordered);
|
||||
localStorage.setItem(getTableKey(instance, ordered), JSON.stringify(ordered.map(getColumnKey)));
|
||||
});
|
||||
headerRow.addEventListener('dragend', () => {
|
||||
instance.$el.querySelectorAll('.is-column-dragging').forEach(item => item.classList.remove('is-column-dragging'));
|
||||
draggingColumn = null;
|
||||
});
|
||||
};
|
||||
|
||||
export const setupTableColumnDrag = app => {
|
||||
let dragging = null;
|
||||
const restoredTables = new WeakSet();
|
||||
const getTableInstance = element => {
|
||||
let instance = element.closest('.el-table')?.__vueParentComponent;
|
||||
while (instance && instance.type?.name !== 'ElTable') {
|
||||
instance = instance.parent;
|
||||
}
|
||||
return instance;
|
||||
};
|
||||
const enableHeaderDrag = () => {
|
||||
document.querySelectorAll('.el-table__header-wrapper th').forEach(header => {
|
||||
if (header.closest('.el-table__fixed, .el-table__fixed-right')) return;
|
||||
const instance = getTableInstance(header);
|
||||
if (instance && !restoredTables.has(instance)) {
|
||||
restoreColumnOrder(instance);
|
||||
restoredTables.add(instance);
|
||||
}
|
||||
const column = getColumnFromHeader(header, getStore(instance)?.states?._columns?.value || []);
|
||||
if (!canDragColumn(column)) return;
|
||||
header.draggable = true;
|
||||
header.classList.add('tms-table-column-draggable');
|
||||
});
|
||||
};
|
||||
const tableObserver = new MutationObserver(enableHeaderDrag);
|
||||
tableObserver.observe(document.documentElement, { childList: true, subtree: true });
|
||||
setTimeout(enableHeaderDrag, 0);
|
||||
|
||||
document.addEventListener('dragstart', event => {
|
||||
const header = event.target.closest?.('.el-table__header-wrapper th.tms-table-column-draggable');
|
||||
const instance = header && getTableInstance(header);
|
||||
const store = getStore(instance);
|
||||
const column = header && getColumnFromHeader(header, store?.states?._columns?.value || []);
|
||||
if (!header || !canDragColumn(column)) return;
|
||||
dragging = { instance, column, header };
|
||||
event.dataTransfer.effectAllowed = 'move';
|
||||
header.classList.add('is-column-dragging');
|
||||
});
|
||||
document.addEventListener('dragover', event => {
|
||||
const header = event.target.closest?.('.el-table__header-wrapper th.tms-table-column-draggable');
|
||||
const instance = header && getTableInstance(header);
|
||||
if (dragging && instance === dragging.instance) event.preventDefault();
|
||||
});
|
||||
document.addEventListener('drop', event => {
|
||||
const header = event.target.closest?.('.el-table__header-wrapper th.tms-table-column-draggable');
|
||||
const instance = header && getTableInstance(header);
|
||||
const store = getStore(instance);
|
||||
const target = header && getColumnFromHeader(header, store?.states?._columns?.value || []);
|
||||
if (!dragging || instance !== dragging.instance || !canDragColumn(target) || target === dragging.column) return;
|
||||
event.preventDefault();
|
||||
const ordered = [...store.states._columns.value];
|
||||
const from = ordered.indexOf(dragging.column);
|
||||
if (from < 0) return;
|
||||
const movingRight = from < ordered.indexOf(target);
|
||||
ordered.splice(from, 1);
|
||||
const targetIndex = ordered.indexOf(target);
|
||||
ordered.splice(targetIndex + (movingRight ? 1 : 0), 0, dragging.column);
|
||||
updateColumnOrder(instance, ordered);
|
||||
localStorage.setItem(getTableKey(instance, ordered), JSON.stringify(ordered.map(getColumnKey)));
|
||||
});
|
||||
document.addEventListener('dragend', () => {
|
||||
document.querySelectorAll('.is-column-dragging').forEach(item => item.classList.remove('is-column-dragging'));
|
||||
dragging = null;
|
||||
});
|
||||
};
|
||||
Reference in New Issue
Block a user