【发布时间】：2021-08-18 02:41:39
【问题描述】：
这是我的刀片视图，我在其中获取总结算报告和总存款的值。如果不同，则会自动计算并显示差异。在差额的基础上，差额金额需要添加以下明细，并存储在 Cashoutexpense 中。 例如 - Total Closing Report 是 200 ， Total Deposit 是 100 然后需要提供差额的详细信息。即 100。在这种情况下，假设用户通过添加另一行在一个文本框中输入了 50 和 50 的费用金额。
<div class="form-group row">
<div class="col-12">
<label>Total Closing Report</label>
<input class="form-control" v-model="form.closing_report_total" @change="calculate" type="number" required name="closing_report_total" placeholder="Enter Closing Report Total">
</div>
</div>
<div class="form-group row">
<div class="col-12">
<label>Total Deposit</label>
<input class="form-control" type="number" v-model="form.total_deposit" @change="calculate" required name="total_deposit" placeholder="Enter Total Deposit">
</div>
</div>
<div class="form-group row">
<div class="col-12">
<label>Difference</label>
<input class="form-control" type="number" v-model="form.difference" name="difference" placeholder="Enter Difference" readonly>
</div>
</div>
<div class="form-group row" v-if="form.difference != 0" v-for="(comment, k) in form.cashoutexpenses" :key="k">
<div class="col-4">
<input type="text" class="flatpickr form-control" v-model="comment.expense_date" required name="expense_date" placeholder="Click here to choose Date">
</div>
<div class="col-4">
<input class="form-control" type="number" v-model="comment.amount" required name="amount" placeholder="Enter Expense Amount" @change="calculate_error">
</div>
<div class="col-4">
<input class="form-control" type="text" v-model="comment.comment" required name="comment" placeholder="Enter Expense Comments">
</div>
<div class="col-4">
<button class="btn btn-sm btn-danger" type="button" @click="removeRow(k)">Remove</button>
</div>
</div>
<div class="form-group row" v-if="form.left > 0">
<div class="col-12">
<input class="btn btn-primary form-control" type="button" value="Add Row" @click="addRow()">
</div>
</div>
下面是我的脚本代码。
<script>
var app = new Vue({
el: '#app',
mounted: function() {
},
computed: {
difference: function() {
return this.form.difference = this.form.closing_report_total - this.form.total_deposit;
}
},
data: {
form: {
closing_report_total : 0.00,
total_deposit: 0.00,
difference: 0.00,
left: 0.00,
comments: '',
cashoutexpenses: [],
buffer: []
},
},
methods: {
addRow() {
this.form.cashoutexpenses.push({
date: '',
amount: '',
comment: '',
});
this.form.buffer = JSON.parse(JSON.stringify(this.form.cashoutexpenses));
},
removeRow(index) {
this.form.cashoutexpenses.splice(index, 1);
this.form.buffer = JSON.parse(JSON.stringify(this.form.cashoutexpenses));
},
calculate: function() {
this.form.difference = this.form.closing_report_total - this.form.total_deposit;
this.form.cashoutexpenses = [];
this.form.buffer = JSON.parse(JSON.stringify(this.form.cashoutexpenses));
if(this.form.difference != 0) {
this.addRow();
}
},
calculate_error: function() {
this.form.left = this.form.difference - this.form.cashoutexpenses.reduce((a,b)=> (a + (parseInt(b['amount'])||0)),0);
if(this.form.left<0) {
alert("Sum of expenses should not exceed total amount");
for(var i=0; i<this.form.cashoutexpenses.length;i++) {
if(this.form.cashoutexpenses[i].amount!=this.form.buffer[i].amount) {
this.form.buffer[i].amount = 0;
this.form.cashoutexpenses[i].amount=this.form.difference - this.form.buffer.reduce((a,b)=> (a + (parseInt(b['amount'])||0)),0);
}
}
}
else if(this.form.left>0) {
alert("Please add "+this.form.left+" more");
}
this.form.buffer = JSON.parse(JSON.stringify(this.form.cashoutexpenses));
},
formSubmit: function(e) {
e.preventDefault();
let currentObj = this;
// let data = new FormData();
let formData = new FormData()
formData.append('closing_report_total', this.form.closing_report_total);
formData.append('total_deposit', this.form.total_deposit);
formData.append('difference', this.form.difference);
formData.append('form.cashoutexpenses', this.form.cashoutexpenses);
let config = { headers: { 'Content-Type': 'multipart/form-data' } }
axios.post('/cashoutdetails/store', formData ,config)
.then(response => {
//console.log(formData);
//alert('data saved');
//window.location.href = "{{ route('cashoutdetails.index')}}";
})
.catch(function (error) {
alert('Error');
});
}
}
})
</script>
如果我在 mozilla firefox 的 vue 插件中检查相同，则会显示正确的数据，如下所示--
cashoutexpenses:Array[2]
0:Object
amount:"50"
comment:"test2"
date:""
expense_date:"2021-10-10"
1:Object
amount:"50"
comment:"test3"
date:""
expense_date:"2021-10-12"
现在在我的控制器中，我正在获取如下数据 -
$comments = $request->form_cashoutexpenses;
//return $comments;
foreach($comments as $c) {
return $c;
$cashout_comments = new CashOutExpenses;
$cashout_comments->cashout_id = $cashout_details->id;
$cashout_comments->expense_date = $c['expense_date'];
$cashout_comments->amount = $c['amount'];
$cashout_comments->explanation = $c['comment'];
$cashout_comments->save();
}
return response()->json([
'message' => 'Details added!',
], 201);
如果我返回 $cmets，它会以 [object Object],[object Object] 的形式给出回复，否则它会为 foreach 返回错误。
如果我返回 $request->all(); ...它给出以下输出 -
{"closing_report_total":"200","total_deposit":"100","difference":"100","form.cashoutexpenses":"[object Object]"}
请帮我将这些数据保存在 cashout_expense 表中。
【问题讨论】：
-
dd($cmets->toArray());.post 你得到了什么
-
如果我写这个，它会返回错误为“调用字符串上的成员函数 toArray()”
-
试试dd($request->all())
-
显然
form.cashoutexpenses是 JS 端的一个数组（“[object Object]”是建议 JS 将数组转换为字符串）但是您的库没有正确处理它，尝试以某种方式对其进行编码。还有为什么所有的JSON.parse(JSON.stringify(x))？这只是转换为 JSON 并返回，它什么都不做。