vue+element-ui表单相关流程

提交

校验字段

onSubmit(formName) {
	this.$refs.Form.validate((valid) => {
	   if (valid) {
	     this.isEmptyValidate(
	     () => this.$emit('close'), // 为空确认操作
	     () => { // 不为空操作/继续提交
	       this.saveLoading(true)
	       this.$emit('submit', () => {
	         this.saveLoading(false)
	         // this.resetForm(formName)
	       }, this.form)
	     }, 
	     this.form
	    )
	   } else {
	     return false
	   }
	 })
}

saveLoading(bool) {
  if (bool) {
	  this.loading = true
	  this.loadingText = '保存中...'
  } else {
     this.loading = false
	 this.loadingText = ''
  }
}

是否允许提交空表单

如果没有字段的必填项，回提交一条空信息

isEmptyValidate(handle, next, form) {
 if (this.isEmpty(form)) {
     this.$confirm('检测到内容未编辑，离开将不会保存此条？', '提示信息', {
       distinguishCancelAndClose: true,
       confirmButtonText: '离开',
       cancelButtonText: '继续编辑',
       type: 'warning'
     }).then(() => {
       // 操作
       handle()
     }).catch(() => {})
   } else next()
 }

// 判断是否是一条空数据
isEmpty(obj) {
   for (const key in obj) {
      if (obj[key] || obj[key] === 0) {
        if (typeof obj[key] !== 'object') {
          return false
        } else {
          return this.isEmpty(obj[key])
        }
      }
    }
    return true
  }

提交

async handleSubmit(callback, form) {
  const data = deepClone(this.createForm)
  // hook
  // Data transformation before submission 提交前进行参数的数据类型，格式修改等

 // 判断是新建还是修改
  const pageStatus = this.$route.path.indexOf('create') >= 0 ? 'create' : 'update'
  try {
    pageStatus === 'update' ? await this.$options.apis.updateItem(data)
      : await this.$options.apis.insertItem(this.clearEmpty(data))
    callback()
    this.$notify({
      title: 'Success',
      message: '操作成功',
      type: 'success',
      duration: 2000
    })
    // 提交成功后
    // hook
    // 刷新数据 或者 跳转页面
    // 刷新数据如果是新增数据在第一页，分页的page设置为第一页，展示新增数据
  } catch (e) {
    callback()
    this.$notify({
      title: '错误',
      message: '操作错误！' + e.toString(),
      type: 'error',
      duration: 2000
    })
  }
}

clearEmpty(params) {
  for (const key in params) {
	 if (params[key] === '' || params[key] === undefined || params[key] === null) {
	    delete params[key]
	 } else if (typeof params[key] === 'object') {
	  	 if (isEmpty(params[key])) delete params[key]
	 }
  }
  return params
}

退出新建/编辑

判断是否编辑

/**
exit： 离开钩子
save:  保存钩子
*/
beforeExit(exit, save) {
  if (this.originForm && !this.noChange(this.createForm, this.originForm)) {
    this.$confirm('检测到未保存的内容，是否在离开页面前保存修改？', '确认信息', {
      distinguishCancelAndClose: true,
      confirmButtonText: '保存',
      cancelButtonText: '放弃修改',
      type: 'warning'
    }).then(() => {
      save()
    }).catch((action) => {
      if (action === 'cancel') {
        console.log('放弃保存 并离开页面')
        exit()
      } else {
        console.log('停留在当前页面')
      }
    })
  } else exit()
}
// 判断表单值是否发生改变
noChange(currentForm, originForm) {
// null 和 '' 不能区分 JSON.stringify(this.form) === this.originForm
   const valuesO = Object.values(originForm).filter(v => v || v === 0)
   const valuesN = Object.values(currentForm).filter(v => v || v === 0)
   return JSON.stringify(valuesO) === JSON.stringify(valuesN)
 }

重置

使用element-ui的重置功能
重置表单数据与校验
注意： 确保有表单数据之后再渲染表单

// 初始设置 this.createForm = null
// 渲染表单 <el-form v-if="createForm "></el-form>

created() {
   if (this.$route.name === 'update' && this.$route.params.id) {
     this.loading = true
     this.$options.apis.readItem({ id: this.$route.params.id }).then(res => {
       this.createForm = deepClone(res.data[0])
       this.originForm = deepClone(this.createForm)
       this.loading = false
     }).catch(e => {
     	this.loading = false
        this.$message.error('读取错误')
     })
   } else {
     this.createForm = this.addForm
     this.originForm = deepClone(this.createForm)
   }
}
// 重置表单
resetForm(formName) {
 this.$refs[formName].resetFields()
}