wuhui_zzw
/
wyyl
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

admin 筛选 component

This commit is contained in:
Sam Chen 2022-03-18 18:35:28 +08:00
parent 834334efdb
commit 2e6dc556b0
4 changed files with 74 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
app/View/Components/Filter.php Normal file
View File

@ -0,0 +1,32 @@
<?php
namespace App\View\Components;
use Illuminate\View\Component;
class Filter extends Component
{
public string $url;
public array $queries;
/**
* Create a new component instance.
*
* @return void
*/
public function __construct(string $url)
{
$this->url = $url;
$this->queries = request()->query() ?? [];
}
/**
* Get the view / contents that represent the component.
*
* @return \Illuminate\Contracts\View\View|\Closure|string
*/
public function render()
{
return view('components.filter');
}
}

14
resources/views/admin/layouts/master.blade.php
View File

@ -1,15 +1,15 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
@stack('header')
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.14/vue.js"></script>
@stack('header')
</head>
<body>
@yield('content')
@yield('content')
</body>
@stack('footer')

4
resources/views/admin/pages/products/index.blade.php
View File

@ -2,6 +2,9 @@
@section('content')
<a href="{{ route('admin.products.create') }}">Create</a>
<x-filter :url="route('admin.products.index')" />
<table>
@foreach ($products as $product)
<tr>
@ -15,3 +18,4 @@
@endforeach
</table>
@endsection

31
resources/views/components/filter.blade.php Normal file
View File

@ -0,0 +1,31 @@
<div id="filter-app">
<input type="text" v-model="keyword">
<button type="button" @click="search">筛选</button>
</div>
@push('footer')
<script>
new Vue({
el: '#filter-app',
data: {
keyword: ''
},
methods: {
search() {
let queries = @json($queries);
let url = @json($url);
if (this.keyword != '') {
queries['keyword'] = this.keyword;
}
if (Object.keys(queries).length) {
url = url + '?' + new URLSearchParams(queries).toString();
}
window.location = url;
}
}
});
</script>
@endpush