如何在laravel和vue js中过滤2个或更多条件

Question

filterByProject 正在工作，但我想添加更多过滤器，即 供应商名称。当我按项目过滤它时，我想要结果 供应商名称它显示两次过滤的过滤结果

  <div class="col-md-12"> 
       <div class="row ml-1"> 
            <span style="color:#424242;font-size:15px; margin-right:5px;">Project:</span>
             <select class="form-control form-control-sm" style="padding:0;
            margin-bottom:5px; height:25px; width:120px;" v-model="filterByProject" 
       @change="filterproject">
               <option>ABC</option>
                </select>
          
         // Supplier name
      <select class="form-control form-control-sm" style="padding:0;
            margin-bottom:5px; height:25px; width:120px;"
               <option>Steel Inc</option>
               <option>L Inc</option>
                </select>

                </div>     
            <div class="card card-primary">
              <div class="card-header"  style="padding-bottom:0px;">
                <h3 class="card-title">Item list&nbsp<span class="fas fa-bookmark"></span>                
                </h3>
              </div>
              <!-- /.card-header -->
              <div class="card-body table-responsive p-0">
                <table class="table table-hover table-bordered table-sm" >
                  <thead>
                    <tr>
                      <th scope="col">#</th>
                      <th scope="col">PO DATE</th>
                      <th scope="col">ITM</th>
                      <th scope="col">PRJ</th>
                      <th scope="col">SUPPLIER</th>
                
                    </tr>
                  </thead>
                  <tbody>
                    <tr v-for="(fetch,count) in item">
                    <td style="height:10px">{{count+1}}</td>
                    <td style="height:10px">{{fetch.po_date}}</td>
                    <td style="height:10px">{{fetch.project}}</td>
                    <td style="height:10px">{{fetch.supplier}}</td>

                    </tr>
                  </tbody>                
                </table>
              </div>
              <!-- /.card-body --> 
                  <div class="card-footer">       
            </div>
            </div>
            <!-- /.card -->
          </div>

我的控制器

公共函数搜索(){

    if($search = \Request::get('q')){


     $data = DB::table('po_items')->where('po_details.project_code', 'LIKE', "%$search%")
 
    ->leftjoin('po_details','po_items.po_id','=','po_details.po_id')
    ->leftjoin('project_info','po_details.project_code','=','project_info.project_code')
    ->leftjoin('master_supplier','po_details.supplier_code','=','master_supplier.supplier_code')
    ->select('po_items.*','po_details.*','po_details.created_at as po_date','project_info.project_name','master_supplier.supplier_name')
    ->get();
    return $data;

    }else{

        $data = DB::table('po_items')
        ->leftjoin('po_details','po_items.po_id','=','po_details.po_id')
        ->leftjoin('project_info','po_details.project_code','=','project_info.project_code')
        ->leftjoin('master_supplier','po_details.supplier_code','=','master_supplier.supplier_code')
        ->select('po_items.*','po_details.*','po_details.created_at as po_date','project_info.project_name','master_supplier.supplier_name')
        ->get();    
        return $data;

    }

}

Answer 1

它使用模型表 应用程序/模型 laravel 8.x 中的 PayrollOfficeDeail.php

use Illuminate\Database\Eloquent\Model
class payroll_office_detail extends Model{
   public scopeSearch(Builder $query,$fieldName,$fieldVal){
        return $query->where($fieldName,'=',$fieldVal);
   }
}

在控制器文件中添加

public function search(Request $request){
$searchFieldName=$request->get('field');
$payroll_office_detail=payroll_office_detail::query();
$payroll_office_detail
   ->leftJoin()
//   -> ....


$payroll_office_detail->search($searchFieldName,'%'.$request->get('q').'%');

return $payroll_office_detail->get();
}

Answer 2

我正在将此代码用于多个搜索过滤器组合，请看一下，希望它对您有所帮助。我尽量分享。

 public function customUserSearchv2(Request $request) {
        try {
            $the = new Profile();
            $the = $the->newQuery();

            $the->leftJoin('tbl1', 'tbl1.id', '=', 'profile.id');

            if ($request->has('thrapyType') && !empty($request->thrapyType)) {
                $the->where('profile.services', 'LIKE', '%' . $request->thrapyType . '%');
            }

            if ($request->has('the_name') && !empty($request->the_name)) {

                $full_name = explode(" ", $request->the_name);

                $f_name = $full_name[0];
                $the->where('profile.first_name', 'LIKE', '%' . $f_name . '%');
                if (count($full_name) > 1) {
                    $l_name = $full_name[1];
                    if (!empty($l_name)) {
                        $the->orWhere('profile.last_name', 'LIKE', '%' . $l_name . '%');
                    }
                }
            }
            if ($request->has('zipcode') && !empty($request->zipcode)) {
                $the->where('profile.office_address_zip', 'LIKE', '%' . $request->zipcode);
                //$the->orWhere('profile.secondary_address_zip', 'LIKE', '%' .$request->zipcode);
            }
            
            $result = $the->select('profile.*', 'tbl1.name', 'tbl1.email',)->orderBy('profile.id', 'DESC')
                    ->get();

            return apiSuccessHandler($result, 200, "SUCCESS", $request, 'Search completed successfully.');
        } catch (\Exception $e) {
            return apiErrorHandler(500, "INTERNAl SERVER ERROR", $e->getMessage() . ':' . "Server Error Please try after sometime.", $request);
        }
    }

Vue JS

<template>
                <label>User Name</label>
                <input type="text" @keyup="list($event)" name="tname" v-model="tname"/>
                
                
                <label>Provider</label>
                <select @change="list($event)" name="provider_type" v-model="provider">
                  <option value selected>Select Provider</option>
                  <option v-for="(ins,index) in provider_type.data" :key="index" :value="ins.provider_name">
                    {{ins.provider_name}}
                  </option>
                </select>

         <div class="th-fimg" v-for="(therapist,index) in filterList.data" :key="index"></div>  
</template>

    <script>
    export default{
    data(){
    return{
      filtered_data: [],
    }
    }
    methods:{
          list(e) {
            let name = "";
              name = this.tname;
              provider = this.provider
            this.$axios
              .get("user/search/v2", {
                headers: apiConst._header,
                params: {
                  name:name,
                  provider: provider
                }
              })
              .then(rec => {
                if (rec.data.data.length <= 0) {
                  this.message = true;
                } else {
                  this.message = false;
                }
                this.filtered_data = rec.data;
              })
              .catch(err => {
                console.log("Filter Error : 207");
              });
          }
    }, computed: {
          filterList() {
            return this.filtered_data;
          }
        }
    }
    </script>