电子凭证PDF查询功能的实现
需求：根据凭证号、凭证类型、、区划、业务年度查询凭证，实现PDF凭证的下载。
View实现的效果：
首先需要一个对象：VoucherDTO_PDF【根据什么查询，就需要哪些字段】
package assp.evoucher.pdf.model;
import java.io.Serializable;
/**
* 业务系统与凭证库之间对账报文ＤＴＯ
* @author LY
*
*/
public class VoucherDTO_PDF implements Serializable{
private String admdivcode;
private String styear;
private String vt_code;
private String voucher_no;
public String getAdmdivcode() {
return admdivcode;
}
public void setAdmdivcode(String admdivcode) {
this.admdivcode = admdivcode;
}
public String getStyear() {
return styear;
}
public void setStyear(String styear) {
this.styear = styear;
}
public String getVt_code() {
return vt_code;
}
public void setVt_code(String vt_code) {
this.vt_code = vt_code;
}
public String getVoucher_no() {
return voucher_no;
}
public void setVoucher_no(String voucher_no) {
this.voucher_no = voucher_no;
}
}
简单看一下：textPDF.jsp和设计到的其中两个js文件textPDF.js pagingPDF.js
Ext.onReady(function() {
formate();
Ext.QuickTips.init();
loadAll = "<%=path%>/common/TextAllPDF.action";
voucherPDF_List = getGrid(loadAll, header, fileds, true, true);
voucherPDF_List.border = 0;
//按钮查询区
var centerPanel = Ext.create('Ext.form.Panel', {
border:1,
margins : '-1 -1 0 -1',
region : 'north',
items : [{
border:0,
bodyPadding : 10,
layout : 'hbox',
bodyStyle:'background:#dfe9f6;',
defaults : {
margins : '0 10 0 0'
},
autoScroll :true,
items : [
{
id:'vt_code',
fieldLabel : '凭证类型',
xtype : 'combo',
dataIndex : 'query_admdiv_Code',
displayField: 'vt_code',
valueField: 'vt_id' ,
labelWidth: 60,
width:280,
mode:'remote',
value:'dddd',
editable:false,
store:voucherStore,
forceSelection:true,
triggerAction:'all',
listeners : {
}
}, {
id:'styaer',
fieldLabel : '业务年度',
editable:false,
xtype : 'combo',
mode:'local',
value:current,
triggerAction:'all',
dataIndex : 'model_all',
displayField: 'year_name',
valueField: 'year' ,
store:yearStore,
labelWidth: 60,
width:280
},
{
id : 'erweima',
fieldLabel : '二维码',
xtype : 'textfield',
labelWidth : 60,
width:280
}
]},{
bodyStyle:'background:#dfe9f6;',
border:0,
bodyPadding : '0 10 10 10',
layout : 'hbox',
defaults : {
margins : '0 10 0 0'
},
autoScroll :true,
items:[{
id : 'admdivcode',
fieldLabel : '区划',
xtype : 'textfield',
labelWidth : 60,
width:280
},
{
id : 'star_no',
fieldLabel : '凭证号',
xtype : 'textfield',
labelWidth : 60,
width:280
}
, {
id : 'chaxun',
text : '刷新列表',
xtype: 'button',
width:140,
handler:function(){
//凭证类型
var vt_code=Ext.getCmp('vt_code').getValue();
//凭证年度
var styaer=Ext.getCmp('styaer').getValue();
//凭证区划
var admdivcode=Ext.getCmp('admdivcode').getValue();
//凭证号
var star_no=Ext.getCmp('star_no').getValue();
//alert(admdivcode+" "+star_no)
loadAllVerPDF = "<%=path%>/common/TextAllPDF.action?vt_code="+vt_code+"&styaer="+styaer+"&star_no="+star_no+"&admdivcode="+admdivcode;
//alert(loadAllVerPDF);
voucherPDF_List.store.proxy.url =loadAllVerPDF;
voucherPDF_List.getStore().currentPage = 1;
voucherPDF_List.getStore().load({
method : 'post',
timeout: 90000
});
}
}
]
}]
});
voucherPDF_List.store.proxy.url = loadAll;
//页面刷新
voucherPDF_List.getStore().load({
method : 'post'
});
Ext.create('Ext.Viewport', {
id : 'userFrame',
layout : 'border',
items : [centerPanel,voucherPDF_List]
});
});
</script>
这个.jsp文件中需要理解的是：
loadAll = "<%=path%>/common/TextAllPDF.action"; voucherPDF_List = getGrid(loadAll, header, fileds, true, true);
和
handler:function(){
//凭证类型
var vt_code=Ext.getCmp('vt_code').getValue();
//凭证年度
var styaer=Ext.getCmp('styaer').getValue();
//凭证区划
var admdivcode=Ext.getCmp('admdivcode').getValue();
//凭证号
var star_no=Ext.getCmp('star_no').getValue();
//alert(admdivcode+" "+star_no)
loadAllVerPDF = "<%=path%>/common/TextAllPDF.action?vt_code="+vt_code+"&styaer="+styaer+"&star_no="+star_no+"&admdivcode="+admdivcode;
//alert(loadAllVerPDF);
voucherPDF_List.store.proxy.url =loadAllVerPDF;
voucherPDF_List.getStore().currentPage = 1;
voucherPDF_List.getStore().load({
method : 'post',
timeout: 90000
});
textPDF.js
Ext.require(['*']);
/**
* 数据项
*/
var fileds = "voucher_no,admdivcode,vt_code,styear,download"; // 数据项
/**
* 列名
*/
var header = "凭证号|'voucher_no'|125,行政区划|'admdivcode'|125,凭证类型|'vt_code'|125,年度|'styear'|125,下载PDF凭证|'download'|120";
var yearStore = Ext.create('Ext.data.Store', {
fields : ['year', 'year_name'],
proxy: {
type: 'ajax',
url : '/realware/common/yearStore.action',
reader: {
root : 'data',
type: 'json'
}
}
});
var voucherStore= Ext.create('Ext.data.Store', {
fields : ['vt_id', 'vt_code'],
proxy: {
type: 'ajax',
url : '/realware/common/voucherStore.action',
reader: {
root : 'data',
type: 'json'
}
}
});
var orgStore= Ext.create('Ext.data.Store', {
fields : ['valueid', 'queue_name'],
proxy: {
type: 'ajax',
url : '/realware/common/orgStore.action',
reader: {
root : 'data',
type: 'json'
}
}
});
voucherStore.load({
method : 'post',
params : {
field : "vt_id,vt_code"
}
});
orgStore.load({
method : 'post',
params : {
field : "valueid,queue_name"
}
});
yearStore.load({
method : 'post',
params : {
field : "year,year_name"
}
});
function download(voucher_no,admdivcode,vt_code,styear,DCode){
//二维码
var DCode=Ext.getCmp('erweima').getValue();
window.open("http://127.0.0.1:8080/realware/common/export.action?voucher_no="+voucher_no+"&admdivcode="+admdivcode+"&vt_code="+vt_code+"&styear="+styear+"&certID="+111+"&pageNo="+1+"&2DCode="+DCode);
}
这个地方需要理解：对于年度的下拉框的数据是通过后台：传递进去的。url : '/realware/common/yearStore.action',
还有要注意的是：
var fileds = "voucher_no,admdivcode,vt_code,styear,download"; // 数据项 /** * 列名 */ var header = "凭证号|'voucher_no'|125,行政区划|'admdivcode'|125,凭证类型|'vt_code'|125,年度|'styear'|125,下载PDF凭证|'download'|120";
对于数据项要注意这个列名和数据项。
其中有一个download这是一个超链接，但是这里我们看不出来，在后台传递过来之前处理的。
下面的pagePDF.jsp是我们写的一个工具方法：关于Grid的工具方法：（理解即可）
/*******************************************************************************
*
* @param urlpath
* 数据集路径
* @param header
* 列英文名和列中文名
* @param fileds
* 列dto字段
* @param check
* 是否显示checkbox
* @param paging
* 是否显示分页
* @return
*/
var itemsPerPage = 20; // set the number of items you want per page
var h = window.screen.availHeight-400;
function getGrid(urlpath,header, fileds, check, paging, viewConfig, colorStr, colorFieldStr) {
var columns = getColModel(header, fileds);
var store = getStore(urlpath,fileds);
var pagetool = pagingTool(store);
var grid = null;
if (check && paging) {
grid = Ext.create('Ext.grid.Panel', {
region : 'west',
height : h,
width: 660,
selType : 'checkboxmodel',
enableKeyNav : true,
multiSelect : true,
simpleSelect : true,
selModel : {
mode : 'multi',
checkOnly : true
},
pageSize: itemsPerPage,
store : store,
columns : columns,
loadMask : {
msg : '数据加载中,请稍等...'
},
bbar : pagetool,
viewConfig : {
forceFit : true,
getRowClass:function(record,index,p,ds) {
if(viewConfig){
if(colorStr != null && colorFieldStr != null){
if (record.data[colorFieldStr]+"" == "-1") {
if(colorStr == "red"){
cls = "red-row";
}else if(colorStr == "blue"){
cls = "blue-row";
}else if(colorStr == "yellow"){
cls = "yellow-row";
}else{
cls = 'white-row';
}
}
}
return cls;
}
}
}
});
}else if(paging){
grid = Ext.create('Ext.grid.Panel', {
region : 'west',
height : h,
width: 660,
store : store,
columns : columns,
pageSize: itemsPerPage,
loadMask : {
msg : '数据加载中,请稍等...'
},
bbar : pagetool,
viewConfig : {
forceFit : true,
getRowClass:function(record,index,p,ds) {
if(viewConfig){
var cls = 'white-row';
if(colorStr != null && colorFieldStr != null){
if (record.data[colorFieldStr] + "" == "-1") {
if(colorStr == "red"){
cls = "red-row";
}else if(colorStr == "blue"){
cls = "blue-row";
}else if(colorStr == "yellow"){
cls = "yellow-row";
}else{
cls = 'white-row';
}
}
}
return cls;
}
}
}
});
}else if(check){
grid = Ext.create('Ext.grid.Panel', {
region : 'west',
autoHeight: true,
width: 660,
selType : 'checkboxmodel',
store : store,
columns : columns,
loadMask : {
msg : '数据加载中,请稍等...'
},
viewConfig : {
forceFit : true,
getRowClass:function(record,index,p,ds) {
if(viewConfig){
var cls = 'white-row';
if(colorStr != null && colorFieldStr != null){
var cls = 'white-row';
if (record.data["checkstatus"] + "" == "-1") {
if(colorStr == "red"){
cls = "red-row";
}else if(colorStr == "blue"){
cls = "blue-row";
}else if(colorStr == "yellow"){
cls = "yellow-row";
}else{
cls = 'white-row';
}
}
}
return cls;
}
}
}
});
}else{
grid = Ext.create('Ext.grid.Panel', {
region : 'west',
autoHeight: true,
width: 660,
checkOnly : true,
store : store,
columns : columns,
loadMask : {
msg : '数据加载中,请稍等...'
},
viewConfig : {
forceFit : true,
getRowClass:function(record,index,p,ds) {
if(viewConfig){
var cls = 'white-row';
if(colorStr != null && colorFieldStr != null){
var cls = 'white-row';
if (record.data["checkstatus"] + "" == "-1") {
if(colorStr == "red"){
cls = "red-row";
}else if(colorStr == "blue"){
cls = "blue-row";
}else if(colorStr == "yellow"){
cls = "yellow-row";
}else{
cls = 'white-row';
}
}
}
return cls;
}
}
}
});
}
return grid;
}
// 返回表头
function getColModel(header, filed) {
var fields = filed.split(",");
var headers = header.split(",");
// 获得列对对象
var col = "[new Ext.grid.RowNumberer({width:30}),";
for ( var i = 0; i < headers.length; i++) {
var h = headers[i];
var fun = "";
var len = 110;
if (headers[i].indexOf("|") > 0) {
var hs = headers[i].split("|");
h = hs[0];
fun = hs[1];
if(hs.length==3){
len = hs[2];
}
if(fun =="'href'"){
if(i!=0 ){
col = col + "{header:'" + h
+ "',width: "+hs[2]+",dataIndex:'" + fields[i]
+ "',align:'center',sortable: false,renderer:function(value){ return \"<a href=javascript:"+hs[4]+"() >"+hs[3]+"</a>\";}},";
}
}else if(fun =="'check_status_display'"||fun =="'src_status_display'"||
fun =="'destn_status_display'"){
col = col + "{header:'" + h
+ "',width: "+hs[2]+",dataIndex:'" + fields[i]
+ "',align:'center',sortable: true,renderer:"+hs[3]+"},";
}else if(fun =="'do1'"){
if(hs[4] != null){
col = col + "{xtype: 'actioncolumn',text: '"+h+"',width: 100,items: [{tooltip:'"+
h+"',icon: '/realware/resources/images/"+hs[4]+".png',handler: function (grid, rowIndex, colIndex, node, e, record, rowEl) {"+
hs[3]+"(grid, rowIndex, colIndex, node, e, record, rowEl);}}]}, ";
}else{
col = col + "{xtype: 'actioncolumn',text: '"+h+"',width: 100,items: [{tooltip:'"+
h+"',icon: '/realware/resources/images/query.png',handler: function (grid, rowIndex, colIndex, node, e, record, rowEl) {"+
hs[3]+"(grid, rowIndex, colIndex, node, e, record, rowEl);}}]}, ";
}
}else if(fun =="'userRoleOp_id'"){
col = col + "{header:'" + h
+ "',sortable: true,dataIndex:'" + fields[i]
+ "',text:" + fun + ", hidden : true},";
//统一数据绑定时的回调函数renderData
}else if(fun =="'renderData'"){
col = col + "{header:'" + h
+ "',width: "+hs[2]+",dataIndex:'" + fields[i]
+ "',align:'center',sortable: true,renderer:"+hs[3]+"},";
}else{
var a = fun.indexOf("amount") > 0 ?"right":"left";
if(len>0){
col = col + "{header:'" + h
+ "',sortable: true,dataIndex:'" + fields[i]
+ "',width:"+len+",align:'"+a+"',text:" + fun + "},";
}else{
col = col + "{header:'" + h
+ "',sortable: true,dataIndex:'" + fields[i]
+ "',flex:1,align:'"+a+"',text:" + fun + "},";
}
}
} else {
col = col + "{header:'" + h
+ "',align:'center',sortable: true,dataIndex:'" + fields[i]
+ "'},";
}
}
if (col != "[") {
col = col.replace(/^\s+|\s+$/g, "");
col = col.substring(0, col.length - 1);
}
col = col + "]";
return strToJson(col);
}
function getFiled(filed) {
var fields = filed.split(",");
var filed = "[";
for ( var i = 0; i < fields.length; i++) {
filed = filed + "{name: '" + fields[i] + "'},";
}
filed = filed.substring(0, filed.length - 1);
filed = filed + "]";
return strToJson(filed);
}
// 返回分页工具条
function pagingTool(store) {
var pagetool = new Ext.PagingToolbar( {
store : store,
displayInfo : true,
displayMsg : '显示第{0}条到{1}条记录 ，一共{2}条',
emptyMsg : "没有记录"
});
pagetool.child('#refresh').hide(true);
return pagetool;
}
// eval关于作用域浏览器见不一致
function strToJson(str) {
var json = (new Function("return " + str))();
return json;
}
function getStore(urlpath, fileds) {
var fields = getFiled(fileds);
var store = new Ext.data.JsonStore( {
proxy: {
type: 'ajax',
url : urlpath,
timeout: 90000,
reader: {
type: 'json',
root: 'data',
totalProperty : 'recordCount'
}
},
pageSize: itemsPerPage,
//remoteSort : true,
fields : fields,
autoLoad : false
});
return store;
}
最终要的就是后台的实现：非常重要：
package assp.evoucher.pdf.test.action;
import grp.pt.common.action.BaseAction;
import grp.pt.util.Pagination;
import java.net.URLDecoder;
import java.text.SimpleDateFormat;
import java.util.ArrayList;
import java.util.Date;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
import javax.servlet.http.HttpServletRequest;
import net.sf.json.JSONObject;
import org.apache.commons.beanutils.BeanUtils;
import org.apache.struts2.ServletActionContext;
import assp.evoucher.pdf.model.VoucherDTO_PDF;
import assp.evoucher.pdf.test.IVoucher4TestCSharp;
/**
*
* @author dd
* @version 2013-08-26
*/
public class TextVoucherActionPDF extends BaseAction {
private IVoucher4TestCSharp voucher4TestCSharp;
public IVoucher4TestCSharp getVoucher4TestCSharp() {
return voucher4TestCSharp;
}
public void setVoucher4TestCSharp(IVoucher4TestCSharp voucher4TestCSharp) {
this.voucher4TestCSharp = voucher4TestCSharp;
}
//获取列表
@SuppressWarnings("unchecked")
public String loadAllVer() throws Exception {
HttpServletRequest res = ServletActionContext.getRequest();
String admdivcode=res.getParameter("admdivcode");
String DCode=res.getParameter("erweima");
String styeay=null;
String page = res.getParameter("page");
String limit = res.getParameter("limit");
int curPage = 0,pageSize = 0;
if(page != null){
curPage = Integer.parseInt(page);
}
if(limit !=null){
pageSize = Integer.parseInt(limit);
}
Pagination _page = null;
if("".equals(res.getParameter("styaer"))){
Date dt=new Date();
SimpleDateFormat matter1=new SimpleDateFormat("yyyy-MM-dd");
String currenttime=matter1.format(dt);
String[] currenttimeyear=currenttime.split("-");
styeay=currenttimeyear[0];
}else{
styeay=res.getParameter("styaer");
}
String vtcode=res.getParameter("vt_code");
if("dddd".equals(vtcode)){
vtcode="";
}
String star_voucherno= getValueFromRequest("star_no");
// 解决乱码问题
if(star_voucherno != null && !"null".equals(star_voucherno)){
star_voucherno = URLDecoder.decode(star_voucherno, "UTF-8");
}else{
star_voucherno = "";
}
String orgname=res.getParameter("org");
String neworgname=null;
if(orgname == null || "".equals(orgname.trim())){
neworgname=null;
}else{
if("allorg".equals(orgname)){
neworgname=null;
}else{
neworgname = URLDecoder.decode(orgname, "UTF-8");
}
}
List<VoucherDTO_PDF>list=null;
List<Map<String,String>> listMap=null;
//System.out.println("admdivcode:"+admdivcode+" styeay "+styeay+" vtcode"+vtcode+" star_voucherno"+star_voucherno);
_page=voucher4TestCSharp.queryForPagePDF(admdivcode,styeay,
vtcode,star_voucherno,curPage, pageSize);
if(_page!=null){
list = _page.getResultList();
}
listMap = new ArrayList<Map<String,String>>();
for(VoucherDTO_PDF newVoucherDTO_PDF:list){
Map<String,String> map = null;
map = BeanUtils.describe(newVoucherDTO_PDF);
String voucher_no=newVoucherDTO_PDF.getVoucher_no();
String quhua_code=newVoucherDTO_PDF.getAdmdivcode();
String vt_code=newVoucherDTO_PDF.getVt_code();
String styear=newVoucherDTO_PDF.getStyear();
map.put("download", "<a href=javascript:download('"+voucher_no+"','"+quhua_code+"','"+vt_code+"','"+styear+"')>下凭证载</a>");
listMap.add(map);
}
Map<String,List<Map<String,String>>> resultMap = new HashMap<String,List<Map<String,String>>>();
resultMap.put("data", listMap);
JSONObject jo = JSONObject.fromObject(resultMap);
jo.put("recordCount", _page.getTotalRows());
this.actionWrite(jo.toString());
return null;
}
}
我们关键看一下这个东西：map.put("download", "<a href=javascript:download('"+voucher_no+"','"+quhua_code+"','"+vt_code+"','"+styear+"')>下凭证载</a>");
我方传递到前台的是一个超练级：所以看到我们的页面上是一个超链接：
注意这个Key一定要是download和前台的对应才行。
而且传递过去的参数一定要用单引号引起来，这点非常重要： "<a href=javascript:download('"+voucher_no+"','"+quhua_code+"','"+vt_code+"','"+styear+"')>下凭证载</a>"
而且前台必定有一个download方法：在textPDF.js中
function download(voucher_no,admdivcode,vt_code,styear,DCode){
//二维码
var DCode=Ext.getCmp('erweima').getValue();
window.open("http://127.0.0.1:8080/realware/common/export.action?voucher_no="+voucher_no+"&admdivcode="+admdivcode+"&vt_code="+vt_code+"&styear="+styear+"&certID="+111+"&pageNo="+1+"&2DCode="+DCode);
}
注意，我们是要把参数传递给一个WebService的，即将凭证号，凭证类型，区划和业务年度传递过去。用Ext中Ajax是不能传递发送请求转发跳转到另外一个页面实现下载功能的，所以用了：window.open转向另外一个页面。传递参数过去调用WebService接口实现下载功能。