У меня есть динамическая форма с четырьмя полями ввода, я могу добавить новую строку или удалить строку.
Первая строка добавляется при нажатии кнопки оплаты;при нажатии на кнопку оплаты запускается функция onGetModalAddRow (), и отображается модальное окно с начальной строкой формы, содержащей 4 поля ввода с предварительно определенными полями subTotal и amountPaid, что позволяет мне добавить новую строку или удалить строку.
Поля формы для каждой строки: subTotal: amountPaid: toBalance: paymentMethod:
Чего я хочу достичь:
Когда нажата кнопка addRow, я хочу, чтобы она была такой, чтобысумма toBalance в предыдущей строке становится подытогом & amountPaid новой строки и т. д. до нулевой суммы toBalance.
Возможность отключения кнопки removeRow в предыдущей строке также будет добавленной функцией: это будетвынудите пользователя упорядоченно удалять строки, чтобы обеспечить точный расчет.
Но если есть лучший способ разрешить пользователям удалять любую строку (за исключением первого ряда) и при этом иметь точное вычислениеЗначения для полей формы, тогда это будет высоко оценено.
CHECK КОД НИЖЕ ДЛЯ ЛУЧШЕГО ПОНИМАНИЯ: HTML:
КНОПКА ОПЛАТЫ
<li><button type="button" v-on:click="onGetModalAddRow('splitpayments')" class="btn waves-effect waves-light btn-success" data-toggle="modal" data-target="#getPayFormModal" data-whatever="@getbootstrap" title="Make Payment" >PAY</button></li>
МОДАЛЬНАЯ ФОРМА ОПЛАТЫ ОПЛАТЫ
<!-- /. START MODAL -->
<!-- START SPLIT PAYMENT FORM INIT -->
<div class="modal fade" id="getPayFormModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel1">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="exampleModalLabel1" >PAYMENT DETAILS</h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
</div>
<div class="modal-body">
<form class="vld-parent" ref="formContainer">
<input type="hidden" class="colorfieldblue" name="customer_amount_paid" id="customer_amount_paid" v-model="maincartsection.customer_amount_paid" :value="computeCustomerSubTotal" required />
<div v-for="(itm, index) in maincartsection.splitpaymentformitems.items" :id="index">
<a v-on:click="removeRow(index)" style="color: red; cursor: pointer;" title="Remove Row" data-toggle="tooltip" data-original-title="Close"> <i class="fa fa-close text-danger"></i> </a>
<div class="form-group" >
<div class="row">
<div :class="{'col-6':'col-6','error': errors.has('subtotal_' + itm.id)}" >
<label :for="'subtotal'+itm.id" class="control-label">Sub Total:</label>
<input type="text" class="form-control input" :id="'subtotal'+index" :key="itm.id" :name="'subtotal_' + itm.id" v-validate="'required|min:3'" v-model="maincartsection.splitpaymentformitems.items[index].subtotal" :value="computeCustomerSubTotal" required placeholder="0" disabled="disabled" >
<div class="help-block"><ul role="alert"><li v-text="errors.first('subtotal_' + itm.id)"></li></ul></div>
<div class="help-block" style="color: #dd4b39;" ><ul role="alert"><li ></li></ul></div>
</div>
<div :class="{'col-6':'col-6','error': errors.has('amountpaid_' + itm.id)}" >
<label :for="'amountpaid'+itm.id" class="control-label">Amount Paid:</label>
<input type="text" class="form-control input" :id="'amountpaid'+index" :key="itm.id" :name="'amountpaid_' + itm.id" v-validate="'required'" v-model="maincartsection.splitpaymentformitems.items[index].amountpaid" required placeholder="0.00" v-on:change="onAmountEntered(index)" @focus="onAmountPaidFieldFocus(index)" >
<div class="help-block"><ul role="alert"><li v-text="errors.first('amountpaid_' + itm.id)"></li></ul></div>
<div class="help-block" style="color: #dd4b39;" ><ul role="alert"><li ></li></ul></div>
</div>
</div>
</div>
<div class="form-group" >
<div class="row">
<div :class="{'col-6':'col-6','error': errors.has('tobalance_' + itm.id)}" >
<label :for="'tobalance'+itm.id" class="control-label">To Balance:</label>
<input type="text" class="form-control input" :id="'tobalance'+index" :key="itm.id" :name="'tobalance_' + itm.id" v-validate="'required'" v-model="maincartsection.splitpaymentformitems.items[index].tobalance" :value="computeToBalance" required placeholder="0" disabled="disabled" >
<div class="help-block"><ul role="alert"><li v-text="errors.first('tobalance_' + itm.id)"></li></ul></div>
<div class="help-block" style="color: #dd4b39;" ><ul role="alert"><li ></li></ul></div>
</div>
<div :class="{'col-6':'col-6','error': errors.has('paymentmethod_' + itm.id)}" >
<label :for="'paymentmethod'+itm.id" class="control-label">Payment Method:</label>
<select class="custom-select col-12 input" :id="'paymentmethod'+index" :key="itm.id" :name="'paymentmethod_' + itm.id" v-validate="'required'" v-model="maincartsection.splitpaymentformitems.items[index].paymentmethod" required>
<option v-for="(paymntoptn, index) in items.availablepaymentoptions" :value="paymntoptn.payment_title_slug" v-text="paymntoptn.payment_title"></option>
</select>
<div class="help-block"><ul role="alert"><li v-text="errors.first('paymentmethod_' + itm.id)"></li></ul></div>
<div class="help-block" style="color: #dd4b39;" ><ul role="alert"><li ></li></ul></div>
</div>
</div>
</div>
<hr style="background-color: #009efb;" />
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" style="margin-right: 30%;" class="btn btn-danger waves-effect text-left" data-dismiss="modal">CANCEL</button>
<button type="button" v-on:click="addRow()" title="Split Payment" class="btn btn-info waves-effect waves-light" style="float: right; margin-right: 3%;"><i class="fa fa-plus"></i></button>
<button type="button" :disabled="errors.any()" class="btn btn-success">PAY NOW</button>
</div>
</div>
</div>
</div>
<!-- END SPLIT PAYMENT FORM INIT -->
<!-- /. END MODAL -->
JAVASCRIPT (VueJs):
//Start Modal
onGetModalAddRow: function (modalformdatasection) {
self = this;
//Empty previous modalformdata array, then Add new rows for current form data
self.validations.fieldstatuslogs = [];
self.maincartsection.splitpaymentformitems.items = [];
self.maincartsection.splitpaymentformitems.id = 0;
//Start splitpayments
if (modalformdatasection == "splitpayments") {
self._addRowHelper(self.computeCustomerSubTotal, self.computeCustomerSubTotal, self.computeToBalance, '');
}
//End splitpayments
},
//End Modal
//Start addRow Helper Function
_addRowHelper: function(newSubTotal, amountpaid, tobalance, paymentmethod){
//START ADD ANOTHER ROW
self.maincartsection.splitpaymentformitems.items.push({ id: self.maincartsection.splitpaymentformitems.id++, subtotal: newSubTotal, amountpaid: amountpaid, tobalance: tobalance, paymentmethod: paymentmethod });
self.validations.fieldstatuslogs.push({
subtotal: {
is_valid: true,
text: ''
},
amountpaid: {
is_valid: true,
text: ''
},
tobalance: {
is_valid: true,
text: ''
},
paymentmethod: {
is_valid: true,
text: ''
},
});
//END ADD ANOTHER ROW
},
//End addRow Helper Function
//START SPLIT PAYMENT - addRow Function
addRow: function(){
self = this;
var lastiteminarrayIndex = '';
if(self.maincartsection.splitpaymentformitems.items.length < 1){
// alert('First Item Added');
//Disable Amount Paid Feild
//document.getElementById('customer_amount_paid').focus();
//self.splitPaymentClicked = true;
self.maincartsection.splitpaymentformitems.splitPaymentStatus = 1;
//Initialize First Item Value with Cart Value
//Call onGetModalAddRow Function to Initialize First Item Value with Cart Value
self.onGetModalAddRow('splitpayments');
return;
}
lastiteminarrayIndex = self.maincartsection.splitpaymentformitems.items.length-1;
var subTotalOfIndex = parseFloat(document.getElementById('subtotal'+lastiteminarrayIndex).value);
if(!parseFloat(document.getElementById('amountpaid'+lastiteminarrayIndex).value )){
alert('Amount Paid must be a Number and Can not be less than 1');
return;
}
var amountPaidOfIndex = parseFloat(document.getElementById('amountpaid'+lastiteminarrayIndex).value);
var newSubTotal = subTotalOfIndex - amountPaidOfIndex;
//set value of tobalance in lastindex
document.getElementById('tobalance'+lastiteminarrayIndex).value = newSubTotal;
if(newSubTotal < 1){
if(confirm('There is No Outstanding Balance, Do you still want to proceed to add a new row? ')){
//START ADD ANOTHER ROW
self._addRowHelper(newSubTotal,'','','');
//END ADD ANOTHER ROW
return;
}else{
return;
}
}
//START ADD ANOTHER ROW
self._addRowHelper(newSubTotal,'','','');
//END ADD ANOTHER ROW
return;
},
removeRow: function(idx){
self = this;
if(self.maincartsection.splitpaymentformitems.items.length < 1){
alert('List is Empty');
return;
}
lastiteminarrayIndex = self.maincartsection.splitpaymentformitems.items.length-1;
//REMOVE OTHER ITEMS BELOW TOP ITEM
if(lastiteminarrayIndex == idx){
self.maincartsection.splitpaymentformitems.items.splice(idx, 1);
if(self.maincartsection.splitpaymentformitems.items.length < 1){
//self.splitPaymentClicked = false;
// self.maincartsection.splitpaymentformitems.splitPaymentStatus = 0;
// document.getElementById('customer_amount_paid').focus();
return;
}
}else{
self.maincartsection.splitpaymentformitems.items = [];
// self.splitPaymentClicked = false;
// self.maincartsection.splitpaymentformitems.splitPaymentStatus = 0;
// document.getElementById('customer_amount_paid').focus();
}
return;
//END REMOVE OTHER ITEMS BELOW TOP ITEM
},