dd

src/router/index.js

@@ -469,117 +469,125 @@ export const constantRoutes = [{
   component: Layout,
   name: '工具集合',
   meta: { title: '工具集合', icon: '工具集合' },
-  children: [{
-    path: '/views/mock',
-    name: 'Mock服务',
-    component: () =>
-    import('@/views/Platform/presentation/testa'),
-    meta: { title: 'Mock服务' },
-    children: [{
-      path: 'interface',
-      name: 'Interface',
-      component: () =>
-          import('@/views/mock/interface'),
-      meta: { title: 'dubbo mock' }
-    },
+  children: [
     {
-      path: 'interface/:rule',
-      name: 'Rule',
-      hidden: true,
+      path: '/views/mock',
+      name: 'Mock服务',
       component: () =>
+    import('@/views/Platform/presentation/testa'),
+      meta: { title: 'Mock服务' },
+      children: [{
+        path: 'interface',
+        name: 'Interface',
+        component: () =>
+          import('@/views/mock/interface'),
+        meta: { title: 'dubbo mock' }
+      },
+      {
+        path: 'interface/:rule',
+        name: 'Rule',
+        hidden: true,
+        component: () =>
           import('@/views/mock/rule'),
-      meta: { title: 'dubbo规则' }
-    },
-    {
-      path: 'httpmock',
-      name: 'httpmock',
-      component: () =>
+        meta: { title: 'dubbo规则' }
+      },
+      {
+        path: 'httpmock',
+        name: 'httpmock',
+        component: () =>
           import('@/views/mock/httpmock'),
-      meta: { title: 'http mock' }
+        meta: { title: 'http mock' }
+      },
+      {
+        path: 'httpmock/:httprule',
+        name: 'Httprule',
+        hidden: true,
+        component: () =>
+          import('@/views/mock/httprule'),
+        meta: { title: 'httpmock规则' }
+      }
+      ]
     },
     {
-      path: 'httpmock/:httprule',
-      name: 'Httprule',
-      hidden: true,
+      path: '/online-quality',
       component: () =>
-          import('@/views/mock/httprule'),
-      meta: { title: 'httpmock规则' }
-    }
-    ]
-  },
-  {
-    path: '/online-quality',
-    component: () =>
     import('@/views/Platform/presentation/testa'),
-    redirect: '/online-quality/check-list',
-    name: '上线质检',
-    meta: { title: '上线质检' },
-    children: [{
-      path: 'check-list',
-      name: '模板管理',
-      component: () =>
+      redirect: '/online-quality/check-list',
+      name: '上线质检',
+      meta: { title: '上线质检' },
+      children: [{
+        path: 'check-list',
+        name: '模板管理',
+        component: () =>
             import('@/views/online-quality/CheckConfig/index.vue'),
-      meta: { title: '模板管理' }
-    },
-    {
-      path: 'history-task',
-      name: '历史任务',
-      component: () =>
+        meta: { title: '模板管理' }
+      },
+      {
+        path: 'history-task',
+        name: '历史任务',
+        component: () =>
             import('@/views/online-quality/HistoryTask/index.vue'),
-      meta: { title: '历史任务' }
-    },
-    {
-      path: 'history-task-details/:taskId',
-      props: true,
-      name: '历史任务详情',
-      hidden: true,
-      component: () =>
+        meta: { title: '历史任务' }
+      },
+      {
+        path: 'history-task-details/:taskId',
+        props: true,
+        name: '历史任务详情',
+        hidden: true,
+        component: () =>
             import('@/views/online-quality/HistoryTask/taskDetails.vue'),
-      meta: { title: '历史任务详情' }
-    },
-    {
-      path: 'block-server',
-      name: '阻断服务',
-      component: () =>
+        meta: { title: '历史任务详情' }
+      },
+      {
+        path: 'block-server',
+        name: '阻断服务',
+        component: () =>
             import('@/views/online-quality/BlockServer/index.vue'),
-      meta: { title: '阻断服务' }
-    }
-    ]
-  },
-  {
-    path: '/virtualDevices',
-    component: () => import('@/views/Platform/presentation/testa'),
-    redirect: '/virtualDevices/HTvehicle',
-    name: '虚拟硬件',
-    meta: { title: '虚拟硬件' },
-    children: [{
-      path: 'HTvehicle',
-      name: '单车',
-      component: () => import('@/views/virtualDevices/HTvehicle'),
-      meta: { title: '单车' }
+        meta: { title: '阻断服务' }
+      }
+      ]
     },
     {
-      path: 'ebike',
-      name: '电单车',
-      component: () => import('@/views/virtualDevices/HMvehicle.vue'),
-      meta: { title: '电单车' }
+      path: '/virtualDevices',
+      component: () => import('@/views/Platform/presentation/testa'),
+      redirect: '/virtualDevices/HTvehicle',
+      name: '虚拟硬件',
+      meta: { title: '虚拟硬件' },
+      children: [{
+        path: 'HTvehicle',
+        name: '单车',
+        component: () => import('@/views/virtualDevices/HTvehicle'),
+        meta: { title: '单车' }
+      },
+      {
+        path: 'ebike',
+        name: '电单车',
+        component: () => import('@/views/virtualDevices/HMvehicle.vue'),
+        meta: { title: '电单车' }
+      },
+      {
+        path: 'ebike/ebikeCreate',
+        name: '新增电单车',
+        hidden: true,
+        component: () => import('@/views/virtualDevices/HMvehicleCreate.vue'),
+        meta: { title: '新增电单车' }
+      }
+      ]
     },
     {
-      path: 'ebike/ebikeCreate',
-      name: '新增电单车',
+      path: '/apiManagement',
       hidden: true,
-      component: () => import('@/views/virtualDevices/HMvehicleCreate.vue'),
-      meta: { title: '新增电单车' }
+      component: () => import('@/views/apiManagement/index'),
+      name: '接口管理',
+      meta: { title: '接口管理' }
+    },
+    {
+      path: '/newWeb',
+      component: () => import('@/views/newWeb/index'),
+      // redirect: '/newWeb/index',
+      name: '发布管理',
+      meta: { title: '发布管理' }
     }
-    ]
-  },
-  {
-    path: '/newWeb',
-    component: () => import('@/views/newWeb/index'),
-    // redirect: '/newWeb/index',
-    name: '发布管理',
-    meta: { title: '发布管理' }
-  }
   ]
 },
 

src/views/apiManagement/css/index.css

@@ -0,0 +1,6 @@
+.Management .el-divider--horizontal {
+  display: block;
+  height: 1px;
+  width: 100%;
+  margin: 0;
+}

src/views/apiManagement/index.vue

@@ -0,0 +1,106 @@
+<template>
+  <el-container class="Management">
+    <el-aside style="padding: 10px 0px 10px 10px;background: #F2F3F6; color: #333B4A;border-radius: 4px;" :width="wids">
+      <div style="height: auto;background: #FFF;">
+        <div style="padding: 0 2%;text-align: right; cursor: pointer;font-size:14px; font-family:MicrosoftYaHei; color:rgba(111,124,147,1); line-height:35px;" @click="changeSwitch(swi_tch)">{{ swi_tch }}</div>
+        <div v-if="MenuOpen" style="text-align: center;font-size:14px; sfont-family:PingFangSC-Regular,PingFang SC; font-weight:400; color:rgba(111,124,147,1); line-height:35px;">A<br>P<br>I<br>分<br>组</div>
+        <el-menu
+          v-if="ElMenu"
+          default-active="2"
+          class="el-menu-vertical-demo"
+          @open="handleOpen"
+          @close="handleClose"
+        >
+          <el-submenu index="1">
+            <template slot="title">
+              <i class="el-icon-location" />
+              <span>导航一</span>
+            </template>
+            <el-menu-item-group>
+              <el-menu-item index="1-1">选项1</el-menu-item>
+              <el-menu-item index="1-2">选项2</el-menu-item>
+              <el-menu-item index="1-3">选项3</el-menu-item>
+            </el-menu-item-group>
+            <el-submenu index="1-4">
+              <template slot="title">选项4</template>
+              <el-menu-item index="1-4-1">选项1</el-menu-item>
+            </el-submenu>
+          </el-submenu>
+          <el-menu-item index="2">
+            <i class="el-icon-menu" />
+            <span slot="title">导航二</span>
+          </el-menu-item>
+          <el-menu-item index="3">
+            <i class="el-icon-document" />
+            <span slot="title">导航三</span>
+          </el-menu-item>
+        </el-menu>
+      </div>
+    </el-aside>
+    <el-main :height="screenWidth" style="padding: 10px;background: #F2F3F6; color: #333B4A;">
+      <div style="background: #FFF; padding: 0.5% 3%; border-radius: 4px;">
+        <div class="Layout">
+          <div class="titFont" style="padding: 15px 0; font-size: 22px; font-family:PingFangSC-Medium,PingFang SC;font-weight:500; color:rgba(51,59,74,1); line-height:35px;">API </div>
+          <el-input v-model="value" style="width: 25%;" size="small" prefix-icon="el-icon-search" clearable filterable placeholder="请搜索接口" />
+        </div>
+        <el-divider style="color: #EEF0F5; margin: 0 !important" />
+        <div style="font-size:18px; padding: 8% 0 1%; font-family:PingFangSC-Medium,PingFang SC; font-weight:500; color:rgba(51,59,74,1); line-height:35px;">API接口管理平台介绍及接入文档</div>
+        <div style="font-size:14px; width: 80%; font-family:PingFangSC-Regular,PingFang SC; font-weight:400; color:rgba(102,102,102,1); line-height:20px;">计划与EMC合作建设公司级反馈平台，覆盖所有内外部反馈，内部大区、客服等渠道反馈，专项工作组case反馈跟踪等场景，项目较大，处于立项阶段，期望收集更多信息和建议。</div>
+      </div>
+    </el-main>
+  </el-container>
+
+</template>
+
+<script>
+import '@/views/projectManage/bugList/css/index.css'
+import '@/views/apiManagement/css/index.css'
+
+export default {
+  data() {
+    return {
+      value: '',
+      swi_tch: '展开>>',
+      ElMenu: false,
+      MenuOpen: true,
+      wids: '60px',
+      screenWidth: ''
+    }
+  },
+  mounted() {
+    const that = this
+    window.onresize = () => {
+      return (() => {
+        window.screenWidth = document.body.clientWidth
+        that.screenWidth = window.screenWidth
+      })()
+    }
+  },
+  methods: {
+    handleOpen(key, keyPath) {
+      console.log(key, keyPath)
+    },
+    handleClose(key, keyPath) {
+      console.log(key, keyPath)
+    },
+    changeSwitch(e) {
+      if (e === '展开>>') {
+        this.swi_tch = '<<收起'
+        this.wids = '200px'
+        this.ElMenu = true
+        this.MenuOpen = false
+      }
+      if (e === '<<收起') {
+        this.swi_tch = '展开>>'
+        this.wids = '60px'
+        this.ElMenu = false
+        this.MenuOpen = true
+      }
+    }
+  }
+}
+</script>
+
+<style>
+
+</style>