index.html写页面的元素,引入了nek-ui(http://nek-ui.kaolafed.com/components/),可以方便地使用控件:如必填项校验、按钮样式设置、防止重复点击、文字提示、通知等。关键代码为on-click={this.stockIn($event)},用户点击提交按钮后会调用js的stockIn方法,把参数auditNo传过去。
<div >"nopermissions_item">
<validation ref="stockIn">
<ui.input width=200 value={auditNo} placeholder="跟单中/跟单完成的审批单号" required />
<ui.button action="submit" type="primary" titl e="根据审批单号一键入库采购单" on-click={this.stockIn($event)} />
<kl-tooltip tip="仓库的unSupportPushPurchase设为true,supportTailyCallback设为false,jxc-compose的inbound_switch开关设为开" placement="right">
<kl-icon type="warning" color="red"/>
</kl-tooltip>
</validation>
</div>
index.js写前端逻辑,把用户输入的请求发送给后端,链接为/backend/back/stockIn,参数为auditNo,后端返回后把结果打到页面上,以通知的形式保留4秒。
stockIn: function(e) {
var
validation=this.refs.stockIn;
if (!$validation.validate().success) {
return;
}
this.$request('/backend/back/stockIn', {
btn: e.sender,
norest: true,
data: { auditNo: this.data.auditNo},
onload: function(json) {
console.log(json);
NEKUI.Notify.success(json.message, 4000);
}
});
},
剩下的entry.js、.ftl和.css文件和其他页面保持一致即可。
——后端代码实现
通过RequestMapping的注解,把前后端关联起来,前端发送的参数名要和后端的入参名称一致,如果后端是个对象,则与对象的元素名称一致。
@RequestMapping(value = "/stockIn")
@ResponseBody
public CommonReturnData stockIn(String auditNo) throws Exception