licq/heli-mes
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

添加采购订单打印

Browse Source
This commit is contained in:
郑庆 2025-10-17 23:47:27 +08:00
parent 52db713a31
commit 6160fda82b
2 changed files with 288 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

65
mes-ui/mes-ui-admin-vue3/src/views/heli/partpurchasecheck/indexs.vue
View File

@ -7,11 +7,13 @@
<!-- 搜索工作栏 -->
<el-form class="-mb-15px" :model="queryParams" ref="queryFormRef" :inline="true" label-width="130px">
<el-form-item label="项目编号" prop="projectCode">
<el-input v-model="queryParams.projectCode" placeholder="请输入项目编号" clearable @keyup.enter="handleQuery"
<el-input
v-model="queryParams.projectCode" placeholder="请输入项目编号" clearable @keyup.enter="handleQuery"
class="!w-240px" />
</el-form-item>
<el-form-item label="项目名称" prop="projectName">
<el-input v-model="queryParams.projectName" placeholder="请输入项目名称" clearable @keyup.enter="handleQuery"
<el-input
v-model="queryParams.projectName" placeholder="请输入项目名称" clearable @keyup.enter="handleQuery"
class="!w-240px" />
</el-form-item>
<el-form-item label="客户简称" prop="brief">
@ -21,11 +23,13 @@
<el-input v-model="queryParams.projectSubName" placeholder="请输入子项目名称" clearable @keyup.enter="handleQuery" class="!w-240px" />
</el-form-item>
<el-form-item label="零件名称" prop="materialName">
<el-input v-model="queryParams.materialName" placeholder="请输入零件名称" clearable @keyup.enter="handleQuery"
<el-input
v-model="queryParams.materialName" placeholder="请输入零件名称" clearable @keyup.enter="handleQuery"
class="!w-240px" />
</el-form-item>
<el-form-item label="图号" prop="blueprintNo">
<el-input v-model="queryParams.blueprintNo" placeholder="请输入图号" clearable @keyup.enter="handleQuery"
<el-input
v-model="queryParams.blueprintNo" placeholder="请输入图号" clearable @keyup.enter="handleQuery"
class="!w-240px" />
</el-form-item>
<el-form-item label="工序" prop="procedureName">
@ -52,7 +56,8 @@
</el-select>
</el-form-item>
<el-form-item label="责任人" prop="ownerName">
<el-input v-model="queryParams.ownerName" placeholder="请输入责任人" clearable @keyup.enter="handleQuery"
<el-input
v-model="queryParams.ownerName" placeholder="请输入责任人" clearable @keyup.enter="handleQuery"
class="!w-240px" />
</el-form-item>
<el-form-item label="送审日期" prop="createTime">
@ -88,6 +93,7 @@
<el-card class="hl-card-info">
<template #header>
<el-button style="margin-left: 20px" @click="approves()" type="success" size="large">全部审核</el-button>
<el-button style="margin-left: 20px" @click="print()" type="success" size="large">打印</el-button>
</template>
<el-row>
<el-col>
@ -132,13 +138,15 @@
</el-table-column>
</el-table>
<!-- 分页 -->
<Pagination :total="total" v-model:page="queryParams.pageNo" v-model:limit="queryParams.pageSize"
<Pagination
:total="total" v-model:page="queryParams.pageNo" v-model:limit="queryParams.pageSize"
@pagination="getList" />
</el-form>
</el-col>
</el-row>
</el-card>
<Form ref="formRef" @success="getList" />
<Print ref="printRef" />
</el-card>
</template>
@ -151,6 +159,8 @@ import {dateFormatter1} from "@/utils/formatTime";
import {ref} from "vue";
import {ElTable, ElTableColumn} from "element-plus";
import dayjs from "dayjs";
import Print from './print.vue'
const printRef = ref()
defineOptions({ name: 'PartPurchaseCheck' })
const router = useRouter()
const message = useMessage() // 消息弹窗
@ -242,7 +252,50 @@ const approves = async () => {
formLoading.value = false;
}
}
const print = async () => {
try{
const list = multipleTable.value|| []; // 安全获取数据
// 1. 检查空数据
if (!list || list.length==null) {
message.error("请选择要打印的采购订单，请确认");
return;
}
formLoading.value = true;
const printData = list.map((item,index)=>({
编号:index+1,
日期:item.createTime,
客户名: item.brief,
模具名: item.projectSubCode,
件号: item.blueprintNo,
零件名称: item.boomName,
材料: item.composition,
规格: item.boomSpec,
数量: item.purchaseAmount,
单价: item.unitPrice,
总价格: item.estimatedPrice,
要求日期: item.requireTime,
合立经手人: item.duEmpName,
}))
console.log(JSON.parse(JSON.stringify(printData)))
//校验责任人必须是同一人
const duEmpNames = printData.map(item => item.合立经手人);
const uniqueDuEmpNames = new Set(duEmpNames);
if (uniqueDuEmpNames.size !== 1) {
message.error("合立经手人必须是同一人，请确认");
return;
}
const printDataStr = JSON.parse(JSON.stringify(printData));
// 生成打印模板 顺序分别为 编号 日期 客户名 模具名 件号 零件名称 材料 规格 数量 单价 总价格 要求日期
// 将其放在table中 调用打印
printRef.value.open(printDataStr)
} catch (error) {
console.error("打印失败:", error);
} finally {
formLoading.value = false;
}
}
/** 添加/修改操作 */
const formRef = ref()
const openForm = (id?: number) => {

229
mes-ui/mes-ui-admin-vue3/src/views/heli/partpurchasecheck/print.vue Normal file
View File

@ -0,0 +1,229 @@
<template>
<el-dialog v-model="dialogVisible" title="" width="900px" append-to-body>
<div class="print-wrap">
<div class="header header-grid">
<div class="cell company">杭州合立模具有限公司</div>
<div class="cell title">委外加工清单及送货单</div>
<div class="cell audit">审核：</div>
<div class="cell handler">委外加工经手人：</div>
<div class="cell receiver">收货人：</div>
</div>
<table class="sheet" border="1" cellspacing="0" cellpadding="0">
<!-- 固定列宽，总计 100% -->
<colgroup>
<col style="width: 4%" />
<col style="width: 8%" />
<col style="width: 9%" />
<col style="width: 11%" />
<col style="width: 9%" />
<col style="width: 14%" />
<col style="width: 6%" />
<col style="width: 12%" />
<col style="width: 6%" />
<col style="width: 6%" />
<col style="width: 7%" />
<col style="width: 8%" />
</colgroup>
<thead>
<tr>
<th>编号</th>
<th>日期</th>
<th>客户名</th>
<th>模具名</th>
<th>件号</th>
<th>零件名称</th>
<th>材料</th>
<th>规格</th>
<th>数量</th>
<th>单价</th>
<th>总价格</th>
<th>要求日期</th>
</tr>
</thead>
<tbody>
<tr v-for="row in rows" :key="row['编号']">
<td>{{ row['编号'] }}</td>
<td>{{ fmtDate(row['日期']) }}</td>
<td class="text-left">{{ row['客户名'] }}</td>
<td class="text-left">{{ row['模具名'] }}</td>
<td class="text-left">{{ row['件号'] }}</td>
<td class="text-left">{{ row['零件名称'] }}</td>
<td>{{ row['材料'] }}</td>
<td class="spec text-left">{{ row['规格'] }}</td>
<td class="num">{{ row['数量'] }}</td>
<td class="num">{{ row['单价'] }}</td>
<td class="num">{{ row['总价格'] }}</td>
<td>{{ fmtDate(row['要求日期']) }}</td>
</tr>
</tbody>
<tfoot>
<tr class="sum-row">
<td colspan="8" class="sum-label">合计</td>
<td class="num sum-value">{{ sumQuantity }}</td>
<td></td>
<td class="num sum-value">{{ sumTotal }}</td>
<td></td>
</tr>
</tfoot>
</table>
<div class="footer-sign sign-row">
<div>合立经手人：{{ duEmpName }}</div>
<div>审核人：</div>
<div>委外加工经手人：</div>
</div>
</div>
<template #footer>
<el-button @click="dialogVisible = false">关闭</el-button>
<el-button type="primary" @click="onPrint">打印</el-button>
</template>
</el-dialog>
</template>
<script setup lang="ts">
import { ref, computed } from 'vue'
import dayjs from 'dayjs'
const dialogVisible = ref(false)
const rows = ref<Record<string, any>[]>([])
const nowDate = dayjs().format('YYYY-MM-DD')
const duEmpName = computed(() => (rows.value[0] ? rows.value[0]['合立经手人'] ?? '' : ''))
const sumQuantity = computed(() =>
rows.value.reduce((acc, cur) => acc + Number(cur['数量'] || 0), 0)
)
const sumTotal = computed(() =>
rows.value.reduce((acc, cur) => acc + Number(cur['总价格'] || 0), 0)
)
const fmtDate = (v: any) => (v ? dayjs(v).format('YYYY-MM-DD') : '')
const open = (data: Record<string, any>[]) => {
rows.value = Array.isArray(data) ? data : []
dialogVisible.value = true
}
defineExpose({ open })
// onPrint()
const onPrint = () => {
const printNode = document.querySelector('.print-wrap') as HTMLElement
if (!printNode) return
const iframe = document.createElement('iframe')
iframe.setAttribute('style', 'width:0;height:0;position:absolute;left:-9999px;top:-9999px;')
document.body.appendChild(iframe)
const doc = iframe.contentWindow!.document
doc.open()
doc.title = ''
doc.write(`
<style>
/* 自定义纸张尺寸：222mm 宽 × 140mm 高 */
@page { size: 222mm 140mm; margin: 6mm; }
body { font-family: Arial, "Microsoft YaHei", sans-serif; color:#000; }
/* 打印区域尺寸以纸张减去页边距为准 */
.print-wrap { width: calc(222mm - 12mm); min-height: calc(140mm - 12mm); }
.header.header-grid {
display: grid;
grid-template-columns: 2fr 1fr 1fr 2fr 1fr;
align-items: center;
column-gap: 12px;
margin-bottom: 8px;
}
.header.header-grid .company { font-size: 12px; text-align: left; }
.header.header-grid .title,
.header.header-grid .audit,
.header.header-grid .handler,
.header.header-grid .receiver { font-size: 12px; text-align: right; }
.sheet { width:100%; border-collapse:collapse; font-size:12px; table-layout: fixed; }
.sheet th, .sheet td { border:1px solid #333; padding:6px 4px; text-align:center; line-height:1.3; vertical-align: middle; }
.sheet thead th { background:#f5f7fa; font-weight:600; }
.sheet .text-left { text-align:left; padding-left:6px; }
.sheet .spec { word-break: break-word; white-space: normal; }
.sheet .num { text-align:right; padding-right:6px; }
.sheet tfoot .sum-label, .sheet tfoot .sum-value { font-weight:700; }
.sheet tfoot .sum-row td { border-top: 2px solid #000; }
.sign-row { display:flex; justify-content:space-between; margin-top:12px; font-size:12px; }
</style>
`)
doc.write(printNode.outerHTML)
doc.close()
iframe.contentWindow!.focus()
iframe.contentWindow!.print()
setTimeout(() => document.body.removeChild(iframe), 500)
}
</script>
<style scoped lang="less">
.print-wrap {
/* 预览时也按目标纸张尺寸展示，便于校对 */
width: 222mm;
min-height: 140mm;
background: #fff;
}
.header.header-grid {
display: grid;
grid-template-columns: 2fr 1fr 1fr 2fr 1fr;
align-items: center;
column-gap: 12px;
}
.header.header-grid .company {
}
.header.header-grid .title {
text-align: center;
}
.header.header-grid .audit,
.header.header-grid .handler,
.header.header-grid .receiver {
font-size: 12px;
text-align: right;
}
.sheet {
margin-top: 8px;
table-layout: fixed;
border-collapse: collapse;
font-size: 12px;
width: 100%;
th,
td {
border: 1px solid #333;
padding: 6px 4px;
text-align: center;
line-height: 1.3;
vertical-align: middle;
}
thead th {
background: #f5f7fa;
font-weight: 600;
}
.text-left {
text-align: left;
padding-left: 6px;
}
.spec {
word-break: break-word;
white-space: normal;
}
.num {
text-align: right;
padding-right: 6px;
}
tfoot .sum-row td {
border-top: 2px solid #000;
}
}
.footer-sign.sign-row {
display: flex;
justify-content: space-between;
margin-top: 12px;
}
</style>