fastadmin 使用笔记之配置搜索

在使用FastAdmin过程中，不断的叠加分组参数，加到最后自己都忘记了，惨住在哪一个分组里面，所以加了这个搜索用来搜索key 在哪里

下面是增加步骤：

/* css 加在头部style 区域内 */
tbody tr {
    border: none;
}

tbody tr.active {
    border: 2px solid orangered;
}

<!-- html  加在 {:build_heading(null, false)} 之后  --> 
<div class="commonsearch-table">
    <form class="form-horizontal  nice-validator n-default n-bootstrap" novalidate="" method="post" action="">
        <fieldset>
            <div class="row">
                <div class="form-group col-xs-12 col-sm-6 col-md-4 col-lg-3">
                    <label for="key" class="control-label col-xs-4">关键词</label>
                    <div class="col-xs-8">
                        <input type="text" class="form-control" name="key" value="" placeholder="可搜索名称，变量名" id="key" ></div>
                </div>

                <div class="form-group col-xs-12 col-sm-6 col-md-4 col-lg-3">
                    <div class="col-sm-8 col-xs-offset-4">
                        <button type="button" class="btn btn-success btn-search" >提交</button>
                    </div>
                </div>
            </div>
        </fieldset>
    </form>
</div>

js 添加

let layerIndex = 0;
// 搜索配置
$(document).on('click', '.btn-search', function () {
    let key = $(".commonsearch-table [name='key']").val();
    if (!key) {
        Toastr.error('请先输入搜索关键字');
        return;
    }
    Fast.api.ajax({
        url: Fast.api.fixurl('general/config/search'),
        data: {key},
    }, (data, ret) => {
        if (data.length > 1) {
            let title = '配置在多个分组中，请自行选择查看：<br/>';
            data.forEach((item, index) => {
                console.log(item);
                title += '<span class="btn-config" data-group="' + item.group + '" data-key="' + item.key +
                    '" style="color: #0a53be;cursor: pointer;">' + item.title + '</span><br/>';
            })
            layerIndex = Layer.alert(title, {title: '提示'});
        } else {
            switchTab(data[0]);
        }
    })
})

function switchTab(item) {
    let el = $('a[href="#' + item['group'] + '"]')
    el.trigger('click');
    let tr = $('tr[data-index="' + item.key + '"]')
    var i = 0, t = false, o = el.attr("class") + " ", c = "", times = times || 2;
    if (t) return;
    t = setInterval(function () {
        i++;
        c = i % 2 ? o + 'active' : o;
        tr.attr("class", c);
        if (i === 2 * times) {
            clearInterval(t);
            tr.removeClass('active');
        }
    }, 200);
    try {
        layer.close(layerIndex);
    } catch (e) {
    }
}

// 多个配置点击跳转
$(document).on('click', '.btn-config', function () {
    let item = $(this).data();
    switchTab(item);
})

php 方法添加

/**
 * 搜索配置所在分组
 */
public function search()
{
    $key = $this->request->post('key/s', '');
    $where = [
        'name|title' => ['like', '%' . $key . '%'],
    ];
    $groupList = $this->model->where($where)->field('group,name,title')->select();
    $groupList = collection($groupList)->toArray();
    if ($groupList) {
        $dictionary = $this->model->where(['group' => 'dictionary', 'name' => 'configgroup'])->value('value');
        $dictionary = json_decode($dictionary, true);
        $arr = [];
        foreach ($groupList as $group) {
            if (isset($dictionary[$group['group']])) {
                $arr[] = [
                    'group' => $group['group'],
                    'title' => __($group['title']),
                    'key'   => $group['name'],
                ];
            }
        }
        // halt($arr);
        $this->result($arr, 1, '查询成功');
    }
    $this->error('查询失败');
}