后端数据加载进度条

## 后端数据加载进度条
### 1、逻辑流配置
#### 1.1 添加逻辑流

![](/media/202404/2024-04-30_172423_875212.png)

#### 1.2 配置逻辑流事件
```javascript
import com.zhc.eap.utils.WsProgressUtil;

//获取get/post参数（注：源自 2.2下推参数配置）
//String FPOST1 = request.getParameter("FPOST1");

//第一个参数为进度条标题，第二个参数为进度（小数表示，1为100%）
WsProgressUtil.addMsg("aaaaa",1);

//前端需获取返回值时，使用该方式（注：配合2.4使用）
//JSONObject resJson = new JSONObject();
//resJson.put("data","test")
//ResponseUtil.responseData(response,resJson.toJSONString());
//第一个参数为HttpServletRequest，第二个参数为JSONObject，第三个参数为进度条标题，第四个参数为进度
//WsProgressUtil.addMsg(request,resJson,"aaaaa",1);
```

![](/media/202404/2024-04-30_172520_631098.png)

### 2、表单界面配置
#### 2.1 添加后端进度数据加载进度条组件

![](/media/202404/2024-04-30_172546_266625.png)

#### 2.2 下推参数配置
- 参数名：即参数KEY值
- 传输方式：post/get根据实际需求选取，get请求时，参数为地址栏参数；post请求时，参数为表单方式传输
- 值：即参数value值
注：多个参数时，添加多个参数即可，post/get配置方式一致，均需挨个添加参数

![](/media/202404/2024-04-30_172627_455292.png)

#### 2.3 进度条组件引用
- 方法1：按钮引用

![](/media/202404/2024-04-30_172652_533915.png)

- 方法2：事件引用
```javascript
//脚本中参数为:后端数据加载进度条 组件ID
//let _dd = this.$refs["DtDataRequestProgress_MKXfi7lo"];
this.$refs["DtDataRequestProgress_MKXfi7lo"].push();
```

![](/media/202404/2024-04-30_172729_958868.png)

#### 2.4 前端返回值处理

![](/media/202404/2024-04-30_172746_896394.png)

![](/media/202404/2024-04-30_172756_985479.png)

### 3、效果展示

![](/media/202404/2024-04-30_172815_368213.png)