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

feat: 优化代码;新增响应式

This commit is contained in:
bunny 2025-04-20 22:26:17 +08:00
parent 903e411111
commit 72f39513ca
17 changed files with 298 additions and 265 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
src/api/table.ts
View File

@ -1,22 +1,27 @@
import request from '@/api/server/request';
import type { BaseResult } from '@/types/request';
/* 当前配置的数据库 */
export const getCurrentDatabaseName = () => {
return request<any, any>({ url: '/table/currentDatabaseName', method: 'GET' });
};
/* 所有的数据库 */
export const getDbList = () => {
return request<any, any>({ url: '/table/getDbList', method: 'GET' });
export const getDatabaseList = () => {
return request<any, any>({ url: '/table/databaseList', method: 'GET' });
};
/* 数据库所有的表 */
export const getDbTables = (params: any) => {
return request<any, BaseResult<any>>({ url: '/table/getDbTables', method: 'get', params });
export const getDatabaseTableList = (params: any) => {
return request<any, BaseResult<any>>({ url: '/table/databaseTableList', method: 'get', params });
};
/* 获取表属性 */
export const getTableMetaData = (params: object) => {
return request<any, BaseResult<any>>({ url: '/table/getTableMetaData', method: 'get', params });
return request<any, BaseResult<any>>({ url: '/table/tableMetaData', method: 'get', params });
};
/* 获取列属性 */
export const getColumnInfo = (params: object) => {
return request<any, BaseResult<any>>({ url: '/table/getColumnInfo', method: 'get', params });
export const getTableColumnInfo = (params: object) => {
return request<any, BaseResult<any>>({ url: '/table/tableColumnInfo', method: 'get', params });
};

4
src/api/vms.ts
View File

@ -7,8 +7,8 @@ export const generator = (data: any) => {
};
/* 获取vms文件路径 */
export const getVmsPathList = () => {
return request<any, BaseResult<any>>({ url: '/vms/getVmsPathList', method: 'get' });
export const getVmsResourcePathList = () => {
return request<any, BaseResult<any>>({ url: '/vms/vmsResourcePathList', method: 'get' });
};
/* 打包成zip下载 */

0
src/views/generator-code/components/generator/components/select-button-group.vue → src/components/select-button-group.vue
View File

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

@ -1,9 +1,16 @@
import { defineStore } from 'pinia';
import { getColumnInfo, getDbList, getDbTables, getTableMetaData } from '@/api/table';
import {
getDatabaseList,
getDatabaseTableList,
getTableColumnInfo,
getTableMetaData,
} from '@/api/table';
export const useTableStore = defineStore('tableStore', {
state: () => ({
// 当前的数据库名称
currentDatabaseName: undefined,
// 数据库所有的表
tableList: [],
tableListLoading: false,
@ -13,9 +20,9 @@ export const useTableStore = defineStore('tableStore', {
getters: {},
actions: {
/* 所有的数据库 */
async getDbList() {
async getDatabaseList() {
this.tableListLoading = true;
const result = await getDbList();
const result = await getDatabaseList();
if (result.code !== 200) {
(window as any).$message.error(result.message);
@ -38,8 +45,10 @@ export const useTableStore = defineStore('tableStore', {
},
/* 数据库所有的表 */
async getDbTables(data: any) {
const result = await getDbTables(data);
async getDatabaseTableList() {
const data = { dbName: this.currentDatabaseName };
const result = await getDatabaseTableList(data);
if (result.code !== 200) {
(window as any).$message.error(result.message);
}
@ -59,8 +68,8 @@ export const useTableStore = defineStore('tableStore', {
},
/* 获取表属性 */
async getColumnInfo(tableName: string) {
const result = await getColumnInfo({ tableName });
async getTableColumnInfo(tableName: string) {
const result = await getTableColumnInfo({ tableName });
if (result.code !== 200) {
(window as any).$message.error(result.message);
return {};

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

@ -1,6 +1,6 @@
import { defineStore } from 'pinia';
import { generator, getVmsPathList } from '@/api/vms';
import { generator, getVmsResourcePathList } from '@/api/vms';
export const useVmsStore = defineStore('vmsStore', {
// 开启持久化
@ -51,8 +51,8 @@ export const useVmsStore = defineStore('vmsStore', {
},
/* 获取vms文件路径 */
async getVmsPathList() {
const result = await getVmsPathList();
async getVmsResourcePathList() {
const result = await getVmsResourcePathList();
// 需要确保已经在 setup 中执行了 window.$message = message
if (result.code !== 200) {
(window as any).$message.error(result.message);
@ -62,10 +62,5 @@ export const useVmsStore = defineStore('vmsStore', {
this.webOptions = result.data.web;
this.serverOptions = result.data.server;
},
/* 晴空已生成 */
clearGenerators() {
this.generators = [];
},
},
});

0
src/views/generator-code/components/column-field/columns.tsx → src/views/generator-code/column-field/columns.tsx
View File

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

@ -4,7 +4,7 @@ import { onMounted, ref } from 'vue';
import { useRoute } from 'vue-router';
import { useTableStore } from '@/store/modules/table';
import { columns } from '@/views/generator-code/components/column-field/columns';
import { columns } from '@/views/generator-code/column-field/columns';
const route = useRoute();
const tableStore = useTableStore();
@ -15,7 +15,7 @@ const datalist = ref([]);
/* 数据库列信息 */
const getColumnInfo = async () => {
const tableName: any = route.query.tableName;
datalist.value = await tableStore.getColumnInfo(tableName);
datalist.value = await tableStore.getTableColumnInfo(tableName);
};
onMounted(() => {

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

@ -1,91 +0,0 @@
<script lang="ts" setup>
import { NCheckbox, NCheckboxGroup, NFormItemGi, NGrid, NInput, NSpace } from 'naive-ui';
import { storeToRefs } from 'pinia';
import { useVmsStore } from '@/store/modules/vms';
import SelectButtonGroup from '@/views/generator-code/components/generator/components/select-button-group.vue';
const vmsStore = useVmsStore();
const { formValue, formOption } = storeToRefs(vmsStore);
</script>
<template>
<!-- 需要提交的生成表单 -->
<n-grid :cols="24" :x-gap="24">
<n-form-item-gi :span="8" label="作者名称" path="author">
<n-input v-model:value="formValue.author" placeholder="作者名称" />
</n-form-item-gi>
<n-form-item-gi :span="8" label="requestMapping名称" path="requestMapping">
<n-input v-model:value="formValue.requestMapping" placeholder="requestMapping名称" />
</n-form-item-gi>
<n-form-item-gi :span="8" label="表名称" path="tableName">
<n-input v-model:value="formValue.tableName" placeholder="表名称" />
</n-form-item-gi>
</n-grid>
<n-grid :cols="24" :x-gap="24">
<n-form-item-gi :span="8" label="类名称" path="className">
<n-input v-model:value="formValue.className" placeholder="类名称" />
</n-form-item-gi>
<n-form-item-gi :span="8" label="包名称" path="packageName">
<n-input v-model:value="formValue.packageName" placeholder="包名称" />
</n-form-item-gi>
<n-form-item-gi :span="8" label="时间格式" path="simpleDateFormat">
<n-input v-model:value="formValue.simpleDateFormat" placeholder="时间格式" />
</n-form-item-gi>
</n-grid>
<n-grid :cols="24" :x-gap="24">
<n-form-item-gi :span="8" label="去除开头前缀" path="tablePrefixes">
<n-input v-model:value="formValue.tablePrefixes" placeholder="去除开头前缀" />
</n-form-item-gi>
<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-space>
<n-checkbox
v-for="(item, index) in vmsStore.serverOptions"
:key="index"
:value="item.name"
>
{{ item.label }}
</n-checkbox>
<!-- 选择按钮 -->
<select-button-group
v-model:selected="formOption.generatorServer"
:data="vmsStore.serverOptions"
id-key="name"
/>
</n-space>
</n-checkbox-group>
</n-form-item-gi>
<n-form-item-gi :span="12" label="生成前端" path="generatorWeb">
<n-checkbox-group v-model:value="formOption.generatorWeb">
<n-space>
<n-checkbox
v-for="(item, index) in vmsStore.webOptions"
:key="index"
v-model:value="item.name"
>
{{ item.label }}
</n-checkbox>
<!-- 选择按钮 -->
<select-button-group
v-model:selected="formOption.generatorWeb"
:data="vmsStore.webOptions"
id-key="name"
/>
</n-space>
</n-checkbox-group>
</n-form-item-gi>
</n-grid>
</template>

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

@ -1,124 +0,0 @@
<script lang="tsx" setup>
import { NButton, NForm, NFormItem, NGi, NGrid, useMessage } from 'naive-ui';
import { storeToRefs } from 'pinia';
import { onMounted, ref } from 'vue';
import { computed } from 'vue-demi';
import { useRoute } from 'vue-router';
import { downloadByZip } from '@/api/vms';
import { useVmsStore } from '@/store/modules/vms';
import { downloadBlob, downloadTextAsFile } from '@/utils/file';
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 {
formValueInit,
selectAll,
selectAllInvert,
selectCancelAll,
validateFormValue,
} from '@/views/generator-code/components/generator/hook';
import { rules } from '@/views/generator-code/components/generator/option';
const route = useRoute();
const vmsStore = useVmsStore();
const { formValue, formOption } = storeToRefs(vmsStore);
const message = useMessage();
const formRef = ref();
const hasDownloadZip = computed(
() => !(formOption.value.generatorWeb.length > 0 || formOption.value.generatorServer.length > 0)
);
/* 提交表单 */
const onSubmit = (e: MouseEvent) => {
e.preventDefault();
formRef.value?.validate(async (errors: any) => {
if (!errors) {
validateFormValue();
// 生成代码
await vmsStore.generator(formValue.value);
} else {
errors.forEach((error: any) => {
error.forEach((err: any) => {
message.error(`${err.message}->${err.field}`);
});
});
}
});
};
/* 下载全部 */
const downloadAll = () => {
vmsStore.generators.forEach((vms) => {
const code = vms.code;
const path = vms.path.split('/')[1];
downloadTextAsFile(code, path);
});
};
/* 下载zip文件 */
const downloadZipFile = async () => {
validateFormValue();
const result = await downloadByZip(formValue.value);
downloadBlob(result);
};
onMounted(() => {
// 初始化表名称
const tableName: any = route.query.tableName;
formValueInit(tableName);
vmsStore.getVmsPathList();
});
</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>

211
src/views/generator-code/generator/components/generator-form.vue Normal file
View File

@ -0,0 +1,211 @@
<script lang="ts" setup>
import {
NButton,
NCheckbox,
NCheckboxGroup,
NForm,
NFormItemGi,
NGrid,
NGridItem,
NInput,
NSpace,
useMessage,
} from 'naive-ui';
import { storeToRefs } from 'pinia';
import { onMounted, ref } from 'vue';
import { computed } from 'vue-demi';
import { useRoute } from 'vue-router';
import { downloadByZip } from '@/api/vms';
import SelectButtonGroup from '@/components/select-button-group.vue';
import { useVmsStore } from '@/store/modules/vms';
import { downloadBlob, downloadTextAsFile } from '@/utils/file';
import {
formValueInit,
selectAll,
selectAllInvert,
selectCancelAll,
validateFormValue,
} from '@/views/generator-code/generator/components/hook';
import { rules } from '@/views/generator-code/generator/components/option';
const route = useRoute();
const vmsStore = useVmsStore();
const { formValue, formOption } = storeToRefs(vmsStore);
const message = useMessage();
const formRef = ref();
const hasDownloadZip = computed(
() => !(formOption.value.generatorWeb.length > 0 || formOption.value.generatorServer.length > 0)
);
/* 提交表单 */
const onSubmit = (e: MouseEvent) => {
e.preventDefault();
formRef.value?.validate(async (errors: any) => {
if (!errors) {
validateFormValue();
// 生成代码
await vmsStore.generator(formValue.value);
} else {
errors.forEach((error: any) => {
error.forEach((err: any) => {
message.error(`${err.message}->${err.field}`);
});
});
}
});
};
/* 清空已经生成的代码 */
const clearGeneratorCode = () => {
vmsStore.generators = [];
};
/* 下载全部 */
const downloadAll = () => {
vmsStore.generators.forEach((vms) => {
const code = vms.code;
const path = vms.path.split('/')[1];
downloadTextAsFile(code, path);
});
};
/* 下载zip文件 */
const downloadZipFile = async () => {
validateFormValue();
const result = await downloadByZip(formValue.value);
downloadBlob(result);
};
onMounted(() => {
// 初始化表名称
const tableName: any = route.query.tableName;
formValueInit(tableName);
vmsStore.getVmsResourcePathList();
});
</script>
<template>
<n-form ref="formRef" :label-width="80" :model="formValue" :rules="rules">
<!-- 需要提交的生成表单 -->
<n-grid :cols="24" :x-gap="5" item-responsive responsive="screen">
<n-form-item-gi label="作者名称" path="author" span="12 m:8 l:6">
<n-input v-model:value="formValue.author" placeholder="作者名称" />
</n-form-item-gi>
<n-form-item-gi label="requestMapping名称" path="requestMapping" span="12 m:8 l:6">
<n-input v-model:value="formValue.requestMapping" placeholder="requestMapping名称" />
</n-form-item-gi>
<n-form-item-gi label="表名称" path="tableName" span="12 m:8 l:6">
<n-input v-model:value="formValue.tableName" placeholder="表名称" />
</n-form-item-gi>
<n-form-item-gi label="类名称" path="className" span="12 m:8 l:6">
<n-input v-model:value="formValue.className" placeholder="类名称" />
</n-form-item-gi>
<n-form-item-gi label="包名称" path="packageName" span="12 m:8 l:6">
<n-input v-model:value="formValue.packageName" placeholder="包名称" />
</n-form-item-gi>
<n-form-item-gi label="时间格式" path="simpleDateFormat" span="12 m:8 l:6">
<n-input v-model:value="formValue.simpleDateFormat" placeholder="时间格式" />
</n-form-item-gi>
<n-form-item-gi label="去除开头前缀" path="tablePrefixes" span="12 m:8 l:6">
<n-input v-model:value="formValue.tablePrefixes" placeholder="去除开头前缀" />
</n-form-item-gi>
<n-form-item-gi label="修改注释名称" path="comment" span="12 m:8 l:6">
<n-input v-model:value="formValue.comment" placeholder="修改注释名称" />
</n-form-item-gi>
</n-grid>
<!-- 需要生成的模板 -->
<n-grid :cols="24" :x-gap="5" item-responsive responsive="screen">
<n-form-item-gi label="生成后端" path="generatorServer" span="24 m:24 l:12">
<n-checkbox-group v-model:value="formOption.generatorServer">
<n-space>
<n-checkbox
v-for="(item, index) in vmsStore.serverOptions"
:key="index"
:value="item.name"
>
{{ item.label }}
</n-checkbox>
<!-- 选择按钮 -->
<select-button-group
v-model:selected="formOption.generatorServer"
:data="vmsStore.serverOptions"
id-key="name"
/>
</n-space>
</n-checkbox-group>
</n-form-item-gi>
<n-form-item-gi label="生成前端" path="generatorWeb" span="24 m:24 l:12">
<n-checkbox-group v-model:value="formOption.generatorWeb">
<n-space>
<n-checkbox
v-for="(item, index) in vmsStore.webOptions"
:key="index"
v-model:value="item.name"
>
{{ item.label }}
</n-checkbox>
<!-- 选择按钮 -->
<select-button-group
v-model:selected="formOption.generatorWeb"
:data="vmsStore.webOptions"
id-key="name"
/>
</n-space>
</n-checkbox-group>
</n-form-item-gi>
</n-grid>
<!-- 操作选项按钮 -->
<n-grid cols="24" item-responsive responsive="screen">
<n-grid-item class="flex-center mt-2" span="24 m:12 l:8">
<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-grid-item>
<n-grid-item class="flex-center mt-2" span="24 m:12 l:8">
<n-button attr-type="button" type="success" @click="onSubmit">开始生成</n-button>
<n-button attr-type="button" type="error" @click="clearGeneratorCode">清空已生成</n-button>
<n-button
:disabled="!(vmsStore.generators.length > 0)"
attr-type="button"
type="primary"
@click="downloadAll"
>
下载全部 {{ vmsStore.generators.length }}
</n-button>
</n-grid-item>
<n-grid-item class="flex-center mt-2" span="24 m:12 l:8">
<n-button
:disabled="hasDownloadZip"
attr-type="button"
class="w-full"
type="success"
@click="downloadZipFile"
>
下载zip
</n-button>
</n-grid-item>
</n-grid>
</n-form>
</template>

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

@ -10,8 +10,10 @@ const message = useMessage();
const vmsStore = useVmsStore();
const download = (code: string, filename: string) => {
filename = filename.split('/')[1];
const inputValue = ref(filename);
const filenameSplit = filename.split('/');
// 拿到最后一个元素
const inputValue = ref(filenameSplit.at(-1));
dialog.info({
title: '修改文件名',
@ -37,8 +39,7 @@ const download = (code: string, filename: string) => {
</script>
<template>
<!-- 生成好之后下面的预览文件 -->
<n-collapse>
<n-collapse class="mt-4 p-2 border">
<n-collapse-item
v-for="(item, index) in vmsStore.generators"
:key="index"

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

@ -4,6 +4,7 @@ import { useVmsStore } from '@/store/modules/vms';
const vmsStore = useVmsStore();
const { formValue, formOption } = storeToRefs(vmsStore);
/* 初始化表单信息 */
export const formValueInit = (tableName: any) => {
formValue.value.tableName = tableName.toString();

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

11
src/views/generator-code/generator/index.vue Normal file
View File

@ -0,0 +1,11 @@
<script lang="tsx" setup>
import GeneratorForm from '@/views/generator-code/generator/components/generator-form.vue';
import GeneratorPreview from '@/views/generator-code/generator/components/generator-preview.vue';
</script>
<template>
<generator-form />
<!-- 生成好的数据 -->
<generator-preview />
</template>

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

@ -6,8 +6,8 @@ import { useRoute, useRouter } from 'vue-router';
import { useTableStore } from '@/store/modules/table';
import { useVmsStore } from '@/store/modules/vms';
import Index from '@/views/generator-code/components/column-field/index.vue';
import GeneratorForm from '@/views/generator-code/components/generator/index.vue';
import Index from '@/views/generator-code/column-field/index.vue';
import GeneratorForm from '@/views/generator-code/generator/index.vue';
const router = useRouter();
const route = useRoute();

14
src/views/home/columns.tsx
View File

@ -1,8 +1,12 @@
import { NTag } from 'naive-ui';
import type { SelectOption } from 'naive-ui';
import { NTag, NTooltip } from 'naive-ui';
import type { TableColumns } from 'naive-ui/es/data-table/src/interface';
import type { VNode } from 'vue';
import { h } from 'vue';
import type { JSX } from 'vue/jsx-runtime';
import { useRouter } from 'vue-router';
/* 表格列字段 */
export function columns(): TableColumns<any> {
const router = useRouter();
@ -66,3 +70,11 @@ export function columns(): TableColumns<any> {
},
];
}
/* 为select添加 提示 */
export const renderOptions = ({ node, option }: { node: VNode; option: SelectOption }) => {
return h(NTooltip, null, {
trigger: () => node,
default: () => option.comment,
});
};

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

@ -1,30 +1,32 @@
<script lang="tsx" setup>
import type { SelectOption } from 'naive-ui';
import { NCard, NDataTable, NSelect, NTag, NTooltip } from 'naive-ui';
import type { VNode } from 'vue';
import { h, onMounted } from 'vue';
import { NCard, NDataTable, NSelect, NTag } from 'naive-ui';
import { onMounted } from 'vue';
import { getCurrentDatabaseName } from '@/api/table';
import { useTableStore } from '@/store/modules/table';
import { columns } from '@/views/home/columns';
import { columns, renderOptions } from '@/views/home/columns';
const tableStore = useTableStore();
/* 数据库所有的表 */
const getDbTables = (dbName: string) => {
tableStore.getDbTables({ dbName: dbName ?? undefined });
/* 更新数据库名称 */
const onUpdateCurrentDatabaseName = (databaseName: string) => {
tableStore.currentDatabaseName = databaseName ?? undefined;
tableStore.getDatabaseTableList();
};
/* 为select添加 提示 */
const renderOptions = ({ node, option }: { node: VNode; option: SelectOption }) => {
return h(NTooltip, null, {
trigger: () => node,
default: () => option.comment,
});
/* 数据库所有的表 */
const initDatabaseTables = async () => {
const result = await getCurrentDatabaseName();
if (result.code === 200) {
tableStore.currentDatabaseName = result.data;
}
await tableStore.getDatabaseTableList();
};
onMounted(() => {
getDbTables(undefined);
tableStore.getDbList();
initDatabaseTables();
tableStore.getDatabaseList();
});
</script>
@ -45,9 +47,10 @@ onMounted(() => {
<!-- 选择数据库 -->
<n-select
:on-update-value="getDbTables"
:on-update-value="onUpdateCurrentDatabaseName"
:options="tableStore.dbList"
:render-option="renderOptions"
:value="tableStore.currentDatabaseName"
class="mt-2 w-[200px]"
clear-filter-after-select
clearable