| 1 |
- <template>\n <el-dialog :title="form.${pk.attrName} ? '编辑' : '新增'" v-model="visible"\n :close-on-click-modal="false" draggable>\n <el-form ref="dataFormRef" :model="form" :rules="dataRules" formDialogRef label-width="90px" v-loading="loading">\n <el-row :gutter="24">\n#foreach($field in $formList)\n#if($field.attrName != ${pk.attrName})\n#if($formLayout == 1)\n <el-col :span="24" class="mb20">\n#elseif($formLayout == 2)\n <el-col :span="12" class="mb20">\n#end\n#if($field.formType == 'text')\n <el-form-item label="#if(${field.fieldComment})${field.fieldComment}#else ${field.attrName}#end" prop="${field.attrName}">\n <el-input v-model="form.${field.attrName}" placeholder="请输入#if(${field.fieldComment})${field.fieldComment}#else ${field.attrName}#end"/>\n </el-form-item>\n </el-col>\n#elseif($field.formType == 'textarea')\n <el-form-item label="#if(${field.fieldComment})${field.fieldComment}#else ${field.attrName}#end" prop="${field.attrName}">\n <el-input type="textarea" v-model="form.${field.attrName}" placeholder="请输入#if(${field.fieldComment})${field.fieldComment}#else ${field.attrName}#end"/>\n </el-form-item>\n </el-col>\n#elseif($field.formType == 'select')\n <el-form-item label="#if(${field.fieldComment})${field.fieldComment}#else ${field.attrName}#end" prop="${field.attrName}">\n <el-select v-model="form.${field.attrName}" placeholder="请选择#if(${field.fieldComment})${field.fieldComment}#else ${field.attrName}#end">\n #if($field.fieldDict)\n <el-option :value="item.value" :label="item.label" v-for="(item, index) in ${field.fieldDict}" :key="index"></el-option>\n #end\n #if(!$field.fieldDict)\n <el-option label="请选择">0</el-option>\n #end\n </el-select>\n </el-form-item>\n </el-col>\n#elseif($field.formType == 'radio')\n <el-form-item label="#if(${field.fieldComment})${field.fieldComment}#else ${field.attrName}#end" prop="${field.attrName}">\n <el-radio-group v-model="form.${field.attrName}">\n #if($field.fieldDict)\n <el-radio :label="item.value" v-for="(item, index) in ${field.fieldDict}" border :key="index">{{ item.label }}\n </el-radio>\n #else\n <el-radio label="${field.fieldComment}" border>${field.fieldComment}</el-radio>\n #end\n </el-radio-group>\n </el-form-item>\n </el-col>\n#elseif($field.formType == 'checkbox')\n <el-form-item label="#if(${field.fieldComment})${field.fieldComment}#else ${field.attrName}#end" prop="${field.attrName}">\n <el-checkbox-group v-model="form.${field.attrName}">\n #if($field.fieldDict)\n\t\t\t\t\t\t<el-checkbox :label="item.value" v-for="(item, index) in ${field.fieldDict}" :key="index">{{ item.label }}</el-checkbox>\n #end\n #if(!$field.fieldDict)\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 </el-col>\n#elseif($field.formType == 'date')\n <el-form-item label="#if(${field.fieldComment})${field.fieldComment}#else ${field.attrName}#end" prop="${field.attrName}">\n <el-date-picker type="date" placeholder="请选择#if(${field.fieldComment})${field.fieldComment}#else ${field.attrName}#end" v-model="form.${field.attrName}" :value-format="dateStr"></el-date-picker>\n </el-form-item>\n </el-col>\n#elseif($field.formType == 'datetime')\n <el-form-item label="#if(${field.fieldComment})${field.fieldComment}#else ${field.attrName}#end" prop="${field.attrName}">\n <el-date-picker type="datetime" placeholder="请选择#if(${field.fieldComment})${field.fieldComment}#else ${field.attrName}#end" v-model="form.${field.attrName}" :value-format="dateTimeStr"></el-date-picker>\n </el-form-item>\n </el-col>\n\n#elseif($field.formType == 'number')\n <el-form-item label="#if(${field.fieldComment})${field.fieldComment}#else ${field.attrName}#end" prop="${field.attrName}">\n <el-input-number :min="1" :max="1000" v-model="form.${field.attrName}" placeholder="请输入#if(${field.fieldComment})${field.fieldComment}#else ${field.attrName}#end"></el-input-number>\n </el-form-item>\n </el-col>\n#elseif($field.formType == 'upload-file')\n <el-form-item label="#if(${field.fieldComment})${field.fieldComment}#else ${field.attrName}#end" prop="${field.attrName}">\n <upload-file v-model:imageUrl="form.${field.attrName}"></upload-file>\n </el-form-item>\n </el-col>\n#elseif($field.formType == 'upload-img')\n <el-form-item label="#if(${field.fieldComment})${field.fieldComment}#else ${field.attrName}#end" prop="${field.attrName}">\n <upload-img v-model="form.${field.attrName}"></upload-img>\n </el-form-item>\n </el-col>\n#elseif($field.formType == 'editor')\n <el-form-item label="#if(${field.fieldComment})${field.fieldComment}#else ${field.attrName}#end" prop="${field.attrName}">\n <editor v-if="visible" v-model:get-html="form.${field.attrName}" placeholder="请输入#if(${field.fieldComment})${field.fieldComment}#else ${field.attrName}#end"></editor>\n </el-form-item>\n </el-col>\n#end\n\n#if(!$field.formType)\n <el-form-item label="#if(${field.fieldComment})${field.fieldComment}#else ${field.attrName}#end" prop="${column.attrName}">\n <el-input v-model="form.${field.attrName}" placeholder="请输入#if(${field.fieldComment})${field.fieldComment}#else ${field.attrName}#end"/>\n </el-form-item>\n </el-col>\n#end\n#end\n#end\n\t\t\t</el-row>\n </el-form>\n <template #footer>\n <span class="dialog-footer">\n <el-button @click="visible = false">取消</el-button>\n <el-button type="primary" @click="onSubmit" :disabled="loading">确认</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)\nconst loading = ref(false)\n// 定义字典\n#set($fieldDict=[])\n#foreach($field in $gridList)\n\t#if($field.fieldDict)\n\t\t#set($void=$fieldDict.add($field.fieldDict))\n\t#end\n#end\n#if($fieldDict)\nconst { $dict.format($fieldDict) } = useDict($dict.quotation($fieldDict))\n#end\n\n// 提交表单数据\nconst form = reactive({\n#if(!$formList.contains(${pk.attrName}))\n\t\t${pk.attrName}:'',\n#end\n#foreach($field in $formList)\n#if($field.formType == 'number')\n\t\t${field.attrName}: 0,\n#elseif($field.formType == 'checkbox')\n ${field.attrName}: [],\n#else\n\t ${field.attrName}: '',\n#end\n#end\n});\n\n// 定义校验规则\nconst dataRules = ref({\n#foreach($field in $formList)\n#if($field.formRequired == '1' && $field.formValidator)\n ${field.attrName}: [{required: true, message: '${field.fieldComment}不能为空', trigger: 'blur'}, { validator: rule.${field.formValidator}, trigger: 'blur' }],\n#elseif($field.formRequired == '1')\n ${field.attrName}: [{required: true, message: '${field.fieldComment}不能为空', trigger: 'blur'}],\n#elseif($field.formValidator)\n ${field.attrName}: [{ validator: rule.${field.formValidator}, trigger: 'blur' }],\n#end\n#end\n})\n\n// 打开弹窗\nconst openDialog = (id: string) => {\n visible.value = true\n form.${pk.attrName} = ''\n\n // 重置表单数据\n\tnextTick(() => {\n\t\tdataFormRef.value?.resetFields();\n\t});\n\n // 获取${className}信息\n if (id) {\n form.${pk.attrName} = id\n get${className}Data(id)\n }\n};\n\n// 提交\nconst onSubmit = async () => {\n\tconst valid = await dataFormRef.value.validate().catch(() => {});\n\tif (!valid) return false;\n\n\ttry {\n loading.value = true;\n\t\tform.${pk.attrName} ? await putObj(form) : await addObj(form);\n\t\tuseMessage().success(form.${pk.attrName} ? '修改成功' : '添加成功');\n\t\tvisible.value = false;\n\t\temit('refresh');\n\t} catch (err: any) {\n\t\tuseMessage().error(err.msg);\n\t} finally {\n loading.value = false;\n }\n};\n\n\n// 初始化表单数据\nconst get${className}Data = (id: string) => {\n // 获取数据\n loading.value = true\n getObj(id).then((res: any) => {\n Object.assign(form, res.data)\n }).finally(() => {\n loading.value = false\n })\n};\n\n// 暴露变量\ndefineExpose({\n openDialog\n});\n</script>
|
