|
| 1 | +<script lang="ts" setup> |
| 2 | +import { ref, nextTick } from 'vue' |
| 3 | +import { datasourceApi } from '@/api/datasource' |
| 4 | +import { useI18n } from 'vue-i18n' |
| 5 | +import icon_close_outlined from '@/assets/svg/operate/ope-close.svg' |
| 6 | +import DatasourceList from './DatasourceList.vue' |
| 7 | +import DatasourceListSide from './DatasourceListSide.vue' |
| 8 | +import DatasourceForm from './DatasourceForm.vue' |
| 9 | +
|
| 10 | +const { t } = useI18n() |
| 11 | +const datasourceConfigVisible = ref(false) |
| 12 | +const activeStep = ref(0) |
| 13 | +const currentType = ref('') |
| 14 | +const editDatasource = ref(false) |
| 15 | +const activeName = ref('') |
| 16 | +const activeType = ref('') |
| 17 | +const datasourceFormRef = ref() |
| 18 | +
|
| 19 | +const beforeClose = () => { |
| 20 | + datasourceConfigVisible.value = false |
| 21 | + activeStep.value = 0 |
| 22 | + datasourceApi.cancelRequests() |
| 23 | +} |
| 24 | +const clickDatasource = (ele: any) => { |
| 25 | + activeStep.value = 1 |
| 26 | + activeName.value = ele.name |
| 27 | + activeType.value = ele.type |
| 28 | +} |
| 29 | +
|
| 30 | +const clickDatasourceSide = (ele: any) => { |
| 31 | + activeName.value = ele.name |
| 32 | + activeType.value = ele.type |
| 33 | +} |
| 34 | +
|
| 35 | +const emits = defineEmits(['search']) |
| 36 | +
|
| 37 | +const refresh = () => { |
| 38 | + activeName.value = '' |
| 39 | + activeStep.value = 0 |
| 40 | + activeType.value = '' |
| 41 | + datasourceConfigVisible.value = false |
| 42 | + emits('search') |
| 43 | +} |
| 44 | +
|
| 45 | +const handleEditDatasource = (res: any) => { |
| 46 | + activeStep.value = 1 |
| 47 | + datasourceConfigVisible.value = true |
| 48 | + editDatasource.value = true |
| 49 | + currentType.value = res.type_name |
| 50 | + nextTick(() => { |
| 51 | + datasourceFormRef.value.initForm(res) |
| 52 | + }) |
| 53 | +} |
| 54 | +
|
| 55 | +const handleAddDatasource = () => { |
| 56 | + editDatasource.value = false |
| 57 | + datasourceConfigVisible.value = true |
| 58 | +} |
| 59 | +
|
| 60 | +const changeActiveStep = (val: number) => { |
| 61 | + activeStep.value = val > 2 ? 2 : val |
| 62 | +} |
| 63 | +
|
| 64 | +defineExpose({ |
| 65 | + handleEditDatasource, |
| 66 | + handleAddDatasource, |
| 67 | +}) |
| 68 | +</script> |
| 69 | + |
| 70 | +<template> |
| 71 | + <el-drawer |
| 72 | + v-model="datasourceConfigVisible" |
| 73 | + :close-on-click-modal="false" |
| 74 | + size="calc(100% - 100px)" |
| 75 | + modal-class="datasource-drawer-fullscreen" |
| 76 | + direction="btt" |
| 77 | + :before-close="beforeClose" |
| 78 | + :show-close="false" |
| 79 | + > |
| 80 | + <template #header="{ close }"> |
| 81 | + <span style="white-space: nowrap">{{ |
| 82 | + editDatasource |
| 83 | + ? t('datasource.mysql_data_source', { msg: currentType }) |
| 84 | + : $t('datasource.new_data_source') |
| 85 | + }}</span> |
| 86 | + <div v-if="!editDatasource" class="flex-center" style="width: 100%"> |
| 87 | + <el-steps custom style="max-width: 800px; flex: 1" :active="activeStep" align-center> |
| 88 | + <el-step> |
| 89 | + <template #title> {{ $t('qa.select_datasource') }} </template> |
| 90 | + </el-step> |
| 91 | + <el-step> |
| 92 | + <template #title> {{ $t('datasource.configuration_information') }} </template> |
| 93 | + </el-step> |
| 94 | + <el-step> |
| 95 | + <template #title> {{ $t('ds.form.choose_tables') }} </template> |
| 96 | + </el-step> |
| 97 | + </el-steps> |
| 98 | + </div> |
| 99 | + <el-icon style="cursor: pointer" @click="close"> |
| 100 | + <icon_close_outlined></icon_close_outlined> |
| 101 | + </el-icon> |
| 102 | + </template> |
| 103 | + <DatasourceList v-if="activeStep === 0" @click-datasource="clickDatasource"></DatasourceList> |
| 104 | + <DatasourceListSide |
| 105 | + v-if="activeStep === 1 && !editDatasource" |
| 106 | + :active-name="activeName" |
| 107 | + @click-datasource="clickDatasourceSide" |
| 108 | + ></DatasourceListSide> |
| 109 | + <DatasourceForm |
| 110 | + v-if="[1, 2].includes(activeStep)" |
| 111 | + ref="datasourceFormRef" |
| 112 | + :is-data-table="false" |
| 113 | + :active-step="activeStep" |
| 114 | + :active-name="activeName" |
| 115 | + :active-type="activeType" |
| 116 | + @refresh="refresh" |
| 117 | + @close="beforeClose" |
| 118 | + @change-active-step="changeActiveStep" |
| 119 | + ></DatasourceForm> |
| 120 | + </el-drawer> |
| 121 | +</template> |
| 122 | + |
| 123 | +<style lang="less"> |
| 124 | +.datasource-drawer-fullscreen { |
| 125 | + .ed-drawer__body { |
| 126 | + padding: 0; |
| 127 | + } |
| 128 | + .is-process .ed-step__line { |
| 129 | + background-color: var(--ed-color-primary); |
| 130 | + } |
| 131 | +} |
| 132 | +</style> |
0 commit comments