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

Merge remote-tracking branch 'origin/0.8.X' into 0.8.X

Browse Source
This commit is contained in:
Joshi
2025-12-05 13:51:50 +08:00
parent 7f7c3d615d 7385afc8ba
commit 60bf543533
3 changed files with 144 additions and 87 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -22,11 +22,22 @@
</el-card> </el-card>
</div> </div>
<!-- 图例 -->
<div class="legend-container">
<div class="legend-item">
<div class="legend-color normal"></div>
<span class="legend-text">正常未占用</span>
</div>
<div class="legend-item">
<div class="legend-color occupied"></div>
<span class="legend-text">已占用</span>
</div>
</div>
<!-- 分层库位容器 --> <!-- 分层库位容器 -->
<div class="layers-container"> <div class="layers-container">
<!-- 遍历每层，渲染 Grid 组件 --> <!-- 遍历每层，渲染 Grid 组件 -->
<div v-for="(layerData, layer) in layers" :key="layer" class="layer-section"> <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" /> <WarehouseGrid :layer="layer" :layer-data="layerData" />
</div> </div>
@@ -198,9 +209,53 @@ export default {
} }
} }
// 图例样式
.legend-container {
display: flex;
align-items: center;
margin-bottom: 16px;
padding: 8px 12px;
background: #f8f9fa;
border-radius: 4px;
.legend-item {
display: flex;
align-items: center;
margin-right: 24px;
&:last-child {
margin-right: 0;
}
.legend-color {
width: 16px;
height: 16px;
border-radius: 2px;
margin-right: 8px;
border: 1px solid #e6e6e6;
}
.normal {
background-color: #ffffff;
}
.occupied {
background-color: #c0c4cc;
}
.legend-text {
font-size: 14px;
color: #606266;
}
}
}
// 分层容器样式 // 分层容器样式
.layers-container { .layers-container {
display: flex;
.layer-section { .layer-section {
flex: 1;
max-width: 50%;
margin-bottom: 24px; margin-bottom: 24px;
} }

169
klp-ui/src/views/wms/warehouse/components/WarehouseGrid.vue
View File

@@ -1,87 +1,89 @@
<template> <template>
<div class="grid-wrapper"> <div>
<!-- 转置按钮 --> <div style="display: flex; align-items: center;">
<el-button <el-divider content-position="left">第{{ layer }}层库位</el-divider>
type="text" <!-- 转置按钮 -->
icon="el-icon-refresh-left" <el-button type="text" icon="el-icon-refresh-left" size="mini" @click="toggleTranspose">
size="mini" {{ isTransposed ? '恢复行列' : '行列转置' }}
@click="toggleTranspose" </el-button>
class="transpose-btn" </div>
> <div class="grid-wrapper">
{{ isTransposed ? '恢复行列' : '行列转置' }} <!-- 核心滚动容器：列标尺 + 网格区域共享滚动条 -->
</el-button> <div class="grid-scroll-container" ref="scrollContainerRef">
<!-- 滚动内容容器：列标尺 + 行标尺+网格 -->
<!-- 核心滚动容器：列标尺 + 网格区域共享滚动条 --> <div class="scroll-content">
<div class="grid-scroll-container" ref="scrollContainerRef"> <!-- 列标尺（顶部） -->
<!-- 滚动内容容器：列标尺 + 行标尺+网格 --> <div class="col-ruler">
<div class="scroll-content"> <div class="ruler-empty"></div>
<!-- 列标尺（顶部） --> <div v-for="col in transposedLayerData.maxColumn" :key="`col-${layer}-${col}`" class="ruler-item">
<div class="col-ruler"> {{ col }}
<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> </div>
<!-- 库位网格 --> <!-- 行标尺 + 库位网格 -->
<div class="grid-container" :style="{ gridTemplateColumns: `repeat(${transposedLayerData.maxColumn}, 80px)` }"> <div class="row-grid-wrapper">
<!-- 库位格子 --> <!-- 行标尺（左侧） -->
<div v-for="warehouse in transposedLayerData.warehouses" :key="warehouse.actualWarehouseId" <div class="row-ruler">
class="warehouse-cell" :class="{ disabled: warehouse.isEnabled === 0 }" <div v-for="row in transposedLayerData.maxRow" :key="`row-${layer}-${row}`" class="ruler-item">
@click="handleCellClick(warehouse)"> {{ row }}
<div class="cell-code">{{ warehouse.actualWarehouseCode }}</div> </div>
<div class="cell-name">{{ warehouse.actualWarehouseName || '-' }}</div>
</div> </div>
<!-- 空库位占位 --> <!-- 库位网格 -->
<div class="warehouse-cell empty-cell" v-for="i in transposedLayerData.emptyCount" :key="`empty-${layer}-${i}`"> <div class="grid-container"
<div class="cell-code">-</div> :style="{ gridTemplateColumns: `repeat(${transposedLayerData.maxColumn}, 60px)` }">
<!-- 库位格子 -->
<div v-for="warehouse in transposedLayerData.warehouses" :key="warehouse.actualWarehouseId"
class="warehouse-cell" :class="{ disabled: warehouse.isEnabled === 0 }"
@click="handleCellClick(warehouse)">
<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>
</div> </div>
</div> </div>
</div>
<!-- 库位详情弹窗 --> <!-- 库位详情弹窗 -->
<el-dialog title="库位详情" :visible.sync="dialogVisible" width="600px" destroy-on-close append-to-body center> <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 :column="2" border size="small" v-if="currentWarehouse">
<el-descriptions-item label="库位编码">{{ currentWarehouse.actualWarehouseCode }}</el-descriptions-item> <el-descriptions-item label="库位编码">{{ currentWarehouse.actualWarehouseCode }}</el-descriptions-item>
<el-descriptions-item label="库位名称">{{ currentWarehouse.actualWarehouseName || '无' }}</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="所属层级">{{ currentWarehouse.parsedInfo.layer || '未知' }}</el-descriptions-item>
<!-- 弹窗内行列显示适配转置状态 --> <!-- 弹窗内行列显示适配转置状态 -->
<el-descriptions-item label="行号"> <el-descriptions-item label="行号">
{{ isTransposed ? currentWarehouse.parsedInfo.column : currentWarehouse.parsedInfo.row || '未知' }} {{ isTransposed ? currentWarehouse.parsedInfo.column : currentWarehouse.parsedInfo.row || '未知' }}
</el-descriptions-item> </el-descriptions-item>
<el-descriptions-item label="列号"> <el-descriptions-item label="列号">
{{ isTransposed ? currentWarehouse.parsedInfo.row : currentWarehouse.parsedInfo.column || '未知' }} {{ isTransposed ? currentWarehouse.parsedInfo.row : currentWarehouse.parsedInfo.column || '未知' }}
</el-descriptions-item> </el-descriptions-item>
<el-descriptions-item label="一级编码">{{ currentWarehouse.parsedInfo.warehouseFirst || '未知' }}</el-descriptions-item> <el-descriptions-item label="一级编码">{{ currentWarehouse.parsedInfo.warehouseFirst || '未知'
<el-descriptions-item label="二级编码">{{ currentWarehouse.parsedInfo.warehouseSecond || '未知' }}</el-descriptions-item> }}</el-descriptions-item>
<el-descriptions-item label="启用状态"> <el-descriptions-item label="二级编码">{{ currentWarehouse.parsedInfo.warehouseSecond || '未知'
<el-tag :type="currentWarehouse.isEnabled === 1 ? 'success' : 'danger'"> }}</el-descriptions-item>
{{ currentWarehouse.isEnabled === 1 ? '启用' : '禁用' }} <el-descriptions-item label="启用状态">
</el-tag> <el-tag :type="currentWarehouse.isEnabled === 1 ? 'success' : 'danger'">
</el-descriptions-item> {{ currentWarehouse.isEnabled === 1 ? '启用' : '禁用' }}
<el-descriptions-item label="库位码"> </el-tag>
<QRCode :content="currentWarehouse.actualWarehouseId" size="60" /> </el-descriptions-item>
</el-descriptions-item> <el-descriptions-item label="库位码">
<el-descriptions-item label="创建时间" span="2">{{ currentWarehouse.createTime || '无' }}</el-descriptions-item> <QRCode :content="currentWarehouse.actualWarehouseId" size="60" />
<el-descriptions-item label="备注信息" span="2">{{ currentWarehouse.remark || '无' }}</el-descriptions-item> </el-descriptions-item>
</el-descriptions> <el-descriptions-item label="创建时间" span="2">{{ currentWarehouse.createTime || '无' }}</el-descriptions-item>
<template slot="footer"> <el-descriptions-item label="备注信息" span="2">{{ currentWarehouse.remark || '无' }}</el-descriptions-item>
<el-button @click="dialogVisible = false">关闭</el-button> </el-descriptions>
</template> <template slot="footer">
</el-dialog> <el-button @click="dialogVisible = false">关闭</el-button>
</template>
</el-dialog>
</div>
</div> </div>
</template> </template>
<script> <script>
@@ -123,7 +125,7 @@ export default {
*/ */
transposedLayerData() { transposedLayerData() {
const { maxRow, maxColumn, warehouses } = this.layerData; const { maxRow, maxColumn, warehouses } = this.layerData;
// 转置后的基础行列数 // 转置后的基础行列数
const transMaxRow = this.isTransposed ? maxColumn : maxRow; const transMaxRow = this.isTransposed ? maxColumn : maxRow;
const transMaxColumn = this.isTransposed ? maxRow : maxColumn; const transMaxColumn = this.isTransposed ? maxRow : maxColumn;
@@ -217,21 +219,26 @@ export default {
overflow-y: hidden; overflow-y: hidden;
position: relative; position: relative;
padding-bottom: 8px; // 给滚动条留空间 padding-bottom: 8px; // 给滚动条留空间
// 优化滚动条样式 // 优化滚动条样式
&::-webkit-scrollbar { &::-webkit-scrollbar {
height: 8px; height: 8px;
} }
&::-webkit-scrollbar-track { &::-webkit-scrollbar-track {
background: #f1f1f1; background: #f1f1f1;
border-radius: 4px; border-radius: 4px;
} }
&::-webkit-scrollbar-thumb { &::-webkit-scrollbar-thumb {
background: #c1c1c1; background: #c1c1c1;
border-radius: 4px; border-radius: 4px;
&:hover { &:hover {
background: #a8a8a8; background: #a8a8a8;
} }
} }
// 兼容非webkit浏览器 // 兼容非webkit浏览器
scrollbar-width: thin; scrollbar-width: thin;
scrollbar-color: #c1c1c1 #f1f1f1; scrollbar-color: #c1c1c1 #f1f1f1;
@@ -261,7 +268,7 @@ export default {
} }
.ruler-item { .ruler-item {
width: 80px; width: 60px;
text-align: center; text-align: center;
font-weight: 600; font-weight: 600;
color: #606266; color: #606266;
@@ -285,8 +292,8 @@ export default {
flex-shrink: 0; flex-shrink: 0;
.ruler-item { .ruler-item {
height: 80px; height: 60px;
line-height: 80px; line-height: 60px;
text-align: center; text-align: center;
font-weight: 600; font-weight: 600;
color: #606266; color: #606266;
@@ -303,8 +310,8 @@ export default {
// 库位格子 // 库位格子
.warehouse-cell { .warehouse-cell {
height: 80px; height: 60px;
width: 80px; width: 60px;
border: 1px solid #e6e6e6; border: 1px solid #e6e6e6;
border-radius: 0; border-radius: 0;
display: flex; display: flex;
@@ -333,12 +340,6 @@ export default {
} }
} }
.cell-code {
font-size: 14px;
font-weight: 600;
margin-bottom: 4px;
}
.cell-name { .cell-name {
font-size: 12px; font-size: 12px;
color: #606266; color: #606266;

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

@@ -21,7 +21,7 @@
<!-- 右侧仓库信息区域 - 替换为 Bird 组件 --> <!-- 右侧仓库信息区域 - 替换为 Bird 组件 -->
<div class="warehouse-container" v-if="selectedNodeId" v-loading="rightLoading" <div class="warehouse-container" v-if="selectedNodeId" v-loading="rightLoading"
element-loading-text="加载中..." element-loading-spinner="el-icon-loading"> element-loading-text="加载中..." element-loading-spinner="el-icon-loading">
<WarehouseBird :warehouse-list="warehouseList" /> <WarehouseBird :warehouse-list="warehouseList" @open-init-dialog="openInitDialog" />
</div> </div>
<!-- 未选中节点提示 --> <!-- 未选中节点提示 -->
@@ -43,7 +43,7 @@
@mousemove="handleGridHover" @mousemove="handleGridHover"
@click="confirmGridSelect" @click="confirmGridSelect"
@mouseleave="resetGridHover"> @mouseleave="resetGridHover">
<div v-for="row in 50" :key="`grid-row-${row}`" class="grid-selector-row"> <div v-for="row in 40" :key="`grid-row-${row}`" class="grid-selector-row">
<div <div
v-for="col in 10" v-for="col in 10"
:key="`grid-col-${col}`" :key="`grid-col-${col}`"
@@ -124,6 +124,7 @@ export default {
rightLoading: false, rightLoading: false,
isSwitching: false, isSwitching: false,
nodeClickTimer: null, nodeClickTimer: null,
buttonLoading: false,
}; };
}, },
created() { created() {