style:预览

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