郭庆泰
dd39fdba5c
- page-card 加 max-width: 1200px (表单页标准)
- form 上 inline style='max-width:600px' → class='account-form' (避 SKILL 禁忌 inline style)
- CSS 加 .account-form { max-width: 600px } (跟 admin/Account.vue 同款)
83 lines
3.8 KiB
Vue
83 lines
3.8 KiB
Vue
<template>
|
|
<div class="page-card manager-accounts">
|
|
<div class="breadcrumb">首页 / 账号管理</div>
|
|
|
|
<el-form :model="form" label-width="120px" :rules="rules" ref="formRef" class="account-form">
|
|
<el-form-item label="姓名" prop="nickName"><el-input v-model="form.nickName" placeholder="请输入姓名" /></el-form-item>
|
|
<el-form-item label="手机号" prop="phonenumber"><el-input v-model="form.phonenumber" placeholder="请输入手机号" /></el-form-item>
|
|
|
|
<el-form-item label="原密码" prop="oldPassword"><el-input v-model="form.oldPassword" type="password" show-password placeholder="请输入原密码" /></el-form-item>
|
|
<el-form-item label="新密码" prop="newPassword"><el-input v-model="form.newPassword" type="password" show-password placeholder="请输入新密码" /></el-form-item>
|
|
<el-form-item label="确认密码" prop="confirmPassword"><el-input v-model="form.confirmPassword" type="password" show-password placeholder="请再次输入新密码" /></el-form-item>
|
|
<div class="filter-tip">* 密码长度 6-20 位,支持数字、字母、特殊字符;留空表示不修改密码</div>
|
|
<el-form-item><el-button type="primary" :loading="saving" @click="onSave">保存</el-button><el-button @click="onCancel">取消</el-button></el-form-item>
|
|
</el-form>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { reactive, ref, onMounted } from 'vue'
|
|
import { ElMessage } from 'element-plus'
|
|
import request from '@/utils/request'
|
|
|
|
const form = reactive({ nickName: '', phonenumber: '', oldPassword: '', newPassword: '', confirmPassword: '' })
|
|
const profile = ref({})
|
|
const saving = ref(false)
|
|
const formRef = ref(null)
|
|
|
|
const rules = {
|
|
nickName: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
|
|
phonenumber: [{ pattern: /^1[3-9]\d{9}$/, message: '手机号格式不正确', trigger: 'blur' }],
|
|
oldPassword: [{ required: false }],
|
|
newPassword: [{ min: 6, max: 20, message: '密码长度 6-20 位', trigger: 'blur' }],
|
|
confirmPassword: [{
|
|
validator: (rule, val, cb) => {
|
|
if (form.newPassword && val !== form.newPassword) return cb(new Error('两次输入密码不一致'))
|
|
cb()
|
|
}, trigger: 'blur'
|
|
}],
|
|
}
|
|
|
|
async function loadProfile() {
|
|
try {
|
|
const { data } = await request({ url: '/system/user/profile', method: 'get' })
|
|
profile.value = data || {}
|
|
form.nickName = profile.value.nickName || ''
|
|
form.phonenumber = profile.value.phonenumber || ''
|
|
} catch { ElMessage.error('获取个人信息失败') }
|
|
}
|
|
|
|
async function onSave() {
|
|
if (form.newPassword && form.newPassword !== form.confirmPassword) {
|
|
ElMessage.error('两次输入密码不一致'); return
|
|
}
|
|
await formRef.value.validate()
|
|
saving.value = true
|
|
try {
|
|
await request({ url: '/system/user/profile', method: 'put', data: { nickName: form.nickName, phonenumber: form.phonenumber, sex: profile.value.sex } })
|
|
if (form.newPassword) {
|
|
await request({ url: '/system/user/profile/updatePwd', method: 'put', data: { oldPassword: form.oldPassword, newPassword: form.newPassword } })
|
|
}
|
|
ElMessage.success('保存成功')
|
|
form.oldPassword = ''; form.newPassword = ''; form.confirmPassword = ''
|
|
loadProfile()
|
|
} catch (e) {
|
|
ElMessage.error(e?.msg || '保存失败')
|
|
} finally { saving.value = false }
|
|
}
|
|
function onCancel() {
|
|
form.nickName = profile.value.nickName || ''
|
|
form.phonenumber = profile.value.phonenumber || ''
|
|
form.oldPassword = ''; form.newPassword = ''; form.confirmPassword = ''
|
|
}
|
|
|
|
onMounted(loadProfile)
|
|
</script>
|
|
|
|
<style scoped>
|
|
/* 整页面板 (与 People.vue 风格一致) */
|
|
.manager-accounts { padding: 16px; max-width: 1200px; }
|
|
.account-form { max-width: 600px; }
|
|
.breadcrumb { font-size: 13px; color: #8c8c8c; margin-bottom: 12px; }
|
|
.filter-tip { color: #909399; font-size: 12px; margin-bottom: 12px; padding-left: 120px; }
|
|
</style> |