feat: 工况库选择规范和流程

2025-12-04 17:54:35 +08:00
parent 9fda07a9cf
commit 1ad95b3e71
6 changed files with 155 additions and 27 deletions
--- a/src/components/common/text/overflowTooltip.vue
+++ b/src/components/common/text/overflowTooltip.vue
@@ -0,0 +1,51 @@
+<template>
+  <el-tooltip
+    :content="content || ''"
+    :placement="placement"
+    :disabled="!isOverflow"
+    popper-class="text-overflow-tooltip-popper"
+  >
+    <span class="overflow-text" @mouseenter="checkOverflow" :style="{ maxWidth }">
+      <slot>{{ content }}</slot>
+    </span>
+  </el-tooltip>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+
+interface Props {
+  content?: string;
+  placement?: 'top' | 'bottom' | 'left' | 'right';
+  maxWidth?: string;
+}
+
+withDefaults(defineProps<Props>(), {
+  placement: 'top',
+  maxWidth: '100%',
+});
+
+const isOverflow = ref(false);
+
+const checkOverflow = (e: MouseEvent) => {
+  const el = e.target as HTMLElement;
+  isOverflow.value = el.scrollWidth > el.clientWidth;
+};
+</script>
+
+<style scoped>
+.overflow-text {
+  display: inline-block;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  vertical-align: middle;
+}
+</style>
+
+<style>
+.text-overflow-tooltip-popper {
+  max-width: 300px;
+  word-break: break-all;
+}
+</style>
--- a/src/components/common/treeCaseTable/flowTemplateSelect.vue
+++ b/src/components/common/treeCaseTable/flowTemplateSelect.vue
@@ -13,11 +13,28 @@
      @change="onChange"
    />
    <span v-else class="plain-label">
-      <template v-for="item in selectedTemplates" :key="item.uuid">
-        <el-icon class="view" @click="previewFlow(item.uuid)">
+      <template v-if="selectedTemplates.length === 1">
+        <el-icon class="view" @click="previewFlow(selectedTemplates[0].uuid)">
          <View />
        </el-icon>
-        <span class="name-text">{{ item.templateName }}</span>
+        <OverflowTooltip :content="selectedTemplates[0].templateName" max-width="120px" />
+      </template>
+      <template v-else-if="selectedTemplates.length >= 2">
+        <el-popover placement="bottom" trigger="hover" :width="220">
+          <template #reference>
+            <span class="link-text">
+              {{ $t('工况库.关联N个流程模版', { count: selectedTemplates.length }) }}
+            </span>
+          </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)">
+                <View />
+              </el-icon>
+              <OverflowTooltip :content="item.templateName" class="item-name" />
+            </div>
+          </div>
+        </el-popover>
      </template>
    </span>
    <flowViewDialog
@@ -32,6 +49,7 @@
 import { ref, watch, computed } from 'vue';
 import { useTaskStore } from '@/stores/taskPool';
 import flowViewDialog from '@/components/common/flow/flowViewDialog.vue';
+import OverflowTooltip from '@/components/common/text/overflowTooltip.vue';
 import { View } from '@element-plus/icons-vue';

 interface Props {
@@ -119,6 +137,7 @@ const previewFlow = (uuid: string) => {
  gap: 6px;
  vertical-align: middle;
  line-height: 1;
+  max-width: 100%;
  .view {
    display: inline-flex;
    align-items: center;
@@ -127,10 +146,32 @@ const previewFlow = (uuid: string) => {
    height: 20px;
    cursor: pointer;
    color: var(--el-color-primary);
-    margin-right: 0;
+    flex-shrink: 0;
  }
-  .name-text {
-    margin-right: 8px;
+  .link-text {
+    color: var(--el-color-primary);
+    cursor: pointer;
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+}
+
+.template-list {
+  .template-item {
+    display: flex;
+    align-items: center;
+    padding: 4px 0;
+    .item-name {
+      flex: 1;
+      min-width: 0;
+    }
+    .view {
+      flex-shrink: 0;
+      cursor: pointer;
+      color: var(--el-color-primary);
+      margin-right: 8px;
+    }
  }
 }
 </style>
--- a/src/components/common/treeCaseTable/knowledgeSelect.vue
+++ b/src/components/common/treeCaseTable/knowledgeSelect.vue
@@ -11,13 +11,33 @@
    :size="size"
    :show-all-levels="false"
    :placeholder="$t('通用.请选择')"
+    collapse-tags
+    :collapse-tags-tooltip="false"
+    :max-collapse-tags="1"
  />
  <span v-else class="plain-label">
-    <template v-for="(name, index) in displayNames" :key="index">
-      <el-icon class="view" @click="previewFileFun(currentFileIds[index])">
+    <template v-if="displayNames.length === 1">
+      <el-icon class="view" @click="previewFileFun(currentFileIds[0])">
        <View />
      </el-icon>
-      <span class="name-text">{{ name }}</span>
+      <OverflowTooltip :content="displayNames[0]" max-width="120px" />
+    </template>
+    <template v-else-if="displayNames.length >= 2">
+      <el-popover placement="bottom" trigger="hover" :width="220">
+        <template #reference>
+          <span class="link-text">
+            {{ $t('工况库.关联N个执行规范', { count: displayNames.length }) }}
+          </span>
+        </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])">
+              <View />
+            </el-icon>
+            <OverflowTooltip :content="name" class="item-name" />
+          </div>
+        </div>
+      </el-popover>
    </template>
  </span>
  <FilePreview
@@ -33,6 +53,7 @@ import { dataListDirApi, dataQueryDirApi } from '@/api/data/data';
 import { cloneDeep } from 'lodash-es';
 import type { CascaderProps } from 'element-plus';
 import FilePreview from '@/components/common/filePreview/index.vue';
+import OverflowTooltip from '@/components/common/text/overflowTooltip.vue';

 interface Props {
  modelValue?: any;
@@ -284,6 +305,7 @@ onMounted(() => {});
  gap: 6px;
  vertical-align: middle;
  line-height: 1;
+  max-width: 100%;
  .view {
    display: inline-flex;
    align-items: center;
@@ -292,10 +314,32 @@ onMounted(() => {});
    height: 20px;
    cursor: pointer;
    color: var(--el-color-primary);
-    margin-right: 0;
+    flex-shrink: 0;
  }
-  .name-text {
-    margin-right: 8px;
+  .link-text {
+    color: var(--el-color-primary);
+    cursor: pointer;
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+}
+
+.template-list {
+  .template-item {
+    display: flex;
+    align-items: center;
+    padding: 4px 0;
+    .item-name {
+      flex: 1;
+      min-width: 0;
+    }
+    .view {
+      flex-shrink: 0;
+      cursor: pointer;
+      color: var(--el-color-primary);
+      margin-right: 8px;
+    }
  }
 }
 </style>
--- a/src/utils/i18n/en.ts
+++ b/src/utils/i18n/en.ts
@@ -109,7 +109,6 @@ const lang = {
    导出Excel: 'Export Excel',
    删除库: 'Delete Pool',
    提交评审: 'Add Approve',
-
    当前有修改未保存是否将修改提交评审后离开:
      'You have unsaved changes! Do you want to submit them for review before leaving?',
    当前有修改未保存是否先提交评审:
@@ -157,6 +156,8 @@ const lang = {
    不能提交空数据: 'Cannot submit empty data',
    没有修改的数据需要提交审批: 'No modified data to submit for approval',
    指标库列表: 'Performance Pool List',
+    关联N个流程模版: 'Associated {count} Flow Templates',
+    关联N个执行规范: 'Associated {count} Standards',
  },
  知识库: {
    上传: 'Upload',
--- a/src/utils/i18n/zh.ts
+++ b/src/utils/i18n/zh.ts
@@ -109,7 +109,6 @@ const lang = {
    导出Excel: '导出Excel',
    删除库: '删除库',
    提交评审: '提交评审',
-
    当前有修改未保存是否将修改提交评审后离开: '当前有修改未保存！是否将修改提交评审后离开！',
    当前有修改未保存是否先提交评审: '当前有修改未保存！是否先提交评审？',
    工况清单库: '工况清单库',
@@ -154,6 +153,8 @@ const lang = {
    不能提交空数据: '不能提交空数据',
    没有修改的数据需要提交审批: '没有修改的数据需要提交审批',
    指标库列表: '指标库列表',
+    关联N个流程模版: '关联{count}个流程模版',
+    关联N个执行规范: '关联{count}个执行规范',
  },
  知识库: {
    上传: '上传',
--- a/src/views/competenceCenter/condition/components/delPoolModal.vue
+++ b/src/views/competenceCenter/condition/components/delPoolModal.vue
@@ -3,11 +3,7 @@
    <template #default>
      <div v-if="poolList.length > 0" class="pool-list">
        <div v-for="item in poolList" :key="item.id" class="pool-item">
-          <el-tooltip :content="item.poolName" placement="top" :disabled="!isTextOverflow">
-            <div class="name" @mouseenter="checkOverflow($event)">
-              {{ item.poolName }}
-            </div>
-          </el-tooltip>
+          <OverflowTooltip :content="item.poolName" class="name" />
          <div class="btn">
            <el-popconfirm
              :title="$t('知识库.确认删除')"
@@ -30,6 +26,7 @@
 <script setup lang="ts">
 import { computed, ref, type Ref } from 'vue';
 import Dialog from '@/components/common/dialog/index.vue';
+import OverflowTooltip from '@/components/common/text/overflowTooltip.vue';
 import { getAllTaskPoolApi, cleanTaskPoolApi } from '@/api/task/taskpool';
 import { ElMessage } from 'element-plus';
 import type { Pool } from './types.ts';
@@ -74,11 +71,6 @@ const onDelPoolFun = async (pool: Pool) => {
  }
 };

-const isTextOverflow = ref(false);
-const checkOverflow = (event: MouseEvent) => {
-  const target = event.target as HTMLElement;
-  isTextOverflow.value = target.scrollWidth > target.clientWidth;
-};
 </script>
 <style scoped lang="scss">
 .pool-list {
@@ -98,9 +90,7 @@ const checkOverflow = (event: MouseEvent) => {

 .name {
  flex: 1;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
+  min-width: 0;
  margin-right: 12px;
 }