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

@@ -1,36 +1,74 @@
 <template>
     <div>
-        <div style="display: flex;align-items: center;" v-if="!showSelect">
+        <div style="display: flex; align-items: center;">
             <div style="margin-left: 15px">
                 <span class="el-dropdown-link">
-                    <el-button class="custom-button" type="default" round>{{ userStore.edustage }}
+                    <el-button class="custom-button" type="default" round>{{ eduStage || userStore.edustage }}</el-button>
-                    </el-button>
                 </span>
             </div>
             <div style="margin-left: 15px">
                 <span class="el-dropdown-link">
-                    <el-button class="custom-button" type="default" round>{{ userStore.edusubject }}
+                    <el-button class="custom-button" type="default" round>{{ eduSubject || userStore.edusubject }}</el-button>
-                    </el-button>
                 </span>
             </div>
-            <el-text type="primary" style="margin-left: 10px;cursor:pointer" @click="handleUserEduSubject()">修改</el-text>
+            <el-text
+                type="primary"
+                style="margin-left: 10px; cursor: pointer;"
+                @click="handleUserEduSubject"
+                v-popover="popoverRef"
+                ref="buttonRef"
+            >修改</el-text>
         </div>
-        <div class="m-4" v-else>
+        <!-- 级联选择框 -->
-            <el-cascader v-model="cascaderValue" :options="options" @change="handleChange" />
+        <el-popover
+            ref="popoverRef"
+            :virtual-ref="buttonRef"
+            trigger="click"
+            title="修改学科学段"
+            virtual-triggering
+            placement="right"
+            width="300px"
+        >
+        <div class="sidebar">
+            <div class="nav-level-one">
+                <template v-for="(item,index) in options" :key="index">
+                    <div :class="[currentIndex===index?'active':'','nav-item']" @click="handleUserEduStage(item.label,index)">
+                        <span class="nav-text">{{ item.label }}</span>
+                        <el-icon class="icon"><ArrowRight /></el-icon>
                     </div>
+                </template>
+            </div>
+            <div class="nav-level-two">
+                <el-scrollbar height="180">
+                    <template v-for="(item,index) in cascadeOptions" :key="index">
+                        <div class="nav-item" @click="handleChange(item)">
+                            <span class="nav-text">{{ item.label }}</span>
+                        </div>
+                    </template>
+                </el-scrollbar>
+            </div>
+        </div>
+        </el-popover>
     </div>
 </template>
 
 <script setup>
 import useUserStore from '@/store/modules/user'
-import { onMounted,ref } from 'vue';
+import { onMounted, ref, unref } from 'vue';
 import { listEvaluation } from '@/api/subject/index'
-import {sessionStore} from '@/utils/store'
+import { sessionStore } from '@/utils/store'
+import { ArrowRight } from '@element-plus/icons-vue'
+
 const userStore = useUserStore().user
 const subjectList = ref([])
-// 点击选择时级联框出现
+const buttonRef = ref()
-const showSelect = ref(false)
+const popoverRef = ref()
-const cascaderValue = ref([])
+// 获取当前选择的学段
+const currentIndex = ref(0)
+// 当前的学科和学段
+const eduStage = ref('')
+const eduSubject = ref('')
+
 // 学段固定
 const options = ref([
   {
@@ -54,77 +92,64 @@ const options = ref([
     children: [],
   },
 ])
+// 选择学段时后筛选学科
+const cascadeOptions = ref([]);
 // 获取基础的学科
 const getSubject = () => {
-  //没有学科则不进行下面的步骤
+  if (!userStore.subject) return;
-  if(!userStore.subject) return
   listEvaluation({ itemkey: 'subject', pageSize: 500 }).then((res) => {
-    const arr = userStore.subject.split(',')
+    const arr = userStore.subject.split(',');
-    subjectList.value = res.rows.filter(item => arr.includes(String(item.id))).map(items => items)
+    subjectList.value = res.rows.filter(item => arr.includes(String(item.id)));
-    console.log(subjectList,'subjectList');
+    if (subjectList.value.length === 0) return;
-    if(subjectList.value.length === 0) return
+    options.value.forEach(option => {
-    // 判断options里面的label是否和subjectList里面的edustage是否一致，如果一直添加到chilren里面去
+      option.children = subjectList.value
-    options.value.forEach(item => {
+        .filter(items => items.edustage === option.label)
-        subjectList.value.forEach(items => {
+        .map(item => ({ value: item.id, label: item.edusubject }));
-            if(item.label === items.edustage){
+    });
-                item.children.push({
+    // 首次获取学段和学科列表
-                    value: items.id,
+    const cIndex = options.value.findIndex(item => item.label === userStore.edustage);
-                    label: items.edusubject
+    cascadeOptions.value = [...options.value[cIndex].children]
-                })
+    currentIndex.value = cIndex
-            }
+  });
-        })
+}
-    })
 
-  })
-}
 // 选择学段
-const handleUserEduStage = () => {
+const handleUserEduStage = (stage,index) => {
-    // userStore.edustage = item
+    const currentData = options.value.find(item => item.label === stage);
-    // sessionStore.set('edustageSelf',item)
+    cascadeOptions.value = [...currentData.children]
-    // if(item === '幼儿园'){
+    currentIndex.value = index
-    //     // 默认语文
-    //     userStore.edusubject = '语文'
-    //     sessionStore.set('edusubjectSelf','语文')
-    // }
-    // 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
+  unref(popoverRef).popperRef?.delayHide?.();
-    cascaderValue.value = []
 }
-const handleChange = (value) => {
+
-    const id = value[1];
+const handleChange = (item) => {
-    userStore.edusubject = subjectList.value.find(item => item.id === id).edusubject
+  const id = item.value
-    userStore.edustage = value[0]
+  const current = subjectList.value.find(item => item.id === id);
-    sessionStore.set('edustageSelf',userStore.edustage)
+  if (current) {
-    if(userStore.edustage === '高中' && userStore.edusubject === "道德与法治"){
+    eduSubject.value = item.label;
-        // 默认语文
+    eduStage.value = current.edustage;
-        userStore.edusubject = '政治'
+    sessionStore.set('edustageSelf', eduStage.value);
-        sessionStore.set('edusubjectSelf','政治')
+
+    if (eduStage.value === '高中' && eduSubject.value === "道德与法治") {
+        eduSubject.value = '政治';
+      sessionStore.set('edusubjectSelf', '政治');
+    } else if (eduStage.value !== '高中' && eduSubject.value === "政治") {
+        eduSubject.value = '道德与法治';
+      sessionStore.set('edusubjectSelf', '道德与法治');
+    } else {
+      sessionStore.set('edusubjectSelf', eduSubject.value);
     }
-    else if(userStore.edustage != '高中' && userStore.edusubject === "政治"){
-        // 默认语文
-        userStore.edusubject = '道德与法治'
-        sessionStore.set('edusubjectSelf','道德与法治')
-    }else{
-        sessionStore.set('edusubjectSelf',userStore.edusubject)
   }
-    showSelect.value = false
 }
+
 onMounted(() => {
-    getSubject()
+  getSubject();
 })
 </script>
+
 <style scoped>
 .custom-button {
   width: auto;
@@ -133,10 +158,58 @@ onMounted(() => {
   outline-offset: none;
   padding: 0 24px;
 }
-
 .custom-button i {
   margin-left: 8px; /* 调整图标与文字之间的间距 */
 }
+.sidebar {
+    width: 100%;
+    padding: 5px;
+    display: flex;
+    justify-content: space-between;
+}
+
+.nav-level-one,.nav-level-two {
+    margin-bottom: 20px;
+    width: 120px;
+}
+.nav-level-two .nav-item{
+    text-align: center;
+}
+
+.nav-item {
+    display: flex;
+    align-items: center;
+    margin-bottom: 10px;
+    padding: 8px 10px;
+    border-radius: 5px;
+    cursor: pointer;
+    transition: background-color 0.3s ease;
+}
+
+.nav-item:hover {
+    background-color: rgb(245, 247, 250);
+}
+
+.nav-text {
+    flex: 1;
+    font-size: 14px;
+    color: #333;
+}
+
+.nav-arrow {
+    font-size: 12px;
+    margin-left: auto;
+}
+
+.nav-level-one.nav-item:first-child.nav-text {
+    color: blue;
+}
+.active .nav-text{
+    font-weight: bold;
+    color:rgb(64, 158, 255)
+}
+.active .icon{
+    font-weight: bold;
+    color:rgb(64, 158, 255)
+}
 </style>
-
-