11 changed files with 352 additions and 5 deletions
@ -0,0 +1,9 @@ |
|||||
|
import request from '@/utils/request'; |
||||
|
|
||||
|
export function getOrPostDate(methodStr:string,data?: any) { |
||||
|
return request({ |
||||
|
url: "/systemapi/dataCenter/gaindataCenter", |
||||
|
method: "POST", |
||||
|
data: data |
||||
|
}); |
||||
|
} |
||||
@ -0,0 +1,49 @@ |
|||||
|
//数据库类型
|
||||
|
export const dateTypes = [ |
||||
|
{ |
||||
|
value: '1', |
||||
|
label: '关系型数据库', |
||||
|
}, |
||||
|
{ |
||||
|
value: '2', |
||||
|
label: '时序数据库', |
||||
|
}, |
||||
|
{ |
||||
|
value: '3', |
||||
|
label: '非关系型数据库', |
||||
|
} |
||||
|
] |
||||
|
//数据库产品
|
||||
|
export const dataSourceTypes = [ |
||||
|
{ |
||||
|
value: '1', |
||||
|
label: 'mysql', |
||||
|
}, |
||||
|
{ |
||||
|
value: '2', |
||||
|
label: 'RTD', |
||||
|
}, |
||||
|
{ |
||||
|
value: '3', |
||||
|
label: '暂时未知', |
||||
|
}, |
||||
|
{ |
||||
|
value: '4', |
||||
|
label: 'sql server', |
||||
|
}, |
||||
|
{ |
||||
|
value: '5', |
||||
|
label: 'redis', |
||||
|
} |
||||
|
] |
||||
|
//接口方式
|
||||
|
export const interfaceTypes = [ |
||||
|
{ |
||||
|
value: '1', |
||||
|
label: 'SQL', |
||||
|
}, |
||||
|
{ |
||||
|
value: '2', |
||||
|
label: 'API', |
||||
|
} |
||||
|
] |
||||
@ -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> |
||||
@ -0,0 +1,37 @@ |
|||||
|
<!-- |
||||
|
@ 作者: 秦东 |
||||
|
@ 时间: 2024-04-18 14:08:56 |
||||
|
@ 备注: 设置自建应用 |
||||
|
--> |
||||
|
<script lang='ts' setup> |
||||
|
const props = defineProps({ |
||||
|
drawerWith:{ |
||||
|
type:Number, |
||||
|
default:0 |
||||
|
}, |
||||
|
formKey:{ |
||||
|
type:String, |
||||
|
default:"" |
||||
|
} |
||||
|
}); |
||||
|
const drawerOpenOrClose = ref(true) |
||||
|
</script> |
||||
|
<template> |
||||
|
<div class="drawerClass"> |
||||
|
<el-drawer v-model="drawerOpenOrClose" title="设置/编辑自定义表单" :with-header="false" :close-on-click-modal="false" :close-on-press-escape="false" :destroy-on-close="true" :size="props.drawerWith"> |
||||
|
<div class="common-layout"> |
||||
|
<el-container> |
||||
|
<el-header>Header</el-header> |
||||
|
<el-container> |
||||
|
<el-aside width="200px">Aside</el-aside> |
||||
|
<el-main>Main</el-main> |
||||
|
</el-container> |
||||
|
</el-container> |
||||
|
</div> |
||||
|
|
||||
|
</el-drawer > |
||||
|
</div> |
||||
|
</template> |
||||
|
<style lang='scss' scoped> |
||||
|
|
||||
|
</style> |
||||
Loading…
Reference in new issue