mirror of
https://github.com/dataease/dataease.git
synced 2025-02-28 23:23:05 +08:00
465 lines
16 KiB
Vue
465 lines
16 KiB
Vue
<template>
|
|
<layout-content :header="formType=='add' ? $t('datasource.create') : $t('datasource.modify')">
|
|
<template v-slot:header>
|
|
<el-icon name="back" class="back-button" @click.native="backToList"/>
|
|
{{
|
|
params && params.id && params.showModel && params.showModel === 'show' && !canEdit ? $t('datasource.show_info') : formType == 'add' ? $t('datasource.create') : $t('datasource.modify')
|
|
}}
|
|
</template>
|
|
<div>
|
|
|
|
<el-form
|
|
ref="dsForm"
|
|
:model="form"
|
|
:rules="rule"
|
|
size="small"
|
|
:disabled="params && params.id && params.showModel && params.showModel === 'show' && !canEdit "
|
|
label-width="180px"
|
|
label-position="right"
|
|
>
|
|
<el-form-item :label="$t('commons.name')" prop="name">
|
|
<el-input v-model="form.name" autocomplete="off"/>
|
|
</el-form-item>
|
|
<el-form-item :label="$t('commons.description')" prop="desc">
|
|
<el-input v-model="form.desc" autocomplete="off"/>
|
|
</el-form-item>
|
|
<el-form-item :label="$t('datasource.type')" prop="type">
|
|
<el-select
|
|
v-model="form.type"
|
|
:placeholder="$t('datasource.please_choose_type')"
|
|
class="select-width"
|
|
:disabled="formType=='modify' || (formType==='add' && params && !!params.type)"
|
|
@change="changeType()"
|
|
>
|
|
<el-option
|
|
v-for="item in allTypes"
|
|
:key="item.name"
|
|
:label="item.label"
|
|
:value="item.name"
|
|
/>
|
|
</el-select>
|
|
</el-form-item>
|
|
|
|
<el-form-item
|
|
v-if="form.configuration.dataSourceType=='jdbc'"
|
|
:label="$t('datasource.host')"
|
|
prop="configuration.host"
|
|
>
|
|
<el-input v-model="form.configuration.host" autocomplete="off"/>
|
|
</el-form-item>
|
|
<el-form-item
|
|
v-if="form.configuration.dataSourceType=='es'"
|
|
:label="$t('datasource.datasource_url')"
|
|
prop="configuration.url"
|
|
>
|
|
<el-input
|
|
v-model="form.configuration.url"
|
|
:placeholder="$t('datasource.please_input_datasource_url')"
|
|
autocomplete="off"
|
|
/>
|
|
</el-form-item>
|
|
<el-form-item
|
|
v-if="form.configuration.dataSourceType=='jdbc'"
|
|
:label="$t('datasource.data_base')"
|
|
prop="configuration.dataBase"
|
|
>
|
|
<el-input v-model="form.configuration.dataBase" autocomplete="off"/>
|
|
</el-form-item>
|
|
|
|
<el-form-item
|
|
v-if="form.type=='oracle'"
|
|
:label="$t('datasource.oracle_connection_type')"
|
|
prop="configuration.connectionType"
|
|
>
|
|
<el-radio v-model="form.configuration.connectionType" label="sid">{{ $t('datasource.oracle_sid') }}</el-radio>
|
|
<el-radio v-model="form.configuration.connectionType" label="serviceName">
|
|
{{ $t('datasource.oracle_service_name') }}
|
|
</el-radio>
|
|
</el-form-item>
|
|
|
|
<el-form-item v-if="form.configuration.dataSourceType=='jdbc'" :label="$t('datasource.user_name')">
|
|
<el-input v-model="form.configuration.username" autocomplete="off"/>
|
|
</el-form-item>
|
|
<el-form-item v-if="form.configuration.dataSourceType=='jdbc'" :label="$t('datasource.password')">
|
|
<el-input v-model="form.configuration.password" autocomplete="off" show-password/>
|
|
</el-form-item>
|
|
<el-form-item v-if="form.configuration.dataSourceType=='es'" :label="$t('datasource.user_name')">
|
|
<el-input v-model="form.configuration.esUsername" autocomplete="off"/>
|
|
</el-form-item>
|
|
<el-form-item v-if="form.configuration.dataSourceType=='es'" :label="$t('datasource.password')">
|
|
<el-input v-model="form.configuration.esPassword" autocomplete="off" show-password/>
|
|
</el-form-item>
|
|
|
|
<el-form-item
|
|
v-if="form.configuration.dataSourceType=='jdbc' && form.type!=='oracle'"
|
|
:label="$t('datasource.extra_params')"
|
|
>
|
|
<el-input v-model="form.configuration.extraParams" autocomplete="off"/>
|
|
</el-form-item>
|
|
|
|
<el-form-item
|
|
v-if="form.configuration.dataSourceType=='jdbc'"
|
|
:label="$t('datasource.port')"
|
|
prop="configuration.port"
|
|
>
|
|
<el-input v-model="form.configuration.port" autocomplete="off" type="number" min="0"/>
|
|
</el-form-item>
|
|
<el-form-item v-if="form.type=='oracle' || form.type=='sqlServer' || form.type=='pg' || form.type=='redshift' || form.type=='db2'">
|
|
<el-button icon="el-icon-plus" size="mini" @click="getSchema()">
|
|
{{ $t('datasource.get_schema') }}
|
|
</el-button>
|
|
</el-form-item>
|
|
|
|
<el-form-item
|
|
v-if="form.type=='oracle' || form.type=='sqlServer' || form.type=='pg' || form.type=='redshift' || form.type=='db2'"
|
|
:label="$t('datasource.schema')"
|
|
>
|
|
<el-select
|
|
v-model="form.configuration.schema"
|
|
filterable
|
|
:placeholder="$t('datasource.please_choose_schema')"
|
|
class="select-width"
|
|
>
|
|
<el-option
|
|
v-for="item in schemas"
|
|
:key="item"
|
|
:label="item"
|
|
:value="item"
|
|
/>
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-collapse v-if="form.configuration.dataSourceType=='jdbc'">
|
|
<el-collapse-item :title="$t('datasource.priority')" name="1">
|
|
<el-form-item :label="$t('datasource.initial_pool_size')" prop="configuration.initialPoolSize">
|
|
<el-input
|
|
v-model="form.configuration.initialPoolSize"
|
|
autocomplete="off"
|
|
type="number"
|
|
min="0"
|
|
size="small"
|
|
/>
|
|
</el-form-item>
|
|
<el-form-item :label="$t('datasource.min_pool_size')" prop="configuration.minPoolSize">
|
|
<el-input v-model="form.configuration.minPoolSize" autocomplete="off" type="number" min="0"/>
|
|
</el-form-item>
|
|
<el-form-item :label="$t('datasource.max_pool_size')" prop="configuration.maxPoolSize">
|
|
<el-input v-model="form.configuration.maxPoolSize" autocomplete="off" type="number" min="0"/>
|
|
</el-form-item>
|
|
|
|
</el-collapse-item>
|
|
</el-collapse>
|
|
</el-form>
|
|
<div v-if="canEdit" slot="footer" class="dialog-footer">
|
|
<el-button
|
|
v-if="formType==='add'?true: hasDataPermission('manage',params.privileges)"
|
|
@click="validaDatasource"
|
|
>{{ $t('commons.validate') }}
|
|
</el-button>
|
|
<el-button
|
|
v-if="formType==='add'?true: hasDataPermission('manage',params.privileges)"
|
|
type="primary"
|
|
@click="save"
|
|
>{{ $t('commons.save') }}
|
|
</el-button>
|
|
</div>
|
|
<div v-else slot="footer" class="dialog-footer">
|
|
<el-button
|
|
v-if="formType==='add'?true: hasDataPermission('manage',params.privileges)"
|
|
@click="validaDatasource"
|
|
>{{ $t('commons.validate') }}
|
|
</el-button>
|
|
<el-button
|
|
v-if="formType==='add'?true: hasDataPermission('manage',params.privileges)"
|
|
type="primary"
|
|
@click="changeEdit"
|
|
>{{ $t('commons.edit') }}
|
|
</el-button>
|
|
</div>
|
|
</div>
|
|
</layout-content>
|
|
</template>
|
|
|
|
<script>
|
|
import LayoutContent from '@/components/business/LayoutContent'
|
|
import {addDs, editDs, getSchema, validateDs, validateDsById} from '@/api/system/datasource'
|
|
import {$confirm} from '@/utils/message'
|
|
import i18n from '@/lang/index'
|
|
|
|
export default {
|
|
name: 'DsForm',
|
|
components: {LayoutContent},
|
|
props: {
|
|
params: {
|
|
type: Object,
|
|
default: null
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
form: {
|
|
configuration: {
|
|
initialPoolSize: 5,
|
|
extraParams: '',
|
|
minPoolSize: 5,
|
|
maxPoolSize: 50,
|
|
maxIdleTime: 30,
|
|
acquireIncrement: 5,
|
|
idleConnectionTestPeriod: 5,
|
|
connectTimeout: 5
|
|
}
|
|
},
|
|
rule: {
|
|
name: [{required: true, message: i18n.t('datasource.input_name'), trigger: 'blur'},
|
|
{min: 2, max: 25, message: i18n.t('datasource.input_limit_2_25', [2, 25]), trigger: 'blur'}],
|
|
desc: [{min: 0, max: 50, message: i18n.t('datasource.input_limit_0_50'), trigger: 'blur'}],
|
|
type: [{required: true, message: i18n.t('datasource.please_choose_type'), trigger: 'change'}],
|
|
'configuration.dataBase': [{
|
|
required: true,
|
|
message: i18n.t('datasource.please_input_data_base'),
|
|
trigger: 'blur'
|
|
}],
|
|
'configuration.connectionType': [{
|
|
required: true,
|
|
message: i18n.t('datasource.please_select_oracle_type'),
|
|
trigger: 'blur'
|
|
}],
|
|
'configuration.username': [{
|
|
required: true,
|
|
message: i18n.t('datasource.please_input_user_name'),
|
|
trigger: 'blur'
|
|
}],
|
|
'configuration.password': [{
|
|
required: true,
|
|
message: i18n.t('datasource.please_input_password'),
|
|
trigger: 'change'
|
|
}],
|
|
'configuration.host': [{required: true, message: i18n.t('datasource.please_input_host'), trigger: 'change'}],
|
|
'configuration.url': [{required: true, message: i18n.t('datasource.please_input_url'), trigger: 'change'}],
|
|
'configuration.port': [{required: true, message: i18n.t('datasource.please_input_port'), trigger: 'change'}],
|
|
'configuration.initialPoolSize': [{
|
|
required: true,
|
|
message: i18n.t('datasource.please_input_initial_pool_size'),
|
|
trigger: 'change'
|
|
}],
|
|
'configuration.minPoolSize': [{
|
|
required: true,
|
|
message: i18n.t('datasource.please_input_min_pool_size'),
|
|
trigger: 'change'
|
|
}],
|
|
'configuration.maxPoolSize': [{
|
|
required: true,
|
|
message: i18n.t('datasource.please_input_max_pool_size'),
|
|
trigger: 'change'
|
|
}],
|
|
'configuration.maxIdleTime': [{
|
|
required: true,
|
|
message: i18n.t('datasource.please_input_max_idle_time'),
|
|
trigger: 'change'
|
|
}],
|
|
'configuration.acquireIncrement': [{
|
|
required: true,
|
|
message: i18n.t('datasource.please_input_acquire_increment'),
|
|
trigger: 'change'
|
|
}],
|
|
'configuration.connectTimeout': [{
|
|
required: true,
|
|
message: i18n.t('datasource.please_input_connect_timeout'),
|
|
trigger: 'change'
|
|
}]
|
|
},
|
|
allTypes: [
|
|
{name: 'mysql', label: 'MySQL', type: 'jdbc', extraParams: 'characterEncoding=UTF-8&connectTimeout=5000&useSSL=false&allowPublicKeyRetrieval=true'
|
|
},
|
|
{name: 'hive', label: 'Apache Hive', type: 'jdbc', extraParams: ''},
|
|
{name: 'oracle', label: 'Oracle', type: 'jdbc'},
|
|
{name: 'sqlServer', label: 'SQL Server', type: 'jdbc', extraParams: ''},
|
|
{name: 'pg', label: 'PostgreSQL', type: 'jdbc', extraParams: ''},
|
|
{name: 'es', label: 'Elasticsearch', type: 'es'},
|
|
{name: 'mariadb', label: 'MariaDB', type: 'jdbc', extraParams: 'characterEncoding=UTF-8&connectTimeout=5000&useSSL=false&allowPublicKeyRetrieval=true'},
|
|
{name: 'ds_doris', label: 'Doris', type: 'jdbc', extraParams: 'characterEncoding=UTF-8&connectTimeout=5000&useSSL=false&allowPublicKeyRetrieval=true'},
|
|
{name: 'ck', label: 'ClickHouse', type: 'jdbc', extraParams: ''},
|
|
{name: 'redshift', label: 'AWS Redshift', type: 'jdbc'},
|
|
{name: 'mongo', label: 'MongoDB', type: 'jdbc', extraParams: ''},
|
|
{name: 'db2', label: 'Db2', type: 'jdbc', extraParams: ''}
|
|
],
|
|
schemas: [],
|
|
canEdit: false,
|
|
originConfiguration: {}
|
|
}
|
|
},
|
|
|
|
created() {
|
|
if (this.params && this.params.id) {
|
|
const row = this.params
|
|
this.edit(row)
|
|
} else {
|
|
this.create()
|
|
if (this.params && this.params.type) {
|
|
this.setType()
|
|
}
|
|
}
|
|
},
|
|
mounted() {
|
|
},
|
|
methods: {
|
|
setType() {
|
|
this.form.type = this.params.type
|
|
this.form.configuration = {
|
|
initialPoolSize: 5,
|
|
extraParams: '',
|
|
minPoolSize: 5,
|
|
maxPoolSize: 50,
|
|
maxIdleTime: 30,
|
|
acquireIncrement: 5,
|
|
idleConnectionTestPeriod: 5,
|
|
connectTimeout: 5
|
|
}
|
|
this.changeType()
|
|
},
|
|
changeEdit() {
|
|
this.canEdit = true
|
|
this.formType = 'modify'
|
|
},
|
|
create() {
|
|
this.formType = 'add'
|
|
this.canEdit = true
|
|
},
|
|
edit(row) {
|
|
this.formType = 'modify'
|
|
this.form = Object.assign({}, row)
|
|
this.originConfiguration = this.form.configuration
|
|
this.form.configuration = JSON.parse(this.form.configuration)
|
|
},
|
|
reset() {
|
|
this.$refs.dsForm.resetFields()
|
|
},
|
|
save() {
|
|
if (!this.form.configuration.schema && (this.form.type === 'oracle' || this.form.type === 'sqlServer')) {
|
|
this.$message.error(i18n.t('datasource.please_choose_schema'))
|
|
return
|
|
}
|
|
if (this.form.configuration.dataSourceType === 'jdbc' && this.form.configuration.port <= 0) {
|
|
this.$message.error(i18n.t('datasource.port_no_less_then_0'))
|
|
return
|
|
}
|
|
if (this.form.configuration.initialPoolSize < 0 || this.form.configuration.minPoolSize < 0 || this.form.configuration.maxPoolSize < 0) {
|
|
this.$message.error(i18n.t('datasource.no_less_then_0'))
|
|
return
|
|
}
|
|
this.$refs.dsForm.validate(valid => {
|
|
if (valid) {
|
|
const method = this.formType === 'add' ? addDs : editDs
|
|
const form = JSON.parse(JSON.stringify(this.form))
|
|
form.configuration = JSON.stringify(form.configuration)
|
|
if (this.formType !== 'add' && this.originConfiguration !== form.configuration) {
|
|
$confirm(i18n.t('datasource.edit_datasource_msg'), () => {
|
|
method(form).then(res => {
|
|
this.$success(i18n.t('commons.save_success'))
|
|
this.refreshType(form)
|
|
this.backToList()
|
|
})
|
|
})
|
|
} else {
|
|
method(form).then(res => {
|
|
this.$success(i18n.t('commons.save_success'))
|
|
this.refreshType(form)
|
|
this.backToList()
|
|
})
|
|
}
|
|
} else {
|
|
return false
|
|
}
|
|
})
|
|
},
|
|
getSchema() {
|
|
this.$refs.dsForm.validate(valid => {
|
|
if (valid) {
|
|
const data = JSON.parse(JSON.stringify(this.form))
|
|
data.configuration = JSON.stringify(data.configuration)
|
|
getSchema(data).then(res => {
|
|
this.schemas = res.data
|
|
this.$success(i18n.t('commons.success'))
|
|
})
|
|
} else {
|
|
return false
|
|
}
|
|
})
|
|
},
|
|
validaDatasource() {
|
|
if (!this.form.configuration.schema && this.form.type === 'oracle') {
|
|
this.$message.error(i18n.t('datasource.please_choose_schema'))
|
|
return
|
|
}
|
|
if (this.form.configuration.dataSourceType === 'jdbc' && this.form.configuration.port <= 0) {
|
|
this.$message.error(i18n.t('datasource.port_no_less_then_0'))
|
|
return
|
|
}
|
|
this.$refs.dsForm.validate(valid => {
|
|
if (valid) {
|
|
const data = JSON.parse(JSON.stringify(this.form))
|
|
data.configuration = JSON.stringify(data.configuration)
|
|
if (data.showModel === 'show' && !this.canEdit) {
|
|
validateDsById(data.id).then(res => {
|
|
if (res.success) {
|
|
this.$success(i18n.t('datasource.validate_success'))
|
|
} else {
|
|
this.$error(res.message)
|
|
}
|
|
this.refreshType(data)
|
|
}).catch(res => {
|
|
this.$error(res.message)
|
|
})
|
|
} else {
|
|
validateDs(data).then(res => {
|
|
if (res.success) {
|
|
this.$success(i18n.t('datasource.validate_success'))
|
|
} else {
|
|
this.$error(res.message)
|
|
}
|
|
}).catch(res => {
|
|
this.$error(res.message)
|
|
})
|
|
}
|
|
} else {
|
|
return false
|
|
}
|
|
})
|
|
},
|
|
changeType() {
|
|
for (let i = 0; i < this.allTypes.length; i++) {
|
|
if (this.allTypes[i].name === this.form.type) {
|
|
this.form.configuration.dataSourceType = this.allTypes[i].type
|
|
this.form.configuration.extraParams = this.allTypes[i].extraParams
|
|
}
|
|
}
|
|
},
|
|
backToList() {
|
|
this.$emit('switch-component', {})
|
|
},
|
|
refreshType(form) {
|
|
this.$emit('refresh-type', form)
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
|
|
.back-button {
|
|
cursor: pointer;
|
|
margin-right: 10px;
|
|
font-weight: 600;
|
|
|
|
&:active {
|
|
transform: scale(0.85);
|
|
}
|
|
}
|
|
|
|
.el-input {
|
|
width: 300px;
|
|
}
|
|
|
|
.el-select {
|
|
width: 300px;
|
|
}
|
|
</style>
|