| 1 |
- <template>\n <el-dialog :title="form.${pk.attrName} ? '编辑' : '新增'" v-model="visible" :close-on-click-modal="false" draggable>\n <el-form ref="dataFormRef" :model="form" :rules="dataRules" formDialogRef label-width="90px">\n#foreach($key in $resultMap.keySet())\n#set($itemList = $resultMap.get($key))\n<el-row :gutter="24">\n#foreach($field in $itemList)\n <el-col :span="$field.span">\n#if($field.type == 'input')\n <el-form-item label="${field.options.label}" prop="${field.options.name}">\n <el-input v-model="form.${field.options.name}" placeholder="${field.options.placeholder}"/>\n </el-form-item>\n#elseif($field.type == 'number')\n <el-form-item label="${field.options.label}" prop="${field.options.name}">\n <el-input-number :min="${field.options.min}" :max="${field.options.max}" v-model="form.${field.options.name}" placeholder="${field.options.placeholder}"></el-input-number>\n </el-form-item>\n#elseif($field.type == 'textarea')\n <el-form-item label="${field.options.label}" prop="${field.options.name}">\n <el-input type="textarea" :rows="${field.options.rows}" v-model="form.${field.options.name}" placeholder="${field.options.placeholder}"/>\n </el-form-item>\n#elseif($field.type == 'select')\n <el-form-item label="${field.options.label}" prop="${field.options.name}">\n <el-select v-model="form.${field.options.name}" placeholder="${field.options.placeholder}">\n #if($field.options.optionItemsDictType)\n <el-option :value="item.value" :label="item.label" v-for="(item, index) in ${field.options.optionItemsDictType}" :key="index"></el-option>\n #else\n <el-option label="请选择">0</el-option>\n #end\n </el-select>\n </el-form-item>\n#elseif($field.type == 'radio')\n <el-form-item label="${field.options.label}" prop="${field.options.name}">\n <el-radio-group v-model="form.${field.options.name}">\n #if($field.options.optionItemsDictType)\n <el-radio :label="item.value" v-for="(item, index) in ${field.options.optionItemsDictType}" border :key="index">{{ item.label }}\n </el-radio>\n #end\n </el-radio-group>\n </el-form-item>\n#elseif($field.type == 'checkbox')\n <el-form-item label="${field.options.label}" prop="${field.options.name}">\n <el-checkbox-group v-model="form.${field.options.name}">\n #if($field.options.optionItemsDictType)\n <el-checkbox :label="item.value" :name="item.label" v-for="(item, index) in ${field.options.optionItemsDictType}" :key="index"></el-checkbox>\n #else\n <el-checkbox label="启用" name="type"></el-checkbox>\n <el-checkbox label="禁用" name="type"></el-checkbox>\n #end\n </<el-checkbox-group>\n </el-form-item>\n#elseif($field.type == 'date')\n <el-form-item label="${field.options.label}" prop="${field.options.name}">\n <el-date-picker type="date" placeholder="${field.options.placeholder}" v-model="form.${field.options.name}" :value-format="dateStr"></el-date-picker>\n </el-form-item>\n#elseif($field.type == 'time')\n <el-form-item label="${field.options.label}" prop="${field.options.name}">\n <el-time-picker placeholder="${field.options.placeholder}" v-model="form.${field.options.name}" :value-format="dateTimeStr"></el-date-picker>\n </el-form-item>\n#elseif($field.type == 'file-upload')\n <el-form-item label="${field.options.label}" prop="${field.options.name}">\n <upload-file v-model="form.${field.attrName}" limit="${field.options.limit}" fileMaxSize="${field.options.fileMaxSize}"></upload-file>\n </el-form-item>\n#elseif($field.type == 'picture-upload')\n <el-form-item label="${field.options.label}" prop="${field.options.name}">\n <upload-img v-model:imageUrl="form.${field.options.name}" limit="${field.options.limit}" fileMaxSize="${field.options.fileMaxSize}"></upload-img>\n </el-form-item>\n#elseif($field.type == 'rich-editor')\n <el-form-item label="${field.options.label}" prop="${field.options.name}">\n <editor v-model:get-html="form.${field.options.name}" placeholder="${field.options.placeholder}"></editor>\n </el-form-item>\n#elseif($field.type == 'switch')\n <el-form-item label="${field.options.label}" prop="${field.options.name}">\n <el-switch v-model="form.${field.options.name}" />\n </el-form-item>\n#elseif($field.type == 'rate')\n <el-form-item label="${field.options.label}" prop="${field.options.name}">\n <el-rate v-model="form.${field.options.name}" />\n </el-form-item>\n#elseif($field.type == 'slider')\n <el-form-item label="${field.options.label}" prop="${field.options.name}">\n <el-slider v-model="form.${field.options.name}" />\n </el-form-item>\n#elseif($field.type == 'color')\n <el-form-item label="${field.options.label}" prop="${field.options.name}">\n <el-color-picker v-model="form.${field.options.name}" />\n </el-form-item>\n#elseif($field.type == 'static-text' || $field.type == 'html-text')\n <span>{{form.${field.options.name}}}</span> \n#elseif($field.type == 'divider')\n <el-divider />\n#else\n <el-form-item label="${field.options.label}" prop="${field.options.name}">\n <el-input v-model="form.${field.options.name}" placeholder="${field.options.placeholder}"/>\n </el-form-item>\n#end\n </el-col>\n#end\n</el-row>\n#end\n </el-form>\n <template #footer>\n <span class="dialog-footer">\n <el-button @click="visible = false" formDialogRef>取消</el-button>\n <el-button type="primary" @click="onSubmit" formDialogRef>确认</el-button>\n </span>\n </template>\n </el-dialog>\n</template>\n\n<script setup lang="ts" name="${ClassName}Dialog">\nimport { useDict } from '/@/hooks/dict';\nimport { useMessage } from "/@/hooks/message";\nimport { getObj, addObj, putObj } from '/@/api/${moduleName}/${functionName}'\nimport { rule } from '/@/utils/validate';\nconst emit = defineEmits(['refresh']);\n\n// 定义变量内容\nconst dataFormRef = ref();\nconst visible = ref(false)\n// 定义字典\n#set($fieldDict=[])\n#foreach($key in $resultMap.keySet())\n#set($itemList = $resultMap.get($key))\n#foreach($field in $itemList)\n #if($field.options.optionItemsDictType)\n #set($void=$fieldDict.add($field.options.optionItemsDictType))\n #end\n#end\n#end\n#if($fieldDict)\nconst { $dict.format($fieldDict) } = useDict($dict.quotation($fieldDict))\n#end\n\n// 提交表单数据\nconst form = reactive({\n\t\t${pk.attrName}:"",\n#foreach($key in $resultMap.keySet())\n#set($itemList = $resultMap.get($key))\n#foreach($field in $itemList)\n ${field.options.name}: "",\n#end\n#end\n});\n\n// 定义校验规则\nconst dataRules = ref({\n#foreach($key in $resultMap.keySet())\n#set($itemList = $resultMap.get($key))\n#foreach($field in $itemList)\n#if($field.options.required && $field.options.validation)\n ${field.options.name}: [{required: true, message: '${field.options.label}不能为空', trigger: 'blur'}, {{ validator: rule.${field.options.validation}, trigger: 'blur' }],\n#elseif($field.options.required)\n ${field.options.name}: [{required: true, message: '${field.options.label}不能为空', trigger: 'blur'}],\n#elseif($field.options.validation)\n ${field.options.name}: [{ validator: rule.${field.options.validation}, trigger: 'blur' }],\n#end\n#end\n#end\n})\n\n// 打开弹窗\nconst openDialog = (id: string) => {\n visible.value = true\n form.${pk.attrName} = ''\n\n // 重置表单数据\n nextTick(() => {\n dataFormRef.value?.resetFields();\n });\n \n // 获取${className}信息\n if (id) {\n form.${pk.attrName} = id\n get${className}Data(id)\n }\n};\n\n// 提交\nconst onSubmit = () => {\n dataFormRef.value.validate((valid: boolean) => {\n if (!valid) {\n return false\n }\n\n // 更新\n if (form.${pk.attrName}) {\n putObj(form).then(() => {\n useMessage().success('修改成功')\n visible.value = false // 关闭弹窗\n emit('refresh')\n }).catch((err: any) => {\n useMessage().error(err.msg)\n })\n } else {\n addObj(form).then(() => {\n useMessage().success('添加成功')\n visible.value = false // 关闭弹窗\n emit('refresh')\n }).catch((err: any) => {\n useMessage().error(err.msg)\n })\n }\n })\n}\n\n// 初始化表单数据\nconst get${className}Data = (id: string) => {\n // 获取数据\n getObj(id).then((res: any) => {\n Object.assign(form, res.data)\n })\n};\n\n// 暴露变量\ndefineExpose({\n openDialog\n});\n</script>
|
