Skip to content

bdc / bdcdj-web

Go to a project
Toggle navigation
Toggle navigation pinning
987e3f93 by 任超
Options

Merge branch 'master' of http://yun.pashanhoo.com:9090/bdc/bdcdj-web

2 parents 9fc3f903 f334ee31
Expand all
Inline Side-by-side
Showing 17 changed files with 1550 additions and 194 deletions
......@@ -24,10 +24,11 @@ export function getDjbfm(qlbsm) {
}
// 获取登记目录
export function getDjml(qlbsm) {
export function getBdcqldjmlByBdcdyid(data) {
return request({
url: '/zhcx/djbcx/djml/' + qlbsm,
method: 'get'
url: '/zhcx/djbcx/getBdcqldjmlByBdcdyid',
method: 'get',
params: data
})
}
......@@ -40,9 +41,27 @@ export function getZdjbxx(qlbsm) {
}
// 获取宗地信息
export function getZdjjxxBybdcdyid(data) {
return request({
url: '/zhcx/djbcx/getZdjjxxBybdcdyid',
method: 'get',
params: data
})
}
// 获取宗地信息
export function getZdjjxxBySLdy(data) {
return request({
url: '/zhcx/djbcx/getZdjjxxBySLdy',
url: '/zhcx/djbcx/getZdjjxxBybdcdyid',
method: 'get',
params: data
})
}
// 获取不动产权利及其他事项
export function getBdcqljqtsx(data) {
return request({
url: '/zhcx/djbcx/getBdcqljqtsx',
method: 'get',
params: data
})
......
......@@ -118,9 +118,8 @@ export default {
.ls-title {
padding: 16px;
background: linear-gradient(2deg, #00CCFF, transparent);
color: #ffffff;
background: linear-gradient(-2deg,#409EFF, transparent)
}
.ls-title .svg-icon {
......
<template>
<div class="bdcqldjml">
<table class="mlTable">
<tr>
<th colspan="5" class="title">不动产权利登记目录</th>
</tr>
<tr>
<td>序号</td>
<td>不动产单元号</td>
<td>不动产类型</td>
<td>所在本数</td>
<td>备注</td>
</tr>
<tr v-for="(item, index) in bdcqlml" :key="index">
<td>{{ index + 1 }}</td>
<td>{{ item.bdcdyh }}</td>
<td>{{ item.bdclx }}</td>
<td>{{ item.szbs }}</td>
<td>{{ item.bz }}</td>
</tr>
</table>
</div>
</template>
<script>
import { getBdcqldjmlByBdcdyid } from "@/api/zhcx.js";
export default {
data() {
return {
bdcqlml: [],
propsParam: this.$attrs,
};
},
mounted() {
getBdcqldjmlByBdcdyid({ bdcdyid: this.propsParam.bdcdyid }).then((res) => {
if (res.code === 200) {
this.bdcqlml = res.result;
}
});
},
};
</script>
<style lang="scss" scoped>
.bdcqldjml {
width: 100%;
height: 100%;
background: #fff;
overflow-y: scroll;
.mlTable {
width: 90%;
margin: 0 auto;
color: #333;
border-spacing: 1px;
background-color: #333;
.title {
font-size: 20px;
line-height: 60px;
font-family: serif;
position: relative;
}
td,
th {
background-color: white;
line-height: 30px;
padding: 0 4px;
text-align: center;
}
}
}
</style>
<template>
<div class="bdcqljqtsx">
<div class="content">
<div class="title">不动产权利及其他事项<br />登记信息</div>
<div>
不动产单元号:
<div class="underline">{{ propsParam.bdcdyh }}</div>
</div>
<br /><br /><br />
<div>
<div class="underline">{{ qlxxList.ztqlmc }}</div>
登记 共
<div class="underline">{{ qlxxList.ztql.total }}</div>
条
</div>
<br /><br />
<div>
抵押权登记 共
<div class="underline">{{ qlxxList.diyaq.total }}</div>
条
</div>
<br />
<div>
地役权登记 共
<div class="underline">{{ qlxxList.diyiq.total }}</div>
条
</div>
<br />
<div>
预告登记 共
<div class="underline">{{ qlxxList.ygdj.total }}</div>
条
</div>
<br />
<div>
异议登记 共
<div class="underline">{{ qlxxList.yydj.total }}</div>
条
</div>
<br />
<div>
查封登记 共
<div class="underline">{{ qlxxList.cfdj.total }}</div>
条
</div>
<br />
</div>
</div>
</template>
<script>
import { getBdcqljqtsx } from "@/api/zhcx.js";
export default {
name: "bdcqljqtsx",
data() {
return {
//传递参数
propsParam: this.$attrs,
qlxxList: "",
};
},
mounted() {
getBdcqljqtsx({
bdcdyid: this.propsParam.bdcdyid,
bdcdyh: this.propsParam.bdcdyh,
}).then((res) => {
if (res.code === 200) {
this.qlxxList = res.result;
}
});
},
};
</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="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 { getJsydsyqList } from "@/api/zhcx.js";
import { datas } from "./qlxxFormData.js";
export default {
data() {
return {
title: "查封登记信息",
qsztList: datas.columns().qsztList,
checkList: datas.columns().checkList,
//传递参数
propsParam: this.$attrs,
//列表数据
tableData: [],
//空列值个数
emptycolNum: 0,
//列名称对象
columns: datas.columns().CFDJ,
};
},
created() {
this.loadData();
},
methods: {
loadData() {
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>
<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 { getJsydsyqList } from "@/api/zhcx.js";
import { datas } from "./qlxxFormData.js";
export default {
data() {
return {
title: "抵押权登记信息",
qsztList: datas.columns().qsztList,
checkList: datas.columns().checkList,
//传递参数
propsParam: this.$attrs,
//列表数据
tableData: [],
//空列值个数
emptycolNum: 0,
//列名称对象
columns: datas.columns().DYAQ,
};
},
created() {
this.loadData();
},
methods: {
loadData() {
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>
<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 { getJsydsyqList } from "@/api/zhcx.js";
import { datas } from "./qlxxFormData.js";
export default {
data() {
return {
title: "地役权登记信息",
qsztList: datas.columns().qsztList,
checkList: datas.columns().checkList,
//传递参数
propsParam: this.$attrs,
//列表数据
tableData: [],
//空列值个数
emptycolNum: 0,
//列名称对象
columns: datas.columns().DYIQ,
};
},
created() {
this.loadData();
},
methods: {
loadData() {
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>
<template>
<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">
<component :is="componentTag" v-bind="currentSelectProps" />
</div>
</div>
</template>
<script>
import { getBdcqljqtsx } from "@/api/zhcx.js";
import axios from "axios";
export default {
data() {
return {
//接收参数
// propsParam: this.$attrs,
//左侧目录
catalog: {},
//选择加载哪一个组件
componentTag: "JSYDSYQ",
//子组件接收参数
currentSelectProps: {},
//左侧树形结构数据
treedata: [],
bdcqljqtsxData: [],
defaultProps: {
children: "children",
label: "label",
},
showTab: "bdcqldjml", // 选中状态,根据表格中权利类型判断
};
},
props: ["formData"],
mounted() {
this.loadData();
},
methods: {
loadData() {
getBdcqljqtsx({
bdcdyid: this.formData.bdcdyid,
bdcdyh: this.formData.bdcdyh,
}).then((res) => {
if (res.code === 200) {
this.loadLeftMenu(res.result);
}
});
//this.$alert(this.bdcqlml);
this.currentSelectProps = {
bdcdyid: this.formData.bdcdyid,
bdcdyh: this.formData.bdcdyh,
qllx: this.formData.qllx,
bsmQlxx: this.formData.bsmQlxx,
};
this.componentTag = (r) =>
require.ensure([], () =>
r(require("@/views/registerBook/jsydsyq.vue"))
);
},
loadLeftMenu(qlxxData) {
this.treedata.push({
id: "djbfm",
form: "djbfm.vue",
label: "登记簿封面",
children: [],
});
this.treedata[0].children.push({
id: "zdjbxx",
form: "zdjbxx.vue",
label: "宗地基本信息\n (" + this.formData.bdcdyh.substring(0, 19) + ")",
children: [],
});
this.treedata[0].children.push({
id: "bdcqldjml",
form: "bdcqldjml.vue",
label: "不动产权利登记目录",
children: [],
});
this.treedata[0].children[1].children.push({
id: "bdcqljqtsx",
form: "bdcqljqtsx.vue",
label:
"不动产权利及其他事项\n (" + this.formData.bdcdyh.slice(19) + ")",
children: [],
});
this.treedata[0].children[1].children[0].children.push({
id: "jsydsyq",
form: "jsydsyq.vue",
label:
qlxxData.ztqlmc +
"(临:" +
qlxxData.ztql.linShi +
"，现:" +
qlxxData.ztql.xianShi +
"，历:" +
qlxxData.ztql.liShi +
")",
});
this.treedata[0].children[1].children[0].children.push({
id: "diyaq",
form: "diyaq.vue",
label:
"抵押权(临:" +
qlxxData.diyaq.linShi +
"，现:" +
qlxxData.diyaq.xianShi +
"，历:" +
qlxxData.diyaq.liShi +
")",
});
this.treedata[0].children[1].children[0].children.push({
id: "diyiq",
form: "diyiq.vue",
label:
"地役权(临:" +
qlxxData.diyiq.linShi +
"，现:" +
qlxxData.diyiq.xianShi +
"，历:" +
qlxxData.diyiq.liShi +
")",
});
this.treedata[0].children[1].children[0].children.push({
id: "ygdj",
form: "ygdj.vue",
label:
"预告登记(临:" +
qlxxData.ygdj.linShi +
"，现:" +
qlxxData.ygdj.xianShi +
"，历:" +
qlxxData.ygdj.liShi +
")",
});
this.treedata[0].children[1].children[0].children.push({
id: "yydj",
form: "yydj.vue",
label:
"异议登记(临:" +
qlxxData.yydj.linShi +
"，现:" +
qlxxData.yydj.xianShi +
"，历:" +
qlxxData.yydj.liShi +
")",
});
this.treedata[0].children[1].children[0].children.push({
id: "cfdj",
form: "cfdj.vue",
label:
"查封登记(临:" +
qlxxData.cfdj.linShi +
"，现:" +
qlxxData.cfdj.xianShi +
"，历:" +
qlxxData.cfdj.liShi +
")",
});
},
handleNodeClick(data, node, elem) {
this.componentTag = (r) =>
require.ensure([], () =>
r(require("@/views/registerBook/" + data.form))
);
},
},
};
</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;
border: 1px solid rgb(228, 228, 228);
}
}
/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="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 { getDjbfm } from "@/api/zhcx.js";
export default {
data() {
return {
//传递参数
propsParam: this.$attrs,
info: {},
};
},
mounted() {
this.loadData();
},
methods: {
loadData() {
getDjbfm(
this.propsParam.bsmQlxx
).then((res) => {
if (res.code === 200) {
this.info = res.result;
}
});
},
},
};
</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>
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
......@@ -5,7 +5,12 @@
{{ 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
v-for="item in qsztList"
:key="item.value"
:label="item.value"
>{{ item.label }}</el-checkbox
>
</el-checkbox-group>
</div>
</div>
......@@ -15,11 +20,15 @@
<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' : '',
]">
<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>
......@@ -38,47 +47,29 @@
</template>
<script>
import { datas } from "./jsydsyq.js";
import { getJsydsyqList } from "@/api/zhcx.js";
import { datas } from "./qlxxFormData.js";
export default {
data () {
data() {
return {
qsztList: [
{
value: "0",
label: "临时",
},
{
value: "1",
label: "现势",
},
{
value: "2",
label: "历史",
},
],
checkList: ["0", "1", "2"],
title: "建设用地使用权、宅基地使用权登记信息",
qsztList: datas.columns().qsztList,
checkList: datas.columns().checkList,
//传递参数
propsParam: {},
propsParam: this.$attrs,
//列表数据
tableData: [],
//空列值个数
emptycolNum: 0,
emptycolNum: datas.columns().emptycolNum,
//列名称对象
columns: [],
title: "建设用地使用权、宅基地使用权登记信息",
columns: datas.columns().JSYDSYQ,
};
},
created () {
this.propsParam = this.$attrs;
console.log(this.$attrs, 'this.$attrs;');
this.columns = datas.columns();
created() {
this.loadData();
// this.$alert(datas.columns());
},
methods: {
loadData () {
//this.$alert(this.propsParam.bdcdyh);
loadData() {
getJsydsyqList({
bdcdyid: this.propsParam.bdcdyid,
qllx: this.propsParam.qllx,
......@@ -86,14 +77,19 @@ export default {
}).then((res) => {
if (res.code === 200) {
this.tableData = res.result;
this.emptycolNum = 3 - this.tableData.length;
// this.emptycolNum -= this.tableData.length;
if (this.tableData.length < this.emptycolNum) {
this.emptycolNum -= this.tableData.length;
}else{
this.emptycolNum = 0;
}
}
});
},
checkChange () {
checkChange() {
this.loadData();
},
getQsztName (code) {
getQsztName(code) {
let name = "";
for (let item of this.qsztList) {
if (item.value == code) {
......@@ -108,5 +104,5 @@ export default {
</script>
<style lang="scss" scoped>
// @import "./qlxxCommon.scss";
@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="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 { getJsydsyqList } from "@/api/zhcx.js";
import { datas } from "./qlxxFormData.js";
export default {
data() {
return {
title: "预告登记信息",
qsztList: datas.columns().qsztList,
checkList: datas.columns().checkList,
//传递参数
propsParam: this.$attrs,
//列表数据
tableData: [],
//空列值个数
emptycolNum: 0,
//列名称对象
columns: datas.columns().YGDJ,
};
},
created() {
this.loadData();
},
methods: {
loadData() {
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>
<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 { getJsydsyqList } from "@/api/zhcx.js";
import { datas } from "./qlxxFormData.js";
export default {
data() {
return {
title: "异议登记信息",
qsztList: datas.columns().qsztList,
checkList: datas.columns().checkList,
//传递参数
propsParam: this.$attrs,
//列表数据
tableData: [],
//空列值个数
emptycolNum: 0,
//列名称对象
columns: datas.columns().YYDJ,
};
},
created() {
this.loadData();
},
methods: {
loadData() {
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>
<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 { getZdjjxxBybdcdyid } from "@/api/zhcx.js";
export default {
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:this.$attrs,
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 () {
getZdjjxxBybdcdyid({bdcdyid:this.propsParam.bdcdyid}).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>
......@@ -122,44 +122,59 @@ export default {
},
// 高级查询
moreQueryClick () { },
openDialog (scroll) {
//debugger;
let _this = this;
let bsm = scroll.bsmQlxx;
axios
.all([
getDjbfm(bsm),
getDjml(bsm),
getZdjbxx(bsm),
getQlname(bsm),
getDetail(bsm),
])
.then(([djbfm, djml, zdjbxx, qlname, detail]) => {
let 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;
openDialog (scroll) {
this.$popup({
titleStyle:"left",
title: '提示', // 弹窗标题
editItem: 'registerBook/djbFrame', // 弹窗内容
formData: scroll,
width:"1220px",
height:"800px",
// cancelText: '取消摆烂', // 右边按钮文本
// confirmText: '确定点击', //左边按钮文本
cancel: () => {
console.log('取消回调')
},
confirm: () => {
console.log('确认回调')
}
})
// let _this = this;
// let bsm = scroll.bsmQlxx;
// axios
// .all([
// getDjbfm(bsm),
// getDjml(bsm),
// getZdjbxx(bsm),
// getQlname(bsm),
// getDetail(bsm),
// ])
// .then(([djbfm, djml, zdjbxx, qlname, detail]) => {
// let 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 (scroll.qllxmc == "国有建设用地使用权") {
this.$refs.djbxxDialog.showType = "JSYDSYQ";
} else if (scroll.qllxmc == "抵押权") {
this.$refs.djbxxDialog.showType = "DYAQ";
} else if (scroll.qllxmc == "地役权") {
this.$refs.djbxxDialog.showType = "DYIQ";
} else if (scroll.qllxmc == "预告登记") {
this.$refs.djbxxDialog.showType = "YGDJ";
} else if (scroll.qllxmc == "异议登记") {
this.$refs.djbxxDialog.showType = "YYDJ";
} else if (scroll.qllxmc == "查封登记") {
this.$refs.djbxxDialog.showType = "CFDJ";
}
});
// // 弹窗打开,自动切换到对应的登记类型
// if (scroll.qllxmc == "国有建设用地使用权") {
// this.$refs.djbxxDialog.showType = "JSYDSYQ";
// } else if (scroll.qllxmc == "抵押权") {
// this.$refs.djbxxDialog.showType = "DYAQ";
// } else if (scroll.qllxmc == "地役权") {
// this.$refs.djbxxDialog.showType = "DYIQ";
// } else if (scroll.qllxmc == "预告登记") {
// this.$refs.djbxxDialog.showType = "YGDJ";
// } else if (scroll.qllxmc == "异议登记") {
// this.$refs.djbxxDialog.showType = "YYDJ";
// } else if (scroll.qllxmc == "查封登记") {
// this.$refs.djbxxDialog.showType = "CFDJ";
// }
// });
},
},
};
......