代码生成:完善 Vue3 标准模版的表单

This commit is contained in:
YunaiV 2023-03-22 20:50:09 +08:00 committed by &wxr
parent e96f052a06
commit e8d2dc513b
3 changed files with 52 additions and 40 deletions

View File

@ -97,20 +97,21 @@ public class CodegenEngine {
* value生成的路径
*/
private static final Table<Integer, String, String> FRONT_TEMPLATES = ImmutableTable.<Integer, String, String>builder()
// Vue2
// Vue2 标准模版
.put(CodegenFrontTypeEnum.VUE2.getType(), vueTemplatePath("views/index.vue"),
vueFilePath("views/${table.moduleName}/${classNameVar}/index.vue"))
.put(CodegenFrontTypeEnum.VUE2.getType(), vueTemplatePath("api/api.js"),
vueFilePath("api/${table.moduleName}/${classNameVar}.js"))
// Vue3
// Vue3 标准模版
.put(CodegenFrontTypeEnum.VUE3.getType(), vue3TemplatePath("views/index.vue"),
vue3FilePath("views/${table.moduleName}/${classNameVar}/index.vue"))
.put(CodegenFrontTypeEnum.VUE3.getType(), vue3TemplatePath("views/form.vue"),
vue3FilePath("views/${table.moduleName}/${classNameVar}/form.vue"))
// .put(CodegenFrontTypeEnum.VUE3.getType(), vue3TemplatePath("views/data.ts"),
// vue3FilePath("views/${table.moduleName}/${classNameVar}/${classNameVar}.data.ts"))
vue3FilePath("views/${table.moduleName}/${classNameVar}/${simpleClassName}Form.vue"))
.put(CodegenFrontTypeEnum.VUE3.getType(), vue3TemplatePath("api/api.ts"),
vue3FilePath("api/${table.moduleName}/${classNameVar}/index.ts"))
// Vue3 Schema 模版
// .put(CodegenFrontTypeEnum.VUE3.getType(), vue3TemplatePath("views/data.ts"),
// vue3FilePath("views/${table.moduleName}/${classNameVar}/${classNameVar}.data.ts"))
.build();
@Resource
@ -203,6 +204,8 @@ public class CodegenEngine {
getStr(bindingMap, "basePackage").replaceAll("\\.", "/"));
filePath = StrUtil.replace(filePath, "${classNameVar}",
getStr(bindingMap, "classNameVar"));
filePath = StrUtil.replace(filePath, "${simpleClassName}",
getStr(bindingMap, "simpleClassName"));
// sceneEnum 包含的字段
CodegenSceneEnum sceneEnum = (CodegenSceneEnum) bindingMap.get("sceneEnum");
filePath = StrUtil.replace(filePath, "${sceneEnum.prefixClass}", sceneEnum.getPrefixClass());

View File

@ -27,17 +27,17 @@
<el-form-item label="${comment}" prop="${javaField}">
<el-input v-model="formData.${javaField}" placeholder="请输入${comment}" />
</el-form-item>
#elseif($column.htmlType == "imageUpload")## 图片上传 TODO 芋艿:待测试
#elseif($column.htmlType == "imageUpload")## 图片上传
#set ($hasImageUploadColumn = true)
<el-form-item label="${comment}">
<imageUpload v-model="formData.${javaField}"/>
<UploadImg v-model="formData.${javaField}" />
</el-form-item>
#elseif($column.htmlType == "fileUpload")## 文件上传 TODO 芋艿:待测试
#elseif($column.htmlType == "fileUpload")## 文件上传
#set ($hasFileUploadColumn = true)
<el-form-item label="${comment}">
<fileUpload v-model="formData.${javaField}"/>
<UploadFile v-model="formData.${javaField}" />
</el-form-item>
#elseif($column.htmlType == "editor")## 文本编辑器 TODO 芋艿:待测试
#elseif($column.htmlType == "editor")## 文本编辑器
<el-form-item label="${comment}">
<Editor :model-value="formData.${javaField}" height="150px" />
</el-form-item>
@ -59,7 +59,7 @@
#end
</el-select>
</el-form-item>
#elseif($column.htmlType == "checkbox")## 多选框 TODO 芋艿:待测试
#elseif($column.htmlType == "checkbox")## 多选框
<el-form-item label="${comment}" prop="${javaField}">
<el-checkbox-group v-model="formData.${javaField}">
#if ("" != $dictType)## 有数据字典
@ -68,8 +68,9 @@
#end
<el-checkbox
v-for="dict in $dictMethod(DICT_TYPE.$dictType.toUpperCase())"
key="dict.value"
:label="dict.value">
:key="dict.value"
:label="dict.value"
>
{{ dict.label }}
</el-checkbox>
#else##没数据字典
@ -96,11 +97,16 @@
#end
</el-radio-group>
</el-form-item>
#elseif($column.htmlType == "datetime")## 时间框 TODO 芋艿:待测试
#elseif($column.htmlType == "datetime")## 时间框
<el-form-item label="${comment}" prop="${javaField}">
<el-date-picker clearable v-model="formData.${javaField}" type="date" value-format="timestamp" placeholder="选择${comment}" />
<el-date-picker
v-model="formData.${javaField}"
type="date"
value-format="timestamp"
placeholder="选择${comment}"
/>
</el-form-item>
#elseif($column.htmlType == "textarea")## 文本框 TODO 芋艿:待测试
#elseif($column.htmlType == "textarea")## 文本框
<el-form-item label="${comment}" prop="${javaField}">
<el-input v-model="formData.${javaField}" type="textarea" placeholder="请输入${comment}" />
</el-form-item>
@ -163,7 +169,7 @@ const formRules = reactive({
const formRef = ref() // 表单 Ref
/** 打开弹窗 */
const openModal = async (type: string, id?: number) => {
const open = async (type: string, id?: number) => {
modelVisible.value = true
modelTitle.value = t('action.' + type)
formType.value = type
@ -178,7 +184,7 @@ const openModal = async (type: string, id?: number) => {
}
}
}
defineExpose({ openModal }) // 提供 openModal 方法,用于打开弹窗
defineExpose({ open }) // 提供 open 方法,用于打开弹窗
/** 提交表单 */
const emit = defineEmits(['success']) // 定义 success 事件,用于操作成功后的回调

View File

@ -92,12 +92,12 @@
<el-form-item>
<el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button>
<el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button>
#if ($permissionPrefix.length() < 15)
<el-button type="primary" @click="openModal('create')" v-hasPermi="['${permissionPrefix}:create']">
#if ($permissionPrefix.length() <= 12)
<el-button type="primary" @click="openForm('create')" v-hasPermi="['${permissionPrefix}:create']">
#else
<el-button
type="primary"
@click="openModal('create')"
@click="openForm('create')"
v-hasPermi="['${permissionPrefix}:create']"
>
#end
@ -148,7 +148,7 @@
<el-button
link
type="primary"
@click="openModal('update', scope.row.id)"
@click="openForm('update', scope.row.id)"
v-hasPermi="['${permissionPrefix}:update']"
>
编辑
@ -172,6 +172,9 @@
@pagination="getList"
/>
</content-wrap>
<!-- 表单弹窗:添加/修改 -->
<${simpleClassName}Form ref="formRef" @success="getList" />
</template>
<script setup lang="ts" name="${simpleClassName}">
@ -181,7 +184,7 @@ import { DICT_TYPE#foreach ($dictMethod in $dictMethods), ${dictMethod}#end } fr
import { dateFormatter } from '@/utils/formatTime'
import download from '@/utils/download'
import * as ${simpleClassName}Api from '@/api/${table.moduleName}/${classNameVar}'
// import ConfigForm from './form.vue'
import ${simpleClassName}Form from './${simpleClassName}Form.vue'
const message = useMessage() // 消息弹窗
const { t } = useI18n() // 国际化
@ -236,10 +239,10 @@ const resetQuery = () => {
}
/** 添加/修改操作 */
// const modalRef = ref()
// const openModal = (type: string, id?: number) => {
// modalRef.value.openModal(type, id)
// }
const formRef = ref()
const openForm = (type: string, id?: number) => {
formRef.value.open(type, id)
}
/** 删除按钮操作 */
const handleDelete = async (id: number) => {