打印
This commit is contained in:
BinBin Song
parent
487f6294ab
commit
a07f9d6259
@ -6,7 +6,7 @@
|
||||
"private": false,
|
||||
"scripts": {
|
||||
"i": "pnpm install",
|
||||
"dev": "vite --mode base",
|
||||
"dev": "vite --mode dev",
|
||||
"front": "vite --mode front",
|
||||
"ts:check": "vue-tsc --noEmit",
|
||||
"build:pro": "node --max_old_space_size=8192 ./node_modules/vite/bin/vite.js build --mode pro",
|
||||
|
||||
@ -62,14 +62,90 @@
|
||||
</el-card>
|
||||
</el-form>
|
||||
<div class="hl-footer text-center">
|
||||
<el-button @click="isPrint()" type="primary" size="large" >打印</el-button>
|
||||
<el-button @click="isPrint()" type="primary" size="large" :loading="printLoading">打印</el-button>
|
||||
<el-button @click="deleteForm()" type="danger" size="large" >删除</el-button>
|
||||
|
||||
</div>
|
||||
</el-card>
|
||||
|
||||
<!-- 表单弹窗：物料列表 -->
|
||||
<el-dialog v-model="printDialogVisible" width="80%" title="采购单打印" :close-on-click-modal="false">
|
||||
<div id="printArea" class="print-content">
|
||||
<div class="print-header">
|
||||
<div class="order-info">
|
||||
<div style="display: flex;">
|
||||
<span>订单编号：{{ printData.purchaseNo }}</span>
|
||||
<span style="margin-left:20px">订单日期：{{ formatDate(printData.ordDate) }}</span>
|
||||
<span style="margin-left:20px;">供应商：{{ printData.supplierName }}</span>
|
||||
</div>
|
||||
<div style="display: flex;">
|
||||
<span style="margin-left:20px;">联系人：{{ printData.contactName }}</span>
|
||||
<span style="margin-left:20px;">电话：{{ printData.contactMobile }}</span>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<table class="print-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>子项目编号</th>
|
||||
<th>标准件名称</th>
|
||||
<th>物料编码</th>
|
||||
<th>材料</th>
|
||||
<th>实际数量</th>
|
||||
<th>规格型号</th>
|
||||
<th>要求完成日期</th>
|
||||
<th>计划到货日期</th>
|
||||
<th>价格(元)</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="(item, index) in printData.purchaseOrderNoDetailList" :key="index">
|
||||
<td>{{ item.projectSubCode }}</td>
|
||||
<td>{{ item.boomName }}</td>
|
||||
<td>{{ item.matCode }}</td>
|
||||
<td>{{ item.compositionName }}</td>
|
||||
<td>{{ item.purchaseAmount }}</td>
|
||||
<td>{{ item.boomSpec }}</td>
|
||||
<td>{{ formatDate(item.requireTime) }}</td>
|
||||
<td>{{ formatDate(item.arriveTime) }}</td>
|
||||
<td>{{ item.estimatedPrice }}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<div class="order-info" style="margin-top: 10px;border-bottom: 1px solid #ccc;padding-bottom: 10px;">
|
||||
<div style="display: flex;">
|
||||
<span >交货地址：</span>
|
||||
|
||||
</div>
|
||||
<div style="display: flex; padding-right: 15%;">
|
||||
<span style="margin-left:20px;">邮编：</span>
|
||||
<span style="margin-left:20px;">接收人：{{ printData.username }}</span>
|
||||
<span style="margin-left:20px;">电话：{{ printData.userMobile }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="stamp-info" style="display: flex;justify-content: space-between;">
|
||||
|
||||
<div style="display: flex;flex-direction: column;">
|
||||
<span >买方：</span>
|
||||
<span style="margin-top: 20px;">签字/盖章</span>
|
||||
|
||||
</div>
|
||||
<div style="display: flex;flex-direction: column;padding-right: 20%;">
|
||||
<span >卖方：{{ printData.supplierName }}</span>
|
||||
<span style="margin-top: 20px;">签字/盖章</span>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<template #footer>
|
||||
<el-button @click="printDialogVisible = false">关闭</el-button>
|
||||
<el-button type="primary" @click="doPrint">打印</el-button>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { getIntDictOptions, DICT_TYPE } from '@/utils/dict'
|
||||
import * as MaterialPlanApi from '@/api/heli/materialplan'
|
||||
@ -158,11 +234,122 @@ onMounted(async () => {
|
||||
formData.value = await PurchaseOrderNoApi.getPurchaseOrderNo(query.id)
|
||||
getList();
|
||||
})
|
||||
|
||||
|
||||
// 打印弹窗组件
|
||||
const printDialogRef = ref()
|
||||
function formatDate(val) {
|
||||
if (!val) return ''
|
||||
const date = new Date(val)
|
||||
return date.toLocaleDateString()
|
||||
}
|
||||
|
||||
// 打印弹窗内容
|
||||
const printDialogVisible = ref(false)
|
||||
const printData = ref({})
|
||||
|
||||
function openPrintDialog(data) {
|
||||
printData.value = data
|
||||
printDialogVisible.value = true
|
||||
}
|
||||
|
||||
function doPrint() {
|
||||
// 创建新的打印窗口
|
||||
const printContent = document.getElementById('printArea')
|
||||
if (!printContent) return
|
||||
|
||||
const iframe = document.createElement('iframe')
|
||||
iframe.style.position = 'absolute'
|
||||
iframe.style.width = '0'
|
||||
iframe.style.height = '0'
|
||||
iframe.style.border = 'none'
|
||||
document.body.appendChild(iframe)
|
||||
|
||||
const doc = iframe.contentWindow?.document
|
||||
doc?.open()
|
||||
doc?.write(`
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title >采购单</title>
|
||||
<style>
|
||||
body {
|
||||
font-family: Arial, sans-serif;
|
||||
margin: 10px;
|
||||
font-size: 14px;
|
||||
}
|
||||
.print-content {
|
||||
width: 100%;
|
||||
padding-top: 15px;
|
||||
}
|
||||
.order-info {
|
||||
justify-content: space-between;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
|
||||
}
|
||||
|
||||
.stamp-info {
|
||||
margin-top: 10px;
|
||||
|
||||
}
|
||||
.stamp-info span{
|
||||
font-size: 15px !important;
|
||||
|
||||
}
|
||||
.order-info span{
|
||||
font-size: 15px !important;
|
||||
|
||||
}
|
||||
.print-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
margin-top: 10px;
|
||||
}
|
||||
.print-table th, .print-table td {
|
||||
border: 1px solid #ddd;
|
||||
padding: 5px;
|
||||
text-align: center;
|
||||
}
|
||||
.print-table th {
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
@media print {
|
||||
body { margin: 0; }
|
||||
.print-content {
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
padding: 10px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
${printContent.innerHTML}
|
||||
</body>
|
||||
</html>
|
||||
`)
|
||||
doc?.close()
|
||||
|
||||
iframe.onload = () => {
|
||||
iframe.contentWindow?.focus()
|
||||
iframe.contentWindow?.print()
|
||||
setTimeout(() => document.body.removeChild(iframe), 1000)
|
||||
}
|
||||
|
||||
}
|
||||
const printLoading = ref(false)
|
||||
|
||||
const isPrint = async () => {
|
||||
var newVar = await PurchaseOrderNoApi.isPrint(query.id);
|
||||
console.log(newVar)
|
||||
|
||||
|
||||
printLoading.value = true
|
||||
try {
|
||||
var newVar = await PurchaseOrderNoApi.isPrint(query.id)
|
||||
console.log("isPrint", newVar)
|
||||
openPrintDialog(newVar)
|
||||
} finally {
|
||||
printLoading.value = false
|
||||
}
|
||||
}
|
||||
const deleteForm = async () => {
|
||||
await PurchaseOrderNoApi.deleteForm(query.id)
|
||||
@ -181,3 +368,77 @@ const getList = async () => {
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* 打印样式 */
|
||||
@media print {
|
||||
/* 隐藏所有非打印内容 */
|
||||
body * {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
/* 只显示打印区域 */
|
||||
#printArea, #printArea * {
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
/* 打印区域定位 */
|
||||
#printArea {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* 隐藏弹窗相关元素 */
|
||||
.el-dialog, .el-dialog__wrapper, .el-dialog__header, .el-dialog__footer {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
.order-info {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
||||
}
|
||||
|
||||
.order-info span {
|
||||
font-size: 15px !important;
|
||||
margin-right: 10px !important;
|
||||
}
|
||||
.stamp-info {
|
||||
margin-top: 10px;
|
||||
|
||||
}
|
||||
.stamp-info span{
|
||||
font-size: 15px !important;
|
||||
|
||||
}
|
||||
.print-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
margin-top: 10px;
|
||||
border: 1px solid #ccc;
|
||||
}
|
||||
|
||||
.print-table th,
|
||||
.print-table td {
|
||||
border: 1px solid #ccc;
|
||||
padding: 6px 8px;
|
||||
text-align: center;
|
||||
font-size: 13px !important;
|
||||
|
||||
}
|
||||
|
||||
.print-table th {
|
||||
background-color: #f5f7fa;
|
||||
color: #303133;
|
||||
font-weight: 600;
|
||||
font-size: 13px !important;
|
||||
}
|
||||
|
||||
|
||||
|
||||
</style>
|
||||
@ -135,7 +135,7 @@ const onRefresherrefresh = async () => {
|
||||
<view class="statusLabel">{{ item.thingname }}</view>
|
||||
<view
|
||||
class="product-item"
|
||||
style="margin: 0; color: #333; font-size: 22rpx"
|
||||
style="margin: 0; color: #333; font-size: 24rpx"
|
||||
>{{ item.createTime }}</view
|
||||
>
|
||||
</view>
|
||||
@ -231,7 +231,7 @@ const onRefresherrefresh = async () => {
|
||||
.product-item {
|
||||
margin: 20rpx 0;
|
||||
display: flex;
|
||||
font-size: 22rpx;
|
||||
font-size: 28rpx;
|
||||
align-items: center;
|
||||
color: #737d88;
|
||||
.item-value {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user