数据组件事件

执行数据组件的方法，会触发相应的事件，说明如下

  • 赋值 setValue
    • 依次触发：数据改变中、数据改变后、数据发生变化（type=valueChanged）
  • 移动当前行 to
    • 依次触发：索引改变中、索引改变后
  • 新增数据 newData
    • 默认新增 - 依次触发：新增前、加载前、数据发生变化（type=loadData）、索引改变中、索引改变后、新增后、数据发生变化（type=new）
    • 接管新增 - 依次触发：新增前、接管新增、加载前、数据发生变化（type=loadData）、索引改变中、索引改变后、新增后、数据发生变化（type=new）
  • 保存数据 saveData
    • 默认保存成功 - 依次触发：批保存准备、保存前、保存后、保存成功
    • 默认保存失败 - 依次触发：批保存准备、保存前、保存后、保存失败
    • 接管保存成功 - 依次触发：批保存准备、保存前、接管保存、保存后、保存成功
    • 接管保存失败 - 依次触发：批保存准备、保存前、接管保存、保存后、保存失败
  • 删除数据 deleteData
    • 默认删除成功 - 依次触发：删除前、删除后、数据发生变化（type=delete）
    • 默认删除失败 - 依次触发：删除前、删除失败
    • 接管删除成功 - 依次触发：删除前、接管删除、删除后、数据发生变化（type=delete）
    • 接管删除失败 - 依次触发：删除前、接管删除、删除失败
  • 刷新数据 refreshData
    • 默认刷新成功 - 依次触发：刷新前、加载前、数据发生变化（type=loadData）、索引改变中、索引改变后、数据发生变化（type=refresh）、刷新后
    • 默认刷新失败 - 依次触发：刷新前、刷新失败
    • 接管刷新成功 - 依次触发：刷新前、接管刷新、加载前、数据发生变化（type=loadData）、索引改变中、索引改变后、数据发生变化（type=refresh）、刷新后
    • 接管刷新失败 - 依次触发：刷新前、接管刷新、刷新失败

特别说明

  • 不同的事件，事件参数不同，每个事件参数都包括 source 和 context 参数
    • source ：数据组件 js 对象
    • context ：页面上下文
  • 数据组件事件较多，隐藏了一部分事件，通过点击 + 添加事件，如下图所示

1721120970517

数据变化事件

数据改变中

参数中包括：行对象、列标识、新值、旧值、取消，格式如下

{
    "row" : 行对象,
    "col" : 列标识,
    "newValue" : 新值,
    "oldValue" : 旧值,
    "cancel" : 可修改，设置为 true 后中断当前数据改变动作
}

例如：修改 name 列中的“办公桌”为“办公桌1”，事件参数如下图所示

1721183476831

例如：用手机号生成用户名，示例代码如下

    onPersonDataValueChange = (event) => {
        let self = this;
        if (event.col == "phoneNumber") {
            if (this.comp("configData").getValue("createUserName")) {
                let userName = event.row.username;
                if (userName == "" || userName == undefined || userName == "t" + event.oldValue) {
                    this.comp("personData").setValue("username", "t" + event.newValue);
                }
            }
        }
    }

数据改变后

参数中包括：行对象、列标识、值、新值和旧值，格式如下

{
    "row" : 行对象,
    "col" : 列标识,
    "value" : 值,
    "newValue" : 新值,
    "oldValue" : 旧值
}

例如：修改 name 列中的“办公桌”为“办公桌1”，事件参数如下图所示

1721183510913

例如：父组织类型改变后，刷新组织类型数据，示例代码如下

    onPersonDataValueChanged = (event) => {
        if (event.col == "parentOrgType") {
            this.comp("orgTypeData").refreshData();
        }
    }

数据发生变化

参数中包括：触发变化类型，不同的类型还有其他相应的参数，格式如下

{
    "type" : 触发变化的类型，包括：new、delete、refresh、valueChanged、clear、loadData
    其他参数：根据触发类型不同给出不同参数，参考 onValueChanged 等事件参数
}

例如：修改 name 列中的“办公桌”为“办公桌1”，事件参数如下图所示

1721183535875

特别说明

  • 多种变化皆会触发该事件，建议根据触发类型进行判断，避免频繁执行代码

索引变化事件

索引改变中

参数中包括：行对象、原行对象、取消，格式如下

{
    "row" : 行对象,
    "originalRow" : 原行对象,
    "cancel" : 可修改，设置为 true 后中断当前新切换索引动作
}

例如：从第一行切换到第二行，事件参数如下图所示

1721183572697

例如：不能切换到金额大于400的行，示例代码如下

    onMasterDataIndexChanging = (event) => {
        if(event.row.money > 400){
            event.cancel = true;
        }
    }

索引改变后

参数中包括：行对象、原行对象，格式如下

{
    "row" : 行对象,
    "originalRow" : 原行对象
}

例如：从第一行切换到第二行，事件参数如下图所示

1721183596685

例如：组织改变后，刷新权限数据，示例代码如下

    onOrgTreeDataIndexChanged = (event) => {
        if (this.loaded && event.row && this.canShow(event.row)) {
            this.comp("pageData").setValue("currentName", event.row.name);
            this.orgCurrentRow = event.row;
            this.refreshAuthorizeData(event.row);
        }
    }

新增事件

新增前

参数中包括：新增方法参数、取消，格式如下

{
    "options" : 新增时传入的 options 参数，包括：parentRow、defaultValues,
    "cancel" : 可修改，设置为 true 后中断当前新增动作
}

例如：执行 newData 方法，传入 parentRow 和 defaultValues 参数，事件参数如下图所示

1721195040260

接管新增

参数中包括：新增方法参数、新增的数据、取消，格式如下

{
    "options" : 新增时传入的 options 参数，包括：parentRow、defaultValues
    "data" : 新增的数据，行对象数组 [{sName:'LiMing',sAge:18},...]，数组的长度决定新增的行数
        data 的格式：
            [
                {
                    "列名" : 默认值,
                    "列名" : 默认值,
                    ...
                },
                ...
            ]
    "cancel" : 可修改，设置为 true 后中断当前新增动作
}

例如：接管新增，代码如下

        onProductDataCustomNew = (event) => {
            event.data = [{ "id": "1", "name": "123" }, { "id": "2", "name": "1234" }];
        }

执行 newData 方法，触发接管新增事件，事件参数如下图所示

1721195543181

新增后

参数中包括：新增方法参数、新增的数据，格式如下

{
    "options" : 新增时传入的 options 参数，包括：parentRow、defaultValues
    "data" : {Array(Row))} 新增的行数组
}

例如：执行 newData 方法，传入 parentRow 和 defaultValues 参数，事件参数如下图所示

1721195279384

保存事件

批保存准备

参数中包括：保存方法参数、使用批，格式如下

{
    "options" : 保存时给入的参数
    "useBatch" : 可修改，设置为 true 后会启动批请求，通过 options.batch 获取批请求实例
}

例如：执行 saveData 方法，事件参数如下图所示

1721200867179

保存前

参数中包括：保存方法参数、批请求实例、取消，格式如下

{
    "options" : 保存时给入的参数,
    "batch" : 批请求实例
    "cancel" : 可修改，设置为 true 后中断当前保存动作
}

保存前事件通常用于保存前的校验，根据校验方法是同步的还是异步的，分为两种情况

  • 同步校验：校验不成功，即不保存，写代码 event.cancel = true; 中断保存
  • 异步校验：给 event.promise 赋值，例如：event.promise = this.checkExists(); 在方法中返回 reject(error) 中断保存

同步校验代码如下

onMainDataBeforeSave = (event) => {
    let tenantCode = event.source.getValue("tenantCode");
    if (!tenantCode) {
        message.error("请输入租户编码");
        event.cancel = true;
    }
}

异步校验代码如下

onMainDataBeforeSave = async (event) => {
    event.promise = new Promise(async (resolve, reject) => {
        //校验租户编码是否有效
        let tenantCode = event.source.getValue("tenantCode");
        if (tenantCode) {
            let result = await this.checkTenantsCode(tenantCode);
            if (result) {
                result = await this.checkTenantApply(tenantCode);
            }
            if(result){
                resolve();
            }else{
                message.error("租户编码无效");
                reject("租户编码无效");
            }
        }
    })  
}

接管保存

参数中包括：保存方法参数、保存请求 promise、批请求实例、取消，格式如下

{
    "options" : 保存时给入的参数
    "promise": 返回保存操作后的 promise
    "batch" : 批请求实例
    "cancel" : 可修改，设置为 true 后中断当前保存动作
}

对于不使用动态数据集，又有保存需求的数据组件，建议的做法是使用“接管保存”事件，在事件中自行提交数据。这样做可以使得该数据组件的用法和动态数据集的数据组件用法一致，体现在下面两点

  • 通过 saveData 方法或操作调用保存
  • 数据组件上设置的规则同样生效

示例代码如下

onProductDataCustomSave = (event) => {
    event.promise = new Promise(async (resolve, reject) => {
        resolve();
    });
}

保存后

参数中包括：保存方法参数、批请求实例，格式如下

{
    "options" : 保存时给入的参数
    "batch" : 批请求实例
}

保存后事件，在保存请求发出后触发，此时请求还没有返回，数据的新增、编辑状态还保留

保存成功

保存成功事件，在保存请求成功后触发，数据的新增、编辑状态改为未修改状态

保存失败

参数中包括：错误信息、错误类型，格式如下

{
    "info" : 错误信息,
    "errorType" : 错误类型
}

保存失败事件用于保存失败后的处理，包括提示保存失败的原因。例如在数据集的某列上设置“唯一”，插入重复值时，系统返回出错信息，如下图所示

1721182686508

系统对一些常见错误已经进行处理，上面的错误，在界面上提示为“保存数据失败,'办公桌'是已经存在的值”。如果需要个性化的错误提示，在保存失败事件中自行处理，示例代码如下

onMainDataSaveError(event){
    message.error(event.info.data.exception);
}

删除事件

删除前

参数中包括：删除的数据、删除方法参数、取消，格式如下

{
    "deleteValue" : 要删除的行数组
    "options" : 删除给入的参数
    "cancel" : 可修改，设置为 true 后中断当前删除动作
}

例如：执行 deleteData 方法，事件参数如下图所示

1721207704320

接管删除

参数中包括：删除的数据、删除方法参数、删除请求 promise、取消，格式如下

{
    "deleteValue" : 要删除的行数组
    "options" : 删除给入的参数
    "promise": 返回删除操作后的 promise
    "cancel" : 可修改，设置为 true 后中断当前删除动作
}

例如：接管删除，代码如下

    onProductDataCustomDelete = (event) => {
        event.promise = new Promise(async (resolve, reject) => {
            resolve();
        });
    }

执行 deleteData 方法，触发接管删除事件，事件参数如下图所示

1721207991148

删除后

参数中包括：删除的数据，格式如下

{
    "deleteValue" : 删除的行数组
}

例如：执行 deleteData 方法，事件参数如下图所示

1721208452440

删除失败

参数中包括：错误信息、错误类型、要删除的数据，格式如下

{
    "response" : 删除请求返回信息,
    "errorType" : 错误类型
    "deleteValue" : 删除的行数组
}

删除失败事件用于删除失败后的处理，包括提示删除失败的原因。例如：删除不存在的数据时，事件参数如下图所示

1721209606173

刷新事件

刷新前

参数中包括：刷新方法参数、取消，格式如下

{
    "options" : 刷新给入的参数
    "cancel" : 可修改，设置为 true 后中断当前刷新动作
}

例如：执行 refreshData 方法，事件参数如下图所示

1721205888168

刷新前事件可用于设置过滤条件，示例代码如下

    onApplyAuditDataBeforeRefresh = (event) => {
        let fownerorgfid = UserUtil.getCurrentOrg().fownerorgfid;
        let filter;
        if (fownerorgfid) {
            filter = [{name:"fownerorgfid",value:fownerorgfid,op:"like"}];
        } else {
            filter = [{op:"LBRAC"},{name:"fownerorgfid",op:"isNull",kind:"or"},{name:"fownerorgfid",value:"",op:"eqb",kind:"or"},{op:"RBRAC"}]
        }
        this.comp("applyAuditData").setFilter("f1", filter);
    }

接管刷新

参数中包括：刷新方法参数、分页数据大小、偏移量、刷新请求 promise、取消，格式如下

{
    "options" : 刷新给入的参数
    "limit" : 分页数据大小, 
    "offset" : 偏移量,
    "promise": 返回刷新操作后的 promise
    "cancel" : 可修改，设置为 true 后中断当前刷新动作, 
}

接管刷新事件中通常使用 loadData 方法给数据组件加载数据，使用 setTotal 方法设置总记录数。使用 event.limit 和 event.offset 进行分页查询。示例代码如下

    onProductDataCustomRefresh = async (event) => {
        event.promise = new Promise(async (resolve, reject) => {
            let self = this;
            let params = {
                size: event.limit,
                page: event.offset / event.limit,
            };
            let res = await Authorize.getRoles(self,params);
            for (let i = res.data.length - 1; i >= 0; i--) {
                if (res.data[i].type == "org") {
                    res.data.splice(i, 1);
                }
            }
            event.source.loadData(res.data);
            event.source.setTotal(res.numberOfElements*1);
            resolve();
        });
    }

执行 refreshData 方法，触发接管刷新事件，事件参数如下图所示

1721206568190

刷新后

参数中包括：刷新方法参数、返回数据、分页数据大小、偏移量、是否成功，格式如下

{
    "options" : 刷新给入的参数
    "rows" : 刷新请求返回的数据
    "limit" : 分页数据大小, 
    "offset" : 偏移量,
    "success" : 刷新是否成功
}

例如：执行 refreshData 方法，事件参数如下图所示

1721206195219

例如：代理刷新后，刷新岗位列表，代码如下

    onAgentDataAfterRefresh = (event) => {
        this.comp("orgsData").refreshData();
    }

刷新失败

参数中包括：错误信息、错误类型，格式如下

{
    "response" : 刷新请求返回信息,
    "errorType" : 错误类型
}

刷新失败事件用于刷新失败后的处理，包括提示刷新失败的原因。例如：查询不存在的数据表时，事件参数如下图所示

1721210233071

加载数据事件

加载数据前

参数中包括：要加载的数据，格式如下

{
    "data" : 要加载的数据
}

新增、刷新、加载数据前触发此事件，提供开发者修改数据的时机。例如：执行 loadData 方法，事件参数如下图所示

1721207213883

例如：对数据组件中 label 列的值进行 i18n 转换，代码如下

    onRuleTypeBeforeLoad = (event) => {
        this.i18nFn = (key) => {
             return this.i18n(key, import.meta.url);
        }
        wx.String.jsonI18n(event.data, ["label"], this.i18nFn);
    }

results matching ""

    No results matching ""