eas_webadmin/src/views/system/profile/index.vue

<template>
  <div class="wh-full bg-white">
    <n-grid cols="2 s:2 m:2 l:3 xl:3 2xl:3">
      <n-grid-item>
        <n-form ref="formRef" :label-width="80" :model="formValue" :rules="rules">
          <n-form-item label="昵称" path="name">
            <n-input v-model:value="formValue.name" placeholder="请输入昵称" />
          </n-form-item>

          <n-form-item label="邮箱" path="email">
            <n-input v-model:value="formValue.email" placeholder="请输入邮箱" />
          </n-form-item>

          <n-form-item label="联系电话" path="phone">
            <n-input v-model:value="formValue.phone" placeholder="请输入联系电话" />
          </n-form-item>

          <n-form-item label="用户密码" path="passwd">
            <n-input v-model:value="formValue.passwd" type="password" placeholder="请输入联系地址" />
          </n-form-item>

          <n-form-item label="重复密码" path="rePasswd">
            <n-input v-model:value="formValue.rePasswd" type="password" placeholder="请输入联系地址" />
          </n-form-item>

          <div>
            <n-space>
              <n-button type="primary" @click="formSubmit">更新基本信息</n-button>
            </n-space>
          </div>
        </n-form>
      </n-grid-item>
    </n-grid>
  </div>
</template>
<script setup lang="ts">
import { reactive, ref } from 'vue';
import type { FormItemRule } from 'naive-ui';
import { useAuthStore } from '@/store';
import type { UsersRes } from './api';
import { getUserProFile, userProFile } from './api';
const formRef: any = ref(null);
const auth = useAuthStore();
const formValue = reactive<UsersRes>({
  id: 0,
  name: '',
  phone: '',
  email: '',
  passwd: '',
  rePasswd: ''
});
getUserProFile().then(requestData => {
  Object.assign(formValue, requestData.data);
});
function validatePasswordSame(role: FormItemRule, value: string): boolean {
  if (formValue.passwd === null) {
    return true;
  }
  if (role.message) {
    return value === formValue.passwd;
  }
  return false;
}
const rules = {
  name: {
    required: true,
    message: '请输入昵称',
    trigger: 'blur'
  },
  email: {
    required: true,
    message: '请输入邮箱',
    trigger: 'blur'
  },
  phone: {
    required: true,
    message: '请输入联系电话',
    trigger: 'input'
  },
  passwd: [
    {
      validator(rule: FormItemRule, value: string) {
        if (value === '' || value === null) {
          return true;
        }
        if (rule.message) {
          return value.length >= 8;
        }
        return false;
      },
      trigger: ['change'],
      message: '密码长度需要大于 8'
    }
  ],
  rePasswd: [
    {
      validator: validatePasswordSame,
      message: '两次密码输入不一致',
      trigger: ['change']
    }
  ]
};

function formSubmit() {
  formRef.value.validate(async (status: Array<Array<object>>) => {
    if (status === undefined) {
      const res = await userProFile(formValue);
      if (res.status) {
        window.$message?.success('操作成功!');
        if (formValue.passwd) {
          auth.resetAuthStore();
        }
      }
    }
  });
}
</script>
<style scoped></style>