<template>
|
<view class="app-container">
|
<PageHeader title="库存管理" @back="goBack" />
|
<up-tabs :list="tabs" @click="handleTabClick" :current="activeTab"/>
|
<swiper class="swiper-box" :current="activeTab" @change="handleSwiperChange">
|
<swiper-item class="swiper-item">
|
<qualified-record />
|
</swiper-item>
|
<swiper-item class="swiper-item">
|
<unqualified-record />
|
</swiper-item>
|
</swiper>
|
</view>
|
</template>
|
|
<script setup>
|
import { ref } from 'vue';
|
import PageHeader from "@/components/PageHeader.vue";
|
import QualifiedRecord from "./Qualified.vue";
|
import UnqualifiedRecord from "./Unqualified.vue";
|
|
const activeTab = ref(0);
|
const tabs = ref([
|
{ name: '合格库存' },
|
{ name: '不合格库存' }
|
]);
|
|
const handleTabClick = (item) => {
|
activeTab.value = item.index;
|
};
|
|
const handleSwiperChange = (e) => {
|
activeTab.value = e.detail.current;
|
};
|
|
const goBack = () => {
|
uni.navigateBack();
|
};
|
</script>
|
|
<style scoped lang="scss">
|
.app-container {
|
display: flex;
|
flex-direction: column;
|
height: 100vh;
|
background-color: #f8f9fa;
|
}
|
.swiper-box {
|
flex: 1;
|
}
|
.swiper-item {
|
height: 100%;
|
}
|
:deep(.up-tabs) {
|
background-color: #fff;
|
}
|
</style>
|
