feat(jzd,jzx):修改样式
Showing
4 changed files
with
131 additions
and
55 deletions
... | @@ -8,26 +8,26 @@ | ... | @@ -8,26 +8,26 @@ |
8 | <div class="table"> | 8 | <div class="table"> |
9 | <table border="1"> | 9 | <table border="1"> |
10 | <tr> | 10 | <tr> |
11 | <td><input type="checkbox" @click="allcheck" v-model="isCheckAll"/></td> | 11 | <td class="cz"><input type="checkbox" @click="allcheck" v-model="isCheckAll"/></td> |
12 | <td>界址点号</td> | 12 | <td class="jzdh">界址点号</td> |
13 | <td>顺序号</td> | 13 | <td class="sxh">顺序号</td> |
14 | <td>X坐标值</td> | 14 | <td class="xzbz">X坐标值</td> |
15 | <td>Y坐标值</td> | 15 | <td class="yzbz">Y坐标值</td> |
16 | <td>界标类型</td> | 16 | <td class="jblx">界标类型</td> |
17 | <td>界址点类型</td> | 17 | <td class="jzdlx">界址点类型</td> |
18 | </tr> | 18 | </tr> |
19 | <tr v-if="jzdlist.length==0"> | 19 | <tr v-if="jzdlist.length==0"> |
20 | <td colspan="7"><span class="nodata">暂无数据</span></td> | 20 | <td colspan="7"><span class="nodata">暂无数据</span></td> |
21 | </tr> | 21 | </tr> |
22 | <tr v-for="(item,index) in jzdlist" :key="index" v-else> | 22 | <tr v-for="(item,index) in jzdlist" :key="index" v-else> |
23 | <td><input type="checkbox" v-model="item.isCheck" @change="changeAll"/></td> | 23 | <td class="cz"><input type="checkbox" v-model="item.isCheck" @change="changeAll"/></td> |
24 | <td><input type="text" class="formInput" v-model="item.jzdh" readonly="readonly"/></td> | 24 | <td class="jzdh"><input type="text" class="formInput" v-model="item.jzdh" readonly="readonly"/></td> |
25 | <td><input type="text" class="formInput" v-model="item.sxh" readonly="readonly"/></td> | 25 | <td class="sxh"><input type="text" class="formInput" v-model="item.sxh" readonly="readonly"/></td> |
26 | <td><input type="text" class="formInput" v-model="item.xzbz" :readonly="item.iszb" | 26 | <td class="xzbz"><input type="text" class="formInput" v-model="item.xzbz" :readonly="item.iszb" |
27 | @keydown="oninput"/></td> | 27 | @keydown="oninput"/></td> |
28 | <td><input tepe="text" class="formInput" v-model="item.yzbz" :readonly="item.iszb" | 28 | <td class="yzbz"><input tepe="text" class="formInput" v-model="item.yzbz" :readonly="item.iszb" |
29 | @keydown="oninput"/></td> | 29 | @keydown="oninput"/></td> |
30 | <td> | 30 | <td class="jblx"> |
31 | <el-select v-model="item.jblx" :disabled="item.jzdisdisabled"> | 31 | <el-select v-model="item.jblx" :disabled="item.jzdisdisabled"> |
32 | <el-option | 32 | <el-option |
33 | v-for="i in jblx" | 33 | v-for="i in jblx" |
... | @@ -37,7 +37,7 @@ | ... | @@ -37,7 +37,7 @@ |
37 | ></el-option> | 37 | ></el-option> |
38 | </el-select> | 38 | </el-select> |
39 | </td> | 39 | </td> |
40 | <td> | 40 | <td class="jzdlx"> |
41 | <el-select v-model="item.jzdlx" :disabled="item.jzdisdisabled"> | 41 | <el-select v-model="item.jzdlx" :disabled="item.jzdisdisabled"> |
42 | <el-option | 42 | <el-option |
43 | v-for="i in jzdlx" | 43 | v-for="i in jzdlx" |
... | @@ -310,5 +310,32 @@ | ... | @@ -310,5 +310,32 @@ |
310 | } | 310 | } |
311 | } | 311 | } |
312 | 312 | ||
313 | .cz { | ||
314 | width: 50px; | ||
315 | } | ||
316 | |||
317 | .jzdh { | ||
318 | width: 120px; | ||
319 | } | ||
320 | |||
321 | .sxh { | ||
322 | width: 120px | ||
323 | } | ||
324 | |||
325 | .xzbz { | ||
326 | width: 120px | ||
327 | } | ||
328 | |||
329 | .yzbz { | ||
330 | width: 120px | ||
331 | } | ||
332 | |||
333 | .jblx { | ||
334 | width: 150px | ||
335 | } | ||
336 | |||
337 | .jzdlx { | ||
338 | width: 180px | ||
339 | } | ||
313 | 340 | ||
314 | </style> | 341 | </style> | ... | ... |
... | @@ -8,24 +8,25 @@ | ... | @@ -8,24 +8,25 @@ |
8 | <div class="table"> | 8 | <div class="table"> |
9 | <table border="1"> | 9 | <table border="1"> |
10 | <tr> | 10 | <tr> |
11 | <td><input type="checkbox" @click="allcheck" v-model="isCheckAll"/></td> | 11 | <td class="cz"><input type="checkbox" @click="allcheck" v-model="isCheckAll"/></td> |
12 | <td>起始点</td> | 12 | <td class="qsd">起始点</td> |
13 | <td>终止点</td> | 13 | <td class="zzd">终止点</td> |
14 | <td>界址点距(m)</td> | 14 | <td class="jzdj">界址点距(m)</td> |
15 | <td>界址线类型</td> | 15 | <td class="jzxlx">界址线类型</td> |
16 | <td>界址线位置</td> | 16 | <td class="jzxwz">界址线位置</td> |
17 | <td>界限性质</td> | 17 | <td class="jxxz">界限性质</td> |
18 | <td>说明</td> | 18 | <td class="sm">说明</td> |
19 | </tr> | 19 | </tr> |
20 | <tr v-if="jzxlist.length==0"> | 20 | <tr v-if="jzxlist.length==0"> |
21 | <td colspan="8"><span class="nodata">暂无数据</span></td> | 21 | <td colspan="8"><span class="nodata">暂无数据</span></td> |
22 | </tr> | 22 | </tr> |
23 | <tr v-for="(item,index) in jzxlist" :key="index" v-else> | 23 | <tr v-for="(item,index) in jzxlist" :key="index" v-else> |
24 | <td><input type="checkbox" v-model="item.isCheck" @change="changeAll"/></td> | 24 | <td class="cz"><input type="checkbox" v-model="item.isCheck" @change="changeAll"/></td> |
25 | <td><input type="text" class="formInput" v-model="item.qdh" readonly="readonly"/></td> | 25 | <td class="qsd"><input type="text" class="formInput" v-model="item.qdh" readonly="readonly"/></td> |
26 | <td><input type="text" class="formInput" v-model="item.zdh" readonly="readonly"/></td> | 26 | <td class="zzd"><input type="text" class="formInput" v-model="item.zdh" readonly="readonly"/></td> |
27 | <td><input type="text" class="formInput" v-model="item.jzjj" :readonly="item.jjisdisabled"/></td> | 27 | <td class="jzdj"><input type="text" class="formInput" v-model="item.jzjj" |
28 | <td> | 28 | :readonly="item.jjisdisabled"/></td> |
29 | <td class="jzxlx"> | ||
29 | <el-select v-model="item.jzxlb" :disabled="item.jzxisdisabled"> | 30 | <el-select v-model="item.jzxlb" :disabled="item.jzxisdisabled"> |
30 | <el-option | 31 | <el-option |
31 | v-for="i in jzxlx" | 32 | v-for="i in jzxlx" |
... | @@ -35,7 +36,7 @@ | ... | @@ -35,7 +36,7 @@ |
35 | ></el-option> | 36 | ></el-option> |
36 | </el-select> | 37 | </el-select> |
37 | </td> | 38 | </td> |
38 | <td> | 39 | <td class="jzxwz"> |
39 | <el-select v-model="item.jzxwz" :disabled="item.jzxisdisabled"> | 40 | <el-select v-model="item.jzxwz" :disabled="item.jzxisdisabled"> |
40 | <el-option | 41 | <el-option |
41 | v-for="i in jzxwz" | 42 | v-for="i in jzxwz" |
... | @@ -45,7 +46,7 @@ | ... | @@ -45,7 +46,7 @@ |
45 | ></el-option> | 46 | ></el-option> |
46 | </el-select> | 47 | </el-select> |
47 | </td> | 48 | </td> |
48 | <td> | 49 | <td class="jxxz"> |
49 | <el-select v-model="item.jxxz" :disabled="item.jzxisdisabled"> | 50 | <el-select v-model="item.jxxz" :disabled="item.jzxisdisabled"> |
50 | <el-option | 51 | <el-option |
51 | v-for="i in jxxz" | 52 | v-for="i in jxxz" |
... | @@ -55,7 +56,7 @@ | ... | @@ -55,7 +56,7 @@ |
55 | ></el-option> | 56 | ></el-option> |
56 | </el-select> | 57 | </el-select> |
57 | </td> | 58 | </td> |
58 | <td> | 59 | <td class="sm"> |
59 | <input type="text" class="formInput" v-model="item.sm" readonly="readonly"/> | 60 | <input type="text" class="formInput" v-model="item.sm" readonly="readonly"/> |
60 | </td> | 61 | </td> |
61 | </tr> | 62 | </tr> |
... | @@ -375,5 +376,29 @@ | ... | @@ -375,5 +376,29 @@ |
375 | height: 100px; | 376 | height: 100px; |
376 | } | 377 | } |
377 | } | 378 | } |
379 | .cz { | ||
380 | width: 50px; | ||
381 | } | ||
382 | .qsd { | ||
383 | width: 150px; | ||
384 | } | ||
385 | .zzd { | ||
386 | width: 150px; | ||
387 | } | ||
388 | .jzdj { | ||
389 | width: 150px; | ||
390 | } | ||
391 | .jzxlx { | ||
392 | width: 180px; | ||
393 | } | ||
394 | .jzxwz { | ||
395 | width: 150px; | ||
396 | } | ||
397 | .jxxz { | ||
398 | width: 150px; | ||
399 | } | ||
400 | .sm { | ||
401 | width: 150px; | ||
402 | } | ||
378 | 403 | ||
379 | </style> | 404 | </style> | ... | ... |
... | @@ -22,25 +22,28 @@ | ... | @@ -22,25 +22,28 @@ |
22 | </table> | 22 | </table> |
23 | <table border="1"> | 23 | <table border="1"> |
24 | <tr> | 24 | <tr> |
25 | <td @click="addRow">+</td> | 25 | <td @click="addRow" class="cz">+</td> |
26 | <td>定着物代码</td> | 26 | <td class="dzwdm">定着物代码</td> |
27 | <td>土地所有权/使用权面积(㎡)</td> | 27 | <td class="syqmj">土地所有权/使用权面积(㎡)</td> |
28 | <td>独有独用土地面积(㎡)</td> | 28 | <td class="dytdmj">独有独用土地面积(㎡)</td> |
29 | <td>分摊土地面积(㎡)</td> | 29 | <td class="fttjmj">分摊土地面积(㎡)</td> |
30 | </tr> | 30 | </tr> |
31 | <tr v-for="(item,i) in mjftData.list" :key="i"> | 31 | <tr v-for="(item,i) in mjftData.list" :key="i"> |
32 | <td @click="delRow(i)">-</td> | 32 | <td @click="delRow(i)" class="cz">-</td> |
33 | <td><input type="text" class="formInput" v-model="item.dzwdm"/></td> | 33 | <td class="dzwdm"><input type="text" class="formInput" v-model="item.dzwdm"/></td> |
34 | <td><input type="number" class="formInput" v-model="item.tdsyqsyqmj" @keydown="oninput"/></td> | 34 | <td class="syqmj"><input type="number" class="formInput" v-model="item.tdsyqsyqmj" @keydown="oninput"/> |
35 | <td><input type="number" class="formInput" v-model="item.dydytdmj" @keydown="oninput"/></td> | 35 | </td> |
36 | <td><input type="number" class="formInput" v-model="item.fttdmj" @keydown="oninput"/></td> | 36 | <td class="dytdmj"><input type="number" class="formInput" v-model="item.dydytdmj" @keydown="oninput"/> |
37 | </td> | ||
38 | <td class="fttjmj"><input type="number" class="formInput" v-model="item.fttdmj" @keydown="oninput"/> | ||
39 | </td> | ||
37 | </tr> | 40 | </tr> |
38 | <tr> | 41 | <tr> |
39 | <td></td> | 42 | <td class="cz"></td> |
40 | <td>统计</td> | 43 | <td class="dzwdm">统计</td> |
41 | <td>{{sumTdsyqsyqmj}}</td> | 44 | <td class="syqmj">{{sumTdsyqsyqmj}}</td> |
42 | <td>{{sumDydytdmj}}</td> | 45 | <td class="dytdmj">{{sumDydytdmj}}</td> |
43 | <td>{{sumFttdmj}}</td> | 46 | <td class="fttjmj">{{sumFttdmj}}</td> |
44 | </tr> | 47 | </tr> |
45 | </table> | 48 | </table> |
46 | <div class="pers"> | 49 | <div class="pers"> |
... | @@ -178,10 +181,10 @@ | ... | @@ -178,10 +181,10 @@ |
178 | }, | 181 | }, |
179 | mounted() { | 182 | mounted() { |
180 | console.log("mounted init...") | 183 | console.log("mounted init...") |
181 | this.mjftData.zdbsm=this.$store.state.zdbsm | 184 | this.mjftData.zdbsm = this.$store.state.zdbsm |
182 | this.zdmj=this.$store.state.zdmj | 185 | this.zdmj = this.$store.state.zdmj |
183 | this.tdzl=this.$store.state.zdzl | 186 | this.tdzl = this.$store.state.zdzl |
184 | this.zddm=this.$store.state.zddm | 187 | this.zddm = this.$store.state.zddm |
185 | if (this.mjftData.zdbsm) { | 188 | if (this.mjftData.zdbsm) { |
186 | this.getData(this.mjftData.zdbsm) | 189 | this.getData(this.mjftData.zdbsm) |
187 | } | 190 | } |
... | @@ -203,7 +206,7 @@ | ... | @@ -203,7 +206,7 @@ |
203 | } | 206 | } |
204 | </script> | 207 | </script> |
205 | 208 | ||
206 | <style scoped> | 209 | <style scoped lang="less"> |
207 | .main { | 210 | .main { |
208 | box-sizing: border-box; | 211 | box-sizing: border-box; |
209 | padding: 18px; | 212 | padding: 18px; |
... | @@ -216,13 +219,13 @@ | ... | @@ -216,13 +219,13 @@ |
216 | background-color: #fff; | 219 | background-color: #fff; |
217 | font-size: 14px; | 220 | font-size: 14px; |
218 | width: 100%; | 221 | width: 100%; |
219 | } | 222 | cursor: pointer; |
220 | |||
221 | td { | 223 | td { |
222 | text-align: center; | 224 | text-align: center; |
223 | height: 36px; | 225 | height: 36px; |
224 | min-width: 50px; | 226 | min-width: 50px; |
225 | } | 227 | } |
228 | } | ||
226 | 229 | ||
227 | table .formInput { | 230 | table .formInput { |
228 | margin: 0; | 231 | margin: 0; |
... | @@ -248,4 +251,24 @@ | ... | @@ -248,4 +251,24 @@ |
248 | width: 200px; | 251 | width: 200px; |
249 | } | 252 | } |
250 | 253 | ||
254 | .cz { | ||
255 | width: 50px; | ||
256 | } | ||
257 | |||
258 | .dzwdm { | ||
259 | width: 150px; | ||
260 | } | ||
261 | |||
262 | .syqmj { | ||
263 | width: 150px; | ||
264 | } | ||
265 | |||
266 | .dytdmj { | ||
267 | width: 150px; | ||
268 | } | ||
269 | |||
270 | .fttjmj { | ||
271 | width: 150px; | ||
272 | } | ||
273 | |||
251 | </style> | 274 | </style> | ... | ... |
... | @@ -414,13 +414,14 @@ export default { | ... | @@ -414,13 +414,14 @@ export default { |
414 | }; | 414 | }; |
415 | }, | 415 | }, |
416 | created() { | 416 | created() { |
417 | this.getZdjbxxData(); | 417 | let bsm=this.$store.state.zdbsm; |
418 | this.getZdjbxxData(bsm); | ||
418 | }, | 419 | }, |
419 | mounted() {}, | 420 | mounted() {}, |
420 | methods: { | 421 | methods: { |
421 | //根据zdbsm查询基本信息 | 422 | //根据zdbsm查询基本信息 |
422 | getZdjbxxData() { | 423 | getZdjbxxData(bsm) { |
423 | getQjZdjbxxDetailById(this.$store.state.zdbsm) | 424 | getQjZdjbxxDetailById(bsm) |
424 | .then((res) => { | 425 | .then((res) => { |
425 | if (res.result) { | 426 | if (res.result) { |
426 | this.formData = res.result; | 427 | this.formData = res.result; | ... | ... |
-
Please register or sign in to post a comment