打印调整
This commit is contained in:
BinBin Song
parent
f8cd8db633
commit
8d4e4c1b65
@ -350,7 +350,7 @@ link type="primary" size="small" :disabled="ctrView || ctrDelete"
|
|||||||
</el-form>
|
</el-form>
|
||||||
<div class="hl-footer text-center">
|
<div class="hl-footer text-center">
|
||||||
<el-button @click="() => router.go(-1)" size="large">取 消</el-button>
|
<el-button @click="() => router.go(-1)" size="large">取 消</el-button>
|
||||||
<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="submitForm" type="success" v-if="btnSave" size="large">保
|
<el-button @click="submitForm" type="success" v-if="btnSave" size="large">保
|
||||||
存</el-button>
|
存</el-button>
|
||||||
@ -365,6 +365,95 @@ link type="primary" size="small" :disabled="ctrView || ctrDelete"
|
|||||||
<!-- 表单弹窗：物料列表 -->
|
<!-- 表单弹窗：物料列表 -->
|
||||||
<projects ref="proOpenFormRef" @success="getProject" />
|
<projects ref="proOpenFormRef" @success="getProject" />
|
||||||
<purchaseorderDialog ref="projectPurchaseorderDialog" @success="handleSelectedProjectPurchaseorder" />
|
<purchaseorderDialog ref="projectPurchaseorderDialog" @success="handleSelectedProjectPurchaseorder" />
|
||||||
|
<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 style="width: 210px;">编号：{{ printData.storageNo}}</span>
|
||||||
|
<span style="margin-left:20px; width: 170px;">入库日期：{{ formatDate(printData.ordDate) }}</span>
|
||||||
|
<span style="margin-left:20px;width: 250px">供应商：{{ printData.supplierName }}</span>
|
||||||
|
</div>
|
||||||
|
<!-- <div style="display: flex;">
|
||||||
|
<span style="margin-left:20px;width: 110px">联系人：{{ printData.contactName }}</span>
|
||||||
|
<span style="margin-left:20px;width: 150px">电话：{{ printData.contactMobile }}</span>
|
||||||
|
</div> -->
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<table class="print-table">
|
||||||
|
<colgroup>
|
||||||
|
<col style="width: 10%;" />
|
||||||
|
<col style="width: 15%;" />
|
||||||
|
<col style="width: 10%;" />
|
||||||
|
<col style="width: 15%;" />
|
||||||
|
<col style="width: 10%;" />
|
||||||
|
<col style="width: 10%;" />
|
||||||
|
<col style="width: 10%;" />
|
||||||
|
<col style="width: 10%;" />
|
||||||
|
<col style="width: 10%;" />
|
||||||
|
|
||||||
|
|
||||||
|
</colgroup>
|
||||||
|
<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 17" :key="index">
|
||||||
|
<td>{{ index + 1 }}</td>
|
||||||
|
<td>{{ printData.storageMatDOList[index]?.boomName ? limitTo20Chars(printData.storageMatDOList[index].boomName) : '' }}</td>
|
||||||
|
<td>{{ printData.storageMatDOList[index]?.boomSpec || '' }}</td>
|
||||||
|
<td>{{ printData.storageMatDOList[index]?.unit || '' }}</td>
|
||||||
|
<td>{{ printData.storageMatDOList[index]?.storageAmount || '' }}</td>
|
||||||
|
<td>{{ printData.storageMatDOList[index]?.price || '' }}</td>
|
||||||
|
<td>{{ printData.storageMatDOList[index]?.estimatedPrice || '' }}</td>
|
||||||
|
<td>{{ printData.storageMatDOList[index]?.projectName || '' }}</td>
|
||||||
|
<td>{{ printData.storageMatDOList[index]?.description || '' }}</td>
|
||||||
|
</tr>
|
||||||
|
<!-- <tr>
|
||||||
|
<td colspan="9"></td>
|
||||||
|
<td style="font-weight: bold;">合计</td>
|
||||||
|
<td style="font-weight: bold;">{{ printData.estimatedPriceSum }}</td>
|
||||||
|
</tr> -->
|
||||||
|
</tbody>
|
||||||
|
|
||||||
|
</table>
|
||||||
|
<div class="order-info" style="margin-top: 10px;border-bottom: 1px solid #ccc;padding-bottom: 10px;">
|
||||||
|
<div style="display: flex;width: 40%;">
|
||||||
|
<span >经手人:{{ printData.username }}</span>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<div style="display: flex;width: 20%;justify-content: center;">
|
||||||
|
<!-- <span style="margin-left:20px;width: 150px">审核：{{ printData.auditorName }}</span> -->
|
||||||
|
<!-- <span style="margin-left:20px;width: 120px">仓库签字:</span> -->
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<div style="display: flex; width: 40%;justify-content: right;">
|
||||||
|
<span style="margin-left:20px;width: 150px">仓库签字:{{ printData.signature }}</span>
|
||||||
|
|
||||||
|
<span style="margin-left:20px;width: 150px">日期:{{ printData.date }}</span>
|
||||||
|
<!-- <span style="margin-left:20px;width: 150px">接收人：{{ printData.username }}</span> -->
|
||||||
|
<!-- <span style="margin-left:20px;width: 150px">电话：{{ printData.userMobile }}</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>
|
</template>
|
||||||
|
|
||||||
@ -453,10 +542,142 @@ const openMatForm = () => {
|
|||||||
// formData.value.whId
|
// formData.value.whId
|
||||||
matOpenFormRef.value.open(formData.value.whId,'in')
|
matOpenFormRef.value.open(formData.value.whId,'in')
|
||||||
}
|
}
|
||||||
|
// const isPrint = async () => {
|
||||||
|
// var newVar = await StorageApi.isPrint(query.id);
|
||||||
|
// console.log(newVar)
|
||||||
|
// }
|
||||||
|
|
||||||
|
function formatDate(val) {
|
||||||
|
if (!val) return ''
|
||||||
|
const date = new Date(val)
|
||||||
|
return date.toLocaleDateString()
|
||||||
|
}
|
||||||
|
|
||||||
|
const printLoading = ref(false)
|
||||||
|
// 打印弹窗内容
|
||||||
|
const printDialogVisible = ref(false)
|
||||||
|
const printData = ref({})
|
||||||
|
|
||||||
|
function openPrintDialog(data) {
|
||||||
|
printData.value = data
|
||||||
|
printDialogVisible.value = true
|
||||||
|
}
|
||||||
const isPrint = async () => {
|
const isPrint = async () => {
|
||||||
|
printLoading.value = true
|
||||||
|
printLoading.value = true
|
||||||
|
try {
|
||||||
var newVar = await StorageApi.isPrint(query.id);
|
var newVar = await StorageApi.isPrint(query.id);
|
||||||
console.log(newVar)
|
console.log(newVar)
|
||||||
|
openPrintDialog(newVar)
|
||||||
|
} finally {
|
||||||
|
printLoading.value = false
|
||||||
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
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: 12px;
|
||||||
|
}
|
||||||
|
.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;
|
||||||
|
height: 20px; /* 设置固定高度 */
|
||||||
|
line-height: 20px; /* 垂直居中 */
|
||||||
|
}
|
||||||
|
.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)
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
function limitTo20Chars(input) {
|
||||||
|
if (typeof input !== 'string') return '';
|
||||||
|
return input.length > 20 ? input.slice(0, 20) : input;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
const handleSelectedProjectPurchaseorder = (arr) => {
|
const handleSelectedProjectPurchaseorder = (arr) => {
|
||||||
if (arr) {
|
if (arr) {
|
||||||
formData.value.headerNo = arr.purchaseNo
|
formData.value.headerNo = arr.purchaseNo
|
||||||
@ -1033,9 +1254,88 @@ const handleSelectedMaterial = (currentIndex: number, newValue: any) => {
|
|||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
a {
|
a {
|
||||||
color: #409eff;
|
color: #409eff;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* 打印样式 */
|
||||||
|
@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;
|
||||||
|
height: 30px; /* 设置固定高度 */
|
||||||
|
line-height: 30px; /* 垂直居中 */
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.print-table th {
|
||||||
|
background-color: #f5f7fa;
|
||||||
|
color: #303133;
|
||||||
|
font-weight: 600;
|
||||||
|
font-size: 13px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@ -70,11 +70,105 @@
|
|||||||
</el-form>
|
</el-form>
|
||||||
<div class="hl-footer text-center">
|
<div class="hl-footer text-center">
|
||||||
<el-button @click="cancel" size="large">取 消</el-button>
|
<el-button @click="cancel" size="large">取 消</el-button>
|
||||||
<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>
|
<el-button @click="deleteForm()" type="danger" size="large" >删除</el-button>
|
||||||
</div>
|
</div>
|
||||||
</el-card>
|
</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 style="width: 210px;">编号：{{ printData.storageNo}}</span>
|
||||||
|
<span style="margin-left:20px; width: 170px;">入库日期：{{ formatDate(printData.ordDate) }}</span>
|
||||||
|
<span style="margin-left:20px;width: 250px">供应商：{{ printData.supplierName }}</span>
|
||||||
|
</div>
|
||||||
|
<!-- <div style="display: flex;">
|
||||||
|
<span style="margin-left:20px;width: 110px">联系人：{{ printData.contactName }}</span>
|
||||||
|
<span style="margin-left:20px;width: 150px">电话：{{ printData.contactMobile }}</span>
|
||||||
|
</div> -->
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<table class="print-table">
|
||||||
|
<colgroup>
|
||||||
|
<col style="width: 10%;" />
|
||||||
|
<col style="width: 15%;" />
|
||||||
|
<col style="width: 10%;" />
|
||||||
|
<col style="width: 15%;" />
|
||||||
|
<col style="width: 10%;" />
|
||||||
|
<col style="width: 10%;" />
|
||||||
|
<col style="width: 10%;" />
|
||||||
|
<col style="width: 10%;" />
|
||||||
|
<col style="width: 10%;" />
|
||||||
|
|
||||||
|
|
||||||
|
</colgroup>
|
||||||
|
<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 17" :key="index">
|
||||||
|
<td>{{ index + 1 }}</td>
|
||||||
|
<td>{{ printData.storageInDetailDOList[index]?.boomName ? limitTo20Chars(printData.storageInDetailDOList[index].boomName) : '' }}</td>
|
||||||
|
<td>{{ printData.storageInDetailDOList[index]?.boomSpec || '' }}</td>
|
||||||
|
<td>{{ printData.storageInDetailDOList[index]?.unit || '' }}</td>
|
||||||
|
<td>{{ printData.storageInDetailDOList[index]?.storageAmount || '' }}</td>
|
||||||
|
<td>{{ printData.storageInDetailDOList[index]?.price || '' }}</td>
|
||||||
|
<td>{{ printData.storageInDetailDOList[index]?.estimatedPrice || '' }}</td>
|
||||||
|
<td>{{ printData.storageInDetailDOList[index]?.projectName || '' }}</td>
|
||||||
|
<td>{{ printData.storageInDetailDOList[index]?.description || '' }}</td>
|
||||||
|
</tr>
|
||||||
|
<!-- <tr>
|
||||||
|
<td colspan="9"></td>
|
||||||
|
<td style="font-weight: bold;">合计</td>
|
||||||
|
<td style="font-weight: bold;">{{ printData.estimatedPriceSum }}</td>
|
||||||
|
</tr> -->
|
||||||
|
</tbody>
|
||||||
|
|
||||||
|
</table>
|
||||||
|
<div class="order-info" style="margin-top: 10px;border-bottom: 1px solid #ccc;padding-bottom: 10px;">
|
||||||
|
<div style="display: flex;width: 40%;">
|
||||||
|
<span >经手人:{{ printData.username }}</span>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<div style="display: flex;width: 20%;justify-content: center;">
|
||||||
|
<!-- <span style="margin-left:20px;width: 150px">审核：{{ printData.auditorName }}</span> -->
|
||||||
|
<!-- <span style="margin-left:20px;width: 120px">仓库签字:</span> -->
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<div style="display: flex; width: 40%;justify-content: right;">
|
||||||
|
<span style="margin-left:20px;width: 150px">仓库签字:{{ printData.signature }}</span>
|
||||||
|
|
||||||
|
|
||||||
|
<span style="margin-left:20px;width: 150px">日期:{{ printData.date }}</span>
|
||||||
|
<!-- <span style="margin-left:20px;width: 150px">接收人：{{ printData.username }}</span> -->
|
||||||
|
<!-- <span style="margin-left:20px;width: 150px">电话：{{ printData.userMobile }}</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>
|
</template>
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
|
|
||||||
@ -148,10 +242,132 @@ const cancel = async () => {
|
|||||||
tagsViewStore.delVisitedView(router.currentRoute.value)
|
tagsViewStore.delVisitedView(router.currentRoute.value)
|
||||||
}
|
}
|
||||||
|
|
||||||
const isPrint = async () => {
|
|
||||||
var newVar = await StorageinApi.isPrint(query.id);
|
function formatDate(val) {
|
||||||
console.log(newVar)
|
if (!val) return ''
|
||||||
|
const date = new Date(val)
|
||||||
|
return date.toLocaleDateString()
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const printLoading = ref(false)
|
||||||
|
// 打印弹窗内容
|
||||||
|
const printDialogVisible = ref(false)
|
||||||
|
const printData = ref({})
|
||||||
|
|
||||||
|
function openPrintDialog(data) {
|
||||||
|
printData.value = data
|
||||||
|
printDialogVisible.value = true
|
||||||
|
}
|
||||||
|
const isPrint = async () => {
|
||||||
|
printLoading.value = true
|
||||||
|
printLoading.value = true
|
||||||
|
try {
|
||||||
|
var newVar = await StorageinApi.isPrint(query.id);
|
||||||
|
console.log(newVar)
|
||||||
|
openPrintDialog(newVar)
|
||||||
|
} finally {
|
||||||
|
printLoading.value = false
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
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: 12px;
|
||||||
|
}
|
||||||
|
.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;
|
||||||
|
height: 20px; /* 设置固定高度 */
|
||||||
|
line-height: 20px; /* 垂直居中 */
|
||||||
|
}
|
||||||
|
.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)
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
function limitTo20Chars(input) {
|
||||||
|
if (typeof input !== 'string') return '';
|
||||||
|
return input.length > 20 ? input.slice(0, 20) : input;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
const deleteForm = async () => {
|
const deleteForm = async () => {
|
||||||
// 删除的二次确认
|
// 删除的二次确认
|
||||||
await message.delConfirm()
|
await message.delConfirm()
|
||||||
@ -174,3 +390,81 @@ const getList = async () => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
</script>
|
</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;
|
||||||
|
height: 30px; /* 设置固定高度 */
|
||||||
|
line-height: 30px; /* 垂直居中 */
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.print-table th {
|
||||||
|
background-color: #f5f7fa;
|
||||||
|
color: #303133;
|
||||||
|
font-weight: 600;
|
||||||
|
font-size: 13px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</style>
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user