1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
import { Loading } from "element-ui";
import { ElLoadingComponent } from "element-ui/types/loading";
import { ILoadingService } from "ibiz-core";
import { LayoutLoadingService } from "..";
export class ContainerLoadingService implements ILoadingService {
/**
* 视图布局面板loading服务
*
* @protected
* @type {LayoutLoadingService}
* @memberof ContainerLoadingService
*/
protected layoutLoadingService?: LayoutLoadingService;
/**
* loading Dom
*
* @protected
* @type {ElLoadingComponent}
* @memberof ContainerLoadingService
*/
protected loadingComponent?: ElLoadingComponent;
/**
* 是否加载中
*
* @type {boolean}
* @memberof ContainerLoadingService
*/
public isLoading: boolean = false;
/**
* Creates an instance of ContainerLoadingService.
* @param {*} layoutLoadingService
* @memberof ContainerLoadingService
*/
constructor(name: string, layoutLoadingService: LayoutLoadingService) {
this.layoutLoadingService = layoutLoadingService;
this.layoutLoadingService?.addCLService(name, this);
}
/**
* 开始加载
*
* @param {string} elementKey 获取dom标识
* @return {*}
* @memberof ContainerLoadingService
*/
public beginLoading(elementKey: string): void {
const element: any = document.querySelector(elementKey);
if (!element || this.isLoading) {
return;
}
this.loadingComponent = Loading.service({
fullscreen: true,
target: element,
customClass: 'app-loading',
});
this.isLoading = true;
// loading Dom
const userEle = `<div class="app-loading__icon">
<div class="app-loading__icon__content">
<div class="content__item is-active"></div>
<div class="content__item"></div>
</div>
<div class="app-loading__icon__content">
<div class="content__item"></div>
<div class="content__item"></div>
</div>
</div>`;
const loadingEle = element.lastChild;
if (loadingEle) {
loadingEle.innerHTML = userEle;
}
// 开启布局面板loading服务
if (this.layoutLoadingService) {
this.layoutLoadingService.beginLoading();
}
}
/**
* 结束loading
*
* @return {*}
* @memberof ContainerLoadingService
*/
public endLoading() {
if (!this.isLoading) {
return;
}
this.isLoading = false;
// 删除loading Dom
if (this.loadingComponent) {
this.loadingComponent.close();
}
// 关闭布局面板loading服务
if (this.layoutLoadingService) {
this.layoutLoadingService.endLoading();
}
}
}