# 账号管理 — 前端技术方案

> **依据：** 《账号管理功能需求.md》v1.1、《账号管理技术方案.md》v1.1  
> **前端规范：** `doc/前端设计/前端设计.md`  
> **范围：** 仅 **ruoyi-ui 平台管理端** 全平台账号列表、修改资料、修改密码、删除；**不提供** 新增开户（由各业务模块创建）。  
> **实现状态：** 页面与 API 封装已落地，待后端 `/agri/accountManage` 联调。

---

## 1. 技术栈与写法约定

| 项 | 说明 |
|----|------|
| 框架 | Vue 2 + Element UI（与 RuoYi-Vue 一致） |
| 请求 | `@/utils/request` 封装的 axios |
| 参考页面 | `ruoyi-ui/src/views/agri/platformAdmin/index.vue`（双 el-card + 弹窗） |
| 二次确认 | 商户管理员改手机号：参考 `agri/org/shop/index.vue` 的 `needConfirm` 两步提交 |
| 布局 | 检索区 `el-card` + `<br/>` + 列表区 `el-card` + 表格 `border` |
| 密码规则 | `@/utils/passwordRule` 混入（6～20 位） |

---

## 2. 文件清单

| 类型 | 路径 | 说明 |
|------|------|------|
| 列表页 | `ruoyi-ui/src/views/agri/accountManage/index.vue` | 列表、修改账号/密码弹窗、批量删除 |
| API | `ruoyi-ui/src/api/agri/accountManage.js` | 列表、详情、改资料、改密、删除 |

**组件 name（keep-alive）：** `AgriAccountManage`

---

## 3. 菜单与路由

若依路由由 **后端菜单** 动态加载，前端需配置：

| 菜单名称 | 组件路径 | 路由 path（建议） | 权限标识 |
|----------|----------|-------------------|----------|
| 账号管理 | `agri/accountManage/index` | `accountManage` | `agri:accountManage:list` |

**上级菜单：** 农资管理 → **权限管理**（与 **管理员列表** 并列）

| 按钮权限 | 标识 |
|----------|------|
| 详情回显 | `agri:accountManage:query` |
| 修改账号 | `agri:accountManage:edit` |
| 修改密码 | `agri:accountManage:resetPwd` |
| 删除账号 | `agri:accountManage:remove` |

> **无** `add` 权限：本模块不提供新增/开户。

---

## 4. 页面结构

```text
账号管理
├── 检索区（el-card）
│   └── 账号名称 accountName（模糊 nick_name）
├── 列表区（el-card + border 表格）
│   ├── 工具栏：批量删除（无「添加」按钮）
│   ├── 列：账号名称、手机号（脱敏）、邮箱、店铺数、操作
│   ├── 多选列（userId=1 不可选）
│   └── 操作：修改账号、修改密码、删除
├── 修改账号弹窗（560px）
│   ├── 商户管理员顶部 el-alert 提示
│   ├── 账号名称、手机号、邮箱
│   └── 商户管理员只读展示店铺数
└── 修改密码弹窗（520px）
    ├── 账号名称（只读）
    ├── 新密码、确认新密码
    └── 两次输入须一致
```

---

## 5. 复用组件

| 组件 | 用途 |
|------|------|
| `Pagination` | 分页 |
| `RightToolbar` | 检索区显隐 |
| `el-alert` | 商户管理员改手机号提示 |

---

## 6. API 对接

**基路径：** `/agri/accountManage`（见 `src/api/agri/accountManage.js`）

| 前端方法 | HTTP | 路径 | 调用场景 |
|----------|------|------|----------|
| `listAccountManage` | GET | `/list` | 列表、检索、分页 |
| `getAccountManage` | GET | `/{userId}` | 修改账号/密码前回显（完整手机号） |
| `updateAccountProfile` | PUT | `/` | 修改资料 |
| `resetAccountPassword` | PUT | `/resetPwd` | 修改密码 |
| `delAccountManage` | DELETE | `/{userIds}` | 单独/批量删除 |

### 6.1 列表请求参数

| 字段 | 说明 |
|------|------|
| pageNum, pageSize | 分页 |
| accountName | **仅** 账号名称（nick_name）模糊检索 |

**排序：** 后端默认 `create_time DESC`。

### 6.2 列表行字段

| 字段 | 展示规则 |
|------|----------|
| accountName | 后端组装（昵称优先） |
| mobile | 后端 **脱敏** 展示 |
| email | 空显示「—」 |
| shopCount | **仅商户管理员** 为整数（含 0）；其他为 `null` 显示「—」 |

### 6.3 修改资料请求体

| 字段 | 表单 | 说明 |
|------|:----:|------|
| userId | 必填 | |
| accountName | 必填 | → nick_name |
| mobile | 必填 | 11 位；详情回显完整号 |
| email | 选填 | 邮箱格式 |
| confirm | 条件 | 商户管理员 **且** 手机号变更时：首次 `false`，二次确认后 `true` |

**needConfirm 流程：**

1. 首次提交改手机号 → 响应 `data.needConfirm=true`、`data.confirmMessage`
2. 前端 `$modal.confirm` → 再次提交 `confirm: true`
3. 未改手机号 → 不传 `confirm`

### 6.4 修改密码请求体

| 字段 | 说明 |
|------|------|
| userId | 必填 |
| password | 新密码（pwdValidator） |
| confirmPassword | 须与 password 一致 |

成功提示：「修改成功，下次登录请使用新密码」。

### 6.5 删除

| 场景 | 前端行为 |
|------|----------|
| 单独删除 | 行操作 → 二次确认 → `delAccountManage(userId)` |
| 批量删除 | 勾选 → 提示条数 → 逗号拼接 userIds |
| userId=1 | 无删除按钮；不可勾选 |
| 失败 | 后端 msg（不能删自己、内置管理员、仍有店铺等） |

**删除语义（后端）：** 商户管理员删绑定（须 shopCount=0）；其他账号逻辑删 sys_user。

---

## 7. 交互与校验

| 场景 | 前端行为 |
|------|----------|
| 检索 | 仅 accountName；不支持手机号检索 |
| 新增 | **无** 添加入口 |
| 修改账号 | 打开前 `getAccountManage` 拉完整手机号；记录 `originalMobile` |
| 商户管理员 | 弹窗顶部 warning；改手机号走 needConfirm |
| 修改密码 | 独立弹窗；前端校验两次密码一致 |
| 店铺数 | 列表与编辑弹窗：null 显示「—」 |

---

## 8. 权限指令

```html
v-hasPermi="['agri:accountManage:edit']"
v-hasPermi="['agri:accountManage:resetPwd']"
v-hasPermi="['agri:accountManage:remove']"
```

---

## 9. 与关联模块边界

| 模块 | 关系 |
|------|------|
| 管理员列表 | **并列**；管理员侧重角色/添加；本模块统览全 sys_user |
| 会员管理 | 会员账号出现在本列表；shopCount 为空 |
| 店铺管理 · 账号管理 | **共用** 写服务；改商户管理员资料后两处一致 |
| 商户管理 | 商户管理员 shopCount 统计所属店铺 |

---

## 10. 联调检查清单

- [ ] 菜单组件路径 `agri/accountManage/index` 可打开  
- [ ] 列表含平台管理员、商户管理员、会员等全部有效 sys_user  
- [ ] accountName 检索；**不** 支持手机号检索  
- [ ] 列表手机号脱敏；详情回显完整  
- [ ] 非商户管理员 shopCount 为「—」；商户管理员为数字  
- [ ] 修改账号：名称/手机/邮箱成功  
- [ ] 商户管理员改手机号：needConfirm 两步  
- [ ] 修改密码：两次一致校验；成功后提示  
- [ ] 单独/批量删除二次确认  
- [ ] 不可删 userId=1、当前用户、仍有店铺的商户管理员（后端 msg）  
- [ ] 无 POST 开户接口调用  

---

## 11. 非本期（前端）

| 项 | 说明 |
|----|------|
| 新增账号 | 各业务模块创建 |
| 详情抽屉 | 修改弹窗已覆盖 |
| 导入/导出 | 不做 |
| 按商户查店铺列表 | 店铺管理专册 |

---

## 12. 修订记录

| 版本 | 日期 | 说明 |
|------|------|------|
| v1.0 | 2026-06 | 首版：全平台账号列表、改资料/改密、批量删除、前端技术方案 |

---

*文档版本：v1.0 · ruoyi-ui · 关联《账号管理功能需求.md》v1.1 / 《账号管理技术方案.md》v1.1*
