cmc-oa/oa-ui-app/pages/oa/staff

员工管理模块

功能概述

移动端员工管理模块提供了完整的员工信息管理功能，包括员工列表查看、详情查看、信息编辑等。

页面结构

1. 员工列表页面 (staffList.vue)

• 功能: 展示员工列表，支持搜索、筛选、分页加载
• 主要特性:
  • 搜索栏：支持按姓名搜索
  • 部门筛选：横向滚动的部门选择器
  • 高级筛选：职称、职业资格、学历、状态等筛选条件
  • 员工卡片：展示员工基本信息和头像
  • 下拉刷新和上拉加载更多

2. 员工详情页面 (staffDetail.vue)

• 功能: 展示员工的完整详细信息
• 主要特性:
  • 头部信息：头像、姓名、部门、状态
  • 基本信息：年龄、性别、手机、身份证等
  • 工作信息：部门、职务、职称、职业资格、岗级等
  • 教育背景：最高学历、初始学历相关信息
  • 其他信息：家庭住址、紧急联系人等

3. 员工编辑页面 (staffEdit.vue)

• 功能: 新增或编辑员工信息
• 主要特性:
  • 表单验证：必填字段验证、格式验证
  • 分类管理：基本信息、工作信息、教育背景、其他信息
  • 多选支持：政治面貌、职业资格等多选字段
  • 日期选择：入职时间、合同时间等日期字段

技术特性

移动端适配

• 使用 uView UI 组件库
• 响应式设计，适配不同屏幕尺寸
• 触摸友好的交互设计

数据管理

• 使用 mescroll-uni 实现下拉刷新和上拉加载
• 分页加载，优化性能
• 本地缓存和状态管理

用户体验

• 加载状态提示
• 错误处理和用户反馈
• 流畅的页面切换动画

API 接口

员工相关接口

• listUser: 获取员工列表
• getUser: 获取员工详情
• addUser: 新增员工
• updateUser: 更新员工信息
• delUser: 删除员工

部门相关接口

• deptTreeSelectNew: 获取部门树结构

使用说明

1. 查看员工列表

1. 进入员工列表页面
2. 使用搜索栏按姓名搜索
3. 点击部门标签筛选特定部门员工
4. 点击筛选按钮进行高级筛选
5. 下拉刷新或上拉加载更多

2. 查看员工详情

1. 在员工列表中点击员工卡片
2. 查看员工的完整信息
3. 点击”编辑信息”按钮进入编辑页面

3. 编辑员工信息

1. 在员工详情页面点击”编辑信息”
2. 或直接进入编辑页面新增员工
3. 填写表单信息
4. 点击”保存”提交更改

注意事项

1. 权限控制: 确保用户有相应的操作权限
2. 数据验证: 表单提交前会进行数据验证
3. 网络处理: 网络异常时会显示相应的错误提示
4. 性能优化: 大量数据时使用分页加载

样式规范

• 使用 SCSS 预处理器
• 遵循移动端设计规范
• 统一的颜色和字体规范
• 响应式布局设计