5 changed files with 429 additions and 16 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