Promise，Promise.all 实现多个表单同步验证

最新推荐文章于 2024-02-19 22:53:06 发布

代码改变生活-120

最新推荐文章于 2024-02-19 22:53:06 发布

阅读量214

点赞数

分类专栏：前端文章标签： javascript 前端 vue.js

本文链接：https://blog.csdn.net/yjl13598765406/article/details/126986342

版权

前端专栏收录该内容

29 篇文章 2 订阅

订阅专栏

/**
     * 保存或者修改
     */
    const saveOrUpdate = () => {
      const hisTableform = new Promise((resolve, reject) => {
        form.value.validate(valid => {
          if (valid) {
            resolve()
          } else {
            reject()
          }
        })
      })
      const hisFieldForm = new Promise((resolve, reject) => {
        hisFieldDialog.value.form.validate(valid => {
          if (valid) {
            resolve()
          } else {
            reject()
          }
        })
      })
      /** 同步验证 **/
      Promise.all([hisTableform, hisFieldForm]).then(() => {
        /** 验证通过在发送请求 **/
        saveData()
      }).catch((error) => {
        console.log(error)
      })
    }
    /** 保存数据 **/
    const saveData = async () => {
      try {
        let resData = null
        loadingTips.value = savePrompt.value
        initLoading.value = true
        const param = JSON.parse(JSON.stringify(formData.value))
        const hisKeyFieldList = hisFieldDialog.value.dynamicValidateForm.domains
        param.hisKeyFieldList = hisKeyFieldList
        delete param.version
        if (rowId.value) {
          resData = await updateHisTable(param)
        } else {
          resData = await saveHisTable(param)
        }
        if (resData.code === 0) {
          ElMessage.success(t('common.operationSuccessful'))
        } else {
          ElMessage.error(t('common.operationFailed') + resData.data)
        }
        initLoading.value = false
        emit('query')
      } catch {
        initLoading.value = false
      } finally {
        initLoading.value = false
      }
    }