列表加入日期搜索与导出功能

src/views/monitor/log/errorLog.vue

@@ -32,9 +32,9 @@
       </el-table-column>
     </el-table>
     <el-dialog :visible.sync="dialog" title="异常详情" append-to-body top="0" width="85%">
-      <span>
+      <pre>
         {{ errorInfo }}
-      </span>
+      </pre>
     </el-dialog>
     <!--分页组件-->
     <el-pagination
@@ -75,6 +75,11 @@ export default {
       const value = query.value
       this.params = { page: this.page, size: this.size, sort: sort }
       if (value) { this.params['blurry'] = value }
+      this.params['logType'] = 'ERROR'
+      if (query.date) {
+        this.params['startTime'] = query.date[0]
+        this.params['endTime'] = query.date[1]
+      }
       return true
     },
     info(id) {

src/views/monitor/log/index.vue

@@ -66,6 +66,11 @@ export default {
       const value = query.value
       this.params = { page: this.page, size: this.size, sort: sort }
       if (value) { this.params['blurry'] = value }
+      this.params['logType'] = 'INFO'
+      if (query.date) {
+        this.params['startTime'] = query.date[0]
+        this.params['endTime'] = query.date[1]
+      }
       return true
     }
   }

src/views/monitor/log/search.vue

@@ -1,17 +1,55 @@
 <template>
   <div class="head-container">
     <el-input v-model="query.value" clearable placeholder="请输入你要搜索的内容" style="width: 200px;" class="filter-item" @keyup.enter.native="toQuery"/>
+    <el-date-picker
+      v-model="query.date"
+      type="daterange"
+      range-separator=":"
+      class="el-range-editor--small filter-item"
+      style="height: 30.5px;width: 220px"
+      value-format="yyyy-MM-dd HH:mm:ss"
+      start-placeholder="开始日期"
+      end-placeholder="结束日期"/>
     <el-button class="filter-item" size="mini" type="success" icon="el-icon-search" @click="$parent.toQuery">搜索</el-button>
+    <!-- 导出 -->
+    <div style="display: inline-block;">
+      <el-button
+        :loading="downloadLoading"
+        size="mini"
+        class="filter-item"
+        type="warning"
+        icon="el-icon-download"
+        @click="download">导出</el-button>
+    </div>
   </div>
 </template>
 
 <script>
+import { downloadFile } from '@/utils/index'
+import { downloadLog } from '@/api/log'
 export default {
   props: {
     query: {
       type: Object,
       required: true
     }
+  },
+  data() {
+    return {
+      downloadLoading: false
+    }
+  },
+  methods: {
+    download() {
+      this.$parent.beforeInit()
+      this.downloadLoading = true
+      downloadLog(this.$parent.params).then(result => {
+        downloadFile(result, '系统日志列表', 'xlsx')
+        this.downloadLoading = false
+      }).catch(() => {
+        this.downloadLoading = false
+      })
+    }
   }
 }
 </script>

src/views/monitor/online/index.vue

@@ -3,6 +3,16 @@
     <div class="head-container">
       <el-input v-model="query.value" clearable placeholder="全表模糊搜索" style="width: 200px;" class="filter-item" @keyup.enter.native="toQuery"/>
       <el-button class="filter-item" size="mini" type="success" icon="el-icon-search" @click="toQuery">搜索</el-button>
+      <!-- 导出 -->
+      <div style="display: inline-block;">
+        <el-button
+          :loading="downloadLoading"
+          size="mini"
+          class="filter-item"
+          type="warning"
+          icon="el-icon-download"
+          @click="download">导出</el-button>
+      </div>
     </div>
     <!--表格渲染-->
     <el-table v-loading="loading" :data="data" size="small" style="width: 100%;">
@@ -46,8 +56,8 @@
 
 <script>
 import initData from '@/mixins/initData'
-import { parseTime } from '@/utils/index'
-import { del } from '@/api/online'
+import { parseTime, downloadFile } from '@/utils/index'
+import { del, downloadOnline } from '@/api/online'
 export default {
   name: 'OnlineUser',
   mixins: [initData],
@@ -86,6 +96,16 @@ export default {
         this.$refs[index].doClose()
         console.log(err.response.data.message)
       })
+    },
+    download() {
+      this.beforeInit()
+      this.downloadLoading = true
+      downloadOnline(this.params).then(result => {
+        downloadFile(result, '在线用户列表', 'xlsx')
+        this.downloadLoading = false
+      }).catch(() => {
+        this.downloadLoading = false
+      })
     }
   }
 }

src/views/monitor/redis/index.vue

@@ -7,7 +7,17 @@
       <el-button class="filter-item" size="mini" type="success" icon="el-icon-search" @click="toQuery">搜索</el-button>
       <div style="display: inline-block;">
         <!-- 清空缓存 -->
-        <el-button v-permission="['admin','redis:del']" :loading="deleteAllLoading" type="warning" size="mini" class="filter-item" icon="el-icon-delete" @click="deleteAll">清空缓存</el-button>
+        <el-button v-permission="['admin','redis:del']" :loading="deleteAllLoading" type="danger" size="mini" class="filter-item" icon="el-icon-delete" @click="deleteAll">清空</el-button>
+      </div>
+      <!-- 导出 -->
+      <div style="display: inline-block;">
+        <el-button
+          :loading="downloadLoading"
+          size="mini"
+          class="filter-item"
+          type="warning"
+          icon="el-icon-download"
+          @click="download">导出</el-button>
       </div>
     </div>
     <!--表格渲染-->
@@ -56,7 +66,8 @@
 <script>
 import checkPermission from '@/utils/permission' // 权限判断函数
 import initData from '@/mixins/initData'
-import { del, delAll } from '@/api/redis'
+import { del, delAll, downloadRedis } from '@/api/redis'
+import { downloadFile } from '@/utils/index'
 export default {
   name: 'Redis',
   mixins: [initData],
@@ -115,6 +126,16 @@ export default {
           this.deleteAllLoading = false
         })
       })
+    },
+    download() {
+      this.beforeInit()
+      this.downloadLoading = true
+      downloadRedis(this.params).then(result => {
+        downloadFile(result, '缓存列表', 'xlsx')
+        this.downloadLoading = false
+      }).catch(() => {
+        this.downloadLoading = false
+      })
     }
   }
 }