Skip to content

bdc / bdcdj-web

Go to a project
Toggle navigation
Toggle navigation pinning
4d6dfe6f by 吴蕾
Options

登记簿弹窗样式编写

1 parent 32b9f044
Inline Side-by-side
Showing 14 changed files with 1017 additions and 19 deletions
import dialogBox from '@/components/DialogBox/dialogBox.vue'
import dialogBox from '@/components/dialogBox/dialogBox.vue'
import lbTable from '@/components/lb-table/lb-table.vue'
import Theme from '@/components/Theme/theme.vue'
export default {
......
<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>{{ index + 1 }}</td>
<td>{{ item.bdcdyh }}</td>
<td>{{ item.bdclx }}</td>
<td>{{ item.szbs }}</td>
<td>{{ item.bz }}</td>
</tr>
</table>
</div>
</template>
<script>
export default {
name: "bdcqldjml",
data() {
return {
data: [
{
bdcdyh: "370205004005GB10030W00000000",
bdclx: "土地",
szbs: "1",
bz: "",
},
{
bdcdyh: "370205004005GB10030W00000000",
bdclx: "土地",
szbs: "1",
bz: "",
},
{
bdcdyh: "370205004005GB10030W00000000",
bdclx: "土地",
szbs: "1",
bz: "",
},
{
bdcdyh: "370205004005GB10030W00000000",
bdclx: "土地",
szbs: "1",
bz: "",
},
{
bdcdyh: "370205004005GB10030W00000000",
bdclx: "土地",
szbs: "1",
bz: "",
},
{
bdcdyh: "370205004005GB10030W00000000",
bdclx: "土地",
szbs: "1",
bz: "",
},
{
bdcdyh: "370205004005GB10030W00000000",
bdclx: "土地",
szbs: "1",
bz: "",
},
{
bdcdyh: "370205004005GB10030W00000000",
bdclx: "土地",
szbs: "1",
bz: "",
},
{
bdcdyh: "370205004005GB10030W00000000",
bdclx: "土地",
szbs: "1",
bz: "",
},
{
bdcdyh: "370205004005GB10030W00000000",
bdclx: "土地",
szbs: "1",
bz: "",
},
{
bdcdyh: "370205004005GB10030W00000000",
bdclx: "土地",
szbs: "1",
bz: "",
},
{
bdcdyh: "370205004005GB10030W00000000",
bdclx: "土地",
szbs: "1",
bz: "",
},
{
bdcdyh: "370205004005GB10030W00000000",
bdclx: "土地",
szbs: "1",
bz: "",
},
{
bdcdyh: "370205004005GB10030W00000000",
bdclx: "土地",
szbs: "1",
bz: "",
},
{
bdcdyh: "370205004005GB10030W00000000",
bdclx: "土地",
szbs: "1",
bz: "",
},
{
bdcdyh: "370205004005GB10030W00000000",
bdclx: "土地",
szbs: "1",
bz: "",
},
],
};
},
};
</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: 2px;
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">440300 002109 GB00004 F00020001</div>
</div>
<br /><br /><br />
<div>
<div class="underline">国有建设用地使用权和房屋所有权</div>
登记 共
<div class="underline">9</div>
条
</div><br /><br />
<div>
抵押权登记 共
<div class="underline">3</div>
条
</div><br />
<div>
地役权登记 共
<div class="underline">3</div>
条
</div><br />
<div>
预告登记 共
<div class="underline">3</div>
条
</div><br />
<div>
异议登记 共
<div class="underline">3</div>
条
</div><br />
<div>
查封登记 共
<div class="underline">3</div>
条
</div>
<br />
</div>
</div>
</template>
<script>
export default {
name: "bdcqljqtsx",
data() {
return {};
},
};
</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>查封登记</div>
</template>
<script>
export default {
name: "cfdj",
data() {
return {};
},
};
</script>
<style lang="scss" scoped>
</style>
<template>
<div class="djbfm">
<br /><br />
<p>
<font>{{ data.province }}</font>
省 (区、市)
<font>{{ data.city }}</font>
市 (区)
<font>{{ data.area }}</font>
区 (县、市)
</p>
<p>
<font>{{ data.street }}</font>
街道 (乡、镇)
<font>{{ data.village }}</font>
街坊 (村)
<font style="width: 100px">{{ data.group }}</font>
组
</p>
<div class="title">不动产登记簿</div>
<br>
<p>
宗地/宗海号:
<font>{{ data.zdzhh }}</font>
</p>
<div class="bottom">
<p>
登记机构:
<font>{{ data.registration }}</font>
</p>
</div>
</div>
</template>
<script>
export default {
name: "djbfm",
data() {
return {
data: {
province: "A",
city: "B",
area: "C",
street: "兴隆路",
village: "兴隆",
group: "",
zdzhh: "370205004005GB10030",
registration: "B市国土资源局",
},
};
},
};
</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;
p {
}
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
: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"></components>
</div>
</div>
</dialogBox>
</template>
<script>
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";
export default {
name: "djbxxDialog",
components: {
djbfm,
zdxx,
bdcqldjml,
bdcqljqtsx,
gyjsydsyq,
dyaq,
dyiq,
ygdj,
yydj,
cfdj,
},
props: {
value: { type: Boolean, default: false },
},
data() {
return {
treedata: [
{
id: "djbfm",
label: "登记簿封面",
children: [
{
id: "zdxx",
label: "宗地信息",
},
{
id: "bdcqldjml",
label: "不动产权利登记目录",
children: [
{
id: "bdcqljqtsx",
label: "不动产权利及其他事项",
children: [
{
id: "gyjsydsyq",
label: "国有建设用地使用权(临:0，现:0，历:0)",
},
{
id: "dyaq",
label: "抵押权(临:0，现:0，历:0)",
},
{
id: "dyiq",
label: "地役权(临:0，现:0，历:0)",
},
{
id: "ygdj",
label: "预告登记(临:0，现:0，历:0)",
},
{
id: "yydj",
label: "异议登记(临:0，现:0，历:0)",
},
{
id: "cfdj",
label: "查封登记(临:0，现:0，历:0)",
},
],
},
],
},
],
},
],
defaultProps: {
children: "children",
label: "label",
},
showTab: "bdcqljqtsx", // 选中状态,根据表格中权利类型判断
};
},
methods: {
submitForm() {
this.$emit("input", false);
},
closeDialog() {
this.$emit("input", false);
},
handleNodeClick(data) {
console.log("1111111111", data);
this.showTab = data.id;
},
},
};
</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;
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;
}
</style>
<template>
<div>抵押权</div>
</template>
<script>
export default {
name: "dyaq",
data() {
return {};
},
};
</script>
<style lang="scss" scoped>
</style>
<template>
<div>地役权</div>
</template>
<script>
export default {
name: "dyiq",
data() {
return {};
},
};
</script>
<style lang="scss" scoped>
</style>
<template>
<div>国有建设用地使用权</div>
</template>
<script>
export default {
name: "gyjsydsyq",
data() {
return {};
},
};
</script>
<style lang="scss" scoped>
</style>
<template>
<div>预告登记</div>
</template>
<script>
export default {
name: "ygdj",
data() {
return {};
},
};
</script>
<style lang="scss" scoped>
</style>
<template>
<div>异议登记</div>
</template>
<script>
export default {
name: "yydj",
data() {
return {};
},
};
</script>
<style lang="scss" scoped>
</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">单位：■平方米 □公顷（□亩）、万元</td>
</tr>
<tr>
<td colspan="2">不动产类型</td>
<td colspan="4">■土地 ■房屋建筑 □构筑物 □森林、林地 □其他</td>
</tr>
<tr>
<td colspan="2">坐落</td>
<td colspan="4"></td>
</tr>
<tr>
<td rowspan="8" class="title2">土地状况</td>
</tr>
<tr>
<td colspan="2">宗地面积</td>
<td></td>
<td>用途</td>
<td></td>
</tr>
<tr>
<td colspan="2">等级</td>
<td></td>
<td>价格</td>
<td></td>
</tr>
<tr>
<td colspan="2">权利类型</td>
<td></td>
<td>权利性质</td>
<td></td>
</tr>
<tr>
<td colspan="2">权利设定方式</td>
<td></td>
<td>容积率</td>
<td></td>
</tr>
<tr>
<td colspan="2">建筑密度</td>
<td></td>
<td>建筑限高</td>
<td></td>
</tr>
<tr>
<td colspan="2">图幅号</td>
<td></td>
<td>地籍号</td>
<td></td>
</tr>
<tr>
<td colspan="2">档案号</td>
<td></td>
<td>地块代码</td>
<td></td>
</tr>
<tr>
<td colspan="2">宗地四至-东</td>
<td colspan="4"></td>
</tr>
<tr>
<td colspan="2">宗地四至-南</td>
<td colspan="4"></td>
</tr>
<tr>
<td colspan="2">宗地四至-西</td>
<td colspan="4"></td>
</tr>
<tr>
<td colspan="2">宗地四至-北</td>
<td colspan="4"></td>
</tr>
<tr>
<td class="title2" height="96">备注</td>
<td colspan="5"></td>
</tr>
<tr>
<td class="title2" height="96">附记</td>
<td colspan="5"></td>
</tr>
<tr>
<td colspan="2">状态</td>
<td colspan="2"></td>
<td>区县代码</td>
<td></td>
</tr>
<tr>
<td class="title2">变化情况</td>
<td colspan="5" class="bhqk">
<div class="box">
<table cellspacing="0" cellpadding="0" :width="bhqkTableWidth">
<tr>
<td class="bhqkTh">上手业务号</td>
<td>20191230048</td>
<td>20191230048</td>
<td>20191230048</td>
<td>20191230048</td>
<td>20191230048</td>
</tr>
<tr>
<td class="bhqkTh">宗地代码</td>
<td>610100008004GB00001</td>
<td>610100008004GB00001</td>
<td>610100008004GB00001</td>
<td>610100008004GB00001</td>
<td>610100008004GB00001</td>
</tr>
<tr>
<td class="bhqkTh">变化前宗地代码</td>
<td>610100008004GB00001</td>
<td>610100008004GB00001</td>
<td>610100008004GB00001</td>
<td>610100008004GB00001</td>
<td>610100008004GB00001</td>
</tr>
<tr>
<td class="bhqkTh">变化内容</td>
<td>土地面积1000改为2000</td>
<td>土地面积1000改为2000</td>
<td>土地面积1000改为2000</td>
<td>土地面积1000改为2000</td>
<td>土地面积1000改为2000</td>
</tr>
<tr>
<td class="bhqkTh">变化原因</td>
<td>因某某原因</td>
<td>因某某原因</td>
<td>因某某原因</td>
<td>因某某原因</td>
<td>因某某原因</td>
</tr>
<tr>
<td class="bhqkTh">登记时间</td>
<td>2008年3月11日</td>
<td>2008年3月11日</td>
<td>2008年3月11日</td>
<td>2008年3月11日</td>
<td>2008年3月11日</td>
</tr>
<tr>
<td class="bhqkTh">登簿人</td>
<td>路**</td>
<td>路**</td>
<td>路**</td>
<td>路**</td>
<td>路**</td>
</tr>
<tr>
<td class="bhqkTh">附记</td>
<td>2014年10月21日办理房屋首次登记"</td>
<td>2014年10月21日办理房屋首次登记"</td>
<td>2014年10月21日办理房屋首次登记"</td>
<td>2014年10月21日办理房屋首次登记"</td>
<td>2014年10月21日办理房屋首次登记"</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</div>
</div>
</template>
<script>
export default {
name: "zdxx",
data() {
return {
bhqkColumns: [
"上手业务号",
"宗地代码",
"变化前宗地代码",
"变化内容",
"变化原因",
"登记时间",
"登簿人",
"附记",
],
bhqkData: [
{
ssywh: "20191230048",
zddm: "610100008004GB00001",
bhqzddm: "610100008004GB00001",
bhnr: "土地面积1000改为2000",
bhyy: "因某某原因",
djsj: "2008年3月11日",
dbr: "路**",
fj: "2014年10月21日办理房屋首次登记",
},
{
ssywh: "20191230048",
zddm: "610100008004GB00001",
bhqzddm: "610100008004GB00001",
bhnr: "土地面积1000改为2000",
bhyy: "因某某原因",
djsj: "2008年3月11日",
dbr: "路**",
fj: "2014年10月21日办理房屋首次登记",
},
{
ssywh: "20191230048",
zddm: "610100008004GB00001",
bhqzddm: "610100008004GB00001",
bhnr: "土地面积1000改为2000",
bhyy: "因某某原因",
djsj: "2008年3月11日",
dbr: "路**",
fj: "2014年10月21日办理房屋首次登记",
},
{
ssywh: "20191230048",
zddm: "610100008004GB00001",
bhqzddm: "610100008004GB00001",
bhnr: "土地面积1000改为2000",
bhyy: "因某某原因",
djsj: "2008年3月11日",
dbr: "路**",
fj: "2014年10月21日办理房屋首次登记",
},
],
bhqkTableWidth: 744,
};
},
mounted() {
this.bhqkTableWidth = (this.bhqkData.length + 1) * 180 + 110;
},
};
</script>
<style lang="scss" scoped>
.zdxx {
width: 100%;
height: 100%;
background-color: #f5f5f5;
padding: 10px 25px;
.tablebox {
width: 100%;
height: 100%;
background: #fff;
border: 1px solid rgb(228, 228, 228);
text-align: center;
padding: 4px;
overflow-y: scroll;
.zdxxTable {
width: 100%;
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: 744px;
overflow-x: scroll;
}
.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>
......@@ -6,27 +6,52 @@
<el-row>
<el-col :span="5">
<el-form-item label="权利类型">
<el-select v-model="queryForm.qllx" filterable clearable placeholder="请选择权利类型">
<el-option v-for="item in qllxs" :key="item.value" :label="item.label" :value="item.value">
<el-select
v-model="queryForm.qllx"
filterable
clearable
placeholder="请选择权利类型"
>
<el-option
v-for="item in qllxs"
:key="item.value"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="5">
<el-form-item label="不动产单元号">
<el-input placeholder="请输入不动产单元号" v-model="queryForm.bdcdyh" clearable class="width200px">
<el-input
placeholder="请输入不动产单元号"
v-model="queryForm.bdcdyh"
clearable
class="width200px"
>
</el-input>
</el-form-item>
</el-col>
<el-col :span="5">
<el-form-item label="不动产权证号">
<el-input placeholder="请输入不动产权证号" v-model="queryForm.bdcqzh" clearable class="width200px">
<el-input
placeholder="请输入不动产权证号"
v-model="queryForm.bdcqzh"
clearable
class="width200px"
>
</el-input>
</el-form-item>
</el-col>
<el-col :span="5">
<el-form-item label="业务号">
<el-input placeholder="请输入业务号" v-model="queryForm.ywh" clearable class="width200px">
<el-input
placeholder="请输入业务号"
v-model="queryForm.ywh"
clearable
class="width200px"
>
</el-input>
</el-form-item>
</el-col>
......@@ -42,24 +67,36 @@
</div>
<!-- 表格 -->
<div class="from-clues-content">
<lb-table :page-size="pageData.size" @sort-change="handleSort" :current-page.sync="pageData.current"
:total="pageData.total" @selection-change="handleSelectionChange" @size-change="handleSizeChange"
@p-current-change="handleCurrentChange" :column="tableData.columns" :data="tableData.data">
<lb-table
:page-size="pageData.size"
@sort-change="handleSort"
:current-page.sync="pageData.current"
:total="pageData.total"
@selection-change="handleSelectionChange"
@size-change="handleSizeChange"
@p-current-change="handleCurrentChange"
:column="tableData.columns"
:data="tableData.data"
>
</lb-table>
</div>
<djbxxDialog v-model="isDialog" ref="djbxxDialog"/>
</div>
</template>
<script>
import table from "@/utils/mixin/table";
import { datas, sendThis } from "./djbcxdata";
import djbxxDialog from "./components/djbxxDialog.vue";
export default {
name: "djbcx",
components: {},
components: {
djbxxDialog
},
mixins: [table],
mounted () {
mounted() {
sendThis(this);
},
data () {
data() {
return {
queryForm: {
qllx: "",
......@@ -72,34 +109,65 @@ export default {
size: 10,
total: 2,
},
ywlys: datas.ywlys(),
tableData: {
columns: datas.columns(),
data: [
{
qszt: "1",
slsj: "2022-5-12",
qllx: "预告买卖登记"
},
{
qszt: "2",
slsj: "2022-5-13",
qllx: "查封登记"
},
{
qszt: "3",
slsj: "2022-5-13",
qllx: "预告买卖登记"
},
],
},
qllxs: [],
isDialog: false,
};
},
methods: {
// 初始化数据
fetchData () { },
handleSort (name, sort) {
fetchData() {},
handleSort(name, sort) {
console.log(name, sort);
},
openDialog () {
console.log(999999999999999);
queryClick(){
},
moreQueryClick(){},
openDialog(scope) {
this.isDialog = true;
// if(scope.row.qllx == '预告买卖登记'){
// this.$refs.djbxxDialog.showTab = 'ygdj'
// }
// else if(scope.row.qllx == '查封登记'){
// this.$refs.djbxxDialog.showTab = 'cfdj'
// }
},
},
};
</script>
<style scoped lang="scss">
@import "~@/styles/public.scss";
.icon-circle {
position: relative;
}
.icon-circle::before {
content: "";
width: 4px;
height: 4px;
border-radius: 50%;
background: #000;
top: 0px;
left: 0px;
}
</style>
......
......@@ -18,9 +18,28 @@ class data extends filter {
{
label: "权属状态",
render: (h, scope) => {
let text = '';
let color=""
let obj = {
"1": {
text:'现势',
color:'#4BD863'
},
"2": {
text:'历史',
color:'#AAAAAA'
},
"3": {
text: '临时',
color: '#FE9400'
}
}
text = obj[scope.row.qszt].text
color = obj[scope.row.qszt].color
return (
<div>
<span>{scope.row.qszt}</span>
<span style={`color:${color}`}>●</span>
<span >{ text }</span>
</div>
)
}
......