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

<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">(A4 打印模式)</span>
          </div>
          <div>
            <el-button type="success" :icon="Printer" :disabled="!canSubmit" @click="handlePreview">
              生成并预览出库单
            </el-button>
          </div>
        </div>
      </template>

      <div class="filter-container">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-input
                v-model="searchKeyword"
                placeholder="请输入物料名称 或 规格型号 进行搜索"
                class="search-input"
                clearable
                :prefix-icon="Search"
            />
          </el-col>

          <el-col :span="12" style="text-align: right;">
            <el-button type="primary" plain :icon="Plus" @click="handleCreateBom">
              创建 BOM 表
            </el-button>
          </el-col>
        </el-row>

        <el-row :gutter="20" style="margin-top:15px">
          <el-col :span="24">
            <el-select v-model="selectedParentId" placeholder="选择 BOM 表" filterable style="width:100%" @change="onBomParentChange">
              <el-option v-for="item in bomParents" :key="item.id" :label="item.name" :value="item.id" />
            </el-select>
          </el-col>
        </el-row>
      </div>

      <el-table v-if="bomChildren.length > 0" :data="bomChildren" border style="width:100%; margin-bottom:15px">
        <el-table-column prop="child_name" label="子件名称" />
        <el-table-column prop="dosage" label="所需个数" />
        <el-table-column prop="current_stock" label="当前库存" />
        <el-table-column prop="max_producible" label="最大可生产" />
      </el-table>

      <el-alert
          v-if="selectionCount > 0"
          :title="`当前已勾选 ${selectionCount} 种物品，请在表格右侧填写【本次出库数】`"
          type="success"
          show-icon
          style="margin-bottom: 15px"
          :closable="false"
      />

      <div class="table-wrapper">
        <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%"
                  controls-position="right"
                  placeholder="0"
              />
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-card>

    <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="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 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>

    <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"
            />
          </el-select>
        </el-form-item>
        <div style="font-weight: bold; margin-bottom: 10px;">子件列表</div>
        <el-table :data="bomForm.children" border style="width:100%; margin-top:10px">
          <el-table-column label="子件物料" width="300">
            <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"
                />
              </el-select>
            </template>
          </el-table-column>
          <el-table-column label="个数" width="150">
            <template #default="{ row }">
              <el-input-number v-model="row.dosage" :min="0" :precision="4" style="width:100%" />
            </template>
          </el-table-column>
          <el-table-column label="操作" width="80">
            <template #default="{ $index }">
              <el-button type="danger" size="small" @click="removeChildRow($index)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div style="margin-top:10px">
          <el-button type="primary" @click="addChildRow">添加子件</el-button>
        </div>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="bomDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="saveBom">保存 BOM</el-button>
        </span>
      </template>
    </el-dialog>

  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from '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 } from 'element-plus'

// --- 类型定义 ---
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;
  available_quantity: number;
  base_id?: number | string;
  [key: string]: any;
}

interface GroupedItem extends StandardStockItem {
  uniqueKey: string;
  itemsDetail: StandardStockItem[];
  export_quantity: number; // 用户输入数量
}

// --- 状态变量 ---
const loading = ref(false)
const printLoading = ref(false)
const exportLoading = ref(false)
const searchKeyword = ref('')
const previewVisible = ref(false)
const currentTime = ref('')

const allStockData = ref<GroupedItem[]>([])
const selectedItems = ref<GroupedItem[]>([])

// BOM 相关
const bomDialogVisible = ref(false)
const materialBaseOptions = ref<any[]>([])
const bomParents = ref<any[]>([])
const selectedParentId = ref<number|null>(null)
const bomChildren = ref<any[]>([])

const bomForm = ref({
  parent_id: null as number | null,
  children: [] as any[]
})

// --- 计算属性 ---
const filteredTableData = computed(() => {
  const keyword = searchKeyword.value.trim().toLowerCase()
  if (!keyword) {
    return allStockData.value
  }
  return allStockData.value.filter(item => {
    const nameMatch = item.name && item.name.toLowerCase().includes(keyword)
    const stdMatch = item.standard && item.standard.toLowerCase().includes(keyword)
    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());
}

// --- 主要方法 ---

const fetchData = async () => {
  loading.value = true
  try {
    const res: any = await getAllStock()
    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', '成品'));

    const groupedMaterials = groupItems(rawMaterials);
    const groupedSemis = groupItems(rawSemis);
    const groupedProducts = groupItems(rawProducts);

    allStockData.value = [...groupedMaterials, ...groupedSemis, ...groupedProducts]
  } catch (error) {
    ElMessage.error('无法获取库存数据')
  } finally {
    loading.value = false
  }
}

const handleSelectionChange = (val: GroupedItem[]) => {
  selectedItems.value = val
}

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 (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
}

// ★★★ 核心打印：浏览器原生打印 (Window.print) ★★★
const confirmPrint = async () => {
  // 1. 关闭预览弹窗，展示底层页面（其中包含隐藏的 #print-area）
  previewVisible.value = false;

  // 2. 为了日志记录，还是异步调一下后端接口 (不阻塞打印)
  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) {}

  // 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('导出文件失败');
  } finally {
    exportLoading.value = false;
  }
}

// --- 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
    } 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 saveBom = async () => {
  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 || ''
    }))
  }
  try {
    const res = await saveBomApi(payload)
    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('网络错误') }
}

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'
    case 'semi': return 'warning'
    case 'product': return 'success'
    default: return ''
  }
}

const onBomParentChange = async (val: number) => {
  selectedParentId.value = val
  if (val) {
    try {
      const res = await getBom(val)
      if (res.code === 200) bomChildren.value = res.data
    } catch (err) {}
  } else { bomChildren.value = [] }
}

onMounted(async () => {
  fetchData()
  try {
    const res = await getBomParents()
    if (res.code === 200) bomParents.value = res.data
  } catch (err) {}
})
</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; 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; }

/* ================= ★★★ 打印专用样式 (CSS 强力隔离) ★★★ ================= */

/* 1. 默认状态：屏幕上隐藏打印区域 */
#print-area { display: none; }

/* 2. 打印状态：隐藏所有非打印内容，独显 #print-area */
@media print {
  /* ★★★ 关键配置：去除浏览器默认页眉页脚 (时间、URL等) ★★★ */
  @page {
    margin: 0; /* 设置页边距为0，这会挤掉浏览器自带的页眉页脚 */
    size: auto;
  }

  /* 隐藏所有内容：Body下的所有直接子元素全部隐藏 */
  body * {
    visibility: hidden;
  }

  /* 隐藏 Element UI 的弹窗层、遮罩层等干扰元素 */
  .el-dialog__wrapper, .v-modal, .el-message, .no-print-content {
    display: none !important;
  }

  /* 显式显示打印区域及其子元素 */
  #print-area, #print-area * {
    visibility: visible;
  }

  /* 将打印区域定位到页面绝对左上角，覆盖所有内容，背景设为白色 */
  #print-area {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    /* ★★★ 因为去掉了默认页边距，这里需要手动增加内边距来模拟A4纸边距 ★★★ */
    padding: 20mm;
    background-color: white;
    display: block !important;
    z-index: 99999; /* 最高层级 */
  }

  /* ================= 打印表格排版优化 (A4 风格) ================= */

  .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>