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 @@
<table border="1">
<tr>
<td colspan="2">土地面积</td>
<td colspan="3"><input type="text" class="formInput"/></td>
<td colspan="3"><input type="text" class="formInput" v-model="mjftData.tdmj"/></td>
</tr>
<tr>
<td colspan="2">宗地代码</td>
<td colspan="3"><input type="text" class="formInput"/></td>
<td colspan="3"><input type="text" class="formInput" v-model="mjftData.zdbsm "/></td>
</tr>
<tr>
<td colspan="2">宗地面积(㎡)</td>
<td><input type="text" class="formInput"/></td>
<td><input type="text" class="formInput" v-model="mjftData.zjmj"/></td>
<td>定着物数量</td>
<td><input type="text" class="formInput"/></td>
<td><input type="text" class="formInput" v-model="mjftData.dzwsl"/></td>
</tr>
<tr>
<td colspan="2">备注</td>
<td colspan="3"><input type="text" class="formInput"/></td>
<td colspan="3"><input type="text" class="formInput" v-model="mjftData.bz"/></td>
</tr>
</table>
<table border="1">
<tr>
<td @click="addRow">+</td>
<td>定着物代码</td>
<td>土地所有权/使用权面积(㎡)</td>
<td>独有独用土地面积(㎡)</td>
<td>分摊土地面积(㎡)</td>
</tr>
<tr v-for="(item,i) in mjftData.addQjZdftdzwRequestList">
<td @click="delRow(i)">-</td>
<td><input type="text" class="formInput" v-model="item.dzwdm"/></td>
<td><input type="number" class="formInput" v-model="item.tdsyqsyqmj"/></td>
<td><input type="text" class="formInput" v-model="item.dydytdmj"/></td>
<td><input type="text" class="formInput" v-model="item.fttdmj"/></td>
</tr>
<tr>
<td></td>
<td>统计</td>
<td>{{sumTdsyqsyqmj}}</td>
<td>{{sumDydytdmj}}</td>
<td>{{sumFttdmj}}</td>
</tr>
</table>
<el-table
:data="tableData"
height="250"
border
style="width: 100%">
<el-table-column
prop="date"
label="日期"
width="180">
</el-table-column>
<el-table-column
prop="name"
label="姓名"
width="180">
</el-table-column>
<el-table-column
prop="address"
label="地址">
</el-table-column>
</el-table>
</div>
</template>
......@@ -48,47 +51,76 @@
name: "index",
data() {
return {
tableData: [{
id: '12987122',
name: '王小虎',
amount1: '234',
amount2: '3.2',
amount3: 10
}, {
id: '12987123',
name: '王小虎',
amount1: '165',
amount2: '4.43',
amount3: 12
}, {
id: '12987124',
name: '王小虎',
amount1: '324',
amount2: '1.9',
amount3: 9
}, {
id: '12987125',
name: '王小虎',
amount1: '621',
amount2: '2.2',
amount3: 17
}, {
id: '12987126',
name: '王小虎',
amount1: '539',
amount2: '4.1',
amount3: 15
}]
mjftData: {
zdbsm: '',
tdsyqsyqmjhj: '',
fttdmjhj: '',
dzwdys: '',
dydytdmjhj: '',
bz: '',
tdmj: '',
zjmj: '',
dzwsl: '',
addQjZdftdzwRequestList: [
{
dydytdmj: '',
dzwdm: '',
fttdmj: '',
gygyzdmjftbsm: '',
tdsyqsyqmj: ''
}
]
}
}
},
created: {},
methods: {
addTableRow() {
let table2 = document.getElementById("table2")
let table3 = document.getElementById("table3")
table2.firstChild.appendChild(table3)
addRow() {
this.mjftData.addQjZdftdzwRequestList.push({
dydytdmj: '',
dzwdm: '',
fttdmj: '',
gygyzdmjftbsm: '',
tdsyqsyqmj: ''
})
},
delRow(index) {
this.mjftData.addQjZdftdzwRequestList.splice(index, 1)
}
},
computed: {
sumTdsyqsyqmj: function () {
let sum = 0;
let data = this.mjftData.addQjZdftdzwRequestList;
for (let i = 0; i < data.length; i++) {
if (isNaN(parseFloat(data[i].tdsyqsyqmj))) {
continue;
}
sum += parseFloat(data[i].tdsyqsyqmj)
}
return isNaN(sum) ? '' : sum;
},
sumDydytdmj: function () {
let sum = 0;
let data = this.mjftData.addQjZdftdzwRequestList;
for (let i = 0; i < data.length; i++) {
if (isNaN(parseFloat(data[i].dydytdmj))) {
continue;
}
sum += parseFloat(data[i].dydytdmj)
}
return isNaN(sum) ? '' : sum;
},
delTableRow() {
let table = document.getElementsByTagName("table")
sumFttdmj: function () {
let sum = 0;
let data = this.mjftData.addQjZdftdzwRequestList;
for (let i = 0; i < data.length; i++) {
if (isNaN(parseFloat(data[i].fttdmj))) {
continue;
}
sum += parseFloat(data[i].fttdmj)
}
return isNaN(sum) ? '' : sum;
}
},
mounted() {
......