Skip to content

D
dataease
提交 fb0d195a authored 作者: fit2cloud-chenyw's avatar fit2cloud-chenyw
浏览文件
操作

feat: 数据源展示方式改为统一风格树

上级 f2f698b2
显示空白字符变更
内嵌 并排
正在显示 包含 692 行增加 和 274 行删除
frontend/src/api/system/datasource.js
浏览文件 @ fb0d195a
......@@ -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 }
frontend/src/lang/en.js
浏览文件 @ fb0d195a
......@@ -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',
......
frontend/src/lang/tw.js
浏览文件 @ fb0d195a
......@@ -846,6 +846,8 @@ export default {
},
datasource: {
datasource: '數據源',
please_select_left: '請從左側選擇數據源',
show_info: '數據源信息',
create: '新建數據源',
type: '類型',
please_choose_type: '請選擇數據源類型',
......
frontend/src/lang/zh.js
浏览文件 @ fb0d195a
......@@ -846,6 +846,8 @@ export default {
},
datasource: {
datasource: '数据源',
please_select_left: '请从左侧选择数据源',
show_info: '数据源信息',
create: '新建数据源',
type: '类型',
please_choose_type: '请选择数据源类型',
......
frontend/src/views/system/datasource/DataHome.vue 0 → 100644
浏览文件 @ fb0d195a
<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>
frontend/src/views/system/datasource/DsMain.vue 0 → 100644
浏览文件 @ fb0d195a
<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>
frontend/src/views/system/datasource/DsTree.vue 0 → 100644
浏览文件 @ fb0d195a
<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>
frontend/src/views/system/datasource/form.vue
浏览文件 @ fb0d195a
<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>
frontend/src/views/system/datasource/index.vue
浏览文件 @ fb0d195a
<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
}
methods: {
}
}
</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>
frontend/src/views/system/datasource/index2.vue 0 → 100644
浏览文件 @ fb0d195a
<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>
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论