312 lines
8.8 KiB
Vue
312 lines
8.8 KiB
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> |