对于出库选单和Bom库的逻辑完善以及功能美化

This commit is contained in:
dxc
2026-02-12 16:54:26 +08:00
parent d61668bc4b
commit b682d4b02f
5 changed files with 402 additions and 477 deletions

View File

@ -29,6 +29,7 @@
center
show-icon
style="margin-bottom: 20px"
:closable="false"
/>
<el-table
@ -49,6 +50,12 @@
<el-table-column prop="name" label="名称" min-width="150" show-overflow-tooltip />
<el-table-column prop="standard" label="规格型号" min-width="150" show-overflow-tooltip />
<el-table-column prop="warehouse_location" label="库位" width="150" show-overflow-tooltip>
<template #default="{ row }">
<span style="color: #409EFF; font-weight: bold;">{{ row.warehouse_location || '-' }}</span>
</template>
</el-table-column>
<el-table-column prop="available_quantity" label="当前库存" width="120" align="right">
<template #default="{ row }">
<span style="color: green; font-weight: bold;">{{ row.available_quantity }}</span>
@ -63,6 +70,8 @@
:max="row.available_quantity"
size="small"
style="width: 100%"
controls-position="right"
@change="(val) => handleMainQuantityChange(val, row)"
/>
</template>
</el-table-column>
@ -74,13 +83,13 @@
</el-table-column>
</el-table>
<div v-if="selectedItems.length > 0" style="margin-top: 15px; text-align: right; color: #606266;">
<div v-if="selectedItems.length > 0" style="margin-top: 15px; text-align: right; color: #606266; font-size: 14px;">
<span style="color: red; font-weight: bold;">{{ selectedItems.length }}</span> 种物品
合计出库 <span style="color: red; font-weight: bold;">{{ totalExportCount }}</span>
</div>
</el-card>
<el-dialog v-model="manualDialogVisible" title="选择库存物品" width="85%" top="5vh" destroy-on-close>
<el-dialog v-model="manualDialogVisible" title="选择库存物品" width="85%" top="5vh" destroy-on-close :close-on-click-modal="false">
<div class="filter-container">
<el-input
v-model="searchKeyword"
@ -91,15 +100,18 @@
@input="filterStock"
/>
<span style="margin-left: 15px; color: #909399; font-size: 12px;">
提示勾选物品后可直接在表格中修改本次出库数量
提示点击表格行可勾选<span style="color: #F56C6C; font-weight: bold;">修改数量会自动勾选</span>
</span>
</div>
<el-table
ref="manualTableRef"
:data="filteredStockData"
height="500"
border
row-key="uniqueKey"
@selection-change="handleStockSelection"
@row-click="handleRowClick"
style="cursor: pointer"
>
<el-table-column type="selection" width="55" align="center" :reserve-selection="true" />
<el-table-column label="类型" width="90" align="center">
@ -109,18 +121,20 @@
</el-table-column>
<el-table-column prop="name" label="名称" show-overflow-tooltip />
<el-table-column prop="standard" label="规格" show-overflow-tooltip />
<el-table-column prop="warehouse_location" label="库位" width="120" show-overflow-tooltip />
<el-table-column prop="available_quantity" label="可用库存" width="100" align="right" />
<el-table-column label="本次出库" width="160" align="center" fixed="right">
<template #default="{ row }">
<el-input-number
v-model="row.export_quantity"
:min="1"
:min="0"
:max="row.available_quantity"
size="small"
style="width: 100%"
placeholder="数量"
placeholder="0"
@click.stop
@change="(val) => handleManualQuantityChange(val, row)"
/>
</template>
</el-table-column>
@ -134,13 +148,13 @@
</template>
</el-dialog>
<el-dialog v-model="bomSelectVisible" title="按 BOM 套餐添加" width="600px">
<el-dialog v-model="bomSelectVisible" title="按 BOM 套餐添加" width="600px" destroy-on-close :close-on-click-modal="false">
<el-form label-width="100px">
<el-form-item label="选择产品">
<el-select v-model="selectedBomNo" filterable placeholder="请选择产品BOM配方" style="width: 100%">
<el-select v-model="selectedBomNo" filterable placeholder="请选择启用状态的 BOM 配方" style="width: 100%">
<el-option
v-for="b in bomOptions"
:key="b.bom_no"
:key="`${b.bom_no}_${b.version}`"
:label="`${b.parent_name} - ${b.version}`"
:value="b.bom_no"
/>
@ -174,6 +188,7 @@
<el-table-column prop="typeLabel" label="类型" width="80" />
<el-table-column prop="name" label="名称" />
<el-table-column prop="standard" label="规格" />
<el-table-column prop="warehouse_location" label="库位" width="100" />
<el-table-column prop="export_quantity" label="本次出库" width="120" align="center">
<template #default="{ row }">
<span style="font-weight: bold; color: #F56C6C; font-size: 16px;">{{ row.export_quantity }}</span>
@ -205,7 +220,6 @@
<h1>IRIS出库拣货确认单</h1>
<div class="print-meta-row">
<span>打印时间: {{ currentTime }}</span>
<span>单据编号: {{ currentOrderNo }}</span>
</div>
<div class="header-line"></div>
</div>
@ -213,11 +227,12 @@
<table class="print-table">
<thead>
<tr>
<th style="width: 60px;">序号</th>
<th style="width: 50px;">序号</th>
<th>物料名称</th>
<th>规格型号</th>
<th style="width: 60px;"></th>
<th style="width: 100px;">出库数量</th>
<th style="width: 80px;"></th>
<th style="width: 50px;">单位</th>
<th style="width: 90px;">出库数量</th>
<th style="width: 60px;">备注</th>
</tr>
</thead>
@ -226,17 +241,18 @@
<td style="text-align: center;">{{ index + 1 }}</td>
<td class="cell-padding">{{ item.name }}</td>
<td class="cell-padding">{{ item.standard }}</td>
<td style="text-align: center;">{{ item.warehouse_location || '-' }}</td>
<td style="text-align: center;"></td>
<td style="text-align: center; font-weight: bold; font-size: 16px;">{{ item.export_quantity }}</td>
<td></td>
</tr>
<tr v-if="validSelectedItems.length === 0">
<td colspan="6" style="text-align: center; padding: 20px;">无数据</td>
<td colspan="7" style="text-align: center; padding: 20px;">无数据</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="4" style="text-align: right; font-weight: bold; padding-right: 15px;">合计:</td>
<td colspan="5" style="text-align: right; font-weight: bold; padding-right: 15px;">合计:</td>
<td style="text-align: center; font-weight: bold; font-size: 18px;">{{ totalExportCount }}</td>
<td></td>
</tr>
@ -264,26 +280,25 @@
<script setup lang="ts">
import { ref, computed } from 'vue'
import { Printer, Search, Plus, Download, List } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
import { ElMessage, ElTable, ElMessageBox } from 'element-plus'
import { getAllStock, printSelectionList } from '@/api/inbound/stock'
import { getBomList, getBomDetail } from '@/api/bom'
// --- 状态变量 ---
// 核心:购物车数据
const selectedItems = ref<any[]>([])
// 弹窗与加载状态
const manualDialogVisible = ref(false)
const bomSelectVisible = ref(false)
const previewVisible = ref(false)
const exportLoading = ref(false)
const printLoading = ref(false)
// 数据缓存
const allStockData = ref<any[]>([])
const filteredStockData = ref<any[]>([])
const searchKeyword = ref('')
const tempSelection = ref<any[]>([]) // 手动添加时的临时勾选
const tempSelection = ref<any[]>([])
// 表格引用
const manualTableRef = ref<InstanceType<typeof ElTable>>()
// BOM 相关
const bomOptions = ref<any[]>([])
@ -292,11 +307,8 @@ const bomSets = ref(1)
// 打印相关
const currentTime = ref('')
const currentOrderNo = ref('')
// --- 计算属性 ---
// 有效的出库项 (数量 > 0)
const validSelectedItems = computed(() => {
return selectedItems.value.filter(item => item.export_quantity > 0)
})
@ -306,7 +318,6 @@ const totalExportCount = computed(() => {
})
// --- 辅助方法 ---
const getTypeTag = (type: string) => {
switch (type) {
case 'material': return 'info'
@ -316,14 +327,7 @@ const getTypeTag = (type: string) => {
}
}
const generateOrderNo = () => {
const now = new Date();
const dateStr = now.getFullYear() + (now.getMonth()+1).toString().padStart(2,'0') + now.getDate().toString().padStart(2,'0');
const random = Math.floor(Math.random()*1000).toString().padStart(3, '0');
return 'OUT' + dateStr + '-' + random;
}
// --- 核心逻辑 1手动添加库存 (支持弹窗内修改数量) ---
// --- 核心逻辑 1手动添加库存 ---
const openManualSelect = async () => {
manualDialogVisible.value = true
@ -331,24 +335,21 @@ const openManualSelect = async () => {
if (allStockData.value.length === 0) {
try {
const res: any = await getAllStock()
// 1. 分类处理并打上标记
const rawMaterials = (res.materials || []).map((i: any) => ({ ...i, type: 'material', typeLabel: '采购件' }))
const rawSemis = (res.semis || []).map((i: any) => ({ ...i, type: 'semi', typeLabel: '半成品' }))
const rawProducts = (res.products || []).map((i: any) => ({ ...i, type: 'product', typeLabel: '成品' }))
// 2. 合并
const list = [...rawMaterials, ...rawSemis, ...rawProducts]
// 3. 规范化并生成 UniqueKey
allStockData.value = list.map((i: any) => ({
...i,
name: i.name || i.material_name || i.product_name || '未知名称',
standard: i.standard || i.spec_model || '',
// ★ 确保 Key 唯一格式类型_ID
// ★ 确保读取库位字段,如果没有则为空
warehouse_location: i.warehouse_location || (i.warehouse_loc) || '',
uniqueKey: `${i.type}_${i.id}`,
available_quantity: parseFloat(i.available_quantity) || 0,
export_quantity: 1 // ★ 默认初始化为1方便用户在弹窗里看到并修改
export_quantity: 0
}))
filteredStockData.value = allStockData.value
@ -356,9 +357,8 @@ const openManualSelect = async () => {
ElMessage.error('加载库存数据失败')
}
} else {
// 每次打开时重置筛选并将所有项的“本次出库”重置为1或保留上次视需求而定这里重置为1以防混淆
searchKeyword.value = ''
allStockData.value.forEach(item => item.export_quantity = 1)
allStockData.value.forEach(item => item.export_quantity = 0)
filteredStockData.value = allStockData.value
}
}
@ -375,16 +375,28 @@ const filterStock = () => {
)
}
const handleStockSelection = (val: any[]) => {
tempSelection.value = val
const handleStockSelection = (val: any[]) => { tempSelection.value = val }
// 点击行任意位置切换勾选
const handleRowClick = (row: any) => {
if (manualTableRef.value) {
manualTableRef.value.toggleRowSelection(row, undefined)
}
}
// 弹窗内:当数量变化时,自动联动勾选状态
const handleManualQuantityChange = (val: number | undefined, row: any) => {
if (!manualTableRef.value) return
if (val && val > 0) {
manualTableRef.value.toggleRowSelection(row, true)
} else {
manualTableRef.value.toggleRowSelection(row, false)
}
}
const confirmManualAdd = () => {
if (tempSelection.value.length === 0) {
return ElMessage.warning('请先勾选需要添加的物品')
}
if (tempSelection.value.length === 0) return ElMessage.warning('请先勾选需要添加的物品')
// 1. 过滤已存在的 (避免重复)
const newItems = tempSelection.value.filter(item =>
!selectedItems.value.find(existing => existing.uniqueKey === item.uniqueKey)
)
@ -394,29 +406,50 @@ const confirmManualAdd = () => {
return ElMessage.warning('选中的物品已全部在清单中')
}
// 2. 深拷贝加入购物车 (防止引用关联)
const itemsToAdd = newItems.map(item => {
const copy = JSON.parse(JSON.stringify(item))
// ★ 关键修改:直接使用用户在弹窗里输入的 export_quantity
// 如果用户把输入框清空了(undefined)则默认为1
copy.export_quantity = (item.export_quantity && item.export_quantity > 0) ? item.export_quantity : 1
copy.export_quantity = item.export_quantity || 0
return copy
})
selectedItems.value.push(...itemsToAdd)
manualDialogVisible.value = false
tempSelection.value = [] // 清空临时勾选
tempSelection.value = []
ElMessage.success(`成功添加 ${itemsToAdd.length} 项物品`)
}
// 主界面数量变更逻辑 (降为0时弹窗移除)
const handleMainQuantityChange = (val: number | undefined, row: any) => {
if (val === 0) {
ElMessageBox.confirm(
`物品【${row.name}】数量为0确定要从清单中移除吗`,
'移除确认',
{
confirmButtonText: '移除',
cancelButtonText: '保留 (恢复为1)',
type: 'warning',
}
)
.then(() => {
const index = selectedItems.value.findIndex(item => item.uniqueKey === row.uniqueKey)
if (index > -1) {
selectedItems.value.splice(index, 1)
ElMessage.success('已移除')
}
})
.catch(() => {
row.export_quantity = 1
})
}
}
// --- 核心逻辑 2按 BOM 添加 ---
const openBomSelect = async () => {
bomSelectVisible.value = true
// 每次打开 BOM 弹窗重置套数为 1
bomSets.value = 1
try {
const res = await getBomList()
const res = await getBomList({ active_only: true })
bomOptions.value = res.data || []
} catch (e) {
ElMessage.error('加载 BOM 列表失败')
@ -426,24 +459,19 @@ const openBomSelect = async () => {
const confirmBomAdd = async () => {
if(!selectedBomNo.value) return ElMessage.warning('请选择 BOM');
// 确保库存数据已加载,用于匹配
if (allStockData.value.length === 0) {
await openManualSelect()
manualDialogVisible.value = false // 仅加载数据,不显示弹窗
manualDialogVisible.value = false
}
try {
const detailRes = await getBomDetail(selectedBomNo.value)
const bomRows = detailRes.data || []
const bomRows = detailRes.data?.children || []
let addedCount = 0;
// 遍历 BOM 子件
bomRows.forEach((bomItem: any) => {
// ★ 这里本身就是“选择数量”的逻辑:用量 * 套数
const needQty = (parseFloat(bomItem.dosage) || 0) * bomSets.value
// 简单匹配逻辑:匹配 base_id (最准确)
// ★ BOM 添加时,匹配本地库存数据,带入库位信息
const stockCandidate = allStockData.value.find(s =>
(s.base_id && s.base_id == bomItem.child_id)
)
@ -451,10 +479,13 @@ const confirmBomAdd = async () => {
if (stockCandidate) {
const existing = selectedItems.value.find(e => e.uniqueKey === stockCandidate.uniqueKey)
if (existing) {
// 如果已存在,累加数量
existing.export_quantity += needQty
} else {
const newItem = JSON.parse(JSON.stringify(stockCandidate))
// 如果后端 BomService 也返回了 warehouse_location (聚合的),这里优先使用
if (bomItem.warehouse_location) {
newItem.warehouse_location = bomItem.warehouse_location
}
newItem.export_quantity = needQty
selectedItems.value.push(newItem)
}
@ -486,19 +517,16 @@ const handlePreview = () => {
}
const now = new Date();
currentTime.value = `${now.getFullYear()}-${now.getMonth()+1}-${now.getDate()} ${now.getHours()}:${now.getMinutes()}`;
currentOrderNo.value = generateOrderNo();
previewVisible.value = true
}
const confirmPrint = async () => {
previewVisible.value = false;
// 记录日志
try {
const payload = validSelectedItems.value.map(item => ({
name: item.name, standard: item.standard, quantity: item.export_quantity
}));
// 不阻塞打印
printSelectionList(JSON.parse(JSON.stringify(payload))).catch(() => {});
} catch (e) {}
@ -512,19 +540,18 @@ const confirmExport = () => {
exportLoading.value = true;
try {
let csvContent = "\uFEFF";
csvContent += "类型,名称,规格型号,本次出库数量\n";
csvContent += "类型,名称,规格型号,库位,本次出库数量\n";
validSelectedItems.value.forEach(item => {
const safeName = (item.name || '').replace(/,/g, ' ');
const safeStd = (item.standard || '').replace(/,/g, ' ');
csvContent += `${item.typeLabel},${safeName},${safeStd},${item.export_quantity}\n`;
const safeLoc = (item.warehouse_location || '').replace(/,/g, ' ');
csvContent += `${item.typeLabel},${safeName},${safeStd},${safeLoc},${item.export_quantity}\n`;
});
const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' });
const link = document.createElement("a");
link.href = URL.createObjectURL(blob);
const timestamp = new Date().toISOString().slice(0,19).replace(/[-T:]/g, "");
link.download = `出库单_${timestamp}.csv`;
link.download = `出库拣货单_${timestamp}.csv`;
link.click();
ElMessage.success('导出成功');
previewVisible.value = false;
@ -547,69 +574,27 @@ const confirmExport = () => {
::v-deep(.el-card__body) { flex: 1; display: flex; flex-direction: column; overflow: hidden; }
/* ================= ★★★ 打印专用样式 ★★★ ================= */
/* 1. 默认状态:屏幕上隐藏打印区域 */
#print-area { display: none; }
/* 2. 打印状态:隐藏所有非打印内容,独显 #print-area */
@media print {
@page { margin: 0; size: auto; }
body * { visibility: hidden; }
.el-dialog__wrapper, .v-modal, .el-message, .no-print-content { display: none !important; }
#print-area, #print-area * { visibility: visible; }
#print-area {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
margin: 0;
padding: 20mm;
background-color: white;
display: block !important;
z-index: 99999;
position: fixed; left: 0; top: 0; width: 100%; height: 100%;
margin: 0; padding: 20mm; background-color: white;
display: block !important; z-index: 99999;
}
.print-header { text-align: center; margin-bottom: 20px; }
.print-header h1 { font-size: 24px; margin: 0 0 10px 0; font-weight: bold; color: #000; }
.print-meta-row { display: flex; justify-content: space-between; font-size: 12px; margin-bottom: 5px; }
.print-meta-row { display: flex; justify-content: flex-start; font-size: 12px; margin-bottom: 5px; }
.header-line { border-bottom: 2px solid #000; margin-top: 5px; }
.print-table {
width: 100%;
border-collapse: collapse;
margin-bottom: 40px;
border: 1px solid #000;
}
.print-table th, .print-table td {
border: 1px solid #000;
padding: 12px 8px;
text-align: left;
font-size: 14px;
color: #000;
}
.print-table { width: 100%; border-collapse: collapse; margin-bottom: 40px; border: 1px solid #000; }
.print-table th, .print-table td { border: 1px solid #000; padding: 12px 8px; text-align: left; font-size: 14px; color: #000; }
.print-table th { text-align: center; font-weight: bold; }
.cell-padding { padding-left: 10px; }
.print-footer {
display: flex;
justify-content: space-between;
margin-top: 60px;
padding: 0 20px;
}
.signature-item {
display: flex;
flex-direction: column;
align-items: center;
width: 30%;
}
.print-footer { display: flex; justify-content: space-between; margin-top: 60px; padding: 0 20px; }
.signature-item { display: flex; flex-direction: column; align-items: center; width: 30%; }
.sig-label { font-size: 14px; margin-bottom: 40px; text-align: left; width: 100%; }
.sig-line { border-bottom: 1px solid #000; width: 100%; height: 1px; display: block; }
}