代码优化

src/views/monitor/redis/index.vue

@@ -3,23 +3,19 @@
     <!--工具栏-->
     <div class="head-container">
       <!-- 搜索 -->
-      <el-input v-model="query.value" clearable size="small" placeholder="输入关键词搜索" style="width: 200px;" class="filter-item" @keyup.enter.native="toQuery" />
+      <el-input v-model="query.key" clearable size="small" placeholder="输入Key搜索" 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 v-permission="['admin','redis:del']" :loading="deleteAllLoading" type="danger" size="mini" class="filter-item" icon="el-icon-delete" @click="deleteAll">清空</el-button>
-      </div>
+      <!-- 清空缓存 -->
+      <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 style="display: inline-block;">
-        <el-button
-          :loading="downloadLoading"
-          size="mini"
-          class="filter-item"
-          type="warning"
-          icon="el-icon-download"
-          @click="download"
-        >导出</el-button>
-      </div>
+      <el-button
+        :loading="downloadLoading"
+        size="mini"
+        class="filter-item"
+        type="warning"
+        icon="el-icon-download"
+        @click="downloadMethod"
+      >导出</el-button>
     </div>
     <!--表格渲染-->
     <el-table v-loading="loading" :data="data" size="small" style="width: 100%;">
@@ -42,7 +38,7 @@
             <p>确定删除本条数据吗？</p>
             <div style="text-align: right; margin: 0">
               <el-button size="mini" type="text" @click="$refs[scope.$index].doClose()">取消</el-button>
-              <el-button :loading="delLoading" type="primary" size="mini" @click="subDelete(scope.$index, scope.row)">确定</el-button>
+              <el-button :loading="delLoading" type="primary" size="mini" @click="delMethod(scope.$index, scope.row)">确定</el-button>
             </div>
             <el-button slot="reference" type="danger" icon="el-icon-delete" size="mini" />
           </el-popover>
@@ -62,16 +58,16 @@
 </template>
 
 <script>
-import checkPermission from '@/utils/permission' // 权限判断函数
-import initData from '@/mixins/initData'
-import { del, delAll, downloadRedis } from '@/api/monitor/redis'
-import { downloadFile } from '@/utils/index'
+import crud from '@/mixins/crud'
+import crudRedis from '@/api/monitor/redis'
 export default {
   name: 'Redis',
-  mixins: [initData],
+  mixins: [crud],
   data() {
     return {
-      delLoading: false, permissions: [], deleteAllLoading: false
+      title: '系统缓存',
+      crudMethod: { ...crudRedis },
+      deleteAllLoading: false
     }
   },
   created() {
@@ -80,35 +76,25 @@ export default {
     })
   },
   methods: {
-    checkPermission,
+
     beforeInit() {
       this.url = 'api/redis'
-      const query = this.query
-      const value = query.value
-      this.params = { page: this.page, size: this.size }
-      if (value) {
-        this.params['key'] = value
-      } else {
+      if (!this.query.key) {
         this.params['key'] = '*'
       }
       return true
     },
-    subDelete(index, row) {
+    delMethod(index, row) {
       this.delLoading = true
-      del(row.key).then(res => {
+      this.crudMethod.del(row.key).then(res => {
         this.delLoading = false
         this.$refs[index].doClose()
         this.dleChangePage()
         this.init()
-        this.$notify({
-          title: '删除成功',
-          type: 'success',
-          duration: 2500
-        })
-      }).catch(err => {
+        this.notify('删除成功', 'success')
+      }).catch(() => {
         this.delLoading = false
         this.$refs[index].doClose()
-        console.log(err.response.data.message)
       })
     },
     deleteAll() {
@@ -118,22 +104,12 @@ export default {
         type: 'warning'
       }).then(() => {
         this.deleteAllLoading = true
-        delAll().then(res => {
+        this.crudMethod.delAll().then(res => {
           this.page = 0
           this.init()
           this.deleteAllLoading = false
         })
       })
-    },
-    download() {
-      this.beforeInit()
-      this.downloadLoading = true
-      downloadRedis(this.params).then(result => {
-        downloadFile(result, '缓存列表', 'xlsx')
-        this.downloadLoading = false
-      }).catch(() => {
-        this.downloadLoading = false
-      })
     }
   }
 }