Commit e46659aa by yuwei

2.0.0项目初始化

parent c1773542
...@@ -52,3 +52,11 @@ export function updateDataSource (data) { ...@@ -52,3 +52,11 @@ export function updateDataSource (data) {
data: data data: data
}) })
} }
export function checkConnection (data) {
return request({
url: '/data/factory/dataSources/checkConnection',
method: 'post',
data: data
})
}
...@@ -4,11 +4,15 @@ ...@@ -4,11 +4,15 @@
<div slot="header" class="clearfix"> <div slot="header" class="clearfix">
<span>{{ title }}</span> <span>{{ title }}</span>
<el-button-group style="float: right;"> <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 size="mini" icon="el-icon-back" round @click="showCard">返回</el-button>
</el-button-group> </el-button-group>
</div> </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-form-item label="数据源类型" prop="dbType">
<el-select v-model="form.dbType"> <el-select v-model="form.dbType">
<el-option <el-option
...@@ -22,21 +26,6 @@ ...@@ -22,21 +26,6 @@
<el-form-item label="数据源名称" prop="sourceName"> <el-form-item label="数据源名称" prop="sourceName">
<el-input v-model="form.sourceName" placeholder="请输入数据源名称" /> <el-input v-model="form.sourceName" placeholder="请输入数据源名称" />
</el-form-item> </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-form-item label="状态" prop="status">
<el-radio-group v-model="form.status"> <el-radio-group v-model="form.status">
<el-radio <el-radio
...@@ -50,12 +39,34 @@ ...@@ -50,12 +39,34 @@
<el-input v-model="form.remark" type="textarea" placeholder="请输入内容" /> <el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />
</el-form-item> </el-form-item>
</el-form> </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> </el-card>
</div> </div>
</template> </template>
<script> <script>
import { addDataSource } from '@/api/factory/datasource' import { addDataSource, checkConnection } from '@/api/factory/datasource'
export default { export default {
name: 'DataSourceAdd', name: 'DataSourceAdd',
...@@ -84,10 +95,10 @@ export default { ...@@ -84,10 +95,10 @@ export default {
loadingText: '保存', loadingText: '保存',
isDisabled: false isDisabled: false
}, },
active: 1,
// 表单参数 // 表单参数
form: { form: {
status: '1', status: '1'
dbSchema: {}
}, },
// 表单校验 // 表单校验
rules: { rules: {
...@@ -96,20 +107,23 @@ export default { ...@@ -96,20 +107,23 @@ export default {
], ],
sourceName: [ sourceName: [
{ required: true, message: '数据源名称不能为空', trigger: 'blur' } { required: true, message: '数据源名称不能为空', trigger: 'blur' }
], ]
'dbSchema.host': [ },
form2: {},
rules2: {
host: [
{ required: true, message: '主机不能为空', trigger: 'blur' } { required: true, message: '主机不能为空', trigger: 'blur' }
], ],
'dbSchema.port': [ port: [
{ required: true, message: '端口不能为空', trigger: 'blur' } { required: true, message: '端口不能为空', trigger: 'blur' }
], ],
'dbSchema.dbName': [ dbName: [
{ required: true, message: '数据库不能为空', trigger: 'blur' } { required: true, message: '数据库不能为空', trigger: 'blur' }
], ],
'dbSchema.username': [ username: [
{ required: true, message: '用户名不能为空', trigger: 'blur' } { required: true, message: '用户名不能为空', trigger: 'blur' }
], ],
'dbSchema.password': [ password: [
{ required: true, message: '密码不能为空', trigger: 'blur' } { required: true, message: '密码不能为空', trigger: 'blur' }
] ]
}, },
...@@ -135,10 +149,38 @@ export default { ...@@ -135,10 +149,38 @@ export default {
showCard () { showCard () {
this.$emit('showCard', this.showOptions) 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 () { submitForm: function () {
this.$refs['form'].validate(valid => { this.$refs['form2'].validate(valid => {
if (valid) { if (valid) {
this.form.dbSchema = this.form2
this.loadingOptions.loading = true this.loadingOptions.loading = true
this.loadingOptions.loadingText = '保存中...' this.loadingOptions.loadingText = '保存中...'
this.loadingOptions.isDisabled = true this.loadingOptions.isDisabled = true
......
...@@ -7,7 +7,11 @@ ...@@ -7,7 +7,11 @@
<el-button size="mini" icon="el-icon-back" round @click="showCard">返回</el-button> <el-button size="mini" icon="el-icon-back" round @click="showCard">返回</el-button>
</el-button-group> </el-button-group>
</div> </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-form-item label="数据源类型" prop="dbType">
<el-select v-model="form.dbType"> <el-select v-model="form.dbType">
<el-option <el-option
...@@ -21,21 +25,6 @@ ...@@ -21,21 +25,6 @@
<el-form-item label="数据源名称" prop="sourceName"> <el-form-item label="数据源名称" prop="sourceName">
<el-input v-model="form.sourceName" placeholder="请输入数据源名称" /> <el-input v-model="form.sourceName" placeholder="请输入数据源名称" />
</el-form-item> </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-form-item label="状态" prop="status">
<el-radio-group v-model="form.status"> <el-radio-group v-model="form.status">
<el-radio <el-radio
...@@ -49,12 +38,34 @@ ...@@ -49,12 +38,34 @@
<el-input v-model="form.remark" type="textarea" placeholder="请输入内容" /> <el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />
</el-form-item> </el-form-item>
</el-form> </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> </el-card>
</div> </div>
</template> </template>
<script> <script>
import { getDataSource } from '@/api/factory/datasource' import { getDataSource, checkConnection } from '@/api/factory/datasource'
export default { export default {
name: 'DataSourceDetail', name: 'DataSourceDetail',
...@@ -77,8 +88,10 @@ export default { ...@@ -77,8 +88,10 @@ export default {
showEdit: false, showEdit: false,
showDetail: false showDetail: false
}, },
active: 1,
// 表单参数 // 表单参数
form: {}, form: {},
form2: {},
// 状态数据字典 // 状态数据字典
statusOptions: [], statusOptions: [],
// 数据源类型数据字典 // 数据源类型数据字典
...@@ -108,6 +121,29 @@ export default { ...@@ -108,6 +121,29 @@ export default {
getDataSource(id).then(response => { getDataSource(id).then(response => {
if (response.success) { if (response.success) {
this.form = response.data 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 @@ ...@@ -4,11 +4,15 @@
<div slot="header" class="clearfix"> <div slot="header" class="clearfix">
<span>{{ title }}</span> <span>{{ title }}</span>
<el-button-group style="float: right;"> <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 size="mini" icon="el-icon-back" round @click="showCard">返回</el-button>
</el-button-group> </el-button-group>
</div> </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-form-item label="数据源类型" prop="dbType">
<el-select v-model="form.dbType"> <el-select v-model="form.dbType">
<el-option <el-option
...@@ -22,21 +26,6 @@ ...@@ -22,21 +26,6 @@
<el-form-item label="数据源名称" prop="sourceName"> <el-form-item label="数据源名称" prop="sourceName">
<el-input v-model="form.sourceName" placeholder="请输入数据源名称" /> <el-input v-model="form.sourceName" placeholder="请输入数据源名称" />
</el-form-item> </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-form-item label="状态" prop="status">
<el-radio-group v-model="form.status"> <el-radio-group v-model="form.status">
<el-radio <el-radio
...@@ -50,12 +39,34 @@ ...@@ -50,12 +39,34 @@
<el-input v-model="form.remark" type="textarea" placeholder="请输入内容" /> <el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />
</el-form-item> </el-form-item>
</el-form> </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> </el-card>
</div> </div>
</template> </template>
<script> <script>
import { getDataSource, updateDataSource } from '@/api/factory/datasource' import { getDataSource, updateDataSource, checkConnection } from '@/api/factory/datasource'
export default { export default {
name: 'DataSourceEdit', name: 'DataSourceEdit',
...@@ -84,6 +95,7 @@ export default { ...@@ -84,6 +95,7 @@ export default {
loadingText: '保存', loadingText: '保存',
isDisabled: false isDisabled: false
}, },
active: 1,
// 表单参数 // 表单参数
form: {}, form: {},
// 表单校验 // 表单校验
...@@ -93,7 +105,10 @@ export default { ...@@ -93,7 +105,10 @@ export default {
], ],
sourceName: [ sourceName: [
{ required: true, message: '数据源名称不能为空', trigger: 'blur' } { required: true, message: '数据源名称不能为空', trigger: 'blur' }
], ]
},
form2: {},
rules2: {
host: [ host: [
{ required: true, message: '主机不能为空', trigger: 'blur' } { required: true, message: '主机不能为空', trigger: 'blur' }
], ],
...@@ -139,13 +154,42 @@ export default { ...@@ -139,13 +154,42 @@ export default {
getDataSource(id).then(response => { getDataSource(id).then(response => {
if (response.success) { if (response.success) {
this.form = response.data 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 () { submitForm: function () {
this.$refs['form'].validate(valid => { this.$refs['form2'].validate(valid => {
if (valid) { if (valid) {
this.form.dbSchema = this.form2
this.loadingOptions.loading = true this.loadingOptions.loading = true
this.loadingOptions.loadingText = '保存中...' this.loadingOptions.loadingText = '保存中...'
this.loadingOptions.isDisabled = true this.loadingOptions.isDisabled = true
......
...@@ -415,9 +415,9 @@ export default { ...@@ -415,9 +415,9 @@ export default {
let status = row.status let status = row.status
let status_dictText = row.status_dictText let status_dictText = row.status_dictText
if (status === '0') { if (status === '0') {
return `<el-tag type="warning">{status_dictText}</el-tag>` return <el-tag type="warning">{status_dictText}</el-tag>
} else { } 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 { ...@@ -300,9 +300,9 @@ export default {
statusFormatter (row, column, cellValue, index) { statusFormatter (row, column, cellValue, index) {
let status = row.status let status = row.status
if (status === '0') { if (status === '0') {
return `<el-tag type="warning">失败</el-tag>` return <el-tag type="warning">失败</el-tag>
} else { } 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