修改登记簿相关组件

@@ -300,6 +300,7 @@ export default {
         height: 40px;
         height: 40px;
         padding: 4px;
         padding: 4px;
         font-size: 13px;
         font-size: 13px;
+        width: 140px;
       }
       }
       > tr:nth-child(odd) td {
       > tr:nth-child(odd) td {
         background: #f2f2f2;
         background: #f2f2f2;

+import filter from '@/utils/filter.js'
+
+class data extends filter {
+    constructor() {
+        super()
+    }
+    columns() {
+        return {
+            title: "建设用地使用权、宅基地使用权登记信息",
+            columns: [
+                {
+                    prop: "ssywh",
+                    label: "上手业务号"
+                },
+                {
+                    prop: "dah",
+                    label: "档案号",
+                },
+                {
+                    prop: "ywh",
+                    label: "业务号",
+                },
+                {
+                    prop: "bdcdyh",
+                    label: "不动产单元号",
+                },
+                {
+                    prop: "zl",
+                    label: "坐落",
+                },
+                {
+                    prop: "qlrlx",
+                    label: "权利人类型",
+                },
+                {
+                    prop: "qlrmc",
+                    label: "权利人",
+                },
+                {
+                    prop: "qlrzjzl",
+                    label: "证件种类",
+                },
+                {
+                    prop: "qlrzjhm",
+                    label: "证件号",
+                },
+                {
+                    prop: "gyfs",
+                    label: "共有情况",
+                },
+                {
+                    prop: "mj",
+                    label: "使用权面积(m²)",
+                },
+                {
+                    prop: "qlxz",
+                    label: "权利性质",
+                },
+                {
+                    prop: "ytmc",
+                    label: "土地用途",
+                },
+                {
+                    prop: "syqqzsj",
+                    label: "使用权起止时间",
+                },
+                // {
+                //   prop: "syqjssj",
+                //   label: "使用权结束时间",
+                // },
+                // {
+                //   prop: "tdsyqx",
+                //   label: "土地使用期限",
+                // },
+                {
+                    prop: "tdsyqx",
+                    label: "土地使用期限",
+                },
+                {
+                    prop: "qdjg",
+                    label: "取得价格(万元)",
+                },
+                {
+                    prop: "djyy",
+                    label: "登记原因",
+                },
+                {
+                    prop: "bdcqzh",
+                    label: "不动产权证号",
+                },
+                {
+                    prop: "djsj",
+                    label: "登记时间",
+                },
+                {
+                    prop: "dbr",
+                    label: "登簿人",
+                },
+                {
+                    prop: "fj",
+                    label: "附记",
+                },
+            ]
+
+        }
+    }
+}
+
+let datas = new data()
+
+export {
+    datas
+}
\ No newline at end of file

+<template>
+  <div class="djxxTable">
+    <div class="tableBox">
+      <div class="title">
+        {{ title }}
+        <div class="checkbox">
+          <el-checkbox-group v-model="checkList" @change="checkChange">
+            <el-checkbox label="临时"></el-checkbox>
+            <el-checkbox label="现势"></el-checkbox>
+            <el-checkbox label="历史"></el-checkbox>
+          </el-checkbox-group>
+        </div>
+      </div>
+      <div class="xxTableBox">
+        <table class="xxTable" :width="tableWidth">
+          <tr>
+            <th rowspan="3">业务类型</th>
+          </tr>
+          <!-- 第一行表头 -->
+          <tr class="one" id="">
+            <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 }}
+            </th>
+          </tr>
+          <!-- 第二行表头 -->
+          <tr class="two">
+            <th v-for="(item, index) in ths" :key="index" :class="item.class">
+              <p>{{ item.qllxmc }}</p>
+              <p>{{ item.djlxmc }}</p>
+            </th>
+          </tr>
+          <!-- 数据 -->
+          <tr v-for="(item, index) in columns" :key="index">
+            <td>
+              {{ item.label }}
+            </td>
+            <td
+              v-for="(item1, index1) in showTableData"
+              :key="index1"
+              :class="[
+                item1.qszt == '2' ? 'lishi' : '',
+                item1.qszt == '0' ? 'linshi' : '',
+              ]"
+            >
+              {{ item1[item.prop] }}
+            </td>
+          </tr>
+        </table>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapGetters } from "vuex";
+import { datas } from "./jsydsyqQlxx";
+import { getJsydsyqList } from "@/api/zhcx.js";
+export default {
+  name: "djxxTable",
+  props: {
+    showType: "",
+  },
+  data() {
+    return {
+      checkList: ["临时", "现势", "历史"],
+      tableWidth: 810,
+      type: datas.columns(),
+      tableData: [],
+      showTableData: [],
+      ths: [],
+      showThs: [],
+      columns: [],
+      title: "",
+    };
+  },
+  computed: {
+    ...mapGetters(["djbxx"]),
+  },
+  watch: {
+    showType: {
+      handler(newVlue) {
+        // 清空值
+        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.tableData.push(item);
+          if (item.qszt == "0") {
+            this.ths.push({
+              type: "临时",
+              qllxmc: item.qllxmc,
+              djlxmc: item.djlxmc,
+              prop: "linshi",
+              class: "linshi",
+            });
+          } else if (item.qszt == "1") {
+            this.ths.push({
+              type: "现势",
+              qllxmc: item.qllxmc,
+              djlxmc: item.djlxmc,
+              prop: "xianshi",
+              class: "xianshi",
+            });
+          } else if (item.qszt == "2") {
+            this.ths.push({
+              type: "历史",
+              qllxmc: item.qllxmc,
+              djlxmc: item.djlxmc,
+              prop: "lishi",
+              class: "lishi",
+            });
+          }
+        });
+        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");
+        }
+        if (item == "现势") {
+          checkKey.push("1");
+        }
+        if (item == "历史") {
+          checkKey.push("2");
+        }
+      });
+      this.showTableData = this.tableData.filter((item) =>
+        checkKey.includes(item.qszt)
+      );
+      this.showTableData.forEach((item) => {
+        if (item.qszt == "0") {
+          this.ths.push({
+            type: "临时",
+            qllxmc: item.qllxmc,
+            djlxmc: item.djlxmc,
+            prop: "linshi",
+            class: "linshi",
+          });
+        } else if (item.qszt == "1") {
+          this.ths.push({
+            type: "现势",
+            qllxmc: item.qllxmc,
+            djlxmc: item.djlxmc,
+            prop: "xianshi",
+            class: "xianshi",
+          });
+        } else if (item.qszt == "2") {
+          this.ths.push({
+            type: "历史",
+            qllxmc: item.qllxmc,
+            djlxmc: item.djlxmc,
+            prop: "lishi",
+            class: "lishi",
+          });
+        }
+      });
+      let width = (this.showTableData.length - 3) * 223 + this.tableWidth;
+      this.tableWidth = this.showTableData.length > 3 ? width : 810;
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.djxxTable {
+  width: 100%;
+  height: 100%;
+  background: #fff;
+  overflow-y: scroll;
+  color: #333;
+
+  .tableBox {
+    width: 810px;
+    margin: 0 auto;
+    display: flex;
+    flex-wrap: wrap;
+
+    .title {
+      width: 100%;
+      font-family: "Arial Negreta", "Arial Normal", "Arial", sans-serif;
+      font-weight: 700;
+      font-size: 16px;
+      text-align: center;
+      background: #e9e9e9;
+      height: 62px;
+      line-height: 62px;
+      position: relative;
+      margin: 1px 0;
+      .checkbox {
+        position: absolute;
+        right: 20px;
+        bottom: -16px;
+        height: 62px;
+      }
+    }
+
+    .xxTableBox {
+      width: 810px;
+      overflow-x: scroll;
+    }
+
+    // .xxTable > tr th:not(:first-child) {
+    //   width: 223px;
+    // }
+    .xxTable > tr:first-child th {
+      width: 140px;
+    }
+
+    .xxTable {
+      border-spacing: 1px;
+      tr > th {
+        background: #464c5b;
+        color: #fff;
+        font-size: 16px;
+      }
+      th.linshi,
+      th.xianshi {
+        background: #464c5b;
+      }
+      th.lishi {
+        background: rgba(70, 76, 91, 0.8);
+      }
+      .one th {
+        height: 25px;
+        font-size: 14px;
+      }
+
+      th.linshi {
+        color: #fe9400;
+      }
+      .two th {
+        height: 45px;
+
+        p:nth-child(2) {
+          font-size: 14px;
+        }
+      }
+      .linshiIcon {
+        position: relative;
+      }
+      .linshiIcon::after {
+        content: "";
+        display: block;
+        width: 0;
+        height: 0;
+        border-width: 0px 0px 45px 45px;
+        border-style: none solid solid;
+        border-color: transparent transparent #fe9400;
+        position: absolute;
+        top: 0px;
+        right: 3px;
+        transform: rotate(-90deg);
+      }
+      .icon {
+        position: absolute;
+        top: 8px;
+        right: 6px;
+        transform: rotate(45deg);
+        color: #fff;
+        font-size: 12px;
+        z-index: 10;
+      }
+
+      tr td {
+        text-align: center;
+        height: 40px;
+        padding: 4px;
+        font-size: 13px;
+      }
+      > tr:nth-child(odd) td {
+        background: #f2f2f2;
+      }
+      > tr:nth-child(even) td {
+        background: #f9f9f9;
+      }
+      td.linshi {
+        color: #fe9400;
+      }
+      tr > td.lishi {
+        color: #7f7f7f;
+      }
+    }
+  }
+}
+</style>