From a8dbd41bdbab6baf25634c98b6c20561232b9eec Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=B0=8F=E6=9D=A8?= <666>
Date: Tue, 29 Oct 2024 17:30:48 +0800
Subject: [PATCH] =?UTF-8?q?add:=E4=B8=AA=E4=BA=BA=E4=B8=AD=E5=BF=83UI?=
 =?UTF-8?q?=E8=BF=98=E5=8E=9F;?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../views/profile/components/classList.vue    |  26 ++++
 .../views/profile/components/selectClass.vue  |  73 +++++++++
 src/renderer/src/views/profile/index.vue      | 131 ++++++----------
 src/renderer/src/views/profile/userAvatar.vue |   1 +
 src/renderer/src/views/profile/userInfo.vue   | 140 ++++++++++++++----
 5 files changed, 254 insertions(+), 117 deletions(-)
 create mode 100644 src/renderer/src/views/profile/components/classList.vue
 create mode 100644 src/renderer/src/views/profile/components/selectClass.vue

diff --git a/src/renderer/src/views/profile/components/classList.vue b/src/renderer/src/views/profile/components/classList.vue
new file mode 100644
index 0000000..5779951
--- /dev/null
+++ b/src/renderer/src/views/profile/components/classList.vue
@@ -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>
+  
\ No newline at end of file
diff --git a/src/renderer/src/views/profile/components/selectClass.vue b/src/renderer/src/views/profile/components/selectClass.vue
new file mode 100644
index 0000000..10f82ed
--- /dev/null
+++ b/src/renderer/src/views/profile/components/selectClass.vue
@@ -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>
+
+  
\ No newline at end of file
diff --git a/src/renderer/src/views/profile/index.vue b/src/renderer/src/views/profile/index.vue
index 8423f02..92ce668 100644
--- a/src/renderer/src/views/profile/index.vue
+++ b/src/renderer/src/views/profile/index.vue
@@ -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>
-            <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>
+    <div class="text-center">
+      <userAvatar />
+      <div class="info">
+        <div class="info-name">{{ state.user.nickName }}</div>
+        <div class="infomation">
+          <selectClass/>
+        </div>
+      </div>
+    </div>
+    <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">
-              <userInfo :user="state.user" />
-            </el-tab-pane>
-            <el-tab-pane label="修改密码" name="resetPwd">
-              <resetPwd />
-            </el-tab-pane>
+            <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-card>
           </el-tabs>
-        </el-card>
       </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 version = ref(pkc.version)
 const activeTab = ref('userinfo')
+
 const state = reactive({
   user: {},
   roleGroup: {},
@@ -115,7 +55,9 @@ async function getUser() {
   })
 }
 
-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;
diff --git a/src/renderer/src/views/profile/userAvatar.vue b/src/renderer/src/views/profile/userAvatar.vue
index 6f876fa..9e3fa07 100644
--- a/src/renderer/src/views/profile/userAvatar.vue
+++ b/src/renderer/src/views/profile/userAvatar.vue
@@ -104,6 +104,7 @@ const cancle = () => {
 .img-circle {
   height: 120px;
   width: auto;
+  border-radius: 50%;
 }
 .avatar-upload-preview {
   position:relative;
diff --git a/src/renderer/src/views/profile/userInfo.vue b/src/renderer/src/views/profile/userInfo.vue
index 2d9d1a2..eb73738 100644
--- a/src/renderer/src/views/profile/userInfo.vue
+++ b/src/renderer/src/views/profile/userInfo.vue
@@ -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>