表单默认空白，无数据时赋默认值，新增时赋默认值

Ybittersweet

已于 2023-05-19 13:59:20 修改

阅读量400

点赞数

CC 4.0 BY-SA版权

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

于 2023-03-22 10:30:13 首次发布

本文链接：https://blog.csdn.net/Ybittersweet/article/details/129704148

默认值专栏收录该内容

1 篇文章

订阅专栏

文章描述了一个Vue.js应用中处理表单数据的方法，包括初始化和新增时设置默认值，使用Map避免重复添加，以及根据ID判断是更新还是新增数据的逻辑。同时，文章展示了如何通过接口进行数据保存，并处理保存后的反馈，如成功或失败的消息提示。此外，还包括了删除操作和状态管理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一.首先定义一个赋默认值的方法，然后初始化时调用，新增时调用

二.新增与更新，入参一致，所以可以共用一个接口，一个方法，根据是否有id判断

三.生成表单尽量用map不用push，因为push可能会出现重复添加的情况，但map每次会生成新的数组不用考虑这种情况

  <el-button type="primary" @click="switcSave()">保存</el-button>
    <el-button type="primary" @click="doPdf">生成报表</el-button>
    <el-button type="primary" @click="switcSave('add')">新增</el-button>
    <el-button type="danger" :disabled="this.flag" plain @click="doDelete">删除</el-button>
    data(){
    flag:false
    }

// 新增保存
export function switchFormData(data) {
  if(data.id){
    return request({
      url: "/api/TaskFormData/Update",
      method: "put",
      data
    });
  }else{
    return request({
      url: "/api/TaskFormData/Insert",
      method: "post",
      data
    });
  }
}

 getFrom() {
      this.form = {
        id: "",
        remark01:"",
        remark02: "",
        remark03:"",
        remark07: "",
        remark08: "",
        remark09: "",
        remark10: "",
        remark11: "",
        remark12: "",
        remark13: "",
        remark14: "",
        remark16: moment(new Date()).format('YYYY-MM-DD'),
        user_remark10: ""
      }
    },
    async init() {
      const { data } = await GetFormData({ taskId: this.conditions.remark01, formName: this.formTableName })
      // 如果没有数据就清空form，重新加载
      if (data.data.length == 0) {
        this.getFrom()
        this.formList = []
        this.flag = true
        this.formList.push(this.form)
        return false
      }
      if (data.statusCode == 200) {
        this.flag = false
        // 获取到当前的表单
        data.data.forEach((el, index) => {
          if (this.currentIndex == index) {
            this.form = el.value
            this.form.id = el.id
          }
        })
           // 生成新的列表
          const values = data.data.map(item => item.value)
          this.formList = values
          console.log(  this.form ,"  this.form ");
          console.log("formList",this.formList);
      }

    },
    async switcSave(val) {
     
      if(val=='add'){
        this.getFrom()
      }
      this.form.remark01 = this.conditions.remark01;
      this.form.remark03 = this.conditions.remark03;
      let isFullBoxRemark = this.isFullBox == 0 ? "空箱" : "满箱"
      let formData = {
        id: this.form.id,
        taskId: this.taskId,
        formName: this.formTableName,
        formNameRemark: `${this.conditions.remark03}_${isFullBoxRemark}_` + `测量_关键参数设置表`,
        key: {
          isFullBox: this.isFullBox,
          XYZDirection: this.conditions.remark03,
          step: 'X'
        },
        value: this.form,
      };
      this.form.id?formData['updatedUserId']=this.loginUserId:formData['createdUserId']=this.loginUserId
      const{data}= await switchFormData(formData)
      if (data.statusCode == 200) {
          this.$message.success(this.form.id?'保存成功':' 新增成功');
          this.init()
        } else {
          this.$message.error(this.form.id?'保存失败':' 新增失败');
        }
    },