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.

8.4 KiB

组织架构相关功能

模块编码org 端侧:微信小程序 关联文档01-模块划分.mdv4.0、02-功能清单-小程序端.md§6、03-业务流转逻辑-小程序端.md§6、05-接口规范.md§9、06-项目技术要求.md 强制规范遵循 07-前端界面开发规范.md

功能概览

项目 说明
菜单名称 组织架构
子菜单 我的班组 / 我的排班
功能编号 MP-OR-01 ~ MP-OR-02
权限编码 org:team:view、org:schedule:view

页面清单

页面1我的班组

  • 页面路径/pages/org/my-team
  • 适用角色:全部
  • 页面元素
    • 班组信息卡片(班组名称、所属部门、班组长)
    • 班组成员列表
    • 成员详情弹窗
  • 查询条件:无(自动加载本人所在班组)
  • 列表字段
字段 类型 说明
姓名 文本 成员姓名
职位 标签 岗位/职位
联系电话 文本 手机号(脱敏显示)
技能标签 标签组 专业技能标签
  • 界面布局
    • 顶部:班组信息卡片(班组名、部门、班组长)
    • 中部:成员列表(头像 + 姓名 + 职位 + 电话)
    • 底部:无操作栏
  • 操作按钮
    • 「拨打电话」→ 调用手机拨号功能
    • 「查看详情」→ 显示成员详情弹窗

数据来源物业管理员在Web端配置的班组信息

需求追溯

功能点编号 功能名称 文档来源 后续服务 关联功能
MP-OR-01 我的班组 02-小程序端 §6 组织架构Web端、通讯录

交互流程要求

  1. 页面加载流程:页面加载时获取本人所在班组信息→渲染班组卡片和成员列表
  2. 查询/筛选交互流程:无筛选操作,自动加载本人班组
  3. 表单填写与提交流程:无表单提交操作
  4. 弹窗/弹层交互流程:点击查看详情→弹出成员详情弹窗(完整信息展示)
  5. 行内操作流程点击拨打电话→调用wx.makePhoneCall点击查看详情→弹出详情
  6. 异常与错误处理:班组信息加载失败显示重试;拨号失败提示"拨号失败"
  7. 联动/级联交互:无强联动
  8. 权限控制交互表现:所有用户可查看本人班组信息;数据为只读

前端硬性约束

  • H1 防重复提交:页面加载时防重复请求;使用 pending 请求去重机制避免重复加载班组数据
  • H2 超时控制GET 请求超时 15s数据加载 >3s 时调用 wx.showLoading({ title: '加载中...', mask: true })
  • H3 二次确认:无危险操作,无需二次确认
  • H4 脏数据检测:本页面为只读详情页,无需表单脏数据检测
  • H7 文件上传:无上传操作
  • H8 操作反馈:加载成功无提示(静默刷新);加载失败调用 wx.showToast({ title: '班组信息加载失败', icon: 'none' }) 并显示重试按钮;网络异常时提示"网络异常,请检查网络后重试"
  • 通用约束:使用 uni-ui 组件库;成员项/拨号图标可点击区域 ≥44px

组件规范

元素 组件 配置参数
班组信息卡片 uni-card mode="basic",展示班组名、部门、班组长
成员列表 uni-list + uni-list-item clickable=trueshowArrow=true
头像 image mode="aspectFill"40px圆形
技能标签 uni-tag type="primary"size="mini"v-for渲染
拨打电话 uni-icons type="phone"size="22"color="#007AFF"
成员详情弹窗 uni-popup type="bottom",展示完整信息

校验规则

字段 规则 错误提示
班组信息 必须返回有效数据 "班组信息加载失败,请重试"
电话号码 脱敏显示,拨号时显示完整号码

响应式布局

  • 适配机型iPhone SE375px~ iPad mini768px列表宽度自适应
  • 横竖屏适配策略:竖屏垂直列表;横屏双列展示成员
  • 手势交互规范成员项可点击区域≥44px拨号图标≥44px
  • 安全区域:底部适配底部安全区

页面2我的排班

  • 页面路径/pages/org/my-schedule
  • 适用角色:全部
  • 页面元素
    • 月历视图(排班日历)
    • 每日排班标记(颜色条)
    • 点击日期显示排班详情
    • 图例说明
  • 查询条件
    • 月份切换(左右滑动)
  • 列表字段:无(日历模式)
  • 界面布局
    • 顶部:月份切换
    • 中部:月历网格,每日格子中用颜色条标记排班类型
      • 蓝色条:白班
      • 绿色条:夜班
      • 橙色条:全天班
      • 灰色条:休息
    • 底部:图例说明
  • 操作按钮
    • 「点击日期」→ 显示当日排班详情弹窗
      • 排班类型
      • 上班时间
      • 下班时间
      • 打卡点

数据来源物业管理员在Web端配置的排班数据

需求追溯

功能点编号 功能名称 文档来源 后续服务 关联功能
MP-OR-02 我的排班 02-小程序端 §6 考勤打卡、组织架构排班Web端

交互流程要求

  1. 页面加载流程:页面加载时获取当月排班数据→渲染月历视图和排班标记
  2. 查询/筛选交互流程:左右滑动切换月份→重新加载排班数据
  3. 表单填写与提交流程:无表单提交操作(只读查看)
  4. 弹窗/弹层交互流程:点击日期→弹出当日排班详情弹窗(排班类型、上下班时间、打卡点)
  5. 行内操作流程:点击日期→查看排班详情;左右滑动切换月份
  6. 异常与错误处理:排班数据加载失败显示重试;无排班数据显示"暂无排班信息"
  7. 联动/级联交互:月份切换与排班数据联动
  8. 权限控制交互表现:所有用户可查看本人排班;数据只读

前端硬性约束

  • H1 防重复提交:月份切换(左右滑动)时防重复请求;滑动切换期间锁定请求,避免连续滑动触发多次加载
  • H2 超时控制GET 请求超时 15s排班数据加载 >3s 时调用 wx.showLoading({ title: '加载中...', mask: true })
  • H3 二次确认:无危险操作,无需二次确认
  • H4 脏数据检测:本页面为只读详情页,无需表单脏数据检测
  • H7 文件上传:无上传操作
  • H8 操作反馈:加载成功无提示(静默刷新);加载失败调用 wx.showToast({ title: '排班数据加载失败', icon: 'none' }) 并显示重试按钮;网络异常时提示"网络异常,请检查网络后重试"
  • 通用约束:使用 uni-ui 组件库;日期格子可点击区域 ≥44px

组件规范

元素 组件 配置参数
月历视图 自定义日历组件 7列网格日期格子44px
排班标记条 view 颜色条3px颜色动态蓝/绿/橙/灰)
月份切换 uni-icons type="left"/"right"size="20"
排班详情弹窗 uni-popup type="bottom",展示排班类型、时间、打卡点
图例说明 view + text 水平排列,颜色条+文字

校验规则

字段 规则 错误提示
排班数据 加载失败允许重试 "排班数据加载失败,请重试"

响应式布局

  • 适配机型iPhone SE375px~ iPad mini768px日历网格宽度自适应
  • 横竖屏适配策略竖屏7列日历网格横屏日历宽度适当增大
  • 手势交互规范日期格子≥44px左右滑动切换月份
  • 安全区域:底部图例适配底部安全区

业务规则

  1. 数据只读小程序端组织架构信息为只读修改需在Web端操作
  2. 数据来源班组信息和排班数据均由物业管理员在Web端配置
  3. 权限限制:员工只能查看本人所在班组信息和排班
  4. 电话脱敏通讯录中电话号码中间4位脱敏显示如138****5678点击拨号时显示完整号码
  5. 排班实时同步Web端修改排班后小程序端实时更新
  6. 考勤关联:排班数据与考勤打卡关联,排班中的打卡点与蓝牙打卡验证一致

状态流转

本模块为只读查看功能,无状态流转。