app-wizardpanel-base.tsx 5.9 KB
Newer Older
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>
        );
    }
}