Skip to content

bdc / bdcdj-web

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

修改登记簿内容

1 parent b15d76ba
Inline Side-by-side
Showing 26 changed files with 118 additions and 2143 deletions
1 import request from '@/utils/request'
2 /*
3 登记簿详情页
4 */
5
6 // 获取登记封面
7 export function getDjbfm(data) {
8 return request({
9 url: '/djbDetail/getDjbFm',
10 method: 'get',
11 params: data
12 })
13 }
14
15 // 获取登记目录
16 export function getBdcqldjmlByBdcdyid(data) {
17 return request({
18 url: '/djbDetail/getBdcqldjmlByBdcdyid',
19 method: 'get',
20 params: data
21 })
22 }
23
24 // 获取宗地信息
25 export function getZdjjxxBybdcdyid(data) {
26 return request({
27 url: '/djbDetail/getZdjjxxBybdcdyid',
28 method: 'get',
29 params: data
30 })
31 }
32
33 // 根据受理单元标识，获取宗地信息
34 export function getZdjjxxBySLdy(data) {
35 return request({
36 url: '/djbDetail/getZdjjxxBySLdy',
37 method: 'get',
38 params: data
39 })
40 }
41
42 // 获取不动产权利及其他事项
43 export function getBdcqljqtsx(data) {
44 return request({
45 url: '/djbDetail/getBdcqljqtsx',
46 method: 'get',
47 params: data
48 })
49 }
50
51 // 获取建设用地使用权
52 export function getJsydsyqList(data) {
53 return request({
54 url: '/djbDetail/getJsydsyqList',
55 method: 'post',
56 data
57 })
58 }
59 // 获取抵押权
60 export function getDiyaqList(data) {
61 return request({
62 url: '/djbDetail/getDiyaqList',
63 method: 'post',
64 data
65 })
66 }
67 // 获取地役权
68 export function getDiyiqList(data) {
69 return request({
70 url: '/djbDetail/getDiyiqList',
71 method: 'post',
72 data
73 })
74 }
75 // 获取预告登记
76 export function getYgdjList(data) {
77 return request({
78 url: '/djbDetail/getYgdjList',
79 method: 'post',
80 data
81 })
82 }
83 // 获取异议登记
84 export function getYydjList(data) {
85 return request({
86 url: '/djbDetail/getYydjList',
87 method: 'post',
88 data
89 })
90 }
91 // 获取查封登记
92 export function getCfdjList(data) {
93 return request({
94 url: '/djbDetail/getCfdjList',
95 method: 'post',
96 data
97 })
98 }
...@@ -23,7 +23,7 @@ ...@@ -23,7 +23,7 @@
23 </template> 23 </template>
24 24
25 <script> 25 <script>
26 import { getBdcqldjmlByBdcdyid } from "@/api/zhcx.js"; 26 import { getBdcqldjmlByBdcdyid } from "@/api/registerBook.js";
27 export default { 27 export default {
28 data() { 28 data() {
29 return { 29 return {
......
...@@ -49,7 +49,7 @@ ...@@ -49,7 +49,7 @@
49 </template> 49 </template>
50 50
51 <script> 51 <script>
52 import { getBdcqljqtsx } from "@/api/zhcx.js"; 52 import { getBdcqljqtsx } from "@/api/registerBook.js";
53 export default { 53 export default {
54 name: "bdcqljqtsx", 54 name: "bdcqljqtsx",
55 data() { 55 data() {
......
...@@ -47,7 +47,7 @@ ...@@ -47,7 +47,7 @@
47 </template> 47 </template>
48 48
49 <script> 49 <script>
50 import { getCfdjList } from "@/api/zhcx.js"; 50 import { getCfdjList } from "@/api/registerBook.js";
51 import { datas } from "./qlxxFormData.js"; 51 import { datas } from "./qlxxFormData.js";
52 export default { 52 export default {
53 data() { 53 data() {
......
...@@ -47,7 +47,7 @@ ...@@ -47,7 +47,7 @@
47 </template> 47 </template>
48 48
49 <script> 49 <script>
50 import { getDiyaqList } from "@/api/zhcx.js"; 50 import { getDiyaqList } from "@/api/registerBook.js";
51 import { datas } from "./qlxxFormData.js"; 51 import { datas } from "./qlxxFormData.js";
52 export default { 52 export default {
53 data() { 53 data() {
......
...@@ -47,7 +47,7 @@ ...@@ -47,7 +47,7 @@
47 </template> 47 </template>
48 48
49 <script> 49 <script>
50 import { getDiyiqList } from "@/api/zhcx.js"; 50 import { getDiyiqList } from "@/api/registerBook.js";
51 import { datas } from "./qlxxFormData.js"; 51 import { datas } from "./qlxxFormData.js";
52 export default { 52 export default {
53 data() { 53 data() {
......
...@@ -19,7 +19,7 @@ ...@@ -19,7 +19,7 @@
19 </div> 19 </div>
20 </template> 20 </template>
21 <script> 21 <script>
22 import { getBdcqljqtsx } from "@/api/zhcx.js"; 22 import { getBdcqljqtsx } from "@/api/registerBook.js";
23 export default { 23 export default {
24 data() { 24 data() {
25 return { 25 return {
......
...@@ -10,11 +10,11 @@ ...@@ -10,11 +10,11 @@
10 区 (县、市) 10 区 (县、市)
11 </p> 11 </p>
12 <p> 12 <p>
13 <font>{{ info.zhen }}</font> 13 <font>{{ info.jdh }}</font>
14 街道 (乡、镇) 14 街道 (乡、镇)
15 <font>{{ info.cun }}</font> 15 <font>{{ info.jfh }}</font>
16 街坊 (村) 16 街坊 (村)
17 <font>{{ info.zu }}</font> 17 <font>{{ info.zh }}</font>
18 组 18 组
19 </p> 19 </p>
20 <div class="title">不动产登记簿</div> 20 <div class="title">不动产登记簿</div>
...@@ -33,7 +33,7 @@ ...@@ -33,7 +33,7 @@
33 </template> 33 </template>
34 34
35 <script> 35 <script>
36 import { getDjbfm } from "@/api/zhcx.js"; 36 import { getDjbfm } from "@/api/registerBook.js";
37 37
38 export default { 38 export default {
39 data() { 39 data() {
...@@ -48,9 +48,7 @@ export default { ...@@ -48,9 +48,7 @@ export default {
48 }, 48 },
49 methods: { 49 methods: {
50 loadData() { 50 loadData() {
51 getDjbfm( 51 getDjbfm({ bdcdyid: this.propsParam.bdcdyid}).then((res) => {
52 this.propsParam.bsmQlxx
53 ).then((res) => {
54 if (res.code === 200) { 52 if (res.code === 200) {
55 this.info = res.result; 53 this.info = res.result;
56 } 54 }
......
...@@ -47,7 +47,7 @@ ...@@ -47,7 +47,7 @@
47 </template> 47 </template>
48 48
49 <script> 49 <script>
50 import { getJsydsyqList } from "@/api/zhcx.js"; 50 import { getJsydsyqList } from "@/api/registerBook.js";
51 import { datas } from "./qlxxFormData.js"; 51 import { datas } from "./qlxxFormData.js";
52 export default { 52 export default {
53 data() { 53 data() {
......
...@@ -47,7 +47,7 @@ ...@@ -47,7 +47,7 @@
47 </template> 47 </template>
48 48
49 <script> 49 <script>
50 import { getJsydsyqList } from "@/api/zhcx.js"; 50 import { getJsydsyqList } from "@/api/registerBook.js";
51 import { datas } from "./qlxxFormData.js"; 51 import { datas } from "./qlxxFormData.js";
52 export default { 52 export default {
53 data() { 53 data() {
......
...@@ -47,7 +47,7 @@ ...@@ -47,7 +47,7 @@
47 </template> 47 </template>
48 48
49 <script> 49 <script>
50 import { getJsydsyqList } from "@/api/zhcx.js"; 50 import { getJsydsyqList } from "@/api/registerBook.js";
51 import { datas } from "./qlxxFormData.js"; 51 import { datas } from "./qlxxFormData.js";
52 export default { 52 export default {
53 data() { 53 data() {
......
...@@ -47,7 +47,7 @@ ...@@ -47,7 +47,7 @@
47 </template> 47 </template>
48 48
49 <script> 49 <script>
50 import { getYgdjList } from "@/api/zhcx.js"; 50 import { getYgdjList } from "@/api/registerBook.js";
51 import { datas } from "./qlxxFormData.js"; 51 import { datas } from "./qlxxFormData.js";
52 export default { 52 export default {
53 data() { 53 data() {
......
...@@ -47,7 +47,7 @@ ...@@ -47,7 +47,7 @@
47 </template> 47 </template>
48 48
49 <script> 49 <script>
50 import { getYydjList } from "@/api/zhcx.js"; 50 import { getYydjList } from "@/api/registerBook.js";
51 import { datas } from "./qlxxFormData.js"; 51 import { datas } from "./qlxxFormData.js";
52 export default { 52 export default {
53 data() { 53 data() {
......
...@@ -122,8 +122,7 @@ ...@@ -122,8 +122,7 @@
122 </template> 122 </template>
123 123
124 <script> 124 <script>
125 import { mapGetters } from "vuex"; 125 import { getZdjjxxBybdcdyid } from "@/api/registerBook.js";
126 import { getZdjjxxBybdcdyid } from "@/api/zhcx.js";
127 126
128 export default { 127 export default {
129 data () { 128 data () {
...@@ -169,22 +168,8 @@ export default { ...@@ -169,22 +168,8 @@ export default {
169 showGroup: false, 168 showGroup: false,
170 }; 169 };
171 }, 170 },
172 // computed: {
173 // ...mapGetters(["djbxx"]),
174 // },
175 created () { 171 created () {
176 //this.propsParam = this.$attrs;
177 // this.$nextTick(() => {
178
179 // });
180 this.loadData(); 172 this.loadData();
181 //this.$alert(this.param.bdcdyh);
182 // this.info = this.djbxx.zdjbxx;
183 // this.djzd = this.djbxx.zdjbxx.djzd;
184 // this.zdbhqks = this.djbxx.zdjbxx.zdbhqks;
185
186 // let widths = (this.zdbhqks.length + 1) * 180 + 110;
187 // this.bhqkTableWidth = widths > 745 ? widths : 745;
188 }, 173 },
189 methods: { 174 methods: {
190 loadData () { 175 loadData () {
...@@ -192,7 +177,6 @@ export default { ...@@ -192,7 +177,6 @@ export default {
192 if (res.code === 200) { 177 if (res.code === 200) {
193 this.zdjbxx = res.result.zdjbxx; 178 this.zdjbxx = res.result.zdjbxx;
194 this.zdbhqks = res.result.zdbhqkList; 179 this.zdbhqks = res.result.zdbhqkList;
195 //this.$alert(this.zdjbxx);
196 if (this.zdbhqks != null && this.zdbhqks.length > 0) { 180 if (this.zdbhqks != null && this.zdbhqks.length > 0) {
197 this.showGroup = true; 181 this.showGroup = true;
198 } 182 }
......
...@@ -15,10 +15,10 @@ export function getForm (tabName) { ...@@ -15,10 +15,10 @@ export function getForm (tabName) {
15 form = require("@/views/workflow/components/spyj.vue"); 15 form = require("@/views/workflow/components/spyj.vue");
16 break; 16 break;
17 case "zdjbxx": 17 case "zdjbxx":
18 form = require("@/views/zhcx/djbcx/components/zdxx.vue"); 18 form = require("@/views/registerBook/zdjbxx.vue");
19 break; 19 break;
20 case "qlxx": 20 case "qlxx":
21 form = require("@/views/zhcx/djbcx/components/jsydsyq.vue"); 21 form = require("@/views/registerBook/jsydsyq.vue");
22 break; 22 break;
23 case "szxx": 23 case "szxx":
24 form = require("@/views/workflow/components/szxx.vue"); 24 form = require("@/views/workflow/components/szxx.vue");
......
1 <template>
2 <div class="bdcqldjml">
3 <table class="mlTable">
4 <tr>
5 <th colspan="5" class="title">
6 不动产权利登记目录
7 <font class="num">第 1 页</font>
8 </th>
9 </tr>
10 <tr>
11 <td>序号</td>
12 <td>不动产单元号</td>
13 <td>不动产类型</td>
14 <td>所在本数</td>
15 <td>备注</td>
16 </tr>
17 <tr v-for="(item, index) in data" :key="index">
18 <td>{{ item.xh }}</td>
19 <td>{{ item.bdcdyh }}</td>
20 <td>{{ item.bdclx }}</td>
21 <td>{{ item.szbs }}</td>
22 <td>{{ item.bz }}</td>
23 </tr>
24 </table>
25 </div>
26 </template>
27
28 <script>
29 import { mapGetters } from "vuex";
30
31 export default {
32 name: "bdcqldjml",
33 data() {
34 return {
35 data: [],
36 };
37 },
38 computed: {
39 ...mapGetters(["djbxx"]),
40 },
41 mounted() {
42 this.data = this.djbxx.djml;
43 },
44 };
45 </script>
46
47 <style lang="scss" scoped>
48 .bdcqldjml {
49 width: 100%;
50 height: 702px;
51 background: #fff;
52 overflow-y: scroll;
53 .mlTable {
54 width: 640px;
55 margin: 0 auto;
56 color: #333;
57 border-spacing: 1px;
58 background-color: #333;
59
60 .title {
61 font-size: 28px;
62 line-height: 60px;
63 font-family: serif;
64 position: relative;
65
66 .num {
67 position: absolute;
68 font-size: 12px;
69 right: 20px;
70 font-family: initial;
71 font-weight: normal;
72 }
73 }
74
75 td,
76 th {
77 background-color: white;
78 line-height: 40px;
79 padding: 0 4px;
80 text-align: center;
81 }
82 }
83 }
84 </style>
1 <template>
2 <div class="bdcqljqtsx">
3 <div class="content">
4 <div class="title">不动产权利及其他事项<br />登记信息</div>
5 <div>
6 不动产单元号:
7 <div class="underline">{{ info.bdcdyh }}</div>
8 </div>
9 <br /><br /><br />
10 <div>
11 <div class="underline">{{ info.qllx }}</div>
12 登记 共
13 <div class="underline">{{ info.total }}</div>
14 条
15 </div>
16 <br /><br />
17 <div>
18 抵押权登记 共
19 <div class="underline">{{ info.dyaq }}</div>
20 条
21 </div>
22 <br />
23 <div>
24 地役权登记 共
25 <div class="underline">{{ info.dyiq }}</div>
26 条
27 </div>
28 <br />
29 <div>
30 预告登记 共
31 <div class="underline">{{ info.ygdj }}</div>
32 条
33 </div>
34 <br />
35 <div>
36 异议登记 共
37 <div class="underline">{{ info.yydj }}</div>
38 条
39 </div>
40 <br />
41 <div>
42 查封登记 共
43 <div class="underline">{{ info.cfdj }}</div>
44 条
45 </div>
46 <br />
47 </div>
48 </div>
49 </template>
50
51 <script>
52 import { mapGetters } from "vuex";
53
54 export default {
55 name: "bdcqljqtsx",
56 data () {
57 return {
58 info: {
59 bdcdyh: "",
60 qllx: "",
61 dyaq: 0,
62 dyiq: 0,
63 ygdj: 0,
64 yydj: 0,
65 cfdj: 0,
66 total: 0,
67 },
68 };
69 },
70 computed: {
71 ...mapGetters(["djbxx"]),
72 },
73 mounted () {
74 this.info.bdcdyh = this.djbxx.qlname.bdcdyh;
75 this.info.qllx = this.djbxx.qlname.qllx;
76
77 this.djbxx.qlname?.djbPrintModelList?.length > 0 && this.djbxx.qlname.djbPrintModelList.forEach((item) => {
78 console.log("this.info.total", this.info.total);
79 this.info.total += Number(item.xh);
80 if (item.djlxPrint == "抵押权") {
81 this.info.dyaq = Number(item.xh);
82 } else if (item.djlxPrint == "地役权") {
83 this.info.dyiq = Number(item.xh);
84 } else if (item.djlxPrint == "预告") {
85 this.info.ygdj = Number(item.xh);
86 } else if (item.djlxPrint == "异议") {
87 this.info.yydj = Number(item.xh);
88 } else if (item.djlxPrint == "查封") {
89 this.info.cfdj = Number(item.xh);
90 }
91 });
92 },
93 };
94 </script>
95
96 <style lang="scss" scoped>
97 .bdcqljqtsx {
98 width: 100%;
99 height: 100%;
100 background: #fff;
101
102 .content {
103 width: 50%;
104 height: 100%;
105 margin: 0 auto;
106 text-align: right;
107 color: #333;
108 font-family: "Arial Negreta", "Arial Normal", "Arial", sans-serif;
109 font-weight: 700;
110 font-size: 18px;
111 line-height: 16px;
112
113 .title {
114 font-size: 32px;
115 text-align: center;
116 padding: 40px 0;
117 line-height: 34px;
118 }
119
120 .underline {
121 font-size: 14px;
122 font-weight: normal;
123 text-decoration: underline;
124 display: inline-block;
125 }
126 }
127 }
128 </style>
1 <template>
2 <div class="djbfm">
3 <br /><br />
4 <p>
5 <font>{{ info.sheng }}</font>
6 省 (区、市)
7 <font>{{ info.shi }}</font>
8 市 (区)
9 <font>{{ info.xian }}</font>
10 区 (县、市)
11 </p>
12 <p>
13 <font>{{ info.zhen }}</font>
14 街道 (乡、镇)
15 <font>{{ info.cun }}</font>
16 街坊 (村)
17 <font>{{ info.zu }}</font>
18 组
19 </p>
20 <div class="title">不动产登记簿</div>
21 <br />
22 <p>
23 宗地/宗海号:
24 <font>{{ info.zddm }}</font>
25 </p>
26 <div class="bottom">
27 <p>
28 登记机构:
29 <font>{{ info.djjg }}</font>
30 </p>
31 </div>
32 </div>
33 </template>
34
35 <script>
36 import { mapGetters } from "vuex";
37
38 export default {
39 name: "djbfm",
40 data() {
41 return {
42 info: {},
43 };
44 },
45 computed: {
46 ...mapGetters(["djbxx"]),
47 },
48 mounted() {
49 this.info = this.djbxx.djbfm;
50 },
51 };
52 </script>
53
54 <style lang="scss" scoped>
55 .djbfm {
56 width: 100%;
57 height: 100%;
58 background: #fff;
59 border-right: 1px solid #ccc;
60 line-height: 45px;
61 text-align: center;
62 font-size: 18px;
63 font-family: serif;
64 position: relative;
65 font {
66 border-bottom: 1px solid #000;
67 display: inline-block;
68 padding: 0 15px;
69 line-height: 16px;
70 }
71 .title {
72 height: 40%;
73 display: flex;
74 font-size: 38px;
75 color: #000;
76 justify-content: center;
77 align-items: center;
78 }
79 .bottom {
80 position: absolute;
81 bottom: 0px;
82 text-align: center;
83 width: 100%;
84 left: 0;
85 height: 100px;
86 line-height: 100px;
87 p {
88 font-size: 28px;
89 }
90 font {
91 font-size: 24px;
92 line-height: 24px;
93 }
94 }
95 }
96 </style>
1 <template>
2 <dialogBox title="登记簿信息" width="1200px" @closeDialog="closeDialog" v-model="value" :isReset="false" :isSave="false">
3 <div class="content">
4 <div class="left">
5 <el-tree ref="tree" :data="treedata" :props="defaultProps" @node-click="handleNodeClick"
6 :default-expand-all="true" :expand-on-click-node="false" node-key="id" :default-checked-keys="[showTab]">
7 </el-tree>
8 </div>
9 <div class="right">
10 <components :is="showTab" :showType="showType"></components>
11 </div>
12 </div>
13 </dialogBox>
14 </template>
15 <script>
16 import { mapGetters } from "vuex";
17 import djbfm from "./djbfm.vue";
18 import zdxx from "./zdxx.vue";
19 import bdcqldjml from "./bdcqldjml.vue";
20 import bdcqljqtsx from "./bdcqljqtsx.vue";
21 import djxxTable from "./djxxTable.vue";
22
23 export default {
24 name: "djbxxDialog",
25 components: {
26 djbfm,
27 zdxx,
28 bdcqldjml,
29 bdcqljqtsx,
30 djxxTable,
31 },
32 props: {
33 value: { type: Boolean, default: false },
34 },
35 data () {
36 return {
37 treedata: [
38 {
39 id: "djbfm",
40 tabs: "djbfm",
41 label: "登记簿封面",
42 children: [
43 {
44 id: "zdxx",
45 tabs: "zdxx",
46 label: "宗地信息",
47 },
48 {
49 id: "bdcqldjml",
50 tabs: "bdcqldjml",
51 label: "不动产权利登记目录",
52 children: [
53 {
54 id: "bdcqljqtsx",
55 tabs: "bdcqljqtsx",
56 label: "不动产权利及其他事项",
57 children: [
58 {
59 id: "gyjsydsyq",
60 tabs: "djxxTable",
61 label: "国有建设用地使用权(临:0，现:0，历:0)",
62 type: "JSYDSYQ",
63 },
64 {
65 id: "dyaq",
66 tabs: "djxxTable",
67 label: "抵押权(临:0，现:0，历:0)",
68 type: "DYAQ",
69 },
70 {
71 id: "dyiq",
72 tabs: "djxxTable",
73 label: "地役权(临:0，现:0，历:0)",
74 type: "DYIQ",
75 },
76 {
77 id: "ygdj",
78 tabs: "djxxTable",
79 label: "预告登记(临:0，现:0，历:0)",
80 type: "YGDJ",
81 },
82 {
83 id: "yydj",
84 tabs: "djxxTable",
85 label: "异议登记(临:0，现:0，历:0)",
86 type: "YYDJ",
87 },
88 {
89 id: "cfdj",
90 tabs: "djxxTable",
91 label: "查封登记(临:0，现:0，历:0)",
92 type: "CFDJ",
93 },
94 ],
95 },
96 ],
97 },
98 ],
99 },
100 ],
101 defaultProps: {
102 children: "children",
103 label: "label",
104 },
105 showTab: "djxxTable", // 选中状态,根据表格中权利类型判断
106 showType: "JSYDSYQ",
107 };
108 },
109 computed: {
110 ...mapGetters(["djbxx"]),
111 },
112 watch: {
113 djbxx: {
114 handler (newVlue) {
115 if (newVlue) {
116 var qszts = newVlue.detail.qszts;
117 let isZd = newVlue.djbfm.zd;
118 let arr = [
119 "QSZT_JSYDSYQ",
120 "QSZT_DYAQ",
121 "QSZT_DYIQ",
122 "QSZT_YGDJ",
123 "QSZT_YYDJ",
124 "QSZT_CFDJ",
125 ];
126 if (!isZd) {
127 // 判断是否是宗地
128 arr[0] = "QSZT_FDCQ2";
129 this.treedata[0].children[1].children[0].children[0].type = FDCQ2;
130 }
131 arr.forEach((item, index) => {
132 let label =
133 this.treedata[0].children[1].children[0].children[
134 index
135 ].label.split(":")[0];
136 this.treedata[0].children[1].children[0].children[index].label =
137 label + ":" +
138 (qszts[item][0] || 0) +
139 "，现:" +
140 (qszts[item][1] || 0) +
141 "，历:" +
142 (qszts[item][2] || 0) +
143 ")";
144 });
145 }
146 }
147 },
148 },
149 methods: {
150 closeDialog () {
151 this.$emit("input", false);
152 // 关闭时清空值
153 this.$store.dispatch("djbxx/setDjbxx", null);
154 },
155 handleNodeClick (data, node, elem) {
156 this.showTab = data.tabs;
157 this.showType = data.type ? data.type : "";
158 },
159 },
160 };
161 </script>
162 <style scoped lang="scss">
163 .content {
164 width: 100%;
165 height: 100%;
166 display: flex;
167
168 .left {
169 width: 256px;
170 height: 704px;
171 background-color: #f5f5f5;
172 color: #333;
173 border: 1px solid rgb(228, 228, 228);
174 }
175
176 .right {
177 width: calc(100% - 256px);
178 height: 704px;
179 // overflow-y: scroll;
180 overflow: auto;
181 background-color: #f5f5f5;
182 }
183 }
184
185 /deep/ .expanded.el-tree-node__expand-icon,
186 /deep/ .el-tree-node__expand-icon {
187 visibility: hidden;
188 }
189
190 /deep/ .el-tree-node__content {
191 border: 1px solid rgb(228, 228, 228);
192 height: 45px;
193 }
194
195 /deep/ .el-tree-node:focus>.el-tree-node__content {
196 background-color: #f5f5f5;
197 color: #0079fe;
198 border-right: 4px solid #0079fe;
199 }
200
201 /deep/.el-tree-node {
202 white-space: pre-wrap;
203 }
204
205 /deep/ .is-current>.el-tree-node__content {
206 background-color: #f5f5f5;
207 color: #0079fe;
208 border-right: 4px solid #0079fe;
209 }
210 </style>
1 import filter from '@/utils/filter.js'
2
3 class data extends filter {
4 constructor() {
5 super()
6 }
7 columns() {
8 return {
9 JSYDSYQ: {
10 title: "建设用地使用权、宅基地使用权登记信息",
11 columns: [
12 {
13 prop: "ssywh",
14 label: "上手业务号",
15 width: "120"
16 },
17 {
18 prop: "dah",
19 label: "档案号",
20 },
21 {
22 prop: "ywh",
23 label: "业务号",
24 },
25 {
26 prop: "bdcdyh",
27 label: "不动产单元号",
28 },
29 {
30 prop: "zl",
31 label: "坐落",
32 },
33 {
34 prop: "qlrlx",
35 label: "权利人类型",
36 },
37 {
38 prop: "qlrmc",
39 label: "权利人",
40 },
41 {
42 prop: "qlrzjzl",
43 label: "证件种类",
44 },
45 {
46 prop: "qlrzjhm",
47 label: "证件号",
48 },
49 {
50 prop: "gyfs",
51 label: "共有情况",
52 },
53 {
54 prop: "mj",
55 label: "使用权面积(m²)",
56 },
57 {
58 prop: "qlxz",
59 label: "权利性质",
60 },
61 {
62 prop: "ytmc",
63 label: "土地用途",
64 },
65 {
66 prop: "syqqzsj",
67 label: "使用权起止时间",
68 },
69 // {
70 // prop: "syqjssj",
71 // label: "使用权结束时间",
72 // },
73 // {
74 // prop: "tdsyqx",
75 // label: "土地使用期限",
76 // },
77 {
78 prop: "tdsyqx",
79 label: "土地使用期限",
80 },
81 {
82 prop: "qdjg",
83 label: "取得价格(万元)",
84 },
85 {
86 prop: "djyy",
87 label: "登记原因",
88 },
89 {
90 prop: "bdcqzh",
91 label: "不动产权证号",
92 },
93 {
94 prop: "djsj",
95 label: "登记时间",
96 },
97 {
98 prop: "dbr",
99 label: "登簿人",
100 },
101 {
102 prop: "fj",
103 label: "附记",
104 },
105 ]
106 },
107 DYAQ: {
108 title: "抵押权登记信息",
109 columns: [
110 {
111 prop: "ssywh",
112 label: "上手业务号",
113 },
114 {
115 prop: "dah",
116 label: "档案号",
117 },
118 {
119 prop: "ywh",
120 label: "业务号",
121 },
122 {
123 prop: "bdcdyh",
124 label: "不动产单元号",
125 },
126 {
127 prop: "zjjzwzl",
128 label: "在建建筑物坐落",
129 },
130 {
131 prop: "dybdclx",
132 label: "抵押不动产类型",
133 },
134 {
135 prop: "dyqr",
136 label: "抵押权人",
137 },
138 {
139 prop: "zjzl",
140 label: "证件种类",
141 },
142 {
143 prop: "zjh",
144 label: "证件号",
145 },
146 {
147 prop: "dyr",
148 label: "抵押人",
149 },
150 {
151 prop: "dyfs",
152 label: "抵押方式",
153 },
154 {
155 prop: "sfygdj",
156 label: "是否预告登记",
157 },
158 {
159 prop: "zjjzwdyfw",
160 label: "在建建筑物抵押范围",
161 },
162 {
163 prop: "dymj",
164 label: "抵押面积",
165 },
166 {
167 prop: "bdbzzqse",
168 label: "被担保主债权数额(万元)",
169 },
170 {
171 prop: "dbfw",
172 label: "担保范围",
173 },
174 {
175 prop: "zwlxqssj",
176 label: "债务履行起始时间",
177 },
178 {
179 prop: "zwlxjssj",
180 label: "债务履行结束时间",
181 },
182 {
183 prop: "zwlxqx",
184 label: "债务履行期限(债务确定期间)",
185 },
186 {
187 prop: "zgzqqdsshse",
188 label: "最高债权确定事实和数额",
189 },
190 {
191 prop: "sfczyd",
192 label: "是否存在禁止或限制转让抵押不动产的约定",
193 },
194 {
195 prop: "djyy",
196 label: "登记原因",
197 },
198 {
199 prop: "bdcdjzmh",
200 label: "不动产登记证明号",
201 },
202 {
203 prop: "djsj",
204 label: "登记时间",
205 },
206 {
207 prop: "dbr",
208 label: "登簿人",
209 },
210 {
211 prop: "djjg",
212 label: "登记机构",
213 },
214 {
215 prop: "fj",
216 label: "附记",
217 },
218 {
219 prop: "qlqtzk",
220 label: "权利其他状况",
221 },
222 {
223 prop: "zxdyywh",
224 label: "注销抵押业务号",
225 },
226 {
227 prop: "zxdyyy",
228 label: "注销抵押原因",
229 },
230 ]
231 },
232 DYIQ: {
233 title: "地役权登记信息",
234 columns: [
235 {
236 prop: "ssywh",
237 label: "上手业务号",
238 },
239 {
240 prop: "dah",
241 label: "档案号",
242 },
243 {
244 prop: "ywh",
245 label: "业务号",
246 },
247 {
248 prop: "gydbdcdyh",
249 label: "供役地不动产单元号",
250 },
251 {
252 prop: "gydqlr",
253 label: "供役地权利人",
254 },
255 {
256 prop: "gydqlrzjzl",
257 label: "供役地权利人证件种类",
258 },
259 {
260 prop: "xydbdcdyh",
261 label: "需役地不动产单元号",
262 },
263 {
264 prop: "xydzl",
265 label: "需役地坐落",
266 },
267 {
268 prop: "xydqlr",
269 label: "需役地权利人",
270 },
271 {
272 prop: "xydqlrzjzl",
273 label: "需役地权利人证件种类",
274 },
275 {
276 prop: "xydzjh",
277 label: "需役地证件号",
278 },
279 {
280 prop: "djyy",
281 label: "登记原因",
282 },
283 {
284 prop: "dyqnr",
285 label: "地役权内容",
286 },
287 {
288 prop: "qlqssj",
289 label: "权利起始时间",
290 },
291 {
292 prop: "qljssj",
293 label: "权利结束时间",
294 },
295 {
296 prop: "bdcdjzmh",
297 label: "不动产登记证明号",
298 },
299 {
300 prop: "qxdm",
301 label: "区县代码",
302 },
303 {
304 prop: "djjg",
305 label: "登记机构",
306 },
307 {
308 prop: "dbr",
309 label: "登簿人",
310 },
311 {
312 prop: "djsj",
313 label: "登记时间",
314 },
315 ]
316 },
317 YGDJ: {
318 title: "预告登记信息",
319 columns: [
320 {
321 prop: "ssywh",
322 label: "上手业务号",
323 },
324 {
325 prop: "dah",
326 label: "档案号",
327 },
328 {
329 prop: "ywh",
330 label: "业务号",
331 },
332 {
333 prop: "bdcdyh",
334 label: "不动产单元号",
335 },
336 {
337 prop: "zl",
338 label: "坐落",
339 },
340 {
341 prop: "qlr",
342 label: "权利人",
343 },
344 {
345 prop: "qlrzjzl",
346 label: "证件种类",
347 },
348 {
349 prop: "qlrzjh",
350 label: "证件号",
351 },
352 {
353 prop: "ywr",
354 label: "义务人",
355 },
356 {
357 prop: "ywrzjzl",
358 label: "证件种类",
359 },
360 {
361 prop: "ywrzjh",
362 label: "证件号",
363 },
364 {
365 prop: "fwxz",
366 label: "房屋性质",
367 },
368 {
369 prop: "ghyt",
370 label: "规划用途",
371 },
372 {
373 prop: "fwzcs",
374 label: "房屋总层数",
375 },
376 {
377 prop: "fwszc",
378 label: "房屋所在层",
379 },
380 {
381 prop: "jzmj",
382 label: "建筑面积",
383 },
384 {
385 prop: "djyy",
386 label: "登记原因",
387 },
388 {
389 prop: "bdbzzqse",
390 label: "取得价格/被担保主债权数额",
391 },
392 {
393 prop: "jedw",
394 label: "金额单位",
395 },
396 {
397 prop: "dbfw",
398 label: "担保范围",
399 },
400 {
401 prop: "sfczyd",
402 label: "是否存在禁止或限制转让抵押不动产的约定",
403 },
404 {
405 prop: "djsj",
406 label: "登记时间",
407 },
408 {
409 prop: "bdcdjzmh",
410 label: "不动产登记证明号",
411 },
412 {
413 prop: "dbr",
414 label: "登簿人",
415 },
416 {
417 prop: "zxygywh",
418 label: "注销预告业务号",
419 },
420 {
421 prop: "zxygyy",
422 label: "注销预告原因",
423 },
424 {
425 prop: "zxsj",
426 label: "注销时间",
427 },
428 {
429 prop: "qszt",
430 label: "权属状态",
431 },
432 ],
433 },
434 CFDJ: {
435 title: "查封登记信息",
436 columns: [
437 {
438 prop: "ssywh",
439 label: "上手业务号",
440 },
441 {
442 prop: "dah",
443 label: "档案号",
444 },
445 {
446 prop: "ywh",
447 label: "业务号",
448 },
449 {
450 prop: "bdcdyh",
451 label: "不动产单元号",
452 },
453 {
454 prop: "zl",
455 label: "坐落",
456 },
457 {
458 prop: "bdcqlr",
459 label: "不动产权利人",
460 },
461 {
462 prop: "zjzl",
463 label: "证件种类",
464 },
465 {
466 prop: "zjh",
467 label: "证件号",
468 },
469 {
470 prop: "cflx",
471 label: "查封类型",
472 },
473 {
474 prop: "cfjg",
475 label: "查封机关",
476 },
477 {
478 prop: "cfwh",
479 label: "查封文号",
480 },
481 {
482 prop: "cfwj",
483 label: "查封文件",
484 },
485 {
486 prop: "cfqssj",
487 label: "查封起始时间",
488 },
489 {
490 prop: "cfjssj",
491 label: "查封结束时间",
492 },
493 {
494 prop: "cfqx",
495 label: "查封期限",
496 },
497 {
498 prop: "cffw",
499 label: "查封范围",
500 },
501 {
502 prop: "djjg",
503 label: "登记机构",
504 },
505 {
506 prop: "dbr",
507 label: "登簿人",
508 },
509 {
510 prop: "djsj",
511 label: "登记时间",
512 },
513 {
514 prop: "jfywh",
515 label: "解封业务号",
516 },
517 {
518 prop: "jfjg",
519 label: "解封机关",
520 },
521 {
522 prop: "jfwh",
523 label: "解封文号",
524 },
525 {
526 prop: "jfwj",
527 label: "解封文件",
528 },
529 {
530 prop: "jfdjsj",
531 label: "解封登记时间",
532 },
533 {
534 prop: "jfdbr",
535 label: "解封登簿人",
536 },
537 ]
538 },
539 YYDJ: {
540 title: "异议登记信息",
541 columns: [
542 {
543 prop: "ssywh",
544 label: "上手业务号",
545 },
546 {
547 prop: "dah",
548 label: "档案号",
549 },
550 {
551 prop: "ywh",
552 label: "业务号",
553 },
554 {
555 prop: "bdcdyh",
556 label: "不动产单元号",
557 },
558 {
559 prop: "zl",
560 label: "坐落",
561 },
562 {
563 prop: "yyr",
564 label: "异议人",
565 },
566 {
567 prop: "zjzl",
568 label: "证件种类",
569 },
570 {
571 prop: "zjh",
572 label: "证件号",
573 },
574 {
575 prop: "yysx",
576 label: "异议事项",
577 },
578 {
579 prop: "bdcdjzmh",
580 label: "不动产登记证明号",
581 },
582 {
583 prop: "djjg",
584 label: "登记机构",
585 },
586 {
587 prop: "dbr",
588 label: "登簿人",
589 },
590 {
591 prop: "djsj",
592 label: "登记时间",
593 },
594 {
595 prop: "zxyyywh",
596 label: "注销异议业务号",
597 },
598 {
599 prop: "zxyyyy",
600 label: "注销异议原因",
601 },
602 {
603 prop: "zxyydbr",
604 label: "注销异议登簿人",
605 },
606 {
607 prop: "zxyydjsj",
608 label: "注销异议登记时间",
609 },
610 ]
611 },
612 }
613 }
614
615
616 }
617
618 let datas = new data()
619
620 export {
621 datas
622 }
...\ No newline at end of file ...\ No newline at end of file
1 <template>
2 <div class="djxxTable">
3 <div class="tableBox">
4 <div class="title">
5 {{ title }}
6 <div class="checkbox">
7 <el-checkbox-group v-model="checkList" @change="checkChange">
8 <el-checkbox label="临时"></el-checkbox>
9 <el-checkbox label="现势"></el-checkbox>
10 <el-checkbox label="历史"></el-checkbox>
11 </el-checkbox-group>
12 </div>
13 </div>
14 <div class="xxTableBox" v-if="showTableData.length">
15 <table class="xxTable" :width="tableWidth">
16 <tr>
17 <th rowspan="3">业务类型</th>
18 </tr>
19 <!-- 第一行表头 -->
20 <tr class="one">
21 <th v-for="(item, index) in ths" :key="index" :class="[item.class, item.type == '临时' ? 'linshiIcon' : '']">
22 <div class="icon" v-if="item.type == '临时'">{{ item.type }}</div>
23 {{ item.type }}
24 </th>
25 </tr>
26 <!-- 第二行表头 -->
27 <tr class="two">
28 <th v-for="(item, index) in ths" :key="index" :class="item.class">
29 <p>{{ item.qllxmc }}</p>
30 <p>{{ item.djlxmc }}</p>
31 </th>
32 </tr>
33 <!-- 数据 -->
34 <tr v-for="(item, index) in columns" :key="index">
35 <td>
36 {{ item.label }}
37 </td>
38 <td v-for="(item1, index1) in showTableData" :key="index1" :class="[
39 item1.qszt == '2' ? 'lishi' : '',
40 item1.qszt == '0' ? 'linshi' : '',
41 ]">
42 {{ item1[item.prop] }}
43 </td>
44 </tr>
45 </table>
46 </div>
47 </div>
48 </div>
49 </template>
50
51 <script>
52 import { mapGetters } from "vuex";
53 import { datas } from "./djxxColumns";
54 import { getJsydsyqList } from "@/api/zhcx.js";
55 export default {
56 name: "djxxTable",
57 props: {
58 showType: "",
59 },
60 data () {
61 return {
62 checkList: ["临时", "现势", "历史"],
63 tableWidth: 810,
64 type: datas.columns(),
65 tableData: [],
66 showTableData: [],
67 ths: [],
68 showThs: [],
69 columns: [],
70 title: "",
71 };
72 },
73 computed: {
74 ...mapGetters(["djbxx"]),
75 },
76 watch: {
77 showType: {
78 async handler (newVlue) {
79 // 清空值
80 this.tableData = [];
81 this.ths = [];
82 this.columns = this.type[newVlue].columns;
83 this.title = this.type[newVlue].title;
84 this.checkList = ["临时", "现势", "历史"];
85 this.tableWidth = 810;
86 let detail;
87 if (newVlue === "JSYDSYQ") {
88 let res = await getJsydsyqList({
89 bdcdyid: "2b33851f4edfd468ceef4d68c370bd41",
90 qllx: "A03",
91 qszt: ["1"]
92 })
93 detail = res.result;
94 } else {
95 detail = this.djbxx.detail.qlxxs[newVlue];
96 }
97 console.log(detail, 'detail');
98 detail.length > 0 && detail.forEach((item) => {
99 this.tableData.push(item);
100 if (item.qszt == "0") {
101 this.ths.push({
102 type: "临时",
103 qllxmc: item.qllxmc,
104 djlxmc: item.djlxmc,
105 prop: "linshi",
106 class: "linshi",
107 });
108 } else if (item.qszt == "1") {
109 this.ths.push({
110 type: "现势",
111 qllxmc: item.qllxmc,
112 djlxmc: item.djlxmc,
113 prop: "xianshi",
114 class: "xianshi",
115 });
116 } else if (item.qszt == "2") {
117 this.ths.push({
118 type: "历史",
119 qllxmc: item.qllxmc,
120 djlxmc: item.djlxmc,
121 prop: "lishi",
122 class: "lishi",
123 });
124 }
125 });
126 this.showTableData = this.tableData;
127 this.showThs = this.ths;
128 let width = (this.tableData.length - 3) * 223 + this.tableWidth;
129 this.tableWidth = this.tableData.length > 3 ? width : 810;
130 },
131 deep: true
132 },
133 },
134 methods: {
135 checkChange () {
136 var checkKey = [];
137 this.ths = [];
138 this.tableWidth = 810;
139 this.checkList.forEach((item) => {
140 if (item == "临时") {
141 checkKey.push("0");
142 }
143 if (item == "现势") {
144 checkKey.push("1");
145 }
146 if (item == "历史") {
147 checkKey.push("2");
148 }
149 });
150 this.showTableData = this.tableData.filter((item) =>
151 checkKey.includes(item.qszt)
152 );
153 this.showTableData.forEach((item) => {
154 if (item.qszt == "0") {
155 this.ths.push({
156 type: "临时",
157 qllxmc: item.qllxmc,
158 djlxmc: item.djlxmc,
159 prop: "linshi",
160 class: "linshi",
161 });
162 } else if (item.qszt == "1") {
163 this.ths.push({
164 type: "现势",
165 qllxmc: item.qllxmc,
166 djlxmc: item.djlxmc,
167 prop: "xianshi",
168 class: "xianshi",
169 });
170 } else if (item.qszt == "2") {
171 this.ths.push({
172 type: "历史",
173 qllxmc: item.qllxmc,
174 djlxmc: item.djlxmc,
175 prop: "lishi",
176 class: "lishi",
177 });
178 }
179 });
180 let width = (this.showTableData.length - 3) * 223 + this.tableWidth;
181 this.tableWidth = this.showTableData.length > 3 ? width : 810;
182 },
183 },
184 };
185 </script>
186
187 <style lang="scss" scoped>
188 .djxxTable {
189 width: 100%;
190 height: 100%;
191 background: #fff;
192 overflow-y: scroll;
193 color: #333;
194
195 .tableBox {
196 width: 810px;
197 margin: 0 auto;
198 display: flex;
199 flex-wrap: wrap;
200
201 .title {
202 width: 100%;
203 font-family: "Arial Negreta", "Arial Normal", "Arial", sans-serif;
204 font-weight: 700;
205 font-size: 16px;
206 text-align: center;
207 background: #e9e9e9;
208 height: 62px;
209 line-height: 62px;
210 position: relative;
211 margin: 1px 0;
212
213 .checkbox {
214 position: absolute;
215 right: 20px;
216 bottom: -16px;
217 height: 62px;
218 }
219 }
220
221 .xxTableBox {
222 min-width: 810px;
223 width: 100%;
224 overflow-x: scroll;
225 }
226
227 // .xxTable > tr th:not(:first-child) {
228 // width: 223px;
229 // }
230 .xxTable>tr:first-child th {
231 width: 140px;
232 }
233
234 .xxTable {
235 border-spacing: 1px;
236
237 tr>th {
238 background: #464c5b;
239 color: #fff;
240 font-size: 16px;
241 }
242
243 th.linshi,
244 th.xianshi {
245 background: #464c5b;
246 }
247
248 th.lishi {
249 background: rgba(70, 76, 91, 0.8);
250 }
251
252 .one th {
253 height: 25px;
254 font-size: 14px;
255 }
256
257 th.linshi {
258 color: #fe9400;
259 }
260
261 .two th {
262 height: 45px;
263
264 p:nth-child(2) {
265 font-size: 14px;
266 }
267 }
268
269 .linshiIcon {
270 position: relative;
271 }
272
273 .linshiIcon::after {
274 content: "";
275 display: block;
276 width: 0;
277 height: 0;
278 border-width: 0px 0px 45px 45px;
279 border-style: none solid solid;
280 border-color: transparent transparent #fe9400;
281 position: absolute;
282 top: 0px;
283 right: 3px;
284 transform: rotate(-90deg);
285 }
286
287 .icon {
288 position: absolute;
289 top: 8px;
290 right: 6px;
291 transform: rotate(45deg);
292 color: #fff;
293 font-size: 12px;
294 z-index: 10;
295 }
296
297 tr td {
298 text-align: center;
299 height: 40px;
300 padding: 4px;
301 font-size: 13px;
302 width: 140px;
303 }
304
305 >tr:nth-child(odd) td {
306 background: #f2f2f2;
307 }
308
309 >tr:nth-child(even) td {
310 background: #f9f9f9;
311 }
312
313 td.linshi {
314 color: #fe9400;
315 }
316
317 tr>td.lishi {
318 color: #7f7f7f;
319 }
320 }
321 }
322 }
323 </style>
1 import filter from '@/utils/filter.js'
2
3 class data extends filter {
4 constructor() {
5 super()
6 }
7 columns () {
8 return [
9 {
10 prop: "qszt",
11 label: "权属状态",
12 },
13 {
14 prop: "qllxmc",
15 label: "权利类型",
16 },
17 {
18 prop: "djlxmc",
19 label: "登记类型",
20 },
21 {
22 prop: "ssywh",
23 label: "上手业务号",
24 },
25 {
26 prop: "dah",
27 label: "档案号",
28 },
29 {
30 prop: "ywh",
31 label: "业务号",
32 },
33 {
34 prop: "bdcdyh",
35 label: "不动产单元号",
36 },
37 {
38 prop: "zl",
39 label: "坐落",
40 },
41 {
42 prop: "qlrlx",
43 label: "权利人类型",
44 },
45 {
46 prop: "qlrmc",
47 label: "权利人",
48 },
49 {
50 prop: "qlrzjzl",
51 label: "证件种类",
52 },
53 {
54 prop: "qlrzjhm",
55 label: "证件号",
56 },
57 {
58 prop: "gyfs",
59 label: "共有情况",
60 },
61 {
62 prop: "mj",
63 label: "使用权面积(m²)",
64 },
65 {
66 prop: "qlxz",
67 label: "权利性质",
68 },
69 {
70 prop: "ytmc",
71 label: "土地用途",
72 },
73 {
74 prop: "syqqzsj",
75 label: "使用权起止时间",
76 },
77 {
78 prop: "tdsyqx",
79 label: "土地使用期限",
80 },
81 {
82 prop: "qdjg",
83 label: "取得价格(万元)",
84 },
85 {
86 prop: "djyy",
87 label: "登记原因",
88 },
89 {
90 prop: "bdcqzh",
91 label: "不动产权证号",
92 },
93 {
94 prop: "djsj",
95 label: "登记时间",
96 },
97 {
98 prop: "dbr",
99 label: "登簿人",
100 },
101 {
102 prop: "fj",
103 label: "附记",
104 },
105 ]
106 }
107 }
108
109 let datas = new data()
110
111 export {
112 datas
113 }
...\ No newline at end of file ...\ No newline at end of file
1 <template>
2 <div class="djxxTable">
3 <div class="tableBox">
4 <div class="title">
5 {{ title }}
6 <div class="checkbox">
7 <el-checkbox-group v-model="checkList" @change="checkChange">
8 <el-checkbox v-for="item in qsztList" :key="item.value" :label="item.value">{{ item.label }}</el-checkbox>
9 </el-checkbox-group>
10 </div>
11 </div>
12 <div class="xxTableBox">
13 <table class="xxTable">
14 <tr v-for="(item, colindex) in columns" :key="colindex">
15 <td>
16 {{ item.label }}
17 </td>
18 <td v-for="(row, index) in tableData" :key="index" :class="[
19 row.qszt == '2' ? 'lishi' : '',
20 row.qszt == '0' ? 'linshi' : '',
21 item.prop == 'qszt' && row.qszt == '0' ? 'linshiIcon' : '',
22 ]">
23 <div class="icon" v-if="item.prop == 'qszt' && row.qszt == '0'">
24 正在办理
25 </div>
26 <span v-if="item.prop == 'qszt'">
27 {{ getQsztName(row[item.prop]) }}
28 </span>
29
30 <span v-else> {{ row[item.prop] }}</span>
31 </td>
32 <td v-for="count in emptycolNum" :key="~count"></td>
33 </tr>
34 </table>
35 </div>
36 </div>
37 </div>
38 </template>
39
40 <script>
41 import { datas } from "./jsydsyq.js";
42 import { getJsydsyqList } from "@/api/zhcx.js";
43 export default {
44 data () {
45 return {
46 qsztList: [
47 {
48 value: "0",
49 label: "临时",
50 },
51 {
52 value: "1",
53 label: "现势",
54 },
55 {
56 value: "2",
57 label: "历史",
58 },
59 ],
60 checkList: ["0", "1", "2"],
61 //传递参数
62 propsParam: {},
63 //列表数据
64 tableData: [],
65 //空列值个数
66 emptycolNum: 0,
67 //列名称对象
68 columns: [],
69 title: "建设用地使用权、宅基地使用权登记信息",
70 };
71 },
72 created () {
73 this.propsParam = this.$attrs;
74 console.log(this.$attrs, 'this.$attrs;');
75 this.columns = datas.columns();
76 this.loadData();
77 // this.$alert(datas.columns());
78 },
79 methods: {
80 loadData () {
81 //this.$alert(this.propsParam.bdcdyh);
82 getJsydsyqList({
83 bdcdyid: this.propsParam.bdcdyid,
84 qllx: this.propsParam.qllx,
85 qszt: this.checkList,
86 }).then((res) => {
87 if (res.code === 200) {
88 this.tableData = res.result;
89 this.emptycolNum = 3 - this.tableData.length;
90 }
91 });
92 },
93 checkChange () {
94 this.loadData();
95 },
96 getQsztName (code) {
97 let name = "";
98 for (let item of this.qsztList) {
99 if (item.value == code) {
100 name = item.label;
101 break;
102 }
103 }
104 return name;
105 },
106 },
107 };
108 </script>
109
110 <style lang="scss" scoped>
111 @import "./qlxxCommon.scss";
112 </style>
1 .djxxTable {
2 width: 100%;
3 height: 100%;
4 background: #fff;
5 overflow-y: scroll;
6 color: #333;
7
8 .tableBox {
9 margin: 0 auto;
10 display: flex;
11 flex-wrap: wrap;
12
13 .title {
14 width: 100%;
15 font-weight: 700;
16 font-size: 16px;
17 text-align: center;
18 background: #e9e9e9;
19 height: 62px;
20 line-height: 62px;
21 position: relative;
22 margin: 1px 0;
23
24 .checkbox {
25 position: absolute;
26 right: 20px;
27 bottom: -16px;
28 height: 62px;
29 }
30 }
31
32 .xxTableBox {
33 overflow-x: scroll;
34 width: 100%;
35 padding-bottom: 35px;
36 }
37
38 .xxTable>tr:first-child th {
39 width: 140px;
40 }
41
42 .xxTable {
43 border-spacing: 1px;
44 width: 100%;
45
46 tr>th {
47 border: 1px solid #ccc;
48 background: #F2F2F2;
49 color: #333333;
50 font-size: 16px;
51 height: 40px;
52 }
53
54 th.linshi,
55 th.xianshi {
56 background: #464c5b;
57 }
58
59 th.lishi {
60 background: rgba(70, 76, 91, 0.8);
61 }
62
63 .one th {
64 height: 25px;
65 font-size: 14px;
66 }
67
68 th.linshi {
69 color: #fe9400;
70 }
71
72 .two th {
73 height: 45px;
74
75 p:nth-child(2) {
76 font-size: 14px;
77 }
78 }
79
80 .linshiIcon {
81 position: relative;
82 }
83
84 .linshiIcon::after {
85 content: "";
86 display: block;
87 width: 0;
88 height: 0;
89 border-width: 0px 0px 55px 55px;
90 border-style: none solid solid;
91 border-color: transparent transparent #fe9400;
92 position: absolute;
93 top: 0;
94 right: 0;
95 transform: rotate(-90deg);
96 }
97
98 .icon {
99 position: absolute;
100 top: 13px;
101 right: -4px;
102 transform: rotate(45deg);
103 color: #fff;
104 font-size: 12px;
105 z-index: 10;
106 }
107
108 tr td {
109 border: 1px solid #ccc;
110 text-align: center;
111 height: 40px;
112 padding: 4px;
113 font-size: 13px;
114 width: 140px;
115 }
116
117 >tr:nth-child(odd) td {
118 background: #f2f2f2;
119 }
120
121 >tr:nth-child(even) td {
122 background: #f9f9f9;
123 }
124
125 td.linshi {
126 color: #fe9400;
127 }
128
129 tr>td.lishi {
130 color: #7f7f7f;
131 }
132 }
133 }
134 }
...\ No newline at end of file ...\ No newline at end of file
1 <template>
2 <div class="zdxx">
3 <div class="tablebox">
4 <table cellpadding="0" cellspacing="0" class="zdxxTable">
5 <col width="80" />
6 <col width="60" />
7 <col width="90" />
8 <col width="235" />
9 <col width="150" />
10 <tr>
11 <td colspan="6" class="title">宗地基本信息</td>
12 </tr>
13 <tr>
14 <td colspan="6" class="unit" v-if="zdjbxx.mjdw == '1'">
15 单位：■平方米 □公顷（□亩）、万元
16 </td>
17 <td colspan="6" class="unit" v-else>
18 单位：□平方米 ■公顷（■亩）、万元
19 </td>
20 </tr>
21 <tr>
22 <td colspan="2">不动产类型</td>
23 <td colspan="4">■土地 ■房屋建筑 □构筑物 □森林、林地 □其他</td>
24 </tr>
25 <tr>
26 <td colspan="2">坐落</td>
27 <td colspan="4">{{ zdjbxx.zl }}</td>
28 </tr>
29 <tr>
30 <td rowspan="8" class="title2">土地状况</td>
31 </tr>
32 <tr>
33 <td colspan="2">宗地面积</td>
34 <td>{{ zdjbxx.zdmj }}</td>
35 <td>用途</td>
36 <td>{{ zdjbxx.ghytmc }}</td>
37 </tr>
38 <tr>
39 <td colspan="2">等级</td>
40 <td>{{ zdjbxx.dj }}</td>
41 <td>价格</td>
42 <td>{{ zdjbxx.jg }}</td>
43 </tr>
44 <tr>
45 <td colspan="2">权利类型</td>
46 <td>{{ zdjbxx.qllx }}</td>
47 <td>权利性质</td>
48 <td>{{ zdjbxx.qlxz }}</td>
49 </tr>
50 <tr>
51 <td colspan="2">权利设定方式</td>
52 <td>{{ zdjbxx.qlsdfs }}</td>
53 <td>容积率</td>
54 <td>{{ zdjbxx.rjl }}</td>
55 </tr>
56 <tr>
57 <td colspan="2">建筑密度</td>
58 <td>{{ zdjbxx.jzmd }}</td>
59 <td>建筑限高</td>
60 <td>{{ zdjbxx.jzxg }}</td>
61 </tr>
62 <tr>
63 <td colspan="2">图幅号</td>
64 <td>{{ zdjbxx.tfh }}</td>
65 <td>地籍号</td>
66 <td>{{ zdjbxx.djh }}</td>
67 </tr>
68 <tr>
69 <td colspan="2">档案号</td>
70 <td>{{ zdjbxx.dah }}</td>
71 <td>地块代码</td>
72 <td>{{ zdjbxx.dkdm }}</td>
73 </tr>
74 <tr>
75 <td colspan="2">宗地四至-东</td>
76 <td colspan="4">{{ zdjbxx.zdszd }}</td>
77 </tr>
78 <tr>
79 <td colspan="2">宗地四至-南</td>
80 <td colspan="4">{{ zdjbxx.zdszn }}</td>
81 </tr>
82 <tr>
83 <td colspan="2">宗地四至-西</td>
84 <td colspan="4">{{ zdjbxx.zdszx }}</td>
85 </tr>
86 <tr>
87 <td colspan="2">宗地四至-北</td>
88 <td colspan="4">{{ zdjbxx.zdszb }}</td>
89 </tr>
90 <tr>
91 <td class="title2" height="96">备注</td>
92 <td colspan="5">{{ zdjbxx.bz }}</td>
93 </tr>
94 <tr>
95 <td class="title2" height="96">附记</td>
96 <td colspan="5">{{ zdjbxx.fj }}</td>
97 </tr>
98 <tr>
99 <td colspan="2">状态</td>
100 <td colspan="2">{{ zdjbxx.zt }}</td>
101 <td>区县代码</td>
102 <td>{{ zdjbxx.qxdm }}</td>
103 </tr>
104 <tr v-show="showGroup">
105 <td class="title2">变化情况</td>
106 <td colspan="5" class="bhqk">
107 <div class="box">
108 <table cellspacing="0" cellpadding="0" :width="bhqkTableWidth">
109 <tr v-for="(item, index) in bhqkColumns" :key="index">
110 <td class="bhqkTh">{{ item.label }}</td>
111 <!-- <td v-for="(item2, index2) in zdbhqks" :key="index2">
112 {{ item2[item.prop] }}
113 </td> -->
114 </tr>
115 </table>
116 </div>
117 </td>
118 </tr>
119 </table>
120 </div>
121 </div>
122 </template>
123
124 <script>
125 import { mapGetters } from "vuex";
126 import { getZdjjxxBySLdy } from "@/api/zhcx.js";
127
128 export default {
129 name: "zdxx",
130 data () {
131 return {
132 bhqkColumns: [
133 {
134 prop: "ssywh",
135 label: "上手业务号",
136 },
137 {
138 prop: "zddm",
139 label: "宗地代码",
140 },
141 {
142 prop: "bhqzddm",
143 label: "变化前宗地代码",
144 },
145 {
146 prop: "bhnr",
147 label: "变化内容",
148 },
149 {
150 prop: "bhyy",
151 label: "变化原因",
152 },
153 {
154 prop: "djsj",
155 label: "登记时间",
156 },
157 {
158 prop: "dbr",
159 label: "登簿人",
160 },
161 {
162 prop: "fj",
163 label: "附记",
164 },
165 ],
166 bhqkTableWidth: 745,
167 zdjbxx: {},
168 zdbhqks: [],
169 propsParam: {},
170 showGroup: false,
171 };
172 },
173 // computed: {
174 // ...mapGetters(["djbxx"]),
175 // },
176 created () {
177 this.propsParam = this.$attrs;
178 // this.$nextTick(() => {
179
180 // });
181 this.loadData();
182 //this.$alert(this.param.bdcdyh);
183 // this.info = this.djbxx.zdjbxx;
184 // this.djzd = this.djbxx.zdjbxx.djzd;
185 // this.zdbhqks = this.djbxx.zdjbxx.zdbhqks;
186
187 // let widths = (this.zdbhqks.length + 1) * 180 + 110;
188 // this.bhqkTableWidth = widths > 745 ? widths : 745;
189 },
190 methods: {
191 loadData () {
192 getZdjjxxBySLdy({ bsmsldy: this.propsParam.bsmSldy }).then((res) => {
193 if (res.code === 200) {
194 this.zdjbxx = res.result.zdjbxx;
195 this.zdbhqks = res.result.zdbhqkList;
196 //this.$alert(this.zdjbxx);
197 if (this.zdbhqks != null && this.zdbhqks.length > 0) {
198 this.showGroup = true;
199 }
200 }
201 });
202 },
203 },
204 };
205 </script>
206
207 <style lang="scss" scoped>
208 .zdxx {
209 width: 100%;
210 height: calc(100% - 42px);
211 background-color: #f5f5f5;
212 padding: 5px;
213
214 .tablebox {
215 overflow-x: auto;
216 width: 100%;
217 height: 100%;
218 background: #fff;
219 border: 1px solid rgb(228, 228, 228);
220 text-align: center;
221 padding: 4px;
222 overflow-y: scroll;
223
224 .zdxxTable {
225 width: 100%;
226 min-width: 900px;
227 color: #333;
228
229 td {
230 border: 1px solid rgb(228, 228, 228);
231 line-height: 30px;
232 padding: 0 4px;
233 }
234
235 .title {
236 line-height: 68px;
237 font-size: 20px;
238 }
239
240 .unit {
241 text-align: right;
242 }
243
244 .title2 {
245 writing-mode: vertical-lr;
246 letter-spacing: 6px;
247 }
248
249 .bhqk {
250 padding: 0;
251
252 .box {
253 width: 745px;
254 overflow: auto;
255 }
256
257 .test {}
258
259 table {
260 .bhqkTh {
261 width: 110px;
262 line-height: 40px;
263 background-color: #f5f5f5;
264 border: 1px solid rgb(228, 228, 228);
265 font-weight: bold;
266 }
267
268 td {
269 width: 180px;
270 }
271 }
272 }
273 }
274 }
275 }
276 </style>
...@@ -52,18 +52,11 @@ ...@@ -52,18 +52,11 @@
52 <script> 52 <script>
53 import table from "@/utils/mixin/table"; 53 import table from "@/utils/mixin/table";
54 import { datas, sendThis } from "./djbcxdata"; 54 import { datas, sendThis } from "./djbcxdata";
55 import djbxxDialog from "./components/djbxxDialog.vue"; 55 import { getDjbBysearch } from "@/api/zhcx.js";
56 import {
57 getDjbBysearch,
58 } from "@/api/zhcx.js";
59 import { mapGetters } from "vuex"; 56 import { mapGetters } from "vuex";
60 import axios from "axios";
61 57
62 export default { 58 export default {
63 name: "djbcx", 59 name: "djbcx",
64 components: {
65 djbxxDialog,
66 },
67 mixins: [table], 60 mixins: [table],
68 mounted () { 61 mounted () {
69 sendThis(this); 62 sendThis(this);
......