Merge branch 'master' of http://yun.pashanhoo.com:9090/bdc/bdcdj-web
Showing
11 changed files
with
1020 additions
and
2063 deletions
| 1 | <template> | ||
| 2 | <div class="cfdj"> | ||
| 3 | <div class="tableBox"> | ||
| 4 | <div class="title"> | ||
| 5 | 查封登记信息 | ||
| 6 | <div class="checkbox"> | ||
| 7 | <el-checkbox-group v-model="checkList"> | ||
| 8 | <el-checkbox label="临时"></el-checkbox> | ||
| 9 | <el-checkbox label="现势"></el-checkbox> | ||
| 10 | <el-checkbox label="历史"></el-checkbox> | ||
| 11 | </el-checkbox-group> | ||
| 12 | </div> | ||
| 13 | </div> | ||
| 14 | <table class="xxTable"> | ||
| 15 | <tr> | ||
| 16 | <th rowspan="3" width="140">业务类型</th> | ||
| 17 | </tr> | ||
| 18 | <tr class="one"> | ||
| 19 | <th class="linshiIcon"> | ||
| 20 | <div class="icon">临时</div> | ||
| 21 | 临时 | ||
| 22 | </th> | ||
| 23 | <th>现势</th> | ||
| 24 | <th>历史</th> | ||
| 25 | </tr> | ||
| 26 | <tr class="two"> | ||
| 27 | <th>查封登记</th> | ||
| 28 | <th>查封登记</th> | ||
| 29 | <th>查封登记</th> | ||
| 30 | </tr> | ||
| 31 | |||
| 32 | <tr v-for="(item, index) in columns" :key="index"> | ||
| 33 | <td> | ||
| 34 | {{ item.label }} | ||
| 35 | </td> | ||
| 36 | <td>{{ tableData.linshi[item.prop] }}</td> | ||
| 37 | <td>{{ tableData.xianshi[item.prop] }}</td> | ||
| 38 | <td>{{ tableData.lishi[item.prop] }}</td> | ||
| 39 | </tr> | ||
| 40 | </table> | ||
| 41 | </div> | ||
| 42 | </div> | ||
| 43 | </template> | ||
| 44 | |||
| 45 | <script> | ||
| 46 | export default { | ||
| 47 | name: "cfdj", | ||
| 48 | data() { | ||
| 49 | return { | ||
| 50 | checkList: ["临时", "现势", "历史"], | ||
| 51 | columns: [ | ||
| 52 | { | ||
| 53 | prop: "ssywh", | ||
| 54 | label: "上手业务号", | ||
| 55 | }, | ||
| 56 | { | ||
| 57 | prop: "dah", | ||
| 58 | label: "档案号", | ||
| 59 | }, | ||
| 60 | { | ||
| 61 | prop: "ywh", | ||
| 62 | label: "业务号", | ||
| 63 | }, | ||
| 64 | { | ||
| 65 | prop: "bdcdyh", | ||
| 66 | label: "不动产单元号", | ||
| 67 | }, | ||
| 68 | { | ||
| 69 | prop: "zl", | ||
| 70 | label: "坐落", | ||
| 71 | }, | ||
| 72 | { | ||
| 73 | prop: "bdcqlr", | ||
| 74 | label: "不动产权利人", | ||
| 75 | }, | ||
| 76 | { | ||
| 77 | prop: "zjzl", | ||
| 78 | label: "证件种类", | ||
| 79 | }, | ||
| 80 | { | ||
| 81 | prop: "zjh", | ||
| 82 | label: "证件号", | ||
| 83 | }, | ||
| 84 | { | ||
| 85 | prop: "cflx", | ||
| 86 | label: "查封类型", | ||
| 87 | }, | ||
| 88 | { | ||
| 89 | prop: "cfjg", | ||
| 90 | label: "查封机关", | ||
| 91 | }, | ||
| 92 | { | ||
| 93 | prop: "cfwh", | ||
| 94 | label: "查封文号", | ||
| 95 | }, | ||
| 96 | { | ||
| 97 | prop: "cfwj", | ||
| 98 | label: "查封文件", | ||
| 99 | }, | ||
| 100 | { | ||
| 101 | prop: "cfqssj", | ||
| 102 | label: "查封起始时间", | ||
| 103 | }, | ||
| 104 | { | ||
| 105 | prop: "cfjssj", | ||
| 106 | label: "查封结束时间", | ||
| 107 | }, | ||
| 108 | { | ||
| 109 | prop: "cfqx", | ||
| 110 | label: "查封期限", | ||
| 111 | }, | ||
| 112 | { | ||
| 113 | prop: "cffw", | ||
| 114 | label: "查封范围", | ||
| 115 | }, | ||
| 116 | { | ||
| 117 | prop: "djjg", | ||
| 118 | label: "登记机构", | ||
| 119 | }, | ||
| 120 | { | ||
| 121 | prop: "dbr", | ||
| 122 | label: "登簿人", | ||
| 123 | }, | ||
| 124 | { | ||
| 125 | prop: "djsj", | ||
| 126 | label: "登记时间", | ||
| 127 | }, | ||
| 128 | { | ||
| 129 | prop: "jfywh", | ||
| 130 | label: "解封业务号", | ||
| 131 | }, | ||
| 132 | { | ||
| 133 | prop: "jfjg", | ||
| 134 | label: "解封机关", | ||
| 135 | }, | ||
| 136 | { | ||
| 137 | prop: "jfwh", | ||
| 138 | label: "解封文号", | ||
| 139 | }, | ||
| 140 | { | ||
| 141 | prop: "jfwj", | ||
| 142 | label: "解封文件", | ||
| 143 | }, | ||
| 144 | { | ||
| 145 | prop: "jfdjsj", | ||
| 146 | label: "解封登记时间", | ||
| 147 | }, | ||
| 148 | { | ||
| 149 | prop: "jfdbr", | ||
| 150 | label: "解封登簿人", | ||
| 151 | }, | ||
| 152 | ], | ||
| 153 | tableData: { | ||
| 154 | linshi: { | ||
| 155 | ssywh: "", | ||
| 156 | dah: "", | ||
| 157 | ywh: "200825012285", | ||
| 158 | bdcdyh: "370205004005GB10030 F00160111", | ||
| 159 | zl: "汉台区东大街街道办事处北大街居委会北大街东侧（莲花池公园西侧）", | ||
| 160 | bdcqlr: "李四", | ||
| 161 | zjzj: "身份证号", | ||
| 162 | zjh: "*******", | ||
| 163 | cflx: "查封", | ||
| 164 | cfjg: "西安法院", | ||
| 165 | cfwh: "200825012286", | ||
| 166 | cfwj: "", | ||
| 167 | cfqssj: "2008年3月11日", | ||
| 168 | cfjssj: "2012年3月11日", | ||
| 169 | cfqx: "4年", | ||
| 170 | cffw: "", | ||
| 171 | djjg: "", | ||
| 172 | dbr: "", | ||
| 173 | djsj: "", | ||
| 174 | jfywh: "", | ||
| 175 | jfjg: "", | ||
| 176 | jfwh: "", | ||
| 177 | jfwj: "", | ||
| 178 | jfdjsj: "", | ||
| 179 | jfdbr: "", | ||
| 180 | }, | ||
| 181 | xianshi: { | ||
| 182 | ssywh: "", | ||
| 183 | dah: "", | ||
| 184 | ywh: "200825012285", | ||
| 185 | bdcdyh: "370205004005GB10030 F00160111", | ||
| 186 | zl: "汉台区东大街街道办事处北大街居委会北大街东侧（莲花池公园西侧）", | ||
| 187 | bdcqlr: "李四", | ||
| 188 | zjzj: "身份证号", | ||
| 189 | zjh: "*******", | ||
| 190 | cflx: "查封", | ||
| 191 | cfjg: "西安法院", | ||
| 192 | cfwh: "200825012286", | ||
| 193 | cfwj: "", | ||
| 194 | cfqssj: "2008年3月11日", | ||
| 195 | cfjssj: "2012年3月11日", | ||
| 196 | cfqx: "4年", | ||
| 197 | cffw: "", | ||
| 198 | djjg: "", | ||
| 199 | dbr: "", | ||
| 200 | djsj: "", | ||
| 201 | jfywh: "200825012285", | ||
| 202 | jfjg: "西安法院", | ||
| 203 | jfwh: "123", | ||
| 204 | jfwj: "", | ||
| 205 | jfdjsj: "2012年3月11日", | ||
| 206 | jfdbr: "", | ||
| 207 | }, | ||
| 208 | lishi: { | ||
| 209 | ssywh: "", | ||
| 210 | dah: "", | ||
| 211 | ywh: "200825012285", | ||
| 212 | bdcdyh: "370205004005GB10030 F00160111", | ||
| 213 | zl: "汉台区东大街街道办事处北大街居委会北大街东侧（莲花池公园西侧）", | ||
| 214 | bdcqlr: "李四", | ||
| 215 | zjzj: "身份证号", | ||
| 216 | zjh: "*******", | ||
| 217 | cflx: "查封", | ||
| 218 | cfjg: "西安法院", | ||
| 219 | cfwh: "200825012286", | ||
| 220 | cfwj: "", | ||
| 221 | cfqssj: "2008年3月11日", | ||
| 222 | cfjssj: "2012年3月11日", | ||
| 223 | cfqx: "4年", | ||
| 224 | cffw: "", | ||
| 225 | djjg: "", | ||
| 226 | dbr: "", | ||
| 227 | djsj: "", | ||
| 228 | jfywh: "", | ||
| 229 | jfjg: "", | ||
| 230 | jfwh: "", | ||
| 231 | jfwj: "", | ||
| 232 | jfdjsj: "", | ||
| 233 | jfdbr: "", | ||
| 234 | }, | ||
| 235 | }, | ||
| 236 | }; | ||
| 237 | }, | ||
| 238 | }; | ||
| 239 | </script> | ||
| 240 | |||
| 241 | <style lang="scss" scoped> | ||
| 242 | .cfdj { | ||
| 243 | width: 100%; | ||
| 244 | height: 100%; | ||
| 245 | background: #fff; | ||
| 246 | overflow-y: scroll; | ||
| 247 | color: #333; | ||
| 248 | |||
| 249 | .tableBox { | ||
| 250 | width: 810px; | ||
| 251 | margin: 0 auto; | ||
| 252 | |||
| 253 | .title { | ||
| 254 | font-family: "Arial Negreta", "Arial Normal", "Arial", sans-serif; | ||
| 255 | font-weight: 700; | ||
| 256 | font-size: 16px; | ||
| 257 | text-align: center; | ||
| 258 | background: #e9e9e9; | ||
| 259 | height: 62px; | ||
| 260 | line-height: 62px; | ||
| 261 | position: relative; | ||
| 262 | margin: 1px 0; | ||
| 263 | .checkbox { | ||
| 264 | position: absolute; | ||
| 265 | right: 20px; | ||
| 266 | bottom: -16px; | ||
| 267 | height: 62px; | ||
| 268 | } | ||
| 269 | } | ||
| 270 | |||
| 271 | .xxTable { | ||
| 272 | width: 810px; | ||
| 273 | border-spacing: 1px; | ||
| 274 | tr > th { | ||
| 275 | background: #464c5b; | ||
| 276 | color: #fff; | ||
| 277 | font-size: 16px; | ||
| 278 | } | ||
| 279 | tr > th:nth-child(1), | ||
| 280 | tr > th:nth-child(2) { | ||
| 281 | background: #464c5b; | ||
| 282 | } | ||
| 283 | tr > th:nth-child(3) { | ||
| 284 | background: rgba(70, 76, 91, 0.8); | ||
| 285 | } | ||
| 286 | .one th { | ||
| 287 | height: 25px; | ||
| 288 | font-size: 14px; | ||
| 289 | } | ||
| 290 | .one > th:nth-child(1) { | ||
| 291 | color: #fe9400; | ||
| 292 | } | ||
| 293 | .two th { | ||
| 294 | height: 45px; | ||
| 295 | |||
| 296 | p:nth-child(2) { | ||
| 297 | font-size: 14px; | ||
| 298 | } | ||
| 299 | } | ||
| 300 | .two > th:nth-child(1) { | ||
| 301 | color: #fe9400; | ||
| 302 | } | ||
| 303 | .linshiIcon { | ||
| 304 | position: relative; | ||
| 305 | } | ||
| 306 | .linshiIcon::after { | ||
| 307 | content: ""; | ||
| 308 | display: block; | ||
| 309 | width: 0; | ||
| 310 | height: 0; | ||
| 311 | border-width: 0px 0px 45px 45px; | ||
| 312 | border-style: none solid solid; | ||
| 313 | border-color: transparent transparent #fe9400; | ||
| 314 | position: absolute; | ||
| 315 | top: 0px; | ||
| 316 | right: 3px; | ||
| 317 | transform: rotate(-90deg); | ||
| 318 | } | ||
| 319 | .icon { | ||
| 320 | position: absolute; | ||
| 321 | top: 8px; | ||
| 322 | right: 6px; | ||
| 323 | transform: rotate(45deg); | ||
| 324 | color: #fff; | ||
| 325 | font-size: 12px; | ||
| 326 | z-index: 10; | ||
| 327 | } | ||
| 328 | |||
| 329 | tr td { | ||
| 330 | text-align: center; | ||
| 331 | height: 40px; | ||
| 332 | padding: 4px; | ||
| 333 | font-size: 13px; | ||
| 334 | } | ||
| 335 | > tr:nth-child(odd) td { | ||
| 336 | background: #f2f2f2; | ||
| 337 | } | ||
| 338 | > tr:nth-child(even) td { | ||
| 339 | background: #f9f9f9; | ||
| 340 | } | ||
| 341 | tr > td:nth-child(2) { | ||
| 342 | color: #fe9400; | ||
| 343 | } | ||
| 344 | tr > td:nth-child(4) { | ||
| 345 | color: #7f7f7f; | ||
| 346 | } | ||
| 347 | } | ||
| 348 | } | ||
| 349 | } | ||
| 350 | </style> |
| ... | @@ -10,6 +10,7 @@ | ... | @@ -10,6 +10,7 @@ |
| 10 | <div class="content"> | 10 | <div class="content"> |
| 11 | <div class="left"> | 11 | <div class="left"> |
| 12 | <el-tree | 12 | <el-tree |
| 13 | ref="tree" | ||
| 13 | :data="treedata" | 14 | :data="treedata" |
| 14 | :props="defaultProps" | 15 | :props="defaultProps" |
| 15 | @node-click="handleNodeClick" | 16 | @node-click="handleNodeClick" |
| ... | @@ -20,22 +21,18 @@ | ... | @@ -20,22 +21,18 @@ |
| 20 | ></el-tree> | 21 | ></el-tree> |
| 21 | </div> | 22 | </div> |
| 22 | <div class="right"> | 23 | <div class="right"> |
| 23 | <components :is="showTab"></components> | 24 | <components :is="showTab" :showType="showType"></components> |
| 24 | </div> | 25 | </div> |
| 25 | </div> | 26 | </div> |
| 26 | </dialogBox> | 27 | </dialogBox> |
| 27 | </template> | 28 | </template> |
| 28 | <script> | 29 | <script> |
| 30 | import { mapGetters } from "vuex"; | ||
| 29 | import djbfm from "./djbfm.vue"; | 31 | import djbfm from "./djbfm.vue"; |
| 30 | import zdxx from "./zdxx.vue"; | 32 | import zdxx from "./zdxx.vue"; |
| 31 | import bdcqldjml from "./bdcqldjml.vue"; | 33 | import bdcqldjml from "./bdcqldjml.vue"; |
| 32 | import bdcqljqtsx from "./bdcqljqtsx.vue"; | 34 | import bdcqljqtsx from "./bdcqljqtsx.vue"; |
| 33 | import gyjsydsyq from "./gyjsydsyq.vue"; | 35 | import djxxTable from "./djxxTable.vue"; |
| 34 | import dyaq from "./dyaq.vue"; | ||
| 35 | import dyiq from "./dyiq.vue"; | ||
| 36 | import ygdj from "./ygdj.vue"; | ||
| 37 | import yydj from "./yydj.vue"; | ||
| 38 | import cfdj from "./cfdj.vue"; | ||
| 39 | 36 | ||
| 40 | export default { | 37 | export default { |
| 41 | name: "djbxxDialog", | 38 | name: "djbxxDialog", |
| ... | @@ -44,12 +41,7 @@ export default { | ... | @@ -44,12 +41,7 @@ export default { |
| 44 | zdxx, | 41 | zdxx, |
| 45 | bdcqldjml, | 42 | bdcqldjml, |
| 46 | bdcqljqtsx, | 43 | bdcqljqtsx, |
| 47 | gyjsydsyq, | 44 | djxxTable, |
| 48 | dyaq, | ||
| 49 | dyiq, | ||
| 50 | ygdj, | ||
| 51 | yydj, | ||
| 52 | cfdj, | ||
| 53 | }, | 45 | }, |
| 54 | props: { | 46 | props: { |
| 55 | value: { type: Boolean, default: false }, | 47 | value: { type: Boolean, default: false }, |
| ... | @@ -59,43 +51,59 @@ export default { | ... | @@ -59,43 +51,59 @@ export default { |
| 59 | treedata: [ | 51 | treedata: [ |
| 60 | { | 52 | { |
| 61 | id: "djbfm", | 53 | id: "djbfm", |
| 54 | tabs: "djbfm", | ||
| 62 | label: "登记簿封面", | 55 | label: "登记簿封面", |
| 63 | children: [ | 56 | children: [ |
| 64 | { | 57 | { |
| 65 | id: "zdxx", | 58 | id: "zdxx", |
| 59 | tabs: "zdxx", | ||
| 66 | label: "宗地信息", | 60 | label: "宗地信息", |
| 67 | }, | 61 | }, |
| 68 | { | 62 | { |
| 69 | id: "bdcqldjml", | 63 | id: "bdcqldjml", |
| 64 | tabs: "bdcqldjml", | ||
| 70 | label: "不动产权利登记目录", | 65 | label: "不动产权利登记目录", |
| 71 | children: [ | 66 | children: [ |
| 72 | { | 67 | { |
| 73 | id: "bdcqljqtsx", | 68 | id: "bdcqljqtsx", |
| 69 | tabs: "bdcqljqtsx", | ||
| 74 | label: "不动产权利及其他事项", | 70 | label: "不动产权利及其他事项", |
| 75 | children: [ | 71 | children: [ |
| 76 | { | 72 | { |
| 77 | id: "gyjsydsyq", | 73 | id: "gyjsydsyq", |
| 74 | tabs: "djxxTable", | ||
| 78 | label: "国有建设用地使用权(临:0，现:0，历:0)", | 75 | label: "国有建设用地使用权(临:0，现:0，历:0)", |
| 76 | type: "JSYDSYQ", | ||
| 79 | }, | 77 | }, |
| 80 | { | 78 | { |
| 81 | id: "dyaq", | 79 | id: "dyaq", |
| 80 | tabs: "djxxTable", | ||
| 82 | label: "抵押权(临:0，现:0，历:0)", | 81 | label: "抵押权(临:0，现:0，历:0)", |
| 82 | type: "DYAQ", | ||
| 83 | }, | 83 | }, |
| 84 | { | 84 | { |
| 85 | id: "dyiq", | 85 | id: "dyiq", |
| 86 | tabs: "djxxTable", | ||
| 86 | label: "地役权(临:0，现:0，历:0)", | 87 | label: "地役权(临:0，现:0，历:0)", |
| 88 | type: "DYIQ", | ||
| 87 | }, | 89 | }, |
| 88 | { | 90 | { |
| 89 | id: "ygdj", | 91 | id: "ygdj", |
| 92 | tabs: "djxxTable", | ||
| 90 | label: "预告登记(临:0，现:0，历:0)", | 93 | label: "预告登记(临:0，现:0，历:0)", |
| 94 | type: "YGDJ", | ||
| 91 | }, | 95 | }, |
| 92 | { | 96 | { |
| 93 | id: "yydj", | 97 | id: "yydj", |
| 98 | tabs: "djxxTable", | ||
| 94 | label: "异议登记(临:0，现:0，历:0)", | 99 | label: "异议登记(临:0，现:0，历:0)", |
| 100 | type: "YYDJ", | ||
| 95 | }, | 101 | }, |
| 96 | { | 102 | { |
| 97 | id: "cfdj", | 103 | id: "cfdj", |
| 104 | tabs: "djxxTable", | ||
| 98 | label: "查封登记(临:0，现:0，历:0)", | 105 | label: "查封登记(临:0，现:0，历:0)", |
| 106 | type: "CFDJ", | ||
| 99 | }, | 107 | }, |
| 100 | ], | 108 | ], |
| 101 | }, | 109 | }, |
| ... | @@ -108,17 +116,60 @@ export default { | ... | @@ -108,17 +116,60 @@ export default { |
| 108 | children: "children", | 116 | children: "children", |
| 109 | label: "label", | 117 | label: "label", |
| 110 | }, | 118 | }, |
| 111 | showTab: "gyjsydsyq", // 选中状态,根据表格中权利类型判断 | 119 | showTab: "djxxTable", // 选中状态,根据表格中权利类型判断 |
| 120 | showType: "JSYDSYQ", | ||
| 112 | }; | 121 | }; |
| 113 | }, | 122 | }, |
| 123 | computed: { | ||
| 124 | ...mapGetters(["djbxx"]), | ||
| 125 | }, | ||
| 126 | watch: { | ||
| 127 | djbxx: { | ||
| 128 | handler(newVlue) { | ||
| 129 | if (newVlue) { | ||
| 130 | var qszts = newVlue.detail.qszts; | ||
| 131 | let isZd = newVlue.djbfm.zd; | ||
| 132 | let arr = [ | ||
| 133 | "QSZT_JSYDSYQ", | ||
| 134 | "QSZT_DYAQ", | ||
| 135 | "QSZT_DYIQ", | ||
| 136 | "QSZT_YGDJ", | ||
| 137 | "QSZT_YYDJ", | ||
| 138 | "QSZT_CFDJ", | ||
| 139 | ]; | ||
| 140 | if (!isZd) { | ||
| 141 | // 判断是否是宗地 | ||
| 142 | arr[0] = "QSZT_FDCQ2"; | ||
| 143 | this.treedata[0].children[1].children[0].children[0].type = FDCQ2; | ||
| 144 | } | ||
| 145 | arr.forEach((item, index) => { | ||
| 146 | let label = | ||
| 147 | this.treedata[0].children[1].children[0].children[ | ||
| 148 | index | ||
| 149 | ].label.split(":")[0]; | ||
| 150 | this.treedata[0].children[1].children[0].children[index].label = | ||
| 151 | label + | ||
| 152 | (qszts[item][0] || 0) + | ||
| 153 | "，现:" + | ||
| 154 | (qszts[item][1] || 0) + | ||
| 155 | "，历:" + | ||
| 156 | (qszts[item][2] || 0) + | ||
| 157 | ")"; | ||
| 158 | }); | ||
| 159 | } | ||
| 160 | }, | ||
| 161 | immediate: true, | ||
| 162 | }, | ||
| 163 | }, | ||
| 114 | methods: { | 164 | methods: { |
| 115 | closeDialog() { | 165 | closeDialog() { |
| 116 | this.$emit("input", false); | 166 | this.$emit("input", false); |
| 117 | // 关闭时清空值 | 167 | // 关闭时清空值 |
| 118 | this.$store.dispatch("djbxx/setDjbxx", null); | 168 | this.$store.dispatch("djbxx/setDjbxx", null); |
| 119 | }, | 169 | }, |
| 120 | handleNodeClick(data) { | 170 | handleNodeClick(data, node, elem) { |
| 121 | this.showTab = data.id; | 171 | this.showTab = data.tabs; |
| 172 | this.showType = data.type ? data.type : ""; | ||
| 122 | }, | 173 | }, |
| 123 | }, | 174 | }, |
| 124 | }; | 175 | }; |
| ... | @@ -160,4 +211,9 @@ export default { | ... | @@ -160,4 +211,9 @@ export default { |
| 160 | /deep/.el-tree-node { | 211 | /deep/.el-tree-node { |
| 161 | white-space: pre-wrap; | 212 | white-space: pre-wrap; |
| 162 | } | 213 | } |
| 214 | /deep/ .is-current > .el-tree-node__content { | ||
| 215 | background-color: #f5f5f5; | ||
| 216 | color: #0079fe; | ||
| 217 | border-right: 4px solid #0079fe; | ||
| 218 | } | ||
| 163 | </style> | 219 | </style> | ... | ... |
| 1 | import filter from '@/utils/filter.js' | ||
| 2 | |||
| 3 | class data extends filter { | ||
| 4 | constructor() { | ||
| 5 | super() | ||
| 6 | } | ||
| 7 | columns() { | ||
| 8 | return { | ||
| 9 | JSYDSYQ: { | ||
| 10 | title: "建设用地使用权、宅基地使用权登记信息", | ||
| 11 | columns: [ | ||
| 12 | { | ||
| 13 | prop: "ssywh", | ||
| 14 | label: "上手业务号", | ||
| 15 | }, | ||
| 16 | { | ||
| 17 | prop: "dah", | ||
| 18 | label: "档案号", | ||
| 19 | }, | ||
| 20 | { | ||
| 21 | prop: "ywh", | ||
| 22 | label: "业务号", | ||
| 23 | }, | ||
| 24 | { | ||
| 25 | prop: "bdcdyh", | ||
| 26 | label: "不动产单元号", | ||
| 27 | }, | ||
| 28 | { | ||
| 29 | prop: "zl", | ||
| 30 | label: "坐落", | ||
| 31 | }, | ||
| 32 | { | ||
| 33 | prop: "qlrlx", | ||
| 34 | label: "权利人类型", | ||
| 35 | }, | ||
| 36 | { | ||
| 37 | prop: "qlr", | ||
| 38 | label: "权利人", | ||
| 39 | }, | ||
| 40 | { | ||
| 41 | prop: "zjzl", | ||
| 42 | label: "证件种类", | ||
| 43 | }, | ||
| 44 | { | ||
| 45 | prop: "zjh", | ||
| 46 | label: "证件号", | ||
| 47 | }, | ||
| 48 | { | ||
| 49 | prop: "gyqk", | ||
| 50 | label: "共有情况", | ||
| 51 | }, | ||
| 52 | { | ||
| 53 | prop: "syqmj", | ||
| 54 | label: "使用权面积(m²)", | ||
| 55 | }, | ||
| 56 | { | ||
| 57 | prop: "qlxz", | ||
| 58 | label: "权利性质", | ||
| 59 | }, | ||
| 60 | { | ||
| 61 | prop: "tdyt", | ||
| 62 | label: "土地用途", | ||
| 63 | }, | ||
| 64 | { | ||
| 65 | prop: "syqqssj", | ||
| 66 | label: "使用权起始时间", | ||
| 67 | }, | ||
| 68 | { | ||
| 69 | prop: "syqjssj", | ||
| 70 | label: "使用权结束时间", | ||
| 71 | }, | ||
| 72 | { | ||
| 73 | prop: "tdsyqx", | ||
| 74 | label: "土地使用期限", | ||
| 75 | }, | ||
| 76 | { | ||
| 77 | prop: "qdjg", | ||
| 78 | label: "取得价格(万元)", | ||
| 79 | }, | ||
| 80 | { | ||
| 81 | prop: "djyy", | ||
| 82 | label: "登记原因", | ||
| 83 | }, | ||
| 84 | { | ||
| 85 | prop: "bdcqzh", | ||
| 86 | label: "不动产权证号", | ||
| 87 | }, | ||
| 88 | { | ||
| 89 | prop: "djsj", | ||
| 90 | label: "登记时间", | ||
| 91 | }, | ||
| 92 | { | ||
| 93 | prop: "dbr", | ||
| 94 | label: "登簿人", | ||
| 95 | }, | ||
| 96 | { | ||
| 97 | prop: "fj", | ||
| 98 | label: "附记", | ||
| 99 | }, | ||
| 100 | ] | ||
| 101 | }, | ||
| 102 | DYAQ: { | ||
| 103 | title: "抵押权登记信息", | ||
| 104 | columns: [ | ||
| 105 | { | ||
| 106 | prop: "ssywh", | ||
| 107 | label: "上手业务号", | ||
| 108 | }, | ||
| 109 | { | ||
| 110 | prop: "dah", | ||
| 111 | label: "档案号", | ||
| 112 | }, | ||
| 113 | { | ||
| 114 | prop: "ywh", | ||
| 115 | label: "业务号", | ||
| 116 | }, | ||
| 117 | { | ||
| 118 | prop: "bdcdyh", | ||
| 119 | label: "不动产单元号", | ||
| 120 | }, | ||
| 121 | { | ||
| 122 | prop: "zjjzwzl", | ||
| 123 | label: "在建建筑物坐落", | ||
| 124 | }, | ||
| 125 | { | ||
| 126 | prop: "dybdclx", | ||
| 127 | label: "抵押不动产类型", | ||
| 128 | }, | ||
| 129 | { | ||
| 130 | prop: "dyqr", | ||
| 131 | label: "抵押权人", | ||
| 132 | }, | ||
| 133 | { | ||
| 134 | prop: "zjzl", | ||
| 135 | label: "证件种类", | ||
| 136 | }, | ||
| 137 | { | ||
| 138 | prop: "zjh", | ||
| 139 | label: "证件号", | ||
| 140 | }, | ||
| 141 | { | ||
| 142 | prop: "dyr", | ||
| 143 | label: "抵押人", | ||
| 144 | }, | ||
| 145 | { | ||
| 146 | prop: "dyfs", | ||
| 147 | label: "抵押方式", | ||
| 148 | }, | ||
| 149 | { | ||
| 150 | prop: "sfygdj", | ||
| 151 | label: "是否预告登记", | ||
| 152 | }, | ||
| 153 | { | ||
| 154 | prop: "zjjzwdyfw", | ||
| 155 | label: "在建建筑物抵押范围", | ||
| 156 | }, | ||
| 157 | { | ||
| 158 | prop: "dymj", | ||
| 159 | label: "抵押面积", | ||
| 160 | }, | ||
| 161 | { | ||
| 162 | prop: "bdbzzqse", | ||
| 163 | label: "被担保主债权数额(万元)", | ||
| 164 | }, | ||
| 165 | { | ||
| 166 | prop: "dbfw", | ||
| 167 | label: "担保范围", | ||
| 168 | }, | ||
| 169 | { | ||
| 170 | prop: "zwlxqssj", | ||
| 171 | label: "债务履行起始时间", | ||
| 172 | }, | ||
| 173 | { | ||
| 174 | prop: "zwlxjssj", | ||
| 175 | label: "债务履行结束时间", | ||
| 176 | }, | ||
| 177 | { | ||
| 178 | prop: "zwlxqx", | ||
| 179 | label: "债务履行期限(债务确定期间)", | ||
| 180 | }, | ||
| 181 | { | ||
| 182 | prop: "zgzqqdsshse", | ||
| 183 | label: "最高债权确定事实和数额", | ||
| 184 | }, | ||
| 185 | { | ||
| 186 | prop: "sfczyd", | ||
| 187 | label: "是否存在禁止或限制转让抵押不动产的约定", | ||
| 188 | }, | ||
| 189 | { | ||
| 190 | prop: "djyy", | ||
| 191 | label: "登记原因", | ||
| 192 | }, | ||
| 193 | { | ||
| 194 | prop: "bdcdjzmh", | ||
| 195 | label: "不动产登记证明号", | ||
| 196 | }, | ||
| 197 | { | ||
| 198 | prop: "djsj", | ||
| 199 | label: "登记时间", | ||
| 200 | }, | ||
| 201 | { | ||
| 202 | prop: "dbr", | ||
| 203 | label: "登簿人", | ||
| 204 | }, | ||
| 205 | { | ||
| 206 | prop: "djjg", | ||
| 207 | label: "登记机构", | ||
| 208 | }, | ||
| 209 | { | ||
| 210 | prop: "fj", | ||
| 211 | label: "附记", | ||
| 212 | }, | ||
| 213 | { | ||
| 214 | prop: "qlqtzk", | ||
| 215 | label: "权利其他状况", | ||
| 216 | }, | ||
| 217 | { | ||
| 218 | prop: "zxdyywh", | ||
| 219 | label: "注销抵押业务号", | ||
| 220 | }, | ||
| 221 | { | ||
| 222 | prop: "zxdyyy", | ||
| 223 | label: "注销抵押原因", | ||
| 224 | }, | ||
| 225 | ] | ||
| 226 | }, | ||
| 227 | DYIQ: { | ||
| 228 | title: "地役权登记信息", | ||
| 229 | columns: [ | ||
| 230 | { | ||
| 231 | prop: "ssywh", | ||
| 232 | label: "上手业务号", | ||
| 233 | }, | ||
| 234 | { | ||
| 235 | prop: "dah", | ||
| 236 | label: "档案号", | ||
| 237 | }, | ||
| 238 | { | ||
| 239 | prop: "ywh", | ||
| 240 | label: "业务号", | ||
| 241 | }, | ||
| 242 | { | ||
| 243 | prop: "gydbdcdyh", | ||
| 244 | label: "供役地不动产单元号", | ||
| 245 | }, | ||
| 246 | { | ||
| 247 | prop: "gydqlr", | ||
| 248 | label: "供役地权利人", | ||
| 249 | }, | ||
| 250 | { | ||
| 251 | prop: "gydqlrzjzl", | ||
| 252 | label: "供役地权利人证件种类", | ||
| 253 | }, | ||
| 254 | { | ||
| 255 | prop: "xydbdcdyh", | ||
| 256 | label: "需役地不动产单元号", | ||
| 257 | }, | ||
| 258 | { | ||
| 259 | prop: "xydzl", | ||
| 260 | label: "需役地坐落", | ||
| 261 | }, | ||
| 262 | { | ||
| 263 | prop: "xydqlr", | ||
| 264 | label: "需役地权利人", | ||
| 265 | }, | ||
| 266 | { | ||
| 267 | prop: "xydqlrzjzl", | ||
| 268 | label: "需役地权利人证件种类", | ||
| 269 | }, | ||
| 270 | { | ||
| 271 | prop: "xydzjh", | ||
| 272 | label: "需役地证件号", | ||
| 273 | }, | ||
| 274 | { | ||
| 275 | prop: "djyy", | ||
| 276 | label: "登记原因", | ||
| 277 | }, | ||
| 278 | { | ||
| 279 | prop: "dyqnr", | ||
| 280 | label: "地役权内容", | ||
| 281 | }, | ||
| 282 | { | ||
| 283 | prop: "qlqssj", | ||
| 284 | label: "权利起始时间", | ||
| 285 | }, | ||
| 286 | { | ||
| 287 | prop: "qljssj", | ||
| 288 | label: "权利结束时间", | ||
| 289 | }, | ||
| 290 | { | ||
| 291 | prop: "bdcdjzmh", | ||
| 292 | label: "不动产登记证明号", | ||
| 293 | }, | ||
| 294 | { | ||
| 295 | prop: "qxdm", | ||
| 296 | label: "区县代码", | ||
| 297 | }, | ||
| 298 | { | ||
| 299 | prop: "djjg", | ||
| 300 | label: "登记机构", | ||
| 301 | }, | ||
| 302 | { | ||
| 303 | prop: "dbr", | ||
| 304 | label: "登簿人", | ||
| 305 | }, | ||
| 306 | { | ||
| 307 | prop: "djsj", | ||
| 308 | label: "登记时间", | ||
| 309 | }, | ||
| 310 | ] | ||
| 311 | }, | ||
| 312 | YGDJ: { | ||
| 313 | title: "预告登记信息", | ||
| 314 | columns: [ | ||
| 315 | { | ||
| 316 | prop: "ssywh", | ||
| 317 | label: "上手业务号", | ||
| 318 | }, | ||
| 319 | { | ||
| 320 | prop: "dah", | ||
| 321 | label: "档案号", | ||
| 322 | }, | ||
| 323 | { | ||
| 324 | prop: "ywh", | ||
| 325 | label: "业务号", | ||
| 326 | }, | ||
| 327 | { | ||
| 328 | prop: "bdcdyh", | ||
| 329 | label: "不动产单元号", | ||
| 330 | }, | ||
| 331 | { | ||
| 332 | prop: "zl", | ||
| 333 | label: "坐落", | ||
| 334 | }, | ||
| 335 | { | ||
| 336 | prop: "qlr", | ||
| 337 | label: "权利人", | ||
| 338 | }, | ||
| 339 | { | ||
| 340 | prop: "qlrzjzl", | ||
| 341 | label: "证件种类", | ||
| 342 | }, | ||
| 343 | { | ||
| 344 | prop: "qlrzjh", | ||
| 345 | label: "证件号", | ||
| 346 | }, | ||
| 347 | { | ||
| 348 | prop: "ywr", | ||
| 349 | label: "义务人", | ||
| 350 | }, | ||
| 351 | { | ||
| 352 | prop: "ywrzjzl", | ||
| 353 | label: "证件种类", | ||
| 354 | }, | ||
| 355 | { | ||
| 356 | prop: "ywrzjh", | ||
| 357 | label: "证件号", | ||
| 358 | }, | ||
| 359 | { | ||
| 360 | prop: "fwxz", | ||
| 361 | label: "房屋性质", | ||
| 362 | }, | ||
| 363 | { | ||
| 364 | prop: "ghyt", | ||
| 365 | label: "规划用途", | ||
| 366 | }, | ||
| 367 | { | ||
| 368 | prop: "fwzcs", | ||
| 369 | label: "房屋总层数", | ||
| 370 | }, | ||
| 371 | { | ||
| 372 | prop: "fwszc", | ||
| 373 | label: "房屋所在层", | ||
| 374 | }, | ||
| 375 | { | ||
| 376 | prop: "jzmj", | ||
| 377 | label: "建筑面积", | ||
| 378 | }, | ||
| 379 | { | ||
| 380 | prop: "djyy", | ||
| 381 | label: "登记原因", | ||
| 382 | }, | ||
| 383 | { | ||
| 384 | prop: "bdbzzqse", | ||
| 385 | label: "取得价格/被担保主债权数额", | ||
| 386 | }, | ||
| 387 | { | ||
| 388 | prop: "jedw", | ||
| 389 | label: "金额单位", | ||
| 390 | }, | ||
| 391 | { | ||
| 392 | prop: "dbfw", | ||
| 393 | label: "担保范围", | ||
| 394 | }, | ||
| 395 | { | ||
| 396 | prop: "sfczyd", | ||
| 397 | label: "是否存在禁止或限制转让抵押不动产的约定", | ||
| 398 | }, | ||
| 399 | { | ||
| 400 | prop: "djsj", | ||
| 401 | label: "登记时间", | ||
| 402 | }, | ||
| 403 | { | ||
| 404 | prop: "bdcdjzmh", | ||
| 405 | label: "不动产登记证明号", | ||
| 406 | }, | ||
| 407 | { | ||
| 408 | prop: "dbr", | ||
| 409 | label: "登簿人", | ||
| 410 | }, | ||
| 411 | { | ||
| 412 | prop: "zxygywh", | ||
| 413 | label: "注销预告业务号", | ||
| 414 | }, | ||
| 415 | { | ||
| 416 | prop: "zxygyy", | ||
| 417 | label: "注销预告原因", | ||
| 418 | }, | ||
| 419 | { | ||
| 420 | prop: "zxsj", | ||
| 421 | label: "注销时间", | ||
| 422 | }, | ||
| 423 | { | ||
| 424 | prop: "qszt", | ||
| 425 | label: "权属状态", | ||
| 426 | }, | ||
| 427 | ], | ||
| 428 | }, | ||
| 429 | CFDJ: { | ||
| 430 | title: "查封登记信息", | ||
| 431 | columns: [ | ||
| 432 | { | ||
| 433 | prop: "ssywh", | ||
| 434 | label: "上手业务号", | ||
| 435 | }, | ||
| 436 | { | ||
| 437 | prop: "dah", | ||
| 438 | label: "档案号", | ||
| 439 | }, | ||
| 440 | { | ||
| 441 | prop: "ywh", | ||
| 442 | label: "业务号", | ||
| 443 | }, | ||
| 444 | { | ||
| 445 | prop: "bdcdyh", | ||
| 446 | label: "不动产单元号", | ||
| 447 | }, | ||
| 448 | { | ||
| 449 | prop: "zl", | ||
| 450 | label: "坐落", | ||
| 451 | }, | ||
| 452 | { | ||
| 453 | prop: "bdcqlr", | ||
| 454 | label: "不动产权利人", | ||
| 455 | }, | ||
| 456 | { | ||
| 457 | prop: "zjzl", | ||
| 458 | label: "证件种类", | ||
| 459 | }, | ||
| 460 | { | ||
| 461 | prop: "zjh", | ||
| 462 | label: "证件号", | ||
| 463 | }, | ||
| 464 | { | ||
| 465 | prop: "cflx", | ||
| 466 | label: "查封类型", | ||
| 467 | }, | ||
| 468 | { | ||
| 469 | prop: "cfjg", | ||
| 470 | label: "查封机关", | ||
| 471 | }, | ||
| 472 | { | ||
| 473 | prop: "cfwh", | ||
| 474 | label: "查封文号", | ||
| 475 | }, | ||
| 476 | { | ||
| 477 | prop: "cfwj", | ||
| 478 | label: "查封文件", | ||
| 479 | }, | ||
| 480 | { | ||
| 481 | prop: "cfqssj", | ||
| 482 | label: "查封起始时间", | ||
| 483 | }, | ||
| 484 | { | ||
| 485 | prop: "cfjssj", | ||
| 486 | label: "查封结束时间", | ||
| 487 | }, | ||
| 488 | { | ||
| 489 | prop: "cfqx", | ||
| 490 | label: "查封期限", | ||
| 491 | }, | ||
| 492 | { | ||
| 493 | prop: "cffw", | ||
| 494 | label: "查封范围", | ||
| 495 | }, | ||
| 496 | { | ||
| 497 | prop: "djjg", | ||
| 498 | label: "登记机构", | ||
| 499 | }, | ||
| 500 | { | ||
| 501 | prop: "dbr", | ||
| 502 | label: "登簿人", | ||
| 503 | }, | ||
| 504 | { | ||
| 505 | prop: "djsj", | ||
| 506 | label: "登记时间", | ||
| 507 | }, | ||
| 508 | { | ||
| 509 | prop: "jfywh", | ||
| 510 | label: "解封业务号", | ||
| 511 | }, | ||
| 512 | { | ||
| 513 | prop: "jfjg", | ||
| 514 | label: "解封机关", | ||
| 515 | }, | ||
| 516 | { | ||
| 517 | prop: "jfwh", | ||
| 518 | label: "解封文号", | ||
| 519 | }, | ||
| 520 | { | ||
| 521 | prop: "jfwj", | ||
| 522 | label: "解封文件", | ||
| 523 | }, | ||
| 524 | { | ||
| 525 | prop: "jfdjsj", | ||
| 526 | label: "解封登记时间", | ||
| 527 | }, | ||
| 528 | { | ||
| 529 | prop: "jfdbr", | ||
| 530 | label: "解封登簿人", | ||
| 531 | }, | ||
| 532 | ] | ||
| 533 | }, | ||
| 534 | YYDJ: { | ||
| 535 | title: "异议登记信息", | ||
| 536 | columns: [ | ||
| 537 | { | ||
| 538 | prop: "ssywh", | ||
| 539 | label: "上手业务号", | ||
| 540 | }, | ||
| 541 | { | ||
| 542 | prop: "dah", | ||
| 543 | label: "档案号", | ||
| 544 | }, | ||
| 545 | { | ||
| 546 | prop: "ywh", | ||
| 547 | label: "业务号", | ||
| 548 | }, | ||
| 549 | { | ||
| 550 | prop: "bdcdyh", | ||
| 551 | label: "不动产单元号", | ||
| 552 | }, | ||
| 553 | { | ||
| 554 | prop: "zl", | ||
| 555 | label: "坐落", | ||
| 556 | }, | ||
| 557 | { | ||
| 558 | prop: "yyr", | ||
| 559 | label: "异议人", | ||
| 560 | }, | ||
| 561 | { | ||
| 562 | prop: "zjzl", | ||
| 563 | label: "证件种类", | ||
| 564 | }, | ||
| 565 | { | ||
| 566 | prop: "zjh", | ||
| 567 | label: "证件号", | ||
| 568 | }, | ||
| 569 | { | ||
| 570 | prop: "yysx", | ||
| 571 | label: "异议事项", | ||
| 572 | }, | ||
| 573 | { | ||
| 574 | prop: "bdcdjzmh", | ||
| 575 | label: "不动产登记证明号", | ||
| 576 | }, | ||
| 577 | { | ||
| 578 | prop: "djjg", | ||
| 579 | label: "登记机构", | ||
| 580 | }, | ||
| 581 | { | ||
| 582 | prop: "dbr", | ||
| 583 | label: "登簿人", | ||
| 584 | }, | ||
| 585 | { | ||
| 586 | prop: "djsj", | ||
| 587 | label: "登记时间", | ||
| 588 | }, | ||
| 589 | { | ||
| 590 | prop: "zxyyywh", | ||
| 591 | label: "注销异议业务号", | ||
| 592 | }, | ||
| 593 | { | ||
| 594 | prop: "zxyyyy", | ||
| 595 | label: "注销异议原因", | ||
| 596 | }, | ||
| 597 | { | ||
| 598 | prop: "zxyydbr", | ||
| 599 | label: "注销异议登簿人", | ||
| 600 | }, | ||
| 601 | { | ||
| 602 | prop: "zxyydjsj", | ||
| 603 | label: "注销异议登记时间", | ||
| 604 | }, | ||
| 605 | ] | ||
| 606 | }, | ||
| 607 | } | ||
| 608 | } | ||
| 609 | |||
| 610 | |||
| 611 | } | ||
| 612 | |||
| 613 | let datas = new data() | ||
| 614 | |||
| 615 | export { | ||
| 616 | datas | ||
| 617 | } | ||
| ... | \ No newline at end of file | ... | \ No newline at end of file |
| 1 | <template> | ||
| 2 | <div class="djxxTable"> | ||
| 3 | <div class="tableBox"> | ||
| 4 | <div class="title"> | ||
| 5 | {{ title }} | ||
| 6 | <div class="checkbox"> | ||
| 7 | <el-checkbox-group v-model="checkList" @change="checkChange"> | ||
| 8 | <el-checkbox label="临时"></el-checkbox> | ||
| 9 | <el-checkbox label="现势"></el-checkbox> | ||
| 10 | <el-checkbox label="历史"></el-checkbox> | ||
| 11 | </el-checkbox-group> | ||
| 12 | </div> | ||
| 13 | </div> | ||
| 14 | <div class="xxTableBox" v-if="showTableData.length"> | ||
| 15 | <table class="xxTable" :width="tableWidth"> | ||
| 16 | <tr> | ||
| 17 | <th rowspan="3">业务类型</th> | ||
| 18 | </tr> | ||
| 19 | <!-- 第一行表头 --> | ||
| 20 | <tr class="one"> | ||
| 21 | <th | ||
| 22 | v-for="(item, index) in ths" | ||
| 23 | :key="index" | ||
| 24 | :class="[item.class, item.type == '临时' ? 'linshiIcon' : '']" | ||
| 25 | > | ||
| 26 | <div class="icon" v-if="item.type == '临时'">{{ item.type }}</div> | ||
| 27 | {{ item.type }} | ||
| 28 | </th> | ||
| 29 | </tr> | ||
| 30 | <!-- 第二行表头 --> | ||
| 31 | <tr class="two"> | ||
| 32 | <th v-for="(item, index) in ths" :key="index" :class="item.class"> | ||
| 33 | <p>{{ item.qllxmc }}</p> | ||
| 34 | <p>{{ item.djlxmc }}</p> | ||
| 35 | </th> | ||
| 36 | </tr> | ||
| 37 | <!-- 数据 --> | ||
| 38 | <tr v-for="(item, index) in columns" :key="index"> | ||
| 39 | <td> | ||
| 40 | {{ item.label }} | ||
| 41 | </td> | ||
| 42 | <td | ||
| 43 | v-for="(item1, index1) in showTableData" | ||
| 44 | :key="index1" | ||
| 45 | :class="[ | ||
| 46 | item1.qszt == '2' ? 'lishi' : '', | ||
| 47 | item1.qszt == '0' ? 'linshi' : '', | ||
| 48 | ]" | ||
| 49 | > | ||
| 50 | {{ item1[item.prop] }} | ||
| 51 | </td> | ||
| 52 | </tr> | ||
| 53 | </table> | ||
| 54 | </div> | ||
| 55 | </div> | ||
| 56 | </div> | ||
| 57 | </template> | ||
| 58 | |||
| 59 | <script> | ||
| 60 | import { mapGetters } from "vuex"; | ||
| 61 | import { datas } from "./djxxColumns"; | ||
| 62 | |||
| 63 | export default { | ||
| 64 | name: "djxxTable", | ||
| 65 | props: { | ||
| 66 | showType: "", | ||
| 67 | }, | ||
| 68 | data() { | ||
| 69 | return { | ||
| 70 | checkList: ["临时", "现势", "历史"], | ||
| 71 | tableWidth: 810, | ||
| 72 | type: datas.columns(), | ||
| 73 | tableData: [], | ||
| 74 | showTableData: [], | ||
| 75 | ths: [], | ||
| 76 | showThs: [], | ||
| 77 | columns: [], | ||
| 78 | title: "", | ||
| 79 | }; | ||
| 80 | }, | ||
| 81 | computed: { | ||
| 82 | ...mapGetters(["djbxx"]), | ||
| 83 | }, | ||
| 84 | watch: { | ||
| 85 | showType: { | ||
| 86 | handler(newVlue) { | ||
| 87 | // 清空值 | ||
| 88 | this.tableData = []; | ||
| 89 | this.ths = []; | ||
| 90 | this.columns = this.type[newVlue].columns; | ||
| 91 | this.title = this.type[newVlue].title; | ||
| 92 | this.checkList = ["临时", "现势", "历史"]; | ||
| 93 | this.tableWidth = 810 | ||
| 94 | |||
| 95 | let detail = this.djbxx.detail.qlxxs[newVlue]; | ||
| 96 | detail.forEach((item) => { | ||
| 97 | this.tableData.push(item); | ||
| 98 | if (item.qszt == "0") { | ||
| 99 | this.ths.push({ | ||
| 100 | type: "临时", | ||
| 101 | qllxmc: item.qllxmc, | ||
| 102 | djlxmc: item.djlxmc, | ||
| 103 | prop: "linshi", | ||
| 104 | class: "linshi", | ||
| 105 | }); | ||
| 106 | } else if (item.qszt == "1") { | ||
| 107 | this.ths.push({ | ||
| 108 | type: "现势", | ||
| 109 | qllxmc: item.qllxmc, | ||
| 110 | djlxmc: item.djlxmc, | ||
| 111 | prop: "xianshi", | ||
| 112 | class: "xianshi", | ||
| 113 | }); | ||
| 114 | } else if (item.qszt == "2") { | ||
| 115 | this.ths.push({ | ||
| 116 | type: "历史", | ||
| 117 | qllxmc: item.qllxmc, | ||
| 118 | djlxmc: item.djlxmc, | ||
| 119 | prop: "lishi", | ||
| 120 | class: "lishi", | ||
| 121 | }); | ||
| 122 | } | ||
| 123 | }); | ||
| 124 | this.showTableData = this.tableData; | ||
| 125 | this.showThs = this.ths; | ||
| 126 | let width = (this.tableData.length - 3) * 223 + this.tableWidth; | ||
| 127 | this.tableWidth = this.tableData.length > 3 ? width : 810; | ||
| 128 | }, | ||
| 129 | immediate: true, | ||
| 130 | }, | ||
| 131 | }, | ||
| 132 | methods: { | ||
| 133 | checkChange() { | ||
| 134 | var checkKey = []; | ||
| 135 | this.ths = []; | ||
| 136 | this.tableWidth = 810; | ||
| 137 | this.checkList.forEach((item) => { | ||
| 138 | if (item == "临时") { | ||
| 139 | checkKey.push("0"); | ||
| 140 | } | ||
| 141 | if (item == "现势") { | ||
| 142 | checkKey.push("1"); | ||
| 143 | } | ||
| 144 | if (item == "历史") { | ||
| 145 | checkKey.push("2"); | ||
| 146 | } | ||
| 147 | }); | ||
| 148 | this.showTableData = this.tableData.filter((item) => | ||
| 149 | checkKey.includes(item.qszt) | ||
| 150 | ); | ||
| 151 | this.showTableData.forEach((item) => { | ||
| 152 | if (item.qszt == "0") { | ||
| 153 | this.ths.push({ | ||
| 154 | type: "临时", | ||
| 155 | qllxmc: item.qllxmc, | ||
| 156 | djlxmc: item.djlxmc, | ||
| 157 | prop: "linshi", | ||
| 158 | class: "linshi", | ||
| 159 | }); | ||
| 160 | } else if (item.qszt == "1") { | ||
| 161 | this.ths.push({ | ||
| 162 | type: "现势", | ||
| 163 | qllxmc: item.qllxmc, | ||
| 164 | djlxmc: item.djlxmc, | ||
| 165 | prop: "xianshi", | ||
| 166 | class: "xianshi", | ||
| 167 | }); | ||
| 168 | } else if (item.qszt == "2") { | ||
| 169 | this.ths.push({ | ||
| 170 | type: "历史", | ||
| 171 | qllxmc: item.qllxmc, | ||
| 172 | djlxmc: item.djlxmc, | ||
| 173 | prop: "lishi", | ||
| 174 | class: "lishi", | ||
| 175 | }); | ||
| 176 | } | ||
| 177 | }); | ||
| 178 | let width = (this.showTableData.length - 3) * 223 + this.tableWidth; | ||
| 179 | this.tableWidth = this.showTableData.length > 3 ? width : 810; | ||
| 180 | }, | ||
| 181 | }, | ||
| 182 | }; | ||
| 183 | </script> | ||
| 184 | |||
| 185 | <style lang="scss" scoped> | ||
| 186 | .djxxTable { | ||
| 187 | width: 100%; | ||
| 188 | height: 100%; | ||
| 189 | background: #fff; | ||
| 190 | overflow-y: scroll; | ||
| 191 | color: #333; | ||
| 192 | |||
| 193 | .tableBox { | ||
| 194 | width: 810px; | ||
| 195 | margin: 0 auto; | ||
| 196 | display: flex; | ||
| 197 | flex-wrap: wrap; | ||
| 198 | |||
| 199 | .title { | ||
| 200 | width: 100%; | ||
| 201 | font-family: "Arial Negreta", "Arial Normal", "Arial", sans-serif; | ||
| 202 | font-weight: 700; | ||
| 203 | font-size: 16px; | ||
| 204 | text-align: center; | ||
| 205 | background: #e9e9e9; | ||
| 206 | height: 62px; | ||
| 207 | line-height: 62px; | ||
| 208 | position: relative; | ||
| 209 | margin: 1px 0; | ||
| 210 | .checkbox { | ||
| 211 | position: absolute; | ||
| 212 | right: 20px; | ||
| 213 | bottom: -16px; | ||
| 214 | height: 62px; | ||
| 215 | } | ||
| 216 | } | ||
| 217 | |||
| 218 | .xxTableBox { | ||
| 219 | width: 810px; | ||
| 220 | overflow-x: scroll; | ||
| 221 | } | ||
| 222 | |||
| 223 | .xxTable > tr th:not(:first-child) { | ||
| 224 | width: 223px; | ||
| 225 | } | ||
| 226 | .xxTable > tr:first-child th { | ||
| 227 | width: 140px; | ||
| 228 | } | ||
| 229 | .xxTable { | ||
| 230 | border-spacing: 1px; | ||
| 231 | tr > th { | ||
| 232 | background: #464c5b; | ||
| 233 | color: #fff; | ||
| 234 | font-size: 16px; | ||
| 235 | } | ||
| 236 | th.linshi, | ||
| 237 | th.xianshi { | ||
| 238 | background: #464c5b; | ||
| 239 | } | ||
| 240 | th.lishi { | ||
| 241 | background: rgba(70, 76, 91, 0.8); | ||
| 242 | } | ||
| 243 | .one th { | ||
| 244 | height: 25px; | ||
| 245 | font-size: 14px; | ||
| 246 | } | ||
| 247 | |||
| 248 | th.linshi { | ||
| 249 | color: #fe9400; | ||
| 250 | } | ||
| 251 | .two th { | ||
| 252 | height: 45px; | ||
| 253 | |||
| 254 | p:nth-child(2) { | ||
| 255 | font-size: 14px; | ||
| 256 | } | ||
| 257 | } | ||
| 258 | .linshiIcon { | ||
| 259 | position: relative; | ||
| 260 | } | ||
| 261 | .linshiIcon::after { | ||
| 262 | content: ""; | ||
| 263 | display: block; | ||
| 264 | width: 0; | ||
| 265 | height: 0; | ||
| 266 | border-width: 0px 0px 45px 45px; | ||
| 267 | border-style: none solid solid; | ||
| 268 | border-color: transparent transparent #fe9400; | ||
| 269 | position: absolute; | ||
| 270 | top: 0px; | ||
| 271 | right: 3px; | ||
| 272 | transform: rotate(-90deg); | ||
| 273 | } | ||
| 274 | .icon { | ||
| 275 | position: absolute; | ||
| 276 | top: 8px; | ||
| 277 | right: 6px; | ||
| 278 | transform: rotate(45deg); | ||
| 279 | color: #fff; | ||
| 280 | font-size: 12px; | ||
| 281 | z-index: 10; | ||
| 282 | } | ||
| 283 | |||
| 284 | tr td { | ||
| 285 | text-align: center; | ||
| 286 | height: 40px; | ||
| 287 | padding: 4px; | ||
| 288 | font-size: 13px; | ||
| 289 | } | ||
| 290 | > tr:nth-child(odd) td { | ||
| 291 | background: #f2f2f2; | ||
| 292 | } | ||
| 293 | > tr:nth-child(even) td { | ||
| 294 | background: #f9f9f9; | ||
| 295 | } | ||
| 296 | td.linshi { | ||
| 297 | color: #fe9400; | ||
| 298 | } | ||
| 299 | tr > td.lishi { | ||
| 300 | color: #7f7f7f; | ||
| 301 | } | ||
| 302 | } | ||
| 303 | } | ||
| 304 | } | ||
| 305 | </style> |
| 1 | <template> | ||
| 2 | <div class="dyaq"> | ||
| 3 | <div class="tableBox"> | ||
| 4 | <div class="title"> | ||
| 5 | 抵押权登记信息 | ||
| 6 | <div class="checkbox"> | ||
| 7 | <el-checkbox-group v-model="checkList"> | ||
| 8 | <el-checkbox label="临时"></el-checkbox> | ||
| 9 | <el-checkbox label="现势"></el-checkbox> | ||
| 10 | <el-checkbox label="历史"></el-checkbox> | ||
| 11 | </el-checkbox-group> | ||
| 12 | </div> | ||
| 13 | </div> | ||
| 14 | <table class="xxTable"> | ||
| 15 | <tr> | ||
| 16 | <th rowspan="3" width="140">业务类型</th> | ||
| 17 | </tr> | ||
| 18 | <tr class="one"> | ||
| 19 | <th class="linshiIcon"> | ||
| 20 | <div class="icon">临时</div> | ||
| 21 | 临时 | ||
| 22 | </th> | ||
| 23 | <th>现势</th> | ||
| 24 | <th>历史</th> | ||
| 25 | </tr> | ||
| 26 | <tr class="two"> | ||
| 27 | <th> | ||
| 28 | <p>抵押权</p> | ||
| 29 | <p>首次登记</p> | ||
| 30 | </th> | ||
| 31 | <th> | ||
| 32 | <p>抵押权</p> | ||
| 33 | <p>转移登记</p> | ||
| 34 | </th> | ||
| 35 | <th> | ||
| 36 | <p>抵押权</p> | ||
| 37 | <p>转移登记</p> | ||
| 38 | </th> | ||
| 39 | </tr> | ||
| 40 | |||
| 41 | <tr v-for="(item, index) in columns" :key="index"> | ||
| 42 | <td> | ||
| 43 | {{ item.label }} | ||
| 44 | </td> | ||
| 45 | <td>{{ tableData.linshi[item.prop] }}</td> | ||
| 46 | <td>{{ tableData.xianshi[item.prop] }}</td> | ||
| 47 | <td>{{ tableData.lishi[item.prop] }}</td> | ||
| 48 | </tr> | ||
| 49 | </table> | ||
| 50 | </div> | ||
| 51 | </div> | ||
| 52 | </template> | ||
| 53 | |||
| 54 | <script> | ||
| 55 | export default { | ||
| 56 | name: "dyaq", | ||
| 57 | data() { | ||
| 58 | return { | ||
| 59 | checkList: ["临时", "现势", "历史"], | ||
| 60 | columns: [ | ||
| 61 | { | ||
| 62 | prop: "ssywh", | ||
| 63 | label: "上手业务号", | ||
| 64 | }, | ||
| 65 | { | ||
| 66 | prop: "dah", | ||
| 67 | label: "档案号", | ||
| 68 | }, | ||
| 69 | { | ||
| 70 | prop: "ywh", | ||
| 71 | label: "业务号", | ||
| 72 | }, | ||
| 73 | { | ||
| 74 | prop: "bdcdyh", | ||
| 75 | label: "不动产单元号", | ||
| 76 | }, | ||
| 77 | { | ||
| 78 | prop: "zjjzwzl", | ||
| 79 | label: "在建建筑物坐落", | ||
| 80 | }, | ||
| 81 | { | ||
| 82 | prop: "dybdclx", | ||
| 83 | label: "抵押不动产类型", | ||
| 84 | }, | ||
| 85 | { | ||
| 86 | prop: "dyqr", | ||
| 87 | label: "抵押权人", | ||
| 88 | }, | ||
| 89 | { | ||
| 90 | prop: "zjzl", | ||
| 91 | label: "证件种类", | ||
| 92 | }, | ||
| 93 | { | ||
| 94 | prop: "zjh", | ||
| 95 | label: "证件号", | ||
| 96 | }, | ||
| 97 | { | ||
| 98 | prop: "dyr", | ||
| 99 | label: "抵押人", | ||
| 100 | }, | ||
| 101 | { | ||
| 102 | prop: "dyfs", | ||
| 103 | label: "抵押方式", | ||
| 104 | }, | ||
| 105 | { | ||
| 106 | prop: "sfygdj", | ||
| 107 | label: "是否预告登记", | ||
| 108 | }, | ||
| 109 | { | ||
| 110 | prop: "zjjzwdyfw", | ||
| 111 | label: "在建建筑物抵押范围", | ||
| 112 | }, | ||
| 113 | { | ||
| 114 | prop: "dymj", | ||
| 115 | label: "抵押面积", | ||
| 116 | }, | ||
| 117 | { | ||
| 118 | prop: "bdbzzqse", | ||
| 119 | label: "被担保主债权数额(万元)", | ||
| 120 | }, | ||
| 121 | { | ||
| 122 | prop: "dbfw", | ||
| 123 | label: "担保范围", | ||
| 124 | }, | ||
| 125 | { | ||
| 126 | prop: "zwlxqssj", | ||
| 127 | label: "债务履行起始时间", | ||
| 128 | }, | ||
| 129 | { | ||
| 130 | prop: "zwlxjssj", | ||
| 131 | label: "债务履行结束时间", | ||
| 132 | }, | ||
| 133 | { | ||
| 134 | prop: "zwlxqx", | ||
| 135 | label: "债务履行期限(债务确定期间)", | ||
| 136 | }, | ||
| 137 | { | ||
| 138 | prop: "zgzqqdsshse", | ||
| 139 | label: "最高债权确定事实和数额", | ||
| 140 | }, | ||
| 141 | { | ||
| 142 | prop: "sfczyd", | ||
| 143 | label: "是否存在禁止或限制转让抵押不动产的约定", | ||
| 144 | }, | ||
| 145 | { | ||
| 146 | prop: "djyy", | ||
| 147 | label: "登记原因", | ||
| 148 | }, | ||
| 149 | { | ||
| 150 | prop: "bdcdjzmh", | ||
| 151 | label: "不动产登记证明号", | ||
| 152 | }, | ||
| 153 | { | ||
| 154 | prop: "djsj", | ||
| 155 | label: "登记时间", | ||
| 156 | }, | ||
| 157 | { | ||
| 158 | prop: "dbr", | ||
| 159 | label: "登簿人", | ||
| 160 | }, | ||
| 161 | { | ||
| 162 | prop: "djjg", | ||
| 163 | label: "登记机构", | ||
| 164 | }, | ||
| 165 | { | ||
| 166 | prop: "fj", | ||
| 167 | label: "附记", | ||
| 168 | }, | ||
| 169 | { | ||
| 170 | prop: "qlqtzk", | ||
| 171 | label: "权利其他状况", | ||
| 172 | }, | ||
| 173 | { | ||
| 174 | prop: "zxdyywh", | ||
| 175 | label: "注销抵押业务号", | ||
| 176 | }, | ||
| 177 | { | ||
| 178 | prop: "zxdyyy", | ||
| 179 | label: "注销抵押原因", | ||
| 180 | }, | ||
| 181 | ], | ||
| 182 | tableData: { | ||
| 183 | linshi: { | ||
| 184 | ssywh: "", | ||
| 185 | dah: "", | ||
| 186 | ywh: "200825012285", | ||
| 187 | bdcdyh: "370205004005GB10030 W00000000", | ||
| 188 | zjjzwzl: | ||
| 189 | "汉台区东大街街道办事处北大街居委会北大街东侧（莲花池公园西侧）", | ||
| 190 | dybdclx: "土地", | ||
| 191 | dyqr: "中国银行股份有限公司C区支行", | ||
| 192 | zjzj: "营业执照", | ||
| 193 | zjh: "*******", | ||
| 194 | dyr: "联城有限公司", | ||
| 195 | dyfs: "一般抵押", | ||
| 196 | sfygdj: "否", | ||
| 197 | zjjzwdyfw: "", | ||
| 198 | dymj: "22384.1700", | ||
| 199 | bdbzzqse: "22000", | ||
| 200 | dbfw: "城镇住宅用地", | ||
| 201 | zwlxqssj: "2007年12月25日", | ||
| 202 | zwlxjssj: "2077年12月24日", | ||
| 203 | zwlxqx: "1年", | ||
| 204 | zgzqqdsshse: "11223", | ||
| 205 | sfczyd: "否", | ||
| 206 | djyy: "合同设立", | ||
| 207 | bdcdjzmh: "A（2011）B市不动产证明第0000060号", | ||
| 208 | djsj: "2009年04月21日", | ||
| 209 | dbr: "路**", | ||
| 210 | djjg: "", | ||
| 211 | fj: "", | ||
| 212 | qlqtzk: "", | ||
| 213 | zxdyywh: "201025126854", | ||
| 214 | zxdyyy: "贷款还清", | ||
| 215 | }, | ||
| 216 | xianshi: { | ||
| 217 | ssywh: "", | ||
| 218 | dah: "", | ||
| 219 | ywh: "200825012285", | ||
| 220 | bdcdyh: "370205004005GB10030 W00000000", | ||
| 221 | zjjzwzl: | ||
| 222 | "汉台区东大街街道办事处北大街居委会北大街东侧（莲花池公园西侧）", | ||
| 223 | dybdclx: "土地", | ||
| 224 | dyqr: "中国银行股份有限公司C区支行", | ||
| 225 | zjzj: "营业执照", | ||
| 226 | zjh: "*******", | ||
| 227 | dyr: "联城有限公司", | ||
| 228 | dyfs: "一般抵押", | ||
| 229 | sfygdj: "否", | ||
| 230 | zjjzwdyfw: "", | ||
| 231 | dymj: "22384.1700", | ||
| 232 | bdbzzqse: "22000", | ||
| 233 | dbfw: "城镇住宅用地", | ||
| 234 | zwlxqssj: "2007年12月25日", | ||
| 235 | zwlxjssj: "2077年12月24日", | ||
| 236 | zwlxqx: "1年", | ||
| 237 | zgzqqdsshse: "11223", | ||
| 238 | sfczyd: "否", | ||
| 239 | djyy: "合同设立", | ||
| 240 | bdcdjzmh: "A（2011）B市不动产证明第0000060号", | ||
| 241 | djsj: "2009年04月21日", | ||
| 242 | dbr: "路**", | ||
| 243 | djjg: "", | ||
| 244 | fj: "", | ||
| 245 | qlqtzk: "", | ||
| 246 | zxdyywh: "201025126854", | ||
| 247 | zxdyyy: "贷款还清", | ||
| 248 | }, | ||
| 249 | lishi: { | ||
| 250 | ssywh: "", | ||
| 251 | dah: "", | ||
| 252 | ywh: "200825012285", | ||
| 253 | bdcdyh: "370205004005GB10030 W00000000", | ||
| 254 | zjjzwzl: | ||
| 255 | "汉台区东大街街道办事处北大街居委会北大街东侧（莲花池公园西侧）", | ||
| 256 | dybdclx: "土地", | ||
| 257 | dyqr: "中国银行股份有限公司C区支行", | ||
| 258 | zjzj: "营业执照", | ||
| 259 | zjh: "*******", | ||
| 260 | dyr: "联城有限公司", | ||
| 261 | dyfs: "一般抵押", | ||
| 262 | sfygdj: "否", | ||
| 263 | zjjzwdyfw: "", | ||
| 264 | dymj: "22384.1700", | ||
| 265 | bdbzzqse: "22000", | ||
| 266 | dbfw: "城镇住宅用地", | ||
| 267 | zwlxqssj: "2007年12月25日", | ||
| 268 | zwlxjssj: "2077年12月24日", | ||
| 269 | zwlxqx: "1年", | ||
| 270 | zgzqqdsshse: "11223", | ||
| 271 | sfczyd: "否", | ||
| 272 | djyy: "合同设立", | ||
| 273 | bdcdjzmh: "A（2011）B市不动产证明第0000060号", | ||
| 274 | djsj: "2009年04月21日", | ||
| 275 | dbr: "路**", | ||
| 276 | djjg: "", | ||
| 277 | fj: "", | ||
| 278 | qlqtzk: "", | ||
| 279 | zxdyywh: "201025126854", | ||
| 280 | zxdyyy: "贷款还清", | ||
| 281 | }, | ||
| 282 | }, | ||
| 283 | }; | ||
| 284 | }, | ||
| 285 | }; | ||
| 286 | </script> | ||
| 287 | |||
| 288 | <style lang="scss" scoped> | ||
| 289 | .dyaq { | ||
| 290 | width: 100%; | ||
| 291 | height: 100%; | ||
| 292 | background: #fff; | ||
| 293 | overflow-y: scroll; | ||
| 294 | color: #333; | ||
| 295 | |||
| 296 | .tableBox { | ||
| 297 | width: 810px; | ||
| 298 | margin: 0 auto; | ||
| 299 | |||
| 300 | .title { | ||
| 301 | font-family: "Arial Negreta", "Arial Normal", "Arial", sans-serif; | ||
| 302 | font-weight: 700; | ||
| 303 | font-size: 16px; | ||
| 304 | text-align: center; | ||
| 305 | background: #e9e9e9; | ||
| 306 | height: 62px; | ||
| 307 | line-height: 62px; | ||
| 308 | position: relative; | ||
| 309 | margin: 1px 0; | ||
| 310 | .checkbox { | ||
| 311 | position: absolute; | ||
| 312 | right: 20px; | ||
| 313 | bottom: -16px; | ||
| 314 | height: 62px; | ||
| 315 | } | ||
| 316 | } | ||
| 317 | |||
| 318 | .xxTable { | ||
| 319 | width: 810px; | ||
| 320 | border-spacing: 1px; | ||
| 321 | tr > th { | ||
| 322 | background: #464c5b; | ||
| 323 | color: #fff; | ||
| 324 | font-size: 16px; | ||
| 325 | } | ||
| 326 | tr > th:nth-child(1), | ||
| 327 | tr > th:nth-child(2) { | ||
| 328 | background: #464c5b; | ||
| 329 | } | ||
| 330 | tr > th:nth-child(3) { | ||
| 331 | background: rgba(70, 76, 91, 0.8); | ||
| 332 | } | ||
| 333 | .one th { | ||
| 334 | height: 25px; | ||
| 335 | font-size: 14px; | ||
| 336 | } | ||
| 337 | .one > th:nth-child(1) { | ||
| 338 | color: #fe9400; | ||
| 339 | } | ||
| 340 | .two th { | ||
| 341 | height: 45px; | ||
| 342 | |||
| 343 | p:nth-child(2) { | ||
| 344 | font-size: 14px; | ||
| 345 | } | ||
| 346 | } | ||
| 347 | .two > th:nth-child(1) { | ||
| 348 | color: #fe9400; | ||
| 349 | } | ||
| 350 | .linshiIcon { | ||
| 351 | position: relative; | ||
| 352 | } | ||
| 353 | .linshiIcon::after { | ||
| 354 | content: ""; | ||
| 355 | display: block; | ||
| 356 | width: 0; | ||
| 357 | height: 0; | ||
| 358 | border-width: 0px 0px 45px 45px; | ||
| 359 | border-style: none solid solid; | ||
| 360 | border-color: transparent transparent #fe9400; | ||
| 361 | position: absolute; | ||
| 362 | top: 0px; | ||
| 363 | right: 3px; | ||
| 364 | transform: rotate(-90deg); | ||
| 365 | } | ||
| 366 | .icon { | ||
| 367 | position: absolute; | ||
| 368 | top: 8px; | ||
| 369 | right: 6px; | ||
| 370 | transform: rotate(45deg); | ||
| 371 | color: #fff; | ||
| 372 | font-size: 12px; | ||
| 373 | z-index: 10; | ||
| 374 | } | ||
| 375 | |||
| 376 | tr td { | ||
| 377 | text-align: center; | ||
| 378 | height: 40px; | ||
| 379 | padding: 4px; | ||
| 380 | font-size: 13px; | ||
| 381 | } | ||
| 382 | > tr:nth-child(odd) td { | ||
| 383 | background: #f2f2f2; | ||
| 384 | } | ||
| 385 | > tr:nth-child(even) td { | ||
| 386 | background: #f9f9f9; | ||
| 387 | } | ||
| 388 | tr > td:nth-child(2) { | ||
| 389 | color: #fe9400; | ||
| 390 | } | ||
| 391 | tr > td:nth-child(4) { | ||
| 392 | color: #7f7f7f; | ||
| 393 | } | ||
| 394 | } | ||
| 395 | } | ||
| 396 | } | ||
| 397 | </style> |
| 1 | <template> | ||
| 2 | <div class="dyiq"> | ||
| 3 | <div class="tableBox"> | ||
| 4 | <div class="title"> | ||
| 5 | 地役权登记信息 | ||
| 6 | <div class="checkbox"> | ||
| 7 | <el-checkbox-group v-model="checkList"> | ||
| 8 | <el-checkbox label="临时"></el-checkbox> | ||
| 9 | <el-checkbox label="现势"></el-checkbox> | ||
| 10 | <el-checkbox label="历史"></el-checkbox> | ||
| 11 | </el-checkbox-group> | ||
| 12 | </div> | ||
| 13 | </div> | ||
| 14 | <table class="xxTable"> | ||
| 15 | <tr> | ||
| 16 | <th rowspan="3" width="140">业务类型</th> | ||
| 17 | </tr> | ||
| 18 | <tr class="one"> | ||
| 19 | <th class="linshiIcon"> | ||
| 20 | <div class="icon">临时</div> | ||
| 21 | 临时 | ||
| 22 | </th> | ||
| 23 | <th>现势</th> | ||
| 24 | <th>历史</th> | ||
| 25 | </tr> | ||
| 26 | <tr class="two"> | ||
| 27 | <th> | ||
| 28 | <p>地役权</p> | ||
| 29 | <p>首次登记</p> | ||
| 30 | </th> | ||
| 31 | <th> | ||
| 32 | <p>地役权</p> | ||
| 33 | <p>转移登记</p> | ||
| 34 | </th> | ||
| 35 | <th> | ||
| 36 | <p>地役权</p> | ||
| 37 | <p>转移登记</p> | ||
| 38 | </th> | ||
| 39 | </tr> | ||
| 40 | |||
| 41 | <tr v-for="(item, index) in columns" :key="index"> | ||
| 42 | <td> | ||
| 43 | {{ item.label }} | ||
| 44 | </td> | ||
| 45 | <td>{{ tableData.linshi[item.prop] }}</td> | ||
| 46 | <td>{{ tableData.xianshi[item.prop] }}</td> | ||
| 47 | <td>{{ tableData.lishi[item.prop] }}</td> | ||
| 48 | </tr> | ||
| 49 | </table> | ||
| 50 | </div> | ||
| 51 | </div> | ||
| 52 | </template> | ||
| 53 | |||
| 54 | <script> | ||
| 55 | export default { | ||
| 56 | name: "dyiq", | ||
| 57 | data() { | ||
| 58 | return { | ||
| 59 | checkList: ["临时", "现势", "历史"], | ||
| 60 | columns: [ | ||
| 61 | { | ||
| 62 | prop: "ssywh", | ||
| 63 | label: "上手业务号", | ||
| 64 | }, | ||
| 65 | { | ||
| 66 | prop: "dah", | ||
| 67 | label: "档案号", | ||
| 68 | }, | ||
| 69 | { | ||
| 70 | prop: "ywh", | ||
| 71 | label: "业务号", | ||
| 72 | }, | ||
| 73 | { | ||
| 74 | prop: "gydbdcdyh", | ||
| 75 | label: "供役地不动产单元号", | ||
| 76 | }, | ||
| 77 | { | ||
| 78 | prop: "gydqlr", | ||
| 79 | label: "供役地权利人", | ||
| 80 | }, | ||
| 81 | { | ||
| 82 | prop: "gydqlrzjzl", | ||
| 83 | label: "供役地权利人证件种类", | ||
| 84 | }, | ||
| 85 | { | ||
| 86 | prop: "xydbdcdyh", | ||
| 87 | label: "需役地不动产单元号", | ||
| 88 | }, | ||
| 89 | { | ||
| 90 | prop: "xydzl", | ||
| 91 | label: "需役地坐落", | ||
| 92 | }, | ||
| 93 | { | ||
| 94 | prop: "xydqlr", | ||
| 95 | label: "需役地权利人", | ||
| 96 | }, | ||
| 97 | { | ||
| 98 | prop: "xydqlrzjzl", | ||
| 99 | label: "需役地权利人证件种类", | ||
| 100 | }, | ||
| 101 | { | ||
| 102 | prop: "xydzjh", | ||
| 103 | label: "需役地证件号", | ||
| 104 | }, | ||
| 105 | { | ||
| 106 | prop: "djyy", | ||
| 107 | label: "登记原因", | ||
| 108 | }, | ||
| 109 | { | ||
| 110 | prop: "dyqnr", | ||
| 111 | label: "地役权内容", | ||
| 112 | }, | ||
| 113 | { | ||
| 114 | prop: "qlqssj", | ||
| 115 | label: "权利起始时间", | ||
| 116 | }, | ||
| 117 | { | ||
| 118 | prop: "qljssj", | ||
| 119 | label: "权利结束时间", | ||
| 120 | }, | ||
| 121 | { | ||
| 122 | prop: "bdcdjzmh", | ||
| 123 | label: "不动产登记证明号", | ||
| 124 | }, | ||
| 125 | { | ||
| 126 | prop: "qxdm", | ||
| 127 | label: "区县代码", | ||
| 128 | }, | ||
| 129 | { | ||
| 130 | prop: "djjg", | ||
| 131 | label: "登记机构", | ||
| 132 | }, | ||
| 133 | { | ||
| 134 | prop: "dbr", | ||
| 135 | label: "登簿人", | ||
| 136 | }, | ||
| 137 | { | ||
| 138 | prop: "djsj", | ||
| 139 | label: "登记时间", | ||
| 140 | }, | ||
| 141 | ], | ||
| 142 | tableData: { | ||
| 143 | linshi: {}, | ||
| 144 | xianshi: {}, | ||
| 145 | lishi: {}, | ||
| 146 | }, | ||
| 147 | }; | ||
| 148 | }, | ||
| 149 | }; | ||
| 150 | </script> | ||
| 151 | |||
| 152 | <style lang="scss" scoped> | ||
| 153 | .dyiq { | ||
| 154 | width: 100%; | ||
| 155 | height: 100%; | ||
| 156 | background: #fff; | ||
| 157 | overflow-y: scroll; | ||
| 158 | color: #333; | ||
| 159 | |||
| 160 | .tableBox { | ||
| 161 | width: 810px; | ||
| 162 | margin: 0 auto; | ||
| 163 | |||
| 164 | .title { | ||
| 165 | font-family: "Arial Negreta", "Arial Normal", "Arial", sans-serif; | ||
| 166 | font-weight: 700; | ||
| 167 | font-size: 16px; | ||
| 168 | text-align: center; | ||
| 169 | background: #e9e9e9; | ||
| 170 | height: 62px; | ||
| 171 | line-height: 62px; | ||
| 172 | position: relative; | ||
| 173 | margin: 1px 0; | ||
| 174 | .checkbox { | ||
| 175 | position: absolute; | ||
| 176 | right: 20px; | ||
| 177 | bottom: -16px; | ||
| 178 | height: 62px; | ||
| 179 | } | ||
| 180 | } | ||
| 181 | |||
| 182 | .xxTable { | ||
| 183 | width: 810px; | ||
| 184 | border-spacing: 1px; | ||
| 185 | tr > th { | ||
| 186 | background: #464c5b; | ||
| 187 | color: #fff; | ||
| 188 | font-size: 16px; | ||
| 189 | } | ||
| 190 | tr > th:nth-child(1), | ||
| 191 | tr > th:nth-child(2) { | ||
| 192 | background: #464c5b; | ||
| 193 | } | ||
| 194 | tr > th:nth-child(3) { | ||
| 195 | background: rgba(70, 76, 91, 0.8); | ||
| 196 | } | ||
| 197 | .one th { | ||
| 198 | height: 25px; | ||
| 199 | font-size: 14px; | ||
| 200 | } | ||
| 201 | .one > th:nth-child(1) { | ||
| 202 | color: #fe9400; | ||
| 203 | } | ||
| 204 | .two th { | ||
| 205 | height: 45px; | ||
| 206 | |||
| 207 | p:nth-child(2) { | ||
| 208 | font-size: 14px; | ||
| 209 | } | ||
| 210 | } | ||
| 211 | .two > th:nth-child(1) { | ||
| 212 | color: #fe9400; | ||
| 213 | } | ||
| 214 | .linshiIcon { | ||
| 215 | position: relative; | ||
| 216 | } | ||
| 217 | .linshiIcon::after { | ||
| 218 | content: ""; | ||
| 219 | display: block; | ||
| 220 | width: 0; | ||
| 221 | height: 0; | ||
| 222 | border-width: 0px 0px 45px 45px; | ||
| 223 | border-style: none solid solid; | ||
| 224 | border-color: transparent transparent #fe9400; | ||
| 225 | position: absolute; | ||
| 226 | top: 0px; | ||
| 227 | right: 3px; | ||
| 228 | transform: rotate(-90deg); | ||
| 229 | } | ||
| 230 | .icon { | ||
| 231 | position: absolute; | ||
| 232 | top: 8px; | ||
| 233 | right: 6px; | ||
| 234 | transform: rotate(45deg); | ||
| 235 | color: #fff; | ||
| 236 | font-size: 12px; | ||
| 237 | z-index: 10; | ||
| 238 | } | ||
| 239 | |||
| 240 | tr td { | ||
| 241 | text-align: center; | ||
| 242 | height: 40px; | ||
| 243 | padding: 4px; | ||
| 244 | font-size: 13px; | ||
| 245 | } | ||
| 246 | > tr:nth-child(odd) td { | ||
| 247 | background: #f2f2f2; | ||
| 248 | } | ||
| 249 | > tr:nth-child(even) td { | ||
| 250 | background: #f9f9f9; | ||
| 251 | } | ||
| 252 | tr > td:nth-child(2) { | ||
| 253 | color: #fe9400; | ||
| 254 | } | ||
| 255 | tr > td:nth-child(4) { | ||
| 256 | color: #7f7f7f; | ||
| 257 | } | ||
| 258 | } | ||
| 259 | } | ||
| 260 | } | ||
| 261 | </style> |
| 1 | <template> | ||
| 2 | <div class="gyjsydsyq"> | ||
| 3 | <div class="tableBox"> | ||
| 4 | <div class="title"> | ||
| 5 | 建设用地使用权、宅基地使用权登记信息 | ||
| 6 | <div class="checkbox"> | ||
| 7 | <el-checkbox-group v-model="checkList"> | ||
| 8 | <el-checkbox label="临时"></el-checkbox> | ||
| 9 | <el-checkbox label="现势"></el-checkbox> | ||
| 10 | <el-checkbox label="历史"></el-checkbox> | ||
| 11 | </el-checkbox-group> | ||
| 12 | </div> | ||
| 13 | </div> | ||
| 14 | <table class="xxTable"> | ||
| 15 | <tr> | ||
| 16 | <th rowspan="3" width="140">业务类型</th> | ||
| 17 | </tr> | ||
| 18 | <tr class="one"> | ||
| 19 | <th class="linshiIcon"> | ||
| 20 | <div class="icon">临时</div> | ||
| 21 | 临时 | ||
| 22 | </th> | ||
| 23 | <th>现势</th> | ||
| 24 | <th>历史</th> | ||
| 25 | </tr> | ||
| 26 | <tr class="two"> | ||
| 27 | <th> | ||
| 28 | <p>建设用地使用权</p> | ||
| 29 | <p>首次登记</p> | ||
| 30 | </th> | ||
| 31 | <th> | ||
| 32 | <p>建设用地使用权</p> | ||
| 33 | <p>转移登记</p> | ||
| 34 | </th> | ||
| 35 | <th> | ||
| 36 | <p>建设用地使用权</p> | ||
| 37 | <p>转移登记</p> | ||
| 38 | </th> | ||
| 39 | </tr> | ||
| 40 | |||
| 41 | <tr v-for="(item, index) in columns" :key="index"> | ||
| 42 | <td> | ||
| 43 | {{ item.label }} | ||
| 44 | </td> | ||
| 45 | <td>{{ tableData.linshi[item.prop] }}</td> | ||
| 46 | <td>{{ tableData.xianshi[item.prop] }}</td> | ||
| 47 | <td>{{ tableData.lishi[item.prop] }}</td> | ||
| 48 | </tr> | ||
| 49 | </table> | ||
| 50 | </div> | ||
| 51 | </div> | ||
| 52 | </template> | ||
| 53 | |||
| 54 | <script> | ||
| 55 | export default { | ||
| 56 | name: "gyjsydsyq", | ||
| 57 | data() { | ||
| 58 | return { | ||
| 59 | checkList: ["临时", "现势", "历史"], | ||
| 60 | columns: [ | ||
| 61 | { | ||
| 62 | prop: "ssywh", | ||
| 63 | label: "上手业务号", | ||
| 64 | }, | ||
| 65 | { | ||
| 66 | prop: "dah", | ||
| 67 | label: "档案号", | ||
| 68 | }, | ||
| 69 | { | ||
| 70 | prop: "ywh", | ||
| 71 | label: "业务号", | ||
| 72 | }, | ||
| 73 | { | ||
| 74 | prop: "bdcdyh", | ||
| 75 | label: "不动产单元号", | ||
| 76 | }, | ||
| 77 | { | ||
| 78 | prop: "zl", | ||
| 79 | label: "坐落", | ||
| 80 | }, | ||
| 81 | { | ||
| 82 | prop: "qlrlx", | ||
| 83 | label: "权利人类型", | ||
| 84 | }, | ||
| 85 | { | ||
| 86 | prop: "qlr", | ||
| 87 | label: "权利人", | ||
| 88 | }, | ||
| 89 | { | ||
| 90 | prop: "zjzl", | ||
| 91 | label: "证件种类", | ||
| 92 | }, | ||
| 93 | { | ||
| 94 | prop: "zjh", | ||
| 95 | label: "证件号", | ||
| 96 | }, | ||
| 97 | { | ||
| 98 | prop: "gyqk", | ||
| 99 | label: "共有情况", | ||
| 100 | }, | ||
| 101 | { | ||
| 102 | prop: "syqmj", | ||
| 103 | label: "使用权面积(m²)", | ||
| 104 | }, | ||
| 105 | { | ||
| 106 | prop: "qlxz", | ||
| 107 | label: "权利性质", | ||
| 108 | }, | ||
| 109 | { | ||
| 110 | prop: "tdyt", | ||
| 111 | label: "土地用途", | ||
| 112 | }, | ||
| 113 | { | ||
| 114 | prop: "syqqssj", | ||
| 115 | label: "使用权起始时间", | ||
| 116 | }, | ||
| 117 | { | ||
| 118 | prop: "syqjssj", | ||
| 119 | label: "使用权结束时间", | ||
| 120 | }, | ||
| 121 | { | ||
| 122 | prop: "tdsyqx", | ||
| 123 | label: "土地使用期限", | ||
| 124 | }, | ||
| 125 | { | ||
| 126 | prop: "qdjg", | ||
| 127 | label: "取得价格(万元)", | ||
| 128 | }, | ||
| 129 | { | ||
| 130 | prop: "djyy", | ||
| 131 | label: "登记原因", | ||
| 132 | }, | ||
| 133 | { | ||
| 134 | prop: "bdcqzh", | ||
| 135 | label: "不动产权证号", | ||
| 136 | }, | ||
| 137 | { | ||
| 138 | prop: "djsj", | ||
| 139 | label: "登记时间", | ||
| 140 | }, | ||
| 141 | { | ||
| 142 | prop: "dbr", | ||
| 143 | label: "登簿人", | ||
| 144 | }, | ||
| 145 | { | ||
| 146 | prop: "fj", | ||
| 147 | label: "附记", | ||
| 148 | }, | ||
| 149 | ], | ||
| 150 | tableData: { | ||
| 151 | linshi: { | ||
| 152 | ssywh: "", | ||
| 153 | dah: "", | ||
| 154 | ywh: "200825012285", | ||
| 155 | bdcdyh: "370205004005GB10030 W00000000", | ||
| 156 | zl: "汉台区东大街街道办事处北大街居委会北大街东侧（莲花池公园西侧）", | ||
| 157 | qlrlx: "企业", | ||
| 158 | qlr: "联城有限公司", | ||
| 159 | zjzj: "组织机构代码证", | ||
| 160 | zjh: "*******", | ||
| 161 | gyqk: "单独所有", | ||
| 162 | syqmj: "22384.1700", | ||
| 163 | qlxz: "出让", | ||
| 164 | tdyt: "城镇住宅用地", | ||
| 165 | syqqssj: "2007年12月25日", | ||
| 166 | syqjssj: "2077年12月24日", | ||
| 167 | tdsyqx: "70年", | ||
| 168 | qdjg: "75793.75", | ||
| 169 | djyy: "出让取得", | ||
| 170 | bdcqzh: "陕2018汉台区不动产权第0003782号", | ||
| 171 | djsj: "2008年3月11日", | ||
| 172 | dbr: "路**", | ||
| 173 | fj: "2014年10月21日办理房屋首次登记", | ||
| 174 | }, | ||
| 175 | xianshi: { | ||
| 176 | ssywh: "", | ||
| 177 | dah: "", | ||
| 178 | ywh: "200825012285", | ||
| 179 | bdcdyh: "370205004005GB10030 W00000000", | ||
| 180 | zl: "汉台区东大街街道办事处北大街居委会北大街东侧（莲花池公园西侧）", | ||
| 181 | qlrlx: "企业", | ||
| 182 | qlr: "联城有限公司", | ||
| 183 | zjzj: "组织机构代码证", | ||
| 184 | zjh: "*******", | ||
| 185 | gyqk: "单独所有", | ||
| 186 | syqmj: "22384.1700", | ||
| 187 | qlxz: "出让", | ||
| 188 | tdyt: "城镇住宅用地", | ||
| 189 | syqqssj: "2007年12月25日", | ||
| 190 | syqjssj: "2077年12月24日", | ||
| 191 | tdsyqx: "70年", | ||
| 192 | qdjg: "75793.75", | ||
| 193 | djyy: "出让取得", | ||
| 194 | bdcqzh: "陕2018汉台区不动产权第0003782号", | ||
| 195 | djsj: "2008年3月11日", | ||
| 196 | dbr: "路**", | ||
| 197 | fj: "2014年10月21日办理房屋首次登记", | ||
| 198 | }, | ||
| 199 | lishi: { | ||
| 200 | ssywh: "", | ||
| 201 | dah: "", | ||
| 202 | ywh: "200825012285", | ||
| 203 | bdcdyh: "370205004005GB10030 W00000000", | ||
| 204 | zl: "汉台区东大街街道办事处北大街居委会北大街东侧（莲花池公园西侧）", | ||
| 205 | qlrlx: "企业", | ||
| 206 | qlr: "联城有限公司", | ||
| 207 | zjzj: "组织机构代码证", | ||
| 208 | zjh: "*******", | ||
| 209 | gyqk: "单独所有", | ||
| 210 | syqmj: "22384.1700", | ||
| 211 | qlxz: "出让", | ||
| 212 | tdyt: "城镇住宅用地", | ||
| 213 | syqqssj: "2007年12月25日", | ||
| 214 | syqjssj: "2077年12月24日", | ||
| 215 | tdsyqx: "70年", | ||
| 216 | qdjg: "75793.75", | ||
| 217 | djyy: "出让取得", | ||
| 218 | bdcqzh: "陕2018汉台区不动产权第0003782号", | ||
| 219 | djsj: "2008年3月11日", | ||
| 220 | dbr: "路**", | ||
| 221 | fj: "2014年10月21日办理房屋首次登记", | ||
| 222 | }, | ||
| 223 | }, | ||
| 224 | }; | ||
| 225 | }, | ||
| 226 | }; | ||
| 227 | </script> | ||
| 228 | |||
| 229 | <style lang="scss" scoped> | ||
| 230 | .gyjsydsyq { | ||
| 231 | width: 100%; | ||
| 232 | height: 100%; | ||
| 233 | background: #fff; | ||
| 234 | overflow-y: scroll; | ||
| 235 | color: #333; | ||
| 236 | |||
| 237 | .tableBox { | ||
| 238 | width: 810px; | ||
| 239 | margin: 0 auto; | ||
| 240 | |||
| 241 | .title { | ||
| 242 | font-family: "Arial Negreta", "Arial Normal", "Arial", sans-serif; | ||
| 243 | font-weight: 700; | ||
| 244 | font-size: 16px; | ||
| 245 | text-align: center; | ||
| 246 | background: #e9e9e9; | ||
| 247 | height: 62px; | ||
| 248 | line-height: 62px; | ||
| 249 | position: relative; | ||
| 250 | margin: 1px 0; | ||
| 251 | .checkbox { | ||
| 252 | position: absolute; | ||
| 253 | right: 20px; | ||
| 254 | bottom: -16px; | ||
| 255 | height: 62px; | ||
| 256 | } | ||
| 257 | } | ||
| 258 | |||
| 259 | .xxTable { | ||
| 260 | width: 810px; | ||
| 261 | border-spacing: 1px; | ||
| 262 | tr > th { | ||
| 263 | background: #464c5b; | ||
| 264 | color: #fff; | ||
| 265 | font-size: 16px; | ||
| 266 | } | ||
| 267 | tr > th:nth-child(1), | ||
| 268 | tr > th:nth-child(2) { | ||
| 269 | background: #464c5b; | ||
| 270 | } | ||
| 271 | tr > th:nth-child(3) { | ||
| 272 | background: rgba(70, 76, 91, 0.8); | ||
| 273 | } | ||
| 274 | .one th { | ||
| 275 | height: 25px; | ||
| 276 | font-size: 14px; | ||
| 277 | } | ||
| 278 | .one > th:nth-child(1) { | ||
| 279 | color: #fe9400; | ||
| 280 | } | ||
| 281 | .two th { | ||
| 282 | height: 45px; | ||
| 283 | |||
| 284 | p:nth-child(2) { | ||
| 285 | font-size: 14px; | ||
| 286 | } | ||
| 287 | } | ||
| 288 | .two > th:nth-child(1) { | ||
| 289 | color: #fe9400; | ||
| 290 | } | ||
| 291 | .linshiIcon { | ||
| 292 | position: relative; | ||
| 293 | } | ||
| 294 | .linshiIcon::after { | ||
| 295 | content: ""; | ||
| 296 | display: block; | ||
| 297 | width: 0; | ||
| 298 | height: 0; | ||
| 299 | border-width: 0px 0px 45px 45px; | ||
| 300 | border-style: none solid solid; | ||
| 301 | border-color: transparent transparent #fe9400; | ||
| 302 | position: absolute; | ||
| 303 | top: 0px; | ||
| 304 | right: 3px; | ||
| 305 | transform: rotate(-90deg); | ||
| 306 | } | ||
| 307 | .icon { | ||
| 308 | position: absolute; | ||
| 309 | top: 8px; | ||
| 310 | right: 6px; | ||
| 311 | transform: rotate(45deg); | ||
| 312 | color: #fff; | ||
| 313 | font-size: 12px; | ||
| 314 | z-index: 10; | ||
| 315 | } | ||
| 316 | |||
| 317 | tr td { | ||
| 318 | text-align: center; | ||
| 319 | height: 40px; | ||
| 320 | padding: 4px; | ||
| 321 | font-size: 13px; | ||
| 322 | } | ||
| 323 | > tr:nth-child(odd) td { | ||
| 324 | background: #f2f2f2; | ||
| 325 | } | ||
| 326 | > tr:nth-child(even) td { | ||
| 327 | background: #f9f9f9; | ||
| 328 | } | ||
| 329 | tr > td:nth-child(2) { | ||
| 330 | color: #fe9400; | ||
| 331 | } | ||
| 332 | tr > td:nth-child(4) { | ||
| 333 | color: #7f7f7f; | ||
| 334 | } | ||
| 335 | } | ||
| 336 | } | ||
| 337 | } | ||
| 338 | </style> |
| 1 | <template> | ||
| 2 | <div class="ygdj"> | ||
| 3 | <div class="tableBox"> | ||
| 4 | <div class="title"> | ||
| 5 | 预告登记信息 | ||
| 6 | <div class="checkbox"> | ||
| 7 | <el-checkbox-group v-model="checkList"> | ||
| 8 | <el-checkbox label="临时"></el-checkbox> | ||
| 9 | <el-checkbox label="现势"></el-checkbox> | ||
| 10 | <el-checkbox label="历史"></el-checkbox> | ||
| 11 | </el-checkbox-group> | ||
| 12 | </div> | ||
| 13 | </div> | ||
| 14 | <table class="xxTable"> | ||
| 15 | <tr> | ||
| 16 | <th rowspan="3" width="140">业务类型</th> | ||
| 17 | </tr> | ||
| 18 | <tr class="one"> | ||
| 19 | <th class="linshiIcon"> | ||
| 20 | <div class="icon">临时</div> | ||
| 21 | 临时 | ||
| 22 | </th> | ||
| 23 | <th>现势</th> | ||
| 24 | <th>历史</th> | ||
| 25 | </tr> | ||
| 26 | <tr class="two"> | ||
| 27 | <th> | ||
| 28 | <p>预售商品房买卖预告登记</p> | ||
| 29 | <p>首次登记</p> | ||
| 30 | </th> | ||
| 31 | <th> | ||
| 32 | <p>预售商品房抵押权预告登记</p> | ||
| 33 | <p>转移登记</p> | ||
| 34 | </th> | ||
| 35 | <th> | ||
| 36 | <p>预售商品房买卖预告登记</p> | ||
| 37 | <p>变更登记</p> | ||
| 38 | </th> | ||
| 39 | </tr> | ||
| 40 | |||
| 41 | <tr v-for="(item, index) in columns" :key="index"> | ||
| 42 | <td> | ||
| 43 | {{ item.label }} | ||
| 44 | </td> | ||
| 45 | <td>{{ tableData.linshi[item.prop] }}</td> | ||
| 46 | <td>{{ tableData.xianshi[item.prop] }}</td> | ||
| 47 | <td>{{ tableData.lishi[item.prop] }}</td> | ||
| 48 | </tr> | ||
| 49 | </table> | ||
| 50 | </div> | ||
| 51 | </div> | ||
| 52 | </template> | ||
| 53 | |||
| 54 | <script> | ||
| 55 | export default { | ||
| 56 | name: "ygdj", | ||
| 57 | data() { | ||
| 58 | return { | ||
| 59 | checkList: ["临时", "现势", "历史"], | ||
| 60 | columns: [ | ||
| 61 | { | ||
| 62 | prop: "ssywh", | ||
| 63 | label: "上手业务号", | ||
| 64 | }, | ||
| 65 | { | ||
| 66 | prop: "dah", | ||
| 67 | label: "档案号", | ||
| 68 | }, | ||
| 69 | { | ||
| 70 | prop: "ywh", | ||
| 71 | label: "业务号", | ||
| 72 | }, | ||
| 73 | { | ||
| 74 | prop: "bdcdyh", | ||
| 75 | label: "不动产单元号", | ||
| 76 | }, | ||
| 77 | { | ||
| 78 | prop: "zl", | ||
| 79 | label: "坐落", | ||
| 80 | }, | ||
| 81 | { | ||
| 82 | prop: "qlr", | ||
| 83 | label: "权利人", | ||
| 84 | }, | ||
| 85 | { | ||
| 86 | prop: "qlrzjzl", | ||
| 87 | label: "证件种类", | ||
| 88 | }, | ||
| 89 | { | ||
| 90 | prop: "qlrzjh", | ||
| 91 | label: "证件号", | ||
| 92 | }, | ||
| 93 | { | ||
| 94 | prop: "ywr", | ||
| 95 | label: "义务人", | ||
| 96 | }, | ||
| 97 | { | ||
| 98 | prop: "ywrzjzl", | ||
| 99 | label: "证件种类", | ||
| 100 | }, | ||
| 101 | { | ||
| 102 | prop: "ywrzjh", | ||
| 103 | label: "证件号", | ||
| 104 | }, | ||
| 105 | { | ||
| 106 | prop: "fwxz", | ||
| 107 | label: "房屋性质", | ||
| 108 | }, | ||
| 109 | { | ||
| 110 | prop: "ghyt", | ||
| 111 | label: "规划用途", | ||
| 112 | }, | ||
| 113 | { | ||
| 114 | prop: "fwzcs", | ||
| 115 | label: "房屋总层数", | ||
| 116 | }, | ||
| 117 | { | ||
| 118 | prop: "fwszc", | ||
| 119 | label: "房屋所在层", | ||
| 120 | }, | ||
| 121 | { | ||
| 122 | prop: "jzmj", | ||
| 123 | label: "建筑面积", | ||
| 124 | }, | ||
| 125 | { | ||
| 126 | prop: "djyy", | ||
| 127 | label: "登记原因", | ||
| 128 | }, | ||
| 129 | { | ||
| 130 | prop: "bdbzzqse", | ||
| 131 | label: "取得价格/被担保主债权数额", | ||
| 132 | }, | ||
| 133 | { | ||
| 134 | prop: "jedw", | ||
| 135 | label: "金额单位", | ||
| 136 | }, | ||
| 137 | { | ||
| 138 | prop: "dbfw", | ||
| 139 | label: "担保范围", | ||
| 140 | }, | ||
| 141 | { | ||
| 142 | prop: "sfczyd", | ||
| 143 | label: "是否存在禁止或限制转让抵押不动产的约定", | ||
| 144 | }, | ||
| 145 | { | ||
| 146 | prop: "djsj", | ||
| 147 | label: "登记时间", | ||
| 148 | }, | ||
| 149 | { | ||
| 150 | prop: "bdcdjzmh", | ||
| 151 | label: "不动产登记证明号", | ||
| 152 | }, | ||
| 153 | { | ||
| 154 | prop: "dbr", | ||
| 155 | label: "登簿人", | ||
| 156 | }, | ||
| 157 | { | ||
| 158 | prop: "zxygywh", | ||
| 159 | label: "注销预告业务号", | ||
| 160 | }, | ||
| 161 | { | ||
| 162 | prop: "zxygyy", | ||
| 163 | label: "注销预告原因", | ||
| 164 | }, | ||
| 165 | { | ||
| 166 | prop: "zxsj", | ||
| 167 | label: "注销时间", | ||
| 168 | }, | ||
| 169 | { | ||
| 170 | prop: "qszt", | ||
| 171 | label: "权属状态", | ||
| 172 | }, | ||
| 173 | ], | ||
| 174 | tableData: { | ||
| 175 | linshi: { | ||
| 176 | ssywh: "", | ||
| 177 | dah: "", | ||
| 178 | ywh: "200825012285", | ||
| 179 | bdcdyh: "370205004005GB10030 F00160111", | ||
| 180 | zl: "汉台区东大街街道办事处北大街居委会北大街东侧（莲花池公园西侧）", | ||
| 181 | qlr: "企业", | ||
| 182 | qlrzjzj: "组织机构代码证", | ||
| 183 | qlrzjh: "*******", | ||
| 184 | ywr: "企业", | ||
| 185 | ywrzjzl: "组织机构代码证", | ||
| 186 | ywrzjh: "*******", | ||
| 187 | tdsyqr: "绿地开发有限公司", | ||
| 188 | fwxz: "商品房", | ||
| 189 | ghyt: "住宅", | ||
| 190 | fwzcs: "10", | ||
| 191 | fwszc: "6", | ||
| 192 | jzmj: "111.5", | ||
| 193 | djyy: "", | ||
| 194 | bdbzzqse: "80.000", | ||
| 195 | jedw: "万元", | ||
| 196 | dbfw: "****", | ||
| 197 | sfczyd: "", | ||
| 198 | djsj: "2008年3月11日", | ||
| 199 | bdcdjzmh: "A（2011）B市不动产证明第0000060号", | ||
| 200 | dbr: "路**", | ||
| 201 | zxygywh: "", | ||
| 202 | zxygyy: "", | ||
| 203 | zxsj: "", | ||
| 204 | qszt: "", | ||
| 205 | }, | ||
| 206 | xianshi: { | ||
| 207 | ssywh: "", | ||
| 208 | dah: "", | ||
| 209 | ywh: "200825012285", | ||
| 210 | bdcdyh: "370205004005GB10030 F00160111", | ||
| 211 | zl: "汉台区东大街街道办事处北大街居委会北大街东侧（莲花池公园西侧）", | ||
| 212 | qlr: "企业", | ||
| 213 | qlrzjzj: "组织机构代码证", | ||
| 214 | qlrzjh: "*******", | ||
| 215 | ywr: "企业", | ||
| 216 | ywrzjzl: "组织机构代码证", | ||
| 217 | ywrzjh: "*******", | ||
| 218 | tdsyqr: "绿地开发有限公司", | ||
| 219 | fwxz: "商品房", | ||
| 220 | ghyt: "住宅", | ||
| 221 | fwzcs: "10", | ||
| 222 | fwszc: "6", | ||
| 223 | jzmj: "111.5", | ||
| 224 | djyy: "", | ||
| 225 | bdbzzqse: "60.000", | ||
| 226 | jedw: "", | ||
| 227 | dbfw: "", | ||
| 228 | sfczyd: "是", | ||
| 229 | djsj: "2008年3月11日", | ||
| 230 | bdcdjzmh: "A（2011）B市不动产证明第0000060号", | ||
| 231 | dbr: "路**", | ||
| 232 | zxygywh: "", | ||
| 233 | zxygyy: "", | ||
| 234 | zxsj: "", | ||
| 235 | qszt: "", | ||
| 236 | }, | ||
| 237 | lishi: { | ||
| 238 | ssywh: "", | ||
| 239 | dah: "", | ||
| 240 | ywh: "200825012285", | ||
| 241 | bdcdyh: "370205004005GB10030 F00160111", | ||
| 242 | zl: "汉台区东大街街道办事处北大街居委会北大街东侧（莲花池公园西侧）", | ||
| 243 | qlr: "企业", | ||
| 244 | qlrzjzj: "组织机构代码证", | ||
| 245 | qlrzjh: "*******", | ||
| 246 | ywr: "企业", | ||
| 247 | ywrzjzl: "组织机构代码证", | ||
| 248 | ywrzjh: "*******", | ||
| 249 | tdsyqr: "绿地开发有限公司", | ||
| 250 | fwxz: "商品房", | ||
| 251 | ghyt: "住宅", | ||
| 252 | fwzcs: "10", | ||
| 253 | fwszc: "6", | ||
| 254 | jzmj: "111.5", | ||
| 255 | djyy: "", | ||
| 256 | bdbzzqse: "", | ||
| 257 | jedw: "", | ||
| 258 | dbfw: "", | ||
| 259 | sfczyd: "", | ||
| 260 | djsj: "2008年3月11日", | ||
| 261 | bdcdjzmh: "A（2011）B市不动产证明第0000060号", | ||
| 262 | dbr: "路**", | ||
| 263 | zxygywh: "200825012286", | ||
| 264 | zxygyy: "个人原因", | ||
| 265 | zxsj: "2008年3月11日", | ||
| 266 | qszt: "", | ||
| 267 | }, | ||
| 268 | }, | ||
| 269 | }; | ||
| 270 | }, | ||
| 271 | }; | ||
| 272 | </script> | ||
| 273 | |||
| 274 | <style lang="scss" scoped> | ||
| 275 | .ygdj { | ||
| 276 | width: 100%; | ||
| 277 | height: 100%; | ||
| 278 | background: #fff; | ||
| 279 | overflow-y: scroll; | ||
| 280 | color: #333; | ||
| 281 | |||
| 282 | .tableBox { | ||
| 283 | width: 810px; | ||
| 284 | margin: 0 auto; | ||
| 285 | |||
| 286 | .title { | ||
| 287 | font-family: "Arial Negreta", "Arial Normal", "Arial", sans-serif; | ||
| 288 | font-weight: 700; | ||
| 289 | font-size: 16px; | ||
| 290 | text-align: center; | ||
| 291 | background: #e9e9e9; | ||
| 292 | height: 62px; | ||
| 293 | line-height: 62px; | ||
| 294 | position: relative; | ||
| 295 | margin: 1px 0; | ||
| 296 | .checkbox { | ||
| 297 | position: absolute; | ||
| 298 | right: 20px; | ||
| 299 | bottom: -16px; | ||
| 300 | height: 62px; | ||
| 301 | } | ||
| 302 | } | ||
| 303 | |||
| 304 | .xxTable { | ||
| 305 | width: 810px; | ||
| 306 | border-spacing: 1px; | ||
| 307 | tr > th { | ||
| 308 | background: #464c5b; | ||
| 309 | color: #fff; | ||
| 310 | font-size: 16px; | ||
| 311 | } | ||
| 312 | tr > th:nth-child(1), | ||
| 313 | tr > th:nth-child(2) { | ||
| 314 | background: #464c5b; | ||
| 315 | } | ||
| 316 | tr > th:nth-child(3) { | ||
| 317 | background: rgba(70, 76, 91, 0.8); | ||
| 318 | } | ||
| 319 | .one th { | ||
| 320 | height: 25px; | ||
| 321 | font-size: 14px; | ||
| 322 | } | ||
| 323 | .one > th:nth-child(1) { | ||
| 324 | color: #fe9400; | ||
| 325 | } | ||
| 326 | .two th { | ||
| 327 | height: 45px; | ||
| 328 | |||
| 329 | p:nth-child(2) { | ||
| 330 | font-size: 14px; | ||
| 331 | } | ||
| 332 | } | ||
| 333 | .two > th:nth-child(1) { | ||
| 334 | color: #fe9400; | ||
| 335 | } | ||
| 336 | .linshiIcon { | ||
| 337 | position: relative; | ||
| 338 | } | ||
| 339 | .linshiIcon::after { | ||
| 340 | content: ""; | ||
| 341 | display: block; | ||
| 342 | width: 0; | ||
| 343 | height: 0; | ||
| 344 | border-width: 0px 0px 45px 45px; | ||
| 345 | border-style: none solid solid; | ||
| 346 | border-color: transparent transparent #fe9400; | ||
| 347 | position: absolute; | ||
| 348 | top: 0px; | ||
| 349 | right: 3px; | ||
| 350 | transform: rotate(-90deg); | ||
| 351 | } | ||
| 352 | .icon { | ||
| 353 | position: absolute; | ||
| 354 | top: 8px; | ||
| 355 | right: 6px; | ||
| 356 | transform: rotate(45deg); | ||
| 357 | color: #fff; | ||
| 358 | font-size: 12px; | ||
| 359 | z-index: 10; | ||
| 360 | } | ||
| 361 | |||
| 362 | tr td { | ||
| 363 | text-align: center; | ||
| 364 | height: 40px; | ||
| 365 | padding: 4px; | ||
| 366 | font-size: 13px; | ||
| 367 | } | ||
| 368 | > tr:nth-child(odd) td { | ||
| 369 | background: #f2f2f2; | ||
| 370 | } | ||
| 371 | > tr:nth-child(even) td { | ||
| 372 | background: #f9f9f9; | ||
| 373 | } | ||
| 374 | tr > td:nth-child(2) { | ||
| 375 | color: #fe9400; | ||
| 376 | } | ||
| 377 | tr > td:nth-child(4) { | ||
| 378 | color: #7f7f7f; | ||
| 379 | } | ||
| 380 | } | ||
| 381 | } | ||
| 382 | } | ||
| 383 | </style> |
| 1 | <template> | ||
| 2 | <div class="yydj"> | ||
| 3 | <div class="tableBox"> | ||
| 4 | <div class="title"> | ||
| 5 | 异议登记信息 | ||
| 6 | <div class="checkbox"> | ||
| 7 | <el-checkbox-group v-model="checkList"> | ||
| 8 | <el-checkbox label="临时"></el-checkbox> | ||
| 9 | <el-checkbox label="现势"></el-checkbox> | ||
| 10 | <el-checkbox label="历史"></el-checkbox> | ||
| 11 | </el-checkbox-group> | ||
| 12 | </div> | ||
| 13 | </div> | ||
| 14 | <table class="xxTable"> | ||
| 15 | <tr> | ||
| 16 | <th rowspan="3" width="140">业务类型</th> | ||
| 17 | </tr> | ||
| 18 | <tr class="one"> | ||
| 19 | <th class="linshiIcon"> | ||
| 20 | <div class="icon">临时</div> | ||
| 21 | 临时 | ||
| 22 | </th> | ||
| 23 | <th>现势</th> | ||
| 24 | <th>历史</th> | ||
| 25 | </tr> | ||
| 26 | <tr class="two"> | ||
| 27 | <th>异议登记</th> | ||
| 28 | <th>异议登记</th> | ||
| 29 | <th>异议登记</th> | ||
| 30 | </tr> | ||
| 31 | |||
| 32 | <tr v-for="(item, index) in columns" :key="index"> | ||
| 33 | <td> | ||
| 34 | {{ item.label }} | ||
| 35 | </td> | ||
| 36 | <td>{{ tableData.linshi[item.prop] }}</td> | ||
| 37 | <td>{{ tableData.xianshi[item.prop] }}</td> | ||
| 38 | <td>{{ tableData.lishi[item.prop] }}</td> | ||
| 39 | </tr> | ||
| 40 | </table> | ||
| 41 | </div> | ||
| 42 | </div> | ||
| 43 | </template> | ||
| 44 | |||
| 45 | <script> | ||
| 46 | export default { | ||
| 47 | name: "yydj", | ||
| 48 | data() { | ||
| 49 | return { | ||
| 50 | checkList: ["临时", "现势", "历史"], | ||
| 51 | columns: [ | ||
| 52 | { | ||
| 53 | prop: "ssywh", | ||
| 54 | label: "上手业务号", | ||
| 55 | }, | ||
| 56 | { | ||
| 57 | prop: "dah", | ||
| 58 | label: "档案号", | ||
| 59 | }, | ||
| 60 | { | ||
| 61 | prop: "ywh", | ||
| 62 | label: "业务号", | ||
| 63 | }, | ||
| 64 | { | ||
| 65 | prop: "bdcdyh", | ||
| 66 | label: "不动产单元号", | ||
| 67 | }, | ||
| 68 | { | ||
| 69 | prop: "zl", | ||
| 70 | label: "坐落", | ||
| 71 | }, | ||
| 72 | { | ||
| 73 | prop: "yyr", | ||
| 74 | label: "异议人", | ||
| 75 | }, | ||
| 76 | { | ||
| 77 | prop: "zjzl", | ||
| 78 | label: "证件种类", | ||
| 79 | }, | ||
| 80 | { | ||
| 81 | prop: "zjh", | ||
| 82 | label: "证件号", | ||
| 83 | }, | ||
| 84 | { | ||
| 85 | prop: "yysx", | ||
| 86 | label: "异议事项", | ||
| 87 | }, | ||
| 88 | { | ||
| 89 | prop: "bdcdjzmh", | ||
| 90 | label: "不动产登记证明号", | ||
| 91 | }, | ||
| 92 | { | ||
| 93 | prop: "djjg", | ||
| 94 | label: "登记机构", | ||
| 95 | }, | ||
| 96 | { | ||
| 97 | prop: "dbr", | ||
| 98 | label: "登簿人", | ||
| 99 | }, | ||
| 100 | { | ||
| 101 | prop: "djsj", | ||
| 102 | label: "登记时间", | ||
| 103 | }, | ||
| 104 | { | ||
| 105 | prop: "zxyyywh", | ||
| 106 | label: "注销异议业务号", | ||
| 107 | }, | ||
| 108 | { | ||
| 109 | prop: "zxyyyy", | ||
| 110 | label: "注销异议原因", | ||
| 111 | }, | ||
| 112 | { | ||
| 113 | prop: "zxyydbr", | ||
| 114 | label: "注销异议登簿人", | ||
| 115 | }, | ||
| 116 | { | ||
| 117 | prop: "zxyydjsj", | ||
| 118 | label: "注销异议登记时间", | ||
| 119 | }, | ||
| 120 | ], | ||
| 121 | tableData: { | ||
| 122 | linshi: { | ||
| 123 | ssywh: "", | ||
| 124 | dah: "", | ||
| 125 | ywh: "200825012285", | ||
| 126 | bdcdyh: "370205004005GB10030 F00160111", | ||
| 127 | zl: "汉台区东大街街道办事处北大街居委会北大街东侧（莲花池公园西侧）", | ||
| 128 | yyr: "李四", | ||
| 129 | zjzj: "身份证号", | ||
| 130 | zjh: "*******", | ||
| 131 | yysx: "", | ||
| 132 | djjg: "", | ||
| 133 | bdcdjzmh: "200825012286", | ||
| 134 | dbr: "", | ||
| 135 | djsj: "2008年3月11日", | ||
| 136 | zxyyywh: "", | ||
| 137 | zxyyyy: "", | ||
| 138 | zxyydbr: "", | ||
| 139 | zxyydjsj: "", | ||
| 140 | }, | ||
| 141 | xianshi: { | ||
| 142 | ssywh: "", | ||
| 143 | dah: "", | ||
| 144 | ywh: "200825012285", | ||
| 145 | bdcdyh: "370205004005GB10030 F00160111", | ||
| 146 | zl: "汉台区东大街街道办事处北大街居委会北大街东侧（莲花池公园西侧）", | ||
| 147 | yyr: "李四", | ||
| 148 | zjzj: "身份证号", | ||
| 149 | zjh: "*******", | ||
| 150 | yysx: "", | ||
| 151 | djjg: "", | ||
| 152 | bdcdjzmh: "200825012286", | ||
| 153 | dbr: "", | ||
| 154 | djsj: "2008年3月11日", | ||
| 155 | zxyyywh: "200825012286", | ||
| 156 | zxyyyy: "时间到期", | ||
| 157 | zxyydbr: "李四", | ||
| 158 | zxyydjsj: "2008年3月11日", | ||
| 159 | }, | ||
| 160 | lishi: { | ||
| 161 | ssywh: "", | ||
| 162 | dah: "", | ||
| 163 | ywh: "200825012285", | ||
| 164 | bdcdyh: "370205004005GB10030 F00160111", | ||
| 165 | zl: "汉台区东大街街道办事处北大街居委会北大街东侧（莲花池公园西侧）", | ||
| 166 | yyr: "李四", | ||
| 167 | zjzj: "身份证号", | ||
| 168 | zjh: "*******", | ||
| 169 | yysx: "", | ||
| 170 | djjg: "", | ||
| 171 | bdcdjzmh: "200825012286", | ||
| 172 | dbr: "", | ||
| 173 | djsj: "2008年3月11日", | ||
| 174 | zxyyywh: "200825012286", | ||
| 175 | zxyyyy: "时间到期", | ||
| 176 | zxyydbr: "李四", | ||
| 177 | zxyydjsj: "2008年3月11日", | ||
| 178 | }, | ||
| 179 | }, | ||
| 180 | }; | ||
| 181 | }, | ||
| 182 | }; | ||
| 183 | </script> | ||
| 184 | |||
| 185 | <style lang="scss" scoped> | ||
| 186 | .yydj { | ||
| 187 | width: 100%; | ||
| 188 | height: 100%; | ||
| 189 | background: #fff; | ||
| 190 | overflow-y: scroll; | ||
| 191 | color: #333; | ||
| 192 | |||
| 193 | .tableBox { | ||
| 194 | width: 810px; | ||
| 195 | margin: 0 auto; | ||
| 196 | |||
| 197 | .title { | ||
| 198 | font-family: "Arial Negreta", "Arial Normal", "Arial", sans-serif; | ||
| 199 | font-weight: 700; | ||
| 200 | font-size: 16px; | ||
| 201 | text-align: center; | ||
| 202 | background: #e9e9e9; | ||
| 203 | height: 62px; | ||
| 204 | line-height: 62px; | ||
| 205 | position: relative; | ||
| 206 | margin: 1px 0; | ||
| 207 | .checkbox { | ||
| 208 | position: absolute; | ||
| 209 | right: 20px; | ||
| 210 | bottom: -16px; | ||
| 211 | height: 62px; | ||
| 212 | } | ||
| 213 | } | ||
| 214 | |||
| 215 | .xxTable { | ||
| 216 | width: 810px; | ||
| 217 | border-spacing: 1px; | ||
| 218 | tr > th { | ||
| 219 | background: #464c5b; | ||
| 220 | color: #fff; | ||
| 221 | font-size: 16px; | ||
| 222 | } | ||
| 223 | tr > th:nth-child(1), | ||
| 224 | tr > th:nth-child(2) { | ||
| 225 | background: #464c5b; | ||
| 226 | } | ||
| 227 | tr > th:nth-child(3) { | ||
| 228 | background: rgba(70, 76, 91, 0.8); | ||
| 229 | } | ||
| 230 | .one th { | ||
| 231 | height: 25px; | ||
| 232 | font-size: 14px; | ||
| 233 | } | ||
| 234 | .one > th:nth-child(1) { | ||
| 235 | color: #fe9400; | ||
| 236 | } | ||
| 237 | .two th { | ||
| 238 | height: 45px; | ||
| 239 | |||
| 240 | p:nth-child(2) { | ||
| 241 | font-size: 14px; | ||
| 242 | } | ||
| 243 | } | ||
| 244 | .two > th:nth-child(1) { | ||
| 245 | color: #fe9400; | ||
| 246 | } | ||
| 247 | .linshiIcon { | ||
| 248 | position: relative; | ||
| 249 | } | ||
| 250 | .linshiIcon::after { | ||
| 251 | content: ""; | ||
| 252 | display: block; | ||
| 253 | width: 0; | ||
| 254 | height: 0; | ||
| 255 | border-width: 0px 0px 45px 45px; | ||
| 256 | border-style: none solid solid; | ||
| 257 | border-color: transparent transparent #fe9400; | ||
| 258 | position: absolute; | ||
| 259 | top: 0px; | ||
| 260 | right: 3px; | ||
| 261 | transform: rotate(-90deg); | ||
| 262 | } | ||
| 263 | .icon { | ||
| 264 | position: absolute; | ||
| 265 | top: 8px; | ||
| 266 | right: 6px; | ||
| 267 | transform: rotate(45deg); | ||
| 268 | color: #fff; | ||
| 269 | font-size: 12px; | ||
| 270 | z-index: 10; | ||
| 271 | } | ||
| 272 | |||
| 273 | tr td { | ||
| 274 | text-align: center; | ||
| 275 | height: 40px; | ||
| 276 | padding: 4px; | ||
| 277 | font-size: 13px; | ||
| 278 | } | ||
| 279 | > tr:nth-child(odd) td { | ||
| 280 | background: #f2f2f2; | ||
| 281 | } | ||
| 282 | > tr:nth-child(even) td { | ||
| 283 | background: #f9f9f9; | ||
| 284 | } | ||
| 285 | tr > td:nth-child(2) { | ||
| 286 | color: #fe9400; | ||
| 287 | } | ||
| 288 | tr > td:nth-child(4) { | ||
| 289 | color: #7f7f7f; | ||
| 290 | } | ||
| 291 | } | ||
| 292 | } | ||
| 293 | } | ||
| 294 | </style> |
| ... | @@ -92,7 +92,7 @@ import { | ... | @@ -92,7 +92,7 @@ import { |
| 92 | getDjml, | 92 | getDjml, |
| 93 | getZdjbxx, | 93 | getZdjbxx, |
| 94 | getQlname, | 94 | getQlname, |
| 95 | getDetail | 95 | getDetail, |
| 96 | } from "@/api/zhcx.js"; | 96 | } from "@/api/zhcx.js"; |
| 97 | import { mapGetters } from "vuex"; | 97 | import { mapGetters } from "vuex"; |
| 98 | import axios from "axios"; | 98 | import axios from "axios"; |
| ... | @@ -157,22 +157,27 @@ export default { | ... | @@ -157,22 +157,27 @@ export default { |
| 157 | openDialog(scope) { | 157 | openDialog(scope) { |
| 158 | let _this = this; | 158 | let _this = this; |
| 159 | let bsm = scope.row.bsmQlxx; | 159 | let bsm = scope.row.bsmQlxx; |
| 160 | bsm="b1394eedd8387347684d358da80da62c" | ||
| 161 | this.bsm = bsm; | ||
| 162 | axios | 160 | axios |
| 163 | // .all([getDjbfm(bsm), getDjml(bsm), getZdjbxx(bsm), getQlname(bsm), getDetail(bsm)]) | 161 | .all([ |
| 162 | getDjbfm(bsm), | ||
| 163 | getDjml(bsm), | ||
| 164 | getZdjbxx(bsm), | ||
| 165 | getQlname(bsm), | ||
| 166 | getDetail(bsm), | ||
| 167 | ]) | ||
| 164 | .all([getDjbfm(bsm), getDjml(bsm), getZdjbxx(bsm), getQlname(bsm)]) | 168 | .all([getDjbfm(bsm), getDjml(bsm), getZdjbxx(bsm), getQlname(bsm)]) |
| 165 | .then(([djbfm, djml, zdjbxx, qlname]) => { | 169 | .then(([djbfm, djml, zdjbxx, qlname]) => { |
| 166 | let obj = { | 170 | let obj = { |
| 167 | djbfm:djbfm.result,// | 171 | djbfm: djbfm.result, |
| 168 | djml:djml.result,// | 172 | djml: djml.result, |
| 169 | zdjbxx:zdjbxx.result, | 173 | zdjbxx: zdjbxx.result, |
| 170 | qlname:qlname.result// | 174 | qlname: qlname.result, |
| 171 | } | 175 | detail: detail.result, |
| 172 | this.$store.dispatch('djbxx/setDjbxx', obj) | 176 | }; |
| 177 | this.$store.dispatch("djbxx/setDjbxx", obj); | ||
| 173 | _this.isDialog = true; | 178 | _this.isDialog = true; |
| 174 | 179 | ||
| 175 | // if (scope.row.qllx == "预告买卖登记") { | 180 | // if (scope.row.qllxmc == "预告买卖登记") { |
| 176 | // this.$refs.djbxxDialog.showTab = "ygdj"; | 181 | // this.$refs.djbxxDialog.showTab = "ygdj"; |
| 177 | // } else if (scope.row.qllx == "查封登记") { | 182 | // } else if (scope.row.qllx == "查封登记") { |
| 178 | // this.$refs.djbxxDialog.showTab = "cfdj"; | 183 | // this.$refs.djbxxDialog.showTab = "cfdj"; | ... | ... |
| ... | @@ -8,7 +8,7 @@ class data extends filter { | ... | @@ -8,7 +8,7 @@ class data extends filter { |
| 8 | constructor() { | 8 | constructor() { |
| 9 | super() | 9 | super() |
| 10 | } | 10 | } |
| 11 | columns () { | 11 | columns() { |
| 12 | return [ | 12 | return [ |
| 13 | { | 13 | { |
| 14 | label: '序号', | 14 | label: '序号', |
| ... | @@ -26,15 +26,15 @@ class data extends filter { | ... | @@ -26,15 +26,15 @@ class data extends filter { |
| 26 | label: "权属状态", | 26 | label: "权属状态", |
| 27 | render: (h, scope) => { | 27 | render: (h, scope) => { |
| 28 | let text = ''; | 28 | let text = ''; |
| 29 | let color="" | 29 | let color = "" |
| 30 | let obj = { | 30 | let obj = { |
| 31 | "1": { | 31 | "1": { |
| 32 | text:'现势', | 32 | text: '现势', |
| 33 | color:'#4BD863' | 33 | color: '#4BD863' |
| 34 | }, | 34 | }, |
| 35 | "2": { | 35 | "2": { |
| 36 | text:'历史', | 36 | text: '历史', |
| 37 | color:'#AAAAAA' | 37 | color: '#AAAAAA' |
| 38 | }, | 38 | }, |
| 39 | "3": { | 39 | "3": { |
| 40 | text: '临时', | 40 | text: '临时', |
| ... | @@ -45,18 +45,15 @@ class data extends filter { | ... | @@ -45,18 +45,15 @@ class data extends filter { |
| 45 | color = obj[scope.row.qszt].color | 45 | color = obj[scope.row.qszt].color |
| 46 | return ( | 46 | return ( |
| 47 | <div> | 47 | <div> |
| 48 | <span style={`color:${color}`}>●</span> | 48 | <span style={`color:${color}`}>●</span> |
| 49 | <span >{ text }</span> | 49 | <span >{text}</span> |
| 50 | </div> | 50 | </div> |
| 51 | ) | 51 | ) |
| 52 | } | 52 | } |
| 53 | }, | 53 | }, |
| 54 | { | 54 | { |
| 55 | prop: "qllxmc", | ||
| 55 | label: "权利类型", | 56 | label: "权利类型", |
| 56 | // this.rentType | ||
| 57 | render: (h, scope) => { | ||
| 58 | return <div>{scope.row.qllx}</div>; | ||
| 59 | } | ||
| 60 | }, | 57 | }, |
| 61 | { | 58 | { |
| 62 | prop: "ywh", | 59 | prop: "ywh", |
| ... | @@ -103,7 +100,7 @@ class data extends filter { | ... | @@ -103,7 +100,7 @@ class data extends filter { |
| 103 | ] | 100 | ] |
| 104 | } | 101 | } |
| 105 | 102 | ||
| 106 | ywlys () { | 103 | ywlys() { |
| 107 | return [ | 104 | return [ |
| 108 | { value: 1, label: "办事大厅" }, | 105 | { value: 1, label: "办事大厅" }, |
| 109 | { value: 2, label: "微信小程序" }, | 106 | { value: 2, label: "微信小程序" }, | ... | ... |
-
Please register or sign in to post a comment