---
order: 5
navTitle: 企业内部管理系统之报销管理（1天）
---
# 企业内部管理系统之报销管理

> 预计用时：1天\
> 难易程度：★★☆☆☆

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

**实战后你会获得：**

- 对现有数据模型进行优化和扩展的能力
- 对SuperPage熟练进行交互设置和布局设置的能力

为确保你能够顺利完成本次实战演练，并达到预期效果，建议你在参与之前具备一些基础技能。

**实战前技能要求：**

- 熟悉数据管理的基本操作，如数据加工、模型属性管理等
- 了解SuperPage的基本操作，能够根据页面设计需求，灵活运用组件搭建页面，并设置动态交互效果等

若你在上述技能方面存在不足，建议你在参与本次实战演练之前，先完成[快速开始](../../SuccBI/README.md)中数据加工和SuccAP部分的学习。
若你确认已做好准备，请认真阅读技术要求和评分标准，更多信息见[实战演练技术要求和评分标准](../about/score.md)。

## 案例场景{#scenarios}

以下是一个虚构的场景：

- 随着企业发展和经营范围的扩大，各类费用的支出逐渐增多，公司希望打造一个企业内部管理系统，实现报销管理等功能
- 负责人提供了报销信息的表结构与公司公告消息等数据表，希望根据这份资料实现**企业内部管理系统首页**搭建、**报销管理**、**报销信息查询**等功能
- DEMO需要在1天内完成，并为用户进行交流展示

## DEMO目标效果{#goal}

案例项目名称为**企业内部管理系统之报销管理**，该平台的业务功能展示如下：

<iframe src="//player.bilibili.com/player.html?isOutside=true&aid=114888831732498&bvid=BV1CUgizQEyA&cid=31178031735&p=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true" width=100% height=600></iframe>

1. **系统首页**
2. **报销管理**
3. **报销填报**
4. **报销详情**

### 系统首页{#index}

![系统首页](./images/2025-06-30-09-42-19.png)

**说明：**

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

### 报销管理{#manage}

![报销管理](./images/2025-06-30-09-44-26.png)

**说明：**

1. 数据来源：`报销单基本信息.xlsx`填报的数据
2. 页面内容：输出字段、字段搜索、报销的增删改查
   - 报销：点击后跳转到[报销填报](#add)页面
   - 输出字段：可以指定输出展示的字段，默认展示**事项**、**地点**、**报销时间**、**当前状态**、**出差人数**、**报销总金额**
   - 查询：可以自定义查询字段，允许动态添加条件，默认显示**事项**、**报销时间**、**报销单名称**，其中**事项**和**报销单名称**默认操作符为`包含`
   - 列表：
     - 排序：默认根据**报销时间**降序排序，能够根据**报销时间**、**合计金额**等手动排序
     - 操作：
       - 修改：点击后跳转到[报销填报](#add)页面
       - 查看：点击后跳转到[报销详情](#details)页面
       - 删除：点击后弹出对话框删除当前行数据
     - 分页：每页展示15条数据
3. 主题风格
   - 按钮：样式使用`主按钮（中号）`
   - 门户：使用**海洋**门户
   - 列表：样式设置为**渐变标题行**

### 报销填报{#add}

![报销填报](./images/2025-06-30-10-06-08.png)

**说明：**

1. 数据录入：根据提供的`报销单信息表结构.xlsx`，自行录入不少于20条数据
2. 页面内容：报销新增与修改
   - 报销单基本信息填报：
     - 必填：**报销人**、**部门**、**收款人**、**报销时间**、**收款方式**等设置为必填项
     - 计算:
       - **报销单编号**自动生成，格式为当前用户id\_拼接当前日期时间，形如caoc\_20240923171335
       - **补贴总金额**由基本信息已填报的内容自动计算得来
       - **报销总金额**=右侧**行程与费用报销金额**+**补助总金额**
       - 报销业务详情填报里，**行程与费用报销金额**由填报的差旅信息和其他费用信息报销项数求和得来，**合计票证**由两者上传的附件总数计算得来，**行程与费用报销金额**由两者的报销金额计算得来
       - **票面合计金额**由对应的差旅行程/差旅其他费用的金额汇总得来，**报销金额**由对应的报销金额汇总得来
       - 校验：合理的校验，如**出差天数**不得小于0等
       - 上传附件：支持上传的附件大小不得超过3M
   - 差旅行程信息填报：
     - 必填：**交通工具**、**起点**、**终点**、**金额**、**报销金额**等设置为必填项
     - 校验：输入组件根据实际场景设置校验，如**出发日期**不得晚于**报销时间**，且不晚于当前时间，**报销金额**不得高于实际**金额**等
     - 上传附件：支持上传的附件大小不得超过3M
     - 数据：可以填报多条行程信息
   - 差旅其他费用信息填报：
     - 必填：**报销类型**、**金额**、**报销金额**等设置为必填项
     - 校验：输入组件根据实际场景设置校验，如**报销金额**不得高于实际**金额**等
     - 数据：可以填报多条其他费用信息
   - 扩展：可以根据业务，自行扩展提交字段
   - 返回：点击返回至[报销管理](#manage)页面
3. 主题风格：
   - 按钮：样式使用`主按钮（中号）`
   - 小标题：报销单基本信息和报销业务详情标题设置`渐变色填充`，由不透明度为15%的`#1890FF`渐变为白色，并保存为考核标题风格
   - 列表：标题行设置不透明度为3%的`#000000`的`颜色填充`
     :::tip 主从表
     一张报销单填报多条差旅行程信息以及差旅其他费用信息的数据，可以采用主从表结构实现这一需求，具体可参考相关DEMO示例：[提交主从表](https://demo.succbi.com/v5/ap/提交主从表)
     :::

### 报销详情{#details}

![报销详情](./images/2025-06-30-10-02-42.png)

**说明：**

1. 数据来源：`报销单基本信息.xlsx`、`差旅行程信息.xlsx`、`差旅其他费用信息.xlsx`等填报的数据
2. 页面内容：报销信息详情
   - 隐藏：没有差旅行程信息或差旅其他费用信息数据时隐藏对应列表
   - 预览：点击附件名称可以预览对应的文件
   - 返回：点击返回至[报销管理](#manage)页面
3. 主题风格：
   - 按钮：样式使用`主按钮（中号）`
   - 小标题：使用考核标题风格
   - 列表：标题行样式选择网格线，表格外框设置为无，标题行设置不透明度为8%的`#1890FF`的`颜色填充`

### DEMO技术展示目标{#requirements}

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

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

## 实战提示{#tips}

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

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

**模型规范性得分**

模型规划和命名合理，详见[技术要求和评分标准](../about/score.md)

- 维表：可以根据提供的`维表.xlsx`创建模型，或者复用系统自带的维表，见下：
  - 行政区划维：复用系统自带的维表，在考核项目维表文件夹中建模，并设置层级。维表路径为`succbidw/succbidw/GEN_DIM_XZQHFZ`（本地无此文件可以使用`/sysdata/data/tables/sec/CN_ADCODE.tbl`建模）
  - 用户维：可以使用系统自带的维表。维表路径为`/sysdata/data/tables/sec/USERS.tbl`
  - 部门维：可以使用系统自带的维表。维表路径为`/sysdata/data/tables/sec/DEPTS.tbl`

**功能完备性得分**

实现的系统功能需要完整覆盖业务需求：

- 确保系统中所有链接都能正确跳转至目标页面，同时针对不同业务操作（如新增与修改），在跳转至同一页面时，需呈现与之对应的、符合业务逻辑的差异化展示效果
- 实现报销信息的增删改查功能
- 实现数据的过滤和动态展示功能。
- 在实现基本功能的基础上，可适当进行扩展

**界面美观性得分**

界面布局、色彩搭配与组件大小等符合效果图的视觉要求：

- **系统首页**四个模块布局合理，页面色彩搭配协调，确保整体效果与要求一致
- 对于数据量较大的情况，需使用分页组件进行数据分页展示，并使用分页组件进行页数的跳转切换

**资源规范性得分**

资源管理需规范，命名应统一简洁，便于识别和管理，详见[技术要求和评分标准](../about/score.md)

:::

## 获取案例素材{#material}

![素材资料](./images/2025-07-04-09-25-06.png)

[下载素材资料](https://www.jianguoyun.com/p/Dbmr3X0Qy--gChjSi4EGIAA) （提取码：SuccBI）

- `原型图` 需要按照原型图还原页面效果
- `图片` 页面中用到的图片
- `数据` 客户提供的业务数据和表结构及对应维表