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.
103 lines
3.1 KiB
103 lines
3.1 KiB
1 year ago
|
<template>
|
||
|
|
<div>
|
||
|
|
<w-form
|
||
|
|
ref="formRef"
|
||
|
|
:fields="[
|
||
|
|
{
|
||
|
|
name: 'datasourceName',
|
||
|
|
label: 'datasourceName',
|
||
|
|
type: 'select',
|
||
|
|
options: datasourceOptionsRef,
|
||
|
|
'onUpdate:modelValue': (value) => {
|
||
|
|
datasourceNameChanged(value);
|
||
|
|
},
|
||
|
|
},
|
||
|
|
{
|
||
|
|
name: 'schemaName',
|
||
|
|
label: 'schemaName',
|
||
|
|
type: 'select',
|
||
|
|
options: schemaNameOptionsRef,
|
||
|
|
'onUpdate:modelValue': (value) => {
|
||
|
|
schemaNameChanged(formRef.getFieldValue('datasourceName'), value);
|
||
|
|
},
|
||
|
|
},
|
||
|
|
{ name: 'tableName', label: 'tableName', type: 'select', multiple: true, options: tableNameOptionsRef },
|
||
|
|
{ name: 'fetchSize', label: 'fetchSize', type: 'number', defaultValue: 1000 },
|
||
|
|
{ name: 'sql', label: 'sql', type: 'code-mirror', colSpan: 4, rows: 5, lang: 'sql' },
|
||
|
|
]"
|
||
|
|
>
|
||
|
|
</w-form>
|
||
|
|
<w-grid
|
||
|
|
ref="gridRef"
|
||
|
|
:title="$t('queryResult')"
|
||
|
|
:config-button="false"
|
||
|
|
selection="multiple"
|
||
|
|
:checkbox-selection="false"
|
||
|
|
:data-url="Environment.apiContextPath('/api/system/datasource')"
|
||
|
|
:query-form-fields="[]"
|
||
|
|
:toolbar-configure="{ noIcon: false }"
|
||
|
|
:toolbar-actions="[
|
||
|
|
'query',
|
||
|
|
'refresh',
|
||
|
|
{
|
||
|
|
name: 'export',
|
||
|
|
label: $t('export'),
|
||
|
|
icon: '',
|
||
|
|
click: () => {},
|
||
|
|
},
|
||
|
|
]"
|
||
|
|
:columns="[]"
|
||
|
|
>
|
||
|
|
</w-grid>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
<script setup lang="ts">
|
||
|
|
import { ref, onMounted, onUpdated } from 'vue';
|
||
|
|
import { axios, Environment, EnumTools, Formater, Options, DialogManager, NotifyManager } from 'platform-core';
|
||
|
|
|
||
|
|
const formRef = ref();
|
||
|
|
const datasourceOptionsRef = ref([]);
|
||
|
|
const schemaNameOptionsRef = ref([]);
|
||
|
|
const tableNameOptionsRef = 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 datasourceNameChanged = (datasourceName: string) => {
|
||
|
|
axios.get(Environment.apiContextPath('/api/jdbc/metadata/getSchemaNames/' + datasourceName)).then((response) => {
|
||
|
|
const data = response?.data;
|
||
|
|
if (data && data.length > 0) {
|
||
|
|
schemaNameOptionsRef.value.splice(0, schemaNameOptionsRef.value.length);
|
||
|
|
for (let item of data) {
|
||
|
|
schemaNameOptionsRef.value.push({ label: item.name, value: item.name });
|
||
|
|
}
|
||
|
|
}
|
||
|
|
});
|
||
|
|
};
|
||
|
|
|
||
|
|
const schemaNameChanged = (datasourceName: string, schemaName: string) => {
|
||
|
|
axios.get(Environment.apiContextPath('/api/jdbc/metadata/getTables/' + datasourceName + '/' + schemaName)).then((response) => {
|
||
|
|
const data = response?.data;
|
||
|
|
if (data && data.length > 0) {
|
||
|
|
tableNameOptionsRef.value.splice(0, tableNameOptionsRef.value.length);
|
||
|
|
for (let item of data) {
|
||
|
|
tableNameOptionsRef.value.push(item.name);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
});
|
||
|
|
};
|
||
|
|
|
||
|
|
onMounted(() => {
|
||
|
|
loadDatasource();
|
||
|
|
});
|
||
|
|
</script>
|