<template>
<xn-form-container
:title
="formData
.id ? '编辑项目' : '增加项目'"
:width
="600"
:visible
="visible"
:destroy-on-close
="true"
@close
="onClose">
<a-form ref
="formRef" :model
="formData" :rules
="formRules" layout
="vertical">
<a-form-item label
="学生姓名" name
="studentName">
<a-input v-model:value
="formData
.studentName" placeholder
="请输入学生姓名" allow-clear/>
</a-form-item>
<a-form-item label
="学生年龄" name
="studentAge">
<a-input-number v-model:value
="formData
.studentAge" placeholder
="请输入学生年龄" :min
="1" :max
="100" style
="width: 100%"/>
</a-form-item>
<a-form-item label
="学生住址" name
="studentAddress">
<a-input v-model:value
="formData
.studentAddress" placeholder
="请输入学生住址" style
="width: 100%"/>
</a-form-item>
<a-form-item label
="入学时间" name
="enrollmentDate">
<a-date-picker v-model:value
="formData
.enrollmentDate" placeholder
="请选择" value-format
="YYYY-MM-DD" style
="width: 100%"/>
</a-form-item>
<a-form-item label
="学生科目" name
="studentSubject">
<a-select v-model:value
="formData
.studentSubject" placeholder
="请选择" :options
="categoryOptions" style
="width: 100%"/>
</a-form-item>
</a-form>
<template #footer>
<a-button style
="margin-right: 8px" @click
="onClose">关闭</a-button>
<a-button type
="primary" @click
="onSubmit" :loading
="submitLoading">保存</a-button>
</template>
</xn-form-container>
</template>
<script setup name
="studentForm">
//抽屉状态
import tool from "@/utils/tool";
import {cloneDeep} from "lodash-es";
import {required} from "@/utils/formRules";
import {message} from "ant-design-
vue";
import studentApi from '@/api/student/studentApi'
import day
js from "day
js";
const visible
= ref(false)
const emit
= defineEmits({success: null })
const formRef
= ref()
//表单数据
const formData
= ref({})
const submitLoading
= ref(false)
const categoryOptions
= ref([])
// 打开抽屉
const onOpen
= (record)
=> {
visible
.value
= true
formData
.value
= {
sortCode:0
}
if (record) {
formData
.value
= cloneDeep(record)
}
categoryOptions
.value
= tool
.dictList('SUBJECT')
}
// 关闭抽屉
const onClose
= ()
=> {
formRef
.value
.resetFields()
formData
.value
= {}
visible
.value
= false
}
// 默认要校验
const formRules
= {
studentName: [required('请输入学生姓名')],
studentAge: [required('请输入学生年龄')],
studentAddress: [required('请输入学生地址')],
enrollmentDate: [required('请输入入学时间')],
studentSubject: [required('请输入学生科目')]
}
// 验证并提交数据
const onSubmit
= ()
=> {
formRef
.value
.validate()
.then(()
=>{
submitLoading
.value
= true
const formDataParam
= cloneDeep(formData
.value)
if (formDataParam
.enrollmentDate){
formDataParam
.enrollmentDate
= day
js(formDataParam
.enrollmentDate)
.format('YYYY-MM-DD HH:mm:ss')
}
console
.log('提交的数据：',
JSON
.stringify(formDataParam,null,2))
// 调用统一的提交处理函数
handleSubmit(formDataParam)
.then(()
=> {
onClose()
emit('successful')
})
.catch(error
=> {
console
.error('提交过程出错:', error)
if (error
.code
=== 500) {
message
.error('服务器内部
错误，请检查数据格式')
} else if (error
.code
=== 400) {
message
.error('请求参数
错误: ' + error
.message)
} else {
message
.error('提交失败，请重试')
}
})
.finally(()
=> {
submitLoading
.value
= false
})
})
.catch(validationError
=> {
console
.error('表单验证失败:', validationError)
message
.error('请验证表单填写是否正确')
})
}
const handleSubmit
= (formData)
=>{
if (formData
.id) {
//编辑项目 - 添加
错误处理
return studentApi
.editStudent(formData)
.then(()
=> {
})
.catch(error
=> {
console
.error('编辑项目失败:', error)
throw error
})
} else {
// 新增项目 - 添加
错误处理
return studentApi
.addStudent(formData)
.then(()
=> {
})
.catch(error
=> {
console
.error('新增项目失败:', error)
throw error
})
}
}
defineExpose({
onOpen
})
</script>问题和这个代码有关吗？
本文介绍了如何在Vue.js项目中设置全局错误处理器，以便于集中记录和后期bug修复，强调了组件命名唯一性的关键，并提供了一个关于如何在main.js中实现错误捕获的示例。
扫一扫
519
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
