From b82fce61b9ab2c789fae960422614595bf8bfefe Mon Sep 17 00:00:00 2001
From: LiuJiaNan <liujianan@zcloudchina.com>
Date: Wed, 21 Feb 2024 17:31:16 +0800
Subject: [PATCH] =?UTF-8?q?pdf=E5=AF=BC=E5=87=BA=E6=94=B9=E4=B8=BA?=
 =?UTF-8?q?=E6=89=93=E5=8D=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../enterprise_report/index.vue               | 151 +++++++-------
 .../risk_control_menu/add.vue                 | 197 +++++++++---------
 2 files changed, 173 insertions(+), 175 deletions(-)

diff --git a/src/views/continuous_improvement/enterprise_report/index.vue b/src/views/continuous_improvement/enterprise_report/index.vue
index 38a628d..d7709d8 100644
--- a/src/views/continuous_improvement/enterprise_report/index.vue
+++ b/src/views/continuous_improvement/enterprise_report/index.vue
@@ -1,7 +1,10 @@
 <template>
   <layout-card>
-    <div class="pdf-page">
-      <div class="pdf-cover">
+    <div class="tr">
+      <el-button v-print="'#printContainer'" type="primary">打印</el-button>
+    </div>
+    <div id="printContainer">
+      <div class="cover print_use page_break">
         <div class="top">
           <h1>{{ data.cpd.CORP_NAME }}</h1>
           <h1>秦安双重预防机制建设平台</h1>
@@ -11,12 +14,9 @@
           <h1>{{ data.cpd.CORP_NAME }}</h1>
           <h1>{{ dayjs(startDate).format("YYYY年MM月") }}</h1>
         </div>
+        <img src="/src/assets/images/print/cover-bg.png" alt="" />
       </div>
-      <div class="pdf-print">
-        <!--        TODO"-->
-        <el-button type="primary">PDF导出</el-button>
-      </div>
-      <div class="pdf-content">
+      <div class="content">
         <h1>1.概述</h1>
         <p>
           {{ data.cpd.CORP_NAME }}公司统一社会信用代码为：{{
@@ -60,7 +60,7 @@
         </p>
       </div>
 
-      <div class="pdf-content">
+      <div class="content">
         <h1>3.隐患排查</h1>
         <h4>3.1清单管理</h4>
         <p>
@@ -152,7 +152,7 @@
             data.yys_count
           }}项，已超期{{ data.cq_count }}项。
         </p>
-        <p class="pdf-subtitle">隐患治理情况见表2</p>
+        <p class="subtitle">隐患治理情况见表2</p>
         <table class="print_table">
           <thead>
             <tr>
@@ -175,15 +175,20 @@
               <td>{{ item.DEPARTMENT_NAME }}</td>
               <td>{{ item.HIDDENDESCR }}</td>
               <td>{{ item.RECTIFYDESCR }}</td>
-              <td v-if="item.STATE === '-1'">已超期</td>
-              <td v-if="item.STATE === '1'">
-                {{
-                  item.HIDDENLEVEL === "hiddenLevel0001" ? "待整改" : "整改中"
-                }}
+              <td>
+                <span v-if="item.STATE === '1'">
+                  {{
+                    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 v-if="item.STATE === '2'">已整改</td>
-              <td v-if="item.STATE === '3'">已整改</td>
-              <td v-if="item.STATE === '4'">已验收</td>
               <td>
                 <viewer :images="[VITE_FILE_URL + item.HD_IMGS]">
                   <img
@@ -210,7 +215,7 @@
         </table>
       </div>
 
-      <div class="pdf-content">
+      <div class="content">
         <h1>4.风险分析记录</h1>
         <p>改进信息显示风险辨识台账更新记录</p>
         <table class="print_table">
@@ -238,7 +243,7 @@
         </table>
       </div>
 
-      <div class="pdf-content">
+      <div class="content">
         <h1>5.教育培训情况</h1>
         <h4>5.1教育培训</h4>
         <p>
@@ -314,7 +319,7 @@
         </p>
       </div>
 
-      <div class="pdf-content">
+      <div class="content">
         <h1>6.特殊作业管理</h1>
         <p>
           {{ dayjs(startDate).format("YYYY年MM月DD日") }}-{{
@@ -333,7 +338,7 @@
         </p>
       </div>
 
-      <div class="pdf-content">
+      <div class="content">
         <h1>7.绩效考核</h1>
         <p>
           {{ dayjs(startDate).format("YYYY年MM月DD日") }}-{{
@@ -449,7 +454,7 @@
         </table>
       </div>
 
-      <div class="pdf-content">
+      <div class="content">
         <h1>8.结论建议</h1>
         <p>
           {{ data.corp_advice.ADVICE }}
@@ -676,70 +681,62 @@ const fnConclusion = () => {
 </script>
 
 <style scoped lang="scss">
-.pdf-page {
-  width: 100%;
-  border: 1px solid var(--el-border-color);
-  padding: 20px;
+.cover {
   position: relative;
 
-  .pdf-print {
-    float: right;
-  }
-
-  .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;
-    }
+  .top {
+    padding-top: 400px;
 
     h1 {
-      font-size: 20px;
+      font-size: 34px;
+      text-align: center;
     }
+  }
 
-    h4 {
-      font-size: 16px;
-      text-indent: 34px;
-    }
+  .bot {
+    padding-top: 200px;
 
-    p {
-      text-indent: 34px;
-      margin: 0 0 0.2em;
-      line-height: 1.6;
+    h1 {
+      font-size: 18px;
+      text-align: center;
     }
   }
+
+  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 {
diff --git a/src/views/dynamic_evaluation/risk_control_menu/add.vue b/src/views/dynamic_evaluation/risk_control_menu/add.vue
index c1dabd5..b2f6ef9 100644
--- a/src/views/dynamic_evaluation/risk_control_menu/add.vue
+++ b/src/views/dynamic_evaluation/risk_control_menu/add.vue
@@ -1,15 +1,15 @@
 <template>
   <div>
     <layout-card>
-      <div class="pdf-page">
-        <div class="pdf-cover">
+      <div id="printContainer">
+        <div class="cover print_use page_break">
           <div class="top">
             <h1>{{ info.CREATOR_NAME }}</h1>
             <h1>
               {{ dayjs(info.CREATTIME).format("YYYY") }}年度风险管控动态评估报告
             </h1>
           </div>
-          <div style="padding-top: 200px; margin: auto; width: 400px">
+          <div style="margin: auto; width: 400px">
             <div style="display: flex">
               <h1>编制：</h1>
               <div style="border-bottom: 1px solid #606266; width: 80%" />
@@ -19,83 +19,87 @@
               <div style="border-bottom: 1px solid #606266; width: 80%" />
             </div>
           </div>
-          <div class="bot" style="padding-top: 300px">
+          <div class="bot">
             <h1>{{ info.CREATOR_NAME }}</h1>
             <h1>{{ dayjs(info.CREATTIME).format("YYYY年MM月DD日") }}</h1>
           </div>
+          <img src="/src/assets/images/print/cover-bg.png" alt="" />
         </div>
-        <div class="pdf-content">
-          <table class="print_table">
-            <tr v-for="(item, index) in list" :key="index">
-              <td
-                v-if="fnGetCurrentIndex(item, '0') >= 0"
-                :rowspan="fnGetCurrentData(item, '0').ROW_SPAN"
-                :colspan="fnGetCurrentData(item, '0').COL_SPAN"
-                :style="fnGetCurrentData(item, '0').STYLE"
+        <table class="print_table">
+          <tr v-for="(item, index) in list" :key="index">
+            <td
+              v-if="fnGetCurrentIndex(item, '0') >= 0"
+              :rowspan="fnGetCurrentData(item, '0').ROW_SPAN"
+              :colspan="fnGetCurrentData(item, '0').COL_SPAN"
+              :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>
-              <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'))"
-                >
-                  编辑
-                </el-button>
-                {{ fnGetCurrentData(item, "5").DESCRITPTION || "" }}
-              </td>
-            </tr>
-          </table>
-        </div>
+                编辑
+              </el-button>
+              {{ fnGetCurrentData(item, "5").DESCRITPTION || "" }}
+            </td>
+          </tr>
+        </table>
       </div>
       <div class="tc mt-10">
         <el-button v-if="type !== 'view'" type="primary" @click="fnSubmit">
           确定
         </el-button>
-        <!--        TODO"-->
-        <el-button v-if="type === 'view'" type="primary">导出PDF</el-button>
+        <el-button
+          v-if="type === 'view'"
+          v-print="'#printContainer'"
+          type="primary"
+        >
+          打印
+        </el-button>
       </div>
     </layout-card>
     <assessment-results
@@ -222,38 +226,35 @@ const fnSubmit = debounce(
 </script>
 
 <style scoped lang="scss">
-.pdf-page {
-  width: 100%;
-  padding: 20px;
+.cover {
   position: relative;
 
-  .pdf-cover {
-    top: -1523px;
+  .top {
+    padding-top: 400px;
+
+    h1 {
+      font-size: 34px;
+      text-align: center;
+    }
+  }
+
+  .bot {
+    padding-top: 200px;
+
+    h1 {
+      font-size: 18px;
+      text-align: center;
+    }
+  }
+
+  img {
     position: absolute;
+    left: 0;
+    right: 0;
+    bottom: -100px;
+    height: 407px;
     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;
-      }
-    }
+    z-index: -1;
   }
 }
 </style>