decision-webui-dcm/src/modules/pages/maintain/maintain.ts

import { Vtape, Label, VerticalAdapt, ListView, IconButton } from 'ui';
import { shortcut, store } from '@core/core';
import { MaintainModel, MaintainModelXtype } from './maintain.model';
import { MaintainFormXtype } from './forms/form';
import { LinkXtype } from 'src/modules/components/link_button/link';
import { PAGE_INDEX } from '@constants/constant';
import { ApiFactory } from 'src/modules/crud/apiFactory';
const api = new ApiFactory().create();
import './maintain.less';
import { connectionType } from '@constants/env';
import { getJdbcDatabaseType, getTextByDatabaseType } from '../../app.service';
import { ConnectionJDBC } from 'src/modules/crud/crud.typings';

export const MaintainXtype = 'dec.dcm.maintain';
@shortcut(MaintainXtype)
@store(MaintainModelXtype)
export class Maintain extends BI.Widget {
    model: MaintainModel['model'];
    store: MaintainModel['store'];

    listView: any;

    render() {
        const { isEdit, databaseType } = this.getEditConnection();
        const titleText = getTextByDatabaseType(databaseType);
        
        return {
            type: Vtape,
            hgap: 5,
            items: [
                {
                    type: VerticalAdapt,
                    cls: 'bi-border-bottom',
                    height: 40,
                    hgap: 5,
                    items: [
                        {
                            type: IconButton,
                            $value: 'back-databases',
                            cls: 'dcm-back-font',
                            height: 15,
                            invisible: this.model.isCopy || isEdit,
                            handler: () => {
                                this.store.setPageIndex(PAGE_INDEX.DATEBASE);
                            },
                        },
                        {
                            type: Label,
                            text: titleText,
                            height: 15,
                        },
                        {
                            type: LinkXtype,
                            invisible: true,
                            lgap: 10,
                            text: BI.i18nText('Dec-Dcm_Socket_Unable_Connect_Tip'),
                            link: api.getHyperlink(DecCst.Hyperlink.WEBSOCKET_CONNECT),
                            ref: (_ref: any) => {
                                this.socketTip = _ref;
                            },
                        },
                    ],
                },
                {
                    type: ListView,
                    ref: (_ref: any) => {
                        this.listView = _ref;
                    },
                    items: this.renderItems(),
                },
            ],
        };
    }

    mounted() {
        if (!api.getSocketStatus()) {
            BI.Msg.toast(BI.i18nText('Dec-Dcm_Socket_Unable_Connect'), {
                level: 'warning',
            });
            this.socketTip.setVisible(true);
        }
    }

    private renderItems() {
        const { type } = this.getEditConnection();
        
        return [{
            type: MaintainFormXtype,
            connectionType: type,
        }];
    }

    private getEditConnection() {
        if (this.model.datebaseTypeSelected) {
            return {
                type: this.model.datebaseTypeSelectedOne.type,
                text: this.model.datebaseTypeSelectedOne.text,
                isEdit: false,
                databaseType: this.model.datebaseTypeSelectedOne.databaseType,
            };
        }
        let databaseType = this.model.connectionSelectedOne.connectionType;
        if (databaseType === connectionType.JDBC) {
            const connectionJDBC = this.model.connectionSelectedOne.connectionData as ConnectionJDBC;
            databaseType = getJdbcDatabaseType(connectionJDBC.database, connectionJDBC.driver).databaseType;
        }
        
        return {
            type: this.model.connectionSelectedOne.connectionType,
            text: this.model.connectionSelectedOne.connectionName,
            isEdit: true,
            databaseType,
        };
    }
}