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

页面内容细粒度的控制

作者: 东东_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';
    }

}

相关文章

  • 页面内容细粒度的控制

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

  • Shiro2-权限管理解决方案

    什么是粗粒度和细粒度权限控制 粗粒度权限管理: 对资源类型的权限管理. 比如:菜单 URL链接 用户添加页面 ...

  • 5、DOM

    DOM Document Object Model 功能:用来控制页面中的内容,通过操作对象来控制页面内容。 DO...

  • 内容与样式分离的原则

    html主要是控制页面内容结构就像页面的骨架,css主要是控制页面样式,js主要控制页面的元素的行为。他们三者相互...

  • css打印如何处理链接地址

    关于css控制打印更多内容可以参阅css控制打印内容的样式一章节。 在打印页面的时候,如果页面中有链接,那么我们应...

  • js

    /* * * 页面中有什么代码?html--展示内容,css---美化页面的,js---控制页面 * * js的代...

  • Django学习知识框架

    一、网页前端:(HTML、CSS 、JavaScript) HTML 定义了页面内容;CSS 控制页面元素的样式;...

  • UITabBarController隐藏底部

    UITabBarController中的每个子控制展示内容,如果从内容页面跳转到详情页面的时候需要隐藏底部,我们可...

  • [ray入门] Ray控制任务资源使用

    Ray的资源控制非常细粒度,你可以控制remote function的资源使用,控制力非常的强。 集群资源 集群资...

  • 技术翻译常用短语

    implement fine-grained scroll behavior control. 实现细粒度的滚动行为控制

网友评论

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

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