add:个人中心UI还原;
This commit is contained in:
小杨
parent
5ce054cced
commit
a8dbd41bdb
|
|
@ -0,0 +1,26 @@
|
|||
<template>
|
||||
<div v-for="(item,index) in classList" :key="index">
|
||||
<div>{{item.caption}}、</div>
|
||||
</div>
|
||||
<el-button type="primary" link>加入班级</el-button>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {onMounted, ref} from "vue";
|
||||
const props = defineProps({
|
||||
classList:{
|
||||
type:Array,
|
||||
},
|
||||
menuItems:{
|
||||
type:Array,
|
||||
}
|
||||
})
|
||||
onMounted(() => {
|
||||
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
|
||||
|
|
@ -0,0 +1,73 @@
|
|||
<template>
|
||||
<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-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>
|
||||
<el-dropdown-menu>
|
||||
<template v-for="(item, index) in subjectList">
|
||||
<el-dropdown-item v-if="item.edustage == userStore.edustage" :command="item.itemtitle">{{
|
||||
item.itemtitle }}</el-dropdown-item>
|
||||
</template>
|
||||
</el-dropdown-menu>
|
||||
</template>
|
||||
</el-dropdown>
|
||||
</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'
|
||||
const userStore = useUserStore().user
|
||||
const subjectList = ref([])
|
||||
// 获取基础的学科
|
||||
const getSubject = () => {
|
||||
//没有学科则不进行下面的步骤
|
||||
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)
|
||||
})
|
||||
}
|
||||
onMounted(() => {
|
||||
getSubject()
|
||||
console.log(userStore,'123')
|
||||
})
|
||||
</script>
|
||||
<style scoped>
|
||||
.custom-button {
|
||||
width: auto;
|
||||
border: 1px solid rgb(59, 130, 246);
|
||||
outline: none;
|
||||
outline-offset: none;
|
||||
padding: 0 24px;
|
||||
}
|
||||
|
||||
.custom-button i {
|
||||
margin-left: 8px; /* 调整图标与文字之间的间距 */
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
|
|
@ -1,105 +1,45 @@
|
|||
<template>
|
||||
<div class="app-container">
|
||||
<el-row :gutter="20" style="display: flex;flex-wrap: nowrap;justify-content: start">
|
||||
<el-col :xs="24" style="min-width: 260px;max-width: 300px">
|
||||
<el-card class="box-card">
|
||||
<template v-slot:header>
|
||||
<div class="clearfix">
|
||||
<span>个人信息</span>
|
||||
</div>
|
||||
</template>
|
||||
<div>
|
||||
<div class="text-center">
|
||||
<userAvatar />
|
||||
<div class="info">
|
||||
<div class="info-name">{{ state.user.nickName }}</div>
|
||||
<div class="infomation">
|
||||
<selectClass/>
|
||||
</div>
|
||||
<ul class="list-group list-group-striped">
|
||||
<li class="list-group-item">
|
||||
<div class="left-align">
|
||||
<UserFilled class="UserFilled"/>
|
||||
<span>用户名称</span>
|
||||
</div>
|
||||
<div class="right-align">{{ state.user.userName }}</div>
|
||||
</li>
|
||||
<li class="list-group-item">
|
||||
<div class="left-align">
|
||||
<Cellphone class="Cellphone"/>
|
||||
<span>手机号码</span>
|
||||
</div>
|
||||
<div class="right-align">{{ state.user.phonenumber }}</div>
|
||||
</li>
|
||||
<li class="list-group-item">
|
||||
<div class="left-align">
|
||||
<Message class="Message"/>
|
||||
<span>身份证号</span>
|
||||
</div>
|
||||
<div class="right-align">{{ state.user.identity }}</div>
|
||||
</li>
|
||||
<li class="list-group-item">
|
||||
<div class="left-align">
|
||||
<Suitcase class="Suitcase"/>
|
||||
<span>所属部门</span>
|
||||
</div>
|
||||
<div class="right-align" v-if="state.user.dept">
|
||||
{{ state.user.dept.deptName }} / {{ state.postGroup }}
|
||||
</div>
|
||||
</li>
|
||||
<li class="list-group-item">
|
||||
<div class="left-align">
|
||||
<Avatar class="Avatar"/>
|
||||
<span>所属角色</span>
|
||||
</div>
|
||||
<div class="right-align">{{ state.roleGroup || '教师' }}</div>
|
||||
</li>
|
||||
<li class="list-group-item">
|
||||
<div class="left-align">
|
||||
<Calendar class="Calendar"/>
|
||||
<span>创建日期</span>
|
||||
</div>
|
||||
<div class="right-align">{{ state.user.createTime }}</div>
|
||||
</li>
|
||||
<li class="list-group-item">
|
||||
<div class="left-align">
|
||||
<Paperclip class="Calendar"/>
|
||||
<span>版本编号</span>
|
||||
</div>
|
||||
<div class="right-align">v{{version}}</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col :span="18" :xs="24">
|
||||
<el-card>
|
||||
<template v-slot:header>
|
||||
<div class="clearfix">
|
||||
<span>基本资料</span>
|
||||
</div>
|
||||
</template>
|
||||
<el-row :gutter="20" style="display: flex;flex-wrap: nowrap;justify-content: start;width: 100%;">
|
||||
<el-col :span="24" :xs="24">
|
||||
<el-tabs v-model="activeTab">
|
||||
<el-tab-pane label="基本资料" name="userinfo">
|
||||
<el-card>
|
||||
<el-tab-pane label="个人信息" name="userinfo">
|
||||
<userInfo :user="state.user" />
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="修改密码" name="resetPwd">
|
||||
<resetPwd />
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</el-card>
|
||||
</el-tabs>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup name="Profile">
|
||||
import { UserFilled, Cellphone, Message, Suitcase, Avatar, Calendar, Paperclip } from '@element-plus/icons-vue'
|
||||
import { ref, reactive } from 'vue'
|
||||
import { ref, reactive, onMounted } from 'vue'
|
||||
import userAvatar from './userAvatar.vue'
|
||||
import userInfo from './userInfo.vue'
|
||||
import resetPwd from './resetPwd.vue'
|
||||
import { getUserProfile } from '@/api/system/user'
|
||||
import pkc from "../../../../../package.json"
|
||||
//选择学校和班级
|
||||
import selectClass from './components/selectClass.vue'
|
||||
|
||||
|
||||
const version = ref(pkc.version)
|
||||
const activeTab = ref('userinfo')
|
||||
|
||||
const state = reactive({
|
||||
user: {},
|
||||
roleGroup: {},
|
||||
|
|
@ -115,7 +55,9 @@ async function getUser() {
|
|||
})
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
getUser()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
|
@ -125,6 +67,23 @@ getUser()
|
|||
.text-center {
|
||||
margin-bottom: 15px;
|
||||
border-bottom: 1px solid #dddddd;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.info{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-around;
|
||||
height: 120px;
|
||||
.info-name{
|
||||
text-align: left;
|
||||
padding-left: 18px;
|
||||
font-size: 28px;
|
||||
font-weight: bold;
|
||||
}
|
||||
.infomation{
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
}
|
||||
.list-group-item {
|
||||
display: flex;
|
||||
|
|
|
|||
|
|
@ -104,6 +104,7 @@ const cancle = () => {
|
|||
.img-circle {
|
||||
height: 120px;
|
||||
width: auto;
|
||||
border-radius: 50%;
|
||||
}
|
||||
.avatar-upload-preview {
|
||||
position:relative;
|
||||
|
|
|
|||
|
|
@ -1,46 +1,34 @@
|
|||
<template>
|
||||
<el-form ref="userRef" :model="user" :rules="rules" label-width="80px">
|
||||
<el-form-item label="用户昵称" prop="nickName">
|
||||
<el-form ref="userRef" :model="user" :rules="rules" label-width="150px">
|
||||
<el-form-item label="姓名" prop="nickName">
|
||||
<el-input v-model="user.nickName" maxlength="30" />
|
||||
</el-form-item>
|
||||
<el-form-item label="手机号码" prop="phonenumber">
|
||||
<el-input v-model="user.phonenumber" maxlength="11" />
|
||||
<el-form-item label="账号/手机号码">
|
||||
{{ user.phonenumber }}
|
||||
</el-form-item>
|
||||
<el-form-item label="身份证号" prop="identity">
|
||||
<el-input v-model="user.identity" maxlength="50" />
|
||||
<el-form-item label="所属学校" prop="identity">
|
||||
<div style="display: flex;">
|
||||
<div>{{ user.deptName }}</div>
|
||||
<div>
|
||||
<el-button type="primary" link>更改学校</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-form-item label="性别" style="display: none">
|
||||
<el-radio-group v-model="user.sex">
|
||||
<el-radio value="0">男</el-radio>
|
||||
<el-radio value="1">女</el-radio>
|
||||
</el-radio-group>
|
||||
<el-form-item label="身份角色">
|
||||
{{ user.roleGroup || '教师' }}
|
||||
</el-form-item>
|
||||
<el-form-item label="学段">
|
||||
<el-radio-group v-model="user.edustage" @change="semeterChange">
|
||||
<template v-for="(item,index) in semesterList" :key="index">
|
||||
<el-radio :value="item.label">
|
||||
{{item.label }}
|
||||
</el-radio>
|
||||
</template>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="任教学科">
|
||||
<el-radio-group v-model="user.edusubject">
|
||||
<template v-for="(item,index) in subjectList" :key="index">
|
||||
<el-radio v-if="item.edustage == user.edustage" :value="item.itemtitle">
|
||||
{{item.itemtitle }}
|
||||
</el-radio>
|
||||
</template>
|
||||
</el-radio-group>
|
||||
<el-form-item label="我的班级">
|
||||
<ClassList :classList="classList"/>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="submit">保存</el-button>
|
||||
<el-button style="padding: 0 40px;" type="primary" @click="submit">保存</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, getCurrentInstance,onMounted } from 'vue'
|
||||
import { ref, getCurrentInstance,onMounted,reactive } from 'vue'
|
||||
import {updateUserInfo } from '@/api/system/user'
|
||||
import {getDept } from '@/api/login'
|
||||
import { listEvaluation } from '@/api/subject/index'
|
||||
|
|
@ -48,7 +36,18 @@ import useUserStore from '@/store/modules/user'
|
|||
import {ElMessage} from 'element-plus'
|
||||
import { clearBookInfo } from '@/utils/ruoyi'
|
||||
import { sessionStore } from '@/utils/store'
|
||||
import {listClassmain} from '@/api/classManage/index'
|
||||
//班级列表
|
||||
import ClassList from './components/classList.vue'
|
||||
|
||||
//班级列表
|
||||
const classList = ref([])
|
||||
// 未加入的班级
|
||||
const classesNotAMemberOf = ref([])
|
||||
//班级列表
|
||||
const gradeTree = ref([])
|
||||
//当前页面
|
||||
const currentIndex = ref(0)
|
||||
const props = defineProps({
|
||||
user: {
|
||||
type: Object
|
||||
|
|
@ -59,6 +58,7 @@ const { proxy } = getCurrentInstance()
|
|||
const userStore = useUserStore()
|
||||
|
||||
//选择学段
|
||||
// 获取学校所存在的学段
|
||||
const semesterList = ref([
|
||||
{
|
||||
id:1,
|
||||
|
|
@ -77,7 +77,26 @@ const semesterList = ref([
|
|||
label:'高中'
|
||||
},
|
||||
])
|
||||
// 获取学校所存在的学段
|
||||
const newGradeList = reactive([
|
||||
[
|
||||
{ label: '一年级', agekey: 1, checked: false, current: 1 },
|
||||
{ label: '二年级', agekey: 2, checked: false, current: 1 },
|
||||
{ label: '三年级', agekey: 3, checked: false, current: 1 },
|
||||
{ label: '四年级', agekey: 4, checked: false, current: 1 },
|
||||
{ label: '五年级', agekey: 5, checked: false, current: 1 },
|
||||
{ label: '六年级', agekey: 6, checked: false, current: 1 },
|
||||
],
|
||||
[
|
||||
{ label: '初一', agekey: 7, checked: false, current: 2 },
|
||||
{ label: '初二', agekey: 8, checked: false, current: 2 },
|
||||
{ label: '初三', agekey: 9, checked: false, current: 2 },
|
||||
],
|
||||
[
|
||||
{ label: '高一', agekey: 10, checked: false, current: 3 },
|
||||
{ label: '高二', agekey: 11, checked: false, current: 3 },
|
||||
{ label: '高三', agekey: 12, checked: false, current: 3 },
|
||||
],
|
||||
])
|
||||
|
||||
const getTheSection = () => {
|
||||
getDept({deptId:userStore.user.deptId}).then(res => {
|
||||
|
|
@ -175,8 +194,67 @@ const semeterChange = (item) => {
|
|||
props.user.edusubject = ''
|
||||
}
|
||||
}
|
||||
|
||||
// 获取班级信息
|
||||
const getClassInfo = () => {
|
||||
classList.value = []
|
||||
debugger
|
||||
listClassmain({ classuserid: props.user.userId, pageSize: 100, status: 'open' }).then(response => {
|
||||
classList.value = [...response.rows]
|
||||
if(classList.value.length > 0){
|
||||
currentIndex.value = 0
|
||||
}
|
||||
});
|
||||
listClassmain({entpid: props.user.deptId, status: 'open', pageSize: 100}).then(response => {
|
||||
//清除已有的班级
|
||||
classesNotAMemberOf.value = [...response.rows]
|
||||
classList.value.forEach(item => {
|
||||
const currentIndex = classesNotAMemberOf.value.findIndex(items => items.id === item.id)
|
||||
if(currentIndex) classesNotAMemberOf.value.splice(currentIndex, 1)
|
||||
})
|
||||
//这里获取组装所有班级
|
||||
gradeTree.value = groupByCondition(classesNotAMemberOf.value, item => item.agekey);
|
||||
})
|
||||
}
|
||||
//将所有班级筛选成二级的数组
|
||||
function groupByCondition(arr, condition) {
|
||||
// 分组结果存储为对象
|
||||
const groups = arr.reduce((groups, item) => {
|
||||
const groupKey = condition(item);
|
||||
item.label = item.caption
|
||||
item.value = item.id
|
||||
groups[groupKey] = groups[groupKey] || [];
|
||||
groups[groupKey].push(item);
|
||||
return groups;
|
||||
}, {});
|
||||
// 构建新的数据结构
|
||||
const formattedGroups = Object.keys(groups).map(key => ({
|
||||
label: gradeName(key),
|
||||
value:key,
|
||||
children: groups[key]
|
||||
}));
|
||||
return formattedGroups;
|
||||
}
|
||||
//key对应学段年级
|
||||
function gradeName(key){
|
||||
//先把二级数组转化为一级数组，用于筛选
|
||||
const flatGradeDataList = newGradeList.flat();
|
||||
const currentIndex = flatGradeDataList.findIndex(item => item.agekey === Number(key));
|
||||
if(currentIndex !== -1){
|
||||
return flatGradeDataList[currentIndex].label;
|
||||
}else{
|
||||
//社团的处理
|
||||
const defaultLabel = '社团';
|
||||
flatGradeDataList[currentIndex] = { ...flatGradeDataList[currentIndex], label: defaultLabel };
|
||||
return defaultLabel;
|
||||
}
|
||||
}
|
||||
const addClass = () => {
|
||||
dialogVisible.value = true
|
||||
}
|
||||
onMounted(() => {
|
||||
getSubject()
|
||||
getClassInfo()
|
||||
getTheSection()
|
||||
})
|
||||
</script>
|
||||
|
|
|
|||
Loading…
Reference in New Issue