# 利用占用视图实现会议室的可视化申请

来源快照：`result_data_new_260518.json`

- 来源 ID：`1971375671603226746`
- 模块：低代码平台e-builder
- 目录：专题学习 - 场景专题 - 表单专题
- space ID：`1157961794811633670`
- 原文链接：未提供
- 产品基线：未提供

## 正文

****

**1.  ****编写目的  **

本期主要讲解会议室的申请使用场景。公司的日常会议经常需要预约申请会议室，此时往往存在两个难题：对于申请人来说，无法及时获得各个会议室在各时间段的使用情况；对于管理者来说，传统的表单填写或者纸质记录，也很容易造成会议室的资源冲突，出现一个会议室被同时占用的情况。

本场景中利用表单的占用视图功能，可视化的展示会议室相关信息以及每个时间段具体的使用情况，用户在视图中点击会议室空闲的时间段，即可快速发起会议室申请流程。帮助客户解决会议室可视化、申请便捷化的难题，最大程度的利用会议室资源。

 

**2.****思路分析**

为了实现上述场景，我们需要准备两张表单：会议室信息表以及会议室申请表。在会议室申请表下新建占用视图，选择被关联的会议室信息作为资源字段，并配置显示字段、开始时间、结束时间等关键信息，使表单字段与占用视图绑定。设置完成后，即可实现可视化查看会议室使用情况，并快速发起会议室使用申请，展示效果如下：

![](https://weapp.eteams.cn/papi/file/preview?fileId=1157693681578352654&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

** **

**3.  ****操作说明**  

**1.****新建会议室信息表与会议室申请表**

如下图所示，新建会议室信息表，记录会议室名称，所在位置等信息：

![](https://weapp.eteams.cn/papi/file/preview?fileId=1157693681478426669&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

新建会议室申请表，包含会议开始/结束时间（日期字段：年月日时分）、选择会议室（关联eb字段，关联会议室信息表）等关键数据信息：

![](https://weapp.eteams.cn/papi/file/preview?fileId=1157693681622974528&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

**2.****新建占用视图，配置相关信息**

在会议申请表下新建占用视图，并进入信息配置界面，配置信息中各个配置项的解释可以[点击链接查看帮助文档](https://eteams.cn/community/help/1964733015443079120)。

![](https://weapp.eteams.cn/papi/file/preview?fileId=1157693685764268041&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

![](https://weapp.eteams.cn/papi/file/preview?fileId=1157693685742665759&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

1、基础配置：在本场景中，我们选择会议申请表中的“选择会议室”字段作为资源字段（资源字段目前支持关联eb字段与自定义浏览字段）；并且将会议室图片等字段作为提示信息；设置会议室名称等作为筛选条件，配置及效果如下：

![](https://weapp.eteams.cn/papi/file/preview?fileId=1157693690227007564&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

2、资源冲突校验开关：该开关开启后，在选择会议室+时间时，如果该时间段的会议室已经被占用，则会提示已经被占用，无法发起申请，展示效果如下：

![](https://weapp.eteams.cn/papi/file/preview?fileId=1157693694340104241&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

3、时间字段：展示设置中，比较重要的设置项是开始时间与结束时间字段，选择会议申请表中的字段与其对应，可以实现在视图中勾选时间区间，自动带入到表单对应的字段中：

![](https://weapp.eteams.cn/papi/file/preview?fileId=1157693694371717209&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

4、详细提示信息：这是指鼠标悬浮在占用视图已有的资源上时，显示详细的信息。如下图所示：鼠标悬浮后显示详细的会议名称、发起人、参会人员等信息：

![](https://weapp.eteams.cn/papi/file/preview?fileId=1157693698859622428&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

5、新建按钮：在占用视图右上角，可以看到新建按钮，默认打开会议申请（此时无法自动带入会议室和会议时间），用户可以根据自己的实际需求重新为该按钮配置其他的功能。

![](https://weapp.eteams.cn/papi/file/preview?fileId=1157693703137812481&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

6.底部列表设置：占用视图可以在底部提供列表视图，展示会议申请信息，视图可选择开启/关闭，在开启状态下，可选择默认收缩/展开。注意该列表展示的数据是和上面视图中的数据相对应的，例如视图按天展示，当天有数据，则列表中有数据；反之，则列表也无数据：

![](https://weapp.eteams.cn/papi/file/preview?fileId=1157693703137812597&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

7、其他设置：此外占用视图中还包含面板高度、显示时间段、默认视图、周开始日期等设置项，用户可根据实际情况进行设置。

需要注意的是冲突颜色设置，这里就与第二步的资源冲突校验相对应，如果不开启资源冲突校验，就可能发生同一会议室的同一时间段，被多次占用，此时颜色就会显示冲突颜色：

![](https://weapp.eteams.cn/papi/file/preview?fileId=1157693711704522779&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

 

配置完成后，将该视图放置在应用前台的菜单中，即可进行可视化的会议室申请与领用，展示效果如下：

![](https://weapp.eteams.cn/papi/file/preview?fileId=1157693720337285123&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)
