src/renderer/src/views/profile/components/selectClass.vue

@@ -1,50 +1,59 @@
 <template>
-    <div style="display: flex;">
+    <div>
+        <div style="display: flex;align-items: center;" v-if="!showSelect">
             <div style="margin-left: 15px">
-            <el-dropdown @command="handleUserEduStage">
                 <span class="el-dropdown-link">
-                <el-button class="custom-button" type="default" round >{{ userStore.edustage }}
+                    <el-button class="custom-button" type="default" round>{{ userStore.edustage }}
-                    <el-icon><ArrowDown /></el-icon>
                     </el-button>
                 </span>
-            <template #dropdown>
-                <el-dropdown-menu>
-                <el-dropdown-item command="幼儿园">幼儿园</el-dropdown-item>
-                <el-dropdown-item command="小学">小学</el-dropdown-item>
-                <el-dropdown-item command="初中">初中</el-dropdown-item>
-                <el-dropdown-item command="高中">高中</el-dropdown-item>
-                </el-dropdown-menu>
-            </template>
-            </el-dropdown>
             </div>
             <div style="margin-left: 15px">
-            <el-dropdown @command="handleUserEduSubject">
                 <span class="el-dropdown-link">
                     <el-button class="custom-button" type="default" round>{{ userStore.edusubject }}
-                    <el-icon><ArrowDown /></el-icon>
                     </el-button>
                 </span>
-            <template #dropdown>
+            </div>
-                <el-dropdown-menu>
+            <el-text type="primary" style="margin-left: 10px;cursor:pointer" @click="handleUserEduSubject()">修改</el-text>
-                <template v-for="(item, index) in subjectList">
+        </div>
-                    <el-dropdown-item v-if="item.edustage == userStore.edustage" :command="item.itemtitle">{{
+        <div class="m-4" v-else>
-                    item.itemtitle }}</el-dropdown-item>
+            <el-cascader v-model="cascaderValue" :options="options" @change="handleChange" />
-                </template>
-                </el-dropdown-menu>
-            </template>
-            </el-dropdown>
         </div>
     </div>
 </template>
   
 <script setup>
 import useUserStore from '@/store/modules/user'
-import {ArrowDown} from '@element-plus/icons-vue'
 import { onMounted,ref } from 'vue';
 import { listEvaluation } from '@/api/subject/index'
 import {sessionStore} from '@/utils/store'
 const userStore = useUserStore().user
 const subjectList = ref([])
+// 点击选择时级联框出现
+const showSelect = ref(false)
+const cascaderValue = ref([])
+// 学段固定
+const options = ref([
+  {
+    value: '幼儿园',
+    label: '幼儿园',
+    children: [],
+  },
+  {
+    value: '小学',
+    label: '小学',
+    children: [],
+  },
+  {
+    value: '初中',
+    label: '初中',
+    children: [],
+  },
+  {
+    value: '高中',
+    label: '高中',
+    children: [],
+  },
+])
 // 获取基础的学科
 const getSubject = () => {
   //没有学科则不进行下面的步骤
@@ -53,33 +62,64 @@ const getSubject = () => {
     const arr = userStore.subject.split(',')
     subjectList.value = res.rows.filter(item => arr.includes(String(item.id))).map(items => items)
     console.log(subjectList,'subjectList');
+    if(subjectList.value.length === 0) return
+    // 判断options里面的label是否和subjectList里面的edustage是否一致，如果一直添加到chilren里面去
+    options.value.forEach(item => {
+        subjectList.value.forEach(items => {
+            if(item.label === items.edustage){
+                item.children.push({
+                    value: items.id,
+                    label: items.edusubject
+                })
+            }
+        })
+    })
     
   })
 }
 // 选择学段
-const handleUserEduStage = (item) => {
+const handleUserEduStage = () => {
-    userStore.edustage = item
+    // userStore.edustage = item
-    sessionStore.set('edustageSelf',item)
+    // sessionStore.set('edustageSelf',item)
-    if(item === '幼儿园'){
+    // if(item === '幼儿园'){
-        // 默认语文
+    //     // 默认语文
-        userStore.edusubject = '语文'
+    //     userStore.edusubject = '语文'
-        sessionStore.set('edusubjectSelf','语文')
+    //     sessionStore.set('edusubjectSelf','语文')
-    }
+    // }
-    else if(item === '高中' && userStore.edusubject === "道德与法治"){
+    // else if(item === '高中' && userStore.edusubject === "道德与法治"){
+    //     // 默认语文
+    //     userStore.edusubject = '政治'
+    //     sessionStore.set('edusubjectSelf','政治')
+    // }
+    // else if(item != '高中' && userStore.edusubject === "政治"){
+    //     // 默认语文
+    //     userStore.edusubject = '道德与法治'
+    //     sessionStore.set('edusubjectSelf','道德与法治')
+    // }
+}
+// 选择学科
+const handleUserEduSubject = () => {
+    showSelect.value = true
+    cascaderValue.value = []
+}
+const handleChange = (value) => {
+    const id = value[1];
+    userStore.edusubject = subjectList.value.find(item => item.id === id).edusubject
+    userStore.edustage = value[0]
+    sessionStore.set('edustageSelf',userStore.edustage)
+    if(userStore.edustage === '高中' && userStore.edusubject === "道德与法治"){
         // 默认语文
         userStore.edusubject = '政治'
         sessionStore.set('edusubjectSelf','政治')
     }
-    else if(item != '高中' && userStore.edusubject === "政治"){
+    else if(userStore.edustage != '高中' && userStore.edusubject === "政治"){
         // 默认语文
         userStore.edusubject = '道德与法治'
         sessionStore.set('edusubjectSelf','道德与法治')
+    }else{
+        sessionStore.set('edusubjectSelf',userStore.edusubject)
     }
-}
+    showSelect.value = false
-// 选择学科
-const handleUserEduSubject = (item) => {
-    userStore.edusubject = item;
-    sessionStore.set('edusubjectSelf',item)
 }
 onMounted(() => {
     getSubject()

src/renderer/src/views/profile/index.vue

@@ -5,7 +5,7 @@
       <div class="info">
         <div class="info-name">{{ state.user.nickName }}</div>
         <div class="infomation" v-if="isStadium() !== true" >
-          <selectClass v-if="!isSubject"/>
+          <SelectClass v-if="!isSubject"/>
         </div>
       </div>
     </div>
@@ -34,7 +34,7 @@ import resetPwd from './resetPwd.vue'
 import { getUserProfile } from '@/api/system/user'
 import pkc from "../../../../../package.json"
 //选择学校和班级
-import selectClass from './components/selectClass.vue'
+import SelectClass from './components/selectClass.vue'
 import useUserStore from '@/store/modules/user'
 
 const version = ref(pkc.version)