目录

前情回顾与本节目标

在上一节中，我们完成了工资核算看板功能，实现了从工资数据准备到自动核算再到批量发放的完整闭环。

本节我们将继续完善OA管理模块，实现人事管理功能。这是企业HR部门最核心的工作台，需要支持员工档案管理、入职登记、离职交接、合同预警、考勤查看、业绩分析等完整的人事管理流程。

本节核心目标：

  • 数据模型设计：创建员工档案表、离职记录表、交接资产表、员工动态表
  • 人事管理首页：全员统计卡片、员工列表、搜索筛选、批量操作
  • 新增员工入职：三步向导式入职登记（基本信息→合同岗位→附件材料）

第一步：数据模型准备

1.1 员工档案表（MBA_Employees）

用于记录员工完整档案信息：

字段名称 字段标识 字段类型 说明
员工ID _id 文本 主键，系统自动生成
工号 employee_no 文本 员工工号，自动生成
姓名 name 文本 员工姓名
头像 avatar 文件 员工头像
手机号 phone 文本 手机号码
邮箱 email 文本 电子邮箱
身份证号 id_card 文本 身份证号码
性别 gender 枚举 1-男、2-女
年龄 age 数字 年龄
学历 education 文本 最高学历
毕业院校 school 文本 毕业院校
部门 department 文本 所属部门
职位 position 文本 职位名称
直属上级 rel_supervisor_id 关联关系 关联 MBA_Employees 表
入职日期 join_date 日期 入职日期
转正日期 regular_date 日期 转正日期
试用期月数 probation_months 数字 试用期时长（月）
员工状态 status 枚举 1-在职、2-试用期、3-离职中、4-已离职
合同类型 contract_type 枚举 1-固定期限、2-无固定期限、3-实习协议
合同开始日期 contract_start 日期 合同开始日期
合同结束日期 contract_end 日期 合同结束日期
基本薪资 base_salary 数字 基本工资金额
绩效基数 merit_salary 数字 绩效工资基数
提成方案 commission_plan 文本 提成方案描述
工作地点 work_location 文本 工作地点
紧急联系人 emergency_contact 文本 紧急联系人信息
身份证复印件 id_card_file 文件 身份证正反面扫描件
学历证书 education_file 文件 最高学历证书扫描件
一寸照片 photo_file 文件 员工一寸照片
其他附件 other_files 文件 其他补充材料（支持多文件）
创建时间 created_at 日期时间 自动生成
更新时间 updated_at 日期时间 自动更新

1.2 离职记录表（MBA_Resignations）

用于记录员工离职流程：

字段名称 字段标识 字段类型 说明
记录ID _id 文本 主键，系统自动生成
离职单号 leave_no 文本 离职单号，自动生成
关联员工 rel_employee_id 关联关系 关联 MBA_Employees 表
离职类型 leave_type 枚举 1-主动离职、2-协商离职、3-辞退、4-试用期不合格、5-其他
拟离职日期 plan_date 日期 拟离职日期
实际离职日期 actual_date 日期 实际离职日期
离职原因 reason 多行文本 离职原因
交接人 rel_handover_id 关联关系 关联 MBA_Employees 表
流程状态 status 枚举 1-待审批、2-审批中、3-交接中、4-已完成
创建时间 created_at 日期时间 自动生成
更新时间 updated_at 日期时间 自动更新

1.3 交接资产表（MBA_HandoverAssets）

用于记录离职交接的资产明细：

字段名称 字段标识 字段类型 说明
资产ID _id 文本 主键，系统自动生成
关联离职记录 rel_resignation_id 关联关系 关联 MBA_Resignations 表
资产类型 asset_type 文本 如：待跟进客户、进行中商机、未完结合同
数量 count 数字 资产数量
单位 unit 文本 如：个、份、项、件
是否交接 is_handover 布尔值 是否已完成交接
接手人 rel_receiver_id 关联关系 关联 MBA_Employees 表
创建时间 created_at 日期时间 自动生成
更新时间 updated_at 日期时间 自动更新

1.4 员工动态表（MBA_EmployeeTimeline）

用于记录员工的重要动态事件：

字段名称 字段标识 字段类型 说明
动态ID _id 文本 主键，系统自动生成
关联员工 rel_employee_id 关联关系 关联 MBA_Employees 表
事件类型 event_type 文本 如：转正、调岗、打卡异常
事件内容 content 文本 事件描述
操作人 rel_operator_id 关联关系 关联 MBA_Employees 表
发生时间 event_time 日期时间 事件发生时间
创建时间 created_at 日期时间 自动生成

第二步：人事管理首页搭建

2.1 创建人事布局

切换到布局设计，点击新建布局
在这里插入图片描述
选择左侧导航布局，将布局重命名为人事布局
在这里插入图片描述

2.2 创建人事管理页面

点击创建页面图标，输入"人事管理"，选择人事布局
在这里插入图片描述

切换到布局管理，选择人事布局，添加平级菜单，添加"人事管理"菜单
在这里插入图片描述

2.3 统计卡片区域

切换回页面设计，在人事布局的内容插槽下添加布局组件，修改标题为"人事管理"
在这里插入图片描述

在页面顶部添加网格布局。
在这里插入图片描述
选中行组件，将列的数量修改为4
在这里插入图片描述

在容器内添加4个卡片组件，分别展示核心指标：

卡片 指标 数据来源
全员总数 128 统计员工档案表总记录数
试用期 12 统计状态为试用期的员工数
离职中 3 统计状态为离职中的员工数
合同预警 5 统计合同到期<30天的员工数

在这里插入图片描述
创建自定义变量，用来存储统计结果
在这里插入图片描述

创建自定义方法 loadPersonnelDashboard：

export default async function loadPersonnelDashboard({ event, data }) {
  try {
    // 1. 查询所有员工
    const empRes = await $w.cloud.callDataSource({
      dataSourceName: 'MBA_Employees',
      methodName: 'wedaGetRecordsV2',
      params: {
        filter: { where: {} },
        select: { $master: true }
      }
    });

    const employees = empRes.records || [];

    // 2. 计算各项指标
    const totalCount = employees.length;
    const probationCount = employees.filter(e => e.status === '2').length;
    const leavingCount = employees.filter(e => e.status === '3').length;

    const now = Date.now();
    const thirtyDaysLater = now + 30 * 24 * 60 * 60 * 1000;
    const contractWarningCount = employees.filter(e => {
      if (!e.contract_end) return false;
      const endDate = new Date(e.contract_end).getTime();
      return endDate > now && endDate <= thirtyDaysLater;
    }).length;

    $w.page.dataset.state.personnelDashboard = {
      totalCount,
      probationCount,
      leavingCount,
      contractWarningCount
    };

  } catch (error) {
    console.error('加载人事仪表盘失败:', error);
  }
}

在页面加载时调用 loadPersonnelDashboard 方法。
在这里插入图片描述
给卡片组件的文本内容绑定统计字段
在这里插入图片描述

第三步：员工列表

3.1 员工列表表格

选中网格布局，向下添加行
在这里插入图片描述
选中行组件，设置列的数量为1
在这里插入图片描述

在列中添加数据表格组件，数据模型选择员工档案表（MBA_Employees），场景勾选全部
在这里插入图片描述

配置表格列：

列名 绑定字段 说明
复选框 - 多选操作
姓名 name 带头像展示
工号 employee_no 员工工号
部门/职位 department / position 部门和职位
入职时间 join_date 入职日期+入职月数
状态 status 在职/试用期/离职中
合同到期 contract_end 合同到期天数，<30天红色预警
操作 - 查看档案、编辑、发起离职

3.2 配置筛选条件

配置筛选器，将工号、姓名、手机号、状态配置为筛选条件
在这里插入图片描述

第四步：新增员工入职

4.1 入职弹窗

在页面组件下添加弹窗组件，修改标题为"新增员工入职"
在这里插入图片描述

弹窗采用三步向导式流程，使用顶部选项卡组件组织表单。在弹窗内容添加表单容器，场景选择新增，数据模型选择员工档案表
在这里插入图片描述
在表单容器的内容插槽里放入顶部选项卡
在这里插入图片描述

4.2 选项卡配置

配置顶部选项卡组件，设置3个选项卡：

选项卡值 标签名 内容
1 基本信息 姓名、手机号、部门、职位、入职日期
2 合同岗位 合同类型、试用期月数、基本薪资、绩效基数
3 附件材料 身份证复印件、学历证书、照片等附件上传

在这里插入图片描述

4.3 步骤一：基本信息

在基本信息下添加网格布局，布局选择6:6
在这里插入图片描述

将以下字段添加到列里边：

字段 组件类型 必填 说明
姓名 文本输入 是 员工姓名
手机号 文本输入 是 11位手机号
部门 下拉选择 是 销售部/教务部/财务部/人事部
职位 文本输入 否 职位名称
入职日期 日期选择 否 默认当天

最后一行里添加下一步按钮

在这里插入图片描述

4.4 步骤二：合同岗位

在第二个选项卡内容区域添加表单字段：

字段 组件类型 必填 说明
合同类型 下拉选择 否 固定期限/无固定期限/实习协议
试用期(月) 数字输入 否 试用期时长
基本薪资 数字输入 否 基本工资金额
绩效基数 数字输入 否 绩效工资基数

底部按钮：上一步、下一步

在这里插入图片描述

4.5 步骤三：附件材料

在第三个选项卡内容区域添加表单字段：

字段 组件类型 必填 说明
身份证复印件 文件上传 否 身份证正反面
学历证书 文件上传 否 最高学历证书
一寸照片 文件上传 否 员工照片
其他附件 文件上传 否 其他补充材料

底部按钮：上一步、提交

在这里插入图片描述

4.6 步骤切换方法

创建自定义变量用来存储当前的步骤
在这里插入图片描述

创建自定义方法 handleStepChange：

export default function handleStepChange({ event, data }) {
  const direction = data.target; // 'next' 或 'prev'
  const currentStep = $w.page.dataset.state.currentStep || "1";

  const stepOrder = [1, 2, 3];
  const currentIndex = stepOrder.indexOf(Number(currentStep));

  if (direction === 'next' && currentIndex < stepOrder.length - 1) {
    // 验证当前步骤必填字段
    if (currentStep === "1") {
      const formData = $w.form1.value;
      if (!formData.name || !formData.phone || !formData.department) {
        return $w.utils.showToast({ title: '请填写必填信息', icon: 'error' });
      }
    }

    // 切换到下一步
    const nextStep = stepOrder[currentIndex + 1];
    $w.page.dataset.state.currentStep = String(nextStep);
    $w.topTab1.selectTab({value:String(nextStep)});

  } else if (direction === 'prev' && currentIndex > 0) {
    // 切换到上一步
    const prevStep = stepOrder[currentIndex - 1];
    $w.page.dataset.state.currentStep = String(prevStep);
    $w.topTab1.selectTab({value:String(prevStep)});
  }
}

给下一步、上一步按钮，绑定方法，传入入参
在这里插入图片描述

4.7 提交入职

创建自定义方法 submitNewEmployee：

export default function handleStepChange({ event, data }) {
  const direction = data.target; // 'next' 或 'prev'
  const currentStep = $w.page.dataset.state.currentStep || "1";

  const stepOrder = [1, 2, 3];
  const currentIndex = stepOrder.indexOf(Number(currentStep));

  if (direction === 'next' && currentIndex < stepOrder.length - 1) {
    // 验证当前步骤必填字段
    if (currentStep === "1") {
      const formData = $w.form1.value;
      if (!formData.name || !formData.phone || !formData.department) {
        return $w.utils.showToast({ title: '请填写必填信息', icon: 'error' });
      }
    }

    // 切换到下一步
    const nextStep = stepOrder[currentIndex + 1];
    $w.page.dataset.state.currentStep = String(nextStep);
    $w.topTab1.selectTab({value:String(nextStep)});

  } else if (direction === 'prev' && currentIndex > 0) {
    // 切换到上一步
    const prevStep = stepOrder[currentIndex - 1];
    $w.page.dataset.state.currentStep = String(prevStep);
    $w.topTab1.selectTab({value:String(prevStep)});
  }
}

将表单容器的提交方法修改为自定义方法
在这里插入图片描述

最终效果

HR人员进入人事管理页面，首先看到4个核心指标卡片：全员总数128人、试用期12人（3人即将转正）、离职中3人（待交接）、合同预警5人（<30天到期）。

在工具栏可以搜索员工、筛选条件，也可以导入导出数据。点击"新增员工"按钮，通过三步向导完成入职登记，系统自动生成工号并创建档案。

在这里插入图片描述
在这里插入图片描述

总结

本节完成了人事管理功能的实现：

  1. 数据模型设计：创建员工档案表（MBA_Employees）、离职记录表（MBA_Resignations）、交接资产表（MBA_HandoverAssets）、员工动态表（MBA_EmployeeTimeline）
  2. 人事管理首页：4个统计卡片、员工列表、搜索筛选、批量操作
  3. 新增员工入职：三步向导式入职登记，自动生成工号和合同信息

通过本节的学习，我们完善了OA管理中的人事管理流程，实现了从员工入职到档案管理再到离职交接的完整闭环。下一节我们将继续完善OA模块的其他功能。

# 低代码
Logo
AtomGit开源社区

AtomGit 是由开放原子开源基金会联合 CSDN 等生态伙伴共同推出的新一代开源与人工智能协作平台。平台坚持“开放、中立、公益”的理念，把代码托管、模型共享、数据集托管、智能体开发体验和算力服务整合在一起，为开发者提供从开发、训练到部署的一站式体验。

更多推荐

cover

**配置文件频繁变更导致故障？版本控制****+****合规检查必不可少**

avatar AtomGit开源社区
cover

全域数学：从理论到现实的终极落地全记录 光速不变公理（v=c）+ 可见派维度常数公理（D_v=3）统一广义相对论与量子力学，解决物理学百年难题

avatar AtomGit开源社区
cover

2025届学术党必备的五大AI写作工具实际效果

avatar AtomGit开源社区