使用Hooks实现按钮或页面Loading效果

场景：当在基础资料作业或任务卡等页面上，点击按钮执行调用API或其他类似操作时，
希望在执行过程中在页面呈现loading效果，让用户知道后台正在执行中需要等待。

效果1：按钮呈现loading效果

在按钮的hooks中用 component.loading = true 来让按钮呈现loading效果
用 component.loading = false 来解除按钮loading效果
以下是一个调用ESP API时加上按钮loading效果的hooks示例：

1. //将按钮设为loading状态
   
2. component.loading = true;
   
3. console.log(component.loading);
   
4. 
   
5. //调用ESP API
   
6. options.utils.espApi
   
7.     .getEspByActionId({
   
8.         actionId: 'esp_isv.pdemo.sample.personnel.report.get',
   
9.         parameter:{"employee_info":[{"employee_no":"0001"}]}
   
10.     })
    
11.     .subscribe(
    
12.         (res) => {
    
13.             console.log(res.data);
    
14.             //执行结束后解除按钮loading状态
    
15.             component.loading = false;
    
16.             console.log(component.loading);
    
17.         },
    
18.         (err) => {
    
19.             console.log(err.error.betterErrorMessage);
    
20.             //执行结束后解除按钮loading状态
    
21.             component.loading = false;
    
22.             console.log(component.loading);
    
23.         }
    
24.     );

复制代码

效果2：整体页面（表格）呈现loading效果，并遮罩页面

此效果必须页面上有表格组件才能使用
需要先获取表格组件的ID，然后在按钮的hooks中用 component.getComponentById('...') 来获取表格组件，
假设获取的表格组件为 tableComponent，再用 tableComponent.setLoading(true) 来加上loading效果，
用 tableComponent.setLoading(false) 解除loading效果
以下是一个点击按钮后呈现5秒loading效果的hooks示例：

1. //获取表格组件
   
2. let tableComponent = component.getComponentById("9528ff20-f56d-25b9-fba4-b204c93cede1");
   
3. if (tableComponent) {
   
4.   //将表格设为loading状态
   
5.   tableComponent.setLoading(true);
   
6.   tableComponent.markForCheck();
   
7.   setTimeout(() => {
   
8.     //取消表格loading状态
   
9.     tableComponent.setLoading(false);
   
10.     tableComponent.markForCheck();
    
11.   }, 5000)
    
12. } else {
    
13.   console.log('获取表格组件异常......');
    
14. }

复制代码

表格ID可以在这取得