Skip to content

D
dataease
提交 65aaff16 authored 作者: taojinlong's avatar taojinlong
浏览文件
操作

feat: 增加 mongoDB 的连接字符串

上级 39865e17
显示空白字符变更
内嵌 并排
正在显示 包含 128 行增加 和 128 行删除
frontend/src/views/system/datasource/form.vue
浏览文件 @ 65aaff16
......@@ -45,9 +45,12 @@
<el-col>
<el-button size="mini" icon="el-icon-plus" type="text" @click="addApiItem(undefined)"/>
<el-table :data="form.apiConfiguration" class="my_table" max-height="300" height="300">
<el-table-column prop="name" :label="$t('datasource.data_table_name')" width="150" show-overflow-tooltip></el-table-column>
<el-table-column prop="method" :label="$t('datasource.method')" width="150" show-overflow-tooltip></el-table-column>
<el-table-column prop="url" :label="$t('datasource.url')" width="150" show-overflow-tooltip></el-table-column>
<el-table-column prop="name" :label="$t('datasource.data_table_name')" width="150"
show-overflow-tooltip></el-table-column>
<el-table-column prop="method" :label="$t('datasource.method')" width="150"
show-overflow-tooltip></el-table-column>
<el-table-column prop="url" :label="$t('datasource.url')" width="150"
show-overflow-tooltip></el-table-column>
<el-table-column prop="status" :label="$t('commons.status')" width="150">
<template slot-scope="scope">
<span v-if="scope.row.status === 'Success'" style="color: green">
......@@ -70,7 +73,8 @@
</el-col>
</el-form-item>
<el-dialog :title="api_table_title" :visible="edit_api_item" :before-close="closeEditItem" width="60%" class="dialog-css" append-to-body>
<el-dialog :title="api_table_title" :visible="edit_api_item" :before-close="closeEditItem" width="60%"
class="dialog-css" append-to-body>
<el-steps :active="active" align-center>
<el-step title="步骤 1"></el-step>
<el-step title="步骤 2"></el-step>
......@@ -85,7 +89,8 @@
</el-form-item>
<el-form-item :label="$t('datasource.request')" prop="url">
<el-input :placeholder="$t('datasource.path_all_info')" v-model="apiItem.url" class="ms-http-input" size="small" >
<el-input :placeholder="$t('datasource.path_all_info')" v-model="apiItem.url" class="ms-http-input"
size="small">
<el-select v-model="apiItem.method" slot="prepend" style="width: 100px" size="small">
<el-option v-for="item in reqOptions" :key="item.id" :label="item.label" :value="item.id"/>
</el-select>
......@@ -96,84 +101,89 @@
<p class="tip">{{ $t('datasource.req_param') }} </p>
<!-- HTTP 请求参数 -->
<el-form-item>
<api-http-request-form :headers="apiItem.request.headers" :request="apiItem.request" :response="responseData"/>
<api-http-request-form :headers="apiItem.request.headers" :request="apiItem.request"
:response="responseData"/>
</el-form-item>
</div>
<el-form-item :label="$t('datasource.data_path')" prop="dataPath">
<el-input :placeholder="$t('datasource.data_path_desc')" v-model="apiItem.dataPath" autocomplete="off"/>
</el-form-item>
<!-- <el-button style="margin-top: 12px;" @click="validateApi(undefined)" v-show="active === 1">{{ $t('commons.validate') }}</el-button>-->
<!-- <el-button style="margin-top: 12px;" @click="validateApi(undefined)" v-show="active === 1">{{ $t('commons.validate') }}</el-button>-->
</el-form>
</el-row>
<el-row v-show="active === 2">
<el-tabs v-model="api_step2_active_name" @tab-click="handleClick">
<el-tab-pane :label="$t('dataset.data_preview')" name="first">
<ux-grid ref="plxTable" size="mini" style="width: 100%;" :height="height" :checkbox-config="{highlight: true}" :width-resize="true" >
<ux-table-column v-for="field in apiItem.fields" :key="field.originName" min-width="200px" :field="field.originName" :resizable="true">
<ux-grid ref="plxTable" size="mini" style="width: 100%;" :height="height"
:checkbox-config="{highlight: true}" :width-resize="true">
<ux-table-column v-for="field in apiItem.fields" :key="field.originName" min-width="200px"
:field="field.originName" :resizable="true">
<template slot="header">
<svg-icon v-if="field.deExtractType === 0" icon-class="field_text" class="field-icon-text" />
<svg-icon v-if="field.deExtractType === 1" icon-class="field_time" class="field-icon-time" />
<svg-icon v-if="field.deExtractType === 2 || field.deExtractType === 3" icon-class="field_value" class="field-icon-value" />
<svg-icon v-if="field.deExtractType === 5" icon-class="field_location" class="field-icon-location" />
<svg-icon v-if="field.deExtractType === 0" icon-class="field_text" class="field-icon-text"/>
<svg-icon v-if="field.deExtractType === 1" icon-class="field_time" class="field-icon-time"/>
<svg-icon v-if="field.deExtractType === 2 || field.deExtractType === 3" icon-class="field_value"
class="field-icon-value"/>
<svg-icon v-if="field.deExtractType === 5" icon-class="field_location"
class="field-icon-location"/>
<span>{{ field.name }}</span>
</template>
</ux-table-column>
</ux-grid>
</el-tab-pane>
<!-- 暂时屏蔽掉字段管理-->
<!-- <el-tab-pane label="字段管理" name="second">-->
<!-- <el-table :data="apiItem.fields" size="mini">-->
<!-- <el-table-column property="name" :label="$t('dataset.field_name')" width="180">-->
<!-- <template slot-scope="scope">-->
<!-- <el-input v-model="scope.row.name" size="mini"/>-->
<!-- </template>-->
<!-- </el-table-column>-->
<!-- <el-table-column property="originName" :label="$t('dataset.field_origin_name')" width="100">-->
<!-- <template slot-scope="scope">-->
<!-- <span v-if="scope.row.extField === 0" :title="scope.row.originName" class="field-class" style="width: 100%;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;">-->
<!-- <span style="font-size: 12px;">{{ scope.row.originName }}</span>-->
<!-- </span>-->
<!-- </template>-->
<!-- </el-table-column>-->
<!-- <el-table-column property="deExtractType" :label="$t('dataset.field_type')" width="140">-->
<!-- <template slot-scope="scope">-->
<!-- <el-select v-model="scope.row.deExtractType" size="mini" style="display: inline-block;width: 26px;">-->
<!-- <el-option v-for="item in fieldTypes" :key="item.value" :label="item.label" :value="item.value">-->
<!-- <span style="float: left">-->
<!-- <svg-icon v-if="item.value === 0" icon-class="field_text" class="field-icon-text" />-->
<!-- <svg-icon v-if="item.value === 1" icon-class="field_time" class="field-icon-time" />-->
<!-- <svg-icon v-if="item.value === 2 || item.value === 3" icon-class="field_value" class="field-icon-value" />-->
<!-- <svg-icon v-if="item.value === 5" icon-class="field_location" class="field-icon-location" />-->
<!-- </span>-->
<!-- <span style="float: left; color: #8492a6; font-size: 12px">{{ item.label }}</span>-->
<!-- </el-option>-->
<!-- </el-select>-->
<!-- <span style="margin-left: 8px;">-->
<!-- <span v-if="scope.row.deExtractType === 0">-->
<!-- <svg-icon icon-class="field_text" class="field-icon-text" />-->
<!-- <span class="field-class">{{ $t('dataset.text') }}</span>-->
<!-- </span>-->
<!-- <span v-if="scope.row.deExtractType === 1">-->
<!-- <svg-icon v-if="scope.row.deExtractType === 1" icon-class="field_time" class="field-icon-time" />-->
<!-- <span class="field-class">{{ $t('dataset.time') }}</span>-->
<!-- </span>-->
<!-- <span v-if="scope.row.deExtractType === 2 || scope.row.deExtractType === 3">-->
<!-- <svg-icon v-if="scope.row.deExtractType === 2 || scope.row.deExtractType === 3" icon-class="field_value" class="field-icon-value" />-->
<!-- <span v-if="scope.row.deExtractType === 2" class="field-class">{{ $t('dataset.value') }}</span>-->
<!-- <span v-if="scope.row.deExtractType === 3" class="field-class">{{ $t('dataset.value') + '(' + $t('dataset.float') + ')' }}</span>-->
<!-- </span>-->
<!-- <span v-if="scope.row.deExtractType === 5">-->
<!-- <svg-icon v-if="scope.row.deExtractType === 5" icon-class="field_location" class="field-icon-location" />-->
<!-- <span class="field-class">{{ $t('dataset.location') }}</span>-->
<!-- </span>-->
<!-- </span>-->
<!-- </template>-->
<!-- </el-table-column>-->
<!-- </el-table>-->
<!-- </el-tab-pane>-->
<!-- 暂时屏蔽掉字段管理-->
<!-- <el-tab-pane label="字段管理" name="second">-->
<!-- <el-table :data="apiItem.fields" size="mini">-->
<!-- <el-table-column property="name" :label="$t('dataset.field_name')" width="180">-->
<!-- <template slot-scope="scope">-->
<!-- <el-input v-model="scope.row.name" size="mini"/>-->
<!-- </template>-->
<!-- </el-table-column>-->
<!-- <el-table-column property="originName" :label="$t('dataset.field_origin_name')" width="100">-->
<!-- <template slot-scope="scope">-->
<!-- <span v-if="scope.row.extField === 0" :title="scope.row.originName" class="field-class" style="width: 100%;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;">-->
<!-- <span style="font-size: 12px;">{{ scope.row.originName }}</span>-->
<!-- </span>-->
<!-- </template>-->
<!-- </el-table-column>-->
<!-- <el-table-column property="deExtractType" :label="$t('dataset.field_type')" width="140">-->
<!-- <template slot-scope="scope">-->
<!-- <el-select v-model="scope.row.deExtractType" size="mini" style="display: inline-block;width: 26px;">-->
<!-- <el-option v-for="item in fieldTypes" :key="item.value" :label="item.label" :value="item.value">-->
<!-- <span style="float: left">-->
<!-- <svg-icon v-if="item.value === 0" icon-class="field_text" class="field-icon-text" />-->
<!-- <svg-icon v-if="item.value === 1" icon-class="field_time" class="field-icon-time" />-->
<!-- <svg-icon v-if="item.value === 2 || item.value === 3" icon-class="field_value" class="field-icon-value" />-->
<!-- <svg-icon v-if="item.value === 5" icon-class="field_location" class="field-icon-location" />-->
<!-- </span>-->
<!-- <span style="float: left; color: #8492a6; font-size: 12px">{{ item.label }}</span>-->
<!-- </el-option>-->
<!-- </el-select>-->
<!-- <span style="margin-left: 8px;">-->
<!-- <span v-if="scope.row.deExtractType === 0">-->
<!-- <svg-icon icon-class="field_text" class="field-icon-text" />-->
<!-- <span class="field-class">{{ $t('dataset.text') }}</span>-->
<!-- </span>-->
<!-- <span v-if="scope.row.deExtractType === 1">-->
<!-- <svg-icon v-if="scope.row.deExtractType === 1" icon-class="field_time" class="field-icon-time" />-->
<!-- <span class="field-class">{{ $t('dataset.time') }}</span>-->
<!-- </span>-->
<!-- <span v-if="scope.row.deExtractType === 2 || scope.row.deExtractType === 3">-->
<!-- <svg-icon v-if="scope.row.deExtractType === 2 || scope.row.deExtractType === 3" icon-class="field_value" class="field-icon-value" />-->
<!-- <span v-if="scope.row.deExtractType === 2" class="field-class">{{ $t('dataset.value') }}</span>-->
<!-- <span v-if="scope.row.deExtractType === 3" class="field-class">{{ $t('dataset.value') + '(' + $t('dataset.float') + ')' }}</span>-->
<!-- </span>-->
<!-- <span v-if="scope.row.deExtractType === 5">-->
<!-- <svg-icon v-if="scope.row.deExtractType === 5" icon-class="field_location" class="field-icon-location" />-->
<!-- <span class="field-class">{{ $t('dataset.location') }}</span>-->
<!-- </span>-->
<!-- </span>-->
<!-- </template>-->
<!-- </el-table-column>-->
<!-- </el-table>-->
<!-- </el-tab-pane>-->
</el-tabs>
</el-row>
<div slot="footer" class="dialog-footer">
......@@ -388,32 +398,17 @@ export default {
'dataPath': [{required: true, message: i18n.t('datasource.please_input_dataPath'), trigger: 'change'}]
},
allTypes: [
{
name: 'mysql',
label: 'MySQL',
type: 'jdbc',
extraParams: 'characterEncoding=UTF-8&connectTimeout=5000&useSSL=false&allowPublicKeyRetrieval=true'
},
{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: '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: 'rebuildschema=true'},
{name: 'mongo', label: 'MongoDB', type: 'jdbc', extraParams: 'rebuildschema=true&authSource=admin'},
{name: 'db2', label: 'Db2', type: 'jdbc', extraParams: ''},
{name: 'api', label: 'API', type: 'api', extraParams: ''}
],
......@@ -460,11 +455,11 @@ export default {
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 }
{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
}
......@@ -511,8 +506,8 @@ export default {
this.form = JSON.parse(JSON.stringify(row))
this.originConfiguration = this.form.configuration
if(row.type === 'api'){
}else {
if (row.type === 'api') {
} else {
this.form.configuration = JSON.parse(this.form.configuration)
}
},
......@@ -583,16 +578,16 @@ export default {
}
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){
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 =>{
form.apiConfiguration.forEach(item => {
delete item.status
})
form.configuration = JSON.stringify(form.apiConfiguration)
}else {
} else {
form.configuration = JSON.stringify(form.configuration)
}
......@@ -652,9 +647,9 @@ export default {
this.$refs.dsForm.validate(valid => {
if (valid) {
const data = JSON.parse(JSON.stringify(this.form))
if(data.type === 'api') {
if (data.type === 'api') {
data.configuration = JSON.stringify(data.apiConfiguration)
}else {
} else {
data.configuration = JSON.stringify(data.configuration)
}
if (data.showModel === 'show' && !this.canEdit) {
......@@ -675,7 +670,7 @@ export default {
if (res.success) {
this.$success(i18n.t('datasource.validate_success'))
} else {
if(data.type === 'api') {
if (data.type === 'api') {
this.form.apiConfiguration = res.data.apiConfiguration
}
if (res.message.length < 2500) {
......@@ -708,23 +703,23 @@ export default {
this.$emit('refresh-type', form)
},
next() {
if(this.active === 1){
if (this.active === 1) {
let hasRepeatName = false
if(this.add_api_item){
if (this.add_api_item) {
this.form.apiConfiguration.forEach(item => {
if(item.name === this.apiItem.name){
if (item.name === this.apiItem.name) {
hasRepeatName = true
}
})
}else {
} 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){
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){
if (hasRepeatName) {
this.$message.error(i18n.t('datasource.has_repeat_name'))
return
}
......@@ -761,7 +756,7 @@ export default {
saveItem() {
this.active = 0
this.edit_api_item = false
if(this.add_api_item){
if (this.add_api_item) {
this.form.apiConfiguration.push(this.apiItem)
}
},
......@@ -770,7 +765,7 @@ export default {
this.add_api_item = false
this.api_table_title = this.$t('datasource.edit_api_table')
this.apiItem = item
}else {
} else {
this.add_api_item = true
this.apiItem = JSON.parse(JSON.stringify(this.defaultApiItem))
this.api_table_title = this.$t('datasource.add_api_table')
......@@ -782,9 +777,9 @@ export default {
this.form.apiConfiguration.splice(this.form.apiConfiguration.indexOf(item), 1)
},
validateApi(item) {
if(undefined){
if (undefined) {
}else {
} else {
this.$refs.apiItem.validate(valid => {
if (valid) {
const data = JSON.parse(JSON.stringify(this.apiItem))
......@@ -810,40 +805,45 @@ export default {
}
</script>
<style scoped>
.el-input {
.el-input {
width: 300px;
}
.el-select {
}
.el-select {
width: 300px;
}
.ms-http-input {
}
.ms-http-input {
width: 500px;
margin-top: 5px;
}
.tip {
}
.tip {
padding: 3px 5px;
font-size: 16px;
border-radius: 0;
border-left: 4px solid #409EFF;
margin: 5px 5px 10px 5px;
}
.el-select>>>input{
}
.el-select >>> input {
padding-right: 10px;
}
.el-select>>>.el-input__suffix{
}
.el-select >>> .el-input__suffix {
right: 0;
}
}
.dialog-css>>>.el-dialog__header {
.dialog-css >>> .el-dialog__header {
padding: 10px 20px 0px;
}
}
.dialog-css>>>.el-dialog__body {
.dialog-css >>> .el-dialog__body {
padding: 10px 20px 10px;
}
}
.dialog-footer>>> .el-dialog__footer {
.dialog-footer >>> .el-dialog__footer {
padding: 10px 10px 10px;
}
}
</style>
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论