配置后端给的端口地址和token
在public-src-api的相应js文件中
//表单数据添加
export function addFormData(param) {
return request({
url: '/smartcity-datamanagement/cimFormData/addFormData',
method: 'post',
headers: {
'Content-Type': 'application/x-www-form-urlencoded' // 如果写成contentType会报错
},
data: param
});
}
后端swagger页面中:
逻辑是通过点击弹窗页面的确定按钮进行新增
vue文件中:
确定按钮处写调用接口入口的click事件
接口需要传递两个,一个是tableName,另一个为formData,tableName是从父组件中传递过来的,在子组件中用props接收,固定格式,formFieldArr为弹窗中输入框前的字段,也是通过父组件传递过来的。
props: {
formFieldArr: {
type: Array,
default() {
return [];
}
},
tableName: {
type: String,
default: ''
}
},
设置钩子函数:
mounted() {
this.formFieldArr.forEach(item => {
let obj = item;
this.$set(obj, 'value', ''); //给obj对象的新增value属性赋值
this.newArr.push(obj);
});
},
相关方法:
methods: {
confirmDataInfo() {
let formdata = {};
this.newArr.forEach(item => {
if (item.value !== '') {
// 对象添加新属性
formdata[item.field] = item.value;
}
});
//整理参数
let formData = new FormData();
formData.append('formData', JSON.stringify(formdata));
formData.append('tableName', this.tableName);
addFormData(formData).then(res => {
if (res.data) {
this.$message.success('表单提交成功');
this.dialogVisible = false;
}
});
}
}
};
文章为作者独立观点,不代表 股票程序化软件自动交易接口观点