<template>
|
<view class="app-container">
|
<PageHeader title="库存管理"
|
@back="goBack" />
|
<view v-if="loading"
|
class="loading-state">
|
<up-loading-icon text="加载中..."></up-loading-icon>
|
</view>
|
<template v-else>
|
<up-tabs :list="tabs"
|
@click="handleTabClick"
|
:current="activeTab" />
|
<swiper class="swiper-box"
|
:current="activeTab"
|
@change="handleSwiperChange">
|
<swiper-item class="swiper-item"
|
v-for="tab in products"
|
:key="tab.id">
|
<record :product-id="tab.id"
|
v-if="activeTab === products.indexOf(tab) || initializedTabs.includes(tab.id)" />
|
</swiper-item>
|
</swiper>
|
</template>
|
</view>
|
</template>
|
|
<script setup>
|
import { ref, onMounted } from "vue";
|
import PageHeader from "@/components/PageHeader.vue";
|
import Record from "./Record.vue";
|
import { productTreeList } from "@/api/basicData/product.js";
|
|
const activeTab = ref(0);
|
const tabs = ref([]);
|
const products = ref([]);
|
const loading = ref(false);
|
const initializedTabs = ref([]);
|
|
const handleTabClick = item => {
|
activeTab.value = item.index;
|
if (!initializedTabs.value.includes(products.value[item.index].id)) {
|
initializedTabs.value.push(products.value[item.index].id);
|
}
|
};
|
|
const handleSwiperChange = e => {
|
const index = e.detail.current;
|
activeTab.value = index;
|
if (!initializedTabs.value.includes(products.value[index].id)) {
|
initializedTabs.value.push(products.value[index].id);
|
}
|
};
|
|
const fetchProducts = async () => {
|
loading.value = true;
|
try {
|
const res = await productTreeList();
|
// 过滤根节点产品
|
products.value = res
|
.filter(item => item.parentId === null)
|
.map(({ id, productName }) => ({ id, productName }));
|
tabs.value = products.value.map(p => ({ name: p.productName }));
|
|
if (products.value.length > 0) {
|
activeTab.value = 0;
|
initializedTabs.value = [products.value[0].id];
|
}
|
} finally {
|
loading.value = false;
|
}
|
};
|
|
const goBack = () => {
|
uni.navigateBack();
|
};
|
|
onMounted(() => {
|
fetchProducts();
|
});
|
</script>
|
|
<style scoped lang="scss">
|
.app-container {
|
display: flex;
|
flex-direction: column;
|
height: 100vh;
|
background-color: #f8f9fa;
|
}
|
.loading-state {
|
flex: 1;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
}
|
.swiper-box {
|
flex: 1;
|
}
|
.swiper-item {
|
height: 100%;
|
}
|
:deep(.up-tabs) {
|
background-color: #fff;
|
}
|
</style>
|
