Commit e46659aa by yuwei

2.0.0项目初始化

parent c1773542
......@@ -52,3 +52,11 @@ export function updateDataSource (data) {
data: data
})
}
export function checkConnection (data) {
return request({
url: '/data/factory/dataSources/checkConnection',
method: 'post',
data: data
})
}
......@@ -4,11 +4,15 @@
<div slot="header" class="clearfix">
<span>{{ title }}</span>
<el-button-group style="float: right;">
<el-button size="mini" icon="el-icon-plus" round @click="submitForm" :loading="loadingOptions.loading" :disabled="loadingOptions.isDisabled">{{loadingOptions.loadingText}}</el-button>
<el-button size="mini" icon="el-icon-plus" v-if="active == 2" round @click="submitForm" :loading="loadingOptions.loading" :disabled="loadingOptions.isDisabled">{{loadingOptions.loadingText}}</el-button>
<el-button size="mini" icon="el-icon-back" round @click="showCard">返回</el-button>
</el-button-group>
</div>
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
<el-steps :active="active" finish-status="success">
<el-step title="数据源信息"></el-step>
<el-step title="连接信息"></el-step>
</el-steps>
<el-form ref="form" :model="form" :rules="rules" label-width="80px" v-if="active == 1">
<el-form-item label="数据源类型" prop="dbType">
<el-select v-model="form.dbType">
<el-option
......@@ -22,21 +26,6 @@
<el-form-item label="数据源名称" prop="sourceName">
<el-input v-model="form.sourceName" placeholder="请输入数据源名称" />
</el-form-item>
<el-form-item label="主机" prop="dbSchema.host">
<el-input v-model="form.dbSchema.host" placeholder="请输入主机" />
</el-form-item>
<el-form-item label="端口" prop="dbSchema.port">
<el-input v-model="form.dbSchema.port" placeholder="请输入端口" />
</el-form-item>
<el-form-item label="数据库" prop="dbSchema.dbName">
<el-input v-model="form.dbSchema.dbName" placeholder="请输入数据库" />
</el-form-item>
<el-form-item label="用户名" prop="dbSchema.username">
<el-input v-model="form.dbSchema.username" placeholder="请输入用户名" />
</el-form-item>
<el-form-item label="密码" prop="dbSchema.password">
<el-input v-model="form.dbSchema.password" placeholder="请输入密码" />
</el-form-item>
<el-form-item label="状态" prop="status">
<el-radio-group v-model="form.status">
<el-radio
......@@ -50,12 +39,34 @@
<el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />
</el-form-item>
</el-form>
<el-form ref="form2" :model="form2" :rules="rules2" label-width="80px" v-if="active == 2">
<el-form-item label="主机" prop="host">
<el-input v-model="form2.host" placeholder="请输入主机" />
</el-form-item>
<el-form-item label="端口" prop="port">
<el-input v-model="form2.port" placeholder="请输入端口" />
</el-form-item>
<el-form-item label="数据库" prop="dbName">
<el-input v-model="form2.dbName" placeholder="请输入数据库" />
</el-form-item>
<el-form-item label="用户名" prop="username">
<el-input v-model="form2.username" placeholder="请输入用户名" />
</el-form-item>
<el-form-item label="密码" prop="password">
<el-input v-model="form2.password" placeholder="请输入密码" />
</el-form-item>
<el-form-item>
<el-button size="mini" type="primary" @click="handleCheckConnection">连通性检测</el-button>
</el-form-item>
</el-form>
<el-button style="margin-top: 12px;" @click="handleNextStep" v-if="active == 1">下一步</el-button>
<el-button style="margin-top: 12px;" @click="handleLastStep" v-if="active == 2">上一步</el-button>
</el-card>
</div>
</template>
<script>
import { addDataSource } from '@/api/factory/datasource'
import { addDataSource, checkConnection } from '@/api/factory/datasource'
export default {
name: 'DataSourceAdd',
......@@ -84,10 +95,10 @@ export default {
loadingText: '保存',
isDisabled: false
},
active: 1,
// 表单参数
form: {
status: '1',
dbSchema: {}
status: '1'
},
// 表单校验
rules: {
......@@ -96,20 +107,23 @@ export default {
],
sourceName: [
{ required: true, message: '数据源名称不能为空', trigger: 'blur' }
],
'dbSchema.host': [
]
},
form2: {},
rules2: {
host: [
{ required: true, message: '主机不能为空', trigger: 'blur' }
],
'dbSchema.port': [
port: [
{ required: true, message: '端口不能为空', trigger: 'blur' }
],
'dbSchema.dbName': [
dbName: [
{ required: true, message: '数据库不能为空', trigger: 'blur' }
],
'dbSchema.username': [
username: [
{ required: true, message: '用户名不能为空', trigger: 'blur' }
],
'dbSchema.password': [
password: [
{ required: true, message: '密码不能为空', trigger: 'blur' }
]
},
......@@ -135,10 +149,38 @@ export default {
showCard () {
this.$emit('showCard', this.showOptions)
},
/** 步骤条下一步 */
handleNextStep () {
this.$refs['form'].validate(valid => {
if (valid) {
this.active++
}
})
},
/** 步骤条上一步 */
handleLastStep () {
this.active--
},
/** 检测数据库连通性 */
handleCheckConnection () {
this.$refs['form2'].validate(valid => {
if (valid) {
this.form.dbSchema = this.form2
checkConnection(this.form).then(response => {
if (response.success) {
this.$message.success('连接成功')
} else {
this.$message.error('连接失败')
}
})
}
})
},
/** 提交按钮 */
submitForm: function () {
this.$refs['form'].validate(valid => {
this.$refs['form2'].validate(valid => {
if (valid) {
this.form.dbSchema = this.form2
this.loadingOptions.loading = true
this.loadingOptions.loadingText = '保存中...'
this.loadingOptions.isDisabled = true
......
......@@ -7,7 +7,11 @@
<el-button size="mini" icon="el-icon-back" round @click="showCard">返回</el-button>
</el-button-group>
</div>
<el-form ref="form" :model="form" label-width="80px" disabled>
<el-steps :active="active" finish-status="success">
<el-step title="数据源信息"></el-step>
<el-step title="连接信息"></el-step>
</el-steps>
<el-form ref="form" :model="form" :rules="rules" label-width="80px" v-if="active == 1">
<el-form-item label="数据源类型" prop="dbType">
<el-select v-model="form.dbType">
<el-option
......@@ -21,21 +25,6 @@
<el-form-item label="数据源名称" prop="sourceName">
<el-input v-model="form.sourceName" placeholder="请输入数据源名称" />
</el-form-item>
<el-form-item label="主机" prop="host">
<el-input v-model="form.dbSchema.host" placeholder="请输入主机" />
</el-form-item>
<el-form-item label="端口" prop="port">
<el-input v-model="form.dbSchema.port" placeholder="请输入端口" />
</el-form-item>
<el-form-item label="数据库" prop="dbName">
<el-input v-model="form.dbSchema.dbName" placeholder="请输入数据库" />
</el-form-item>
<el-form-item label="用户名" prop="username">
<el-input v-model="form.dbSchema.username" placeholder="请输入用户名" />
</el-form-item>
<el-form-item label="密码" prop="password">
<el-input v-model="form.dbSchema.password" placeholder="请输入密码" />
</el-form-item>
<el-form-item label="状态" prop="status">
<el-radio-group v-model="form.status">
<el-radio
......@@ -49,12 +38,34 @@
<el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />
</el-form-item>
</el-form>
<el-form ref="form2" :model="form2" :rules="rules2" label-width="80px" v-if="active == 2">
<el-form-item label="主机" prop="host">
<el-input v-model="form2.host" placeholder="请输入主机" />
</el-form-item>
<el-form-item label="端口" prop="port">
<el-input v-model="form2.port" placeholder="请输入端口" />
</el-form-item>
<el-form-item label="数据库" prop="dbName">
<el-input v-model="form2.dbName" placeholder="请输入数据库" />
</el-form-item>
<el-form-item label="用户名" prop="username">
<el-input v-model="form2.username" placeholder="请输入用户名" />
</el-form-item>
<el-form-item label="密码" prop="password">
<el-input v-model="form2.password" placeholder="请输入密码" />
</el-form-item>
<el-form-item>
<el-button size="mini" type="primary" @click="handleCheckConnection">连通性检测</el-button>
</el-form-item>
</el-form>
<el-button style="margin-top: 12px;" @click="handleNextStep" v-if="active == 1">下一步</el-button>
<el-button style="margin-top: 12px;" @click="handleLastStep" v-if="active == 2">上一步</el-button>
</el-card>
</div>
</template>
<script>
import { getDataSource } from '@/api/factory/datasource'
import { getDataSource, checkConnection } from '@/api/factory/datasource'
export default {
name: 'DataSourceDetail',
......@@ -77,8 +88,10 @@ export default {
showEdit: false,
showDetail: false
},
active: 1,
// 表单参数
form: {},
form2: {},
// 状态数据字典
statusOptions: [],
// 数据源类型数据字典
......@@ -108,6 +121,29 @@ export default {
getDataSource(id).then(response => {
if (response.success) {
this.form = response.data
this.form2 = this.form.dbSchema
}
})
},
/** 步骤条下一步 */
handleNextStep () {
this.$refs['form'].validate(valid => {
if (valid) {
this.active++
}
})
},
/** 步骤条上一步 */
handleLastStep () {
this.active--
},
/** 检测数据库连通性 */
handleCheckConnection () {
checkConnection(this.form).then(response => {
if (response.success) {
this.$message.success('连接成功')
} else {
this.$message.error('连接失败')
}
})
}
......
......@@ -4,11 +4,15 @@
<div slot="header" class="clearfix">
<span>{{ title }}</span>
<el-button-group style="float: right;">
<el-button size="mini" icon="el-icon-plus" round @click="submitForm" :loading="loadingOptions.loading" :disabled="loadingOptions.isDisabled">{{loadingOptions.loadingText}}</el-button>
<el-button size="mini" icon="el-icon-plus" v-if="active == 2" round @click="submitForm" :loading="loadingOptions.loading" :disabled="loadingOptions.isDisabled">{{loadingOptions.loadingText}}</el-button>
<el-button size="mini" icon="el-icon-back" round @click="showCard">返回</el-button>
</el-button-group>
</div>
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
<el-steps :active="active" finish-status="success">
<el-step title="数据源信息"></el-step>
<el-step title="连接信息"></el-step>
</el-steps>
<el-form ref="form" :model="form" :rules="rules" label-width="80px" v-if="active == 1">
<el-form-item label="数据源类型" prop="dbType">
<el-select v-model="form.dbType">
<el-option
......@@ -22,21 +26,6 @@
<el-form-item label="数据源名称" prop="sourceName">
<el-input v-model="form.sourceName" placeholder="请输入数据源名称" />
</el-form-item>
<el-form-item label="主机" prop="host">
<el-input v-model="form.dbSchema.host" placeholder="请输入主机" />
</el-form-item>
<el-form-item label="端口" prop="port">
<el-input v-model="form.dbSchema.port" placeholder="请输入端口" />
</el-form-item>
<el-form-item label="数据库" prop="dbName">
<el-input v-model="form.dbSchema.dbName" placeholder="请输入数据库" />
</el-form-item>
<el-form-item label="用户名" prop="username">
<el-input v-model="form.dbSchema.username" placeholder="请输入用户名" />
</el-form-item>
<el-form-item label="密码" prop="password">
<el-input v-model="form.dbSchema.password" placeholder="请输入密码" />
</el-form-item>
<el-form-item label="状态" prop="status">
<el-radio-group v-model="form.status">
<el-radio
......@@ -50,12 +39,34 @@
<el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />
</el-form-item>
</el-form>
<el-form ref="form2" :model="form2" :rules="rules2" label-width="80px" v-if="active == 2">
<el-form-item label="主机" prop="host">
<el-input v-model="form2.host" placeholder="请输入主机" />
</el-form-item>
<el-form-item label="端口" prop="port">
<el-input v-model="form2.port" placeholder="请输入端口" />
</el-form-item>
<el-form-item label="数据库" prop="dbName">
<el-input v-model="form2.dbName" placeholder="请输入数据库" />
</el-form-item>
<el-form-item label="用户名" prop="username">
<el-input v-model="form2.username" placeholder="请输入用户名" />
</el-form-item>
<el-form-item label="密码" prop="password">
<el-input v-model="form2.password" placeholder="请输入密码" />
</el-form-item>
<el-form-item>
<el-button size="mini" type="primary" @click="handleCheckConnection">连通性检测</el-button>
</el-form-item>
</el-form>
<el-button style="margin-top: 12px;" @click="handleNextStep" v-if="active == 1">下一步</el-button>
<el-button style="margin-top: 12px;" @click="handleLastStep" v-if="active == 2">上一步</el-button>
</el-card>
</div>
</template>
<script>
import { getDataSource, updateDataSource } from '@/api/factory/datasource'
import { getDataSource, updateDataSource, checkConnection } from '@/api/factory/datasource'
export default {
name: 'DataSourceEdit',
......@@ -84,6 +95,7 @@ export default {
loadingText: '保存',
isDisabled: false
},
active: 1,
// 表单参数
form: {},
// 表单校验
......@@ -93,7 +105,10 @@ export default {
],
sourceName: [
{ required: true, message: '数据源名称不能为空', trigger: 'blur' }
],
]
},
form2: {},
rules2: {
host: [
{ required: true, message: '主机不能为空', trigger: 'blur' }
],
......@@ -139,13 +154,42 @@ export default {
getDataSource(id).then(response => {
if (response.success) {
this.form = response.data
this.form2 = this.form.dbSchema
}
})
},
/** 步骤条下一步 */
handleNextStep () {
this.$refs['form'].validate(valid => {
if (valid) {
this.active++
}
})
},
/** 步骤条上一步 */
handleLastStep () {
this.active--
},
/** 检测数据库连通性 */
handleCheckConnection () {
this.$refs['form2'].validate(valid => {
if (valid) {
this.form.dbSchema = this.form2
checkConnection(this.form).then(response => {
if (response.success) {
this.$message.success('连接成功')
} else {
this.$message.error('连接失败')
}
})
}
})
},
/** 提交按钮 */
submitForm: function () {
this.$refs['form'].validate(valid => {
this.$refs['form2'].validate(valid => {
if (valid) {
this.form.dbSchema = this.form2
this.loadingOptions.loading = true
this.loadingOptions.loadingText = '保存中...'
this.loadingOptions.isDisabled = true
......
......@@ -415,9 +415,9 @@ export default {
let status = row.status
let status_dictText = row.status_dictText
if (status === '0') {
return `<el-tag type="warning">{status_dictText}</el-tag>`
return <el-tag type="warning">{status_dictText}</el-tag>
} else {
return `<el-tag type="success">{status_dictText}</el-tag>`
return <el-tag type="success">{status_dictText}</el-tag>
}
}
}
......
......@@ -300,9 +300,9 @@ export default {
statusFormatter (row, column, cellValue, index) {
let status = row.status
if (status === '0') {
return `<el-tag type="warning">失败</el-tag>`
return <el-tag type="warning">失败</el-tag>
} else {
return `<el-tag type="success">成功</el-tag>`
return <el-tag type="success">成功</el-tag>
}
}
}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment