图纸

src/views/design/condition/comm/filePage.vue

@@ -62,13 +62,11 @@ const props = defineProps({
     type: Number
   }
 });
-const uploadParams = computed(() => {
-  return {
-    catalogueId: props.catalogueId,
-    projectId: currentProject.value?.id
-  };
-});
 
+const uploadParams = ref({
+  catalogueId: '',
+  projectId: currentProject.value?.id
+});
 const total = ref(0);
 const data = reactive({
   queryParams: {
@@ -85,7 +83,7 @@ const data = reactive({
     changeReason: undefined,
     status: undefined,
     params: {},
-    catalogueId: props.catalogueId
+    catalogueId: undefined
   }
 });
 const { queryParams } = toRefs(data);
@@ -153,6 +151,14 @@ const onExport = (fileUrl) => {
 onMounted(() => {
   getList();
 });
+const getInfo = (id) => {
+  queryParams.value.catalogueId = id;
+  uploadParams.value.catalogueId = id;
+  getList();
+};
+defineExpose({
+  getInfo
+});
 </script>
 
 <style lang="scss">

src/views/design/condition/index.vue

@@ -1,40 +1,58 @@
 <template>
   <div class="p-6 bg-gray-50 condition">
-    <el-tabs v-model="activeName" type="border-card" :tab-position="tabPosition" class="demo-tabs" @tab-click="handleClick">
-      <el-tab-pane :label="item.catalogueName" :name="item.id" v-for="(item, i) of FolderList" :key="i">
-        <div style="height: 80vh; background: #f0f8ff9e">
-          <filePage :catalogueId="item.id"></filePage>
-        </div>
-      </el-tab-pane>
-    </el-tabs>
+    <div class="file-category">
+      <span style="color: #757575; display: inline-block; margin-bottom: 15px">文件分类</span>
+      <!-- 优化了图标与文字的对齐和间距 -->
+      <div v-for="(item, i) of FolderList" :key="i" :class="{ active: currentActive === i }" @click="handleClick(item, i)" class="category-item">
+        <el-icon :size="20" class="folder-icon">
+          <Folder />
+        </el-icon>
+        <span class="folder-name">
+          {{ item.catalogueName }}
+        </span>
+      </div>
+    </div>
+    <div class="boxs">
+      <filePage :catalogueId="catalogueId" ref="filePageRef"></filePage>
+    </div>
   </div>
 </template>
 
 <script setup name="DataCollectionForm" lang="ts">
-import { ref, reactive, computed, onMounted } from 'vue';
+import { ref, computed, onMounted } from 'vue';
 import { useUserStoreHook } from '@/store/modules/user';
-import type { TabsPaneContext, TabsInstance } from 'element-plus';
 import { collectCatalogueList } from '@/api/design/condition';
 import filePage from './comm/filePage.vue';
-const tabPosition = ref<TabsInstance['tabPosition']>('left');
+const filePageRef = ref<typeof filePage | null>(null);
 const activeName = ref('');
 // 获取用户 store
 const userStore = useUserStoreHook();
 // 从 store 中获取当前选中的项目
 const currentProject = computed(() => userStore.selectedProject);
 const FolderList = ref([]);
-const handleClick = (tab: TabsPaneContext, event: Event) => {
-  console.log(tab, event);
-};
+const catalogueId = ref(0);
 // 查询收资清单目录列表
 const getList = async () => {
   let res = await collectCatalogueList({ projectId: currentProject.value?.id });
   if (res.code == 200) {
     FolderList.value = res.rows;
-    activeName.value = res.rows[0].id; //默认第一个
+    catalogueId.value = res.rows[0].id; //默认第一个
+    nextTick(() => {
+      filePageRef.value?.getInfo(catalogueId.value); //重新加载当前页
+    });
   }
 };
+// 当前激活项的索引
+const currentActive = ref(0);
 
+// 点击事件处理函数
+const handleClick = (item, index) => {
+  currentActive.value = index;
+  catalogueId.value = item.id;
+  nextTick(() => {
+    filePageRef.value?.getInfo(item.id); //重新加载当前页
+  });
+};
 // 页面挂载时初始化数据
 onMounted(() => {
   getList();
@@ -43,8 +61,96 @@ onMounted(() => {
 
 <style lang="scss">
 .condition {
+  display: flex;
   .el-tabs__header {
-    height: 84vh !important;
+    height: 90vh !important;
+  }
+  .file-category {
+    width: 200px;
+    display: flex;
+    flex-direction: column;
+    /* 移除固定宽度，让容器根据内容自适应 */
+    background-color: #ffffff;
+    padding: 10px;
+    border-radius: 6px;
+    /* 限制最大宽度，防止内容过长 */
+    /* max-width: 200px; */
+    margin-right: 10px;
+  }
+
+  .file-category > div {
+    cursor: pointer;
+    padding: 8px 12px;
+    margin-bottom: 4px;
+    border-radius: 4px;
+    display: flex;
+    /* 文本不换行，确保宽度由内容决定 */
+    white-space: nowrap;
+    transition: all 0.2s ease;
+    > span {
+      margin-left: 6px;
+      /* color: #676767;
+      font-size: 18px; */
+    }
+  }
+
+  .file-category {
+    width: 200px;
+    display: flex;
+    flex-direction: column;
+    background-color: #ffffff;
+    padding: 10px;
+    border-radius: 8px;
+    margin-right: 10px;
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
+  }
+
+  // 分类项样式优化
+  .category-item {
+    cursor: pointer;
+    padding: 10px 12px;
+    margin-bottom: 4px;
+    border-radius: 6px;
+    display: inline-flex;
+    align-items: center; /* 垂直居中对齐 */
+    white-space: nowrap;
+    transition: all 0.25s ease;
+    font-size: 14px;
+    color: #334155;
+    line-height: 1; /* 确保行高一致 */
+
+    &:hover {
+      background-color: #f1f5f9;
+      transform: translateX(2px);
+    }
+  }
+
+  // 图标样式
+  .folder-icon {
+    color: #94a3b8;
+    transition: color 0.25s ease;
+  }
+
+  // 文件夹名称样式
+  .folder-name {
+    margin-left: 8px; /* 增加图标与文字间距 */
+    overflow: hidden;
+    text-overflow: ellipsis;
+    max-width: calc(100% - 30px); /* 限制最大宽度，防止溢出 */
+  }
+
+  // 活跃状态样式
+  .category-item.active {
+    background-color: #eff6ff;
+    color: #2563eb;
+    font-weight: 500;
+
+    .folder-icon {
+      color: #2563eb;
+    }
+  }
+  .boxs {
+    width: calc(100% - 220px);
   }
 }
 </style>