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