elementui 搜索统计列表页

• 列表
• 点击设置时间区间
• 多条件搜索（下拉列表，输入框，时间区间）
• 清空搜索条件
• 分页
• 左侧树搜索条件
• 树默认选中第一个

<template>
  <el-row style="padding: 0 !important">
    <el-col :span="5">
      <dtLine @line-click="lineClick" :deptTree="tree"></dtLine>
    </el-col>
    <el-col :span="19">
      <basic-container>
        <el-row class="dt-search">
          <el-col :span="24">
            <el-button
              size="small"
              class="width-but"
              :class="{ current: timeTab === 1 }"
              @click="setTime(1)"
              >今天</el-button
            >
            <el-button
              size="small"
              class="width-but"
              :class="{ current: timeTab === 2 }"
              @click="setTime(2)"
              >昨天</el-button
            >
            <el-button
              size="small"
              class="width-but"
              :class="{ current: timeTab === 3 }"
              @click="setTime(3)"
              >最近7天</el-button
            >
            <el-button
              size="small"
              class="width-but"
              :class="{ current: timeTab === 4 }"
              @click="setTime(4)"
              >最近15天</el-button
            >
            <el-button
              size="small"
              class="width-but"
              :class="{ current: timeTab === 5 }"
              @click="setTime(5)"
              >最近30天</el-button
            >
            <el-date-picker
              size="small"
              style="margin-left: 10px"
              v-model="time"
              type="daterange"
              @change="timeTab = 0"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            >
            </el-date-picker>
          </el-col>
          <el-col :span="24">
            <el-select
              v-model="postId"
              placeholder="请选择所属单位"
              class="search-post"
            >
              <el-option
                v-for="item in affiliatedUnitsay"
                :key="item.id"
                :label="item.postName"
                :value="item.id"
              >
              </el-option>
            </el-select>
            <el-input
              size="small"
              style="margin-left: 10px; width: 200px"
              v-model="keyword"
              placeholder="请输入姓名"
            ></el-input>
            <el-button
              size="small"
              style="margin-left: 10px"
              type="primary"
              icon="el-icon-search"
              @click="getList"
              >查询</el-button
            >
            <el-button size="small" icon="el-icon-delete" @click="searchReset"
              >清空</el-button
            >
          </el-col>
        </el-row>

        <el-table
          v-loading="loading"
          size="small"
          height="calc(100vh - 319px)"
          :data="data"
          style="width: 100%"
          border
          :header-cell-style="{
            background: '#fafafa',
            color: 'rgba(0,0,0,.85)',
            fontSize: '12px',
          }"
        >
          <el-table-column type="index" label="#" align="center">
          </el-table-column>
          <el-table-column prop="atteTime" label="日期"> </el-table-column>
          <el-table-column prop="userName" label="姓名"> </el-table-column>
          <el-table-column prop="typeName" label="人员分类"> </el-table-column>
          <el-table-column prop="department" label="所属单位">
          </el-table-column>
          <el-table-column prop="firstTime" label="首次识别时间">
          </el-table-column>
          <el-table-column prop="lastTime" label="最后识别时间">
          </el-table-column>
        </el-table>
        <div class="dt-page-box">
          <el-pagination
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="page.currentPage"
            :page-sizes="[10, 20, 30, 40, 50, 100]"
            :page-size="page.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="page.total"
          >
          </el-pagination>
        </div>
      </basic-container>
    </el-col>
  </el-row>
</template>

<script>
import dtLine from "@/components/dt-line/main";
import { dayList, deptTree, postArray } from "@/api/attendance/record";
export default {
  name: "attendanceDay",
  data() {
    return {
      page: {
        pageSize: 10,
        currentPage: 1,
        total: 0,
      },
      time: "",
      timeTab: 0,
      tree: [],
      deptId: "",
      affiliatedUnitsay: [],
      keyword: "",
      data: [],
      query: {},
      postId: "",
    };
  },
  components: {
    dtLine,
  },
  beforeRouteEnter(to, from, next) {
    deptTree().then((res) => {
      let tree = res.data.data;
      const data = res.data.data;
      let firstDeptId = "";
      function loop(data) {
        data = data[0];
        if (data.hasChildren == true) {
          loop(data.children);
        } else {
          firstDeptId = data.id;
        }
      }
      loop(data);
      localStorage.setItem("deptId", firstDeptId);
      next((vm) => {
        vm.tree = tree;
      });
    });
  },
  watch: {
    timeTab(newVal) {
      const _startT = new Date();
      const _endT = new Date();
      switch (newVal) {
        case 1:
          break;
        case 2:
          _endT.setTime(_startT.getTime() - 3600 * 1000 * 24);
          _startT.setTime(_startT.getTime() - 3600 * 1000 * 24);
          break;
        case 3:
          _startT.setTime(_startT.getTime() - 3600 * 1000 * 24 * 7);
          break;
        case 4:
          _startT.setTime(_startT.getTime() - 3600 * 1000 * 24 * 15);
          break;
        case 5:
          _startT.setTime(_startT.getTime() - 3600 * 1000 * 24 * 30);
          break;
      }
      if (newVal !== 0) {
        this.time = [_startT, _endT];
      }
    },
  },
  created() {
    this.getList();
    this.postArray();
  },

  methods: {
    postArray() {
      const that = this;
      postArray().then((res) => {
        that.affiliatedUnitsay = res.data.data.records;
      });
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },
    searchReset() {
      this.query = {};
      this.time = "";
      this.timeTab = 0;
      this.getList();
    },
    lineClick(data) {
      this.deptId = data.id;
      this.page.currentPage = 1;
      this.getList();
    },
    setTime(num) {
      this.timeTab = num;
    },
    getList(params = {}) {
      if (this.deptId == "") {
        this.deptId = localStorage.getItem("deptId");
      }
      this.query.deptId = this.deptId;
      this.query.timeFrom = this.time[0];
      this.query.timeTo = this.time[1];
      this.query.keyword = this.keyword;
      this.query.postId = this.postId;
      this.loading = true;
      dayList(
        this.page.currentPage,
        this.page.pageSize,
        Object.assign(params, this.query)
      ).then((res) => {
        const data = res.data.data;
        this.page.total = data.total;
        this.data = data.records;
        this.loading = false;
      });
    },
  },
};
</script>

<style scoped>
.search {
}
</style>

子组件

<template>
  <div class="dt-line">
    <el-scrollbar>
      <basic-container>
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>地铁线路</span>
          </div>
          <el-tree
            :data="deptTree"
            :props="defaultProps"
            node-key="id"
            :current-node-key="defaultId"
            default-expand-all="true"
            highlight-current
            @node-click="handleNodeClick"
          ></el-tree>
        </el-card>
      </basic-container>
    </el-scrollbar>
  </div>
</template>

<script>
export default {
  name: "dtLine",
  data() {
    return {
      data: [],
      defaultProps: {
        children: "children",
        label: "title",
      },
      defaultId: "",
    };
  },
  props: {
    deptTree: {
      type: Array,
      default() {
        return [];
      },
    },
  },
  created() {
    this.defaultId = localStorage.getItem("deptId");
  },
  methods: {
    handleNodeClick(data) {
      this.$emit("line-click", data);
    },
  },
};
</script>

<style scoped>
.dt-line {
  height: 800px;
}
.dt-line .el-scrollbar__wrap {
  overflow: scroll;
}

.dt-line .box-card /deep/ .el-card__body {
  padding: 0 !important;
  margin-top: 15px;
}

.dt-line
  .el-tree--highlight-current
  .el-tree-node.is-current
  > .el-tree-node__content {
  color: #4d95fd;
  font-weight: bold;
}
</style>