代码优化

src/api/monitor/log.js

@@ -6,12 +6,3 @@ export function getErrDetail(id) {
     method: 'get'
   })
 }
-
-export function downloadLog(params) {
-  return request({
-    url: 'api/logs/download',
-    method: 'get',
-    params,
-    responseType: 'blob'
-  })
-}

src/api/monitor/redis.js

@@ -34,11 +34,4 @@ export function edit(data) {
   })
 }
 
-export function downloadRedis(params) {
+export default { del, delAll }
-  return request({
-    url: 'api/redis/download',
-    method: 'get',
-    params,
-    responseType: 'blob'
-  })
-}

src/api/system/timing.js

@@ -37,20 +37,4 @@ export function execution(id) {
   })
 }
 
-export function downloadJobs(params) {
+export default { del, updateIsPause, execution, add, edit }
-  return request({
-    url: 'api/jobs/download',
-    method: 'get',
-    params,
-    responseType: 'blob'
-  })
-}
-
-export function downloadLogs(params) {
-  return request({
-    url: 'api/jobs/download/log',
-    method: 'get',
-    params,
-    responseType: 'blob'
-  })
-}

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>
-        <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
-        <el-button
+        :loading="downloadLoading"
-          :loading="downloadLoading"
+        size="mini"
-          size="mini"
+        class="filter-item"
-          class="filter-item"
+        type="warning"
-          type="warning"
+        icon="el-icon-download"
-          icon="el-icon-download"
+        @click="downloadMethod"
-          @click="download"
+      >导出</el-button>
-        >导出</el-button>
-      </div>
     </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 crud from '@/mixins/crud'
-import initData from '@/mixins/initData'
+import crudRedis from '@/api/monitor/redis'
-import { del, delAll, downloadRedis } from '@/api/monitor/redis'
-import { downloadFile } from '@/utils/index'
 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
+      if (!this.query.key) {
-      const value = query.value
-      this.params = { page: this.page, size: this.size }
-      if (value) {
-        this.params['key'] = value
-      } else {
         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({
+        this.notify('删除成功', 'success')
-          title: '删除成功',
+      }).catch(() => {
-          type: 'success',
-          duration: 2500
-        })
-      }).catch(err => {
         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
-      })
     }
   }
 }

src/views/system/timing/index.vue

@@ -3,9 +3,9 @@
     <!--工具栏-->
     <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.jobName" clearable size="small" placeholder="输入任务名称搜索" style="width: 200px;" class="filter-item" @keyup.enter.native="toQuery" />
       <el-date-picker
-        v-model="query.date"
+        v-model="query.createTime"
         :default-time="['00:00:00','23:59:59']"
         type="daterange"
         range-separator=":"
@@ -17,40 +17,34 @@
       />
       <el-button class="filter-item" size="mini" type="success" icon="el-icon-search" @click="toQuery">搜索</el-button>
       <!-- 新增 -->
-      <div v-permission="['admin','timing:add']" style="display: inline-block;margin: 0px 2px;">
+      <el-button
-        <el-button
+        class="filter-item"
-          class="filter-item"
+        size="mini"
-          size="mini"
+        type="primary"
-          type="primary"
+        icon="el-icon-plus"
-          icon="el-icon-plus"
+        @click="showAddFormDialog"
-          @click="dialog = true;isAdd = true"
+      >新增</el-button>
-        >新增</el-button>
-      </div>
       <!-- 导出 -->
-      <div style="display: inline-block;">
+      <el-button
-        <el-button
+        :loading="downloadLoading"
-          :loading="downloadLoading"
+        size="mini"
-          size="mini"
+        class="filter-item"
-          class="filter-item"
+        type="warning"
-          type="warning"
+        icon="el-icon-download"
-          icon="el-icon-download"
+        @click="downloadMethod"
-          @click="download"
+      >导出</el-button>
-        >导出</el-button>
-      </div>
       <!-- 任务日志 -->
-      <div style="display: inline-block;">
+      <el-button
-        <el-button
+        class="filter-item"
-          class="filter-item"
+        size="mini"
-          size="mini"
+        type="info"
-          type="info"
+        icon="el-icon-tickets"
-          icon="el-icon-tickets"
+        @click="doLog"
-          @click="doLog"
+      >日志</el-button>
-        >日志</el-button>
+      <Log ref="log" />
-        <Log ref="log" />
-      </div>
     </div>
     <!--Form表单-->
-    <el-dialog :visible.sync="dialog" :close-on-click-modal="false" :before-close="cancel" :title="isAdd ? '新增任务' : '编辑任务'" append-to-body width="600px">
+    <el-dialog :visible.sync="dialog" :close-on-click-modal="false" :before-close="cancel" :title="getFormTitle()" append-to-body width="600px">
       <el-form ref="form" :model="form" :rules="rules" size="small" label-width="100px">
         <el-form-item label="任务名称" prop="jobName">
           <el-input v-model="form.jobName" style="width: 460px;" />
@@ -68,8 +62,8 @@
           <el-input v-model="form.cronExpression" style="width: 460px;" />
         </el-form-item>
         <el-form-item label="任务状态">
-          <el-radio v-model="form.isPause" label="false">启用</el-radio>
+          <el-radio v-model="form.isPause" :label="false">启用</el-radio>
-          <el-radio v-model="form.isPause" label="true">暂停</el-radio>
+          <el-radio v-model="form.isPause" :label="true">暂停</el-radio>
         </el-form-item>
         <el-form-item label="任务描述">
           <el-input v-model="form.remark" style="width: 460px;" rows="2" type="textarea" />
@@ -77,7 +71,7 @@
       </el-form>
       <div slot="footer" class="dialog-footer">
         <el-button type="text" @click="cancel">取消</el-button>
-        <el-button :loading="loading" type="primary" @click="doSubmit">确认</el-button>
+        <el-button :loading="loading" type="primary" @click="submitMethod">确认</el-button>
       </div>
     </el-dialog>
     <!--表格渲染-->
@@ -100,7 +94,7 @@
       </el-table-column>
       <el-table-column v-if="checkPermission(['admin','timing:edit','timing:del'])" label="操作" width="180px" align="center" fixed="right">
         <template slot-scope="scope">
-          <el-button v-permission="['admin','timing:edit']" size="mini" style="margin-right: 3px;" type="text" @click="edit(scope.row)">编辑</el-button>
+          <el-button v-permission="['admin','timing:edit']" size="mini" style="margin-right: 3px;" type="text" @click="showEditFormDialog(scope.row)">编辑</el-button>
           <el-button v-permission="['admin','timing:edit']" style="margin-left: -2px" type="text" size="mini" @click="execute(scope.row.id)">执行</el-button>
           <el-button v-permission="['admin',,'timing:edit']" style="margin-left: 3px" type="text" size="mini" @click="updateStatus(scope.row.id,scope.row.isPause ? '恢复' : '暂停')">
             {{ scope.row.isPause ? '恢复' : '暂停' }}
@@ -114,7 +108,7 @@
             <p>确定停止并删除该任务吗？</p>
             <div style="text-align: right; margin: 0">
               <el-button size="mini" type="text" @click="$refs[scope.row.id].doClose()">取消</el-button>
-              <el-button :loading="delLoading" type="primary" size="mini" @click="subDelete(scope.row.id)">确定</el-button>
+              <el-button :loading="delLoading" type="primary" size="mini" @click="delMethod(scope.row.id)">确定</el-button>
             </div>
             <el-button slot="reference" type="text" size="mini">删除</el-button>
           </el-popover>
@@ -134,20 +128,18 @@
 </template>
 
 <script>
-import checkPermission from '@/utils/permission'
+import crud from '@/mixins/crud'
-import initData from '@/mixins/initData'
+import crudJob from '@/api/system/timing'
-import { del, updateIsPause, execution, add, edit, downloadJobs } from '@/api/system/timing'
-import { parseTime, downloadFile } from '@/utils/index'
 import Log from './log'
 export default {
   name: 'Timing',
   components: { Log },
-  mixins: [initData],
+  mixins: [crud],
   data() {
     return {
-      delLoading: false, isAdd: false,
+      title: '定时任务',
-      loading: false, dialog: false,
+      crudMethod: { ...crudJob },
-      form: { jobName: '', beanName: '', methodName: '', params: '', cronExpression: '', isPause: 'false', remark: '' }, permissionIds: [],
+      form: { jobName: null, beanName: null, methodName: null, params: null, cronExpression: null, isPause: false, remark: null },
       rules: {
         jobName: [
           { required: true, message: '请输入任务名称', trigger: 'blur' }
@@ -170,23 +162,14 @@ export default {
     })
   },
   methods: {
-    parseTime,
+    // 获取数据前设置好接口地址
-    checkPermission,
     beforeInit() {
       this.url = 'api/jobs'
-      const sort = 'id,desc'
-      const query = this.query
-      const value = query.value
-      this.params = { page: this.page, size: this.size, sort: sort }
-      if (value) { this.params['jobName'] = value }
-      if (query.date) {
-        this.params['startTime'] = query.date[0]
-        this.params['endTime'] = query.date[1]
-      }
       return true
     },
+    // 执行
     execute(id) {
-      execution(id).then(res => {
+      this.crudMethod.execution(id).then(res => {
         this.$notify({
           title: '执行成功',
           type: 'success',
@@ -196,8 +179,9 @@ export default {
         console.log(err.response.data.message)
       })
     },
+    // 改变状态
     updateStatus(id, status) {
-      updateIsPause(id).then(res => {
+      this.crudMethod.updateIsPause(id).then(res => {
         this.init()
         this.$notify({
           title: status + '成功',
@@ -208,96 +192,10 @@ export default {
         console.log(err.response.data.message)
       })
     },
-    subDelete(id) {
+    // 显示日志
-      this.delLoading = true
-      del(id).then(res => {
-        this.delLoading = false
-        this.$refs[id].doClose()
-        this.dleChangePage()
-        this.init()
-        this.$notify({
-          title: '删除成功',
-          type: 'success',
-          duration: 2500
-        })
-      }).catch(err => {
-        this.delLoading = false
-        this.$refs[id].doClose()
-        console.log(err.response.data.message)
-      })
-    },
-    toQuery() {
-      this.page = 0
-      this.init()
-    },
     doLog() {
       this.$refs.log.dialog = true
       this.$refs.log.doInit()
-    },
-    cancel() {
-      this.resetForm()
-    },
-    doSubmit() {
-      this.$refs['form'].validate((valid) => {
-        if (valid) {
-          this.loading = true
-          if (this.isAdd) {
-            this.doAdd()
-          } else this.doEdit()
-        } else {
-          return false
-        }
-      })
-    },
-    doAdd() {
-      add(this.form).then(res => {
-        this.resetForm()
-        this.$notify({
-          title: '添加成功',
-          type: 'success',
-          duration: 2500
-        })
-        this.loading = false
-        this.init()
-      }).catch(err => {
-        this.loading = false
-        console.log(err.response.data.message)
-      })
-    },
-    doEdit() {
-      edit(this.form).then(res => {
-        this.resetForm()
-        this.$notify({
-          title: '修改成功',
-          type: 'success',
-          duration: 2500
-        })
-        this.loading = false
-        this.init()
-      }).catch(err => {
-        this.loading = false
-        console.log(err.response.data.message)
-      })
-    },
-    resetForm() {
-      this.dialog = false
-      this.$refs['form'].resetFields()
-      this.form = { jobName: '', beanName: '', methodName: '', params: '', cronExpression: '', isPause: 'false', remark: '' }
-    },
-    edit(data) {
-      this.isAdd = false
-      this.form = { id: data.id, jobName: data.jobName, beanName: data.beanName, methodName: data.methodName, params: data.params, cronExpression: data.cronExpression, isPause: data.isPause.toString(), remark: data.remark }
-      this.dialog = true
-    },
-    download() {
-      this.beforeInit()
-      this.downloadLoading = true
-      downloadJobs(this.params).then(result => {
-        downloadFile(result, '任务列表', 'xlsx')
-        this.downloadLoading = false
-      }).catch(() => {
-        this.downloadLoading = false
-      })
     }
   }
 }

src/views/system/timing/log.vue

@@ -2,9 +2,9 @@
   <el-dialog :visible.sync="dialog" append-to-body title="执行日志" width="88%">
     <!-- 搜索 -->
     <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.jobName" clearable size="small" placeholder="输入任务名称搜索" style="width: 200px;" class="filter-item" @keyup.enter.native="toQuery" />
       <el-date-picker
-        v-model="query.date"
+        v-model="query.createTime"
         :default-time="['00:00:00','23:59:59']"
         type="daterange"
         range-separator=":"
@@ -26,7 +26,7 @@
           class="filter-item"
           type="warning"
           icon="el-icon-download"
-          @click="download"
+          @click="downloadMethod"
         >导出</el-button>
       </div>
     </div>
@@ -55,9 +55,9 @@
       </el-table-column>
     </el-table>
     <el-dialog :visible.sync="errorDialog" append-to-body title="异常详情" width="85%">
-      <span>
+      <pre>
         {{ errorInfo }}
-      </span>
+      </pre>
     </el-dialog>
     <!--分页组件-->
     <el-pagination
@@ -73,16 +73,13 @@
 </template>
 
 <script>
-import checkPermission from '@/utils/permission'
+import crud from '@/mixins/crud'
-import initData from '@/mixins/initData'
-import { downloadLogs } from '@/api/system/timing'
-import { parseTime, downloadFile } from '@/utils/index'
 export default {
-  mixins: [initData],
+  mixins: [crud],
   data() {
     return {
+      title: '任务日志',
       errorInfo: '', errorDialog: false,
-      dialog: false, delLoading: false,
       enabledTypeOptions: [
         { key: 'true', display_name: '成功' },
         { key: 'false', display_name: '失败' }
@@ -90,46 +87,21 @@ export default {
     }
   },
   methods: {
-    parseTime,
-    checkPermission,
     doInit() {
       this.$nextTick(() => {
         this.init()
       })
     },
-    toQuery() {
+    // 获取数据前设置好接口地址
-      this.page = 0
-      this.doInit()
-    },
     beforeInit() {
       this.url = 'api/jobs/logs'
-      const sort = 'id,desc'
-      const query = this.query
-      const value = query.value
-      const isSuccess = query.isSuccess
       this.size = 6
-      this.params = { page: this.page, size: this.size, sort: sort }
-      if (value) { this.params['jobName'] = value }
-      if (query.date) {
-        this.params['startTime'] = query.date[0]
-        this.params['endTime'] = query.date[1]
-      }
-      if (isSuccess !== '' && isSuccess !== null) { this.params['isSuccess'] = isSuccess }
       return true
     },
+    // 异常详情
     info(errorInfo) {
       this.errorInfo = errorInfo
       this.errorDialog = true
-    },
-    download() {
-      this.beforeInit()
-      this.downloadLoading = true
-      downloadLogs(this.params).then(result => {
-        downloadFile(result, '任务日志列表', 'xlsx')
-        this.downloadLoading = false
-      }).catch(() => {
-        this.downloadLoading = false
-      })
     }
   }
 }