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

ESAP4系列教程|APP自定义详情页


搭载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


近似文章