app-control-shell.ts 3.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
import { AppServiceBase, Util } from 'ibiz-core';
import { Vue, Component, Prop, Watch, Emit } from 'vue-property-decorator';

/**
 * 部件壳
 *
 * @export
 * @class AppControlShell
 * @extends {Vue}
 */
@Component({})
export class AppControlShell extends Vue {
    /**
     * 部件静态参数
     *
     * @memberof AppDefaultForm
     */
    @Prop() public staticProps!: any;

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

    /**
     * 监听当前视图环境参数变化
     *
     * @memberof AppDefaultEditView
     */
    @Watch('staticProps', {
        immediate: true,
        deep: true,
    })
    public onstaticPropsChange(newVal: any, oldVal: any) {
        if (newVal && newVal != oldVal) {
            this.initControlData(newVal);
        }
    }

    /**
     * 部件组件名称
     *
     * @type {any}
     * @memberof ViewBase
     */
    public controlComponentName: string = '';

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

    /**
     * 初始化组件数据
     *
     * @param {ControlContext} opts
     * @memberof AppControlShell
     */
    public async initControlData(opts: any) {
        // 部件模型数据加载
        await opts.modelData?.fill?.(true);
        if (opts?.modelData?.getPSSysPFPlugin?.()) {
            this.controlComponentName = AppServiceBase.getInstance().getAppComponentService().getControlComponents(
                opts.modelData?.controlType,
                opts.modelData?.controlStyle || 'DEFAULT',
                opts.modelData?.getPSSysPFPlugin()?.pluginType+'_'+opts.modelData?.getPSSysPFPlugin()?.pluginCode
            );
        } else {
            this.controlComponentName = AppServiceBase.getInstance().getAppComponentService().getControlComponents(
                opts.modelData?.controlType,
                opts.modelData?.controlStyle || 'DEFAULT',
            );
        }
    }

    /**
     * 获取部件引用
     *
     * @readonly
     * @memberof AppControlShell
     */
    public get ctrl() {
        return this.$refs.ctrl;
    }

    /**
     * UUID
     *
     * @readonly
     * @memberof AppControlShell 
     */
    public UUID: string = Util.createUUID();

    /**
     * 绘制内容
     *
     * @returns
     * @memberof AppControlShell
     */
    public render(): any {
        if (!this.controlComponentName) {
            return;
        }
        const controlId = `${this.staticProps?.modelData?.codeName}` + this.UUID;
        Object.assign(this.staticProps,{
            controlId: controlId,
        })
        return this.$createElement(this.controlComponentName, {
            props: { staticProps: this.staticProps, dynamicProps: this.dynamicProps },
            ref: 'ctrl',
            on: {
                'ctrl-event': this.ctrlEvent,
                'closeView': ($event: any) => {
                    this.$emit('closeView', $event);
                }
            },
            domProps: {
                id: controlId
            }
        });
    }
}