# 企业内部管理系统DEMO

预计用时:1天
难易程度:★★☆☆☆

本次演练案例使用了公司内部管理系统的部分场景,目的是测试你对SuccAP的数据模型设置、页面布局和交互、页面效果等技能的掌握情况。

在继续阅读本文前你需要先完成快速开始中数据加工和SuccAP部分的学习。请认真阅读技术要求和评分标准,更多信息见实战演练技术要求和评分标准

# 案例场景

以下是一个虚构的场景:

  • 随着人员规模增大,公司希望打造一个企业内部管理系统,提升企业内部管理能力
  • 负责人提供了人员信息的表结构与待办事项、公司消息等数据表,希望根据这份资料实现企业内部管理系统首页搭建、人员管理人员查询功能
  • DEMO需要在1天内完成,并为用户进行交流展示

# DEMO目标效果

案例项目名称为企业内部管理系统,该平台的业务功能展示如下:

企业内部管理系统

  1. 系统首页
  2. 人员管理
  3. 人员查询

# 系统首页

系统首页

说明:

  1. 数据来源:待办事项.xlsx公司消息.xlsx
  2. 四个模块:餐补管理、发票管理、考勤管理、人员管理
    • 餐补管理:点击后跳转到餐补管理门户,该门户默认展示开发中的空白页面
    • 发票管理:点击后跳转到发票管理门户,该门户默认展示开发中的空白页面
    • 考勤管理:点击后跳转到考勤管理门户,该门户默认展示开发中的空白页面
    • 人员管理:点击后跳转到人员管理门户,该门户默认展示人员管理页面
  3. 待办事项:使用嵌入仪表板展示待办事项
    • 表格包含序号处理人截止时间待处理任务
    • 截止时间升序排列,点击列头能够根据处理人截止时间排序待办事项数据
    • 截止时间最近的三条事项高亮预警
    • 待办事项较多时可以自动滚动
  4. 公司消息与公告文件:右侧通过切换标签页展示公司消息和公告文件
    • 公司消息:公司消息搜索框可针对消息标题进行模糊搜索,面板展示消息的标题正文发布时间。其中最新一条消息前缀图标使用红色填充,正文不完全展示,消息可使用滚动条滚动查看
    • 公告文件:公告文件搜索框可针对公告文件标题进行模糊搜索,不同类型的公告使用不同的样式区分,公告文件可使用滚动条滚动查看
  5. 主题风格:
    • 使用海洋门户
    • 按钮样式为主按钮(中号)
    • 列表样式为渐变标题行

# 人员管理

人员管理

说明:

  1. 数据来源:人员信息.xlsx自行录入的数据
  2. 页面内容:新增、导出、字段搜索和人员列表信息
    • 新增:点击后跳转到个人信息录入
    • 导出:点击后弹出选项对话框,导出列表数据,导出文件名默认设置为员工姓名
    • 搜索:输入关键字,点击查询按钮时可以针对员工姓名进行模糊搜索
    • 排序:默认根据入职时间降序排列,能够根据入职时间最高学历排序员工信息列表数据
    • 操作:在当前行点击修改或删除,可以进行当前员工信息的修改与删除操作,其中删除需要提示对应的删除信息,确认后才可以删除
    • 详情:单击列表某一行,跳转到对应的个人信息详情
    • 列表数据进行分页
  3. 主题风格:使用海洋门户

# 个人信息录入

个人信息录入

说明:

  1. 数据录入:根据提供的人员信息.xlsx表结构,自行录入不少于20条数据
  2. 页面内容:员工信息的新增与修改,提交后返回上页,点击返回可返回上一页面
    • 必填:员工编号员工姓名设置为必填项
    • 计算:员工编号自动生成,格式为YGBH_拼接自增函数,形如YGBH_1、YGBH_2。当前年龄根据出生日期自动计算而来,无需入库
    • 校验:输入组件根据实际场景设置校验,如员工姓名毕业院校邮箱地址就读院校就读专业公司名称所在岗位等禁止输入不规范字符;需要设置合理的时间校验,如当前年龄不得小于16等
    • 上传图片:支持上传的照片大小不得超过2M
  3. 主题风格:基础信息学习与工作经历需要保存为风格复用,无需额外为每个单独配置
    • 样式要求:设置为标题(装饰背景),将填充改为由不透明度为15%#1890FF渐变为白色的渐变色填充,并保存为考核标题风格

小贴士

若需要填报多份学习与工作经历,可以使用主从表实现,参考主从表增删改查 (opens new window)

# 人员查询

人员查询

说明:

  1. 数据来源:人员信息.xlsx自行录入的数据
  2. 页面内容:条件筛选和人员信息查询
    • 输出字段:可以指定输出展示的字段,默认展示员工编号员工姓名政治面貌最高学历毕业院校籍贯入职时间
    • 查询:可以自定义查询字段,允许动态添加条件,默认显示员工姓名最高学历毕业院校,其中员工姓名毕业院校默认支持模糊搜索
    • 排序:默认按照入职时间降序排列,能够根据入职时间最高学历排序员工信息列表数据
    • 详情:单击列表某一行,跳转到对应的个人信息详情
  3. 主题风格:列表样式为渐变标题行

# 个人信息详情

个人信息详情

说明:

  1. 数据来源:人员信息.xlsx自行录入的数据
  2. 页面内容:展示个人信息详情
    • 隐藏:没有工作经历时隐藏工作经历列表
    • 条件显示:未上传图片时展示未上传图标
    • 返回:点击返回可以返回上一页面
  3. 主题风格:
    • 基础信息学习与工作经历需使用个人信息录入模块保存的考核标题风格
    • 列表标题行样式选择网格线,表格外框设置为,标题行设置不透明度为8%#1890FF的颜色填充,保存为考核列表风格

# DEMO技术展示目标

DEMO需要围绕业务展开的同时,制作过程中也要能够体现SuccAP的能力和特色,包括:

  1. 使用主题和风格:按照要求与原型图使用系统自带主题和风格样式或者自定义的风格样式
  2. 页面布局:
    • 整体页面的布局分配,如调整画布方向,左右布局等
    • 多个布局组件的嵌套使用,如面板、横向/纵向布局、多页面板、浮动面板等
  3. 页面交互设置:
    • 打开链接、设置参数值、切换多页面板等
  4. 数据处理:
    • 根据提供的Excel数据,将维表.xlsx待办事项.xlsx公司消息.xlsx处理成可供系统引用的模型
    • 根据人员信息.xlsx的表结构,自行录入不少于20条人员信息数据
    • 事实表中的对应维度字段需要关联维表

# 实战提示

如果你对本实战演练完全没有思路,可以阅读下面的实战提示,了解更多帮助信息。如果你有思路,则可以略过本章。

点击这里查看实战提示>>

建议的实施规范

  1. 无需查询额外的任务资料,直接基于提供的业务数据即可实现原型DEMO
  2. 设计稿的指标数据,大部分是Excel中的数据,需要将他们处理成可供系统引用的模型(新建空白模型或者进行加工),另外需要根据提供的表结构按照要求录入数据
  3. 数据加工输出物理表命名规则:
    • 事实表对应物理表命名规则:fact_oa_xxx
    • 维表对应物理表命名规则:dim_oa_xxx
  4. 维表:可以根据提供的维表.xlsx创建模型,或者复用系统自带的维表,见下:
    • 行政区划维:须使用系统自带的维表,并设置省市区县三级。维表路径为succbidw/succbidw/GEN_DIM_XZQHFZ
    • 政治面貌维:可以使用系统自带的维表。维表路径为succbidw/succbidw/HR_DIM_ZZMM
    • 类型维:可以使用系统自带的维表。维表路径为succbidw/succbidw/DIM_FS_LXB
    • 学历维:可以使用系统自带的维表。维表路径为succbidw/succbidw/DIM_GEN_XL
  5. 模型管理:模型需要设置主键,维度字段需要关联对应维表

系统首页

  • 使用布局组件放置四个模块:餐补管理、发票管理、考勤管理、人员管理
  • 使用打开链接交互:实现点击人员管理打开人员管理的子门户,默认人员管理为首页,点击其他模块打开开发中的空白新页面
  • 嵌入仪表板:实现待办事项的展示
  • 使用切换多页面板交互:实现右侧标签页切换公司消息和公告文件面板,并能根据公司消息或公告文件的标题搜索查询

人员管理

  • 使用打开链接交互:实现人员信息的新增与查询
  • 使用导出数据交互:实现列表信息的导出
  • 使用设置参数值交互:实现根据姓名模糊查询列表数据

人员查询

  • 列表设置动态列:实现下拉框选择控制列表输出的字段
  • 使用字段过滤组件:实现按条件过滤政策列表的数据

# 获取案例素材

素材资料

下载素材资料 (opens new window) (提取码:SuccBI)

  • 原型图 需要按照原型图还原页面效果
  • 图片 页面中用到的图片
  • 数据 客户提供的业务数据和表结构及对应维表
是否有帮助?
0条评论
评论