mayfly-go/mayfly_go_web/src/views/ops/db/component/SqlExecBox.ts

import { h, render, VNode } from 'vue';
import SqlExecDialog from './SqlExecDialog.vue';

export type SqlExecProps = {
    sql: string;
    dbId: number;
    db: string;
    runSuccessCallback?: Function;
    cancelCallback?: Function;
};

const boxId = 'sql-exec-id';

const renderBox = (): VNode => {
    const props: SqlExecProps = {
        sql: '',
        dbId: 0,
    } as any;
    const container = document.createElement('div');
    container.id = boxId;
    // 创建 虚拟dom
    const boxVNode = h(SqlExecDialog, props);
    // 将虚拟dom渲染到 container dom 上
    render(boxVNode, container);
    // 最后将 container 追加到 body 上
    document.body.appendChild(container);

    return boxVNode;
};

let boxInstance: any;

const SqlExecBox = (props: SqlExecProps): void => {
    if (boxInstance) {
        const boxVue = boxInstance.component;
        // 调用open方法显示弹框，注意不能使用boxVue.ctx来调用组件函数（build打包后ctx会获取不到）
        boxVue.exposed.open(props);
    } else {
        boxInstance = renderBox();
        SqlExecBox(props);
    }
};

export default SqlExecBox;