Não consegui usar Livewire.dispatch( ) dentro do JavaScript [Resolvido]

[Frank K Hosaka]

O Livewire não consegue fazer o serviço de impressão. Quem faz isso é o bom e velho JavaScript. O problema é como o JavaScript vai devolver o comando para o Livewire. Há vários tutoriais na internet, recomendando a usar o Livewire.dispatch("voltar") dentro do JavaScript e um protected $listeners=["voltar"=>"voltar"] dentro do componente, mas isso não deu certo comigo, eu tive que apelar para a velha gambiarra, eu pedi para o JavaScript voltar para o orçamento.

arquivo app > Livewire > Lcontrolid.php
<?php
namespace App\Livewire;
use App\Models\tbpedido;
use Livewire\Attributes\Layout;
use Livewire\Component;

#[Layout('components.layouts.app',['titulo'=>'Imprimir Pedido'])]
class Lcontrolid extends Component {

    public $itens,$modal,$ped;

    function mount($pedido) {
        $this->ped=$pedido;
        $this->itens=tbpedido::where('tbpedido.ped',$pedido)
            ->join('tbhistped','tbpedido.ped','=','tbhistped.ped')
            ->join('tbprod','tbprod.codprod','=','tbhistped.codprod')->get();
        $num_rows=count($this->itens);
        if($num_rows==0) { $this->modal=true; }  
        session(['ocultar'=>true]); 
    }
}

arquivo resources > views > livewire > lcontrolid.blade.php
<div>
    @if($modal)
        Não há nada para imprimir
    @else
        <table>
        <tr class=fw-semibold><td colspan=7>Quitanda do Frank Corporation
        <tr class=fw-semibold><td colspan=7>Pedido {{$itens[0]->ped}} de {{dbr($itens[0]->dia)}}
        @foreach($itens as $item)
          <tr><td colspan=7>{{$item->prod}}
          <tr><td class=text-end>{{$item->qt}}
              <td class=text-end>{{$item->un}}
              <td class=px-2>x<td class=text-end>{{dec($item->unitario)}}
              <td>=<td class=text-end>{{dec($item->subtotal)}}
        @endforeach
        <tr class=fw-semibold><td>Total<td><td><td><td><td class=text-end>{{dec($itens[0]->total)}}
    @endif
    <script>
        window.print()
        window.onafterprint = function() {
            location.replace('/lorcamento/{{$ped}}')
        }
    </script>
</div>

 

Editado Abril 30 por Frank K Hosaka

[Frank K Hosaka]

Encontrei a resposta nessa mensagem: https://github.com/livewire/livewire/pull/8226

Adaptando ao meu código, ficou assim:

 

arquivo app > Livewire > Lcontrolid.php
<?php
namespace App\Livewire;
use App\Models\tbpedido;
use Livewire\Attributes\Layout;
use Livewire\Component;

#[Layout('components.layouts.app',['titulo'=>'Imprimir Pedido'])]
class Lcontrolid extends Component {

    public $itens,$modal,$ped;
    protected $listeners=['voltar'=>'voltar'];

    function mount($pedido) {
        $this->ped=$pedido;
        $this->itens=tbpedido::where('tbpedido.ped',$pedido)
            ->join('tbhistped','tbpedido.ped','=','tbhistped.ped')
            ->join('tbprod','tbprod.codprod','=','tbhistped.codprod')->get();
        $num_rows=count($this->itens);
        if($num_rows==0) { $this->modal=true; }  
        session(['ocultar'=>true]); 
    }

    function voltar() {
        session()->forget('ocultar');
        redirect("/lorcamento/$this->ped");
    }

}

arquivo resources > views > livewire > lcontrolid.blade.php
<div>
    @if($modal)
        Não há nada para imprimir
    @else
        <table>
        <tr class=fw-semibold><td colspan=7>Quitanda do Frank Corporation
        <tr class=fw-semibold><td colspan=7>Pedido {{$itens[0]->ped}} de {{dbr($itens[0]->dia)}}
        @foreach($itens as $item)
          <tr><td colspan=7>{{$item->prod}}
          <tr><td class=text-end>{{$item->qt}}
              <td class=text-end>{{$item->un}}
              <td class=px-2>x<td class=text-end>{{dec($item->unitario)}}
              <td class=px-2>=<td class=text-end>{{dec($item->subtotal)}}
        @endforeach
        <tr class=fw-semibold><td>Total<td><td><td><td><td class=text-end>{{dec($itens[0]->total)}}
    @endif

    @script
    <script>
        window.print()
        window.onafterprint = function() {
            setTimeout(()=>{$wire.$dispatch('voltar')})
            // location.replace('/lorcamento/{{$ped}}')
        }
    </script>
    @endscript
</div>