Skip to content
项目
群组
代码片段
帮助
当前项目
正在载入...
登录 / 注册
切换导航面板
D
dataease
项目
项目
详情
活动
周期分析
仓库
仓库
文件
提交
分支
标签
贡献者
图表
比较
统计图
议题
0
议题
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
CI / CD
CI / CD
流水线
作业
日程
统计图
Wiki
Wiki
代码片段
代码片段
成员
成员
折叠边栏
关闭边栏
活动
图像
聊天
创建新问题
作业
提交
问题看板
Open sidebar
njgzx
dataease
Commits
bf7c8bb3
提交
bf7c8bb3
authored
11月 24, 2021
作者:
taojinlong
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
refactor: 整理代码
上级
9e87a08a
显示空白字符变更
内嵌
并排
正在显示
16 个修改的文件
包含
255 行增加
和
610 行删除
+255
-610
README.md
frontend/README.md
+0
-128
table.js
frontend/mock/table.js
+1
-1
user.js
frontend/mock/user.js
+3
-3
package.json
frontend/package.json
+5
-7
App.vue
frontend/src/App.vue
+3
-3
table.js
frontend/src/api/table.js
+0
-5
index.vue
frontend/src/components/AsyncComponent/index.vue
+0
-1
SidebarItem.vue
frontend/src/layout/components/Sidebar/SidebarItem.vue
+0
-2
main.js
frontend/src/main.js
+1
-2
request.js
frontend/src/utils/request.js
+6
-17
DataHome.vue
frontend/src/views/system/datasource/DataHome.vue
+2
-2
DsMain.vue
frontend/src/views/system/datasource/DsMain.vue
+13
-14
DsTree.vue
frontend/src/views/system/datasource/DsTree.vue
+71
-56
form.vue
frontend/src/views/system/datasource/form.vue
+147
-66
index.vue
frontend/src/views/system/datasource/index.vue
+3
-17
index2.vue
frontend/src/views/system/datasource/index2.vue
+0
-286
没有找到文件。
frontend/README.md
deleted
100644 → 0
浏览文件 @
9e87a08a
# 项目说明
> 这是一个极简的 vue admin 管理后台,基于vue-admin-template进行了细节改造,主要是把侧边导航改造为了顶部和侧边两个导航。
>
> 本项目默认开启了css:sourceMap和devtool('source-map'),便于在开发中调试,除非编译速度过慢,否则开发环境不建议修改。
## IDE
编辑器建议使用VS Code,格式化时可以统一代码风格,配置项建议统一设置为默认不自动保存,手动保存后自动修复部分错误。具体参数如下:
```
js
{
"emmet.triggerExpansionOnTab"
:
true
,
"files.autoSave"
:
"off"
,
"vetur.format.defaultFormatterOptions"
:
{
"js-beautify-html"
:
{
"wrap_attributes"
:
"force-aligned"
},
"prettyhtml"
:
{
"printWidth"
:
100
,
"singleQuote"
:
false
,
"wrapAttributes"
:
false
,
"sortAttributes"
:
true
},
"prettier"
:
{
"semi"
:
false
,
"singleQuote"
:
true
}
},
"eslint.run"
:
"onSave"
,
"editor.codeActionsOnSave"
:
{
"source.fixAll.eslint"
:
true
}
}
```
## 目录结构
```
bash
├── build
# 构建相关
├── mock
# 项目mock 模拟数据
├── public
# 静态资源
│ │── favicon.ico
# favicon图标
│ └── index.html
# html模板
├── src
# 源代码
│ ├── api
# 所有请求
│ ├── assets
# 主题 字体等静态资源
│ ├── components
# 全局公用组件
│ ├── directive
# 全局指令
│ ├── filters
# 全局 filter
│ ├── icons
# 项目所有 svg icons
│ ├── lang
# 国际化 language
│ ├── layout
# 全局 layout
│ ├── router
# 路由
│ ├── store
# 全局 store管理
│ ├── styles
# 全局样式
│ ├── utils
# 全局公用方法
│ ├── vendor
# 公用vendor
│ ├── views
# views 所有页面
│ ├── App.vue
# 入口页面
│ ├── main.js
# 入口文件 加载组件 初始化等
│ └── permission.js
# 权限管理
├── tests
# 测试
├── .env.xxx
# 环境变量配置
├── .eslintrc.js
# eslint 配置项
├── .babelrc
# babel-loader 配置
├── .travis.yml
# 自动化CI配置
├── vue.config.js
# vue-cli 配置
├── postcss.config.js
# postcss 配置
└── package.json
# package.json
```
## 构建步骤
```
bash
# 克隆项目
git clone 项目地址
# 进入项目目录
cd
admin-web
# 安装依赖
npm
install
# 建议不要直接使用 cnpm 安装依赖,会有各种诡异的 bug。可以通过如下操作解决 npm 下载速度慢的问题
npm
install
--registry
=
https://registry.npm.taobao.org
# 启动服务
npm run dev
```
浏览器访问
[
http://localhost:9528
](
http://localhost:9528
)
## 发布
```
bash
# 构建测试环境
npm run build:stage
# 构建生产环境
npm run build:prod
```
## 其它
```
bash
# 预览发布环境效果
npm run preview
# 预览发布环境效果 + 静态资源分析
npm run preview
--
--report
# 代码格式检查
npm run lint
# 代码格式检查并自动修复
npm run lint
--
--fix
```
更多信息请参考花裤衩大佬的vue-element-admin
[
使用文档
](
https://panjiachen.github.io/vue-element-admin-site/zh/
)
[
线上地址
](
http://panjiachen.github.io/vue-admin-template
)
[
国内访问
](
https://panjiachen.gitee.io/vue-admin-template
)
frontend/mock/table.js
浏览文件 @
bf7c8bb3
...
...
@@ -13,7 +13,7 @@ const data = Mock.mock({
export
default
[
{
url
:
'/
vue-admin-templat
e/table/list'
,
url
:
'/
dataeas
e/table/list'
,
type
:
'get'
,
response
:
config
=>
{
const
items
=
data
.
items
...
...
frontend/mock/user.js
浏览文件 @
bf7c8bb3
...
...
@@ -26,7 +26,7 @@ const users = {
export
default
[
// user login
{
url
:
'/
vue-admin-templat
e/user/login'
,
url
:
'/
dataeas
e/user/login'
,
type
:
'post'
,
response
:
config
=>
{
const
{
username
}
=
config
.
body
...
...
@@ -49,7 +49,7 @@ export default [
// get user info
{
url
:
'/
vue-admin-templat
e/user/info
\
.*'
,
url
:
'/
dataeas
e/user/info
\
.*'
,
type
:
'get'
,
response
:
config
=>
{
const
{
token
}
=
config
.
query
...
...
@@ -72,7 +72,7 @@ export default [
// user logout
{
url
:
'/
vue-admin-templat
e/user/logout'
,
url
:
'/
dataeas
e/user/logout'
,
type
:
'post'
,
response
:
_
=>
{
return
{
...
...
frontend/package.json
浏览文件 @
bf7c8bb3
{
"name"
:
"vue-admin-template"
,
"version"
:
"4.2.1"
,
"description"
:
"A vue admin template with Element UI & axios & iconfont & permission control & lint"
,
"author"
:
"Pan <panfree23@gmail.com>"
,
"license"
:
"MIT"
,
"name"
:
"dataease"
,
"version"
:
"1.5.0"
,
"description"
:
"dataease front"
,
"private"
:
true
,
"scripts"
:
{
"serve"
:
"vue-cli-service serve"
,
...
...
@@ -23,10 +21,10 @@
"css-color-function"
:
"^1.3.3"
,
"echarts"
:
"^5.0.1"
,
"element-resize-detector"
:
"^1.2.3"
,
"element-ui"
:
"2.15.
6
"
,
"element-ui"
:
"2.15.
7
"
,
"file-save"
:
"^0.2.0"
,
"file-saver"
:
"^2.0.5"
,
"fit2cloud-ui"
:
"1.5.
0-beta.0
"
,
"fit2cloud-ui"
:
"1.5.
4
"
,
"html2canvasde"
:
"^v1.1.4-de"
,
"jquery"
:
"^3.1.1"
,
"js-base64"
:
"^3.7.2"
,
...
...
frontend/src/App.vue
浏览文件 @
bf7c8bb3
<
template
>
<div
id=
"app"
>
<router-view
/>
<plugin-com
v-show=
"false"
ref=
"de-theme"
component-name=
"ThemeSetting"
/>
<router-view/>
<plugin-com
v-show=
"false"
ref=
"de-theme"
component-name=
"ThemeSetting"
/>
</div>
</
template
>
...
...
@@ -10,7 +10,7 @@ import PluginCom from '@/views/system/plugin/PluginCom'
export
default
{
name
:
'App'
,
components
:
{
PluginCom
},
components
:
{
PluginCom
},
beforeCreate
()
{
}
...
...
frontend/src/api/table.js
浏览文件 @
bf7c8bb3
...
...
@@ -10,11 +10,6 @@ const data = Mock.mock({
}]
})
export
function
getList
(
params
)
{
// return request({
// url: '/vue-admin-template/table/list',
// method: 'get',
// params
// })
return
new
Promise
((
resolve
,
reject
)
=>
{
const
items
=
data
.
items
const
result
=
{
...
...
frontend/src/components/AsyncComponent/index.vue
浏览文件 @
bf7c8bb3
...
...
@@ -7,7 +7,6 @@
</
template
>
<
script
>
// import Axios from 'axios'
import
{
get
}
from
'@/api/system/dynamic'
...
...
frontend/src/layout/components/Sidebar/SidebarItem.vue
浏览文件 @
bf7c8bb3
...
...
@@ -51,8 +51,6 @@ export default {
}
},
data
()
{
// To fix https://github.com/PanJiaChen/vue-admin-template/issues/237
// TODO: refactor with render function
this
.
onlyOneChild
=
null
return
{}
},
...
...
frontend/src/main.js
浏览文件 @
bf7c8bb3
...
...
@@ -3,8 +3,7 @@ import Cookies from 'js-cookie'
import
'@/styles/index.scss'
// global css
import
ElementUI
from
'element-ui'
import
Fit2CloudUI
from
'fit2cloud-ui'
// import axios from 'axios'
// import VueAxios from 'vue-axios'
import
i18n
from
'./lang'
// internationalization
import
App
from
'./App'
import
store
from
'./store'
...
...
frontend/src/utils/request.js
浏览文件 @
bf7c8bb3
import
axios
from
'axios'
// import { MessageBox, Message } from 'element-ui'
import
store
from
'@/store'
import
{
$alert
,
$error
}
from
'./message'
import
{
getToken
,
getIdToken
}
from
'@/utils/auth'
import
{
$alert
,
$error
}
from
'./message'
import
{
getToken
,
getIdToken
}
from
'@/utils/auth'
import
Config
from
'@/settings'
import
i18n
from
'@/lang'
import
{
tryShowLoading
,
tryHideLoading
}
from
'./loading'
import
{
getLinkToken
,
setLinkToken
}
from
'@/utils/auth'
// import router from '@/router'
// const interruptTokenContineUrls = Config.interruptTokenContineUrls
import
{
tryShowLoading
,
tryHideLoading
}
from
'./loading'
import
{
getLinkToken
,
setLinkToken
}
from
'@/utils/auth'
const
TokenKey
=
Config
.
TokenKey
const
RefreshTokenKey
=
Config
.
RefreshTokenKey
const
LinkTokenKey
=
Config
.
LinkTokenKey
import
Cookies
from
'js-cookie'
// create an axios instance
const
getTimeOut
=
()
=>
{
let
time
=
10
...
...
@@ -46,23 +44,18 @@ const getTimeOut = () => {
const
time
=
getTimeOut
()
let
service
=
axios
.
create
({
baseURL
:
process
.
env
.
VUE_APP_BASE_API
,
// url = base url + request url
timeout
:
time
?
time
*
1000
:
10000
})
// request interceptor
service
.
interceptors
.
request
.
use
(
config
=>
{
// do something before request is sent
const
idToken
=
getIdToken
()
if
(
idToken
)
{
config
.
headers
[
Config
.
IdTokenKey
]
=
idToken
}
if
(
store
.
getters
.
token
)
{
// let each request carry token
// ['X-Token'] is a custom headers key
// please modify it according to the actual situation
config
.
headers
[
TokenKey
]
=
getToken
()
}
let
linkToken
=
null
...
...
@@ -78,15 +71,12 @@ service.interceptors.request.use(
const
lang
=
i18n
.
locale
.
replace
(
'_'
,
'-'
)
config
.
headers
[
'Accept-Language'
]
=
lang
}
// 增加loading
config
.
loading
&&
tryShowLoading
(
store
.
getters
.
currentPath
)
return
config
},
error
=>
{
error
.
config
.
loading
&&
tryHideLoading
(
store
.
getters
.
currentPath
)
// do something with request error
return
Promise
.
reject
(
error
)
}
)
...
...
@@ -111,7 +101,6 @@ service.interceptors.response.use(response => {
let
msg
if
(
error
.
response
)
{
checkAuth
(
error
.
response
)
// checkPermission(error.response)
msg
=
error
.
response
.
data
.
message
||
error
.
response
.
data
}
else
{
msg
=
error
.
message
...
...
frontend/src/views/system/datasource/DataHome.vue
浏览文件 @
bf7c8bb3
...
...
@@ -13,7 +13,7 @@ export default {
</
script
>
<
style
scoped
>
.custom-position
{
.custom-position
{
flex
:
1
;
display
:
flex
;
align-items
:
center
;
...
...
@@ -21,5 +21,5 @@ export default {
font-size
:
14px
;
flex-flow
:
row
nowrap
;
color
:
#9ea6b2
;
}
}
</
style
>
frontend/src/views/system/datasource/DsMain.vue
浏览文件 @
bf7c8bb3
<
template
>
<de-container
v-loading=
"$store.getters.loadingMap[$store.getters.currentPath]"
>
<de-aside-container
style=
"padding: 0 0;"
>
<ds-tree
ref=
"dsTree"
:datasource=
"datasource"
@
switch-main=
"switchMain"
/>
<ds-tree
ref=
"dsTree"
:datasource=
"datasource"
@
switch-main=
"switchMain"
/>
</de-aside-container>
<de-main-container>
<component
:is=
"component"
v-if=
"!!component"
:params=
"param"
@
refresh-type=
"refreshType"
@
switch-component=
"switchMain"
/>
<component
:is=
"component"
v-if=
"!!component"
:params=
"param"
@
refresh-type=
"refreshType"
@
switch-component=
"switchMain"
/>
</de-main-container>
</de-container>
</
template
>
...
...
@@ -16,9 +17,10 @@ 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
},
components
:
{
DeMainContainer
,
DeContainer
,
DeAsideContainer
,
DsTree
,
DataHome
},
data
()
{
return
{
component
:
DataHome
,
...
...
@@ -26,19 +28,15 @@ export default {
param
:
null
}
},
computed
:
{
},
watch
:
{
},
computed
:
{},
watch
:
{},
mounted
()
{
// this.clear()
},
methods
:
{
// 切换main区内容
switchMain
(
param
)
{
const
{
component
,
componentParam
}
=
param
const
{
component
,
componentParam
}
=
param
this
.
component
=
DataHome
this
.
param
=
null
this
.
$nextTick
(()
=>
{
...
...
@@ -66,14 +64,15 @@ export default {
</
script
>
<
style
scoped
>
.ms-aside-container
{
.ms-aside-container
{
height
:
calc
(
100vh
-
56px
);
padding
:
0px
;
min-width
:
260px
;
max-width
:
460px
;
}
.ms-main-container
{
}
.ms-main-container
{
height
:
calc
(
100vh
-
56px
);
padding
:
0px
;
}
}
</
style
>
frontend/src/views/system/datasource/DsTree.vue
浏览文件 @
bf7c8bb3
...
...
@@ -5,10 +5,11 @@
<span
class=
"title-text"
>
{{
$t
(
'commons.datasource'
)
}}
</span>
<el-button
v-permission=
"['datasource:add']"
icon=
"el-icon-plus"
type=
"text"
size=
"mini"
style=
"float: right;"
@
click=
"addFolder"
/>
<el-button
v-permission=
"['datasource:add']"
icon=
"el-icon-plus"
type=
"text"
size=
"mini"
style=
"float: right;"
@
click=
"addFolder"
/>
</el-row>
<el-divider
/>
<el-divider/>
<el-row>
<el-form>
<el-form-item
class=
"form-item"
>
...
...
@@ -39,18 +40,21 @@
<span
slot-scope=
"
{ node, data }" class="custom-tree-node-list father">
<span
style=
"display: flex;flex: 1;width: 0;"
>
<span
v-if=
"data.type !== 'folder' && data.status !== 'Error'"
>
<svg-icon
icon-class=
"datasource"
class=
"ds-icon-scene"
/>
<svg-icon
icon-class=
"datasource"
class=
"ds-icon-scene"
/>
</span>
<span
v-if=
"data.status === 'Error'"
>
<svg-icon
icon-class=
"exclamationmark"
class=
"ds-icon-scene"
/>
<el-tooltip
v-if=
"data.status === 'Error'"
style=
"margin-left: 6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;"
effect=
"dark"
:content=
"$t('datasource.in_valid')"
placement=
"right"
>
<svg-icon
icon-class=
"exclamationmark"
class=
"ds-icon-scene"
/>
<el-tooltip
v-if=
"data.status === 'Error'"
style=
"margin-left: 6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;"
effect=
"dark"
:content=
"$t('datasource.in_valid')"
placement=
"right"
>
<el-button
type=
"text"
:style=
"!!data.msgNode ?
{'color': 'red'} : {}">
{{
data
.
name
}}
</el-button>
</el-tooltip>
</span>
<span
v-if=
"data.type === 'folder'"
>
<i
class=
"el-icon-folder"
/>
<i
class=
"el-icon-folder"
/>
</span>
<span
v-if=
" data.status !== 'Error'"
style=
"margin-left: 6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;"
>
<span
v-if=
" data.status !== 'Error'"
style=
"margin-left: 6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;"
>
{{
data
.
name
}}
</span>
...
...
@@ -87,7 +91,7 @@
</el-col>
</
template
>
<
script
>
import
{
listDatasource
,
listDatasourceByType
,
delDs
}
from
'@/api/system/datasource'
import
{
listDatasource
,
listDatasourceByType
,
delDs
}
from
'@/api/system/datasource'
export
default
{
name
:
'DsTree'
,
...
...
@@ -135,7 +139,7 @@ export default {
listDatasourceByType
(
datasource
.
type
).
then
(
res
=>
{
typeData
=
this
.
buildTree
(
res
.
data
)
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
}
}
...
...
@@ -156,7 +160,12 @@ export default {
if
(
!
(
element
.
type
in
types
))
{
types
[
element
.
type
]
=
[]
// newArr.push(...element, ...{ children: types[element.type] })
newArr
.
push
({
id
:
element
.
type
,
name
:
this
.
transTypeToName
(
element
.
type
),
type
:
'folder'
,
children
:
types
[
element
.
type
]
})
newArr
.
push
({
id
:
element
.
type
,
name
:
this
.
transTypeToName
(
element
.
type
),
type
:
'folder'
,
children
:
types
[
element
.
type
]
})
}
types
[
element
.
type
].
push
(
element
)
// newArr.children.push({ id: element.id, label: element.name })
...
...
@@ -183,7 +192,7 @@ export default {
return
'Doris'
}
else
if
(
type
===
'mongo'
)
{
return
'MongoDB'
}
else
if
(
type
===
'redshift'
)
{
}
else
if
(
type
===
'redshift'
)
{
return
'AWS Redshift'
}
else
if
(
type
===
'hive'
)
{
return
'Apache Hive'
...
...
@@ -194,7 +203,7 @@ export default {
this
.
switchMain
(
'DsForm'
)
},
addFolderWithType
(
data
)
{
this
.
switchMain
(
'DsForm'
,
{
type
:
data
.
id
})
this
.
switchMain
(
'DsForm'
,
{
type
:
data
.
id
})
},
nodeClick
(
node
,
data
)
{
if
(
node
.
type
===
'folder'
)
return
...
...
@@ -202,7 +211,7 @@ export default {
},
clickFileMore
(
param
)
{
const
{
optType
,
data
}
=
param
const
{
optType
,
data
}
=
param
switch
(
optType
)
{
case
'edit'
:
this
.
edit
(
data
)
...
...
@@ -215,13 +224,13 @@ export default {
}
},
beforeClickFile
(
optType
,
data
,
node
)
{
return
{
optType
,
data
,
node
}
return
{
optType
,
data
,
node
}
},
edit
(
row
)
{
this
.
switchMain
(
'DsForm'
,
row
)
},
showInfo
(
row
)
{
const
param
=
{
...
row
.
data
,
...{
showModel
:
'show'
}}
const
param
=
{
...
row
.
data
,
...{
showModel
:
'show'
}}
this
.
switchMain
(
'DsForm'
,
param
)
},
_handleDelete
(
datasource
)
{
...
...
@@ -266,100 +275,106 @@ export default {
}
</
script
>
<
style
lang=
"scss"
scoped
>
.el-divider--horizontal
{
.el-divider--horizontal
{
margin
:
12px
0
}
}
.search-input
{
.search-input
{
padding
:
12px
0
;
}
}
.custom-tree-container
{
.custom-tree-container
{
margin-top
:
10px
;
}
}
.custom-tree-node
{
.custom-tree-node
{
flex
:
1
;
display
:
flex
;
align-items
:
center
;
justify-content
:
space-between
;
font-size
:
14px
;
padding-right
:
8px
;
}
padding-right
:
8px
;
}
.custom-tree-node-list
{
.custom-tree-node-list
{
flex
:
1
;
display
:
flex
;
align-items
:
center
;
justify-content
:
space-between
;
font-size
:
14px
;
padding
:
0
8px
;
}
padding
:
0
8px
;
}
.tree-list
>>>
.el-tree-node__expand-icon.is-leaf
{
.tree-list
>
>
>
.el-tree-node__expand-icon.is-leaf
{
display
:
none
;
}
}
.custom-position
{
.custom-position
{
flex
:
1
;
display
:
flex
;
align-items
:
center
;
font-size
:
14px
;
flex-flow
:
row
nowrap
;
}
}
.form-item
{
.form-item
{
margin-bottom
:
0
;
}
}
.title-css
{
.title-css
{
height
:
26px
;
}
}
.title-text
{
.title-text
{
line-height
:
26px
;
}
}
.dialog-css
>>
>
.el-dialog__header
{
.dialog-css
>
>
>
.el-dialog__header
{
padding
:
20px
20px
0
;
}
}
.dialog-css
>>
>
.el-dialog__body
{
.dialog-css
>
>
>
.el-dialog__body
{
padding
:
10px
20px
20px
;
}
}
.form-item
>>>
.el-form-item__label
{
.form-item
>
>
>
.el-form-item__label
{
font-size
:
12px
;
}
}
.scene-title
{
.scene-title
{
width
:
100%
;
display
:
flex
;
}
.scene-title-name
{
}
.scene-title-name
{
width
:
100%
;
overflow
:
hidden
;
display
:
inline-block
;
white-space
:
nowrap
;
text-overflow
:
ellipsis
;
}
.father
.child
{
}
.father
.child
{
/*display: none;*/
visibility
:
hidden
;
}
.father
:hover
.child
{
}
.father
:hover
.child
{
/*display: inline;*/
visibility
:
visible
;
}
.tree-style
{
}
.tree-style
{
padding
:
10px
15px
;
height
:
100%
;
overflow-y
:
auto
;
}
.msg-node-class
{
}
.msg-node-class
{
color
:
red
;
>>>
i
{
>
>
>
i
{
color
:
red
;
}
}
}
</
style
>
frontend/src/views/system/datasource/form.vue
浏览文件 @
bf7c8bb3
<
template
>
<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'
&&
!
canEdit
?
$t
(
'datasource.show_info'
)
:
formType
==
'add'
?
$t
(
'datasource.create'
)
:
$t
(
'datasource.modify'
)
}}
<el-icon
name=
"back"
class=
"back-button"
@
click
.
native=
"backToList"
/>
{{
params
&&
params
.
id
&&
params
.
showModel
&&
params
.
showModel
===
'show'
&&
!
canEdit
?
$t
(
'datasource.show_info'
)
:
formType
==
'add'
?
$t
(
'datasource.create'
)
:
$t
(
'datasource.modify'
)
}}
</
template
>
<div>
<el-form
ref=
"dsForm"
:model=
"form"
:rules=
"rule"
size=
"small"
:disabled=
"params && params.id && params.showModel && params.showModel === 'show' && !canEdit "
label-width=
"auto"
label-position=
"right"
>
<el-form
ref=
"dsForm"
:model=
"form"
:rules=
"rule"
size=
"small"
:disabled=
"params && params.id && params.showModel && params.showModel === 'show' && !canEdit "
label-width=
"auto"
label-position=
"right"
>
<el-form-item
:label=
"$t('commons.name')"
prop=
"name"
>
<el-input
v-model=
"form.name"
autocomplete=
"off"
/>
<el-input
v-model=
"form.name"
autocomplete=
"off"
/>
</el-form-item>
<el-form-item
:label=
"$t('commons.description')"
prop=
"desc"
>
<el-input
v-model=
"form.desc"
autocomplete=
"off"
/>
<el-input
v-model=
"form.desc"
autocomplete=
"off"
/>
</el-form-item>
<el-form-item
:label=
"$t('datasource.type')"
prop=
"type"
>
<el-select
v-model=
"form.type"
:placeholder=
"$t('datasource.please_choose_type')"
class=
"select-width"
:disabled=
"formType=='modify' || (formType==='add' && params && !!params.type)"
@
change=
"changeType()"
>
<el-select
v-model=
"form.type"
:placeholder=
"$t('datasource.please_choose_type')"
class=
"select-width"
:disabled=
"formType=='modify' || (formType==='add' && params && !!params.type)"
@
change=
"changeType()"
>
<el-option
v-for=
"item in allTypes"
:key=
"item.name"
...
...
@@ -24,40 +30,49 @@
</el-select>
</el-form-item>
<el-form-item
v-if=
"form.configuration.dataSourceType=='jdbc'"
:label=
"$t('datasource.host')"
prop=
"configuration.host"
>
<el-input
v-model=
"form.configuration.host"
autocomplete=
"off"
/>
<el-form-item
v-if=
"form.configuration.dataSourceType=='jdbc'"
:label=
"$t('datasource.host')"
prop=
"configuration.host"
>
<el-input
v-model=
"form.configuration.host"
autocomplete=
"off"
/>
</el-form-item>
<el-form-item
v-if=
"form.configuration.dataSourceType=='es'"
:label=
"$t('datasource.datasource_url')"
prop=
"configuration.url"
>
<el-input
v-model=
"form.configuration.url"
:placeholder=
"$t('datasource.please_input_datasource_url')"
autocomplete=
"off"
/>
<el-form-item
v-if=
"form.configuration.dataSourceType=='es'"
:label=
"$t('datasource.datasource_url')"
prop=
"configuration.url"
>
<el-input
v-model=
"form.configuration.url"
:placeholder=
"$t('datasource.please_input_datasource_url')"
autocomplete=
"off"
/>
</el-form-item>
<el-form-item
v-if=
"form.configuration.dataSourceType=='jdbc'"
:label=
"$t('datasource.data_base')"
prop=
"configuration.dataBase"
>
<el-input
v-model=
"form.configuration.dataBase"
autocomplete=
"off"
/>
<el-form-item
v-if=
"form.configuration.dataSourceType=='jdbc'"
:label=
"$t('datasource.data_base')"
prop=
"configuration.dataBase"
>
<el-input
v-model=
"form.configuration.dataBase"
autocomplete=
"off"
/>
</el-form-item>
<el-form-item
v-if=
"form.type=='oracle'"
:label=
"$t('datasource.oracle_connection_type')"
prop=
"configuration.connectionType"
>
<el-form-item
v-if=
"form.type=='oracle'"
:label=
"$t('datasource.oracle_connection_type')"
prop=
"configuration.connectionType"
>
<el-radio
v-model=
"form.configuration.connectionType"
label=
"sid"
>
{{ $t('datasource.oracle_sid') }}
</el-radio>
<el-radio
v-model=
"form.configuration.connectionType"
label=
"serviceName"
>
{{ $t('datasource.oracle_service_name') }}
</el-radio>
<el-radio
v-model=
"form.configuration.connectionType"
label=
"serviceName"
>
{{ $t('datasource.oracle_service_name') }}
</el-radio>
</el-form-item>
<el-form-item
v-if=
"form.configuration.dataSourceType=='jdbc'"
:label=
"$t('datasource.user_name')"
>
<el-input
v-model=
"form.configuration.username"
autocomplete=
"off"
/>
<el-input
v-model=
"form.configuration.username"
autocomplete=
"off"
/>
</el-form-item>
<el-form-item
v-if=
"form.configuration.dataSourceType=='jdbc'"
:label=
"$t('datasource.password')"
>
<el-input
v-model=
"form.configuration.password"
autocomplete=
"off"
show-password
/>
<el-input
v-model=
"form.configuration.password"
autocomplete=
"off"
show-password
/>
</el-form-item>
<el-form-item
v-if=
"form.configuration.dataSourceType=='es'"
:label=
"$t('datasource.user_name')"
>
<el-input
v-model=
"form.configuration.esUsername"
autocomplete=
"off"
/>
<el-form-item
v-if=
"form.configuration.dataSourceType=='es'"
:label=
"$t('datasource.user_name')"
>
<el-input
v-model=
"form.configuration.esUsername"
autocomplete=
"off"
/>
</el-form-item>
<el-form-item
v-if=
"form.configuration.dataSourceType=='es'"
:label=
"$t('datasource.password')"
>
<el-input
v-model=
"form.configuration.esPassword"
autocomplete=
"off"
show-password
/>
<el-form-item
v-if=
"form.configuration.dataSourceType=='es'"
:label=
"$t('datasource.password')"
>
<el-input
v-model=
"form.configuration.esPassword"
autocomplete=
"off"
show-password
/>
</el-form-item>
<el-form-item
v-if=
"form.configuration.dataSourceType=='jdbc' && form.type!=='oracle'"
:label=
"$t('datasource.extra_params')"
>
<el-input
v-model=
"form.configuration.extraParams"
autocomplete=
"off"
/>
<el-form-item
v-if=
"form.configuration.dataSourceType=='jdbc' && form.type!=='oracle'"
:label=
"$t('datasource.extra_params')"
>
<el-input
v-model=
"form.configuration.extraParams"
autocomplete=
"off"
/>
</el-form-item>
<el-form-item
v-if=
"form.configuration.dataSourceType=='jdbc'"
:label=
"$t('datasource.port')"
prop=
"configuration.port"
>
<el-input
v-model=
"form.configuration.port"
autocomplete=
"off"
type=
"number"
min=
"0"
/>
<el-form-item
v-if=
"form.configuration.dataSourceType=='jdbc'"
:label=
"$t('datasource.port')"
prop=
"configuration.port"
>
<el-input
v-model=
"form.configuration.port"
autocomplete=
"off"
type=
"number"
min=
"0"
/>
</el-form-item>
<el-form-item
v-if=
"form.type=='oracle' || form.type=='sqlServer' || form.type=='pg' || form.type=='redshift'"
>
<el-button
icon=
"el-icon-plus"
size=
"mini"
@
click=
"getSchema()"
>
...
...
@@ -65,8 +80,10 @@
</el-button>
</el-form-item>
<el-form-item
v-if=
"form.type=='oracle' || form.type=='sqlServer' || form.type=='pg' || form.type=='redshift'"
:label=
"$t('datasource.schema')"
>
<el-select
filterable
v-model=
"form.configuration.schema"
:placeholder=
"$t('datasource.please_choose_schema')"
class=
"select-width"
>
<el-form-item
v-if=
"form.type=='oracle' || form.type=='sqlServer' || form.type=='pg' || form.type=='redshift'"
:label=
"$t('datasource.schema')"
>
<el-select
filterable
v-model=
"form.configuration.schema"
:placeholder=
"$t('datasource.please_choose_schema')"
class=
"select-width"
>
<el-option
v-for=
"item in schemas"
:key=
"item"
...
...
@@ -77,27 +94,35 @@
</el-form-item>
<el-collapse
v-if=
"form.configuration.dataSourceType=='jdbc'"
>
<el-collapse-item
:title=
"$t('datasource.priority')"
name=
"1"
>
<el-form-item
:label=
"$t('datasource.initial_pool_size')"
prop=
"configuration.initialPoolSize"
>
<el-input
v-model=
"form.configuration.initialPoolSize"
autocomplete=
"off"
type=
"number"
min=
"0"
size=
"small"
/>
<el-input
v-model=
"form.configuration.initialPoolSize"
autocomplete=
"off"
type=
"number"
min=
"0"
size=
"small"
/>
</el-form-item>
<el-form-item
:label=
"$t('datasource.min_pool_size')"
prop=
"configuration.minPoolSize"
>
<el-input
v-model=
"form.configuration.minPoolSize"
autocomplete=
"off"
type=
"number"
min=
"0"
/>
<el-input
v-model=
"form.configuration.minPoolSize"
autocomplete=
"off"
type=
"number"
min=
"0"
/>
</el-form-item>
<el-form-item
:label=
"$t('datasource.max_pool_size')"
prop=
"configuration.maxPoolSize"
>
<el-input
v-model=
"form.configuration.maxPoolSize"
autocomplete=
"off"
type=
"number"
min=
"0"
/>
<el-input
v-model=
"form.configuration.maxPoolSize"
autocomplete=
"off"
type=
"number"
min=
"0"
/>
</el-form-item>
</el-collapse-item>
</el-collapse>
</el-form>
<div
v-if=
"canEdit"
slot=
"footer"
class=
"dialog-footer"
>
<el-button
v-if=
"formType==='add'?true: hasDataPermission('manage',params.privileges)"
@
click=
"validaDatasource"
>
{{ $t('commons.validate') }}
</el-button>
<el-button
v-if=
"formType==='add'?true: hasDataPermission('manage',params.privileges)"
type=
"primary"
@
click=
"save"
>
{{ $t('commons.save') }}
</el-button>
<el-button
v-if=
"formType==='add'?true: hasDataPermission('manage',params.privileges)"
@
click=
"validaDatasource"
>
{{ $t('commons.validate') }}
</el-button>
<el-button
v-if=
"formType==='add'?true: hasDataPermission('manage',params.privileges)"
type=
"primary"
@
click=
"save"
>
{{ $t('commons.save') }}
</el-button>
</div>
<div
v-else
slot=
"footer"
class=
"dialog-footer"
>
<el-button
v-if=
"formType==='add'?true: hasDataPermission('manage',params.privileges)"
@
click=
"validaDatasource"
>
{{ $t('commons.validate') }}
</el-button>
<el-button
v-if=
"formType==='add'?true: hasDataPermission('manage',params.privileges)"
type=
"primary"
@
click=
"changeEdit"
>
{{ $t('commons.edit') }}
</el-button>
<el-button
v-if=
"formType==='add'?true: hasDataPermission('manage',params.privileges)"
@
click=
"validaDatasource"
>
{{ $t('commons.validate') }}
</el-button>
<el-button
v-if=
"formType==='add'?true: hasDataPermission('manage',params.privileges)"
type=
"primary"
@
click=
"changeEdit"
>
{{ $t('commons.edit') }}
</el-button>
</div>
</div>
</layout-content>
...
...
@@ -105,12 +130,12 @@
<
script
>
import
LayoutContent
from
'@/components/business/LayoutContent'
import
{
addDs
,
editDs
,
getSchema
,
validateDs
,
validateDsById
}
from
'@/api/system/datasource'
import
{
$confirm
}
from
'@/utils/message'
import
{
addDs
,
editDs
,
getSchema
,
validateDs
,
validateDsById
}
from
'@/api/system/datasource'
import
{
$confirm
}
from
'@/utils/message'
export
default
{
name
:
'DsForm'
,
components
:
{
LayoutContent
},
components
:
{
LayoutContent
},
props
:
{
params
:
{
type
:
Object
,
...
...
@@ -132,36 +157,91 @@ export default {
}
},
rule
:
{
name
:
[{
required
:
true
,
message
:
this
.
$t
(
'datasource.input_name'
),
trigger
:
'blur'
},
{
min
:
2
,
max
:
25
,
message
:
this
.
$t
(
'datasource.input_limit_2_25'
,
[
2
,
25
]),
trigger
:
'blur'
}],
desc
:
[{
min
:
0
,
max
:
50
,
message
:
this
.
$t
(
'datasource.input_limit_0_50'
),
trigger
:
'blur'
}],
type
:
[{
required
:
true
,
message
:
this
.
$t
(
'datasource.please_choose_type'
),
trigger
:
'change'
}],
'configuration.dataBase'
:
[{
required
:
true
,
message
:
this
.
$t
(
'datasource.please_input_data_base'
),
trigger
:
'blur'
}],
'configuration.connectionType'
:
[{
required
:
true
,
message
:
this
.
$t
(
'datasource.please_select_oracle_type'
),
trigger
:
'blur'
}],
'configuration.username'
:
[{
required
:
true
,
message
:
this
.
$t
(
'datasource.please_input_user_name'
),
trigger
:
'blur'
}],
'configuration.password'
:
[{
required
:
true
,
message
:
this
.
$t
(
'datasource.please_input_password'
),
trigger
:
'change'
}],
'configuration.host'
:
[{
required
:
true
,
message
:
this
.
$t
(
'datasource.please_input_host'
),
trigger
:
'change'
}],
'configuration.url'
:
[{
required
:
true
,
message
:
this
.
$t
(
'datasource.please_input_url'
),
trigger
:
'change'
}],
'configuration.port'
:
[{
required
:
true
,
message
:
this
.
$t
(
'datasource.please_input_port'
),
trigger
:
'change'
}],
'configuration.initialPoolSize'
:
[{
required
:
true
,
message
:
this
.
$t
(
'datasource.please_input_initial_pool_size'
),
trigger
:
'change'
}],
'configuration.minPoolSize'
:
[{
required
:
true
,
message
:
this
.
$t
(
'datasource.please_input_min_pool_size'
),
trigger
:
'change'
}],
'configuration.maxPoolSize'
:
[{
required
:
true
,
message
:
this
.
$t
(
'datasource.please_input_max_pool_size'
),
trigger
:
'change'
}],
'configuration.maxIdleTime'
:
[{
required
:
true
,
message
:
this
.
$t
(
'datasource.please_input_max_idle_time'
),
trigger
:
'change'
}],
'configuration.acquireIncrement'
:
[{
required
:
true
,
message
:
this
.
$t
(
'datasource.please_input_acquire_increment'
),
trigger
:
'change'
}],
'configuration.connectTimeout'
:
[{
required
:
true
,
message
:
this
.
$t
(
'datasource.please_input_connect_timeout'
),
trigger
:
'change'
}]
name
:
[{
required
:
true
,
message
:
this
.
$t
(
'datasource.input_name'
),
trigger
:
'blur'
},
{
min
:
2
,
max
:
25
,
message
:
this
.
$t
(
'datasource.input_limit_2_25'
,
[
2
,
25
]),
trigger
:
'blur'
}],
desc
:
[{
min
:
0
,
max
:
50
,
message
:
this
.
$t
(
'datasource.input_limit_0_50'
),
trigger
:
'blur'
}],
type
:
[{
required
:
true
,
message
:
this
.
$t
(
'datasource.please_choose_type'
),
trigger
:
'change'
}],
'configuration.dataBase'
:
[{
required
:
true
,
message
:
this
.
$t
(
'datasource.please_input_data_base'
),
trigger
:
'blur'
}],
'configuration.connectionType'
:
[{
required
:
true
,
message
:
this
.
$t
(
'datasource.please_select_oracle_type'
),
trigger
:
'blur'
}],
'configuration.username'
:
[{
required
:
true
,
message
:
this
.
$t
(
'datasource.please_input_user_name'
),
trigger
:
'blur'
}],
'configuration.password'
:
[{
required
:
true
,
message
:
this
.
$t
(
'datasource.please_input_password'
),
trigger
:
'change'
}],
'configuration.host'
:
[{
required
:
true
,
message
:
this
.
$t
(
'datasource.please_input_host'
),
trigger
:
'change'
}],
'configuration.url'
:
[{
required
:
true
,
message
:
this
.
$t
(
'datasource.please_input_url'
),
trigger
:
'change'
}],
'configuration.port'
:
[{
required
:
true
,
message
:
this
.
$t
(
'datasource.please_input_port'
),
trigger
:
'change'
}],
'configuration.initialPoolSize'
:
[{
required
:
true
,
message
:
this
.
$t
(
'datasource.please_input_initial_pool_size'
),
trigger
:
'change'
}],
'configuration.minPoolSize'
:
[{
required
:
true
,
message
:
this
.
$t
(
'datasource.please_input_min_pool_size'
),
trigger
:
'change'
}],
'configuration.maxPoolSize'
:
[{
required
:
true
,
message
:
this
.
$t
(
'datasource.please_input_max_pool_size'
),
trigger
:
'change'
}],
'configuration.maxIdleTime'
:
[{
required
:
true
,
message
:
this
.
$t
(
'datasource.please_input_max_idle_time'
),
trigger
:
'change'
}],
'configuration.acquireIncrement'
:
[{
required
:
true
,
message
:
this
.
$t
(
'datasource.please_input_acquire_increment'
),
trigger
:
'change'
}],
'configuration.connectTimeout'
:
[{
required
:
true
,
message
:
this
.
$t
(
'datasource.please_input_connect_timeout'
),
trigger
:
'change'
}]
},
allTypes
:
[
{
name
:
'mysql'
,
label
:
'MySQL'
,
type
:
'jdbc'
,
extraParams
:
'characterEncoding=UTF-8&connectTimeout=5000&useSSL=false&allowPublicKeyRetrieval=true'
},
{
name
:
'hive'
,
label
:
'Apache Hive'
,
type
:
'jdbc'
,
extraParams
:
''
},
{
name
:
'oracle'
,
label
:
'Oracle'
,
type
:
'jdbc'
},
{
name
:
'sqlServer'
,
label
:
'SQL Server'
,
type
:
'jdbc'
,
extraParams
:
''
},
{
name
:
'pg'
,
label
:
'PostgreSQL'
,
type
:
'jdbc'
,
extraParams
:
''
},
{
name
:
'es'
,
label
:
'Elasticsearch'
,
type
:
'es'
},
{
name
:
'mariadb'
,
label
:
'MariaDB'
,
type
:
'jdbc'
,
extraParams
:
'characterEncoding=UTF-8&connectTimeout=5000&useSSL=false&allowPublicKeyRetrieval=true'
},
{
name
:
'ds_doris'
,
label
:
'Doris'
,
type
:
'jdbc'
,
extraParams
:
'characterEncoding=UTF-8&connectTimeout=5000&useSSL=false&allowPublicKeyRetrieval=true'
},
{
name
:
'ck'
,
label
:
'ClickHouse'
,
type
:
'jdbc'
,
extraParams
:
''
},
{
name
:
'redshift'
,
label
:
'AWS Redshift'
,
type
:
'jdbc'
},
{
name
:
'mongo'
,
label
:
'MongoDB'
,
type
:
'jdbc'
,
extraParams
:
''
}
{
name
:
'mysql'
,
label
:
'MySQL'
,
type
:
'jdbc'
,
extraParams
:
'characterEncoding=UTF-8&connectTimeout=5000&useSSL=false&allowPublicKeyRetrieval=true'
},
{
name
:
'hive'
,
label
:
'Apache Hive'
,
type
:
'jdbc'
,
extraParams
:
''
},
{
name
:
'oracle'
,
label
:
'Oracle'
,
type
:
'jdbc'
},
{
name
:
'sqlServer'
,
label
:
'SQL Server'
,
type
:
'jdbc'
,
extraParams
:
''
},
{
name
:
'pg'
,
label
:
'PostgreSQL'
,
type
:
'jdbc'
,
extraParams
:
''
},
{
name
:
'es'
,
label
:
'Elasticsearch'
,
type
:
'es'
},
{
name
:
'mariadb'
,
label
:
'MariaDB'
,
type
:
'jdbc'
,
extraParams
:
'characterEncoding=UTF-8&connectTimeout=5000&useSSL=false&allowPublicKeyRetrieval=true'
},
{
name
:
'ds_doris'
,
label
:
'Doris'
,
type
:
'jdbc'
,
extraParams
:
'characterEncoding=UTF-8&connectTimeout=5000&useSSL=false&allowPublicKeyRetrieval=true'
},
{
name
:
'ck'
,
label
:
'ClickHouse'
,
type
:
'jdbc'
,
extraParams
:
''
},
{
name
:
'redshift'
,
label
:
'AWS Redshift'
,
type
:
'jdbc'
},
{
name
:
'mongo'
,
label
:
'MongoDB'
,
type
:
'jdbc'
,
extraParams
:
''
}
],
schemas
:
[],
canEdit
:
false
,
...
...
@@ -315,7 +395,7 @@ export default {
}
},
backToList
()
{
this
.
$emit
(
'switch-component'
,
{
})
this
.
$emit
(
'switch-component'
,
{})
},
refreshType
(
form
)
{
this
.
$emit
(
'refresh-type'
,
form
)
...
...
@@ -338,6 +418,7 @@ export default {
.el-input
{
width
:
300px
;
}
.el-select
{
width
:
300px
;
}
...
...
frontend/src/views/system/datasource/index.vue
浏览文件 @
bf7c8bb3
<
template
>
<!--
<de-container
v-loading=
"$store.getters.loadingMap[$store.getters.currentPath]"
style=
"background-color: #f7f8fa"
>
-->
<de-container
v-loading=
"$store.getters.loadingMap[$store.getters.currentPath]"
>
<de-main-container>
<ds-main
ref=
"dsMain"
/>
<ds-main
ref=
"dsMain"
/>
</de-main-container>
</de-container>
</
template
>
...
...
@@ -12,9 +11,10 @@ import DeMainContainer from '@/components/dataease/DeMainContainer'
import
DeContainer
from
'@/components/dataease/DeContainer'
import
DsMain
from
'./DsMain'
import
bus
from
'@/utils/bus'
export
default
{
name
:
'Panel'
,
components
:
{
DeMainContainer
,
DeContainer
,
DsMain
},
components
:
{
DeMainContainer
,
DeContainer
,
DsMain
},
data
()
{
return
{
component
:
DsMain
,
...
...
@@ -40,9 +40,6 @@ export default {
if
(
panelShareTypeIds
.
includes
(
routerParam
.
msgType
))
{
// 是数据集同步
if
(
routerParam
.
sourceParam
)
{
try
{
// const msgParam = JSON.parse(routerParam.sourceParam)
// this.param = msgParam.id
// this.component = ViewTable
this
.
$nextTick
(()
=>
{
this
.
$refs
.
dsMain
&&
this
.
$refs
.
dsMain
.
msg2Current
&&
this
.
$refs
.
dsMain
.
msg2Current
(
routerParam
.
sourceParam
)
})
...
...
@@ -58,16 +55,5 @@ export default {
</
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
deleted
100644 → 0
浏览文件 @
9e87a08a
<
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
人
到此讨论。请谨慎行事。
请先完成此评论的编辑!
取消
请
注册
或者
登录
后发表评论