src/api/data.js

@@ -0,0 +1,19 @@
+import request from '@/utils/request'
+
+const commonUrl = 'http://10.179.17.100:10086/api'
+
+export function getGlobalInterface(data) {
+  return request({
+    url: 'http://10.179.17.100:10086/render/menu',
+    method: 'get',
+    data
+  })
+}
+
+export function postForm(path, data) {
+  return request({
+    url: commonUrl + path,
+    method: 'post',
+    data
+  })
+}

src/layout/components/Sidebar/index.vue

@@ -11,8 +11,19 @@
         :active-text-color="variables.menuActiveText"
         :collapse-transition="false"
         mode="vertical"
+        @select="handleSelect"
       >
         <sidebar-item v-for="route in routes" :key="route.path" :item="route" :base-path="route.path" />
+        <el-submenu index="100">
+          <template slot="title">
+            <i class="el-icon-menu" />
+            <span slot="title" @mouseover="getGlobalInterface">数据中心</span>
+          </template>
+          <el-submenu v-for="(myMenu,index) in menu" :key="myMenu.menuName" :index="'100-' + index">
+            <template slot="title">{{ myMenu.menuName }}</template>
+            <el-menu-item v-for="(subMenu,index2) in myMenu.subMenus" :key="subMenu.path" :index="'100-' + index + '-' + index2" @click="handleClick(subMenu)">{{ subMenu.subMenuName }}</el-menu-item>
+          </el-submenu>
+        </el-submenu>
       </el-menu>
     </el-scrollbar>
   </div>
@@ -23,12 +34,14 @@ import { mapGetters } from 'vuex'
 import Logo from './Logo'
 import SidebarItem from './SidebarItem'
 import variables from '@/styles/variables.scss'
+import { getGlobalInterface } from '@/api/data.js'
 
 export default {
   components: { SidebarItem, Logo },
   computed: {
     ...mapGetters([
-      'sidebar'
+      'sidebar',
+      'menu'
     ]),
     routes() {
       return this.$router.options.routes
@@ -51,6 +64,27 @@ export default {
     isCollapse() {
       return !this.sidebar.opened
     }
+  },
+  mounted() {
+    this.getGlobalInterface()
+  },
+  methods: {
+    handleSelect(key, keypath) {
+      switch (key) {
+        case '100':
+          break
+      }
+    },
+    handleClick(subMenu) {
+      this.$store.dispatch('data/setSubMenu', subMenu)
+      this.$router.push({ name: '动态数据' })
+    },
+    getGlobalInterface() {
+      getGlobalInterface()
+        .then(res => {
+          this.$store.dispatch('data/setMenu', res.data)
+        })
+    }
   }
 }
 </script>

src/router/index.js

@@ -164,43 +164,19 @@ export const constantRoutes = [
       }
     ]
   },
-
   {
-    path: '/cure',
+    path: '/data',
     component: Layout,
-    redirect: '/cure/commonTools/redis',
-    name: 'cure',
-    meta: { title: '数据中心', icon: 'group' },
+    redirect: '/data/item',
+    name: '数据中心',
+    hidden: true,
+    meta: { title: '数据中心', icon: 'env_platform' },
     children: [
       {
-        path: 'commonTools',
-        name: '通用工具',
-        alwaysShow: true,
-        component: () => import('@/views/cure/menu1/index.vue'),
-        meta: { title: '通用工具', icon: 'interface' },
-        children: [
-          {
-            path: 'redis',
-            name: 'Redis',
-            component: () => import('@/views/cure/menu1/action.vue'),
-            meta: { title: '获取Redis的数据', icon: 'interface' }
-          }
-        ]
-      },
-      {
-        path: 'daijia',
-        name: '代驾数据构造',
-        component: () => import('@/views/cure/menu1/index.vue'),
-        alwaysShow: true,
-        meta: { title: '代驾数据构造', icon: 'rule' },
-        children: [
-          {
-            path: 'highBottomLine',
-            name: 'HighBottomLine',
-            component: () => import('@/views/cure/menu1/Homes.vue'),
-            meta: { title: '司机高底线切换', icon: 'interface' }
-          }
-        ]
+        path: 'item',
+        name: '动态数据',
+        component: () => import('@/views/data/index.vue'),
+        meta: { title: '数据中心', icon: 'env' }
       }
     ]
   },

src/store/getters.js

@@ -3,6 +3,8 @@ const getters = {
   device: state => state.app.device,
   token: state => state.user.token,
   avatar: state => state.user.avatar,
-  name: state => state.user.name
+  name: state => state.user.name,
+  menu: state => state.data.menu,
+  subMenu: state => state.data.subMenu
 }
 export default getters

src/store/index.js

@@ -4,6 +4,7 @@ import getters from './getters'
 import app from './modules/app'
 import settings from './modules/settings'
 import user from './modules/user'
+import data from './modules/data'
 
 Vue.use(Vuex)
 
@@ -11,7 +12,8 @@ const store = new Vuex.Store({
   modules: {
     app,
     settings,
-    user
+    user,
+    data
   },
   getters
 })

src/store/modules/data.js

@@ -0,0 +1,30 @@
+const state = {
+  menu: '',
+  subMenu: ''
+}
+
+const mutations = {
+  SETMENU(state, value) {
+    state.menu = value
+  },
+  SETSUBMENU(state, value) {
+    state.subMenu = value
+  }
+}
+
+const actions = {
+  setMenu({ commit }, value) {
+    commit('SETMENU', value)
+  },
+  setSubMenu({ commit }, value) {
+    commit('SETSUBMENU', value)
+  }
+}
+
+export default {
+  namespaced: true,
+  state,
+  mutations,
+  actions
+}
+

src/views/data/index.vue

@@ -0,0 +1,85 @@
+<template>
+  <div class="main">
+    <el-card shadow>
+      <div slot="header">
+        <span>{{ subMenu.subMenuName }}</span>
+      </div>
+      <el-form label-width="80px" wid>
+        <el-form-item v-for="(item,index) in subMenu.widgets" :key="index" :label="item.name">
+          <el-input v-if="item.widgetType === 'INPUT'" v-model="data[item.name]" :place-holder="item.placeHolder" />
+          <el-select v-if="item.widgetType === 'SELECT'" v-model="data[item.name]" :place-holder="item.placeHolder">
+            <el-option
+              v-for="option in item.options"
+              :key="option.value"
+              :label="option.displayName"
+              :value="option.value"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" @click="onSubmit">确定</el-button>
+          <el-button type="primary" @click="reset">重置</el-button>
+        </el-form-item>
+      </el-form>
+    </el-card>
+    <el-card class="result" shadow>
+      {{ result }}
+    </el-card>
+  </div>
+</template>
+
+<style scoped>
+.el-card {
+  margin: 2%;
+}
+.el-form {
+  width: 50%;
+}
+.el-select {
+  width: 50%;
+}
+.result {
+  padding: 2%;
+}
+</style>
+
+<script>
+import { postForm } from '@/api/data.js'
+import { mapGetters } from 'vuex'
+
+export default {
+  name: 'DataCenter',
+  data() {
+    return {
+      data: {
+      },
+      result: null
+    }
+  },
+  computed: {
+    ...mapGetters([
+      'subMenu'
+    ])
+  },
+  watch: {
+    subMenu(newValue, oldValue) {
+      this.data = {}
+    }
+  },
+  methods: {
+    postForm() {
+      postForm(this.subMenu.path, this.data)
+        .then(res => {
+          this.result = res.result
+        })
+    },
+    onSubmit() {
+      this.postForm()
+    },
+    reset() {
+      this.data = {}
+    }
+  }
+}
+</script>
+