vue多条件查询

<template>
  <div class="app-container">
    <div class="filter-container" style="display:flex;justify-content:space-between;align-items:center">
      <div>
        <span>部门:span>
        <el-select v-model="search.bumen" placeholder="请选择" >
          <el-option
            v-for="(item,index) in groupname"
            :key="index"
            :label="item"
            :value="item"
          />
        el-select>
        <span>类型：span>
        <el-select v-model="search.leixin"  placeholder="请选择">
          <el-option
            v-for="item in typeSearchOption"
            :key="item.key"
            :label="item.display_name"
            :value="item.key"
          />
        el-select>
        <span>时间：span>
        <el-date-picker
          v-model="search.time"
          type="datetimerange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          align="right"
          @change="dateChange"
        />
        <el-button @click="searchData">搜索el-button>
      div>
      
      <el-input
        v-model="search.value"
        placeholder="全局搜索"
        style="width:300px;margin-left:18px;margin-top:7px"
        class="filter-item"
        @keyup.native="searchData"
      />
    div>
    <el-table
      :data="list"
      border
      fit
      highlight-current-row
      :style="{
        height:height + ";px";}"
      :max-height="height-220"
      style="width: 100%;"
    >
      <el-table-column
        label="序号"
        prop="id"
        align="center"
        width="50"
      >
        <template slot-scope="scope">
          {
    { scope.$index+1 + (listQuery._page-1)*listQuery._page_size }}
        template>
      el-table-column>
      <el-table-column
        v-for="item in tableHeader"
        :key="item.key"
        :label="item.label"
        :min-width="item.width"
        align="center"
        show-overflow-tooltip
      >
        <template slot-scope="scope">
          <span v-if="scope.row.ts">{
    { scope.row.ts | parseTime }}span>  
          <span v-else>{
    { scope.row[item.key] }}span>
        template>
      el-table-column>
      <el-table-column
        label="详情"
        align="center"
        show-overflow-tooltip
      >
        <template slot-scope="scope">
          {
    { scope.row.data.detail }}
        template>
      el-table-column>
    el-table>
    
    <div class="pagination-container">
      <el-pagination
        background
        :current-page="listQuery._page"
        :page-sizes="[15,30,50]"
        :page-size="listQuery.size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    div>
  div>
template>

<script>
// 这里import的是数据   后面的路径是自己存放文件夹的路径  前面的fetchlist等是接口名
import {
      fetchList, fetchTotal } from '@/api/openLock/index'
import waves from '@/directive/waves' // waves directive
import {
      parseTime } from '@/utils'

export default {
     
  name: 'ComplexTable',
  directives: {
      waves },
  components: {
     },
  filters: {
     },
  data() {
     
    return {
     
      tableKey: 0,
      list: null,
      total: 0,
      listLoading: true,
      listQuery: {
     
        _page: 1,  // 从第一页开始
        _page_size: 15 // 表格中每页条数
      },
      groupname: [],  // 部门下拉选择内容（接口获得数据进行二次处理）
      tableHeader: [
      // label:表头  key: 对应字段名
      	{
      label: '发生时间', key: 'ts', width: '200px'},
        {
      label: '部门', key: 'groupname'},
        {
      label: '地点', key: 'placename' },
        {
      label: '类型', key: 'kind' }
      ],
      // 类型下拉选择内容
      typeSearchOption: [
        {
      key: 'A', display_name: 'a' },
        {
      key: 'B', display_name: 'b' },
        {
      key: 'C', display_name: 'c' },
        {
      key: 'D', display_name: 'd' }
      ],
      // 绑定搜索数据
      search: {
     
        bumen: null,
        leixin: null,
        value: null,
        key: null,
        time: '',
        startTime: ''
      },
      height: null
    }
  },
  created() {
     
    this.height = document.documentElement.clientHeight // 获取页面高度
    this.getList() // 进入页面就调用函数获取数据
  },
  methods: {
     
    getList() {
     
      // 获取表格数据
      fetchList(this.listQuery).then(res => {
     
        this.list = res
      })
      // 获取分页
      fetchTotal(this.listQuery).then(response => {
     
        this.total = response[0].count
      })
    },
    // 时间确认触发
    dateChange(val) {
     
      this.search.startTime = val
    },
    handleFilter() {
     
      this.listQuery._page = 1
      this.getList()
    },
    // 每页条数改变时触发
    handleSizeChange(val) {
     
      this.listQuery._page_size = val
      this.getList()
    },
    // 当前页数改变时触发
    handleCurrentChange(val) {
     
      this.listQuery._page = val
      this.getList()
    },
    // 搜索函数
    searchData() {
     
      this.listQuery._page = 1
      delete this.listQuery.kind // 类型
      delete this.listQuery.groupname // 部门
      delete this.listQuery.ts  // 时间
      delete this.listQuery['search_column']
      // 只要填写了全局搜索，则清空前面的listQuery，只传listQuery.value查询
      if (this.search.value !== null && this.search.value !== '') {
     
      	// search_column:每条拼接数据的字段
        this.listQuery['search_column'] = '$like.%' + this.search.value + '%'
      } else {
     
        // 如果全局搜索为填写再进入其他echarts选择
        // 部门已选择
        if (this.search.bumen !== null && this.search.bumen !== '') {
     
          this.listQuery.groupname = this.search.key1
        }
        // 类型也选择
        if (this.search.leixin !== null && this.search.leixin !== '') {
     
          this.listQuery.kind = this.search.leixin
        }
        // 时间也选择
        if (this.search.time !== null && this.search.time !== '') {
     
          this.listQuery.ts = this.search.time
        }
      }
      this.getList()
    }
  }
}
</script>
</script>