center/dataease-dm
center/dataease-dm
13
0
Fork 0
forked from github/dataease
Code Pull Requests Activity

Merge pull request #3156 from dataease/pr@dev_dataset_source

Browse Source 
Pr@dev dataset source
This commit is contained in:
xuwei-fit2cloud 2022-09-22 16:55:29 +08:00 committed by GitHub
commit ce170e6422
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 239 additions and 214 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
frontend/src/views/system/datasource/DsMain.vue
View File

@ -121,10 +121,9 @@ export default {
<style scoped lang="scss"> <style scoped lang="scss">
.de-ds-container { .de-ds-container {
height: 100%; height: 100%;
// height: calc(100vh - 56px);
width: 100%; width: 100%;
overflow: hidden; overflow: hidden;
flex-wrap: wrap; flex-wrap: nowrap;
display: flex; display: flex;
box-sizing: border-box; box-sizing: border-box;
.el-empty { .el-empty {

450
frontend/src/views/system/datasource/DsTree.vue
View File

@ -3,7 +3,7 @@
<el-col> <el-col>
<el-row class="title-css" v-show="showView === 'Datasource'"> <el-row class="title-css" v-show="showView === 'Datasource'">
<el-col class="title-text" :span="12"> <el-col class="title-text" :span="12">
{{ $t("commons.datasource") }} {{ $t('commons.datasource') }}
</el-col> </el-col>
<el-col class="title-operate" :span="12"> <el-col class="title-operate" :span="12">
<el-tooltip <el-tooltip
@ -111,7 +111,11 @@
v-if="data.type === 'folder'" v-if="data.type === 'folder'"
effect="dark" effect="dark"
:content=" :content="
$t(showView === 'Driver' ? 'driver.add' : 'datasource.add_data_source') $t(
showView === 'Driver'
? 'driver.add'
: 'datasource.add_data_source'
)
" "
placement="top" placement="top"
> >
@ -133,11 +137,11 @@
<slot> <slot>
<el-dropdown-item command="edit"> <el-dropdown-item command="edit">
<i class="el-icon-edit"></i> <i class="el-icon-edit"></i>
{{ $t("chart.edit") }} {{ $t('chart.edit') }}
</el-dropdown-item> </el-dropdown-item>
<el-dropdown-item command="delete"> <el-dropdown-item command="delete">
<i class="el-icon-delete"></i> <i class="el-icon-delete"></i>
{{ $t("chart.delete") }} {{ $t('chart.delete') }}
</el-dropdown-item> </el-dropdown-item>
</slot> </slot>
</el-dropdown-menu> </el-dropdown-menu>
@ -166,7 +170,10 @@
:rules="rule" :rules="rule"
> >
<el-form-item :label="$t('datasource.driver_name')" prop="name"> <el-form-item :label="$t('datasource.driver_name')" prop="name">
<el-input v-model="driverForm.name" :placeholder="$t('fu.search_bar.please_input')" /> <el-input
v-model="driverForm.name"
:placeholder="$t('fu.search_bar.please_input')"
/>
</el-form-item> </el-form-item>
<el-form-item :label="$t('datasource.drive_type')" prop="type"> <el-form-item :label="$t('datasource.drive_type')" prop="type">
<el-select <el-select
@ -189,9 +196,9 @@
</el-form-item> </el-form-item>
</el-form> </el-form>
<div slot="footer" class="dialog-footer"> <div slot="footer" class="dialog-footer">
<deBtn secondary @click="close()">{{ $t("commons.cancel") }}</deBtn> <deBtn secondary @click="close()">{{ $t('commons.cancel') }}</deBtn>
<deBtn type="primary" size="mini" @click="saveDriver(driverForm)" <deBtn type="primary" size="mini" @click="saveDriver(driverForm)"
>{{ $t("commons.save") }} >{{ $t('commons.save') }}
</deBtn> </deBtn>
</div> </div>
</el-dialog> </el-dialog>
@ -204,34 +211,43 @@
class="de-dialog-form" class="de-dialog-form"
append-to-body append-to-body
> >
<el-tabs v-model="tabActive" @tab-click="changeTab"> <el-tabs v-model="tabActive">
<el-tab-pane :label="$t('datasource.all')" name="all"> </el-tab-pane> <el-tab-pane :label="$t('datasource.all')" name="all"> </el-tab-pane>
<el-tab-pane :label="$t('datasource.relational_database')" name="reDb"> </el-tab-pane> <el-tab-pane
<el-tab-pane :label="$t('datasource.non_relational_database')" name="noReDb"> :label="$t('datasource.relational_database')"
name="RDBMS"
>
</el-tab-pane>
<el-tab-pane
:label="$t('datasource.non_relational_database')"
name="NORDBMS"
>
</el-tab-pane>
<el-tab-pane :label="$t('datasource.other')" name="OTHER">
</el-tab-pane> </el-tab-pane>
<el-tab-pane :label="$t('datasource.other')" name="other"> </el-tab-pane>
<div class="db-container">
<div
@click="addDb(db)"
v-for="db in dsTypes"
:key="db.type"
class="db-card"
>
<img
src="https://gimg3.baidu.com/search/src=http%3A%2F%2Fgips0.baidu.com%2Fit%2Fu%3D3429312337%2C2430696955%26fm%3D3030%26app%3D3030%26f%3DJPEG%3Fw%3D121%26h%3D74%26s%3D51321C7281B1598818E875C1030010B0&refer=http%3A%2F%2Fwww.baidu.com&app=2021&size=f242,150&n=0&g=0n&q=100&fmt=auto?sec=1662483600&t=53d1d1fe51561bb626c94ce63b5b31b8"
alt=""
/>
<p class="db-name">{{ db.name }}</p>
</div>
</div>
</el-tabs> </el-tabs>
<div class="db-container">
<div
@click="addDb(db)"
v-for="(db, index) in databaseList"
:key="db.type"
class="db-card"
:class="[{ marLeft: index % 4 === 0 }]"
>
<img
src="https://gimg3.baidu.com/search/src=http%3A%2F%2Fgips0.baidu.com%2Fit%2Fu%3D3429312337%2C2430696955%26fm%3D3030%26app%3D3030%26f%3DJPEG%3Fw%3D121%26h%3D74%26s%3D51321C7281B1598818E875C1030010B0&refer=http%3A%2F%2Fwww.baidu.com&app=2021&size=f242,150&n=0&g=0n&q=100&fmt=auto?sec=1662483600&t=53d1d1fe51561bb626c94ce63b5b31b8"
alt=""
/>
<p class="db-name">{{ db.name }}</p>
</div>
</div>
</el-dialog> </el-dialog>
</el-col> </el-col>
</el-col> </el-col>
</template> </template>
<script> <script>
import { mapGetters } from "vuex"; import { mapGetters } from 'vuex'
import i18n from "@/lang"; import i18n from '@/lang'
import { import {
listDatasource, listDatasource,
listDatasourceByType, listDatasourceByType,
@ -241,368 +257,371 @@ import {
addDriver, addDriver,
delDriver, delDriver,
listDriverByType, listDriverByType,
updateDriver, updateDriver
} from "@/api/system/datasource"; } from '@/api/system/datasource'
import { ApplicationContext } from "@/utils/ApplicationContext"; import { ApplicationContext } from '@/utils/ApplicationContext'
import deTextarea from "@/components/deCustomCm/deTextarea.vue"; import deTextarea from '@/components/deCustomCm/deTextarea.vue'
import msgCfm from "@/components/msgCfm"; import msgCfm from '@/components/msgCfm'
export default { export default {
name: "DsTree", name: 'DsTree',
mixins: [msgCfm], mixins: [msgCfm],
components: { deTextarea }, components: { deTextarea },
props: { props: {
datasource: { datasource: {
type: Object, type: Object,
default: null, default: null
}, }
}, },
data() { data() {
return { return {
tabActive: "all", tabActive: 'all',
dsTypeRelate: false, dsTypeRelate: false,
expandedArray: [], expandedArray: [],
tData: [], tData: [],
dsTypes: [], dsTypes: [],
dsTypesForDriver: [], dsTypesForDriver: [],
showSearchInput: false, showSearchInput: false,
key: "", key: '',
showView: "Datasource", showView: 'Datasource',
dialogTitle: "", dialogTitle: '',
editDriver: false, editDriver: false,
driverForm: { driverForm: {
name: "", name: '',
desc: "", desc: '',
type: "", type: ''
}, },
params: {}, params: {},
rule: { rule: {
name: [ name: [
{ {
required: true, required: true,
message: i18n.t("datasource.input_name"), message: i18n.t('datasource.input_name'),
trigger: "blur", trigger: 'blur'
}, },
{ {
min: 2, min: 2,
max: 50, max: 50,
message: i18n.t("datasource.input_limit_2_25", [2, 25]), message: i18n.t('datasource.input_limit_2_25', [2, 25]),
trigger: "blur", trigger: 'blur'
}, }
], ],
desc: [ desc: [
{ {
required: true, required: true,
message: i18n.t("datasource.input_name"), message: i18n.t('datasource.input_name'),
trigger: "blur", trigger: 'blur'
}, },
{ {
min: 2, min: 2,
max: 200, max: 200,
message: i18n.t("datasource.input_limit_2_25", [2, 25]), message: i18n.t('datasource.input_limit_2_25', [2, 25]),
trigger: "blur", trigger: 'blur'
}, }
], ],
type: [ type: [
{ {
required: true, required: true,
message: i18n.t("datasource.please_choose_type"), message: i18n.t('datasource.please_choose_type'),
trigger: "blur", trigger: 'blur'
}, }
], ]
}, }
}; }
}, },
watch: { watch: {
key(val) { key(val) {
this.$refs.myDsTree.filter(val); this.$refs.myDsTree.filter(val)
}, }
}, },
computed: { computed: {
...mapGetters(["user"]), ...mapGetters(['user']),
databaseList() {
if (this.tabActive === 'all') {
return this.dsTypes
}
return this.dsTypes.filter(
(ele) => ele.databaseClassification === this.tabActive
)
}
}, },
created() { created() {
this.queryTreeDatas(); this.queryTreeDatas()
this.datasourceTypes(); this.datasourceTypes()
}, },
methods: { methods: {
changeTab() {},
filterNode(value, data) { filterNode(value, data) {
if (!value) return true; if (!value) return true
return data.name.indexOf(value) !== -1; return data.name.indexOf(value) !== -1
}, },
showSearchWidget() { showSearchWidget() {
this.showSearchInput = true; this.showSearchInput = true
}, },
closeSearchWidget() { closeSearchWidget() {
this.key = ""; this.key = ''
this.showSearchInput = false; this.showSearchInput = false
}, },
queryTreeDatas() { queryTreeDatas() {
if (this.showView === "Datasource") { if (this.showView === 'Datasource') {
listDatasource().then((res) => { listDatasource().then((res) => {
this.tData = this.buildTree(res.data); this.tData = this.buildTree(res.data)
}); })
} }
if (this.showView === "Driver") { if (this.showView === 'Driver') {
listDrivers().then((res) => { listDrivers().then((res) => {
this.tData = this.buildTree(res.data); this.tData = this.buildTree(res.data)
}); })
} }
}, },
datasourceTypes() { datasourceTypes() {
listDatasourceType().then((res) => { listDatasourceType().then((res) => {
this.dsTypes = res.data; this.dsTypes = res.data
this.dsTypes.forEach((item) => { this.dsTypes.forEach((item) => {
if (item.isJdbc) { if (item.isJdbc) {
this.dsTypesForDriver.push(item); this.dsTypesForDriver.push(item)
} }
}); })
}); })
}, },
refreshType(datasource) { refreshType(datasource) {
const method = const method =
this.showView === "Datasource" this.showView === 'Datasource' ? listDatasourceByType : listDriverByType
? listDatasourceByType let typeData = []
: listDriverByType;
let typeData = [];
method(datasource.type).then((res) => { method(datasource.type).then((res) => {
typeData = this.buildTree(res.data); typeData = this.buildTree(res.data)
if (typeData.length === 0) { if (typeData.length === 0) {
const index = this.tData.findIndex((item) => { const index = this.tData.findIndex((item) => {
if (item.id === datasource.type) { if (item.id === datasource.type) {
return true; return true
} }
}); })
this.tData.splice(index, 1); this.tData.splice(index, 1)
} else { } else {
let find = false; let find = false
for (let index = 0; index < this.tData.length; index++) { for (let index = 0; index < this.tData.length; index++) {
if (typeData[0].id === this.tData[index].id) { if (typeData[0].id === this.tData[index].id) {
this.tData[index].children = typeData[0].children; this.tData[index].children = typeData[0].children
for (let i = 0; i < this.tData[index].children.length; i++) { for (let i = 0; i < this.tData[index].children.length; i++) {
if (this.tData[index].children[i].id === datasource.id) { if (this.tData[index].children[i].id === datasource.id) {
this.showInfo({ data: this.tData[index].children[i] }); this.showInfo({ data: this.tData[index].children[i] })
} }
} }
find = true; find = true
} }
} }
if (!find) { if (!find) {
this.tData.push(typeData[0]); this.tData.push(typeData[0])
} }
} }
}); })
}, },
buildTree(array) { buildTree(array) {
const types = {}; const types = {}
const newArr = []; const newArr = []
for (let index = 0; index < array.length; index++) { for (let index = 0; index < array.length; index++) {
const element = array[index]; const element = array[index]
if (this.msgNodeId) { if (this.msgNodeId) {
if (element.id === this.msgNodeId) { if (element.id === this.msgNodeId) {
element.msgNode = true; element.msgNode = true
} }
} }
if (!(element.type in types)) { if (!(element.type in types)) {
types[element.type] = []; types[element.type] = []
newArr.push({ newArr.push({
id: element.type, id: element.type,
name: element.typeDesc, name: element.typeDesc,
type: "folder", type: 'folder',
children: types[element.type], children: types[element.type]
}); })
} }
types[element.type].push(element); types[element.type].push(element)
} }
return newArr; return newArr
}, },
addFolder() { addFolder() {
if (this.showView === "Driver") { if (this.showView === 'Driver') {
this.dialogTitle = this.$t("datasource.add_driver"); this.dialogTitle = this.$t('datasource.add_driver')
this.editDriver = true; this.editDriver = true
this.switchMain("DriverForm", {}, this.tData, this.dsTypes); this.switchMain('DriverForm', {}, this.tData, this.dsTypes)
} else { } else {
this.dsTypeRelate = true; this.dsTypeRelate = true
} }
}, },
addDriver() { addDriver() {
this.dialogTitle = this.$t("datasource.add_driver"); this.dialogTitle = this.$t('datasource.add_driver')
this.editDriver = true; this.editDriver = true
}, },
driverMgm() { driverMgm() {
this.$emit("switch-main", {}); this.$emit('switch-main', {})
this.$emit("switch-mgm", "driverMgm"); this.$emit('switch-mgm', 'driverMgm')
this.showView = "Driver"; this.showView = 'Driver'
this.expandedArray = []; this.expandedArray = []
this.tData = []; this.tData = []
this.queryTreeDatas(); this.queryTreeDatas()
}, },
dsMgm() { dsMgm() {
this.$emit("switch-main", {}); this.$emit('switch-main', {})
this.showView = "Datasource"; this.showView = 'Datasource'
this.expandedArray = []; this.expandedArray = []
this.tData = []; this.tData = []
this.queryTreeDatas(); this.queryTreeDatas()
}, },
addDb({ type }) { addDb({ type }) {
this.$router.push({ this.$router.push({
path: "/ds-form", path: '/ds-form',
query: { type }, query: { type }
}); })
}, },
addFolderWithType(data) { addFolderWithType(data) {
if (this.showView === "Driver") { if (this.showView === 'Driver') {
this.driverForm.type = data.id; this.driverForm.type = data.id
this.dialogTitle = this.$t("datasource.add_driver"); this.dialogTitle = this.$t('datasource.add_driver')
this.editDriver = true; this.editDriver = true
} else { } else {
this.$router.push({ this.$router.push({
path: "/ds-form", path: '/ds-form',
query: { type: data.id }, query: { type: data.id }
}); })
} }
}, },
nodeClick(node, data) { nodeClick(node, data) {
if (node.type === "folder") return; if (node.type === 'folder') return
this.showInfo(data); this.showInfo(data)
}, },
clickFileMore(param) { clickFileMore(param) {
const { optType, data } = param; const { optType, data } = param
switch (optType) { switch (optType) {
case "edit": case 'edit':
this.edit(data); this.edit(data)
break; break
case "delete": case 'delete':
this._handleDelete(data); this._handleDelete(data)
break; break
default: default:
break; break
} }
}, },
showInfo(row) { showInfo(row) {
if (this.showView === "Driver") { if (this.showView === 'Driver') {
const param = { ...row.data, ...{ showModel: "show" } }; const param = { ...row.data, ...{ showModel: 'show' } }
this.switchMain( this.switchMain(
this.showView === "Datasource" ? "DsForm" : "DriverForm", this.showView === 'Datasource' ? 'DsForm' : 'DriverForm',
param, param,
this.tData, this.tData,
this.dsTypes this.dsTypes
); )
} else { } else {
this.switchMain("dsTable", row.data); this.switchMain('dsTable', row.data)
} }
}, },
handleCommand(type, data) { handleCommand(type, data) {
switch (type) { switch (type) {
case "edit": case 'edit':
this._handleEditer(data); this._handleEditer(data)
break; break
case "delete": case 'delete':
this._handleDelete(data); this._handleDelete(data)
break; break
default: default:
break; break
} }
}, },
_handleEditer(row) { _handleEditer(row) {
if (this.showView === "Datasource") { if (this.showView === 'Datasource') {
const param = { ...row, ...{ showModel: "show" } }; const param = { ...row, ...{ showModel: 'show' } }
this.switchMain( this.switchMain('DsForm', param, this.tData, this.dsTypes)
'DsForm',
param,
this.tData,
this.dsTypes
);
return return
} }
this.editDriver = true; this.editDriver = true
this.dialogTitle = this.$t('datasource.edit_driver'); this.dialogTitle = this.$t('datasource.edit_driver')
this.driverForm = row; this.driverForm = row
}, },
_handleDelete(datasource) { _handleDelete(datasource) {
const params = { const params = {
title: this.showView === "Datasource" ? 'datasource.this_data_source' : 'datasource.delete_this_driver', title:
this.showView === 'Datasource'
? 'datasource.this_data_source'
: 'datasource.delete_this_driver',
cb: () => { cb: () => {
let method = delDriver; let method = delDriver
let parma = { type: datasource.type, id: datasource.id }; let parma = { type: datasource.type, id: datasource.id }
if (this.showView === "Datasource") { if (this.showView === 'Datasource') {
method = delDs; method = delDs
parma = datasource.id; parma = datasource.id
} }
method(parma).then((res) => { method(parma).then((res) => {
if (res.success) { if (res.success) {
this.openMessageSuccess("commons.delete_success"); this.openMessageSuccess('commons.delete_success')
this.switchMain("", {}, this.tData, this.dsTypes); this.switchMain('', {}, this.tData, this.dsTypes)
this.refreshType(datasource); this.refreshType(datasource)
} else { } else {
this.openMessageSuccess(res.message, "error") this.openMessageSuccess(res.message, 'error')
} }
}); })
} }
} }
this.handlerConfirm(params) this.handlerConfirm(params)
}, },
switchMain(component, componentParam, tData, dsTypes) { switchMain(component, componentParam, tData, dsTypes) {
if (component === "DsForm") { if (component === 'DsForm') {
const { id, type, showModel } = componentParam; const { id, type, showModel } = componentParam
this.$router.push({ this.$router.push({
path: "/ds-form", path: '/ds-form',
query: { query: {
id, id,
type, type,
showModel, showModel,
msgNodeId: this.msgNodeId, msgNodeId: this.msgNodeId
}, }
}); })
return; return
} }
this.$emit("switch-main", { this.$emit('switch-main', {
component, component,
componentParam, componentParam,
tData, tData,
dsTypes, dsTypes
}); })
}, },
markInvalid(msgParam) { markInvalid(msgParam) {
const param = JSON.parse(msgParam); const param = JSON.parse(msgParam)
const msgNodeId = param.id; const msgNodeId = param.id
this.msgNodeId = msgNodeId; this.msgNodeId = msgNodeId
this.$nextTick(() => { this.$nextTick(() => {
this.tData.forEach((folder) => { this.tData.forEach((folder) => {
const nodes = folder.children; const nodes = folder.children
nodes.forEach((node) => { nodes.forEach((node) => {
if (node.id === msgNodeId) { if (node.id === msgNodeId) {
node.msgNode = true; node.msgNode = true
} }
}); })
}); })
}); })
}, },
close() { close() {
this.$refs["driverForm"].resetFields(); this.$refs['driverForm'].resetFields()
this.editDriver = false; this.editDriver = false
this.driverForm = { this.driverForm = {
name: "", name: '',
desc: "", desc: '',
type: "", type: ''
}; }
}, },
saveDriver(driverForm) { saveDriver(driverForm) {
this.$refs["driverForm"].validate((valid) => { this.$refs['driverForm'].validate((valid) => {
if (valid) { if (valid) {
const req = driverForm.id ? updateDriver : addDriver; const req = driverForm.id ? updateDriver : addDriver
req(driverForm).then((res) => { req(driverForm).then((res) => {
this.openMessageSuccess("dataset.save_success") this.openMessageSuccess('dataset.save_success')
this.refreshType(driverForm); this.refreshType(driverForm)
this.close(); this.close()
}); })
} else { } else {
return false; return false
} }
}); })
}, }
}, }
}; }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.custom-tree-container { .custom-tree-container {
@ -660,8 +679,10 @@ export default {
max-height: 674px; max-height: 674px;
overflow-y: auto; overflow-y: auto;
display: flex; display: flex;
justify-content: space-between;
flex-wrap: wrap; flex-wrap: wrap;
margin-top: -3px;
position: relative;
z-index: 10;
.db-card { .db-card {
height: 193px; height: 193px;
width: 270px; width: 270px;
@ -670,7 +691,8 @@ export default {
background: #ffffff; background: #ffffff;
border: 1px solid #dee0e3; border: 1px solid #dee0e3;
border-radius: 4px; border-radius: 4px;
margin-top: 24px; margin-bottom: 24px;
margin-left: 22px;
img { img {
width: 100%; width: 100%;
height: 154.58px; height: 154.58px;
@ -689,5 +711,9 @@ export default {
box-shadow: 0px 6px 24px rgba(31, 35, 41, 0.08); box-shadow: 0px 6px 24px rgba(31, 35, 41, 0.08);
} }
} }
.marLeft {
margin-left: 0;
}
} }
</style> </style>