修改出库选单页面以及打印内容
This commit is contained in:
@ -1,14 +1,14 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<el-card shadow="always">
|
||||
<el-card shadow="always" class="no-print-content">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<div class="header-left">
|
||||
<span class="title">出库拣货选单</span>
|
||||
<span class="subtitle">(打印目标: 192.168.9.205)</span>
|
||||
<span class="subtitle">(A4 打印模式)</span>
|
||||
</div>
|
||||
<div>
|
||||
<el-button type="success" :icon="Printer" :disabled="selectedItems.length === 0" @click="handlePreview">
|
||||
<el-button type="success" :icon="Printer" :disabled="!canSubmit" @click="handlePreview">
|
||||
生成并预览出库单
|
||||
</el-button>
|
||||
</div>
|
||||
@ -51,8 +51,8 @@
|
||||
</el-table>
|
||||
|
||||
<el-alert
|
||||
v-if="selectedItems.length > 0"
|
||||
:title="`当前已选中 ${selectedItems.length} 项物品`"
|
||||
v-if="selectionCount > 0"
|
||||
:title="`当前已勾选 ${selectionCount} 种物品，请在表格右侧填写【本次出库数】`"
|
||||
type="success"
|
||||
show-icon
|
||||
style="margin-bottom: 15px"
|
||||
@ -60,83 +60,173 @@
|
||||
/>
|
||||
|
||||
<div class="table-wrapper">
|
||||
<el-table
|
||||
v-loading="loading"
|
||||
:data="filteredTableData"
|
||||
<el-table
|
||||
v-loading="loading"
|
||||
:data="filteredTableData"
|
||||
style="width: 100%"
|
||||
@selection-change="handleSelectionChange"
|
||||
row-key="uniqueKey"
|
||||
border
|
||||
height="100%"
|
||||
>
|
||||
<el-table-column type="selection" width="55" align="center" />
|
||||
|
||||
<el-table-column label="类型" width="100" align="center">
|
||||
<template #default="{ row }">
|
||||
<el-tag :type="getTypeTag(row.type)">{{ row.typeLabel }}</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column prop="name" label="名称" min-width="150" show-overflow-tooltip>
|
||||
<template #default="{ row }">
|
||||
<span v-html="highlightKeyword(row.name)"></span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column prop="standard" label="规格型号" min-width="150" show-overflow-tooltip>
|
||||
<template #default="{ row }">
|
||||
<span v-html="highlightKeyword(row.standard)"></span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column prop="stock_quantity" label="库存总数" width="120" align="right">
|
||||
<template #default="{ row }">
|
||||
<span style="font-weight: bold; font-size: 14px; color: #909399;">{{ row.stock_quantity }}</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; font-size: 14px;">{{ row.available_quantity }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column label="本次出库数" width="160" align="center" fixed="right">
|
||||
<template #default="{ row }">
|
||||
<el-input-number
|
||||
v-model="row.export_quantity"
|
||||
:min="0"
|
||||
:max="row.available_quantity"
|
||||
size="small"
|
||||
style="width: 100%"
|
||||
@selection-change="handleSelectionChange"
|
||||
row-key="uuid"
|
||||
border
|
||||
height="100%"
|
||||
>
|
||||
<el-table-column type="selection" width="55" align="center" />
|
||||
|
||||
<el-table-column label="类型" width="100" align="center">
|
||||
<template #default="{ row }">
|
||||
<el-tag :type="getTypeTag(row.type)">{{ row.typeLabel }}</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column prop="name" label="名称" min-width="150" show-overflow-tooltip>
|
||||
<template #default="{ row }">
|
||||
<span v-html="highlightKeyword(row.name)"></span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column prop="standard" label="规格型号" min-width="150" show-overflow-tooltip>
|
||||
<template #default="{ row }">
|
||||
<span v-html="highlightKeyword(row.standard)"></span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column prop="batch_no" label="批号" width="120" />
|
||||
<el-table-column prop="uuid" label="条码UUID" width="280" show-overflow-tooltip />
|
||||
<el-table-column prop="create_time" label="入库时间" width="170" />
|
||||
</el-table>
|
||||
controls-position="right"
|
||||
placeholder="0"
|
||||
/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
</el-card>
|
||||
|
||||
<el-dialog
|
||||
v-model="previewVisible"
|
||||
title="出库单打印预览"
|
||||
title="出库单核对与打印"
|
||||
width="800px"
|
||||
destroy-on-close
|
||||
class="no-print-content"
|
||||
>
|
||||
<div class="print-preview-content">
|
||||
<el-alert title="请核对以下清单，确认无误后点击下方【确认打印】按钮" type="warning" :closable="false" style="margin-bottom: 10px;" />
|
||||
<el-alert title="请核对以下清单，确认无误后点击【确认打印】" type="info" :closable="false" style="margin-bottom: 10px;" />
|
||||
|
||||
<el-table :data="selectedItems" border size="small" style="width: 100%">
|
||||
<el-table :data="validSelectedItems" border size="small" style="width: 100%">
|
||||
<el-table-column type="index" label="序号" width="60" align="center" />
|
||||
<el-table-column prop="typeLabel" label="类型" width="80" />
|
||||
<el-table-column prop="name" label="名称" />
|
||||
<el-table-column prop="standard" label="规格" />
|
||||
<el-table-column prop="batch_no" label="批号" width="100" />
|
||||
<el-table-column prop="uuid" label="条码UUID" show-overflow-tooltip />
|
||||
<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>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<div class="summary-info" style="margin-top: 20px; text-align: right; font-weight: bold;">
|
||||
总计出库数量: <span style="color: red; font-size: 18px;">{{ selectedItems.length }}</span> 件
|
||||
总计出库: <span style="color: red; font-size: 18px;">{{ totalExportCount }}</span> 件
|
||||
</div>
|
||||
</div>
|
||||
<template #footer>
|
||||
<span class="dialog-footer">
|
||||
<el-button @click="previewVisible = false">取消</el-button>
|
||||
<el-button type="primary" :loading="printLoading" @click="confirmPrint">
|
||||
确认打印
|
||||
|
||||
<el-button type="warning" :icon="Download" :loading="exportLoading" @click="confirmExport">
|
||||
导出 Excel
|
||||
</el-button>
|
||||
|
||||
<el-button type="primary" :icon="Printer" :loading="printLoading" @click="confirmPrint">
|
||||
确认打印 (A4)
|
||||
</el-button>
|
||||
</span>
|
||||
</template>
|
||||
</el-dialog>
|
||||
|
||||
<!-- BOM 编辑弹窗 -->
|
||||
<el-dialog v-model="bomDialogVisible" title="创建/编辑 BOM" width="800px">
|
||||
<div id="print-area">
|
||||
<div class="print-header">
|
||||
<h1>IRIS出库拣货确认单</h1>
|
||||
<div class="print-meta-row">
|
||||
<span>打印时间: {{ currentTime }}</span>
|
||||
<span>单据编号: {{ generateOrderNo() }}</span>
|
||||
</div>
|
||||
<div class="header-line"></div>
|
||||
</div>
|
||||
|
||||
<table class="print-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th style="width: 60px;">序号</th>
|
||||
<th>物料名称</th>
|
||||
<th>规格型号</th>
|
||||
<th style="width: 60px;">单位</th>
|
||||
<th style="width: 100px;">出库数量</th>
|
||||
<th style="width: 60px;">备注</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="(item, index) in validSelectedItems" :key="index">
|
||||
<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;">件</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>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<td colspan="4" 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>
|
||||
</tfoot>
|
||||
</table>
|
||||
|
||||
<div class="print-footer">
|
||||
<div class="signature-item">
|
||||
<span class="sig-label">库管员签字:</span>
|
||||
<span class="sig-line"></span>
|
||||
</div>
|
||||
<div class="signature-item">
|
||||
<span class="sig-label">领料人签字:</span>
|
||||
<span class="sig-line"></span>
|
||||
</div>
|
||||
<div class="signature-item">
|
||||
<span class="sig-label">日期:</span>
|
||||
<span class="sig-line"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<el-dialog v-model="bomDialogVisible" title="创建/编辑 BOM" width="800px" class="no-print-content">
|
||||
<el-form :model="bomForm" label-width="120px">
|
||||
<el-form-item label="父件 (成品)">
|
||||
<el-select v-model="bomForm.parent_id" placeholder="请选择" filterable style="width:100%">
|
||||
<el-option
|
||||
v-for="item in materialBaseOptions"
|
||||
:key="item.id"
|
||||
:label="item.name"
|
||||
:value="item.id"
|
||||
v-for="item in materialBaseOptions"
|
||||
:key="item.id"
|
||||
:label="item.name"
|
||||
:value="item.id"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
@ -146,10 +236,10 @@
|
||||
<template #default="{ row, $index }">
|
||||
<el-select v-model="row.child_id" placeholder="请选择" filterable style="width:100%">
|
||||
<el-option
|
||||
v-for="item in materialBaseOptions"
|
||||
:key="item.id"
|
||||
:label="item.name"
|
||||
:value="item.id"
|
||||
v-for="item in materialBaseOptions"
|
||||
:key="item.id"
|
||||
:label="item.name"
|
||||
:value="item.id"
|
||||
/>
|
||||
</el-select>
|
||||
</template>
|
||||
@ -182,46 +272,46 @@
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, computed, onMounted } from 'vue'
|
||||
import { Printer, Search, Plus } from '@element-plus/icons-vue'
|
||||
import { Printer, Search, Plus, Download } from '@element-plus/icons-vue'
|
||||
import { getAllStock, printSelectionList, getMaterialBaseList, saveBom as saveBomApi, getBomParents, getBom } from '@/api/inbound/stock'
|
||||
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||
import { ElMessage } from 'element-plus'
|
||||
|
||||
// --- 类型定义 ---
|
||||
interface BaseStockItem {
|
||||
interface StandardStockItem {
|
||||
id: number | string;
|
||||
name: string;
|
||||
type: 'material' | 'semi' | 'product';
|
||||
typeLabel: string;
|
||||
standard: string;
|
||||
batch_no: string;
|
||||
uuid: string;
|
||||
create_time: string;
|
||||
// 原始数据中可能存在的字段
|
||||
material_name?: string;
|
||||
product_name?: string;
|
||||
stock_quantity: number;
|
||||
available_quantity: number;
|
||||
base_id?: number | string;
|
||||
[key: string]: any;
|
||||
}
|
||||
|
||||
// 统一后的显示对象
|
||||
interface DisplayItem extends BaseStockItem {
|
||||
name: string; // 统一后的名称
|
||||
type: 'material' | 'semi' | 'product'; // 类型标识
|
||||
typeLabel: string; // 类型中文名
|
||||
interface GroupedItem extends StandardStockItem {
|
||||
uniqueKey: string;
|
||||
itemsDetail: StandardStockItem[];
|
||||
export_quantity: number; // 用户输入数量
|
||||
}
|
||||
|
||||
// --- 状态变量 ---
|
||||
const loading = ref(false)
|
||||
const printLoading = ref(false)
|
||||
const searchKeyword = ref('') // 搜索关键词
|
||||
const previewVisible = ref(false) // 预览弹窗控制
|
||||
const exportLoading = ref(false)
|
||||
const searchKeyword = ref('')
|
||||
const previewVisible = ref(false)
|
||||
const currentTime = ref('')
|
||||
|
||||
// 原始扁平化数据
|
||||
const allStockData = ref<DisplayItem[]>([])
|
||||
|
||||
// 当前选中的行
|
||||
const selectedItems = ref<DisplayItem[]>([])
|
||||
const allStockData = ref<GroupedItem[]>([])
|
||||
const selectedItems = ref<GroupedItem[]>([])
|
||||
|
||||
// BOM 相关
|
||||
const bomDialogVisible = ref(false)
|
||||
const materialBaseOptions = ref<any[]>([])
|
||||
|
||||
// BOM 选择功能
|
||||
const bomParents = ref<any[]>([])
|
||||
const selectedParentId = ref<number|null>(null)
|
||||
const bomChildren = ref<any[]>([])
|
||||
@ -231,7 +321,7 @@ const bomForm = ref({
|
||||
children: [] as any[]
|
||||
})
|
||||
|
||||
// --- 计算属性：前端模糊搜索过滤 ---
|
||||
// --- 计算属性 ---
|
||||
const filteredTableData = computed(() => {
|
||||
const keyword = searchKeyword.value.trim().toLowerCase()
|
||||
if (!keyword) {
|
||||
@ -240,135 +330,196 @@ const filteredTableData = computed(() => {
|
||||
return allStockData.value.filter(item => {
|
||||
const nameMatch = item.name && item.name.toLowerCase().includes(keyword)
|
||||
const stdMatch = item.standard && item.standard.toLowerCase().includes(keyword)
|
||||
// 也可以加上UUID搜索
|
||||
const uuidMatch = item.uuid && item.uuid.toLowerCase().includes(keyword)
|
||||
return nameMatch || stdMatch || uuidMatch
|
||||
return nameMatch || stdMatch
|
||||
})
|
||||
})
|
||||
|
||||
// --- 方法 ---
|
||||
const selectionCount = computed(() => selectedItems.value.length)
|
||||
|
||||
// 计算有效的出库项（勾选了 且 数量>0）
|
||||
const validSelectedItems = computed(() => {
|
||||
return selectedItems.value.filter(item => item.export_quantity > 0)
|
||||
})
|
||||
|
||||
const canSubmit = computed(() => validSelectedItems.value.length > 0)
|
||||
|
||||
const totalExportCount = computed(() => {
|
||||
return validSelectedItems.value.reduce((sum, item) => sum + (item.export_quantity || 0), 0)
|
||||
})
|
||||
|
||||
// --- 辅助函数 ---
|
||||
|
||||
const getStandard = (item: any) => {
|
||||
if (item.standard) return item.standard;
|
||||
if (item.spec_model) return item.spec_model;
|
||||
if (item.base && item.base.spec_model) return item.base.spec_model;
|
||||
return '';
|
||||
}
|
||||
|
||||
const normalizeItem = (item: any, type: 'material' | 'semi' | 'product', typeLabel: string): StandardStockItem => {
|
||||
const name = item.material_name || item.product_name || item.name || '未知名称';
|
||||
return {
|
||||
...item,
|
||||
name: name.trim(),
|
||||
type: type,
|
||||
typeLabel: typeLabel,
|
||||
standard: getStandard(item),
|
||||
stock_quantity: parseFloat(item.stock_quantity) || 0,
|
||||
available_quantity: parseFloat(item.available_quantity) || 0,
|
||||
base_id: item.base_id || 'unknown'
|
||||
}
|
||||
}
|
||||
|
||||
const groupItems = (items: StandardStockItem[]): GroupedItem[] => {
|
||||
const map = new Map<string, GroupedItem>();
|
||||
|
||||
items.forEach(item => {
|
||||
const safeName = item.name || '';
|
||||
const safeStd = item.standard || '';
|
||||
const key = `${item.type}_${safeName}_${safeStd}`;
|
||||
|
||||
if (!map.has(key)) {
|
||||
map.set(key, {
|
||||
...item,
|
||||
uniqueKey: key,
|
||||
stock_quantity: 0,
|
||||
available_quantity: 0,
|
||||
itemsDetail: [],
|
||||
export_quantity: 0
|
||||
});
|
||||
}
|
||||
|
||||
const group = map.get(key)!;
|
||||
|
||||
if (!group.itemsDetail) group.itemsDetail = [];
|
||||
|
||||
group.stock_quantity += item.stock_quantity;
|
||||
group.available_quantity += item.available_quantity;
|
||||
group.itemsDetail.push(item);
|
||||
});
|
||||
|
||||
// 精度修正
|
||||
map.forEach(group => {
|
||||
group.stock_quantity = parseFloat(group.stock_quantity.toFixed(4));
|
||||
group.available_quantity = parseFloat(group.available_quantity.toFixed(4));
|
||||
});
|
||||
|
||||
return Array.from(map.values());
|
||||
}
|
||||
|
||||
// --- 主要方法 ---
|
||||
|
||||
// 1. 获取并处理数据
|
||||
const fetchData = async () => {
|
||||
loading.value = true
|
||||
try {
|
||||
const res: any = await getAllStock()
|
||||
// 假设 res 结构为 { materials: [], semis: [], products: [] }
|
||||
const materials = (res.materials || []).map((item: any) => ({
|
||||
...item,
|
||||
name: item.material_name,
|
||||
type: 'material',
|
||||
typeLabel: '采购件',
|
||||
base_id: item.base_id
|
||||
}))
|
||||
const semis = (res.semis || []).map((item: any) => ({
|
||||
...item,
|
||||
name: item.material_name || item.product_name, // 半成品字段名不确定，做个兼容
|
||||
type: 'semi',
|
||||
typeLabel: '半成品',
|
||||
base_id: item.base_id
|
||||
}))
|
||||
const products = (res.products || []).map((item: any) => ({
|
||||
...item,
|
||||
name: item.product_name,
|
||||
type: 'product',
|
||||
typeLabel: '成品',
|
||||
base_id: item.base_id
|
||||
}))
|
||||
const rawMaterials = (res.materials || []).map((i: any) => normalizeItem(i, 'material', '采购件'));
|
||||
const rawSemis = (res.semis || []).map((i: any) => normalizeItem(i, 'semi', '半成品'));
|
||||
const rawProducts = (res.products || []).map((i: any) => normalizeItem(i, 'product', '成品'));
|
||||
|
||||
// 合并所有数据
|
||||
allStockData.value = [...materials, ...semis, ...products]
|
||||
const groupedMaterials = groupItems(rawMaterials);
|
||||
const groupedSemis = groupItems(rawSemis);
|
||||
const groupedProducts = groupItems(rawProducts);
|
||||
|
||||
allStockData.value = [...groupedMaterials, ...groupedSemis, ...groupedProducts]
|
||||
} catch (error) {
|
||||
console.error(error)
|
||||
ElMessage.error('无法获取库存数据')
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
// 2. 表格选择
|
||||
const handleSelectionChange = (val: DisplayItem[]) => {
|
||||
const handleSelectionChange = (val: GroupedItem[]) => {
|
||||
selectedItems.value = val
|
||||
}
|
||||
|
||||
// 3. 点击“生成并预览”
|
||||
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;
|
||||
}
|
||||
|
||||
// 打开预览弹窗
|
||||
const handlePreview = () => {
|
||||
if (selectedItems.value.length === 0) {
|
||||
ElMessage.warning('请先勾选需要出库的物品')
|
||||
if (validSelectedItems.value.length === 0) {
|
||||
ElMessage.warning('请先勾选物品并填写有效的出库数量')
|
||||
return
|
||||
}
|
||||
const now = new Date();
|
||||
currentTime.value = `${now.getFullYear()}-${now.getMonth()+1}-${now.getDate()} ${now.getHours()}:${now.getMinutes()}`;
|
||||
previewVisible.value = true
|
||||
}
|
||||
|
||||
// 4. 确认打印 (在弹窗中触发)
|
||||
// ★★★ 核心打印：浏览器原生打印 (Window.print) ★★★
|
||||
const confirmPrint = async () => {
|
||||
printLoading.value = true
|
||||
// 1. 关闭预览弹窗，展示底层页面（其中包含隐藏的 #print-area）
|
||||
previewVisible.value = false;
|
||||
|
||||
// 2. 为了日志记录，还是异步调一下后端接口 (不阻塞打印)
|
||||
try {
|
||||
// 这里调用真实的打印接口
|
||||
await printSelectionList(selectedItems.value)
|
||||
ElMessage.success('指令已发送，请前往打印机(192.168.9.205)取单')
|
||||
previewVisible.value = false // 关闭弹窗
|
||||
// 可选：打印后是否清空选中？
|
||||
// selectedItems.value = []
|
||||
// 注意：el-table 需要调用 clearSelection 方法来清空UI选中状态
|
||||
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) {}
|
||||
|
||||
// 3. 延时唤起系统打印预览 (预留时间给 DOM 渲染)
|
||||
setTimeout(() => {
|
||||
window.print();
|
||||
}, 300);
|
||||
}
|
||||
|
||||
// 导出 Excel
|
||||
const confirmExport = () => {
|
||||
if (validSelectedItems.value.length === 0) return;
|
||||
exportLoading.value = true;
|
||||
try {
|
||||
let csvContent = "\uFEFF";
|
||||
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 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.click();
|
||||
ElMessage.success('导出成功');
|
||||
previewVisible.value = false;
|
||||
} catch (err) {
|
||||
ElMessage.error('打印请求失败')
|
||||
ElMessage.error('导出文件失败');
|
||||
} finally {
|
||||
printLoading.value = false
|
||||
exportLoading.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
// 5. BOM 操作 (只保留创建)
|
||||
|
||||
// --- BOM 逻辑 (保持原有功能) ---
|
||||
const handleCreateBom = async () => {
|
||||
bomDialogVisible.value = true
|
||||
if (materialBaseOptions.value.length === 0) {
|
||||
try {
|
||||
const res = await getMaterialBaseList({})
|
||||
if (res.code === 200) {
|
||||
materialBaseOptions.value = res.data
|
||||
} else {
|
||||
ElMessage.error('获取物料列表失败')
|
||||
}
|
||||
} catch (err) {
|
||||
ElMessage.error('网络错误，无法获取物料列表')
|
||||
}
|
||||
if (res.code === 200) materialBaseOptions.value = res.data
|
||||
} catch (err) {}
|
||||
}
|
||||
}
|
||||
|
||||
const addChildRow = () => {
|
||||
bomForm.value.children.push({
|
||||
child_id: null,
|
||||
dosage: 0,
|
||||
remark: ''
|
||||
})
|
||||
}
|
||||
|
||||
const removeChildRow = (index: number) => {
|
||||
bomForm.value.children.splice(index, 1)
|
||||
}
|
||||
const addChildRow = () => bomForm.value.children.push({ child_id: null, dosage: 0, remark: '' })
|
||||
const removeChildRow = (index: number) => bomForm.value.children.splice(index, 1)
|
||||
|
||||
const saveBom = async () => {
|
||||
if (!bomForm.value.parent_id) {
|
||||
ElMessage.warning('请选择父件')
|
||||
return
|
||||
}
|
||||
if (bomForm.value.children.length === 0) {
|
||||
ElMessage.warning('请至少添加一个子件')
|
||||
return
|
||||
}
|
||||
for (const child of bomForm.value.children) {
|
||||
if (!child.child_id) {
|
||||
ElMessage.warning('请为每个子件选择物料')
|
||||
return
|
||||
}
|
||||
}
|
||||
if (!bomForm.value.parent_id) return ElMessage.warning('请选择父件')
|
||||
if (bomForm.value.children.length === 0) return ElMessage.warning('请至少添加一个子件')
|
||||
|
||||
const payload = {
|
||||
parent_id: bomForm.value.parent_id,
|
||||
children: bomForm.value.children.map(c => ({
|
||||
child_id: c.child_id,
|
||||
dosage: c.dosage,
|
||||
remark: c.remark || ''
|
||||
child_id: c.child_id, dosage: c.dosage, remark: c.remark || ''
|
||||
}))
|
||||
}
|
||||
try {
|
||||
@ -376,27 +527,17 @@ const saveBom = async () => {
|
||||
if (res.code === 200) {
|
||||
ElMessage.success('BOM保存成功')
|
||||
bomDialogVisible.value = false
|
||||
// 清空表单
|
||||
bomForm.value = {
|
||||
parent_id: null,
|
||||
children: []
|
||||
}
|
||||
} else {
|
||||
ElMessage.error(res.msg || '保存失败')
|
||||
}
|
||||
} catch (err) {
|
||||
ElMessage.error('网络错误')
|
||||
}
|
||||
bomForm.value = { parent_id: null, children: [] }
|
||||
} else { ElMessage.error(res.msg || '保存失败') }
|
||||
} catch (err) { ElMessage.error('网络错误') }
|
||||
}
|
||||
|
||||
// 辅助函数：高亮关键词 (可选)
|
||||
const highlightKeyword = (text: string) => {
|
||||
if (!searchKeyword.value || !text) return text
|
||||
const reg = new RegExp(searchKeyword.value, 'gi')
|
||||
return text.replace(reg, (match) => `<span style="color: red; font-weight: bold;">${match}</span>`)
|
||||
}
|
||||
|
||||
// 辅助函数：标签颜色
|
||||
const getTypeTag = (type: string) => {
|
||||
switch (type) {
|
||||
case 'material': return 'info'
|
||||
@ -406,102 +547,127 @@ const getTypeTag = (type: string) => {
|
||||
}
|
||||
}
|
||||
|
||||
// 6. BOM 选择功能
|
||||
const onBomParentChange = async (val: number) => {
|
||||
selectedParentId.value = val
|
||||
if (val) {
|
||||
try {
|
||||
const res = await getBom(val)
|
||||
if (res.code === 200) {
|
||||
bomChildren.value = res.data
|
||||
} else {
|
||||
ElMessage.error(res.msg || '获取BOM详情失败')
|
||||
}
|
||||
} catch (err) {
|
||||
ElMessage.error('网络错误，无法获取BOM详情')
|
||||
}
|
||||
} else {
|
||||
bomChildren.value = []
|
||||
}
|
||||
if (res.code === 200) bomChildren.value = res.data
|
||||
} catch (err) {}
|
||||
} else { bomChildren.value = [] }
|
||||
}
|
||||
|
||||
|
||||
onMounted(async () => {
|
||||
fetchData()
|
||||
// 加载BOM父件列表
|
||||
try {
|
||||
const res = await getBomParents()
|
||||
if (res.code === 200) {
|
||||
bomParents.value = res.data
|
||||
}
|
||||
} catch (err) {
|
||||
console.error('加载BOM父件列表失败', err)
|
||||
}
|
||||
if (res.code === 200) bomParents.value = res.data
|
||||
} catch (err) {}
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.card-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
/* ================= 屏幕显示样式 (普通操作界面) ================= */
|
||||
.card-header { display: flex; justify-content: space-between; align-items: center; }
|
||||
.header-left .title { font-size: 18px; font-weight: bold; margin-right: 10px; }
|
||||
.header-left .subtitle { font-size: 12px; color: #909399; }
|
||||
.filter-container { margin-bottom: 20px; background-color: #f5f7fa; padding: 15px; border-radius: 4px; }
|
||||
.search-input { width: 100%; max-width: 400px; }
|
||||
.app-container { height: 100vh; overflow: hidden; display: flex; flex-direction: column; padding: 20px; box-sizing: border-box; }
|
||||
.app-container .el-card { flex: 1; display: flex; flex-direction: column; overflow: hidden; }
|
||||
::v-deep(.el-card__body) { flex: 1; display: flex; flex-direction: column; overflow: hidden; }
|
||||
.table-wrapper { flex: 1; overflow: auto; }
|
||||
::v-deep(.el-dialog__body) { max-height: 70vh; overflow-y: auto; }
|
||||
|
||||
.header-left .title {
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
margin-right: 10px;
|
||||
}
|
||||
/* ================= ★★★ 打印专用样式 (CSS 强力隔离) ★★★ ================= */
|
||||
|
||||
.header-left .subtitle {
|
||||
font-size: 12px;
|
||||
color: #909399;
|
||||
}
|
||||
/* 1. 默认状态：屏幕上隐藏打印区域 */
|
||||
#print-area { display: none; }
|
||||
|
||||
.filter-container {
|
||||
margin-bottom: 20px;
|
||||
background-color: #f5f7fa;
|
||||
padding: 15px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
/* 2. 打印状态：隐藏所有非打印内容，独显 #print-area */
|
||||
@media print {
|
||||
/* ★★★ 关键配置：去除浏览器默认页眉页脚 (时间、URL等) ★★★ */
|
||||
@page {
|
||||
margin: 0; /* 设置页边距为0，这会挤掉浏览器自带的页眉页脚 */
|
||||
size: auto;
|
||||
}
|
||||
|
||||
.search-input {
|
||||
width: 100%;
|
||||
max-width: 400px;
|
||||
}
|
||||
/* 隐藏所有内容：Body下的所有直接子元素全部隐藏 */
|
||||
body * {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.app-container {
|
||||
height: 100vh;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 20px;
|
||||
margin: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
/* 隐藏 Element UI 的弹窗层、遮罩层等干扰元素 */
|
||||
.el-dialog__wrapper, .v-modal, .el-message, .no-print-content {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.app-container .el-card {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
}
|
||||
/* 显式显示打印区域及其子元素 */
|
||||
#print-area, #print-area * {
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
::v-deep(.el-card__body) {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
}
|
||||
/* 将打印区域定位到页面绝对左上角，覆盖所有内容，背景设为白色 */
|
||||
#print-area {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
/* ★★★ 因为去掉了默认页边距，这里需要手动增加内边距来模拟A4纸边距 ★★★ */
|
||||
padding: 20mm;
|
||||
background-color: white;
|
||||
display: block !important;
|
||||
z-index: 99999; /* 最高层级 */
|
||||
}
|
||||
|
||||
.table-wrapper {
|
||||
flex: 1;
|
||||
overflow: auto;
|
||||
}
|
||||
/* ================= 打印表格排版优化 (A4 风格) ================= */
|
||||
|
||||
/* 对话框内部滚动 */
|
||||
::v-deep(.el-dialog__body) {
|
||||
max-height: 70vh;
|
||||
overflow-y: auto;
|
||||
.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; }
|
||||
.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 th {
|
||||
text-align: center;
|
||||
font-weight: bold;
|
||||
background-color: transparent !important; /* 移除背景色以省墨 */
|
||||
}
|
||||
|
||||
.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%;
|
||||
}
|
||||
|
||||
.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; }
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
Reference in New Issue
Block a user