linweidong
/
besure_server
2
1
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

代码生成：重构 vue2 模版，适配树表和主子表（90%）

Browse Source
plp
puhui999 3 years ago
parent df69fecbb4
commit a88c93fc60
4 changed files with 428 additions and 540 deletions
Show Stats Download Patch File Download Diff File

396
yudao-module-infra/yudao-module-infra-biz/src/main/resources/codegen/vue/views/components/form_sub_erp.vue.vm
Unescape Escape View File

@ -2,203 +2,211 @@
#set ($subSimpleClassName = $subSimpleClassNames.get($subIndex)) #set ($subSimpleClassName = $subSimpleClassNames.get($subIndex))
#set ($subJoinColumn = $subJoinColumns.get($subIndex))##当前 join 字段 #set ($subJoinColumn = $subJoinColumns.get($subIndex))##当前 join 字段
<template> <template>
<Dialog :title="dialogTitle" :visible.sync="dialogVisible"> <div class="app-container">
<el-form <!-- 对话框(添加 / 修改) -->
ref="formRef" <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="500px" v-dialogDrag append-to-body>
:model="formData" <el-form ref="formRef" :model="formData" :rules="formRules" v-loading="formLoading" label-width="80px">
:rules="formRules" #foreach($column in $subColumns)
label-width="100px" #if ($column.createOperation || $column.updateOperation)
v-loading="formLoading" #set ($dictType = $column.dictType)
> #set ($javaField = $column.javaField)
#foreach($column in $subColumns) #set ($javaType = $column.javaType)
#if ($column.createOperation || $column.updateOperation) #set ($AttrName = $column.javaField.substring(0,1).toUpperCase() + ${column.javaField.substring(1)})
#set ($dictType = $column.dictType) #set ($comment = $column.columnComment)
#set ($javaField = $column.javaField) #if ($column.htmlType == "input" && !$column.primaryKey)## 忽略主键，不用在表单里 TODO 芋艿：这里要忽略下 join 字段；
#set ($javaType = $column.javaType) #if (!$column.primaryKey)## 忽略主键，不用在表单里
#set ($AttrName = $column.javaField.substring(0,1).toUpperCase() + ${column.javaField.substring(1)}) <el-form-item label="${comment}" prop="${javaField}">
#set ($comment = $column.columnComment) <el-input v-model="form.${javaField}" placeholder="请输入${comment}" />
#set ($dictMethod = "getDictOptions")## 计算使用哪个 dict 字典方法 </el-form-item>
#if ($javaType == "Integer" || $javaType == "Long" || $javaType == "Byte" || $javaType == "Short") #end
#set ($dictMethod = "getIntDictOptions") #elseif($column.htmlType == "imageUpload")## 图片上传
#elseif ($javaType == "String") #set ($hasImageUploadColumn = true)
#set ($dictMethod = "getStrDictOptions") <el-form-item label="${comment}">
#elseif ($javaType == "Boolean") <ImageUpload v-model="form.${javaField}"/>
#set ($dictMethod = "getBoolDictOptions") </el-form-item>
#elseif($column.htmlType == "fileUpload")## 文件上传
#set ($hasFileUploadColumn = true)
<el-form-item label="${comment}">
<FileUpload v-model="form.${javaField}"/>
</el-form-item>
#elseif($column.htmlType == "editor")## 文本编辑器
#set ($hasEditorColumn = true)
<el-form-item label="${comment}">
<editor v-model="form.${javaField}" :min-height="192"/>
</el-form-item>
#elseif($column.htmlType == "select")## 下拉框
<el-form-item label="${comment}" prop="${javaField}">
<el-select v-model="form.${javaField}" placeholder="请选择${comment}">
#if ("" != $dictType)## 有数据字典
<el-option v-for="dict in this.getDictDatas(DICT_TYPE.$dictType.toUpperCase())"
:key="dict.value" :label="dict.label" #if ($column.javaType == "Integer" || $column.javaType == "Long"):value="parseInt(dict.value)"#else:value="dict.value"#end />
#else##没数据字典
<el-option label="请选择字典生成" value="" />
#end
</el-select>
</el-form-item>
#elseif($column.htmlType == "checkbox")## 多选框
<el-form-item label="${comment}" prop="${javaField}">
<el-checkbox-group v-model="form.${javaField}">
#if ("" != $dictType)## 有数据字典
<el-checkbox v-for="dict in this.getDictDatas(DICT_TYPE.$dictType.toUpperCase())"
:key="dict.value" #if($column.javaType == "Integer" || $column.javaType == "Long"):label="parseInt(dict.value)"#else:label="dict.value"#end>{{dict.label}}</el-checkbox>
#else##没数据字典
<el-checkbox>请选择字典生成</el-checkbox>
#end
</el-checkbox-group>
</el-form-item>
#elseif($column.htmlType == "radio")## 单选框
<el-form-item label="${comment}" prop="${javaField}">
<el-radio-group v-model="form.${javaField}">
#if ("" != $dictType)## 有数据字典
<el-radio v-for="dict in this.getDictDatas(DICT_TYPE.$dictType.toUpperCase())"
:key="dict.value" #if($column.javaType == "Integer" || $column.javaType == "Long"):label="parseInt(dict.value)"
#else:label="dict.value"#end>{{dict.label}}</el-radio>
#else##没数据字典
<el-radio label="1">请选择字典生成</el-radio>
#end
</el-radio-group>
</el-form-item>
#elseif($column.htmlType == "datetime")## 时间框
<el-form-item label="${comment}" prop="${javaField}">
<el-date-picker clearable v-model="form.${javaField}" type="date" value-format="timestamp" placeholder="选择${comment}" />
</el-form-item>
#elseif($column.htmlType == "textarea")## 文本框
<el-form-item label="${comment}" prop="${javaField}">
<el-input v-model="form.${javaField}" type="textarea" placeholder="请输入内容" />
</el-form-item>
#end
#end
#end
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="submitForm" :disabled="formLoading">确 定</el-button>
<el-button @click="dialogVisible = false">取 消</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import * as ${simpleClassName}Api from '@/api/${table.moduleName}/${table.businessName}'
#if ($hasImageUploadColumn)
import ImageUpload from '@/components/ImageUpload';
#end
#if ($hasFileUploadColumn)
import FileUpload from '@/components/FileUpload';
#end
#if ($hasEditorColumn)
import Editor from '@/components/Editor';
#end
export default {
name: "${simpleClassName}",
components: {
#if ($hasImageUploadColumn)
ImageUpload,
#end #end
#if ($column.htmlType == "input" && !$column.primaryKey)## 忽略主键，不用在表单里 TODO 芋艿：这里要忽略下 join 字段； #if ($hasFileUploadColumn)
<el-form-item label="${comment}" prop="${javaField}"> FileUpload,
<el-input v-model="formData.${javaField}" placeholder="请输入${comment}" /> #end
</el-form-item> #if ($hasEditorColumn)
#elseif($column.htmlType == "imageUpload")## 图片上传 Editor,
<el-form-item label="${comment}" prop="${javaField}"> #end
<UploadImg v-model="formData.${javaField}" /> },
</el-form-item> data() {
#elseif($column.htmlType == "fileUpload")## 文件上传 return {
<el-form-item label="${comment}" prop="${javaField}"> // 弹出层标题
<UploadFile v-model="formData.${javaField}" /> dialogTitle: "",
</el-form-item> // 是否显示弹出层
#elseif($column.htmlType == "editor")## 文本编辑器 dialogVisible: false,
<el-form-item label="${comment}" prop="${javaField}"> // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
<Editor v-model="formData.${javaField}" height="150px" /> formLoading: false,
</el-form-item> // 表单参数
#elseif($column.htmlType == "select")## 下拉框 formData: {
<el-form-item label="${comment}" prop="${javaField}"> #foreach ($column in $columns)
<el-select v-model="formData.${javaField}" placeholder="请选择${comment}"> #if ($column.createOperation || $column.updateOperation)
#if ("" != $dictType)## 有数据字典 #if ($column.htmlType == "checkbox")
<el-option $column.javaField: [],
v-for="dict in $dictMethod(DICT_TYPE.$dictType.toUpperCase())" #else
:key="dict.value" $column.javaField: undefined,
:label="dict.label" #end
:value="dict.value"
/>
#else##没数据字典
<el-option label="请选择字典生成" value="" />
#end #end
</el-select> #end
</el-form-item> },
#elseif($column.htmlType == "checkbox")## 多选框 // 表单校验
<el-form-item label="${comment}" prop="${javaField}"> formRules: {
<el-checkbox-group v-model="formData.${javaField}"> #foreach ($column in $columns)
#if ("" != $dictType)## 有数据字典 #if (($column.createOperation || $column.updateOperation) && !$column.nullable && !${column.primaryKey})## 创建或者更新操作 && 要求非空 && 非主键
<el-checkbox #set($comment=$column.columnComment)
v-for="dict in $dictMethod(DICT_TYPE.$dictType.toUpperCase())" $column.javaField: [{ required: true, message: "${comment}不能为空", trigger: #if($column.htmlType == "select")"change"#else"blur"#end }],
:key="dict.value"
:label="dict.value"
>
{{ dict.label }}
</el-checkbox>
#else##没数据字典
<el-checkbox>请选择字典生成</el-checkbox>
#end #end
</el-checkbox-group> #end
</el-form-item> },
#elseif($column.htmlType == "radio")## 单选框 };
<el-form-item label="${comment}" prop="${javaField}"> },
<el-radio-group v-model="formData.${javaField}"> methods: {
#if ("" != $dictType)## 有数据字典 /** 表单重置 */
<el-radio reset() {
v-for="dict in $dictMethod(DICT_TYPE.$dictType.toUpperCase())" this.formData = {
:key="dict.value" #foreach ($column in $columns)
:label="dict.value" #if ($column.createOperation || $column.updateOperation)
> #if ($column.htmlType == "checkbox")
{{ dict.label }} $column.javaField: [],
</el-radio> #else
#else##没数据字典 $column.javaField: undefined,
<el-radio label="1">请选择字典生成</el-radio> #end
#end #end
</el-radio-group> #end
</el-form-item> };
#elseif($column.htmlType == "datetime")## 时间框 this.resetForm("formRef");
<el-form-item label="${comment}" prop="${javaField}"> },
<el-date-picker /** 打开弹窗 */
v-model="formData.${javaField}" open(id) {
type="date" this.dialogVisible = true;
value-format="x" this.reset();
placeholder="选择${comment}" const that = this;
/> // 修改时，设置数据
</el-form-item> if (id) {
#elseif($column.htmlType == "textarea")## 文本框 this.formLoading = true;
<el-form-item label="${comment}" prop="${javaField}"> try {
<el-input v-model="formData.${javaField}" type="textarea" placeholder="请输入${comment}" /> ${simpleClassName}Api.get${subSimpleClassName}(id).then(res=>{
</el-form-item> that.formData = res.data;
#end that.title = "修改${table.classComment}";
#end })
#end } finally {
</el-form> this.formLoading = false;
<template v-slot:footer> }
<el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button> }
<el-button @click="dialogVisible = false">取 消</el-button> this.title = "新增${table.classComment}";
</template> },
</Dialog> /** 提交按钮 */
</template> submitForm() {
<script setup lang="ts"> this.formLoading = true;
import { getIntDictOptions, getStrDictOptions, getBoolDictOptions, DICT_TYPE } from '@/utils/dict' try {
import * as ${simpleClassName}Api from '@/api/${table.moduleName}/${table.businessName}' let data = this.formData;
this.#[[$]]#refs["formRef"].validate(valid => {
const { t } = useI18n() // 国际化 if (!valid) {
const message = useMessage() // 消息弹窗 return;
}
const dialogVisible = ref(false) // 弹窗的是否展示 // 修改的提交
const dialogTitle = ref('') // 弹窗的标题 if (data.${primaryColumn.javaField}) {
const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用 ${simpleClassName}Api.update${simpleClassName}(data).then(response => {
const formType = ref('') // 表单的类型：create - 新增；update - 修改 this.#[[$modal]]#.msgSuccess("修改成功");
const formData = ref({ this.dialogVisible = false;
#foreach ($column in $subColumns) this.#[[$]]#emit('success');
#if ($column.createOperation || $column.updateOperation) });
#if ($column.htmlType == "checkbox") return;
$column.javaField: [], }
#else // 添加的提交
$column.javaField: undefined, ${simpleClassName}Api.create${simpleClassName}(data).then(response => {
#end this.#[[$modal]]#.msgSuccess("新增成功");
#end this.dialogVisible = false;
#end this.#[[$]]#emit('success');
}) });
const formRules = reactive({ });
#foreach ($column in $subColumns) }finally {
#if (($column.createOperation || $column.updateOperation) && !$column.nullable && !${column.primaryKey})## 创建或者更新操作 && 要求非空 && 非主键 this.formLoading = false
#set($comment=$column.columnComment) }
$column.javaField: [{ required: true, message: '${comment}不能为空', trigger: #if($column.htmlType == 'select')'change'#else'blur'#end }], }
#end
#end
})
const formRef = ref() // 表单 Ref
/** 打开弹窗 */
const open = async (type: string, id?: number, ${subJoinColumn.javaField}: number) => {
dialogVisible.value = true
dialogTitle.value = t('action.' + type)
formType.value = type
resetForm()
formData.value.${subJoinColumn.javaField} = ${subJoinColumn.javaField}
// 修改时，设置数据
if (id) {
formLoading.value = true
try {
formData.value = await ${simpleClassName}Api.get${subSimpleClassName}(id)
} finally {
formLoading.value = false
} }
} };
}
defineExpose({ open }) // 提供 open 方法，用于打开弹窗
/** 提交表单 */
const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
const submitForm = async () => {
// 校验表单
await formRef.value.validate()
// 提交请求
formLoading.value = true
try {
const data = formData.value
if (formType.value === 'create') {
await ${simpleClassName}Api.create${subSimpleClassName}(data)
message.success(t('common.createSuccess'))
} else {
await ${simpleClassName}Api.update${subSimpleClassName}(data)
message.success(t('common.updateSuccess'))
}
dialogVisible.value = false
// 发送操作成功的事件
emit('success')
} finally {
formLoading.value = false
}
}
/** 重置表单 */
const resetForm = () => {
formData.value = {
#foreach ($column in $subColumns)
#if ($column.createOperation || $column.updateOperation)
#if ($column.htmlType == "checkbox")
$column.javaField: [],
#else
$column.javaField: undefined,
#end
#end
#end
}
formRef.value?.resetFields()
}
</script> </script>

2
yudao-module-infra/yudao-module-infra-biz/src/main/resources/codegen/vue/views/components/form_sub_inner.vue.vm
Unescape Escape View File

@ -1,2 +1,2 @@
## 主表的 normal 和 inner 使用相同的 form 表单 ## 主表的 normal 和 inner 使用相同的 form 表单
#parse("codegen/vue3/views/components/form_sub_normal.vue.vm") #parse("codegen/vue/views/components/form_sub_normal.vue.vm")

564
yudao-module-infra/yudao-module-infra-biz/src/main/resources/codegen/vue/views/components/form_sub_normal.vue.vm
Unescape Escape View File

@ -4,359 +4,239 @@
#set ($subSimpleClassName = $subSimpleClassNames.get($subIndex)) #set ($subSimpleClassName = $subSimpleClassNames.get($subIndex))
#set ($subJoinColumn = $subJoinColumns.get($subIndex))##当前 join 字段 #set ($subJoinColumn = $subJoinColumns.get($subIndex))##当前 join 字段
#set ($SubJoinColumnName = $subJoinColumn.javaField.substring(0,1).toUpperCase() + ${subJoinColumn.javaField.substring(1)})##首字母大写 #set ($SubJoinColumnName = $subJoinColumn.javaField.substring(0,1).toUpperCase() + ${subJoinColumn.javaField.substring(1)})##首字母大写
<template> <template>
<div class="app-container">
#if ( $subTable.subJoinMany )## 情况一：一对多，table + form #if ( $subTable.subJoinMany )## 情况一：一对多，table + form
<el-form <el-form
ref="formRef" ref="formRef"
:model="formData" :model="formData"
:rules="formRules" :rules="formRules"
v-loading="formLoading" v-loading="formLoading"
label-width="0px" label-width="0px"
:inline-message="true" :inline-message="true"
> >
<el-table :data="formData" class="-mt-10px"> ## // TODO puhui999: 看看样式是否需要调整
<el-table-column label="序号" type="index" width="100" /> <el-table :data="formData" class="-mt-10px">
#foreach($column in $subColumns) <el-table-column label="序号" type="index" width="100" />
#if ($column.createOperation || $column.updateOperation) #foreach($column in $subColumns)
#set ($dictType = $column.dictType) #if ($column.createOperation || $column.updateOperation)
#set ($javaField = $column.javaField) #set ($dictType = $column.dictType)
#set ($javaType = $column.javaType) #set ($javaField = $column.javaField)
#set ($AttrName = $column.javaField.substring(0,1).toUpperCase() + ${column.javaField.substring(1)}) #set ($javaType = $column.javaType)
#set ($comment = $column.columnComment) #set ($AttrName = $column.javaField.substring(0,1).toUpperCase() + ${column.javaField.substring(1)})
#set ($dictMethod = "getDictOptions")## 计算使用哪个 dict 字典方法 #set ($comment = $column.columnComment)
#if ($javaType == "Integer" || $javaType == "Long" || $javaType == "Byte" || $javaType == "Short") #if ( $column.id == $subJoinColumn.id) ## 特殊：忽略主子表的 join 字段，不用填写
#set ($dictMethod = "getIntDictOptions") #elseif ($column.htmlType == "input" && !$column.primaryKey)## 忽略主键，不用在表单里
#elseif ($javaType == "String") <el-table-column label="${comment}" min-width="150">
#set ($dictMethod = "getStrDictOptions") <template slot-scope="{ row, $index }">
#elseif ($javaType == "Boolean") <el-form-item :prop="`${$index}.${javaField}`" :rules="formRules.${javaField}" class="mb-0px!">
#set ($dictMethod = "getBoolDictOptions") <el-input v-model="row.${javaField}" placeholder="请输入${comment}" />
#end </el-form-item>
#if ( $column.id == $subJoinColumn.id) ## 特殊：忽略主子表的 join 字段，不用填写 </template>
#elseif ($column.htmlType == "input" && !$column.primaryKey)## 忽略主键，不用在表单里 </el-table-column>
<el-table-column label="${comment}" min-width="150"> #elseif($column.htmlType == "imageUpload")## 图片上传
<template #default="{ row, $index }"> #set ($hasImageUploadColumn = true)
<el-form-item :prop="`${$index}.${javaField}`" :rules="formRules.${javaField}" class="mb-0px!"> <el-table-column label="${comment}" min-width="200">
<el-input v-model="row.${javaField}" placeholder="请输入${comment}" /> <template slot-scope="{ row, $index }">
</el-form-item> <el-form-item :prop="`${$index}.${javaField}`" :rules="formRules.${javaField}" class="mb-0px!">
</template> <ImageUpload v-model="row.${javaField}"/>
</el-table-column> </el-form-item>
#elseif($column.htmlType == "imageUpload")## 图片上传 </template>
<el-table-column label="${comment}" min-width="200"> </el-table-column>
<template #default="{ row, $index }"> #elseif($column.htmlType == "fileUpload")## 文件上传
<el-form-item :prop="`${$index}.${javaField}`" :rules="formRules.${javaField}" class="mb-0px!"> #set ($hasFileUploadColumn = true)
<UploadImg v-model="row.${javaField}" /> <el-table-column label="${comment}" min-width="200">
</el-form-item> <template slot-scope="{ row, $index }">
</template> <el-form-item :prop="`${$index}.${javaField}`" :rules="formRules.${javaField}" class="mb-0px!">
</el-table-column> <FileUpload v-model="row.${javaField}"/>
#elseif($column.htmlType == "fileUpload")## 文件上传 </el-form-item>
<el-table-column label="${comment}" min-width="200"> </template>
<template #default="{ row, $index }"> </el-table-column>
<el-form-item :prop="`${$index}.${javaField}`" :rules="formRules.${javaField}" class="mb-0px!"> #elseif($column.htmlType == "editor")## 文本编辑器
<UploadFile v-model="row.${javaField}" /> #set ($hasEditorColumn = true)
</el-form-item> <el-table-column label="${comment}" min-width="400">
</template> <template slot-scope="{ row, $index }">
</el-table-column> <el-form-item :prop="`${$index}.${javaField}`" :rules="formRules.${javaField}" class="mb-0px!">
#elseif($column.htmlType == "editor")## 文本编辑器 <editor v-model="row.${javaField}" :min-height="192"/>
<el-table-column label="${comment}" min-width="400"> </el-form-item>
<template #default="{ row, $index }"> </template>
<el-form-item :prop="`${$index}.${javaField}`" :rules="formRules.${javaField}" class="mb-0px!"> </el-table-column>
<Editor v-model="row.${javaField}" height="150px" /> #elseif($column.htmlType == "select")## 下拉框
</el-form-item> <el-table-column label="${comment}" min-width="150">
</template> <template slot-scope="{ row, $index }">
</el-table-column> <el-form-item :prop="`${$index}.${javaField}`" :rules="formRules.${javaField}" class="mb-0px!">
#elseif($column.htmlType == "select")## 下拉框 <el-select v-model="row.${javaField}" placeholder="请选择${comment}">
<el-table-column label="${comment}" min-width="150"> #if ("" != $dictType)## 有数据字典
<template #default="{ row, $index }"> <el-option v-for="dict in this.getDictDatas(DICT_TYPE.$dictType.toUpperCase())"
<el-form-item :prop="`${$index}.${javaField}`" :rules="formRules.${javaField}" class="mb-0px!"> :key="dict.value" :label="dict.label" #if ($column.javaType == "Integer" || $column.javaType == "Long"):value="parseInt(dict.value)"#else:value="dict.value"#end />
<el-select v-model="row.${javaField}" placeholder="请选择${comment}"> #else##没数据字典
#if ("" != $dictType)## 有数据字典 <el-option label="请选择字典生成" value="" />
<el-option #end
v-for="dict in $dictMethod(DICT_TYPE.$dictType.toUpperCase())" </el-select>
:key="dict.value" </el-form-item>
:label="dict.label" </template>
:value="dict.value" </el-table-column>
/> #elseif($column.htmlType == "checkbox")## 多选框
#else##没数据字典 <el-table-column label="${comment}" min-width="150">
<el-option label="请选择字典生成" value="" /> <template slot-scope="{ row, $index }">
#end <el-form-item :prop="`${$index}.${javaField}`" :rules="formRules.${javaField}" class="mb-0px!">
</el-select> <el-checkbox-group v-model="row.${javaField}">
</el-form-item> #if ("" != $dictType)## 有数据字典
</template> <el-checkbox v-for="dict in this.getDictDatas(DICT_TYPE.$dictType.toUpperCase())"
</el-table-column> :key="dict.value" #if($column.javaType == "Integer" || $column.javaType == "Long"):label="parseInt(dict.value)"#else:label="dict.value"#end>{{dict.label}}</el-checkbox>
#elseif($column.htmlType == "checkbox")## 多选框 #else##没数据字典
<el-table-column label="${comment}" min-width="150"> <el-checkbox>请选择字典生成</el-checkbox>
<template #default="{ row, $index }"> #end
<el-form-item :prop="`${$index}.${javaField}`" :rules="formRules.${javaField}" class="mb-0px!"> </el-checkbox-group>
<el-checkbox-group v-model="row.${javaField}"> </el-form-item>
#if ("" != $dictType)## 有数据字典 </template>
<el-checkbox </el-table-column>
v-for="dict in $dictMethod(DICT_TYPE.$dictType.toUpperCase())" #elseif($column.htmlType == "radio")## 单选框
:key="dict.value" <el-table-column label="${comment}" min-width="150">
:label="dict.value" <template slot-scope="{ row, $index }">
> <el-form-item :prop="`${$index}.${javaField}`" :rules="formRules.${javaField}" class="mb-0px!">
{{ dict.label }} <el-radio-group v-model="row.${javaField}">
</el-checkbox> #if ("" != $dictType)## 有数据字典
#else##没数据字典 <el-radio v-for="dict in this.getDictDatas(DICT_TYPE.$dictType.toUpperCase())"
<el-checkbox>请选择字典生成</el-checkbox> :key="dict.value" #if($column.javaType == "Integer" || $column.javaType == "Long"):label="parseInt(dict.value)"
#end #else:label="dict.value"#end>{{dict.label}}</el-radio>
</el-checkbox-group> #else##没数据字典
</el-form-item> <el-radio label="1">请选择字典生成</el-radio>
</template> #end
</el-table-column> </el-radio-group>
#elseif($column.htmlType == "radio")## 单选框 </el-form-item>
<el-table-column label="${comment}" min-width="150"> </template>
<template #default="{ row, $index }"> </el-table-column>
<el-form-item :prop="`${$index}.${javaField}`" :rules="formRules.${javaField}" class="mb-0px!"> #elseif($column.htmlType == "datetime")## 时间框
<el-radio-group v-model="row.${javaField}"> <el-table-column label="${comment}" min-width="150">
#if ("" != $dictType)## 有数据字典 <template slot-scope="{ row, $index }">
<el-radio <el-form-item :prop="`${$index}.${javaField}`" :rules="formRules.${javaField}" class="mb-0px!">
v-for="dict in $dictMethod(DICT_TYPE.$dictType.toUpperCase())" <el-date-picker
:key="dict.value" v-model="row.${javaField}"
:label="dict.value" type="date"
> value-format="x"
{{ dict.label }} placeholder="选择${comment}"
</el-radio> />
#else##没数据字典 </el-form-item>
<el-radio label="1">请选择字典生成</el-radio> </template>
#end </el-table-column>
</el-radio-group> #elseif($column.htmlType == "textarea")## 文本框
</el-form-item> <el-table-column label="${comment}" min-width="200">
</template> <template slot-scope="{ row, $index }">
</el-table-column> <el-form-item :prop="`${$index}.${javaField}`" :rules="formRules.${javaField}" class="mb-0px!">
#elseif($column.htmlType == "datetime")## 时间框 <el-input v-model="row.${javaField}" type="textarea" placeholder="请输入${comment}" />
<el-table-column label="${comment}" min-width="150"> </el-form-item>
<template #default="{ row, $index }"> </template>
<el-form-item :prop="`${$index}.${javaField}`" :rules="formRules.${javaField}" class="mb-0px!"> </el-table-column>
<el-date-picker #end
v-model="row.${javaField}" #end
type="date" #end
value-format="x" <el-table-column align="center" fixed="right" label="操作" width="60">
placeholder="选择${comment}" <template slot-scope="{ $index }">
/> <el-button @click="handleDelete($index)" link>—</el-button>
</el-form-item> </template>
</template> </el-table-column>
</el-table-column> </el-table>
#elseif($column.htmlType == "textarea")## 文本框 </el-form>
<el-table-column label="${comment}" min-width="200">
<template #default="{ row, $index }">
<el-form-item :prop="`${$index}.${javaField}`" :rules="formRules.${javaField}" class="mb-0px!">
<el-input v-model="row.${javaField}" type="textarea" placeholder="请输入${comment}" />
</el-form-item>
</template>
</el-table-column>
#end
#end
#end
<el-table-column align="center" fixed="right" label="操作" width="60">
<template #default="{ $index }">
<el-button @click="handleDelete($index)" link>—</el-button>
</template>
</el-table-column>
</el-table>
</el-form>
<el-row justify="center" class="mt-3"> <el-row justify="center" class="mt-3">
<el-button @click="handleAdd" round>+ 添加${subTable.classComment}</el-button> <el-button @click="handleAdd" round>+ 添加${subTable.classComment}</el-button>
</el-row> </el-row>
#else## 情况二：一对一，form
<el-form
ref="formRef"
:model="formData"
:rules="formRules"
label-width="100px"
v-loading="formLoading"
>
#foreach($column in $subColumns)
#if ($column.createOperation || $column.updateOperation)
#set ($dictType = $column.dictType)
#set ($javaField = $column.javaField)
#set ($javaType = $column.javaType)
#set ($AttrName = $column.javaField.substring(0,1).toUpperCase() + ${column.javaField.substring(1)})
#set ($comment = $column.columnComment)
#set ($dictMethod = "getDictOptions")## 计算使用哪个 dict 字典方法
#if ($javaType == "Integer" || $javaType == "Long" || $javaType == "Byte" || $javaType == "Short")
#set ($dictMethod = "getIntDictOptions")
#elseif ($javaType == "String")
#set ($dictMethod = "getStrDictOptions")
#elseif ($javaType == "Boolean")
#set ($dictMethod = "getBoolDictOptions")
#end
#if ( $column.id == $subJoinColumn.id) ## 特殊：忽略主子表的 join 字段，不用填写
#elseif ($column.htmlType == "input" && !$column.primaryKey)## 忽略主键，不用在表单里
<el-form-item label="${comment}" prop="${javaField}">
<el-input v-model="formData.${javaField}" placeholder="请输入${comment}" />
</el-form-item>
#elseif($column.htmlType == "imageUpload")## 图片上传
<el-form-item label="${comment}" prop="${javaField}">
<UploadImg v-model="formData.${javaField}" />
</el-form-item>
#elseif($column.htmlType == "fileUpload")## 文件上传
<el-form-item label="${comment}" prop="${javaField}">
<UploadFile v-model="formData.${javaField}" />
</el-form-item>
#elseif($column.htmlType == "editor")## 文本编辑器
<el-form-item label="${comment}" prop="${javaField}">
<Editor v-model="formData.${javaField}" height="150px" />
</el-form-item>
#elseif($column.htmlType == "select")## 下拉框
<el-form-item label="${comment}" prop="${javaField}">
<el-select v-model="formData.${javaField}" placeholder="请选择${comment}">
#if ("" != $dictType)## 有数据字典
<el-option
v-for="dict in $dictMethod(DICT_TYPE.$dictType.toUpperCase())"
:key="dict.value"
:label="dict.label"
:value="dict.value"
/>
#else##没数据字典
<el-option label="请选择字典生成" value="" />
#end
</el-select>
</el-form-item>
#elseif($column.htmlType == "checkbox")## 多选框
<el-form-item label="${comment}" prop="${javaField}">
<el-checkbox-group v-model="formData.${javaField}">
#if ("" != $dictType)## 有数据字典
<el-checkbox
v-for="dict in $dictMethod(DICT_TYPE.$dictType.toUpperCase())"
:key="dict.value"
:label="dict.value"
>
{{ dict.label }}
</el-checkbox>
#else##没数据字典
<el-checkbox>请选择字典生成</el-checkbox>
#end
</el-checkbox-group>
</el-form-item>
#elseif($column.htmlType == "radio")## 单选框
<el-form-item label="${comment}" prop="${javaField}">
<el-radio-group v-model="formData.${javaField}">
#if ("" != $dictType)## 有数据字典
<el-radio
v-for="dict in $dictMethod(DICT_TYPE.$dictType.toUpperCase())"
:key="dict.value"
:label="dict.value"
>
{{ dict.label }}
</el-radio>
#else##没数据字典
<el-radio label="1">请选择字典生成</el-radio>
#end
</el-radio-group>
</el-form-item>
#elseif($column.htmlType == "datetime")## 时间框
<el-form-item label="${comment}" prop="${javaField}">
<el-date-picker
v-model="formData.${javaField}"
type="date"
value-format="x"
placeholder="选择${comment}"
/>
</el-form-item>
#elseif($column.htmlType == "textarea")## 文本框
<el-form-item label="${comment}" prop="${javaField}">
<el-input v-model="formData.${javaField}" type="textarea" placeholder="请输入${comment}" />
</el-form-item>
#end
#end
#end
</el-form>
#end #end
</div>
</template> </template>
<script setup lang="ts">
import { getIntDictOptions, getStrDictOptions, getBoolDictOptions, DICT_TYPE } from '@/utils/dict'
import * as ${simpleClassName}Api from '@/api/${table.moduleName}/${table.businessName}'
const props = defineProps<{ <script>
${subJoinColumn.javaField}: undefined // ${subJoinColumn.columnComment}（主表的关联字段） import * as ${simpleClassName}Api from '@/api/${table.moduleName}/${table.businessName}'
}>() #if ($hasImageUploadColumn)
const formLoading = ref(false) // 表单的加载中 import ImageUpload from '@/components/ImageUpload';
const formData = ref([])
const formRules = reactive({
#foreach ($column in $subColumns)
#if (($column.createOperation || $column.updateOperation) && !$column.nullable && !${column.primaryKey})## 创建或者更新操作 && 要求非空 && 非主键
#set($comment=$column.columnComment)
$column.javaField: [{ required: true, message: '${comment}不能为空', trigger: #if($column.htmlType == 'select')'change'#else'blur'#end }],
#end
#end
})
const formRef = ref() // 表单 Ref
/** 监听主表的关联字段的变化，加载对应的子表数据 */
watch(
() => props.${subJoinColumn.javaField},
async (val) => {
// 1. 重置表单
#if ( $subTable.subJoinMany )
formData.value = []
#else
formData.value = {
#foreach ($column in $subColumns)
#if ($column.createOperation || $column.updateOperation)
#if ($column.htmlType == "checkbox")
$column.javaField: [],
#else
$column.javaField: undefined,
#end
#end #end
#end #if ($hasFileUploadColumn)
} import FileUpload from '@/components/FileUpload';
#end
// 2. val 非空，则加载数据
if (!val) {
return;
}
try {
formLoading.value = true
#if ( $subTable.subJoinMany )
formData.value = await ${simpleClassName}Api.get${subSimpleClassName}ListBy${SubJoinColumnName}(val)
#else
const data = await ${simpleClassName}Api.get${subSimpleClassName}By${SubJoinColumnName}(val)
if (!data) {
return
}
formData.value = data
#end
} finally {
formLoading.value = false
}
},
{ immediate: true }
)
#if ( $subTable.subJoinMany )
/** 新增按钮操作 */
const handleAdd = () => {
const row = {
#foreach ($column in $subColumns)
#if ($column.createOperation || $column.updateOperation)
#if ($column.htmlType == "checkbox")
$column.javaField: [],
#else
$column.javaField: undefined,
#end #end
#end #if ($hasEditorColumn)
#end import Editor from '@/components/Editor';
} #end
row.${subJoinColumn.javaField} = props.${subJoinColumn.javaField} export default {
formData.value.push(row) name: "${simpleClassName}",
} components: {
#if ($hasImageUploadColumn)
/** 删除按钮操作 */ ImageUpload,
const handleDelete = (index) => { #end
formData.value.splice(index, 1) #if ($hasFileUploadColumn)
} FileUpload,
#end #end
#if ($hasEditorColumn)
Editor,
#end
},
data() {
return {
// 弹出层标题
dialogTitle: "",
// 是否显示弹出层
dialogVisible: false,
// 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
formLoading: false,
// 表单参数
formData: {
#foreach ($column in $columns)
#if ($column.createOperation || $column.updateOperation)
#if ($column.htmlType == "checkbox")
$column.javaField: [],
#else
$column.javaField: undefined,
#end
#end
#end
},
// 表单校验
formRules: {
#foreach ($column in $columns)
#if (($column.createOperation || $column.updateOperation) && !$column.nullable && !${column.primaryKey})## 创建或者更新操作 && 要求非空 && 非主键
#set($comment=$column.columnComment)
$column.javaField: [{ required: true, message: "${comment}不能为空", trigger: #if($column.htmlType == "select")"change"#else"blur"#end }],
#end
#end
},
};
},
props:{
${subJoinColumn.javaField}: undefined // ${subJoinColumn.columnComment}（主表的关联字段）
},
methods: {
#if ( $subTable.subJoinMany )
/** 表单校验 */ /** 新增按钮操作 */
const validate = () => { handleAdd(){
return formRef.value.validate() const row = {
} #foreach ($column in $subColumns)
#if ($column.createOperation || $column.updateOperation)
#if ($column.htmlType == "checkbox")
$column.javaField: [],
#else
$column.javaField: undefined,
#end
#end
#end
}
row.${subJoinColumn.javaField} = this.${subJoinColumn.javaField}
this.formData.push(row)
},
/** 表单值 */ /** 删除按钮操作 */
const getData = () => { handleDelete(index) {
return formData.value this.formData.splice(index, 1)
} },
#end
/** 表单值 */
getData() {
return this.formData
},
/** 表单校验 */
validate() {
defineExpose({ validate, getData }) }
}
};
</script> </script>

2
yudao-module-infra/yudao-module-infra-biz/src/main/resources/codegen/vue/views/components/list_sub_inner.vue.vm
Unescape Escape View File

@ -1,4 +1,4 @@
## 子表的 erp 和 inner 使用相似的 list 列表，差异主要两点： ## 子表的 erp 和 inner 使用相似的 list 列表，差异主要两点：
## 1）inner 使用 list 不分页，erp 使用 page 分页 ## 1）inner 使用 list 不分页，erp 使用 page 分页
## 2）erp 支持单个子表的新增、修改、删除，inner 不支持 ## 2）erp 支持单个子表的新增、修改、删除，inner 不支持
#parse("codegen/vue3/views/components/list_sub_erp.vue.vm") #parse("codegen/vue/views/components/list_sub_erp.vue.vm")
Write Preview
Loading…
Cancel
Save