shzg_projectManage/src/components/printBill/bill.vue

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

    <div class="header-section">
      <div class="main-title">{{ isRuKu ? '物资入库单' : billAllObj[0]?.bizType == 1 ? '物资出库单' : billAllObj[0]?.bizType == 2 ? '物资借料单' : '物资还料单' }}</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">{{ billAllObj[0]?.operationTypeName }}</td>
            <td class="label-td">{{isRuKu ? '入库日期：' : '出库日期：'}}</td>
            <td class="value-td">{{ parseTime(billAllObj[0]?.operationTime, '{y}-{m}-{d} {h}:{i}:{s}') }}</td>
          </tr>
          <tr>
            <td class="label-td">单据号：</td>
            <td class="value-td">{{ billAllObj[0]?.billNo }}</td>
            <td class="label-td" v-if="isRuKu">供应商名称：</td>
            <td class="value-td" v-if="isRuKu">{{ billAllObj[0]?.gysMc }}</td>
            <td class="label-td" v-if="!isRuKu">施工队：</td>
            <td class="value-td" v-if="!isRuKu">{{ billAllObj[0]?.teamName }}</td>
          </tr>
          <tr v-if="!isRuKu">
            <td class="label-td">项目编号：</td>
            <td class="value-td" colspan="3">{{ billAllObj[0]?.xmNo }}</td>
          </tr>
          <tr v-if="!isRuKu">
            <td class="label-td">项目描述：</td>
            <td class="value-td" colspan="3">{{ billAllObj[0]?.bizType == 1 ? xmMs  : billAllObj[0]?.xmMs }}</td>
          </tr>
          <!-- 如需显示合计项数量，可加在这里，或者保留在下方 -->
        </tbody>
      </table>
    </div>

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

    <!-- 表格一：汇总表 -->
    <div class="table-section">
      <table border="1" style="width: 100%; border-collapse: collapse; font-size: 12px;">
        <thead>
          <tr>
            <th>序号</th>
            <th>物料号</th>
            <th>物料描述</th>
            <th>总数量</th>
            <th>计量单位</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(item, index) in summaryList" :key="index">
            <td style="text-align: center;">{{ index + 1 }}</td>
            <td style="text-align: center;">{{ item.wlNo }}</td>
            <td style="text-align: center;">{{ item.wlMs }}</td>
            <td style="text-align: center;">{{ item.totalQty }}</td>
            <td style="text-align: center;">{{ item.dw }}</td>
          </tr>
        </tbody>
      </table>
    </div>

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

    <!-- 表格二：明细表 -->
    <div class="table-section">
      <table border="1" style="width: 100%; border-collapse: collapse; font-size: 12px;">
        <thead>
          <tr>
            <th>序号</th>
            <th>物料号</th>
            <th>物料描述</th>
            <th>计量单位</th>
            <th>数量</th>
            <th>库位码</th>
            <th>订单编号</th>
            <th v-if="isRuKu">项目编号</th>
            <th v-if="isRuKu">项目描述</th>
            <th>备注</th>
            <th>身份码</th>
            <th>供应商</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(item, index) in billAllObj" :key="item.id">
            <td style="text-align: center;">{{ index + 1 }}</td>
            <td style="text-align: center;">{{ item.wlNo }}</td>
            <td style="text-align: center;">{{ item.wlMs }}</td>
            <td style="text-align: center;">{{ item.dw }}</td>
            <td style="text-align: center;">{{ item.realQty }}</td>
            <td style="text-align: center;">{{ item.pcode }}</td>
            <td style="text-align: center;">{{ item.sapNo }}</td>
            <td v-if="isRuKu" style="text-align: center;">{{ item.xmNo }}</td>
            <td v-if="isRuKu" style="text-align: center;">{{ item.xmMs }}</td>
            <td style="text-align: center;">{{ item.remark }}</td>
            <td style="text-align: center;">{{ item.entityId }}</td>
            <td style="text-align: center;">{{ item.gysMc }}</td>
          </tr>
        </tbody>
      </table>
    </div>

    <!-- 底部签字栏 -->
    <div class="footer-sign-area">
      <div class="sign-item">制单人：唐山公司</div>
      <div class="sign-item">理货员：</div>
      <div class="sign-item">仓库主管审核：</div>
      <div class="sign-item" v-if="!isRuKu">{{ billAllObj[0]?.bizType == 3 ? '还料人：' : '领料人：' }}</div>
    </div>
    <div class="footer-sign-area" style="margin-top: 5px;">
      <div class="sign-item">打印时间：{{ parseTime(new Date().getTime(), '{y}-{m}-{d} {h}:{i}:{s}') }}</div>
    </div>

  </div>
</template>

<script setup>
import { computed, ref } from "vue";
const props = defineProps({
  billAllObj: {
    type: Array,
    default: () => []
  },
});


const isRuKu = computed(() => {
  return props.billAllObj[0]?.bizType == 0;
});

// 获取不同的项目描述
const xmMs = computed(() => {
  const validXmMsValues = props.billAllObj
    .map(item => item.xmMs) // 提取所有 xmMs 属性值
    .filter(value => !!value); // 过滤掉 null/undefined/空字符串等假值
  // 3. 去重：得到所有不同的 xmMs 值
  const uniqueXmMs = [...new Set(validXmMsValues)];
  // 4. 核心逻辑：多个值用 + 拼接，单个值直接返回，无值返回空字符串
  return uniqueXmMs.length > 1 ? uniqueXmMs.join('、') : uniqueXmMs[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);
      const total =  (parseFloat(existing.totalQty) + parseFloat(item.realQty)) * 100*10000
      existing.totalQty = total / ( 100 * 10000);
    } else {
      map.set(item.wlNo, {
        ...item,
        totalQty: parseFloat(item.realQty || 0)
      });
    }
  });
  return Array.from(map.values());
});

</script>

<style scoped lang="scss">
/* 全局打印容器 */
.print-container {
  font-family: "SimSun", "Songti SC", serif; /* 宋体 */
  color: #000;
  background: #fff;
  max-width: 1000px;
  padding: 0px 2px;
  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;
  .td{
    text-align: center;
  }
}

/* 深度选择器：强制覆盖 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>