app-drtab-base.tsx 5.0 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 154 155 156 157 158 159 160 161 162 163
import { IPSLanguageRes } from '@ibiz/dynamic-model-api';
import { throttle, Util } from 'ibiz-core';
import { CreateElement } from 'vue';
import { Emit, Prop, Watch } from 'vue-property-decorator';
import { DrtabControlBase } from '../../../widgets/drtab-control-base';

/**
 * 数据关系分页部件基类
 *
 * @export
 * @class AppDrtabBase
 * @extends {TabExpPanelBase}
 */
export class AppDrtabBase extends DrtabControlBase {

    /**
     * 部件静态参数
     *
     * @memberof AppDrtabBase
     */
    @Prop() public declare staticProps: any;

    /**
     * 部件动态参数
     *
     * @memberof AppDrtabBase
     */
    @Prop() public declare dynamicProps: any;

    /**
     * 监听动态参数变化
     *
     * @param {*} newVal
     * @param {*} oldVal
     * @memberof AppDrtabBase
     */
    @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 AppDrtabBase
     */
    @Watch('staticProps', {
        immediate: true,
    })
    public onStaticPropsChange(newVal: any, oldVal: any) {
        if (newVal && !Util.isFieldsSame(newVal, oldVal)) {
            super.onStaticPropsChange(newVal, oldVal);
        }
    }

    /**
     * 销毁视图回调
     *
     * @memberof AppDrtabBase
     */
    public destroyed() {
        this.ctrlDestroyed();
    }

    /**
     * 部件事件
     *
     * @param {{ controlname: string; action: string; data: any }} { controlname 部件名称, action 事件名称, data 事件参数 }
     * @memberof AppDrtabBase
     */
    @Emit('ctrl-event')
    public ctrlEvent({ controlname, action, data }: { controlname: string; action: string; data: any }): void { }

    /**
     * @description 绘制icon图标
     * @param {*} item
     * @return {*} 
     * @memberof AppDrtabBase
     */
     public renderIcon(item: any) {
        const itemPSSysImage = (item as any).getPSSysImage?.()
        return (
            itemPSSysImage?.imagePath ? <img src={itemPSSysImage.imagePath} class="item__icon"></img> :
            itemPSSysImage?.cssClass ? <i class={[itemPSSysImage.cssClass, {'item__icon': true}]}></i> : null
        )
    }

    /**
     * 绘制关系界面
     *
     * @param {*} tabPage
     * @return {*} 
     * @memberof AppDrtabBase
     */
    public renderPanelLabel(tabPage: any) {
        let counter: any = undefined;
        if (tabPage.counterId && this.counterData?.[tabPage.counterId.toLowerCase()]) {
            counter = {
                id: tabPage.counterId,
                count: this.counterData[tabPage.counterId.toLowerCase()],
                showZero: 1,
                offset: [2, 10]
            }
        }
        if (Object.is((this.controlInstance.getParentPSModelObject?.() as any)?.viewType, 'DEEDITVIEW4')) {
            return (
                <span slot="reference" v-badge={counter} >
                    {this.renderIcon(tabPage)}
                    {this.$tl((tabPage.getCapPSLanguageRes() as IPSLanguageRes)?.lanResTag, tabPage.caption)}
                </span>
            )
        }
        return (<el-popover
            content={this.$t("components.appformdruipart.blockuitipinfo")}
            width="150"
            popper-class="app-control-drtab__popover"
            disabled={!tabPage.disabled}
            trigger="hover">
            <span slot="reference" v-badge={counter}>
                {this.renderIcon(tabPage)}
                {this.$tl((tabPage.getCapPSLanguageRes() as IPSLanguageRes)?.lanResTag, tabPage.caption)}
            </span>
        </el-popover>);
    }

    /**
     * 绘制关系分页部件
     *
     * @returns {*}
     * @memberof AppDrtabBase
     */
    public render(h: CreateElement) {
        if (!this.controlIsLoaded) {
            return null;
        }
        const { controlClassNames } = this.renderOptions;
        return (
            <div class={controlClassNames}>
                <div class={{"control-content app-control-drtab__content": true, "no-padding": this.noPadding}}>
                    {this.drtabItems.length > 0 ? this.drtabItems.map((tab: any, index: number) => {
                        return (
                            <div
                                class={[
                                    "app-control-drtab__item",
                                    this.selectItem && this.selectItem.name == tab.name ? 'is-active' : '',
                                    tab.disabled ? 'is-disable' : ''
                                ]}
                                on-click={(event: MouseEvent) => throttle(this.drTabChange, [tab, event], this)}>
                                {this.renderPanelLabel(tab)}
                            </div>
                        )
                    }) : null}
                </div>
            </div>
        )
    }
}