一、约定

标题	内容
路由地址	http://ip:port/personalInfo
路由页面	src\views\PersonalInfo\ChangePassword.vue
操作权限	无限制
API调用约定	当前组件进行API调用集中管理、内置组件仅做展现层控制。

二、属性（Attributes）

组件props传入参数

序号	参数名	类型	必填	说明	示例
1	formData	Object	是	用户信息数据	{id: 1, userName: "admin"}
2	saveBtnShow	Boolean	是	保存按钮显示状态	false

内部data参数

序号	参数名	类型	说明	默认值	可选值
1	editStatus	number	编辑状态	0	0,1
2	passwordFormData	object	密码表单数据	{oldPassword:'', password:'', confirmPassword:''}	--
3	passwordFormRules	object	密码表单验证规则	包含oldPassword、password、confirmPassword的验证规则	--
4	formRef	ref	表单引用	--	--

三、组件管理

（一）组件事件

四、事件方法

核心事件，含数据处理、API调用、事件管理管理等

1. handleChangePasswordBtn() 开始修改密码

设置编辑状态为1

重置密码表单数据

通知父组件显示保存按钮

2. cancel() 取消编辑

重置编辑状态为0

通知父组件隐藏保存按钮

3. save() 保存编辑

验证表单数据

构建请求参数

调用updatePassword接口更新密码

更新编辑状态

通知父组件隐藏保存按钮

通知父组件保存成功

4. validatePasswordConfirm() 自定义验证重复密码

判断确认密码是否为空

判断确认密码是否与新密码一致

5. checkPassword() 验证密码格式

使用正则表达式验证密码格式（6-16位，支持字母、数字和符号，区分大小写）

五、表单验证规则

1. 原密码验证规则

必填项，触发方式为blur

2. 新密码验证规则

必填项，触发方式为blur

格式验证：6-16位，支持字母、数字和符号，区分大小写

3. 确认新密码验证规则

必填项，触发方式为blur

自定义验证：与新密码一致

ChangePassword组件

一、约定#

二、属性（Attributes）#

三、组件管理#

（一）组件事件#

四、事件方法#

1. handleChangePasswordBtn() 开始修改密码#

2. cancel() 取消编辑#

3. save() 保存编辑#

4. validatePasswordConfirm() 自定义验证重复密码#

5. checkPassword() 验证密码格式#

五、表单验证规则#

1. 原密码验证规则#

2. 新密码验证规则#

3. 确认新密码验证规则#

一、约定

二、属性（Attributes）

三、组件管理

（一）组件事件

四、事件方法

1. handleChangePasswordBtn() 开始修改密码

2. cancel() 取消编辑

3. save() 保存编辑

4. validatePasswordConfirm() 自定义验证重复密码

5. checkPassword() 验证密码格式

五、表单验证规则

1. 原密码验证规则

2. 新密码验证规则

3. 确认新密码验证规则