修复接口列表显示

src/api/model/system/menu.ts

@@ -21,6 +21,7 @@ export interface MenuListRow {
 export interface ApiRow {
   id?: number; // ID
   menuIds: number[]; // 名称
+  types: 1 | 2; // 1 分类 2接口
   name: string; // 名称
   address: string; // 接口地址
   remark: string; // 备注

src/api/system/index.ts

@@ -9,7 +9,7 @@ export default {
     logout: () => post('/loginOut'),
   },
   api: {
-    getList: (params?: object) => get('/system/api/list', params),
+    getList: (params?: object) => get('/system/api/tree', params),
     getAll: () => get('/system/api/GetAll'),
     detail: (id: number) => get('/system/api/detail', { id }),
     add: (data: object) => post('/system/api/add', data),

src/views/system/api/component/edit.vue

@@ -1,77 +1,26 @@
 <template>
-  <el-dialog
-    class="api-edit"
-    v-model="showDialog"
-    :title="`${formData.id  ?  '编辑接口'  :  '新增接口'}`"
-    width="600px"
-    :close-on-click-modal="false"
-    :close-on-press-escape="false"
-  >
-    <el-form
-      ref="formRef"
-      :model="formData"
-      :rules="ruleForm"
-      label-width="80px"
-    >
-      <el-form-item
-        label="关联页面"
-        prop="menuIds"
-      >
-        <el-cascader
-          :options="menuData"
-          :props="{ checkStrictly: false,  multiple:  true,  emitPath: false, value: 'id', label: 'title' }"
-          placeholder="请选择关联页面"
-          clearable
-          class="w100"
-          v-model="formData.menuIds"
-        ></el-cascader>
+  <el-dialog class="api-edit" v-model="showDialog" :title="`${formData.id  ?  '编辑接口'  :  '新增接口'}`" width="600px" :close-on-click-modal="false" :close-on-press-escape="false">
+    <el-form ref="formRef" :model="formData" :rules="ruleForm" label-width="80px">
+      <el-form-item label="关联页面" prop="menuIds">
+        <el-cascader :options="menuData" :props="{ checkStrictly: false,  multiple:  true,  emitPath: false, value: 'id', label: 'title' }" placeholder="请选择关联页面" clearable class="w100" v-model="formData.menuIds"></el-cascader>
       </el-form-item>
-      <el-form-item
-        label="接口名称"
-        prop="name"
-      >
-        <el-input
-          v-model="formData.name"
-          placeholder="输入接口名称"
-        />
+      <el-form-item label="接口名称" prop="name">
+        <el-input v-model="formData.name" placeholder="输入接口名称" />
       </el-form-item>
-      <el-form-item
-        label="接口地址"
-        prop="address"
-      >
-        <el-input
-          v-model="formData.address"
-          placeholder="接口地址"
-        />
+      <el-form-item label="接口地址" prop="address">
+        <el-input v-model="formData.address" placeholder="接口地址" />
       </el-form-item>
-      <el-form-item
-        label="状态"
-        prop="status"
-      >
-        <el-switch
-          v-model="formData.status"
-          :active-value="1"
-          :inactive-value="0"
-        />
+      <el-form-item label="状态" prop="status">
+        <el-switch v-model="formData.status" :active-value="1" :inactive-value="0" />
       </el-form-item>
-      <el-form-item
-        label="备注"
-        prop="remark"
-      >
-        <el-input
-          v-model="formData.remark"
-          type="textarea"
-          :rows="3"
-        />
+      <el-form-item label="备注" prop="remark">
+        <el-input v-model="formData.remark" type="textarea" :rows="3" />
       </el-form-item>
     </el-form>
     <template #footer>
       <div class="dialog-footer">
         <el-button @click="showDialog = false">取消</el-button>
-        <el-button
-          type="primary"
-          @click="onSubmit"
-        >确定</el-button>
+        <el-button type="primary" @click="onSubmit">确定</el-button>
       </div>
     </template>
   </el-dialog>
@@ -94,6 +43,7 @@ const baseForm: ApiRow = {
   menuIds: [],
   id: undefined,
   name: '',
+  types: 2,
   address: '',
   remark: '',
   status: 1,

src/views/system/api/index.vue

@@ -32,7 +32,7 @@
           </el-form-item>
         </el-form>
       </div>
-      <el-table :data="tableData" style="width: 100%" v-loading="loading">
+      <el-table :data="tableData" style="width: 100%" v-loading="loading" row-key="id" :tree-props="{ children: 'children', hasChildren: 'hasChildren' }">
         <el-table-column type="index" label="序号" width="60" align="center" />
         <el-table-column prop="name" v-col="'name'" label="接口名称" show-overflow-tooltip></el-table-column>
         <el-table-column prop="address" v-col="'address'" label="接口地址" show-overflow-tooltip></el-table-column>
@@ -44,8 +44,10 @@
         </el-table-column>
         <el-table-column label="操作" width="100" align="center" v-col="'handle'">
           <template #default="scope">
-            <el-button size="small" text type="warning" @click="addOrEdit(scope.row)" v-auth="'edit'">修改</el-button>
-            <el-button size="small" text type="danger" @click="onDel(scope.row)" v-auth="'del'">删除</el-button>
+            <template v-if="scope.row.types===2">
+              <el-button size="small" text type="warning" @click="addOrEdit(scope.row)" v-auth="'edit'">修改</el-button>
+              <el-button size="small" text type="danger" @click="onDel(scope.row)" v-auth="'del'">删除</el-button>
+            </template>
           </template>
         </el-table-column>
       </el-table>