198 lines
7.4 KiB
HTML
198 lines
7.4 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html lang="en">
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8">
|
||
|
|
<title>代码生成器-数据库生成</title>
|
||
|
|
<!-- 本地引入 Bootstrap CSS -->
|
||
|
|
<link rel="stylesheet" th:href="@{/src/lib/css/index.css}">
|
||
|
|
<!-- 本地引入 Vue.js -->
|
||
|
|
<script th:src="@{/src/lib/js/vue/vue.global.js}"></script>
|
||
|
|
<!-- 本地引入 Bootstrap JS -->
|
||
|
|
<script th:src="@{/src/lib/js/boostrap/bootstrap.bundle.min.js}"></script>
|
||
|
|
<!-- 本地引入 popper JS -->
|
||
|
|
<script th:src="@{/src/lib/js/boostrap/popper.min.js}"></script>
|
||
|
|
<!-- 本地引入 axios JS -->
|
||
|
|
<script th:src="@{/src/lib/js/axios/axios.min.js}"></script>
|
||
|
|
<!-- 引入dayjs -->
|
||
|
|
<script th:src="@{/src/lib/js/dayjs/dayjs.min.js}"></script>
|
||
|
|
<script th:src="@{/src/lib/js/dayjs/customParseFormat.js}"></script>
|
||
|
|
<script th:src="@{/src/lib/js/dayjs/weekday.js}"></script>
|
||
|
|
<script th:src="@{/src/lib/js/dayjs/localeData.js}"></script>
|
||
|
|
<script th:src="@{/src/lib/js/dayjs/weekOfYear.js}"></script>
|
||
|
|
<script th:src="@{/src/lib/js/dayjs/weekYear.js}"></script>
|
||
|
|
<script th:src="@{/src/lib/js/dayjs/advancedFormat.js}"></script>
|
||
|
|
<script th:src="@{/src/lib/js/dayjs/quarterOfYear.js}"></script>
|
||
|
|
<!-- 引入 antd JS -->
|
||
|
|
<script th:src="@{/src/lib/js/dayjs/antd.min.js}"></script>
|
||
|
|
</head>
|
||
|
|
|
||
|
|
<body>
|
||
|
|
<div id="app">
|
||
|
|
<div class="container my-4">
|
||
|
|
<!-- 主标题 -->
|
||
|
|
<app-header></app-header>
|
||
|
|
|
||
|
|
<!-- 主卡片 -->
|
||
|
|
<database-card :raw-table-list="rawTableList" @get-database-table-list="getDatabaseTableList"
|
||
|
|
v-model:db-select="dbSelect" v-model:table-select="tableSelect"></database-card>
|
||
|
|
|
||
|
|
<!-- 填写生成表单 -->
|
||
|
|
<database-form :generator-code-loading="generatorCodeLoading" :on-clear-generator-data="onClearGeneratorData"
|
||
|
|
:on-generator-code="onGeneratorCode" ref="mainFormRef" v-model:form="form"></database-form>
|
||
|
|
|
||
|
|
<!-- 表格显示 -->
|
||
|
|
<database-table :db-select="dbSelect" :loading="loading" :on-generator-code="onGeneratorCode"
|
||
|
|
:raw-table-list="rawTableList" :table-list="tableList" v-model:form="form"></database-table>
|
||
|
|
|
||
|
|
<!-- 模板生成页面 -->
|
||
|
|
<database-generator-page :generator-data="generatorData" ref="mainGeneratorRef"
|
||
|
|
v-model:generator-page-flag="generatorPageFlag"></database-generator-page>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</body>
|
||
|
|
|
||
|
|
<!-- 引入Highlight.js -->
|
||
|
|
<script th:src="@{/src/lib/js/highlightjs/highlight.min.js}"></script>
|
||
|
|
<script th:src="@{/src/lib/js/highlightjs/javascript.min.js}"></script>
|
||
|
|
<!-- 初始化 Highlight.js -->
|
||
|
|
<script th:src="@{/src/config/highlight-config.js}"></script>
|
||
|
|
<!-- 设置 popper 提示框 -->
|
||
|
|
<script th:src="@{/src/config/popper-config.js}"></script>
|
||
|
|
<!-- 加载全局axios配置 -->
|
||
|
|
<script th:src="@{/src/config/axios-config.js}"></script>
|
||
|
|
|
||
|
|
<!-- 引入组件 -->
|
||
|
|
<script th:src="@{/src/components/AppHeader.js}"></script>
|
||
|
|
<script th:src="@{/src/views/database/DatabaseCard.js}"></script>
|
||
|
|
<script th:src="@{/src/views/database/DatabaseForm.js}"></script>
|
||
|
|
<script th:src="@{/src/views/database/DatabaseTable.js}"></script>
|
||
|
|
<script th:src="@{/src/views/database/DatabaseGeneratorPage.js}"></script>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
const {createApp, ref} = Vue
|
||
|
|
|
||
|
|
const app = createApp({
|
||
|
|
setup() {
|
||
|
|
return {
|
||
|
|
// 数据库选择
|
||
|
|
dbSelect: ref(""),
|
||
|
|
// 数据库表过滤
|
||
|
|
tableSelect: ref(""),
|
||
|
|
// 数据库表列表
|
||
|
|
tableList: ref([]),
|
||
|
|
// 原始数据库列表
|
||
|
|
rawTableList: ref([]),
|
||
|
|
// 是否加载
|
||
|
|
loading: ref(false),
|
||
|
|
// 是否正在生成
|
||
|
|
generatorCodeLoading: ref(false),
|
||
|
|
// 提交的表单
|
||
|
|
form: ref({
|
||
|
|
// 作者名称
|
||
|
|
author: "Bunny",
|
||
|
|
// requestMapping名称
|
||
|
|
requestMapping: "/api",
|
||
|
|
// 表名称
|
||
|
|
tableNames: [],
|
||
|
|
// 包名称
|
||
|
|
packageName: "cn.bunny",
|
||
|
|
// 时间格式
|
||
|
|
simpleDateFormat: "yyyy-MM-dd HH:mm:ss",
|
||
|
|
// 去除开头前缀
|
||
|
|
tablePrefixes: "t_,sys_,qrtz_,log_",
|
||
|
|
// 生成代码路径
|
||
|
|
path: [],
|
||
|
|
}),
|
||
|
|
// 是否显示生成页面
|
||
|
|
generatorPageFlag: ref(false),
|
||
|
|
// 生成的数据
|
||
|
|
generatorData: ref({}),
|
||
|
|
};
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
/* 获取[当前/所有]数据库表 */
|
||
|
|
async getDatabaseTableList() {
|
||
|
|
this.loading = true;
|
||
|
|
// 查询数据库表
|
||
|
|
const response = await axiosInstance.get("/table/databaseTableList", {params: {dbName: this.dbSelect}});
|
||
|
|
const {data, code, message} = response;
|
||
|
|
|
||
|
|
if (code !== 200) {
|
||
|
|
antd.message.error(message);
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
// 设置数据库列表
|
||
|
|
this.tableList = data;
|
||
|
|
this.rawTableList = data;
|
||
|
|
|
||
|
|
// 重置到第一页
|
||
|
|
this.currentPage = 1;
|
||
|
|
|
||
|
|
this.loading = false;
|
||
|
|
},
|
||
|
|
|
||
|
|
/**
|
||
|
|
* 生成代码
|
||
|
|
* @returns {Promise<void>}
|
||
|
|
*/
|
||
|
|
async onGeneratorCode() {
|
||
|
|
this.generatorCodeLoading = true;
|
||
|
|
// 验证表单是否通过
|
||
|
|
const isValidate = this.$refs.mainFormRef.validateForm();
|
||
|
|
if (!isValidate) return;
|
||
|
|
|
||
|
|
// 请求生成模板
|
||
|
|
const {data, code, message} = await axiosInstance.post("/vms/generator", this.form);
|
||
|
|
|
||
|
|
// 判断是否请求成功
|
||
|
|
if (code !== 200) {
|
||
|
|
this.generatorCodeLoading = false;
|
||
|
|
return;
|
||
|
|
} else antd.message.success(message);
|
||
|
|
|
||
|
|
// 显示生成的页面
|
||
|
|
this.generatorData = data;
|
||
|
|
this.generatorPageFlag = true;
|
||
|
|
this.generatorCodeLoading = false;
|
||
|
|
|
||
|
|
// 等待 DOM 更新，之后手动更新代码高亮
|
||
|
|
await this.$nextTick();
|
||
|
|
hljs.highlightAll();
|
||
|
|
},
|
||
|
|
|
||
|
|
/* 清空已经生成的内容 */
|
||
|
|
onClearGeneratorData() {
|
||
|
|
this.generatorData = {};
|
||
|
|
},
|
||
|
|
},
|
||
|
|
watch: {
|
||
|
|
/* 数据表选择 */
|
||
|
|
dbSelect: {
|
||
|
|
handler() {
|
||
|
|
this.getDatabaseTableList();
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
/* 过滤数据表 */
|
||
|
|
tableSelect: {
|
||
|
|
handler(val) {
|
||
|
|
this.tableList = this.rawTableList;
|
||
|
|
// 根据表名进行过滤筛选或者根据注释内容进行筛选
|
||
|
|
this.tableList = this.tableList.filter(table => table.tableName.includes(val) || table.tablePrefixes.includes(val));
|
||
|
|
}
|
||
|
|
},
|
||
|
|
},
|
||
|
|
});
|
||
|
|
|
||
|
|
// 注册组件
|
||
|
|
app.component('AppHeader', AppHeader);
|
||
|
|
app.component('DatabaseCard', DatabaseCard);
|
||
|
|
app.component('DatabaseForm', DatabaseForm);
|
||
|
|
app.component('DatabaseTable', DatabaseTable);
|
||
|
|
app.component('DatabaseGeneratorPage', DatabaseGeneratorPage);
|
||
|
|
|
||
|
|
app.mount('#app');
|
||
|
|
</script>
|
||
|
|
|
||
|
|
</html>
|