Skip to content

bdc / bdcdj-web

Go to a project
Toggle navigation
Toggle navigation pinning
8d05034a by 任超
Options

style:权利信息

1 parent d9ee3a4a
Inline Side-by-side
Showing 3 changed files with 238 additions and 185 deletions
1 import filter from '@/utils/filter.js' 1 import filter from '@/utils/filter.js'
2
2 class data extends filter { 3 class data extends filter {
3 constructor() { 4 constructor() {
4 super() 5 super()
5 } 6 }
6 columns () { 7 columns () {
7 return { 8 return [
8 title: "建设用地使用权、宅基地使用权登记信息", 9 {
9 columns: [ 10 prop: "ssywh",
10 { 11 label: "上手业务号",
11 prop: "ssywh", 12 width: "120"
12 label: "上手业务号" 13 },
13 }, 14 {
14 { 15 prop: "dah",
15 prop: "dah", 16 label: "档案号",
16 label: "档案号", 17 },
17 }, 18 {
18 { 19 prop: "ywh",
19 prop: "ywh", 20 label: "业务号",
20 label: "业务号", 21 },
21 }, 22 {
22 { 23 prop: "bdcdyh",
23 prop: "bdcdyh", 24 label: "不动产单元号",
24 label: "不动产单元号", 25 },
25 }, 26 {
26 { 27 prop: "zl",
27 prop: "zl", 28 label: "坐落",
28 label: "坐落", 29 },
29 }, 30 {
30 { 31 prop: "qlrlx",
31 prop: "qlrlx", 32 label: "权利人类型",
32 label: "权利人类型", 33 },
33 }, 34 {
34 { 35 prop: "qlrmc",
35 prop: "qlrmc", 36 label: "权利人",
36 label: "权利人", 37 },
37 }, 38 {
38 { 39 prop: "qlrzjzl",
39 prop: "qlrzjzl", 40 label: "证件种类",
40 label: "证件种类", 41 },
41 }, 42 {
42 { 43 prop: "qlrzjhm",
43 prop: "qlrzjhm", 44 label: "证件号",
44 label: "证件号", 45 },
45 }, 46 {
46 { 47 prop: "gyfs",
47 prop: "gyfs", 48 label: "共有情况",
48 label: "共有情况", 49 },
49 }, 50 {
50 { 51 prop: "mj",
51 prop: "mj", 52 label: "使用权面积(m²)",
52 label: "使用权面积(m²)", 53 },
53 }, 54 {
54 { 55 prop: "qlxz",
55 prop: "qlxz", 56 label: "权利性质",
56 label: "权利性质", 57 },
57 }, 58 {
58 { 59 prop: "ytmc",
59 prop: "ytmc", 60 label: "土地用途",
60 label: "土地用途", 61 },
61 }, 62 {
62 { 63 prop: "syqqzsj",
63 prop: "syqqzsj", 64 label: "使用权起止时间",
64 label: "使用权起止时间", 65 },
65 }, 66 {
66 { 67 prop: "tdsyqx",
67 prop: "tdsyqx", 68 label: "土地使用期限",
68 label: "土地使用期限", 69 },
69 }, 70 {
70 { 71 prop: "qdjg",
71 prop: "qdjg", 72 label: "取得价格(万元)",
72 label: "取得价格(万元)", 73 },
73 }, 74 {
74 { 75 prop: "djyy",
75 prop: "djyy", 76 label: "登记原因",
76 label: "登记原因", 77 },
77 }, 78 {
78 { 79 prop: "bdcqzh",
79 prop: "bdcqzh", 80 label: "不动产权证号",
80 label: "不动产权证号", 81 },
81 }, 82 {
82 { 83 prop: "djsj",
83 prop: "djsj", 84 label: "登记时间",
84 label: "登记时间", 85 },
85 }, 86 {
86 { 87 prop: "dbr",
87 prop: "dbr", 88 label: "登簿人",
88 label: "登簿人", 89 },
89 }, 90 {
90 { 91 prop: "fj",
91 prop: "fj", 92 label: "附记",
92 label: "附记", 93 },
93 }, 94 ]
94 ]
95
96 }
97 } 95 }
98 } 96 }
99 97
......
...@@ -12,12 +12,12 @@ ...@@ -12,12 +12,12 @@
12 </div> 12 </div>
13 </div> 13 </div>
14 <div class="xxTableBox"> 14 <div class="xxTableBox">
15 <table class="xxTable" :width="tableWidth"> 15 <table class="xxTable">
16 <tr> 16 <tr>
17 <th rowspan="3">业务类型</th> 17 <th rowspan="3">业务类型</th>
18 </tr> 18 </tr>
19 <!-- 第一行表头 --> 19 <!-- 第一行表头 -->
20 <tr class="one" id=""> 20 <tr class="one">
21 <th v-for="(item, index) in ths" :key="index" :class="[item.class, item.type == '临时' ? 'linshiIcon' : '']"> 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> 22 <div class="icon" v-if="item.type == '临时'">{{ item.type }}</div>
23 {{ item.type }} 23 {{ item.type }}
...@@ -49,95 +49,145 @@ ...@@ -49,95 +49,145 @@
49 </template> 49 </template>
50 50
51 <script> 51 <script>
52 import { mapGetters } from "vuex";
53 import { datas } from "./jsydsyq"; 52 import { datas } from "./jsydsyq";
54 import { getJsydsyqList } from "@/api/zhcx.js"; 53 import { getJsydsyqList } from "@/api/zhcx.js";
55 export default { 54 export default {
56 name: "djxxTable", 55 name: "jsydsyq",
57 props: {
58 showType: "",
59 },
60 data () { 56 data () {
61 return { 57 return {
62 checkList: ["临时", "现势", "历史"], 58 checkList: ["临时", "现势", "历史"],
63 tableWidth: 810,
64 type: datas.columns(),
65 tableData: [], 59 tableData: [],
66 showTableData: [], 60 showTableData: [],
67 ths: [], 61 ths: [],
68 showThs: [],
69 columns: [], 62 columns: [],
70 title: "", 63 title: "建设用地使用权、宅基地使用权登记信息",
64 list: [
65 {
66 ssywh: '',
67 dah: '',
68 ywh: '',
69 bdcdyh: "",
70 zl: "",
71 qlrlx: '',
72 qlrmc: "",
73 qlrzjzl: "",
74 qlrzjhm: "",
75 gyfs: "",
76 mj: null,
77 qlxz: '',
78 ytmc: "",
79 syqqzsj: null,
80 tdsyqx: null,
81 qdjg: null,
82 djyy: '',
83 bdcqzh: null,
84 djsj: '',
85 dbr: '',
86 fj: "",
87 qllxmc: "国有建设用地使用权",
88 djlxmc: '转移登记',
89 qszt: "0",
90 },
91 {
92 ssywh: '',
93 dah: '',
94 ywh: '',
95 bdcdyh: "",
96 zl: "",
97 qlrlx: '',
98 qlrmc: "",
99 qlrzjzl: "",
100 qlrzjhm: "",
101 gyfs: "",
102 mj: null,
103 qlxz: '',
104 ytmc: "",
105 syqqzsj: null,
106 tdsyqx: null,
107 qdjg: null,
108 djyy: '',
109 bdcqzh: null,
110 djsj: '',
111 dbr: '',
112 fj: "",
113 qllxmc: "国有建设用地使用权",
114 djlxmc: '转移登记',
115 qszt: "1"
116 },
117 {
118 ssywh: '',
119 dah: '',
120 ywh: '',
121 bdcdyh: "",
122 zl: "",
123 qlrlx: '',
124 qlrmc: "",
125 qlrzjzl: "",
126 qlrzjhm: "",
127 gyfs: "",
128 mj: null,
129 qlxz: '',
130 ytmc: "",
131 syqqzsj: null,
132 tdsyqx: null,
133 qdjg: null,
134 djyy: '',
135 bdcqzh: null,
136 djsj: '',
137 dbr: '',
138 fj: "",
139 qllxmc: "国有建设用地使用权",
140 djlxmc: '转移登记',
141 qszt: "2"
142 }
143 ]
71 }; 144 };
72 }, 145 },
73 computed: { 146 async created () {
74 ...mapGetters(["djbxx"]), 147 // 清空值
75 }, 148 this.tableData = [];
76 watch: { 149 this.ths = [];
77 showType: { 150 this.columns = datas.columns();
78 handler (newVlue) { 151 // let res = await getJsydsyqList({
79 // 清空值 152 // bdcdyid: "2b33851f4edfd468ceef4d68c370bd41",
80 this.tableData = []; 153 // qllx: "A03",
81 this.ths = []; 154 // qszt: ["1"]
82 this.columns = this.type[newVlue].columns; 155 // })
83 this.title = this.type[newVlue].title; 156 let detail = this.list
84 this.checkList = ["临时", "现势", "历史"]; 157 detail.length > 0 && detail.forEach((item) => {
85 this.tableWidth = 810; 158 this.tableData.push(item);
86 let detail; 159 if (item.qszt == "0") {
87 if (newVlue === "JSYDSYQ") { 160 this.ths.push({
88 getJsydsyqList({ 161 type: "临时",
89 bdcdyid: "2b33851f4edfd468ceef4d68c370bd41", 162 qllxmc: item.qllxmc,
90 qllx: "A03", 163 djlxmc: item.djlxmc,
91 qszt: ["1"] 164 prop: "linshi",
92 }).then((res) => { 165 class: "linshi",
93 if (res.code === 200) {
94 detail = res.result;
95 }
96 });
97 } else {
98 detail = this.djbxx.detail.qlxxs[newVlue];
99 }
100 detail.forEach((item) => {
101 this.tableData.push(item);
102 if (item.qszt == "0") {
103 this.ths.push({
104 type: "临时",
105 qllxmc: item.qllxmc,
106 djlxmc: item.djlxmc,
107 prop: "linshi",
108 class: "linshi",
109 });
110 } else if (item.qszt == "1") {
111 this.ths.push({
112 type: "现势",
113 qllxmc: item.qllxmc,
114 djlxmc: item.djlxmc,
115 prop: "xianshi",
116 class: "xianshi",
117 });
118 } else if (item.qszt == "2") {
119 this.ths.push({
120 type: "历史",
121 qllxmc: item.qllxmc,
122 djlxmc: item.djlxmc,
123 prop: "lishi",
124 class: "lishi",
125 });
126 }
127 }); 166 });
128 this.showTableData = this.tableData; 167 } else if (item.qszt == "1") {
129 this.showThs = this.ths; 168 this.ths.push({
130 let width = (this.tableData.length - 3) * 223 + this.tableWidth; 169 type: "现势",
131 this.tableWidth = this.tableData.length > 3 ? width : 810; 170 qllxmc: item.qllxmc,
132 }, 171 djlxmc: item.djlxmc,
133 immediate: true, 172 prop: "xianshi",
134 }, 173 class: "xianshi",
174 });
175 } else if (item.qszt == "2") {
176 this.ths.push({
177 type: "历史",
178 qllxmc: item.qllxmc,
179 djlxmc: item.djlxmc,
180 prop: "lishi",
181 class: "lishi",
182 });
183 }
184 });
185 this.showTableData = this.tableData;
135 }, 186 },
136 methods: { 187 methods: {
137 checkChange () { 188 checkChange () {
138 var checkKey = []; 189 var checkKey = [];
139 this.ths = []; 190 this.ths = [];
140 this.tableWidth = 810;
141 this.checkList.forEach((item) => { 191 this.checkList.forEach((item) => {
142 if (item == "临时") { 192 if (item == "临时") {
143 checkKey.push("0"); 193 checkKey.push("0");
...@@ -179,8 +229,6 @@ export default { ...@@ -179,8 +229,6 @@ export default {
179 }); 229 });
180 } 230 }
181 }); 231 });
182 let width = (this.showTableData.length - 3) * 223 + this.tableWidth;
183 this.tableWidth = this.showTableData.length > 3 ? width : 810;
184 }, 232 },
185 }, 233 },
186 }; 234 };
...@@ -195,7 +243,6 @@ export default { ...@@ -195,7 +243,6 @@ export default {
195 color: #333; 243 color: #333;
196 244
197 .tableBox { 245 .tableBox {
198 width: 810px;
199 margin: 0 auto; 246 margin: 0 auto;
200 display: flex; 247 display: flex;
201 flex-wrap: wrap; 248 flex-wrap: wrap;
...@@ -221,8 +268,8 @@ export default { ...@@ -221,8 +268,8 @@ export default {
221 } 268 }
222 269
223 .xxTableBox { 270 .xxTableBox {
224 width: 810px;
225 overflow-x: scroll; 271 overflow-x: scroll;
272 width: 100%;
226 } 273 }
227 274
228 .xxTable>tr:first-child th { 275 .xxTable>tr:first-child th {
...@@ -231,11 +278,13 @@ export default { ...@@ -231,11 +278,13 @@ export default {
231 278
232 .xxTable { 279 .xxTable {
233 border-spacing: 1px; 280 border-spacing: 1px;
281 width: 100%;
234 282
235 tr>th { 283 tr>th {
236 background: #464c5b; 284 background: #464c5b;
237 color: #fff; 285 color: #fff;
238 font-size: 16px; 286 font-size: 16px;
287 height: 60px;
239 } 288 }
240 289
241 th.linshi, 290 th.linshi,
...@@ -297,6 +346,7 @@ export default { ...@@ -297,6 +346,7 @@ export default {
297 height: 40px; 346 height: 40px;
298 padding: 4px; 347 padding: 4px;
299 font-size: 13px; 348 font-size: 13px;
349 width: 140px;
300 } 350 }
301 351
302 >tr:nth-child(odd) td { 352 >tr:nth-child(odd) td {
......
...@@ -40,15 +40,16 @@ ...@@ -40,15 +40,16 @@
40 <p class="splitScreen tabsList-title">材料信息</p> 40 <p class="splitScreen tabsList-title">材料信息</p>
41 <div class="splitScreen"></div> 41 <div class="splitScreen"></div>
42 </div> 42 </div>
43 <el-tabs v-model="activeName" @tab-click='activeClick'> 43 <div style="width:100%">
44 <el-tab-pane :label="item.name" :name="item.value" v-for="(item, index) in tabList" :key="index"> 44 <el-tabs v-model="activeName" @tab-click='activeClick'>
45 <div class="splitScreen-con"> 45 <el-tab-pane :label="item.name" :name="item.value" v-for="(item, index) in tabList" :key="index">
46 <component ref='slxx' v-if='index == 0' :is="editItem" :flag="flag" :key="key" /> 46 </el-tab-pane>
47 <component ref='clxx' :is="editItem" v-else-if="index == 1" :key="key" /> 47 </el-tabs>
48 <component :is="editItem" v-else :key="key" /> 48 <div class="splitScreen-con">
49 </div> 49 <component ref='slxx' v-if="activeName == 'slsq'" :is="editItem" :flag="flag" :key="key" />
50 </el-tab-pane> 50 <component :is="editItem" :key="key" />
51 </el-tabs> 51 </div>
52 </div>
52 </div> 53 </div>
53 </div> 54 </div>
54 <zc ref="zcDialogRef" v-model="zcDialog" :queryForm='queryForm' /> 55 <zc ref="zcDialogRef" v-model="zcDialog" :queryForm='queryForm' />
...@@ -92,7 +93,11 @@ export default { ...@@ -92,7 +93,11 @@ export default {
92 watch: { 93 watch: {
93 activeName: { 94 activeName: {
94 handler (newName, oldName) { 95 handler (newName, oldName) {
95 this.editItem = this.loadView(newName) 96 if (newName === 'qlxx') {
97 this.editItem = this.loadViewSlsq()
98 } else {
99 this.editItem = this.loadView(newName)
100 }
96 }, 101 },
97 immediate: true 102 immediate: true
98 } 103 }
...@@ -116,9 +121,9 @@ export default { ...@@ -116,9 +121,9 @@ export default {
116 if (res.code === 200) { 121 if (res.code === 200) {
117 this.unitData = res.result ? res.result : [] 122 this.unitData = res.result ? res.result : []
118 setTimeout(() => { 123 setTimeout(() => {
119 that.$refs?.slxx[0].list(that.unitData && that.unitData[0].bsmSldy) 124 that.$refs.slxx?.[0].list(that.unitData?.[0]?.bsmSldy)
120 this.taskId = that.unitData[0].taskId 125 this.taskId = that.unitData?.[0]?.taskId
121 this.bsmBusiness = that.unitData[0].bsmBusiness 126 this.bsmBusiness = that.unitData?.[0]?.bsmBusiness
122 }, 300); 127 }, 300);
123 } 128 }
124 }) 129 })
...@@ -180,6 +185,9 @@ export default { ...@@ -180,6 +185,9 @@ export default {
180 loadView (view) { 185 loadView (view) {
181 return r => require.ensure([], () => r(require(`./components/${view}.vue`))) 186 return r => require.ensure([], () => r(require(`./components/${view}.vue`)))
182 }, 187 },
188 loadViewSlsq () {
189 return r => require.ensure([], () => r(require('../../components/jsydsyq/jsydsyq.vue')))
190 },
183 }, 191 },
184 } 192 }
185 </script> 193 </script>
...@@ -204,13 +212,10 @@ export default { ...@@ -204,13 +212,10 @@ export default {
204 font-size: 12px; 212 font-size: 12px;
205 } 213 }
206 214
207 /deep/.el-tabs__content {
208 height: calc(100vh - 135px) !important;
209 }
210
211 .splitScreen-con { 215 .splitScreen-con {
212 padding: 0 15px; 216 padding: 0 15px;
213 box-sizing: border-box; 217 box-sizing: border-box;
218 height: calc(100% - 350px);
214 } 219 }
215 220
216 .fqsq { 221 .fqsq {
...@@ -303,7 +308,6 @@ export default { ...@@ -303,7 +308,6 @@ export default {
303 .tabsList-left { 308 .tabsList-left {
304 border-right: 1px solid #EBEEF5; 309 border-right: 1px solid #EBEEF5;
305 position: relative; 310 position: relative;
306 width: 250px;
307 box-sizing: border-box; 311 box-sizing: border-box;
308 312
309 ul { 313 ul {
...@@ -354,6 +358,7 @@ export default { ...@@ -354,6 +358,7 @@ export default {
354 358
355 /deep/.el-tabs { 359 /deep/.el-tabs {
356 width: 100%; 360 width: 100%;
361 height: 60px;
357 } 362 }
358 } 363 }
359 </style> 364 </style>
...\ No newline at end of file ...\ No newline at end of file
......