auth/generator-code-web
auth
/
generator-code-web
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Compare commits

base: auth:b14435e35b9bec1ccb8ee213f4de913d7efc4c22
Branches Tags
auth:master
auth:dev
auth:v0.0.4
auth:v0.0.3
auth:v0.0.2
auth:v0.0.1
..
compare: auth:32e84f5433a7ab84ba0f6d17d63c6d12ce99cd66
Branches Tags
auth:dev
auth:master
auth:v0.0.4
auth:v0.0.3
auth:v0.0.2
auth:v0.0.1

8 Commits
b14435e35b ... 32e84f5433

Author SHA1 Message Date
bunny 32e84f5433 feat: 更新表单内容 2025-04-15 20:26:48 +08:00
bunny 782f709bd1 🎉 ci: 推送脚本更新 2025-04-11 22:08:48 +08:00
bunny 06d199f701 feat: 生成提交表单持久化 2025-04-10 23:31:35 +08:00
bunny c6b961bc40 feat: 使用zip打包下载生成内容 2025-04-09 22:21:36 +08:00
bunny 3589c1dad2 perf: 优化代码 2025-04-09 21:25:23 +08:00
bunny 0451fc89f6 🎉 feat: push脚本 2025-04-06 19:16:35 +08:00
bunny 5eddcf947d docs: 添加文档 2025-04-06 14:25:02 +08:00
bunny cba2f545dd perf: 格式化代码 2025-04-06 14:00:32 +08:00
30 changed files with 326 additions and 139 deletions
Show Stats Expand all files Collapse all files

2
.gitignore vendored
View File

@ -21,4 +21,4 @@ dist-ssr
*.ntvs* *.ntvs*
*.njsproj *.njsproj
*.sln *.sln
*.sw? *.sw?

13
README.md Normal file
View File

@ -0,0 +1,13 @@
# 代码生成器
## 功能展示
点击 表名 或 注释内容 跳转到另一个页面
![屏幕截图_6-4-2025_1486_localhost](./images/屏幕截图_6-4-2025_1486_localhost.jpeg)
![image-20250406140934864](./images/image-20250406140934864.png)
![屏幕截图_6-4-2025_1486_localhost](./images/屏幕截图_6-4-2025_1486_localhost-1743920303637-1.jpeg)
<video src="./images/QQ202546-141117.mp4"></video>

20
build/css.ts
View File

@ -1,16 +1,12 @@
import type {AcceptedPlugin} from 'postcss'; import type { CSSOptions } from 'vite';
import type {CSSOptions} from 'vite';
import {wrapperEnv} from './utils';
export const css = (mode: string): CSSOptions => { export const css = (mode: string): CSSOptions => {
return { return {
preprocessorOptions: { preprocessorOptions: {
scss: { scss: {
additionalData: `@use "@/assets/styles/minix/sidebar" as *;`, additionalData: `@use "@/assets/styles/minix/sidebar" as *;`,
}, },
}, },
}; };
}; };

2
build/optimize.ts
View File

@ -11,4 +11,4 @@ const include = ['vue', 'vue-router', 'dayjs', 'axios', 'pinia', 'vue-types', 'j
*/ */
const exclude: string[] = []; const exclude: string[] = [];
export { include, exclude }; export { exclude, include };

3
build/plugins.ts
View File

@ -9,7 +9,7 @@ import Inspector from 'vite-plugin-vue-inspector';
import { useCDN } from './cdn'; import { useCDN } from './cdn';
import { viteConsoleLog } from './info'; import { viteConsoleLog } from './info';
import { compressPack, report, wrapperEnv } from './utils'; import { compressPack, report } from './utils';
export const plugins = (mode: string): PluginOption[] => { export const plugins = (mode: string): PluginOption[] => {
return [ return [
@ -43,4 +43,3 @@ export const plugins = (mode: string): PluginOption[] => {
compressPack(mode), compressPack(mode),
]; ];
}; };

BIN
images/QQ202546-141117.mp4 Normal file
View File

Binary file not shown.

BIN
images/image-20250406140934864.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 153 KiB

BIN
images/屏幕截图_6-4-2025_1486_localhost-1743920303637-1.jpeg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 237 KiB

BIN
images/屏幕截图_6-4-2025_1486_localhost.jpeg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 237 KiB

2
index.html
View File

@ -2,7 +2,7 @@
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"/> <meta charset="UTF-8"/>
<link href="/favicon.ico" rel="icon" type="image/svg+xml"/> <link href="/favicon.png" rel="icon" type="image/svg+xml"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/> <meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<title>%VITE_APP_TITLE%</title> <title>%VITE_APP_TITLE%</title>
</head> </head>

BIN
public/favicon.ico
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 17 KiB

BIN
public/favicon.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 34 KiB

8
push.sh Normal file
View File

@ -0,0 +1,8 @@
git init
git add .
git commit -m "🎉 ci: 推送脚本更新"
git checkout master
git merge dev
git push --all
git push --tags
git checkout dev

18
src/api/server/request.ts
View File

@ -43,22 +43,18 @@ service.interceptors.response.use(
return response.data; return response.data;
} }
// ElMessage.error(msg || '系统出错'); // 系统出错
return Promise.reject(response.data.message || 'Error'); return Promise.reject(response.data.message || 'Error');
}, },
(error: any) => { (error: any) => {
// 异常处理 // 异常处理
if (error.response.data) { if (error.response.data) {
// const { code, msg } = error.response.data; const { code, message } = error.response.data;
// if (code === ResultEnum.TOKEN_INVALID) { if (code === 500) {
// ElNotification({ (window as any).$message.error(message);
// title: '提示', } else {
// message: '您的会话已过期，请重新登录', (window as any).$message.error(message || '系统出错');
// type: 'info', }
// });
// } else {
// ElMessage.error(msg || '系统出错');
// }
} }
return Promise.reject(error.message); return Promise.reject(error.message);
} }

11
src/api/table.ts
View File

@ -1,9 +1,14 @@
import request from '@/api/server/request'; import request from '@/api/server/request';
import type { BaseResult } from '@/types/request'; import type { BaseResult } from '@/types/request';
/* 获取所有数据表 */ /* 所有的数据库 */
export const getAllTableMetaData = () => { export const getDbList = () => {
return request<any, BaseResult<any>>({ url: '/table/getAllTableMetaData', method: 'get' }); return request<any, any>({ url: '/table/getDbList', method: 'GET' });
};
/* 数据库所有的表 */
export const getDbTables = (params: any) => {
return request<any, BaseResult<any>>({ url: '/table/getDbTables', method: 'get', params });
}; };
/* 获取表属性 */ /* 获取表属性 */

10
src/api/vms.ts
View File

@ -10,3 +10,13 @@ export const generator = (data: any) => {
export const getVmsPathList = () => { export const getVmsPathList = () => {
return request<any, BaseResult<any>>({ url: '/vms/getVmsPathList', method: 'get' }); return request<any, BaseResult<any>>({ url: '/vms/getVmsPathList', method: 'get' });
}; };
/* 打包成zip下载 */
export const downloadByZip = (data: any) => {
return request<any, any>({
url: '/vms/downloadByZip',
method: 'POST',
data,
responseType: 'blob',
});
};

6
src/store/index.ts
View File

@ -1,9 +1,11 @@
import { createPinia } from 'pinia'; import { createPinia } from 'pinia';
import piniaPluginPersistedState from 'pinia-plugin-persistedstate';
import type { App } from 'vue'; import type { App } from 'vue';
const store = createPinia(); const pinia = createPinia();
// 全局注册 store // 全局注册 store
export function setupStore(app: App<Element>) { export function setupStore(app: App<Element>) {
app.use(store); pinia.use(piniaPluginPersistedState);
app.use(pinia);
} }

36
src/store/modules/table.ts
View File

@ -1,17 +1,45 @@
import { defineStore } from 'pinia'; import { defineStore } from 'pinia';
import { getAllTableMetaData, getColumnInfo, getTableMetaData } from '@/api/table'; import { getColumnInfo, getDbList, getDbTables, getTableMetaData } from '@/api/table';
export const useTableStore = defineStore('tableStore', { export const useTableStore = defineStore('tableStore', {
state: () => ({ state: () => ({
// 数据库所有的表 // 数据库所有的表
tableList: [], tableList: [],
tableListLoading: false,
// 数据列表
dbList: [],
}), }),
getters: {}, getters: {},
actions: { actions: {
/* 获取所有数据表 */ /* 所有的数据库 */
async getAllTableMetaData() { async getDbList() {
const result = await getAllTableMetaData(); this.tableListLoading = true;
const result = await getDbList();
if (result.code !== 200) {
(window as any).$message.error(result.message);
this.tableListLoading = false;
return;
}
// 整理返回数据格式
const list = result.data.map((db: any) => ({
label: db.tableCat,
value: db.tableCat,
comment: db.comment,
}));
// 在开头添加
list.unshift({ label: '无', value: undefined, comment: '查询全部' });
this.dbList = list;
this.tableListLoading = false;
},
/* 数据库所有的表 */
async getDbTables(data: any) {
const result = await getDbTables(data);
if (result.code !== 200) { if (result.code !== 200) {
(window as any).$message.error(result.message); (window as any).$message.error(result.message);
} }

33
src/store/modules/vms.ts
View File

@ -3,12 +3,38 @@ import { defineStore } from 'pinia';
import { generator, getVmsPathList } from '@/api/vms'; import { generator, getVmsPathList } from '@/api/vms';
export const useVmsStore = defineStore('vmsStore', { export const useVmsStore = defineStore('vmsStore', {
// 开启持久化
// persist: true,
// persist: {
// paths: ['formValue', 'formOption'],
// },
state: () => ({ state: () => ({
generators: [], generators: [],
// 生成服务端内容 // 生成服务端内容
serverOptions: [], serverOptions: [],
// 生成前端内容 // 生成前端内容
webOptions: [], webOptions: [],
// 查询的表单
formValue: {
author: 'Bunny',
packageName: 'cn.bunny.services',
requestMapping: '/api',
className: '',
tableName: '',
simpleDateFormat: 'yyyy-MM-dd HH:mm:ss',
tablePrefixes: 't_,sys_,qrtz_,log_',
comment: '',
path: [],
},
// 表单选择内容
formOption: {
generatorServer: [],
generatorWeb: [],
},
}), }),
getters: {}, getters: {},
actions: { actions: {
@ -20,7 +46,7 @@ export const useVmsStore = defineStore('vmsStore', {
(window as any).$message.error(result.message); (window as any).$message.error(result.message);
} }
this.generators = result.data.map((i) => ({ ...i, path: i.path.replace('.vm', '') })); this.generators = result.data.map((i: any) => ({ ...i, path: i.path.replace('.vm', '') }));
(window as any).$message.success(`生成成功，共 ${this.generators.length} 数据`); (window as any).$message.success(`生成成功，共 ${this.generators.length} 数据`);
}, },
@ -36,5 +62,10 @@ export const useVmsStore = defineStore('vmsStore', {
this.webOptions = result.data.web; this.webOptions = result.data.web;
this.serverOptions = result.data.server; this.serverOptions = result.data.server;
}, },
/* 晴空已生成 */
clearGenerators() {
this.generators = [];
},
}, },
}); });

25
src/utils/file.ts
View File

@ -18,3 +18,28 @@ export function downloadTextAsFile(text: string, filename: string) {
URL.revokeObjectURL(a.href); URL.revokeObjectURL(a.href);
}); });
} }
export const downloadBlob = (response: any) => {
try {
// 从响应头获取文件名
const contentDisposition = response.headers['content-disposition'];
let fileName = 'download.zip';
if (contentDisposition) {
const fileNameMatch = contentDisposition.match(/filename="?(.+)"?/);
if (fileNameMatch && fileNameMatch[1]) {
fileName = fileNameMatch[1];
}
}
const url = window.URL.createObjectURL(new Blob([response.data]));
const link = document.createElement('a');
link.href = url;
link.setAttribute('download', fileName);
document.body.appendChild(link);
link.click();
link.remove();
window.URL.revokeObjectURL(url);
} catch (error) {
console.error(error);
}
};

1
src/views/content.vue
View File

@ -4,6 +4,7 @@
import { useMessage } from 'naive-ui'; import { useMessage } from 'naive-ui';
import { defineComponent } from 'vue'; import { defineComponent } from 'vue';
// naive ui 要求这样写的 https://www.naiveui.com/zh-CN/light/components/message
export default defineComponent({ export default defineComponent({
setup() { setup() {
window.$message = useMessage(); window.$message = useMessage();

3
src/views/generator-code/components/column-field/index.vue
View File

@ -24,7 +24,6 @@ onMounted(() => {
</script> </script>
<template> <template>
<!-- 当前表的列字段 -->
<n-data-table :bordered="true" :columns="columns" :data="datalist" /> <n-data-table :bordered="true" :columns="columns" :data="datalist" />
</template> </template>
<style scoped></style>

30
src/views/generator-code/components/generator/components/generator-form.vue
View File

@ -1,43 +1,52 @@
<script lang="ts" setup> <script lang="ts" setup>
import { NCheckbox, NCheckboxGroup, NFormItemGi, NGrid, NInput, NSpace } from 'naive-ui'; import { NCheckbox, NCheckboxGroup, NFormItemGi, NGrid, NInput, NSpace } from 'naive-ui';
import { storeToRefs } from 'pinia';
import { useVmsStore } from '@/store/modules/vms'; import { useVmsStore } from '@/store/modules/vms';
import SelectButtonGroup from '@/views/generator-code/components/generator/components/select-button-group.vue'; import SelectButtonGroup from '@/views/generator-code/components/generator/components/select-button-group.vue';
import { formOption, formValue } from '@/views/generator-code/components/generator/option';
const vmsStore = useVmsStore(); const vmsStore = useVmsStore();
const { formValue, formOption } = storeToRefs(vmsStore);
</script> </script>
<template> <template>
<!-- 需要提交的生成表单 -->
<n-grid :cols="24" :x-gap="24"> <n-grid :cols="24" :x-gap="24">
<n-form-item-gi :span="8" label="作者名称" path="author"> <n-form-item-gi :span="8" label="作者名称" path="author">
<n-input v-model:value="formValue.author" placeholder="输入姓名" /> <n-input v-model:value="formValue.author" placeholder="作者名称" />
</n-form-item-gi> </n-form-item-gi>
<n-form-item-gi :span="8" label="requestMapping名称" path="requestMapping"> <n-form-item-gi :span="8" label="requestMapping名称" path="requestMapping">
<n-input v-model:value="formValue.requestMapping" placeholder="输入年龄" /> <n-input v-model:value="formValue.requestMapping" placeholder="requestMapping名称" />
</n-form-item-gi> </n-form-item-gi>
<n-form-item-gi :span="8" label="表名称" path="tableName"> <n-form-item-gi :span="8" label="表名称" path="tableName">
<n-input v-model:value="formValue.tableName" placeholder="电话号码" /> <n-input v-model:value="formValue.tableName" placeholder="表名称" />
</n-form-item-gi> </n-form-item-gi>
</n-grid> </n-grid>
<n-grid :cols="24" :x-gap="24"> <n-grid :cols="24" :x-gap="24">
<n-form-item-gi :span="8" label="类名称" path="className"> <n-form-item-gi :span="8" label="类名称" path="className">
<n-input v-model:value="formValue.className" placeholder="电话号码" /> <n-input v-model:value="formValue.className" placeholder="类名称" />
</n-form-item-gi> </n-form-item-gi>
<n-form-item-gi :span="8" label="包名称" path="packageName"> <n-form-item-gi :span="8" label="包名称" path="packageName">
<n-input v-model:value="formValue.packageName" placeholder="电话号码" /> <n-input v-model:value="formValue.packageName" placeholder="包名称" />
</n-form-item-gi> </n-form-item-gi>
<n-form-item-gi :span="8" label="时间格式" path="simpleDateFormat"> <n-form-item-gi :span="8" label="时间格式" path="simpleDateFormat">
<n-input v-model:value="formValue.simpleDateFormat" placeholder="电话号码" /> <n-input v-model:value="formValue.simpleDateFormat" placeholder="时间格式" />
</n-form-item-gi> </n-form-item-gi>
</n-grid> </n-grid>
<n-grid :cols="24" :x-gap="24"> <n-grid :cols="24" :x-gap="24">
<n-form-item-gi :span="8" label="去除开头前缀" path="tablePrefixes"> <n-form-item-gi :span="8" label="去除开头前缀" path="tablePrefixes">
<n-input v-model:value="formValue.tablePrefixes" placeholder="电话号码" /> <n-input v-model:value="formValue.tablePrefixes" placeholder="去除开头前缀" />
</n-form-item-gi> </n-form-item-gi>
<n-form-item-gi :span="8" label="生成后端" path="generatorServer">
<n-form-item-gi :span="8" label="修改注释名称" path="comment">
<n-input v-model:value="formValue.comment" placeholder="修改注释名称" />
</n-form-item-gi>
</n-grid>
<n-grid :cols="24" :x-gap="24">
<n-form-item-gi :span="12" label="生成后端" path="generatorServer">
<n-checkbox-group v-model:value="formOption.generatorServer"> <n-checkbox-group v-model:value="formOption.generatorServer">
<n-space> <n-space>
<n-checkbox <n-checkbox
@ -57,7 +66,8 @@ const vmsStore = useVmsStore();
</n-space> </n-space>
</n-checkbox-group> </n-checkbox-group>
</n-form-item-gi> </n-form-item-gi>
<n-form-item-gi :span="8" label="生成前端" path="generatorWeb">
<n-form-item-gi :span="12" label="生成前端" path="generatorWeb">
<n-checkbox-group v-model:value="formOption.generatorWeb"> <n-checkbox-group v-model:value="formOption.generatorWeb">
<n-space> <n-space>
<n-checkbox <n-checkbox

2
src/views/generator-code/components/generator/components/generator-preview.vue
View File

@ -26,6 +26,7 @@ const download = (code: string, filename: string) => {
/> />
), ),
onPositiveClick: () => { onPositiveClick: () => {
// 下载文件
downloadTextAsFile(code, inputValue.value); downloadTextAsFile(code, inputValue.value);
}, },
onNegativeClick: () => { onNegativeClick: () => {
@ -36,6 +37,7 @@ const download = (code: string, filename: string) => {
</script> </script>
<template> <template>
<!-- 生成好之后下面的预览文件 -->
<n-collapse> <n-collapse>
<n-collapse-item <n-collapse-item
v-for="(item, index) in vmsStore.generators" v-for="(item, index) in vmsStore.generators"

58
src/views/generator-code/components/generator/hook.ts
View File

@ -1,61 +1,59 @@
import { reactive } from 'vue'; import { storeToRefs } from 'pinia';
import { useVmsStore } from '@/store/modules/vms'; import { useVmsStore } from '@/store/modules/vms';
const vmsStore = useVmsStore(); const vmsStore = useVmsStore();
const { formValue, formOption } = storeToRefs(vmsStore);
export const formOption = reactive({
generatorServer: [],
generatorWeb: [],
});
export const formValue = reactive({
author: 'Bunny',
packageName: 'cn.bunny.services',
requestMapping: '/api',
className: '',
tableName: '',
simpleDateFormat: 'yyyy-MM-dd HH:mm:ss',
tablePrefixes: 't_,sys_,qrtz_,log_',
path: [],
});
/* 初始化表单信息 */ /* 初始化表单信息 */
export const formValueInit = (tableName: any) => { export const formValueInit = (tableName: any) => {
formValue.tableName = tableName.toString(); formValue.value.tableName = tableName.toString();
// 替换类名称 // 替换类名称
let className: any = tableName as any; let className: any = tableName as any;
formValue.tablePrefixes.split(/[,，]/).forEach((item) => { formValue.value.tablePrefixes.split(/[,，]/).forEach((item) => {
className = className.replace(item, ''); className = className.replace(item, '');
}); });
formValue.className = className; formValue.value.className = className;
}; };
/* 全部选择 */ /* 全部选择 */
export const selectAll = () => { export const selectAll = () => {
formOption.generatorServer = vmsStore.serverOptions.map((option: any) => option.name); formOption.value.generatorServer = vmsStore.serverOptions.map((option: any) => option.name);
formOption.generatorWeb = vmsStore.webOptions.map((option: any) => option.name); formOption.value.generatorWeb = vmsStore.webOptions.map((option: any) => option.name);
}; };
/* 全部反选 */ /* 全部反选 */
export const selectAllInvert = () => { export const selectAllInvert = () => {
// 反选server // 反选server
const serverNames: string[] = vmsStore.serverOptions.map((item) => item['name']); const serverNames: string[] = vmsStore.serverOptions.map((item) => item['name']);
const generatorServer = formOption.generatorServer; const generatorServer = formOption.value.generatorServer;
formOption.generatorServer = serverNames.filter( formOption.value.generatorServer = serverNames.filter(
(name: string) => !generatorServer.includes(name) (name: string) => !generatorServer.includes(name)
); );
// 反选web // 反选web
const webNames: string[] = vmsStore.webOptions.map((item) => item['name']); const webNames: string[] = vmsStore.webOptions.map((item) => item['name']);
const generatorWeb = formOption.generatorWeb; const generatorWeb = formOption.value.generatorWeb;
formOption.generatorWeb = webNames.filter((name) => !generatorWeb.includes(name)); formOption.value.generatorWeb = webNames.filter((name) => !generatorWeb.includes(name));
}; };
/* 取消全部选择 */ /* 取消全部选择 */
export const selectCancelAll = () => { export const selectCancelAll = () => {
formOption.generatorServer = []; formOption.value.generatorServer = [];
formOption.generatorWeb = []; formOption.value.generatorWeb = [];
formValue.path = []; formValue.value.path = [];
};
/* 验证 formValue.path 是否为空 */
export const validateFormValue = () => {
// 选择要生成的模板
const web = formOption.value.generatorWeb;
const server = formOption.value.generatorServer;
// 整理好数据
formValue.value.path = [...server, ...web];
if (formValue.value.path.length <= 0) {
(window as any).$message.error(`选择要生成的模板`);
return;
}
}; };

116
src/views/generator-code/components/generator/index.vue
View File

@ -1,45 +1,13 @@
<template>
<n-form ref="formRef" :label-width="80" :model="formValue" :rules="rules">
<generator-form />
<n-form-item>
<n-grid class="justify-items-center" cols="3" x-gap="24">
<n-gi>
<n-button attr-type="button" type="success" @click="selectAll">全部选择</n-button>
<n-button attr-type="button" type="warning" @click="selectAllInvert">全部反选</n-button>
<n-button attr-type="button" type="error" @click="selectCancelAll">全选取消</n-button>
</n-gi>
<n-gi>
<n-button attr-type="button" type="success" @click="onSubmit">开始生成</n-button>
<n-button attr-type="button" type="error" @click="() => (vmsStore.generators = [])">
清空已生成
</n-button>
<n-button
:disabled="!(vmsStore.generators.length > 0)"
attr-type="button"
type="primary"
@click="downloadAll"
>
下载全部 {{ vmsStore.generators.length }}
</n-button>
</n-gi>
</n-grid>
</n-form-item>
</n-form>
<!-- 生成好的数据 -->
<generator-preview />
</template>
<script lang="tsx" setup> <script lang="tsx" setup>
import { NButton, NForm, NFormItem, NGi, NGrid, useMessage } from 'naive-ui'; import { NButton, NForm, NFormItem, NGi, NGrid, useMessage } from 'naive-ui';
import { storeToRefs } from 'pinia';
import { onMounted, ref } from 'vue'; import { onMounted, ref } from 'vue';
import { toRaw } from 'vue-demi'; import { computed } from 'vue-demi';
import { useRoute } from 'vue-router'; import { useRoute } from 'vue-router';
import { downloadByZip } from '@/api/vms';
import { useVmsStore } from '@/store/modules/vms'; import { useVmsStore } from '@/store/modules/vms';
import { downloadTextAsFile } from '@/utils/file'; import { downloadBlob, downloadTextAsFile } from '@/utils/file';
import GeneratorForm from '@/views/generator-code/components/generator/components/generator-form.vue'; import GeneratorForm from '@/views/generator-code/components/generator/components/generator-form.vue';
import GeneratorPreview from '@/views/generator-code/components/generator/components/generator-preview.vue'; import GeneratorPreview from '@/views/generator-code/components/generator/components/generator-preview.vue';
import { import {
@ -47,13 +15,20 @@ import {
selectAll, selectAll,
selectAllInvert, selectAllInvert,
selectCancelAll, selectCancelAll,
validateFormValue,
} from '@/views/generator-code/components/generator/hook'; } from '@/views/generator-code/components/generator/hook';
import { formOption, formValue, rules } from '@/views/generator-code/components/generator/option'; import { rules } from '@/views/generator-code/components/generator/option';
const route = useRoute(); const route = useRoute();
const vmsStore = useVmsStore(); const vmsStore = useVmsStore();
const { formValue, formOption } = storeToRefs(vmsStore);
const message = useMessage(); const message = useMessage();
const formRef = ref(); const formRef = ref();
const hasDownloadZip = computed(
() => !(formOption.value.generatorWeb.length > 0 || formOption.value.generatorServer.length > 0)
);
/* 提交表单 */ /* 提交表单 */
const onSubmit = (e: MouseEvent) => { const onSubmit = (e: MouseEvent) => {
@ -61,19 +36,10 @@ const onSubmit = (e: MouseEvent) => {
formRef.value?.validate(async (errors: any) => { formRef.value?.validate(async (errors: any) => {
if (!errors) { if (!errors) {
// 选择要生成的模板 validateFormValue();
const web = formOption.generatorWeb;
const server = formOption.generatorServer;
// 整理好数据
formValue.path = [...server, ...web];
if (formValue.path.length <= 0) {
message.error(`选择要生成的模板`);
return;
}
// 生成代码 // 生成代码
await vmsStore.generator(toRaw(formValue)); await vmsStore.generator(formValue.value);
} else { } else {
errors.forEach((error: any) => { errors.forEach((error: any) => {
error.forEach((err: any) => { error.forEach((err: any) => {
@ -94,6 +60,14 @@ const downloadAll = () => {
}); });
}; };
/* 下载zip文件 */
const downloadZipFile = async () => {
validateFormValue();
const result = await downloadByZip(formValue.value);
downloadBlob(result);
};
onMounted(() => { onMounted(() => {
// 初始化表名称 // 初始化表名称
const tableName: any = route.query.tableName; const tableName: any = route.query.tableName;
@ -102,3 +76,49 @@ onMounted(() => {
vmsStore.getVmsPathList(); vmsStore.getVmsPathList();
}); });
</script> </script>
<template>
<n-form ref="formRef" :label-width="80" :model="formValue" :rules="rules">
<generator-form />
<n-form-item>
<n-grid class="justify-items-center" cols="3" x-gap="24">
<n-gi>
<n-button attr-type="button" type="success" @click="selectAll">全部选择</n-button>
<n-button attr-type="button" type="warning" @click="selectAllInvert">全部反选</n-button>
<n-button attr-type="button" type="error" @click="selectCancelAll">全选取消</n-button>
</n-gi>
<n-gi>
<n-button attr-type="button" type="success" @click="onSubmit">开始生成</n-button>
<n-button attr-type="button" type="error" @click="vmsStore.clearGenerators()">
清空已生成
</n-button>
<n-button
:disabled="!(vmsStore.generators.length > 0)"
attr-type="button"
type="primary"
@click="downloadAll"
>
下载全部 {{ vmsStore.generators.length }}
</n-button>
</n-gi>
<n-gi class="w-full">
<n-button
:disabled="hasDownloadZip"
attr-type="button"
class="w-full"
type="success"
@click="downloadZipFile"
>
下载zip
</n-button>
</n-gi>
</n-grid>
</n-form-item>
</n-form>
<!-- 生成好的数据 -->
<generator-preview />
</template>

10
src/views/generator-code/components/generator/option.ts
View File

@ -1,10 +1,14 @@
import type { FormRules } from 'naive-ui'; import type { FormRules } from 'naive-ui';
import { storeToRefs } from 'pinia';
import { formOption, formValue } from '@/views/generator-code/components/generator/hook'; import { useVmsStore } from '@/store/modules/vms';
const vmsStore = useVmsStore();
const { formOption } = storeToRefs(vmsStore);
/* 验证生成前后端内容是否合法 */ /* 验证生成前后端内容是否合法 */
const validatorFormOption = () => { const validatorFormOption = () => {
return formOption.generatorServer.length > 0 || formOption.generatorWeb.length > 0; return formOption.value.generatorServer.length > 0 || formOption.value.generatorWeb.length > 0;
}; };
// 表单验证 // 表单验证
@ -40,5 +44,3 @@ export const rules: FormRules = {
}, },
], ],
}; };
export { formOption, formValue };

13
src/views/generator-code/index.vue
View File

@ -1,21 +1,29 @@
<script lang="ts" setup> <script lang="ts" setup>
import { NCard, NTabPane, NTabs } from 'naive-ui'; import { NCard, NTabPane, NTabs } from 'naive-ui';
import { storeToRefs } from 'pinia';
import { onMounted, reactive } from 'vue'; import { onMounted, reactive } from 'vue';
import { useRoute, useRouter } from 'vue-router'; import { useRoute, useRouter } from 'vue-router';
import { useTableStore } from '@/store/modules/table'; import { useTableStore } from '@/store/modules/table';
import { useVmsStore } from '@/store/modules/vms';
import Index from '@/views/generator-code/components/column-field/index.vue'; import Index from '@/views/generator-code/components/column-field/index.vue';
import GeneratorForm from '@/views/generator-code/components/generator/index.vue'; import GeneratorForm from '@/views/generator-code/components/generator/index.vue';
const router = useRouter(); const router = useRouter();
const route = useRoute(); const route = useRoute();
const tableStore = useTableStore(); const tableStore = useTableStore();
const vmsStore = useVmsStore();
const { formValue, formOption } = storeToRefs(vmsStore);
// 数据库表信息 // 数据库表信息
const tableInfo = reactive({ const tableInfo = reactive({
/* 表名称 */
tableName: '', tableName: '',
/* 注释内容 */
comment: '', comment: '',
/* 数据库内容 */
tableCat: '', tableCat: '',
/* 通常是 "TABLE" */
tableType: '', tableType: '',
}); });
@ -24,6 +32,9 @@ const getTableData = async () => {
const tableName: any = route.query.tableName; const tableName: any = route.query.tableName;
const tableMetaData = await tableStore.getTableMetaData(tableName); const tableMetaData = await tableStore.getTableMetaData(tableName);
Object.assign(tableInfo, tableMetaData); Object.assign(tableInfo, tableMetaData);
// 设置 生成表单注释值
formValue.value.comment = tableInfo.comment;
}; };
onMounted(() => { onMounted(() => {
@ -34,7 +45,7 @@ onMounted(() => {
<n-card> <n-card>
<template #header> <template #header>
<n-card title="数据库信息"> <n-card title="数据库信息">
<span class="color-blue" @click="router.push('/')">回到首页</span> <span class="color-blue cursor-pointer" @click="router.push('/')">回到首页</span>
<ul> <ul>
<li>表名：{{ route.query.tableName }}</li> <li>表名：{{ route.query.tableName }}</li>
<li>表注释：{{ tableInfo.comment }}</li> <li>表注释：{{ tableInfo.comment }}</li>

42
src/views/home/index.vue
View File

@ -1,14 +1,30 @@
<script lang="tsx" setup> <script lang="tsx" setup>
import { NCard, NDataTable, NTag } from 'naive-ui'; import type { SelectOption } from 'naive-ui';
import { onMounted } from 'vue'; import { NCard, NDataTable, NSelect, NTag, NTooltip } from 'naive-ui';
import type { VNode } from 'vue';
import { h, onMounted } from 'vue';
import { useTableStore } from '@/store/modules/table'; import { useTableStore } from '@/store/modules/table';
import { columns } from '@/views/home/columns'; import { columns } from '@/views/home/columns';
const tableStore = useTableStore(); const tableStore = useTableStore();
/* 数据库所有的表 */
const getDbTables = (dbName: string) => {
tableStore.getDbTables({ dbName: dbName ?? undefined });
};
/* 为select添加 提示 */
const renderOptions = ({ node, option }: { node: VNode; option: SelectOption }) => {
return h(NTooltip, null, {
trigger: () => node,
default: () => option.comment,
});
};
onMounted(() => { onMounted(() => {
tableStore.getAllTableMetaData(); getDbTables(undefined);
tableStore.getDbList();
}); });
</script> </script>
@ -26,9 +42,23 @@ onMounted(() => {
<n-tag type="info">{{ tableStore.tableList.length }}</n-tag> <n-tag type="info">{{ tableStore.tableList.length }}</n-tag>
张表 张表
</p> </p>
<!-- 选择数据库 -->
<n-select
:on-update-value="getDbTables"
:options="tableStore.dbList"
:render-option="renderOptions"
class="mt-2 w-[200px]"
clear-filter-after-select
clearable
placeholder="选择数据库"
/>
</n-card> </n-card>
<n-data-table :bordered="true" :columns="columns()" :data="tableStore.tableList" /> <n-data-table
:bordered="true"
:columns="columns()"
:data="tableStore.tableList"
:loading="tableStore.tableListLoading"
/>
</template> </template>
<style scoped></style>

1
tsconfig.json
View File

@ -35,6 +35,7 @@
] ]
}, },
"include": [ "include": [
"build/**",
"mock/*.ts", "mock/*.ts",
"src/**/*.ts", "src/**/*.ts",
"src/**/*.tsx", "src/**/*.tsx",