guide-wizardpanel-base.vue

<template>
    <layout class="app-wizard">
    <el-steps class="wizard-steps" v-if="isShowStepBar"  :active="wizardForms.indexOf(activeForm)" finish-status="success" align-center>
      <el-step title="查看图书"></el-step>
      <el-step title="借阅图书"></el-step>
      <el-step title="归还图书"></el-step>
    </el-steps>
        <i-content class="app-wizard-content">
            <view_wizardpanel_form_FirstForm 
              v-show="activeForm == 'wizardpanel_form_FirstForm'" 
              :key="'wizardpanel_form_FirstForm'" 
              :viewState='wizardState'
              :context="context"
              :viewtag="viewtag"
              :viewparams="viewparams"
              updateAction="Update"
              removeAction=""
              loadAction="Get"
              @save="wizardpanel_form_FirstForm_save" 
              @load="wizardpanel_form_FirstForm_load" 
              name='wizardpanel_form_FirstForm' 
              ref='wizardpanel_form_FirstForm'>
            </view_wizardpanel_form_FirstForm>
            <view_wizardpanel_form_SecondForm 
              v-show="activeForm == 'wizardpanel_form_SecondForm'" 
              :key="'wizardpanel_form_SecondForm'" 
              :viewState='wizardState'
              :context="context"
              :viewtag="viewtag"
              :viewparams="viewparams"
              updateAction="Update"
              removeAction=""
              loadAction="Get"
              @save="wizardpanel_form_SecondForm_save" 
              @load="wizardpanel_form_SecondForm_load" 
              name='wizardpanel_form_SecondForm' 
              ref='wizardpanel_form_SecondForm'>
            </view_wizardpanel_form_SecondForm>
            <view_wizardpanel_form_ThirdForm 
              v-show="activeForm == 'wizardpanel_form_ThirdForm'" 
              :key="'wizardpanel_form_ThirdForm'" 
              :viewState='wizardState'
              :context="context"
              :viewtag="viewtag"
              :viewparams="viewparams"
              updateAction="Update"
              removeAction=""
              loadAction="Get"
              @save="wizardpanel_form_ThirdForm_save" 
              @load="wizardpanel_form_ThirdForm_load" 
              name='wizardpanel_form_ThirdForm' 
              ref='wizardpanel_form_ThirdForm'>
            </view_wizardpanel_form_ThirdForm>
        </i-content>
        <footer class="app-wizard-footer">
            <i-button v-show="!isHidden('PREV')" @click="onClickPrev()" type="primary">{{$t('app.wizardPanel.back')}}</i-button>
            <i-button v-show="!isHidden('NEXT')" @click="onClickNext()" type="primary">{{$t('app.wizardPanel.next')}}</i-button>
            <i-button v-show="!isHidden('FINISH')" @click="onClickFinish()" type="primary">{{$t('app.wizardPanel.complete')}}</i-button>
        </footer>
    </layout>
</template>
<script lang='tsx'>
import { Vue, Component, Prop, Provide, Emit, Watch, Model,Inject } from 'vue-property-decorator';
import { CreateElement } from 'vue';
import { Subject, Subscription } from 'rxjs';
import { ControlInterface } from '@/interface/control';
import { UIActionTool,Util,ViewTool } from '@/utils';
import NavDataService from '@/service/app/navdata-service';
import AppCenterService from "@service/app/app-center-service";
import IBIZBOOKEntityService from '@/service/ibizbook/ibizbook-service';
import GuideService from './guide-wizardpanel-service';
import IBIZBOOKUIService from '@/uiservice/ibizbook/ibizbook-ui-service';


@Component({
    components: {
      
    }
})
export default class GuideBase extends Vue implements ControlInterface {

    /**
     * 名称
     *
     * @type {string}
     * @memberof GuideBase
     */
    @Prop() public name?: string;

    /**
     * 视图通讯对象
     *
     * @type {Subject<ViewState>}
     * @memberof GuideBase
     */
    @Prop() public viewState!: Subject<ViewState>;

    /**
     * 应用上下文
     *
     * @type {*}
     * @memberof GuideBase
     */
    @Prop() public context!: any;

    /**
     * 视图参数
     *
     * @type {*}
     * @memberof GuideBase
     */
    @Prop() public viewparams!: any;

    /**
     * 视图状态事件
     *
     * @public
     * @type {(Subscription | undefined)}
     * @memberof GuideBase
     */
    public viewStateEvent: Subscription | undefined;

    /**
     * 获取部件类型
     *
     * @returns {string}
     * @memberof GuideBase
     */
    public getControlType(): string {
        return 'WIZARDPANEL'
    }



    /**
     * 计数器服务对象集合
     *
     * @type {Array<*>}
     * @memberof GuideBase
     */    
    public counterServiceArray:Array<any> = [];

    /**
     * 建构部件服务对象
     *
     * @type {GuideService}
     * @memberof GuideBase
     */
    public service: GuideService = new GuideService({ $store: this.$store });

    /**
     * 实体服务对象
     *
     * @type {IBIZBOOKService}
     * @memberof GuideBase
     */
    public appEntityService: IBIZBOOKEntityService = new IBIZBOOKEntityService({ $store: this.$store });

    /**
     * wizardpanel_form_FirstForm 部件 save 事件
     *
     * @param {*} [args={}]
     * @param {*} $event
     * @memberof GuideBase
     */
    public wizardpanel_form_FirstForm_save($event: any, $event2?: any) {
        this.wizardpanel_formsave($event, 'wizardpanel_form_FirstForm', $event2);
    }

    /**
     * wizardpanel_form_FirstForm 部件 load 事件
     *
     * @param {*} [args={}]
     * @param {*} $event
     * @memberof GuideBase
     */
    public wizardpanel_form_FirstForm_load($event: any, $event2?: any) {
        this.wizardpanel_formload($event, 'wizardpanel_form_FirstForm', $event2);
    }

    /**
     * wizardpanel_form_SecondForm 部件 save 事件
     *
     * @param {*} [args={}]
     * @param {*} $event
     * @memberof GuideBase
     */
    public wizardpanel_form_SecondForm_save($event: any, $event2?: any) {
        this.wizardpanel_formsave($event, 'wizardpanel_form_SecondForm', $event2);
    }

    /**
     * wizardpanel_form_SecondForm 部件 load 事件
     *
     * @param {*} [args={}]
     * @param {*} $event
     * @memberof GuideBase
     */
    public wizardpanel_form_SecondForm_load($event: any, $event2?: any) {
        this.wizardpanel_formload($event, 'wizardpanel_form_SecondForm', $event2);
    }

    /**
     * wizardpanel_form_ThirdForm 部件 save 事件
     *
     * @param {*} [args={}]
     * @param {*} $event
     * @memberof GuideBase
     */
    public wizardpanel_form_ThirdForm_save($event: any, $event2?: any) {
        this.wizardpanel_formsave($event, 'wizardpanel_form_ThirdForm', $event2);
    }

    /**
     * wizardpanel_form_ThirdForm 部件 load 事件
     *
     * @param {*} [args={}]
     * @param {*} $event
     * @memberof GuideBase
     */
    public wizardpanel_form_ThirdForm_load($event: any, $event2?: any) {
        this.wizardpanel_formload($event, 'wizardpanel_form_ThirdForm', $event2);
    }
    


    /**
     * 转化数据
     *
     * @param {any} args
     * @memberof  GuideBase
     */
    public transformData(args: any) {
        let _this: any = this;
        if(_this.service && _this.service.handleRequestData instanceof Function && _this.service.handleRequestData('transform',_this.context,args)){
            return _this.service.handleRequestData('transform',_this.context,args)['data'];
        }
    }

    /**
     * 关闭视图
     *
     * @param {any} args
     * @memberof GuideBase
     */
    public closeView(args: any): void {
        let _this: any = this;
        _this.$emit('closeview', [args]);
    }

    /**
     *  计数器刷新
     *
     * @memberof GuideBase
     */
    public counterRefresh(){
        const _this:any =this;
        if(_this.counterServiceArray && _this.counterServiceArray.length >0){
            _this.counterServiceArray.forEach((item:any) =>{
                if(item.refreshData && item.refreshData instanceof Function){
                    item.refreshData();
                }
            })
        }
    }



    /**
     * 部件行为--init
     *
     * @type {string}
     * @memberof GuideBase
     */
    @Prop() public initAction!: string;
    
    /**
     * 部件行为--finish
     *
     * @type {string}
     * @memberof GuideBase
     */
    @Prop() public finishAction!: string;

    /**
     * 显示处理提示
     *
     * @type {boolean}
     * @memberof GuideBase
     */
    @Prop({ default: true }) public showBusyIndicator?: boolean;

    /**
     * 视图标识
     *
     * @type {string}
     * @memberof GuideBase
     */
    @Prop() public viewtag!: string;

    /**
     * 状态属性
     *
     * @type {string}
     * @memberof GuideBase
     */
    public stateField: string = '';

    /**
     * 步骤标识集合
     *
     * @type {*}
     * @memberof GuideBase
     */
    public stepTags: any = {};

    /**
     * 显示步骤栏
     *
     * @type {Boolean}
     * @memberof GuideBase
     */
    public isShowStepBar: Boolean =  true ;

    /**
      * 获取多项数据
      *
      * @returns {any[]}
      * @memberof GuideBase
      */
    public getDatas(): any[] {
        return [this.formParam];
    }

    /**
      * 获取单项数据
      *
      * @returns {*}
      * @memberof GuideBase
      */
    public getData(): any {
        return this.formParam;
    }

    /**
     * 视图状态订阅对象
     *
     * @public
     * @type {Subject<{action: string, data: any}>}
     * @memberof GuideBase
     */
    public wizardState: Subject<ViewState> = new Subject();

    /**
     * 当前激活表单
     *
     * @type {string}
     * @memberof GuideBase
     */
    public activeForm: string = 'wizardpanel_form_FirstForm';

    /**
     * 向导表单参数
     *
     * @type {*}
     * @memberof GuideBase
     */
    public formParam: any = {};

    /**
     * 执行过的表单
     *
     * @public
     * @type {Array<string>}
     * @memberof GuideBase
     */
    public historyForms: Array<string> = [];

    /**
     * 步骤行为集合
     *
     * @type {*}
     * @memberof GuideBase
     */
    public stepActions: any = {};

    /**
     * 向导表单集合
     *
     * @type {Array<any>}
     * @memberof GuideBase
     */
    public wizardForms: Array<any> = [];

    /**
     * 当前状态
     *
     * @memberof GuideBase
     */
    public curState = '';

    /**
     * Vue声明周期(处理组件的输入属性)
     *
     * @memberof GuideBase
     */
    public created(): void {
        this.regFormActions();
        if(this.activeForm && !this.stateField) {
            this.historyForms.push(this.activeForm);
        }
        if (this.viewState) {
            this.viewStateEvent = this.viewState.subscribe(({ tag, action, data }) => {
                if (Object.is(tag, this.name)) {
                    if (Object.is('load', action)) {
                        this.doInit(data);
                    }
                }
            });
        }
    }

    /**
     * vue 生命周期
     *
     * @memberof GuideBase
     */
    public destroyed() {
        if (this.viewStateEvent) {
            this.viewStateEvent.unsubscribe();
        }
    }

    /**
     * 注册表单步骤行为
     *
     * @memberof GuideBase
     */
    public regFormActions() {
        this.regFormAction('wizardpanel_form_FirstForm',{loadAction:"Get",saveAction:'Update',actions:['NEXT']},'viewbook');
        this.regFormAction('wizardpanel_form_SecondForm',{loadAction:"Get",saveAction:'Update',actions:['PREV','NEXT']},'borrow');
        this.regFormAction('wizardpanel_form_ThirdForm',{loadAction:"Get",saveAction:'Update',actions:['PREV','FINISH']},'return');
    }

    /**
     * 注册表单步骤行为
     *
     * @memberof GuideBase
     */
    public regFormAction(name: string, actionParams: any,stepTag:any) {
        this.stepActions[name] = actionParams;
        this.stepTags[name] = stepTag;
        this.wizardForms.push(name);
    }

    /**
     * 初始化行为
     *
     * @memberof GuideBase
     */
    public doInit(opt: any = {}) {
        const arg: any = { ...opt };
        Object.assign(arg,{viewparams:this.viewparams});
        const post: Promise<any> = this.service.init(this.initAction, JSON.parse(JSON.stringify(this.context)), arg, this.showBusyIndicator);
        post.then((response: any) => {
            if (response && response.status === 200) {
                this.formParam = response.data;
                if(response.data.ibizbook){
                    Object.assign(this.context,{ibizbook:response.data.ibizbook})
                }
                this.formLoad(this.formParam);
            }
        }).catch((response: any) => {
            if (response && response.status === 401) {
                return;
            }
            this.$Notice.error({ title: (this.$t('app.commonWords.wrong') as string), desc: response.info });
        });
    }

    /**
     * 表单加载
     *
     * @memberof GuideBase
     */
    public formLoad(data:any) {
        if(this.stateField) this.computedActiveForm(data);
        if(this.activeForm) {
            this.wizardState.next({ tag: this.activeForm, action:'panelaction',data: {action:this.stepActions[this.activeForm].loadAction,emitAction:'load',data:this.formParam} });
        }
    }

    /**
     * 根据状态获取当前激活表单
     *
     * @memberof GuideBase
     */
    public computedActiveForm(data:any){
        if(data && data[this.stateField]){
            if(Object.keys(this.stepTags).length >0){
                Object.keys(this.stepTags).forEach((name:string) =>{
                    if(this.stepTags[name] === data[this.stateField]){
                        this.activeForm = name;
                        return;
                    }
                })
            }
        }
    }

    /**
     * 完成行为
     *
     * @memberof GuideBase
     */
    public doFinish() {
        let arg: any = {};
        Object.assign(arg, this.formParam);
        Object.assign(arg,{viewparams:this.viewparams});
        const post: Promise<any> = this.service.finish(this.finishAction, JSON.parse(JSON.stringify(this.context)), arg, this.showBusyIndicator);
        post.then((response: any) => {
            if (response && response.status === 200) {
                const data = response.data;
                this.$Notice.success({ title: this.$t('app.commonWords.success') as string, desc: this.$t('app.commonWords.startsuccess') as string });
                this.$emit("finish", data);
                AppCenterService.notifyMessage({name:"IBIZBOOK",action:'appRefresh',data:data});
            }
        }).catch((response: any) => {
            if (response && response.status === 401) {
                return;
            }
            this.$Notice.error({ title: (this.$t('app.commonWords.wrong') as string), desc: response.info });
        });
    }

    /**
     * 向导表单加载完成
     *
     * @param {*} args
     * @param {string} name
     * @memberof GuideBase
     */
    public wizardpanel_formload(args: any, name: string, $event2?: any) {
        if(args) {
            Object.assign(this.formParam, args);
            if (Object.is(this.curState, 'NEXT') || Object.is(this.curState, 'PREV')) {
                this.$store.commit('viewaction/setViewDataChange', { viewtag: this.viewtag, viewdatachange: true });
            }
        }
    }

    /**
     * 向导表单保存完成
     *
     * @param {*} args
     * @param {string} name
     * @memberof GuideBase
     */
    public wizardpanel_formsave(args: any, name: string, $event2?: any) {
        Object.assign(this.formParam, args);
        if(Object.is(this.curState, 'NEXT')) {
            this.historyForms.push(name);
            if(!this.stateField){
                if (this.getNextForm()) {
                    this.activeForm = this.getNextForm();
                    setTimeout(() => {
                        this.formLoad(this.formParam);
                    }, 1);
                } else {
                    this.doFinish();
                }
            }else{
                setTimeout(() => {
                    this.formLoad(this.formParam);
                }, 1);
            }
        }else if(Object.is(this.curState, 'PREV')) {
            if(this.stateField){
                setTimeout(() => {
                    this.formLoad(this.formParam);
                }, 1);
            }
        }else if(Object.is(this.curState, 'FINISH')) {
            this.doFinish();
        }
    }

    /**
     * 获取下一步向导表单
     *
     * @memberof GuideBase
     */
    public getNextForm() {
        let index = this.wizardForms.indexOf(this.activeForm);
        if(index >= 0) {
            if(this.wizardForms[index + 1]) {
                return this.wizardForms[index + 1];
            }
        }
        return undefined;
    }


    /**
     * 上一步
     *
     * @memberof GuideBase
     */
    public onClickPrev() {
        if(!this.stateField){
            const length = this.historyForms.length;
            if(length > 1) {
                this.curState = 'PREV';
                this.activeForm = this.historyForms[length - 1];
                setTimeout(() => {
                    this.formLoad(this.formParam);
                }, 1);
                this.historyForms.splice(length - 1, 1);
            }
        }else{
            if(this.activeForm) {
                if(this.$refs && this.$refs[this.activeForm]){
                    let form: any = this.$refs[this.activeForm];
                    this.curState = 'PREV';
                    if(!this.stepActions[this.activeForm].preAction){
                        this.$Notice.error({ title: (this.$t('app.commonWords.wrong') as string), desc:this.$t('app.wizardPanel.preactionmessage') as string  });
                        return;
                    }
                    this.wizardState.next({ tag: this.activeForm, action:'panelaction',data: {action:this.stepActions[this.activeForm].preAction,emitAction:'save',data:this.formParam} });
                }
            }
        }
    }

    /**
     * 下一步
     *
     * @memberof GuideBase
     */
    public onClickNext() {
        if(this.activeForm) {
            if(this.$refs && this.$refs[this.activeForm]){
                let form: any = this.$refs[this.activeForm];
                if(form.formValidateStatus()) {
                    this.curState = 'NEXT';
                    this.wizardState.next({ tag: this.activeForm, action:'panelaction',data: {action:this.stepActions[this.activeForm].saveAction,emitAction:'save',data:this.formParam} });
                } else {
                    this.$Notice.error({ title: (this.$t('app.commonWords.wrong') as string), desc: (this.$t('app.commonWords.rulesException') as string) });
                }
            }
        }
    }

    /**
     * 完成
     *
     * @memberof GuideBase
     */
    public onClickFinish() {
        if(this.activeForm) {
            if(this.$refs && this.$refs[this.activeForm]){
                let form: any = this.$refs[this.activeForm];
                if(form.formValidateStatus()) {
                    this.curState = 'FINISH';
                    this.wizardState.next({ tag: this.activeForm, action:'panelaction',data: {action:this.stepActions[this.activeForm].saveAction,emitAction:'save',data:this.formParam} });
                } else {
                    this.$Notice.error({ title: (this.$t('app.commonWords.wrong') as string), desc: (this.$t('app.commonWords.rulesException') as string) });
                }
            }
        }
    }

    /**
     * 是否隐藏
     *
     * @param {string} type
     * @memberof GuideBase
     */
    public isHidden(type: string) {
        const actions: Array<string> = this.stepActions[this.activeForm].actions;
        if(actions && actions.indexOf(type) < 0) {
            return true;
        }
        return false;
    }
    

}
</script>

<style lang='less'>
@import './guide-wizardpanel.less';
</style>