从零实现低代码平台(二) -- 列表页配置及预览

OJAccepted
1,741 阅读4分钟

「这是我参与2022首次更文挑战的第1天，活动详情查看：2022首次更文挑战」。

概要

继表单配置之后，低代码平台也是定制列表页的利器。本文主要讲解

  1. 技术设计
  2. 预览实现

先附上github链接

附上效果图

6f25bebee2d737a73be93c166a212ec.png

技术设计

数据流设计

image.png

页面分为两个部分，一部分是搜索栏，一部分是展示数据的列表。搜索栏通过回调控制filter，列表通过回调控制分页和排序。

filter/分页/排序 其中之一变化就会触发请求，拉取最新的数据。

没有画到的是reset按钮，会重置filter、分页、排序，然后发送请求，重置数据

DSL

关于DSL的格式，设计如下

[
  {
    "uuid": "2d3d1b14-77bd-4921-bb87-33545de4b148",
    "components": [
      {
        "type": "Filter",
        "uuid": "9942fc61-21d0-414d-b112-1ef01fe24be8",
        "components": [
          {
            "uuid": "64b4f8a7-5e83-4461-a187-3b89c18d25ea",
            "type": "Input"
          }
        ]
      },
      {
        "type": "Table",
        "uuid": "cd2925d4-9fff-4f94-ba0d-b6d25a9e8758",
        "components": [
          {
            "uuid": "1ef7b679-bb98-4de6-85d4-31cad5c5ce43",
            "type": "Column",
            "fieldName": "性别",
            "fieldKey": "sex",
            "convertRuleMap": [
              { "key": " 男", "value": "male" },
              { "key": " 女", "value": "female" }
            ],
            "sorter": false
          }
        ]
      }
    ],
    "type": "Integration Table"
  }
]

本质上还是一棵组件树。划分了四个组件层级：Filter、Filter中的输入组件、表格、表格中每列的展示组件

Filter描述的是页面的上半部分，也就是通常的搜索栏。这部分其实是一个表单，基于之前的BasicForm实现的预览。通过fieldConfig字段实现了组件的场景化配置，因此IntegrationForm和IntegrationTable中虽然都用了BasicForm这个组件，底层的输入框、数字输入框、日期输入框、选择器也是一样的，但是可以配置的字段却是不一样的。

Table描述的是页面的下半部分，也就是展示数据用的表格。Table中的每一列都设计成了一个组件，后续会提供组件选择，比如文本渲染、超链接等。

本次新增了四种组件类型: IntegrationTable、Filter、ColumnList、Column，来看看这四种类型的组件分别有哪些属性

IntegrationTable组件属性设计

export interface IntegrationTableProps extends FieldPublicProps {
  type: ComponentTypes.integrationTable;
  url: string;
  components: [IntegrationTableFilterProps, IntegrationTableColumnListProps];
}

在这一层级的属性很少，只是包含了数据源的url，其他的属性都放在Filter以及ColumnsList中

Filter组件属性设计

export interface IntegrationTableFilterProps extends FieldPublicProps {
  type: ComponentTypes.integrationTableFilter;
  components: ComponentProps[];
}

Filter本质上是一个表单，search按钮和reset按钮的逻辑都被固定了，因此也不需要过多的属性，仅需要把字段都放在components中即可

ColumnList属性设计

export interface IntegrationTableColumnListProps extends FieldPublicProps {
  type: ComponentTypes.integrationTableColumnList;
  components: IntegrationTableColumnItemProps[];
}

ColumnsList同样没有过多的属性配置，Filter以及ColumnList这两个组件层级的设计是为了让结构更清晰一些，也为了以后如果要在这两个层级上新增功能的时候，直接添加新的属性即可

Column属性设计

export type IntegrationTableColumnConvertRulesProps = {
  key: string;
  value: string;
}[];
export interface IntegrationTableColumnItemProps extends FieldPublicProps {
  type: ComponentTypes.integrationTableColumnItem;
  fieldName: string; // 表头的文案
  fieldKey: string; // 在接口中的key，支持'a.b.c.d'的NamePath格式，但不支持['a', 'b']这种
  convertRuleMap: IntegrationTableColumnConvertRulesProps; // 转换规则，暂时用于转换select组件的字段，后续提供column层级的组件后会移除
  components?: ComponentProps[]; // 暂时没有用到，待后面开发更多column层级的组件
  sorter?: boolean; // 该列是否允许排序
}

column则在表格中每一列的配置，这个层级的组件大多需要实现简单的逻辑，比如超链接组件，往往需要识别该行的某个属性然后才能拼接出完整的链接。因此会等到表达式系统实现后再提供

预览实现

在预览功能中，仍然基于antd实现。

Filter

Filter的配置 跟之前的IntegrationForm类似，Filter的预览通过遍历components数组挨个组件渲染，但是在渲染的时候稍微改变了一下渲染的效果而已。

但跟IntegrationForm不同的是，添加组件时，会在每个组件的属性中多加了一个fieldConfig字段，用来隐藏部分属性的配置(比如搜索栏不需要配置初始值)

Search以及Reset按钮的点击事件都被设定好了，Search按钮用于把Filter、每列的排序信息、当前的分页信息传给设定的接口并根据返回初始化表格数据。在预览中，如果拉取不到数据，则会用'-'填充每个字段。类似的，Reset则用于清空Filter以及排序，并且切回第一页的数据。

ColumnList

ColumnList的配置 ColumnList的预览用的是antd的Table组件

分页以及排序都是基于antd的Table功能，通过Table的onChange函数搜集分页和排序的变化信息，并发送请求。

avatar
文章
阅读
粉丝