From 2a0fcf671373f9ef4704543bcffab7d2f3a9e01d Mon Sep 17 00:00:00 2001
From: JayChou <2064936853@qq.com>
Date: Wed, 25 Sep 2024 17:27:32 +0800
Subject: [PATCH] =?UTF-8?q?=E6=96=B0=E5=A2=9E=E7=94=A8=E6=88=B7=E4=BF=AE?=
 =?UTF-8?q?=E6=94=B9=E4=B8=AA=E4=BA=BA=E4=BF=A1=E6=81=AF=20=E5=A2=9E?=
 =?UTF-8?q?=E5=8A=A0=E8=B7=AF=E7=94=B1=E6=8B=A6=E6=88=AA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json                 |   2 +-
 pnpm-lock.yaml               |   8 +-
 src/Layout/tabbar/index.vue  |   8 +-
 src/api/race.ts              |  23 ++++
 src/permissions.ts           |  24 +++-
 src/views/home/index.vue     |   7 +
 src/views/raceInfo/index.vue |  13 +-
 src/views/userInfo/index.vue | 245 ++++++++++++++++++++++++++++++-----
 8 files changed, 276 insertions(+), 54 deletions(-)

diff --git a/package.json b/package.json
index 9d8fc1d..f4d4f28 100644
--- a/package.json
+++ b/package.json
@@ -19,7 +19,7 @@
     "@element-plus/icons-vue": "^2.3.1",
     "axios": "^1.6.8",
     "echarts": "5.3.2",
-    "element-plus": "^2.6.2",
+    "element-plus": "^2.8.3",
     "pinia": "^2.1.7",
     "postcss-plugin-px2rem": "^0.8.1",
     "px2rem-loader": "^0.1.9",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 9046d11..557beaa 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -11,8 +11,8 @@ dependencies:
     specifier: 5.3.2
     version: 5.3.2
   element-plus:
-    specifier: ^2.6.2
-    version: 2.6.2(vue@3.4.21)
+    specifier: ^2.8.3
+    version: 2.8.3(vue@3.4.21)
   pinia:
     specifier: ^2.1.7
     version: 2.1.7(typescript@5.2.2)(vue@3.4.21)
@@ -1984,8 +1984,8 @@ packages:
     resolution: {integrity: sha512-kMb204zvK3PsSlgvvwzI3wBIcAw15tRkYk+NQdsjdDtcQWTp2RABbMQ9rUBy8KNEOM+/E6ep+XC3AykiWZld4g==}
     dev: true
 
-  /element-plus@2.6.2(vue@3.4.21):
-    resolution: {integrity: sha512-WFMv1v83l437Xu+GeeM+ytxd9VUQpR4418BowvTVIPYItsoj6yK0ITIuSv19iCesF405FbAOaCIHXhJch0ilFA==}
+  /element-plus@2.8.3(vue@3.4.21):
+    resolution: {integrity: sha512-BXQOyDf0s7JHyNEV8iaO+iaOzTZPsBXVKMzMI967vLCodUBDLrtiY5vglAn1YEebQcUOEUMhGcttTpIvEkcBjQ==}
     peerDependencies:
       vue: ^3.2.0
     dependencies:
diff --git a/src/Layout/tabbar/index.vue b/src/Layout/tabbar/index.vue
index 11167c9..978f492 100644
--- a/src/Layout/tabbar/index.vue
+++ b/src/Layout/tabbar/index.vue
@@ -28,7 +28,7 @@
       </div>
       <div class="right" v-else>
         <div class="avater">
-          <img src="../../assets/images/default.png" alt="" />
+          <img :src="setImageUrl(useUserStore.userInfo.avatar)" alt="" />
         </div>
         <el-dropdown style="width:.625rem">
           <span class="el-dropdown-link">
@@ -71,6 +71,9 @@ onMounted(() => {
 const layout = async () => {
   useUserStore.layOut()
 }
+const setImageUrl = (url: string) => {
+  return import.meta.env.VITE_APP_BASE_API + "/sys/common/static/" +  url
+}
 </script>
 
 <style lang="scss" scoped>
@@ -174,8 +177,11 @@ const layout = async () => {
     .avater {
       width: 35px;
       height: 35px;
+      border-radius: 50%;
+      overflow: hidden;
       img {
         width: 100%;
+        height: 100%;
       }
       margin-right: 20px;
     }
diff --git a/src/api/race.ts b/src/api/race.ts
index 838d08e..a6462e5 100644
--- a/src/api/race.ts
+++ b/src/api/race.ts
@@ -27,4 +27,27 @@ export const getRaceInfo = (params:any) => {
         url:'/comp/comp/complistnoxq',
         params
     })
+}
+// 获取院系列表
+export const getFaculties = (params:any) => {
+    return request({
+        url:'/sys/sysDepart/queryDepartStuTreeSync',
+        params
+    })
+}
+// 上传文件
+export const uploadFile = (data:any) => {
+    return request({
+        url:'/sys/common/upload',
+        method:'POST',
+        data
+    })
+}
+// 修改用户信息
+export const editUserInfoApi = (data:any) => {
+    return request({
+        url:'/sys/user/login/setting/userEdit',
+        method:'POST',
+        data
+    })
 }
\ No newline at end of file
diff --git a/src/permissions.ts b/src/permissions.ts
index 28a22d8..2aee16a 100644
--- a/src/permissions.ts
+++ b/src/permissions.ts
@@ -1,6 +1,12 @@
 import router from '@/router/index'
 import userStore from './store/module/user'
 
+// 定义要求登录访问的名单
+const asyncRouterName = ['UserInfo']
+
+const asyncRouter = (path: string) => {
+  return asyncRouterName.includes(path)
+}
 router.beforeEach(async (to, form, next) => {
   const useuserStore = userStore()
 
@@ -8,16 +14,20 @@ router.beforeEach(async (to, form, next) => {
     if (to.path === '/login') {
       next({ path: '/' })
     } else {
-      if (!Object.keys(useuserStore.userInfo).length) {
-        useuserStore.getUserInfo()
-        next()
-
-      }else{
+      useuserStore.getUserInfo()
+      next()
+    }
+  } else {
+    if (!Object.keys(useuserStore.userInfo).length) {
+      if (asyncRouter(to.name as string)) {
+        next('/login')
+      } else {
+       
         next()
       }
+    } else {
+      next()
     }
-  }else{
-    next()
   }
 })
 export default router
diff --git a/src/views/home/index.vue b/src/views/home/index.vue
index 281a429..e0ec3fa 100644
--- a/src/views/home/index.vue
+++ b/src/views/home/index.vue
@@ -71,6 +71,7 @@
 import { ref } from 'vue'
 import { getRaceList } from '@/api/race'
 import { useRouter } from 'vue-router';
+import { ElLoading } from 'element-plus'
 const router = useRouter()
 const reacProjectList = ref<any>([])
 const isLoading = ref(false)
@@ -81,12 +82,18 @@ const getRaceProjectListEvent = async () => {
     pageNo: 1,
     pageSize: 8,
   }
+  const loading = ElLoading.service({
+    lock: true,
+    text: 'Loading',
+    background: 'rgba(255, 255, 255, 0.7)',
+  })
   const res: any = await getRaceList(page)
   console.log(res)
   reacProjectList.value = res.result.slice(0, 8)
   console.log(reacProjectList.value, 'reacProjectList.value ')
 
   isLoading.value = true
+  loading.close()
 }
 getRaceProjectListEvent()
 const active = ref(1)
diff --git a/src/views/raceInfo/index.vue b/src/views/raceInfo/index.vue
index 4dd2f00..abb919b 100644
--- a/src/views/raceInfo/index.vue
+++ b/src/views/raceInfo/index.vue
@@ -75,11 +75,11 @@
                     </li>
                     <li>
                       <div class="label">负责部门:</div>
-                      <div class="text">{{ raceInfo.dept }}</div>
+                      <div class="text">{{ raceInfo.comporderc }}</div>
                     </li>
                     <li style="width: 33%">
                       <div class="label">比赛类型:</div>
-                      <div class="text">A</div>
+                      <div class="text">{{ raceInfo.compTypeId }}</div>
                     </li>
                     <li style="width: 33%">
                       <div class="label">比赛权重:</div>
@@ -94,14 +94,15 @@
               </div>
               <div class="center">
                 <div class="label">比赛简介:</div>
-                <div class="deaceiption">
-                  亲爱的同学们、老师们以及各位编程爱好者们：
+                <div class="deaceiption" >
+                  {{ raceInfo.compInfo }}
+                  <!-- 亲爱的同学们、老师们以及各位编程爱好者们：
                   在这个充满创新与挑战的时代，一场精彩纷呈的大学生编程大赛即将拉开帷幕。
                   本次大学生编程大赛是智慧与技能的激烈碰撞，是创意与实践的完美结合。它为广大有才华、有梦想的大学生们提供了一个展现自我、超越自我的广阔舞台。
                   在这里，你将与来自不同高校、不同专业的编程高手们同场竞技。大家将用代码编织梦想，用算法开拓未来。无论是擅长网页开发、移动应用编程，还是热衷于数据分析、人工智能算法设计，都能在这个舞台上找到属于自己的一片天地。
                   大赛不仅考验选手们的编程技术水平，更注重创新思维和解决实际问题的能力。在比赛过程中，选手们将面临各种复杂的问题和挑战，需要运用所学知识，发挥创造力，提出独特而有效的解决方案。
                   同时，本次大赛也为同学们提供了一个与行业专家、企业代表交流互动的机会。他们将带来最前沿的技术资讯和行业动态，为同学们的未来发展提供宝贵的建议和指导。
-                  来吧，亲爱的大学生们！加入这场编程的盛宴，释放你的无限潜力，用代码书写属于你们的辉煌篇章！让我们一起见证新一代编程之星的诞生！
+                  来吧，亲爱的大学生们！加入这场编程的盛宴，释放你的无限潜力，用代码书写属于你们的辉煌篇章！让我们一起见证新一代编程之星的诞生！ -->
                 </div>
                 <div class="label">附件:</div>
                 <div class="file">
@@ -158,7 +159,7 @@ const getRaceProjectListEvent = async () => {
 }
 getRaceProjectListEvent()
 const setImageUrl = (url: string) => {
-  return import.meta.env.VITE_APP_BASE_API + url
+  return import.meta.env.VITE_APP_BASE_API + "/sys/common/static/" +  url
 }
 // 获取比赛详情
 const raceInfo = ref<any>({})
diff --git a/src/views/userInfo/index.vue b/src/views/userInfo/index.vue
index 05877b6..01bb835 100644
--- a/src/views/userInfo/index.vue
+++ b/src/views/userInfo/index.vue
@@ -70,15 +70,24 @@
             <div class="head">
               <div class="title">个人信息</div>
               <div class="icon">
-                <el-button
-                
-                  type="primary"
-                  link
-                >
-                 编辑
+                <el-button type="primary" link @click="editUserInfo">
+                  编辑
                 </el-button>
               </div>
             </div>
+            <div class="info-box">
+              <div class="text">
+                <!-- <img style="width: 75px; height:75px ;" src="../../assets/images/item.png" alt="" srcset=""> -->
+                <el-image
+                  style="width: 100px; height: 100px"
+                  :src="setImageUrl(userInfo.avatar)"
+                  :preview-src-list="[
+                    setImageUrl(userInfo.avatar),
+                  ]"
+                />
+              </div>
+            </div>
+
             <div class="info-box">
               <div class="label">姓名</div>
               <div class="text">{{ userInfo.realname }}</div>
@@ -104,48 +113,214 @@
               <div class="text">国际教育学院</div>
             </div>
 
-            <div class="info-box">
-              <div class="label">专业</div>
-              <div class="text">软件工程</div>
-            </div>
-
             <div class="info-box">
               <div class="label">邮箱</div>
               <div class="text">{{ userInfo.email }}</div>
             </div>
-
-           
-
-
           </div>
         </div>
         <div class="right">
-          <div class="personalAbilityEvaluationCollectList gradient" @click="Router.push('/personalAbilityEvaluationCollectList')">
+          <div
+            class="personalAbilityEvaluationCollectList gradient"
+            @click="Router.push('/personalAbilityEvaluationCollectList')"
+          >
             个人积分管理
           </div>
-          <div class="personalAbilityEvaluationCollectList gradient"  @click="Router.push('/personalEvaluateList')">
+          <div
+            class="personalAbilityEvaluationCollectList gradient"
+            @click="Router.push('/personalEvaluateList')"
+          >
             个人能力评价
           </div>
-          <div class="personalAbilityEvaluationCollectList gradient"  @click="Router.push('/personalReport')">
+          <div
+            class="personalAbilityEvaluationCollectList gradient"
+            @click="Router.push('/personalReport')"
+          >
             个人能力报告
           </div>
         </div>
       </div>
     </el-card>
   </div>
+  <el-dialog
+    v-model="dialogVisible"
+    v-if="dialogVisible"
+    title="编辑"
+    width="35%"
+    :before-close="handleClose"
+  >
+    <el-form :model="form" label-width="80" style="padding-right: 30px">
+      <el-form-item label="头像">
+        <el-upload
+          v-model:file-list="fileList"
+          action="#"
+          list-type="picture-card"
+          :auto-upload="false"
+        >
+          <el-icon><Plus /></el-icon>
+        </el-upload>
+      </el-form-item>
+      <el-form-item label="姓名">
+        <el-input v-model="form.name" />
+      </el-form-item>
+      <el-form-item label="部门">
+        <el-cascader
+          :props="props"
+          style="width: 100%"
+          v-model="form.facultiesId"
+        />
+      </el-form-item>
+      <el-form-item label="生日">
+        <el-date-picker
+          v-model="form.birthday"
+          type="date"
+          placeholder="选择日期"
+          style="width: 100%"
+        />
+      </el-form-item>
+      <el-form-item label="性别">
+        <el-radio-group v-model="form.sex">
+          <el-radio :value="1" size="large">男</el-radio>
+          <el-radio :value="0" size="large">女</el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item label="邮箱">
+        <el-input v-model="form.email" />
+      </el-form-item>
+      <el-form-item label="手机号">
+        <el-input v-model="form.phone" type="number" />
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="dialogVisible = false">取消</el-button>
+        <el-button type="primary" @click="submit">确认</el-button>
+      </div>
+    </template>
+  </el-dialog>
 </template>
 
 <script lang="ts" setup>
-import { onMounted, reactive, ref, toRefs, watch } from 'vue'
-import { useRouter } from 'vue-router';
+import { nextTick, onMounted, reactive, ref, toRefs, watch } from 'vue'
+import { useRouter } from 'vue-router'
 import userStore from '@/store/module/user'
+import { getFaculties, uploadFile, editUserInfoApi } from '@/api/race'
+import { id } from 'element-plus/es/locale/index.mjs'
 const useUserStore = userStore()
 const userInfo = ref<any>({})
-console.log(useUserStore.userInfo,'useUserStore');
+console.log(useUserStore.userInfo, 'useUserStore')
 userInfo.value = useUserStore.userInfo
 const Router = useRouter()
-</script>
+const dialogVisible = ref(false)
+// 修改用户信息
+const editUserInfo = () => {
+  form.name = userInfo.value.realname
+  form.birthday = userInfo.value.birthday
+  form.sex = userInfo.value.sex
+  form.email = userInfo.value.email
+  // form.facultiesId = userInfo.value.facultiesId
+  form.phone = userInfo.value.phone
+  dialogVisible.value = true
+  nextTick(() => {
+    fileList.value = [
+      {
+        url: setImageUrl(userInfo.value.avatar),
+      },
+    ]
+  })
+}
+const handleClose = () => {
+  dialogVisible.value = false
+}
+const form = reactive({
+  name: '',
+  birthday: '',
+  sex: '',
+  email: '',
+  facultiesId: '',
+  phone: '',
+})
+
+// 上传文件
+const fileList = ref<any>([])
+const avatar = ref<any>('')
+const uploadFileEvent = async () => {
+  const fromData = new FormData()
+  fromData.append('file', fileList.value[0].raw)
+  const res: any = await uploadFile(fromData)
+  avatar.value = res.message
+  console.log(res, 'res')
+}
+// 确认修改
+const submit = async () => {
+  if (fileList.value[0].hasOwnProperty('raw')) {
+    await uploadFileEvent()
+  }
+  const data: any = {
+    id: userInfo.value.id,
+    realname: form.name,
+    birthday: form.birthday,
+    sex: form.sex,
+    email: form.email,
+    facultiesId: form.facultiesId,
+    phone: form.phone,
+    avatar: avatar.value,
+  }
+  for (const key in data) {
+    if (data[key] === '') {
+      delete data[key]
+    }
+  }
+  await editUserInfoApi(data)
+  useUserStore.getUserInfo()
+  dialogVisible.value = false
+}
+onMounted(() => {})
+// 获取院系列表
+
+const FacultiesList = ref<any>([])
 
+const getFacultiesList = async (data: any) => {
+  const res: any = await getFaculties(data)
+  console.log(res, 'res')
+  FacultiesList.value = res.result
+}
+// 配置部门级联选择器
+const props = {
+  lazy: true,
+  checkStrictly: true,
+  emitPath: false,
+  async lazyLoad(node: any, resolve: any) {
+    await getFacultiesList({
+      primaryKey: 'key',
+      pid: node.value,
+    })
+    const nodes = FacultiesList.value.map((item: any) => ({
+      value: item.id,
+      label: item.title,
+    }))
+    resolve(nodes)
+  },
+}
+watch(
+  () => fileList.value,
+  (newVal, oldVal) => {
+    console.log(newVal, oldVal)
+    if (newVal.length === 1) {
+      ;(document.querySelector('.el-upload') as HTMLElement).style.display =
+        'none'
+    } else {
+      setTimeout(() => {
+        ;(document.querySelector('.el-upload') as HTMLElement).style.display =
+          'flex'
+      }, 0)
+    }
+  },
+)
+const setImageUrl = (url: string) => {
+  return import.meta.env.VITE_APP_BASE_API + '/sys/common/static/' + url
+}
+</script>
 <style lang="scss" scoped>
 .top-bg {
   position: relative;
@@ -196,7 +371,7 @@ const Router = useRouter()
       margin-bottom: 18px;
     }
 
-   //  margin-right: 22px;
+    //  margin-right: 22px;
 
     .content {
       display: flex;
@@ -355,7 +530,7 @@ const Router = useRouter()
         }
 
         width: 176px;
-        height: 60px;
+        height: 80px;
         display: flex;
         flex-direction: column;
         justify-content: space-between;
@@ -372,7 +547,7 @@ const Router = useRouter()
         }
 
         .text {
-          height: 22px;
+          // height: 22px;
           font-family:
             Microsoft YaHei UI,
             Microsoft YaHei UI;
@@ -387,12 +562,12 @@ const Router = useRouter()
   .right {
     width: 300px;
     padding: 25px;
-   //  background-color: pink;
-   display: flex;
-   flex-direction: column;
-   justify-content: space-around;
-   align-items: center;
-   .personalAbilityEvaluationCollectList{
+    //  background-color: pink;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-around;
+    align-items: center;
+    .personalAbilityEvaluationCollectList {
       width: 180px;
       // background-color: pink;
       height: 38px;
@@ -402,11 +577,11 @@ const Router = useRouter()
       border-radius: 10px;
       color: #fff;
       cursor: pointer;
-      transition: all .2s;
-   }
-   .personalAbilityEvaluationCollectList:hover{
+      transition: all 0.2s;
+    }
+    .personalAbilityEvaluationCollectList:hover {
       transform: scale(1.1);
-   }
+    }
   }
 }
 </style>