Browse Source

增加接口管理添加或修改的根节点必须是分类限制,分类添加可以是根节点

yanglzh 2 years ago
parent
commit
3382192196
1 changed files with 20 additions and 9 deletions
  1. 20 9
      src/views/system/api/component/edit.vue

+ 20 - 9
src/views/system/api/component/edit.vue

@@ -7,15 +7,22 @@
           <el-radio-button :label="1">分类</el-radio-button>
         </el-radio-group>
       </el-form-item>
-      <el-form-item label="上级分类" prop="parentId">
-        <el-cascader :options="typeData" :props="{ checkStrictly: true,  multiple:  false,  emitPath: false, value: 'id', label: 'name' }" placeholder="请选择关联页面" clearable class="w100" v-model="formData.parentId"></el-cascader>
-      </el-form-item>
       <template v-if="formData.types===1">
+        <el-form-item label="上级分类" prop="parentId">
+          <el-cascader :options="[{
+      id: -1,
+      name: '根节点',
+      children: typeData
+    }]" :props="{ checkStrictly: true,  multiple:  false,  emitPath: false, value: 'id', label: 'name' }" placeholder="请选择关联页面" clearable class="w100" v-model="formData.parentId"></el-cascader>
+        </el-form-item>
         <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="parentId">
+          <el-cascader :options="typeData" :props="{ checkStrictly: true,  multiple:  false,  emitPath: false, value: 'id', label: 'name' }" placeholder="请选择关联页面" clearable class="w100" v-model="formData.parentId"></el-cascader>
+        </el-form-item>
         <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>
@@ -43,7 +50,7 @@
 </template>
 
 <script lang="ts" setup>
-import { ref, reactive, nextTick } from 'vue';
+import { ref, reactive, nextTick, watch } from 'vue';
 import api from '/@/api/system';
 import { ApiRow } from '/@/api/model/system/menu';
 import { ruleRequired } from '/@/utils/validator';
@@ -71,6 +78,14 @@ const formData = reactive<ApiRow>({
   ...baseForm,
 });
 
+// 切换分类时清空上级分类的选择。因为接口里不能选择跟分类节点
+watch(
+  () => formData.types,
+  () => {
+    formData.parentId = undefined
+  },
+);
+
 const ruleForm = {
   parentId: [ruleRequired('上级分类不能为空', 'change')],
   menuIds: [ruleRequired('关联页面不能为空', 'change')],
@@ -105,11 +120,7 @@ const open = async (row: any) => {
   resetForm();
   showDialog.value = true;
   api.api.getList({ types: 1, status: -1, }).then((res: any) => {
-    typeData.value = [{
-      id: -1,
-      name: '主分类',
-      children: res.Info
-    }]
+    typeData.value = res.Info
   });
   nextTick(() => {
     Object.assign(formData, { ...row });