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
import { defineComponent, PropType } from 'vue';
import { IPSUIActionGroup, IPSUIActionGroupDetail } from '@ibiz-template/model';
import { useNamespace } from '@ibiz-template/vue-util';
import { IButtonContainerState } from '@ibiz-template/controller';
import '@ibiz-template/theme/style/components/common/action-toolbar/action-toolbar.scss';
export const ActionToolbar = defineComponent({
name: 'ActionToolbar',
props: {
actionGroup: {
type: Object as PropType<IPSUIActionGroup>,
required: true,
},
actionsState: {
type: Object as PropType<IButtonContainerState>,
required: true,
},
},
setup(props, { emit }) {
const ns = useNamespace('action-toolbar');
// 点击事件抛给表格执行
const handleClick = async (
detail: IPSUIActionGroupDetail,
event: MouseEvent,
) => {
emit('action-click', detail, event);
};
return { ns, handleClick };
},
render() {
const details = this.actionGroup.getPSUIActionGroupDetails() || [];
return (
<div class={`${this.ns.b()}`}>
{details.length > 0 &&
details.map(detail => {
const action = detail.getPSUIAction();
const btnClass = [this.ns.e('item'), this.ns.is('disabled', false)];
// 接口没有，临时先用IData过校验
const cssName = (detail as IData)?.getPSSysCss()?.cssName;
if (cssName) {
btnClass.push(cssName);
}
if (action && this.actionsState[detail.name].visible) {
return [
detail.addSeparator && (
<div class={this.ns.e('separator')}></div>
),
<i-button
type='text'
size='small'
on-click={(e: MouseEvent) => this.handleClick(detail, e)}
disabled={this.actionsState[detail.name].disabled}
class={btnClass}
>
{detail.showIcon && action.getPSSysImage() && (
<app-icon icon={action.getPSSysImage()}></app-icon>
)}
{detail.showCaption ? action!.caption : ''}
</i-button>,
];
}
return null;
})}
</div>
);
},
});