fix: 工况弹出层最大高度

This commit is contained in:
JiangSheng
2026-02-03 13:55:02 +08:00
parent 9ca7142280
commit a28d4ae6dc
4 changed files with 100 additions and 19 deletions

View File

@@ -25,7 +25,12 @@
<OverflowTooltip :content="selectedTemplates[0].templateName" max-width="120px" />
</template>
<template v-else-if="selectedTemplates.length >= 2">
<el-popover placement="bottom" trigger="hover" :width="220">
<el-popover
placement="bottom"
trigger="hover"
:width="400"
popper-class="flow-template-select-popover"
>
<template #reference>
<span class="link-text">
{{ $t('工况库.关联N个流程模版', { count: selectedTemplates.length }) }}
@@ -33,7 +38,7 @@
</template>
<div class="template-list">
<div v-for="item in selectedTemplates" :key="item.uuid" class="template-item">
<el-icon class="view" @click="previewFlow(item.uuid)">
<el-icon class="view" :title="$t('通用.预览')" @click="previewFlow(item.uuid)">
<View />
</el-icon>
<OverflowTooltip :content="item.templateName" class="item-name" />
@@ -163,14 +168,24 @@ const previewFlow = (uuid: string) => {
}
.template-list {
max-height: 400px;
overflow-y: auto;
.template-item {
display: flex;
align-items: center;
padding: 4px 0;
padding: 8px 0;
border-bottom: 1px solid var(--el-border-color-lighter);
&:last-child {
border-bottom: none;
}
.item-name {
flex: 1;
min-width: 0;
}
.view {
flex-shrink: 0;
cursor: pointer;
@@ -180,3 +195,10 @@ const previewFlow = (uuid: string) => {
}
}
</style>
<style lang="scss">
.flow-template-select-popover {
max-height: 450px;
overflow: hidden;
}
</style>

View File

@@ -23,7 +23,12 @@
<OverflowTooltip :content="displayNames[0]" max-width="120px" />
</template>
<template v-else-if="displayNames.length >= 2">
<el-popover placement="bottom" trigger="hover" :width="220">
<el-popover
placement="bottom"
trigger="hover"
:width="400"
popper-class="knowledge-select-popover"
>
<template #reference>
<span class="link-text">
{{ $t('工况库.关联N个执行规范', { count: displayNames.length }) }}
@@ -31,7 +36,11 @@
</template>
<div class="template-list">
<div v-for="(name, index) in displayNames" :key="index" class="template-item">
<el-icon class="view" @click="previewFileFun(currentFileIds[index])">
<el-icon
class="view"
:title="$t('通用.预览')"
@click="previewFileFun(currentFileIds[index])"
>
<View />
</el-icon>
<OverflowTooltip :content="name" class="item-name" />
@@ -298,6 +307,10 @@ onMounted(() => {});
.tree-case-knowledge-select-full-width.el-cascader {
width: 100%;
}
.knowledge-select-popover {
max-height: 450px;
overflow: hidden;
}
</style>
<style scoped lang="scss">
@@ -328,14 +341,24 @@ onMounted(() => {});
}
.template-list {
max-height: 400px;
overflow-y: auto;
.template-item {
display: flex;
align-items: center;
padding: 4px 0;
padding: 8px 0;
border-bottom: 1px solid var(--el-border-color-lighter);
&:last-child {
border-bottom: none;
}
.item-name {
flex: 1;
min-width: 0;
}
.view {
flex-shrink: 0;
cursor: pointer;

View File

@@ -34,18 +34,25 @@
</span>
</template>
<template v-else-if="totalTaskCount >= 2">
<el-popover placement="bottom" trigger="hover" :width="280">
<el-popover
placement="bottom"
trigger="hover"
:width="400"
popper-class="pool-task-popover"
>
<template #reference>
<span class="link-text">{{ $t('工况库.关联N个工况', { count: totalTaskCount }) }}</span>
</template>
<div class="pool-list">
<div v-for="(pool, index) in modelValue" :key="index" class="pool-item">
<span class="pool-name"
>{{ pool.simulationPoolName }}_{{ pool.simulationPoolVersion }}</span
>
<span v-if="pool.taskBaseInfoList?.length" class="task-list">
({{ pool.taskBaseInfoList.map((t) => t.taskName).join(', ') }})
</span>
<div class="pool-header">
<span class="pool-name"
>{{ pool.simulationPoolName }}_{{ pool.simulationPoolVersion }}</span
>
</div>
<div v-if="pool.taskBaseInfoList?.length" class="task-list">
{{ pool.taskBaseInfoList.map((t) => t.taskName).join(', ') }}
</div>
</div>
</div>
</el-popover>
@@ -249,15 +256,42 @@ const removeTagFun = () => {
}
.pool-list {
max-height: 400px;
overflow-y: auto;
.pool-item {
padding: 4px 0;
.pool-name {
font-weight: bold;
padding: 8px 0;
border-bottom: 1px solid var(--el-border-color-lighter);
&:last-child {
border-bottom: none;
}
.pool-header {
margin-bottom: 4px;
.pool-name {
font-weight: bold;
color: var(--el-text-color-primary);
font-size: 14px;
}
}
.task-list {
color: #595959;
font-size: var(--font-size-text-small);
color: var(--el-text-color-secondary);
font-size: 12px;
line-height: 1.5;
word-break: break-all;
white-space: normal;
padding-left: 8px;
}
}
}
</style>
<style lang="scss">
.pool-task-popover {
max-height: 450px;
overflow: hidden;
}
</style>

View File

@@ -304,7 +304,9 @@ const validateFun = (): boolean => {
ElMessage.warning(t('工况库.名称不能为空'));
return false;
}
const emptyCodeNodes = visibleData.filter((n: any) => n.nodeType === NODE_TYPE.TASK && !n.nodeCode);
const emptyCodeNodes = visibleData.filter(
(n: any) => n.nodeType === NODE_TYPE.TASK && !n.nodeCode
);
if (emptyCodeNodes.length > 0) {
const names = emptyCodeNodes.map((n: any) => n.nodeName).join(', ');
ElMessage.warning(t('工况库.编号不能为空', { names }));