|
|
|
|
<!--
|
|
|
|
|
@ 作者: 秦东
|
|
|
|
|
@ 时间: 2024-04-18 14:52:06
|
|
|
|
|
@ 备注: 数据资源
|
|
|
|
|
-->
|
|
|
|
|
<script lang='ts' setup>
|
|
|
|
|
import { getOrPostDate,postSaveData } from "@/api/date/apidate"
|
|
|
|
|
import { dateTypes,dataSourceTypes,interfaceTypes,dataBaseStruct } from "@/api/date/type"
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
@ 作者: 秦东
|
|
|
|
|
@ 时间: 2024-04-19 11:50:16
|
|
|
|
|
@ 功能: 引入页面
|
|
|
|
|
*/
|
|
|
|
|
import EditAssets from "@/views/date/editAssets.vue"
|
|
|
|
|
|
|
|
|
|
const editAssetsOpen = ref(false)
|
|
|
|
|
const editAssetsInfo = reactive<dataBaseStruct>({})
|
|
|
|
|
const dataLoading = ref(false)
|
|
|
|
|
const dataList = ref<dataBaseStruct[]>([])
|
|
|
|
|
const searchData = reactive({
|
|
|
|
|
pageNum: 1,
|
|
|
|
|
pageSize: 10,
|
|
|
|
|
databaseName:"",
|
|
|
|
|
dataType:"",
|
|
|
|
|
total:0
|
|
|
|
|
})
|
|
|
|
|
/**
|
|
|
|
|
@ 作者: 秦东
|
|
|
|
|
@ 时间: 2024-04-18 14:57:24
|
|
|
|
|
@ 功能: 获取数据
|
|
|
|
|
*/
|
|
|
|
|
const gainDateList = () =>{
|
|
|
|
|
dataLoading.value = true;
|
|
|
|
|
let sendData = {
|
|
|
|
|
url:import.meta.env.VITE_APP_SJZT_URL+"/database/app/datasource/page",
|
|
|
|
|
methodType:"GET",
|
|
|
|
|
where:"pageNum="+searchData.pageNum+"&pageSize="+searchData.pageSize+"&databaseName="+searchData.databaseName+"&dataType="+searchData.dataType
|
|
|
|
|
}
|
|
|
|
|
getOrPostDate("POST",sendData)
|
|
|
|
|
.then((data:any)=>{
|
|
|
|
|
|
|
|
|
|
searchData.total = data.data.total
|
|
|
|
|
if(data.data.records&&data.data.records.length > 0){
|
|
|
|
|
data.data.records.forEach((item:any)=>{
|
|
|
|
|
dateTypes.forEach((items:any)=>{
|
|
|
|
|
if(items.value == item.dataType){
|
|
|
|
|
item.dataTypeName = items.label
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
dataSourceTypes.forEach((itemsd:any)=>{
|
|
|
|
|
if(itemsd.value == item.datasourceType){
|
|
|
|
|
item.datasourceTypeName = itemsd.label
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
interfaceTypes.forEach((interItem:any)=>{
|
|
|
|
|
if(interItem.value == item.interfaceType){
|
|
|
|
|
item.interfaceTypeName = interItem.label
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
dataList.value = data.data.records
|
|
|
|
|
// console.log("获取数据=====>",searchData)
|
|
|
|
|
dataLoading.value = false
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
/**
|
|
|
|
|
@ 作者: 秦东
|
|
|
|
|
@ 时间: 2024-04-19 08:09:40
|
|
|
|
|
@ 功能: 判断数据库类型
|
|
|
|
|
*/
|
|
|
|
|
function dataBaseType (val:any) {
|
|
|
|
|
// console.log("判断数据库类型-->",val,dateTypes,val.dataType)
|
|
|
|
|
let titleVal = ""
|
|
|
|
|
if(val.dataType){
|
|
|
|
|
try{
|
|
|
|
|
dateTypes.forEach((item:any)=>{
|
|
|
|
|
// console.log("判断数据库类型-1->",item.value,val.dataType,item.value==val.dataType)
|
|
|
|
|
if(item.value == val.dataType){
|
|
|
|
|
// console.log("判断数据库类型-3->",item.value,val.dataType,item.value==val.dataType,item.label)
|
|
|
|
|
titleVal = item.label
|
|
|
|
|
// return item.label
|
|
|
|
|
throw item.label
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
} catch(e) {
|
|
|
|
|
// console.log("判断数据库类型-12->",e)
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
// console.log("判断数据库类型-2->",titleVal)
|
|
|
|
|
return titleVal
|
|
|
|
|
}
|
|
|
|
|
/**
|
|
|
|
|
@ 作者: 秦东
|
|
|
|
|
@ 时间: 2024-04-19 09:21:09
|
|
|
|
|
@ 功能: 重置查询条件
|
|
|
|
|
*/
|
|
|
|
|
const resuct = () =>{
|
|
|
|
|
searchData.pageNum=1
|
|
|
|
|
searchData.pageSize=10
|
|
|
|
|
searchData.databaseName=""
|
|
|
|
|
searchData.dataType=""
|
|
|
|
|
gainDateList()
|
|
|
|
|
}
|
|
|
|
|
/**
|
|
|
|
|
@ 作者: 秦东
|
|
|
|
|
@ 时间: 2024-04-19 09:28:53
|
|
|
|
|
@ 功能: 选择每页显示几条数据
|
|
|
|
|
*/
|
|
|
|
|
const handleSizeChange = (val: number) => {
|
|
|
|
|
searchData.pageSize=val
|
|
|
|
|
gainDateList()
|
|
|
|
|
}
|
|
|
|
|
/**
|
|
|
|
|
@ 作者: 秦东
|
|
|
|
|
@ 时间: 2024-04-19 09:28:53
|
|
|
|
|
@ 功能: 翻页操作
|
|
|
|
|
*/
|
|
|
|
|
const handleCurrentChange = (val: number) => {
|
|
|
|
|
searchData.pageNum=val
|
|
|
|
|
gainDateList()
|
|
|
|
|
}
|
|
|
|
|
/**
|
|
|
|
|
@ 作者: 秦东
|
|
|
|
|
@ 时间: 2024-04-19 10:44:53
|
|
|
|
|
@ 功能: 连接
|
|
|
|
|
*/
|
|
|
|
|
const openLink = (val:any) => {
|
|
|
|
|
|
|
|
|
|
let sendData = {
|
|
|
|
|
url:import.meta.env.VITE_APP_SJZT_URL+"/database/app/datasource/test",
|
|
|
|
|
methodType:"GET",
|
|
|
|
|
where:"databaseName="+val.databaseName+"&port="+val.port+"&ipAddress="+val.ipAddress+"&datasourceType="+val.datasourceType+"&dataType="+val.dataType+"&interfaceType="+val.interfaceType+"&account="+val.account+"&password="+val.password+"&id="+val.id+"&redashDatasourceId="+val.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)
|
|
|
|
|
}
|
|
|
|
|
gainDateList()
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
onMounted(()=>{
|
|
|
|
|
|
|
|
|
|
gainDateList()
|
|
|
|
|
})
|
|
|
|
|
/**
|
|
|
|
|
@ 作者: 秦东
|
|
|
|
|
@ 时间: 2024-04-19 11:54:12
|
|
|
|
|
@ 功能: 重置
|
|
|
|
|
*/
|
|
|
|
|
const resettingHandel = () => {
|
|
|
|
|
editAssetsOpen.value = false
|
|
|
|
|
editAssetsInfo.databaseName = "";
|
|
|
|
|
editAssetsInfo.port = "";
|
|
|
|
|
editAssetsInfo.ipAddress = "";
|
|
|
|
|
editAssetsInfo.datasourceType = "";
|
|
|
|
|
editAssetsInfo.dataType = "";
|
|
|
|
|
editAssetsInfo.interfaceType = "";
|
|
|
|
|
editAssetsInfo.account = "";
|
|
|
|
|
editAssetsInfo.password = "";
|
|
|
|
|
editAssetsInfo.id = "";
|
|
|
|
|
editAssetsInfo.redashDatasourceId = "";
|
|
|
|
|
editAssetsInfo.author = ""
|
|
|
|
|
gainDateList()
|
|
|
|
|
}
|
|
|
|
|
/**
|
|
|
|
|
@ 作者: 秦东
|
|
|
|
|
@ 时间: 2024-04-19 12:59:18
|
|
|
|
|
@ 功能: 新增数据源
|
|
|
|
|
*/
|
|
|
|
|
const addDataBase = () => {
|
|
|
|
|
editAssetsInfo.id = ""
|
|
|
|
|
editAssetsOpen.value = true
|
|
|
|
|
}
|
|
|
|
|
/**
|
|
|
|
|
@ 作者: 秦东
|
|
|
|
|
@ 时间: 2024-04-19 13:35:02
|
|
|
|
|
@ 功能: 编辑数据源
|
|
|
|
|
*/
|
|
|
|
|
const editDataBase = (val:dataBaseStruct) => {
|
|
|
|
|
editAssetsInfo.databaseName = val.databaseName;
|
|
|
|
|
editAssetsInfo.port = val.port;
|
|
|
|
|
editAssetsInfo.ipAddress = val.ipAddress;
|
|
|
|
|
editAssetsInfo.datasourceType = val.datasourceType;
|
|
|
|
|
editAssetsInfo.dataType = val.dataType;
|
|
|
|
|
editAssetsInfo.interfaceType = val.interfaceType;
|
|
|
|
|
editAssetsInfo.account = val.account;
|
|
|
|
|
editAssetsInfo.password = val.password;
|
|
|
|
|
editAssetsInfo.id = val.id;
|
|
|
|
|
editAssetsInfo.redashDatasourceId = val.redashDatasourceId;
|
|
|
|
|
editAssetsInfo.author = val.author
|
|
|
|
|
editAssetsOpen.value = true
|
|
|
|
|
}
|
|
|
|
|
/**
|
|
|
|
|
@ 作者: 秦东
|
|
|
|
|
@ 时间: 2024-04-19 14:26:27
|
|
|
|
|
@ 功能: 删除数据
|
|
|
|
|
*/
|
|
|
|
|
const delDataBase = (val:dataBaseStruct) => {
|
|
|
|
|
ElMessageBox.confirm("确认删除<"+val.databaseName+">此数据项?一经删除！数据将不可恢复！", "警告", {
|
|
|
|
|
confirmButtonText: "确定",
|
|
|
|
|
cancelButtonText: "取消",
|
|
|
|
|
type: "warning",
|
|
|
|
|
}).then(() => {
|
|
|
|
|
let sendData = {
|
|
|
|
|
url:import.meta.env.VITE_APP_SJZT_URL+"/database/app/datasource/delete",
|
|
|
|
|
dataInfo:val
|
|
|
|
|
}
|
|
|
|
|
postSaveData(sendData)
|
|
|
|
|
.then((data:any)=>{
|
|
|
|
|
if(data.code == 0){
|
|
|
|
|
ElMessage.success(data.msg)
|
|
|
|
|
gainDateList()
|
|
|
|
|
}else{
|
|
|
|
|
ElMessage.error(data.msg)
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
</script>
|
|
|
|
|
<template>
|
|
|
|
|
<div class="dataBox">
|
|
|
|
|
<EditAssets v-model:is-show="editAssetsOpen" :data-info="editAssetsInfo" @setResetting="resettingHandel" />
|
|
|
|
|
<el-card style="width: 100%">
|
|
|
|
|
<template #header>
|
|
|
|
|
<div class="card_header">
|
|
|
|
|
<div>
|
|
|
|
|
<el-form :inline="true" :model="formInline" class="demo-form-inline">
|
|
|
|
|
<el-form-item label="数据源名称">
|
|
|
|
|
<el-input v-model="searchData.databaseName" placeholder="请输入" clearable />
|
|
|
|
|
</el-form-item>
|
|
|
|
|
<el-form-item label="数据源类型">
|
|
|
|
|
<el-select v-model="searchData.dataType" placeholder="请选择" clearable style="width: 180px;">
|
|
|
|
|
<el-option
|
|
|
|
|
v-for="item in dateTypes"
|
|
|
|
|
:key="item.value"
|
|
|
|
|
:label="item.label"
|
|
|
|
|
:value="item.value"
|
|
|
|
|
/>
|
|
|
|
|
</el-select>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
</el-form>
|
|
|
|
|
</div>
|
|
|
|
|
<div>
|
|
|
|
|
<el-button type="primary" @click="gainDateList"><el-space wrap><i class="fa fa-search "></i>查询</el-space></el-button>
|
|
|
|
|
<el-button plain @click="resuct">重置</el-button>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
<el-row class="newAddBox">
|
|
|
|
|
<el-col :span="24">
|
|
|
|
|
<el-button type="primary" @click="addDataBase"><el-space wrap><i class="fa fa-plus "></i>新增数据源</el-space></el-button>
|
|
|
|
|
<el-button plain>导出数据源</el-button>
|
|
|
|
|
</el-col>
|
|
|
|
|
</el-row>
|
|
|
|
|
<el-table :data="dataList" v-loading="dataLoading" stripe :header-cell-style="{'background':'#f5f8fd'}" style="width: 100%">
|
|
|
|
|
<el-table-column fixed type="selection" width="50" align="center" />
|
|
|
|
|
<el-table-column fixed label="序号" type="index" width="60" align="center" />
|
|
|
|
|
<el-table-column prop="datasourceTypeName" label="数据库产品" width="120" />
|
|
|
|
|
<el-table-column prop="dataTypeName" label="数据库类型" width="160" />
|
|
|
|
|
<el-table-column prop="databaseName" label="数据库名称" width="160" />
|
|
|
|
|
<el-table-column prop="interfaceTypeName" label="接口方式" width="100" />
|
|
|
|
|
<el-table-column prop="ipAddress" label="IP地址" width="160" />
|
|
|
|
|
<el-table-column prop="port" label="端口" align="center" />
|
|
|
|
|
<el-table-column prop="account" label="帐号" width="160" />
|
|
|
|
|
<el-table-column prop="author" label="帐号权限" width="100" align="center" />
|
|
|
|
|
<el-table-column prop="status" label="状态" width="100" align="center">
|
|
|
|
|
<template #default="scope">
|
|
|
|
|
<el-text v-if="scope.row.status==1" class="mx-1" type="primary">已连接</el-text>
|
|
|
|
|
<el-text v-else class="mx-1" type="danger">连接失败</el-text>
|
|
|
|
|
</template>
|
|
|
|
|
</el-table-column>
|
|
|
|
|
<el-table-column fixed="right" label="操作" width="250" align="center">
|
|
|
|
|
<template #default="scope">
|
|
|
|
|
<el-button class="oper-btn" plain @click="openLink(scope.row)">连接</el-button>
|
|
|
|
|
<el-button class="oper-btn" plain @click="editDataBase(scope.row)">编辑</el-button>
|
|
|
|
|
<el-button class="oper-btn" plain @click="delDataBase(scope.row)">删除</el-button>
|
|
|
|
|
</template>
|
|
|
|
|
</el-table-column>
|
|
|
|
|
</el-table>
|
|
|
|
|
<el-row>
|
|
|
|
|
<el-col :span="24" class="pageSetUp">
|
|
|
|
|
<el-pagination
|
|
|
|
|
:small="small"
|
|
|
|
|
:total="searchData.total"
|
|
|
|
|
layout="total"
|
|
|
|
|
/>
|
|
|
|
|
<el-pagination
|
|
|
|
|
v-model:current-page="searchData.pageNum"
|
|
|
|
|
v-model:page-size="searchData.pageSize"
|
|
|
|
|
:page-sizes="[10, 20, 30, 40, 50, 60, 70, 80, 90, 100]"
|
|
|
|
|
:small="small"
|
|
|
|
|
:background="true"
|
|
|
|
|
:total="searchData.total"
|
|
|
|
|
layout="sizes, prev, pager,next,jumper"
|
|
|
|
|
@size-change="handleSizeChange"
|
|
|
|
|
@current-change="handleCurrentChange"
|
|
|
|
|
/>
|
|
|
|
|
</el-col>
|
|
|
|
|
</el-row>
|
|
|
|
|
</el-card>
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
<style lang='scss' scoped>
|
|
|
|
|
.dataBox{
|
|
|
|
|
padding: 10px;
|
|
|
|
|
.el-table .el-table__header td {
|
|
|
|
|
background:#f5f8fd;
|
|
|
|
|
}
|
|
|
|
|
.newAddBox{
|
|
|
|
|
margin-bottom: 20px;
|
|
|
|
|
}
|
|
|
|
|
.card_header{
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
justify-content: space-between;
|
|
|
|
|
}
|
|
|
|
|
.el-form-item{
|
|
|
|
|
margin-bottom: 0px;
|
|
|
|
|
}
|
|
|
|
|
.pageSetUp{
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
justify-content: space-between;
|
|
|
|
|
padding: 20px 0 10px 0;
|
|
|
|
|
height: 55px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.oper-btn{
|
|
|
|
|
background: rgba(61,127,255,0.1);
|
|
|
|
|
border: 1px solid rgba(61,127,255,0.6);
|
|
|
|
|
color: #3D7FFF;
|
|
|
|
|
}
|
|
|
|
|
</style>
|
