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
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
import { computed, defineComponent, onMounted, PropType, ref } from 'vue';
import {
IPSDETBGroupItem,
IPSDETBUIActionItem,
IPSDEToolbarItem,
ToolbarModel,
} from '@ibiz-template/model';
import {
IButtonContainerState,
ToolbarNeuron,
} from '@ibiz-template/controller';
import { useNamespace } from '@ibiz-template/vue-util';
import '@ibiz-template/theme/style/components/common/view-toolbar/view-toolbar.scss';
const btnContent = (item: IPSDEToolbarItem, viewMode: string) => {
const image = item.getPSSysImage();
const showIcon = item.showIcon;
const showCaption = item.showCaption;
const caption = showCaption ? item.caption : '';
if (viewMode === 'EMBED') {
if (image) {
return [showIcon ? <app-icon icon={image} /> : null, caption];
}
return [null, caption];
}
return [showIcon ? <app-icon icon={image} /> : null, caption];
};
export const ViewToolbar = defineComponent({
name: 'ViewToolbar',
props: {
modelData: {
type: ToolbarModel,
required: true,
},
toolbarState: {
type: Object as PropType<IButtonContainerState>,
required: true,
},
viewMode: {
type: String,
required: true,
},
},
setup(props, { emit }) {
const ns = useNamespace('view-toolbar');
const neuron = new ToolbarNeuron({});
emit('neuronInit', neuron);
// 正在执行的工具栏项
const doingToolbarItem = ref<string>('');
onMounted(async () => {
await neuron.evt.asyncEmit('mounted');
});
const btnSize = computed(() => {
return props.viewMode === 'EMBED' ? 'small' : 'default';
});
// 点击事件
const _handleClick = async (item: IPSDEToolbarItem, _event: MouseEvent) => {
props.toolbarState.setLoading(item.id);
try {
await neuron.evt.asyncEmit(
'itemClick',
item as IPSDETBUIActionItem,
_event,
);
} finally {
props.toolbarState.setLoading('');
}
};
// 按钮点击加延时。解决子界面行编辑没有失焦的情况下先触发了按钮的行为。
const handleClick = async (item: IPSDEToolbarItem, event: MouseEvent) => {
setTimeout(() => {
_handleClick(item, event);
}, 30);
};
return { ns, doingToolbarItem, handleClick, btnSize };
},
render() {
return (
<div class={[this.ns.b(), this.ns.m(this.viewMode.toLowerCase())]}>
{this.modelData!.source.getPSDEToolbarItems()?.map(item => {
if (item.itemType === 'SEPERATOR') {
return (
<div
key={item.id}
class={[this.ns.e('item'), this.ns.e('item-separator')]}
>
|
</div>
);
}
if (item.itemType === 'RAWITEM') {
return (
<div
key={item.id}
class={[this.ns.e('item'), this.ns.e('item-rawitem')]}
>
{btnContent(item, this.viewMode)}
</div>
);
}
if (
item.itemType === 'DEUIACTION' &&
this.toolbarState[item.id].visible
) {
// 特殊处理，工具栏关闭按钮在非顶级容器分页模式打开时(即页面本身有X按钮)的场景，自动去掉工具栏中的关闭按钮
const notShowCloseBtnViewMode = ['MODAL', 'DRAWER', 'POPOVER'];
if (notShowCloseBtnViewMode.includes(this.viewMode)) {
const uiAction = (item as IPSDETBUIActionItem).getPSUIAction();
if (uiAction?.codeName === 'Exit') {
return;
}
}
return (
<div
key={item.id}
class={[
this.ns.e('item'),
this.ns.e('item-deuiaction'),
this.ns.is('loading', this.toolbarState[item.id].loading),
this.ns.is('caption', !!(item.showCaption && item.caption)),
]}
>
<i-button
title={item.tooltip}
size={this.btnSize}
loading={this.toolbarState[item.id].loading}
disabled={this.toolbarState[item.id].disabled}
on-click={(e: MouseEvent) => this.handleClick(item, e)}
>
{btnContent(item, this.viewMode)}
</i-button>
</div>
);
}
if (item.itemType === 'ITEMS') {
return (
<div
key={item.id}
class={[this.ns.e('item'), this.ns.e('item-items')]}
>
<i-dropdown trigger='click' placement='bottom-start'>
<i-button title={item.tooltip} size={this.btnSize}>
{btnContent(item, this.viewMode)}
</i-button>
<i-dropdown-menu slot='list'>
{(item as IPSDETBGroupItem)
.getPSDEToolbarItems()!
.map(item2 => {
return (
<i-dropdown-item
key={item2.id}
nativeOn-click={(e: MouseEvent) =>
this.handleClick(item2, e)
}
>
{btnContent(item2, this.viewMode)}
</i-dropdown-item>
);
})}
</i-dropdown-menu>
</i-dropdown>
</div>
);
}
return null;
})}
</div>
);
},
});