|
|
|
@ -0,0 +1,222 @@ |
|
|
|
<!-- |
|
|
|
@ 作者: 秦东 |
|
|
|
@ 时间: 2024-04-18 14:52:06 |
|
|
|
@ 备注: 数据资源 |
|
|
|
--> |
|
|
|
<script lang='ts' setup> |
|
|
|
import { getOrPostDate } from "@/api/date/apidate" |
|
|
|
import { dateTypes,dataSourceTypes,interfaceTypes } from "@/api/date/type" |
|
|
|
|
|
|
|
|
|
|
|
const dataList = ref<any[]>([]) |
|
|
|
const searchData = reactive({ |
|
|
|
pageNum: 1, |
|
|
|
pageSize: 10, |
|
|
|
databaseName:"", |
|
|
|
dataType:"", |
|
|
|
total:0 |
|
|
|
}) |
|
|
|
/** |
|
|
|
@ 作者: 秦东 |
|
|
|
@ 时间: 2024-04-18 14:57:24 |
|
|
|
@ 功能: 获取数据 |
|
|
|
*/ |
|
|
|
const gainDateList = () =>{ |
|
|
|
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)=>{ |
|
|
|
|
|
|
|
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) |
|
|
|
}) |
|
|
|
} |
|
|
|
/** |
|
|
|
@ 作者: 秦东 |
|
|
|
@ 时间: 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) => { |
|
|
|
console.log(`${val} items per page`) |
|
|
|
} |
|
|
|
const handleCurrentChange = (val: number) => { |
|
|
|
console.log(`current page: ${val}`) |
|
|
|
} |
|
|
|
|
|
|
|
onMounted(()=>{ |
|
|
|
|
|
|
|
gainDateList() |
|
|
|
}) |
|
|
|
</script> |
|
|
|
<template> |
|
|
|
<div class="dataBox"> |
|
|
|
|
|
|
|
<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> |
|
|
|
<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"><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" :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="端口" width="100" 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="success">已连接</el-text> |
|
|
|
<el-text v-else class="mx-1" type="danger">断开链接</el-text> |
|
|
|
</template> |
|
|
|
</el-table-column> |
|
|
|
<el-table-column fixed="right" label="操作" width="220" align="center"> |
|
|
|
<template #default="scope"> |
|
|
|
<el-button size="small" color="#626aef" :dark="isDark" plain>连接</el-button> |
|
|
|
<el-button size="small" color="#626aef" :dark="isDark" plain>编辑</el-button> |
|
|
|
<el-button size="small" color="#626aef" :dark="isDark" plain>删除</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; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
</style> |
