保存

用的软件是Webstrom，框架是Vue，组件是ElementUI。

 

有些时候对数据不需要进行这么多处理，主要看需要传给后端什么格式的数据

 

注意本代码不能直接复制粘贴运行，因为接口没有放上来

 

html

<el-button type="primary" size="small" :loading="saveLoading" @click="save">保存</el-button>

 

javascript

save() {
    // 在这个组件上解构出来这两条数据
    const { date, form } = this
    // userMails是通过Vuex存储的
    const { userMails } = this.$store.getters
    // 拿到路由的name，用此区分是新增一条数据还是编辑这个数据
    const { name } = this.$route
    // 先定义action为新增数据
    let action = addMeeting
    // 如果路由的name为编辑数据，则把action重新赋值为更新数据
    if (name === 'EditMeeting') action = updateMeeting
    // 如果表单校验通过
    this.$refs.form.validate(async(valid) => {
      if (valid) {
          // 将加载中置为真
          this.saveLoading = true
          // 提交表单时，将提交的数据格式和数据接口保存一致
          // 将form对象展开，放到data里
          const data = { ...form }
          // 对需要转换的数据格式转换成后端需要的格式
          // `` 这对模板字符串很好用，很多地方都用的到，这里使用模板字符串拼接两个数据数据用${}括起来，因为后端需要这两个字符串之间有个空格，直接空一格即可
          data.startTime = `${date} ${data.startTime}`
          data.endTime = `${date} ${data.endTime}`
          // 如果邮箱是空，则填入一个默认值
          if (data.from === '') { data.from = userMails }
          // receiver是一个多选下拉框的接收值，先把值放到receivers这个数组里，然后通过join(';')转换成字符串，用;连接
          data.receiver = data.receivers.join(';')
          // 如果参与人是空，则填入一个默认值
          if (data.receiver === '') data.receiver = userMails
          // 一些默认值，需要传给后端，可以不用管
          data.showas = data.showas || 2
          data.reminder = data.reminder || 15
          data.isPrivate = data.isPrivate || false
          data.importance = data.importance || 1
          // 调用后端接口，将data里的值传过去
          const response = await action(data)
          // 根据返回的数据，解构出需要展示的数据
          const { code } = response
              // 返回值为零表示成功
              if (code === 0) {
                this.$message({
                  showClose: true,
                  message: '保存成功',
                  type: 'success'
                })
                // 将加载中置为假
                this.saveLoading = false
                // 通过事件总线发送事件，没带参数
                EventBus.$emit('refreshMeetingList')
                // 提交成功之后跳到对应页面
                this.$router.push('/meetings')
              }
        } else {
            console.log('error submit!!')
            return false
        }
    })
}