You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

73 KiB

Raw Permalink Blame History Unescape Escape

账号管理

模块编码：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	行操作	始终	二次确认弹窗

角色差异化视图

角色	可见按钮	数据范围	备注
超级管理员	全部按钮	全部医院	—

交互流程要求

页面加载流程
- 进入页面 → 调用 GET /api/v1/hospitals 加载列表数据（默认第1页，每页20条，创建时间倒序）
- 并行加载下拉选项：状态下拉（启用/停用）
- 列表为空时显示空状态插图 + "暂无医院信息" 提示文字
- 加载中显示 el-table 骨架屏（skeleton）效果
查询交互流程
- 用户填写查询条件 → 点击"查询"按钮 → 前端校验无特殊限制 → 调用API携带筛选参数 → 重新渲染列表（重置到第1页）
- 点击"重置"→ 清空所有查询条件 → 重新加载默认列表
- 支持回车键触发查询
行内操作流程
- 编辑：点击"编辑"→ 路由跳转至 /account/hospitals/:id/edit
- 启用/停用：点击"启用"或"停用"→ 弹出 el-message-box 二次确认（"确认停用XX医院？停用后该医院下所有账号将无法登录"）→ 确认后调用 PUT /api/v1/hospitals/{id}/toggle-status → 成功后 el-message 提示"操作成功" → 刷新当前列表
异常处理
- API请求失败 → el-message.error 提示错误信息，列表保持原数据
- 网络超时 → 提示"网络异常，请稍后重试"
- 启停操作失败 → 提示具体错误原因（如"该医院下存在进行中的工单，无法停用"）
权限控制交互
- 无 permission:user:create 权限 → "新增医院"按钮不渲染
- 无 permission:user:update 权限 → 行操作列不渲染"编辑"和"启用/停用"按钮
[H1]防重复请求
- 查询/筛选：点击"查询"按钮后立即 disabled=true + 显示loading态，API返回后恢复；查询期间再次点击无效
- 行内操作（编辑/启停）：点击操作按钮后该行所有操作按钮禁用 + 按钮显示loading旋转图标；操作完成后恢复
- 分页切换：切换页码时取消上一页未完成请求（abortController）后再发起新请求
- 页面初始化并行请求（列表+下拉数据）之间互不阻塞
[H2]超时与加载反馈
- 列表查询API：timeout=15秒；加载中表格区显示v-loading骨架屏遮罩
- 启停等写操作API：timeout=30秒；操作按钮:loading态
- 超时处理：自动中断 → ElMessage.error("请求超时，请检查网络后重试") → 按钮恢复可用
- 列表加载超过2秒时显示全局ElLoading进度提示
[H3]操作确认机制
- 启用/停用操作：ElMessageBox.confirm("确定要{启用/停用}「{对象名称}」吗？停用后该账号将无法登录", "操作确认", { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning' })
- 确认弹窗期间底层页面不可点击（modal遮罩）
[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	编辑时回填

交互流程要求

页面加载流程
- 新增模式：页面空白表单，状态默认"启用"
- 编辑模式：根据路由参数 :id 调用 GET /api/v1/hospitals/{id} 回填表单数据
- 加载中显示表单骨架屏
表单填写与提交流程
- 用户逐项填写基本信息 → 动态添加/删除院区行 → 点击"保存"→ 前端校验 → 调用API → 成功后 el-message.success → 路由跳转回列表页
- 编辑模式下保存 → 调用 PUT /api/v1/hospitals/{id} → 成功后返回列表页
院区动态表单交互
- 点击"+添加院区"→ 在院区列表末尾新增一行空表单
- 点击"删除"→ 二次确认后移除该院区行（至少保留一个院区）
- 院区行内字段实时校验
联动交互
- 无特殊联动逻辑
异常处理
- 唯一性校验失败（医院名称重复）→ 对应字段下方显示红色错误提示"该医院名称已存在"
- API失败 → el-message.error 提示错误信息，表单保持当前数据不丢失
- 编辑模式下详情加载失败 → 提示"数据加载失败"并提供"返回列表"按钮
权限控制交互
- 无保存权限时 → "保存"按钮禁用
[H1]防重复请求
- 点击"保存"按钮后：按钮 :loading=true + 文案变为"保存中..." + 按钮disabled；API返回（成功/失败/超时）后恢复
- 保存期间不允许再次点击保存或关闭页面
- 院区行动态增删操作：删除院区确认弹窗pending期间禁用其他删除按钮
[H2]超时与加载反馈
- 新增/编辑提交API（POST/PUT）：timeout=30秒
- 编辑模式详情回填API（GET）：timeout=15秒
- 提交中保存按钮保持:loading态 + 表单区域不可编辑（半透明遮罩可选）
- 超时处理：中断请求 → 提示"保存超时，请检查网络后重试" → 按钮恢复
[H3]操作确认机制
- 删除院区行前 ElMessageBox.confirm("确定要删除该院区吗？删除后数据无法恢复", "删除确认", { type: 'warning' })
[H4]脏数据检测
- 编辑模式进入时deep clone表单初始数据作为快照
- 用户修改任意字段后标记isDirty=true
- 点击"取消"按钮或浏览器后退时：
  - isDirty=true → ElMessageBox.confirm("当前修改尚未保存，离开后将丢失未保存的内容，是否确认离开？") → 确认则离开/取消则停留
  - isDirty=false → 直接执行离开操作
- 使用vue-router的beforeRouteLeave导航守卫拦截路由切换
- 保存成功后将当前数据设为新快照，重置isDirty=false
[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	—

交互流程要求

页面加载流程
- 进入页面 → 调用 GET /api/v1/property-companies 加载列表（默认第1页，每页20条，创建时间倒序）
- 并行加载下拉选项：状态下拉
- 列表为空时显示空状态插图 + "暂无物业公司信息"
查询交互流程
- 填写查询条件 → 点击"查询"→ 调用API → 重置到第1页渲染
- 点击"重置"→ 清空条件 → 重新加载
行内操作流程
- 编辑：点击"编辑"→ 路由跳转至 /account/property-companies/:id/edit
- 启用/停用：二次确认弹窗（"确认停用XX物业？停用后该物业下所有账号将无法登录"）→ 确认后调用API → 成功提示 → 刷新列表
异常处理
- 同页面1通用异常处理规则
权限控制交互
- 无 permission:user:create → "新增物业公司"按钮不渲染
- 无 permission:user:update → 行操作列不渲染
[H1]防重复请求
- 查询/筛选：点击"查询"按钮后立即 disabled=true + 显示loading态，API返回后恢复；查询期间再次点击无效
- 行内操作（编辑/启停）：点击操作按钮后该行所有操作按钮禁用 + 按钮显示loading旋转图标；操作完成后恢复
- 分页切换：切换页码时取消上一页未完成请求（abortController）后再发起新请求
- 页面初始化并行请求（列表+下拉数据）之间互不阻塞
[H2]超时与加载反馈
- 列表查询API：timeout=15秒；加载中表格区显示v-loading骨架屏遮罩
- 启停等写操作API：timeout=30秒；操作按钮:loading态
- 超时处理：自动中断 → ElMessage.error("请求超时，请检查网络后重试") → 按钮恢复可用
- 列表加载超过2秒时显示全局ElLoading进度提示
[H3]操作确认机制
- 启用/停用操作：ElMessageBox.confirm("确定要{启用/停用}「{对象名称}」吗？停用后该账号将无法登录", "操作确认", { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning' })
- 确认弹窗期间底层页面不可点击（modal遮罩）
[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	—

交互流程要求

页面加载流程
- 新增模式：空白表单
- 编辑模式：根据路由参数 :id 调用 GET /api/v1/property-companies/{id} 回填数据
表单填写与提交流程
- 填写表单 → 点击"保存"→ 前端校验 → 调用API → 成功提示 → 返回列表页
- 校验失败 → 定位到第一个错误字段，滚动到可见区域
异常处理
- 唯一性校验失败 → 字段下方红色提示"该公司名称已存在"
- API失败 → 提示错误信息，表单数据不丢失
[H1]防重复请求
- 点击"保存"按钮后：按钮 :loading=true + 文案变为"保存中..." + 按钮disabled；API返回（成功/失败/超时）后恢复
- 保存期间不允许再次点击保存或关闭页面
[H2]超时与加载反馈
- 新增/编辑提交API（POST/PUT）：timeout=30秒
- 编辑模式详情回填API（GET）：timeout=15秒
- 提交中保存按钮保持:loading态 + 表单区域不可编辑（半透明遮罩可选）
- 超时处理：中断请求 → 提示"保存超时，请检查网络后重试" → 按钮恢复
[H4]脏数据检测
- 编辑模式进入时deep clone表单初始数据作为快照
- 用户修改任意字段后标记isDirty=true
- 点击"取消"按钮或浏览器后退时：
  - isDirty=true → ElMessageBox.confirm("当前修改尚未保存，离开后将丢失未保存的内容，是否确认离开？") → 确认则离开/取消则停留
  - isDirty=false → 直接执行离开操作
- 使用vue-router的beforeRouteLeave导航守卫拦截路由切换
- 保存成功后将当前数据设为新快照，重置isDirty=false
[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	—

交互流程要求

页面加载流程
- 进入页面 → 并行调用：列表查询API + 绑定医院下拉数据 + 状态下拉 + 有效期下拉
- 加载中骨架屏 → 数据渲染列表
查询交互流程
- 填写查询条件 → 点击"查询"→ 调用API → 重置到第1页
- "绑定医院"下拉支持搜索过滤（filterable）
行内操作流程
- 编辑：点击"编辑"→ 路由跳转编辑页（如存在独立编辑页）
- 续期：点击"续期"→ 弹出续期弹窗（el-dialog，选择新有效期日期）→ 确认后调用 PUT /api/v1/accounts/{id}/renew → 成功提示 → 刷新列表
- 启用/禁用：二次确认（"确认禁用该账号？禁用后该账号将立即无法登录"）→ 确认后调用API → 成功提示 → 刷新列表
- 重置密码：二次确认（"确认重置密码？重置后密码将恢复为默认密码"）→ 确认后调用API → 成功后弹窗展示新密码，支持一键复制
联动交互
- 绑定医院下拉数据来源于医院信息管理中的启用状态医院
异常处理
- 禁用失败（账号已禁用等）→ 提示具体原因
- 续期时新有效期早于当前日期 → 前端校验拦截，提示"有效期不能早于当前日期"
- 重置密码失败 → 提示错误信息
权限控制交互
- 无对应权限 → 行操作按钮不渲染
[H1]防重复请求
- 查询/筛选：点击"查询"按钮后立即 disabled=true + 显示loading态，API返回后恢复；查询期间再次点击无效
- 行内操作（编辑/续期/启停/重置密码）：点击操作按钮后该行所有操作按钮禁用 + 按钮显示loading旋转图标；操作完成后恢复
- 分页切换：切换页码时取消上一页未完成请求（abortController）后再发起新请求
- 页面初始化并行请求（列表+下拉数据）之间互不阻塞
[H2]超时与加载反馈
- 列表查询API：timeout=15秒；加载中表格区显示v-loading骨架屏遮罩
- 启停/续期/重置密码等写操作API：timeout=30秒；操作按钮:loading态
- 超时处理：自动中断 → ElMessage.error("请求超时，请检查网络后重试") → 按钮恢复可用
- 列表加载超过2秒时显示全局ElLoading进度提示
[H3]操作确认机制
- 启用/禁用操作：ElMessageBox.confirm("确定要{启用/禁用}「{对象名称}」吗？禁用后该账号将无法登录", "操作确认", { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning' })
- 重置密码：ElMessageBox.confirm("确定要重置「{账号}」的密码吗？重置后将恢复为默认密码", "操作确认", { type: 'warning' })
- 确认弹窗期间底层页面不可点击（modal遮罩）
[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	—

交互流程要求

页面加载流程
- 进入页面 → 并行加载：绑定医院下拉（仅启用状态医院）+ 角色下拉（仅医院适用范围角色）
- 自动生成初始密码（8位随机字母数字），显示在密码输入框中
- 有效期默认为当前日期+1年
表单填写与提交流程
- 填写登录账号 → 实时校验唯一性（失焦时调用后端校验接口）
- 选择绑定医院 → 选择有效期 → 分配角色 → 点击"保存"→ 前端校验全部通过 → 调用API → 成功提示 → 返回列表页
联动交互
- 绑定医院下拉：数据来源于医院信息管理中启用状态的医院
- 分配角色下拉：数据来源于权限管理中"适用范围=医院账号"的启用角色
异常处理
- 登录账号重复 → 失焦校验后即时提示"该登录账号已存在"
- 保存失败 → 提示错误信息，表单数据不丢失
权限控制交互
- 无保存权限时 → "保存"按钮禁用
[H1]防重复请求
- 点击"保存"按钮后：按钮 :loading=true + 文案变为"保存中..." + 按钮disabled；API返回（成功/失败/超时）后恢复
- 保存期间不允许再次点击保存或关闭页面
[H2]超时与加载反馈
- 新增提交API（POST）：timeout=30秒
- 提交中保存按钮保持:loading态 + 表单区域不可编辑（半透明遮罩可选）
- 超时处理：中断请求 → 提示"保存超时，请检查网络后重试" → 按钮恢复
[H4]脏数据检测
- 页面进入时deep clone表单初始数据作为快照
- 用户修改任意字段后标记isDirty=true
- 点击"取消"按钮或浏览器后退时：
  - isDirty=true → ElMessageBox.confirm("当前修改尚未保存，离开后将丢失未保存的内容，是否确认离开？") → 确认则离开/取消则停留
  - isDirty=false → 直接执行离开操作
- 使用vue-router的beforeRouteLeave导航守卫拦截路由切换
- 保存成功后将当前数据设为新快照，重置isDirty=false
[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	—

交互流程要求

页面加载流程
- 进入页面 → 并行加载：列表数据 + 绑定物业公司下拉 + 服务医院下拉 + 状态下拉
- 加载中骨架屏
查询交互流程
- 填写条件 → 点击"查询"→ 调用API → 重置到第1页
- "绑定物业公司"和"服务医院"下拉均支持搜索过滤
行内操作流程
- 编辑：跳转编辑页
- 续期：弹出续期弹窗 → 选择新有效期 → 确认 → API调用 → 刷新列表
- 启用/禁用：二次确认（"确认禁用？禁用后该管理员及所有下属账号将同步失效"）→ 确认 → API调用 → 刷新列表
- 重置密码：二次确认 → API调用 → 弹窗展示新密码
联动交互
- 物业公司下拉数据来源于物业公司信息管理中的启用状态公司
- 选择物业公司后，服务医院下拉可联动过滤该物业关联的医院
异常处理
- 禁用操作提示级联影响范围："该操作将同步禁用X个下属账号"
- 其他同页面5
权限控制交互
- 同页面5
[H1]防重复请求
- 查询/筛选：点击"查询"按钮后立即 disabled=true + 显示loading态，API返回后恢复；查询期间再次点击无效
- 行内操作（编辑/续期/启停/重置密码）：点击操作按钮后该行所有操作按钮禁用 + 按钮显示loading旋转图标；操作完成后恢复
- 分页切换：切换页码时取消上一页未完成请求（abortController）后再发起新请求
- 页面初始化并行请求（列表+下拉数据）之间互不阻塞
[H2]超时与加载反馈
- 列表查询API：timeout=15秒；加载中表格区显示v-loading骨架屏遮罩
- 启停/续期/重置密码等写操作API：timeout=30秒；操作按钮:loading态
- 超时处理：自动中断 → ElMessage.error("请求超时，请检查网络后重试") → 按钮恢复可用
- 列表加载超过2秒时显示全局ElLoading进度提示
[H3]操作确认机制
- 启用/禁用操作：ElMessageBox.confirm("确定要{启用/禁用}「{对象名称}」吗？禁用后将同步禁用所有下属账号", "操作确认", { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning' })
- 重置密码：ElMessageBox.confirm("确定要重置「{账号}」的密码吗？重置后将恢复为默认密码", "操作确认", { type: 'warning' })
- 确认弹窗期间底层页面不可点击（modal遮罩）
[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年
表单填写与提交流程
- 填写登录账号 → 失焦时校验唯一性
- 选择物业公司 → 选择服务医院 → 选择有效期 → 分配角色 → 点击"保存"→ 校验 → API → 成功返回列表页
联动交互
- 绑定物业公司下拉：来源于物业公司信息管理中启用状态的公司
- 选择物业公司后，服务医院下拉联动过滤该物业关联的医院
- 分配角色下拉：仅显示"适用范围=物业管理员"的启用角色
异常处理
- 登录账号重复 → 失焦时即时提示
- API失败 → 提示错误，表单不丢失
权限控制交互
- 无保存权限时 → "保存"按钮禁用
[H1]防重复请求
- 点击"保存"按钮后：按钮 :loading=true + 文案变为"保存中..." + 按钮disabled；API返回（成功/失败/超时）后恢复
- 保存期间不允许再次点击保存或关闭页面
[H2]超时与加载反馈
- 新增提交API（POST）：timeout=30秒
- 提交中保存按钮保持:loading态 + 表单区域不可编辑（半透明遮罩可选）
- 超时处理：中断请求 → 提示"保存超时，请检查网络后重试" → 按钮恢复
[H4]脏数据检测
- 页面进入时deep clone表单初始数据作为快照
- 用户修改任意字段后标记isDirty=true
- 点击"取消"按钮或浏览器后退时：
  - isDirty=true → ElMessageBox.confirm("当前修改尚未保存，离开后将丢失未保存的内容，是否确认离开？") → 确认则离开/取消则停留
  - isDirty=false → 直接执行离开操作
- 使用vue-router的beforeRouteLeave导航守卫拦截路由切换
- 保存成功后将当前数据设为新快照，重置isDirty=false
[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	—

交互流程要求

页面加载流程
- 进入页面 → 并行调用：统计卡片数据 + 列表数据 + 下拉选项
- 统计卡片数据优先渲染，列表加载中显示骨架屏
- 点击统计卡片可快速筛选（点击"已过期"卡片 → 自动填充到期状态=已过期 → 触发查询）
查询交互流程
- 填写条件 → 点击"查询"→ 调用API → 重置到第1页
- 统计卡片数据随查询条件联动刷新
行内操作流程
- 续期：点击"续期"→ 弹出续期弹窗（选择新有效期）→ 确认 → API调用 → 成功提示"续期成功"→ 刷新列表和统计卡片
联动交互
- 统计卡片点击 → 联动查询条件 → 触发筛选
异常处理
- 续期失败 → 提示错误信息
- 统计数据加载失败 → 卡片显示"--"占位，不影响列表操作
权限控制交互
- 无 permission:user:update → 行"续期"按钮不渲染
[H1]防重复请求
- 查询/筛选：点击"查询"按钮后立即 disabled=true + 显示loading态，API返回后恢复；查询期间再次点击无效
- 行内操作（续期）：点击操作按钮后该行所有操作按钮禁用 + 按钮显示loading旋转图标；操作完成后恢复
- 分页切换：切换页码时取消上一页未完成请求（abortController）后再发起新请求
- 页面初始化并行请求（统计卡片+列表+下拉数据）之间互不阻塞
[H2]超时与加载反馈
- 列表查询API：timeout=15秒；加载中表格区显示v-loading骨架屏遮罩
- 续期写操作API：timeout=30秒；操作按钮:loading态
- 统计卡片数据加载API：timeout=15秒
- 超时处理：自动中断 → ElMessage.error("请求超时，请检查网络后重试") → 按钮恢复可用
- 列表加载超过2秒时显示全局ElLoading进度提示
[H3]操作确认机制
- 续期弹窗本身即为操作确认机制：选择新有效期后需用户点击"确定"才提交
- 确认弹窗期间底层页面不可点击（modal遮罩）
[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	—

交互流程要求

页面加载流程
- 进入页面 → 调用 GET /api/v1/system/configs/expiry-reminder 加载当前配置 → 回填表单
- 加载中表单显示骨架屏
表单填写与提交流程
- 修改配置项 → 点击"保存"→ 前端校验（至少选一个提醒天数）→ 调用 PUT API → 成功提示"配置保存成功"
- 无需返回列表页，停留在当前页
标签多选交互
- "提前提醒天数"使用标签多选（预设7/15/30/60/90天选项），点击标签切换选中/取消
- 支持自定义天数输入（输入框+添加按钮）
- 至少保留一个选中项
联动交互
- "用户登录弹窗"关闭时 → "弹窗关闭后行为"选项才可编辑
- "过期后行为"选择"限制部分功能"时 → 显示附加配置（限制哪些功能）
异常处理
- 保存失败 → 提示错误信息，表单数据不丢失
- 配置加载失败 → 提示"配置加载失败"，提供"重试"按钮
权限控制交互
- 无 permission:config:update → 表单所有控件禁用，"保存"按钮不渲染
[H1]防重复请求
- 点击"保存"按钮后：按钮 :loading=true + 文案变为"保存中..." + 按钮disabled；API返回（成功/失败/超时）后恢复
- 保存期间不允许再次点击保存或关闭页面
[H2]超时与加载反馈
- 保存配置提交API（PUT）：timeout=30秒
- 查询配置回填API（GET）：timeout=15秒
- 提交中保存按钮保持:loading态 + 表单区域不可编辑（半透明遮罩可选）
- 超时处理：中断请求 → 提示"保存超时，请检查网络后重试" → 按钮恢复
[H4]脏数据检测
- 页面进入时deep clone表单初始数据作为快照
- 用户修改任意字段后标记isDirty=true
- 点击"取消"按钮或浏览器后退时：
  - isDirty=true → ElMessageBox.confirm("当前修改尚未保存，离开后将丢失未保存的内容，是否确认离开？") → 确认则离开/取消则停留
  - isDirty=false → 直接执行离开操作
- 使用vue-router的beforeRouteLeave导航守卫拦截路由切换
- 保存成功后将当前数据设为新快照，重置isDirty=false
[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	配置→系统按规则自动提醒	到期账号管理 / 系统配置

业务规则

新建使用单位流程：医院信息→物业公司信息→医院账号→物业管理员账号，四步顺序创建（来源：03-超级管理员 §1）
账号有效期必填：创建医院/物业管理员账号时必须设置有效期（来源：01 §1.4）
物业下属不单独设有效期：下属人员随物业公司管理员账号到期而自动失效（来源：01 §1.4 / 03-超级管理员 §3）
禁用立即生效：禁用账号后session立即失效，小程序同步下线（来源：03-超级管理员 §2）
到期提醒弹窗：到期前N天登录时弹窗提醒，关闭后可正常使用（来源：01 §1.4 / 03-超级管理员 §3）
过期禁止登录：账号过期后禁止登录，需超管手动续期（来源：01 §1.4 / 03-超级管理员 §3）
超管不涉及业务数据：超级管理员仅管理系统配置与账号数据，不查看任何业务数据（来源：01 §1.3 / 03-超级管理员 §7）
所有操作记录日志：账号创建/启停/续期等操作自动记录操作日志（来源：06-项目技术要求 §4.5）

73 KiB Raw Permalink Blame History Unescape Escape

账号管理

功能概览

页面1：医院信息管理列表页

界面布局

查询条件

列表字段

操作按钮

角色差异化视图

交互流程要求

组件规范

校验规则

响应式布局

页面2：医院信息新增/编辑页

界面布局

表单字段（基本信息）

表单字段（院区信息，支持多条）

通知触发

API端点

交互流程要求

组件规范

校验规则

响应式布局

页面3：物业公司信息管理列表页

界面布局

查询条件

列表字段

操作按钮

API端点

交互流程要求

组件规范

校验规则

响应式布局

页面4：物业公司信息新增/编辑页

表单字段

API端点

交互流程要求

组件规范

校验规则

响应式布局

页面5：医院账号管理列表页

界面布局

查询条件

列表字段

操作按钮

通知触发

API端点

交互流程要求

组件规范

校验规则

响应式布局

页面6：新增医院账号页

界面布局

表单字段

API端点

交互流程要求

组件规范

校验规则

响应式布局

页面7：物业公司管理员账号管理列表页

界面布局

查询条件

列表字段

操作按钮

通知触发

API端点

交互流程要求

组件规范

校验规则

响应式布局

页面8：新增物业管理员账号页

表单字段

API端点

交互流程要求

组件规范

校验规则

响应式布局

页面9：到期账号管理页

界面布局

查询条件

73 KiB

Raw Permalink Blame History Unescape Escape