设备与库位聚合页拆分为设备接入与库位管理
将“设备与库位”聚合页拆分为“设备接入”和“库位管理”两个独立页面,调整相关菜单、路由、权限、页面定义及映射。FacilityConfigView.vue 仅保留设备接入,库位管理内容移除,LocationView.vue 删除,新增 WarehouseManagementView.vue。同步精简聚合页 tab 逻辑及重定向,后端 PageCatalog、DeploymentCatalog 和前端 rbac.ts、AppShell.vue、index.ts 等均已更新。
This commit is contained in:
@@ -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>
|
||||
Reference in New Issue
Block a user