feat(code): 代码生成新增 curd 页面模板和优化

This commit is contained in:
Ray.Hao
2025-08-21 18:09:07 +08:00
parent 2accc6a489
commit 9152ab654d
12 changed files with 227 additions and 79 deletions

View File

@@ -29,11 +29,11 @@ const ${entityName}API = {
*
* @param data ${businessName}表单数据
*/
add(data: ${entityName}Form) {
create(data: ${entityName}Form) {
return request({
url: `${${entityName.toUpperCase()}_BASE_URL}`,
method: "post",
data: data,
data,
});
},
@@ -43,11 +43,11 @@ const ${entityName}API = {
* @param id ${businessName}ID
* @param data ${businessName}表单数据
*/
update(id: number, data: ${entityName}Form) {
update(id: string, data: ${entityName}Form) {
return request({
url: `${${entityName.toUpperCase()}_BASE_URL}/${id}`,
method: "put",
data: data,
data,
});
},

View File

@@ -0,0 +1,119 @@
<template>
<div class="app-container h-full flex flex-1 flex-col">
<!-- 搜索 -->
<page-search
ref="searchRef"
:search-config="searchConfig"
@query-click="handleQueryClick"
@reset-click="handleResetClick"
/>
<!-- 列表 -->
<page-content
ref="contentRef"
:content-config="contentConfig"
@add-click="handleAddClick"
@operate-click="handleOperateClick"
>
#foreach($fieldConfig in $fieldConfigs)
#if($fieldConfig.isShowInList == 1 && $fieldConfig.dictType && $fieldConfig.dictType.trim() != "")
<template #$fieldConfig.fieldName="scope">
<DictLabel v-model="scope.row[scope.prop]" code="$fieldConfig.dictType" />
</template>
#end
#end
</page-content>
<!-- 新增/编辑 -->
<page-modal ref="modalRef" :modal-config="modalConfig" @submit-click="handleSubmitClick">
#foreach($fieldConfig in $fieldConfigs)
#if($fieldConfig.isShowInForm == 1 && $fieldConfig.formType != "HIDDEN" && $fieldConfig.dictType && $fieldConfig.dictType.trim() != "")
<template #$fieldConfig.fieldName="scope">
<Dict v-model="scope.formData[scope.prop]" code="$fieldConfig.dictType" v-bind="scope.attrs" />
</template>
#end
#end
</page-modal>
</div>
</template>
<script setup lang="ts">
defineOptions({ name: "$entityName" });
import ${entityName}API, { ${entityName}PageVO, ${entityName}Form, ${entityName}PageQuery } from "@/api/${moduleName}/${kebabCaseEntityName}-api";
import type { IObject, PageModalInstance } from "@/components/CURD/types";
import usePage from "@/components/CURD/usePage";
// 组合式 CRUD
const {
searchRef,
contentRef,
addModalRef: modalRef,
handleQueryClick,
handleResetClick,
handleAddClick,
handleEditClick,
handleSubmitClick,
} = usePage<${entityName}PageQuery, ${entityName}PageVO, ${entityName}Form>();
// 搜索配置
const searchConfig = {
formItems: [
#foreach($fieldConfig in $fieldConfigs)
#if($fieldConfig.isShowInQuery == 1)
{
type: "$!{fieldConfig.formType.toLowerCase()}",
label: "$fieldConfig.fieldComment",
field: "$fieldConfig.fieldName",
placeholder: "$fieldConfig.fieldComment",
},
#end
#end
],
};
// 列表配置
const contentConfig = {
api: {
page: ${entityName}API.getPage,
deleteByIds: ${entityName}API.deleteByIds,
},
table: {
columns: [
{ type: "selection", width: 55, align: "center" },
#foreach($fieldConfig in $fieldConfigs)
#if($fieldConfig.isShowInList == 1)
{ label: "$fieldConfig.fieldComment", prop: "$fieldConfig.fieldName", slot: "$fieldConfig.fieldName" },
#end
#end
{ label: "操作", prop: "operation", width: 220 }
],
operate: [
{ name: "edit", type: "primary", text: "编辑" },
{ name: "delete", type: "danger", text: "删除" },
],
},
};
// 弹窗配置
const modalConfig = {
api: {
create: ${entityName}API.create,
update: ${entityName}API.update,
},
formItems: [
#foreach($fieldConfig in $fieldConfigs)
#if($fieldConfig.isShowInForm == 1 && $fieldConfig.formType != "HIDDEN")
{
type: "$!{fieldConfig.formType.toLowerCase()}",
label: "$fieldConfig.fieldComment",
prop: "$fieldConfig.fieldName",
attrs: { placeholder: "$fieldConfig.fieldComment" },
},
#end
#end
],
};
</script>

View File

@@ -2,9 +2,9 @@
<div class="app-container">
<div class="search-container">
<el-form ref="queryFormRef" :model="queryParams" :inline="true">
#foreach($fieldConfig in $fieldConfigs)
#if($fieldConfig.isShowInQuery == 1)
<el-form-item label="$fieldConfig.fieldComment" prop="$fieldConfig.fieldName">
#foreach($fieldConfig in $fieldConfigs)
#if($fieldConfig.isShowInQuery == 1)
<el-form-item label="$fieldConfig.fieldComment" prop="$fieldConfig.fieldName">
#if($fieldConfig.formType == "INPUT")
<el-input
v-model="queryParams.$fieldConfig.fieldName"
@@ -14,7 +14,7 @@
/>
#elseif($fieldConfig.formType == "SELECT")
#if($fieldConfig.dictType && $fieldConfig.dictType.trim() != "")
<dict v-model="queryParams.$fieldConfig.fieldName" code="$fieldConfig.dictType" />
<Dict v-model="queryParams.$fieldConfig.fieldName" code="$fieldConfig.dictType" />
#else
<el-select v-model="queryParams.$fieldConfig.fieldName" placeholder="请选择$fieldConfig.fieldComment">
<el-option :key="1" :value="1" label="选项一"/>
@@ -23,7 +23,7 @@
#end
#elseif($fieldConfig.formType == "RADIO")
#if($fieldConfig.dictType && $fieldConfig.dictType.trim() != "")
<dict v-model="queryParams.$fieldConfig.fieldName" type="radio" code="$fieldConfig.dictType" />
<Dict v-model="queryParams.$fieldConfig.fieldName" type="radio" code="$fieldConfig.dictType" />
#else
<el-radio-group v-model="queryParams.$fieldConfig.fieldName">
<el-radio :key="1" :value="1">选项一</el-radio>
@@ -32,7 +32,7 @@
#end
#elseif($fieldConfig.formType == "CHECK_BOX")
#if($fieldConfig.dictType && $fieldConfig.dictType.trim() != "")
<dict v-model="queryParams.$fieldConfig.fieldName" type="checkbox" code="$fieldConfig.dictType" />
<Dict v-model="queryParams.$fieldConfig.fieldName" type="checkbox" code="$fieldConfig.dictType" />
#else
<el-checkbox-group v-model="queryParams.$fieldConfig.fieldName">
<el-checkbox :key="1" :label="1">选项一</el-checkbox>
@@ -85,18 +85,12 @@
value-format="YYYY-MM-DD"
/>
#end
</el-form-item>
#end
</el-form-item>
#end
<el-form-item>
<el-button type="primary" @click="handleQuery">
<template #icon><Search /></template>
搜索
</el-button>
<el-button @click="handleResetQuery">
<template #icon><Refresh /></template>
重置
</el-button>
#end
<el-form-item class="search-buttons">
<el-button type="primary" icon="search" @click="handleQuery">搜索</el-button>
<el-button icon="refresh" @click="handleResetQuery">重置</el-button>
</el-form-item>
</el-form>
</div>
@@ -106,50 +100,46 @@
<el-button
v-hasPerm="['${moduleName}:${kebabCaseEntityName}:add']"
type="success"
icon="plus"
@click="handleOpenDialog()"
>
<template #icon><Plus /></template>
新增
</el-button>
>新增</el-button>
<el-button
v-hasPerm="['${moduleName}:${kebabCaseEntityName}:delete']"
type="danger"
:disabled="removeIds.length === 0"
icon="delete"
@click="handleDelete()"
>
<template #icon><Delete /></template>
删除
</el-button>
>删除</el-button>
</div>
<el-table
ref="dataTableRef"
v-loading="loading"
:data="pageData"
highlight-current-row
border
@selection-change="handleSelectionChange"
ref="dataTableRef"
v-loading="loading"
:data="pageData"
highlight-current-row
border
@selection-change="handleSelectionChange"
>
<el-table-column type="selection" width="55" align="center" />
#foreach($fieldConfig in $fieldConfigs)
#if($fieldConfig.isShowInList == 1)
#if($fieldConfig.dictType && $fieldConfig.dictType.trim() != "")
<el-table-column label="$fieldConfig.fieldComment" width="150" align="center">
<template #default="scope">
<DictLabel v-model="scope.row.$fieldConfig.fieldName" code="$fieldConfig.dictType" />
</template>
</el-table-column>
#else
<el-table-column
key="$fieldConfig.fieldName"
label="$fieldConfig.fieldComment"
prop="$fieldConfig.fieldName"
min-width="150"
align="center"
/>
#end
#end
#foreach($fieldConfig in $fieldConfigs)
#if($fieldConfig.isShowInList == 1)
#if($fieldConfig.dictType && $fieldConfig.dictType.trim() != "")
<el-table-column label="$fieldConfig.fieldComment" width="150" align="center">
<template #default="scope">
<DictLabel v-model="scope.row.$fieldConfig.fieldName" code="$fieldConfig.dictType" />
</template>
</el-table-column>
#else
<el-table-column
key="$fieldConfig.fieldName"
label="$fieldConfig.fieldComment"
prop="$fieldConfig.fieldName"
min-width="150"
align="center"
/>
#end
#end
#end
<el-table-column fixed="right" label="操作" width="220">
<template #default="scope">
<el-button
@@ -157,9 +147,9 @@
type="primary"
size="small"
link
icon="edit"
@click="handleOpenDialog(scope.row.id)"
>
<template #icon><Edit /></template>
编辑
</el-button>
<el-button
@@ -167,9 +157,9 @@
type="danger"
size="small"
link
icon="delete"
@click="handleDelete(scope.row.id)"
>
<template #icon><Delete /></template>
删除
</el-button>
</template>
@@ -203,7 +193,7 @@
/>
#elseif($fieldConfig.formType == "SELECT")
#if($fieldConfig.dictType && $fieldConfig.dictType.trim() != "")
<dict v-model="formData.$fieldConfig.fieldName" code="$fieldConfig.dictType" />
<Dict v-model="formData.$fieldConfig.fieldName" code="$fieldConfig.dictType" />
#else
<el-select v-model="formData.$fieldConfig.fieldName" placeholder="请选择$fieldConfig.fieldComment">
<el-option :value="0" label="选项一"/>
@@ -212,7 +202,7 @@
#end
#elseif($fieldConfig.formType == "RADIO")
#if($fieldConfig.dictType && $fieldConfig.dictType.trim() != "")
<dict v-model="queryParams.$fieldConfig.fieldName" type="radio" code="$fieldConfig.dictType" />
<Dict v-model="queryParams.$fieldConfig.fieldName" type="radio" code="$fieldConfig.dictType" />
#else
<el-radio-group v-model="formData.$fieldConfig.fieldName">
<el-radio :value="0">选项一</el-radio>
@@ -221,7 +211,7 @@
#end
#elseif($fieldConfig.formType == "CHECK_BOX")
#if($fieldConfig.dictType && $fieldConfig.dictType.trim() != "")
<dict v-model="queryParams.$fieldConfig.fieldName" type="checkbox" code="$fieldConfig.dictType" />
<Dict v-model="queryParams.$fieldConfig.fieldName" type="checkbox" code="$fieldConfig.dictType" />
#else
<el-checkbox-group v-model="formData.$fieldConfig.fieldName">
<el-checkbox :value="0">选项一</el-checkbox>
@@ -283,7 +273,7 @@
inheritAttrs: false,
});
import ${entityName}API, { ${entityName}PageVO, ${entityName}Form, ${entityName}PageQuery } from "@/api/${moduleName}/${kebabCaseEntityName}";
import ${entityName}API, { ${entityName}PageVO, ${entityName}Form, ${entityName}PageQuery } from "@/api/${moduleName}/${kebabCaseEntityName}-api";
const queryFormRef = ref();
const dataFormRef = ref();