api

src/router/index.js

@@ -643,7 +643,7 @@ export const constantRoutes = [{
   },
   {
     path: '/apiManagement',
-    hidden: true,
+    // hidden: true,
     component: () =>
           import('@/views/apiManagement/index'),
     name: '接口管理',

src/views/apiManagement/index.vue

@@ -1,53 +1,40 @@
 <template>
-  <el-container class="Management">
-    <el-aside style="padding: 10px 0px 10px 10px;background: #F2F3F6; color: #333B4A;" :width="wids">
-      <div :style="{height: (fullHeight - 100) + 'px'}" style="background: #FFF;border-radius: 4px;">
-        <div style="padding: 2%;text-align: right; cursor: pointer;font-size:14px; font-family:MicrosoftYaHei; color:rgba(111,124,147,1); line-height:35px;" />
-        <div style="padding: 10px 0px 10px 10px;text-align: center" align="center">
-          <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
-            <el-tab-pane label="接口列表" name="first">
-              <div style="margin-left:-5%">
-                <el-input v-model="value" style="width: 55%;" size="mini" prefix-icon="el-icon-search" clearable filterable placeholder="请搜索接口" />
-                <el-button style="margin-left:4%" type="primary" size="mini" @click="addPort()">添加接口</el-button>
-              </div>
-              <el-tree
-                ref="tree"
-                class="filter-tree"
-                :data="treeData"
-                :props="defaultProps"
-                default-expand-all
-                :filter-node-method="filterNode"
-                :node-click="cli_Choice()"
-              >
-                <span slot-scope="{ node, data }" class="custom-tree-node">
-                  <el-tooltip class="item" effect="dark" content="Top Center 提示文字" placement="top">
-                    <span :id="'tree-item'+data.id">{{ node.label }}</span>
-                  </el-tooltip>
-
-                  <span>
-                    <el-input
-                      v-show="data.editShow"
-                      v-model="data.label"
-                      size="mini"
-                      @change="editSuccess(node, data)"
-                    />
-                    <el-button
-                      type="text"
-                      size="mini"
-                      @click.stop="editTree(node, data)"
-                    >
-                      editTree
-                    </el-button>
-                  </span>
-                </span></el-tree>
-            </el-tab-pane>
-            <el-tab-pane label="接口分类" name="second">
-              <div style="margin-left:-5%">
-                <el-input v-model="value" style="width: 55%;" size="mini" prefix-icon="el-icon-search" clearable filterable placeholder="请搜索接口" />
-                <el-button style="margin-left:4%" type="primary" size="mini" @click="addType()">添加分类</el-button>
-              </div>
-            </el-tab-pane>
-          </el-tabs>
+  <el-container>
+    <el-aside class="ApiLeft">
+      <div class="ApiContent">
+        <div class="Api_space_evenly">
+          <div :class="{'Api_Interface_list' : Interface_list === '接口列表'}" class="Api_cursor" @click="InterfaceLeft('接口列表')">接口列表</div>
+          <div :class="{'Api_Interface_list' : Interface_list === '接口分类'}" class="Api_cursor" @click="InterfaceLeft('接口分类')">接口分类</div>
+        </div>
+        <div class="Api_search">
+          <el-input v-model="value" style="width: 55%;" size="mini" prefix-icon="el-icon-search" clearable filterable placeholder="请搜索接口" />
+          <el-button v-if="Interface_list === '接口列表'" style="margin-left:4%" type="primary" size="mini" @click="addPort()">查询</el-button>
+          <el-button v-if="Interface_list === '接口分类'" style="margin-left:4%" type="primary" size="mini" @click="addPort()">添加分类</el-button>
+        </div>
+        <div>
+          <el-tree
+            :data="data1"
+            node-key="id"
+            empty-text="无相关接口，请确定搜索内容"
+            default-expand-all
+            :default-expanded-keys="key_arr"
+            :expand-on-click-node="false"
+          >
+            <span slot-scope="{ node, data }" class="custom-tree-node" @mouseenter="mouseenter(data)" @mouseleave="mouseleave(data)">
+              <span>{{ node.label }}</span>
+              <span v-show="data.del">
+                <el-tooltip class="item" effect="dark" content="添加接口" placement="top">
+                  <span v-if="Interface_list === '接口分类'" class="el-icon-plus Api_btn" @click="() => append(data)" />
+                </el-tooltip>
+                <el-tooltip class="item" effect="dark" content="修改接口" placement="top">
+                  <span v-if="Interface_list === '接口分类'" class="el-icon-edit Api_btn" @click="() => dblclick(data)" />
+                </el-tooltip>
+                <el-tooltip class="item" effect="dark" content="删除接口" placement="top">
+                  <span v-if="Interface_list === '接口分类'" class="el-icon-delete Api_btn" @click="() => remove(data)" />
+                </el-tooltip>
+              </span>
+            </span>
+          </el-tree>
         </div>
         <div align="center" style="margin: 2% 0 10%;"><el-input v-if="ElMenu" v-model="value" style="width: 90%;" size="mini" prefix-icon="el-icon-search" clearable filterable placeholder="请搜索接口" /></div>
         <!--添加接口-->
@@ -85,62 +72,11 @@
           </div>
           <div style="margin-top:5%" />
         </el-dialog>
-        <!--添加分类-->
-        <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogAddTypeVisible" width="40%">
-          <div style="margin-left:60px">
-            <el-form ref="addDeviceForms" :rules="addDeviceDataRules" :model="addDeviceData">
-              <el-form-item label="分类名" prop="lockModel" label-width="80px">
-                <el-input v-model="addDeviceData.lockModel" size="small" clearable style="width:75%;" placeholder="请填写" />
-              </el-form-item>
-              <el-form-item label="备注" label-width="80px">
-                <el-input v-model="addDeviceData.deviceNum" size="small" clearable style="width:75%;" placeholder="请填写" />
-              </el-form-item>
-            </el-form>
-          </div>
-          <div slot="footer" class="dialog-footer">
-            <el-button size="small" @click="dialogAddTypeVisible = false">取消</el-button>
-            <el-button size="small" type="primary">确定</el-button>
-          </div>
-          <div style="margin-top:3%" />
-        </el-dialog>
-
-        <!-- <div v-if="MenuOpen" style="margin-top: 100%;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" @click="cli_Choice">选项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 style="padding: 10px;background: #F2F3F6; color: #333B4A;">
-      <div v-show="home" :style="{height: (fullHeight - 100) + 'px'}" class="aaaa">
+    <el-main class="ApiRight">
+      <div v-show="home" class="ApiRightContent">
         <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="请搜索接口" />
@@ -149,12 +85,29 @@
         <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>
-      <div v-show="Details" :style="{height: (fullHeight - 100) + 'px'}" class="aaaa">
-        <div :style="{height: (fullHeight - 105) + 'px'}" style=" overflow:scroll; overflow-x: hidden">
+      <div v-show="Details" class="ApiRight">
+        <div class="ApiRightContent" style=" overflow:scroll; overflow-x: hidden">
           <apiDetails ref="Q_details" />
         </div>
       </div>
     </el-main>
+    <!-- 新建节点 -->
+    <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogAddTypeVisible" width="40%">
+      <div style="margin-left:60px">
+        <el-form ref="addDeviceForms" :rules="addDeviceDataRules" :model="addDeviceData">
+          <el-form-item label="分类名" prop="lockModel" label-width="80px">
+            <el-input v-model="addDeviceData.lockModel" size="small" clearable style="width:75%;" placeholder="请填写" />
+          </el-form-item>
+          <el-form-item label="备注" label-width="80px">
+            <el-input v-model="addDeviceData.deviceNum" size="small" clearable style="width:75%;" placeholder="请填写" />
+          </el-form-item>
+        </el-form>
+      </div>
+      <div slot="footer" class="dialog-footer">
+        <el-button size="small" @click="dialogAddTypeVisible = false">取消</el-button>
+        <el-button size="small" type="primary">确定</el-button>
+      </div>
+    </el-dialog>
   </el-container>
 
 </template>
@@ -169,13 +122,50 @@ export default {
     apiDetails
   },
   data() {
+    var data1 = [{
+      id: 1,
+      label: '一级 1',
+      children: [{
+        id: 4,
+        label: '二级 1-1',
+        children: [{
+          id: 9,
+          label: '三级 1-1-1'
+        }, {
+          id: 10,
+          label: '三级 1-1-2'
+        }]
+      }]
+    }, {
+      id: 2,
+      label: '一级 2',
+      children: [{
+        id: 5,
+        label: '二级 2-1'
+      }, {
+        id: 6,
+        label: '二级 2-2'
+      }]
+    }, {
+      id: 3,
+      label: '一级 3',
+      children: [{
+        id: 7,
+        label: '二级 3-1'
+      }, {
+        id: 8,
+        label: '二级 3-2'
+      }]
+    }]
     return {
+      id: '',
+      label: '',
+      key_arr: [],
+      node_Name: {},
+      Interface_list: '接口列表',
+      data1: JSON.parse(JSON.stringify(data1)),
       fullHeight: document.documentElement.clientHeight,
       value: '',
-      swi_tch: '展开>>',
-      ElMenu: false,
-      MenuOpen: true,
-      wids: '300px',
       screenWidth: '',
       Details: false,
       home: true,
@@ -196,42 +186,6 @@ export default {
         bikeSupplier: [{ required: true, message: '车辆供应商不能为空', trigger: 'change' }]
 
       },
-      treeData: [{
-        id: 1,
-        label: '一级 1',
-        editShow: false,
-        children: [{
-          id: 4,
-          label: '二级 1-1',
-          children: [{
-            id: 9,
-            label: '三级 1-1-1'
-          }, {
-            id: 10,
-            label: '三级 1-1-2'
-          }]
-        }]
-      }, {
-        id: 2,
-        label: '一级 2',
-        children: [{
-          id: 5,
-          label: '二级 2-1'
-        }, {
-          id: 6,
-          label: '二级 2-2'
-        }]
-      }, {
-        id: 3,
-        label: '一级 3',
-        children: [{
-          id: 7,
-          label: '二级 3-1'
-        }, {
-          id: 8,
-          label: '二级 3-2'
-        }]
-      }],
       defaultProps: {
         children: 'children',
         label: 'label'
@@ -250,33 +204,39 @@ export default {
     console.log(this.fullHeight, 'DSCDSC')
   },
   methods: {
-    handleOpen(key, keyPath) {
-      console.log(key, keyPath)
+    InterfaceLeft(vel) {
+      vel === '接口分类' ? this.Interface_list = '接口分类' : this.Interface_list = '接口列表'
     },
-    handleClose(key, keyPath) {
-      console.log(key, keyPath)
+    append(data) { // 添加节点
+      this.dialogAddTypeVisible = true
+      this.dialogStatus = 'addType'
     },
-    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
-      }
+    mouseenter(data) { // 导航栏显示新建/删除/编辑
+      console.log(data, '划入')
+      this.$set(data, 'del', true)
+    },
+    mouseleave(data) { // 导航栏隐藏新建/删除/编辑
+      this.$set(data, 'del', false)
+    },
+
+    // 删除
+    remove(node, data) {
+      this.$confirm('是否确认删除', '确认信息', {
+        distinguishCancelAndClose: true,
+        confirmButtonText: '确定',
+        cancelButtonText: '取消'
+      })
+        .then(() => {
+          // 在这里掉删除接口
+        })
+        .catch(action => {
+          this.$message({ type: 'success', message: '已取消' })
+        })
     },
     cli_Choice() {
       this.Details = true
       this.home = false
     },
-    handleClick(tab, event) {
-      console.log(tab, event)
-    },
     addPort() {
       this.dialogAddPortVisible = true
       this.dialogStatus = 'addPort'
@@ -297,8 +257,64 @@ export default {
 }
 </script>
 
-<style>
-.aaaa {
-  background: #FFF; padding: 0.5% 3%; border-radius: 4px;
-}
+<style lang="scss" scoped>
+  .ApiLeft {
+    padding: 10px 0px 10px 10px;
+    background: #F2F3F6;
+    color: #333B4A;
+    min-height: calc(100vh - 65px);
+    .ApiContent {
+      padding: 10px 0px 10px 10px;
+      text-align: center;
+      background: #FFF;
+      border-radius: 4px;
+      min-height: calc(100vh - 75px);
+    }
+    .Api_search {
+      margin: 10px 0;
+    }
+    .Api_btn {
+      margin: 0 5px;
+      cursor: pointer;
+    }
+    .Api_btn:hover {
+      color: #409EFF;
+    }
+  }
+  .ApiRight {
+    padding: 10px;
+    background: #F2F3F6;
+    color: #333B4A;
+    min-height: calc(100vh - 65px);
+    .ApiRightContent {
+      background: #FFF;
+      min-height: calc(100vh - 75px);
+      padding: 0.5% 3%;
+      border-radius: 4px;
+    }
+  }
+  .custom-tree-node {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    font-size: 14px;
+    padding-right: 8px;
+  }
+
+  .Api_space_evenly {  // 布局
+    display: flex;
+    align-items: center;
+    justify-content: space-evenly;
+  }
+
+  .Api_Interface_list { // 接口列表和接口分类按钮颜色
+    color: #409EFF;
+    border-bottom: 2px solid #409EFF;
+    padding-bottom: 3px;
+  }
+
+  .Api_cursor { // 小手
+    cursor: pointer;
+  }
 </style>