级联选择器修改

src/layout/loginPage.vue

@@ -82,8 +82,9 @@
                     <div style="padding-right: 10px; color: #2592a1">班级</div>
                   </div>
                   <div class="right">
-                    <el-cascader placeholder="请选择所属班级" :props="props" style="width: 142%; height: 0.2344rem"
-                      v-model="formModel.clssid" @change="handleChange" />
+                    <el-cascader ref="cascader" placeholder="请选择所属班级" :props="props"
+                      style="width: 142%; height: 0.2344rem" v-model="formModel.clssid" @change="handleChange"
+                      :show-all-levels="false" />
                   </div>
                 </div>
               </el-form-item>
@@ -252,10 +253,10 @@
 <script setup lang="ts">
 // import { ref } from "vue"
 // import { onMounted, reactive, ref, toRefs, watch } from "vue";
-import { ElMessage} from 'element-plus'
+import { ElMessage } from 'element-plus'
 import settingStore from "@/store/modules/setting";
 import { User, Lock, Avatar, Stamp, Grid, Iphone } from "@element-plus/icons-vue";
-import { ref,onMounted} from "vue";
+import { ref, onMounted } from "vue";
 import userStore from "@/store/modules/user";
 import { getCode, sturegister, getFaculties } from '@/api/user'
 import { useRouter } from "vue-router";
@@ -281,7 +282,24 @@ const FacultiesList = ref([])
 const getFacultiesList = async (data: any) => {
   const res: any = await getFaculties(data)
   console.log(res, 'res11')
-  FacultiesList.value = res.result
+  if (data.primaryType == 3){
+    FacultiesList.value = res.result.map((res:any) => {
+      return {
+        value: res.id,
+        label: res.name,
+        isLeaf: true
+      }
+    })
+  }else{
+    FacultiesList.value = res.result.map((res: any) => {
+      return {
+        value: res.id,
+        label: res.name,
+        isLeaf: false
+      }
+    })
+  }
+  
 }
 const deepValues = ref([])
 // 配置部门级联选择器
@@ -289,6 +307,7 @@ const props = {
   lazy: true,
   checkStrictly: true,
   emitPath: false,
+  isLeaf: 'isLeaf',
   async lazyLoad(node: any, resolve: any) {
     console.log(node);
     deepValues.value = node.pathValues
@@ -296,17 +315,32 @@ const props = {
       primaryType: node.level + 1,
       pid: node.value,
     })
-    const nodes = FacultiesList.value.map((item: any) => ({
-      value: item.id,
-      label: item.name,
-    }))
+    const nodes = FacultiesList.value.map((item: any) => {
+      if (!item.isLeaf) {
+        return {
+          value: item.value,
+          label: item.label,
+          isLeaf: item.isLeaf,
+          disabled:true
+        }
+      } else {
+        return {
+          value: item.value,
+          label: item.label,
+          isLeaf: item.isLeaf
+        }
+      }
+    })
+    console.log(nodes,'nodes');
+    
     resolve(nodes)
   },
 }
-
+const cascader = ref(null)
 const handleChange = (e: any) => {
   console.log(e);
   formModel.value.clssid = e
+  cascader.value.togglePopperVisible()
 }
 
 
@@ -399,16 +433,16 @@ const register = async () => {
     }
     ElMessage.success(`注册成功`)
     isRegister.value = false
-    
+
 
   } catch (error) {
     console.log(error);
-    
+
     getcodeinfo()
 
   }
-    
-    // getcodeinfo()
+
+  // getcodeinfo()
 };
 const codeUrl = ref("");
 const getcodeinfo = async () => {
@@ -441,10 +475,10 @@ const toLogin = () => {
   getcodeinfo();
 }
 
-const clickErrorBtn=()=>{
+const clickErrorBtn = () => {
   console.log('aaa');
 }
-onMounted(()=>{
+onMounted(() => {
   getcodeinfo();
 })
 </script>
@@ -481,26 +515,28 @@ onMounted(()=>{
     align-items: center;
     height: 1000px;
     min-height: 100vh;
+
     // margin: 0;
-    .middle-content{
-    position: relative;
+    .middle-content {
+      position: relative;
       width: 60%;
-      height:80%;
+      height: 80%;
       display: flex;
-        justify-content: center;
-        align-items: center;
+      justify-content: center;
+      align-items: center;
       // background-color: pink;
       background: url("../assets/images/login.png") no-repeat;
       background-position: 59% -7px;
       background-size: 75% auto;
     }
-    .errorBtn{
+
+    .errorBtn {
       position: absolute;
       top: 30px;
       right: 122px;
       width: 50px;
-        height: 50px;
-        background-color: transparent;
+      height: 50px;
+      background-color: transparent;
       clip-path: polygon(100% 0, 0 0, 100% 100%);
       cursor: pointer;
     }
@@ -555,7 +591,7 @@ onMounted(()=>{
 .el-input {
   width: 300px;
   height: 36px;
-  
+
 }
 
 :deep(.el-form-item__error) {