You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
400 lines
11 KiB
400 lines
11 KiB
<!--
|
|
@ 作者: 秦东
|
|
@ 时间: 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;
|
|
editAssetsInfo.dataSourceDes = val.dataSourceDes;
|
|
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="dataSourceDes" 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>
|
|
|