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
104
105
106
107
108
109
110
111
112
113
114
115
116
117
import { DashboardController } from '@ibiz-template/controller';
import {
DashboardModel,
ContainerPortletModel,
PortletPartModel,
} from '@ibiz-template/model';
import { useDashboardController, useNamespace } from '@ibiz-template/vue-util';
import {
defineComponent,
getCurrentInstance,
h,
PropType,
reactive,
VNode,
} from 'vue';
import './dashboard-control.scss';
/**
* 根据类型绘制数据看板成员
*
* @author lxm
* @date 2022-10-14 17:10:42
* @param {PortletPartModel} model 模型
* @param {IData} opts 额外参数
*/
function renderPortletByType(
model: PortletPartModel,
c: DashboardController,
opts?: IData,
): VNode {
const provider = c.providers[model.name];
const controller = c.portlets[model.name];
const commonProps = {
modelData: model,
controller,
};
// 绘制容器
if (model.source.portletType === 'CONTAINER') {
const container = model as ContainerPortletModel;
return h(
provider.component,
{
props: {
...commonProps,
},
key: model.id,
},
container.children.map(child => renderPortletByType(child, c, opts)),
);
}
// 绘制门户部件
return h(provider.component, {
props: {
...commonProps,
},
key: model.id,
});
}
export const DashboardControl = defineComponent({
name: 'DashboardControl',
props: {
modelData: {
type: DashboardModel,
required: true,
},
context: { type: Object as PropType<IContext>, required: true },
params: { type: Object as PropType<IParams>, default: () => ({}) },
},
setup(props) {
const { proxy } = getCurrentInstance()!;
const c = useDashboardController(
proxy,
props.modelData,
props.context,
props.params,
);
c.nerve.self.evt.on('created', () => {
Object.values(c.portlets).forEach(portlet => {
Object.assign(portlet, {
state: reactive(portlet.state),
});
});
});
const ns = useNamespace('dashboard');
return { c, ns };
},
render() {
return (
<control-layout class={[this.ns.b()]} modelData={this.c.model}>
{this.c.complete && (
<app-row
class={this.ns.e('content')}
layout={this.modelData.source.getPSLayout()}
>
{this.modelData.children.map(child => {
return (
<app-col
layoutPos={child.source.getPSLayoutPos()}
controller={this.c.portlets[child.name].layoutController}
>
{renderPortletByType(child, this.c)}
</app-col>
);
})}
</app-row>
)}
</control-layout>
);
},
});