const formSave = async () => {
const form = unref(formRef)
const payload = Object.assign({}, form?.formModel)
if (props.mode === 'ADD') {
delete payload.id
}
payload.drugMedicalConductRights = rightsCheckList.value.flatMap((ele) => ele)
Object.entries(unref(drugCheckboxData)).forEach(([k, v]) => {
if (Object.keys(payload).indexOf(k) !== -1) {
payload[k] = v
}
})
payload.createdUserId = null
payload.updatedUserId = null
payload.createdOnUtc = null
payload.updatedOnUtc = null
payload.pharmacologyCategoryId = bindObj.value.id
payload.pharmacologyCategoryName = bindObj.value.detailName
/** 校验英文名称(非必填项) */
let enNameValid = true
if (payload.englishName) {
await form?.getElFormRef().validateField('englishName', (isValid) => {
enNameValid = isValid
})
}
if (!enNameValid) return
/** 校验其他必填项 */
let requiredCount = 0
const requiredArr = [
'drugTypeId',
'commonName',
'ingredient',
'projectIncomeId',
'dosage',
'doseUnit'
]
let isAllowNext = false // 是否允许下一步
requiredArr.forEach(async (item) => {
await form?.getElFormRef().validateField(item, (isValid) => {
if (!isValid) return // 验证: 通过 / 失败
requiredCount += 1
})
}) // 异步
setTimeout(async () => {
isAllowNext = requiredCount === requiredArr.length
if (isAllowNext) {
postDrugApi(payload).then((res) => {
if (res) {
drugDocumentStore.setPlatformId(res.id)
/** 商品厂家规格信息维护弹窗 初始model值 */
drugDocumentStore.setDruBasicInfo(res)
if (props.mode === 'ADD') {
allowToSpecsTab.value = true
}
proxy.$ElMessage.success(`${dialogTitle.value}${t('common.operateSuccess')}`)
} else {
proxy.$ElMessage.error(`${dialogTitle.value}${t('common.operateFailed')}`)
}
})
}
}, 100)
}
vue-element-plus-admin中的表单,验证非必填项以及多个必填项
最新推荐文章于 2024-09-03 10:01:17 发布
该代码段展示了一个异步函数constformSave,它处理表单数据,进行数据验证,包括必填项和非必填项的检查,然后更新和提交payload到API。在提交前,函数会清理某些字段并设置特定值。如果所有验证都通过,函数将调用API并显示操作成功或失败的消息。
摘要由CSDN通过智能技术生成