搭载esap4.0的ex-app来袭，自定义界面，快速定制你的APP
先看疗效
ex-app大量采用nxapp+自定义UI，本案采用表格展现销售订单明细数据，替换了原生详情页面的流式布局，查询时更简洁，更直观。
实现步骤
第一步，制作h5模板
在NX安装目录/web/目录下建立一个目录，例如esap，里面建立一个html文件，例如xsdd，作为销售订单的详情页面。
xsdd.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>
<th>单位</th>
</tr>
<tr v-for="item2,key2 in data2">
<td style="padding:6px">{{ item2.品号 }}</td>
<td>{{ item2.品名 }}</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('http://esap:9090/api2/xsdd?id='+getUrlKey('id')) // 需要在esap/sql/api2下定义xsdd模板
.then(r => {
this.data1=r.data.data[0][0]
this.data2=r.data.data[1]
})
.catch(e => { console.log(e) })
}
})
</script>
</body>
</html>
第二步，定义数据查询api
本案使用esap的数据api，当然，你也可以使用NX自带的api。
在esap/sql/api2/目录下建立xs.get文件
里面定义销售订单详情查询模板xsdd：
{{define "xsdd"}}
select 单号,日期,往来,往来号,制单 from 订单表 where recordid={{.id}}
select 品号,品名,规格,数量,单位 from 订单D where recordid={{.id}}
{{end}}
这里有两个语句，都是用URL中的id参数匹配recordid，一个查主表订单表，一个查明细订单D，选择部分字段用于展示。
第三步，设置发布APP
在设计器中设置销售订单模板属性-外部界面-【报表页面】，URL设为：esap/xsdd.html?id={RecordID}
完成
通过上述3步，就实现了详情页面自定义。
从原生的流式布局：
变为表格布局：
小结
-
使用vue+axios编写h5页面。
-
使用esap-api获取数据。
-
设置外部界面中的自定义URL，同理，列表也可以自定义，例如列表改成卡片式。
PS: 慧表NX外部界面需正式版特殊授权，试用版无此选项，特此提醒。
2019-08-01