3 changed files with 272 additions and 1 deletions
@ -0,0 +1,246 @@ |
|||||
|
<!-- |
||||
|
@ 作者: 秦东 |
||||
|
@ 时间: 2024-04-19 11:37:41 |
||||
|
@ 备注: 编辑数据源 |
||||
|
--> |
||||
|
<script lang='ts' setup> |
||||
|
import { dateTypes,dataSourceTypes,interfaceTypes,dataBaseStruct } from "@/api/date/type" |
||||
|
import { getOrPostDate,postSaveData } from "@/api/date/apidate" |
||||
|
|
||||
|
const props = defineProps({ |
||||
|
isShow:{ |
||||
|
type:Boolean, |
||||
|
default:false |
||||
|
}, |
||||
|
dataInfo:{ |
||||
|
type:Object, |
||||
|
default(){ |
||||
|
return {} |
||||
|
} |
||||
|
} |
||||
|
}); |
||||
|
const ruleFormRef = ref(ElForm); // 用户表单 |
||||
|
const formData = reactive<dataBaseStruct>({}) |
||||
|
|
||||
|
const emits = defineEmits(["update:isShow","setResetting"]); |
||||
|
const tipTitle = ref("增加数据源") |
||||
|
const isOpen = computed({ |
||||
|
get() { |
||||
|
if(props.isShow){ |
||||
|
formData.id = props.dataInfo.id |
||||
|
formData.databaseName = props.dataInfo.databaseName; |
||||
|
formData.port = props.dataInfo.port; |
||||
|
formData.ipAddress = props.dataInfo.ipAddress; |
||||
|
formData.datasourceType = props.dataInfo.datasourceType; |
||||
|
formData.dataType = props.dataInfo.dataType; |
||||
|
formData.interfaceType = props.dataInfo.interfaceType; |
||||
|
formData.author = props.dataInfo.author |
||||
|
formData.account = props.dataInfo.account; |
||||
|
formData.password = props.dataInfo.password; |
||||
|
formData.id = props.dataInfo.id; |
||||
|
formData.redashDatasourceId = props.dataInfo.redashDatasourceId; |
||||
|
if(props.dataInfo.id && props.dataInfo.id != ""){ |
||||
|
tipTitle.value = "编辑数据源" |
||||
|
} |
||||
|
} |
||||
|
return props.isShow |
||||
|
}, |
||||
|
set(val: boolean) { |
||||
|
emits('update:isShow', val) |
||||
|
} |
||||
|
}); |
||||
|
/** |
||||
|
@ 作者: 秦东 |
||||
|
@ 时间: 2024-04-19 13:03:09 |
||||
|
@ 功能: 关闭 |
||||
|
*/ |
||||
|
const handleClose = () => { |
||||
|
emits('setResetting') |
||||
|
} |
||||
|
/** |
||||
|
@ 作者: 秦东 |
||||
|
@ 时间: 2024-04-19 13:08:37 |
||||
|
@ 功能: 保存数据 |
||||
|
*/ |
||||
|
const saveData = () => { |
||||
|
ruleFormRef.value.validate((valid: any) => { |
||||
|
if (valid){ |
||||
|
|
||||
|
if(formData.id != "" && formData.id != 0 && formData.id != "0"){ //编辑 |
||||
|
console.log("编辑---->保存数据--->",formData); |
||||
|
let sendData = { |
||||
|
url:import.meta.env.VITE_APP_SJZT_URL+"/database/app/datasource/update", |
||||
|
dataInfo:formData |
||||
|
} |
||||
|
console.log("编辑---->保存数据-1-->",sendData); |
||||
|
postSaveData(sendData) |
||||
|
.then((data:any)=>{ |
||||
|
if(data.code == 0){ |
||||
|
ElMessage.success(data.msg) |
||||
|
handleClose() |
||||
|
}else{ |
||||
|
ElMessage.error(data.msg) |
||||
|
} |
||||
|
}) |
||||
|
|
||||
|
}else{ //新增 |
||||
|
console.log("新增---->保存数据--->",formData); |
||||
|
let sendData = { |
||||
|
url:import.meta.env.VITE_APP_SJZT_URL+"/database/app/datasource/save", |
||||
|
dataInfo:formData |
||||
|
} |
||||
|
postSaveData(sendData) |
||||
|
.then((data:any)=>{ |
||||
|
if(data.code == 0){ |
||||
|
ElMessage.success(data.msg) |
||||
|
handleClose() |
||||
|
}else{ |
||||
|
ElMessage.error(data.msg) |
||||
|
} |
||||
|
}) |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
}); |
||||
|
} |
||||
|
/** |
||||
|
@ 作者: 秦东 |
||||
|
@ 时间: 2024-04-19 13:09:12 |
||||
|
@ 功能: 测试连接 |
||||
|
*/ |
||||
|
const openLink = () => { |
||||
|
ruleFormRef.value.validate((valid: any) => { |
||||
|
if (valid){ |
||||
|
let sendData = { |
||||
|
url:import.meta.env.VITE_APP_SJZT_URL+"/database/app/datasource/test", |
||||
|
methodType:"GET", |
||||
|
where:"databaseName="+formData.databaseName+"&port="+formData.port+"&ipAddress="+formData.ipAddress+"&datasourceType="+formData.datasourceType+"&dataType="+formData.dataType+"&interfaceType="+formData.interfaceType+"&account="+formData.account+"&password="+formData.password+"&id="+formData.id+"&redashDatasourceId="+formData.redashDatasourceId |
||||
|
} |
||||
|
console.log("连接-1->",sendData) |
||||
|
getOrPostDate("POST",sendData) |
||||
|
.then((data:any)=>{ |
||||
|
console.log("连接-->",data) |
||||
|
if(data.code == 200){ |
||||
|
ElMessage.success(data.msg) |
||||
|
}else{ |
||||
|
ElMessage.error(data.msg) |
||||
|
} |
||||
|
}) |
||||
|
} |
||||
|
}); |
||||
|
|
||||
|
} |
||||
|
/** |
||||
|
@ 作者: 秦东 |
||||
|
@ 时间: 2024-04-19 13:13:18 |
||||
|
@ 功能: 表单验证规则 |
||||
|
*/ |
||||
|
const dataFormRules = reactive({ |
||||
|
datasourceType: [{ required: true, message: "请选择数据库产品", trigger: "blur" }], |
||||
|
dataType: [{ required: true, message: "请选择数据类型", trigger: "blur" }], |
||||
|
databaseName: [{ required: true, message: "请输入数据库名称", trigger: "blur" }], |
||||
|
interfaceType: [{ required: true, message: "请选择接口方式", trigger: "blur" }], |
||||
|
ipAddress: [{ required: true, message: "请输入IP地址", trigger: "blur" }], |
||||
|
port: [{ required: true, message: "请输入端口号", trigger: "blur" }], |
||||
|
author: [{ required: true, message: "请输入账号权限", trigger: "blur" }], |
||||
|
account: [{ required: true, message: "请输入账号", trigger: "blur" }], |
||||
|
password: [{ required: true, message: "请输入密码", trigger: "blur" }], |
||||
|
}) |
||||
|
|
||||
|
</script> |
||||
|
<template> |
||||
|
<el-dialog |
||||
|
v-model="isOpen" |
||||
|
:title="tipTitle" |
||||
|
width="50%" |
||||
|
:before-close="handleClose" |
||||
|
> |
||||
|
<el-form |
||||
|
ref="ruleFormRef" |
||||
|
style="width: 100%" |
||||
|
:model="formData" |
||||
|
:rules="dataFormRules" |
||||
|
label-width="auto" |
||||
|
class="demo-ruleForm" |
||||
|
> |
||||
|
<el-row gutter="20"> |
||||
|
<el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12"> |
||||
|
<el-form-item label="数据库产品:" prop="datasourceType"> |
||||
|
<el-select v-model="formData.datasourceType" placeholder="请选择数据库产品" style="width: 240px" clearable > |
||||
|
<el-option |
||||
|
v-for="item in dataSourceTypes" |
||||
|
:key="item.value" |
||||
|
:label="item.label" |
||||
|
:value="item.value" |
||||
|
/> |
||||
|
</el-select> |
||||
|
</el-form-item> |
||||
|
</el-col> |
||||
|
<el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12"> |
||||
|
<el-form-item label="数据类型:" prop="dataType"> |
||||
|
<el-select v-model="formData.dataType" placeholder="请选择数据类型" clearable > |
||||
|
<el-option |
||||
|
v-for="item in dateTypes" |
||||
|
:key="item.value" |
||||
|
:label="item.label" |
||||
|
:value="item.value" |
||||
|
/> |
||||
|
</el-select> |
||||
|
</el-form-item> |
||||
|
</el-col> |
||||
|
<el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12"> |
||||
|
<el-form-item label="数据库名称:" prop="databaseName"> |
||||
|
<el-input v-model="formData.databaseName" placeholder="请输入数据库名称" clearable /> |
||||
|
</el-form-item> |
||||
|
</el-col> |
||||
|
<el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12"> |
||||
|
<el-form-item label="接口方式:" prop="interfaceType"> |
||||
|
<el-select v-model="formData.interfaceType" placeholder="请选择接口方式" clearable > |
||||
|
<el-option |
||||
|
v-for="item in interfaceTypes" |
||||
|
:key="item.value" |
||||
|
:label="item.label" |
||||
|
:value="item.value" |
||||
|
/> |
||||
|
</el-select> |
||||
|
</el-form-item> |
||||
|
</el-col> |
||||
|
<el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12"> |
||||
|
<el-form-item label="IP地址:" prop="ipAddress"> |
||||
|
<el-input v-model="formData.ipAddress" placeholder="请输入IP地址" clearable /> |
||||
|
</el-form-item> |
||||
|
</el-col> |
||||
|
<el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12"> |
||||
|
<el-form-item label="端口号:" prop="port"> |
||||
|
<el-input v-model="formData.port" placeholder="请输入端口号" clearable /> |
||||
|
</el-form-item> |
||||
|
</el-col> |
||||
|
<el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12"> |
||||
|
<el-form-item label="账号权限:" prop="author"> |
||||
|
<el-input v-model="formData.author" placeholder="请输入账号权限" clearable /> |
||||
|
</el-form-item> |
||||
|
</el-col> |
||||
|
<el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12"> |
||||
|
<el-form-item label="账号:" prop="account"> |
||||
|
<el-input v-model="formData.account" placeholder="请输入账号" clearable autocomplete="off" /> |
||||
|
</el-form-item> |
||||
|
</el-col> |
||||
|
<el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12"> |
||||
|
<el-form-item label="密码:" prop="password"> |
||||
|
<el-input type="new-password" show-password v-model="formData.password" placeholder="请输入密码" clearable autocomplete="off" /> |
||||
|
</el-form-item> |
||||
|
</el-col> |
||||
|
</el-row> |
||||
|
</el-form> |
||||
|
<template #footer> |
||||
|
<div class="dialog-footer"> |
||||
|
<el-button type="primary" @click="openLink">连接</el-button> |
||||
|
<el-button @click="handleClose">取消</el-button> |
||||
|
<el-button type="primary" @click="saveData">保存</el-button> |
||||
|
</div> |
||||
|
</template> |
||||
|
</el-dialog> |
||||
|
</template> |
||||
|
<style lang='scss' scoped> |
||||
|
|
||||
|
</style> |
||||
Loading…
Reference in new issue