From 7ee6b0e02f1d285ab7e1a606d1ce1fd60408ee68 Mon Sep 17 00:00:00 2001
From: DXC <duxingchen@iris-rs.cn>
Date: Fri, 12 Jun 2026 13:19:01 +0800
Subject: [PATCH] =?UTF-8?q?=E5=80=9F=E5=BA=93=E7=94=B3=E8=AF=B7=E9=A1=B5?=
 =?UTF-8?q?=E9=9D=A2=EF=BC=9A=E6=81=A2=E5=A4=8D=E6=8C=89=20BOM=20=E5=A5=97?=
 =?UTF-8?q?=E9=A4=90=E6=B7=BB=E5=8A=A0=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/views/borrow/apply/index.vue          | 1121 +++++++++++++++++
 1 file changed, 1121 insertions(+)
 create mode 100644 inventory-web/src/views/borrow/apply/index.vue

diff --git a/inventory-web/src/views/borrow/apply/index.vue b/inventory-web/src/views/borrow/apply/index.vue
new file mode 100644
index 0000000..a11722b
--- /dev/null
+++ b/inventory-web/src/views/borrow/apply/index.vue
@@ -0,0 +1,1121 @@
+<template>
+  <div class="app-container">
+    <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">(请添加需要借出的物品)</span>
+          </div>
+          <div>
+            <!-- 批量模式 -->
+            <template v-if="isBulkMode">
+              <el-button @click="cancelBulkMode">
+                取消
+              </el-button>
+              <el-button type="danger" :disabled="selectedRows.length === 0" @click="batchRemove">
+                移除选中 ({{ selectedRows.length }})
+              </el-button>
+            </template>
+            <!-- 普通模式 -->
+            <template v-else>
+              <el-button v-if="userStore.hasPermission('outbound_selection:operation')" type="warning" plain :disabled="selectedItems.length === 0" @click="isBulkMode = true">
+                批量操作
+              </el-button>
+              <el-button v-if="userStore.hasPermission('outbound_selection:operation')" type="danger" :disabled="selectedItems.length === 0" @click="clearAll">
+                清空列表
+              </el-button>
+              <el-divider direction="vertical" />
+              <el-button v-if="userStore.hasPermission('outbound_selection:operation')" type="primary" :icon="Plus" @click="openManualSelect">
+                手动添加库存
+              </el-button>
+              <el-button v-if="userStore.hasPermission('outbound_selection:operation')" type="warning" :icon="List" @click="openBomSelect">
+                按 BOM 套餐添加
+              </el-button>
+            </template>
+            <el-divider direction="vertical" />
+            <el-button v-if="userStore.hasPermission('outbound_selection:operation')" type="success" :icon="Printer" :disabled="selectedItems.length === 0" @click="handlePreview">
+              生成预览 & 打印
+            </el-button>
+            <el-button v-if="userStore.hasPermission('outbound_selection:operation')" type="primary" :icon="Plus" :disabled="selectedItems.length === 0" @click="openRequestDialog">
+              提交借库申请
+            </el-button>
+          </div>
+        </div>
+      </template>
+
+      <el-alert
+          v-if="selectedItems.length === 0"
+          title="清单为空，请点击右上角按钮添加物品"
+          type="info"
+          center
+          show-icon
+          style="margin-bottom: 20px"
+          :closable="false"
+      />
+
+      <el-table
+          ref="tableRef"
+          v-else
+          :data="sortedSelectedItems"
+          border
+          style="width: 100%"
+          row-key="uniqueKey"
+          @selection-change="handleSelectionChange"
+          @row-click="handleBulkRowClick"
+          :row-class-name="getRowClassName"
+      >
+        <el-table-column v-if="isBulkMode" type="selection" width="55" align="center" />
+        <el-table-column type="index" label="序号" width="50" 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 />
+        <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>
+          </template>
+        </el-table-column>
+
+        <el-table-column label="本次借出数" width="180" align="center" fixed="right">
+          <template #default="{ row }">
+            <el-input-number
+                v-model="row.export_quantity"
+                :min="1"
+                :max="row.available_quantity"
+                size="small"
+                style="width: 100%"
+                controls-position="right"
+                :disabled="!userStore.hasPermission('outbound_selection:operation')"
+                @change="(val) => handleMainQuantityChange(val, row)"
+            />
+          </template>
+        </el-table-column>
+
+        <el-table-column label="操作" width="80" align="center" fixed="right">
+          <template #default="{ $index }">
+            <el-button v-if="!isBulkMode && userStore.hasPermission('outbound_selection:operation')" type="danger" link @click="removeRow($index)">移除</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+
+      <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 :close-on-click-modal="false">
+      <div class="filter-container">
+        <el-input
+            v-model="searchKeyword"
+            placeholder="请输入物料名称 或 规格型号 进行搜索"
+            style="width: 300px"
+            :prefix-icon="Search"
+            clearable
+            @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="stockList"
+          v-loading="stockLoading"
+          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">
+          <template #default="{ row }">
+            <el-tag size="small" :type="getTypeTag(row.type)">{{ row.typeLabel }}</el-tag>
+          </template>
+        </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"
+                :max="row.available_quantity"
+                size="small"
+                style="width: 100%"
+                placeholder="0"
+                :disabled="!userStore.hasPermission('outbound_selection:operation')"
+                @click.stop
+                @change="(val) => handleManualQuantityChange(val, row)"
+            />
+          </template>
+        </el-table-column>
+      </el-table>
+      <el-pagination
+          style="margin-top: 12px; justify-content: flex-end; display: flex;"
+          v-model:current-page="stockPage"
+          v-model:page-size="stockPageSize"
+          :total="stockTotal"
+          :page-sizes="[20, 50, 100, 200]"
+          layout="total, prev, pager, next"
+          background
+          @size-change="handleStockSizeChange"
+          @current-change="handleStockPageChange"
+      />
+      <template #footer>
+          <span style="float: left; line-height: 32px; color: #909399;">
+             已勾选 {{ tempSelection.length }} 项
+          </span>
+        <el-button @click="manualDialogVisible = false">取消</el-button>
+        <el-button v-if="userStore.hasPermission('outbound_selection:operation')" type="primary" @click="confirmManualAdd">确认添加</el-button>
+      </template>
+    </el-dialog>
+
+    <el-dialog v-model="bomSelectVisible" title="按 BOM 套餐添加" width="700px" destroy-on-close :close-on-click-modal="false">
+      <el-form label-width="100px">
+        <el-form-item label="选择产品">
+          <el-tree-select
+            v-model="selectedBomNo"
+            :data="treeData"
+            filterable
+            placeholder="请选择启用的 BOM 配方"
+            :render-after-expand="false"
+            style="width: 100%"
+          />
+        </el-form-item>
+        <el-form-item label="借库套数">
+          <el-input-number v-model="bomSets" :min="1" label="套" style="width: 200px;" :disabled="!userStore.hasPermission('outbound_selection:operation')" />
+          <el-tag v-if="selectedBomNo && maxBuildableSets >= 0" type="success" style="margin-left: 16px;">
+            当前库存最多可成套借库: {{ maxBuildableSets }} 套
+          </el-tag>
+        </el-form-item>
+      </el-form>
+
+      <!-- 齐套性分析警告 -->
+      <el-alert
+        v-if="selectedBomNo && shortageList.length > 0 && bomSets > maxBuildableSets"
+        type="error"
+        :closable="false"
+        style="margin: 16px 0;"
+      >
+        <template #title>
+          <span style="font-weight: bold;">库存不足以组成 {{ bomSets }} 套，缺少以下物料：</span>
+        </template>
+        <el-table :data="shortageList" size="small" border style="margin-top: 8px; width: 100%;">
+          <el-table-column prop="name" label="物料名称" min-width="120" />
+          <el-table-column prop="sku" label="SKU" width="100" />
+          <el-table-column label="需补足数量" width="100">
+            <template #default="{ row }">
+              <span style="color: #F56C6C; font-weight: bold;">{{ row.shortage }}</span>
+            </template>
+          </el-table-column>
+          <el-table-column label="可用库存" width="80">
+            <template #default="{ row }">
+              <span>{{ row.available }}</span>
+            </template>
+          </el-table-column>
+        </el-table>
+      </el-alert>
+
+      <div style="margin-left: 100px; color: #909399; font-size: 12px;">
+        注意：系统将自动计算所需原料数量 ( 配方用量 × 套数 )。
+      </div>
+      <template #footer>
+        <el-button @click="bomSelectVisible = false">取消</el-button>
+        <el-button
+          v-if="userStore.hasPermission('outbound_selection:operation')"
+          type="primary"
+          @click="confirmBomAdd"
+        >
+          {{ hasShortage ? '仅添加现有库存' : '确认添加' }}
+        </el-button>
+      </template>
+    </el-dialog>
+
+    <el-dialog
+        v-model="previewVisible"
+        title="借库单核对与打印"
+        width="800px"
+        destroy-on-close
+        class="no-print-content"
+    >
+      <div class="print-preview-content">
+        <el-alert title="请核对以下清单，确认无误后点击【确认打印】" type="info" :closable="false" style="margin-bottom: 10px;" />
+
+        <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="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>
+            </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;">{{ totalExportCount }}</span> 件
+        </div>
+      </div>
+      <template #footer>
+        <span class="dialog-footer">
+          <el-button @click="previewVisible = false">取消</el-button>
+
+          <el-button v-if="userStore.hasPermission('outbound_selection:operation')" type="warning" :icon="Download" :loading="exportLoading" @click="confirmExport">
+            导出 Excel
+          </el-button>
+
+          <el-button v-if="userStore.hasPermission('outbound_selection:operation')" type="primary" :icon="Printer" :loading="printLoading" @click="confirmPrint">
+            确认打印 (A4)
+          </el-button>
+        </span>
+      </template>
+    </el-dialog>
+
+    <!-- ★ 借库申请 Dialog -->
+    <el-dialog
+        v-model="requestDialogVisible"
+        title="提交借库申请"
+        width="700px"
+        destroy-on-close
+        class="no-print-content"
+    >
+      <el-alert
+          title="请确认以下物料申请清单，填写借库人姓名及申请原因后提交"
+          type="info"
+          :closable="false"
+          style="margin-bottom: 16px;"
+      />
+
+      <el-table :data="validSelectedItems" border size="small" style="margin-bottom: 16px;">
+        <el-table-column type="index" label="序号" width="60" align="center" />
+        <el-table-column label="类型" width="80" align="center">
+          <template #default="{ row }">
+            <el-tag size="small" :type="getTypeTag(row.type)">{{ row.typeLabel }}</el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column prop="name" label="名称" min-width="120" show-overflow-tooltip />
+        <el-table-column prop="standard" label="规格" min-width="120" show-overflow-tooltip />
+        <el-table-column prop="warehouse_location" label="库位" width="120" show-overflow-tooltip />
+        <el-table-column prop="export_quantity" label="计划数量" width="100" align="center">
+          <template #default="{ row }">
+            <span style="color: #F56C6C; font-weight: bold;">{{ row.export_quantity }}</span>
+          </template>
+        </el-table-column>
+      </el-table>
+
+      <el-form label-width="100px">
+        <el-form-item label="* 借库人姓名" required>
+          <el-input
+              v-model="borrowerName"
+              placeholder="请填写借库人姓名"
+              maxlength="50"
+              clearable
+          />
+        </el-form-item>
+        <el-form-item label="* 指定审批人" required>
+          <el-select
+              v-model="requestApproverId"
+              placeholder="请选择审批人"
+              style="width: 100%"
+              filterable
+          >
+            <el-option
+                v-for="user in approvers"
+                :key="user.id"
+                :label="`${user.username}`"
+                :value="user.id"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="申请原因">
+          <el-input
+              v-model="requestRemark"
+              type="textarea"
+              :rows="3"
+              placeholder="请填写借库申请原因（选填）"
+              maxlength="200"
+              show-word-limit
+          />
+        </el-form-item>
+      </el-form>
+
+      <template #footer>
+        <span class="dialog-footer">
+          <el-button @click="requestDialogVisible = false">取消</el-button>
+          <el-button
+              type="primary"
+              :loading="requestSubmitting"
+              @click="confirmSubmitRequest"
+          >
+            确认提交
+          </el-button>
+        </span>
+      </template>
+    </el-dialog>
+
+    <div id="print-area">
+      <div class="print-header">
+        <h1>借库拣货确认单</h1>
+        <div class="print-meta-row">
+          <span>打印时间: {{ currentTime }}</span>
+          <span style="margin-left: 20px;">借库人: {{ borrowerName }}</span>
+        </div>
+        <div class="header-line"></div>
+      </div>
+
+      <table class="print-table">
+        <thead>
+        <tr>
+          <th style="width: 50px;">序号</th>
+          <th>物料名称</th>
+          <th>规格型号</th>
+          <th style="width: 80px;">库位</th>
+          <th style="width: 50px;">单位</th>
+          <th style="width: 90px;">借出数量</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;">{{ 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="7" style="text-align: center; padding: 20px;">无数据</td>
+        </tr>
+        </tbody>
+        <tfoot>
+        <tr>
+          <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>
+        </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>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, watch } from 'vue'
+import { Printer, Search, Plus, Download, List } from '@element-plus/icons-vue'
+import { ElMessage, ElTable, ElMessageBox } from 'element-plus'
+import { getStockList, printSelectionList } from '@/api/inbound/stock'
+import { useUserStore } from '@/stores/user'
+import { submitBorrowRequest } from '@/api/transaction'
+import { getApproversList } from '@/api/auth'
+import { getBomList, getBomDetail } from '@/api/bom'
+
+const userStore = useUserStore()
+
+// --- 状态变量 ---
+const selectedItems = ref<any[]>([])
+const selectedRows = ref<any[]>([])
+const isBulkMode = ref(false)
+
+// 按库位路径自然升序排序（优化拣货路径）
+const sortedSelectedItems = computed(() => {
+  return [...selectedItems.value].sort((a, b) => {
+    const locA = a.warehouse_location || ''
+    const locB = b.warehouse_location || ''
+    return locA.localeCompare(locB, 'zh', { numeric: true })
+  })
+})
+
+const manualDialogVisible = ref(false)
+const bomSelectVisible = ref(false)
+const previewVisible = ref(false)
+const exportLoading = ref(false)
+const printLoading = ref(false)
+
+// ★ 借库申请相关
+const requestDialogVisible = ref(false)
+const borrowerName = ref('')
+const requestRemark = ref('')
+const requestApproverId = ref<number | null>(null)
+const approvers = ref<any[]>([])
+const requestSubmitting = ref(false)
+
+const stockList = ref<any[]>([])
+const stockTotal = ref(0)
+const stockPage = ref(1)
+const stockPageSize = ref(20)
+const stockLoading = ref(false)
+const searchKeyword = ref('')
+const tempSelection = ref<any[]>([])
+let stockSearchTimer: ReturnType<typeof setTimeout> | null = null
+
+// 表格引用
+const manualTableRef = ref<InstanceType<typeof ElTable>>()
+const tableRef = ref<InstanceType<typeof ElTable>>()
+
+// BOM 相关
+const bomOptions = ref<any[]>([])
+const selectedBomNo = ref('')
+const bomSets = ref(1)
+const currentBomDetail = ref<any[]>([])  // 当前选中的BOM明细
+
+// BOM 树形数据（将分组数据映射为 el-tree-select 需要的结构）
+const treeData = computed(() => {
+  return (bomOptions.value || []).map(group => ({
+    value: `group_${group.category}`, // 仅作唯一标识
+    label: `${group.category} (${group.count})`,
+    disabled: true, // 禁止选中分类本身
+    children: (group.items || []).map((b: any) => ({
+      value: b.bom_no,
+      label: `${b.parent_name} - ${b.version}`
+    }))
+  }))
+})
+
+// --- BOM 齐套性分析计算属性 ---
+const maxBuildableSets = computed(() => {
+  if (!currentBomDetail.value?.length) return 0
+  const result = currentBomDetail.value.reduce((minSets, bomItem: any) => {
+    const dosage = parseFloat(bomItem.dosage) || 0
+    if (dosage <= 0) return minSets
+    const stock = parseFloat(bomItem.current_stock) || 0
+    return Math.min(minSets, Math.floor(stock / dosage))
+  }, Infinity)
+
+  return result === Infinity ? 0 : result
+})
+
+const shortageList = computed(() => {
+  if (!currentBomDetail.value?.length || bomSets.value <= 0) return []
+  return currentBomDetail.value
+      .map((bomItem: any) => {
+        const dosage = parseFloat(bomItem.dosage) || 0
+        const totalNeed = dosage * bomSets.value
+        const stock = parseFloat(bomItem.current_stock) || 0
+        const shortage = Math.max(0, totalNeed - stock)
+        return { ...bomItem, shortage, available: stock }
+      })
+      .filter((item: any) => item.shortage > 0)
+      .map((item: any) => ({
+        name: item.child_name || item.name || '未知物料',
+        sku: item.child_sku || item.sku || '-',
+        need: item.dosage * bomSets.value,
+        available: item.available,
+        shortage: item.shortage
+      }))
+})
+
+const hasShortage = computed(() => shortageList.value.length > 0 && bomSets.value > maxBuildableSets.value)
+
+// 打印相关
+const currentTime = ref('')
+
+// --- 计算属性 ---
+const validSelectedItems = computed(() => {
+  const filtered = selectedItems.value.filter(item => item.export_quantity > 0)
+  return [...filtered].sort((a, b) => {
+    const locA = a.warehouse_location || a.warehouse_loc || '';
+    const locB = b.warehouse_location || b.warehouse_loc || '';
+
+    if (!locA && locB) return 1;
+    if (locA && !locB) return -1;
+    if (!locA && !locB) return 0;
+
+    return locA.localeCompare(locB, 'zh-CN', { numeric: true });
+  });
+})
+
+const totalExportCount = computed(() => {
+  return validSelectedItems.value.reduce((sum, item) => sum + (item.export_quantity || 0), 0)
+})
+
+// --- 辅助方法 ---
+const getTypeTag = (type: string) => {
+  switch (type) {
+    case 'material': return 'info'
+    case 'semi': return 'warning'
+    case 'product': return 'success'
+    default: return ''
+  }
+}
+
+// --- 核心逻辑：手动添加库存 ---
+
+const loadStockList = async () => {
+  stockLoading.value = true
+  try {
+    const res: any = await getStockList({
+      page: stockPage.value,
+      pageSize: stockPageSize.value,
+      keyword: searchKeyword.value.trim(),
+      is_aggregated: true
+    })
+    stockList.value = (res.data?.list || []).map((item: any) => ({
+      ...item,
+      uniqueKey: `${item.type}_${item.id}`,
+      warehouse_location: item.warehouse_location || item.warehouse_loc || item.full_path || ''
+    }))
+    stockTotal.value = res.data?.total || 0
+  } catch (e) {
+    ElMessage.error('加载库存列表失败')
+  } finally {
+    stockLoading.value = false
+  }
+}
+
+const openManualSelect = async () => {
+  manualDialogVisible.value = true
+  stockPage.value = 1
+  searchKeyword.value = ''
+  await loadStockList()
+}
+
+const filterStock = () => {
+  if (stockSearchTimer) clearTimeout(stockSearchTimer)
+  stockSearchTimer = setTimeout(() => {
+    stockPage.value = 1
+    loadStockList()
+  }, 350)
+}
+
+const handleStockPageChange = (page: number) => {
+  stockPage.value = page
+  loadStockList()
+}
+
+const handleStockSizeChange = (size: number) => {
+  stockPageSize.value = size
+  stockPage.value = 1
+  loadStockList()
+}
+
+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('请先勾选需要添加的物品')
+
+  const newItems = tempSelection.value.filter(item =>
+      !selectedItems.value.find(existing => existing.uniqueKey === item.uniqueKey)
+  )
+
+  if (newItems.length === 0) {
+    manualDialogVisible.value = false
+    return ElMessage.warning('选中的物品已全部在清单中')
+  }
+
+  const itemsToAdd = newItems.map(item => {
+    const copy = JSON.parse(JSON.stringify(item))
+    copy.export_quantity = item.export_quantity || 0
+    return copy
+  })
+
+  selectedItems.value.push(...itemsToAdd)
+  manualDialogVisible.value = false
+  tempSelection.value = []
+  ElMessage.success(`成功添加 ${itemsToAdd.length} 项物品`)
+}
+
+// --- 核心逻辑 2：按 BOM 添加 ---
+
+const openBomSelect = async () => {
+  bomSelectVisible.value = true
+  bomSets.value = 1
+  selectedBomNo.value = ''
+  currentBomDetail.value = []
+  try {
+    const res = await getBomList({ active_only: true })
+    bomOptions.value = res.data || []
+  } catch (e) {
+    ElMessage.error('加载 BOM 列表失败')
+  }
+}
+
+// 监听 BOM 选择变化，自动加载明细并计算齐套性
+watch(selectedBomNo, async (newBomNo) => {
+  if (!newBomNo) {
+    currentBomDetail.value = []
+    return
+  }
+  try {
+    const detailRes: any = await getBomDetail(newBomNo)
+    currentBomDetail.value = detailRes.data?.children || []
+  } catch (e) {
+    ElMessage.error('加载 BOM 明细失败')
+    currentBomDetail.value = []
+  }
+})
+
+const confirmBomAdd = async () => {
+  if (!selectedBomNo.value) return ElMessage.warning('请选择 BOM')
+
+  if (stockList.value.length === 0) {
+    await loadStockList()
+  }
+
+  if (currentBomDetail.value.length === 0) {
+    try {
+      const detailRes: any = await getBomDetail(selectedBomNo.value)
+      currentBomDetail.value = detailRes.data?.children || []
+    } catch (e) {
+      ElMessage.error('获取 BOM 详情失败')
+      return
+    }
+  }
+
+  const bomRows = currentBomDetail.value
+  let addedCount = 0
+  let skippedCount = 0
+
+  bomRows.forEach((bomItem: any) => {
+    const dosage = parseFloat(bomItem.dosage) || 0
+    const needQty = dosage * bomSets.value
+
+    const stockCandidate = stockList.value.find(s =>
+      (s.base_id && s.base_id == bomItem.child_id)
+    )
+
+    if (stockCandidate) {
+      const availableQty = stockCandidate.availableCount || 0
+      const actualAddQty = Math.min(needQty, availableQty)
+
+      if (actualAddQty > 0) {
+        const existing = selectedItems.value.find(e => e.uniqueKey === stockCandidate.uniqueKey)
+        if (existing) {
+          existing.export_quantity += actualAddQty
+        } else {
+          const newItem = JSON.parse(JSON.stringify(stockCandidate))
+          if (bomItem.warehouse_location) {
+            newItem.warehouse_location = bomItem.warehouse_location
+          }
+          newItem.export_quantity = actualAddQty
+          selectedItems.value.push(newItem)
+        }
+        addedCount++
+      } else {
+        skippedCount++
+      }
+    } else {
+      skippedCount++
+    }
+  })
+
+  if (addedCount > 0) {
+    const tip = skippedCount > 0 ? `（跳过 ${skippedCount} 种缺货物料）` : ''
+    ElMessage.success(`成功添加 ${addedCount} 类物料${tip}`)
+    bomSelectVisible.value = false
+  } else {
+    ElMessage.warning('该 BOM 所有物料库存均为 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
+        })
+  }
+}
+
+// --- 通用逻辑 ---
+
+const handleSelectionChange = (val: any[]) => {
+  selectedRows.value = val
+  if (val.length === 0 && isBulkMode.value) {
+    isBulkMode.value = false
+  }
+}
+
+const handleBulkRowClick = (row: any) => {
+  if (isBulkMode.value && tableRef.value) {
+    tableRef.value.toggleRowSelection(row, undefined)
+  }
+}
+
+const getRowClassName = () => {
+  return isBulkMode.value ? 'bulk-clickable-row' : ''
+}
+
+const cancelBulkMode = () => {
+  isBulkMode.value = false
+  selectedRows.value = []
+}
+
+const clearAll = () => {
+  ElMessageBox.confirm(
+    '确定要清空当前拣货车中的所有物品吗？',
+    '清空确认',
+    {
+      confirmButtonText: '确定清空',
+      cancelButtonText: '取消',
+      type: 'warning',
+    }
+  ).then(() => {
+    selectedItems.value = []
+    selectedRows.value = []
+    isBulkMode.value = false
+    ElMessage.success('已清空拣货车')
+  }).catch(() => {})
+}
+
+const batchRemove = () => {
+  if (selectedRows.value.length === 0) return
+  ElMessageBox.confirm(
+    `确定要移除选中的 ${selectedRows.value.length} 项物品吗？`,
+    '批量移除确认',
+    {
+      confirmButtonText: '确定移除',
+      cancelButtonText: '取消',
+      type: 'warning',
+    }
+  ).then(() => {
+    const keysToRemove = new Set(selectedRows.value.map(row => row.uniqueKey))
+    selectedItems.value = selectedItems.value.filter(item => !keysToRemove.has(item.uniqueKey))
+    selectedRows.value = []
+    isBulkMode.value = false
+    ElMessage.success(`已移除 ${keysToRemove.size} 项物品`)
+  }).catch(() => {})
+}
+
+const removeRow = (index: number) => {
+  selectedItems.value.splice(index, 1)
+}
+
+const handlePreview = () => {
+  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
+}
+
+// ★ 借库申请
+const openRequestDialog = () => {
+  if (validSelectedItems.value.length === 0) {
+    ElMessage.warning('请先添加物品并填写计划借出数量')
+    return
+  }
+  borrowerName.value = userStore.user?.username || ''
+  requestRemark.value = ''
+  requestApproverId.value = null
+  loadApprovers()
+  requestDialogVisible.value = true
+}
+
+// ★ 加载可指定审批人列表
+const loadApprovers = async () => {
+  try {
+    const res: any = await getApproversList()
+    approvers.value = res.data || []
+  } catch (e) {
+    console.error('加载审批人列表失败', e)
+    approvers.value = []
+  }
+}
+
+// ★ 确认提交借库申请
+const confirmSubmitRequest = async () => {
+  const borrower = borrowerName.value.trim()
+  if (!borrower) {
+    ElMessage.warning('请填写借库人姓名')
+    return
+  }
+
+  requestSubmitting.value = true
+  try {
+    const payload = {
+      items: validSelectedItems.value.map((item: any) => ({
+        name: item.name || '',
+        spec_model: item.standard || '',
+        warehouse_location: item.warehouse_location || '',
+        quantity: item.export_quantity || 0
+      })),
+      borrower_name: borrower,
+      remark: requestRemark.value.trim(),
+      approver_id: requestApproverId.value
+    }
+
+    await submitBorrowRequest(payload)
+
+    requestDialogVisible.value = false
+    selectedItems.value = []
+    ElMessage.success('借库申请已提交，等待主管审批！')
+  } catch (err: any) {
+    ElMessage.error(err?.message || err?.msg || '提交申请失败，请重试')
+  } finally {
+    requestSubmitting.value = false
+  }
+}
+
+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) {}
+
+  setTimeout(() => {
+    const printElement = document.getElementById('print-area');
+    if (!printElement) return;
+
+    const iframe = document.createElement('iframe');
+    iframe.style.position = 'fixed';
+    iframe.style.right = '0';
+    iframe.style.bottom = '0';
+    iframe.style.width = '0';
+    iframe.style.height = '0';
+    iframe.style.border = '0';
+    document.body.appendChild(iframe);
+
+    const iframeDoc = iframe.contentWindow?.document || iframe.contentDocument;
+    if (!iframeDoc) return;
+
+    iframeDoc.open();
+    iframeDoc.write('<!DOCTYPE html><html><head><title>借库单打印</title></head><body></body></html>');
+    iframeDoc.close();
+
+    const styles = document.querySelectorAll('style, link[rel="stylesheet"]');
+    styles.forEach(styleNode => {
+      iframeDoc.head.appendChild(styleNode.cloneNode(true));
+    });
+
+    const customStyle = iframeDoc.createElement('style');
+    customStyle.innerHTML = `
+      html, body {
+        height: auto !important;
+        min-height: 100% !important;
+        overflow: visible !important;
+        background: white !important;
+        margin: 0;
+        padding: 0;
+      }
+      @page {
+        size: A4 portrait;
+        margin: 10mm;
+      }
+      #print-area {
+        display: block !important;
+        position: static !important;
+        width: 100% !important;
+        height: auto !important;
+      }
+      .print-table {
+        width: 100% !important;
+        table-layout: auto !important;
+        border-collapse: collapse;
+      }
+      .print-table tr, .print-table td, .print-table th {
+        page-break-inside: avoid !important;
+        break-inside: avoid !important;
+      }
+      .el-overlay, .el-dialog__wrapper, .no-print-content {
+        display: none !important;
+      }
+    `;
+    iframeDoc.head.appendChild(customStyle);
+
+    iframeDoc.body.appendChild(printElement.cloneNode(true));
+
+    setTimeout(() => {
+      iframe.contentWindow?.focus();
+      iframe.contentWindow?.print();
+      setTimeout(() => {
+        document.body.removeChild(iframe);
+      }, 1000);
+    }, 500);
+  }, 300);
+}
+
+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, ' ');
+      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.click();
+    ElMessage.success('导出成功');
+    previewVisible.value = false;
+  } catch (err) {
+    ElMessage.error('导出文件失败');
+  } finally {
+    exportLoading.value = false;
+  }
+}
+</script>
+
+<style scoped>
+/* ================= 屏幕显示样式 ================= */
+.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; }
+.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; }
+
+/* ================= 打印专用样式 ================= */
+#print-area { display: none; }
+.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: 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 th { text-align: center; font-weight: bold; }
+.cell-padding { padding-left: 10px; }
+.print-table tr {
+  page-break-inside: avoid !important;
+  break-inside: avoid !important;
+}
+.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; }
+
+.print-preview-content {
+  height: auto !important;
+  max-height: none !important;
+  overflow: visible !important;
+}
+.print-preview-content .el-table,
+.print-preview-content .el-table__inner-wrapper,
+.print-preview-content .el-table__body-wrapper,
+.print-preview-content .el-table__body {
+  height: auto !important;
+  max-height: none !important;
+  overflow: visible !important;
+}
+.print-preview-content .el-scrollbar__wrap {
+  overflow: visible !important;
+}
+.print-preview-content .el-table tr {
+  page-break-inside: avoid !important;
+  break-inside: avoid !important;
+}
+.print-preview-content .el-table__body-wrapper is-scrollable-none {
+  overflow: visible !important;
+}
+
+:deep(.bulk-clickable-row) {
+  cursor: pointer;
+}
+</style>
+
+<style>
+@media print {
+  @page { margin: 10mm; size: auto; }
+
+  body * { visibility: hidden; }
+  .el-dialog__wrapper, .v-modal, .el-message, .no-print-content { display: none !important; }
+
+  html, body, #app, .el-container, .el-main, .el-scrollbar__wrap {
+    position: static !important;
+    overflow: visible !important;
+    height: auto !important;
+    min-height: auto !important;
+  }
+
+  #print-area, #print-area * { visibility: visible; }
+  #print-area {
+    position: absolute !important;
+    left: 0 !important;
+    top: 0 !important;
+    width: 100% !important;
+    height: auto !important;
+    margin: 0 !important;
+    padding: 0 !important;
+    background-color: white;
+    display: block !important;
+    z-index: 99999;
+  }
+
+  .print-table tr, .print-table td, .print-table th {
+    page-break-inside: avoid !important;
+    break-inside: avoid !important;
+  }
+}
+</style>
\ No newline at end of file