数据源前台
parent
7a59d466fc
commit
7c6ec131a1
|
|
@ -1,40 +1,58 @@
|
|||
<template>
|
||||
<el-dialog v-model="visible" :title="!dataForm.id ? '新增' : '修改'" :close-on-click-modal="false">
|
||||
<el-form ref="dataFormRef" :model="dataForm" :rules="dataRules" label-width="120px" @keyup.enter="submitHandle()">
|
||||
<el-form-item label="名称" prop="name">
|
||||
<el-input v-model="dataForm.name" placeholder="名称"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="数据库类型" prop="databaseType">
|
||||
<fast-select v-model="dataForm.databaseType" dict-type="database_type" placeholder="请选择" clearable></fast-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="主机ip" prop="databaseIp">
|
||||
<el-input v-model="dataForm.databaseIp" placeholder="主机ip"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="端口" prop="databasePort">
|
||||
<el-input v-model="dataForm.databasePort" placeholder="端口"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="库名(服务名)" prop="databaseName">
|
||||
<el-input v-model="dataForm.databaseName" placeholder="库名(服务名)"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="用户名" prop="userName">
|
||||
<el-input v-model="dataForm.userName" placeholder="用户名"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="密码" prop="password">
|
||||
<el-input v-model="dataForm.password" placeholder="密码"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="jdbc连接串" prop="jdbcUrl">
|
||||
<el-input v-model="dataForm.jdbcUrl" placeholder="jdbc连接串(若填写将以填写的内容连接,否则会后台自动构建连接)"></el-input>
|
||||
</el-form-item>
|
||||
<!-- <el-form-item label="所属项目" prop="projectId">
|
||||
<fast-project-select v-model="dataForm.projectId" placeholder="所属项目" clearable></fast-project-select>
|
||||
</el-form-item> -->
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<el-button @click="visible = false">取消</el-button>
|
||||
<el-button type="primary" @click="test()">测试</el-button>
|
||||
<el-button type="primary" @click="submitHandle()">确定</el-button>
|
||||
</template>
|
||||
</el-dialog>
|
||||
<el-dialog v-model="visible" :title="!dataForm.id ? '新增' : '修改'" :close-on-click-modal="false">
|
||||
<el-form ref="dataFormRef" :model="dataForm" :rules="dataRules" label-width="120px" @keyup.enter="submitHandle()">
|
||||
<el-form-item label="名称" prop="name">
|
||||
<el-input v-model="dataForm.name" placeholder="名称"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="是否是关系型数据库" prop="isJdbc">
|
||||
<el-radio-group v-model="dataForm.isJdbc">
|
||||
<el-radio label="是"></el-radio>
|
||||
<el-radio label="否"></el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<!---方娇-->
|
||||
<el-form-item label="数据库类型" prop="databaseType">
|
||||
<fast-select v-model="dataForm.databaseType" dict-type="database_type" placeholder="请选择" clearable></fast-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="主机ip" prop="databaseIp">
|
||||
<el-input v-model="dataForm.databaseIp" placeholder="主机ip"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="端口" prop="databasePort">
|
||||
<el-input v-model="dataForm.databasePort" placeholder="端口"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="索引" prop="databaseIndex" v-if="dataForm.databaseType==19">
|
||||
<el-input v-model="dataForm.databaseIndex" placeholder="索引"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="文档" prop="databaseDocument" v-if="dataForm.databaseType==19">
|
||||
<el-input v-model="dataForm.databaseDocument" placeholder="文档"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="文档" prop="databaseKafKa" v-if="dataForm.databaseType==18">
|
||||
<el-input v-model="dataForm.databaseKafKa" placeholder="文档"></el-input>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="库名(服务名)" prop="databaseName" v-if="dataForm.databaseType!=17 && dataForm.databaseType!=18 && dataForm.databaseType!=19 && dataForm.databaseType!=20">
|
||||
<el-input v-model="dataForm.databaseName" placeholder="库名(服务名)"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="用户名" prop="userName" v-if="dataForm.databaseType!=17 && dataForm.databaseType!=18 && dataForm.databaseType!=19 && dataForm.databaseType!=20">
|
||||
<el-input v-model="dataForm.userName" placeholder="用户名"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="密码" prop="password">
|
||||
<el-input v-model="dataForm.password" placeholder="密码"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="jdbc连接串" prop="jdbcUrl">
|
||||
<el-input v-model="dataForm.jdbcUrl" placeholder="jdbc连接串(若填写将以填写的内容连接,否则会后台自动构建连接)"></el-input>
|
||||
</el-form-item>
|
||||
|
||||
<!-- <el-form-item label="所属项目" prop="projectId">
|
||||
<fast-project-select v-model="dataForm.projectId" placeholder="所属项目" clearable></fast-project-select>
|
||||
</el-form-item> -->
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<el-button @click="visible = false">取消</el-button>
|
||||
<el-button type="primary" @click="test()">测试</el-button>
|
||||
<el-button type="primary" @click="submitHandle()">确定</el-button>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
|
|
@ -48,86 +66,87 @@ const visible = ref(false)
|
|||
const dataFormRef = ref()
|
||||
|
||||
const dataForm = reactive({
|
||||
name: '',
|
||||
databaseType: '',
|
||||
databaseIp: '',
|
||||
databasePort: '',
|
||||
databaseName: '',
|
||||
userName: '',
|
||||
password: '',
|
||||
jdbcUrl: '',
|
||||
projectId: ''
|
||||
})
|
||||
name: '',
|
||||
databaseType: '',
|
||||
databaseIp: '',
|
||||
databasePort: '',
|
||||
databaseName: '',
|
||||
userName: '',
|
||||
password: '',
|
||||
jdbcUrl: '',
|
||||
projectId: '',
|
||||
isJdbc: '',
|
||||
databaseIndex: '',
|
||||
databaseDocument: '',
|
||||
databaseKafKa: '',
|
||||
})
|
||||
|
||||
const init = (id?: number) => {
|
||||
visible.value = true
|
||||
dataForm.id = ''
|
||||
visible.value = true
|
||||
dataForm.id = ''
|
||||
|
||||
// 重置表单数据
|
||||
if (dataFormRef.value) {
|
||||
dataFormRef.value.resetFields()
|
||||
}
|
||||
// 重置表单数据
|
||||
if (dataFormRef.value) {
|
||||
dataFormRef.value.resetFields()
|
||||
}
|
||||
|
||||
if (id) {
|
||||
getDatabase(id)
|
||||
}
|
||||
if (id) {
|
||||
getDatabase(id)
|
||||
}
|
||||
}
|
||||
|
||||
const getDatabase = (id: number) => {
|
||||
useDatabaseApi(id).then(res => {
|
||||
Object.assign(dataForm, res.data)
|
||||
})
|
||||
const getDatabase = (id: number) => {
|
||||
useDatabaseApi(id).then(res => {
|
||||
Object.assign(dataForm, res.data)
|
||||
})
|
||||
}
|
||||
|
||||
const dataRules = ref({
|
||||
name: [{ required: true, message: '必填项不能为空', trigger: 'blur' }],
|
||||
databaseType: [{ required: true, message: '必填项不能为空', trigger: 'blur' }],
|
||||
databaseIp: [{ required: true, message: '必填项不能为空', trigger: 'blur' }],
|
||||
databasePort: [{ required: true, message: '必填项不能为空', trigger: 'blur' }],
|
||||
databaseName: [{ required: true, message: '必填项不能为空', trigger: 'blur' }],
|
||||
userName: [{ required: true, message: '必填项不能为空', trigger: 'blur' }],
|
||||
password: [{ required: true, message: '必填项不能为空', trigger: 'blur' }],
|
||||
/* projectId: [{ required: true, message: '必填项不能为空', trigger: 'blur' }] */})
|
||||
name: [{ required: true, message: '必填项不能为空', trigger: 'blur' }],
|
||||
databaseType: [{ required: true, message: '必填项不能为空', trigger: 'blur' }],
|
||||
databaseIp: [{ required: true, message: '必填项不能为空', trigger: 'blur' }],
|
||||
databasePort: [{ required: true, message: '必填项不能为空', trigger: 'blur' }],
|
||||
/* projectId: [{ required: true, message: '必填项不能为空', trigger: 'blur' }] */})
|
||||
|
||||
// 表单提交
|
||||
const submitHandle = () => {
|
||||
dataFormRef.value.validate((valid: boolean) => {
|
||||
if (!valid) {
|
||||
return false
|
||||
}
|
||||
dataFormRef.value.validate((valid: boolean) => {
|
||||
if (!valid) {
|
||||
return false
|
||||
}
|
||||
|
||||
useDatabaseSubmitApi(dataForm).then(() => {
|
||||
ElMessage.success({
|
||||
message: '操作成功',
|
||||
duration: 500,
|
||||
onClose: () => {
|
||||
visible.value = false
|
||||
emit('refreshDataList')
|
||||
}
|
||||
})
|
||||
})
|
||||
})
|
||||
useDatabaseSubmitApi(dataForm).then(() => {
|
||||
ElMessage.success({
|
||||
message: '操作成功',
|
||||
duration: 500,
|
||||
onClose: () => {
|
||||
visible.value = false
|
||||
emit('refreshDataList')
|
||||
}
|
||||
})
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
// 测试连接
|
||||
const test = () => {
|
||||
dataFormRef.value.validate((valid: boolean) => {
|
||||
if (!valid) {
|
||||
return false
|
||||
}
|
||||
testOnline(dataForm).then(() => {
|
||||
ElMessage.success({
|
||||
message: '测试连接成功',
|
||||
duration: 500,
|
||||
onClose: () => {
|
||||
emit('refreshDataList')
|
||||
}
|
||||
})
|
||||
})
|
||||
})
|
||||
dataFormRef.value.validate((valid: boolean) => {
|
||||
if (!valid) {
|
||||
return false
|
||||
}
|
||||
testOnline(dataForm).then(() => {
|
||||
ElMessage.success({
|
||||
message: '测试连接成功',
|
||||
duration: 500,
|
||||
onClose: () => {
|
||||
emit('refreshDataList')
|
||||
}
|
||||
})
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
defineExpose({
|
||||
init
|
||||
init
|
||||
})
|
||||
</script>
|
||||
|
|
|
|||
Loading…
Reference in New Issue