ESAP达摩院 思想有多远,我们就能走多远

ESAP高级教程|自定义WEB查询

2018-12-22
     

本文手把手教你玩转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,微信查询

  • 本案涉及的文件已打包点击下载,欢迎下载玩耍。


近似文章