删除new文件
This commit is contained in:
parent
3c9a1651ea
commit
9db0053872
|
|
@ -8,15 +8,20 @@ export {}
|
||||||
declare module '@vue/runtime-core' {
|
declare module '@vue/runtime-core' {
|
||||||
export interface GlobalComponents {
|
export interface GlobalComponents {
|
||||||
Countup: typeof import('./src/components/countup.vue')['default']
|
Countup: typeof import('./src/components/countup.vue')['default']
|
||||||
ElAside: typeof import('element-plus/es')['ElAside']
|
|
||||||
ElAvatar: typeof import('element-plus/es')['ElAvatar']
|
ElAvatar: typeof import('element-plus/es')['ElAvatar']
|
||||||
ElButton: typeof import('element-plus/es')['ElButton']
|
ElButton: typeof import('element-plus/es')['ElButton']
|
||||||
|
ElCalendar: typeof import('element-plus/es')['ElCalendar']
|
||||||
ElCard: typeof import('element-plus/es')['ElCard']
|
ElCard: typeof import('element-plus/es')['ElCard']
|
||||||
|
ElCarousel: typeof import('element-plus/es')['ElCarousel']
|
||||||
|
ElCarouselItem: typeof import('element-plus/es')['ElCarouselItem']
|
||||||
|
ElCascader: typeof import('element-plus/es')['ElCascader']
|
||||||
ElCheckbox: typeof import('element-plus/es')['ElCheckbox']
|
ElCheckbox: typeof import('element-plus/es')['ElCheckbox']
|
||||||
|
ElCheckboxGroup: typeof import('element-plus/es')['ElCheckboxGroup']
|
||||||
ElCol: typeof import('element-plus/es')['ElCol']
|
ElCol: typeof import('element-plus/es')['ElCol']
|
||||||
ElCollapse: typeof import('element-plus/es')['ElCollapse']
|
ElCollapse: typeof import('element-plus/es')['ElCollapse']
|
||||||
ElCollapseItem: typeof import('element-plus/es')['ElCollapseItem']
|
ElCollapseItem: typeof import('element-plus/es')['ElCollapseItem']
|
||||||
ElContainer: typeof import('element-plus/es')['ElContainer']
|
ElColorPicker: typeof import('element-plus/es')['ElColorPicker']
|
||||||
|
ElCountdown: typeof import('element-plus/es')['ElCountdown']
|
||||||
ElDatePicker: typeof import('element-plus/es')['ElDatePicker']
|
ElDatePicker: typeof import('element-plus/es')['ElDatePicker']
|
||||||
ElDescriptions: typeof import('element-plus/es')['ElDescriptions']
|
ElDescriptions: typeof import('element-plus/es')['ElDescriptions']
|
||||||
ElDescriptionsItem: typeof import('element-plus/es')['ElDescriptionsItem']
|
ElDescriptionsItem: typeof import('element-plus/es')['ElDescriptionsItem']
|
||||||
|
|
@ -28,21 +33,28 @@ declare module '@vue/runtime-core' {
|
||||||
ElForm: typeof import('element-plus/es')['ElForm']
|
ElForm: typeof import('element-plus/es')['ElForm']
|
||||||
ElFormItem: typeof import('element-plus/es')['ElFormItem']
|
ElFormItem: typeof import('element-plus/es')['ElFormItem']
|
||||||
ElIcon: typeof import('element-plus/es')['ElIcon']
|
ElIcon: typeof import('element-plus/es')['ElIcon']
|
||||||
|
ElImage: typeof import('element-plus/es')['ElImage']
|
||||||
ElInput: typeof import('element-plus/es')['ElInput']
|
ElInput: typeof import('element-plus/es')['ElInput']
|
||||||
ElInputNumber: typeof import('element-plus/es')['ElInputNumber']
|
ElInputNumber: typeof import('element-plus/es')['ElInputNumber']
|
||||||
ElLink: typeof import('element-plus/es')['ElLink']
|
ElLink: typeof import('element-plus/es')['ElLink']
|
||||||
ElMain: typeof import('element-plus/es')['ElMain']
|
|
||||||
ElMenu: typeof import('element-plus/es')['ElMenu']
|
ElMenu: typeof import('element-plus/es')['ElMenu']
|
||||||
ElMenuItem: typeof import('element-plus/es')['ElMenuItem']
|
ElMenuItem: typeof import('element-plus/es')['ElMenuItem']
|
||||||
ElOption: typeof import('element-plus/es')['ElOption']
|
ElOption: typeof import('element-plus/es')['ElOption']
|
||||||
ElPagination: typeof import('element-plus/es')['ElPagination']
|
ElPagination: typeof import('element-plus/es')['ElPagination']
|
||||||
ElProgress: typeof import('element-plus/es')['ElProgress']
|
ElProgress: typeof import('element-plus/es')['ElProgress']
|
||||||
ElRadio: typeof import('element-plus/es')['ElRadio']
|
ElRadio: typeof import('element-plus/es')['ElRadio']
|
||||||
|
ElRadioButton: typeof import('element-plus/es')['ElRadioButton']
|
||||||
ElRadioGroup: typeof import('element-plus/es')['ElRadioGroup']
|
ElRadioGroup: typeof import('element-plus/es')['ElRadioGroup']
|
||||||
|
ElRate: typeof import('element-plus/es')['ElRate']
|
||||||
|
ElResult: typeof import('element-plus/es')['ElResult']
|
||||||
ElRow: typeof import('element-plus/es')['ElRow']
|
ElRow: typeof import('element-plus/es')['ElRow']
|
||||||
ElScrollbar: typeof import('element-plus/es')['ElScrollbar']
|
ElScrollbar: typeof import('element-plus/es')['ElScrollbar']
|
||||||
ElSelect: typeof import('element-plus/es')['ElSelect']
|
ElSelect: typeof import('element-plus/es')['ElSelect']
|
||||||
|
ElSlider: typeof import('element-plus/es')['ElSlider']
|
||||||
|
ElSpace: typeof import('element-plus/es')['ElSpace']
|
||||||
ElStatistic: typeof import('element-plus/es')['ElStatistic']
|
ElStatistic: typeof import('element-plus/es')['ElStatistic']
|
||||||
|
ElStep: typeof import('element-plus/es')['ElStep']
|
||||||
|
ElSteps: typeof import('element-plus/es')['ElSteps']
|
||||||
ElSubMenu: typeof import('element-plus/es')['ElSubMenu']
|
ElSubMenu: typeof import('element-plus/es')['ElSubMenu']
|
||||||
ElSwitch: typeof import('element-plus/es')['ElSwitch']
|
ElSwitch: typeof import('element-plus/es')['ElSwitch']
|
||||||
ElTable: typeof import('element-plus/es')['ElTable']
|
ElTable: typeof import('element-plus/es')['ElTable']
|
||||||
|
|
@ -52,9 +64,13 @@ declare module '@vue/runtime-core' {
|
||||||
ElTag: typeof import('element-plus/es')['ElTag']
|
ElTag: typeof import('element-plus/es')['ElTag']
|
||||||
ElTimeline: typeof import('element-plus/es')['ElTimeline']
|
ElTimeline: typeof import('element-plus/es')['ElTimeline']
|
||||||
ElTimelineItem: typeof import('element-plus/es')['ElTimelineItem']
|
ElTimelineItem: typeof import('element-plus/es')['ElTimelineItem']
|
||||||
|
ElTimePicker: typeof import('element-plus/es')['ElTimePicker']
|
||||||
ElTooltip: typeof import('element-plus/es')['ElTooltip']
|
ElTooltip: typeof import('element-plus/es')['ElTooltip']
|
||||||
ElTree: typeof import('element-plus/es')['ElTree']
|
ElTour: typeof import('element-plus/es')['ElTour']
|
||||||
|
ElTourStep: typeof import('element-plus/es')['ElTourStep']
|
||||||
|
ElTransfer: typeof import('element-plus/es')['ElTransfer']
|
||||||
ElUpload: typeof import('element-plus/es')['ElUpload']
|
ElUpload: typeof import('element-plus/es')['ElUpload']
|
||||||
|
ElWatermark: typeof import('element-plus/es')['ElWatermark']
|
||||||
Header: typeof import('./src/components/header.vue')['default']
|
Header: typeof import('./src/components/header.vue')['default']
|
||||||
RouterLink: typeof import('vue-router')['RouterLink']
|
RouterLink: typeof import('vue-router')['RouterLink']
|
||||||
RouterView: typeof import('vue-router')['RouterView']
|
RouterView: typeof import('vue-router')['RouterView']
|
||||||
|
|
|
||||||
|
|
@ -1,525 +0,0 @@
|
||||||
<template>
|
|
||||||
<div class="db-manage-container">
|
|
||||||
<el-row :gutter="20">
|
|
||||||
<!-- 左侧数据库表列表 -->
|
|
||||||
<el-col :span="4">
|
|
||||||
<div class="table-list">
|
|
||||||
<h3>数据库表</h3>
|
|
||||||
<el-scrollbar height="400px">
|
|
||||||
<el-tree
|
|
||||||
:data="tables"
|
|
||||||
node-key="name"
|
|
||||||
:props="defaultProps"
|
|
||||||
@node-click="handleTableClick"
|
|
||||||
/>
|
|
||||||
</el-scrollbar>
|
|
||||||
</div>
|
|
||||||
</el-col>
|
|
||||||
|
|
||||||
<!-- 右侧主内容区 -->
|
|
||||||
<el-col :span="20">
|
|
||||||
<!-- 顶部下拉选择框 -->
|
|
||||||
<el-row :gutter="20" class="mb-20">
|
|
||||||
<el-col :span="10">
|
|
||||||
<el-select
|
|
||||||
v-model="selectedDatabase"
|
|
||||||
filterable
|
|
||||||
placeholder="请选择数据库"
|
|
||||||
class="w-100"
|
|
||||||
@change="getRunSQLHistory"
|
|
||||||
>
|
|
||||||
<template #prefix>
|
|
||||||
<el-icon><search /></el-icon>
|
|
||||||
</template>
|
|
||||||
<el-option
|
|
||||||
v-for="item in databases"
|
|
||||||
:key="item.ID"
|
|
||||||
:label="item.Name"
|
|
||||||
:value="item.ID"
|
|
||||||
>
|
|
||||||
<span>{{ item.Name }}</span>
|
|
||||||
<span class="option-actions">
|
|
||||||
<el-icon @click.stop="editDatabase(item)"><edit /></el-icon>
|
|
||||||
<el-icon @click.stop="deleteDatabase(item)"
|
|
||||||
><delete
|
|
||||||
/></el-icon>
|
|
||||||
</span>
|
|
||||||
</el-option>
|
|
||||||
<template #append>
|
|
||||||
<el-button icon="plus" @click="showAddDatabaseDialog" />
|
|
||||||
</template>
|
|
||||||
</el-select>
|
|
||||||
</el-col>
|
|
||||||
<el-col :span="1">
|
|
||||||
<el-icon @click="showAddDatabaseDialog"><FolderAdd /></el-icon>
|
|
||||||
</el-col>
|
|
||||||
<el-col :span="6">
|
|
||||||
<el-select
|
|
||||||
v-model="selectedConnection"
|
|
||||||
filterable
|
|
||||||
placeholder="请选择服务器"
|
|
||||||
class="w-100"
|
|
||||||
>
|
|
||||||
<template #prefix>
|
|
||||||
<el-icon><search /></el-icon>
|
|
||||||
</template>
|
|
||||||
<el-option
|
|
||||||
v-for="item in connections"
|
|
||||||
:key="item.domain"
|
|
||||||
:label="item.name"
|
|
||||||
:value="item.domain"
|
|
||||||
>
|
|
||||||
<span>{{ item.name }}</span>
|
|
||||||
</el-option>
|
|
||||||
<template #append>
|
|
||||||
<el-button circle @click="showAddDatabaseDialog" />
|
|
||||||
</template>
|
|
||||||
</el-select>
|
|
||||||
</el-col>
|
|
||||||
<el-col :span="3">
|
|
||||||
<el-button
|
|
||||||
type="primary"
|
|
||||||
@click="showSQLHistoryDialog"
|
|
||||||
class="w-100"
|
|
||||||
:loading="executing"
|
|
||||||
>执行历史SQL</el-button
|
|
||||||
>
|
|
||||||
</el-col>
|
|
||||||
</el-row>
|
|
||||||
|
|
||||||
<!-- SQL输入框和执行按钮 -->
|
|
||||||
<el-row class="mb-20">
|
|
||||||
<el-col :span="20">
|
|
||||||
<SqlEditor v-model="sqlQuery" />
|
|
||||||
</el-col>
|
|
||||||
<el-col :span="4">
|
|
||||||
<el-button
|
|
||||||
type="primary"
|
|
||||||
@click="executeSql"
|
|
||||||
class="w-100"
|
|
||||||
:loading="executing"
|
|
||||||
>
|
|
||||||
执行
|
|
||||||
</el-button>
|
|
||||||
</el-col>
|
|
||||||
</el-row>
|
|
||||||
|
|
||||||
<!-- 结果表格 -->
|
|
||||||
<el-table
|
|
||||||
:data="tableData"
|
|
||||||
border
|
|
||||||
style="width: 100%"
|
|
||||||
height="400px"
|
|
||||||
v-horizontal-scroll="'always'"
|
|
||||||
v-loading="loading"
|
|
||||||
>
|
|
||||||
<el-table-column
|
|
||||||
v-for="column in tableColumns"
|
|
||||||
:key="column.prop"
|
|
||||||
:prop="column.prop"
|
|
||||||
:label="column.label"
|
|
||||||
/>
|
|
||||||
</el-table>
|
|
||||||
</el-col>
|
|
||||||
</el-row>
|
|
||||||
|
|
||||||
<!-- 添加/编辑数据库对话框 -->
|
|
||||||
<el-dialog
|
|
||||||
v-model="databaseDialogVisible"
|
|
||||||
:title="isEditDatabase ? '编辑数据库' : '添加数据库'"
|
|
||||||
width="50%"
|
|
||||||
:close-on-click-modal="false"
|
|
||||||
>
|
|
||||||
<el-form :model="databaseForm" label-width="100px">
|
|
||||||
<el-form-item label="数据库名称" required>
|
|
||||||
<el-input
|
|
||||||
v-model="databaseForm.DB_NAME"
|
|
||||||
placeholder="请输入数据库名称"
|
|
||||||
/>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="数据库密码" required>
|
|
||||||
<el-input
|
|
||||||
v-model="databaseForm.DB_Password"
|
|
||||||
type="password"
|
|
||||||
placeholder="请输入数据库密码"
|
|
||||||
show-password
|
|
||||||
/>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="用户名" required>
|
|
||||||
<el-input
|
|
||||||
v-model="databaseForm.DB_User"
|
|
||||||
placeholder="请输入用户名称"
|
|
||||||
/>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="IP或域名" required>
|
|
||||||
<el-input
|
|
||||||
v-model="databaseForm.DB_IP"
|
|
||||||
placeholder="请输入数据库ip或域名"
|
|
||||||
/>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="数据库端口" required>
|
|
||||||
<el-input
|
|
||||||
v-model="databaseForm.DB_Port"
|
|
||||||
placeholder="请输入数据库端口"
|
|
||||||
/>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="数据库类型" required>
|
|
||||||
<el-select
|
|
||||||
v-model="databaseForm.DB_Type"
|
|
||||||
placeholder="请选择数据库类型"
|
|
||||||
>
|
|
||||||
<el-option label="MySQL" value="0" />
|
|
||||||
<el-option label="PostgreSQL" value="1" />
|
|
||||||
</el-select>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="描述信息">
|
|
||||||
<el-input
|
|
||||||
v-model="databaseForm.DB_Desc"
|
|
||||||
placeholder="请输入备注信息"
|
|
||||||
/>
|
|
||||||
</el-form-item>
|
|
||||||
</el-form>
|
|
||||||
<template #footer>
|
|
||||||
<el-button @click="databaseDialogVisible = false">取消</el-button>
|
|
||||||
<el-button type="primary" @click="saveDatabase">保存</el-button>
|
|
||||||
</template>
|
|
||||||
</el-dialog>
|
|
||||||
|
|
||||||
<el-dialog
|
|
||||||
v-model="sqlHistoryDialogVisible"
|
|
||||||
title="SQL执行历史"
|
|
||||||
width="50%"
|
|
||||||
:close-on-click-modal="false"
|
|
||||||
>
|
|
||||||
<el-table :data="sqlHistory" stripe width="100%" height="600px" fit>
|
|
||||||
<el-table-column prop="ID" label="SQLID" width="150"></el-table-column>
|
|
||||||
<el-table-column prop="SQL" label="SQL" width="500"> </el-table-column>
|
|
||||||
<el-table-column label="操作" width="270">
|
|
||||||
<template #default="scope">
|
|
||||||
<el-button
|
|
||||||
type="primary"
|
|
||||||
size="mini"
|
|
||||||
@click.prevent="useCurrSql(scope.$index)"
|
|
||||||
>引用</el-button
|
|
||||||
>
|
|
||||||
<el-button
|
|
||||||
type="primary"
|
|
||||||
size="mini"
|
|
||||||
@click.prevent="DelSqlHistory(scope.$index)"
|
|
||||||
>删除</el-button
|
|
||||||
>
|
|
||||||
</template>
|
|
||||||
</el-table-column>
|
|
||||||
</el-table>
|
|
||||||
<template #footer>
|
|
||||||
<el-button @click="sqlHistoryDialogVisible = false">取消</el-button>
|
|
||||||
</template>
|
|
||||||
</el-dialog>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script lang="ts">
|
|
||||||
import { defineComponent, ref, reactive } from "vue";
|
|
||||||
import {
|
|
||||||
FindDBManageListService,
|
|
||||||
AddDBManageService,
|
|
||||||
UpdateDBManageService,
|
|
||||||
RunSQLService,
|
|
||||||
GetSQLRunHistoryService,
|
|
||||||
} from "@/api/dbm";
|
|
||||||
import { DatabaseConfig, ISQLOperation } from "@/types/dbm";
|
|
||||||
|
|
||||||
import horizontalScroll from "el-table-horizontal-scroll";
|
|
||||||
import { Search, Edit, Delete, Plus } from "@element-plus/icons-vue";
|
|
||||||
import { ElMessage } from "element-plus";
|
|
||||||
import SqlEditor from './sqlEditor.vue';
|
|
||||||
|
|
||||||
// 数据库下拉框数据
|
|
||||||
const databases = ref<DatabaseConfig[]>([]);
|
|
||||||
const selectedDatabase = ref("");
|
|
||||||
|
|
||||||
// 连接下拉框数据
|
|
||||||
const connections = ref([
|
|
||||||
{ name: "腾讯服务器", domain: "tx.ljsea.top" },
|
|
||||||
{ name: "阿里云服务器", domain: "al.ljsea.top" },
|
|
||||||
{ name: "家里服务器", domain: "gep.ljsea.top" },
|
|
||||||
]);
|
|
||||||
const supportdedDBTypes = ref({ 0: "mysql", 1: "postgresql" });
|
|
||||||
const selectedConnection = ref("");
|
|
||||||
|
|
||||||
// SQL查询相关
|
|
||||||
const sqlQuery = ref("");
|
|
||||||
const executing = ref(false);
|
|
||||||
const tableData = ref([]);
|
|
||||||
const tableColumns = ref([]);
|
|
||||||
const loading = ref(false);
|
|
||||||
|
|
||||||
// 数据库表列表
|
|
||||||
const tables = ref([
|
|
||||||
{
|
|
||||||
name: "users",
|
|
||||||
children: [{ name: "id" }, { name: "username" }, { name: "email" }],
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "products",
|
|
||||||
children: [{ name: "id" }, { name: "name" }, { name: "price" }],
|
|
||||||
},
|
|
||||||
]);
|
|
||||||
const defaultProps = {
|
|
||||||
children: "children",
|
|
||||||
label: "name",
|
|
||||||
};
|
|
||||||
|
|
||||||
// 数据库对话框相关
|
|
||||||
const databaseDialogVisible = ref(false);
|
|
||||||
const sqlHistoryDialogVisible = ref(false);
|
|
||||||
const isEditDatabase = ref(false);
|
|
||||||
const databaseForm = ref<DatabaseConfig>();
|
|
||||||
const sqlHistory = ref<ISQLOperation[]>([]);
|
|
||||||
|
|
||||||
// 连接对话框相关
|
|
||||||
const connectionDialogVisible = ref(false);
|
|
||||||
const isEditConnection = ref(false);
|
|
||||||
const connectionForm = reactive({
|
|
||||||
id: 0,
|
|
||||||
name: "",
|
|
||||||
host: "",
|
|
||||||
port: "",
|
|
||||||
username: "",
|
|
||||||
password: "",
|
|
||||||
});
|
|
||||||
|
|
||||||
const showSQLHistoryDialog = async () => {
|
|
||||||
sqlHistoryDialogVisible.value = true;
|
|
||||||
await getRunSQLHistory();
|
|
||||||
};
|
|
||||||
|
|
||||||
const showAddDatabaseDialog = () => {
|
|
||||||
isEditDatabase.value = false;
|
|
||||||
databaseForm.value = {
|
|
||||||
ID: 0,
|
|
||||||
DB_IP: "",
|
|
||||||
DB_Port: 3306,
|
|
||||||
DB_NAME: "",
|
|
||||||
DB_User: "",
|
|
||||||
DB_Password: "",
|
|
||||||
DB_Type: 0,
|
|
||||||
CreatedAt: "",
|
|
||||||
UpdatedAt: "",
|
|
||||||
};
|
|
||||||
databaseDialogVisible.value = true;
|
|
||||||
};
|
|
||||||
|
|
||||||
const editDatabase = (item) => {
|
|
||||||
isEditDatabase.value = true;
|
|
||||||
databaseForm.value = item;
|
|
||||||
databaseDialogVisible.value = true;
|
|
||||||
};
|
|
||||||
|
|
||||||
const GetDBManageList = async () => {
|
|
||||||
let req = {
|
|
||||||
get_type: 0,
|
|
||||||
token: localStorage.getItem("token"),
|
|
||||||
id: localStorage.getItem("userId"),
|
|
||||||
};
|
|
||||||
await FindDBManageListService(req)
|
|
||||||
.then((res: any) => {
|
|
||||||
if (res.code === 0) {
|
|
||||||
databases.value = res.data;
|
|
||||||
for (let i = 0; i < databases.value.length; i++) {
|
|
||||||
let type = supportdedDBTypes.value[databases.value[i].DB_Type];
|
|
||||||
databases.value[i].Name =
|
|
||||||
type +
|
|
||||||
" - " +
|
|
||||||
databases.value[i].DB_IP +
|
|
||||||
":" +
|
|
||||||
databases.value[i].DB_Port +
|
|
||||||
" - " +
|
|
||||||
databases.value[i].DB_NAME;
|
|
||||||
}
|
|
||||||
ElMessage.success("获取数据库列表成功");
|
|
||||||
} else {
|
|
||||||
console.error("获取数据库列表失败:", res.message);
|
|
||||||
}
|
|
||||||
})
|
|
||||||
.catch((error: any) => {
|
|
||||||
console.error("请求错误:", error);
|
|
||||||
});
|
|
||||||
};
|
|
||||||
GetDBManageList();
|
|
||||||
|
|
||||||
const useCurrSql = (index) => {
|
|
||||||
sqlQuery.value = sqlHistory.value[index].SQL;
|
|
||||||
sqlHistoryDialogVisible.value = false;
|
|
||||||
};
|
|
||||||
|
|
||||||
const DelSqlHistory = (index) => {
|
|
||||||
sqlHistory.value.splice(index, 1);
|
|
||||||
};
|
|
||||||
|
|
||||||
const deleteDatabase = (item) => {
|
|
||||||
databases.value = databases.value.filter((db) => db.ID !== item.id);
|
|
||||||
};
|
|
||||||
|
|
||||||
const saveDatabase = () => {
|
|
||||||
let req = {};
|
|
||||||
if (isEditDatabase.value) {
|
|
||||||
req = {
|
|
||||||
token: localStorage.getItem("token"),
|
|
||||||
db_id: databaseForm.value.ID,
|
|
||||||
db_name: databaseForm.value.DB_NAME,
|
|
||||||
db_type: databaseForm.value.DB_Type,
|
|
||||||
db_ip: databaseForm.value.DB_IP,
|
|
||||||
db_port: databaseForm.value.DB_Port,
|
|
||||||
db_user: databaseForm.value.DB_User,
|
|
||||||
db_password: databaseForm.value.DB_Password,
|
|
||||||
db_desc: databaseForm.value.DB_Desc,
|
|
||||||
};
|
|
||||||
UpdateDBManageService(req)
|
|
||||||
.then((res: any) => {
|
|
||||||
if (res.code === 0) {
|
|
||||||
ElMessage.success("更新成功");
|
|
||||||
GetDBManageList();
|
|
||||||
} else {
|
|
||||||
ElMessage.error("更新失败");
|
|
||||||
}
|
|
||||||
})
|
|
||||||
.catch((error: any) => {
|
|
||||||
console.error("请求错误:", error);
|
|
||||||
});
|
|
||||||
} else {
|
|
||||||
req = {
|
|
||||||
token: localStorage.getItem("token"),
|
|
||||||
db_id: databaseForm.value.ID,
|
|
||||||
db_name: databaseForm.value.DB_NAME,
|
|
||||||
db_type: databaseForm.value.DB_Type,
|
|
||||||
db_ip: databaseForm.value.DB_IP,
|
|
||||||
db_port: databaseForm.value.DB_Port,
|
|
||||||
db_user: databaseForm.value.DB_User,
|
|
||||||
db_password: databaseForm.value.DB_Password,
|
|
||||||
db_desc: databaseForm.value.DB_Desc,
|
|
||||||
};
|
|
||||||
AddDBManageService(req)
|
|
||||||
.then((res: any) => {
|
|
||||||
if (res.code === 0) {
|
|
||||||
ElMessage.success("添加成功");
|
|
||||||
GetDBManageList();
|
|
||||||
} else {
|
|
||||||
ElMessage.error("添加失败");
|
|
||||||
}
|
|
||||||
})
|
|
||||||
.catch((error: any) => {
|
|
||||||
console.error("请求错误:", error);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
databaseDialogVisible.value = false;
|
|
||||||
};
|
|
||||||
|
|
||||||
const getRunSQLHistory = async () => {
|
|
||||||
if (!selectedDatabase.value) {
|
|
||||||
ElMessage({
|
|
||||||
type: "error",
|
|
||||||
message: "请选择数据库",
|
|
||||||
});
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
let req = {
|
|
||||||
db_id: selectedDatabase.value,
|
|
||||||
token: localStorage.getItem("token"),
|
|
||||||
get_type: 0,
|
|
||||||
};
|
|
||||||
await GetSQLRunHistoryService(req)
|
|
||||||
.then((res: any) => {
|
|
||||||
if (res.code === 0) {
|
|
||||||
sqlHistory.value = res.data;
|
|
||||||
ElMessage({
|
|
||||||
type: "success",
|
|
||||||
message: "获取SQL执行历史成功",
|
|
||||||
});
|
|
||||||
} else {
|
|
||||||
console.error("获取SQL执行历史失败:", res.message);
|
|
||||||
}
|
|
||||||
})
|
|
||||||
.catch((error: any) => {
|
|
||||||
console.error("请求错误:", error);
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
const executeSql = () => {
|
|
||||||
if (!selectedDatabase.value) {
|
|
||||||
ElMessage({
|
|
||||||
type: "error",
|
|
||||||
message: "请选择数据库",
|
|
||||||
});
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
executing.value = true;
|
|
||||||
loading.value = true;
|
|
||||||
|
|
||||||
let req = {
|
|
||||||
token: localStorage.getItem("token"),
|
|
||||||
id: localStorage.getItem("userId"),
|
|
||||||
sql: sqlQuery.value,
|
|
||||||
db_id: selectedDatabase.value,
|
|
||||||
};
|
|
||||||
try {
|
|
||||||
RunSQLService(req)
|
|
||||||
.then((res: any) => {
|
|
||||||
if (res.code === 0) {
|
|
||||||
tableData.value = res.data.Rows;
|
|
||||||
tableColumns.value = res.data.Columns;
|
|
||||||
} else {
|
|
||||||
console.error("执行SQL失败:", res.message);
|
|
||||||
ElMessage({
|
|
||||||
type: "error",
|
|
||||||
message: res.message,
|
|
||||||
});
|
|
||||||
}
|
|
||||||
})
|
|
||||||
.catch((error: any) => {
|
|
||||||
console.error("请求错误:", error);
|
|
||||||
});
|
|
||||||
} catch (e) {
|
|
||||||
console.log(e);
|
|
||||||
}
|
|
||||||
|
|
||||||
executing.value = false;
|
|
||||||
loading.value = false;
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleTableClick = (data) => {
|
|
||||||
if (!data.children) {
|
|
||||||
sqlQuery.value = `SELECT * FROM ${data.name}`;
|
|
||||||
}
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
.db-manage-container {
|
|
||||||
padding: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.table-list {
|
|
||||||
background: #fff;
|
|
||||||
padding: 10px;
|
|
||||||
border-radius: 4px;
|
|
||||||
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
|
|
||||||
}
|
|
||||||
|
|
||||||
.mb-20 {
|
|
||||||
margin-bottom: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.w-100 {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.option-actions {
|
|
||||||
float: right;
|
|
||||||
}
|
|
||||||
|
|
||||||
.option-actions .el-icon {
|
|
||||||
margin-left: 10px;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
Loading…
Reference in New Issue