modify table

src/components/Home.vue

@@ -5,7 +5,16 @@
 
     <el-form :inline="true" :model="formInline" class="demo-form-inline">
       <el-form-item label="日期：">
-        <el-input v-model="formInline.date" placeholder="日期"></el-input>
+
+        <el-date-picker
+            v-model="formInline.date"
+            type="daterange"
+            range-separator="至"
+            start-placeholder="开始日期"
+            end-placeholder="结束日期"
+            value-format="yyyy-MM-dd"
+        >
+        </el-date-picker>
       </el-form-item>
 
       <el-form-item label="警号：">
@@ -16,16 +25,23 @@
 
       </el-form-item>
       <el-form-item>
-        <el-button type="primary" @click="onSearch">查询</el-button>
+        <el-button type="primary" @click="handleSearch">查询</el-button>
+      </el-form-item>
+
+      <el-form-item>
+        <el-button icon="el-icon-refresh" @click="handleRefresh">刷新</el-button>
       </el-form-item>
+
     </el-form>
 
     <el-table
         :data="tableData"
         stripe
+        :default-sort = "{prop: 'record_time', order: 'descending'}"
         style="width: 100%">
       <el-table-column
           prop="record_time"
+          sortable
           label="记录仪日期时间">
       </el-table-column>
       <el-table-column
@@ -58,7 +74,7 @@
 
         <template v-slot="scope">
           <el-image :preview-src-list="[scope.row.small_image]"
-                    style="width: 80px; height: 80px"
+                    style="width: 65px; height: 65px"
                     :src="scope.row.small_image"
           ></el-image>
 
@@ -122,7 +138,7 @@ export default {
       isDisplay: true,
 
       formInline: {
-        date: '',
+        date: [],
         policeId: '',
         event: ''
       },
@@ -166,11 +182,19 @@ export default {
     },
 
     onSearch() {
+      let start_time;
+      let end_time;
+      if (this.formInline.date) {
+        start_time = this.formInline.date[0];
+        end_time = this.formInline.date[1];
+      }
+
       this.$axios({
         url: window.serverConfig.VUE_APP_HOST_URL,
         method: 'get',
         params: {
-          datetime: this.formInline.date || undefined,
+          start_time: start_time || undefined,
+          end_time: end_time || undefined,
           police_id: this.formInline.policeId || undefined,
           event_type: this.formInline.event || undefined,
           page: this.currentPage || undefined,
@@ -195,6 +219,15 @@ export default {
       })
     },
 
+    handleSearch() {
+      this.currentPage = 1
+      this.onSearch()
+    },
+
+    handleRefresh() {
+      this.onSearch()
+    },
+
     handleSizeChange(val) {
       this.pageSize = val;
       this.onSearch();