@ -67,14 +67,90 @@
< / e l - c a r d >
< / e l - f o r m >
< div class = "hl-footer text-center" >
< el -button @click ="isPrint()" type = "primary" size = "large" > 打印 < / e l - b u t t o n >
< el -button @click ="isPrint()" type = "primary" size = "large" :loading ="printLoading" > 打印 < / e l - b u t t o n >
< el -button @click ="deleteForm()" type = "danger" size = "large" > 删除 < / e l - b u t t o n >
< / div >
< / e l - c a r d >
<!-- 表单弹窗 : 物料列表 -- >
< 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 . purchaseNo } } < / span >
< span style = "margin-left:20px; width: 150px;" > 订单日期 : { { formatDate ( printData . ordDate ) } } < / span >
< span style = "margin-left:20px;width: 150px" > 供应商 : { { printData . supplierName } } < / span >
< / div >
< div style = "display: flex;" >
< span style = "margin-left:20px;width: 100px" > 联系人 : { { printData . contactName } } < / span >
< span style = "margin-left:20px;width: 150px" > 电话 : { { 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: 10%;" >
< span style = "margin-left:20px;width: 80px" > 邮编 : < / span >
< span style = "margin-left:20px;width: 150px" > 接收人 : { { printData . username } } < / span >
< span style = "margin-left:20px;width: 150px" > 电话 : { { 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" > 关闭 < / e l - b u t t o n >
< el -button type = "primary" @click ="doPrint" > 打印 < / el -button >
< / template >
< / e l - d i a l o g >
< / template >
< script setup lang = "ts" >
import { getIntDictOptions , DICT _TYPE } from '@/utils/dict'
import * as MaterialPlanApi from '@/api/heli/materialplan'
@ -163,11 +239,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 : 10 px ;
font - size : 14 px ;
}
. print - content {
width : 100 % ;
padding - top : 15 px ;
}
. order - info {
justify - content : space - between ;
display : flex ;
flex - wrap : wrap ;
align - items : center ;
}
. stamp - info {
margin - top : 10 px ;
}
. stamp - info span {
font - size : 15 px ! important ;
}
. order - info span {
font - size : 15 px ! important ;
}
. print - table {
width : 100 % ;
border - collapse : collapse ;
margin - top : 10 px ;
}
. print - table th , . print - table td {
border : 1 px solid # ddd ;
padding : 5 px ;
text - align : center ;
}
. print - table th {
background - color : # f5f5f5 ;
}
@ media print {
body { margin : 0 ; }
. print - content {
width : 100 % ;
margin : 0 ;
padding : 10 px ;
}
}
< / 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 )
@ -186,3 +373,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 : 15 px ! important ;
margin - right : 10 px ! important ;
}
. stamp - info {
margin - top : 10 px ;
}
. stamp - info span {
font - size : 15 px ! important ;
}
. print - table {
width : 100 % ;
border - collapse : collapse ;
margin - top : 10 px ;
border : 1 px solid # ccc ;
}
. print - table th ,
. print - table td {
border : 1 px solid # ccc ;
padding : 6 px 8 px ;
text - align : center ;
font - size : 13 px ! important ;
}
. print - table th {
background - color : # f5f7fa ;
color : # 303133 ;
font - weight : 600 ;
font - size : 13 px ! important ;
}
< / style >