多维表格
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 
 

73 lines
2.0 KiB

<script lang="ts" setup>
const props = defineProps<{ loadDatasourceInfo?: boolean; baseId?: string }>()
const { loadDatasourceInfo, baseId } = toRefs(props)
const { pageMode, IntegrationsPageMode, integrationType, activeIntegration } = useIntegrationStore()
const isEditOrAddIntegrationModalOpen = computed({
get: () => {
return pageMode.value === IntegrationsPageMode.ADD || pageMode.value === IntegrationsPageMode.EDIT
},
set: (value: boolean) => {
if (!value) {
pageMode.value = null
}
},
})
const connectionType = computed(() => {
switch (
pageMode.value === IntegrationsPageMode.EDIT
? activeIntegration.value?.sub_type || activeIntegration.value?.config?.client
: activeIntegration.value?.type
) {
case integrationType.PostgreSQL:
return ClientType.PG
case integrationType.MySQL:
return ClientType.MYSQL
case integrationType.SQLITE:
return ClientType.SQLITE
default: {
return undefined
}
}
})
</script>
<template>
<NcModal
v-model:visible="isEditOrAddIntegrationModalOpen"
size="large"
wrap-class-name="nc-modal-edit-or-add-integration"
@keydown.esc="isEditOrAddIntegrationModalOpen = false"
>
<div v-if="connectionType" class="h-full">
<WorkspaceIntegrationsFormsEditOrAddDatabase
v-model:open="isEditOrAddIntegrationModalOpen"
:connection-type="connectionType"
:load-datasource-info="loadDatasourceInfo"
:base-id="baseId"
/>
</div>
</NcModal>
</template>
<style lang="scss" scoped></style>
<style lang="scss">
.nc-modal-edit-or-add-integration {
.nc-modal {
@apply !p-0;
height: min(calc(100vh - 100px), 1024px);
max-height: min(calc(100vh - 100px), 1024px) !important;
.nc-edit-or-add-integration-left-panel {
@apply w-full p-6 flex-1 flex justify-center;
}
.nc-edit-or-add-integration-right-panel {
@apply p-5 w-[320px] border-l-1 border-gray-200 flex flex-col gap-4 bg-gray-50 rounded-br-2xl;
}
}
}
</style>