35 lines
2.2 KiB
Vue
35 lines
2.2 KiB
Vue
<script setup lang="ts">
|
|
import { computed, ref } from 'vue'
|
|
import { useRoute, useRouter } from 'vue-router'
|
|
import AnalyticsView from '../components/AnalyticsView.vue'
|
|
import InventoryTurnoverView from '../components/InventoryTurnoverView.vue'
|
|
import { inventoryView } from '../turnoverNavigation'
|
|
const route = useRoute(), router = useRouter()
|
|
const retainedWarehouse = ref('')
|
|
const selected = computed(() => {
|
|
try { return { view: inventoryView(route.query), error: '' } }
|
|
catch (cause) { return { view: null, error: (cause as Error).message } }
|
|
})
|
|
function switchView(view: 'TURNOVER' | 'DETAIL') {
|
|
const warehouseCode = retainedWarehouse.value || (typeof route.query.warehouseCode === 'string' ? route.query.warehouseCode : '')
|
|
void router.push({ path: '/self-operated/inventory', query: { view, ...(warehouseCode ? { warehouseCode } : {}) } })
|
|
}
|
|
</script>
|
|
<template>
|
|
<p v-if="selected.error" role="alert">{{ selected.error }}</p>
|
|
<component v-else :is="selected.view === 'DETAIL' ? AnalyticsView : InventoryTurnoverView" v-bind="selected.view === 'DETAIL' ? { mode: 'inventory' as const } : {}" @warehouse-selected="retainedWarehouse = $event">
|
|
<template #view-tabs>
|
|
<nav class="inventory-views" aria-label="库存分析视图">
|
|
<button type="button" :aria-pressed="selected.view === 'TURNOVER'" @click="switchView('TURNOVER')">库存周转</button>
|
|
<button type="button" :aria-pressed="selected.view === 'DETAIL'" @click="switchView('DETAIL')">库存明细</button>
|
|
</nav>
|
|
</template>
|
|
</component>
|
|
</template>
|
|
<style scoped>
|
|
.inventory-views { display: flex; align-items: center; gap: var(--admin-space-4); }
|
|
.inventory-views button { border: 0; border-bottom: 2px solid transparent; background: transparent; min-height: var(--admin-control-height); padding: var(--admin-space-1) var(--admin-space-2); color: var(--el-text-color-regular); font: inherit; cursor: pointer; white-space: nowrap; }
|
|
.inventory-views button[aria-pressed="true"] { color: var(--el-color-primary); border-bottom-color: var(--el-color-primary); font-weight: 600; }
|
|
.inventory-views button:focus-visible { outline: 2px solid var(--el-color-primary); outline-offset: 2px; }
|
|
</style>
|