<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> | 
