huhao/ylt_diy
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: 用按钮排序替代拖拽，修复求和字段被清空的问题

Browse Source 
Coze-Commit-Type: user
Coze-User-ID: 3722323274763196
Coze-Conversation-ID: 9894087
This commit is contained in:
user9994793890
2026-07-10 16:02:13 +08:00
parent fe6a3dad00
commit 1f6f2fef80
2 changed files with 80 additions and 88 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
assets/image_20260710155918072.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 27 KiB

168
templates/index.html
View File

@@ -273,34 +273,17 @@
display: flex;
align-items: center;
gap: 8px;
padding: 8px 12px;
background: white;
border: 1px solid #e1e8ed;
border-radius: 6px;
cursor: grab;
transition: all 0.2s ease;
user-select: none;
padding: 6px 10px;
background: #f0f9ff;
border: 1px solid #bae6fd;
border-radius: 4px;
font-size: 12px;
}
.selected-field-item:hover {
border-color: #4a90e2;
box-shadow: 0 2px 4px rgba(74, 144, 226, 0.1);
}
.selected-field-item:active {
cursor: grabbing;
}
.selected-field-item.dragging {
opacity: 0.5;
border-color: #4a90e2;
background: #f0f7ff;
}
.selected-field-item .drag-handle {
color: #999;
font-size: 14px;
cursor: grab;
.selected-field-item .field-index {
color: #0284c7;
font-weight: 600;
min-width: 24px;
}
.selected-field-item .field-name {
@@ -309,6 +292,37 @@
color: #333;
}
.selected-field-item .field-actions {
display: flex;
gap: 4px;
}
.selected-field-item .btn-move {
width: 20px;
height: 20px;
border: 1px solid #cbd5e1;
background: white;
border-radius: 3px;
cursor: pointer;
font-size: 12px;
line-height: 1;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
}
.selected-field-item .btn-move:hover:not(:disabled) {
background: #e2e8f0;
border-color: #94a3b8;
}
.selected-field-item .btn-move:disabled {
opacity: 0.4;
cursor: not-allowed;
}
}
.selected-field-item .field-index {
font-size: 11px;
color: #999;
@@ -1167,7 +1181,12 @@
const fieldsList = document.getElementById('fields-list');
const checkedFields = Array.from(fieldsList.querySelectorAll('input:checked')).map(c => c.value);
refreshSumFieldsList(checkedFields, []);
// 保留当前求和字段的选择状态
const sumFieldsList = document.getElementById('sum-fields-list');
const currentSumFields = sumFieldsList ? Array.from(sumFieldsList.querySelectorAll('input:checked')).map(c => c.value) : [];
refreshSumFieldsList(checkedFields, currentSumFields);
refreshSelectedFieldsOrder(checkedFields);
}
@@ -1182,75 +1201,42 @@
orderList.innerHTML = selectedFields.map((fieldKey, index) => {
const field = allFields.find(f => f.key === fieldKey);
const displayName = field ? field.display : fieldKey;
const isFirst = index === 0;
const isLast = index === selectedFields.length - 1;
return `
<div class="selected-field-item" draggable="true" data-field="${fieldKey}">
<span class="drag-handle">☰</span>
<span class="field-name">${displayName}</span>
<div class="selected-field-item" data-field="${fieldKey}">
<span class="field-index">#${index + 1}</span>
<span class="field-name">${displayName}</span>
<div class="field-actions">
<button type="button" class="btn-move" onclick="moveFieldUp(${index})" ${isFirst ? 'disabled' : ''} title="上移">↑</button>
<button type="button" class="btn-move" onclick="moveFieldDown(${index})" ${isLast ? 'disabled' : ''} title="下移">↓</button>
</div>
</div>
`;
}).join('');
// 添加拖拽事件监听
initDragAndDrop();
}
}
// 初始化拖拽排序
function initDragAndDrop() {
// 字段上移
function moveFieldUp(index) {
if (index <= 0) return;
const orderList = document.getElementById('selected-fields-order');
if (!orderList) return;
const items = Array.from(orderList.querySelectorAll('.selected-field-item'));
const item = items[index];
const prevItem = items[index - 1];
orderList.insertBefore(item, prevItem);
updateFieldIndexes();
}
const items = orderList.querySelectorAll('.selected-field-item');
let draggedItem = null;
// 为容器添加 dragover 和 drop 事件
orderList.addEventListener('dragover', function(e) {
e.preventDefault();
e.dataTransfer.dropEffect = 'move';
});
orderList.addEventListener('drop', function(e) {
e.preventDefault();
});
items.forEach(item => {
item.addEventListener('dragstart', function(e) {
draggedItem = this;
setTimeout(() => this.classList.add('dragging'), 0);
e.dataTransfer.effectAllowed = 'move';
e.dataTransfer.setData('text/plain', this.dataset.field);
});
item.addEventListener('dragend', function() {
this.classList.remove('dragging');
draggedItem = null;
// 更新序号
updateFieldIndexes();
});
item.addEventListener('dragover', function(e) {
e.preventDefault();
e.stopPropagation();
e.dataTransfer.dropEffect = 'move';
if (this !== draggedItem && draggedItem) {
const rect = this.getBoundingClientRect();
const midY = rect.top + rect.height / 2;
if (e.clientY < midY) {
orderList.insertBefore(draggedItem, this);
} else {
orderList.insertBefore(draggedItem, this.nextSibling);
}
}
});
item.addEventListener('drop', function(e) {
e.preventDefault();
e.stopPropagation();
});
});
// 字段下移
function moveFieldDown(index) {
const orderList = document.getElementById('selected-fields-order');
const items = Array.from(orderList.querySelectorAll('.selected-field-item'));
if (index >= items.length - 1) return;
const item = items[index];
const nextItem = items[index + 1];
orderList.insertBefore(nextItem, item);
updateFieldIndexes();
}
// 更新字段序号
@@ -1258,8 +1244,14 @@
const orderList = document.getElementById('selected-fields-order');
const items = orderList.querySelectorAll('.selected-field-item');
items.forEach((item, index) => {
const indexEl = item.querySelector('.field-index');
if (indexEl) indexEl.textContent = `#${index + 1}`;
const indexSpan = item.querySelector('.field-index');
if (indexSpan) indexSpan.textContent = `#${index + 1}`;
// 更新按钮状态
const upBtn = item.querySelector('.btn-move[title="上移"]');
const downBtn = item.querySelector('.btn-move[title="下移"]');
if (upBtn) upBtn.disabled = index === 0;
if (downBtn) downBtn.disabled = index === items.length - 1;
});
}