style:预览

 <template>
-  <div class="from-clues">
-      <!-- 表单部分 -->
-      <el-tabs v-model="activeName" @tab-click="handleClick" v-if="headTabBdcqz.length > 1">
-        <el-tab-pane :label="item.qlr + '(' + item.bdcqzh + ')'" :name="item.bsmBdcqz" v-for="(item,index) in headTabBdcqz" :key="index"></el-tab-pane>
-      </el-tabs>
-      <!-- <div class="zsyl-title">{{bdcqz.bdcqzlx == '1' ? '不动产权证书' : '不动产权证明'}}</div> -->
-      <div class="no-data">暂无数据</div>
-      <img :src="previewImage" class="imgClass">   
-    </div>
+  <div class="from-clues" v-loading="loading" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading"
+    element-loading-background="rgba(0, 0, 0, 0.8)">
+    <!-- 表单部分 -->
+    <el-tabs v-model="activeName" @tab-click="handleClick" v-if="headTabBdcqz.length > 1">
+      <el-tab-pane :label="item.qlr + '(' + item.bdcqzh + ')'" :name="item.bsmBdcqz"
+        v-for="(item, index) in headTabBdcqz" :key="index"></el-tab-pane>
+    </el-tabs>
+    <div class="no-data">暂无数据</div>
+    <img :src="previewImage" class="imgClass">
+  </div>
 </template>
 
 <script>
 import { datas } from "../javascript/zsyl.js";
-import { getSlsqBdcqzList,bdcqzPreview} from "@/api/bdcqz.js"
+import { getSlsqBdcqzList, bdcqzPreview } from "@/api/bdcqz.js"
 export default {
   name: "zsyl",
   components: {
@@ -25,6 +26,7 @@ export default {
   },
   data () {
     return {
+      loading: false,
       //印刷序列号集合
       ysxlh: [],
       //列名称对象
@@ -48,50 +50,48 @@ export default {
       },
     }
   },
-  mounted(){
-  },
-  created() {
+  mounted () {
     this.columns = datas.columns();
-    if(this.formData.bdcqz){
-       //从缮证进入
+    if (this.formData.bdcqz) {
+      //从缮证进入
       this.bdcqz = this.formData.bdcqz
-    }else{
+    } else {
       //从按钮进入
       this.getHeadTabBdcqz();
     }
   },
   methods: {
     //获取证书内容
-    getRowValue(code){
+    getRowValue (code) {
       var value = this.bdcqz[code];
       return value;
     },
     //获取受理申请下全部不动产权证
-    getHeadTabBdcqz(){
-      getSlsqBdcqzList({bsmSlsq: this.formData.bsmSlsq}).then(res => {
-          if(res.code == 200){
-            if(res.result && res.result.length > 0){
-              this.activeName = res.result[0].bsmBdcqz
-              this.bdcqz = res.result[0]
-              this.headTabBdcqz = res.result
-              this.getBdcqzPreview();
-            }
+    getHeadTabBdcqz () {
+      this.loading = true
+      getSlsqBdcqzList({ bsmSlsq: this.formData.bsmSlsq }).then(res => {
+        if (res.code == 200) {
+          if (res.result && res.result.length > 0) {
+            this.activeName = res.result[0].bsmBdcqz
+            this.bdcqz = res.result[0]
+            this.headTabBdcqz = res.result
+            this.getBdcqzPreview();
           }
-          
+        }
+
       })
     },
     //tab表头切换方法
-    handleClick(e){
+    handleClick (e) {
       this.bdcqz = this.headTabBdcqz[e.index - 0]
       this.activeName = this.headTabBdcqz.bsmBdcqz
       this.getBdcqzPreview();
     },
-    getBdcqzPreview(){
-      this.$startLoading()
+    getBdcqzPreview () {
       bdcqzPreview(this.bdcqz).then(res => {
-        this.$endLoading()
-        let blob = new Blob([res]); 
-        let url = window.URL.createObjectURL(blob); 
+        this.loading = false
+        let blob = new Blob([res]);
+        let url = window.URL.createObjectURL(blob);
         this.previewImage = url;
       })
     },
@@ -100,47 +100,55 @@ export default {
 </script>
 <style scoped lang="scss">
 @import "~@/styles/mixin.scss";
-.imgClass{
-   display: inline-block;
+
+.imgClass {
+  display: inline-block;
   height: auto;
   max-width: 100%;
 }
+
 .middle_padding {
   padding-bottom: 10px;
 }
-.zsyl-button{
+
+.zsyl-button {
   text-align: center;
   margin-top: 20px;
-  .operation_button{
+
+  .operation_button {
     width: 100px;
-    border: 1px solid rgb(0,121,254);
+    border: 1px solid rgb(0, 121, 254);
   }
+
   .dy-button {
     color: white;
-    background-color: rgb(0,121,254);
+    background-color: rgb(0, 121, 254);
   }
 }
+
 .table-column {
   border-spacing: 1px;
   width: 100%;
+
   tr td {
-      border: 1px solid #ccc;
-      text-align: center;
-      height: 40px;
-      padding: 4px;
-      font-size: 13px;
-      background: rgb(251,249,229);
-  } 
+    border: 1px solid #ccc;
+    text-align: center;
+    height: 40px;
+    padding: 4px;
+    font-size: 13px;
+    background: rgb(251, 249, 229);
+  }
 }
-.zsyl-title{
+
+.zsyl-title {
   background: #FAFBE5;
   text-align: center;
   padding: 5px 0px;
   font-size: 20px;
 }
 
-.no-data{
-  font-size:18px;
+.no-data {
+  font-size: 18px;
   display: flex;
   text-align: center;
   justify-content: center;