采购订单、采购入库、销售订单、销售出库添加打印功能
This commit is contained in:
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user