登记簿拆分

@@ -32,6 +32,14 @@ export const constantRoutes = [
     hidden: true,
     meta: { title: '发起申请' }
   },
+  //登记簿详情
+  {
+    path: '/djbFrameall',
+    component: () => import('@/views/registerBook/djbFrameall.vue'),
+    name: 'djbFrameall',
+    hidden: true,
+    meta: { title: '登记簿详情' }
+  },
   // 业务流程只读框架
   {
     path: '/workFrameView',

+<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>
+    </div>
+    <div class="right">
+      <component :is="componentTag" v-bind="currentSelectProps" />
+    </div>
+  </div>
+</template>
+<script>
+  import { getBdcqljqtsx } from "@/api/registerBook.js";
+  import { loadTreeData, getNode } from "./djbFrameData.js";
+  import { searchTaskToDo } from "@/api/ywbl";
+  import {
+    leftMenu
+  } from "@/api/fqsq.js";
+  export default {
+    data () {
+      return {
+        //接收参数
+        // propsParam: this.$attrs,
+        //左侧目录
+        catalog: {},
+        //选择加载哪一个组件
+        componentTag: "",
+        //子组件接收参数
+        currentSelectProps: {},
+        //左侧树形结构数据
+        treedata: [],
+        // 查询参数
+        queryForm: {},
+
+        defaultNode: "",
+        defaultProps: {
+          value: "id",
+          children: "children",
+          label: "label",
+        },
+        showTab: "bdcqldjml", // 选中状态,根据表格中权利类型判断
+      };
+    },
+    mounted () {
+      this.getdata()
+
+    },
+    methods: {
+      // 截取字符的方法
+      getCaption (obj) {
+        let index = obj.lastIndexOf("=");
+        obj = obj.substring(index + 1, obj.length);
+        return obj
+      },
+      // 通过不动产业务号获取参数
+      getdata () {
+        this.queryForm = {
+          bdcdyh: this.getCaption(window.location.href),
+          currentPage: 1,
+          djlx: "",
+          pageSize: 10,
+          qllx: "",
+          ywh: "",
+          ywly: ""
+        }
+        if (this.queryForm) {
+          searchTaskToDo({
+            ...this.queryForm,
+          }).then((res) => {
+            if (res.code === 200) {
+              let { records } = res.result;
+
+              this.loadBdcdylist(records[0].bsmSlsq, records[0].bestepid);
+            }
+          });
+        }
+
+      },
+
+      // 获取不动产信息
+      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();
+            }
+          }
+        });
+      },
+      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);
+            });
+          }
+        });
+        this.currentSelectProps = {
+          bdcdyid: this.currentSelectProps.bdcdyid,
+          bdcdyh: this.currentSelectProps.bdcdyh,
+          qllx: this.currentSelectProps.qllx,
+          bsmQlxx: this.currentSelectProps.bsmQlxx,
+        };
+      },
+      /*
+        点击登记簿菜单
+       */
+      handleNodeClick (data, node, elem) {
+        this.loadComponent(data.form);
+      },
+      loadComponent (form) {
+        this.componentTag = (r) =>
+          require.ensure([], () => r(require("@/views/registerBook/" + form)));
+      },
+    },
+  };
+</script>
+<style scoped lang="scss">
+  /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);
+    }
+
+    .right {
+      width: calc(100% - 256px);
+      height: 100%;
+      // 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/ .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;
+  }
+</style>