fix:[模板管理]详情导出

src/views/business/comps/template/TemplateTable.vue

@@ -81,10 +81,10 @@ export default {
           //色谱
           'SP001': 'SP001',
           'SP002': 'SP002',
-          'SP003': 'SWYPBQGZYZBB',
-          'SP004': 'SWYPNBGZYZBB',
-          'SP005': 'SWYPNBGZYZBB',
-          'SP006': 'SWYPNBGZYZBB',
+          'SP003': 'SP003',
+          'SP004': 'SP00456',
+          'SP005': 'SP00456',
+          'SP006': 'SP00456',
           'SP008': 'ZQDYJMD',
           'SP009': 'Recovery',
           'SP010': 'QXWDX',

src/views/business/study/comp/tbbd/Xq.vue

@@ -25,39 +25,52 @@
       </el-button>
       <el-button type="primary" @click="exportExcel(999)">{{ $t('page.business.study.studyFormFill.dcbhsjgj') }}
       </el-button>
+      <el-button type="primary" @click="generatePDF()">前端导出
+      </el-button>
       <div class="edit-content ">
-        <div class="content" style="width: 100%;">
-          <section slot="pdf-content">
-            <TemplateTable ref="templateTable" :sn="form.templateSn" :templateData="form" fillType="detail" />
-            <div class="content-title">
-              <div class="line"></div>
-              <div class="subtitle"> {{ $t('page.business.study.studyFormFill.qmxx') }}</div>
-            </div>
-            <div class="pal">
-              <el-table :data="qmxxList" v-loading="loadingQmxx">
-                <el-table-column :label="$t('page.business.study.studyFormFill.qmr')" align="center" prop="qmrMc"
-                  width="150px" />
-                <el-table-column :label="$t('page.business.study.studyFormFill.qmyy')" align="center"
-                  :prop="$i18n.locale === 'zh_CN' ? 'qmyy' : 'qmyyEn'" width="150px" />
-                <el-table-column :label="$t('page.business.study.studyFormFill.qmsj')" align="center" prop="createTime"
-                  width="150px" />
-                <el-table-column :label="$t('page.business.study.studyFormFill.bzyy')" align="center" prop="remark"
-                  :show-overflow-tooltip="true" />
-              </el-table>
-            </div>
-            <div class="pal">
-              <pagination v-show="totalQmxx > 0" :total="totalQmxx" :page.sync="queryParamsQmxx.pageNum"
-                :limit.sync="queryParamsQmxx.pageSize" @pagination="getQmxxList" />
-            </div>
-            <div class="content-title">
-              <div class="line"></div>
-              <div class="subtitle"> {{ $t('page.business.study.studyFormFill.jcgj') }}</div>
-            </div>
-            <JcgjList ref="jcgjList" @handleQuery="getJjcgjList" :showXg="true" />
+        <div class="content" style="width: 100%; height: 100%;">
+          <!-- <vue-html2pdf :show-layout="false" :float-layout="true" :enable-download="true" :preview-modal="true"
+            :paginate-elements-by-height="1400" filename="我的文档" :pdf-quality="2" 
+            pdf-format="a4" pdf-orientation="portrait"  @progress="onProgress"
+            @hasStartedGeneration="hasStarted" @hasGenerated="hasGenerated" ref="html2Pdf">
+             -->
+          <vue-html2pdf :show-layout="false" pdf-content-width="100%" :pdf-quality="3" :float-layout="false"
+            pdf-orientation="landscape" :enable-download="true" :preview-modal="true" ref="html2Pdf"
+            @hasStartedGeneration="hasStarted" @hasGenerated="hasGenerated">
+            <section slot="pdf-content">
+              <div class="pdf-content">
+                <TemplateTable ref="templateTable" :sn="form.templateSn" :templateData="form" fillType="detail" />
+                <div class="content-title">
+                  <div class="line"></div>
+                  <div class="subtitle"> {{ $t('page.business.study.studyFormFill.qmxx') }}</div>
+                </div>
+                <div class="pal">
+                  <el-table :data="qmxxList" v-loading="loadingQmxx">
+                    <el-table-column :label="$t('page.business.study.studyFormFill.qmr')" align="center" prop="qmrMc"
+                      width="150px" />
+                    <el-table-column :label="$t('page.business.study.studyFormFill.qmyy')" align="center"
+                      :prop="$i18n.locale === 'zh_CN' ? 'qmyy' : 'qmyyEn'" width="150px" />
+                    <el-table-column :label="$t('page.business.study.studyFormFill.qmsj')" align="center"
+                      prop="createTime" width="150px" />
+                    <el-table-column :label="$t('page.business.study.studyFormFill.bzyy')" align="center" prop="remark"
+                      :show-overflow-tooltip="true" />
+                  </el-table>
+                </div>
+                <div class="pal">
+                  <pagination v-show="totalQmxx > 0" :total="totalQmxx" :page.sync="queryParamsQmxx.pageNum"
+                    :limit.sync="queryParamsQmxx.pageSize" @pagination="getQmxxList" />
+                </div>
+                <div class="content-title">
+                  <div class="line"></div>
+                  <div class="subtitle"> {{ $t('page.business.study.studyFormFill.jcgj') }}</div>
+                </div>
+                <JcgjList ref="jcgjList" @handleQuery="getJjcgjList" :showXg="true" />
 
-            <pagination v-show="jcgjTotal > 0" small layout="prev, pager, next" :total="jcgjTotal"
-              @pagination="getJjcgjList" />
-          </section>
+                <pagination v-show="jcgjTotal > 0" small layout="prev, pager, next" :total="jcgjTotal"
+                  @pagination="getJjcgjList" />
+              </div>
+            </section>
+          </vue-html2pdf>
         </div>
       </div>
     </div>
@@ -96,7 +109,7 @@
         <el-row>
           <el-col :span="24">
             <el-form-item :label="$t('form.password')" prop="qmrmm">
-              <el-input  type="password" show-password  v-model="formApprove.qmrmm" maxlength="20"
+              <el-input type="password" show-password v-model="formApprove.qmrmm" maxlength="20"
                 :placeholder="$t('form.placeholderInput')" />
             </el-form-item>
           </el-col>
@@ -115,9 +128,10 @@ import { studyFormFill_tb, studyFormFill_info, studyFormFill_jcgj, studyFormFill
 import { mapGetters } from 'vuex'
 import JcgjList from "@/views/business/comps/common/JcgjList";
 import TemplateTable from '@/views/business/comps/template/TemplateTable';
+import VueHtml2pdf from 'vue-html2pdf'
 export default {
   name: "Xq",
-  components: { JcgjList, TemplateTable },
+  components: { JcgjList, TemplateTable, VueHtml2pdf },
   data() {
     return {
       openApprove: false,
@@ -175,6 +189,33 @@ export default {
   created() {
   },
   methods: {
+    onProgress(progress) {
+      this.progress = progress
+    },
+    hasStarted() {
+      this.$modal.loading()
+      console.log('PDF生成开始')
+    },
+    hasGenerated() {
+      console.log('PDF生成完成')
+      this.$modal.closeLoading()
+    },
+    generatePDF() {
+      // 找到PDF内容并强制设置样式
+      const pdfContent = document.querySelector('.pdf-content-section, [slot="pdf-content"]')
+      if (pdfContent) {
+        pdfContent.style.cssText = `
+      background: white !important;
+      min-height: 297mm !important;
+      opacity: 1 !important;
+      visibility: visible !important;
+      position: relative !important;
+      z-index: 1000 !important;
+    `
+      }
+      // 然后生成PDF
+      this.$refs.html2Pdf.generatePdf()
+    },
     exportExcel(jcgjlx) {
       this.$modal.loading()
       studyFormFill_exportDetail(_.merge({}, this.queryParamsJcgj, { jcgjlx: jcgjlx, lang: this.$store.getters.language.split("_")[0] })).then(response => {
@@ -265,3 +306,32 @@ export default {
   }
 }
 </script>
+<style scoped>
+.pdf-content {
+  padding: 20px;
+  font-family: Arial, sans-serif;
+}
+
+.pdf-content h1 {
+  color: #333;
+  border-bottom: 2px solid #4CAF50;
+  padding-bottom: 10px;
+}
+
+.pdf-content table {
+  width: 100%;
+  border-collapse: collapse;
+  margin-top: 20px;
+}
+
+.pdf-content th,
+.pdf-content td {
+  border: 1px solid #ddd;
+  padding: 8px;
+  text-align: left;
+}
+
+.pdf-content th {
+  background-color: #f2f2f2;
+}
+</style>