设备与库位聚合页拆分为设备接入与库位管理

将“设备与库位”聚合页拆分为“设备接入”和“库位管理”两个独立页面,调整相关菜单、路由、权限、页面定义及映射。FacilityConfigView.vue 仅保留设备接入,库位管理内容移除,LocationView.vue 删除,新增 WarehouseManagementView.vue。同步精简聚合页 tab 逻辑及重定向,后端 PageCatalog、DeploymentCatalog 和前端 rbac.ts、AppShell.vue、index.ts 等均已更新。
This commit is contained in:
ArtoriasWu
2026-06-24 16:21:31 +08:00
parent 5529883b9c
commit 60b3afb954
7 changed files with 17 additions and 104 deletions
@@ -1,39 +1,11 @@
<template>
<div class="config-hub-page">
<el-tabs v-model="activeTab" class="hub-tabs">
<el-tab-pane name="device" label="设备接入">
<div class="config-pane"><DeviceHubView /></div>
</el-tab-pane>
<el-tab-pane name="location" label="库位管理" lazy>
<div class="config-pane"><LocationView /></div>
</el-tab-pane>
</el-tabs>
<div class="config-pane"><DeviceHubView /></div>
</div>
</template>
<script setup lang="ts">
import { ref, watch } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import DeviceHubView from '@/views/admin/config/DeviceHubView.vue'
import LocationView from '@/views/admin/config/LocationView.vue'
// 聚合页:第三方设备接入与库位管理。Tab 与 URL ?tab= 同步。
const route = useRoute()
const router = useRouter()
const TAB_NAMES = ['device', 'location'] as const
type TabName = (typeof TAB_NAMES)[number]
function readTab(): TabName {
const q = route.query.tab
return typeof q === 'string' && (TAB_NAMES as readonly string[]).includes(q) ? (q as TabName) : 'device'
}
const activeTab = ref<TabName>(readTab())
watch(activeTab, (t) => {
if (route.query.tab !== t) router.replace({ query: { ...route.query, tab: t } })
})
watch(() => route.query.tab, () => {
const next = readTab()
if (next !== activeTab.value) activeTab.value = next
})
</script>
<style scoped>
@@ -44,32 +16,9 @@ watch(() => route.query.tab, () => {
flex-direction: column;
overflow: hidden;
}
.hub-tabs {
flex: 1;
min-height: 0;
display: flex;
flex-direction: column;
}
:deep(.el-tabs__content) {
flex: 1;
min-height: 0;
overflow: auto;
}
:deep(.el-tab-pane) { height: 100%; }
.config-pane {
height: 100%;
flex: 1;
min-height: 0;
overflow: auto;
}
:deep(.el-tabs__item) {
color: var(--mg-text-muted, rgba(255, 255, 255, 0.65));
}
:deep(.el-tabs__item.is-active) {
color: var(--mg-text-light, #fff);
}
:deep(.el-tabs__active-bar) {
background-color: var(--mg-accent, var(--el-color-primary));
}
:deep(.el-tabs__nav-wrap::after) {
background-color: rgba(255, 255, 255, 0.08);
}
</style>
@@ -1,39 +0,0 @@
<template>
<ConfigPageBase
section="location"
title="库位管理"
description="出入库、库存、库位可视化(LocationManagement"
:defaults="DEFAULT_LOCATION">
<template #default="{ payload }">
<el-tabs model-value="locs">
<el-tab-pane name="locs" label="库位">
<el-table :data="payload.locations" size="small" border>
<el-table-column label="ID" prop="id" width="100" />
<el-table-column label="编码" prop="code" width="120" />
<el-table-column label="名称" prop="name" />
<el-table-column label="站点" prop="siteId" width="100" />
<el-table-column label="容量" prop="capacity" width="100" />
<el-table-column label="占用">
<template #default="s">
<el-progress :percentage="Math.round((s.row.occupied / s.row.capacity) * 100)" :stroke-width="10" />
</template>
</el-table-column>
</el-table>
</el-tab-pane>
<el-tab-pane name="rules" label="库存规则">
<el-table :data="payload.inventoryRules" size="small" border>
<el-table-column label="ID" prop="id" width="100" />
<el-table-column label="物料类型" prop="itemType" />
<el-table-column label="下限" prop="minQty" width="100" />
<el-table-column label="上限" prop="maxQty" width="100" />
</el-table>
</el-tab-pane>
</el-tabs>
</template>
</ConfigPageBase>
</template>
<script setup lang="ts">
import ConfigPageBase from '@/components/ConfigPageBase.vue'
import { DEFAULT_LOCATION } from '@/mock/data/configs'
</script>