Laravel Livewire多功能表格保存数据

bounty将在5天后过期。回答此问题可获得+50的声誉奖励。Nu Carvignulu正在寻找来自声誉良好来源的答案。

这是我的刀片文件，我有2个问题，我想从javascript在这3个步骤不同的变量，并在最后一页，我想做一个总结3个不同的预设，并保存到我的数据库一样：

id_client: = 1 ; order_1d =1 sub_order = 1

id_client: = 1 ; order_1d =1 sub_order = 2

id_client: = 1 ; order_1d =1 sub_order = 3

我想保存在我的数据库中的信息corretct我可能有2个选项：
1.每次我转到下一页时都会保存
1.我在最后保存，但我不知道如何区分来自javascript函数的变量

<pre>
<form wire:submit.prevent="submit" class="pt-3">

    <div>

{{--    <div class="form-group {{ $errors->has('ordini.id_tipo') ? 'invalid' : '' }}">
        <label class="form-label" for="id_tipo">{{ trans('cruds.ordini.fields.id_tipo') }}</label>
        <input class="form-control" type="number" name="id_tipo" id="id_tipo" wire:model.defer="ordini.id_tipo" step="1">
        <div class="validation-message">
            {{ $errors->first('ordini.id_tipo') }}
        </div>
        <div class="help-block">
            {{ trans('cruds.ordini.fields.id_tipo_helper') }}
        </div>
    </div>--}}

    <div class="form-group">
        <button class="btn btn-indigo mr-2" type="submit">
            {{ trans('global.save') }}
        </button>
        <a href="{{ route('admin.ordinis.index') }}" class="btn btn-secondary">
            {{ trans('global.cancel') }}
        </a>
    </div>

{{--</form>--}}




{{--Inizio sessione  vecchia, scelta cliente--}}



</form>





    <form>

        {{-- STEP 1 --}}

        @if ($currentStep == 1)

            <div class="step-one">
                <div class="card">

                    <div class="card-header text-xl text-pink-400">Farmaci della mattina</div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group {{ $errors->has('ordini.cliente_id') ? 'invalid' : '' }}">
                                    <label class="form-label" for="cliente">{{ trans('cruds.ordini.fields.cliente') }}</label>
                                    <x-select-list class="form-control" id="cliente" name="cliente" :options="$this->listsForFields['cliente']" wire:model="ordini.cliente_id" />
                                    <div class="validation-message">
                                        {{ $errors->first('ordini.cliente_id') }}
                                    </div>
                                    <div class="help-block">
                                        {{ trans('cruds.ordini.fields.cliente_helper') }}
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group {{ $errors->has('prodotti') ? 'invalid' : '' }}">
                                    <label class="form-label" for="prodotti">{{ trans('cruds.ordini.fields.prodotti') }}</label>
                                    <x-select-list class="form-control" id="prodotti" name="prodotti" wire:model="prodotti" :options="$this->listsForFields['prodotti']" multiple />
                                    <div class="validation-message">
                                        {{ $errors->first('prodotti') }}
                                    </div>
                                    <div class="help-block">
                                        {{ trans('cruds.ordini.fields.prodotti_helper') }}
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="form-group">
                            <label for="">Description</label>
                            <textarea class="form-control" cols="2" rows="2" wire:model="description"></textarea>
                            <span class="text-danger">@error('description'){{ $message }}@enderror</span>
                        </div>
                    </div>
                </div>
            </div>
        @endif

        {{-- STEP 2 --}}

        @if ($currentStep == 2)

            <div class="step-two">
                <div class="card">
                    <div class="card-header text-xl text-pink-400">Farmaci della pranzo</div>
                    <div class="card-body">

                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group {{ $errors->has('ordini.cliente_id') ? 'invalid' : '' }}">
                                    <label class="form-label" for="cliente">{{ trans('cruds.ordini.fields.cliente') }}</label>
                                    <x-select-list class="form-control" id="cliente" name="cliente" :options="$this->listsForFields['cliente']" wire:model="ordini.cliente_id" />
                                    <div class="validation-message">
                                        {{ $errors->first('ordini.cliente_id') }}
                                    </div>
                                    <div class="help-block">
                                        {{ trans('cruds.ordini.fields.cliente_helper') }}
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group {{ $errors->has('prodotti') ? 'invalid' : '' }}">
                                    <label class="form-label" for="prodotti">{{ trans('cruds.ordini.fields.prodotti') }}</label>
                                    <x-select-list class="form-control" id="prodotti" name="prodotti" wire:model="prodotti" :options="$this->listsForFields['prodotti']" multiple />
                                    <div class="validation-message">
                                        {{ $errors->first('prodotti') }}
                                    </div>
                                    <div class="help-block">
                                        {{ trans('cruds.ordini.fields.prodotti_helper') }}
                                    </div>
                                </div>
                            </div>
                        </div>

                    </div>
                </div>
            </div>

        @endif
        {{-- STEP 3 --}}

        @if ($currentStep == 3)

            <div class="step-three">
                <div class="card">
                    <div class="card-header text-xl text-pink-400">Farmaci della sera</div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group {{ $errors->has('ordini.cliente_id') ? 'invalid' : '' }}">
                                    <label class="form-label" for="cliente">{{ trans('cruds.ordini.fields.cliente') }}</label>
                                    <x-select-list class="form-control" id="cliente" name="cliente" :options="$this->listsForFields['cliente']" wire:model="ordini.cliente_id" />
                                    <div class="validation-message">
                                        {{ $errors->first('ordini.cliente_id') }}
                                    </div>
                                    <div class="help-block">
                                        {{ trans('cruds.ordini.fields.cliente_helper') }}
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group {{ $errors->has('prodotti') ? 'invalid' : '' }}">
                                    <label class="form-label" for="prodotti">{{ trans('cruds.ordini.fields.prodotti') }}</label>
                                    <x-select-list class="form-control" id="prodotti" name="prodotti" wire:model="prodotti" :options="$this->listsForFields['prodotti']" multiple />
                                    <div class="validation-message">
                                        {{ $errors->first('prodotti') }}
                                    </div>
                                    <div class="help-block">
                                        {{ trans('cruds.ordini.fields.prodotti_helper') }}
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        @endif

        {{-- STEP 4 --}}
        @if ($currentStep == 4)

            <div class="step-four">
                <div class="card">
                    <div class="card-header bg-secondary text-white">STEP 4/4 - Attachments</div>
                    <div class="card-body">
                        Lorem, ipsum dolor sit amet consectetur adipisicing elit. Itaque delectus officia inventore id facere at aspernatur ad corrupti asperiores placeat, fugiat tempora soluta optio recusandae eligendi impedit ipsam ullam amet!
                        <div class="form-group">
                            <label for="cv">CV</label>
                            <input type="file" class="form-control" wire:model="cv">
                            <span class="text-danger">@error('cv'){{ $message }}@enderror</span>
                        </div>
                        <div class="form-group">
                            <label for="terms" class="d-block">
                                <input type="checkbox"  id="terms" wire:model="terms"> You must agree with our <a href="#">Terms and Conditions</a>
                            </label>
                            <span class="text-danger">@error('terms'){{ $message }}@enderror</span>
                        </div>
                    </div>
                </div>
            </div>

        @endif

        <div class="action-buttons d-flex justify-content-between bg-white pt-2 pb-2">

            @if ($currentStep == 1)
                <div></div>
            @endif

            @if ($currentStep == 2 || $currentStep == 3 || $currentStep == 4)
                <button type="button" class="btn btn-md btn-secondary" wire:click="decreaseStep()">Back</button>
            @endif

            @if ($currentStep == 1 || $currentStep == 2 || $currentStep == 3)
                <button type="button" class="btn btn-md btn-success" wire:click="increaseStep()">Next</button>
            @endif

            @if ($currentStep == 4)
                <button type="submit" class="btn btn-md btn-primary">Submit</button>
            @endif

        </div>

    </form>

</div>

</pre>

我的控制器：

<?php

namespace App\Http\Livewire\Ordini;

use App\Models\Customer;
use App\Models\Ordini;
use App\Models\Product;
use Livewire\Component;

class Create extends Component
{
    public Ordini $ordini;

    public array $prodotti = [];

    public array $listsForFields = [];

    public $totalSteps = 4;
    public $currentStep = 1;





    public function mount(Ordini $ordini)
    {
        $this->ordini = $ordini;
        $this->initListsForFields();
    }

    public function render()
    {
        return view('livewire.ordini.create');
    }

    public function submit()
    {
        $this->validate();

        $this->ordini->save();
        $this->ordini->prodotti()->sync($this->prodotti);

        return redirect()->route('admin.ordinis.index');

    }

    public function increaseStep(){
        $this->resetErrorBag();
        $this->validate();
        $this->currentStep++;
        if($this->currentStep > $this->totalSteps){
            $this->currentStep = $this->totalSteps;
        }
    }

    public function decreaseStep(){
        $this->resetErrorBag();
        $this->currentStep--;
        if($this->currentStep < 1){
            $this->currentStep = 1;
            //render();
        }
    }

    protected function rules(): array
    {
        return [
            'ordini.name' => [
                'string',
                'nullable',
            ],
            'ordini.cliente_id' => [
                'integer',
                'exists:customers,id',
                'nullable',
            ],
            'prodotti' => [
                'array',
            ],
            'prodotti.*.id' => [
                'integer',
                'exists:products,id',
            ],
            'ordini.id_tipo' => [
                'integer',
                'min:-2147483648',
                'max:2147483647',
                'nullable',
            ],
        ];
    }

    protected function initListsForFields(): void
    {
        $this->listsForFields['cliente']  = Customer::pluck('name', 'id')->toArray();
        $this->listsForFields['prodotti'] = Product::pluck('name', 'id')->toArray();
    }
}

和我的另一个刀片选择列表

<pre>
 <div>
    <div wire:ignore class="w-full">
        @if(isset($attributes['multiple']))
            <div id="{{ $attributes['id'] }}-btn-container" class="mb-3">
                <button type="button" class="btn btn-info btn-sm select-all-button">{{ trans('global.select_all') }}</button>
                <button type="button" class="btn btn-info btn-sm deselect-all-button">{{ trans('global.deselect_all') }}</button>
            </div>
        @endif
        <select class="select2 form-control" data-placeholder="{{ __('Select your option') }}" {{ $attributes }}>
            @if(!isset($attributes['multiple']))
                <option></option>
            @endif
            @foreach($options as $key => $value)
                <option value="{{ $key }}">{{ $value }}</option>
            @endforeach
        </select>
    </div>
</div>

@push('scripts')
    <script>
        document.addEventListener("livewire:load", () => {
    let el = $('#{{ $attributes['id'] }}')
    let buttonsId = '#{{ $attributes['id'] }}-btn-container'

    function initButtons() {
        $(buttonsId + ' .select-all-button').click(function (e) {
            el.val(_.map(el.find('option'), opt => $(opt).attr('value')))
            el.trigger('change')
        })

        $(buttonsId + ' .deselect-all-button').click(function (e) {
            el.val([])
            el.trigger('change')
        })
    }

    function initSelect () {
        initButtons()
        el.select2({
            placeholder: '{{ __('Select your option') }}',
            allowClear: !el.attr('required')
        })
    }

    initSelect()

    Livewire.hook('message.processed', (message, component) => {
        initSelect()
    });

    el.on('change', function (e) {
        let data = $(this).select2("val")
        if (data === "") {
            data = null
        }
@this.set('{{ $attributes['wire:model'] }}', data)
    });
});
    </script>
@endpush  
</pre>

我有2个问题，我想从javascript在这3个步骤不同的变量，并在最后一页，我想做一个总结3个不同的预设和保存到我的数据库一样：

id_client: = 1 ; order_1d =1 sub_order = 1

id_client: = 1 ; order_1d =1 sub_order = 2

id_client: = 1 ; order_1d =1 sub_order = 3

我想在我的数据库中保存正确的信息

这是我的创建顺序，与按钮下一个我做另一个页面，该页面是相同的。我想3哦这些。在最后一页我想所有的信息

<script src="/livewire/livewire.js?id=fe747446aa84856d8b66" data-turbo-eval="false" data-turbolinks-eval="false" ></script>
<script data-turbo-eval="false" data-turbolinks-eval="false" >
    if (window.livewire) {
        console.warn('Livewire: It looks like Livewire\'s @livewireScripts JavaScript assets have already been loaded. Make sure you aren\'t loading them twice.')
    }

    window.livewire = new Livewire();
    window.livewire.devTools(true);
    window.Livewire = window.livewire;
    window.livewire_app_url = '';
    window.livewire_token = 'LiGD9aaMhsaTAMbE2HLPKJxze6dHcqHyVEYphnce';

    /* Make sure Livewire loads first. */
    if (window.Alpine) {
        /* Defer showing the warning so it doesn't get buried under downstream errors. */
        document.addEventListener("DOMContentLoaded", function () {
            setTimeout(function() {
                console.warn("Livewire: It looks like AlpineJS has already been loaded. Make sure Livewire\'s scripts are loaded before Alpine.\\n\\n Reference docs for more info: http://laravel-livewire.com/docs/alpine-js")
            })
        });
    }

    /* Make Alpine wait until Livewire is finished rendering to do its thing. */
    window.deferLoadingAlpine = function (callback) {
        window.addEventListener('livewire:load', function () {
            callback();
        });
    };

    let started = false;

    window.addEventListener('alpine:initializing', function () {
        if (! started) {
            window.livewire.start();

            started = true;
        }
    });

    document.addEventListener("DOMContentLoaded", function () {
        if (! started) {
            window.livewire.start();

            started = true;
        }
    });
</script>
                    <script>
        document.addEventListener("livewire:load", () => {
    let el = $('#cliente')
    let buttonsId = '#cliente-btn-container'

    function initButtons() {
        $(buttonsId + ' .select-all-button').click(function (e) {
            el.val(_.map(el.find('option'), opt => $(opt).attr('value')))
            el.trigger('change')
        })

        $(buttonsId + ' .deselect-all-button').click(function (e) {
            el.val([])
            el.trigger('change')
        })
    }

    function initSelect () {
        initButtons()
        el.select2({
            placeholder: 'Select your option',
            allowClear: !el.attr('required')
        })
    }

    initSelect()

    Livewire.hook('message.processed', (message, component) => {
        initSelect()
    });

    el.on('change', function (e) {
        let data = $(this).select2("val")
        if (data === "") {
            data = null
        }
window.livewire.find('FwZQBSk0vKOUXsLR3jIh').set('ordini.cliente_id', data)
    });
});
    </script>
    <script>
        document.addEventListener("livewire:load", () => {
    let el = $('#prodotti')
    let buttonsId = '#prodotti-btn-container'

    function initButtons() {
        $(buttonsId + ' .select-all-button').click(function (e) {
            el.val(_.map(el.find('option'), opt => $(opt).attr('value')))
            el.trigger('change')
        })

        $(buttonsId + ' .deselect-all-button').click(function (e) {
            el.val([])
            el.trigger('change')
        })
    }

    function initSelect () {
        initButtons()
        el.select2({
            placeholder: 'Select your option',
            allowClear: !el.attr('required')
        })
    }

    initSelect()

    Livewire.hook('message.processed', (message, component) => {
        initSelect()
    });

    el.on('change', function (e) {
        let data = $(this).select2("val")
        if (data === "") {
            data = null
        }
window.livewire.find('FwZQBSk0vKOUXsLR3jIh').set('prodotti', data)
    });
});
    </script>
        <script>
            function closeAlert(event){
        let element = event.target;
        while(element.nodeName !== "BUTTON"){
          element = element.parentNode;
        }
        element.parentNode.parentNode.removeChild(element.parentNode);
      }
        </script>
</body>

<form>

        

        

            <div class="step-one">
                <div class="card">

                    <div class="card-header text-xl text-pink-400">Farmaci della mattina</div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group ">
                                    <label class="form-label" for="cliente">Cliente</label>
                                    <div>
    <div wire:ignore class="w-full">
                <select class="select2 form-control" data-placeholder="Select your option" class="form-control" id="cliente" name="cliente" wire:model="ordini.cliente_id">
                            <option></option>
                                        <option value="1">Raffaele Filomena</option>
                            <option value="2">maria colella</option>
                    </select>
    </div>
</div>

                                    <div class="validation-message">
                                        
                                    </div>
                                    <div class="help-block">
                                         
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group ">
                                    <label class="form-label" for="prodotti">Prodotti</label>
                                    <div>
    <div wire:ignore class="w-full">
                    <div id="prodotti-btn-container" class="mb-3">
                <button type="button" class="btn btn-info btn-sm select-all-button">Seleziona tutto</button>
                <button type="button" class="btn btn-info btn-sm deselect-all-button">Deseleziona tutto</button>
            </div>
                <select class="select2 form-control" data-placeholder="Select your option" class="form-control" id="prodotti" name="prodotti" wire:model="prodotti" multiple="multiple">
                                        <option value="1">Acediur</option>
                            <option value="2">Bisolvon</option>
                            <option value="3">Cardioaspirina</option>
                    </select>
    </div>
</div>

                                    <div class="validation-message">
                                        
                                    </div>
                                    <div class="help-block">
                                         
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="form-group">
                            <label for="">Description</label>
                            <textarea class="form-control" cols="2" rows="2" wire:model="description"></textarea>
                            <span class="text-danger"></span>
                        </div>
                    </div>
                </div>
            </div>
        
        

                

        
        
        
        <div class="action-buttons d-flex justify-content-between bg-white pt-2 pb-2">

                            <div></div>
            
            
                            <button type="button" class="btn btn-md btn-success" wire:click="increaseStep()">Next</button>
            
            

        </div>

    </form>

</div>

<!-- Livewire Component wire-end:FwZQBSk0vKOUXsLR3jIh -->        </div>
    </div>
</div>

                <footer class="block py-4">
    <div class="container mx-auto px-4">
        <hr class="mb-4 border-b-1 border-blueGray-200">
        <div class="flex flex-wrap items-center md:justify-between justify-center">
            <div class="w-full md:w-4/12 px-4">
                <div class="text-sm text-blueGray-500 font-semibold py-1 text-center md:text-left">
                    <div class="hidden">
                        Copyright © <span id="get-current-year">2023</span>
                    </div>
                    Theme <a href="https://www.creative-tim.com/product/notus-js" class="text-blueGray-500 hover:text-blueGray-700 text-sm font-semibold py-1" target="_blank">NotusJS</a> by
                    <a href="https://www.creative-tim.com" class="text-blueGray-500 hover:text-blueGray-700 text-sm font-semibold py-1" target="_blank">
                        Creative Tim
                    </a>
                </div>
            </div>
            <div class="w-full md:w-8/12 px-4">
                <ul class="flex flex-wrap list-none md:justify-end justify-center hidden">
                    <li>
                        <a href="https://www.creative-tim.com?ref=njs-settings" class="text-blueGray-600 hover:text-blueGray-800 text-sm font-semibold block py-1 px-3">
                            Creative Tim
                        </a>
                    </li>
                    <li>
                        <a href="https://www.creative-tim.com/presentation?ref=njs-settings" class="text-blueGray-600 hover:text-blueGray-800 text-sm font-semibold block py-1 px-3">
                            About Us
                        </a>
                    </li>
                    <li>
                        <a href="http://blog.creative-tim.com?ref=njs-settings" class="text-blueGray-600 hover:text-blueGray-800 text-sm font-semibold block py-1 px-3">
                            Blog
                        </a>
                    </li>
                    <li>
                        <a href="https://github.com/creativetimofficial/notus-js/blob/main/LICENSE.md?ref=njs-settings" class="text-blueGray-600 hover:text-blueGray-800 text-sm font-semibold block py-1 px-3">
                            MIT License
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</footer>            </div>
        </div>

    </div>

    <form id="logoutform" action="http://farma.raf/logout" method="POST" style="display: none;">
        <input type="hidden" name="_token" value="LiGD9aaMhsaTAMbE2HLPKJxze6dHcqHyVEYphnce">
    </form>
    <script type="text/javascript" src="http://farma.raf/js/app.js"></script>
    <script src="https://unpkg.com/@popperjs/core@2/dist/umd/popper.js"></script>
    <!-- Livewire Scripts -->

Laravel Livewire多功能表格保存数据

1条答案

相关问题

热门标签

最新问答