参数弹窗滚动条优化

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