yavii/mom-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

采购订单、采购入库、销售订单、销售出库添加打印功能

Browse Source
This commit is contained in:
如初
2026-03-14 14:13:35 +08:00
parent 44e2e40e24
commit 30570713bf
4 changed files with 653 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

163
src/views/erp/purchase/in/PurchaseInForm.vue
View File

@@ -71,6 +71,9 @@
</el-form>
<template #footer>
<el-button @click="submitForm" type="primary" :disabled="formLoading" v-if="!disabled">确 定</el-button>
<el-button @click="handlePrint" type="warning">
<Icon icon="ep:printer" class="mr-5px" /> 打 印
</el-button>
<el-button @click="dialogVisible = false">取 消</el-button>
</template>
</Dialog>
@@ -292,6 +295,166 @@ const resetForm = () => {
}
formRef.value?.resetFields()
}
/** 打印当前页面数据 */
const handlePrint = () => {
// 获取供应商名称
const supplier = supplierList.value.find((item) => item.id === formData.value.supplierId)
const supplierName = supplier ? supplier.name : ''
// 获取结算账户名称
const account = accountList.value.find((item) => item.id === formData.value.accountId)
const accountName = account ? account.name : ''
// 格式化入库时间
const inTime = formData.value.inTime
? new Date(formData.value.inTime).toLocaleDateString('zh-CN')
: ''
// 构建产品清单表格
let itemsTableHtml = ''
if (formData.value.items && formData.value.items.length > 0) {
// 计算合计
const totalCount = formData.value.items.reduce((sum, item) => sum + (item.count || 0), 0)
const totalProductPrice = formData.value.items.reduce((sum, item) => sum + (item.totalProductPrice || 0), 0)
const totalTaxPrice = formData.value.items.reduce((sum, item) => sum + (item.taxPrice || 0), 0)
const totalPriceSum = formData.value.items.reduce((sum, item) => sum + (item.totalPrice || 0), 0)
itemsTableHtml = `
<table border="1" cellpadding="6" cellspacing="0" style="width:100%; border-collapse: collapse; margin-top: 10px; font-size: 12px;">
<thead>
<tr style="background-color: #f5f5f5;">
<th>序号</th>
<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>
${formData.value.items
.map(
(item, index) => `
<tr>
<td style="text-align: center;">${index + 1}</td>
<td>${item.productName || ''}</td>
<td>${item.productCategoryName || ''}</td>
<td style="text-align: right;">${item.stockCount || 0}</td>
<td>${item.productBarCode || ''}</td>
<td style="text-align: center;">${item.productUnitName || ''}</td>
<td style="text-align: right;">${item.count || 0}</td>
<td style="text-align: right;">${item.productPrice || 0}</td>
<td style="text-align: right;">${item.totalProductPrice || 0}</td>
<td style="text-align: right;">${item.taxPercent || 0}</td>
<td style="text-align: right;">${item.taxPrice || 0}</td>
<td style="text-align: right;">${item.totalPrice || 0}</td>
<td>${item.remark || ''}</td>
</tr>
`
)
.join('')}
</tbody>
<tfoot>
<tr style="background-color: #f9f9f9; font-weight: bold;">
<td style="text-align: center;">合计</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td style="text-align: right;">${totalCount}</td>
<td></td>
<td style="text-align: right;">${totalProductPrice}</td>
<td></td>
<td style="text-align: right;">${totalTaxPrice}</td>
<td style="text-align: right;">${totalPriceSum}</td>
<td></td>
</tr>
</tfoot>
</table>
`
}
// 构建打印内容
const printContent = `
<html>
<head>
<title>采购入库单打印</title>
<style>
body { font-family: 'Microsoft YaHei', Arial, sans-serif; padding: 20px; }
h1 { text-align: center; margin-bottom: 20px; }
.info-row { display: flex; flex-wrap: wrap; margin-bottom: 10px; }
.info-item { width: 33%; margin-bottom: 10px; }
.info-label { font-weight: bold; color: #666; }
.info-value { margin-left: 10px; }
.section-title { font-size: 16px; font-weight: bold; margin: 20px 0 10px; border-bottom: 1px solid #ddd; padding-bottom: 5px; }
table { font-size: 14px; }
th, td { padding: 8px; text-align: left; }
@media print {
body { padding: 0; }
}
</style>
</head>
<body>
<h1>采购入库单</h1>
<div class="info-row">
<div class="info-item"><span class="info-label">入库单号:</span><span class="info-value">${formData.value.no || '(保存后生成)'}</span></div>
<div class="info-item"><span class="info-label">入库时间:</span><span class="info-value">${inTime}</span></div>
<div class="info-item"><span class="info-label">关联订单:</span><span class="info-value">${formData.value.orderNo || ''}</span></div>
<div class="info-item"><span class="info-label">供应商:</span><span class="info-value">${supplierName}</span></div>
<div class="info-item"><span class="info-label">结算账户:</span><span class="info-value">${accountName}</span></div>
</div>
<div class="info-row">
<div class="info-item" style="width: 100%;"><span class="info-label">备注:</span><span class="info-value">${formData.value.remark || ''}</span></div>
</div>
<div class="section-title">入库产品清单</div>
${itemsTableHtml}
<div class="info-row" style="margin-top: 20px;">
<div class="info-item"><span class="info-label">优惠率(%):</span><span class="info-value">${formData.value.discountPercent || 0}</span></div>
<div class="info-item"><span class="info-label">付款优惠:</span><span class="info-value">${formData.value.discountPrice || 0}</span></div>
<div class="info-item"><span class="info-label">优惠后金额:</span><span class="info-value">${(formData.value.totalPrice || 0) - (formData.value.otherPrice || 0)}</span></div>
<div class="info-item"><span class="info-label">其它费用:</span><span class="info-value">${formData.value.otherPrice || 0}</span></div>
<div class="info-item"><span class="info-label">应付金额:</span><span class="info-value">${formData.value.totalPrice || 0}</span></div>
</div>
</body>
</html>
`
// 使用iframe打印，避免被浏览器拦截
const iframe = document.createElement('iframe')
iframe.style.position = 'absolute'
iframe.style.width = '0'
iframe.style.height = '0'
iframe.style.border = 'none'
iframe.style.left = '-9999px'
document.body.appendChild(iframe)
const iframeDoc = iframe.contentWindow?.document
if (iframeDoc) {
iframeDoc.open()
iframeDoc.write(printContent)
iframeDoc.close()
// 等待内容加载完成后打印
iframe.contentWindow?.focus()
setTimeout(() => {
iframe.contentWindow?.print()
// 打印完成后移除iframe
setTimeout(() => {
document.body.removeChild(iframe)
}, 1000)
}, 250)
}
}
</script>
<style lang="scss" scoped>

158
src/views/erp/purchase/order/PurchaseOrderForm.vue
View File

@@ -58,6 +58,9 @@
</el-form>
<template #footer>
<el-button @click="submitForm" type="primary" :disabled="formLoading" v-if="!disabled">确 定</el-button>
<el-button @click="handlePrint" type="warning">
<Icon icon="ep:printer" class="mr-5px" /> 打 印
</el-button>
<el-button @click="dialogVisible = false">取 消</el-button>
</template>
</Dialog>
@@ -307,6 +310,161 @@ const resetForm = () => {
formRef.value?.resetFields()
}
/** 打印当前页面数据 */
const handlePrint = () => {
// 获取供应商名称
const supplier = supplierList.value.find((item) => item.id === formData.value.supplierId)
const supplierName = supplier ? supplier.name : ''
// 获取结算账户名称
const account = accountList.value.find((item) => item.id === formData.value.accountId)
const accountName = account ? account.name : ''
// 格式化订单时间
const orderTime = formData.value.orderTime
? new Date(formData.value.orderTime).toLocaleDateString('zh-CN')
: ''
// 构建产品清单表格
let itemsTableHtml = ''
if (formData.value.items && formData.value.items.length > 0) {
// 计算合计
const totalCount = formData.value.items.reduce((sum, item) => sum + (item.count || 0), 0)
const totalProductPrice = formData.value.items.reduce((sum, item) => sum + (item.totalProductPrice || 0), 0)
const totalTaxPrice = formData.value.items.reduce((sum, item) => sum + (item.taxPrice || 0), 0)
const totalPriceSum = formData.value.items.reduce((sum, item) => sum + (item.totalPrice || 0), 0)
itemsTableHtml = `
<table border="1" cellpadding="6" cellspacing="0" style="width:100%; border-collapse: collapse; margin-top: 10px; font-size: 12px;">
<thead>
<tr style="background-color: #f5f5f5;">
<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>
${formData.value.items
.map(
(item, index) => `
<tr>
<td style="text-align: center;">${index + 1}</td>
<td>${item.productName || ''}</td>
<td style="text-align: right;">${item.stockCount || 0}</td>
<td>${item.productBarCode || ''}</td>
<td style="text-align: center;">${item.productUnitName || ''}</td>
<td style="text-align: right;">${item.count || 0}</td>
<td style="text-align: right;">${item.productPrice || 0}</td>
<td style="text-align: right;">${item.totalProductPrice || 0}</td>
<td style="text-align: right;">${item.taxPercent || 0}</td>
<td style="text-align: right;">${item.taxPrice || 0}</td>
<td style="text-align: right;">${item.totalPrice || 0}</td>
<td>${item.remark || ''}</td>
</tr>
`
)
.join('')}
</tbody>
<tfoot>
<tr style="background-color: #f9f9f9; font-weight: bold;">
<td style="text-align: center;">合计</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td style="text-align: right;">${totalCount}</td>
<td></td>
<td style="text-align: right;">${totalProductPrice}</td>
<td></td>
<td style="text-align: right;">${totalTaxPrice}</td>
<td style="text-align: right;">${totalPriceSum}</td>
<td></td>
</tr>
</tfoot>
</table>
`
}
// 构建打印内容
const printContent = `
<html>
<head>
<title>采购订单打印</title>
<style>
body { font-family: 'Microsoft YaHei', Arial, sans-serif; padding: 20px; }
h1 { text-align: center; margin-bottom: 20px; }
.info-row { display: flex; flex-wrap: wrap; margin-bottom: 10px; }
.info-item { width: 33%; margin-bottom: 10px; }
.info-label { font-weight: bold; color: #666; }
.info-value { margin-left: 10px; }
.section-title { font-size: 16px; font-weight: bold; margin: 20px 0 10px; border-bottom: 1px solid #ddd; padding-bottom: 5px; }
table { font-size: 14px; }
th, td { padding: 8px; text-align: left; }
@media print {
body { padding: 0; }
}
</style>
</head>
<body>
<h1>采购订单</h1>
<div class="info-row">
<div class="info-item"><span class="info-label">订单单号:</span><span class="info-value">${formData.value.no || '(保存后生成)'}</span></div>
<div class="info-item"><span class="info-label">订单时间:</span><span class="info-value">${orderTime}</span></div>
<div class="info-item"><span class="info-label">关联请购单:</span><span class="info-value">${formData.value.purchaseRequisitionNo || ''}</span></div>
<div class="info-item"><span class="info-label">供应商:</span><span class="info-value">${supplierName}</span></div>
<div class="info-item"><span class="info-label">结算账户:</span><span class="info-value">${accountName}</span></div>
<div class="info-item"><span class="info-label">支付订金:</span><span class="info-value">${formData.value.depositPrice || 0}</span></div>
</div>
<div class="info-row">
<div class="info-item" style="width: 100%;"><span class="info-label">备注:</span><span class="info-value">${formData.value.remark || ''}</span></div>
</div>
<div class="section-title">订单产品清单</div>
${itemsTableHtml}
<div class="info-row" style="margin-top: 20px;">
<div class="info-item"><span class="info-label">优惠率(%):</span><span class="info-value">${formData.value.discountPercent || 0}</span></div>
<div class="info-item"><span class="info-label">付款优惠:</span><span class="info-value">${formData.value.discountPrice || 0}</span></div>
<div class="info-item"><span class="info-label">优惠后金额:</span><span class="info-value">${formData.value.totalPrice || 0}</span></div>
</div>
</body>
</html>
`
// 使用iframe打印，避免被浏览器拦截
const iframe = document.createElement('iframe')
iframe.style.position = 'absolute'
iframe.style.width = '0'
iframe.style.height = '0'
iframe.style.border = 'none'
iframe.style.left = '-9999px'
document.body.appendChild(iframe)
const iframeDoc = iframe.contentWindow?.document
if (iframeDoc) {
iframeDoc.open()
iframeDoc.write(printContent)
iframeDoc.close()
// 等待内容加载完成后打印
iframe.contentWindow?.focus()
setTimeout(() => {
iframe.contentWindow?.print()
// 打印完成后移除iframe
setTimeout(() => {
document.body.removeChild(iframe)
}, 1000)
}, 250)
}
}
</script>
<style lang="scss" scoped>

170
src/views/erp/sale/order/SaleOrderForm.vue
View File

@@ -60,6 +60,9 @@
</el-form>
<template #footer>
<el-button @click="submitForm" type="primary" :disabled="formLoading" v-if="!disabled">确 定</el-button>
<el-button @click="handlePrint" type="warning">
<Icon icon="ep:printer" class="mr-5px" /> 打 印
</el-button>
<el-button @click="dialogVisible = false">取 消</el-button>
</template>
</Dialog>
@@ -231,6 +234,173 @@ const resetForm = () => {
}
formRef.value?.resetFields()
}
/** 打印当前页面数据 */
const handlePrint = () => {
// 获取客户名称
const customer = customerList.value.find((item) => item.id === formData.value.customerId)
const customerName = customer ? customer.name : ''
// 获取销售人员名称
const saleUser = userList.value.find((item) => item.id === formData.value.saleUserId)
const saleUserName = saleUser ? saleUser.nickname : ''
// 获取结算账户名称
const account = accountList.value.find((item) => item.id === formData.value.accountId)
const accountName = account ? account.name : ''
// 格式化订单时间
const orderTime = formData.value.orderTime
? new Date(formData.value.orderTime).toLocaleDateString('zh-CN')
: ''
// 构建产品清单表格
let itemsTableHtml = ''
if (formData.value.items && formData.value.items.length > 0) {
// 计算合计
const totalCount = formData.value.items.reduce((sum, item) => sum + (item.count || 0), 0)
const totalProductPrice = formData.value.items.reduce((sum, item) => sum + (item.totalProductPrice || 0), 0)
const totalMinPrice = formData.value.items.reduce((sum, item) => sum + (item.totalMinPrice || 0), 0)
const totalGrossProfit = formData.value.items.reduce((sum, item) => sum + (item.grossProfit || 0), 0)
const totalTaxPrice = formData.value.items.reduce((sum, item) => sum + (item.taxPrice || 0), 0)
const totalPriceSum = formData.value.items.reduce((sum, item) => sum + (item.totalPrice || 0), 0)
itemsTableHtml = `
<table border="1" cellpadding="6" cellspacing="0" style="width:100%; border-collapse: collapse; margin-top: 10px; font-size: 12px;">
<thead>
<tr style="background-color: #f5f5f5;">
<th>序号</th>
<th>产品名称</th>
<th>库存</th>
<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>
${formData.value.items
.map(
(item, index) => `
<tr>
<td style="text-align: center;">${index + 1}</td>
<td>${item.productName || ''}</td>
<td style="text-align: right;">${item.stockCount || 0}</td>
<td>${item.productBarCode || ''}</td>
<td style="text-align: center;">${item.productUnitName || ''}</td>
<td style="text-align: right;">${item.count || 0}</td>
<td style="text-align: right;">${item.productPrice || 0}</td>
<td style="text-align: right;">${item.totalProductPrice || 0}</td>
<td style="text-align: right;">${item.minPrice || 0}</td>
<td style="text-align: right;">${item.totalMinPrice || 0}</td>
<td style="text-align: right;">${item.grossProfit || 0}</td>
<td style="text-align: right;">${item.taxPercent || 0}</td>
<td style="text-align: right;">${item.taxPrice || 0}</td>
<td style="text-align: right;">${item.totalPrice || 0}</td>
<td>${item.remark || ''}</td>
</tr>
`
)
.join('')}
</tbody>
<tfoot>
<tr style="background-color: #f9f9f9; font-weight: bold;">
<td style="text-align: center;">合计</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td style="text-align: right;">${totalCount}</td>
<td></td>
<td style="text-align: right;">${totalProductPrice}</td>
<td></td>
<td style="text-align: right;">${totalMinPrice}</td>
<td style="text-align: right;">${totalGrossProfit}</td>
<td></td>
<td style="text-align: right;">${totalTaxPrice}</td>
<td style="text-align: right;">${totalPriceSum}</td>
<td></td>
</tr>
</tfoot>
</table>
`
}
// 构建打印内容
const printContent = `
<html>
<head>
<title>销售订单打印</title>
<style>
body { font-family: 'Microsoft YaHei', Arial, sans-serif; padding: 20px; }
h1 { text-align: center; margin-bottom: 20px; }
.info-row { display: flex; flex-wrap: wrap; margin-bottom: 10px; }
.info-item { width: 33%; margin-bottom: 10px; }
.info-label { font-weight: bold; color: #666; }
.info-value { margin-left: 10px; }
.section-title { font-size: 16px; font-weight: bold; margin: 20px 0 10px; border-bottom: 1px solid #ddd; padding-bottom: 5px; }
table { font-size: 14px; }
th, td { padding: 8px; text-align: left; }
@media print {
body { padding: 0; }
}
</style>
</head>
<body>
<h1>销售订单</h1>
<div class="info-row">
<div class="info-item"><span class="info-label">订单单号:</span><span class="info-value">${formData.value.no || '(保存后生成)'}</span></div>
<div class="info-item"><span class="info-label">订单时间:</span><span class="info-value">${orderTime}</span></div>
<div class="info-item"><span class="info-label">客户:</span><span class="info-value">${customerName}</span></div>
<div class="info-item"><span class="info-label">销售人员:</span><span class="info-value">${saleUserName}</span></div>
<div class="info-item"><span class="info-label">结算账户:</span><span class="info-value">${accountName}</span></div>
<div class="info-item"><span class="info-label">收取订金:</span><span class="info-value">${formData.value.depositPrice || 0}</span></div>
</div>
<div class="info-row">
<div class="info-item" style="width: 100%;"><span class="info-label">备注:</span><span class="info-value">${formData.value.remark || ''}</span></div>
</div>
<div class="section-title">订单产品清单</div>
${itemsTableHtml}
<div class="info-row" style="margin-top: 20px;">
<div class="info-item"><span class="info-label">优惠率(%):</span><span class="info-value">${formData.value.discountPercent || 0}</span></div>
<div class="info-item"><span class="info-label">收款优惠:</span><span class="info-value">${formData.value.discountPrice || 0}</span></div>
<div class="info-item"><span class="info-label">优惠后金额:</span><span class="info-value">${formData.value.totalPrice || 0}</span></div>
</div>
</body>
</html>
`
// 使用iframe打印，避免被浏览器拦截
const iframe = document.createElement('iframe')
iframe.style.position = 'absolute'
iframe.style.width = '0'
iframe.style.height = '0'
iframe.style.border = 'none'
iframe.style.left = '-9999px'
document.body.appendChild(iframe)
const iframeDoc = iframe.contentWindow?.document
if (iframeDoc) {
iframeDoc.open()
iframeDoc.write(printContent)
iframeDoc.close()
// 等待内容加载完成后打印
iframe.contentWindow?.focus()
setTimeout(() => {
iframe.contentWindow?.print()
// 打印完成后移除iframe
setTimeout(() => {
document.body.removeChild(iframe)
}, 1000)
}, 250)
}
}
</script>
<style lang="scss" scoped>

162
src/views/erp/sale/out/SaleOutForm.vue
View File

@@ -64,6 +64,9 @@
</el-form>
<template #footer>
<el-button @click="submitForm" type="primary" :disabled="formLoading" v-if="!disabled">确 定</el-button>
<el-button @click="handlePrint" type="warning">
<Icon icon="ep:printer" class="mr-5px" /> 打 印
</el-button>
<el-button @click="dialogVisible = false">取 消</el-button>
</template>
</Dialog>
@@ -251,6 +254,165 @@ const resetForm = () => {
}
formRef.value?.resetFields()
}
/** 打印当前页面数据 */
const handlePrint = () => {
// 获取客户名称
const customer = customerList.value.find((item) => item.id === formData.value.customerId)
const customerName = customer ? customer.name : ''
// 获取销售人员名称
const saleUser = userList.value.find((item) => item.id === formData.value.saleUserId)
const saleUserName = saleUser ? saleUser.nickname : ''
// 获取结算账户名称
const account = accountList.value.find((item) => item.id === formData.value.accountId)
const accountName = account ? account.name : ''
// 格式化出库时间
const outTime = formData.value.outTime
? new Date(formData.value.outTime).toLocaleDateString('zh-CN')
: ''
// 构建产品清单表格
let itemsTableHtml = ''
if (formData.value.items && formData.value.items.length > 0) {
// 计算合计
const totalCount = formData.value.items.reduce((sum, item) => sum + (item.count || 0), 0)
const totalProductPrice = formData.value.items.reduce((sum, item) => sum + (item.totalProductPrice || 0), 0)
const totalTaxPrice = formData.value.items.reduce((sum, item) => sum + (item.taxPrice || 0), 0)
const totalPriceSum = formData.value.items.reduce((sum, item) => sum + (item.totalPrice || 0), 0)
itemsTableHtml = `
<table border="1" cellpadding="6" cellspacing="0" style="width:100%; border-collapse: collapse; margin-top: 10px; font-size: 12px;">
<thead>
<tr style="background-color: #f5f5f5;">
<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>
${formData.value.items
.map(
(item, index) => `
<tr>
<td style="text-align: center;">${index + 1}</td>
<td>${item.productName || ''}</td>
<td style="text-align: right;">${item.stockCount || 0}</td>
<td>${item.productBarCode || ''}</td>
<td style="text-align: center;">${item.productUnitName || ''}</td>
<td style="text-align: right;">${item.count || 0}</td>
<td style="text-align: right;">${item.productPrice || 0}</td>
<td style="text-align: right;">${item.totalProductPrice || 0}</td>
<td style="text-align: right;">${item.taxPercent || 0}</td>
<td style="text-align: right;">${item.taxPrice || 0}</td>
<td style="text-align: right;">${item.totalPrice || 0}</td>
<td>${item.remark || ''}</td>
</tr>
`
)
.join('')}
</tbody>
<tfoot>
<tr style="background-color: #f9f9f9; font-weight: bold;">
<td style="text-align: center;">合计</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td style="text-align: right;">${totalCount}</td>
<td></td>
<td style="text-align: right;">${totalProductPrice}</td>
<td></td>
<td style="text-align: right;">${totalTaxPrice}</td>
<td style="text-align: right;">${totalPriceSum}</td>
<td></td>
</tr>
</tfoot>
</table>
`
}
// 构建打印内容
const printContent = `
<html>
<head>
<title>销售出库单打印</title>
<style>
body { font-family: 'Microsoft YaHei', Arial, sans-serif; padding: 20px; }
h1 { text-align: center; margin-bottom: 20px; }
.info-row { display: flex; flex-wrap: wrap; margin-bottom: 10px; }
.info-item { width: 33%; margin-bottom: 10px; }
.info-label { font-weight: bold; color: #666; }
.info-value { margin-left: 10px; }
.section-title { font-size: 16px; font-weight: bold; margin: 20px 0 10px; border-bottom: 1px solid #ddd; padding-bottom: 5px; }
table { font-size: 14px; }
th, td { padding: 8px; text-align: left; }
@media print {
body { padding: 0; }
}
</style>
</head>
<body>
<h1>销售出库单</h1>
<div class="info-row">
<div class="info-item"><span class="info-label">出库单号:</span><span class="info-value">${formData.value.no || '(保存后生成)'}</span></div>
<div class="info-item"><span class="info-label">出库时间:</span><span class="info-value">${outTime}</span></div>
<div class="info-item"><span class="info-label">关联订单:</span><span class="info-value">${formData.value.orderNo || ''}</span></div>
<div class="info-item"><span class="info-label">客户:</span><span class="info-value">${customerName}</span></div>
<div class="info-item"><span class="info-label">销售人员:</span><span class="info-value">${saleUserName}</span></div>
<div class="info-item"><span class="info-label">结算账户:</span><span class="info-value">${accountName}</span></div>
</div>
<div class="info-row">
<div class="info-item" style="width: 100%;"><span class="info-label">备注:</span><span class="info-value">${formData.value.remark || ''}</span></div>
</div>
<div class="section-title">出库产品清单</div>
${itemsTableHtml}
<div class="info-row" style="margin-top: 20px;">
<div class="info-item"><span class="info-label">优惠率(%):</span><span class="info-value">${formData.value.discountPercent || 0}</span></div>
<div class="info-item"><span class="info-label">收款优惠:</span><span class="info-value">${formData.value.discountPrice || 0}</span></div>
<div class="info-item"><span class="info-label">优惠后金额:</span><span class="info-value">${(formData.value.totalPrice || 0) - (formData.value.otherPrice || 0)}</span></div>
<div class="info-item"><span class="info-label">其它费用:</span><span class="info-value">${formData.value.otherPrice || 0}</span></div>
<div class="info-item"><span class="info-label">应收金额:</span><span class="info-value">${formData.value.totalPrice || 0}</span></div>
</div>
</body>
</html>
`
// 使用iframe打印，避免被浏览器拦截
const iframe = document.createElement('iframe')
iframe.style.position = 'absolute'
iframe.style.width = '0'
iframe.style.height = '0'
iframe.style.border = 'none'
iframe.style.left = '-9999px'
document.body.appendChild(iframe)
const iframeDoc = iframe.contentWindow?.document
if (iframeDoc) {
iframeDoc.open()
iframeDoc.write(printContent)
iframeDoc.close()
// 等待内容加载完成后打印
iframe.contentWindow?.focus()
setTimeout(() => {
iframe.contentWindow?.print()
// 打印完成后移除iframe
setTimeout(() => {
document.body.removeChild(iframe)
}, 1000)
}, 250)
}
}
</script>
<style lang="scss" scoped>