初始化
This commit is contained in:
砂糖
@@ -0,0 +1,68 @@
|
||||
<template>
|
||||
<el-dialog
|
||||
width="700px"
|
||||
title="提示"
|
||||
:visible.sync="checkDatasourceVisible"
|
||||
:append-to-body="true"
|
||||
:close-on-click-modal="false"
|
||||
:before-close="handleClose"
|
||||
class="bs-dialog-wrap bs-el-dialog"
|
||||
>
|
||||
<div class="text-style">
|
||||
<div
|
||||
v-for="(item,index) in reasonList"
|
||||
:key="index"
|
||||
class="item"
|
||||
>
|
||||
<span v-if="reasonList.length>1"> {{ index+1 }}、</span>{{ item }}
|
||||
</div>
|
||||
</div>
|
||||
<span
|
||||
slot="footer"
|
||||
class="dialog-footer"
|
||||
>
|
||||
<el-button
|
||||
type="primary"
|
||||
@click="handleClose"
|
||||
>
|
||||
确定
|
||||
</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
reasonList: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
checkDatasourceVisible: false
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleClose () {
|
||||
this.checkDatasourceVisible = false
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import '../../assets/style/bsTheme.scss';
|
||||
::v-deep .el-dialog__body{
|
||||
min-height: 0 !important;
|
||||
}
|
||||
.item{
|
||||
padding: 8px 0;
|
||||
}
|
||||
.text-style{
|
||||
padding-right: 80px;
|
||||
color: var(--bs-el-text);
|
||||
}
|
||||
</style>
|
||||
337
frontend/packages/DataSourceManagement/src/index.vue
Normal file
337
frontend/packages/DataSourceManagement/src/index.vue
Normal file
@@ -0,0 +1,337 @@
|
||||
<template>
|
||||
<div class="bs-container">
|
||||
<!--数据源查看-->
|
||||
<div class="inner-container">
|
||||
<el-form
|
||||
:inline="true"
|
||||
class="filter-container"
|
||||
>
|
||||
<el-form-item class="filter-input filter-item">
|
||||
<el-input
|
||||
v-model="searchForm.sourceName"
|
||||
class="bs-el-input"
|
||||
placeholder="请输入数据源名称"
|
||||
clearable
|
||||
maxlength="200"
|
||||
@clear="searchData"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item class="filter-item">
|
||||
<el-button
|
||||
type="primary"
|
||||
:loading="searchLoading"
|
||||
icon="el-icon-search"
|
||||
@click="searchData"
|
||||
>
|
||||
查询
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
<el-form-item class="filter-item">
|
||||
<el-button
|
||||
class="bs-el-button-default"
|
||||
@click="addSource"
|
||||
>
|
||||
新增
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div class="bs-table-box">
|
||||
<el-table
|
||||
v-table
|
||||
v-loading="searchLoading"
|
||||
height="0"
|
||||
class="bs-el-table bs-scrollbar"
|
||||
:element-loading-text="loadingText"
|
||||
:data="dataSourceList"
|
||||
@current-change="handleCurrentChange"
|
||||
>
|
||||
<el-empty slot="empty" />
|
||||
<el-table-column
|
||||
prop="sourceName"
|
||||
label="数据源名称"
|
||||
align="left"
|
||||
show-overflow-tooltip
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<el-radio
|
||||
v-if="isDialog"
|
||||
v-model="curRow"
|
||||
:label="scope.row"
|
||||
>
|
||||
{{ scope.row.sourceName }}
|
||||
</el-radio>
|
||||
<span v-else>{{ scope.row.sourceName }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="sourceType"
|
||||
label="类型"
|
||||
align="center"
|
||||
show-overflow-tooltip
|
||||
/>
|
||||
<el-table-column
|
||||
prop="remark"
|
||||
label="备注"
|
||||
align="left"
|
||||
show-overflow-tooltip
|
||||
/>
|
||||
<el-table-column
|
||||
label="操作"
|
||||
width="200"
|
||||
align="center"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<el-button
|
||||
class="bs-el-button-default"
|
||||
:loading="testBtnLoading.includes(scope.row.id)"
|
||||
@click="sourceLinkTest(scope.row)"
|
||||
>
|
||||
测试
|
||||
</el-button>
|
||||
<el-button
|
||||
class="bs-el-button-default"
|
||||
:disabled="scope.row.editable == 1 && !appCode"
|
||||
@click="viewSource(scope.row)"
|
||||
>
|
||||
编辑
|
||||
</el-button>
|
||||
<el-button
|
||||
class="bs-el-button-default"
|
||||
:loading="scope.row.loading"
|
||||
:disabled="scope.row.editable == 1 && !appCode"
|
||||
@click="handleDelete(scope.row)"
|
||||
>
|
||||
删除
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
<div class="bs-pagination">
|
||||
<el-pagination
|
||||
class="bs-el-pagination"
|
||||
popper-class="bs-el-pagination"
|
||||
:current-page="current"
|
||||
:page-sizes="[10, 20, 50, 100]"
|
||||
:page-size="size"
|
||||
:total="totalCount"
|
||||
background
|
||||
prev-text="上一页"
|
||||
next-text="下一页"
|
||||
layout="total, prev, pager, next,sizes"
|
||||
@size-change="sizeChangeHandle"
|
||||
@current-change="currentChangeHandle"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 数据源新增/编辑 -->
|
||||
<set-datasource
|
||||
ref="setDatasource"
|
||||
:app-code="appCode"
|
||||
@refreshTable="init"
|
||||
/>
|
||||
<checkDatasource
|
||||
ref="checkDatasource"
|
||||
:reason-list="reasonList"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import table from 'data-room-ui/js/utils/table.js'
|
||||
import '../style/index.scss'
|
||||
import { sourceLinkTest, datasourcePage, sourceRemove, dataSourceCheck } from 'data-room-ui/js/utils/dataSourceService'
|
||||
import setDatasource from './setDatasource.vue'
|
||||
import checkDatasource from './checkDatasource.vue'
|
||||
// import _ from 'lodash'
|
||||
import cloneDeep from 'lodash/cloneDeep'
|
||||
import { pageMixins } from 'data-room-ui/js/mixins/page'
|
||||
export default {
|
||||
name: 'DataSource',
|
||||
directives: {
|
||||
table // 注册自定义指令
|
||||
},
|
||||
components: {
|
||||
setDatasource,
|
||||
checkDatasource
|
||||
},
|
||||
// 路由守卫-离开页面
|
||||
beforeRouteLeave (to, from, next) {
|
||||
const layoutEl = document.querySelector('.big-screen-router-view-wrap')
|
||||
if (layoutEl) {
|
||||
layoutEl.style.paddingLeft = '0'
|
||||
}
|
||||
next()
|
||||
},
|
||||
// 路由进入页面
|
||||
beforeRouteEnter (to, from, next) {
|
||||
const layoutEl = document.querySelector('.big-screen-router-view-wrap')
|
||||
if (layoutEl) {
|
||||
layoutEl.style.paddingLeft = '16px'
|
||||
}
|
||||
next()
|
||||
},
|
||||
mixins: [pageMixins],
|
||||
props: {
|
||||
isDialog: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
sourceId: {
|
||||
type: String,
|
||||
default: null
|
||||
},
|
||||
appCode: {
|
||||
type: String,
|
||||
default: ''
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
reasonList: [],
|
||||
testBtnLoading: [],
|
||||
loadingText: '',
|
||||
deling: false,
|
||||
searchLoading: false,
|
||||
dataSourceList: [],
|
||||
searchForm: {
|
||||
sourceName: '',
|
||||
sourceType: ''
|
||||
},
|
||||
size: 10,
|
||||
current: 1,
|
||||
curRow: null
|
||||
}
|
||||
},
|
||||
created () { },
|
||||
mounted () {
|
||||
this.init()
|
||||
const layoutEl = document.querySelector('.big-screen-router-view-wrap')
|
||||
if (layoutEl) {
|
||||
layoutEl.style.paddingLeft = '16px'
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 获取当前选择数据集id
|
||||
getSourceId () {
|
||||
if (!this.isDialog) return
|
||||
if (this.curRow) {
|
||||
return this.curRow.id
|
||||
} else {
|
||||
return null
|
||||
}
|
||||
},
|
||||
// 单选数据集
|
||||
handleCurrentChange (currentRow) {
|
||||
this.curRow = currentRow
|
||||
},
|
||||
// 分页操作
|
||||
sizeChangeHandle (news) {
|
||||
this.size = news
|
||||
this.getDataList()
|
||||
},
|
||||
currentChangeHandle (newss) {
|
||||
this.current = newss
|
||||
this.getDataList()
|
||||
},
|
||||
// 查询数据
|
||||
searchData () {
|
||||
this.searchLoading = true
|
||||
this.loadingText = '正在查询数据...'
|
||||
// 重置current
|
||||
this.current = 1
|
||||
this.getDataList()
|
||||
},
|
||||
init () {
|
||||
this.current = 1
|
||||
this.getDataList()
|
||||
},
|
||||
getDataList () {
|
||||
const params = {
|
||||
current: this.current,
|
||||
size: this.size,
|
||||
sourceName: this.searchForm.sourceName,
|
||||
// sourceType: this.searchForm.sourceType,
|
||||
moduleCode: this.appCode
|
||||
}
|
||||
datasourcePage(params).then((data) => {
|
||||
this.totalCount = data.totalCount
|
||||
this.dataSourceList = data.list
|
||||
this.dataSourceList.forEach(r => {
|
||||
r.status = 0
|
||||
this.$set(r, 'loading', false)
|
||||
if (r.id === this.sourceId) {
|
||||
this.curRow = r
|
||||
}
|
||||
})
|
||||
this.searchLoading = false
|
||||
}).catch(() => {
|
||||
this.searchLoading = false
|
||||
})
|
||||
},
|
||||
addSource () {
|
||||
this.$refs.setDatasource.setDatasourceVisible = true
|
||||
this.$refs.setDatasource.title = '新增数据源'
|
||||
this.$refs.setDatasource.init()
|
||||
},
|
||||
viewSource (row) {
|
||||
// eslint-disable-next-line eqeqeq
|
||||
if (row.editable == 1 && !this.appCode) return
|
||||
this.$refs.setDatasource.setDatasourceVisible = true
|
||||
this.$refs.setDatasource.title = '编辑数据源'
|
||||
this.$refs.setDatasource.init(cloneDeep(row))
|
||||
},
|
||||
handleDelete (row) {
|
||||
// eslint-disable-next-line eqeqeq
|
||||
if (row.editable == 1 && !this.appCode) return
|
||||
row.loading = true
|
||||
dataSourceCheck(row.id).then((res) => {
|
||||
row.loading = false
|
||||
if (res.canDelete) {
|
||||
this.$confirm('确定删除当前数据源吗?', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning',
|
||||
customClass: 'bs-el-message-box'
|
||||
}).then(() => {
|
||||
sourceRemove(row.id).then((r) => {
|
||||
this.$message.success('删除成功')
|
||||
this.init()
|
||||
})
|
||||
})
|
||||
} else {
|
||||
this.reasonList = res.reasons
|
||||
this.$refs.checkDatasource.checkDatasourceVisible = true
|
||||
}
|
||||
})
|
||||
},
|
||||
sourceLinkTest (row) {
|
||||
this.testBtnLoading.push(row.id)
|
||||
this.linkLoading = true
|
||||
sourceLinkTest(row).then((r) => {
|
||||
this.$message.success(r)
|
||||
this.linkLoading = false
|
||||
this.testBtnLoading.splice(this.testBtnLoading.indexOf(row.id), 1)
|
||||
}).catch(() => {
|
||||
this.linkLoading = false
|
||||
this.testBtnLoading.splice(this.testBtnLoading.indexOf(row.id), 1)
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import '../../assets/style/bsTheme.scss';
|
||||
|
||||
.bs-pagination {
|
||||
margin-top: 4px;
|
||||
padding-right: 16px;
|
||||
::v-deep .el-input__inner {
|
||||
|
||||
width: 110px !important;
|
||||
border: none;
|
||||
background: var(--bs-el-background-1);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
438
frontend/packages/DataSourceManagement/src/setDatasource.vue
Normal file
438
frontend/packages/DataSourceManagement/src/setDatasource.vue
Normal file
@@ -0,0 +1,438 @@
|
||||
<template>
|
||||
<el-dialog
|
||||
width="700px"
|
||||
:title="title"
|
||||
:visible.sync="setDatasourceVisible"
|
||||
:append-to-body="true"
|
||||
:close-on-click-modal="false"
|
||||
:before-close="handleClose"
|
||||
class="bs-dialog-wrap bs-el-dialog"
|
||||
>
|
||||
<div
|
||||
v-loading="linkLoading"
|
||||
element-loading-text="正在测试连接..."
|
||||
style="padding-right: 80px;"
|
||||
>
|
||||
<el-form
|
||||
ref="dataForm"
|
||||
class="bs-el-form"
|
||||
:model="dataForm"
|
||||
:rules="dataForm.id ? updateRules : rules"
|
||||
size="small"
|
||||
label-position="right"
|
||||
:label-width="dataForm.advanceSettingFlag ? '200px' : '150px'"
|
||||
>
|
||||
<el-form-item
|
||||
label="类型"
|
||||
prop="sourceType"
|
||||
>
|
||||
<el-select
|
||||
v-model="dataForm.sourceType"
|
||||
placeholder="请选择类型"
|
||||
class="bs-el-select"
|
||||
popper-class="bs-el-select"
|
||||
clearable
|
||||
filterable
|
||||
@change="sourceTypeChange"
|
||||
>
|
||||
<el-option
|
||||
v-for="sourceType in sourceTypeList"
|
||||
:key="sourceType.code"
|
||||
:label="sourceType.label"
|
||||
:value="sourceType.code"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
label="数据源名称"
|
||||
prop="sourceName"
|
||||
>
|
||||
<el-input
|
||||
v-model="dataForm.sourceName"
|
||||
placeholder="请输入数据源名称"
|
||||
class="bs-el-input"
|
||||
maxlength="200"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
label="JDBC URL"
|
||||
prop="url"
|
||||
>
|
||||
<el-input
|
||||
v-model="dataForm.url"
|
||||
placeholder="请输入JDBC URL"
|
||||
class="bs-el-input"
|
||||
type="textarea"
|
||||
rows="4"
|
||||
@keydown.enter.native="textareaKeydown"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
label="用户名"
|
||||
prop="username"
|
||||
>
|
||||
<el-input
|
||||
v-model="dataForm.username"
|
||||
placeholder="请输入用户名"
|
||||
class="bs-el-input"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
label="密码"
|
||||
prop="password"
|
||||
>
|
||||
<el-input
|
||||
v-model="dataForm.password"
|
||||
:placeholder="dataForm.id ? '请输入密码，不输入代表不更新' : '请输入密码'"
|
||||
class="bs-el-input"
|
||||
type="password"
|
||||
show-password
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
label="备注"
|
||||
prop="remark"
|
||||
>
|
||||
<el-input
|
||||
v-model="dataForm.remark"
|
||||
placeholder="请输入备注"
|
||||
class="bs-el-input"
|
||||
type="textarea"
|
||||
rows="4"
|
||||
maxlength="200"
|
||||
@keydown.enter.native="textareaKeydown"
|
||||
/>
|
||||
</el-form-item>
|
||||
<template v-if="dataForm.advanceSettingFlag">
|
||||
<el-form-item label="初始化连接数">
|
||||
<el-input v-model="dataForm.initConnNum" />
|
||||
</el-form-item>
|
||||
<el-form-item label="最大活动连接数">
|
||||
<el-input v-model="dataForm.maxActiveConnNum" />
|
||||
</el-form-item>
|
||||
<el-form-item label="最大空闲连接数">
|
||||
<el-input v-model="dataForm.maxIdleConnNum" />
|
||||
</el-form-item>
|
||||
<el-form-item label="最小空闲连接数">
|
||||
<el-input v-model="dataForm.minIdleConnNum" />
|
||||
</el-form-item>
|
||||
<el-form-item label="最大等待时间 (ms)">
|
||||
<el-input v-model="dataForm.maxWaitConnNum" />
|
||||
</el-form-item>
|
||||
<el-form-item label="SQL验证查询">
|
||||
<el-input
|
||||
v-model="dataForm.sqlCheck"
|
||||
type="text"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="获取连接前校验">
|
||||
<el-select
|
||||
v-model="dataForm.getconnCheckFlag"
|
||||
clearable
|
||||
>
|
||||
<el-option
|
||||
label="是"
|
||||
:value="1"
|
||||
/>
|
||||
<el-option
|
||||
label="否"
|
||||
:value="0"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="归还连接前校验">
|
||||
<el-select
|
||||
v-model="dataForm.returnCheckFlag"
|
||||
clearable
|
||||
>
|
||||
<el-option
|
||||
label="是"
|
||||
:value="1"
|
||||
/>
|
||||
<el-option
|
||||
label="否"
|
||||
:value="0"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="开启空闲回收器校验">
|
||||
<el-select
|
||||
v-model="dataForm.startIdleCheckFlag"
|
||||
clearable
|
||||
>
|
||||
<el-option
|
||||
label="是"
|
||||
:value="1"
|
||||
/>
|
||||
<el-option
|
||||
label="否"
|
||||
:value="0"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="空闲连接回收器休眠时间 (ms)">
|
||||
<el-input v-model="dataForm.idleConnDormantTime" />
|
||||
</el-form-item>
|
||||
<el-form-item label="空闲连接回收检查数">
|
||||
<el-input v-model="dataForm.idleConnCheckNum" />
|
||||
</el-form-item>
|
||||
<el-form-item label="保持空闲最小时间值 (s)">
|
||||
<el-input v-model="dataForm.keepIdleMinTime" />
|
||||
</el-form-item>
|
||||
</template>
|
||||
</el-form>
|
||||
</div>
|
||||
|
||||
<span
|
||||
slot="footer"
|
||||
class="dialog-footer"
|
||||
>
|
||||
<el-button
|
||||
type="primary"
|
||||
@click="sourceLinkCheck"
|
||||
>
|
||||
测试
|
||||
</el-button>
|
||||
<el-button
|
||||
class="bs-el-button-default"
|
||||
@click="handleClose"
|
||||
>
|
||||
取消
|
||||
</el-button>
|
||||
<el-button
|
||||
type="primary"
|
||||
@click="submitForm"
|
||||
>
|
||||
确定
|
||||
</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { checkRepeat, sourceLinkTest, add, update } from 'data-room-ui/js/utils/dataSourceService'
|
||||
export default {
|
||||
props: {
|
||||
appCode: {
|
||||
type: String,
|
||||
default: ''
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
setDatasourceVisible: false,
|
||||
title: '',
|
||||
linkLoading: false,
|
||||
dataForm: {
|
||||
id: '',
|
||||
sourceName: '',
|
||||
sourceType: 'mysql',
|
||||
driverClassName: 'com.mysql.jdbc.Driver',
|
||||
username: '',
|
||||
password: '',
|
||||
url: 'jdbc:mysql://localhost:3306/db_name?serverTimezone=GMT%2B8&useUnicode=true&characterEncoding=utf-8&useSSL=false&useOldAliasMetadataBehavior=true',
|
||||
remark: ''
|
||||
},
|
||||
rules: {
|
||||
sourceType: [
|
||||
{ required: true, message: '请选择数据源类型', trigger: 'blur' }
|
||||
],
|
||||
sourceName: [
|
||||
{ required: true, message: '请输入数据源名称', trigger: 'blur' },
|
||||
{ validator: this.validateSourceName, trigger: 'blur' }
|
||||
],
|
||||
driverClassName: [
|
||||
{ required: true, message: '请选择连接驱动', trigger: 'blur' }
|
||||
],
|
||||
database: [
|
||||
{ required: true, message: '请输入数据库名称', trigger: 'blur' },
|
||||
{ pattern: /^[^\u4e00-\u9fa5]+$/, message: '数据库名称不能包含汉字' }
|
||||
],
|
||||
host: [
|
||||
{ required: true, message: '请输入主机号', trigger: 'blur' },
|
||||
{
|
||||
pattern: /((25[0-5]|2[0-4]\d|((1\d{2})|([1-9]?\d)))\.){3}(25[0-5]|2[0-4]\d|((1\d{2})|([1-9]?\d)))/,
|
||||
message: '主机号格式有误'
|
||||
}
|
||||
],
|
||||
port: [
|
||||
{ required: true, message: '请输入端口', trigger: 'blur' },
|
||||
{ pattern: /^[0-9]*$/, message: '端口号只能为数字' }
|
||||
],
|
||||
username: [
|
||||
{ required: true, message: '请输入用户名', trigger: 'blur' },
|
||||
{ pattern: /^[^\u4e00-\u9fa5]+$/, message: '用户名不能包含汉字' }
|
||||
],
|
||||
password: [
|
||||
{ required: true, message: '请输入密码', trigger: 'blur' }
|
||||
],
|
||||
url: [
|
||||
{ required: true, message: '请输入连接url', trigger: 'blur' }
|
||||
],
|
||||
coding: [
|
||||
{ required: true, message: '请选择编码', trigger: 'blur' }
|
||||
]
|
||||
},
|
||||
updateRules: {
|
||||
sourceType: [
|
||||
{ required: true, message: '请选择数据源类型', trigger: 'blur' }
|
||||
],
|
||||
sourceName: [
|
||||
{ required: true, message: '请输入数据源名称', trigger: 'blur' },
|
||||
{ validator: this.validateSourceName, trigger: 'blur' }
|
||||
],
|
||||
driverClassName: [
|
||||
{ required: true, message: '请选择连接驱动', trigger: 'blur' }
|
||||
],
|
||||
database: [
|
||||
{ required: true, message: '请输入数据库名称', trigger: 'blur' },
|
||||
{ pattern: /^[^\u4e00-\u9fa5]+$/, message: '数据库名称不能包含汉字' }
|
||||
],
|
||||
url: [
|
||||
{ required: true, message: '请输入连接url', trigger: 'blur' }
|
||||
],
|
||||
username: [
|
||||
{ required: true, message: '请输入用户名', trigger: 'blur' },
|
||||
{ pattern: /^[^\u4e00-\u9fa5]+$/, message: '用户名不能包含汉字' }
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
sourceTypeList () {
|
||||
return window.BS_CONFIG?.sourceTypeList || [
|
||||
{ label: 'Mysql', code: 'mysql', name: 'com.mysql.jdbc.Driver', url: 'jdbc:mysql://localhost:3306/db_name?serverTimezone=GMT%2B8&useUnicode=true&characterEncoding=utf-8&useSSL=false&useOldAliasMetadataBehavior=true' },
|
||||
{ label: 'ClickHouse', code: 'clickhouse', name: 'ru.yandex.clickhouse.ClickHouseDriver', url: 'jdbc:clickhouse://localhost:8123/db_name' },
|
||||
{ label: 'PostgreSQL', code: 'postgresql', name: 'org.postgresql.Driver', url: 'jdbc:postgresql://localhost:13308/db_name' },
|
||||
{ label: 'Oracle', code: 'oracle', name: 'oracle.jdbc.driver.OracleDriver', url: 'jdbc:oracle:thin:@localhost:1521:orcl' },
|
||||
{ label: 'Sqlserver', code: 'sqlserver', name: 'com.microsoft.sqlserver.jdbc.SQLServerDriver', url: 'jdbc:sqlserver://localhost:1433;databaseName=db_name' }
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 初始化
|
||||
init (row) {
|
||||
// 清除表单验证
|
||||
if (this.$refs.dataForm) {
|
||||
this.$refs.dataForm.clearValidate()
|
||||
}
|
||||
if (row && row.id) {
|
||||
this.dataForm = row
|
||||
}
|
||||
},
|
||||
// 名称校验
|
||||
validateSourceName (rule, value, callback) {
|
||||
checkRepeat({
|
||||
id: this.dataForm.id,
|
||||
sourceName: this.dataForm.sourceName,
|
||||
moduleCode: this.appCode
|
||||
}).then(r => {
|
||||
if (r) {
|
||||
callback(new Error('数据源名称已存在'))
|
||||
} else {
|
||||
callback()
|
||||
}
|
||||
})
|
||||
},
|
||||
// 数据源类型选择
|
||||
sourceTypeChange (code) {
|
||||
if (!this.dataForm.id && code) {
|
||||
this.dataForm.driverClassName = this.sourceTypeList.find(item => item.code === code)?.name
|
||||
this.$set(this.dataForm, 'url', this.sourceTypeList.find(item => item.code === code)?.url)
|
||||
}
|
||||
},
|
||||
// 阻止文本域回车换行
|
||||
textareaKeydown () {
|
||||
const e = window.event || arguments[0]
|
||||
if (e.key === 'Enter' || e.code === 'Enter' || e.keyCode === 13) {
|
||||
e.returnValue = false
|
||||
return false
|
||||
}
|
||||
},
|
||||
// 连接测试
|
||||
sourceLinkCheck () {
|
||||
let flag = 0
|
||||
this.$refs.dataForm.validate((valid) => {
|
||||
if (!valid) {
|
||||
flag = 1
|
||||
return false
|
||||
} else {
|
||||
if (flag === 0) {
|
||||
this.sourceLinkTest(this.dataForm)
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
sourceLinkTest (row) {
|
||||
this.linkLoading = true
|
||||
sourceLinkTest(row).then((r) => {
|
||||
this.$message.success(r)
|
||||
this.linkLoading = false
|
||||
}).catch(() => {
|
||||
this.linkLoading = false
|
||||
})
|
||||
},
|
||||
// 取消重制
|
||||
handleClose () {
|
||||
this.$refs.dataForm.resetFields()
|
||||
this.dataForm = {
|
||||
id: '',
|
||||
sourceName: '',
|
||||
sourceType: 'mysql',
|
||||
driverClassName: 'com.mysql.jdbc.Driver',
|
||||
username: '',
|
||||
password: '',
|
||||
url: 'jdbc:mysql://localhost:3306/db_name?serverTimezone=GMT%2B8&useUnicode=true&characterEncoding=utf-8&useSSL=false&useOldAliasMetadataBehavior=true',
|
||||
remark: ''
|
||||
}
|
||||
this.setDatasourceVisible = false
|
||||
},
|
||||
// 保存
|
||||
submitForm () {
|
||||
// mysql 需要包含useOldAliasMetadataBehavior
|
||||
// if (this.dataForm.sourceType == 'Mysql') {
|
||||
// if (this.dataForm.url.indexOf('useOldAliasMetadataBehavior') == -1) {
|
||||
// if (this.dataForm.url.indexOf('?') == -1) {
|
||||
// this.dataForm.url = this.dataForm.url + '?useOldAliasMetadataBehavior=true'
|
||||
// } else {
|
||||
// this.dataForm.url = this.dataForm.url + '&useOldAliasMetadataBehavior=true'
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
this.$refs.dataForm.validate((valid) => {
|
||||
if (valid) {
|
||||
if (this.dataForm.id) {
|
||||
update({
|
||||
...this.dataForm,
|
||||
moduleCode: this.appCode,
|
||||
editable: this.appCode ? 1 : 0
|
||||
}).then(() => {
|
||||
this.$message.success('保存成功')
|
||||
// 刷新表格
|
||||
this.$emit('refreshTable')
|
||||
this.handleClose()
|
||||
})
|
||||
} else {
|
||||
add({
|
||||
...this.dataForm,
|
||||
moduleCode: this.appCode,
|
||||
editable: this.appCode ? 1 : 0
|
||||
}).then(() => {
|
||||
this.$message.success('保存成功')
|
||||
// 刷新表格
|
||||
this.$emit('refreshTable')
|
||||
this.handleClose()
|
||||
})
|
||||
}
|
||||
} else {
|
||||
return false
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import '../../assets//style/bsTheme.scss';
|
||||
</style>
|
||||
Reference in New Issue
Block a user