前后端------新增/修改

index.vue 跳转到form.vue   

新增-编辑按钮

前端

index.vue:
  <el-button type="primary" @click="addOrUpdateHandle()">新增el-button>
 
 
    /**
     * index.vue 跳到 Form.vue
     */
 
addOrUpdateHandle(id, isDetail) {
        this.formVisible = true
        this.$nextTick(() => {
          this.$refs.JNPFForm.init(id, isDetail)
        })
},
 
 
Form.vue:
 
    /**
     * 初始化表单数据
     * @param id 主键值
     * @param isDetail 是否是详情页面，控制是否可编辑
     */
    init(id, isDetail) {
      this.dataForm.id = id || 0;
      this.visible = true;
      this.isDetail = isDetail || false;
      this.$nextTick(() => {
        this.$refs['elForm'].resetFields();
        if (this.dataForm.id) {
          this.loading = true
          //加载表单数据
          getOLoad(this.dataForm.id).then(res => {
            this.dataForm = res.data
            this.loading = false
          })
        } else {
          this.clearData(this.dataForm)
        }
      });
      this.$store.commit('generator/UPDATE_RELATION_DATA', {})
    },
 
    /**
     * 清除Form中的数据
     */
clearData(data) {
      for (let key in data) {
        if (data[key] instanceof Array) {
          data[key] = [];
        } else if (data[key] instanceof Object) {
          this.clearData(data[key]);
        } else {
          data[key] = "";
        }
      }
},

前端跳后端接口

/**
 * 获取表单详细（编辑页面调用）
 * @param id 主键值
 */
export function getOLoad(id) {
  return request({
    url: define.api+'/getOLoad/' + id,
    method: 'GET'
  })
}

后端接口

@RequestMapping("/user")
public class OLoadAnalysisController {
 
 
    /**
     * 根据id获取表单信息（编辑表单）
     * @param id 主键
     */
    @GetMapping("/{id}")
    public ActionResult info(@PathVariable("id") String id){
 
    }
}

确定按钮

前端

"primary" @click="dataFormSubmit()" v-if="!isDetail"> 确 定
 
    /**
     * 表单确定按钮
     */
dataFormSubmit() {
      this.$refs['elForm'].validate((valid) => {
        if (valid) {
          this.request()
        }
      })
},
 
    /**
     * 数据格式化，将提交的表单数据转为JSON对象
     */
    dataList() {
      var _data = JSON.parse(JSON.stringify(this.dataForm));
      return _data;
    },
    /**
     * 表单提交调用api接口方法
     */
request() {
      var _data = this.dataList()
      if (!this.dataForm.id) {
        addOLoadAnalysis(_data).then((res) => {
          
        })
      } else {
        updateOLoadAnalysis(this.dataForm.id, _data).then((res) => {
         
        })
      }
},

前端跳后端接口

 
 
/**
 * 新增表单保存数据
 * @param data 提交的表单对象
 */
export function addOLoadAnalysis(data) {
  return request({
    url: define.api+'/user',
    method: 'POST',
    data
  })
}
 
/**
 * 修改表单保存数据
 * @param data 提交的表单对象
 */
export function updateOLoadAnalysis(id, data) {
  return request({
    url: define.api+'/user/' + id,
    method: 'PUT',
    data
  })
}

后端

@RequestMapping("/user")
public class OLoadAnalysisController {
    /**
     * 新增数据保存
     *
     * @param userVo表单提交对象
     * @return
     */
    @PostMapping
    @DSTransactional
    public ActionResult create(@RequestBody @Valid UserVo userVo){
 
    
    }
 
    /**
     * 更新数据保存接口
     * @param id 主键
     * @param userVo表单信息
     */
    @PutMapping("/{id}")
    @DSTransactional
    public ActionResult update(@PathVariable("id") String id,@RequestBody @Valid  UserVo userVo){
    
    }
 
}