内容配置-列表

接下来我们开始一步一步的设置列表组件。

基本功能

• 设置表格列 表格列需要先设置表格数据映射和总条数，表格数据映射对应了后端返回数据如何显示在列表中，总条数是用于查询分页列表的字段。

  表格列的设置以表格的形式设置，每一行对应展示内容的的一个列，其中可以选定列的名称、对应的取值参数、对齐方式、宽度占比、列类型、是否显示tooltip等。

• 设置表格属性

  表格属性包括表格宽度、表格风格、是否显示表头、是否显示多选列构成

• 分页设置

  分页设置包括是否显示分页、分页类型、每页显示行数、分页栏按钮构成

用法

在组件列表中点击 组件设计 ，在打开的弹窗中点击 内容配置 标签。

点击表格列列表上的加号，增加当前行数，每一行对应展示列表中的一个列。

以上图为例，共两行，对应展示列表中的两个列。从左到右的参数分别对应：列展示名为 calld，不开启排序功能，列宽占比为40%，列样式为居左显示，显示tooltip。下面逐个介绍：

列名

列名是通过下拉选项设置的，对应数据来源配置页签的出参设置中的数据展示字段。

出参设置请看下图：

下拉选项请看下图：

从两张图片中可以看到数据的对应关系。

自定义列名

若在此输入框中填入内容，那么输入的内容将会替代列名称下拉选项中选中的名称。

排序

设置当前列的排序规则，分别为：排序、不排序、默认正序、默认倒序。

宽度占比

设置当前列的宽度，以百分比表示。

列类型

点击列类型后将打开一个窗口，在弹窗中可以设置列的自定义类型，分别为：

• 列的默认类型为普通列，显示对应的值内容。

• 进度条类型会将列的内容替换为一个进度条组件。

• 排名列会以设置的排名数值为最大值进行排名。

• 图片列会把列内容替换为图片，图片地址以值内容显示。

• 标识列分为三种，分别是：整列、嵌入、和性别图像。

  • 其中整列和嵌入都会在单元格中生成一个tag组件。

  • 性别头像则是规定设置当数据为何值时，代表性别为男；设置当数据为何值时，代表性别为女。

将第一列设置为标识列，第一行设置为红底白字，第二三行设置为黄底白字，第四五行设置为绿底白字后，列表效果如下：

列样式

列样式的可选项为：无样式、warning、info、success、danger、active、居左、居中、居右、加粗、斜体。

显示tooltip

设置当前列的每个单元格是否显示tooltip，默认为是。

分页设置

通过开关控制是否显示分页。开关打开后可设置真假分页，每页显示行数、分页按钮。

分页设置--接口管理

分页需要第三方接口支持，在第三方接口配置-请求头中配置页码和每页条数。

刷新组件

列表处理待办事项，审批流程结束以后需要刷新当前列表组件，需要产品线配合使用，回调是postMessage 一个 refreshComponent 的消息，传递参数为 componentCode，写法如下：

详见 刷新组件

数据格式

数据格式包含两个属性： 1. 数据 2. 总条数

配置的假数据和接口返回数据格式必须正确,rest接口必须返回json格式,webservervice接口返回xml格式,如格式不正确将无法正确显示

rest接口json格式假数据示例:

{
    "data": {
      "rows": [
        {
            "calId":"11",
            "scheduleType":"手术日程",
            "titleCode":"病历整理上报",
            "scheduleAddress":"手术室2",
            "participants":"张三,李四",
            "eventLevel":"1",
            "startDate":"2023-06-13 10:45",
            "endDate":"2023-06-13 11:30"
        },
        {
            "calId":"33",
            "scheduleType":"手术日程",
            "titleCode":"测试1",
            "scheduleAddress":"手术室2",
            "participants":"张三,李四",
            "eventLevel":"1",
            "startDate":"2023-06-10 13:30",
            "endDate":"2023-06-10 14:30"
        },
        {
            "calId":"44",
            "scheduleType":"手术日程",
            "titleCode":"测试2",
            "scheduleAddress":"手术室2",
            "participants":"张三,李四",
            "eventLevel":"2",
            "startDate":"2023-06-08 13:30",
            "endDate":"2023-06-08 15:30"
        },
        {
            "calId":"55",
            "scheduleType":"手术日程",
            "titleCode":"测试3",
            "scheduleAddress":"手术室2",
            "participants":"张三,李四",
            "eventLevel":"3",
            "startDate":"2023-06-11 08:00",
            "endDate":"2023-06-11 06:00"
        },
        {
            "calId":"100",
            "scheduleType":"手术日程",
            "titleCode":"测试4",
            "scheduleAddress":"手术室2",
            "participants":"张三,李四",
            "eventLevel":"3",
            "startDate":"2023-06-06 08:00",
            "endDate":"2011-06-06 11:00"
        }
      ],
      "total": 10
    }
 }