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
Inline Side-by-side
Showing 17 changed files with 2179 additions and 190 deletions
...@@ -24,10 +24,11 @@ export function getDjbfm(qlbsm) { ...@@ -24,10 +24,11 @@ export function getDjbfm(qlbsm) {
24 } 24 }
25 25
26 // 获取登记目录 26 // 获取登记目录
27 export function getDjml(qlbsm) { 27 export function getBdcqldjmlByBdcdyid(data) {
28 return request({ 28 return request({
29 url: '/zhcx/djbcx/djml/' + qlbsm, 29 url: '/zhcx/djbcx/getBdcqldjmlByBdcdyid',
30 method: 'get' 30 method: 'get',
31 params: data
31 }) 32 })
32 } 33 }
33 34
...@@ -40,9 +41,27 @@ export function getZdjbxx(qlbsm) { ...@@ -40,9 +41,27 @@ export function getZdjbxx(qlbsm) {
40 } 41 }
41 42
42 // 获取宗地信息 43 // 获取宗地信息
44 export function getZdjjxxBybdcdyid(data) {
45 return request({
46 url: '/zhcx/djbcx/getZdjjxxBybdcdyid',
47 method: 'get',
48 params: data
49 })
50 }
51
52 // 获取宗地信息
43 export function getZdjjxxBySLdy(data) { 53 export function getZdjjxxBySLdy(data) {
44 return request({ 54 return request({
45 url: '/zhcx/djbcx/getZdjjxxBySLdy', 55 url: '/zhcx/djbcx/getZdjjxxBybdcdyid',
56 method: 'get',
57 params: data
58 })
59 }
60
61 // 获取不动产权利及其他事项
62 export function getBdcqljqtsx(data) {
63 return request({
64 url: '/zhcx/djbcx/getBdcqljqtsx',
46 method: 'get', 65 method: 'get',
47 params: data 66 params: data
48 }) 67 })
......
...@@ -118,9 +118,8 @@ export default { ...@@ -118,9 +118,8 @@ export default {
118 118
119 .ls-title { 119 .ls-title {
120 padding: 16px; 120 padding: 16px;
121 background: linear-gradient(2deg, #00CCFF, transparent);
122 color: #ffffff; 121 color: #ffffff;
123 122 background: linear-gradient(-2deg,#409EFF, transparent)
124 } 123 }
125 124
126 .ls-title .svg-icon { 125 .ls-title .svg-icon {
......
1 <template>
2 <div class="bdcqldjml">
3 <table class="mlTable">
4 <tr>
5 <th colspan="5" class="title">不动产权利登记目录</th>
6 </tr>
7 <tr>
8 <td>序号</td>
9 <td>不动产单元号</td>
10 <td>不动产类型</td>
11 <td>所在本数</td>
12 <td>备注</td>
13 </tr>
14 <tr v-for="(item, index) in bdcqlml" :key="index">
15 <td>{{ index + 1 }}</td>
16 <td>{{ item.bdcdyh }}</td>
17 <td>{{ item.bdclx }}</td>
18 <td>{{ item.szbs }}</td>
19 <td>{{ item.bz }}</td>
20 </tr>
21 </table>
22 </div>
23 </template>
24
25 <script>
26 import { getBdcqldjmlByBdcdyid } from "@/api/zhcx.js";
27 export default {
28 data() {
29 return {
30 bdcqlml: [],
31 propsParam: this.$attrs,
32 };
33 },
34 mounted() {
35 getBdcqldjmlByBdcdyid({ bdcdyid: this.propsParam.bdcdyid }).then((res) => {
36 if (res.code === 200) {
37 this.bdcqlml = res.result;
38 }
39 });
40 },
41 };
42 </script>
43
44 <style lang="scss" scoped>
45 .bdcqldjml {
46 width: 100%;
47 height: 100%;
48 background: #fff;
49 overflow-y: scroll;
50 .mlTable {
51 width: 90%;
52 margin: 0 auto;
53 color: #333;
54 border-spacing: 1px;
55 background-color: #333;
56
57 .title {
58 font-size: 20px;
59 line-height: 60px;
60 font-family: serif;
61 position: relative;
62 }
63
64 td,
65 th {
66 background-color: white;
67 line-height: 30px;
68 padding: 0 4px;
69 text-align: center;
70 }
71 }
72 }
73 </style>
1 <template>
2 <div class="bdcqljqtsx">
3 <div class="content">
4 <div class="title">不动产权利及其他事项<br />登记信息</div>
5 <div>
6 不动产单元号:
7 <div class="underline">{{ propsParam.bdcdyh }}</div>
8 </div>
9 <br /><br /><br />
10 <div>
11 <div class="underline">{{ qlxxList.ztqlmc }}</div>
12 登记 共
13 <div class="underline">{{ qlxxList.ztql.total }}</div>
14 条
15 </div>
16 <br /><br />
17 <div>
18 抵押权登记 共
19 <div class="underline">{{ qlxxList.diyaq.total }}</div>
20 条
21 </div>
22 <br />
23 <div>
24 地役权登记 共
25 <div class="underline">{{ qlxxList.diyiq.total }}</div>
26 条
27 </div>
28 <br />
29 <div>
30 预告登记 共
31 <div class="underline">{{ qlxxList.ygdj.total }}</div>
32 条
33 </div>
34 <br />
35 <div>
36 异议登记 共
37 <div class="underline">{{ qlxxList.yydj.total }}</div>
38 条
39 </div>
40 <br />
41 <div>
42 查封登记 共
43 <div class="underline">{{ qlxxList.cfdj.total }}</div>
44 条
45 </div>
46 <br />
47 </div>
48 </div>
49 </template>
50
51 <script>
52 import { getBdcqljqtsx } from "@/api/zhcx.js";
53 export default {
54 name: "bdcqljqtsx",
55 data() {
56 return {
57 //传递参数
58 propsParam: this.$attrs,
59 qlxxList: "",
60 };
61 },
62 mounted() {
63 getBdcqljqtsx({
64 bdcdyid: this.propsParam.bdcdyid,
65 bdcdyh: this.propsParam.bdcdyh,
66 }).then((res) => {
67 if (res.code === 200) {
68 this.qlxxList = res.result;
69 }
70 });
71 },
72 };
73 </script>
74
75 <style lang="scss" scoped>
76 .bdcqljqtsx {
77 width: 100%;
78 height: 100%;
79 background: #fff;
80
81 .content {
82 width: 50%;
83 height: 100%;
84 margin: 0 auto;
85 text-align: right;
86 color: #333;
87 font-family: "Arial Negreta", "Arial Normal", "Arial", sans-serif;
88 font-weight: 700;
89 font-size: 18px;
90 line-height: 16px;
91
92 .title {
93 font-size: 32px;
94 text-align: center;
95 padding: 40px 0;
96 line-height: 34px;
97 }
98
99 .underline {
100 font-size: 14px;
101 font-weight: normal;
102 text-decoration: underline;
103 display: inline-block;
104 }
105 }
106 }
107 </style>
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
9 v-for="item in qsztList"
10 :key="item.value"
11 :label="item.value"
12 >{{ item.label }}</el-checkbox
13 >
14 </el-checkbox-group>
15 </div>
16 </div>
17 <div class="xxTableBox">
18 <table class="xxTable">
19 <tr v-for="(item, colindex) in columns" :key="colindex">
20 <td>
21 {{ item.label }}
22 </td>
23 <td
24 v-for="(row, index) in tableData"
25 :key="index"
26 :class="[
27 row.qszt == '2' ? 'lishi' : '',
28 row.qszt == '0' ? 'linshi' : '',
29 item.prop == 'qszt' && row.qszt == '0' ? 'linshiIcon' : '',
30 ]"
31 >
32 <div class="icon" v-if="item.prop == 'qszt' && row.qszt == '0'">
33 正在办理
34 </div>
35 <span v-if="item.prop == 'qszt'">
36 {{ getQsztName(row[item.prop]) }}
37 </span>
38
39 <span v-else> {{ row[item.prop] }}</span>
40 </td>
41 <td v-for="count in emptycolNum" :key="~count"></td>
42 </tr>
43 </table>
44 </div>
45 </div>
46 </div>
47 </template>
48
49 <script>
50 import { getJsydsyqList } from "@/api/zhcx.js";
51 import { datas } from "./qlxxFormData.js";
52 export default {
53 data() {
54 return {
55 title: "查封登记信息",
56 qsztList: datas.columns().qsztList,
57 checkList: datas.columns().checkList,
58 //传递参数
59 propsParam: this.$attrs,
60 //列表数据
61 tableData: [],
62 //空列值个数
63 emptycolNum: 0,
64 //列名称对象
65 columns: datas.columns().CFDJ,
66 };
67 },
68 created() {
69 this.loadData();
70 },
71 methods: {
72 loadData() {
73 getJsydsyqList({
74 bdcdyid: this.propsParam.bdcdyid,
75 qllx: this.propsParam.qllx,
76 qszt: this.checkList,
77 }).then((res) => {
78 if (res.code === 200) {
79 this.tableData = res.result;
80 this.emptycolNum = 3 - this.tableData.length;
81 }
82 });
83 },
84 checkChange() {
85 this.loadData();
86 },
87 getQsztName(code) {
88 let name = "";
89 for (let item of this.qsztList) {
90 if (item.value == code) {
91 name = item.label;
92 break;
93 }
94 }
95 return name;
96 },
97 },
98 };
99 </script>
100
101 <style lang="scss" scoped>
102 @import "./qlxxCommon.scss";
103 </style>
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
9 v-for="item in qsztList"
10 :key="item.value"
11 :label="item.value"
12 >{{ item.label }}</el-checkbox
13 >
14 </el-checkbox-group>
15 </div>
16 </div>
17 <div class="xxTableBox">
18 <table class="xxTable">
19 <tr v-for="(item, colindex) in columns" :key="colindex">
20 <td>
21 {{ item.label }}
22 </td>
23 <td
24 v-for="(row, index) in tableData"
25 :key="index"
26 :class="[
27 row.qszt == '2' ? 'lishi' : '',
28 row.qszt == '0' ? 'linshi' : '',
29 item.prop == 'qszt' && row.qszt == '0' ? 'linshiIcon' : '',
30 ]"
31 >
32 <div class="icon" v-if="item.prop == 'qszt' && row.qszt == '0'">
33 正在办理
34 </div>
35 <span v-if="item.prop == 'qszt'">
36 {{ getQsztName(row[item.prop]) }}
37 </span>
38
39 <span v-else> {{ row[item.prop] }}</span>
40 </td>
41 <td v-for="count in emptycolNum" :key="~count"></td>
42 </tr>
43 </table>
44 </div>
45 </div>
46 </div>
47 </template>
48
49 <script>
50 import { getJsydsyqList } from "@/api/zhcx.js";
51 import { datas } from "./qlxxFormData.js";
52 export default {
53 data() {
54 return {
55 title: "抵押权登记信息",
56 qsztList: datas.columns().qsztList,
57 checkList: datas.columns().checkList,
58 //传递参数
59 propsParam: this.$attrs,
60 //列表数据
61 tableData: [],
62 //空列值个数
63 emptycolNum: 0,
64 //列名称对象
65 columns: datas.columns().DYAQ,
66 };
67 },
68 created() {
69 this.loadData();
70 },
71 methods: {
72 loadData() {
73 getJsydsyqList({
74 bdcdyid: this.propsParam.bdcdyid,
75 qllx: this.propsParam.qllx,
76 qszt: this.checkList,
77 }).then((res) => {
78 if (res.code === 200) {
79 this.tableData = res.result;
80 this.emptycolNum = 3 - this.tableData.length;
81 }
82 });
83 },
84 checkChange() {
85 this.loadData();
86 },
87 getQsztName(code) {
88 let name = "";
89 for (let item of this.qsztList) {
90 if (item.value == code) {
91 name = item.label;
92 break;
93 }
94 }
95 return name;
96 },
97 },
98 };
99 </script>
100
101 <style lang="scss" scoped>
102 @import "./qlxxCommon.scss";
103 </style>
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
9 v-for="item in qsztList"
10 :key="item.value"
11 :label="item.value"
12 >{{ item.label }}</el-checkbox
13 >
14 </el-checkbox-group>
15 </div>
16 </div>
17 <div class="xxTableBox">
18 <table class="xxTable">
19 <tr v-for="(item, colindex) in columns" :key="colindex">
20 <td>
21 {{ item.label }}
22 </td>
23 <td
24 v-for="(row, index) in tableData"
25 :key="index"
26 :class="[
27 row.qszt == '2' ? 'lishi' : '',
28 row.qszt == '0' ? 'linshi' : '',
29 item.prop == 'qszt' && row.qszt == '0' ? 'linshiIcon' : '',
30 ]"
31 >
32 <div class="icon" v-if="item.prop == 'qszt' && row.qszt == '0'">
33 正在办理
34 </div>
35 <span v-if="item.prop == 'qszt'">
36 {{ getQsztName(row[item.prop]) }}
37 </span>
38
39 <span v-else> {{ row[item.prop] }}</span>
40 </td>
41 <td v-for="count in emptycolNum" :key="~count"></td>
42 </tr>
43 </table>
44 </div>
45 </div>
46 </div>
47 </template>
48
49 <script>
50 import { getJsydsyqList } from "@/api/zhcx.js";
51 import { datas } from "./qlxxFormData.js";
52 export default {
53 data() {
54 return {
55 title: "地役权登记信息",
56 qsztList: datas.columns().qsztList,
57 checkList: datas.columns().checkList,
58 //传递参数
59 propsParam: this.$attrs,
60 //列表数据
61 tableData: [],
62 //空列值个数
63 emptycolNum: 0,
64 //列名称对象
65 columns: datas.columns().DYIQ,
66 };
67 },
68 created() {
69 this.loadData();
70 },
71 methods: {
72 loadData() {
73 getJsydsyqList({
74 bdcdyid: this.propsParam.bdcdyid,
75 qllx: this.propsParam.qllx,
76 qszt: this.checkList,
77 }).then((res) => {
78 if (res.code === 200) {
79 this.tableData = res.result;
80 this.emptycolNum = 3 - this.tableData.length;
81 }
82 });
83 },
84 checkChange() {
85 this.loadData();
86 },
87 getQsztName(code) {
88 let name = "";
89 for (let item of this.qsztList) {
90 if (item.value == code) {
91 name = item.label;
92 break;
93 }
94 }
95 return name;
96 },
97 },
98 };
99 </script>
100
101 <style lang="scss" scoped>
102 @import "./qlxxCommon.scss";
103 </style>
1 <template>
2 <div class="content">
3 <div class="left">
4 <el-tree
5 ref="tree"
6 :data="treedata"
7 :props="defaultProps"
8 @node-click="handleNodeClick"
9 :default-expand-all="true"
10 :expand-on-click-node="false"
11 node-key="id"
12 :default-checked-keys="[showTab]"
13 >
14 </el-tree>
15 </div>
16 <div class="right">
17 <component :is="componentTag" v-bind="currentSelectProps" />
18 </div>
19 </div>
20 </template>
21 <script>
22 import { getBdcqljqtsx } from "@/api/zhcx.js";
23 import axios from "axios";
24 export default {
25 data() {
26 return {
27 //接收参数
28 // propsParam: this.$attrs,
29 //左侧目录
30 catalog: {},
31 //选择加载哪一个组件
32 componentTag: "JSYDSYQ",
33 //子组件接收参数
34 currentSelectProps: {},
35 //左侧树形结构数据
36 treedata: [],
37 bdcqljqtsxData: [],
38 defaultProps: {
39 children: "children",
40 label: "label",
41 },
42 showTab: "bdcqldjml", // 选中状态,根据表格中权利类型判断
43 };
44 },
45 props: ["formData"],
46 mounted() {
47 this.loadData();
48 },
49 methods: {
50 loadData() {
51 getBdcqljqtsx({
52 bdcdyid: this.formData.bdcdyid,
53 bdcdyh: this.formData.bdcdyh,
54 }).then((res) => {
55 if (res.code === 200) {
56 this.loadLeftMenu(res.result);
57 }
58 });
59 //this.$alert(this.bdcqlml);
60 this.currentSelectProps = {
61 bdcdyid: this.formData.bdcdyid,
62 bdcdyh: this.formData.bdcdyh,
63 qllx: this.formData.qllx,
64 bsmQlxx: this.formData.bsmQlxx,
65 };
66
67 this.componentTag = (r) =>
68 require.ensure([], () =>
69 r(require("@/views/registerBook/jsydsyq.vue"))
70 );
71 },
72 loadLeftMenu(qlxxData) {
73 this.treedata.push({
74 id: "djbfm",
75 form: "djbfm.vue",
76 label: "登记簿封面",
77 children: [],
78 });
79 this.treedata[0].children.push({
80 id: "zdjbxx",
81 form: "zdjbxx.vue",
82 label: "宗地基本信息\n (" + this.formData.bdcdyh.substring(0, 19) + ")",
83 children: [],
84 });
85 this.treedata[0].children.push({
86 id: "bdcqldjml",
87 form: "bdcqldjml.vue",
88 label: "不动产权利登记目录",
89 children: [],
90 });
91 this.treedata[0].children[1].children.push({
92 id: "bdcqljqtsx",
93 form: "bdcqljqtsx.vue",
94 label:
95 "不动产权利及其他事项\n (" + this.formData.bdcdyh.slice(19) + ")",
96 children: [],
97 });
98 this.treedata[0].children[1].children[0].children.push({
99 id: "jsydsyq",
100 form: "jsydsyq.vue",
101 label:
102 qlxxData.ztqlmc +
103 "(临:" +
104 qlxxData.ztql.linShi +
105 "，现:" +
106 qlxxData.ztql.xianShi +
107 "，历:" +
108 qlxxData.ztql.liShi +
109 ")",
110 });
111 this.treedata[0].children[1].children[0].children.push({
112 id: "diyaq",
113 form: "diyaq.vue",
114 label:
115 "抵押权(临:" +
116 qlxxData.diyaq.linShi +
117 "，现:" +
118 qlxxData.diyaq.xianShi +
119 "，历:" +
120 qlxxData.diyaq.liShi +
121 ")",
122 });
123 this.treedata[0].children[1].children[0].children.push({
124 id: "diyiq",
125 form: "diyiq.vue",
126 label:
127 "地役权(临:" +
128 qlxxData.diyiq.linShi +
129 "，现:" +
130 qlxxData.diyiq.xianShi +
131 "，历:" +
132 qlxxData.diyiq.liShi +
133 ")",
134 });
135 this.treedata[0].children[1].children[0].children.push({
136 id: "ygdj",
137 form: "ygdj.vue",
138 label:
139 "预告登记(临:" +
140 qlxxData.ygdj.linShi +
141 "，现:" +
142 qlxxData.ygdj.xianShi +
143 "，历:" +
144 qlxxData.ygdj.liShi +
145 ")",
146 });
147 this.treedata[0].children[1].children[0].children.push({
148 id: "yydj",
149 form: "yydj.vue",
150 label:
151 "异议登记(临:" +
152 qlxxData.yydj.linShi +
153 "，现:" +
154 qlxxData.yydj.xianShi +
155 "，历:" +
156 qlxxData.yydj.liShi +
157 ")",
158 });
159 this.treedata[0].children[1].children[0].children.push({
160 id: "cfdj",
161 form: "cfdj.vue",
162 label:
163 "查封登记(临:" +
164 qlxxData.cfdj.linShi +
165 "，现:" +
166 qlxxData.cfdj.xianShi +
167 "，历:" +
168 qlxxData.cfdj.liShi +
169 ")",
170 });
171 },
172 handleNodeClick(data, node, elem) {
173 this.componentTag = (r) =>
174 require.ensure([], () =>
175 r(require("@/views/registerBook/" + data.form))
176 );
177 },
178 },
179 };
180 </script>
181 <style scoped lang="scss">
182 .content {
183 width: 100%;
184 height: 100%;
185 display: flex;
186
187 .left {
188 width: 256px;
189 height: 704px;
190 background-color: #f5f5f5;
191 color: #333;
192 border: 1px solid rgb(228, 228, 228);
193 }
194
195 .right {
196 width: calc(100% - 256px);
197 height: 704px;
198 // overflow-y: scroll;
199 overflow: auto;
200 background-color: #f5f5f5;
201 border: 1px solid rgb(228, 228, 228);
202 }
203 }
204
205 /deep/ .expanded.el-tree-node__expand-icon,
206 /deep/ .el-tree-node__expand-icon {
207 visibility: hidden;
208 }
209
210 /deep/ .el-tree-node__content {
211 border: 1px solid rgb(228, 228, 228);
212 height: 45px;
213 }
214
215 /deep/ .el-tree-node:focus > .el-tree-node__content {
216 background-color: #f5f5f5;
217 color: #0079fe;
218 border-right: 4px solid #0079fe;
219 }
220
221 /deep/.el-tree-node {
222 white-space: pre-wrap;
223 }
224
225 /deep/ .is-current > .el-tree-node__content {
226 background-color: #f5f5f5;
227 color: #0079fe;
228 border-right: 4px solid #0079fe;
229 }
230 </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 { getDjbfm } from "@/api/zhcx.js";
37
38 export default {
39 data() {
40 return {
41 //传递参数
42 propsParam: this.$attrs,
43 info: {},
44 };
45 },
46 mounted() {
47 this.loadData();
48 },
49 methods: {
50 loadData() {
51 getDjbfm(
52 this.propsParam.bsmQlxx
53 ).then((res) => {
54 if (res.code === 200) {
55 this.info = res.result;
56 }
57 });
58 },
59 },
60 };
61 </script>
62
63 <style lang="scss" scoped>
64 .djbfm {
65 width: 100%;
66 height: 100%;
67 background: #fff;
68 border-right: 1px solid #ccc;
69 line-height: 45px;
70 text-align: center;
71 font-size: 18px;
72 font-family: serif;
73 position: relative;
74 font {
75 border-bottom: 1px solid #000;
76 display: inline-block;
77 padding: 0 15px;
78 line-height: 16px;
79 }
80 .title {
81 height: 40%;
82 display: flex;
83 font-size: 38px;
84 color: #000;
85 justify-content: center;
86 align-items: center;
87 }
88 .bottom {
89 position: absolute;
90 bottom: 0px;
91 text-align: center;
92 width: 100%;
93 left: 0;
94 height: 100px;
95 line-height: 100px;
96 p {
97 font-size: 28px;
98 }
99 font {
100 font-size: 24px;
101 line-height: 24px;
102 }
103 }
104 }
105 </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
...@@ -5,7 +5,12 @@ ...@@ -5,7 +5,12 @@
5 {{ title }} 5 {{ title }}
6 <div class="checkbox"> 6 <div class="checkbox">
7 <el-checkbox-group v-model="checkList" @change="checkChange"> 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> 8 <el-checkbox
9 v-for="item in qsztList"
10 :key="item.value"
11 :label="item.value"
12 >{{ item.label }}</el-checkbox
13 >
9 </el-checkbox-group> 14 </el-checkbox-group>
10 </div> 15 </div>
11 </div> 16 </div>
...@@ -15,11 +20,15 @@ ...@@ -15,11 +20,15 @@
15 <td> 20 <td>
16 {{ item.label }} 21 {{ item.label }}
17 </td> 22 </td>
18 <td v-for="(row, index) in tableData" :key="index" :class="[ 23 <td
24 v-for="(row, index) in tableData"
25 :key="index"
26 :class="[
19 row.qszt == '2' ? 'lishi' : '', 27 row.qszt == '2' ? 'lishi' : '',
20 row.qszt == '0' ? 'linshi' : '', 28 row.qszt == '0' ? 'linshi' : '',
21 item.prop == 'qszt' && row.qszt == '0' ? 'linshiIcon' : '', 29 item.prop == 'qszt' && row.qszt == '0' ? 'linshiIcon' : '',
22 ]"> 30 ]"
31 >
23 <div class="icon" v-if="item.prop == 'qszt' && row.qszt == '0'"> 32 <div class="icon" v-if="item.prop == 'qszt' && row.qszt == '0'">
24 正在办理 33 正在办理
25 </div> 34 </div>
...@@ -38,47 +47,29 @@ ...@@ -38,47 +47,29 @@
38 </template> 47 </template>
39 48
40 <script> 49 <script>
41 import { datas } from "./jsydsyq.js";
42 import { getJsydsyqList } from "@/api/zhcx.js"; 50 import { getJsydsyqList } from "@/api/zhcx.js";
51 import { datas } from "./qlxxFormData.js";
43 export default { 52 export default {
44 data () { 53 data() {
45 return { 54 return {
46 qsztList: [ 55 title: "建设用地使用权、宅基地使用权登记信息",
47 { 56 qsztList: datas.columns().qsztList,
48 value: "0", 57 checkList: datas.columns().checkList,
49 label: "临时",
50 },
51 {
52 value: "1",
53 label: "现势",
54 },
55 {
56 value: "2",
57 label: "历史",
58 },
59 ],
60 checkList: ["0", "1", "2"],
61 //传递参数 58 //传递参数
62 propsParam: {}, 59 propsParam: this.$attrs,
63 //列表数据 60 //列表数据
64 tableData: [], 61 tableData: [],
65 //空列值个数 62 //空列值个数
66 emptycolNum: 0, 63 emptycolNum: datas.columns().emptycolNum,
67 //列名称对象 64 //列名称对象
68 columns: [], 65 columns: datas.columns().JSYDSYQ,
69 title: "建设用地使用权、宅基地使用权登记信息",
70 }; 66 };
71 }, 67 },
72 created () { 68 created() {
73 this.propsParam = this.$attrs;
74 console.log(this.$attrs, 'this.$attrs;');
75 this.columns = datas.columns();
76 this.loadData(); 69 this.loadData();
77 // this.$alert(datas.columns());
78 }, 70 },
79 methods: { 71 methods: {
80 loadData () { 72 loadData() {
81 //this.$alert(this.propsParam.bdcdyh);
82 getJsydsyqList({ 73 getJsydsyqList({
83 bdcdyid: this.propsParam.bdcdyid, 74 bdcdyid: this.propsParam.bdcdyid,
84 qllx: this.propsParam.qllx, 75 qllx: this.propsParam.qllx,
...@@ -86,14 +77,19 @@ export default { ...@@ -86,14 +77,19 @@ export default {
86 }).then((res) => { 77 }).then((res) => {
87 if (res.code === 200) { 78 if (res.code === 200) {
88 this.tableData = res.result; 79 this.tableData = res.result;
89 this.emptycolNum = 3 - this.tableData.length; 80 // this.emptycolNum -= this.tableData.length;
81 if (this.tableData.length < this.emptycolNum) {
82 this.emptycolNum -= this.tableData.length;
83 }else{
84 this.emptycolNum = 0;
85 }
90 } 86 }
91 }); 87 });
92 }, 88 },
93 checkChange () { 89 checkChange() {
94 this.loadData(); 90 this.loadData();
95 }, 91 },
96 getQsztName (code) { 92 getQsztName(code) {
97 let name = ""; 93 let name = "";
98 for (let item of this.qsztList) { 94 for (let item of this.qsztList) {
99 if (item.value == code) { 95 if (item.value == code) {
...@@ -108,5 +104,5 @@ export default { ...@@ -108,5 +104,5 @@ export default {
108 </script> 104 </script>
109 105
110 <style lang="scss" scoped> 106 <style lang="scss" scoped>
111 // @import "./qlxxCommon.scss"; 107 @import "./qlxxCommon.scss";
112 </style> 108 </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 import filter from '@/utils/filter.js'
2
3 class data extends filter {
4 constructor() {
5 super()
6 }
7 columns() {
8 return {
9 //空列值个数
10 emptycolNum: 3,
11 checkList: ["0", "1", "2"],
12 //权属状态集合
13 qsztList: [
14 {
15 value: "0",
16 label: "临时",
17 },
18 {
19 value: "1",
20 label: "现势",
21 },
22 {
23 value: "2",
24 label: "历史",
25 },
26 ],
27 JSYDSYQ: [
28 {
29 prop: "qszt",
30 label: "权属状态",
31 },
32 {
33 prop: "qllxmc",
34 label: "权利类型",
35 },
36 {
37 prop: "djlxmc",
38 label: "登记类型",
39 },
40 {
41 prop: "ssywh",
42 label: "上手业务号",
43 },
44 {
45 prop: "dah",
46 label: "档案号",
47 },
48 {
49 prop: "ywh",
50 label: "业务号",
51 },
52 {
53 prop: "bdcdyh",
54 label: "不动产单元号",
55 },
56 {
57 prop: "zl",
58 label: "坐落",
59 },
60 {
61 prop: "qlrlx",
62 label: "权利人类型",
63 },
64 {
65 prop: "qlrmc",
66 label: "权利人",
67 },
68 {
69 prop: "qlrzjzl",
70 label: "证件种类",
71 },
72 {
73 prop: "qlrzjhm",
74 label: "证件号",
75 },
76 {
77 prop: "gyfs",
78 label: "共有情况",
79 },
80 {
81 prop: "mj",
82 label: "使用权面积(m²)",
83 },
84 {
85 prop: "qlxz",
86 label: "权利性质",
87 },
88 {
89 prop: "ytmc",
90 label: "土地用途",
91 },
92 {
93 prop: "syqqzsj",
94 label: "使用权起止时间",
95 },
96 // {
97 // prop: "syqjssj",
98 // label: "使用权结束时间",
99 // },
100 // {
101 // prop: "tdsyqx",
102 // label: "土地使用期限",
103 // },
104 {
105 prop: "tdsyqx",
106 label: "土地使用期限",
107 },
108 {
109 prop: "qdjg",
110 label: "取得价格(万元)",
111 },
112 {
113 prop: "djyy",
114 label: "登记原因",
115 },
116 {
117 prop: "bdcqzh",
118 label: "不动产权证号",
119 },
120 {
121 prop: "djsj",
122 label: "登记时间",
123 },
124 {
125 prop: "dbr",
126 label: "登簿人",
127 },
128 {
129 prop: "fj",
130 label: "附记",
131 },
132 ],
133 DYAQ: [
134 {
135 prop: "ssywh",
136 label: "上手业务号",
137 },
138 {
139 prop: "dah",
140 label: "档案号",
141 },
142 {
143 prop: "ywh",
144 label: "业务号",
145 },
146 {
147 prop: "bdcdyh",
148 label: "不动产单元号",
149 },
150 {
151 prop: "zjjzwzl",
152 label: "在建建筑物坐落",
153 },
154 {
155 prop: "dybdclx",
156 label: "抵押不动产类型",
157 },
158 {
159 prop: "dyqr",
160 label: "抵押权人",
161 },
162 {
163 prop: "zjzl",
164 label: "证件种类",
165 },
166 {
167 prop: "zjh",
168 label: "证件号",
169 },
170 {
171 prop: "dyr",
172 label: "抵押人",
173 },
174 {
175 prop: "dyfs",
176 label: "抵押方式",
177 },
178 {
179 prop: "sfygdj",
180 label: "是否预告登记",
181 },
182 {
183 prop: "zjjzwdyfw",
184 label: "在建建筑物抵押范围",
185 },
186 {
187 prop: "dymj",
188 label: "抵押面积",
189 },
190 {
191 prop: "bdbzzqse",
192 label: "被担保主债权数额(万元)",
193 },
194 {
195 prop: "dbfw",
196 label: "担保范围",
197 },
198 {
199 prop: "zwlxqssj",
200 label: "债务履行起始时间",
201 },
202 {
203 prop: "zwlxjssj",
204 label: "债务履行结束时间",
205 },
206 {
207 prop: "zwlxqx",
208 label: "债务履行期限(债务确定期间)",
209 },
210 {
211 prop: "zgzqqdsshse",
212 label: "最高债权确定事实和数额",
213 },
214 {
215 prop: "sfczyd",
216 label: "是否存在禁止或限制转让抵押不动产的约定",
217 },
218 {
219 prop: "djyy",
220 label: "登记原因",
221 },
222 {
223 prop: "bdcdjzmh",
224 label: "不动产登记证明号",
225 },
226 {
227 prop: "djsj",
228 label: "登记时间",
229 },
230 {
231 prop: "dbr",
232 label: "登簿人",
233 },
234 {
235 prop: "djjg",
236 label: "登记机构",
237 },
238 {
239 prop: "fj",
240 label: "附记",
241 },
242 {
243 prop: "qlqtzk",
244 label: "权利其他状况",
245 },
246 {
247 prop: "zxdyywh",
248 label: "注销抵押业务号",
249 },
250 {
251 prop: "zxdyyy",
252 label: "注销抵押原因",
253 },
254 ],
255 DYIQ: [
256 {
257 prop: "ssywh",
258 label: "上手业务号",
259 },
260 {
261 prop: "dah",
262 label: "档案号",
263 },
264 {
265 prop: "ywh",
266 label: "业务号",
267 },
268 {
269 prop: "gydbdcdyh",
270 label: "供役地不动产单元号",
271 },
272 {
273 prop: "gydqlr",
274 label: "供役地权利人",
275 },
276 {
277 prop: "gydqlrzjzl",
278 label: "供役地权利人证件种类",
279 },
280 {
281 prop: "xydbdcdyh",
282 label: "需役地不动产单元号",
283 },
284 {
285 prop: "xydzl",
286 label: "需役地坐落",
287 },
288 {
289 prop: "xydqlr",
290 label: "需役地权利人",
291 },
292 {
293 prop: "xydqlrzjzl",
294 label: "需役地权利人证件种类",
295 },
296 {
297 prop: "xydzjh",
298 label: "需役地证件号",
299 },
300 {
301 prop: "djyy",
302 label: "登记原因",
303 },
304 {
305 prop: "dyqnr",
306 label: "地役权内容",
307 },
308 {
309 prop: "qlqssj",
310 label: "权利起始时间",
311 },
312 {
313 prop: "qljssj",
314 label: "权利结束时间",
315 },
316 {
317 prop: "bdcdjzmh",
318 label: "不动产登记证明号",
319 },
320 {
321 prop: "qxdm",
322 label: "区县代码",
323 },
324 {
325 prop: "djjg",
326 label: "登记机构",
327 },
328 {
329 prop: "dbr",
330 label: "登簿人",
331 },
332 {
333 prop: "djsj",
334 label: "登记时间",
335 },
336 ],
337 YGDJ: [
338 {
339 prop: "ssywh",
340 label: "上手业务号",
341 },
342 {
343 prop: "dah",
344 label: "档案号",
345 },
346 {
347 prop: "ywh",
348 label: "业务号",
349 },
350 {
351 prop: "bdcdyh",
352 label: "不动产单元号",
353 },
354 {
355 prop: "zl",
356 label: "坐落",
357 },
358 {
359 prop: "qlr",
360 label: "权利人",
361 },
362 {
363 prop: "qlrzjzl",
364 label: "证件种类",
365 },
366 {
367 prop: "qlrzjh",
368 label: "证件号",
369 },
370 {
371 prop: "ywr",
372 label: "义务人",
373 },
374 {
375 prop: "ywrzjzl",
376 label: "证件种类",
377 },
378 {
379 prop: "ywrzjh",
380 label: "证件号",
381 },
382 {
383 prop: "fwxz",
384 label: "房屋性质",
385 },
386 {
387 prop: "ghyt",
388 label: "规划用途",
389 },
390 {
391 prop: "fwzcs",
392 label: "房屋总层数",
393 },
394 {
395 prop: "fwszc",
396 label: "房屋所在层",
397 },
398 {
399 prop: "jzmj",
400 label: "建筑面积",
401 },
402 {
403 prop: "djyy",
404 label: "登记原因",
405 },
406 {
407 prop: "bdbzzqse",
408 label: "取得价格/被担保主债权数额",
409 },
410 {
411 prop: "jedw",
412 label: "金额单位",
413 },
414 {
415 prop: "dbfw",
416 label: "担保范围",
417 },
418 {
419 prop: "sfczyd",
420 label: "是否存在禁止或限制转让抵押不动产的约定",
421 },
422 {
423 prop: "djsj",
424 label: "登记时间",
425 },
426 {
427 prop: "bdcdjzmh",
428 label: "不动产登记证明号",
429 },
430 {
431 prop: "dbr",
432 label: "登簿人",
433 },
434 {
435 prop: "zxygywh",
436 label: "注销预告业务号",
437 },
438 {
439 prop: "zxygyy",
440 label: "注销预告原因",
441 },
442 {
443 prop: "zxsj",
444 label: "注销时间",
445 },
446 {
447 prop: "qszt",
448 label: "权属状态",
449 },
450 ],
451 CFDJ: [
452 {
453 prop: "ssywh",
454 label: "上手业务号",
455 },
456 {
457 prop: "dah",
458 label: "档案号",
459 },
460 {
461 prop: "ywh",
462 label: "业务号",
463 },
464 {
465 prop: "bdcdyh",
466 label: "不动产单元号",
467 },
468 {
469 prop: "zl",
470 label: "坐落",
471 },
472 {
473 prop: "bdcqlr",
474 label: "不动产权利人",
475 },
476 {
477 prop: "zjzl",
478 label: "证件种类",
479 },
480 {
481 prop: "zjh",
482 label: "证件号",
483 },
484 {
485 prop: "cflx",
486 label: "查封类型",
487 },
488 {
489 prop: "cfjg",
490 label: "查封机关",
491 },
492 {
493 prop: "cfwh",
494 label: "查封文号",
495 },
496 {
497 prop: "cfwj",
498 label: "查封文件",
499 },
500 {
501 prop: "cfqssj",
502 label: "查封起始时间",
503 },
504 {
505 prop: "cfjssj",
506 label: "查封结束时间",
507 },
508 {
509 prop: "cfqx",
510 label: "查封期限",
511 },
512 {
513 prop: "cffw",
514 label: "查封范围",
515 },
516 {
517 prop: "djjg",
518 label: "登记机构",
519 },
520 {
521 prop: "dbr",
522 label: "登簿人",
523 },
524 {
525 prop: "djsj",
526 label: "登记时间",
527 },
528 {
529 prop: "jfywh",
530 label: "解封业务号",
531 },
532 {
533 prop: "jfjg",
534 label: "解封机关",
535 },
536 {
537 prop: "jfwh",
538 label: "解封文号",
539 },
540 {
541 prop: "jfwj",
542 label: "解封文件",
543 },
544 {
545 prop: "jfdjsj",
546 label: "解封登记时间",
547 },
548 {
549 prop: "jfdbr",
550 label: "解封登簿人",
551 },
552 ],
553 YYDJ: [
554 {
555 prop: "ssywh",
556 label: "上手业务号",
557 },
558 {
559 prop: "dah",
560 label: "档案号",
561 },
562 {
563 prop: "ywh",
564 label: "业务号",
565 },
566 {
567 prop: "bdcdyh",
568 label: "不动产单元号",
569 },
570 {
571 prop: "zl",
572 label: "坐落",
573 },
574 {
575 prop: "yyr",
576 label: "异议人",
577 },
578 {
579 prop: "zjzl",
580 label: "证件种类",
581 },
582 {
583 prop: "zjh",
584 label: "证件号",
585 },
586 {
587 prop: "yysx",
588 label: "异议事项",
589 },
590 {
591 prop: "bdcdjzmh",
592 label: "不动产登记证明号",
593 },
594 {
595 prop: "djjg",
596 label: "登记机构",
597 },
598 {
599 prop: "dbr",
600 label: "登簿人",
601 },
602 {
603 prop: "djsj",
604 label: "登记时间",
605 },
606 {
607 prop: "zxyyywh",
608 label: "注销异议业务号",
609 },
610 {
611 prop: "zxyyyy",
612 label: "注销异议原因",
613 },
614 {
615 prop: "zxyydbr",
616 label: "注销异议登簿人",
617 },
618 {
619 prop: "zxyydjsj",
620 label: "注销异议登记时间",
621 },
622 ],
623 }
624 }
625
626
627 }
628
629 let datas = new data()
630
631 export {
632 datas
633 }
...\ 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
9 v-for="item in qsztList"
10 :key="item.value"
11 :label="item.value"
12 >{{ item.label }}</el-checkbox
13 >
14 </el-checkbox-group>
15 </div>
16 </div>
17 <div class="xxTableBox">
18 <table class="xxTable">
19 <tr v-for="(item, colindex) in columns" :key="colindex">
20 <td>
21 {{ item.label }}
22 </td>
23 <td
24 v-for="(row, index) in tableData"
25 :key="index"
26 :class="[
27 row.qszt == '2' ? 'lishi' : '',
28 row.qszt == '0' ? 'linshi' : '',
29 item.prop == 'qszt' && row.qszt == '0' ? 'linshiIcon' : '',
30 ]"
31 >
32 <div class="icon" v-if="item.prop == 'qszt' && row.qszt == '0'">
33 正在办理
34 </div>
35 <span v-if="item.prop == 'qszt'">
36 {{ getQsztName(row[item.prop]) }}
37 </span>
38
39 <span v-else> {{ row[item.prop] }}</span>
40 </td>
41 <td v-for="count in emptycolNum" :key="~count"></td>
42 </tr>
43 </table>
44 </div>
45 </div>
46 </div>
47 </template>
48
49 <script>
50 import { getJsydsyqList } from "@/api/zhcx.js";
51 import { datas } from "./qlxxFormData.js";
52 export default {
53 data() {
54 return {
55 title: "预告登记信息",
56 qsztList: datas.columns().qsztList,
57 checkList: datas.columns().checkList,
58 //传递参数
59 propsParam: this.$attrs,
60 //列表数据
61 tableData: [],
62 //空列值个数
63 emptycolNum: 0,
64 //列名称对象
65 columns: datas.columns().YGDJ,
66 };
67 },
68 created() {
69 this.loadData();
70 },
71 methods: {
72 loadData() {
73 getJsydsyqList({
74 bdcdyid: this.propsParam.bdcdyid,
75 qllx: this.propsParam.qllx,
76 qszt: this.checkList,
77 }).then((res) => {
78 if (res.code === 200) {
79 this.tableData = res.result;
80 this.emptycolNum = 3 - this.tableData.length;
81 }
82 });
83 },
84 checkChange() {
85 this.loadData();
86 },
87 getQsztName(code) {
88 let name = "";
89 for (let item of this.qsztList) {
90 if (item.value == code) {
91 name = item.label;
92 break;
93 }
94 }
95 return name;
96 },
97 },
98 };
99 </script>
100
101 <style lang="scss" scoped>
102 @import "./qlxxCommon.scss";
103 </style>
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
9 v-for="item in qsztList"
10 :key="item.value"
11 :label="item.value"
12 >{{ item.label }}</el-checkbox
13 >
14 </el-checkbox-group>
15 </div>
16 </div>
17 <div class="xxTableBox">
18 <table class="xxTable">
19 <tr v-for="(item, colindex) in columns" :key="colindex">
20 <td>
21 {{ item.label }}
22 </td>
23 <td
24 v-for="(row, index) in tableData"
25 :key="index"
26 :class="[
27 row.qszt == '2' ? 'lishi' : '',
28 row.qszt == '0' ? 'linshi' : '',
29 item.prop == 'qszt' && row.qszt == '0' ? 'linshiIcon' : '',
30 ]"
31 >
32 <div class="icon" v-if="item.prop == 'qszt' && row.qszt == '0'">
33 正在办理
34 </div>
35 <span v-if="item.prop == 'qszt'">
36 {{ getQsztName(row[item.prop]) }}
37 </span>
38
39 <span v-else> {{ row[item.prop] }}</span>
40 </td>
41 <td v-for="count in emptycolNum" :key="~count"></td>
42 </tr>
43 </table>
44 </div>
45 </div>
46 </div>
47 </template>
48
49 <script>
50 import { getJsydsyqList } from "@/api/zhcx.js";
51 import { datas } from "./qlxxFormData.js";
52 export default {
53 data() {
54 return {
55 title: "异议登记信息",
56 qsztList: datas.columns().qsztList,
57 checkList: datas.columns().checkList,
58 //传递参数
59 propsParam: this.$attrs,
60 //列表数据
61 tableData: [],
62 //空列值个数
63 emptycolNum: 0,
64 //列名称对象
65 columns: datas.columns().YYDJ,
66 };
67 },
68 created() {
69 this.loadData();
70 },
71 methods: {
72 loadData() {
73 getJsydsyqList({
74 bdcdyid: this.propsParam.bdcdyid,
75 qllx: this.propsParam.qllx,
76 qszt: this.checkList,
77 }).then((res) => {
78 if (res.code === 200) {
79 this.tableData = res.result;
80 this.emptycolNum = 3 - this.tableData.length;
81 }
82 });
83 },
84 checkChange() {
85 this.loadData();
86 },
87 getQsztName(code) {
88 let name = "";
89 for (let item of this.qsztList) {
90 if (item.value == code) {
91 name = item.label;
92 break;
93 }
94 }
95 return name;
96 },
97 },
98 };
99 </script>
100
101 <style lang="scss" scoped>
102 @import "./qlxxCommon.scss";
103 </style>
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 { getZdjjxxBybdcdyid } from "@/api/zhcx.js";
127
128 export default {
129 data () {
130 return {
131 bhqkColumns: [
132 {
133 prop: "ssywh",
134 label: "上手业务号",
135 },
136 {
137 prop: "zddm",
138 label: "宗地代码",
139 },
140 {
141 prop: "bhqzddm",
142 label: "变化前宗地代码",
143 },
144 {
145 prop: "bhnr",
146 label: "变化内容",
147 },
148 {
149 prop: "bhyy",
150 label: "变化原因",
151 },
152 {
153 prop: "djsj",
154 label: "登记时间",
155 },
156 {
157 prop: "dbr",
158 label: "登簿人",
159 },
160 {
161 prop: "fj",
162 label: "附记",
163 },
164 ],
165 bhqkTableWidth: 745,
166 zdjbxx: {},
167 zdbhqks: [],
168 propsParam:this.$attrs,
169 showGroup: false,
170 };
171 },
172 // computed: {
173 // ...mapGetters(["djbxx"]),
174 // },
175 created () {
176 //this.propsParam = this.$attrs;
177 // this.$nextTick(() => {
178
179 // });
180 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 },
189 methods: {
190 loadData () {
191 getZdjjxxBybdcdyid({bdcdyid:this.propsParam.bdcdyid}).then((res) => {
192 if (res.code === 200) {
193 this.zdjbxx = res.result.zdjbxx;
194 this.zdbhqks = res.result.zdbhqkList;
195 //this.$alert(this.zdjbxx);
196 if (this.zdbhqks != null && this.zdbhqks.length > 0) {
197 this.showGroup = true;
198 }
199 }
200 });
201 },
202 },
203 };
204 </script>
205
206 <style lang="scss" scoped>
207 .zdxx {
208 width: 100%;
209 height: calc(100% - 42px);
210 background-color: #f5f5f5;
211 padding: 5px;
212
213
214 }
215 .tablebox {
216 overflow-x: auto;
217 width: 100%;
218 height: 100%;
219 background: #fff;
220 border: 1px solid rgb(228, 228, 228);
221 text-align: center;
222 padding: 4px;
223 overflow-y: scroll;
224
225 .zdxxTable {
226 width: 100%;
227 min-width: 900px;
228 color: #333;
229
230 td {
231 border: 1px solid rgb(228, 228, 228);
232 line-height: 30px;
233 padding: 0 4px;
234 }
235
236 .title {
237 line-height: 68px;
238 font-size: 20px;
239 }
240
241 .unit {
242 text-align: right;
243 }
244
245 .title2 {
246 writing-mode: vertical-lr;
247 letter-spacing: 6px;
248 }
249
250 .bhqk {
251 padding: 0;
252
253 .box {
254 width: 745px;
255 overflow: auto;
256 }
257
258 .test {}
259
260 table {
261 .bhqkTh {
262 width: 110px;
263 line-height: 40px;
264 background-color: #f5f5f5;
265 border: 1px solid rgb(228, 228, 228);
266 font-weight: bold;
267 }
268
269 td {
270 width: 180px;
271 }
272 }
273 }
274 }
275 }
276 </style>
...@@ -123,43 +123,58 @@ export default { ...@@ -123,43 +123,58 @@ export default {
123 // 高级查询 123 // 高级查询
124 moreQueryClick () { }, 124 moreQueryClick () { },
125 openDialog (scroll) { 125 openDialog (scroll) {
126 //debugger; 126 this.$popup({
127 let _this = this; 127 titleStyle:"left",
128 let bsm = scroll.bsmQlxx; 128 title: '提示', // 弹窗标题
129 axios 129 editItem: 'registerBook/djbFrame', // 弹窗内容
130 .all([ 130 formData: scroll,
131 getDjbfm(bsm), 131 width:"1220px",
132 getDjml(bsm), 132 height:"800px",
133 getZdjbxx(bsm), 133 // cancelText: '取消摆烂', // 右边按钮文本
134 getQlname(bsm), 134 // confirmText: '确定点击', //左边按钮文本
135 getDetail(bsm), 135 cancel: () => {
136 ]) 136 console.log('取消回调')
137 .then(([djbfm, djml, zdjbxx, qlname, detail]) => { 137 },
138 let obj = { 138 confirm: () => {
139 djbfm: djbfm.result, 139 console.log('确认回调')
140 djml: djml.result,
141 zdjbxx: zdjbxx.result,
142 qlname: qlname.result,
143 detail: detail.result,
144 };
145 this.$store.dispatch("djbxx/setDjbxx", obj);
146 _this.isDialog = true;
147
148 // 弹窗打开,自动切换到对应的登记类型
149 if (scroll.qllxmc == "国有建设用地使用权") {
150 this.$refs.djbxxDialog.showType = "JSYDSYQ";
151 } else if (scroll.qllxmc == "抵押权") {
152 this.$refs.djbxxDialog.showType = "DYAQ";
153 } else if (scroll.qllxmc == "地役权") {
154 this.$refs.djbxxDialog.showType = "DYIQ";
155 } else if (scroll.qllxmc == "预告登记") {
156 this.$refs.djbxxDialog.showType = "YGDJ";
157 } else if (scroll.qllxmc == "异议登记") {
158 this.$refs.djbxxDialog.showType = "YYDJ";
159 } else if (scroll.qllxmc == "查封登记") {
160 this.$refs.djbxxDialog.showType = "CFDJ";
161 } 140 }
162 }); 141 })
142 // let _this = this;
143 // let bsm = scroll.bsmQlxx;
144 // axios
145 // .all([
146 // getDjbfm(bsm),
147 // getDjml(bsm),
148 // getZdjbxx(bsm),
149 // getQlname(bsm),
150 // getDetail(bsm),
151 // ])
152 // .then(([djbfm, djml, zdjbxx, qlname, detail]) => {
153 // let obj = {
154 // djbfm: djbfm.result,
155 // djml: djml.result,
156 // zdjbxx: zdjbxx.result,
157 // qlname: qlname.result,
158 // detail: detail.result,
159 // };
160 // this.$store.dispatch("djbxx/setDjbxx", obj);
161 // _this.isDialog = true;
162
163 // // 弹窗打开,自动切换到对应的登记类型
164 // if (scroll.qllxmc == "国有建设用地使用权") {
165 // this.$refs.djbxxDialog.showType = "JSYDSYQ";
166 // } else if (scroll.qllxmc == "抵押权") {
167 // this.$refs.djbxxDialog.showType = "DYAQ";
168 // } else if (scroll.qllxmc == "地役权") {
169 // this.$refs.djbxxDialog.showType = "DYIQ";
170 // } else if (scroll.qllxmc == "预告登记") {
171 // this.$refs.djbxxDialog.showType = "YGDJ";
172 // } else if (scroll.qllxmc == "异议登记") {
173 // this.$refs.djbxxDialog.showType = "YYDJ";
174 // } else if (scroll.qllxmc == "查封登记") {
175 // this.$refs.djbxxDialog.showType = "CFDJ";
176 // }
177 // });
163 }, 178 },
164 }, 179 },
165 }; 180 };
......