山东大学项目实训Web实验室（WebLab）（十） 老师端个人中心

前言

项目仓库
本项目是为开发一套容器化的开发、运行、测试环境，用以支持Web开发、程序设计等课程的实验教学。
代码内容均为我和肖同学共同完成。

任务目标

设计并且编写主界面
主界面内容：

• 学生界面
  • 项目中心
    • 课程任务
    • 课程通知
    • 我的项目
  • 上传中心
  • 编辑中心
  • 组织中心
• 老师界面
  • 组织中心
  • 发布中心
  • 学生课程作业

我的任务

• 页面外观与布局设计
• 页面交互设计
• 页面编写

展示内容

• 老师端个人中心

代码

view/personal-view.vue

<template>
  <el-page-header :icon="ArrowLeft" content="修改个人信息" @back="goback()" />
  <el-main>
    <el-descriptions :column="1" border>
      <el-descriptions-item label="姓名" label-align="center" align="center" label-class-name="my-label"
        class-name="my-content" width="30px">
        <el-input type="text" v-model="selfInfo.realName" />
      </el-descriptions-item>
      <el-descriptions-item label="教职工号" label-align="center" align="center">
        <el-input type="text" v-model="selfInfo.teacherId" />
      </el-descriptions-item>
      <el-descriptions-item label="头像" label-align="center" align="center">
        <el-upload class="avatar-uploader" action="#" :show-file-list="false" :before-upload="beforeAvatarUpload"
          :http-request="submitImage">
          <img v-if="selfInfo.imageUrl" :src="selfInfo.imageUrl" class="avatar" />
          <el-icon v-else class="avatar-uploader-icon">
            <Plus />

          </el-icon>
          <template #tip>
            <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过2MB</div>
          </template>
        </el-upload>
      </el-descriptions-item>
      <el-descriptions-item label="个性签名" label-align="center" align="center">
        <el-input type="text" v-model="selfInfo.signature" />
      </el-descriptions-item>
     
    </el-descriptions>
  </el-main>
  <el-footer>
    <el-row :gutter="20">
      <el-col :span="12" />
      <el-col :span="8">
        <el-button @click="submit()">保存</el-button>
      </el-col>
      <el-col :span="6" />
    </el-row>
  </el-footer>


</template>
<script lang="ts" setup>
import { ref, reactive } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import type { Action } from 'element-plus'
import { Plus, ArrowLeft } from '@element-plus/icons-vue'
import { useRouter } from "vue-router"
import type { UploadProps } from 'element-plus'
import { request } from '@/network/request'
import { useLoginStore } from '@/stores/store'
const router = useRouter();
const store = useLoginStore();
const selfInfo = ref({
  realName: '',
  teacherId: '',
  imageUrl: '',
  signature: ''
})
request('/weblab/user/getUserWithInfo', undefined, store.getToken)
  .then(res => {
    console.log(res.data);
    if (res.data.msg == 'success') {
      const data = res.data.pkg;
      selfInfo.value.realName = data.realName;
      selfInfo.value.teacherId = data.studentId;
      selfInfo.value.imageUrl = data.headImg;
      selfInfo.value.signature = data.signature;
    }
  })
const beforeAvatarUpload: UploadProps['beforeUpload'] = (rawFile) => {
  if (rawFile.type !== 'image/jpeg' && rawFile.type !== 'image/png') {
    ElMessage.error('头像必须为JPG/PNG格式!')
    return false;
  } else if (rawFile.size / 1024 / 1024 > 2) {
    ElMessage.error('头像大小不能超过2MB!');
    return false
  }
  return true
}
const submit = () => {
  let param = new FormData();
  // if (selfInfo.value.realName != '')
  param.append('realName', selfInfo.value.realName);
  // if (selfInfo.value.imageUrl != '')
  param.append('headImg', selfInfo.value.imageUrl);
  // if (selfInfo.value.signature != '')
  param.append('signature', selfInfo.value.signature);
  request('/weblab/user/setUserInfo', param)
    .then(res => {
      if (res.status == 200 && res.data.msg == 'success') {
        ElMessage({
          showClose: true,
          message: '保存成功',
          type: 'success',
          grouping: true
        })
      }
    })
    .catch(error => {
      console.log(error);
    })
}
const submitImage = (file: any) => {

  let param = new FormData();
  param.append('image', file.file);
  request('/weblab/user/uploadHeadImg', param, store.getToken)
    .then(res => {
      if (res.data.msg == 'success') {
        selfInfo.value.imageUrl = res.data.pkg;
      }
    })
    .catch(error => {
      console.log(error);
    })
}
// const checkAll = ref(true)
// const isIndeterminate = ref(true)
// const checkedCities = ref(['lesson1', 'lesson2', 'lesson3', 'lesson4'])
// const cities = ['lesson1', 'lesson2', 'lesson3', 'lesson4']
// const addlesson = () => {
//   ElMessageBox.prompt('输入课程班级邀请码', '添加课程班级', {
//     confirmButtonText: 'OK',
//     cancelButtonText: 'Cancel',
//   })

// }
// const deletelesson = (currIdx: number) => {
//   ElMessageBox.confirm('将退出课程班级，继续？', 'Warning',
//       {
//         confirmButtonText: 'OK',
//         cancelButtonText: 'Cancel',
//         type: 'warning',
//       })
//       // .then(() => {
//       //   curriculumData.value.splice(currIdx, 1);
//       // })
//       // .catch(() => {
//       //
//       // })
// }
// const handleCheckAllChange = (val: boolean) => {
//   checkedCities.value = val ? cities : []
//   isIndeterminate.value = false
// }
// const handleCheckedCitiesChange = (value: string[]) => {
//   const checkedCount = value.length
//   checkAll.value = checkedCount === cities.length
//   isIndeterminate.value = checkedCount > 0 && checkedCount < cities.length
// }

function goback() {
  router.push({ path: '/coding' });
}
</script>
<style scoped>
.my-label {
  background: var(--el-color-success-light-9);
}

.my-content {
  background: var(--el-color-danger-light-9);
}

.avatar-uploader .avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
<style>
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}
</style>