app-style2-default-layout.tsx

import { Vue, Component, Prop } from 'vue-property-decorator';
import { AppServiceBase, ModelTool, Util } from 'ibiz-core';
import { IPSDEToolbar } from '@ibiz/dynamic-model-api';

@Component({})
export class AppStyle2DefaultLayout extends Vue {
    
    /**
     * 视图实例对象
     * 
     * @protected
     * @type {*}
     * @memberof AppStyle2DefaultLayout
     */
    @Prop() protected viewInstance!: any;

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

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

    /**
     * 模型服务对象
     * 
     * @memberof AppStyle2DefaultLayout
     */
    @Prop() public modelService!:any;

    /**
     * 视图模型数据
     * 
     * @memberof AppStyle2DefaultLayout
     */
     @Prop() public model!: any;

    /**
     * 当前字体
     *
     * @memberof AppStyle2DefaultLayout
     */
    get selectFont() {
        const appStore: any = AppServiceBase.getInstance().getAppStore();
        if (appStore && appStore.state) {
            return appStore.state.selectFont;
        } else if (localStorage.getItem('font-family')) {
            return localStorage.getItem('font-family');
        } else {
            return 'Microsoft YaHei';
        }
    }

    /**
     * 绘制参数
     *
     * @readonly
     * @memberof AppStyle2DefaultLayout
     */
    public renderOptions: any = {
        viewClassNames: {}
    };

    /**
     * 是否展示视图工具栏
     * 
     * @memberof AppStyle2DefaultLayout
     */
    public viewIsshowToolbar: boolean = false;

    /**
     * @description Vue生命周期，实例创建完成
     * @memberof AppStyle2DefaultLayout
     */
    public created() {
        if(this.viewInstance){
            this.initRenderOptions();
            const viewToolBar: IPSDEToolbar = ModelTool.findPSControlByType("TOOLBAR", this.viewInstance?.getPSControls());
            if (viewToolBar && viewToolBar.getPSDEToolbarItems()) {
                this.viewIsshowToolbar = true;
            } else {
                this.viewIsshowToolbar = false;
            }
        }
    }

    /**
     * 初始化类名
     * 
     * @memberof AppStyle2DefaultLayout
     */
    public initRenderOptions(opts: any = {}) {
        this.renderOptions = {};
        const { viewType, viewStyle, codeName } = this.viewInstance;
        const viewClassNames: any = {
            'view-style2-container': true
        };
        if (viewType) {
            Object.assign(viewClassNames, { [viewType?.toLowerCase()]: true });
        }
        if (viewStyle) {
            Object.assign(viewClassNames, { [`view-style-${viewStyle.toLowerCase()}`]: true });
        } else {
            Object.assign(viewClassNames, { [`view-style-default`]: true });
        }
        if (codeName) {
            Object.assign(viewClassNames, { [Util.srfFilePath2(codeName)]: true });
        }
        if (this.viewInstance?.getPSSysCss?.()?.cssName) {
            Object.assign(viewClassNames, { [this.viewInstance.getPSSysCss()?.cssName]: true });
        }
        if (!this.showCaption) {
            Object.assign(viewClassNames, { 'nocaption': true });
        }
        if (this.$uiState.layoutState.styleMode) {
            Object.assign(viewClassNames, { 'view-style2-mode': Object.is(this.$uiState.layoutState.styleMode, 'STYLE2') });
        }
        Object.assign(viewClassNames, opts);
        this.$set(this.renderOptions, 'viewClassNames', viewClassNames);
    }

    /**
     * 是否显示标题栏
     *
     * @readonly
     * @memberof AppStyle2DefaultLayout
     */
    get showCaption(){
        if(this.viewInstance && this.$parent && Util.isExist(this.viewInstance.showCaptionBar)){
            return this.viewInstance.showCaptionBar && !(this.$parent as any).noViewCaption
        }else{
            return true;
        }
    }

    /**
     * 绘制视图标题
     *  
     * @memberof AppStyle2DefaultLayout
     */
    public renderViewCaption() {
        const { viewSysImage } = this.viewInstance;
        if(this.showCaption) {
            return (
                <div slot="title">
                    {viewSysImage?.cssClass && viewSysImage.cssClass != '' ? 
                        <span class="caption__image">
                            <i class={viewSysImage.cssClass}></i>
                        </span> : 
                        viewSysImage?.imagePath && viewSysImage.imagePath != '' ? 
                            <span class="caption__image">
                                <img src={viewSysImage.imagePath}></img>
                            </span> : null}
                    <span class="caption__info">{this.$slots.captionInfo?this.$slots.captionInfo:this.model.srfCaption}</span>
                </div>
            );
        }
    }

    /**
     * 绘制视图内容
     *
     * @protected
     * @returns {*}
     * @memberof StudioViewBase
     */
    protected renderContent(): any {
        return [
            (this.$slots.title || (this.viewIsshowToolbar && this.$slots.toolbar) || this.$slots.quickSearch) && (
                <div class='view-header'>
                    {this.renderViewHeader()}
                </div>
            ),
            <div class='view-content'>
                {this.renderViewContent()}
            </div>,
            this.$slots.footer && (
                <div class="view-footer">
                    {this.renderViewFooter()}
                </div>
            )
        ]
    }

    /**
     * @description 视图头部
     * @return {*} 
     * @memberof StudioViewBase
     */
     public renderViewHeader() {
        return [
            <div class="view-header__left">
                {this.$slots.title ? <div class="view-header__left__caption">{this.$slots.title}</div> : null}
                {this.$slots.quickGroupSearch ? <div class="view-header__left__quickgroup">{this.$slots.quickGroupSearch}</div> : null}
            </div>,
            this.$slots.quickSearch || (this.viewIsshowToolbar && this.$slots.toolbar) ?
                <div class="view-header__right">
                    <div class="view-header__right__quicksearch">
                        {this.$slots.quickSearch}
                    </div>
                    {this.viewIsshowToolbar ? <div class="view-header__right__toolbar">{this.$slots.toolbar}</div> : null}
                </div> : null
        ]
    }

    /**
     * 绘制正文内容
     * 
     * @memberof StudioViewBase
     */
    public renderViewContent(): any {
        return [
            this.$slots.topMessage || (this.$slots.searchForm && !(this.viewInstance.enableQuickSearch && !this.viewInstance.expandSearchForm)) ? <div class="view-content__top">
                {this.$slots.topMessage}
                {this.viewInstance.enableQuickSearch && !this.viewInstance.expandSearchForm ? null : this.$slots.searchForm}
            </div> : null,
            <div class="view-content__body">
                {this.$slots.bodyMessage}
                {this.$slots.default}
            </div>,
            this.$slots.bottomMessage ? <div class="view-content__bottom">
                {this.$slots.bottomMessage}
            </div> : null
        ]
    }

    /**
     * 绘制底部内容
     * 
     * @memberof StudioViewBase
     */
    public renderViewFooter(): any {
        return this.$slots.footer;
    }

    /**
     * 绘制视图
     * 
     * @memberof AppStyle2DefaultLayout
     */
    public render(h: any): any {
        const { viewClassNames } = this.renderOptions;
        return (
            <div class={viewClassNames}>
                <app-studioaction
                    viewInstance={this.viewInstance}
                    context={this.context}
                    viewparams={this.viewparams}
                    viewTitle={this.model?.srfCaption}
                    viewName={this.viewInstance.codeName.toLowerCase()} />
                {this.renderContent()}
            </div>
        );
    }
}