Блог

Это мой клинок —

 <!-- Page Content -->
<div class="content" id="app">
    <!-- Lock Forms -->
    <!-- <h2 class="content-heading">Add User</h2> -->
    <!-- Register Forms -->
    <div class="row">
        <div class="col-md-12">
            <!-- Bootstrap Register -->
            <div class="block block-themed">
                <div class="block-header bg-gd-dusk">
                    <h3 class="block-title">Add Cashout Details</h3>
                </div>
                <div class="block-content">
                    @include('errors.error')
                   {{--  <form action="{{ route('cashoutdetails.store') }}" method="post" enctype="multipart/form-data" autocomplete="off"> --}}
                    <form @submit="formSubmit" enctype="multipart/form-data">    
                    @csrf
                        <div class="form-group row">
                            <div class="col-12">
                                <label>Select Store</label>
                                <select class="form-control" name="store_id" v-model="form.store_id">
                                   <option v-for="store in stores" :key="store.id" v-bind:value="store.id">@{{store.channel_id}}</option>
                                </select>   
                            </div>
                        </div>
                        <div class="form-group row">
                            <div class="col-12">
                                <label>Recorded Date</label>
                                <input type="text" class="flatpickr form-control" v-model="form.recorded_date" name="recorded_date"> 
                            </div>
                        </div>
                        <div class="form-group row">
                            <div class="col-12">
                                <label>Total Closing Report</label>
                                <input class="form-control" v-model="form.closing_report_total" type="number" 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" 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" >
                            <div class="col-3">
                                <input class="form-control" type="number" v-model="cashoutexpenses.amount" name="amount" placeholder="Enter Amount">   
                            </div>
                            <div class="col-3">
                                <input class="form-control" type="text" v-model="cashoutexpenses.explanation" name="explanation" placeholder="Enter Explanation">  
                            </div>
                            <div class="col-3">
                                <input class="form-control-file" type="file" v-on:change=""> 
                            </div>
                            <div class="col-3">
                                <input class="btn btn-primary form-control" type="button" value="Add Row" @click="addRow()"> 
                            </div>
                        </div>
                        <div class="form-group row">
                            <div class="col-12">
                                <label>Prepared By</label>
                                <select class="form-control" name="prepared_by" v-model="form.prepared_by">
                                    <option v-for="user in users" :key="user.id" v-bind:value="user.id">@{{user.name}}</option>
                                 </select>   
                            </div>
                        </div>
                        <div class="form-group row">
                            <div class="col-12">
                                <label>Deposited By</label>
                                <select class="form-control" name="deposited_by" v-model="form.deposited_by">
                                    <option v-for="user in users" :key="user.id" v-bind:value="user.id">@{{user.name}}</option>
                                </select>    
                            </div>
                        </div>
                        <div class="form-group row">
                            <div class="col-12">
                                <label>Date of Deposit</label>
                                <input type="text" class="flatpickr form-control" v-model="form.deposit_date" name="deposit_date"> 
                            </div>
                        </div>
                        <div class="form-group row">
                            <div class="col-12">
                                <label>Deposit Reference Number</label>
                                <input class="form-control" type="text" v-model="form.reference_number" name="reference_number" placeholder="Enter Reference Number">   
                            </div>
                        </div>
                        <div class="form-group row">
                            <div class="col-12">
                                <label>Upload Bank Receipt</label>
                                <input class="form-control-file" type="file" v-on:change="onImageChange">   
                            </div>
                        </div>
                        <div class="form-group row">
                            <div class="col-12">
                                <label>Comments</label>
                                <textarea class="form-control" v-model="form.comments" name="comments" placeholder="Enter Comments"> </textarea> 
                            </div>
                        </div>
                        <div class="form-group row">
                            <div class="col-12">
                                <button type="submit" class="btn btn-primary">Submit</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
            <!-- END Bootstrap Register -->
        </div>
    </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: {
        stores: {!! $stores !!},
        users: {!! $users !!},
        form: {
            closing_report_total : '',
            total_deposit: '',
            difference: '',
            user_id: '',
            deposited_by: '',
            deposit_date: '',
            prepared_by: '',
            recorded_date: '',
            reference_number: '',
            comments: '',
            image: '',
            store_id: ''
        }, 
        cashoutexpenses: {
            amount: '',
            explanation: '',
            image: ''
        }
    },
    methods: {
        onImageChange(e){
            console.log(e.target.files[0]);
            this.form.image = e.target.files[0];
        },
        addRow() {
                this.cashoutexpenses.push({
                    amount: '',
                    explanation: '',
                    image: ''
                });
        },
        formSubmit(e) {
            e.preventDefault();
            let currentObj = this;

            const config = {
                headers: { 'content-type': 'multipart/form-data' }
            }

            let formData = new FormData();
            formData.append('image', this.form.image);
            formData.append('store_id', this.form.store_id); 
            formData.append('recorded_date', this.form.recorded_date); 
            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('prepared_by', this.form.prepared_by);
            formData.append('deposited_by', this.form.deposited_by);
            formData.append('deposit_date', this.form.deposit_date);
            formData.append('reference_number', this.form.reference_number);
            formData.append('comments', this.form.comments);
            axios.post('/cashoutdetails/store', formData, config)
            .then((response) =>{
                console.log(response);
            })

            .catch(function (error) {
                currentObj.output = error;
            });
        }
    }
})

</script>
 

ниже приведен код контроллера для хранения данных —

  public function store(Request $request)
    {
        //return $request->all();
        $imageName = time().'.'.$request->image->getClientOriginalExtension();
        $request->image->move(storage_path('app/public/bankreceipt'), $imageName);
        $cashout_details = CashOutDetail::create([
            'user_id' => Auth::user()->id,
            'store_id' => $request['store_id'],
            'recorded_date' => $request['recorded_date'],
            'closing_report_total' => $request['closing_report_total'],
            'total_deposit' => $request['total_deposit'],
            'difference' => $request['difference'],
            'prepared_by' => $request['prepared_by'],
            'deposited_by' => $request['deposited_by'],
            'deposit_date' => $request['deposit_date'],
            'reference_number' => $request['reference_number'],
            'bank_receipt'=> $imageName,
            'comments' => $request['comments']
        ]);
        /* return response()->json([
            'message' => 'Details added!',
        ], 201); */ 
        return redirect()->back()->withErrors('Details Saved Successfully!'); 
    }
 

Теперь у меня есть три вопроса —

1. Функция addRow должна создать новую динамическую строку, содержащую столбцы для количества, пояснения и изображения.
2. банковский счет хранит null в базе данных
3. после сохранения записи она не переходит обратно на индексную страницу.