Skip to content

任超 / js.CadastralSystem

Go to a project
Toggle navigation
Toggle navigation pinning
0fe3f890 by weimo934
Options

feat(mjft):添加增加行删除行,增加自动统计

1 parent ffea9b89
Inline Side-by-side
Showing 1 changed file with 94 additions and 62 deletions
...@@ -3,43 +3,46 @@ ...@@ -3,43 +3,46 @@
3 <table border="1"> 3 <table border="1">
4 <tr> 4 <tr>
5 <td colspan="2">土地面积</td> 5 <td colspan="2">土地面积</td>
6 <td colspan="3"><input type="text" class="formInput"/></td> 6 <td colspan="3"><input type="text" class="formInput" v-model="mjftData.tdmj"/></td>
7 </tr> 7 </tr>
8 <tr> 8 <tr>
9 <td colspan="2">宗地代码</td> 9 <td colspan="2">宗地代码</td>
10 <td colspan="3"><input type="text" class="formInput"/></td> 10 <td colspan="3"><input type="text" class="formInput" v-model="mjftData.zdbsm "/></td>
11 </tr> 11 </tr>
12 <tr> 12 <tr>
13 <td colspan="2">宗地面积(㎡)</td> 13 <td colspan="2">宗地面积(㎡)</td>
14 <td><input type="text" class="formInput"/></td> 14 <td><input type="text" class="formInput" v-model="mjftData.zjmj"/></td>
15 <td>定着物数量</td> 15 <td>定着物数量</td>
16 <td><input type="text" class="formInput"/></td> 16 <td><input type="text" class="formInput" v-model="mjftData.dzwsl"/></td>
17 </tr> 17 </tr>
18 <tr> 18 <tr>
19 <td colspan="2">备注</td> 19 <td colspan="2">备注</td>
20 <td colspan="3"><input type="text" class="formInput"/></td> 20 <td colspan="3"><input type="text" class="formInput" v-model="mjftData.bz"/></td>
21 </tr>
22 </table>
23 <table border="1">
24 <tr>
25 <td @click="addRow">+</td>
26 <td>定着物代码</td>
27 <td>土地所有权/使用权面积(㎡)</td>
28 <td>独有独用土地面积(㎡)</td>
29 <td>分摊土地面积(㎡)</td>
30 </tr>
31 <tr v-for="(item,i) in mjftData.addQjZdftdzwRequestList">
32 <td @click="delRow(i)">-</td>
33 <td><input type="text" class="formInput" v-model="item.dzwdm"/></td>
34 <td><input type="number" class="formInput" v-model="item.tdsyqsyqmj"/></td>
35 <td><input type="text" class="formInput" v-model="item.dydytdmj"/></td>
36 <td><input type="text" class="formInput" v-model="item.fttdmj"/></td>
37 </tr>
38 <tr>
39 <td></td>
40 <td>统计</td>
41 <td>{{sumTdsyqsyqmj}}</td>
42 <td>{{sumDydytdmj}}</td>
43 <td>{{sumFttdmj}}</td>
21 </tr> 44 </tr>
22 </table> 45 </table>
23 <el-table
24 :data="tableData"
25 height="250"
26 border
27 style="width: 100%">
28 <el-table-column
29 prop="date"
30 label="日期"
31 width="180">
32 </el-table-column>
33 <el-table-column
34 prop="name"
35 label="姓名"
36 width="180">
37 </el-table-column>
38 <el-table-column
39 prop="address"
40 label="地址">
41 </el-table-column>
42 </el-table>
43 </div> 46 </div>
44 </template> 47 </template>
45 48
...@@ -48,47 +51,76 @@ ...@@ -48,47 +51,76 @@
48 name: "index", 51 name: "index",
49 data() { 52 data() {
50 return { 53 return {
51 tableData: [{ 54 mjftData: {
52 id: '12987122', 55 zdbsm: '',
53 name: '王小虎', 56 tdsyqsyqmjhj: '',
54 amount1: '234', 57 fttdmjhj: '',
55 amount2: '3.2', 58 dzwdys: '',
56 amount3: 10 59 dydytdmjhj: '',
57 }, { 60 bz: '',
58 id: '12987123', 61 tdmj: '',
59 name: '王小虎', 62 zjmj: '',
60 amount1: '165', 63 dzwsl: '',
61 amount2: '4.43', 64 addQjZdftdzwRequestList: [
62 amount3: 12 65 {
63 }, { 66 dydytdmj: '',
64 id: '12987124', 67 dzwdm: '',
65 name: '王小虎', 68 fttdmj: '',
66 amount1: '324', 69 gygyzdmjftbsm: '',
67 amount2: '1.9', 70 tdsyqsyqmj: ''
68 amount3: 9 71 }
69 }, { 72 ]
70 id: '12987125', 73 }
71 name: '王小虎',
72 amount1: '621',
73 amount2: '2.2',
74 amount3: 17
75 }, {
76 id: '12987126',
77 name: '王小虎',
78 amount1: '539',
79 amount2: '4.1',
80 amount3: 15
81 }]
82 } 74 }
83 }, 75 },
76 created: {},
84 methods: { 77 methods: {
85 addTableRow() { 78 addRow() {
86 let table2 = document.getElementById("table2") 79 this.mjftData.addQjZdftdzwRequestList.push({
87 let table3 = document.getElementById("table3") 80 dydytdmj: '',
88 table2.firstChild.appendChild(table3) 81 dzwdm: '',
82 fttdmj: '',
83 gygyzdmjftbsm: '',
84 tdsyqsyqmj: ''
85 })
86 },
87 delRow(index) {
88 this.mjftData.addQjZdftdzwRequestList.splice(index, 1)
89 }
90 },
91 computed: {
92 sumTdsyqsyqmj: function () {
93 let sum = 0;
94 let data = this.mjftData.addQjZdftdzwRequestList;
95 for (let i = 0; i < data.length; i++) {
96 if (isNaN(parseFloat(data[i].tdsyqsyqmj))) {
97 continue;
98 }
99 sum += parseFloat(data[i].tdsyqsyqmj)
100 }
101 return isNaN(sum) ? '' : sum;
102 },
103 sumDydytdmj: function () {
104 let sum = 0;
105 let data = this.mjftData.addQjZdftdzwRequestList;
106 for (let i = 0; i < data.length; i++) {
107 if (isNaN(parseFloat(data[i].dydytdmj))) {
108 continue;
109 }
110 sum += parseFloat(data[i].dydytdmj)
111 }
112 return isNaN(sum) ? '' : sum;
89 }, 113 },
90 delTableRow() { 114 sumFttdmj: function () {
91 let table = document.getElementsByTagName("table") 115 let sum = 0;
116 let data = this.mjftData.addQjZdftdzwRequestList;
117 for (let i = 0; i < data.length; i++) {
118 if (isNaN(parseFloat(data[i].fttdmj))) {
119 continue;
120 }
121 sum += parseFloat(data[i].fttdmj)
122 }
123 return isNaN(sum) ? '' : sum;
92 } 124 }
93 }, 125 },
94 mounted() { 126 mounted() {
......