feat(仓库管理): 新增仓库可视化鸟瞰图组件及功能
新增 WarehouseBird 和 WarehouseGrid 组件实现仓库库位可视化展示 添加 QRCode 组件用于生成库位二维码 实现库位初始化功能，支持批量生成库位 优化库位展示，支持行列转置和详情查看 修复部分显示字段名称问题
This commit is contained in:
砂糖
220
klp-ui/src/views/wms/warehouse/components/WarehouseBird.vue
Normal file
220
klp-ui/src/views/wms/warehouse/components/WarehouseBird.vue
Normal file
@@ -0,0 +1,220 @@
|
||||
<template>
|
||||
<div class="bird-container">
|
||||
<!-- 统计信息卡片 -->
|
||||
<div class="statistics-card">
|
||||
<el-card shadow="hover">
|
||||
<div class="statistics-item">
|
||||
<span class="label">总库位数：</span>
|
||||
<span class="value">{{ statistics.total }}</span>
|
||||
</div>
|
||||
<div class="statistics-item">
|
||||
<span class="label">总层数：</span>
|
||||
<span class="value">{{ statistics.layerCount }}</span>
|
||||
</div>
|
||||
<div class="statistics-item">
|
||||
<span class="label">各层库位分布：</span>
|
||||
<span class="value">
|
||||
<span v-for="(count, layer) in statistics.layerDetail" :key="layer">
|
||||
第{{ layer }}层：{{ count }}个
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
</el-card>
|
||||
</div>
|
||||
|
||||
<!-- 分层库位容器 -->
|
||||
<div class="layers-container">
|
||||
<!-- 遍历每层，渲染 Grid 组件 -->
|
||||
<div v-for="(layerData, layer) in layers" :key="layer" class="layer-section">
|
||||
<el-divider content-position="left">第{{ layer }}层库位</el-divider>
|
||||
<WarehouseGrid :layer="layer" :layer-data="layerData" />
|
||||
</div>
|
||||
|
||||
<!-- 无数据提示 -->
|
||||
<div class="empty-tip" v-if="Object.keys(layers).length === 0 && warehouseList.length > 0">
|
||||
暂无解析到有效的库位分层数据
|
||||
</div>
|
||||
<div class="empty-tip" v-if="warehouseList.length === 0">
|
||||
<div class="empty-text">该分类下暂无库位数据</div>
|
||||
<el-button type="primary" icon="el-icon-plus" @click="openInitDialog">初始化库位</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import WarehouseGrid from './WarehouseGrid.vue';
|
||||
|
||||
export default {
|
||||
name: "WarehouseBird",
|
||||
components: { WarehouseGrid },
|
||||
props: {
|
||||
// 原始库位列表
|
||||
warehouseList: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// 分层库位数据
|
||||
layers: {},
|
||||
// 统计信息
|
||||
statistics: {
|
||||
total: 0,
|
||||
layerCount: 0,
|
||||
layerDetail: {}
|
||||
}
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
// 监听库位列表变化，重新构建分层数据
|
||||
warehouseList: {
|
||||
immediate: true,
|
||||
handler(newVal) {
|
||||
this.buildWarehouseBox(newVal);
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
/**
|
||||
* 解析库位编码
|
||||
*/
|
||||
parseWarehouseCode(code) {
|
||||
if (!code) return null;
|
||||
const reg = /^([A-Za-z])(\d+[A-Za-z])(\d)(\d{2})-(\d+)$/;
|
||||
const match = code.match(reg);
|
||||
|
||||
if (!match) {
|
||||
console.warn(`库位编码解析失败：${code}，格式不符合规范`);
|
||||
return null;
|
||||
}
|
||||
|
||||
return {
|
||||
warehouseFirst: match[1],
|
||||
warehouseSecond: match[2],
|
||||
column: Number(match[3]),
|
||||
row: Number(match[4]),
|
||||
layer: match[5],
|
||||
};
|
||||
},
|
||||
|
||||
/**
|
||||
* 构建分层库位数据结构
|
||||
*/
|
||||
buildWarehouseBox(list) {
|
||||
const layerMap = {};
|
||||
const statistics = {
|
||||
total: list.length,
|
||||
layerCount: 0,
|
||||
layerDetail: {},
|
||||
};
|
||||
|
||||
// 按层分组
|
||||
list.forEach((warehouse) => {
|
||||
const codeInfo = this.parseWarehouseCode(warehouse.actualWarehouseCode);
|
||||
if (!codeInfo) return;
|
||||
|
||||
const { layer, row, column } = codeInfo;
|
||||
warehouse.parsedInfo = codeInfo;
|
||||
|
||||
if (!layerMap[layer]) {
|
||||
layerMap[layer] = {
|
||||
maxRow: 0,
|
||||
maxColumn: 0,
|
||||
warehouses: [],
|
||||
emptyCount: 0
|
||||
};
|
||||
}
|
||||
|
||||
layerMap[layer].maxRow = Math.max(layerMap[layer].maxRow, row);
|
||||
layerMap[layer].maxColumn = Math.max(layerMap[layer].maxColumn, column);
|
||||
layerMap[layer].warehouses.push(warehouse);
|
||||
});
|
||||
|
||||
// 处理空占位和排序
|
||||
Object.keys(layerMap).forEach((layer) => {
|
||||
const layerData = layerMap[layer];
|
||||
const totalGrid = layerData.maxRow * layerData.maxColumn;
|
||||
layerData.emptyCount = Math.max(0, totalGrid - layerData.warehouses.length);
|
||||
|
||||
// 按行号+列号排序
|
||||
layerData.warehouses.sort((a, b) => {
|
||||
if (a.parsedInfo.row !== b.parsedInfo.row) {
|
||||
return a.parsedInfo.row - b.parsedInfo.row;
|
||||
}
|
||||
return a.parsedInfo.column - b.parsedInfo.column;
|
||||
});
|
||||
});
|
||||
|
||||
// 更新统计信息
|
||||
statistics.layerCount = Object.keys(layerMap).length;
|
||||
Object.keys(layerMap).forEach((layer) => {
|
||||
statistics.layerDetail[layer] = layerMap[layer].warehouses.length;
|
||||
});
|
||||
|
||||
this.layers = layerMap;
|
||||
this.statistics = statistics;
|
||||
},
|
||||
|
||||
/**
|
||||
* 打开初始化弹窗（透传至根组件）
|
||||
*/
|
||||
openInitDialog() {
|
||||
this.$emit('open-init-dialog');
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.bird-container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
// 统计卡片样式
|
||||
.statistics-card {
|
||||
margin-bottom: 16px;
|
||||
|
||||
.statistics-item {
|
||||
margin-bottom: 8px;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.label {
|
||||
color: #606266;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.value {
|
||||
color: #303133;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
margin-left: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 分层容器样式
|
||||
.layers-container {
|
||||
.layer-section {
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.empty-tip {
|
||||
text-align: center;
|
||||
padding: 32px;
|
||||
color: #909399;
|
||||
font-size: 14px;
|
||||
background: #fff;
|
||||
border-radius: 8px;
|
||||
|
||||
.empty-text {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user