Skip to content

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

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

上级 f2f698b2
全部展开 隐藏空白字符变更
内嵌 并排
正在显示 包含 381 行增加 和 9 行删除
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>
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论