美文网首页
页面内容细粒度的控制

页面内容细粒度的控制

作者: 东东_6292 | 来源:发表于2020-10-10 18:25 被阅读0次

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

    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';
        }
    
    }
    

    相关文章

      网友评论

          本文标题:页面内容细粒度的控制

          本文链接:https://www.haomeiwen.com/subject/kaujpktx.html