feat: ✨ 代码生成器临时提交
This commit is contained in:
ray
93
src/api/database.ts
Normal file
93
src/api/database.ts
Normal file
@@ -0,0 +1,93 @@
|
||||
import request from "@/utils/request";
|
||||
|
||||
const DATABASE_BASE_URL = "/api/v1/databases";
|
||||
|
||||
class DatabaseAPI {
|
||||
/** 获取数据表分页列表 */
|
||||
static getTablePage(params: TablePageQuery) {
|
||||
return request<any, PageResult<TablePageVO[]>>({
|
||||
url: `${DATABASE_BASE_URL}/table/page`,
|
||||
method: "get",
|
||||
params: params,
|
||||
});
|
||||
}
|
||||
|
||||
/** 获取代码生成预览数据 */
|
||||
static getTableColumns(tableName: string) {
|
||||
return request<any, TableColumnVO[]>({
|
||||
url: `${DATABASE_BASE_URL}/${tableName}/columns`,
|
||||
method: "get",
|
||||
});
|
||||
}
|
||||
|
||||
/** 获取代码生成预览数据 */
|
||||
static getPreviewData(tableName: string) {
|
||||
return request<any, GeneratorPreviewVO>({
|
||||
url: `${DATABASE_BASE_URL}/table/${tableName}/generate-preview`,
|
||||
method: "get",
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
export default DatabaseAPI;
|
||||
|
||||
/** 代码生成预览对象 */
|
||||
export interface GeneratorPreviewVO {
|
||||
/** 文件生成路径 */
|
||||
path: string;
|
||||
/** 文件名称 */
|
||||
fileName: string;
|
||||
/** 文件内容 */
|
||||
content: string;
|
||||
}
|
||||
|
||||
/** 数据表分页查询参数 */
|
||||
export interface TablePageQuery extends PageQuery {
|
||||
/** 关键字(表名) */
|
||||
keywords?: string;
|
||||
}
|
||||
|
||||
/** 数据表分页对象 */
|
||||
export interface TablePageVO {
|
||||
/** 表名称 */
|
||||
tableName: string;
|
||||
|
||||
/** 表描述 */
|
||||
tableComment: string;
|
||||
|
||||
/** 存储引擎 */
|
||||
engine: string;
|
||||
|
||||
/** 字符集排序规则 */
|
||||
tableCollation: string;
|
||||
|
||||
/** 创建时间 */
|
||||
createTime: string;
|
||||
}
|
||||
|
||||
/** 数据表字段VO */
|
||||
export interface TableColumnVO {
|
||||
/** 字段名称 */
|
||||
columnName: string;
|
||||
|
||||
/** 字段类型 */
|
||||
dataType: string;
|
||||
|
||||
/** 字段描述 */
|
||||
columnComment: string;
|
||||
|
||||
/** 字段长度 */
|
||||
characterMaximumLength: number;
|
||||
|
||||
/** 是否主键(1-是 0-否) */
|
||||
isPrimaryKey: number;
|
||||
|
||||
/** 是否可为空(1-是 0-否) */
|
||||
isNullable: string;
|
||||
|
||||
/** 字符集 */
|
||||
characterSetName: string;
|
||||
|
||||
/** 字符集排序规则 */
|
||||
collationName: string;
|
||||
}
|
||||
@@ -1,20 +0,0 @@
|
||||
import request from "@/utils/request";
|
||||
|
||||
const USER_BASE_URL = "/api/v1/generators";
|
||||
|
||||
class GeneratorAPI {
|
||||
/**
|
||||
* 获取代码生成预览数据
|
||||
*/
|
||||
static getPreviewData(tableName: string) {
|
||||
return request<any, GeneratorPreviewVO>({
|
||||
url: `${USER_BASE_URL}/preview/${tableName}`,
|
||||
method: "get",
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
export default GeneratorAPI;
|
||||
|
||||
/** 代码生成预览对象 */
|
||||
export interface GeneratorPreviewVO {}
|
||||
@@ -1,8 +1,111 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<el-alert type="info" show-icon class="text-lg font-bold">
|
||||
前后端代码生成器开发中，敬请期待...
|
||||
</el-alert>
|
||||
<div class="search-container">
|
||||
<el-form ref="queryFormRef" :model="queryParams" :inline="true">
|
||||
<el-form-item prop="keywords" label="关键字">
|
||||
<el-input
|
||||
v-model="queryParams.keywords"
|
||||
placeholder="表名"
|
||||
clearable
|
||||
@keyup.enter="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="handleQuery">
|
||||
<i-ep-search />
|
||||
搜索
|
||||
</el-button>
|
||||
<el-button @click="handleResetQuery">
|
||||
<i-ep-refresh />
|
||||
重置
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
|
||||
<el-card shadow="never" class="table-container">
|
||||
<el-table
|
||||
ref="dataTableRef"
|
||||
v-loading="loading"
|
||||
:data="pageData"
|
||||
highlight-current-row
|
||||
border
|
||||
>
|
||||
<el-table-column type="selection" width="55" align="center" />
|
||||
<el-table-column label="表名" prop="tableName" min-width="100" />
|
||||
<el-table-column label="描述" prop="tableComment" width="150" />
|
||||
|
||||
<el-table-column label="存储引擎" align="center" prop="engine" />
|
||||
|
||||
<el-table-column
|
||||
label="排序规则"
|
||||
align="center"
|
||||
prop="tableCollation"
|
||||
/>
|
||||
<el-table-column label="创建时间" align="center" prop="createTime" />
|
||||
|
||||
<el-table-column fixed="right" label="操作" width="150">
|
||||
<template #default="scope">
|
||||
<el-button
|
||||
type="primary"
|
||||
size="small"
|
||||
link
|
||||
@click="handlePreview(scope.row.tableName)"
|
||||
>
|
||||
<i-ep-View />
|
||||
预览
|
||||
</el-button>
|
||||
<el-button
|
||||
type="primary"
|
||||
size="small"
|
||||
link
|
||||
@click="handlePreview(scope.row.tableName)"
|
||||
>
|
||||
<i-ep-MagicStick />
|
||||
生成
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<pagination
|
||||
v-if="total > 0"
|
||||
v-model:total="total"
|
||||
v-model:page="queryParams.pageNum"
|
||||
v-model:limit="queryParams.pageSize"
|
||||
@pagination="handleQuery"
|
||||
/>
|
||||
</el-card>
|
||||
|
||||
<el-drawer
|
||||
v-model="dialog.visible"
|
||||
:title="dialog.title"
|
||||
@close="handleCloseDialog"
|
||||
size="80%"
|
||||
>
|
||||
<el-row>
|
||||
<el-col :span="6">123</el-col>
|
||||
<el-col :span="18">
|
||||
<Codemirror
|
||||
v-model:value="code"
|
||||
:options="cmOptions"
|
||||
border
|
||||
ref="cmRef"
|
||||
height="400"
|
||||
width="600"
|
||||
@change="onChange"
|
||||
@input="onInput"
|
||||
@ready="onReady"
|
||||
/>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<template #footer>
|
||||
<el-button @click="handleCloseDialog">取 消</el-button>
|
||||
<el-button type="primary" @click="handleSubmit">确 定</el-button>
|
||||
</template>
|
||||
</el-drawer>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -10,6 +113,123 @@
|
||||
defineOptions({
|
||||
name: "Generator",
|
||||
});
|
||||
|
||||
import "codemirror/mode/javascript/javascript.js";
|
||||
import Codemirror from "codemirror-editor-vue3";
|
||||
import type { CmComponentRef } from "codemirror-editor-vue3";
|
||||
import type { Editor, EditorConfiguration } from "codemirror";
|
||||
|
||||
const code = ref(
|
||||
`var i = 0;
|
||||
for (; i < 9; i++) {
|
||||
console.log(i);
|
||||
// more statements
|
||||
}
|
||||
`
|
||||
);
|
||||
const cmRef = ref<CmComponentRef>();
|
||||
const cmOptions: EditorConfiguration = {
|
||||
mode: "text/javascript",
|
||||
};
|
||||
|
||||
const onChange = (val: string, cm: Editor) => {
|
||||
console.log(val);
|
||||
console.log(cm.getValue());
|
||||
};
|
||||
|
||||
const onInput = (val: string) => {
|
||||
console.log(val);
|
||||
};
|
||||
|
||||
const onReady = (cm: Editor) => {
|
||||
console.log(cm.focus());
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
setTimeout(() => {
|
||||
cmRef.value?.refresh();
|
||||
}, 1000);
|
||||
|
||||
setTimeout(() => {
|
||||
cmRef.value?.resize(300, 200);
|
||||
}, 2000);
|
||||
|
||||
setTimeout(() => {
|
||||
cmRef.value?.cminstance.isClean();
|
||||
}, 3000);
|
||||
});
|
||||
|
||||
onUnmounted(() => {
|
||||
handleQuery();
|
||||
cmRef.value?.destroy();
|
||||
});
|
||||
|
||||
import DatabaseAPI, {
|
||||
TablePageVO,
|
||||
TableColumnVO,
|
||||
TablePageQuery,
|
||||
GeneratorPreviewVO,
|
||||
} from "@/api/database";
|
||||
|
||||
const queryFormRef = ref(ElForm);
|
||||
|
||||
const loading = ref(false);
|
||||
const ids = ref<number[]>([]);
|
||||
const total = ref(0);
|
||||
|
||||
const queryParams = reactive<TablePageQuery>({
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
});
|
||||
|
||||
const pageData = ref<TablePageVO[]>([]);
|
||||
|
||||
const formData = reactive<any>({});
|
||||
|
||||
const dialog = reactive({
|
||||
visible: false,
|
||||
title: "",
|
||||
});
|
||||
|
||||
/** 查询 */
|
||||
function handleQuery() {
|
||||
loading.value = true;
|
||||
DatabaseAPI.getTablePage(queryParams)
|
||||
.then((data) => {
|
||||
pageData.value = data.list;
|
||||
total.value = data.total;
|
||||
})
|
||||
.finally(() => {
|
||||
loading.value = false;
|
||||
});
|
||||
}
|
||||
/** 重置查询 */
|
||||
function handleResetQuery() {
|
||||
queryFormRef.value.resetFields();
|
||||
queryParams.pageNum = 1;
|
||||
handleQuery();
|
||||
}
|
||||
|
||||
function handlePreview(tableName: string) {
|
||||
DatabaseAPI.getPreviewData(tableName).then((data) => {
|
||||
dialog.title = `预览 ${tableName}`;
|
||||
handleOpenDialog();
|
||||
});
|
||||
}
|
||||
|
||||
function handleCloseDialog() {
|
||||
dialog.visible = false;
|
||||
}
|
||||
|
||||
function handleOpenDialog() {
|
||||
dialog.visible = true;
|
||||
}
|
||||
|
||||
function handleSubmit() {}
|
||||
|
||||
/* onMounted(() => {
|
||||
handleQuery();
|
||||
}); */
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped></style>
|
||||
|
||||
Reference in New Issue
Block a user