@lcap/asl/src/types/page/Directive.ts

NetEase Application Specific Language

// import stringify = require('json-stringify-safe');
import { action, circular, excludedInJSON, immutable } from '../decorators';
import { config, history, utils, LEVEL_ENUM, Vertex, PackageJSON, App, Page, DataNode, View, Element, Attr, ExpressionNode, Logic, genFinalCode, ACTION_MODE, ActionOptions } from '..';
import { elementService, attributeService, eventService, directiveService } from '../../service/page';
import { LogicItem, evaluate } from '../logic/LogicItem';
import { traverse } from '../utils';

function generateBody(body: Directive) {
    if (body.expression) {
        traverse((current) => {
            delete current.node.editable;
            delete current.node.index;
            delete current.node.memberIdentifierSchema;
        }, { node: body.expression as any }, { mode: 'anyObject' });
    }
};


/**
 * 前端指令
 * 去除了 v-model
 */
export class Directive extends Vertex {
    /**
     * 概念类型
     */
    @immutable()
    public readonly level: LEVEL_ENUM = LEVEL_ENUM.directive;
    /**
     * 指令类型
     */
    @immutable()
    public readonly type: 'string' | 'static' | 'dynamic' = 'string';
    /**
     * Id
     */
    @immutable()
    public readonly id: string;
    /**
     * 指令名
     */
    @immutable()
    public readonly name: string;
    /**
     * 指令名
     */
    @immutable()
    public readonly rawName: string;
    /**
     * 指令值
     */
    @immutable()
    public readonly value: string;
    /**
     * 参数
     */
    @immutable()
    public readonly arg: string;
    /**
     * 修饰符
     */
    @immutable()
    public readonly modifiers: { [key: string]: boolean };
    /**
     * 关联的动态表达式
     */
    @immutable()
    public readonly expression?: ExpressionNode;
    /**
     * 所在元素 Id
     */
    @immutable()
    public readonly elementId: string;
    /**
     * 所在元素
     */
    @circular()
    @immutable()
    public readonly element: Element;
    /**
     * @param source 需要合并的部分参数
     */
    constructor(source?: Partial<Directive>) {
        super();
        source && this.assign(source);
    }
    /**
     * 转换成 Vue 的模板格式
     */
    toVue(placeholder?: any, finalCode?: boolean) {
        let modifiersString = '';
        Object.keys(this.modifiers || {}).forEach((key) => {
            const value = this.modifiers[key];
            if (value)
                modifiersString += '.' + key;
        });
        let value = this.type !== 'string' ? this.value : this.value ? `'${this.value}'` : '';
        if(this.expression) {
            value = evaluate(this.expression, finalCode);
            value && (value = genFinalCode(value, finalCode));
            if(this.expression.type === 'StringLiteral') {
                value = `'${value}'`;
            }
            value = value.replace && value.replace(/"/g, "'");
        }

        return value !== '' && value !== undefined && value !== null ? `v-${this.name}${modifiersString}${this.arg ? ':' + this.arg : ''}="${value}"` : '';
    }
    /**
     * 从后端 JSON 生成规范的 Directive 对象
     */
    public static from(source: any, element: Element) {
        if (typeof source.modifiers === 'string')
            source.modifiers = JSON.parse(source.modifiers);
        const directive = new Directive(source);
        directive.assign({ element });
        return directive;
    }

    /**
     * 添加组件指令
     */
    @action('添加组件指令')
    async create(none?: void, actionOptions?: ActionOptions) {
        config.defaultApp?.emit('saving');

        if (actionOptions?.actionMode !== ACTION_MODE.undoRedo) {
            const body = this.toJSON();
            generateBody(body);
            utils.logger.debug('添加组件指令', body);
            const result: Attr = await directiveService.create({
                headers: {
                    appId: config.defaultApp?.id,
                    operationAction: actionOptions?.actionName || 'Directive.create',
                    operationDesc: actionOptions?.actionDesc || `添加组件"${this.element.tag}"指令"${this.name}"`,
                },
                body,
            });
            this.assign({ id: result.id });
        }

        //   this.element.view && this.element.view.emit('change');
        await config.defaultApp?.history.load();
        config.defaultApp?.emit('saved');
        return this;
    }
    /**
     * 删除组件指令
     */
    @action('删除组件指令')
    async delete(none?: void, actionOptions?: ActionOptions) {
        config.defaultApp?.emit('saving');

        if (actionOptions?.actionMode !== ACTION_MODE.undoRedo) {
            if (this.id) {
                try {
                    await directiveService.delete({
                        headers: {
                            appId: config.defaultApp?.id,
                            operationAction: actionOptions?.actionName || 'Directive.delete',
                            operationDesc: actionOptions?.actionDesc || `删除组件"${this.element.tag}"指令"${this.name}"`,
                        },
                        query: {
                            id: this.id,
                        },
                    });                    
                } catch(err) {
                    await config.defaultApp?.history.load();
                    throw err;
                }
            }
        }
        this.destroy();
        this.element.view && this.element.view.emit('change');
        await config.defaultApp?.history.load();
        config.defaultApp?.emit('saved');
    }
    /**
     * 修改组件指令
     */
    @action('修改组件指令')
    async update(data: Attr, actionOptions?: ActionOptions) {
        config.defaultApp?.emit('saving');

        data && this.assign(data);
        if (actionOptions?.actionMode !== ACTION_MODE.undoRedo) {
            const body = this.toJSON();
            generateBody(body);
            utils.logger.debug('修改组件指令', body);
            await directiveService.update({
                headers: {
                    appId: config.defaultApp?.id,
                    operationAction: actionOptions?.actionName || 'Directive.update',
                    operationDesc: actionOptions?.actionDesc || `修改组件"${this.element.tag}"指令"${this.name}"`,
                },
                body,
            });
            this.assign(Directive.from(this, this.element));
        }

        this.element.view && this.element.view.emit('change');
        await config.defaultApp?.history.load();
        config.defaultApp?.emit('saved');
        return this;
    }
}

export default Directive;