Skip to content

任超 / js.CadastralSystem

Go to a project
Toggle navigation
Toggle navigation pinning
a3093e1c by 杨威
Options

权利性质组件修改

1 parent d808f425
Inline Side-by-side
Showing 1 changed file with 228 additions and 215 deletions
...@@ -5,143 +5,148 @@ ...@@ -5,143 +5,148 @@
5 v-for="(items, index) in countList" 5 v-for="(items, index) in countList"
6 :key="items.id" 6 :key="items.id"
7 > 7 >
8 <el-col :span="2" class="btnCol"> 8 <template v-for="(childItem,childIndex) in items.addQjTdytRequestList" >
9 <el-button 9 <el-col :span="2" class="btnCol" :key="childIndex+'1'" :class="childIndex>0 ? 'childYT noTopBorder':''">
10 v-if="!items.isInside" 10 <el-button
11 type="primary" 11 v-show="childIndex<1"
12 class="changeBtn" 12 type="primary"
13 @click="handleClick(items.id, index, 'add')" 13 class="changeBtn"
14 >+</el-button 14 @click="handleClick( index, 'add')"
15 > 15 >+</el-button
16 <el-button 16 >
17 v-if="!items.isInside" 17 <el-button
18 type="primary" 18 v-show="childIndex<1"
19 class="changeBtn" 19 type="primary"
20 @click="handleClick(items.id, index, 'minus')" 20 class="changeBtn"
21 >-</el-button 21 @click="handleClick( index, 'minus')"
22 > 22 >-</el-button
23 <div 23 >
24 :class="items.hasNotBorder ? 'itemShow whiteItem' : 'whiteItem'" 24 <div
25 v-if="items.isInside" 25 :class="items.hasNotBorder ? 'itemShow whiteItem' : 'whiteItem'"
26 ></div> 26 v-if="items.isInside"
27 </el-col> 27 ></div>
28 <el-col :span="2" class="btnCol"> 28 </el-col>
29 <span class="qlxz">权利性质</span><br> 29 <el-col :span="2" class="btnCol" :key="childIndex+'8'" :class="childIndex>0 ? 'childYT':''">
30 <el-button 30 <!-- <template v-if="childIndex>0"> -->
31 type="primary" 31 <span class="qlxz" v-show="childIndex<1">权利性质</span><br>
32 class="changeBtn" 32 <el-button
33 @click="handleInClick(items, index, 'add')" 33 type="primary"
34 >+</el-button 34 class="changeBtn"
35 > 35 @click="handleInClick(index, childIndex, 'add')"
36 <el-button 36 >+</el-button
37 type="primary"
38 class="changeBtn"
39 @click="handleInClick(items, index, 'minus')"
40 >-</el-button
41 >
42 </el-col>
43 <el-col :span="3">
44 <ul>
45 <li>批准用途</li>
46 <li>实际用途</li>
47 <li>土地使用起始时间<i class="requisite">*</i></li>
48 </ul>
49 </el-col>
50 <el-col :span="4">
51 <ul>
52 <li>
53 <el-select class="formSelect percent30" v-model="items.pzyt">
54 <el-option
55 v-for="item in $store.state.tdytList"
56 :key="item.dm"
57 :label="item.mc"
58 :value="item.dm"
59 >
60 </el-option>
61 </el-select>
62 </li>
63 <li>
64 <el-select class="formSelect percent30" v-model="items.sjyt">
65 <el-option
66 v-for="item in $store.state.tdytList"
67 :key="item.dm"
68 :label="item.mc"
69 :value="item.dm"
70 >
71 </el-option>
72 </el-select>
73 </li>
74 <li>
75 <el-date-picker
76 v-model="items.tdsyqssj"
77 type="date"
78 placeholder="选择日期"
79 > 37 >
80 </el-date-picker> 38 <el-button
81 </li> 39 type="primary"
82 </ul> 40 class="changeBtn"
83 </el-col> 41 @click="handleInClick(index, childIndex, 'minus')"
84 <el-col :span="3"> 42 >-</el-button
85 <ul> 43 >
86 <li>地类编码</li> 44 <!-- </template> -->
87 <li>地类编码</li> 45 </el-col>
88 <li>年限<i class="requisite">*</i></li> 46 <el-col :span="3" :key="childIndex+'7'" :class="childIndex>0 ? 'childYT':''">
89 </ul> 47 <ul>
90 </el-col> 48 <li>批准用途</li>
91 <el-col :span="3"> 49 <li>实际用途</li>
92 <ul> 50 <li>土地使用起始时间<i class="requisite">*</i></li>
93 <li> 51 </ul>
94 <input type="text" v-model="items.pzyt" class="formInput" /> 52 </el-col>
95 </li> 53 <el-col :span="4" :key="childIndex+'6'" :class="childIndex>0 ? 'childYT':''">
96 <li> 54 <ul>
97 <input type="text" v-model="items.sjyt" class="formInput" /> 55 <li>
98 </li> 56 <el-select class="formSelect percent30" v-model="childItem.pzytdm">
99 <li> 57 <el-option
100 <input type="text" v-model="items.nx" class="formInput" /> 58 v-for="item in $store.state.tdytList"
101 </li> 59 :key="item.dm"
102 </ul> 60 :label="item.mc"
103 </el-col> 61 :value="item.dm"
104 <el-col :span="3"> 62 >
105 <ul> 63 </el-option>
106 <li>等级</li> 64 </el-select>
107 <li>等级</li> 65 </li>
108 <li>土地使用结束时间<i class="requisite">*</i></li> 66 <li>
109 </ul> 67 <el-select class="formSelect percent30" v-model="childItem.sjytdm">
110 </el-col> 68 <el-option
111 <el-col :span="4"> 69 v-for="item in $store.state.tdytList"
112 <ul> 70 :key="item.dm"
113 <li> 71 :label="item.mc"
114 <el-select class="formSelect percent30" v-model="items.dj1"> 72 :value="item.dm"
115 <el-option 73 >
116 v-for="item in $store.state.tddjList" 74 </el-option>
117 :key="item.bsm" 75 </el-select>
118 :label="item.mc" 76 </li>
119 :value="item.bsm" 77 <li>
78 <el-date-picker
79 v-model="childItem.tdsyqssj"
80 type="date"
81 placeholder="选择日期"
120 > 82 >
121 </el-option> 83 </el-date-picker>
122 </el-select> 84 </li>
123 </li> 85 </ul>
124 <li> 86 </el-col>
125 <el-select class="formSelect percent30" v-model="items.dj2"> 87 <el-col :span="3" :key="childIndex+'5'" :class="childIndex>0 ? 'childYT':''">
126 <el-option 88 <ul>
127 v-for="item in $store.state.tddjList" 89 <li>地类编码</li>
128 :key="item.bsm" 90 <li>地类编码</li>
129 :label="item.mc" 91 <li>年限<i class="requisite">*</i></li>
130 :value="item.bsm" 92 </ul>
93 </el-col>
94 <el-col :span="3" :key="childIndex+'4'" :class="childIndex>0 ? 'childYT':''">
95 <ul>
96 <li>
97 <input type="text" v-model="childItem.pzytdm" class="formInput" />
98 </li>
99 <li>
100 <input type="text" v-model="childItem.sjytdm" class="formInput" />
101 </li>
102 <li>
103 <input type="text" v-model="childItem.syqx " class="formInput" />
104 </li>
105 </ul>
106 </el-col>
107 <el-col :span="3" :key="childIndex+'2'" :class="childIndex>0 ? 'childYT':''">
108 <ul>
109 <li>等级</li>
110 <li>等级</li>
111 <li>土地使用结束时间<i class="requisite">*</i></li>
112 </ul>
113 </el-col>
114 <el-col :span="4" :key="childIndex+'3'" class="noRightBorder" :class="childIndex>0 ? 'childYT ':''">
115 <ul>
116 <li>
117 <el-select class="formSelect percent30" v-model="childItem.pzdjbsm">
118 <el-option
119 v-for="item in $store.state.tddjList"
120 :key="item.bsm"
121 :label="item.mc"
122 :value="item.bsm"
123 >
124 </el-option>
125 </el-select>
126 </li>
127 <li>
128 <el-select class="formSelect percent30" v-model="childItem.sjdjbsm">
129 <el-option
130 v-for="item in $store.state.tddjList"
131 :key="item.bsm"
132 :label="item.mc"
133 :value="item.bsm"
134 >
135 </el-option>
136 </el-select>
137 </li>
138 <li>
139 <el-date-picker
140 v-model="childItem.tdsyjssj"
141 type="date"
142 placeholder="选择日期"
131 > 143 >
132 </el-option> 144 </el-date-picker>
133 </el-select> 145 </li>
134 </li> 146 </ul>
135 <li> 147 </el-col>
136 <el-date-picker 148 </template>
137 v-model="items.tdsyjssj" 149
138 type="date"
139 placeholder="选择日期"
140 >
141 </el-date-picker>
142 </li>
143 </ul>
144 </el-col>
145 <div class="title"> 150 <div class="title">
146 <el-select class="formSelect" v-model="items.qlxzdm"> 151 <el-select class="formSelect" v-model="items.qlxzdm">
147 <el-option 152 <el-option
...@@ -161,37 +166,22 @@ ...@@ -161,37 +166,22 @@
161 import { getDdicByMC } from "../../api/common"; 166 import { getDdicByMC } from "../../api/common";
162 export default { 167 export default {
163 props: { 168 props: {
164 widtd: { 169 // widtd: {
165 type: String, 170 // type: String,
166 default: "70%", 171 // default: "70%",
167 }, 172 // },
168 title: {
169 type: String,
170 default: "",
171 },
172 topHeight: {
173 type: String,
174 default: "15vh",
175 },
176 }, 173 },
177 data() { 174 data() {
178 return { 175 return {
179
180 countList: [ 176 countList: [
181 { 177 {
182 id: Math.random(), 178 id: Math.random(),
183 isInside: false, 179 isInside: false,
184 hasNotBorder: false, 180 hasNotBorder: false,
185 qlxzdm: "", 181 "bsm": "",//权利性质标识码
186 pzyt: "", 182 "glbsm": "",//宗地BSM、自然幢BSM、户BSM、多幢BSM、宗海BSM
187 sjyt: "", 183 "qlxzdm": "",
188 tdsyqssj: "", 184 "zhqlxzlx": "", //除宗海数据外，默认都是空；0:用海类型权利性质;2:海岛用途权利性质
189 dlbm: "",
190 dlbm2: "",
191 nx: "",
192 dj1: "",
193 dj2: "",
194 tdsyjssj: "",
195 addQjTdytRequestList:[ 185 addQjTdytRequestList:[
196 { 186 {
197 "pzdjbsm": "", 187 "pzdjbsm": "",
...@@ -220,23 +210,37 @@ export default { ...@@ -220,23 +210,37 @@ export default {
220 }, 210 },
221 methods: { 211 methods: {
222 //外层操作 212 //外层操作
223 handleClick(id, ind, type) { 213 handleClick( ind, type) {
214 let outsideObj = {
215 id: Math.random(),
216 isInside: false,
217 hasNotBorder: false,
218 "bsm": "",//权利性质标识码
219 "glbsm": "",//宗地BSM、自然幢BSM、户BSM、多幢BSM、宗海BSM
220 "qlxzdm": "",
221 "zhqlxzlx": "", //除宗海数据外，默认都是空；0:用海类型权利性质;2:海岛用途权利性质
222 addQjTdytRequestList:[
223 {
224 "pzdjbsm": "",
225 "pzdjmc": "",
226 "pzytdm": "",
227 "pzytmc": "",
228 "pzytmj": 0,
229 "qlxzbsm": "",
230 "sjdjbsm": "",
231 "sjdjmc": "",
232 "sjytdm": "",
233 "sjytmc": "",
234 "sjytmj": 0,
235 "syqx": "",
236 "tdsyjssj": "2020-10-23",
237 "tdsyqssj": "2020-10-20",
238 "tdzh": ""
239 }
240 ]
241 };
224 if (type === "add") { 242 if (type === "add") {
225 this.countList.push({ 243 this.countList.push(outsideObj);
226 id: Math.random(),
227 isInside: false,
228 hasNotBorder: false,
229 qlxzdm: "",
230 pzyt: "",
231 sjyt: "",
232 tdsyqssj: "",
233 dlbm: "",
234 dlbm2: "",
235 nx: "",
236 dj1: "",
237 dj2: "",
238 tdsyjssj: "",
239 });
240 this.outNum++ 244 this.outNum++
241 } else { 245 } else {
242 this.countList.forEach((item, index) => { 246 this.countList.forEach((item, index) => {
...@@ -246,50 +250,34 @@ export default { ...@@ -246,50 +250,34 @@ export default {
246 }); 250 });
247 this.outNum-- 251 this.outNum--
248 } 252 }
249 this.hasBorderOrNot();
250 }, 253 },
251 //内层操作 254 //内层操作
252 handleInClick(obj, ind, type) { 255 handleInClick(index, childIndex, type) {
256 let insideObj = {
257 "pzdjbsm": "",
258 "pzdjmc": "",
259 "pzytdm": "",
260 "pzytmc": "",
261 "pzytmj": 0,
262 "qlxzbsm": "",
263 "sjdjbsm": "",
264 "sjdjmc": "",
265 "sjytdm": "",
266 "sjytmc": "",
267 "sjytmj": 0,
268 "syqx": "",
269 "tdsyjssj": "2020-10-23",
270 "tdsyqssj": "2020-10-20",
271 "tdzh": ""
272 };
253 if (type === "add") { 273 if (type === "add") {
254 this.countList.splice(ind + 1, 0, { 274 this.countList[index].addQjTdytRequestList.splice(childIndex + 1, 0, insideObj);
255 id: obj.id,
256 childId: Math.random(),
257 isInside: true,
258 hasNotBorder: false,
259 qlxzdm: "",
260 pzyt: "",
261 sjyt: "",
262 tdsyqssj: "",
263 dlbm: "",
264 dlbm2: "",
265 nx: "",
266 dj1: "",
267 dj2: "",
268 tdsyjssj: "",
269 });
270 } else { 275 } else {
271 if (obj.childId) { 276 this.countList[index].addQjTdytRequestList.forEach((item, childInd) => {
272 this.countList.forEach((item, index) => { 277 if (childIndex == childInd && this.countList[index].addQjTdytRequestList.length > 1) {
273 if (item.childId == obj.childId && this.countList.length > 1) { 278 this.countList[index].addQjTdytRequestList.splice(childIndex, 1);
274 this.countList.splice(index, 1);
275 }
276 });
277 } else {
278 let tempNum = 0;
279 let tempIndex = 0;
280 this.countList.forEach((item, index) => {
281 if (item.id == obj.id && this.countList.length > 1) {
282 tempIndex = tempNum == 0 ? index : tempIndex;
283 tempNum++;
284 }
285 });
286 //判断外层是否没有增加，如果没有增加，则不能删除当前外层
287 if(ind == 0 && this.outNum == 0){
288
289 }else{
290 this.countList.splice(tempIndex, tempNum);
291 } 279 }
292 } 280 });
293 } 281 }
294 this.hasBorderOrNot(); 282 this.hasBorderOrNot();
295 }, 283 },
...@@ -313,11 +301,11 @@ export default { ...@@ -313,11 +301,11 @@ export default {
313 .temp { 301 .temp {
314 width: 100%; 302 width: 100%;
315 .qlxzModule { 303 .qlxzModule {
316 height: 148px; 304 height: auto;
317 position: relative; 305 position: relative;
318 border-bottom: 1px solid grey; 306 border-bottom: 1px solid grey;
319 .el-col { 307 .el-col {
320 height: 100%; 308 // height: 100%;
321 border-right: 1px solid grey; 309 border-right: 1px solid grey;
322 position: relative; 310 position: relative;
323 .qlxz { 311 .qlxz {
...@@ -356,6 +344,30 @@ export default { ...@@ -356,6 +344,30 @@ export default {
356 bottom: 2px; 344 bottom: 2px;
357 } 345 }
358 } 346 }
347 .childYT{
348 height: 114px;
349 border-top: 1px solid grey;
350 ul {
351 margin-top: 0;
352 li{
353 .el-input__inner {
354 height: 29px;
355 }
356 }
357 }
358 .changeBtn {
359 margin-top: -48px;
360 }
361 .el-button + .el-button {
362 margin-top: 4px;
363 }
364 }
365 .noTopBorder{
366 border-top: 0;
367 }
368 .noRightBorder{
369 border-right: 0;
370 }
359 .el-col:nth-last-child(2) { 371 .el-col:nth-last-child(2) {
360 border-right: none; 372 border-right: none;
361 } 373 }
...@@ -372,13 +384,14 @@ export default { ...@@ -372,13 +384,14 @@ export default {
372 top: -1px; 384 top: -1px;
373 width: 100%; 385 width: 100%;
374 .el-input__inner { 386 .el-input__inner {
375 height: 34px; 387 height: 32px;
376 } 388 }
377 } 389 }
378 } 390 }
379 } 391 }
380 .btnCol { 392 .btnCol {
381 position: relative; 393 position: relative;
394 height: 147px;
382 .changeBtn { 395 .changeBtn {
383 width: 46px; 396 width: 46px;
384 height: 46px; 397 height: 46px;
......