fix:添加滚动条及图片放大功能

src/views/FinancialManagement/CarInsurance/CompanySettlement/CarInsurance/InvoicingUnsettled.vue

@@ -190,6 +190,12 @@
         >
       </span>
     </el-dialog>
+    <el-image-viewer
+      v-if="showViewer"
+      :on-close="closeViewer"
+      :z-index="9999"
+      :url-list="[ProViewImg]"
+    />
   </div>
 </template>
 <script>
@@ -199,7 +205,12 @@ import yearMonthYay from "../../PlatformSettlement/yearMonthYay.vue";
 import { Decimal } from "decimal.js";
 export default {
   name: "InvoicingUnsettled",
-  components: { templateTable, yearMonthYay },
+  components: {
+    templateTable,
+    yearMonthYay,
+    "el-image-viewer": () =>
+      import("element-ui/packages/image/src/image-viewer"),
+  },
   created() {},
   computed: {
     ...mapState({
@@ -209,6 +220,8 @@ export default {
   data() {
     return {
       // 记录 明细
+      ProViewImg: "",
+      showViewer: false,
       dialogVisiblerecord: false,
       dialogVisiblerecordDetail: false,
       formTableDatarecord: [],
@@ -542,6 +555,10 @@ export default {
     },
   },
   methods: {
+    // 关闭查看器
+    closeViewer() {
+      this.showViewer = false;
+    },
     //改变事件
     amountChange(row) {
       if (

src/views/FinancialManagement/CarInsurance/CompanySettlement/NoCarInsurance/InvoicingUnsettled.vue

@@ -191,6 +191,12 @@
         >
       </span>
     </el-dialog>
+    <el-image-viewer
+      v-if="showViewer"
+      :on-close="closeViewer"
+      :z-index="9999"
+      :url-list="[ProViewImg]"
+    />
   </div>
 </template>
 <script>
@@ -200,7 +206,12 @@ import yearMonthYay from "../../PlatformSettlement/yearMonthYay.vue";
 import { Decimal } from "decimal.js";
 export default {
   name: "baosi",
-  components: { templateTable, yearMonthYay },
+  components: {
+    templateTable,
+    yearMonthYay,
+    "el-image-viewer": () =>
+      import("element-ui/packages/image/src/image-viewer"),
+  },
   created() {},
   computed: {
     ...mapState({
@@ -209,6 +220,8 @@ export default {
   },
   data() {
     return {
+      ProViewImg: "",
+      showViewer: false,
       // 记录 明细
       dialogVisiblerecord: false,
       dialogVisiblerecordDetail: false,
@@ -515,6 +528,10 @@ export default {
     },
   },
   methods: {
+    // 关闭查看器
+    closeViewer() {
+      this.showViewer = false;
+    },
     //改变事件
     amountChange(row) {
       if (

src/views/FinancialManagement/CarInsurance/PlatformSettlement/NonVehicleBalancestatus.vue

@@ -45,30 +45,36 @@
       width="40%"
       :before-close="handleCloserecord"
     >
-      <templateTable
-        ref="templateTable1"
-        :pagination="pageDatarecord"
-        @getList="getListrecord"
-        :tableConfig="tableConfigDetailrecord"
-        :data="formTableDatarecord"
-        @findPage="findPageDetailrecord"
-      >
-        <template slot="imageUrl" slot-scope="scope" v-if="scope.row.imageUrl">
-          <div style="border: 2px solid #f2f2f2; box-sizing: border-box">
-            <el-image
-              style="width: 100px; height: 30px"
-              :src="`${process + scope.row.imageUrl}`"
-              :preview-src-list="[`${process + scope.row.imageUrl}`]"
-            ></el-image>
-          </div>
-          <!-- <img
+      <div class="table-overflow">
+        <templateTable
+          ref="templateTable1"
+          :pagination="pageDatarecord"
+          @getList="getListrecord"
+          :tableConfig="tableConfigDetailrecord"
+          :data="formTableDatarecord"
+          @findPage="findPageDetailrecord"
+        >
+          <template
+            slot="imageUrl"
+            slot-scope="scope"
+            v-if="scope.row.imageUrl"
+          >
+            <div style="border: 2px solid #f2f2f2; box-sizing: border-box">
+              <el-image
+                style="width: 100px; height: 30px"
+                :src="`${process + scope.row.imageUrl}`"
+                :preview-src-list="[`${process + scope.row.imageUrl}`]"
+              ></el-image>
+            </div>
+            <!-- <img
             
             :src="`${process + scope.row.imageUrl}`"
             :preview-src-list="[tixianDetails.bankReceipt]"
             class="imageclass"
           /> -->
-        </template>
-      </templateTable>
+          </template>
+        </templateTable>
+      </div>
       <span slot="footer" class="dialog-footer">
         <el-button size="small" @click="dialogVisiblerecord = false"
           >取消</el-button
@@ -103,16 +109,17 @@
       :visible.sync="dialogVisibleRecordDetail"
       width="50%"
       :before-close="handleCloseRecordDetail"
-    >
-      <templateTable
-        ref="templateTable2"
-        :pagination="pageDataRecordDetail"
-        @getList="getListRecordDetail"
-        :tableConfig="tableConfigDetailDetail"
-        :data="formTableDatarecordDetail"
-        @findPage="findPageRecordDetail"
-      >
-      </templateTable>
+      ><div class="table-overflow">
+        <templateTable
+          ref="templateTable2"
+          :pagination="pageDataRecordDetail"
+          @getList="getListRecordDetail"
+          :tableConfig="tableConfigDetailDetail"
+          :data="formTableDatarecordDetail"
+          @findPage="findPageRecordDetail"
+        >
+        </templateTable>
+      </div>
       <span slot="footer" class="dialog-footer">
         <el-button size="small" @click="dialogVisibleRecordDetail = false"
           >取消</el-button