接口管理增加接口类型部分

src/api/model/system/menu.ts

@@ -20,6 +20,7 @@ export interface MenuListRow {
 
 export interface ApiRow {
   id?: number; // ID
+  parentId?: number; // parentId
   menuIds: number[]; // 名称
   types: 1 | 2; // 1 分类 2接口
   name: string; // 名称

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

@@ -1,18 +1,34 @@
 <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-form-item label="选择类型" prop="types">
+        <el-radio-group v-model="formData.types">
+          <el-radio-button :label="2">接口</el-radio-button>
+          <el-radio-button :label="1">分类</el-radio-button>
+        </el-radio-group>
       </el-form-item>
-      <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>
-      <el-form-item label="状态" prop="status">
-        <el-switch v-model="formData.status" :active-value="1" :inactive-value="0" />
+      <el-form-item label="上级分类" prop="parentId">
+        <!-- <el-cascader :options="menuData" :props="{ checkStrictly: false,  multiple:  true,  emitPath: false, value: 'id', label: 'title' }" placeholder="请选择关联页面" clearable class="w100" v-model="formData.parentId"></el-cascader> -->
       </el-form-item>
+      <template v-if="formData.types===1">
+        <el-form-item label="分类名称" prop="name">
+          <el-input v-model="formData.name" placeholder="输入接口名称" />
+        </el-form-item>
+      </template>
+      <template v-else>
+        <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>
+        <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>
+      </template>
       <el-form-item label="备注" prop="remark">
         <el-input v-model="formData.remark" type="textarea" :rows="3" />
       </el-form-item>
@@ -35,13 +51,14 @@ import { ElMessage } from 'element-plus';
 
 const emit = defineEmits(['getList']);
 
-const showDialog = ref(false);
+const showDialog = ref(true);
 const formRef = ref();
 const menuData = ref<any[]>([]);
 
 const baseForm: ApiRow = {
   menuIds: [],
   id: undefined,
+  parentId: -1,
   name: '',
   types: 2,
   address: '',
@@ -54,6 +71,7 @@ const formData = reactive<ApiRow>({
 });
 
 const ruleForm = {
+  parentId: [ruleRequired('上级分类不能为空')],
   menuIds: [ruleRequired('关联页面不能为空')],
   name: [ruleRequired('接口名称不能为空')],
   address: [ruleRequired('接口地址不能为空')],