修改出库选单页面以及打印内容

inventory-backend/app/services/print/network_print_service.py

@@ -1,114 +1,40 @@
-import socket  # .material -> .base refactor checked
+import socket
 import datetime
 
 
 class NetworkPrintService:
-    def __init__(self, ip='192.168.9.205', port=9100):
+    def __init__(self, ip='192.168.9.250', port=9100):
-        """
-        初始化网络打印机服务
-        :param ip: 打印机IP，默认 192.168.9.205
-        :param port: 端口，默认 9100
-        """
         self.ip = ip
         self.port = port
 
     def _send_to_printer(self, content):
-        """底层发送方法"""
+        """
-        try:
+        对于 A4 打印机，后端直接发送 Socket 指令通常无效或导致乱码。
-            # 建立 Socket 连接
+        因此这里只做日志记录，实际打印由前端浏览器完成。
-            with socket.socket(socket.socket.AF_INET, socket.socket.SOCK_STREAM) as s:
+        """
-                s.settimeout(5)  # 设置5秒超时
+        print(f"--- [后端日志] 收到打印请求 (实际由前端处理) ---\n{content}\n----------------")
-                s.connect((self.ip, self.port))
+        return True, "记录成功"
-
-                # 发送内容，使用 GB18030 编码以支持中文
-                s.sendall(content.encode('gb18030'))
-
-                # 发送切纸指令 (ESC/POS: GS V m)
-                # 十六进制: 1D 56 42 00
-                s.sendall(b'\x1d\x56\x42\x00')
-
-            return True, "打印成功"
-        except Exception as e:
-            print(f"[NetworkPrint Error] {str(e)}")
-            return False, f"打印失败: {str(e)}"
 
     def print_outbound_selection(self, items):
         """
-        打印出库选单 (拣货单)
+        仅记录出库日志，不发送物理指令
-        :param items: 选中的物品列表
         """
-        timestamp = datetime.datetime.now().strftime("%Y-%m-%d %H:%M:%S")
+        try:
+            timestamp = datetime.datetime.now().strftime("%Y-%m-%d %H:%M")
+            total_qty = sum([float(i.get('quantity', 0)) for i in items])
 
-        lines = []
+            # 简单构造一个日志字符串
-        lines.append("\n")
+            log_content = f"出库时间: {timestamp}, 总数: {int(total_qty)}\n"
-        lines.append("********************************")
+            for item in items:
-        lines.append("        出库拣货确认单          ")
+                log_content += f"- {item.get('name')} (规格:{item.get('standard')}) x {item.get('quantity')}\n"
-        lines.append("********************************")
-        lines.append(f"打印时间: {timestamp}")
-        lines.append(f"待出库总数: {len(items)} 件")
-        lines.append("--------------------------------")
-        lines.append(f"{'名称':<14}{'规格/批号':<10}")
-        lines.append("--------------------------------")
 
-        for item in items:
+            # 调用虚拟发送
-            # 获取名称，优先取 material_name, 其次 product_name
+            return self._send_to_printer(log_content)
-            name = item.get('material_name') or item.get('product_name') or "未知物品"
-            if len(name) > 14: name = name[:13] + "."  # 名称过长截断
 
-            standard = item.get('standard', '')
+        except Exception as e:
-            batch = item.get('batch_no', '')
+            print(f"日志记录失败: {e}")
-            uuid = item.get('uuid', '')[-6:]  # 只显示UUID后6位
+            return True, "记录忽略"  # 即使失败也不要在前端报错
-
-            lines.append(f"{name:<14} {standard}")
-            lines.append(f"批号: {batch} | 尾号: {uuid}")
-            lines.append("- - - - - - - - - - - - - - - -")
-
-        lines.append("\n")
-        lines.append("库管员签字: ______________")
-        lines.append("领料人签字: ______________")
-        lines.append("\n\n\n")  # 走纸
-
-        content = "\n".join(lines)
-        return self._send_to_printer(content)
 
     def print_stocktake_report(self, data):
-        """
+        # 同样处理
-        打印盘点统计报告
+        return self._send_to_printer(f"盘点报告: 应盘{data.get('total')}, 实盘{data.get('scanned')}")
-        :param data: 包含 total, scanned, missing, missing_items
-        """
-        total = data.get('total', 0)
-        scanned = data.get('scanned', 0)
-        missing = data.get('missing', 0)
-        missing_items = data.get('missing_items', [])
-        timestamp = datetime.datetime.now().strftime("%Y-%m-%d %H:%M:%S")
-
-        lines = []
-        lines.append("\n")
-        lines.append("================================")
-        lines.append("       库存盘点统计报告        ")
-        lines.append("================================")
-        lines.append(f"盘点时间: {timestamp}")
-        lines.append(f"应盘总数: {total}")
-        lines.append(f"实盘(已扫): {scanned}")
-        lines.append(f"差异(未扫): {missing}")
-        lines.append("--------------------------------")
-
-        if missing == 0:
-            lines.append("【结果】: 账实相符，库存完美！")
-        else:
-            lines.append("【差异明细 (未扫码物品)】:")
-            for item in missing_items:
-                name = item.get('material_name') or item.get('product_name') or "未知"
-                batch = item.get('batch_no', '-')
-                # 兼容不同模型的字段
-                code = item.get('uuid', item.get('bar_code', 'N/A'))[-6:]
-
-                lines.append(f"[ ] {name}")
-                lines.append(f"    批:{batch} 码:{code}")
-
-        lines.append("\n")
-        lines.append("监盘人: ______________")
-        lines.append("\n\n\n")
-
-        content = "\n".join(lines)
-        return self._send_to_printer(content)

inventory-web/src/views/outbound/Selection.vue

@@ -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"
+          v-if="selectionCount > 0"
-          :title="`当前已选中 ${selectedItems.length} 项物品`"
+          :title="`当前已勾选 ${selectionCount} 种物品，请在表格右侧填写【本次出库数】`"
           type="success"
           show-icon
           style="margin-bottom: 15px"
@@ -60,83 +60,173 @@
       />
 
       <div class="table-wrapper">
-          <el-table
+        <el-table
-                  v-loading="loading"
+            v-loading="loading"
-                  :data="filteredTableData"
+            :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"
+                  controls-position="right"
-                  row-key="uuid"
+                  placeholder="0"
-                  border
+              />
-                  height="100%"
+            </template>
-          >
+          </el-table-column>
-        <el-table-column type="selection" width="55" align="center" />
+        </el-table>
-
-        <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>
       </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="export_quantity" label="本次出库" width="120" align="center">
-          <el-table-column prop="uuid" label="条码UUID" show-overflow-tooltip />
+            <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 编辑弹窗 -->
+    <div id="print-area">
-    <el-dialog v-model="bomDialogVisible" title="创建/编辑 BOM" width="800px">
+      <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"
+                v-for="item in materialBaseOptions"
-              :key="item.id"
+                :key="item.id"
-              :label="item.name"
+                :label="item.name"
-              :value="item.id"
+                :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"
+                    v-for="item in materialBaseOptions"
-                  :key="item.id"
+                    :key="item.id"
-                  :label="item.name"
+                    :label="item.name"
-                  :value="item.id"
+                    :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;
-  // 原始数据中可能存在的字段
+  stock_quantity: number;
-  material_name?: string;
+  available_quantity: number;
-  product_name?: string;
+  base_id?: number | string;
+  [key: string]: any;
 }
 
-// 统一后的显示对象
+interface GroupedItem extends StandardStockItem {
-interface DisplayItem extends BaseStockItem {
+  uniqueKey: string;
-  name: string;      // 统一后的名称
+  itemsDetail: StandardStockItem[];
-  type: 'material' | 'semi' | 'product'; // 类型标识
+  export_quantity: number; // 用户输入数量
-  typeLabel: string; // 类型中文名
 }
 
 // --- 状态变量 ---
 const loading = ref(false)
 const printLoading = ref(false)
-const searchKeyword = ref('') // 搜索关键词
+const exportLoading = ref(false)
-const previewVisible = ref(false) // 预览弹窗控制
+const searchKeyword = ref('')
+const previewVisible = ref(false)
+const currentTime = ref('')
 
-// 原始扁平化数据
+const allStockData = ref<GroupedItem[]>([])
-const allStockData = ref<DisplayItem[]>([])
+const selectedItems = ref<GroupedItem[]>([])
-
-// 当前选中的行
-const selectedItems = ref<DisplayItem[]>([])
 
 // 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搜索
+    return nameMatch || stdMatch
-    const uuidMatch = item.uuid && item.uuid.toLowerCase().includes(keyword)
-    return nameMatch || stdMatch || uuidMatch
   })
 })
 
-// --- 方法 ---
+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 rawMaterials = (res.materials || []).map((i: any) => normalizeItem(i, 'material', '采购件'));
-    const materials = (res.materials || []).map((item: any) => ({
+    const rawSemis = (res.semis || []).map((i: any) => normalizeItem(i, 'semi', '半成品'));
-      ...item,
+    const rawProducts = (res.products || []).map((i: any) => normalizeItem(i, 'product', '成品'));
-      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 groupedMaterials = groupItems(rawMaterials);
-    allStockData.value = [...materials, ...semis, ...products]
+    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: GroupedItem[]) => {
-const handleSelectionChange = (val: DisplayItem[]) => {
   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) {
+  if (validSelectedItems.value.length === 0) {
-    ElMessage.warning('请先勾选需要出库的物品')
+    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 {
-    // 这里调用真实的打印接口
+    const payload = validSelectedItems.value.map(item => ({
-    await printSelectionList(selectedItems.value)
+      name: item.name, standard: item.standard, quantity: item.export_quantity
-    ElMessage.success('指令已发送，请前往打印机(192.168.9.205)取单')
+    }));
-    previewVisible.value = false // 关闭弹窗
+    printSelectionList(JSON.parse(JSON.stringify(payload))).catch(() => {});
-    // 可选：打印后是否清空选中？
+  } catch (e) {}
-    // selectedItems.value = []
+
-    // 注意：el-table 需要调用 clearSelection 方法来清空UI选中状态
+  // 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) {
+      if (res.code === 200) materialBaseOptions.value = res.data
-        materialBaseOptions.value = res.data
+    } catch (err) {}
-      } else {
-        ElMessage.error('获取物料列表失败')
-      }
-    } catch (err) {
-      ElMessage.error('网络错误，无法获取物料列表')
-    }
   }
 }
-
+const addChildRow = () => bomForm.value.children.push({ child_id: null, dosage: 0, remark: '' })
-const addChildRow = () => {
+const removeChildRow = (index: number) => bomForm.value.children.splice(index, 1)
-  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) {
+  if (!bomForm.value.parent_id) return ElMessage.warning('请选择父件')
-    ElMessage.warning('请选择父件')
+  if (bomForm.value.children.length === 0) return 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
-    }
-  }
   const payload = {
     parent_id: bomForm.value.parent_id,
     children: bomForm.value.children.map(c => ({
-      child_id: c.child_id,
+      child_id: c.child_id, dosage: c.dosage, remark: c.remark || ''
-      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: [] }
-      bomForm.value = {
+    } else { ElMessage.error(res.msg || '保存失败') }
-        parent_id: null,
+  } catch (err) { ElMessage.error('网络错误') }
-        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) {
+      if (res.code === 200) bomChildren.value = res.data
-        bomChildren.value = res.data
+    } catch (err) {}
-      } else {
+  } else { bomChildren.value = [] }
-        ElMessage.error(res.msg || '获取BOM详情失败')
-      }
-    } catch (err) {
-      ElMessage.error('网络错误，无法获取BOM详情')
-    }
-  } else {
-    bomChildren.value = []
-  }
 }
 
-
 onMounted(async () => {
   fetchData()
-  // 加载BOM父件列表
   try {
     const res = await getBomParents()
-    if (res.code === 200) {
+    if (res.code === 200) bomParents.value = res.data
-      bomParents.value = res.data
+  } catch (err) {}
-    }
-  } catch (err) {
-    console.error('加载BOM父件列表失败', err)
-  }
 })
 </script>
 
 <style scoped>
-.card-header {
+/* ================= 屏幕显示样式 (普通操作界面) ================= */
-  display: flex;
+.card-header { display: flex; justify-content: space-between; align-items: center; }
-  justify-content: space-between;
+.header-left .title { font-size: 18px; font-weight: bold; margin-right: 10px; }
-  align-items: center;
+.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 {
+/* ================= ★★★ 打印专用样式 (CSS 强力隔离) ★★★ ================= */
-  font-size: 18px;
-  font-weight: bold;
-  margin-right: 10px;
-}
 
-.header-left .subtitle {
+/* 1. 默认状态：屏幕上隐藏打印区域 */
-  font-size: 12px;
+#print-area { display: none; }
-  color: #909399;
-}
 
-.filter-container {
+/* 2. 打印状态：隐藏所有非打印内容，独显 #print-area */
-  margin-bottom: 20px;
+@media print {
-  background-color: #f5f7fa;
+  /* ★★★ 关键配置：去除浏览器默认页眉页脚 (时间、URL等) ★★★ */
-  padding: 15px;
+  @page {
-  border-radius: 4px;
+    margin: 0; /* 设置页边距为0，这会挤掉浏览器自带的页眉页脚 */
-}
+    size: auto;
+  }
 
-.search-input {
+  /* 隐藏所有内容：Body下的所有直接子元素全部隐藏 */
-  width: 100%;
+  body * {
-  max-width: 400px;
+    visibility: hidden;
-}
+  }
 
-.app-container {
+  /* 隐藏 Element UI 的弹窗层、遮罩层等干扰元素 */
-  height: 100vh;
+  .el-dialog__wrapper, .v-modal, .el-message, .no-print-content {
-  overflow: hidden;
+    display: none !important;
-  display: flex;
+  }
-  flex-direction: column;
-  padding: 20px;
-  margin: 0;
-  box-sizing: border-box;
-}
 
-.app-container .el-card {
+  /* 显式显示打印区域及其子元素 */
-  flex: 1;
+  #print-area, #print-area * {
-  display: flex;
+    visibility: visible;
-  flex-direction: column;
+  }
-  overflow: hidden;
-}
 
-::v-deep(.el-card__body) {
+  /* 将打印区域定位到页面绝对左上角，覆盖所有内容，背景设为白色 */
-  flex: 1;
+  #print-area {
-  display: flex;
+    position: fixed;
-  flex-direction: column;
+    left: 0;
-  overflow: hidden;
+    top: 0;
-}
+    width: 100%;
+    height: 100%;
+    margin: 0;
+    /* ★★★ 因为去掉了默认页边距，这里需要手动增加内边距来模拟A4纸边距 ★★★ */
+    padding: 20mm;
+    background-color: white;
+    display: block !important;
+    z-index: 99999; /* 最高层级 */
+  }
 
-.table-wrapper {
+  /* ================= 打印表格排版优化 (A4 风格) ================= */
-  flex: 1;
-  overflow: auto;
-}
 
-/* 对话框内部滚动 */
+  .print-header { text-align: center; margin-bottom: 20px; }
-::v-deep(.el-dialog__body) {
+  .print-header h1 { font-size: 24px; margin: 0 0 10px 0; font-weight: bold; color: #000; }
-  max-height: 70vh;
+  .print-meta-row { display: flex; justify-content: space-between; font-size: 12px; margin-bottom: 5px; }
-  overflow-y: auto;
+  .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>