Skip to content

bdc / bdcdj-web

Go to a project
Toggle navigation
Toggle navigation pinning
633d798c by 田浩浩
Options

修改登记簿内容

1 parent b15d76ba
Expand all
Inline Side-by-side
Showing 26 changed files with 118 additions and 1521 deletions
import request from '@/utils/request'
/*
登记簿详情页
*/
// 获取登记封面
export function getDjbfm(data) {
return request({
url: '/djbDetail/getDjbFm',
method: 'get',
params: data
})
}
// 获取登记目录
export function getBdcqldjmlByBdcdyid(data) {
return request({
url: '/djbDetail/getBdcqldjmlByBdcdyid',
method: 'get',
params: data
})
}
// 获取宗地信息
export function getZdjjxxBybdcdyid(data) {
return request({
url: '/djbDetail/getZdjjxxBybdcdyid',
method: 'get',
params: data
})
}
// 根据受理单元标识，获取宗地信息
export function getZdjjxxBySLdy(data) {
return request({
url: '/djbDetail/getZdjjxxBySLdy',
method: 'get',
params: data
})
}
// 获取不动产权利及其他事项
export function getBdcqljqtsx(data) {
return request({
url: '/djbDetail/getBdcqljqtsx',
method: 'get',
params: data
})
}
// 获取建设用地使用权
export function getJsydsyqList(data) {
return request({
url: '/djbDetail/getJsydsyqList',
method: 'post',
data
})
}
// 获取抵押权
export function getDiyaqList(data) {
return request({
url: '/djbDetail/getDiyaqList',
method: 'post',
data
})
}
// 获取地役权
export function getDiyiqList(data) {
return request({
url: '/djbDetail/getDiyiqList',
method: 'post',
data
})
}
// 获取预告登记
export function getYgdjList(data) {
return request({
url: '/djbDetail/getYgdjList',
method: 'post',
data
})
}
// 获取异议登记
export function getYydjList(data) {
return request({
url: '/djbDetail/getYydjList',
method: 'post',
data
})
}
// 获取查封登记
export function getCfdjList(data) {
return request({
url: '/djbDetail/getCfdjList',
method: 'post',
data
})
}
......@@ -23,7 +23,7 @@
</template>
<script>
import { getBdcqldjmlByBdcdyid } from "@/api/zhcx.js";
import { getBdcqldjmlByBdcdyid } from "@/api/registerBook.js";
export default {
data() {
return {
......
......@@ -49,7 +49,7 @@
</template>
<script>
import { getBdcqljqtsx } from "@/api/zhcx.js";
import { getBdcqljqtsx } from "@/api/registerBook.js";
export default {
name: "bdcqljqtsx",
data() {
......
......@@ -47,7 +47,7 @@
</template>
<script>
import { getCfdjList } from "@/api/zhcx.js";
import { getCfdjList } from "@/api/registerBook.js";
import { datas } from "./qlxxFormData.js";
export default {
data() {
......
......@@ -47,7 +47,7 @@
</template>
<script>
import { getDiyaqList } from "@/api/zhcx.js";
import { getDiyaqList } from "@/api/registerBook.js";
import { datas } from "./qlxxFormData.js";
export default {
data() {
......
......@@ -47,7 +47,7 @@
</template>
<script>
import { getDiyiqList } from "@/api/zhcx.js";
import { getDiyiqList } from "@/api/registerBook.js";
import { datas } from "./qlxxFormData.js";
export default {
data() {
......
......@@ -19,7 +19,7 @@
</div>
</template>
<script>
import { getBdcqljqtsx } from "@/api/zhcx.js";
import { getBdcqljqtsx } from "@/api/registerBook.js";
export default {
data() {
return {
......
......@@ -10,11 +10,11 @@
区 (县、市)
</p>
<p>
<font>{{ info.zhen }}</font>
<font>{{ info.jdh }}</font>
街道 (乡、镇)
<font>{{ info.cun }}</font>
<font>{{ info.jfh }}</font>
街坊 (村)
<font>{{ info.zu }}</font>
<font>{{ info.zh }}</font>
组
</p>
<div class="title">不动产登记簿</div>
......@@ -33,7 +33,7 @@
</template>
<script>
import { getDjbfm } from "@/api/zhcx.js";
import { getDjbfm } from "@/api/registerBook.js";
export default {
data() {
......@@ -48,9 +48,7 @@ export default {
},
methods: {
loadData() {
getDjbfm(
this.propsParam.bsmQlxx
).then((res) => {
getDjbfm({ bdcdyid: this.propsParam.bdcdyid}).then((res) => {
if (res.code === 200) {
this.info = res.result;
}
......
......@@ -47,7 +47,7 @@
</template>
<script>
import { getJsydsyqList } from "@/api/zhcx.js";
import { getJsydsyqList } from "@/api/registerBook.js";
import { datas } from "./qlxxFormData.js";
export default {
data() {
......
......@@ -47,7 +47,7 @@
</template>
<script>
import { getJsydsyqList } from "@/api/zhcx.js";
import { getJsydsyqList } from "@/api/registerBook.js";
import { datas } from "./qlxxFormData.js";
export default {
data() {
......
......@@ -47,7 +47,7 @@
</template>
<script>
import { getJsydsyqList } from "@/api/zhcx.js";
import { getJsydsyqList } from "@/api/registerBook.js";
import { datas } from "./qlxxFormData.js";
export default {
data() {
......
......@@ -47,7 +47,7 @@
</template>
<script>
import { getYgdjList } from "@/api/zhcx.js";
import { getYgdjList } from "@/api/registerBook.js";
import { datas } from "./qlxxFormData.js";
export default {
data() {
......
......@@ -47,7 +47,7 @@
</template>
<script>
import { getYydjList } from "@/api/zhcx.js";
import { getYydjList } from "@/api/registerBook.js";
import { datas } from "./qlxxFormData.js";
export default {
data() {
......
......@@ -122,8 +122,7 @@
</template>
<script>
import { mapGetters } from "vuex";
import { getZdjjxxBybdcdyid } from "@/api/zhcx.js";
import { getZdjjxxBybdcdyid } from "@/api/registerBook.js";
export default {
data () {
......@@ -169,22 +168,8 @@ export default {
showGroup: false,
};
},
// computed: {
// ...mapGetters(["djbxx"]),
// },
created () {
//this.propsParam = this.$attrs;
// this.$nextTick(() => {
// });
this.loadData();
//this.$alert(this.param.bdcdyh);
// this.info = this.djbxx.zdjbxx;
// this.djzd = this.djbxx.zdjbxx.djzd;
// this.zdbhqks = this.djbxx.zdjbxx.zdbhqks;
// let widths = (this.zdbhqks.length + 1) * 180 + 110;
// this.bhqkTableWidth = widths > 745 ? widths : 745;
},
methods: {
loadData () {
......@@ -192,7 +177,6 @@ export default {
if (res.code === 200) {
this.zdjbxx = res.result.zdjbxx;
this.zdbhqks = res.result.zdbhqkList;
//this.$alert(this.zdjbxx);
if (this.zdbhqks != null && this.zdbhqks.length > 0) {
this.showGroup = true;
}
......
......@@ -15,10 +15,10 @@ export function getForm (tabName) {
form = require("@/views/workflow/components/spyj.vue");
break;
case "zdjbxx":
form = require("@/views/zhcx/djbcx/components/zdxx.vue");
form = require("@/views/registerBook/zdjbxx.vue");
break;
case "qlxx":
form = require("@/views/zhcx/djbcx/components/jsydsyq.vue");
form = require("@/views/registerBook/jsydsyq.vue");
break;
case "szxx":
form = require("@/views/workflow/components/szxx.vue");
......
<template>
<div class="bdcqldjml">
<table class="mlTable">
<tr>
<th colspan="5" class="title">
不动产权利登记目录
<font class="num">第 1 页</font>
</th>
</tr>
<tr>
<td>序号</td>
<td>不动产单元号</td>
<td>不动产类型</td>
<td>所在本数</td>
<td>备注</td>
</tr>
<tr v-for="(item, index) in data" :key="index">
<td>{{ item.xh }}</td>
<td>{{ item.bdcdyh }}</td>
<td>{{ item.bdclx }}</td>
<td>{{ item.szbs }}</td>
<td>{{ item.bz }}</td>
</tr>
</table>
</div>
</template>
<script>
import { mapGetters } from "vuex";
export default {
name: "bdcqldjml",
data() {
return {
data: [],
};
},
computed: {
...mapGetters(["djbxx"]),
},
mounted() {
this.data = this.djbxx.djml;
},
};
</script>
<style lang="scss" scoped>
.bdcqldjml {
width: 100%;
height: 702px;
background: #fff;
overflow-y: scroll;
.mlTable {
width: 640px;
margin: 0 auto;
color: #333;
border-spacing: 1px;
background-color: #333;
.title {
font-size: 28px;
line-height: 60px;
font-family: serif;
position: relative;
.num {
position: absolute;
font-size: 12px;
right: 20px;
font-family: initial;
font-weight: normal;
}
}
td,
th {
background-color: white;
line-height: 40px;
padding: 0 4px;
text-align: center;
}
}
}
</style>
<template>
<div class="bdcqljqtsx">
<div class="content">
<div class="title">不动产权利及其他事项<br />登记信息</div>
<div>
不动产单元号:
<div class="underline">{{ info.bdcdyh }}</div>
</div>
<br /><br /><br />
<div>
<div class="underline">{{ info.qllx }}</div>
登记 共
<div class="underline">{{ info.total }}</div>
条
</div>
<br /><br />
<div>
抵押权登记 共
<div class="underline">{{ info.dyaq }}</div>
条
</div>
<br />
<div>
地役权登记 共
<div class="underline">{{ info.dyiq }}</div>
条
</div>
<br />
<div>
预告登记 共
<div class="underline">{{ info.ygdj }}</div>
条
</div>
<br />
<div>
异议登记 共
<div class="underline">{{ info.yydj }}</div>
条
</div>
<br />
<div>
查封登记 共
<div class="underline">{{ info.cfdj }}</div>
条
</div>
<br />
</div>
</div>
</template>
<script>
import { mapGetters } from "vuex";
export default {
name: "bdcqljqtsx",
data () {
return {
info: {
bdcdyh: "",
qllx: "",
dyaq: 0,
dyiq: 0,
ygdj: 0,
yydj: 0,
cfdj: 0,
total: 0,
},
};
},
computed: {
...mapGetters(["djbxx"]),
},
mounted () {
this.info.bdcdyh = this.djbxx.qlname.bdcdyh;
this.info.qllx = this.djbxx.qlname.qllx;
this.djbxx.qlname?.djbPrintModelList?.length > 0 && this.djbxx.qlname.djbPrintModelList.forEach((item) => {
console.log("this.info.total", this.info.total);
this.info.total += Number(item.xh);
if (item.djlxPrint == "抵押权") {
this.info.dyaq = Number(item.xh);
} else if (item.djlxPrint == "地役权") {
this.info.dyiq = Number(item.xh);
} else if (item.djlxPrint == "预告") {
this.info.ygdj = Number(item.xh);
} else if (item.djlxPrint == "异议") {
this.info.yydj = Number(item.xh);
} else if (item.djlxPrint == "查封") {
this.info.cfdj = Number(item.xh);
}
});
},
};
</script>
<style lang="scss" scoped>
.bdcqljqtsx {
width: 100%;
height: 100%;
background: #fff;
.content {
width: 50%;
height: 100%;
margin: 0 auto;
text-align: right;
color: #333;
font-family: "Arial Negreta", "Arial Normal", "Arial", sans-serif;
font-weight: 700;
font-size: 18px;
line-height: 16px;
.title {
font-size: 32px;
text-align: center;
padding: 40px 0;
line-height: 34px;
}
.underline {
font-size: 14px;
font-weight: normal;
text-decoration: underline;
display: inline-block;
}
}
}
</style>
<template>
<div class="djbfm">
<br /><br />
<p>
<font>{{ info.sheng }}</font>
省 (区、市)
<font>{{ info.shi }}</font>
市 (区)
<font>{{ info.xian }}</font>
区 (县、市)
</p>
<p>
<font>{{ info.zhen }}</font>
街道 (乡、镇)
<font>{{ info.cun }}</font>
街坊 (村)
<font>{{ info.zu }}</font>
组
</p>
<div class="title">不动产登记簿</div>
<br />
<p>
宗地/宗海号:
<font>{{ info.zddm }}</font>
</p>
<div class="bottom">
<p>
登记机构:
<font>{{ info.djjg }}</font>
</p>
</div>
</div>
</template>
<script>
import { mapGetters } from "vuex";
export default {
name: "djbfm",
data() {
return {
info: {},
};
},
computed: {
...mapGetters(["djbxx"]),
},
mounted() {
this.info = this.djbxx.djbfm;
},
};
</script>
<style lang="scss" scoped>
.djbfm {
width: 100%;
height: 100%;
background: #fff;
border-right: 1px solid #ccc;
line-height: 45px;
text-align: center;
font-size: 18px;
font-family: serif;
position: relative;
font {
border-bottom: 1px solid #000;
display: inline-block;
padding: 0 15px;
line-height: 16px;
}
.title {
height: 40%;
display: flex;
font-size: 38px;
color: #000;
justify-content: center;
align-items: center;
}
.bottom {
position: absolute;
bottom: 0px;
text-align: center;
width: 100%;
left: 0;
height: 100px;
line-height: 100px;
p {
font-size: 28px;
}
font {
font-size: 24px;
line-height: 24px;
}
}
}
</style>
<template>
<dialogBox title="登记簿信息" width="1200px" @closeDialog="closeDialog" v-model="value" :isReset="false" :isSave="false">
<div class="content">
<div class="left">
<el-tree ref="tree" :data="treedata" :props="defaultProps" @node-click="handleNodeClick"
:default-expand-all="true" :expand-on-click-node="false" node-key="id" :default-checked-keys="[showTab]">
</el-tree>
</div>
<div class="right">
<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 djxxTable from "./djxxTable.vue";
export default {
name: "djbxxDialog",
components: {
djbfm,
zdxx,
bdcqldjml,
bdcqljqtsx,
djxxTable,
},
props: {
value: { type: Boolean, default: false },
},
data () {
return {
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",
},
],
},
],
},
],
},
],
defaultProps: {
children: "children",
label: "label",
},
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) +
")";
});
}
}
},
},
methods: {
closeDialog () {
this.$emit("input", false);
// 关闭时清空值
this.$store.dispatch("djbxx/setDjbxx", null);
},
handleNodeClick (data, node, elem) {
this.showTab = data.tabs;
this.showType = data.type ? data.type : "";
},
},
};
</script>
<style scoped lang="scss">
.content {
width: 100%;
height: 100%;
display: flex;
.left {
width: 256px;
height: 704px;
background-color: #f5f5f5;
color: #333;
border: 1px solid rgb(228, 228, 228);
}
.right {
width: calc(100% - 256px);
height: 704px;
// overflow-y: scroll;
overflow: auto;
background-color: #f5f5f5;
}
}
/deep/ .expanded.el-tree-node__expand-icon,
/deep/ .el-tree-node__expand-icon {
visibility: hidden;
}
/deep/ .el-tree-node__content {
border: 1px solid rgb(228, 228, 228);
height: 45px;
}
/deep/ .el-tree-node:focus>.el-tree-node__content {
background-color: #f5f5f5;
color: #0079fe;
border-right: 4px solid #0079fe;
}
/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>
<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";
import { getJsydsyqList } from "@/api/zhcx.js";
export default {
name: "djxxTable",
props: {
showType: "",
},
data () {
return {
checkList: ["临时", "现势", "历史"],
tableWidth: 810,
type: datas.columns(),
tableData: [],
showTableData: [],
ths: [],
showThs: [],
columns: [],
title: "",
};
},
computed: {
...mapGetters(["djbxx"]),
},
watch: {
showType: {
async handler (newVlue) {
// 清空值
this.tableData = [];
this.ths = [];
this.columns = this.type[newVlue].columns;
this.title = this.type[newVlue].title;
this.checkList = ["临时", "现势", "历史"];
this.tableWidth = 810;
let detail;
if (newVlue === "JSYDSYQ") {
let res = await getJsydsyqList({
bdcdyid: "2b33851f4edfd468ceef4d68c370bd41",
qllx: "A03",
qszt: ["1"]
})
detail = res.result;
} else {
detail = this.djbxx.detail.qlxxs[newVlue];
}
console.log(detail, 'detail');
detail.length > 0 && 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;
},
deep: 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 {
min-width: 810px;
width: 100%;
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;
width: 140px;
}
>tr:nth-child(odd) td {
background: #f2f2f2;
}
>tr:nth-child(even) td {
background: #f9f9f9;
}
td.linshi {
color: #fe9400;
}
tr>td.lishi {
color: #7f7f7f;
}
}
}
}
</style>
import filter from '@/utils/filter.js'
class data extends filter {
constructor() {
super()
}
columns () {
return [
{
prop: "qszt",
label: "权属状态",
},
{
prop: "qllxmc",
label: "权利类型",
},
{
prop: "djlxmc",
label: "登记类型",
},
{
prop: "ssywh",
label: "上手业务号",
},
{
prop: "dah",
label: "档案号",
},
{
prop: "ywh",
label: "业务号",
},
{
prop: "bdcdyh",
label: "不动产单元号",
},
{
prop: "zl",
label: "坐落",
},
{
prop: "qlrlx",
label: "权利人类型",
},
{
prop: "qlrmc",
label: "权利人",
},
{
prop: "qlrzjzl",
label: "证件种类",
},
{
prop: "qlrzjhm",
label: "证件号",
},
{
prop: "gyfs",
label: "共有情况",
},
{
prop: "mj",
label: "使用权面积(m²)",
},
{
prop: "qlxz",
label: "权利性质",
},
{
prop: "ytmc",
label: "土地用途",
},
{
prop: "syqqzsj",
label: "使用权起止时间",
},
{
prop: "tdsyqx",
label: "土地使用期限",
},
{
prop: "qdjg",
label: "取得价格(万元)",
},
{
prop: "djyy",
label: "登记原因",
},
{
prop: "bdcqzh",
label: "不动产权证号",
},
{
prop: "djsj",
label: "登记时间",
},
{
prop: "dbr",
label: "登簿人",
},
{
prop: "fj",
label: "附记",
},
]
}
}
let datas = new data()
export {
datas
}
\ No newline at end of file
<template>
<div class="djxxTable">
<div class="tableBox">
<div class="title">
{{ title }}
<div class="checkbox">
<el-checkbox-group v-model="checkList" @change="checkChange">
<el-checkbox v-for="item in qsztList" :key="item.value" :label="item.value">{{ item.label }}</el-checkbox>
</el-checkbox-group>
</div>
</div>
<div class="xxTableBox">
<table class="xxTable">
<tr v-for="(item, colindex) in columns" :key="colindex">
<td>
{{ item.label }}
</td>
<td v-for="(row, index) in tableData" :key="index" :class="[
row.qszt == '2' ? 'lishi' : '',
row.qszt == '0' ? 'linshi' : '',
item.prop == 'qszt' && row.qszt == '0' ? 'linshiIcon' : '',
]">
<div class="icon" v-if="item.prop == 'qszt' && row.qszt == '0'">
正在办理
</div>
<span v-if="item.prop == 'qszt'">
{{ getQsztName(row[item.prop]) }}
</span>
<span v-else> {{ row[item.prop] }}</span>
</td>
<td v-for="count in emptycolNum" :key="~count"></td>
</tr>
</table>
</div>
</div>
</div>
</template>
<script>
import { datas } from "./jsydsyq.js";
import { getJsydsyqList } from "@/api/zhcx.js";
export default {
data () {
return {
qsztList: [
{
value: "0",
label: "临时",
},
{
value: "1",
label: "现势",
},
{
value: "2",
label: "历史",
},
],
checkList: ["0", "1", "2"],
//传递参数
propsParam: {},
//列表数据
tableData: [],
//空列值个数
emptycolNum: 0,
//列名称对象
columns: [],
title: "建设用地使用权、宅基地使用权登记信息",
};
},
created () {
this.propsParam = this.$attrs;
console.log(this.$attrs, 'this.$attrs;');
this.columns = datas.columns();
this.loadData();
// this.$alert(datas.columns());
},
methods: {
loadData () {
//this.$alert(this.propsParam.bdcdyh);
getJsydsyqList({
bdcdyid: this.propsParam.bdcdyid,
qllx: this.propsParam.qllx,
qszt: this.checkList,
}).then((res) => {
if (res.code === 200) {
this.tableData = res.result;
this.emptycolNum = 3 - this.tableData.length;
}
});
},
checkChange () {
this.loadData();
},
getQsztName (code) {
let name = "";
for (let item of this.qsztList) {
if (item.value == code) {
name = item.label;
break;
}
}
return name;
},
},
};
</script>
<style lang="scss" scoped>
@import "./qlxxCommon.scss";
</style>
.djxxTable {
width: 100%;
height: 100%;
background: #fff;
overflow-y: scroll;
color: #333;
.tableBox {
margin: 0 auto;
display: flex;
flex-wrap: wrap;
.title {
width: 100%;
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 {
overflow-x: scroll;
width: 100%;
padding-bottom: 35px;
}
.xxTable>tr:first-child th {
width: 140px;
}
.xxTable {
border-spacing: 1px;
width: 100%;
tr>th {
border: 1px solid #ccc;
background: #F2F2F2;
color: #333333;
font-size: 16px;
height: 40px;
}
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 55px 55px;
border-style: none solid solid;
border-color: transparent transparent #fe9400;
position: absolute;
top: 0;
right: 0;
transform: rotate(-90deg);
}
.icon {
position: absolute;
top: 13px;
right: -4px;
transform: rotate(45deg);
color: #fff;
font-size: 12px;
z-index: 10;
}
tr td {
border: 1px solid #ccc;
text-align: center;
height: 40px;
padding: 4px;
font-size: 13px;
width: 140px;
}
>tr:nth-child(odd) td {
background: #f2f2f2;
}
>tr:nth-child(even) td {
background: #f9f9f9;
}
td.linshi {
color: #fe9400;
}
tr>td.lishi {
color: #7f7f7f;
}
}
}
}
\ No newline at end of file
<template>
<div class="zdxx">
<div class="tablebox">
<table cellpadding="0" cellspacing="0" class="zdxxTable">
<col width="80" />
<col width="60" />
<col width="90" />
<col width="235" />
<col width="150" />
<tr>
<td colspan="6" class="title">宗地基本信息</td>
</tr>
<tr>
<td colspan="6" class="unit" v-if="zdjbxx.mjdw == '1'">
单位：■平方米 □公顷（□亩）、万元
</td>
<td colspan="6" class="unit" v-else>
单位：□平方米 ■公顷（■亩）、万元
</td>
</tr>
<tr>
<td colspan="2">不动产类型</td>
<td colspan="4">■土地 ■房屋建筑 □构筑物 □森林、林地 □其他</td>
</tr>
<tr>
<td colspan="2">坐落</td>
<td colspan="4">{{ zdjbxx.zl }}</td>
</tr>
<tr>
<td rowspan="8" class="title2">土地状况</td>
</tr>
<tr>
<td colspan="2">宗地面积</td>
<td>{{ zdjbxx.zdmj }}</td>
<td>用途</td>
<td>{{ zdjbxx.ghytmc }}</td>
</tr>
<tr>
<td colspan="2">等级</td>
<td>{{ zdjbxx.dj }}</td>
<td>价格</td>
<td>{{ zdjbxx.jg }}</td>
</tr>
<tr>
<td colspan="2">权利类型</td>
<td>{{ zdjbxx.qllx }}</td>
<td>权利性质</td>
<td>{{ zdjbxx.qlxz }}</td>
</tr>
<tr>
<td colspan="2">权利设定方式</td>
<td>{{ zdjbxx.qlsdfs }}</td>
<td>容积率</td>
<td>{{ zdjbxx.rjl }}</td>
</tr>
<tr>
<td colspan="2">建筑密度</td>
<td>{{ zdjbxx.jzmd }}</td>
<td>建筑限高</td>
<td>{{ zdjbxx.jzxg }}</td>
</tr>
<tr>
<td colspan="2">图幅号</td>
<td>{{ zdjbxx.tfh }}</td>
<td>地籍号</td>
<td>{{ zdjbxx.djh }}</td>
</tr>
<tr>
<td colspan="2">档案号</td>
<td>{{ zdjbxx.dah }}</td>
<td>地块代码</td>
<td>{{ zdjbxx.dkdm }}</td>
</tr>
<tr>
<td colspan="2">宗地四至-东</td>
<td colspan="4">{{ zdjbxx.zdszd }}</td>
</tr>
<tr>
<td colspan="2">宗地四至-南</td>
<td colspan="4">{{ zdjbxx.zdszn }}</td>
</tr>
<tr>
<td colspan="2">宗地四至-西</td>
<td colspan="4">{{ zdjbxx.zdszx }}</td>
</tr>
<tr>
<td colspan="2">宗地四至-北</td>
<td colspan="4">{{ zdjbxx.zdszb }}</td>
</tr>
<tr>
<td class="title2" height="96">备注</td>
<td colspan="5">{{ zdjbxx.bz }}</td>
</tr>
<tr>
<td class="title2" height="96">附记</td>
<td colspan="5">{{ zdjbxx.fj }}</td>
</tr>
<tr>
<td colspan="2">状态</td>
<td colspan="2">{{ zdjbxx.zt }}</td>
<td>区县代码</td>
<td>{{ zdjbxx.qxdm }}</td>
</tr>
<tr v-show="showGroup">
<td class="title2">变化情况</td>
<td colspan="5" class="bhqk">
<div class="box">
<table cellspacing="0" cellpadding="0" :width="bhqkTableWidth">
<tr v-for="(item, index) in bhqkColumns" :key="index">
<td class="bhqkTh">{{ item.label }}</td>
<!-- <td v-for="(item2, index2) in zdbhqks" :key="index2">
{{ item2[item.prop] }}
</td> -->
</tr>
</table>
</div>
</td>
</tr>
</table>
</div>
</div>
</template>
<script>
import { mapGetters } from "vuex";
import { getZdjjxxBySLdy } from "@/api/zhcx.js";
export default {
name: "zdxx",
data () {
return {
bhqkColumns: [
{
prop: "ssywh",
label: "上手业务号",
},
{
prop: "zddm",
label: "宗地代码",
},
{
prop: "bhqzddm",
label: "变化前宗地代码",
},
{
prop: "bhnr",
label: "变化内容",
},
{
prop: "bhyy",
label: "变化原因",
},
{
prop: "djsj",
label: "登记时间",
},
{
prop: "dbr",
label: "登簿人",
},
{
prop: "fj",
label: "附记",
},
],
bhqkTableWidth: 745,
zdjbxx: {},
zdbhqks: [],
propsParam: {},
showGroup: false,
};
},
// computed: {
// ...mapGetters(["djbxx"]),
// },
created () {
this.propsParam = this.$attrs;
// this.$nextTick(() => {
// });
this.loadData();
//this.$alert(this.param.bdcdyh);
// this.info = this.djbxx.zdjbxx;
// this.djzd = this.djbxx.zdjbxx.djzd;
// this.zdbhqks = this.djbxx.zdjbxx.zdbhqks;
// let widths = (this.zdbhqks.length + 1) * 180 + 110;
// this.bhqkTableWidth = widths > 745 ? widths : 745;
},
methods: {
loadData () {
getZdjjxxBySLdy({ bsmsldy: this.propsParam.bsmSldy }).then((res) => {
if (res.code === 200) {
this.zdjbxx = res.result.zdjbxx;
this.zdbhqks = res.result.zdbhqkList;
//this.$alert(this.zdjbxx);
if (this.zdbhqks != null && this.zdbhqks.length > 0) {
this.showGroup = true;
}
}
});
},
},
};
</script>
<style lang="scss" scoped>
.zdxx {
width: 100%;
height: calc(100% - 42px);
background-color: #f5f5f5;
padding: 5px;
.tablebox {
overflow-x: auto;
width: 100%;
height: 100%;
background: #fff;
border: 1px solid rgb(228, 228, 228);
text-align: center;
padding: 4px;
overflow-y: scroll;
.zdxxTable {
width: 100%;
min-width: 900px;
color: #333;
td {
border: 1px solid rgb(228, 228, 228);
line-height: 30px;
padding: 0 4px;
}
.title {
line-height: 68px;
font-size: 20px;
}
.unit {
text-align: right;
}
.title2 {
writing-mode: vertical-lr;
letter-spacing: 6px;
}
.bhqk {
padding: 0;
.box {
width: 745px;
overflow: auto;
}
.test {}
table {
.bhqkTh {
width: 110px;
line-height: 40px;
background-color: #f5f5f5;
border: 1px solid rgb(228, 228, 228);
font-weight: bold;
}
td {
width: 180px;
}
}
}
}
}
}
</style>
......@@ -52,18 +52,11 @@
<script>
import table from "@/utils/mixin/table";
import { datas, sendThis } from "./djbcxdata";
import djbxxDialog from "./components/djbxxDialog.vue";
import {
getDjbBysearch,
} from "@/api/zhcx.js";
import { getDjbBysearch } from "@/api/zhcx.js";
import { mapGetters } from "vuex";
import axios from "axios";
export default {
name: "djbcx",
components: {
djbxxDialog,
},
mixins: [table],
mounted () {
sendThis(this);
......