| 提交 | 用户 | 时间 | ||
| e7c126 | 1 | #set ($subTable = $subTables.get($subIndex))##当前表 |
| H | 2 | #set ($subColumns = $subColumnsList.get($subIndex))##当前字段数组 |
| 3 | #set ($subSimpleClassName = $subSimpleClassNames.get($subIndex)) | |
| 4 | #set ($subJoinColumn = $subJoinColumns.get($subIndex))##当前 join 字段 | |
| 5 | <template> | |
| 6 | <div class="app-container"> | |
| 7 | <!-- 对话框(添加 / 修改) --> | |
| 8 | <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="45%" v-dialogDrag append-to-body> | |
| 9 | <el-form ref="formRef" :model="formData" :rules="formRules" v-loading="formLoading" label-width="100px"> | |
| 10 | #foreach($column in $subColumns) | |
| 11 | #if ($column.createOperation || $column.updateOperation) | |
| 12 | #set ($dictType = $column.dictType) | |
| 13 | #set ($javaField = $column.javaField) | |
| 14 | #set ($javaType = $column.javaType) | |
| 15 | #set ($AttrName = $column.javaField.substring(0,1).toUpperCase() + ${column.javaField.substring(1)}) | |
| 16 | #set ($comment = $column.columnComment) | |
| 17 | #if ( $column.id == $subJoinColumn.id) ## 特殊：忽略主子表的 join 字段，不用填写 | |
| 18 | #elseif ($column.htmlType == "input" && !$column.primaryKey)## 忽略主键，不用在表单里 | |
| 19 | <el-form-item label="${comment}" prop="${javaField}"> | |
| 20 | <el-input v-model="formData.${javaField}" placeholder="请输入${comment}" /> | |
| 21 | </el-form-item> | |
| 22 | #elseif($column.htmlType == "imageUpload")## 图片上传 | |
| 23 | #set ($hasImageUploadColumn = true) | |
| 24 | <el-form-item label="${comment}" prop="${javaField}"> | |
| 25 | <ImageUpload v-model="formData.${javaField}"/> | |
| 26 | </el-form-item> | |
| 27 | #elseif($column.htmlType == "fileUpload")## 文件上传 | |
| 28 | #set ($hasFileUploadColumn = true) | |
| 29 | <el-form-item label="${comment}" prop="${javaField}"> | |
| 30 | <FileUpload v-model="formData.${javaField}"/> | |
| 31 | </el-form-item> | |
| 32 | #elseif($column.htmlType == "editor")## 文本编辑器 | |
| 33 | #set ($hasEditorColumn = true) | |
| 34 | <el-form-item label="${comment}" prop="${javaField}"> | |
| 35 | <editor v-model="formData.${javaField}" :min-height="192"/> | |
| 36 | </el-form-item> | |
| 37 | #elseif($column.htmlType == "select")## 下拉框 | |
| 38 | <el-form-item label="${comment}" prop="${javaField}"> | |
| 39 | <el-select v-model="formData.${javaField}" placeholder="请选择${comment}"> | |
| 40 | #if ("" != $dictType)## 有数据字典 | |
| 41 | <el-option v-for="dict in this.getDictDatas(DICT_TYPE.$dictType.toUpperCase())" | |
| 42 | :key="dict.value" :label="dict.label" #if ($column.javaType == "Integer" || $column.javaType == "Long"):value="parseInt(dict.value)"#else:value="dict.value"#end /> | |
| 43 | #else##没数据字典 | |
| 44 | <el-option label="请选择字典生成" value="" /> | |
| 45 | #end | |
| 46 | </el-select> | |
| 47 | </el-form-item> | |
| 48 | #elseif($column.htmlType == "checkbox")## 多选框 | |
| 49 | <el-form-item label="${comment}" prop="${javaField}"> | |
| 50 | <el-checkbox-group v-model="formData.${javaField}"> | |
| 51 | #if ("" != $dictType)## 有数据字典 | |
| 52 | <el-checkbox v-for="dict in this.getDictDatas(DICT_TYPE.$dictType.toUpperCase())" | |
| 53 | :key="dict.value" #if($column.javaType == "Integer" || $column.javaType == "Long"):label="parseInt(dict.value)"#else:label="dict.value"#end>{{dict.label}}</el-checkbox> | |
| 54 | #else##没数据字典 | |
| 55 | <el-checkbox>请选择字典生成</el-checkbox> | |
| 56 | #end | |
| 57 | </el-checkbox-group> | |
| 58 | </el-form-item> | |
| 59 | #elseif($column.htmlType == "radio")## 单选框 | |
| 60 | <el-form-item label="${comment}" prop="${javaField}"> | |
| 61 | <el-radio-group v-model="formData.${javaField}"> | |
| 62 | #if ("" != $dictType)## 有数据字典 | |
| 63 | <el-radio v-for="dict in this.getDictDatas(DICT_TYPE.$dictType.toUpperCase())" | |
| 64 | :key="dict.value" #if($column.javaType == "Integer" || $column.javaType == "Long"):label="parseInt(dict.value)" | |
| 65 | #else:label="dict.value"#end>{{dict.label}}</el-radio> | |
| 66 | #else##没数据字典 | |
| 67 | <el-radio label="1">请选择字典生成</el-radio> | |
| 68 | #end | |
| 69 | </el-radio-group> | |
| 70 | </el-form-item> | |
| 71 | #elseif($column.htmlType == "datetime")## 时间框 | |
| 72 | <el-form-item label="${comment}" prop="${javaField}"> | |
| 73 | <el-date-picker clearable v-model="formData.${javaField}" type="date" value-format="timestamp" placeholder="选择${comment}" /> | |
| 74 | </el-form-item> | |
| 75 | #elseif($column.htmlType == "textarea")## 文本框 | |
| 76 | <el-form-item label="${comment}" prop="${javaField}"> | |
| 77 | <el-input v-model="formData.${javaField}" type="textarea" placeholder="请输入内容" /> | |
| 78 | </el-form-item> | |
| 79 | #end | |
| 80 | #end | |
| 81 | #end | |
| 82 | </el-form> | |
| 83 | <div slot="footer" class="dialog-footer"> | |
| 84 | <el-button type="primary" @click="submitForm" :disabled="formLoading">确 定</el-button> | |
| 85 | <el-button @click="dialogVisible = false">取 消</el-button> | |
| 86 | </div> | |
| 87 | </el-dialog> | |
| 88 | </div> | |
| 89 | </template> | |
| 90 | ||
| 91 | <script> | |
| 92 | import * as ${simpleClassName}Api from '@/api/${table.moduleName}/${table.businessName}'; | |
| 93 | #if ($hasImageUploadColumn) | |
| 94 | import ImageUpload from '@/components/ImageUpload'; | |
| 95 | #end | |
| 96 | #if ($hasFileUploadColumn) | |
| 97 | import FileUpload from '@/components/FileUpload'; | |
| 98 | #end | |
| 99 | #if ($hasEditorColumn) | |
| 100 | import Editor from '@/components/Editor'; | |
| 101 | #end | |
| 102 | export default { | |
| 103 | name: "${subSimpleClassName}Form", | |
| 104 | components: { | |
| 105 | #if ($hasImageUploadColumn) | |
| 106 | ImageUpload, | |
| 107 | #end | |
| 108 | #if ($hasFileUploadColumn) | |
| 109 | FileUpload, | |
| 110 | #end | |
| 111 | #if ($hasEditorColumn) | |
| 112 | Editor, | |
| 113 | #end | |
| 114 | }, | |
| 115 | data() { | |
| 116 | return { | |
| 117 | // 弹出层标题 | |
| 118 | dialogTitle: "", | |
| 119 | // 是否显示弹出层 | |
| 120 | dialogVisible: false, | |
| 121 | // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用 | |
| 122 | formLoading: false, | |
| 123 | // 表单参数 | |
| 124 | formData: { | |
| 125 | #foreach ($column in $subColumns) | |
| 126 | #if ($column.createOperation || $column.updateOperation) | |
| 127 | #if ($column.htmlType == "checkbox") | |
| 128 | $column.javaField: [], | |
| 129 | #else | |
| 130 | $column.javaField: undefined, | |
| 131 | #end | |
| 132 | #end | |
| 133 | #end | |
| 134 | }, | |
| 135 | // 表单校验 | |
| 136 | formRules: { | |
| 137 | #foreach ($column in $subColumns) | |
| 138 | #if (($column.createOperation || $column.updateOperation) && !$column.nullable && !${column.primaryKey})## 创建或者更新操作 && 要求非空 && 非主键 | |
| 139 | #set($comment=$column.columnComment) | |
| 140 | $column.javaField: [{ required: true, message: "${comment}不能为空", trigger: #if($column.htmlType == "select")"change"#else"blur"#end }], | |
| 141 | #end | |
| 142 | #end | |
| 143 | }, | |
| 144 | }; | |
| 145 | }, | |
| 146 | methods: { | |
| 147 | /** 打开弹窗 */ | |
| 148 | async open(id, ${subJoinColumn.javaField}) { | |
| 149 | this.dialogVisible = true; | |
| 150 | this.reset(); | |
| 151 | this.formData.${subJoinColumn.javaField} = ${subJoinColumn.javaField}; | |
| 152 | // 修改时，设置数据 | |
| 153 | if (id) { | |
| 154 | this.formLoading = true; | |
| 155 | try { | |
| 156 | const res = await ${simpleClassName}Api.get${subSimpleClassName}(id); | |
| 157 | this.formData = res.data; | |
| 158 | this.dialogTitle = "修改${subTable.classComment}"; | |
| 159 | } finally { | |
| 160 | this.formLoading = false; | |
| 161 | } | |
| 162 | } | |
| 163 | this.dialogTitle = "新增${subTable.classComment}"; | |
| 164 | }, | |
| 165 | /** 提交按钮 */ | |
| 166 | async submitForm() { | |
| 167 | await this.#[[$]]#refs["formRef"].validate(); | |
| 168 | this.formLoading = true; | |
| 169 | try { | |
| 170 | const data = this.formData; | |
| 171 | // 修改的提交 | |
| 172 | if (data.${primaryColumn.javaField}) { | |
| 173 | await ${simpleClassName}Api.update${subSimpleClassName}(data); | |
| 174 | this.#[[$modal]]#.msgSuccess("修改成功"); | |
| 175 | this.dialogVisible = false; | |
| 176 | this.#[[$]]#emit('success'); | |
| 177 | return; | |
| 178 | } | |
| 179 | // 添加的提交 | |
| 180 | await ${simpleClassName}Api.create${subSimpleClassName}(data); | |
| 181 | this.#[[$modal]]#.msgSuccess("新增成功"); | |
| 182 | this.dialogVisible = false; | |
| 183 | this.#[[$]]#emit('success'); | |
| 184 | }finally { | |
| 185 | this.formLoading = false; | |
| 186 | } | |
| 187 | }, | |
| 188 | /** 表单重置 */ | |
| 189 | reset() { | |
| 190 | this.formData = { | |
| 191 | #foreach ($column in $subColumns) | |
| 192 | #if ($column.createOperation || $column.updateOperation) | |
| 193 | #if ($column.htmlType == "checkbox") | |
| 194 | $column.javaField: [], | |
| 195 | #else | |
| 196 | $column.javaField: undefined, | |
| 197 | #end | |
| 198 | #end | |
| 199 | #end | |
| 200 | }; | |
| 201 | this.resetForm("formRef"); | |
| 202 | }, | |
| 203 | } | |
| 204 | }; | |
| 205 | </script> | |
