pdf导出改为打印

pull/1/head
LiuJiaNan 2024-02-21 17:31:16 +08:00
parent 8bf89a3736
commit b82fce61b9
2 changed files with 173 additions and 175 deletions

View File

@ -1,7 +1,10 @@
<template> <template>
<layout-card> <layout-card>
<div class="pdf-page"> <div class="tr">
<div class="pdf-cover"> <el-button v-print="'#printContainer'" type="primary"></el-button>
</div>
<div id="printContainer">
<div class="cover print_use page_break">
<div class="top"> <div class="top">
<h1>{{ data.cpd.CORP_NAME }}</h1> <h1>{{ data.cpd.CORP_NAME }}</h1>
<h1>秦安双重预防机制建设平台</h1> <h1>秦安双重预防机制建设平台</h1>
@ -11,12 +14,9 @@
<h1>{{ data.cpd.CORP_NAME }}</h1> <h1>{{ data.cpd.CORP_NAME }}</h1>
<h1>{{ dayjs(startDate).format("YYYY年MM月") }}</h1> <h1>{{ dayjs(startDate).format("YYYY年MM月") }}</h1>
</div> </div>
<img src="/src/assets/images/print/cover-bg.png" alt="" />
</div> </div>
<div class="pdf-print"> <div class="content">
<!-- TODO"-->
<el-button type="primary">PDF导出</el-button>
</div>
<div class="pdf-content">
<h1>1.概述</h1> <h1>1.概述</h1>
<p> <p>
{{ data.cpd.CORP_NAME }}公司统一社会信用代码为{{ {{ data.cpd.CORP_NAME }}公司统一社会信用代码为{{
@ -60,7 +60,7 @@
</p> </p>
</div> </div>
<div class="pdf-content"> <div class="content">
<h1>3.隐患排查</h1> <h1>3.隐患排查</h1>
<h4>3.1清单管理</h4> <h4>3.1清单管理</h4>
<p> <p>
@ -152,7 +152,7 @@
data.yys_count data.yys_count
}}已超期{{ data.cq_count }} }}已超期{{ data.cq_count }}
</p> </p>
<p class="pdf-subtitle">隐患治理情况见表2</p> <p class="subtitle">隐患治理情况见表2</p>
<table class="print_table"> <table class="print_table">
<thead> <thead>
<tr> <tr>
@ -175,15 +175,20 @@
<td>{{ item.DEPARTMENT_NAME }}</td> <td>{{ item.DEPARTMENT_NAME }}</td>
<td>{{ item.HIDDENDESCR }}</td> <td>{{ item.HIDDENDESCR }}</td>
<td>{{ item.RECTIFYDESCR }}</td> <td>{{ item.RECTIFYDESCR }}</td>
<td v-if="item.STATE === '-1'"></td> <td>
<td v-if="item.STATE === '1'"> <span v-if="item.STATE === '1'">
{{ {{
item.HIDDENLEVEL === "hiddenLevel0001" ? "待整改" : "整改中" item.HIDDENLEVEL === "hiddenLevel0001" ? "待整改" : "整改中"
}} }}
</span>
<span v-else-if="item.STATE === '3'"> 已整改 </span>
<span v-else-if="item.STATE === '4'"> 已验收 </span>
<span v-else-if="item.STATE === '-1'"> 已超期 </span>
<span v-else-if="item.STATE === '10'"> 验收打回 </span>
<span v-else-if="item.STATE === '100'"> 暂存 </span>
<span v-else-if="item.STATE === '101'"> 待指派 </span>
<span v-else-if="item.STATE === '102'"> 指派中 </span>
</td> </td>
<td v-if="item.STATE === '2'"></td>
<td v-if="item.STATE === '3'"></td>
<td v-if="item.STATE === '4'"></td>
<td> <td>
<viewer :images="[VITE_FILE_URL + item.HD_IMGS]"> <viewer :images="[VITE_FILE_URL + item.HD_IMGS]">
<img <img
@ -210,7 +215,7 @@
</table> </table>
</div> </div>
<div class="pdf-content"> <div class="content">
<h1>4.风险分析记录</h1> <h1>4.风险分析记录</h1>
<p>改进信息显示风险辨识台账更新记录</p> <p>改进信息显示风险辨识台账更新记录</p>
<table class="print_table"> <table class="print_table">
@ -238,7 +243,7 @@
</table> </table>
</div> </div>
<div class="pdf-content"> <div class="content">
<h1>5.教育培训情况</h1> <h1>5.教育培训情况</h1>
<h4>5.1教育培训</h4> <h4>5.1教育培训</h4>
<p> <p>
@ -314,7 +319,7 @@
</p> </p>
</div> </div>
<div class="pdf-content"> <div class="content">
<h1>6.特殊作业管理</h1> <h1>6.特殊作业管理</h1>
<p> <p>
{{ dayjs(startDate).format("YYYY年MM月DD日") }}-{{ {{ dayjs(startDate).format("YYYY年MM月DD日") }}-{{
@ -333,7 +338,7 @@
</p> </p>
</div> </div>
<div class="pdf-content"> <div class="content">
<h1>7.绩效考核</h1> <h1>7.绩效考核</h1>
<p> <p>
{{ dayjs(startDate).format("YYYY年MM月DD日") }}-{{ {{ dayjs(startDate).format("YYYY年MM月DD日") }}-{{
@ -449,7 +454,7 @@
</table> </table>
</div> </div>
<div class="pdf-content"> <div class="content">
<h1>8.结论建议</h1> <h1>8.结论建议</h1>
<p> <p>
{{ data.corp_advice.ADVICE }} {{ data.corp_advice.ADVICE }}
@ -676,70 +681,62 @@ const fnConclusion = () => {
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
.pdf-page { .cover {
width: 100%;
border: 1px solid var(--el-border-color);
padding: 20px;
position: relative; position: relative;
.pdf-print { .top {
float: right; padding-top: 400px;
}
.pdf-cover {
top: -1523px;
position: absolute;
width: 100%;
height: 1497px;
background: #fff url("/src/assets/images/print/cover-bg.png") no-repeat 0
bottom;
background-size: 100% 630px;
.top {
padding-top: 400px;
h1 {
font-size: 34px;
text-align: center;
}
}
.bot {
padding-top: 700px;
h1 {
font-size: 18px;
text-align: center;
}
}
}
.pdf-content {
position: relative;
.pdf-subtitle {
text-align: center;
text-indent: 0;
margin-bottom: 1em;
font-weight: bold;
}
h1 { h1 {
font-size: 20px; font-size: 34px;
text-align: center;
} }
}
h4 { .bot {
font-size: 16px; padding-top: 200px;
text-indent: 34px;
}
p { h1 {
text-indent: 34px; font-size: 18px;
margin: 0 0 0.2em; text-align: center;
line-height: 1.6;
} }
} }
img {
position: absolute;
left: 0;
right: 0;
bottom: -100px;
height: 407px;
width: 100%;
z-index: -1;
}
}
.content {
position: relative;
.subtitle {
text-align: center;
text-indent: 0;
margin-bottom: 1em;
font-weight: bold;
}
h1 {
font-size: 20px;
}
h4 {
font-size: 16px;
text-indent: 34px;
}
p {
text-indent: 34px;
margin: 0 0 0.2em;
line-height: 1.6;
}
} }
img { img {

View File

@ -1,15 +1,15 @@
<template> <template>
<div> <div>
<layout-card> <layout-card>
<div class="pdf-page"> <div id="printContainer">
<div class="pdf-cover"> <div class="cover print_use page_break">
<div class="top"> <div class="top">
<h1>{{ info.CREATOR_NAME }}</h1> <h1>{{ info.CREATOR_NAME }}</h1>
<h1> <h1>
{{ dayjs(info.CREATTIME).format("YYYY") }}年度风险管控动态评估报告 {{ dayjs(info.CREATTIME).format("YYYY") }}年度风险管控动态评估报告
</h1> </h1>
</div> </div>
<div style="padding-top: 200px; margin: auto; width: 400px"> <div style="margin: auto; width: 400px">
<div style="display: flex"> <div style="display: flex">
<h1>编制</h1> <h1>编制</h1>
<div style="border-bottom: 1px solid #606266; width: 80%" /> <div style="border-bottom: 1px solid #606266; width: 80%" />
@ -19,83 +19,87 @@
<div style="border-bottom: 1px solid #606266; width: 80%" /> <div style="border-bottom: 1px solid #606266; width: 80%" />
</div> </div>
</div> </div>
<div class="bot" style="padding-top: 300px"> <div class="bot">
<h1>{{ info.CREATOR_NAME }}</h1> <h1>{{ info.CREATOR_NAME }}</h1>
<h1>{{ dayjs(info.CREATTIME).format("YYYY年MM月DD日") }}</h1> <h1>{{ dayjs(info.CREATTIME).format("YYYY年MM月DD日") }}</h1>
</div> </div>
<img src="/src/assets/images/print/cover-bg.png" alt="" />
</div> </div>
<div class="pdf-content"> <table class="print_table">
<table class="print_table"> <tr v-for="(item, index) in list" :key="index">
<tr v-for="(item, index) in list" :key="index"> <td
<td v-if="fnGetCurrentIndex(item, '0') >= 0"
v-if="fnGetCurrentIndex(item, '0') >= 0" :rowspan="fnGetCurrentData(item, '0').ROW_SPAN"
:rowspan="fnGetCurrentData(item, '0').ROW_SPAN" :colspan="fnGetCurrentData(item, '0').COL_SPAN"
:colspan="fnGetCurrentData(item, '0').COL_SPAN" :style="fnGetCurrentData(item, '0').STYLE"
:style="fnGetCurrentData(item, '0').STYLE" >
{{ fnGetCurrentData(item, "0").DESCRITPTION }}
</td>
<td
v-if="fnGetCurrentIndex(item, '1') >= 0"
:rowspan="fnGetCurrentData(item, '1').ROW_SPAN"
:colspan="fnGetCurrentData(item, '1').COL_SPAN"
:style="fnGetCurrentData(item, '1').STYLE"
>
{{ fnGetCurrentData(item, "1").DESCRITPTION }}
</td>
<td
v-if="fnGetCurrentIndex(item, '2') >= 0"
:rowspan="fnGetCurrentData(item, '2').ROW_SPAN"
:colspan="fnGetCurrentData(item, '2').COL_SPAN"
:style="fnGetCurrentData(item, '2').STYLE"
>
{{ fnGetCurrentData(item, "2").DESCRITPTION }}
</td>
<td
v-if="fnGetCurrentIndex(item, '3') >= 0"
:rowspan="fnGetCurrentData(item, '3').ROW_SPAN"
:colspan="fnGetCurrentData(item, '3').COL_SPAN"
:style="fnGetCurrentData(item, '3').STYLE"
>
{{ fnGetCurrentData(item, "3").DESCRITPTION }}
</td>
<td
v-if="fnGetCurrentIndex(item, '4') >= 0"
:rowspan="fnGetCurrentData(item, '4').ROW_SPAN"
:colspan="fnGetCurrentData(item, '4').COL_SPAN"
:style="fnGetCurrentData(item, '4').STYLE"
>
{{ fnGetCurrentData(item, "4").DESCRITPTION }}
</td>
<td
v-if="fnGetCurrentIndex(item, '5') >= 0"
:rowspan="fnGetCurrentData(item, '5').ROW_SPAN"
:colspan="fnGetCurrentData(item, '5').COL_SPAN"
:style="fnGetCurrentData(item, '5').STYLE"
>
<el-button
v-if="
!fnGetCurrentData(item, '5').DESCRITPTION && type !== 'view'
"
type="primary"
text
link
@click="fnEdit(fnGetCurrentData(item, '5'))"
> >
{{ fnGetCurrentData(item, "0").DESCRITPTION }} 编辑
</td> </el-button>
<td {{ fnGetCurrentData(item, "5").DESCRITPTION || "" }}
v-if="fnGetCurrentIndex(item, '1') >= 0" </td>
:rowspan="fnGetCurrentData(item, '1').ROW_SPAN" </tr>
:colspan="fnGetCurrentData(item, '1').COL_SPAN" </table>
:style="fnGetCurrentData(item, '1').STYLE"
>
{{ fnGetCurrentData(item, "1").DESCRITPTION }}
</td>
<td
v-if="fnGetCurrentIndex(item, '2') >= 0"
:rowspan="fnGetCurrentData(item, '2').ROW_SPAN"
:colspan="fnGetCurrentData(item, '2').COL_SPAN"
:style="fnGetCurrentData(item, '2').STYLE"
>
{{ fnGetCurrentData(item, "2").DESCRITPTION }}
</td>
<td
v-if="fnGetCurrentIndex(item, '3') >= 0"
:rowspan="fnGetCurrentData(item, '3').ROW_SPAN"
:colspan="fnGetCurrentData(item, '3').COL_SPAN"
:style="fnGetCurrentData(item, '3').STYLE"
>
{{ fnGetCurrentData(item, "3").DESCRITPTION }}
</td>
<td
v-if="fnGetCurrentIndex(item, '4') >= 0"
:rowspan="fnGetCurrentData(item, '4').ROW_SPAN"
:colspan="fnGetCurrentData(item, '4').COL_SPAN"
:style="fnGetCurrentData(item, '4').STYLE"
>
{{ fnGetCurrentData(item, "4").DESCRITPTION }}
</td>
<td
v-if="fnGetCurrentIndex(item, '5') >= 0"
:rowspan="fnGetCurrentData(item, '5').ROW_SPAN"
:colspan="fnGetCurrentData(item, '5').COL_SPAN"
:style="fnGetCurrentData(item, '5').STYLE"
>
<el-button
v-if="
!fnGetCurrentData(item, '5').DESCRITPTION && type !== 'view'
"
type="primary"
text
link
@click="fnEdit(fnGetCurrentData(item, '5'))"
>
编辑
</el-button>
{{ fnGetCurrentData(item, "5").DESCRITPTION || "" }}
</td>
</tr>
</table>
</div>
</div> </div>
<div class="tc mt-10"> <div class="tc mt-10">
<el-button v-if="type !== 'view'" type="primary" @click="fnSubmit"> <el-button v-if="type !== 'view'" type="primary" @click="fnSubmit">
确定 确定
</el-button> </el-button>
<!-- TODO"--> <el-button
<el-button v-if="type === 'view'" type="primary">PDF</el-button> v-if="type === 'view'"
v-print="'#printContainer'"
type="primary"
>
打印
</el-button>
</div> </div>
</layout-card> </layout-card>
<assessment-results <assessment-results
@ -222,38 +226,35 @@ const fnSubmit = debounce(
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
.pdf-page { .cover {
width: 100%;
padding: 20px;
position: relative; position: relative;
.pdf-cover { .top {
top: -1523px; padding-top: 400px;
h1 {
font-size: 34px;
text-align: center;
}
}
.bot {
padding-top: 200px;
h1 {
font-size: 18px;
text-align: center;
}
}
img {
position: absolute; position: absolute;
left: 0;
right: 0;
bottom: -100px;
height: 407px;
width: 100%; width: 100%;
height: 1497px; z-index: -1;
background: #fff url("/src/assets/images/print/cover-bg.png") no-repeat 0
bottom;
background-size: 100% 630px;
.top {
padding-top: 400px;
h1 {
font-size: 34px;
text-align: center;
}
}
.bot {
padding-top: 700px;
h1 {
font-size: 18px;
text-align: center;
}
}
} }
} }
</style> </style>