参数弹窗滚动条优化

This commit is contained in:
JenniferW 2025-12-11 18:09:03 +08:00
parent f7a5d8070b
commit a752238c78
1 changed files with 50 additions and 16 deletions

View File

@ -293,14 +293,6 @@
{{ isFullscreen ? "退出全屏" : "全屏" }} {{ isFullscreen ? "退出全屏" : "全屏" }}
</span> </span>
</el-button> </el-button>
<el-button
text
size="small"
class="dialog-close-btn"
@click="compareDialogVisible = false"
>
<el-icon :size="16"><Close /></el-icon>
</el-button>
</div> </div>
</div> </div>
</template> </template>
@ -324,6 +316,7 @@
<el-table <el-table
:data="filteredCompareTableData" :data="filteredCompareTableData"
border border
height="60vh"
style="width: 100%; min-width: 600px" style="width: 100%; min-width: 600px"
> >
<el-table-column <el-table-column
@ -657,6 +650,35 @@ const getDictLabel = (dictRef, value) => {
return target ? target.label : null; return target ? target.label : null;
}; };
const getFieldLabelFromPart = (part = "") => {
const colonIndex = part.indexOf(":");
return colonIndex > 0 ? part.substring(0, colonIndex).trim() : null;
};
const getUsedFieldLabels = (excludeIndex = -1) => {
const labels = new Set();
const parts = currentInput.value.split(/[;]/);
parts.forEach((part, idx) => {
if (idx === excludeIndex) return;
const label = getFieldLabelFromPart(part.trim());
if (label) labels.add(label);
});
return labels;
};
const fieldLabelExists = (label, excludeIndex = -1) =>
getUsedFieldLabels(excludeIndex).has(label);
const focusFieldLabel = (label) => {
const parts = currentInput.value.split(/[;]/);
const idx = parts.findIndex(
(part) => getFieldLabelFromPart(part.trim()) === label
);
if (idx !== -1) {
focusConditionTag(idx);
}
};
const getFieldLabelByKey = (key) => { const getFieldLabelByKey = (key) => {
if (!key) return "-"; if (!key) return "-";
const dictLabel = getDictLabel(display_field, key); const dictLabel = getDictLabel(display_field, key);
@ -966,6 +988,7 @@ const updateSuggestionsFromValue = (value) => {
// //
const cursorIndex = findCursorConditionIndex(); const cursorIndex = findCursorConditionIndex();
const usedLabels = getUsedFieldLabels(cursorIndex);
if (cursorIndex >= 0 && cursorIndex < parts.length - 1) { if (cursorIndex >= 0 && cursorIndex < parts.length - 1) {
// 使 // 使
triggerConditionSuggestions(parts[cursorIndex].trim()); triggerConditionSuggestions(parts[cursorIndex].trim());
@ -992,7 +1015,9 @@ const updateSuggestionsFromValue = (value) => {
if (isEditingField) { if (isEditingField) {
// //
fieldSuggestions = allFields.value fieldSuggestions = allFields.value
.filter((field) => .filter(
(field) =>
!usedLabels.has(field.label) &&
field.label.toLowerCase().includes(currentPart.toLowerCase()) field.label.toLowerCase().includes(currentPart.toLowerCase())
) )
.map((field) => ({ .map((field) => ({
@ -1031,7 +1056,10 @@ const updateSuggestionsFromValue = (value) => {
// //
possibleFields.value = Object.values(valueFieldCounts) possibleFields.value = Object.values(valueFieldCounts)
.filter((item) => item.count > 1) // .filter(
(item) =>
item.count > 1 && item.field && !usedLabels.has(item.field.label)
) // 使
.sort((a, b) => b.count - a.count) // .sort((a, b) => b.count - a.count) //
.map((item) => item.field); .map((item) => item.field);
@ -1185,6 +1213,12 @@ const selectPossibleField = (field) => {
const parts = currentInput.value.split(/[;]/); const parts = currentInput.value.split(/[;]/);
let targetIndex = parts.length - 1; let targetIndex = parts.length - 1;
if (fieldLabelExists(field.label, targetIndex)) {
ElMessage.warning(`${field.label} 已选择,请直接修改对应的值`);
focusFieldLabel(field.label);
return;
}
// 使 // 使
if (parts.length > 0 && parts[targetIndex].trim() === "") { if (parts.length > 0 && parts[targetIndex].trim() === "") {
targetIndex = Math.max(0, parts.length - 2); targetIndex = Math.max(0, parts.length - 2);
@ -1268,6 +1302,11 @@ const selectSuggestion = (item) => {
let targetPart = parts[targetIndex] || ""; let targetPart = parts[targetIndex] || "";
if (item.type === "field") { if (item.type === "field") {
if (fieldLabelExists(item.label, targetIndex)) {
ElMessage.warning(`${item.label} 已选择,请直接修改对应的值`);
focusFieldLabel(item.label);
return;
}
// : // :
parts[targetIndex] = `${item.label}:`; parts[targetIndex] = `${item.label}:`;
} else { } else {
@ -2266,15 +2305,10 @@ function handleConfirm() {
.compare-table-wrap { .compare-table-wrap {
margin-top: 16px; margin-top: 16px;
max-width: 100%; max-width: 100%;
height: 70vh; /* 固定高度,保证横向滚动条总在可视区域 */
display: flex;
flex-direction: column;
} }
.compare-table-scroll { .compare-table-scroll {
flex: 1;
overflow-x: auto; overflow-x: auto;
overflow-y: auto;
padding-bottom: 8px; /* 预留滚动条空间避免遮挡内容 */ padding-bottom: 8px; /* 预留滚动条空间避免遮挡内容 */
scrollbar-gutter: stable both-edges; /* 保留滚动条占位,避免跳动 */ scrollbar-gutter: stable both-edges; /* 保留滚动条占位,避免跳动 */
} }