# 逻辑编排场景专题示例

来源快照：`result_data_new_260518.json`

- 来源 ID：`1185202040855781385`
- 模块：前端逻辑编排
- 目录：逻辑编排设计器
- space ID：`1182582763689992228`
- 原文链接：未提供
- 产品基线：未提供

## 正文

## 1、自定义设置图表组件空状态

### 1.1场景介绍

图表组件在没有数据的时候，需要展示特殊的空状态效果。

### 1.2搭建说明

#### 1.2.1添加图表组件

添加图表组件，正常配置好数据源、维度、指标后即可（本示例额外增加项目类型为空，方便展示空状态）

![](https://weapp.eteams.cn/papi/file/preview?fileId=1185202113860091919&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=1185202105374433293&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.2.2默认图表空状态

可以先看下默认情况下图表的空状态

![](https://weapp.eteams.cn/papi/file/preview?fileId=1185202109498015746&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=1185202100909219841&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.2.3搭建逻辑流

创建关联当前页面的逻辑流

![](https://weapp.eteams.cn/papi/file/preview?fileId=1185202109465600004&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=1185202109492273155&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)

在逻辑流内添加覆写组件节点，并选择”e-builder组件库的空状态”，可以设置对应的组件参数：主要文字描述、次要文字描述、图标名称、图标宽度、图标高度等。设置好之后保存即可

![](https://weapp.eteams.cn/papi/file/preview?fileId=1185202100857749513&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=1185202096608337921&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.2.4效果展示

设置完逻辑流后的效果如下

 

![](https://weapp.eteams.cn/papi/file/preview?fileId=1185202113862737922&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=1185202096608337925&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、根据不同的项目类型打开不同的显示卡片布局

### 2.1场景介绍

通过项目列表新建项目数据时，需要根据不同的项目类型，打开不同的显示卡片布局。

### 2.2搭建说明

#### 2.2.1创建表单

首先创建两个表单：项目类型表、项目台账表

项目类型表，本示例主要关注：名称（单行文本）

![](https://weapp.eteams.cn/papi/file/preview?fileId=1185202109669400579&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=1185202113964367875&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)

项目台账表，本示例主要关注：项目类型（关联e-builder、必填）

![](https://weapp.eteams.cn/papi/file/preview?fileId=1185202109465600006&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=1185202100919115785&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.2.2设置表单表格视图

创建项目台账表的表格视图，选择数据列表  
 

![](https://weapp.eteams.cn/papi/file/preview?fileId=1185202100909219849&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=1185202100909219856&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=1185202118104727556&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=1185202113861230592&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=1185202096608337923&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=1185202113862737925&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=1185202105398632449&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=1185202105398632455&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.2.3搭建逻辑流

创建关联项目台账-项目列表的逻辑流

![](https://weapp.eteams.cn/papi/file/preview?fileId=1185202118104727559&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=1185202109498015750&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=1185202105374433297&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=1185202118273638401&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=1185202096724811782&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=1185202092435587082&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=1185202096622641159&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=1185202096724811776&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.2.4效果展示

设置完逻辑流后的效果如下

点击项目6，由于项目类型是科研项目，打开的显示布局是“台账台账-科研项目”

 

![](https://weapp.eteams.cn/papi/file/preview?fileId=1185202105398632452&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=1185202118104727554&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=1185202105374433285&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=1185202100857749506&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)
