删除new文件
This commit is contained in:
parent
3c9a1651ea
commit
9db0053872
|
|
@ -8,15 +8,20 @@ export {}
|
|||
declare module '@vue/runtime-core' {
|
||||
export interface GlobalComponents {
|
||||
Countup: typeof import('./src/components/countup.vue')['default']
|
||||
ElAside: typeof import('element-plus/es')['ElAside']
|
||||
ElAvatar: typeof import('element-plus/es')['ElAvatar']
|
||||
ElButton: typeof import('element-plus/es')['ElButton']
|
||||
ElCalendar: typeof import('element-plus/es')['ElCalendar']
|
||||
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']
|
||||
ElCheckboxGroup: typeof import('element-plus/es')['ElCheckboxGroup']
|
||||
ElCol: typeof import('element-plus/es')['ElCol']
|
||||
ElCollapse: typeof import('element-plus/es')['ElCollapse']
|
||||
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']
|
||||
ElDescriptions: typeof import('element-plus/es')['ElDescriptions']
|
||||
ElDescriptionsItem: typeof import('element-plus/es')['ElDescriptionsItem']
|
||||
|
|
@ -28,21 +33,28 @@ declare module '@vue/runtime-core' {
|
|||
ElForm: typeof import('element-plus/es')['ElForm']
|
||||
ElFormItem: typeof import('element-plus/es')['ElFormItem']
|
||||
ElIcon: typeof import('element-plus/es')['ElIcon']
|
||||
ElImage: typeof import('element-plus/es')['ElImage']
|
||||
ElInput: typeof import('element-plus/es')['ElInput']
|
||||
ElInputNumber: typeof import('element-plus/es')['ElInputNumber']
|
||||
ElLink: typeof import('element-plus/es')['ElLink']
|
||||
ElMain: typeof import('element-plus/es')['ElMain']
|
||||
ElMenu: typeof import('element-plus/es')['ElMenu']
|
||||
ElMenuItem: typeof import('element-plus/es')['ElMenuItem']
|
||||
ElOption: typeof import('element-plus/es')['ElOption']
|
||||
ElPagination: typeof import('element-plus/es')['ElPagination']
|
||||
ElProgress: typeof import('element-plus/es')['ElProgress']
|
||||
ElRadio: typeof import('element-plus/es')['ElRadio']
|
||||
ElRadioButton: typeof import('element-plus/es')['ElRadioButton']
|
||||
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']
|
||||
ElScrollbar: typeof import('element-plus/es')['ElScrollbar']
|
||||
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']
|
||||
ElStep: typeof import('element-plus/es')['ElStep']
|
||||
ElSteps: typeof import('element-plus/es')['ElSteps']
|
||||
ElSubMenu: typeof import('element-plus/es')['ElSubMenu']
|
||||
ElSwitch: typeof import('element-plus/es')['ElSwitch']
|
||||
ElTable: typeof import('element-plus/es')['ElTable']
|
||||
|
|
@ -52,9 +64,13 @@ declare module '@vue/runtime-core' {
|
|||
ElTag: typeof import('element-plus/es')['ElTag']
|
||||
ElTimeline: typeof import('element-plus/es')['ElTimeline']
|
||||
ElTimelineItem: typeof import('element-plus/es')['ElTimelineItem']
|
||||
ElTimePicker: typeof import('element-plus/es')['ElTimePicker']
|
||||
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']
|
||||
ElWatermark: typeof import('element-plus/es')['ElWatermark']
|
||||
Header: typeof import('./src/components/header.vue')['default']
|
||||
RouterLink: typeof import('vue-router')['RouterLink']
|
||||
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