51 lines
1.6 KiB
Vue
51 lines
1.6 KiB
Vue
|
<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>
|