API增删改查忘词嗯

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

@@ -1,12 +1,12 @@
 <template>
   <div>
     <div class="button-box clearflex">
-      <el-button @click="addApi" type="primary">新增api</el-button>
+      <el-button @click="openDialog('addApi')" type="primary">新增api</el-button>
     </div>
     <el-table :data="tableData" border stripe>
-      <el-table-column label="id" min-width="180" prop="ID"></el-table-column>
-      <el-table-column label="api路径" min-width="180" prop="path"></el-table-column>
-      <el-table-column label="api简介" min-width="180" prop="description"></el-table-column>
+      <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="description"></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>
@@ -25,6 +25,21 @@
       hide-on-single-page
       layout="total, sizes, prev, pager, next, jumper"
     ></el-pagination>
+
+    <el-dialog :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-input autocomplete="off" v-model="form.description"></el-input>
+        </el-form-item>
+      </el-form>
+      <div class="dialog-footer" slot="footer">
+        <el-button @click="closeDialog">取 消</el-button>
+        <el-button @click="enterDialog" type="primary">确 定</el-button>
+      </div>
+    </el-dialog>
   </div>
 </template>
 
@@ -32,23 +47,90 @@
 <script>
 // 获取列表内容封装在mixins内部  getTableData方法 初始化已封装完成
 
-import { getApiList } from '@/api/api'
+import { getApiById, getApiList, createApi, updataApi } from '@/api/api'
 import infoList from '@/view/superAdmin/mixins/infoList'
 
 export default {
   name: 'Api',
-  mixins:[infoList],
+  mixins: [infoList],
   data() {
     return {
       listApi: getApiList,
-      listKey:'list'
+      listKey: 'list',
+      dialogFormVisible: false,
+      form: {
+        path: '',
+        description: ''
+      },
+      type: ''
     }
   },
   methods: {
+    initForm() {
+      this.form = {
+        path: '',
+        description: ''
+      }
+    },
+    closeDialog() {
+      this.initForm()
+      this.dialogFormVisible = false
+    },
+    openDialog(type) {
+      this.type = type
+      this.dialogFormVisible = true
+    },
+    addApi() {
+      createApi()
+    },
+    async editApi(row) {
+      const res = await getApiById({ id: row.ID })
+      this.form = res.data.api
+      this.openDialog('edit')
+    },
+    deleteApi() {},
+    async enterDialog() {
+      switch (this.type) {
+        case 'addApi':
+          {
+            const res = await createApi(this.form)
+            if (res.success) {
+              this.$message({
+                type: 'success',
+                message: '添加成功',
+                showClose: true
+              })
+            }
+            this.getTableData()
+            this.closeDialog()
+          }
 
-    addApi() {},
-    editApi() {},
-    deleteApi() {}
+          break
+        case 'edit':
+          {
+            const res = await updataApi(this.form)
+            if (res.success) {
+              this.$message({
+                type: 'success',
+                message: '添加成功',
+                showClose: true
+              })
+            }
+            this.getTableData()
+            this.closeDialog()
+          }
+          break
+        default:
+          {
+            this.$message({
+              type: 'error',
+              message: '未知操作',
+              showClose: true
+            })
+          }
+          break
+      }
+    }
   },
   created() {
     this.getTableData()