feat: 仿真地图添加卡片列表

2026-03-26 15:32:13 +08:00
parent 2db5cc0ac5
commit f65b9cfe92
13 changed files with 577 additions and 40 deletions
--- a/src/components/common/treeCaseTable/knowledgeSelect.vue
+++ b/src/components/common/treeCaseTable/knowledgeSelect.vue
@@ -71,6 +71,7 @@ interface Props {
  modelName?: string;
  editable?: boolean;
  size?: '' | 'large' | 'default' | 'small';
+  dirType?: number;
 }

 const props = withDefaults(defineProps<Props>(), {
@@ -78,6 +79,7 @@ const props = withDefaults(defineProps<Props>(), {
  modelName: '',
  editable: true,
  size: 'default',
+  dirType: DIR_TYPE.KNOWLEDGE,
 });

 const emit = defineEmits(['update:modelValue', 'update:modelName']);
@@ -123,7 +125,7 @@ const cascaderProps: CascaderProps = {
    if (!node?.data?.dataType) {
      res = await dataListDirApi({
        parentDirId: node?.data.parentId || '',
-        dirType: DIR_TYPE.KNOWLEDGE,
+        dirType: props.dirType,
      });
      if (res?.code === 200) {
        list = res.data.map((item: any) => {
@@ -179,7 +181,7 @@ const fetchChildren = async (parentId: string, parentNodeData?: any) => {
    }
    const res2: any = await dataListDirApi({
      parentDirId: parentId || '',
-      dirType: DIR_TYPE.KNOWLEDGE,
+      dirType: props.dirType,
    });
    if (res2?.code === 200) {
      return res2.data.map((item: any) => ({
@@ -324,7 +326,7 @@ onMounted(() => {});
  align-items: center;
  gap: 6px;
  vertical-align: middle;
-  line-height: 1;
+  line-height: normal;
  max-width: 100%;
  .view {
    display: inline-flex;
--- a/src/components/common/treeCaseTable/nodeDetailDialog.vue
+++ b/src/components/common/treeCaseTable/nodeDetailDialog.vue
@@ -43,6 +43,13 @@
          <template #form-standard>
            <KnowledgeSelect v-model="standard" v-model:modelName="formData.standardName" />
          </template>
+          <template #form-exceptionFile>
+            <KnowledgeSelect
+              v-model="exceptionFile"
+              v-model:modelName="formData.exceptionFileName"
+              :dirType="DIR_TYPE.EXCEPTION_CASE"
+            />
+          </template>
        </TableForm>
      </template>
      <template #footer>
@@ -69,6 +76,7 @@ import KnowledgeSelect from './knowledgeSelect.vue';
 import NodeNameMixed from './nodeNameMixed.vue';
 import { TABLE_NAME } from '@/utils/enum/tableName';
 import { useDict } from '@/utils/useDict';
+import { DIR_TYPE } from '@/utils/enum/data.ts';
 import { useI18n } from 'vue-i18n';
 import { useTaskStore } from '@/stores/taskPool';
 import { useReportStore } from '@/stores/reportTemplate';
@@ -124,6 +132,7 @@ const localItemNum = ref(props.itemNumList?.[1] || 4);
 // 流程模板相关
 const selectedFlowTemplate = ref<any>(null);
 const standard = ref();
+const exceptionFile = ref();
 const tagSortOrderList = ref<string[]>([]);
 const tagNameMap = ref<Map<string, string>>(new Map());
 const formData = ref<any>({});
@@ -138,6 +147,7 @@ watch(
      nextTick(() => {
        if (formData.value) {
          standard.value = formData.value.standard;
+          exceptionFile.value = formData.value.exceptionFile;
          if (formData.value.flowTemplate) {
            selectedFlowTemplate.value = formData.value.flowTemplate;
          } else {
@@ -153,6 +163,7 @@ watch(

 const resetFun = () => {
  standard.value = null;
+  exceptionFile.value = null;
  selectedFlowTemplate.value = null;
  tableFormRef.value?.resetFun();
 };
@@ -186,6 +197,8 @@ const onConfirmFun = async () => {
    const submitData = { ...formData.value };
    submitData.standard = standard.value;
    submitData.standardName = formData.value.standardName;
+    submitData.exceptionFile = exceptionFile.value;
+    submitData.exceptionFileName = formData.value.exceptionFileName;
    if (selectedFlowTemplate.value) {
      submitData.flowTemplate = selectedFlowTemplate.value;
    }
--- a/src/components/common/treeCaseTable/treeTable.vue
+++ b/src/components/common/treeCaseTable/treeTable.vue
@@ -382,6 +382,49 @@
      <template #standard-edit="{ row }">
        <knowledgeSelect v-model="row.standard" v-model:modelName="row.standardName" size="small" />
      </template>
+      <!-- 异常案例 -->
+      <template #exceptionText="{ row, icon }">
+        <TreeEditItem
+          v-if="[NODE_TYPE.TASK].includes(row.nodeType) || isMixedNodeType(row.nodeType)"
+          :data="row.exceptionText"
+          :editMode="editMode"
+          :icon="icon"
+        />
+      </template>
+      <template #exceptionText-edit="{ row }">
+        <el-input
+          v-model="row.exceptionText"
+          size="small"
+          placeholder="请输入"
+          @keyup.enter="enterFun"
+        />
+      </template>
+      <!-- 异常附件 -->
+      <template #exceptionFile="{ row, icon }">
+        <TreeEditItem
+          v-if="[NODE_TYPE.TASK].includes(row.nodeType) || isMixedNodeType(row.nodeType)"
+          :data="row.exceptionFile"
+          :editMode="editMode"
+          :icon="icon"
+          hideTitle
+        >
+          <knowledgeSelect
+            v-model="row.exceptionFile"
+            v-model:modelName="row.exceptionFileName"
+            :editable="false"
+            :dirType="DIR_TYPE.EXCEPTION_CASE"
+            size="small"
+          />
+        </TreeEditItem>
+      </template>
+      <template #exceptionFile-edit="{ row }">
+        <knowledgeSelect
+          v-model="row.exceptionFile"
+          v-model:modelName="row.exceptionFileName"
+          :dirType="DIR_TYPE.EXCEPTION_CASE"
+          size="small"
+        />
+      </template>
      <!-- 学科 -->
      <template #discipline="{ row, icon }">
        <TreeEditItem
@@ -725,6 +768,7 @@ import { poolCategoryTypeOptions } from '@/utils/project';
 import flowTemplateSelect from './flowTemplateSelect.vue';
 import reportTemplateSelect from './reportTemplateSelect.vue';
 import knowledgeSelect from './knowledgeSelect.vue';
+import { DIR_TYPE } from '@/utils/enum/data.ts';
 import UploadImg from '@/components/common/uploadImg/index.vue';
 import { useTaskStore } from '@/stores/taskPool';
 import { useReportStore } from '@/stores/reportTemplate';
--- a/src/router/router/routerData.ts
+++ b/src/router/router/routerData.ts
@@ -256,6 +256,12 @@ export default [
        name: 'CompetenceCenterCondition',
        component: () => import('@/views/competenceCenter/condition/index.vue'),
      },
+      {
+        title: '仿真地图库详情',
+        path: '/competenceCenter/condition/detail',
+        name: 'CompetenceCenterConditionDetail',
+        component: () => import('@/views/competenceCenter/condition/detail.vue'),
+      },
      {
        title: '仿真指标库',
        path: '/competenceCenter/indicator',
--- a/src/tenants/lyric/router/routerData.ts
+++ b/src/tenants/lyric/router/routerData.ts
@@ -262,6 +262,12 @@ export default [
        name: 'CompetenceCenterCondition',
        component: () => import('@/views/competenceCenter/condition/index.vue'),
      },
+      {
+        title: '仿真地图库详情',
+        path: '/competenceCenter/condition/detail',
+        name: 'CompetenceCenterConditionDetail',
+        component: () => import('@/views/competenceCenter/condition/detail.vue'),
+      },
      {
        title: '标准场景库',
        path: '/competenceCenter/standardScene',
--- a/src/utils/enum/tableName.ts
+++ b/src/utils/enum/tableName.ts
@@ -1,4 +1,6 @@
 export enum TABLE_NAME {
+  /** 工况库卡片列表 */
+  TASK_POOL_CARD_LIST = 'TASK_POOL_CARD_LIST',
  /** 工况库（树结构） */
  TASK_POOL = 'TASK_POOL',
  /** 工况库（一维表格） */
--- a/src/utils/i18n/en.ts
+++ b/src/utils/i18n/en.ts
@@ -55,6 +55,7 @@ const lang = {
    审核预览: 'Approval Preview',
    能力中心: 'Simulation Management',
    仿真地图库: 'Condition Map Library',
+    仿真地图库详情: 'Condition Map Library Detail',
    标准场景库: 'Standard Scene Library',
    仿真指标库: 'Indicator Library',
    仿真标准库: 'Knowledge Base',
--- a/src/utils/i18n/zh.ts
+++ b/src/utils/i18n/zh.ts
@@ -54,6 +54,7 @@ const lang = {
    审核预览: '审核预览',
    能力中心: '能力中心',
    仿真地图库: '仿真地图库',
+    仿真地图库详情: '仿真地图库详情',
    标准场景库: '标准场景库',
    仿真指标库: '仿真指标库',
    仿真标准库: '仿真标准库',
--- a/src/views/competenceCenter/condition/components/poolCard.vue
+++ b/src/views/competenceCenter/condition/components/poolCard.vue
@@ -0,0 +1,166 @@
+<template>
+  <div class="pool-card" @click="cardClickFun">
+    <img class="cover-img" :src="index % 2 !== 0 ? projectBlue : projectGreen" alt="" />
+    <div class="overlay-text">
+      <div class="pool-title" :title="pool.poolName">{{ pool.poolName }}</div>
+    </div>
+    <div class="bottom-box">
+      <span class="gl-text-ellipsis gl-pointer-class" :title="pool.poolName">
+        {{ pool.poolName }}
+      </span>
+      <span class="pool-meta">
+        {{ pool.currentVersion || pool.versions?.[0] || '--' }}
+      </span>
+    </div>
+
+    <el-dropdown
+      class="options-dropdown"
+      :class="{ 'is-visible': isDropdownVisible }"
+      @command="commandFun"
+      @visible-change="visibleChangeFun"
+    >
+      <div class="options-btn" @click.stop>
+        <el-icon :size="18"><MoreFilled /></el-icon>
+      </div>
+      <template #dropdown>
+        <el-dropdown-menu>
+          <template v-for="(action, aIndex) in actionList" :key="aIndex">
+            <el-dropdown-item :command="action">
+              <el-link :type="action.type">{{ action.title }}</el-link>
+            </el-dropdown-item>
+          </template>
+        </el-dropdown-menu>
+      </template>
+    </el-dropdown>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import { MoreFilled } from '@element-plus/icons-vue';
+import projectBlue from '@/assets/imgs/projectList/project-blue.png';
+import projectGreen from '@/assets/imgs/projectList/project-green.png';
+
+interface Props {
+  pool: any;
+  index: number;
+  actionList: any[];
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  pool: () => ({}),
+  index: 0,
+  actionList: () => [],
+});
+
+const emit = defineEmits(['cardClick', 'actionClick']);
+
+const isDropdownVisible = ref(false);
+
+const cardClickFun = () => {
+  emit('cardClick', props.pool);
+};
+
+const commandFun = (command: any) => {
+  emit('actionClick', props.pool, command);
+};
+
+const visibleChangeFun = (visible: boolean) => {
+  isDropdownVisible.value = visible;
+};
+</script>
+
+<style lang="scss" scoped>
+@use '@/views/task/projectList/components/projectCard.scss';
+
+.pool-card {
+  @extend .project-card-base;
+  border-radius: 12px;
+  border: 1px solid #f0f0f0;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
+
+  &:hover {
+    transform: translateY(-5px);
+    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
+
+    .cover-img {
+      transform: scale(1.1);
+    }
+  }
+
+  &:hover .options-dropdown,
+  .options-dropdown.is-visible {
+    opacity: 1;
+  }
+
+  .cover-img {
+    transition: transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
+  }
+
+  .overlay-text {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: calc(100% - 46px);
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    z-index: 5;
+    pointer-events: none;
+
+    .pool-title {
+      font-size: 22px;
+      font-weight: 700;
+      color: #545454;
+      margin-bottom: 6px;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      max-width: 90%;
+      letter-spacing: 0.5px;
+      pointer-events: auto;
+    }
+
+    .pool-version {
+      font-size: 13px;
+      color: #545454;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      max-width: 90%;
+      font-weight: 500;
+      pointer-events: auto;
+    }
+  }
+
+  .bottom-box {
+    height: 46px;
+    padding: 0 16px;
+    background-color: #ffffff;
+    border-top: 1px solid #f5f5f5;
+
+    .gl-text-ellipsis {
+      font-size: 14px;
+      color: #333;
+      font-weight: 500;
+      transition: color 0.3s;
+      &:hover {
+        color: var(--el-color-primary);
+      }
+    }
+
+    .pool-meta {
+      font-size: 12px;
+      color: #8c8c8c;
+      background-color: #f5f5f5;
+      border-radius: 6px;
+      padding: 0 8px;
+      height: 24px;
+      display: inline-flex;
+      align-items: center;
+    }
+  }
+}
+</style>
--- a/src/views/competenceCenter/condition/components/poolList.vue
+++ b/src/views/competenceCenter/condition/components/poolList.vue
@@ -0,0 +1,176 @@
+<template>
+  <div class="pool-list">
+    <BaseTable
+      ref="baseTableRef"
+      v-model:viewType="viewType"
+      hidePagination
+      :tableName="TABLE_NAME.TASK_POOL_CARD_LIST"
+      :api="poolListApi"
+      :actionList="actionList"
+      fullHeight
+    >
+      <template #cardTemplate="{ tableData }">
+        <div class="pool-card-box">
+          <div class="pool-grid">
+            <PoolCard
+              v-for="(pool, index) in tableData"
+              :key="pool.poolName"
+              :pool="pool"
+              :index="Number(index)"
+              :actionList="actionList"
+              @cardClick="cardClickFun"
+              @actionClick="actionClickFun"
+            />
+          </div>
+        </div>
+      </template>
+
+      <template #poolName="{ row }">
+        <span class="gl-pointer-class" @click="cardClickFun(row)">
+          {{ row.poolName }}
+        </span>
+      </template>
+      <template #leftOptions>
+        <el-button type="primary" icon="plus" @click="addPoolModalVisible = true">
+          {{ $t('工况库.创建地图库') }}
+        </el-button>
+      </template>
+      <template #versionCount="{ row }">
+        {{ row.versions?.length || 0 }}
+      </template>
+      <template #currentVersion="{ row }">
+        {{ row.currentVersion || row.versions?.[0] || '--' }}
+      </template>
+    </BaseTable>
+    <DelPoolModal
+      v-model="delPoolModalVisible"
+      :filterFn="delPoolFilterFun"
+      @confirm="onDelPoolConfirmFun"
+    />
+    <AddPoolModal
+      v-model="addPoolModalVisible"
+      mode="add"
+      :detail="{}"
+      :poolList="poolListData"
+      @confirm="onAddPoolConfirmFun"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import { useRoute } from 'vue-router';
+import BaseTable from '@/components/common/table/baseTable.vue';
+import PoolCard from './poolCard.vue';
+import DelPoolModal from './delPoolModal.vue';
+import AddPoolModal from './addPoolModal.vue';
+import { getAllTaskPoolApi } from '@/api/task/taskpool';
+import { filterExcludeStandardScene } from '@/utils/node';
+import { jumpPage } from '@/utils/common';
+import { TABLE_NAME } from '@/utils/enum/tableName';
+
+const route = useRoute();
+const baseTableRef = ref();
+const viewType = ref('card');
+
+const currentDelPool = ref<any>(null);
+
+const actionList = ref([
+  {
+    title: '查看',
+    type: 'primary',
+    click: (row: any) => {
+      cardClickFun(row);
+    },
+  },
+  {
+    title: '删除',
+    type: 'danger',
+    click: (row: any) => {
+      openDelPoolFun(row);
+    },
+  },
+]);
+
+const poolListApi = async (params: any) => {
+  const res: any = await getAllTaskPoolApi({ bCurrent: false });
+  if (res && res.code === 200 && Array.isArray(res.data)) {
+    let pools = res.data.filter(filterExcludeStandardScene).reverse();
+    pools = pools.map((pool: any) => ({
+      ...pool,
+      versionCount: pool.versions?.length || 0,
+      currentVersion: pool.versions?.[0] || '--',
+      versions: (pool.versions || []).reverse(),
+    }));
+    if (params?.poolName) {
+      pools = pools.filter((p: any) => p.poolName?.includes(params.poolName));
+    }
+    poolListData.value = pools;
+    return {
+      code: 200,
+      data: {
+        data: pools,
+        total: pools.length,
+      },
+    };
+  }
+  return res;
+};
+
+const cardClickFun = (pool: any) => {
+  jumpPage({
+    path: `${route.path}/detail`,
+    query: {
+      poolName: pool.poolName,
+    },
+  });
+};
+
+const actionClickFun = (pool: any, action: any) => {
+  action.click?.(pool);
+};
+
+const delPoolModalVisible = ref(false);
+
+const delPoolFilterFun = (pool: any) => {
+  if (currentDelPool.value) {
+    return pool.poolName === currentDelPool.value.poolName;
+  }
+  return filterExcludeStandardScene(pool);
+};
+
+const openDelPoolFun = (row?: any) => {
+  currentDelPool.value = row || null;
+  delPoolModalVisible.value = true;
+};
+const onDelPoolConfirmFun = () => {
+  baseTableRef.value?.resetFun();
+};
+
+const addPoolModalVisible = ref(false);
+const poolListData = ref<any[]>([]);
+const onAddPoolConfirmFun = (formData: any) => {
+  addPoolModalVisible.value = false;
+  jumpPage({
+    path: `${route.path}/detail`,
+    query: {
+      poolName: formData.name,
+      isNew: 'true',
+    },
+  });
+};
+</script>
+
+<style lang="scss" scoped>
+.gl-page-content-full {
+  .pool-list {
+    height: 100%;
+  }
+}
+
+.pool-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
+  gap: 20px;
+}
+</style>
--- a/src/views/competenceCenter/condition/components/taskPool.vue
+++ b/src/views/competenceCenter/condition/components/taskPool.vue
@@ -3,6 +3,9 @@
    <div class="contain" v-if="pageType === 'loadcase'">
      <div class="task-pool-toolbar">
        <el-space class="space">
+          <el-button icon="back" @click="goBackListFun">
+            {{ $t('通用.返回上一级') }}
+          </el-button>
          <template v-if="pageType === 'loadcase'">
            <el-button icon="plus" @click="addPoolFun">
              {{ $t('工况库.创建地图库') }}
@@ -216,7 +219,7 @@
 import { computed, nextTick, onMounted, ref, type Ref } from 'vue';
 import { ElMessageBox, ElMessage } from 'element-plus';
 import { cloneDeep, groupBy, isEqual, uniqBy } from 'lodash-es';
-import { onBeforeRouteLeave } from 'vue-router';
+import { onBeforeRouteLeave, useRoute } from 'vue-router';
 import { useI18n } from 'vue-i18n';
 import loadCaseTable from '@/components/common/treeCaseTable/loadCaseTable.vue';
 import AddApprove from './addApprove.vue';
@@ -255,6 +258,7 @@ import { jumpPage } from '@/utils/common';

 const commonStore = CommonStore();
 const taskStore = useTaskStore();
+const route = useRoute();

 interface Props {
  pageType: 'loadcase' | 'performance';
@@ -263,6 +267,10 @@ const props = withDefaults(defineProps<Props>(), {
  pageType: 'loadcase',
 });

+const emit = defineEmits<{
+  (e: 'approveComplete'): void;
+}>();
+
 const { t } = useI18n();
 const tenantId = getUserTenantId();
 const loading = ref(false);
@@ -514,6 +522,7 @@ const onAddApproveConfirmFun = async (formData: any) => {
  } else {
    await updateTaskPoolFun(formData);
  }
+  emit('approveComplete');
  if (pendingRoute.value) {
    const to = pendingRoute.value;
    pendingRoute.value = null;
@@ -1082,6 +1091,29 @@ const updateVersionsListFun = async () => {
  }
  await refreshTreeFun(targetVersion);
 };
+
+const goBackListFun = () => {
+  const listPath = route.path.replace(/\/detail$/, '');
+  if (!isHaveNotSave()) {
+    suppressConfirm.value = true;
+    jumpPage(listPath);
+    return;
+  }
+  ElMessageBox.confirm(t('工况库.当前有修改未保存是否将修改提交评审后离开'), t('通用.提示'), {
+    confirmButtonText: t('通用.是'),
+    cancelButtonText: t('通用.否'),
+    type: 'warning',
+  })
+    .then(() => {
+      pendingRoute.value = { path: listPath, fullPath: listPath };
+      dialogApproveUserVisible.value = true;
+    })
+    .catch(() => {
+      suppressConfirm.value = true;
+      jumpPage(listPath);
+    });
+};
+
 const addPoolModalVisible = ref(false);
 const addPoolFun = () => {
  addPoolModalVisible.value = true;
@@ -1168,7 +1200,6 @@ const onImportPoolConfirmFun = async (formData: any) => {
  importPoolModalVisible.value = false;
  const filterColumns = await getFilterColumnsFun();

-  // 根据导入类型决定使用的库名
  const targetPoolName =
    formData.importExcelType === 'cover' ? formData.selectedPool : formData.poolName;

@@ -1192,7 +1223,6 @@ const onImportPoolConfirmFun = async (formData: any) => {
          mergeListTableColumnsFun();
        }
      } else {
-        // 新增模式：直接创建新库
        const newPool = {
          tenantId,
          poolName: formData.poolName,
@@ -1249,6 +1279,28 @@ const onListTableFilterConfirmFun = (params: any) => {
 };

 const initPageDataFun = async () => {
+  const queryPoolName = route.query?.poolName as string;
+  const isNewPool = route.query?.isNew === 'true';
+
+  if (isNewPool && queryPoolName) {
+    const newPool = {
+      tenantId,
+      poolName: queryPoolName,
+    };
+    const { pools } = await getEarlyPoolData(true);
+    poolList.value = pools;
+    poolList.value.unshift(newPool);
+    currentPoolBrief.value = newPool;
+    currentPoolBriefVersion.value = null;
+    versionList.value = [];
+    tableData.value = [];
+    isEmptyPool.value = true;
+    setTimeout(() => {
+      taskStore.fetchTemplates();
+    }, 3000);
+    return;
+  }
+
  const forceRefresh = true;
  loading.value = true;
  const { pools, versions, data: dataRes } = await getEarlyPoolData(forceRefresh);
@@ -1259,41 +1311,47 @@ const initPageDataFun = async () => {
    return;
  }

-  const firstPool = pools[0];
  poolList.value = pools;
-  currentPoolBrief.value = firstPool;
-
-  if (!versions.length) {
-    versionList.value = [];
-    currentPoolBriefVersion.value = null;
-    tableData.value = [];
-    return;
-  }
-
-  const firstVersion = versions[0];
-  versionList.value = versions;
-  currentPoolBriefVersion.value = firstVersion;
-
-  if (props.pageType === 'performance') {
-    await queryTaskPoolPerformanceFun();
-    return;
-  }
-
-  if (dataRes?.code === 200 && dataRes.data?.poolBrief && dataRes.data?.nodes) {
-    const tree = transformPoolNodesToTree(dataRes.data.nodes);
-    tableData.value = tree;
-    isEmptyPool.value = false;
-    if (currentTableType.value === TableViewType.LIST) {
-      const flattenData = extractLeafNodesWithParentTypes(cloneDeep(tree));
-      mergeListTableColumnsFun(flattenData);
+  const targetPool = queryPoolName
+    ? pools.find((p: any) => p.poolName === queryPoolName) || pools[0]
+    : pools[0];
+  currentPoolBrief.value = targetPool;
+  const isFirstPool = targetPool.poolName === pools[0]?.poolName;
+  if (isFirstPool) {
+    if (!versions.length) {
+      versionList.value = [];
+      currentPoolBriefVersion.value = null;
+      tableData.value = [];
+      return;
+    }
+
+    const firstVersion = versions[0];
+    versionList.value = versions;
+    currentPoolBriefVersion.value = firstVersion;
+
+    if (props.pageType === 'performance') {
+      await queryTaskPoolPerformanceFun();
+      return;
+    }
+
+    if (dataRes?.code === 200 && dataRes.data?.poolBrief && dataRes.data?.nodes) {
+      const tree = transformPoolNodesToTree(dataRes.data.nodes);
+      tableData.value = tree;
+      isEmptyPool.value = false;
+      if (currentTableType.value === TableViewType.LIST) {
+        const flattenData = extractLeafNodesWithParentTypes(cloneDeep(tree));
+        mergeListTableColumnsFun(flattenData);
+      }
+      nextTick(() => {
+        originalSnapshot = cloneDeep(tree);
+      });
+      expandAllFun();
+    } else {
+      tableData.value = [];
+      isEmptyPool.value = true;
    }
-    nextTick(() => {
-      originalSnapshot = cloneDeep(tree);
-    });
-    expandAllFun();
  } else {
-    tableData.value = [];
-    isEmptyPool.value = true;
+    await updateVersionsListFun();
  }
  setTimeout(() => {
    taskStore.fetchTemplates();
@@ -1303,6 +1361,11 @@ const initPageDataFun = async () => {
 onMounted(async () => {
  await initPageDataFun();
 });
+
+defineExpose({
+  isHaveNotSave,
+  openAddApproveUserFun,
+});
 </script>

 <style src="./taskPool.scss" lang="scss" scoped />
--- a/src/views/competenceCenter/condition/detail.vue
+++ b/src/views/competenceCenter/condition/detail.vue
@@ -0,0 +1,57 @@
+<template>
+  <div class="gl-page-content-full">
+    <TaskPool
+      ref="taskPoolRef"
+      :key="activeKey"
+      pageType="loadcase"
+      @approveComplete="onApproveCompleteFun"
+    />
+  </div>
+</template>
+<script setup lang="ts">
+import { ref, watch } from 'vue';
+import { useRoute } from 'vue-router';
+import { ElMessageBox } from 'element-plus';
+import { useI18n } from 'vue-i18n';
+import TaskPool from './components/taskPool.vue';
+
+const route = useRoute();
+const { t } = useI18n();
+const taskPoolRef = ref<InstanceType<typeof TaskPool>>();
+const buildKeyFun = () => {
+  const poolName = (route.query?.poolName as string) || '';
+  const isNew = (route.query?.isNew as string) || '';
+  return `${poolName}_${isNew}`;
+};
+
+const activeKey = ref(buildKeyFun());
+
+const onApproveCompleteFun = () => {
+  activeKey.value = buildKeyFun();
+};
+
+watch(
+  () => route.query?.poolName,
+  (newVal, oldVal) => {
+    if (newVal === oldVal) {
+      return;
+    }
+    const newKey = buildKeyFun();
+    if (!taskPoolRef.value?.isHaveNotSave?.()) {
+      activeKey.value = newKey;
+      return;
+    }
+    ElMessageBox.confirm(t('工况库.当前有修改未保存是否将修改提交评审后离开'), t('通用.提示'), {
+      confirmButtonText: t('通用.是'),
+      cancelButtonText: t('通用.否'),
+      type: 'warning',
+    })
+      .then(() => {
+        taskPoolRef.value?.openAddApproveUserFun?.();
+      })
+      .catch(() => {
+        activeKey.value = newKey;
+      });
+  }
+);
+</script>
--- a/src/views/competenceCenter/condition/index.vue
+++ b/src/views/competenceCenter/condition/index.vue
@@ -1,8 +1,8 @@
 <template>
  <div class="gl-page-content-full">
-    <taskPool pageType="loadcase" />
+    <PoolList />
  </div>
 </template>
 <script setup lang="ts">
-import taskPool from './components/taskPool.vue';
+import PoolList from './components/poolList.vue';
 </script>