|
|
|
@ -0,0 +1,345 @@
|
|
|
|
|
<template>
|
|
|
|
|
<Dialog title="打印" v-model="dialogVisible" width="1000">
|
|
|
|
|
<!-- 打印预览 -->
|
|
|
|
|
<div class="print-wrap page" ref="print">
|
|
|
|
|
<table border="2" cellspacing="0" id="table">
|
|
|
|
|
<tbody>
|
|
|
|
|
<tr>
|
|
|
|
|
<td colspan="2">
|
|
|
|
|
<div style="width: 110px; text-align: center">
|
|
|
|
|
<img
|
|
|
|
|
src="/src/assets/imgs/exlogo.png"
|
|
|
|
|
style="width: 100%; padding-left: 20px"
|
|
|
|
|
alt=""
|
|
|
|
|
/>
|
|
|
|
|
</div>
|
|
|
|
|
</td>
|
|
|
|
|
<td colspan="6">
|
|
|
|
|
<span style="font-size: 20px; font-weight: 700">开发项目启动单</span>
|
|
|
|
|
</td>
|
|
|
|
|
<td colspan="2">
|
|
|
|
|
<div style="border-bottom: 1px solid #666">项目编号</div>
|
|
|
|
|
<div>{{ `项目编号码` }}</div>
|
|
|
|
|
</td>
|
|
|
|
|
</tr>
|
|
|
|
|
</tbody>
|
|
|
|
|
<tbody>
|
|
|
|
|
<tr>
|
|
|
|
|
<td colspan="2"> 客户名称 </td>
|
|
|
|
|
<td colspan="5">
|
|
|
|
|
<span>{{ '公司名字' }}</span>
|
|
|
|
|
</td>
|
|
|
|
|
<td colspan="1">{{ `密称` }}</td>
|
|
|
|
|
<td> 编码: </td>
|
|
|
|
|
<td>{{ `1091` }} </td>
|
|
|
|
|
</tr>
|
|
|
|
|
</tbody>
|
|
|
|
|
<tr>
|
|
|
|
|
<td colspan="2"> 项目名称 </td>
|
|
|
|
|
<td colspan="6">
|
|
|
|
|
{{ `系列摸具` }}
|
|
|
|
|
</td>
|
|
|
|
|
<td> 业务员: </td>
|
|
|
|
|
<td>{{ `xxx` }} </td>
|
|
|
|
|
</tr>
|
|
|
|
|
<tr>
|
|
|
|
|
<td colspan="2"> 项目工期 </td>
|
|
|
|
|
<td colspan="1"> 起 </td>
|
|
|
|
|
<td colspan="1">
|
|
|
|
|
<span>{{ '2024/1/11' }}</span>
|
|
|
|
|
</td>
|
|
|
|
|
<td colspan="1">至</td>
|
|
|
|
|
<td colspan="1">{{ `2024/4/11` }}</td>
|
|
|
|
|
<td>天数</td>
|
|
|
|
|
<td colspan="1">{{ `92` }}</td>
|
|
|
|
|
<td colspan="1"> 是否紧急: </td>
|
|
|
|
|
<td colspan="1">{{ `否` }} </td>
|
|
|
|
|
</tr>
|
|
|
|
|
<tr>
|
|
|
|
|
<td colspan="10">
|
|
|
|
|
<div style="display: flex; justify-content: space-between">
|
|
|
|
|
<div style="width: 42%; font-size: 12px; display: flex; flex-direction: column">
|
|
|
|
|
<div style="text-align: left; width: 100%">客户提供资料:</div>
|
|
|
|
|
<div
|
|
|
|
|
id="fruitForm"
|
|
|
|
|
style="display: flex; justify-content: flex-start; align-items: center"
|
|
|
|
|
>
|
|
|
|
|
<!-- <input
|
|
|
|
|
type="checkbox"
|
|
|
|
|
id="checkbox1"
|
|
|
|
|
name="fruit"
|
|
|
|
|
:checked="isSelected.includes(1)"
|
|
|
|
|
disabled
|
|
|
|
|
/> -->
|
|
|
|
|
<span class="checkbox" v-if="isSelected.includes(1) == false"></span>
|
|
|
|
|
<span class="checkbox" v-else-if="isSelected.includes(1) == true">√</span>
|
|
|
|
|
<label for="checkbox1">开发合同</label>
|
|
|
|
|
<!-- <input
|
|
|
|
|
type="checkbox"
|
|
|
|
|
id="checkbox2"
|
|
|
|
|
name="fruit"
|
|
|
|
|
:checked="isSelected.includes(2)"
|
|
|
|
|
disabled
|
|
|
|
|
/> -->
|
|
|
|
|
<span class="checkbox" v-if="isSelected.includes(2) == false"></span>
|
|
|
|
|
<span class="checkbox" v-else-if="isSelected.includes(2) == true">√</span>
|
|
|
|
|
<label for="checkbox2">技术协议</label>
|
|
|
|
|
<!-- <input
|
|
|
|
|
type="checkbox"
|
|
|
|
|
id="checkbox3"
|
|
|
|
|
name="fruit"
|
|
|
|
|
:checked="isSelected.includes(3)"
|
|
|
|
|
disabled
|
|
|
|
|
/> -->
|
|
|
|
|
<span class="checkbox" v-if="isSelected.includes(3) == false"></span>
|
|
|
|
|
<span class="checkbox" v-else-if="isSelected.includes(3) == true">√</span>
|
|
|
|
|
<label for="checkbox3">图纸/数模</label>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div style="width: 25%; display: flex; justify-content: center; font-size: 12px">
|
|
|
|
|
<span>费用说明:</span>
|
|
|
|
|
<div style="border: 1px solid #333; width: 70px">
|
|
|
|
|
<div style="border-bottom: 1px solid #333">{{ `无费用` }}</div>
|
|
|
|
|
<div>{{ `` }}</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div style="width: 22%; display: flex; justify-content: center; font-size: 12px">
|
|
|
|
|
<div>
|
|
|
|
|
<div>类别:</div>
|
|
|
|
|
<div>性质:</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div style="border: 1px solid #333; width: 70px">
|
|
|
|
|
<div style="border-bottom: 1px solid #333">{{ `黑色` }}</div>
|
|
|
|
|
<div>{{ `新制` }}</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</td>
|
|
|
|
|
</tr>
|
|
|
|
|
|
|
|
|
|
<tbody>
|
|
|
|
|
<tr
|
|
|
|
|
><td colspan="10"> <div style="text-align: left; width: 100%">子项目信息</div></td></tr
|
|
|
|
|
>
|
|
|
|
|
|
|
|
|
|
<tr>
|
|
|
|
|
<td class="xh"> 序号 </td>
|
|
|
|
|
<td colspan="2"> 名称 </td>
|
|
|
|
|
<td> 设备型号 </td>
|
|
|
|
|
<td> 简称 </td>
|
|
|
|
|
<td> 数量 </td>
|
|
|
|
|
<td> 主要材料 </td>
|
|
|
|
|
<td colspan="3"> 子项目编号 </td>
|
|
|
|
|
</tr>
|
|
|
|
|
<tr v-for="item in 8" :key="item.index">
|
|
|
|
|
<td>{{ item }}</td>
|
|
|
|
|
<td colspan="2"></td>
|
|
|
|
|
<td></td>
|
|
|
|
|
<td></td>
|
|
|
|
|
<td></td>
|
|
|
|
|
<td></td>
|
|
|
|
|
<td colspan="3"></td>
|
|
|
|
|
</tr>
|
|
|
|
|
</tbody>
|
|
|
|
|
<tbody>
|
|
|
|
|
<tr>
|
|
|
|
|
<td colspan="10">
|
|
|
|
|
<div style="text-align: left; width: 100%">备注:</div>
|
|
|
|
|
</td>
|
|
|
|
|
</tr>
|
|
|
|
|
<tr>
|
|
|
|
|
<td colspan="10">
|
|
|
|
|
<div style="text-align: left; width: 100px; height: 150px">
|
|
|
|
|
<p> {{ '999' }}</p>
|
|
|
|
|
</div>
|
|
|
|
|
</td>
|
|
|
|
|
</tr>
|
|
|
|
|
</tbody>
|
|
|
|
|
<tbody>
|
|
|
|
|
<tr>
|
|
|
|
|
<td colspan="3"> 编制/日期 </td>
|
|
|
|
|
<td colspan="3"> 审核/日期 </td>
|
|
|
|
|
<td colspan="4"> 批准/日期 </td>
|
|
|
|
|
</tr>
|
|
|
|
|
<tr>
|
|
|
|
|
<td colspan="3">1</td>
|
|
|
|
|
<td colspan="3"> </td>
|
|
|
|
|
<td colspan="4"> </td>
|
|
|
|
|
</tr>
|
|
|
|
|
<tr>
|
|
|
|
|
<td colspan="3">1</td>
|
|
|
|
|
<td colspan="3"> </td>
|
|
|
|
|
<td colspan="4"> </td>
|
|
|
|
|
</tr>
|
|
|
|
|
</tbody>
|
|
|
|
|
</table>
|
|
|
|
|
</div>
|
|
|
|
|
<template #footer>
|
|
|
|
|
<!-- 【打印】 -->
|
|
|
|
|
<el-button @click="onPrint" type="primary">打印</el-button>
|
|
|
|
|
<el-button @click="outopen">取消</el-button>
|
|
|
|
|
</template>
|
|
|
|
|
</Dialog>
|
|
|
|
|
</template>
|
|
|
|
|
<script setup lang="ts">
|
|
|
|
|
// import { ref, reactive } from 'vue'
|
|
|
|
|
import { Check } from '@element-plus/icons-vue'
|
|
|
|
|
const dialogVisible = ref(false) // 弹窗的是否展示
|
|
|
|
|
|
|
|
|
|
const onPrint = () => {
|
|
|
|
|
// 拿到打印页面dom节点
|
|
|
|
|
const printNode = document.querySelector('.print-wrap')
|
|
|
|
|
if (!printNode) return
|
|
|
|
|
// 页面文档创建一个空的内框架,用于挂载打印节点,并设置一定的样式
|
|
|
|
|
const newIframe: any = document.createElement('iframe')
|
|
|
|
|
newIframe.setAttribute(
|
|
|
|
|
'style',
|
|
|
|
|
'width:0px;height:0px;position:absolute;left:-9999px;top:-9999px;'
|
|
|
|
|
)
|
|
|
|
|
newIframe.setAttribute('align', 'center')
|
|
|
|
|
document.body.appendChild(newIframe)
|
|
|
|
|
// 将打印页面设置为内框架内容
|
|
|
|
|
let doc: any = null
|
|
|
|
|
doc = newIframe.contentWindow.document
|
|
|
|
|
doc.write(`
|
|
|
|
|
<style type="text/css">
|
|
|
|
|
/* 浏览器打印基本样式 */
|
|
|
|
|
.page {
|
|
|
|
|
width: 21cm;
|
|
|
|
|
min-height: 29.7cm;
|
|
|
|
|
padding: 10mm;
|
|
|
|
|
margin: 20px auto;
|
|
|
|
|
border: 1px #d3d3d3 solid;
|
|
|
|
|
border-radius: 5px;
|
|
|
|
|
background: white;
|
|
|
|
|
box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
|
|
|
|
|
position: relative;
|
|
|
|
|
font-size: 14px !important;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
@page {
|
|
|
|
|
size: A4;
|
|
|
|
|
margin:1cm;
|
|
|
|
|
}
|
|
|
|
|
@media print {
|
|
|
|
|
.page {
|
|
|
|
|
margin: 10mm;
|
|
|
|
|
border: initial;
|
|
|
|
|
border-radius: initial;
|
|
|
|
|
width: initial;
|
|
|
|
|
min-height: initial;
|
|
|
|
|
box-shadow: initial;
|
|
|
|
|
background: initial;
|
|
|
|
|
page-break-after: always;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
table {
|
|
|
|
|
width: 100%; /* 让表格宽度100%占满其父元素宽度 */
|
|
|
|
|
height: auto; /* 高度根据内容自适应 */
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
text-align: center;
|
|
|
|
|
border-collapse: collapse;
|
|
|
|
|
margin-top: 5mm; /* 添加顶部外边距,替代原先的页内边距 */
|
|
|
|
|
td {
|
|
|
|
|
padding: 10px 0;
|
|
|
|
|
border: 1px solid #333;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.xh {
|
|
|
|
|
width: 50px !important;
|
|
|
|
|
}
|
|
|
|
|
.checkbox {
|
|
|
|
|
border: 2px solid #999;
|
|
|
|
|
width: 10px;
|
|
|
|
|
height: 10px;
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: center;
|
|
|
|
|
align-items: center;
|
|
|
|
|
margin-left:10px ;
|
|
|
|
|
}
|
|
|
|
|
</style>
|
|
|
|
|
<div>
|
|
|
|
|
${printNode.innerHTML}
|
|
|
|
|
</div>`)
|
|
|
|
|
doc.close()
|
|
|
|
|
// 浏览器打印页面打开渲染
|
|
|
|
|
setTimeout(() => {
|
|
|
|
|
newIframe.contentWindow.focus()
|
|
|
|
|
newIframe.contentWindow.print()
|
|
|
|
|
document.body.removeChild(newIframe) // 移除打印内框架,下次打印下次再挂载
|
|
|
|
|
dialogVisible.value = false
|
|
|
|
|
}, 100)
|
|
|
|
|
}
|
|
|
|
|
const outopen = () => {
|
|
|
|
|
dialogVisible.value = false
|
|
|
|
|
}
|
|
|
|
|
const queryParams: any = ref({
|
|
|
|
|
code: undefined
|
|
|
|
|
})
|
|
|
|
|
const isSelected = ref([1, 3])
|
|
|
|
|
|
|
|
|
|
/** 打开弹窗 */
|
|
|
|
|
const open = async (type: string, id?: number) => {
|
|
|
|
|
dialogVisible.value = true
|
|
|
|
|
}
|
|
|
|
|
defineExpose({ open }) // 提供 open 方法,用于打开弹窗
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<style scoped lang="scss">
|
|
|
|
|
.page {
|
|
|
|
|
width: 21cm;
|
|
|
|
|
min-height: 29.7cm;
|
|
|
|
|
padding: 10mm;
|
|
|
|
|
margin: 20px auto;
|
|
|
|
|
border: 1px #d3d3d3 solid;
|
|
|
|
|
border-radius: 5px;
|
|
|
|
|
background: white;
|
|
|
|
|
box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
|
|
|
|
|
position: relative;
|
|
|
|
|
font-size: 14px !important;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
@page {
|
|
|
|
|
size: A4;
|
|
|
|
|
margin: 0;
|
|
|
|
|
}
|
|
|
|
|
@media print {
|
|
|
|
|
.page {
|
|
|
|
|
margin: 0;
|
|
|
|
|
border: initial;
|
|
|
|
|
border-radius: initial;
|
|
|
|
|
width: initial;
|
|
|
|
|
min-height: initial;
|
|
|
|
|
box-shadow: initial;
|
|
|
|
|
background: initial;
|
|
|
|
|
page-break-after: always;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
table {
|
|
|
|
|
width: 100%; /* 让表格宽度100%占满其父元素宽度 */
|
|
|
|
|
height: auto; /* 高度根据内容自适应 */
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
text-align: center;
|
|
|
|
|
border-collapse: collapse;
|
|
|
|
|
margin-top: 5mm; /* 添加顶部外边距,替代原先的页内边距 */
|
|
|
|
|
td {
|
|
|
|
|
padding: 10px 0;
|
|
|
|
|
border: 1px solid #333;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.xh {
|
|
|
|
|
width: 50px !important;
|
|
|
|
|
}
|
|
|
|
|
.checkbox {
|
|
|
|
|
border: 2px solid #999;
|
|
|
|
|
width: 15px;
|
|
|
|
|
height: 15px;
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: center;
|
|
|
|
|
align-items: center;
|
|
|
|
|
margin-left: 10px;
|
|
|
|
|
}
|
|
|
|
|
/*
|
|
|
|
|
A4的大小:21cm*29.7cm(width:794px;)。
|
|
|
|
|
单位换算:1 inch = 2.54 cm 1mm = 96 px 1 cm = 37.79528 px*/
|
|
|
|
|
</style>
|