style:登记薄模块功能的重构

+import ElCollapse from './src/collapse';
+
+/* istanbul ignore next */
+ElCollapse.install = function(Vue) {
+  Vue.component(ElCollapse.name, ElCollapse);
+};
+
+export default ElCollapse;
+

+<template>
+  <div class="el-collapse-item"
+    :class="{'is-active': isActive, 'is-disabled': disabled }">
+    <div
+      role="tab"
+      :aria-expanded="isActive"
+      :aria-controls="`el-collapse-content-${id}`"
+      :aria-describedby="`el-collapse-content-${id}`">
+      <div
+        class="el-collapse-item__header"
+        @click="handleHeaderClick"
+        role="button"
+        :id="`el-collapse-head-${id}`"
+        :tabindex="disabled ? undefined : 0"
+        @keyup.space.enter.stop="handleEnterClick"
+        :class="{
+          'focusing': focusing,
+          'is-active': isActive
+        }"
+        @focus="handleFocus"
+        @blur="focusing = false">
+        <slot name="title">{{title}}</slot>
+        <i
+          class="el-collapse-item__arrow el-icon-arrow-right"
+          :class="{'is-active': isActive}">
+        </i>
+      </div>
+    </div>
+    <el-collapse-transition>
+      <div
+        class="el-collapse-item__wrap"
+        v-show="isActive"
+        role="tabpanel"
+        :aria-hidden="!isActive"
+        :aria-labelledby="`el-collapse-head-${id}`"
+        :id="`el-collapse-content-${id}`">
+        <div class="el-collapse-item__content">
+          <slot></slot>
+        </div>
+      </div>
+    </el-collapse-transition>
+  </div>
+</template>
+<script>
+  import ElCollapseTransition from 'element-ui/src/transitions/collapse-transition';
+  import Emitter from 'element-ui/src/mixins/emitter';
+  import { generateId } from 'element-ui/src/utils/util';
+
+  export default {
+    name: 'ElCollapseItem',
+
+    componentName: 'ElCollapseItem',
+
+    mixins: [Emitter],
+
+    components: { ElCollapseTransition },
+
+    data () {
+      return {
+        contentWrapStyle: {
+          height: 'auto',
+          display: 'block'
+        },
+        contentHeight: 0,
+        focusing: false,
+        isClick: false,
+        id: generateId()
+      };
+    },
+
+    inject: ['collapse'],
+
+    props: {
+      title: String,
+      name: {
+        type: [String, Number],
+        default () {
+          return this._uid;
+        }
+      },
+      disabled: Boolean
+    },
+
+    computed: {
+      isActive () {
+        return this.collapse.activeNames.indexOf(this.name) > -1;
+      }
+    },
+
+    methods: {
+      handleFocus () {
+        setTimeout(() => {
+          if (!this.isClick) {
+            this.focusing = true;
+          } else {
+            this.isClick = false;
+          }
+        }, 50);
+      },
+      handleHeaderClick () {
+        if (this.disabled) return;
+        this.dispatch('ElCollapse', 'item-click', this);
+        this.focusing = false;
+        this.isClick = true;
+      },
+      handleEnterClick () {
+        this.dispatch('ElCollapse', 'item-click', this);
+      }
+    }
+  };
+</script>

+<!--
+ * @Description: 
+ * @Autor: renchao
+ * @LastEditTime: 2023-11-08 14:36:44
+-->
+<template>
+  <div class="el-collapse" role="tablist" aria-multiselectable="true">
+    <slot></slot>
+  </div>
+</template>
+<script>
+  export default {
+    name: 'ElCollapse',
+
+    componentName: 'ElCollapse',
+
+    props: {
+      accordion: Boolean,
+      value: {
+        type: [Array, String, Number],
+        default () {
+          return [];
+        }
+      }
+    },
+
+    data () {
+      return {
+        activeNames: [].concat(this.value)
+      };
+    },
+
+    provide () {
+      return {
+        collapse: this
+      };
+    },
+
+    watch: {
+      value (value) {
+        this.activeNames = [].concat(value);
+      }
+    },
+
+    methods: {
+      setActiveNames (activeNames) {
+        activeNames = [].concat(activeNames);
+        let value = this.accordion ? activeNames[0] : activeNames;
+        this.activeNames = activeNames;
+        this.$emit('input', value);
+        this.$emit('change', value);
+      },
+      handleItemClick (item) {
+        if (this.accordion) {
+          this.setActiveNames(
+            (this.activeNames[0] || this.activeNames[0] === 0) &&
+              this.activeNames[0] === item.name
+              ? '' : item.name
+          );
+        } else {
+          let activeNames = this.activeNames.slice(0);
+          let index = activeNames.indexOf(item.name);
+
+          if (index > -1) {
+            activeNames.splice(index, 1);
+          } else {
+            activeNames.push(item.name);
+          }
+          this.setActiveNames(activeNames);
+        }
+      }
+    },
+
+    created () {
+      this.$on('item-click', this.handleItemClick);
+    }
+  };
+</script>

 <!--
  * @Description:
  * @Autor: renchao
- * @LastEditTime: 2023-07-19 09:52:07
+ * @LastEditTime: 2023-11-08 14:12:17
 -->
 <template>
   <div class="bdcqljqtsx">
     <el-button class="print" v-print="printObj">打印</el-button>
     <div class="content" v-if="qlxxList.ztqlmc" id="box">
       <div class="title">不动产权利及其他事项<br />登记信息</div>
-      <div>
+      <div style="text-align:center">
         不动产单元号:
         <div class="underline">{{ propsParam.bdcdyh }}</div>
       </div>
       <br /><br /><br />
-      <div>
+      <div class="detail">
         <div class="underline">{{ qlxxList.ztqlmc }}</div>
         登记 共
         <div class="underline">{{ qlxxList.ztql.total }}</div>
         条
       </div>
       <br /><br />
-      <div>
+      <div class="detail">
         抵押权登记 共
         <div class="underline">{{ qlxxList.diyaq.total }}</div>
         条
       </div>
       <br />
-      <div>
+      <div class="detail">
         地役权登记 共
         <div class="underline">{{ qlxxList.diyiq.total }}</div>
         条
       </div>
       <br />
-      <div>
+      <div class="detail">
         预告登记 共
         <div class="underline">{{ qlxxList.ygdj.total }}</div>
         条
       </div>
       <br />
-      <div>
+      <div class="detail">
         异议登记 共
         <div class="underline">{{ qlxxList.yydj.total }}</div>
         条
       </div>
       <br />
-      <div>
+      <div class="detail">
         查封登记 共
         <div class="underline">{{ qlxxList.cfdj.total }}</div>
         条
@@ -60,10 +60,10 @@
     name: "bdcqljqtsx",
     data () {
       return {
-          printObj: {
-        id: "box",
-        //其他配置项，
-      },
+        printObj: {
+          id: "box",
+          //其他配置项，
+        },
         //传递参数
         propsParam: this.$attrs,
         qlxxList: "",
@@ -83,44 +83,45 @@
 </script>
 
 <style lang="scss" scoped>
+  .detail {
+    margin-right: 19%;
+  }
   .bdcqljqtsx {
     width: 100%;
     height: 100%;
     background: #fff;
-  position: relative;
-  .print {
-    // background-color: #0079fe;
-    z-index: 10;
-    position: absolute;
-    left: 11px;
-    top: 5px;
-  }
-
+    position: relative;
+    .print {
+      // background-color: #0079fe;
+      z-index: 10;
+      position: absolute;
+      left: 11px;
+      top: 5px;
+    }
   }
-    .content {
-      width: 50%;
-      height: 100%;
-      margin: 0 auto;
-      text-align: right;
-      color: #333;
-      font-family: "Arial Negreta", "Arial Normal", "Arial", sans-serif;
-      font-weight: 700;
-      font-size: 18px;
-      line-height: 16px;
-
+  .content {
+    width: 50%;
+    height: 100%;
+    margin: 0 auto;
+    text-align: right;
+    color: #333;
+    font-family: "Arial Negreta", "Arial Normal", "Arial", sans-serif;
+    font-weight: 700;
+    font-size: 18px;
+    line-height: 16px;
 
-      .title {
-        font-size: 32px;
-        text-align: center;
-        padding: 40px 0;
-        line-height: 34px;
-      }
+    .title {
+      font-size: 32px;
+      text-align: center;
+      padding: 40px 0;
+      line-height: 34px;
+    }
 
-      .underline {
-        font-size: 14px;
-        font-weight: normal;
-        text-decoration: underline;
-        display: inline-block;
-      }
+    .underline {
+      font-size: 14px;
+      font-weight: normal;
+      text-decoration: underline;
+      display: inline-block;
     }
+  }
 </style>

 <!--
  * @Description:
  * @Autor: renchao
- * @LastEditTime: 2023-10-13 14:30:26
+ * @LastEditTime: 2023-11-08 14:56:03
 -->
 <template>
   <div class="content">
@@ -16,15 +16,15 @@
         node-key="id"
         :default-checked-keys="[showTab]">
       </el-tree>
-      <el-collapse v-model="activeName" accordion>
-        <el-collapse-item
+      <ElCollapse v-model="activeName" accordion>
+        <ElCollapse-item
           class="sfqqq"
           ref="sfq"
           v-for="(item, index) in sfqdata"
           :key="index"
           :name="index">
           <template slot="title">
-            <span class="text" @click="tap(item, index)">
+            <span class="text" :class="[titleActive == index ? 'nameSelect' : '']" @click="tap(item, index)">
               <span> {{ item.label }}</span>
             </span>
           </template>
@@ -41,8 +41,8 @@
               {{ item.zt }}
             </span>
           </p>
-        </el-collapse-item>
-      </el-collapse>
+        </ElCollapse-item>
+      </ElCollapse>
     </div>
     <div class="right">
       <component
@@ -54,11 +54,17 @@
 </template>
 <script>
   import { getBdcqljqtsx } from "@/api/djbDetail.js";
+  import ElCollapse from "@/components/collapse/index";
+  import ElCollapseItem from "@/components/collapse/src/collapse-item.vue";
   import { loadTreeData, loadsfqData, getNode } from "./djbFrameData.js";
   export default {
+    comments: {
+      ElCollapse, ElCollapseItem
+    },
     data () {
       return {
         activeName: 0,
+        titleActive: "",
         //接收参数
         // propsParam: this.$attrs,
         //左侧目录
@@ -109,18 +115,16 @@
           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);
+                return item.bdcdyid == val.bdcdyid
+              })
+              this.activeName = index
+              this.titleActive = -1
+              this.titleActive = this.activeName
             } 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.titleActive = this.activeName
             }
           }
         });
@@ -157,7 +161,6 @@
                   this.isActive = index;
                 }
               });
-              // this.setstyle(0, 0, this.iskey);
             });
           }
         });
@@ -176,25 +179,6 @@
       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
@@ -202,6 +186,9 @@
        * 新增列表功能
        */
       tap (data, index) {
+        this.activeName = index.toString()
+        this.isActive = -1
+        this.titleActive = index
         this.loadComponent(data.form);
       },
       taplist (data, index) {
@@ -216,15 +203,11 @@
       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%;
@@ -322,7 +305,10 @@
       align-items: center;
     }
   }
-
+  .nameSelect {
+    color: #000000;
+    font-weight: 700;
+  }
   .select {
     border: none;
     cursor: pointer;