登记簿左侧菜单重构

@@ -4,7 +4,6 @@
  * @LastEditTime: 2023-07-28 15:45:21
  */
 import { getUserInfo } from '@/api/user'
-import { log } from 'bpmn-js-token-simulation'
 const state = {
     name: '',
     userInfo:{},

 <!--
- * @Description: 
+ * @Description:
  * @Autor: renchao
  * @LastEditTime: 2023-08-15 10:39:19
 -->
@@ -18,7 +18,7 @@
       </tr>
       <tr v-for="(item, index) in bdcqlml" :key="index">
         <td>{{ index + 1 }}</td>
-        <td><el-link type="primary" @click="handleSelectBdcdyh(item.bdcdyh)" :underline="false">{{ item.bdcdyh }} </el-link></td>
+        <td><el-link type="primary" @click="handleSelectBdcdyh(item)" :underline="false">{{ item.bdcdyh }} </el-link></td>
         <td>{{ item.bdclx }}</td>
         <td>{{ item.szbs }}</td>
         <td>{{ item.bz }}</td>

 <!--
- * @Description: 
+ * @Description:
  * @Autor: renchao
  * @LastEditTime: 2023-07-19 09:52:07
 -->
 <template>
   <div class="bdcqljqtsx">
-    <div class="content">
+    <div class="content" v-if="qlxxList.ztqlmc">
       <div class="title">不动产权利及其他事项<br />登记信息</div>
       <div>
         不动产单元号:

@@ -6,147 +6,325 @@
 <template>
   <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
+        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-collapse v-model="activeName" accordion>
+        <el-collapse-item
+        class="sfqqq"
+        ref="sfq"
+          v-for="(item, index) in sfqdata"
+          :key="index"
+          :name="index"
+        >
+          <template slot="title">
+            <span class="text" @click="addlist(item)">
+              <span>
+                {{ item.label }}
+              </span>
+            </span>
+          </template>
+          <el-button
+            v-for="(item, index) in item.children"
+             :re='item'
+            :key="index"
+            class="sfqcontent"
+            @click="addlist(item, index)"
+          >
+            {{ item.label }}
+          </el-button>
+        </el-collapse-item>
+      </el-collapse>
     </div>
     <div class="right">
-      <component :is="componentTag" @getBdcdyh="getBdcdyh" v-bind="currentSelectProps" />
+      <component
+        :is="componentTag"
+        @getBdcdyh="getBdcdyh"
+        v-bind="currentSelectProps"
+      />
     </div>
   </div>
 </template>
 <script>
-  import { getBdcqljqtsx } from "@/api/djbDetail.js";
-  import { loadTreeData, getNode } from "./djbFrameData.js";
-  export default {
-    data () {
-      return {
-        //接收参数
-        // propsParam: this.$attrs,
-        //左侧目录
-        catalog: {},
-        //选择加载哪一个组件
-        componentTag: "",
-        //子组件接收参数
-        currentSelectProps: {},
-        //左侧树形结构数据
-        treedata: [],
-        defaultNode: "",
-        defaultProps: {
-          value: "id",
-          children: "children",
-          label: "label",
-        },
-        showTab: "bdcqldjml", // 选中状态,根据表格中权利类型判断
-      };
-    },
-    props: ["formData"],
-    mounted () {
-      this.loadData(this.formData.bdcdyh);
-    },
-    methods: {
-      getBdcdyh (val) {
-        console.log(val, ';222222222222');
-        // this.loadData(val);
+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: [],
+      defaultNode: "",
+      defaultProps: {
+        value: "id",
+        children: "children",
+        label: "label",
       },
-      /**
-       * @description: loadData
-       * @author: renchao
-       */
-      loadData (val) {
-        getBdcqljqtsx({
-          bdcdyid: this.formData.bdcdyid,
-          bdcdyh: val,
-        }).then((res) => {
-          if (res.code === 200) {
-            this.treedata = loadTreeData(res.result, this.formData.bdcdyh);
-            this.$nextTick(function () {
-              this.defaultNode = getNode(this.formData.qllx, { linShi: 0, xianShi: 0, liShi: 0 }, this.formData.bdcdylx || "");
-              this.$refs.tree.setCurrentKey(this.defaultNode.id); //data[0].id为默认选中的节点
-              this.loadComponent(this.defaultNode.form);
-            })
+      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);
+          } else {
+            this.sfqdata.push(loadsfqData(res.result, val.bdcdyh, val.bdcdyid));
+            this.activeName = this.sfqdata.length - 1;
+           this.$nextTick(() => {
+              this.setstyle(this.sfqdata.length - 1,0);
+           })
           }
-        })
-        this.currentSelectProps = {
-          bdcdyid: this.formData.bdcdyid,
-          bdcdyh: this.formData.bdcdyh,
-          qllx: this.formData.qllx,
-          bsmQlxx: this.formData.bsmQlxx
         }
-      },
-      /**
-       * @description: handleNodeClick
-       * @param {*} data
-       * @param {*} node
-       * @param {*} elem
-       * @author: renchao
-       */
-      handleNodeClick (data, node, elem) {
-        this.loadComponent(data.form);
-      },
-      /**
-       * @description: loadComponent
-       * @param {*} form
-       * @author: renchao
-       */
-      loadComponent (form) {
-        this.componentTag = (r) =>
-          require.ensure([], () => r(require("@/views/registerBook/" + form)))
+      });
+      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.$nextTick(function () {
+            this.defaultNode = getNode(
+              this.formData.qllx,
+              { linShi: 0, xianShi: 0, liShi: 0 },
+              this.formData.bdcdylx || ""
+            );
+            this.$refs.tree.setCurrentKey(this.defaultNode.id); //data[0].id为默认选中的节点
+            this.loadComponent(this.defaultNode.form);
+            this.setstyle(0,0);
+          });
+        }
+      });
+      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);
+    },
+        /**
+     * @description: setstyle
+     * @param {*} data
+     * @author: renchao
+     * 设置样式和点击定位到当前功能
+     */
+    setstyle(newindex,index) {
+      if(index==0){
+         this.loadComponent(this.$refs.sfq[newindex].$children[0].$attrs.re.form);
       }
-    }
-  }
+      let dpme = this.$refs.sfq[newindex].$children[0].$el
+      if (index != 0) {
+        dpme.style.backgroundColor = "#ffffff";
+        dpme.style.color = "black";
+        dpme.style.border = "none";
+      } else {
+        dpme.style.backgroundColor = "#f5f5f5";
+        dpme.style.color = "#0079fe";
+        dpme.style.borderRight = "4px solid #0079fe";
+      }
+    },
+       /**
+     * @description: addlist
+     * @param {*} data
+     * @author: renchao
+     * 新增列表功能
+     */
+    addlist(data, index) {
+       let newindex= this.sfqdata.findIndex((item) => {
+              return item.bdcdyid ==data.bdcdyid;
+            });
+      this.setstyle(newindex,index);
+      this.currentSelectProps.bdcdyid = data.bdcdyid;
+      this.loadComponent(data.form);
+    },
+    /**
+     * @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;
-  }
-
-  .content {
-    width: 100%;
-    height: 100%;
-    display: flex;
-
-    .left {
-      width: 256px;
-      height: 704px;
-      background-color: #f5f5f5;
-      color: #333;
-      border: 1px solid rgb(228, 228, 228);
-    }
+/deep/.rollTable {
+  height: calc(100vh - 300px) !important;
+}
 
-    .right {
-      width: calc(100% - 256px);
-      height: 704px;
-      // overflow-y: scroll;
-      // overflow: auto;
-      background-color: #f5f5f5;
-      border: 1px solid rgb(228, 228, 228);
-    }
-  }
+.content {
+  width: 100%;
+  height: 100%;
+  display: flex;
 
-  /deep/ .expanded.el-tree-node__expand-icon,
-  /deep/ .el-tree-node__expand-icon {
-    visibility: hidden;
-  }
-
-  /deep/ .el-tree-node__content {
+  .left {
+    width: 256px;
+    height: 704px;
+    background-color: #f5f5f5;
+    color: #333;
     border: 1px solid rgb(228, 228, 228);
-    height: 45px;
+    overflow-y: auto;
   }
 
-  /deep/ .el-tree-node:focus > .el-tree-node__content {
+  .right {
+    width: calc(100% - 256px);
+    height: 704px;
+    // overflow-y: scroll;
+    // overflow: auto;
     background-color: #f5f5f5;
-    color: #0079fe;
-    border-right: 4px solid #0079fe;
+    border: 1px solid rgb(228, 228, 228);
   }
+}
 
-  /deep/.el-tree-node {
-    white-space: pre-wrap;
-  }
+/deep/ .expanded.el-tree-node__expand-icon,
+/deep/ .el-tree-node__expand-icon {
+  visibility: hidden;
+}
 
-  /deep/ .is-current > .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: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 {
+  // background-color: #f5f5f5;
+  // color: #0079fe;
+  // border-right: 4px solid #0079fe;
+}
+
+/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/.sfqcontent {
+  white-space: wrap;
+  border: none;
+  padding: 0;
+  margin: 0;
+  cursor: pointer;
+  width: 100%;
+  height: 100px;
+  word-break: break-word;
+  display: inline;
+  span {
+    font-size: 13px;
+    display: block;
+    line-height: 15px;
+    margin-left: 70px;
   }
+  height: 45px;
+  border: 1px solid rgb(228, 228, 228);
+  border-right: 4px solid #f5f5f5;
+}
+.sfqcontent:hover {
+  background-color: #f5f5f5;
+  color: black;
+}
+.sfqcontent:focus {
+  background-color: #f5f5f5;
+  color: #0079fe;
+  border-right: 4px solid #0079fe;
+}
 </style>

+import { log } from "bpmn-js-token-simulation";
 
 
 var qlxxPage = [
@@ -41,34 +42,36 @@ var qlxxPage = [
 //组装登记簿树形结构
 /**
  * @description: 组装登记簿树形结构
- * @param {*} qlxxData
  * @param {*} bdcdyh
  * @author: renchao
  */
-export function loadTreeData(qlxxData, bdcdyh) {
+export function loadTreeData(bdcdyh) {
     let treedata = [];
     //加载封面
     treedata.push({ id: "djbfm", form: "djbfm.vue", label: "登记簿封面" });
     treedata.push({ id: "zdjbxx", form: "zdjbxx.vue", label: "宗地基本信息\n(" + bdcdyh.substring(0, 19) + ")", children: [] });
     treedata[1].children.push({ id: "bdcqldjml", form: "bdcqldjml.vue", label: "不动产权利登记目录", children: [] });
-    treedata[1].children[0].children.push({
-        id: "bdcqljqtsx", form: "bdcqljqtsx.vue", label: "不动产权利及其他事项\n (" + bdcdyh.slice(19) + ")", children: [],
-    });
-    //主体权利
-    treedata[1].children[0].children[0].children.push(getNode(qlxxData.ztqllx, qlxxData.ztql, qlxxData.bdcdylx));
-    //抵押权
-    treedata[1].children[0].children[0].children.push(getNode("A37", qlxxData.diyaq, ''));
-    //地役权
-    treedata[1].children[0].children[0].children.push(getNode("A19", qlxxData.diyiq, ''));
-    //预告登记
-    treedata[1].children[0].children[0].children.push(getNode("B40", qlxxData.ygdj, ''));
-    //异议登记
-    treedata[1].children[0].children[0].children.push(getNode("B38", qlxxData.yydj, ''));
-    //查封登记
-    treedata[1].children[0].children[0].children.push(getNode("B39", qlxxData.cfdj, ''));
-
     return treedata;
 }
+export function loadsfqData(qlxxData, bdcdyh,bdcdyid) {
+ let treedata={
+  bdcdyid:bdcdyid,id: "bdcqljqtsx", form: "bdcqljqtsx.vue", label: "不动产权利及其他事项\n (" + bdcdyh.slice(19) + ")", children: [],
+  };
+  //主体权利
+  treedata.children.push(getNode(qlxxData.ztqllx, qlxxData.ztql, qlxxData.bdcdylx,bdcdyid));
+  //抵押权
+  treedata.children.push(getNode("A37", qlxxData.diyaq, '',bdcdyid));
+  //地役权
+  treedata.children.push(getNode("A19", qlxxData.diyiq, '',bdcdyid));
+  //预告登记
+  treedata.children.push(getNode("B40", qlxxData.ygdj, '',bdcdyid));
+  //异议登记
+  treedata.children.push(getNode("B38", qlxxData.yydj, '',bdcdyid));
+  //查封登记
+  treedata.children.push(getNode("B39", qlxxData.cfdj, '',bdcdyid));
+
+  return treedata;
+}
 
 //获取权利类型、不动产单元类型对应的树形节点信息
 /**
@@ -78,18 +81,18 @@ export function loadTreeData(qlxxData, bdcdyh) {
  * @param {*} bdcdylx
  * @author: renchao
  */
-export function getNode(qllx, qlxx, bdcdylx) {
+export function getNode(qllx, qlxx, bdcdylx,bdcdyid) {
     let node;
     for (var i = 0; i < qlxxPage.length; i++) {
         if (qlxxPage[i].qllx == qllx) {
             if (qllx == "A04" || qllx == "A06" || qllx == "A08") {
                 if (bdcdylx == "4") {
-                    node = { id: "fdcq1", form: "fdcq1.vue", label: qlxxPage[i].label + "(临:" + qlxx.linShi + "，现:" + qlxx.xianShi + "，历:" + qlxx.liShi +")"};
+                    node = {bdcdyid:bdcdyid,id: "fdcq1", form: "fdcq1.vue", label: qlxxPage[i].label + "(临:" + qlxx.linShi + "，现:" + qlxx.xianShi + "，历:" + qlxx.liShi +")"};
                 } else {
-                    node = { id: "fdcq2", form: "fdcq2.vue", label: qlxxPage[i].label + "(临:" + qlxx.linShi + "，现:" + qlxx.xianShi + "，历:" + qlxx.liShi +")"};
+                    node = { bdcdyid:bdcdyid,id: "fdcq2", form: "fdcq2.vue", label: qlxxPage[i].label + "(临:" + qlxx.linShi + "，现:" + qlxx.xianShi + "，历:" + qlxx.liShi +")"};
                 }
             } else {
-                node = { id: qlxxPage[i].id, form: qlxxPage[i].form, label: qlxxPage[i].label + "(临:" + qlxx.linShi + "，现:" + qlxx.xianShi + "，历:" + qlxx.liShi +")"};
+                node = { bdcdyid:bdcdyid,id: qlxxPage[i].id, form: qlxxPage[i].form, label: qlxxPage[i].label + "(临:" + qlxx.linShi + "，现:" + qlxx.xianShi + "，历:" + qlxx.liShi +")"};
             }
             break;
         }

@@ -6,215 +6,394 @@
 <template>
   <div class="content loadingtext">
     <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
+        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-collapse v-model="activeName" accordion>
+        <el-collapse-item
+        class="sfqqq"
+        ref="sfq"
+          v-for="(item, index) in sfqdata"
+          :key="index"
+          :name="index"
+        >
+          <template slot="title">
+            <span class="text" @click="addlist(item)">
+              <span>
+                {{ item.label }}
+              </span>
+            </span>
+          </template>
+          <el-button
+            v-for="(item, index) in item.children"
+             :re='item'
+            :key="index"
+            class="sfqcontent"
+            @click="addlist(item, index)"
+          >
+            {{ item.label }}
+          </el-button>
+        </el-collapse-item>
+      </el-collapse>
     </div>
     <div class="right">
-      <component :is="componentTag" v-bind="currentSelectProps" />
+      <component
+        :is="componentTag"
+        @getBdcdyh="getBdcdyh"
+        v-bind="currentSelectProps"
+      />
     </div>
   </div>
 </template>
 <script>
-  import { getBdcqljqtsx } from "@/api/djbDetail.js";
-  import { loadTreeData, getNode } from "./djbFrameData.js";
-  import { searchTaskToDo } from "@/api/workflow/search.js";
-  import {
-    leftMenu
-  } from "@/api/workFlow.js";
-  export default {
-    data () {
-      return {
-        //接收参数
-        // propsParam: this.$attrs,
-        //左侧目录
-        catalog: {},
-        //选择加载哪一个组件
-        componentTag: "",
-        //子组件接收参数
-        currentSelectProps: {},
-        //左侧树形结构数据
-        treedata: [],
-        // 查询参数
-        queryForm: {},
+import { getBdcqljqtsx } from "@/api/djbDetail.js";
+import { loadTreeData,loadsfqData, getNode } from "./djbFrameData.js";
+import { searchTaskToDo } from "@/api/workflow/search.js";
+import { leftMenu } from "@/api/workFlow.js";
+export default {
+  data() {
+    return {
+      //接收参数
+      // propsParam: this.$attrs,
+      //左侧目录
+      catalog: {},
+      //选择加载哪一个组件
+      componentTag: "",
+      //子组件接收参数
+      currentSelectProps: {},
+      //左侧树形结构数据
+      treedata: [],
+       sfqdata: [],
+       activeName: 0,
+      // 查询参数
+      queryForm: {},
 
-        defaultNode: "",
-        defaultProps: {
-          value: "id",
-          children: "children",
-          label: "label",
-        },
-        showTab: "bdcqldjml", // 选中状态,根据表格中权利类型判断
-      };
+      defaultNode: "",
+      defaultProps: {
+        value: "id",
+        children: "children",
+        label: "label",
+      },
+      showTab: "bdcqldjml", // 选中状态,根据表格中权利类型判断
+    };
+  },
+  mounted() {
+    this.getdata();
+  },
+  methods: {
+    // 截取字符的方法
+    /**
+     * @description: 截取字符的方法
+     * @param {*} obj
+     * @author: renchao
+     */
+    getCaption(obj) {
+      let index = obj.lastIndexOf("=");
+      obj = obj.substring(index + 1, obj.length);
+      return obj;
     },
-    mounted () {
-      this.getdata()
+    // 通过不动产业务号获取参数
+    /**
+     * @description: 通过不动产业务号获取参数
+     * @author: renchao
+     */
+    getdata() {
+      this.queryForm = {
+        bdcdyh: this.getCaption(window.location.href),
+        currentPage: 1,
+        djlx: "",
+        pageSize: 10,
+        qllx: "",
+        ywh: "",
+        ywly: "",
+      };
+      if (this.queryForm) {
+        this.$startLoading();
+        searchTaskToDo({
+          ...this.queryForm,
+        }).then((res) => {
+          if (res.code === 200) {
+            let { records } = res.result;
 
+            this.loadBdcdylist(records[0].bsmSlsq, records[0].bestepid);
+            this.$endLoading();
+          }
+        });
+      }
     },
-    methods: {
-      // 截取字符的方法
-      /**
-       * @description: 截取字符的方法
-       * @param {*} obj
-       * @author: renchao
-       */
-      getCaption (obj) {
-        let index = obj.lastIndexOf("=");
-        obj = obj.substring(index + 1, obj.length);
-        return obj
-      },
-      // 通过不动产业务号获取参数
-      /**
-       * @description: 通过不动产业务号获取参数
-       * @author: renchao
-       */
-      getdata () {
-        this.queryForm = {
-          bdcdyh: this.getCaption(window.location.href),
-          currentPage: 1,
-          djlx: "",
-          pageSize: 10,
-          qllx: "",
-          ywh: "",
-          ywly: ""
-        }
-        if (this.queryForm) {
-           this.$startLoading();
-          searchTaskToDo({
-            ...this.queryForm,
-          }).then((res) => {
-            if (res.code === 200) {
-              let { records } = res.result;
 
-              this.loadBdcdylist(records[0].bsmSlsq, records[0].bestepid);
-               this.$endLoading();
-            }
-          });
+    // 获取不动产信息
+    /**
+     * @description: 获取不动产信息
+     * @param {*} a
+     * @param {*} b
+     * @author: renchao
+     */
+    loadBdcdylist(a, b) {
+      var formdata = new FormData();
+      formdata.append("bsmSlsq", a);
+      formdata.append("bestepid", b);
+      leftMenu(formdata).then((res) => {
+        if (res.code === 200) {
+          if (res.result) {
+            this.currentSelectProps = res.result[0];
+            this.loadData(this.currentSelectProps.bdcdyh);
+          }
         }
+      });
+    },
 
-      },
-
-      // 获取不动产信息
-      /**
-       * @description: 获取不动产信息
-       * @param {*} a
-       * @param {*} b
-       * @author: renchao
-       */
-      loadBdcdylist (a, b) {
-        var formdata = new FormData();
-        formdata.append("bsmSlsq", a);
-        formdata.append("bestepid", b);
-        leftMenu(formdata).then((res) => {
-          if (res.code === 200) {
-            if (res.result) {
-              this.currentSelectProps = res.result[0];
-              this.loadData();
-            }
-          }
-        });
-      },
-      /**
-       * @description: loadData
-       * @author: renchao
-       */
-      loadData () {
-        getBdcqljqtsx({
-          bdcdyid: this.currentSelectProps.bdcdyid,
-          bdcdyh: this.currentSelectProps.bdcdyh,
-        }).then((res) => {
-          if (res.code === 200) {
-            this.treedata = loadTreeData(res.result, this.currentSelectProps.bdcdyh);
-            this.$nextTick(function () {
-              this.defaultNode = getNode(this.currentSelectProps.qllx, { linShi: 0, xianShi: 0, liShi: 0 }, "");
-              this.$refs.tree.setCurrentKey(this.defaultNode.id); //data[0].id为默认选中的节点
-              this.loadComponent(this.defaultNode.form);
+     /**
+     * @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);
+          } else {
+            this.sfqdata.push(loadsfqData(res.result, val.bdcdyh, val.bdcdyid));
+            this.activeName = this.sfqdata.length - 1;
+           this.$nextTick(() => {
+              this.setstyle(this.sfqdata.length - 1,0);
+           })
           }
-        });
-        this.currentSelectProps = {
-          bdcdyid: this.currentSelectProps.bdcdyid,
-          bdcdyh: this.currentSelectProps.bdcdyh,
-          qllx: this.currentSelectProps.qllx,
-          bsmQlxx: this.currentSelectProps.bsmQlxx,
-        };
-      },
-      /*
+        }
+      });
+      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.currentSelectProps.bdcdyid,
+        bdcdyh: val,
+      }).then((res) => {
+        if (res.code === 200) {
+          this.treedata = loadTreeData(
+            val
+          );
+            this.sfqdata.push(
+            loadsfqData(res.result, val, this.currentSelectProps.bdcdyid)
+          );
+          this.$nextTick(function () {
+            this.defaultNode = getNode(
+              this.currentSelectProps.qllx,
+              { linShi: 0, xianShi: 0, liShi: 0 },
+              ""
+            );
+            this.$refs.tree.setCurrentKey(this.defaultNode.id); //data[0].id为默认选中的节点
+            this.loadComponent(this.defaultNode.form);
+            this.setstyle(0,0);
+          });
+        }
+      });
+      this.currentSelectProps = {
+        bdcdyid: this.currentSelectProps.bdcdyid,
+        bdcdyh: this.currentSelectProps.bdcdyh,
+        qllx: this.currentSelectProps.qllx,
+        bsmQlxx: this.currentSelectProps.bsmQlxx,
+      };
+    },
+    /*
         点击登记簿菜单
        */
+    /**
+     * @description: 点击登记簿菜单
+     * @param {*} data
+     * @author: renchao
+     */
+    handleNodeClick(data) {
+      this.loadComponent(data.form);
+    },
+
+            /**
+     * @description: setstyle
+     * @param {*} data
+     * @author: renchao
+     * 设置样式和点击定位到当前功能
+     */
+    setstyle(newindex,index) {
+      if(index==0){
+         this.loadComponent(this.$refs.sfq[newindex].$children[0].$attrs.re.form);
+      }
+      let dpme = this.$refs.sfq[newindex].$children[0].$el
+      if (index != 0) {
+        dpme.style.backgroundColor = "#ffffff";
+        dpme.style.color = "black";
+        dpme.style.border = "none";
+      } else {
+        dpme.style.backgroundColor = "#f5f5f5";
+        dpme.style.color = "#0079fe";
+        dpme.style.borderRight = "4px solid #0079fe";
+      }
+    },
+       /**
+     * @description: addlist
+     * @param {*} data
+     * @author: renchao
+     * 新增列表功能
+     */
+    addlist(data, index) {
+       let newindex= this.sfqdata.findIndex((item) => {
+              return item.bdcdyid ==data.bdcdyid;
+            });
+      this.setstyle(newindex,index);
+      this.currentSelectProps.bdcdyid = data.bdcdyid;
+      this.loadComponent(data.form);
+    },
       /**
-       * @description: 点击登记簿菜单
-       * @param {*} data
-       * @param {*} node
-       * @param {*} elem
-       * @author: renchao
-       */
-      handleNodeClick (data, node, elem) {
-        this.loadComponent(data.form);
-      },
-      /**
-       * @description: loadComponent
-       * @param {*} form
-       * @author: renchao
-       */
-      loadComponent (form) {
-        this.componentTag = (r) =>
-          require.ensure([], () => r(require("@/views/registerBook/" + form)));
-      },
+     * @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(120vh - 254px) !important;
+/deep/.rollTable {
+  height: calc(120vh - 254px) !important;
+}
+
+.content {
+  width: 100%;
+  height: 100%;
+  display: flex;
+
+  .left {
+    width: 256px;
+    height: 100%;
+    background-color: #f5f5f5;
+    color: #333;
+    border: 1px solid rgb(228, 228, 228);
   }
 
-  .content {
-    width: 100%;
+  .right {
+    width: calc(100% - 256px);
     height: 100%;
-    display: flex;
+    // overflow-y: scroll;
+    overflow: auto;
+    background-color: #f5f5f5;
+    border: 1px solid rgb(228, 228, 228);
+  }
+}
 
-    .left {
-      width: 256px;
-      height: 100%;
-      background-color: #f5f5f5;
-      color: #333;
-      border: 1px solid rgb(228, 228, 228);
-    }
+/deep/ .expanded.el-tree-node__expand-icon,
+/deep/ .el-tree-node__expand-icon {
+  visibility: hidden;
+}
 
-    .right {
-      width: calc(100% - 256px);
-      height: 100%;
-      // overflow-y: scroll;
-      overflow: auto;
-      background-color: #f5f5f5;
-      border: 1px solid rgb(228, 228, 228);
-    }
-  }
+/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-collapse-item__header {
+  width: 100%;
+  cursor: pointer;
+  position: relative;
+  .el-collapse-item__arrow {
+    position: absolute;
+    top: 15px;
+    right: 0px;
   }
-
-  /deep/.el-tree-node {
-    white-space: pre-wrap;
+  align-items: center;
+  .text {
+    width: 100%;
+    height: 45px;
+    display: inline-block;
+    span {
+      margin-left: 60px;
+      padding-top: 10px;
+      display: inline-block;
+      line-height: 15px;
+    }
   }
-
-  /deep/ .is-current > .el-tree-node__content {
-    background-color: #f5f5f5;
-    color: #0079fe;
-    border-right: 4px solid #0079fe;
+  height: 45px;
+  display: inline-block;
+  line-height: 45px;
+  border: 1px solid rgb(228, 228, 228);
+}
+/deep/.el-collapse-item__content {
+  padding-bottom: 5px;
+}
+/deep/.sfqcontent {
+  white-space: wrap;
+  border: none;
+  padding: 0;
+  margin: 0;
+  cursor: pointer;
+  width: 100%;
+  height: 100px;
+  word-break: break-word;
+  display: inline;
+  span {
+    font-size: 13px;
+    display: block;
+    line-height: 15px;
+    margin-left: 70px;
   }
+  height: 45px;
+  border: 1px solid rgb(228, 228, 228);
+  border-right: 4px solid #f5f5f5;
+}
+.sfqcontent:hover {
+  background-color: #f5f5f5;
+  color: black;
+}
+.sfqcontent:focus {
+  background-color: #f5f5f5;
+  color: #0079fe;
+  border-right: 4px solid #0079fe;
+}
 </style>