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