tongtong/vue3-element-admin
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: 🐛 代码生成问题修复和优化

Browse Source
This commit is contained in:
ray
2024-08-24 23:45:08 +08:00
parent 1dcb8929b6
commit aac873bfb9
3 changed files with 143 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
src/api/generator.ts
View File

@@ -50,17 +50,21 @@ class GeneratorAPI {
* @param url * @param url
* @param fileName * @param fileName
*/ */
static download(tableName: string, fileName?: string) { static download(tableName: string) {
return request({ return request({
url: `${GENERATOR_BASE_URL}/${tableName}/download`, url: `${GENERATOR_BASE_URL}/${tableName}/download`,
method: "get", method: "get",
responseType: "blob", responseType: "blob",
}).then((res) => { }).then((response) => {
const blob = new Blob([res.data], { type: "application/zip" }); const fileName = decodeURI(
response.headers["content-disposition"].split(";")[1].split("=")[1]
);
const blob = new Blob([response.data], { type: "application/zip" });
const a = document.createElement("a"); const a = document.createElement("a");
const url = window.URL.createObjectURL(blob); const url = window.URL.createObjectURL(blob);
a.href = url; a.href = url;
a.download = fileName || "下载文件.zip"; a.download = fileName;
a.click(); a.click();
window.URL.revokeObjectURL(url); window.URL.revokeObjectURL(url);
}); });
@@ -129,6 +133,11 @@ export interface GenConfigForm {
/** 上级菜单 */ /** 上级菜单 */
parentMenuId?: number; parentMenuId?: number;
/** 后端应用名 */
backendAppName?: string;
/** 前端应用名 */
frontendAppName?: string;
/** 字段配置列表 */ /** 字段配置列表 */
fieldConfigs?: FieldConfig[]; fieldConfigs?: FieldConfig[];
} }

4
src/enums/FormTypeEnum.ts
View File

@@ -9,6 +9,6 @@ export const FormTypeEnum: Record<string, OptionType> = {
INPUT_NUMBER: { value: 5, label: "数字输入框" }, INPUT_NUMBER: { value: 5, label: "数字输入框" },
SWITCH: { value: 6, label: "开关" }, SWITCH: { value: 6, label: "开关" },
TEXT_AREA: { value: 7, label: "文本域" }, TEXT_AREA: { value: 7, label: "文本域" },
DATE_TIME: { value: 8, label: "日期时间框" }, DATE: { value: 8, label: "日期框" },
DATE: { value: 9, label: "日期框" }, DATE_TIME: { value: 9, label: "日期时间框" },
}; };

170
src/views/generator/index.vue
View File

@@ -93,16 +93,23 @@
</el-steps> </el-steps>
<div class="mt-5"> <div class="mt-5">
<el-form v-show="active == 0" :model="formData" :label-width="100"> <el-form
v-show="active == 0"
:model="genConfigFormData"
:label-width="100"
>
<el-row> <el-row>
<el-col :span="12"> <el-col :span="12">
<el-form-item label="表名"> <el-form-item label="表名">
<el-input v-model="formData.tableName" readonly /> <el-input v-model="genConfigFormData.tableName" readonly />
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="12"> <el-col :span="12">
<el-form-item label="业务名"> <el-form-item label="业务名">
<el-input v-model="formData.businessName" placeholder="用户" /> <el-input
v-model="genConfigFormData.businessName"
placeholder="用户"
/>
</el-form-item> </el-form-item>
</el-col> </el-col>
</el-row> </el-row>
@@ -110,13 +117,16 @@
<el-row> <el-row>
<el-col :span="12"> <el-col :span="12">
<el-form-item label="模块名"> <el-form-item label="模块名">
<el-input v-model="formData.moduleName" placeholder="system" /> <el-input
v-model="genConfigFormData.moduleName"
placeholder="system"
/>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="12"> <el-col :span="12">
<el-form-item label="包名"> <el-form-item label="包名">
<el-input <el-input
v-model="formData.packageName" v-model="genConfigFormData.packageName"
placeholder="com.youlai.boot" placeholder="com.youlai.boot"
/> />
</el-form-item> </el-form-item>
@@ -126,12 +136,18 @@
<el-row> <el-row>
<el-col :span="12"> <el-col :span="12">
<el-form-item label="实体名"> <el-form-item label="实体名">
<el-input v-model="formData.entityName" placeholder="User" /> <el-input
v-model="genConfigFormData.entityName"
placeholder="User"
/>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="12"> <el-col :span="12">
<el-form-item label="作者"> <el-form-item label="作者">
<el-input v-model="formData.author" placeholder="youlai" /> <el-input
v-model="genConfigFormData.author"
placeholder="youlai"
/>
</el-form-item> </el-form-item>
</el-col> </el-col>
</el-row> </el-row>
@@ -140,7 +156,7 @@
<el-col :span="12"> <el-col :span="12">
<el-form-item label="上级菜单"> <el-form-item label="上级菜单">
<el-tree-select <el-tree-select
v-model="formData.parentMenuId" v-model="genConfigFormData.parentMenuId"
placeholder="选择上级菜单" placeholder="选择上级菜单"
:data="menuOptions" :data="menuOptions"
check-strictly check-strictly
@@ -159,47 +175,57 @@
row-key="id" row-key="id"
:element-loading-text="loadingText" :element-loading-text="loadingText"
highlight--currentrow highlight--currentrow
:data="formData.fieldConfigs" :data="genConfigFormData.fieldConfigs"
> >
<el-table-column width="55" align="center"> <el-table-column width="55" align="center">
<i-ep-Rank class="cursor-move sortable-handle" /> <i-ep-Rank class="cursor-move sortable-handle" />
</el-table-column> </el-table-column>
<el-table-column label="字段列名" width="150"> <el-table-column label="列名" width="110">
<template #default="scope"> <template #default="scope">
{{ scope.row.columnName }} {{ scope.row.columnName }}
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="字段类型" width="80"> <el-table-column label="列类型" width="80">
<template #default="scope"> <template #default="scope">
{{ scope.row.columnType }} {{ scope.row.columnType }}
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="Java属性" width="120"> <el-table-column label="字段名" width="120">
<template #default="scope"> <template #default="scope">
<el-input v-model="scope.row.fieldName" /> <el-input v-model="scope.row.fieldName" />
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="Java类型" width="120"> <el-table-column label="字段类型" width="80">
<template #default="scope"> <template #default="scope">
<el-input v-model="scope.row.fieldType" /> {{ scope.row.fieldType }}
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="字段描述" min-width="120"> <el-table-column label="字段注释" min-width="100">
<template #default="scope"> <template #default="scope">
<el-input v-model="scope.row.fieldComment" /> <el-input v-model="scope.row.fieldComment" />
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="最大长度" width="100"> <el-table-column label="最大长度" width="80">
<template #default="scope"> <template #default="scope">
<el-input v-model="scope.row.maxLength" /> <el-input v-model="scope.row.maxLength" />
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="查询" width="70"> <el-table-column width="70">
<template #header>
<div class="flex-y-center">
<span>查询</span>
<el-checkbox
class="ml-1"
v-model="isCheckAllQuery"
@change="toggleCheckAll('isShowInQuery', isCheckAllQuery)"
/>
</div>
</template>
<template #default="scope"> <template #default="scope">
<el-checkbox <el-checkbox
v-model="scope.row.isShowInQuery" v-model="scope.row.isShowInQuery"
@@ -209,7 +235,18 @@
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="列表" width="70"> <el-table-column width="70">
<template #header>
<div class="flex-y-center">
<span>列表</span>
<el-checkbox
class="ml-1"
v-model="isCheckAllList"
@change="toggleCheckAll('isShowInList', isCheckAllList)"
/>
</div>
</template>
<template #default="scope"> <template #default="scope">
<el-checkbox <el-checkbox
v-model="scope.row.isShowInList" v-model="scope.row.isShowInList"
@@ -219,7 +256,18 @@
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="表单" width="70"> <el-table-column width="70">
<template #header>
<div class="flex-y-center">
<span>表单</span>
<el-checkbox
class="ml-1"
v-model="isCheckAllForm"
@change="toggleCheckAll('isShowInForm', isCheckAllForm)"
/>
</div>
</template>
<template #default="scope"> <template #default="scope">
<el-checkbox <el-checkbox
v-model="scope.row.isShowInForm" v-model="scope.row.isShowInForm"
@@ -241,7 +289,7 @@
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="查询方式" min-width="100"> <el-table-column label="查询方式" min-width="120">
<template #default="scope"> <template #default="scope">
<el-select <el-select
v-model="scope.row.queryType" v-model="scope.row.queryType"
@@ -259,12 +307,15 @@
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="表单类型" min-width="110"> <el-table-column label="表单类型" min-width="120">
<template #default="scope"> <template #default="scope">
<el-select <el-select
v-model="scope.row.formType" v-model="scope.row.formType"
placeholder="请选择" placeholder="请选择"
v-if="scope.row.isShowInForm === 1" v-if="
scope.row.isShowInQuery === 1 ||
scope.row.isShowInForm === 1
"
> >
<el-option <el-option
v-for="(item, key) in formTypeOptions" v-for="(item, key) in formTypeOptions"
@@ -386,7 +437,6 @@ import MenuAPI from "@/api/menu";
const queryFormRef = ref(ElForm); const queryFormRef = ref(ElForm);
const queryParams = reactive<TablePageQuery>({ const queryParams = reactive<TablePageQuery>({
keywords: undefined,
pageNum: 1, pageNum: 1,
pageSize: 10, pageSize: 10,
}); });
@@ -401,7 +451,7 @@ const formTypeOptions: Record<string, OptionType> = FormTypeEnum;
const queryTypeOptions: Record<string, OptionType> = QueryTypeEnum; const queryTypeOptions: Record<string, OptionType> = QueryTypeEnum;
const dictOptions = ref<OptionType[]>(); const dictOptions = ref<OptionType[]>();
const menuOptions = ref<OptionType[]>([]); const menuOptions = ref<OptionType[]>([]);
const formData = ref<GenConfigForm>({ const genConfigFormData = ref<GenConfigForm>({
fieldConfigs: [], fieldConfigs: [],
}); });
@@ -449,12 +499,13 @@ watch(copied, () => {
}); });
watch( watch(
() => formData.value.fieldConfigs as FieldConfig[], () => genConfigFormData.value.fieldConfigs as FieldConfig[],
(newVal: FieldConfig[]) => { (newVal: FieldConfig[]) => {
newVal.forEach((fieldConfig) => { newVal.forEach((fieldConfig) => {
if ( if (
fieldConfig.formType === FormTypeEnum.DATE_TIME.value || fieldConfig.fieldType &&
fieldConfig.formType === FormTypeEnum.DATE.value fieldConfig.fieldType.includes("Date") &&
fieldConfig.isShowInQuery === 1
) { ) {
fieldConfig.queryType = QueryTypeEnum.BETWEEN.value as number; fieldConfig.queryType = QueryTypeEnum.BETWEEN.value as number;
} }
@@ -487,29 +538,29 @@ const initSort = () => {
const setNodeSort = (oldIndex: number, newIndex: number) => { const setNodeSort = (oldIndex: number, newIndex: number) => {
// 使用arr复制一份表格数组数据 // 使用arr复制一份表格数组数据
let arr = Object.assign([], formData.value.fieldConfigs); let arr = Object.assign([], genConfigFormData.value.fieldConfigs);
const currentRow = arr.splice(oldIndex, 1)[0]; const currentRow = arr.splice(oldIndex, 1)[0];
arr.splice(newIndex, 0, currentRow); arr.splice(newIndex, 0, currentRow);
arr.forEach((item: FieldConfig, index) => { arr.forEach((item: FieldConfig, index) => {
item.fieldSort = index + 1; item.fieldSort = index + 1;
}); });
formData.value.fieldConfigs = []; genConfigFormData.value.fieldConfigs = [];
nextTick(async () => { nextTick(async () => {
formData.value.fieldConfigs = arr; genConfigFormData.value.fieldConfigs = arr;
}); });
}; };
function handlePrevClick() { function handlePrevClick() {
if (active.value === 2) { if (active.value === 2) {
//这里需要重新获取一次数据，如果第一次生成代码后，再次点击上一步，数据不重新获取，再次点击下一步，会再次插入数据，导致索引重复报错 //这里需要重新获取一次数据，如果第一次生成代码后，再次点击上一步，数据不重新获取，再次点击下一步，会再次插入数据，导致索引重复报错
formData.value = { genConfigFormData.value = {
fieldConfigs: [], fieldConfigs: [],
}; };
nextTick(() => { nextTick(() => {
loading.value = true; loading.value = true;
GeneratorAPI.getGenConfig(currentTableName.value) GeneratorAPI.getGenConfig(currentTableName.value)
.then((data) => { .then((data) => {
formData.value = data; genConfigFormData.value = data;
}) })
.finally(() => { .finally(() => {
loading.value = false; loading.value = false;
@@ -526,14 +577,14 @@ function handleNextClick() {
} }
if (active.value === 1) { if (active.value === 1) {
// 保存生成配置 // 保存生成配置
const tableName = formData.value.tableName; const tableName = genConfigFormData.value.tableName;
if (!tableName) { if (!tableName) {
ElMessage.error("表名不能为空"); ElMessage.error("表名不能为空");
return; return;
} }
loading.value = true; loading.value = true;
loadingText.value = "代码生成中，请稍后..."; loadingText.value = "代码生成中，请稍后...";
GeneratorAPI.saveGenConfig(tableName, formData.value) GeneratorAPI.saveGenConfig(tableName, genConfigFormData.value)
.then(() => { .then(() => {
handlePreview(tableName); handlePreview(tableName);
}) })
@@ -549,12 +600,12 @@ function handleNextClick() {
active.value = 2; active.value = 2;
} }
if (active.value === 2) { if (active.value === 2) {
const tableName = formData.value.tableName; const tableName = genConfigFormData.value.tableName;
if (!tableName) { if (!tableName) {
ElMessage.error("表名不能为空"); ElMessage.error("表名不能为空");
return; return;
} }
GeneratorAPI.download(tableName, "youlai-admin-code.zip"); GeneratorAPI.download(tableName);
} }
} }
} }
@@ -591,15 +642,21 @@ async function handleOpenDialog(tableName: string) {
DictAPI.getList().then((data) => { DictAPI.getList().then((data) => {
dictOptions.value = data; dictOptions.value = data;
loading.value = true; loading.value = true;
GeneratorAPI.getGenConfig(tableName) GeneratorAPI.getGenConfig(tableName)
.then((data) => { .then((data) => {
dialog.title = `${tableName} 代码生成`; dialog.title = `${tableName} 代码生成`;
formData.value = data; genConfigFormData.value = data;
if (formData.value.id) {
checkAllSelected("isShowInQuery", isCheckAllQuery);
checkAllSelected("isShowInList", isCheckAllList);
checkAllSelected("isShowInForm", isCheckAllForm);
// 如果已经配置过，直接跳转到预览页面
if (genConfigFormData.value.id) {
active.value = 2; active.value = 2;
handlePreview(tableName); handlePreview(tableName);
} else { } else {
// 如果没有配置过，跳转到基础配置页面
active.value = 0; active.value = 0;
} }
}) })
@@ -621,6 +678,29 @@ function handleResetConfig(tableName: string) {
}); });
} }
type FieldConfigKey = "isShowInQuery" | "isShowInList" | "isShowInForm";
const toggleCheckAll = (key: FieldConfigKey, value: boolean) => {
const fieldConfigs = genConfigFormData.value?.fieldConfigs;
if (fieldConfigs) {
fieldConfigs.forEach((row: FieldConfig) => {
row[key] = value ? 1 : 0;
});
}
};
const isCheckAllQuery = ref(false);
const isCheckAllList = ref(false);
const isCheckAllForm = ref(false);
const checkAllSelected = (key: keyof FieldConfig, isCheckAllRef: any) => {
const fieldConfigs = genConfigFormData.value?.fieldConfigs || [];
isCheckAllRef.value = fieldConfigs.every(
(row: FieldConfig) => row[key] === 1
);
};
/** 获取生成预览 */ /** 获取生成预览 */
function handlePreview(tableName: string) { function handlePreview(tableName: string) {
treeData.value = []; treeData.value = [];
@@ -664,11 +744,17 @@ function buildTree(
const specialPaths = [ const specialPaths = [
"src" + separator + "main", "src" + separator + "main",
"java", "java",
"youlai-boot", genConfigFormData.value.backendAppName,
"vue3-element-admin", genConfigFormData.value.frontendAppName,
"com" + separator + "youlai" + separator + "system", (
genConfigFormData.value.packageName +
"." +
genConfigFormData.value.moduleName
).replace(/\./g, separator),
]; ];
console.log("specialPaths", specialPaths);
// 检查路径中的特殊部分并合并它们 // 检查路径中的特殊部分并合并它们
const mergedParts: string[] = []; const mergedParts: string[] = [];
let buffer: string[] = []; let buffer: string[] = [];