运维管理页面搭建

src/api/system/mochalTOM.js

+import request from '@/utils/request'
+
+/** 运营管理-根据类型所有对应的key的列表*/
+export function teaOperateQueryList(query) {
+  return request({
+    url: '/teaOperate/acquireKey',
+    method: 'get',
+    params: query
+  })
+}
+/** 运营管理-查询用户list集合*/
+export function queryListUserInfoByUnameOrPhone(query) {
+  return request({
+    url: '/teaOperate/queryListUserInfoByUnameOrPhone',
+    method: 'get',
+    params: query
+  })
+}
+/** 运营管理-根据key值删除对应redis*/
+export function delUser(params) {
+  return request({
+    url: '/teaOperate/clearRedisByKey/',
+    method: 'delete',
+    params: params
+  })
+}

src/router/index.js

@@ -81,6 +81,32 @@ export const constantRoutes = [
       meta: { title: '修改密码', icon: 'dashboard' }
     }]
   },
+  {
+    path: '/mochaITOM ',
+    component: Layout,
+    name: 'mochaITOM',
+    hidden: true,
+    redirect: '/mochaITOM/index',
+    children: [{
+      path: '/mochaITOM/index',
+      name: 'mochaITOM',
+      component: () => import('@/views/mochaITOM/index.vue'),
+      meta: { title: '运维管理', icon: 'dashboard' }
+    }]
+  },
+  {
+    path: '/userCache',
+    component: Layout,
+    name: 'userCache',
+    hidden: true,
+    redirect: '/userCache/index',
+    children: [{
+      path: '/userCache/index',
+      name: 'userCache',
+      component: () => import('@/views/mochaITOM/userCache.vue'),
+      meta: { title: '用户缓存', icon: 'dashboard' }
+    }]
+  },
   /* {
     path: '/',
     component: Layout,

src/views/mochaITOM/index.vue

+<template>
+  <div class="mochalTOM_module">
+    <el-card v-for="(item, index) in cardList" :key="index" class="box-card">
+      <div class="card_body">
+        {{item.name}}
+        <el-button type="primary" @click="goToDetail">前往</el-button>
+      </div>
+    </el-card>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Index',
+  data() {
+    return {
+      cardList: [
+        { name: '用户缓存' }
+      ]
+    }
+  },
+  created() {
+  },
+  mounted() {
+  },
+  methods: {
+    /** 跳转card详情*/
+    goToDetail() {
+      this.$router.push({
+        path: '/userCache/index'
+      })
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.mochalTOM_module{
+  padding: 30px;
+  .box-card{
+    width: 480px;
+    .card_body{
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+    }
+  }
+}
+</style>

src/views/mochaITOM/userCache.vue

+<template>
+  <div class="userCache_module">
+    <div class="queryTop">
+      <el-form ref="queryForm" class="formClass" :model="queryParams" :inline="true" label-width="auto">
+        <el-form-item label="类型:" prop="identity">
+          <el-select v-model="queryParams.type" placeholder="请选择类型" style="width: 100%" @change="getList">
+            <el-option
+              v-for="(item,index) in TypeList"
+              :key="index"
+              :label="item.label"
+              :value="item.value"
+            />
+          </el-select>
+        </el-form-item>
+      </el-form>
+      <el-form ref="userQueryForm" class="formClass" :model="userQueryParams" :inline="true" label-width="auto">
+        <el-form-item label="" prop="identity">
+          <el-input
+            v-model.trim="userQueryParams.searchKey"
+            placeholder="请输入"
+            clearable
+            :maxlength="30"
+            size="small"
+            style="width: 150px"
+          />
+        </el-form-item>
+        <el-form-item>
+          <el-button
+            :class="commonField.queryClass"
+            :type="commonField.typePrimary"
+            :icon="commonField.queryIcon"
+            :size="commonField.smallSize"
+            @click="handleQueryUser"
+          >{{ commonField.queryName }}</el-button>
+        </el-form-item>
+        <el-form-item label="" prop="identity">
+          <el-input
+            v-model.trim="userId"
+            placeholder="请输入"
+            clearable
+            :maxlength="30"
+            size="small"
+            style="width: 150px"
+          />
+        </el-form-item>
+      </el-form>
+    </div>
+    <div>
+      <div class="tableTitle">用户缓存列表</div>
+      <el-table
+        v-loading="loading"
+        style="padding-right: 10px"
+        :data="tableList"
+      >
+        <el-table-column type="index" label="序号" width="90" />
+        <el-table-column label="key" prop="key" :show-overflow-tooltip="true">
+          <template slot-scope="scope">
+            {{ scope.row.key || '-' }}
+          </template>
+        </el-table-column>
+        <el-table-column label="value" prop="value" :show-overflow-tooltip="true">
+          <template slot-scope="scope">
+            {{ scope.row.value || '-' }}
+          </template>
+        </el-table-column>
+        <el-table-column
+          label="操作"
+          width="200"
+          class-name="small-padding fixed-width"
+        >
+          <template slot-scope="scope">
+            <!--              //删除-->
+            <el-button
+              :class="commonField.delClass"
+              :type="commonField.typeParent"
+              :size="commonField.size"
+              @click="handleDelete(scope.row)"
+            >{{ commonField.deleteName }}</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+  </div>
+</template>
+
+<script>
+import { delUser, queryListUserInfoByUnameOrPhone, teaOperateQueryList } from '@/api/system/mochalTOM'
+import commonField from '@/utils/commonField'
+
+export default {
+  name: 'UserCache',
+  data() {
+    return {
+      userId: '',
+      loading: false,
+      tableList: [],
+      queryParams: {
+        type: '1'
+      },
+      userQueryParams: {
+        searchKey: ''
+      },
+      TypeList: [
+        { value: '1', label: '用户密码每分钟允许错误次数' },
+        { value: '2', label: '用户密码每天允许错误次数的key值前缀' },
+        { value: '3', label: '短信验证码每分钟允许错误次数的key值前缀' },
+        { value: '4', label: '短信验证码每天允许错误次数的key值前缀' },
+        { value: '5', label: '同一个ip 每分钟允许失败的次数' },
+        { value: '6', label: '同一个ip 每天允许失败的次数' },
+        { value: '7', label: '用户密码登录锁定' },
+        { value: '8', label: '短信验证码登录锁定' },
+        { value: '9', label: '登录锁定' }
+      ]
+    }
+  },
+  computed: {
+    commonField() {
+      return commonField
+    }
+  },
+  created() {
+    this.getList()
+  },
+  mounted() {
+  },
+  methods: {
+    /** 查询用户list集合*/
+    handleQueryUser() {
+      const params = {
+        searchKey: this.userQueryParams.searchKey
+      }
+      queryListUserInfoByUnameOrPhone(params).then(res => {
+        this.userId = res.data[0].businessId
+      })
+    },
+    /** 列表查询*/
+    getList() {
+      this.loading = true
+      const params = {
+        type: this.queryParams.type
+      }
+      teaOperateQueryList(params).then(res => {
+        this.tableList = res.data
+        this.loading = false
+      }).catch(function() {
+        this.loading = false
+      })
+    },
+    /** 删除方法*/
+    handleDelete(row) {
+      const params = {
+        key: row.key
+      }
+      delUser(params).then(res => {
+        this.$message({
+          type: 'success',
+          message: '删除成功'
+        })
+        this.getList()
+      })
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.userCache_module{
+  padding: 30px;
+  .queryTop{
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+}
+</style>