fix:[模板管理]导出优化

src/App.vue

@@ -135,9 +135,12 @@ export default {
 .el-dialog__body {
   padding: 10px 10px;
 }
+
 /*隐藏自动填充密码 */
-.sbzdtcma{
-  width: 0px; height: 0px; overflow: hidden;
+.sbzdtcma {
+  width: 0px;
+  height: 0px;
+  overflow: hidden;
 }
 
 /*搜索区域样式 */
@@ -314,14 +317,63 @@ export default {
     margin-top: 10px;
   }
 }
+
 .no-break {
-    page-break-inside: avoid;
-  }
+  page-break-inside: avoid;
+}
+
 /* 表格行不被分割 */
-  table, tr, td, th {
-    page-break-inside: avoid;
-  }
-  
+table,
+tr,
+td,
+th {
+  page-break-inside: avoid;
+}
+
+
+.datatable {
+  border-collapse: collapse;
+  width: 100%;
+  font-size: 13px;
+}
+
+.datatable thead {
+  border-left: 1px solid #f5f5f5;
+}
+
+.datatable th {
+  padding: 5px 5px 4px 5px;
+  max-width: 200px;
+  line-height: 35px;
+  text-align: center;
+  color: #606266;
+  background: #f8f8f9;
+  border: 1px solid #f5f5f5;
+}
+
+.el-dialog__body {
+  padding: 10px 20px !important;
+}
+
+.datatable th.operate {
+  padding: 5px 5px 4px 5px;
+  width: 100px;
+  line-height: 35px;
+  background: #f8f8f9;
+  border: 1px solid #f5f5f5;
+  text-align: center;
+}
+
+
+.datatable td {
+  border: solid 1px #f5f5f5;
+  padding: 3px 5px 4px 5px;
+  max-width: 100px;
+  color: #606266;
+  line-height: 35px;
+  text-align: center;
+}
+
 /** 基础信息设置tab **/
 
 .edit-container {
@@ -357,12 +409,12 @@ export default {
 
       .is-finish {
         background: #409eff;
-        border: 1px  solid #409eff;
+        border: 1px solid #409eff;
         color: #fff;
       }
 
-       .is-info {
-        border: 1px  solid #d0d0d0;
+      .is-info {
+        border: 1px solid #d0d0d0;
       }
 
       .line {
@@ -383,8 +435,9 @@ export default {
     padding: 10px 10px;
     margin-top: 10px;
     width: 100%;
-     display: flex;
+    display: flex;
     justify-content: center;
+
     .content-right {
       width: 33%;
       margin-left: 2%;
@@ -395,6 +448,7 @@ export default {
     .content-left {
       width: 65%;
     }
+
     .content {
       width: 100%;
     }
@@ -470,11 +524,11 @@ export default {
 }
 
 .template-form-item {
-    background: #fff;
-    padding: 20px;
-    border-radius: 8px;
-    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
-    margin-top: 24px;
-    padding: 24px;
+  background: #fff;
+  padding: 20px;
+  border-radius: 8px;
+  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
+  margin-top: 24px;
+  padding: 24px;
 }
 </style>

src/components/Template/BaseInfoFormPackage.vue

@@ -251,7 +251,7 @@ export default {
     margin-top: 20px;
     padding: 20px;
     border-radius: 5px 5px;
-
+    page-break-inside: avoid;
 }
 
 /* 或者使用 span 语法 */

src/components/Template/Table.vue

@@ -1,11 +1,24 @@
 <template>
     <div>
-        <LineLabel v-if = "label" :label="label"></LineLabel>
+        <LineLabel v-if="label" :label="label"></LineLabel>
         <div class="mt-20">
-            <el-table :data="dataSource">
-                <el-table-column v-for="(item) in columns" :prop="item.prop" :key="item.prop" :label="$t(item.label)" class="no-break">
+            <!-- <el-table :data="dataSource">
+                <el-table-column v-for="(item) in columns" :prop="item.prop" :key="item.prop" :label="$t(item.label)"
+                    class="no-break">
                 </el-table-column>
-            </el-table>
+            </el-table> -->
+            <table class="datatable">
+                <thead>
+                    <tr>
+                        <th v-for="(item) in columns" :key="item.prop" class="no-break">{{ $t(item.label) }}</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr v-for="(ditem, index) in dataSource" :key="index">
+                        <td v-for="(item) in columns" :key="item.prop" class="no-break">{{ ditem[item.prop] }}</td>
+                    </tr>
+                </tbody>
+            </table>
         </div>
     </div>
 </template>

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

@@ -61,7 +61,7 @@
                     <div class="line"></div>
                     <div class="subtitle"> {{ $t('page.business.study.studyFormPlan.jcgj') }}</div>
                   </div>
-                  <JcgjList ref="jcgjExportList" :readonly="true" v-show="jcgjlxExport != 999" />
+                  <JcgjExportList ref="jcgjExportList" :readonly="true" v-show="jcgjlxExport != 999" />
                 </div>
               </div>
               <div v-if="showExport" id="watermark-overlay"  ref="watermarkContainer" :style="{
@@ -152,12 +152,13 @@
 import { studyFormPlan_jcgjqmxxList, studyFormPlan_tb, studyFormPlan_info, studyFormPlan_jcgj, studyFormPlan_qmxx, studyFormPlan_exportDetail } from "@/api/business/study/studyFormPlan"
 import { mapGetters } from 'vuex'
 import JcgjList from "@/views/business/comps/common/JcgjList";
+import JcgjExportList from "@/views/business/comps/common/JcgjExportList";
 import TemplateTable from '@/views/business/comps/template/TemplateTable';
 import moment from "moment";
 import VueHtml2pdf from 'vue-html2pdf'
 export default {
   name: "Xq",
-  components: { JcgjList, TemplateTable, VueHtml2pdf },
+  components: { JcgjExportList,JcgjList, TemplateTable, VueHtml2pdf },
   data() {
     return {
       watermarkText:'',
@@ -482,55 +483,11 @@ export default {
   background-color: #f2f2f2;
 }
 
-.datatable {
-  border-collapse: collapse;
-  width: 100%;
-}
-
-.upload-file-list .el-upload-list__item {
-  margin-bottom: 0px !important;
-}
-
-.datatable thead {
-  border-left: 1px solid #d0d0d0;
-}
-
-.datatable th {
-  padding: 5px 5px 4px 5px;
-  max-width: 200px;
-  line-height: 35px;
-  text-align: center;
-  color: #414753;
-  background: #F5F7FA;
-  border: 1px solid #d0d0d0;
-}
 
 .el-dialog__body {
   padding: 10px 20px !important;
 }
 
-.datatable th.operate {
-  padding: 5px 5px 4px 5px;
-  width: 100px;
-  line-height: 35px;
-  background: #F5F7FA;
-  border: 1px solid #d0d0d0;
-  text-align: center;
-}
-
-.datatable .rowAlt td,
-.datatable tbody tr:nth-child(2n) td {
-  background: #F5F7FA;
-}
-
-.datatable td {
-  border: solid 1px #d0d0d0;
-  padding: 3px 5px 4px 5px;
-  max-width: 100px;
-  color: #414753;
-  line-height: 35px;
-  text-align: center;
-}
 
 .html2pdf__page-break {
   display: none !important;

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

@@ -61,7 +61,7 @@
                     <div class="line"></div>
                     <div class="subtitle"> {{ $t('page.business.study.studyFormApply.jcgj') }}</div>
                   </div>
-                  <JcgjList ref="jcgjExportList" :readonly="true" v-show="jcgjlxExport != 999" />
+                  <JcgjExportList ref="jcgjExportList" :readonly="true" v-show="jcgjlxExport != 999" />
                 </div>
               </div>
               <div v-if="showExport" id="watermark-overlay"  ref="watermarkContainer" :style="{
@@ -152,12 +152,13 @@
 import { studyFormApply_jcgjqmxxList, studyFormApply_tb, studyFormApply_info, studyFormApply_jcgj, studyFormApply_qmxx, studyFormApply_exportDetail } from "@/api/business/study/studyFormApply"
 import { mapGetters } from 'vuex'
 import JcgjList from "@/views/business/comps/common/JcgjList";
+import JcgjExportList from "@/views/business/comps/common/JcgjExportList";
 import TemplateTable from '@/views/business/comps/template/TemplateTable';
 import moment from "moment";
 import VueHtml2pdf from 'vue-html2pdf'
 export default {
   name: "Xq",
-  components: { JcgjList, TemplateTable, VueHtml2pdf },
+  components: { JcgjExportList,JcgjList, TemplateTable, VueHtml2pdf },
   data() {
     return {
       watermarkText:'',
@@ -482,56 +483,16 @@ export default {
   background-color: #f2f2f2;
 }
 
-.datatable {
-  border-collapse: collapse;
-  width: 100%;
-}
 
 .upload-file-list .el-upload-list__item {
   margin-bottom: 0px !important;
 }
 
-.datatable thead {
-  border-left: 1px solid #d0d0d0;
-}
-
-.datatable th {
-  padding: 5px 5px 4px 5px;
-  max-width: 200px;
-  line-height: 35px;
-  text-align: center;
-  color: #414753;
-  background: #F5F7FA;
-  border: 1px solid #d0d0d0;
-}
 
 .el-dialog__body {
   padding: 10px 20px !important;
 }
 
-.datatable th.operate {
-  padding: 5px 5px 4px 5px;
-  width: 100px;
-  line-height: 35px;
-  background: #F5F7FA;
-  border: 1px solid #d0d0d0;
-  text-align: center;
-}
-
-.datatable .rowAlt td,
-.datatable tbody tr:nth-child(2n) td {
-  background: #F5F7FA;
-}
-
-.datatable td {
-  border: solid 1px #d0d0d0;
-  padding: 3px 5px 4px 5px;
-  max-width: 100px;
-  color: #414753;
-  line-height: 35px;
-  text-align: center;
-}
-
 .html2pdf__page-break {
   display: none !important;
 }

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

@@ -26,7 +26,7 @@
       <el-button type="primary" @click="exportExcel(999)">{{ $t('page.business.study.studyFormFill.dcbhsjgj') }}
       </el-button>
       <div class="edit-content">
-        <div class="detail-content" style="width: 100%; height: 100%;">
+        <div class="detail-content" style="width: 100%; height: 100%; padding: 0px 10px;">
           <vue-html2pdf :show-layout="true" pdf-content-width="100%" :pdf-format="form.templatePdfSize" :pdf-quality="2"
             :float-layout="false" pdf-orientation="landscape" :paginate-elements-by-height="0" :enable-download="true"
             :preview-modal="false" :filename="form.bdmc" @beforeDownload="addDynamicWatermark" ref="html2Pdf"
@@ -72,7 +72,7 @@
               }"></div>
             </section>
           </vue-html2pdf>
-          <div style="padding: 0px 20px 0px 30px;margin-left: 10px;">
+          <div style="margin-left: 20px;">
             <div class="content-title">
               <div class="line"></div>
               <div class="subtitle"> {{ $t('page.business.study.studyFormFill.qmxx') }}</div>
@@ -483,57 +483,11 @@ export default {
   background-color: #f2f2f2;
 }
 
-.datatable {
-  border-collapse: collapse;
-  width: 100%;
-    page-break-inside: avoid;
-}
 
 .upload-file-list .el-upload-list__item {
   margin-bottom: 0px !important;
 }
 
-.datatable thead {
-  border-left: 1px solid #d0d0d0;
-}
-
-.datatable th {
-  padding: 5px 5px 4px 5px;
-  max-width: 200px;
-  line-height: 35px;
-  text-align: center;
-  color: #414753;
-  background: #F5F7FA;
-  border: 1px solid #d0d0d0;
-}
-
-.el-dialog__body {
-  padding: 10px 20px !important;
-}
-
-.datatable th.operate {
-  padding: 5px 5px 4px 5px;
-  width: 100px;
-  line-height: 35px;
-  background: #F5F7FA;
-  border: 1px solid #d0d0d0;
-  text-align: center;
-}
-
-.datatable .rowAlt td,
-.datatable tbody tr:nth-child(2n) td {
-  background: #F5F7FA;
-}
-
-.datatable td {
-  border: solid 1px #d0d0d0;
-  padding: 3px 5px 4px 5px;
-  max-width: 100px;
-  color: #414753;
-  line-height: 35px;
-  text-align: center;
-}
-
 .html2pdf__page-break {
   display: none !important;
 }