frontend/src/views/authentication/ManageProfile.vue

<script setup>
import {onMounted, ref} from 'vue';
import {ElButton, ElForm, ElFormItem, ElInput, ElMessage, ElRadio, ElRadioGroup, ElTabPane, ElTabs} from 'element-plus';
import 'element-plus/dist/index.css';
import axios from "axios";
import {useStore} from 'vuex';
import {useRouter} from 'vue-router';

const store = useStore();
const router = useRouter();

const token = store.getters['authentication/token'];
const nickname = ref('');
const phoneNumber = ref('');
const email = ref('');
const gender = ref('');
const department = ref('');
const role = ref('');
const currentPassword = ref('');
const newPassword = ref('');
const confirmPassword = ref('');

onMounted(
    async () => {
      try {
        // 从Vuex中获取JWT token
        if (!token) {
          store.commit('authentication/logout');
          router.push('/login');
        }

        // 发送请求并附带token参数
        const response = await axios.get(`/api/userProfile?token=${token}`);

        if (response.status === 200) {
          const user = response.data;
          nickname.value = user.nickname;
          phoneNumber.value = user.phoneNumber;
          email.value = user.email;
          gender.value = user.gender;
          department.value = user.department;
          role.value = user.role;
        } else {
          ElMessage.error('获取用户信息失败，请重试');
        }
      } catch (error) {
        console.error('Error fetching user profile:', error);
        ElMessage.error('获取用户信息失败，请重试');
      }
    }
)

const handleSaveProfile = async () => {
  console.log('Saving profile with', {
    nickname: nickname.value,
    phoneNumber: phoneNumber.value,
    email: email.value,
    gender: gender.value,
    department: department.value,
    role: role.value
  });
  // 处理保存资料逻辑
  try {
    const response = await axios.post('/api/manageUserProfile', {
      token: token,
      nickname: nickname.value,
      phoneNumber: phoneNumber.value,
      email: email.value,
      gender: gender.value,
      department: department.value,
      role: role.value
    });
    if (response.status === 200) {
      ElMessage.success('资料保存成功');
    } else {
      ElMessage.error('保存用户信息失败，请重试');
    }
  } catch (error) {
    console.info('Error saving user profile:', error);
    ElMessage.error('保存用户信息失败，请重试');
  }

};

const handleChangePassword = async () => {
  if (newPassword.value !== confirmPassword.value) {
    ElMessage.error('新密码和确认密码不一致');
    return;
  }
  // console.log('Changing password with', {currentPassword: currentPassword.value, newPassword: newPassword.value});
  // 处理修改密码逻辑
  try {
    const response = await axios.post('/api/changePassword', {
      token: token,
      currentPassword: currentPassword.value,
      newPassword: newPassword.value
    });
    if (response.status === 200) {
      ElMessage.success('密码修改成功，请重新登录');
      store.commit('authentication/logout');
      router.push('/login');
    } else {
      ElMessage.error('修改密码失败，请重试');
    }
  } catch (error) {
    console.info('Error changing password:', error);
    ElMessage.error('修改密码失败，请重试');
  }
};
</script>

<template>
  <div class="profile-container">
    <div class="profile-box">
      <h2>基本资料</h2>
      <ElTabs>
        <ElTabPane label="基本资料">
          <ElForm @submit.prevent="handleSaveProfile" label-width="100px">
            <ElFormItem label="用户昵称">
              <ElInput v-model="nickname" type="text" placeholder="请输入用户昵称" required/>
            </ElFormItem>
            <ElFormItem label="手机号码">
              <ElInput v-model="phoneNumber" type="text" placeholder="请输入手机号码" required/>
            </ElFormItem>
            <ElFormItem label="邮箱">
              <ElInput v-model="email" type="email" placeholder="请输入邮箱" required/>
            </ElFormItem>
            <ElFormItem label="性别">
              <ElRadioGroup v-model="gender">
                <ElRadio label="男">男</ElRadio>
                <ElRadio label="女">女</ElRadio>
              </ElRadioGroup>
            </ElFormItem>
            <ElFormItem label="部门">
              <ElInput v-model="department" type="text" placeholder="请输入部门" required/>
            </ElFormItem>
            <ElFormItem label="角色">
              <ElInput v-model="role" type="text" placeholder="请输入角色" required/>
            </ElFormItem>
            <!--            <ElFormItem label="角色">-->
            <!--              <ElSelect v-model="role" placeholder="请选择角色" required>-->
            <!--                <ElOption label="管理员" value="admin"/>-->
            <!--                <ElOption label="用户" value="user"/>-->
            <!--              </ElSelect>-->
            <!--            </ElFormItem>-->
            <ElFormItem>
              <ElButton type="primary" @click="handleSaveProfile">保存</ElButton>
              <ElButton type="danger">取消</ElButton>
            </ElFormItem>
          </ElForm>
        </ElTabPane>
        <ElTabPane label="修改密码">
          <ElForm @submit.prevent="handleChangePassword" label-width="100px">
            <ElFormItem label="旧密码">
              <ElInput v-model="currentPassword" type="password" placeholder="请输入旧密码" required/>
            </ElFormItem>
            <ElFormItem label="新密码">
              <ElInput v-model="newPassword" type="password" placeholder="请输入新密码" required/>
            </ElFormItem>
            <ElFormItem label="确认密码">
              <ElInput v-model="confirmPassword" type="password" placeholder="请输入确认密码" required/>
            </ElFormItem>
            <ElFormItem>
              <ElButton type="primary" @click="handleChangePassword">修改密码</ElButton>
            </ElFormItem>
          </ElForm>
        </ElTabPane>
      </ElTabs>
      <ElButton type="text" @click="() => $router.push('/profile')">返回</ElButton>
    </div>
  </div>
</template>


<style scoped>
.profile-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background: white;
}

.profile-box {
  background: white;
  padding: 2rem;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  width: 90%;
  max-width: 600px;
}

h2 {
  margin-bottom: 1rem;
}

.el-form-item {
  margin-bottom: 1rem;
  text-align: left;
}

.el-form-item label {
  display: block;
  margin-bottom: 0.5rem;
}

.el-input {
  width: 100%;
}

.el-button--primary {
  background-color: #007bff;
  color: white;
}

.el-button--primary:hover {
  background-color: #0056b3;
}
</style>