接口信息

src/api/getAotoInterface.js

@@ -68,3 +68,27 @@ export function interfaceDetailList(queryInfo) {
     params: queryInfo
   })
 }
+// 添加接的口接口
+export function addInterface(data) {
+  return request({
+    url: '/auto/interface/add',
+    method: 'post',
+    data
+  })
+}
+// 编辑接口的接口
+export function editInterface(data) {
+  return request({
+    url: '/auto/interface/modify',
+    method: 'post',
+    data
+  })
+}
+// 删除接口的接口
+export function delInterface(queryInfo) {
+  return request({
+    url: '/auto/interface/delete',
+    method: 'get',
+    params: queryInfo
+  })
+}

src/assets/css/global.css

@@ -17,3 +17,23 @@ html, body, #app {
 .jsoneditor-vue {
     height: 300px;
 }
+/* .el-collapse-item__header{
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-align: center;
+    -ms-flex-align: center;
+    align-items: center;
+    height: 48px;
+    line-height: 48px;
+    background-color: #FFF;
+    color: #303133;
+    cursor: pointer;
+    border-bottom: 1px solid #EBEEF5;
+    font-size: 13px;
+    font-weight: 500;
+    -webkit-transition: border-bottom-color .3s;
+    transition: border-bottom-color .3s;
+    outline: 0;
+    font-size: 15px;
+} */
\ No newline at end of file

src/main.js

@@ -40,7 +40,9 @@ import {
   Switch,
   RadioGroup,
   Radio,
-  MessageBox
+  MessageBox,
+  Row,
+  Col
 } from 'element-ui'
 
 Vue.config.productionTip = false
@@ -83,6 +85,8 @@ Vue.use(TabPane)
 Vue.use(Switch)
 Vue.use(RadioGroup)
 Vue.use(Radio)
+Vue.use(Row)
+Vue.use(Col)
 /* eslint-disable no-new */
 new Vue({
   el: '#app',

src/router/index.js

@@ -111,7 +111,7 @@ const router = new Router({
         },
         {
           path: '/auto/AddInterface',
-          name: '添加接口',
+          name: 'AddInterface',
           component: AddInterface
         },
         {

src/views/auto/InterfaceDetail.vue

@@ -3,11 +3,11 @@
     <el-card>
       <div>
         项目:
-        <el-select v-model="selectProjectId" placeholder="请选择项目" @change="selectChange">
+        <el-select v-model="selectProjectId" placeholder="请选择项目" @change="selectChange" clearable>
           <el-option v-for="item in projectList" :key="item.id" :label="item.name" :value="item.id"></el-option>
         </el-select>
         模块:
-        <el-select v-model="interfaceDetailForm.moduleId" placeholder="请选择模块">
+        <el-select v-model="selectModelId" placeholder="请选择模块" @change="selectChangeModel" clearable>
           <el-option v-for="item in modelList" :key="item.id" :label="item.name" :value="item.id"></el-option>
         </el-select>
         <el-input v-model="interfaceName" clearable placeholder="请输入接口名称" style="width: 300px;"></el-input>
@@ -16,17 +16,18 @@
       </div>
       <el-table :data="interfaceList" border style="width: 100%;margin-top:20px">
         <el-table-column type='index' width="50px"></el-table-column>
-        <el-table-column prop="name" label="接口名称" width="200px"></el-table-column>
+        <el-table-column prop="name" label="接口名称" width="150px"></el-table-column>
+        <el-table-column prop="projectName" label="所属项目" width="150px"></el-table-column>
         <el-table-column prop="moduleName" label="所属模块" width="200px"></el-table-column>
         <el-table-column prop="url" label="接口路径" width="300px"></el-table-column>
-        <el-table-column prop="method" label="请求方式" width="100px"></el-table-column>
-        <el-table-column prop="paramType" label="参数类型" width="100px"></el-table-column>
+        <el-table-column prop="method" label="请求方式" width="70px"></el-table-column>
+        <el-table-column prop="paramType" label="参数类型" width="80px"></el-table-column>
         <el-table-column prop="createTime" label="创建时间" width="200px"></el-table-column>
         <el-table-column prop="updateTime" label="修改时间" width="200px"></el-table-column>
         <el-table-column label="操作">
           <slot slot-scope="scope">
-            <el-button type="success" @click="openEditDialog(scope.row)">编辑</el-button>
-            <el-button type="danger" @click="delModelFrom(scope.row)">删除</el-button>
+            <el-button type="success" @click="editInterfaceFrom(scope.row)">编辑</el-button>
+            <el-button type="danger" @click="delInterfaceFrom(scope.row)">删除</el-button>
           </slot>
         </el-table-column>
       </el-table>
@@ -40,7 +41,8 @@
 import {
   getModulList,
   getProjectList,
-  interfaceDetailList
+  interfaceDetailList,
+  delInterface
 } from '@/api/getAotoInterface'
 export default {
   data() {
@@ -48,16 +50,22 @@ export default {
       queryModuleInfo: {
         pageNum: 1,
         pageSize: 10,
-        projectId: ''
+        projectId: '',
+        moduleId: ''
       },
       totalNum: 0,
       projectList: [],
       modelList: [],
       // 下来项目id
       selectProjectId: '',
+      // 下拉模块id
+      selectModelId: '',
       interfaceName: '',
       interfaceList: [],
-      interfaceDetailForm: {}
+      interfaceDetailForm: {},
+      delInterfaceParam: {
+        interfaceId: ''
+      }
     }
   },
   created() {
@@ -79,8 +87,14 @@ export default {
         this.modelList = resp.data.data.list
       })
     },
+    // 模块下拉框改变事件
+    selectChangeModel() {
+      this.queryModuleInfo.moduleId = this.selectModelId
+    },
     // 查询方法
-    queryData() {},
+    queryData() {
+      this.getInterfaceDetailList()
+    },
     // 添加跳转页面
     addPage() {
       this.$router.push('AddInterface')
@@ -89,6 +103,7 @@ export default {
     getInterfaceDetailList() {
       interfaceDetailList(this.queryModuleInfo).then((resp) => {
         this.interfaceList = resp.data.data.list
+        this.totalNum = resp.data.data.total
       })
     },
     handleSizeChange(newSize) {
@@ -98,6 +113,48 @@ export default {
     handleCurrentChange(newPage) {
       this.queryModuleInfo.pageNum = newPage
       this.getInterfaceDetailList()
+    },
+    // 编辑接口方法
+    editInterfaceFrom(row) {
+      console.log('编辑按钮')
+      this.$router.push({
+        path: 'AddInterface',
+        name: 'AddInterface',
+        params: {
+          row: row
+        }
+      })
+    },
+    // 对话框方法
+    openMessage(message, confirmText, doit) {
+      this.$messageBox
+        .confirm(message, '确定', {
+          cancelButtonText: '取消',
+          confirmButtonText: confirmText,
+          type: 'warning'
+        })
+        .then(() => {
+          doit()
+        })
+        .catch(() => {})
+    },
+    // 删除接口方法
+    delInterfaceFrom(row) {
+      this.delInterfaceParam.interfaceId = row.id
+      this.openMessage('您确定要删除吗？', '删除', () => {
+        delInterface(this.delInterfaceParam)
+          .then((resp) => {
+            if (resp.data.data === true) {
+              this.$message.success('删除成功！')
+              this.getInterfaceDetailList()
+            } else if (resp.data.data === false) {
+              this.$message.error(resp.data.msg)
+            }
+          })
+          .catch((error) => {
+            this.$message({ type: 'error', message: error })
+          })
+      })
     }
   }
 }

src/views/layout/Home.vue

@@ -10,10 +10,7 @@
       <el-main>
         <AsideTitle></AsideTitle>
         <!--页面的展示-->
-        <transition
-          name="compAnimate"
-          appear
-        >
+        <transition name="compAnimate" appear>
           <keep-alive>
             <router-view :style="{marginTop: '55px'}"></router-view>
           </keep-alive>
@@ -22,7 +19,6 @@
     </el-container>
   </el-container>
 </template>
-
 <script>
 import Aside from './leftAside/Aside'
 import Header from './rightMain/Header'

src/views/layout/leftAside/menu.json

@@ -107,7 +107,7 @@
         },
         {
           "id": 3,
-          "title": "接口详情",
+          "title": "接口列表",
           "icon": "el-icon-bank-card",
           "path": "/auto/InterfaceDetail"
         }