提交
This commit is contained in:
321
src/components/storageBill/bill.vue
Normal file
321
src/components/storageBill/bill.vue
Normal file
@@ -0,0 +1,321 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user