DeXun/klp-oa
9
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(仓库管理): 新增仓库可视化鸟瞰图组件及功能

Browse Source 
新增 WarehouseBird 和 WarehouseGrid 组件实现仓库库位可视化展示
添加 QRCode 组件用于生成库位二维码
实现库位初始化功能，支持批量生成库位
优化库位展示，支持行列转置和详情查看
修复部分显示字段名称问题
This commit is contained in:
砂糖
2025-12-05 11:29:28 +08:00
parent 53393c1f82
commit b20cda4e73
9 changed files with 1042 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
klp-ui/src/api/wms/actualWarehouse.js
View File

@@ -79,3 +79,11 @@ export function treeActualWarehouseTwoLevel(query) {
params: query
})
}
export function generateLocations(data) {
return request({
url: '/wms/actualWarehouse/generateLocations',
method: 'post',
data
})
}

50
klp-ui/src/components/QRCode/index.vue Normal file
View File

@@ -0,0 +1,50 @@
<template>
<canvas ref="qrcode"></canvas>
</template>
<script>
import QRCode from 'qrcode';
export default {
name: 'QRCode',
props: {
content: {
type: String,
required: true
},
size: {
type: Number,
default: 90
}
},
data() {
return {
qrcode: null
}
},
watch: {
content: {
handler(newVal, oldVal) {
if (newVal !== oldVal) {
this.generateQRCode();
}
},
immediate: true
}
},
mounted() {
this.generateQRCode();
},
methods: {
generateQRCode() {
const el = this.$refs.qrcode;
const content = this.content;
QRCode.toCanvas(el, content, {
width: this.size,
height: this.size,
margin: 0
});
}
}
}
</script>

2
klp-ui/src/views/wms/coil/actflow.vue
View File

@@ -121,7 +121,7 @@
</template>
</el-table-column>
<el-table-column label="创建人" align="center" prop="createBy" width="100" />
<el-table-column label="创建人" align="center" prop="createByName" width="100" />
<el-table-column label="操作人" align="center" prop="operatorName" width="100" />
<el-table-column label="处理时间" align="center" prop="processTime" width="155" :show-overflow-tooltip="true">

2
klp-ui/src/views/wms/coil/panels/base.vue
View File

@@ -102,7 +102,7 @@
<el-table-column v-if="showAbnormal" label="异常数量" align="center" prop="abnormalCount"></el-table-column>
<el-table-column label="更新时间" align="center" prop="updateTime" />
<el-table-column label="发货时间" align="center" v-if="showExportTime" prop="exportTime" />
<el-table-column label="更新人" align="center" prop="updateBy" />
<el-table-column label="更新人" align="center" prop="updateByName" />
<el-table-column label="二维码" v-if="qrcode">
<template slot-scope="scope">

220
klp-ui/src/views/wms/warehouse/components/WarehouseBird.vue Normal file
View 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>

371
klp-ui/src/views/wms/warehouse/components/WarehouseGrid.vue Normal file
View File

@@ -0,0 +1,371 @@
<template>
<div class="grid-wrapper">
<!-- 转置按钮 -->
<el-button
type="text"
icon="el-icon-refresh-left"
size="mini"
@click="toggleTranspose"
class="transpose-btn"
>
{{ isTransposed ? '恢复行列' : '行列转置' }}
</el-button>
<!-- 核心滚动容器：列标尺 + 网格区域共享滚动条 -->
<div class="grid-scroll-container" ref="scrollContainerRef">
<!-- 滚动内容容器：列标尺 + 行标尺+网格 -->
<div class="scroll-content">
<!-- 列标尺（顶部） -->
<div class="col-ruler">
<div class="ruler-empty"></div>
<div v-for="col in transposedLayerData.maxColumn" :key="`col-${layer}-${col}`" class="ruler-item">
{{ col }}
</div>
</div>
<!-- 行标尺 + 库位网格 -->
<div class="row-grid-wrapper">
<!-- 行标尺（左侧） -->
<div class="row-ruler">
<div v-for="row in transposedLayerData.maxRow" :key="`row-${layer}-${row}`" class="ruler-item">
{{ row }}
</div>
</div>
<!-- 库位网格 -->
<div class="grid-container" :style="{ gridTemplateColumns: `repeat(${transposedLayerData.maxColumn}, 80px)` }">
<!-- 库位格子 -->
<div v-for="warehouse in transposedLayerData.warehouses" :key="warehouse.actualWarehouseId"
class="warehouse-cell" :class="{ disabled: warehouse.isEnabled === 0 }"
@click="handleCellClick(warehouse)">
<div class="cell-code">{{ warehouse.actualWarehouseCode }}</div>
<div class="cell-name">{{ warehouse.actualWarehouseName || '-' }}</div>
</div>
<!-- 空库位占位 -->
<div class="warehouse-cell empty-cell" v-for="i in transposedLayerData.emptyCount" :key="`empty-${layer}-${i}`">
<div class="cell-code">-</div>
</div>
</div>
</div>
</div>
</div>
<!-- 库位详情弹窗 -->
<el-dialog title="库位详情" :visible.sync="dialogVisible" width="600px" destroy-on-close append-to-body center>
<el-descriptions :column="2" border size="small" v-if="currentWarehouse">
<el-descriptions-item label="库位编码">{{ currentWarehouse.actualWarehouseCode }}</el-descriptions-item>
<el-descriptions-item label="库位名称">{{ currentWarehouse.actualWarehouseName || '无' }}</el-descriptions-item>
<el-descriptions-item label="所属层级">{{ currentWarehouse.parsedInfo.layer || '未知' }}</el-descriptions-item>
<!-- 弹窗内行列显示适配转置状态 -->
<el-descriptions-item label="行号">
{{ isTransposed ? currentWarehouse.parsedInfo.column : currentWarehouse.parsedInfo.row || '未知' }}
</el-descriptions-item>
<el-descriptions-item label="列号">
{{ isTransposed ? currentWarehouse.parsedInfo.row : currentWarehouse.parsedInfo.column || '未知' }}
</el-descriptions-item>
<el-descriptions-item label="一级编码">{{ currentWarehouse.parsedInfo.warehouseFirst || '未知' }}</el-descriptions-item>
<el-descriptions-item label="二级编码">{{ currentWarehouse.parsedInfo.warehouseSecond || '未知' }}</el-descriptions-item>
<el-descriptions-item label="启用状态">
<el-tag :type="currentWarehouse.isEnabled === 1 ? 'success' : 'danger'">
{{ currentWarehouse.isEnabled === 1 ? '启用' : '禁用' }}
</el-tag>
</el-descriptions-item>
<el-descriptions-item label="库位码">
<QRCode :content="currentWarehouse.actualWarehouseId" size="60" />
</el-descriptions-item>
<el-descriptions-item label="创建时间" span="2">{{ currentWarehouse.createTime || '无' }}</el-descriptions-item>
<el-descriptions-item label="备注信息" span="2">{{ currentWarehouse.remark || '无' }}</el-descriptions-item>
</el-descriptions>
<template slot="footer">
<el-button @click="dialogVisible = false">关闭</el-button>
</template>
</el-dialog>
</div>
</template>
<script>
import QRCode from '@/components/QRCode/index.vue';
export default {
name: "WarehouseGrid",
components: { QRCode },
props: {
// 层号
layer: {
type: [String, Number],
required: true
},
// 层数据
layerData: {
type: Object,
required: true,
default: () => ({
maxRow: 0,
maxColumn: 0,
warehouses: [],
emptyCount: 0
})
}
},
data() {
return {
// 弹窗状态
dialogVisible: false,
currentWarehouse: null,
// 转置状态：false-原始布局 | true-行列转置
isTransposed: false
};
},
computed: {
/**
* 处理转置后的层数据（视图层映射，不修改原数据）
*/
transposedLayerData() {
const { maxRow, maxColumn, warehouses } = this.layerData;
// 转置后的基础行列数
const transMaxRow = this.isTransposed ? maxColumn : maxRow;
const transMaxColumn = this.isTransposed ? maxRow : maxColumn;
// 深拷贝库位数据，避免修改原数据
const transWarehouses = JSON.parse(JSON.stringify(warehouses)).map(item => {
// 转置时互换行列解析值
if (this.isTransposed && item.parsedInfo) {
const { row, column } = item.parsedInfo;
item.parsedInfo.row = column;
item.parsedInfo.column = row;
}
return item;
});
// 转置后重新排序（原：行→列 | 转置：列→行）
transWarehouses.sort((a, b) => {
if (a.parsedInfo.row !== b.parsedInfo.row) {
return a.parsedInfo.row - b.parsedInfo.row;
}
return a.parsedInfo.column - b.parsedInfo.column;
});
// 转置后重新计算空占位数量
const totalGrid = transMaxRow * transMaxColumn;
const emptyCount = Math.max(0, totalGrid - transWarehouses.length);
return {
maxRow: transMaxRow,
maxColumn: transMaxColumn,
warehouses: transWarehouses,
emptyCount
};
}
},
methods: {
/**
* 切换转置状态
*/
toggleTranspose() {
this.isTransposed = !this.isTransposed;
// 重置弹窗选中状态（可选）
this.dialogVisible = false;
this.currentWarehouse = null;
},
/**
* 点击库位格子展示详情
*/
handleCellClick(warehouse) {
this.currentWarehouse = warehouse;
this.dialogVisible = true;
}
}
};
</script>
<style scoped lang="scss">
.grid-wrapper {
background: #fff;
border-radius: 8px;
overflow: hidden;
width: 100%;
position: relative; // 为转置按钮提供定位上下文
min-height: 100px; // 防止空数据时高度为0
}
// 转置按钮（固定位置）
.transpose-btn {
position: absolute;
top: 8px;
right: 8px;
z-index: 20; // 高于滚动容器
color: #409eff;
height: 30px;
line-height: 30px;
padding: 0 8px;
background: rgba(255, 255, 255, 0.9);
border-radius: 4px;
&:hover {
color: #1e88e5;
background: #e8f4ff;
}
}
// 核心滚动容器：横向滚动，列标尺+网格共享滚动条
.grid-scroll-container {
width: 100%;
overflow-x: auto;
overflow-y: hidden;
position: relative;
padding-bottom: 8px; // 给滚动条留空间
// 优化滚动条样式
&::-webkit-scrollbar {
height: 8px;
}
&::-webkit-scrollbar-track {
background: #f1f1f1;
border-radius: 4px;
}
&::-webkit-scrollbar-thumb {
background: #c1c1c1;
border-radius: 4px;
&:hover {
background: #a8a8a8;
}
}
// 兼容非webkit浏览器
scrollbar-width: thin;
scrollbar-color: #c1c1c1 #f1f1f1;
}
// 滚动内容容器：列标尺 + 行标尺+网格
.scroll-content {
display: inline-block;
background: #fff;
}
// 列标尺样式
.col-ruler {
display: flex;
height: 30px;
line-height: 30px;
background: #eef2f7;
border-bottom: 1px solid #dcdfe6;
.ruler-empty {
width: 30px;
text-align: center;
font-weight: 600;
color: #606266;
border-right: 1px solid #dcdfe6;
flex-shrink: 0;
}
.ruler-item {
width: 80px;
text-align: center;
font-weight: 600;
color: #606266;
border-right: 1px solid #dcdfe6;
box-sizing: border-box;
flex-shrink: 0;
}
}
// 行标尺 + 网格容器
.row-grid-wrapper {
display: flex;
width: 100%;
}
// 行标尺样式
.row-ruler {
width: 30px;
background: #eef2f7;
border-right: 1px solid #dcdfe6;
flex-shrink: 0;
.ruler-item {
height: 80px;
line-height: 80px;
text-align: center;
font-weight: 600;
color: #606266;
border-bottom: 1px solid #dcdfe6;
box-sizing: border-box;
}
}
// 库位网格容器
.grid-container {
display: grid;
gap: 0;
box-sizing: border-box;
// 库位格子
.warehouse-cell {
height: 80px;
width: 80px;
border: 1px solid #e6e6e6;
border-radius: 0;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
cursor: pointer;
transition: all 0.2s;
box-sizing: border-box;
margin: 0;
&:hover {
border-color: #409eff;
background: #e8f4ff;
z-index: 1;
}
&.disabled {
background: #f5f5f5;
color: #909399;
cursor: not-allowed;
&:hover {
border-color: #e6e6e6;
background: #f5f5f5;
}
}
.cell-code {
font-size: 14px;
font-weight: 600;
margin-bottom: 4px;
}
.cell-name {
font-size: 12px;
color: #606266;
}
}
// 空占位格子
.empty-cell {
background: #fafafa;
border-style: solid;
border-color: #e6e6e6;
.cell-code {
color: #c0c4cc;
}
}
}
// 弹窗样式优化
::v-deep(.el-descriptions) {
.el-descriptions-item__label {
font-weight: 500;
color: #606266;
}
.el-descriptions-item__content {
color: #303133;
}
}
</style>

390
klp-ui/src/views/wms/warehouse/overview.vue Normal file
View File

@@ -0,0 +1,390 @@
<template>
<div class="app-container">
<!-- 整体布局 -->
<div class="layout-container">
<!-- 左侧树形结构 -->
<div class="tree-container" v-loading="treeLoading">
<el-tree
ref="warehouseTreeRef"
:data="warehouseTree"
:props="treeProps"
node-key="actualWarehouseId"
@node-click="handleNodeClick"
:expand-on-click-node="false"
highlight-current
class="warehouse-tree"
:disabled="isSwitching"
>
</el-tree>
</div>
<!-- 右侧仓库信息区域 - 替换为 Bird 组件 -->
<div class="warehouse-container" v-if="selectedNodeId" v-loading="rightLoading"
element-loading-text="加载中..." element-loading-spinner="el-icon-loading">
<WarehouseBird :warehouse-list="warehouseList" />
</div>
<!-- 未选中节点提示 -->
<div class="empty-select-tip" v-if="!selectedNodeId">
请选择左侧仓库分类查看库位信息
</div>
</div>
<!-- 库位初始化弹窗 -->
<el-dialog title="库位初始化" :visible.sync="initDialogVisible" width="700px" destroy-on-close append-to-body center>
<el-form ref="initFormRef" :model="initForm" :rules="initFormRules" label-width="100px" size="mini">
<!-- 可视化网格选择区域 -->
<el-form-item label="行列选择" prop="gridSelect">
<div class="grid-selector-container">
<div class="selector-tip">
拖动/点击选择网格范围（当前：{{ initForm.rowCount || 0 }}行 × {{ initForm.columnCount || 0 }}列）
</div>
<div class="grid-selector"
@mousemove="handleGridHover"
@click="confirmGridSelect"
@mouseleave="resetGridHover">
<div v-for="row in 50" :key="`grid-row-${row}`" class="grid-selector-row">
<div
v-for="col in 10"
:key="`grid-col-${col}`"
class="grid-selector-cell"
:class="{
hovered: row <= hoverRow && col <= hoverCol,
selected: row <= initForm.rowCount && col <= initForm.columnCount
}">
</div>
</div>
</div>
</div>
</el-form-item>
<el-form-item label="层数" prop="layerCount">
<el-input-number size="mini" v-model="initForm.layerCount" :min="1" :max="99" placeholder="请输入层数（1-99）"
style="width: 100%;" />
</el-form-item>
<el-form-item label="编码前缀" prop="prefix">
<el-input v-model="initForm.prefix" disabled placeholder="系统自动生成" />
</el-form-item>
</el-form>
<template slot="footer">
<el-button @click="initDialogVisible = false">取消</el-button>
<el-button type="primary" @click="submitInitForm">确认初始化</el-button>
</template>
</el-dialog>
</div>
</template>
<script>
import { listActualWarehouse, treeActualWarehouseTwoLevel, getActualWarehouse, generateLocations } from "@/api/wms/actualWarehouse";
import WarehouseBird from './components/WarehouseBird.vue';
export default {
name: "Overview",
components: { WarehouseBird },
data() {
// 自定义验证规则：正整数
const positiveIntegerValidator = (rule, value, callback) => {
if (!value) {
callback(new Error('请输入正整数'));
} else if (!/^[1-9]\d*$/.test(value)) {
callback(new Error('请输入大于0的正整数'));
} else {
callback();
}
};
// 网格选择验证规则
const gridSelectValidator = (rule, value, callback) => {
if (!this.initForm.rowCount || !this.initForm.columnCount) {
callback(new Error('请先选择网格行列数'));
} else {
callback();
}
};
return {
warehouseTree: [],
treeProps: { label: "actualWarehouseName", children: "children" },
selectedNodeId: "",
selectedNode: null,
warehouseList: [], // 透传给 Bird 组件的原始数据
// 初始化弹窗相关
initDialogVisible: false,
initForm: {
rowCount: '', columnCount: '', layerCount: '', prefix: '', parentId: ''
},
hoverRow: 0,
hoverCol: 0,
initFormRules: {
gridSelect: [{ validator: gridSelectValidator, trigger: 'change' }],
layerCount: [{ validator: positiveIntegerValidator, trigger: 'blur' }],
parentId: [{ required: true, message: '父节点ID不能为空', trigger: 'blur' }]
},
// 加载状态
treeLoading: false,
rightLoading: false,
isSwitching: false,
nodeClickTimer: null,
};
},
created() {
this.getWarehouseTree();
},
beforeDestroy() {
if (this.nodeClickTimer) clearTimeout(this.nodeClickTimer);
},
methods: {
// 获取树形数据
getWarehouseTree() {
this.treeLoading = true;
treeActualWarehouseTwoLevel()
.then((res) => { this.warehouseTree = res.data || []; })
.catch((err) => { this.$message.error("获取仓库树形数据失败：" + err.message); })
.finally(() => { this.treeLoading = false; });
},
// 树节点点击
handleNodeClick(node) {
if (this.isSwitching) return;
if (this.nodeClickTimer) clearTimeout(this.nodeClickTimer);
this.nodeClickTimer = setTimeout(() => {
if (!node.children || node.children.length === 0) {
this.isSwitching = true;
this.rightLoading = true;
this.selectedNodeId = node.actualWarehouseId;
this.selectedNode = node;
this.getWarehouseList(node.actualWarehouseId)
.finally(() => {
this.rightLoading = false;
this.isSwitching = false;
});
} else {
this.selectedNodeId = "";
this.selectedNode = null;
this.warehouseList = [];
}
}, 300);
},
// 获取库位列表
getWarehouseList(parentId) {
return listActualWarehouse({ parentId })
.then((res) => { this.warehouseList = res.data || []; })
.catch((err) => {
this.$message.error("获取库位数据失败：" + err.message);
this.warehouseList = [];
});
},
// 打开初始化弹窗
async openInitDialog() {
if (!this.selectedNode) {
this.$message.warning('请先选择左侧仓库分类');
return;
}
try {
await this.$confirm(
'初始化库位将批量生成指定数量的库位数据，此操作不可撤销！请确认是否继续？',
'重要提示',
{ confirmButtonText: '确认', cancelButtonText: '取消', type: 'warning' }
);
} catch { return; }
this.$nextTick(() => {
this.$refs.initFormRef?.resetFields();
this.initForm.rowCount = '';
this.initForm.columnCount = '';
this.hoverRow = 0;
this.hoverCol = 0;
});
const prefix = await this.generateWarehousePrefix(this.selectedNode);
this.initForm = {
rowCount: '', columnCount: '', layerCount: '',
prefix: prefix,
parentId: this.selectedNode.actualWarehouseId
};
this.initDialogVisible = true;
},
// 生成编码前缀
async generateWarehousePrefix(node) {
try {
const parentRes = await getActualWarehouse(node.parentId);
const parentCode = parentRes.data.actualWarehouseCode || '';
const nodeCode = node.actualWarehouseCode || '';
return (parentCode + nodeCode).toUpperCase();
} catch (err) {
this.$message.error('生成编码前缀失败，将使用默认前缀');
return 'DEFAULT';
}
},
// 网格选择悬浮
handleGridHover(e) {
const cell = e.target.closest('.grid-selector-cell');
if (!cell) return;
const row = Array.from(cell.parentElement.parentElement.children).indexOf(cell.parentElement) + 1;
const col = Array.from(cell.parentElement.children).indexOf(cell) + 1;
this.hoverRow = Math.min(row, 99);
this.hoverCol = Math.min(col, 99);
},
// 确认网格选择
confirmGridSelect() {
if (this.hoverRow < 1 || this.hoverCol < 1) return;
this.initForm.rowCount = this.hoverRow;
this.initForm.columnCount = this.hoverCol;
this.$refs.initFormRef.validateField('gridSelect');
},
// 重置网格悬浮
resetGridHover() {
this.hoverRow = this.initForm.rowCount || 0;
this.hoverCol = this.initForm.columnCount || 0;
},
// 提交初始化表单
submitInitForm() {
this.$refs.initFormRef.validate(async (valid) => {
if (valid) {
const params = {
rowCount: this.initForm.rowCount,
columnCount: this.initForm.columnCount,
layerCount: this.initForm.layerCount,
prefix: this.initForm.prefix,
parentId: this.initForm.parentId
};
const loadingInstance = this.$loading({
lock: true, text: '正在初始化库位，请稍候...',
spinner: 'el-icon-loading', background: 'rgba(0, 0, 0, 0.7)'
});
try {
await generateLocations(params);
this.$message.success('库位初始化成功！');
this.initDialogVisible = false;
await this.getWarehouseList(this.selectedNodeId);
} catch (err) {
this.$message.error('库位初始化失败：' + err.message);
} finally {
loadingInstance.close();
}
} else {
this.$message.warning('请完善表单必填信息！');
return false;
}
});
}
},
};
</script>
<style scoped lang="scss">
.app-container {
width: 100%;
height: calc(100vh - 90px);
padding: 16px;
box-sizing: border-box;
background: #f5f7fa;
}
.layout-container {
display: flex;
width: 100%;
height: 100%;
gap: 16px;
.tree-container {
width: 280px;
height: 100%;
background: #fff;
border-radius: 8px;
padding: 16px;
box-sizing: border-box;
overflow-y: auto;
.warehouse-tree {
--el-tree-text-color: #303133;
--el-tree-node-hover-bg-color: #e8f4ff;
--el-tree-current-bg-color: #409eff;
--el-tree-current-text-color: #fff;
}
}
.warehouse-container {
flex: 1;
height: 100%;
overflow-y: auto;
}
.empty-select-tip {
flex: 1;
display: flex;
justify-content: center;
align-items: center;
color: #909399;
font-size: 16px;
background: #fff;
border-radius: 8px;
}
}
// 初始化网格选择器样式
.grid-selector-container {
width: 100%;
padding: 10px;
box-sizing: border-box;
.selector-tip {
margin-bottom: 10px;
font-size: 12px;
color: #606266;
}
.grid-selector {
width: 100%;
max-width: 500px;
max-height: 300px;
overflow: auto;
border: 1px solid #e6e6e6;
background: #fafafa;
cursor: crosshair;
.grid-selector-row {
display: flex;
.grid-selector-cell {
width: 20px;
height: 20px;
border: 1px solid #e0e0e0;
box-sizing: border-box;
transition: all 0.1s;
&.hovered {
background: #e8f4ff;
border-color: #409eff;
}
&.selected {
background: #409eff;
border-color: #1e88e5;
}
&:hover {
background: #c6e2ff;
border-color: #409eff;
}
}
}
}
}
::v-deep(.el-form-item) {
margin-bottom: 16px;
}
</style>

1
klp-ui/src/views/wms/warehouse/real.vue
View File

@@ -328,7 +328,6 @@
<script>
import {
listActualWarehouseTree,
getActualWarehouse,
delActualWarehouse,
addActualWarehouse,

2
klp-wms/src/main/java/com/klp/service/impl/WmsActualWarehouseServiceImpl.java
View File

@@ -85,7 +85,7 @@ public class WmsActualWarehouseServiceImpl implements IWmsActualWarehouseService
}
WmsActualWarehouse e = new WmsActualWarehouse();
e.setParentId(parentId);
e.setActualWarehouseType(2L);
e.setActualWarehouseType(3L);
e.setActualWarehouseCode(code);
e.setActualWarehouseName(code);
e.setSortNo(0L);