页面内容细粒度的控制

2020-10-10  本文已影响0人  东东_6292

可以控制字段与按钮是否显示,以及是否为禁用状态

import { Pipe, PipeTransform } from '@angular/core';

import * as _ from 'lodash';

import { Action, Field } from '@libs/notadd/types/notadd-permission';

export enum Type {
    action = 'action',
    field = 'field'
}

export enum AttrType {
    display = 'display',
    disable = 'disable'
}

@Pipe({
    name: 'notaddPermission'
})
export class NotaddPermissionPipe implements PipeTransform {

    routeId: string;
    widgets: any[];

    constructor() {
    }

    transform(value: string, type: string = Type.action, attrType: string = AttrType.display, count?: number): any {

        const routeData = JSON.parse(window.localStorage.getItem('ROUTE_DATA'));
        this.routeId = routeData.id;
        this.widgets = routeData.pageSetting.widgets;

        if (!value.includes('.')) {
            const widgetWithPrefix = `${this.routeId}-${value}`;
            return this.widgets ?.find(widget => widget.id === widgetWithPrefix)
                .fields.slice(0, count)
                .filter(field => field.display !== 'hidden')
                .map(({ id, title }) => {
                    return {
                        field: _.last(id.split('-')),
                        title
                    };
                });
        }

        if (!Type[type] || !AttrType[attrType]) {
            throw new Error(`${this.routeId}页输入的类型不对,请参考PermissionPipe中的枚举类型`);
        }

        let res: boolean;

        const params = value.split('.') as [string, string];

        if (type === Type.action) {
            res = this.actionDisplay(...params);
        }

        if (type === Type.field) {

            if (attrType === AttrType.display) {
                res = !this.fieldHidden(...params);

            } else if (attrType === AttrType.disable) {
                res = this.fieldReadonly(...params);
            }
        }

        return res;
    }

    private getAction(widgetId: string, id: string): Action {

        const widgetWithPrefix = `${this.routeId}-${widgetId}`;

        return this.widgets ?.find(widget => widget.id === widgetWithPrefix)
            .actions ?.find(action => action.id === `${widgetWithPrefix}-actions-${id}`);
    }

    private getField(widgetId: string, id: string): Field {

        const widgetWithPrefix = `${this.routeId}-${widgetId}`;

        return this.widgets ?.find(widget => widget.id === widgetWithPrefix)
            .fields ?.find(field => field.id === `${widgetWithPrefix}-fields-${id}`);
    }

    actionDisplay(widgetId: string, id: string): boolean {
        return this.getAction(widgetId, id) ?.display;
    }

    fieldReadonly(widgetId: string, id: string): boolean {
        return this.getField(widgetId, id) ?.display === 'readonly';
    }

    fieldHidden(widgetId: string, id: string): boolean {
        return !this.getField(widgetId, id) || this.getField(widgetId, id) ?.display === 'hidden';
    }

}
上一篇 下一篇

猜你喜欢

热点阅读