设计资料

src/views/design/condition/index.vue

@@ -0,0 +1,50 @@
+<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>
+</template>
+
+<script setup name="DataCollectionForm" lang="ts">
+import { ref, reactive, 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 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 getList = async () => {
+  let res = await collectCatalogueList({ projectId: currentProject.value?.id });
+  if (res.code == 200) {
+    FolderList.value = res.rows;
+    activeName.value = res.rows[0].id; //默认第一个
+  }
+};
+
+// 页面挂载时初始化数据
+onMounted(() => {
+  getList();
+});
+</script>
+
+<style lang="scss">
+.condition {
+  .el-tabs__header {
+    height: 84vh !important;
+  }
+}
+</style>