style：登记簿详情

@@ -53,11 +53,9 @@
     },
     watch: {
       isShow (newValue) {
-        this.editItem = this.loadViewFn(this.editItem)
-        document.body.appendChild(this.$el);
         this.$nextTick(() => {
-          // this.editItem = this.loadViewFn(this.editItem)
-          // document.body.appendChild(this.$el);
+          this.editItem = this.loadViewFn(this.editItem)
+          document.body.appendChild(this.$el);
           this.myShow = newValue
         })
       }

@@ -8,6 +8,7 @@
         margin: 0 auto;
         display: flex;
         flex-wrap: wrap;
+        height: 100%;
 
         .title {
             width: 100%;
@@ -259,7 +260,8 @@
         .rollTable {
             margin-top: -2px;
             display: block;
-            height: calc(100vh - 185px);
+            height: 100%;
+            // height: calc(100vh - 185px);
             overflow-y: scroll;
             margin-left: 2px;
         }

 <!--
  * @Description:
  * @Autor: renchao
- * @LastEditTime: 2023-09-18 13:39:51
+ * @LastEditTime: 2023-10-13 14:30:26
 -->
 <template>
   <div class="content">
@@ -14,8 +14,7 @@
         :default-expand-all="true"
         :expand-on-click-node="false"
         node-key="id"
-        :default-checked-keys="[showTab]"
-      >
+        :default-checked-keys="[showTab]">
       </el-tree>
       <el-collapse v-model="activeName" accordion>
         <el-collapse-item
@@ -23,8 +22,7 @@
           ref="sfq"
           v-for="(item, index) in sfqdata"
           :key="index"
-          :name="index"
-        >
+          :name="index">
           <template slot="title">
             <span class="text" @click="tap(item, index)">
               <span> {{ item.label }}</span>
@@ -35,8 +33,7 @@
             :re="item"
             :key="index"
             :class="[isActive == index ? activeCls : '', errorCls]"
-            @click="taplist(item, index)"
-          >
+            @click="taplist(item, index)">
             <span>
               {{ item.label }}
             </span>
@@ -51,298 +48,297 @@
       <component
         :is="componentTag"
         @getBdcdyh="getBdcdyh"
-        v-bind="currentSelectProps"
-      />
+        v-bind="currentSelectProps" />
     </div>
   </div>
 </template>
 <script>
-import { getBdcqljqtsx } from "@/api/djbDetail.js";
-import { loadTreeData, loadsfqData, getNode } from "./djbFrameData.js";
-export default {
-  data() {
-    return {
-      activeName: 0,
-      //接收参数
-      // propsParam: this.$attrs,
-      //左侧目录
-      catalog: {},
-      //选择加载哪一个组件
-      componentTag: "",
-      //子组件接收参数
-      currentSelectProps: {},
-      //左侧树形结构数据
-      treedata: [],
-      sfqdata: [],
-      keyy: "",
-      iskey: "",
-      defaultNode: "",
-      isActive: "",
-      activeCls: "select",
-      errorCls: "unselected",
-      defaultProps: {
-        value: "id",
-        children: "children",
-        label: "label",
-      },
-      showTab: "bdcqldjml", // 选中状态,根据表格中权利类型判断
-    };
-  },
-  props: ["formData"],
-  mounted() {
-    this.loadData(this.formData.bdcdyh);
-  },
-  methods: {
-    /**
-     * @description: getBdcdyh
-     * @author: miaofang
-     * 点击不动产单元号事件
-     */
-    getBdcdyh(val) {
-      this.addloadData(val);
-    },
-    /**
-     * @description: addloadData
-     * @author: miaofang
-     */
-    addloadData(val) {
-      getBdcqljqtsx({
-        bdcdyid: val.bdcdyid,
-        bdcdyh: val.bdcdyh,
-      }).then((res) => {
-        if (res.code === 200) {
-          if (this.sfqdata.some((item) => item.bdcdyid === val.bdcdyid)) {
-            let index = this.sfqdata.findIndex((item) => {
-              return item.bdcdyid == val.bdcdyid;
-            });
-            this.activeName = index;
-            
-            // this.setstyle(index, 0, this.iskey);
-          } else {
-            this.sfqdata.push(loadsfqData(res.result, val.bdcdyh, val.bdcdyid));
-            this.activeName = this.sfqdata.length - 1;
-            this.isActive=""
-            // this.$nextTick(() => {
-            //   this.setstyle(this.sfqdata.length - 1, 0, this.iskey);
-            // })
-          }
-        }
-      });
-      this.currentSelectProps = {
-        bdcdyid: val.bdcdyid,
-        bdcdyh: val.bdcdyh,
-        qllx: this.formData.qllx,
-        bsmQlxx: this.formData.bsmQlxx,
+  import { getBdcqljqtsx } from "@/api/djbDetail.js";
+  import { loadTreeData, loadsfqData, getNode } from "./djbFrameData.js";
+  export default {
+    data () {
+      return {
+        activeName: 0,
+        //接收参数
+        // propsParam: this.$attrs,
+        //左侧目录
+        catalog: {},
+        //选择加载哪一个组件
+        componentTag: "",
+        //子组件接收参数
+        currentSelectProps: {},
+        //左侧树形结构数据
+        treedata: [],
+        sfqdata: [],
+        keyy: "",
+        iskey: "",
+        defaultNode: "",
+        isActive: "",
+        activeCls: "select",
+        errorCls: "unselected",
+        defaultProps: {
+          value: "id",
+          children: "children",
+          label: "label",
+        },
+        showTab: "bdcqldjml", // 选中状态,根据表格中权利类型判断
       };
     },
-    /**
-     * @description: loadData
-     * @author: renchao
-     */
-    loadData(val) {
-      getBdcqljqtsx({
-        bdcdyid: this.formData.bdcdyid,
-        bdcdyh: val,
-      }).then((res) => {
-        if (res.code === 200) {
-          this.treedata = loadTreeData(val);
-          this.sfqdata.push(
-            loadsfqData(res.result, val, this.formData.bdcdyid)
-          );
-          this.$nextTick(function () {
-            this.defaultNode = getNode(
-              this.formData.qllx,
-              { linShi: 0, xianShi: 0, liShi: 0 },
-              res.result.bdcdylx || ""
+    props: ["formData"],
+    mounted () {
+      this.loadData(this.formData.bdcdyh);
+    },
+    methods: {
+      /**
+       * @description: getBdcdyh
+       * @author: miaofang
+       * 点击不动产单元号事件
+       */
+      getBdcdyh (val) {
+        this.addloadData(val);
+      },
+      /**
+       * @description: addloadData
+       * @author: miaofang
+       */
+      addloadData (val) {
+        getBdcqljqtsx({
+          bdcdyid: val.bdcdyid,
+          bdcdyh: val.bdcdyh,
+        }).then((res) => {
+          if (res.code === 200) {
+            if (this.sfqdata.some((item) => item.bdcdyid === val.bdcdyid)) {
+              let index = this.sfqdata.findIndex((item) => {
+                return item.bdcdyid == val.bdcdyid;
+              });
+              this.activeName = index;
+
+              // this.setstyle(index, 0, this.iskey);
+            } else {
+              this.sfqdata.push(loadsfqData(res.result, val.bdcdyh, val.bdcdyid));
+              this.activeName = this.sfqdata.length - 1;
+              this.isActive = ""
+              // this.$nextTick(() => {
+              //   this.setstyle(this.sfqdata.length - 1, 0, this.iskey);
+              // })
+            }
+          }
+        });
+        this.currentSelectProps = {
+          bdcdyid: val.bdcdyid,
+          bdcdyh: val.bdcdyh,
+          qllx: this.formData.qllx,
+          bsmQlxx: this.formData.bsmQlxx,
+        };
+      },
+      /**
+       * @description: loadData
+       * @author: renchao
+       */
+      loadData (val) {
+        getBdcqljqtsx({
+          bdcdyid: this.formData.bdcdyid,
+          bdcdyh: val,
+        }).then((res) => {
+          if (res.code === 200) {
+            this.treedata = loadTreeData(val);
+            this.sfqdata.push(
+              loadsfqData(res.result, val, this.formData.bdcdyid)
             );
-            this.sfqdata[0].children.forEach((item, index) => {
-              if (item.id == this.defaultNode.id) {
-                this.loadComponent(item.form);
-                this.isActive = index;
-              }
+            this.$nextTick(function () {
+              this.defaultNode = getNode(
+                this.formData.qllx,
+                { linShi: 0, xianShi: 0, liShi: 0 },
+                res.result.bdcdylx || ""
+              );
+              this.sfqdata[0].children.forEach((item, index) => {
+                if (item.id == this.defaultNode.id) {
+                  this.loadComponent(item.form);
+                  this.isActive = index;
+                }
+              });
+              // this.setstyle(0, 0, this.iskey);
             });
-            // this.setstyle(0, 0, this.iskey);
-          });
-        }
-      });
-      this.currentSelectProps = {
-        bdcdyid: this.formData.bdcdyid,
-        bdcdyh: val,
-        qllx: this.formData.qllx,
-        bsmQlxx: this.formData.bsmQlxx,
-      };
-    },
-    /**
-     * @description: handleNodeClick
-     * @param {*} data
-     * @author: renchao
-     */
-    handleNodeClick(data) {
-      this.loadComponent(data.form);
-    },
-    // setstyle(newindex, index, key) {
-    //   if (key != undefined || this.keyy == index) {
-    //     if (key != undefined) {
-    //       this.keyy = key;
-    //     }
-    //     this.loadComponent(
-    //       this.$refs.sfq[newindex].$children[this.keyy].$attrs.re.form
-    //     );
-    //     let dpme = this.$refs.sfq[newindex].$children[this.keyy].$el;
-    //     dpme.style.backgroundColor = "#f5f5f5";
-    //     dpme.style.color = "#0079fe";
-    //     dpme.style.borderRight = "4px solid #0079fe";
-    //   } else {
-    //     let dpme = this.$refs.sfq[newindex].$children[this.keyy].$el;
-    //     dpme.style.backgroundColor = "#ffffff";
-    //     dpme.style.color = "black";
-    //     dpme.style.border = "none";
-    //   }
-    // },
-    /**
-     * @description: addlist
-     * @param {*} data
-     * @author: renchao
-     * 新增列表功能
-     */
-    tap(data, index) {
-      this.loadComponent(data.form);
-    },
-    taplist(data, index) {
-      this.loadComponent(data.form);
-      this.isActive = index;
-    },
-    /**
-     * @description: loadComponent
-     * @param {*} form
-     * @author: renchao
-     */
-    loadComponent(form) {
-      this.componentTag = (r) =>
-        require.ensure([], () => r(require("@/views/registerBook/" + form)));
+          }
+        });
+        this.currentSelectProps = {
+          bdcdyid: this.formData.bdcdyid,
+          bdcdyh: val,
+          qllx: this.formData.qllx,
+          bsmQlxx: this.formData.bsmQlxx,
+        };
+      },
+      /**
+       * @description: handleNodeClick
+       * @param {*} data
+       * @author: renchao
+       */
+      handleNodeClick (data) {
+        this.loadComponent(data.form);
+      },
+      // setstyle(newindex, index, key) {
+      //   if (key != undefined || this.keyy == index) {
+      //     if (key != undefined) {
+      //       this.keyy = key;
+      //     }
+      //     this.loadComponent(
+      //       this.$refs.sfq[newindex].$children[this.keyy].$attrs.re.form
+      //     );
+      //     let dpme = this.$refs.sfq[newindex].$children[this.keyy].$el;
+      //     dpme.style.backgroundColor = "#f5f5f5";
+      //     dpme.style.color = "#0079fe";
+      //     dpme.style.borderRight = "4px solid #0079fe";
+      //   } else {
+      //     let dpme = this.$refs.sfq[newindex].$children[this.keyy].$el;
+      //     dpme.style.backgroundColor = "#ffffff";
+      //     dpme.style.color = "black";
+      //     dpme.style.border = "none";
+      //   }
+      // },
+      /**
+       * @description: addlist
+       * @param {*} data
+       * @author: renchao
+       * 新增列表功能
+       */
+      tap (data, index) {
+        this.loadComponent(data.form);
+      },
+      taplist (data, index) {
+        this.loadComponent(data.form);
+        this.isActive = index;
+      },
+      /**
+       * @description: loadComponent
+       * @param {*} form
+       * @author: renchao
+       */
+      loadComponent (form) {
+        this.componentTag = (r) =>
+          require.ensure([], () => r(require("@/views/registerBook/" + form)));
+      },
     },
-  },
-};
+  };
 </script>
 <style scoped lang="scss">
-/deep/.rollTable {
-  height: calc(100vh - 300px) !important;
-}
+  // /deep/.rollTable {
+  //   height: calc(100vh - 300px) !important;
+  // }
 
-.content {
-  width: 100%;
-  height: 100%;
-  display: flex;
+  .content {
+    width: 100%;
+    height: 100%;
+    display: flex;
 
-  .left {
-    width: 256px;
-    height: 704px;
-    background-color: #f5f5f5;
-    color: #333;
-    border: 1px solid rgb(228, 228, 228);
-    overflow-y: auto;
-  }
+    .left {
+      width: 256px;
+      height: 704px;
+      background-color: #f5f5f5;
+      color: #333;
+      border: 1px solid rgb(228, 228, 228);
+      overflow-y: auto;
+    }
 
-  .right {
-    width: calc(100% - 256px);
-    height: 704px;
-    // overflow-y: scroll;
-    // overflow: auto;
-    background-color: #f5f5f5;
-    border: 1px solid rgb(228, 228, 228);
+    .right {
+      width: calc(100% - 256px);
+      height: 704px;
+      // overflow-y: scroll;
+      // overflow: auto;
+      background-color: #f5f5f5;
+      border: 1px solid rgb(228, 228, 228);
+    }
   }
-}
-
-/deep/ .expanded.el-tree-node__expand-icon,
-/deep/ .el-tree-node__expand-icon {
-  visibility: hidden;
-}
 
-/deep/ .el-tree-node__content {
-  border: 1px solid rgb(228, 228, 228);
-  height: 45px;
-}
+  /deep/ .expanded.el-tree-node__expand-icon,
+  /deep/ .el-tree-node__expand-icon {
+    visibility: hidden;
+  }
 
-/deep/ .el-tree-node:focus > .el-tree-node__content {
-  // background-color: #f5f5f5;
-  // color: #0079fe;
-  // border-right: 4px solid #0079fe;
-}
+  /deep/ .el-tree-node__content {
+    border: 1px solid rgb(228, 228, 228);
+    height: 45px;
+  }
 
-/deep/.el-tree-node {
-  white-space: pre-wrap;
-}
+  /deep/ .el-tree-node:focus > .el-tree-node__content {
+    // background-color: #f5f5f5;
+    // color: #0079fe;
+    // border-right: 4px solid #0079fe;
+  }
 
-/deep/ .is-current > .el-tree-node__content {
-  // background-color: #f5f5f5;
-  // color: #0079fe;
-  // border-right: 4px solid #0079fe;
-}
+  /deep/.el-tree-node {
+    white-space: pre-wrap;
+  }
 
-/deep/.el-collapse-item__header {
-  width: 100%;
-  cursor: pointer;
-  position: relative;
-  .el-collapse-item__arrow {
-    position: absolute;
-    top: 15px;
-    right: 0px;
+  /deep/ .is-current > .el-tree-node__content {
+    // background-color: #f5f5f5;
+    // color: #0079fe;
+    // border-right: 4px solid #0079fe;
   }
-  align-items: center;
-  .text {
+
+  /deep/.el-collapse-item__header {
     width: 100%;
+    cursor: pointer;
+    position: relative;
+    .el-collapse-item__arrow {
+      position: absolute;
+      top: 15px;
+      right: 0px;
+    }
+    align-items: center;
+    .text {
+      width: 100%;
+      height: 45px;
+      display: inline-block;
+      span {
+        margin-left: 60px;
+        padding-top: 10px;
+        display: inline-block;
+        line-height: 15px;
+      }
+    }
     height: 45px;
     display: inline-block;
+    line-height: 45px;
+    border: 1px solid rgb(228, 228, 228);
+  }
+  /deep/.el-collapse-item__content {
+    padding-bottom: 5px;
+  }
+  /deep/.unselected {
+    // white-space: wrap;
+    border: none;
+    cursor: pointer;
+    width: 250px;
+    height: 45px;
+    border: 1px solid rgb(228, 228, 228);
+    border-right: 4px solid #f5f5f5;
+    margin: auto;
+    text-align: center;
+    align-items: center;
     span {
-      margin-left: 60px;
-      padding-top: 10px;
+      width: 100%;
       display: inline-block;
-      line-height: 15px;
+      justify-content: center;
+      align-items: center;
     }
   }
-  height: 45px;
-  display: inline-block;
-  line-height: 45px;
-  border: 1px solid rgb(228, 228, 228);
-}
-/deep/.el-collapse-item__content {
-  padding-bottom: 5px;
-}
-/deep/.unselected {
-  // white-space: wrap;
-  border: none;
-  cursor: pointer;
-  width: 250px;
-  height: 45px;
-  border: 1px solid rgb(228, 228, 228);
-  border-right: 4px solid #f5f5f5;
-  margin: auto;
-  text-align: center;
-  align-items: center;
-  span {
-  width: 100%;
-  display: inline-block;
-    justify-content: center;
-    align-items: center;
-  }
-}
 
-.select {
-  border: none;
-  cursor: pointer;
-  width: 250px;
-  height: 45px;
-  background-color: #f5f5f5;
-  color: #0079fe;
-  border-right: 4px solid #0079fe;
-  margin: auto;
-  text-align: center;
-  align-items: center;
-   span {
-  width: 100%;
-  display: inline-block;
-    justify-content: center;
+  .select {
+    border: none;
+    cursor: pointer;
+    width: 250px;
+    height: 45px;
+    background-color: #f5f5f5;
+    color: #0079fe;
+    border-right: 4px solid #0079fe;
+    margin: auto;
+    text-align: center;
     align-items: center;
+    span {
+      width: 100%;
+      display: inline-block;
+      justify-content: center;
+      align-items: center;
+    }
   }
-}
 </style>

@@ -8,6 +8,7 @@
         margin: 0 auto;
         display: flex;
         flex-wrap: wrap;
+        height: 100%;
 
         .title {
             width: 100%;
@@ -258,7 +259,8 @@
         .rollTable {
             margin-top: -2px;
             display: block;
-            height: calc(100vh - 185px);
+            height: calc(100% - 60px);
+            // height: calc(100vh - 185px);
             overflow-y: scroll;
             margin-left: 2px;
         }

 <!--
  * @Description:
  * @Autor: renchao
- * @LastEditTime: 2023-10-13 10:37:29
+ * @LastEditTime: 2023-10-13 13:38:21
 -->
 <template>
   <div>
@@ -196,7 +196,7 @@
         qlxxCol: datas.qlxxCol(),
       };
     },
-    mounted () {
+    created () {
       sendThis(this)
       this.init()
     },