platform/io.sc.platform.developer.frontend/src/views/backend/ExportLiquibase.vue

<template>
  <div>
    <w-form
      ref="formRef"
      :fields="[
        {
          name: 'datasource',
          label: $t('developer.backend.export.liquibase.datasource'),
          type: 'select',
          clearable: true,
          options: datasourceOptionsRef,
          'onUpdate:modelValue': (value) => {
            datasourceChanged(value);
          },
        },
        {
          name: 'schema',
          label: $t('developer.backend.export.liquibase.schema'),
          type: 'select',
          options: schemaOptionsRef,
          'onUpdate:modelValue': (value) => {
            schemaChanged(formRef.getFieldValue('datasource'), value);
          },
          required: true,
        },
        {
          name: 'tables',
          label: $t('developer.backend.export.liquibase.tables'),
          type: 'select',
          multiple: true,
          clearable: true,
          options: tablesOptionsRef,
          'onUpdate:modelValue': (value) => {
            if (value) {
              if (value.length > 1) {
                formRef.setFieldValue('sql', 'select * from ${table}');
              } else {
                formRef.setFieldValue('sql', 'select * from ' + value);
              }
            }
          },
          required: true,
        },
        { name: 'fetchSize', label: 'Fetch Size', type: 'number', defaultValue: 1000 },
        {
          name: 'sql',
          label: 'SQL',
          type: 'code-mirror',
          colSpan: 4,
          rows: 5,
          lang: 'sql',
        },
      ]"
    >
    </w-form>

    <div class="row justify-center q-gutter-md py-2">
      <w-progress-btn
        ref="progressBtnRef"
        icon="bi-database-down"
        :label="$t('export')"
        data-url="/api/jdbc/data/traceExporterExecuteProgress"
        @click="exportData"
      ></w-progress-btn>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref, reactive, toRaw, onMounted, onUpdated } from 'vue';
import { useI18n } from 'vue-i18n';
import { axios, Environment, EnumTools, Formater, Options, DialogManager, NotifyManager, Tools } from 'platform-core';

const { t } = useI18n();
const formRef = ref();
const progressBtnRef = ref();
const datasourceOptionsRef = ref([]);
const schemaOptionsRef = ref([]);
const tablesOptionsRef = ref([]);

const loadDatasource = () => {
  axios.get(Environment.apiContextPath('/api/system/datasource?pageable=false&sortBy=name')).then((response) => {
    const data = response?.data.content;
    if (data && data.length > 0) {
      datasourceOptionsRef.value.splice(0, datasourceOptionsRef.value.length);
      for (let item of data) {
        datasourceOptionsRef.value.push({ label: item.name, value: item.name });
      }
    }
  });
};

const datasourceChanged = (datasource: string) => {
  datasource = datasource || '';
  axios.get(Environment.apiContextPath('/api/jdbc/metadata/getSchemas?datasource=' + datasource)).then((response) => {
    const data = response?.data;
    if (data && data.length > 0) {
      schemaOptionsRef.value.splice(0, schemaOptionsRef.value.length);
      tablesOptionsRef.value.splice(0, tablesOptionsRef.value.length);
      for (let item of data) {
        schemaOptionsRef.value.push({ label: item.name, value: item.name });
      }
    }
  });
};

const schemaChanged = (datasource: string, schema: string) => {
  datasource = datasource || '';
  schema = schema || '';
  axios.get(Environment.apiContextPath('/api/jdbc/metadata/getTables?datasource=' + datasource + '&schema=' + schema)).then((response) => {
    const data = response?.data;
    if (data && data.length > 0) {
      tablesOptionsRef.value.splice(0, tablesOptionsRef.value.length);
      for (let item of data) {
        tablesOptionsRef.value.push({ label: item.name, value: item.name });
      }
    }
  });
};

const exportData = (e) => {
  formRef.value.validate().then((value) => {
    if (value) {
      DialogManager.confirm(t('developer.backend.export.liquibase.export.tip'), () => {
        const data = formRef.value.getData();
        const config = {
          datasource: data.datasource,
          schema: data.schema,
          tables: [],
        };
        const length = data.tables.length;
        const sql = length === 1 ? formRef.value.getFieldValue('sql') : '';
        for (let i = 0; i < length; i++) {
          config.tables[i] = { name: data.tables[i], sql: sql ? sql : 'select * from ' + data.tables[i] };
        }
        axios.post(Environment.apiContextPath('/api/jdbc/data/exportData'), config).then((response) => {
          progressBtnRef.value.start();
        });
      });
    }
  });
};

onMounted(() => {
  loadDatasource();
  datasourceChanged('');
});

onUpdated(() => {
  loadDatasource();
});
</script>