huangge1199/vue-pro
1
0
Fork 0
mirror of https://gitee.com/huangge1199_admin/vue-pro.git synced 2024-11-22 23:31:52 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
puhui999 2023-11-17 18:18:27 +08:00
parent df69fecbb4
commit a88c93fc60
4 changed files with 431 additions and 543 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

400
yudao-module-infra/yudao-module-infra-biz/src/main/resources/codegen/vue/views/components/form_sub_erp.vue.vm
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>
#end #elseif($column.htmlType == "fileUpload")## 文件上传
#if ($column.htmlType == "input" && !$column.primaryKey)## 忽略主键，不用在表单里 TODO 芋艿：这里要忽略下 join 字段； #set ($hasFileUploadColumn = true)
<el-form-item label="${comment}" prop="${javaField}"> <el-form-item label="${comment}">
<el-input v-model="formData.${javaField}" placeholder="请输入${comment}" /> <FileUpload v-model="form.${javaField}"/>
</el-form-item> </el-form-item>
#elseif($column.htmlType == "imageUpload")## 图片上传 #elseif($column.htmlType == "editor")## 文本编辑器
<el-form-item label="${comment}" prop="${javaField}"> #set ($hasEditorColumn = true)
<UploadImg v-model="formData.${javaField}" /> <el-form-item label="${comment}">
</el-form-item> <editor v-model="form.${javaField}" :min-height="192"/>
#elseif($column.htmlType == "fileUpload")## 文件上传 </el-form-item>
<el-form-item label="${comment}" prop="${javaField}"> #elseif($column.htmlType == "select")## 下拉框
<UploadFile v-model="formData.${javaField}" /> <el-form-item label="${comment}" prop="${javaField}">
</el-form-item> <el-select v-model="form.${javaField}" placeholder="请选择${comment}">
#elseif($column.htmlType == "editor")## 文本编辑器 #if ("" != $dictType)## 有数据字典
<el-form-item label="${comment}" prop="${javaField}"> <el-option v-for="dict in this.getDictDatas(DICT_TYPE.$dictType.toUpperCase())"
<Editor v-model="formData.${javaField}" height="150px" /> :key="dict.value" :label="dict.label" #if ($column.javaType == "Integer" || $column.javaType == "Long"):value="parseInt(dict.value)"#else:value="dict.value"#end />
</el-form-item> #else##没数据字典
#elseif($column.htmlType == "select")## 下拉框 <el-option label="请选择字典生成" value="" />
<el-form-item label="${comment}" prop="${javaField}"> #end
<el-select v-model="formData.${javaField}" placeholder="请选择${comment}"> </el-select>
#if ("" != $dictType)## 有数据字典 </el-form-item>
<el-option #elseif($column.htmlType == "checkbox")## 多选框
v-for="dict in $dictMethod(DICT_TYPE.$dictType.toUpperCase())" <el-form-item label="${comment}" prop="${javaField}">
:key="dict.value" <el-checkbox-group v-model="form.${javaField}">
:label="dict.label" #if ("" != $dictType)## 有数据字典
:value="dict.value" <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##没数据字典 #else##没数据字典
<el-option label="请选择字典生成" value="" /> <el-checkbox>请选择字典生成</el-checkbox>
#end #end
</el-select> </el-checkbox-group>
</el-form-item> </el-form-item>
#elseif($column.htmlType == "checkbox")## 多选框 #elseif($column.htmlType == "radio")## 单选框
<el-form-item label="${comment}" prop="${javaField}"> <el-form-item label="${comment}" prop="${javaField}">
<el-checkbox-group v-model="formData.${javaField}"> <el-radio-group v-model="form.${javaField}">
#if ("" != $dictType)## 有数据字典 #if ("" != $dictType)## 有数据字典
<el-checkbox <el-radio v-for="dict in this.getDictDatas(DICT_TYPE.$dictType.toUpperCase())"
v-for="dict in $dictMethod(DICT_TYPE.$dictType.toUpperCase())" :key="dict.value" #if($column.javaType == "Integer" || $column.javaType == "Long"):label="parseInt(dict.value)"
:key="dict.value" #else:label="dict.value"#end>{{dict.label}}</el-radio>
:label="dict.value" #else##没数据字典
> <el-radio label="1">请选择字典生成</el-radio>
{{ dict.label }} #end
</el-checkbox> </el-radio-group>
#else##没数据字典 </el-form-item>
<el-checkbox>请选择字典生成</el-checkbox> #elseif($column.htmlType == "datetime")## 时间框
#end <el-form-item label="${comment}" prop="${javaField}">
</el-checkbox-group> <el-date-picker clearable v-model="form.${javaField}" type="date" value-format="timestamp" placeholder="选择${comment}" />
</el-form-item> </el-form-item>
#elseif($column.htmlType == "radio")## 单选框 #elseif($column.htmlType == "textarea")## 文本框
<el-form-item label="${comment}" prop="${javaField}"> <el-form-item label="${comment}" prop="${javaField}">
<el-radio-group v-model="formData.${javaField}"> <el-input v-model="form.${javaField}" type="textarea" placeholder="请输入内容" />
#if ("" != $dictType)## 有数据字典 </el-form-item>
<el-radio #end
v-for="dict in $dictMethod(DICT_TYPE.$dictType.toUpperCase())" #end
:key="dict.value" #end
:label="dict.value" </el-form>
> <div slot="footer" class="dialog-footer">
{{ dict.label }} <el-button type="primary" @click="submitForm" :disabled="formLoading">确 定</el-button>
</el-radio> <el-button @click="dialogVisible = false">取 消</el-button>
#else##没数据字典 </div>
<el-radio label="1">请选择字典生成</el-radio> </el-dialog>
#end </div>
</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>
<template v-slot:footer>
<el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
<el-button @click="dialogVisible = false">取 消</el-button>
</template>
</Dialog>
</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 { t } = useI18n() // 国际化 <script>
const message = useMessage() // 消息弹窗 import * as ${simpleClassName}Api from '@/api/${table.moduleName}/${table.businessName}'
#if ($hasImageUploadColumn)
const dialogVisible = ref(false) // 弹窗的是否展示 import ImageUpload from '@/components/ImageUpload';
const dialogTitle = ref('') // 弹窗的标题
const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
const formType = ref('') // 表单的类型：create - 新增；update - 修改
const formData = ref({
#foreach ($column in $subColumns)
#if ($column.createOperation || $column.updateOperation)
#if ($column.htmlType == "checkbox")
$column.javaField: [],
#else
$column.javaField: undefined,
#end #end
#end #if ($hasFileUploadColumn)
#end import FileUpload from '@/components/FileUpload';
})
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
/** 打开弹窗 */
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 #if ($hasEditorColumn)
#end import Editor from '@/components/Editor';
} #end
formRef.value?.resetFields() export default {
} name: "${simpleClassName}",
</script> components: {
#if ($hasImageUploadColumn)
ImageUpload,
#end
#if ($hasFileUploadColumn)
FileUpload,
#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
},
};
},
methods: {
/** 表单重置 */
reset() {
this.formData = {
#foreach ($column in $columns)
#if ($column.createOperation || $column.updateOperation)
#if ($column.htmlType == "checkbox")
$column.javaField: [],
#else
$column.javaField: undefined,
#end
#end
#end
};
this.resetForm("formRef");
},
/** 打开弹窗 */
open(id) {
this.dialogVisible = true;
this.reset();
const that = this;
// 修改时，设置数据
if (id) {
this.formLoading = true;
try {
${simpleClassName}Api.get${subSimpleClassName}(id).then(res=>{
that.formData = res.data;
that.title = "修改${table.classComment}";
})
} finally {
this.formLoading = false;
}
}
this.title = "新增${table.classComment}";
},
/** 提交按钮 */
submitForm() {
this.formLoading = true;
try {
let data = this.formData;
this.#[[$]]#refs["formRef"].validate(valid => {
if (!valid) {
return;
}
// 修改的提交
if (data.${primaryColumn.javaField}) {
${simpleClassName}Api.update${simpleClassName}(data).then(response => {
this.#[[$modal]]#.msgSuccess("修改成功");
this.dialogVisible = false;
this.#[[$]]#emit('success');
});
return;
}
// 添加的提交
${simpleClassName}Api.create${simpleClassName}(data).then(response => {
this.#[[$modal]]#.msgSuccess("新增成功");
this.dialogVisible = false;
this.#[[$]]#emit('success');
});
});
}finally {
this.formLoading = false
}
}
}
};
</script>

2
yudao-module-infra/yudao-module-infra-biz/src/main/resources/codegen/vue/views/components/form_sub_inner.vue.vm
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")

570
yudao-module-infra/yudao-module-infra-biz/src/main/resources/codegen/vue/views/components/form_sub_normal.vue.vm
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([]) #end
const formRules = reactive({ #if ($hasFileUploadColumn)
#foreach ($column in $subColumns) import FileUpload from '@/components/FileUpload';
#if (($column.createOperation || $column.updateOperation) && !$column.nullable && !${column.primaryKey})## 创建或者更新操作 && 要求非空 && 非主键 #end
#set($comment=$column.columnComment) #if ($hasEditorColumn)
$column.javaField: [{ required: true, message: '${comment}不能为空', trigger: #if($column.htmlType == 'select')'change'#else'blur'#end }], import Editor from '@/components/Editor';
#end #end
#end export default {
}) name: "${simpleClassName}",
const formRef = ref() // 表单 Ref components: {
#if ($hasImageUploadColumn)
/** 监听主表的关联字段的变化，加载对应的子表数据 */ ImageUpload,
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 #if ($hasFileUploadColumn)
#end FileUpload,
} #end
#end #if ($hasEditorColumn)
// 2. val 非空，则加载数据 Editor,
if (!val) { #end
return; },
} data() {
try { return {
formLoading.value = true // 弹出层标题
#if ( $subTable.subJoinMany ) dialogTitle: "",
formData.value = await ${simpleClassName}Api.get${subSimpleClassName}ListBy${SubJoinColumnName}(val) // 是否显示弹出层
#else dialogVisible: false,
const data = await ${simpleClassName}Api.get${subSimpleClassName}By${SubJoinColumnName}(val) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
if (!data) { formLoading: false,
return // 表单参数
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 )
/** 新增按钮操作 */
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
}
row.${subJoinColumn.javaField} = this.${subJoinColumn.javaField}
this.formData.push(row)
},
/** 删除按钮操作 */
handleDelete(index) {
this.formData.splice(index, 1)
},
#end
/** 表单值 */
getData() {
return this.formData
},
/** 表单校验 */
validate() {
} }
formData.value = data
#end
} finally {
formLoading.value = false
} }
}, };
{ immediate: true } </script>
)
#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
}
row.${subJoinColumn.javaField} = props.${subJoinColumn.javaField}
formData.value.push(row)
}
/** 删除按钮操作 */
const handleDelete = (index) => {
formData.value.splice(index, 1)
}
#end
/** 表单校验 */
const validate = () => {
return formRef.value.validate()
}
/** 表单值 */
const getData = () => {
return formData.value
}
defineExpose({ validate, getData })
</script>

2
yudao-module-infra/yudao-module-infra-biz/src/main/resources/codegen/vue/views/components/list_sub_inner.vue.vm
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")