Skip to content

任超 / js.CadastralSystem

Go to a project
Toggle navigation
Toggle navigation pinning
6a96103d by 杨威
Options

权利性质组件表单样式修改

1 parent 08119aa7
Inline Side-by-side
Showing 1 changed file with 163 additions and 97 deletions
...@@ -5,20 +5,25 @@ ...@@ -5,20 +5,25 @@
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 <template v-for="(childItem,childIndex) in items.list" > 8 <template v-for="(childItem, childIndex) in items.list">
9 <el-col :span="2" class="btnCol" :key="childIndex+'1'" :class="childIndex>0 ? 'childYT noTopBorder':''"> 9 <el-col
10 :span="2"
11 class="btnCol"
12 :key="childIndex + '1'"
13 :class="childIndex > 0 ? 'childYT noTopBorder' : ''"
14 >
10 <el-button 15 <el-button
11 v-show="childIndex<1" 16 v-show="childIndex < 1"
12 type="primary" 17 type="primary"
13 class="changeBtn" 18 class="changeBtn"
14 @click="handleClick( index, 'add')" 19 @click="handleClick(index, 'add')"
15 >+</el-button 20 >+</el-button
16 > 21 >
17 <el-button 22 <el-button
18 v-show="childIndex<1" 23 v-show="childIndex < 1"
19 type="primary" 24 type="primary"
20 class="changeBtn" 25 class="changeBtn"
21 @click="handleClick( index, 'minus')" 26 @click="handleClick(index, 'minus')"
22 >-</el-button 27 >-</el-button
23 > 28 >
24 <div 29 <div
...@@ -26,9 +31,14 @@ ...@@ -26,9 +31,14 @@
26 v-if="items.isInside" 31 v-if="items.isInside"
27 ></div> 32 ></div>
28 </el-col> 33 </el-col>
29 <el-col :span="2" class="btnCol" :key="childIndex+'8'" :class="childIndex>0 ? 'childYT':''"> 34 <el-col
35 :span="2"
36 class="btnCol"
37 :key="childIndex + '8'"
38 :class="childIndex > 0 ? 'childYT' : ''"
39 >
30 <!-- <template v-if="childIndex>0"> --> 40 <!-- <template v-if="childIndex>0"> -->
31 <span class="qlxz" v-show="childIndex<1">权利性质</span><br> 41 <span class="qlxz" v-show="childIndex < 1">权利性质</span><br />
32 <el-button 42 <el-button
33 type="primary" 43 type="primary"
34 class="changeBtn" 44 class="changeBtn"
...@@ -43,14 +53,22 @@ ...@@ -43,14 +53,22 @@
43 > 53 >
44 <!-- </template> --> 54 <!-- </template> -->
45 </el-col> 55 </el-col>
46 <el-col :span="3" :key="childIndex+'7'" :class="childIndex>0 ? 'childYT':''"> 56 <el-col
57 :span="3"
58 :key="childIndex + '7'"
59 :class="childIndex > 0 ? 'childYT' : ''"
60 >
47 <ul> 61 <ul>
48 <li>批准用途</li> 62 <li>批准用途</li>
49 <li>实际用途</li> 63 <li>实际用途</li>
50 <li>土地使用起始时间<i class="requisite">*</i></li> 64 <li>土地使用起始时间<i class="requisite">*</i></li>
51 </ul> 65 </ul>
52 </el-col> 66 </el-col>
53 <el-col :span="4" :key="childIndex+'6'" :class="childIndex>0 ? 'childYT':''"> 67 <el-col
68 :span="4"
69 :key="childIndex + '6'"
70 :class="childIndex > 0 ? 'childYT' : ''"
71 >
54 <ul> 72 <ul>
55 <li> 73 <li>
56 <el-select-tree 74 <el-select-tree
...@@ -93,37 +111,72 @@ ...@@ -93,37 +111,72 @@
93 </li> 111 </li>
94 </ul> 112 </ul>
95 </el-col> 113 </el-col>
96 <el-col :span="3" :key="childIndex+'5'" :class="childIndex>0 ? 'childYT':''"> 114 <el-col
115 :span="3"
116 :key="childIndex + '5'"
117 :class="childIndex > 0 ? 'childYT' : ''"
118 >
97 <ul> 119 <ul>
98 <li>地类编码</li> 120 <li>地类编码</li>
99 <li>地类编码</li> 121 <li>地类编码</li>
100 <li>年限<i class="requisite">*</i></li> 122 <li>年限<i class="requisite">*</i></li>
101 </ul> 123 </ul>
102 </el-col> 124 </el-col>
103 <el-col :span="3" :key="childIndex+'4'" :class="childIndex>0 ? 'childYT':''"> 125 <el-col
126 :span="3"
127 :key="childIndex + '4'"
128 :class="childIndex > 0 ? 'childYT' : ''"
129 >
104 <ul> 130 <ul>
105 <li> 131 <li>
106 <input type="text" placeholder="请输入" v-model="childItem.pzytdm" class="formInput" /> 132 <input
133 type="text"
134 placeholder="请输入"
135 v-model="childItem.pzytdm"
136 class="formInput"
137 />
107 </li> 138 </li>
108 <li> 139 <li>
109 <input type="text" placeholder="请输入" v-model="childItem.sjytdm" class="formInput" /> 140 <input
141 type="text"
142 placeholder="请输入"
143 v-model="childItem.sjytdm"
144 class="formInput"
145 />
110 </li> 146 </li>
111 <li> 147 <li>
112 <input type="text" placeholder="请输入" v-model="childItem.syqx " class="formInput" /> 148 <input
149 type="text"
150 placeholder="请输入"
151 v-model="childItem.syqx"
152 class="formInput"
153 />
113 </li> 154 </li>
114 </ul> 155 </ul>
115 </el-col> 156 </el-col>
116 <el-col :span="3" :key="childIndex+'2'" :class="childIndex>0 ? 'childYT':''"> 157 <el-col
158 :span="3"
159 :key="childIndex + '2'"
160 :class="childIndex > 0 ? 'childYT' : ''"
161 >
117 <ul> 162 <ul>
118 <li>等级</li> 163 <li>等级</li>
119 <li>等级</li> 164 <li>等级</li>
120 <li>土地使用结束时间<i class="requisite">*</i></li> 165 <li>土地使用结束时间<i class="requisite">*</i></li>
121 </ul> 166 </ul>
122 </el-col> 167 </el-col>
123 <el-col :span="4" :key="childIndex+'3'" class="noRightBorder" :class="childIndex>0 ? 'childYT ':''"> 168 <el-col
169 :span="4"
170 :key="childIndex + '3'"
171 class="noRightBorder"
172 :class="childIndex > 0 ? 'childYT ' : ''"
173 >
124 <ul> 174 <ul>
125 <li> 175 <li>
126 <el-select class="formSelect percent30" v-model="childItem.pzdjbsm"> 176 <el-select
177 class="formSelect percent30"
178 v-model="childItem.pzdjbsm"
179 >
127 <el-option 180 <el-option
128 v-for="item in $store.state.tddjList" 181 v-for="item in $store.state.tddjList"
129 :key="item.bsm" 182 :key="item.bsm"
...@@ -134,7 +187,10 @@ ...@@ -134,7 +187,10 @@
134 </el-select> 187 </el-select>
135 </li> 188 </li>
136 <li> 189 <li>
137 <el-select class="formSelect percent30" v-model="childItem.sjdjbsm"> 190 <el-select
191 class="formSelect percent30"
192 v-model="childItem.sjdjbsm"
193 >
138 <el-option 194 <el-option
139 v-for="item in $store.state.tddjList" 195 v-for="item in $store.state.tddjList"
140 :key="item.bsm" 196 :key="item.bsm"
...@@ -187,17 +243,17 @@ export default { ...@@ -187,17 +243,17 @@ export default {
187 data() { 243 data() {
188 return { 244 return {
189 //树型结构 245 //树型结构
190 show:true, 246 show: true,
191 clearable: true, 247 clearable: true,
192 defaultExpandAll: true, 248 defaultExpandAll: true,
193 multiple: false, 249 multiple: false,
194 placeholder: '请选择', 250 placeholder: "请选择",
195 disabled: false, 251 disabled: false,
196 checkStrictly: true, 252 checkStrictly: true,
197 treeProps: { 253 treeProps: {
198 value: 'dm', 254 value: "dm",
199 children: 'children', 255 children: "children",
200 label: 'mc' 256 label: "mc",
201 }, 257 },
202 258
203 countList: [ 259 countList: [
...@@ -205,97 +261,96 @@ export default { ...@@ -205,97 +261,96 @@ export default {
205 id: Math.random(), 261 id: Math.random(),
206 isInside: false, 262 isInside: false,
207 hasNotBorder: false, 263 hasNotBorder: false,
208 "bsm": "",//权利性质标识码 264 bsm: "", //权利性质标识码
209 "glbsm": "",//宗地BSM、自然幢BSM、户BSM、多幢BSM、宗海BSM 265 glbsm: "", //宗地BSM、自然幢BSM、户BSM、多幢BSM、宗海BSM
210 "qlxzdm": "", 266 qlxzdm: "",
211 "zhqlxzlx": "", //除宗海数据外，默认都是空；0:用海类型权利性质;2:海岛用途权利性质 267 zhqlxzlx: "", //除宗海数据外，默认都是空；0:用海类型权利性质;2:海岛用途权利性质
212 list:[ 268 list: [
213 { 269 {
214 "pzdjbsm": "", 270 pzdjbsm: "",
215 "pzdjmc": "", 271 pzdjmc: "",
216 "pzytdm": "", 272 pzytdm: "",
217 "pzytmc": "", 273 pzytmc: "",
218 "pzytmj": 0, 274 pzytmj: 0,
219 "qlxzbsm": "", 275 qlxzbsm: "",
220 "sjdjbsm": "", 276 sjdjbsm: "",
221 "sjdjmc": "", 277 sjdjmc: "",
222 "sjytdm": "", 278 sjytdm: "",
223 "sjytmc": "", 279 sjytmc: "",
224 "sjytmj": 0, 280 sjytmj: 0,
225 "syqx": "", 281 syqx: "",
226 "tdsyjssj": "", 282 tdsyjssj: "",
227 "tdsyqssj": "", 283 tdsyqssj: "",
228 "tdzh": "" 284 tdzh: "",
229 }
230 ]
231 }, 285 },
232 ], 286 ],
233 outNum:0
234 };
235 }, 287 },
236 created(){ 288 ],
289 outNum: 0,
290 };
237 }, 291 },
292 created() {},
238 methods: { 293 methods: {
239 //外层操作 294 //外层操作
240 handleClick( ind, type) { 295 handleClick(ind, type) {
241 let outsideObj = { 296 let outsideObj = {
242 id: Math.random(), 297 id: Math.random(),
243 isInside: false, 298 isInside: false,
244 hasNotBorder: false, 299 hasNotBorder: false,
245 "bsm": "",//权利性质标识码 300 bsm: "", //权利性质标识码
246 "glbsm": "",//宗地BSM、自然幢BSM、户BSM、多幢BSM、宗海BSM 301 glbsm: "", //宗地BSM、自然幢BSM、户BSM、多幢BSM、宗海BSM
247 "qlxzdm": "", 302 qlxzdm: "",
248 "zhqlxzlx": "", //除宗海数据外，默认都是空；0:用海类型权利性质;2:海岛用途权利性质 303 zhqlxzlx: "", //除宗海数据外，默认都是空；0:用海类型权利性质;2:海岛用途权利性质
249 list:[ 304 list: [
250 { 305 {
251 "pzdjbsm": "", 306 pzdjbsm: "",
252 "pzdjmc": "", 307 pzdjmc: "",
253 "pzytdm": "", 308 pzytdm: "",
254 "pzytmc": "", 309 pzytmc: "",
255 "pzytmj": 0, 310 pzytmj: 0,
256 "qlxzbsm": "", 311 qlxzbsm: "",
257 "sjdjbsm": "", 312 sjdjbsm: "",
258 "sjdjmc": "", 313 sjdjmc: "",
259 "sjytdm": "", 314 sjytdm: "",
260 "sjytmc": "", 315 sjytmc: "",
261 "sjytmj": 0, 316 sjytmj: 0,
262 "syqx": "", 317 syqx: "",
263 "tdsyjssj": "", 318 tdsyjssj: "",
264 "tdsyqssj": "", 319 tdsyqssj: "",
265 "tdzh": "" 320 tdzh: "",
266 } 321 },
267 ] 322 ],
268 }; 323 };
269 if (type === "add") { 324 if (type === "add") {
270 this.countList.push(outsideObj); 325 this.countList.push(outsideObj);
271 this.outNum++ 326 this.outNum++;
272 } else { 327 } else {
273 this.countList.forEach((item, index) => { 328 this.countList.forEach((item, index) => {
274 if (index == ind && this.countList.length > 1) { 329 if (index == ind && this.countList.length > 1) {
275 this.countList.splice(index, 1); 330 this.countList.splice(index, 1);
276 } 331 }
277 }); 332 });
278 this.outNum-- 333 this.outNum--;
279 } 334 }
280 }, 335 },
281 //内层操作 336 //内层操作
282 handleInClick(index, childIndex, type) { 337 handleInClick(index, childIndex, type) {
283 let insideObj = { 338 let insideObj = {
284 "pzdjbsm": "", 339 pzdjbsm: "",
285 "pzdjmc": "", 340 pzdjmc: "",
286 "pzytdm": "", 341 pzytdm: "",
287 "pzytmc": "", 342 pzytmc: "",
288 "pzytmj": 0, 343 pzytmj: 0,
289 "qlxzbsm": "", 344 qlxzbsm: "",
290 "sjdjbsm": "", 345 sjdjbsm: "",
291 "sjdjmc": "", 346 sjdjmc: "",
292 "sjytdm": "", 347 sjytdm: "",
293 "sjytmc": "", 348 sjytmc: "",
294 "sjytmj": 0, 349 sjytmj: 0,
295 "syqx": "", 350 syqx: "",
296 "tdsyjssj": "", 351 tdsyjssj: "",
297 "tdsyqssj": "", 352 tdsyqssj: "",
298 "tdzh": "" 353 tdzh: "",
299 }; 354 };
300 if (type === "add") { 355 if (type === "add") {
301 this.countList[index].list.splice(childIndex + 1, 0, insideObj); 356 this.countList[index].list.splice(childIndex + 1, 0, insideObj);
...@@ -314,7 +369,8 @@ export default { ...@@ -314,7 +369,8 @@ export default {
314 if (index == this.countList.length - 1) { 369 if (index == this.countList.length - 1) {
315 item.hasNotBorder = true; 370 item.hasNotBorder = true;
316 } else { 371 } else {
317 item.hasNotBorder = item.isInside && !this.countList[index + 1].isInside ? true : false; 372 item.hasNotBorder =
373 item.isInside && !this.countList[index + 1].isInside ? true : false;
318 } 374 }
319 }); 375 });
320 }, 376 },
...@@ -344,13 +400,17 @@ export default { ...@@ -344,13 +400,17 @@ export default {
344 height: 37px; 400 height: 37px;
345 line-height: 37px; 401 line-height: 37px;
346 text-decoration: none; 402 text-decoration: none;
347 border-bottom: 1px solid #E6E6E6; 403 border-bottom: 1px solid #e6e6e6;
348 .el-select{ 404 .el-select {
349 width: 100%; 405 width: 100%;
350 } 406 }
351 .el-input{ 407 .el-input {
352 width: 100%; 408 width: 100%;
353 } 409 }
410 input {
411 position: relative;
412 top: -2px;
413 }
354 .el-input__inner { 414 .el-input__inner {
355 height: 34px; 415 height: 34px;
356 } 416 }
...@@ -371,12 +431,12 @@ export default { ...@@ -371,12 +431,12 @@ export default {
371 bottom: 2px; 431 bottom: 2px;
372 } 432 }
373 } 433 }
374 .childYT{ 434 .childYT {
375 height: 114px; 435 height: 114px;
376 border-top: 1px solid grey; 436 border-top: 1px solid grey;
377 ul { 437 ul {
378 margin-top: 0; 438 margin-top: 0;
379 li{ 439 li {
380 .el-input__inner { 440 .el-input__inner {
381 height: 29px; 441 height: 29px;
382 } 442 }
...@@ -389,10 +449,10 @@ export default { ...@@ -389,10 +449,10 @@ export default {
389 margin-top: 4px; 449 margin-top: 4px;
390 } 450 }
391 } 451 }
392 .noTopBorder{ 452 .noTopBorder {
393 border-top: 0; 453 border-top: 0;
394 } 454 }
395 .noRightBorder{ 455 .noRightBorder {
396 border-right: 0; 456 border-right: 0;
397 } 457 }
398 .el-col:nth-last-child(2) { 458 .el-col:nth-last-child(2) {
...@@ -438,5 +498,11 @@ export default { ...@@ -438,5 +498,11 @@ export default {
438 .el-row:nth-last-child(1) { 498 .el-row:nth-last-child(1) {
439 border-bottom: none; 499 border-bottom: none;
440 } 500 }
501 /deep/.el-select-tree{
502 width: 100%;
503 .el-input__inner{
504 height: 30px !important;
505 }
506 }
441 } 507 }
442 </style> 508 </style>
......