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

feat(仓库管理): 添加库位拆分合并功能及界面优化

Browse Source 
- 在WarehouseInterlaced组件中添加列级别的拆分/合并切换按钮
- 重构API接口，支持payload参数传递和超时设置
- 在overview页面实现拆分合并操作的处理逻辑
- 优化仓库网格布局和样式，移除右键菜单功能
- 添加操作确认提示和加载状态显示
This commit is contained in:
砂糖
2025-12-20 15:12:07 +08:00
parent f0547a4c8d
commit 720e2d514f
4 changed files with 301 additions and 311 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
klp-ui/src/views/wms/warehouse/components/WarehouseBird.vue
View File

@@ -48,7 +48,7 @@
<div class="empty-text">该分类下暂无库位数据</div>
<el-button type="primary" icon="el-icon-plus" @click="openInitDialog">初始化库位</el-button>
</div>
<warehouse-interlaced v-else="warehouseList.length" :columns="columns" @split-warehouse="handleSplitWarehouse"/>
<warehouse-interlaced v-else="warehouseList.length" :columns="columns" @split-warehouse="handleSplitWarehouse" @merge-warehouse="handleMergeWarehouse" />
</div>
</div>
</template>
@@ -91,6 +91,10 @@ export default {
handleSplitWarehouse(warehouse) {
this.$emit('split-warehouse', warehouse);
},
handleMergeWarehouse(warehouse) {
this.$emit('merge-warehouse', warehouse);
},
/**
* 解析第三级库位编码
*/

526
klp-ui/src/views/wms/warehouse/components/WarehouseInterlaced.vue
View File

@@ -1,49 +1,43 @@
<template>
<div class="multi-layer-grid" @click="closeContextMenu" @keydown.esc="closeContextMenu">
<!-- 顶部列标尺 -->
<div class="multi-layer-grid" ref="gridContainer">
<!-- 列标尺区域 - 添加切换按钮 -->
<div class="col-ruler" :style="{ '--cell-width': `${cellWidth}px` }">
<div class="ruler-empty"></div>
<div v-for="col in sortedColumnKeys" :key="`col-${col}`" class="ruler-item">
{{ col }}
<!-- 列标尺文本 -->
<span class="column-number">{{ col }}</span>
<!-- 拆分/合并切换按钮 -->
<button class="split-merge-toggle"
:class="{ 'is-split': getColumnLevel(col) === 4, 'is-merge': getColumnLevel(col) === 3 }"
@click.stop="handleColumnToggle(col)" :title="getColumnLevel(col) === 3 ? '点击切换为小卷状态' : '点击切换为大卷状态'">
<i class="el-icon-s-tools"></i>
<span class="toggle-text">{{ getColumnLevel(col) === 3 ? '大卷状态' : '小卷状态' }}</span>
</button>
</div>
</div>
<!-- 左侧行标尺 + 库位网格 -->
<div class="row-grid-wrapper">
<!-- 左侧行标尺（高度固定） -->
<div class="row-ruler" :style="{ '--total-height': `${rulerTotalHeight}px` }">
<div v-for="row in rulerMaxRow" :key="`row-${row}`" class="ruler-item">
{{ row }}
</div>
</div>
<!-- 网格容器（列→左右容器→格子） -->
<div class="grid-container" :style="{
'--half-cell-width': `${halfCellWidth}px`,
'--cell-width': `${cellWidth}px`,
'--column-count': sortedColumnKeys.length * 2,
'--total-height': `${rulerTotalHeight}px`
}">
<!-- 逐列渲染：每列对应左右两个容器 -->
<template v-for="column in sortedColumnKeys">
<!-- 左容器：承载当前列的layer1库位 -->
<div
class="column-container layer-1-container"
:style="{
gridRow: '1 / -1',
gridColumn: `${(column - 1) * 2 + 1} / ${(column - 1) * 2 + 2}`,
'--item-height': `${getWarehouseCellHeight(column)}px`
}"
>
<!-- 左容器内渲染layer1的单个格子（无偏移） -->
<div
v-for="warehouse in getColumnLayerWarehouses(column, 1)"
:key="`warehouse-1-${warehouse.actualWarehouseId}`"
class="warehouse-cell layer-1"
:class="{ disabled: warehouse.isEnabled === 0 }"
@click="handleCellClick(warehouse)"
@contextmenu.prevent="(e) => openContextMenu(e, warehouse)"
>
<div class="column-container layer-1-container" v-if="columnWarehouseData[column]" :style="{
gridRow: '1 / -1',
gridColumn: `${(column - 1) * 2 + 1} / ${(column - 1) * 2 + 2}`,
'--item-height': `${columnWarehouseData[column].cellHeight}px`
}">
<div v-for="warehouse in columnWarehouseData[column].layer1"
:key="`warehouse-1-${warehouse.actualWarehouseId}`" class="warehouse-cell layer-1"
:class="{ disabled: warehouse.isEnabled === 0 }" @click.stop="handleCellClick(warehouse)">
<div class="cell-name">
<div class="cell-line1">{{ warehouse.actualWarehouseName || '-' }}</div>
<div class="cell-line2">{{ warehouse.currentCoilNo || '-' }}</div>
@@ -51,30 +45,19 @@
</div>
</div>
<!-- 右容器：承载当前列的layer2库位（核心修改：新增高度计算） -->
<div
class="column-container layer-2-container"
:style="{
gridRow: '1 / -1',
gridColumn: `${(column - 1) * 2 + 2} / ${(column - 1) * 2 + 3}`,
'--item-height': `${getWarehouseCellHeight(column)}px`,
'--offset-value': `${getWarehouseCellHeight(column) * 0.5}px`,
// 新增：第二层容器高度 = 格子总高度 + 偏移量（半个格子）
height: `${(getColumnLayerWarehouses(column, 2).length * getWarehouseCellHeight(column))}px`
}"
>
<!-- 右容器内渲染layer2的单个格子（向下偏移半个高度） -->
<div
v-for="warehouse in getColumnLayerWarehouses(column, 2)"
:key="`warehouse-2-${warehouse.actualWarehouseId}`"
class="warehouse-cell layer-2"
:class="{ disabled: warehouse.isEnabled === 0 }"
:style="{
transform: `translateY(var(--offset-value))`
}"
@click="handleCellClick(warehouse)"
@contextmenu.prevent="(e) => openContextMenu(e, warehouse)"
>
<div class="column-container layer-2-container" v-if="columnWarehouseData[column]" :style="{
gridRow: '1 / -1',
gridColumn: `${(column - 1) * 2 + 2} / ${(column - 1) * 2 + 3}`,
'--item-height': `${columnWarehouseData[column].cellHeight}px`,
'--offset-value': `${columnWarehouseData[column].cellHeight * 0.5}px`,
height: `${(columnWarehouseData[column].layer2.length * columnWarehouseData[column].cellHeight)}px`
}">
<div v-for="warehouse in columnWarehouseData[column].layer2"
:key="`warehouse-2-${warehouse.actualWarehouseId}`" class="warehouse-cell layer-2"
:class="{ disabled: warehouse.isEnabled === 0 }" :style="{
transform: `translateY(var(--offset-value))`,
position: 'relative'
}" @click.stop="handleCellClick(warehouse)">
<div class="cell-name">
<div class="cell-line1">{{ warehouse.actualWarehouseName || '-' }}</div>
<div class="cell-line2">{{ warehouse.currentCoilNo || '-' }}</div>
@@ -85,34 +68,7 @@
</div>
</div>
<!-- 自定义右键菜单 -->
<div
v-if="contextMenuVisible"
class="custom-contextmenu"
:style="{
top: `${contextMenuTop}px`,
left: `${contextMenuLeft}px`,
zIndex: 9999
}"
@click.stop
>
<ul>
<li @click="handleContextMenuClick('view')">查看详情</li>
<li class="menu-divider"></li>
<li
@click="handleContextMenuClick('delete')"
:class="{ disabled: currentContextWarehouse.isEnabled === 0 }"
>
删除库位
</li>
<li class="menu-divider"></li>
<li @click="handleContextMenuClick('split')" v-if="currentContextWarehouse.splitStatus == 0">拆分整列</li>
<li @click="handleContextMenuClick('merge')" v-if="currentContextWarehouse.splitStatus == 1">合并整列</li>
</ul>
</div>
<!-- 库位详情弹窗 -->
<el-dialog title="钢卷库位详情" :visible.sync="dialogVisible" width="600px" destroy-on-close append-to-body center>
<el-dialog title="钢卷库位详情" :visible.sync="dialogOpen" width="600px" append-to-body>
<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>
@@ -120,8 +76,10 @@
<el-descriptions-item label="所属层级">{{ currentWarehouse.parsedInfo.layer || '未知' }}</el-descriptions-item>
<el-descriptions-item label="行号">{{ currentWarehouse.parsedInfo.row || '未知' }}</el-descriptions-item>
<el-descriptions-item label="列号">{{ 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="一级编码">{{ 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 ? '未占用' : currentWarehouse.currentCoilNo }}
@@ -132,16 +90,12 @@
</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';
import { Message } from 'element-ui';
export default {
name: "SteelCoilWarehouse",
@@ -157,99 +111,173 @@ export default {
},
data() {
return {
dialogVisible: false,
dialogOpen: false,
currentWarehouse: null,
containerWidth: 0,
resizeTimer: null,
// 右键菜单
contextMenuVisible: false,
contextMenuTop: 0,
contextMenuLeft: 0,
currentContextWarehouse: null,
// 标尺配置
rulerRowHeight: 80,
rulerMaxRow: 0
// rulerMaxRow: 0,
isMounted: false
};
},
computed: {
// 排序后的列号（数字升序）
sortedColumnKeys() {
return Object.keys(this.columns)
.map(key => Number(key))
.sort((a, b) => a - b);
},
// 标尺总高度
rulerTotalHeight() {
return this.rulerMaxRow * this.rulerRowHeight;
},
// 列宽度（原始列）
cellWidth() {
if (!this.containerWidth || this.sortedColumnKeys.length === 0) return 60;
const availableWidth = Math.max(0, this.containerWidth - 30);
return availableWidth / this.sortedColumnKeys.length;
},
// 半列宽度（小列/容器宽度）
halfCellWidth() {
return this.cellWidth / 2;
},
columnWarehouseData() {
const result = {};
this.sortedColumnKeys.forEach(column => {
const columnData = this.columns[column] || {};
const layer1 = (columnData.layer1 || []).sort((a, b) => a.parsedInfo.row - b.parsedInfo.row);
const layer2 = (columnData.layer2 || []).sort((a, b) => a.parsedInfo.row - b.parsedInfo.row);
const totalRows = layer1.length;
const cellHeight = totalRows === 0
? this.rulerRowHeight
: (totalRows > this.rulerMaxRow
? this.rulerTotalHeight / totalRows
: this.rulerRowHeight);
result[column] = {
layer1,
layer2,
cellHeight,
totalRows
};
});
return result;
},
rulerMaxRow() {
// 取所有列中level为3的第一层的最大行数
const maxRows = Object.values(this.columns)
.filter(col => col.layer1?.[0]?.parsedInfo?.level === 3)
.map(col => col.layer1?.length || 0);
return maxRows.length > 0 ? Math.max(...maxRows) : 0;
}
},
watch: {
// 初始化标尺最大行数（仅一次）
columns: {
immediate: true,
deep: true,
handler(newVal) {
if (this.rulerMaxRow === 0 && Object.keys(newVal).length > 0) {
const allMaxRows = Object.values(newVal).map(col => col.maxRow);
this.rulerMaxRow = allMaxRows.length > 0 ? Math.max(...allMaxRows) : 0;
if (this.isMounted) {
clearTimeout(this.resizeTimer);
this.resizeTimer = setTimeout(() => {
this.calcContainerWidth();
}, 50);
}
this.calcContainerWidth();
}
}
},
mounted() {
this.isMounted = true;
this.calcContainerWidth();
window.addEventListener('resize', this.handleResize);
document.addEventListener('click', this.closeContextMenu);
},
beforeUnmount() {
window.removeEventListener('resize', this.handleResize);
document.removeEventListener('click', this.closeContextMenu);
clearTimeout(this.resizeTimer);
this.isMounted = false;
},
methods: {
// 获取指定列、指定层的库位（按行号排序）
getColumnLayerWarehouses(column, layer) {
const columnData = this.columns[column];
if (!columnData) return [];
const layerKey = `layer${layer}`;
return columnData[layerKey].sort((a, b) => a.parsedInfo.row - b.parsedInfo.row);
// 获取指定列的level值（3=合并，4=拆分）
getColumnLevel(column) {
const columnData = this.columns[column] || {};
// 优先取列级别的level，若无则取第一个库位的level
if (columnData.level) return columnData.level;
const firstWarehouse = columnData.layer1?.[0] || columnData.layer2?.[0];
return firstWarehouse?.parsedInfo?.level || 3; // 默认合并状态
},
// 获取指定列的总行数（layer1 + layer2）
getColTotalRows(column) {
const columnData = this.columns[column];
if (!columnData) return 0;
return columnData.layer1.length;
// 处理列拆分/合并状态切换
handleColumnToggle(column) {
const currentLevel = this.getColumnLevel(column);
// 切换level：3↔4
const newLevel = currentLevel === 3 ? 4 : 3;
// 向父组件发送切换事件，由父组件更新columns数据
// 如果切换为合并状态，调用handleMergeWarehouse方法
// 需要二次确认
console.log(this.columns[column])
const columnData = this.columns[column] || {};
const columnFlag = columnData.layer1?.[0]?.actualWarehouseCode?.substring(0, 4) || ''; // 取前四位
this.$confirm(`确认将列 ${column} 切换为${newLevel === 3 ? '大卷' : '小卷'}状态吗？`, '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
// 构造出请求数据
const payload = {
// 列的前四位，例如：F2A1
columnFlag,
}
console.log(payload, newLevel)
if (newLevel === 3) {
// 获取待分割的ID, 对应列第一层的前五个和第二层的前五个
const splitIds = [];
const layer1Warehouses = columnData.layer1 || [];
const layer2Warehouses = columnData.layer2 || [];
for (let i = 0; i < layer1Warehouses.length; i++) {
if (layer1Warehouses[i]) splitIds.push(layer1Warehouses[i].parentId);
}
for (let i = 0; i < layer2Warehouses.length; i++) {
if (layer2Warehouses[i]) splitIds.push(layer2Warehouses[i].parentId);
}
// 1. 先统计每个 parentId 出现的次数
const countMap = splitIds.reduce((map, id) => {
map.set(id, (map.get(id) || 0) + 1);
return map;
}, new Map());
// 2. 过滤出至少出现两次的 parentId，再去重（map的key本身唯一，去重可省略但保留更严谨）
payload.locationIds = [...new Set(
splitIds.filter(id => countMap.get(id) >= 2)
)];
console.log(payload)
this.handleMergeWarehouse(payload);
} else if (newLevel === 4) {
// 获取待分割的ID, 对应列第一层的前五个和第二层的前五个
const splitIds = [];
const layer1Warehouses = columnData.layer1 || [];
const layer2Warehouses = columnData.layer2 || [];
const maxSplitCount = 5; // 最多拆分5个
for (let i = 0; i < maxSplitCount; i++) {
if (layer1Warehouses[i]) splitIds.push(layer1Warehouses[i].actualWarehouseId);
if (layer2Warehouses[i]) splitIds.push(layer2Warehouses[i].actualWarehouseId);
}
payload.splitIds = splitIds;
console.log(payload)
// 如果切换为拆分状态，调用handleSplitWarehouse方法
this.handleSplitWarehouse(payload);
} else {
// 其他情况,数据异常
this.$message.error(`列 ${column} 切换状态异常,当前状态为${currentLevel}`);
// this.handleMergeWarehouse(column);
return;
}
})
},
// 判断列是否超限
isColOverflow(column) {
const totalRows = this.getColTotalRows(column);
return totalRows > this.rulerMaxRow;
},
// 计算列内格子高度
getWarehouseCellHeight(column) {
const totalRows = this.getColTotalRows(column);
if (totalRows === 0) return this.rulerRowHeight;
return this.isColOverflow(column)
? this.rulerTotalHeight / totalRows
: this.rulerRowHeight;
},
// 获取整列库位ID
getInterlacedWarehouseIds(warehouse) {
if (!warehouse?.parsedInfo) return [];
const { column, row } = warehouse.parsedInfo;
const columnData = this.columns[column];
if (!columnData) return [];
const ids = [];
const layer1Warehouse = columnData.layer1.find(w => w.parsedInfo.row === row);
const layer2Warehouse = columnData.layer2.find(w => w.parsedInfo.row === row);
@@ -257,9 +285,12 @@ export default {
if (layer2Warehouse) ids.push(layer2Warehouse.actualWarehouseId);
return ids;
},
// 容器宽度计算
calcContainerWidth() {
this.containerWidth = this.$el.parentElement?.clientWidth || this.$el.clientWidth || 0;
if (!this.$refs.gridContainer) {
this.containerWidth = 0;
return;
}
this.containerWidth = this.$refs.gridContainer.clientWidth || 0;
},
handleResize() {
clearTimeout(this.resizeTimer);
@@ -267,100 +298,39 @@ export default {
this.calcContainerWidth();
}, 100);
},
// 单个格子点击
handleCellClick(warehouse) {
this.currentWarehouse = warehouse;
this.dialogVisible = true;
console.log('格子点击触发，仓库数据：', warehouse);
this.currentWarehouse = { ...warehouse };
this.dialogOpen = true;
},
// 单个格子右键
openContextMenu(e, warehouse) {
e.stopPropagation();
this.currentContextWarehouse = warehouse;
this.contextMenuTop = e.clientY;
this.contextMenuLeft = e.clientX;
this.contextMenuVisible = true;
handleSplitWarehouse(payload) {
this.$emit('split-warehouse', payload);
},
closeContextMenu() {
this.contextMenuVisible = false;
this.currentContextWarehouse = null;
handleMergeWarehouse(payload) {
this.$emit('merge-warehouse', payload);
},
// 右键菜单处理
handleContextMenuClick(type) {
this.contextMenuVisible = false;
if (!this.currentContextWarehouse) return;
switch (type) {
case 'view':
this.handleCellClick(this.currentContextWarehouse);
break;
case 'delete':
this.handleDeleteWarehouse(this.currentContextWarehouse);
break;
case 'split':
this.handleSplitWarehouse();
break;
case 'merge':
this.handleMergeWarehouse();
break;
}
},
// 分割库位
handleSplitWarehouse() {
if (!this.currentContextWarehouse) {
this.$message.warning('请先选择要分割的库位');
return;
}
if (this.currentContextWarehouse.isEnabled === 0) {
this.$message.warning('已占用库位无法分割');
return;
}
this.$emit('split-warehouse', this.currentContextWarehouse);
},
// 合并库位
handleMergeWarehouse() {
if (!this.currentContextWarehouse) {
this.$message.warning('请先选择要合并的库位');
return;
}
if (this.currentContextWarehouse.isEnabled === 0) {
this.$message.warning('已占用库位无法合并');
return;
}
this.$emit('merge-warehouse', this.currentContextWarehouse);
},
// 删除库位
handleDeleteWarehouse(warehouse) {
if (warehouse.isEnabled === 0) {
Message.warning('禁用状态的库位无法删除');
return;
}
this.$emit('delete-warehouse', warehouse);
}
}
};
</script>
<style scoped lang="scss">
/* 外层容器 */
.multi-layer-grid {
width: 100% !important;
width: 100%;
height: 100%;
box-sizing: border-box;
margin: 0 !important;
padding: 0 !important;
overflow: hidden !important;
margin: 0;
padding: 0;
}
/* 列标尺 */
.col-ruler {
display: flex;
height: 30px;
line-height: 30px;
background: #f5f7fa;
border-bottom: 1px solid #e4e7ed;
width: 100% !important;
width: 100%;
box-sizing: border-box;
overflow: hidden !important;
overflow: hidden;
.ruler-empty {
width: 30px;
@@ -379,25 +349,79 @@ export default {
border-right: 1px solid #e4e7ed;
box-sizing: border-box;
flex-shrink: 0;
position: relative; // 为切换按钮定位做准备
// 列号文本
.column-number {
display: inline-block;
z-index: 1;
position: relative;
}
// 拆分/合并切换按钮
.split-merge-toggle {
position: absolute;
top: 0;
right: 0;
transform: translateY(0);
background: #fff;
border: 1px solid #e4e7ed;
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
padding: 2px 6px;
font-size: 11px;
cursor: pointer;
display: flex;
align-items: center;
gap: 2px;
opacity: 0.7;
transition: all 0.2s ease;
color: #606266;
&:hover {
opacity: 1;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
// 拆分状态样式
&.is-split {
background: #e8f5e9;
border-color: #2e7d32;
color: #2e7d32;
}
// 合并状态样式
&.is-merge {
background: #fff3e0;
border-color: #e65100;
color: #e65100;
}
.el-icon-s-tools {
font-size: 10px;
}
.toggle-text {
white-space: nowrap;
}
}
}
}
/* 行标尺 + 网格外层 */
.row-grid-wrapper {
display: flex;
width: 100% !important;
width: 100%;
height: calc(100% - 30px);
box-sizing: border-box;
overflow: hidden !important;
overflow: hidden;
}
/* 左侧行标尺 */
.row-ruler {
width: 30px;
background: #f5f7fa;
border-right: 1px solid #e4e7ed;
flex-shrink: 0;
overflow: hidden !important;
overflow: hidden;
height: var(--total-height);
.ruler-item {
@@ -411,29 +435,27 @@ export default {
}
}
/* 网格容器 */
.grid-container {
display: grid;
width: 100% !important;
width: 100%;
grid-template-columns: repeat(var(--column-count), minmax(0, var(--half-cell-width)));
grid-auto-rows: var(--total-height); /* 每行高度=标尺总高度 */
grid-auto-rows: var(--total-height);
gap: 0px;
box-sizing: border-box;
margin: 0 !important;
padding: 0 !important;
margin: 0;
padding: 0;
height: var(--total-height);
overflow: hidden !important;
overflow: hidden;
-ms-overflow-style: none;
scrollbar-width: none;
&::-webkit-scrollbar {
display: none !important;
width: 0 !important;
height: 0 !important;
display: none;
width: 0;
height: 0;
}
}
/* 列容器（左右小列的外层容器）- 核心修改：移除底部padding，区分两层容器高度 */
.column-container {
display: flex;
flex-direction: column;
@@ -443,25 +465,19 @@ export default {
border: 1px solid #e4e7ed;
border-radius: 4px;
/* 移除：原填补空隙的底部padding */
/* padding-bottom: calc(var(--offset-value, 0px) + 2px); */
/* 左容器（layer1）基础样式：强制100%高度 */
&.layer-1-container {
background-color: #fff3e020;
height: 100%;
}
/* 右容器（layer2）基础样式：自动高度，覆盖100% */
&.layer-2-container {
background-color: #e8f5e920;
height: 100%;
}
}
/* 单个库位格子（容器内的子元素） */
.warehouse-cell {
height: var(--item-height); /* 动态高度：超限列缩小 */
height: var(--item-height);
border: 1px solid #e4e7ed;
border-radius: 4px;
display: flex;
@@ -474,24 +490,19 @@ export default {
z-index: 1;
overflow: hidden;
margin: 1px 0;
/* 确保transform偏移不影响点击区域 */
transform-origin: top center;
/* 第一层格子样式 */
&.layer-1:not(.disabled) {
background: #fff3e0;
color: #e65100;
}
/* 第二层格子样式 */
&.layer-2:not(.disabled) {
background: #e8f5e9;
color: #2e7d32;
/* 偏移后增加z-index，避免被遮挡 */
z-index: 1;
}
/* 禁用状态 */
&.disabled {
background: #fafafa;
color: #909399;
@@ -505,7 +516,6 @@ export default {
}
}
/* 单个格子独立hover */
&:not(.disabled):hover {
border-color: #90caf9;
background: #f0f8ff;
@@ -513,7 +523,6 @@ export default {
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}
/* 格子文字 */
.cell-name {
width: 100%;
height: 90%;
@@ -547,7 +556,7 @@ export default {
.disabled & .cell-line1,
.disabled & .cell-line2 {
color: #909399 !important;
color: #909399;
}
.layer-1:not(.disabled) & .cell-line1,
@@ -561,57 +570,4 @@ export default {
}
}
}
/* 右键菜单 */
.custom-contextmenu {
position: fixed;
width: 120px;
background: #ffffff;
border-radius: 4px;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
border: 1px solid #ebeef5;
padding: 5px 0;
margin: 0;
list-style: none;
z-index: 9999;
ul {
margin: 0;
padding: 0;
list-style: none;
}
li {
padding: 6px 15px;
cursor: pointer;
font-size: 14px;
color: #606266;
transition: background-color 0.2s;
&:hover {
background-color: #f5f7fa;
}
&.disabled {
color: #c0c4cc;
cursor: not-allowed;
&:hover {
background-color: #ffffff;
}
}
}
.menu-divider {
height: 1px;
margin: 4px 0;
background-color: #ebeef5;
padding: 0;
cursor: default;
&:hover {
background-color: #ebeef5;
}
}
}
</style>

60
klp-ui/src/views/wms/warehouse/overview.vue
View File

@@ -15,7 +15,12 @@
element-loading-spinner="el-icon-loading">
<!-- 导出所有二维码 -->
<!-- <button buttonLoading type="primary" @click="exportAllQrcodes">导出二维码</button> -->
<WarehouseBird :warehouse-list="warehouseList" @open-init-dialog="openInitDialog" @split-warehouse="handleSplitWarehouse"/>
<WarehouseBird
:warehouse-list="warehouseList"
@open-init-dialog="openInitDialog"
@split-warehouse="handleSplitWarehouse"
@merge-warehouse="handleMergeWarehouse"
/>
</div>
<!-- 未选中节点提示 -->
@@ -121,18 +126,51 @@ export default {
},
methods: {
/**
* 处理分割库位事件
*/
handleSplitWarehouse(warehouse) {
* 处理分割库位事件
*/
handleSplitWarehouse(payload) {
// this.$message.success(`成功分割库位：${warehouse.actualWarehouseCode}`);
console.log(warehouse)
// splitActualWarehouse(warehouse.actualWarehouseId).then(res => {
// this.$message.success(`成功分割库位：${warehouse.actualWarehouseCode}`);
// this.getWarehouseList(this.selectedNodeId)
// }).catch(err => {
// this.$message.error(`分割库位失败：${err.message}`);
// })
console.log(payload)
this.rightLoading = true;
const loadingInstance = this.$loading({
lock: true,
text: '正在转化为小卷库位，这个操作需要一段时间，请稍候...',
spinner: 'el-icon-loading',
background: 'rgba(0, 0, 0, 0.7)'
});
splitActualWarehouse(payload).then(res => {
this.$message.success(`成功转化为小卷库位`);
this.getWarehouseList(this.selectedNodeId)
}).catch(err => {
this.$message.error(`转化为小卷库位失败：${err.message}`);
}).finally(() => {
this.rightLoading = false;
loadingInstance.close();
})
},
/**
* 处理合并库位事件
*/
handleMergeWarehouse(payload) {
this.rightLoading = true;
const loadingInstance = this.$loading({
lock: true,
text: '正在转化为大卷库位，这个操作需要一段时间，请稍候...',
spinner: 'el-icon-loading',
background: 'rgba(0, 0, 0, 0.7)'
});
mergeActualWarehouse(payload).then(res => {
this.$message.success(`成功转化为大卷库位`);
this.getWarehouseList(this.selectedNodeId)
}).catch(err => {
this.$message.error(`转化为大卷库位失败：${err.message}`);
}).finally(() => {
this.rightLoading = false;
loadingInstance.close();
})
},
// 获取树形数据
getWarehouseTree() {
this.treeLoading = true;