321 lines
8.7 KiB
Vue
321 lines
8.7 KiB
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]?.operationTypeName : billAllObj[0]?.ckTypeName }}</td>
|
||
<td class="label-td">{{isRuKu ? '入库日期' : '出库日期'}}</td>
|
||
<td class="value-td">{{ isRuKu ? parseTime(billAllObj[0]?.operationTime, '{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> |