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<UserVo > info(@PathVariable("id") String id){
}
}
确定按钮
前端
<el-button type="primary" @click="dataFormSubmit()" v-if="!isDetail"> 确 定</el-button>
/**
* 表单确定按钮
*/
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){
}
}