feat(仓库管理): 添加库位释放功能并优化组件交互
新增库位释放功能，允许用户释放被占用的库位。主要变更包括： 1. 在 WarehouseBird 和 WarehouseInterlaced 组件中添加 canRelease 和 canToggle 属性控制功能可见性 2. 实现库位释放逻辑，包括确认弹窗和 API 调用 3. 新增 release.vue 页面专门处理库位释放操作 4. 删除不再使用的 WarehouseGrid 组件 5. 优化组件间事件传递和状态管理 同时调整了相关组件的交互逻辑，提升用户体验
This commit is contained in:
砂糖
@@ -53,7 +53,8 @@
|
||||
<el-button type="primary" icon="el-icon-plus" @click="openInitDialog">初始化库位</el-button>
|
||||
</div>
|
||||
<warehouse-interlaced v-else="warehouseList.length" :id="id" :columns="columns"
|
||||
@split-warehouse="handleSplitWarehouse" @merge-warehouse="handleMergeWarehouse" />
|
||||
:canToggle="canToggle" :canRelease="canRelease"
|
||||
@split-warehouse="handleSplitWarehouse" @merge-warehouse="handleMergeWarehouse" @release-warehouse="handleReleaseWarehouse"/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -73,6 +74,14 @@ export default {
|
||||
id: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
canToggle: {
|
||||
default: true,
|
||||
type: Boolean
|
||||
},
|
||||
canRelease: {
|
||||
default: false,
|
||||
type: Boolean
|
||||
}
|
||||
},
|
||||
data() {
|
||||
@@ -84,7 +93,7 @@ export default {
|
||||
total: 0,
|
||||
columnCount: 0,
|
||||
columnDetail: {}
|
||||
}
|
||||
},
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
@@ -104,6 +113,10 @@ export default {
|
||||
handleMergeWarehouse(warehouse) {
|
||||
this.$emit('merge-warehouse', warehouse);
|
||||
},
|
||||
|
||||
handleReleaseWarehouse(warehouse) {
|
||||
this.$emit('release-warehouse', warehouse);
|
||||
},
|
||||
/**
|
||||
* 解析第三级库位编码
|
||||
* 新规则：
|
||||
|
||||
@@ -1,367 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<div style="display: flex; align-items: center;">
|
||||
<el-divider content-position="left">第{{ layer }}层库位</el-divider>
|
||||
<el-button type="text" icon="el-icon-refresh-left" size="mini" @click="toggleTranspose">
|
||||
{{ isTransposed ? '恢复行列' : '行列转置' }}
|
||||
</el-button>
|
||||
</div>
|
||||
<div class="grid-wrapper">
|
||||
<div class="grid-scroll-container" ref="scrollContainerRef">
|
||||
<div class="scroll-content" ref="contentRef">
|
||||
<!-- 列标尺（顶部） -->
|
||||
<div class="col-ruler" :style="{ '--cell-width': `${cellWidth}px` }">
|
||||
<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="{
|
||||
'--cell-width': `${cellWidth}px`,
|
||||
'--column-count': transposedLayerData.maxColumn
|
||||
}">
|
||||
<!-- 库位格子 -->
|
||||
<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>
|
||||
|
||||
<!-- 弹窗修复：改回 .sync 绑定，恢复 footer 插槽写法 -->
|
||||
<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>
|
||||
</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,
|
||||
isTransposed: false,
|
||||
containerWidth: 0,
|
||||
resizeTimer: null
|
||||
};
|
||||
},
|
||||
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
|
||||
};
|
||||
},
|
||||
cellWidth() {
|
||||
if (!this.containerWidth || this.transposedLayerData.maxColumn === 0) return 60;
|
||||
// 容器可用宽度 = 滚动容器宽度 - 行标尺宽度(30px)
|
||||
const availableWidth = Math.max(0, this.containerWidth - 30);
|
||||
// 均分宽度，最小60px
|
||||
const averageWidth = availableWidth / this.transposedLayerData.maxColumn;
|
||||
return Math.max(60, averageWidth);
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
isTransposed() {
|
||||
this.calcContainerWidth();
|
||||
},
|
||||
layerData: {
|
||||
deep: true,
|
||||
handler() {
|
||||
console.log('layerData 变化:', this.layerData);
|
||||
this.calcContainerWidth();
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.calcContainerWidth();
|
||||
window.addEventListener('resize', this.handleResize);
|
||||
},
|
||||
beforeUnmount() {
|
||||
window.removeEventListener('resize', this.handleResize);
|
||||
clearTimeout(this.resizeTimer);
|
||||
},
|
||||
methods: {
|
||||
calcContainerWidth() {
|
||||
if (this.$refs.scrollContainerRef) {
|
||||
this.containerWidth = this.$refs.scrollContainerRef.clientWidth;
|
||||
}
|
||||
},
|
||||
handleResize() {
|
||||
clearTimeout(this.resizeTimer);
|
||||
this.resizeTimer = setTimeout(() => {
|
||||
this.calcContainerWidth();
|
||||
}, 100);
|
||||
},
|
||||
toggleTranspose() {
|
||||
this.isTransposed = !this.isTransposed;
|
||||
this.dialogVisible = false;
|
||||
this.currentWarehouse = null;
|
||||
},
|
||||
// 修复点击事件：增加日志便于调试，确保赋值正确
|
||||
handleCellClick(warehouse) {
|
||||
console.log('点击库位：', 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;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
}
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: #c1c1c1 #f1f1f1;
|
||||
}
|
||||
|
||||
.scroll-content {
|
||||
display: inline-block;
|
||||
background: #fff;
|
||||
min-width: 100%;
|
||||
}
|
||||
|
||||
.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: var(--cell-width);
|
||||
min-width: 60px;
|
||||
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: 60px;
|
||||
line-height: 60px;
|
||||
text-align: center;
|
||||
font-weight: 600;
|
||||
color: #606266;
|
||||
border-bottom: 1px solid #dcdfe6;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
|
||||
.grid-container {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
|
||||
// 修复伪元素遮挡点击事件：添加 pointer-events: none
|
||||
&::before {
|
||||
content: '';
|
||||
width: calc(var(--cell-width) * var(--column-count));
|
||||
display: block;
|
||||
height: 0;
|
||||
visibility: hidden;
|
||||
pointer-events: none; // 关键：让伪元素不拦截点击事件
|
||||
}
|
||||
|
||||
.warehouse-cell {
|
||||
width: var(--cell-width);
|
||||
min-width: 60px;
|
||||
height: 60px;
|
||||
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;
|
||||
flex-shrink: 0;
|
||||
position: relative; // 确保层级正常
|
||||
z-index: 1; // 高于伪元素
|
||||
|
||||
&:hover {
|
||||
border-color: #409eff;
|
||||
background: #e8f4ff;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
&.disabled {
|
||||
background: #eeff6f;
|
||||
color: #909399;
|
||||
cursor: not-allowed;
|
||||
&:hover {
|
||||
border-color: #e6e6e6;
|
||||
background: #eeff6f;
|
||||
}
|
||||
}
|
||||
|
||||
.cell-name {
|
||||
font-size: 12px;
|
||||
color: #606266;
|
||||
word-break: break-all;
|
||||
text-align: center;
|
||||
padding: 0 2px;
|
||||
}
|
||||
}
|
||||
|
||||
.empty-cell {
|
||||
background: #fafafa;
|
||||
border-style: solid;
|
||||
border-color: #e6e6e6;
|
||||
pointer-events: none; // 空格子不需要点击事件
|
||||
|
||||
.cell-code {
|
||||
color: #c0c4cc;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -11,7 +11,7 @@
|
||||
<span class="column-number">{{ col }}</span>
|
||||
<!-- 拆分/合并切换按钮 -->
|
||||
<button class="split-merge-toggle"
|
||||
v-if="isComposite && splitColumns.includes(Number(col))"
|
||||
v-if="canToggle && isComposite && splitColumns.includes(Number(col))"
|
||||
: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>
|
||||
@@ -89,6 +89,7 @@
|
||||
<el-tag :type="currentWarehouse.isEnabled === 1 ? 'success' : 'danger'">
|
||||
{{ currentWarehouse.isEnabled === 1 ? '未占用' : currentWarehouse.currentCoilNo }}
|
||||
</el-tag>
|
||||
<el-button v-if="canRelease && currentWarehouse.isEnabled === 0" @click="handleReleaseWarehouse(currentWarehouse)">释放库位</el-button>
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="库位码">
|
||||
<QRCode :content="currentWarehouse.actualWarehouseId" :size="60" />
|
||||
@@ -116,6 +117,14 @@ export default {
|
||||
id: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
canToggle: {
|
||||
default: true,
|
||||
type: Boolean
|
||||
},
|
||||
canRelease: {
|
||||
default: false,
|
||||
type: Boolean
|
||||
}
|
||||
},
|
||||
data() {
|
||||
@@ -277,6 +286,25 @@ export default {
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleReleaseWarehouse(warehouse) {
|
||||
if (!this.canRelease) {
|
||||
this.$message.error('当前库位不支持释放操作');
|
||||
return;
|
||||
}
|
||||
this.$modal.confirm(`确认释放库位 ${warehouse.actualWarehouseCode}？` ,{
|
||||
title: '确认释放库位',
|
||||
message: `确认释放库位 ${warehouse.actualWarehouseCode}？`,
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
// 向父组件发送释放事件，由父组件更新columns数据
|
||||
this.dialogOpen = false;
|
||||
this.$emit('release-warehouse', warehouse);
|
||||
}).catch(() => {
|
||||
// 用户取消操作
|
||||
});
|
||||
},
|
||||
// 4. 同步滚动方法（确保列标尺和网格滚动位置一致）
|
||||
syncScroll(e) {
|
||||
const target = e.target;
|
||||
|
||||
538
klp-ui/src/views/wms/warehouse/release.vue
Normal file
538
klp-ui/src/views/wms/warehouse/release.vue
Normal file
@@ -0,0 +1,538 @@
|
||||
<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">
|
||||
<!-- 导出所有二维码 -->
|
||||
<!-- <button buttonLoading type="primary" @click="exportAllQrcodes">导出二维码</button> -->
|
||||
<WarehouseBird
|
||||
:id="selectedNodeId"
|
||||
:warehouse-list="warehouseList"
|
||||
@open-init-dialog="openInitDialog"
|
||||
@release-warehouse="handleReleaseWarehouse"
|
||||
:can-release="true"
|
||||
:can-toggle="false"
|
||||
/>
|
||||
</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 40" :key="`grid-row-${row}`" class="grid-selector-row">
|
||||
<div v-for="col in 30" :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="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, splitActualWarehouse, mergeActualWarehouse, forceReleaseLocation } from "@/api/wms/actualWarehouse";
|
||||
import WarehouseBird from './components/WarehouseBird.vue';
|
||||
import jsPDF from 'jspdf';
|
||||
import QRCode from 'qrcode';
|
||||
|
||||
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,
|
||||
buttonLoading: false,
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.getWarehouseTree();
|
||||
},
|
||||
beforeDestroy() {
|
||||
if (this.nodeClickTimer) clearTimeout(this.nodeClickTimer);
|
||||
},
|
||||
methods: {
|
||||
handleReleaseWarehouse(warehouse) {
|
||||
this.rightLoading = true;
|
||||
forceReleaseLocation(warehouse.actualWarehouseId).then(res => {
|
||||
this.$message.success(`成功释放库位`);
|
||||
this.getWarehouseList(this.selectedNodeId)
|
||||
}).catch(err => {
|
||||
this.$message.error(`释放库位失败`);
|
||||
}).finally(() => {
|
||||
this.rightLoading = false;
|
||||
})
|
||||
},
|
||||
/**
|
||||
* 处理分割库位事件
|
||||
*/
|
||||
handleSplitWarehouse(payload) {
|
||||
// this.$message.success(`成功分割库位：${warehouse.actualWarehouseCode}`);
|
||||
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;
|
||||
treeActualWarehouseTwoLevel()
|
||||
.then((res) => { this.warehouseTree = res.data || []; })
|
||||
.catch((err) => { this.$message.error("获取仓库树形数据失败：" + err.message); })
|
||||
.finally(() => { this.treeLoading = false; });
|
||||
},
|
||||
|
||||
async exportAllQrcodes() {
|
||||
this.buttonLoading = true;
|
||||
if (!this.warehouseList || this.warehouseList.length === 0) {
|
||||
this.$message.warning('暂无库位数据可导出');
|
||||
return;
|
||||
}
|
||||
|
||||
const loadingInstance = this.$loading({
|
||||
lock: true,
|
||||
text: '正在生成二维码PDF，请稍候...',
|
||||
spinner: 'el-icon-loading',
|
||||
background: 'rgba(0, 0, 0, 0.7)'
|
||||
});
|
||||
|
||||
try {
|
||||
// 初始化PDF (A4纸尺寸: 210mm × 297mm，换算成px约595 × 842)
|
||||
const pdf = new jsPDF({
|
||||
orientation: 'portrait', // 纵向
|
||||
unit: 'mm', // 单位：毫米
|
||||
format: 'a4' // A4格式
|
||||
});
|
||||
|
||||
// 配置项
|
||||
const qrCodeSize = 30; // 二维码尺寸(mm)
|
||||
const margin = 10; // 页面边距(mm)
|
||||
const gap = 10; // 二维码间距(mm)
|
||||
const textOffset = 5; // 文字与二维码间距(mm)
|
||||
const maxPerRow = Math.floor((210 - 2 * margin) / (qrCodeSize + gap)); // 每行最多二维码数
|
||||
const maxPerPage = Math.floor((297 - 2 * margin) / (qrCodeSize + gap + textOffset + 5)) * maxPerRow; // 每页最多二维码数
|
||||
|
||||
let currentX = margin; // 当前X坐标
|
||||
let currentY = margin; // 当前Y坐标
|
||||
let currentIndex = 0; // 当前处理的库位索引
|
||||
const list = this.warehouseList.filter(item => item.actualWarehouseCode.includes('X'));
|
||||
const totalCount = list.length;
|
||||
|
||||
// 遍历所有库位生成二维码并添加到PDF
|
||||
for (const [index, item] of list.entries()) {
|
||||
currentIndex = index;
|
||||
|
||||
// 跳过无ID的项
|
||||
if (!item.actualWarehouseId) continue;
|
||||
|
||||
// 生成二维码 (返回base64格式)
|
||||
const qrCodeDataUrl = await QRCode.toDataURL(item.actualWarehouseId, {
|
||||
width: qrCodeSize * 3.78, // 转换mm到px (1mm ≈ 3.78px)
|
||||
margin: 1,
|
||||
errorCorrectionLevel: 'H' // 高容错率
|
||||
});
|
||||
|
||||
// 检查是否需要换行
|
||||
if (currentX + qrCodeSize > 210 - margin) {
|
||||
currentX = margin;
|
||||
currentY += qrCodeSize + gap + textOffset + 5;
|
||||
}
|
||||
|
||||
// 检查是否需要分页
|
||||
if (currentY + qrCodeSize > 297 - margin || (index > 0 && index % maxPerPage === 0)) {
|
||||
pdf.addPage();
|
||||
currentX = margin;
|
||||
currentY = margin;
|
||||
}
|
||||
|
||||
// 添加二维码到PDF
|
||||
pdf.addImage(qrCodeDataUrl, 'PNG', currentX, currentY, qrCodeSize, qrCodeSize);
|
||||
|
||||
// 添加库位名称（自动换行处理）
|
||||
const name = item.actualWarehouseName || '未知库位';
|
||||
const fontSize = 8; // 字体大小
|
||||
pdf.setFontSize(fontSize);
|
||||
// 计算文字宽度，超出则截断
|
||||
const textWidth = pdf.getTextWidth(name);
|
||||
let displayName = name;
|
||||
if (textWidth > qrCodeSize) {
|
||||
const maxTextWidth = qrCodeSize;
|
||||
let tempText = '';
|
||||
for (let i = 0; i < name.length; i++) {
|
||||
if (pdf.getTextWidth(tempText + name[i]) > maxTextWidth) {
|
||||
displayName = tempText + '...';
|
||||
break;
|
||||
}
|
||||
tempText += name[i];
|
||||
}
|
||||
}
|
||||
// 文字居中显示在二维码下方
|
||||
const textX = currentX + (qrCodeSize - pdf.getTextWidth(displayName)) / 2;
|
||||
pdf.text(displayName, textX, currentY + qrCodeSize + textOffset);
|
||||
|
||||
// 更新X坐标
|
||||
currentX += qrCodeSize + gap;
|
||||
}
|
||||
|
||||
// 保存PDF
|
||||
const fileName = `库位二维码_${this.selectedNode.actualWarehouseName}.pdf`;
|
||||
pdf.save(fileName);
|
||||
|
||||
this.$message.success(`成功导出 ${totalCount} 个库位二维码`);
|
||||
} catch (error) {
|
||||
console.error('二维码导出失败:', error);
|
||||
this.$message.error(`二维码导出失败：${error.message}`);
|
||||
} finally {
|
||||
this.buttonLoading = false;
|
||||
loadingInstance.close();
|
||||
}
|
||||
},
|
||||
|
||||
// 树节点点击
|
||||
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) {
|
||||
this.rightLoading = true;
|
||||
return listActualWarehouse({ parentId })
|
||||
.then((res) => { this.warehouseList = res.data || []; })
|
||||
.catch((err) => {
|
||||
this.$message.error("获取库位数据失败：" + err.message);
|
||||
this.warehouseList = [];
|
||||
}).finally(() => {
|
||||
this.rightLoading = false;
|
||||
});
|
||||
},
|
||||
|
||||
// 打开初始化弹窗
|
||||
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: '',
|
||||
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: 160px;
|
||||
height: 100%;
|
||||
background: #fff;
|
||||
border-radius: 8px;
|
||||
padding: 16px;
|
||||
box-sizing: border-box;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.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;
|
||||
|
||||
.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user