| 提交 | 用户 | 时间 | ||
| e7c126 | 1 | <template> |
| H | 2 | <div class="app-container"> |
| 3 | <!-- 对话框(添加 / 修改) --> | |
| 4 | <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="45%" v-dialogDrag append-to-body> | |
| 5 | <el-form ref="formRef" :model="formData" :rules="formRules" v-loading="formLoading" label-width="100px"> | |
| 6 | #foreach($column in $columns) | |
| 7 | #if ($column.createOperation || $column.updateOperation) | |
| 8 | #set ($dictType = $column.dictType) | |
| 9 | #set ($javaField = $column.javaField) | |
| 10 | #set ($AttrName = $column.javaField.substring(0,1).toUpperCase() + ${column.javaField.substring(1)}) | |
| 11 | #set ($comment = $column.columnComment) | |
| 12 | #if ( $table.templateType == 2 && $column.id == $treeParentColumn.id ) | |
| 13 | <el-form-item label="${comment}" prop="${javaField}"> | |
| 14 | <TreeSelect | |
| 15 | v-model="formData.${javaField}" | |
| 16 | :options="${classNameVar}Tree" | |
| 17 | :normalizer="normalizer" | |
| 18 | placeholder="请选择${comment}" | |
| 19 | /> | |
| 20 | </el-form-item> | |
| 21 | #elseif ($column.htmlType == "input" && !$column.primaryKey)## 忽略主键，不用在表单里 | |
| 22 | <el-form-item label="${comment}" prop="${javaField}"> | |
| 23 | <el-input v-model="formData.${javaField}" placeholder="请输入${comment}" /> | |
| 24 | </el-form-item> | |
| 25 | #elseif($column.htmlType == "imageUpload")## 图片上传 | |
| 26 | #set ($hasImageUploadColumn = true) | |
| 27 | <el-form-item label="${comment}"> | |
| 28 | <ImageUpload v-model="formData.${javaField}"/> | |
| 29 | </el-form-item> | |
| 30 | #elseif($column.htmlType == "fileUpload")## 文件上传 | |
| 31 | #set ($hasFileUploadColumn = true) | |
| 32 | <el-form-item label="${comment}"> | |
| 33 | <FileUpload v-model="formData.${javaField}"/> | |
| 34 | </el-form-item> | |
| 35 | #elseif($column.htmlType == "editor")## 文本编辑器 | |
| 36 | #set ($hasEditorColumn = true) | |
| 37 | <el-form-item label="${comment}"> | |
| 38 | <Editor v-model="formData.${javaField}" :min-height="192"/> | |
| 39 | </el-form-item> | |
| 40 | #elseif($column.htmlType == "select")## 下拉框 | |
| 41 | <el-form-item label="${comment}" prop="${javaField}"> | |
| 42 | <el-select v-model="formData.${javaField}" placeholder="请选择${comment}"> | |
| 43 | #if ("" != $dictType)## 有数据字典 | |
| 44 | <el-option v-for="dict in this.getDictDatas(DICT_TYPE.$dictType.toUpperCase())" | |
| 45 | :key="dict.value" :label="dict.label" #if ($column.javaType == "Integer" || $column.javaType == "Long"):value="parseInt(dict.value)"#else:value="dict.value"#end /> | |
| 46 | #else##没数据字典 | |
| 47 | <el-option label="请选择字典生成" value="" /> | |
| 48 | #end | |
| 49 | </el-select> | |
| 50 | </el-form-item> | |
| 51 | #elseif($column.htmlType == "checkbox")## 多选框 | |
| 52 | <el-form-item label="${comment}" prop="${javaField}"> | |
| 53 | <el-checkbox-group v-model="formData.${javaField}"> | |
| 54 | #if ("" != $dictType)## 有数据字典 | |
| 55 | <el-checkbox v-for="dict in this.getDictDatas(DICT_TYPE.$dictType.toUpperCase())" | |
| 56 | :key="dict.value" #if($column.javaType == "Integer" || $column.javaType == "Long"):label="parseInt(dict.value)"#else:label="dict.value"#end>{{dict.label}}</el-checkbox> | |
| 57 | #else##没数据字典 | |
| 58 | <el-checkbox>请选择字典生成</el-checkbox> | |
| 59 | #end | |
| 60 | </el-checkbox-group> | |
| 61 | </el-form-item> | |
| 62 | #elseif($column.htmlType == "radio")## 单选框 | |
| 63 | <el-form-item label="${comment}" prop="${javaField}"> | |
| 64 | <el-radio-group v-model="formData.${javaField}"> | |
| 65 | #if ("" != $dictType)## 有数据字典 | |
| 66 | <el-radio v-for="dict in this.getDictDatas(DICT_TYPE.$dictType.toUpperCase())" | |
| 67 | :key="dict.value" #if($column.javaType == "Integer" || $column.javaType == "Long"):label="parseInt(dict.value)" | |
| 68 | #else:label="dict.value"#end>{{dict.label}}</el-radio> | |
| 69 | #else##没数据字典 | |
| 70 | <el-radio label="1">请选择字典生成</el-radio> | |
| 71 | #end | |
| 72 | </el-radio-group> | |
| 73 | </el-form-item> | |
| 74 | #elseif($column.htmlType == "datetime")## 时间框 | |
| 75 | <el-form-item label="${comment}" prop="${javaField}"> | |
| 76 | <el-date-picker clearable v-model="formData.${javaField}" type="date" value-format="timestamp" placeholder="选择${comment}" /> | |
| 77 | </el-form-item> | |
| 78 | #elseif($column.htmlType == "textarea")## 文本框 | |
| 79 | <el-form-item label="${comment}" prop="${javaField}"> | |
| 80 | <el-input v-model="formData.${javaField}" type="textarea" placeholder="请输入内容" /> | |
| 81 | </el-form-item> | |
| 82 | #end | |
| 83 | #end | |
| 84 | #end | |
| 85 | </el-form> | |
| 86 | ## 特殊：主子表专属逻辑 | |
| 87 | #if ( $table.templateType == 10 || $table.templateType == 12 ) | |
| 88 | <!-- 子表的表单 --> | |
| 89 | <el-tabs v-model="subTabsName"> | |
| 90 | #foreach ($subTable in $subTables) | |
| 91 | #set ($index = $foreach.count - 1) | |
| 92 | #set ($subClassNameVar = $subClassNameVars.get($index)) | |
| 93 | #set ($subSimpleClassName = $subSimpleClassNames.get($index)) | |
| 94 | #set ($subJoinColumn_strikeCase = $subJoinColumn_strikeCases.get($index)) | |
| 95 | <el-tab-pane label="${subTable.classComment}" name="$subClassNameVar"> | |
| 96 | <${subSimpleClassName}Form ref="${subClassNameVar}FormRef" :${subJoinColumn_strikeCase}="formData.id" /> | |
| 97 | </el-tab-pane> | |
| 98 | #end | |
| 99 | </el-tabs> | |
| 100 | #end | |
| 101 | <div slot="footer" class="dialog-footer"> | |
| 102 | <el-button type="primary" @click="submitForm" :disabled="formLoading">确 定</el-button> | |
| 103 | <el-button @click="dialogVisible = false">取 消</el-button> | |
| 104 | </div> | |
| 105 | </el-dialog> | |
| 106 | </div> | |
| 107 | </template> | |
| 108 | ||
| 109 | <script> | |
| 110 | import * as ${simpleClassName}Api from '@/api/${table.moduleName}/${table.businessName}'; | |
| 111 | #if ($hasImageUploadColumn) | |
| 112 | import ImageUpload from '@/components/ImageUpload'; | |
| 113 | #end | |
| 114 | #if ($hasFileUploadColumn) | |
| 115 | import FileUpload from '@/components/FileUpload'; | |
| 116 | #end | |
| 117 | #if ($hasEditorColumn) | |
| 118 | import Editor from '@/components/Editor'; | |
| 119 | #end | |
| 120 | ## 特殊：树表专属逻辑 | |
| 121 | #if ( $table.templateType == 2 ) | |
| 122 | import TreeSelect from "@riophae/vue-treeselect"; | |
| 123 | import "@riophae/vue-treeselect/dist/vue-treeselect.css"; | |
| 124 | #end | |
| 125 | ## 特殊：主子表专属逻辑 | |
| 126 | #if ( $table.templateType == 10 || $table.templateType == 12 ) | |
| 127 | #foreach ($subSimpleClassName in $subSimpleClassNames) | |
| 128 | import ${subSimpleClassName}Form from './components/${subSimpleClassName}Form.vue' | |
| 129 | #end | |
| 130 | #end | |
| 131 | export default { | |
| 132 | name: "${simpleClassName}Form", | |
| 133 | components: { | |
| 134 | #if ($hasImageUploadColumn) | |
| 135 | ImageUpload, | |
| 136 | #end | |
| 137 | #if ($hasFileUploadColumn) | |
| 138 | FileUpload, | |
| 139 | #end | |
| 140 | #if ($hasEditorColumn) | |
| 141 | Editor, | |
| 142 | #end | |
| 143 | ## 特殊：树表专属逻辑 | |
| 144 | #if ( $table.templateType == 2 ) | |
| 145 | TreeSelect, | |
| 146 | #end | |
| 147 | ## 特殊：主子表专属逻辑 | |
| 148 | #if ( $table.templateType == 10 || $table.templateType == 12 ) | |
| 149 | #foreach ($subSimpleClassName in $subSimpleClassNames) | |
| 150 | ${subSimpleClassName}Form, | |
| 151 | #end | |
| 152 | #end | |
| 153 | }, | |
| 154 | data() { | |
| 155 | return { | |
| 156 | // 弹出层标题 | |
| 157 | dialogTitle: "", | |
| 158 | // 是否显示弹出层 | |
| 159 | dialogVisible: false, | |
| 160 | // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用 | |
| 161 | formLoading: false, | |
| 162 | // 表单参数 | |
| 163 | formData: { | |
| 164 | #foreach ($column in $columns) | |
| 165 | #if ($column.createOperation || $column.updateOperation) | |
| 166 | #if ($column.htmlType == "checkbox") | |
| 167 | $column.javaField: [], | |
| 168 | #else | |
| 169 | $column.javaField: undefined, | |
| 170 | #end | |
| 171 | #end | |
| 172 | #end | |
| 173 | }, | |
| 174 | // 表单校验 | |
| 175 | formRules: { | |
| 176 | #foreach ($column in $columns) | |
| 177 | #if (($column.createOperation || $column.updateOperation) && !$column.nullable && !${column.primaryKey})## 创建或者更新操作 && 要求非空 && 非主键 | |
| 178 | #set($comment=$column.columnComment) | |
| 179 | $column.javaField: [{ required: true, message: '${comment}不能为空', trigger: #if($column.htmlType == 'select')'change'#else'blur'#end }], | |
| 180 | #end | |
| 181 | #end | |
| 182 | }, | |
| 183 | ## 特殊：树表专属逻辑 | |
| 184 | #if ( $table.templateType == 2 ) | |
| 185 | ${classNameVar}Tree: [], // 树形结构 | |
| 186 | #end | |
| 187 | ## 特殊：主子表专属逻辑 | |
| 188 | #if ( $table.templateType == 10 || $table.templateType == 12 ) | |
| 189 | #if ( $subTables && $subTables.size() > 0 ) | |
| 190 | /** 子表的表单 */ | |
| 191 | subTabsName: '$subClassNameVars.get(0)' | |
| 192 | #end | |
| 193 | #end | |
| 194 | }; | |
| 195 | }, | |
| 196 | methods: { | |
| 197 | /** 打开弹窗 */ | |
| 198 | async open(id) { | |
| 199 | this.dialogVisible = true; | |
| 200 | this.reset(); | |
| 201 | // 修改时，设置数据 | |
| 202 | if (id) { | |
| 203 | this.formLoading = true; | |
| 204 | try { | |
| 205 | const res = await ${simpleClassName}Api.get${simpleClassName}(id); | |
| 206 | this.formData = res.data; | |
| 207 | this.title = "修改${table.classComment}"; | |
| 208 | } finally { | |
| 209 | this.formLoading = false; | |
| 210 | } | |
| 211 | } | |
| 212 | this.title = "新增${table.classComment}"; | |
| 213 | ## 特殊：树表专属逻辑 | |
| 214 | #if ( $table.templateType == 2 ) | |
| 215 | await this.get${simpleClassName}Tree(); | |
| 216 | #end | |
| 217 | }, | |
| 218 | /** 提交按钮 */ | |
| 219 | async submitForm() { | |
| 220 | // 校验主表 | |
| 221 | await this.$refs["formRef"].validate(); | |
| 222 | ## 特殊：主子表专属逻辑 | |
| 223 | #if ( $table.templateType == 10 || $table.templateType == 12 ) | |
| 224 | #if ( $subTables && $subTables.size() > 0 ) | |
| 225 | // 校验子表 | |
| 226 | #foreach ($subTable in $subTables) | |
| 227 | #set ($index = $foreach.count - 1) | |
| 228 | #set ($subClassNameVar = $subClassNameVars.get($index)) | |
| 229 | try { | |
| 230 | ## 代码生成后会替换为正确的 refs | |
| 231 | await this.refs['${subClassNameVar}FormRef'].validate(); | |
| 232 | } catch (e) { | |
| 233 | this.subTabsName = '${subClassNameVar}'; | |
| 234 | return; | |
| 235 | } | |
| 236 | #end | |
| 237 | #end | |
| 238 | #end | |
| 239 | this.formLoading = true; | |
| 240 | try { | |
| 241 | const data = this.formData; | |
| 242 | ## 特殊：主子表专属逻辑 | |
| 243 | #if ( $table.templateType == 10 || $table.templateType == 12 ) | |
| 244 | #if ( $subTables && $subTables.size() > 0 ) | |
| 245 | // 拼接子表的数据 | |
| 246 | #foreach ($subTable in $subTables) | |
| 247 | #set ($index = $foreach.count - 1) | |
| 248 | #set ($subClassNameVar = $subClassNameVars.get($index)) | |
| 249 | data.${subClassNameVar}#if ( $subTable.subJoinMany)s#end = this.refs['${subClassNameVar}FormRef'].getData(); | |
| 250 | #end | |
| 251 | #end | |
| 252 | #end | |
| 253 | // 修改的提交 | |
| 254 | if (data.${primaryColumn.javaField}) { | |
| 255 | await ${simpleClassName}Api.update${simpleClassName}(data); | |
| 256 | this.#[[$modal]]#.msgSuccess("修改成功"); | |
| 257 | this.dialogVisible = false; | |
| 258 | this.#[[$]]#emit('success'); | |
| 259 | return; | |
| 260 | } | |
| 261 | // 添加的提交 | |
| 262 | await ${simpleClassName}Api.create${simpleClassName}(data); | |
| 263 | this.#[[$modal]]#.msgSuccess("新增成功"); | |
| 264 | this.dialogVisible = false; | |
| 265 | this.#[[$]]#emit('success'); | |
| 266 | } finally { | |
| 267 | this.formLoading = false; | |
| 268 | } | |
| 269 | }, | |
| 270 | ## 特殊：树表专属逻辑 | |
| 271 | #if ( $table.templateType == 2 ) | |
| 272 | /** 获得${table.classComment}树 */ | |
| 273 | async get${simpleClassName}Tree() { | |
| 274 | this.${classNameVar}Tree = []; | |
| 275 | const res = await ${simpleClassName}Api.get${simpleClassName}List(); | |
| 276 | const root = { id: 0, name: '顶级${table.classComment}', children: [] }; | |
| 277 | root.children = this.handleTree(res.data, 'id', '${treeParentColumn.javaField}') | |
| 278 | this.${classNameVar}Tree.push(root) | |
| 279 | }, | |
| 280 | #end | |
| 281 | ## 特殊：树表专属逻辑 | |
| 282 | #if ( $table.templateType == 2 ) | |
| 283 | /** 转换${table.classComment}数据结构 */ | |
| 284 | normalizer(node) { | |
| 285 | if (node.children && !node.children.length) { | |
| 286 | delete node.children; | |
| 287 | } | |
| 288 | #if ($treeNameColumn.javaField == "name") | |
| 289 | return { | |
| 290 | id: node.id, | |
| 291 | label: node.name, | |
| 292 | children: node.children | |
| 293 | }; | |
| 294 | #else | |
| 295 | return { | |
| 296 | id: node.id, | |
| 297 | label: node['$treeNameColumn.javaField'], | |
| 298 | children: node.children | |
| 299 | }; | |
| 300 | #end | |
| 301 | }, | |
| 302 | #end | |
| 303 | /** 表单重置 */ | |
| 304 | reset() { | |
| 305 | this.formData = { | |
| 306 | #foreach ($column in $columns) | |
| 307 | #if ($column.createOperation || $column.updateOperation) | |
| 308 | #if ($column.htmlType == "checkbox") | |
| 309 | $column.javaField: [], | |
| 310 | #else | |
| 311 | $column.javaField: undefined, | |
| 312 | #end | |
| 313 | #end | |
| 314 | #end | |
| 315 | }; | |
| 316 | this.resetForm("formRef"); | |
| 317 | } | |
| 318 | } | |
| 319 | }; | |
| 320 | </script> | |
