api 增加 GET PUT DELETE POST 四种可选声明方式

QMPlusVuePage/src/view/superAdmin/api/api.vue

@@ -1,25 +1,32 @@
 <template>
   <div>
-    <div class="button-box clearflex">
-    </div>
-        <div class="search-term">
+    <div class="button-box clearflex"></div>
+    <div class="search-term">
       <el-form :inline="true" :model="searchInfo" class="demo-form-inline">
-  <el-form-item label="路径">
-    <el-input v-model="searchInfo.path" placeholder="路径"></el-input>
-  </el-form-item>
-  <el-form-item>
-    <el-button type="primary" @click="onSubmit">查询</el-button>
-  </el-form-item>
-   <el-form-item >
-      <el-button @click="openDialog('addApi')" type="primary">新增api</el-button>
-  </el-form-item>
-</el-form>
-  </div>
+        <el-form-item label="路径">
+          <el-input placeholder="路径" v-model="searchInfo.path"></el-input>
+        </el-form-item>
+        <el-form-item>
+          <el-button @click="onSubmit" type="primary">查询</el-button>
+        </el-form-item>
+        <el-form-item>
+          <el-button @click="openDialog('addApi')" type="primary">新增api</el-button>
+        </el-form-item>
+      </el-form>
+    </div>
     <el-table :data="tableData" border stripe>
       <el-table-column label="id" min-width="60" prop="ID"></el-table-column>
       <el-table-column label="api路径" min-width="150" prop="path"></el-table-column>
       <el-table-column label="api分组" min-width="150" prop="group"></el-table-column>
       <el-table-column label="api简介" min-width="150" prop="description"></el-table-column>
+      <el-table-column label="请求" min-width="150" prop="method">
+        <template slot-scope="scope">
+          <div>
+            {{scope.row.method|methodFiletr}}
+          </div>
+        </template>
+      </el-table-column>
+      
       <el-table-column fixed="right" label="操作" width="200">
         <template slot-scope="scope">
           <el-button @click="editApi(scope.row)" size="small" type="text">编辑</el-button>
@@ -38,11 +45,21 @@
       layout="total, sizes, prev, pager, next, jumper"
     ></el-pagination>
 
-    <el-dialog :visible.sync="dialogFormVisible" title="新增Api">
+    <el-dialog :before-close="closeDialog" :visible.sync="dialogFormVisible" title="新增Api">
       <el-form :inline="true" :model="form" label-width="80px">
         <el-form-item label="路径">
           <el-input autocomplete="off" v-model="form.path"></el-input>
         </el-form-item>
+        <el-form-item label="请求">
+          <el-select placeholder="请选择" v-model="form.method">
+            <el-option
+              :key="item.value"
+              :label="`${item.label}(${item.value})`"
+              :value="item.value"
+              v-for="item in methodOptions"
+            ></el-option>
+          </el-select>
+        </el-form-item>
         <el-form-item label="api分组">
           <el-input autocomplete="off" v-model="form.group"></el-input>
         </el-form-item>
@@ -71,6 +88,25 @@ import {
 } from '@/api/api'
 import infoList from '@/components/mixins/infoList'
 
+const methodOptions =[
+        {
+          value: 'POST',
+          label: '创建'
+        },
+        {
+          value: 'GET',
+          label: '查看'
+        },
+        {
+          value: 'PUT',
+          label: '更新'
+        },
+        {
+          value: 'DELETE',
+          label: '删除'
+        }
+      ]
+
 export default {
   name: 'Api',
   mixins: [infoList],
@@ -84,13 +120,14 @@ export default {
         group: '',
         description: ''
       },
+      methodOptions: methodOptions,
       type: ''
     }
   },
   methods: {
     //条件搜索前端看此方法
-    onSubmit(){
-      this.page = 1 
+    onSubmit() {
+      this.page = 1
       this.pageSize = 10
       this.getTableData()
     },
@@ -98,7 +135,8 @@ export default {
       this.form = {
         path: '',
         group: '',
-        description: ''
+        description: '',
+        method:''
       }
     },
     closeDialog() {
@@ -179,6 +217,12 @@ export default {
           break
       }
     }
+  },
+  filters:{
+    methodFiletr(value){
+      const target = methodOptions.filter(item=>item.value === value)[0]
+      return `${target.label}(${target.value})`
+    }
   }
 }
 </script>