# 账号管理 > 模块编码：account > 端侧：Web专属（仅超级管理员） > 关联文档：01-模块划分 §1.1~1.4 / 02-功能清单-超级管理员 §1 / 03-业务流转逻辑-超级管理员 §1~3 / 05-接口规范 §9.2 / 06-项目技术要求 §4.1~4.3 > 强制规范遵循 `07-前端界面开发规范.md` ## 功能概览 | 项目 | 说明 | |------|------| | 菜单名称 | 账号管理 | | 子菜单 | 医院信息管理、物业公司信息管理、医院账号管理、物业公司管理员账号管理、到期账号管理、到期提醒规则配置 | | 功能编号 | SA-A-01 ~ SA-A-08 | | 权限编码前缀 | permission:user:* / permission:config:* | --- ## 页面1：医院信息管理列表页 **页面编号**：SA-A-01-P01 **端侧归属**：Web专属 **页面路径**：/account/hospitals ### 界面布局 ``` ┌──────────────────────────────────────────────────────────────────┐ │ [面包屑] 账号管理 > 医院信息管理 │ ├──────────────────────────────────────────────────────────────────┤ │ [查询条件区] │ │ 医院名称[____] 状态[▼] 联系人[____] [查询] [重置] │ ├──────────────────────────────────────────────────────────────────┤ │ [操作栏] [新增医院] │ ├──────────────────────────────────────────────────────────────────┤ │ [列表区] │ │ 序号 | 医院名称 | 院区数 | 联系人 | 联系电话 | 状态 | 操作 │ │ 1 | XX医院 | 3 | 张三 | 138****1234| 启用 | 编辑 停用 │ │ 2 | YY医院 | 1 | 李四 | 139****5678| 停用 | 编辑 启用 │ ├──────────────────────────────────────────────────────────────────┤ │ [分页] 共50条 每页[20▼] < 1 2 3 > │ └──────────────────────────────────────────────────────────────────┘ ``` ### 查询条件 | 字段名 | 控件类型 | 必填 | 默认值 | 说明 | |--------|----------|------|--------|------| | 医院名称 | 文本输入 | 否 | — | 模糊匹配 | | 状态 | 下拉单选 | 否 | 全部 | 启用/停用 | | 联系人 | 文本输入 | 否 | — | 模糊匹配 | ### 列表字段 | 序号 | 字段名 | 列宽 | 支持排序 | 说明 | |------|--------|------|----------|------| | 1 | 序号 | 60px | — | 自增序号 | | 2 | 医院名称 | 180px | 是 | — | | 3 | 院区数 | 80px | 否 | 显示关联院区数量，点击展开院区列表 | | 4 | 联系人 | 100px | 否 | — | | 5 | 联系电话 | 130px | 否 | 脱敏显示 | | 6 | 创建时间 | 150px | 是 | 默认倒序 | | 7 | 状态 | 80px | 是 | 启用(绿色)/停用(红色)标签 | | 8 | 操作 | 140px | — | 编辑/启停 | ### 操作按钮 | 按钮 | 权限编码 | 位置 | 显示条件 | 说明 | |------|----------|------|----------|------| | 新增医院 | permission:user:create | 操作栏 | 始终 | 跳转新增页 | | 编辑 | permission:user:update | 行操作 | 始终 | 跳转编辑页 | | 启用/停用 | permission:user:update | 行操作 | 始终 | 二次确认弹窗 | ### 角色差异化视图 | 角色 | 可见按钮 | 数据范围 | 备注 | |------|----------|----------|------| | 超级管理员 | 全部按钮 | 全部医院 | — | ### 交互流程要求 1. **页面加载流程** - 进入页面 → 调用 `GET /api/v1/hospitals` 加载列表数据（默认第1页，每页20条，创建时间倒序） - 并行加载下拉选项：状态下拉（启用/停用） - 列表为空时显示空状态插图 + "暂无医院信息" 提示文字 - 加载中显示 `el-table` 骨架屏（skeleton）效果 2. **查询交互流程** - 用户填写查询条件 → 点击"查询"按钮 → 前端校验无特殊限制 → 调用API携带筛选参数 → 重新渲染列表（重置到第1页） - 点击"重置"→ 清空所有查询条件 → 重新加载默认列表 - 支持回车键触发查询 3. **行内操作流程** - **编辑**：点击"编辑"→ 路由跳转至 `/account/hospitals/:id/edit` - **启用/停用**：点击"启用"或"停用"→ 弹出 `el-message-box` 二次确认（"确认停用XX医院？停用后该医院下所有账号将无法登录"）→ 确认后调用 `PUT /api/v1/hospitals/{id}/toggle-status` → 成功后 `el-message` 提示"操作成功" → 刷新当前列表 4. **异常处理** - API请求失败 → `el-message.error` 提示错误信息，列表保持原数据 - 网络超时 → 提示"网络异常，请稍后重试" - 启停操作失败 → 提示具体错误原因（如"该医院下存在进行中的工单，无法停用"） 5. **权限控制交互** - 无 `permission:user:create` 权限 → "新增医院"按钮不渲染 - 无 `permission:user:update` 权限 → 行操作列不渲染"编辑"和"启用/停用"按钮 6. **[H1]防重复请求** - 查询/筛选：点击"查询"按钮后立即 disabled=true + 显示loading态，API返回后恢复；查询期间再次点击无效 - 行内操作（编辑/启停）：点击操作按钮后该行所有操作按钮禁用 + 按钮显示loading旋转图标；操作完成后恢复 - 分页切换：切换页码时取消上一页未完成请求（abortController）后再发起新请求 - 页面初始化并行请求（列表+下拉数据）之间互不阻塞 7. **[H2]超时与加载反馈** - 列表查询API：timeout=15秒；加载中表格区显示v-loading骨架屏遮罩 - 启停等写操作API：timeout=30秒；操作按钮:loading态 - 超时处理：自动中断 → ElMessage.error("请求超时，请检查网络后重试") → 按钮恢复可用 - 列表加载超过2秒时显示全局ElLoading进度提示 8. **[H3]操作确认机制** - 启用/停用操作：ElMessageBox.confirm("确定要{启用/停用}「{对象名称}」吗？停用后该账号将无法登录", "操作确认", { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning' }) - 确认弹窗期间底层页面不可点击（modal遮罩） 9. **[H8]操作结果反馈** - 成功操作：ElMessage.success("{操作}成功"，duration=2000ms) → silent方式刷新列表数据（不带loading闪烁） - 失败：ElMessage.error(后端message或"操作失败，请稍后重试"，duration=0手动关闭) - 网络异常：提示"网络连接异常，请检查网络后重试"+ 提供"重试"文字按钮 ### 组件规范 | 元素 | 组件 | 配置参数 | |------|------|----------| | 查询条件区 | el-form | inline, label-width="auto" | | 医院名称/联系人 | el-input | clearable, maxlength=50, placeholder="请输入" | | 状态下拉 | el-select | clearable, placeholder="请选择" | | 查询按钮 | el-button | type="primary", icon="Search" | | 重置按钮 | el-button | icon="Refresh" | | 列表 | el-table | stripe, border, size="default", v-loading | | 状态标签 | el-tag | 启用:type="success", 停用:type="danger" | | 院区数（可点击） | el-link | type="primary", underline=false | | 操作按钮 | el-button | type="primary", link, size="small" | | 分页 | el-pagination | layout="total, sizes, prev, pager, next", :page-sizes="[10,20,50]" | | 新增医院 | el-button | type="primary", icon="Plus" | ### 校验规则 | 字段 | 规则 | 错误提示 | |------|------|----------| | 医院名称（查询） | 最大50字符 | — | | 联系人（查询） | 最大20字符 | — | ### 响应式布局 | 断点 | 布局调整 | |------|----------| | ≥1280px（桌面端） | 查询条件区一行排列；列表完整展示所有列 | | 1024-1279px（Pad横屏） | 查询条件区一行排列；"联系人"列隐藏，"创建时间"列隐藏 | | 768-1023px（Pad竖屏） | 查询条件区两行排列；列表仅显示：序号、医院名称、状态、操作；其余列折叠，点击行展开详情 | --- ## 页面2：医院信息新增/编辑页 **页面编号**：SA-A-01-P02 **端侧归属**：Web专属 **页面路径**：/account/hospitals/create 或 /account/hospitals/:id/edit ### 界面布局 ``` ┌──────────────────────────────────────────────────────────────────┐ │ [面包屑] 账号管理 > 医院信息管理 > 新增医院 │ ├──────────────────────────────────────────────────────────────────┤ │ ── 基本信息 ────────────────────────────────────────────────── │ │ 医院名称：[____________] 状态：[●启用 ○停用] │ │ 医院地址：[____________________________] │ │ 联系人： [__________] 联系电话：[____________] │ ├──────────────────────────────────────────────────────────────────┤ │ ── 院区信息 ────────────────────────────────────────────────── │ │ [ + 添加院区 ] │ │ ┌────────────────────────────────────────────────────────────┐ │ │ │ 院区1 名称：[主院区] 地址：[____] 联系人：[____] [删除] │ │ │ │ 院区2 名称：[东院区] 地址：[____] 联系人：[____] [删除] │ │ │ └────────────────────────────────────────────────────────────┘ │ ├──────────────────────────────────────────────────────────────────┤ │ [取消] [保存] │ └──────────────────────────────────────────────────────────────────┘ ``` ### 表单字段（基本信息） | 字段名 | 控件类型 | 必填 | 默认值 | 数据来源 | 校验规则 | |--------|----------|------|--------|----------|----------| | 医院名称 | 文本输入 | 是 | — | 自填 | 最大50字，全局唯一 | | 状态 | 单选按钮 | 是 | 启用 | 固定选项 | — | | 医院地址 | 文本输入 | 否 | — | 自填 | 最大200字 | | 联系人 | 文本输入 | 否 | — | 自填 | 最大20字 | | 联系电话 | 文本输入 | 否 | — | 自填 | 手机号格式 | ### 表单字段（院区信息，支持多条） | 字段名 | 控件类型 | 必填 | 默认值 | 数据来源 | 校验规则 | |--------|----------|------|--------|----------|----------| | 院区名称 | 文本输入 | 是 | — | 自填 | 最大30字，同医院内唯一 | | 院区地址 | 文本输入 | 是 | — | 自填 | 最大200字 | | 联系人 | 文本输入 | 否 | — | 自填 | 最大20字 | ### 通知触发 | 触发操作 | 通知对象 | 通知方式 | 消息模板 | 文档来源 | |----------|----------|----------|----------|----------| | 创建医院 | — | — | — | 仅记录操作日志 | ### API端点 | 页面操作 | API路径 | 方法 | 说明 | |----------|---------|------|------| | 新增医院 | /api/v1/hospitals | POST | 含院区列表 | | 编辑医院 | /api/v1/hospitals/{id} | PUT | 含院区列表 | | 查询详情 | /api/v1/hospitals/{id} | GET | 编辑时回填 | ### 交互流程要求 1. **页面加载流程** - 新增模式：页面空白表单，状态默认"启用" - 编辑模式：根据路由参数 `:id` 调用 `GET /api/v1/hospitals/{id}` 回填表单数据 - 加载中显示表单骨架屏 2. **表单填写与提交流程** - 用户逐项填写基本信息 → 动态添加/删除院区行 → 点击"保存"→ 前端校验 → 调用API → 成功后 `el-message.success` → 路由跳转回列表页 - 编辑模式下保存 → 调用 `PUT /api/v1/hospitals/{id}` → 成功后返回列表页 3. **院区动态表单交互** - 点击"+添加院区"→ 在院区列表末尾新增一行空表单 - 点击"删除"→ 二次确认后移除该院区行（至少保留一个院区） - 院区行内字段实时校验 4. **联动交互** - 无特殊联动逻辑 5. **异常处理** - 唯一性校验失败（医院名称重复）→ 对应字段下方显示红色错误提示"该医院名称已存在" - API失败 → `el-message.error` 提示错误信息，表单保持当前数据不丢失 - 编辑模式下详情加载失败 → 提示"数据加载失败"并提供"返回列表"按钮 6. **权限控制交互** - 无保存权限时 → "保存"按钮禁用 7. **[H1]防重复请求** - 点击"保存"按钮后：按钮 :loading=true + 文案变为"保存中..." + 按钮disabled；API返回（成功/失败/超时）后恢复 - 保存期间不允许再次点击保存或关闭页面 - 院区行动态增删操作：删除院区确认弹窗pending期间禁用其他删除按钮 8. **[H2]超时与加载反馈** - 新增/编辑提交API（POST/PUT）：timeout=30秒 - 编辑模式详情回填API（GET）：timeout=15秒 - 提交中保存按钮保持:loading态 + 表单区域不可编辑（半透明遮罩可选） - 超时处理：中断请求 → 提示"保存超时，请检查网络后重试" → 按钮恢复 9. **[H3]操作确认机制** - 删除院区行前 ElMessageBox.confirm("确定要删除该院区吗？删除后数据无法恢复", "删除确认", { type: 'warning' }) 10. **[H4]脏数据检测** - 编辑模式进入时deep clone表单初始数据作为快照 - 用户修改任意字段后标记isDirty=true - 点击"取消"按钮或浏览器后退时： * isDirty=true → ElMessageBox.confirm("当前修改尚未保存，离开后将丢失未保存的内容，是否确认离开？") → 确认则离开/取消则停留 * isDirty=false → 直接执行离开操作 - 使用vue-router的beforeRouteLeave导航守卫拦截路由切换 - 保存成功后将当前数据设为新快照，重置isDirty=false 11. **[H8]操作结果反馈** - 保存成功：ElMessage.success("保存成功", duration=2000) → 延迟300ms后router.back()返回列表页 - 保存失败：ElMessage.error(错误信息, duration=0)；表单数据保持不丢失 - 唯一性校验失败：对应字段下方红色文字提示，不弹message ### 组件规范 | 元素 | 组件 | 配置参数 | |------|------|----------| | 基本信息表单 | el-form | label-width="100px", :model, :rules | | 医院名称 | el-input | maxlength=50, show-word-limit, clearable | | 状态 | el-radio-group | el-radio label="启用"/"停用" | | 医院地址 | el-input | maxlength=200, show-word-limit | | 联系人 | el-input | maxlength=20 | | 联系电话 | el-input | maxlength=11, type="tel" | | 院区列表 | 动态表单行 | v-for 渲染, 动态增删 | | 院区名称 | el-input | maxlength=30, show-word-limit | | 院区地址 | el-input | maxlength=200 | | 保存按钮 | el-button | type="primary", :loading | | 取消按钮 | el-button | @click="router.back()" | | 添加院区 | el-button | type="primary", plain, icon="Plus" | | 删除院区 | el-button | type="danger", link, icon="Delete" | ### 校验规则 | 字段 | 规则 | 错误提示 | |------|------|----------| | 医院名称 | 必填, 2-50字符, 全局唯一 | "请输入医院名称" / "医院名称长度2-50字符" / "该医院名称已存在" | | 状态 | 必填 | "请选择状态" | | 医院地址 | 最大200字符 | "医院地址不能超过200字符" | | 联系人 | 最大20字符 | "联系人不能超过20字符" | | 联系电话 | 手机号格式(/^1[3-9]\d{9}$/) | "请输入正确的手机号" | | 院区名称 | 必填, 2-30字符, 同医院内唯一 | "请输入院区名称" / "院区名称长度2-30字符" / "该院区名称已存在" | | 院区地址 | 必填, 最大200字符 | "请输入院区地址" / "院区地址不能超过200字符" | | 院区列表 | 至少1个院区 | "请至少添加一个院区" | ### 响应式布局 | 断点 | 布局调整 | |------|----------| | ≥1280px（桌面端） | 基本信息两列排列（医院名称+状态一行，地址独占一行，联系人+电话一行）；院区信息卡片宽度100% | | 1024-1279px（Pad横屏） | 基本信息两列排列；院区信息卡片宽度100% | | 768-1023px（Pad竖屏） | 基本信息单列排列（每行一个字段）；院区信息卡片宽度100%，院内行单列 | --- ## 页面3：物业公司信息管理列表页 **页面编号**：SA-A-02-P01 **端侧归属**：Web专属 **页面路径**：/account/property-companies ### 界面布局 ``` ┌──────────────────────────────────────────────────────────────────┐ │ [面包屑] 账号管理 > 物业公司信息管理 │ ├──────────────────────────────────────────────────────────────────┤ │ [查询条件区] │ │ 公司名称[____] 状态[▼] 联系人[____] [查询] [重置] │ ├──────────────────────────────────────────────────────────────────┤ │ [操作栏] [新增物业公司] │ ├──────────────────────────────────────────────────────────────────┤ │ [列表区] │ │ 序号 | 公司名称 | 服务医院 | 联系人 | 联系电话 | 状态 | 操作 │ │ 1 | XX物业 | A医院 | 王五 | 137****9012| 启用 | 编辑 停用 │ ├──────────────────────────────────────────────────────────────────┤ │ [分页] 共30条 每页[20▼] < 1 2 > │ └──────────────────────────────────────────────────────────────────┘ ``` ### 查询条件 | 字段名 | 控件类型 | 必填 | 默认值 | 说明 | |--------|----------|------|--------|------| | 公司名称 | 文本输入 | 否 | — | 模糊匹配 | | 状态 | 下拉单选 | 否 | 全部 | 启用/停用 | | 联系人 | 文本输入 | 否 | — | 模糊匹配 | ### 列表字段 | 序号 | 字段名 | 列宽 | 支持排序 | 说明 | |------|--------|------|----------|------| | 1 | 序号 | 60px | — | 自增序号 | | 2 | 公司名称 | 180px | 是 | — | | 3 | 服务医院 | 150px | 否 | 显示关联医院名称列表 | | 4 | 联系人 | 100px | 否 | — | | 5 | 联系电话 | 130px | 否 | 脱敏显示 | | 6 | 创建时间 | 150px | 是 | 默认倒序 | | 7 | 状态 | 80px | 是 | 启用/停用标签 | | 8 | 操作 | 140px | — | 编辑/启停 | ### 操作按钮 | 按钮 | 权限编码 | 位置 | 显示条件 | 说明 | |------|----------|------|----------|------| | 新增物业公司 | permission:user:create | 操作栏 | 始终 | 跳转新增页 | | 编辑 | permission:user:update | 行操作 | 始终 | — | | 启用/停用 | permission:user:update | 行操作 | 始终 | 二次确认 | ### API端点 | 页面操作 | API路径 | 方法 | 说明 | |----------|---------|------|------| | 列表查询 | /api/v1/property-companies | GET | 分页查询 | | 启用/停用 | /api/v1/property-companies/{id}/toggle-status | PUT | — | ### 交互流程要求 1. **页面加载流程** - 进入页面 → 调用 `GET /api/v1/property-companies` 加载列表（默认第1页，每页20条，创建时间倒序） - 并行加载下拉选项：状态下拉 - 列表为空时显示空状态插图 + "暂无物业公司信息" 2. **查询交互流程** - 填写查询条件 → 点击"查询"→ 调用API → 重置到第1页渲染 - 点击"重置"→ 清空条件 → 重新加载 3. **行内操作流程** - **编辑**：点击"编辑"→ 路由跳转至 `/account/property-companies/:id/edit` - **启用/停用**：二次确认弹窗（"确认停用XX物业？停用后该物业下所有账号将无法登录"）→ 确认后调用API → 成功提示 → 刷新列表 4. **异常处理** - 同页面1通用异常处理规则 5. **权限控制交互** - 无 `permission:user:create` → "新增物业公司"按钮不渲染 - 无 `permission:user:update` → 行操作列不渲染 6. **[H1]防重复请求** - 查询/筛选：点击"查询"按钮后立即 disabled=true + 显示loading态，API返回后恢复；查询期间再次点击无效 - 行内操作（编辑/启停）：点击操作按钮后该行所有操作按钮禁用 + 按钮显示loading旋转图标；操作完成后恢复 - 分页切换：切换页码时取消上一页未完成请求（abortController）后再发起新请求 - 页面初始化并行请求（列表+下拉数据）之间互不阻塞 7. **[H2]超时与加载反馈** - 列表查询API：timeout=15秒；加载中表格区显示v-loading骨架屏遮罩 - 启停等写操作API：timeout=30秒；操作按钮:loading态 - 超时处理：自动中断 → ElMessage.error("请求超时，请检查网络后重试") → 按钮恢复可用 - 列表加载超过2秒时显示全局ElLoading进度提示 8. **[H3]操作确认机制** - 启用/停用操作：ElMessageBox.confirm("确定要{启用/停用}「{对象名称}」吗？停用后该账号将无法登录", "操作确认", { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning' }) - 确认弹窗期间底层页面不可点击（modal遮罩） 9. **[H8]操作结果反馈** - 成功操作：ElMessage.success("{操作}成功"，duration=2000ms) → silent方式刷新列表数据（不带loading闪烁） - 失败：ElMessage.error(后端message或"操作失败，请稍后重试"，duration=0手动关闭) - 网络异常：提示"网络连接异常，请检查网络后重试"+ 提供"重试"文字按钮 ### 组件规范 | 元素 | 组件 | 配置参数 | |------|------|----------| | 列表 | el-table | stripe, border, v-loading | | 服务医院（可点击） | el-link | type="primary" | | 状态标签 | el-tag | 启用:type="success", 停用:type="danger" | | 操作按钮 | el-button | type="primary", link, size="small" | | 分页 | el-pagination | layout="total, sizes, prev, pager, next" | ### 校验规则 | 字段 | 规则 | 错误提示 | |------|------|----------| | 公司名称（查询） | 最大50字符 | — | | 联系人（查询） | 最大20字符 | — | ### 响应式布局 | 断点 | 布局调整 | |------|----------| | ≥1280px（桌面端） | 查询条件一行排列；列表完整展示所有列 | | 1024-1279px（Pad横屏） | 查询条件一行排列；"联系人""联系电话"列隐藏 | | 768-1023px（Pad竖屏） | 查询条件两行排列；列表仅显示：序号、公司名称、状态、操作 | --- ## 页面4：物业公司信息新增/编辑页 **页面编号**：SA-A-02-P02 **端侧归属**：Web专属 **页面路径**：/account/property-companies/create 或 /account/property-companies/:id/edit ### 表单字段 | 字段名 | 控件类型 | 必填 | 默认值 | 数据来源 | 校验规则 | |--------|----------|------|--------|----------|----------| | 公司名称 | 文本输入 | 是 | — | 自填 | 最大50字，全局唯一 | | 公司地址 | 文本输入 | 否 | — | 自填 | 最大200字 | | 联系人 | 文本输入 | 是 | — | 自填 | 最大20字 | | 联系电话 | 文本输入 | 是 | — | 自填 | 手机号格式 | ### API端点 | 页面操作 | API路径 | 方法 | 说明 | |----------|---------|------|------| | 新增 | /api/v1/property-companies | POST | — | | 编辑 | /api/v1/property-companies/{id} | PUT | — | ### 交互流程要求 1. **页面加载流程** - 新增模式：空白表单 - 编辑模式：根据路由参数 `:id` 调用 `GET /api/v1/property-companies/{id}` 回填数据 2. **表单填写与提交流程** - 填写表单 → 点击"保存"→ 前端校验 → 调用API → 成功提示 → 返回列表页 - 校验失败 → 定位到第一个错误字段，滚动到可见区域 3. **异常处理** - 唯一性校验失败 → 字段下方红色提示"该公司名称已存在" - API失败 → 提示错误信息，表单数据不丢失 4. **[H1]防重复请求** - 点击"保存"按钮后：按钮 :loading=true + 文案变为"保存中..." + 按钮disabled；API返回（成功/失败/超时）后恢复 - 保存期间不允许再次点击保存或关闭页面 5. **[H2]超时与加载反馈** - 新增/编辑提交API（POST/PUT）：timeout=30秒 - 编辑模式详情回填API（GET）：timeout=15秒 - 提交中保存按钮保持:loading态 + 表单区域不可编辑（半透明遮罩可选） - 超时处理：中断请求 → 提示"保存超时，请检查网络后重试" → 按钮恢复 6. **[H4]脏数据检测** - 编辑模式进入时deep clone表单初始数据作为快照 - 用户修改任意字段后标记isDirty=true - 点击"取消"按钮或浏览器后退时： * isDirty=true → ElMessageBox.confirm("当前修改尚未保存，离开后将丢失未保存的内容，是否确认离开？") → 确认则离开/取消则停留 * isDirty=false → 直接执行离开操作 - 使用vue-router的beforeRouteLeave导航守卫拦截路由切换 - 保存成功后将当前数据设为新快照，重置isDirty=false 7. **[H8]操作结果反馈** - 保存成功：ElMessage.success("保存成功", duration=2000) → 延迟300ms后router.back()返回列表页 - 保存失败：ElMessage.error(错误信息, duration=0)；表单数据保持不丢失 - 唯一性校验失败：对应字段下方红色文字提示，不弹message ### 组件规范 | 元素 | 组件 | 配置参数 | |------|------|----------| | 表单 | el-form | label-width="100px", :model, :rules | | 公司名称 | el-input | maxlength=50, show-word-limit | | 公司地址 | el-input | maxlength=200 | | 联系人 | el-input | maxlength=20 | | 联系电话 | el-input | maxlength=11, type="tel" | | 保存按钮 | el-button | type="primary", :loading | ### 校验规则 | 字段 | 规则 | 错误提示 | |------|------|----------| | 公司名称 | 必填, 2-50字符, 全局唯一 | "请输入公司名称" / "公司名称长度2-50字符" / "该公司名称已存在" | | 公司地址 | 最大200字符 | "公司地址不能超过200字符" | | 联系人 | 必填, 最大20字符 | "请输入联系人" / "联系人不能超过20字符" | | 联系电话 | 必填, 手机号格式 | "请输入联系电话" / "请输入正确的手机号" | ### 响应式布局 | 断点 | 布局调整 | |------|----------| | ≥1280px（桌面端） | 表单两列排列（公司名称+联系人一行，地址独占一行） | | 1024-1279px（Pad横屏） | 表单两列排列 | | 768-1023px（Pad竖屏） | 表单单列排列 | --- ## 页面5：医院账号管理列表页 **页面编号**：SA-A-03-P01 **端侧归属**：Web专属 **页面路径**：/account/hospital-accounts ### 界面布局 ``` ┌──────────────────────────────────────────────────────────────────┐ │ [面包屑] 账号管理 > 医院账号管理 │ ├──────────────────────────────────────────────────────────────────┤ │ [查询条件区] │ │ 登录账号[____] 绑定医院[▼] 状态[▼] 有效期[▼] [查询] [重置] │ ├──────────────────────────────────────────────────────────────────┤ │ [操作栏] [新增医院账号] │ ├──────────────────────────────────────────────────────────────────┤ │ [列表区] │ │ 序号 | 登录账号 | 绑定医院 | 角色 | 有效期至 | 状态 | 操作 │ │ 1 | hospital01| XX医院 | 医院查看 | 2027-04-16| 正常 | 编辑 续期│ │ 2 | hospital02| YY医院 | 医院查看 | 2026-03-01| 即将到期| 续期 │ │ 3 | hospital03| ZZ医院 | 医院查看 | 2026-01-01| 已过期| 续期 │ ├──────────────────────────────────────────────────────────────────┤ │ [分页] 共20条 每页[20▼] < 1 > │ └──────────────────────────────────────────────────────────────────┘ ``` ### 查询条件 | 字段名 | 控件类型 | 必填 | 默认值 | 说明 | |--------|----------|------|--------|------| | 登录账号 | 文本输入 | 否 | — | 精确匹配 | | 绑定医院 | 下拉单选 | 否 | 全部 | 数据来源：医院信息管理 | | 状态 | 下拉单选 | 否 | 全部 | 正常/即将到期/已过期/已停用 | | 有效期 | 下拉单选 | 否 | 全部 | 已过期/7天内到期/30天内到期/正常 | ### 列表字段 | 序号 | 字段名 | 列宽 | 支持排序 | 说明 | |------|--------|------|----------|------| | 1 | 序号 | 60px | — | 自增 | | 2 | 登录账号 | 130px | 否 | — | | 3 | 绑定医院 | 150px | 是 | — | | 4 | 角色 | 120px | 否 | 显示分配的角色名称 | | 5 | 有效期至 | 120px | 是 | 即将到期=橙色，已过期=红色 | | 6 | 状态 | 100px | 是 | 正常(绿)/即将到期(橙)/已过期(红)/已停用(灰) | | 7 | 操作 | 200px | — | 编辑/续期/启停/重置密码 | ### 操作按钮 | 按钮 | 权限编码 | 位置 | 显示条件 | 说明 | |------|----------|------|----------|------| | 新增医院账号 | permission:user:create | 操作栏 | 始终 | — | | 编辑 | permission:user:update | 行操作 | 始终 | — | | 续期 | permission:user:update | 行操作 | 始终 | 修改有效期 | | 启用/禁用 | permission:user:update | 行操作 | 始终 | 二次确认，禁用立即生效 | | 重置密码 | permission:user:update | 行操作 | 始终 | 重置为默认密码 | ### 通知触发 | 触发操作 | 通知对象 | 通知方式 | 消息模板 | 文档来源 | |----------|----------|----------|----------|----------| | 账号禁用 | 被禁用账号 | — | 已登录session立即失效 | 03-超级管理员 §2 | | 重置密码 | 账号持有人 | — | 下次登录使用新密码 | — | ### API端点 | 页面操作 | API路径 | 方法 | 说明 | |----------|---------|------|------| | 列表查询 | /api/v1/accounts/hospital | GET | 分页查询 | | 启用/禁用 | /api/v1/accounts/{id}/toggle-status | PUT | 禁用立即失效session | | 续期 | /api/v1/accounts/{id}/renew | PUT | 修改有效期 | | 重置密码 | /api/v1/accounts/{id}/reset-password | PUT | — | ### 交互流程要求 1. **页面加载流程** - 进入页面 → 并行调用：列表查询API + 绑定医院下拉数据 + 状态下拉 + 有效期下拉 - 加载中骨架屏 → 数据渲染列表 2. **查询交互流程** - 填写查询条件 → 点击"查询"→ 调用API → 重置到第1页 - "绑定医院"下拉支持搜索过滤（filterable） 3. **行内操作流程** - **编辑**：点击"编辑"→ 路由跳转编辑页（如存在独立编辑页） - **续期**：点击"续期"→ 弹出续期弹窗（`el-dialog`，选择新有效期日期）→ 确认后调用 `PUT /api/v1/accounts/{id}/renew` → 成功提示 → 刷新列表 - **启用/禁用**：二次确认（"确认禁用该账号？禁用后该账号将立即无法登录"）→ 确认后调用API → 成功提示 → 刷新列表 - **重置密码**：二次确认（"确认重置密码？重置后密码将恢复为默认密码"）→ 确认后调用API → 成功后弹窗展示新密码，支持一键复制 4. **联动交互** - 绑定医院下拉数据来源于医院信息管理中的启用状态医院 5. **异常处理** - 禁用失败（账号已禁用等）→ 提示具体原因 - 续期时新有效期早于当前日期 → 前端校验拦截，提示"有效期不能早于当前日期" - 重置密码失败 → 提示错误信息 6. **权限控制交互** - 无对应权限 → 行操作按钮不渲染 7. **[H1]防重复请求** - 查询/筛选：点击"查询"按钮后立即 disabled=true + 显示loading态，API返回后恢复；查询期间再次点击无效 - 行内操作（编辑/续期/启停/重置密码）：点击操作按钮后该行所有操作按钮禁用 + 按钮显示loading旋转图标；操作完成后恢复 - 分页切换：切换页码时取消上一页未完成请求（abortController）后再发起新请求 - 页面初始化并行请求（列表+下拉数据）之间互不阻塞 8. **[H2]超时与加载反馈** - 列表查询API：timeout=15秒；加载中表格区显示v-loading骨架屏遮罩 - 启停/续期/重置密码等写操作API：timeout=30秒；操作按钮:loading态 - 超时处理：自动中断 → ElMessage.error("请求超时，请检查网络后重试") → 按钮恢复可用 - 列表加载超过2秒时显示全局ElLoading进度提示 9. **[H3]操作确认机制** - 启用/禁用操作：ElMessageBox.confirm("确定要{启用/禁用}「{对象名称}」吗？禁用后该账号将无法登录", "操作确认", { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning' }) - 重置密码：ElMessageBox.confirm("确定要重置「{账号}」的密码吗？重置后将恢复为默认密码", "操作确认", { type: 'warning' }) - 确认弹窗期间底层页面不可点击（modal遮罩） 10. **[H8]操作结果反馈** - 成功操作：ElMessage.success("{操作}成功"，duration=2000ms) → silent方式刷新列表数据（不带loading闪烁） - 失败：ElMessage.error(后端message或"操作失败，请稍后重试"，duration=0手动关闭) - 网络异常：提示"网络连接异常，请检查网络后重试"+ 提供"重试"文字按钮 ### 组件规范 | 元素 | 组件 | 配置参数 | |------|------|----------| | 绑定医院下拉 | el-select | filterable, clearable, remote, placeholder="请选择医院" | | 有效期至 | el-tag | 正常:type="success", 即将到期:type="warning", 已过期:type="danger" | | 状态标签 | el-tag | 正常:type="success", 即将到期:type="warning", 已过期:type="danger", 已停用:type="info" | | 续期弹窗 | el-dialog | width="400px", :close-on-click-modal=false | | 续期日期选择 | el-date-picker | type="date", :disabled-date="禁用过去日期" | | 重置密码结果弹窗 | el-dialog | 展示新密码 + 复制按钮 | ### 校验规则 | 字段 | 规则 | 错误提示 | |------|------|----------| | 续期日期 | 必填, 不早于当前日期 | "请选择有效期" / "有效期不能早于当前日期" | ### 响应式布局 | 断点 | 布局调整 | |------|----------| | ≥1280px（桌面端） | 查询条件一行排列；列表完整展示所有列 | | 1024-1279px（Pad横屏） | 查询条件一行排列；"角色"列隐藏 | | 768-1023px（Pad竖屏） | 查询条件两行排列；列表仅显示：序号、登录账号、绑定医院、状态、操作 | --- ## 页面6：新增医院账号页 **页面编号**：SA-A-03-P02 **端侧归属**：Web专属 **页面路径**：/account/hospital-accounts/create ### 界面布局 ``` ┌──────────────────────────────────────────────────────────────────┐ │ [面包屑] 账号管理 > 医院账号管理 > 新增医院账号 │ ├──────────────────────────────────────────────────────────────────┤ │ 登录账号：[____________] 初始密码：[________]（自动生成） │ │ 绑定医院：[▼必选] │ │ 有效期至：[日期选择] （必填） │ │ 分配角色：[▼多选] □ 医院查看模板 □ 自定义... │ ├──────────────────────────────────────────────────────────────────┤ │ [取消] [保存] │ └──────────────────────────────────────────────────────────────────┘ ``` ### 表单字段 | 字段名 | 控件类型 | 必填 | 默认值 | 数据来源 | 校验规则 | |--------|----------|------|--------|----------|----------| | 登录账号 | 文本输入 | 是 | — | 自填 | 4~20位字母数字，全局唯一 | | 初始密码 | 文本输入 | 是 | 系统生成 | 自动生成 | 可手动修改，6~20位 | | 绑定医院 | 下拉单选 | 是 | — | 医院信息列表 | — | | 有效期至 | 日期选择 | 是 | — | 自填 | 不早于当前日期 | | 分配角色 | 下拉多选 | 是 | — | 角色管理-医院适用角色 | 至少选一个 | ### API端点 | 页面操作 | API路径 | 方法 | 说明 | |----------|---------|------|------| | 新增 | /api/v1/accounts/hospital | POST | — | ### 交互流程要求 1. **页面加载流程** - 进入页面 → 并行加载：绑定医院下拉（仅启用状态医院）+ 角色下拉（仅医院适用范围角色） - 自动生成初始密码（8位随机字母数字），显示在密码输入框中 - 有效期默认为当前日期+1年 2. **表单填写与提交流程** - 填写登录账号 → 实时校验唯一性（失焦时调用后端校验接口） - 选择绑定医院 → 选择有效期 → 分配角色 → 点击"保存"→ 前端校验全部通过 → 调用API → 成功提示 → 返回列表页 3. **联动交互** - 绑定医院下拉：数据来源于医院信息管理中启用状态的医院 - 分配角色下拉：数据来源于权限管理中"适用范围=医院账号"的启用角色 4. **异常处理** - 登录账号重复 → 失焦校验后即时提示"该登录账号已存在" - 保存失败 → 提示错误信息，表单数据不丢失 5. **权限控制交互** - 无保存权限时 → "保存"按钮禁用 6. **[H1]防重复请求** - 点击"保存"按钮后：按钮 :loading=true + 文案变为"保存中..." + 按钮disabled；API返回（成功/失败/超时）后恢复 - 保存期间不允许再次点击保存或关闭页面 7. **[H2]超时与加载反馈** - 新增提交API（POST）：timeout=30秒 - 提交中保存按钮保持:loading态 + 表单区域不可编辑（半透明遮罩可选） - 超时处理：中断请求 → 提示"保存超时，请检查网络后重试" → 按钮恢复 8. **[H4]脏数据检测** - 页面进入时deep clone表单初始数据作为快照 - 用户修改任意字段后标记isDirty=true - 点击"取消"按钮或浏览器后退时： * isDirty=true → ElMessageBox.confirm("当前修改尚未保存，离开后将丢失未保存的内容，是否确认离开？") → 确认则离开/取消则停留 * isDirty=false → 直接执行离开操作 - 使用vue-router的beforeRouteLeave导航守卫拦截路由切换 - 保存成功后将当前数据设为新快照，重置isDirty=false 9. **[H8]操作结果反馈** - 保存成功：ElMessage.success("保存成功", duration=2000) → 延迟300ms后router.back()返回列表页 - 保存失败：ElMessage.error(错误信息, duration=0)；表单数据保持不丢失 - 唯一性校验失败：对应字段下方红色文字提示，不弹message ### 组件规范 | 元素 | 组件 | 配置参数 | |------|------|----------| | 表单 | el-form | label-width="100px", :model, :rules | | 登录账号 | el-input | maxlength=20, clearable, placeholder="4-20位字母数字" | | 初始密码 | el-input | maxlength=20, show-password, readonly=false | | 绑定医院 | el-select | filterable, clearable, placeholder="请选择医院" | | 有效期至 | el-date-picker | type="date", :disabled-date="禁用过去日期", value-format="YYYY-MM-DD" | | 分配角色 | el-select | multiple, filterable, collapse-tags, placeholder="请选择角色" | | 保存按钮 | el-button | type="primary", :loading | | 取消按钮 | el-button | @click="router.back()" | | 刷新密码按钮 | el-button | icon="Refresh", circle, @click="generatePassword" | ### 校验规则 | 字段 | 规则 | 错误提示 | |------|------|----------| | 登录账号 | 必填, 4-20位字母数字(/^[a-zA-Z0-9]{4,20}$/), 全局唯一 | "请输入登录账号" / "登录账号为4-20位字母数字" / "该登录账号已存在" | | 初始密码 | 必填, 6-20位 | "请输入初始密码" / "密码长度6-20位" | | 绑定医院 | 必填 | "请选择绑定医院" | | 有效期至 | 必填, 不早于当前日期 | "请选择有效期" / "有效期不能早于当前日期" | | 分配角色 | 必填, 至少选一个 | "请选择至少一个角色" | ### 响应式布局 | 断点 | 布局调整 | |------|----------| | ≥1280px（桌面端） | 表单两列排列（登录账号+初始密码一行，绑定医院+有效期一行，角色独占一行） | | 1024-1279px（Pad横屏） | 表单两列排列 | | 768-1023px（Pad竖屏） | 表单单列排列，每个字段独占一行 | --- ## 页面7：物业公司管理员账号管理列表页 **页面编号**：SA-A-04-P01 **端侧归属**：Web专属 **页面路径**：/account/property-accounts ### 界面布局 ``` ┌──────────────────────────────────────────────────────────────────┐ │ [面包屑] 账号管理 > 物业管理员账号管理 │ ├──────────────────────────────────────────────────────────────────┤ │ [查询条件区] │ │ 登录账号[____] 绑定物业公司[▼] 服务医院[▼] 状态[▼] [查询] [重置] │ ├──────────────────────────────────────────────────────────────────┤ │ [操作栏] [新增物业管理员账号] │ ├──────────────────────────────────────────────────────────────────┤ │ [列表区] │ │ 序号 | 登录账号 | 绑定物业 | 服务医院 | 角色 | 有效期至 | 状态 | 操作│ │ 1 | prop01 | XX物业 | A医院 | 管理员| 2027-04| 正常 | ...│ ├──────────────────────────────────────────────────────────────────┤ │ [分页] 共40条 每页[20▼] < 1 2 > │ └──────────────────────────────────────────────────────────────────┘ ``` ### 查询条件 | 字段名 | 控件类型 | 必填 | 默认值 | 说明 | |--------|----------|------|--------|------| | 登录账号 | 文本输入 | 否 | — | 精确匹配 | | 绑定物业公司 | 下拉单选 | 否 | 全部 | 数据来源：物业公司信息管理 | | 服务医院 | 下拉单选 | 否 | 全部 | 数据来源：医院信息管理 | | 状态 | 下拉单选 | 否 | 全部 | 正常/即将到期/已过期/已停用 | ### 列表字段 | 序号 | 字段名 | 列宽 | 支持排序 | 说明 | |------|--------|------|----------|------| | 1 | 序号 | 60px | — | 自增 | | 2 | 登录账号 | 120px | 否 | — | | 3 | 绑定物业公司 | 120px | 是 | — | | 4 | 服务医院 | 120px | 是 | — | | 5 | 角色 | 120px | 否 | — | | 6 | 有效期至 | 110px | 是 | 颜色标记同医院账号 | | 7 | 状态 | 90px | 是 | 同医院账号 | | 8 | 操作 | 200px | — | 编辑/续期/启停/重置密码 | ### 操作按钮 | 按钮 | 权限编码 | 位置 | 显示条件 | 说明 | |------|----------|------|----------|------| | 新增物业管理员账号 | permission:user:create | 操作栏 | 始终 | — | | 编辑 | permission:user:update | 行操作 | 始终 | — | | 续期 | permission:user:update | 行操作 | 始终 | — | | 启用/禁用 | permission:user:update | 行操作 | 始终 | 禁用时下属账号同步失效 | | 重置密码 | permission:user:update | 行操作 | 始终 | — | ### 通知触发 | 触发操作 | 通知对象 | 通知方式 | 消息模板 | 文档来源 | |----------|----------|----------|----------|----------| | 账号禁用 | 物业管理员 | — | session失效+小程序同步下线 | 03-超级管理员 §2 | | 账号禁用 | 下属人员 | 小程序推送 | 关联下属账号同步失效 | 01 §1.4 | ### API端点 | 页面操作 | API路径 | 方法 | 说明 | |----------|---------|------|------| | 列表查询 | /api/v1/accounts/property-admin | GET | 分页查询 | | 启用/禁用 | /api/v1/accounts/{id}/toggle-status | PUT | 禁用同步下线下属 | | 续期 | /api/v1/accounts/{id}/renew | PUT | — | ### 交互流程要求 1. **页面加载流程** - 进入页面 → 并行加载：列表数据 + 绑定物业公司下拉 + 服务医院下拉 + 状态下拉 - 加载中骨架屏 2. **查询交互流程** - 填写条件 → 点击"查询"→ 调用API → 重置到第1页 - "绑定物业公司"和"服务医院"下拉均支持搜索过滤 3. **行内操作流程** - **编辑**：跳转编辑页 - **续期**：弹出续期弹窗 → 选择新有效期 → 确认 → API调用 → 刷新列表 - **启用/禁用**：二次确认（"确认禁用？禁用后该管理员及所有下属账号将同步失效"）→ 确认 → API调用 → 刷新列表 - **重置密码**：二次确认 → API调用 → 弹窗展示新密码 4. **联动交互** - 物业公司下拉数据来源于物业公司信息管理中的启用状态公司 - 选择物业公司后，服务医院下拉可联动过滤该物业关联的医院 5. **异常处理** - 禁用操作提示级联影响范围："该操作将同步禁用X个下属账号" - 其他同页面5 6. **权限控制交互** - 同页面5 7. **[H1]防重复请求** - 查询/筛选：点击"查询"按钮后立即 disabled=true + 显示loading态，API返回后恢复；查询期间再次点击无效 - 行内操作（编辑/续期/启停/重置密码）：点击操作按钮后该行所有操作按钮禁用 + 按钮显示loading旋转图标；操作完成后恢复 - 分页切换：切换页码时取消上一页未完成请求（abortController）后再发起新请求 - 页面初始化并行请求（列表+下拉数据）之间互不阻塞 8. **[H2]超时与加载反馈** - 列表查询API：timeout=15秒；加载中表格区显示v-loading骨架屏遮罩 - 启停/续期/重置密码等写操作API：timeout=30秒；操作按钮:loading态 - 超时处理：自动中断 → ElMessage.error("请求超时，请检查网络后重试") → 按钮恢复可用 - 列表加载超过2秒时显示全局ElLoading进度提示 9. **[H3]操作确认机制** - 启用/禁用操作：ElMessageBox.confirm("确定要{启用/禁用}「{对象名称}」吗？禁用后将同步禁用所有下属账号", "操作确认", { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning' }) - 重置密码：ElMessageBox.confirm("确定要重置「{账号}」的密码吗？重置后将恢复为默认密码", "操作确认", { type: 'warning' }) - 确认弹窗期间底层页面不可点击（modal遮罩） 10. **[H8]操作结果反馈** - 成功操作：ElMessage.success("{操作}成功"，duration=2000ms) → silent方式刷新列表数据（不带loading闪烁） - 失败：ElMessage.error(后端message或"操作失败，请稍后重试"，duration=0手动关闭) - 网络异常：提示"网络连接异常，请检查网络后重试"+ 提供"重试"文字按钮 ### 组件规范 | 元素 | 组件 | 配置参数 | |------|------|----------| | 绑定物业公司下拉 | el-select | filterable, clearable | | 服务医院下拉 | el-select | filterable, clearable | | 状态标签 | el-tag | 同页面5颜色规则 | | 操作按钮 | el-button | type="primary", link, size="small" | | 续期弹窗 | el-dialog | width="400px" | | 续期日期选择 | el-date-picker | type="date", :disabled-date | | 重置密码结果弹窗 | el-dialog | 展示新密码 + 复制按钮 | ### 校验规则 | 字段 | 规则 | 错误提示 | |------|------|----------| | 续期日期 | 必填, 不早于当前日期 | "请选择有效期" / "有效期不能早于当前日期" | ### 响应式布局 | 断点 | 布局调整 | |------|----------| | ≥1280px（桌面端） | 查询条件一行排列；列表完整展示所有列 | | 1024-1279px（Pad横屏） | 查询条件两行排列；"角色"列隐藏 | | 768-1023px（Pad竖屏） | 查询条件两行排列；列表仅显示：序号、登录账号、绑定物业、状态、操作 | --- ## 页面8：新增物业管理员账号页 **页面编号**：SA-A-04-P02 **端侧归属**：Web专属 **页面路径**：/account/property-accounts/create ### 表单字段 | 字段名 | 控件类型 | 必填 | 默认值 | 数据来源 | 校验规则 | |--------|----------|------|--------|----------|----------| | 登录账号 | 文本输入 | 是 | — | 自填 | 4~20位字母数字，全局唯一 | | 初始密码 | 文本输入 | 是 | 系统生成 | 自动生成 | 可修改 | | 绑定物业公司 | 下拉单选 | 是 | — | 物业公司信息列表 | — | | 服务医院 | 下拉单选 | 是 | — | 医院信息列表 | — | | 有效期至 | 日期选择 | 是 | — | 自填 | 不早于当前日期 | | 分配角色 | 下拉多选 | 是 | — | 角色管理-物业适用角色 | 至少选一个 | ### API端点 | 页面操作 | API路径 | 方法 | 说明 | |----------|---------|------|------| | 新增 | /api/v1/accounts/property-admin | POST | — | ### 交互流程要求 1. **页面加载流程** - 进入页面 → 并行加载：绑定物业公司下拉 + 服务医院下拉 + 角色下拉（物业适用范围） - 自动生成初始密码，有效期默认当前日期+1年 2. **表单填写与提交流程** - 填写登录账号 → 失焦时校验唯一性 - 选择物业公司 → 选择服务医院 → 选择有效期 → 分配角色 → 点击"保存"→ 校验 → API → 成功返回列表页 3. **联动交互** - 绑定物业公司下拉：来源于物业公司信息管理中启用状态的公司 - 选择物业公司后，服务医院下拉联动过滤该物业关联的医院 - 分配角色下拉：仅显示"适用范围=物业管理员"的启用角色 4. **异常处理** - 登录账号重复 → 失焦时即时提示 - API失败 → 提示错误，表单不丢失 5. **权限控制交互** - 无保存权限时 → "保存"按钮禁用 6. **[H1]防重复请求** - 点击"保存"按钮后：按钮 :loading=true + 文案变为"保存中..." + 按钮disabled；API返回（成功/失败/超时）后恢复 - 保存期间不允许再次点击保存或关闭页面 7. **[H2]超时与加载反馈** - 新增提交API（POST）：timeout=30秒 - 提交中保存按钮保持:loading态 + 表单区域不可编辑（半透明遮罩可选） - 超时处理：中断请求 → 提示"保存超时，请检查网络后重试" → 按钮恢复 8. **[H4]脏数据检测** - 页面进入时deep clone表单初始数据作为快照 - 用户修改任意字段后标记isDirty=true - 点击"取消"按钮或浏览器后退时： * isDirty=true → ElMessageBox.confirm("当前修改尚未保存，离开后将丢失未保存的内容，是否确认离开？") → 确认则离开/取消则停留 * isDirty=false → 直接执行离开操作 - 使用vue-router的beforeRouteLeave导航守卫拦截路由切换 - 保存成功后将当前数据设为新快照，重置isDirty=false 9. **[H8]操作结果反馈** - 保存成功：ElMessage.success("保存成功", duration=2000) → 延迟300ms后router.back()返回列表页 - 保存失败：ElMessage.error(错误信息, duration=0)；表单数据保持不丢失 - 唯一性校验失败：对应字段下方红色文字提示，不弹message ### 组件规范 | 元素 | 组件 | 配置参数 | |------|------|----------| | 表单 | el-form | label-width="120px", :model, :rules | | 登录账号 | el-input | maxlength=20, clearable | | 初始密码 | el-input | maxlength=20, show-password | | 绑定物业公司 | el-select | filterable, clearable | | 服务医院 | el-select | filterable, clearable | | 有效期至 | el-date-picker | type="date", :disabled-date, value-format="YYYY-MM-DD" | | 分配角色 | el-select | multiple, filterable, collapse-tags | | 保存按钮 | el-button | type="primary", :loading | | 刷新密码按钮 | el-button | icon="Refresh", circle | ### 校验规则 | 字段 | 规则 | 错误提示 | |------|------|----------| | 登录账号 | 必填, 4-20位字母数字, 全局唯一 | "请输入登录账号" / "登录账号为4-20位字母数字" / "该登录账号已存在" | | 初始密码 | 必填, 6-20位 | "请输入初始密码" / "密码长度6-20位" | | 绑定物业公司 | 必填 | "请选择绑定物业公司" | | 服务医院 | 必填 | "请选择服务医院" | | 有效期至 | 必填, 不早于当前日期 | "请选择有效期" / "有效期不能早于当前日期" | | 分配角色 | 必填, 至少选一个 | "请选择至少一个角色" | ### 响应式布局 | 断点 | 布局调整 | |------|----------| | ≥1280px（桌面端） | 表单两列排列 | | 1024-1279px（Pad横屏） | 表单两列排列 | | 768-1023px（Pad竖屏） | 表单单列排列 | --- ## 页面9：到期账号管理页 **页面编号**：SA-A-07-P01 **端侧归属**：Web专属 **页面路径**：/account/expiring ### 界面布局 ``` ┌──────────────────────────────────────────────────────────────────┐ │ [面包屑] 账号管理 > 到期账号管理 │ ├──────────────────────────────────────────────────────────────────┤ │ [统计卡片区] │ │ ┌──────────┐ ┌──────────┐ ┌──────────┐ │ │ │已过期 │ │7天内到期 │ │30天内到期 │ │ │ │ 3 │ │ 5 │ │ 12 │ │ │ └──────────┘ └──────────┘ └──────────┘ │ ├──────────────────────────────────────────────────────────────────┤ │ [查询条件区] │ │ 账号类型[▼] 到期状态[▼] [查询] [重置] │ ├──────────────────────────────────────────────────────────────────┤ │ [列表区] │ │ 序号 | 登录账号 | 账号类型 | 绑定单位 | 有效期至 | 剩余天数 | 操作 │ │ 1 | hospital01| 医院 | XX医院 | 2026-04-20| 4天 | 续期 │ │ 2 | prop01 | 物业 | XX物业 | 2026-03-01| -46天 | 续期 │ ├──────────────────────────────────────────────────────────────────┤ │ [分页] 共20条 每页[20▼] < 1 > │ └──────────────────────────────────────────────────────────────────┘ ``` ### 查询条件 | 字段名 | 控件类型 | 必填 | 默认值 | 说明 | |--------|----------|------|--------|------| | 账号类型 | 下拉单选 | 否 | 全部 | 医院/物业管理员 | | 到期状态 | 下拉单选 | 否 | 全部 | 已过期/7天内到期/30天内到期 | ### 列表字段 | 序号 | 字段名 | 列宽 | 支持排序 | 说明 | |------|--------|------|----------|------| | 1 | 序号 | 60px | — | 自增 | | 2 | 登录账号 | 130px | 否 | — | | 3 | 账号类型 | 100px | 否 | 医院/物业管理员 | | 4 | 绑定单位 | 150px | 否 | 医院名称或物业公司名称 | | 5 | 有效期至 | 120px | 是 | — | | 6 | 剩余天数 | 90px | 是 | 已过期显示负数，红色标记 | | 7 | 操作 | 100px | — | 续期 | ### 操作按钮 | 按钮 | 权限编码 | 位置 | 显示条件 | 说明 | |------|----------|------|----------|------| | 续期 | permission:user:update | 行操作 | 始终 | 弹窗修改有效期 | ### 通知触发 | 触发操作 | 通知对象 | 通知方式 | 消息模板 | 文档来源 | |----------|----------|----------|----------|----------| | 续期成功 | 被续期账号 | — | 账号恢复可用，记录操作日志 | 03-超级管理员 §3 | ### API端点 | 页面操作 | API路径 | 方法 | 说明 | |----------|---------|------|------| | 列表查询 | /api/v1/accounts/expiring | GET | 筛选到期账号 | | 续期 | /api/v1/accounts/{id}/renew | PUT | — | ### 交互流程要求 1. **页面加载流程** - 进入页面 → 并行调用：统计卡片数据 + 列表数据 + 下拉选项 - 统计卡片数据优先渲染，列表加载中显示骨架屏 - 点击统计卡片可快速筛选（点击"已过期"卡片 → 自动填充到期状态=已过期 → 触发查询） 2. **查询交互流程** - 填写条件 → 点击"查询"→ 调用API → 重置到第1页 - 统计卡片数据随查询条件联动刷新 3. **行内操作流程** - **续期**：点击"续期"→ 弹出续期弹窗（选择新有效期）→ 确认 → API调用 → 成功提示"续期成功"→ 刷新列表和统计卡片 4. **联动交互** - 统计卡片点击 → 联动查询条件 → 触发筛选 5. **异常处理** - 续期失败 → 提示错误信息 - 统计数据加载失败 → 卡片显示"--"占位，不影响列表操作 6. **权限控制交互** - 无 `permission:user:update` → 行"续期"按钮不渲染 7. **[H1]防重复请求** - 查询/筛选：点击"查询"按钮后立即 disabled=true + 显示loading态，API返回后恢复；查询期间再次点击无效 - 行内操作（续期）：点击操作按钮后该行所有操作按钮禁用 + 按钮显示loading旋转图标；操作完成后恢复 - 分页切换：切换页码时取消上一页未完成请求（abortController）后再发起新请求 - 页面初始化并行请求（统计卡片+列表+下拉数据）之间互不阻塞 8. **[H2]超时与加载反馈** - 列表查询API：timeout=15秒；加载中表格区显示v-loading骨架屏遮罩 - 续期写操作API：timeout=30秒；操作按钮:loading态 - 统计卡片数据加载API：timeout=15秒 - 超时处理：自动中断 → ElMessage.error("请求超时，请检查网络后重试") → 按钮恢复可用 - 列表加载超过2秒时显示全局ElLoading进度提示 9. **[H3]操作确认机制** - 续期弹窗本身即为操作确认机制：选择新有效期后需用户点击"确定"才提交 - 确认弹窗期间底层页面不可点击（modal遮罩） 10. **[H8]操作结果反馈** - 成功操作：ElMessage.success("{操作}成功"，duration=2000ms) → silent方式刷新列表数据和统计卡片（不带loading闪烁） - 失败：ElMessage.error(后端message或"操作失败，请稍后重试"，duration=0手动关闭) - 网络异常：提示"网络连接异常，请检查网络后重试"+ 提供"重试"文字按钮 ### 组件规范 | 元素 | 组件 | 配置参数 | |------|------|----------| | 统计卡片 | el-card | shadow="hover", :body-style="{padding:'20px',cursor:'pointer'}" | | 卡片数字 | div | font-size=28px, font-weight=bold | | 已过期数字 | — | color=var(--el-color-danger) | | 7天内到期数字 | — | color=var(--el-color-warning) | | 30天内到期数字 | — | color=var(--el-color-primary) | | 剩余天数 | el-tag | 已过期:type="danger", ≤7天:type="warning", 其他:type="info" | | 续期弹窗 | el-dialog | width="400px", :close-on-click-modal=false | | 续期日期选择 | el-date-picker | type="date", :disabled-date | ### 校验规则 | 字段 | 规则 | 错误提示 | |------|------|----------| | 续期日期 | 必填, 不早于当前日期 | "请选择有效期" / "有效期不能早于当前日期" | ### 响应式布局 | 断点 | 布局调整 | |------|----------| | ≥1280px（桌面端） | 统计卡片一行三个；列表完整展示所有列 | | 1024-1279px（Pad横屏） | 统计卡片一行三个；"账号类型"列隐藏 | | 768-1023px（Pad竖屏） | 统计卡片一行三个（缩小间距）；列表仅显示：序号、登录账号、绑定单位、剩余天数、操作 | --- ## 页面10：到期提醒规则配置页 **页面编号**：SA-A-08-P01 **端侧归属**：Web专属 **页面路径**：/account/expiry-settings ### 界面布局 ``` ┌──────────────────────────────────────────────────────────────────┐ │ [面包屑] 账号管理 > 到期提醒规则配置 │ ├──────────────────────────────────────────────────────────────────┤ │ ── 提醒天数配置 ──────────────────────────────────────────── │ │ 提前提醒天数：[7] [15] [30] 天 （可多选，点击添加/移除） │ │ │ │ ── 提醒方式 ────────────────────────────────────────────── │ │ ☑ 用户登录时弹窗提醒 │ │ ☐ 邮件提醒（暂未开放） │ │ │ │ ── 提醒行为 ────────────────────────────────────────────── │ │ 提醒弹窗关闭后：☑ 可正常使用 ☐ 限制部分功能 │ │ 账号过期后： ☑ 禁止登录 ☐ 仅提醒 │ ├──────────────────────────────────────────────────────────────────┤ │ [取消] [保存] │ └──────────────────────────────────────────────────────────────────┘ ``` ### 表单字段 | 字段名 | 控件类型 | 必填 | 默认值 | 数据来源 | 校验规则 | |--------|----------|------|--------|----------|----------| | 提前提醒天数 | 标签多选 | 是 | 7, 15, 30 | — | 至少选一个 | | 用户登录弹窗 | 开关 | 是 | 开 | — | — | | 弹窗关闭后行为 | 单选 | 是 | 可正常使用 | 固定选项 | — | | 过期后行为 | 单选 | 是 | 禁止登录 | 固定选项 | — | ### API端点 | 页面操作 | API路径 | 方法 | 说明 | |----------|---------|------|------| | 查询配置 | /api/v1/system/configs/expiry-reminder | GET | — | | 保存配置 | /api/v1/system/configs/expiry-reminder | PUT | — | ### 交互流程要求 1. **页面加载流程** - 进入页面 → 调用 `GET /api/v1/system/configs/expiry-reminder` 加载当前配置 → 回填表单 - 加载中表单显示骨架屏 2. **表单填写与提交流程** - 修改配置项 → 点击"保存"→ 前端校验（至少选一个提醒天数）→ 调用 `PUT` API → 成功提示"配置保存成功" - 无需返回列表页，停留在当前页 3. **标签多选交互** - "提前提醒天数"使用标签多选（预设7/15/30/60/90天选项），点击标签切换选中/取消 - 支持自定义天数输入（输入框+添加按钮） - 至少保留一个选中项 4. **联动交互** - "用户登录弹窗"关闭时 → "弹窗关闭后行为"选项才可编辑 - "过期后行为"选择"限制部分功能"时 → 显示附加配置（限制哪些功能） 5. **异常处理** - 保存失败 → 提示错误信息，表单数据不丢失 - 配置加载失败 → 提示"配置加载失败"，提供"重试"按钮 6. **权限控制交互** - 无 `permission:config:update` → 表单所有控件禁用，"保存"按钮不渲染 7. **[H1]防重复请求** - 点击"保存"按钮后：按钮 :loading=true + 文案变为"保存中..." + 按钮disabled；API返回（成功/失败/超时）后恢复 - 保存期间不允许再次点击保存或关闭页面 8. **[H2]超时与加载反馈** - 保存配置提交API（PUT）：timeout=30秒 - 查询配置回填API（GET）：timeout=15秒 - 提交中保存按钮保持:loading态 + 表单区域不可编辑（半透明遮罩可选） - 超时处理：中断请求 → 提示"保存超时，请检查网络后重试" → 按钮恢复 9. **[H4]脏数据检测** - 页面进入时deep clone表单初始数据作为快照 - 用户修改任意字段后标记isDirty=true - 点击"取消"按钮或浏览器后退时： * isDirty=true → ElMessageBox.confirm("当前修改尚未保存，离开后将丢失未保存的内容，是否确认离开？") → 确认则离开/取消则停留 * isDirty=false → 直接执行离开操作 - 使用vue-router的beforeRouteLeave导航守卫拦截路由切换 - 保存成功后将当前数据设为新快照，重置isDirty=false 10. **[H8]操作结果反馈** - 保存成功：ElMessage.success("配置保存成功", duration=2000)；停留在当前页不跳转 - 保存失败：ElMessage.error(错误信息, duration=0)；表单数据保持不丢失 - 唯一性校验失败：对应字段下方红色文字提示，不弹message（本页面无唯一性字段） ### 组件规范 | 元素 | 组件 | 配置参数 | |------|------|----------| | 表单 | el-form | label-width="140px", :model, :rules | | 提前提醒天数 | el-check-tag | 多选模式，预设7/15/30/60/90 | | 自定义天数输入 | el-input-number | :min=1, :max=365, :step=1 | | 用户登录弹窗 | el-switch | active-text="开启", inactive-text="关闭" | | 弹窗关闭后行为 | el-radio-group | el-radio label="可正常使用"/"限制部分功能" | | 过期后行为 | el-radio-group | el-radio label="禁止登录"/"仅提醒" | | 保存按钮 | el-button | type="primary", :loading | | 取消按钮 | el-button | @click="resetForm" | ### 校验规则 | 字段 | 规则 | 错误提示 | |------|------|----------| | 提前提醒天数 | 必填, 至少选一个 | "请至少选择一个提醒天数" | | 自定义天数 | 1-365整数 | "天数范围1-365" | ### 响应式布局 | 断点 | 布局调整 | |------|----------| | ≥1280px（桌面端） | 表单标签宽度140px，输入区域宽度400px | | 1024-1279px（Pad横屏） | 表单标签宽度120px，输入区域宽度350px | | 768-1023px（Pad竖屏） | 表单标签宽度100px，输入区域宽度100% | --- ## 需求追溯 | 功能点编号 | 功能名称 | 文档来源 | 后续服务 | 关联功能 | |------------|----------|----------|----------|----------| | SA-A-01 | 医院信息管理 | 02-超级管理员 §1 / 03-超级管理员 §1 | 创建医院→创建医院账号 | 医院账号管理(绑定医院) | | SA-A-02 | 物业公司信息管理 | 02-超级管理员 §1 / 03-超级管理员 §1 | 创建物业公司→创建物业账号 | 物业管理员账号管理(绑定物业) | | SA-A-03 | 医院账号管理 | 02-超级管理员 §1 / 03-超级管理员 §1~2 | 账号创建→权限分配 | 权限管理(角色绑定) | | SA-A-04 | 物业管理员账号管理 | 02-超级管理员 §1 / 03-超级管理员 §1~2 | 账号创建→权限分配，禁用→下属同步失效 | 权限管理(角色绑定) / 物业组织架构(下属账号) | | SA-A-05 | 账号有效期设置 | 02-超级管理员 §1 / 03-超级管理员 §3 / 01 §1.4 | 创建时设置有效期 | 到期账号管理 / 到期提醒规则 | | SA-A-06 | 账号可用性控制 | 02-超级管理员 §1 / 03-超级管理员 §2 | 禁用→session立即失效+小程序下线 | 操作日志(记录启停操作) | | SA-A-07 | 到期账号管理 | 02-超级管理员 §1 / 03-超级管理员 §3 / 01 §1.4 | 手动续期→账号恢复 | 到期提醒规则配置 | | SA-A-08 | 到期提醒规则配置 | 02-超级管理员 §1 / 03-超级管理员 §3 / 01 §1.4 | 配置→系统按规则自动提醒 | 到期账号管理 / 系统配置 | ## 业务规则 1. **新建使用单位流程**：医院信息→物业公司信息→医院账号→物业管理员账号，四步顺序创建（来源：03-超级管理员 §1） 2. **账号有效期必填**：创建医院/物业管理员账号时必须设置有效期（来源：01 §1.4） 3. **物业下属不单独设有效期**：下属人员随物业公司管理员账号到期而自动失效（来源：01 §1.4 / 03-超级管理员 §3） 4. **禁用立即生效**：禁用账号后session立即失效，小程序同步下线（来源：03-超级管理员 §2） 5. **到期提醒弹窗**：到期前N天登录时弹窗提醒，关闭后可正常使用（来源：01 §1.4 / 03-超级管理员 §3） 6. **过期禁止登录**：账号过期后禁止登录，需超管手动续期（来源：01 §1.4 / 03-超级管理员 §3） 7. **超管不涉及业务数据**：超级管理员仅管理系统配置与账号数据，不查看任何业务数据（来源：01 §1.3 / 03-超级管理员 §7） 8. **所有操作记录日志**：账号创建/启停/续期等操作自动记录操作日志（来源：06-项目技术要求 §4.5）