ljydlv
/
sawAdmin
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

修改数据库管理交换

This commit is contained in:
lj124 2026-05-12 23:52:25 +08:00
parent 99dc835233
commit 7890bca4e2
2 changed files with 604 additions and 398 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

783
src/views/system/db-manage.vue
View File

@ -1,185 +1,211 @@
<template> <template>
<div class="db-manage-container"> <div class="db-manage-container">
<el-row :gutter="20"> <el-card class="header-card" shadow="never">
<el-row :gutter="20" align="middle">
<el-col :span="8">
<!-- 右侧主内容区 --> <el-select
<el-col :span="24"> v-model="selectedDatabase"
<!-- 顶部下拉选择框 --> filterable
<el-row :gutter="20" class="mb-20"> clearable
<el-col :span="10"> placeholder="请选择数据库"
<el-select class="w-100"
v-model="selectedDatabase" @change="getRunSQLHistory"
filterable >
placeholder="请选择数据库" <template #prefix>
class="w-100" <el-icon><Folder /></el-icon>
@change="getRunSQLHistory" </template>
<el-option
v-for="item in databases"
:key="item.ID"
:label="item.Name"
:value="item.ID"
> >
<template #prefix> <div class="database-option">
<el-icon><search /></el-icon> <span class="db-name">{{ item.Name }}</span>
</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"> <span class="option-actions">
<el-icon @click.stop="editDatabase(item)"><edit /></el-icon> <el-tooltip content="编辑" placement="top">
<el-icon @click.stop="deleteDatabase(item)" <el-icon @click.stop="editDatabase(item)"><Edit /></el-icon>
><delete </el-tooltip>
/></el-icon> <el-tooltip content="删除" placement="top">
<el-icon class="delete-icon" @click.stop="deleteDatabase(item)"><Delete /></el-icon>
</el-tooltip>
</span> </span>
</el-option> </div>
<template #append> </el-option>
<el-button icon="plus" @click="showAddDatabaseDialog" /> <template #append>
</template> <el-button icon="Plus" @click="showAddDatabaseDialog" />
</el-select> </template>
</el-col> </el-select>
<el-col :span="1"> </el-col>
<el-icon @click="showAddDatabaseDialog"><FolderAdd /></el-icon> <el-col :span="6">
</el-col> <el-select
<el-col :span="6"> v-model="selectedConnection"
<el-select filterable
v-model="selectedConnection" clearable
filterable placeholder="请选择服务器"
placeholder="请选择服务器" class="w-100"
class="w-100" >
<template #prefix>
<el-icon><Monitor /></el-icon>
</template>
<el-option
v-for="item in connections"
:key="item.domain"
:label="item.name"
:value="item.domain"
> >
<template #prefix> <span>{{ item.name }}</span>
<el-icon><search /></el-icon> </el-option>
</template> </el-select>
<el-option </el-col>
v-for="item in connections" <el-col :span="4">
:key="item.domain" <el-button
:label="item.name" type="primary"
:value="item.domain" @click="showSQLHistoryDialog"
> class="w-100"
<span>{{ item.name }}</span> >
</el-option> <el-icon><Document /></el-icon>
<template #append> 执行历史
<el-button circle @click="showAddDatabaseDialog" /> </el-button>
</template> </el-col>
</el-select> <el-col :span="4">
</el-col> <el-button
<el-col :span="3"> type="success"
<el-button @click="showAddDatabaseDialog"
type="primary" class="w-100"
@click="showSQLHistoryDialog" >
class="w-100" <el-icon><Plus /></el-icon>
:loading="executing" 新建数据库
>执行历史SQL</el-button </el-button>
> </el-col>
</el-col> </el-row>
</el-row> </el-card>
<!-- SQL输入框和执行按钮 --> <el-card class="sql-card" shadow="never">
<el-row class="mb-20"> <template #header>
<el-col :span="20"> <div class="card-header">
<el-input <span><el-icon><EditPen /></el-icon> SQL 编辑器</span>
v-model="sqlQuery" <div class="header-actions">
type="textarea" <el-button text @click="clearSql">
:rows="3" <el-icon><Delete /></el-icon> 清空
placeholder="请输入SQL语句"
/>
<!-- <SqlEditor v-model="sqlQuery" /> -->
</el-col>
<el-col :span="4">
<el-button
type="primary"
@click="executeSql"
class="w-100"
:disabled="executing"
>
执行
</el-button> </el-button>
</el-col> <el-button text @click="formatSql" v-if="false">
</el-row> <el-icon><Operation /></el-icon> 格式化
</el-button>
<!-- 结果表格 --> </div>
<el-table </div>
:data="tableData" </template>
style="width: 100%" <SqlEditor
height="400px" v-model="sqlQuery"
v-horizontal-scroll="'always'" @execute="executeSql"
v-loading="loading" />
<div class="sql-actions">
<el-button
type="primary"
size="large"
@click="executeSql"
:loading="executing"
:disabled="!sqlQuery.trim()"
> >
<el-table-column <el-icon><VideoPlay /></el-icon>
v-for="column in tableColumns" 执行 SQL
:key="column.prop" </el-button>
:prop="column.prop" </div>
:label="column.label" </el-card>
/>
</el-table> <el-card class="result-card" shadow="never" v-loading="loading">
</el-col> <template #header>
</el-row> <div class="card-header">
<span><el-icon><Tickets /></el-icon> 查询结果</span>
<div class="header-actions">
<el-button text @click="exportData" v-if="tableData.length > 0">
<el-icon><Download /></el-icon> 导出
</el-button>
</div>
</div>
</template>
<el-table
:data="tableData"
stripe
border
height="400"
style="width: 100%"
>
<el-table-column
v-for="column in tableColumns"
:key="column.prop"
:prop="column.prop"
:label="column.label"
show-overflow-tooltip
/>
<template #empty>
<el-empty description="暂无数据，请先执行 SQL 查询" />
</template>
</el-table>
</el-card>
<!-- 添加/编辑数据库对话框 -->
<el-dialog <el-dialog
v-model="databaseDialogVisible" v-model="databaseDialogVisible"
:title="isEditDatabase ? '编辑数据库' : '添加数据库'" :title="isEditDatabase ? '编辑数据库' : '添加数据库'"
width="50%" width="600px"
:close-on-click-modal="false" :close-on-click-modal="false"
destroy-on-close
> >
<el-form :model="databaseForm" label-width="100px"> <el-form
<el-form-item label="数据库名称" required> ref="databaseFormRef"
<el-input :model="databaseForm"
v-model="databaseForm.DB_NAME" :rules="databaseRules"
placeholder="请输入数据库名称" label-width="100px"
/> >
</el-form-item> <el-row :gutter="20">
</el-form> <el-col :span="12">
<el-form :model="databaseForm" label-width="100px"> <el-form-item label="数据库名称" prop="DB_NAME">
<el-form-item label="数据库密码" required> <el-input v-model="databaseForm.DB_NAME" placeholder="请输入数据库名称" />
<el-input </el-form-item>
v-model="databaseForm.DB_Password" </el-col>
type="password" <el-col :span="12">
placeholder="请输入数据库密码" <el-form-item label="数据库类型" prop="DB_Type">
show-password <el-select v-model="databaseForm.DB_Type" placeholder="请选择数据库类型" class="w-100">
/> <el-option label="MySQL" :value="0" />
</el-form-item> <el-option label="PostgreSQL" :value="1" />
</el-form> </el-select>
<el-form :model="databaseForm" label-width="100px"> </el-form-item>
<el-form-item label="用户名" required> </el-col>
<el-input </el-row>
v-model="databaseForm.DB_User" <el-row :gutter="20">
placeholder="请输入用户名称" <el-col :span="12">
/> <el-form-item label="IP或域名" prop="DB_IP">
</el-form-item> <el-input v-model="databaseForm.DB_IP" placeholder="请输入数据库 IP 或域名" />
</el-form> </el-form-item>
<el-form :model="databaseForm" label-width="100px"> </el-col>
<el-form-item label="IP或域名" required> <el-col :span="12">
<el-input <el-form-item label="端口" prop="DB_Port">
v-model="databaseForm.DB_IP" <el-input v-model="databaseForm.DB_Port" placeholder="请输入数据库端口" />
placeholder="请输入数据库ip或域名" </el-form-item>
/> </el-col>
</el-form-item> </el-row>
</el-form> <el-row :gutter="20">
<el-form :model="databaseForm" label-width="100px"> <el-col :span="12">
<el-form-item label="数据库端口" required> <el-form-item label="用户名" prop="DB_User">
<el-input <el-input v-model="databaseForm.DB_User" placeholder="请输入用户名" />
v-model="databaseForm.DB_Port" </el-form-item>
placeholder="请输入数据库端口" </el-col>
/> <el-col :span="12">
</el-form-item> <el-form-item label="密码" prop="DB_Password">
</el-form> <el-input
<el-form :model="databaseForm" label-width="100px"> v-model="databaseForm.DB_Password"
<el-form-item label="数据库类型" required> type="password"
<el-select show-password
v-model="databaseForm.DB_Type" placeholder="请输入密码"
placeholder="请选择数据库类型" />
> </el-form-item>
<el-option label="MySQL" value="0" /> </el-col>
<el-option label="PostgreSQL" value="1" /> </el-row>
</el-select> <el-form-item label="描述信息" prop="DB_Desc">
</el-form-item>
</el-form>
<el-form :model="databaseForm" label-width="100px">
<el-form-item label="描述信息">
<el-input <el-input
v-model="databaseForm.DB_Desc" v-model="databaseForm.DB_Desc"
type="textarea"
:rows="3"
placeholder="请输入备注信息" placeholder="请输入备注信息"
/> />
</el-form-item> </el-form-item>
@ -192,32 +218,35 @@
<el-dialog <el-dialog
v-model="sqlHistoryDialogVisible" v-model="sqlHistoryDialogVisible"
title="SQL执行历史" title="SQL 执行历史"
width="50%" width="800px"
:close-on-click-modal="false" :close-on-click-modal="false"
> >
<el-table :data="sqlHistory" stripe width="100%" height="600px" fit> <el-table :data="sqlHistory" stripe height="500">
<el-table-column prop="ID" label="SQLID" width="150"></el-table-column> <el-table-column prop="ID" label="ID" width="80" />
<el-table-column prop="SQL" label="SQL" width="500"> </el-table-column> <el-table-column prop="SQL" label="SQL 语句" min-width="300" show-overflow-tooltip>
<el-table-column label="操作" width="270"> <template #default="{ row }">
<template #default="scope"> <el-tooltip placement="top" :disabled="row.SQL.length <= 50">
<el-button <template #content>
type="primary" <div class="sql-tooltip">{{ row.SQL }}</div>
size="mini" </template>
@click.prevent="useCurrSql(scope.$index)" <span class="sql-content">{{ row.SQL }}</span>
>引用</el-button </el-tooltip>
> </template>
<el-button </el-table-column>
type="primary" <el-table-column label="操作" width="150" fixed="right">
size="mini" <template #default="{ row, $index }">
@click.prevent="DelSqlHistory(scope.$index)" <el-button link type="primary" size="small" @click="useCurrSql($index)">
>删除</el-button <el-icon><RefreshLeft /></el-icon> 引用
> </el-button>
<el-button link type="danger" size="small" @click="DelSqlHistory($index)">
<el-icon><Delete /></el-icon> 删除
</el-button>
</template> </template>
</el-table-column> </el-table-column>
</el-table> </el-table>
<template #footer> <template #footer>
<el-button @click="sqlHistoryDialogVisible = false">取消</el-button> <el-button @click="sqlHistoryDialogVisible = false">关闭</el-button>
</template> </template>
</el-dialog> </el-dialog>
</div> </div>
@ -233,15 +262,28 @@ import {
GetSQLRunHistoryService, GetSQLRunHistoryService,
} from "@/api/dbm"; } from "@/api/dbm";
import { DatabaseConfig, ISQLOperation } from "@/types/dbm"; import { DatabaseConfig, ISQLOperation } from "@/types/dbm";
import { Search, Edit, Delete, Plus } from "@element-plus/icons-vue"; import {
import { ElMessage } from "element-plus"; Edit,
Delete,
Plus,
Monitor,
Document,
EditPen,
Tickets,
VideoPlay,
RefreshLeft,
Download,
Operation,
Folder,
} from "@element-plus/icons-vue";
import { ElMessage, ElMessageBox, type FormInstance, type FormRules } from "element-plus";
import SqlEditor from './sqlEditor.vue'; import SqlEditor from './sqlEditor.vue';
// 数据库下拉框数据 const databaseFormRef = ref<FormInstance>();
const databases = ref<DatabaseConfig[]>([]); const databases = ref<DatabaseConfig[]>([]);
const selectedDatabase = ref(""); const selectedDatabase = ref("");
// 连接下拉框数据
const connections = ref([ const connections = ref([
{ name: "腾讯服务器", domain: "tx.ljsea.top" }, { name: "腾讯服务器", domain: "tx.ljsea.top" },
{ name: "阿里云服务器", domain: "al.ljsea.top" }, { name: "阿里云服务器", domain: "al.ljsea.top" },
@ -250,41 +292,32 @@ const connections = ref([
const supportdedDBTypes = ref({ 0: "mysql", 1: "postgresql" }); const supportdedDBTypes = ref({ 0: "mysql", 1: "postgresql" });
const selectedConnection = ref(""); const selectedConnection = ref("");
// SQL查询相关
const sqlQuery = ref(""); const sqlQuery = ref("");
const executing = ref(false); const executing = ref(false);
const tableData = ref([]); const tableData = ref<any[]>([]);
const tableColumns = ref([]); const tableColumns = ref<any[]>([]);
const loading = ref(false); const loading = ref(false);
// 数据库表列表
// 数据库对话框相关
const databaseDialogVisible = ref(false); const databaseDialogVisible = ref(false);
const sqlHistoryDialogVisible = ref(false); const sqlHistoryDialogVisible = ref(false);
const isEditDatabase = ref(false); const isEditDatabase = ref(false);
const databaseForm = ref<DatabaseConfig>(); const databaseForm = ref<DatabaseConfig>();
const sqlHistory = ref<ISQLOperation[]>([]); const sqlHistory = ref<ISQLOperation[]>([]);
// 连接对话框相关 const databaseRules = reactive<FormRules<DatabaseConfig>>({
const connectionDialogVisible = ref(false); DB_NAME: [{ required: true, message: "请输入数据库名称", trigger: "blur" }],
const isEditConnection = ref(false); DB_IP: [{ required: true, message: "请输入 IP 或域名", trigger: "blur" }],
const connectionForm = reactive({ DB_Port: [{ required: true, message: "请输入端口", trigger: "blur" }],
id: 0, DB_User: [{ required: true, message: "请输入用户名", trigger: "blur" }],
name: "", DB_Password: [{ required: true, message: "请输入密码", trigger: "blur" }],
host: "", DB_Type: [{ required: true, message: "请选择数据库类型", trigger: "change" }],
port: "",
username: "",
password: "",
}); });
const showSQLHistoryDialog = async () => { const showSQLHistoryDialog = async () => {
sqlHistoryDialogVisible.value = true; sqlHistoryDialogVisible.value = true;
console.log('SQL history dialog opened:', sqlHistoryDialogVisible.value);
await getRunSQLHistory(); await getRunSQLHistory();
}; };
// 方法定义
const showAddDatabaseDialog = () => { const showAddDatabaseDialog = () => {
isEditDatabase.value = false; isEditDatabase.value = false;
databaseForm.value = { databaseForm.value = {
@ -306,13 +339,85 @@ const showAddDatabaseDialog = () => {
databaseDialogVisible.value = true; databaseDialogVisible.value = true;
}; };
const editDatabase = (item) => { const editDatabase = (item: DatabaseConfig) => {
isEditDatabase.value = true; isEditDatabase.value = true;
console.log("editDatabase:", item); databaseForm.value = { ...item };
databaseForm.value = item;
databaseDialogVisible.value = true; databaseDialogVisible.value = true;
}; };
const deleteDatabase = async (item: DatabaseConfig) => {
try {
await ElMessageBox.confirm(`确认删除数据库 "${item.Name}"？`, "提示", {
confirmButtonText: "确认",
cancelButtonText: "取消",
type: "warning",
});
databases.value = databases.value.filter((db) => db.ID !== item.ID);
ElMessage.success("删除成功");
} catch {
// 用户取消
}
};
const saveDatabase = async () => {
if (!databaseFormRef.value) return;
await databaseFormRef.value.validate(async (valid) => {
if (!valid) return;
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,
};
await 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,
};
await 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 GetDBManageList = async () => { const GetDBManageList = async () => {
let req = { let req = {
get_type: 0, get_type: 0,
@ -334,16 +439,6 @@ const GetDBManageList = async () => {
" - " + " - " +
databases.value[i].DB_NAME; databases.value[i].DB_NAME;
} }
ElMessage.success("获取数据库列表成功");
console.log("获取数据库列表成功:", databases.value);
// console.log("获取数据库列表成功:", res.data);
// console.log("获取数据库列表成功:", res.data);
// console.log("获取数据库列表成功:", res.data);
} else {
console.error("获取数据库列表失败:", res.message);
} }
}) })
.catch((error: any) => { .catch((error: any) => {
@ -352,89 +447,28 @@ const GetDBManageList = async () => {
}; };
GetDBManageList(); GetDBManageList();
const useCurrSql = (index) => { const useCurrSql = (index: number) => {
sqlQuery.value = sqlHistory.value[index].SQL; sqlQuery.value = sqlHistory.value[index].SQL;
sqlHistoryDialogVisible.value = false; sqlHistoryDialogVisible.value = false;
}; };
const DelSqlHistory = (index) => { const DelSqlHistory = async (index: number) => {
sqlHistory.value.splice(index, 1); try {
}; await ElMessageBox.confirm("确认删除这条 SQL 记录？", "提示", {
confirmButtonText: "确认",
const deleteDatabase = (item) => { cancelButtonText: "取消",
// 实际项目中这里应该调用API删除 type: "warning",
databases.value = databases.value.filter((db) => db.ID !== item.id); });
}; sqlHistory.value.splice(index, 1);
ElMessage.success("删除成功");
const saveDatabase = () => { } catch {
let req = {}; // 用户取消
if (isEditDatabase.value) {
// 更新
// const index = databases.value.findIndex(db => db.ID === databaseForm.id);
// if (index !== -1) {
// databases.value[index].Name = databaseForm.name;
// }]
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 {
// 新增
// databases.value.push({
// id: databases.value.length + 1,
// name: databaseForm.name,
// });
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 () => { const getRunSQLHistory = async () => {
if (!selectedDatabase.value) { if (!selectedDatabase.value) {
ElMessage({ ElMessage.error("请先选择数据库");
type: "error",
message: "请选择数据库",
});
return; return;
} }
let req = { let req = {
@ -446,12 +480,6 @@ const getRunSQLHistory = async () => {
.then((res: any) => { .then((res: any) => {
if (res.code === 0) { if (res.code === 0) {
sqlHistory.value = res.data; sqlHistory.value = res.data;
ElMessage({
type: "success",
message: "获取SQL执行历史成功",
});
} else {
console.error("获取SQL执行历史失败:", res.message);
} }
}) })
.catch((error: any) => { .catch((error: any) => {
@ -459,12 +487,13 @@ const getRunSQLHistory = async () => {
}); });
}; };
const executeSql = () => { const executeSql = async () => {
if (!selectedDatabase.value) { if (!selectedDatabase.value) {
ElMessage({ ElMessage.error("请先选择数据库");
type: "error", return;
message: "请选择数据库", }
}); if (!sqlQuery.value.trim()) {
ElMessage.warning("请输入 SQL 语句");
return; return;
} }
executing.value = true; executing.value = true;
@ -477,70 +506,148 @@ const executeSql = () => {
db_id: selectedDatabase.value, db_id: selectedDatabase.value,
}; };
try { try {
RunSQLService(req) await RunSQLService(req)
.then((res: any) => { .then((res: any) => {
if (res.code === 0) { if (res.code === 0) {
tableData.value = res.data.Rows; tableData.value = res.data.Rows || [];
tableColumns.value = res.data.Columns; tableColumns.value = res.data.Columns || [];
// let keys = Object.keys(res.data.Rows[0]); ElMessage.success("执行 SQL 成功");
//console.log( 'columns:',tableColumns.value);
// tableColumns.value = res.columns;
// tableColumns.value = keys.map((key) => {
// return { prop: key, label: key };
// });
// console.log(res.data);
ElMessage({
type: "success",
message: "执行SQL成功",
});
} else { } else {
console.error("执行SQL失败:", res.message); ElMessage.error(res.message || "执行 SQL 失败");
ElMessage({
type: "error",
message: res.message,
});
} }
}) })
.catch((error: any) => { .catch((error: any) => {
console.error("请求错误:", error); console.error("请求错误:", error);
ElMessage.error("请求失败");
}); });
} catch (e) { } catch (e) {
console.log(e); console.log(e);
} finally {
executing.value = false;
loading.value = false;
} }
executing.value = false;
loading.value = false;
}; };
const clearSql = () => {
sqlQuery.value = "";
};
const formatSql = () => {
ElMessage.info("格式化功能开发中");
};
const exportData = () => {
if (tableData.value.length === 0) return;
try {
const headers = tableColumns.value.map((col) => col.label).join(",");
const csvContent =
headers +
"\n" +
tableData.value
.map((row) =>
tableColumns.value.map((col) => JSON.stringify(row[col.prop] ?? "")).join(",")
)
.join("\n");
const blob = new Blob(["" + csvContent], { type: "text/csv;charset=utf-8;" });
const link = document.createElement("a");
link.href = URL.createObjectURL(blob);
link.download = `query_result_${Date.now()}.csv`;
link.click();
ElMessage.success("导出成功");
} catch (e) {
ElMessage.error("导出失败");
}
};
</script> </script>
<style scoped> <style scoped>
.db-manage-container { .db-manage-container {
padding: 20px; padding: 20px;
display: flex;
flex-direction: column;
gap: 16px;
} }
.table-list { .header-card,
background: #fff; .sql-card,
padding: 10px; .result-card {
border-radius: 4px; border-radius: 8px;
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
} }
.mb-20 { .card-header {
margin-bottom: 20px; display: flex;
justify-content: space-between;
align-items: center;
font-weight: 500;
}
.header-actions {
display: flex;
gap: 8px;
} }
.w-100 { .w-100 {
width: 100%; width: 100%;
} }
.database-option {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
}
.database-option .db-name {
flex: 1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.option-actions { .option-actions {
float: right; display: flex;
gap: 8px;
opacity: 0;
transition: opacity 0.2s;
}
.el-option:hover .option-actions {
opacity: 1;
} }
.option-actions .el-icon { .option-actions .el-icon {
margin-left: 10px;
cursor: pointer; cursor: pointer;
padding: 4px;
border-radius: 4px;
transition: background-color 0.2s;
}
.option-actions .el-icon:hover {
background-color: var(--el-fill-color-light);
}
.option-actions .delete-icon:hover {
color: var(--el-color-danger);
}
.sql-actions {
margin-top: 12px;
display: flex;
justify-content: flex-end;
}
.sql-content {
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
word-break: break-all;
}
.sql-tooltip {
max-width: 600px;
white-space: pre-wrap;
word-break: break-all;
} }
</style> </style>

219
src/views/system/sqlEditor.vue
View File

@ -1,88 +1,187 @@
<template> <template>
<div ref="editorContainer" class="sql-editor-container" /> <codemirror
v-model="code"
:placeholder="placeholder"
:style="{ height: '200px' }"
:autofocus="false"
:indent-with-tab="true"
:tab-size="2"
:extensions="extensions"
@keydown="handleKeydown"
@update:value="handleChange"
/>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { ref, onMounted, onUnmounted, watch, type Ref } from 'vue'; import { ref, computed, watch } from 'vue';
import { EditorState, EditorView, basicSetup } from '@codemirror/basic-setup'; import { Codemirror } from 'vue-codemirror';
import { sql } from '@codemirror/lang-sql'; import { sql, MySQL } from '@codemirror/lang-sql';
import { oneDark } from '@codemirror/theme-one-dark'; // 可选主题 import { keymap } from '@codemirror/view';
import { autocompletion, completeFromList } from '@codemirror/autocomplete';
import { basicSetup } from 'codemirror';
const sqlKeywords = [
'SELECT', 'FROM', 'WHERE', 'AND', 'OR', 'NOT', 'INSERT', 'INTO', 'VALUES',
'UPDATE', 'SET', 'DELETE', 'CREATE', 'TABLE', 'ALTER', 'DROP', 'TRUNCATE',
'DATABASE', 'USE', 'INDEX', 'VIEW', 'PROCEDURE', 'FUNCTION', 'RETURN',
'JOIN', 'LEFT', 'RIGHT', 'INNER', 'OUTER', 'FULL', 'ON', 'GROUP', 'BY',
'HAVING', 'ORDER', 'ASC', 'DESC', 'LIMIT', 'OFFSET', 'DISTINCT', 'AS',
'UNION', 'ALL', 'EXCEPT', 'INTERSECT', 'IN', 'EXISTS', 'BETWEEN', 'LIKE',
'IS', 'NULL', 'TRUE', 'FALSE', 'DEFAULT', 'PRIMARY', 'KEY', 'FOREIGN',
'REFERENCES', 'CHECK', 'CONSTRAINT', 'UNIQUE', 'AUTO_INCREMENT', 'SERIAL',
'CASCADE', 'RESTRICT', 'NO', 'ACTION', 'WITH', 'TIME', 'ZONE', 'PARTITION',
'SELECT', 'INSERT', 'UPDATE', 'DELETE', 'MERGE', 'UPSERT', 'REPLACE',
'BEGIN', 'COMMIT', 'ROLLBACK', 'TRANSACTION', 'SAVEPOINT', 'LOCK',
'GRANT', 'REVOKE', 'DENY', 'EXEC', 'EXECUTE', 'DECLARE', 'SET',
'IF', 'ELSE', 'CASE', 'WHEN', 'THEN', 'END', 'WHILE', 'FOR', 'LOOP',
'CURSOR', 'OPEN', 'FETCH', 'CLOSE', 'DEALLOCATE', 'PREPARE', 'EXECUTE',
'SHOW', 'DESCRIBE', 'DESC', 'EXPLAIN', 'USE', 'HELP', 'SOURCE',
'COUNT', 'SUM', 'AVG', 'MIN', 'MAX', 'ROUND', 'FLOOR', 'CEIL', 'CEILING',
'ABS', 'MOD', 'POWER', 'SQRT', 'EXP', 'LOG', 'LOG10', 'LN', 'RAND',
'CONCAT', 'SUBSTRING', 'LEFT', 'RIGHT', 'TRIM', 'LTRIM', 'RTRIM',
'UPPER', 'LOWER', 'INITCAP', 'LENGTH', 'CHAR_LENGTH', 'CHARACTER_LENGTH',
'POSITION', 'STRPOS', 'INSTR', 'LOCATE', 'REPLACE', 'TRANSLATE',
'DATE', 'TIME', 'DATETIME', 'TIMESTAMP', 'YEAR', 'MONTH', 'DAY',
'HOUR', 'MINUTE', 'SECOND', 'NOW', 'CURDATE', 'CURRENT_DATE',
'CURTIME', 'CURRENT_TIME', 'CURRENT_TIMESTAMP', 'DATE_ADD', 'DATE_SUB',
'DATEDIFF', 'TIMESTAMPDIFF', 'DATE_FORMAT', 'STR_TO_DATE',
'CAST', 'CONVERT', 'COALESCE', 'NULLIF', 'IFNULL', 'ISNULL',
'FIRST', 'LAST', 'FIRST_VALUE', 'LAST_VALUE', 'NTH_VALUE',
'ROW_NUMBER', 'RANK', 'DENSE_RANK', 'PERCENT_RANK', 'CUME_DIST',
'NTILE', 'LEAD', 'LAG', 'PERCENTILE_CONT', 'PERCENTILE_DISC',
'ARRAY', 'JSON', 'XML', 'GEOMETRY', 'POINT', 'LINESTRING', 'POLYGON',
'BOOLEAN', 'BOOL', 'INT', 'INTEGER', 'TINYINT', 'SMALLINT', 'MEDIUMINT',
'BIGINT', 'DECIMAL', 'NUMERIC', 'FLOAT', 'DOUBLE', 'REAL', 'BIT',
'CHAR', 'VARCHAR', 'BINARY', 'VARBINARY', 'TINYTEXT', 'TEXT',
'MEDIUMTEXT', 'LONGTEXT', 'ENUM', 'SET', 'DATE', 'DATETIME', 'TIMESTAMP',
'TIME', 'YEAR', 'JSON', 'JSONB', 'XML', 'UUID', 'INET', 'CIDR',
'MACADDR', 'TSVECTOR', 'TSQUERY', 'INT4RANGE', 'INT8RANGE', 'NUMRANGE',
'TSRANGE', 'TSTZRANGE', 'DATERANGE', 'POINT', 'LINE', 'LSEG', 'BOX',
'PATH', 'POLYGON', 'CIRCLE', 'MULTIPOINT', 'MULTILINESTRING',
'MULTIPOLYGON', 'GEOMETRYCOLLECTION'
];
const sqlCompletions = sqlKeywords.map((keyword) => ({
label: keyword,
type: 'keyword',
apply: keyword + ' ',
}));
// 定义 props（支持 v-model 双向绑定）
const props = defineProps<{ const props = defineProps<{
modelValue: string; modelValue: string;
placeholder?: string;
}>(); }>();
// 定义 emits
const emit = defineEmits<{ const emit = defineEmits<{
(e: 'update:modelValue', value: string): void; (e: 'update:modelValue', value: string): void;
(e: 'execute'): void;
}>(); }>();
// 编辑器容器引用 const code = ref(props.modelValue || '');
const editorContainer: Ref<HTMLElement | null> = ref(null); const placeholder = ref(props.placeholder || '请输入 SQL 语句');
let editorView: EditorView | null = null;
// 初始化编辑器 const extensions = [
const initEditor = () => { basicSetup,
if (!editorContainer.value) return; sql({ dialect: MySQL, upperCaseKeywords: true }),
autocompletion({
override: [completeFromList(sqlCompletions)],
defaultKeymap: true,
activateOnTyping: true,
}),
keymap.of([
{
key: 'Ctrl-Enter',
run: () => {
emit('execute');
return true;
},
},
{
key: 'Cmd-Enter',
run: () => {
emit('execute');
return true;
},
},
]),
];
// 配置编辑器扩展 const handleChange = (value: string) => {
const extensions = [ emit('update:modelValue', value);
basicSetup, // 基础功能（行号、语法高亮、快捷键等） };
sql(), // SQL 语言支持
oneDark, // 主题（可选，移除则使用默认主题） const handleKeydown = (event: KeyboardEvent) => {
EditorView.lineWrapping, // 自动换行 if ((event.ctrlKey || event.metaKey) && event.key === 'Enter') {
EditorView.updateListener.of((update) => { event.preventDefault();
// 监听内容变化并同步到 modelValue emit('execute');
if (update.docChanged) { }
const newValue = update.state.doc.toString();
emit('update:modelValue', newValue);
}
}),
];
// 初始化编辑器状态（使用 modelValue 作为初始内容）
const state = EditorState.create({
doc: props.modelValue,
extensions,
});
// 创建 EditorView 并挂载到容器
editorView = new EditorView({
state,
parent: editorContainer.value,
});
}; };
// 监听 modelValue 变化（外部修改时更新编辑器内容）
watch( watch(
() => props.modelValue, () => props.modelValue,
(newValue) => { (newValue) => {
if (editorView && newValue !== editorView.state.doc.toString()) { if (newValue !== code.value) {
editorView.dispatch({ code.value = newValue;
changes: { from: 0, to: editorView.state.doc.length, insert: newValue },
});
} }
}, }
{ deep: true }
); );
// 生命周期：挂载后初始化编辑器
onMounted(() => {
initEditor();
});
// 生命周期：卸载时销毁编辑器（避免内存泄漏）
onUnmounted(() => {
editorView?.destroy();
});
</script> </script>
<style scoped> <style scoped>
.sql-editor-container { :deep(.cm-editor) {
height: 400px; /* 必须指定高度 */ height: 100%;
border: 1px solid #e5e7eb; border: 1px solid #dcdfe6;
border-radius: 4px; border-radius: 8px;
overflow: hidden; overflow: hidden;
transition: border-color 0.2s;
}
:deep(.cm-editor:hover) {
border-color: #c0c4cc;
}
:deep(.cm-focused) {
border-color: #409eff !important;
box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.2);
outline: none !important;
}
:deep(.cm-scroller) {
font-family: '"JetBrains Mono", "Fira Code", Consolas, monospace';
font-size: 14px;
line-height: 1.6;
}
:deep(.cm-gutters) {
background-color: #f5f7fa;
border-right: 1px solid #e4e7ed;
color: #909399;
}
:deep(.cm-activeLineGutter) {
background-color: #ecf5ff;
}
:deep(.cm-activeLine) {
background-color: rgba(64, 158, 255, 0.05);
}
:deep(.cm-tooltip) {
background-color: #ffffff !important;
border: 1px solid #e4e7ed !important;
border-radius: 8px !important;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
}
:deep(.cm-tooltip-autocomplete ul li[aria-selected]) {
background-color: #ecf5ff !important;
color: #409eff !important;
}
:deep(.cm-completionIcon-keyword)::before {
content: 'K';
color: #409eff;
font-weight: bold;
font-size: 12px;
} }
</style> </style>