shzg_projectManage/src/components/storageBill/bill.vue

<template>
  <div class="print-container">

    <div class="header-section">
      <div class="main-title">{{ isRuKu ? '物资入库单' : '物资出库单' }}</div>
    </div>

    <!-- 修改点：将原来的文本列表改为 表格形式 的基础信息 -->
    <div class="info-table-section">
      <table class="base-info-table" style="table-layout: fixed">
        <tbody>
          <tr>
            <td class="label-td">{{isRuKu ? '入库类型' : '出库类型'}}</td>
            <td class="value-td">{{ isRuKu ? billAllObj[0]?.rkTypeName : billAllObj[0]?.ckTypeName }}</td>
            <td class="label-td">{{isRuKu ? '入库日期' : '出库日期'}}</td>
            <td class="value-td">{{ isRuKu ? parseTime(billAllObj[0]?.rkTime, '{y}-{m}-{d} {h}:{i}:{s}') : parseTime(billAllObj[0]?.lyTime, '{y}-{m}-{d} {h}:{i}:{s}') }}</td>
          </tr>
          <tr>
            <td class="label-td">订单编号</td>
            <td class="value-td">{{ billAllObj[0]?.sapNo }}</td>
            <td class="label-td">供应商名称</td>
            <td class="value-td">{{ billAllObj[0]?.gysMc }}</td>
          </tr>
          <tr>
            <td class="label-td">所属大库</td>
            <td class="value-td">{{ billAllObj[0]?.parentWarehouseName }}</td>
            <td class="label-td">所属小库</td>
            <td class="value-td">{{ billAllObj[0]?.warehouseName }}</td>
          </tr>
          <!-- 如需显示合计项数量，可加在这里，或者保留在下方 -->
        </tbody>
      </table>
    </div>

    <!-- 汇总表上方的提示 -->
    <div class="sub-label-row">
      <span>合计项：{{ summaryList.length }}</span>
    </div>

    <!-- 表格一：汇总表 -->
    <div class="table-section">
      <el-table 
        :data="summaryList" 
        border 
        class="custom-print-table" 
        :header-cell-style="tableHeaderStyle"
        :cell-style="tableCellStyle"
      >
        <el-table-column type="index" label="序号" align="center" width="50" />
        <el-table-column prop="wlNo" label="物料编码" align="center" width="120" />
        <el-table-column prop="wlMs" label="物料描述" align="center" min-width="200">
           <template #default="scope">
             <div class="wrap-text">{{ scope.row.wlMs }}</div>
           </template>
        </el-table-column>
        <el-table-column prop="dw" label="计量单位" align="center" width="80" />
        <el-table-column prop="totalQty" label="总数量" align="center" width="100" />
      </el-table>
    </div>

    <!-- 明细标识 -->
    <div class="sub-label-row mt-10">明细：</div>

    <!-- 表格二：明细表 -->
    <div class="table-section">
      <el-table 
        :data="billAllObj" 
        border 
        class="custom-print-table"
        :header-cell-style="tableHeaderStyle"
        :cell-style="tableCellStyle"
      >
        <el-table-column type="index" label="序号" align="center" width="50" />
        <el-table-column label="库存状态" align="center" width="100">
          <template #default="scope">
            <span>{{ isChukuFun(scope.row.isChuku)  }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="wlNo" label="物料编码" align="center" width="100" />
        <el-table-column prop="wlMs" label="物料描述" align="center" min-width="180" />
        <el-table-column prop="dw" label="计量单位" align="center" width="60" />
        <el-table-column prop="realQty" label="数量" align="center" width="80" />
        <el-table-column prop="pcode" label="库位码" align="center" width="100" />
        <el-table-column prop="sapNo" label="订单编号" align="center" width="100" />
        <el-table-column label="项目号" align="center" prop="xmNo" width="150"/>
        <el-table-column label="项目描述" align="center" prop="xmMs" width="250"/>
        <el-table-column label="合同单价" align="center" prop="htDj" />
        <el-table-column label="供应商名称" align="center" prop="gysMc" width="200"/>
        <el-table-column label="托盘码" align="center" prop="trayCode" />
        <el-table-column prop="entityId" label="身份码" align="center" width="100" />
        <el-table-column prop="remark" label="备注" align="center" width="150" />
      </el-table>
    </div>

    <!-- 底部签字栏 -->
    <div class="footer-sign-area">
      <div class="sign-item">理货员：{{ billAllObj[0]?.lihuoYName }}</div>
    </div>
  </div>
</template>

<script setup>
import { computed, ref } from "vue";
import dayjs from "dayjs"; 

const props = defineProps({
  billAllObj: {
    type: Array,
    default: () => []
  },
  billStatus: {
    type: String,
    default: 'rk'
  },
});

function isChukuFun(isChuku){
  // scope.row.isChuku==0?"已入库":(scope.row.isChuku==1?"已出库":"审批中")
  if(isChuku == 0){
    return "已入库"
  } else if(isChuku == 1){
    return "已出库"
  }else if(isChuku == 3){
    return "借料出库"
  }else if(isChuku == 2){
    return "审批中"
  }else if(isChuku == 4){
    return "入库撤销"
  }else if(isChuku == 5){
    return "出库撤销"
  }
}

const isRuKu = computed(() => {
  return props.billStatus === 'rk';
});

// 获取第一条数据作为头部基础信息来源
const header = computed(() => (props.billAllObj && props.billAllObj.length > 0 ? props.billAllObj[0] : {}));

// 汇总逻辑
const summaryList = computed(() => {
  if (!props.billAllObj || props.billAllObj.length === 0) return [];
  const map = new Map();
  props.billAllObj.forEach(item => {
    if (map.has(item.wlNo)) {
      const existing = map.get(item.wlNo);
      existing.totalQty = (parseFloat(existing.totalQty) + parseFloat(item.realQty));
    } else {
      map.set(item.wlNo, {
        ...item,
        totalQty: parseFloat(item.realQty || 0)
      });
    }
  });
  return Array.from(map.values());
});

const formatDate = (dateStr) => {
  if (!dateStr) return '';
  return dayjs(dateStr).format('YYYY-MM-DD');
};

// 表格样式配置
const tableHeaderStyle = {
  backgroundColor: '#e6e6e6', 
  color: '#000',
  fontWeight: 'bold',
  borderColor: '#000',
  fontSize: '12px',
  padding: '4px 0'
};

const tableCellStyle = {
  borderColor: '#000',
  color: '#000',
  fontSize: '12px',
  padding: '4px 0'
};
</script>

<style scoped>
/* 全局打印容器 */
.print-container {
  font-family: "SimSun", "Songti SC", serif; /* 宋体 */
  color: #000;
  background: #fff;
  padding: 20px 40px;
  max-width: 1000px;
  margin: 0 auto;
  border: #000  1px solid;
}

/* 顶部小字 */
.top-meta-row {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  margin-bottom: 5px;
}

/* 头部 Header */
.header-section {
  position: relative;
  height: 60px; /* 稍微调低高度 */
  margin-bottom: 15px;
}
.barcode-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 200px;
}
.barcode-img {
  display: flex;
  align-items: flex-end;
  height: 35px;
  overflow: hidden;
  margin-bottom: 2px;
}
.barcode-img .bar {
  background-color: #000;
  height: 100%;
}
.barcode-text {
  font-size: 12px;
  letter-spacing: 1px;
}
.main-title {
  text-align: center;
  font-size: 24px;
  font-weight: bold;
  line-height: 60px;
  letter-spacing: 4px;
  transform: translateX(30px);
}

/* --- 新增：头部基础信息表格样式 --- */
.info-table-section {
  margin-bottom: 10px;
}
.base-info-table {
  width: 100%;
  border-collapse: collapse; /* 合并边框 */
  font-size: 13px;
}
.base-info-table td {
  border: 1px solid #000; /* 黑色细边框 */
  padding: 6px 8px;
  line-height: 1.4;
}
.label-td {
  width: 110px;
  background-color: #f2f2f2; /* 稍微带点底色区分表头 */
  font-weight: bold;
  text-align: center;
}
.value-td {
  text-align: left;
}
/* --- 结束 --- */

/* 小标题行 (合计项、明细) */
.sub-label-row {
  font-size: 13px;
  font-weight: bold;
  margin-bottom: 4px;
}
.mt-10 {
  margin-top: 10px;
}

/* 表格通用修正 */
.table-section {
  margin-bottom: 5px;
}

/* 深度选择器：强制覆盖 Element 表格边框颜色为纯黑 */
:deep(.el-table--border) {
  border: 1px solid #000 !important;
}
:deep(.el-table--border .el-table__cell) {
  border-right: 1px solid #000 !important;
  border-bottom: 1px solid #000 !important;
}
:deep(.el-table__header-wrapper), :deep(.el-table__body-wrapper) {
  border-bottom: 0;
}
:deep(.el-table) {
  --el-table-border-color: #000;
  --el-table-header-bg-color: #e6e6e6;
  color: #000;
}

/* 文本换行 */
.wrap-text {
  white-space: pre-wrap;
  line-height: 1.2;
}
.project-info {
  white-space: pre-wrap;
  word-break: break-all;
  line-height: 1.2;
  font-size: 11px;
}

/* 底部签字区 */
.footer-sign-area {
  display: flex;
  margin-top: 20px;
  font-size: 14px;
  font-weight: bold;
}
.sign-item {
  flex: 1;
}
.center-sign {
  display: flex;
  flex-direction: column;
}
</style>