|
@@ -0,0 +1,226 @@
|
|
|
+#set ($subTable = $subTables.get($subIndex))##当前表
|
|
|
+#set ($subColumns = $subColumnsList.get($subIndex))##当前字段数组
|
|
|
+#set ($subJoinColumn = $subJoinColumns.get($subIndex))##当前 join 字段
|
|
|
+#set ($subSimpleClassName = $subSimpleClassNames.get($subIndex))
|
|
|
+#set ($subJoinColumn = $subJoinColumns.get($subIndex))##当前 join 字段
|
|
|
+#set ($SubJoinColumnName = $subJoinColumn.javaField.substring(0,1).toUpperCase() + ${subJoinColumn.javaField.substring(1)})##首字母大写
|
|
|
+<template>
|
|
|
+ <el-form
|
|
|
+ ref="formRef"
|
|
|
+ :model="formData"
|
|
|
+ :rules="formRules"
|
|
|
+ v-loading="formLoading"
|
|
|
+ label-width="0px"
|
|
|
+ :inline-message="true"
|
|
|
+ >
|
|
|
+ <el-table :data="formData" class="-mt-10px">
|
|
|
+ <el-table-column label="序号" type="index" width="100" />
|
|
|
+#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.htmlType == "input" && !$column.primaryKey)## 忽略主键,不用在表单里 TODO 芋艿:这里要忽略下 join 字段;
|
|
|
+ <el-table-column label="${comment}" width="150">
|
|
|
+ <template #default="{ row, $index }">
|
|
|
+ <el-form-item :prop="`${$index}.${javaField}`" :rules="formRules.${javaField}" class="mb-0px!">
|
|
|
+ <el-input v-model="row.${javaField}" placeholder="请输入${comment}" />
|
|
|
+ </el-form-item>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ #elseif($column.htmlType == "imageUpload")## 图片上传
|
|
|
+ <el-table-column label="${comment}" width="200">
|
|
|
+ <template #default="{ row, $index }">
|
|
|
+ <el-form-item :prop="`${$index}.${javaField}`" :rules="formRules.${javaField}" class="mb-0px!">
|
|
|
+ <UploadImg v-model="row.${javaField}" />
|
|
|
+ </el-form-item>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ #elseif($column.htmlType == "fileUpload")## 文件上传
|
|
|
+ <el-table-column label="${comment}" width="200">
|
|
|
+ <template #default="{ row, $index }">
|
|
|
+ <el-form-item :prop="`${$index}.${javaField}`" :rules="formRules.${javaField}" class="mb-0px!">
|
|
|
+ <UploadFile v-model="row.${javaField}" />
|
|
|
+ </el-form-item>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ #elseif($column.htmlType == "editor")## 文本编辑器
|
|
|
+ <el-table-column label="${comment}" width="400">
|
|
|
+ <template #default="{ row, $index }">
|
|
|
+ <el-form-item :prop="`${$index}.${javaField}`" :rules="formRules.${javaField}" class="mb-0px!">
|
|
|
+ <Editor v-model="row.${javaField}" height="150px" />
|
|
|
+ </el-form-item>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ #elseif($column.htmlType == "select")## 下拉框
|
|
|
+ <el-table-column label="${comment}" width="150">
|
|
|
+ <template #default="{ row, $index }">
|
|
|
+ <el-form-item :prop="`${$index}.${javaField}`" :rules="formRules.${javaField}" class="mb-0px!">
|
|
|
+ <el-select v-model="row.${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>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ #elseif($column.htmlType == "checkbox")## 多选框
|
|
|
+ <el-table-column label="${comment}" width="150">
|
|
|
+ <template #default="{ row, $index }">
|
|
|
+ <el-form-item :prop="`${$index}.${javaField}`" :rules="formRules.${javaField}" class="mb-0px!">
|
|
|
+ <el-checkbox-group v-model="row.${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>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ #elseif($column.htmlType == "radio")## 单选框
|
|
|
+ <el-table-column label="${comment}" width="150">
|
|
|
+ <template #default="{ row, $index }">
|
|
|
+ <el-form-item :prop="`${$index}.${javaField}`" :rules="formRules.${javaField}" class="mb-0px!">
|
|
|
+ <el-radio-group v-model="row.${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>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ #elseif($column.htmlType == "datetime")## 时间框
|
|
|
+ <el-table-column label="${comment}" width="150">
|
|
|
+ <template #default="{ row, $index }">
|
|
|
+ <el-form-item :prop="`${$index}.${javaField}`" :rules="formRules.${javaField}" class="mb-0px!">
|
|
|
+ <el-date-picker
|
|
|
+ v-model="row.${javaField}"
|
|
|
+ type="date"
|
|
|
+ value-format="x"
|
|
|
+ placeholder="选择${comment}"
|
|
|
+ />
|
|
|
+ </el-form-item>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ #elseif($column.htmlType == "textarea")## 文本框
|
|
|
+ <el-table-column label="${comment}" 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>
|
|
|
+ </el-form>
|
|
|
+ <el-row justify="center" class="mt-3">
|
|
|
+ <el-button @click="handleAdd" round>+ 添加${subTable.classComment}</el-button>
|
|
|
+ </el-row>
|
|
|
+</template>
|
|
|
+<script setup lang="ts">
|
|
|
+import { getIntDictOptions, getStrDictOptions, getBoolDictOptions, DICT_TYPE } from '@/utils/dict'
|
|
|
+import * as ${simpleClassName}Api from '@/api/${table.moduleName}/${classNameVar}'
|
|
|
+
|
|
|
+const props = defineProps<{
|
|
|
+ ${subJoinColumn.javaField}: undefined // ${subJoinColumn.columnComment}(主表的关联字段)
|
|
|
+}>()
|
|
|
+const formLoading = ref(false) // 表单的加载中
|
|
|
+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) => {
|
|
|
+ // 情况一:val 为空,说明是新增,则置空
|
|
|
+ if (!val) {
|
|
|
+ formData.value = []
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ // 情况二:val 非空,说明是修改,则加载数据
|
|
|
+ try {
|
|
|
+ formLoading.value = true
|
|
|
+ formData.value = await ${simpleClassName}Api.get${subSimpleClassName}ListBy${SubJoinColumnName}(val)
|
|
|
+ } finally {
|
|
|
+ formLoading.value = false
|
|
|
+ }
|
|
|
+ },
|
|
|
+ { immediate: true }
|
|
|
+)
|
|
|
+
|
|
|
+/** 新增按钮操作 */
|
|
|
+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)
|
|
|
+}
|
|
|
+
|
|
|
+/** 表单校验 */
|
|
|
+const validate = () => {
|
|
|
+ return formRef.value.validate()
|
|
|
+}
|
|
|
+
|
|
|
+/** 表单值 */
|
|
|
+const getData = () => {
|
|
|
+ return formData.value
|
|
|
+}
|
|
|
+
|
|
|
+defineExpose({ validate, getData })
|
|
|
+</script>
|