hreenshan112
11 months ago
9 changed files with 1369 additions and 701 deletions
@ -0,0 +1,304 @@ |
|||
<!-- |
|||
@ 作者: 秦东 |
|||
@ 时间: 2024-12-24 08:34:02 |
|||
@ 备注: 数据源 |
|||
--> |
|||
<script lang="ts" setup> |
|||
//数据源 |
|||
import { getOrPostDate, postSaveData, gainDataTable } from "@/api/date/apidate"; |
|||
import { |
|||
dateTypes, |
|||
dataSourceTypes, |
|||
interfaceTypes, |
|||
dataBaseStruct, |
|||
gainDatabaseInfo, |
|||
havesDatabaseInfo, |
|||
fieldList, |
|||
} from "@/api/date/type"; |
|||
import SvgIcon from "@/components/SvgIcon/index.vue"; |
|||
|
|||
const props = defineProps({ |
|||
isShow: { |
|||
type: Boolean, |
|||
default: false, |
|||
}, |
|||
dataInfo: { |
|||
type: Object, |
|||
default() { |
|||
return {}; |
|||
}, |
|||
}, |
|||
}); |
|||
const emits = defineEmits(["update:isShow", "closeDataSource", "updataBase"]); |
|||
//获取显示初始显示卡数据 |
|||
const isOpen = computed({ |
|||
get() { |
|||
if (props.isShow) { |
|||
gainDateList(); |
|||
} |
|||
return props.isShow; |
|||
}, |
|||
set(val: boolean) { |
|||
emits("update:isShow", val); |
|||
}, |
|||
}); |
|||
const fieldIsShow = ref(false); |
|||
const dataLoading = ref(false); |
|||
const dataList = ref<dataBaseStruct[]>([]); |
|||
const searchData = reactive({ |
|||
pageNum: 1, |
|||
pageSize: 10, |
|||
databaseName: "", |
|||
dataType: "", |
|||
total: 0, |
|||
}); |
|||
//获取数据库 |
|||
const dataBaseLiskt = reactive<gainDatabaseInfo>({ |
|||
id: "", |
|||
type: "", |
|||
dataBaseName: "", |
|||
ip: "", |
|||
port: 0, |
|||
userName: "", |
|||
password: "", |
|||
}); |
|||
const pickTable = reactive<havesDatabaseInfo>({ |
|||
tableName: "", |
|||
tableKey: "", |
|||
fields: [], |
|||
}); |
|||
const lookTable = reactive<havesDatabaseInfo>({ |
|||
tableName: "", |
|||
tableKey: "", |
|||
fields: [], |
|||
}); |
|||
const tableListField = ref<havesDatabaseInfo[]>([]); |
|||
const tableLoading = ref(false); |
|||
//获取数据库表及相应表字段 |
|||
const getDatabaseTable = () => { |
|||
tableLoading.value = true; |
|||
gainDataTable(dataBaseLiskt) |
|||
.then((data) => { |
|||
tableListField.value = data.data; |
|||
}) |
|||
.finally(() => { |
|||
tableLoading.value = false; |
|||
}); |
|||
}; |
|||
/** |
|||
@ 作者: 秦东 |
|||
@ 时间: 2024-12-23 16:50:37 |
|||
@ 功能: 获取数据源 |
|||
*/ |
|||
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-12-24 09:04:14 |
|||
@ 功能: 关闭数据源选择 |
|||
*/ |
|||
const closeDataSourcePage = () => { |
|||
fieldIsShow.value = false; |
|||
lookTable.tableName = ""; |
|||
lookTable.tableKey = ""; |
|||
lookTable.fields = []; |
|||
}; |
|||
/** |
|||
@ 作者: 秦东 |
|||
@ 时间: 2024-12-24 09:38:31 |
|||
@ 功能: 选择的数据源 |
|||
*/ |
|||
const handleCurrentChange = (val: dataBaseStruct) => { |
|||
console.log("选择的数据源", val); |
|||
dataBaseLiskt.id = val.id; |
|||
dataBaseLiskt.type = val.datasourceTypeName; |
|||
dataBaseLiskt.dataBaseName = val.databaseName; |
|||
dataBaseLiskt.dataTypeName = val.dataSourceDes; |
|||
dataBaseLiskt.ip = val.ipAddress; |
|||
dataBaseLiskt.port = val.port; |
|||
dataBaseLiskt.userName = val.account; |
|||
dataBaseLiskt.password = val.password; |
|||
getDatabaseTable(); |
|||
}; |
|||
/** |
|||
@ 作者: 秦东 |
|||
@ 时间: 2024-12-26 09:09:31 |
|||
@ 功能: 选择数据库表 |
|||
*/ |
|||
const handleChangeTable = (val: havesDatabaseInfo) => { |
|||
console.log("选择数据库表", val); |
|||
pickTable.tableName = val.tableName; |
|||
pickTable.tableKey = val.tableKey; |
|||
pickTable.fields = val.fields; |
|||
}; |
|||
/** |
|||
@ 作者: 秦东 |
|||
@ 时间: 2024-12-26 14:07:23 |
|||
@ 功能: 查看表结构 |
|||
*/ |
|||
const lookTableField = (val: havesDatabaseInfo) => { |
|||
console.log("查看表结构", val); |
|||
lookTable.tableName = val.tableName; |
|||
lookTable.tableKey = val.tableKey; |
|||
lookTable.fields = val.fields; |
|||
fieldIsShow.value = true; |
|||
}; |
|||
/** |
|||
@ 作者: 秦东 |
|||
@ 时间: 2024-12-26 14:25:47 |
|||
@ 功能: 关闭选择数据源 |
|||
*/ |
|||
const closeTableForm = () => { |
|||
lookTable.tableName = ""; |
|||
lookTable.tableKey = ""; |
|||
lookTable.fields = []; |
|||
tableListField.value = []; |
|||
dataList.value = []; |
|||
emits("closeDataSource", false); |
|||
}; |
|||
//选定数据库 |
|||
const pickData = () => { |
|||
let databaseConfig = { |
|||
id: dataBaseLiskt.id, |
|||
dataBaseName: dataBaseLiskt.dataTypeName, |
|||
tableName: pickTable.tableName, |
|||
tableKey: pickTable.tableKey, |
|||
fields: pickTable.fields, |
|||
dsn: { |
|||
dataBaseName: dataBaseLiskt.dataBaseName, |
|||
ip: dataBaseLiskt.ip, |
|||
port: dataBaseLiskt.port, |
|||
userName: dataBaseLiskt.userName, |
|||
password: dataBaseLiskt.password, |
|||
}, |
|||
}; |
|||
emits("updataBase", databaseConfig); |
|||
closeTableForm(); |
|||
}; |
|||
</script> |
|||
<template> |
|||
<el-dialog |
|||
v-model="isOpen" |
|||
title="选择数据源" |
|||
width="800" |
|||
:before-close="closeTableForm" |
|||
draggable |
|||
> |
|||
<el-row :gutter="20"> |
|||
<el-col :span="10"> |
|||
<el-table |
|||
ref="singleTableRef" |
|||
:data="dataList" |
|||
highlight-current-row |
|||
style="width: 100%; height: 400px" |
|||
@row-click="handleCurrentChange" |
|||
small |
|||
border |
|||
> |
|||
<el-table-column property="databaseName" label="数据源" /> |
|||
<el-table-column property="dataSourceDes" label="描述" /> |
|||
</el-table> |
|||
|
|||
<el-pagination |
|||
prev-text="上一页" |
|||
next-text="下一页" |
|||
layout="prev, next" |
|||
:total="searchData.total" |
|||
v-model:current-page="searchData.pageNum" |
|||
size="small" |
|||
/> |
|||
</el-col> |
|||
<el-col :span="14"> |
|||
<el-table |
|||
ref="singleTableRef" |
|||
:data="tableListField" |
|||
highlight-current-row |
|||
style="width: 100%; height: 400px" |
|||
@row-click="handleChangeTable" |
|||
small |
|||
border |
|||
v-loading="tableLoading" |
|||
> |
|||
<el-table-column property="tableKey" label="数据表" /> |
|||
<el-table-column property="tableName" label="描述" /> |
|||
<el-table-column width="60" align="center" title="查看表结构"> |
|||
<template #header> 操作 </template> |
|||
<template #default="scope"> |
|||
<el-tooltip placement="right" content="查看表结构"> |
|||
<svg-icon |
|||
icon-class="eye-open" |
|||
@click.native.stop="lookTableField(scope.row)" |
|||
/> |
|||
</el-tooltip> |
|||
</template> |
|||
</el-table-column> |
|||
</el-table> |
|||
</el-col> |
|||
</el-row> |
|||
<template #footer> |
|||
<div class="dialog-footer"> |
|||
<el-button @click="closeTableForm">取消</el-button> |
|||
<el-button type="primary" @click="pickData">确定</el-button> |
|||
</div> |
|||
</template> |
|||
<!--查看表结构--> |
|||
<el-dialog |
|||
v-model="fieldIsShow" |
|||
width="400" |
|||
:title="lookTable.tableName" |
|||
append-to-body |
|||
:before-close="closeDataSourcePage" |
|||
> |
|||
<el-table |
|||
:data="lookTable.fields" |
|||
style="width: 100%; height: 400px; min-height: 100px" |
|||
small |
|||
border |
|||
> |
|||
<el-table-column property="fieldes" label="字段" /> |
|||
<el-table-column property="types" label="类型" /> |
|||
<el-table-column property="comment" label="描述" /> |
|||
</el-table> |
|||
</el-dialog> |
|||
</el-dialog> |
|||
</template> |
|||
<style lang="scss" scoped></style> |
|||
Loading…
Reference in new issue