优化快照页面和模板预览功能

src/views/FileReview/index.vue

@@ -17,7 +17,25 @@ export default {
   },
   methods: {
     async getFileTemplateUrl () {
-      let res = await Api.post('/file/api/filePreview?fileName=01.pdf')
+      let res = await Api.post('/file/api/templateWord', {
+        fileName: '222.docx',
+        templateName: '222.docx',
+        templateData: {
+          title: '1111',
+          date: '2222',
+          brNo: '3333',
+          amount: '4444',
+          no: '4444',
+          bankName: 'BankName'
+        },
+        text: 'text111',
+        year: '2023',
+        month: '02',
+        day: '27',
+        num1: 'num111',
+        num2: 'num222',
+        lines: 'Java平台由Java虚拟机(Java Virtual Machine)和Java 应用编程接口(Application Programming Interface、简称API)构成。Java 应用编程接口为Java应用提供了一个独立于操作系统的标准接口，可分为基本部分和扩展部分。在硬件或操作系统平台上安装一个Java平台之后，Java应用程序就可运行。Java平台已经嵌入了几乎所有的操作系统。这样Java程序可以只编译一次，就可以在各种系统中运行。Java应用编程接口已经从1.1x版发展到1.2版。常用的Java平台基于Java1.8，最近版本为Java19。'
+      })
       console.log('res===', res)
       this.viewPdf(res)
       // this.fileUrl = 'data:image/png;base64,' + res

src/views/HistoryRecord/components/Table/index.vue

@@ -3,7 +3,10 @@
     <el-table
       :data="tableData"
       border
-      style="width: 100%;max-width: 700px;">
+      style="width: 100%;max-width: 700px;border: 1px solid #6C6C6C;"
+      :cell-style="{borderColor: '#c4c4c4'}"
+      :header-cell-style="{borderColor: '#6C6C6C'}"
+    >
       <el-table-column
         v-for="(item, index) in tableColums"
         :key="index"
@@ -99,6 +102,9 @@
   font-size: 10px;
   color: black;
 }
+::v-deep .el-table th {
+  background-color: #F0F0F0;
+}
 ::v-deep .el-table td {
   padding: 0!important;
 }

src/views/HistoryRecord/index.vue

@@ -94,7 +94,7 @@
           >{{ fieldItem.value }}</div>
       </div>
     </div>
-    <div class="form-tab">
+    <div class="form-tab" v-if="panelList && panelList.length">
       <div
         class="tab-item"
         v-for="(item, index) in panelList"
@@ -227,6 +227,7 @@ export default {
   },
   mounted () {
     this.getConfigData()
+    console.log('$attrs', this.$attrs)
   },
   methods: {
     handleChangeFile () {
@@ -263,18 +264,21 @@ export default {
   position: absolute;
   left: 0;
   top: 0;
-  padding: 16px;
+  padding: 2px;
   box-sizing: border-box;
   display: flex;
   align-items: flex-start;
   justify-content: flex-start;
   flex-direction: column;
+  border: 1px solid #707070;
   .form-content {
     width: 100%;
     flex: 1;
     position: relative;
-    border: 1px solid #f6f6f6;
+    border: 1px solid #B1B1B1;
     overflow-y: auto;
+    background-color: #F0F0F0;
+    padding: 5px 0;
     .field-item {
       .cus-btn {
         background-color: #fff!important;
@@ -292,13 +296,15 @@ export default {
     }
   }
   .form-tab {
-    padding: 10px 10px 0;
+    padding: 5px 0;
     display: flex;
     align-items: flex-start;
     justify-content: flex-start;
     flex-wrap: wrap;
-    border: 1px solid #9ea4ab;
-    margin-top: 10px;
+    border-top: 1px solid #B1B1B1;
+    background-color: #F7F7F7;
+    max-height: 152px;
+    overflow-y: auto;
     .tab-item {
       color: black;
       text-align: center;