yangzifeng/shzg_projectManage
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

提交

Browse Source
This commit is contained in:
yangzifeng
2026-01-20 16:56:01 +08:00
commit efdaaadc61
338 changed files with 44003 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

316
src/components/printBill/bill.vue Normal file
View File

@@ -0,0 +1,316 @@
<template>
<div class="print-container">
<div class="header-section">
<div class="main-title">{{ isRuKu ? '物资入库单' : billAllObj[0]?.isChuku == 1 ? '物资出库单' : '物资借料单' }}</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">{{ isRuKu ? billAllObj[0]?.billNo : billAllObj[0]?.billNoCk }}</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">{{ billAllObj[0]?.xmNo }}</td>
</tr>
<tr v-if="!isRuKu">
<td class="label-td">项目描述：</td>
<td class="value-td">{{ 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 v-if="isRuKu">项目编号</th>
<th v-if="isRuKu">项目描述</th>
<th>备注</th>
<th>身份码</th>
<th>供应商</th>
</tr>
</thead>
<tbody>
<tr v-for="item in billAllObj" :key="item.id">
<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">领料人：</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: () => []
},
});
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.billAllObj[0]?.isChuku == 0 || props.billAllObj[0]?.isChuku == 5;
});
// 获取第一条数据作为头部基础信息来源
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());
});
</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>