[fastadmin]第十一篇 fastadmin 搜索框带默认值传参(又是找不到的教程)

需求

点击匹配详情,搜索条件 显式 展示

解决方案

search:false, 关注上面的搜索框框 用于实现 匹配详情中,带出来的默认搜索条件

然后在自定义搜索tpl 中,把默认搜索条件 通过assign 展示出来. 需要加一个判断
js中 queryparams 需要写,请求前的,js 参数处理

逻辑

把顶部搜索给关了
search:false

写一个自定义搜索

在自定义搜索的tpl 中,可以把query 的参数assign 到模板.

在tpl中判断 非空就展示即可

实现代码

第一步,rows上的按钮,主要是 url 这里,我们是打开了这个 路由. 借助于mvc ,我们需要写对应的php 与 tpl(就是view)

// 匹配按钮
buttons: [
    {
        name: 'match_detail',
  text: __('匹配详情'),
  title: __('匹配详情'),
  classname: 'btn btn-xs btn-primary btn-dialog',
  // classname: 'btn btn-xs btn-primary btn-addtabs',

 // classname: 'btn btn-xs btn-primary btn-log',  icon: 'fal fa-equals',
  // 定义按钮传参地方
  url: 'medicine/match/match_detail?medicine_match_id={row.id}&medicine_name={row.medicine_name}',
  callback: function (data) {
            Layer.alert("接收到回传数据：" + JSON.stringify(data), {title: "回传数据"});
  },
  visible: function (row) {
            //返回true时按钮显示,返回false隐藏
  // 匹配 做判断
  if ( row.gjpz_id == 0 && row.tgyjpz_id == 0 ) {
                return true;
  }else {
                return false;
  }
        }
    },

],

php函数代码

  // 匹配的弹框
  public function match_detail()
 {  // 如果是ajax 则进行一个查询 不是，就直接返回模板

  //当前是否为关联查询
  $this->relationSearch = true;
  //设置过滤方法
  $this->request->filter(['strip_tags', 'trim']);
 if ($this->request->isAjax()) {
  $medicine_match_id = input("id");

  $search = input("search");
 if (empty($search)) {
  return json(['code' => 0, 'msg' => '请输入搜索内容']);
  }

  list($where, $sort, $order, $offset, $limit) = $this->buildparams();
  $type = 2;
  $list = $this->ypgjpzModel
//                ->with(['admin'])
  ->where('yptym', 'LIKE', '%' . $search . '%')
 ->paginate($limit);
  //打印sql
//            echo ypgjpzModel::getLastSql();

  if (count($list) == 0) {
  $list = $this->yptgyjpzModel
//                    ->with(['admin'])
  ->where('yptym', 'LIKE', '%' . $search . '%')
 ->paginate($limit);
  $type = 3;
  }

  foreach ($list as $row) {
  // 前台传参用 确认匹配按钮
  $row->type = $type;
  $row->medicine_match_id = $medicine_match_id;
  $row->visible(['id', 'yptym', 'gg', 'dw', 'scqy', 'zbj', 'zc', 'tbdm', 'fbrq', 'verify','type','medicine_match_id']);
  }

  $result = array("total" => $list->total(), "type" => $type, "rows" => $list->items());
 return json($result);
  }

  // 解决，点击匹配，没有第一层id问题
  // 第一层参数，传递到第二层的，class 中赋值
  // 在对应的js 中,给默认的名字 赋值

  $medicine_match_id = input("medicine_match_id");
  $this->view->assign('medicine_match_id', $medicine_match_id);
  $medicine_name = input("medicine_name");
  $this->view->assign('medicine_name', $medicine_name);
 return $this->view->fetch();
  }

自定义表单的视图. 这里因为上面方法 已经assign 了 变量.我们直接赋值与展示

<div class="panel panel-default panel-intro">
    {:build_heading()}

    <div class="panel-body">
        <div id="history" class="tab-content">
            <div class="tab-pane fade active in" id="one">
                <div class="widget-body no-padding">
                    <table id="match_detail_table" medicine_match_id = '{$medicine_match_id}' medicine_name = '{$medicine_name}'  class="match_detail_table table-striped table-bordered table-hover table-nowrap"
                           width="100%">
                    </table>
                </div>
            </div>

        </div>
    </div>
</div>
<script src="/static/diyjs/watermark-w.js"></script>


<script id="match_detail_form_tpl" type="text/html">
    <!--form表单必须添加form-commsearch这个类-->
    <form action="" class="form-commonsearch">
        <div style="border-radius:2px;margin-bottom:10px;background:#f5f5f5;padding:15px 20px;">
            <h4>自定义搜索表单</h4>
            <hr>
            <div class="row">
                <div class="col-xs-12 col-sm-6 col-md-4">
                    <div class="form-group">
                        <label class="control-label">条件</label>
                        <!--隐式的operate操作符，必须携带一个class为operate隐藏的文本框,且它的data-name="字段",值为操作符-->
                        <input class="operate" type="hidden" data-name="medicine_name" value="LIKE"/>
                        <div>
<!--                               // 后台需要处理接受的参数. 后台也要改0803-->
                                <input class="form-control export_yptym" type="text" name="medicine_name" placeholder="药品通用名" value="{$medicine_name}"/>
                        </div>
                    </div>
                </div>

                <div class="col-xs-12 col-sm-6 col-md-4">
                    <div class="form-group">
                        <label class="control-label"></label>
                        <div class="row">
                            <div class="col-xs-6">
                                <input type="submit" class="btn btn-success btn-block" value="提交"/>
                            </div>
                            <div class="col-xs-6">
                                <input type="reset" class="btn btn-primary btn-block" value="重置"/>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </form>
</script>

这个界面对应的js,初始化table. 还包括了, 我对于传参的特殊处理.
因为我要求一些特殊值.

// 一个按钮 对应js处理。 fastadmin 中 html 不可写js
        match_detail: function () {
            // 初始化表格参数配置
            Table.api.init({
                extend: {
                    // index_url: 'medicine/match/match_detail' + location.search,
                    index_url: 'medicine/match/match_detail' +Fast.api.query('id'),
                    table: 'match_detail_table',
                }
            });


            // jqery 查询指定input 修改默认值 此处修改jq 失败.里面 是fastadmn 分帧 0803
            // $(document).ready(function() {
            //     // 获取输入框元素
            //     var inputElement = $(".pull-right").find("input[placeholder='搜索']");
            //     console.log(inputElement);
            //     // todo 可以查询到值,  代码还要改一下
            //     // 改变输入框的值
            //     inputElement.attr("placeholder","请输入药品名称");
            // });
            // //通过此方式引入jquery才能使用$，接下来正常写jquery代码就好


            // 表格
            var table = $("#match_detail_table");
            // 初始化表格  POST 使用例子 2023-06-14

            // 这部分功能是 授课锚点
            // 自定义搜索,切换界面带默认值. 处理自定义搜索model冲突. 0804
            table.bootstrapTable({
                // table 中进行查询的url
                url: "medicine/match/match_detail",
                method: 'post',
                // 参数需要注释掉.因为这边已经改了自定义搜索  0803
                // 自定义搜索需要从这里过滤数据
                queryParams: function(params){
                    // console.log(6666666666);

                    /*/ var filter = JSON.parse(params.filter);
                    // var op = JSON.parse(params.search);
                    // console.log(filter);console.log(op);
                    // params.filter = JSON.stringify(filter);
                    // params.op = JSON.stringify(op);
                    // 这里出现问题： 无法获得id。 因为id 是row 上的 已经解决
                    通过html 中取
                    **/

                    // begin by bob 2023-08-04 解决自定义搜索表单 传参 问题. 这里直接js 处理
                    // js 过滤自定义搜索数据.
                    var filter = JSON.parse(params.filter);
                    console.log(filter["medicine_name"]); // 这里是搜索的值
                    // 如果搜索输入值 有,就用搜索的
                    if (filter["medicine_name"] != undefined && filter["medicine_name"] != '') {
                        params.search = filter["medicine_name"];
                    }
                    // end by bob 2023-08-04 解决自定义搜索表单 传参 问题. 这里直接js 处理

                    // console.log($("#match_detail_table").attr('medicine_match_id'));
                    params.medicine_match_id = $("#match_detail_table").attr('medicine_match_id');
                    // console.log($("#match_detail_table").val('medicine_match_id'));
                    if (params.search == undefined || params.search == '') {
                        params.search = $("#match_detail_table").attr('medicine_name');
                    }

                    return params;
                },
                pk: 'id',
                sortName: 'id',
                fixedColumns: true,
                fixedRightNumber: 1,
                // 自定义搜索
                searchFormTemplate: 'match_detail_form_tpl',
                searchFormVisible: true, // 默认显示搜索框
                search:false, // 关 上面的搜索框框 用于实现 匹配详情中,带出来的默认搜索条件 在form 中再使用表单. 0802
                columns: [
                    [
                        {checkbox: true},
                        {field: 'id', title: __('Id')},
                        {field: 'yptym', title: __('Yptym'), operate: 'LIKE'},
                        {field: 'gg', title: __('Gg'), operate: 'LIKE'},
                        {field: 'dw', title: __('Dw'), operate: 'LIKE'},
                        {field: 'scqy', title: __('Scqy'), operate: 'LIKE'},
                        {field: 'zbj', title: __('Zbj'), operate:'BETWEEN'},
                        {field: 'zc', title: __('Zc'), operate:'BETWEEN'},
                        {field: 'tbdm', title: __('Tbdm')},
                        // {field: 'pzlxr', title: __('Pzlxr'), operate: 'LIKE'},
                        // {field: 'xldh', title: __('Xldh'), operate: 'LIKE'},
                        {field: 'fbrq', title: __('Fbrq')},
                        // {field: 'xxztswitch', title: __('Xxztswitch'), searchList: {"0":__('Xxztswitch 0'),"1":__('Xxztswitch 1'),"2":__('Xxztswitch 2')}, table: table, formatter: Table.api.formatter.toggle},
                        {
                            field: 'verify',
                            title: '审核状态',
                            operate: false,
                            formatter: Controller.api.formatter.verifyType
                        },
                        {
                            field: 'operate', title: __('Operate'),
                            table: table,
                            events: Table.api.events.operate,
                            formatter: Table.api.formatter.operate,
                        },
                        {
                            field: 'operate',
                            title: __('Operate'),
                            table: table,
                            events: Table.api.events.operate,
                            formatter: Table.api.formatter.operate,
                            // 确认匹配按钮
                            buttons: [
                                // {
                                //     name: 'confirm_match',
                                //     text: __('确认匹配'),
                                //     title: __('确认匹配'),
                                //     classname: 'btn btn-xs btn-primary btn-dialog',
                                //     // classname: 'btn btn-xs btn-primary btn-log',
                                //     icon: 'fal fa-check',
                                //     // 定义按钮传参地方 这里无法取到 medicine_match_id 因为一开始的打开没有传入这个值
                                //
                                //     url: 'medicine/match/confirm_match?id={row.id}&type={row.type}&medicine_match_id='+$("#match_detail_table").attr('medicine_match_id'),
                                //
                                //     callback: function (data) {
                                //         // Layer.alert("接收到回传数据：" + JSON.stringify(data), {title: "回传数据"});
                                //         Layer.alert("处理完成：" + JSON.stringify(data), {title: "响应数据"});
                                //     },
                                //     visible: function (row) {
                                //         //返回true时按钮显示,返回false隐藏
                                //         return true;
                                //     }
                                // },
                                // 确认匹配
                                {
                                    name: 'confirm_match',
                                    text: __('确认匹配'),
                                    title: __('确认匹配'),
                                    classname: 'btn btn-xs btn-success btn-magic btn-ajax',
                                    // classname: 'btn btn-xs btn-info btn-addtabs',
                                    icon: 'fa fa fa-check',
                                    // url:function (data) {
                                    //     return Fast.api.fixurl( "medicine/purchase/form/getListByOrderId?order_id=" + data.id);
                                    // },
                                    url: 'medicine/match/confirm_match?id={row.id}&type={row.type}&medicine_match_id='+$("#match_detail_table").attr('medicine_match_id'),
                                    extend: 'data-toggle="tooltip"',
                                    confirm:"是否生成匹配?",
                                    //
                                    // disable:function (row) {
                                    //     if ( row.status == 3 ) {
                                    //         return true;
                                    //     }else if ( row.status == 4 ) {
                                    //         return true;
                                    //     }else {
                                    //         return false;
                                    //     }
                                    // },
                                    success: function (data, ret) {
                                        Layer.alert(ret.msg);
                                        Layer.closeAll('loading');
                                        // 刷新表格
                                        table.bootstrapTable('refresh',{});
                                        // Fast.api.refreshtable('table');
                                    },
                                    error: function (data, ret) {
                                        Layer.alert(ret.msg);
                                        Layer.closeAll('loading');
                                        return false;
                                    }
                                },
                            ],

                        }
                    ]
                ]
            });
            // end 历史记录 table
            // 为表格绑定事件
            Table.api.bindevent(table);
            Controller.api.bindevent();

至此结束,演示如图

本作品采用《CC 协议》，转载必须注明作者和本文链接