本文手把手教你玩转ESAP自定义web查询，给你的数据装上翅膀！
先看疗效
客户通过微信(或企业微信)扫描订单上的二维码，即可看查看web版订单页面，获得进度信息。
实现步骤1：制作web模板
首先用vue画出这个web模板，文件路径为esap根目录/static/app2/index.html。
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
<title>ESAP订单查询</title>
<link rel="stylesheet" href="https://res.wx.qq.com/open/libs/weui/1.1.3/weui.min.css">
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="https://cdn.jsdelivr.net/npm/axios@0.12.0/dist/axios.min.js"></script>
</head>
<body>
<div id="app">
<div class="weui-cells__title">主表</div>
<div v-for="item,key in data1" class="weui-cells" style="margin-top:0">
<div class="weui-cell">
<div class="weui-cell__bd">
<p>{ { key } }</p>
</div>
<div class="weui-cell__ft">{ { item } }</div>
</div>
</div>
<div class="weui-cells__title">明细</div>
<table border="1" style="border-collapse: collapse;color: #444;border-color:#c7c7c7" width="100%">
<tr style="background-color:#f0faff">
<th style="padding:6px">产品</th>
<th>数量</th>
<th>单价</th>
<th>金额</th>
</tr>
<tr v-for="item2,key2 in data2">
<td style="padding:6px"></td>
<td>{ { item2.数量 } }</td>
<td>{ { item2.单价 } }</td>
<td>{ { item2.金额 } }</td>
</tr>
</table>
<a href="javascript:;" class="weui-btn weui-btn_mini weui-btn_primary">增加</a>
<a href="javascript:;" class="weui-btn weui-btn_mini weui-btn_primary">保存</a>
<a href="javascript:;" class="weui-btn weui-btn_mini weui-btn_primary">返回</a>
<a href="javascript:;" class="weui-btn weui-btn_primary">生成Excel格式打印</a>
</div>
<script>
let getUrlKey = function(name){
return decodeURIComponent((new RegExp('[?|&]'+name+'='+'([^&;]+?)(&|#|;|$)').exec(location.href)||[,""])[1].replace(/\+/g,'%20'))||null;
};
var app = new Vue({
el: '#app',
data: {
data1: {},
data2:[]
},
created: function() {
axios.get('/api2/demo?id='+getUrlKey('id')) // 需要预先在esap/sql/api2下定义demo模板
.then(r => { this.data1=r.data.data[0][0];this.data2=r.data.data[1] })
.catch(e => { console.log(e) })
}
})
</script>
</body>
</html>
实现步骤2：定义sql模板
在esap/sql/api2目录下新建一个test.get文件，里面定义demo模板
{{define "demo"}}
select 编号,日期,客户,总数量,总金额,物流进度 from demo where 编号=:id
select * from demod where 编号=:id
{{end}}
扫描二维码其实就是执行了这个查询，代入编号后的查询结果如图：
实现步骤3：定义esap查询
村长直接绑定了一个专属应用，其实也可以绑定菜单ID，注意原文URL填/static/app2?id={ {.p0} }，也就是web模板路径+查询参数
大功告成，可以去生成几个二维码扫描测试了！
小结
-
本案综合应用了esap的
数据api,web-server,微信查询。 -
本案涉及的文件已打包点击下载，欢迎下载玩耍。