数据表视图

数据表视图是数据展示的一种形式，提供分页、搜索等功能。通过选择合适的数据视图，可以提升系统的使用便利性。织信平台内置了多种视图类型，包括但不限于以下几种：

视图	说明	PC端展示	移动端展示
表格视图	使用表格模式展示数据	支持	支持
卡片视图	使用卡片模式展示数据	支持	支持
日历视图	使用日历展示数据	支持	支持
甘特图视图	使用甘特图展示数据	支持
看板视图	使用看板展示数据	支持
树形视图	使用树形机构展示数据	支持
资源日历视图	使用资源日历展示数据	支持
时间线视图	使用时间线展示数据	支持
地图视图	使用地图展示数据	支持
文件夹视图	文件夹形式的树形结构展示	支持
自定义视图	使用网站页面展示视图	支持	支持

提示

每一张数据表都会默认关联一个表格视图

视图页面结构

视图页面主要由公共区域（组合筛选条件、工具栏、筛选条件）和视图展示区域组成。公共区域是所有视图共有的，不同视图之间区别在于视图展示区域

• 组合筛选条件：显示组合筛选条件标签
• 视图工具栏：设置多个控件，例如创建按钮、删除按钮等
• 筛选条件：根据字段进行数据筛选。多个筛选条件之间是满足所有条件的关系
• 视图展示区域：根据不同的视图类型显示不同的页面内容

筛选条件

视图的筛选条件主要支持字段筛选条件、组合筛选条件、地址栏筛选条件三种，并支持分页样式的设置

分页样式

分页样式支持简约、经典两种模式

字段筛选条件

字段筛选条件，主要是提供给用户自行过滤的筛选条件

禁用过滤条件缓存

默认情况下，系统对每一个视图都会记录上一次的过滤条件，以便下一次访问该模块，能够保留上一次的过滤条件。 启动该设置后，每一次进入模块，筛选条件都是初始化的

使用以下字段作为筛选条件

设置多个按照字段的筛选条件，或多个文本类型字段组合的模糊过滤筛选条件。设置的字段在应用发布后将会显示于视图的筛选条件区域

筛选条件间的逻辑关系

多个筛选条件之间的逻辑关系是满足所有条件。

如果设置了姓名与性别两个字段作为筛选条件，用户在姓名筛选条件输入张三，在性别筛选框输入男性，则实际的筛选的数据为，姓名是张三且性别为男性的数据

动态待选值

过滤条件待选值列表可以通过调用自动化进行设置，以满足个性化场景中对于字段筛选条件可见数据权限的精细控制。自动化中只需要通过设置自动化返回值步骤将作为动态待选值的列表数据返回即可

各类型字段动态待选值数据结构如下：

成员类型字段包含用户选择、创建人、最后更新人等类型字段，返回的结构为Array<User>，示例如下：

[
    {
        // 头像
        "avatar": "pic16.png",
        // 用户名称拼音-输入框可快速搜索
        "hint": "wangyanfeng",
        // 用户ID
        "id": "lwfwqr67xsvup",
        // 用户名称-输入框可快速搜索
        "name": "李思明",
        // 用户备注-输入框可快速搜索
        "remark": "mingsi.li"
    }
]

列表选择类型包含列表选择，返回的结构为Array<String>，数组元素为列表选项的标识符，示例如下：

列表选择选项值如下：

选项值	标识符
未开始	unstart
进行中	progress
已完成	complete
已取消	cancel

使用自动化返回选项ID列表：

["unstart","progress"]

则列表下拉将仅展示未开始、进行中

更详细的内容可以参考列表选择字段的示例

关联类型包含关联记录、关联列表等类型字段，用户点击搜索后调用自动化将默认传入QueryCondition类型数据。

QueryCondition结构如下：

属性	类型	说明
pageIndex	Integer	当前页码
pageSize	Integer	分页大小
searchTableId	String	查询数据表ID
searchFilterId	String	查询数据表字段使用过滤器ID
childrenFieldId	String	根据此字段进行树形结构查询
childrenShowFullPath	Boolean	树形结构是否返回全路径数据
childrenLevel	Integer	树形结构返回数据的层级
orderByList	Array	排序字段
filter	ViewFilter	过滤条件
filterVars	Object	过滤条件可用上下文变量

自动化返回的结构如下：

/**
 * 分页结果
 */
interface PagedResult {
    // 总记录数
    "count": Number
    // 显示的数据列表
    "list": Array<Record>
}

更详细的内容可以参考关联记录字段的示例

筛选条件展示位置

组合筛选条件

将一个或多个字段的筛选规则组合成一个筛选条件，例如对于任务管理场景中我的未完成任务的筛选是组合了任务状态等于未开始或进行中，责任人等于当前用户组合筛选条件的设置项

组合筛选条件显示位置

地址栏筛选条件

如果希望能通过页面的URL来控制页面的筛选，则需要设置地址栏组合筛选条件。地址栏筛选的过程如下

1. 在地址栏的参数中传递filter={filterId}&c1=1&c2=abc
2. 返回的数据会使用标识符为filterId的地址栏组合条件进行筛选，并且将参数转化为JSON对象，作为参数传递给筛选条件的过滤器，在过滤器表达式中通过${query.c1}取值

const query = {
    c1: "1",
    c2: "abc"
}

注意

传递的参数对象中的值都是String类型，如果与需要过滤的字段类型不符，请自行进行类型转换

示例

过滤任务完成度大于等于地址栏minComplete参数的值，本示例中由于完成度字段为小数类型，所以需要对地址栏参数进行类型转换。 用户在地址栏参数中输入filter=min&minComplete=20，则可以过滤完成度>=20的任务

多种筛选条件之间的关系

如果在页面中设置地址栏筛选条件、组合筛选条件、字段筛选条件，这些条件之间的关系是满足所有条件的关系。例如在任务管理的场景中

• 地址栏筛选条件设置了完成度>20的条件
• 组合筛选条件设置了状态=未开始或进行中并且责任人=当前用户的条件
• 字段筛选条件设置了开始时间>今天的条件

那么返回的结果就是完成度>20并且责任人=当前用户并且状态=未开始或进行中并且开始时间>今天的任务。

树形结构

对有树形结构的数据表，可以通过子对象字段描述记录之间的树形结构关系。开启树形结构显示后，视图页面将会树形结构的形式查询数据，此时分页功能将不能使用。树形结构展示时可设置默认的加载层级和默认的展开层级。

允许在搜索结果中包含父节点

在开启树形结构后，如果希望在查询的结果中始终显示父节点，也就是说查询结果会包含从根节点开始的完整的树结构，可以打开此选项。开启后在视图工具栏用户可通过勾选是否显示完整结构来控制查询结果的显示方式。

示例

下方的示例演示了当用户进行搜索后，包含父节点与不包含父节点的效果

显示当前路径工具栏

在开启树形结构后，如果希望进入到下级节点能显示当前路径的面包屑导航，可以打开此选项。开启后在视图工具栏下方会根据配置的路径工具栏显示的名称字段形成面包屑导航，用户可通过面包屑导航快速跳转到任意父节点。

满足条件时展示查看下级按钮

系统默认显示下级按钮，用户通过点击下级按钮可以查看当前记录的下级数据。在此可以通过表达式控制该按钮的显示或隐藏。下图主要演示用户点击下级按钮时的效果。

启用异步加载子对象数据

启用后，默认加载层级以下的子对象数据将通过调用自动化的方式返回。

满足以下条件的记录展示异步加载按钮

可使用上下文表达式计算当前节点是否展示下级加载按钮，具备该按钮，才可以点击加载下级数据

调用自动化返回子对象数据

调用自动化后可使用自动化中的设置自动化返回值返回子对象数据列表数据，数据类型为Array<Object>

TIP

设置的自动化，运行环境为客户端，可使用自动化中的交互输出步骤，进行用户交互行为。

返回的子对象数据注意事项

• 返回的子对象数据，子项属性和当前视图所在数据表列的字段标识符一致
• 返回的子对象数据，会自动追加到当前的节点下，即使返回的记录父级不是当前记录，所以在构建树形关系时需要特别注意。
• 返回的子对象数据，内部不支持树形结构，如果是树形结构，将不会渲染子对象数据的下级数据

示例

我们将演示一个异步加载子对象的树形表格，是如何设置的。

基础设置

【树形结构-异步加载数据】自动化

通过传入的记录参数record，查询子任务父对象等于${record.id}的记录，并通过设置自动化返回值返回数据

数据过滤和排序

默认情况下视图会加载所有的数据，可以通过设置只展示满足以下条件的数据的过滤器来限制本视图展示的数据范围。例如任务管理中只展示未完成的数据，需要在过滤器中设置任务状态等于未完成的条件。

TIP

只展示满足以下条件的数据与其他过滤条件为满足所有条件的逻辑关系。

返回以下字段

对于一些对数据安全性高的系统，您可以设置返回的字段列表来控制服务器返回到用户端的列表数据内容。实现在接口层面防止数据的外泄，以及优化查询性能的需求场景。

系统默认情况下会根据返回的字段列表的设置返回数据字段到用户端，您也可以使用使用表达式设置返回的字段列表控制项，通过表达式动态设置返回的数据字段列表。

使用表达式设置返回的字段列表

该表达式的运行环境为服务端。表单式返回的结果为字段标识符列表，你可以直接使用表达式简单的控制返回，也可以使用表达式调用脚本或自动化更加灵活的控制数据返回。下面是一个具体的例子

假设一张员工薪资表(staffSalary)结构如下

标识符	类型	说明	字段ID
name	单行文本	姓名	tzyjhya8xv32j
mobileNo	单行文本	联系电话	m0e2wkyo2cklu
salary	小数	薪资	qo43drhw00fmr

依据设定不能返回薪资字段

直接返回

${['name', 'mobileNo']}

使用表达式计算加入逻辑运算(比如成员角色包含hr时才展示薪资)

${ 
    Array.containsAny(user.roleList, ['hr']) 
    ? 
    ['name', 'mobileNo', 'salary']
    : 
    ['name', 'mobileNo']
}

使用表达式调用自动化

// 该自动化通过【设置自动化返回值】步骤，并根据当前用户返回字段列表
${Misc.invokeAutomatic('getStaffSalaryFieldListByUser', user)}

示例

我们通过设置使用表达式设置返回的字段列表，设置返回的字段为${['name', 'mobileNo']}，如果此时在前端显示了薪资字段，会有如下效果

TIP

系统所有接口返回的数据表数据，都是根据字段ID来返回的，如本例子中提及的查询数据表记录列表接口（TableAction.queryModuleRecordList）接口

由于后台没有返回薪资数据，所以薪资那一列的数据为空

系统调用的查询数据表记录列表接口（TableAction.queryModuleRecordList），返回的数据也不包含薪资字段（字段ID为qo43drhw00fmr）

{
    "count": 3,
    "list": [
        {
            "m0e2wkyo2cklu": "18212341234",
            "id": "fzc08h71woz81",
            "seq": 1,
            "tzyjhya8xv32j": "王五"
        },
        {
            "m0e2wkyo2cklu": "13712341234",
            "id": "xyq992g13oprm",
            "seq": 2,
            "tzyjhya8xv32j": "张三"
        },
        {
            "m0e2wkyo2cklu": "13923421222",
            "id": "j3ba3sqwets7n",
            "seq": 3,
            "tzyjhya8xv32j": "李四"
        }
    ]
}

只展示满足以下条件的数据

该字段主要控制当前数据表视图下展示的数据，一般用于数据的隔离，如任务管理中我的任务作为视图存在时，可在该配置中设置责任人等于${Context.userId()}，以此来进行视图级别的数据隔离。

TIP

只展示满足以下条件的数据与其他筛选条件之间的逻辑关系是满足所有条件。

默认的排序方式

系统默认情况下会根据数据的创建先后顺序排序，通过设置默认的排序方式可修改此行为。允许通过以下字段排序选项设置页面中用户可以使用的排序字段。

排序关系

如果既设置了默认的排序方式，用户又在视图页面设置了字段排序，则默认的排序方式失效，使用用户在视图中设置的字段排序。

如果用户在视图中设置了多个字段排序规则，则按照用户设置的排序字段在视图中的显示顺序作为优先级进行排序。

示例

示例中为通过设置开始时间升序作为默认排序方式，允许通过状态、完成度、责任人等字段进行排序。我们将通过这个示例来讲解系统内的排序逻辑

用户先设置了责任人升序，再设置了状态升序。 不管用户设置排序字段的先后顺序，都按照视图中字段的显示顺序作为优先级来排序，示例中状态字段在责任人字段之前。

则排序规则为，先按状态升序再按责任人升序

查询数据的前处理

如果我们需要在查询数据之前做统一的数据权限控制，需要根据上下文设置不同的过滤条件等情况，可以使用查询数据的前处理来动态的设置数据表的过滤条件。

在查询视图数据时会先调用设置的自动化，并将TableQueryEvent类型的参数传递给自动化，如果自动化或者脚本中抛出异常，将会终止查询动作。

如果设置了类型为TableQueryBeforeResul的自动化返回值，将会根据返回值对原有过滤条件追加新的过滤条件或者用新的过滤条件替换原过滤条件

TableQueryBeforeResult结构如下:

名称	说明
mode	过滤条件合并模式 追加 append 替换 replace
filter	过滤条件,类型InformatFilter

mode可选项

模式	说明
append	追加新的过滤条件 ,默认
replace	用新的过滤条件替换原过滤条件

下文将以任务管理作为例子，管理员/主管/总经理角色能够查询所有任务，其他角色则只能查询自己的任务

创建视图依赖的数据表任务表

标识符	字段名称	字段类型	说明
no	编号	编号	编号计算表达式：T${String.lpad(seq,6,'0')}
name	名称	单行文本	任务的名称
progress	完成度	小数
state	状态	列表选择	选项：未开始、进行中、已取消、已完成
who	责任人	用户选择
startDate	开始时间	日期
planStartDate	预计开始时间	日期
planFinishDate	预计完成时间	日期
finishDate	实际完成时间	日期
descs	任务描述	富文本	业务字段
docs	任务文档	附件	业务字段
taskChildren	子任务	子对象	用于构建树形结构

状态枚举值

选项	标识符
未开始	unstart
进行中	progress
已取消	cancel
已完成	complete

添加一个只有【代码片段】步骤的自动化作为查询数据的前处理，以下是具体的代码：

const userId = informat.app.userId();
const user = informat.user.getUser(userId);

// 如果包含管理员、主管、总经理角色不处理，否则过滤责任人为自己的数据
if(['admin', 'ceo', 'manager'].some(role => user.roleList.includes(role))) {
    
} else {
    automatic.setReturnValue({
        'mode': 'append',
        'filter': {
            'conditionList': [
                { 'fieldId': 'who', 'opt': 'eq', 'value': userId }
            ]
        }
    });
}

查询数据的后处理

有些时候，我们需要对返回的列表数据做一些处理。如数据脱敏等情况，则可以使用该功能，返回处理后的数据。

在数据查询成功后会调用设置的自动化或者脚本，并将TableQueryEvent类型的参数传递给自动化。自动化可以返回一个TableQueryAfterResult类型的对象，用来修改查询结果。如果返回值为空或者不是TableQueryAfterResult类型，系统会显示原来的查询结果。

TableQueryAfterResult结构如下:

名称	说明
list	新的查询记录列表，将显示到视图中
count	新的查询记录总数，用于数据分页

示例：

automatic.setReturnValue({
    'list': [
        { 'id': '1', 'name': '张三', 'mobile': '137****1234' }
    ],
    'count': 10
});

返回的列表数据

返回的列表数据子项的属性，需要与当前视图所在数据表的字段标识符一致，且返回的列表数据子项必须返回id属性。

下文将以薪资管理作为例子，管理员角色没有限制，其他角色看到的薪资列为空，且手机号为脱敏后的手机号。

创建视图依赖的数据表薪资表

标识符	类型	说明	字段ID
name	单行文本	姓名	tzyjhya8xv32j
mobileNo	单行文本	联系电话	m0e2wkyo2cklu
salary	小数	薪资	qo43drhw00fmr

添加一个自动化：

输入参数如下：

参数名	类型
event	Object

添加一个【代码片段】步骤，具体代码如下：

const event = automatic.getVar('event');
const {count,list} = event;

const userId = informat.app.userId();
const user = informat.user.getUser(userId);

// 如果是管理员不处理
if(user.roleList.includes('admin')) {
    
} else {
    list.forEach(item => {
        item.salary = null;
        item.mobileNo = item.mobileNo.replace(/^(.{3}).*(.{4})$/, "$1****$2")
    })
}

automatic.setReturnValue({
    count,
    list
})

表单设置

设置当前视图中表单的行为。可覆盖原数据表的表单设置。包括表单打开记录的展示方式、表单数据保存模式，表单的字段设置等。如果不配置则默认使用数据表的配置

点击记录后表单的展示方式

TODO 由于有BUG无法截图，后续补充

事件监听

视图可监听的事件为：

• 双击记录 用户双击记录时触发
• 单击记录 用户单击记录时触发
• 记录选中变化后 用户选中的记录发生变化时触发
• 日历视图双击空白日期 用户在日历视图双击空白日期时触发
• 视图数据加载完成后 视图数据加载后触发

通过创建事件监听器可以在事件触发后执行自动化程序来完成复杂的交互功能。事件触发后会向自动化传递一个类型为 ViewEvent的参数。从ViewEvent的content属性中可以获取用户在表格视图中点击的行和列，或者是在日历视图中点击的空白日期。

下面将展示事件的触发，并弹出对话框显示对应的ViewEvent。