因此，我有视图添加车辆的工作卡与works.so我试图是我需要显示两个输入称为油漆费用和凹痕费用总额估计输入的索引项目，这意味着当我点击Add item按钮，它将填充4输入值描述，油漆费用，凹痕费用，EST金额）。
Vuejs Code
<template>
<div>
<form v-on:submit.prevent="save" >
<h3 class="text-center py-2 font-weight-bold"><template v-if="edit_id">Edit</template><template v-else>Add</template> Jobcard</h3>
<div class="row">
<div class="col-md-3">
<div class="form-group">
<label>Chasis No:</label>
<input type="text" v-model="jobcard.chasis_no" class="form-control" required="" placeholder="Chasis No">
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label>Model:</label>
<select class="form-control" v-model="jobcard.model" required >
<option value="">Select a Model</option>
<option v-for="model in models" :value="model.name">{{ model.name }}</option>
</select>
<!-- <small v-if="errors.role" class="text-danger">{{ errors.role[0] }}</small> -->
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label>Color:</label>
<select class="form-control" v-model="jobcard.color" required >
<option value="">Color</option>
<option v-for="color in colors" :value="color.name">{{ color.name }}</option>
</select>
</div>
</div>
</div>
<div class="row">
<div class="col-md-3">
<div class="form-group">
<label>Supervisor:</label>
<select class="form-control" v-model="jobcard.supervisor" required >
<option value="">Supervisor</option>
<option v-for="supervisor in supervisors" :value="supervisor.name">{{ supervisor.name }}</option>
</select>
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label>Techinician:</label>
<select class="form-control" v-model="jobcard.technician" required >
<option value="">Techinician</option>
<option v-for="technician in technicians" :value="technician.name">{{ technician.name }}</option>
</select>
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label>Jobcard Type:</label>
<select class="form-control" v-model="jobcard.jobcard_type" required >
<option value="">Type</option>
<option v-for="type in types" :value="type.name">{{ type.name }}</option>
</select>
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label>Remark:</label>
<input type="text" v-model="jobcard.remark" class="form-control" placeholder="Remarks if any">
</div>
</div>
</div>
<div class="table-responsive">
<table class="table table-bordered">
<thead>
<th>#</th>
<th>Description</th>
<th>Painting Charge</th>
<th>Denting Charge</th>
<th>EST Amount</th>
<th></th>
</thead>
<tbody>
<tr v-for="(item,key) in items">
<td>
{{ key+1 }}
</td>
<td>
<input type="text" v-model="item.description" class="form-control" required="" placeholder="Description" autocomplete="on">
</td>
<td>
<input type="text" pattern="[0-9.]{1,}" v-model="item.painting_charge" class="form-control" required="" placeholder="Painting Charge" >
</td>
<td>
<input type="text" pattern="[0-9.]{1,}" v-model="item.denting_charge" class="form-control" required="" placeholder="Denting Charge" >
</td>
<td>
<input type="text" pattern="[0-9.]{1,}" v-model="item.est_amount" class="form-control" required="" placeholder="Estimated Amount" >
</td>
<td>
<button type="button" class="btn btn-sm btn-danger" @click="deleteItem(key,item.id)">X</button>
</td>
</tr>
<tr v-if="items.length<10">
<td colspan="100%" class="text-center">
<button type="button" class="btn btn-sm btn-primary" @click="add_item()">Add Item</button>
</td>
</tr>
<tr>
<th colspan="3" class="text-center">Total: ₹{{ total }}</th>
<th colspan="6" class="text-center">In words: {{ total | toWords }} Rupees Only</th>
</tr>
<tr>
<td colspan="100%" class="text-center" >
<button class="btn btn-success" :disabled="items.length < 1">Submit</button>
</td>
</tr>
</tbody>
</table>
</div>
</form>
</div>
</template>
<script>
export default {
props:['edit_id','models','variants','colors','supervisors','technicians','types'],
created(){
if(this.edit_id)
{
this.edit()
}
else
this.add_item();
},
data () {
return {
shiner:{
},
loader : '/loader/loader.gif',
loading : false,
errors : {},
jobcard_id : '',
jobcard : {
id: '',
chasis_no: '',
color: '',
model: '',
variant: '',
supervisor: this.supervisors[0].name,
technician: this.technicians[0].name,
jobcard_type: '',
remark: '',
},
deleted : [],
item : {
description : '',
labour_type : '',
painting_charge : '0',
denting_charge : '0',
est_amount : '',
},
items : [],
}
},
methods : {
add_item()
{
if(this.items.length < 10)
{
this.items.push(Object.assign({}, this.item));
}
else
{
swal('Maximum Limit Reached','','error')
}
},
deleteItem(array_index,id)
{
var deleted = this.items.splice(array_index,1);
if(id)
this.deleted.push(id)
},
save() {
swal({
title: "Confirm",
text: "Are you sure?",
icon: "warning",
buttons: true,
})
.then((value) => {
if(value)
{
axios.post('/jobcards',{
jobcard : this.jobcard,
items: this.items,
deleted: this.deleted
}).
then(response => {
swal((this.edit_id)? 'Jobcard Updated':'Jobcard Added','','success')
.then((value) => {
this.jobcard_id = '';
this.clear_data();
window.location.href = ('/dash');
});
}).
catch(error => {
console.log(error);
swal("Error");
// this.searching = false;
});
}
});
}
},
computed: {
total(){
return this.items.reduce(function(total, item){
if(item.painting_charge||item.denting_charge){
return total + parseInt(item.painting_charge)+parseInt(item.denting_charge) ;
}
return total;
},0);
},
},
}
</script>
<style lang="css" scoped>
</style>
1条答案
按热度按时间pxiryf3j1#
您可以尝试创建一个新方法，该方法将
item作为参数，并将返回其Painting Charge（painting_charge）和您的Denting Charge（denting_charge）的总和。现在更新模板，尝试调用新方法
:value="calculateEstimatedAmount(item)"将Estimated Amount值输入字段绑定到calculateEstimatedAmount方法的结果。由于它是一个计算值，您可能希望将输入字段设置为readonly。这样，每当您的油漆和凹痕费用发生变化时，您的每个索引项目的估计金额将自动更新。