auto_score/AES-front/src/components/person-setting/index.vue

<template>
  <CommonPage show-footer>
    <div class="w-full f-c-c">
      <div class="max-w-900 w-full flex justify-between gap-x-28">
        <div class="flex-1 rounded-10 p-20" border="solid 1px #ccc">
          <h3 class="m-b-20 text-center">修改信息</h3>
          <n-form
              ref="userInfoRef"
              :model="userInfoValue"
              :rules="userInofRules"
              label-placement="left"
              label-align="right"
              label-width="58px"
              :show-require-mark="false"
          >
            <n-form-item label="登录账号" path="username">
              <n-input v-model:value="userInfoValue.username" disabled></n-input>
            </n-form-item>
            <n-form-item label="学号">
              <n-input :value="disabledValue.studentNo" disabled></n-input>
            </n-form-item>
            <n-form-item label="中文名" path="chineseName">
              <n-input v-model:value="userInfoValue.chineseName"></n-input>
            </n-form-item>
            <n-form-item label="班级">
              <n-input :value="disabledValue.banji" disabled></n-input>
            </n-form-item>
            <n-form-item label="邮箱" path="email">
              <n-input v-model:value="userInfoValue.email"></n-input>
            </n-form-item>
            <n-form-item label="问题" path="question">
              <n-input v-model:value="userInfoValue.question"></n-input>
            </n-form-item>
            <n-form-item label="答案" path="answer">
              <n-input v-model:value="userInfoValue.answer"></n-input>
            </n-form-item>
            <n-form-item class="f-c-c">
              <n-button type="primary" @click="onSaveUserInfo">保存</n-button>
            </n-form-item>
          </n-form>
        </div>
        <div class="flex-1 rounded-10 p-20" border="solid 1px #ccc">
          <h3 class="m-b-20 text-center">修改密码</h3>
          <n-form
              ref="pwdInfoRef"
              :model="pwdInfoValue"
              :rules="pwdInforRules"
              label-placement="left"
              label-align="right"
              label-width="68px"
              :show-require-mark="false"
          >
            <n-form-item label="当前密码" path="password">
              <n-input
                  v-model:value="pwdInfoValue.password"
                  type="password"
                  placeholder="请输入密码"
              ></n-input>
            </n-form-item>
            <n-form-item label="新密码" path="newPassword">
              <n-input
                  v-model:value="pwdInfoValue.newPassword"
                  type="password"
                  placeholder="请输入新密码"
              ></n-input>
            </n-form-item>
            <n-form-item label="确认密码" path="confirmPassword">
              <n-input
                  v-model:value="pwdInfoValue.confirmPassword"
                  type="password"
                  placeholder="请重复输入新密码"
              ></n-input>
            </n-form-item>
            <n-form-item class="f-c-c">
              <n-button type="primary" @click="onSavePwd">保存</n-button>
            </n-form-item>
          </n-form>
        </div>
      </div>
    </div>
  </CommonPage>
</template>

<script setup>
import { ref } from 'vue'
import api from '@/api/user'
import { confirmPasswordRule, emailRule, requiredRule, strictPasswordRule } from '@/utils/validator'
import { useUserStore } from '@/store'
import sha256 from 'crypto-js/sha256';
import { generateRandomString } from '@/utils';

const DEFAULT_PWD_VALUE = {
  password: '',
  newPassword: '',
  confirmPassword: '',
}

const userStore = useUserStore()

const userInfoRef = ref(null)
const pwdInfoRef = ref(null)

const userInfoValue = ref({
  username: '',
  chineseName: '',
  email: '',
  question: '',
  answer: '',
})
const disabledValue = ref({
  banji: '',
  studentNo: '',
})
const pwdInfoValue = ref({ ...DEFAULT_PWD_VALUE })

const userInofRules = ref({
  username: requiredRule('用户名'),
  chineseName: {
    required: true,
    trigger: 'blur',
    min: 2,
    message: '中文名不能少于2位',
  },
  email: emailRule(false),
  question: requiredRule('问题'),
  answer: requiredRule('答案'),
})

const pwdInforRules = ref({
  password: requiredRule('密码'),
  newPassword: strictPasswordRule(),
  confirmPassword: confirmPasswordRule(pwdInfoValue, 'newPassword'),
})

//获取用户数据
const getUserInfo = async (myUsername) => {
  try {
    const res = await api.findStudentByusername({
      username: myUsername || userStore.getUsername(),
    })

    const { banji, studentNo, username, chineseName, email, question } = res.data
    disabledValue.value = {
      banji,
      studentNo,
    }
    userInfoValue.value = {
      username,
      chineseName,
      email,
      question,
      answer: '',
    }
  } catch (err) {
    ;(err) => $message.error(err.message)
  }
}

const onSaveUserInfo = () => {
  userInfoRef.value?.validate(async (errors) => {
    if (!errors) {
      try {
        const res = await api.updateUserInfo({
          ...userInfoValue.value,
        })
        $message.success('修改用户信息成功')
        getUserInfo(userInfoValue.value.username)
      } catch (err) {
        $message.error(err.message)
      }
    }
  })
}
const onSavePwd = () => {
  pwdInfoRef.value?.validate(async (errors) => {
    if (!errors) {
      try {
        const res = await api.updateUserPwd({
          password: sha256(pwdInfoValue.value.password.trim()).toString(),
          newPassword: sha256(pwdInfoValue.value.newPassword.trim()).toString(),
          sessionId: generateRandomString(64)+pwdInfoValue.value.newPassword.trim(), //应付检查的无用字段
        })
        $message.success('修改密码成功')
        pwdInfoValue.value = { ...DEFAULT_PWD_VALUE }
      } catch (err) {
        $message.error(err.message)
      }
    }
  })
}

// 执行
getUserInfo()
</script>