README

Nova 包用于使用 select2 ajax 渲染过滤器。

安装

composer require liking/select2-filter

用法

后端

use Liking\Select2Filter\Select2Filter;

class CustomFilter extends Select2Filter
{
    /**
     * The field used to display as option's label.
     * If not config, use default value is `title`
     *
     * @var string
     */
    public $filterTitle = 'title';

    /**
     * The field used to represent option's value.
     * If not config, use default value is `id`
     * 
     * @var string
     */
    public $filterId = 'id';
    
    /**
     * Name of Nova Resource to search
     * If not config, user current Resource
     *
     * @var string
     */
    public $filterResource = '';
    
    ....

模板

• HTML

<template>
    <div>
        <h3 class="text-sm uppercase tracking-wide text-80 bg-30 p-3">{{ filter.name }}</h3>

        <div class="p-2">
            <select2-filter
                :resource-name="resourceName"
                :filter-key="filter.class"
                @change="handleChange"
            >
            </select2-filter>
        </div>
    </div>
</template>

• 脚本处理事件

methods: {
    handleChange(event) {
        this.$store.commit(`${this.resourceName}/updateFilterState`, {
            filterClass: this.filterKey,
            value: event,
        })
        this.$emit('change')
    },
},

与原始版本的差异：value: event 与 value: event.target.value

这种差异是因为在默认的 nova 过滤器资源中，options 是一个预定义的数组，因此不需要标签来显示在选项中。当使用 Select2 时，我们需要 boot id 和 label 来显示在选项中

后端事件

注意 $value 与默认 Nova 过滤器值不同，$value 是包含 value 和 label 的数组

public function apply(Request $request, $query, $value)
    {
        $searchValue = Arr::get($value, 'value');

        if ($searchValue) {
            $query->where('id', $searchValue);
        }
        return $query;
    }