style:样式

@@ -53,7 +53,7 @@ import { mapGetters } from "vuex";
 
 export default {
   name: "bdcqljqtsx",
-  data() {
+  data () {
     return {
       info: {
         bdcdyh: "",
@@ -70,11 +70,11 @@ export default {
   computed: {
     ...mapGetters(["djbxx"]),
   },
-  mounted() {
+  mounted () {
     this.info.bdcdyh = this.djbxx.qlname.bdcdyh;
     this.info.qllx = this.djbxx.qlname.qllx;
 
-    this.djbxx.qlname.djbPrintModelList.forEach((item) => {
+    this.djbxx.qlname?.djbPrintModelList?.length > 0 && this.djbxx.qlname.djbPrintModelList.forEach((item) => {
       console.log("this.info.total", this.info.total);
       this.info.total += Number(item.xh);
       if (item.djlxPrint == "抵押权") {
@@ -98,6 +98,7 @@ export default {
   width: 100%;
   height: 100%;
   background: #fff;
+
   .content {
     width: 50%;
     height: 100%;
@@ -108,12 +109,14 @@ export default {
     font-weight: 700;
     font-size: 18px;
     line-height: 16px;
+
     .title {
       font-size: 32px;
       text-align: center;
       padding: 40px 0;
       line-height: 34px;
     }
+
     .underline {
       font-size: 14px;
       font-weight: normal;

 <template>
-  <dialogBox
-    title="登记簿信息"
-    width="1200px"
-    @closeDialog="closeDialog"
-    v-model="value"
-    :isReset="false"
-    :isSave="false"
-  >
+  <dialogBox title="登记簿信息" width="1200px" @closeDialog="closeDialog" v-model="value" :isReset="false" :isSave="false">
     <div class="content">
       <div class="left">
-        <el-tree
-          ref="tree"
-          :data="treedata"
-          :props="defaultProps"
-          @node-click="handleNodeClick"
-          :default-expand-all="true"
-          :expand-on-click-node="false"
-          node-key="id"
-          :default-checked-keys="[showTab]"
-        ></el-tree>
+        <el-tree ref="tree" :data="treedata" :props="defaultProps" @node-click="handleNodeClick"
+          :default-expand-all="true" :expand-on-click-node="false" node-key="id" :default-checked-keys="[showTab]">
+        </el-tree>
       </div>
       <div class="right">
         <components :is="showTab" :showType="showType"></components>
@@ -46,7 +32,7 @@ export default {
   props: {
     value: { type: Boolean, default: false },
   },
-  data() {
+  data () {
     return {
       treedata: [
         {
@@ -125,7 +111,7 @@ export default {
   },
   watch: {
     djbxx: {
-      handler(newVlue) {
+      handler (newVlue) {
         if (newVlue) {
           var qszts = newVlue.detail.qszts;
           let isZd = newVlue.djbfm.zd;
@@ -157,17 +143,16 @@ export default {
               ")";
           });
         }
-      },
-      immediate: true,
+      }
     },
   },
   methods: {
-    closeDialog() {
+    closeDialog () {
       this.$emit("input", false);
       // 关闭时清空值
       this.$store.dispatch("djbxx/setDjbxx", null);
     },
-    handleNodeClick(data, node, elem) {
+    handleNodeClick (data, node, elem) {
       this.showTab = data.tabs;
       this.showType = data.type ? data.type : "";
     },
@@ -179,6 +164,7 @@ export default {
   width: 100%;
   height: 100%;
   display: flex;
+
   .left {
     width: 256px;
     height: 704px;
@@ -186,6 +172,7 @@ export default {
     color: #333;
     border: 1px solid rgb(228, 228, 228);
   }
+
   .right {
     width: calc(100% - 256px);
     height: 704px;
@@ -199,19 +186,23 @@ export default {
 /deep/ .el-tree-node__expand-icon {
   visibility: hidden;
 }
+
 /deep/ .el-tree-node__content {
   border: 1px solid rgb(228, 228, 228);
   height: 45px;
 }
-/deep/ .el-tree-node:focus > .el-tree-node__content {
+
+/deep/ .el-tree-node:focus>.el-tree-node__content {
   background-color: #f5f5f5;
   color: #0079fe;
   border-right: 4px solid #0079fe;
 }
+
 /deep/.el-tree-node {
   white-space: pre-wrap;
 }
-/deep/ .is-current > .el-tree-node__content {
+
+/deep/ .is-current>.el-tree-node__content {
   background-color: #f5f5f5;
   color: #0079fe;
   border-right: 4px solid #0079fe;

@@ -18,11 +18,7 @@
           </tr>
           <!-- 第一行表头 -->
           <tr class="one">
-            <th
-              v-for="(item, index) in ths"
-              :key="index"
-              :class="[item.class, item.type == '临时' ? 'linshiIcon' : '']"
-            >
+            <th v-for="(item, index) in ths" :key="index" :class="[item.class, item.type == '临时' ? 'linshiIcon' : '']">
               <div class="icon" v-if="item.type == '临时'">{{ item.type }}</div>
               {{ item.type }}
             </th>
@@ -39,14 +35,10 @@
             <td>
               {{ item.label }}
             </td>
-            <td
-              v-for="(item1, index1) in showTableData"
-              :key="index1"
-              :class="[
-                item1.qszt == '2' ? 'lishi' : '',
-                item1.qszt == '0' ? 'linshi' : '',
-              ]"
-            >
+            <td v-for="(item1, index1) in showTableData" :key="index1" :class="[
+              item1.qszt == '2' ? 'lishi' : '',
+              item1.qszt == '0' ? 'linshi' : '',
+            ]">
               {{ item1[item.prop] }}
             </td>
           </tr>
@@ -65,7 +57,7 @@ export default {
   props: {
     showType: "",
   },
-  data() {
+  data () {
     return {
       checkList: ["临时", "现势", "历史"],
       tableWidth: 810,
@@ -83,7 +75,7 @@ export default {
   },
   watch: {
     showType: {
-      handler(newVlue) {
+      async handler (newVlue) {
         // 清空值
         this.tableData = [];
         this.ths = [];
@@ -93,20 +85,17 @@ export default {
         this.tableWidth = 810;
         let detail;
         if (newVlue === "JSYDSYQ") {
-          getJsydsyqList({
+          let res = await getJsydsyqList({
             bdcdyid: "2b33851f4edfd468ceef4d68c370bd41",
             qllx: "A03",
             qszt: ["1"]
-          }).then((res) => {
-            
-            if (res.code === 200) {
-              detail = res.result;
-            }
-          });
+          })
+          detail = res.result;
         } else {
           detail = this.djbxx.detail.qlxxs[newVlue];
         }
-        detail.forEach((item) => {
+        console.log(detail, 'detail');
+        detail.length > 0 && detail.forEach((item) => {
           this.tableData.push(item);
           if (item.qszt == "0") {
             this.ths.push({
@@ -139,11 +128,11 @@ export default {
         let width = (this.tableData.length - 3) * 223 + this.tableWidth;
         this.tableWidth = this.tableData.length > 3 ? width : 810;
       },
-      immediate: true,
+      deep: true
     },
   },
   methods: {
-    checkChange() {
+    checkChange () {
       var checkKey = [];
       this.ths = [];
       this.tableWidth = 810;
@@ -220,6 +209,7 @@ export default {
       line-height: 62px;
       position: relative;
       margin: 1px 0;
+
       .checkbox {
         position: absolute;
         right: 20px;
@@ -236,24 +226,28 @@ export default {
     // .xxTable > tr th:not(:first-child) {
     //   width: 223px;
     // }
-    .xxTable > tr:first-child th {
+    .xxTable>tr:first-child th {
       width: 140px;
     }
 
     .xxTable {
       border-spacing: 1px;
-      tr > th {
+
+      tr>th {
         background: #464c5b;
         color: #fff;
         font-size: 16px;
       }
+
       th.linshi,
       th.xianshi {
         background: #464c5b;
       }
+
       th.lishi {
         background: rgba(70, 76, 91, 0.8);
       }
+
       .one th {
         height: 25px;
         font-size: 14px;
@@ -262,6 +256,7 @@ export default {
       th.linshi {
         color: #fe9400;
       }
+
       .two th {
         height: 45px;
 
@@ -269,9 +264,11 @@ export default {
           font-size: 14px;
         }
       }
+
       .linshiIcon {
         position: relative;
       }
+
       .linshiIcon::after {
         content: "";
         display: block;
@@ -285,6 +282,7 @@ export default {
         right: 3px;
         transform: rotate(-90deg);
       }
+
       .icon {
         position: absolute;
         top: 8px;
@@ -302,16 +300,20 @@ export default {
         font-size: 13px;
         width: 140px;
       }
-      > tr:nth-child(odd) td {
+
+      >tr:nth-child(odd) td {
         background: #f2f2f2;
       }
-      > tr:nth-child(even) td {
+
+      >tr:nth-child(even) td {
         background: #f9f9f9;
       }
+
       td.linshi {
         color: #fe9400;
       }
-      tr > td.lishi {
+
+      tr>td.lishi {
         color: #7f7f7f;
       }
     }