zhuhao
/
AIx_Smarttalk_WS
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 6 Wiki Activity

fix：修改学科学段的方式； #209

Merged
yangws merged 1 commits from yws_dev into main 2025-01-08 14:02:54 +08:00
Conversation 0 Commits 1 Files Changed 1 +147 -74
1 changed files with 147 additions and 74 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

217
src/renderer/src/views/profile/components/selectClass.vue
View File

@ -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>
<el-button class="custom-button" type="default" round>{{ eduStage || userStore.edustage }}</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>
<el-button class="custom-button" type="default" round>{{ eduSubject || userStore.edusubject }}</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 showSelect = ref(false)
const cascaderValue = ref([])
const buttonRef = ref()
const popoverRef = 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(',')
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 arr = userStore.subject.split(',');
subjectList.value = res.rows.filter(item => arr.includes(String(item.id)));
if (subjectList.value.length === 0) return;
options.value.forEach(option => {
option.children = subjectList.value
.filter(items => items.edustage === option.label)
.map(item => ({ value: item.id, label: item.edusubject }));
});
// 首次获取学段和学科列表
const cIndex = options.value.findIndex(item => item.label === userStore.edustage);
cascadeOptions.value = [...options.value[cIndex].children]
currentIndex.value = cIndex
});
}
})
}
// 选择学段
const handleUserEduStage = () => {
// userStore.edustage = item
// sessionStore.set('edustageSelf',item)
// if(item === '幼儿园'){
// // 默认语文
// 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 handleUserEduStage = (stage,index) => {
const currentData = options.value.find(item => item.label === stage);
cascadeOptions.value = [...currentData.children]
currentIndex.value = index
}
// 选择学科
const handleUserEduSubject = () => {
showSelect.value = true
cascaderValue.value = []
unref(popoverRef).popperRef?.delayHide?.();
}
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','政治')
const handleChange = (item) => {
const id = item.value
const current = subjectList.value.find(item => item.id === id);
if (current) {
eduSubject.value = item.label;
eduStage.value = current.edustage;
sessionStore.set('edustageSelf', eduStage.value);
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>