app-wizardpanel-base.tsx

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>
        );
    }
}