Skip to content

bdc / bdcdj-web

Go to a project
Toggle navigation
Toggle navigation pinning
052a74a2 by 吴蕾
Options

登记簿信息接口调试,样式修改

1 parent 6fd96f6b
Inline Side-by-side
Showing 11 changed files with 1019 additions and 2062 deletions
<template>
<div class="cfdj">
<div class="tableBox">
<div class="title">
查封登记信息
<div class="checkbox">
<el-checkbox-group v-model="checkList">
<el-checkbox label="临时"></el-checkbox>
<el-checkbox label="现势"></el-checkbox>
<el-checkbox label="历史"></el-checkbox>
</el-checkbox-group>
</div>
</div>
<table class="xxTable">
<tr>
<th rowspan="3" width="140">业务类型</th>
</tr>
<tr class="one">
<th class="linshiIcon">
<div class="icon">临时</div>
临时
</th>
<th>现势</th>
<th>历史</th>
</tr>
<tr class="two">
<th>查封登记</th>
<th>查封登记</th>
<th>查封登记</th>
</tr>
<tr v-for="(item, index) in columns" :key="index">
<td>
{{ item.label }}
</td>
<td>{{ tableData.linshi[item.prop] }}</td>
<td>{{ tableData.xianshi[item.prop] }}</td>
<td>{{ tableData.lishi[item.prop] }}</td>
</tr>
</table>
</div>
</div>
</template>
<script>
export default {
name: "cfdj",
data() {
return {
checkList: ["临时", "现势", "历史"],
columns: [
{
prop: "ssywh",
label: "上手业务号",
},
{
prop: "dah",
label: "档案号",
},
{
prop: "ywh",
label: "业务号",
},
{
prop: "bdcdyh",
label: "不动产单元号",
},
{
prop: "zl",
label: "坐落",
},
{
prop: "bdcqlr",
label: "不动产权利人",
},
{
prop: "zjzl",
label: "证件种类",
},
{
prop: "zjh",
label: "证件号",
},
{
prop: "cflx",
label: "查封类型",
},
{
prop: "cfjg",
label: "查封机关",
},
{
prop: "cfwh",
label: "查封文号",
},
{
prop: "cfwj",
label: "查封文件",
},
{
prop: "cfqssj",
label: "查封起始时间",
},
{
prop: "cfjssj",
label: "查封结束时间",
},
{
prop: "cfqx",
label: "查封期限",
},
{
prop: "cffw",
label: "查封范围",
},
{
prop: "djjg",
label: "登记机构",
},
{
prop: "dbr",
label: "登簿人",
},
{
prop: "djsj",
label: "登记时间",
},
{
prop: "jfywh",
label: "解封业务号",
},
{
prop: "jfjg",
label: "解封机关",
},
{
prop: "jfwh",
label: "解封文号",
},
{
prop: "jfwj",
label: "解封文件",
},
{
prop: "jfdjsj",
label: "解封登记时间",
},
{
prop: "jfdbr",
label: "解封登簿人",
},
],
tableData: {
linshi: {
ssywh: "",
dah: "",
ywh: "200825012285",
bdcdyh: "370205004005GB10030 F00160111",
zl: "汉台区东大街街道办事处北大街居委会北大街东侧（莲花池公园西侧）",
bdcqlr: "李四",
zjzj: "身份证号",
zjh: "*******",
cflx: "查封",
cfjg: "西安法院",
cfwh: "200825012286",
cfwj: "",
cfqssj: "2008年3月11日",
cfjssj: "2012年3月11日",
cfqx: "4年",
cffw: "",
djjg: "",
dbr: "",
djsj: "",
jfywh: "",
jfjg: "",
jfwh: "",
jfwj: "",
jfdjsj: "",
jfdbr: "",
},
xianshi: {
ssywh: "",
dah: "",
ywh: "200825012285",
bdcdyh: "370205004005GB10030 F00160111",
zl: "汉台区东大街街道办事处北大街居委会北大街东侧（莲花池公园西侧）",
bdcqlr: "李四",
zjzj: "身份证号",
zjh: "*******",
cflx: "查封",
cfjg: "西安法院",
cfwh: "200825012286",
cfwj: "",
cfqssj: "2008年3月11日",
cfjssj: "2012年3月11日",
cfqx: "4年",
cffw: "",
djjg: "",
dbr: "",
djsj: "",
jfywh: "200825012285",
jfjg: "西安法院",
jfwh: "123",
jfwj: "",
jfdjsj: "2012年3月11日",
jfdbr: "",
},
lishi: {
ssywh: "",
dah: "",
ywh: "200825012285",
bdcdyh: "370205004005GB10030 F00160111",
zl: "汉台区东大街街道办事处北大街居委会北大街东侧（莲花池公园西侧）",
bdcqlr: "李四",
zjzj: "身份证号",
zjh: "*******",
cflx: "查封",
cfjg: "西安法院",
cfwh: "200825012286",
cfwj: "",
cfqssj: "2008年3月11日",
cfjssj: "2012年3月11日",
cfqx: "4年",
cffw: "",
djjg: "",
dbr: "",
djsj: "",
jfywh: "",
jfjg: "",
jfwh: "",
jfwj: "",
jfdjsj: "",
jfdbr: "",
},
},
};
},
};
</script>
<style lang="scss" scoped>
.cfdj {
width: 100%;
height: 100%;
background: #fff;
overflow-y: scroll;
color: #333;
.tableBox {
width: 810px;
margin: 0 auto;
.title {
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;
}
}
.xxTable {
width: 810px;
border-spacing: 1px;
tr > th {
background: #464c5b;
color: #fff;
font-size: 16px;
}
tr > th:nth-child(1),
tr > th:nth-child(2) {
background: #464c5b;
}
tr > th:nth-child(3) {
background: rgba(70, 76, 91, 0.8);
}
.one th {
height: 25px;
font-size: 14px;
}
.one > th:nth-child(1) {
color: #fe9400;
}
.two th {
height: 45px;
p:nth-child(2) {
font-size: 14px;
}
}
.two > th:nth-child(1) {
color: #fe9400;
}
.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;
}
tr > td:nth-child(2) {
color: #fe9400;
}
tr > td:nth-child(4) {
color: #7f7f7f;
}
}
}
}
</style>
......@@ -10,6 +10,7 @@
<div class="content">
<div class="left">
<el-tree
ref="tree"
:data="treedata"
:props="defaultProps"
@node-click="handleNodeClick"
......@@ -20,22 +21,18 @@
></el-tree>
</div>
<div class="right">
<components :is="showTab"></components>
<components :is="showTab" :showType="showType"></components>
</div>
</div>
</dialogBox>
</template>
<script>
import { mapGetters } from "vuex";
import djbfm from "./djbfm.vue";
import zdxx from "./zdxx.vue";
import bdcqldjml from "./bdcqldjml.vue";
import bdcqljqtsx from "./bdcqljqtsx.vue";
import gyjsydsyq from "./gyjsydsyq.vue";
import dyaq from "./dyaq.vue";
import dyiq from "./dyiq.vue";
import ygdj from "./ygdj.vue";
import yydj from "./yydj.vue";
import cfdj from "./cfdj.vue";
import djxxTable from "./djxxTable.vue";
export default {
name: "djbxxDialog",
......@@ -44,12 +41,7 @@ export default {
zdxx,
bdcqldjml,
bdcqljqtsx,
gyjsydsyq,
dyaq,
dyiq,
ygdj,
yydj,
cfdj,
djxxTable,
},
props: {
value: { type: Boolean, default: false },
......@@ -59,43 +51,59 @@ export default {
treedata: [
{
id: "djbfm",
tabs: "djbfm",
label: "登记簿封面",
children: [
{
id: "zdxx",
tabs: "zdxx",
label: "宗地信息",
},
{
id: "bdcqldjml",
tabs: "bdcqldjml",
label: "不动产权利登记目录",
children: [
{
id: "bdcqljqtsx",
tabs: "bdcqljqtsx",
label: "不动产权利及其他事项",
children: [
{
id: "gyjsydsyq",
tabs: "djxxTable",
label: "国有建设用地使用权(临:0，现:0，历:0)",
type: "JSYDSYQ",
},
{
id: "dyaq",
tabs: "djxxTable",
label: "抵押权(临:0，现:0，历:0)",
type: "DYAQ",
},
{
id: "dyiq",
tabs: "djxxTable",
label: "地役权(临:0，现:0，历:0)",
type: "DYIQ",
},
{
id: "ygdj",
tabs: "djxxTable",
label: "预告登记(临:0，现:0，历:0)",
type: "YGDJ",
},
{
id: "yydj",
tabs: "djxxTable",
label: "异议登记(临:0，现:0，历:0)",
type: "YYDJ",
},
{
id: "cfdj",
tabs: "djxxTable",
label: "查封登记(临:0，现:0，历:0)",
type: "CFDJ",
},
],
},
......@@ -108,17 +116,60 @@ export default {
children: "children",
label: "label",
},
showTab: "gyjsydsyq", // 选中状态,根据表格中权利类型判断
showTab: "djxxTable", // 选中状态,根据表格中权利类型判断
showType: "JSYDSYQ",
};
},
computed: {
...mapGetters(["djbxx"]),
},
watch: {
djbxx: {
handler(newVlue) {
if (newVlue) {
var qszts = newVlue.detail.qszts;
let isZd = newVlue.djbfm.zd;
let arr = [
"QSZT_JSYDSYQ",
"QSZT_DYAQ",
"QSZT_DYIQ",
"QSZT_YGDJ",
"QSZT_YYDJ",
"QSZT_CFDJ",
];
if (!isZd) {
// 判断是否是宗地
arr[0] = "QSZT_FDCQ2";
this.treedata[0].children[1].children[0].children[0].type = FDCQ2;
}
arr.forEach((item, index) => {
let label =
this.treedata[0].children[1].children[0].children[
index
].label.split(":")[0];
this.treedata[0].children[1].children[0].children[index].label =
label +
(qszts[item][0] || 0) +
"，现:" +
(qszts[item][1] || 0) +
"，历:" +
(qszts[item][2] || 0) +
")";
});
}
},
immediate: true,
},
},
methods: {
closeDialog() {
this.$emit("input", false);
// 关闭时清空值
this.$store.dispatch("djbxx/setDjbxx", null);
},
handleNodeClick(data) {
this.showTab = data.id;
handleNodeClick(data, node, elem) {
this.showTab = data.tabs;
this.showType = data.type ? data.type : "";
},
},
};
......@@ -160,4 +211,9 @@ export default {
/deep/.el-tree-node {
white-space: pre-wrap;
}
/deep/ .is-current > .el-tree-node__content {
background-color: #f5f5f5;
color: #0079fe;
border-right: 4px solid #0079fe;
}
</style>
......
import filter from '@/utils/filter.js'
class data extends filter {
constructor() {
super()
}
columns() {
return {
JSYDSYQ: {
title: "建设用地使用权、宅基地使用权登记信息",
columns: [
{
prop: "ssywh",
label: "上手业务号",
},
{
prop: "dah",
label: "档案号",
},
{
prop: "ywh",
label: "业务号",
},
{
prop: "bdcdyh",
label: "不动产单元号",
},
{
prop: "zl",
label: "坐落",
},
{
prop: "qlrlx",
label: "权利人类型",
},
{
prop: "qlr",
label: "权利人",
},
{
prop: "zjzl",
label: "证件种类",
},
{
prop: "zjh",
label: "证件号",
},
{
prop: "gyqk",
label: "共有情况",
},
{
prop: "syqmj",
label: "使用权面积(m²)",
},
{
prop: "qlxz",
label: "权利性质",
},
{
prop: "tdyt",
label: "土地用途",
},
{
prop: "syqqssj",
label: "使用权起始时间",
},
{
prop: "syqjssj",
label: "使用权结束时间",
},
{
prop: "tdsyqx",
label: "土地使用期限",
},
{
prop: "qdjg",
label: "取得价格(万元)",
},
{
prop: "djyy",
label: "登记原因",
},
{
prop: "bdcqzh",
label: "不动产权证号",
},
{
prop: "djsj",
label: "登记时间",
},
{
prop: "dbr",
label: "登簿人",
},
{
prop: "fj",
label: "附记",
},
]
},
DYAQ: {
title: "抵押权登记信息",
columns: [
{
prop: "ssywh",
label: "上手业务号",
},
{
prop: "dah",
label: "档案号",
},
{
prop: "ywh",
label: "业务号",
},
{
prop: "bdcdyh",
label: "不动产单元号",
},
{
prop: "zjjzwzl",
label: "在建建筑物坐落",
},
{
prop: "dybdclx",
label: "抵押不动产类型",
},
{
prop: "dyqr",
label: "抵押权人",
},
{
prop: "zjzl",
label: "证件种类",
},
{
prop: "zjh",
label: "证件号",
},
{
prop: "dyr",
label: "抵押人",
},
{
prop: "dyfs",
label: "抵押方式",
},
{
prop: "sfygdj",
label: "是否预告登记",
},
{
prop: "zjjzwdyfw",
label: "在建建筑物抵押范围",
},
{
prop: "dymj",
label: "抵押面积",
},
{
prop: "bdbzzqse",
label: "被担保主债权数额(万元)",
},
{
prop: "dbfw",
label: "担保范围",
},
{
prop: "zwlxqssj",
label: "债务履行起始时间",
},
{
prop: "zwlxjssj",
label: "债务履行结束时间",
},
{
prop: "zwlxqx",
label: "债务履行期限(债务确定期间)",
},
{
prop: "zgzqqdsshse",
label: "最高债权确定事实和数额",
},
{
prop: "sfczyd",
label: "是否存在禁止或限制转让抵押不动产的约定",
},
{
prop: "djyy",
label: "登记原因",
},
{
prop: "bdcdjzmh",
label: "不动产登记证明号",
},
{
prop: "djsj",
label: "登记时间",
},
{
prop: "dbr",
label: "登簿人",
},
{
prop: "djjg",
label: "登记机构",
},
{
prop: "fj",
label: "附记",
},
{
prop: "qlqtzk",
label: "权利其他状况",
},
{
prop: "zxdyywh",
label: "注销抵押业务号",
},
{
prop: "zxdyyy",
label: "注销抵押原因",
},
]
},
DYIQ: {
title: "地役权登记信息",
columns: [
{
prop: "ssywh",
label: "上手业务号",
},
{
prop: "dah",
label: "档案号",
},
{
prop: "ywh",
label: "业务号",
},
{
prop: "gydbdcdyh",
label: "供役地不动产单元号",
},
{
prop: "gydqlr",
label: "供役地权利人",
},
{
prop: "gydqlrzjzl",
label: "供役地权利人证件种类",
},
{
prop: "xydbdcdyh",
label: "需役地不动产单元号",
},
{
prop: "xydzl",
label: "需役地坐落",
},
{
prop: "xydqlr",
label: "需役地权利人",
},
{
prop: "xydqlrzjzl",
label: "需役地权利人证件种类",
},
{
prop: "xydzjh",
label: "需役地证件号",
},
{
prop: "djyy",
label: "登记原因",
},
{
prop: "dyqnr",
label: "地役权内容",
},
{
prop: "qlqssj",
label: "权利起始时间",
},
{
prop: "qljssj",
label: "权利结束时间",
},
{
prop: "bdcdjzmh",
label: "不动产登记证明号",
},
{
prop: "qxdm",
label: "区县代码",
},
{
prop: "djjg",
label: "登记机构",
},
{
prop: "dbr",
label: "登簿人",
},
{
prop: "djsj",
label: "登记时间",
},
]
},
YGDJ: {
title: "预告登记信息",
columns: [
{
prop: "ssywh",
label: "上手业务号",
},
{
prop: "dah",
label: "档案号",
},
{
prop: "ywh",
label: "业务号",
},
{
prop: "bdcdyh",
label: "不动产单元号",
},
{
prop: "zl",
label: "坐落",
},
{
prop: "qlr",
label: "权利人",
},
{
prop: "qlrzjzl",
label: "证件种类",
},
{
prop: "qlrzjh",
label: "证件号",
},
{
prop: "ywr",
label: "义务人",
},
{
prop: "ywrzjzl",
label: "证件种类",
},
{
prop: "ywrzjh",
label: "证件号",
},
{
prop: "fwxz",
label: "房屋性质",
},
{
prop: "ghyt",
label: "规划用途",
},
{
prop: "fwzcs",
label: "房屋总层数",
},
{
prop: "fwszc",
label: "房屋所在层",
},
{
prop: "jzmj",
label: "建筑面积",
},
{
prop: "djyy",
label: "登记原因",
},
{
prop: "bdbzzqse",
label: "取得价格/被担保主债权数额",
},
{
prop: "jedw",
label: "金额单位",
},
{
prop: "dbfw",
label: "担保范围",
},
{
prop: "sfczyd",
label: "是否存在禁止或限制转让抵押不动产的约定",
},
{
prop: "djsj",
label: "登记时间",
},
{
prop: "bdcdjzmh",
label: "不动产登记证明号",
},
{
prop: "dbr",
label: "登簿人",
},
{
prop: "zxygywh",
label: "注销预告业务号",
},
{
prop: "zxygyy",
label: "注销预告原因",
},
{
prop: "zxsj",
label: "注销时间",
},
{
prop: "qszt",
label: "权属状态",
},
],
},
CFDJ: {
title: "查封登记信息",
columns: [
{
prop: "ssywh",
label: "上手业务号",
},
{
prop: "dah",
label: "档案号",
},
{
prop: "ywh",
label: "业务号",
},
{
prop: "bdcdyh",
label: "不动产单元号",
},
{
prop: "zl",
label: "坐落",
},
{
prop: "bdcqlr",
label: "不动产权利人",
},
{
prop: "zjzl",
label: "证件种类",
},
{
prop: "zjh",
label: "证件号",
},
{
prop: "cflx",
label: "查封类型",
},
{
prop: "cfjg",
label: "查封机关",
},
{
prop: "cfwh",
label: "查封文号",
},
{
prop: "cfwj",
label: "查封文件",
},
{
prop: "cfqssj",
label: "查封起始时间",
},
{
prop: "cfjssj",
label: "查封结束时间",
},
{
prop: "cfqx",
label: "查封期限",
},
{
prop: "cffw",
label: "查封范围",
},
{
prop: "djjg",
label: "登记机构",
},
{
prop: "dbr",
label: "登簿人",
},
{
prop: "djsj",
label: "登记时间",
},
{
prop: "jfywh",
label: "解封业务号",
},
{
prop: "jfjg",
label: "解封机关",
},
{
prop: "jfwh",
label: "解封文号",
},
{
prop: "jfwj",
label: "解封文件",
},
{
prop: "jfdjsj",
label: "解封登记时间",
},
{
prop: "jfdbr",
label: "解封登簿人",
},
]
},
YYDJ: {
title: "异议登记信息",
columns: [
{
prop: "ssywh",
label: "上手业务号",
},
{
prop: "dah",
label: "档案号",
},
{
prop: "ywh",
label: "业务号",
},
{
prop: "bdcdyh",
label: "不动产单元号",
},
{
prop: "zl",
label: "坐落",
},
{
prop: "yyr",
label: "异议人",
},
{
prop: "zjzl",
label: "证件种类",
},
{
prop: "zjh",
label: "证件号",
},
{
prop: "yysx",
label: "异议事项",
},
{
prop: "bdcdjzmh",
label: "不动产登记证明号",
},
{
prop: "djjg",
label: "登记机构",
},
{
prop: "dbr",
label: "登簿人",
},
{
prop: "djsj",
label: "登记时间",
},
{
prop: "zxyyywh",
label: "注销异议业务号",
},
{
prop: "zxyyyy",
label: "注销异议原因",
},
{
prop: "zxyydbr",
label: "注销异议登簿人",
},
{
prop: "zxyydjsj",
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" v-if="showTableData.length">
<table class="xxTable" :width="tableWidth">
<tr>
<th rowspan="3">业务类型</th>
</tr>
<!-- 第一行表头 -->
<tr class="one">
<th
v-for="(item, index) in ths"
:key="index"
:class="[item.class, item.type == '临时' ? 'linshiIcon' : '']"
>
<div class="icon" v-if="item.type == '临时'">{{ item.type }}</div>
{{ item.type }}
</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 "./djxxColumns";
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 = 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>
<template>
<div class="dyaq">
<div class="tableBox">
<div class="title">
抵押权登记信息
<div class="checkbox">
<el-checkbox-group v-model="checkList">
<el-checkbox label="临时"></el-checkbox>
<el-checkbox label="现势"></el-checkbox>
<el-checkbox label="历史"></el-checkbox>
</el-checkbox-group>
</div>
</div>
<table class="xxTable">
<tr>
<th rowspan="3" width="140">业务类型</th>
</tr>
<tr class="one">
<th class="linshiIcon">
<div class="icon">临时</div>
临时
</th>
<th>现势</th>
<th>历史</th>
</tr>
<tr class="two">
<th>
<p>抵押权</p>
<p>首次登记</p>
</th>
<th>
<p>抵押权</p>
<p>转移登记</p>
</th>
<th>
<p>抵押权</p>
<p>转移登记</p>
</th>
</tr>
<tr v-for="(item, index) in columns" :key="index">
<td>
{{ item.label }}
</td>
<td>{{ tableData.linshi[item.prop] }}</td>
<td>{{ tableData.xianshi[item.prop] }}</td>
<td>{{ tableData.lishi[item.prop] }}</td>
</tr>
</table>
</div>
</div>
</template>
<script>
export default {
name: "dyaq",
data() {
return {
checkList: ["临时", "现势", "历史"],
columns: [
{
prop: "ssywh",
label: "上手业务号",
},
{
prop: "dah",
label: "档案号",
},
{
prop: "ywh",
label: "业务号",
},
{
prop: "bdcdyh",
label: "不动产单元号",
},
{
prop: "zjjzwzl",
label: "在建建筑物坐落",
},
{
prop: "dybdclx",
label: "抵押不动产类型",
},
{
prop: "dyqr",
label: "抵押权人",
},
{
prop: "zjzl",
label: "证件种类",
},
{
prop: "zjh",
label: "证件号",
},
{
prop: "dyr",
label: "抵押人",
},
{
prop: "dyfs",
label: "抵押方式",
},
{
prop: "sfygdj",
label: "是否预告登记",
},
{
prop: "zjjzwdyfw",
label: "在建建筑物抵押范围",
},
{
prop: "dymj",
label: "抵押面积",
},
{
prop: "bdbzzqse",
label: "被担保主债权数额(万元)",
},
{
prop: "dbfw",
label: "担保范围",
},
{
prop: "zwlxqssj",
label: "债务履行起始时间",
},
{
prop: "zwlxjssj",
label: "债务履行结束时间",
},
{
prop: "zwlxqx",
label: "债务履行期限(债务确定期间)",
},
{
prop: "zgzqqdsshse",
label: "最高债权确定事实和数额",
},
{
prop: "sfczyd",
label: "是否存在禁止或限制转让抵押不动产的约定",
},
{
prop: "djyy",
label: "登记原因",
},
{
prop: "bdcdjzmh",
label: "不动产登记证明号",
},
{
prop: "djsj",
label: "登记时间",
},
{
prop: "dbr",
label: "登簿人",
},
{
prop: "djjg",
label: "登记机构",
},
{
prop: "fj",
label: "附记",
},
{
prop: "qlqtzk",
label: "权利其他状况",
},
{
prop: "zxdyywh",
label: "注销抵押业务号",
},
{
prop: "zxdyyy",
label: "注销抵押原因",
},
],
tableData: {
linshi: {
ssywh: "",
dah: "",
ywh: "200825012285",
bdcdyh: "370205004005GB10030 W00000000",
zjjzwzl:
"汉台区东大街街道办事处北大街居委会北大街东侧（莲花池公园西侧）",
dybdclx: "土地",
dyqr: "中国银行股份有限公司C区支行",
zjzj: "营业执照",
zjh: "*******",
dyr: "联城有限公司",
dyfs: "一般抵押",
sfygdj: "否",
zjjzwdyfw: "",
dymj: "22384.1700",
bdbzzqse: "22000",
dbfw: "城镇住宅用地",
zwlxqssj: "2007年12月25日",
zwlxjssj: "2077年12月24日",
zwlxqx: "1年",
zgzqqdsshse: "11223",
sfczyd: "否",
djyy: "合同设立",
bdcdjzmh: "A（2011）B市不动产证明第0000060号",
djsj: "2009年04月21日",
dbr: "路**",
djjg: "",
fj: "",
qlqtzk: "",
zxdyywh: "201025126854",
zxdyyy: "贷款还清",
},
xianshi: {
ssywh: "",
dah: "",
ywh: "200825012285",
bdcdyh: "370205004005GB10030 W00000000",
zjjzwzl:
"汉台区东大街街道办事处北大街居委会北大街东侧（莲花池公园西侧）",
dybdclx: "土地",
dyqr: "中国银行股份有限公司C区支行",
zjzj: "营业执照",
zjh: "*******",
dyr: "联城有限公司",
dyfs: "一般抵押",
sfygdj: "否",
zjjzwdyfw: "",
dymj: "22384.1700",
bdbzzqse: "22000",
dbfw: "城镇住宅用地",
zwlxqssj: "2007年12月25日",
zwlxjssj: "2077年12月24日",
zwlxqx: "1年",
zgzqqdsshse: "11223",
sfczyd: "否",
djyy: "合同设立",
bdcdjzmh: "A（2011）B市不动产证明第0000060号",
djsj: "2009年04月21日",
dbr: "路**",
djjg: "",
fj: "",
qlqtzk: "",
zxdyywh: "201025126854",
zxdyyy: "贷款还清",
},
lishi: {
ssywh: "",
dah: "",
ywh: "200825012285",
bdcdyh: "370205004005GB10030 W00000000",
zjjzwzl:
"汉台区东大街街道办事处北大街居委会北大街东侧（莲花池公园西侧）",
dybdclx: "土地",
dyqr: "中国银行股份有限公司C区支行",
zjzj: "营业执照",
zjh: "*******",
dyr: "联城有限公司",
dyfs: "一般抵押",
sfygdj: "否",
zjjzwdyfw: "",
dymj: "22384.1700",
bdbzzqse: "22000",
dbfw: "城镇住宅用地",
zwlxqssj: "2007年12月25日",
zwlxjssj: "2077年12月24日",
zwlxqx: "1年",
zgzqqdsshse: "11223",
sfczyd: "否",
djyy: "合同设立",
bdcdjzmh: "A（2011）B市不动产证明第0000060号",
djsj: "2009年04月21日",
dbr: "路**",
djjg: "",
fj: "",
qlqtzk: "",
zxdyywh: "201025126854",
zxdyyy: "贷款还清",
},
},
};
},
};
</script>
<style lang="scss" scoped>
.dyaq {
width: 100%;
height: 100%;
background: #fff;
overflow-y: scroll;
color: #333;
.tableBox {
width: 810px;
margin: 0 auto;
.title {
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;
}
}
.xxTable {
width: 810px;
border-spacing: 1px;
tr > th {
background: #464c5b;
color: #fff;
font-size: 16px;
}
tr > th:nth-child(1),
tr > th:nth-child(2) {
background: #464c5b;
}
tr > th:nth-child(3) {
background: rgba(70, 76, 91, 0.8);
}
.one th {
height: 25px;
font-size: 14px;
}
.one > th:nth-child(1) {
color: #fe9400;
}
.two th {
height: 45px;
p:nth-child(2) {
font-size: 14px;
}
}
.two > th:nth-child(1) {
color: #fe9400;
}
.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;
}
tr > td:nth-child(2) {
color: #fe9400;
}
tr > td:nth-child(4) {
color: #7f7f7f;
}
}
}
}
</style>
<template>
<div class="dyiq">
<div class="tableBox">
<div class="title">
地役权登记信息
<div class="checkbox">
<el-checkbox-group v-model="checkList">
<el-checkbox label="临时"></el-checkbox>
<el-checkbox label="现势"></el-checkbox>
<el-checkbox label="历史"></el-checkbox>
</el-checkbox-group>
</div>
</div>
<table class="xxTable">
<tr>
<th rowspan="3" width="140">业务类型</th>
</tr>
<tr class="one">
<th class="linshiIcon">
<div class="icon">临时</div>
临时
</th>
<th>现势</th>
<th>历史</th>
</tr>
<tr class="two">
<th>
<p>地役权</p>
<p>首次登记</p>
</th>
<th>
<p>地役权</p>
<p>转移登记</p>
</th>
<th>
<p>地役权</p>
<p>转移登记</p>
</th>
</tr>
<tr v-for="(item, index) in columns" :key="index">
<td>
{{ item.label }}
</td>
<td>{{ tableData.linshi[item.prop] }}</td>
<td>{{ tableData.xianshi[item.prop] }}</td>
<td>{{ tableData.lishi[item.prop] }}</td>
</tr>
</table>
</div>
</div>
</template>
<script>
export default {
name: "dyiq",
data() {
return {
checkList: ["临时", "现势", "历史"],
columns: [
{
prop: "ssywh",
label: "上手业务号",
},
{
prop: "dah",
label: "档案号",
},
{
prop: "ywh",
label: "业务号",
},
{
prop: "gydbdcdyh",
label: "供役地不动产单元号",
},
{
prop: "gydqlr",
label: "供役地权利人",
},
{
prop: "gydqlrzjzl",
label: "供役地权利人证件种类",
},
{
prop: "xydbdcdyh",
label: "需役地不动产单元号",
},
{
prop: "xydzl",
label: "需役地坐落",
},
{
prop: "xydqlr",
label: "需役地权利人",
},
{
prop: "xydqlrzjzl",
label: "需役地权利人证件种类",
},
{
prop: "xydzjh",
label: "需役地证件号",
},
{
prop: "djyy",
label: "登记原因",
},
{
prop: "dyqnr",
label: "地役权内容",
},
{
prop: "qlqssj",
label: "权利起始时间",
},
{
prop: "qljssj",
label: "权利结束时间",
},
{
prop: "bdcdjzmh",
label: "不动产登记证明号",
},
{
prop: "qxdm",
label: "区县代码",
},
{
prop: "djjg",
label: "登记机构",
},
{
prop: "dbr",
label: "登簿人",
},
{
prop: "djsj",
label: "登记时间",
},
],
tableData: {
linshi: {},
xianshi: {},
lishi: {},
},
};
},
};
</script>
<style lang="scss" scoped>
.dyiq {
width: 100%;
height: 100%;
background: #fff;
overflow-y: scroll;
color: #333;
.tableBox {
width: 810px;
margin: 0 auto;
.title {
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;
}
}
.xxTable {
width: 810px;
border-spacing: 1px;
tr > th {
background: #464c5b;
color: #fff;
font-size: 16px;
}
tr > th:nth-child(1),
tr > th:nth-child(2) {
background: #464c5b;
}
tr > th:nth-child(3) {
background: rgba(70, 76, 91, 0.8);
}
.one th {
height: 25px;
font-size: 14px;
}
.one > th:nth-child(1) {
color: #fe9400;
}
.two th {
height: 45px;
p:nth-child(2) {
font-size: 14px;
}
}
.two > th:nth-child(1) {
color: #fe9400;
}
.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;
}
tr > td:nth-child(2) {
color: #fe9400;
}
tr > td:nth-child(4) {
color: #7f7f7f;
}
}
}
}
</style>
<template>
<div class="gyjsydsyq">
<div class="tableBox">
<div class="title">
建设用地使用权、宅基地使用权登记信息
<div class="checkbox">
<el-checkbox-group v-model="checkList">
<el-checkbox label="临时"></el-checkbox>
<el-checkbox label="现势"></el-checkbox>
<el-checkbox label="历史"></el-checkbox>
</el-checkbox-group>
</div>
</div>
<table class="xxTable">
<tr>
<th rowspan="3" width="140">业务类型</th>
</tr>
<tr class="one">
<th class="linshiIcon">
<div class="icon">临时</div>
临时
</th>
<th>现势</th>
<th>历史</th>
</tr>
<tr class="two">
<th>
<p>建设用地使用权</p>
<p>首次登记</p>
</th>
<th>
<p>建设用地使用权</p>
<p>转移登记</p>
</th>
<th>
<p>建设用地使用权</p>
<p>转移登记</p>
</th>
</tr>
<tr v-for="(item, index) in columns" :key="index">
<td>
{{ item.label }}
</td>
<td>{{ tableData.linshi[item.prop] }}</td>
<td>{{ tableData.xianshi[item.prop] }}</td>
<td>{{ tableData.lishi[item.prop] }}</td>
</tr>
</table>
</div>
</div>
</template>
<script>
export default {
name: "gyjsydsyq",
data() {
return {
checkList: ["临时", "现势", "历史"],
columns: [
{
prop: "ssywh",
label: "上手业务号",
},
{
prop: "dah",
label: "档案号",
},
{
prop: "ywh",
label: "业务号",
},
{
prop: "bdcdyh",
label: "不动产单元号",
},
{
prop: "zl",
label: "坐落",
},
{
prop: "qlrlx",
label: "权利人类型",
},
{
prop: "qlr",
label: "权利人",
},
{
prop: "zjzl",
label: "证件种类",
},
{
prop: "zjh",
label: "证件号",
},
{
prop: "gyqk",
label: "共有情况",
},
{
prop: "syqmj",
label: "使用权面积(m²)",
},
{
prop: "qlxz",
label: "权利性质",
},
{
prop: "tdyt",
label: "土地用途",
},
{
prop: "syqqssj",
label: "使用权起始时间",
},
{
prop: "syqjssj",
label: "使用权结束时间",
},
{
prop: "tdsyqx",
label: "土地使用期限",
},
{
prop: "qdjg",
label: "取得价格(万元)",
},
{
prop: "djyy",
label: "登记原因",
},
{
prop: "bdcqzh",
label: "不动产权证号",
},
{
prop: "djsj",
label: "登记时间",
},
{
prop: "dbr",
label: "登簿人",
},
{
prop: "fj",
label: "附记",
},
],
tableData: {
linshi: {
ssywh: "",
dah: "",
ywh: "200825012285",
bdcdyh: "370205004005GB10030 W00000000",
zl: "汉台区东大街街道办事处北大街居委会北大街东侧（莲花池公园西侧）",
qlrlx: "企业",
qlr: "联城有限公司",
zjzj: "组织机构代码证",
zjh: "*******",
gyqk: "单独所有",
syqmj: "22384.1700",
qlxz: "出让",
tdyt: "城镇住宅用地",
syqqssj: "2007年12月25日",
syqjssj: "2077年12月24日",
tdsyqx: "70年",
qdjg: "75793.75",
djyy: "出让取得",
bdcqzh: "陕2018汉台区不动产权第0003782号",
djsj: "2008年3月11日",
dbr: "路**",
fj: "2014年10月21日办理房屋首次登记",
},
xianshi: {
ssywh: "",
dah: "",
ywh: "200825012285",
bdcdyh: "370205004005GB10030 W00000000",
zl: "汉台区东大街街道办事处北大街居委会北大街东侧（莲花池公园西侧）",
qlrlx: "企业",
qlr: "联城有限公司",
zjzj: "组织机构代码证",
zjh: "*******",
gyqk: "单独所有",
syqmj: "22384.1700",
qlxz: "出让",
tdyt: "城镇住宅用地",
syqqssj: "2007年12月25日",
syqjssj: "2077年12月24日",
tdsyqx: "70年",
qdjg: "75793.75",
djyy: "出让取得",
bdcqzh: "陕2018汉台区不动产权第0003782号",
djsj: "2008年3月11日",
dbr: "路**",
fj: "2014年10月21日办理房屋首次登记",
},
lishi: {
ssywh: "",
dah: "",
ywh: "200825012285",
bdcdyh: "370205004005GB10030 W00000000",
zl: "汉台区东大街街道办事处北大街居委会北大街东侧（莲花池公园西侧）",
qlrlx: "企业",
qlr: "联城有限公司",
zjzj: "组织机构代码证",
zjh: "*******",
gyqk: "单独所有",
syqmj: "22384.1700",
qlxz: "出让",
tdyt: "城镇住宅用地",
syqqssj: "2007年12月25日",
syqjssj: "2077年12月24日",
tdsyqx: "70年",
qdjg: "75793.75",
djyy: "出让取得",
bdcqzh: "陕2018汉台区不动产权第0003782号",
djsj: "2008年3月11日",
dbr: "路**",
fj: "2014年10月21日办理房屋首次登记",
},
},
};
},
};
</script>
<style lang="scss" scoped>
.gyjsydsyq {
width: 100%;
height: 100%;
background: #fff;
overflow-y: scroll;
color: #333;
.tableBox {
width: 810px;
margin: 0 auto;
.title {
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;
}
}
.xxTable {
width: 810px;
border-spacing: 1px;
tr > th {
background: #464c5b;
color: #fff;
font-size: 16px;
}
tr > th:nth-child(1),
tr > th:nth-child(2) {
background: #464c5b;
}
tr > th:nth-child(3) {
background: rgba(70, 76, 91, 0.8);
}
.one th {
height: 25px;
font-size: 14px;
}
.one > th:nth-child(1) {
color: #fe9400;
}
.two th {
height: 45px;
p:nth-child(2) {
font-size: 14px;
}
}
.two > th:nth-child(1) {
color: #fe9400;
}
.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;
}
tr > td:nth-child(2) {
color: #fe9400;
}
tr > td:nth-child(4) {
color: #7f7f7f;
}
}
}
}
</style>
<template>
<div class="ygdj">
<div class="tableBox">
<div class="title">
预告登记信息
<div class="checkbox">
<el-checkbox-group v-model="checkList">
<el-checkbox label="临时"></el-checkbox>
<el-checkbox label="现势"></el-checkbox>
<el-checkbox label="历史"></el-checkbox>
</el-checkbox-group>
</div>
</div>
<table class="xxTable">
<tr>
<th rowspan="3" width="140">业务类型</th>
</tr>
<tr class="one">
<th class="linshiIcon">
<div class="icon">临时</div>
临时
</th>
<th>现势</th>
<th>历史</th>
</tr>
<tr class="two">
<th>
<p>预售商品房买卖预告登记</p>
<p>首次登记</p>
</th>
<th>
<p>预售商品房抵押权预告登记</p>
<p>转移登记</p>
</th>
<th>
<p>预售商品房买卖预告登记</p>
<p>变更登记</p>
</th>
</tr>
<tr v-for="(item, index) in columns" :key="index">
<td>
{{ item.label }}
</td>
<td>{{ tableData.linshi[item.prop] }}</td>
<td>{{ tableData.xianshi[item.prop] }}</td>
<td>{{ tableData.lishi[item.prop] }}</td>
</tr>
</table>
</div>
</div>
</template>
<script>
export default {
name: "ygdj",
data() {
return {
checkList: ["临时", "现势", "历史"],
columns: [
{
prop: "ssywh",
label: "上手业务号",
},
{
prop: "dah",
label: "档案号",
},
{
prop: "ywh",
label: "业务号",
},
{
prop: "bdcdyh",
label: "不动产单元号",
},
{
prop: "zl",
label: "坐落",
},
{
prop: "qlr",
label: "权利人",
},
{
prop: "qlrzjzl",
label: "证件种类",
},
{
prop: "qlrzjh",
label: "证件号",
},
{
prop: "ywr",
label: "义务人",
},
{
prop: "ywrzjzl",
label: "证件种类",
},
{
prop: "ywrzjh",
label: "证件号",
},
{
prop: "fwxz",
label: "房屋性质",
},
{
prop: "ghyt",
label: "规划用途",
},
{
prop: "fwzcs",
label: "房屋总层数",
},
{
prop: "fwszc",
label: "房屋所在层",
},
{
prop: "jzmj",
label: "建筑面积",
},
{
prop: "djyy",
label: "登记原因",
},
{
prop: "bdbzzqse",
label: "取得价格/被担保主债权数额",
},
{
prop: "jedw",
label: "金额单位",
},
{
prop: "dbfw",
label: "担保范围",
},
{
prop: "sfczyd",
label: "是否存在禁止或限制转让抵押不动产的约定",
},
{
prop: "djsj",
label: "登记时间",
},
{
prop: "bdcdjzmh",
label: "不动产登记证明号",
},
{
prop: "dbr",
label: "登簿人",
},
{
prop: "zxygywh",
label: "注销预告业务号",
},
{
prop: "zxygyy",
label: "注销预告原因",
},
{
prop: "zxsj",
label: "注销时间",
},
{
prop: "qszt",
label: "权属状态",
},
],
tableData: {
linshi: {
ssywh: "",
dah: "",
ywh: "200825012285",
bdcdyh: "370205004005GB10030 F00160111",
zl: "汉台区东大街街道办事处北大街居委会北大街东侧（莲花池公园西侧）",
qlr: "企业",
qlrzjzj: "组织机构代码证",
qlrzjh: "*******",
ywr: "企业",
ywrzjzl: "组织机构代码证",
ywrzjh: "*******",
tdsyqr: "绿地开发有限公司",
fwxz: "商品房",
ghyt: "住宅",
fwzcs: "10",
fwszc: "6",
jzmj: "111.5",
djyy: "",
bdbzzqse: "80.000",
jedw: "万元",
dbfw: "****",
sfczyd: "",
djsj: "2008年3月11日",
bdcdjzmh: "A（2011）B市不动产证明第0000060号",
dbr: "路**",
zxygywh: "",
zxygyy: "",
zxsj: "",
qszt: "",
},
xianshi: {
ssywh: "",
dah: "",
ywh: "200825012285",
bdcdyh: "370205004005GB10030 F00160111",
zl: "汉台区东大街街道办事处北大街居委会北大街东侧（莲花池公园西侧）",
qlr: "企业",
qlrzjzj: "组织机构代码证",
qlrzjh: "*******",
ywr: "企业",
ywrzjzl: "组织机构代码证",
ywrzjh: "*******",
tdsyqr: "绿地开发有限公司",
fwxz: "商品房",
ghyt: "住宅",
fwzcs: "10",
fwszc: "6",
jzmj: "111.5",
djyy: "",
bdbzzqse: "60.000",
jedw: "",
dbfw: "",
sfczyd: "是",
djsj: "2008年3月11日",
bdcdjzmh: "A（2011）B市不动产证明第0000060号",
dbr: "路**",
zxygywh: "",
zxygyy: "",
zxsj: "",
qszt: "",
},
lishi: {
ssywh: "",
dah: "",
ywh: "200825012285",
bdcdyh: "370205004005GB10030 F00160111",
zl: "汉台区东大街街道办事处北大街居委会北大街东侧（莲花池公园西侧）",
qlr: "企业",
qlrzjzj: "组织机构代码证",
qlrzjh: "*******",
ywr: "企业",
ywrzjzl: "组织机构代码证",
ywrzjh: "*******",
tdsyqr: "绿地开发有限公司",
fwxz: "商品房",
ghyt: "住宅",
fwzcs: "10",
fwszc: "6",
jzmj: "111.5",
djyy: "",
bdbzzqse: "",
jedw: "",
dbfw: "",
sfczyd: "",
djsj: "2008年3月11日",
bdcdjzmh: "A（2011）B市不动产证明第0000060号",
dbr: "路**",
zxygywh: "200825012286",
zxygyy: "个人原因",
zxsj: "2008年3月11日",
qszt: "",
},
},
};
},
};
</script>
<style lang="scss" scoped>
.ygdj {
width: 100%;
height: 100%;
background: #fff;
overflow-y: scroll;
color: #333;
.tableBox {
width: 810px;
margin: 0 auto;
.title {
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;
}
}
.xxTable {
width: 810px;
border-spacing: 1px;
tr > th {
background: #464c5b;
color: #fff;
font-size: 16px;
}
tr > th:nth-child(1),
tr > th:nth-child(2) {
background: #464c5b;
}
tr > th:nth-child(3) {
background: rgba(70, 76, 91, 0.8);
}
.one th {
height: 25px;
font-size: 14px;
}
.one > th:nth-child(1) {
color: #fe9400;
}
.two th {
height: 45px;
p:nth-child(2) {
font-size: 14px;
}
}
.two > th:nth-child(1) {
color: #fe9400;
}
.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;
}
tr > td:nth-child(2) {
color: #fe9400;
}
tr > td:nth-child(4) {
color: #7f7f7f;
}
}
}
}
</style>
<template>
<div class="yydj">
<div class="tableBox">
<div class="title">
异议登记信息
<div class="checkbox">
<el-checkbox-group v-model="checkList">
<el-checkbox label="临时"></el-checkbox>
<el-checkbox label="现势"></el-checkbox>
<el-checkbox label="历史"></el-checkbox>
</el-checkbox-group>
</div>
</div>
<table class="xxTable">
<tr>
<th rowspan="3" width="140">业务类型</th>
</tr>
<tr class="one">
<th class="linshiIcon">
<div class="icon">临时</div>
临时
</th>
<th>现势</th>
<th>历史</th>
</tr>
<tr class="two">
<th>异议登记</th>
<th>异议登记</th>
<th>异议登记</th>
</tr>
<tr v-for="(item, index) in columns" :key="index">
<td>
{{ item.label }}
</td>
<td>{{ tableData.linshi[item.prop] }}</td>
<td>{{ tableData.xianshi[item.prop] }}</td>
<td>{{ tableData.lishi[item.prop] }}</td>
</tr>
</table>
</div>
</div>
</template>
<script>
export default {
name: "yydj",
data() {
return {
checkList: ["临时", "现势", "历史"],
columns: [
{
prop: "ssywh",
label: "上手业务号",
},
{
prop: "dah",
label: "档案号",
},
{
prop: "ywh",
label: "业务号",
},
{
prop: "bdcdyh",
label: "不动产单元号",
},
{
prop: "zl",
label: "坐落",
},
{
prop: "yyr",
label: "异议人",
},
{
prop: "zjzl",
label: "证件种类",
},
{
prop: "zjh",
label: "证件号",
},
{
prop: "yysx",
label: "异议事项",
},
{
prop: "bdcdjzmh",
label: "不动产登记证明号",
},
{
prop: "djjg",
label: "登记机构",
},
{
prop: "dbr",
label: "登簿人",
},
{
prop: "djsj",
label: "登记时间",
},
{
prop: "zxyyywh",
label: "注销异议业务号",
},
{
prop: "zxyyyy",
label: "注销异议原因",
},
{
prop: "zxyydbr",
label: "注销异议登簿人",
},
{
prop: "zxyydjsj",
label: "注销异议登记时间",
},
],
tableData: {
linshi: {
ssywh: "",
dah: "",
ywh: "200825012285",
bdcdyh: "370205004005GB10030 F00160111",
zl: "汉台区东大街街道办事处北大街居委会北大街东侧（莲花池公园西侧）",
yyr: "李四",
zjzj: "身份证号",
zjh: "*******",
yysx: "",
djjg: "",
bdcdjzmh: "200825012286",
dbr: "",
djsj: "2008年3月11日",
zxyyywh: "",
zxyyyy: "",
zxyydbr: "",
zxyydjsj: "",
},
xianshi: {
ssywh: "",
dah: "",
ywh: "200825012285",
bdcdyh: "370205004005GB10030 F00160111",
zl: "汉台区东大街街道办事处北大街居委会北大街东侧（莲花池公园西侧）",
yyr: "李四",
zjzj: "身份证号",
zjh: "*******",
yysx: "",
djjg: "",
bdcdjzmh: "200825012286",
dbr: "",
djsj: "2008年3月11日",
zxyyywh: "200825012286",
zxyyyy: "时间到期",
zxyydbr: "李四",
zxyydjsj: "2008年3月11日",
},
lishi: {
ssywh: "",
dah: "",
ywh: "200825012285",
bdcdyh: "370205004005GB10030 F00160111",
zl: "汉台区东大街街道办事处北大街居委会北大街东侧（莲花池公园西侧）",
yyr: "李四",
zjzj: "身份证号",
zjh: "*******",
yysx: "",
djjg: "",
bdcdjzmh: "200825012286",
dbr: "",
djsj: "2008年3月11日",
zxyyywh: "200825012286",
zxyyyy: "时间到期",
zxyydbr: "李四",
zxyydjsj: "2008年3月11日",
},
},
};
},
};
</script>
<style lang="scss" scoped>
.yydj {
width: 100%;
height: 100%;
background: #fff;
overflow-y: scroll;
color: #333;
.tableBox {
width: 810px;
margin: 0 auto;
.title {
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;
}
}
.xxTable {
width: 810px;
border-spacing: 1px;
tr > th {
background: #464c5b;
color: #fff;
font-size: 16px;
}
tr > th:nth-child(1),
tr > th:nth-child(2) {
background: #464c5b;
}
tr > th:nth-child(3) {
background: rgba(70, 76, 91, 0.8);
}
.one th {
height: 25px;
font-size: 14px;
}
.one > th:nth-child(1) {
color: #fe9400;
}
.two th {
height: 45px;
p:nth-child(2) {
font-size: 14px;
}
}
.two > th:nth-child(1) {
color: #fe9400;
}
.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;
}
tr > td:nth-child(2) {
color: #fe9400;
}
tr > td:nth-child(4) {
color: #7f7f7f;
}
}
}
}
</style>
......@@ -92,7 +92,7 @@ import {
getDjml,
getZdjbxx,
getQlname,
getDetail
getDetail,
} from "@/api/zhcx.js";
import { mapGetters } from "vuex";
import axios from "axios";
......@@ -157,22 +157,27 @@ export default {
openDialog(scope) {
let _this = this;
let bsm = scope.row.bsmQlxx;
bsm="b1394eedd8387347684d358da80da62c"
this.bsm = bsm;
axios
// .all([getDjbfm(bsm), getDjml(bsm), getZdjbxx(bsm), getQlname(bsm), getDetail(bsm)])
.all([
getDjbfm(bsm),
getDjml(bsm),
getZdjbxx(bsm),
getQlname(bsm),
getDetail(bsm),
])
.all([getDjbfm(bsm), getDjml(bsm), getZdjbxx(bsm), getQlname(bsm)])
.then(([djbfm, djml, zdjbxx, qlname]) => {
let obj = {
djbfm:djbfm.result,//
djml:djml.result,//
zdjbxx:zdjbxx.result,
qlname:qlname.result//
}
this.$store.dispatch('djbxx/setDjbxx', obj)
djbfm: djbfm.result,
djml: djml.result,
zdjbxx: zdjbxx.result,
qlname: qlname.result,
detail: detail.result,
};
this.$store.dispatch("djbxx/setDjbxx", obj);
_this.isDialog = true;
// if (scope.row.qllx == "预告买卖登记") {
// if (scope.row.qllxmc == "预告买卖登记") {
// this.$refs.djbxxDialog.showTab = "ygdj";
// } else if (scope.row.qllx == "查封登记") {
// this.$refs.djbxxDialog.showTab = "cfdj";
......
......@@ -8,7 +8,7 @@ class data extends filter {
constructor() {
super()
}
columns () {
columns() {
return [
{
label: '序号',
......@@ -26,15 +26,15 @@ class data extends filter {
label: "权属状态",
render: (h, scope) => {
let text = '';
let color=""
let color = ""
let obj = {
"1": {
text:'现势',
color:'#4BD863'
text: '现势',
color: '#4BD863'
},
"2": {
text:'历史',
color:'#AAAAAA'
text: '历史',
color: '#AAAAAA'
},
"3": {
text: '临时',
......@@ -46,17 +46,14 @@ class data extends filter {
return (
<div>
<span style={`color:${color}`}>●</span>
<span >{ text }</span>
<span >{text}</span>
</div>
)
}
},
{
prop: "qllxmc",
label: "权利类型",
// this.rentType
render: (h, scope) => {
return <div>{scope.row.qllx}</div>;
}
},
{
prop: "ywh",
......@@ -103,7 +100,7 @@ class data extends filter {
]
}
ywlys () {
ywlys() {
return [
{ value: 1, label: "办事大厅" },
{ value: 2, label: "微信小程序" },
......