style:权利信息

 import filter from '@/utils/filter.js'
+
 class data extends filter {
   constructor() {
     super()
   }
   columns () {
-    return {
-      title: "建设用地使用权、宅基地使用权登记信息",
-      columns: [
+    return [
       {
         prop: "ssywh",
-          label: "上手业务号"
+        label: "上手业务号",
+        width: "120"
       },
       {
         prop: "dah",
@@ -92,8 +92,6 @@ class data extends filter {
         label: "附记",
       },
     ]
-
-    }
   }
 }
 

@@ -12,12 +12,12 @@
         </div>
       </div>
       <div class="xxTableBox">
-        <table class="xxTable" :width="tableWidth">
+        <table class="xxTable">
           <tr>
             <th rowspan="3">业务类型</th>
           </tr>
           <!-- 第一行表头 -->
-          <tr class="one" id="">
+          <tr class="one">
             <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 }}
@@ -49,55 +49,112 @@
 </template>
 
 <script>
-import { mapGetters } from "vuex";
 import { datas } from "./jsydsyq";
 import { getJsydsyqList } from "@/api/zhcx.js";
 export default {
-  name: "djxxTable",
-  props: {
-    showType: "",
-  },
+  name: "jsydsyq",
   data () {
     return {
       checkList: ["临时", "现势", "历史"],
-      tableWidth: 810,
-      type: datas.columns(),
       tableData: [],
       showTableData: [],
       ths: [],
-      showThs: [],
       columns: [],
-      title: "",
-    };
+      title: "建设用地使用权、宅基地使用权登记信息",
+      list: [
+        {
+          ssywh: '',
+          dah: '',
+          ywh: '',
+          bdcdyh: "",
+          zl: "",
+          qlrlx: '',
+          qlrmc: "",
+          qlrzjzl: "",
+          qlrzjhm: "",
+          gyfs: "",
+          mj: null,
+          qlxz: '',
+          ytmc: "",
+          syqqzsj: null,
+          tdsyqx: null,
+          qdjg: null,
+          djyy: '',
+          bdcqzh: null,
+          djsj: '',
+          dbr: '',
+          fj: "",
+          qllxmc: "国有建设用地使用权",
+          djlxmc: '转移登记',
+          qszt: "0",
         },
-  computed: {
-    ...mapGetters(["djbxx"]),
+        {
+          ssywh: '',
+          dah: '',
+          ywh: '',
+          bdcdyh: "",
+          zl: "",
+          qlrlx: '',
+          qlrmc: "",
+          qlrzjzl: "",
+          qlrzjhm: "",
+          gyfs: "",
+          mj: null,
+          qlxz: '',
+          ytmc: "",
+          syqqzsj: null,
+          tdsyqx: null,
+          qdjg: null,
+          djyy: '',
+          bdcqzh: null,
+          djsj: '',
+          dbr: '',
+          fj: "",
+          qllxmc: "国有建设用地使用权",
+          djlxmc: '转移登记',
+          qszt: "1"
         },
-  watch: {
-    showType: {
-      handler (newVlue) {
+        {
+          ssywh: '',
+          dah: '',
+          ywh: '',
+          bdcdyh: "",
+          zl: "",
+          qlrlx: '',
+          qlrmc: "",
+          qlrzjzl: "",
+          qlrzjhm: "",
+          gyfs: "",
+          mj: null,
+          qlxz: '',
+          ytmc: "",
+          syqqzsj: null,
+          tdsyqx: null,
+          qdjg: null,
+          djyy: '',
+          bdcqzh: null,
+          djsj: '',
+          dbr: '',
+          fj: "",
+          qllxmc: "国有建设用地使用权",
+          djlxmc: '转移登记',
+          qszt: "2"
+        }
+      ]
+    };
+  },
+  async created () {
     // 清空值
     this.tableData = [];
     this.ths = [];
-        this.columns = this.type[newVlue].columns;
-        this.title = this.type[newVlue].title;
-        this.checkList = ["临时", "现势", "历史"];
-        this.tableWidth = 810;
-        let detail;
-        if (newVlue === "JSYDSYQ") {
-          getJsydsyqList({
-            bdcdyid: "2b33851f4edfd468ceef4d68c370bd41",
-            qllx: "A03",
-            qszt: ["1"]
-          }).then((res) => {
-            if (res.code === 200) {
-              detail = res.result;
-            }
-          });
-        } else {
-          detail = this.djbxx.detail.qlxxs[newVlue];
-        }
-        detail.forEach((item) => {
+    this.columns = datas.columns();
+    // let res = await getJsydsyqList({
+    //   bdcdyid: "2b33851f4edfd468ceef4d68c370bd41",
+    //   qllx: "A03",
+    //   qszt: ["1"]
+    // })
+    let detail = this.list
+    detail.length > 0 && detail.forEach((item) => {
       this.tableData.push(item);
       if (item.qszt == "0") {
         this.ths.push({
@@ -126,18 +183,11 @@ export default {
       }
     });
     this.showTableData = this.tableData;
-        this.showThs = this.ths;
-        let width = (this.tableData.length - 3) * 223 + this.tableWidth;
-        this.tableWidth = this.tableData.length > 3 ? width : 810;
-      },
-      immediate: true,
-    },
   },
   methods: {
     checkChange () {
       var checkKey = [];
       this.ths = [];
-      this.tableWidth = 810;
       this.checkList.forEach((item) => {
         if (item == "临时") {
           checkKey.push("0");
@@ -179,8 +229,6 @@ export default {
           });
         }
       });
-      let width = (this.showTableData.length - 3) * 223 + this.tableWidth;
-      this.tableWidth = this.showTableData.length > 3 ? width : 810;
     },
   },
 };
@@ -195,7 +243,6 @@ export default {
   color: #333;
 
   .tableBox {
-    width: 810px;
     margin: 0 auto;
     display: flex;
     flex-wrap: wrap;
@@ -221,8 +268,8 @@ export default {
     }
 
     .xxTableBox {
-      width: 810px;
       overflow-x: scroll;
+      width: 100%;
     }
 
     .xxTable>tr:first-child th {
@@ -231,11 +278,13 @@ export default {
 
     .xxTable {
       border-spacing: 1px;
+      width: 100%;
 
       tr>th {
         background: #464c5b;
         color: #fff;
         font-size: 16px;
+        height: 60px;
       }
 
       th.linshi,
@@ -297,6 +346,7 @@ export default {
         height: 40px;
         padding: 4px;
         font-size: 13px;
+        width: 140px;
       }
 
       >tr:nth-child(odd) td {

@@ -40,15 +40,16 @@
           <p class="splitScreen tabsList-title">材料信息</p>
           <div class="splitScreen"></div>
         </div>
+        <div style="width:100%">
           <el-tabs v-model="activeName" @tab-click='activeClick'>
             <el-tab-pane :label="item.name" :name="item.value" v-for="(item, index) in tabList" :key="index">
-            <div class="splitScreen-con">
-              <component ref='slxx' v-if='index == 0' :is="editItem" :flag="flag" :key="key" />
-              <component ref='clxx' :is="editItem" v-else-if="index == 1" :key="key" />
-              <component :is="editItem" v-else :key="key" />
-            </div>
             </el-tab-pane>
           </el-tabs>
+          <div class="splitScreen-con">
+            <component ref='slxx' v-if="activeName == 'slsq'" :is="editItem" :flag="flag" :key="key" />
+            <component :is="editItem" :key="key" />
+          </div>
+        </div>
       </div>
     </div>
     <zc ref="zcDialogRef" v-model="zcDialog" :queryForm='queryForm' />
@@ -92,7 +93,11 @@ export default {
   watch: {
     activeName: {
       handler (newName, oldName) {
+        if (newName === 'qlxx') {
+          this.editItem = this.loadViewSlsq()
+        } else {
           this.editItem = this.loadView(newName)
+        }
       },
       immediate: true
     }
@@ -116,9 +121,9 @@ export default {
         if (res.code === 200) {
           this.unitData = res.result ? res.result : []
           setTimeout(() => {
-            that.$refs?.slxx[0].list(that.unitData && that.unitData[0].bsmSldy)
-            this.taskId = that.unitData[0].taskId
-            this.bsmBusiness = that.unitData[0].bsmBusiness
+            that.$refs.slxx?.[0].list(that.unitData?.[0]?.bsmSldy)
+            this.taskId = that.unitData?.[0]?.taskId
+            this.bsmBusiness = that.unitData?.[0]?.bsmBusiness
           }, 300);
         }
       })
@@ -180,6 +185,9 @@ export default {
     loadView (view) {
       return r => require.ensure([], () => r(require(`./components/${view}.vue`)))
     },
+    loadViewSlsq () {
+      return r => require.ensure([], () => r(require('../../components/jsydsyq/jsydsyq.vue')))
+    },
   },
 }
 </script>
@@ -204,13 +212,10 @@ export default {
   font-size: 12px;
 }
 
-/deep/.el-tabs__content {
-  height: calc(100vh - 135px) !important;
-}
-
 .splitScreen-con {
   padding: 0 15px;
   box-sizing: border-box;
+  height: calc(100% - 350px);
 }
 
 .fqsq {
@@ -303,7 +308,6 @@ export default {
     .tabsList-left {
       border-right: 1px solid #EBEEF5;
       position: relative;
-      width: 250px;
       box-sizing: border-box;
 
       ul {
@@ -354,6 +358,7 @@ export default {
 
   /deep/.el-tabs {
     width: 100%;
+    height: 60px;
   }
 }
 </style>
\ No newline at end of file