app-mob-contextmenu-base.tsx 4.3 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
import { Prop, Watch, Emit, Component } from 'vue-property-decorator';
import { Util } from 'ibiz-core';
import { MobContextMenuControlBase } from '../../../widgets';
import { IPSDEToolbarItem } from '@ibiz/dynamic-model-api';


/**
 * 上下文菜单部件基类
 *
 * @export
 * @class AppMobContextMenuBase
 * @extends {MobContextMenuBase}
 */
@Component({})
export class AppMobContextMenuBase extends MobContextMenuControlBase {

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

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

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

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

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

    /**
     * 绘制图标
     * 
     * @param item 
     * @memberof AppContextMenuBase
     */
    public renderItemIcon(item: IPSDEToolbarItem) {
        const sysImg = item.getPSSysImage();
        if (item?.showIcon && sysImg) {
            { sysImg ? <app-ps-sys-image imageModel={sysImg} ></app-ps-sys-image> : null }
        }
    }

    /**
     * 绘制界面行为项
     * 
     * @param {*} item 
     * @memberof AppContextMenuBase
     */
    public renderUIAction(item: IPSDEToolbarItem) {
        if (!item) {
            return
        }
        let visible = this.contextMenuActionModel[item.name] ? this.contextMenuActionModel[item.name]?.visabled : true;
        let disabled = this.contextMenuActionModel[item.name] ? this.contextMenuActionModel[item.name]?.disabled : false;
        return (
            <div class={{ 'context-menu__item': true, 'context-menu__item--disabled': disabled }} name={item.name} v-show={visible} on-click={() => this.itemClick({ tag: item.name })}>
                {this.renderItemIcon(item)}
                {item.showCaption ? this.$tl(item.getCapPSLanguageRes()?.lanResTag, item.caption) : ''}
            </div>
        )
    }

    /**
     * 判断类型
     * 
     * @param {*} item
     * @memberof AppContextMenuBase
     */
    public renderToolbarItems(item: IPSDEToolbarItem) {
        if (!item) {
            return
        }
        if (item.itemType === "DEUIACTION") {
            return this.renderUIAction(item)
        } else if (item.itemType === "SEPERATOR") {
            // todo 分割线
            return
        } else if (item.itemType === "ITEMS") {
            // todo 分组
            return
        } else if (item.itemType === "RAWITEM") {
            // return <span>{item.rawContent}</span>
        }
    }

    /**
     * 绘制上下文菜单
     *
     * @returns {*}
     * @memberof AppMobContextMenuBase
     */
    public render() {
        if (!this.controlIsLoaded) {
            return;
        }
        const { controlClassNames } = this.renderOptions;
        const getPSDEToolbarItems = this.controlInstance.getPSDEToolbarItems() || [];
        if (getPSDEToolbarItems?.length > 0) {
            return <div class={controlClassNames}>
                {getPSDEToolbarItems?.map((item: IPSDEToolbarItem) => {
                    return this.renderToolbarItems(item)
                })}
            </div>
        }
    }
}