参数弹窗滚动条优化
This commit is contained in:
parent
f7a5d8070b
commit
a752238c78
|
|
@ -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; /* 保留滚动条占位,避免跳动 */
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue