.

src/views/person/index.vue

@@ -1,5 +1,22 @@
 <template>
   <div class="body" style="font-size:14px">
+    <el-card class="box-card" shadow="never">
+      活动时间：
+      <el-date-picker
+        v-model="daterange"
+        type="daterange"
+        range-separator="至"
+        start-placeholder="开始日期"
+        end-placeholder="结束日期"
+        value-format="yyyy-MM-dd"
+        style="margin-right: 20px"
+        @change="dateChange"
+      />
+      <div style="float:right">
+        <el-button type="primary" @click="onSearch">查询</el-button>
+        <el-button @click="onReset">重置</el-button>
+      </div>
+    </el-card>
     <el-table stripe :data="tableData" border style="width: 100%">
       <el-table-column prop="name" label="中奖人" />
       <el-table-column prop="phone" label="手机号" />
@@ -31,7 +48,10 @@ import { getPersonList } from '@/api/person'
 export default {
   data() {
     return {
+      daterange: undefined,
       tableData: [],
+      endDate: undefined,
+      startDate: undefined,
       pageSize: 10,
       currentPage: 1,
       gameTotal: 0 // 条目总数
@@ -54,6 +74,8 @@ export default {
     // 改变分页组件重新查询数据
     changePagination() {
       getPersonList({
+        startDate: this.startDate,
+        endDate: this.endDate,
         pageNum: this.currentPage,
         pageSize: this.pageSize
       }).then((res) => {
@@ -62,12 +84,27 @@ export default {
     },
     onSearch() {
       getPersonList({
+        startDate: this.startDate,
+        endDate: this.endDate,
         pageSize: this.pageSize
       }).then((res) => {
         this.tableData = res.data.records
         this.gameTotal = res.data.total
         this.pageSize = res.data.size
       })
+    },
+    onReset() {
+      this.title = undefined
+      this.daterange = undefined
+      this.startDate = undefined
+      this.endDate = undefined
+      this.currentPage = 1
+      this.pageSize = 10
+      this.onSearch()
+    },
+    dateChange(val) {
+      this.startDate = this.daterange[0]
+      this.endDate = this.daterange[1]
     }
   }
 }