代码优化，组件复用

2019-01-06 12:45:24 +08:00
parent 22a95e6fcc
commit ff0c36b5d4
40 changed files with 858 additions and 1116 deletions
--- a/src/views/monitor/log/index.vue
+++ b/src/views/monitor/log/index.vue
@@ -1,6 +1,6 @@
 <template>
  <div class="app-container">
-    <search :query="query"/>
+    <eHeader :query="query"/>
    <!--表格渲染-->
    <el-table v-loading="loading" :data="data" size="small" border style="width: 100%;">
      <el-table-column prop="username" label="用户名"/>
@@ -8,7 +8,7 @@
      <el-table-column prop="description" label="描述"/>
      <el-table-column :show-overflow-tooltip="true" prop="method" label="方法名称"/>
      <el-table-column :show-overflow-tooltip="true" prop="params" label="参数"/>
-      <el-table-column :show-overflow-tooltip="true" prop="exceptionDetail" label="异常详细"/>
+      <el-table-column :show-overflow-tooltip="true" prop="exceptionDetail" label="异常堆栈信息"/>
      <el-table-column prop="time" label="请求耗时" align="center">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.time <= 300">{{ scope.row.time }}ms</el-tag>
@@ -41,9 +41,9 @@
 <script>
 import initData from '../../../mixins/initData'
 import { parseTime } from '@/utils/index'
-import search from './module/search'
+import eHeader from './module/header'
 export default {
-  components: { search },
+  components: { eHeader },
  mixins: [initData],
  created() {
    this.$nextTick(() => {
--- a/src/views/monitor/log/module/header.vue
+++ b/src/views/monitor/log/module/header.vue
@@ -9,7 +9,6 @@
 </template>

 <script>
-// 查询条件
 export default {
  props: {
    query: {
--- a/src/views/monitor/log/msg.vue
+++ b/src/views/monitor/log/msg.vue
@@ -24,8 +24,8 @@ export default {
  name: 'Msg',
  data() {
    return {
-      height: document.documentElement.clientHeight - 132 + 'px;',
-      data: [{ name: 'elAdmin-', timestamp: parseTime(new Date().getTime()), threadName: 'system-prompt-message', level: 'INFO', className: 'me.zhengjie.AppRun' + ' :', body: '(*^ω^*) 欢迎使用，暂无日志输出~' }],
+      height: document.documentElement.clientHeight - 95 + 'px;',
+      data: [{ name: 'elAdmin-', timestamp: new Date(), threadName: 'system-prompt-message', level: 'INFO', className: 'me.zhengjie.AppRun' + ' :', body: 'Welcome, no log output~' }],
      // level
      INFO: '#0000ff', WARN: '#FFFF00', ERROR: '#FF0000', DEBUG: '#DEA000'
    }
@@ -99,7 +99,6 @@ export default {
      }
    },
    getColor(level) {
-      // INFO: '#0000ff', WARN: '#FFFF00', ERROR: '#FF0000', DEBUG: '#DEA000',
      if (level === 'INFO') {
        return this.INFO
      } else if (level === 'WARN') {
@@ -115,5 +114,5 @@ export default {
 </script>

 <style scoped>
-  textarea,input,button{outline:0}.container .buttons .closes,.container .buttons .minimize,.container .buttons .maximize{padding:0;margin:0;margin-right:6px;width:12px;height:12px;border:1px solid rgba(0,0,0,0);border-radius:6px}.container{width:100%;margin:5px}.container .handle{height:38px;background:#f9f9f9;border:1px solid #eee;border-top-left-radius:3px;border-top-right-radius:3px;font-family:'consolas';font-size:13px;line-height:38px;text-align:center}.container .buttons{position:absolute;float:left;margin:0 8px}.container .buttons .closes{background-color:#fc625d}.container .buttons .minimize{margin-left:8px;background-color:#fdbc40}.container .buttons .maximize{margin-left:8px;background-color:#35cd4b}.container .console{font-family:consolas;overflow-y:scroll;background:#494949;color:#f7f7f7;padding:10px;font-size:14px}
+  button,input,textarea{outline:0}.container .buttons .closes,.container .buttons .maximize,.container .buttons .minimize{padding:0;margin:0;margin-right:6px;width:12px;height:12px;border:1px solid transparent;border-radius:6px}.container{width:100%;margin:5px}.container .console{font-family:consolas;overflow-y:scroll;background:#494949;color:#f7f7f7;padding:10px;font-size:14px}
 </style>
--- a/src/views/monitor/redis/index.vue
+++ b/src/views/monitor/redis/index.vue
@@ -1,6 +1,6 @@
 <template>
  <div class="app-container">
-    <search :query="query"/>
+    <eHeader :query="query"/>
    <!--表格渲染-->
    <el-table v-loading="loading" :data="data" size="small" border style="width: 100%;">
      <el-table-column label="序号" width="80" align="center">
@@ -44,10 +44,10 @@ import initData from '../../../mixins/initData'
 import { del } from '@/api/redis'
 import { getPermissionTree } from '@/api/permission'
 import { parseTime } from '@/utils/index'
-import search from './module/search'
+import eHeader from './module/header'
 import edit from './module/edit'
 export default {
-  components: { search, edit },
+  components: { eHeader, edit },
  mixins: [initData],
  data() {
    return {
--- a/src/views/monitor/redis/module/add.vue
+++ b/src/views/monitor/redis/module/add.vue
@@ -1,78 +0,0 @@
-<template>
-  <div>
-    <el-button class="filter-item" size="mini" type="primary" icon="el-icon-plus" @click="dialog = true">新增</el-button>
-    <el-dialog :visible.sync="dialog" :title="title" width="500px">
-      <el-form ref="form" :model="form" :rules="rules" size="small" label-width="66px">
-        <el-form-item label="key" prop="key">
-          <el-input v-model="form.key" style="width: 370px;"/>
-        </el-form-item>
-        <el-form-item label="value" prop="value">
-          <el-input v-model="form.value" style="width: 370px;" rows="6" type="textarea"/>
-        </el-form-item>
-      </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>
-      </div>
-    </el-dialog>
-  </div>
-</template>
-<script>
-import { add } from '@/api/redis'
-export default {
-  data() {
-    return {
-      loading: false, dialog: false, title: '新增缓存',
-      form: { key: '', value: '' },
-      rules: {
-        key: [
-          { required: true, message: '请输入Key', trigger: 'blur' }
-        ],
-        value: [
-          { required: true, message: '请输入Value', trigger: 'blur' }
-        ]
-      }
-    }
-  },
-  methods: {
-    cancel() {
-      this.resetForm()
-    },
-    doSubmit() {
-      this.$refs['form'].validate((valid) => {
-        if (valid) {
-          this.loading = true
-          add(this.form).then(res => {
-            this.resetForm()
-            this.$notify({
-              title: '添加成功',
-              type: 'success',
-              duration: 2500
-            })
-            this.loading = false
-            this.$parent.$parent.init()
-          }).catch(err => {
-            this.loading = false
-            console.log(err.response.data.message)
-          })
-        } else {
-          return false
-        }
-      })
-    },
-    resetForm() {
-      this.dialog = false
-      this.$refs['form'].resetFields()
-      this.form = { key: '', value: '' }
-    }
-  }
-}
-</script>
-
-<style scoped>
-  div{
-    display: inline-block;
-    margin-left: 5px;
-    margin-right: 5px;
-  }
-</style>
--- a/src/views/monitor/redis/module/edit.vue
+++ b/src/views/monitor/redis/module/edit.vue
@@ -1,27 +1,13 @@
 <template>
  <div>
    <el-button size="mini" type="success" @click="to">编辑</el-button>
-    <el-dialog :visible.sync="dialog" :title="title" style="text-align: left" width="500px">
-      <el-form ref="form" :model="form" :rules="rules" size="small" label-width="66px">
-        <el-form ref="form" :model="form" :rules="rules" size="small" label-width="66px">
-          <el-form-item label="key" prop="key">
-            <el-input v-model="form.key" style="width: 370px;"/>
-          </el-form-item>
-          <el-form-item label="value" prop="value">
-            <el-input v-model="form.value" style="width: 370px;" rows="6" type="textarea"/>
-          </el-form-item>
-        </el-form>
-      </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>
-      </div>
-    </el-dialog>
+    <eForm ref="form" :sup_this="sup_this" :is-add="false"/>
  </div>
 </template>
 <script>
-import { edit } from '@/api/redis'
+import eForm from './form'
 export default {
+  components: { eForm },
  props: {
    data: {
      type: Object,
@@ -32,63 +18,16 @@ export default {
      required: true
    }
  },
-  data() {
-    return {
-      loading: false, dialog: false, title: '编辑缓存',
-      form: { key: '', value: '' },
-      rules: {
-        key: [
-          { required: true, message: '请输入Key', trigger: 'blur' }
-        ],
-        value: [
-          { required: true, message: '请输入Value', trigger: 'blur' }
-        ]
-      }
-    }
-  },
  methods: {
    to() {
-      this.form = { key: this.data.key, value: this.data.value }
-      this.dialog = true
-    },
-    cancel() {
-      this.resetForm()
-    },
-    doSubmit() {
-      this.$refs['form'].validate((valid) => {
-        if (valid) {
-          this.loading = true
-          const _this = this
-          edit(this.form).then(res => {
-            this.resetForm()
-            this.$notify({
-              title: '修改成功',
-              type: 'success',
-              duration: 2500
-            })
-            this.loading = false
-            _this.sup_this.init()
-          }).catch(err => {
-            this.loading = false
-            console.log(err.response.data.message)
-          })
-        } else {
-          return false
-        }
-      })
-    },
-    resetForm() {
-      this.dialog = false
-      this.$refs['form'].resetFields()
-      this.form = { key: '', value: '' }
+      const _this = this.$refs.form
+      _this.form = { key: this.data.key, value: this.data.value }
+      _this.dialog = true
    }
  }
 }
 </script>

 <style scoped>
-  div{
-    display: inline-block;
-    margin-right: 3px;
-  }
+  div{display: inline-block;margin-right: 3px;}
 </style>
--- a/src/views/monitor/redis/module/form.vue
+++ b/src/views/monitor/redis/module/form.vue
@@ -0,0 +1,102 @@
+<template>
+  <el-dialog :append-to-body="true" :visible.sync="dialog" :title="isAdd ? '新增缓存' : '编辑缓存'" width="500px">
+    <el-form ref="form" :model="form" :rules="rules" size="small" label-width="66px">
+      <el-form-item label="key" prop="key">
+        <el-input v-model="form.key" style="width: 370px;"/>
+      </el-form-item>
+      <el-form-item label="value" prop="value">
+        <el-input v-model="form.value" style="width: 370px;" rows="6" type="textarea"/>
+      </el-form-item>
+    </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>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+import { add, edit } from '@/api/redis'
+export default {
+  props: {
+    isAdd: {
+      type: Boolean,
+      required: true
+    },
+    sup_this: {
+      type: Object,
+      default: null
+    }
+  },
+  data() {
+    return {
+      loading: false, dialog: false, title: '新增缓存',
+      form: { key: '', value: '' },
+      rules: {
+        key: [
+          { required: true, message: '请输入Key', trigger: 'blur' }
+        ],
+        value: [
+          { required: true, message: '请输入Value', trigger: 'blur' }
+        ]
+      }
+    }
+  },
+  methods: {
+    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.$parent.$parent.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.sup_this.init()
+      }).catch(err => {
+        this.loading = false
+        console.log(err.response.data.message)
+      })
+    },
+    resetForm() {
+      this.dialog = false
+      this.$refs['form'].resetFields()
+      this.form = { key: '', value: '' }
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
--- a/src/views/monitor/redis/module/header.vue
+++ b/src/views/monitor/redis/module/header.vue
@@ -1,19 +1,31 @@
 <template>
  <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="primary" icon="el-icon-search" @click="toQuery">搜索</el-button>
-    <add v-if="checkPermission(['ADMIN','REDIS_ALL','REDIS_CREATE'])"/>
+    <!-- 新增 -->
+    <div style="display: inline-block;margin: 0px 2px;">
+      <el-button
+        v-if="checkPermission(['ADMIN','REDIS_ALL','REDIS_CREATE'])"
+        class="filter-item"
+        size="mini"
+        type="primary"
+        icon="el-icon-plus"
+        @click="$refs.form.dialog = true">新增</el-button>
+      <eForm ref="form" :is-add="true"/>
+    </div>
+    <!-- 清空缓存 -->
    <el-button v-if="checkPermission(['ADMIN','REDIS_ALL','REDIS_DELETE'])" :loading="deleteAllLoading" type="warning" size="mini" class="filter-item" icon="el-icon-delete" @click="deleteAll">清空缓存</el-button>
  </div>
 </template>

 <script>
 import checkPermission from '@/utils/permission' // 权限判断函数
-import add from './add'
+import eForm from './form'
 import { delAll } from '@/api/redis'
 // 查询条件
 export default {
-  components: { add },
+  components: { eForm },
  props: {
    query: {
      type: Object,