forked from github/dataease
feat: 数据源展示方式改为统一风格树
This commit is contained in:
fit2cloud-chenyw
parent
f2f698b2d1
commit
fb0d195aa3
@ -8,7 +8,13 @@ export function dsGrid(pageIndex, pageSize, data) {
|
||||
data
|
||||
})
|
||||
}
|
||||
|
||||
export function listDatasource() {
|
||||
return request({
|
||||
url: '/datasource/list',
|
||||
loading: true,
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
export function addDs(data) {
|
||||
return request({
|
||||
url: 'datasource/add/',
|
||||
@ -40,4 +46,4 @@ export function validateDs(data) {
|
||||
})
|
||||
}
|
||||
|
||||
export default { dsGrid, addDs, editDs, delDs, validateDs }
|
||||
export default { dsGrid, addDs, editDs, delDs, validateDs, listDatasource }
|
||||
|
||||
@ -846,6 +846,8 @@ export default {
|
||||
},
|
||||
datasource: {
|
||||
datasource: 'Data Source',
|
||||
please_select_left: 'Please select the data source from the left',
|
||||
show_info: 'Data Source Info',
|
||||
create: 'Create Data Source',
|
||||
type: 'Type',
|
||||
please_choose_type: 'Please select data source type',
|
||||
|
||||
@ -846,6 +846,8 @@ export default {
|
||||
},
|
||||
datasource: {
|
||||
datasource: '數據源',
|
||||
please_select_left: '請從左側選擇數據源',
|
||||
show_info: '數據源信息',
|
||||
create: '新建數據源',
|
||||
type: '類型',
|
||||
please_choose_type: '請選擇數據源類型',
|
||||
|
||||
@ -846,6 +846,8 @@ export default {
|
||||
},
|
||||
datasource: {
|
||||
datasource: '数据源',
|
||||
please_select_left: '请从左侧选择数据源',
|
||||
show_info: '数据源信息',
|
||||
create: '新建数据源',
|
||||
type: '类型',
|
||||
please_choose_type: '请选择数据源类型',
|
||||
|
||||
25
frontend/src/views/system/datasource/DataHome.vue
Normal file
25
frontend/src/views/system/datasource/DataHome.vue
Normal file
@ -0,0 +1,25 @@
|
||||
<template>
|
||||
<el-col style="height: 100%;">
|
||||
<el-row style="height: 100%;" class="custom-position">
|
||||
{{ $t('datasource.please_select_left') }}
|
||||
</el-row>
|
||||
</el-col>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'DataHome'
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.custom-position {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
font-size: 14px;
|
||||
flex-flow: row nowrap;
|
||||
color: #9ea6b2;
|
||||
}
|
||||
</style>
|
||||
89
frontend/src/views/system/datasource/DsMain.vue
Normal file
89
frontend/src/views/system/datasource/DsMain.vue
Normal file
@ -0,0 +1,89 @@
|
||||
<template>
|
||||
<de-container>
|
||||
<de-aside-container style="padding: 0 10px;">
|
||||
<ds-tree @switch-main="switchMain" />
|
||||
</de-aside-container>
|
||||
<de-main-container>
|
||||
<component :is="component" v-if="!!component" :params="param" @switch-component="switchMain" />
|
||||
</de-main-container>
|
||||
</de-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import DeMainContainer from '@/components/dataease/DeMainContainer'
|
||||
import DeContainer from '@/components/dataease/DeContainer'
|
||||
import DeAsideContainer from '@/components/dataease/DeAsideContainer'
|
||||
import DsTree from './DsTree'
|
||||
import DsForm from './form'
|
||||
import DataHome from './DataHome'
|
||||
export default {
|
||||
name: 'DsMain',
|
||||
components: { DeMainContainer, DeContainer, DeAsideContainer, DsTree, DataHome },
|
||||
data() {
|
||||
return {
|
||||
component: DataHome,
|
||||
param: null
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
|
||||
},
|
||||
watch: {
|
||||
|
||||
},
|
||||
mounted() {
|
||||
// this.clear()
|
||||
},
|
||||
methods: {
|
||||
// 切换main区内容
|
||||
switchMain(param) {
|
||||
const { component, componentParam } = param
|
||||
|
||||
switch (component) {
|
||||
case 'DsForm':
|
||||
this.component = DsForm
|
||||
this.param = componentParam
|
||||
break
|
||||
default:
|
||||
this.component = DataHome
|
||||
this.param = null
|
||||
break
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.ms-aside-container {
|
||||
height: calc(100vh - 56px);
|
||||
padding: 0px;
|
||||
min-width: 260px;
|
||||
max-width: 460px;
|
||||
}
|
||||
.ms-main-container {
|
||||
height: calc(100vh - 56px);
|
||||
padding: 0px;
|
||||
}
|
||||
|
||||
/*.tab-panel>>>.is-stretch{*/
|
||||
/* min-width: 80% !important;*/
|
||||
/*}*/
|
||||
/*.tab-panel>>>.el-tabs__nav-scroll {*/
|
||||
/* overflow: hidden;*/
|
||||
/* text-align: center;*/
|
||||
/* display: flex;*/
|
||||
/* align-items: center;*/
|
||||
/* justify-content: center;*/
|
||||
/*}*/
|
||||
.tab-panel>>>.el-tabs__nav-wrap{
|
||||
padding: 0 10px;
|
||||
}
|
||||
.tab-panel>>>.el-tabs__nav-wrap::after {
|
||||
height: 1px;
|
||||
}
|
||||
.tab-panel>>>.el-tabs__item{
|
||||
/* width: 10px; */
|
||||
padding: 0 10px;
|
||||
}
|
||||
</style>
|
||||
207
frontend/src/views/system/datasource/DsTree.vue
Normal file
207
frontend/src/views/system/datasource/DsTree.vue
Normal file
@ -0,0 +1,207 @@
|
||||
<template>
|
||||
<el-col style="padding: 0 5px 0 5px;">
|
||||
<el-col>
|
||||
<el-row>
|
||||
<span class="header-title">
|
||||
{{ $t('commons.datasource') }}
|
||||
<el-button style="float: right;padding-right: 7px;margin-top: -8px" icon="el-icon-plus" type="text" @click="addFolder" />
|
||||
</span>
|
||||
</el-row>
|
||||
<el-col class="custom-tree-container">
|
||||
<div class="block">
|
||||
<el-tree
|
||||
ref="panel_list_tree"
|
||||
:default-expanded-keys="expandedArray"
|
||||
:data="tData"
|
||||
node-key="id"
|
||||
:expand-on-click-node="true"
|
||||
@node-click="nodeClick"
|
||||
>
|
||||
<span slot-scope="{ node, data }" class="custom-tree-node-list father">
|
||||
<span style="display: flex; flex: 1 1 0%; width: 0px;">
|
||||
<span v-if="data.type !== 'folder'">
|
||||
<svg-icon icon-class="panel" class="ds-icon-scene" />
|
||||
</span>
|
||||
<span v-if="data.type === 'folder'">
|
||||
<i class="el-icon-folder" />
|
||||
</span>
|
||||
<span style="margin-left: 6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;">{{ data.name }}</span>
|
||||
</span>
|
||||
<span class="child">
|
||||
<span v-if="data.type ==='folder'" @click.stop>
|
||||
<span class="el-dropdown-link">
|
||||
<el-button
|
||||
icon="el-icon-plus"
|
||||
type="text"
|
||||
size="small"
|
||||
@click="addFolderWithType(data)"
|
||||
/>
|
||||
</span>
|
||||
|
||||
</span>
|
||||
<span v-if="data.type !=='folder'" style="margin-left: 12px;" @click.stop>
|
||||
<el-dropdown trigger="click" size="small" @command="clickFileMore">
|
||||
<span class="el-dropdown-link">
|
||||
<el-button
|
||||
icon="el-icon-more"
|
||||
type="text"
|
||||
size="small"
|
||||
/>
|
||||
</span>
|
||||
<el-dropdown-menu slot="dropdown">
|
||||
<el-dropdown-item icon="el-icon-edit" :command="beforeClickFile('edit',data,node)">
|
||||
{{ $t('panel.edit') }}
|
||||
</el-dropdown-item>
|
||||
|
||||
<el-dropdown-item icon="el-icon-delete" :command="beforeClickFile('delete',data,node)">
|
||||
{{ $t('panel.delete') }}
|
||||
</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</el-dropdown>
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
</el-tree>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-col>
|
||||
</el-col>
|
||||
</template>
|
||||
<script>
|
||||
import { listDatasource, delDs } from '@/api/system/datasource'
|
||||
export default {
|
||||
name: 'DsTree',
|
||||
data() {
|
||||
return {
|
||||
expandedArray: [],
|
||||
tData: []
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.queryTreeDatas()
|
||||
},
|
||||
methods: {
|
||||
queryTreeDatas() {
|
||||
listDatasource().then(res => {
|
||||
this.tData = this.buildTree(res.data)
|
||||
})
|
||||
},
|
||||
buildTree(array) {
|
||||
const types = {}
|
||||
const newArr = []
|
||||
for (let index = 0; index < array.length; index++) {
|
||||
const element = array[index]
|
||||
if (!(element.type in types)) {
|
||||
types[element.type] = []
|
||||
// newArr.push(...element, ...{ children: types[element.type] })
|
||||
newArr.push({ id: element.type, name: element.type, type: 'folder', children: types[element.type] })
|
||||
}
|
||||
types[element.type].push(element)
|
||||
// newArr.children.push({ id: element.id, label: element.name })
|
||||
}
|
||||
return newArr
|
||||
},
|
||||
|
||||
addFolder() {
|
||||
this.switchMain('DsForm')
|
||||
},
|
||||
addFolderWithType(data) {
|
||||
this.switchMain('DsForm', { type: data.id })
|
||||
},
|
||||
nodeClick(node, data) {
|
||||
if (node.type === 'folder') return
|
||||
this.showInfo(data)
|
||||
},
|
||||
|
||||
clickFileMore(param) {
|
||||
const { optType, data } = param
|
||||
switch (optType) {
|
||||
case 'edit':
|
||||
this.edit(data)
|
||||
break
|
||||
case 'delete':
|
||||
this._handleDelete(data)
|
||||
break
|
||||
default:
|
||||
break
|
||||
}
|
||||
},
|
||||
beforeClickFile(optType, data, node) {
|
||||
return { optType, data, node }
|
||||
},
|
||||
edit(row) {
|
||||
this.switchMain('DsForm', row)
|
||||
},
|
||||
showInfo(row) {
|
||||
const param = { ...row.data, ...{ showModel: 'show' }}
|
||||
this.switchMain('DsForm', param)
|
||||
},
|
||||
_handleDelete(datasource) {
|
||||
this.$confirm(this.$t('datasource.delete_warning'), '', {
|
||||
confirmButtonText: this.$t('commons.confirm'),
|
||||
cancelButtonText: this.$t('commons.cancel'),
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
delDs(datasource.id).then(res => {
|
||||
this.$success(this.$t('commons.delete_success'))
|
||||
this.search()
|
||||
})
|
||||
}).catch(() => {
|
||||
this.$message({
|
||||
type: 'info',
|
||||
message: this.$t('commons.delete_cancelled')
|
||||
})
|
||||
})
|
||||
},
|
||||
switchMain(component, componentParam) {
|
||||
this.$emit('switch-main', {
|
||||
component,
|
||||
componentParam
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.header-title {
|
||||
font-size: 14px;
|
||||
flex: 1;
|
||||
color: #606266;
|
||||
font-weight: bold;
|
||||
display: block;
|
||||
height: 100%;
|
||||
/*line-height: 36px;*/
|
||||
}
|
||||
|
||||
.custom-tree-node {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
font-size: 14px;
|
||||
padding-right:8px;
|
||||
}
|
||||
|
||||
.custom-tree-node-list {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
font-size: 14px;
|
||||
padding:0 8px;
|
||||
}
|
||||
|
||||
.dialog-css>>>.el-dialog__body {
|
||||
padding: 15px 20px;
|
||||
}
|
||||
.dialog-css >>>.el-dialog__body {
|
||||
padding: 10px 20px 20px;
|
||||
}
|
||||
|
||||
.father .child {
|
||||
display: none;
|
||||
}
|
||||
.father:hover .child {
|
||||
display: inline;
|
||||
}
|
||||
</style>
|
||||
@ -1,6 +1,10 @@
|
||||
<template>
|
||||
<layout-content :header="formType=='add' ? $t('datasource.create') : $t('datasource.modify')" back-name="datasource">
|
||||
<el-form ref="dsForm" :model="form" :rules="rule" size="small" label-width="auto" label-position="right">
|
||||
<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' ? $t('datasource.show_info') : formType=='add' ? $t('datasource.create') : $t('datasource.modify') }}
|
||||
</template>
|
||||
<el-form ref="dsForm" :model="form" :rules="rule" size="small" :disabled="params && params.id && params.showModel && params.showModel === 'show'" label-width="auto" label-position="right">
|
||||
<el-form-item :label="$t('commons.name')" prop="name">
|
||||
<el-input v-model="form.name" autocomplete="off" />
|
||||
</el-form-item>
|
||||
@ -35,7 +39,7 @@
|
||||
<el-input v-model="form.configuration.port" autocomplete="off" />
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item>
|
||||
<el-form-item v-if="!(params && params.id && params.showModel && params.showModel === 'show')">
|
||||
<el-button @click="validaDatasource">{{ $t('commons.validate') }}</el-button>
|
||||
<el-button type="primary" @click="save">{{ $t('commons.save') }}</el-button>
|
||||
</el-form-item>
|
||||
@ -48,8 +52,14 @@
|
||||
import LayoutContent from '@/components/business/LayoutContent'
|
||||
import { addDs, editDs, validateDs } from '@/api/system/datasource'
|
||||
export default {
|
||||
|
||||
name: 'DsForm',
|
||||
components: { LayoutContent },
|
||||
props: {
|
||||
params: {
|
||||
type: Object,
|
||||
default: null
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
form: { configuration: {}},
|
||||
@ -71,13 +81,27 @@ export default {
|
||||
},
|
||||
|
||||
created() {
|
||||
if (this.$router.currentRoute.params && this.$router.currentRoute.params.id) {
|
||||
const row = this.$router.currentRoute.params
|
||||
// if (this.$router.currentRoute.params && this.$router.currentRoute.params.id) {
|
||||
// const row = this.$router.currentRoute.params
|
||||
// this.edit(row)
|
||||
// } else {
|
||||
// this.create()
|
||||
// }
|
||||
if (this.params && this.params.id) {
|
||||
const row = this.params
|
||||
this.edit(row)
|
||||
} else {
|
||||
this.create()
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
// if (this.params && this.params.type) {
|
||||
// this.form.type = this.params.type
|
||||
// this.$nextTick(() => {
|
||||
// this.changeType()
|
||||
// })
|
||||
// }
|
||||
},
|
||||
methods: {
|
||||
create() {
|
||||
this.formType = 'add'
|
||||
@ -129,8 +153,23 @@ export default {
|
||||
}
|
||||
},
|
||||
backToList() {
|
||||
this.$router.push({ name: 'datasource' })
|
||||
this.$emit('switch-component', { })
|
||||
// this.$router.push({ name: 'datasource' })
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
@import "~@/styles/mixin.scss";
|
||||
@import "~@/styles/variables.scss";
|
||||
|
||||
.back-button {
|
||||
cursor: pointer;
|
||||
margin-right: 10px;
|
||||
font-weight: 600;
|
||||
|
||||
&:active {
|
||||
transform: scale(0.85);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,286 +1,46 @@
|
||||
<template>
|
||||
<layout-content v-loading="$store.getters.loadingMap[$store.getters.currentPath]">
|
||||
<complex-table
|
||||
:data="data"
|
||||
:columns="columns"
|
||||
|
||||
:search-config="searchConfig"
|
||||
:pagination-config="paginationConfig"
|
||||
@select="select"
|
||||
@search="search"
|
||||
>
|
||||
|
||||
<template #toolbar>
|
||||
<!-- <fu-table-button v-permission="['datasource:add']" icon="el-icon-circle-plus-outline" :label="$t('datasource.create')" @click="create" /> -->
|
||||
<el-button v-permission="['datasource:add']" icon="el-icon-circle-plus-outline" @click="create">{{ $t('datasource.create') }}</el-button>
|
||||
</template>
|
||||
|
||||
<!-- <el-table-column type="selection" fix /> -->
|
||||
<el-table-column prop="name" :label="$t('commons.name')" />
|
||||
<el-table-column prop="desc" :label="$t('commons.description')" />
|
||||
<el-table-column prop="type" :label="$t('datasource.type')">
|
||||
<template slot-scope="scope">
|
||||
<span v-if="scope.row.type ==='mysql'">MySQL</span>
|
||||
<span v-if="scope.row.type ==='sqlServer'">SQL Server</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<fu-table-operations :buttons="buttons" :label="$t('commons.operating')" fix />
|
||||
|
||||
</complex-table>
|
||||
|
||||
<!-- add datasource form -->
|
||||
<el-dialog
|
||||
:close-on-click-modal="false"
|
||||
:title="formType=='add' ? $t('datasource.create') : $t('datasource.modify')"
|
||||
:visible.sync="dialogVisible"
|
||||
width="30%"
|
||||
:destroy-on-close="true"
|
||||
@closed="closeFunc"
|
||||
>
|
||||
<el-form ref="createDatasource" :model="form" label-position="right" label-width="100px" size="small">
|
||||
<el-form-item
|
||||
:label="$t('commons.name')"
|
||||
prop="name"
|
||||
:rules="[{required: true, message: this.$t('datasource.input_name'), trigger: 'blur'},
|
||||
{min: 2, max: 25, message: this.$t('commons.input_limit', [2, 25]), trigger: 'blur'}]"
|
||||
>
|
||||
<el-input v-model="form.name" autocomplete="off" />
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
:label="$t('commons.description')"
|
||||
prop="desc"
|
||||
:rules="[{required: true, message: this.$t('datasource.input_desc'), trigger: 'blur'},
|
||||
{min: 2, max: 50, message: this.$t('commons.input_limit', [2, 50]), trigger: 'blur'}]"
|
||||
>
|
||||
<el-input v-model="form.desc" autocomplete="off" type="textarea" />
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('datasource.type')" prop="type" :rules="{required: true, message: $t('datasource.please_choose_type'), trigger: 'change'}">
|
||||
<el-select v-model="form.type" :placeholder="$t('datasource.please_choose_type')" class="select-width" @change="changeType()">
|
||||
<el-option
|
||||
v-for="item in allTypes"
|
||||
:key="item.name"
|
||||
:label="item.name"
|
||||
:value="item.name"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item v-show="form.configuration.dataSourceType=='jdbc'" :label="$t('datasource.data_base')" prop="configuration.dataBase" :rules="{required: true, message: $t('datasource.please_input_data_base'), trigger: 'blur'}">
|
||||
<el-input v-model="form.configuration.dataBase" autocomplete="off" />
|
||||
</el-form-item>
|
||||
<el-form-item v-show="form.configuration.dataSourceType=='jdbc'" :label="$t('datasource.user_name')" prop="configuration.username" :rules="{required: true, message: $t('datasource.please_input_user_name'), trigger: 'blur'}">
|
||||
<el-input v-model="form.configuration.username" autocomplete="off" />
|
||||
</el-form-item>
|
||||
<el-form-item v-show="form.configuration.dataSourceType=='jdbc'" :label="$t('datasource.password')" prop="configuration.password" :rules="{required: true, message: $t('datasource.please_input_password'), trigger: 'change'}">
|
||||
<el-input v-model="form.configuration.password" autocomplete="off" />
|
||||
</el-form-item>
|
||||
<el-form-item v-show="form.configuration.dataSourceType=='jdbc'" :label="$t('datasource.host')" prop="configuration.host" :rules="{required: true, message: $t('datasource.please_input_host'), trigger: 'change'}">
|
||||
<el-input v-model="form.configuration.host" autocomplete="off" />
|
||||
</el-form-item>
|
||||
<el-form-item v-show="form.configuration.dataSourceType=='jdbc'" :label="$t('datasource.port')" prop="configuration.port" :rules="{required: true, message: $t('datasource.please_input_port'), trigger: 'change'}">
|
||||
<el-input v-model="form.configuration.port" autocomplete="off" />
|
||||
</el-form-item>
|
||||
|
||||
</el-form>
|
||||
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button type="text" @click="dialogVisible = false">{{ $t('commons.cancel') }}</el-button>
|
||||
<el-button type="primary" @click="validaDatasource('createDatasource')">{{ $t('commons.validate') }}</el-button>
|
||||
<el-button type="primary" @click="saveDatasource('createDatasource')">{{ $t('commons.confirm') }}</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
|
||||
</layout-content>
|
||||
<de-container v-loading="$store.getters.loadingMap[$store.getters.currentPath]" style="background-color: #f7f8fa">
|
||||
<de-main-container>
|
||||
<ds-main />
|
||||
</de-main-container>
|
||||
</de-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
import LayoutContent from '@/components/business/LayoutContent'
|
||||
import ComplexTable from '@/components/business/complex-table'
|
||||
import { hasDataPermission } from '@/utils/permission'
|
||||
import { formatCondition } from '@/utils/index'
|
||||
import { dsGrid, addDs, editDs, delDs, validateDs } from '@/api/system/datasource'
|
||||
import DeMainContainer from '@/components/dataease/DeMainContainer'
|
||||
import DeContainer from '@/components/dataease/DeContainer'
|
||||
import DsMain from './DsMain'
|
||||
|
||||
export default {
|
||||
name: 'DEDatasource',
|
||||
components: {
|
||||
LayoutContent,
|
||||
ComplexTable
|
||||
},
|
||||
name: 'Panel',
|
||||
components: { DeMainContainer, DeContainer, DsMain },
|
||||
data() {
|
||||
return {
|
||||
formType: 'add',
|
||||
dialogVisible: false,
|
||||
data: [],
|
||||
form: { configuration: {}},
|
||||
allTypes: [{ name: 'mysql', type: 'jdbc' }, { name: 'sqlServer', type: 'jdbc' }],
|
||||
rule: {
|
||||
name: [
|
||||
{ required: true, message: this.$t('organization.input_name'), trigger: 'blur' },
|
||||
{ min: 2, max: 25, message: this.$t('commons.input_limit', [2, 25]), trigger: 'blur' }
|
||||
],
|
||||
desc: [
|
||||
{ required: true, message: this.$t('organization.input_name'), trigger: 'blur' },
|
||||
{ max: 50, message: this.$t('commons.input_limit', [0, 50]), trigger: 'blur' }
|
||||
]
|
||||
},
|
||||
header: '',
|
||||
columns: [],
|
||||
buttons: [
|
||||
{
|
||||
label: this.$t('commons.edit'), icon: 'el-icon-edit', type: 'primary', click: this.edit,
|
||||
show: true,
|
||||
disabled: (row) => {
|
||||
return !hasDataPermission('manage', row.privileges)
|
||||
}
|
||||
}, {
|
||||
label: this.$t('commons.delete'), icon: 'el-icon-delete', type: 'danger', click: this._handleDelete,
|
||||
show: true,
|
||||
disabled: (row) => {
|
||||
return !hasDataPermission('manage', row.privileges)
|
||||
}
|
||||
}
|
||||
],
|
||||
searchConfig: {
|
||||
useQuickSearch: true,
|
||||
quickPlaceholder: this.$t('commons.search_by_name'),
|
||||
combine: false,
|
||||
components: [
|
||||
{ field: 'name', label: this.$t('commons.name'), component: 'FuComplexInput' },
|
||||
{
|
||||
field: 'type',
|
||||
label: this.$t('datasource.type'),
|
||||
component: 'FuComplexSelect',
|
||||
options: [{ label: 'MySQL', value: 'mysql' }, { label: 'SQL Server', value: 'sqlServer' }],
|
||||
multiple: false
|
||||
}
|
||||
// { field: 'deptId', label: '组织', component: conditionTable }
|
||||
]
|
||||
},
|
||||
paginationConfig: {
|
||||
currentPage: 1,
|
||||
pageSize: 10,
|
||||
total: 0
|
||||
}
|
||||
component: DsMain,
|
||||
componentName: 'DsMain',
|
||||
param: {}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.search()
|
||||
|
||||
},
|
||||
methods: {
|
||||
select(selection) {
|
||||
// console.log(selection)
|
||||
},
|
||||
// create() {
|
||||
// this.formType = 'add'
|
||||
// this.dialogVisible = true
|
||||
// },
|
||||
create() {
|
||||
this.$router.push({ name: 'datasource-form' })
|
||||
},
|
||||
|
||||
// edit(row) {
|
||||
// this.formType = 'modify'
|
||||
// this.dialogVisible = true
|
||||
// this.form = Object.assign({}, row)
|
||||
// this.form.configuration = JSON.parse(this.form.configuration)
|
||||
// },
|
||||
edit(row) {
|
||||
this.$router.push({ name: 'datasource-form', params: row })
|
||||
},
|
||||
|
||||
_handleDelete(datasource) {
|
||||
this.$confirm(this.$t('datasource.delete_warning'), '', {
|
||||
confirmButtonText: this.$t('commons.confirm'),
|
||||
cancelButtonText: this.$t('commons.cancel'),
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
delDs(datasource.id).then(res => {
|
||||
this.$success(this.$t('commons.delete_success'))
|
||||
this.search()
|
||||
})
|
||||
}).catch(() => {
|
||||
this.$message({
|
||||
type: 'info',
|
||||
message: this.$t('commons.delete_cancelled')
|
||||
})
|
||||
})
|
||||
},
|
||||
saveDatasource(createDatasourceForm) {
|
||||
this.$refs[createDatasourceForm].validate(valid => {
|
||||
if (valid) {
|
||||
const method = this.formType === 'add' ? addDs : editDs
|
||||
this.form.configuration = JSON.stringify(this.form.configuration)
|
||||
method(this.form).then(res => {
|
||||
this.$success(this.$t('commons.save_success'))
|
||||
this.search()
|
||||
this.dialogVisible = false
|
||||
})
|
||||
} else {
|
||||
return false
|
||||
}
|
||||
})
|
||||
},
|
||||
validaDatasource(datasourceForm) {
|
||||
this.$refs[datasourceForm].validate(valid => {
|
||||
if (valid) {
|
||||
const data = JSON.parse(JSON.stringify(this.form))
|
||||
data.configuration = JSON.stringify(data.configuration)
|
||||
|
||||
validateDs(data).then(res => {
|
||||
this.$success(this.$t('datasource.validate_success'))
|
||||
})
|
||||
} 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
|
||||
}
|
||||
}
|
||||
},
|
||||
quick_condition(condition) {
|
||||
const result = {}
|
||||
if (condition && condition.quick) {
|
||||
for (const [key, value] of Object.entries(condition)) {
|
||||
if (`${key}` === 'quick') {
|
||||
const v_new = Object.assign({}, value)
|
||||
v_new['field'] = 'name'
|
||||
result['name'] = v_new
|
||||
} else {
|
||||
result[`${key}`] = value
|
||||
}
|
||||
}
|
||||
return result
|
||||
}
|
||||
return Object.assign({}, condition)
|
||||
},
|
||||
search(condition) {
|
||||
const temp_param = this.quick_condition(condition)
|
||||
const temp = formatCondition(temp_param)
|
||||
const param = temp || {}
|
||||
const { currentPage, pageSize } = this.paginationConfig
|
||||
dsGrid(currentPage, pageSize, param).then(response => {
|
||||
this.data = response.data.listObject
|
||||
this.paginationConfig.total = response.data.itemCount
|
||||
})
|
||||
},
|
||||
|
||||
closeFunc() {
|
||||
this.formType = 'add'
|
||||
// this.search()
|
||||
this.form = { configuration: {}}
|
||||
this.dialogVisible = false
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.ms-aside-container {
|
||||
height: calc(100vh - 56px);
|
||||
padding: 0px;
|
||||
min-width: 260px;
|
||||
max-width: 460px;
|
||||
}
|
||||
|
||||
.ms-main-container {
|
||||
height: calc(100vh - 56px);
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
286
frontend/src/views/system/datasource/index2.vue
Normal file
286
frontend/src/views/system/datasource/index2.vue
Normal file
@ -0,0 +1,286 @@
|
||||
<template>
|
||||
<layout-content v-loading="$store.getters.loadingMap[$store.getters.currentPath]">
|
||||
<complex-table
|
||||
:data="data"
|
||||
:columns="columns"
|
||||
|
||||
:search-config="searchConfig"
|
||||
:pagination-config="paginationConfig"
|
||||
@select="select"
|
||||
@search="search"
|
||||
>
|
||||
|
||||
<template #toolbar>
|
||||
<!-- <fu-table-button v-permission="['datasource:add']" icon="el-icon-circle-plus-outline" :label="$t('datasource.create')" @click="create" /> -->
|
||||
<el-button v-permission="['datasource:add']" icon="el-icon-circle-plus-outline" @click="create">{{ $t('datasource.create') }}</el-button>
|
||||
</template>
|
||||
|
||||
<!-- <el-table-column type="selection" fix /> -->
|
||||
<el-table-column prop="name" :label="$t('commons.name')" />
|
||||
<el-table-column prop="desc" :label="$t('commons.description')" />
|
||||
<el-table-column prop="type" :label="$t('datasource.type')">
|
||||
<template slot-scope="scope">
|
||||
<span v-if="scope.row.type ==='mysql'">MySQL</span>
|
||||
<span v-if="scope.row.type ==='sqlServer'">SQL Server</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<fu-table-operations :buttons="buttons" :label="$t('commons.operating')" fix />
|
||||
|
||||
</complex-table>
|
||||
|
||||
<!-- add datasource form -->
|
||||
<el-dialog
|
||||
:close-on-click-modal="false"
|
||||
:title="formType=='add' ? $t('datasource.create') : $t('datasource.modify')"
|
||||
:visible.sync="dialogVisible"
|
||||
width="30%"
|
||||
:destroy-on-close="true"
|
||||
@closed="closeFunc"
|
||||
>
|
||||
<el-form ref="createDatasource" :model="form" label-position="right" label-width="100px" size="small">
|
||||
<el-form-item
|
||||
:label="$t('commons.name')"
|
||||
prop="name"
|
||||
:rules="[{required: true, message: this.$t('datasource.input_name'), trigger: 'blur'},
|
||||
{min: 2, max: 25, message: this.$t('commons.input_limit', [2, 25]), trigger: 'blur'}]"
|
||||
>
|
||||
<el-input v-model="form.name" autocomplete="off" />
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
:label="$t('commons.description')"
|
||||
prop="desc"
|
||||
:rules="[{required: true, message: this.$t('datasource.input_desc'), trigger: 'blur'},
|
||||
{min: 2, max: 50, message: this.$t('commons.input_limit', [2, 50]), trigger: 'blur'}]"
|
||||
>
|
||||
<el-input v-model="form.desc" autocomplete="off" type="textarea" />
|
||||
</el-form-item>
|
||||
<el-form-item :label="$t('datasource.type')" prop="type" :rules="{required: true, message: $t('datasource.please_choose_type'), trigger: 'change'}">
|
||||
<el-select v-model="form.type" :placeholder="$t('datasource.please_choose_type')" class="select-width" @change="changeType()">
|
||||
<el-option
|
||||
v-for="item in allTypes"
|
||||
:key="item.name"
|
||||
:label="item.name"
|
||||
:value="item.name"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item v-show="form.configuration.dataSourceType=='jdbc'" :label="$t('datasource.data_base')" prop="configuration.dataBase" :rules="{required: true, message: $t('datasource.please_input_data_base'), trigger: 'blur'}">
|
||||
<el-input v-model="form.configuration.dataBase" autocomplete="off" />
|
||||
</el-form-item>
|
||||
<el-form-item v-show="form.configuration.dataSourceType=='jdbc'" :label="$t('datasource.user_name')" prop="configuration.username" :rules="{required: true, message: $t('datasource.please_input_user_name'), trigger: 'blur'}">
|
||||
<el-input v-model="form.configuration.username" autocomplete="off" />
|
||||
</el-form-item>
|
||||
<el-form-item v-show="form.configuration.dataSourceType=='jdbc'" :label="$t('datasource.password')" prop="configuration.password" :rules="{required: true, message: $t('datasource.please_input_password'), trigger: 'change'}">
|
||||
<el-input v-model="form.configuration.password" autocomplete="off" />
|
||||
</el-form-item>
|
||||
<el-form-item v-show="form.configuration.dataSourceType=='jdbc'" :label="$t('datasource.host')" prop="configuration.host" :rules="{required: true, message: $t('datasource.please_input_host'), trigger: 'change'}">
|
||||
<el-input v-model="form.configuration.host" autocomplete="off" />
|
||||
</el-form-item>
|
||||
<el-form-item v-show="form.configuration.dataSourceType=='jdbc'" :label="$t('datasource.port')" prop="configuration.port" :rules="{required: true, message: $t('datasource.please_input_port'), trigger: 'change'}">
|
||||
<el-input v-model="form.configuration.port" autocomplete="off" />
|
||||
</el-form-item>
|
||||
|
||||
</el-form>
|
||||
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button type="text" @click="dialogVisible = false">{{ $t('commons.cancel') }}</el-button>
|
||||
<el-button type="primary" @click="validaDatasource('createDatasource')">{{ $t('commons.validate') }}</el-button>
|
||||
<el-button type="primary" @click="saveDatasource('createDatasource')">{{ $t('commons.confirm') }}</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
|
||||
</layout-content>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
import LayoutContent from '@/components/business/LayoutContent'
|
||||
import ComplexTable from '@/components/business/complex-table'
|
||||
import { hasDataPermission } from '@/utils/permission'
|
||||
import { formatCondition } from '@/utils/index'
|
||||
import { dsGrid, addDs, editDs, delDs, validateDs } from '@/api/system/datasource'
|
||||
|
||||
export default {
|
||||
name: 'DEDatasource',
|
||||
components: {
|
||||
LayoutContent,
|
||||
ComplexTable
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
formType: 'add',
|
||||
dialogVisible: false,
|
||||
data: [],
|
||||
form: { configuration: {}},
|
||||
allTypes: [{ name: 'mysql', type: 'jdbc' }, { name: 'sqlServer', type: 'jdbc' }],
|
||||
rule: {
|
||||
name: [
|
||||
{ required: true, message: this.$t('organization.input_name'), trigger: 'blur' },
|
||||
{ min: 2, max: 25, message: this.$t('commons.input_limit', [2, 25]), trigger: 'blur' }
|
||||
],
|
||||
desc: [
|
||||
{ required: true, message: this.$t('organization.input_name'), trigger: 'blur' },
|
||||
{ max: 50, message: this.$t('commons.input_limit', [0, 50]), trigger: 'blur' }
|
||||
]
|
||||
},
|
||||
header: '',
|
||||
columns: [],
|
||||
buttons: [
|
||||
{
|
||||
label: this.$t('commons.edit'), icon: 'el-icon-edit', type: 'primary', click: this.edit,
|
||||
show: true,
|
||||
disabled: (row) => {
|
||||
return !hasDataPermission('manage', row.privileges)
|
||||
}
|
||||
}, {
|
||||
label: this.$t('commons.delete'), icon: 'el-icon-delete', type: 'danger', click: this._handleDelete,
|
||||
show: true,
|
||||
disabled: (row) => {
|
||||
return !hasDataPermission('manage', row.privileges)
|
||||
}
|
||||
}
|
||||
],
|
||||
searchConfig: {
|
||||
useQuickSearch: true,
|
||||
quickPlaceholder: this.$t('commons.search_by_name'),
|
||||
combine: false,
|
||||
components: [
|
||||
{ field: 'name', label: this.$t('commons.name'), component: 'FuComplexInput' },
|
||||
{
|
||||
field: 'type',
|
||||
label: this.$t('datasource.type'),
|
||||
component: 'FuComplexSelect',
|
||||
options: [{ label: 'MySQL', value: 'mysql' }, { label: 'SQL Server', value: 'sqlServer' }],
|
||||
multiple: false
|
||||
}
|
||||
// { field: 'deptId', label: '组织', component: conditionTable }
|
||||
]
|
||||
},
|
||||
paginationConfig: {
|
||||
currentPage: 1,
|
||||
pageSize: 10,
|
||||
total: 0
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.search()
|
||||
},
|
||||
methods: {
|
||||
select(selection) {
|
||||
// console.log(selection)
|
||||
},
|
||||
// create() {
|
||||
// this.formType = 'add'
|
||||
// this.dialogVisible = true
|
||||
// },
|
||||
create() {
|
||||
this.$router.push({ name: 'datasource-form' })
|
||||
},
|
||||
|
||||
// edit(row) {
|
||||
// this.formType = 'modify'
|
||||
// this.dialogVisible = true
|
||||
// this.form = Object.assign({}, row)
|
||||
// this.form.configuration = JSON.parse(this.form.configuration)
|
||||
// },
|
||||
edit(row) {
|
||||
this.$router.push({ name: 'datasource-form', params: row })
|
||||
},
|
||||
|
||||
_handleDelete(datasource) {
|
||||
this.$confirm(this.$t('datasource.delete_warning'), '', {
|
||||
confirmButtonText: this.$t('commons.confirm'),
|
||||
cancelButtonText: this.$t('commons.cancel'),
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
delDs(datasource.id).then(res => {
|
||||
this.$success(this.$t('commons.delete_success'))
|
||||
this.search()
|
||||
})
|
||||
}).catch(() => {
|
||||
this.$message({
|
||||
type: 'info',
|
||||
message: this.$t('commons.delete_cancelled')
|
||||
})
|
||||
})
|
||||
},
|
||||
saveDatasource(createDatasourceForm) {
|
||||
this.$refs[createDatasourceForm].validate(valid => {
|
||||
if (valid) {
|
||||
const method = this.formType === 'add' ? addDs : editDs
|
||||
this.form.configuration = JSON.stringify(this.form.configuration)
|
||||
method(this.form).then(res => {
|
||||
this.$success(this.$t('commons.save_success'))
|
||||
this.search()
|
||||
this.dialogVisible = false
|
||||
})
|
||||
} else {
|
||||
return false
|
||||
}
|
||||
})
|
||||
},
|
||||
validaDatasource(datasourceForm) {
|
||||
this.$refs[datasourceForm].validate(valid => {
|
||||
if (valid) {
|
||||
const data = JSON.parse(JSON.stringify(this.form))
|
||||
data.configuration = JSON.stringify(data.configuration)
|
||||
|
||||
validateDs(data).then(res => {
|
||||
this.$success(this.$t('datasource.validate_success'))
|
||||
})
|
||||
} 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
|
||||
}
|
||||
}
|
||||
},
|
||||
quick_condition(condition) {
|
||||
const result = {}
|
||||
if (condition && condition.quick) {
|
||||
for (const [key, value] of Object.entries(condition)) {
|
||||
if (`${key}` === 'quick') {
|
||||
const v_new = Object.assign({}, value)
|
||||
v_new['field'] = 'name'
|
||||
result['name'] = v_new
|
||||
} else {
|
||||
result[`${key}`] = value
|
||||
}
|
||||
}
|
||||
return result
|
||||
}
|
||||
return Object.assign({}, condition)
|
||||
},
|
||||
search(condition) {
|
||||
const temp_param = this.quick_condition(condition)
|
||||
const temp = formatCondition(temp_param)
|
||||
const param = temp || {}
|
||||
const { currentPage, pageSize } = this.paginationConfig
|
||||
dsGrid(currentPage, pageSize, param).then(response => {
|
||||
this.data = response.data.listObject
|
||||
this.paginationConfig.total = response.data.itemCount
|
||||
})
|
||||
},
|
||||
|
||||
closeFunc() {
|
||||
this.formType = 'add'
|
||||
// this.search()
|
||||
this.form = { configuration: {}}
|
||||
this.dialogVisible = false
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
Loading…
Reference in New Issue
Block a user