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

feat(wms): 添加库位分割合并功能并优化仓库展示

Browse Source 
refactor(warehouse): 重构仓库组件为按列展示模式
- 将分层展示改为分列展示，每列包含上下两层库位
- 添加右键菜单支持分割、合并操作
- 优化库位格子样式和交互

feat(crm): 新增订单编辑组件并实现自动保存
- 添加OrderEdit组件支持订单信息编辑
- 实现2秒延迟自动保存功能
- 优化订单详情页面布局

fix(delivery): 在查询参数中添加当前用户ID
- 在mycoil列表查询中添加saleId参数

style(preOrder): 注释掉审核人和审核时间列
- 隐藏预订单列表中的审核信息列

chore(warehouse): 移除仓库实体的导入导出按钮
- 注释掉仓库管理页面的模板下载和导入功能
This commit is contained in:
砂糖
2025-12-19 18:06:55 +08:00
parent a178ee4f5e
commit c821a2f7b9
10 changed files with 703 additions and 202 deletions
Download Patch File Download Diff File Expand all files Collapse all files

0
klp-ui/src/views/wms/warehouse/components/GridItem.vue Normal file
View File

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

@@ -8,14 +8,14 @@
<span class="value">{{ statistics.total }}</span>
</div>
<div class="statistics-item">
<span class="label">总层数：</span>
<span class="value">{{ statistics.layerCount }}</span>
<span class="label">总列数：</span>
<span class="value">{{ statistics.columnCount }}</span>
</div>
<div class="statistics-item">
<span class="label">各层库位分布：</span>
<span class="label">各列库位分布：</span>
<span class="value">
<span v-for="(count, layer) in statistics.layerDetail" :key="layer">
第{{ layer }}层：{{ count }}个
<span v-for="(count, column) in statistics.columnDetail" :key="column">
第{{ column }}列：{{ count }}个
</span>
</span>
</div>
@@ -38,28 +38,27 @@
</div>
</div>
<!-- 分层库位容器 -->
<!-- 分列库位容器 -->
<div class="layers-container">
<!-- 无数据提示 -->
<div class="empty-tip" v-if="Object.keys(layers).length === 0 && warehouseList.length > 0">
暂无解析到有效的库位分层数据
<div class="empty-tip" v-if="Object.keys(columns).length === 0 && warehouseList.length > 0">
暂无解析到有效的库位分列数据
</div>
<div class="empty-tip" v-else-if="warehouseList.length === 0">
<div class="empty-text">该分类下暂无库位数据</div>
<el-button type="primary" icon="el-icon-plus" @click="openInitDialog">初始化库位</el-button>
</div>
<warehouse-interlaced v-else="warehouseList.length" :layers="layers" />
<warehouse-interlaced v-else="warehouseList.length" :columns="columns" @split-warehouse="handleSplitWarehouse"/>
</div>
</div>
</template>
<script>
import WarehouseGrid from './WarehouseGrid.vue';
import WarehouseInterlaced from './WarehouseInterlaced.vue';
export default {
name: "WarehouseBird",
components: { WarehouseGrid, WarehouseInterlaced },
components: { WarehouseInterlaced },
props: {
// 原始库位列表
warehouseList: {
@@ -69,18 +68,18 @@ export default {
},
data() {
return {
// 分层库位数据
layers: {},
// 统计信息
// 分列库位数据（核心修改：从layers改为columns）
columns: {},
// 统计信息（适配分列逻辑）
statistics: {
total: 0,
layerCount: 0,
layerDetail: {}
columnCount: 0,
columnDetail: {}
}
};
},
watch: {
// 监听库位列表变化，重新构建分层数据
// 监听库位列表变化，重新构建分列数据
warehouseList: {
immediate: true,
handler(newVal) {
@@ -89,8 +88,11 @@ export default {
}
},
methods: {
handleSplitWarehouse(warehouse) {
this.$emit('split-warehouse', warehouse);
},
/**
* 解析库位编码
* 解析第三级库位编码
*/
parseWarehouseCode(code) {
if (!code) return null;
@@ -103,6 +105,7 @@ export default {
}
return {
level: 3,
warehouseFirst: match[1],
warehouseSecond: match[2],
column: Number(match[3]),
@@ -112,60 +115,93 @@ export default {
},
/**
* 构建分层库位数据结构
* 解析第四级库位编码，格式为F2A1-01-01-1
*/
parseWarehouseCodeFourth(code) {
if (!code) return null;
const reg = /^([A-Za-z])(\d+[A-Za-z])(\d)-X(\d{2})-(\d+)$/;
const match = code.match(reg);
if (!match) {
console.warn(`库位编码解析失败：${code}，格式不符合规范`);
return null;
}
return {
level: 4,
warehouseFirst: match[1],
warehouseSecond: match[2],
column: Number(match[3]),
row: Number(match[4]),
layer: match[5],
};
},
/**
* 重构：按列构建库位数据结构，每列分为两层数组
*/
buildWarehouseBox(list) {
const layerMap = {};
const columnMap = {}; // 按列分组的核心对象
const statistics = {
total: list.length,
layerCount: 0,
layerDetail: {},
columnCount: 0,
columnDetail: {},
};
// 按层分组
// 1. 按列分组，每列内部分为layer1和layer2两个数组
list.forEach((warehouse) => {
const codeInfo = this.parseWarehouseCode(warehouse.actualWarehouseCode);
let codeInfo = {}
if (warehouse.actualWarehouseType == 4) {
codeInfo = this.parseWarehouseCodeFourth(warehouse.actualWarehouseCode);
} else {
codeInfo = this.parseWarehouseCode(warehouse.actualWarehouseCode);
}
if (!codeInfo) return;
const { layer, row, column } = codeInfo;
warehouse.parsedInfo = codeInfo;
if (!layerMap[layer]) {
layerMap[layer] = {
// 初始化列数据结构：每列包含layer1、layer2数组，以及最大行号
if (!columnMap[column]) {
columnMap[column] = {
maxRow: 0,
maxColumn: 0,
warehouses: [],
emptyCount: 0
layer1: [], // 第一层库位数组
layer2: [], // 第二层库位数组
total: 0 // 该列总库位数
};
}
layerMap[layer].maxRow = Math.max(layerMap[layer].maxRow, row);
layerMap[layer].maxColumn = Math.max(layerMap[layer].maxColumn, column);
layerMap[layer].warehouses.push(warehouse);
// 更新列的最大行号
columnMap[column].maxRow = Math.max(columnMap[column].maxRow, row);
// 根据层数将库位放入对应数组
if (layer === '1' || layer === 1) {
columnMap[column].layer1.push(warehouse);
} else if (layer === '2' || layer === 2) {
columnMap[column].layer2.push(warehouse);
}
// 更新该列总库位数
columnMap[column].total = columnMap[column].layer1.length + columnMap[column].layer2.length;
});
// 处理空占位和排序
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;
});
// 2. 对每列的两层数据分别按行号排序
Object.keys(columnMap).forEach((column) => {
const columnData = columnMap[column];
// 按行号排序（保证展示顺序正确）
columnData.layer1.sort((a, b) => a.parsedInfo.row - b.parsedInfo.row);
columnData.layer2.sort((a, b) => a.parsedInfo.row - b.parsedInfo.row);
});
// 更新统计信息
statistics.layerCount = Object.keys(layerMap).length;
Object.keys(layerMap).forEach((layer) => {
statistics.layerDetail[layer] = layerMap[layer].warehouses.length;
// 3. 更新统计信息（适配分列逻辑）
statistics.columnCount = Object.keys(columnMap).length;
Object.keys(columnMap).forEach((column) => {
statistics.columnDetail[column] = columnMap[column].total;
});
this.layers = layerMap;
// 4. 赋值到响应式数据
this.columns = columnMap;
this.statistics = statistics;
},
@@ -249,7 +285,7 @@ export default {
}
.occupied {
background-color: #111;
background-color: #fafafa;
}
.legend-text {
@@ -259,7 +295,7 @@ export default {
}
}
// 分层容器样式
// 分列容器样式
.layers-container {
display: flex;

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

@@ -1,79 +1,118 @@
<template>
<div class="multi-layer-grid">
<div class="multi-layer-grid" @click="closeContextMenu" @keydown.esc="closeContextMenu">
<!-- 顶部列标尺 -->
<div class="col-ruler" :style="{ '--cell-width': `${cellWidth}px` }">
<div class="ruler-empty"></div>
<div v-for="col in maxColumn" :key="`col-${col}`" class="ruler-item">
<div v-for="col in sortedColumnKeys" :key="`col-${col}`" class="ruler-item">
{{ col }}
</div>
</div>
<!-- 左侧行标尺 + 库位网格 -->
<div class="row-grid-wrapper">
<!-- 左侧行标尺 -->
<div class="row-ruler">
<div v-for="row in maxRow" :key="`row-${row}`" class="ruler-item">
<!-- 左侧行标尺（高度固定） -->
<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': maxColumn * 2,
'--row-height': '80px'
}"
>
<!-- 第一层库位（左半列） -->
<div
v-for="warehouse in layer1Warehouses"
:key="`warehouse-1-${warehouse.actualWarehouseId}`"
class="warehouse-cell layer-1"
:class="{ disabled: warehouse.isEnabled === 0 }"
:style="{
gridRow: `${warehouse.parsedInfo.row} / ${warehouse.parsedInfo.row + 1}`,
gridColumn: `${(warehouse.parsedInfo.column - 1) * 2 + 1} / ${(warehouse.parsedInfo.column - 1) * 2 + 2}`
}"
@click="handleCellClick(warehouse)"
>
<div class="cell-name">
<div class="cell-line1">{{ warehouse.actualWarehouseName || '-' }}</div>
<div class="cell-line2">{{ warehouse.currentCoilNo || '-' }}</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="cell-name">
<div class="cell-line1">{{ warehouse.actualWarehouseName || '-' }}</div>
<div class="cell-line2">{{ warehouse.currentCoilNo || '-' }}</div>
</div>
</div>
</div>
</div>
<!-- 第二层库位（右半列 + 下移半格） -->
<div
v-for="warehouse in layer2Warehouses"
:key="`warehouse-2-${warehouse.actualWarehouseId}`"
class="warehouse-cell layer-2"
:class="{ disabled: warehouse.isEnabled === 0 }"
:style="{
gridRow: `${warehouse.parsedInfo.row} / ${warehouse.parsedInfo.row + 1}`,
gridColumn: `${(warehouse.parsedInfo.column - 1) * 2 + 2} / ${(warehouse.parsedInfo.column - 1) * 2 + 3}`
}"
@click="handleCellClick(warehouse)"
>
<div class="cell-name">
<div class="cell-line1">{{ warehouse.actualWarehouseName || '-' }}</div>
<div class="cell-line2">{{ warehouse.currentCoilNo || '-' }}</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="cell-name">
<div class="cell-line1">{{ warehouse.actualWarehouseName || '-' }}</div>
<div class="cell-line2">{{ warehouse.currentCoilNo || '-' }}</div>
</div>
</div>
</div>
</div>
</template>
</div>
</div>
<!-- 库位详情弹窗 -->
<el-dialog
title="钢卷库位详情"
:visible.sync="dialogVisible"
width="600px"
destroy-on-close
append-to-body
center
<!-- 自定义右键菜单 -->
<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-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>
@@ -81,12 +120,17 @@
<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="启用状态">
<el-tag :type="currentWarehouse.isEnabled === 1 ? 'success' : 'danger'">
{{ currentWarehouse.isEnabled === 1 ? '启用' : '禁用' }}
{{ currentWarehouse.isEnabled === 1 ? '未占用' : currentWarehouse.currentCoilNo }}
</el-tag>
</el-descriptions-item>
<el-descriptions-item label="创建时间" span="2">{{ currentWarehouse.createTime || '无' }}</el-descriptions-item>
<el-descriptions-item label="库位码">
<QRCode :content="currentWarehouse.actualWarehouseId" :size="60" />
</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>
@@ -96,10 +140,16 @@
</template>
<script>
import QRCode from '@/components/QRCode/index.vue';
import { Message } from 'element-ui';
export default {
name: "SteelCoilWarehouse",
components: {
QRCode
},
props: {
layers: {
columns: {
type: Object,
required: true,
default: () => ({})
@@ -110,49 +160,104 @@ export default {
dialogVisible: false,
currentWarehouse: null,
containerWidth: 0,
resizeTimer: null
resizeTimer: null,
// 右键菜单
contextMenuVisible: false,
contextMenuTop: 0,
contextMenuLeft: 0,
currentContextWarehouse: null,
// 标尺配置
rulerRowHeight: 80,
rulerMaxRow: 0
};
},
computed: {
layer1Warehouses() {
return this.layers['1']?.warehouses || [];
// 排序后的列号（数字升序）
sortedColumnKeys() {
return Object.keys(this.columns)
.map(key => Number(key))
.sort((a, b) => a - b);
},
layer2Warehouses() {
return this.layers['2']?.warehouses || [];
},
maxRow() {
let max = 0;
Object.keys(this.layers).forEach(layer => {
max = Math.max(max, this.layers[layer].maxRow);
});
return max;
},
maxColumn() {
let max = 0;
Object.keys(this.layers).forEach(layer => {
max = Math.max(max, this.layers[layer].maxColumn);
});
return max;
// 标尺总高度
rulerTotalHeight() {
return this.rulerMaxRow * this.rulerRowHeight;
},
// 列宽度（原始列）
cellWidth() {
if (!this.containerWidth || this.maxColumn === 0) return 60;
if (!this.containerWidth || this.sortedColumnKeys.length === 0) return 60;
const availableWidth = Math.max(0, this.containerWidth - 30);
const averageWidth = availableWidth / this.maxColumn;
return averageWidth;
return availableWidth / this.sortedColumnKeys.length;
},
// 半列宽度（小列/容器宽度）
halfCellWidth() {
return this.cellWidth / 2;
}
},
watch: {
// 初始化标尺最大行数（仅一次）
columns: {
immediate: 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;
}
this.calcContainerWidth();
}
}
},
mounted() {
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);
},
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);
},
// 获取指定列的总行数（layer1 + layer2）
getColTotalRows(column) {
const columnData = this.columns[column];
if (!columnData) return 0;
return columnData.layer1.length;
},
// 判断列是否超限
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);
if (layer1Warehouse) ids.push(layer1Warehouse.actualWarehouseId);
if (layer2Warehouse) ids.push(layer2Warehouse.actualWarehouseId);
return ids;
},
// 容器宽度计算
calcContainerWidth() {
this.containerWidth = this.$el.parentElement?.clientWidth || this.$el.clientWidth || 0;
},
@@ -162,16 +267,81 @@ export default {
this.calcContainerWidth();
}, 100);
},
// 单个格子点击
handleCellClick(warehouse) {
this.currentWarehouse = warehouse;
this.dialogVisible = true;
},
// 单个格子右键
openContextMenu(e, warehouse) {
e.stopPropagation();
this.currentContextWarehouse = warehouse;
this.contextMenuTop = e.clientY;
this.contextMenuLeft = e.clientX;
this.contextMenuVisible = true;
},
closeContextMenu() {
this.contextMenuVisible = false;
this.currentContextWarehouse = null;
},
// 右键菜单处理
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;
height: 100%;
@@ -186,7 +356,7 @@ export default {
display: flex;
height: 30px;
line-height: 30px;
background: #f5f7fa; /* 更柔和的标尺背景 */
background: #f5f7fa;
border-bottom: 1px solid #e4e7ed;
width: 100% !important;
box-sizing: border-box;
@@ -209,12 +379,10 @@ export default {
border-right: 1px solid #e4e7ed;
box-sizing: border-box;
flex-shrink: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
/* 行标尺 + 网格外层 */
.row-grid-wrapper {
display: flex;
width: 100% !important;
@@ -223,13 +391,14 @@ export default {
overflow: hidden !important;
}
/* 行标尺 */
/* 左侧行标尺 */
.row-ruler {
width: 30px;
background: #f5f7fa; /* 更柔和的标尺背景 */
background: #f5f7fa;
border-right: 1px solid #e4e7ed;
flex-shrink: 0;
overflow: hidden !important;
height: var(--total-height);
.ruler-item {
height: 80px;
@@ -239,9 +408,6 @@ export default {
color: #606266;
border-bottom: 1px solid #e4e7ed;
box-sizing: border-box;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
@@ -250,11 +416,12 @@ export default {
display: grid;
width: 100% !important;
grid-template-columns: repeat(var(--column-count), minmax(0, var(--half-cell-width)));
grid-auto-rows: var(--row-height);
gap: 1px;
grid-auto-rows: var(--total-height); /* 每行高度=标尺总高度 */
gap: 0px;
box-sizing: border-box;
margin: 0 !important;
padding: 0 !important;
height: var(--total-height);
overflow: hidden !important;
-ms-overflow-style: none;
scrollbar-width: none;
@@ -266,11 +433,37 @@ export default {
}
}
/* 库位单元格基础样式 */
.warehouse-cell {
height: var(--row-height);
/* 列容器（左右小列的外层容器）- 核心修改：移除底部padding，区分两层容器高度 */
.column-container {
display: flex;
flex-direction: column;
justify-content: flex-start;
padding: 1px;
box-sizing: border-box;
border: 1px solid #e4e7ed;
border-radius: 4px; /* 圆角更柔和 */
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); /* 动态高度：超限列缩小 */
border: 1px solid #e4e7ed;
border-radius: 4px;
display: flex;
justify-content: center;
align-items: center;
@@ -280,29 +473,31 @@ export default {
position: relative;
z-index: 1;
overflow: hidden;
margin: 1px 0;
/* 确保transform偏移不影响点击区域 */
transform-origin: top center;
/* 启用状态 - 第一层：柔和暖橙（低饱和度） */
/* 第一层格子样式 */
&.layer-1:not(.disabled) {
background: #fff3e0; /* 柔和浅橙 */
color: #e65100; /* 文字用深一点的橙，保证可读性 */
background: #fff3e0;
color: #e65100;
}
/* 启用状态 - 第二层：柔和薄荷绿（低饱和度） */
/* 第二层格子样式 */
&.layer-2:not(.disabled) {
background: #e8f5e9; /* 柔和浅绿 */
color: #2e7d32; /* 文字用深一点的绿，保证可读性 */
transform: translateY(50%);
position: relative;
top: 0;
background: #e8f5e9;
color: #2e7d32;
/* 偏移后增加z-index，避免被遮挡 */
z-index: 1;
}
/* 禁用状态 - 通用浅灰 */
/* 禁用状态 */
&.disabled {
background: #111; /* 浅灰背景 */
color: #909399; /* 浅灰文字 */
cursor: not-allowed; /* 禁用光标 */
opacity: 0.8; /* 降低透明度 */
/* 禁用状态取消hover效果 */
background: #fafafa;
color: #909399;
cursor: not-allowed;
opacity: 0.8;
&:hover {
border-color: #e4e7ed;
background: #fafafa;
@@ -310,15 +505,15 @@ export default {
}
}
/* 启用状态hover效果（更柔和） */
/* 单个格子独立hover */
&:not(.disabled):hover {
border-color: #90caf9; /* 柔和的蓝色边框 */
background: #f0f8ff; /* 极浅的蓝背景 */
border-color: #90caf9;
background: #f0f8ff;
z-index: 2;
box-shadow: 0 2px 4px rgba(0,0,0,0.05); /* 轻微阴影，提升层次感 */
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}
/* 两行文字样式 */
/* 格子文字 */
.cell-name {
width: 100%;
height: 90%;
@@ -330,21 +525,19 @@ export default {
padding: 0 4px;
box-sizing: border-box;
/* 第一行：库位名称 */
.cell-line1 {
font-size: 14px;
font-size: 12px;
font-weight: 600;
line-height: 1.2;
margin-bottom: 4px;
margin-bottom: 2px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
width: 100%;
}
/* 第二行：currentCoilNo */
.cell-line2 {
font-size: 13px;
font-size: 11px;
line-height: 1.2;
overflow: hidden;
text-overflow: ellipsis;
@@ -352,21 +545,73 @@ export default {
width: 100%;
}
/* 禁用状态文字颜色 */
.disabled & .cell-line1,
.disabled & .cell-line2 {
color: #909399 !important;
}
/* 启用状态文字颜色适配 */
.layer-1:not(.disabled) & .cell-line1,
.layer-1:not(.disabled) & .cell-line2 {
color: #e65100;
}
.layer-2:not(.disabled) & .cell-line1,
.layer-2:not(.disabled) & .cell-line2 {
color: #2e7d32;
}
}
}
/* 右键菜单 */
.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>

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

@@ -15,7 +15,7 @@
element-loading-spinner="el-icon-loading">
<!-- 导出所有二维码 -->
<!-- <button buttonLoading type="primary" @click="exportAllQrcodes">导出二维码</button> -->
<WarehouseBird :warehouse-list="warehouseList" @open-init-dialog="openInitDialog" />
<WarehouseBird :warehouse-list="warehouseList" @open-init-dialog="openInitDialog" @split-warehouse="handleSplitWarehouse"/>
</div>
<!-- 未选中节点提示 -->
@@ -58,7 +58,7 @@
</template>
<script>
import { listActualWarehouse, treeActualWarehouseTwoLevel, getActualWarehouse, generateLocations } from "@/api/wms/actualWarehouse";
import { listActualWarehouse, treeActualWarehouseTwoLevel, getActualWarehouse, generateLocations, splitActualWarehouse, mergeActualWarehouse } from "@/api/wms/actualWarehouse";
import WarehouseBird from './components/WarehouseBird.vue';
import jsPDF from 'jspdf';
import QRCode from 'qrcode';
@@ -120,6 +120,19 @@ export default {
if (this.nodeClickTimer) clearTimeout(this.nodeClickTimer);
},
methods: {
/**
* 处理分割库位事件
*/
handleSplitWarehouse(warehouse) {
// 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}`);
// })
},
// 获取树形数据
getWarehouseTree() {
this.treeLoading = true;
@@ -392,7 +405,7 @@ export default {
gap: 16px;
.tree-container {
width: 280px;
width: 160px;
height: 100%;
background: #fff;
border-radius: 8px;

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

@@ -37,12 +37,12 @@
<el-button type="success" icon="el-icon-plus" size="mini" @click="openCreateDialog()">
新增顶级节点
</el-button>
<el-button type="warning" icon="el-icon-download" size="mini" @click="handleDownloadTemplate">
<!-- <el-button type="warning" icon="el-icon-download" size="mini" @click="handleDownloadTemplate">
下载导入模板
</el-button>
<el-button type="danger" icon="el-icon-upload2" size="mini" @click="triggerImport">
导入
</el-button>
</el-button> -->
<!-- <el-button type="info" icon="el-icon-sort" size="mini" @click="toggleExpand">
{{ isExpandAll ? '折叠全部' : '展开全部' }}
</el-button> -->