bizhub/inertia-query-filter

Laravel + Inertiajs 查询过滤器

1.2.0 2022-10-27 02:48 UTC

This package is auto-updated.

Last update: 2024-09-27 07:05:44 UTC


README

Latest Version on Packagist

安装

composer require bizhub/inertia-query-filter

示例

1. 在 App\QueryFilters 中创建过滤器

<?php

namespace App\QueryFilters;

use Bizhub\QueryFilter\QueryFilter;

class UserFilter extends QueryFilter
{
    public function trashed()
    {
        $this->builder->withTrashed();
    }
    
    public function status($value)
    {
        $this->builder->where('status', $value);
    }
}

2. 将 Filterable 特性添加到模型中

<?php

namespace App\Models;

use Illuminate\Http\Request;
use Bizhub\QueryFilter\Filterable;
use Illuminate\Foundation\Auth\User as Authenticatable;

class User extends Authenticatable
{
    use Filterable;
}

3. 使用过滤器作用域

<?php

namespace App\Http\Controllers;

use App\Models\User;
use Illuminate\Http\Request;
use Inertia\Inertia;

class UserController extends Controller
{
    /**
     * Get list of users
     *
     * @param Request $request
     * @return \Inertia\Response
     */
    public function index(Request $request)
    {
        return Inertia::render('Users/Index', [
            'users' => User::filter()->paginate()
        ]);
    }
}

4. 在页面/组件中使用 $inertia.replace

import throttle from 'lodash/throttle'
import pickBy from 'lodash/pickBy'
import mapValues from 'lodash/mapValues'

export default {
    props: ['users', 'filters'],

    data() {
        return {
            filter: {
                trashed: this.filters.trashed,
                status: this.filters.status
            }
        }
    },

    watch: {
        filter: {
            handler: throttle(function() {
                this.$inertia.replace(
                    route('users', pickBy(this.filter)), {
                        only: ['users'],
                    }
                )
            }, 500),
            deep: true
        }
    },

    methods: {
        clearFilter() {
            this.filter = mapValues(this.filter, () => null)
        }
    }
}