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
import { Prop, Watch, Emit } from 'vue-property-decorator';
import { throttle, Util } from 'ibiz-core';
import { WizardPanelControlBase } from '../../../widgets';
import { IPSDEEditForm, IPSDEWizard, IPSDEWizardEditForm, IPSDEWizardStep, IPSLanguageRes } from '@ibiz/dynamic-model-api';
export class AppWizardPanelBase extends WizardPanelControlBase {
/**
* 部件动态参数
*
* @memberof AppWizardPanelBase
*/
@Prop() public declare dynamicProps: any;
/**
* 部件静态参数
*
* @memberof AppWizardPanelBase
*/
@Prop() public declare staticProps: any;
/**
* 监听部件动态参数变化
*
* @param {*} newVal
* @param {*} oldVal
* @memberof AppWizardPanelBase
*/
@Watch('dynamicProps', {
immediate: true,
})
public onDynamicPropsChange(newVal: any, oldVal: any) {
if (newVal && !Util.isFieldsSame(newVal, oldVal)) {
super.onDynamicPropsChange(newVal, oldVal);
}
}
/**
* 监听部件静态参数变化
*
* @param {*} newVal
* @param {*} oldVal
* @memberof AppWizardPanelBase
*/
@Watch('staticProps', {
immediate: true,
})
public onStaticPropsChange(newVal: any, oldVal: any) {
if (newVal && !Util.isFieldsSame(newVal, oldVal)) {
super.onStaticPropsChange(newVal, oldVal);
}
}
/**
* 销毁视图回调
*
* @memberof AppWizardPanelBase
*/
public destroyed() {
this.ctrlDestroyed();
}
/**
* 部件事件
*
* @param {{ controlname: string; action: string; data: any }} { controlname 部件名称, action 事件名称, data 事件参数 }
* @memberof AppWizardPanelBase
*/
@Emit('ctrl-event')
public ctrlEvent({ controlname, action, data }: { controlname: string; action: string; data: any }): void { }
/**
* 绘制步骤标题栏
*
* @memberof AppWizardPanelBase
*/
public renderStepsTitle() {
const wizardSteps: Array<IPSDEWizardStep> = (this.controlInstance.getPSDEWizard() as IPSDEWizard).getPSDEWizardSteps() || [];
if (this.controlInstance.showStepBar && wizardSteps.length > 0) {
return (
<el-steps class="app-control-wizardpanel__header control-header" active={this.steps.indexOf(this.stepTags[this.activeForm]) + 1} align-center finish-status="success">
{wizardSteps.map((step: IPSDEWizardStep) => {
const title = this.$tl((step.getTitlePSLanguageRes() as IPSLanguageRes)?.lanResTag, step.title);
const stepClassName = step.getTitlePSSysCss()?.cssName;
const icon = step.getPSSysImage()?.cssClass;
return <el-step title={title} class={stepClassName} icon={icon}></el-step>
})}
</el-steps>
);
}
}
/**
* 绘制步骤表单
*
* @memberof AppWizardPanelBase
*/
public renderStepForm(form: IPSDEWizardEditForm) {
if (form?.controlType != "FORM" || this.activeForm != form.name || form.formFuncMode != "WIZARDFORM") {
return;
}
let { targetCtrlName, targetCtrlParam, targetCtrlEvent } = this.computeTargetCtrlData(form);
Object.assign(targetCtrlParam.staticProps, { viewState: this.wizardState });
return this.$createElement(targetCtrlName, { key: Util.createUUID(), props: targetCtrlParam, ref: form.name, on: targetCtrlEvent });
}
/**
* 绘制向导面板footer
*
* @memberof AppWizardPanelBase
*/
public renderStepsFooter() {
const wizard = this.controlInstance.getPSDEWizard() as IPSDEWizard;
const finishCaption = wizard.finishCaption ? wizard.finishCaption : this.$t('app.wizardpanel.complete');
const nextCaption = wizard.nextCaption ? wizard.nextCaption : this.$t('app.wizardpanel.next');
const prevCaption = wizard.prevCaption ? wizard.prevCaption : this.$t('app.wizardpanel.back');
const prev = this.$tl((wizard.getPrevCapPSLanguageRes() as IPSLanguageRes)?.lanResTag, prevCaption);
const next = this.$tl((wizard.getNextCapPSLanguageRes() as IPSLanguageRes)?.lanResTag, nextCaption);
const finish = this.$tl((wizard.getFinishCapPSLanguageRes() as IPSLanguageRes)?.lanResTag, finishCaption);
return (
<footer class="control-footer app-control-wizardpanel__footer">
{!this.isHidden('PREV') ? <i-button on-click={(...params: any[]) => throttle(this.clickPrev, params, this)} type="primary">{prev}</i-button> : null}
{!this.isHidden('NEXT') ? <i-button on-click={(...params: any[]) => throttle(this.clickNext, params, this)} type="primary">{next}</i-button> : null}
{!this.isHidden('FINISH') ? <i-button on-click={(...params: any[]) => throttle(this.clickFinish, params, this)} type="primary">{finish}</i-button> : null}
</footer>
);
}
/**
* 绘制向导面板
*
* @memberof AppWizardPanelBase
*/
public render() {
if (!this.controlIsLoaded || !this.activeForm) {
return null;
}
const editForms: Array<IPSDEEditForm> = this.controlInstance.getPSDEEditForms() || [];
const controlClassNames = this.renderOptions.controlClassNames;
return (
<layout class={controlClassNames}>
{(this.controlInstance.wizardStyle && (this.controlInstance.wizardStyle == 'STYLE2')) ? null : this.renderStepsTitle()}
<i-content class="control-content app-control-wizardpanel__content">
{editForms.length > 0 ?
editForms.map((editForm: IPSDEEditForm) => {
return this.renderStepForm(editForm as IPSDEWizardEditForm);
}) : null}
</i-content>
{this.renderStepsFooter()}
</layout>
);
}
}