电子书编辑

表单规则校验

创建表单规则校验逻辑：

const validateRequire = (rule, value, callback) => {
    if (value === '') {
      this.$message({
        message: rule.field + '为必传项',
        type: 'error'
      })
      callback(new Error(rule.field + '为必传项'))
    } else {
      callback()
    }
  }
  const validateSourceUri = (rule, value, callback) => {
    if (value) {
      if (validURL(value)) {
        callback()
      } else {
        this.$message({
          message: '外链url填写不正确',
          type: 'error'
        })
        callback(new Error('外链url填写不正确'))
      }
    } else {
      callback()
    }
  }
  return {
    postForm: Object.assign({}, defaultForm),
    rules: {
      image_uri: [{ validator: validateRequire }],
      title: [{ validator: validateRequire }],
      content: [{ validator: validateRequire }],
      source_uri: [{ validator: validateSourceUri, trigger: 'blur' }]
    }
  }
}

提交表单

提交表单时需要提供两个接口，createBook 和 updateBook

submitForm() {
    this.$refs.postForm.validate(valid => {
      if (valid) {
        this.loading = true
        const book = Object.assign({}, this.postForm)
        delete book.contents
        if (!this.isEdit) {
          createBook(book).then(response => {
            this.loading = false
            this.$notify({
              title: '成功',
              message: response.msg,
              type: 'success',
              duration: 2000
            })
            this.toDefault()
          }).catch(() => {
            this.loading = false
          })
        } else {
          updateBook(book).then(response => {
            console.log('updateBook', response)
            this.loading = false
            this.$notify({
              title: '成功',
              message: response.msg,
              type: 'success',
              duration: 2000
            })
          }).catch(() => {
            this.loading = false
          })
        }
      } else {
        return false
      }
    })
  }