dataease/frontend/src/views/system/datasource/DsForm.vue
2022-05-23 22:24:22 +08:00

694 lines
22 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()"
filterable
>
<el-option
v-for="item in dsTypes"
:key="item.type"
:label="item.name"
:value="item.type"
/>
</el-select>
</el-form-item>
<el-form-item v-if="datasourceType.isJdbc" :label="$t('driver.driver')">
<el-select
v-model="form.configuration.customDriver"
:placeholder="$t('driver.please_choose_driver')"
class="select-width"
filterable
>
<el-option
v-for="item in driverList"
:key="item.id"
:label="item.name"
:value="item.id"
:disabled="!item.driverClass"
/>
</el-select>
</el-form-item>
<ds-configuration ref="dsConfig" v-if="!datasourceType.isPlugin" :datasource-type='datasourceType' :form="form" :disabled="params && params.id && params.showModel && params.showModel === 'show' && !canEdit"></ds-configuration>
<plugin-com ref="pluginDsConfig" v-if="datasourceType.isPlugin" :component-name="datasourceType.type" :obj="{form, disabled }" />
</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,
checkApiDatasource,
listDriverByType
} from '@/api/system/datasource'
import {$confirm} from '@/utils/message'
import i18n from '@/lang/index'
import ApiHttpRequestForm from '@/views/system/datasource/ApiHttpRequestForm'
import DsConfiguration from "@/views/system/datasource/DsConfiguration";
import PluginCom from '@/views/system/plugin/PluginCom'
export default {
name: 'DsForm',
components: {
DsConfiguration,
LayoutContent,
ApiHttpRequestForm,
PluginCom
},
props: {
params: {
type: Object,
default: null
},
tData: {
type: Array,
default: null
},
dsTypes: {
type: Array,
default: null
}
},
data() {
return {
disabled: false,
form: {
configuration: {
initialPoolSize: 5,
extraParams: '',
minPoolSize: 5,
maxPoolSize: 50,
maxIdleTime: 30,
acquireIncrement: 5,
idleConnectionTestPeriod: 5,
connectTimeout: 5
},
apiConfiguration: []
},
datasourceType: {},
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: 2, max: 50, message: i18n.t('datasource.input_limit_2_50'), trigger: 'blur'}],
type: [{required: true, message: i18n.t('datasource.please_choose_type'), trigger: 'blur'}],
'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: 'blur'
}],
'configuration.host': [{required: true, message: i18n.t('datasource.please_input_host'), trigger: 'blur'}],
'configuration.url': [{required: true, message: i18n.t('datasource.please_input_url'), trigger: 'blur'}],
'configuration.port': [{required: true, message: i18n.t('datasource.please_input_port'), trigger: 'blur'}],
'configuration.initialPoolSize': [{
required: true,
message: i18n.t('datasource.please_input_initial_pool_size'),
trigger: 'blur'
}],
'configuration.minPoolSize': [{
required: true,
message: i18n.t('datasource.please_input_min_pool_size'),
trigger: 'blur'
}],
'configuration.maxPoolSize': [{
required: true,
message: i18n.t('datasource.please_input_max_pool_size'),
trigger: 'blur'
}],
'configuration.maxIdleTime': [{
required: true,
message: i18n.t('datasource.please_input_max_idle_time'),
trigger: 'blur'
}],
'configuration.acquireIncrement': [{
required: true,
message: i18n.t('datasource.please_input_acquire_increment'),
trigger: 'blur'
}],
'configuration.connectTimeout': [{
required: true,
message: i18n.t('datasource.please_input_connect_timeout'),
trigger: 'blur'
}],
'url': [{required: true, message: i18n.t('datasource.please_input_url'), trigger: 'blur'}],
'dataPath': [{required: true, message: i18n.t('datasource.please_input_dataPath'), trigger: 'blur'}]
},
schemas: [],
canEdit: false,
originConfiguration: {},
edit_api_item: false,
add_api_item: true,
active: 0,
defaultApiItem: {
name: '',
url: '',
method: 'GET',
request: {
headers: [{}],
body: {
"type": "",
"raw": "",
"kvs": []
}
},
fields: []
},
apiItem: {
status: '',
name: '',
url: '',
method: 'GET',
dataPath: '',
request: {
headers: [],
body: {
"type": "",
"raw": "",
"kvs": []
},
authManager: {}
},
fields: []
},
reqOptions: [{id: 'GET', label: 'GET'}, {id: 'POST', label: 'POST'}],
loading: false,
responseData: {type: 'HTTP', responseResult: {}, subRequestResults: []},
api_table_title: '',
api_step2_active_name: 'first',
fieldTypes: [
{label: this.$t('dataset.text'), value: 0},
{label: this.$t('dataset.time'), value: 1},
{label: this.$t('dataset.value'), value: 2},
{label: this.$t('dataset.value') + '(' + this.$t('dataset.float') + ')', value: 3},
{label: this.$t('dataset.location'), value: 5}
],
height: 500,
disabledNext: false,
driverList: []
}
},
created() {
if (this.params && this.params.id) {
const row = this.params
this.edit(row)
this.changeType(true)
} else {
this.create()
if (this.params && this.params.type) {
this.setType()
this.changeType()
}
}
this.disabled = this.params && this.params.id && this.params.showModel && this.params.showModel === 'show' && !this.canEdit
},
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
}
},
changeEdit() {
this.canEdit = true
this.formType = 'modify'
this.disabled = this.params && this.params.id && this.params.showModel && this.params.showModel === 'show' && !this.canEdit
},
create() {
this.formType = 'add'
this.canEdit = true
this.disabled = this.params && this.params.id && this.params.showModel && this.params.showModel === 'show' && !this.canEdit
},
edit(row) {
this.formType = 'modify'
this.form = JSON.parse(JSON.stringify(row))
this.originConfiguration = this.form.configuration
if (row.type === 'api') {
} else {
this.form.configuration = JSON.parse(this.form.configuration)
}
this.disabled = this.params && this.params.id && this.params.showModel && this.params.showModel === 'show' && !this.canEdit
},
reset() {
this.$refs.dsForm.resetFields()
},
save() {
if (!this.form.configuration.schema && (this.form.type === 'oracle' || this.form.type === 'sqlServer' || this.form.type === 'pg' || this.form.type === 'redshift' || this.form.type === 'db2')) {
this.$message.error(i18n.t('datasource.please_choose_schema'))
return
}
if (this.form.type !== 'es' && this.form.type !== 'api' && 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
}
let repeat = false
let repeatDsName = []
this.tData.forEach(item => {
if (item.id === this.form.type) {
item.children.forEach(child => {
if (this.formType === 'modify' && child.id === this.form.id) {
return
}
let configuration = JSON.parse(child.configuration)
if(!configuration){
return
}
switch (this.form.type) {
case 'mysql':
case 'TiDB':
case 'StarRocks':
case 'hive':
case 'mariadb':
case 'ds_doris':
case 'ck':
case 'mongo':
case 'mariadb':
case 'impala':
if (configuration.host == this.form.configuration.host && configuration.dataBase == this.form.configuration.dataBase && configuration.port == this.form.configuration.port) {
repeat = true
repeatDsName.push(child.name)
}
break
case 'pg':
case 'sqlServer':
case 'redshift':
case 'oracle':
case 'db2':
if (configuration.host == this.form.configuration.host && configuration.dataBase == this.form.configuration.dataBase && configuration.port == this.form.configuration.port && configuration.schema == this.form.configuration.schema) {
repeatDsName.push(child.name)
repeat = true
}
break
case 'es':
if (configuration.url == this.form.configuration.url) {
repeatDsName.push(child.name)
repeat = true
}
break
default:
break
}
})
}
})
let status = null;
if(this.datasourceType.isPlugin){
status = this.$refs['pluginDsConfig'].callPluginInner({methodName: 'validate'})
}else {
this.$refs['dsConfig'].$refs['DsConfig'].validate(valid => {
status = valid
})
}
if(!status){
return;
}
this.$refs.dsForm.validate(valid => {
if (!valid) {
return false
}
const method = this.formType === 'add' ? addDs : editDs
const form = JSON.parse(JSON.stringify(this.form))
if (form.type === 'api') {
if (this.form.apiConfiguration.length < 1) {
this.$message.error(i18n.t('datasource.api_table_not_empty'))
return
}
form.apiConfiguration.forEach(item => {
delete item.status
})
form.configuration = JSON.stringify(form.apiConfiguration)
} else {
form.configuration = JSON.stringify(form.configuration)
}
if (this.formType === 'modify' && this.originConfiguration !== form.configuration) {
if (repeat) {
$confirm(i18n.t('datasource.repeat_datasource_msg') + '[' + repeatDsName.join(',') + '], ' + i18n.t('datasource.confirm_save'), () => {
$confirm(i18n.t('datasource.edit_datasource_msg'), () => {
this.method(method, form)
})
})
} else {
$confirm(i18n.t('datasource.edit_datasource_msg'), () => {
this.method(method, form)
})
}
return
}
if (repeat) {
$confirm(i18n.t('datasource.repeat_datasource_msg') + '[' + repeatDsName.join(',') + '], ' + i18n.t('datasource.confirm_save'), () => {
this.method(method, form)
})
} else {
this.method(method, form)
}
})
},
method(method, form) {
method(form).then(res => {
this.$success(i18n.t('commons.save_success'))
this.refreshType(form)
this.backToList()
})
},
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.type !== 'es' && this.form.type !== 'api' && this.form.configuration.port <= 0) {
this.$message.error(i18n.t('datasource.port_no_less_then_0'))
return
}
let status = null;
if(this.datasourceType.isPlugin){
status = this.$refs['pluginDsConfig'].callPluginInner({methodName: 'validate'})
}else {
this.$refs['dsConfig'].$refs['DsConfig'].validate(valid => {
status = valid
if(!valid){
return
}
})
}
if(!status){
return;
}
this.$refs.dsForm.validate(valid => {
if (valid) {
const data = JSON.parse(JSON.stringify(this.form))
if (data.type === 'api') {
data.configuration = JSON.stringify(data.apiConfiguration)
} else {
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 {
if (res.message.length < 2500) {
this.$error(res.message)
} else {
this.$error(res.message.substring(0, 2500) + '......')
}
}
this.refreshType(data)
})
} else {
validateDs(data).then(res => {
if (res.success) {
this.$success(i18n.t('datasource.validate_success'))
} else {
if (data.type === 'api') {
this.form.apiConfiguration = res.data.apiConfiguration
}
if (res.message.length < 2500) {
this.$error(res.message)
} else {
this.$error(res.message.substring(0, 2500) + '......')
}
}
}).catch(res => {
this.$error(res.message)
})
}
} else {
return false
}
})
},
changeType(init) {
for (let i = 0; i < this.dsTypes.length; i++) {
if (this.dsTypes[i].type === this.form.type) {
if(this.form.type !== 'api' && !init){
this.form.configuration.extraParams = this.dsTypes[i].extraParams
this.form.configuration.customDriver = ''
}
this.datasourceType = this.dsTypes[i]
if(this.datasourceType.isJdbc){
listDriverByType(this.datasourceType.type).then(res => {
this.driverList = [{id: 'default', name: 'Default', driverClass:'Default'}]
this.driverList = this.driverList.concat(res.data)
})
}
}
}
},
backToList() {
this.$emit('switch-component', {})
},
refreshType(form) {
this.$emit('refresh-type', form)
},
next() {
if (this.active === 1) {
let hasRepeatName = false
if (this.add_api_item) {
this.form.apiConfiguration.forEach(item => {
if (item.name === this.apiItem.name) {
hasRepeatName = true
}
})
} else {
let index = this.form.apiConfiguration.indexOf(this.apiItem)
for (let i = 0; i < this.form.apiConfiguration.length; i++) {
if (i !== index && this.form.apiConfiguration[i].name === this.apiItem.name) {
hasRepeatName = true
}
}
}
if (hasRepeatName) {
this.$message.error(i18n.t('datasource.has_repeat_name'))
return
}
this.$refs.apiItem.validate(valid => {
if (valid) {
const data = JSON.parse(JSON.stringify(this.apiItem))
data.request = JSON.stringify(data.request)
this.loading = true
this.disabledNext = true
checkApiDatasource(data).then(res => {
this.loading = false
this.disabledNext = false
this.apiItem.status = 'Success'
this.$success(i18n.t('commons.success'))
this.active++
this.apiItem.fields = res.data.fields
this.$refs.plxTable.reloadData(res.data.datas)
}).catch(res => {
this.loading = false
this.disabledNext = false
})
} else {
this.apiItem.fields = []
return false
}
})
}
},
before() {
this.active--
},
closeEditItem() {
this.active = 0
this.edit_api_item = false
},
saveItem() {
this.active = 0
this.edit_api_item = false
if (this.add_api_item) {
this.form.apiConfiguration.push(this.apiItem)
}
},
addApiItem(item) {
this.$nextTick(() => {
this.$refs.apiItem.clearValidate()
})
if (item) {
this.add_api_item = false
this.api_table_title = this.$t('datasource.edit_api_table')
this.apiItem = item
} else {
this.add_api_item = true
this.apiItem = JSON.parse(JSON.stringify(this.defaultApiItem))
this.api_table_title = this.$t('datasource.add_api_table')
}
this.active = 1
this.edit_api_item = true
},
deleteItem(item) {
this.form.apiConfiguration.splice(this.form.apiConfiguration.indexOf(item), 1)
},
validateApi(item) {
if (undefined) {
} else {
this.$refs.apiItem.validate(valid => {
if (valid) {
const data = JSON.parse(JSON.stringify(this.apiItem))
data.request = JSON.stringify(data.request)
this.loading = true
checkApiDatasource(data).then(res => {
this.loading = false
this.$success(i18n.t('commons.success'))
this.apiItem.fields = res.data.fields
this.$refs.plxTable.reloadData(res.data.datas)
}).catch(res => {
this.loading = false
})
} else {
return false
}
})
}
},
handleClick(tab, event) {
}
}
}
</script>
<style scoped>
.el-input {
width: 300px;
}
.el-select {
width: 300px;
}
.ms-http-input {
width: 500px;
margin-top: 5px;
}
.tip {
padding: 3px 5px;
font-size: 16px;
border-radius: 0;
border-left: 4px solid #409EFF;
margin: 5px 5px 10px 5px;
}
.el-select >>> input {
padding-right: 10px;
}
.el-select >>> .el-input__suffix {
right: 0;
}
.dialog-css >>> .el-dialog__header {
padding: 10px 20px 0px;
}
.dialog-css >>> .el-dialog__body {
padding: 10px 20px 10px;
}
.dialog-footer >>> .el-dialog__footer {
padding: 10px 10px 10px;
}
</style>