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

src/views/tools/storage/local/index.vue

@@ -4,6 +4,15 @@
     <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="toQuery">搜索</el-button>
       <!-- 新增 -->
       <div style="display: inline-block;margin: 0px 2px;">
@@ -27,6 +36,16 @@
           icon="el-icon-delete"
           @click="open">删除</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>
     <!--表单组件-->
     <eForm ref="form" :is-add="isAdd"/>
@@ -85,8 +104,8 @@
 import { mapGetters } from 'vuex'
 import checkPermission from '@/utils/permission'
 import initData from '@/mixins/initData'
-import { del, delAll } from '@/api/localStorage'
-import { parseTime } from '@/utils/index'
+import { del, delAll, downloadStorage } from '@/api/localStorage'
+import { parseTime, downloadFile } from '@/utils/index'
 import eForm from './form'
 export default {
   components: { eForm },
@@ -122,6 +141,10 @@ export default {
       const query = this.query
       const value = query.value
       if (value) { this.params['blurry'] = value }
+      if (query.date) {
+        this.params['startTime'] = query.date[0]
+        this.params['endTime'] = query.date[1]
+      }
       return true
     },
     subDelete(id) {
@@ -184,6 +207,16 @@ export default {
       }).then(() => {
         this.doDelete()
       })
+    },
+    download() {
+      this.beforeInit()
+      this.downloadLoading = true
+      downloadStorage(this.params).then(result => {
+        downloadFile(result, '文件列表', 'xlsx')
+        this.downloadLoading = false
+      }).catch(() => {
+        this.downloadLoading = false
+      })
     }
   }
 }

src/views/tools/storage/qiniu/index.vue

@@ -6,6 +6,15 @@
     <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="toQuery">搜索</el-button>
       <!-- 上传 -->
       <div style="display: inline-block;margin: 0px 2px;">
@@ -33,6 +42,16 @@
           icon="el-icon-delete"
           @click="open">删除</el-button>
       </div>
+      <!-- 导出 -->
+      <div style="display: inline-block;">
+        <el-button
+          :loading="downloadLoading"
+          size="mini"
+          class="filter-item"
+          type="warning"
+          icon="el-icon-download"
+          @click="downloadList">导出</el-button>
+      </div>
       <!-- 文件上传 -->
       <el-dialog :visible.sync="dialog" :close-on-click-modal="false" append-to-body width="500px" @close="doSubmit">
         <el-upload
@@ -98,8 +117,8 @@
 
 <script>
 import initData from '@/mixins/initData'
-import { del, download, sync, delAll } from '@/api/qiniu'
-import { parseTime } from '@/utils/index'
+import { del, download, sync, delAll, downloadQiNiu } from '@/api/qiniu'
+import { parseTime, downloadFile } from '@/utils/index'
 import { mapGetters } from 'vuex'
 import { getToken } from '@/utils/auth'
 import eForm from './form'
@@ -139,6 +158,10 @@ export default {
       const value = query.value
       this.params = { page: this.page, size: this.size, sort: sort }
       if (value) { this.params['key'] = value }
+      if (query.date) {
+        this.params['startTime'] = query.date[0]
+        this.params['endTime'] = query.date[1]
+      }
       return true
     },
     doConfig() {
@@ -257,6 +280,16 @@ export default {
       }).then(() => {
         this.doDelete()
       })
+    },
+    downloadList() {
+      this.beforeInit()
+      this.downloadLoading = true
+      downloadQiNiu(this.params).then(result => {
+        downloadFile(result, '七牛云文件列表', 'xlsx')
+        this.downloadLoading = false
+      }).catch(() => {
+        this.downloadLoading = false
+      })
     }
   }
 }